From 2d0d09591263c0878f9c082637d6bbd7978b6c66 Mon Sep 17 00:00:00 2001
From: WangJian <1925432244@qq.com>
Date: Sun, 19 Mar 2017 09:45:11 +0800
Subject: [PATCH 01/13] NIFI-3603:Updated nifi-web-ui POM to add localization
 files

---
 .../nifi-framework/nifi-web/nifi-web-ui/pom.xml          | 9 +++++++++
 1 file changed, 9 insertions(+)

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 9108fe75774a..1ddf5d72ef7e 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
@@ -264,6 +264,14 @@
                 <configuration>
                     <webXml>${staging.dir}/WEB-INF/web.xml</webXml>
                     <webResources>
+                        <resource>
+                            <directory>src/main/java</directory>
+                            <targetPath>WEB-INF/classes</targetPath>
+                            <includes>
+                                <include>*.properties</include>
+                            </includes>
+                            <filtering>true</filtering>
+                        </resource>
                         <resource>
                             <directory>src/main/webapp/WEB-INF/pages</directory>
                             <targetPath>WEB-INF/pages</targetPath>
@@ -867,6 +875,7 @@
                                 js/nf/bulletin-board/nf-bulletin-board-all.js.gz,
                                 js/nf/login/nf-login-all.js,
                                 js/nf/login/nf-login-all.js.gz,
+                                js/nf/globalization/resources.js,
                                 views/*,
                                 fonts/**/*,
                                 images/*,

From abf1ed3cd63b89c06945273783c7826ba6d7f9c7 Mon Sep 17 00:00:00 2001
From: WangJian <1925432244@qq.com>
Date: Sun, 19 Mar 2017 10:03:24 +0800
Subject: [PATCH 02/13] NIFI-3603:Updated WEB-INF to add jstl dependencies to
 the jsp files and the jstl configuration in web.xml

---
 .../webapp/WEB-INF/pages/bulletin-board.jsp   |  1 +
 .../src/main/webapp/WEB-INF/pages/canvas.jsp  |  1 +
 .../src/main/webapp/WEB-INF/pages/cluster.jsp |  1 +
 .../main/webapp/WEB-INF/pages/counters.jsp    |  1 +
 .../src/main/webapp/WEB-INF/pages/history.jsp |  1 +
 .../src/main/webapp/WEB-INF/pages/login.jsp   |  1 +
 .../main/webapp/WEB-INF/pages/provenance.jsp  |  1 +
 .../src/main/webapp/WEB-INF/pages/summary.jsp |  1 +
 .../main/webapp/WEB-INF/pages/templates.jsp   |  1 +
 .../src/main/webapp/WEB-INF/pages/users.jsp   |  1 +
 .../webapp/WEB-INF/partials/banners-main.jsp  |  1 +
 .../WEB-INF/partials/banners-utility.jsp      |  1 +
 .../bulletin-board/bulletin-board-content.jsp | 18 +++--
 .../WEB-INF/partials/canvas/about-dialog.jsp  | 10 +--
 .../WEB-INF/partials/canvas/canvas-header.jsp | 29 +++----
 .../canvas/component-state-dialog.jsp         | 14 ++--
 .../canvas/connection-configuration.jsp       | 58 ++++++++------
 .../partials/canvas/connections-dialog.jsp    |  7 +-
 .../controller-service-configuration.jsp      | 14 ++--
 .../disable-controller-service-dialog.jsp     | 23 +++---
 .../canvas/drop-request-status-dialog.jsp     |  1 +
 .../enable-controller-service-dialog.jsp      | 18 +++--
 .../partials/canvas/fill-color-dialog.jsp     | 11 +--
 .../WEB-INF/partials/canvas/flow-status.jsp   |  4 +-
 .../canvas/flowfile-details-dialog.jsp        | 33 ++++----
 .../canvas/instantiate-template-dialog.jsp    |  3 +-
 .../partials/canvas/label-configuration.jsp   |  5 +-
 .../canvas/listing-request-status-dialog.jsp  |  1 +
 .../WEB-INF/partials/canvas/navigation.jsp    | 64 +++++++++------
 .../canvas/new-controller-service-dialog.jsp  | 10 ++-
 .../partials/canvas/new-port-dialog.jsp       |  3 +-
 .../canvas/new-process-group-dialog.jsp       |  3 +-
 .../partials/canvas/new-processor-dialog.jsp  | 10 ++-
 .../new-remote-process-group-dialog.jsp       | 46 ++++++-----
 .../canvas/new-reporting-task-dialog.jsp      | 12 +--
 .../partials/canvas/new-template-dialog.jsp   |  5 +-
 .../canvas/override-policy-dialog.jsp         |  7 +-
 .../partials/canvas/policy-management.jsp     | 22 +++---
 .../partials/canvas/port-configuration.jsp    | 14 ++--
 .../WEB-INF/partials/canvas/port-details.jsp  |  7 +-
 .../canvas/process-group-configuration.jsp    | 16 ++--
 .../canvas/processor-configuration.jsp        | 79 +++++++++++--------
 .../WEB-INF/partials/canvas/queue-listing.jsp |  8 +-
 .../canvas/remote-port-configuration.jsp      | 10 ++-
 .../remote-process-group-configuration.jsp    | 47 ++++++-----
 .../canvas/remote-process-group-details.jsp   | 49 +++++++-----
 .../canvas/remote-process-group-ports.jsp     |  9 ++-
 .../canvas/reporting-task-configuration.jsp   | 21 ++---
 .../partials/canvas/search-users-dialog.jsp   |  8 +-
 .../partials/canvas/settings-content.jsp      | 25 +++---
 .../webapp/WEB-INF/partials/canvas/shell.jsp  |  7 +-
 .../canvas/upload-template-dialog.jsp         |  6 +-
 .../partials/cluster/cluster-content.jsp      | 13 +--
 .../partials/cluster/node-details-dialog.jsp  |  7 +-
 .../WEB-INF/partials/connection-details.jsp   | 34 ++++----
 .../partials/counters/counters-content.jsp    | 13 +--
 .../history/action-details-dialog.jsp         |  1 +
 .../partials/history/history-content.jsp      | 20 +++--
 .../history/history-filter-dialog.jsp         | 23 +++---
 .../partials/history/history-purge-dialog.jsp | 11 ++-
 .../WEB-INF/partials/login/login-form.jsp     | 13 +--
 .../WEB-INF/partials/login/login-message.jsp  |  1 +
 .../WEB-INF/partials/login/login-progress.jsp |  1 +
 .../partials/login/login-submission.jsp       |  3 +-
 .../webapp/WEB-INF/partials/message-pane.jsp  |  5 +-
 .../webapp/WEB-INF/partials/ok-dialog.jsp     |  1 +
 .../WEB-INF/partials/processor-details.jsp    | 54 +++++++------
 .../provenance/lineage-query-dialog.jsp       |  1 +
 .../provenance/provenance-content.jsp         | 23 +++---
 .../provenance-event-details-dialog.jsp       | 67 ++++++++--------
 .../provenance/provenance-query-dialog.jsp    |  1 +
 .../provenance/provenance-search-dialog.jsp   | 37 +++++----
 .../partials/status-history-dialog.jsp        |  6 +-
 .../cluster-connection-summary-dialog.jsp     |  6 +-
 .../cluster-input-port-summary-dialog.jsp     |  6 +-
 .../cluster-output-port-summary-dialog.jsp    |  6 +-
 .../cluster-process-group-summary-dialog.jsp  |  6 +-
 .../cluster-processor-summary-dialog.jsp      |  6 +-
 ...er-remote-process-group-summary-dialog.jsp |  6 +-
 .../partials/summary/summary-content.jsp      | 19 +++--
 .../summary/system-diagnostics-dialog.jsp     | 65 +++++++--------
 .../summary/view-single-node-dialog.jsp       |  3 +-
 .../partials/templates/templates-content.jsp  | 13 +--
 .../partials/users/user-delete-dialog.jsp     |  3 +-
 .../WEB-INF/partials/users/user-dialog.jsp    | 11 +--
 .../partials/users/user-policies-dialog.jsp   |  8 +-
 .../WEB-INF/partials/users/users-content.jsp  | 13 +--
 .../webapp/WEB-INF/partials/yes-no-dialog.jsp |  1 +
 .../src/main/webapp/WEB-INF/web.xml           | 10 ++-
 89 files changed, 751 insertions(+), 515 deletions(-)

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/bulletin-board.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/bulletin-board.jsp
index 62e3320a455b..9e36d11f13d6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/bulletin-board.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/bulletin-board.jsp
@@ -48,6 +48,7 @@
         <script type="text/javascript" src="assets/angular-material/angular-material.min.js"></script>
         <script type="text/javascript" src="js/nf/nf-namespace.js?${project.version}"></script>
         <script type="text/javascript" src="js/nf/nf-ng-namespace.js?${project.version}"></script>
+        <script type="text/javascript" src="js/nf/globalization/resources.js"></script>
         ${nf.bulletin.board.script.tags}
     </head>
     <body ng-controller="ngBulletinBoardAppCtrl">
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 48db66e84c32..eb0ef66d4249 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
@@ -76,6 +76,7 @@
         <script type="text/javascript" src="js/nf/nf-namespace.js?${project.version}"></script>
         <script type="text/javascript" src="js/nf/nf-ng-namespace.js?${project.version}"></script>
         <script type="text/javascript" src="js/nf/canvas/nf-ng-canvas-namespace.js?${project.version}"></script>
+        <script type="text/javascript" src="js/nf/globalization/resources.js"></script>
         ${nf.canvas.script.tags}
         <script type="text/javascript" src="js/jquery/nfeditor/languages/nfel.js?${project.version}"></script>
         <script type="text/javascript" src="js/jquery/nfeditor/jquery.nfeditor.js?${project.version}"></script>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/cluster.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/cluster.jsp
index 4814f412e849..f5b6901e050e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/cluster.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/cluster.jsp
@@ -53,6 +53,7 @@
         <script type="text/javascript" src="assets/slickgrid/slick.core.js"></script>
         <script type="text/javascript" src="assets/slickgrid/slick.grid.js"></script>
         <script type="text/javascript" src="js/nf/nf-namespace.js?${project.version}"></script>
+        <script type="text/javascript" src="js/nf/globalization/resources.js"></script>
         ${nf.cluster.script.tags}
     </head>
     <body>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/counters.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/counters.jsp
index 1d5f1ab33966..b8dadb66b626 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/counters.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/counters.jsp
@@ -52,6 +52,7 @@
         <script type="text/javascript" src="assets/slickgrid/slick.core.js"></script>
         <script type="text/javascript" src="assets/slickgrid/slick.grid.js"></script>
         <script type="text/javascript" src="js/nf/nf-namespace.js?${project.version}"></script>
+        <script type="text/javascript" src="js/nf/globalization/resources.js"></script>
         ${nf.counters.script.tags}
     </head>
     <body>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/history.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/history.jsp
index f86c5f48f1c1..2b3825057000 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/history.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/history.jsp
@@ -52,6 +52,7 @@
         <script type="text/javascript" src="assets/slickgrid/slick.core.js"></script>
         <script type="text/javascript" src="assets/slickgrid/slick.grid.js"></script>
         <script type="text/javascript" src="js/nf/nf-namespace.js?${project.version}"></script>
+        <script type="text/javascript" src="js/nf/globalization/resources.js"></script>
         ${nf.history.script.tags}
     </head>
     <body>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/login.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/login.jsp
index 26b6dba3e1eb..1efa0af3c647 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/login.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/login.jsp
@@ -39,6 +39,7 @@
         <script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script>
         <script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
         <script type="text/javascript" src="js/nf/nf-namespace.js?${project.version}"></script>
+        <script type="text/javascript" src="js/nf/globalization/resources.js"></script>
         ${nf.login.script.tags}
     </head>
     <body class="login-body">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/provenance.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/provenance.jsp
index b4eb6a035b97..8a44a0db254b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/provenance.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/provenance.jsp
@@ -63,6 +63,7 @@
         <script type="text/javascript" src="assets/angular-material/angular-material.min.js"></script>
         <script type="text/javascript" src="js/nf/nf-namespace.js?${project.version}"></script>
         <script type="text/javascript" src="js/nf/nf-ng-namespace.js?${project.version}"></script>
+        <script type="text/javascript" src="js/nf/globalization/resources.js"></script>
         ${nf.provenance.script.tags}
     </head>
     <body ng-controller="ngProvenanceAppCtrl">
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 1746e6bcab7d..7570e4d26761 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
@@ -69,6 +69,7 @@
         <script type="text/javascript" src="assets/angular-material/angular-material.min.js"></script>
         <script type="text/javascript" src="js/nf/nf-namespace.js?${project.version}"></script>
         <script type="text/javascript" src="js/nf/nf-ng-namespace.js?${project.version}"></script>
+        <script type="text/javascript" src="js/nf/globalization/resources.js"></script>
         ${nf.summary.script.tags}
         <script type="text/javascript" src="js/jquery/nfeditor/languages/nfel.js?${project.version}"></script>
         <script type="text/javascript" src="js/jquery/nfeditor/jquery.nfeditor.js?${project.version}"></script>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/templates.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/templates.jsp
index be0ad6d37275..138a1d8e21e2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/templates.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/templates.jsp
@@ -52,6 +52,7 @@
         <script type="text/javascript" src="assets/slickgrid/slick.core.js"></script>
         <script type="text/javascript" src="assets/slickgrid/slick.grid.js"></script>
         <script type="text/javascript" src="js/nf/nf-namespace.js?${project.version}"></script>
+        <script type="text/javascript" src="js/nf/globalization/resources.js"></script>
         ${nf.templates.script.tags}
     </head>
     <body>
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 42d07914cb2d..e148c8dccfd1 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
@@ -55,6 +55,7 @@
         <script type="text/javascript" src="assets/slickgrid/slick.grid.js"></script>
         <script type="text/javascript" src="js/nf/nf-namespace.js?${project.version}"></script>
         <script type="text/javascript" src="js/nf/nf-ng-namespace.js?${project.version}"></script>
+        <script type="text/javascript" src="js/nf/globalization/resources.js"></script>
         ${nf.users.script.tags}
         <script type="text/javascript" src="js/jquery/propertytable/jquery.propertytable.js?${project.version}"></script>
         <script type="text/javascript" src="js/jquery/nfeditor/languages/nfel.js?${project.version}"></script>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/banners-main.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/banners-main.jsp
index 7950bbb83e95..e6b1826f16fc 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/banners-main.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/banners-main.jsp
@@ -15,5 +15,6 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="banner-header" class="main-banner-header"></div>
 <div id="banner-footer" class="main-banner-footer"></div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/banners-utility.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/banners-utility.jsp
index 33e4c41bfe05..d35641400020 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/banners-utility.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/banners-utility.jsp
@@ -15,5 +15,6 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="banner-header" class="utility-banner-header"></div>
 <div id="banner-footer" class="utility-banner-footer"></div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/bulletin-board/bulletin-board-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/bulletin-board/bulletin-board-content.jsp
index 39fa055a7932..078e38492466 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/bulletin-board/bulletin-board-content.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/bulletin-board/bulletin-board-content.jsp
@@ -15,12 +15,14 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="bulletin-board">
     <div id="bulletin-board-header-and-filter">
-        <div id="bulletin-board-header-text">NiFi Templates</div>
+        <div id="bulletin-board-header-text"><fmt:message key="partials.bulletin-board.bulletin-board-content.bulletin-board-header-text"/></div>
         <div id="bulletin-board-filter-controls">
             <div id="bulletin-board-filter-container" class="filter-container">
-                <input type="text" placeholder="Filter" id="bulletin-board-filter" class="filter"/>
+            	<fmt:message key="partials.bulletin-board.bulletin-board-content.bulletin-board-filter" var="filter"/>
+                <input type="text" placeholder="${filter}" id="bulletin-board-filter" class="filter"/>
                 <div id="bulletin-board-filter-type" class="filter-type"></div>
             </div>
         </div>
@@ -28,16 +30,18 @@
     <div id="bulletin-board-container"></div>
 </div>
 <div id="bulletin-board-refresh-container">
-    <md-switch class="md-primary refresh-toggle" aria-label="Toggle auto refresh" ng-change="appCtrl.serviceProvider.bulletinBoardCtrl.togglePolling()" ng-model="appCtrl.serviceProvider.bulletinBoardCtrl.polling">
-        Auto-refresh
+	<fmt:message key="partials.bulletin-board.bulletin-board-content.refresh-toggle" var="toggle"/>
+    <md-switch class="md-primary refresh-toggle" aria-label="${toggle}" ng-change="appCtrl.serviceProvider.bulletinBoardCtrl.togglePolling()" ng-model="appCtrl.serviceProvider.bulletinBoardCtrl.polling">
+        <fmt:message key="partials.bulletin-board.bulletin-board-content.bulletin-board-refresh-container"/>
     </md-switch>
-    <button id="refresh-button" ng-click="appCtrl.serviceProvider.bulletinBoardCtrl.loadBulletins()" class="refresh-button pointer fa fa-refresh" title="Start/Stop auto refresh"></button>
+    <fmt:message key="partials.bulletin-board.bulletin-board-content.bulletin-board-last-refreshed-container" var="autorefresh"/>
+    <button id="refresh-button" ng-click="appCtrl.serviceProvider.bulletinBoardCtrl.loadBulletins()" class="refresh-button pointer fa fa-refresh" title="${autorefresh}"></button>
     <div id="bulletin-board-last-refreshed-container" class="last-refreshed-container">
-        Last updated:&nbsp;<span id="bulletin-board-last-refreshed" class="value-color"></span>
+        <fmt:message key="partials.bulletin-board.bulletin-board-content.bulletin-board-last-refreshed-container"/>:&nbsp;<span id="bulletin-board-last-refreshed" class="value-color"></span>
     </div>
     <div id="bulletin-board-loading-container" class="loading-container"></div>
     <div id="bulletin-board-status-container">
         <div id="bulletin-error-message"></div>
-        <span id="clear-bulletins-button" class="link pointer">Clear</span>
+        <span id="clear-bulletins-button" class="link pointer"><fmt:message key="partials.bulletin-board.Clear"/></span>
     </div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/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 6453da6deb23..66677c59a368 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
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="nf-about">
     <div id="nf-about-pic-container">
         <div id="nf-about-pic"></div>
@@ -27,17 +28,14 @@
                     <span id="nf-about-build-timestamp"></span>
                 </p>
                 <p id="nf-version-detail-tag">
-                    Tagged <span id="nf-about-build-tag"></span>
+                    <fmt:message key="partials.canvas.about-dailog.Tagged"/> <span id="nf-about-build-tag"></span>
                 </p>
                 <p id="nf-version-detail-commit">
-                    From <span id="nf-about-build-revision"></span> on branch <span id="nf-about-build-branch"></span>
+                    <fmt:message key="partials.canvas.about-dailog.From"/> <span id="nf-about-build-revision"></span> <fmt:message key="partials.canvas.about-dailog.OnBranch"/> <span id="nf-about-build-branch"></span>
                 </p>
             </div>
             <p>
-                Apache NiFi is a framework to support highly scalable and flexible dataflows.
-                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.
+                <fmt:message key="partials.canvas.about-dailog.nf-version"/>
             </p>
         </div>
     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp
index c7064f8ff7bc..154f9e268166 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <md-toolbar id="header" layout-align="space-between center" layout="row" class="md-small md-accent md-hue-1">
     <img id="nifi-logo" src="images/nifi-logo.svg">
     <div flex layout="row" layout-align="space-between center">
@@ -85,11 +86,11 @@
                 </div>
                 <div id="login-link-container">
                     <span id="login-link" class="link"
-                          ng-click="appCtrl.serviceProvider.headerCtrl.loginCtrl.shell.launch();">log in</span>
+                          ng-click="appCtrl.serviceProvider.headerCtrl.loginCtrl.shell.launch();"><fmt:message key="partials.canvas.canvas-header.login"/></span>
                 </div>
                 <div id="logout-link-container" style="display: none;">
                     <span id="logout-link" class="link"
-                          ng-click="appCtrl.serviceProvider.headerCtrl.logoutCtrl.logout();">log out</span>
+                          ng-click="appCtrl.serviceProvider.headerCtrl.logoutCtrl.logout();"><fmt:message key="partials.canvas.canvas-header.logout"/></span>
                 </div>
             </div>
             <md-menu md-position-mode="target-right target" md-offset="-1 44">
@@ -100,20 +101,20 @@
                     <md-menu-item layout-align="space-around center">
                         <a id="reporting-link"
                            ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.summary.shell.launch();">
-                            <i class="fa fa-table"></i>Summary
+                            <i class="fa fa-table"></i><fmt:message key="partials.canvas.canvas-header.reporting-link"/>
                         </a>
                     </md-menu-item>
                     <md-menu-item layout-align="space-around center">
                         <a id="counters-link"
                            ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.counters.shell.launch();"
                            ng-class="{disabled: !appCtrl.nf.Common.canAccessCounters()}">
-                            <i class="icon icon-counter"></i>Counters
+                            <i class="icon icon-counter"></i><fmt:message key="partials.canvas.canvas-header.counters-link"/>
                         </a>
                     </md-menu-item>
                     <md-menu-item layout-align="space-around center">
                         <a id="bulletin-board-link"
                            ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.bulletinBoard.shell.launch();">
-                            <i class="fa fa-sticky-note-o"></i>Bulletin Board
+                            <i class="fa fa-sticky-note-o"></i></i><fmt:message key="partials.canvas.canvas-header.bulletin-board-link"/>
                         </a>
                     </md-menu-item>
                     <md-menu-divider></md-menu-divider>
@@ -122,14 +123,14 @@
                         <a id="provenance-link"
                            ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.dataProvenance.shell.launch();"
                            ng-class="{disabled: !appCtrl.nf.Common.canAccessProvenance()}">
-                            <i class="icon icon-provenance"></i>Data Provenance
+                            <i class="icon icon-provenance"></i><fmt:message key="partials.canvas.canvas-header.provenance-link"/>
                         </a>
                     </md-menu-item>
                     <md-menu-divider></md-menu-divider>
                     <md-menu-item layout-align="space-around center">
                         <a id="flow-settings-link"
                            ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.controllerSettings.shell.launch();">
-                            <i class="fa fa-wrench"></i>Controller Settings
+                            <i class="fa fa-wrench"></i><fmt:message key="partials.canvas.canvas-header.flow-settings-link"/>
                         </a>
                     </md-menu-item>
                     <md-menu-item ng-if="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.cluster.visible();"
@@ -137,13 +138,13 @@
                         <a id="cluster-link"
                            ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.cluster.shell.launch();"
                            ng-class="{disabled: !appCtrl.nf.Common.canAccessController()}">
-                            <i class="fa fa-cubes"></i>Cluster
+                            <i class="fa fa-cubes"></i><fmt:message key="partials.canvas.canvas-header.cluster-link"/>
                         </a>
                     </md-menu-item>
                     <md-menu-item layout-align="space-around center">
                         <a id="history-link"
                            ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.flowConfigHistory.shell.launch();">
-                            <i class="fa fa-history"></i>Flow Configuration History
+                            <i class="fa fa-history"></i><fmt:message key="partials.canvas.canvas-header.history-link"/>
                         </a>
                     </md-menu-item>
                     <md-menu-divider ng-if="appCtrl.nf.CanvasUtils.isConfigurableAuthorizer()"></md-menu-divider>
@@ -151,34 +152,34 @@
                         <a id="users-link" layout="row"
                            ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.users.shell.launch();"
                            ng-class="{disabled: !(appCtrl.nf.Common.canAccessTenants())}">
-                            <i class="fa fa-users"></i>Users
+                            <i class="fa fa-users"></i><fmt:message key="partials.canvas.canvas-header.users-link"/>
                         </a>
                     </md-menu-item>
                     <md-menu-item layout-align="space-around center" ng-if="appCtrl.nf.CanvasUtils.isConfigurableAuthorizer()">
                         <a id="policies-link" layout="row"
                            ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.policies.shell.launch();"
                            ng-class="{disabled: !(appCtrl.nf.Common.canAccessTenants() && appCtrl.nf.Common.canModifyPolicies())}">
-                            <i class="fa fa-key"></i>Policies
+                            <i class="fa fa-key"></i><fmt:message key="partials.canvas.canvas-header.policies-link"/>
                         </a>
                     </md-menu-item>
                     <md-menu-divider></md-menu-divider>
                     <md-menu-item layout-align="space-around center">
                         <a id="templates-link"
                            ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.templates.shell.launch();">
-                            <i class="icon icon-template"></i>Templates
+                            <i class="icon icon-template"></i><fmt:message key="partials.canvas.canvas-header.templates-link"/>
                         </a>
                     </md-menu-item>
                     <md-menu-divider></md-menu-divider>
                     <md-menu-item layout-align="space-around center">
                         <a id="help-link"
                            ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.help.shell.launch();">
-                            <i class="fa fa-question-circle"></i>Help
+                            <i class="fa fa-question-circle"></i><fmt:message key="partials.canvas.canvas-header.help-link"/>
                         </a>
                     </md-menu-item>
                     <md-menu-item layout-align="space-around center">
                         <a id="about-link"
                            ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.about.modal.show();">
-                            <i class="fa fa-info-circle"></i>About
+                            <i class="fa fa-info-circle"></i><fmt:message key="partials.canvas.canvas-header.about-link"/>
                         </a>
                     </md-menu-item>
                 </md-menu-content>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/component-state-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/component-state-dialog.jsp
index 44768ddd4162..74b92e0dbfa0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/component-state-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/component-state-dialog.jsp
@@ -15,35 +15,37 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="component-state-dialog" layout="column" class="hidden large-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">Name</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.component-state-dialog.Name"/></div>
             <div class="setting-field">
                 <div id="component-state-name"></div>
             </div>
         </div>
         <div class="setting">
-            <div class="setting-name">Description</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.component-state-dialog.Description"/></div>
             <div id="component-state-description" class="ellipsis multiline"></div>
         </div>
         <div>
             <div id="component-state-partial-results-container" class="hidden">
-                Showing partial results
+                <fmt:message key="partials.canvas.component-state-dialog.component-state-partial-results-container"/>
             </div>
             <div id="component-state-filter-controls">
                 <div id="component-state-filter-status" class="filter-status">
-                    Displaying&nbsp;<span id="displayed-component-state-entries"></span>&nbsp;of&nbsp;<span id="total-component-state-entries"></span>
+                    <fmt:message key="partials.canvas.component-state-dialog.component-state-filter-status1"/>&nbsp;<span id="displayed-component-state-entries"></span>&nbsp;<fmt:message key="partials.canvas.component-state-dialog.component-state-filter-status2"/>&nbsp;<span id="total-component-state-entries"></span>
                 </div>
                 <div id="component-state-filter-container">
-                    <input type="text" id="component-state-filter" placeholder="Filter"/>
+                <fmt:message key="partials.canvas.component-state-dialog.component-state-filter" var="filter"/>
+                    <input type="text" id="component-state-filter" placeholder="${filter}"/>
                 </div>
             </div>
             <div class="clear"></div>
         </div>
         <div id="component-state-table"></div>
         <div id="clear-link-container">
-            <span id="clear-link" class="link">Clear state</span>
+            <span id="clear-link" class="link"><fmt:message key="partials.canvas.component-state-dialog.clear-link"/></span>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp
index 9e657437e288..e95ebd090bf7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="connection-configuration" layout="column" class="hidden large-dialog">
     <div class="connection-configuration-tab-container dialog-content">
         <div id="connection-configuration-tabs" class="tab-container"></div>
@@ -22,21 +23,22 @@
             <div id="connection-settings-tab-content" class="configuration-tab">
                 <div class="settings-left">
                     <div class="setting">
-                        <div class="setting-name">Name</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.Name"/></div>
                         <div class="setting-field">
                             <input type="text" id="connection-name" name="connection-name" class="setting-input"/>
                         </div>
                     </div>
                     <div class="setting">
-                        <div class="setting-name">Id</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.Id"/></div>
                         <div class="setting-field">
                             <span type="text" id="connection-id"></span>
                         </div>
                     </div>
                     <div class="setting">
                         <div class="setting-name">
-                            FlowFile expiration
-                            <div class="fa fa-question-circle" alt="Info" title="The maximum amount of time an object may be in the flow before it will be automatically aged out of the flow."></div>
+                            <fmt:message key="partials.canvas.connection-configuration.FlowFileExpiration"/>
+                            <fmt:message key="partials.canvas.connection-configuration.FlowFileExpiration.title" var="FlowFileExpiration"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${FlowFileExpiration}"></div>
                         </div>
                         <div class="setting-field">
                             <input type="text" id="flow-file-expiration" name="flow-file-expiration" class="setting-input"/>
@@ -44,8 +46,9 @@
                     </div>
                     <div class="setting">
                         <div class="setting-name">
-                            Back pressure object threshold
-                            <div class="fa fa-question-circle" alt="Info" title="The maximum number of objects that can be queued before back pressure is applied."></div>
+                            <fmt:message key="partials.canvas.connection-configuration.BackPressureObjectThreshold"/>
+                            <fmt:message key="partials.canvas.connection-configuration.BackPressureObjectThreshold.Title" var="BackPressureObjectThreshold"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${BackPressureObjectThreshold}"></div>
                         </div>
                         <div class="setting-field">
                             <input type="text" id="back-pressure-object-threshold" name="back-pressure-object-threshold" class="setting-input"/>
@@ -53,8 +56,9 @@
                     </div>
                     <div class="setting">
                         <div class="setting-name">
-                            Back pressure data size threshold
-                            <div class="fa fa-question-circle" alt="Info" title="The maximum data size of objects that can be queued before back pressure is applied."></div>
+                            <fmt:message key="partials.canvas.connection-configuration.BackPressureDataSizeThreshold"/>
+                            <fmt:message key="partials.canvas.connection-configuration.BackPressureDataSizeThreshold.Title" var="BackPressureDataSizeThreshold"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${BackPressureDataSizeThreshold}"></div>
                         </div>
                         <div class="setting-field">
                             <input type="text" id="back-pressure-data-size-threshold" name="back-pressure-data-size-threshold" class="setting-input"/>
@@ -65,8 +69,9 @@
                 <div class="settings-right">
                     <div class="setting">
                         <div class="setting-name">
-                            Available prioritizers
-                            <div class="fa fa-question-circle" alt="Info" title="Available prioritizers that could reprioritize FlowFiles in this work queue."></div>
+                            <fmt:message key="partials.canvas.connection-configuration.AvailablePrioritizers"/>
+                            <fmt:message key="partials.canvas.connection-configuration.AvailablePrioritizers.title" var="AvailablePrioritizers"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${AvailablePrioritizers}"></div>
                         </div>
                         <div class="setting-field">
                             <ul id="prioritizer-available"></ul>
@@ -74,8 +79,9 @@
                     </div>
                     <div class="setting">
                         <div class="setting-name">
-                            Selected prioritizers
-                            <div class="fa fa-question-circle" alt="Info" title="Prioritizers that have been selected to reprioritize FlowFiles in this work queue."></div>
+                            <fmt:message key="partials.canvas.connection-configuration.SelectedPrioritizers"/>
+                            <fmt:message key="partials.canvas.connection-configuration.SelectedPrioritizers.title" var="SelectedPrioritizers"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${SelectedPrioritizers}"></div>
                         </div>
                         <div class="setting-field">
                             <ul id="prioritizer-selected"></ul>
@@ -93,31 +99,31 @@
             <div id="connection-details-tab-content" class="configuration-tab">
                 <div class="settings-left">
                     <div id="read-only-output-port-source" class="setting hidden">
-                        <div class="setting-name">From output</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.FromOutput"/></div>
                         <div class="setting-field connection-terminal-label">
                             <div id="read-only-output-port-name" class="ellipsis"></div>
                         </div>
                     </div>
                     <div id="output-port-source" class="setting hidden">
-                        <div class="setting-name">From output</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.FromOutput"/></div>
                         <div class="setting-field connection-terminal-label">
                             <div id="output-port-options"></div>
                         </div>
                     </div>
                     <div id="input-port-source" class="setting hidden">
-                        <div class="setting-name">From input</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.FromInput"/></div>
                         <div class="setting-field connection-terminal-label">
                             <div id="input-port-source-name" class="label ellipsis"></div>
                         </div>
                     </div>
                     <div id="funnel-source" class="setting hidden">
-                        <div class="setting-name">From funnel</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.FromFunnel"/></div>
                         <div class="setting-field connection-terminal-label">
-                            <div id="funnel-source-name" class="label ellipsis" title="funnel">funnel</div>
+                            <div id="funnel-source-name" class="label ellipsis" title="funnel"><fmt:message key="partials.canvas.connection-configuration.Funnel"/></div>
                         </div>
                     </div>
                     <div id="processor-source" class="setting hidden">
-                        <div class="setting-name">From processor</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.FromProcessor"/></div>
                         <div class="setting-field connection-terminal-label">
                             <div id="processor-source-details">
                                 <div id="processor-source-name" class="label ellipsis"></div>
@@ -126,13 +132,13 @@
                         </div>
                     </div>
                     <div id="connection-source-group" class="setting">
-                        <div class="setting-name">Within group</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.WithinGroup"/></div>
                         <div class="setting-field">
                             <div id="connection-source-group-name"></div>
                         </div>
                     </div>
                     <div id="relationship-names-container" class="hidden">
-                        <div class="setting-name">For relationships</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.ForRelationships"/></div>
                         <div class="setting-field">
                             <div id="relationship-names"></div>
                         </div>
@@ -141,25 +147,25 @@
                 <div class="spacer">&nbsp;</div>
                 <div class="settings-right">
                     <div id="input-port-destination" class="setting hidden">
-                        <div class="setting-name">To input</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.ToInput"/></div>
                         <div class="setting-field connection-terminal-label">
                             <div id="input-port-options"></div>
                         </div>
                     </div>
                     <div id="output-port-destination" class="setting hidden">
-                        <div class="setting-name">To output</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.ToOutput"/></div>
                         <div class="setting-field connection-terminal-label">
                             <div id="output-port-destination-name" class="label ellipsis"></div>
                         </div>
                     </div>
                     <div id="funnel-destination" class="setting hidden">
-                        <div class="setting-name">To funnel</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.ToFunnel"/></div>
                         <div class="setting-field connection-terminal-label">
-                            <div id="funnel-destination-name" class="label ellipsis" title="funnel">funnel</div>
+                            <div id="funnel-destination-name" class="label ellipsis" title="funnel"><fmt:message key="partials.canvas.connection-configuration.Funnel"/></div>
                         </div>
                     </div>
                     <div id="processor-destination" class="setting hidden">
-                        <div class="setting-name">To processor</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.ToProcessor"/></div>
                         <div class="setting-field connection-terminal-label">
                             <div id="processor-destination-details">
                                 <div id="processor-destination-name" class="label ellipsis"></div>
@@ -168,7 +174,7 @@
                         </div>
                     </div>
                     <div id="connection-destination-group" class="setting">
-                        <div class="setting-name">Within group</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.connection-configuration.WithinGroup"/></div>
                         <div class="setting-field">
                             <div id="connection-destination-group-name"></div>
                         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connections-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connections-dialog.jsp
index 4db2f56d4e3d..41f5ca6beb60 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connections-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connections-dialog.jsp
@@ -15,17 +15,18 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="connections-dialog" class="hidden">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">Selected component</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.connections-dialog.SelectedComponent"/></div>
             <div class="setting-field">
                 <div id="connections-context"></div>
             </div>
         </div>
         <div class="setting">
-            <div id="connections-source" class="setting-name">Source</div>
-            <div id="connections-destination" class="setting-name">Destination</div>
+            <div id="connections-source" class="setting-name"><fmt:message key="partials.canvas.connections-dialog.Source"/></div>
+            <div id="connections-destination" class="setting-name"><fmt:message key="partials.canvas.connections-dialog.Destination"/></div>
             <div class="clear"></div>
             <div class="setting-field">
                 <div id="connections-container"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/controller-service-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/controller-service-configuration.jsp
index 33a6298fd53e..351bc6b3f194 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/controller-service-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/controller-service-configuration.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="controller-service-configuration" class="hidden large-dialog">
     <div class="controller-service-configuration-tab-container dialog-content">
         <div id="controller-service-configuration-tabs" class="tab-container"></div>
@@ -22,7 +23,7 @@
             <div id="controller-service-standard-settings-tab-content" class="configuration-tab">
                 <div class="settings-left">
                     <div class="setting">
-                        <div class="setting-name">Name</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.controller-service-configuration.Name"/></div>
                         <div class="controller-service-editable setting-field">
                             <input type="text" id="controller-service-name" name="controller-service-name" class="setting-input"/>
                         </div>
@@ -31,13 +32,13 @@
                         </div>
                     </div>
                     <div class="setting">
-                        <div class="setting-name">Id</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.controller-service-configuration.Id"/></div>
                         <div class="setting-field">
                             <span id="controller-service-id"></span>
                         </div>
                     </div>
                     <div class="setting">
-                        <div class="setting-name">Type</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.controller-service-configuration.Type"/></div>
                         <div class="setting-field">
                             <span id="controller-service-type"></span>
                         </div>
@@ -47,8 +48,9 @@
                 <div class="settings-right">
                     <div class="setting">
                         <div class="setting-name">
-                            Referencing Components
-                            <div class="fa fa-question-circle" alt="Info" title="Other components referencing this controller service."></div>
+                            <fmt:message key="partials.canvas.controller-service-configuration.ReferencingComponents"/>
+                            <fmt:message key="partials.canvas.controller-service-configuration.ReferencingComponents.title" var="ReferencingComponents"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${ReferencingComponents}"></div>
                         </div>
                         <div class="setting-field">
                             <div id="controller-service-referencing-components"></div>
@@ -62,7 +64,7 @@
             <div id="controller-service-comments-tab-content" class="configuration-tab">
                 <textarea cols="30" rows="4" id="controller-service-comments" name="controller-service-comments" class="controller-service-editable setting-input"></textarea>
                 <div class="setting controller-service-read-only hidden">
-                    <div class="setting-name">Comments</div>
+                    <div class="setting-name"><fmt:message key="partials.canvas.controller-service-configuration.Comments"/></div>
                     <div class="setting-field">
                         <span id="read-only-controller-service-comments"></span>
                     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/disable-controller-service-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/disable-controller-service-dialog.jsp
index dd1ac001aebf..b62d4f7e07bd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/disable-controller-service-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/disable-controller-service-dialog.jsp
@@ -15,11 +15,12 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="disable-controller-service-dialog" layout="column" class="hidden large-dialog">
     <div class="dialog-content">
         <div class="settings-left">
             <div id="disable-controller-service-service-container" class="setting">
-                <div class="setting-name">Service</div>
+                <div class="setting-name"><fmt:message key="partials.canvas.disable-controller-service-dialog.Service"/></div>
                 <div class="setting-field">
                     <span id="disable-controller-service-id" class="hidden"></span>
                     <div id="disable-controller-service-name"></div>
@@ -28,10 +29,11 @@
                 </div>
             </div>
             <div id="disable-controller-service-scope-container" class="setting">
-                <div class="setting-name">Scope</div>
+                <div class="setting-name"><fmt:message key="partials.canvas.disable-controller-service-dialog.Scope"/></div>
                 <div class="setting-field">
-                    Service and referencing components
-                    <div class="fa fa-question-circle" alt="Info" title="Referencing components must be disabled/stopped in order to disable this service."></div>
+                    <fmt:message key="partials.canvas.disable-controller-service-dialog.Scope.setting-field"/>
+                    <fmt:message key="partials.canvas.disable-controller-service-dialog.Scope.setting-field.title" var="SettingField"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${SettingField}"></div>
                 </div>
             </div>
             <div id="disable-controller-service-progress-container" class="setting hidden">
@@ -39,17 +41,17 @@
                 <div class="setting-field">
                     <ol id="disable-controller-service-progress">
                         <li>
-                            Stopping referencing processors and reporting tasks
+                            <fmt:message key="partials.canvas.disable-controller-service-dialog.disable-controller-service-progress.1"/>
                             <div id="disable-referencing-schedulable" class="disable-referencing-components"></div>
                             <div class="clear"></div>
                         </li>
                         <li>
-                            Disabling referencing controller services
+                            <fmt:message key="partials.canvas.disable-controller-service-dialog.disable-controller-service-progress.2"/>
                             <div id="disable-referencing-services" class="disable-referencing-components"></div>
                             <div class="clear"></div>
                         </li>
                         <li>
-                            Disabling this controller service
+                            <fmt:message key="partials.canvas.disable-controller-service-dialog.disable-controller-service-progress.3"/>
                             <div id="disable-controller-service" class="disable-referencing-components"></div>
                             <div class="clear"></div>
                         </li>
@@ -61,8 +63,9 @@
         <div class="settings-right">
             <div class="setting">
                 <div class="setting-name">
-                    Referencing Components
-                    <div class="fa fa-question-circle" alt="Info" title="Other components referencing this controller service."></div>
+                    <fmt:message key="partials.canvas.disable-controller-service-dialog.ReferencingComponents"/>
+                    <fmt:message key="partials.canvas.disable-controller-service-dialog.ReferencingComponents.title" var="ReferencingComponents"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${ReferencingComponents}"></div>
                 </div>
                 <div class="setting-field">
                     <div id="disable-controller-service-referencing-components"></div>
@@ -71,6 +74,6 @@
         </div>
     </div>
     <div class="controller-service-canceling hidden unset">
-        Canceling...
+        <fmt:message key="partials.canvas.disable-controller-service-dialog.canceling"/>...
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/drop-request-status-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/drop-request-status-dialog.jsp
index f2c71d45c3f8..9af8039f421e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/drop-request-status-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/drop-request-status-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="drop-request-status-dialog" layout="column" class="hidden small-dialog">
     <div class="dialog-content">
         <div class="setting">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/enable-controller-service-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/enable-controller-service-dialog.jsp
index f5fc99812bea..a78fb57a8d10 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/enable-controller-service-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/enable-controller-service-dialog.jsp
@@ -15,11 +15,12 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="enable-controller-service-dialog" layout="column" class="hidden large-dialog">
     <div class="dialog-content">
         <div class="settings-left">
             <div id="enable-controller-service-service-container" class="setting">
-                <div class="setting-name">Service</div>
+                <div class="setting-name"><fmt:message key="partials.canvas.enable-controller-service-dialog.Service"/></div>
                 <div class="setting-field">
                     <span id="enable-controller-service-id" class="hidden"></span>
                     <div id="enable-controller-service-name"></div>
@@ -28,7 +29,7 @@
                 </div>
             </div>
             <div id="enable-controller-service-scope-container" class="setting">
-                <div class="setting-name">Scope</div>
+                <div class="setting-name"><fmt:message key="partials.canvas.enable-controller-service-dialog.Scope"/></div>
                 <div class="setting-field">
                     <div id="enable-controller-service-scope"></div>
                 </div>
@@ -38,17 +39,17 @@
                 <div class="setting-field">
                     <ol id="enable-controller-service-progress">
                         <li>
-                            Enabling this controller service
+                            <fmt:message key="partials.canvas.enable-controller-service-dialog.enable-controller-service-progress.1"/>
                             <div id="enable-controller-service" class="enable-referencing-components"></div>
                             <div class="clear"></div>
                         </li>
                         <li class="referencing-component">
-                            Enabling referencing controller services
+                            <fmt:message key="partials.canvas.enable-controller-service-dialog.enable-controller-service-progress.2"/>
                             <div id="enable-referencing-services" class="enable-referencing-components"></div>
                             <div class="clear"></div>
                         </li>
                         <li class="referencing-component">
-                            Starting referencing processors and reporting tasks
+                            <fmt:message key="partials.canvas.enable-controller-service-dialog.enable-controller-service-progress.3"/>
                             <div id="enable-referencing-schedulable" class="enable-referencing-components"></div>
                             <div class="clear"></div>
                         </li>
@@ -60,8 +61,9 @@
         <div class="settings-right">
             <div class="setting">
                 <div class="setting-name">
-                    Referencing Components
-                    <div class="fa fa-question-circle" alt="Info" title="Other components referencing this controller service."></div>
+                    <fmt:message key="partials.canvas.enable-controller-service-dialog.ReferencingComponents"/>
+                    <fmt:message key="partials.canvas.enable-controller-service-dialog.ReferencingComponents.title" var="ReferencingComponents"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${ReferencingComponents}"></div>
                 </div>
                 <div class="setting-field">
                     <div id="enable-controller-service-referencing-components"></div>
@@ -70,6 +72,6 @@
         </div>
     </div>
     <div class="controller-service-canceling hidden unset">
-        Canceling...
+        <fmt:message key="partials.canvas.enable-controller-service-dialog.Canceling"/>...
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/fill-color-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/fill-color-dialog.jsp
index 4e76325d9abd..0c48400cdcfb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/fill-color-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/fill-color-dialog.jsp
@@ -15,29 +15,30 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="fill-color-dialog" class="hidden">
     <div class="dialog-content">
         <div class="setting" style="margin-bottom: 0px;">
-            <div class="setting-name">Color</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.fill-color-dialog.Color"/></div>
             <div class="setting-field">
                 <input type="text" id="fill-color" value="#FFFFFF"/>
             </div>
-            <div class="setting-name" style="margin-top: 10px;">Value</div>
+            <div class="setting-name" style="margin-top: 10px;"><fmt:message key="partials.canvas.fill-color-dialog.Value"/></div>
             <div class="setting-field">
                 <input type="text" id="fill-color-value" value="#FFFFFF"/>
             </div>
-            <div class="setting-name" style="margin-top: 10px;">Preview</div>
+            <div class="setting-name" style="margin-top: 10px;"><fmt:message key="partials.canvas.fill-color-dialog.Preview"/></div>
             <div class="setting-field">
                 <div id="fill-color-processor-preview">
                     <div id="fill-color-processor-preview-icon" class="icon icon-processor"></div>
-                    <div id="fill-color-processor-preview-name" style="margin-left: 35px; line-height: 25px; font-size: 12px; height: 25px; color: #262626;">Processor Name</div>
+                    <div id="fill-color-processor-preview-name" style="margin-left: 35px; line-height: 25px; font-size: 12px; height: 25px; color: #262626;"><fmt:message key="partials.canvas.fill-color-dialog.ProcessorName"/></div>
                     <div style="width: 100%; height: 9px; border-bottom: 1px solid #c7d2d7; background-color: #f4f6f7;"></div>
                     <div style="width: 100%; height: 9px; border-bottom: 1px solid #c7d2d7; background-color: #ffffff;"></div>
                     <div style="width: 100%; height: 10px; border-bottom: 1px solid #c7d2d7; background-color: #f4f6f7;"></div>
                     <div style="width: 100%; height: 9px; background-color: #ffffff;"></div>
                 </div>
                 <div id="fill-color-label-preview">
-                    <div id="fill-color-label-preview-value">Label Value</div>
+                    <div id="fill-color-label-preview-value"><fmt:message key="partials.canvas.fill-color-dialog.Label"/></div>
                 </div>
             </div>
         </div>
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 81e9ef019428..bc7fd2119c28 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
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="flow-status" flex layout="row" layout-align="space-between center">
     <div id="flow-status-container" layout="row" layout-align="space-around center">
         <div class="fa fa-cubes" ng-if="appCtrl.nf.ClusterSummary.isClustered()"><span id="connected-nodes-count">{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.connectedNodesCount}}</span></div>
@@ -32,7 +33,8 @@
     <div layout="row" layout-align="end center">
         <div id="search-container">
             <button id="search-button" ng-click="appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.search.toggleSearchField();"><i class="fa fa-search"></i></button>
-            <input id="search-field" type="text" placeholder="Search"/>
+            <fmt:message key="partials.canvas.flow-status.search-field" var="search"/>
+            <input id="search-field" type="text" placeholder="${search}"/>
         </div>
         <button id="bulletin-button"><i class="fa fa-sticky-note-o"></i></button>
     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/flowfile-details-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/flowfile-details-dialog.jsp
index a2de56a76884..4430488c1ad6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/flowfile-details-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/flowfile-details-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="flowfile-details-dialog" layout="column" class="hidden large-dialog">
     <div id="flowfile-details-dialog-content" class="dialog-content">
         <div id="flowfile-details-tabs" class="tab-container"></div>
@@ -24,39 +25,39 @@
                 <span id="flowfile-cluster-node-id" class="hidden"></span>
                 <div class="settings-left">
                     <div id="flowfile-details">
-                        <div class="flowfile-header">FlowFile Details</div>
+                        <div class="flowfile-header"><fmt:message key="partials.canvas.flowfile-details-dialog.detail"/></div>
                         <div class="flowfile-detail">
                             <div class="detail-name">UUID</div>
                             <div id="flowfile-uuid" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="flowfile-detail">
-                            <div class="detail-name">Filename</div>
+                            <div class="detail-name"><fmt:message key="partials.canvas.flowfile-details-dialog.filename"/></div>
                             <div id="flowfile-filename" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="flowfile-detail">
-                            <div class="detail-name">File Size</div>
+                            <div class="detail-name"><fmt:message key="partials.canvas.flowfile-details-dialog.filesize"/></div>
                             <div id="flowfile-file-size" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="flowfile-detail">
-                            <div class="detail-name">Queue Position</div>
+                            <div class="detail-name"><fmt:message key="partials.canvas.flowfile-details-dialog.queuelocation"/></div>
                             <div id="flowfile-queue-position" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="flowfile-detail">
-                            <div class="detail-name">Queued Duration</div>
+                            <div class="detail-name"><fmt:message key="partials.canvas.flowfile-details-dialog.queueduration"/></div>
                             <div id="flowfile-queued-duration" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="flowfile-detail">
-                            <div class="detail-name">Lineage Duration</div>
+                            <div class="detail-name"><fmt:message key="partials.canvas.flowfile-details-dialog.lineageduration"/></div>
                             <div id="flowfile-lineage-duration" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="flowfile-detail">
-                            <div class="detail-name">Penalized</div>
+                            <div class="detail-name"><fmt:message key="partials.canvas.flowfile-details-dialog.penalized"/></div>
                             <div id="flowfile-penalized" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
@@ -66,36 +67,36 @@
                 <div class="spacer">&nbsp;</div>
                 <div class="settings-right">
                     <div id="flowfile-content-details" class="content-details">
-                        <div class="flowfile-header">Content Claim</div>
+                        <div class="flowfile-header"><fmt:message key="partials.canvas.flowfile-details-dialog.contentclaim"/></div>
                         <div class="flowfile-detail">
-                            <div class="content-detail-name">Container</div>
+                            <div class="content-detail-name"><fmt:message key="partials.canvas.flowfile-details-dialog.container"/></div>
                             <div id="content-container" class="content-detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="flowfile-detail">
-                            <div class="content-detail-name">Section</div>
+                            <div class="content-detail-name"><fmt:message key="partials.canvas.flowfile-details-dialog.section"/></div>
                             <div id="content-section" class="content-detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="flowfile-detail">
-                            <div class="content-detail-name">Identifier</div>
+                            <div class="content-detail-name"><fmt:message key="partials.canvas.flowfile-details-dialog.identifier"/></div>
                             <div id="content-identifier" class="content-detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="flowfile-detail">
-                            <div class="content-detail-name">Offset</div>
+                            <div class="content-detail-name"><fmt:message key="partials.canvas.flowfile-details-dialog.offset"/></div>
                             <div id="content-offset" class="content-detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="flowfile-detail">
-                            <div class="content-detail-name">Size</div>
+                            <div class="content-detail-name"><fmt:message key="partials.canvas.flowfile-details-dialog.size"/></div>
                             <div id="content-size" class="content-detail-value"></div>
                             <div id="content-bytes" class="content-detail-value hidden"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="flowfile-detail">
-                            <div id="content-download" class="secondary-button fa fa-download button-icon"><span>Download</span></div>
-                            <div id="content-view" class="secondary-button fa fa-eye button-icon hidden"><span>View</span></div>
+                            <div id="content-download" class="secondary-button fa fa-download button-icon"><span><fmt:message key="partials.canvas.flowfile-details-dialog.download"/></span></div>
+                            <div id="content-view" class="secondary-button fa fa-eye button-icon hidden"><span><fmt:message key="partials.canvas.flowfile-details-dialog.view"/></span></div>
                             <div class="clear"></div>
                         </div>
                     </div>
@@ -104,7 +105,7 @@
             </div>
             <div id="flowfile-attributes-tab-content" class="details-tab">
                 <div id="flowfile-attributes-details">
-                    <div id="flowfile-attributes-header" class="flowfile-header">Attribute Values</div>
+                    <div id="flowfile-attributes-header" class="flowfile-header"><fmt:message key="partials.canvas.flowfile-details-dialog.attributevalue"/></div>
                     <div class="clear"></div>
                     <div id="flowfile-attributes-container"></div>
                 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/instantiate-template-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/instantiate-template-dialog.jsp
index ea7fdf9925bd..18098c1c6afd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/instantiate-template-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/instantiate-template-dialog.jsp
@@ -15,10 +15,11 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="instantiate-template-dialog" class="hidden small-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">Choose Template:</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.instantiate-template-dialog.choosetmplate"/>:</div>
             <div id="available-templates" name="available-templates"></div>
         </div>
     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/label-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/label-configuration.jsp
index 61725d90808a..55173406a399 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/label-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/label-configuration.jsp
@@ -15,16 +15,17 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="label-configuration" class="hidden medium-dialog">
     <div id="label-configuration-contents" class="dialog-content">
         <div class="setting">
-            <div class="setting-name">Label Value</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.label-configuration.LabelValue"/></div>
             <div class="setting-field">
                 <textarea cols="30" rows="4" id="label-value" class="setting-input"></textarea>
             </div>
         </div>
         <div class="setting">
-            <div class="setting-name">Font Size</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.label-configuration.fontSize"/></div>
             <div class="setting-field">
                 <div id="label-font-size"></div>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/listing-request-status-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/listing-request-status-dialog.jsp
index a0ac89c69a9e..ba5abb8f734d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/listing-request-status-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/listing-request-status-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="listing-request-status-dialog" layout="column" class="hidden small-dialog">
     <div class="dialog-content">
         <div class="setting">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp
index 6d97b0e7f14d..abb0432dca7a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <nf-breadcrumbs
         breadcrumbs="appCtrl.serviceProvider.breadcrumbsCtrl.getBreadcrumbs();"
         click-func="appCtrl.nf.CanvasUtils.getComponentByType('ProcessGroup').enterGroup"
@@ -23,14 +24,15 @@
 </nf-breadcrumbs>
 <div id="graph-controls">
     <div id="navigation-control" class="graph-control">
-        <div class="graph-control-docked pointer fa fa-compass" title="Navigate"
+    	<fmt:message key="partials.canvas.navigation.Navigate" var="navigate"/>
+        <div class="graph-control-docked pointer fa fa-compass" title="${navigate}"
              ng-click="appCtrl.serviceProvider.graphControlsCtrl.undock($event)">
         </div>
         <div class="graph-control-header-container hidden pointer"
              ng-click="appCtrl.serviceProvider.graphControlsCtrl.expand($event)">
             <div class="graph-control-header-icon fa fa-compass">
             </div>
-            <div class="graph-control-header">Navigate</div>
+            <div class="graph-control-header"><fmt:message key="partials.canvas.navigation.Navigate"/></div>
             <div class="graph-control-header-action">
                 <div class="graph-control-expansion fa fa-plus-square-o pointer"></div>
             </div>
@@ -38,22 +40,26 @@
         </div>
         <div class="graph-control-content hidden">
             <div id="navigation-buttons">
-                <div id="naviagte-zoom-in" class="action-button" title="Zoom In"
+            	<fmt:message key="partials.canvas.navigation.zoom-in-button" var="zoomin"/>
+                <div id="naviagte-zoom-in" class="action-button" title="${zoomin}"
                      ng-click="appCtrl.serviceProvider.graphControlsCtrl.navigateCtrl.zoomIn();">
                     <button><div class="graph-control-action-icon fa fa-search-plus"></div></button>
                 </div>
                 <div class="button-spacer-small">&nbsp;</div>
-                <div id="naviagte-zoom-out" class="action-button" title="Zoom Out"
+                <fmt:message key="partials.canvas.navigation.zoom-out-button" var="zoomout"/>
+                <div id="naviagte-zoom-out" class="action-button" title="${zoomout}"
                      ng-click="appCtrl.serviceProvider.graphControlsCtrl.navigateCtrl.zoomOut();">
                     <button><div class="graph-control-action-icon fa fa-search-minus"></div></button>
                 </div>
                 <div class="button-spacer-large">&nbsp;</div>
-                <div id="naviagte-zoom-fit" class="action-button" title="Fit"
+                <fmt:message key="partials.canvas.navigation.zoom-fit-button" var="fit"/>
+                <div id="naviagte-zoom-fit" class="action-button" title="${fit}"
                      ng-click="appCtrl.serviceProvider.graphControlsCtrl.navigateCtrl.zoomFit();">
                     <button><div class="graph-control-action-icon icon icon-zoom-fit"></div></button>
                 </div>
                 <div class="button-spacer-small">&nbsp;</div>
-                <div id="naviagte-zoom-actual-size" class="action-button" title="Actual"
+                <fmt:message key="partials.canvas.navigation.zoom-actual-button" var="actual"/>
+                <div id="naviagte-zoom-actual-size" class="action-button" title="${actual}"
                      ng-click="appCtrl.serviceProvider.graphControlsCtrl.navigateCtrl.zoomActualSize();">
                     <button><div class="graph-control-action-icon icon icon-zoom-actual"></div></button>
                 </div>
@@ -63,14 +69,15 @@
         </div>
     </div>
     <div id="operation-control" class="graph-control">
-        <div class="graph-control-docked pointer fa fa-hand-o-up" title="Operate"
+    	<fmt:message key="partials.canvas.navigation.Operate" var="operate"/>
+        <div class="graph-control-docked pointer fa fa-hand-o-up" title="${operate}"
              ng-click="appCtrl.serviceProvider.graphControlsCtrl.undock($event)">
         </div>
         <div class="graph-control-header-container hidden pointer"
              ng-click="appCtrl.serviceProvider.graphControlsCtrl.expand($event)">
             <div class="graph-control-header-icon fa fa-hand-o-up">
             </div>
-            <div class="graph-control-header">Operate</div>
+            <div class="graph-control-header"><fmt:message key="partials.canvas.navigation.Operate"/></div>
             <div class="graph-control-header-action">
                 <div class="graph-control-expansion fa fa-plus-square-o pointer"></div>
             </div>
@@ -90,49 +97,57 @@
             </div>
             <div id="operation-buttons">
                 <div>
-                    <div id="operate-configure" class="action-button" title="Configuration">
+                	<fmt:message key="partials.canvas.navigation.configuration" var="configuration"/>
+                    <div id="operate-configure" class="action-button" title="${configuration}">
                         <button ng-click="appCtrl.serviceProvider.graphControlsCtrl.openConfigureOrDetailsView();"
                                 ng-disabled="!(appCtrl.serviceProvider.graphControlsCtrl.canConfigureOrOpenDetails())">
                             <div class="graph-control-action-icon fa fa-gear"></div></button>
                     </div>
+                    <fmt:message key="partials.canvas.navigation.accesspolicies" var="accesspolicies"/>
                     <div class="button-spacer-small" ng-if="appCtrl.nf.CanvasUtils.isConfigurableAuthorizer()">&nbsp;</div>
-                    <div id="operate-policy" class="action-button" title="Access Policies" ng-if="appCtrl.nf.CanvasUtils.isConfigurableAuthorizer()">
+                    <div id="operate-policy" class="action-button" title="${accesspolicies}" ng-if="appCtrl.nf.CanvasUtils.isConfigurableAuthorizer()">
                         <button ng-click="appCtrl.nf.Actions['managePolicies'](appCtrl.nf.CanvasUtils.getSelection());"
                                 ng-disabled="!(appCtrl.nf.CanvasUtils.canManagePolicies())">
                             <div class="graph-control-action-icon fa fa-key"></div></button>
                     </div>
                     <div class="button-spacer-large">&nbsp;</div>
-                    <div id="operate-enable" class="action-button" title="Enable">
+                    <fmt:message key="partials.canvas.navigation.enable" var="enable"/>
+                    <div id="operate-enable" class="action-button" title="${enable}">
                         <button ng-click="appCtrl.nf.Actions['enable'](appCtrl.nf.CanvasUtils.getSelection());"
                                 ng-disabled="!appCtrl.nf.CanvasUtils.canEnable(appCtrl.nf.CanvasUtils.getSelection());">
                             <div class="graph-control-action-icon fa fa-flash"></div></button>
                     </div>
                     <div class="button-spacer-small">&nbsp;</div>
-                    <div id="operate-disable" class="action-button" title="Disable">
+                    <fmt:message key="partials.canvas.navigation.disable" var="disable"/>
+                    <div id="operate-disable" class="action-button" title="${disable}">
                         <button ng-click="appCtrl.nf.Actions['disable'](appCtrl.nf.CanvasUtils.getSelection());"
                                 ng-disabled="!appCtrl.nf.CanvasUtils.canDisable(appCtrl.nf.CanvasUtils.getSelection());">
                             <div class="graph-control-action-icon icon icon-enable-false"></div></button>
                     </div>
                     <div class="button-spacer-large">&nbsp;</div>
-                    <div id="operate-start" class="action-button" title="Start">
+                    <fmt:message key="partials.canvas.navigation.start" var="start"/>
+                    <div id="operate-start" class="action-button" title="${start}">
                         <button ng-click="appCtrl.nf.Actions['start'](appCtrl.nf.CanvasUtils.getSelection());"
                                 ng-disabled="!appCtrl.nf.CanvasUtils.getSelection().empty() && !appCtrl.nf.CanvasUtils.canModify(appCtrl.nf.CanvasUtils.getSelection());">
                             <div class="graph-control-action-icon fa fa-play"></div></button>
                     </div>
                     <div class="button-spacer-small">&nbsp;</div>
-                    <div id="operate-stop" class="action-button" title="Stop">
+                    <fmt:message key="partials.canvas.navigation.stop" var="stop"/>
+                    <div id="operate-stop" class="action-button" title="${stop}">
                         <button ng-click="appCtrl.nf.Actions['stop'](appCtrl.nf.CanvasUtils.getSelection());"
                                 ng-disabled="!appCtrl.nf.CanvasUtils.getSelection().empty() && !appCtrl.nf.CanvasUtils.canModify(appCtrl.nf.CanvasUtils.getSelection());">
                             <div class="graph-control-action-icon fa fa-stop"></div></button>
                     </div>
                     <div class="button-spacer-large">&nbsp;</div>
-                    <div id="operate-template" class="action-button" title="Create Template">
+                    <fmt:message key="partials.canvas.navigation.createTemplate" var="createTemplate"/>
+                    <div id="operate-template" class="action-button" title="${createTemplate}">
                         <button ng-click="appCtrl.nf.Actions['template'](appCtrl.nf.CanvasUtils.getSelection());"
                                 ng-disabled="!(appCtrl.nf.CanvasUtils.canWrite() && (appCtrl.nf.CanvasUtils.getSelection().empty() || appCtrl.nf.CanvasUtils.canRead(appCtrl.nf.CanvasUtils.getSelection())));">
                             <div class="graph-control-action-icon icon icon-template-save"></div></button>
                     </div>
                     <div class="button-spacer-small">&nbsp;</div>
-                    <div id="operate-template-upload" class="action-button" title="Upload Template">
+                    <fmt:message key="partials.canvas.navigation.uploadTemplate" var="uploadTemplate"/>
+                    <div id="operate-template-upload" class="action-button" title="${uploadTemplate}">
                         <button ng-click="appCtrl.nf.Actions['uploadTemplate']();"
                                 ng-disabled="!(appCtrl.nf.CanvasUtils.canWrite() && appCtrl.nf.CanvasUtils.getSelection().empty());">
                             <div class="graph-control-action-icon icon icon-template-import"></div></button>
@@ -140,34 +155,39 @@
                     <div class="clear"></div>
                 </div>
                 <div style="margin-top: 5px;">
-                    <div id="operate-copy" class="action-button" title="Copy">
+                    <fmt:message key="partials.canvas.navigation.copy" var="copy"/>
+                    <div id="operate-copy" class="action-button" title="${copy}">
                         <button ng-click="appCtrl.nf.Actions['copy'](appCtrl.nf.CanvasUtils.getSelection());"
                                 ng-disabled="!appCtrl.nf.CanvasUtils.isCopyable(appCtrl.nf.CanvasUtils.getSelection());">
                             <div class="graph-control-action-icon fa fa-copy"></div></button>
                     </div>
                     <div class="button-spacer-small">&nbsp;</div>
-                    <div id="operate-paste" class="action-button" title="Paste">
+                    <fmt:message key="partials.canvas.navigation.paste" var="paste"/>
+                    <div id="operate-paste" class="action-button" title="${paste}">
                         <button ng-click="appCtrl.nf.Actions['paste'](appCtrl.nf.CanvasUtils.getSelection());"
                                 ng-disabled="!appCtrl.nf.CanvasUtils.isPastable()">
                             <div class="graph-control-action-icon fa fa-paste"></div></button>
                     </div>
                     <div class="button-spacer-large">&nbsp;</div>
-                    <div id="operate-group" class="action-button" title="Group">
+                    <fmt:message key="partials.canvas.navigation.group" var="group"/>
+                    <div id="operate-group" class="action-button" title="${group}">
                         <button ng-click="appCtrl.nf.Actions['group'](appCtrl.nf.CanvasUtils.getSelection());"
                                 ng-disabled="!(appCtrl.nf.CanvasUtils.getComponentByType('Connection').isDisconnected(appCtrl.nf.CanvasUtils.getSelection()) && appCtrl.nf.CanvasUtils.canModify(appCtrl.nf.CanvasUtils.getSelection()));">
                             <div class="graph-control-action-icon icon icon-group"></div></button>
                     </div>
                     <div class="button-spacer-large">&nbsp;</div>
-                    <div id="operate-color" class="action-button" title="Change Color">
+                    <fmt:message key="partials.canvas.navigation.fillcolor" var="fillcolor"/>
+                    <div id="operate-color" class="action-button" title="${fillcolor}">
                         <button ng-click="appCtrl.nf.Actions['fillColor'](appCtrl.nf.CanvasUtils.getSelection());"
                                 ng-disabled="!appCtrl.nf.CanvasUtils.isColorable(appCtrl.nf.CanvasUtils.getSelection());">
                             <div class="graph-control-action-icon fa fa-paint-brush"></div></button>
                     </div>
                     <div class="button-spacer-large">&nbsp;</div>
-                    <div id="operate-delete" class="action-button" title="Delete">
+                    <fmt:message key="partials.canvas.navigation.delete" var="delete"/>
+                    <div id="operate-delete" class="action-button" title="${delete}">
                         <button ng-click="appCtrl.nf.Actions['delete'](appCtrl.nf.CanvasUtils.getSelection());"
                                 ng-disabled="!appCtrl.nf.CanvasUtils.areDeletable(appCtrl.nf.CanvasUtils.getSelection());">
-                            <div class="graph-control-action-icon fa fa-trash"></div><span>Delete</span></button>
+                            <div class="graph-control-action-icon fa fa-trash"></div><span><fmt:message key="partials.canvas.navigation.Delete"/></span></button>
                     </div>
                     <div class="clear"></div>
                 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-controller-service-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-controller-service-dialog.jsp
index 1373a98476c9..a6b8750cf4cb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-controller-service-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-controller-service-dialog.jsp
@@ -15,18 +15,20 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="new-controller-service-dialog" layout="column" class="hidden large-dialog">
     <div class="dialog-content">
         <div layout="row" style="padding-bottom:0">
             <div flex="25" layout="row" layout-align="start center">
-                <div class="setting-name">Tag Cloud:</div>
+                <div class="setting-name"><fmt:message key="partials.canvas.new-controller-service-dialog.TagCloud"/>:</div>
             </div>
             <div flex layout="row" layout-align="space-between center" id="controller-service-type-filter-controls" class="filter-status">
                 <div id="controller-service-type-filter-status">
-                    Displaying&nbsp;<span id="displayed-controller-service-types"></span>&nbsp;of&nbsp;<span id="total-controller-service-types"></span>
+                    <fmt:message key="partials.canvas.new-controller-service-dialog.Displaying"/>&nbsp;<span id="displayed-controller-service-types"></span>&nbsp;<fmt:message key="partials.canvas.new-controller-service-dialog.Of"/>&nbsp;<span id="total-controller-service-types"></span>
                 </div>
                 <div id="controller-service-type-filter-container">
-                    <input type="text" id="controller-service-type-filter" placeholder="Filter"/>
+                	<fmt:message key="partials.canvas.new-controller-service-dialog.controller-service-type-filter" var="filter"/>
+                    <input type="text" id="controller-service-type-filter" placeholder="${filter}"/>
                 </div>
             </div>
         </div>
@@ -40,7 +42,7 @@
             </div>
             <div layout="column" flex id="controller-service-types-container">
                 <div id="controller-service-types-table" class="unselectable"></div>
-                <div id="controller-service-type-name-title" class="ellipsis">Selected Controller Service:</div>
+                <div id="controller-service-type-name-title" class="ellipsis"><fmt:message key="partials.canvas.new-controller-service-dialog.controller-service-type-name-title"/>:</div>
                 <div id="controller-service-type-name" class="ellipsis"></div>
                 <div id="controller-service-description-container" class="hidden">
                     <div id="controller-service-type-description" class="ellipsis multiline"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-port-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-port-dialog.jsp
index 7ab86d541ae5..3d1a1c2f5472 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-port-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-port-dialog.jsp
@@ -15,10 +15,11 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="new-port-dialog" class="hidden small-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name"><span id="new-port-type">Input</span>&nbsp;port name</div>
+            <div class="setting-name"><span id="new-port-type"><fmt:message key="partials.canvas.new-port-dialog.Input"/></span>&nbsp;<fmt:message key="partials.canvas.new-port-dialog.portname"/></div>
             <div class="setting-field">
                 <input id="new-port-name" type="text"/>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-process-group-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-process-group-dialog.jsp
index cb538c6edfb9..cb66aa2fec13 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-process-group-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-process-group-dialog.jsp
@@ -15,10 +15,11 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="new-process-group-dialog" class="hidden small-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">Process group name</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.new-process-group-dialog.ProcessGroupName"/></div>
             <div class="setting-field">
                 <input id="new-process-group-name" type="text"/>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp
index c79ef897d981..e54a2c936bae 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp
@@ -15,19 +15,21 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="new-processor-dialog" layout="column" class="hidden large-dialog">
     <div class="dialog-content">
         <div layout="row" style="padding-bottom:0">
             <div flex="25" layout="row" layout-align="start center">
-                <div class="setting-name">Tag Cloud:</div>
+                <div class="setting-name"><fmt:message key="partials.canvas.new-processor-dialog.TagCloud"/>:</div>
             </div>
             <div flex layout="row" layout-align="space-between center" id="processor-type-filter-controls">
                 <div id="processor-type-filter-status" class="filter-status">
-                    Displaying&nbsp;<span id="displayed-processor-types"></span>&nbsp;of&nbsp;<span
+                    <fmt:message key="partials.canvas.new-processor-dialog.Displaying"/>&nbsp;<span id="displayed-processor-types"></span>&nbsp;<fmt:message key="partials.canvas.new-processor-dialog.Of"/>&nbsp;<span
                         id="total-processor-types"></span>
                 </div>
                 <div id="processor-type-filter-container">
-                    <input type="text" placeholder="Filter" id="processor-type-filter"/>
+                <fmt:message key="partials.canvas.new-processor-dialog.processor-type-filter-container" var="filter"/>
+                    <input type="text" placeholder="${filter}" id="processor-type-filter"/>
                 </div>
             </div>
         </div>
@@ -41,7 +43,7 @@
             </div>
             <div layout="column" flex id="processor-types-container">
                 <div id="processor-types-table" class="unselectable"></div>
-                <div id="processor-type-name-title" class="ellipsis">Selected Processor:</div>
+                <div id="processor-type-name-title" class="ellipsis"><fmt:message key="partials.canvas.new-processor-dialog.processor-type-name-title"/>:</div>
                 <div id="processor-type-name" class="ellipsis"></div>
                 <div id="processor-description-container">
                     <div id="processor-type-description" class="ellipsis multiline"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-remote-process-group-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-remote-process-group-dialog.jsp
index 49480016e69d..5c1513a53138 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-remote-process-group-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-remote-process-group-dialog.jsp
@@ -15,11 +15,13 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="new-remote-process-group-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">URLs
-                <div class="fa fa-question-circle" alt="Info" title="Specify the remote target NiFi URLs. Multiple URLs can be specified in comma-separated format. Different protocols cannot be mixed. If remote NiFi is a cluster, two or more node URLs are recommended for better connection establishment availability."></div>
+            <div class="setting-name"><fmt:message key="partials.canvas.new-remote-process-group-dialog.URL"/>
+            <fmt:message key="partials.canvas.new-remote-process-group-dialog.circle" var="circle"/>
+                <div class="fa fa-question-circle" alt="Info" title="${circle}"></div>
              </div>
             <div class="setting-field">
                 <input id="new-remote-process-group-uris" type="text" placeholder="https://remotehost:8080/nifi"/>
@@ -28,8 +30,9 @@
         <div class="setting">
             <div class="remote-process-group-setting-left">
                 <div class="setting-name">
-                    Transport Protocol
-                    <div class="fa fa-question-circle" alt="Info" title="Specify the transport protocol to use for this Remote Process Group communication."></div>
+                    <fmt:message key="partials.canvas.new-remote-process-group-dialog.Transport"/>
+                <fmt:message key="partials.canvas.disable-controller-service-dialog.Scope.setting-field.title" var="Transport"/>
+                <div class="fa fa-question-circle" alt="Info" title="${Transport}"></div>
                 </div>
                 <div class="setting-field">
                     <div id="new-remote-process-group-transport-protocol-combo"></div>
@@ -37,8 +40,9 @@
             </div>
             <div class="remote-process-group-setting-right">
                 <div class="setting-name">
-                    Local Network Interface
-                    <div class="fa fa-question-circle" alt="Info" title="The local network interface to send/receive data. If not specified, any local address is used. If clustered, all nodes must have an interface with this identifier."></div>
+                    <fmt:message key="partials.canvas.new-remote-process-group-dialog.LocalNetwork"/>
+                <fmt:message key="partials.canvas.new-remote-process-group-dialog.LocalNetworkTitle" var="LocalNetworkTitle"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${LocalNetworkTitle}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" class="small-setting-input" id="new-remote-process-group-local-network-interface"/>
@@ -49,8 +53,9 @@
         <div class="setting">
             <div class="remote-process-group-setting-left">
                 <div class="setting-name">
-                    HTTP Proxy server hostname
-                    <div class="fa fa-question-circle" alt="Info" title="Specify the proxy server's hostname to use. If not specified, HTTP traffics are sent directly to the target NiFi instance."></div>
+                    <fmt:message key="partials.canvas.new-remote-process-group-dialog.HttpProxyHostname"/>
+                    <fmt:message key="partials.canvas.disable-controller-service-dialog.Scope.setting-field.title" var="HttpProxyHostname"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${HttpProxyHostname}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" class="small-setting-input" id="new-remote-process-group-proxy-host"/>
@@ -58,8 +63,9 @@
             </div>
             <div class="remote-process-group-setting-right">
                 <div class="setting-name">
-                    HTTP Proxy server port
-                    <div class="fa fa-question-circle" alt="Info" title="Specify the proxy server's port number, optional. If not specified, default port 80 will be used."></div>
+                    <fmt:message key="partials.canvas.new-remote-process-group-dialog.HttpProxyPort"/>
+                    <fmt:message key="partials.canvas.disable-controller-service-dialog.Scope.setting-field.title" var="HttpProxyPort"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${HttpProxyPort}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" class="small-setting-input" id="new-remote-process-group-proxy-port"/>
@@ -70,8 +76,9 @@
         <div class="setting">
             <div class="remote-process-group-setting-left">
                 <div class="setting-name">
-                    HTTP Proxy user
-                    <div class="fa fa-question-circle" alt="Info" title="Specify an user name to connect to the proxy server, optional."></div>
+                    <fmt:message key="partials.canvas.new-remote-process-group-dialog.HttpProxyUser"/>
+                    <fmt:message key="partials.canvas.disable-controller-service-dialog.Scope.setting-field.title" var="HttpProxyUser"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${HttpProxyUser}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" class="small-setting-input" id="new-remote-process-group-proxy-user"/>
@@ -79,8 +86,9 @@
             </div>
             <div class="remote-process-group-setting-right">
                 <div class="setting-name">
-                    HTTP Proxy password
-                    <div class="fa fa-question-circle" alt="Info" title="Specify an user password to connect to the proxy server, optional."></div>
+                    <fmt:message key="partials.canvas.new-remote-process-group-dialog.HttpProxyPassword"/>
+                    <fmt:message key="partials.canvas.disable-controller-service-dialog.Scope.setting-field.title" var="HttpProxyPassword"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${HttpProxyPassword}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="password" class="small-setting-input" id="new-remote-process-group-proxy-password"/>
@@ -91,8 +99,9 @@
         <div class="setting">
             <div class="remote-process-group-setting-left">
                 <div class="setting-name">
-                    Communications timeout
-                    <div class="fa fa-question-circle" alt="Info" title="When communication with this remote process group takes longer than this amount of time, it will timeout."></div>
+                    <fmt:message key="partials.canvas.new-remote-process-group-dialog.timeout"/>
+                    <fmt:message key="partials.canvas.disable-controller-service-dialog.Scope.setting-field.title" var="timeout"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${timeout}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" class="small-setting-input" id="new-remote-process-group-timeout"/>
@@ -100,8 +109,9 @@
             </div>
             <div class="remote-process-group-setting-right">
                 <div class="setting-name">
-                    Yield duration
-                    <div class="fa fa-question-circle" alt="Info" title="When communication with this remote process group fails, it will not be scheduled again until this amount of time elapses."></div>
+                    <fmt:message key="partials.canvas.new-remote-process-group-dialog.yield"/>
+                    <fmt:message key="partials.canvas.disable-controller-service-dialog.Scope.setting-field.title" var="yield"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${yield}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" class="small-setting-input" id="new-remote-process-group-yield-duration"/>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-reporting-task-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-reporting-task-dialog.jsp
index 816b02a955a7..aaeb48995c45 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-reporting-task-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-reporting-task-dialog.jsp
@@ -15,25 +15,27 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="new-reporting-task-dialog" layout="column" class="hidden large-dialog">
     <div class="dialog-content">
         <div layout="row" style="padding-bottom:0">
             <div flex="25" layout="row" layout-align="start center">
-                <div class="setting-name">Tag Cloud:</div>
+                <div class="setting-name"><fmt:message key="partials.canvas.new-reporting-task-dialog.TagCloud"/>:</div>
             </div>
             <div flex layout="row" layout-align="space-between center" id="reporting-task-type-filter-controls" class="filter-status">
                 <div id="reporting-task-type-filter-status">
-                    Displaying&nbsp;<span id="displayed-reporting-task-types"></span>&nbsp;of&nbsp;<span id="total-reporting-task-types"></span>
+                    <fmt:message key="partials.canvas.new-reporting-task-dialog.Displaying"/>&nbsp;<span id="displayed-reporting-task-types"></span>&nbsp;<fmt:message key="partials.canvas.new-processor-dialog.Of"/>&nbsp;<span id="total-reporting-task-types"></span>
                 </div>
                 <div id="controller-service-type-filter-container">
-                    <input type="text" id="reporting-task-type-filter" placeholder="Filter"/>
+                <fmt:message key="partials.canvas.new-reporting-task-dialog.reporting-task-type-filter" var="filter"/>
+                    <input type="text" id="reporting-task-type-filter" placeholder="${filter}"/>
                 </div>
             </div>
         </div>
         <div flex layout="row" style="padding-top:0;height: 90%;">
             <div flex="25" id="reporting-task-tag-cloud-container">
                 <div class="setting">
-                    <div class="setting-name">Tags</div>
+                    <div class="setting-name"><fmt:message key="partials.canvas.new-reporting-task-dialog.Tags"/></div>
                     <div class="setting-field">
                         <div id="reporting-task-tag-cloud"></div>
                     </div>
@@ -41,7 +43,7 @@
             </div>
             <div layout="column" flex id="reporting-task-types-container">
                 <div id="reporting-task-types-table" class="unselectable"></div>
-                <div id="reporting-task-type-name-title" class="ellipsis">Selected Reporting Task:</div>
+                <div id="reporting-task-type-name-title" class="ellipsis"><fmt:message key="partials.canvas.new-reporting-task-dialog.ReportTask"/>:</div>
                 <div id="reporting-task-type-name" class="ellipsis"></div>
                 <div id="reporting-task-description-container" class="hidden">
                     <div id="reporting-task-type-description" class="ellipsis multiline"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-template-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-template-dialog.jsp
index 0aaa8d6efdaf..05eeaa5231c5 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-template-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-template-dialog.jsp
@@ -15,16 +15,17 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="new-template-dialog" class="hidden medium-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">Name</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.new-template-dialog.Name"/></div>
             <div class="setting-field">
                 <input id="new-template-name" class="new-template-field" type="text"/>
             </div>
         </div>
         <div class="setting">
-            <div class="setting-name">Description</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.new-template-dialog.Description"/></div>
             <div class="setting-field">
                 <textarea cols="30" rows="8" id="new-template-description" class="new-template-field"></textarea>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/override-policy-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/override-policy-dialog.jsp
index b369c481b540..179da24171d9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/override-policy-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/override-policy-dialog.jsp
@@ -15,12 +15,13 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="override-policy-dialog" class="hidden small-dialog">
     <div class="dialog-content">
-        <div>Do you want to override with a copy of the inherited policy or an empty policy?</div>
+        <div><fmt:message key="partials.canvas.override-policy-dialog.content"/></div>
         <div style="margin-top: 10px;">
-            <label for="copy-policy-radio-button"><input id="copy-policy-radio-button" type="radio" name="emptyOrCopy" value="copy" checked="checked"/> Copy</label>
-            <label for="empty-policy-radio-button"><input id="empty-policy-radio-button" type="radio" name="emptyOrCopy" value="policy"/> Empty</label>
+            <label for="copy-policy-radio-button"><input id="copy-policy-radio-button" type="radio" name="emptyOrCopy" value="copy" checked="checked"/> <fmt:message key="partials.canvas.override-policy-dialog.Copy"/></label>
+            <label for="empty-policy-radio-button"><input id="empty-policy-radio-button" type="radio" name="emptyOrCopy" value="policy"/> <fmt:message key="partials.canvas.override-policy-dialog.Empty"/></label>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/policy-management.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/policy-management.jsp
index 7cd08e082598..7fc54759f958 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/policy-management.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/policy-management.jsp
@@ -15,16 +15,17 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="policy-management">
-    <div id="policy-management-header-text">Access Policies</div>
+    <div id="policy-management-header-text"><fmt:message key="partials.canvas.policy-management.policy-management-header-text"/></div>
     <div id="policy-controls-container">
         <span id="selected-policy-action" class="hidden"></span>
         <span id="selected-policy-type" class="hidden"></span>
         <div id="policy-message-container">
             <div id="policy-message"></div>
-            <div id="new-policy-message" class="hidden"><span id="create-policy-link" class="link">Create</span> a new policy.</div>
-            <div id="override-policy-message" class="hidden"><span id="override-policy-link" class="link">Override</span> this policy.</div>
-            <div id="add-local-admin-message" class="hidden"><span id="add-local-admin-link" class="link">Add</span> policy for additional administrators.</div>
+            <div id="new-policy-message" class="hidden"><span id="create-policy-link" class="link"><fmt:message key="partials.canvas.policy-management.create-policy-link"/></span> <fmt:message key="partials.canvas.policy-management.new-policy-message"/>.</div>
+            <div id="override-policy-message" class="hidden"><span id="override-policy-link" class="link"><fmt:message key="partials.canvas.policy-management.override-policy-link"/></span> <fmt:message key="partials.canvas.policy-management.override-policy-message"/>.</div>
+            <div id="add-local-admin-message" class="hidden"><span id="add-local-admin-link" class="link"><fmt:message key="partials.canvas.policy-management.add-local-admin-link"/></span> <fmt:message key="partials.canvas.policy-management.add-local-admin-message"/>.</div>
             <div class="clear"></div>
         </div>
         <div id="global-policy-controls" class="hidden policy-controls">
@@ -49,7 +50,7 @@
                 </div>
                 <div class="policy-selected-component-details-container">
                     <div class="policy-selected-component-name"></div>
-                    <div class="policy-selected-component-type">Template</div>
+                    <div class="policy-selected-component-type"><fmt:message key="partials.canvas.policy-management.policy-selected-component-type1"/></div>
                 </div>
                 <div class="clear"></div>
             </div>
@@ -59,7 +60,7 @@
                 </div>
                 <div class="policy-selected-component-details-container">
                     <div class="policy-selected-component-name"></div>
-                    <div class="policy-selected-component-type">Controller Service</div>
+                    <div class="policy-selected-component-type"><fmt:message key="partials.canvas.policy-management.policy-selected-component-type2"/></div>
                 </div>
                 <div class="clear"></div>
             </div>
@@ -69,7 +70,7 @@
                 </div>
                 <div class="policy-selected-component-details-container">
                     <div class="policy-selected-component-name"></div>
-                    <div class="policy-selected-component-type">Reporting Task</div>
+                    <div class="policy-selected-component-type"><fmt:message key="partials.canvas.policy-management.policy-selected-component-type3"/></div>
                 </div>
                 <div class="clear"></div>
             </div>
@@ -84,12 +85,13 @@
     </div>
     <div id="policy-table"></div>
     <div id="policy-refresh-container">
-        <button id="policy-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    	<fmt:message key="partials.canvas.policy-management.policy-refresh-button" var="refresh"/>
+        <button id="policy-refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
         <div class="last-refreshed-container">
-            Last updated:&nbsp;<span id="policy-last-refreshed" class="last-refreshed"></span>
+            <fmt:message key="partials.canvas.policy-management.last-refreshed-container"/>:&nbsp;<span id="policy-last-refreshed" class="last-refreshed"></span>
         </div>
         <div id="policy-loading-container" class="loading-container"></div>
-        <div id="admin-policy-message" class="hidden">Only listing component specific administrators. Inherited administrators not shown.</div>
+        <div id="admin-policy-message" class="hidden"><fmt:message key="partials.canvas.policy-management.admin-policy-message"/></div>
         <div class="clear"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/port-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/port-configuration.jsp
index 4a52ba8d24f9..1d3051b4d4f1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/port-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/port-configuration.jsp
@@ -15,23 +15,24 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"
 <div id="port-configuration" class="hidden medium-dialog">
     <div class="dialog-content">
         <div class="port-setting">
-            <div class="setting-name">Port name</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.port-configuration.PortName"/></div>
             <div class="setting-field">
                 <div id="port-name-container">
                     <input type="text" id="port-name"/>
                     <div class="port-enabled-container">
                         <div id="port-enabled" class="port-enabled nf-checkbox checkbox-unchecked"></div>
-                        <span class="nf-checkbox-label"> Enabled</span>
+                        <span class="nf-checkbox-label"> <fmt:message key="partials.canvas.port-configuration.Enabled"/></span>
                     </div>
                 </div>
             </div>
         </div>
         <div class="port-setting">
             <div class="setting-name">
-                Id
+                <fmt:message key="partials.canvas.port-configuration.Id"/>
             </div>
             <div class="setting-field">
                 <span id="port-id"></span>
@@ -39,15 +40,16 @@
         </div>
         <div id="port-concurrent-task-container" class="port-setting">
             <div class="setting-name">
-                Concurrent tasks
-                <div class="fa fa-question-circle" alt="Info" title="The number of tasks that should be concurrently scheduled for this port."></div>
+                <fmt:message key="partials.canvas.port-configuration.ConcurrentTasks"/>
+                <fmt:message key="partials.canvas.port-configuration.ConcurrentTasks.title" var="ConcurrentTasks"/>
+                <div class="fa fa-question-circle" alt="Info" title="${ConcurrentTasks}"></div>
             </div>
             <div class="setting-field">
                 <input type="text" id="port-concurrent-tasks" class="port-field"></divnput>
             </div>
         </div>
         <div class="port-setting">
-            <div class="setting-name">Comments</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.port-configuration.Comments"/></div>
             <div class="setting-field">
                 <textarea cols="30" rows="4" id="port-comments" class="port-field"></textarea>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/port-details.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/port-details.jsp
index df3deef5c1fe..e3b882119ebf 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/port-details.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/port-details.jsp
@@ -15,22 +15,23 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="port-details" class="hidden medium-dialog">
     <div class="dialog-content">
         <div class="port-setting">
-            <div class="setting-name">Port name</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.port-details.PortName"/></div>
             <div class="setting-field">
                 <span id="read-only-port-name"></span>
             </div>
         </div>
         <div class="port-setting">
-            <div class="setting-name">Id</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.port-details.Id"/></div>
             <div class="setting-field">
                 <span id="read-only-port-id"></span>
             </div>
         </div>
         <div class="port-setting">
-            <div class="setting-name">Comments</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.port-details.Comments"/></div>
             <div class="setting-field">
                 <div id="read-only-port-comments"></div>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
index 6fd904d386f7..7f0e4b7d7872 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
@@ -15,8 +15,9 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="process-group-configuration">
-    <div id="process-group-configuration-header-text" class="settings-header-text">Process Group Configuration</div>
+    <div id="process-group-configuration-header-text" class="settings-header-text"><fmt:message key="partials.canvas.process-group-configuration.process-group-configuration-header-text"/></div>
     <div class="settings-container">
         <div>
             <div id="process-group-configuration-tabs" class="settings-tabs tab-container"></div>
@@ -27,7 +28,7 @@
             <div id="general-process-group-configuration-tab-content" class="configuration-tab">
                 <div id="general-process-group-configuration">
                     <div class="setting">
-                        <div class="setting-name">Process group name</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.process-group-configuration.ProcessGroupName"/></div>
                         <span id="process-group-id" class="hidden"></span>
                         <div class="editable setting-field">
                             <input type="text" id="process-group-name" class="setting-input"/>
@@ -37,7 +38,7 @@
                         </div>
                     </div>
                     <div class="setting">
-                        <div class="setting-name">Process group comments</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.process-group-configuration.Processgroupcomments"/></div>
                         <div class="editable setting-field">
                             <textarea id="process-group-comments" class="setting-input"></textarea>
                         </div>
@@ -46,7 +47,7 @@
                         </div>
                     </div>
                     <div class="editable settings-buttons">
-                        <div id="process-group-configuration-save" class="button">Apply</div>
+                        <div id="process-group-configuration-save" class="button"><fmt:message key="partials.canvas.process-group-configuration.process-group-configuration-save"/></div>
                         <div class="clear"></div>
                     </div>
                 </div>
@@ -57,12 +58,13 @@
         </div>
     </div>
     <div id="process-group-refresh-container">
-        <button id="process-group-configuration-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+        <fmt:message key="partials.canvas.process-group-configuration.process-group-configuration-refresh-button" var="RefreshButton"/>
+        <button id="process-group-configuration-refresh-button" class="refresh-button pointer fa fa-refresh" title="${RefreshButton}"></button>
         <div class="last-refreshed-container">
-            Last updated:&nbsp;<span id="process-group-configuration-last-refreshed" class="last-refreshed"></span>
+            <fmt:message key="partials.canvas.process-group-configuration.last-refreshed-container"/>:&nbsp;<span id="process-group-configuration-last-refreshed" class="last-refreshed"></span>
         </div>
         <div id="process-group-configuration-loading-container" class="loading-container"></div>
-        <div id="flow-cs-availability" class="hidden">Listed services are available to all descendant Processors and services of this Process Group.</div>
+        <div id="flow-cs-availability" class="hidden"><fmt:message key="partials.canvas.process-group-configuration.availability"/></div>
         <div class="clear"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/processor-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/processor-configuration.jsp
index 185166e57419..c5025d61be9c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/processor-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/processor-configuration.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="processor-configuration" layout="column" class="hidden large-dialog">
     <div class="processor-configuration-tab-container dialog-content">
         <div id="processor-configuration-tabs" class="tab-container"></div>
@@ -22,23 +23,23 @@
             <div id="processor-standard-settings-tab-content" class="configuration-tab">
                 <div class="settings-left">
                     <div class="setting">
-                        <div class="setting-name">Name</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.processor-configuration.Name"/></div>
                         <div id="processor-name-container" class="setting-field">
                             <input type="text" id="processor-name" name="processor-name"/>
                             <div class="processor-enabled-container">
                                 <div id="processor-enabled" class="nf-checkbox checkbox-unchecked"></div>
-                                <span class="nf-checkbox-label"> Enabled</span>
+                                <span class="nf-checkbox-label"> <fmt:message key="partials.canvas.processor-configuration.Enabled"/></span>
                             </div>
                         </div>
                     </div>
                     <div class="setting">
-                        <div class="setting-name">Id</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.processor-configuration.Id"/></div>
                         <div class="setting-field">
                             <span id="processor-id"></span>
                         </div>
                     </div>
                     <div class="setting">
-                        <div class="setting-name">Type</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.processor-configuration.Type"/></div>
                         <div class="setting-field">
                             <span id="processor-type"></span>
                         </div>
@@ -46,8 +47,9 @@
                     <div class="setting">
                         <div class="penalty-duration-setting">
                             <div class="setting-name">
-                                Penalty duration
-                                <div class="fa fa-question-circle" alt="Info" title="The amount of time used when this processor penalizes a FlowFile."></div>
+                                <fmt:message key="partials.canvas.processor-configuration.PenaltyDuration"/>
+                                <fmt:message key="partials.canvas.processor-configuration.PenaltyDuration.title" var="title_PenaltyDuration"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${title_PenaltyDuration}"></div>
                             </div>
                             <div class="setting-field">
                                 <input type="text" id="penalty-duration" name="penalty-duration" class="small-setting-input"/>
@@ -55,8 +57,9 @@
                         </div>
                         <div class="yield-duration-setting">
                             <div class="setting-name">
-                                Yield duration
-                                <div class="fa fa-question-circle" alt="Info" title="When a processor yields, it will not be scheduled again until this amount of time elapses."></div>
+                                <fmt:message key="partials.canvas.processor-configuration.YieldDuration"/>
+                                <fmt:message key="partials.canvas.processor-configuration.YieldDuration.title" var="title_YieldDuration"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${title_YieldDuration}"></div>
                             </div>
                             <div class="setting-field">
                                 <input type="text" id="yield-duration" name="yield-duration" class="small-setting-input"/>
@@ -67,8 +70,9 @@
                     <div class="setting">
                         <div class="bulletin-setting">
                             <div class="setting-name">
-                                Bulletin level
-                                <div class="fa fa-question-circle" alt="Info" title="The level at which this processor will generate bulletins."></div>
+                                <fmt:message key="partials.canvas.processor-configuration.BulletinLevel"/>
+                                <fmt:message key="partials.canvas.processor-configuration.BulletinLevel.title" var="title_BulletinLevel"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${title_BulletinLevel}"></div>
                             </div>
                             <div class="setting-field">
                                 <div id="bulletin-level-combo"></div>
@@ -81,8 +85,9 @@
                 <div class="settings-right">
                     <div class="setting">
                         <div class="setting-name">
-                            Automatically terminate relationships
-                            <div class="fa fa-question-circle" alt="Info" title="Will automatically terminate FlowFiles sent to a given relationship if it is not defined elsewhere."></div>
+                            <fmt:message key="partials.canvas.processor-configuration.AutoTerminateRelationships"/>
+                            <fmt:message key="partials.canvas.processor-configuration.AutoTerminateRelationships.title" var="title_AutoTerminateRelationships"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${title_AutoTerminateRelationships}"></div>
                         </div>
                         <div class="setting-field">
                             <div id="auto-terminate-relationship-names"></div>
@@ -95,8 +100,9 @@
                     <div class="setting">
                         <div class="scheduling-strategy-setting">
                             <div class="setting-name">
-                                Scheduling strategy
-                                <div class="fa fa-question-circle" alt="Info" title="The strategy used to schedule this processor."></div>
+                                <fmt:message key="partials.canvas.processor-configuration.SchedulingStrategy"/>
+                                <fmt:message key="partials.canvas.processor-configuration.SchedulingStrategy.title" var="title_SchedulingStrategy"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${title_SchedulingStrategy}"></div>
                             </div>
                             <div class="setting-field">
                                 <div type="text" id="scheduling-strategy-combo"></div>
@@ -104,15 +110,16 @@
                         </div>
                         <div id="event-driven-warning" class="hidden">
                             <div class="processor-configuration-warning-icon"></div>
-                            This strategy is experimental
+                            <fmt:message key="partials.canvas.processor-configuration.event-driven-warning"/>
                         </div>
                         <div class="clear"></div>
                     </div>
                     <div id="timer-driven-options" class="setting">
                         <div class="concurrently-schedulable-tasks-setting">
                             <div class="setting-name">
-                                Concurrent tasks
-                                <div class="fa fa-question-circle" alt="Info" title="The number of tasks that should be concurrently scheduled for this processor."></div>
+                                <fmt:message key="partials.canvas.processor-configuration.ConcurrentTasks"/>
+                                <fmt:message key="partials.canvas.processor-configuration.ConcurrentTasks.title" var="title_ConcurrentTasks"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${title_ConcurrentTasks}"></div>
                             </div>
                             <div class="setting-field">
                                 <input type="text" id="timer-driven-concurrently-schedulable-tasks" name="timer-driven-concurrently-schedulable-tasks" class="small-setting-input"/>
@@ -120,8 +127,9 @@
                         </div>
                         <div class="scheduling-period-setting">
                             <div class="setting-name">
-                                Run schedule
-                                <div class="fa fa-question-circle" alt="Info" title="The amount of time that should elapse between task executions."></div>
+                                <fmt:message key="partials.canvas.processor-configuration.RunSchedule"/>
+                                <fmt:message key="partials.canvas.processor-configuration.RunSchedule.title.1" var="RunSchedule1"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${RunSchedule1}"></div>
                             </div>
                             <div class="setting-field">
                                 <input type="text" id="timer-driven-scheduling-period" name="timer-driven-scheduling-period" class="small-setting-input"/>
@@ -132,8 +140,9 @@
                     <div id="event-driven-options" class="setting">
                         <div class="concurrently-schedulable-tasks-setting">
                             <div class="setting-name">
-                                Concurrent tasks
-                                <div class="fa fa-question-circle" alt="Info" title="The number of tasks that should be concurrently scheduled for this processor."></div>
+                                <fmt:message key="partials.canvas.processor-configuration.ConcurrentTasks"/>
+                                <fmt:message key="partials.canvas.processor-configuration.ConcurrentTasks.title" var="title_ConcurrentTasks"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${title_ConcurrentTasks}"></div>
                             </div>
                             <div class="setting-field">
                                 <input type="text" id="event-driven-concurrently-schedulable-tasks" name="event-driven-concurrently-schedulable-tasks" class="small-setting-input"/>
@@ -144,8 +153,9 @@
                     <div id="cron-driven-options" class="setting">
                         <div class="concurrently-schedulable-tasks-setting">
                             <div class="setting-name">
-                                Concurrent tasks
-                                <div class="fa fa-question-circle" alt="Info" title="The number of tasks that should be concurrently scheduled for this processor."></div>
+                                <fmt:message key="partials.canvas.processor-configuration.ConcurrentTasks"/>
+                                <fmt:message key="partials.canvas.processor-configuration.ConcurrentTasks.title" var="title_ConcurrentTasks"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${title_ConcurrentTasks}"></div>
                             </div>
                             <div class="setting-field">
                                 <input type="text" id="cron-driven-concurrently-schedulable-tasks" name="cron-driven-concurrently-schedulable-tasks" class="small-setting-input"/>
@@ -153,8 +163,9 @@
                         </div>
                         <div class="scheduling-period-setting">
                             <div class="setting-name">
-                                Run schedule
-                                <div class="fa fa-question-circle" alt="Info" title="The CRON expression that defines when this processor should run."></div>
+                                <fmt:message key="partials.canvas.processor-configuration.RunSchedule"/>
+                                <fmt:message key="partials.canvas.processor-configuration.RunSchedule.title.2" var="RunSchedule2"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${RunSchedule2}"></div>
                             </div>
                             <div class="setting-field">
                                 <input type="text" id="cron-driven-scheduling-period" name="cron-driven-scheduling-period" class="small-setting-input"/>
@@ -165,8 +176,9 @@
                     <div id="execution-node-options" class="setting">
                         <div class="execution-node-setting">
                             <div class="setting-name">
-                                Execution
-                                <div class="fa fa-question-circle" alt="Info" title="The node(s) that this processor will be scheduled to run on."></div>
+                                <fmt:message key="partials.canvas.processor-configuration.Execution"/>
+                                <fmt:message key="partials.canvas.processor-configuration.ExecutionTitle" var="ExecutionTitle"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${ExecutionTitle}"></div>
                             </div>
                             <div class="setting-field">
                                 <div id="execution-node-combo"></div>
@@ -179,9 +191,10 @@
                 <div id="run-duration-setting-container" class="settings-right">
                     <div class="setting">
                         <div class="setting-name">
-                            Run duration
+                            <fmt:message key="partials.canvas.processor-configuration.RunDuration"/>
+                            <fmt:message key="partials.canvas.processor-configuration.RunDuration.title" var="title_RunDuration"/>
                             <div class="fa fa-question-circle" alt="Info"
-                                 title="When scheduled to run, the processor will continue running for up to this duration. A run duration of 0ms will execute once when scheduled."></div>
+                                 title="${title_RunDuration}"></div>
                         </div>
                         <div class="setting-field" style="overflow: visible;">
                             <div id="run-duration-container">
@@ -198,13 +211,13 @@
                                 </div>
                                 <div id="run-duration-slider"></div>
                                 <div id="run-duration-explanation">
-                                    <div id="min-run-duration-explanation">Lower latency</div>
-                                    <div id="max-run-duration-explanation">Higher throughput</div>
+                                    <div id="min-run-duration-explanation"><fmt:message key="partials.canvas.processor-configuration.LowerLatency"/></div>
+                                    <div id="max-run-duration-explanation"><fmt:message key="partials.canvas.processor-configuration.HigherThroughput"/></div>
                                     <div class="clear"></div>
                                 </div>
                                 <div id="run-duration-data-loss" class="hidden">
                                     <div class="processor-configuration-warning-icon"></div>
-                                    Source Processors with a run duration greater than 0ms and no incoming connections could lose data when NiFi is shutdown.
+                                    <fmt:message key="partials.canvas.processor-configuration.HigherThroughput.Warning"/>
                                 </div>
                             </div>
                         </div>
@@ -220,4 +233,4 @@
         </div>
     </div>
 </div>
-<div id="new-processor-property-container"></div>
+<div id="new-processor-property-container"></div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/queue-listing.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/queue-listing.jsp
index e4a3281e70dd..21d7e61e3a93 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/queue-listing.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/queue-listing.jsp
@@ -15,22 +15,24 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="queue-listing-container" class="hidden" class="hidden medium-dialog">
     <div id="queue-listing-header-container">
         <div id="queue-listing-header-text"></div>
     </div>
     <div id="queue-listing-stats-container">
         <div id="queue-listing-stats" class="filter-status">
-            Displaying&nbsp;<span id="displayed-flowfiles"></span>&nbsp;of&nbsp;<span id="total-flowfiles-count"></span>&nbsp;(<span id="total-flowfiles-size"></span>)
+            <fmt:message key="partials.canvas.queue-listing.queue-listing-stats-deploy"/>&nbsp;<span id="displayed-flowfiles"></span>&nbsp;<fmt:message key="partials.canvas.queue-listing.queue-listing-stats-of"/>&nbsp;<span id="total-flowfiles-count"></span>&nbsp;(<span id="total-flowfiles-size"></span>)
         </div>
         <div class="clear"></div>
     </div>
     <div id="queue-listing-table"></div>
     <div id="queue-listing-message" class="hidden"></div>
     <div id="queue-listing-refresh-container">
-        <button id="queue-listing-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    	<fmt:message key="partials.canvas.queue-listing.queue-listing-refresh-button" var="refresh"/>
+        <button id="queue-listing-refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
         <div id="queue-listing-last-refreshed-container" class="last-refreshed-container">
-            Last updated:&nbsp;<span id="queue-listing-last-refreshed"></span>
+            <fmt:message key="partials.canvas.queue-listing.lastUpdate"/>:&nbsp;<span id="queue-listing-last-refreshed"></span>
         </div>
         <div id="queue-listing-loading-container" class="loading-container"></div>
     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-port-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-port-configuration.jsp
index 8f383692830f..bc013dab48a7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-port-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-port-configuration.jsp
@@ -15,10 +15,11 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="remote-port-configuration" class="hidden medium-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">Name</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.remote-port-configuration.Name"/></div>
             <div class="setting-field">
                 <span id="remote-port-id" class="hidden"></span>
                 <span id="remote-port-type" class="hidden"></span>
@@ -27,14 +28,15 @@
         </div>
         <div class="setting">
             <div class="setting-name">
-                Concurrent tasks
-                <div class="fa fa-question-circle" alt="Info" title="The number of tasks that should be concurrently scheduled for this port."></div>
+                <fmt:message key="partials.canvas.remote-port-configuration.ConcurrentTasks"/>
+                <fmt:message key="partials.canvas.remote-port-configuration.ConcurrentTasks.title" var="ConcurrentTasks"/>
+                <div class="fa fa-question-circle" alt="Info" title="${ConcurrentTasks}"></div>
             </div>
             <div class="setting-field">
                 <input id="remote-port-concurrent-tasks" type="text"/>
                 <div id="remote-port-use-compression-container">
                     <div id="remote-port-use-compression" class="nf-checkbox"></div>
-                    <span class="nf-checkbox-label">Compressed</span>
+                    <span class="nf-checkbox-label"><fmt:message key="partials.canvas.remote-port-configuration.remote-port-use-compression"/></span>
                 </div>
             </div>
         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-configuration.jsp
index 36ecd48b1f18..a62874b03fb2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-configuration.jsp
@@ -15,22 +15,23 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="remote-process-group-configuration" class="hidden large-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">Name</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.remote-process-group-configuration.Name"/></div>
             <div class="setting-field">
                 <span id="remote-process-group-name"></span>
             </div>
         </div>
         <div class="setting">
-            <div class="setting-name">Id</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.remote-process-group-configuration.Id"/></div>
             <div class="setting-field">
                 <span id="remote-process-group-id"></span>
             </div>
         </div>
         <div class="setting">
-            <div class="setting-name">URLs</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.remote-process-group-configuration.URL"/></div>
             <div class="setting-field">
                 <span id="remote-process-group-urls"></span>
             </div>
@@ -38,8 +39,9 @@
         <div class="setting">
             <div class="remote-process-group-setting-left">
                 <div class="setting-name">
-                    Transport Protocol
-                    <div class="fa fa-question-circle" alt="Info" title="Specify the transport protocol to use for this Remote Process Group communication."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.TransportProtocol"/>
+                <fmt:message key="partials.canvas.remote-process-group-configuration.TransportProtocolTitle" var="TransportProtocol"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${TransportProtocol}"></div>
                 </div>
                 <div class="setting-field">
                     <div id="remote-process-group-transport-protocol-combo"></div>
@@ -47,8 +49,9 @@
             </div>
             <div class="remote-process-group-setting-right">
                 <div class="setting-name">
-                    Local Network Interface
-                    <div class="fa fa-question-circle" alt="Info" title="The local network interface to send/receive data. If not specified, any local address is used. If clustered, all nodes must have an interface with this identifier."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.LocalNetwork"/>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.LocalNetworkTitle" var="LocalNetworkTitle"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${LocalNetworkTitle}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" class="small-setting-input" id="remote-process-group-local-network-interface"/>
@@ -59,8 +62,9 @@
         <div class="setting">
             <div class="remote-process-group-setting-left">
                 <div class="setting-name">
-                    HTTP Proxy server hostname
-                    <div class="fa fa-question-circle" alt="Info" title="Specify the proxy server's hostname to use. If not specified, HTTP traffics are sent directly to the target NiFi instance."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.hostname"/>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.hostnameTitle" var="hostnametitle"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${hostnametitle}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" class="small-setting-input" id="remote-process-group-proxy-host"/>
@@ -68,8 +72,9 @@
             </div>
             <div class="remote-process-group-setting-right">
                 <div class="setting-name">
-                    HTTP Proxy server port
-                    <div class="fa fa-question-circle" alt="Info" title="Specify the proxy server's port number, optional. If not specified, default port 80 will be used."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.port"/>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.portTitle" var="porttitle"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${porttitle}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" class="small-setting-input" id="remote-process-group-proxy-port"/>
@@ -80,8 +85,9 @@
         <div class="setting">
             <div class="remote-process-group-setting-left">
                 <div class="setting-name">
-                    HTTP Proxy user
-                    <div class="fa fa-question-circle" alt="Info" title="Specify an user name to connect to the proxy server, optional."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.user"/>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.userTitle" var="usertitle"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${usertitle}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" class="small-setting-input" id="remote-process-group-proxy-user"/>
@@ -89,8 +95,9 @@
             </div>
             <div class="remote-process-group-setting-right">
                 <div class="setting-name">
-                    HTTP Proxy password
-                    <div class="fa fa-question-circle" alt="Info" title="Specify an user password to connect to the proxy server, optional."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.pwd"/>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.pwdTitle" var="pwdtitle"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${pwdtitle}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="password" class="small-setting-input" id="remote-process-group-proxy-password"/>
@@ -101,8 +108,9 @@
         <div class="setting">
             <div class="remote-process-group-setting-left">
                 <div class="setting-name">
-                    Communications timeout
-                    <div class="fa fa-question-circle" alt="Info" title="When communication with this remote process group takes longer than this amount of time, it will timeout."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.CommunicationsTimeout"/>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.CommunicationsTimeoutTitle" var="CommunicationsTimeout1"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${CommunicationsTimeout1}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" class="small-setting-input" id="remote-process-group-timeout"/>
@@ -110,8 +118,9 @@
             </div>
             <div class="remote-process-group-setting-right">
                 <div class="setting-name">
-                    Yield duration
-                    <div class="fa fa-question-circle" alt="Info" title="When communication with this remote process group fails, it will not be scheduled again until this amount of time elapses."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.YieldDuration"/>
+                    <fmt:message key="partials.canvas.remote-process-group-configuration.YieldDuration.title" var="YieldDuration1"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${YieldDuration1}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" class="small-setting-input" id="remote-process-group-yield-duration"/>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-details.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-details.jsp
index 3388a681bdd4..015bcd9eada4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-details.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-details.jsp
@@ -15,22 +15,23 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="remote-process-group-details" class="hidden medium-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">Name</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.remote-process-group-details.Name"/></div>
             <div class="setting-field">
                 <span id="read-only-remote-process-group-name"></span>
             </div>
         </div>
         <div class="setting">
-            <div class="setting-name">Id</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.remote-process-group-details.Id"/></div>
             <div class="setting-field">
                 <span id="read-only-remote-process-group-id"></span>
             </div>
         </div>
         <div class="setting">
-            <div class="setting-name">URLs</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.remote-process-group-details.URL"/></div>
             <div class="setting-field">
                 <span id="read-only-remote-process-group-urls"></span>
             </div>
@@ -38,17 +39,19 @@
         <div class="setting">
             <div class="remote-process-group-setting-left">
                 <div class="setting-name">
-                    Transport Protocol
-                    <div class="fa fa-question-circle" alt="Info" title="Transport protocol to use for this Remote Process Group communication."></div>
-                </div>
+                <fmt:message key="partials.canvas.remote-process-group-details.TransportProtocol"/>
+                    <fmt:message key="partials.canvas.remote-process-group-details.TransportProtocolTitle" var="TransportProtocol2"/>
+                <div class="fa fa-question-circle" alt="Info" title="TransportProtocol${TransportProtocol2}"></div>
+            </div>
                 <div class="setting-field">
                     <div id="read-only-remote-process-group-transport-protocol"></div>
                 </div>
             </div>
             <div class="remote-process-group-setting-right">
                 <div class="setting-name">
-                    Local Network Interface
-                    <div class="fa fa-question-circle" alt="Info" title="The local network interface to send/receive data. If not specified, any local address is used. If clustered, all nodes must have an interface with this identifier."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-details.LocalNetwork"/>
+                    <fmt:message key="partials.canvas.remote-process-group-details.LocalNetworkTitle" var="LocalNetworkTitle2"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${LocalNetworkTitle2}"></div>
                 </div>
                 <div class="setting-field">
                     <span id="read-only-remote-process-group-local-network-interface"></span>
@@ -59,8 +62,9 @@
         <div class="setting">
             <div class="remote-process-group-setting-left">
                 <div class="setting-name">
-                    HTTP Proxy server hostname
-                    <div class="fa fa-question-circle" alt="Info" title="Specify the proxy server's hostname to use. If not specified, HTTP traffics are sent directly to the target NiFi instance."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-details.hostname"/>
+                    <fmt:message key="partials.canvas.remote-process-group-details.hostnameTitle" var="hostname2"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${hostname2}"></div>
                 </div>
                 <div class="setting-field">
                     <span id="read-only-remote-process-group-proxy-host"></span>
@@ -68,8 +72,9 @@
             </div>
             <div class="remote-process-group-setting-right">
                 <div class="setting-name">
-                    HTTP Proxy server port
-                    <div class="fa fa-question-circle" alt="Info" title="Specify the proxy server's port number, optional. If not specified, default port 80 will be used."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-details.port"/>
+                    <fmt:message key="partials.canvas.remote-process-group-details.portTitle" var="porttitle2"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${porttitle2}"></div>
                 </div>
                 <div class="setting-field">
                     <span id="read-only-remote-process-group-proxy-port"></span>
@@ -80,8 +85,9 @@
         <div class="setting">
             <div class="remote-process-group-setting-left">
                 <div class="setting-name">
-                    HTTP Proxy user
-                    <div class="fa fa-question-circle" alt="Info" title="Specify an user name to connect to the proxy server, optional."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-details.user"/>
+                    <fmt:message key="partials.canvas.remote-process-group-details.userTitle" var="usertitle2"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${usertitle2}"></div>
                 </div>
                 <div class="setting-field">
                     <span id="read-only-remote-process-group-proxy-user"></span>
@@ -89,8 +95,9 @@
             </div>
             <div class="remote-process-group-setting-right">
                 <div class="setting-name">
-                    HTTP Proxy password
-                    <div class="fa fa-question-circle" alt="Info" title="Specify an user password to connect to the proxy server, optional."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-details.pwd"/>
+                    <fmt:message key="partials.canvas.remote-process-group-details.pwdTitle" var="pwdtitle2"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${pwdtitle2}"></div>
                 </div>
                 <div class="setting-field">
                     <span id="read-only-remote-process-group-proxy-password"></span>
@@ -101,8 +108,9 @@
         <div class="setting">
             <div class="remote-process-group-setting-left">
                 <div class="setting-name">
-                    Communications timeout
-                    <div class="fa fa-question-circle" alt="Info" title="When communication with this remote process group takes longer than this amount of time, it will timeout."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-details.CommunicationsTimeout"/>
+                    <fmt:message key="partials.canvas.remote-process-group-details.CommunicationsTimeoutTitle" var="CommunicationsTimeout2"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${CommunicationsTimeout2}"></div>
                 </div>
                 <div class="setting-field">
                     <span id="read-only-remote-process-group-timeout"></span>
@@ -110,8 +118,9 @@
             </div>
             <div class="remote-process-group-setting-right">
                 <div class="setting-name">
-                    Yield duration
-                    <div class="fa fa-question-circle" alt="Info" title="When communication with this remote process group fails, it will not be scheduled again until this amount of time elapses."></div>
+                    <fmt:message key="partials.canvas.remote-process-group-details.YieldDuration"/>
+                    <fmt:message key="partials.canvas.remote-process-group-details.YieldDuration.title" var="YieldDuration2"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${YieldDuration2}"></div>
                 </div>
                 <div class="setting-field">
                     <span id="read-only-remote-process-group-yield-duration"></span>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-ports.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-ports.jsp
index 672800c6a538..763625c14e00 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-ports.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-ports.jsp
@@ -15,31 +15,32 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="remote-process-group-ports" class="hidden large-dialog">
     <div class="dialog-content">
         <span id="remote-process-group-ports-id" class="hidden"></span>
         <div class="settings-left">
             <div class="setting">
-                <div class="setting-name">Name</div>
+                <div class="setting-name"><fmt:message key="partials.canvas.remote-process-group-ports.Name"/></div>
                 <div class="setting-field">
                     <span id="remote-process-group-ports-name"></span>
                 </div>
             </div>
             <div class="remote-port-header">
-                <div>Input ports</div>
+                <div><fmt:message key="partials.canvas.remote-process-group-ports.InputPorts"/></div>
             </div>
             <div id="remote-process-group-input-ports-container" class="remote-ports-container"></div>
         </div>
         <div class="spacer">&nbsp;</div>
         <div class="settings-right">
             <div class="setting">
-                <div class="setting-name">URLs</div>
+                <div class="setting-name"><fmt:message key="partials.canvas.remote-process-group-ports.URL"/></div>
                 <div class="setting-field">
                     <span id="remote-process-group-ports-urls"></span>
                 </div>
             </div>
             <div class="remote-port-header">
-                <div>Output ports</div>
+                <div><fmt:message key="partials.canvas.remote-process-group-ports.OutputPorts"/></div>
             </div>
             <div id="remote-process-group-output-ports-container" class="remote-ports-container"></div>
         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/reporting-task-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/reporting-task-configuration.jsp
index 2788c0f78757..90699343227f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/reporting-task-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/reporting-task-configuration.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="reporting-task-configuration" class="hidden large-dialog">
     <div class="reporting-task-configuration-tab-container dialog-content">
         <div id="reporting-task-configuration-tabs" class="tab-container"></div>
@@ -22,12 +23,12 @@
             <div id="reporting-task-standard-settings-tab-content" class="configuration-tab">
                 <div class="settings-left">
                     <div class="setting">
-                        <div class="setting-name">Name</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.reporting-task-configuration.Name"/></div>
                         <div class="reporting-task-editable setting-field">
                             <input type="text" id="reporting-task-name" name="reporting-task-name"/>
                             <div class="reporting-task-enabled-container">
                                 <div id="reporting-task-enabled" class="nf-checkbox checkbox-unchecked"></div>
-                                <span class="nf-checkbox-label"> Enabled</span>
+                                <span class="nf-checkbox-label"> <fmt:message key="partials.canvas.reporting-task-configuration.Enabled"/></span>
                             </div>
                         </div>
                         <div class="reporting-task-read-only setting-field hidden">
@@ -35,13 +36,13 @@
                         </div>
                     </div>
                     <div class="setting">
-                        <div class="setting-name">Id</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.reporting-task-configuration.Id"/></div>
                         <div class="setting-field">
                             <span id="reporting-task-id"></span>
                         </div>
                     </div>
                     <div class="setting">
-                        <div class="setting-name">Type</div>
+                        <div class="setting-name"><fmt:message key="partials.canvas.reporting-task-configuration.Type"/></div>
                         <div class="setting-field">
                             <span id="reporting-task-type"></span>
                         </div>
@@ -51,8 +52,9 @@
                 <div class="settings-right">
                     <div class="setting">
                         <div class="setting-name">
-                            Scheduling strategy
-                            <div class="fa fa-question-circle" alt="Info" title="The strategy used to schedule this reporting task."></div>
+                            <fmt:message key="partials.canvas.reporting-task-configuration.SchedulingStrategy"/>
+                    <fmt:message key="partials.canvas.reporting-task-configuration.SchedulingStrategy.title" var="SchedulingStrategy1"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${SchedulingStrategy1}"></div>
                         </div>
                         <div class="reporting-task-editable setting-field">
                             <div id="reporting-task-scheduling-strategy-combo"></div>
@@ -63,8 +65,9 @@
                     </div>
                     <div class="setting">
                         <div class="setting-name">
-                            Run schedule
-                            <div class="fa fa-question-circle" alt="Info" title="The amount of time that should elapse between task executions."></div>
+                            <fmt:message key="partials.canvas.reporting-task-configuration.RunSchedule"/>
+                    <fmt:message key="partials.canvas.reporting-task-configuration.RunSchedule.title" var="RunSchedule1"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${RunSchedule1}"></div>
                         </div>
                         <div class="reporting-task-editable setting-field">
                             <input type="text" id="reporting-task-timer-driven-scheduling-period" class="reporting-task-scheduling-period"/>
@@ -83,7 +86,7 @@
             <div id="reporting-task-comments-tab-content" class="configuration-tab">
                 <textarea cols="30" rows="4" id="reporting-task-comments" name="reporting-task-comments" class="reporting-task-editable setting-input"></textarea>
                 <div class="setting reporting-task-read-only hidden">
-                    <div class="setting-name">Comments</div>
+                    <div class="setting-name"><fmt:message key="partials.canvas.reporting-task-configuration.Comments"/></div>
                     <div class="setting-field">
                         <span id="read-only-reporting-task-comments"></span>
                     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/search-users-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/search-users-dialog.jsp
index 26fd7cd9e05c..913931481424 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/search-users-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/search-users-dialog.jsp
@@ -15,19 +15,21 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="search-users-dialog" class="hidden">
     <div class="dialog-content">
         <div class="secure-port-setting">
-            <input id="search-users-field" type="text" placeholder="User Identity"/>
+        <fmt:message key="partials.canvas.search-users-dialog.search-users-field" var="useridentity"/>
+            <input id="search-users-field" type="text" placeholder="${useridentity}"/>
         </div>
         <div class="secure-port-setting">
-            <div class="setting-name">Selected Users</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.search-users-dialog.SelectedUsers"/></div>
             <div class="setting-field allowed-container">
                 <ul id="allowed-users" class="allowed"></ul>
             </div>
         </div>
         <div class="secure-port-setting">
-            <div class="setting-name">Selected Groups</div>
+            <div class="setting-name"><fmt:message key="partials.canvas.search-users-dialog.SelectedGroups"/></div>
             <div class="setting-field allowed-container">
                 <ul id="allowed-groups" class="allowed"></ul>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/settings-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/settings-content.jsp
index 9bbb3aad9bbb..f46fe7bd0f63 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/settings-content.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/settings-content.jsp
@@ -15,21 +15,24 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="settings" class="hidden">
-    <div id="settings-header-text" class="settings-header-text">NiFi Settings</div>
+    <div id="settings-header-text" class="settings-header-text"><fmt:message key="partials.canvas.settings-content.settings-header-text"/></div>
     <div class="settings-container">
         <div>
             <div id="settings-tabs" class="settings-tabs tab-container"></div>
             <div class="clear"></div>
         </div>
         <div id="settings-tabs-content">
-            <button id="new-service-or-task" class="add-button fa fa-plus" title="Create a new controller service" style="display: block;"></button>
+        	<fmt:message key="partials.canvas.settings-content.new-service-or-task" var="servicetask"/>
+            <button id="new-service-or-task" class="add-button fa fa-plus" title="${servicetask}" style="display: block;"></button>
             <div id="general-settings-tab-content" class="configuration-tab">
                 <div id="general-settings">
                     <div class="setting">
                         <div class="setting-name">
-                            Maximum timer driven thread count
-                            <div class="fa fa-question-circle" alt="Info" title="The maximum number of threads for timer driven processors available to the system."></div>
+                            <fmt:message key="partials.canvas.settings-content.setting1"/>
+                            <fmt:message key="partials.canvas.settings-content.setting1-title" var="setting1"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${setting1}"></div>
                         </div>
                         <div class="editable setting-field">
                             <input type="text" id="maximum-timer-driven-thread-count-field" class="setting-input"/>
@@ -40,8 +43,9 @@
                     </div>
                     <div class="setting">
                         <div class="setting-name">
-                            Maximum event driven thread count
-                            <div class="fa fa-question-circle" alt="Info" title="The maximum number of threads for event driven processors available to the system."></div>
+                            <fmt:message key="partials.canvas.settings-content.setting2"/>
+                            <fmt:message key="partials.canvas.settings-content.setting2-title" var="setting2"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${setting2}"></div>
                         </div>
                         <div class="editable setting-field">
                             <input type="text" id="maximum-event-driven-thread-count-field" class="setting-input"/>
@@ -51,7 +55,7 @@
                         </div>
                     </div>
                     <div class="editable settings-buttons">
-                        <div id="settings-save" class="button">Apply</div>
+                        <div id="settings-save" class="button"><fmt:message key="partials.canvas.settings-content.Apply"/></div>
                         <div class="clear"></div>
                     </div>
                 </div>
@@ -65,12 +69,13 @@
         </div>
     </div>
     <div id="settings-refresh-container">
-        <button id="settings-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    	<fmt:message key="partials.canvas.settings-content.Refresh" var="refresh"/>
+        <button id="settings-refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
         <div id="settings-last-refreshed-container" class="last-refreshed-container">
-            Last updated:&nbsp;<span id="settings-last-refreshed" class="value-color"></span>
+            <fmt:message key="partials.canvas.settings-content.LastUpdated"/>:&nbsp;<span id="settings-last-refreshed" class="value-color"></span>
         </div>
         <div id="settings-loading-container" class="loading-container"></div>
-        <div id="controller-cs-availability" class="hidden">Listed services are available to all Reporting Tasks and services defined in the Controller Settings.</div>
+        <div id="controller-cs-availability" class="hidden"><fmt:message key="partials.canvas.settings-content.container"/></div>
         <div class="clear"></div>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp
index fe470ddb6e25..634f2838b14d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp
@@ -15,13 +15,16 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="shell-dialog" class="hidden cancellable">
     <div id="shell-container" class="dialog-content">
         <div id="shell-close-container">
-            <button id="shell-undock-button" class="undock-normal pointer " title="Open in New Window">
+        <fmt:message key="partials.canvas.shell.shell-undock-button" var="newwindow"/>
+            <button id="shell-undock-button" class="undock-normal pointer " title="${newwindow}">
                 <div class="fa fa-external-link-square"></div>
             </button>
-            <button id="shell-close-button" class="close-normal pointer" title="Close">
+            <fmt:message key="partials.canvas.shell.shell-close-button" var="closebutton"/>
+            <button id="shell-close-button" class="close-normal pointer" title="${closebutton}">
                 <div class="fa fa-times"></div>
             </button>
             <div class="clear"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/upload-template-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/upload-template-dialog.jsp
index f6cbbdb4d0be..ebe306bf5a57 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/upload-template-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/upload-template-dialog.jsp
@@ -15,13 +15,15 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="upload-template-dialog" class="hidden small-dialog">
     <div class="dialog-content">
         <div id="select-template-container">
             <div id="template-browse-container">
-                <span id="select-template-label">Select Template</span>
+                <span id="select-template-label"><fmt:message key="partials.cancas.upload-template-dialog.select-template-label"/></span>
                 <div id="select-template-button">
-                    <button class="fa fa-search" id="template-file-field-button" title="Browse"></button>
+                <fmt:message key="partials.cancas.upload-template-dialog.template-file-field" var="file-field"/>
+                    <button class="fa fa-search" id="template-file-field-button" title="${file-field}"></button>
                     <form id="template-upload-form" enctype="multipart/form-data" method="post">
                         <input type="file" name="template" id="template-file-field"/>
                     </form>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/cluster/cluster-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/cluster/cluster-content.jsp
index 2b68060cec70..2c09588c4109 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/cluster/cluster-content.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/cluster/cluster-content.jsp
@@ -15,18 +15,20 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="cluster">
     <div id="cluster-header-and-filter">
-        <div id="cluster-header-text">NiFi Cluster</div>
+        <div id="cluster-header-text"><fmt:message key="partials.cluster.cluster-content.NiFiCluster"/></div>
     </div>
     <div id="cluster-tabs" class="tab-container"></div>
     <div id="cluster-tabs-content">
         <div id="cluster-filter-controls" class="filter-controls">
             <div id="cluster-filter-stats" class="filter-status">
-                Displaying&nbsp;<span id="displayed-rows"></span>&nbsp;of&nbsp;<span id="total-rows"></span>
+                <fmt:message key="partials.cluster.cluster-content.Displaying"/>&nbsp;<span id="displayed-rows"></span>&nbsp;<fmt:message key="partials.cluster.cluster-content.Of"/>&nbsp;<span id="total-rows"></span>
             </div>
             <div id="cluster-filter-container" class="filter-container">
-                <input type="text" id="cluster-filter" class="filter" placeholder="Filter"/>
+            	<fmt:message key="partials.cluster.cluster-content.Filter" var="filter"/>
+                <input type="text" id="cluster-filter" class="filter" placeholder="${filter}"/>
                 <div id="cluster-filter-type" class="filter-type"></div>
             </div>
         </div>
@@ -51,9 +53,10 @@
     </div>
 </div>
 <div id="cluster-refresh-container">
-    <button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    <fmt:message key="partials.cluster.cluster-content.Refresh" var="refresh"/>
+    <button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
     <div id="cluster-last-refreshed-container" class="last-refreshed-container">
-        Last updated:&nbsp;<span id="cluster-last-refreshed"></span>
+        <fmt:message key="partials.cluster.cluster-content.LastUpdated"/>&nbsp;<span id="cluster-last-refreshed"></span>
     </div>
     <div id="cluster-loading-container" class="loading-container"></div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/cluster/node-details-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/cluster/node-details-dialog.jsp
index 655d390fe827..b80936fe345e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/cluster/node-details-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/cluster/node-details-dialog.jsp
@@ -15,24 +15,25 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="node-details-dialog" class="hidden medium-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">Address</div>
+            <div class="setting-name"><fmt:message key="partials.cluster.node-details-dialog.Address"/></div>
             <div class="setting-field">
                 <span id="node-address"></span>
             </div>
             <div class="clear"></div>
         </div>
         <div class="setting">
-            <div class="setting-name">Node Id</div>
+            <div class="setting-name"><fmt:message key="partials.cluster.node-details-dialog.NodeId"/></div>
             <div class="setting-field">
                 <span id="node-id"></span>
             </div>
             <div class="clear"></div>
         </div>
         <div class="setting">
-            <div class="setting-name">Node Events</div>
+            <div class="setting-name"><fmt:message key="partials.cluster.node-details-dialog.NodeEvents"/></div>
             <div class="setting-field">
                 <div id="node-events"></div>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp
index f7637a20314b..57b1f10fa054 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="connection-details">
     <div class="connection-details-tab-container dialog-content">
         <div id="connection-details-tabs" class="tab-container"></div>
@@ -28,15 +29,16 @@
                         </div>
                     </div>
                     <div class="setting">
-                        <div class="setting-name">Within group</div>
+                        <div class="setting-name"><fmt:message key="partials.connection-details.WithinGroup"/></div>
                         <div class="setting-field">
                             <div id="read-only-connection-source-group-name"></div>
                         </div>
                     </div>
                     <div id="read-only-relationship-names-container" class="setting">
                         <div class="setting-name">
-                            Relationships
-                            <div class="fa fa-question-circle" alt="Info" title="Selected relationships are in bold."></div>
+                            <fmt:message key="partials.connection-details.Relationships"/>
+                            <fmt:message key="partials.connection-details.configuration-tab.read-only-relationship-names-container.title" var="read-only-relationship-names-container_title"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${read-only-relationship-names-container_title}"></div>
                         </div>
                         <div class="setting-field">
                             <div id="read-only-relationship-names"></div>
@@ -52,7 +54,7 @@
                         </div>
                     </div>
                     <div class="setting">
-                        <div class="setting-name">Within group</div>
+                        <div class="setting-name"><fmt:message key="partials.connection-details.WithinGroup"/></div>
                         <div class="setting-field">
                             <div id="read-only-connection-target-group-name"></div>
                         </div>
@@ -62,21 +64,22 @@
             <div id="read-only-connection-settings-tab-content" class="configuration-tab">
                 <div class="settings-left">
                     <div class="setting">
-                        <div class="setting-name">Name</div>
+                        <div class="setting-name"><fmt:message key="partials.connection-details.Name"/></div>
                         <div class="setting-field">
                             <span id="read-only-connection-name"></span>
                         </div>
                     </div>
                     <div class="setting">
-                        <div class="setting-name">Id</div>
+                        <div class="setting-name"><fmt:message key="partials.connection-details.Id"/></div>
                         <div class="setting-field">
                             <span id="read-only-connection-id"></span>
                         </div>
                     </div>
                     <div class="setting">
                         <div class="setting-name">
-                            FlowFile expiration
-                            <div class="fa fa-question-circle" alt="Info" title="The maximum amount of time an object may be in the flow before it will be automatically aged out of the flow."></div>
+                            <fmt:message key="partials.connection-details.read-only-flow-file-expiration"/>
+                            <fmt:message key="partials.connection-details.read-only-flow-file-expiration.title" var="read-only-flow-file-expiration_title"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${read-only-flow-file-expiration_title}"></div>
                         </div>
                         <div class="setting-field">
                             <span id="read-only-flow-file-expiration"></span>
@@ -85,8 +88,9 @@
                     </div>
                     <div class="setting">
                         <div class="setting-name">
-                            Back pressure object threshold
-                            <div class="fa fa-question-circle" alt="Info" title="The maximum number of objects that can be queued before back pressure is applied."></div>
+                            <fmt:message key="partials.connection-details.read-only-back-pressure-object-threshold"/>
+                            <fmt:message key="partials.connection-details.read-only-back-pressure-object-threshold.title" var="read-only-back-pressure-object-threshold_title"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${read-only-back-pressure-object-threshold_title}"></div>
                         </div>
                         <div class="setting-field">
                             <span id="read-only-back-pressure-object-threshold"></span>
@@ -95,8 +99,9 @@
                     </div>
                     <div class="setting">
                         <div class="setting-name">
-                            Back pressure data size threshold
-                            <div class="fa fa-question-circle" alt="Info" title="The maximum data size of objects that can be queued before back pressure is applied."></div>
+                            <fmt:message key="partials.connection-details.read-only-back-pressure-data-size-threshold"/>
+                            <fmt:message key="partials.connection-details.read-only-back-pressure-data-size-threshold.title" var="read-only-back-pressure-data-size-threshold_title"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${read-only-back-pressure-data-size-threshold_title}"></div>
                         </div>
                         <div class="setting-field">
                             <span id="read-only-back-pressure-data-size-threshold"></span>
@@ -108,8 +113,9 @@
                 <div class="settings-right">
                     <div class="setting">
                         <div class="setting-name">
-                            Prioritizers
-                            <div class="fa fa-question-circle" alt="Info" title="Prioritizers that have been selected to reprioritize FlowFiles in this processors work queue."></div>
+                            <fmt:message key="partials.connection-details.read-only-prioritizers"/>
+                            <fmt:message key="partials.connection-details.read-only-prioritizers.title" var="read-only-prioritizers_title"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${read-only-prioritizers_title}"></div>
                         </div>
                         <div class="setting-field">
                             <div id="read-only-prioritizers"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/counters/counters-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/counters/counters-content.jsp
index 6399d0b52064..8f36ffe5c9e7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/counters/counters-content.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/counters/counters-content.jsp
@@ -15,15 +15,17 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="counters">
     <div id="counters-header-and-filter">
-        <div id="counters-header-text">NiFi Counters</div>
+        <div id="counters-header-text"><fmt:message key="partials.counters.counters-content.counters-header-text"/></div>
         <div id="counters-filter-controls">
             <div id="counters-filter-stats" class="filter-status">
-                Displaying&nbsp;<span id="displayed-counters"></span>&nbsp;of&nbsp;<span id="total-counters"></span>
+                <fmt:message key="partials.counters.counters-content.Displaying"/><span id="displayed-counters"></span><fmt:message key="partials.counters.counters-content.Of"/><span id="total-counters"></span>
             </div>
             <div id="counters-filter-container" class="filter-container">
-                <input type="text" id="counters-filter" placeholder="Filter" class="filter"/>
+            	<fmt:message key="partials.counters.counters-content.Filter" var="filter"/>
+                <input type="text" id="counters-filter" placeholder="${filter}" class="filter"/>
                 <div id="counters-filter-type" class="filter-type"></div>
             </div>
         </div>
@@ -31,9 +33,10 @@
     <div id="counters-table"></div>
 </div>
 <div id="counters-refresh-container">
-    <button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+	<fmt:message key="partials.counters.counters-content.Refresh" var="refresh"/>
+    <button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
     <div id="counters-last-refreshed-container" class="last-refreshed-container">
-        Last updated:&nbsp;<span id="counters-last-refreshed" class="value-color"></span>
+        <fmt:message key="partials.counters.counters-content.LastUpdated"/><span id="counters-last-refreshed" class="value-color"></span>
     </div>
     <div id="counters-loading-container" class="loading-container"></div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/action-details-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/action-details-dialog.jsp
index cc52f6bcefe0..059dbc4c4da0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/action-details-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/action-details-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="action-details-dialog" class="hidden small-dialog">
     <div class="dialog-content">
         <div class="setting">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/history-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/history-content.jsp
index 65257d2c3ccb..fe34320114cb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/history-content.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/history-content.jsp
@@ -15,28 +15,32 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="history">
-    <div id="history-header-text">NiFi History</div>
+    <div id="history-header-text"><fmt:message key="partials.history.history-content.history-header-text"/></div>
     <div id="history-filter-container">
         <div id="cluster-history-message" class="hidden">
-            Viewing history for the current node only. Browse to another node to view its history.
+            <fmt:message key="paritals.history.history-content.cluster-history-message"/>
         </div>
         <div style="float: right">
             <div id="history-filter-overview">
-                A filter has been applied.&nbsp;
-                <span id="clear-history-filter" class="link">Clear filter</span>
+                <fmt:message key="partials.history.history-content.history-filter-overview"/>&nbsp;
+                <span id="clear-history-filter" class="link"><fmt:message key="partials.history.history-content.clear-history-filter"/></span>
             </div>
-            <button id="history-filter-button" title="Filter History" class="fa fa-filter"></button>
-            <button id="history-purge-button" title="Purge History" class="fa fa-eraser hidden"></button>
+            <fmt:message key="paritals.history.history-content.history-filter-button.title" var="historyFilter"/>
+            <button id="history-filter-button" title="${historyFilter}" class="fa fa-filter"></button>
+            <fmt:message key="paritals.history.history-content.history-purge-button.title" var="historyPurge"/>
+            <button id="history-purge-button" title="${historyPurge}" class="fa fa-eraser hidden"></button>
         </div>
         <div class="clear"></div>
     </div>
     <div id="history-table"></div>
 </div>
 <div id="history-refresh-container">
-    <button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+	<fmt:message key="paritals.history.history-content.refresh-button.title" var="historyContentRefresh"/>
+    <button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="${historyContentRefresh}"></button>
     <div id="history-last-refreshed-container" class="last-refreshed-container">
-        Last updated:&nbsp;<span id="history-last-refreshed" class="value-color"></span>
+        <fmt:message key="paritals.history.history-content.history-last-refreshed-container"/>&nbsp;<span id="history-last-refreshed" class="value-color"></span>
     </div>
     <div id="history-loading-container" class="loading-container"></div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/history-filter-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/history-filter-dialog.jsp
index b1f2a9e6e2e7..0f51c9b55b17 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/history-filter-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/history-filter-dialog.jsp
@@ -15,10 +15,11 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="history-filter-dialog" class="hidden medium-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">Filter</div>
+            <div class="setting-name"><fmt:message key="partials.history.history-filter-dialog.Filter"/></div>
             <div class="setting-field">
                 <div id="history-filter-controls">
                     <input type="text" id="history-filter" class="history-large-input"/>
@@ -30,8 +31,9 @@
         <div class="setting">
             <div class="start-date-setting">
                 <div class="setting-name">
-                    Start date
-                    <div class="fa fa-question-circle" alt="Info" title="The start date in the format 'mm/dd/yyyy'. Must also specify start time."></div>
+                    <fmt:message key="partials.history.history-filter-dialog.StartDate"/>
+                    <fmt:message key="partials.history.history-filter-dialog.StartDate.title" var="history-filter-dialog_StartDate"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${history-filter-dialog_StartDate}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" id="history-filter-start-date" class="history-small-input"/>
@@ -39,8 +41,9 @@
             </div>
             <div class="start-time-setting">
                 <div class="setting-name">
-                    Start time (<span class="timezone"></span>)
-                    <div class="fa fa-question-circle" alt="Info" title="The start time in the format 'hh:mm:ss'. Must also specify start date."></div>
+                    <fmt:message key="partials.history.history-filter-dialog.StartTime"/> (<span class="timezone"></span>)
+                    <fmt:message key="partials.history.history-filter-dialog.StartTime.title" var="history-filter-dialog_StartTime"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${history-filter-dialog_StartTime}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" id="history-filter-start-time" class="history-small-input"/>
@@ -51,8 +54,9 @@
         <div class="setting">
             <div class="end-date-setting">
                 <div class="setting-name">
-                    End date
-                    <div class="fa fa-question-circle" alt="Info" title="The end date in the format 'mm/dd/yyyy'. Must also specify end time."></div>
+                    <fmt:message key="partials.history.history-filter-dialog.EndDate"/>
+                    <fmt:message key="partials.history.history-filter-dialog.EndDate.title" var="history-filter-dialog_EndDate"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${history-filter-dialog_EndDate}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" id="history-filter-end-date" class="history-small-input"/>
@@ -60,8 +64,9 @@
             </div>
             <div class="end-time-setting">
                 <div class="setting-name">
-                    End time (<span class="timezone"></span>)
-                    <div class="fa fa-question-circle" alt="Info" title="The end time in the format 'hh:mm:ss'. Must also specify end date."></div>
+                    <fmt:message key="partials.history.history-filter-dialog.EndTime"/> (<span class="timezone"></span>)
+                    <fmt:message key="partials.history.history-filter-dialog.EndTime.title" var="history-filter-dialog_EndTime"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${history-filter-dialog_EndTime}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" id="history-filter-end-time" class="history-small-input"/>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/history-purge-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/history-purge-dialog.jsp
index a80b7dda4017..9d6d27722bb0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/history-purge-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/history-purge-dialog.jsp
@@ -15,13 +15,15 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="history-purge-dialog" class="hidden medium-dialog">
     <div class="dialog-content">
         <div class="setting" style="margin-bottom: 0px;">
             <div class="end-date-setting">
                 <div class="setting-name">
-                    End date
-                    <div class="fa fa-question-circle" alt="Info" title="The purge end date in the format 'mm/dd/yyyy'. Must also specify end time."></div>
+                    <fmt:message key="partials.history.history-purge-dialog.EndDate"/>
+                    <fmt:message key="partials.history.history-purge-dialog.Title1" var="title1"/>
+                    <div class="fa fa-question-circle" alt="Info" title="${title1}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" id="history-purge-end-date" class="history-small-input"/>
@@ -29,8 +31,9 @@
             </div>
             <div class="end-time-setting">
                 <div class="setting-name">
-                    End time (<span class="timezone"></span>)
-                    <div class="fa fa-question-circle" id="purge-end-time-info" alt="Info" title="The end time in the format 'hh:mm:ss'. Must also specify end date."></div>
+                    <fmt:message key="partials.history.history-purge-dialog.EndTime"/> (<span class="timezone"></span>)
+                    <fmt:message key="partials.history.history-purge-dialog.Title2" var="title2"/>
+                    <div class="fa fa-question-circle" id="purge-end-time-info" alt="Info" title="${title2}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" id="history-purge-end-time" class="history-small-input"/>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-form.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-form.jsp
index 9f9a6605d4de..5c0098c649a9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-form.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-form.jsp
@@ -15,18 +15,21 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="login-container" class="hidden">
-    <div class="login-title">Log In</div>
+    <div class="login-title"><fmt:message key="paritals.login.login-form.login-title"/></div>
     <div class="setting">
-        <div class="setting-name">User</div>
+        <div class="setting-name"><fmt:message key="paritals.login.login-form.Username"/></div>
         <div class="setting-field">
-            <input type="text" placeholder="user" id="username"/>
+        	<fmt:message key="paritals.login.login-form.User" var="user"/>
+            <input type="text" placeholder="${user}" id="username"/>
         </div>
     </div>
     <div class="setting">
-        <div class="setting-name">Password</div>
+        <div class="setting-name"><fmt:message key="paritals.login.login-form.Password"/></div>
         <div class="setting-field">
-            <input type="password" placeholder="password" id="password"/>
+        	<fmt:message key="paritals.login.login-form.Password" var="password"/>
+            <input type="password" placeholder="${password}" id="password"/>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-message.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-message.jsp
index 053af818d96e..64d643082709 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-message.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-message.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="login-message-container" class="hidden">
     <div id="login-message-title"></div>
     <div id="login-message"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-progress.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-progress.jsp
index 6b08e54e6352..6f07ef84c7a2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-progress.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-progress.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="login-progress-container" class="login-container hidden">
     <div id="login-progress-spinner" class="loading-container"></div>
     <div id="login-progress-label"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-submission.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-submission.jsp
index 508ead3b0bfe..4165c7315ebb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-submission.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/login/login-submission.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="login-submission-container" class="login-container hidden">
-    <div id="login-submission-button" class="button">Log in</div>
+    <div id="login-submission-button" class="button"><fmt:message key="paritals.login.login-submission.login-submission-button"/></div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/message-pane.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/message-pane.jsp
index cdba1b5d34d7..c8e78ad29176 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/message-pane.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/message-pane.jsp
@@ -15,16 +15,17 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="message-pane" class="message-pane hidden">
     <div class="message-pane-message-box">
         <div id="message-title" class="message-pane-title"></div>
         <div id="user-links-container">
             <ul class="links">
                 <li id="user-logout-container" style="display: none;">
-                    <span id="user-logout" class="link">log out</span>
+                    <span id="user-logout" class="link"><fmt:message key="partials.message-pane.logout"/></span>
                 </li>
                 <li>
-                    <span id="user-home" class="link">home</span>
+                    <span id="user-home" class="link"><fmt:message key="partials.message-pane.userhome"/></span>
                 </li>
             </ul>
         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/ok-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/ok-dialog.jsp
index 92a3d4a024fe..73390c1ab820 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/ok-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/ok-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="nf-ok-dialog" class="hidden small-dialog">
     <div class="dialog-content">
         <div id="nf-ok-dialog-content"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/processor-details.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/processor-details.jsp
index 15d8cc3253a9..f188c75edbaf 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/processor-details.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/processor-details.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="processor-details" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="processor-details-tabs" class="tab-container"></div>
@@ -22,20 +23,20 @@
             <div id="details-standard-settings-tab-content" class="details-tab">
                 <div class="settings-left">
                     <div class="setting">
-                        <div class="setting-name">Name</div>
+                        <div class="setting-name"><fmt:message key="partials.processor-details.read-only-processor-name"/></div>
                         <div class="setting-field">
                             <span id="read-only-processor-name"></span>
                         </div>
                         <div class="clear"></div>
                     </div>
                     <div class="setting">
-                        <div class="setting-name">Id</div>
+                        <div class="setting-name"><fmt:message key="partials.processor-details.read-only-processor-id"/></div>
                         <div class="setting-field">
                             <span id="read-only-processor-id"></span>
                         </div>
                     </div>
                     <div class="setting">
-                        <div class="setting-name">Type</div>
+                        <div class="setting-name"><fmt:message key="partials.processor-details.read-only-processor-type"/></div>
                         <div class="setting-field">
                             <span id="read-only-processor-type"></span>
                         </div>
@@ -44,8 +45,9 @@
                     <div class="setting">
                         <div class="penalty-duration-setting">
                             <div class="setting-name">
-                                Penalty duration
-                                <div class="fa fa-question-circle" alt="Info" title="The amount of time used when this processor penalizes a FlowFile."></div>
+                                <fmt:message key="partials.processor-details.read-only-penalty-duration"/>
+                                <fmt:message key="partials.processor-details.read-only-penalty-duration.title" var="read-only-penalty-duration_title"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${read-only-penalty-duration_title}"></div>
                             </div>
                             <div class="setting-field">
                                 <span id="read-only-penalty-duration"></span>
@@ -53,8 +55,9 @@
                         </div>
                         <div class="yield-duration-setting">
                             <div class="setting-name">
-                                Yield duration
-                                <div class="fa fa-question-circle" alt="Info" title="When a processor yields, it will not be scheduled again until this amount of time elapses."></div>
+                                <fmt:message key="partials.processor-details.read-only-yield-duration"/>
+                                <fmt:message key="partials.processor-details.read-only-yield-duration.title" var="read-only-yield-duration_title"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${read-only-yield-duration_title}"></div>
                             </div>
                             <div class="setting-field">
                                 <span id="read-only-yield-duration"></span>
@@ -65,8 +68,9 @@
                     <div class="setting">
                         <div class="bulletin-setting">
                             <div class="setting-name">
-                                Bulletin level
-                                <div class="fa fa-question-circle" alt="Info" title="The level at which this processor will generate bulletins."></div>
+                                <fmt:message key="partials.processor-details.read-only-bulletin-level"/>
+                                <fmt:message key="partials.processor-details.read-only-bulletin-level.title" var="read-only-bulletin-level_title"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${read-only-bulletin-level_title}"></div>
                             </div>
                             <div class="setting-field">
                                 <span id="read-only-bulletin-level"></span>
@@ -79,8 +83,9 @@
                 <div class="settings-right">
                     <div class="setting">
                         <div class="setting-name">
-                            Automatically terminate relationships
-                            <div class="fa fa-question-circle" alt="Info" title="Will automatically terminate FlowFiles sent to all relationships in bold."></div>
+                            <fmt:message key="partials.processor-details.read-only-auto-terminate-relationship-names"/>
+                            <fmt:message key="partials.processor-details.read-only-auto-terminate-relationship-names.title" var="read-only-auto-terminate-relationship-names_title"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${read-only-auto-terminate-relationship-names_title}"></div>
                         </div>
                         <div class="setting-field">
                             <div id="read-only-auto-terminate-relationship-names"></div>
@@ -93,8 +98,9 @@
                     <div class="setting">
                         <div class="scheduling-strategy-setting">
                             <div class="setting-name">
-                                Scheduling strategy
-                                <div class="fa fa-question-circle" alt="Info" title="The strategy used to schedule this processor."></div>
+                                <fmt:message key="partials.processor-details.read-only-scheduling-strategy"/>
+                                <fmt:message key="partials.processor-details.read-only-scheduling-strategy.title" var="read-only-scheduling-strategy_title"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${read-only-scheduling-strategy_title}"></div>
                             </div>
                             <div class="setting-field">
                                 <span id="read-only-scheduling-strategy"></span>
@@ -105,8 +111,9 @@
                     <div class="setting">
                         <div class="concurrently-schedulable-tasks-setting">
                             <div class="setting-name">
-                                Concurrent tasks
-                                <div class="fa fa-question-circle" alt="Info" title="The number of tasks that should be concurrently scheduled for this processor."></div>
+                                <fmt:message key="partials.processor-details.read-only-concurrently-schedulable-tasks"/>
+                                <fmt:message key="partials.processor-details.read-only-concurrently-schedulable-tasks.title" var="read-only-concurrently-schedulable-tasks_title"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${read-only-concurrently-schedulable-tasks_title}"></div>
                             </div>
                             <div class="setting-field">
                                 <span id="read-only-concurrently-schedulable-tasks"></span>
@@ -114,8 +121,9 @@
                         </div>
                         <div id="read-only-run-schedule" class="scheduling-period-setting">
                             <div class="setting-name">
-                                Run schedule
-                                <div class="fa fa-question-circle" alt="Info" title="The minimum number of seconds that should elapse between task executions."></div>
+                                <fmt:message key="partials.processor-details.read-only-scheduling-period"/>
+                                <fmt:message key="partials.processor-details.read-only-scheduling-period.title" var="read-only-scheduling-period_title"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${read-only-scheduling-period_title}"></div>
                             </div>
                             <div class="setting-field">
                                 <span id="read-only-scheduling-period"></span>
@@ -126,8 +134,9 @@
                     <div id="read-only-execution-node-options" class="setting">
                         <div class="execution-node-setting">
                             <div class="setting-name">
-                                Execution
-                                <div class="fa fa-question-circle" alt="Info" title="The node(s) that this processor will be scheduled to run on."></div>
+                                <fmt:message key="partials.processor-details.read-only-execution-node-options"/>
+                                <fmt:message key="partials.processor-details.read-only-execution-node-options.title" var="read-only-execution-node-options_title"/>
+                                <div class="fa fa-question-circle" alt="Info" title="${read-only-execution-node-options_title}"></div>
                             </div>
                             <div class="setting-field">
                                 <span id="read-only-execution-node"></span>
@@ -140,8 +149,9 @@
                 <div class="settings-right">
                     <div class="setting">
                         <div class="setting-name">
-                            Run duration
-                            <div class="fa fa-question-circle" alt="Info" title="When scheduled to run, the processor will continue running for up to this duration. A run duration of 0ms will execute once when scheduled."></div>
+                            <fmt:message key="partials.processor-details.read-only-run-duration"/>
+                            <fmt:message key="partials.processor-details.read-only-run-duration.title" var="read-only-run-duration_title"/>
+                            <div class="fa fa-question-circle" alt="Info" title="${read-only-run-duration_title}"></div>
                         </div>
                         <div class="setting-field">
                             <span id="read-only-run-duration"></span>
@@ -154,7 +164,7 @@
             </div>
             <div id="details-processor-comments-tab-content" class="details-tab">
                 <div class="setting">
-                    <div class="setting-name">Comments</div>
+                    <div class="setting-name"><fmt:message key="partials.processor-details.read-only-processor-comments"/></div>
                     <div class="setting-field">
                         <div id="read-only-processor-comments"></div>
                     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/lineage-query-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/lineage-query-dialog.jsp
index 891d4b97071c..0a9fe47de016 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/lineage-query-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/lineage-query-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="lineage-query-dialog" class="hidden small-dialog">
     <div class="dialog-content">
         <div class="setting">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp
index d501f08f75bb..2de7e8769887 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp
@@ -16,37 +16,40 @@
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="provenance">
     <span id="initial-component-query" class="hidden"><c:out value="${param.componentId}"/></span>
     <span id="initial-flowfile-query" class="hidden"><c:out value="${param.flowFileUuid}"/></span>
     <span id="nifi-controller-uri" class="hidden"></span>
     <span id="nifi-content-viewer-url" class="hidden"></span>
-    <div id="provenance-header-text">NiFi Data Provenance</div>
+    <div id="provenance-header-text"><fmt:message key="partials.provenance.provenance-content.provenance-header-text"/></div>
     <div id="provenance-event-search" class="provenance-panel">
         <div id="provenance-filter-controls" class="filter-controls">
             <div id="provenance-filter-stats" class="filter-status">
-                Displaying&nbsp;<span id="displayed-events"></span>&nbsp;of&nbsp;<span id="total-events"></span>
+                <fmt:message key="partials.provenance.provenance-content.Displaying"/>&nbsp;<span id="displayed-events"></span>&nbsp;of&nbsp;<span id="total-events"></span>
             </div>
             <div id="oldest-event-message">
-                Oldest event available:&nbsp;<span id="oldest-event" class="value-color"></span>
+                <fmt:message key="partials.provenance.provenance-content.oldest-event-message"/>:&nbsp;<span id="oldest-event" class="value-color"></span>
             </div>
+            <fmt:message key="paritals.provenance.provenance-content.provenance-filter-container" var="filter"/>
             <div id="provenance-filter-container" class="filter-container">
-                <input type="text" placeholder="Filter" id="provenance-filter" class="filter"/>
+                <input type="text" placeholder="${filter}" id="provenance-filter" class="filter"/>
                 <div id="provenance-filter-type" class="filter-type"></div>
             </div>
         </div>
         <div id="provenance-search-container">
             <div id="provenance-search-overview">
                 <span id="provenance-query-message">&nbsp;</span>
-                <span id="clear-provenance-search" class="link">Clear search</span>
+                <span id="clear-provenance-search" class="link"><fmt:message key="partials.provenance.provenance-content.clear-provenance-search"/></span>
             </div>
             <button id="provenance-search-button" class="fa fa-search"></button>
         </div>
         <div id="provenance-table"></div>
         <div id="provenance-refresh-container">
-            <button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+        	<fmt:message key="paritals.provenance.provenance-content.refresh-button.title" var="refresh"/>
+            <button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
             <div id="provenance-last-refreshed-container" class="last-refreshed-container">
-                Last updated:&nbsp;<span id="provenance-last-refreshed" class="value-color"></span>
+                <fmt:message key="partials.provenance.provenance-content.LastUpdated"/>:&nbsp;<span id="provenance-last-refreshed" class="value-color"></span>
             </div>
             <div id="provenance-loading-container" class="loading-container"></div>
         </div>
@@ -56,8 +59,10 @@
             <div id="provenance-lineage-loading" class="loading-container"></div>
         </div>
         <div id="provenance-lineage-close-container">
-            <div id="provenance-lineage-downloader" class="fa fa-download" title="Download"></div>
-            <div id="provenance-lineage-closer" class="fa fa-long-arrow-left" title="Go back to event list"></div>
+        	<fmt:message key="paritals.provenance.provenance-content.provenance-lineage-downloader.title" var="downloader"/>
+            <div id="provenance-lineage-downloader" class="fa fa-download" title="${downloader}"></div>
+            <fmt:message key="paritals.provenance.provenance-content.provenance-lineage-closer.title" var="closer"/>
+            <div id="provenance-lineage-closer" class="fa fa-long-arrow-left" title="${closer}"></div>
         </div>
         <div id="provenance-lineage-context-menu" class="context-menu"></div>
         <div id="provenance-lineage-slider-container">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-event-details-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-event-details-dialog.jsp
index 73898fe9ad74..195e7897e507 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-event-details-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-event-details-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="event-details-dialog" class="hidden large-dialog">
     <div id="event-details-dialog-content"class="dialog-content">
         <div id="event-details-tabs" class="tab-container"></div>
@@ -25,53 +26,53 @@
                 <div class="settings-left">
                     <div id="event-details">
                         <div class="event-detail">
-                            <div class="detail-name">Time</div>
+                            <div class="detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.Time"/></div>
                             <div id="provenance-event-time" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="detail-name">Event Duration</div>
+                            <div class="detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.EventDuration"/></div>
                             <div id="provenance-event-duration" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="detail-name">Lineage Duration</div>
+                            <div class="detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.LineageDuration"/></div>
                             <div id="provenance-lineage-duration" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="detail-name">Type</div>
+                            <div class="detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.Type"/></div>
                             <div id="provenance-event-type" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="detail-name">FlowFile Uuid</div>
+                            <div class="detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.FlowFileUuid"/></div>
                             <div id="provenance-event-flowfile-uuid" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="detail-name">File Size</div>
+                            <div class="detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.FileSize"/></div>
                             <div id="provenance-event-file-size" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="detail-name">Component Id</div>
+                            <div class="detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.ComponentId"/></div>
                             <div id="provenance-event-component-id" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="detail-name">Component Name</div>
+                            <div class="detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.ComponentName"/></div>
                             <div id="provenance-event-component-name" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="detail-name">Component Type</div>
+                            <div class="detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.ComponentType"/></div>
                             <div id="provenance-event-component-type" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div id="additional-provenance-details"></div>
                         <div class="event-detail">
-                            <div class="detail-name">Details</div>
+                            <div class="detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.Details"/></div>
                             <div id="provenance-event-details" class="detail-value"></div>
                             <div class="clear"></div>
                         </div>
@@ -80,11 +81,11 @@
                 <div class="spacer">&nbsp;</div>
                 <div class="settings-right">
                     <div id="parent-flowfiles">
-                        <div class="event-header">Parent FlowFiles (<span id="parent-flowfile-count"></span>)</div>
+                        <div class="event-header"><fmt:message key="partials.provenance.provenance-event-details-dialog.ParentFlowFiles"/>(<span id="parent-flowfile-count"></span>)</div>
                         <div id="parent-flowfiles-container" class="flowfile-container"></div>
                     </div>
                     <div id="child-flowfiles">
-                        <div class="event-header">Child FlowFiles (<span id="child-flowfile-count"></span>)</div>
+                        <div class="event-header"><fmt:message key="partials.provenance.provenance-event-details-dialog.ChildFlowFiles"/>(<span id="child-flowfile-count"></span>)</div>
                         <div id="child-flowfiles-container"class="flowfile-container"></div>
                     </div>
                 </div>
@@ -92,10 +93,10 @@
             </div>
             <div id="attributes-tab-content" class="details-tab">
                 <div id="attributes-details">
-                    <div id="attributes-header" class="event-header">Attribute Values</div>
+                    <div id="attributes-header" class="event-header"><fmt:message key="partials.provenance.provenance-event-details-dialog.AttributeValues"/></div>
                     <div id="modified-attribute-toggle-container">
                         <div id="modified-attribute-toggle" class="nf-checkbox checkbox-unchecked"></div>
-                        <div id="modified-attribute-toggle-label" class="nf-checkbox-label">Show modified attributes only</div>
+                        <div id="modified-attribute-toggle-label" class="nf-checkbox-label"><fmt:message key="partials.provenance.provenance-event-details-dialog.OnlyShowModified"/></div>
                         <div class="clear"></div>
                     </div>
                     <div class="clear"></div>
@@ -105,36 +106,36 @@
             <div id="content-tab-content" class="details-tab">
                 <div class="settings-left">
                     <div id="input-content-details" class="content-details">
-                        <div id="input-content-header" class="event-header">Input Claim</div>
+                        <div id="input-content-header" class="event-header"><fmt:message key="partials.provenance.provenance-event-details-dialog.InputClaim"/></div>
                         <div class="event-detail">
-                            <div class="content-detail-name">Container</div>
+                            <div class="content-detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.Container"/></div>
                             <div id="input-content-container" class="content-detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="content-detail-name">Section</div>
+                            <div class="content-detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.Section"/></div>
                             <div id="input-content-section" class="content-detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="content-detail-name">Identifier</div>
+                            <div class="content-detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.Identifier"/></div>
                             <div id="input-content-identifier" class="content-detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="content-detail-name">Offset</div>
+                            <div class="content-detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.Offset"/></div>
                             <div id="input-content-offset" class="content-detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="content-detail-name">Size</div>
+                            <div class="content-detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.Size"/></div>
                             <div id="input-content-size" class="content-detail-value"></div>
                             <div id="input-content-bytes" class="content-detail-value hidden"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div id="input-content-download" class="secondary-button hidden fa fa-download button-icon"><span>Download</span></div>
-                            <div id="input-content-view" class="secondary-button fa fa-eye button-icon hidden"><span>View</span></div>
+                            <div id="input-content-download" class="secondary-button hidden fa fa-download button-icon"><span><fmt:message key="partials.provenance.provenance-event-details-dialog.Download"/></span></div>
+                            <div id="input-content-view" class="secondary-button fa fa-eye button-icon hidden"><span><fmt:message key="partials.provenance.provenance-event-details-dialog.View"/></span></div>
                             <div class="clear"></div>
                         </div>
                     </div>
@@ -142,51 +143,51 @@
                 <div class="spacer">&nbsp;</div>
                 <div class="settings-right">
                     <div id="output-content-details" class="content-details">
-                        <div class="event-header">Output Claim</div>
+                        <div class="event-header"><fmt:message key="partials.provenance.provenance-event-details-dialog.OutputClaim"/></div>
                         <div class="event-detail">
-                            <div class="content-detail-name">Container</div>
+                            <div class="content-detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.Container"/></div>
                             <div id="output-content-container" class="content-detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="content-detail-name">Section</div>
+                            <div class="content-detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.Section"/></div>
                             <div id="output-content-section" class="content-detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="content-detail-name">Identifier</div>
+                            <div class="content-detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.Identifier"/></div>
                             <div id="output-content-identifier" class="content-detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="content-detail-name">Offset</div>
+                            <div class="content-detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.Offset"/></div>
                             <div id="output-content-offset" class="content-detail-value"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div class="content-detail-name">Size</div>
+                            <div class="content-detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.Size"/></div>
                             <div id="output-content-size" class="content-detail-value"></div>
                             <div id="output-content-bytes" class="content-detail-value hidden"></div>
                             <div class="clear"></div>
                         </div>
                         <div class="event-detail">
-                            <div id="output-content-download" class="secondary-button fa fa-download button-icon hidden"><span>Download</span></div>
-                            <div id="output-content-view" class="secondary-button fa fa-eye button-icon hidden"><span>View</span></div>
+                            <div id="output-content-download" class="secondary-button fa fa-download button-icon hidden"><span><fmt:message key="partials.provenance.provenance-event-details-dialog.Download"/></span></div>
+                            <div id="output-content-view" class="secondary-button fa fa-eye button-icon hidden"><span><fmt:message key="partials.provenance.provenance-event-details-dialog.View"/></span></div>
                             <div class="clear"></div>
                         </div>
                     </div>
                 </div>
                 <div class="clear"></div>
                 <div id="replay-details" class="content-details hidden">
-                    <div class="event-header">Replay</div>
+                    <div class="event-header"><fmt:message key="partials.provenance.provenance-event-details-dialog.Replay"/></div>
                     <div id="replay-content-connection" class="event-detail">
-                        <div class="content-detail-name">Connection Id</div>
+                        <div class="content-detail-name"><fmt:message key="partials.provenance.provenance-event-details-dialog.ConnectionId"/></div>
                         <div id="replay-connection-id" class="content-detail-value"></div>
                         <div class="clear"></div>
                     </div>
                     <div id="replay-content-message" class="hidden"></div>
                     <div class="event-detail">
-                        <div id="replay-content" class="secondary-button fa fa-repeat button-icon"><span>Replay</span></div>
+                        <div id="replay-content" class="secondary-button fa fa-repeat button-icon"><span><fmt:message key="partials.provenance.provenance-event-details-dialog.Replay"/></div>
                         <div class="clear"></div>
                     </div>
                 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-query-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-query-dialog.jsp
index a99917786775..d86e571b8a07 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-query-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-query-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="provenance-query-dialog" class="hidden small-dialog">
     <div class="dialog-content">
         <div class="setting">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-search-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-search-dialog.jsp
index 565d016bdf56..c33fc61d5cb6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-search-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-search-dialog.jsp
@@ -15,21 +15,23 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="provenance-search-dialog" class="hidden medium-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">Fields</div>
+            <div class="setting-name"><fmt:message key="partials.provenance.provenance-search-dialog.Fields"/></div>
             <div class="setting-field">
                 <div id="searchable-fields-container">
-                    <div id="no-searchable-fields" class="unset">No searchable fields have been configured.</div>
+                    <div id="no-searchable-fields" class="unset"><fmt:message key="partials.provenance.provenance-search-dialog.no-searchable-fields"/>.</div>
                 </div>
             </div>
         </div>
         <div class="setting">
             <div class="start-date-setting">
                 <div class="setting-name">
-                    Start date
-                    <div class="fa fa-question-circle" title="The start date in the format 'mm/dd/yyyy'. Must also specify start time."></div>
+                    <fmt:message key="partials.provenance.provenance-search-dialog.StartDate"/>
+                    <fmt:message key="partials.provenance.provenance-search-dialog.StartDate.title" var="provenance-search-dialog_StartDate"/>
+                    <div class="fa fa-question-circle" title="${provenance-search-dialog_StartDate}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" id="provenance-search-start-date" class="provenance-small-input"/>
@@ -37,8 +39,9 @@
             </div>
             <div class="start-time-setting">
                 <div class="setting-name">
-                    Start time (<span class="timezone"></span>)
-                    <div class="fa fa-question-circle" title="The start time in the format 'hh:mm:ss'. Must also specify start date."></div>
+                    <fmt:message key="partials.provenance.provenance-search-dialog.StartTime"/>(<span class="timezone"></span>)
+                    <fmt:message key="partials.provenance.provenance-search-dialog.StartTime.title" var="provenance-search-dialog_StartTime"/>
+                    <div class="fa fa-question-circle" title="${provenance-search-dialog_StartTime}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" id="provenance-search-start-time" class="provenance-time-input"/>
@@ -49,8 +52,9 @@
         <div class="setting">
             <div class="end-date-setting">
                 <div class="setting-name">
-                    End date
-                    <div class="fa fa-question-circle" title="The end date in the format 'mm/dd/yyyy'. Must also specify end time."></div>
+                    <fmt:message key="partials.provenance.provenance-search-dialog.EndDate"/>
+                    <fmt:message key="partials.provenance.provenance-search-dialog.EndDate.title" var="provenance-search-dialog_EndDate"/>
+                    <div class="fa fa-question-circle" title="${provenance-search-dialog_EndDate}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" id="provenance-search-end-date" class="provenance-small-input"/>
@@ -58,8 +62,9 @@
             </div>
             <div class="end-time-setting">
                 <div class="setting-name">
-                    End time (<span class="timezone"></span>)
-                    <div class="fa fa-question-circle" title="The end time in the format 'hh:mm:ss'. Must also specify end date."></div>
+                    <fmt:message key="partials.provenance.provenance-search-dialog.EndTime"/>(<span class="timezone"></span>)
+                    <fmt:message key="partials.provenance.provenance-search-dialog.EndTime.title" var="provenance-search-dialog_EndTime"/>
+                    <div class="fa fa-question-circle" title="${provenance-search-dialog_EndTime}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" id="provenance-search-end-time" class="provenance-time-input"/>
@@ -70,8 +75,9 @@
         <div class="setting">
             <div class="end-date-setting">
                 <div class="setting-name">
-                    Minimum file size
-                    <div class="fa fa-question-circle" title="The minimum file size (e.g. 2 KB)."></div>
+                    <fmt:message key="partials.provenance.provenance-search-dialog.MinimumFileSize"/>
+                    <fmt:message key="partials.provenance.provenance-search-dialog.MinimumFileSize.title" var="provenance-search-dialog_MinimumFileSize"/>
+                    <div class="fa fa-question-circle" title="${provenance-search-dialog_MinimumFileSize}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" id="provenance-search-minimum-file-size" class="provenance-small-input"/>
@@ -79,8 +85,9 @@
             </div>
             <div class="end-time-setting">
                 <div class="setting-name">
-                    Maximum file size
-                    <div class="fa fa-question-circle" title="The maximum file size (e.g. 4 GB)."></div>
+                    <fmt:message key="partials.provenance.provenance-search-dialog.MaximumFileSize"/>
+                    <fmt:message key="partials.provenance.provenance-search-dialog.MaximumFileSize.title" var="provenance-search-dialog_MaximumFileSize"/>
+                    <div class="fa fa-question-circle" title="${provenance-search-dialog_MaximumFileSize}"></div>
                 </div>
                 <div class="setting-field">
                     <input type="text" id="provenance-search-maximum-file-size" class="provenance-time-input"/>
@@ -90,7 +97,7 @@
         </div>
         <div id="provenance-search-location-container" class="setting">
             <div class="setting-name">
-                Search location
+                <fmt:message key="partials.provenance.provenance-search-dialog.SearchLocation"/>
             </div>
             <div class="setting-field">
                 <div id="provenance-search-location"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/status-history-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/status-history-dialog.jsp
index 7daac42079fc..63bfe976755a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/status-history-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/status-history-dialog.jsp
@@ -15,11 +15,13 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="status-history-dialog" class="hidden large-dialog">
     <div id="status-history-refresh-container">
-        <button id="status-history-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    	<fmt:message key="partials.status-history-dialog.Refresh" var="refresh"/>
+        <button id="status-history-refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
         <div id="status-history-last-refreshed-container" class="last-refreshed-container">
-            Last updated:&nbsp;<span id="status-history-last-refreshed"></span>
+            <fmt:message key="partials.status-history-dialog.LastUpdated"/>:&nbsp;<span id="status-history-last-refreshed"></span>
         </div>
         <div id="status-history-loading-container" class="loading-container"></div>
     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-connection-summary-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-connection-summary-dialog.jsp
index 77a631f891b5..b6566b2cbea3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-connection-summary-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-connection-summary-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="cluster-connection-summary-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="cluster-connection-summary-header">
@@ -30,9 +31,10 @@
         </div>
         <div id="cluster-connection-summary-table"></div>
     </div>
-    <button id="cluster-connection-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    <fmt:message key="partials.summary.cluster-connection-summary-dialog.Refresh" var="refresh"/>
+    <button id="cluster-connection-refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
     <div id="cluster-connection-summary-last-refreshed-container" class="last-refreshed-container">
-        Last updated:&nbsp;<span id="cluster-connection-summary-last-refreshed" class="value-color"></span>
+        <fmt:message key="partials.summary.cluster-connection-summary-dialog.LastUpdated"/>&nbsp;<span id="cluster-connection-summary-last-refreshed" class="value-color"></span>
     </div>
     <div id="cluster-connection-summary-loading-container" class="loading-container"></div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-input-port-summary-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-input-port-summary-dialog.jsp
index 854e21129501..7960164312f9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-input-port-summary-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-input-port-summary-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="cluster-input-port-summary-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="cluster-input-port-summary-header">
@@ -30,9 +31,10 @@
         </div>
         <div id="cluster-input-port-summary-table"></div>
     </div>
-    <button id="cluster-input-port-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    <fmt:message key="partials.summary.cluster-input-port-summary-dialog.Refresh" var="refresh"/>
+    <button id="cluster-input-port-refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
     <div id="cluster-input-port-summary-last-refreshed-container" class="last-refreshed-container">
-        Last updated:&nbsp;<span id="cluster-input-port-summary-last-refreshed" class="value-color"></span>
+        <fmt:message key="partials.summary.cluster-input-port-summary-dialog.LastUpdated"/>&nbsp;<span id="cluster-input-port-summary-last-refreshed" class="value-color"></span>
     </div>
     <div id="cluster-input-port-summary-loading-container" class="loading-container"></div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-output-port-summary-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-output-port-summary-dialog.jsp
index c16c53bc96f0..30f896573815 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-output-port-summary-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-output-port-summary-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="cluster-output-port-summary-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="cluster-output-port-summary-header">
@@ -30,9 +31,10 @@
         </div>
         <div id="cluster-output-port-summary-table"></div>
     </div>
-    <button id="cluster-output-port-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    <fmt:message key="partials.summary.cluster-output-port-summary-dialog.Refresh" var="refresh"/>
+    <button id="cluster-output-port-refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
     <div id="cluster-output-port-summary-last-refreshed-container" class="last-refreshed-container">
-        Last updated:&nbsp;<span id="cluster-output-port-summary-last-refreshed" class="value-color"></span>
+        <fmt:message key="partials.summary.cluster-output-port-summary-dialog.LastUpdated"/>&nbsp;<span id="cluster-output-port-summary-last-refreshed" class="value-color"></span>
     </div>
     <div id="cluster-output-port-summary-loading-container" class="loading-container"></div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-process-group-summary-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-process-group-summary-dialog.jsp
index f1dbf89dffa2..7c939be2ccb0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-process-group-summary-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-process-group-summary-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="cluster-process-group-summary-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="cluster-process-group-summary-header">
@@ -29,9 +30,10 @@
         </div>
         <div id="cluster-process-group-summary-table"></div>
     </div>
-    <button id="cluster-process-group-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    <fmt:message key="partials.summary.cluster-process-group-summary-dialog.Refresh" var="refresh"/>
+    <button id="cluster-process-group-refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
     <div id="cluster-process-group-summary-last-refreshed-container" class="last-refreshed-container">
-        Last updated:&nbsp;<span id="cluster-process-group-summary-last-refreshed" class="value-color"></span>
+        <fmt:message key="partials.summary.cluster-process-group-summary-dialog.LastUpdated"/>&nbsp;<span id="cluster-process-group-summary-last-refreshed" class="value-color"></span>
     </div>
     <div id="cluster-process-group-summary-loading-container" class="loading-container"></div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-processor-summary-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-processor-summary-dialog.jsp
index 1c1132321bcb..b66f6c0aba07 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-processor-summary-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-processor-summary-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="cluster-processor-summary-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="cluster-processor-summary-header">
@@ -30,9 +31,10 @@
         </div>
         <div id="cluster-processor-summary-table"></div>
     </div>
-    <button id="cluster-processor-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    <fmt:message key="partials.summary.cluster-processor-summary-dialog.Refresh" var="refresh"/>
+    <button id="cluster-processor-refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
     <div id="cluster-processor-summary-last-refreshed-container" class="last-refreshed-container">
-        Last updated:&nbsp;<span id="cluster-processor-summary-last-refreshed" class="value-color"></span>
+        <fmt:message key="partials.summary.cluster-processor-summary-dialog.LastUpdated"/>&nbsp;<span id="cluster-processor-summary-last-refreshed" class="value-color"></span>
     </div>
     <div id="cluster-processor-summary-loading-container" class="loading-container"></div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-remote-process-group-summary-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-remote-process-group-summary-dialog.jsp
index 540cd4237c53..5edb170dc310 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-remote-process-group-summary-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-remote-process-group-summary-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="cluster-remote-process-group-summary-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="cluster-remote-process-group-summary-header">
@@ -30,9 +31,10 @@
         </div>
         <div id="cluster-remote-process-group-summary-table"></div>
     </div>
-    <button id="cluster-remote-process-group-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    <fmt:message key="partials.summary.cluster-remote-process-group-summary-dialog.Refresh" var="refresh"/>
+    <button id="cluster-remote-process-group-refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
     <div id="cluster-remote-process-group-summary-last-refreshed-container" class="last-refreshed-container">
-        Last updated:&nbsp;<span id="cluster-remote-process-group-summary-last-refreshed" class="value-color"></span>
+        <fmt:message key="partials.summary.cluster-remote-process-group-summary-dialog.LastUpdated"/>&nbsp;<span id="cluster-remote-process-group-summary-last-refreshed" class="value-color"></span>
     </div>
     <div id="cluster-remote-process-group-summary-loading-container" class="loading-container"></div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/summary-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/summary-content.jsp
index f8195b53963d..9b9c385f999e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/summary-content.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/summary-content.jsp
@@ -15,24 +15,26 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="summary">
     <div id="summary-header-and-filter">
-        <div id="summary-header-text">NiFi Summary</div>
+        <div id="summary-header-text"><fmt:message key="partials.summary.summary-content.summary-header-text"/></div>
     </div>
     <div id="summary-tabs" class="tab-container"></div>
     <div id="summary-tabs-content">
         <div id="summary-filter-controls" class="filter-controls">
             <div id="summary-filter-status" class="filter-status">
-                Displaying&nbsp;<span id="displayed-items"></span>&nbsp;of&nbsp;<span id="total-items"></span>
+                <fmt:message key="partials.summary.summary-content.Displaying"/>&nbsp;<span id="displayed-items"></span>&nbsp;<fmt:message key="partials.summary.summary-content.Of"/>&nbsp;<span id="total-items"></span>
             </div>
+            <fmt:message key="partials.summary.summary-content.summary-filter-container" var="filter"/>
             <div id="summary-filter-container" class="filter-container">
-                <input type="text" placeholder="Filter" id="summary-filter" class="filter"/>
+                <input type="text" placeholder="${filter}" id="summary-filter" class="filter"/>
                 <div id="summary-filter-type" class="filter-type"></div>
             </div>
         </div>
         <div id="view-options-container">
-            View:&nbsp;
-            <span id="view-single-node-link" class="link">Single node</span>&nbsp;&nbsp;<span id="view-cluster-link" class="link">Cluster</span>
+            <fmt:message key="partials.summary.summary-content.View"/>&nbsp;
+            <span id="view-single-node-link" class="link"><fmt:message key="partials.summary.summary-content.SingleNode"/></span>&nbsp;&nbsp;<span id="view-cluster-link" class="link"><fmt:message key="partials.summary.summary-content.Cluster"/></span>
         </div>
         <div id="processor-summary-tab-content" class="configuration-tab">
             <div id="processor-summary-table" class="summary-table"></div>
@@ -55,12 +57,13 @@
     </div>
 </div>
 <div id="flow-summary-refresh-container">
-    <button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+	<fmt:message key="partials.summary.summary-content.Refresh" var="refresh"/>
+    <button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
     <div id="summary-last-refreshed-container" class="last-refreshed-container">
-        Last updated:&nbsp;<span id="summary-last-refreshed" class="value-color"></span>
+        <fmt:message key="partials.summary.summary-content.LastUpdated"/>&nbsp;<span id="summary-last-refreshed" class="value-color"></span>
     </div>
     <div id="summary-loading-container" class="loading-container"></div>
     <div id="system-diagnostics-link-container">
-        <span id="system-diagnostics-link" class="link">system diagnostics</span>
+        <span id="system-diagnostics-link" class="link"><fmt:message key="partials.summary.summary-content.SystemDiagnostics"/></span>
     </div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/system-diagnostics-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/system-diagnostics-dialog.jsp
index 15d53107461a..7bfb3d3fb477 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/system-diagnostics-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/system-diagnostics-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="system-diagnostics-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="system-diagnostics-tabs" class="tab-container"></div>
@@ -23,12 +24,12 @@
                 <div class="settings-left">
                     <div class="setting">
                         <input type="hidden" id=""/>
-                        <div class="setting-header">Heap <span id="utilization-heap"></span></div>
+                        <div class="setting-header"><fmt:message key="partials.summary.system-diagnostics-dialog.Heap"/> <span id="utilization-heap"></span></div>
                         <div class="setting-field">
                             <table id="heap-table">
                                 <tbody>
                                 <tr>
-                                    <td class="memory-header setting-name">Max:</td>
+                                    <td class="memory-header setting-name"><fmt:message key="partials.summary.system-diagnostics-dialog.Max"/>:</td>
                                 </tr>
                                 <tr>
                                     <td><span id="max-heap"></span></td>
@@ -37,7 +38,7 @@
                                     <td></td>
                                 </tr>
                                 <tr>
-                                    <td class="setting-name">Total:</td>
+                                    <td class="setting-name"><fmt:message key="partials.summary.system-diagnostics-dialog.Total"/>:</td>
                                 </tr>
                                 <tr>
                                     <td><span id="total-heap"></span></td>
@@ -46,7 +47,7 @@
                                     <td></td>
                                 </tr>
                                 <tr>
-                                    <td class="setting-name">Used:</td>
+                                    <td class="setting-name"><fmt:message key="partials.summary.system-diagnostics-dialog.Used"/>:</td>
                                 </tr>
                                 <tr>
                                     <td><span id="used-heap"></span></td>
@@ -55,7 +56,7 @@
                                     <td></td>
                                 </tr>
                                 <tr>
-                                    <td class="setting-name">Free:</td>
+                                    <td class="setting-name"><fmt:message key="partials.summary.system-diagnostics-dialog.Free"/>:</td>
                                 </tr>
                                 <tr>
                                     <td><span id="free-heap"></span></td>
@@ -72,12 +73,12 @@
                 <div class="spacer"></div>
                 <div class="settings-right">
                     <div class="setting">
-                        <div class="setting-header">Non-heap <span id="utilization-non-heap"></span></div>
+                        <div class="setting-header"><fmt:message key="partials.summary.system-diagnostics-dialog.NonHeap"/> <span id="utilization-non-heap"></span></div>
                         <div class="setting-field">
                             <table id="heap-table">
                                 <tbody>
                                 <tr>
-                                    <td class="memory-header setting-name">Max:</td>
+                                    <td class="memory-header setting-name"><fmt:message key="partials.summary.system-diagnostics-dialog.Max"/>:</td>
                                 </tr>
                                 <tr>
                                     <td><span id="max-non-heap"></span></td>
@@ -86,7 +87,7 @@
                                     <td></td>
                                 </tr>
                                 <tr>
-                                    <td class="setting-name">Total:</td>
+                                    <td class="setting-name"><fmt:message key="partials.summary.system-diagnostics-dialog.Total"/>:</td>
                                 </tr>
                                 <tr>
                                     <td><span id="total-non-heap"></span></td>
@@ -95,7 +96,7 @@
                                     <td></td>
                                 </tr>
                                 <tr>
-                                    <td class="setting-name">Used:</td>
+                                    <td class="setting-name"><fmt:message key="partials.summary.system-diagnostics-dialog.Used"/>:</td>
                                 </tr>
                                 <tr>
                                     <td><span id="used-non-heap"></span></td>
@@ -104,7 +105,7 @@
                                     <td></td>
                                 </tr>
                                 <tr>
-                                    <td class="setting-name">Free:</td>
+                                    <td class="setting-name"><fmt:message key="partials.summary.system-diagnostics-dialog.Free"/>:</td>
                                 </tr>
                                 <tr>
                                     <td><span id="free-non-heap"></span></td>
@@ -120,7 +121,7 @@
                 </div>
                 <div class="clear"></div>
                 <div class="setting">
-                    <div class="setting-header">Garbage Collection</div>
+                    <div class="setting-header"><fmt:message key="partials.summary.system-diagnostics-dialog.GarbageCollection"/></div>
                     <div id="garbage-collection-container" class="setting-field">
                         <table id="garbage-collection-table">
                             <tbody></tbody>
@@ -128,12 +129,12 @@
                     </div>
                 </div>
                 <div class="setting">
-                    <div class="setting-header">Runtime</div>
+                    <div class="setting-header"><fmt:message key="partials.summary.system-diagnostics-dialog.Runtime"/></div>
                     <div id="jvm-runtime-container" class="setting-field">
                         <table id="jvm-runtime-table">
                             <tbody>
                                 <tr>
-                                    <td class="setting-name">Uptime:</td>
+                                    <td class="setting-name"><fmt:message key="partials.summary.system-diagnostics-dialog.Uptime"/>:</td>
                                 </tr>
                                 <tr>
                                     <td><span id="uptime"></span></td>
@@ -149,7 +150,7 @@
             <div id="system-tab-content"class="configuration-tab">
             <div class="settings-left">
                 <div class="setting">
-                    <div class="setting-name">Available Processors:</div>
+                    <div class="setting-name"><fmt:message key="partials.summary.system-diagnostics-dialog.AvailableProcessors"/>:</div>
                     <div class="setting-field">
                         <div id="available-processors"></div>
                     </div>
@@ -159,8 +160,9 @@
             <div class="settings-right">
                 <div class="setting">
                     <div class="setting-name">
-                        Processor Load Average:
-                        <div class="fa fa-question-circle" alt="Info" title="Processor load average for the last minute. Not available on all platforms."></div>
+                        <fmt:message key="partials.summary.system-diagnostics-dialog.ProcessorLoadAverage"/>:
+                        <fmt:message key="partials.summary.system-diagnostics-dialog.ProcessorLoadAverage.title" var="system-diagnostics-dialog_ProcessorLoadAverage"/>
+                        <div class="fa fa-question-circle" alt="Info" title="${system-diagnostics-dialog_ProcessorLoadAverage}"></div>
                     </div>
                     <div class="setting-field">
                         <div id="processor-load-average"></div>
@@ -169,13 +171,13 @@
             </div>
             <div class="clear"></div>
             <div class="setting">
-                <div class="setting-header">FlowFile Repository Storage</div>
+                <div class="setting-header"><fmt:message key="partials.summary.system-diagnostics-dialog.FlowFileRepositoryStorageUsage"/></div>
                 <div class="setting-field">
                     <div id="flow-file-repository-storage-usage-container"></div>
                 </div>
             </div>
             <div class="setting">
-                <div class="setting-header">Content Repository Storage</div>
+                <div class="setting-header"><fmt:message key="partials.summary.system-diagnostics-dialog.ContentRepositoryStorageUsage"/></div>
                 <div class="setting-field">
                     <div id="content-repository-storage-usage-container"></div>
                 </div>
@@ -184,35 +186,36 @@
 
         <div id="version-tab-content" class="configuration-tab">
             <div class="setting">
-                <div class="setting-header">NiFi</div>
+                <div class="setting-header"><fmt:message key="partials.summary.version-tab-content.nifi"/></div>
                 <dl class="setting-attributes-list">
-                    <dt>NiFi Version</dt><dd><span id="version-nifi"></span></dd>
-                    <dt>Tag</dt><dd><span id="version-build-tag"></span></dd>
-                    <dt>Build Date/Time</dt><dd><span id="version-build-timestamp"></span></dd>
-                    <dt>Branch</dt><dd><span id="version-build-branch"></span></dd>
-                    <dt>Revision</dt><dd><span id="version-build-revision"></span></dd>
+                    <dt><fmt:message key="partials.summary.version-tab-content.nifiVersion"/></dt><dd><span id="version-nifi"></span></dd>
+                    <dt><fmt:message key="partials.summary.version-tab-content.tag"/></dt><dd><span id="version-build-tag"></span></dd>
+                    <dt><fmt:message key="partials.summary.version-tab-content.buildDate"/></dt><dd><span id="version-build-timestamp"></span></dd>
+                    <dt><fmt:message key="partials.summary.version-tab-content.branch"/></dt><dd><span id="version-build-branch"></span></dd>
+                    <dt><fmt:message key="partials.summary.version-tab-content.revision"/></dt><dd><span id="version-build-revision"></span></dd>
                 </dl>
             </div>
             <div class="setting">
                 <div class="setting-header">Java</div>
                 <dl class="setting-attributes-list">
-                    <dt>Version</dt><dd><span id="version-java-version"></span></dd>
-                    <dt>Vendor</dt><dd><span id="version-java-vendor"></span></dd>
+                    <dt><fmt:message key="partials.summary.version-tab-content.Version"/></dt><dd><span id="version-java-version"></span></dd>
+                    <dt><fmt:message key="partials.summary.version-tab-content.Vendor"/></dt><dd><span id="version-java-vendor"></span></dd>
                 </dl>
             </div>
             <div class="setting">
-                <div class="setting-header">Operating System</div>
+                <div class="setting-header"><fmt:message key="partials.summary.version-tab-content.Operating"/></div>
                 <dl class="setting-attributes-list">
-                    <dt>Name</dt><dd><span id="version-os-name"></span></dd>
-                    <dt>Version</dt><dd><span id="version-os-version"></span></dd>
-                    <dt>Architecture</dt><dd><span id="version-os-arch"></span></dd>
+                    <dt><fmt:message key="partials.summary.version-tab-content.Name"/></dt><dd><span id="version-os-name"></span></dd>
+                    <dt><fmt:message key="partials.summary.version-tab-content.Version"/></dt><dd><span id="version-os-version"></span></dd>
+                    <dt><fmt:message key="partials.summary.version-tab-content.Architecture"/></dt><dd><span id="version-os-arch"></span></dd>
                 </dl>
             </div>
         </div>
 
         </div>
         <div id="system-diagnostics-refresh-container">
-            <button id="system-diagnostics-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+        <fmt:message key="partials.summary.system-diagnostics-refresh-container.refresh" var="refresh"/>
+            <button id="system-diagnostics-refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
             <div id="system-diagnostics-last-refreshed-container" class="last-refreshed-container">
                 <span id="system-diagnostics-last-refreshed" class="value-color"></span>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/view-single-node-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/view-single-node-dialog.jsp
index baee3c89c9e5..bb76e3098ac6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/view-single-node-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/view-single-node-dialog.jsp
@@ -15,10 +15,11 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="view-single-node-dialog" class="hidden small-dialog">
     <div class="dialog-content">
         <input id="cluster-search-field" type="text"/>
-        <div id="cluster-search-example">(e.g.&nbsp;my.host:80)</div>
+        <div id="cluster-search-example">(<fmt:message key="partials.summary.view-single-node-dialog.cluster-search-example"/>&nbsp;my.host:80)</div>
     </div>
 </div>
 <div id="search-cluster-results"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/templates/templates-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/templates/templates-content.jsp
index d55ecdb809bf..d637f5da9fc3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/templates/templates-content.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/templates/templates-content.jsp
@@ -15,17 +15,19 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <div id="templates">
     <span id="template-group-id" class="hidden"><c:out value="${param.groupId}"/></span>
     <div id="templates-header-and-filter">
-        <div id="templates-header-text">NiFi Templates</div>
+        <div id="templates-header-text"><div><fmt:message key="partials.templates.templates-content.templates-header-text"/></div></div>
         <div id="templates-filter-controls">
             <div id="templates-filter-stats" class="filter-status">
-                Displaying&nbsp;<span id="displayed-templates"></span>&nbsp;of&nbsp;<span id="total-templates"></span>
+                <fmt:message key="partials.templates.templates-content.Displaying"/>&nbsp;<span id="displayed-templates"></span>&nbsp;<fmt:message key="partials.templates.templates-content.Of"/>&nbsp;<span id="total-templates"></span>
             </div>
             <div id="templates-filter-container" class="filter-container">
-                <input type="text" id="templates-filter" class="filter" placeholder="Filter"/>
+            <fmt:message key="partials.templates.templates-content.templates-filter-container" var="filter"/>
+                <input type="text" id="templates-filter" class="filter" placeholder="${filter}"/>
                 <div id="templates-filter-type" class="filter-type"></div>
             </div>
         </div>
@@ -33,9 +35,10 @@
     <div id="templates-table"></div>
 </div>
 <div id="templates-refresh-container">
-    <button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+	<fmt:message key="partials.templates.templates-content.Refresh" var="refresh"/>
+    <button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
     <div id="templates-last-refreshed-container" class="last-refreshed-container">
-        Last updated:&nbsp;<span id="templates-last-refreshed" class="value-color"></span>
+        <fmt:message key="partials.templates.templates-content.LastUpdated"/>:&nbsp;<span id="templates-last-refreshed" class="value-color"></span>
     </div>
     <div id="templates-loading-container" class="loading-container"></div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/user-delete-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/user-delete-dialog.jsp
index 9fcabb15971d..9f0cf69f95a0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/user-delete-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/user-delete-dialog.jsp
@@ -13,9 +13,10 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="user-delete-dialog" class="hidden">
     <div class="dialog-content">
         <input type="hidden" id="user-id-delete-dialog"/>
-        Are you sure you want to delete the account for '<span id="user-identity-delete-dialog"></span>'?
+        <fmt:message key="partials.users.user-delete-dialog.user-id-delete-dialog"/> '<span id="user-identity-delete-dialog"></span>'?
     </div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/user-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/user-dialog.jsp
index 1d206b4b46f1..f52ed026c3bb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/user-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/user-dialog.jsp
@@ -13,17 +13,18 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="user-dialog" class="hidden">
     <div class="dialog-content">
         <div class="setting">
             <div class="setting-field">
-                <input id="individual-radio-button" type="radio" name="userOrGroup" value="individual" checked="checked"/> Individual
-                <input id="group-radio-button" type="radio" name="userOrGroup" value="group" style="margin-left: 20px;"/> Group
+                <input id="individual-radio-button" type="radio" name="userOrGroup" value="individual" checked="checked"/> <fmt:message key="partials.users.user-dialog.Individual"/>
+                <input id="group-radio-button" type="radio" name="userOrGroup" value="group" style="margin-left: 20px;"/> <fmt:message key="partials.users.user-dialog.Group"/>
             </div>
             <div class="clear"></div>
         </div>
         <div class="setting">
-            <div class="setting-name">Identity</div>
+            <div class="setting-name"><fmt:message key="partials.users.user-dialog.Identity"/></div>
             <div class="setting-field">
                 <span id="user-id-edit-dialog" class="hidden"></span>
                 <input type="text" id="user-identity-edit-dialog"/>
@@ -31,14 +32,14 @@
             <div class="clear"></div>
         </div>
         <div id="user-groups" class="setting">
-            <div class="setting-name">Member of</div>
+            <div class="setting-name"><fmt:message key="partials.users.user-dialog.user-groups"/></div>
             <div class="setting-field">
                 <ul id="available-groups" class="usersGroupsList"></ul>
             </div>
             <div class="clear"></div>
         </div>
         <div id="group-members" class="setting hidden">
-            <div class="setting-name">Members</div>
+            <div class="setting-name"><fmt:message key="partials.users.user-dialog.group-members"/></div>
             <div class="setting-field">
                 <ul id="available-users" class="usersGroupsList"></ul>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/user-policies-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/user-policies-dialog.jsp
index b38a101ba58b..51fb13080424 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/user-policies-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/user-policies-dialog.jsp
@@ -13,16 +13,18 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="user-policies-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">User</div>
+            <div class="setting-name"><fmt:message key="partials.users.user-policies-dialog.User"/></div>
             <div class="setting-field">
                 <div id="policies-dialog-user-name"></div>
             </div>
         </div>
-        <div id="user-policy-message" title="Some policies may be inherited by descendant components unless explicitly overridden.">
-            Some policies may be inherited by descendant components unless explicitly overridden.
+        <fmt:message key="partials.users.user-policies-dialog.user-policy-message" var="userPolicyMessage"/>
+        <div id="user-policy-message" title="${userPolicyMessage}">
+            <fmt:message key="partials.users.user-policies-dialog.user-policy-message"/>
         </div>
         <div id="user-policies-table"></div>
     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/users-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/users-content.jsp
index 00ab7b85d04b..5f72d5bef247 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/users-content.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/users/users-content.jsp
@@ -15,16 +15,18 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="users">
     <div id="users-header-and-filter">
-        <div id="users-header-text">NiFi Users</div>
+        <div id="users-header-text"><fmt:message key="partials.users.users-content.users-header-text"/></div>
     </div>
     <div id="users-filter-controls">
         <div id="users-filter-status" class="filter-status">
-            Displaying&nbsp;<span id="displayed-users"></span>&nbsp;of&nbsp;<span id="total-users"></span>
+            <fmt:message key="partials.users.users-content.Displaying"/>&nbsp;<span id="displayed-users"></span>&nbsp;<fmt:message key="partials.users.users-content.Of"/>&nbsp;<span id="total-users"></span>
         </div>
         <div id="users-filter-container">
-            <input type="text" placeholder="Filter" id="users-filter" class="filter"/>
+        <fmt:message key="partials.users.users-content.users-filter-container" var="filter"/>
+            <input type="text" placeholder="${filter}" id="users-filter" class="filter"/>
             <div id="users-filter-type" class="filter-type"></div>
         </div>
         <button id="new-user-button" class="fa fa-user-plus"></button>
@@ -33,9 +35,10 @@
     <div id="users-table"></div>
 </div>
 <div id="users-refresh-container">
-    <button id="user-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+	<fmt:message key="partials.users.users-content.Refresh" var="refresh"/>
+    <button id="user-refresh-button" class="refresh-button pointer fa fa-refresh" title="${refresh}"></button>
     <div id="users-last-refreshed-container" class="last-refreshed-container">
-        Last updated:&nbsp;<span id="users-last-refreshed" class="value-color"></span>
+        <fmt:message key="partials.users.users-content.LastUpdated"/>:&nbsp;<span id="users-last-refreshed" class="value-color"></span>
     </div>
     <div id="users-loading-container" class="loading-container"></div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/yes-no-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/yes-no-dialog.jsp
index 657d6d9c5edb..52ace123db55 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/yes-no-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/yes-no-dialog.jsp
@@ -15,6 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="nf-yes-no-dialog" class="hidden small-dialog">
     <div class="dialog-content">
         <div id="nf-yes-no-dialog-content"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/web.xml b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/web.xml
index ce75dea06487..97cda67d3071 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/web.xml
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/web.xml
@@ -15,7 +15,15 @@
 -->
 <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
     <display-name>nifi</display-name>
-    
+    <!-- jstl resource -->
+    <context-param>
+       <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
+       <param-value>Messages</param-value>   
+    </context-param>
+    <context-param>
+       <param-name>javax.servlet.jsp.jstl.fmt.locale</param-name>
+       <param-value>cn</param-value>          
+    </context-param>
     <!-- servlet to map to canvas page -->
     <servlet>
         <servlet-name>NiFiCanvas</servlet-name>

From daa085203982d0b7d2fea71fd8856e23f5cc9839 Mon Sep 17 00:00:00 2001
From: WangJian <1925432244@qq.com>
Date: Sun, 19 Mar 2017 10:12:27 +0800
Subject: [PATCH 03/13] Updated js directory to add *.js localized changes and
 add gloabalization directory

---
 .../propertytable/jquery.propertytable.js     | 3622 +++++-----
 .../js/jquery/tagcloud/jquery.tagcloud.js     |  430 +-
 .../js/nf/bulletin-board/nf-bulletin-board.js |  924 +--
 .../nf-ng-canvas-flow-status-controller.js    |  990 +--
 .../nf-ng-canvas-global-menu-controller.js    |  734 +--
 .../nf-ng-canvas-graph-controls-controller.js |  646 +-
 .../nf-ng-canvas-operate-controller.js        |  928 +--
 .../nf-ng-canvas-toolbox-controller.js        |  330 +-
 .../components/nf-ng-group-component.js       |  496 +-
 .../components/nf-ng-input-port-component.js  |  482 +-
 .../components/nf-ng-output-port-component.js |  464 +-
 .../components/nf-ng-processor-component.js   | 1322 ++--
 .../nf-ng-remote-process-group-component.js   |  588 +-
 .../components/nf-ng-template-component.js    |  518 +-
 .../main/webapp/js/nf/canvas/nf-actions.js    | 3248 ++++-----
 .../webapp/js/nf/canvas/nf-canvas-utils.js    |    2 +-
 .../webapp/js/nf/canvas/nf-component-state.js |  816 +--
 .../nf/canvas/nf-connection-configuration.js  | 2760 ++++----
 .../main/webapp/js/nf/canvas/nf-connection.js | 4174 ++++++------
 .../webapp/js/nf/canvas/nf-context-menu.js    |   74 +-
 .../js/nf/canvas/nf-controller-service.js     | 4070 ++++++------
 .../js/nf/canvas/nf-controller-services.js    | 2322 +++----
 .../main/webapp/js/nf/canvas/nf-custom-ui.js  |  172 +-
 .../main/webapp/js/nf/canvas/nf-draggable.js  |  808 +--
 .../src/main/webapp/js/nf/canvas/nf-go-to.js  | 1638 ++---
 .../js/nf/canvas/nf-label-configuration.js    |  372 +-
 .../js/nf/canvas/nf-policy-management.js      | 2744 ++++----
 .../js/nf/canvas/nf-port-configuration.js     |  408 +-
 .../webapp/js/nf/canvas/nf-process-group.js   | 2494 +++----
 .../nf/canvas/nf-processor-configuration.js   | 1706 ++---
 .../main/webapp/js/nf/canvas/nf-processor.js  | 2116 +++---
 .../webapp/js/nf/canvas/nf-queue-listing.js   | 1518 ++---
 .../canvas/nf-remote-process-group-details.js |  202 +-
 .../canvas/nf-remote-process-group-ports.js   | 1098 ++--
 .../js/nf/canvas/nf-remote-process-group.js   | 2130 +++---
 .../webapp/js/nf/canvas/nf-reporting-task.js  | 1532 ++---
 .../main/webapp/js/nf/canvas/nf-settings.js   | 2492 +++----
 .../webapp/js/nf/cluster/nf-cluster-table.js  | 2710 ++++----
 .../js/nf/counters/nf-counters-table.js       |  636 +-
 .../main/webapp/js/nf/counters/nf-counters.js |  426 +-
 .../webapp/js/nf/history/nf-history-table.js  | 1044 +--
 .../main/webapp/js/nf/history/nf-history.js   |  440 +-
 .../src/main/webapp/js/nf/login/nf-login.js   |  452 +-
 .../src/main/webapp/js/nf/nf-common.js        | 2460 +++----
 .../webapp/js/nf/nf-connection-details.js     |  998 +--
 .../src/main/webapp/js/nf/nf-dialog.js        |  324 +-
 .../main/webapp/js/nf/nf-status-history.js    | 2260 +++----
 .../js/nf/provenance/nf-provenance-lineage.js | 2708 ++++----
 .../js/nf/provenance/nf-provenance-table.js   | 2852 ++++----
 .../webapp/js/nf/summary/nf-cluster-search.js |  466 +-
 .../webapp/js/nf/summary/nf-summary-table.js  | 5842 ++++++++---------
 .../js/nf/templates/nf-templates-table.js     |  888 +--
 .../main/webapp/js/nf/users/nf-users-table.js | 2514 +++----
 .../src/main/webapp/js/nf/users/nf-users.js   |  394 +-
 54 files changed, 39392 insertions(+), 39392 deletions(-)

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 b606359916c7..7cac90d0e00d 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
@@ -1,36 +1,45 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-/* 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 ($,
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  /* 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,
+                        nfCommon,
+                        nfUniversalCapture,
+                        nfDialog,
+                        nfClient,
+                        nfErrorHandler,
+                        nfProcessGroupConfiguration,
+                        nfSettings) {
+                  factory($,
                       Slick,
                       nfCommon,
                       nfUniversalCapture,
@@ -38,8 +47,30 @@
                       nfClient,
                       nfErrorHandler,
                       nfProcessGroupConfiguration,
-                      nfSettings) {
-                factory($,
+                      nfSettings);
+              });
+      } 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,
                     nfCommon,
                     nfUniversalCapture,
@@ -47,716 +78,467 @@
                     nfClient,
                     nfErrorHandler,
                     nfProcessGroupConfiguration,
-                    nfSettings);
-            });
-    } 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,
-                  nfCommon,
-                  nfUniversalCapture,
-                  nfDialog,
-                  nfClient,
-                  nfErrorHandler,
-                  nfProcessGroupConfiguration,
-                  nfSettings) {
-
-    var languageId = 'nfel';
-    var editorClass = languageId + '-editor';
-    var groupId = null;
-
-    // text editor
-    var textEditor = function (args) {
-        var scope = this;
-        var initialValue = '';
-        var previousValue;
-        var propertyDescriptor;
-        var wrapper;
-        var isEmpty;
-        var input;
-
-        this.init = function () {
-            var container = $('body');
-
-            // get the property descriptor
-            var gridContainer = $(args.grid.getContainerNode());
-            var descriptors = gridContainer.data('descriptors');
-            propertyDescriptor = descriptors[args.item.property];
-
-            // record the previous value
-            previousValue = args.item[args.column.field];
-
-            // create the wrapper
-            wrapper = $('<div></div>').addClass('slickgrid-editor').css({
-                'z-index': 100000,
-                'position': 'absolute',
-                'border-radius': '2px',
-                'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
-                'background-color': 'rgb(255, 255, 255)',
-                'overflow': 'hidden',
-                'padding': '10px 20px',
-                'cursor': 'move',
-                'transform': 'translate3d(0px, 0px, 0px)'
-            }).appendTo(container);
-
-            // create the input field
-            input = $('<textarea hidefocus rows="5"/>').css({
-                'height': '80px',
-                'width': args.position.width + 'px',
-                'min-width': '212px',
-                'margin-bottom': '5px',
-                'margin-top': '10px',
-                'white-space': 'pre'
-            }).tab().on('keydown', scope.handleKeyDown).appendTo(wrapper);
-
-            wrapper.draggable({
-                cancel: '.button, textarea, .nf-checkbox',
-                containment: 'parent'
-            });
-
-            // create the button panel
-            var stringCheckPanel = $('<div class="string-check-container">');
-            stringCheckPanel.appendTo(wrapper);
-
-            // build the custom checkbox
-            isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel);
-            $('<span class="string-check-label nf-checkbox-label">&nbsp;Set empty string</span>').appendTo(stringCheckPanel);
-
-            var ok = $('<div class="button">Ok</div>').css({
-                'color': '#fff',
-                'background': '#728E9B'
-            }).hover(
-                function () {
-                    $(this).css('background', '#004849');
-                }, function () {
-                    $(this).css('background', '#728E9B');
-                }).on('click', scope.save);
-            var cancel = $('<div class="secondary-button">Cancel</div>').css({
-                'color': '#004849',
-                'background': '#E3E8EB'
-            }).hover(
-                function () {
-                    $(this).css('background', '#C7D2D7');
-                }, function () {
-                    $(this).css('background', '#E3E8EB');
-                }).on('click', scope.cancel);
-            $('<div></div>').css({
-                'position': 'relative',
-                'top': '10px',
-                'left': '20px',
-                'width': '212px',
-                'clear': 'both',
-                'float': 'right'
-            }).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
-
-            // position and focus
-            scope.position(args.position);
-            input.focus().select();
-        };
-
-        this.handleKeyDown = function (e) {
-            if (e.which === $.ui.keyCode.ENTER && !e.shiftKey) {
-                scope.save();
-            } else if (e.which === $.ui.keyCode.ESCAPE) {
-                scope.cancel();
-
-                // prevent further propagation or escape press and prevent default behavior
-                e.stopImmediatePropagation();
-                e.preventDefault();
-            }
-        };
-
-        this.save = function () {
-            args.commitChanges();
-        };
-
-        this.cancel = function () {
-            input.val(initialValue);
-            args.cancelChanges();
-        };
-
-        this.hide = function () {
-            wrapper.hide();
-        };
-
-        this.show = function () {
-            wrapper.show();
-        };
-
-        this.position = function (position) {
-            wrapper.css({
-                'top': position.top - 27,
-                'left': position.left - 20
-            });
-        };
-
-        this.destroy = function () {
-            wrapper.remove();
-        };
-
-        this.focus = function () {
-            input.focus();
-        };
-
-        this.loadValue = function (item) {
-            // determine if this is a sensitive property
-            var isEmptyChecked = false;
-            var sensitive = nfCommon.isSensitiveProperty(propertyDescriptor);
-
-            // determine the value to use when populating the text field
-            if (nfCommon.isDefinedAndNotNull(item[args.column.field])) {
-                if (sensitive) {
-                    initialValue = nfCommon.config.sensitiveText;
-                } else {
-                    initialValue = item[args.column.field];
-                    isEmptyChecked = initialValue === '';
+                    nfSettings) {
+  
+        var languageId = 'nfel';
+        var editorClass = languageId + '-editor';
+        var groupId = null;
+    
+        // text editor
+        var textEditor = function (args) {
+            var scope = this;
+            var initialValue = '';
+            var previousValue;
+            var propertyDescriptor;
+            var wrapper;
+            var isEmpty;
+            var input;
+    
+            this.init = function () {
+                var container = $('body');
+    
+                // get the property descriptor
+                var gridContainer = $(args.grid.getContainerNode());
+                var descriptors = gridContainer.data('descriptors');
+                propertyDescriptor = descriptors[args.item.property];
+    
+                // record the previous value
+                previousValue = args.item[args.column.field];
+    
+                // create the wrapper
+                wrapper = $('<div></div>').addClass('slickgrid-editor').css({
+                    'z-index': 100000,
+                    'position': 'absolute',
+                    'border-radius': '2px',
+                    'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
+                    'background-color': 'rgb(255, 255, 255)',
+                    'overflow': 'hidden',
+                    'padding': '10px 20px',
+                  'cursor': 'move',
+                  'transform': 'translate3d(0px, 0px, 0px)'
+                }).appendTo(container);
+    
+                // create the input field
+                input = $('<textarea hidefocus rows="5"/>').css({
+                    'height': '80px',
+                    'width': args.position.width + 'px',
+                    'min-width': '212px',
+                    'margin-bottom': '5px',
+                  'margin-top': '10px',
+                  'white-space': 'pre'
+                }).tab().on('keydown', scope.handleKeyDown).appendTo(wrapper);
+    
+                wrapper.draggable({
+                    cancel: '.button, textarea, .nf-checkbox',
+                    containment: 'parent'
+                });
+    
+                // create the button panel
+                var stringCheckPanel = $('<div class="string-check-container">');
+                stringCheckPanel.appendTo(wrapper);
+    
+                // build the custom checkbox
+                isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel);
+              $('<span class="string-check-label nf-checkbox-label">&nbsp;' + nf._.msg('jquery-propertytable.SetEmptyString') + '</span>').appendTo(stringCheckPanel);
+    
+                var ok = $('<div class="button">Ok</div>').css({
+                    'color': '#fff',
+                    'background': '#728E9B'
+                }).hover(
+                    function () {
+                        $(this).css('background', '#004849');
+                    }, function () {
+                        $(this).css('background', '#728E9B');
+                    }).on('click', scope.save);
+              var cancel = $('<div class="secondary-button">' + nf._.msg('jquery-propertytable.Cancel') + '</div>').css({
+                    'color': '#004849',
+                    'background': '#E3E8EB'
+                }).hover(
+                    function () {
+                        $(this).css('background', '#C7D2D7');
+                    }, function () {
+                        $(this).css('background', '#E3E8EB');
+                    }).on('click', scope.cancel);
+                $('<div></div>').css({
+                    'position': 'relative',
+                    'top': '10px',
+                    'left': '20px',
+                    'width': '212px',
+                    'clear': 'both',
+                    'float': 'right'
+                }).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
+    
+                // position and focus
+                scope.position(args.position);
+                input.focus().select();
+            };
+    
+            this.handleKeyDown = function (e) {
+                if (e.which === $.ui.keyCode.ENTER && !e.shiftKey) {
+                    scope.save();
+                } else if (e.which === $.ui.keyCode.ESCAPE) {
+                    scope.cancel();
+    
+                    // prevent further propagation or escape press and prevent default behavior
+                    e.stopImmediatePropagation();
+                    e.preventDefault();
                 }
-            }
-
-            // determine if its an empty string
-            var checkboxStyle = isEmptyChecked ? 'checkbox-checked' : 'checkbox-unchecked';
-            isEmpty.addClass(checkboxStyle);
-
-            // style sensitive properties differently
-            if (sensitive) {
-                input.addClass('sensitive').keydown(function () {
-                    var sensitiveInput = $(this);
-                    if (sensitiveInput.hasClass('sensitive')) {
-                        sensitiveInput.removeClass('sensitive');
-                        if (sensitiveInput.val() === nfCommon.config.sensitiveText) {
-                            sensitiveInput.val('');
-                        }
-                    }
+            };
+    
+            this.save = function () {
+                args.commitChanges();
+            };
+    
+            this.cancel = function () {
+                input.val(initialValue);
+                args.cancelChanges();
+            };
+    
+            this.hide = function () {
+                wrapper.hide();
+            };
+    
+            this.show = function () {
+                wrapper.show();
+            };
+    
+            this.position = function (position) {
+                wrapper.css({
+                    'top': position.top - 27,
+                    'left': position.left - 20
                 });
-            }
-
-            input.val(initialValue);
-            input.select();
-        };
-
-        this.serializeValue = function () {
-            // if the field has been cleared, set the value accordingly
-            if (input.val() === '') {
-                // if the user has checked the empty string checkbox, use emtpy string
-                if (isEmpty.hasClass('checkbox-checked')) {
-                    return '';
-                } else {
-                    // otherwise if the property is required
-                    if (nfCommon.isRequiredProperty(propertyDescriptor)) {
-                        if (nfCommon.isBlank(propertyDescriptor.defaultValue)) {
-                            return previousValue;
-                        } else {
-                            return propertyDescriptor.defaultValue;
-                        }
+            };
+    
+            this.destroy = function () {
+                wrapper.remove();
+            };
+    
+            this.focus = function () {
+                input.focus();
+            };
+    
+            this.loadValue = function (item) {
+                // determine if this is a sensitive property
+                var isEmptyChecked = false;
+              var sensitive = nfCommon.isSensitiveProperty(propertyDescriptor);
+    
+                // determine the value to use when populating the text field
+              if (nfCommon.isDefinedAndNotNull(item[args.column.field])) {
+                    if (sensitive) {
+                      initialValue = nfCommon.config.sensitiveText;
                     } else {
-                        // if the property is not required, clear the value
-                        return null;
+                        initialValue = item[args.column.field];
+                        isEmptyChecked = initialValue === '';
                     }
                 }
-            } else {
-                // if the field still has the sensitive class it means a property
-                // was edited but never modified so we should restore the previous
-                // value instead of setting it to the 'sensitive value set' string
-                if (input.hasClass('sensitive')) {
-                    return previousValue;
-                } else {
-                    // if there is text specified, use that value
-                    return input.val();
-                }
-            }
-        };
-
-        this.applyValue = function (item, state) {
-            item[args.column.field] = state;
-        };
-
-        this.isValueChanged = function () {
-            return scope.serializeValue() !== previousValue;
-        };
-
-        this.validate = function () {
-            return {
-                valid: true,
-                msg: null
-            };
-        };
-
-        // initialize the custom long text editor
-        this.init();
-    };
-
-    // nfel editor
-    var nfelEditor = function (args) {
-        var scope = this;
-        var initialValue = '';
-        var previousValue;
-        var propertyDescriptor;
-        var isEmpty;
-        var wrapper;
-        var editor;
-
-        this.init = function () {
-            var container = $('body');
-
-            // get the property descriptor
-            var gridContainer = $(args.grid.getContainerNode());
-            var descriptors = gridContainer.data('descriptors');
-            propertyDescriptor = descriptors[args.item.property];
-
-            // determine if this is a sensitive property
-            var sensitive = nfCommon.isSensitiveProperty(propertyDescriptor);
-
-            // record the previous value
-            previousValue = args.item[args.column.field];
-
-            var languageId = 'nfel';
-            var editorClass = languageId + '-editor';
-
-            // create the wrapper
-            wrapper = $('<div></div>').addClass('slickgrid-nfel-editor').css({
-                'z-index': 14000,
-                'position': 'absolute',
-                'padding': '10px 20px',
-                'overflow': 'hidden',
-                'border-radius': '2px',
-                'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
-                'background-color': 'rgb(255, 255, 255)',
-                'cursor': 'move',
-                'transform': 'translate3d(0px, 0px, 0px)'
-            }).draggable({
-                cancel: 'input, textarea, pre, .nf-checkbox, .button, .' + editorClass,
-                containment: 'parent'
-            }).appendTo(container);
-
-            // create the editor
-            editor = $('<div></div>').addClass(editorClass).appendTo(wrapper).nfeditor({
-                languageId: languageId,
-                width: (args.position.width < 212) ? 212 : args.position.width,
-                minWidth: 212,
-                minHeight: 100,
-                resizable: true,
-                sensitive: sensitive,
-                escape: function () {
-                    scope.cancel();
-                },
-                enter: function () {
-                    scope.save();
-                }
-            });
-
-            // create the button panel
-            var stringCheckPanel = $('<div class="string-check-container">');
-            stringCheckPanel.appendTo(wrapper);
-
-            // build the custom checkbox
-            isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel);
-            $('<span class="string-check-label nf-checkbox-label">&nbsp;Set empty string</span>').appendTo(stringCheckPanel);
-
-            var ok = $('<div class="button">Ok</div>').css({
-                'color': '#fff',
-                'background': '#728E9B'
-            }).hover(
-                function () {
-                    $(this).css('background', '#004849');
-                }, function () {
-                    $(this).css('background', '#728E9B');
-                }).on('click', scope.save);
-            var cancel = $('<div class="secondary-button">Cancel</div>').css({
-                'color': '#004849',
-                'background': '#E3E8EB'
-            }).hover(
-                function () {
-                    $(this).css('background', '#C7D2D7');
-                }, function () {
-                    $(this).css('background', '#E3E8EB');
-                }).on('click', scope.cancel);
-            $('<div></div>').css({
-                'position': 'relative',
-                'top': '10px',
-                'left': '20px',
-                'width': '212px',
-                'clear': 'both',
-                'float': 'right'
-            }).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
-
-            // position and focus
-            scope.position(args.position);
-            editor.nfeditor('focus').nfeditor('selectAll');
-        };
-
-        this.save = function () {
-            args.commitChanges();
-        };
-
-        this.cancel = function () {
-            editor.nfeditor('setValue', initialValue);
-            args.cancelChanges();
-        };
-
-        this.hide = function () {
-            wrapper.hide();
-        };
-
-        this.show = function () {
-            wrapper.show();
-            editor.nfeditor('refresh');
-        };
-
-        this.position = function (position) {
-            wrapper.css({
-                'top': position.top - 21,
-                'left': position.left - 43
-            });
-        };
-
-        this.destroy = function () {
-            editor.nfeditor('destroy');
-            wrapper.remove();
-        };
-
-        this.focus = function () {
-            editor.nfeditor('focus');
-        };
-
-        this.loadValue = function (item) {
-            // determine if this is a sensitive property
-            var isEmptyChecked = false;
-            var sensitive = nfCommon.isSensitiveProperty(propertyDescriptor);
-
-            // determine the value to use when populating the text field
-            if (nfCommon.isDefinedAndNotNull(item[args.column.field])) {
+    
+                // determine if its an empty string
+                var checkboxStyle = isEmptyChecked ? 'checkbox-checked' : 'checkbox-unchecked';
+                isEmpty.addClass(checkboxStyle);
+    
+                // style sensitive properties differently
                 if (sensitive) {
-                    initialValue = nfCommon.config.sensitiveText;
-                } else {
-                    initialValue = item[args.column.field];
-                    isEmptyChecked = initialValue === '';
+                    input.addClass('sensitive').keydown(function () {
+                        var sensitiveInput = $(this);
+                        if (sensitiveInput.hasClass('sensitive')) {
+                            sensitiveInput.removeClass('sensitive');
+                          if (sensitiveInput.val() === nfCommon.config.sensitiveText) {
+                                sensitiveInput.val('');
+                            }
+                        }
+                    });
                 }
-            }
-
-            // determine if its an empty string
-            var checkboxStyle = isEmptyChecked ? 'checkbox-checked' : 'checkbox-unchecked';
-            isEmpty.addClass(checkboxStyle);
-
-            editor.nfeditor('setValue', initialValue).nfeditor('selectAll');
-        };
-
-        this.serializeValue = function () {
-            var value = editor.nfeditor('getValue');
-
-            // if the field has been cleared, set the value accordingly
-            if (value === '') {
-                // if the user has checked the empty string checkbox, use emtpy string
-                if (isEmpty.hasClass('checkbox-checked')) {
-                    return '';
-                } else {
-                    // otherwise if the property is required
-                    if (nfCommon.isRequiredProperty(propertyDescriptor)) {
-                        if (nfCommon.isBlank(propertyDescriptor.defaultValue)) {
-                            return previousValue;
+    
+                input.val(initialValue);
+                input.select();
+            };
+    
+            this.serializeValue = function () {
+                // if the field has been cleared, set the value accordingly
+                if (input.val() === '') {
+                    // if the user has checked the empty string checkbox, use emtpy string
+                    if (isEmpty.hasClass('checkbox-checked')) {
+                        return '';
+                    } else {
+                        // otherwise if the property is required
+                      if (nfCommon.isRequiredProperty(propertyDescriptor)) {
+                          if (nfCommon.isBlank(propertyDescriptor.defaultValue)) {
+                                return previousValue;
+                            } else {
+                                return propertyDescriptor.defaultValue;
+                            }
                         } else {
-                            return propertyDescriptor.defaultValue;
+                            // if the property is not required, clear the value
+                            return null;
                         }
-                    } else {
-                        // if the property is not required, clear the value
-                        return null;
                     }
-                }
-            } else {
-                // if the field still has the sensitive class it means a property
-                // was edited but never modified so we should restore the previous
-                // value instead of setting it to the 'sensitive value set' string
-
-                // if the field hasn't been modified return the previous value... this
-                // is important because sensitive properties contain the text 'sensitive
-                // value set' which is cleared when the value is edited. we do not
-                // want to actually use this value
-                if (editor.nfeditor('isModified') === false) {
-                    return previousValue;
                 } else {
-                    // if there is text specified, use that value
-                    return value;
+                    // if the field still has the sensitive class it means a property
+                    // was edited but never modified so we should restore the previous
+                    // value instead of setting it to the 'sensitive value set' string
+                    if (input.hasClass('sensitive')) {
+                        return previousValue;
+                    } else {
+                        // if there is text specified, use that value
+                        return input.val();
+                    }
                 }
-            }
-        };
-
-        this.applyValue = function (item, state) {
-            item[args.column.field] = state;
-        };
-
-        this.isValueChanged = function () {
-            return scope.serializeValue() !== previousValue;
-        };
-
-        this.validate = function () {
-            return {
-                valid: true,
-                msg: null
             };
+    
+            this.applyValue = function (item, state) {
+                item[args.column.field] = state;
+            };
+    
+            this.isValueChanged = function () {
+                return scope.serializeValue() !== previousValue;
+            };
+    
+            this.validate = function () {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+    
+            // initialize the custom long text editor
+            this.init();
         };
-
-        // initialize the custom long nfel editor
-        this.init();
-    };
-
-    // combo editor
-    var comboEditor = function (args) {
-        var scope = this;
-        var initialValue = null;
-        var wrapper;
-        var combo;
-        var propertyDescriptor;
-
-        this.init = function () {
-            var container = $('body');
-
-            // get the property descriptor
-            var gridContainer = $(args.grid.getContainerNode());
-            var descriptors = gridContainer.data('descriptors');
-            propertyDescriptor = descriptors[args.item.property];
-
-            // get the options
-            var propertyContainer = gridContainer.closest('.property-container');
-            var configurationOptions = propertyContainer.data('options');
-
-            // create the wrapper
-            wrapper = $('<div class="combo-editor"></div>').css({
-                'z-index': 1999,
-                'position': 'absolute',
-                'padding': '10px 20px',
-                'overflow': 'hidden',
-                'border-radius': '2px',
-                'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
-                'background-color': 'rgb(255, 255, 255)',
-                'cursor': 'move',
-                'transform': 'translate3d(0px, 0px, 0px)'
-            }).draggable({
-                cancel: '.button, .combo',
-                containment: 'parent'
-            }).appendTo(container);
-
-            // check for allowable values which will drive which editor to use
-            var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
-
-            // show the output port options
-            var options = [];
-            if (propertyDescriptor.required === false) {
-                options.push({
-                    text: 'No value',
-                    value: null,
-                    optionClass: 'unset'
-                });
-            }
-            if ($.isArray(allowableValues)) {
-                $.each(allowableValues, function (i, allowableValueEntity) {
-                    var allowableValue = allowableValueEntity.allowableValue;
-                    options.push({
-                        text: allowableValue.displayName,
-                        value: allowableValue.value,
-                        disabled: allowableValueEntity.canRead === false && allowableValue.value !== args.item['previousValue'],
-                        description: nfCommon.escapeHtml(allowableValue.description)
-                    });
-                });
-            }
-
-            // ensure the options there is at least one option
-            if (options.length === 0) {
-                options.push({
-                    text: 'No value',
-                    value: null,
-                    optionClass: 'unset',
-                    disabled: true
-                });
-            }
-
-            // if this descriptor identifies a controller service, provide a way to create one
-            if (nfCommon.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService)) {
-                options.push({
-                    text: 'Create new service...',
-                    value: undefined,
-                    optionClass: 'unset'
-                });
-            }
-
-            // determine the max height
-            var position = args.position;
-            var windowHeight = $(window).height();
-            var maxHeight = windowHeight - position.bottom - 16;
-
-            // build the combo field
-            combo = $('<div class="value-combo combo"></div>').combo({
-                options: options,
-                maxHeight: maxHeight,
-                select: function (option) {
-                    if (typeof option.value === 'undefined') {
-                        // cancel the current edit
+    
+        // nfel editor
+        var nfelEditor = function (args) {
+            var scope = this;
+            var initialValue = '';
+            var previousValue;
+            var propertyDescriptor;
+            var isEmpty;
+            var wrapper;
+            var editor;
+    
+            this.init = function () {
+                var container = $('body');
+    
+                // get the property descriptor
+                var gridContainer = $(args.grid.getContainerNode());
+                var descriptors = gridContainer.data('descriptors');
+                propertyDescriptor = descriptors[args.item.property];
+    
+                // determine if this is a sensitive property
+              var sensitive = nfCommon.isSensitiveProperty(propertyDescriptor);
+    
+                // record the previous value
+                previousValue = args.item[args.column.field];
+    
+                var languageId = 'nfel';
+                var editorClass = languageId + '-editor';
+    
+                // create the wrapper
+                wrapper = $('<div></div>').addClass('slickgrid-nfel-editor').css({
+                    'z-index': 14000,
+                    'position': 'absolute',
+                    'padding': '10px 20px',
+                    'overflow': 'hidden',
+                    'border-radius': '2px',
+                    'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
+                    'background-color': 'rgb(255, 255, 255)',
+                  'cursor': 'move',
+                  'transform': 'translate3d(0px, 0px, 0px)'
+                }).draggable({
+                    cancel: 'input, textarea, pre, .nf-checkbox, .button, .' + editorClass,
+                    containment: 'parent'
+                }).appendTo(container);
+    
+                // create the editor
+                editor = $('<div></div>').addClass(editorClass).appendTo(wrapper).nfeditor({
+                    languageId: languageId,
+                    width: (args.position.width < 212) ? 212 : args.position.width,
+                    minWidth: 212,
+                    minHeight: 100,
+                    resizable: true,
+                    sensitive: sensitive,
+                    escape: function () {
                         scope.cancel();
-
-                        // prompt for the new service type
-                        promptForNewControllerService(gridContainer, args.grid, args.item, propertyDescriptor.identifiesControllerService, configurationOptions);
+                    },
+                    enter: function () {
+                        scope.save();
                     }
-                }
-            }).css({
-                'margin-top': '10px',
-                'margin-bottom': '10px',
-                'width': ((position.width - 16) < 212) ? 212 : (position.width - 16) + 'px'
-            }).appendTo(wrapper);
-
-            // add buttons for handling user input
-            var cancel = $('<div class="secondary-button">Cancel</div>').css({
-                'color': '#004849',
-                'background': '#E3E8EB'
-            }).hover(
-                function () {
-                    $(this).css('background', '#C7D2D7');
-                }, function () {
-                    $(this).css('background', '#E3E8EB');
-                }).on('click', scope.cancel);
-            var ok = $('<div class="button">Ok</div>').css({
-                'color': '#fff',
-                'background': '#728E9B'
-            }).hover(
-                function () {
-                    $(this).css('background', '#004849');
-                }, function () {
-                    $(this).css('background', '#728E9B');
-                }).on('click', scope.save);
-
-            $('<div></div>').css({
-                'position': 'relative',
-                'top': '10px',
-                'left': '20px',
-                'width': '212px',
-                'clear': 'both',
-                'float': 'right'
-            }).append(ok).append(cancel).appendTo(wrapper);
-
-            // position and focus
-            scope.position(position);
-        };
-
-        this.save = function () {
-            args.commitChanges();
-        };
-
-        this.cancel = function () {
-            args.cancelChanges();
-        };
-
-        this.hide = function () {
-            wrapper.hide();
-        };
-
-        this.show = function () {
-            wrapper.show();
-        };
-
-        this.position = function (position) {
-            wrapper.css({
-                'top': position.top - 24,
-                'left': position.left - 20
-            });
-        };
-
-        this.destroy = function () {
-            combo.combo('destroy');
-            wrapper.remove();
-        };
-
-        this.focus = function () {
-        };
-
-        this.loadValue = function (item) {
-            // select as appropriate
-            if (!nfCommon.isUndefined(item.value)) {
-                initialValue = item.value;
-
-                combo.combo('setSelectedOption', {
-                    value: item.value
                 });
-            } else if (nfCommon.isDefinedAndNotNull(propertyDescriptor.defaultValue)) {
-                initialValue = propertyDescriptor.defaultValue;
-
-                combo.combo('setSelectedOption', {
-                    value: propertyDescriptor.defaultValue
+    
+                // create the button panel
+                var stringCheckPanel = $('<div class="string-check-container">');
+                stringCheckPanel.appendTo(wrapper);
+    
+                // build the custom checkbox
+                isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel);
+              $('<span class="string-check-label nf-checkbox-label">&nbsp;' + nf._.msg('jquery-propertytable.SetEmptyString') + '</span>').appendTo(stringCheckPanel);
+    
+              var ok = $('<div class="button">' + nf._.msg('jquery-propertytable.Ok') + '</div>').css({
+                    'color': '#fff',
+                    'background': '#728E9B'
+                }).hover(
+                    function () {
+                        $(this).css('background', '#004849');
+                    }, function () {
+                        $(this).css('background', '#728E9B');
+                    }).on('click', scope.save);
+              var cancel = $('<div class="secondary-button">' + nf._.msg('jquery-propertytable.Cancel') + '</div>').css({
+                    'color': '#004849',
+                    'background': '#E3E8EB'
+                }).hover(
+                    function () {
+                        $(this).css('background', '#C7D2D7');
+                    }, function () {
+                        $(this).css('background', '#E3E8EB');
+                    }).on('click', scope.cancel);
+                $('<div></div>').css({
+                    'position': 'relative',
+                    'top': '10px',
+                    'left': '20px',
+                    'width': '212px',
+                    'clear': 'both',
+                    'float': 'right'
+                }).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
+    
+                // position and focus
+                scope.position(args.position);
+                editor.nfeditor('focus').nfeditor('selectAll');
+            };
+    
+            this.save = function () {
+                args.commitChanges();
+            };
+    
+            this.cancel = function () {
+                editor.nfeditor('setValue', initialValue);
+                args.cancelChanges();
+            };
+    
+            this.hide = function () {
+                wrapper.hide();
+            };
+    
+            this.show = function () {
+                wrapper.show();
+                editor.nfeditor('refresh');
+            };
+    
+            this.position = function (position) {
+                wrapper.css({
+                  'top': position.top - 21,
+                  'left': position.left - 43
                 });
-            }
-        };
-
-        this.serializeValue = function () {
-            var selectedOption = combo.combo('getSelectedOption');
-            return selectedOption.value;
-        };
-
-        this.applyValue = function (item, state) {
-            item[args.column.field] = state;
-        };
-
-        this.isValueChanged = function () {
-            var selectedOption = combo.combo('getSelectedOption');
-            return (!(selectedOption.value === "" && initialValue === null)) && (selectedOption.value !== initialValue);
-        };
-
-        this.validate = function () {
-            return {
-                valid: true,
-                msg: null
             };
+    
+            this.destroy = function () {
+                editor.nfeditor('destroy');
+                wrapper.remove();
+            };
+    
+            this.focus = function () {
+                editor.nfeditor('focus');
+            };
+    
+            this.loadValue = function (item) {
+                // determine if this is a sensitive property
+                var isEmptyChecked = false;
+              var sensitive = nfCommon.isSensitiveProperty(propertyDescriptor);
+    
+                // determine the value to use when populating the text field
+              if (nfCommon.isDefinedAndNotNull(item[args.column.field])) {
+                    if (sensitive) {
+                      initialValue = nfCommon.config.sensitiveText;
+                    } else {
+                        initialValue = item[args.column.field];
+                        isEmptyChecked = initialValue === '';
+                    }
+                }
+    
+                // determine if its an empty string
+                var checkboxStyle = isEmptyChecked ? 'checkbox-checked' : 'checkbox-unchecked';
+                isEmpty.addClass(checkboxStyle);
+    
+                editor.nfeditor('setValue', initialValue).nfeditor('selectAll');
+            };
+    
+            this.serializeValue = function () {
+                var value = editor.nfeditor('getValue');
+    
+                // if the field has been cleared, set the value accordingly
+                if (value === '') {
+                    // if the user has checked the empty string checkbox, use emtpy string
+                    if (isEmpty.hasClass('checkbox-checked')) {
+                        return '';
+                    } else {
+                        // otherwise if the property is required
+                      if (nfCommon.isRequiredProperty(propertyDescriptor)) {
+                          if (nfCommon.isBlank(propertyDescriptor.defaultValue)) {
+                                return previousValue;
+                            } else {
+                                return propertyDescriptor.defaultValue;
+                            }
+                        } else {
+                            // if the property is not required, clear the value
+                            return null;
+                        }
+                    }
+                } else {
+                    // if the field still has the sensitive class it means a property
+                    // was edited but never modified so we should restore the previous
+                    // value instead of setting it to the 'sensitive value set' string
+    
+                    // if the field hasn't been modified return the previous value... this
+                    // is important because sensitive properties contain the text 'sensitive
+                    // value set' which is cleared when the value is edited. we do not
+                    // want to actually use this value
+                    if (editor.nfeditor('isModified') === false) {
+                        return previousValue;
+                    } else {
+                        // if there is text specified, use that value
+                        return value;
+                    }
+                }
+            };
+    
+            this.applyValue = function (item, state) {
+                item[args.column.field] = state;
+            };
+    
+            this.isValueChanged = function () {
+                return scope.serializeValue() !== previousValue;
+            };
+    
+            this.validate = function () {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+    
+            // initialize the custom long nfel editor
+            this.init();
         };
-
-        // initialize the custom long text editor
-        this.init();
-    };
-
-    /**
-     * Shows the property value for the specified row and cell.
-     *
-     * @param {type} propertyGrid
-     * @param {type} descriptors
-     * @param {type} row
-     * @param {type} cell
-     */
-    var showPropertyValue = function (propertyGrid, descriptors, row, cell) {
-        // remove any currently open detail dialogs
-        nfUniversalCapture.removeAllPropertyDetailDialogs();
-
-        // get the property in question
-        var propertyData = propertyGrid.getData();
-        var property = propertyData.getItem(row);
-
-        // ensure there is a value
-        if (nfCommon.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 (!nfCommon.isSensitiveProperty(propertyDescriptor)) {
-
-                // get details about the location of the cell
-                var cellNode = $(propertyGrid.getCellNode(row, cell));
-                var offset = cellNode.offset();
-
+    
+        // combo editor
+        var comboEditor = function (args) {
+            var scope = this;
+            var initialValue = null;
+            var wrapper;
+            var combo;
+            var propertyDescriptor;
+    
+            this.init = function () {
+                var container = $('body');
+    
+                // get the property descriptor
+                var gridContainer = $(args.grid.getContainerNode());
+                var descriptors = gridContainer.data('descriptors');
+                propertyDescriptor = descriptors[args.item.property];
+    
+                // get the options
+                var propertyContainer = gridContainer.closest('.property-container');
+                var configurationOptions = propertyContainer.data('options');
+    
                 // create the wrapper
-                var wrapper = $('<div class="property-detail"></div>').css({
+                wrapper = $('<div class="combo-editor"></div>').css({
                     'z-index': 1999,
                     'position': 'absolute',
                     'padding': '10px 20px',
@@ -764,1165 +546,1383 @@
                     'border-radius': '2px',
                     'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
                     'background-color': 'rgb(255, 255, 255)',
-                    'cursor': 'move',
-                    'transform': 'translate3d(0px, 0px, 0px)',
-                    'top': offset.top - 24,
-                    'left': offset.left - 20
-                }).appendTo('body');
-
-                var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
-                if ($.isArray(allowableValues)) {
-                    // prevent dragging over the combo
-                    wrapper.draggable({
-                        cancel: '.button, .combo',
-                        containment: 'parent'
+                  'cursor': 'move',
+                  'transform': 'translate3d(0px, 0px, 0px)'
+                }).draggable({
+                    cancel: '.button, .combo',
+                    containment: 'parent'
+                }).appendTo(container);
+    
+                // check for allowable values which will drive which editor to use
+              var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
+    
+                // show the output port options
+                var options = [];
+                if (propertyDescriptor.required === false) {
+                    options.push({
+                      text: nf._.msg('jquery-propertytable.NoValueSet'),
+                        value: null,
+                        optionClass: 'unset'
                     });
-
-                    // create the read only options
-                    var options = [];
+                }
+                if ($.isArray(allowableValues)) {
                     $.each(allowableValues, function (i, allowableValueEntity) {
                         var allowableValue = allowableValueEntity.allowableValue;
                         options.push({
                             text: allowableValue.displayName,
                             value: allowableValue.value,
-                            description: nfCommon.escapeHtml(allowableValue.description),
-                            disabled: true
+                            disabled: allowableValueEntity.canRead === false && allowableValue.value !== args.item['previousValue'],
+                          description: nfCommon.escapeHtml(allowableValue.description)
                         });
                     });
-
-                    // ensure the options there is at least one option
-                    if (options.length === 0) {
-                        options.push({
-                            text: 'No value',
-                            value: null,
-                            optionClass: 'unset',
-                            disabled: true
-                        });
-                    }
-
-                    // determine the max height
-                    var windowHeight = $(window).height();
-                    var maxHeight = windowHeight - (offset.top + cellNode.height()) - 16;
-                    var width = cellNode.width() - 16;
-
-                    // build the combo field
-                    $('<div class="value-combo combo"></div>').css({
-                        'width': width,
-                        'margin-top': '10px',
-                        'margin-bottom': '10px'
-                    }).combo({
-                        options: options,
-                        maxHeight: maxHeight,
-                        selectedOption: {
-                            value: property.value
-                        }
-                    }).appendTo(wrapper);
-
-                    $('<div class="button">Ok</div>').css({
-                        'position': 'relative',
-                        'top': '10px',
-                        'left': '20px'
-                    }).hover(
-                        function () {
-                            $(this).css('background', '#004849');
-                        }, function () {
-                            $(this).css('background', '#728E9B');
-                        }).on('click', function () {
-                        wrapper.hide().remove();
-                    }).appendTo(wrapper);
-                } else {
-                    var editor = null;
-
-                    // so the nfel editor is appropriate
-                    if (nfCommon.supportsEl(propertyDescriptor)) {
-                        var languageId = 'nfel';
-                        var editorClass = languageId + '-editor';
-
-                        // prevent dragging over the nf editor
-                        wrapper.css({
-                            'z-index': 1999,
-                            'position': 'absolute',
-                            'padding': '10px 20px',
-                            'overflow': 'hidden',
-                            'border-radius': '2px',
-                            'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
-                            'background-color': 'rgb(255, 255, 255)',
-                            'cursor': 'move',
-                            'transform': 'translate3d(0px, 0px, 0px)',
-                            'top': offset.top - 22,
-                            'left': offset.left - 43
-                        }).draggable({
-                            cancel: 'input, textarea, pre, .button, .' + editorClass,
-                            containment: 'parent'
-                        });
-
-                        // create the editor
-                        editor = $('<div></div>').addClass(editorClass).appendTo(wrapper).nfeditor({
-                            languageId: languageId,
-                            width: cellNode.width(),
-                            content: property.value,
-                            minWidth: 175,
-                            minHeight: 100,
-                            readOnly: true,
-                            resizable: true,
-                            escape: function () {
-                                cleanUp();
-                            }
-                        });
-                    } else {
-                        wrapper.css({
-                            'z-index': 1999,
-                            'position': 'absolute',
-                            'padding': '10px 20px',
-                            'overflow': 'hidden',
-                            'border-radius': '2px',
-                            'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
-                            'background-color': 'rgb(255, 255, 255)',
-                            'cursor': 'move',
-                            'transform': 'translate3d(0px, 0px, 0px)',
-                            'top': offset.top - 26,
-                            'left': offset.left - 20
-                        });
-
-                        // create the input field
-                        $('<textarea hidefocus rows="5" readonly="readonly"/>').css({
-                            'height': '80px',
-                            'resize': 'both',
-                            'width': cellNode.width() + 'px',
-                            'margin': '10px 0px',
-                            'white-space': 'pre'
-                        }).text(property.value).on('keydown', function (evt) {
-                            if (evt.which === $.ui.keyCode.ESCAPE) {
-                                cleanUp();
-
-                                evt.stopImmediatePropagation();
-                                evt.preventDefault();
-                            }
-                        }).appendTo(wrapper);
-
-                        // prevent dragging over standard components
-                        wrapper.draggable({
-                            containment: 'parent'
-                        });
-                    }
-
-                    var cleanUp = function () {
-                        // clean up the editor
-                        if (editor !== null) {
-                            editor.nfeditor('destroy');
-                        }
-
-                        // clean up the rest
-                        wrapper.hide().remove();
-                    };
-
-                    // add an ok button that will remove the entire pop up
-                    var ok = $('<div class="button">Ok</div>').css({
-                        'position': 'relative',
-                        'top': '10px',
-                        'left': '20px'
-                    }).hover(
-                        function () {
-                            $(this).css('background', '#004849');
-                        }, function () {
-                            $(this).css('background', '#728E9B');
-                        }).on('click', function () {
-                        cleanUp();
+                }
+    
+                // ensure the options there is at least one option
+                if (options.length === 0) {
+                    options.push({
+                      text: nf._.msg('jquery-propertytable.NoValueSet'),
+                        value: null,
+                        optionClass: 'unset',
+                        disabled: true
                     });
-
-                    $('<div></div>').append(ok).append('<div class="clear"></div>').appendTo(wrapper);
                 }
-            }
-        }
-    };
-
-    /**
-     * Gets the available controller services that implement the specified type and
-     * prompts the user to create one.
-     *
-     * @param {jQuery} gridContainer The grid container
-     * @param {slickgrid} grid The grid
-     * @param {object} item The item
-     * @param {type} serviceType The type of service to create
-     * @param {object} configurationOptions The configuration options
-     */
-    var promptForNewControllerService = function (gridContainer, grid, item, serviceType, configurationOptions) {
-        $.ajax({
-            type: 'GET',
-            url: '../nifi-api/flow/controller-service-types',
-            data: {
-                serviceType: serviceType
-            },
-            dataType: 'json'
-        }).done(function (response) {
-            var options = [];
-            $.each(response.controllerServiceTypes, function (i, controllerServiceType) {
-                options.push({
-                    text: nfCommon.substringAfterLast(controllerServiceType.type, '.'),
-                    value: controllerServiceType.type,
-                    description: nfCommon.escapeHtml(controllerServiceType.description)
-                });
-            });
-
-            // ensure there are some applicable controller services
-            if (options.length === 0) {
-                nfDialog.showOkDialog({
-                    headerText: 'Controller Service',
-                    dialogContent: 'No controller service types found that are applicable for this property.'
-                });
-            } else {
-                var newControllerServiceDialogMarkup =
-                    '<div id="new-inline-controller-service-dialog" class="hidden dialog medium-dialog cancellable">' +
-                    '<div class="dialog-content">' +
-                    '<div>' +
-                    '<div class="setting-name">Controller Service</div>' +
-                    '<div class="setting-field">' +
-                    '<div class="new-inline-controller-service-combo"></div>' +
-                    '</div>' +
-                    '</div>' +
-                    '<div>' +
-                    '<div class="setting-name">Tags</div>' +
-                    '<div class="setting-field">' +
-                    '<div class="new-inline-controller-service-tags"></div>' +
-                    '</div>' +
-                    '</div>' +
-                    '<div>' +
-                    '<div class="setting-name">Description</div>' +
-                    '<div class="setting-field">' +
-                    '<div class="new-inline-controller-service-description"></div>' +
-                    '</div>' +
-                    '</div>' +
-                    '</div>' +
-                    '</div>';
-
-                var newControllerServiceDialog = $(newControllerServiceDialogMarkup).appendTo(configurationOptions.dialogContainer);
-                var newControllerServiceCombo = newControllerServiceDialog.find('div.new-inline-controller-service-combo');
-                var newControllerServiceTags = newControllerServiceDialog.find('div.new-inline-controller-service-tags');
-                var newControllerServiceDescription = newControllerServiceDialog.find('div.new-inline-controller-service-description');
-
+    
+                // if this descriptor identifies a controller service, provide a way to create one
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService)) {
+                    options.push({
+                      text: nf._.msg('jquery-propertytable.Message3'),
+                        value: undefined,
+                        optionClass: 'unset'
+                    });
+                }
+    
+                // determine the max height
+                var position = args.position;
+                var windowHeight = $(window).height();
+                var maxHeight = windowHeight - position.bottom - 16;
+    
                 // build the combo field
-                newControllerServiceCombo.combo({
+                combo = $('<div class="value-combo combo"></div>').combo({
                     options: options,
+                    maxHeight: maxHeight,
                     select: function (option) {
-                        var service;
-                        $.each(response.controllerServiceTypes, function (i, controllerServiceType) {
-                            if (controllerServiceType.type === option.value) {
-                                service = controllerServiceType;
-                                return false;
-                            }
-                        });
-
-                        // set the service details
-                        newControllerServiceTags.text(service.tags.join(', ')).ellipsis();
-                        newControllerServiceDescription.text(service.description);
-                    }
-                });
-
-                newControllerServiceDialog.modal({
-                    headerText: 'Add Controller Service',
-                    scrollableContentStyle: 'scrollable',
-                    buttons: [{
-                        buttonText: 'Create',
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                create();
-                            }
-                        }
-                    },
-                        {
-                            buttonText: 'Cancel',
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                    cancel();
-                                }
-                            }
-                        }]
-                });
-
-                var create = function () {
-                    var newControllerServiceType = newControllerServiceCombo.combo('getSelectedOption').value;
-
-                    // build the controller service entity
-                    var controllerServiceEntity = {
-                        'revision': nfClient.getRevision({
-                            'revision': {
-                                'version': 0,
-                            }
-                        }),
-                        'component': {
-                            'type': newControllerServiceType
+                        if (typeof option.value === 'undefined') {
+                            // cancel the current edit
+                            scope.cancel();
+    
+                            // prompt for the new service type
+                            promptForNewControllerService(gridContainer, args.grid, args.item, propertyDescriptor.identifiesControllerService, configurationOptions);
                         }
-                    };
-
-                    // determine the appropriate uri for creating the controller service
-                    var uri = '../nifi-api/controller/controller-services';
-                    if (nfCommon.isDefinedAndNotNull(groupId)) {
-                        uri = '../nifi-api/process-groups/' + encodeURIComponent(groupId) + '/controller-services';
                     }
-
-                    // add the new controller service
-                    $.ajax({
-                        type: 'POST',
-                        url: uri,
-                        data: JSON.stringify(controllerServiceEntity),
-                        dataType: 'json',
-                        contentType: 'application/json'
-                    }).done(function (response) {
-                        // load the descriptor and update the property
-                        configurationOptions.descriptorDeferred(item.property).done(function (descriptorResponse) {
-                            var descriptor = descriptorResponse.propertyDescriptor;
-
-                            // store the descriptor for use later
-                            var descriptors = gridContainer.data('descriptors');
-                            if (!nfCommon.isUndefined(descriptors)) {
-                                descriptors[descriptor.name] = descriptor;
-                            }
-
-                            // add a row for the new property
-                            var data = grid.getData();
-                            data.updateItem(item.id, $.extend(item, {
-                                value: response.component.id
-                            }));
-
-                            // close the dialog
-                            newControllerServiceDialog.modal('hide');
-                        });
-
-                        // invoke callback if necessary
-                        if (typeof configurationOptions.controllerServiceCreatedDeferred === 'function') {
-                            configurationOptions.controllerServiceCreatedDeferred(response);
-                        }
-                    }).fail(nfErrorHandler.handleAjaxError);
-                };
-
-                var cancel = function () {
-                    newControllerServiceDialog.modal('hide');
-                };
-
-                newControllerServiceDialog.modal('show');
-            }
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    var initPropertiesTable = function (table, options) {
-        // function for formatting the property name
-        var nameFormatter = function (row, cell, value, columnDef, dataContext) {
-            var nameWidthOffset = 30;
-            var cellContent = $('<div></div>');
-
-            // format the contents
-            var formattedValue = $('<span/>').addClass('table-cell').text(value).appendTo(cellContent);
-            if (dataContext.type === 'required') {
-                formattedValue.addClass('required');
-            }
-
-            // get the property descriptor
-            var descriptors = table.data('descriptors');
-            var propertyDescriptor = descriptors[dataContext.property];
-
-            // show the property description if applicable
-            if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                if (!nfCommon.isBlank(propertyDescriptor.description) || !nfCommon.isBlank(propertyDescriptor.defaultValue) || !nfCommon.isBlank(propertyDescriptor.supportsEl)) {
-                    $('<div class="fa fa-question-circle" alt="Info" style="float: right; margin-right: 6px; margin-top: 4px;"></div>').appendTo(cellContent);
-                    $('<span class="hidden property-descriptor-name"></span>').text(dataContext.property).appendTo(cellContent);
-                    nameWidthOffset = 46; // 10 + icon width (10) + icon margin (6) + padding (20)
+                }).css({
+                    'margin-top': '10px',
+                    'margin-bottom': '10px',
+                  'width': ((position.width - 16) < 212) ? 212 : (position.width - 16) + 'px'
+              }).appendTo(wrapper);
+    
+                // add buttons for handling user input
+              var cancel = $('<div class="secondary-button">'+nf._.msg('jquery-propertytable.Cancel')+'</div>').css({
+                    'color': '#004849',
+                    'background': '#E3E8EB'
+                }).hover(
+                    function () {
+                        $(this).css('background', '#C7D2D7');
+                    }, function () {
+                        $(this).css('background', '#E3E8EB');
+                    }).on('click', scope.cancel);
+              var ok = $('<div class="button">' + nf._.msg('jquery-propertytable.Ok') + '</div>').css({
+                    'color': '#fff',
+                    'background': '#728E9B'
+                }).hover(
+                    function () {
+                        $(this).css('background', '#004849');
+                    }, function () {
+                        $(this).css('background', '#728E9B');
+                    }).on('click', scope.save);
+    
+                $('<div></div>').css({
+                    'position': 'relative',
+                    'top': '10px',
+                    'left': '20px',
+                    'width': '212px',
+                    'clear': 'both',
+                    'float': 'right'
+                }).append(ok).append(cancel).appendTo(wrapper);
+    
+                // position and focus
+                scope.position(position);
+            };
+    
+            this.save = function () {
+                args.commitChanges();
+            };
+    
+            this.cancel = function () {
+                args.cancelChanges();
+            };
+    
+            this.hide = function () {
+                wrapper.hide();
+            };
+    
+            this.show = function () {
+                wrapper.show();
+            };
+    
+            this.position = function (position) {
+                wrapper.css({
+                    'top': position.top - 24,
+                    'left': position.left - 20
+                });
+            };
+    
+            this.destroy = function () {
+                combo.combo('destroy');
+                wrapper.remove();
+            };
+    
+            this.focus = function () {
+            };
+    
+            this.loadValue = function (item) {
+                // select as appropriate
+              if (!nfCommon.isUndefined(item.value)) {
+                    initialValue = item.value;
+    
+                    combo.combo('setSelectedOption', {
+                        value: item.value
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(propertyDescriptor.defaultValue)) {
+                    initialValue = propertyDescriptor.defaultValue;
+    
+                    combo.combo('setSelectedOption', {
+                        value: propertyDescriptor.defaultValue
+                    });
                 }
-            }
-
-            // adjust the width accordingly
-            formattedValue.width(columnDef.width - nameWidthOffset).ellipsis();
-
-            // return the cell content
-            return cellContent.html();
+            };
+    
+            this.serializeValue = function () {
+                var selectedOption = combo.combo('getSelectedOption');
+                return selectedOption.value;
+            };
+    
+            this.applyValue = function (item, state) {
+                item[args.column.field] = state;
+            };
+    
+            this.isValueChanged = function () {
+                var selectedOption = combo.combo('getSelectedOption');
+                return (!(selectedOption.value === "" && initialValue === null)) && (selectedOption.value !== initialValue);
+            };
+    
+            this.validate = function () {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+    
+            // initialize the custom long text editor
+            this.init();
         };
-
-        // function for formatting the property value
-        var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-            var valueMarkup;
-            if (nfCommon.isDefinedAndNotNull(value)) {
-                // get the property descriptor
-                var descriptors = table.data('descriptors');
-                var propertyDescriptor = descriptors[dataContext.property];
-
-                // determine if the property is sensitive
-                if (nfCommon.isSensitiveProperty(propertyDescriptor)) {
-                    valueMarkup = '<span class="table-cell sensitive">Sensitive value set</span>';
-                } else {
-                    // if there are allowable values, attempt to swap out for the display name
-                    var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
+    
+        /**
+         * Shows the property value for the specified row and cell.
+         *
+         * @param {type} propertyGrid
+         * @param {type} descriptors
+         * @param {type} row
+         * @param {type} cell
+         */
+        var showPropertyValue = function (propertyGrid, descriptors, row, cell) {
+            // remove any currently open detail dialogs
+          nfUniversalCapture.removeAllPropertyDetailDialogs();
+    
+            // get the property in question
+            var propertyData = propertyGrid.getData();
+            var property = propertyData.getItem(row);
+    
+            // ensure there is a value
+          if (nfCommon.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 (!nfCommon.isSensitiveProperty(propertyDescriptor)) {
+    
+                    // get details about the location of the cell
+                    var cellNode = $(propertyGrid.getCellNode(row, cell));
+                    var offset = cellNode.offset();
+    
+                    // create the wrapper
+                    var wrapper = $('<div class="property-detail"></div>').css({
+                        'z-index': 1999,
+                        'position': 'absolute',
+                      'padding': '10px 20px',
+                        'overflow': 'hidden',
+                        'border-radius': '2px',
+                        'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
+                        'background-color': 'rgb(255, 255, 255)',
+                        'cursor': 'move',
+                      'transform': 'translate3d(0px, 0px, 0px)',
+                      'top': offset.top - 24,
+                      'left': offset.left - 20
+                    }).appendTo('body');
+    
+                  var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
                     if ($.isArray(allowableValues)) {
-                        $.each(allowableValues, function (_, allowableValueEntity) {
+                        // prevent dragging over the combo
+                        wrapper.draggable({
+                            cancel: '.button, .combo',
+                            containment: 'parent'
+                        });
+    
+                        // create the read only options
+                        var options = [];
+                        $.each(allowableValues, function (i, allowableValueEntity) {
                             var allowableValue = allowableValueEntity.allowableValue;
-                            if (value === allowableValue.value) {
-                                value = allowableValue.displayName;
-                                return false;
-                            }
+                            options.push({
+                                text: allowableValue.displayName,
+                                value: allowableValue.value,
+                              description: nfCommon.escapeHtml(allowableValue.description),
+                                disabled: true
+                            });
                         });
-                    }
-
-                    if (value === '') {
-                        valueMarkup = '<span class="table-cell blank">Empty string set</span>';
+    
+                        // ensure the options there is at least one option
+                        if (options.length === 0) {
+                            options.push({
+                              text: nf._.msg('jquery-propertytable.NoValueSet'),
+                                value: null,
+                                optionClass: 'unset',
+                                disabled: true
+                            });
+                        }
+    
+                        // determine the max height
+                        var windowHeight = $(window).height();
+                        var maxHeight = windowHeight - (offset.top + cellNode.height()) - 16;
+                        var width = cellNode.width() - 16;
+    
+                        // build the combo field
+                      $('<div class="value-combo combo"></div>').css({
+                          'width': width,
+                          'margin-top': '10px',
+                          'margin-bottom': '10px'
+                      }).combo({
+                            options: options,
+                            maxHeight: maxHeight,
+                            selectedOption: {
+                                value: property.value
+                            }
+                        }).appendTo(wrapper);
+    
+                      $('<div class="button">Ok</div>').css({
+                          'position': 'relative',
+                          'top': '10px',
+                          'left': '20px'
+                        }).hover(
+                            function () {
+                                $(this).css('background', '#004849');
+                            }, function () {
+                                $(this).css('background', '#728E9B');
+                            }).on('click', function () {
+                            wrapper.hide().remove();
+                        }).appendTo(wrapper);
                     } else {
-                        valueMarkup = '<div class="table-cell value"><pre class="ellipsis">' + nfCommon.escapeHtml(value) + '</pre></div>';
+                        var editor = null;
+    
+                        // so the nfel editor is appropriate
+                      if (nfCommon.supportsEl(propertyDescriptor)) {
+                            var languageId = 'nfel';
+                            var editorClass = languageId + '-editor';
+    
+                            // prevent dragging over the nf editor
+                          wrapper.css({
+                              'z-index': 1999,
+                              'position': 'absolute',
+                              'padding': '10px 20px',
+                              'overflow': 'hidden',
+                              'border-radius': '2px',
+                              'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
+                              'background-color': 'rgb(255, 255, 255)',
+                              'cursor': 'move',
+                              'transform': 'translate3d(0px, 0px, 0px)',
+                              'top': offset.top - 22,
+                              'left': offset.left - 43
+                          }).draggable({
+                                cancel: 'input, textarea, pre, .button, .' + editorClass,
+                                containment: 'parent'
+                            });
+    
+                            // create the editor
+                            editor = $('<div></div>').addClass(editorClass).appendTo(wrapper).nfeditor({
+                                languageId: languageId,
+                                width: cellNode.width(),
+                                content: property.value,
+                                minWidth: 175,
+                                minHeight: 100,
+                                readOnly: true,
+                                resizable: true,
+                                escape: function () {
+                                    cleanUp();
+                                }
+                            });
+                        } else {
+                          wrapper.css({
+                              'z-index': 1999,
+                              'position': 'absolute',
+                              'padding': '10px 20px',
+                              'overflow': 'hidden',
+                              'border-radius': '2px',
+                              'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
+                              'background-color': 'rgb(255, 255, 255)',
+                              'cursor': 'move',
+                              'transform': 'translate3d(0px, 0px, 0px)',
+                              'top': offset.top - 26,
+                              'left': offset.left - 20
+                          });
+    
+                            // create the input field
+                            $('<textarea hidefocus rows="5" readonly="readonly"/>').css({
+                                'height': '80px',
+                              'resize': 'both',
+                                'width': cellNode.width() + 'px',
+                              'margin': '10px 0px',
+                              'white-space': 'pre'
+                            }).text(property.value).on('keydown', function (evt) {
+                                if (evt.which === $.ui.keyCode.ESCAPE) {
+                                    cleanUp();
+    
+                                    evt.stopImmediatePropagation();
+                                    evt.preventDefault();
+                                }
+                            }).appendTo(wrapper);
+    
+                            // prevent dragging over standard components
+                            wrapper.draggable({
+                                containment: 'parent'
+                            });
+                        }
+    
+                        var cleanUp = function () {
+                            // clean up the editor
+                            if (editor !== null) {
+                                editor.nfeditor('destroy');
+                            }
+    
+                            // clean up the rest
+                            wrapper.hide().remove();
+                        };
+    
+                        // add an ok button that will remove the entire pop up
+                      var ok = $('<div class="button">' + nf._.msg('jquery-propertytable.Ok') + '</div>').css({
+                          'position': 'relative',
+                          'top': '10px',
+                          'left': '20px'
+                        }).hover(
+                            function () {
+                                $(this).css('background', '#004849');
+                            }, function () {
+                                $(this).css('background', '#728E9B');
+                            }).on('click', function () {
+                            cleanUp();
+                        });
+    
+                        $('<div></div>').append(ok).append('<div class="clear"></div>').appendTo(wrapper);
                     }
                 }
-            } else {
-                valueMarkup = '<span class="unset">No value set</span>';
-            }
-
-            // format the contents
-            var content = $(valueMarkup);
-            if (dataContext.type === 'required') {
-                content.addClass('required');
             }
-            content.find('.ellipsis').width(columnDef.width - 10).ellipsis();
-
-            // return the appropriate markup
-            return $('<div/>').append(content).html();
         };
-
-        var propertyColumns = [
-            {
-                id: 'property',
-                field: 'displayName',
-                name: 'Property',
-                sortable: false,
-                resizable: true,
-                rerenderOnResize: true,
-                formatter: nameFormatter
-            },
-            {
-                id: 'value',
-                field: 'value',
-                name: 'Value',
-                sortable: false,
-                resizable: true,
-                cssClass: 'pointer',
-                rerenderOnResize: true,
-                formatter: valueFormatter
-            }
-        ];
-
-        // custom formatter for the actions column
-        var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-            var markup = '';
-
-            // get the property descriptor
-            var descriptors = table.data('descriptors');
-            var propertyDescriptor = descriptors[dataContext.property];
-
-            var identifiesControllerService = nfCommon.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService);
-            var isConfigured = nfCommon.isDefinedAndNotNull(dataContext.value);
-
-            // check to see if we should provide a button for going to a controller service
-            if (identifiesControllerService && isConfigured && (options.supportsGoTo === true)) {
-                // ensure the configured value is referencing a valid service
-                $.each(propertyDescriptor.allowableValues, function (_, allowableValueEntity) {
-                    var allowableValue = allowableValueEntity.allowableValue;
-                    if (allowableValue.value === dataContext.value) {
-                        markup += '<div class="pointer go-to-service fa fa-long-arrow-right" title="Go To" style="margin-top: 2px" ></div>';
-                        return false;
-                    }
+    
+        /**
+         * Gets the available controller services that implement the specified type and
+         * prompts the user to create one.
+         *
+         * @param {jQuery} gridContainer The grid container
+         * @param {slickgrid} grid The grid
+         * @param {object} item The item
+         * @param {type} serviceType The type of service to create
+         * @param {object} configurationOptions The configuration options
+         */
+        var promptForNewControllerService = function (gridContainer, grid, item, serviceType, configurationOptions) {
+            $.ajax({
+                type: 'GET',
+                url: '../nifi-api/flow/controller-service-types',
+                data: {
+                    serviceType: serviceType
+                },
+                dataType: 'json'
+            }).done(function (response) {
+                var options = [];
+                $.each(response.controllerServiceTypes, function (i, controllerServiceType) {
+                    options.push({
+                      text: nfCommon.substringAfterLast(controllerServiceType.type, '.'),
+                        value: controllerServiceType.type,
+                      description: nfCommon.escapeHtml(controllerServiceType.description)
+                    });
                 });
-            }
-
-            // allow user defined properties to be removed
-            if (options.readOnly !== true && dataContext.type === 'userDefined') {
-                markup += '<div title="Delete" class="delete-property pointer fa fa-trash" style="margin-top: 2px" ></div>';
-            }
-
-            return markup;
-        };
-        propertyColumns.push({id: "actions", name: "&nbsp;", minWidth: 20, width: 20, formatter: actionFormatter});
-
-        var propertyConfigurationOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            editable: options.readOnly !== true,
-            enableAddRow: false,
-            autoEdit: false,
-            rowHeight: 24
-        };
-
-        // initialize the dataview
-        var propertyData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        propertyData.setItems([]);
-        propertyData.setFilterArgs({
-            searchString: '',
-            property: 'hidden'
-        });
-        propertyData.setFilter(filter);
-        propertyData.getItemMetadata = function (index) {
-            var item = propertyData.getItem(index);
-
-            // get the property descriptor
-            var descriptors = table.data('descriptors');
-            var propertyDescriptor = descriptors[item.property];
-
-            // support el if specified or unsure yet (likely a dynamic property)
-            if (nfCommon.isUndefinedOrNull(propertyDescriptor) || nfCommon.supportsEl(propertyDescriptor)) {
-                return {
-                    columns: {
-                        value: {
-                            editor: nfelEditor
+    
+                // ensure there are some applicable controller services
+                if (options.length === 0) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('jquery-propertytable.ControllerService'),
+                      dialogContent: nf._.msg('jquery-propertytable.Message2')
+                    });
+                } else {
+                    var newControllerServiceDialogMarkup =
+                        '<div id="new-inline-controller-service-dialog" class="hidden dialog medium-dialog cancellable">' +
+                        '<div class="dialog-content">' +
+                        '<div>' +
+                        '<div class="setting-name">Controller Service</div>' +
+                        '<div class="setting-field">' +
+                        '<div class="new-inline-controller-service-combo"></div>' +
+                        '</div>' +
+                        '</div>' +
+                        '<div>' +
+                                  '<div class="setting-name">' + nf._.msg('jquery-propertytable.Tags') + '</div>' +
+                        '<div class="setting-field">' +
+                        '<div class="new-inline-controller-service-tags"></div>' +
+                        '</div>' +
+                        '</div>' +
+                        '<div>' +
+                                  '<div class="setting-name">' + nf._.msg('jquery-propertytable.Description') + '</div>' +
+                        '<div class="setting-field">' +
+                        '<div class="new-inline-controller-service-description"></div>' +
+                        '</div>' +
+                        '</div>' +
+                        '</div>' +
+                        '</div>';
+    
+                    var newControllerServiceDialog = $(newControllerServiceDialogMarkup).appendTo(configurationOptions.dialogContainer);
+                    var newControllerServiceCombo = newControllerServiceDialog.find('div.new-inline-controller-service-combo');
+                    var newControllerServiceTags = newControllerServiceDialog.find('div.new-inline-controller-service-tags');
+                    var newControllerServiceDescription = newControllerServiceDialog.find('div.new-inline-controller-service-description');
+    
+                    // build the combo field
+                    newControllerServiceCombo.combo({
+                        options: options,
+                        select: function (option) {
+                            var service;
+                            $.each(response.controllerServiceTypes, function (i, controllerServiceType) {
+                                if (controllerServiceType.type === option.value) {
+                                    service = controllerServiceType;
+                                    return false;
+                                }
+                            });
+    
+                            // set the service details
+                            newControllerServiceTags.text(service.tags.join(', ')).ellipsis();
+                            newControllerServiceDescription.text(service.description);
                         }
-                    }
-                };
-            } else {
-                // check for allowable values which will drive which editor to use
-                var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
-                if ($.isArray(allowableValues)) {
-                    return {
-                        columns: {
-                            value: {
-                                editor: comboEditor
+                    });
+    
+                    newControllerServiceDialog.modal({
+                      headerText: nf._.msg('jquery-propertytable.AddControllerService'),
+                        scrollableContentStyle: 'scrollable',
+                        buttons: [{
+                          buttonText: nf._.msg('jquery-propertytable.Create'),
+                            color: {
+                                base: '#728E9B',
+                                hover: '#004849',
+                                text: '#ffffff'
+                            },
+                            handler: {
+                                click: function () {
+                                    create();
+                                }
+                            }
+                        },
+                            {
+                              buttonText: nf._.msg('jquery-propertytable.Cancel'),
+                                color: {
+                                    base: '#E3E8EB',
+                                    hover: '#C7D2D7',
+                                    text: '#004849'
+                                },
+                                handler: {
+                                    click: function () {
+                                        cancel();
+                                    }
+                                }
+                            }]
+                    });
+    
+                    var create = function () {
+                        var newControllerServiceType = newControllerServiceCombo.combo('getSelectedOption').value;
+    
+                        // build the controller service entity
+                        var controllerServiceEntity = {
+                          'revision': nfClient.getRevision({
+                                'revision': {
+                                    'version': 0,
+                                }
+                            }),
+                            'component': {
+                                'type': newControllerServiceType
                             }
+                        };
+    
+                        // determine the appropriate uri for creating the controller service
+                        var uri = '../nifi-api/controller/controller-services';
+                      if (nfCommon.isDefinedAndNotNull(groupId)) {
+                            uri = '../nifi-api/process-groups/' + encodeURIComponent(groupId) + '/controller-services';
                         }
+    
+                        // add the new controller service
+                        $.ajax({
+                            type: 'POST',
+                            url: uri,
+                            data: JSON.stringify(controllerServiceEntity),
+                            dataType: 'json',
+                            contentType: 'application/json'
+                        }).done(function (response) {
+                            // load the descriptor and update the property
+                            configurationOptions.descriptorDeferred(item.property).done(function (descriptorResponse) {
+                                var descriptor = descriptorResponse.propertyDescriptor;
+    
+                                // store the descriptor for use later
+                                var descriptors = gridContainer.data('descriptors');
+                              if (!nfCommon.isUndefined(descriptors)) {
+                                    descriptors[descriptor.name] = descriptor;
+                                }
+    
+                                // add a row for the new property
+                                var data = grid.getData();
+                                data.updateItem(item.id, $.extend(item, {
+                                    value: response.component.id
+                                }));
+    
+                                // close the dialog
+                                newControllerServiceDialog.modal('hide');
+                            });
+    
+                          // invoke callback if necessary
+                          if (typeof configurationOptions.controllerServiceCreatedDeferred === 'function') {
+                              configurationOptions.controllerServiceCreatedDeferred(response);
+                          }
+                      }).fail(nfErrorHandler.handleAjaxError);
                     };
-                } else {
+    
+                    var cancel = function () {
+                        newControllerServiceDialog.modal('hide');
+                    };
+    
+                    newControllerServiceDialog.modal('show');
+                }
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        var initPropertiesTable = function (table, options) {
+            // function for formatting the property name
+            var nameFormatter = function (row, cell, value, columnDef, dataContext) {
+                var nameWidthOffset = 30;
+                var cellContent = $('<div></div>');
+    
+                // format the contents
+                var formattedValue = $('<span/>').addClass('table-cell').text(value).appendTo(cellContent);
+                if (dataContext.type === 'required') {
+                    formattedValue.addClass('required');
+                }
+    
+                // get the property descriptor
+                var descriptors = table.data('descriptors');
+                var propertyDescriptor = descriptors[dataContext.property];
+    
+                // show the property description if applicable
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                  if (!nfCommon.isBlank(propertyDescriptor.description) || !nfCommon.isBlank(propertyDescriptor.defaultValue) || !nfCommon.isBlank(propertyDescriptor.supportsEl)) {
+                        $('<div class="fa fa-question-circle" alt="Info" style="float: right; margin-right: 6px; margin-top: 4px;"></div>').appendTo(cellContent);
+                        $('<span class="hidden property-descriptor-name"></span>').text(dataContext.property).appendTo(cellContent);
+                        nameWidthOffset = 46; // 10 + icon width (10) + icon margin (6) + padding (20)
+                    }
+                }
+    
+                // adjust the width accordingly
+                formattedValue.width(columnDef.width - nameWidthOffset).ellipsis();
+    
+                // return the cell content
+                return cellContent.html();
+            };
+    
+            // function for formatting the property value
+            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
+                var valueMarkup;
+              if (nfCommon.isDefinedAndNotNull(value)) {
+                    // get the property descriptor
+                    var descriptors = table.data('descriptors');
+                    var propertyDescriptor = descriptors[dataContext.property];
+    
+                    // determine if the property is sensitive
+                  if (nfCommon.isSensitiveProperty(propertyDescriptor)) {
+                      valueMarkup = '<span class="table-cell sensitive">' + nf._.msg('jquery-propertytable.SensitiveValueSet') + '</span>';
+                    } else {
+                        // if there are allowable values, attempt to swap out for the display name
+                      var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
+                        if ($.isArray(allowableValues)) {
+                            $.each(allowableValues, function (_, allowableValueEntity) {
+                                var allowableValue = allowableValueEntity.allowableValue;
+                                if (value === allowableValue.value) {
+                                    value = allowableValue.displayName;
+                                    return false;
+                                }
+                            });
+                        }
+    
+                        if (value === '') {
+                          valueMarkup = '<span class="table-cell blank">' + nf._.msg('jquery-propertytable.EmptyStringSet') + '</span>';
+                      } else {
+                          valueMarkup = '<div class="table-cell value"><pre class="ellipsis">' + nfCommon.escapeHtml(value) + '</pre></div>';
+                      }
+                  }
+              } else {
+                  valueMarkup = '<span class="unset">' + nf._.msg('jquery-propertytable.NoValueSet') + '</span>';
+                }
+    
+                // format the contents
+                var content = $(valueMarkup);
+                if (dataContext.type === 'required') {
+                    content.addClass('required');
+                }
+                content.find('.ellipsis').width(columnDef.width - 10).ellipsis();
+    
+                // return the appropriate markup
+                return $('<div/>').append(content).html();
+            };
+    
+            var propertyColumns = [
+                {
+                    id: 'property',
+                    field: 'displayName',
+                  name: nf._.msg('jquery-propertytable.Property'),
+                    sortable: false,
+                    resizable: true,
+                    rerenderOnResize: true,
+                    formatter: nameFormatter
+                },
+                {
+                    id: 'value',
+                    field: 'value',
+                  name: nf._.msg('jquery-propertytable.Value'),
+                    sortable: false,
+                    resizable: true,
+                    cssClass: 'pointer',
+                    rerenderOnResize: true,
+                    formatter: valueFormatter
+                }
+            ];
+    
+            // custom formatter for the actions column
+            var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+    
+                // get the property descriptor
+                var descriptors = table.data('descriptors');
+                var propertyDescriptor = descriptors[dataContext.property];
+    
+              var identifiesControllerService = nfCommon.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService);
+              var isConfigured = nfCommon.isDefinedAndNotNull(dataContext.value);
+    
+                // check to see if we should provide a button for going to a controller service
+              if (identifiesControllerService && isConfigured && (options.supportsGoTo === true)) {
+                    // ensure the configured value is referencing a valid service
+                    $.each(propertyDescriptor.allowableValues, function (_, allowableValueEntity) {
+                        var allowableValue = allowableValueEntity.allowableValue;
+                        if (allowableValue.value === dataContext.value) {
+                          markup += '<div class="pointer go-to-service fa fa-long-arrow-right" title="' + nf._.msg('jquery-propertytable.GoTo') + '" style="margin-top: 2px" ></div>';
+                            return false;
+                        }
+                    });
+                }
+    
+                // allow user defined properties to be removed
+                if (options.readOnly !== true && dataContext.type === 'userDefined') {
+                  markup += '<div title="' + nf._.msg('jquery-propertytable.Delete') + '" class="delete-property pointer fa fa-trash" style="margin-top: 2px" ></div>';
+                }
+    
+                return markup;
+            };
+            propertyColumns.push({id: "actions", name: "&nbsp;", minWidth: 20, width: 20, formatter: actionFormatter});
+    
+            var propertyConfigurationOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                editable: options.readOnly !== true,
+                enableAddRow: false,
+                autoEdit: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var propertyData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            propertyData.setItems([]);
+            propertyData.setFilterArgs({
+                searchString: '',
+                property: 'hidden'
+            });
+            propertyData.setFilter(filter);
+            propertyData.getItemMetadata = function (index) {
+                var item = propertyData.getItem(index);
+    
+                // get the property descriptor
+                var descriptors = table.data('descriptors');
+                var propertyDescriptor = descriptors[item.property];
+    
+                // support el if specified or unsure yet (likely a dynamic property)
+              if (nfCommon.isUndefinedOrNull(propertyDescriptor) || nfCommon.supportsEl(propertyDescriptor)) {
                     return {
                         columns: {
                             value: {
-                                editor: textEditor
+                                editor: nfelEditor
                             }
                         }
                     };
-                }
-            }
-        };
-
-        var goToControllerService = function (property) {
-            $.ajax({
-                type: 'GET',
-                url: '../nifi-api/controller-services/' + encodeURIComponent(property.value),
-                dataType: 'json'
-            }).done(function (controllerServiceEntity) {
-                // close the dialog
-                var dialog = table.closest('.dialog');
-                if (dialog.hasClass('modal')) {
-                    dialog.modal('hide');
                 } else {
-                    dialog.hide();
+                    // check for allowable values which will drive which editor to use
+                  var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
+                    if ($.isArray(allowableValues)) {
+                        return {
+                            columns: {
+                                value: {
+                                    editor: comboEditor
+                                }
+                            }
+                        };
+                    } else {
+                        return {
+                            columns: {
+                                value: {
+                                    editor: textEditor
+                                }
+                            }
+                        };
+                    }
                 }
-
-                var controllerService = controllerServiceEntity.component;
-                $.Deferred(function (deferred) {
-                    if (nfCommon.isDefinedAndNotNull(controllerService.parentGroupId)) {
-                        if ($('#process-group-configuration').is(':visible')) {
-                            nfProcessGroupConfiguration.loadConfiguration(controllerService.parentGroupId).done(function () {
-                                deferred.resolve();
-                            });
+            };
+    
+            var goToControllerService = function (property) {
+                $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/controller-services/' + encodeURIComponent(property.value),
+                    dataType: 'json'
+                }).done(function (controllerServiceEntity) {
+                    // close the dialog
+                    var dialog = table.closest('.dialog');
+                    if (dialog.hasClass('modal')) {
+                        dialog.modal('hide');
+                    } else {
+                        dialog.hide();
+                    }
+    
+                    var controllerService = controllerServiceEntity.component;
+                    $.Deferred(function (deferred) {
+                      if (nfCommon.isDefinedAndNotNull(controllerService.parentGroupId)) {
+                            if ($('#process-group-configuration').is(':visible')) {
+                              nfProcessGroupConfiguration.loadConfiguration(controllerService.parentGroupId).done(function () {
+                                    deferred.resolve();
+                                });
+                            } else {
+                              nfProcessGroupConfiguration.showConfiguration(controllerService.parentGroupId).done(function () {
+                                    deferred.resolve();
+                                });
+                            }
                         } else {
-                            nfProcessGroupConfiguration.showConfiguration(controllerService.parentGroupId).done(function () {
-                                deferred.resolve();
-                            });
+                            if ($('#settings').is(':visible')) {
+                                // reload the settings
+                              nfSettings.loadSettings().done(function () {
+                                    deferred.resolve();
+                                });
+                            } else {
+                                // reload the settings and show
+                              nfSettings.showSettings().done(function () {
+                                    deferred.resolve();
+                                });
+                            }
                         }
-                    } else {
-                        if ($('#settings').is(':visible')) {
-                            // reload the settings
-                            nfSettings.loadSettings().done(function () {
-                                deferred.resolve();
-                            });
+                    }).done(function () {
+                      if (nfCommon.isDefinedAndNotNull(controllerService.parentGroupId)) {
+                          nfProcessGroupConfiguration.selectControllerService(property.value);
                         } else {
-                            // reload the settings and show
-                            nfSettings.showSettings().done(function () {
-                                deferred.resolve();
-                            });
+                          nfSettings.selectControllerService(property.value);
                         }
-                    }
-                }).done(function () {
-                    if (nfCommon.isDefinedAndNotNull(controllerService.parentGroupId)) {
-                        nfProcessGroupConfiguration.selectControllerService(property.value);
+                    });
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            // initialize the grid
+            var propertyGrid = new Slick.Grid(table, propertyData, propertyColumns, propertyConfigurationOptions);
+            propertyGrid.setSelectionModel(new Slick.RowSelectionModel());
+            propertyGrid.onClick.subscribe(function (e, args) {
+                if (propertyGrid.getColumns()[args.cell].id === 'value') {
+                    if (options.readOnly === true) {
+                        var descriptors = table.data('descriptors');
+                        showPropertyValue(propertyGrid, descriptors, args.row, args.cell);
                     } else {
-                        nfSettings.selectControllerService(property.value);
+                        // edits the clicked cell
+                        propertyGrid.gotoCell(args.row, args.cell, true);
                     }
-                });
-            }).fail(nfErrorHandler.handleAjaxError);
-        };
-
-        // initialize the grid
-        var propertyGrid = new Slick.Grid(table, propertyData, propertyColumns, propertyConfigurationOptions);
-        propertyGrid.setSelectionModel(new Slick.RowSelectionModel());
-        propertyGrid.onClick.subscribe(function (e, args) {
-            if (propertyGrid.getColumns()[args.cell].id === 'value') {
-                if (options.readOnly === true) {
-                    var descriptors = table.data('descriptors');
-                    showPropertyValue(propertyGrid, descriptors, args.row, args.cell);
-                } else {
-                    // edits the clicked cell
-                    propertyGrid.gotoCell(args.row, args.cell, true);
-                }
-
-                // prevents standard edit logic
-                e.stopImmediatePropagation();
-            } else if (propertyGrid.getColumns()[args.cell].id === 'actions') {
-                var property = propertyData.getItem(args.row);
-
-                var target = $(e.target);
-                if (target.hasClass('delete-property')) {
-                    // mark the property in question for removal and refresh the table
-                    propertyData.updateItem(property.id, $.extend(property, {
-                        hidden: true
-                    }));
-
+    
                     // prevents standard edit logic
                     e.stopImmediatePropagation();
-                } else if (target.hasClass('go-to-service')) {
-                    if (options.readOnly === true) {
-                        goToControllerService(property);
-                    } else {
-                        // load the property descriptor if possible
-                        if (typeof options.goToServiceDeferred === 'function') {
-                            options.goToServiceDeferred().done(function () {
-                                goToControllerService(property);
-                            });
+                } else if (propertyGrid.getColumns()[args.cell].id === 'actions') {
+                    var property = propertyData.getItem(args.row);
+    
+                    var target = $(e.target);
+                    if (target.hasClass('delete-property')) {
+                        // mark the property in question for removal and refresh the table
+                        propertyData.updateItem(property.id, $.extend(property, {
+                            hidden: true
+                        }));
+    
+                        // prevents standard edit logic
+                        e.stopImmediatePropagation();
+                    } else if (target.hasClass('go-to-service')) {
+                        if (options.readOnly === true) {
+                            goToControllerService(property);
+                        } else {
+                            // load the property descriptor if possible
+                            if (typeof options.goToServiceDeferred === 'function') {
+                                options.goToServiceDeferred().done(function () {
+                                    goToControllerService(property);
+                                });
+                            }
                         }
                     }
                 }
-            }
-        });
-        propertyGrid.onKeyDown.subscribe(function (e, args) {
-            if (e.which === $.ui.keyCode.ESCAPE) {
-                var editorLock = propertyGrid.getEditorLock();
-                if (editorLock.isActive()) {
-                    editorLock.cancelCurrentEdit();
-
-                    // prevents standard cancel logic - standard logic does
-                    // not stop propagation when escape is pressed
-                    e.stopImmediatePropagation();
-                    e.preventDefault();
-                }
-            }
-        });
-
-        // wire up the dataview to the grid
-        propertyData.onRowCountChanged.subscribe(function (e, args) {
-            propertyGrid.updateRowCount();
-            propertyGrid.render();
-        });
-        propertyData.onRowsChanged.subscribe(function (e, args) {
-            propertyGrid.invalidateRows(args.rows);
-            propertyGrid.render();
-        });
-
-        // hold onto an instance of the grid and listen for mouse events to add tooltips where appropriate
-        table.data('gridInstance', propertyGrid).on('mouseenter', 'div.slick-cell', function (e) {
-            var infoIcon = $(this).find('div.fa-question-circle');
-            if (infoIcon.length && !infoIcon.data('qtip')) {
-                var property = $(this).find('span.property-descriptor-name').text();
-
-                // get the property descriptor
-                var descriptors = table.data('descriptors');
-                var propertyDescriptor = descriptors[property];
-
-                // get the history
-                var history = table.data('history');
-                var propertyHistory = history[property];
-
-                // format the tooltip
-                var tooltip = nfCommon.formatPropertyTooltip(propertyDescriptor, propertyHistory);
-
-                if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                    infoIcon.qtip($.extend({},
-                        nfCommon.config.tooltipConfig,
-                        {
-                            content: tooltip
-                        }));
-                }
-            }
-        });
-    };
-
-    var saveRow = function (table) {
-        // get the property grid to commit the current edit
-        var propertyGrid = table.data('gridInstance');
-        if (nfCommon.isDefinedAndNotNull(propertyGrid)) {
-            var editController = propertyGrid.getEditController();
-            editController.commitCurrentEdit();
-        }
-    };
-
-    /**
-     * Performs the filtering.
-     *
-     * @param {object} item     The item subject to filtering
-     * @param {object} args     Filter arguments
-     * @returns {Boolean}       Whether or not to include the item
-     */
-    var filter = function (item, args) {
-        return item.hidden === false;
-    };
-
-    /**
-     * Loads the specified properties.
-     *
-     * @param {type} table
-     * @param {type} properties
-     * @param {type} descriptors
-     * @param {type} history
-     */
-    var loadProperties = function (table, properties, descriptors, history) {
-        // save the descriptors and history
-        table.data({
-            'descriptors': descriptors,
-            'history': history
-        });
-
-        // get the grid
-        var propertyGrid = table.data('gridInstance');
-        var propertyData = propertyGrid.getData();
-
-        // generate the properties
-        if (nfCommon.isDefinedAndNotNull(properties)) {
-            propertyData.beginUpdate();
-
-            var i = 0;
-            $.each(properties, function (name, value) {
-                // get the property descriptor
-                var descriptor = descriptors[name];
-
-                // determine the property type
-                var type = 'userDefined';
-                var displayName = name;
-                if (nfCommon.isDefinedAndNotNull(descriptor)) {
-                    if (nfCommon.isRequiredProperty(descriptor)) {
-                        type = 'required';
-                    } else if (nfCommon.isDynamicProperty(descriptor)) {
-                        type = 'userDefined';
-                    } else {
-                        type = 'optional';
+            });
+            propertyGrid.onKeyDown.subscribe(function (e, args) {
+                if (e.which === $.ui.keyCode.ESCAPE) {
+                    var editorLock = propertyGrid.getEditorLock();
+                    if (editorLock.isActive()) {
+                        editorLock.cancelCurrentEdit();
+    
+                        // prevents standard cancel logic - standard logic does
+                        // not stop propagation when escape is pressed
+                        e.stopImmediatePropagation();
+                        e.preventDefault();
                     }
-
-                    // use the display name if possible
-                    displayName = descriptor.displayName;
-
-                    // determine the value
-                    if (nfCommon.isNull(value) && nfCommon.isDefinedAndNotNull(descriptor.defaultValue)) {
-                        value = descriptor.defaultValue;
+                }
+            });
+    
+            // wire up the dataview to the grid
+            propertyData.onRowCountChanged.subscribe(function (e, args) {
+                propertyGrid.updateRowCount();
+                propertyGrid.render();
+            });
+            propertyData.onRowsChanged.subscribe(function (e, args) {
+                propertyGrid.invalidateRows(args.rows);
+                propertyGrid.render();
+            });
+    
+            // hold onto an instance of the grid and listen for mouse events to add tooltips where appropriate
+            table.data('gridInstance', propertyGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var infoIcon = $(this).find('div.fa-question-circle');
+                if (infoIcon.length && !infoIcon.data('qtip')) {
+                    var property = $(this).find('span.property-descriptor-name').text();
+    
+                    // get the property descriptor
+                    var descriptors = table.data('descriptors');
+                    var propertyDescriptor = descriptors[property];
+    
+                    // get the history
+                    var history = table.data('history');
+                    var propertyHistory = history[property];
+    
+                    // format the tooltip
+                  var tooltip = nfCommon.formatPropertyTooltip(propertyDescriptor, propertyHistory);
+    
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                        infoIcon.qtip($.extend({},
+                          nfCommon.config.tooltipConfig,
+                            {
+                                content: tooltip
+                            }));
                     }
                 }
-
-                // add the row
-                propertyData.addItem({
-                    id: i++,
-                    hidden: false,
-                    property: name,
-                    displayName: displayName,
-                    previousValue: value,
-                    value: value,
-                    type: type
-                });
             });
-
-            propertyData.endUpdate();
-        }
-    };
-
-    /**
-     * Clears the property table container.
-     *
-     * @param {jQuery} propertyTableContainer
-     */
-    var clear = function (propertyTableContainer) {
-        var options = propertyTableContainer.data('options');
-        if (options.readOnly === true) {
-            nfUniversalCapture.removeAllPropertyDetailDialogs();
-        } else {
-            // clear any existing new property dialogs
-            if (nfCommon.isDefinedAndNotNull(options.dialogContainer)) {
-                $('#new-property-dialog').modal("hide");
+        };
+    
+        var saveRow = function (table) {
+            // get the property grid to commit the current edit
+            var propertyGrid = table.data('gridInstance');
+          if (nfCommon.isDefinedAndNotNull(propertyGrid)) {
+                var editController = propertyGrid.getEditController();
+                editController.commitCurrentEdit();
             }
-        }
-
-        // clean up data
-        var table = propertyTableContainer.find('div.property-table');
-        table.removeData('descriptors history');
-
-        // clean up any tooltips that may have been generated
-        nfCommon.cleanUpTooltips(table, 'div.fa-question-circle');
-
-        // clear the data in the grid
-        var propertyGrid = table.data('gridInstance');
-        var propertyData = propertyGrid.getData();
-        propertyData.setItems([]);
-    };
-
-    var methods = {
+        };
+    
         /**
-         * Create a property table. The options are specified in the following
-         * format:
+         * Performs the filtering.
          *
-         * {
-         *   readOnly: true,
-         *   dialogContainer: 'body',
-         *   descriptorDeferred: function () {
-         *      return $.Deferred(function (deferred) {
-         *          deferred.resolve();
-         *      }).promise;
-         *   },
-         *   supportsGoTo: true,
-         *   goToServiceDeferred: function () {
-         *      return $.Deferred(function (deferred) {
-         *          deferred.resolve();
-         *      }).promise;
-         *   }
-         * }
+         * @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) {
+            return item.hidden === false;
+        };
+    
+        /**
+         * Loads the specified properties.
          *
-         * @argument {object} options The options for the tag cloud
+         * @param {type} table
+         * @param {type} properties
+         * @param {type} descriptors
+         * @param {type} history
          */
-        init: function (options) {
-            return this.each(function () {
-                // ensure the options have been properly specified
-                if (nfCommon.isDefinedAndNotNull(options)) {
-                    // get the tag cloud
-                    var propertyTableContainer = $(this);
-
-                    // clear any current contents, remote events, and store options
-                    propertyTableContainer.empty().unbind().addClass('property-container').data('options', options);
-
-                    // build the component
-                    var header = $('<div class="properties-header"></div>').appendTo(propertyTableContainer);
-                    $('<div class="required-property-note">Required field</div>').appendTo(header);
-
-                    // build the table
-                    var table = $('<div class="property-table"></div>').appendTo(propertyTableContainer);
-
-                    // optionally add a add new property button
-                    if (options.readOnly !== true && nfCommon.isDefinedAndNotNull(options.dialogContainer)) {
-                        // build the new property dialog
-                        var newPropertyDialogMarkup =
-                            '<div id="new-property-dialog" class="dialog cancellable small-dialog hidden">' +
-                            '<div class="dialog-content">' +
-                            '<div>' +
-                            '<div class="setting-name">Property name</div>' +
-                            '<div class="setting-field new-property-name-container">' +
-                            '<input class="new-property-name" type="text"/>' +
-                            '</div>' +
-                            '</div>' +
-                            '</div>' +
-                            '</div>';
-
-                        var newPropertyDialog = $(newPropertyDialogMarkup).appendTo(options.dialogContainer);
-                        var newPropertyNameField = newPropertyDialog.find('input.new-property-name');
-
-                        newPropertyDialog.modal({
-                            headerText: 'Add Property',
-                            scrollableContentStyle: 'scrollable',
-                            buttons: [{
-                                buttonText: 'Ok',
-                                color: {
-                                    base: '#728E9B',
-                                    hover: '#004849',
-                                    text: '#ffffff'
-                                },
-                                handler: {
-                                    click: function () {
-                                        add();
-                                    }
-                                }
-                            },
-                                {
-                                    buttonText: 'Cancel',
+        var loadProperties = function (table, properties, descriptors, history) {
+            // save the descriptors and history
+            table.data({
+                'descriptors': descriptors,
+                'history': history
+            });
+    
+            // get the grid
+            var propertyGrid = table.data('gridInstance');
+            var propertyData = propertyGrid.getData();
+    
+            // generate the properties
+          if (nfCommon.isDefinedAndNotNull(properties)) {
+                propertyData.beginUpdate();
+    
+                var i = 0;
+                $.each(properties, function (name, value) {
+                    // get the property descriptor
+                    var descriptor = descriptors[name];
+    
+                    // determine the property type
+                    var type = 'userDefined';
+                    var displayName = name;
+                  if (nfCommon.isDefinedAndNotNull(descriptor)) {
+                      if (nfCommon.isRequiredProperty(descriptor)) {
+                            type = 'required';
+                      } else if (nfCommon.isDynamicProperty(descriptor)) {
+                            type = 'userDefined';
+                        } else {
+                            type = 'optional';
+                        }
+    
+                        // use the display name if possible
+                        displayName = descriptor.displayName;
+    
+                        // determine the value
+                      if (nfCommon.isNull(value) && nfCommon.isDefinedAndNotNull(descriptor.defaultValue)) {
+                            value = descriptor.defaultValue;
+                        }
+                    }
+    
+                    // add the row
+                    propertyData.addItem({
+                        id: i++,
+                        hidden: false,
+                        property: name,
+                        displayName: displayName,
+                        previousValue: value,
+                        value: value,
+                        type: type
+                    });
+                });
+    
+                propertyData.endUpdate();
+            }
+        };
+    
+        /**
+         * Clears the property table container.
+         *
+         * @param {jQuery} propertyTableContainer
+         */
+        var clear = function (propertyTableContainer) {
+            var options = propertyTableContainer.data('options');
+            if (options.readOnly === true) {
+              nfUniversalCapture.removeAllPropertyDetailDialogs();
+            } else {
+                // clear any existing new property dialogs
+              if (nfCommon.isDefinedAndNotNull(options.dialogContainer)) {
+                    $('#new-property-dialog').modal("hide");
+                }
+            }
+    
+            // clean up data
+            var table = propertyTableContainer.find('div.property-table');
+            table.removeData('descriptors history');
+    
+            // clean up any tooltips that may have been generated
+          nfCommon.cleanUpTooltips(table, 'div.fa-question-circle');
+    
+            // clear the data in the grid
+            var propertyGrid = table.data('gridInstance');
+            var propertyData = propertyGrid.getData();
+            propertyData.setItems([]);
+        };
+    
+        var methods = {
+          /**
+           * 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 (nfCommon.isDefinedAndNotNull(options)) {
+                        // get the tag cloud
+                        var propertyTableContainer = $(this);
+    
+                        // clear any current contents, remote events, and store options
+                        propertyTableContainer.empty().unbind().addClass('property-container').data('options', options);
+    
+                        // build the component
+                        var header = $('<div class="properties-header"></div>').appendTo(propertyTableContainer);
+                      $('<div class="required-property-note">' + nf._.msg('jquery-propertytable.RequiredField') + '</div>').appendTo(header);
+    
+                        // build the table
+                        var table = $('<div class="property-table"></div>').appendTo(propertyTableContainer);
+    
+                        // optionally add a add new property button
+                      if (options.readOnly !== true && nfCommon.isDefinedAndNotNull(options.dialogContainer)) {
+                            // build the new property dialog
+                            var newPropertyDialogMarkup =
+                                '<div id="new-property-dialog" class="dialog cancellable small-dialog hidden">' +
+                                '<div class="dialog-content">' +
+                                '<div>' +
+                                          '<div class="setting-name">' + nf._.msg('jquery-propertytable.PropertyName') + '</div>' +
+                                '<div class="setting-field new-property-name-container">' +
+                                '<input class="new-property-name" type="text"/>' +
+                                '</div>' +
+                                '</div>' +
+                                '</div>' +
+                                '</div>';
+    
+                            var newPropertyDialog = $(newPropertyDialogMarkup).appendTo(options.dialogContainer);
+                            var newPropertyNameField = newPropertyDialog.find('input.new-property-name');
+    
+                            newPropertyDialog.modal({
+                              headerText: nf._.msg('jquery-propertytable.AddProperty'),
+                                scrollableContentStyle: 'scrollable',
+                                buttons: [{
+                                  buttonText: nf._.msg('jquery-propertytable.Ok'),
                                     color: {
-                                        base: '#E3E8EB',
-                                        hover: '#C7D2D7',
-                                        text: '#004849'
+                                        base: '#728E9B',
+                                        hover: '#004849',
+                                        text: '#ffffff'
                                     },
                                     handler: {
                                         click: function () {
-                                            cancel();
+                                            add();
                                         }
                                     }
-                                }]
-                        });
-
-                        var add = function () {
-                            var propertyName = $.trim(newPropertyNameField.val());
-
-                            // ensure the property name is specified
-                            if (propertyName !== '') {
-                                var propertyGrid = table.data('gridInstance');
-                                var propertyData = propertyGrid.getData();
-
-                                // ensure the property name is unique
-                                var existingItem = null;
-                                $.each(propertyData.getItems(), function (_, item) {
-                                    if (propertyName === item.property) {
-                                        existingItem = item;
-                                        return false;
-                                    }
-                                });
-
-                                if (existingItem === null) {
-                                    // load the descriptor and add the property
-                                    options.descriptorDeferred(propertyName).done(function (response) {
-                                        var descriptor = response.propertyDescriptor;
-
-                                        // store the descriptor for use later
-                                        var descriptors = table.data('descriptors');
-                                        if (!nfCommon.isUndefined(descriptors)) {
-                                            descriptors[descriptor.name] = descriptor;
+                                },
+                                    {
+                                      buttonText: nf._.msg('jquery-propertytable.Cancel'),
+                                        color: {
+                                            base: '#E3E8EB',
+                                            hover: '#C7D2D7',
+                                            text: '#004849'
+                                        },
+                                        handler: {
+                                            click: function () {
+                                                cancel();
+                                            }
+                                        }
+                                    }]
+                            });
+    
+                            var add = function () {
+                                var propertyName = $.trim(newPropertyNameField.val());
+    
+                                // ensure the property name is specified
+                                if (propertyName !== '') {
+                                    var propertyGrid = table.data('gridInstance');
+                                    var propertyData = propertyGrid.getData();
+    
+                                    // ensure the property name is unique
+                                    var existingItem = null;
+                                    $.each(propertyData.getItems(), function (_, item) {
+                                        if (propertyName === item.property) {
+                                            existingItem = item;
+                                            return false;
                                         }
-
-                                        // add a row for the new property
-                                        var id = propertyData.getLength();
-                                        propertyData.addItem({
-                                            id: id,
-                                            hidden: false,
-                                            property: propertyName,
-                                            displayName: propertyName,
-                                            previousValue: null,
-                                            value: null,
-                                            type: 'userDefined'
-                                        });
-
-                                        // select the new properties row
-                                        var row = propertyData.getRowById(id);
-                                        propertyGrid.setActiveCell(row, propertyGrid.getColumnIndex('value'));
-                                        propertyGrid.editActiveCell();
                                     });
-                                } else {
-                                    // if this row is currently hidden, clear the value and show it
-                                    if (existingItem.hidden === true) {
-                                        propertyData.updateItem(existingItem.id, $.extend(existingItem, {
-                                            hidden: false,
-                                            previousValue: null,
-                                            value: null
-                                        }));
-
-                                        // select the new properties row
-                                        var row = propertyData.getRowById(existingItem.id);
-                                        propertyGrid.setActiveCell(row, propertyGrid.getColumnIndex('value'));
-                                        propertyGrid.editActiveCell();
-                                    } else {
-                                        nfDialog.showOkDialog({
-                                            headerText: 'Property Exists',
-                                            dialogContent: 'A property with this name already exists.'
+    
+                                    if (existingItem === null) {
+                                        // load the descriptor and add the property
+                                        options.descriptorDeferred(propertyName).done(function (response) {
+                                            var descriptor = response.propertyDescriptor;
+    
+                                            // store the descriptor for use later
+                                            var descriptors = table.data('descriptors');
+                                          if (!nfCommon.isUndefined(descriptors)) {
+                                                descriptors[descriptor.name] = descriptor;
+                                            }
+    
+                                            // add a row for the new property
+                                            var id = propertyData.getLength();
+                                            propertyData.addItem({
+                                                id: id,
+                                                hidden: false,
+                                                property: propertyName,
+                                                displayName: propertyName,
+                                                previousValue: null,
+                                                value: null,
+                                                type: 'userDefined'
+                                            });
+    
+                                            // select the new properties row
+                                            var row = propertyData.getRowById(id);
+                                            propertyGrid.setActiveCell(row, propertyGrid.getColumnIndex('value'));
+                                            propertyGrid.editActiveCell();
                                         });
-
-                                        // select the existing properties row
-                                        var row = propertyData.getRowById(existingItem.id);
-                                        propertyGrid.setSelectedRows([row]);
-                                        propertyGrid.scrollRowIntoView(row);
+                                    } else {
+                                        // if this row is currently hidden, clear the value and show it
+                                        if (existingItem.hidden === true) {
+                                            propertyData.updateItem(existingItem.id, $.extend(existingItem, {
+                                                hidden: false,
+                                                previousValue: null,
+                                                value: null
+                                            }));
+    
+                                            // select the new properties row
+                                            var row = propertyData.getRowById(existingItem.id);
+                                            propertyGrid.setActiveCell(row, propertyGrid.getColumnIndex('value'));
+                                            propertyGrid.editActiveCell();
+                                        } else {
+                                          nfDialog.showOkDialog({
+                                              headerText: nf._.msg('jquery-propertytable.PropertyExists'),
+                                              dialogContent: nf._.msg('jquery-propertytable.Message0')
+                                            });
+    
+                                            // select the existing properties row
+                                            var row = propertyData.getRowById(existingItem.id);
+                                            propertyGrid.setSelectedRows([row]);
+                                            propertyGrid.scrollRowIntoView(row);
+                                        }
                                     }
+                                } else {
+                                  nfDialog.showOkDialog({
+                                      headerText: nf._.msg('jquery-propertytable.PropertyName'),
+                                      dialogContent: nf._.msg('jquery-propertytable.Message1')
+                                    });
                                 }
-                            } else {
-                                nfDialog.showOkDialog({
-                                    headerText: 'Property Name',
-                                    dialogContent: 'Property name must be specified.'
-                                });
-                            }
-
-                            // close the dialog
-                            newPropertyDialog.modal('hide');
-                        };
-
-                        var cancel = function () {
-                            newPropertyDialog.modal('hide');
-                        };
-
-                        // enable enter to add
-                        newPropertyNameField.on('keydown', function (e) {
-                            var code = e.keyCode ? e.keyCode : e.which;
-                            if (code === $.ui.keyCode.ENTER) {
-                                add();
-
-                                // prevents the enter from propagating into the field for editing the new property value
-                                e.stopImmediatePropagation();
-                                e.preventDefault();
-                            }
-                        });
-
-                        newPropertyDialog.on('click', 'div.new-property-ok', add).on('click', 'div.new-property-cancel', cancel);
-
-                        // build the control to open the new property dialog
-                        var addProperty = $('<div class="add-property"></div>').appendTo(header);
-                        $('<button class="button fa fa-plus"></button>').on('click', function () {
-                            // close all fields currently being edited
-                            saveRow(table);
-
-                            // clear the dialog
-                            newPropertyNameField.val('');
-
-                            // open the new property dialog
-                            newPropertyDialog.modal('show');
-
-                            // set the initial focus
-                            newPropertyNameField.focus();
-                        }).appendTo(addProperty);
+    
+                                // close the dialog
+                                newPropertyDialog.modal('hide');
+                            };
+    
+                            var cancel = function () {
+                                newPropertyDialog.modal('hide');
+                            };
+    
+                            // enable enter to add
+                            newPropertyNameField.on('keydown', function (e) {
+                                var code = e.keyCode ? e.keyCode : e.which;
+                                if (code === $.ui.keyCode.ENTER) {
+                                    add();
+    
+                                    // prevents the enter from propagating into the field for editing the new property value
+                                    e.stopImmediatePropagation();
+                                    e.preventDefault();
+                                }
+                            });
+    
+                          newPropertyDialog.on('click', 'div.new-property-ok', add).on('click', 'div.new-property-cancel', cancel);
+    
+                            // build the control to open the new property dialog
+                            var addProperty = $('<div class="add-property"></div>').appendTo(header);
+                            $('<button class="button fa fa-plus"></button>').on('click', function () {
+                                // close all fields currently being edited
+                                saveRow(table);
+    
+                                // clear the dialog
+                                newPropertyNameField.val('');
+    
+                                // open the new property dialog
+                                newPropertyDialog.modal('show');
+    
+                                // set the initial focus
+                                newPropertyNameField.focus();
+                            }).appendTo(addProperty);
+                        }
+                        $('<div class="clear"></div>').appendTo(header);
+    
+                        // initializes the properties table
+                        initPropertiesTable(table, options);
                     }
-                    $('<div class="clear"></div>').appendTo(header);
-
-                    // initializes the properties table
-                    initPropertiesTable(table, options);
-                }
-            });
-        },
-
-        /**
-         * Loads the specified properties.
-         *
-         * @argument {object} properties        The properties
-         * @argument {map} descriptors          The property descriptors (property name -> property descriptor)
-         * @argument {map} history
-         */
-        loadProperties: function (properties, descriptors, history) {
-            return this.each(function () {
-                var table = $(this).find('div.property-table');
-                loadProperties(table, properties, descriptors, history);
-            });
-        },
-
-        /**
-         * Saves the last edited row in the specified grid.
-         */
-        saveRow: function () {
-            return this.each(function () {
-                var table = $(this).find('div.property-table');
-                saveRow(table);
-            });
-        },
-
-        /**
-         * Update the size of the grid based on its container's current size.
-         */
-        resetTableSize: function () {
-            return this.each(function () {
-                var table = $(this).find('div.property-table');
-                var propertyGrid = table.data('gridInstance');
-                if (nfCommon.isDefinedAndNotNull(propertyGrid)) {
-                    propertyGrid.resizeCanvas();
-                }
-            });
-        },
-
-        /**
-         * Cancels the edit in the specified row.
-         */
-        cancelEdit: function () {
-            return this.each(function () {
-                var table = $(this).find('div.property-table');
-                var propertyGrid = table.data('gridInstance');
-                if (nfCommon.isDefinedAndNotNull(propertyGrid)) {
-                    var editController = propertyGrid.getEditController();
-                    editController.cancelCurrentEdit();
-                }
-            });
-        },
-
-        /**
-         * Destroys the property table.
-         */
-        destroy: function () {
-            return this.each(function () {
-                var propertyTableContainer = $(this);
-                var options = propertyTableContainer.data('options');
-
-                if (nfCommon.isDefinedAndNotNull(options)) {
-                    // clear the property table container
-                    clear(propertyTableContainer);
-
-                    // clear any existing new property dialogs
-                    if (nfCommon.isDefinedAndNotNull(options.dialogContainer)) {
-                        $('#new-property-dialog').modal("hide");
-                        $(options.dialogContainer).children('div.new-inline-controller-service-dialog').remove();
+                });
+            },
+    
+            /**
+             * Loads the specified properties.
+             *
+             * @argument {object} properties        The properties
+             * @argument {map} descriptors          The property descriptors (property name  property descriptor)
+             * @argument {map} history
+             */
+            loadProperties: function (properties, descriptors, history) {
+                return this.each(function () {
+                    var table = $(this).find('div.property-table');
+                    loadProperties(table, properties, descriptors, history);
+                });
+            },
+    
+            /**
+             * Saves the last edited row in the specified grid.
+             */
+            saveRow: function () {
+                return this.each(function () {
+                    var table = $(this).find('div.property-table');
+                    saveRow(table);
+                });
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+                return this.each(function () {
+                    var table = $(this).find('div.property-table');
+                    var propertyGrid = table.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(propertyGrid)) {
+                        propertyGrid.resizeCanvas();
                     }
-                }
-            });
-        },
-
-        /**
-         * Clears the property table.
-         */
-        clear: function () {
-            return this.each(function () {
-                clear($(this));
-            });
-        },
-
-        /**
-         * Determines if a save is required for the first matching element.
-         */
-        isSaveRequired: function () {
-            var isSaveRequired = false;
-
-            this.each(function () {
-                // get the property grid
-                var table = $(this).find('div.property-table');
-                var propertyGrid = table.data('gridInstance');
-                var propertyData = propertyGrid.getData();
-
-                // determine if any of the properties have changed
-                $.each(propertyData.getItems(), function () {
-                    if (this.value !== this.previousValue) {
-                        isSaveRequired = true;
-                        return false;
+                });
+            },
+    
+            /**
+             * Cancels the edit in the specified row.
+             */
+            cancelEdit: function () {
+                return this.each(function () {
+                    var table = $(this).find('div.property-table');
+                    var propertyGrid = table.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(propertyGrid)) {
+                        var editController = propertyGrid.getEditController();
+                        editController.cancelCurrentEdit();
                     }
                 });
-
-                return false;
-            });
-
-            return isSaveRequired;
-        },
-
-        /**
-         * Marshalls the properties for the first matching element.
-         */
-        marshalProperties: function () {
-            // properties
-            var properties = {};
-
-            this.each(function () {
-                // get the property grid data
-                var table = $(this).find('div.property-table');
-                var propertyGrid = table.data('gridInstance');
-                var propertyData = propertyGrid.getData();
-                $.each(propertyData.getItems(), function () {
-                    if (this.hidden === true) {
-                        // hidden properties were removed by the user, clear the value
-                        properties[this.property] = null;
-                    } else if (this.value !== this.previousValue) {
-                        // the value has changed
-                        properties[this.property] = this.value;
+            },
+    
+            /**
+             * Destroys the property table.
+             */
+            destroy: function () {
+                return this.each(function () {
+                    var propertyTableContainer = $(this);
+                    var options = propertyTableContainer.data('options');
+    
+                  if (nfCommon.isDefinedAndNotNull(options)) {
+                        // clear the property table container
+                        clear(propertyTableContainer);
+    
+                        // clear any existing new property dialogs
+                      if (nfCommon.isDefinedAndNotNull(options.dialogContainer)) {
+                            $('#new-property-dialog').modal("hide");
+                            $(options.dialogContainer).children('div.new-inline-controller-service-dialog').remove();
+                        }
                     }
                 });
-
-                return false;
-            });
-
-            return properties;
-        },
-
-        /**
-         * Sets the current group id.
-         */
-        setGroupId: function (currentGroupId) {
-            return this.each(function () {
-                groupId = currentGroupId;
-            });
-        }
-    };
-
-    $.fn.propertytable = function (method) {
-        if (methods[method]) {
-            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-        } else {
-            return methods.init.apply(this, arguments);
-        }
-    };
-}));
\ No newline at end of file
+            },
+    
+            /**
+             * Clears the property table.
+             */
+            clear: function () {
+                return this.each(function () {
+                    clear($(this));
+                });
+            },
+    
+            /**
+             * Determines if a save is required for the first matching element.
+             */
+            isSaveRequired: function () {
+                var isSaveRequired = false;
+    
+                this.each(function () {
+                    // get the property grid
+                    var table = $(this).find('div.property-table');
+                    var propertyGrid = table.data('gridInstance');
+                    var propertyData = propertyGrid.getData();
+    
+                    // determine if any of the properties have changed
+                    $.each(propertyData.getItems(), function () {
+                        if (this.value !== this.previousValue) {
+                            isSaveRequired = true;
+                            return false;
+                        }
+                    });
+    
+                    return false;
+                });
+    
+                return isSaveRequired;
+            },
+    
+            /**
+             * Marshalls the properties for the first matching element.
+             */
+            marshalProperties: function () {
+                // properties
+                var properties = {};
+    
+                this.each(function () {
+                    // get the property grid data
+                    var table = $(this).find('div.property-table');
+                    var propertyGrid = table.data('gridInstance');
+                    var propertyData = propertyGrid.getData();
+                    $.each(propertyData.getItems(), function () {
+                        if (this.hidden === true) {
+                            // hidden properties were removed by the user, clear the value
+                            properties[this.property] = null;
+                        } else if (this.value !== this.previousValue) {
+                            // the value has changed
+                            properties[this.property] = this.value;
+                        }
+                    });
+    
+                    return false;
+                });
+    
+                return properties;
+            },
+    
+            /**
+             * Sets the current group id.
+             */
+            setGroupId: function (currentGroupId) {
+                return this.each(function () {
+                    groupId = currentGroupId;
+                });
+            }
+        };
+    
+        $.fn.propertytable = function (method) {
+            if (methods[method]) {
+                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+            } else {
+                return methods.init.apply(this, arguments);
+            }
+        };
+  }));
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 526a64c0a0aa..26e33585c503 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
@@ -1,225 +1,225 @@
-/*
- * 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 */
-
-/**
- * jQuery plugin for a NiFi style tag cloud. The options are specified in the following
- * format:
- *
- * {
- *   tags: ['attributes', 'copy', 'regex', 'xml', 'copy', 'xml', 'attributes'],
- *   select: selectHandler,
- *   remove: removeHandler
- * }
- *
- * @param {type} $
- * @returns {undefined}
- */
-(function ($) {
-
-    var isUndefined = function (obj) {
-        return typeof obj === 'undefined';
-    };
-
-    var isNull = function (obj) {
-        return obj === null;
-    };
-
-    var isDefinedAndNotNull = function (obj) {
-        return !isUndefined(obj) && !isNull(obj);
-    };
-
-    var isBlank = function (str) {
-        return isUndefined(str) || isNull(str) || str === '';
-    };
-
-    var config = {
-        maxTags: 25,
-        maxTagFontSize: 2,
-        minTagFontSize: 1,
-        minWidth: 20
-    };
-
+    /*
+     * 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 */
+    
     /**
-     * Adds the specified tag filter.
+     * jQuery plugin for a NiFi style tag cloud. The options are specified in the following
+     * format:
      *
-     * @argument {jQuery} cloudContainer    The tag cloud container
-     * @argument {string} tag               The tag to add
+     * {
+     *   tags: ['attributes', 'copy', 'regex', 'xml', 'copy', 'xml', 'attributes'],
+     *   select: selectHandler,
+     *   remove: removeHandler
+     * }
+     *
+     * @param {type} $
+     * @returns {undefined}
      */
-    var addTagFilter = function (cloudContainer, tag) {
-        var config = cloudContainer.data('options');
-        var tagFilter = cloudContainer.find('ul.tag-filter');
-
-        // ensure this tag hasn't already been added
-        var tagFilterExists = false;
-        tagFilter.find('li div.selected-tag-text').each(function () {
-            if (tag === $(this).text()) {
-                tagFilterExists = true;
-                return false;
-            }
-        });
-
-        // add this tag filter if applicable
-        if (!tagFilterExists) {
-            // create the list item content
-            var tagText = $('<div class="selected-tag-text"></div>').text(tag);
-            var removeTagIcon = $('<div class="fa fa-close remove-selected-tag pointer"></div>').click(function () {
-                // remove this tag
-                $(this).closest('li').remove();
-
-                // fire a remove event if applicable
-                if (isDefinedAndNotNull(config.remove)) {
-                    config.remove.call(cloudContainer, tag);
-                }
-            });
-            var selectedTagItem = $('<div layout="row" layout-align="space-between center"></div>').append(tagText).append(removeTagIcon);
-
-            // create the list item and update the tag filter list
-            $('<li></li>').append(selectedTagItem).appendTo(tagFilter);
-
-            // fire a select event if applicable
-            if (isDefinedAndNotNull(config.select)) {
-                config.select.call(cloudContainer, tag);
-            }
-        }
-    };
-
-    var methods = {
-
+    (function ($) {
+    
+        var isUndefined = function (obj) {
+            return typeof obj === 'undefined';
+        };
+    
+        var isNull = function (obj) {
+            return obj === null;
+        };
+    
+        var isDefinedAndNotNull = function (obj) {
+            return !isUndefined(obj) && !isNull(obj);
+        };
+    
+        var isBlank = function (str) {
+            return isUndefined(str) || isNull(str) || str === '';
+        };
+    
+        var config = {
+            maxTags: 25,
+            maxTagFontSize: 2,
+            minTagFontSize: 1,
+            minWidth: 20
+        };
+    
         /**
-         * Initializes the tag cloud.
+         * Adds the specified tag filter.
          *
-         * @argument {object} options The options for the tag cloud
+         * @argument {jQuery} cloudContainer    The tag cloud container
+         * @argument {string} tag               The tag to add
          */
-        init: function (options) {
-            return this.each(function () {
-                // ensure the options have been properly specified
-                if (isDefinedAndNotNull(options) && isDefinedAndNotNull(options.tags)) {
-                    // get the tag cloud
-                    var cloudContainer = $(this);
-
-                    // clear any current contents, remote events, and store options
-                    cloudContainer.empty().unbind().data('options', options);
-
-                    // build the component
-                    var cloud = $('<ul class="tag-cloud"></ul>').appendTo(cloudContainer);
-                    var filter = $('<ul class="tag-filter"></ul>').appendTo(cloudContainer);
-
-                    var tagCloud = {};
-                    var tags = [];
-
-                    // count the frequency of each tag for this type
-                    $.each(options.tags, function (i, tag) {
-                        var normalizedTagName = tag.toLowerCase();
-
-                        if (isDefinedAndNotNull(tagCloud[normalizedTagName])) {
-                            tagCloud[normalizedTagName].count = tagCloud[normalizedTagName].count + 1;
-                        } else {
-                            var tagCloudEntry = {
-                                term: normalizedTagName,
-                                count: 1
-                            };
-                            tags.push(tagCloudEntry);
-                            tagCloud[normalizedTagName] = tagCloudEntry;
-                        }
-                    });
-
-                    // handle the case when no tags are present
-                    if (tags.length > 0) {
-                        // sort the tags by frequency to limit the less frequent tags
-                        tags.sort(function (a, b) {
-                            return b.count - a.count;
+        var addTagFilter = function (cloudContainer, tag) {
+            var config = cloudContainer.data('options');
+            var tagFilter = cloudContainer.find('ul.tag-filter');
+    
+            // ensure this tag hasn't already been added
+            var tagFilterExists = false;
+            tagFilter.find('li div.selected-tag-text').each(function () {
+                if (tag === $(this).text()) {
+                    tagFilterExists = true;
+                    return false;
+                }
+            });
+    
+            // add this tag filter if applicable
+            if (!tagFilterExists) {
+                // create the list item content
+                var tagText = $('<div class="selected-tag-text"></div>').text(tag);
+                var removeTagIcon = $('<div class="fa fa-close remove-selected-tag pointer"></div>').click(function () {
+                    // remove this tag
+                    $(this).closest('li').remove();
+    
+                    // fire a remove event if applicable
+                    if (isDefinedAndNotNull(config.remove)) {
+                        config.remove.call(cloudContainer, tag);
+                    }
+                });
+                var selectedTagItem = $('<div layout="row" layout-align="space-between center"></div>').append(tagText).append(removeTagIcon);
+    
+                // create the list item and update the tag filter list
+                $('<li></li>').append(selectedTagItem).appendTo(tagFilter);
+    
+                // fire a select event if applicable
+                if (isDefinedAndNotNull(config.select)) {
+                    config.select.call(cloudContainer, tag);
+                }
+            }
+        };
+    
+        var methods = {
+    
+            /**
+             * Initializes the tag cloud.
+             *
+             * @argument {object} options The options for the tag cloud
+             */
+            init: function (options) {
+                return this.each(function () {
+                    // ensure the options have been properly specified
+                    if (isDefinedAndNotNull(options) && isDefinedAndNotNull(options.tags)) {
+                        // get the tag cloud
+                        var cloudContainer = $(this);
+    
+                        // clear any current contents, remote events, and store options
+                        cloudContainer.empty().unbind().data('options', options);
+    
+                        // build the component
+                        var cloud = $('<ul class="tag-cloud"></ul>').appendTo(cloudContainer);
+                        var filter = $('<ul class="tag-filter"></ul>').appendTo(cloudContainer);
+    
+                        var tagCloud = {};
+                        var tags = [];
+    
+                        // count the frequency of each tag for this type
+                        $.each(options.tags, function (i, tag) {
+                            var normalizedTagName = tag.toLowerCase();
+    
+                          if (isDefinedAndNotNull(tagCloud[normalizedTagName])) {
+                                tagCloud[normalizedTagName].count = tagCloud[normalizedTagName].count + 1;
+                            } else {
+                                var tagCloudEntry = {
+                                    term: normalizedTagName,
+                                    count: 1
+                                };
+                                tags.push(tagCloudEntry);
+                                tagCloud[normalizedTagName] = tagCloudEntry;
+                            }
                         });
-
-                        // limit to the most frequest tags
-                        if (tags.length > config.maxTags) {
-                            tags = tags.slice(0, config.maxTags);
+    
+                        // handle the case when no tags are present
+                        if (tags.length > 0) {
+                            // sort the tags by frequency to limit the less frequent tags
+                            tags.sort(function (a, b) {
+                                return b.count - a.count;
+                            });
+    
+                            // limit to the most frequest tags
+                            if (tags.length > config.maxTags) {
+                                tags = tags.slice(0, config.maxTags);
+                            }
+    
+                            // determine the max frequency
+                            var maxFrequency = tags[0].count;
+    
+                            // sort the tags alphabetically
+                            tags.sort(function (a, b) {
+                                var compA = a.term.toUpperCase();
+                                var compB = b.term.toUpperCase();
+                                return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
+                            });
+    
+                            // set the tag content
+                            $.each(tags, function (i, tag) {
+                                // determine the appropriate font size
+                                var fontSize = Math.log(tag.count) / Math.log(maxFrequency) * (config.maxTagFontSize - config.minTagFontSize) + config.minTagFontSize;
+                                var minWidth = config.minWidth * fontSize;
+    
+                                // create the tag cloud entry
+                                $('<li></li>').append($('<span class="link"></span>').text(tag.term).css({
+                                    'font-size': fontSize + 'em'
+                                })).css({
+                                    'min-width': minWidth + 'px'
+                                }).click(function () {
+                                    // ensure we don't exceed 5 selected
+                                    if (filter.children('li').length < 5) {
+                                        var tagText = $(this).children('span').text();
+                                        addTagFilter(cloudContainer, tagText);
+                                    }
+                                }).appendTo(cloud).ellipsis();
+                            });
+                        } else {
+                            // indicate when no tags are found
+                          $('<li><span class="unset">' + nf._.msg('jquery-tagcloud.NoTagsSpecified') + '</span></li>').appendTo(cloud);
                         }
-
-                        // determine the max frequency
-                        var maxFrequency = tags[0].count;
-
-                        // sort the tags alphabetically
-                        tags.sort(function (a, b) {
-                            var compA = a.term.toUpperCase();
-                            var compB = b.term.toUpperCase();
-                            return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
-                        });
-
-                        // set the tag content
-                        $.each(tags, function (i, tag) {
-                            // determine the appropriate font size
-                            var fontSize = Math.log(tag.count) / Math.log(maxFrequency) * (config.maxTagFontSize - config.minTagFontSize) + config.minTagFontSize;
-                            var minWidth = config.minWidth * fontSize;
-
-                            // create the tag cloud entry
-                            $('<li></li>').append($('<span class="link"></span>').text(tag.term).css({
-                                'font-size': fontSize + 'em'
-                            })).css({
-                                'min-width': minWidth + 'px'
-                            }).click(function () {
-                                // ensure we don't exceed 5 selected
-                                if (filter.children('li').length < 5) {
-                                    var tagText = $(this).children('span').text();
-                                    addTagFilter(cloudContainer, tagText);
-                                }
-                            }).appendTo(cloud).ellipsis();
-                        });
-                    } else {
-                        // indicate when no tags are found
-                        $('<li><span class="unset">No tags specified</span></li>').appendTo(cloud);
                     }
-                }
-            });
-        },
-
-        /**
-         * Resets the selected tags from the tag cloud.
-         */
-        clearSelectedTags: function () {
-            return this.each(function () {
-                var cloudContainer = $(this);
-                cloudContainer.find('div.remove-selected-tag').trigger('click');
-            });
-        },
-
-        /**
-         * Returns the selected tags of the first matching element.
-         */
-        getSelectedTags: function () {
-            var tags = [];
-
-            this.each(function () {
-                var cloudContainer = $(this);
-                cloudContainer.find('div.selected-tag-text').each(function () {
-                    tags.push($(this).text());
                 });
-            });
-
-            return tags;
-        }
-    };
-
-    $.fn.tagcloud = function (method) {
-        if (methods[method]) {
-            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-        } else {
-            return methods.init.apply(this, arguments);
-        }
-    };
-})(jQuery);
\ No newline at end of file
+            },
+    
+            /**
+             * Resets the selected tags from the tag cloud.
+             */
+            clearSelectedTags: function () {
+                return this.each(function () {
+                    var cloudContainer = $(this);
+                    cloudContainer.find('div.remove-selected-tag').trigger('click');
+                });
+            },
+    
+            /**
+             * Returns the selected tags of the first matching element.
+             */
+            getSelectedTags: function () {
+                var tags = [];
+    
+                this.each(function () {
+                    var cloudContainer = $(this);
+                    cloudContainer.find('div.selected-tag-text').each(function () {
+                        tags.push($(this).text());
+                    });
+                });
+    
+                return tags;
+            }
+        };
+    
+        $.fn.tagcloud = function (method) {
+            if (methods[method]) {
+                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+            } else {
+                return methods.init.apply(this, arguments);
+            }
+        };
+    })(jQuery);
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 ea9f40d14ac2..97503ee2f613 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
@@ -1,44 +1,34 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'angular',
-                'nf.Common',
-                'nf.ng.AppConfig',
-                'nf.ng.AppCtrl',
-                'nf.ng.ServiceProvider',
-                'nf.ng.Bridge',
-                'nf.ErrorHandler',
-                'nf.Storage'],
-            function ($,
-                      angular,
-                      nfCommon,
-                      appConfig,
-                      appCtrl,
-                      serviceProvider,
-                      nfNgBridge,
-                      nfErrorHandler,
-                      nfStorage) {
-                return (nf.ng.BulletinBoardCtrl =
-                    factory($,
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'angular',
+                  'nf.Common',
+                  'nf.ng.AppConfig',
+                  'nf.ng.AppCtrl',
+                  'nf.ng.ServiceProvider',
+                  'nf.ng.Bridge',
+                  'nf.ErrorHandler',
+                  'nf.Storage'],
+              function ($,
                         angular,
                         nfCommon,
                         appConfig,
@@ -46,449 +36,459 @@
                         serviceProvider,
                         nfNgBridge,
                         nfErrorHandler,
-                        nfStorage));
-            });
-    } 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, nfCommon, appConfig, appCtrl, serviceProvider, nfNgBridge, nfErrorHandler, nfStorage) {
-    'use strict';
-
-    $(document).ready(function () {
-
-        //Create Angular App
-        var app = angular.module('ngBulletinBoardApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
-
-        //Define Dependency Injection Annotations
-        appConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
-        appCtrl.$inject = ['$scope', 'serviceProvider', 'bulletinBoardCtrl'];
-        nfBulletinBoard.$inject = ['serviceProvider'];
-        serviceProvider.$inject = [];
-
-        //Configure Angular App
-        app.config(appConfig);
-
-        //Define Angular App Controllers
-        app.controller('ngBulletinBoardAppCtrl', appCtrl);
-
-        //Define Angular App Services
-        app.service('serviceProvider', serviceProvider);
-        app.service('bulletinBoardCtrl', nfBulletinBoard);
-
-        //Manually Boostrap Angular App
-        nfNgBridge.injector = angular.bootstrap($('body'), ['ngBulletinBoardApp'], {strictDi: true});
-
-        // initialize the bulletin board
-        nfNgBridge.injector.get('bulletinBoardCtrl').init();
-    });
-
-    var nfBulletinBoard = function (serviceProvider) {
-
-        /**
-         * 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'
-            }
-        };
-
-        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();
-            });
-
-            // 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'
-                }]
-            });
-
-            // 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';
-
-                // set the document title and the about title
-                document.title = bulletinBoardTitle;
-                $('#bulletin-board-header-text').text(bulletinBoardTitle);
-            }).fail(nfErrorHandler.handleAjaxError);
-
-            // 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 (nfCommon.isDefinedAndNotNull(response.banners)) {
-                            if (nfCommon.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('bulletin-board');
-                            }
-
-                            if (nfCommon.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) {
-                        nfErrorHandler.handleAjaxError(xhr, status, error);
-                        deferred.reject();
-                    });
-                } else {
-                    deferred.resolve();
+                        nfStorage) {
+                  return (nf.ng.BulletinBoardCtrl =
+                      factory($,
+                          angular,
+                          nfCommon,
+                          appConfig,
+                          appCtrl,
+                          serviceProvider,
+                          nfNgBridge,
+                          nfErrorHandler,
+                          nfStorage));
+              });
+      } 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, nfCommon, appConfig, appCtrl, serviceProvider, nfNgBridge, nfErrorHandler, nfStorage) {
+       'use strict';
+    
+        $(document).ready(function () {
+    
+            //Create Angular App
+            var app = angular.module('ngBulletinBoardApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
+    
+            //Define Dependency Injection Annotations
+          appConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
+          appCtrl.$inject = ['$scope', 'serviceProvider', 'bulletinBoardCtrl'];
+          nfBulletinBoard.$inject = ['serviceProvider'];
+          serviceProvider.$inject = [];
+    
+            //Configure Angular App
+          app.config(appConfig);
+    
+            //Define Angular App Controllers
+          app.controller('ngBulletinBoardAppCtrl', appCtrl);
+    
+            //Define Angular App Services
+          app.service('serviceProvider', serviceProvider);
+          app.service('bulletinBoardCtrl', nfBulletinBoard);
+    
+            //Manually Boostrap Angular App
+          nfNgBridge.injector = angular.bootstrap($('body'), ['ngBulletinBoardApp'], {strictDi: true});
+    
+            // initialize the bulletin board
+          nfNgBridge.injector.get('bulletinBoardCtrl').init();
+      });
+  
+      var nfBulletinBoard = function (serviceProvider) {
+    
+            /**
+             * 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, '<div class="bulletin-action">Auto refresh started</div>');
-
-            // 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, '<div class="bulletin-action">Auto refresh stopped</div>');
-
-            // 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: nf._.msg('nf-bulletin-board.ByMessage'),
+                        value: 'message'
+                    }, {
+                        text: nf._.msg('nf-bulletin-board.ByName'),
+                        value: 'sourceName'
+                    }, {
+                        text: nf._.msg('nf-bulletin-board.ById'),
+                        value: 'sourceId'
+                    }, {
+                        text: nf._.msg('nf-bulletin-board.ByGroupId'),
+                        value: 'groupId'
+                    }]
+                });
+    
+                // get the about details
+                var getTitle = $.ajax({
+                    type: 'GET',
+                    url: config.urls.about,
+                    dataType: 'json'
+                }).done(function (response) {
+                    var aboutDetails = response.about;
+                    var bulletinBoardTitle = nf._.msg('nf-about')+ nf._.msg('nf-bulletin-board.BulletinBoard');
+    
+                    // set the document title and the about title
+                    document.title = bulletinBoardTitle;
+                    $('#bulletin-board-header-text').text(bulletinBoardTitle);
+              }).fail(nfErrorHandler.handleAjaxError);
+    
+                // 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 (nfCommon.isDefinedAndNotNull(response.banners)) {
+                              if (nfCommon.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('bulletin-board');
+                                }
+    
+                              if (nfCommon.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) {
+                          nfErrorHandler.handleAjaxError(xhr, status, error);
+                            deferred.reject();
+                        });
+                    } else {
+                        deferred.resolve();
                     }
                 });
-            }
-        };
-
-        /**
-         * 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 (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
-                    parent.nf.CanvasUtils.showComponent(groupId, sourceId);
-                    parent.$('#shell-close-button').click();
-                }
-            }
-        };
-
-        function BulletinBoardCtrl() {
+    
+                return $.Deferred(function (deferred) {
+                    $.when(getTitle, loadBanners).done(function () {
+                        deferred.resolve();
+                    }).fail(function () {
+                        deferred.reject();
+                    });
+                }).promise();
+            };
+    
             /**
-             * Toggle state
+             * Starts polling for new bulletins.
              */
-            this.polling = true;
-        }
-
-        BulletinBoardCtrl.prototype = {
-            constructor: BulletinBoardCtrl,
-
+            var start = function () {
+                var refreshButton = $('#refresh-button');
+                var bulletinContainer = $('#bulletin-board-container');
+    
+                appendAndScroll(bulletinContainer, '<div class="bulletin-action">'+nf._.msg('nf-bulletin-board.Message3')+'</div>');
+    
+                // clear any error messages
+                $('#bulletin-error-message').text('').hide();
+                poll();
+            };
+    
             /**
-             *  Register the bulletin board controller.
+             * Stops polling for new bulletins.
              */
-            register: function () {
-                if (serviceProvider.bulletinBoardCtrl === undefined) {
-                    serviceProvider.register('bulletinBoardCtrl', bulletinBoardCtrl);
-                }
-            },
-
+            var stop = function () {
+                var refreshButton = $('#refresh-button');
+                var bulletinContainer = $('#bulletin-board-container');
+    
+                appendAndScroll(bulletinContainer, '<div class="bulletin-action">'+nf._.msg('nf-bulletin-board.Message4')+'</div>');
+    
+                // reset state
+                lastBulletin = null;
+                filterText = null;
+                filterType = null;
+            };
+    
             /**
-             * Initializes the bulletin board page.
+             * Polls for new bulletins
              */
-            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"
+            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);
+                        }
                     });
                 }
-
-                nfStorage.init();
-
-                initializePage().done(function () {
-                    start();
-                });
-            },
-
+            };
+    
             /**
-             * Loads the bulletins since the last refresh.
+             * 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
              */
-            loadBulletins: function () {
-                var data = {};
-
-                // include the timestamp if appropriate
-                if (nfCommon.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 = $('<div class="bulletin-action"></div>').text('Filter ' + filterOption.text + ' matching \'' + filter + '\'');
-                        appendAndScroll(bulletinContainer, filterContent.get(0));
-                        filterText = filter;
-                        filterType = filterOption.text;
+            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 (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
+                        parent.nf.CanvasUtils.showComponent(groupId, sourceId);
+                        parent.$('#shell-close-button').click();
                     }
-                } else if (filterText !== null) {
-                    appendAndScroll(bulletinContainer, '<div class="bulletin-action">Filter removed</div>');
-                    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 (nfCommon.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 (nfCommon.isDefinedAndNotNull(bulletin.sourceId) && nfCommon.isDefinedAndNotNull(bulletin.groupId) && top !== window) {
-                                    source = $('<div class="bulletin-source bulletin-link"></div>').text(bulletin.sourceId).on('click', function () {
-                                        goToSource(bulletin.groupId, bulletin.sourceId);
-                                    });
-                                } else {
-                                    var sourceId = bulletin.sourceId;
-                                    if (nfCommon.isUndefined(sourceId) || nfCommon.isNull(sourceId)) {
-                                        sourceId = '';
+            };
+    
+            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"
+                        });
+                    }
+    
+                  nfStorage.init();
+    
+                    initializePage().done(function () {
+                        start();
+                    });
+                },
+    
+                /**
+                 * Loads the bulletins since the last refresh.
+                 */
+                loadBulletins: function () {
+                    var data = {};
+    
+                    // include the timestamp if appropriate
+                  if (nfCommon.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 = $('<div class="bulletin-action"></div>').text(nf._.msg('nf-bulletin-board.Message1') + filterOption.text + nf._.msg('nf-bulletin-board.Message2') + filter + '\'');
+                            appendAndScroll(bulletinContainer, filterContent.get(0));
+                            filterText = filter;
+                            filterType = filterOption.text;
+                        }
+                    } else if (filterText !== null) {
+                        appendAndScroll(bulletinContainer, '<div class="bulletin-action">'+nf._.msg('nf-bulletin-board.Message5')+'</div>');
+                        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 (nfCommon.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 (nfCommon.isDefinedAndNotNull(bulletin.sourceId) && nfCommon.isDefinedAndNotNull(bulletin.groupId) && top !== window) {
+                                        source = $('<div class="bulletin-source bulletin-link"></div>').text(bulletin.sourceId).on('click', function () {
+                                            goToSource(bulletin.groupId, bulletin.sourceId);
+                                        });
+                                    } else {
+                                        var sourceId = bulletin.sourceId;
+                                      if (nfCommon.isUndefined(sourceId) || nfCommon.isNull(sourceId)) {
+                                            sourceId = '';
+                                        }
+                                        source = $('<div class="bulletin-source"></div>').text(sourceId);
                                     }
-                                    source = $('<div class="bulletin-source"></div>').text(sourceId);
+    
+                                    // build the markup for this bulletin
+                                    var bulletinMarkup = $('<div class="bulletin"></div>');
+    
+                                    // build the markup for this bulletins info
+                                    var bulletinInfoMarkup = $('<div class="bulletin-info"></div>').appendTo(bulletinMarkup);
+                                    $('<div class="bulletin-timestamp"></div>').text(bulletin.timestamp).appendTo(bulletinInfoMarkup);
+                                    $('<div class="bulletin-severity"></div>').addClass(severityStyle).text(bulletin.level).appendTo(bulletinInfoMarkup);
+                                    source.appendTo(bulletinInfoMarkup);
+                                    $('<div class="clear"></div>').appendTo(bulletinInfoMarkup);
+    
+                                    // format the node address if applicable
+                                  if (nfCommon.isDefinedAndNotNull(bulletin.nodeAddress)) {
+                                        $('<div class="bulletin-node"></div>').text(bulletin.nodeAddress).appendTo(bulletinMarkup);
+                                    }
+    
+                                    // add the bulletin message (treat as text)
+                                    $('<pre class="bulletin-message"></pre>').text(bulletin.message).appendTo(bulletinMarkup);
+                                    $('<div class="clear"></div>').appendTo(bulletinMarkup);
+    
+                                    // append the content
+                                    content.push(bulletinMarkup.get(0));
                                 }
-
-                                // build the markup for this bulletin
-                                var bulletinMarkup = $('<div class="bulletin"></div>');
-
-                                // build the markup for this bulletins info
-                                var bulletinInfoMarkup = $('<div class="bulletin-info"></div>').appendTo(bulletinMarkup);
-                                $('<div class="bulletin-timestamp"></div>').text(bulletin.timestamp).appendTo(bulletinInfoMarkup);
-                                $('<div class="bulletin-severity"></div>').addClass(severityStyle).text(bulletin.level).appendTo(bulletinInfoMarkup);
-                                source.appendTo(bulletinInfoMarkup);
-                                $('<div class="clear"></div>').appendTo(bulletinInfoMarkup);
-
-                                // format the node address if applicable
-                                if (nfCommon.isDefinedAndNotNull(bulletin.nodeAddress)) {
-                                    $('<div class="bulletin-node"></div>').text(bulletin.nodeAddress).appendTo(bulletinMarkup);
+    
+                                // record the id of the last bulletin in this request
+                                if (i + 1 === bulletinEntities.length) {
+                                    lastBulletin = bulletinEntity.id;
                                 }
-
-                                // add the bulletin message (treat as text)
-                                $('<pre class="bulletin-message"></pre>').text(bulletin.message).appendTo(bulletinMarkup);
-                                $('<div class="clear"></div>').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('<div class="bulletin-action">&#8230;</div>');
                             }
-                        });
-
-                        // 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('<div class="bulletin-action">&#8230;</div>');
                         }
-                    }
-                }).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();
+                    }).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 {
+                          nfErrorHandler.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 {
-                        nfErrorHandler.handleAjaxError(xhr, status, error);
+                        stop();
                     }
-                });
-            },
-
-            /**
-             * 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;
-    };
-
-    return nfBulletinBoard;
-}));
\ 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 16f40f19d8fe..b4acd58bacc9 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
@@ -1,520 +1,520 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.CanvasUtils',
-                'nf.ContextMenu',
-                'nf.ClusterSummary',
-                'nf.ErrorHandler',
-                'nf.Settings'],
-            function ($, nfCommon, nfDialog, nfCanvasUtils, nfContextMenu, nfClusterSummary, nfErrorHandler, nfSettings) {
-                return (nf.ng.Canvas.FlowStatusCtrl = factory($, nfCommon, nfDialog, nfCanvasUtils, nfContextMenu, nfClusterSummary, nfErrorHandler, nfSettings));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.Canvas.FlowStatusCtrl =
-            factory(require('jquery'),
-                require('nf.Common'),
-                require('nf.Dialog'),
-                require('nf.CanvasUtils'),
-                require('nf.ContextMenu'),
-                require('nf.ClusterSummary'),
-                require('nf.ErrorHandler'),
-                require('nf.Settings')));
-    } else {
-        nf.ng.Canvas.FlowStatusCtrl = factory(root.$,
-            root.nf.Common,
-            root.nf.Dialog,
-            root.nf.CanvasUtils,
-            root.nf.ContextMenu,
-            root.nf.ClusterSummary,
-            root.nf.ErrorHandler,
-            root.nf.Settings);
-    }
-}(this, function ($, nfCommon, nfDialog, nfCanvasUtils, nfContextMenu, nfClusterSummary, nfErrorHandler, nfSettings) {
-    'use strict';
-
-    return function (serviceProvider) {
-        'use strict';
-
-        var config = {
-            search: 'Search',
-            urls: {
-                search: '../nifi-api/flow/search-results',
-                status: '../nifi-api/flow/status'
-            }
-        };
-
-        function FlowStatusCtrl() {
-            this.connectedNodesCount = "-";
-            this.activeThreadCount = "-";
-            this.totalQueued = "-";
-            this.controllerTransmittingCount = "-";
-            this.controllerNotTransmittingCount = "-";
-            this.controllerRunningCount = "-";
-            this.controllerStoppedCount = "-";
-            this.controllerInvalidCount = "-";
-            this.controllerDisabledCount = "-";
-            this.statsLastRefreshed = "-";
-
-            /**
-             * The search controller.
-             */
-            this.search = {
-
-                /**
-                 * Get the search input element.
-                 */
-                getInputElement: function () {
-                    return $('#search-field');
-                },
-
-                /**
-                 * Get the search button element.
-                 */
-                getButtonElement: function () {
-                    return $('#search-button');
-                },
-
-                /**
-                 * Get the search container element.
-                 */
-                getSearchContainerElement: function () {
-                    return $('#search-container');
-                },
-
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.CanvasUtils',
+                  'nf.ContextMenu',
+                  'nf.ClusterSummary',
+                  'nf.ErrorHandler',
+                  'nf.Settings'],
+              function ($, nfCommon, nfDialog, nfCanvasUtils, nfContextMenu, nfClusterSummary, nfErrorHandler, nfSettings) {
+                  return (nf.ng.Canvas.FlowStatusCtrl = factory($, nfCommon, nfDialog, nfCanvasUtils, nfContextMenu, nfClusterSummary, nfErrorHandler, nfSettings));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.Canvas.FlowStatusCtrl =
+              factory(require('jquery'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ContextMenu'),
+                  require('nf.ClusterSummary'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Settings')));
+      } else {
+          nf.ng.Canvas.FlowStatusCtrl = factory(root.$,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.CanvasUtils,
+              root.nf.ContextMenu,
+              root.nf.ClusterSummary,
+              root.nf.ErrorHandler,
+              root.nf.Settings);
+      }
+  }(this, function ($, nfCommon, nfDialog, nfCanvasUtils, nfContextMenu, nfClusterSummary, nfErrorHandler, nfSettings) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
+            var config = {
+                search: 'Search',
+                urls: {
+                    search: '../nifi-api/flow/search-results',
+                    status: '../nifi-api/flow/status'
+                }
+            };
+    
+            function FlowStatusCtrl() {
+                this.connectedNodesCount = "-";
+                this.activeThreadCount = "-";
+                this.totalQueued = "-";
+                this.controllerTransmittingCount = "-";
+                this.controllerNotTransmittingCount = "-";
+                this.controllerRunningCount = "-";
+                this.controllerStoppedCount = "-";
+                this.controllerInvalidCount = "-";
+                this.controllerDisabledCount = "-";
+                this.statsLastRefreshed = "-";
+    
                 /**
-                 * Initialize the search controller.
+                 * The search controller.
                  */
-                init: function () {
-
-                    var searchCtrl = this;
-
-                    // Create new jQuery UI widget
-                    $.widget('nf.searchAutocomplete', $.ui.autocomplete, {
-                        reset: function () {
-                            this.term = null;
-                        },
-                        _create: function () {
-                            this._super();
-                            this.widget().menu('option', 'items', '> :not(.search-header, .search-no-matches)');
-                        },
-                        _resizeMenu: function () {
-                            var ul = this.menu.element;
-                            ul.width(400);
-                        },
-                        _normalize: function (searchResults) {
-                            var items = [];
-                            items.push(searchResults);
-                            return items;
-                        },
-                        _renderMenu: function (ul, items) {
-                            var nfSearchAutocomplete = this;
-
-                            // the object that holds the search results is normalized into a single element array
-                            var searchResults = items[0];
-
-                            // show all processors
-                            if (!nfCommon.isEmpty(searchResults.processorResults)) {
-                                ul.append('<li class="search-header"><div class="search-result-icon icon icon-processor"></div>Processors</li>');
-                                $.each(searchResults.processorResults, function (i, processorMatch) {
-                                    nfSearchAutocomplete._renderItem(ul, processorMatch);
-                                });
-                            }
-
-                            // show all process groups
-                            if (!nfCommon.isEmpty(searchResults.processGroupResults)) {
-                                ul.append('<li class="search-header"><div class="search-result-icon icon icon-group"></div>Process Groups</li>');
-                                $.each(searchResults.processGroupResults, function (i, processGroupMatch) {
-                                    nfSearchAutocomplete._renderItem(ul, processGroupMatch);
-                                });
-                            }
-
-                            // show all remote process groups
-                            if (!nfCommon.isEmpty(searchResults.remoteProcessGroupResults)) {
-                                ul.append('<li class="search-header"><div class="search-result-icon icon icon-group-remote"></div>Remote Process Groups</li>');
-                                $.each(searchResults.remoteProcessGroupResults, function (i, remoteProcessGroupMatch) {
-                                    nfSearchAutocomplete._renderItem(ul, remoteProcessGroupMatch);
-                                });
-                            }
-
-                            // show all connections
-                            if (!nfCommon.isEmpty(searchResults.connectionResults)) {
-                                ul.append('<li class="search-header"><div class="search-result-icon icon icon-connect"></div>Connections</li>');
-                                $.each(searchResults.connectionResults, function (i, connectionMatch) {
-                                    nfSearchAutocomplete._renderItem(ul, connectionMatch);
+                this.search = {
+    
+                    /**
+                     * Get the search input element.
+                     */
+                    getInputElement: function () {
+                        return $('#search-field');
+                    },
+    
+                    /**
+                     * Get the search button element.
+                     */
+                    getButtonElement: function () {
+                        return $('#search-button');
+                    },
+    
+                    /**
+                     * Get the search container element.
+                     */
+                    getSearchContainerElement: function () {
+                        return $('#search-container');
+                    },
+    
+                    /**
+                     * Initialize the search controller.
+                     */
+                    init: function () {
+    
+                      var searchCtrl = this;
+    
+                        // Create new jQuery UI widget
+                        $.widget('nf.searchAutocomplete', $.ui.autocomplete, {
+                            reset: function () {
+                                this.term = null;
+                            },
+                          _create: function () {
+                              this._super();
+                              this.widget().menu('option', 'items', '> :not(.search-header, .search-no-matches)');
+                          },
+                            _resizeMenu: function () {
+                                var ul = this.menu.element;
+                              ul.width(400);
+                            },
+                            _normalize: function (searchResults) {
+                                var items = [];
+                                items.push(searchResults);
+                                return items;
+                            },
+                            _renderMenu: function (ul, items) {
+                              var nfSearchAutocomplete = this;
+    
+                                // the object that holds the search results is normalized into a single element array
+                                var searchResults = items[0];
+    
+                                // show all processors
+                              if (!nfCommon.isEmpty(searchResults.processorResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-processor"></div>'+nf._.msg('nf-canvas-flow-status-controller.Processors')+'</li>');
+                                    $.each(searchResults.processorResults, function (i, processorMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, processorMatch);
+                                    });
+                                }
+    
+                                // show all process groups
+                              if (!nfCommon.isEmpty(searchResults.processGroupResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-group"></div>'+nf._.msg('nf-canvas-flow-status-controller.ProcessGroups')+'</li>');
+                                    $.each(searchResults.processGroupResults, function (i, processGroupMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, processGroupMatch);
+                                    });
+                                }
+    
+                                // show all remote process groups
+                              if (!nfCommon.isEmpty(searchResults.remoteProcessGroupResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-group-remote"></div>'+nf._.msg('nf-canvas-flow-status-controller.RemoteProcessGroups')+'</li>');
+                                    $.each(searchResults.remoteProcessGroupResults, function (i, remoteProcessGroupMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, remoteProcessGroupMatch);
+                                    });
+                                }
+    
+                                // show all connections
+                              if (!nfCommon.isEmpty(searchResults.connectionResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-connect"></div>'+nf._.msg('nf-canvas-flow-status-controller.Connection')+'</li>');
+                                    $.each(searchResults.connectionResults, function (i, connectionMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, connectionMatch);
+                                    });
+                                }
+    
+                                // show all input ports
+                              if (!nfCommon.isEmpty(searchResults.inputPortResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-port-in"></div>'+nf._.msg('nf-canvas-flow-status-controller.InputPorts')+'</li>');
+                                    $.each(searchResults.inputPortResults, function (i, inputPortMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, inputPortMatch);
+                                    });
+                                }
+    
+                                // show all output ports
+                              if (!nfCommon.isEmpty(searchResults.outputPortResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-port-out"></div>'+nf._.msg('nf-canvas-flow-status-controller.OutputPorts')+'</li>');
+                                    $.each(searchResults.outputPortResults, function (i, outputPortMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, outputPortMatch);
+                                    });
+                                }
+    
+                                // show all funnels
+                              if (!nfCommon.isEmpty(searchResults.funnelResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-funnel"></div>'+nf._.msg('nf-canvas-flow-status-controller.Funnel')+'</li>');
+                                    $.each(searchResults.funnelResults, function (i, funnelMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, funnelMatch);
+                                    });
+                                }
+    
+                                // ensure there were some results
+                                if (ul.children().length === 0) {
+                              ul.append('<li class="unset search-no-matches">'+nf._.msg('nf-canvas-flow-status-controller.no-matches')+'</li>');
+                                }
+                            },
+                            _renderItem: function (ul, match) {
+                                var itemContent = $('<a></a>').append($('<div class="search-match-header"></div>').text(match.name));
+                                $.each(match.matches, function (i, match) {
+                                    itemContent.append($('<div class="search-match"></div>').text(match));
                                 });
+                                return $('<li></li>').data('ui-autocomplete-item', match).append(itemContent).appendTo(ul);
                             }
-
-                            // show all input ports
-                            if (!nfCommon.isEmpty(searchResults.inputPortResults)) {
-                                ul.append('<li class="search-header"><div class="search-result-icon icon icon-port-in"></div>Input Ports</li>');
-                                $.each(searchResults.inputPortResults, function (i, inputPortMatch) {
-                                    nfSearchAutocomplete._renderItem(ul, inputPortMatch);
+                      });
+    
+                        // configure the new searchAutocomplete jQuery UI widget
+                        this.getInputElement().searchAutocomplete({
+                            appendTo: '#search-flow-results',
+                            position: {
+                                my: 'right top',
+                                at: 'right bottom',
+                                offset: '1 1'
+                            },
+                            source: function (request, response) {
+                                // create the search request
+                                $.ajax({
+                                    type: 'GET',
+                                    data: {
+                                        q: request.term
+                                    },
+                                    dataType: 'json',
+                                    url: config.urls.search
+                                }).done(function (searchResponse) {
+                                    response(searchResponse.searchResultsDTO);
                                 });
+                            },
+                            select: function (event, ui) {
+                                var item = ui.item;
+    
+                                // show the selected component
+                              nfCanvasUtils.showComponent(item.groupId, item.id);
+    
+                              searchCtrl.getInputElement().val('').blur();
+    
+                                // stop event propagation
+                                return false;
+                            },
+                            open: function (event, ui) {
+                                // show the glass pane
+                                var searchField = $(this);
+                                $('<div class="search-glass-pane"></div>').one('click', function () {
+                                }).appendTo('body');
+                            },
+                            close: function (event, ui) {
+                                // set the input text to '' and reset the cached term
+                                $(this).searchAutocomplete('reset');
+                              searchCtrl.getInputElement().val('');
+    
+                                // remove the glass pane
+                                $('div.search-glass-pane').remove();
                             }
-
-                            // show all output ports
-                            if (!nfCommon.isEmpty(searchResults.outputPortResults)) {
-                                ul.append('<li class="search-header"><div class="search-result-icon icon icon-port-out"></div>Output Ports</li>');
-                                $.each(searchResults.outputPortResults, function (i, outputPortMatch) {
-                                    nfSearchAutocomplete._renderItem(ul, outputPortMatch);
-                                });
-                            }
-
-                            // show all funnels
-                            if (!nfCommon.isEmpty(searchResults.funnelResults)) {
-                                ul.append('<li class="search-header"><div class="search-result-icon icon icon-funnel"></div>Funnels</li>');
-                                $.each(searchResults.funnelResults, function (i, funnelMatch) {
-                                    nfSearchAutocomplete._renderItem(ul, funnelMatch);
-                                });
-                            }
-
-                            // ensure there were some results
-                            if (ul.children().length === 0) {
-                                ul.append('<li class="unset search-no-matches">No results matched the search terms</li>');
-                            }
-                        },
-                        _renderItem: function (ul, match) {
-                            var itemContent = $('<a></a>').append($('<div class="search-match-header"></div>').text(match.name));
-                            $.each(match.matches, function (i, match) {
-                                itemContent.append($('<div class="search-match"></div>').text(match));
-                            });
-                            return $('<li></li>').data('ui-autocomplete-item', match).append(itemContent).appendTo(ul);
-                        }
-                    });
-
-                    // configure the new searchAutocomplete jQuery UI widget
-                    this.getInputElement().searchAutocomplete({
-                        appendTo: '#search-flow-results',
-                        position: {
-                            my: 'right top',
-                            at: 'right bottom',
-                            offset: '1 1'
-                        },
-                        source: function (request, response) {
-                            // create the search request
-                            $.ajax({
-                                type: 'GET',
-                                data: {
-                                    q: request.term
-                                },
-                                dataType: 'json',
-                                url: config.urls.search
-                            }).done(function (searchResponse) {
-                                response(searchResponse.searchResultsDTO);
-                            });
-                        },
-                        select: function (event, ui) {
-                            var item = ui.item;
-
-                            // show the selected component
-                            nfCanvasUtils.showComponent(item.groupId, item.id);
-
-                            searchCtrl.getInputElement().val('').blur();
-
-                            // stop event propagation
-                            return false;
-                        },
-                        open: function (event, ui) {
-                            // show the glass pane
-                            var searchField = $(this);
-                            $('<div class="search-glass-pane"></div>').one('click', function () {
-                            }).appendTo('body');
-                        },
-                        close: function (event, ui) {
-                            // set the input text to '' and reset the cached term
-                            $(this).searchAutocomplete('reset');
-                            searchCtrl.getInputElement().val('');
-
-                            // remove the glass pane
-                            $('div.search-glass-pane').remove();
-                        }
-                    });
-
-                    // hide the search input
-                    searchCtrl.toggleSearchField();
-                },
-
-                /**
-                 * Toggle/Slide the search field open/closed.
-                 */
-                toggleSearchField: function () {
-                    var searchCtrl = this;
-
-                    // hide the context menu if necessary
-                    nfContextMenu.hide();
-
-                    var isVisible = searchCtrl.getInputElement().is(':visible');
-                    var display = 'none';
-                    var class1 = 'search-container-opened';
-                    var class2 = 'search-container-closed';
-                    if (!isVisible) {
-                        searchCtrl.getButtonElement().css('background-color', '#FFFFFF');
-                        display = 'inline-block';
-                        class1 = 'search-container-closed';
-                        class2 = 'search-container-opened';
-                    } else {
-                        searchCtrl.getInputElement().css('display', display);
-                    }
-
-                    this.getSearchContainerElement().switchClass(class1, class2, 500, function () {
-                        searchCtrl.getInputElement().css('display', display);
+                        });
+    
+                        // hide the search input
+                      searchCtrl.toggleSearchField();
+                    },
+    
+                    /**
+                     * Toggle/Slide the search field open/closed.
+                     */
+                    toggleSearchField: function () {
+                      var searchCtrl = this;
+    
+                        // hide the context menu if necessary
+                      nfContextMenu.hide();
+    
+                      var isVisible = searchCtrl.getInputElement().is(':visible');
+                        var display = 'none';
+                        var class1 = 'search-container-opened';
+                        var class2 = 'search-container-closed';
                         if (!isVisible) {
-                            searchCtrl.getButtonElement().css('background-color', '#FFFFFF');
-                            searchCtrl.getInputElement().focus();
+                          searchCtrl.getButtonElement().css('background-color', '#FFFFFF');
+                            display = 'inline-block';
+                            class1 = 'search-container-closed';
+                            class2 = 'search-container-opened';
                         } else {
-                            searchCtrl.getButtonElement().css('background-color', '#E3E8EB');
+                          searchCtrl.getInputElement().css('display', display);
                         }
-                    });
+    
+                        this.getSearchContainerElement().switchClass(class1, class2, 500, function () {
+                          searchCtrl.getInputElement().css('display', display);
+                            if (!isVisible) {
+                              searchCtrl.getButtonElement().css('background-color', '#FFFFFF');
+                              searchCtrl.getInputElement().focus();
+                            } else {
+                              searchCtrl.getButtonElement().css('background-color', '#E3E8EB');
+                            }
+                        });
+                    }
                 }
-            }
-
-            /**
-             * The bulletins controller.
-             */
-            this.bulletins = {
-
+    
                 /**
-                 * Update the bulletins.
-                 *
-                 * @param response  The controller bulletins returned from the `../nifi-api/controller/bulletins` endpoint.
+                 * The bulletins controller.
                  */
-                update: function (response) {
-
-                    // icon for system bulletins
-                    var bulletinIcon = $('#bulletin-button');
-                    var currentBulletins = bulletinIcon.data('bulletins');
-
-                    // update the bulletins if necessary
-                    if (nfCommon.doBulletinsDiffer(currentBulletins, response.bulletins)) {
-                        bulletinIcon.data('bulletins', response.bulletins);
-
-                        // get the formatted the bulletins
-                        var bulletins = nfCommon.getFormattedBulletins(response.bulletins);
-
-                        // bulletins for this processor are now gone
-                        if (bulletins.length === 0) {
-                            if (bulletinIcon.data('qtip')) {
-                                bulletinIcon.removeClass('has-bulletins').qtip('api').destroy(true);
-                            }
-                        } else {
-                            var newBulletins = nfCommon.formatUnorderedList(bulletins);
-
-                            // different bulletins, refresh
-                            if (bulletinIcon.data('qtip')) {
-                                bulletinIcon.qtip('option', 'content.text', newBulletins);
+                this.bulletins = {
+    
+                    /**
+                     * Update the bulletins.
+                     *
+                     * @param response  The controller bulletins returned from the `../nifi-api/controller/bulletins` endpoint.
+                     */
+                    update: function (response) {
+    
+                        // icon for system bulletins
+                        var bulletinIcon = $('#bulletin-button');
+                        var currentBulletins = bulletinIcon.data('bulletins');
+    
+                        // update the bulletins if necessary
+                      if (nfCommon.doBulletinsDiffer(currentBulletins, response.bulletins)) {
+                            bulletinIcon.data('bulletins', response.bulletins);
+    
+                            // get the formatted the bulletins
+                          var bulletins = nfCommon.getFormattedBulletins(response.bulletins);
+    
+                            // bulletins for this processor are now gone
+                            if (bulletins.length === 0) {
+                                if (bulletinIcon.data('qtip')) {
+                                    bulletinIcon.removeClass('has-bulletins').qtip('api').destroy(true);
+                                }
                             } else {
-                                // no bulletins before, show icon and tips
-                                bulletinIcon.addClass('has-bulletins').qtip($.extend({},
-                                    nfCanvasUtils.config.systemTooltipConfig,
-                                    {
-                                        content: newBulletins,
-                                        position: {
-                                            at: 'bottom left',
-                                            my: 'top right',
-                                            adjust: {
-                                                x: 4
+                              var newBulletins = nfCommon.formatUnorderedList(bulletins);
+    
+                                // different bulletins, refresh
+                                if (bulletinIcon.data('qtip')) {
+                                    bulletinIcon.qtip('option', 'content.text', newBulletins);
+                                } else {
+                                    // no bulletins before, show icon and tips
+                                    bulletinIcon.addClass('has-bulletins').qtip($.extend({},
+                                      nfCanvasUtils.config.systemTooltipConfig,
+                                        {
+                                            content: newBulletins,
+                                            position: {
+                                                at: 'bottom left',
+                                                my: 'top right',
+                                                adjust: {
+                                                    x: 4
+                                                }
                                             }
                                         }
-                                    }
-                                ));
+                                    ));
+                                }
                             }
                         }
+    
+                        // update controller service and reporting task bulletins
+                      nfSettings.setBulletins(response.controllerServiceBulletins, response.reportingTaskBulletins);
                     }
-
-                    // update controller service and reporting task bulletins
-                    nfSettings.setBulletins(response.controllerServiceBulletins, response.reportingTaskBulletins);
+    
                 }
-
             }
-        }
-
-        FlowStatusCtrl.prototype = {
-            constructor: FlowStatusCtrl,
-
-            /**
-             * Initialize the flow status controller.
-             */
-            init: function () {
-                this.search.init();
-            },
-
-            /**
-             * Reloads the current status of the flow.
-             */
-            reloadFlowStatus: function () {
-                var flowStatusCtrl = this;
-
-                return $.ajax({
-                    type: 'GET',
-                    url: config.urls.status,
-                    dataType: 'json'
-                }).done(function (response) {
-                    // report the updated status
-                    if (nfCommon.isDefinedAndNotNull(response.controllerStatus)) {
-                        flowStatusCtrl.update(response.controllerStatus);
-                    }
-                }).fail(nfErrorHandler.handleAjaxError);
-            },
-
-            /**
-             * Updates the cluster summary.
-             *
-             * @param summary
-             */
-            updateClusterSummary: function (summary) {
-                // see if this node has been (dis)connected
-                if (nfClusterSummary.isConnectedToCluster() !== summary.connectedToCluster) {
-                    if (summary.connectedToCluster) {
-                        nfDialog.showConnectedToClusterMessage();
-                    } else {
-                        nfDialog.showDisconnectedFromClusterMessage();
+    
+            FlowStatusCtrl.prototype = {
+                constructor: FlowStatusCtrl,
+    
+                /**
+                 * Initialize the flow status controller.
+                 */
+                init: function () {
+                    this.search.init();
+                },
+    
+                /**
+                 * Reloads the current status of the flow.
+                 */
+                reloadFlowStatus: function () {
+                  var flowStatusCtrl = this;
+    
+                    return $.ajax({
+                        type: 'GET',
+                        url: config.urls.status,
+                        dataType: 'json'
+                    }).done(function (response) {
+                        // report the updated status
+                      if (nfCommon.isDefinedAndNotNull(response.controllerStatus)) {
+                          flowStatusCtrl.update(response.controllerStatus);
+                        }
+                  }).fail(nfErrorHandler.handleAjaxError);
+                },
+    
+                /**
+                 * Updates the cluster summary.
+                 *
+               * @param summary
+                 */
+              updateClusterSummary: function (summary) {
+                    // see if this node has been (dis)connected
+                  if (nfClusterSummary.isConnectedToCluster() !== summary.connectedToCluster) {
+                      if (summary.connectedToCluster) {
+                          nfDialog.showConnectedToClusterMessage();
+                        } else {
+                          nfDialog.showDisconnectedFromClusterMessage();
+                        }
                     }
-                }
-
-                var color = '#728E9B';
-
-                // update the connection state
-                if (summary.connectedToCluster) {
-                    if (nfCommon.isDefinedAndNotNull(summary.connectedNodes)) {
-                        var connectedNodes = summary.connectedNodes.split(' / ');
-                        if (connectedNodes.length === 2 && connectedNodes[0] !== connectedNodes[1]) {
-                            this.clusterConnectionWarning = true;
-                            color = '#BA554A';
+    
+                    var color = '#728E9B';
+    
+                    // update the connection state
+                  if (summary.connectedToCluster) {
+                      if (nfCommon.isDefinedAndNotNull(summary.connectedNodes)) {
+                          var connectedNodes = summary.connectedNodes.split(' / ');
+                            if (connectedNodes.length === 2 && connectedNodes[0] !== connectedNodes[1]) {
+                                this.clusterConnectionWarning = true;
+                                color = '#BA554A';
+                            }
                         }
+                        this.connectedNodesCount =
+                          nfCommon.isDefinedAndNotNull(summary.connectedNodes) ? summary.connectedNodes : '-';
+                    } else {
+                        this.connectedNodesCount = 'Disconnected';
+                        color = '#BA554A';
                     }
-                    this.connectedNodesCount =
-                        nfCommon.isDefinedAndNotNull(summary.connectedNodes) ? summary.connectedNodes : '-';
-                } else {
-                    this.connectedNodesCount = 'Disconnected';
-                    color = '#BA554A';
-                }
-
-                // update the color
-                $('#connected-nodes-count').closest('div.fa-cubes').css('color', color);
-            },
-
-            /**
-             * Update the flow status counts.
-             *
-             * @param status  The controller status returned from the `../nifi-api/flow/status` endpoint.
-             */
-            update: function (status) {
-                var controllerInvalidCount = (nfCommon.isDefinedAndNotNull(status.invalidCount)) ? status.invalidCount : 0;
-
-                if (this.controllerInvalidCount > 0) {
-                    $('#controller-invalid-count').parent().removeClass('zero').addClass('invalid');
-                } else {
-                    $('#controller-invalid-count').parent().removeClass('invalid').addClass('zero');
-                }
-
-                // update the report values
-                this.activeThreadCount = status.activeThreadCount;
-
-                if (this.activeThreadCount > 0) {
-                    $('#flow-status-container').find('.icon-threads').removeClass('zero');
-                } else {
-                    $('#flow-status-container').find('.icon-threads').addClass('zero');
-                }
-
-                this.totalQueued = status.queued;
-
-                if (this.totalQueued.indexOf('0 / 0') >= 0) {
-                    $('#flow-status-container').find('.fa-list').addClass('zero');
-                } else {
-                    $('#flow-status-container').find('.fa-list').removeClass('zero');
-                }
-
-                // update the component counts
-                this.controllerTransmittingCount =
-                    nfCommon.isDefinedAndNotNull(status.activeRemotePortCount) ?
-                        status.activeRemotePortCount : '-';
-
-                if (this.controllerTransmittingCount > 0) {
-                    $('#flow-status-container').find('.fa-bullseye').removeClass('zero').addClass('transmitting');
-                } else {
-                    $('#flow-status-container').find('.fa-bullseye').removeClass('transmitting').addClass('zero');
-                }
-
-                this.controllerNotTransmittingCount =
-                    nfCommon.isDefinedAndNotNull(status.inactiveRemotePortCount) ?
-                        status.inactiveRemotePortCount : '-';
-
-                if (this.controllerNotTransmittingCount > 0) {
-                    $('#flow-status-container').find('.icon-transmit-false').removeClass('zero').addClass('not-transmitting');
-                } else {
-                    $('#flow-status-container').find('.icon-transmit-false').removeClass('not-transmitting').addClass('zero');
-                }
-
-                this.controllerRunningCount =
-                    nfCommon.isDefinedAndNotNull(status.runningCount) ? status.runningCount : '-';
-
-                if (this.controllerRunningCount > 0) {
-                    $('#flow-status-container').find('.fa-play').removeClass('zero').addClass('running');
-                } else {
-                    $('#flow-status-container').find('.fa-play').removeClass('running').addClass('zero');
-                }
-
-                this.controllerStoppedCount =
-                    nfCommon.isDefinedAndNotNull(status.stoppedCount) ? status.stoppedCount : '-';
-
-                if (this.controllerStoppedCount > 0) {
-                    $('#flow-status-container').find('.fa-stop').removeClass('zero').addClass('stopped');
-                } else {
-                    $('#flow-status-container').find('.fa-stop').removeClass('stopped').addClass('zero');
-                }
-
-                this.controllerInvalidCount =
-                    nfCommon.isDefinedAndNotNull(status.invalidCount) ? status.invalidCount : '-';
-
-                if (this.controllerInvalidCount > 0) {
-                    $('#flow-status-container').find('.fa-warning').removeClass('zero').addClass('invalid');
-                } else {
-                    $('#flow-status-container').find('.fa-warning').removeClass('invalid').addClass('zero');
-                }
-
-                this.controllerDisabledCount =
-                    nfCommon.isDefinedAndNotNull(status.disabledCount) ? status.disabledCount : '-';
-
-                if (this.controllerDisabledCount > 0) {
-                    $('#flow-status-container').find('.icon-enable-false').removeClass('zero').addClass('disabled');
-                } else {
-                    $('#flow-status-container').find('.icon-enable-false').removeClass('disabled').addClass('zero');
+    
+                    // update the color
+                    $('#connected-nodes-count').closest('div.fa-cubes').css('color', color);
+                },
+    
+                /**
+                 * Update the flow status counts.
+                 *
+                 * @param status  The controller status returned from the `../nifi-api/flow/status` endpoint.
+                 */
+                update: function (status) {
+                  var controllerInvalidCount = (nfCommon.isDefinedAndNotNull(status.invalidCount)) ? status.invalidCount : 0;
+  
+                  if (this.controllerInvalidCount > 0) {
+                      $('#controller-invalid-count').parent().removeClass('zero').addClass('invalid');
+                  } else {
+                      $('#controller-invalid-count').parent().removeClass('invalid').addClass('zero');
+                  }
+    
+                    // update the report values
+                    this.activeThreadCount = status.activeThreadCount;
+    
+                  if (this.activeThreadCount > 0) {
+                      $('#flow-status-container').find('.icon-threads').removeClass('zero');
+                  } else {
+                      $('#flow-status-container').find('.icon-threads').addClass('zero');
+                  }
+  
+                    this.totalQueued = status.queued;
+    
+                  if (this.totalQueued.indexOf('0 / 0') >= 0) {
+                      $('#flow-status-container').find('.fa-list').addClass('zero');
+                  } else {
+                      $('#flow-status-container').find('.fa-list').removeClass('zero');
+                  }
+  
+                    // update the component counts
+                    this.controllerTransmittingCount =
+                      nfCommon.isDefinedAndNotNull(status.activeRemotePortCount) ?
+                            status.activeRemotePortCount : '-';
+    
+                  if (this.controllerTransmittingCount > 0) {
+                      $('#flow-status-container').find('.fa-bullseye').removeClass('zero').addClass('transmitting');
+                  } else {
+                      $('#flow-status-container').find('.fa-bullseye').removeClass('transmitting').addClass('zero');
+                  }
+  
+                    this.controllerNotTransmittingCount =
+                      nfCommon.isDefinedAndNotNull(status.inactiveRemotePortCount) ?
+                            status.inactiveRemotePortCount : '-';
+    
+                  if (this.controllerNotTransmittingCount > 0) {
+                      $('#flow-status-container').find('.icon-transmit-false').removeClass('zero').addClass('not-transmitting');
+                  } else {
+                      $('#flow-status-container').find('.icon-transmit-false').removeClass('not-transmitting').addClass('zero');
+                  }
+  
+                    this.controllerRunningCount =
+                      nfCommon.isDefinedAndNotNull(status.runningCount) ? status.runningCount : '-';
+  
+                  if (this.controllerRunningCount > 0) {
+                      $('#flow-status-container').find('.fa-play').removeClass('zero').addClass('running');
+                  } else {
+                      $('#flow-status-container').find('.fa-play').removeClass('running').addClass('zero');
+                  }
+    
+                    this.controllerStoppedCount =
+                      nfCommon.isDefinedAndNotNull(status.stoppedCount) ? status.stoppedCount : '-';
+  
+                  if (this.controllerStoppedCount > 0) {
+                      $('#flow-status-container').find('.fa-stop').removeClass('zero').addClass('stopped');
+                  } else {
+                      $('#flow-status-container').find('.fa-stop').removeClass('stopped').addClass('zero');
+                  }
+    
+                    this.controllerInvalidCount =
+                      nfCommon.isDefinedAndNotNull(status.invalidCount) ? status.invalidCount : '-';
+  
+                  if (this.controllerInvalidCount > 0) {
+                      $('#flow-status-container').find('.fa-warning').removeClass('zero').addClass('invalid');
+                  } else {
+                      $('#flow-status-container').find('.fa-warning').removeClass('invalid').addClass('zero');
+                  }
+    
+                    this.controllerDisabledCount =
+                      nfCommon.isDefinedAndNotNull(status.disabledCount) ? status.disabledCount : '-';
+  
+                  if (this.controllerDisabledCount > 0) {
+                      $('#flow-status-container').find('.icon-enable-false').removeClass('zero').addClass('disabled');
+                  } else {
+                      $('#flow-status-container').find('.icon-enable-false').removeClass('disabled').addClass('zero');
+                  }
+    
+                },
+    
+                /**
+                 * Updates the controller level bulletins
+                 *
+                 * @param response
+                 */
+                updateBulletins: function (response) {
+                    this.bulletins.update(response);
                 }
-
-            },
-
-            /**
-             * Updates the controller level bulletins
-             *
-             * @param response
-             */
-            updateBulletins: function (response) {
-                this.bulletins.update(response);
             }
-        }
-
-        var flowStatusCtrl = new FlowStatusCtrl();
-        return flowStatusCtrl;
-    };
-}));
\ No newline at end of file
+    
+            var flowStatusCtrl = new FlowStatusCtrl();
+            return flowStatusCtrl;
+        };
+  }));
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 28d818ead60b..ef06518a7944 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
@@ -1,440 +1,440 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common',
-                'nf.QueueListing',
-                'nf.Shell',
-                'nf.PolicyManagement',
-                'nf.ClusterSummary',
-                'nf.ErrorHandler',
-                'nf.Settings',
-                'nf.CanvasUtils'],
-            function ($, nfCommon, nfQueueListing, nfShell, nfPolicyManagement, nfClusterSummary, nfErrorHandler, nfSettings, nfCanvasUtils) {
-                return (nf.ng.Canvas.GlobalMenuCtrl = factory($, nfCommon, nfQueueListing, nfShell, nfPolicyManagement, nfClusterSummary, nfErrorHandler, nfSettings, nfCanvasUtils));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.Canvas.GlobalMenuCtrl =
-            factory(require('jquery'),
-                require('nf.Common'),
-                require('nf.QueueListing'),
-                require('nf.Shell'),
-                require('nf.PolicyManagement'),
-                require('nf.ClusterSummary'),
-                require('nf.ErrorHandler'),
-                require('nf.Settings'),
-                require('nf.CanvasUtils')));
-    } else {
-        nf.ng.Canvas.GlobalMenuCtrl = factory(root.$,
-            root.nf.Common,
-            root.nf.QueueListing,
-            root.nf.Shell,
-            root.nf.PolicyManagement,
-            root.nf.ClusterSummary,
-            root.nf.ErrorHandler,
-            root.nf.Settings,
-            root.nf.CanvasUtils);
-    }
-}(this, function ($, nfCommon, nfQueueListing, nfShell, nfPolicyManagement, nfClusterSummary, nfErrorHandler, nfSettings, nfCanvasUtils) {
-    'use strict';
-
-    return function (serviceProvider) {
-        'use strict';
-
-        var config = {
-            urls: {
-                helpDocument: '../nifi-docs/documentation',
-                controllerAbout: '../nifi-api/flow/about'
-            }
-        };
-
-        function GlobalMenuCtrl(serviceProvider) {
-
-            /**
-             * The summary menu item controller.
-             */
-            this.summary = {
-
-                /**
-                 * The summary menu item's shell controller.
-                 */
-                shell: {
-
-                    /**
-                     * Launch the summary shell.
-                     */
-                    launch: function () {
-                        nfShell.showPage('summary');
-                    }
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.QueueListing',
+                  'nf.Shell',
+                  'nf.PolicyManagement',
+                  'nf.ClusterSummary',
+                  'nf.ErrorHandler',
+                  'nf.Settings',
+                  'nf.CanvasUtils'],
+              function ($, nfCommon, nfQueueListing, nfShell, nfPolicyManagement, nfClusterSummary, nfErrorHandler, nfSettings, nfCanvasUtils) {
+                  return (nf.ng.Canvas.GlobalMenuCtrl = factory($, nfCommon, nfQueueListing, nfShell, nfPolicyManagement, nfClusterSummary, nfErrorHandler, nfSettings, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.Canvas.GlobalMenuCtrl =
+              factory(require('jquery'),
+                  require('nf.Common'),
+                  require('nf.QueueListing'),
+                  require('nf.Shell'),
+                  require('nf.PolicyManagement'),
+                  require('nf.ClusterSummary'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Settings'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.ng.Canvas.GlobalMenuCtrl = factory(root.$,
+              root.nf.Common,
+              root.nf.QueueListing,
+              root.nf.Shell,
+              root.nf.PolicyManagement,
+              root.nf.ClusterSummary,
+              root.nf.ErrorHandler,
+              root.nf.Settings,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, nfCommon, nfQueueListing, nfShell, nfPolicyManagement, nfClusterSummary, nfErrorHandler, nfSettings, nfCanvasUtils) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
+            var config = {
+                urls: {
+                    helpDocument: '../nifi-docs/documentation',
+                    controllerAbout: '../nifi-api/flow/about'
                 }
             };
-
-            /**
-             * The counters menu item controller.
-             */
-            this.counters = {
-
+    
+            function GlobalMenuCtrl(serviceProvider) {
+    
                 /**
-                 * The counters menu item's shell controller.
+                 * The summary menu item controller.
                  */
-                shell: {
-
+                this.summary = {
+    
                     /**
-                     * Launch the counters shell.
+                     * The summary menu item's shell controller.
                      */
-                    launch: function () {
-                        if (nfCommon.canAccessCounters()) {
-                            nfShell.showPage('counters');
+                    shell: {
+    
+                        /**
+                         * Launch the summary shell.
+                         */
+                        launch: function () {
+                          nfShell.showPage('summary');
                         }
                     }
-                }
-            };
-
-            /**
-             * The bulletin board menu item controller.
-             */
-            this.bulletinBoard = {
-
+                };
+    
                 /**
-                 * The bulletin board menu item's shell controller.
+                 * The counters menu item controller.
                  */
-                shell: {
-
+                this.counters = {
+    
                     /**
-                     * Launch the bulletin board shell.
+                     * The counters menu item's shell controller.
                      */
-                    launch: function () {
-                        nfShell.showPage('bulletin-board');
+                    shell: {
+    
+                        /**
+                         * Launch the counters shell.
+                         */
+                        launch: function () {
+                          if (nfCommon.canAccessCounters()) {
+                              nfShell.showPage('counters');
+                            }
+                        }
                     }
-                }
-            };
-
-            /**
-             * The data provenance menu item controller.
-             */
-            this.dataProvenance = {
-
+                };
+    
                 /**
-                 * The data provenance menu item's shell controller.
+                 * The bulletin board menu item controller.
                  */
-                shell: {
-
+                this.bulletinBoard = {
+    
                     /**
-                     * Launch the data provenance shell.
+                     * The bulletin board menu item's shell controller.
                      */
-                    launch: function () {
-                        if (nfCommon.canAccessProvenance()) {
-                            nfShell.showPage('provenance');
+                    shell: {
+    
+                        /**
+                         * Launch the bulletin board shell.
+                         */
+                        launch: function () {
+                          nfShell.showPage('bulletin-board');
                         }
                     }
-                }
-            };
-
-            /**
-             * The controller settings menu item controller.
-             */
-            this.controllerSettings = {
-
+                };
+    
                 /**
-                 * The controller settings menu item's shell controller.
+                 * The data provenance menu item controller.
                  */
-                shell: {
-
+                this.dataProvenance = {
+    
                     /**
-                     * Launch the settings shell.
+                     * The data provenance menu item's shell controller.
                      */
-                    launch: function () {
-                        nfSettings.showSettings();
+                    shell: {
+    
+                        /**
+                         * Launch the data provenance shell.
+                         */
+                        launch: function () {
+                          if (nfCommon.canAccessProvenance()) {
+                              nfShell.showPage('provenance');
+                            }
+                        }
                     }
-                }
-            };
-
-            /**
-             * The cluster menu item controller.
-             */
-            this.cluster = {
-
+                };
+    
                 /**
-                 * Determines if the cluster menu item is enabled.
-                 *
-                 * @returns {*|boolean}
+                 * The controller settings menu item controller.
                  */
-                visible: function () {
-                    return nfClusterSummary.isConnectedToCluster();
-                },
-
-                /**
-                 * The cluster menu item's shell controller.
-                 */
-                shell: {
-
+                this.controllerSettings = {
+    
                     /**
-                     * Launch the cluster shell.
+                     * The controller settings menu item's shell controller.
                      */
-                    launch: function () {
-                        if (nfCommon.canAccessController()) {
-                            nfShell.showPage('cluster');
+                    shell: {
+    
+                        /**
+                         * Launch the settings shell.
+                         */
+                        launch: function () {
+                          nfSettings.showSettings();
                         }
                     }
-                }
-            };
-
-            /**
-             * The flow config history menu item controller.
-             */
-            this.flowConfigHistory = {
-
+                };
+    
                 /**
-                 * The flow config history menu item's shell controller.
+                 * The cluster menu item controller.
                  */
-                shell: {
-
+                this.cluster = {
+    
                     /**
-                     * Launch the history shell.
+                     * Determines if the cluster menu item is enabled.
+                     *
+                     * @returns {*|boolean}
                      */
-                    launch: function () {
-                        nfShell.showPage('history');
+                    visible: function () {
+                      return nfClusterSummary.isConnectedToCluster();
+                    },
+    
+                    /**
+                     * The cluster menu item's shell controller.
+                     */
+                    shell: {
+    
+                        /**
+                         * Launch the cluster shell.
+                         */
+                        launch: function () {
+                          if (nfCommon.canAccessController()) {
+                              nfShell.showPage('cluster');
+                            }
+                        }
                     }
-                }
-            };
-
-            /**
-             * The users menu item controller.
-             */
-            this.users = {
-
+                };
+    
                 /**
-                 * The users menu item's shell controller.
+                 * The flow config history menu item controller.
                  */
-                shell: {
-
+                this.flowConfigHistory = {
+    
                     /**
-                     * Launch the users shell.
+                     * The flow config history menu item's shell controller.
                      */
-                    launch: function () {
-                        if (nfCommon.canAccessTenants()) {
-                            nfShell.showPage('users');
+                    shell: {
+    
+                        /**
+                         * Launch the history shell.
+                         */
+                        launch: function () {
+                          nfShell.showPage('history');
                         }
                     }
-                }
-            };
-
-            /**
-             * The policies menu item controller.
-             */
-            this.policies = {
-
+                };
+    
                 /**
-                 * The policies menu item's shell controller.
+                 * The users menu item controller.
                  */
-                shell: {
-
+                this.users = {
+    
                     /**
-                     * Launch the policies shell.
+                     * The users menu item's shell controller.
                      */
-                    launch: function () {
-                        if (nfCommon.canModifyPolicies() && nfCommon.canAccessTenants()) {
-                            nfPolicyManagement.showGlobalPolicies();
+                    shell: {
+    
+                        /**
+                         * Launch the users shell.
+                         */
+                        launch: function () {
+                          if (nfCommon.canAccessTenants()) {
+                              nfShell.showPage('users');
+                            }
                         }
                     }
-                }
-            };
-
-            /**
-             * The templates menu item controller.
-             */
-            this.templates = {
-
+                };
+    
                 /**
-                 * The templates menu item's shell controller.
+                 * The policies menu item controller.
                  */
-                shell: {
-
+                this.policies = {
+    
                     /**
-                     * Launch the templates shell.
+                     * The policies menu item's shell controller.
                      */
-                    launch: function () {
-                        nfShell.showPage('templates?' + $.param({
-                                groupId: nfCanvasUtils.getGroupId()
-                            }));
+                    shell: {
+    
+                        /**
+                         * Launch the policies shell.
+                         */
+                        launch: function () {
+                          if (nfCommon.canModifyPolicies() && nfCommon.canAccessTenants()) {
+                              nfPolicyManagement.showGlobalPolicies();
+                            }
+                        }
                     }
-                }
-            };
-
-            /**
-             * The help menu item controller.
-             */
-            this.help = {
-
+                };
+    
                 /**
-                 * The help menu item's shell controller.
+                 * The templates menu item controller.
                  */
-                shell: {
-
+                this.templates = {
+    
                     /**
-                     * Launch the help documentation shell.
+                     * The templates menu item's shell controller.
                      */
-                    launch: function () {
-                        nfShell.showPage(config.urls.helpDocument);
+                    shell: {
+    
+                        /**
+                         * Launch the templates shell.
+                         */
+                        launch: function () {
+                          nfShell.showPage('templates?' + $.param({
+                                  groupId: nfCanvasUtils.getGroupId()
+                                }));
+                        }
                     }
-                }
-            };
-
-            /**
-             * The about menu item controller.
-             */
-            this.about = {
-
+                };
+    
                 /**
-                 * Initialize the about details.
+                 * The help menu item controller.
                  */
-                init: function () {
-                    // get the about details
-                    $.ajax({
-                        type: 'GET',
-                        url: config.urls.controllerAbout,
-                        dataType: 'json'
-                    }).done(function (response) {
-                        var aboutDetails = response.about;
-                        // set the document title and the about title
-                        document.title = aboutDetails.title;
-                        $('#nf-version').text(aboutDetails.version);
-                        var showVersionDetail = false;
-                        if (aboutDetails.buildTag && aboutDetails.buildTag !== 'HEAD') {
-                            $('#nf-about-build-tag').text(aboutDetails.buildTag);
-                            $('#nf-version-detail-tag').show();
-                            showVersionDetail = true;
-                        }
-                        if (aboutDetails.buildRevision) {
-                            $('#nf-about-build-revision').text(aboutDetails.buildRevision);
-                            $('#nf-about-build-branch').text(aboutDetails.buildBranch);
-                            $('#nf-version-detail-commit').show();
-                            showVersionDetail = true
-                        }
-                        if (aboutDetails.buildTimestamp) {
-                            $('#nf-about-build-timestamp').text(aboutDetails.buildTimestamp);
-                            $('#nf-version-detail-timestamp').show();
-                            showVersionDetail = true;
-                        }
-                        if (showVersionDetail) {
-                            $('#nf-version-detail').show();
-                        }
-
-                        // store the content viewer url if available
-                        if (!nfCommon.isBlank(aboutDetails.contentViewerUrl)) {
-                            $('#nifi-content-viewer-url').text(aboutDetails.contentViewerUrl);
-                            nfQueueListing.initFlowFileDetailsDialog();
+                this.help = {
+    
+                    /**
+                     * The help menu item's shell controller.
+                     */
+                    shell: {
+    
+                        /**
+                         * Launch the help documentation shell.
+                         */
+                        launch: function () {
+                          nfShell.showPage(config.urls.helpDocument);
                         }
-                    }).fail(nfErrorHandler.handleAjaxError);
-
-                    this.modal.init();
-                },
-
+                    }
+                };
+    
                 /**
-                 * The about menu item's modal controller.
+                 * The about menu item controller.
                  */
-                modal: {
-
+                this.about = {
+    
                     /**
-                     * Gets the modal element.
-                     *
-                     * @returns {*|jQuery|HTMLElement}
+                     * Initialize the about details.
                      */
-                    getElement: function () {
-                        return $('#nf-about');
+                    init: function () {
+                        // get the about details
+                        $.ajax({
+                            type: 'GET',
+                            url: config.urls.controllerAbout,
+                            dataType: 'json'
+                        }).done(function (response) {
+                            var aboutDetails = response.about;
+                            // set the document title and the about title
+                      document.title = nf._.msg('nf-about');
+                            $('#nf-version').text(aboutDetails.version);
+                          var showVersionDetail = false;
+                          if (aboutDetails.buildTag && aboutDetails.buildTag !== 'HEAD') {
+                              $('#nf-about-build-tag').text(aboutDetails.buildTag);
+                              $('#nf-version-detail-tag').show();
+                              showVersionDetail = true;
+                          }
+                          if (aboutDetails.buildRevision) {
+                              $('#nf-about-build-revision').text(aboutDetails.buildRevision);
+                              $('#nf-about-build-branch').text(aboutDetails.buildBranch);
+                              $('#nf-version-detail-commit').show();
+                              showVersionDetail = true
+                          }
+                          if (aboutDetails.buildTimestamp) {
+                              $('#nf-about-build-timestamp').text(aboutDetails.buildTimestamp);
+                              $('#nf-version-detail-timestamp').show();
+                              showVersionDetail = true;
+                          }
+                          if (showVersionDetail) {
+                              $('#nf-version-detail').show();
+                          }
+    
+                            // store the content viewer url if available
+                          if (!nfCommon.isBlank(aboutDetails.contentViewerUrl)) {
+                                $('#nifi-content-viewer-url').text(aboutDetails.contentViewerUrl);
+                              nfQueueListing.initFlowFileDetailsDialog();
+                            }
+                      }).fail(nfErrorHandler.handleAjaxError);
+    
+                        this.modal.init();
                     },
-
+    
                     /**
-                     * Initialize the modal.
+                     * The about menu item's modal controller.
                      */
-                    init: function () {
-                        var aboutModal = this;
-
-                        var resizeAbout = function () {
-                            var dialog = $(this);
-                            var top = $('#nf-about-pic-container').height() + $('.dialog-header').height() + 10; //10 for padding-top
-                            dialog.find('.dialog-content').css('top', top);
-                        };
-
-                        this.getElement().modal({
-                            scrollableContentStyle: 'scrollable',
-                            headerText: 'About Apache NiFi',
-                            handler: {
-                                resize: resizeAbout
-                            },
-                            buttons: [{
-                                buttonText: 'Ok',
-                                color: {
-                                    base: '#728E9B',
-                                    hover: '#004849',
-                                    text: '#ffffff'
-                                },
+                    modal: {
+    
+                        /**
+                         * Gets the modal element.
+                         *
+                         * @returns {*|jQuery|HTMLElement}
+                         */
+                        getElement: function () {
+                            return $('#nf-about');
+                        },
+    
+                        /**
+                         * Initialize the modal.
+                         */
+                        init: function () {
+                          var aboutModal = this;
+    
+                            var resizeAbout = function () {
+                                var dialog = $(this);
+                                var top = $('#nf-about-pic-container').height() + $('.dialog-header').height() + 10; //10 for padding-top
+                                dialog.find('.dialog-content').css('top', top);
+                            };
+    
+                            this.getElement().modal({
+                                scrollableContentStyle: 'scrollable',
+                          headerText: nf._.msg('nf-canvas-global-menu-controller.About'),
                                 handler: {
-                                    click: function () {
-                                        aboutModal.hide();
+                                    resize: resizeAbout
+                                },
+                                buttons: [{
+                              buttonText: nf._.msg('nf-canvas-global-menu-controller.OK'),
+                                    color: {
+                                        base: '#728E9B',
+                                        hover: '#004849',
+                                        text: '#ffffff'
+                                    },
+                                    handler: {
+                                        click: function () {
+                                          aboutModal.hide();
+                                        }
                                     }
-                                }
-                            }]
-                        });
-                    },
-
-                    /**
-                     * Updates the modal config.
-                     *
-                     * @param {string} name             The name of the property to update.
-                     * @param {object|array} config     The config for the `name`.
-                     */
-                    update: function (name, config) {
-                        this.getElement().modal(name, config);
-                    },
-
-                    /**
-                     * Show the modal
-                     */
-                    show: function () {
-                        this.getElement().modal('show');
-                    },
-
-                    /**
-                     * Hide the modal
-                     */
-                    hide: function () {
-                        this.getElement().modal('hide');
+                                }]
+                            });
+                        },
+    
+                        /**
+                         * Updates the modal config.
+                         *
+                         * @param {string} name             The name of the property to update.
+                         * @param {object|array} config     The config for the `name`.
+                         */
+                        update: function (name, config) {
+                            this.getElement().modal(name, config);
+                        },
+    
+                        /**
+                         * Show the modal
+                         */
+                        show: function () {
+                            this.getElement().modal('show');
+                        },
+    
+                        /**
+                         * Hide the modal
+                         */
+                        hide: function () {
+                            this.getElement().modal('hide');
+                        }
                     }
                 }
             }
-        }
-
-        GlobalMenuCtrl.prototype = {
-            constructor: GlobalMenuCtrl,
-
-            /**
-             * Initialize the global menu controls.
-             */
-            init: function () {
-                this.about.init();
+    
+            GlobalMenuCtrl.prototype = {
+                constructor: GlobalMenuCtrl,
+    
+                /**
+                 * Initialize the global menu controls.
+                 */
+                init: function () {
+                    this.about.init();
+                }
             }
-        }
-
-        var globalMenuCtrl = new GlobalMenuCtrl();
-        return globalMenuCtrl;
-    };
-}));
\ No newline at end of file
+    
+            var globalMenuCtrl = new GlobalMenuCtrl();
+            return globalMenuCtrl;
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js
index e66133819439..88c5844d69a8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js
@@ -1,351 +1,351 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Actions',
-                'nf.Birdseye',
-                'nf.Storage',
-                'nf.CanvasUtils',
-                'nf.ProcessGroupConfiguration'],
-            function ($, nfActions, nfBirdseye, nfStorage, nfCanvasUtils, nfProcessGroupConfiguration) {
-                return (nf.ng.Canvas.GraphControlsCtrl = factory($, nfActions, nfBirdseye, nfStorage, nfCanvasUtils, nfProcessGroupConfiguration));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.Canvas.GraphControlsCtrl =
-            factory(require('jquery'),
-                require('nf.Actions'),
-                require('nf.Birdseye'),
-                require('nf.Storage'),
-                require('nf.CanvasUtils'),
-                require('nf.ProcessGroupConfiguration')));
-    } else {
-        nf.ng.Canvas.GraphControlsCtrl = factory(root.$,
-            root.nf.Actions,
-            root.nf.Birdseye,
-            root.nf.Storage,
-            root.nf.CanvasUtils,
-            root.nf.ProcessGroupConfiguration);
-    }
-}(this, function ($, nfActions, nfBirdseye, nfStorage, nfCanvasUtils, nfProcessGroupConfiguration) {
-    'use strict';
-
-    return function (serviceProvider, navigateCtrl, operateCtrl) {
-        'use strict';
-
-        /**
-         * Opens the specified graph control.
-         *
-         * @param {jQuery} graphControl
-         */
-        var openGraphControl = function (graphControl) {
-            // undock if necessary
-            if ($('div.graph-control-content').is(':visible') === false) {
-                $('#graph-controls div.graph-control-docked').hide();
-                $('#graph-controls div.graph-control-header-container').show();
-                $('.graph-control').removeClass('docked');
-            }
-
-            // show the content of the specified graph control
-            graphControl.children('div.graph-control-content').show();
-            graphControl.find('div.graph-control-expansion').removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
-
-            // handle specific actions as necessary
-            if (graphControl.attr('id') === 'navigation-control') {
-                nfBirdseye.updateBirdseyeVisibility(true);
-            }
-
-            // get the current visibility
-            var graphControlVisibility = nfStorage.getItem('graph-control-visibility');
-            if (graphControlVisibility === null) {
-                graphControlVisibility = {};
-            }
-
-            // update the visibility for this graph control
-            var graphControlId = graphControl.attr('id');
-            graphControlVisibility[graphControlId] = true;
-            nfStorage.setItem('graph-control-visibility', graphControlVisibility);
-        };
-
-        /**
-         * Hides the specified graph control.
-         *
-         * @param {jQuery} graphControl
-         */
-        var hideGraphControl = function (graphControl) {
-            // hide the content of the specified graph control
-            graphControl.children('div.graph-control-content').hide();
-            graphControl.find('div.graph-control-expansion').removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
-
-            // dock if necessary
-            if ($('div.graph-control-content').is(':visible') === false) {
-                $('#graph-controls div.graph-control-header-container').hide();
-                $('#graph-controls div.graph-control-docked').show();
-                $('.graph-control').addClass('docked');
-            }
-
-            // handle specific actions as necessary
-            if (graphControl.attr('id') === 'navigation-control') {
-                nfBirdseye.updateBirdseyeVisibility(false);
-            }
-
-            // get the current visibility
-            var graphControlVisibility = nfStorage.getItem('graph-control-visibility');
-            if (graphControlVisibility === null) {
-                graphControlVisibility = {};
-            }
-
-            // update the visibility for this graph control
-            var graphControlId = graphControl.attr('id');
-            graphControlVisibility[graphControlId] = false;
-            nfStorage.setItem('graph-control-visibility', graphControlVisibility);
-        };
-
-        function GraphControlsCtrl(navigateCtrl, operateCtrl) {
-            this.navigateCtrl = navigateCtrl;
-            this.operateCtrl = operateCtrl;
-        }
-
-        GraphControlsCtrl.prototype = {
-            constructor: GraphControlsCtrl,
-
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Actions',
+                  'nf.Birdseye',
+                  'nf.Storage',
+                  'nf.CanvasUtils',
+                  'nf.ProcessGroupConfiguration'],
+              function ($, nfActions, nfBirdseye, nfStorage, nfCanvasUtils, nfProcessGroupConfiguration) {
+                  return (nf.ng.Canvas.GraphControlsCtrl = factory($, nfActions, nfBirdseye, nfStorage, nfCanvasUtils, nfProcessGroupConfiguration));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.Canvas.GraphControlsCtrl =
+              factory(require('jquery'),
+                  require('nf.Actions'),
+                  require('nf.Birdseye'),
+                  require('nf.Storage'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ProcessGroupConfiguration')));
+      } else {
+          nf.ng.Canvas.GraphControlsCtrl = factory(root.$,
+              root.nf.Actions,
+              root.nf.Birdseye,
+              root.nf.Storage,
+              root.nf.CanvasUtils,
+              root.nf.ProcessGroupConfiguration);
+      }
+  }(this, function ($, nfActions, nfBirdseye, nfStorage, nfCanvasUtils, nfProcessGroupConfiguration) {
+      'use strict';
+  
+      return function (serviceProvider, navigateCtrl, operateCtrl) {
+            'use strict';
+    
             /**
-             *  Register the header controller.
+             * Opens the specified graph control.
+             *
+             * @param {jQuery} graphControl
              */
-            register: function () {
-                if (serviceProvider.graphControlsCtrl === undefined) {
-                    serviceProvider.register('graphControlsCtrl', graphControlsCtrl);
+            var openGraphControl = function (graphControl) {
+                // undock if necessary
+                if ($('div.graph-control-content').is(':visible') === false) {
+                    $('#graph-controls div.graph-control-docked').hide();
+                    $('#graph-controls div.graph-control-header-container').show();
+                    $('.graph-control').removeClass('docked');
                 }
-            },
-
-            /**
-             * Initialize the graph controls.
-             */
-            init: function () {
-                this.operateCtrl.init();
-                // initial the graph control visibility
-                var graphControlVisibility = nfStorage.getItem('graph-control-visibility');
-                if (graphControlVisibility !== null) {
-                    $.each(graphControlVisibility, function (id, isVisible) {
-                        var graphControl = $('#' + id);
-                        if (graphControl) {
-                            if (isVisible) {
-                                openGraphControl(graphControl);
-                            } else {
-                                hideGraphControl(graphControl);
-                            }
-                        }
-                    });
-                } else {
-                    openGraphControl($('#navigation-control'));
-                    openGraphControl($('#operation-control'));
+    
+                // show the content of the specified graph control
+                graphControl.children('div.graph-control-content').show();
+                graphControl.find('div.graph-control-expansion').removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
+    
+                // handle specific actions as necessary
+                if (graphControl.attr('id') === 'navigation-control') {
+                  nfBirdseye.updateBirdseyeVisibility(true);
                 }
-            },
-
-            /**
-             * Undock the graph control.
-             * @param {jQuery} $event
-             */
-            undock: function ($event) {
-                openGraphControl($($event.target).parent());
-            },
-
-            /**
-             * Expand the graph control.
-             * @param {jQuery} $event
-             */
-            expand: function ($event) {
-                var icon = $($event.target);
-                if (icon.find('.fa-plus-square-o').length > 0 || icon.hasClass('fa-plus-square-o') || icon.parent().children().find('.fa-plus-square-o').length > 0) {
-                    openGraphControl(icon.closest('div.graph-control'));
-                } else {
-                    hideGraphControl(icon.closest('div.graph-control'));
+    
+                // get the current visibility
+              var graphControlVisibility = nfStorage.getItem('graph-control-visibility');
+                if (graphControlVisibility === null) {
+                    graphControlVisibility = {};
                 }
-            },
-
+    
+                // update the visibility for this graph control
+                var graphControlId = graphControl.attr('id');
+                graphControlVisibility[graphControlId] = true;
+              nfStorage.setItem('graph-control-visibility', graphControlVisibility);
+            };
+    
             /**
-             * Gets the icon to show for the selection context.
+             * Hides the specified graph control.
+             *
+             * @param {jQuery} graphControl
              */
-            getContextIcon: function () {
-                var selection = nfCanvasUtils.getSelection();
-
-                if (selection.empty()) {
-                    if (nfCanvasUtils.getParentGroupId() === null) {
-                        return 'icon-drop';
+            var hideGraphControl = function (graphControl) {
+                // hide the content of the specified graph control
+                graphControl.children('div.graph-control-content').hide();
+                graphControl.find('div.graph-control-expansion').removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
+    
+                // dock if necessary
+                if ($('div.graph-control-content').is(':visible') === false) {
+                    $('#graph-controls div.graph-control-header-container').hide();
+                    $('#graph-controls div.graph-control-docked').show();
+                    $('.graph-control').addClass('docked');
+                }
+    
+                // handle specific actions as necessary
+                if (graphControl.attr('id') === 'navigation-control') {
+                  nfBirdseye.updateBirdseyeVisibility(false);
+                }
+    
+                // get the current visibility
+              var graphControlVisibility = nfStorage.getItem('graph-control-visibility');
+                if (graphControlVisibility === null) {
+                    graphControlVisibility = {};
+                }
+    
+                // update the visibility for this graph control
+                var graphControlId = graphControl.attr('id');
+                graphControlVisibility[graphControlId] = false;
+              nfStorage.setItem('graph-control-visibility', graphControlVisibility);
+            };
+    
+            function GraphControlsCtrl(navigateCtrl, operateCtrl) {
+                this.navigateCtrl = navigateCtrl;
+                this.operateCtrl = operateCtrl;
+            }
+    
+            GraphControlsCtrl.prototype = {
+                constructor: GraphControlsCtrl,
+    
+                /**
+                 *  Register the header controller.
+                 */
+                register: function () {
+                    if (serviceProvider.graphControlsCtrl === undefined) {
+                        serviceProvider.register('graphControlsCtrl', graphControlsCtrl);
+                    }
+                },
+    
+                /**
+                 * Initialize the graph controls.
+                 */
+                init: function () {
+                    this.operateCtrl.init();
+                    // initial the graph control visibility
+                  var graphControlVisibility = nfStorage.getItem('graph-control-visibility');
+                    if (graphControlVisibility !== null) {
+                        $.each(graphControlVisibility, function (id, isVisible) {
+                            var graphControl = $('#' + id);
+                            if (graphControl) {
+                                if (isVisible) {
+                                    openGraphControl(graphControl);
+                                } else {
+                                    hideGraphControl(graphControl);
+                                }
+                            }
+                        });
+                    } else {
+                        openGraphControl($('#navigation-control'));
+                        openGraphControl($('#operation-control'));
+                    }
+                },
+    
+                /**
+                 * Undock the graph control.
+                 * @param {jQuery} $event
+                 */
+                undock: function ($event) {
+                    openGraphControl($($event.target).parent());
+                },
+    
+                /**
+                 * Expand the graph control.
+                 * @param {jQuery} $event
+                 */
+                expand: function ($event) {
+                    var icon = $($event.target);
+                    if (icon.find('.fa-plus-square-o').length > 0 || icon.hasClass('fa-plus-square-o') || icon.parent().children().find('.fa-plus-square-o').length > 0) {
+                        openGraphControl(icon.closest('div.graph-control'));
                     } else {
-                        return 'icon-group';
+                        hideGraphControl(icon.closest('div.graph-control'));
                     }
-                } else {
-                    if (selection.size() === 1) {
-                        if (nfCanvasUtils.isProcessor(selection)) {
-                            return 'icon-processor';
-                        } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                },
+    
+                /**
+                 * Gets the icon to show for the selection context.
+                 */
+                getContextIcon: function () {
+                  var selection = nfCanvasUtils.getSelection();
+    
+                    if (selection.empty()) {
+                      if (nfCanvasUtils.getParentGroupId() === null) {
+                            return 'icon-drop';
+                        } else {
                             return 'icon-group';
-                        } else if (nfCanvasUtils.isInputPort(selection)) {
-                            return 'icon-port-in';
-                        } else if (nfCanvasUtils.isOutputPort(selection)) {
-                            return 'icon-port-out';
-                        } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                            return 'icon-group-remote';
-                        } else if (nfCanvasUtils.isFunnel(selection)) {
-                            return 'icon-funnel';
-                        } else if (nfCanvasUtils.isLabel(selection)) {
-                            return 'icon-label';
-                        } else if (nfCanvasUtils.isConnection(selection)) {
-                            return 'icon-connect';
                         }
                     } else {
-                        return 'icon-drop';
+                        if (selection.size() === 1) {
+                          if (nfCanvasUtils.isProcessor(selection)) {
+                                return 'icon-processor';
+                          } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                                return 'icon-group';
+                          } else if (nfCanvasUtils.isInputPort(selection)) {
+                                return 'icon-port-in';
+                          } else if (nfCanvasUtils.isOutputPort(selection)) {
+                                return 'icon-port-out';
+                          } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                                return 'icon-group-remote';
+                          } else if (nfCanvasUtils.isFunnel(selection)) {
+                                return 'icon-funnel';
+                          } else if (nfCanvasUtils.isLabel(selection)) {
+                                return 'icon-label';
+                          } else if (nfCanvasUtils.isConnection(selection)) {
+                                return 'icon-connect';
+                            }
+                        } else {
+                            return 'icon-drop';
+                        }
                     }
-                }
-            },
-
-            /**
-             * Will hide target when appropriate.
-             */
-            hide: function () {
-                var selection = nfCanvasUtils.getSelection();
-                if (selection.size() > 1) {
-                    return 'invisible'
-                } else {
-                    return '';
-                }
-            },
-
-            /**
-             * Gets the name to show for the selection context.
-             */
-            getContextName: function () {
-                var selection = nfCanvasUtils.getSelection();
-                var canRead = nfCanvasUtils.canReadFromGroup();
-
-                if (selection.empty()) {
-                    if (canRead) {
-                        return nfCanvasUtils.getGroupName();
+                },
+    
+                /**
+                 * Will hide target when appropriate.
+                 */
+                hide: function () {
+                  var selection = nfCanvasUtils.getSelection();
+                    if (selection.size() > 1) {
+                        return 'invisible'
                     } else {
-                        return nfCanvasUtils.getGroupId();
+                        return '';
                     }
-                } else {
-                    if (selection.size() === 1) {
-                        var d = selection.datum();
-                        if (d.permissions.canRead) {
-                            if (nfCanvasUtils.isLabel(selection)) {
-                                if ($.trim(d.component.label) !== '') {
-                                    return d.component.label;
+                },
+    
+                /**
+                 * Gets the name to show for the selection context.
+                 */
+                getContextName: function () {
+                  var selection = nfCanvasUtils.getSelection();
+                  var canRead = nfCanvasUtils.canReadFromGroup();
+    
+                    if (selection.empty()) {
+                        if (canRead) {
+                          return nfCanvasUtils.getGroupName();
+                        } else {
+                          return nfCanvasUtils.getGroupId();
+                        }
+                    } else {
+                        if (selection.size() === 1) {
+                            var d = selection.datum();
+                            if (d.permissions.canRead) {
+                              if (nfCanvasUtils.isLabel(selection)) {
+                                    if ($.trim(d.component.label) !== '') {
+                                        return d.component.label;
+                                    } else {
+                                        return '';
+                                    }
+                              } else if (nfCanvasUtils.isConnection(selection)) {
+                                  return nfCanvasUtils.formatConnectionName(d.component);
                                 } else {
-                                    return '';
+                                    return d.component.name;
                                 }
-                            } else if (nfCanvasUtils.isConnection(selection)) {
-                                return nfCanvasUtils.formatConnectionName(d.component);
                             } else {
-                                return d.component.name;
+                                return d.id;
                             }
                         } else {
-                            return d.id;
+                            return 'Multiple components selected';
                         }
-                    } else {
-                        return 'Multiple components selected';
                     }
-                }
-            },
-
-            /**
-             * Gets the type to show for the selection context.
-             */
-            getContextType: function () {
-                var selection = nfCanvasUtils.getSelection();
-
-                if (selection.empty()) {
-                    return 'Process Group';
-                } else {
-                    if (selection.size() === 1) {
-                        if (nfCanvasUtils.isProcessor(selection)) {
-                            return 'Processor';
-                        } else if (nfCanvasUtils.isProcessGroup(selection)) {
-                            return 'Process Group';
-                        } else if (nfCanvasUtils.isInputPort(selection)) {
-                            return 'Input Port';
-                        } else if (nfCanvasUtils.isOutputPort(selection)) {
-                            return 'Output Port';
-                        } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                            return 'Remote Process Group';
-                        } else if (nfCanvasUtils.isFunnel(selection)) {
-                            return 'Funnel';
-                        } else if (nfCanvasUtils.isLabel(selection)) {
-                            return 'Label';
-                        } else if (nfCanvasUtils.isConnection(selection)) {
-                            return 'Connection';
-                        }
+                },
+    
+                /**
+                 * Gets the type to show for the selection context.
+                 */
+                getContextType: function () {
+                  var selection = nfCanvasUtils.getSelection();
+    
+                    if (selection.empty()) {
+                  return nf._.msg('nf-canvas-graph-controls-controller.ProcessGroup');
                     } else {
-                        return 'Multiple selected';
+                        if (selection.size() === 1) {
+                          if (nfCanvasUtils.isProcessor(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.Processor');
+                      } else if (nf.CanvasUtils.isProcessGroup(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.ProcessGroup');
+                      } else if (nf.CanvasUtils.isInputPort(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.InputPort');
+                      } else if (nf.CanvasUtils.isOutputPort(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.OutputPort');
+                      } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.RemoteProcessGroup');
+                      } else if (nf.CanvasUtils.isFunnel(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.Funnel');
+                      } else if (nf.CanvasUtils.isLabel(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.Label');
+                      } else if (nf.CanvasUtils.isConnection(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.Connection');
+                      }  
+                        } else {
+                      return nf._.msg('nf-canvas-graph-controls-controller.MultipleSelected');
+                        }
                     }
-                }
-            },
-
-            /**
-             * Gets the id to show for the selection context.
-             */
-            getContextId: function () {
-                var selection = nfCanvasUtils.getSelection();
-
-                if (selection.empty()) {
-                    return nfCanvasUtils.getGroupId();
-                } else {
-                    if (selection.size() === 1) {
-                        var d = selection.datum();
-                        return d.id;
+                },
+    
+                /**
+                 * Gets the id to show for the selection context.
+                 */
+                getContextId: function () {
+                  var selection = nfCanvasUtils.getSelection();
+    
+                    if (selection.empty()) {
+                      return nfCanvasUtils.getGroupId();
                     } else {
-                        return 'Multiple selected';
+                        if (selection.size() === 1) {
+                            var d = selection.datum();
+                            return d.id;
+                        } else {
+                          return nf._.msg('nf-canvas-graph-controls-controller.MultipleSelected');
+                        }
                     }
-                }
-            },
-
-            /**
-             * Determines whether the user can configure or open the details dialog.
-             */
-            canConfigureOrOpenDetails: function () {
-                var selection = nfCanvasUtils.getSelection();
-
-                if (selection.empty()) {
-                    return true;
-                }
-
-                return nfCanvasUtils.isConfigurable(selection) || nfCanvasUtils.hasDetails(selection);
-            },
-
-            /**
-             * Opens either the configuration or details view based on the current state.
-             */
-            openConfigureOrDetailsView: function () {
-                var selection = nfCanvasUtils.getSelection();
-
-                if (nfCanvasUtils.isConfigurable(selection)) {
-                    nfActions.showConfiguration(selection);
-                } else if (nfCanvasUtils.hasDetails(selection)) {
-                    nfActions.showDetails(selection);
+                },
+    
+                /**
+                 * Determines whether the user can configure or open the details dialog.
+                 */
+                canConfigureOrOpenDetails: function () {
+                  var selection = nfCanvasUtils.getSelection();
+    
+                    if (selection.empty()) {
+                        return true;
+                    }
+    
+                  return nfCanvasUtils.isConfigurable(selection) || nfCanvasUtils.hasDetails(selection);
+                },
+    
+                /**
+                 * Opens either the configuration or details view based on the current state.
+                 */
+                openConfigureOrDetailsView: function () {
+                  var selection = nfCanvasUtils.getSelection();
+  
+                  if (nfCanvasUtils.isConfigurable(selection)) {
+                      nfActions.showConfiguration(selection);
+                  } else if (nfCanvasUtils.hasDetails(selection)) {
+                      nfActions.showDetails(selection);
+                  }
                 }
             }
-        }
-
-        var graphControlsCtrl = new GraphControlsCtrl(navigateCtrl, operateCtrl);
-        graphControlsCtrl.register();
-        return graphControlsCtrl;
-    };
-}));
\ No newline at end of file
+    
+            var graphControlsCtrl = new GraphControlsCtrl(navigateCtrl, operateCtrl);
+            graphControlsCtrl.register();
+            return graphControlsCtrl;
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
index c1068bbd859f..27326fff6918 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
@@ -1,510 +1,510 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Dialog',
-                'nf.Birdseye',
-                'nf.CanvasUtils',
-                'nf.Common',
-                'nf.Client',
-                'nf.Processor'],
-            function ($, d3, nfDialog, nfBirdseye, nfCanvasUtils, nfCommon, nfClient, nfProcessor) {
-                return (nf.ng.Canvas.OperateCtrl = factory($, d3, nfDialog, nfBirdseye, nfCanvasUtils, nfCommon, nfClient, nfProcessor));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.Canvas.OperateCtrl =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.Dialog'),
-                require('nf.Birdseye'),
-                require('nf.CanvasUtils'),
-                require('nf.Common'),
-                require('nf.Client'),
-                require('nf.Processor')));
-    } else {
-        nf.ng.Canvas.OperateCtrl = factory(root.$,
-            root.d3,
-            root.nf.Dialog,
-            root.nf.Birdseye,
-            root.nf.CanvasUtils,
-            root.nf.Common,
-            root.nf.Client,
-            root.nf.Processor);
-    }
-}(this, function ($, d3, nfDialog, nfBirdseye, nfCanvasUtils, nfCommon, nfClient, nfProcessor) {
-    'use strict';
-
-    return function () {
-        'use strict';
-
-        // updates the color if its a valid hex color string
-        var updateColor = function () {
-            var hex = $('#fill-color-value').val();
-
-            // only update the fill color when its a valid hex color string
-            // #[six hex characters|three hex characters] case insensitive
-            if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)) {
-                $('#fill-color').minicolors('value', hex);
-            }
-        };
-
-        function OperateCtrl() {
-
-            /**
-             * The canvas operator's create template component.
-             */
-            this.template = {
-
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Dialog',
+                  'nf.Birdseye',
+                  'nf.CanvasUtils',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.Processor'],
+              function ($, d3, nfDialog, nfBirdseye, nfCanvasUtils, nfCommon, nfClient, nfProcessor) {
+                  return (nf.ng.Canvas.OperateCtrl = factory($, d3, nfDialog, nfBirdseye, nfCanvasUtils, nfCommon, nfClient, nfProcessor));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.Canvas.OperateCtrl =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.Dialog'),
+                  require('nf.Birdseye'),
+                  require('nf.CanvasUtils'),
+                  require('nf.Common'),
+                  require('nf.Client'),
+                  require('nf.Processor')));
+      } else {
+          nf.ng.Canvas.OperateCtrl = factory(root.$,
+              root.d3,
+              root.nf.Dialog,
+              root.nf.Birdseye,
+              root.nf.CanvasUtils,
+              root.nf.Common,
+              root.nf.Client,
+              root.nf.Processor);
+      }
+  }(this, function ($, d3, nfDialog, nfBirdseye, nfCanvasUtils, nfCommon, nfClient, nfProcessor) {
+      'use strict';
+  
+      return function () {
+            'use strict';
+    
+            // updates the color if its a valid hex color string
+            var updateColor = function () {
+                var hex = $('#fill-color-value').val();
+    
+                // only update the fill color when its a valid hex color string
+                // #[six hex characters|three hex characters] case insensitive
+                if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)) {
+                    $('#fill-color').minicolors('value', hex);
+                }
+            };
+    
+            function OperateCtrl() {
+    
                 /**
-                 * The canvas operator's create template component's modal.
+                 * The canvas operator's create template component.
                  */
-                modal: {
-
-                    /**
-                     * Gets the modal element.
-                     *
-                     * @returns {*|jQuery|HTMLElement}
-                     */
-                    getElement: function () {
-                        return $('#new-template-dialog');
-                    },
-
+                this.template = {
+    
                     /**
-                     * Initialize the modal.
+                     * The canvas operator's create template component's modal.
                      */
-                    init: function () {
-                        // configure the create template dialog
-                        this.getElement().modal({
-                            scrollableContentStyle: 'scrollable',
-                            headerText: 'Create Template'
-                        });
-                    },
-
-                    /**
-                     * Updates the modal config.
-                     *
-                     * @param {string} name             The name of the property to update.
-                     * @param {object|array} config     The config for the `name`.
-                     */
-                    update: function (name, config) {
-                        this.getElement().modal(name, config);
-                    },
-
-                    /**
-                     * Show the modal.
-                     */
-                    show: function () {
-                        this.getElement().modal('show');
-                    },
-
-                    /**
-                     * Hide the modal.
-                     */
-                    hide: function () {
-                        this.getElement().modal('hide');
+                    modal: {
+    
+                        /**
+                         * Gets the modal element.
+                         *
+                         * @returns {*|jQuery|HTMLElement}
+                         */
+                        getElement: function () {
+                            return $('#new-template-dialog');
+                        },
+    
+                        /**
+                         * Initialize the modal.
+                         */
+                        init: function () {
+                            // configure the create template dialog
+                            this.getElement().modal({
+                                scrollableContentStyle: 'scrollable',
+                          headerText: nf._.msg('nf-canvas-operate-controller.CreateTemplate')
+                            });
+                        },
+    
+                        /**
+                         * Updates the modal config.
+                         *
+                         * @param {string} name             The name of the property to update.
+                         * @param {object|array} config     The config for the `name`.
+                         */
+                        update: function (name, config) {
+                            this.getElement().modal(name, config);
+                        },
+    
+                        /**
+                         * Show the modal.
+                         */
+                        show: function () {
+                            this.getElement().modal('show');
+                        },
+    
+                        /**
+                         * Hide the modal.
+                         */
+                        hide: function () {
+                            this.getElement().modal('hide');
+                        }
                     }
-                }
-            };
-
-            /**
-             * The canvas operator's create template component.
-             */
-            this.templateUpload = {
-
+                };
+    
                 /**
-                 * The canvas operator's create template component's modal.
+                 * The canvas operator's create template component.
                  */
-                modal: {
-
-                    /**
-                     * Gets the modal element.
-                     *
-                     * @returns {*|jQuery|HTMLElement}
-                     */
-                    getElement: function () {
-                        return $('#upload-template-dialog');
-                    },
-
+                this.templateUpload = {
+    
                     /**
-                     * Initialize the modal.
+                     * The canvas operator's create template component's modal.
                      */
-                    init: function () {
-                        // initialize the form
-                        var templateForm = $('#template-upload-form').ajaxForm({
-                            url: '../nifi-api/process-groups/',
-                            dataType: 'xml',
-                            beforeSubmit: function (formData, $form, options) {
-                                // ensure uploading to the current process group
-                                options.url += (encodeURIComponent(nfCanvasUtils.getGroupId()) + '/templates/upload');
-                            },
-                            success: function (response, statusText, xhr, form) {
-                                // see if the import was successful and inform the user
-                                if (response.documentElement.tagName === 'templateEntity') {
-                                    nfDialog.showOkDialog({
-                                        headerText: 'Success',
-                                        dialogContent: 'Template successfully imported.'
-                                    });
-                                } else {
-                                    // import failed
-                                    var statusText = 'Unable to import template. Please check the log for errors.';
-                                    if (response.documentElement.tagName === 'errorResponse') {
-                                        // if a more specific error was given, use it
-                                        var errorMessage = response.documentElement.getAttribute('statusText');
-                                        if (!nfCommon.isBlank(errorMessage)) {
-                                            statusText = errorMessage;
-                                        }
+                    modal: {
+    
+                        /**
+                         * Gets the modal element.
+                         *
+                         * @returns {*|jQuery|HTMLElement}
+                         */
+                        getElement: function () {
+                            return $('#upload-template-dialog');
+                        },
+    
+                        /**
+                         * Initialize the modal.
+                         */
+                        init: function () {
+                            // initialize the form
+                            var templateForm = $('#template-upload-form').ajaxForm({
+                              url: '../nifi-api/process-groups/',
+                                dataType: 'xml',
+                              beforeSubmit: function (formData, $form, options) {
+                                  // ensure uploading to the current process group
+                                  options.url += (encodeURIComponent(nfCanvasUtils.getGroupId()) + '/templates/upload');
+                              },
+                                success: function (response, statusText, xhr, form) {
+                                  // see if the import was successful and inform the user
+                                    if (response.documentElement.tagName === 'templateEntity') {
+                                      nfDialog.showOkDialog({
+                                      headerText: nf._.msg('nf-canvas-operate-controller.SUCCESS'),
+                                      dialogContent: nf._.msg('nf-canvas-operate-controller.SuccessContent')
+                                        });
+                                    } else {
+                                        // import failed
+                                      var statusText = nf._.msg('nf-canvas-operate-controller.Message1');
+                                        if (response.documentElement.tagName === 'errorResponse') {
+                                            // if a more specific error was given, use it
+                                            var errorMessage = response.documentElement.getAttribute('statusText');
+                                          if (!nfCommon.isBlank(errorMessage)) {
+                                              statusText = errorMessage;
+                                          }
+                                      }
+  
+                                      // show reason
+                                      nfDialog.showOkDialog({
+                                          headerText: 'Unable to Upload',
+                                          dialogContent: nfCommon.escapeHtml(statusText)
+                                      });
                                     }
-
-                                    // show reason
-                                    nfDialog.showOkDialog({
-                                        headerText: 'Unable to Upload',
-                                        dialogContent: nfCommon.escapeHtml(statusText)
-                                    });
-                                }
-                            },
-                            error: function (xhr, statusText, error) {
-                                // request failed
-                                nfDialog.showOkDialog({
-                                    headerText: 'Unable to Upload',
-                                    dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                                });
-                            }
-                        });
-
-                        // configure the upload template dialog
-                        this.getElement().modal({
-                            headerText: 'Upload Template',
-                            buttons: [{
-                                buttonText: 'Upload',
-                                color: {
-                                    base: '#728E9B',
-                                    hover: '#004849',
-                                    text: '#ffffff'
                                 },
-                                handler: {
-                                    click: function () {
-                                        var selectedTemplate = $('#selected-template-name').text();
-
-                                        // submit the template if necessary
-                                        if (nfCommon.isBlank(selectedTemplate)) {
-                                            $('#upload-template-status').text('No template selected. Please browse to select a template.');
-                                        } else {
-                                            templateForm.submit();
-
+                                error: function (xhr, statusText, error) {
+                                  // request failed
+                                  nfDialog.showOkDialog({
+                                      headerText: 'Unable to Upload',
+                                      dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                                  });
+                                }
+                            });
+    
+                            // configure the upload template dialog
+                            this.getElement().modal({
+                          headerText: nf._.msg('nf-canvas-operate-controller.Upload'),
+                                buttons: [{
+                              buttonText: nf._.msg('nf-canvas-operate-controller.ButtonUpload'),
+                                    color: {
+                                        base: '#728E9B',
+                                        hover: '#004849',
+                                        text: '#ffffff'
+                                    },
+                                    handler: {
+                                        click: function () {
+                                            var selectedTemplate = $('#selected-template-name').text();
+    
+                                            // submit the template if necessary
+                                          if (nfCommon.isBlank(selectedTemplate)) {
+                                          $('#upload-template-status').text(nf._.msg('nf-canvas-operate-controller.UploadTemplate'));
+                                            } else {
+                                                templateForm.submit();
+    
+                                              // hide the dialog
+                                              $('#upload-template-dialog').modal('hide');
+                                            }
+                                        }
+                                    }
+                                }, {
+                              buttonText: nf._.msg('nf-canvas-operate-controller.Cancel'),
+                                    color: {
+                                        base: '#E3E8EB',
+                                        hover: '#C7D2D7',
+                                        text: '#004849'
+                                    },
+                                    handler: {
+                                        click: function () {
                                             // hide the dialog
                                             $('#upload-template-dialog').modal('hide');
                                         }
                                     }
-                                }
-                            }, {
-                                buttonText: 'Cancel',
-                                color: {
-                                    base: '#E3E8EB',
-                                    hover: '#C7D2D7',
-                                    text: '#004849'
-                                },
+                                }],
                                 handler: {
-                                    click: function () {
-                                        // hide the dialog
-                                        $('#upload-template-dialog').modal('hide');
+                                    close: function () {
+                                        // set the filename
+                                        $('#selected-template-name').text('');
+                                        $('#upload-template-status').text('');
+    
+                                        // reset the form to ensure that the change fire will fire
+                                        templateForm.resetForm();
                                     }
                                 }
-                            }],
-                            handler: {
-                                close: function () {
-                                    // set the filename
-                                    $('#selected-template-name').text('');
-                                    $('#upload-template-status').text('');
-
-                                    // reset the form to ensure that the change fire will fire
-                                    templateForm.resetForm();
+                            });
+    
+                          $('#template-file-field-button').on('click', function (e) {
+                              $('#template-file-field').click();
+                          });
+  
+                            // add a handler for the change file input chain event
+                            $('#template-file-field').on('change', function (e) {
+                                var filename = $(this).val();
+                              if (!nfCommon.isBlank(filename)) {
+                                    filename = filename.replace(/^.*[\\\/]/, '');
                                 }
-                            }
-                        });
-
-                        $('#template-file-field-button').on('click', function (e) {
-                            $('#template-file-field').click();
-                        });
-
-                        // add a handler for the change file input chain event
-                        $('#template-file-field').on('change', function (e) {
-                            var filename = $(this).val();
-                            if (!nfCommon.isBlank(filename)) {
-                                filename = filename.replace(/^.*[\\\/]/, '');
-                            }
-
-                            // set the filename and clear any status
-                            $('#selected-template-name').text(filename);
-                            $('#upload-template-status').text('');
-                        });
-                    },
-
-                    /**
-                     * Updates the modal config.
-                     *
-                     * @param {string} name             The name of the property to update.
-                     * @param {object|array} config     The config for the `name`.
-                     */
-                    update: function (name, config) {
-                        this.getElement().modal(name, config);
-                    },
-
-                    /**
-                     * Show the modal.
-                     */
-                    show: function () {
-                        this.getElement().modal('show');
-                    },
-
-                    /**
-                     * Hide the modal.
-                     */
-                    hide: function () {
-                        this.getElement().modal('hide');
+    
+                                // set the filename and clear any status
+                                $('#selected-template-name').text(filename);
+                                $('#upload-template-status').text('');
+                            });
+                        },
+    
+                        /**
+                         * Updates the modal config.
+                         *
+                         * @param {string} name             The name of the property to update.
+                         * @param {object|array} config     The config for the `name`.
+                         */
+                        update: function (name, config) {
+                            this.getElement().modal(name, config);
+                        },
+    
+                        /**
+                         * Show the modal.
+                         */
+                        show: function () {
+                            this.getElement().modal('show');
+                        },
+    
+                        /**
+                         * Hide the modal.
+                         */
+                        hide: function () {
+                            this.getElement().modal('hide');
+                        }
                     }
-                }
-            };
-
-            /**
-             * The canvas operator's fillcolor component.
-             */
-            this.fillcolor = {
-
+                };
+    
                 /**
-                 * The canvas operator's fillcolor component's modal.
+                 * The canvas operator's fillcolor component.
                  */
-                modal: {
-
+                this.fillcolor = {
+    
                     /**
-                     * Gets the modal element.
-                     *
-                     * @returns {*|jQuery|HTMLElement}
+                     * The canvas operator's fillcolor component's modal.
                      */
-                    getElement: function () {
-                        return $('#fill-color-dialog');
-                    },
-
-                    /**
-                     * Initialize the modal.
-                     */
-                    init: function () {
-                        // configure the create fillcolor dialog
-                        this.getElement().modal({
-                            scrollableContentStyle: 'scrollable',
-                            headerText: 'Change Color',
-                            buttons: [{
-                                buttonText: 'Apply',
-                                color: {
-                                    base: '#728E9B',
-                                    hover: '#004849',
-                                    text: '#ffffff'
-                                },
-                                handler: {
-                                    click: function () {
-                                        var selection = nfCanvasUtils.getSelection();
-
-                                        // color the selected components
-                                        selection.each(function (d) {
-                                            var selected = d3.select(this);
-                                            var selectedData = selected.datum();
-
-                                            // get the color and update the styles
-                                            var color = $('#fill-color').minicolors('value');
-
-                                            // ensure the color actually changed
-                                            if (color !== selectedData.component.style['background-color']) {
-                                                // build the request entity
-                                                var entity = {
-                                                    'revision': nfClient.getRevision(selectedData),
-                                                    'component': {
-                                                        'id': selectedData.id,
-                                                        'style': {
-                                                            'background-color': color
-                                                        }
-                                                    }
-                                                };
-
-                                                // update the style for the specified component
-                                                $.ajax({
-                                                    type: 'PUT',
-                                                    url: selectedData.uri,
-                                                    data: JSON.stringify(entity),
-                                                    dataType: 'json',
-                                                    contentType: 'application/json'
-                                                }).done(function (response) {
-                                                    // update the component
-                                                    nfCanvasUtils.getComponentByType(selectedData.type).set(response);
-                                                }).fail(function (xhr, status, error) {
-                                                    if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
-                                                        nfDialog.showOkDialog({
-                                                            headerText: 'Error',
-                                                            dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                                                        });
-                                                    }
-                                                }).always(function () {
-                                                    nfBirdseye.refresh();
-                                                });
-                                            }
-                                        });
-
-                                        // close the dialog
-                                        $('#fill-color-dialog').modal('hide');
-                                    }
-                                }
-                            },
-                                {
-                                    buttonText: 'Cancel',
+                    modal: {
+    
+                        /**
+                         * Gets the modal element.
+                         *
+                         * @returns {*|jQuery|HTMLElement}
+                         */
+                        getElement: function () {
+                            return $('#fill-color-dialog');
+                        },
+    
+                        /**
+                         * Initialize the modal.
+                         */
+                        init: function () {
+                            // configure the create fillcolor dialog
+                            this.getElement().modal({
+                                scrollableContentStyle: 'scrollable',
+                          headerText: nf._.msg('nf-canvas-operate-controller.ChangeColor'),
+                                buttons: [{
+                              buttonText: nf._.msg('nf-canvas-operate-controller.Apply'),
                                     color: {
-                                        base: '#E3E8EB',
-                                        hover: '#C7D2D7',
-                                        text: '#004849'
+                                        base: '#728E9B',
+                                        hover: '#004849',
+                                        text: '#ffffff'
                                     },
                                     handler: {
                                         click: function () {
+                                          var selection = nfCanvasUtils.getSelection();
+    
+                                            // color the selected components
+                                            selection.each(function (d) {
+                                                var selected = d3.select(this);
+                                                var selectedData = selected.datum();
+    
+                                                // get the color and update the styles
+                                                var color = $('#fill-color').minicolors('value');
+    
+                                                // ensure the color actually changed
+                                                if (color !== selectedData.component.style['background-color']) {
+                                                    // build the request entity
+                                                    var entity = {
+                                                      'revision': nfClient.getRevision(selectedData),
+                                                        'component': {
+                                                            'id': selectedData.id,
+                                                            'style': {
+                                                                'background-color': color
+                                                            }
+                                                        }
+                                                    };
+    
+                                                    // update the style for the specified component
+                                                    $.ajax({
+                                                        type: 'PUT',
+                                                        url: selectedData.uri,
+                                                        data: JSON.stringify(entity),
+                                                        dataType: 'json',
+                                                        contentType: 'application/json'
+                                                    }).done(function (response) {
+                                                        // update the component
+                                                      nfCanvasUtils.getComponentByType(selectedData.type).set(response);
+                                                    }).fail(function (xhr, status, error) {
+                                                        if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
+                                                          nfDialog.showOkDialog({
+                                                          headerText: nf._.msg('nf-canvas-operate-controller.Error'),
+                                                              dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                                                            });
+                                                        }
+                                                    }).always(function () {
+                                                      nfBirdseye.refresh();
+                                                    });
+                                                }
+                                            });
+    
                                             // close the dialog
                                             $('#fill-color-dialog').modal('hide');
                                         }
                                     }
-                                }],
-                            handler: {
-                                close: function () {
-                                    // clear the current color
-                                    $('#fill-color-value').val('');
-                                    $('#fill-color').minicolors('value', '');
+                                },
+                                    {
+                                  buttonText: nf._.msg('nf-canvas-operate-controller.Cancel'),
+                                        color: {
+                                            base: '#E3E8EB',
+                                            hover: '#C7D2D7',
+                                            text: '#004849'
+                                        },
+                                        handler: {
+                                            click: function () {
+                                                // close the dialog
+                                                $('#fill-color-dialog').modal('hide');
+                                            }
+                                        }
+                                    }],
+                                handler: {
+                                    close: function () {
+                                        // clear the current color
+                                        $('#fill-color-value').val('');
+                                        $('#fill-color').minicolors('value', '');
+                                    }
                                 }
-                            }
-                        });
-                    },
-
-                    /**
-                     * Updates the modal config.
-                     *
-                     * @param {string} name             The name of the property to update.
-                     * @param {object|array} config     The config for the `name`.
-                     */
-                    update: function (name, config) {
-                        this.getElement().modal(name, config);
-                    },
-
-                    /**
-                     * Show the modal.
-                     */
-                    show: function () {
-                        this.getElement().modal('show');
-                    },
-
-                    /**
-                     * Hide the modal.
-                     */
-                    hide: function () {
-                        this.getElement().modal('hide');
-                    },
-
-                    /**
-                     * The canvas operator's fillcolor component modal's minicolors.
-                     */
-                    minicolors: {
-
+                            });
+                        },
+    
                         /**
-                         * Gets the minicolors element.
+                         * Updates the modal config.
                          *
-                         * @returns {*|jQuery|HTMLElement}
+                         * @param {string} name             The name of the property to update.
+                         * @param {object|array} config     The config for the `name`.
                          */
-                        getElement: function () {
-                            return $('#fill-color');
+                        update: function (name, config) {
+                            this.getElement().modal(name, config);
                         },
-
+    
                         /**
-                         * Initialize the minicolors.
+                         * Show the modal.
                          */
-                        init: function () {
-                            // configure the minicolors
-                            this.getElement().minicolors({
-                                inline: true,
-                                change: function (hex, opacity) {
-                                    // update the value
-                                    $('#fill-color-value').val(hex);
-
-                                    // always update the preview
-                                    if (hex.toLowerCase() === '#ffffff') {
-                                        //special case #ffffff implies default fill
-                                        $('#fill-color-processor-preview-icon').css({
-                                            'color': nfProcessor.defaultIconColor(),
-                                            'background-color': hex
-                                        });
-                                    } else {
-                                        $('#fill-color-processor-preview-icon').css({
-                                            'color': nfCommon.determineContrastColor(
-                                                nfCommon.substringAfterLast(
-                                                    hex, '#')),
-                                            'background-color': hex
+                        show: function () {
+                            this.getElement().modal('show');
+                        },
+    
+                        /**
+                         * Hide the modal.
+                         */
+                        hide: function () {
+                            this.getElement().modal('hide');
+                        },
+    
+                        /**
+                         * The canvas operator's fillcolor component modal's minicolors.
+                         */
+                        minicolors: {
+    
+                            /**
+                             * Gets the minicolors element.
+                             *
+                             * @returns {*|jQuery|HTMLElement}
+                             */
+                            getElement: function () {
+                                return $('#fill-color');
+                            },
+    
+                            /**
+                             * Initialize the minicolors.
+                             */
+                            init: function () {
+                                // configure the minicolors
+                                this.getElement().minicolors({
+                                    inline: true,
+                                    change: function (hex, opacity) {
+                                        // update the value
+                                        $('#fill-color-value').val(hex);
+    
+                                        // always update the preview
+                                      if (hex.toLowerCase() === '#ffffff') {
+                                          //special case #ffffff implies default fill
+                                          $('#fill-color-processor-preview-icon').css({
+                                              'color': nfProcessor.defaultIconColor(),
+                                              'background-color': hex
+                                          });
+                                      } else {
+                                          $('#fill-color-processor-preview-icon').css({
+                                              'color': nfCommon.determineContrastColor(
+                                                  nfCommon.substringAfterLast(
+                                                      hex, '#')),
+                                              'background-color': hex
+                                          });
+                                      }
+  
+                                      var borderColor = hex;
+                                      if (borderColor.toLowerCase() === '#ffffff') {
+                                          borderColor = 'rgba(0,0,0,0.25)';
+                                      }
+                                      $('#fill-color-processor-preview').css({
+                                          'border-color': borderColor
+                                      });
+  
+                                        $('#fill-color-label-preview').css({
+                                          'background': hex
                                         });
+                                      $('#fill-color-label-preview-value').css('color',
+                                          nfCommon.determineContrastColor(nfCommon.substringAfterLast(hex, '#'))
+                                      );
                                     }
-
-                                    var borderColor = hex;
-                                    if (borderColor.toLowerCase() === '#ffffff') {
-                                        borderColor = 'rgba(0,0,0,0.25)';
+                                });
+    
+                                // apply fill color from field on blur and enter press
+                                $('#fill-color-value').on('blur', updateColor).on('keyup', function (e) {
+                                    var code = e.keyCode ? e.keyCode : e.which;
+                                    if (code === $.ui.keyCode.ENTER) {
+                                        updateColor();
                                     }
-                                    $('#fill-color-processor-preview').css({
-                                        'border-color': borderColor
-                                    });
-
-                                    $('#fill-color-label-preview').css({
-                                        'background': hex
-                                    });
-                                    $('#fill-color-label-preview-value').css('color',
-                                        nfCommon.determineContrastColor(nfCommon.substringAfterLast(hex, '#'))
-                                    );
-                                }
-                            });
-
-                            // apply fill color from field on blur and enter press
-                            $('#fill-color-value').on('blur', updateColor).on('keyup', function (e) {
-                                var code = e.keyCode ? e.keyCode : e.which;
-                                if (code === $.ui.keyCode.ENTER) {
-                                    updateColor();
-                                }
-                            });
+                                });
+                            }
                         }
                     }
+                };
+            }
+    
+            OperateCtrl.prototype = {
+                constructor: OperateCtrl,
+    
+                /**
+                 * Initializes the canvas operate controller.
+                 */
+                init: function () {
+                    this.template.modal.init();
+                    this.templateUpload.modal.init();
+                    this.fillcolor.modal.init();
+                    this.fillcolor.modal.minicolors.init();
                 }
-            };
-        }
-
-        OperateCtrl.prototype = {
-            constructor: OperateCtrl,
-
-            /**
-             * Initializes the canvas operate controller.
-             */
-            init: function () {
-                this.template.modal.init();
-                this.templateUpload.modal.init();
-                this.fillcolor.modal.init();
-                this.fillcolor.modal.minicolors.init();
             }
-        }
-
-        var operateCtrl = new OperateCtrl();
-        return operateCtrl;
-    };
-}));
\ No newline at end of file
+    
+            var operateCtrl = new OperateCtrl();
+            return operateCtrl;
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js
index f6b45f9a36e5..23dcaa11b476 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js
@@ -1,168 +1,168 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['nf.CanvasUtils',
-                'nf.ContextMenu'],
-            function (nfCanvasUtils, nfContextMenu) {
-                return (nf.ng.Canvas.ToolboxCtrl = factory(nfCanvasUtils, nfContextMenu));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.Canvas.ToolboxCtrl =
-            factory(require('nf.CanvasUtils'),
-                require('nf.ContextMenu')));
-    } else {
-        nf.ng.Canvas.ToolboxCtrl = factory(root.nf.CanvasUtils,
-            root.nf.ContextMenu);
-    }
-}(this, function (nfCanvasUtils, nfContextMenu) {
-    'use strict';
-
-    return function (processorComponent,
-                     inputPortComponent,
-                     outputPortComponent,
-                     groupComponent,
-                     remoteGroupComponent,
-                     funnelComponent,
-                     templateComponent,
-                     labelComponent) {
-        'use strict';
-
-        function ToolboxCtrl(processorComponent,
-                             inputPortComponent,
-                             outputPortComponent,
-                             groupComponent,
-                             remoteGroupComponent,
-                             funnelComponent,
-                             templateComponent,
-                             labelComponent) {
-            this.processorComponent = processorComponent;
-            this.inputPortComponent = inputPortComponent;
-            this.outputPortComponent = outputPortComponent;
-            this.groupComponent = groupComponent;
-            this.remoteGroupComponent = remoteGroupComponent;
-            this.funnelComponent = funnelComponent;
-            this.templateComponent = templateComponent;
-            this.labelComponent = labelComponent;
-
-            /**
-             * Config for the toolbox
-             */
-            this.config = {
-                type: {
-                    processor: 'Processor',
-                    inputPort: 'Input Port',
-                    outputPort: 'Output Port',
-                    processGroup: 'Process Group',
-                    remoteProcessGroup: 'Remote Process Group',
-                    connection: 'Connection',
-                    funnel: 'Funnel',
-                    template: 'Template',
-                    label: 'Label'
-                },
-                urls: {
-                    api: '../nifi-api',
-                    controller: '../nifi-api/controller',
-                    processorTypes: '../nifi-api/flow/processor-types'
-                }
-            };
-        }
-
-        ToolboxCtrl.prototype = {
-            constructor: ToolboxCtrl,
-
-            /**
-             * Initialize the toolbox controller.
-             */
-            init: function () {
-                // initialize modal dialogs
-                processorComponent.modal.init();
-                inputPortComponent.modal.init();
-                outputPortComponent.modal.init();
-                groupComponent.modal.init();
-                remoteGroupComponent.modal.init();
-                templateComponent.modal.init();
-            },
-
-            /**
-             * Gets the draggable configuration for a toolbox component.
-             *
-             * @param {object} component        The component responsible for handling the stop event.
-             * @returns {object}                The draggable configuration.
-             *
-             * NOTE: The `component` must implement a dropHandler.
-             */
-            draggableComponentConfig: function (component) {
-
-                //add hover effect
-                component.getElement().hover(function () {
-                    component.getElement().removeClass(component.icon).addClass(component.hoverIcon);
-                }, function () {
-                    component.getElement().removeClass(component.hoverIcon).addClass(component.icon);
-                })
-
-                return {
-                    zIndex: 1011,
-                    revert: true,
-                    revertDuration: 0,
-                    cancel: false,
-                    containment: 'body',
-                    cursor: '-webkit-grabbing',
-                    start: function (e, ui) {
-                        // hide the context menu if necessary
-                        nfContextMenu.hide();
-                    },
-                    stop: function (e, ui) {
-                        var translate = nfCanvasUtils.translateCanvasView();
-                        var scale = nfCanvasUtils.scaleCanvasView();
-
-                        var mouseX = e.originalEvent.pageX;
-                        var mouseY = e.originalEvent.pageY - nfCanvasUtils.getCanvasOffset();
-
-                        // invoke the drop handler if we're over the canvas
-                        if (mouseX >= 0 && mouseY >= 0) {
-                            // adjust the x and y coordinates accordingly
-                            var x = (mouseX / scale) - (translate[0] / scale);
-                            var y = (mouseY / scale) - (translate[1] / scale);
-
-                            //each component must implement a dropHandler function
-                            component.dropHandler.apply(component, [{
-                                x: x,
-                                y: y
-                            }]);
-                        }
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['nf.CanvasUtils',
+                  'nf.ContextMenu'],
+              function (nfCanvasUtils, nfContextMenu) {
+                  return (nf.ng.Canvas.ToolboxCtrl = factory(nfCanvasUtils, nfContextMenu));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.Canvas.ToolboxCtrl =
+              factory(require('nf.CanvasUtils'),
+                  require('nf.ContextMenu')));
+      } else {
+          nf.ng.Canvas.ToolboxCtrl = factory(root.nf.CanvasUtils,
+              root.nf.ContextMenu);
+      }
+  }(this, function (nfCanvasUtils, nfContextMenu) {
+      'use strict';
+  
+      return function (processorComponent,
+                         inputPortComponent,
+                         outputPortComponent,
+                         groupComponent,
+                         remoteGroupComponent,
+                         funnelComponent,
+                         templateComponent,
+                         labelComponent) {
+            'use strict';
+    
+            function ToolboxCtrl(processorComponent,
+                                 inputPortComponent,
+                                 outputPortComponent,
+                                 groupComponent,
+                                 remoteGroupComponent,
+                                 funnelComponent,
+                                 templateComponent,
+                                 labelComponent) {
+                this.processorComponent = processorComponent;
+                this.inputPortComponent = inputPortComponent;
+                this.outputPortComponent = outputPortComponent;
+                this.groupComponent = groupComponent;
+                this.remoteGroupComponent = remoteGroupComponent;
+                this.funnelComponent = funnelComponent;
+                this.templateComponent = templateComponent;
+                this.labelComponent = labelComponent;
+    
+                /**
+                 * Config for the toolbox
+                 */
+                this.config = {
+                    type: {
+                  processor: nf._.msg('nf-canvas-toolbox.Processor'),
+                  inputPort: nf._.msg('nf-canvas-toolbox.InputPort'),
+                  outputPort: nf._.msg('nf-canvas-toolbox.OutputPort'),
+                  processGroup: nf._.msg('nf-canvas-toolbox.ProcessGroup'),
+                  remoteProcessGroup: nf._.msg('nf-canvas-toolbox.RemoteProcessGroup'),
+                  connection: nf._.msg('nf-canvas-toolbox.Connection'),
+                  funnel: nf._.msg('nf-canvas-toolbox.Funnel'),
+                  template: nf._.msg('nf-canvas-toolbox.Template'),
+                  label: nf._.msg('nf-canvas-toolbox.Label')
                     },
-                    helper: component.dragIcon
+                    urls: {
+                        api: '../nifi-api',
+                        controller: '../nifi-api/controller',
+                        processorTypes: '../nifi-api/flow/processor-types'
+                    }
+                };
+            }
+    
+            ToolboxCtrl.prototype = {
+                constructor: ToolboxCtrl,
+    
+                /**
+                 * Initialize the toolbox controller.
+                 */
+                init: function () {
+                    // initialize modal dialogs
+                    processorComponent.modal.init();
+                    inputPortComponent.modal.init();
+                    outputPortComponent.modal.init();
+                    groupComponent.modal.init();
+                    remoteGroupComponent.modal.init();
+                    templateComponent.modal.init();
+                },
+    
+                /**
+                 * Gets the draggable configuration for a toolbox component.
+                 *
+                 * @param {object} component        The component responsible for handling the stop event.
+                 * @returns {object}                The draggable configuration.
+                 *
+                 * NOTE: The `component` must implement a dropHandler.
+                 */
+                draggableComponentConfig: function (component) {
+    
+                    //add hover effect
+                    component.getElement().hover(function () {
+                        component.getElement().removeClass(component.icon).addClass(component.hoverIcon);
+                    }, function () {
+                        component.getElement().removeClass(component.hoverIcon).addClass(component.icon);
+                    })
+    
+                    return {
+                        zIndex: 1011,
+                        revert: true,
+                        revertDuration: 0,
+                        cancel: false,
+                        containment: 'body',
+                        cursor: '-webkit-grabbing',
+                        start: function (e, ui) {
+                            // hide the context menu if necessary
+                          nfContextMenu.hide();
+                        },
+                        stop: function (e, ui) {
+                          var translate = nfCanvasUtils.translateCanvasView();
+                          var scale = nfCanvasUtils.scaleCanvasView();
+    
+                            var mouseX = e.originalEvent.pageX;
+                          var mouseY = e.originalEvent.pageY - nfCanvasUtils.getCanvasOffset();
+    
+                            // invoke the drop handler if we're over the canvas
+                            if (mouseX >= 0 && mouseY >= 0) {
+                                // adjust the x and y coordinates accordingly
+                                var x = (mouseX / scale) - (translate[0] / scale);
+                                var y = (mouseY / scale) - (translate[1] / scale);
+    
+                                //each component must implement a dropHandler function
+                                component.dropHandler.apply(component, [{
+                                    x: x,
+                                    y: y
+                                }]);
+                            }
+                        },
+                        helper: component.dragIcon
+                    }
                 }
             }
-        }
-
-        var toolboxCtrl =
-            new ToolboxCtrl(processorComponent,
-                inputPortComponent,
-                outputPortComponent,
-                groupComponent,
-                remoteGroupComponent,
-                funnelComponent,
-                templateComponent,
-                labelComponent);
-        return toolboxCtrl;
-    };
-}));
\ No newline at end of file
+    
+            var toolboxCtrl =
+                new ToolboxCtrl(processorComponent,
+                    inputPortComponent,
+                    outputPortComponent,
+                    groupComponent,
+                    remoteGroupComponent,
+                    funnelComponent,
+                    templateComponent,
+                    labelComponent);
+            return toolboxCtrl;
+        };
+  }));
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 fcd4aba234a3..eccbf977f659 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
@@ -1,274 +1,274 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Client',
-                'nf.Birdseye',
-                'nf.Graph',
-                'nf.CanvasUtils',
-                'nf.ErrorHandler'],
-            function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-                return (nf.ng.GroupComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.GroupComponent =
-            factory(require('jquery'),
-                require('nf.Client'),
-                require('nf.Birdseye'),
-                require('nf.Graph'),
-                require('nf.CanvasUtils'),
-                require('nf.ErrorHandler')));
-    } else {
-        nf.ng.GroupComponent = factory(root.$,
-            root.nf.Client,
-            root.nf.Birdseye,
-            root.nf.Graph,
-            root.nf.CanvasUtils,
-            root.nf.ErrorHandler);
-    }
-}(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-    'use strict';
-
-    return function (serviceProvider) {
-        'use strict';
-
-        /**
-         * Create the group and add to the graph.
-         *
-         * @argument {string} groupName The name of the group.
-         * @argument {object} pt        The point that the group was dropped.
-         */
-        var createGroup = function (groupName, pt) {
-            var processGroupEntity = {
-                'revision': nfClient.getRevision({
-                    'revision': {
-                        'version': 0
-                    }
-                }),
-                'component': {
-                    'name': groupName,
-                    'position': {
-                        'x': pt.x,
-                        'y': pt.y
-                    }
-                }
-            };
-
-            // create a new processor of the defined type
-            return $.ajax({
-                type: 'POST',
-                url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/process-groups',
-                data: JSON.stringify(processGroupEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // add the process group to the graph
-                nfGraph.add({
-                    'processGroups': [response]
-                }, {
-                    'selectAll': true
-                });
-
-                // update component visibility
-                nfGraph.updateVisibility();
-
-                // update the birdseye
-                nfBirdseye.refresh();
-            }).fail(nfErrorHandler.handleAjaxError);
-        };
-
-        function GroupComponent() {
-
-            this.icon = 'icon icon-group';
-
-            this.hoverIcon = 'icon icon-group-add';
-
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Client',
+                  'nf.Birdseye',
+                  'nf.Graph',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler'],
+              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+                  return (nf.ng.GroupComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.GroupComponent =
+              factory(require('jquery'),
+                  require('nf.Client'),
+                  require('nf.Birdseye'),
+                  require('nf.Graph'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler')));
+      } else {
+          nf.ng.GroupComponent = factory(root.$,
+              root.nf.Client,
+              root.nf.Birdseye,
+              root.nf.Graph,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler);
+      }
+  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
             /**
-             * The group component's modal.
+             * Create the group and add to the graph.
+             *
+             * @argument {string} groupName The name of the group.
+             * @argument {object} pt        The point that the group was dropped.
              */
-            this.modal = {
-
+            var createGroup = function (groupName, pt) {
+                var processGroupEntity = {
+                  'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                        'name': groupName,
+                        'position': {
+                            'x': pt.x,
+                            'y': pt.y
+                        }
+                    }
+                };
+    
+                // create a new processor of the defined type
+                return $.ajax({
+                    type: 'POST',
+                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/process-groups',
+                    data: JSON.stringify(processGroupEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the process group to the graph
+                  nfGraph.add({
+                        'processGroups': [response]
+                    }, {
+                        'selectAll': true
+                    });
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            function GroupComponent() {
+    
+                this.icon = 'icon icon-group';
+    
+                this.hoverIcon = 'icon icon-group-add';
+    
+                /**
+                 * The group component's modal.
+                 */
+                this.modal = {
+    
+                    /**
+                     * Gets the modal element.
+                     *
+                     * @returns {*|jQuery|HTMLElement}
+                     */
+                    getElement: function () {
+                        return $('#new-process-group-dialog');
+                    },
+    
+                    /**
+                     * Initialize the modal.
+                     */
+                    init: function () {
+                        // configure the new process group dialog
+                        this.getElement().modal({
+                            scrollableContentStyle: 'scrollable',
+                      headerText: nf._.msg('nf-group-component.AddProcessGroup'),
+                            handler: {
+                                close: function () {
+                                    $('#new-process-group-name').val('');
+                                }
+                            }
+                        });
+                    },
+    
+                    /**
+                     * Updates the modal config.
+                     *
+                     * @param {string} name             The name of the property to update.
+                     * @param {object|array} config     The config for the `name`.
+                     */
+                    update: function (name, config) {
+                        this.getElement().modal(name, config);
+                    },
+    
+                    /**
+                     * Show the modal.
+                     */
+                    show: function () {
+                        this.getElement().modal('show');
+                    },
+    
+                    /**
+                     * Hide the modal.
+                     */
+                    hide: function () {
+                        this.getElement().modal('hide');
+                    }
+                };
+            }
+    
+            GroupComponent.prototype = {
+                constructor: GroupComponent,
+    
                 /**
-                 * Gets the modal element.
+                 * Gets the component.
                  *
                  * @returns {*|jQuery|HTMLElement}
                  */
                 getElement: function () {
-                    return $('#new-process-group-dialog');
+                    return $('#group-component');
                 },
-
+    
                 /**
-                 * Initialize the modal.
+                 * Enable the component.
                  */
-                init: function () {
-                    // configure the new process group dialog
-                    this.getElement().modal({
-                        scrollableContentStyle: 'scrollable',
-                        headerText: 'Add Process Group',
-                        handler: {
-                            close: function () {
-                                $('#new-process-group-name').val('');
-                            }
-                        }
-                    });
+                enabled: function () {
+                    this.getElement().attr('disabled', false);
+                },
+    
+                /**
+                 * Disable the component.
+                 */
+                disabled: function () {
+                    this.getElement().attr('disabled', true);
                 },
-
+    
                 /**
-                 * Updates the modal config.
+                 * Handler function for when component is dropped on the canvas.
                  *
-                 * @param {string} name             The name of the property to update.
-                 * @param {object|array} config     The config for the `name`.
+                 * @argument {object} pt        The point that the component was dropped.
                  */
-                update: function (name, config) {
-                    this.getElement().modal(name, config);
+                dropHandler: function (pt) {
+                    this.promptForGroupName(pt);
                 },
-
+    
                 /**
-                 * Show the modal.
+                 * The drag icon for the toolbox component.
+                 *
+                 * @param event
+                 * @returns {*|jQuery|HTMLElement}
                  */
-                show: function () {
-                    this.getElement().modal('show');
+                dragIcon: function (event) {
+                    return $('<div class="icon icon-group-add"></div>');
                 },
-
+    
                 /**
-                 * Hide the modal.
+                 * Prompts the user to enter the name for the group.
+                 *
+                 * @argument {object} pt        The point that the group was dropped.
                  */
-                hide: function () {
-                    this.getElement().modal('hide');
-                }
-            };
-        }
-
-        GroupComponent.prototype = {
-            constructor: GroupComponent,
-
-            /**
-             * Gets the component.
-             *
-             * @returns {*|jQuery|HTMLElement}
-             */
-            getElement: function () {
-                return $('#group-component');
-            },
-
-            /**
-             * Enable the component.
-             */
-            enabled: function () {
-                this.getElement().attr('disabled', false);
-            },
-
-            /**
-             * Disable the component.
-             */
-            disabled: function () {
-                this.getElement().attr('disabled', true);
-            },
-
-            /**
-             * Handler function for when component is dropped on the canvas.
-             *
-             * @argument {object} pt        The point that the component was dropped.
-             */
-            dropHandler: function (pt) {
-                this.promptForGroupName(pt);
-            },
-
-            /**
-             * The drag icon for the toolbox component.
-             *
-             * @param event
-             * @returns {*|jQuery|HTMLElement}
-             */
-            dragIcon: function (event) {
-                return $('<div class="icon icon-group-add"></div>');
-            },
-
-            /**
-             * Prompts the user to enter the name for the group.
-             *
-             * @argument {object} pt        The point that the group was dropped.
-             */
-            promptForGroupName: function (pt) {
-                var groupComponent = this;
-                return $.Deferred(function (deferred) {
-                    var addGroup = function () {
-                        // get the name of the group and clear the textfield
-                        var groupName = $('#new-process-group-name').val();
-
-                        // hide the dialog
-                        groupComponent.modal.hide();
-
-                        // create the group and resolve the deferred accordingly
-                        createGroup(groupName, pt).done(function (response) {
-                            deferred.resolve(response.component);
-                        }).fail(function () {
-                            deferred.reject();
-                        });
-                    };
-
-                    groupComponent.modal.update('setButtonModel', [{
-                        buttonText: 'Add',
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: addGroup
-                        }
-                    },
-                        {
-                            buttonText: 'Cancel',
+                promptForGroupName: function (pt) {
+                  var groupComponent = this;
+                    return $.Deferred(function (deferred) {
+                        var addGroup = function () {
+                            // get the name of the group and clear the textfield
+                            var groupName = $('#new-process-group-name').val();
+    
+                            // hide the dialog
+                          groupComponent.modal.hide();
+    
+                            // create the group and resolve the deferred accordingly
+                            createGroup(groupName, pt).done(function (response) {
+                                deferred.resolve(response.component);
+                            }).fail(function () {
+                                deferred.reject();
+                            });
+                        };
+    
+                      groupComponent.modal.update('setButtonModel', [{
+                      buttonText: nf._.msg('nf-group-component.Add'),
                             color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
+                                base: '#728E9B',
+                                hover: '#004849',
+                                text: '#ffffff'
                             },
                             handler: {
-                                click: function () {
-                                    // reject the deferred
-                                    deferred.reject();
-
-                                    // close the dialog
-                                    groupComponent.modal.hide();
+                                click: addGroup
+                            }
+                        },
+                            {
+                          buttonText: nf._.msg('nf-group-component.Cancel'),
+                                color: {
+                                    base: '#E3E8EB',
+                                    hover: '#C7D2D7',
+                                    text: '#004849'
+                                },
+                                handler: {
+                                    click: function () {
+                                        // reject the deferred
+                                        deferred.reject();
+    
+                                        // close the dialog
+                                      groupComponent.modal.hide();
+                                    }
                                 }
+                            }]);
+    
+                        // show the dialog
+                      groupComponent.modal.show();
+    
+                        // set up the focus and key handlers
+                        $('#new-process-group-name').focus().off('keyup').on('keyup', function (e) {
+                            var code = e.keyCode ? e.keyCode : e.which;
+                            if (code === $.ui.keyCode.ENTER) {
+                                addGroup();
                             }
-                        }]);
-
-                    // show the dialog
-                    groupComponent.modal.show();
-
-                    // set up the focus and key handlers
-                    $('#new-process-group-name').focus().off('keyup').on('keyup', function (e) {
-                        var code = e.keyCode ? e.keyCode : e.which;
-                        if (code === $.ui.keyCode.ENTER) {
-                            addGroup();
-                        }
-                    });
-                }).promise();
+                        });
+                    }).promise();
+                }
             }
-        }
-
-        var groupComponent = new GroupComponent();
-        return groupComponent;
-    };
-}));
\ No newline at end of file
+    
+            var groupComponent = new GroupComponent();
+            return groupComponent;
+        };
+  }));
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 3c682a94b375..392fecbc7cc9 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
@@ -1,267 +1,267 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Client',
-                'nf.Birdseye',
-                'nf.Graph',
-                'nf.CanvasUtils',
-                'nf.ErrorHandler'],
-            function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-                return (nf.ng.InputPortComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.InputPortComponent =
-            factory(require('jquery'),
-                require('nf.Client'),
-                require('nf.Birdseye'),
-                require('nf.Graph'),
-                require('nf.CanvasUtils'),
-                require('nf.ErrorHandler')));
-    } else {
-        nf.ng.InputPortComponent = factory(root.$,
-            root.nf.Client,
-            root.nf.Birdseye,
-            root.nf.Graph,
-            root.nf.CanvasUtils,
-            root.nf.ErrorHandler);
-    }
-}(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-    'use strict';
-
-    return function (serviceProvider) {
-        'use strict';
-
-        /**
-         * Create the input port and add to the graph.
-         *
-         * @argument {string} portName          The input port name.
-         * @argument {object} pt                The point that the input port was dropped.
-         */
-        var createInputPort = function (portName, pt) {
-            var inputPortEntity = {
-                'revision': nfClient.getRevision({
-                    'revision': {
-                        'version': 0
-                    }
-                }),
-                'component': {
-                    'name': portName,
-                    'position': {
-                        'x': pt.x,
-                        'y': pt.y
-                    }
-                }
-            };
-
-            // create a new processor of the defined type
-            $.ajax({
-                type: 'POST',
-                url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/input-ports',
-                data: JSON.stringify(inputPortEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // add the port to the graph
-                nfGraph.add({
-                    'inputPorts': [response]
-                }, {
-                    'selectAll': true
-                });
-
-                // update component visibility
-                nfGraph.updateVisibility();
-
-                // update the birdseye
-                nfBirdseye.refresh();
-            }).fail(nfErrorHandler.handleAjaxError);
-        };
-
-        function InputPortComponent() {
-
-            this.icon = 'icon icon-port-in';
-
-            this.hoverIcon = 'icon icon-port-in-add';
-
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Client',
+                  'nf.Birdseye',
+                  'nf.Graph',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler'],
+              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+                  return (nf.ng.InputPortComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.InputPortComponent =
+              factory(require('jquery'),
+                  require('nf.Client'),
+                  require('nf.Birdseye'),
+                  require('nf.Graph'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler')));
+      } else {
+          nf.ng.InputPortComponent = factory(root.$,
+              root.nf.Client,
+              root.nf.Birdseye,
+              root.nf.Graph,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler);
+      }
+  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
             /**
-             * The input port component's modal.
+             * Create the input port and add to the graph.
+             *
+             * @argument {string} portName          The input port name.
+             * @argument {object} pt                The point that the input port was dropped.
              */
-            this.modal = {
-
+            var createInputPort = function (portName, pt) {
+                var inputPortEntity = {
+                  'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                        'name': portName,
+                        'position': {
+                            'x': pt.x,
+                            'y': pt.y
+                        }
+                    }
+                };
+    
+                // create a new processor of the defined type
+                $.ajax({
+                    type: 'POST',
+                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/input-ports',
+                    data: JSON.stringify(inputPortEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the port to the graph
+                  nfGraph.add({
+                        'inputPorts': [response]
+                    }, {
+                        'selectAll': true
+                    });
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            function InputPortComponent() {
+    
+                this.icon = 'icon icon-port-in';
+    
+                this.hoverIcon = 'icon icon-port-in-add';
+    
+                /**
+                 * The input port component's modal.
+                 */
+                this.modal = {
+    
+                    /**
+                     * Gets the modal element.
+                     *
+                     * @returns {*|jQuery|HTMLElement}
+                     */
+                    getElement: function () {
+                        return $('#new-port-dialog');
+                    },
+    
+                    /**
+                     * Initialize the modal.
+                     */
+                    init: function () {
+                        // configure the new port dialog
+                        this.getElement().modal({
+                            scrollableContentStyle: 'scrollable',
+                      headerText: nf._.msg('nf-input-port-component.AddPort'),
+                            handler: {
+                                close: function () {
+                                    $('#new-port-name').val('');
+                                }
+                            }
+                        });
+                    },
+    
+                    /**
+                     * Updates the modal config.
+                     *
+                     * @param {string} name             The name of the property to update.
+                     * @param {object|array} config     The config for the `name`.
+                     */
+                    update: function (name, config) {
+                        this.getElement().modal(name, config);
+                    },
+    
+                    /**
+                     * Show the modal.
+                     */
+                    show: function () {
+                        this.getElement().modal('show');
+                    },
+    
+                    /**
+                     * Hide the modal.
+                     */
+                    hide: function () {
+                        this.getElement().modal('hide');
+                    }
+                };
+            }
+    
+            InputPortComponent.prototype = {
+                constructor: InputPortComponent,
+    
                 /**
-                 * Gets the modal element.
+                 * Gets the component.
                  *
                  * @returns {*|jQuery|HTMLElement}
                  */
                 getElement: function () {
-                    return $('#new-port-dialog');
+                    return $('#port-in-component');
                 },
-
+    
                 /**
-                 * Initialize the modal.
+                 * Enable the component.
                  */
-                init: function () {
-                    // configure the new port dialog
-                    this.getElement().modal({
-                        scrollableContentStyle: 'scrollable',
-                        headerText: 'Add Port',
-                        handler: {
-                            close: function () {
-                                $('#new-port-name').val('');
-                            }
-                        }
-                    });
+                enabled: function () {
+                    this.getElement().attr('disabled', false);
                 },
-
+    
                 /**
-                 * Updates the modal config.
-                 *
-                 * @param {string} name             The name of the property to update.
-                 * @param {object|array} config     The config for the `name`.
+                 * Disable the component.
                  */
-                update: function (name, config) {
-                    this.getElement().modal(name, config);
+                disabled: function () {
+                    this.getElement().attr('disabled', true);
                 },
-
+    
                 /**
-                 * Show the modal.
+                 * Handler function for when component is dropped on the canvas.
+                 *
+                 * @argument {object} pt        The point that the component was dropped.
                  */
-                show: function () {
-                    this.getElement().modal('show');
+                dropHandler: function (pt) {
+                    this.promptForInputPortName(pt);
                 },
-
+    
                 /**
-                 * Hide the modal.
+                 * The drag icon for the toolbox component.
+                 *
+                 * @param event
+                 * @returns {*|jQuery|HTMLElement}
                  */
-                hide: function () {
-                    this.getElement().modal('hide');
-                }
-            };
-        }
-
-        InputPortComponent.prototype = {
-            constructor: InputPortComponent,
-
-            /**
-             * Gets the component.
-             *
-             * @returns {*|jQuery|HTMLElement}
-             */
-            getElement: function () {
-                return $('#port-in-component');
-            },
-
-            /**
-             * Enable the component.
-             */
-            enabled: function () {
-                this.getElement().attr('disabled', false);
-            },
-
-            /**
-             * Disable the component.
-             */
-            disabled: function () {
-                this.getElement().attr('disabled', true);
-            },
-
-            /**
-             * Handler function for when component is dropped on the canvas.
-             *
-             * @argument {object} pt        The point that the component was dropped.
-             */
-            dropHandler: function (pt) {
-                this.promptForInputPortName(pt);
-            },
-
-            /**
-             * The drag icon for the toolbox component.
-             *
-             * @param event
-             * @returns {*|jQuery|HTMLElement}
-             */
-            dragIcon: function (event) {
-                return $('<div class="icon icon-port-in-add"></div>');
-            },
-
-            /**
-             * Prompts the user to enter the name for the input port.
-             *
-             * @argument {object} pt        The point that the input port was dropped.
-             */
-            promptForInputPortName: function (pt) {
-                var inputPortComponent = this;
-                var addInputPort = function () {
-                    // get the name of the input port and clear the textfield
-                    var portName = $('#new-port-name').val();
-
-                    // hide the dialog
-                    inputPortComponent.modal.hide();
-
-                    // create the input port
-                    createInputPort(portName, pt);
-                };
-
-                this.modal.update('setButtonModel', [{
-                    buttonText: 'Add',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: addInputPort
-                    }
+                dragIcon: function (event) {
+                    return $('<div class="icon icon-port-in-add"></div>');
                 },
-                    {
-                        buttonText: 'Cancel',
+    
+                /**
+                 * Prompts the user to enter the name for the input port.
+                 *
+                 * @argument {object} pt        The point that the input port was dropped.
+                 */
+                promptForInputPortName: function (pt) {
+                  var inputPortComponent = this;
+                    var addInputPort = function () {
+                        // get the name of the input port and clear the textfield
+                        var portName = $('#new-port-name').val();
+    
+                        // hide the dialog
+                      inputPortComponent.modal.hide();
+    
+                        // create the input port
+                        createInputPort(portName, pt);
+                    };
+    
+                    this.modal.update('setButtonModel', [{
+                  buttonText: nf._.msg('nf-input-port-component.Add'),
                         color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
                         },
                         handler: {
-                            click: function () {
-                                inputPortComponent.modal.hide();
+                            click: addInputPort
+                        }
+                    },
+                        {
+                      buttonText: nf._.msg('nf-input-port-component.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                  inputPortComponent.modal.hide();
+                                }
                             }
+                        }]);
+    
+                    // update the port type
+              $('#new-port-type').text(nf._.msg('nf-input-port-component.new-port-type'));
+    
+                    // show the dialog
+                    this.modal.show();
+    
+                    // set up the focus and key handlers
+                    $('#new-port-name').focus().off('keyup').on('keyup', function (e) {
+                        var code = e.keyCode ? e.keyCode : e.which;
+                        if (code === $.ui.keyCode.ENTER) {
+                            addInputPort();
                         }
-                    }]);
-
-                // update the port type
-                $('#new-port-type').text('Input');
-
-                // show the dialog
-                this.modal.show();
-
-                // set up the focus and key handlers
-                $('#new-port-name').focus().off('keyup').on('keyup', function (e) {
-                    var code = e.keyCode ? e.keyCode : e.which;
-                    if (code === $.ui.keyCode.ENTER) {
-                        addInputPort();
-                    }
-                });
+                    });
+                }
             }
-        }
-
-        var inputPortComponent = new InputPortComponent();
-        return inputPortComponent;
-    };
-}));
\ No newline at end of file
+    
+            var inputPortComponent = new InputPortComponent();
+            return inputPortComponent;
+        };
+  }));
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 6bb17521b023..f27ec59cea9f 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
@@ -1,258 +1,258 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Client',
-                'nf.Birdseye',
-                'nf.Graph',
-                'nf.CanvasUtils',
-                'nf.ErrorHandler'],
-            function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-                return (nf.ng.OutputPortComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.OutputPortComponent =
-            factory(require('jquery'),
-                require('nf.Client'),
-                require('nf.Birdseye'),
-                require('nf.Graph'),
-                require('nf.CanvasUtils'),
-                require('nf.ErrorHandler')));
-    } else {
-        nf.ng.OutputPortComponent = factory(root.$,
-            root.nf.Client,
-            root.nf.Birdseye,
-            root.nf.Graph,
-            root.nf.CanvasUtils,
-            root.nf.ErrorHandler);
-    }
-}(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-    'use strict';
-
-    return function (serviceProvider) {
-        'use strict';
-
-        /**
-         * Create the input port and add to the graph.
-         *
-         * @argument {string} portName          The output port name.
-         * @argument {object} pt                The point that the output port was dropped.
-         */
-        var createOutputPort = function (portName, pt) {
-            var outputPortEntity = {
-                'revision': nfClient.getRevision({
-                    'revision': {
-                        'version': 0
-                    }
-                }),
-                'component': {
-                    'name': portName,
-                    'position': {
-                        'x': pt.x,
-                        'y': pt.y
-                    }
-                }
-            };
-
-            // create a new processor of the defined type
-            $.ajax({
-                type: 'POST',
-                url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/output-ports',
-                data: JSON.stringify(outputPortEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // add the port to the graph
-                nfGraph.add({
-                    'outputPorts': [response]
-                }, {
-                    'selectAll': true
-                });
-
-                // update component visibility
-                nfGraph.updateVisibility();
-
-                // update the birdseye
-                nfBirdseye.refresh();
-            }).fail(nfErrorHandler.handleAjaxError);
-        };
-
-        function OutputPortComponent() {
-
-            this.icon = 'icon icon-port-out';
-
-            this.hoverIcon = 'icon icon-port-out-add';
-
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Client',
+                  'nf.Birdseye',
+                  'nf.Graph',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler'],
+              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+                  return (nf.ng.OutputPortComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.OutputPortComponent =
+              factory(require('jquery'),
+                  require('nf.Client'),
+                  require('nf.Birdseye'),
+                  require('nf.Graph'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler')));
+      } else {
+          nf.ng.OutputPortComponent = factory(root.$,
+              root.nf.Client,
+              root.nf.Birdseye,
+              root.nf.Graph,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler);
+      }
+  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
             /**
-             * The output port component's modal.
+             * Create the input port and add to the graph.
+             *
+             * @argument {string} portName          The output port name.
+             * @argument {object} pt                The point that the output port was dropped.
              */
-            this.modal = {
-
+            var createOutputPort = function (portName, pt) {
+                var outputPortEntity = {
+                  'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                        'name': portName,
+                        'position': {
+                            'x': pt.x,
+                            'y': pt.y
+                        }
+                    }
+                };
+    
+                // create a new processor of the defined type
+                $.ajax({
+                    type: 'POST',
+                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/output-ports',
+                    data: JSON.stringify(outputPortEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the port to the graph
+                  nfGraph.add({
+                        'outputPorts': [response]
+                    }, {
+                        'selectAll': true
+                    });
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            function OutputPortComponent() {
+    
+                this.icon = 'icon icon-port-out';
+    
+                this.hoverIcon = 'icon icon-port-out-add';
+    
                 /**
-                 * Gets the modal element.
+                 * The output port component's modal.
+                 */
+                this.modal = {
+    
+                    /**
+                     * Gets the modal element.
+                     *
+                     * @returns {*|jQuery|HTMLElement}
+                     */
+                    getElement: function () {
+                        return $('#new-port-dialog'); //Reuse the input port dialog....
+                    },
+    
+                    /**
+                     * Initialize the modal.
+                     */
+                    init: function () {
+                        //Reuse the input port dialog....
+                    },
+    
+                    /**
+                     * Updates the modal config.
+                     *
+                     * @param {string} name             The name of the property to update.
+                     * @param {object|array} config     The config for the `name`.
+                     */
+                    update: function (name, config) {
+                        this.getElement().modal(name, config);
+                    },
+    
+                    /**
+                     * Show the modal.
+                     */
+                    show: function () {
+                        this.getElement().modal('show');
+                    },
+    
+                    /**
+                     * Hide the modal.
+                     */
+                    hide: function () {
+                        this.getElement().modal('hide');
+                    }
+                };
+            }
+    
+            OutputPortComponent.prototype = {
+                constructor: OutputPortComponent,
+    
+                /**
+                 * Gets the component.
                  *
                  * @returns {*|jQuery|HTMLElement}
                  */
                 getElement: function () {
-                    return $('#new-port-dialog'); //Reuse the input port dialog....
+                    return $('#port-out-component');
                 },
-
+    
                 /**
-                 * Initialize the modal.
+                 * Enable the component.
                  */
-                init: function () {
-                    //Reuse the input port dialog....
+                enabled: function () {
+                    this.getElement().attr('disabled', false);
                 },
-
+    
                 /**
-                 * Updates the modal config.
-                 *
-                 * @param {string} name             The name of the property to update.
-                 * @param {object|array} config     The config for the `name`.
+                 * Disable the component.
                  */
-                update: function (name, config) {
-                    this.getElement().modal(name, config);
+                disabled: function () {
+                    this.getElement().attr('disabled', true);
                 },
-
+    
                 /**
-                 * Show the modal.
+                 * Handler function for when component is dropped on the canvas.
+                 *
+                 * @argument {object} pt        The point that the component was dropped.
                  */
-                show: function () {
-                    this.getElement().modal('show');
+                dropHandler: function (pt) {
+                    this.promptForOutputPortName(pt);
                 },
-
+    
                 /**
-                 * Hide the modal.
+                 * The drag icon for the toolbox component.
+                 *
+                 * @param event
+                 * @returns {*|jQuery|HTMLElement}
                  */
-                hide: function () {
-                    this.getElement().modal('hide');
-                }
-            };
-        }
-
-        OutputPortComponent.prototype = {
-            constructor: OutputPortComponent,
-
-            /**
-             * Gets the component.
-             *
-             * @returns {*|jQuery|HTMLElement}
-             */
-            getElement: function () {
-                return $('#port-out-component');
-            },
-
-            /**
-             * Enable the component.
-             */
-            enabled: function () {
-                this.getElement().attr('disabled', false);
-            },
-
-            /**
-             * Disable the component.
-             */
-            disabled: function () {
-                this.getElement().attr('disabled', true);
-            },
-
-            /**
-             * Handler function for when component is dropped on the canvas.
-             *
-             * @argument {object} pt        The point that the component was dropped.
-             */
-            dropHandler: function (pt) {
-                this.promptForOutputPortName(pt);
-            },
-
-            /**
-             * The drag icon for the toolbox component.
-             *
-             * @param event
-             * @returns {*|jQuery|HTMLElement}
-             */
-            dragIcon: function (event) {
-                return $('<div class="icon icon-port-out-add"></div>');
-            },
-
-            /**
-             * Prompts the user to enter the name for the output port.
-             *
-             * @argument {object} pt        The point that the output port was dropped.
-             */
-            promptForOutputPortName: function (pt) {
-                var outputPortComponent = this;
-                var addOutputPort = function () {
-                    // get the name of the output port and clear the textfield
-                    var portName = $('#new-port-name').val();
-
-                    // hide the dialog
-                    outputPortComponent.modal.hide();
-
-                    // create the output port
-                    createOutputPort(portName, pt);
-                };
-
-                this.modal.update('setButtonModel', [{
-                    buttonText: 'Add',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: addOutputPort
-                    }
+                dragIcon: function (event) {
+                    return $('<div class="icon icon-port-out-add"></div>');
                 },
-                    {
-                        buttonText: 'Cancel',
+    
+                /**
+                 * Prompts the user to enter the name for the output port.
+                 *
+                 * @argument {object} pt        The point that the output port was dropped.
+                 */
+                promptForOutputPortName: function (pt) {
+                  var outputPortComponent = this;
+                    var addOutputPort = function () {
+                        // get the name of the output port and clear the textfield
+                        var portName = $('#new-port-name').val();
+    
+                        // hide the dialog
+                      outputPortComponent.modal.hide();
+    
+                        // create the output port
+                        createOutputPort(portName, pt);
+                    };
+    
+                    this.modal.update('setButtonModel', [{
+                  buttonText: nf._.msg('nf-output-port-component.Add'),
                         color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
                         },
                         handler: {
-                            click: function () {
-                                outputPortComponent.modal.hide();
+                            click: addOutputPort
+                        }
+                    },
+                        {
+                      buttonText: nf._.msg('nf-output-port-component.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                  outputPortComponent.modal.hide();
+                                }
                             }
+                        }]);
+    
+                    // update the port type
+              $('#new-port-type').text(nf._.msg('nf-output-port-component.new-port-type'));
+    
+                    // set the focus and show the dialog
+                    this.modal.show();
+    
+                    // set up the focus and key handlers
+                    $('#new-port-name').focus().off('keyup').on('keyup', function (e) {
+                        var code = e.keyCode ? e.keyCode : e.which;
+                        if (code === $.ui.keyCode.ENTER) {
+                            addOutputPort();
                         }
-                    }]);
-
-                // update the port type
-                $('#new-port-type').text('Output');
-
-                // set the focus and show the dialog
-                this.modal.show();
-
-                // set up the focus and key handlers
-                $('#new-port-name').focus().off('keyup').on('keyup', function (e) {
-                    var code = e.keyCode ? e.keyCode : e.which;
-                    if (code === $.ui.keyCode.ENTER) {
-                        addOutputPort();
-                    }
-                });
+                    });
+                }
             }
-        }
-
-        var outputPortComponent = new OutputPortComponent();
-        return outputPortComponent;
-    };
-}));
\ No newline at end of file
+    
+            var outputPortComponent = new OutputPortComponent();
+            return outputPortComponent;
+        };
+  }));
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 87bb5809b0c2..0d5249621ec1 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
@@ -1,710 +1,710 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'Slick',
-                'nf.Client',
-                'nf.Birdseye',
-                'nf.Graph',
-                'nf.CanvasUtils',
-                'nf.ErrorHandler',
-                'nf.Dialog',
-                'nf.Common'],
-            function ($, Slick, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
-                return (nf.ng.ProcessorComponent = factory($, Slick, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.ProcessorComponent =
-            factory(require('jquery'),
-                require('Slick'),
-                require('nf.Client'),
-                require('nf.Birdseye'),
-                require('nf.Graph'),
-                require('nf.CanvasUtils'),
-                require('nf.ErrorHandler'),
-                require('nf.Dialog'),
-                require('nf.Common')));
-    } else {
-        nf.ng.ProcessorComponent = factory(root.$,
-            root.Slick,
-            root.nf.Client,
-            root.nf.Birdseye,
-            root.nf.Graph,
-            root.nf.CanvasUtils,
-            root.nf.ErrorHandler,
-            root.nf.Dialog,
-            root.nf.Common);
-    }
-}(this, function ($, Slick, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
-    'use strict';
-
-    return function (serviceProvider) {
-        'use strict';
-
-        /**
-         * Filters the processor type table.
-         */
-        var applyFilter = function () {
-            // get the dataview
-            var processorTypesGrid = $('#processor-types-table').data('gridInstance');
-
-            // ensure the grid has been initialized
-            if (nfCommon.isDefinedAndNotNull(processorTypesGrid)) {
-                var processorTypesData = processorTypesGrid.getData();
-
-                // update the search criteria
-                processorTypesData.setFilterArgs({
-                    searchString: getFilterText()
-                });
-                processorTypesData.refresh();
-
-                // update the buttons to possibly trigger the disabled state
-                $('#new-processor-dialog').modal('refreshButtons');
-
-                // update the selection if possible
-                if (processorTypesData.getLength() > 0) {
-                    processorTypesGrid.setSelectedRows([0]);
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Client',
+                  'nf.Birdseye',
+                  'nf.Graph',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler',
+                  'nf.Dialog',
+                  'nf.Common'],
+              function ($, Slick, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
+                  return (nf.ng.ProcessorComponent = factory($, Slick, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.ProcessorComponent =
+              factory(require('jquery'),
+                  require('Slick'),
+                  require('nf.Client'),
+                  require('nf.Birdseye'),
+                  require('nf.Graph'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Dialog'),
+                  require('nf.Common')));
+      } else {
+          nf.ng.ProcessorComponent = factory(root.$,
+              root.Slick,
+              root.nf.Client,
+              root.nf.Birdseye,
+              root.nf.Graph,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler,
+              root.nf.Dialog,
+              root.nf.Common);
+      }
+  }(this, function ($, Slick, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
+            /**
+             * Filters the processor type table.
+             */
+            var applyFilter = function () {
+                // get the dataview
+                var processorTypesGrid = $('#processor-types-table').data('gridInstance');
+    
+                // ensure the grid has been initialized
+              if (nfCommon.isDefinedAndNotNull(processorTypesGrid)) {
+                    var processorTypesData = processorTypesGrid.getData();
+    
+                    // update the search criteria
+                    processorTypesData.setFilterArgs({
+                        searchString: getFilterText()
+                    });
+                    processorTypesData.refresh();
+    
+                  // update the buttons to possibly trigger the disabled state
+                  $('#new-processor-dialog').modal('refreshButtons');
+  
+                    // update the selection if possible
+                    if (processorTypesData.getLength() > 0) {
+                        processorTypesGrid.setSelectedRows([0]);
+                    }
                 }
-            }
-        };
-
-        /**
-         * Determines if the item matches the filter.
-         *
-         * @param {object} item     The item to filter.
-         * @param {object} args     The filter criteria.
-         * @returns {boolean}       Whether the item matches the filter.
-         */
-        var matchesRegex = function (item, args) {
-            if (args.searchString === '') {
-                return true;
-            }
-
-            try {
-                // perform the row filtering
-                var filterExp = new RegExp(args.searchString, 'i');
-            } catch (e) {
-                // invalid regex
-                return false;
-            }
-
-            // determine if the item matches the filter
-            var matchesLabel = item['label'].search(filterExp) >= 0;
-            var matchesTags = item['tags'].search(filterExp) >= 0;
-            return matchesLabel || matchesTags;
-        };
-
-        /**
-         * Performs the filtering.
-         *
-         * @param {object} item     The item subject to filtering.
-         * @param {object} args     Filter arguments.
-         * @returns {Boolean}       Whether or not to include the item.
-         */
-        var filter = function (item, args) {
-            // determine if the item matches the filter
-            var matchesFilter = matchesRegex(item, args);
-
-            // determine if the row matches the selected tags
-            var matchesTags = true;
-            if (matchesFilter) {
-                var tagFilters = $('#processor-tag-cloud').tagcloud('getSelectedTags');
-                var hasSelectedTags = tagFilters.length > 0;
-                if (hasSelectedTags) {
-                    matchesTags = matchesSelectedTags(tagFilters, item['tags']);
+            };
+    
+            /**
+             * Determines if the item matches the filter.
+             *
+             * @param {object} item     The item to filter.
+             * @param {object} args     The filter criteria.
+             * @returns {boolean}       Whether the item matches the filter.
+             */
+            var matchesRegex = function (item, args) {
+                if (args.searchString === '') {
+                    return true;
                 }
-            }
-
-            // determine if this row should be visible
-            var matches = matchesFilter && matchesTags;
-
-            // if this row is currently selected and its being filtered
-            if (matches === false && $('#selected-processor-type').text() === item['type']) {
+    
+                try {
+                    // perform the row filtering
+                    var filterExp = new RegExp(args.searchString, 'i');
+                } catch (e) {
+                    // invalid regex
+                    return false;
+                }
+    
+                // determine if the item matches the filter
+                var matchesLabel = item['label'].search(filterExp) >= 0;
+                var matchesTags = item['tags'].search(filterExp) >= 0;
+                return matchesLabel || matchesTags;
+            };
+    
+            /**
+             * Performs the filtering.
+             *
+             * @param {object} item     The item subject to filtering.
+             * @param {object} args     Filter arguments.
+             * @returns {Boolean}       Whether or not to include the item.
+             */
+            var filter = function (item, args) {
+                // determine if the item matches the filter
+                var matchesFilter = matchesRegex(item, args);
+    
+                // determine if the row matches the selected tags
+                var matchesTags = true;
+                if (matchesFilter) {
+                    var tagFilters = $('#processor-tag-cloud').tagcloud('getSelectedTags');
+                    var hasSelectedTags = tagFilters.length > 0;
+                    if (hasSelectedTags) {
+                        matchesTags = matchesSelectedTags(tagFilters, item['tags']);
+                    }
+                }
+    
+                // determine if this row should be visible
+                var matches = matchesFilter && matchesTags;
+    
+                // if this row is currently selected and its being filtered
+                if (matches === false && $('#selected-processor-type').text() === item['type']) {
+                    // clear the selected row
+                    $('#processor-type-description').text('');
+                    $('#processor-type-name').text('');
+                    $('#selected-processor-name').text('');
+                    $('#selected-processor-type').text('');
+    
+                    // clear the active cell the it can be reselected when its included
+                    var processTypesGrid = $('#processor-types-table').data('gridInstance');
+                    processTypesGrid.resetActiveCell();
+                }
+    
+                return matches;
+            };
+    
+            /**
+             * Determines if the specified tags match all the tags selected by the user.
+             *
+             * @argument {string[]} tagFilters      The tag filters.
+             * @argument {string} tags              The tags to test.
+             */
+            var matchesSelectedTags = function (tagFilters, tags) {
+                var selectedTags = [];
+                $.each(tagFilters, function (_, filter) {
+                    selectedTags.push(filter);
+                });
+    
+                // normalize the tags
+                var normalizedTags = tags.toLowerCase();
+    
+                var matches = true;
+                $.each(selectedTags, function (i, selectedTag) {
+                    if (normalizedTags.indexOf(selectedTag) === -1) {
+                        matches = false;
+                        return false;
+                    }
+                });
+    
+                return matches;
+            };
+    
+            /**
+             * Sorts the specified data using the specified sort details.
+             *
+             * @param {object} sortDetails
+             * @param {object} data
+             */
+            var sort = function (sortDetails, data) {
+                // defines a function for sorting
+                var comparer = function (a, b) {
+                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                    return aString === bString ? 0 : aString > bString ? 1 : -1;
+                };
+    
+                // perform the sort
+                data.sort(comparer, sortDetails.sortAsc);
+            };
+    
+            /**
+             * Get the text out of the filter field. If the filter field doesn't
+             * have any text it will contain the text 'filter list' so this method
+             * accounts for that.
+             */
+            var getFilterText = function () {
+                return $('#processor-type-filter').val();
+            };
+    
+            /**
+             * Resets the filtered processor types.
+             */
+            var resetProcessorDialog = function () {
+                // clear the selected tag cloud
+                $('#processor-tag-cloud').tagcloud('clearSelectedTags');
+    
+                // clear any filter strings
+                $('#processor-type-filter').val('');
+    
+                // reapply the filter
+                applyFilter();
+    
                 // clear the selected row
                 $('#processor-type-description').text('');
                 $('#processor-type-name').text('');
                 $('#selected-processor-name').text('');
                 $('#selected-processor-type').text('');
-
-                // clear the active cell the it can be reselected when its included
+    
+                // unselect any current selection
                 var processTypesGrid = $('#processor-types-table').data('gridInstance');
+                processTypesGrid.setSelectedRows([]);
                 processTypesGrid.resetActiveCell();
-            }
-
-            return matches;
-        };
-
-        /**
-         * Determines if the specified tags match all the tags selected by the user.
-         *
-         * @argument {string[]} tagFilters      The tag filters.
-         * @argument {string} tags              The tags to test.
-         */
-        var matchesSelectedTags = function (tagFilters, tags) {
-            var selectedTags = [];
-            $.each(tagFilters, function (_, filter) {
-                selectedTags.push(filter);
-            });
-
-            // normalize the tags
-            var normalizedTags = tags.toLowerCase();
-
-            var matches = true;
-            $.each(selectedTags, function (i, selectedTag) {
-                if (normalizedTags.indexOf(selectedTag) === -1) {
-                    matches = false;
-                    return false;
-                }
-            });
-
-            return matches;
-        };
-
-        /**
-         * Sorts the specified data using the specified sort details.
-         *
-         * @param {object} sortDetails
-         * @param {object} data
-         */
-        var sort = function (sortDetails, data) {
-            // defines a function for sorting
-            var comparer = function (a, b) {
-                var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                return aString === bString ? 0 : aString > bString ? 1 : -1;
-            };
-
-            // perform the sort
-            data.sort(comparer, sortDetails.sortAsc);
-        };
-
-        /**
-         * Get the text out of the filter field. If the filter field doesn't
-         * have any text it will contain the text 'filter list' so this method
-         * accounts for that.
-         */
-        var getFilterText = function () {
-            return $('#processor-type-filter').val();
-        };
-
-        /**
-         * Resets the filtered processor types.
-         */
-        var resetProcessorDialog = function () {
-            // clear the selected tag cloud
-            $('#processor-tag-cloud').tagcloud('clearSelectedTags');
-
-            // clear any filter strings
-            $('#processor-type-filter').val('');
-
-            // reapply the filter
-            applyFilter();
-
-            // clear the selected row
-            $('#processor-type-description').text('');
-            $('#processor-type-name').text('');
-            $('#selected-processor-name').text('');
-            $('#selected-processor-type').text('');
-
-            // unselect any current selection
-            var processTypesGrid = $('#processor-types-table').data('gridInstance');
-            processTypesGrid.setSelectedRows([]);
-            processTypesGrid.resetActiveCell();
-        };
-
-        /**
-         * Create the processor and add to the graph.
-         *
-         * @argument {string} name              The processor name.
-         * @argument {string} processorType     The processor type.
-         * @argument {object} pt                The point that the processor was dropped.
-         */
-        var createProcessor = function (name, processorType, pt) {
-            var processorEntity = {
-                'revision': nfClient.getRevision({
-                    'revision': {
-                        'version': 0
-                    }
-                }),
-                'component': {
-                    'type': processorType,
-                    'name': name,
-                    'position': {
-                        'x': pt.x,
-                        'y': pt.y
-                    }
-                }
             };
-
-            // create a new processor of the defined type
-            $.ajax({
-                type: 'POST',
-                url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/processors',
-                data: JSON.stringify(processorEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // add the processor to the graph
-                nfGraph.add({
-                    'processors': [response]
-                }, {
-                    'selectAll': true
-                });
-
-                // update component visibility
-                nfGraph.updateVisibility();
-
-                // update the birdseye
-                nfBirdseye.refresh();
-            }).fail(nfErrorHandler.handleAjaxError);
-        };
-
-        /**
-         * Whether the specified item is selectable.
-         *
-         * @param item process type
-         */
-        var isSelectable = function (item) {
-            return nfCommon.isBlank(item.usageRestriction) || nfCommon.canAccessRestrictedComponents();
-        };
-
-        function ProcessorComponent() {
-
-            this.icon = 'icon icon-processor';
-
-            this.hoverIcon = 'icon icon-processor-add';
-
+    
             /**
-             * The processor component's modal.
+             * Create the processor and add to the graph.
+             *
+             * @argument {string} name              The processor name.
+             * @argument {string} processorType     The processor type.
+             * @argument {object} pt                The point that the processor was dropped.
              */
-            this.modal = {
-
+            var createProcessor = function (name, processorType, pt) {
+                var processorEntity = {
+                  'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                        'type': processorType,
+                        'name': name,
+                        'position': {
+                            'x': pt.x,
+                            'y': pt.y
+                        }
+                    }
+                };
+    
+                // create a new processor of the defined type
+                $.ajax({
+                    type: 'POST',
+                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/processors',
+                    data: JSON.stringify(processorEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the processor to the graph
+                  nfGraph.add({
+                        'processors': [response]
+                    }, {
+                        'selectAll': true
+                    });
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+              }).fail(nfErrorHandler.handleAjaxError);
+          };
+  
+          /**
+           * Whether the specified item is selectable.
+           *
+           * @param item process type
+           */
+          var isSelectable = function (item) {
+              return nfCommon.isBlank(item.usageRestriction) || nfCommon.canAccessRestrictedComponents();
+            };
+    
+            function ProcessorComponent() {
+    
+                this.icon = 'icon icon-processor';
+    
+                this.hoverIcon = 'icon icon-processor-add';
+    
                 /**
-                 * The processor component modal's filter.
+                 * The processor component's modal.
                  */
-                filter: {
-
+                this.modal = {
+    
                     /**
-                     * Initialize the filter.
+                     * The processor component modal's filter.
                      */
-                    init: function () {
-                        // initialize the processor type table
-                        var processorTypesColumns = [
-                            {
-                                id: 'type',
-                                name: 'Type',
-                                field: 'label',
-                                formatter: nfCommon.typeFormatter,
-                                sortable: true,
-                                resizable: true
-                            },
-                            {
-                                id: 'tags',
-                                name: 'Tags',
-                                field: 'tags',
-                                sortable: true,
-                                resizable: true
-                            }
-                        ];
-
-                        var processorTypesOptions = {
-                            forceFitColumns: true,
-                            enableTextSelectionOnCells: true,
-                            enableCellNavigation: true,
-                            enableColumnReorder: false,
-                            autoEdit: false,
-                            multiSelect: false,
-                            rowHeight: 24
-                        };
-
-                        // initialize the dataview
-                        var processorTypesData = new Slick.Data.DataView({
-                            inlineFilters: false
-                        });
-                        processorTypesData.setItems([]);
-                        processorTypesData.setFilterArgs({
-                            searchString: getFilterText()
-                        });
-                        processorTypesData.setFilter(filter);
-
-                        // initialize the sort
-                        sort({
-                            columnId: 'type',
-                            sortAsc: true
-                        }, processorTypesData);
-
-                        // initialize the grid
-                        var processorTypesGrid = new Slick.Grid('#processor-types-table', processorTypesData, processorTypesColumns, processorTypesOptions);
-                        processorTypesGrid.setSelectionModel(new Slick.RowSelectionModel());
-                        processorTypesGrid.registerPlugin(new Slick.AutoTooltips());
-                        processorTypesGrid.setSortColumn('type', true);
-                        processorTypesGrid.onSort.subscribe(function (e, args) {
+                    filter: {
+    
+                        /**
+                         * Initialize the filter.
+                         */
+                        init: function () {
+                            // initialize the processor type table
+                            var processorTypesColumns = [
+                              {
+                                  id: 'type',
+                                  name: nf._.msg('nf-processor-component.Type'),
+                                  field: 'label',
+                                  formatter: nfCommon.typeFormatter,
+                                  sortable: true,
+                                  resizable: true
+                              },
+                              {
+                                  id: 'tags',
+                                  name: nf._.msg('nf-processor-component.Tags'),
+                                  field: 'tags',
+                                  sortable: true,
+                                  resizable: true
+                              }
+                            ];
+    
+                            var processorTypesOptions = {
+                                forceFitColumns: true,
+                                enableTextSelectionOnCells: true,
+                                enableCellNavigation: true,
+                                enableColumnReorder: false,
+                                autoEdit: false,
+                                multiSelect: false,
+                                rowHeight: 24
+                            };
+    
+                            // initialize the dataview
+                            var processorTypesData = new Slick.Data.DataView({
+                                inlineFilters: false
+                            });
+                            processorTypesData.setItems([]);
+                            processorTypesData.setFilterArgs({
+                                searchString: getFilterText()
+                            });
+                            processorTypesData.setFilter(filter);
+    
+                            // initialize the sort
                             sort({
-                                columnId: args.sortCol.field,
-                                sortAsc: args.sortAsc
+                                columnId: 'type',
+                                sortAsc: true
                             }, processorTypesData);
-                        });
-                        processorTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) {
-                            if ($.isArray(args.rows) && args.rows.length === 1) {
-                                var processorTypeIndex = args.rows[0];
-                                var processorType = processorTypesGrid.getDataItem(processorTypeIndex);
-
-                                // set the processor type description
-                                if (nfCommon.isDefinedAndNotNull(processorType)) {
-                                    if (nfCommon.isBlank(processorType.description)) {
-                                        $('#processor-type-description')
-                                            .attr('title', '')
-                                            .html('<span class="unset">No description specified</span>');
-                                    } else {
-                                        $('#processor-type-description')
-                                            .width($('#processor-description-container').innerWidth() - 1)
-                                            .html(processorType.description)
-                                            .ellipsis();
-                                    }
-
-                                    // populate the dom
-                                    $('#processor-type-name').text(processorType.label).ellipsis();
-                                    $('#selected-processor-name').text(processorType.label);
-                                    $('#selected-processor-type').text(processorType.type);
-
-                                    // refresh the buttons based on the current selection
-                                    $('#new-processor-dialog').modal('refreshButtons');
-                                }
-                            }
-                        });
-                        processorTypesGrid.onViewportChanged.subscribe(function (e, args) {
-                            nfCommon.cleanUpTooltips($('#processor-types-table'), 'div.view-usage-restriction');
-                        });
-
-                        // wire up the dataview to the grid
-                        processorTypesData.onRowCountChanged.subscribe(function (e, args) {
-                            processorTypesGrid.updateRowCount();
-                            processorTypesGrid.render();
-
-                            // update the total number of displayed processors
-                            $('#displayed-processor-types').text(args.current);
-                        });
-                        processorTypesData.onRowsChanged.subscribe(function (e, args) {
-                            processorTypesGrid.invalidateRows(args.rows);
-                            processorTypesGrid.render();
-                        });
-                        processorTypesData.syncGridSelection(processorTypesGrid, false);
-
-                        // hold onto an instance of the grid
-                        $('#processor-types-table').data('gridInstance', processorTypesGrid).on('mouseenter', 'div.slick-cell', function (e) {
-                            var usageRestriction = $(this).find('div.view-usage-restriction');
-                            if (usageRestriction.length && !usageRestriction.data('qtip')) {
-                                var rowId = $(this).find('span.row-id').text();
-
-                                // get the status item
-                                var item = processorTypesData.getItemById(rowId);
-
-                                // show the tooltip
-                                if (nfCommon.isDefinedAndNotNull(item.usageRestriction)) {
-                                    usageRestriction.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                                        content: item.usageRestriction,
-                                        position: {
-                                            container: $('#summary'),
-                                            at: 'bottom right',
-                                            my: 'top left',
-                                            adjust: {
-                                                x: 4,
-                                                y: 4
-                                            }
+    
+                            // initialize the grid
+                            var processorTypesGrid = new Slick.Grid('#processor-types-table', processorTypesData, processorTypesColumns, processorTypesOptions);
+                            processorTypesGrid.setSelectionModel(new Slick.RowSelectionModel());
+                            processorTypesGrid.registerPlugin(new Slick.AutoTooltips());
+                            processorTypesGrid.setSortColumn('type', true);
+                            processorTypesGrid.onSort.subscribe(function (e, args) {
+                                sort({
+                                    columnId: args.sortCol.field,
+                                    sortAsc: args.sortAsc
+                                }, processorTypesData);
+                            });
+                            processorTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) {
+                                if ($.isArray(args.rows) && args.rows.length === 1) {
+                                    var processorTypeIndex = args.rows[0];
+                                    var processorType = processorTypesGrid.getDataItem(processorTypeIndex);
+    
+                                    // set the processor type description
+                                  if (nfCommon.isDefinedAndNotNull(processorType)) {
+                                      if (nfCommon.isBlank(processorType.description)) {
+                                          $('#processor-type-description')
+                                              .attr('title', '')
+                                              .html('<span class="unset">No description specified</span>');
+                                        } else {
+                                          $('#processor-type-description')
+                                              .width($('#processor-description-container').innerWidth() - 1)
+                                              .html(processorType.description)
+                                              .ellipsis();
                                         }
-                                    }));
-                                }
-                            }
-                        });
-
-                        // load the available processor types, this select is shown in the
-                        // new processor dialog when a processor is dragged onto the screen
-                        $.ajax({
-                            type: 'GET',
-                            url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.processorTypes,
-                            dataType: 'json'
-                        }).done(function (response) {
-                            var tags = [];
-
-                            // begin the update
-                            processorTypesData.beginUpdate();
-
-                            // go through each processor type
-                            $.each(response.processorTypes, function (i, documentedType) {
-                                var type = documentedType.type;
-
-                                // create the row for the processor type
-                                processorTypesData.addItem({
-                                    id: i,
-                                    label: nfCommon.substringAfterLast(type, '.'),
-                                    type: type,
-                                    description: nfCommon.escapeHtml(documentedType.description),
-                                    usageRestriction: nfCommon.escapeHtml(documentedType.usageRestriction),
-                                    tags: documentedType.tags.join(', ')
-                                });
-
-                                // count the frequency of each tag for this type
-                                $.each(documentedType.tags, function (i, tag) {
-                                    tags.push(tag.toLowerCase());
-                                });
+    
+                                        // populate the dom
+                                        $('#processor-type-name').text(processorType.label).ellipsis();
+                                        $('#selected-processor-name').text(processorType.label);
+                                        $('#selected-processor-type').text(processorType.type);
+    
+                                      // refresh the buttons based on the current selection
+                                      $('#new-processor-dialog').modal('refreshButtons');
+                                  }
+                              }
+                          });
+                          processorTypesGrid.onViewportChanged.subscribe(function (e, args) {
+                              nfCommon.cleanUpTooltips($('#processor-types-table'), 'div.view-usage-restriction');
                             });
-
-                            // end the udpate
-                            processorTypesData.endUpdate();
-
-                            // set the total number of processors
-                            $('#total-processor-types, #displayed-processor-types').text(response.processorTypes.length);
-
-                            // create the tag cloud
-                            $('#processor-tag-cloud').tagcloud({
-                                tags: tags,
-                                select: applyFilter,
-                                remove: applyFilter
+    
+                            // wire up the dataview to the grid
+                            processorTypesData.onRowCountChanged.subscribe(function (e, args) {
+                                processorTypesGrid.updateRowCount();
+                                processorTypesGrid.render();
+    
+                                // update the total number of displayed processors
+                                $('#displayed-processor-types').text(args.current);
                             });
-                        }).fail(nfErrorHandler.handleAjaxError);
+                            processorTypesData.onRowsChanged.subscribe(function (e, args) {
+                                processorTypesGrid.invalidateRows(args.rows);
+                                processorTypesGrid.render();
+                            });
+                            processorTypesData.syncGridSelection(processorTypesGrid, false);
+    
+                            // hold onto an instance of the grid
+                          $('#processor-types-table').data('gridInstance', processorTypesGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                              var usageRestriction = $(this).find('div.view-usage-restriction');
+                              if (usageRestriction.length && !usageRestriction.data('qtip')) {
+                                  var rowId = $(this).find('span.row-id').text();
+  
+                                  // get the status item
+                                  var item = processorTypesData.getItemById(rowId);
+  
+                                  // show the tooltip
+                                  if (nfCommon.isDefinedAndNotNull(item.usageRestriction)) {
+                                      usageRestriction.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                                          content: item.usageRestriction,
+                                          position: {
+                                              container: $('#summary'),
+                                              at: 'bottom right',
+                                              my: 'top left',
+                                              adjust: {
+                                                  x: 4,
+                                                  y: 4
+                                              }
+                                          }
+                                      }));
+                                  }
+                              }
+                          });
+    
+                            // load the available processor types, this select is shown in the
+                            // new processor dialog when a processor is dragged onto the screen
+                            $.ajax({
+                                type: 'GET',
+                                url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.processorTypes,
+                                dataType: 'json'
+                            }).done(function (response) {
+                                var tags = [];
+    
+                                // begin the update
+                                processorTypesData.beginUpdate();
+    
+                                // go through each processor type
+                                $.each(response.processorTypes, function (i, documentedType) {
+                                    var type = documentedType.type;
+    
+                                    // create the row for the processor type
+                                    processorTypesData.addItem({
+                                        id: i,
+                                      label: nfCommon.substringAfterLast(type, '.'),
+                                        type: type,
+                                      description: nfCommon.escapeHtml(documentedType.description),
+                                      usageRestriction: nfCommon.escapeHtml(documentedType.usageRestriction),
+                                        tags: documentedType.tags.join(', ')
+                                    });
+    
+                                    // count the frequency of each tag for this type
+                                    $.each(documentedType.tags, function (i, tag) {
+                                        tags.push(tag.toLowerCase());
+                                    });
+                                });
+    
+                                // end the udpate
+                                processorTypesData.endUpdate();
+    
+                                // set the total number of processors
+                                $('#total-processor-types, #displayed-processor-types').text(response.processorTypes.length);
+    
+                                // create the tag cloud
+                                $('#processor-tag-cloud').tagcloud({
+                                    tags: tags,
+                                    select: applyFilter,
+                                    remove: applyFilter
+                                });
+                          }).fail(nfErrorHandler.handleAjaxError);
+                        }
+                    },
+    
+                    /**
+                     * Gets the modal element.
+                     *
+                     * @returns {*|jQuery|HTMLElement}
+                     */
+                    getElement: function () {
+                        return $('#new-processor-dialog');
+                    },
+    
+                    /**
+                     * Initialize the modal.
+                     */
+                    init: function () {
+                        this.filter.init();
+    
+                        // configure the new processor dialog
+                        this.getElement().modal({
+                            scrollableContentStyle: 'scrollable',
+                      headerText: nf._.msg('nf-processor-component.AddProcessor'),
+                          handler: {
+                              resize: function () {
+                                  $('#processor-type-description')
+                                      .width($('#processor-description-container').innerWidth() - 1)
+                                      .text($('#processor-type-description').attr('title'))
+                                      .ellipsis();
+                              }
+                          }
+                        });
+                    },
+    
+                    /**
+                     * Updates the modal config.
+                     *
+                     * @param {string} name             The name of the property to update.
+                     * @param {object|array} config     The config for the `name`.
+                     */
+                    update: function (name, config) {
+                        this.getElement().modal(name, config);
+                    },
+    
+                    /**
+                     * Show the modal
+                     */
+                    show: function () {
+                        this.getElement().modal('show');
+                    },
+    
+                    /**
+                     * Hide the modal
+                     */
+                    hide: function () {
+                        this.getElement().modal('hide');
                     }
-                },
-
+                };
+            }
+    
+            ProcessorComponent.prototype = {
+                constructor: ProcessorComponent,
+    
                 /**
-                 * Gets the modal element.
+                 * Gets the component.
                  *
                  * @returns {*|jQuery|HTMLElement}
                  */
                 getElement: function () {
-                    return $('#new-processor-dialog');
+                    return $('#processor-component');
                 },
-
+    
                 /**
-                 * Initialize the modal.
+                 * Enable the component.
                  */
-                init: function () {
-                    this.filter.init();
-
-                    // configure the new processor dialog
-                    this.getElement().modal({
-                        scrollableContentStyle: 'scrollable',
-                        headerText: 'Add Processor',
-                        handler: {
-                            resize: function () {
-                                $('#processor-type-description')
-                                    .width($('#processor-description-container').innerWidth() - 1)
-                                    .text($('#processor-type-description').attr('title'))
-                                    .ellipsis();
-                            }
-                        }
-                    });
+                enabled: function () {
+                    this.getElement().attr('disabled', false);
+                },
+    
+                /**
+                 * Disable the component.
+                 */
+                disabled: function () {
+                    this.getElement().attr('disabled', true);
                 },
-
+    
                 /**
-                 * Updates the modal config.
+                 * Handler function for when component is dropped on the canvas.
                  *
-                 * @param {string} name             The name of the property to update.
-                 * @param {object|array} config     The config for the `name`.
+                 * @argument {object} pt        The point that the component was dropped
                  */
-                update: function (name, config) {
-                    this.getElement().modal(name, config);
+                dropHandler: function (pt) {
+                    this.promptForProcessorType(pt);
                 },
-
+    
                 /**
-                 * Show the modal
+                 * The drag icon for the toolbox component.
+                 *
+                 * @param event
+                 * @returns {*|jQuery|HTMLElement}
                  */
-                show: function () {
-                    this.getElement().modal('show');
+                dragIcon: function (event) {
+                    return $('<div class="icon icon-processor-add"></div>');
                 },
-
+    
                 /**
-                 * Hide the modal
+                 * Prompts the user to select the type of new processor to create.
+                 *
+                 * @argument {object} pt        The point that the processor was dropped
                  */
-                hide: function () {
-                    this.getElement().modal('hide');
-                }
-            };
-        }
-
-        ProcessorComponent.prototype = {
-            constructor: ProcessorComponent,
-
-            /**
-             * Gets the component.
-             *
-             * @returns {*|jQuery|HTMLElement}
-             */
-            getElement: function () {
-                return $('#processor-component');
-            },
-
-            /**
-             * Enable the component.
-             */
-            enabled: function () {
-                this.getElement().attr('disabled', false);
-            },
-
-            /**
-             * Disable the component.
-             */
-            disabled: function () {
-                this.getElement().attr('disabled', true);
-            },
-
-            /**
-             * Handler function for when component is dropped on the canvas.
-             *
-             * @argument {object} pt        The point that the component was dropped
-             */
-            dropHandler: function (pt) {
-                this.promptForProcessorType(pt);
-            },
-
-            /**
-             * The drag icon for the toolbox component.
-             *
-             * @param event
-             * @returns {*|jQuery|HTMLElement}
-             */
-            dragIcon: function (event) {
-                return $('<div class="icon icon-processor-add"></div>');
-            },
-
-            /**
-             * Prompts the user to select the type of new processor to create.
-             *
-             * @argument {object} pt        The point that the processor was dropped
-             */
-            promptForProcessorType: function (pt) {
-                var processorComponent = this;
-
-                // handles adding the selected processor at the specified point
-                var addProcessor = function () {
-                    // get the type of processor currently selected
-                    var name = $('#selected-processor-name').text();
-                    var processorType = $('#selected-processor-type').text();
-
-                    // ensure something was selected
-                    if (name === '' || processorType === '') {
-                        nfDialog.showOkDialog({
-                            headerText: 'Add Processor',
-                            dialogContent: 'The type of processor to create must be selected.'
-                        });
-                    } else {
-                        // create the new processor
-                        createProcessor(name, processorType, pt);
-                    }
-
-                    // hide the dialog
-                    processorComponent.modal.hide();
-                };
-
-                // get the grid reference
-                var grid = $('#processor-types-table').data('gridInstance');
-
-                // add the processor when its double clicked in the table
-                var gridDoubleClick = function (e, args) {
-                    var processorType = grid.getDataItem(args.row);
-
-                    if (isSelectable(processorType)) {
-                        $('#selected-processor-name').text(processorType.label);
-                        $('#selected-processor-type').text(processorType.type);
-
-                        addProcessor();
-                    }
-                };
-
-                // register a handler for double click events
-                grid.onDblClick.subscribe(gridDoubleClick);
-
-                // update the button model
-                this.modal.update('setButtonModel', [{
-                    buttonText: 'Add',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    disabled: function () {
-                        var selected = grid.getSelectedRows();
-
-                        if (selected.length > 0) {
-                            // grid configured with multi-select = false
-                            var item = grid.getDataItem(selected[0]);
-                            return isSelectable(item) === false;
+                promptForProcessorType: function (pt) {
+                  var processorComponent = this;
+  
+                    // handles adding the selected processor at the specified point
+                    var addProcessor = function () {
+                        // get the type of processor currently selected
+                        var name = $('#selected-processor-name').text();
+                        var processorType = $('#selected-processor-type').text();
+    
+                        // ensure something was selected
+                        if (name === '' || processorType === '') {
+                          nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-processor-component.AddProcessor'),
+                          dialogContent: nf._.msg('nf-processor-component.AddProcessorContent')
+                            });
                         } else {
-                            return grid.getData().getLength() === 0;
+                            // create the new processor
+                            createProcessor(name, processorType, pt);
                         }
-                    },
-                    handler: {
-                        click: addProcessor
-                    }
-                },
-                    {
-                        buttonText: 'Cancel',
+    
+                        // hide the dialog
+                      processorComponent.modal.hide();
+                    };
+    
+                    // get the grid reference
+                    var grid = $('#processor-types-table').data('gridInstance');
+    
+                    // add the processor when its double clicked in the table
+                    var gridDoubleClick = function (e, args) {
+                        var processorType = grid.getDataItem(args.row);
+    
+                      if (isSelectable(processorType)) {
+                            $('#selected-processor-name').text(processorType.label);
+                            $('#selected-processor-type').text(processorType.type);
+    
+                            addProcessor();
+                      }
+                    };
+    
+                    // register a handler for double click events
+                    grid.onDblClick.subscribe(gridDoubleClick);
+    
+                    // update the button model
+                    this.modal.update('setButtonModel', [{
+                  buttonText: nf._.msg('nf-processor-component.Add'),
                         color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
                         },
+                      disabled: function () {
+                          var selected = grid.getSelectedRows();
+  
+                          if (selected.length > 0) {
+                              // grid configured with multi-select = false
+                              var item = grid.getDataItem(selected[0]);
+                              return isSelectable(item) === false;
+                          } else {
+                              return grid.getData().getLength() === 0;
+                          }
+                      },
                         handler: {
-                            click: function () {
-                                $('#new-processor-dialog').modal('hide');
-                            }
+                            click: addProcessor
                         }
-                    }]);
-
-                // set a new handler for closing the the dialog
-                this.modal.update('setCloseHandler', function () {
-                    // remove the handler
-                    grid.onDblClick.unsubscribe(gridDoubleClick);
-
-                    // clear the current filters
-                    resetProcessorDialog();
-                });
-
-                // show the dialog
-                this.modal.show();
-
-                // setup the filter
-                $('#processor-type-filter').focus().off('keyup').on('keyup', function (e) {
-                    var code = e.keyCode ? e.keyCode : e.which;
-                    if (code === $.ui.keyCode.ENTER) {
-                        var selected = grid.getSelectedRows();
-
-                        if (selected.length > 0) {
-                            // grid configured with multi-select = false
-                            var item = grid.getDataItem(selected[0]);
-                            if (isSelectable(item)) {
-                                addProcessor();
+                    },
+                        {
+                      buttonText: nf._.msg('nf-processor-component.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    $('#new-processor-dialog').modal('hide');
+                                }
                             }
+                        }]);
+    
+                    // set a new handler for closing the the dialog
+                    this.modal.update('setCloseHandler', function () {
+                        // remove the handler
+                        grid.onDblClick.unsubscribe(gridDoubleClick);
+    
+                        // clear the current filters
+                        resetProcessorDialog();
+                    });
+    
+                    // show the dialog
+                    this.modal.show();
+    
+                    // setup the filter
+                    $('#processor-type-filter').focus().off('keyup').on('keyup', function (e) {
+                        var code = e.keyCode ? e.keyCode : e.which;
+                        if (code === $.ui.keyCode.ENTER) {
+                          var selected = grid.getSelectedRows();
+  
+                          if (selected.length > 0) {
+                              // grid configured with multi-select = false
+                              var item = grid.getDataItem(selected[0]);
+                              if (isSelectable(item)) {
+                                    addProcessor();
+                              }
+                          }
+                        } else {
+                            applyFilter();
                         }
-                    } else {
-                        applyFilter();
-                    }
-                });
-
-                // adjust the grid canvas now that its been rendered
-                grid.resizeCanvas();
-                grid.setSelectedRows([0]);
+                    });
+    
+                    // adjust the grid canvas now that its been rendered
+                    grid.resizeCanvas();
+                    grid.setSelectedRows([0]);
+                }
             }
-        }
-
-        var processorComponent = new ProcessorComponent();
-        return processorComponent;
-    };
-}));
\ No newline at end of file
+    
+            var processorComponent = new ProcessorComponent();
+            return processorComponent;
+        };
+  }));
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 08f1b1a216da..86b0dec44ac0 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
@@ -1,321 +1,321 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Client',
-                'nf.Birdseye',
-                'nf.Graph',
-                'nf.CanvasUtils',
-                'nf.ErrorHandler',
-                'nf.Dialog',
-                'nf.Common'],
-            function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
-                return (nf.ng.RemoteProcessGroupComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.RemoteProcessGroupComponent =
-            factory(require('jquery'),
-                require('nf.Client'),
-                require('nf.Birdseye'),
-                require('nf.Graph'),
-                require('nf.CanvasUtils'),
-                require('nf.ErrorHandler'),
-                require('nf.Dialog'),
-                require('nf.Common')));
-    } else {
-        nf.ng.RemoteProcessGroupComponent = factory(root.$,
-            root.nf.Client,
-            root.nf.Birdseye,
-            root.nf.Graph,
-            root.nf.CanvasUtils,
-            root.nf.ErrorHandler,
-            root.nf.Dialog,
-            root.nf.Common);
-    }
-}(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
-    'use strict';
-
-    return function (serviceProvider) {
-        'use strict';
-
-        /**
-         * Create the controller and add to the graph.
-         *
-         * @argument {object} pt                            The point that the remote group was dropped.
-         */
-        var createRemoteProcessGroup = function (pt) {
-
-            var remoteProcessGroupEntity = {
-                'revision': nfClient.getRevision({
-                    'revision': {
-                        'version': 0
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Client',
+                  'nf.Birdseye',
+                  'nf.Graph',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler',
+                  'nf.Dialog',
+                  'nf.Common'],
+              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
+                  return (nf.ng.RemoteProcessGroupComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.RemoteProcessGroupComponent =
+              factory(require('jquery'),
+                  require('nf.Client'),
+                  require('nf.Birdseye'),
+                  require('nf.Graph'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Dialog'),
+                  require('nf.Common')));
+      } else {
+          nf.ng.RemoteProcessGroupComponent = factory(root.$,
+              root.nf.Client,
+              root.nf.Birdseye,
+              root.nf.Graph,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler,
+              root.nf.Dialog,
+              root.nf.Common);
+      }
+  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
+            /**
+             * Create the controller and add to the graph.
+             *
+             * @argument {object} pt                            The point that the remote group was dropped.
+             */
+            var createRemoteProcessGroup = function (pt) {
+    
+                var remoteProcessGroupEntity = {
+                  'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                      'targetUris': $('#new-remote-process-group-uris').val(),
+                        'position': {
+                            'x': pt.x,
+                            'y': pt.y
+                        },
+                        'communicationsTimeout': $('#new-remote-process-group-timeout').val(),
+                        'yieldDuration': $('#new-remote-process-group-yield-duration').val(),
+                        'transportProtocol': $('#new-remote-process-group-transport-protocol-combo').combo('getSelectedOption').value,
+                      'localNetworkInterface': $('#new-remote-process-group-local-network-interface').val(),
+                        'proxyHost': $('#new-remote-process-group-proxy-host').val(),
+                        'proxyPort': $('#new-remote-process-group-proxy-port').val(),
+                        'proxyUser': $('#new-remote-process-group-proxy-user').val(),
+                        'proxyPassword': $('#new-remote-process-group-proxy-password').val()
                     }
-                }),
-                'component': {
-                    'targetUris': $('#new-remote-process-group-uris').val(),
-                    'position': {
-                        'x': pt.x,
-                        'y': pt.y
-                    },
-                    'communicationsTimeout': $('#new-remote-process-group-timeout').val(),
-                    'yieldDuration': $('#new-remote-process-group-yield-duration').val(),
-                    'transportProtocol': $('#new-remote-process-group-transport-protocol-combo').combo('getSelectedOption').value,
-                    'localNetworkInterface': $('#new-remote-process-group-local-network-interface').val(),
-                    'proxyHost': $('#new-remote-process-group-proxy-host').val(),
-                    'proxyPort': $('#new-remote-process-group-proxy-port').val(),
-                    'proxyUser': $('#new-remote-process-group-proxy-user').val(),
-                    'proxyPassword': $('#new-remote-process-group-proxy-password').val()
-                }
-            };
-
-            // create a new processor of the defined type
-            $.ajax({
-                type: 'POST',
-                url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/remote-process-groups',
-                data: JSON.stringify(remoteProcessGroupEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // add the processor to the graph
-                nfGraph.add({
-                    'remoteProcessGroups': [response]
-                }, {
-                    'selectAll': true
-                });
-
-                // hide the dialog
-                $('#new-remote-process-group-dialog').modal('hide');
-
-                // update component visibility
-                nfGraph.updateVisibility();
-
-                // update the birdseye
-                nfBirdseye.refresh();
-            }).fail(function (xhr, status, error) {
-                if (xhr.status === 400) {
-                    var errors = xhr.responseText.split('\n');
-
-                    var content;
-                    if (errors.length === 1) {
-                        content = $('<span></span>').text(errors[0]);
+                };
+    
+                // create a new processor of the defined type
+                $.ajax({
+                    type: 'POST',
+                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/remote-process-groups',
+                    data: JSON.stringify(remoteProcessGroupEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the processor to the graph
+                  nfGraph.add({
+                        'remoteProcessGroups': [response]
+                    }, {
+                        'selectAll': true
+                    });
+    
+                    // hide the dialog
+                    $('#new-remote-process-group-dialog').modal('hide');
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+                }).fail(function (xhr, status, error) {
+                    if (xhr.status === 400) {
+                        var errors = xhr.responseText.split('\n');
+    
+                        var content;
+                        if (errors.length === 1) {
+                            content = $('<span></span>').text(errors[0]);
+                        } else {
+                          content = nfCommon.formatUnorderedList(errors);
+                        }
+    
+                      nfDialog.showOkDialog({
+                            dialogContent: content,
+                      headerText: nf._.msg('nf-remote-process-group-component.ConfigurationError')
+                        });
                     } else {
-                        content = nfCommon.formatUnorderedList(errors);
+                      nfErrorHandler.handleAjaxError(xhr, status, error);
                     }
-
-                    nfDialog.showOkDialog({
-                        dialogContent: content,
-                        headerText: 'Configuration Error'
-                    });
-                } else {
-                    nfErrorHandler.handleAjaxError(xhr, status, error);
-                }
-            });
-        };
-
-        function RemoteProcessGroupComponent() {
-
-            this.icon = 'icon icon-group-remote';
-
-            this.hoverIcon = 'icon icon-group-remote-add';
-
-            /**
-             * The remote group component's modal.
-             */
-            this.modal = {
-
+                });
+            };
+    
+            function RemoteProcessGroupComponent() {
+    
+                this.icon = 'icon icon-group-remote';
+    
+                this.hoverIcon = 'icon icon-group-remote-add';
+    
                 /**
-                 * Gets the modal element.
+                 * The remote group component's modal.
+                 */
+                this.modal = {
+    
+                    /**
+                     * Gets the modal element.
+                     *
+                     * @returns {*|jQuery|HTMLElement}
+                     */
+                    getElement: function () {
+                        return $('#new-remote-process-group-dialog');
+                    },
+    
+                    /**
+                     * Initialize the modal.
+                     */
+                    init: function () {
+                        var defaultTimeout = "30 sec";
+                        var defaultYieldDuration = "10 sec";
+    
+                        // configure the new remote process group dialog
+                        this.getElement().modal({
+                            scrollableContentStyle: 'scrollable',
+                      headerText: nf._.msg('nf-remote-process-group-component.AddRemoteProcessGroup'),
+                            handler: {
+                                close: function () {
+                                  $('#new-remote-process-group-uris').val('');
+                                    $('#new-remote-process-group-timeout').val(defaultTimeout);
+                                    $('#new-remote-process-group-yield-duration').val(defaultYieldDuration);
+                                    $('#new-remote-process-group-transport-protocol-combo').combo('setSelectedOption', {
+                                        value: 'RAW'
+                                    });
+                                  $('#new-remote-process-group-local-network-interface').val('');
+                                    $('#new-remote-process-group-proxy-host').val('');
+                                    $('#new-remote-process-group-proxy-port').val('');
+                                    $('#new-remote-process-group-proxy-user').val('');
+                                    $('#new-remote-process-group-proxy-password').val('');
+                                }
+                            }
+                        });
+    
+                        // set default values
+                        $('#new-remote-process-group-timeout').val(defaultTimeout);
+                        $('#new-remote-process-group-yield-duration').val(defaultYieldDuration);
+    
+                        // initialize the transport protocol combo
+                        $('#new-remote-process-group-transport-protocol-combo').combo({
+                            options: [{
+                                text: 'RAW',
+                                value: 'RAW'
+                            }, {
+                                text: 'HTTP',
+                                value: 'HTTP'
+                            }]
+                        });
+                    },
+    
+                    /**
+                     * Updates the modal config.
+                     *
+                     * @param {string} name             The name of the property to update.
+                     * @param {object|array} config     The config for the `name`.
+                     */
+                    update: function (name, config) {
+                        this.getElement().modal(name, config);
+                    },
+    
+                    /**
+                     * Show the modal.
+                     */
+                    show: function () {
+                        this.getElement().modal('show');
+                    },
+    
+                    /**
+                     * Hide the modal.
+                     */
+                    hide: function () {
+                        this.getElement().modal('hide');
+                    }
+                };
+            }
+    
+            RemoteProcessGroupComponent.prototype = {
+                constructor: RemoteProcessGroupComponent,
+    
+                /**
+                 * Gets the component.
                  *
                  * @returns {*|jQuery|HTMLElement}
                  */
                 getElement: function () {
-                    return $('#new-remote-process-group-dialog');
+                    return $('#group-remote-component');
                 },
-
+    
                 /**
-                 * Initialize the modal.
+                 * Enable the component.
                  */
-                init: function () {
-                    var defaultTimeout = "30 sec";
-                    var defaultYieldDuration = "10 sec";
-
-                    // configure the new remote process group dialog
-                    this.getElement().modal({
-                        scrollableContentStyle: 'scrollable',
-                        headerText: 'Add Remote Process Group',
-                        handler: {
-                            close: function () {
-                                $('#new-remote-process-group-uris').val('');
-                                $('#new-remote-process-group-timeout').val(defaultTimeout);
-                                $('#new-remote-process-group-yield-duration').val(defaultYieldDuration);
-                                $('#new-remote-process-group-transport-protocol-combo').combo('setSelectedOption', {
-                                    value: 'RAW'
-                                });
-                                $('#new-remote-process-group-local-network-interface').val('');
-                                $('#new-remote-process-group-proxy-host').val('');
-                                $('#new-remote-process-group-proxy-port').val('');
-                                $('#new-remote-process-group-proxy-user').val('');
-                                $('#new-remote-process-group-proxy-password').val('');
-                            }
-                        }
-                    });
-
-                    // set default values
-                    $('#new-remote-process-group-timeout').val(defaultTimeout);
-                    $('#new-remote-process-group-yield-duration').val(defaultYieldDuration);
-
-                    // initialize the transport protocol combo
-                    $('#new-remote-process-group-transport-protocol-combo').combo({
-                        options: [{
-                            text: 'RAW',
-                            value: 'RAW'
-                        }, {
-                            text: 'HTTP',
-                            value: 'HTTP'
-                        }]
-                    });
+                enabled: function () {
+                    this.getElement().attr('disabled', false);
                 },
-
+    
                 /**
-                 * Updates the modal config.
-                 *
-                 * @param {string} name             The name of the property to update.
-                 * @param {object|array} config     The config for the `name`.
+                 * Disable the component.
                  */
-                update: function (name, config) {
-                    this.getElement().modal(name, config);
+                disabled: function () {
+                    this.getElement().attr('disabled', true);
                 },
-
+    
                 /**
-                 * Show the modal.
+                 * Handler function for when component is dropped on the canvas.
+                 *
+                 * @argument {object} pt        The point that the component was dropped.
                  */
-                show: function () {
-                    this.getElement().modal('show');
+                dropHandler: function (pt) {
+                    this.promptForRemoteProcessGroupUri(pt);
                 },
-
+    
                 /**
-                 * Hide the modal.
+                 * The drag icon for the toolbox component.
+                 *
+                 * @param event
+                 * @returns {*|jQuery|HTMLElement}
                  */
-                hide: function () {
-                    this.getElement().modal('hide');
-                }
-            };
-        }
-
-        RemoteProcessGroupComponent.prototype = {
-            constructor: RemoteProcessGroupComponent,
-
-            /**
-             * Gets the component.
-             *
-             * @returns {*|jQuery|HTMLElement}
-             */
-            getElement: function () {
-                return $('#group-remote-component');
-            },
-
-            /**
-             * Enable the component.
-             */
-            enabled: function () {
-                this.getElement().attr('disabled', false);
-            },
-
-            /**
-             * Disable the component.
-             */
-            disabled: function () {
-                this.getElement().attr('disabled', true);
-            },
-
-            /**
-             * Handler function for when component is dropped on the canvas.
-             *
-             * @argument {object} pt        The point that the component was dropped.
-             */
-            dropHandler: function (pt) {
-                this.promptForRemoteProcessGroupUri(pt);
-            },
-
-            /**
-             * The drag icon for the toolbox component.
-             *
-             * @param event
-             * @returns {*|jQuery|HTMLElement}
-             */
-            dragIcon: function (event) {
-                return $('<div class="icon icon-group-remote-add"></div>');
-            },
-
-            /**
-             * Prompts the user to enter the URI for the remote process group.
-             *
-             * @argument {object} pt        The point that the remote group was dropped.
-             */
-            promptForRemoteProcessGroupUri: function (pt) {
-                var remoteProcessGroupComponent = this;
-                var addRemoteProcessGroup = function () {
-                    // create the remote process group
-                    createRemoteProcessGroup(pt);
-                };
-
-                this.modal.update('setButtonModel', [{
-                    buttonText: 'Add',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: addRemoteProcessGroup
-                    }
+                dragIcon: function (event) {
+                    return $('<div class="icon icon-group-remote-add"></div>');
                 },
-                    {
-                        buttonText: 'Cancel',
+    
+                /**
+                 * Prompts the user to enter the URI for the remote process group.
+                 *
+                 * @argument {object} pt        The point that the remote group was dropped.
+                 */
+                promptForRemoteProcessGroupUri: function (pt) {
+                  var remoteProcessGroupComponent = this;
+                    var addRemoteProcessGroup = function () {
+                        // create the remote process group
+                        createRemoteProcessGroup(pt);
+                    };
+    
+                    this.modal.update('setButtonModel', [{
+                  buttonText: nf._.msg('nf-remote-process-group-component.Add'),
                         color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
                         },
                         handler: {
-                            click: function () {
-                                remoteProcessGroupComponent.modal.hide();
+                            click: addRemoteProcessGroup
+                        }
+                    },
+                        {
+                      buttonText: nf._.msg('nf-remote-process-group-component.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                  remoteProcessGroupComponent.modal.hide();
+                                }
                             }
+                        }]);
+    
+                    // show the dialog
+                    this.modal.show();
+    
+                    // set the focus and key handlers
+                  $('#new-remote-process-group-uris').focus().off('keyup').on('keyup', function (e) {
+                        var code = e.keyCode ? e.keyCode : e.which;
+                        if (code === $.ui.keyCode.ENTER) {
+                            addRemoteProcessGroup();
                         }
-                    }]);
-
-                // show the dialog
-                this.modal.show();
-
-                // set the focus and key handlers
-                $('#new-remote-process-group-uris').focus().off('keyup').on('keyup', function (e) {
-                    var code = e.keyCode ? e.keyCode : e.which;
-                    if (code === $.ui.keyCode.ENTER) {
-                        addRemoteProcessGroup();
-                    }
-                });
+                    });
+                }
             }
-        }
-
-        var remoteProcessGroupComponent = new RemoteProcessGroupComponent();
-        return remoteProcessGroupComponent;
-    };
-}));
\ No newline at end of file
+    
+            var remoteProcessGroupComponent = new RemoteProcessGroupComponent();
+            return remoteProcessGroupComponent;
+        };
+  }));
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 99fe0ecb703c..664010f90830 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
@@ -1,287 +1,287 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Client',
-                'nf.Birdseye',
-                'nf.Graph',
-                'nf.CanvasUtils',
-                'nf.ErrorHandler',
-                'nf.Dialog',
-                'nf.Common'],
-            function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
-                return (nf.ng.TemplateComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.TemplateComponent =
-            factory(require('jquery'),
-                require('nf.Client'),
-                require('nf.Birdseye'),
-                require('nf.Graph'),
-                require('nf.CanvasUtils'),
-                require('nf.ErrorHandler'),
-                require('nf.Dialog'),
-                require('nf.Common')));
-    } else {
-        nf.ng.TemplateComponent = factory(root.$,
-            root.nf.Client,
-            root.nf.Birdseye,
-            root.nf.Graph,
-            root.nf.CanvasUtils,
-            root.nf.ErrorHandler,
-            root.nf.Dialog,
-            root.nf.Common);
-    }
-}(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
-    'use strict';
-
-    return function (serviceProvider) {
-        'use strict';
-
-        /**
-         * Instantiates the specified template.
-         *
-         * @argument {string} templateId        The template id.
-         * @argument {object} pt                The point that the template was dropped.
-         */
-        var createTemplate = function (templateId, pt) {
-            var instantiateTemplateInstance = {
-                'templateId': templateId,
-                'originX': pt.x,
-                'originY': pt.y
-            };
-
-            // create a new instance of the new template
-            $.ajax({
-                type: 'POST',
-                url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/template-instance',
-                data: JSON.stringify(instantiateTemplateInstance),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // populate the graph accordingly
-                nfGraph.add(response.flow, {
-                    'selectAll': true
-                });
-
-                // update component visibility
-                nfGraph.updateVisibility();
-
-                // update the birdseye
-                nfBirdseye.refresh();
-            }).fail(nfErrorHandler.handleAjaxError);
-        };
-
-        function TemplateComponent() {
-
-            this.icon = 'icon icon-template';
-
-            this.hoverIcon = 'icon icon-template-add';
-
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Client',
+                  'nf.Birdseye',
+                  'nf.Graph',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler',
+                  'nf.Dialog',
+                  'nf.Common'],
+              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
+                  return (nf.ng.TemplateComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.TemplateComponent =
+              factory(require('jquery'),
+                  require('nf.Client'),
+                  require('nf.Birdseye'),
+                  require('nf.Graph'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Dialog'),
+                  require('nf.Common')));
+      } else {
+          nf.ng.TemplateComponent = factory(root.$,
+              root.nf.Client,
+              root.nf.Birdseye,
+              root.nf.Graph,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler,
+              root.nf.Dialog,
+              root.nf.Common);
+      }
+  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
             /**
-             * The template component's modal.
+             * Instantiates the specified template.
+             *
+             * @argument {string} templateId        The template id.
+             * @argument {object} pt                The point that the template was dropped.
              */
-            this.modal = {
-
+            var createTemplate = function (templateId, pt) {
+                var instantiateTemplateInstance = {
+                    'templateId': templateId,
+                    'originX': pt.x,
+                    'originY': pt.y
+                };
+    
+                // create a new instance of the new template
+                $.ajax({
+                    type: 'POST',
+                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/template-instance',
+                    data: JSON.stringify(instantiateTemplateInstance),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // populate the graph accordingly
+                  nfGraph.add(response.flow, {
+                        'selectAll': true
+                    });
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            function TemplateComponent() {
+    
+                this.icon = 'icon icon-template';
+    
+                this.hoverIcon = 'icon icon-template-add';
+    
                 /**
-                 * Gets the modal element.
+                 * The template component's modal.
+                 */
+                this.modal = {
+    
+                    /**
+                     * Gets the modal element.
+                     *
+                     * @returns {*|jQuery|HTMLElement}
+                     */
+                    getElement: function () {
+                        return $('#instantiate-template-dialog');
+                    },
+    
+                    /**
+                     * Initialize the modal.
+                     */
+                    init: function () {
+                        // configure the instantiate template dialog
+                        this.getElement().modal({
+                            scrollableContentStyle: 'scrollable',
+                          headerText: nf._.msg('nf-template-component.AddTemplate')
+                        });
+                    },
+    
+                    /**
+                     * Updates the modal config.
+                     *
+                     * @param {string} name             The name of the property to update.
+                     * @param {object|array} config     The config for the `name`.
+                     */
+                    update: function (name, config) {
+                        this.getElement().modal(name, config);
+                    },
+    
+                    /**
+                     * Show the modal.
+                     */
+                    show: function () {
+                        this.getElement().modal('show');
+                    },
+    
+                    /**
+                     * Hide the modal.
+                     */
+                    hide: function () {
+                        this.getElement().modal('hide');
+                    }
+                };
+            }
+    
+            TemplateComponent.prototype = {
+                constructor: TemplateComponent,
+    
+                /**
+                 * Gets the component.
                  *
                  * @returns {*|jQuery|HTMLElement}
                  */
                 getElement: function () {
-                    return $('#instantiate-template-dialog');
+                    return $('#template-component');
                 },
-
+    
                 /**
-                 * Initialize the modal.
+                 * Enable the component.
                  */
-                init: function () {
-                    // configure the instantiate template dialog
-                    this.getElement().modal({
-                        scrollableContentStyle: 'scrollable',
-                        headerText: 'Add Template'
-                    });
+                enabled: function () {
+                    this.getElement().attr('disabled', false);
                 },
-
+    
                 /**
-                 * Updates the modal config.
+                 * Disable the component.
+                 */
+                disabled: function () {
+                    this.getElement().attr('disabled', true);
+                },
+    
+                /**
+                 * Handler function for when component is dropped on the canvas.
                  *
-                 * @param {string} name             The name of the property to update.
-                 * @param {object|array} config     The config for the `name`.
+                 * @argument {object} pt        The point that the component was dropped.
                  */
-                update: function (name, config) {
-                    this.getElement().modal(name, config);
+                dropHandler: function (pt) {
+                    this.promptForTemplate(pt);
                 },
-
+    
                 /**
-                 * Show the modal.
+                 * The drag icon for the toolbox component.
+                 *
+                 * @param event
+                 * @returns {*|jQuery|HTMLElement}
                  */
-                show: function () {
-                    this.getElement().modal('show');
+                dragIcon: function (event) {
+                    return $('<div class="icon icon-template-add"></div>');
                 },
-
+    
                 /**
-                 * Hide the modal.
+                 * Prompts the user to select a template.
+                 *
+                 * @argument {object} pt        The point that the template was dropped.
                  */
-                hide: function () {
-                    this.getElement().modal('hide');
-                }
-            };
-        }
-
-        TemplateComponent.prototype = {
-            constructor: TemplateComponent,
-
-            /**
-             * Gets the component.
-             *
-             * @returns {*|jQuery|HTMLElement}
-             */
-            getElement: function () {
-                return $('#template-component');
-            },
-
-            /**
-             * Enable the component.
-             */
-            enabled: function () {
-                this.getElement().attr('disabled', false);
-            },
-
-            /**
-             * Disable the component.
-             */
-            disabled: function () {
-                this.getElement().attr('disabled', true);
-            },
-
-            /**
-             * Handler function for when component is dropped on the canvas.
-             *
-             * @argument {object} pt        The point that the component was dropped.
-             */
-            dropHandler: function (pt) {
-                this.promptForTemplate(pt);
-            },
-
-            /**
-             * The drag icon for the toolbox component.
-             *
-             * @param event
-             * @returns {*|jQuery|HTMLElement}
-             */
-            dragIcon: function (event) {
-                return $('<div class="icon icon-template-add"></div>');
-            },
-
-            /**
-             * Prompts the user to select a template.
-             *
-             * @argument {object} pt        The point that the template was dropped.
-             */
-            promptForTemplate: function (pt) {
-                var templateComponent = this;
-                $.ajax({
-                    type: 'GET',
-                    url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/flow/templates',
-                    dataType: 'json'
-                }).done(function (response) {
-                    var templates = response.templates;
-                    if (nfCommon.isDefinedAndNotNull(templates) && templates.length > 0) {
-                        // sort the templates
-                        templates = templates.sort(function (one, two) {
-                            var oneDate = nfCommon.parseDateTime(one.template.timestamp);
-                            var twoDate = nfCommon.parseDateTime(two.template.timestamp);
-
-                            // newest templates first
-                            return twoDate.getTime() - oneDate.getTime();
-                        });
-
-                        var options = [];
-                        $.each(templates, function (_, templateEntity) {
-                            if (templateEntity.permissions.canRead === true) {
-                                options.push({
-                                    text: templateEntity.template.name,
-                                    value: templateEntity.id,
-                                    description: nfCommon.escapeHtml(templateEntity.template.description)
-                                });
-                            }
-                        });
-
-                        // configure the templates combo
-                        $('#available-templates').combo({
-                            maxHeight: 300,
-                            options: options
-                        });
-
-                        // update the button model
-                        templateComponent.modal.update('setButtonModel', [{
-                            buttonText: 'Add',
-                            color: {
-                                base: '#728E9B',
-                                hover: '#004849',
-                                text: '#ffffff'
-                            },
-                            handler: {
-                                click: function () {
-                                    // get the type of processor currently selected
-                                    var selectedOption = $('#available-templates').combo('getSelectedOption');
-                                    var templateId = selectedOption.value;
-
-                                    // hide the dialog
-                                    templateComponent.modal.hide();
-
-                                    // instantiate the specified template
-                                    createTemplate(templateId, pt);
+                promptForTemplate: function (pt) {
+                  var templateComponent = this;
+                    $.ajax({
+                        type: 'GET',
+                        url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/flow/templates',
+                        dataType: 'json'
+                    }).done(function (response) {
+                        var templates = response.templates;
+                      if (nfCommon.isDefinedAndNotNull(templates) && templates.length > 0) {
+                          // sort the templates
+                          templates = templates.sort(function (one, two) {
+                              var oneDate = nfCommon.parseDateTime(one.template.timestamp);
+                              var twoDate = nfCommon.parseDateTime(two.template.timestamp);
+  
+                              // newest templates first
+                              return twoDate.getTime() - oneDate.getTime();
+                          });
+  
+                            var options = [];
+                            $.each(templates, function (_, templateEntity) {
+                                if (templateEntity.permissions.canRead === true) {
+                                    options.push({
+                                        text: templateEntity.template.name,
+                                        value: templateEntity.id,
+                                      description: nfCommon.escapeHtml(templateEntity.template.description)
+                                    });
                                 }
-                            }
-                        },
-                            {
-                                buttonText: 'Cancel',
+                            });
+    
+                            // configure the templates combo
+                            $('#available-templates').combo({
+                                maxHeight: 300,
+                                options: options
+                            });
+    
+                            // update the button model
+                          templateComponent.modal.update('setButtonModel', [{
+                          buttonText: nf._.msg('nf-template-component.Add'),
                                 color: {
-                                    base: '#E3E8EB',
-                                    hover: '#C7D2D7',
-                                    text: '#004849'
+                                    base: '#728E9B',
+                                    hover: '#004849',
+                                    text: '#ffffff'
                                 },
                                 handler: {
                                     click: function () {
-                                        templateComponent.modal.hide();
+                                        // get the type of processor currently selected
+                                        var selectedOption = $('#available-templates').combo('getSelectedOption');
+                                        var templateId = selectedOption.value;
+    
+                                        // hide the dialog
+                                      templateComponent.modal.hide();
+    
+                                        // instantiate the specified template
+                                        createTemplate(templateId, pt);
                                     }
                                 }
-                            }]);
-
-                        // show the dialog
-                        templateComponent.modal.show();
-                    } else {
-                        nfDialog.showOkDialog({
-                            headerText: 'Instantiate Template',
-                            dialogContent: 'No templates have been loaded into this NiFi.'
-                        });
-                    }
-
-                }).fail(nfErrorHandler.handleAjaxError);
+                            },
+                                {
+                              buttonText: nf._.msg('nf-template-component.Cancel'),
+                                    color: {
+                                        base: '#E3E8EB',
+                                        hover: '#C7D2D7',
+                                        text: '#004849'
+                                    },
+                                    handler: {
+                                        click: function () {
+                                          templateComponent.modal.hide();
+                                        }
+                                    }
+                                }]);
+    
+                            // show the dialog
+                          templateComponent.modal.show();
+                        } else {
+                          nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-template-component.InstantiateTemplate'),
+                          dialogContent: nf._.msg('nf-template-component.InstantiateTemplateContent')
+                            });
+                        }
+    
+                  }).fail(nfErrorHandler.handleAjaxError);
+                }
             }
-        }
-
-        var templateComponent = new TemplateComponent();
-        return templateComponent;
-    };
-}));
\ No newline at end of file
+    
+            var templateComponent = new TemplateComponent();
+            return templateComponent;
+        };
+  }));
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 1fe8aba603ce..078af95d4198 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
@@ -1,1724 +1,1724 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.CanvasUtils',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.Client',
-                'nf.ErrorHandler',
-                'nf.Clipboard',
-                'nf.Snippet',
-                'nf.GoTo',
-                'nf.ng.Bridge',
-                'nf.Shell',
-                'nf.ComponentState',
-                'nf.Draggable',
-                'nf.Birdseye',
-                'nf.Connection',
-                'nf.Graph',
-                'nf.ProcessGroupConfiguration',
-                'nf.ProcessorConfiguration',
-                'nf.ProcessorDetails',
-                'nf.LabelConfiguration',
-                'nf.RemoteProcessGroupConfiguration',
-                'nf.RemoteProcessGroupDetails',
-                'nf.PortConfiguration',
-                'nf.PortDetails',
-                'nf.ConnectionConfiguration',
-                'nf.ConnectionDetails',
-                'nf.PolicyManagement',
-                'nf.RemoteProcessGroup',
-                'nf.Label',
-                'nf.Processor',
-                'nf.RemoteProcessGroupPorts',
-                'nf.QueueListing',
-                'nf.StatusHistory'],
-            function ($, d3, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler, nfClipboard, nfSnippet, nfGoto, nfNgBridge, nfShell, nfComponentState, nfDraggable, nfBirdseye, nfConnection, nfGraph, nfProcessGroupConfiguration, nfProcessorConfiguration, nfProcessorDetails, nfLabelConfiguration, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupDetails, nfPortConfiguration, nfPortDetails, nfConnectionConfiguration, nfConnectionDetails, nfPolicyManagement, nfRemoteProcessGroup, nfLabel, nfProcessor, nfRemoteProcessGroupPorts, nfQueueListing, nfStatusHistory) {
-                return (nf.Actions = factory($, d3, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler, nfClipboard, nfSnippet, nfGoto, nfNgBridge, nfShell, nfComponentState, nfDraggable, nfBirdseye, nfConnection, nfGraph, nfProcessGroupConfiguration, nfProcessorConfiguration, nfProcessorDetails, nfLabelConfiguration, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupDetails, nfPortConfiguration, nfPortDetails, nfConnectionConfiguration, nfConnectionDetails, nfPolicyManagement, nfRemoteProcessGroup, nfLabel, nfProcessor, nfRemoteProcessGroupPorts, nfQueueListing, nfStatusHistory));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Actions =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.CanvasUtils'),
-                require('nf.Common'),
-                require('nf.Dialog'),
-                require('nf.Client'),
-                require('nf.ErrorHandler'),
-                require('nf.Clipboard'),
-                require('nf.Snippet'),
-                require('nf.GoTo'),
-                require('nf.ng.Bridge'),
-                require('nf.Shell'),
-                require('nf.ComponentState'),
-                require('nf.Draggable'),
-                require('nf.Birdseye'),
-                require('nf.Connection'),
-                require('nf.Graph'),
-                require('nf.ProcessGroupConfiguration'),
-                require('nf.ProcessorConfiguration'),
-                require('nf.ProcessorDetails'),
-                require('nf.LabelConfiguration'),
-                require('nf.RemoteProcessGroupConfiguration'),
-                require('nf.RemoteProcessGroupDetails'),
-                require('nf.PortConfiguration'),
-                require('nf.PortDetails'),
-                require('nf.ConnectionConfiguration'),
-                require('nf.ConnectionDetails'),
-                require('nf.PolicyManagement'),
-                require('nf.RemoteProcessGroup'),
-                require('nf.Label'),
-                require('nf.Processor'),
-                require('nf.RemoteProcessGroupPorts'),
-                require('nf.QueueListing'),
-                require('nf.StatusHistory')));
-    } else {
-        nf.Actions = factory(root.$,
-            root.d3,
-            root.nf.CanvasUtils,
-            root.nf.Common,
-            root.nf.Dialog,
-            root.nf.Client,
-            root.nf.ErrorHandler,
-            root.nf.Clipboard,
-            root.nf.Snippet,
-            root.nf.GoTo,
-            root.nf.ng.Bridge,
-            root.nf.Shell,
-            root.nf.ComponentState,
-            root.nf.Draggable,
-            root.nf.Birdseye,
-            root.nf.Connection,
-            root.nf.Graph,
-            root.nf.ProcessGroupConfiguration,
-            root.nf.ProcessorConfiguration,
-            root.nf.ProcessorDetails,
-            root.nf.LabelConfiguration,
-            root.nf.RemoteProcessGroupConfiguration,
-            root.nf.RemoteProcessGroupDetails,
-            root.nf.PortConfiguration,
-            root.nf.PortDetails,
-            root.nf.ConnectionConfiguration,
-            root.nf.ConnectionDetails,
-            root.nf.PolicyManagement,
-            root.nf.RemoteProcessGroup,
-            root.nf.Label,
-            root.nf.Processor,
-            root.nf.RemoteProcessGroupPorts,
-            root.nf.QueueListing,
-            root.nf.StatusHistory);
-    }
-}(this, function ($, d3, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler, nfClipboard, nfSnippet, nfGoto, nfNgBridge, nfShell, nfComponentState, nfDraggable, nfBirdseye, nfConnection, nfGraph, nfProcessGroupConfiguration, nfProcessorConfiguration, nfProcessorDetails, nfLabelConfiguration, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupDetails, nfPortConfiguration, nfPortDetails, nfConnectionConfiguration, nfConnectionDetails, nfPolicyManagement, nfRemoteProcessGroup, nfLabel, nfProcessor, nfRemoteProcessGroupPorts, nfQueueListing, nfStatusHistory) {
-    'use strict';
-
-    var config = {
-        urls: {
-            api: '../nifi-api',
-            controller: '../nifi-api/controller'
-        }
-    };
-
-    /**
-     * Initializes the drop request status dialog.
-     */
-    var initializeDropRequestStatusDialog = function () {
-        // configure the drop request status dialog
-        $('#drop-request-status-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            handler: {
-                close: function () {
-                    // clear the current button model
-                    $('#drop-request-status-dialog').modal('setButtonModel', []);
-                }
-            }
-        });
-    };
-
-
-    /**
-     * Updates the resource with the specified entity.
+    /*
+     * 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
      *
-     * @param {string} uri
-     * @param {object} entity
+     *     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.
      */
-    var updateResource = function (uri, entity) {
-        return $.ajax({
-            type: 'PUT',
-            url: uri,
-            data: JSON.stringify(entity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).fail(function (xhr, status, error) {
-            nfDialog.showOkDialog({
-                headerText: 'Update Resource',
-                dialogContent: nfCommon.escapeHtml(xhr.responseText)
-            });
-        });
-    };
-
-    // create a method for updating process groups and processors
-    var updateProcessGroup = function (response) {
-        $.ajax({
-            type: 'GET',
-            url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(response.id),
-            dataType: 'json'
-        }).done(function (response) {
-            nfGraph.set(response.processGroupFlow.flow);
-        });
-    };
-
-    // determine if the source of this connection is part of the selection
-    var isSourceSelected = function (connection, selection) {
-        return selection.filter(function (d) {
-                return nfCanvasUtils.getConnectionSourceComponentId(connection) === d.id;
-            }).size() > 0;
-    };
-
-    var nfActions = {
-        /**
-         * Initializes the actions.
-         */
-        init: function () {
-            initializeDropRequestStatusDialog();
-        },
-
-        /**
-         * Enters the specified process group.
-         *
-         * @param {selection} selection     The the currently selected component
-         */
-        enterGroup: function (selection) {
-            if (selection.size() === 1 && nfCanvasUtils.isProcessGroup(selection)) {
-                var selectionData = selection.datum();
-                nfCanvasUtils.getComponentByType('ProcessGroup').enterGroup(selectionData.id);
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.CanvasUtils',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.ErrorHandler',
+                  'nf.Clipboard',
+                  'nf.Snippet',
+                  'nf.GoTo',
+                  'nf.ng.Bridge',
+                  'nf.Shell',
+                  'nf.ComponentState',
+                  'nf.Draggable',
+                  'nf.Birdseye',
+                  'nf.Connection',
+                  'nf.Graph',
+                  'nf.ProcessGroupConfiguration',
+                  'nf.ProcessorConfiguration',
+                  'nf.ProcessorDetails',
+                  'nf.LabelConfiguration',
+                  'nf.RemoteProcessGroupConfiguration',
+                  'nf.RemoteProcessGroupDetails',
+                  'nf.PortConfiguration',
+                  'nf.PortDetails',
+                  'nf.ConnectionConfiguration',
+                  'nf.ConnectionDetails',
+                  'nf.PolicyManagement',
+                  'nf.RemoteProcessGroup',
+                  'nf.Label',
+                  'nf.Processor',
+                  'nf.RemoteProcessGroupPorts',
+                  'nf.QueueListing',
+                  'nf.StatusHistory'],
+              function ($, d3, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler, nfClipboard, nfSnippet, nfGoto, nfNgBridge, nfShell, nfComponentState, nfDraggable, nfBirdseye, nfConnection, nfGraph, nfProcessGroupConfiguration, nfProcessorConfiguration, nfProcessorDetails, nfLabelConfiguration, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupDetails, nfPortConfiguration, nfPortDetails, nfConnectionConfiguration, nfConnectionDetails, nfPolicyManagement, nfRemoteProcessGroup, nfLabel, nfProcessor, nfRemoteProcessGroupPorts, nfQueueListing, nfStatusHistory) {
+                  return (nf.Actions = factory($, d3, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler, nfClipboard, nfSnippet, nfGoto, nfNgBridge, nfShell, nfComponentState, nfDraggable, nfBirdseye, nfConnection, nfGraph, nfProcessGroupConfiguration, nfProcessorConfiguration, nfProcessorDetails, nfLabelConfiguration, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupDetails, nfPortConfiguration, nfPortDetails, nfConnectionConfiguration, nfConnectionDetails, nfPolicyManagement, nfRemoteProcessGroup, nfLabel, nfProcessor, nfRemoteProcessGroupPorts, nfQueueListing, nfStatusHistory));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.Actions =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.CanvasUtils'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Clipboard'),
+                  require('nf.Snippet'),
+                  require('nf.GoTo'),
+                  require('nf.ng.Bridge'),
+                  require('nf.Shell'),
+                  require('nf.ComponentState'),
+                  require('nf.Draggable'),
+                  require('nf.Birdseye'),
+                  require('nf.Connection'),
+                  require('nf.Graph'),
+                  require('nf.ProcessGroupConfiguration'),
+                  require('nf.ProcessorConfiguration'),
+                  require('nf.ProcessorDetails'),
+                  require('nf.LabelConfiguration'),
+                  require('nf.RemoteProcessGroupConfiguration'),
+                  require('nf.RemoteProcessGroupDetails'),
+                  require('nf.PortConfiguration'),
+                  require('nf.PortDetails'),
+                  require('nf.ConnectionConfiguration'),
+                  require('nf.ConnectionDetails'),
+                  require('nf.PolicyManagement'),
+                  require('nf.RemoteProcessGroup'),
+                  require('nf.Label'),
+                  require('nf.Processor'),
+                  require('nf.RemoteProcessGroupPorts'),
+                  require('nf.QueueListing'),
+                  require('nf.StatusHistory')));
+      } else {
+          nf.Actions = factory(root.$,
+              root.d3,
+              root.nf.CanvasUtils,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.ErrorHandler,
+              root.nf.Clipboard,
+              root.nf.Snippet,
+              root.nf.GoTo,
+              root.nf.ng.Bridge,
+              root.nf.Shell,
+              root.nf.ComponentState,
+              root.nf.Draggable,
+              root.nf.Birdseye,
+              root.nf.Connection,
+              root.nf.Graph,
+              root.nf.ProcessGroupConfiguration,
+              root.nf.ProcessorConfiguration,
+              root.nf.ProcessorDetails,
+              root.nf.LabelConfiguration,
+              root.nf.RemoteProcessGroupConfiguration,
+              root.nf.RemoteProcessGroupDetails,
+              root.nf.PortConfiguration,
+              root.nf.PortDetails,
+              root.nf.ConnectionConfiguration,
+              root.nf.ConnectionDetails,
+              root.nf.PolicyManagement,
+              root.nf.RemoteProcessGroup,
+              root.nf.Label,
+              root.nf.Processor,
+              root.nf.RemoteProcessGroupPorts,
+              root.nf.QueueListing,
+              root.nf.StatusHistory);
+      }
+  }(this, function ($, d3, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler, nfClipboard, nfSnippet, nfGoto, nfNgBridge, nfShell, nfComponentState, nfDraggable, nfBirdseye, nfConnection, nfGraph, nfProcessGroupConfiguration, nfProcessorConfiguration, nfProcessorDetails, nfLabelConfiguration, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupDetails, nfPortConfiguration, nfPortDetails, nfConnectionConfiguration, nfConnectionDetails, nfPolicyManagement, nfRemoteProcessGroup, nfLabel, nfProcessor, nfRemoteProcessGroupPorts, nfQueueListing, nfStatusHistory) {
+      'use strict';
+    
+        var config = {
+            urls: {
+                api: '../nifi-api',
+                controller: '../nifi-api/controller'
             }
-        },
-
+        };
+    
         /**
-         * Exits the current process group but entering the parent group.
+         * Initializes the drop request status dialog.
          */
-        leaveGroup: function () {
-            nfCanvasUtils.getComponentByType('ProcessGroup').enterGroup(nfCanvasUtils.getParentGroupId());
-        },
-
+        var initializeDropRequestStatusDialog = function () {
+            // configure the drop request status dialog
+            $('#drop-request-status-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+                handler: {
+                    close: function () {
+                        // clear the current button model
+                        $('#drop-request-status-dialog').modal('setButtonModel', []);
+                    }
+                }
+            });
+        };
+    
+    
         /**
-         * Refresh the flow of the remote process group in the specified selection.
+         * Updates the resource with the specified entity.
          *
-         * @param {selection} selection
+         * @param {string} uri
+         * @param {object} entity
          */
-        refreshRemoteFlow: function (selection) {
-            if (selection.size() === 1 && nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                var d = selection.datum();
-                var refreshTimestamp = d.component.flowRefreshed;
-
-                var setLastRefreshed = function (lastRefreshed) {
-                    // set the new value in case the component is redrawn during the refresh
-                    d.component.flowRefreshed = lastRefreshed;
-
-                    // update the UI to show last refreshed if appropriate
-                    if (selection.classed('visible')) {
-                        selection.select('text.remote-process-group-last-refresh')
-                            .text(function () {
-                                return lastRefreshed;
-                            });
-                    }
-                };
-
-                var poll = function (nextDelay) {
-                    $.ajax({
-                        type: 'GET',
-                        url: d.uri,
-                        dataType: 'json'
-                    }).done(function (response) {
-                        var remoteProcessGroup = response.component;
-
-                        // the timestamp has not updated yet, poll again
-                        if (refreshTimestamp === remoteProcessGroup.flowRefreshed) {
-                            schedule(nextDelay);
+        var updateResource = function (uri, entity) {
+            return $.ajax({
+                type: 'PUT',
+                url: uri,
+                data: JSON.stringify(entity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).fail(function (xhr, status, error) {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-actions.UpdateResource'),
+                  dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                });
+            });
+        };
+    
+        // create a method for updating process groups and processors
+        var updateProcessGroup = function (response) {
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(response.id),
+                dataType: 'json'
+            }).done(function (response) {
+              nfGraph.set(response.processGroupFlow.flow);
+            });
+        };
+    
+      // determine if the source of this connection is part of the selection
+      var isSourceSelected = function (connection, selection) {
+          return selection.filter(function (d) {
+                  return nfCanvasUtils.getConnectionSourceComponentId(connection) === d.id;
+              }).size() > 0;
+      };
+  
+      var nfActions = {
+            /**
+             * Initializes the actions.
+             */
+            init: function () {
+                initializeDropRequestStatusDialog();
+            },
+    
+            /**
+             * Enters the specified process group.
+             *
+             * @param {selection} selection     The the currently selected component
+             */
+            enterGroup: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isProcessGroup(selection)) {
+                    var selectionData = selection.datum();
+                  nfCanvasUtils.getComponentByType('ProcessGroup').enterGroup(selectionData.id);
+                }
+            },
+    
+            /**
+             * Exits the current process group but entering the parent group.
+             */
+            leaveGroup: function () {
+              nfCanvasUtils.getComponentByType('ProcessGroup').enterGroup(nfCanvasUtils.getParentGroupId());
+            },
+    
+            /**
+             * Refresh the flow of the remote process group in the specified selection.
+             *
+             * @param {selection} selection
+             */
+            refreshRemoteFlow: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                    var d = selection.datum();
+                    var refreshTimestamp = d.component.flowRefreshed;
+    
+                    var setLastRefreshed = function (lastRefreshed) {
+                        // set the new value in case the component is redrawn during the refresh
+                        d.component.flowRefreshed = lastRefreshed;
+    
+                        // update the UI to show last refreshed if appropriate
+                        if (selection.classed('visible')) {
+                            selection.select('text.remote-process-group-last-refresh')
+                                .text(function () {
+                                    return lastRefreshed;
+                                });
+                        }
+                    };
+    
+                    var poll = function (nextDelay) {
+                        $.ajax({
+                            type: 'GET',
+                            url: d.uri,
+                            dataType: 'json'
+                        }).done(function (response) {
+                            var remoteProcessGroup = response.component;
+    
+                            // the timestamp has not updated yet, poll again
+                            if (refreshTimestamp === remoteProcessGroup.flowRefreshed) {
+                                schedule(nextDelay);
+                            } else {
+                              nfRemoteProcessGroup.set(response);
+    
+                                // reload the group's connections
+                              var connections = nfConnection.getComponentConnections(remoteProcessGroup.id);
+                                $.each(connections, function (_, connection) {
+                                    if (connection.permissions.canRead) {
+                                      nfConnection.reload(connection.id);
+                                    }
+                                });
+                            }
+                        });
+                    };
+    
+                    var schedule = function (delay) {
+                        if (delay <= 32) {
+                            setTimeout(function () {
+                                poll(delay * 2);
+                            }, delay * 1000);
                         } else {
-                            nfRemoteProcessGroup.set(response);
-
-                            // reload the group's connections
-                            var connections = nfConnection.getComponentConnections(remoteProcessGroup.id);
-                            $.each(connections, function (_, connection) {
-                                if (connection.permissions.canRead) {
-                                    nfConnection.reload(connection.id);
-                                }
-                            });
+                            // reset to the previous value since the contents could not be updated (set to null?)
+                            setLastRefreshed(refreshTimestamp);
                         }
-                    });
-                };
-
-                var schedule = function (delay) {
-                    if (delay <= 32) {
-                        setTimeout(function () {
-                            poll(delay * 2);
-                        }, delay * 1000);
+                    };
+    
+                  setLastRefreshed(nf._.msg('nf-actions.Refreshing'));
+                    poll(1);
+                }
+            },
+    
+            /**
+             * Opens the remote process group in the specified selection.
+             *
+             * @param {selection} selection         The selection
+             */
+            openUri: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                    var selectionData = selection.datum();
+                    var uri = selectionData.component.targetUri;
+    
+                  if (!nfCommon.isBlank(uri)) {
+                        window.open(encodeURI(uri));
                     } else {
-                        // reset to the previous value since the contents could not be updated (set to null?)
-                        setLastRefreshed(refreshTimestamp);
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-actions.RemoteGroupProcess'),
+                          dialogContent: nf._.msg('nf-actions.NoTargetURIDefined')
+                        });
                     }
-                };
-
-                setLastRefreshed('Refreshing...');
-                poll(1);
-            }
-        },
-
-        /**
-         * Opens the remote process group in the specified selection.
-         *
-         * @param {selection} selection         The selection
-         */
-        openUri: function (selection) {
-            if (selection.size() === 1 && nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                var selectionData = selection.datum();
-                var uri = selectionData.component.targetUri;
-
-                if (!nfCommon.isBlank(uri)) {
-                    window.open(encodeURI(uri));
-                } else {
-                    nfDialog.showOkDialog({
-                        headerText: 'Remote Process Group',
-                        dialogContent: 'No target URI defined.'
-                    });
-                }
-            }
-        },
-
-        /**
-         * Shows and selects the source of the connection in the specified selection.
-         *
-         * @param {selection} selection     The selection
-         */
-        showSource: function (selection) {
-            if (selection.size() === 1 && nfCanvasUtils.isConnection(selection)) {
-                var selectionData = selection.datum();
-
-                // the source is in the current group
-                if (selectionData.sourceGroupId === nfCanvasUtils.getGroupId()) {
-                    var source = d3.select('#id-' + selectionData.sourceId);
-                    nfActions.show(source);
-                } else if (selectionData.sourceType === 'REMOTE_OUTPUT_PORT') {
-                    // if the source is remote
-                    var remoteSource = d3.select('#id-' + selectionData.sourceGroupId);
-                    nfActions.show(remoteSource);
-                } else {
-                    // if the source is local but in a sub group
-                    nfCanvasUtils.showComponent(selectionData.sourceGroupId, selectionData.sourceId);
                 }
-            }
-        },
-
-        /**
-         * Shows and selects the destination of the connection in the specified selection.
-         *
-         * @param {selection} selection     The selection
-         */
-        showDestination: function (selection) {
-            if (selection.size() === 1 && nfCanvasUtils.isConnection(selection)) {
-                var selectionData = selection.datum();
-
-                // the destination is in the current group or its remote
-                if (selectionData.destinationGroupId === nfCanvasUtils.getGroupId()) {
-                    var destination = d3.select('#id-' + selectionData.destinationId);
-                    nfActions.show(destination);
-                } else if (selectionData.destinationType === 'REMOTE_INPUT_PORT') {
-                    // if the destination is remote
-                    var remoteDestination = d3.select('#id-' + selectionData.destinationGroupId);
-                    nfActions.show(remoteDestination);
-                } else {
-                    // if the destination is local but in a sub group
-                    nfCanvasUtils.showComponent(selectionData.destinationGroupId, selectionData.destinationId);
+            },
+    
+            /**
+             * Shows and selects the source of the connection in the specified selection.
+             *
+             * @param {selection} selection     The selection
+             */
+            showSource: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isConnection(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // the source is in the current group
+                  if (selectionData.sourceGroupId === nfCanvasUtils.getGroupId()) {
+                        var source = d3.select('#id-' + selectionData.sourceId);
+                      nfActions.show(source);
+                    } else if (selectionData.sourceType === 'REMOTE_OUTPUT_PORT') {
+                        // if the source is remote
+                        var remoteSource = d3.select('#id-' + selectionData.sourceGroupId);
+                      nfActions.show(remoteSource);
+                    } else {
+                        // if the source is local but in a sub group
+                      nfCanvasUtils.showComponent(selectionData.sourceGroupId, selectionData.sourceId);
+                    }
                 }
-            }
-        },
-
-        /**
-         * Shows the downstream components from the specified selection.
-         *
-         * @param {selection} selection     The selection
-         */
-        showDownstream: function (selection) {
-            if (selection.size() === 1 && !nfCanvasUtils.isConnection(selection)) {
-
-                // open the downstream dialog according to the selection
-                if (nfCanvasUtils.isProcessor(selection)) {
-                    nfGoto.showDownstreamFromProcessor(selection);
-                } else if (nfCanvasUtils.isFunnel(selection)) {
-                    nfGoto.showDownstreamFromFunnel(selection);
-                } else if (nfCanvasUtils.isInputPort(selection)) {
-                    nfGoto.showDownstreamFromInputPort(selection);
-                } else if (nfCanvasUtils.isOutputPort(selection)) {
-                    nfGoto.showDownstreamFromOutputPort(selection);
-                } else if (nfCanvasUtils.isProcessGroup(selection) || nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                    nfGoto.showDownstreamFromGroup(selection);
+            },
+    
+            /**
+             * Shows and selects the destination of the connection in the specified selection.
+             *
+             * @param {selection} selection     The selection
+             */
+            showDestination: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isConnection(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // the destination is in the current group or its remote
+                  if (selectionData.destinationGroupId === nfCanvasUtils.getGroupId()) {
+                        var destination = d3.select('#id-' + selectionData.destinationId);
+                      nfActions.show(destination);
+                    } else if (selectionData.destinationType === 'REMOTE_INPUT_PORT') {
+                        // if the destination is remote
+                        var remoteDestination = d3.select('#id-' + selectionData.destinationGroupId);
+                      nfActions.show(remoteDestination);
+                    } else {
+                        // if the destination is local but in a sub group
+                      nfCanvasUtils.showComponent(selectionData.destinationGroupId, selectionData.destinationId);
+                    }
                 }
-            }
-        },
-
-        /**
-         * Shows the upstream components from the specified selection.
-         *
-         * @param {selection} selection     The selection
-         */
-        showUpstream: function (selection) {
-            if (selection.size() === 1 && !nfCanvasUtils.isConnection(selection)) {
-
-                // open the downstream dialog according to the selection
-                if (nfCanvasUtils.isProcessor(selection)) {
-                    nfGoto.showUpstreamFromProcessor(selection);
-                } else if (nfCanvasUtils.isFunnel(selection)) {
-                    nfGoto.showUpstreamFromFunnel(selection);
-                } else if (nfCanvasUtils.isInputPort(selection)) {
-                    nfGoto.showUpstreamFromInputPort(selection);
-                } else if (nfCanvasUtils.isOutputPort(selection)) {
-                    nfGoto.showUpstreamFromOutputPort(selection);
-                } else if (nfCanvasUtils.isProcessGroup(selection) || nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                    nfGoto.showUpstreamFromGroup(selection);
+            },
+    
+            /**
+             * Shows the downstream components from the specified selection.
+             *
+             * @param {selection} selection     The selection
+             */
+            showDownstream: function (selection) {
+              if (selection.size() === 1 && !nfCanvasUtils.isConnection(selection)) {
+    
+                    // open the downstream dialog according to the selection
+                  if (nfCanvasUtils.isProcessor(selection)) {
+                      nfGoto.showDownstreamFromProcessor(selection);
+                  } else if (nfCanvasUtils.isFunnel(selection)) {
+                      nfGoto.showDownstreamFromFunnel(selection);
+                  } else if (nfCanvasUtils.isInputPort(selection)) {
+                      nfGoto.showDownstreamFromInputPort(selection);
+                  } else if (nfCanvasUtils.isOutputPort(selection)) {
+                      nfGoto.showDownstreamFromOutputPort(selection);
+                  } else if (nfCanvasUtils.isProcessGroup(selection) || nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                      nfGoto.showDownstreamFromGroup(selection);
+                    }
                 }
-            }
-        },
-
-        /**
-         * Shows and selects the component in the specified selection.
-         *
-         * @param {selection} selection     The selection
-         */
-        show: function (selection) {
-            if (selection.size() === 1) {
-                // deselect the current selection
-                var currentlySelected = nfCanvasUtils.getSelection();
-                currentlySelected.classed('selected', false);
-
-                // select only the component/connection in question
-                selection.classed('selected', true);
-                nfActions.center(selection);
-
-                // inform Angular app that values have changed
-                nfNgBridge.digest();
-            }
-        },
-
-        /**
-         * Selects all components in the specified selection.
-         *
-         * @param {selection} selection     Selection of components to select
-         */
-        select: function (selection) {
-            selection.classed('selected', true);
-        },
-
-        /**
-         * Selects all components.
-         */
-        selectAll: function () {
-            nfActions.select(d3.selectAll('g.component, g.connection'));
-        },
-
-        /**
-         * Centers the component in the specified selection.
-         *
-         * @argument {selection} selection      The selection
-         */
-        center: function (selection) {
-            if (selection.size() === 1) {
-                var box;
-                if (nfCanvasUtils.isConnection(selection)) {
-                    var x, y;
-                    var d = selection.datum();
-
-                    // get the position of the connection label
-                    if (d.bends.length > 0) {
-                        var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1);
-                        x = d.bends[i].x;
-                        y = d.bends[i].y;
-                    } else {
-                        x = (d.start.x + d.end.x) / 2;
-                        y = (d.start.y + d.end.y) / 2;
+            },
+    
+            /**
+             * Shows the upstream components from the specified selection.
+             *
+             * @param {selection} selection     The selection
+             */
+            showUpstream: function (selection) {
+              if (selection.size() === 1 && !nfCanvasUtils.isConnection(selection)) {
+    
+                    // open the downstream dialog according to the selection
+                  if (nfCanvasUtils.isProcessor(selection)) {
+                      nfGoto.showUpstreamFromProcessor(selection);
+                  } else if (nfCanvasUtils.isFunnel(selection)) {
+                      nfGoto.showUpstreamFromFunnel(selection);
+                  } else if (nfCanvasUtils.isInputPort(selection)) {
+                      nfGoto.showUpstreamFromInputPort(selection);
+                  } else if (nfCanvasUtils.isOutputPort(selection)) {
+                      nfGoto.showUpstreamFromOutputPort(selection);
+                  } else if (nfCanvasUtils.isProcessGroup(selection) || nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                      nfGoto.showUpstreamFromGroup(selection);
                     }
-
-                    box = {
-                        x: x,
-                        y: y,
-                        width: 1,
-                        height: 1
-                    };
-                } else {
-                    var selectionData = selection.datum();
-                    var selectionPosition = selectionData.position;
-
-                    box = {
-                        x: selectionPosition.x,
-                        y: selectionPosition.y,
-                        width: selectionData.dimensions.width,
-                        height: selectionData.dimensions.height
-                    };
                 }
-
-                // center on the component
-                nfCanvasUtils.centerBoundingBox(box);
-
-                // refresh the canvas
-                nfCanvasUtils.refreshCanvasView({
-                    transition: true
-                });
-            }
-        },
-
-        /**
-         * Enables all eligible selected components.
-         *
-         * @argument {selection} selection      The selection
-         */
-        enable: function (selection) {
-            var componentsToEnable = nfCanvasUtils.filterEnable(selection);
-
-            if (componentsToEnable.empty()) {
-                nfDialog.showOkDialog({
-                    headerText: 'Enable Components',
-                    dialogContent: 'No eligible components are selected. Please select the components to be enabled and ensure they are no longer running.'
-                });
-            } else {
-                var enableRequests = [];
-
-                // enable the selected processors
-                componentsToEnable.each(function (d) {
-                    var selected = d3.select(this);
-
-                    // build the entity
-                    var entity = {
-                        'revision': nfClient.getRevision(d),
-                        'component': {
-                            'id': d.id,
-                            'state': 'STOPPED'
-                        }
-                    };
-
-                    enableRequests.push(updateResource(d.uri, entity).done(function (response) {
-                        nfCanvasUtils.getComponentByType(d.type).set(response);
-                    }));
-                });
-
-                // inform Angular app once the updates have completed
-                if (enableRequests.length > 0) {
-                    $.when.apply(window, enableRequests).always(function () {
-                        nfNgBridge.digest();
-                    });
+            },
+    
+            /**
+             * Shows and selects the component in the specified selection.
+             *
+             * @param {selection} selection     The selection
+             */
+            show: function (selection) {
+                if (selection.size() === 1) {
+                    // deselect the current selection
+                  var currentlySelected = nfCanvasUtils.getSelection();
+                    currentlySelected.classed('selected', false);
+    
+                    // select only the component/connection in question
+                    selection.classed('selected', true);
+                  nfActions.center(selection);
+  
+                  // inform Angular app that values have changed
+                  nfNgBridge.digest();
                 }
-            }
-        },
-
-        /**
-         * Disables all eligible selected components.
-         *
-         * @argument {selection} selection      The selection
-         */
-        disable: function (selection) {
-            var componentsToDisable = nfCanvasUtils.filterDisable(selection);
-
-            if (componentsToDisable.empty()) {
-                nfDialog.showOkDialog({
-                    headerText: 'Disable Components',
-                    dialogContent: 'No eligible components are selected. Please select the components to be disabled and ensure they are no longer running.'
-                });
-            } else {
-                var disableRequests = [];
-
-                // disable the selected components
-                componentsToDisable.each(function (d) {
-                    var selected = d3.select(this);
-
-                    // build the entity
-                    var entity = {
-                        'revision': nfClient.getRevision(d),
-                        'component': {
-                            'id': d.id,
-                            'state': 'DISABLED'
+            },
+    
+            /**
+             * Selects all components in the specified selection.
+             *
+             * @param {selection} selection     Selection of components to select
+             */
+            select: function (selection) {
+                selection.classed('selected', true);
+            },
+    
+            /**
+             * Selects all components.
+             */
+            selectAll: function () {
+              nfActions.select(d3.selectAll('g.component, g.connection'));
+            },
+    
+            /**
+             * Centers the component in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            center: function (selection) {
+                if (selection.size() === 1) {
+                    var box;
+                  if (nfCanvasUtils.isConnection(selection)) {
+                        var x, y;
+                        var d = selection.datum();
+    
+                        // get the position of the connection label
+                        if (d.bends.length > 0) {
+                            var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1);
+                            x = d.bends[i].x;
+                            y = d.bends[i].y;
+                        } else {
+                            x = (d.start.x + d.end.x) / 2;
+                            y = (d.start.y + d.end.y) / 2;
                         }
-                    };
-
-                    disableRequests.push(updateResource(d.uri, entity).done(function (response) {
-                        nfCanvasUtils.getComponentByType(d.type).set(response);
-                    }));
-                });
-
-                // inform Angular app once the updates have completed
-                if (disableRequests.length > 0) {
-                    $.when.apply(window, disableRequests).always(function () {
-                        nfNgBridge.digest();
+    
+                        box = {
+                            x: x,
+                            y: y,
+                            width: 1,
+                            height: 1
+                        };
+                    } else {
+                        var selectionData = selection.datum();
+                        var selectionPosition = selectionData.position;
+    
+                        box = {
+                            x: selectionPosition.x,
+                            y: selectionPosition.y,
+                            width: selectionData.dimensions.width,
+                            height: selectionData.dimensions.height
+                        };
+                    }
+    
+                    // center on the component
+                  nfCanvasUtils.centerBoundingBox(box);
+    
+                    // refresh the canvas
+                  nfCanvasUtils.refreshCanvasView({
+                        transition: true
                     });
                 }
-            }
-        },
-
-        /**
-         * Opens provenance with the component in the specified selection.
-         *
-         * @argument {selection} selection The selection
-         */
-        openProvenance: function (selection) {
-            if (selection.size() === 1) {
-                var selectionData = selection.datum();
-
-                // open the provenance page with the specified component
-                nfShell.showPage('provenance?' + $.param({
-                        componentId: selectionData.id
-                    }));
-            }
-        },
-
-        /**
-         * Starts the components in the specified selection.
-         *
-         * @argument {selection} selection      The selection
-         */
-        start: function (selection) {
-            if (selection.empty()) {
-                // build the entity
-                var entity = {
-                    'id': nfCanvasUtils.getGroupId(),
-                    'state': 'RUNNING'
-                };
-
-                updateResource(config.urls.api + '/flow/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()), entity).done(updateProcessGroup);
-            } else {
-                var componentsToStart = selection.filter(function (d) {
-                    return nfCanvasUtils.isRunnable(d3.select(this));
-                });
-
-                // ensure there are startable components selected
-                if (componentsToStart.empty()) {
-                    nfDialog.showOkDialog({
-                        headerText: 'Start Components',
-                        dialogContent: 'No eligible components are selected. Please select the components to be started and ensure they are no longer running.'
+            },
+    
+            /**
+             * Enables all eligible selected components.
+             *
+             * @argument {selection} selection      The selection
+             */
+            enable: function (selection) {
+              var componentsToEnable = nfCanvasUtils.filterEnable(selection);
+    
+                if (componentsToEnable.empty()) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-actions.Header1'),
+                      dialogContent: nf._.msg('nf-actions.Message1')
                     });
                 } else {
-                    var startRequests = [];
-
-                    // start each selected component
-                    componentsToStart.each(function (d) {
+                    var enableRequests = [];
+    
+                    // enable the selected processors
+                    componentsToEnable.each(function (d) {
                         var selected = d3.select(this);
-
-                        // prepare the request
-                        var uri, entity;
-                        if (nfCanvasUtils.isProcessGroup(selected)) {
-                            uri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(d.id);
-                            entity = {
+    
+                        // build the entity
+                        var entity = {
+                          'revision': nfClient.getRevision(d),
+                            'component': {
                                 'id': d.id,
-                                'state': 'RUNNING'
-                            }
-                        } else {
-                            uri = d.uri;
-                            entity = {
-                                'revision': nfClient.getRevision(d),
-                                'component': {
-                                    'id': d.id,
-                                    'state': 'RUNNING'
-                                }
-                            };
-                        }
-
-                        startRequests.push(updateResource(uri, entity).done(function (response) {
-                            if (nfCanvasUtils.isProcessGroup(selected)) {
-                                nfCanvasUtils.getComponentByType('ProcessGroup').reload(d.id);
-                            } else {
-                                nfCanvasUtils.getComponentByType(d.type).set(response);
+                                'state': 'STOPPED'
                             }
+                        };
+    
+                        enableRequests.push(updateResource(d.uri, entity).done(function (response) {
+                          nfCanvasUtils.getComponentByType(d.type).set(response);
                         }));
                     });
-
+    
                     // inform Angular app once the updates have completed
-                    if (startRequests.length > 0) {
-                        $.when.apply(window, startRequests).always(function () {
-                            nfNgBridge.digest();
+                    if (enableRequests.length > 0) {
+                        $.when.apply(window, enableRequests).always(function () {
+                          nfNgBridge.digest();
                         });
                     }
                 }
-            }
-        },
-
-        /**
-         * Stops the components in the specified selection.
-         *
-         * @argument {selection} selection      The selection
-         */
-        stop: function (selection) {
-            if (selection.empty()) {
-                // build the entity
-                var entity = {
-                    'id': nfCanvasUtils.getGroupId(),
-                    'state': 'STOPPED'
-                };
-
-                updateResource(config.urls.api + '/flow/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()), entity).done(updateProcessGroup);
-            } else {
-                var componentsToStop = selection.filter(function (d) {
-                    return nfCanvasUtils.isStoppable(d3.select(this));
-                });
-
-                // ensure there are some component to stop
-                if (componentsToStop.empty()) {
-                    nfDialog.showOkDialog({
-                        headerText: 'Stop Components',
-                        dialogContent: 'No eligible components are selected. Please select the components to be stopped.'
+            },
+    
+            /**
+             * Disables all eligible selected components.
+             *
+             * @argument {selection} selection      The selection
+             */
+            disable: function (selection) {
+              var componentsToDisable = nfCanvasUtils.filterDisable(selection);
+    
+                if (componentsToDisable.empty()) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-actions.Header2'),
+                      dialogContent: nf._.msg('nf-actions.Message2')
                     });
                 } else {
-                    var stopRequests = [];
-
-                    // stop each selected component
-                    componentsToStop.each(function (d) {
+                    var disableRequests = [];
+    
+                    // disable the selected components
+                    componentsToDisable.each(function (d) {
                         var selected = d3.select(this);
-
-                        // prepare the request
-                        var uri, entity;
-                        if (nfCanvasUtils.isProcessGroup(selected)) {
-                            uri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(d.id);
-                            entity = {
+    
+                        // build the entity
+                        var entity = {
+                          'revision': nfClient.getRevision(d),
+                            'component': {
                                 'id': d.id,
-                                'state': 'STOPPED'
-                            };
-                        } else {
-                            uri = d.uri;
-                            entity = {
-                                'revision': nfClient.getRevision(d),
-                                'component': {
-                                    'id': d.id,
-                                    'state': 'STOPPED'
-                                }
-                            };
-                        }
-
-                        stopRequests.push(updateResource(uri, entity).done(function (response) {
-                            if (nfCanvasUtils.isProcessGroup(selected)) {
-                                nfCanvasUtils.getComponentByType('ProcessGroup').reload(d.id);
-                            } else {
-                                nfCanvasUtils.getComponentByType(d.type).set(response);
+                                'state': 'DISABLED'
                             }
+                        };
+    
+                        disableRequests.push(updateResource(d.uri, entity).done(function (response) {
+                          nfCanvasUtils.getComponentByType(d.type).set(response);
                         }));
                     });
-
+    
                     // inform Angular app once the updates have completed
-                    if (stopRequests.length > 0) {
-                        $.when.apply(window, stopRequests).always(function () {
-                            nfNgBridge.digest();
+                    if (disableRequests.length > 0) {
+                        $.when.apply(window, disableRequests).always(function () {
+                          nfNgBridge.digest();
                         });
                     }
                 }
-            }
-        },
-
-        /**
-         * Enables transmission for the components in the specified selection.
-         *
-         * @argument {selection} selection      The selection
-         */
-        enableTransmission: function (selection) {
-            var componentsToEnable = selection.filter(function (d) {
-                return nfCanvasUtils.canStartTransmitting(d3.select(this));
-            });
-
-            // start each selected component
-            componentsToEnable.each(function (d) {
-                // build the entity
-                var entity = {
-                    'revision': nfClient.getRevision(d),
-                    'component': {
-                        'id': d.id,
-                        'transmitting': true
+            },
+    
+            /**
+             * Opens provenance with the component in the specified selection.
+             *
+             * @argument {selection} selection The selection
+             */
+            openProvenance: function (selection) {
+                if (selection.size() === 1) {
+                    var selectionData = selection.datum();
+    
+                    // open the provenance page with the specified component
+                  nfShell.showPage('provenance?' + $.param({
+                            componentId: selectionData.id
+                        }));
+                }
+            },
+    
+            /**
+             * Starts the components in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            start: function (selection) {
+                if (selection.empty()) {
+                    // build the entity
+                    var entity = {
+                      'id': nfCanvasUtils.getGroupId(),
+                        'state': 'RUNNING'
+                    };
+    
+                  updateResource(config.urls.api + '/flow/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()), entity).done(updateProcessGroup);
+                } else {
+                    var componentsToStart = selection.filter(function (d) {
+                      return nfCanvasUtils.isRunnable(d3.select(this));
+                    });
+    
+                    // ensure there are startable components selected
+                    if (componentsToStart.empty()) {
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-actions.Header3'),
+                          dialogContent: nf._.msg('nf-actions.Message3')
+                        });
+                    } else {
+                        var startRequests = [];
+    
+                        // start each selected component
+                        componentsToStart.each(function (d) {
+                            var selected = d3.select(this);
+    
+                            // prepare the request
+                            var uri, entity;
+                          if (nfCanvasUtils.isProcessGroup(selected)) {
+                                uri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(d.id);
+                                entity = {
+                                    'id': d.id,
+                                    'state': 'RUNNING'
+                                }
+                            } else {
+                                uri = d.uri;
+                                entity = {
+                                  'revision': nfClient.getRevision(d),
+                                    'component': {
+                                        'id': d.id,
+                                        'state': 'RUNNING'
+                                    }
+                                };
+                            }
+    
+                            startRequests.push(updateResource(uri, entity).done(function (response) {
+                              if (nfCanvasUtils.isProcessGroup(selected)) {
+                                  nfCanvasUtils.getComponentByType('ProcessGroup').reload(d.id);
+                                } else {
+                                  nfCanvasUtils.getComponentByType(d.type).set(response);
+                                }
+                            }));
+                        });
+    
+                        // inform Angular app once the updates have completed
+                        if (startRequests.length > 0) {
+                            $.when.apply(window, startRequests).always(function () {
+                              nfNgBridge.digest();
+                            });
+                        }
                     }
-                };
-
-                // start transmitting
-                updateResource(d.uri, entity).done(function (response) {
-                    nfRemoteProcessGroup.set(response);
-                });
-            });
-        },
-
-        /**
-         * Disables transmission for the components in the specified selection.
-         *
-         * @argument {selection} selection      The selection
-         */
-        disableTransmission: function (selection) {
-            var componentsToDisable = selection.filter(function (d) {
-                return nfCanvasUtils.canStopTransmitting(d3.select(this));
-            });
-
-            // stop each selected component
-            componentsToDisable.each(function (d) {
-                // build the entity
-                var entity = {
-                    'revision': nfClient.getRevision(d),
-                    'component': {
-                        'id': d.id,
-                        'transmitting': false
+                }
+            },
+    
+            /**
+             * Stops the components in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            stop: function (selection) {
+                if (selection.empty()) {
+                    // build the entity
+                    var entity = {
+                      'id': nfCanvasUtils.getGroupId(),
+                        'state': 'STOPPED'
+                    };
+    
+                  updateResource(config.urls.api + '/flow/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()), entity).done(updateProcessGroup);
+                } else {
+                    var componentsToStop = selection.filter(function (d) {
+                      return nfCanvasUtils.isStoppable(d3.select(this));
+                    });
+    
+                    // ensure there are some component to stop
+                    if (componentsToStop.empty()) {
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-actions.Header4'),
+                          dialogContent: nf._.msg('nf-actions.Message4')
+                        });
+                    } else {
+                        var stopRequests = [];
+    
+                        // stop each selected component
+                        componentsToStop.each(function (d) {
+                            var selected = d3.select(this);
+    
+                            // prepare the request
+                            var uri, entity;
+                          if (nfCanvasUtils.isProcessGroup(selected)) {
+                                uri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(d.id);
+                                entity = {
+                                    'id': d.id,
+                                    'state': 'STOPPED'
+                                };
+                            } else {
+                                uri = d.uri;
+                                entity = {
+                                  'revision': nfClient.getRevision(d),
+                                    'component': {
+                                        'id': d.id,
+                                        'state': 'STOPPED'
+                                    }
+                                };
+                            }
+    
+                            stopRequests.push(updateResource(uri, entity).done(function (response) {
+                              if (nfCanvasUtils.isProcessGroup(selected)) {
+                                  nfCanvasUtils.getComponentByType('ProcessGroup').reload(d.id);
+                                } else {
+                                  nfCanvasUtils.getComponentByType(d.type).set(response);
+                                }
+                            }));
+                        });
+    
+                        // inform Angular app once the updates have completed
+                        if (stopRequests.length > 0) {
+                            $.when.apply(window, stopRequests).always(function () {
+                              nfNgBridge.digest();
+                            });
+                        }
                     }
-                };
-
-                updateResource(d.uri, entity).done(function (response) {
-                    nfRemoteProcessGroup.set(response);
+                }
+            },
+    
+            /**
+             * Enables transmission for the components in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            enableTransmission: function (selection) {
+                var componentsToEnable = selection.filter(function (d) {
+                  return nfCanvasUtils.canStartTransmitting(d3.select(this));
                 });
-            });
-        },
-
-        /**
-         * Shows the configuration dialog for the specified selection.
-         *
-         * @param {selection} selection     Selection of the component to be configured
-         */
-        showConfiguration: function (selection) {
-            if (selection.empty()) {
-                nfProcessGroupConfiguration.showConfiguration(nfCanvasUtils.getGroupId());
-            } else if (selection.size() === 1) {
-                var selectionData = selection.datum();
-                if (nfCanvasUtils.isProcessor(selection)) {
-                    nfProcessorConfiguration.showConfiguration(selection);
-                } else if (nfCanvasUtils.isLabel(selection)) {
-                    nfLabelConfiguration.showConfiguration(selection);
-                } else if (nfCanvasUtils.isProcessGroup(selection)) {
-                    nfProcessGroupConfiguration.showConfiguration(selectionData.id);
-                } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                    nfRemoteProcessGroupConfiguration.showConfiguration(selection);
-                } else if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
-                    nfPortConfiguration.showConfiguration(selection);
-                } else if (nfCanvasUtils.isConnection(selection)) {
-                    nfConnectionConfiguration.showConfiguration(selection);
+    
+                // start each selected component
+                componentsToEnable.each(function (d) {
+                    // build the entity
+                    var entity = {
+                      'revision': nfClient.getRevision(d),
+                        'component': {
+                            'id': d.id,
+                            'transmitting': true
+                        }
+                    };
+    
+                    // start transmitting
+                    updateResource(d.uri, entity).done(function (response) {
+                      nfRemoteProcessGroup.set(response);
+                    });
+                });
+            },
+    
+            /**
+             * Disables transmission for the components in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            disableTransmission: function (selection) {
+                var componentsToDisable = selection.filter(function (d) {
+                  return nfCanvasUtils.canStopTransmitting(d3.select(this));
+                });
+    
+                // stop each selected component
+                componentsToDisable.each(function (d) {
+                    // build the entity
+                    var entity = {
+                      'revision': nfClient.getRevision(d),
+                        'component': {
+                            'id': d.id,
+                            'transmitting': false
+                        }
+                    };
+    
+                    updateResource(d.uri, entity).done(function (response) {
+                      nfRemoteProcessGroup.set(response);
+                    });
+                });
+            },
+    
+            /**
+             * Shows the configuration dialog for the specified selection.
+             *
+             * @param {selection} selection     Selection of the component to be configured
+             */
+            showConfiguration: function (selection) {
+                if (selection.empty()) {
+                  nfProcessGroupConfiguration.showConfiguration(nfCanvasUtils.getGroupId());
+                } else if (selection.size() === 1) {
+                    var selectionData = selection.datum();
+                  if (nfCanvasUtils.isProcessor(selection)) {
+                      nfProcessorConfiguration.showConfiguration(selection);
+                  } else if (nfCanvasUtils.isLabel(selection)) {
+                      nfLabelConfiguration.showConfiguration(selection);
+                  } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                      nfProcessGroupConfiguration.showConfiguration(selectionData.id);
+                  } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                      nfRemoteProcessGroupConfiguration.showConfiguration(selection);
+                  } else if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
+                      nfPortConfiguration.showConfiguration(selection);
+                  } else if (nfCanvasUtils.isConnection(selection)) {
+                      nfConnectionConfiguration.showConfiguration(selection);
+                    }
                 }
-            }
-        },
-
-        /**
-         * Opens the policy management page for the selected component.
-         *
-         * @param selection
-         */
-        managePolicies: function(selection) {
-            if (selection.size() <= 1) {
-                nfPolicyManagement.showComponentPolicy(selection);
-            }
-        },
-
-        // Defines an action for showing component details (like configuration but read only).
-        showDetails: function (selection) {
-            if (selection.empty()) {
-                nfProcessGroupConfiguration.showConfiguration(nfCanvasUtils.getGroupId());
-            } else if (selection.size() === 1) {
-                var selectionData = selection.datum();
-                if (nfCanvasUtils.isProcessor(selection)) {
-                    nfProcessorDetails.showDetails(nfCanvasUtils.getGroupId(), selectionData.id);
-                } else if (nfCanvasUtils.isProcessGroup(selection)) {
-                    nfProcessGroupConfiguration.showConfiguration(selectionData.id);
-                } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                    nfRemoteProcessGroupDetails.showDetails(selection);
-                } else if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
-                    nfPortDetails.showDetails(selection);
-                } else if (nfCanvasUtils.isConnection(selection)) {
-                    nfConnectionDetails.showDetails(nfCanvasUtils.getGroupId(), selectionData.id);
+            },
+    
+            /**
+             * Opens the policy management page for the selected component.
+             *
+             * @param selection
+             */
+            managePolicies: function(selection) {
+                if (selection.size() <= 1) {
+                  nfPolicyManagement.showComponentPolicy(selection);
                 }
-            }
-        },
-
-        /**
-         * Shows the usage documentation for the component in the specified selection.
-         *
-         * @param {selection} selection     The selection
-         */
-        showUsage: function (selection) {
-            if (selection.size() === 1 && nfCanvasUtils.isProcessor(selection)) {
-                var selectionData = selection.datum();
-                nfShell.showPage('../nifi-docs/documentation?' + $.param({
-                        select: nfCommon.substringAfterLast(selectionData.component.type, '.')
-                    }));
-            }
-        },
-
-        /**
-         * Shows the stats for the specified selection.
-         *
-         * @argument {selection} selection      The selection
-         */
-        showStats: function (selection) {
-            if (selection.size() === 1) {
-                var selectionData = selection.datum();
-                if (nfCanvasUtils.isProcessor(selection)) {
-                    nfStatusHistory.showProcessorChart(nfCanvasUtils.getGroupId(), selectionData.id);
-                } else if (nfCanvasUtils.isProcessGroup(selection)) {
-                    nfStatusHistory.showProcessGroupChart(nfCanvasUtils.getGroupId(), selectionData.id);
-                } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                    nfStatusHistory.showRemoteProcessGroupChart(nfCanvasUtils.getGroupId(), selectionData.id);
-                } else if (nfCanvasUtils.isConnection(selection)) {
-                    nfStatusHistory.showConnectionChart(nfCanvasUtils.getGroupId(), selectionData.id);
+            },
+    
+            // Defines an action for showing component details (like configuration but read only).
+            showDetails: function (selection) {
+                if (selection.empty()) {
+                  nfProcessGroupConfiguration.showConfiguration(nfCanvasUtils.getGroupId());
+                } else if (selection.size() === 1) {
+                    var selectionData = selection.datum();
+                  if (nfCanvasUtils.isProcessor(selection)) {
+                      nfProcessorDetails.showDetails(nfCanvasUtils.getGroupId(), selectionData.id);
+                  } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                      nfProcessGroupConfiguration.showConfiguration(selectionData.id);
+                  } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                      nfRemoteProcessGroupDetails.showDetails(selection);
+                  } else if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
+                      nfPortDetails.showDetails(selection);
+                  } else if (nfCanvasUtils.isConnection(selection)) {
+                      nfConnectionDetails.showDetails(nfCanvasUtils.getGroupId(), selectionData.id);
+                    }
                 }
-            }
-        },
-
-        /**
-         * Opens the remote ports dialog for the remote process group in the specified selection.
-         *
-         * @param {selection} selection         The selection
-         */
-        remotePorts: function (selection) {
-            if (selection.size() === 1 && nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                nfRemoteProcessGroupPorts.showPorts(selection);
-            }
-        },
-
-        /**
-         * Reloads the status for the entire canvas (components and flow.)
-         */
-        reload: function () {
-            nfCanvasUtils.reload({
-                'transition': true
-            });
-        },
-
-        /**
-         * Deletes the component in the specified selection.
-         *
-         * @param {selection} selection     The selection containing the component to be removed
-         */
-        'delete': function (selection) {
-            if (nfCommon.isUndefined(selection) || selection.empty()) {
-                nfDialog.showOkDialog({
-                    headerText: 'Reload',
-                    dialogContent: 'No eligible components are selected. Please select the components to be deleted.'
-                });
-            } else {
+            },
+    
+            /**
+             * Shows the usage documentation for the component in the specified selection.
+             *
+             * @param {selection} selection     The selection
+             */
+            showUsage: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isProcessor(selection)) {
+                    var selectionData = selection.datum();
+                  nfShell.showPage('../nifi-docs/documentation?' + $.param({
+                          select: nfCommon.substringAfterLast(selectionData.component.type, '.')
+                        }));
+                }
+            },
+    
+            /**
+             * Shows the stats for the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            showStats: function (selection) {
                 if (selection.size() === 1) {
                     var selectionData = selection.datum();
-                    var revision = nfClient.getRevision(selectionData);
-
-                    $.ajax({
-                        type: 'DELETE',
-                        url: selectionData.uri + '?' + $.param({
-                            version: revision.version,
-                            clientId: revision.clientId
-                        }),
-                        dataType: 'json'
-                    }).done(function (response) {
-                        // remove the component/connection in question
-                        nfCanvasUtils.getComponentByType(selectionData.type).remove(selectionData.id);
-
-                        // if the selection is a connection, reload the source and destination accordingly
-                        if (nfCanvasUtils.isConnection(selection) === false) {
-                            var connections = nfConnection.getComponentConnections(selectionData.id);
-                            if (connections.length > 0) {
-                                var ids = [];
-                                $.each(connections, function (_, connection) {
-                                    ids.push(connection.id);
-                                });
-
-                                // remove the corresponding connections
-                                nfConnection.remove(ids);
-                            }
-                        }
-
-                        // refresh the birdseye
-                        nfBirdseye.refresh();
-                        // inform Angular app values have changed
-                        nfNgBridge.digest();
-                    }).fail(nfErrorHandler.handleAjaxError);
+                  if (nfCanvasUtils.isProcessor(selection)) {
+                      nfStatusHistory.showProcessorChart(nfCanvasUtils.getGroupId(), selectionData.id);
+                  } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                      nfStatusHistory.showProcessGroupChart(nfCanvasUtils.getGroupId(), selectionData.id);
+                  } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                      nfStatusHistory.showRemoteProcessGroupChart(nfCanvasUtils.getGroupId(), selectionData.id);
+                  } else if (nfCanvasUtils.isConnection(selection)) {
+                      nfStatusHistory.showConnectionChart(nfCanvasUtils.getGroupId(), selectionData.id);
+                    }
+                }
+            },
+    
+            /**
+             * Opens the remote ports dialog for the remote process group in the specified selection.
+             *
+             * @param {selection} selection         The selection
+             */
+            remotePorts: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                  nfRemoteProcessGroupPorts.showPorts(selection);
+                }
+            },
+    
+            /**
+             * Reloads the status for the entire canvas (components and flow.)
+             */
+            reload: function () {
+              nfCanvasUtils.reload({
+                    'transition': true
+                });
+            },
+    
+            /**
+             * Deletes the component in the specified selection.
+             *
+             * @param {selection} selection     The selection containing the component to be removed
+             */
+            'delete': function (selection) {
+              if (nfCommon.isUndefined(selection) || selection.empty()) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-actions.Header5'),
+                      dialogContent: nf._.msg('nf-actions.Message5')
+                    });
                 } else {
-                    var parentGroupId = nfCanvasUtils.getGroupId();
-
-                    // create a snippet for the specified component and link to the data flow
-                    var snippet = nfSnippet.marshal(selection, parentGroupId);
-                    nfSnippet.create(snippet).done(function (response) {
-                        // remove the snippet, effectively removing the components
-                        nfSnippet.remove(response.snippet.id).done(function () {
-                            var components = d3.map();
-
-                            // add the id to the type's array
-                            var addComponent = function (type, id) {
-                                if (!components.has(type)) {
-                                    components.set(type, []);
-                                }
-                                components.get(type).push(id);
-                            };
-
-                            // go through each component being removed
-                            selection.each(function (d) {
-                                // remove the corresponding entry
-                                addComponent(d.type, d.id);
-
-                                // if this is not a connection, see if it has any connections that need to be removed
-                                if (d.type !== 'Connection') {
-                                    var connections = nfConnection.getComponentConnections(d.id);
-                                    if (connections.length > 0) {
-                                        $.each(connections, function (_, connection) {
-                                            addComponent('Connection', connection.id);
-                                        });
-                                    }
-                                }
-                            });
-
-                            // remove all the non connections in the snippet first
-                            components.forEach(function (type, ids) {
-                                if (type !== 'Connection') {
-                                    nfCanvasUtils.getComponentByType(type).remove(ids);
+                    if (selection.size() === 1) {
+                        var selectionData = selection.datum();
+                      var revision = nfClient.getRevision(selectionData);
+    
+                        $.ajax({
+                            type: 'DELETE',
+                            url: selectionData.uri + '?' + $.param({
+                                version: revision.version,
+                                clientId: revision.clientId
+                            }),
+                            dataType: 'json'
+                        }).done(function (response) {
+                            // remove the component/connection in question
+                          nfCanvasUtils.getComponentByType(selectionData.type).remove(selectionData.id);
+    
+                            // if the selection is a connection, reload the source and destination accordingly
+                          if (nfCanvasUtils.isConnection(selection) === false) {
+                              var connections = nfConnection.getComponentConnections(selectionData.id);
+                                if (connections.length > 0) {
+                                    var ids = [];
+                                    $.each(connections, function (_, connection) {
+                                        ids.push(connection.id);
+                                    });
+    
+                                    // remove the corresponding connections
+                                  nfConnection.remove(ids);
                                 }
-                            });
-
-                            // then remove all the connections
-                            if (components.has('Connection')) {
-                                nfConnection.remove(components.get('Connection'));
                             }
-
+    
                             // refresh the birdseye
-                            nfBirdseye.refresh();
-
+                          nfBirdseye.refresh();
                             // inform Angular app values have changed
-                            nfNgBridge.digest();
-                        }).fail(nfErrorHandler.handleAjaxError);
-                    }).fail(nfErrorHandler.handleAjaxError);
+                          nfNgBridge.digest();
+                      }).fail(nfErrorHandler.handleAjaxError);
+                    } else {
+                      var parentGroupId = nfCanvasUtils.getGroupId();
+  
+                        // create a snippet for the specified component and link to the data flow
+                      var snippet = nfSnippet.marshal(selection, parentGroupId);
+                      nfSnippet.create(snippet).done(function (response) {
+                            // remove the snippet, effectively removing the components
+                          nfSnippet.remove(response.snippet.id).done(function () {
+                                var components = d3.map();
+    
+                                // add the id to the type's array
+                                var addComponent = function (type, id) {
+                                    if (!components.has(type)) {
+                                        components.set(type, []);
+                                    }
+                                    components.get(type).push(id);
+                                };
+    
+                                // go through each component being removed
+                                selection.each(function (d) {
+                                    // remove the corresponding entry
+                                    addComponent(d.type, d.id);
+    
+                                    // if this is not a connection, see if it has any connections that need to be removed
+                                    if (d.type !== 'Connection') {
+                                      var connections = nfConnection.getComponentConnections(d.id);
+                                        if (connections.length > 0) {
+                                            $.each(connections, function (_, connection) {
+                                                addComponent('Connection', connection.id);
+                                            });
+                                        }
+                                    }
+                                });
+    
+                                // remove all the non connections in the snippet first
+                                components.forEach(function (type, ids) {
+                                    if (type !== 'Connection') {
+                                      nfCanvasUtils.getComponentByType(type).remove(ids);
+                                    }
+                                });
+    
+                                // then remove all the connections
+                                if (components.has('Connection')) {
+                                  nfConnection.remove(components.get('Connection'));
+                                }
+    
+                                // refresh the birdseye
+                              nfBirdseye.refresh();
+    
+                                // inform Angular app values have changed
+                              nfNgBridge.digest();
+                          }).fail(nfErrorHandler.handleAjaxError);
+                      }).fail(nfErrorHandler.handleAjaxError);
+                    }
                 }
-            }
-        },
-
-        /**
-         * Deletes the flow files in the specified connection.
-         *
-         * @param {type} selection
-         */
-        emptyQueue: function (selection) {
-            if (selection.size() !== 1 || !nfCanvasUtils.isConnection(selection)) {
-                return;
-            }
-
-            // prompt the user before emptying the queue
-            nfDialog.showYesNoDialog({
-                headerText: 'Empty Queue',
-                dialogContent: 'Are you sure you want to empty this queue? All FlowFiles waiting at the time of the request will be removed.',
-                noText: 'Cancel',
-                yesText: 'Empty',
-                yesHandler: function () {
-                    // get the connection data
-                    var connection = selection.datum();
-
-                    var MAX_DELAY = 4;
-                    var cancelled = false;
-                    var dropRequest = null;
-                    var dropRequestTimer = null;
-
-                    // updates the progress bar
-                    var updateProgress = function (percentComplete) {
-                        // remove existing labels
-                        var progressBar = $('#drop-request-percent-complete');
-                        progressBar.find('div.progress-label').remove();
-                        progressBar.find('md-progress-linear').remove();
-
-                        // update the progress bar
-                        var label = $('<div class="progress-label"></div>').text(percentComplete + '%');
-                        (nfNgBridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + percentComplete + '" class="md-hue-2" md-mode="determinate" aria-label="Drop request percent complete"></md-progress-linear>'))(nfNgBridge.rootScope)).appendTo(progressBar);
-                        progressBar.append(label);
-                    };
-
-                    // update the button model of the drop request status dialog
-                    $('#drop-request-status-dialog').modal('setButtonModel', [{
-                        buttonText: 'Stop',
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                cancelled = true;
-
-                                // we are waiting for the next poll attempt
-                                if (dropRequestTimer !== null) {
-                                    // cancel it
-                                    clearTimeout(dropRequestTimer);
-
-                                    // cancel the drop request
-                                    completeDropRequest();
+            },
+    
+            /**
+             * Deletes the flow files in the specified connection.
+             *
+             * @param {type} selection
+             */
+            emptyQueue: function (selection) {
+              if (selection.size() !== 1 || !nfCanvasUtils.isConnection(selection)) {
+                    return;
+                }
+    
+                // prompt the user before emptying the queue
+              nfDialog.showYesNoDialog({
+                  headerText: nf._.msg('nf-actions.EmptyQueue'),
+                  dialogContent: nf._.msg('nf-actions.Message6'),
+                  noText: nf._.msg('nf-actions.Cancel'),
+                  yesText: nf._.msg('nf-actions.Empty'),
+                    yesHandler: function () {
+                        // get the connection data
+                        var connection = selection.datum();
+    
+                        var MAX_DELAY = 4;
+                        var cancelled = false;
+                        var dropRequest = null;
+                        var dropRequestTimer = null;
+    
+                        // updates the progress bar
+                        var updateProgress = function (percentComplete) {
+                            // remove existing labels
+                            var progressBar = $('#drop-request-percent-complete');
+                            progressBar.find('div.progress-label').remove();
+                            progressBar.find('md-progress-linear').remove();
+    
+                            // update the progress bar
+                            var label = $('<div class="progress-label"></div>').text(percentComplete + '%');
+                          (nfNgBridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + percentComplete + '" class="md-hue-2" md-mode="determinate" aria-label="Drop request percent complete"></md-progress-linear>'))(nfNgBridge.rootScope)).appendTo(progressBar);
+                            progressBar.append(label);
+                        };
+    
+                        // update the button model of the drop request status dialog
+                        $('#drop-request-status-dialog').modal('setButtonModel', [{
+                          buttonText: nf._.msg('nf-actions.Stop'),
+                            color: {
+                                base: '#728E9B',
+                                hover: '#004849',
+                                text: '#ffffff'
+                            },
+                            handler: {
+                                click: function () {
+                                    cancelled = true;
+    
+                                    // we are waiting for the next poll attempt
+                                    if (dropRequestTimer !== null) {
+                                        // cancel it
+                                        clearTimeout(dropRequestTimer);
+    
+                                        // cancel the drop request
+                                        completeDropRequest();
+                                    }
                                 }
                             }
-                        }
-                    }]);
-
-                    // completes the drop request by removing it and showing how many flowfiles were deleted
-                    var completeDropRequest = function () {
-                        // reload the connection status
-                        nfConnection.reloadStatus(connection.id);
-
-                        // clean up as appropriate
-                        if (nfCommon.isDefinedAndNotNull(dropRequest)) {
+                        }]);
+    
+                        // completes the drop request by removing it and showing how many flowfiles were deleted
+                        var completeDropRequest = function () {
+                          // reload the connection status
+                          nfConnection.reloadStatus(connection.id);
+  
+                          // clean up as appropriate
+                          if (nfCommon.isDefinedAndNotNull(dropRequest)) {
+                                $.ajax({
+                                    type: 'DELETE',
+                                    url: dropRequest.uri,
+                                    dataType: 'json'
+                                }).done(function (response) {
+                                    // report the results of this drop request
+                                    dropRequest = response.dropRequest;
+    
+                                    // build the results
+                                    var droppedTokens = dropRequest.dropped.split(/ \/ /);
+                                    var results = $('<div></div>');
+                                    $('<span class="label"></span>').text(droppedTokens[0]).appendTo(results);
+                                  $('<span></span>').text(nf._.msg('nf-actions.Message15')+' (' + droppedTokens[1] + ')').appendTo(results);
+    
+                                    // if the request did not complete, include the original
+                                    if (dropRequest.percentCompleted < 100) {
+                                        var originalTokens = dropRequest.original.split(/ \/ /);
+                                      $('<span class="label"></span>').text(nf._.msg('nf-actions.Message16') + originalTokens[0]).appendTo(results) + nf._.msg('nf-actions.Message17');
+                                        $('<span></span>').text(' (' + originalTokens[1] + ')').appendTo(results);
+                                    }
+                                  $('<span></span>').text(nf._.msg('nf-actions.Message18')).appendTo(results);
+    
+                                    // if this request failed so the error
+                                  if (nfCommon.isDefinedAndNotNull(dropRequest.failureReason)) {
+                                        $('<br/><br/><span></span>').text(dropRequest.failureReason).appendTo(results);
+                                    }
+    
+                                    // display the results
+                                  nfDialog.showOkDialog({
+                                      headerText: nf._.msg('nf-actions.EmptyQueue'),
+                                        dialogContent: results
+                                    });
+                                }).always(function () {
+                                    $('#drop-request-status-dialog').modal('hide');
+                                });
+                            } else {
+                                // nothing was removed
+                              nfDialog.showOkDialog({
+                                  headerText: nf._.msg('nf-actions.EmptyQueue'),
+                                  dialogContent: nf._.msg('nf-actions.Message8')
+                                });
+    
+                                // close the dialog
+                                $('#drop-request-status-dialog').modal('hide');
+                            }
+                        };
+    
+                        // process the drop request
+                        var processDropRequest = function (delay) {
+                            // update the percent complete
+                            updateProgress(dropRequest.percentCompleted);
+    
+                            // update the status of the drop request
+                            $('#drop-request-status-message').text(dropRequest.state);
+    
+                            // close the dialog if the
+                            if (dropRequest.finished === true || cancelled === true) {
+                                completeDropRequest();
+                            } else {
+                                // wait delay to poll again
+                                dropRequestTimer = setTimeout(function () {
+                                    // clear the drop request timer
+                                    dropRequestTimer = null;
+    
+                                    // schedule to poll the status again in nextDelay
+                                    pollDropRequest(Math.min(MAX_DELAY, delay * 2));
+                                }, delay * 1000);
+                            }
+                        };
+    
+                        // schedule for the next poll iteration
+                        var pollDropRequest = function (nextDelay) {
                             $.ajax({
-                                type: 'DELETE',
+                                type: 'GET',
                                 url: dropRequest.uri,
                                 dataType: 'json'
                             }).done(function (response) {
-                                // report the results of this drop request
                                 dropRequest = response.dropRequest;
-
-                                // build the results
-                                var droppedTokens = dropRequest.dropped.split(/ \/ /);
-                                var results = $('<div></div>');
-                                $('<span class="label"></span>').text(droppedTokens[0]).appendTo(results);
-                                $('<span></span>').text(' FlowFiles (' + droppedTokens[1] + ')').appendTo(results);
-
-                                // if the request did not complete, include the original
-                                if (dropRequest.percentCompleted < 100) {
-                                    var originalTokens = dropRequest.original.split(/ \/ /);
-                                    $('<span class="label"></span>').text(' out of ' + originalTokens[0]).appendTo(results);
-                                    $('<span></span>').text(' (' + originalTokens[1] + ')').appendTo(results);
-                                }
-                                $('<span></span>').text(' were removed from the queue.').appendTo(results);
-
-                                // if this request failed so the error
-                                if (nfCommon.isDefinedAndNotNull(dropRequest.failureReason)) {
-                                    $('<br/><br/><span></span>').text(dropRequest.failureReason).appendTo(results);
+                                processDropRequest(nextDelay);
+                            }).fail(function (xhr, status, error) {
+                                if (xhr.status === 403) {
+                                  nfErrorHandler.handleAjaxError(xhr, status, error);
+                                } else {
+                                    completeDropRequest()
                                 }
-
-                                // display the results
-                                nfDialog.showOkDialog({
-                                    headerText: 'Empty Queue',
-                                    dialogContent: results
-                                });
-                            }).always(function () {
-                                $('#drop-request-status-dialog').modal('hide');
                             });
-                        } else {
-                            // nothing was removed
-                            nfDialog.showOkDialog({
-                                headerText: 'Empty Queue',
-                                dialogContent: 'No FlowFiles were removed.'
-                            });
-
-                            // close the dialog
-                            $('#drop-request-status-dialog').modal('hide');
-                        }
-                    };
-
-                    // process the drop request
-                    var processDropRequest = function (delay) {
-                        // update the percent complete
-                        updateProgress(dropRequest.percentCompleted);
-
-                        // update the status of the drop request
-                        $('#drop-request-status-message').text(dropRequest.state);
-
-                        // close the dialog if the
-                        if (dropRequest.finished === true || cancelled === true) {
-                            completeDropRequest();
-                        } else {
-                            // wait delay to poll again
-                            dropRequestTimer = setTimeout(function () {
-                                // clear the drop request timer
-                                dropRequestTimer = null;
-
-                                // schedule to poll the status again in nextDelay
-                                pollDropRequest(Math.min(MAX_DELAY, delay * 2));
-                            }, delay * 1000);
-                        }
-                    };
-
-                    // schedule for the next poll iteration
-                    var pollDropRequest = function (nextDelay) {
+                        };
+    
+                        // issue the request to delete the flow files
                         $.ajax({
-                            type: 'GET',
-                            url: dropRequest.uri,
-                            dataType: 'json'
+                            type: 'POST',
+                            url: '../nifi-api/flowfile-queues/' + encodeURIComponent(connection.id) + '/drop-requests',
+                            dataType: 'json',
+                            contentType: 'application/json'
                         }).done(function (response) {
+                            // initialize the progress bar value
+                            updateProgress(0);
+    
+                            // show the progress dialog
+                            $('#drop-request-status-dialog').modal('show');
+    
+                            // process the drop request
                             dropRequest = response.dropRequest;
-                            processDropRequest(nextDelay);
+                            processDropRequest(1);
                         }).fail(function (xhr, status, error) {
                             if (xhr.status === 403) {
-                                nfErrorHandler.handleAjaxError(xhr, status, error);
+                              nfErrorHandler.handleAjaxError(xhr, status, error);
                             } else {
                                 completeDropRequest()
                             }
                         });
-                    };
-
-                    // issue the request to delete the flow files
-                    $.ajax({
-                        type: 'POST',
-                        url: '../nifi-api/flowfile-queues/' + encodeURIComponent(connection.id) + '/drop-requests',
-                        dataType: 'json',
-                        contentType: 'application/json'
-                    }).done(function (response) {
-                        // initialize the progress bar value
-                        updateProgress(0);
-
-                        // show the progress dialog
-                        $('#drop-request-status-dialog').modal('show');
-
-                        // process the drop request
-                        dropRequest = response.dropRequest;
-                        processDropRequest(1);
-                    }).fail(function (xhr, status, error) {
-                        if (xhr.status === 403) {
-                            nfErrorHandler.handleAjaxError(xhr, status, error);
-                        } else {
-                            completeDropRequest()
-                        }
-                    });
-                }
-            });
-        },
-
-        /**
-         * Lists the flow files in the specified connection.
-         *
-         * @param {selection} selection
-         */
-        listQueue: function (selection) {
-            if (selection.size() !== 1 || !nfCanvasUtils.isConnection(selection)) {
-                return;
-            }
-
-            // get the connection data
-            var connection = selection.datum();
-
-            // list the flow files in the specified connection
-            nfQueueListing.listQueue(connection);
-        },
-
-        /**
-         * Views the state for the specified processor.
-         *
-         * @param {selection} selection
-         */
-        viewState: function (selection) {
-            if (selection.size() !== 1 || !nfCanvasUtils.isProcessor(selection)) {
-                return;
-            }
-
-            // get the processor data
-            var processor = selection.datum();
-
-            // view the state for the selected processor
-            nfComponentState.showState(processor, nfCanvasUtils.isConfigurable(selection));
-        },
-
-        /**
-         * Aligns the components in the specified selection vertically along the center of the components.
-         *
-         * @param {array} selection      The selection
-         */
-        alignVertical: function (selection) {
-            var updates = d3.map();
-            // ensure every component is writable
-            if (nfCanvasUtils.canModify(selection) === false) {
-                nfDialog.showOkDialog({
-                    headerText: 'Component Position',
-                    dialogContent: 'Must be authorized to modify every component selected.'
-                });
-                return;
-            }
-            // determine the extent
-            var minX = null, maxX = null;
-            selection.each(function (d) {
-                if (d.type !== "Connection") {
-                    if (minX === null || d.position.x < minX) {
-                        minX = d.position.x;
-                    }
-                    var componentMaxX = d.position.x + d.dimensions.width;
-                    if (maxX === null || componentMaxX > maxX) {
-                        maxX = componentMaxX;
                     }
+                });
+            },
+    
+            /**
+             * Lists the flow files in the specified connection.
+             *
+             * @param {selection} selection
+             */
+            listQueue: function (selection) {
+              if (selection.size() !== 1 || !nfCanvasUtils.isConnection(selection)) {
+                    return;
                 }
-            });
-            var center = (minX + maxX) / 2;
-
-            // align all components left
-            selection.each(function(d) {
-                if (d.type !== "Connection") {
-                    var delta = {
-                        x: center - (d.position.x + d.dimensions.width / 2),
-                        y: 0
-                    };
-                    // if this component is already centered, no need to updated it
-                    if (delta.x !== 0) {
-                        // consider any connections
-                        var connections = nfConnection.getComponentConnections(d.id);
-                        $.each(connections, function(_, connection) {
-                            var connectionSelection = d3.select('#id-' + connection.id);
-
-                            if (!updates.has(connection.id) && nfCanvasUtils.getConnectionSourceComponentId(connection) === nfCanvasUtils.getConnectionDestinationComponentId(connection)) {
-                                // this connection is self looping and hasn't been updated by the delta yet
-                                var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
-                                if (connectionUpdate !== null) {
-                                    updates.set(connection.id, connectionUpdate);
-                                }
-                            } else if (!updates.has(connection.id) && connectionSelection.classed('selected') && nfCanvasUtils.canModify(connectionSelection)) {
-                                // this is a selected connection that hasn't been updated by the delta yet
-                                if (nfCanvasUtils.getConnectionSourceComponentId(connection) === d.id || !isSourceSelected(connection, selection)) {
-                                    // the connection is either outgoing or incoming when the source of the connection is not part of the selection
-                                    var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
-                                    if (connectionUpdate !== null) {
-                                        updates.set(connection.id, connectionUpdate);
-                                    }
-                                }
-                            }
-                        });
-                        updates.set(d.id, nfDraggable.updateComponentPosition(d, delta));
-                    }
+    
+                // get the connection data
+                var connection = selection.datum();
+    
+                // list the flow files in the specified connection
+              nfQueueListing.listQueue(connection);
+            },
+    
+            /**
+             * Views the state for the specified processor.
+             *
+             * @param {selection} selection
+             */
+            viewState: function (selection) {
+              if (selection.size() !== 1 || !nfCanvasUtils.isProcessor(selection)) {
+                    return;
                 }
-            });
-            nfDraggable.refreshConnections(updates);
-        },
-
-        /**
-         * Aligns the components in the specified selection horizontally along the center of the components.
-         *
-         * @param {array} selection      The selection
-         */
-        alignHorizontal: function (selection) {
-            var updates = d3.map();
-            // ensure every component is writable
-            if (nfCanvasUtils.canModify(selection) === false) {
-                nfDialog.showOkDialog({
-                    headerText: 'Component Position',
-                    dialogContent: 'Must be authorized to modify every component selected.'
-                });
-                return;
-            }
-
-            // determine the extent
-            var minY = null, maxY = null;
-            selection.each(function (d) {
-                if (d.type !== "Connection") {
-                    if (minY === null || d.position.y < minY) {
-                        minY = d.position.y;
+    
+                // get the processor data
+                var processor = selection.datum();
+    
+                // view the state for the selected processor
+              nfComponentState.showState(processor, nfCanvasUtils.isConfigurable(selection));
+          },
+  
+          /**
+           * Aligns the components in the specified selection vertically along the center of the components.
+           *
+           * @param {array} selection      The selection
+           */
+          alignVertical: function (selection) {
+              var updates = d3.map();
+              // ensure every component is writable
+              if (nfCanvasUtils.canModify(selection) === false) {
+                  nfDialog.showOkDialog({
+                      headerText: 'Component Position',
+                      dialogContent: 'Must be authorized to modify every component selected.'
+                  });
+                  return;
+              }
+              // determine the extent
+              var minX = null, maxX = null;
+              selection.each(function (d) {
+                  if (d.type !== "Connection") {
+                      if (minX === null || d.position.x < minX) {
+                          minX = d.position.x;
+                      }
+                      var componentMaxX = d.position.x + d.dimensions.width;
+                      if (maxX === null || componentMaxX > maxX) {
+                          maxX = componentMaxX;
+                      }
+                  }
+              });
+              var center = (minX + maxX) / 2;
+  
+              // align all components left
+              selection.each(function(d) {
+                  if (d.type !== "Connection") {
+                      var delta = {
+                          x: center - (d.position.x + d.dimensions.width / 2),
+                          y: 0
+                      };
+                      // if this component is already centered, no need to updated it
+                      if (delta.x !== 0) {
+                          // consider any connections
+                          var connections = nfConnection.getComponentConnections(d.id);
+                          $.each(connections, function(_, connection) {
+                              var connectionSelection = d3.select('#id-' + connection.id);
+  
+                              if (!updates.has(connection.id) && nfCanvasUtils.getConnectionSourceComponentId(connection) === nfCanvasUtils.getConnectionDestinationComponentId(connection)) {
+                                  // this connection is self looping and hasn't been updated by the delta yet
+                                  var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
+                                  if (connectionUpdate !== null) {
+                                      updates.set(connection.id, connectionUpdate);
+                                  }
+                              } else if (!updates.has(connection.id) && connectionSelection.classed('selected') && nfCanvasUtils.canModify(connectionSelection)) {
+                                  // this is a selected connection that hasn't been updated by the delta yet
+                                  if (nfCanvasUtils.getConnectionSourceComponentId(connection) === d.id || !isSourceSelected(connection, selection)) {
+                                      // the connection is either outgoing or incoming when the source of the connection is not part of the selection
+                                      var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
+                                      if (connectionUpdate !== null) {
+                                          updates.set(connection.id, connectionUpdate);
+                                      }
+                                  }
+                              }
+                          });
+                          updates.set(d.id, nfDraggable.updateComponentPosition(d, delta));
+                      }
+                  }
+              });
+              nfDraggable.refreshConnections(updates);
+          },
+  
+          /**
+           * Aligns the components in the specified selection horizontally along the center of the components.
+           *
+           * @param {array} selection      The selection
+           */
+          alignHorizontal: function (selection) {
+              var updates = d3.map();
+              // ensure every component is writable
+              if (nfCanvasUtils.canModify(selection) === false) {
+                  nfDialog.showOkDialog({
+                      headerText: 'Component Position',
+                      dialogContent: 'Must be authorized to modify every component selected.'
+                  });
+                  return;
+              }
+  
+              // determine the extent
+              var minY = null, maxY = null;
+              selection.each(function (d) {
+                  if (d.type !== "Connection") {
+                      if (minY === null || d.position.y < minY) {
+                          minY = d.position.y;
+                      }
+                      var componentMaxY = d.position.y + d.dimensions.height;
+                      if (maxY === null || componentMaxY > maxY) {
+                          maxY = componentMaxY;
+                      }
+                  }
+              });
+              var center = (minY + maxY) / 2;
+  
+              // align all components with top most component
+              selection.each(function(d) {
+                  if (d.type !== "Connection") {
+                      var delta = {
+                          x: 0,
+                          y: center - (d.position.y + d.dimensions.height / 2)
+                      };
+  
+                      // if this component is already centered, no need to updated it
+                      if (delta.y !== 0) {
+                          // consider any connections
+                          var connections = nfConnection.getComponentConnections(d.id);
+                          $.each(connections, function(_, connection) {
+                              var connectionSelection = d3.select('#id-' + connection.id);
+  
+                              if (!updates.has(connection.id) && nfCanvasUtils.getConnectionSourceComponentId(connection) === nfCanvasUtils.getConnectionDestinationComponentId(connection)) {
+                                  // this connection is self looping and hasn't been updated by the delta yet
+                                  var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
+                                  if (connectionUpdate !== null) {
+                                      updates.set(connection.id, connectionUpdate);
+                                  }
+                              } else if (!updates.has(connection.id) && connectionSelection.classed('selected') && nfCanvasUtils.canModify(connectionSelection)) {
+                                  // this is a selected connection that hasn't been updated by the delta yet
+                                  if (nfCanvasUtils.getConnectionSourceComponentId(connection) === d.id || !isSourceSelected(connection, selection)) {
+                                      // the connection is either outgoing or incoming when the source of the connection is not part of the selection
+                                      var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
+                                      if (connectionUpdate !== null) {
+                                          updates.set(connection.id, connectionUpdate);
+                                      }
+                                  }
+                              }
+                          });
+                          updates.set(d.id, nfDraggable.updateComponentPosition(d, delta));
+                      }
+                  }
+              });
+  
+              nfDraggable.refreshConnections(updates);
+            },
+    
+            /**
+             * Opens the fill color dialog for the component in the specified selection.
+             *
+             * @param {type} selection      The selection
+             */
+            fillColor: function (selection) {
+              if (nfCanvasUtils.isColorable(selection)) {
+                    // we know that the entire selection is processors or labels... this
+                    // checks if the first item is a processor... if true, all processors
+                  var allProcessors = nfCanvasUtils.isProcessor(selection);
+    
+                    var color;
+                    if (allProcessors) {
+                      color = nfProcessor.defaultFillColor();
+                    } else {
+                      color = nfLabel.defaultColor();
                     }
-                    var componentMaxY = d.position.y + d.dimensions.height;
-                    if (maxY === null || componentMaxY > maxY) {
-                        maxY = componentMaxY;
+    
+                    // if there is only one component selected, get its color otherwise use default
+                    if (selection.size() === 1) {
+                        var selectionData = selection.datum();
+    
+                        // use the specified color if appropriate
+                      if (nfCommon.isDefinedAndNotNull(selectionData.component.style['background-color'])) {
+                            color = selectionData.component.style['background-color'];
+                        }
                     }
-                }
-            });
-            var center = (minY + maxY) / 2;
-
-            // align all components with top most component
-            selection.each(function(d) {
-                if (d.type !== "Connection") {
-                    var delta = {
-                        x: 0,
-                        y: center - (d.position.y + d.dimensions.height / 2)
-                    };
-
-                    // if this component is already centered, no need to updated it
-                    if (delta.y !== 0) {
-                        // consider any connections
-                        var connections = nfConnection.getComponentConnections(d.id);
-                        $.each(connections, function(_, connection) {
-                            var connectionSelection = d3.select('#id-' + connection.id);
-
-                            if (!updates.has(connection.id) && nfCanvasUtils.getConnectionSourceComponentId(connection) === nfCanvasUtils.getConnectionDestinationComponentId(connection)) {
-                                // this connection is self looping and hasn't been updated by the delta yet
-                                var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
-                                if (connectionUpdate !== null) {
-                                    updates.set(connection.id, connectionUpdate);
-                                }
-                            } else if (!updates.has(connection.id) && connectionSelection.classed('selected') && nfCanvasUtils.canModify(connectionSelection)) {
-                                // this is a selected connection that hasn't been updated by the delta yet
-                                if (nfCanvasUtils.getConnectionSourceComponentId(connection) === d.id || !isSourceSelected(connection, selection)) {
-                                    // the connection is either outgoing or incoming when the source of the connection is not part of the selection
-                                    var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
-                                    if (connectionUpdate !== null) {
-                                        updates.set(connection.id, connectionUpdate);
-                                    }
-                                }
-                            }
-                        });
-                        updates.set(d.id, nfDraggable.updateComponentPosition(d, delta));
+    
+                    // set the color
+                    $('#fill-color').minicolors('value', color);
+    
+                    // update the preview visibility
+                    if (allProcessors) {
+                        $('#fill-color-processor-preview').show();
+                        $('#fill-color-label-preview').hide();
+                    } else {
+                        $('#fill-color-processor-preview').hide();
+                        $('#fill-color-label-preview').show();
                     }
+    
+                    // show the dialog
+                    $('#fill-color-dialog').modal('show');
                 }
-            });
-
-            nfDraggable.refreshConnections(updates);
-        },
-
-        /**
-         * Opens the fill color dialog for the component in the specified selection.
-         *
-         * @param {type} selection      The selection
-         */
-        fillColor: function (selection) {
-            if (nfCanvasUtils.isColorable(selection)) {
-                // we know that the entire selection is processors or labels... this
-                // checks if the first item is a processor... if true, all processors
-                var allProcessors = nfCanvasUtils.isProcessor(selection);
-
-                var color;
-                if (allProcessors) {
-                    color = nfProcessor.defaultFillColor();
-                } else {
-                    color = nfLabel.defaultColor();
+            },
+    
+            /**
+             * Groups the currently selected components into a new group.
+             */
+            group: function () {
+              var selection = nfCanvasUtils.getSelection();
+    
+                // ensure that components have been specified
+                if (selection.empty()) {
+                    return;
                 }
-
-                // if there is only one component selected, get its color otherwise use default
-                if (selection.size() === 1) {
-                    var selectionData = selection.datum();
-
-                    // use the specified color if appropriate
-                    if (nfCommon.isDefinedAndNotNull(selectionData.component.style['background-color'])) {
-                        color = selectionData.component.style['background-color'];
-                    }
+    
+                // determine the origin of the bounding box for the selected components
+              var origin = nfCanvasUtils.getOrigin(selection);
+    
+                var pt = {'x': origin.x, 'y': origin.y};
+              $.when(nfNgBridge.injector.get('groupComponent').promptForGroupName(pt)).done(function (processGroup) {
+                    var group = d3.select('#id-' + processGroup.id);
+                  nfCanvasUtils.moveComponents(selection, group);
+                });
+            },
+    
+            /**
+             * Moves the currently selected component into the current parent group.
+             */
+            moveIntoParent: function () {
+              var selection = nfCanvasUtils.getSelection();
+    
+                // ensure that components have been specified
+                if (selection.empty()) {
+                    return;
                 }
-
-                // set the color
-                $('#fill-color').minicolors('value', color);
-
-                // update the preview visibility
-                if (allProcessors) {
-                    $('#fill-color-processor-preview').show();
-                    $('#fill-color-label-preview').hide();
-                } else {
-                    $('#fill-color-processor-preview').hide();
-                    $('#fill-color-label-preview').show();
+    
+                // move the current selection into the parent group
+              nfCanvasUtils.moveComponentsToParent(selection);
+            },
+    
+            /**
+             * Uploads a new template.
+             */
+            uploadTemplate: function () {
+                $('#upload-template-dialog').modal('show');
+            },
+    
+            /**
+             * Creates a new template based off the currently selected components. If no components
+             * are selected, a template of the entire canvas is made.
+             */
+            template: function () {
+              var selection = nfCanvasUtils.getSelection();
+    
+                // if no components are selected, use the entire graph
+                if (selection.empty()) {
+                    selection = d3.selectAll('g.component, g.connection');
                 }
-
-                // show the dialog
-                $('#fill-color-dialog').modal('show');
-            }
-        },
-
-        /**
-         * Groups the currently selected components into a new group.
-         */
-        group: function () {
-            var selection = nfCanvasUtils.getSelection();
-
-            // ensure that components have been specified
-            if (selection.empty()) {
-                return;
-            }
-
-            // determine the origin of the bounding box for the selected components
-            var origin = nfCanvasUtils.getOrigin(selection);
-
-            var pt = {'x': origin.x, 'y': origin.y};
-            $.when(nfNgBridge.injector.get('groupComponent').promptForGroupName(pt)).done(function (processGroup) {
-                var group = d3.select('#id-' + processGroup.id);
-                nfCanvasUtils.moveComponents(selection, group);
-            });
-        },
-
-        /**
-         * Moves the currently selected component into the current parent group.
-         */
-        moveIntoParent: function () {
-            var selection = nfCanvasUtils.getSelection();
-
-            // ensure that components have been specified
-            if (selection.empty()) {
-                return;
-            }
-
-            // move the current selection into the parent group
-            nfCanvasUtils.moveComponentsToParent(selection);
-        },
-
-        /**
-         * Uploads a new template.
-         */
-        uploadTemplate: function () {
-            $('#upload-template-dialog').modal('show');
-        },
-
-        /**
-         * Creates a new template based off the currently selected components. If no components
-         * are selected, a template of the entire canvas is made.
-         */
-        template: function () {
-            var selection = nfCanvasUtils.getSelection();
-
-            // if no components are selected, use the entire graph
-            if (selection.empty()) {
-                selection = d3.selectAll('g.component, g.connection');
-            }
-
-            // ensure that components have been specified
-            if (selection.empty()) {
-                nfDialog.showOkDialog({
-                    headerText: 'Create Template',
-                    dialogContent: "The current selection is not valid to create a template."
-                });
-                return;
-            }
-
-            // remove dangling edges (where only the source or destination is also selected)
-            selection = nfCanvasUtils.trimDanglingEdges(selection);
-
-            // ensure that components specified are valid
-            if (selection.empty()) {
-                nfDialog.showOkDialog({
-                    headerText: 'Create Template',
-                    dialogContent: "The current selection is not valid to create a template."
-                });
-                return;
-            }
-
-            // prompt for the template name
-            $('#new-template-dialog').modal('setButtonModel', [{
-                buttonText: 'Create',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
-                handler: {
-                    click: function () {
-                        // get the template details
-                        var templateName = $('#new-template-name').val();
-
-                        // ensure the template name is not blank
-                        if (nfCommon.isBlank(templateName)) {
-                            nfDialog.showOkDialog({
-                                headerText: 'Create Template',
-                                dialogContent: "The template name cannot be blank."
-                            });
-                            return;
-                        }
-
-                        // hide the dialog
-                        $('#new-template-dialog').modal('hide');
-
-                        // get the description
-                        var templateDescription = $('#new-template-description').val();
-
-                        // create a snippet
-                        var parentGroupId = nfCanvasUtils.getGroupId();
-                        var snippet = nfSnippet.marshal(selection, parentGroupId);
-
-                        // create the snippet
-                        nfSnippet.create(snippet).done(function (response) {
-                            var createSnippetEntity = {
-                                'name': templateName,
-                                'description': templateDescription,
-                                'snippetId': response.snippet.id
-                            };
-
-                            // create the template
-                            $.ajax({
-                                type: 'POST',
-                                url: config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/templates',
-                                data: JSON.stringify(createSnippetEntity),
-                                dataType: 'json',
-                                contentType: 'application/json'
-                            }).done(function () {
-                                // show the confirmation dialog
-                                nfDialog.showOkDialog({
-                                    headerText: 'Create Template',
-                                    dialogContent: "Template '" + nfCommon.escapeHtml(templateName) + "' was successfully created."
+    
+                // ensure that components have been specified
+                if (selection.empty()) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-actions.CreateTemplate'),
+                      dialogContent: nf._.msg('nf-actions.Message9')
+                    });
+                    return;
+                }
+    
+                // remove dangling edges (where only the source or destination is also selected)
+              selection = nfCanvasUtils.trimDanglingEdges(selection);
+    
+                // ensure that components specified are valid
+                if (selection.empty()) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-actions.CreateTemplate'),
+                      dialogContent: nf._.msg('nf-actions.Message9')
+                    });
+                    return;
+                }
+    
+                // prompt for the template name
+                $('#new-template-dialog').modal('setButtonModel', [{
+                  buttonText: nf._.msg('nf-actions.Create'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // get the template details
+                            var templateName = $('#new-template-name').val();
+    
+                            // ensure the template name is not blank
+                          if (nfCommon.isBlank(templateName)) {
+                              nfDialog.showOkDialog({
+                                  headerText: nf._.msg('nf-actions.CreateTemplate'),
+                                  dialogContent: nf._.msg('nf-actions.Message13')
                                 });
-                            }).always(function () {
-                                // clear the template dialog fields
-                                $('#new-template-name').val('');
-                                $('#new-template-description').val('');
-                            }).fail(nfErrorHandler.handleAjaxError);
-                        }).fail(nfErrorHandler.handleAjaxError);
+                                return;
+                            }
+    
+                            // hide the dialog
+                            $('#new-template-dialog').modal('hide');
+    
+                            // get the description
+                            var templateDescription = $('#new-template-description').val();
+    
+                            // create a snippet
+                          var parentGroupId = nfCanvasUtils.getGroupId();
+                          var snippet = nfSnippet.marshal(selection, parentGroupId);
+    
+                            // create the snippet
+                          nfSnippet.create(snippet).done(function (response) {
+                                var createSnippetEntity = {
+                                    'name': templateName,
+                                    'description': templateDescription,
+                                    'snippetId': response.snippet.id
+                                };
+    
+                                // create the template
+                                $.ajax({
+                                    type: 'POST',
+                                  url: config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/templates',
+                                    data: JSON.stringify(createSnippetEntity),
+                                    dataType: 'json',
+                                    contentType: 'application/json'
+                                }).done(function () {
+                                    // show the confirmation dialog
+                                  nfDialog.showOkDialog({
+                                      headerText: nf._.msg('nf-actions.CreateTemplate'),
+                                      dialogContent: nf._.msg('nf-actions.Template')+"'" + nfCommon.escapeHtml(templateName) + "'"+nf._.msg('nf-actions.Message11')
+                                    });
+                                }).always(function () {
+                                    // clear the template dialog fields
+                                    $('#new-template-name').val('');
+                                    $('#new-template-description').val('');
+                              }).fail(nfErrorHandler.handleAjaxError);
+                          }).fail(nfErrorHandler.handleAjaxError);
+                        }
                     }
-                }
-            }, {
-                buttonText: 'Cancel',
-                color: {
-                    base: '#E3E8EB',
-                    hover: '#C7D2D7',
-                    text: '#004849'
-                },
-                handler: {
-                    click: function () {
-                        // clear the template dialog fields
-                        $('#new-template-name').val('');
-                        $('#new-template-description').val('');
-
-                        $('#new-template-dialog').modal('hide');
+                }, {
+                  buttonText: nf._.msg('nf-actions.Cancel'),
+                    color: {
+                        base: '#E3E8EB',
+                        hover: '#C7D2D7',
+                        text: '#004849'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the template dialog fields
+                            $('#new-template-name').val('');
+                            $('#new-template-description').val('');
+    
+                            $('#new-template-dialog').modal('hide');
+                        }
                     }
+                }]).modal('show');
+    
+                // auto focus on the template name
+                $('#new-template-name').focus();
+            },
+    
+            /**
+             * Copies the component in the specified selection.
+             *
+             * @param {selection} selection     The selection containing the component to be copied
+             */
+            copy: function (selection) {
+                if (selection.empty()) {
+                    return;
                 }
-            }]).modal('show');
-
-            // auto focus on the template name
-            $('#new-template-name').focus();
-        },
-
-        /**
-         * Copies the component in the specified selection.
-         *
-         * @param {selection} selection     The selection containing the component to be copied
-         */
-        copy: function (selection) {
-            if (selection.empty()) {
-                return;
-            }
-
-            // determine the origin of the bounding box of the selection
-            var origin = nfCanvasUtils.getOrigin(selection);
-
-            // copy the snippet details
-            var parentGroupId = nfCanvasUtils.getGroupId();
-            nfClipboard.copy({
-                snippet: nfSnippet.marshal(selection, parentGroupId),
-                origin: origin
-            });
-        },
-
-        /**
-         * Pastes the currently copied selection.
-         *
-         * @param {selection} selection     The selection containing the component to be copied
-         * @param {obj} evt                 The mouse event
-         */
-        paste: function (selection, evt) {
-            if (nfCommon.isDefinedAndNotNull(evt)) {
-                // get the current scale and translation
-                var scale = nfCanvasUtils.scaleCanvasView();
-                var translate = nfCanvasUtils.translateCanvasView();
-
-                var mouseX = evt.pageX;
-                var mouseY = evt.pageY - nfCanvasUtils.getCanvasOffset();
-
-                // adjust the x and y coordinates accordingly
-                var x = (mouseX / scale) - (translate[0] / scale);
-                var y = (mouseY / scale) - (translate[1] / scale);
-
-                // record the paste origin
-                var pasteLocation = {
-                    x: x,
-                    y: y
-                };
-            }
-
-            // perform the paste
-            nfClipboard.paste().done(function (data) {
-                var copySnippet = $.Deferred(function (deferred) {
-                    var reject = function (xhr, status, error) {
-                        deferred.reject(xhr.responseText);
+    
+                // determine the origin of the bounding box of the selection
+              var origin = nfCanvasUtils.getOrigin(selection);
+    
+                // copy the snippet details
+              var parentGroupId = nfCanvasUtils.getGroupId();
+              nfClipboard.copy({
+                  snippet: nfSnippet.marshal(selection, parentGroupId),
+                    origin: origin
+                });
+            },
+    
+            /**
+             * Pastes the currently copied selection.
+             *
+             * @param {selection} selection     The selection containing the component to be copied
+             * @param {obj} evt                 The mouse event
+             */
+            paste: function (selection, evt) {
+              if (nfCommon.isDefinedAndNotNull(evt)) {
+                    // get the current scale and translation
+                  var scale = nfCanvasUtils.scaleCanvasView();
+                  var translate = nfCanvasUtils.translateCanvasView();
+    
+                    var mouseX = evt.pageX;
+                  var mouseY = evt.pageY - nfCanvasUtils.getCanvasOffset();
+    
+                    // adjust the x and y coordinates accordingly
+                    var x = (mouseX / scale) - (translate[0] / scale);
+                    var y = (mouseY / scale) - (translate[1] / scale);
+    
+                    // record the paste origin
+                    var pasteLocation = {
+                        x: x,
+                        y: y
                     };
-
-                    var destinationProcessGroupId = nfCanvasUtils.getGroupId();
-
-                    // create a snippet from the details
-                    nfSnippet.create(data['snippet']).done(function (createResponse) {
-                        // determine the origin of the bounding box of the copy
-                        var origin = pasteLocation;
-                        var snippetOrigin = data['origin'];
-
-                        // determine the appropriate origin
-                        if (!nfCommon.isDefinedAndNotNull(origin)) {
-                            snippetOrigin.x += 25;
-                            snippetOrigin.y += 25;
-                            origin = snippetOrigin;
-                        }
-
-                        // copy the snippet to the new location
-                        nfSnippet.copy(createResponse.snippet.id, origin, destinationProcessGroupId).done(function (copyResponse) {
-                            var snippetFlow = copyResponse.flow;
-
-                            // update the graph accordingly
-                            nfGraph.add(snippetFlow, {
-                                'selectAll': true
-                            });
-
-                            // update component visibility
-                            nfGraph.updateVisibility();
-
-                            // refresh the birdseye/toolbar
-                            nfBirdseye.refresh();
-                        }).fail(function () {
-                            // an error occured while performing the copy operation, reload the
-                            // graph in case it was a partial success
-                            nfCanvasUtils.reload().done(function () {
+                }
+    
+                // perform the paste
+              nfClipboard.paste().done(function (data) {
+                    var copySnippet = $.Deferred(function (deferred) {
+                        var reject = function (xhr, status, error) {
+                            deferred.reject(xhr.responseText);
+                        };
+    
+                      var destinationProcessGroupId = nfCanvasUtils.getGroupId();
+  
+                        // create a snippet from the details
+                      nfSnippet.create(data['snippet']).done(function (createResponse) {
+                            // determine the origin of the bounding box of the copy
+                            var origin = pasteLocation;
+                            var snippetOrigin = data['origin'];
+    
+                            // determine the appropriate origin
+                          if (!nfCommon.isDefinedAndNotNull(origin)) {
+                                snippetOrigin.x += 25;
+                                snippetOrigin.y += 25;
+                                origin = snippetOrigin;
+                            }
+    
+                            // copy the snippet to the new location
+                          nfSnippet.copy(createResponse.snippet.id, origin, destinationProcessGroupId).done(function (copyResponse) {
+                                var snippetFlow = copyResponse.flow;
+    
+                                // update the graph accordingly
+                              nfGraph.add(snippetFlow, {
+                                    'selectAll': true
+                                });
+    
                                 // update component visibility
-                                nfGraph.updateVisibility();
-
+                              nfGraph.updateVisibility();
+    
                                 // refresh the birdseye/toolbar
-                                nfBirdseye.refresh();
-                            });
+                              nfBirdseye.refresh();
+                            }).fail(function () {
+                                // an error occured while performing the copy operation, reload the
+                                // graph in case it was a partial success
+                              nfCanvasUtils.reload().done(function () {
+                                    // update component visibility
+                                  nfGraph.updateVisibility();
+    
+                                    // refresh the birdseye/toolbar
+                                  nfBirdseye.refresh();
+                                });
+                            }).fail(reject);
                         }).fail(reject);
-                    }).fail(reject);
-                }).promise();
-
-                // show the appropriate message is the copy fails
-                copySnippet.fail(function (responseText) {
-                    // look for a message
-                    var message = 'An error occurred while attempting to copy and paste.';
-                    if ($.trim(responseText) !== '') {
-                        message = responseText;
-                    }
-
-                    nfDialog.showOkDialog({
-                        headerText: 'Paste Error',
-                        dialogContent: nfCommon.escapeHtml(message)
+                    }).promise();
+    
+                    // show the appropriate message is the copy fails
+                    copySnippet.fail(function (responseText) {
+                        // look for a message
+                      var message = nf._.msg('nf-actions.Message12');
+                        if ($.trim(responseText) !== '') {
+                            message = responseText;
+                        }
+    
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-actions.Header6'),
+                          dialogContent: nfCommon.escapeHtml(message)
+                        });
                     });
                 });
-            });
-        },
-
-        /**
-         * Moves the connection in the specified selection to the front.
-         *
-         * @param {selection} selection
-         */
-        toFront: function (selection) {
-            if (selection.size() !== 1 || !nfCanvasUtils.isConnection(selection)) {
-                return;
-            }
-
-            // get the connection data
-            var connection = selection.datum();
-
-            // determine the current max zIndex
-            var maxZIndex = -1;
-            $.each(nfConnection.get(), function (_, otherConnection) {
-                if (connection.id !== otherConnection.id && otherConnection.zIndex > maxZIndex) {
-                    maxZIndex = otherConnection.zIndex;
+            },
+    
+            /**
+             * Moves the connection in the specified selection to the front.
+             *
+             * @param {selection} selection
+             */
+            toFront: function (selection) {
+              if (selection.size() !== 1 || !nfCanvasUtils.isConnection(selection)) {
+                    return;
                 }
-            });
-
-            // ensure the edge wasn't already in front
-            if (maxZIndex >= 0) {
-                // use one higher
-                var zIndex = maxZIndex + 1;
-
-                // build the connection entity
-                var connectionEntity = {
-                    'revision': nfClient.getRevision(connection),
-                    'component': {
-                        'id': connection.id,
-                        'zIndex': zIndex
+    
+                // get the connection data
+                var connection = selection.datum();
+    
+                // determine the current max zIndex
+                var maxZIndex = -1;
+              $.each(nfConnection.get(), function (_, otherConnection) {
+                    if (connection.id !== otherConnection.id && otherConnection.zIndex > maxZIndex) {
+                        maxZIndex = otherConnection.zIndex;
                     }
-                };
-
-                // update the edge in question
-                $.ajax({
-                    type: 'PUT',
-                    url: connection.uri,
-                    data: JSON.stringify(connectionEntity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    nfConnection.set(response);
                 });
+    
+                // ensure the edge wasn't already in front
+                if (maxZIndex >= 0) {
+                    // use one higher
+                    var zIndex = maxZIndex + 1;
+    
+                    // build the connection entity
+                    var connectionEntity = {
+                      'revision': nfClient.getRevision(connection),
+                        'component': {
+                            'id': connection.id,
+                            'zIndex': zIndex
+                        }
+                    };
+    
+                    // update the edge in question
+                    $.ajax({
+                        type: 'PUT',
+                        url: connection.uri,
+                        data: JSON.stringify(connectionEntity),
+                        dataType: 'json',
+                        contentType: 'application/json'
+                    }).done(function (response) {
+                      nfConnection.set(response);
+                    });
+                }
             }
-        }
-    };
-
-    return nfActions;
-}));
\ No newline at end of file
+        };
+    
+      return nfActions;
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
index 4fb31c9f4800..055157fd770c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
@@ -115,7 +115,7 @@
                     // refresh all component types as necessary (handle components that have been removed)
                     componentMap.forEach(function (type, ids) {
                         nfCanvasUtils.getComponentByType(type).remove(ids);
-                    });


+                    });
 
                     // refresh the birdseye
                     nfBirdseye.refresh();
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 ae9ebdc51e9e..50e47bc94cbd 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
@@ -1,424 +1,424 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-/**
- * Views state for a given component.
- */
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'Slick',
-                'nf.ClusterSummary',
-                'nf.ErrorHandler',
-                'nf.Dialog',
-                'nf.Common'],
-            function ($, Slick, nfClusterSummary, nfErrorHandler, nfDialog, nfCommon) {
-                return (nf.ComponentState = factory($, Slick, nfClusterSummary, nfErrorHandler, nfDialog, nfCommon));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ComponentState =
-            factory(require('jquery'),
-                require('Slick'),
-                require('nf.ClusterSummary'),
-                require('nf.ErrorHandler'),
-                require('nf.Dialog'),
-                require('nf.Common')));
-    } else {
-        nf.ComponentState = factory(root.$,
-            root.Slick,
-            root.nf.ClusterSummary,
-            root.nf.ErrorHandler,
-            root.nf.Dialog,
-            root.nf.Common);
-    }
-}(this, function ($, Slick, nfClusterSummary, nfErrorHandler, nfDialog, nfCommon) {
-    'use strict';
-
-    /**
-     * Filters the component state table.
-     */
-    var applyFilter = function () {
-        // get the dataview
-        var componentStateTable = $('#component-state-table').data('gridInstance');
-
-        // ensure the grid has been initialized
-        if (nfCommon.isDefinedAndNotNull(componentStateTable)) {
-            var componentStateData = componentStateTable.getData();
-
-            // update the search criteria
-            componentStateData.setFilterArgs({
-                searchString: getFilterText()
-            });
-            componentStateData.refresh();
-        }
-    };
-
-    /**
-     * Determines if the item matches the filter.
+    /*
+     * 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
      *
-     * @param {object} item     The item to filter
-     * @param {object} args     The filter criteria
-     * @returns {boolean}       Whether the item matches the filter
-     */
-    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;
-        }
-
-        // determine if the item matches the filter
-        var matchesKey = item['key'].search(filterExp) >= 0;
-        var matchesValue = item['value'].search(filterExp) >= 0;
-
-        // conditionally consider the scope
-        var matchesScope = false;
-        if (nfCommon.isDefinedAndNotNull(item['scope'])) {
-            matchesScope = item['scope'].search(filterExp) >= 0;
-        }
-
-        return matchesKey || matchesValue || matchesScope;
-    };
-
-    /**
-     * Sorts the specified data using the specified sort details.
+     *     http://www.apache.org/licenses/LICENSE-2.0
      *
-     * @param {object} sortDetails
-     * @param {object} data
-     */
-    var sort = function (sortDetails, data) {
-        // defines a function for sorting
-        var comparer = function (a, b) {
-            var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-            var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-            return aString === bString ? 0 : aString > bString ? 1 : -1;
-        };
-
-        // perform the sort
-        data.sort(comparer, sortDetails.sortAsc);
-    };
-
-    /**
-     * Get the text out of the filter field. If the filter field doesn't
-     * have any text it will contain the text 'filter list' so this method
-     * accounts for that.
-     */
-    var getFilterText = function () {
-        return $('#component-state-filter').val();
-    };
-
-    /**
-     * Clears the component state table.
+     * 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.
      */
-    var clearTable = function () {
-        var componentStateGrid = $('#component-state-table').data('gridInstance');
-        var componentStateData = componentStateGrid.getData();
-        componentStateData.setItems([]);
-
-        // hide the partial results details message
-        $('#component-state-partial-results-container').hide();
-
-        // clear the total number entries
-        $('#displayed-component-state-entries').text('0');
-        $('#total-component-state-entries').text('0');
-    };
-
+    
+  /* global define, module, require, exports */
+    
     /**
-     * Loads the table with the component state.
-     *
-     * @param {object} componentState
+     * Views state for a given component.
      */
-    var loadComponentState = function (localState, clusterState) {
-        var count = 0;
-        var totalEntries = 0;
-        var showPartialDetails = false;
-
-        var componentStateGrid = $('#component-state-table').data('gridInstance');
-        var componentStateData = componentStateGrid.getData();
-
-        // begin the update
-        componentStateData.beginUpdate();
-
-        // local state
-        if (nfCommon.isDefinedAndNotNull(localState)) {
-            $.each(localState.state, function (i, stateEntry) {
-                componentStateData.addItem($.extend({
-                    id: count++,
-                    scope: stateEntry.clusterNodeAddress
-                }, stateEntry));
-            });
-            totalEntries += localState.totalEntryCount;
-
-            if (nfCommon.isDefinedAndNotNull(localState.state) && localState.totalEntryCount !== localState.state.length) {
-                showPartialDetails = true;
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.ClusterSummary',
+                  'nf.ErrorHandler',
+                  'nf.Dialog',
+                  'nf.Common'],
+              function ($, Slick, nfClusterSummary, nfErrorHandler, nfDialog, nfCommon) {
+                  return (nf.ComponentState = factory($, Slick, nfClusterSummary, nfErrorHandler, nfDialog, nfCommon));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ComponentState =
+              factory(require('jquery'),
+                  require('Slick'),
+                  require('nf.ClusterSummary'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Dialog'),
+                  require('nf.Common')));
+      } else {
+          nf.ComponentState = factory(root.$,
+              root.Slick,
+              root.nf.ClusterSummary,
+              root.nf.ErrorHandler,
+              root.nf.Dialog,
+              root.nf.Common);
+      }
+  }(this, function ($, Slick, nfClusterSummary, nfErrorHandler, nfDialog, nfCommon) {
+      'use strict';
+    
+        /**
+         * Filters the component state table.
+         */
+        var applyFilter = function () {
+            // get the dataview
+            var componentStateTable = $('#component-state-table').data('gridInstance');
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(componentStateTable)) {
+                var componentStateData = componentStateTable.getData();
+    
+                // update the search criteria
+                componentStateData.setFilterArgs({
+                    searchString: getFilterText()
+                });
+                componentStateData.refresh();
             }
-        }
-
-        if (nfCommon.isDefinedAndNotNull(clusterState)) {
-            $.each(clusterState.state, function (i, stateEntry) {
-                componentStateData.addItem($.extend({
-                    id: count++,
-                    scope: 'Cluster'
-                }, stateEntry));
-            });
-            totalEntries += clusterState.totalEntryCount;
-
-            if (nfCommon.isDefinedAndNotNull(clusterState.state) && clusterState.totalEntryCount !== clusterState.state.length) {
-                showPartialDetails = true;
+        };
+    
+        /**
+         * Determines if the item matches the filter.
+         *
+         * @param {object} item     The item to filter
+         * @param {object} args     The filter criteria
+         * @returns {boolean}       Whether the item matches the filter
+         */
+        var filter = function (item, args) {
+            if (args.searchString === '') {
+                return true;
             }
-        }
-
-        // complete the update
-        componentStateData.endUpdate();
-        componentStateData.reSort();
-
-        if (showPartialDetails) {
-            $('#component-state-partial-results-container').show();
-        }
-
-        // update the total number of state entries
-        $('#total-component-state-entries').text(nfCommon.formatInteger(totalEntries));
-    };
-
-    /**
-     * Reset the dialog.
-     */
-    var resetDialog = function () {
-        // clear the fields
-        $('#component-state-name').text('');
-        $('#component-state-description').text('');
-
-        // clear any filter strings
-        $('#component-state-filter').val('');
-
-        // reset clear link
-        $('#clear-link').removeClass('disabled').attr('title', '');
-
-        // clear the table
-        clearTable();
-
-        // clear the component
-        $('#component-state-table').removeData('component');
-    };
-
-    return {
-        init: function () {
-            // intialize the component state filter
-            $('#component-state-filter').on('keyup', function () {
-                applyFilter();
-            });
-
-            // initialize the processor configuration dialog
-            $('#component-state-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: 'Component State',
-                buttons: [{
-                    buttonText: 'Close',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            $(this).modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        resetDialog();
-                    },
-                    resize: function () {
-                        $('#component-state-description')
-                            .width($('#component-state-dialog').find('.dialog-content').innerWidth() - 1)
-                            .text($('#component-state-description').attr('title'))
-                            .ellipsis();
-                    }
-                }
-            });
-
-            // clear state link
-            $('#clear-link').on('click', function () {
-                if ($(this).hasClass('disabled') === false) {
-                    var componentStateTable = $('#component-state-table');
-
-                    // ensure there is state to clear
-                    var componentStateGrid = componentStateTable.data('gridInstance');
-                    var stateEntryCount = componentStateGrid.getDataLength();
-
-                    if (stateEntryCount > 0) {
-                        var componentEntity = componentStateTable.data('component');
-                        $.ajax({
-                            type: 'POST',
-                            url: componentEntity.uri + '/state/clear-requests',
-                            dataType: 'json'
-                        }).done(function (response) {
-                            // clear the table
-                            clearTable();
-
-                            // reload the table with no state
-                            loadComponentState()
-                        }).fail(nfErrorHandler.handleAjaxError);
-                    } else {
-                        nfDialog.showOkDialog({
-                            headerText: 'Component State',
-                            dialogContent: 'This component has no state to clear.'
-                        });
-                    }
-                }
-            });
-
-            // 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
-                }
-            ];
-
-            // conditionally show the cluster node identifier
-            if (nfClusterSummary.isClustered()) {
-                componentStateColumns.push({
-                    id: 'scope',
-                    field: 'scope',
-                    name: 'Scope',
-                    sortable: true,
-                    resizable: true
-                });
+    
+            try {
+                // perform the row filtering
+                var filterExp = new RegExp(args.searchString, 'i');
+            } catch (e) {
+                // invalid regex
+                return false;
+            }
+    
+            // determine if the item matches the filter
+            var matchesKey = item['key'].search(filterExp) >= 0;
+            var matchesValue = item['value'].search(filterExp) >= 0;
+    
+            // conditionally consider the scope
+            var matchesScope = false;
+          if (nfCommon.isDefinedAndNotNull(item['scope'])) {
+                matchesScope = item['scope'].search(filterExp) >= 0;
             }
-
-            var componentStateOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: false,
-                enableColumnReorder: false,
-                autoEdit: false,
-                rowHeight: 24
+    
+            return matchesKey || matchesValue || matchesScope;
+        };
+    
+        /**
+         * Sorts the specified data using the specified sort details.
+         *
+         * @param {object} sortDetails
+         * @param {object} data
+         */
+        var sort = function (sortDetails, data) {
+            // defines a function for sorting
+            var comparer = function (a, b) {
+              var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+              var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                return aString === bString ? 0 : aString > bString ? 1 : -1;
             };
-
-            // initialize the dataview
-            var componentStateData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+        };
+    
+        /**
+         * Get the text out of the filter field. If the filter field doesn't
+         * have any text it will contain the text 'filter list' so this method
+         * accounts for that.
+         */
+        var getFilterText = function () {
+            return $('#component-state-filter').val();
+        };
+    
+        /**
+         * Clears the component state table.
+         */
+        var clearTable = function () {
+            var componentStateGrid = $('#component-state-table').data('gridInstance');
+            var componentStateData = componentStateGrid.getData();
             componentStateData.setItems([]);
-            componentStateData.setFilterArgs({
-                searchString: '',
-                property: 'key'
-            });
-            componentStateData.setFilter(filter);
-
-            // initialize the sort
-            sort({
-                columnId: 'key',
-                sortAsc: true
-            }, componentStateData);
-
-            // initialize the grid
-            var componentStateGrid = new Slick.Grid('#component-state-table', componentStateData, componentStateColumns, componentStateOptions);
-            componentStateGrid.setSelectionModel(new Slick.RowSelectionModel());
-            componentStateGrid.registerPlugin(new Slick.AutoTooltips());
-            componentStateGrid.setSortColumn('key', true);
-            componentStateGrid.onSort.subscribe(function (e, args) {
-                sort({
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, componentStateData);
-            });
-
-            // wire up the dataview to the grid
-            componentStateData.onRowCountChanged.subscribe(function (e, args) {
-                componentStateGrid.updateRowCount();
-                componentStateGrid.render();
-
-                // update the total number of displayed items
-                $('#displayed-component-state-entries').text(args.current);
-            });
-            componentStateData.onRowsChanged.subscribe(function (e, args) {
-                componentStateGrid.invalidateRows(args.rows);
-                componentStateGrid.render();
-            });
-
-            // hold onto an instance of the grid
-            $('#component-state-table').data('gridInstance', componentStateGrid);
-
-            // initialize the number of display items
+    
+            // hide the partial results details message
+            $('#component-state-partial-results-container').hide();
+    
+            // clear the total number entries
             $('#displayed-component-state-entries').text('0');
             $('#total-component-state-entries').text('0');
-        },
-
+        };
+    
         /**
-         * Shows the state for a given component.
+         * Loads the table with the component state.
          *
-         * @param {object} componentEntity
-         * @param {boolean} canClear
+         * @param {object} componentState
          */
-        showState: function (componentEntity, canClear) {
-            return $.ajax({
-                type: 'GET',
-                url: componentEntity.uri + '/state',
-                dataType: 'json'
-            }).done(function (response) {
-                var componentState = response.componentState;
-                var componentStateTable = $('#component-state-table');
-
-                // load the table
-                loadComponentState(componentState.localState, componentState.clusterState);
-
-                // show the dialog
-                $('#component-state-dialog').modal('show');
-
-                // populate the name/description
-                $('#component-state-name').text(componentEntity.component.name);
-                $('#component-state-description')
-                    .width($('#component-state-dialog').find('.dialog-content').innerWidth() - 1)
-                    .text(componentState.stateDescription)
-                    .ellipsis();
-
-                // store the component
-                componentStateTable.data('component', componentEntity);
-
-                // only activate the link when appropriate
-                if (canClear === false) {
-                    $('#clear-link').addClass('disabled').attr('title', 'Component state can only be cleared when the component is not actively running');
+        var loadComponentState = function (localState, clusterState) {
+            var count = 0;
+            var totalEntries = 0;
+            var showPartialDetails = false;
+    
+            var componentStateGrid = $('#component-state-table').data('gridInstance');
+            var componentStateData = componentStateGrid.getData();
+    
+            // begin the update
+            componentStateData.beginUpdate();
+    
+            // local state
+          if (nfCommon.isDefinedAndNotNull(localState)) {
+                $.each(localState.state, function (i, stateEntry) {
+                    componentStateData.addItem($.extend({
+                        id: count++,
+                        scope: stateEntry.clusterNodeAddress
+                    }, stateEntry));
+                });
+                totalEntries += localState.totalEntryCount;
+    
+              if (nfCommon.isDefinedAndNotNull(localState.state) && localState.totalEntryCount !== localState.state.length) {
+                    showPartialDetails = true;
+                }
+            }
+    
+          if (nfCommon.isDefinedAndNotNull(clusterState)) {
+                $.each(clusterState.state, function (i, stateEntry) {
+                    componentStateData.addItem($.extend({
+                        id: count++,
+                        scope: 'Cluster'
+                    }, stateEntry));
+                });
+                totalEntries += clusterState.totalEntryCount;
+    
+              if (nfCommon.isDefinedAndNotNull(clusterState.state) && clusterState.totalEntryCount !== clusterState.state.length) {
+                    showPartialDetails = true;
+                }
+            }
+    
+            // complete the update
+            componentStateData.endUpdate();
+            componentStateData.reSort();
+    
+            if (showPartialDetails) {
+                $('#component-state-partial-results-container').show();
+            }
+    
+            // update the total number of state entries
+          $('#total-component-state-entries').text(nfCommon.formatInteger(totalEntries));
+        };
+    
+        /**
+         * Reset the dialog.
+         */
+        var resetDialog = function () {
+            // clear the fields
+            $('#component-state-name').text('');
+            $('#component-state-description').text('');
+    
+            // clear any filter strings
+            $('#component-state-filter').val('');
+    
+            // reset clear link
+            $('#clear-link').removeClass('disabled').attr('title', '');
+    
+            // clear the table
+            clearTable();
+    
+            // clear the component
+            $('#component-state-table').removeData('component');
+        };
+    
+        return {
+            init: function () {
+                // intialize the component state filter
+                $('#component-state-filter').on('keyup', function () {
+                    applyFilter();
+                });
+    
+                // initialize the processor configuration dialog
+                $('#component-state-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                  headerText: nf._.msg('nf-component-state.Header1'),
+                    buttons: [{
+                      buttonText: nf._.msg('nf-component-state.Button1'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                $(this).modal('hide');
+                            }
+                        }
+                    }],
+                    handler: {
+                        close: function () {
+                            resetDialog();
+                      },
+                      resize: function () {
+                          $('#component-state-description')
+                              .width($('#component-state-dialog').find('.dialog-content').innerWidth() - 1)
+                              .text($('#component-state-description').attr('title'))
+                              .ellipsis();
+                        }
+                    }
+                });
+    
+                // clear state link
+                $('#clear-link').on('click', function () {
+                    if ($(this).hasClass('disabled') === false) {
+                        var componentStateTable = $('#component-state-table');
+    
+                        // ensure there is state to clear
+                        var componentStateGrid = componentStateTable.data('gridInstance');
+                        var stateEntryCount = componentStateGrid.getDataLength();
+    
+                        if (stateEntryCount > 0) {
+                            var componentEntity = componentStateTable.data('component');
+                            $.ajax({
+                                type: 'POST',
+                                url: componentEntity.uri + '/state/clear-requests',
+                                dataType: 'json'
+                            }).done(function (response) {
+                                // clear the table
+                                clearTable();
+    
+                                // reload the table with no state
+                                loadComponentState()
+                          }).fail(nfErrorHandler.handleAjaxError);
+                        } else {
+                          nfDialog.showOkDialog({
+                              headerText: nf._.msg('nf-component-state.Header1'),
+                              dialogContent: nf._.msg('nf-component-state.Content1')
+                            });
+                        }
+                    }
+                });
+    
+                // initialize the queue listing table
+                var componentStateColumns = [
+                  {
+                      id: 'key',
+                      field: 'key',
+                      name: nf._.msg('nf-component-state.Key'),
+                      sortable: true,
+                      resizable: true
+                  },
+                  {
+                      id: 'value',
+                      field: 'value',
+                      name: nf._.msg('nf-component-state.Value'),
+                      sortable: true,
+                      resizable: true
+                  }
+                ];
+    
+                // conditionally show the cluster node identifier
+              if (nfClusterSummary.isClustered()) {
+                    componentStateColumns.push({
+                        id: 'scope',
+                        field: 'scope',
+                      name: nf._.msg('nf-component-state.Scope'),
+                        sortable: true,
+                        resizable: true
+                    });
                 }
-
-                // reset the grid size
-                var componentStateGrid = componentStateTable.data('gridInstance');
-                componentStateGrid.resizeCanvas();
-            }).fail(nfErrorHandler.handleAjaxError);
-        }
-    };
-}));
\ No newline at end of file
+    
+                var componentStateOptions = {
+                    forceFitColumns: true,
+                    enableTextSelectionOnCells: true,
+                    enableCellNavigation: false,
+                    enableColumnReorder: false,
+                    autoEdit: false,
+                    rowHeight: 24
+                };
+    
+                // initialize the dataview
+                var componentStateData = new Slick.Data.DataView({
+                    inlineFilters: false
+                });
+                componentStateData.setItems([]);
+                componentStateData.setFilterArgs({
+                    searchString: '',
+                    property: 'key'
+                });
+                componentStateData.setFilter(filter);
+    
+                // initialize the sort
+                sort({
+                    columnId: 'key',
+                    sortAsc: true
+                }, componentStateData);
+    
+                // initialize the grid
+                var componentStateGrid = new Slick.Grid('#component-state-table', componentStateData, componentStateColumns, componentStateOptions);
+                componentStateGrid.setSelectionModel(new Slick.RowSelectionModel());
+                componentStateGrid.registerPlugin(new Slick.AutoTooltips());
+                componentStateGrid.setSortColumn('key', true);
+                componentStateGrid.onSort.subscribe(function (e, args) {
+                    sort({
+                        columnId: args.sortCol.field,
+                        sortAsc: args.sortAsc
+                    }, componentStateData);
+                });
+    
+                // wire up the dataview to the grid
+                componentStateData.onRowCountChanged.subscribe(function (e, args) {
+                    componentStateGrid.updateRowCount();
+                    componentStateGrid.render();
+    
+                    // update the total number of displayed items
+                    $('#displayed-component-state-entries').text(args.current);
+                });
+                componentStateData.onRowsChanged.subscribe(function (e, args) {
+                    componentStateGrid.invalidateRows(args.rows);
+                    componentStateGrid.render();
+                });
+    
+                // hold onto an instance of the grid
+                $('#component-state-table').data('gridInstance', componentStateGrid);
+    
+                // initialize the number of display items
+                $('#displayed-component-state-entries').text('0');
+                $('#total-component-state-entries').text('0');
+            },
+    
+            /**
+             * Shows the state for a given component.
+             *
+             * @param {object} componentEntity
+             * @param {boolean} canClear
+             */
+            showState: function (componentEntity, canClear) {
+                return $.ajax({
+                    type: 'GET',
+                    url: componentEntity.uri + '/state',
+                    dataType: 'json'
+                }).done(function (response) {
+                    var componentState = response.componentState;
+                    var componentStateTable = $('#component-state-table');
+    
+                    // load the table
+                    loadComponentState(componentState.localState, componentState.clusterState);
+    
+                  // show the dialog
+                  $('#component-state-dialog').modal('show');
+  
+                    // populate the name/description
+                    $('#component-state-name').text(componentEntity.component.name);
+                  $('#component-state-description')
+                      .width($('#component-state-dialog').find('.dialog-content').innerWidth() - 1)
+                      .text(componentState.stateDescription)
+                      .ellipsis();
+    
+                    // store the component
+                    componentStateTable.data('component', componentEntity);
+    
+                    // only activate the link when appropriate
+                    if (canClear === false) {
+                      $('#clear-link').addClass('disabled').attr('title', nf._.msg('nf-component-state.Message1'));
+                    }
+    
+                    // reset the grid size
+                    var componentStateGrid = componentStateTable.data('gridInstance');
+                    componentStateGrid.resizeCanvas();
+              }).fail(nfErrorHandler.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-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 364253608d41..148290a9a16b 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
@@ -1,104 +1,181 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.ErrorHandler',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.Client',
-                'nf.CanvasUtils',
-                'nf.Connection'],
-            function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfConnection) {
-                return (nf.ConnectionConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfConnection));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ConnectionConfiguration =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.ErrorHandler'),
-                require('nf.Common'),
-                require('nf.Dialog'),
-                require('nf.Client'),
-                require('nf.CanvasUtils'),
-                require('nf.Connection')));
-    } else {
-        nf.ConnectionConfiguration = factory(root.$,
-            root.d3,
-            root.nf.ErrorHandler,
-            root.nf.Common,
-            root.nf.Dialog,
-            root.nf.Client,
-            root.nf.CanvasUtils,
-            root.nf.Connection);
-    }
-}(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfConnection) {
-    'use strict';
-
-    var nfBirdseye;
-    var nfGraph;
-
-    var CONNECTION_OFFSET_Y_INCREMENT = 75;
-    var CONNECTION_OFFSET_X_INCREMENT = 200;
-
-    var config = {
-        urls: {
-            api: '../nifi-api',
-            prioritizers: '../nifi-api/flow/prioritizers'
-        }
-    };
-
-    /**
-     * Removes the temporary if necessary.
-     */
-    var removeTempEdge = function () {
-        d3.select('path.connector').remove();
-    };
-
-    /**
-     * Initializes the source in the new connection dialog.
+    /*
+     * 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
      *
-     * @argument {selection} source        The source
+     * 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.
      */
-    var initializeSourceNewConnectionDialog = function (source) {
-        // handle the selected source
-        if (nfCanvasUtils.isProcessor(source)) {
-            return $.Deferred(function (deferred) {
-                // initialize the source processor
-                initializeSourceProcessor(source).done(function (processor) {
-                    if (!nfCommon.isEmpty(processor.relationships)) {
-                        // populate the available connections
-                        $.each(processor.relationships, function (i, relationship) {
-                            createRelationshipOption(relationship.name);
-                        });
-
-                        // if there is a single relationship auto select
-                        var relationships = $('#relationship-names').children('div');
-                        if (relationships.length === 1) {
-                            relationships.children('div.available-relationship').removeClass('checkbox-unchecked').addClass('checkbox-checked');
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.Connection'],
+              function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfConnection) {
+                  return (nf.ConnectionConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfConnection));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ConnectionConfiguration =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.Connection')));
+      } else {
+          nf.ConnectionConfiguration = factory(root.$,
+              root.d3,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.Connection);
+      }
+  }(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfConnection) {
+      'use strict';
+  
+      var nfBirdseye;
+      var nfGraph;
+    
+        var CONNECTION_OFFSET_Y_INCREMENT = 75;
+        var CONNECTION_OFFSET_X_INCREMENT = 200;
+    
+        var config = {
+            urls: {
+                api: '../nifi-api',
+                prioritizers: '../nifi-api/flow/prioritizers'
+            }
+        };
+    
+        /**
+         * Removes the temporary if necessary.
+         */
+        var removeTempEdge = function () {
+            d3.select('path.connector').remove();
+        };
+    
+        /**
+         * Initializes the source in the new connection dialog.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceNewConnectionDialog = function (source) {
+            // handle the selected source
+          if (nfCanvasUtils.isProcessor(source)) {
+                return $.Deferred(function (deferred) {
+                    // initialize the source processor
+                    initializeSourceProcessor(source).done(function (processor) {
+                      if (!nfCommon.isEmpty(processor.relationships)) {
+                            // populate the available connections
+                            $.each(processor.relationships, function (i, relationship) {
+                                createRelationshipOption(relationship.name);
+                            });
+    
+                            // if there is a single relationship auto select
+                            var relationships = $('#relationship-names').children('div');
+                            if (relationships.length === 1) {
+                                relationships.children('div.available-relationship').removeClass('checkbox-unchecked').addClass('checkbox-checked');
+                            }
+    
+                            // configure the button model
+                            $('#connection-configuration').modal('setButtonModel', [{
+                              buttonText: nf._.msg('nf-connection-configuration.Add'),
+                                color: {
+                                    base: '#728E9B',
+                                    hover: '#004849',
+                                    text: '#ffffff'
+                                },
+                                handler: {
+                                    click: function () {
+                                        // get the selected relationships
+                                        var selectedRelationships = getSelectedRelationships();
+    
+                                        // ensure some relationships were selected
+                                        if (selectedRelationships.length > 0) {
+                                            addConnection(selectedRelationships);
+                                        } else {
+                                            // inform users that no relationships were selected
+                                          nfDialog.showOkDialog({
+                                              headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                                              dialogContent: nf._.msg('nf-connection-configuration.Message0')
+                                            });
+                                        }
+    
+                                        // close the dialog
+                                        $('#connection-configuration').modal('hide');
+                                    }
+                                }
+                            },
+                                {
+                                  buttonText: nf._.msg('nf-connection-configuration.Cancel'),
+                                    color: {
+                                        base: '#E3E8EB',
+                                        hover: '#C7D2D7',
+                                        text: '#004849'
+                                    },
+                                    handler: {
+                                        click: function () {
+                                            $('#connection-configuration').modal('hide');
+                                        }
+                                    }
+                                }]);
+    
+                            // resolve the deferred
+                            deferred.resolve();
+                        } else {
+                            // there are no relationships for this processor
+                          nfDialog.showOkDialog({
+                              headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                              dialogContent: '\'' + nfCommon.escapeHtml(processor.name) + nf._.msg('nf-connection-configuration.Message1')
+                            });
+    
+                            // reset the dialog
+                            resetDialog();
+    
+                            deferred.reject();
                         }
-
+                    }).fail(function () {
+                        deferred.reject();
+                    });
+                }).promise();
+            } else {
+                return $.Deferred(function (deferred) {
+                    // determine how to initialize the source
+                    var connectionSourceDeferred;
+                  if (nfCanvasUtils.isInputPort(source)) {
+                        connectionSourceDeferred = initializeSourceInputPort(source);
+                  } else if (nfCanvasUtils.isRemoteProcessGroup(source)) {
+                        connectionSourceDeferred = initializeSourceRemoteProcessGroup(source);
+                  } else if (nfCanvasUtils.isProcessGroup(source)) {
+                        connectionSourceDeferred = initializeSourceProcessGroup(source);
+                    } else {
+                        connectionSourceDeferred = initializeSourceFunnel(source);
+                    }
+    
+                    // finish initialization when appropriate
+                    connectionSourceDeferred.done(function () {
                         // configure the button model
                         $('#connection-configuration').modal('setButtonModel', [{
-                            buttonText: 'Add',
+                          buttonText: nf._.msg('nf-connection-configuration.Add'),
                             color: {
                                 base: '#728E9B',
                                 hover: '#004849',
@@ -106,27 +183,16 @@
                             },
                             handler: {
                                 click: function () {
-                                    // get the selected relationships
-                                    var selectedRelationships = getSelectedRelationships();
-
-                                    // ensure some relationships were selected
-                                    if (selectedRelationships.length > 0) {
-                                        addConnection(selectedRelationships);
-                                    } else {
-                                        // inform users that no relationships were selected
-                                        nfDialog.showOkDialog({
-                                            headerText: 'Connection Configuration',
-                                            dialogContent: 'The connection must have at least one relationship selected.'
-                                        });
-                                    }
-
+                                    // add the connection
+                                    addConnection();
+    
                                     // close the dialog
                                     $('#connection-configuration').modal('hide');
                                 }
                             }
                         },
                             {
-                                buttonText: 'Cancel',
+                              buttonText: nf._.msg('nf-connection-configuration.Cancel'),
                                 color: {
                                     base: '#E3E8EB',
                                     hover: '#C7D2D7',
@@ -138,1335 +204,1269 @@
                                     }
                                 }
                             }]);
-
-                        // resolve the deferred
+    
+                        deferred.resolve();
+                    }).fail(function () {
+                        deferred.reject();
+                    });
+                }).promise();
+            }
+        };
+    
+        /**
+         * Initializes the source when the source is an input port.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceInputPort = function (source) {
+            return $.Deferred(function (deferred) {
+                // get the input port data
+                var inputPortData = source.datum();
+                var inputPortName = inputPortData.permissions.canRead ? inputPortData.component.name : inputPortData.id;
+    
+                // populate the port information
+                $('#input-port-source').show();
+              $('#input-port-source-name').text(inputPortName).attr('title', inputPortName);
+    
+                // populate the connection source details
+                $('#connection-source-id').val(inputPortData.id);
+                $('#connection-source-component-id').val(inputPortData.id);
+    
+                // populate the group details
+              $('#connection-source-group-id').val(nfCanvasUtils.getGroupId());
+              $('#connection-source-group-name').text(nfCanvasUtils.getGroupName());
+    
+                // resolve the deferred
+                deferred.resolve();
+            }).promise();
+        };
+    
+        /**
+         * Initializes the source when the source is an input port.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceFunnel = function (source) {
+            return $.Deferred(function (deferred) {
+                // get the funnel data
+                var funnelData = source.datum();
+    
+                // populate the port information
+                $('#funnel-source').show();
+    
+                // populate the connection source details
+                $('#connection-source-id').val(funnelData.id);
+                $('#connection-source-component-id').val(funnelData.id);
+    
+                // populate the group details
+              $('#connection-source-group-id').val(nfCanvasUtils.getGroupId());
+              $('#connection-source-group-name').text(nfCanvasUtils.getGroupName());
+    
+                // resolve the deferred
+                deferred.resolve();
+            }).promise();
+        };
+    
+        /**
+         * Initializes the source when the source is a processor.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceProcessor = function (source) {
+            return $.Deferred(function (deferred) {
+                // get the processor data
+                var processorData = source.datum();
+                var processorName = processorData.permissions.canRead ? processorData.component.name : processorData.id;
+              var processorType = processorData.permissions.canRead ? nfCommon.substringAfterLast(processorData.component.type, '.') : 'Processor';
+    
+                // populate the source processor information
+                $('#processor-source').show();
+              $('#processor-source-name').text(processorName).attr('title', processorName);
+              $('#processor-source-type').text(processorType).attr('title', processorType);
+    
+                // populate the connection source details
+                $('#connection-source-id').val(processorData.id);
+                $('#connection-source-component-id').val(processorData.id);
+    
+                // populate the group details
+              $('#connection-source-group-id').val(nfCanvasUtils.getGroupId());
+              $('#connection-source-group-name').text(nfCanvasUtils.getGroupName());
+    
+                // show the available relationships
+                $('#relationship-names-container').show();
+    
+                deferred.resolve(processorData.component);
+            });
+        };
+    
+        /**
+         * Initializes the source when the source is a process group.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceProcessGroup = function (source) {
+            return $.Deferred(function (deferred) {
+                // get the process group data
+                var processGroupData = source.datum();
+    
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupData.id),
+                    dataType: 'json'
+                }).done(function (response) {
+                    var processGroup = response.processGroupFlow;
+                    var processGroupName = response.permissions.canRead ? processGroup.breadcrumb.breadcrumb.name : processGroup.id;
+                    var processGroupContents = processGroup.flow;
+    
+                    // show the output port options
+                    var options = [];
+                    $.each(processGroupContents.outputPorts, function (i, outputPort) {
+                        // require explicit access to the output port as it's the source of the connection
+                        if (outputPort.permissions.canRead && outputPort.permissions.canWrite) {
+                            var component = outputPort.component;
+                            options.push({
+                                text: component.name,
+                                value: component.id,
+                              description: nfCommon.escapeHtml(component.comments)
+                            });
+                        }
+                    });
+    
+                    // only proceed if there are output ports
+                  if (!nfCommon.isEmpty(options)) {
+                        $('#output-port-source').show();
+    
+                        // sort the options
+                        options.sort(function (a, b) {
+                            return a.text.localeCompare(b.text);
+                        });
+    
+                        // create the combo
+                        $('#output-port-options').combo({
+                            options: options,
+                            maxHeight: 300,
+                            select: function (option) {
+                                $('#connection-source-id').val(option.value);
+                            }
+                        });
+    
+                        // populate the connection details
+                        $('#connection-source-component-id').val(processGroup.id);
+    
+                        // populate the group details
+                        $('#connection-source-group-id').val(processGroup.id);
+                        $('#connection-source-group-name').text(processGroupName);
+    
                         deferred.resolve();
                     } else {
-                        // there are no relationships for this processor
-                        nfDialog.showOkDialog({
-                            headerText: 'Connection Configuration',
-                            dialogContent: '\'' + nfCommon.escapeHtml(processor.name) + '\' does not support any relationships.'
+                      var message = '\'' + nfCommon.escapeHtml(processGroupName) + nf._.msg('nf-connection-configuration.Message2');
+                      if (nfCommon.isEmpty(processGroupContents.outputPorts) === false) {
+                          message = nf._.msg('nf-connection-configuration.Message5') + nf.Common.escapeHtml(processGroupName) + '\'.';
+                        }
+    
+                        // there are no output ports for this process group
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                            dialogContent: message
                         });
-
+    
                         // reset the dialog
                         resetDialog();
-
+    
                         deferred.reject();
                     }
-                }).fail(function () {
+                }).fail(function (xhr, status, error) {
+                    // handle the error
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+    
                     deferred.reject();
                 });
             }).promise();
-        } else {
+        };
+    
+        /**
+         * Initializes the source when the source is a remote process group.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceRemoteProcessGroup = function (source) {
             return $.Deferred(function (deferred) {
-                // determine how to initialize the source
-                var connectionSourceDeferred;
-                if (nfCanvasUtils.isInputPort(source)) {
-                    connectionSourceDeferred = initializeSourceInputPort(source);
-                } else if (nfCanvasUtils.isRemoteProcessGroup(source)) {
-                    connectionSourceDeferred = initializeSourceRemoteProcessGroup(source);
-                } else if (nfCanvasUtils.isProcessGroup(source)) {
-                    connectionSourceDeferred = initializeSourceProcessGroup(source);
-                } else {
-                    connectionSourceDeferred = initializeSourceFunnel(source);
-                }
-
-                // finish initialization when appropriate
-                connectionSourceDeferred.done(function () {
-                    // configure the button model
-                    $('#connection-configuration').modal('setButtonModel', [{
-                        buttonText: 'Add',
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                // add the connection
-                                addConnection();
-
-                                // close the dialog
-                                $('#connection-configuration').modal('hide');
-                            }
-                        }
-                    },
-                        {
-                            buttonText: 'Cancel',
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                    $('#connection-configuration').modal('hide');
-                                }
+                // get the remote process group data
+                var remoteProcessGroupData = source.datum();
+    
+                $.ajax({
+                    type: 'GET',
+                    url: remoteProcessGroupData.uri,
+                    dataType: 'json'
+                }).done(function (response) {
+                    var remoteProcessGroup = response.component;
+                    var remoteProcessGroupContents = remoteProcessGroup.contents;
+    
+                    // only proceed if there are output ports
+                  if (!nfCommon.isEmpty(remoteProcessGroupContents.outputPorts)) {
+                        $('#output-port-source').show();
+    
+                        // show the output port options
+                        var options = [];
+                        $.each(remoteProcessGroupContents.outputPorts, function (i, outputPort) {
+                            options.push({
+                                text: outputPort.name,
+                                value: outputPort.id,
+                                disabled: outputPort.exists === false,
+                              description: nfCommon.escapeHtml(outputPort.comments)
+                            });
+                        });
+    
+                        // sort the options
+                        options.sort(function (a, b) {
+                            return a.text.localeCompare(b.text);
+                        });
+    
+                        // create the combo
+                        $('#output-port-options').combo({
+                            options: options,
+                            maxHeight: 300,
+                            select: function (option) {
+                                $('#connection-source-id').val(option.value);
                             }
-                        }]);
-
-                    deferred.resolve();
-                }).fail(function () {
-                    deferred.reject();
-                });
-            }).promise();
-        }
-    };
-
-    /**
-     * Initializes the source when the source is an input port.
-     *
-     * @argument {selection} source        The source
-     */
-    var initializeSourceInputPort = function (source) {
-        return $.Deferred(function (deferred) {
-            // get the input port data
-            var inputPortData = source.datum();
-            var inputPortName = inputPortData.permissions.canRead ? inputPortData.component.name : inputPortData.id;
-
-            // populate the port information
-            $('#input-port-source').show();
-            $('#input-port-source-name').text(inputPortName).attr('title', inputPortName);
-
-            // populate the connection source details
-            $('#connection-source-id').val(inputPortData.id);
-            $('#connection-source-component-id').val(inputPortData.id);
-
-            // populate the group details
-            $('#connection-source-group-id').val(nfCanvasUtils.getGroupId());
-            $('#connection-source-group-name').text(nfCanvasUtils.getGroupName());
-
-            // resolve the deferred
-            deferred.resolve();
-        }).promise();
-    };
-
-    /**
-     * Initializes the source when the source is an input port.
-     *
-     * @argument {selection} source        The source
-     */
-    var initializeSourceFunnel = function (source) {
-        return $.Deferred(function (deferred) {
-            // get the funnel data
-            var funnelData = source.datum();
-
-            // populate the port information
-            $('#funnel-source').show();
-
-            // populate the connection source details
-            $('#connection-source-id').val(funnelData.id);
-            $('#connection-source-component-id').val(funnelData.id);
-
-            // populate the group details
-            $('#connection-source-group-id').val(nfCanvasUtils.getGroupId());
-            $('#connection-source-group-name').text(nfCanvasUtils.getGroupName());
-
-            // resolve the deferred
-            deferred.resolve();
-        }).promise();
-    };
-
-    /**
-     * Initializes the source when the source is a processor.
-     *
-     * @argument {selection} source        The source
-     */
-    var initializeSourceProcessor = function (source) {
-        return $.Deferred(function (deferred) {
-            // get the processor data
-            var processorData = source.datum();
-            var processorName = processorData.permissions.canRead ? processorData.component.name : processorData.id;
-            var processorType = processorData.permissions.canRead ? nfCommon.substringAfterLast(processorData.component.type, '.') : 'Processor';
-
-            // populate the source processor information
-            $('#processor-source').show();
-            $('#processor-source-name').text(processorName).attr('title', processorName);
-            $('#processor-source-type').text(processorType).attr('title', processorType);
-
-            // populate the connection source details
-            $('#connection-source-id').val(processorData.id);
-            $('#connection-source-component-id').val(processorData.id);
-
-            // populate the group details
-            $('#connection-source-group-id').val(nfCanvasUtils.getGroupId());
-            $('#connection-source-group-name').text(nfCanvasUtils.getGroupName());
-
-            // show the available relationships
-            $('#relationship-names-container').show();
-
-            deferred.resolve(processorData.component);
-        });
-    };
-
-    /**
-     * Initializes the source when the source is a process group.
-     *
-     * @argument {selection} source        The source
-     */
-    var initializeSourceProcessGroup = function (source) {
-        return $.Deferred(function (deferred) {
-            // get the process group data
-            var processGroupData = source.datum();
-
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupData.id),
-                dataType: 'json'
-            }).done(function (response) {
-                var processGroup = response.processGroupFlow;
-                var processGroupName = response.permissions.canRead ? processGroup.breadcrumb.breadcrumb.name : processGroup.id;
-                var processGroupContents = processGroup.flow;
-
-                // show the output port options
-                var options = [];
-                $.each(processGroupContents.outputPorts, function (i, outputPort) {
-                    // require explicit access to the output port as it's the source of the connection
-                    if (outputPort.permissions.canRead && outputPort.permissions.canWrite) {
-                        var component = outputPort.component;
-                        options.push({
-                            text: component.name,
-                            value: component.id,
-                            description: nfCommon.escapeHtml(component.comments)
                         });
-                    }
-                });
-
-                // only proceed if there are output ports
-                if (!nfCommon.isEmpty(options)) {
-                    $('#output-port-source').show();
-
-                    // sort the options
-                    options.sort(function (a, b) {
-                        return a.text.localeCompare(b.text);
-                    });
-
-                    // create the combo
-                    $('#output-port-options').combo({
-                        options: options,
-                        maxHeight: 300,
-                        select: function (option) {
-                            $('#connection-source-id').val(option.value);
-                        }
-                    });
-
-                    // populate the connection details
-                    $('#connection-source-component-id').val(processGroup.id);
-
-                    // populate the group details
-                    $('#connection-source-group-id').val(processGroup.id);
-                    $('#connection-source-group-name').text(processGroupName);
-
-                    deferred.resolve();
-                } else {
-                    var message = '\'' + nfCommon.escapeHtml(processGroupName) + '\' does not have any output ports.';
-                    if (nfCommon.isEmpty(processGroupContents.outputPorts) === false) {
-                        message = 'Not authorized for any output ports in \'' + nfCommon.escapeHtml(processGroupName) + '\'.';
-                    }
-
-                    // there are no output ports for this process group
-                    nfDialog.showOkDialog({
-                        headerText: 'Connection Configuration',
-                        dialogContent: message
-                    });
-
-                    // reset the dialog
-                    resetDialog();
-
-                    deferred.reject();
-                }
-            }).fail(function (xhr, status, error) {
-                // handle the error
-                nfErrorHandler.handleAjaxError(xhr, status, error);
-
-                deferred.reject();
-            });
-        }).promise();
-    };
-
-    /**
-     * Initializes the source when the source is a remote process group.
-     *
-     * @argument {selection} source        The source
-     */
-    var initializeSourceRemoteProcessGroup = function (source) {
-        return $.Deferred(function (deferred) {
-            // get the remote process group data
-            var remoteProcessGroupData = source.datum();
-
-            $.ajax({
-                type: 'GET',
-                url: remoteProcessGroupData.uri,
-                dataType: 'json'
-            }).done(function (response) {
-                var remoteProcessGroup = response.component;
-                var remoteProcessGroupContents = remoteProcessGroup.contents;
-
-                // only proceed if there are output ports
-                if (!nfCommon.isEmpty(remoteProcessGroupContents.outputPorts)) {
-                    $('#output-port-source').show();
-
-                    // show the output port options
-                    var options = [];
-                    $.each(remoteProcessGroupContents.outputPorts, function (i, outputPort) {
-                        options.push({
-                            text: outputPort.name,
-                            value: outputPort.id,
-                            disabled: outputPort.exists === false,
-                            description: nfCommon.escapeHtml(outputPort.comments)
+    
+                        // populate the connection details
+                        $('#connection-source-component-id').val(remoteProcessGroup.id);
+    
+                        // populate the group details
+                        $('#connection-source-group-id').val(remoteProcessGroup.id);
+                        $('#connection-source-group-name').text(remoteProcessGroup.name);
+    
+                        deferred.resolve();
+                    } else {
+                        // there are no relationships for this processor
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                          dialogContent: '\'' + nfCommon.escapeHtml(remoteProcessGroup.name) + nf._.msg('nf-connection-configuration.Message2')
                         });
-                    });
-
-                    // sort the options
-                    options.sort(function (a, b) {
-                        return a.text.localeCompare(b.text);
-                    });
-
-                    // create the combo
-                    $('#output-port-options').combo({
-                        options: options,
-                        maxHeight: 300,
-                        select: function (option) {
-                            $('#connection-source-id').val(option.value);
-                        }
-                    });
-
-                    // populate the connection details
-                    $('#connection-source-component-id').val(remoteProcessGroup.id);
-
-                    // populate the group details
-                    $('#connection-source-group-id').val(remoteProcessGroup.id);
-                    $('#connection-source-group-name').text(remoteProcessGroup.name);
-
-                    deferred.resolve();
-                } else {
-                    // there are no relationships for this processor
-                    nfDialog.showOkDialog({
-                        headerText: 'Connection Configuration',
-                        dialogContent: '\'' + nfCommon.escapeHtml(remoteProcessGroup.name) + '\' does not have any output ports.'
-                    });
-
-                    // reset the dialog
-                    resetDialog();
-
+    
+                        // reset the dialog
+                        resetDialog();
+    
+                        deferred.reject();
+                    }
+                }).fail(function (xhr, status, error) {
+                    // handle the error
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+    
                     deferred.reject();
-                }
-            }).fail(function (xhr, status, error) {
-                // handle the error
-                nfErrorHandler.handleAjaxError(xhr, status, error);
-
-                deferred.reject();
-            });
-        }).promise();
-    };
-
-    var initializeDestinationNewConnectionDialog = function (destination) {
-        if (nfCanvasUtils.isOutputPort(destination)) {
-            return initializeDestinationOutputPort(destination);
-        } else if (nfCanvasUtils.isProcessor(destination)) {
-            return initializeDestinationProcessor(destination);
-        } else if (nfCanvasUtils.isRemoteProcessGroup(destination)) {
-            return initializeDestinationRemoteProcessGroup(destination);
-        } else if (nfCanvasUtils.isFunnel(destination)) {
-            return initializeDestinationFunnel(destination);
-        } else {
-            return initializeDestinationProcessGroup(destination);
-        }
-    };
-
-    var initializeDestinationOutputPort = function (destination) {
-        return $.Deferred(function (deferred) {
-            var outputPortData = destination.datum();
-            var outputPortName = outputPortData.permissions.canRead ? outputPortData.component.name : outputPortData.id;
-
-            $('#output-port-destination').show();
-            $('#output-port-destination-name').text(outputPortName).attr('title', outputPortName);
-
-            // populate the connection destination details
-            $('#connection-destination-id').val(outputPortData.id);
-            $('#connection-destination-component-id').val(outputPortData.id);
-
-            // populate the group details
-            $('#connection-destination-group-id').val(nfCanvasUtils.getGroupId());
-            $('#connection-destination-group-name').text(nfCanvasUtils.getGroupName());
-
-            deferred.resolve();
-        }).promise();
-    };
-
-    var initializeDestinationFunnel = function (destination) {
-        return $.Deferred(function (deferred) {
-            var funnelData = destination.datum();
-
-            $('#funnel-destination').show();
-
-            // populate the connection destination details
-            $('#connection-destination-id').val(funnelData.id);
-            $('#connection-destination-component-id').val(funnelData.id);
-
-            // populate the group details
-            $('#connection-destination-group-id').val(nfCanvasUtils.getGroupId());
-            $('#connection-destination-group-name').text(nfCanvasUtils.getGroupName());
-
-            deferred.resolve();
-        }).promise();
-    };
-
-    var initializeDestinationProcessor = function (destination) {
-        return $.Deferred(function (deferred) {
-            var processorData = destination.datum();
-            var processorName = processorData.permissions.canRead ? processorData.component.name : processorData.id;
-            var processorType = processorData.permissions.canRead ? nfCommon.substringAfterLast(processorData.component.type, '.') : 'Processor';
-
-            $('#processor-destination').show();
-            $('#processor-destination-name').text(processorName).attr('title', processorName);
-            $('#processor-destination-type').text(processorType).attr('title', processorType);
-
-            // populate the connection destination details
-            $('#connection-destination-id').val(processorData.id);
-            $('#connection-destination-component-id').val(processorData.id);
-
-            // populate the group details
-            $('#connection-destination-group-id').val(nfCanvasUtils.getGroupId());
-            $('#connection-destination-group-name').text(nfCanvasUtils.getGroupName());
-
-            deferred.resolve();
-        }).promise();
-    };
-
-    /**
-     * Initializes the destination when the destination is a process group.
-     *
-     * @argument {selection} destination        The destination
-     */
-    var initializeDestinationProcessGroup = function (destination) {
-        return $.Deferred(function (deferred) {
-            var processGroupData = destination.datum();
-
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupData.id),
-                dataType: 'json'
-            }).done(function (response) {
-                var processGroup = response.processGroupFlow;
-                var processGroupName = response.permissions.canRead ? processGroup.breadcrumb.breadcrumb.name : processGroup.id;
-                var processGroupContents = processGroup.flow;
-
-                // show the input port options
-                var options = [];
-                $.each(processGroupContents.inputPorts, function (i, inputPort) {
-                    options.push({
-                        text: inputPort.permissions.canRead ? inputPort.component.name : inputPort.id,
-                        value: inputPort.id,
-                        description: inputPort.permissions.canRead ? nfCommon.escapeHtml(inputPort.component.comments) : null
-                    });
                 });
-
-                // only proceed if there are output ports
-                if (!nfCommon.isEmpty(options)) {
-                    $('#input-port-destination').show();
-
-                    // sort the options
-                    options.sort(function (a, b) {
-                        return a.text.localeCompare(b.text);
-                    });
-
-                    // create the combo
-                    $('#input-port-options').combo({
-                        options: options,
-                        maxHeight: 300,
-                        select: function (option) {
-                            $('#connection-destination-id').val(option.value);
-                        }
-                    });
-
-                    // populate the connection details
-                    $('#connection-destination-component-id').val(processGroup.id);
-
-                    // populate the group details
-                    $('#connection-destination-group-id').val(processGroup.id);
-                    $('#connection-destination-group-name').text(processGroupName);
-
-                    deferred.resolve();
-                } else {
-                    // there are no relationships for this processor
-                    nfDialog.showOkDialog({
-                        headerText: 'Connection Configuration',
-                        dialogContent: '\'' + nfCommon.escapeHtml(processGroupName) + '\' does not have any input ports.'
-                    });
-
-                    // reset the dialog
-                    resetDialog();
-
-                    deferred.reject();
-                }
-            }).fail(function (xhr, status, error) {
-                // handle the error
-                nfErrorHandler.handleAjaxError(xhr, status, error);
-
-                deferred.reject();
-            });
-        }).promise();
-    };
-
-    /**
-     * Initializes the source when the source is a remote process group.
-     *
-     * @argument {selection} destination        The destination
-     * @argument {object} connectionDestination The connection destination object
-     */
-    var initializeDestinationRemoteProcessGroup = function (destination, connectionDestination) {
-        return $.Deferred(function (deferred) {
-            var remoteProcessGroupData = destination.datum();
-
-            $.ajax({
-                type: 'GET',
-                url: remoteProcessGroupData.uri,
-                dataType: 'json'
-            }).done(function (response) {
-                var remoteProcessGroup = response.component;
-                var remoteProcessGroupContents = remoteProcessGroup.contents;
-
-                // only proceed if there are output ports
-                if (!nfCommon.isEmpty(remoteProcessGroupContents.inputPorts)) {
-                    $('#input-port-destination').show();
-
+            }).promise();
+        };
+    
+        var initializeDestinationNewConnectionDialog = function (destination) {
+          if (nfCanvasUtils.isOutputPort(destination)) {
+                return initializeDestinationOutputPort(destination);
+          } else if (nfCanvasUtils.isProcessor(destination)) {
+                return initializeDestinationProcessor(destination);
+          } else if (nfCanvasUtils.isRemoteProcessGroup(destination)) {
+                return initializeDestinationRemoteProcessGroup(destination);
+          } else if (nfCanvasUtils.isFunnel(destination)) {
+                return initializeDestinationFunnel(destination);
+            } else {
+                return initializeDestinationProcessGroup(destination);
+            }
+        };
+    
+        var initializeDestinationOutputPort = function (destination) {
+            return $.Deferred(function (deferred) {
+                var outputPortData = destination.datum();
+                var outputPortName = outputPortData.permissions.canRead ? outputPortData.component.name : outputPortData.id;
+    
+                $('#output-port-destination').show();
+              $('#output-port-destination-name').text(outputPortName).attr('title', outputPortName);
+    
+                // populate the connection destination details
+                $('#connection-destination-id').val(outputPortData.id);
+                $('#connection-destination-component-id').val(outputPortData.id);
+    
+                // populate the group details
+              $('#connection-destination-group-id').val(nfCanvasUtils.getGroupId());
+              $('#connection-destination-group-name').text(nfCanvasUtils.getGroupName());
+    
+                deferred.resolve();
+            }).promise();
+        };
+    
+        var initializeDestinationFunnel = function (destination) {
+            return $.Deferred(function (deferred) {
+                var funnelData = destination.datum();
+    
+                $('#funnel-destination').show();
+    
+                // populate the connection destination details
+                $('#connection-destination-id').val(funnelData.id);
+                $('#connection-destination-component-id').val(funnelData.id);
+    
+                // populate the group details
+              $('#connection-destination-group-id').val(nfCanvasUtils.getGroupId());
+              $('#connection-destination-group-name').text(nfCanvasUtils.getGroupName());
+    
+                deferred.resolve();
+            }).promise();
+        };
+    
+        var initializeDestinationProcessor = function (destination) {
+            return $.Deferred(function (deferred) {
+                var processorData = destination.datum();
+                var processorName = processorData.permissions.canRead ? processorData.component.name : processorData.id;
+              var processorType = processorData.permissions.canRead ? nfCommon.substringAfterLast(processorData.component.type, '.') : 'Processor';
+    
+                $('#processor-destination').show();
+              $('#processor-destination-name').text(processorName).attr('title', processorName);
+              $('#processor-destination-type').text(processorType).attr('title', processorType);
+    
+                // populate the connection destination details
+                $('#connection-destination-id').val(processorData.id);
+                $('#connection-destination-component-id').val(processorData.id);
+    
+                // populate the group details
+              $('#connection-destination-group-id').val(nfCanvasUtils.getGroupId());
+              $('#connection-destination-group-name').text(nfCanvasUtils.getGroupName());
+    
+                deferred.resolve();
+            }).promise();
+        };
+    
+        /**
+         * Initializes the destination when the destination is a process group.
+         *
+         * @argument {selection} destination        The destination
+         */
+        var initializeDestinationProcessGroup = function (destination) {
+            return $.Deferred(function (deferred) {
+                var processGroupData = destination.datum();
+    
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupData.id),
+                    dataType: 'json'
+                }).done(function (response) {
+                    var processGroup = response.processGroupFlow;
+                    var processGroupName = response.permissions.canRead ? processGroup.breadcrumb.breadcrumb.name : processGroup.id;
+                    var processGroupContents = processGroup.flow;
+    
                     // show the input port options
                     var options = [];
-                    $.each(remoteProcessGroupContents.inputPorts, function (i, inputPort) {
+                    $.each(processGroupContents.inputPorts, function (i, inputPort) {
                         options.push({
-                            text: inputPort.name,
+                            text: inputPort.permissions.canRead ? inputPort.component.name : inputPort.id,
                             value: inputPort.id,
-                            disabled: inputPort.exists === false,
-                            description: nfCommon.escapeHtml(inputPort.comments)
+                          description: inputPort.permissions.canRead ? nfCommon.escapeHtml(inputPort.component.comments) : null
                         });
                     });
-
-                    // sort the options
-                    options.sort(function (a, b) {
-                        return a.text.localeCompare(b.text);
-                    });
-
-                    // create the combo
-                    $('#input-port-options').combo({
-                        options: options,
-                        maxHeight: 300,
-                        select: function (option) {
-                            $('#connection-destination-id').val(option.value);
-                        }
-                    });
-
-                    // populate the connection details
-                    $('#connection-destination-component-id').val(remoteProcessGroup.id);
-
-                    // populate the group details
-                    $('#connection-destination-group-id').val(remoteProcessGroup.id);
-                    $('#connection-destination-group-name').text(remoteProcessGroup.name);
-
-                    deferred.resolve();
-                } else {
-                    // there are no relationships for this processor
-                    nfDialog.showOkDialog({
-                        headerText: 'Connection Configuration',
-                        dialogContent: '\'' + nfCommon.escapeHtml(remoteProcessGroup.name) + '\' does not have any input ports.'
-                    });
-
-                    // reset the dialog
-                    resetDialog();
-
+    
+                    // only proceed if there are output ports
+                  if (!nfCommon.isEmpty(options)) {
+                        $('#input-port-destination').show();
+    
+                        // sort the options
+                        options.sort(function (a, b) {
+                            return a.text.localeCompare(b.text);
+                        });
+    
+                        // create the combo
+                        $('#input-port-options').combo({
+                            options: options,
+                            maxHeight: 300,
+                            select: function (option) {
+                                $('#connection-destination-id').val(option.value);
+                            }
+                        });
+    
+                        // populate the connection details
+                        $('#connection-destination-component-id').val(processGroup.id);
+    
+                        // populate the group details
+                        $('#connection-destination-group-id').val(processGroup.id);
+                        $('#connection-destination-group-name').text(processGroupName);
+    
+                        deferred.resolve();
+                    } else {
+                        // there are no relationships for this processor
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                          dialogContent: '\'' + nfCommon.escapeHtml(processGroupName) + nf._.msg('nf-connection-configuration.Message4')
+                        });
+    
+                        // reset the dialog
+                        resetDialog();
+    
+                        deferred.reject();
+                    }
+                }).fail(function (xhr, status, error) {
+                    // handle the error
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+    
                     deferred.reject();
-                }
-            }).fail(function (xhr, status, error) {
-                // handle the error
-                nfErrorHandler.handleAjaxError(xhr, status, error);
-
-                deferred.reject();
-            });
-        }).promise();
-    };
-
-    /**
-     * Initializes the source panel for groups.
-     *
-     * @argument {selection} source    The source of the connection
-     */
-    var initializeSourceReadOnlyGroup = function (source) {
-        return $.Deferred(function (deferred) {
+                });
+            }).promise();
+        };
+    
+        /**
+         * Initializes the source when the source is a remote process group.
+         *
+         * @argument {selection} destination        The destination
+         * @argument {object} connectionDestination The connection destination object
+         */
+        var initializeDestinationRemoteProcessGroup = function (destination, connectionDestination) {
+            return $.Deferred(function (deferred) {
+                var remoteProcessGroupData = destination.datum();
+    
+                $.ajax({
+                    type: 'GET',
+                    url: remoteProcessGroupData.uri,
+                    dataType: 'json'
+                }).done(function (response) {
+                    var remoteProcessGroup = response.component;
+                    var remoteProcessGroupContents = remoteProcessGroup.contents;
+    
+                    // only proceed if there are output ports
+                  if (!nfCommon.isEmpty(remoteProcessGroupContents.inputPorts)) {
+                        $('#input-port-destination').show();
+    
+                        // show the input port options
+                        var options = [];
+                        $.each(remoteProcessGroupContents.inputPorts, function (i, inputPort) {
+                            options.push({
+                                text: inputPort.name,
+                                value: inputPort.id,
+                                disabled: inputPort.exists === false,
+                              description: nfCommon.escapeHtml(inputPort.comments)
+                            });
+                        });
+    
+                        // sort the options
+                        options.sort(function (a, b) {
+                            return a.text.localeCompare(b.text);
+                        });
+    
+                        // create the combo
+                        $('#input-port-options').combo({
+                            options: options,
+                            maxHeight: 300,
+                            select: function (option) {
+                                $('#connection-destination-id').val(option.value);
+                            }
+                        });
+    
+                        // populate the connection details
+                        $('#connection-destination-component-id').val(remoteProcessGroup.id);
+    
+                        // populate the group details
+                        $('#connection-destination-group-id').val(remoteProcessGroup.id);
+                        $('#connection-destination-group-name').text(remoteProcessGroup.name);
+    
+                        deferred.resolve();
+                    } else {
+                        // there are no relationships for this processor
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-connection-configuration.ConfigureConnection'),
+                          dialogContent: '\'' + nfCommon.escapeHtml(remoteProcessGroup.name) + nf._.msg('nf-connection-configuration.Message4')
+                        });
+    
+                        // reset the dialog
+                        resetDialog();
+    
+                        deferred.reject();
+                    }
+                }).fail(function (xhr, status, error) {
+                    // handle the error
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+    
+                    deferred.reject();
+                });
+            }).promise();
+        };
+    
+        /**
+         * Initializes the source panel for groups.
+         *
+         * @argument {selection} source    The source of the connection
+         */
+        var initializeSourceReadOnlyGroup = function (source) {
+            return $.Deferred(function (deferred) {
+                var sourceData = source.datum();
+                var sourceName = sourceData.permissions.canRead ? sourceData.component.name : sourceData.id;
+    
+                // populate the port information
+                $('#read-only-output-port-source').show();
+    
+                // populate the component information
+                $('#connection-source-component-id').val(sourceData.id);
+    
+                // populate the group details
+                $('#connection-source-group-id').val(sourceData.id);
+                $('#connection-source-group-name').text(sourceName);
+    
+                // resolve the deferred
+                deferred.resolve();
+            }).promise();
+        };
+    
+        /**
+         * Initializes the source in the existing connection dialog.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceEditConnectionDialog = function (source) {
+          if (nfCanvasUtils.isProcessor(source)) {
+                return initializeSourceProcessor(source);
+          } else if (nfCanvasUtils.isInputPort(source)) {
+                return initializeSourceInputPort(source);
+          } else if (nfCanvasUtils.isFunnel(source)) {
+                return initializeSourceFunnel(source);
+            } else {
+                return initializeSourceReadOnlyGroup(source);
+            }
+        };
+    
+        /**
+         * Initializes the destination in the existing connection dialog.
+         *
+         * @argument {selection} destination        The destination
+         * @argument {object} connectionDestination The connection destination object
+         */
+        var initializeDestinationEditConnectionDialog = function (destination, connectionDestination) {
+          if (nfCanvasUtils.isProcessor(destination)) {
+                return initializeDestinationProcessor(destination);
+          } else if (nfCanvasUtils.isOutputPort(destination)) {
+                return initializeDestinationOutputPort(destination);
+          } else if (nfCanvasUtils.isRemoteProcessGroup(destination)) {
+                return initializeDestinationRemoteProcessGroup(destination, connectionDestination);
+          } else if (nfCanvasUtils.isFunnel(destination)) {
+                return initializeDestinationFunnel(destination);
+            } else {
+                return initializeDestinationProcessGroup(destination);
+            }
+        };
+    
+        /**
+         * Creates an option for the specified relationship name.
+         *
+         * @argument {string} name      The relationship name
+         */
+        var createRelationshipOption = function (name) {
+          var relationshipLabel = $('<div class="relationship-name nf-checkbox-label ellipsis"></div>').text(name);
+            var relationshipValue = $('<span class="relationship-name-value hidden"></span>').text(name);
+            return $('<div class="available-relationship-container"><div class="available-relationship nf-checkbox checkbox-unchecked"></div>' +
+                '</div>').append(relationshipLabel).append(relationshipValue).appendTo('#relationship-names');
+        };
+    
+        /**
+         * Adds a new connection.
+         *
+         * @argument {array} selectedRelationships      The selected relationships
+         */
+        var addConnection = function (selectedRelationships) {
+            // get the connection details
+            var sourceId = $('#connection-source-id').val();
+            var destinationId = $('#connection-destination-id').val();
+    
+            // get the selection components
+            var sourceComponentId = $('#connection-source-component-id').val();
+            var source = d3.select('#id-' + sourceComponentId);
+            var destinationComponentId = $('#connection-destination-component-id').val();
+            var destination = d3.select('#id-' + destinationComponentId);
+    
+            // get the source/destination data
             var sourceData = source.datum();
-            var sourceName = sourceData.permissions.canRead ? sourceData.component.name : sourceData.id;
-
-            // populate the port information
-            $('#read-only-output-port-source').show();
-
-            // populate the component information
-            $('#connection-source-component-id').val(sourceData.id);
-
-            // populate the group details
-            $('#connection-source-group-id').val(sourceData.id);
-            $('#connection-source-group-name').text(sourceName);
-
-            // resolve the deferred
-            deferred.resolve();
-        }).promise();
-    };
-
-    /**
-     * Initializes the source in the existing connection dialog.
-     *
-     * @argument {selection} source        The source
-     */
-    var initializeSourceEditConnectionDialog = function (source) {
-        if (nfCanvasUtils.isProcessor(source)) {
-            return initializeSourceProcessor(source);
-        } else if (nfCanvasUtils.isInputPort(source)) {
-            return initializeSourceInputPort(source);
-        } else if (nfCanvasUtils.isFunnel(source)) {
-            return initializeSourceFunnel(source);
-        } else {
-            return initializeSourceReadOnlyGroup(source);
-        }
-    };
-
-    /**
-     * Initializes the destination in the existing connection dialog.
-     *
-     * @argument {selection} destination        The destination
-     * @argument {object} connectionDestination The connection destination object
-     */
-    var initializeDestinationEditConnectionDialog = function (destination, connectionDestination) {
-        if (nfCanvasUtils.isProcessor(destination)) {
-            return initializeDestinationProcessor(destination);
-        } else if (nfCanvasUtils.isOutputPort(destination)) {
-            return initializeDestinationOutputPort(destination);
-        } else if (nfCanvasUtils.isRemoteProcessGroup(destination)) {
-            return initializeDestinationRemoteProcessGroup(destination, connectionDestination);
-        } else if (nfCanvasUtils.isFunnel(destination)) {
-            return initializeDestinationFunnel(destination);
-        } else {
-            return initializeDestinationProcessGroup(destination);
-        }
-    };
-
-    /**
-     * Creates an option for the specified relationship name.
-     *
-     * @argument {string} name      The relationship name
-     */
-    var createRelationshipOption = function (name) {
-        var relationshipLabel = $('<div class="relationship-name nf-checkbox-label ellipsis"></div>').text(name);
-        var relationshipValue = $('<span class="relationship-name-value hidden"></span>').text(name);
-        return $('<div class="available-relationship-container"><div class="available-relationship nf-checkbox checkbox-unchecked"></div>' +
-            '</div>').append(relationshipLabel).append(relationshipValue).appendTo('#relationship-names');
-    };
-
-    /**
-     * Adds a new connection.
-     *
-     * @argument {array} selectedRelationships      The selected relationships
-     */
-    var addConnection = function (selectedRelationships) {
-        // get the connection details
-        var sourceId = $('#connection-source-id').val();
-        var destinationId = $('#connection-destination-id').val();
-
-        // get the selection components
-        var sourceComponentId = $('#connection-source-component-id').val();
-        var source = d3.select('#id-' + sourceComponentId);
-        var destinationComponentId = $('#connection-destination-component-id').val();
-        var destination = d3.select('#id-' + destinationComponentId);
-
-        // get the source/destination data
-        var sourceData = source.datum();
-        var destinationData = destination.datum();
-
-        // add bend points if we're dealing with a self loop
-        var bends = [];
-        if (sourceComponentId === destinationComponentId) {
-            var rightCenter = {
-                x: sourceData.position.x + (sourceData.dimensions.width),
-                y: sourceData.position.y + (sourceData.dimensions.height / 2)
-            };
-
-            var xOffset = nfConnection.config.selfLoopXOffset;
-            var yOffset = nfConnection.config.selfLoopYOffset;
-            bends.push({
-                'x': (rightCenter.x + xOffset),
-                'y': (rightCenter.y - yOffset)
-            });
-            bends.push({
-                'x': (rightCenter.x + xOffset),
-                'y': (rightCenter.y + yOffset)
-            });
-        } else {
-            var existingConnections = [];
-
-            // get all connections for the source component
-            var connectionsForSourceComponent = nfConnection.getComponentConnections(sourceComponentId);
-            $.each(connectionsForSourceComponent, function (_, connectionForSourceComponent) {
-                // get the id for the source/destination component
-                var connectionSourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connectionForSourceComponent);
-                var connectionDestinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connectionForSourceComponent);
-
-                // if the connection is between these same components, consider it for collisions
-                if ((connectionSourceComponentId === sourceComponentId && connectionDestinationComponentId === destinationComponentId) ||
-                    (connectionDestinationComponentId === sourceComponentId && connectionSourceComponentId === destinationComponentId)) {
-
-                    // record all connections between these two components in question
-                    existingConnections.push(connectionForSourceComponent);
-                }
-            });
-
-            // if there are existing connections between these components, ensure the new connection won't collide
-            if (existingConnections.length > 0) {
-                var avoidCollision = false;
-                $.each(existingConnections, function (_, existingConnection) {
-                    // only consider multiple connections with no bend points a collision, the existance of 
-                    // bend points suggests that the user has placed the connection into a desired location
-                    if (nfCommon.isEmpty(existingConnection.bends)) {
-                        avoidCollision = true;
-                        return false;
+            var destinationData = destination.datum();
+    
+            // add bend points if we're dealing with a self loop
+            var bends = [];
+            if (sourceComponentId === destinationComponentId) {
+                var rightCenter = {
+                    x: sourceData.position.x + (sourceData.dimensions.width),
+                    y: sourceData.position.y + (sourceData.dimensions.height / 2)
+                };
+    
+              var xOffset = nfConnection.config.selfLoopXOffset;
+              var yOffset = nfConnection.config.selfLoopYOffset;
+                bends.push({
+                    'x': (rightCenter.x + xOffset),
+                    'y': (rightCenter.y - yOffset)
+                });
+                bends.push({
+                    'x': (rightCenter.x + xOffset),
+                    'y': (rightCenter.y + yOffset)
+                });
+            } else {
+                var existingConnections = [];
+    
+                // get all connections for the source component
+              var connectionsForSourceComponent = nfConnection.getComponentConnections(sourceComponentId);
+                $.each(connectionsForSourceComponent, function (_, connectionForSourceComponent) {
+                    // get the id for the source/destination component
+                  var connectionSourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connectionForSourceComponent);
+                  var connectionDestinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connectionForSourceComponent);
+    
+                    // if the connection is between these same components, consider it for collisions
+                    if ((connectionSourceComponentId === sourceComponentId && connectionDestinationComponentId === destinationComponentId) ||
+                        (connectionDestinationComponentId === sourceComponentId && connectionSourceComponentId === destinationComponentId)) {
+    
+                        // record all connections between these two components in question
+                        existingConnections.push(connectionForSourceComponent);
                     }
                 });
-
-                // if we need to avoid a collision
-                if (avoidCollision === true) {
-                    // determine the middle of the source/destination components
-                    var sourceMiddle = [sourceData.position.x + (sourceData.dimensions.width / 2), sourceData.position.y + (sourceData.dimensions.height / 2)];
-                    var destinationMiddle = [destinationData.position.x + (destinationData.dimensions.width / 2), destinationData.position.y + (destinationData.dimensions.height / 2)];
-
-                    // detect if the line is more horizontal or vertical
-                    var slope = ((sourceMiddle[1] - destinationMiddle[1]) / (sourceMiddle[0] - destinationMiddle[0]));
-                    var isMoreHorizontal = slope <= 1 && slope >= -1;
-
-                    // determines if the specified coordinate collides with another connection
-                    var collides = function (x, y) {
-                        var collides = false;
-                        $.each(existingConnections, function (_, existingConnection) {
-                            if (!nfCommon.isEmpty(existingConnection.bends)) {
-                                if (isMoreHorizontal) {
-                                    // horizontal lines are adjusted in the y space
-                                    if (existingConnection.bends[0].y === y) {
-                                        collides = true;
-                                        return false;
-                                    }
-                                } else {
-                                    // vertical lines are adjusted in the x space
-                                    if (existingConnection.bends[0].x === x) {
-                                        collides = true;
-                                        return false;
+    
+                // if there are existing connections between these components, ensure the new connection won't collide
+                if (existingConnections.length > 0) {
+                    var avoidCollision = false;
+                    $.each(existingConnections, function (_, existingConnection) {
+                        // only consider multiple connections with no bend points a collision, the existance of 
+                        // bend points suggests that the user has placed the connection into a desired location
+                      if (nfCommon.isEmpty(existingConnection.bends)) {
+                            avoidCollision = true;
+                            return false;
+                        }
+                    });
+    
+                    // if we need to avoid a collision
+                    if (avoidCollision === true) {
+                        // determine the middle of the source/destination components
+                        var sourceMiddle = [sourceData.position.x + (sourceData.dimensions.width / 2), sourceData.position.y + (sourceData.dimensions.height / 2)];
+                        var destinationMiddle = [destinationData.position.x + (destinationData.dimensions.width / 2), destinationData.position.y + (destinationData.dimensions.height / 2)];
+    
+                        // detect if the line is more horizontal or vertical
+                        var slope = ((sourceMiddle[1] - destinationMiddle[1]) / (sourceMiddle[0] - destinationMiddle[0]));
+                        var isMoreHorizontal = slope <= 1 && slope >= -1;
+    
+                        // determines if the specified coordinate collides with another connection
+                        var collides = function (x, y) {
+                            var collides = false;
+                            $.each(existingConnections, function (_, existingConnection) {
+                              if (!nfCommon.isEmpty(existingConnection.bends)) {
+                                    if (isMoreHorizontal) {
+                                        // horizontal lines are adjusted in the y space
+                                        if (existingConnection.bends[0].y === y) {
+                                            collides = true;
+                                            return false;
+                                        }
+                                    } else {
+                                        // vertical lines are adjusted in the x space
+                                        if (existingConnection.bends[0].x === x) {
+                                            collides = true;
+                                            return false;
+                                        }
                                     }
                                 }
-                            }
-                        });
-                        return collides;
-                    };
-
-                    // find the mid point on the connection
-                    var xCandidate = (sourceMiddle[0] + destinationMiddle[0]) / 2;
-                    var yCandidate = (sourceMiddle[1] + destinationMiddle[1]) / 2;
-
-                    // attempt to position this connection so it doesn't collide
-                    var xStep = isMoreHorizontal ? 0 : CONNECTION_OFFSET_X_INCREMENT;
-                    var yStep = isMoreHorizontal ? CONNECTION_OFFSET_Y_INCREMENT : 0;
-                    var positioned = false;
-                    while (positioned === false) {
-                        // consider above and below, then increment and try again (if necessary)
-                        if (collides(xCandidate - xStep, yCandidate - yStep) === false) {
-                            bends.push({
-                                'x': (xCandidate - xStep),
-                                'y': (yCandidate - yStep)
-                            });
-                            positioned = true;
-                        } else if (collides(xCandidate + xStep, yCandidate + yStep) === false) {
-                            bends.push({
-                                'x': (xCandidate + xStep),
-                                'y': (yCandidate + yStep)
                             });
-                            positioned = true;
-                        }
-
-                        if (isMoreHorizontal) {
-                            yStep += CONNECTION_OFFSET_Y_INCREMENT;
-                        } else {
-                            xStep += CONNECTION_OFFSET_X_INCREMENT;
+                            return collides;
+                        };
+    
+                        // find the mid point on the connection
+                        var xCandidate = (sourceMiddle[0] + destinationMiddle[0]) / 2;
+                        var yCandidate = (sourceMiddle[1] + destinationMiddle[1]) / 2;
+    
+                        // attempt to position this connection so it doesn't collide
+                        var xStep = isMoreHorizontal ? 0 : CONNECTION_OFFSET_X_INCREMENT;
+                        var yStep = isMoreHorizontal ? CONNECTION_OFFSET_Y_INCREMENT : 0;
+                        var positioned = false;
+                        while (positioned === false) {
+                            // consider above and below, then increment and try again (if necessary)
+                            if (collides(xCandidate - xStep, yCandidate - yStep) === false) {
+                                bends.push({
+                                    'x': (xCandidate - xStep),
+                                    'y': (yCandidate - yStep)
+                                });
+                                positioned = true;
+                            } else if (collides(xCandidate + xStep, yCandidate + yStep) === false) {
+                                bends.push({
+                                    'x': (xCandidate + xStep),
+                                    'y': (yCandidate + yStep)
+                                });
+                                positioned = true;
+                            }
+    
+                            if (isMoreHorizontal) {
+                                yStep += CONNECTION_OFFSET_Y_INCREMENT;
+                            } else {
+                                xStep += CONNECTION_OFFSET_X_INCREMENT;
+                            }
                         }
                     }
                 }
             }
-        }
-
-        // determine the source group id
-        var sourceGroupId = $('#connection-source-group-id').val();
-        var destinationGroupId = $('#connection-destination-group-id').val();
-
-        // determine the source and destination types
-        var sourceType = nfCanvasUtils.getConnectableTypeForSource(source);
-        var destinationType = nfCanvasUtils.getConnectableTypeForDestination(destination);
-
-        // get the settings
-        var connectionName = $('#connection-name').val();
-        var flowFileExpiration = $('#flow-file-expiration').val();
-        var backPressureObjectThreshold = $('#back-pressure-object-threshold').val();
-        var backPressureDataSizeThreshold = $('#back-pressure-data-size-threshold').val();
-        var prioritizers = $('#prioritizer-selected').sortable('toArray');
-
-        if (validateSettings()) {
-            var connectionEntity = {
-                'revision': nfClient.getRevision({
-                    'revision': {
-                        'version': 0
+    
+            // determine the source group id
+            var sourceGroupId = $('#connection-source-group-id').val();
+            var destinationGroupId = $('#connection-destination-group-id').val();
+    
+            // determine the source and destination types
+          var sourceType = nfCanvasUtils.getConnectableTypeForSource(source);
+          var destinationType = nfCanvasUtils.getConnectableTypeForDestination(destination);
+    
+            // get the settings
+            var connectionName = $('#connection-name').val();
+            var flowFileExpiration = $('#flow-file-expiration').val();
+            var backPressureObjectThreshold = $('#back-pressure-object-threshold').val();
+            var backPressureDataSizeThreshold = $('#back-pressure-data-size-threshold').val();
+            var prioritizers = $('#prioritizer-selected').sortable('toArray');
+    
+            if (validateSettings()) {
+                var connectionEntity = {
+                  'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                        'name': connectionName,
+                        'source': {
+                            'id': sourceId,
+                            'groupId': sourceGroupId,
+                            'type': sourceType
+                        },
+                        'destination': {
+                            'id': destinationId,
+                            'groupId': destinationGroupId,
+                            'type': destinationType
+                        },
+                        'selectedRelationships': selectedRelationships,
+                        'flowFileExpiration': flowFileExpiration,
+                        'backPressureDataSizeThreshold': backPressureDataSizeThreshold,
+                        'backPressureObjectThreshold': backPressureObjectThreshold,
+                        'bends': bends,
+                        'prioritizers': prioritizers
                     }
-                }),
-                'component': {
-                    'name': connectionName,
-                    'source': {
-                        'id': sourceId,
-                        'groupId': sourceGroupId,
-                        'type': sourceType
-                    },
-                    'destination': {
-                        'id': destinationId,
-                        'groupId': destinationGroupId,
-                        'type': destinationType
-                    },
-                    'selectedRelationships': selectedRelationships,
-                    'flowFileExpiration': flowFileExpiration,
-                    'backPressureDataSizeThreshold': backPressureDataSizeThreshold,
-                    'backPressureObjectThreshold': backPressureObjectThreshold,
-                    'bends': bends,
-                    'prioritizers': prioritizers
-                }
-            };
-
-            // create the new connection
-            $.ajax({
-                type: 'POST',
-                url: config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/connections',
-                data: JSON.stringify(connectionEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // add the connection
-                nfGraph.add({
-                    'connections': [response]
-                }, {
-                    'selectAll': true
-                });
-
-                // reload the connections source/destination components
-                nfCanvasUtils.reloadConnectionSourceAndDestination(sourceComponentId, destinationComponentId);
-
-                // update component visibility
-                nfGraph.updateVisibility();
-
-                // update the birdseye
-                nfBirdseye.refresh();
-            }).fail(function (xhr, status, error) {
-                // handle the error
-                nfErrorHandler.handleAjaxError(xhr, status, error);
-            });
-        }
-    };
-
-    /**
-     * Updates an existing connection.
-     *
-     * @argument {array} selectedRelationships          The selected relationships
-     */
-    var updateConnection = function (selectedRelationships) {
-        // get the connection details
-        var connectionId = $('#connection-id').text();
-        var connectionUri = $('#connection-uri').val();
-
-        // get the source details
-        var sourceComponentId = $('#connection-source-component-id').val();
-
-        // get the destination details
-        var destinationComponentId = $('#connection-destination-component-id').val();
-        var destination = d3.select('#id-' + destinationComponentId);
-        var destinationType = nfCanvasUtils.getConnectableTypeForDestination(destination);
-
-        // get the destination details
-        var destinationId = $('#connection-destination-id').val();
-        var destinationGroupId = $('#connection-destination-group-id').val();
-
-        // get the settings
-        var connectionName = $('#connection-name').val();
-        var flowFileExpiration = $('#flow-file-expiration').val();
-        var backPressureObjectThreshold = $('#back-pressure-object-threshold').val();
-        var backPressureDataSizeThreshold = $('#back-pressure-data-size-threshold').val();
-        var prioritizers = $('#prioritizer-selected').sortable('toArray');
-
-        if (validateSettings()) {
-            var d = nfConnection.get(connectionId);
-            var connectionEntity = {
-                'revision': nfClient.getRevision(d),
-                'component': {
-                    'id': connectionId,
-                    'name': connectionName,
-                    'destination': {
-                        'id': destinationId,
-                        'groupId': destinationGroupId,
-                        'type': destinationType
-                    },
-                    'selectedRelationships': selectedRelationships,
-                    'flowFileExpiration': flowFileExpiration,
-                    'backPressureDataSizeThreshold': backPressureDataSizeThreshold,
-                    'backPressureObjectThreshold': backPressureObjectThreshold,
-                    'prioritizers': prioritizers
-                }
-            };
-
-            // update the connection
-            return $.ajax({
-                type: 'PUT',
-                url: connectionUri,
-                data: JSON.stringify(connectionEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // update this connection
-                nfConnection.set(response);
-
-                // reload the connections source/destination components
-                nfCanvasUtils.reloadConnectionSourceAndDestination(sourceComponentId, destinationComponentId);
-            }).fail(function (xhr, status, error) {
-                if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
-                    nfDialog.showOkDialog({
-                        headerText: 'Connection Configuration',
-                        dialogContent: nfCommon.escapeHtml(xhr.responseText),
+                };
+    
+                // create the new connection
+                $.ajax({
+                    type: 'POST',
+                  url: config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/connections',
+                    data: JSON.stringify(connectionEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the connection
+                  nfGraph.add({
+                        'connections': [response]
+                    }, {
+                        'selectAll': true
                     });
-                } else {
-                    nfErrorHandler.handleAjaxError(xhr, status, error);
-                }
-            });
-        } else {
-            return $.Deferred(function (deferred) {
-                deferred.reject();
-            }).promise();
-        }
-    };
-
-    /**
-     * Returns an array of selected relationship names.
-     */
-    var getSelectedRelationships = function () {
-        // get all available relationships
-        var availableRelationships = $('#relationship-names');
-        var selectedRelationships = [];
-
-        // go through each relationship to determine which are selected
-        $.each(availableRelationships.children(), function (i, relationshipElement) {
-            var relationship = $(relationshipElement);
-
-            // get each relationship and its corresponding checkbox
-            var relationshipCheck = relationship.children('div.available-relationship');
-
-            // see if this relationship has been selected
-            if (relationshipCheck.hasClass('checkbox-checked')) {
-                selectedRelationships.push(relationship.children('span.relationship-name-value').text());
+    
+                    // reload the connections source/destination components
+                  nfCanvasUtils.reloadConnectionSourceAndDestination(sourceComponentId, destinationComponentId);
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+                }).fail(function (xhr, status, error) {
+                    // handle the error
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+                });
             }
-        });
-
-        return selectedRelationships;
-    };
-
-    /**
-     * Validates the specified settings.
-     */
-    var validateSettings = function () {
-        var errors = [];
-
-        // validate the settings
-        if (nfCommon.isBlank($('#flow-file-expiration').val())) {
-            errors.push('File expiration must be specified');
-        }
-        if (!$.isNumeric($('#back-pressure-object-threshold').val())) {
-            errors.push('Back pressure object threshold must be an integer value');
-        }
-        if (nfCommon.isBlank($('#back-pressure-data-size-threshold').val())) {
-            errors.push('Back pressure data size threshold must be specified');
-        }
-
-        if (errors.length > 0) {
-            nfDialog.showOkDialog({
-                headerText: 'Connection Configuration',
-                dialogContent: nfCommon.formatUnorderedList(errors)
-            });
-            return false;
-        } else {
-            return true;
-        }
-    };
-
-    /**
-     * Resets the dialog.
-     */
-    var resetDialog = function () {
-        // reset the prioritizers
-        var selectedList = $('#prioritizer-selected');
-        var availableList = $('#prioritizer-available');
-        selectedList.children().detach().appendTo(availableList);
-
-        // sort the available list
-        var listItems = availableList.children('li').get();
-        listItems.sort(function (a, b) {
-            var compA = $(a).text().toUpperCase();
-            var compB = $(b).text().toUpperCase();
-            return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
-        });
-
-        // clear the available list and re-insert each list item
-        $.each(listItems, function () {
-            $(this).detach();
-        });
-        $.each(listItems, function () {
-            $(this).appendTo(availableList);
-        });
-
-        // reset the fields
-        $('#connection-name').val('');
-        $('#relationship-names').css('border-width', '0').empty();
-        $('#relationship-names-container').hide();
-
-        // clear the id field
-        nfCommon.clearField('connection-id');
-
-        // hide all the connection source panels
-        $('#processor-source').hide();
-        $('#input-port-source').hide();
-        $('#output-port-source').hide();
-        $('#read-only-output-port-source').hide();
-        $('#funnel-source').hide();
-
-        // hide all the connection destination panels
-        $('#processor-destination').hide();
-        $('#input-port-destination').hide();
-        $('#output-port-destination').hide();
-        $('#funnel-destination').hide();
-
-        // clear and destination details
-        $('#connection-source-id').val('');
-        $('#connection-source-component-id').val('');
-        $('#connection-source-group-id').val('');
-
-        // clear any destination details
-        $('#connection-destination-id').val('');
-        $('#connection-destination-component-id').val('');
-        $('#connection-destination-group-id').val('');
-
-        // clear any ports
-        $('#output-port-options').empty();
-        $('#input-port-options').empty();
-
-        // see if the temp edge needs to be removed
-        removeTempEdge();
-    };
-
-    var nfConnectionConfiguration = {
-
+        };
+    
         /**
-         * Initialize the connection configuration.
+         * Updates an existing connection.
          *
-         * @param nfBirdseyeRef   The nfBirdseye module.
-         * @param nfGraphRef   The nfGraph module.
+         * @argument {array} selectedRelationships          The selected relationships
          */
-        init: function (nfBirdseyeRef, nfGraphRef) {
-            nfBirdseye = nfBirdseyeRef;
-            nfGraph = nfGraphRef;
-
-            // initially hide the relationship names container
-            $('#relationship-names-container').hide();
-
-            // initialize the configure connection dialog
-            $('#connection-configuration').modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: 'Configure Connection',
-                handler: {
-                    close: function () {
-                        // reset the dialog on close
-                        resetDialog();
-                    },
-                    open: function () {
-                        nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+        var updateConnection = function (selectedRelationships) {
+            // get the connection details
+            var connectionId = $('#connection-id').text();
+            var connectionUri = $('#connection-uri').val();
+    
+            // get the source details
+            var sourceComponentId = $('#connection-source-component-id').val();
+    
+            // get the destination details
+            var destinationComponentId = $('#connection-destination-component-id').val();
+            var destination = d3.select('#id-' + destinationComponentId);
+          var destinationType = nfCanvasUtils.getConnectableTypeForDestination(destination);
+    
+            // get the destination details
+            var destinationId = $('#connection-destination-id').val();
+            var destinationGroupId = $('#connection-destination-group-id').val();
+    
+            // get the settings
+            var connectionName = $('#connection-name').val();
+            var flowFileExpiration = $('#flow-file-expiration').val();
+            var backPressureObjectThreshold = $('#back-pressure-object-threshold').val();
+            var backPressureDataSizeThreshold = $('#back-pressure-data-size-threshold').val();
+            var prioritizers = $('#prioritizer-selected').sortable('toArray');
+    
+            if (validateSettings()) {
+              var d = nfConnection.get(connectionId);
+                var connectionEntity = {
+                  'revision': nfClient.getRevision(d),
+                    'component': {
+                        'id': connectionId,
+                        'name': connectionName,
+                        'destination': {
+                            'id': destinationId,
+                            'groupId': destinationGroupId,
+                            'type': destinationType
+                        },
+                        'selectedRelationships': selectedRelationships,
+                        'flowFileExpiration': flowFileExpiration,
+                        'backPressureDataSizeThreshold': backPressureDataSizeThreshold,
+                        'backPressureObjectThreshold': backPressureObjectThreshold,
+                        'prioritizers': prioritizers
+                    }
+                };
+    
+                // update the connection
+                return $.ajax({
+                    type: 'PUT',
+                    url: connectionUri,
+                    data: JSON.stringify(connectionEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // update this connection
+                  nfConnection.set(response);
+    
+                    // reload the connections source/destination components
+                  nfCanvasUtils.reloadConnectionSourceAndDestination(sourceComponentId, destinationComponentId);
+                }).fail(function (xhr, status, error) {
+                    if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                          dialogContent: nfCommon.escapeHtml(xhr.responseText),
+                        });
+                    } else {
+                      nfErrorHandler.handleAjaxError(xhr, status, error);
                     }
-                }
-            });
-
-            // initialize the properties tabs
-            $('#connection-configuration-tabs').tabbs({
-                tabStyle: 'tab',
-                selectedTabStyle: 'selected-tab',
-                scrollableTabContentStyle: 'scrollable',
-                tabs: [{
-                    name: 'Details',
-                    tabContentId: 'connection-details-tab-content'
-                }, {
-                    name: 'Settings',
-                    tabContentId: 'connection-settings-tab-content'
-                }]
-            });
-
-            // load the processor prioritizers
-            $.ajax({
-                type: 'GET',
-                url: config.urls.prioritizers,
-                dataType: 'json'
-            }).done(function (response) {
-                // create an element for each available prioritizer
-                $.each(response.prioritizerTypes, function (i, documentedType) {
-                    nfConnectionConfiguration.addAvailablePrioritizer('#prioritizer-available', documentedType);
-                });
-
-                // make the prioritizer containers sortable
-                $('#prioritizer-available, #prioritizer-selected').sortable({
-                    connectWith: 'ul',
-                    placeholder: 'ui-state-highlight',
-                    scroll: true,
-                    opacity: 0.6
                 });
-                $('#prioritizer-available, #prioritizer-selected').disableSelection();
-            }).fail(nfErrorHandler.handleAjaxError);
-        },
-
-        /**
-         * Adds the specified prioritizer to the specified container.
-         *
-         * @argument {string} prioritizerContainer      The dom Id of the prioritizer container
-         * @argument {object} prioritizerType           The type of prioritizer
-         */
-        addAvailablePrioritizer: function (prioritizerContainer, prioritizerType) {
-            var type = prioritizerType.type;
-            var name = nfCommon.substringAfterLast(type, '.');
-
-            // add the prioritizers to the available list
-            var prioritizerList = $(prioritizerContainer);
-            var prioritizer = $('<li></li>').append($('<span style="float: left;"></span>').text(name)).attr('id', type).addClass('ui-state-default').appendTo(prioritizerList);
-
-            // add the description if applicable
-            if (nfCommon.isDefinedAndNotNull(prioritizerType.description)) {
-                $('<div class="fa fa-question-circle" style="float: right; margin-right: 5px;""></div>').appendTo(prioritizer).qtip($.extend({
-                    content: nfCommon.escapeHtml(prioritizerType.description)
-                }, nfCommon.config.tooltipConfig));
+            } else {
+                return $.Deferred(function (deferred) {
+                    deferred.reject();
+                }).promise();
             }
-        },
-
+        };
+    
         /**
-         * Shows the dialog for creating a new connection.
-         *
-         * @argument {string} sourceId      The source id
-         * @argument {string} destinationId The destination id
+         * Returns an array of selected relationship names.
          */
-        createConnection: function (sourceId, destinationId) {
-            // select the source and destination
-            var source = d3.select('#id-' + sourceId);
-            var destination = d3.select('#id-' + destinationId);
-
-            if (source.empty() || destination.empty()) {
-                return;
-            }
-
-            // initialize the connection dialog
-            $.when(initializeSourceNewConnectionDialog(source), initializeDestinationNewConnectionDialog(destination)).done(function () {
-                // set the default values
-                $('#flow-file-expiration').val('0 sec');
-                $('#back-pressure-object-threshold').val('10000');
-                $('#back-pressure-data-size-threshold').val('1 GB');
-
-                // select the first tab
-                $('#connection-configuration-tabs').find('li:first').click();
-
-                // configure the header and show the dialog
-                $('#connection-configuration').modal('setHeaderText', 'Create Connection').modal('show');
-
-                // add the ellipsis if necessary
-                $('#connection-configuration div.relationship-name').ellipsis();
-
-                // fill in the connection id
-                nfCommon.populateField('connection-id', null);
-
-                // show the border if necessary
-                var relationshipNames = $('#relationship-names');
-                if (relationshipNames.is(':visible') && relationshipNames.get(0).scrollHeight > Math.round(relationshipNames.innerHeight())) {
-                    relationshipNames.css('border-width', '1px');
+        var getSelectedRelationships = function () {
+            // get all available relationships
+            var availableRelationships = $('#relationship-names');
+            var selectedRelationships = [];
+    
+            // go through each relationship to determine which are selected
+            $.each(availableRelationships.children(), function (i, relationshipElement) {
+                var relationship = $(relationshipElement);
+    
+                // get each relationship and its corresponding checkbox
+                var relationshipCheck = relationship.children('div.available-relationship');
+    
+                // see if this relationship has been selected
+                if (relationshipCheck.hasClass('checkbox-checked')) {
+                    selectedRelationships.push(relationship.children('span.relationship-name-value').text());
                 }
-            }).fail(function () {
-                // see if the temp edge needs to be removed
-                removeTempEdge();
             });
-        },
-
+    
+            return selectedRelationships;
+        };
+    
         /**
-         * Shows the configuration for the specified connection. If a destination is
-         * specified it will be considered a new destination.
-         *
-         * @argument {selection} selection         The connection entry
-         * @argument {selection} destination          Optional new destination
+         * Validates the specified settings.
          */
-        showConfiguration: function (selection, destination) {
-            return $.Deferred(function (deferred) {
-                var connectionEntry = selection.datum();
-                var connection = connectionEntry.component;
-
-                // identify the source component
-                var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connectionEntry);
-                var source = d3.select('#id-' + sourceComponentId);
-
-                // identify the destination component
-                if (nfCommon.isUndefinedOrNull(destination)) {
-                    var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connectionEntry);
-                    destination = d3.select('#id-' + destinationComponentId);
+        var validateSettings = function () {
+            var errors = [];
+    
+            // validate the settings
+          if (nfCommon.isBlank($('#flow-file-expiration').val())) {
+              errors.push(nf._.msg('nf-connection-configuration.flow-file-expiration'));
+            }
+            if (!$.isNumeric($('#back-pressure-object-threshold').val())) {
+              errors.push(nf._.msg('nf-connection-configuration.back-pressure-object-threshold'));
+            }
+          if (nfCommon.isBlank($('#back-pressure-data-size-threshold').val())) {
+              errors.push(nf._.msg('nf-connection-configuration.back-pressure-data-size-threshold'));
+            }
+    
+            if (errors.length > 0) {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                  dialogContent: nfCommon.formatUnorderedList(errors)
+                });
+                return false;
+            } else {
+                return true;
+            }
+        };
+    
+        /**
+         * Resets the dialog.
+         */
+        var resetDialog = function () {
+            // reset the prioritizers
+            var selectedList = $('#prioritizer-selected');
+            var availableList = $('#prioritizer-available');
+            selectedList.children().detach().appendTo(availableList);
+    
+            // sort the available list
+            var listItems = availableList.children('li').get();
+            listItems.sort(function (a, b) {
+                var compA = $(a).text().toUpperCase();
+                var compB = $(b).text().toUpperCase();
+                return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
+            });
+    
+            // clear the available list and re-insert each list item
+            $.each(listItems, function () {
+                $(this).detach();
+            });
+            $.each(listItems, function () {
+                $(this).appendTo(availableList);
+            });
+    
+            // reset the fields
+            $('#connection-name').val('');
+            $('#relationship-names').css('border-width', '0').empty();
+            $('#relationship-names-container').hide();
+    
+            // clear the id field
+          nfCommon.clearField('connection-id');
+    
+            // hide all the connection source panels
+            $('#processor-source').hide();
+            $('#input-port-source').hide();
+            $('#output-port-source').hide();
+            $('#read-only-output-port-source').hide();
+            $('#funnel-source').hide();
+    
+            // hide all the connection destination panels
+            $('#processor-destination').hide();
+            $('#input-port-destination').hide();
+            $('#output-port-destination').hide();
+            $('#funnel-destination').hide();
+    
+            // clear and destination details
+            $('#connection-source-id').val('');
+            $('#connection-source-component-id').val('');
+            $('#connection-source-group-id').val('');
+    
+            // clear any destination details
+            $('#connection-destination-id').val('');
+            $('#connection-destination-component-id').val('');
+            $('#connection-destination-group-id').val('');
+    
+            // clear any ports
+            $('#output-port-options').empty();
+            $('#input-port-options').empty();
+    
+            // see if the temp edge needs to be removed
+            removeTempEdge();
+        };
+    
+      var nfConnectionConfiguration = {
+  
+          /**
+           * Initialize the connection configuration.
+           *
+           * @param nfBirdseyeRef   The nfBirdseye module.
+           * @param nfGraphRef   The nfGraph module.
+           */
+          init: function (nfBirdseyeRef, nfGraphRef) {
+              nfBirdseye = nfBirdseyeRef;
+              nfGraph = nfGraphRef;
+  
+                // initially hide the relationship names container
+                $('#relationship-names-container').hide();
+    
+                // initialize the configure connection dialog
+                $('#connection-configuration').modal({
+                    scrollableContentStyle: 'scrollable',
+                  headerText: nf._.msg('nf-connection-configuration.ConfigureConnection'),
+                    handler: {
+                        close: function () {
+                            // reset the dialog on close
+                            resetDialog();
+                        },
+                        open: function () {
+                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                        }
+                    }
+                });
+    
+                // initialize the properties tabs
+                $('#connection-configuration-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                      name: nf._.msg('nf-connection-configuration.Detail'),
+                        tabContentId: 'connection-details-tab-content'
+                    }, {
+                      name: nf._.msg('nf-connection-configuration.Setting'),
+                        tabContentId: 'connection-settings-tab-content'
+                    }]
+                });
+    
+                // load the processor prioritizers
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.prioritizers,
+                    dataType: 'json'
+                }).done(function (response) {
+                    // create an element for each available prioritizer
+                    $.each(response.prioritizerTypes, function (i, documentedType) {
+                      nfConnectionConfiguration.addAvailablePrioritizer('#prioritizer-available', documentedType);
+                    });
+    
+                    // make the prioritizer containers sortable
+                    $('#prioritizer-available, #prioritizer-selected').sortable({
+                        connectWith: 'ul',
+                        placeholder: 'ui-state-highlight',
+                        scroll: true,
+                        opacity: 0.6
+                    });
+                    $('#prioritizer-available, #prioritizer-selected').disableSelection();
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Adds the specified prioritizer to the specified container.
+             *
+             * @argument {string} prioritizerContainer      The dom Id of the prioritizer container
+             * @argument {object} prioritizerType           The type of prioritizer
+             */
+            addAvailablePrioritizer: function (prioritizerContainer, prioritizerType) {
+                var type = prioritizerType.type;
+              var name = nfCommon.substringAfterLast(type, '.');
+    
+                // add the prioritizers to the available list
+                var prioritizerList = $(prioritizerContainer);
+                var prioritizer = $('<li></li>').append($('<span style="float: left;"></span>').text(name)).attr('id', type).addClass('ui-state-default').appendTo(prioritizerList);
+    
+                // add the description if applicable
+              if (nfCommon.isDefinedAndNotNull(prioritizerType.description)) {
+                    $('<div class="fa fa-question-circle" style="float: right; margin-right: 5px;""></div>').appendTo(prioritizer).qtip($.extend({
+                      content: nfCommon.escapeHtml(prioritizerType.description)
+                  }, nfCommon.config.tooltipConfig));
+                }
+            },
+    
+            /**
+             * Shows the dialog for creating a new connection.
+             *
+             * @argument {string} sourceId      The source id
+             * @argument {string} destinationId The destination id
+             */
+            createConnection: function (sourceId, destinationId) {
+                // select the source and destination
+                var source = d3.select('#id-' + sourceId);
+                var destination = d3.select('#id-' + destinationId);
+    
+                if (source.empty() || destination.empty()) {
+                    return;
                 }
-
+    
                 // initialize the connection dialog
-                $.when(initializeSourceEditConnectionDialog(source), initializeDestinationEditConnectionDialog(destination, connection.destination)).done(function () {
-                    var availableRelationships = connection.availableRelationships;
-                    var selectedRelationships = connection.selectedRelationships;
-
-                    // show the available relationship if applicable
-                    if (nfCommon.isDefinedAndNotNull(availableRelationships) || nfCommon.isDefinedAndNotNull(selectedRelationships)) {
-                        // populate the available connections
-                        $.each(availableRelationships, function (i, name) {
-                            createRelationshipOption(name);
-                        });
-
-                        // ensure all selected relationships are present
-                        // (may be undefined) and selected
-                        $.each(selectedRelationships, function (i, name) {
-                            // mark undefined relationships accordingly
-                            if ($.inArray(name, availableRelationships) === -1) {
-                                var option = createRelationshipOption(name);
-                                $(option).children('div.relationship-name').addClass('undefined');
-                            }
-
-                            // ensure all selected relationships are checked
-                            var relationships = $('#relationship-names').children('div');
-                            $.each(relationships, function (i, relationship) {
-                                var relationshipName = $(relationship).children('span.relationship-name-value');
-                                if (relationshipName.text() === name) {
-                                    $(relationship).children('div.available-relationship').removeClass('checkbox-unchecked').addClass('checkbox-checked');
-                                }
-                            });
-                        });
+                $.when(initializeSourceNewConnectionDialog(source), initializeDestinationNewConnectionDialog(destination)).done(function () {
+                    // set the default values
+                    $('#flow-file-expiration').val('0 sec');
+                    $('#back-pressure-object-threshold').val('10000');
+                    $('#back-pressure-data-size-threshold').val('1 GB');
+    
+                    // select the first tab
+                    $('#connection-configuration-tabs').find('li:first').click();
+    
+                    // configure the header and show the dialog
+                    $('#connection-configuration').modal('setHeaderText', 'Create Connection').modal('show');
+    
+                    // add the ellipsis if necessary
+                    $('#connection-configuration div.relationship-name').ellipsis();
+    
+                    // fill in the connection id
+                  nfCommon.populateField('connection-id', null);
+    
+                    // show the border if necessary
+                    var relationshipNames = $('#relationship-names');
+                  if (relationshipNames.is(':visible') && relationshipNames.get(0).scrollHeight > Math.round(relationshipNames.innerHeight())) {
+                        relationshipNames.css('border-width', '1px');
                     }
-
-                    // if the source is a process group or remote process group, select the appropriate port if applicable
-                    if (nfCanvasUtils.isProcessGroup(source) || nfCanvasUtils.isRemoteProcessGroup(source)) {
-                        // populate the connection source details
-                        $('#connection-source-id').val(connection.source.id);
-                        $('#read-only-output-port-name').text(connection.source.name).attr('title', connection.source.name);
+                }).fail(function () {
+                    // see if the temp edge needs to be removed
+                    removeTempEdge();
+                });
+            },
+    
+            /**
+             * Shows the configuration for the specified connection. If a destination is
+             * specified it will be considered a new destination.
+             *
+             * @argument {selection} selection         The connection entry
+             * @argument {selection} destination          Optional new destination
+             */
+            showConfiguration: function (selection, destination) {
+                return $.Deferred(function (deferred) {
+                    var connectionEntry = selection.datum();
+                    var connection = connectionEntry.component;
+    
+                    // identify the source component
+                  var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connectionEntry);
+                    var source = d3.select('#id-' + sourceComponentId);
+    
+                    // identify the destination component
+                  if (nfCommon.isUndefinedOrNull(destination)) {
+                      var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connectionEntry);
+                        destination = d3.select('#id-' + destinationComponentId);
                     }
-
-                    // if the destination is a process gorup or remote process group, select the appropriate port if applicable
-                    if (nfCanvasUtils.isProcessGroup(destination) || nfCanvasUtils.isRemoteProcessGroup(destination)) {
-                        var destinationData = destination.datum();
-
-                        // when the group ids differ, its a new destination component so we don't want to preselect any port
-                        if (connection.destination.groupId === destinationData.id) {
-                            $('#input-port-options').combo('setSelectedOption', {
-                                value: connection.destination.id
+    
+                    // initialize the connection dialog
+                    $.when(initializeSourceEditConnectionDialog(source), initializeDestinationEditConnectionDialog(destination, connection.destination)).done(function () {
+                        var availableRelationships = connection.availableRelationships;
+                        var selectedRelationships = connection.selectedRelationships;
+    
+                        // show the available relationship if applicable
+                      if (nfCommon.isDefinedAndNotNull(availableRelationships) || nfCommon.isDefinedAndNotNull(selectedRelationships)) {
+                            // populate the available connections
+                            $.each(availableRelationships, function (i, name) {
+                                createRelationshipOption(name);
                             });
-                        }
-                    }
-
-                    // set the connection settings
-                    $('#connection-name').val(connection.name);
-                    $('#flow-file-expiration').val(connection.flowFileExpiration);
-                    $('#back-pressure-object-threshold').val(connection.backPressureObjectThreshold);
-                    $('#back-pressure-data-size-threshold').val(connection.backPressureDataSizeThreshold);
-
-                    // format the connection id
-                    nfCommon.populateField('connection-id', connection.id);
-
-                    // handle each prioritizer
-                    $.each(connection.prioritizers, function (i, type) {
-                        $('#prioritizer-available').children('li[id="' + type + '"]').detach().appendTo('#prioritizer-selected');
-                    });
-
-                    // store the connection details
-                    $('#connection-uri').val(connectionEntry.uri);
-
-                    // configure the button model
-                    $('#connection-configuration').modal('setButtonModel', [{
-                        buttonText: 'Apply',
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                // get the selected relationships
-                                var selectedRelationships = getSelectedRelationships();
-
-                                // see if we're working with a processor as the source
-                                if (nfCanvasUtils.isProcessor(source)) {
-                                    if (selectedRelationships.length > 0) {
-                                        // if there are relationships selected update
-                                        updateConnection(selectedRelationships).done(function () {
-                                            deferred.resolve();
-                                        }).fail(function () {
-                                            deferred.reject();
-                                        });
-                                    } else {
-                                        // inform users that no relationships were selected and the source is a processor
-                                        nfDialog.showOkDialog({
-                                            headerText: 'Connection Configuration',
-                                            dialogContent: 'The connection must have at least one relationship selected.'
-                                        });
-
-                                        // reject the deferred
-                                        deferred.reject();
-                                    }
-                                } else {
-                                    // there are no relationships, but the source wasn't a processor, so update anyway
-                                    updateConnection(undefined).done(function () {
-                                        deferred.resolve();
-                                    }).fail(function () {
-                                        deferred.reject();
-                                    });
+    
+                            // ensure all selected relationships are present
+                            // (may be undefined) and selected
+                            $.each(selectedRelationships, function (i, name) {
+                                // mark undefined relationships accordingly
+                                if ($.inArray(name, availableRelationships) === -1) {
+                                    var option = createRelationshipOption(name);
+                                    $(option).children('div.relationship-name').addClass('undefined');
                                 }
-
-                                // close the dialog
-                                $('#connection-configuration').modal('hide');
+    
+                                // ensure all selected relationships are checked
+                                var relationships = $('#relationship-names').children('div');
+                                $.each(relationships, function (i, relationship) {
+                                    var relationshipName = $(relationship).children('span.relationship-name-value');
+                                    if (relationshipName.text() === name) {
+                                        $(relationship).children('div.available-relationship').removeClass('checkbox-unchecked').addClass('checkbox-checked');
+                                    }
+                                });
+                            });
+                        }
+    
+                        // if the source is a process group or remote process group, select the appropriate port if applicable
+                      if (nfCanvasUtils.isProcessGroup(source) || nfCanvasUtils.isRemoteProcessGroup(source)) {
+                            // populate the connection source details
+                            $('#connection-source-id').val(connection.source.id);
+                          $('#read-only-output-port-name').text(connection.source.name).attr('title', connection.source.name);
+                        }
+    
+                        // if the destination is a process gorup or remote process group, select the appropriate port if applicable
+                      if (nfCanvasUtils.isProcessGroup(destination) || nfCanvasUtils.isRemoteProcessGroup(destination)) {
+                            var destinationData = destination.datum();
+    
+                            // when the group ids differ, its a new destination component so we don't want to preselect any port
+                            if (connection.destination.groupId === destinationData.id) {
+                                $('#input-port-options').combo('setSelectedOption', {
+                                    value: connection.destination.id
+                                });
                             }
                         }
-                    },
-                        {
-                            buttonText: 'Cancel',
+    
+                        // set the connection settings
+                        $('#connection-name').val(connection.name);
+                        $('#flow-file-expiration').val(connection.flowFileExpiration);
+                        $('#back-pressure-object-threshold').val(connection.backPressureObjectThreshold);
+                        $('#back-pressure-data-size-threshold').val(connection.backPressureDataSizeThreshold);
+    
+                        // format the connection id
+                      nfCommon.populateField('connection-id', connection.id);
+    
+                        // handle each prioritizer
+                        $.each(connection.prioritizers, function (i, type) {
+                            $('#prioritizer-available').children('li[id="' + type + '"]').detach().appendTo('#prioritizer-selected');
+                        });
+    
+                        // store the connection details
+                        $('#connection-uri').val(connectionEntry.uri);
+    
+                        // configure the button model
+                        $('#connection-configuration').modal('setButtonModel', [{
+                          buttonText: nf._.msg('nf-connection-configuration.Apply'),
                             color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
+                                base: '#728E9B',
+                                hover: '#004849',
+                                text: '#ffffff'
                             },
                             handler: {
                                 click: function () {
-                                    // hide the dialog
+                                    // get the selected relationships
+                                    var selectedRelationships = getSelectedRelationships();
+    
+                                    // see if we're working with a processor as the source
+                                  if (nfCanvasUtils.isProcessor(source)) {
+                                        if (selectedRelationships.length > 0) {
+                                            // if there are relationships selected update
+                                            updateConnection(selectedRelationships).done(function () {
+                                                deferred.resolve();
+                                            }).fail(function () {
+                                                deferred.reject();
+                                            });
+                                        } else {
+                                            // inform users that no relationships were selected and the source is a processor
+                                          nfDialog.showOkDialog({
+                                              headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                                              dialogContent: nf._.msg('nf-connection-configuration.Message0')
+                                            });
+    
+                                            // reject the deferred
+                                            deferred.reject();
+                                        }
+                                    } else {
+                                        // there are no relationships, but the source wasn't a processor, so update anyway
+                                        updateConnection(undefined).done(function () {
+                                            deferred.resolve();
+                                        }).fail(function () {
+                                            deferred.reject();
+                                        });
+                                    }
+    
+                                    // close the dialog
                                     $('#connection-configuration').modal('hide');
-
-                                    // reject the deferred
-                                    deferred.reject();
                                 }
                             }
-                        }]);
-
-                    // show the details dialog
-                    $('#connection-configuration').modal('setHeaderText', 'Configure Connection').modal('show');
-
-                    // add the ellipsis if necessary
-                    $('#connection-configuration div.relationship-name').ellipsis();
-
-                    // show the border if necessary
-                    var relationshipNames = $('#relationship-names');
-                    if (relationshipNames.is(':visible') && relationshipNames.get(0).scrollHeight > Math.round(relationshipNames.innerHeight())) {
-                        relationshipNames.css('border-width', '1px');
-                    }
-                }).fail(function () {
-                    deferred.reject();
-                });
-            }).promise();
-        }
-    };
-
-    return nfConnectionConfiguration;
-}));
\ No newline at end of file
+                        },
+                            {
+                              buttonText: nf._.msg('nf-connection-configuration.Cancel'),
+                                color: {
+                                    base: '#E3E8EB',
+                                    hover: '#C7D2D7',
+                                    text: '#004849'
+                                },
+                                handler: {
+                                    click: function () {
+                                        // hide the dialog
+                                        $('#connection-configuration').modal('hide');
+    
+                                        // reject the deferred
+                                        deferred.reject();
+                                    }
+                                }
+                            }]);
+    
+                        // show the details dialog
+                        $('#connection-configuration').modal('setHeaderText', 'Configure Connection').modal('show');
+    
+                        // add the ellipsis if necessary
+                        $('#connection-configuration div.relationship-name').ellipsis();
+    
+                        // show the border if necessary
+                        var relationshipNames = $('#relationship-names');
+                      if (relationshipNames.is(':visible') && relationshipNames.get(0).scrollHeight > Math.round(relationshipNames.innerHeight())) {
+                            relationshipNames.css('border-width', '1px');
+                        }
+                    }).fail(function () {
+                        deferred.reject();
+                    });
+                }).promise();
+            }
+        };
+    
+      return nfConnectionConfiguration;
+  }));
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 d7e2e3acc21a..67d0dc0371f4 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
@@ -1,2185 +1,2185 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.ErrorHandler',
-                'nf.Client',
-                'nf.CanvasUtils'],
-            function ($, d3, nfCommon, nfDialog, nfErrorHandler, nfClient, nfCanvasUtils) {
-                return (nf.Connection = factory($, d3, nfCommon, nfDialog, nfErrorHandler, nfClient, nfCanvasUtils));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Connection =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.Common'),
-                require('nf.Dialog'),
-                require('nf.ErrorHandler'),
-                require('nf.Client'),
-                require('nf.CanvasUtils')));
-    } else {
-        nf.Connection = factory(root.$,
-            root.d3,
-            root.nf.Common,
-            root.nf.Dialog,
-            root.nf.ErrorHandler,
-            root.nf.Client,
-            root.nf.CanvasUtils);
-    }
-}(this, function ($, d3, nfCommon, nfDialog, nfErrorHandler, nfClient, nfCanvasUtils) {
-    'use strict';
-
-    var nfSelectable;
-    var nfConnectionConfiguration;
-    var nfContextMenu;
-
-    // the dimensions for the connection label
-    var dimensions = {
-        width: 200
-    };
-
-    // width of a backpressure indicator - half of width, left/right padding, left/right border
-    var backpressureBarWidth = (dimensions.width / 2) - 15 - 2;
-
-    /**
-     * Gets the position of the label for the specified connection.
-     *
-     * @param {type} connectionLabel      The connection label
-     */
-    var getLabelPosition = function (connectionLabel) {
-        var d = connectionLabel.datum();
-
-        var x, y;
-        if (d.bends.length > 0) {
-            var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1);
-            x = d.bends[i].x;
-            y = d.bends[i].y;
-        } else {
-            x = (d.start.x + d.end.x) / 2;
-            y = (d.start.y + d.end.y) / 2;
-        }
-
-        // offset to account for the label dimensions
-        x -= (dimensions.width / 2);
-        y -= (connectionLabel.attr('height') / 2);
-
-        return {
-            x: x,
-            y: y
-        };
-    };
-
-    // ----------------------------------
-    // connections currently on the graph
-    // ----------------------------------
-
-    var connectionMap;
-
-    // -----------------------------------------------------------
-    // cache for components that are added/removed from the canvas
-    // -----------------------------------------------------------
-
-    var removedCache;
-    var addedCache;
-
-    // ---------------------
-    // connection containers
-    // ---------------------
-
-    var connectionContainer;
-
-    // ------------------------
-    // line point drag behavior
-    // ------------------------
-
-    var bendPointDrag;
-    var endpointDrag;
-
-    // ------------------------------
-    // connection label drag behavior
-    // ------------------------------
-
-    var labelDrag;
-
-    // function for generating lines
-    var lineGenerator;
-
-    // --------------------------
-    // privately scoped functions
-    // --------------------------
-
-    /**
-     * Calculates the distance between the two points specified squared.
-     *
-     * @param {object} v        First point
-     * @param {object} w        Second point
-     */
-    var distanceSquared = function (v, w) {
-        return Math.pow(v.x - w.x, 2) + Math.pow(v.y - w.y, 2);
-    };
-
-    /**
-     * Calculates the distance between the two points specified.
-     *
-     * @param {object} v        First point
-     * @param {object} w        Second point
-     */
-    var distanceBetweenPoints = function (v, w) {
-        return Math.sqrt(distanceSquared(v, w));
-    };
-
-    /**
-     * Calculates the distance between the point and the line created by s1 and s2.
+    /*
+     * 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
      *
-     * @param {object} p            The point
-     * @param {object} s1           Segment start
-     * @param {object} s2           Segment end
-     */
-    var distanceToSegment = function (p, s1, s2) {
-        var l2 = distanceSquared(s1, s2);
-        if (l2 === 0) {
-            return Math.sqrt(distanceSquared(p, s1));
-        }
-
-        var t = ((p.x - s1.x) * (s2.x - s1.x) + (p.y - s1.y) * (s2.y - s1.y)) / l2;
-        if (t < 0) {
-            return Math.sqrt(distanceSquared(p, s1));
-        }
-        if (t > 1) {
-            return Math.sqrt(distanceSquared(p, s2));
-        }
-
-        return Math.sqrt(distanceSquared(p, {
-            'x': s1.x + t * (s2.x - s1.x),
-            'y': s1.y + t * (s2.y - s1.y)
-        }));
-    };
-
-    /**
-     * Calculates the index of the bend point that is nearest to the specified point.
+     *     http://www.apache.org/licenses/LICENSE-2.0
      *
-     * @param {object} p
-     * @param {object} connectionData
+     * 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.
      */
-    var getNearestSegment = function (p, connectionData) {
-        if (connectionData.bends.length === 0) {
-            return 0;
-        }
-
-        var minimumDistance;
-        var index;
-
-        // line is comprised of start -> [bends] -> end
-        var line = [connectionData.start].concat(connectionData.bends, [connectionData.end]);
-
-        // consider each segment
-        for (var i = 0; i < line.length; i++) {
-            if (i + 1 < line.length) {
-                var distance = distanceToSegment(p, line[i], line[i + 1]);
-                if (nfCommon.isUndefined(minimumDistance) || distance < minimumDistance) {
-                    minimumDistance = distance;
-                    index = i;
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.ErrorHandler',
+                  'nf.Client',
+                  'nf.CanvasUtils'],
+              function ($, d3, nfCommon, nfDialog, nfErrorHandler, nfClient, nfCanvasUtils) {
+                  return (nf.Connection = factory($, d3, nfCommon, nfDialog, nfErrorHandler, nfClient, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.Connection =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.Connection = factory(root.$,
+              root.d3,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.ErrorHandler,
+              root.nf.Client,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, d3, nfCommon, nfDialog, nfErrorHandler, nfClient, nfCanvasUtils) {
+      'use strict';
+  
+      var nfSelectable;
+      var nfConnectionConfiguration;
+      var nfContextMenu;
+    
+        // the dimensions for the connection label
+        var dimensions = {
+            width: 200
+        };
+    
+      // width of a backpressure indicator - half of width, left/right padding, left/right border
+      var backpressureBarWidth = (dimensions.width / 2) - 15 - 2;
+  
+        /**
+         * Gets the position of the label for the specified connection.
+         *
+         * @param {type} connectionLabel      The connection label
+         */
+        var getLabelPosition = function (connectionLabel) {
+            var d = connectionLabel.datum();
+    
+            var x, y;
+            if (d.bends.length > 0) {
+                var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1);
+                x = d.bends[i].x;
+                y = d.bends[i].y;
+            } else {
+                x = (d.start.x + d.end.x) / 2;
+                y = (d.start.y + d.end.y) / 2;
+            }
+    
+            // offset to account for the label dimensions
+            x -= (dimensions.width / 2);
+            y -= (connectionLabel.attr('height') / 2);
+    
+            return {
+                x: x,
+                y: y
+            };
+        };
+    
+        // ----------------------------------
+        // connections currently on the graph
+        // ----------------------------------
+    
+        var connectionMap;
+    
+      // -----------------------------------------------------------
+      // cache for components that are added/removed from the canvas
+      // -----------------------------------------------------------
+  
+      var removedCache;
+      var addedCache;
+  
+        // ---------------------
+        // connection containers
+        // ---------------------
+    
+        var connectionContainer;
+    
+        // ------------------------
+        // line point drag behavior
+        // ------------------------
+    
+        var bendPointDrag;
+        var endpointDrag;
+    
+        // ------------------------------
+        // connection label drag behavior
+        // ------------------------------
+    
+        var labelDrag;
+    
+        // function for generating lines
+        var lineGenerator;
+    
+        // --------------------------
+        // privately scoped functions
+        // --------------------------
+    
+        /**
+         * Calculates the distance between the two points specified squared.
+         *
+         * @param {object} v        First point
+         * @param {object} w        Second point
+         */
+        var distanceSquared = function (v, w) {
+            return Math.pow(v.x - w.x, 2) + Math.pow(v.y - w.y, 2);
+        };
+    
+        /**
+         * Calculates the distance between the two points specified.
+         *
+         * @param {object} v        First point
+         * @param {object} w        Second point
+         */
+        var distanceBetweenPoints = function (v, w) {
+            return Math.sqrt(distanceSquared(v, w));
+        };
+    
+        /**
+         * Calculates the distance between the point and the line created by s1 and s2.
+         *
+         * @param {object} p            The point
+         * @param {object} s1           Segment start
+         * @param {object} s2           Segment end
+         */
+        var distanceToSegment = function (p, s1, s2) {
+            var l2 = distanceSquared(s1, s2);
+            if (l2 === 0) {
+                return Math.sqrt(distanceSquared(p, s1));
+            }
+    
+            var t = ((p.x - s1.x) * (s2.x - s1.x) + (p.y - s1.y) * (s2.y - s1.y)) / l2;
+            if (t < 0) {
+                return Math.sqrt(distanceSquared(p, s1));
+            }
+            if (t > 1) {
+                return Math.sqrt(distanceSquared(p, s2));
+            }
+    
+            return Math.sqrt(distanceSquared(p, {
+                'x': s1.x + t * (s2.x - s1.x),
+                'y': s1.y + t * (s2.y - s1.y)
+            }));
+        };
+    
+        /**
+         * Calculates the index of the bend point that is nearest to the specified point.
+         *
+         * @param {object} p
+         * @param {object} connectionData
+         */
+        var getNearestSegment = function (p, connectionData) {
+            if (connectionData.bends.length === 0) {
+                return 0;
+            }
+    
+            var minimumDistance;
+            var index;
+    
+            // line is comprised of start -> [bends] -> end
+            var line = [connectionData.start].concat(connectionData.bends, [connectionData.end]);
+    
+            // consider each segment
+            for (var i = 0; i < line.length; i++) {
+                if (i + 1 < line.length) {
+                    var distance = distanceToSegment(p, line[i], line[i + 1]);
+                  if (nfCommon.isUndefined(minimumDistance) || distance < minimumDistance) {
+                        minimumDistance = distance;
+                        index = i;
+                    }
                 }
             }
-        }
-
-        return index;
-    };
-
-    /**
-     * Determines if the specified type is a type of input port.
-     *
-     * @argument {string} type      The port type
-     */
-    var isInputPortType = function (type) {
-        return type.indexOf('INPUT_PORT') >= 0;
-    };
-
-    /**
-     * Determines if the specified type is a type of output port.
-     *
-     * @argument {string} type      The port type
-     */
-    var isOutputPortType = function (type) {
-        return type.indexOf('OUTPUT_PORT') >= 0;
-    };
-
-    /**
-     * Determines whether the terminal of the connection (source|destination) is
-     * a group.
-     *
-     * @param {object} terminal
-     */
-    var isGroup = function (terminal) {
-        return terminal.groupId !== nfCanvasUtils.getGroupId() && (isInputPortType(terminal.type) || isOutputPortType(terminal.type));
-    };
-
-    /**
-     * Determines whether expiration is configured for the specified connection.
-     *
-     * @param {object} connection
-     * @return {boolean} Whether expiration is configured
-     */
-    var isExpirationConfigured = function (connection) {
-        if (nfCommon.isDefinedAndNotNull(connection.flowFileExpiration)) {
-            var match = connection.flowFileExpiration.match(/^(\d+).*/);
-            if (match !== null && match.length > 0) {
-                if (parseInt(match[0], 10) > 0) {
-                    return true;
+    
+            return index;
+        };
+    
+        /**
+         * Determines if the specified type is a type of input port.
+         *
+         * @argument {string} type      The port type
+         */
+        var isInputPortType = function (type) {
+            return type.indexOf('INPUT_PORT') >= 0;
+        };
+    
+        /**
+         * Determines if the specified type is a type of output port.
+         *
+         * @argument {string} type      The port type
+         */
+        var isOutputPortType = function (type) {
+            return type.indexOf('OUTPUT_PORT') >= 0;
+        };
+    
+        /**
+         * Determines whether the terminal of the connection (source|destination) is
+         * a group.
+         *
+         * @param {object} terminal
+         */
+        var isGroup = function (terminal) {
+          return terminal.groupId !== nfCanvasUtils.getGroupId() && (isInputPortType(terminal.type) || isOutputPortType(terminal.type));
+        };
+    
+        /**
+         * Determines whether expiration is configured for the specified connection.
+         *
+         * @param {object} connection
+         * @return {boolean} Whether expiration is configured
+         */
+        var isExpirationConfigured = function (connection) {
+          if (nfCommon.isDefinedAndNotNull(connection.flowFileExpiration)) {
+                var match = connection.flowFileExpiration.match(/^(\d+).*/);
+                if (match !== null && match.length > 0) {
+                    if (parseInt(match[0], 10) > 0) {
+                        return true;
+                    }
                 }
             }
-        }
-        return false;
-    };
-
-    /**
-     * Sorts the specified connections according to the z index.
-     *
-     * @param {type} connections
-     */
-    var sort = function (connections) {
-        connections.sort(function (a, b) {
-            return a.zIndex === b.zIndex ? 0 : a.zIndex > b.zIndex ? 1 : -1;
-        });
-    };
-
-    /**
-     * Selects the connection elements against the current connection map.
-     */
-    var select = function () {
-        return connectionContainer.selectAll('g.connection').data(connectionMap.values(), function (d) {
-            return d.id;
-        });
-    };
-
-    var renderConnections = function (entered, selected) {
-        if (entered.empty()) {
-            return;
-        }
-
-        var connection = entered.append('g')
-            .attr({
-                'id': function (d) {
-                    return 'id-' + d.id;
-                },
-                'class': 'connection'
-            })
-            .classed('selected', selected);
-
-        // create a connection between the two components
-        connection.append('path')
-            .attr({
-                'class': 'connection-path',
-                'pointer-events': 'none'
-            });
-
-        // path to show when selection
-        connection.append('path')
-            .attr({
-                'class': 'connection-selection-path',
-                'pointer-events': 'none'
+            return false;
+        };
+    
+        /**
+         * Sorts the specified connections according to the z index.
+         *
+         * @param {type} connections
+         */
+        var sort = function (connections) {
+            connections.sort(function (a, b) {
+                return a.zIndex === b.zIndex ? 0 : a.zIndex > b.zIndex ? 1 : -1;
             });
-
-        // path to make selection easier
-        connection.append('path')
-            .attr({
-                'class': 'connection-path-selectable',
-                'pointer-events': 'stroke'
-            })
-            .on('mousedown.selection', function () {
-                // select the connection when clicking the selectable path
-                nfSelectable.select(d3.select(this.parentNode));
-            })
-            .call(nfContextMenu.activate);
-    };
-
-    // determines whether the specified connection contains an unsupported relationship
-    var hasUnavailableRelationship = function (d) {
-        var unavailable = false;
-
-        // verify each selected relationship is still available
-        if (nfCommon.isDefinedAndNotNull(d.component.selectedRelationships) && nfCommon.isDefinedAndNotNull(d.component.availableRelationships)) {
-            $.each(d.component.selectedRelationships, function (_, selectedRelationship) {
-                if ($.inArray(selectedRelationship, d.component.availableRelationships) === -1) {
-                    unavailable = true;
-                    return false;
-                }
+        };
+    
+        /**
+         * Selects the connection elements against the current connection map.
+         */
+        var select = function () {
+            return connectionContainer.selectAll('g.connection').data(connectionMap.values(), function (d) {
+                return d.id;
             });
-        }
-
-        return unavailable;
-    };
-
-    // gets the appropriate end marker
-    var getEndMarker = function (d) {
-        var marker = 'normal';
-
-        if (d.permissions.canRead) {
-            // if the connection has a relationship that is unavailable, mark it a ghost relationship
-            if (isFullBytes(d) || isFullCount(d)) {
-                marker = 'full';
-            } else if (hasUnavailableRelationship(d)) {
-                marker = 'ghost';
+        };
+    
+        var renderConnections = function (entered, selected) {
+            if (entered.empty()) {
+                return;
             }
-        } else {
-            marker = 'unauthorized';
-        }
-
-        return 'url(#' + marker + ')';
-    };
-
-    // gets the appropriate drop shadow
-    var getDropShadow = function (d) {
-        if (isFullCount(d) || isFullBytes(d)) {
-            return 'url(#connection-full-drop-shadow)';
-        } else {
-            return 'url(#component-drop-shadow)';
-        }
-    };
-
-    // determines whether the connection is full based on the object count threshold
-    var isFullCount = function (d) {
-        return d.status.aggregateSnapshot.percentUseCount === 100;
-    };
-
-    // determines whether the connection is in warning based on the object count threshold
-    var isWarningCount = function (d) {
-        var percentUseCount = d.status.aggregateSnapshot.percentUseCount;
-        if (nfCommon.isDefinedAndNotNull(percentUseCount)) {
-            return percentUseCount >= 61 && percentUseCount <= 85;
-        }
-
-        return false;
-    };
-
-    // determines whether the connection is in error based on the object count threshold
-    var isErrorCount = function (d) {
-        var percentUseCount = d.status.aggregateSnapshot.percentUseCount;
-        if (nfCommon.isDefinedAndNotNull(percentUseCount)) {
-            return percentUseCount > 85;
-        }
-
-        return false;
-    };
-
-    // determines whether the connection is full based on the data size threshold
-    var isFullBytes = function (d) {
-        return d.status.aggregateSnapshot.percentUseBytes === 100
-    };
-
-    // determines whether the connection is in warning based on the data size threshold
-    var isWarningBytes = function (d) {
-        var percentUseBytes = d.status.aggregateSnapshot.percentUseBytes;
-        if (nfCommon.isDefinedAndNotNull(percentUseBytes)) {
-            return percentUseBytes >= 61 && percentUseBytes <= 85;
-        }
-
-        return false;
-    };
-
-    // determines whether the connection is in error based on the data size threshold
-    var isErrorBytes = function (d) {
-        var percentUseBytes = d.status.aggregateSnapshot.percentUseBytes;
-        if (nfCommon.isDefinedAndNotNull(percentUseBytes)) {
-            return percentUseBytes > 85;
-        }
-
-        return false;
-    };
-
-    // updates the specified connections
-    var updateConnections = function (updated, options) {
-        if (updated.empty()) {
-            return;
-        }
-
-        var updatePath = true;
-        var updateLabel = true;
-        var transition = false;
-
-        // extract the options if specified
-        if (nfCommon.isDefinedAndNotNull(options)) {
-            updatePath = nfCommon.isDefinedAndNotNull(options.updatePath) ? options.updatePath : updatePath;
-            updateLabel = nfCommon.isDefinedAndNotNull(options.updateLabel) ? options.updateLabel : updateLabel;
-            transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-        }
-
-        if (updatePath === true) {
-            updated
-                .classed('grouped', function (d) {
-                    var grouped = false;
-
-                    if (d.permissions.canRead) {
-                        // if there are more than one selected relationship, mark this as grouped
-                        if (nfCommon.isDefinedAndNotNull(d.component.selectedRelationships) && d.component.selectedRelationships.length > 1) {
-                            grouped = true;
-                        }
-                    }
-
-                    return grouped;
+    
+            var connection = entered.append('g')
+                .attr({
+                    'id': function (d) {
+                        return 'id-' + d.id;
+                    },
+                    'class': 'connection'
                 })
-                .classed('ghost', function (d) {
-                    var ghost = false;
-
-                    if (d.permissions.canRead) {
-                        // if the connection has a relationship that is unavailable, mark it a ghost relationship
-                        if (hasUnavailableRelationship(d)) {
-                            ghost = true;
-                        }
-                    }
-
-                    return ghost;
+                .classed('selected', selected);
+    
+            // create a connection between the two components
+            connection.append('path')
+                .attr({
+                    'class': 'connection-path',
+                    'pointer-events': 'none'
                 });
-
-            // update connection path
-            updated.select('path.connection-path')
-                .classed('unauthorized', function (d) {
-                    return d.permissions.canRead === false;
+    
+            // path to show when selection
+            connection.append('path')
+                .attr({
+                    'class': 'connection-selection-path',
+                    'pointer-events': 'none'
                 });
-
-            // update connection behavior
-            updated.select('path.connection-path-selectable')
-                .on('dblclick', function (d) {
-                    if (d.permissions.canWrite && d.permissions.canRead) {
-                        var position = d3.mouse(this.parentNode);
-
-                        // find where to put this bend point
-                        var bendIndex = getNearestSegment({
-                            'x': position[0],
-                            'y': position[1]
-                        }, d);
-
-                        // copy the original to restore if necessary
-                        var bends = d.component.bends.slice();
-
-                        // add it to the collection of points
-                        bends.splice(bendIndex, 0, {
-                            'x': position[0],
-                            'y': position[1]
-                        });
-
-                        var connection = {
-                            id: d.id,
-                            bends: bends
-                        };
-
-                        // update the label index if necessary
-                        var labelIndex = d.component.labelIndex;
-                        if (bends.length === 1) {
-                            connection.labelIndex = 0;
-                        } else if (bendIndex <= labelIndex) {
-                            connection.labelIndex = labelIndex + 1;
-                        }
-
-                        // save the new state
-                        save(d, connection);
-
-                        d3.event.stopPropagation();
-                    } else {
-                        return null;
+    
+            // path to make selection easier
+            connection.append('path')
+                .attr({
+                    'class': 'connection-path-selectable',
+                    'pointer-events': 'stroke'
+                })
+                .on('mousedown.selection', function () {
+                    // select the connection when clicking the selectable path
+                  nfSelectable.select(d3.select(this.parentNode));
+                })
+              .call(nfContextMenu.activate);
+        };
+    
+        // determines whether the specified connection contains an unsupported relationship
+        var hasUnavailableRelationship = function (d) {
+            var unavailable = false;
+    
+            // verify each selected relationship is still available
+          if (nfCommon.isDefinedAndNotNull(d.component.selectedRelationships) && nfCommon.isDefinedAndNotNull(d.component.availableRelationships)) {
+                $.each(d.component.selectedRelationships, function (_, selectedRelationship) {
+                    if ($.inArray(selectedRelationship, d.component.availableRelationships) === -1) {
+                        unavailable = true;
+                        return false;
                     }
                 });
-        }
-
-        updated.each(function (d) {
-            var connection = d3.select(this);
-
+            }
+    
+            return unavailable;
+        };
+    
+      // gets the appropriate end marker
+      var getEndMarker = function (d) {
+          var marker = 'normal';
+  
+          if (d.permissions.canRead) {
+              // if the connection has a relationship that is unavailable, mark it a ghost relationship
+              if (isFullBytes(d) || isFullCount(d)) {
+                  marker = 'full';
+              } else if (hasUnavailableRelationship(d)) {
+                  marker = 'ghost';
+              }
+          } else {
+              marker = 'unauthorized';
+          }
+  
+          return 'url(#' + marker + ')';
+      };
+  
+      // gets the appropriate drop shadow
+      var getDropShadow = function (d) {
+          if (isFullCount(d) || isFullBytes(d)) {
+              return 'url(#connection-full-drop-shadow)';
+          } else {
+              return 'url(#component-drop-shadow)';
+          }
+      };
+  
+      // determines whether the connection is full based on the object count threshold
+      var isFullCount = function (d) {
+          return d.status.aggregateSnapshot.percentUseCount === 100;
+      };
+  
+      // determines whether the connection is in warning based on the object count threshold
+      var isWarningCount = function (d) {
+          var percentUseCount = d.status.aggregateSnapshot.percentUseCount;
+          if (nfCommon.isDefinedAndNotNull(percentUseCount)) {
+              return percentUseCount >= 61 && percentUseCount <= 85;
+          }
+  
+          return false;
+      };
+  
+      // determines whether the connection is in error based on the object count threshold
+      var isErrorCount = function (d) {
+          var percentUseCount = d.status.aggregateSnapshot.percentUseCount;
+          if (nfCommon.isDefinedAndNotNull(percentUseCount)) {
+              return percentUseCount > 85;
+          }
+  
+          return false;
+      };
+  
+      // determines whether the connection is full based on the data size threshold
+      var isFullBytes = function (d) {
+          return d.status.aggregateSnapshot.percentUseBytes === 100
+      };
+  
+      // determines whether the connection is in warning based on the data size threshold
+      var isWarningBytes = function (d) {
+          var percentUseBytes = d.status.aggregateSnapshot.percentUseBytes;
+          if (nfCommon.isDefinedAndNotNull(percentUseBytes)) {
+              return percentUseBytes >= 61 && percentUseBytes <= 85;
+          }
+  
+          return false;
+      };
+  
+      // determines whether the connection is in error based on the data size threshold
+      var isErrorBytes = function (d) {
+          var percentUseBytes = d.status.aggregateSnapshot.percentUseBytes;
+          if (nfCommon.isDefinedAndNotNull(percentUseBytes)) {
+              return percentUseBytes > 85;
+          }
+  
+          return false;
+      };
+  
+        // updates the specified connections
+        var updateConnections = function (updated, options) {
+            if (updated.empty()) {
+                return;
+            }
+    
+            var updatePath = true;
+            var updateLabel = true;
+            var transition = false;
+    
+            // extract the options if specified
+          if (nfCommon.isDefinedAndNotNull(options)) {
+              updatePath = nfCommon.isDefinedAndNotNull(options.updatePath) ? options.updatePath : updatePath;
+              updateLabel = nfCommon.isDefinedAndNotNull(options.updateLabel) ? options.updateLabel : updateLabel;
+              transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+            }
+    
             if (updatePath === true) {
-                // calculate the start and end points
-                var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(d);
-                var sourceData = d3.select('#id-' + sourceComponentId).datum();
-                var end;
-
-                // get the appropriate end anchor point
-                var endAnchor;
-                if (d.bends.length > 0) {
-                    endAnchor = d.bends[d.bends.length - 1];
-                } else {
-                    endAnchor = {
-                        x: sourceData.position.x + (sourceData.dimensions.width / 2),
-                        y: sourceData.position.y + (sourceData.dimensions.height / 2)
-                    };
-                }
-
-                // if we are currently dragging the endpoint to a new target, use that
-                // position, otherwise we need to calculate it for the current target
-                if (nfCommon.isDefinedAndNotNull(d.end) && d.end.dragging === true) {
-                    // since we're dragging, use the same object thats bound to the endpoint drag event
-                    end = d.end;
-
-                    // if we're not over a connectable destination use the current point
-                    var newDestination = d3.select('g.hover.connectable-destination');
-                    if (!newDestination.empty()) {
-                        var newDestinationData = newDestination.datum();
-
-                        // get the position on the new destination perimeter
-                        var newEnd = nfCanvasUtils.getPerimeterPoint(endAnchor, {
-                            'x': newDestinationData.position.x,
-                            'y': newDestinationData.position.y,
-                            'width': newDestinationData.dimensions.width,
-                            'height': newDestinationData.dimensions.height
-                        });
-
-                        // update the coordinates with the new point
-                        end.x = newEnd.x;
-                        end.y = newEnd.y;
-                    }
-                } else {
-                    var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(d);
-                    var destinationData = d3.select('#id-' + destinationComponentId).datum();
-
-                    // get the position on the destination perimeter
-                    end = nfCanvasUtils.getPerimeterPoint(endAnchor, {
-                        'x': destinationData.position.x,
-                        'y': destinationData.position.y,
-                        'width': destinationData.dimensions.width,
-                        'height': destinationData.dimensions.height
-                    });
-                }
-
-                // get the appropriate start anchor point
-                var startAnchor;
-                if (d.bends.length > 0) {
-                    startAnchor = d.bends[0];
-                } else {
-                    startAnchor = end;
-                }
-
-                // get the position on the source perimeter
-                var start = nfCanvasUtils.getPerimeterPoint(startAnchor, {
-                    'x': sourceData.position.x,
-                    'y': sourceData.position.y,
-                    'width': sourceData.dimensions.width,
-                    'height': sourceData.dimensions.height
-                });
-
-                // store the updated endpoints
-                d.start = start;
-                d.end = end;
-
-                // update the connection paths
-                nfCanvasUtils.transition(connection.select('path.connection-path'), transition)
-                    .attr({
-                        'd': function () {
-                            var datum = [d.start].concat(d.bends, [d.end]);
-                            return lineGenerator(datum);
+                updated
+                    .classed('grouped', function (d) {
+                        var grouped = false;
+    
+                        if (d.permissions.canRead) {
+                            // if there are more than one selected relationship, mark this as grouped
+                          if (nfCommon.isDefinedAndNotNull(d.component.selectedRelationships) && d.component.selectedRelationships.length > 1) {
+                                grouped = true;
+                            }
                         }
-                    });
-                nfCanvasUtils.transition(connection.select('path.connection-selection-path'), transition)
-                    .attr({
-                        'd': function () {
-                            var datum = [d.start].concat(d.bends, [d.end]);
-                            return lineGenerator(datum);
+    
+                        return grouped;
+                    })
+                    .classed('ghost', function (d) {
+                        var ghost = false;
+    
+                        if (d.permissions.canRead) {
+                            // if the connection has a relationship that is unavailable, mark it a ghost relationship
+                            if (hasUnavailableRelationship(d)) {
+                                ghost = true;
+                            }
                         }
+    
+                        return ghost;
                     });
-                nfCanvasUtils.transition(connection.select('path.connection-path-selectable'), transition)
-                    .attr({
-                        'd': function () {
-                            var datum = [d.start].concat(d.bends, [d.end]);
-                            return lineGenerator(datum);
-                        }
+    
+                // update connection path
+                updated.select('path.connection-path')
+                    .classed('unauthorized', function (d) {
+                        return d.permissions.canRead === false;
                     });
-
-                // -----
-                // bends
-                // -----
-
-                var startpoints = connection.selectAll('rect.startpoint');
-                var endpoints = connection.selectAll('rect.endpoint');
-                var midpoints = connection.selectAll('rect.midpoint');
-
-                // require read and write permissions as it's required to read the connections available relationships
-                // when connecting to a group or remote group
-                if (d.permissions.canWrite && d.permissions.canRead) {
-
-                    // ------------------
-                    // bends - startpoint
-                    // ------------------
-
-                    startpoints = startpoints.data([d.start]);
-
-                    // create a point for the start
-                    startpoints.enter().append('rect')
-                        .attr({
-                            'class': 'startpoint linepoint',
-                            'pointer-events': 'all',
-                            'width': 8,
-                            'height': 8
-                        })
-                        .on('mousedown.selection', function () {
-                            // select the connection when clicking the label
-                            nfSelectable.select(d3.select(this.parentNode));
-                        })
-                        .call(nfContextMenu.activate);
-
-                    // update the start point
-                    nfCanvasUtils.transition(startpoints, transition)
-                        .attr('transform', function (p) {
-                            return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')';
-                        });
-
-                    // remove old items
-                    startpoints.exit().remove();
-
-                    // ----------------
-                    // bends - endpoint
-                    // ----------------
-
-                    var endpoints = endpoints.data([d.end]);
-
-                    // create a point for the end
-                    endpoints.enter().append('rect')
-                        .call(endpointDrag)
-                        .attr({
-                            'class': 'endpoint linepoint',
-                            'pointer-events': 'all',
-                            'width': 8,
-                            'height': 8
-                        })
-                        .on('mousedown.selection', function () {
-                            // select the connection when clicking the label
-                            nfSelectable.select(d3.select(this.parentNode));
-                        })
-                        .call(nfContextMenu.activate);
-
-                    // update the end point
-                    nfCanvasUtils.transition(endpoints, transition)
-                        .attr('transform', function (p) {
-                            return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')';
-                        });
-
-                    // remove old items
-                    endpoints.exit().remove();
-
-                    // -----------------
-                    // bends - midpoints
-                    // -----------------
-
-                    var midpoints = midpoints.data(d.bends);
-
-                    // create a point for the end
-                    midpoints.enter().append('rect')
-                        .attr({
-                            'class': 'midpoint linepoint',
-                            'pointer-events': 'all',
-                            'width': 8,
-                            'height': 8
-                        })
-                        .call(bendPointDrag)
-                        .on('dblclick', function (p) {
-                            // stop even propagation
-                            d3.event.stopPropagation();
-
-                            var connection = d3.select(this.parentNode);
-                            var connectionData = connection.datum();
-
-                            // if this is a self loop prevent removing the last two bends
-                            var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connectionData);
-                            var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connectionData);
-                            if (sourceComponentId === destinationComponentId && d.component.bends.length <= 2) {
-                                nfDialog.showOkDialog({
-                                    headerText: 'Connection',
-                                    dialogContent: 'Looping connections must have at least two bend points.'
-                                });
-                                return;
-                            }
-
-                            var newBends = [];
-                            var bendIndex = -1;
-
-                            // create a new array of bends without the selected one
-                            $.each(connectionData.component.bends, function (i, bend) {
-                                if (p.x !== bend.x && p.y !== bend.y) {
-                                    newBends.push(bend);
-                                } else {
-                                    bendIndex = i;
-                                }
+    
+                // update connection behavior
+                updated.select('path.connection-path-selectable')
+                    .on('dblclick', function (d) {
+                        if (d.permissions.canWrite && d.permissions.canRead) {
+                            var position = d3.mouse(this.parentNode);
+    
+                            // find where to put this bend point
+                            var bendIndex = getNearestSegment({
+                                'x': position[0],
+                                'y': position[1]
+                            }, d);
+    
+                            // copy the original to restore if necessary
+                            var bends = d.component.bends.slice();
+    
+                            // add it to the collection of points
+                            bends.splice(bendIndex, 0, {
+                                'x': position[0],
+                                'y': position[1]
                             });
-
-                            if (bendIndex < 0) {
-                                return;
-                            }
-
+    
                             var connection = {
-                                id: connectionData.id,
-                                bends: newBends
+                                id: d.id,
+                                bends: bends
                             };
-
+    
                             // update the label index if necessary
-                            var labelIndex = connectionData.component.labelIndex;
-                            if (newBends.length <= 1) {
+                            var labelIndex = d.component.labelIndex;
+                            if (bends.length === 1) {
                                 connection.labelIndex = 0;
                             } else if (bendIndex <= labelIndex) {
-                                connection.labelIndex = Math.max(0, labelIndex - 1);
+                                connection.labelIndex = labelIndex + 1;
                             }
-
-                            // save the updated connection
-                            save(connectionData, connection);
-                        })
-                        .on('mousedown.selection', function () {
-                            // select the connection when clicking the label
-                            nfSelectable.select(d3.select(this.parentNode));
-                        })
-                        .call(nfContextMenu.activate);
-
-                    // update the midpoints
-                    nfCanvasUtils.transition(midpoints, transition)
-                        .attr('transform', function (p) {
-                            return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')';
-                        });
-
-                    // remove old items
-                    midpoints.exit().remove();
-                } else {
-                    // remove the start, mid, and end points
-                    startpoints.remove();
-                    endpoints.remove();
-                    midpoints.remove();
-                }
+    
+                            // save the new state
+                            save(d, connection);
+    
+                            d3.event.stopPropagation();
+                        } else {
+                            return null;
+                        }
+                    });
             }
-
-            if (updateLabel === true) {
-                var connectionLabelContainer = connection.select('g.connection-label-container');
-
-                // update visible connections
-                if (connection.classed('visible')) {
-
-                    // if there is no connection label this connection is becoming
-                    // visible so we need to render it
-                    if (connectionLabelContainer.empty()) {
-                        // connection label container
-                        connectionLabelContainer = connection.insert('g', 'rect.startpoint')
+    
+            updated.each(function (d) {
+                var connection = d3.select(this);
+    
+                if (updatePath === true) {
+                    // calculate the start and end points
+                  var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(d);
+                    var sourceData = d3.select('#id-' + sourceComponentId).datum();
+                    var end;
+    
+                    // get the appropriate end anchor point
+                    var endAnchor;
+                    if (d.bends.length > 0) {
+                        endAnchor = d.bends[d.bends.length - 1];
+                    } else {
+                        endAnchor = {
+                            x: sourceData.position.x + (sourceData.dimensions.width / 2),
+                            y: sourceData.position.y + (sourceData.dimensions.height / 2)
+                        };
+                    }
+    
+                    // if we are currently dragging the endpoint to a new target, use that
+                    // position, otherwise we need to calculate it for the current target
+                  if (nfCommon.isDefinedAndNotNull(d.end) && d.end.dragging === true) {
+                        // since we're dragging, use the same object thats bound to the endpoint drag event
+                        end = d.end;
+    
+                        // if we're not over a connectable destination use the current point
+                        var newDestination = d3.select('g.hover.connectable-destination');
+                        if (!newDestination.empty()) {
+                            var newDestinationData = newDestination.datum();
+    
+                            // get the position on the new destination perimeter
+                          var newEnd = nfCanvasUtils.getPerimeterPoint(endAnchor, {
+                                'x': newDestinationData.position.x,
+                                'y': newDestinationData.position.y,
+                                'width': newDestinationData.dimensions.width,
+                                'height': newDestinationData.dimensions.height
+                            });
+    
+                            // update the coordinates with the new point
+                            end.x = newEnd.x;
+                            end.y = newEnd.y;
+                        }
+                    } else {
+                      var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(d);
+                        var destinationData = d3.select('#id-' + destinationComponentId).datum();
+    
+                        // get the position on the destination perimeter
+                      end = nfCanvasUtils.getPerimeterPoint(endAnchor, {
+                            'x': destinationData.position.x,
+                            'y': destinationData.position.y,
+                            'width': destinationData.dimensions.width,
+                            'height': destinationData.dimensions.height
+                        });
+                    }
+    
+                    // get the appropriate start anchor point
+                    var startAnchor;
+                    if (d.bends.length > 0) {
+                        startAnchor = d.bends[0];
+                    } else {
+                        startAnchor = end;
+                    }
+    
+                    // get the position on the source perimeter
+                  var start = nfCanvasUtils.getPerimeterPoint(startAnchor, {
+                        'x': sourceData.position.x,
+                        'y': sourceData.position.y,
+                        'width': sourceData.dimensions.width,
+                        'height': sourceData.dimensions.height
+                    });
+    
+                    // store the updated endpoints
+                    d.start = start;
+                    d.end = end;
+    
+                    // update the connection paths
+                  nfCanvasUtils.transition(connection.select('path.connection-path'), transition)
+                        .attr({
+                            'd': function () {
+                                var datum = [d.start].concat(d.bends, [d.end]);
+                                return lineGenerator(datum);
+                          }
+                      });
+                  nfCanvasUtils.transition(connection.select('path.connection-selection-path'), transition)
+                        .attr({
+                            'd': function () {
+                                var datum = [d.start].concat(d.bends, [d.end]);
+                                return lineGenerator(datum);
+                            }
+                        });
+                  nfCanvasUtils.transition(connection.select('path.connection-path-selectable'), transition)
+                        .attr({
+                            'd': function () {
+                                var datum = [d.start].concat(d.bends, [d.end]);
+                                return lineGenerator(datum);
+                            }
+                        });
+    
+                    // -----
+                    // bends
+                    // -----
+    
+                    var startpoints = connection.selectAll('rect.startpoint');
+                    var endpoints = connection.selectAll('rect.endpoint');
+                    var midpoints = connection.selectAll('rect.midpoint');
+    
+                    // require read and write permissions as it's required to read the connections available relationships
+                    // when connecting to a group or remote group
+                    if (d.permissions.canWrite && d.permissions.canRead) {
+    
+                        // ------------------
+                        // bends - startpoint
+                        // ------------------
+    
+                        startpoints = startpoints.data([d.start]);
+    
+                        // create a point for the start
+                        startpoints.enter().append('rect')
                             .attr({
-                                'class': 'connection-label-container',
-                                'pointer-events': 'all'
+                                'class': 'startpoint linepoint',
+                                'pointer-events': 'all',
+                                'width': 8,
+                                'height': 8
                             })
                             .on('mousedown.selection', function () {
                                 // select the connection when clicking the label
-                                nfSelectable.select(d3.select(this.parentNode));
+                              nfSelectable.select(d3.select(this.parentNode));
                             })
-                            .call(nfContextMenu.activate);
-
-                        // connection label
-                        connectionLabelContainer.append('rect')
-                            .attr({
-                                'class': 'body',
-                                'width': dimensions.width,
-                                'x': 0,
-                                'y': 0
+                          .call(nfContextMenu.activate);
+    
+                        // update the start point
+                      nfCanvasUtils.transition(startpoints, transition)
+                            .attr('transform', function (p) {
+                                return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')';
                             });
-
-                        // processor border
-                        connectionLabelContainer.append('rect')
+    
+                        // remove old items
+                        startpoints.exit().remove();
+    
+                        // ----------------
+                        // bends - endpoint
+                        // ----------------
+    
+                        var endpoints = endpoints.data([d.end]);
+    
+                        // create a point for the end
+                        endpoints.enter().append('rect')
+                            .call(endpointDrag)
                             .attr({
-                                'class': 'border',
-                                'width': dimensions.width,
-                                'fill': 'transparent',
-                                'stroke': 'transparent'
+                                'class': 'endpoint linepoint',
+                                'pointer-events': 'all',
+                                'width': 8,
+                                'height': 8
+                            })
+                            .on('mousedown.selection', function () {
+                                // select the connection when clicking the label
+                              nfSelectable.select(d3.select(this.parentNode));
+                            })
+                          .call(nfContextMenu.activate);
+    
+                        // update the end point
+                      nfCanvasUtils.transition(endpoints, transition)
+                            .attr('transform', function (p) {
+                                return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')';
                             });
-                    }
-
-                    var labelCount = 0;
-                    var rowHeight = 19;
-                    var backgrounds = [];
-                    var borders = [];
-
-                    var connectionFrom = connectionLabelContainer.select('g.connection-from-container');
-                    var connectionTo = connectionLabelContainer.select('g.connection-to-container');
-                    var connectionName = connectionLabelContainer.select('g.connection-name-container');
-
-                    if (d.permissions.canRead) {
-
-                        // -----------------------
-                        // connection label - from
-                        // -----------------------
-
-                        // determine if the connection require a from label
-                        if (isGroup(d.component.source)) {
-                            // see if the connection from label is already rendered
-                            if (connectionFrom.empty()) {
-                                connectionFrom = connectionLabelContainer.append('g')
-                                    .attr({
-                                        'class': 'connection-from-container'
-                                    });
-
-                                // background
-                                backgrounds.push(connectionFrom.append('rect')
-                                    .attr({
-                                        'class': 'connection-label-background',
-                                        'width': dimensions.width,
-                                        'height': rowHeight
-                                    }));
-
-                                // border
-                                borders.push(connectionFrom.append('rect')
-                                    .attr({
-                                        'class': 'connection-label-border',
-                                        'width': dimensions.width,
-                                        'height': 1
-                                    }));
-
-                                connectionFrom.append('text')
-                                    .attr({
-                                        'class': 'stats-label',
-                                        'x': 5,
-                                        'y': 14
-                                    })
-                                    .text('From');
-
-                                connectionFrom.append('text')
-                                    .attr({
-                                        'class': 'stats-value connection-from',
-                                        'x': 43,
-                                        'y': 14,
-                                        'width': 130
-                                    });
-
-                                connectionFrom.append('text')
-                                    .attr({
-                                        'class': 'connection-from-run-status',
-                                        'x': 185,
-                                        'y': 14
+    
+                        // remove old items
+                        endpoints.exit().remove();
+    
+                        // -----------------
+                        // bends - midpoints
+                        // -----------------
+    
+                        var midpoints = midpoints.data(d.bends);
+    
+                        // create a point for the end
+                        midpoints.enter().append('rect')
+                            .attr({
+                                'class': 'midpoint linepoint',
+                                'pointer-events': 'all',
+                                'width': 8,
+                                'height': 8
+                            })
+                            .call(bendPointDrag)
+                            .on('dblclick', function (p) {
+                                // stop even propagation
+                                d3.event.stopPropagation();
+    
+                                var connection = d3.select(this.parentNode);
+                                var connectionData = connection.datum();
+    
+                                // if this is a self loop prevent removing the last two bends
+                              var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connectionData);
+                              var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connectionData);
+                                if (sourceComponentId === destinationComponentId && d.component.bends.length <= 2) {
+                                  nfDialog.showOkDialog({
+                                      headerText: nf._.msg('nf-connection.Connection'),
+                                      dialogContent: nf._.msg('nf-connection.Message1')
                                     });
-                            } else {
-                                backgrounds.push(connectionFrom.select('rect.connection-label-background'));
-                                borders.push(connectionFrom.select('rect.connection-label-border'));
-                            }
-
-                            // update the connection from positioning
-                            connectionFrom.attr('transform', function () {
-                                var y = (rowHeight * labelCount++);
-                                return 'translate(0, ' + y + ')';
-                            });
-
-                            // update the label text
-                            connectionFrom.select('text.connection-from')
-                                .each(function () {
-                                    var connectionFromLabel = d3.select(this);
-
-                                    // reset the label name to handle any previous state
-                                    connectionFromLabel.text(null).selectAll('title').remove();
-
-                                    // apply ellipsis to the label as necessary
-                                    nfCanvasUtils.ellipsis(connectionFromLabel, d.component.source.name);
-                                }).append('title').text(function () {
-                                return d.component.source.name;
-                            });
-
-                            // update the label run status
-                            connectionFrom.select('text.connection-from-run-status')
-                                .text(function () {
-                                    if (d.component.source.exists === false) {
-                                        return '\uf071';
-                                    } else if (d.component.source.running === true) {
-                                        return '\uf04b';
-                                    } else {
-                                        return '\uf04d';
-                                    }
-                                })
-                                .classed('running', function () {
-                                    if (d.component.source.exists === false) {
-                                        return false;
+                                    return;
+                                }
+    
+                                var newBends = [];
+                                var bendIndex = -1;
+    
+                                // create a new array of bends without the selected one
+                                $.each(connectionData.component.bends, function (i, bend) {
+                                    if (p.x !== bend.x && p.y !== bend.y) {
+                                        newBends.push(bend);
                                     } else {
-                                        return d.component.source.running;
+                                        bendIndex = i;
                                     }
+                                });
+    
+                                if (bendIndex < 0) {
+                                    return;
+                                }
+    
+                                var connection = {
+                                    id: connectionData.id,
+                                    bends: newBends
+                                };
+    
+                                // update the label index if necessary
+                                var labelIndex = connectionData.component.labelIndex;
+                                if (newBends.length <= 1) {
+                                    connection.labelIndex = 0;
+                                } else if (bendIndex <= labelIndex) {
+                                    connection.labelIndex = Math.max(0, labelIndex - 1);
+                                }
+    
+                                // save the updated connection
+                                save(connectionData, connection);
+                            })
+                            .on('mousedown.selection', function () {
+                                // select the connection when clicking the label
+                              nfSelectable.select(d3.select(this.parentNode));
+                            })
+                          .call(nfContextMenu.activate);
+    
+                        // update the midpoints
+                      nfCanvasUtils.transition(midpoints, transition)
+                            .attr('transform', function (p) {
+                                return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')';
+                            });
+    
+                        // remove old items
+                        midpoints.exit().remove();
+                    } else {
+                        // remove the start, mid, and end points
+                        startpoints.remove();
+                        endpoints.remove();
+                        midpoints.remove();
+                    }
+                }
+    
+                if (updateLabel === true) {
+                    var connectionLabelContainer = connection.select('g.connection-label-container');
+    
+                    // update visible connections
+                    if (connection.classed('visible')) {
+    
+                        // if there is no connection label this connection is becoming
+                        // visible so we need to render it
+                        if (connectionLabelContainer.empty()) {
+                            // connection label container
+                            connectionLabelContainer = connection.insert('g', 'rect.startpoint')
+                                .attr({
+                                    'class': 'connection-label-container',
+                                    'pointer-events': 'all'
                                 })
-                                .classed('stopped', function () {
-                                    if (d.component.source.exists === false) {
-                                        return false;
-                                    } else {
-                                        return !d.component.source.running;
-                                    }
+                                .on('mousedown.selection', function () {
+                                    // select the connection when clicking the label
+                                  nfSelectable.select(d3.select(this.parentNode));
                                 })
-                                .classed('is-missing-port', function () {
-                                    return d.component.source.exists === false;
+                              .call(nfContextMenu.activate);
+    
+                            // connection label
+                            connectionLabelContainer.append('rect')
+                                .attr({
+                                    'class': 'body',
+                                    'width': dimensions.width,
+                                    'x': 0,
+                                  'y': 0
+                                });
+    
+                            // processor border
+                            connectionLabelContainer.append('rect')
+                                .attr({
+                                    'class': 'border',
+                                    'width': dimensions.width,
+                                    'fill': 'transparent',
+                                    'stroke': 'transparent'
                                 });
-                        } else {
-                            // there is no connection from, remove the previous if necessary
-                            connectionFrom.remove();
                         }
-
-                        // ---------------------
-                        // connection label - to
-                        // ---------------------
-
-                        // determine if the connection require a to label
-                        if (isGroup(d.component.destination)) {
-                            // see if the connection to label is already rendered
-                            if (connectionTo.empty()) {
-                                connectionTo = connectionLabelContainer.append('g')
-                                    .attr({
-                                        'class': 'connection-to-container'
-                                    });
-
-                                // background
-                                backgrounds.push(connectionTo.append('rect')
-                                    .attr({
-                                        'class': 'connection-label-background',
-                                        'width': dimensions.width,
-                                        'height': rowHeight
-                                    }));
-
-                                // border
-                                borders.push(connectionTo.append('rect')
-                                    .attr({
-                                        'class': 'connection-label-border',
-                                        'width': dimensions.width,
-                                        'height': 1
-                                    }));
-
-                                connectionTo.append('text')
-                                    .attr({
-                                        'class': 'stats-label',
-                                        'x': 5,
-                                        'y': 14
+    
+                        var labelCount = 0;
+                        var rowHeight = 19;
+                        var backgrounds = [];
+                        var borders = [];
+    
+                        var connectionFrom = connectionLabelContainer.select('g.connection-from-container');
+                        var connectionTo = connectionLabelContainer.select('g.connection-to-container');
+                        var connectionName = connectionLabelContainer.select('g.connection-name-container');
+    
+                        if (d.permissions.canRead) {
+    
+                            // -----------------------
+                            // connection label - from
+                            // -----------------------
+    
+                            // determine if the connection require a from label
+                            if (isGroup(d.component.source)) {
+                                // see if the connection from label is already rendered
+                                if (connectionFrom.empty()) {
+                                    connectionFrom = connectionLabelContainer.append('g')
+                                        .attr({
+                                            'class': 'connection-from-container'
+                                        });
+    
+                                    // background
+                                    backgrounds.push(connectionFrom.append('rect')
+                                        .attr({
+                                            'class': 'connection-label-background',
+                                            'width': dimensions.width,
+                                            'height': rowHeight
+                                        }));
+    
+                                    // border
+                                    borders.push(connectionFrom.append('rect')
+                                        .attr({
+                                            'class': 'connection-label-border',
+                                            'width': dimensions.width,
+                                            'height': 1
+                                        }));
+    
+                                    connectionFrom.append('text')
+                                        .attr({
+                                            'class': 'stats-label',
+                                            'x': 5,
+                                            'y': 14
+                                        })
+                                      .text(nf._.msg('nf-connection.From'));
+    
+                                    connectionFrom.append('text')
+                                        .attr({
+                                            'class': 'stats-value connection-from',
+                                            'x': 43,
+                                            'y': 14,
+                                            'width': 130
+                                        });
+    
+                                    connectionFrom.append('text')
+                                        .attr({
+                                            'class': 'connection-from-run-status',
+                                            'x': 185,
+                                            'y': 14
+                                        });
+                                } else {
+                                    backgrounds.push(connectionFrom.select('rect.connection-label-background'));
+                                    borders.push(connectionFrom.select('rect.connection-label-border'));
+                                }
+    
+                                // update the connection from positioning
+                                connectionFrom.attr('transform', function () {
+                                    var y = (rowHeight * labelCount++);
+                                    return 'translate(0, ' + y + ')';
+                                });
+    
+                                // update the label text
+                                connectionFrom.select('text.connection-from')
+                                    .each(function () {
+                                        var connectionFromLabel = d3.select(this);
+    
+                                        // reset the label name to handle any previous state
+                                        connectionFromLabel.text(null).selectAll('title').remove();
+    
+                                        // apply ellipsis to the label as necessary
+                                      nfCanvasUtils.ellipsis(connectionFromLabel, d.component.source.name);
+                                    }).append('title').text(function () {
+                                    return d.component.source.name;
+                                });
+    
+                                // update the label run status
+                                connectionFrom.select('text.connection-from-run-status')
+                                    .text(function () {
+                                        if (d.component.source.exists === false) {
+                                            return '\uf071';
+                                        } else if (d.component.source.running === true) {
+                                            return '\uf04b';
+                                        } else {
+                                            return '\uf04d';
+                                        }
                                     })
-                                    .text('To');
-
-                                connectionTo.append('text')
-                                    .attr({
-                                        'class': 'stats-value connection-to',
-                                        'x': 25,
-                                        'y': 14,
-                                        'width': 145
-                                    });
-
-                                connectionTo.append('text')
-                                    .attr({
-                                        'class': 'connection-to-run-status',
-                                        'x': 185,
-                                        'y': 14
+                                  .classed('running', function () {
+                                      if (d.component.source.exists === false) {
+                                          return false;
+                                      } else {
+                                          return d.component.source.running;
+                                      }
+                                  })
+                                  .classed('stopped', function () {
+                                      if (d.component.source.exists === false) {
+                                          return false;
+                                      } else {
+                                          return !d.component.source.running;
+                                      }
+                                  })
+                                    .classed('is-missing-port', function () {
+                                        return d.component.source.exists === false;
                                     });
                             } else {
-                                backgrounds.push(connectionTo.select('rect.connection-label-background'));
-                                borders.push(connectionTo.select('rect.connection-label-border'));
+                                // there is no connection from, remove the previous if necessary
+                                connectionFrom.remove();
                             }
-
-                            // update the connection to positioning
-                            connectionTo.attr('transform', function () {
-                                var y = (rowHeight * labelCount++);
-                                return 'translate(0, ' + y + ')';
-                            });
-
-                            // update the label text
-                            connectionTo.select('text.connection-to')
-                                .each(function (d) {
-                                    var connectionToLabel = d3.select(this);
-
-                                    // reset the label name to handle any previous state
-                                    connectionToLabel.text(null).selectAll('title').remove();
-
-                                    // apply ellipsis to the label as necessary
-                                    nfCanvasUtils.ellipsis(connectionToLabel, d.component.destination.name);
-                                }).append('title').text(function (d) {
-                                return d.component.destination.name;
-                            });
-
-                            // update the label run status
-                            connectionTo.select('text.connection-to-run-status')
-                                .text(function () {
-                                    if (d.component.destination.exists === false) {
-                                        return '\uf071';
-                                    } else if (d.component.destination.running === true) {
-                                        return '\uf04b';
-                                    } else {
-                                        return '\uf04d';
-                                    }
-                                })
-                                .classed('running', function () {
-                                    if (d.component.destination.exists === false) {
-                                        return false;
-                                    } else {
-                                        return d.component.destination.running;
-                                    }
-                                })
-                                .classed('stopped', function () {
-                                    if (d.component.destination.exists === false) {
-                                        return false;
-                                    } else {
-                                        return !d.component.destination.running;
-                                    }
-                                })
-                                .classed('is-missing-port', function () {
-                                    return d.component.destination.exists === false;
+    
+                            // ---------------------
+                            // connection label - to
+                            // ---------------------
+    
+                            // determine if the connection require a to label
+                            if (isGroup(d.component.destination)) {
+                                // see if the connection to label is already rendered
+                                if (connectionTo.empty()) {
+                                    connectionTo = connectionLabelContainer.append('g')
+                                        .attr({
+                                            'class': 'connection-to-container'
+                                        });
+    
+                                    // background
+                                    backgrounds.push(connectionTo.append('rect')
+                                        .attr({
+                                            'class': 'connection-label-background',
+                                            'width': dimensions.width,
+                                            'height': rowHeight
+                                        }));
+    
+                                    // border
+                                    borders.push(connectionTo.append('rect')
+                                        .attr({
+                                            'class': 'connection-label-border',
+                                            'width': dimensions.width,
+                                            'height': 1
+                                        }));
+    
+                                    connectionTo.append('text')
+                                        .attr({
+                                            'class': 'stats-label',
+                                            'x': 5,
+                                            'y': 14
+                                        })
+                                      .text(nf._.msg('nf-connection.To'));
+    
+                                    connectionTo.append('text')
+                                        .attr({
+                                            'class': 'stats-value connection-to',
+                                            'x': 25,
+                                            'y': 14,
+                                            'width': 145
+                                        });
+    
+                                    connectionTo.append('text')
+                                        .attr({
+                                            'class': 'connection-to-run-status',
+                                            'x': 185,
+                                            'y': 14
+                                        });
+                                } else {
+                                    backgrounds.push(connectionTo.select('rect.connection-label-background'));
+                                    borders.push(connectionTo.select('rect.connection-label-border'));
+                                }
+    
+                                // update the connection to positioning
+                                connectionTo.attr('transform', function () {
+                                    var y = (rowHeight * labelCount++);
+                                    return 'translate(0, ' + y + ')';
                                 });
-                        } else {
-                            // there is no connection to, remove the previous if necessary
-                            connectionTo.remove();
-                        }
-
-                        // -----------------------
-                        // connection label - name
-                        // -----------------------
-
-                        // get the connection name
-                        var connectionNameValue = nfCanvasUtils.formatConnectionName(d.component);
-
-                        // is there a name to render
-                        if (!nfCommon.isBlank(connectionNameValue)) {
-                            // see if the connection name label is already rendered
-                            if (connectionName.empty()) {
-                                connectionName = connectionLabelContainer.append('g')
-                                    .attr({
-                                        'class': 'connection-name-container'
-                                    });
-
-                                // background
-                                backgrounds.push(connectionName.append('rect')
-                                    .attr({
-                                        'class': 'connection-label-background',
-                                        'width': dimensions.width,
-                                        'height': rowHeight
-                                    }));
-
-                                // border
-                                borders.push(connectionName.append('rect')
-                                    .attr({
-                                        'class': 'connection-label-border',
-                                        'width': dimensions.width,
-                                        'height': 1
-                                    }));
-
-                                connectionName.append('text')
-                                    .attr({
-                                        'class': 'stats-label',
-                                        'x': 5,
-                                        'y': 14
+    
+                                // update the label text
+                                connectionTo.select('text.connection-to')
+                                    .each(function (d) {
+                                        var connectionToLabel = d3.select(this);
+    
+                                        // reset the label name to handle any previous state
+                                        connectionToLabel.text(null).selectAll('title').remove();
+    
+                                        // apply ellipsis to the label as necessary
+                                      nfCanvasUtils.ellipsis(connectionToLabel, d.component.destination.name);
+                                    }).append('title').text(function (d) {
+                                    return d.component.destination.name;
+                                });
+    
+                                // update the label run status
+                                connectionTo.select('text.connection-to-run-status')
+                                    .text(function () {
+                                        if (d.component.destination.exists === false) {
+                                            return '\uf071';
+                                        } else if (d.component.destination.running === true) {
+                                            return '\uf04b';
+                                        } else {
+                                            return '\uf04d';
+                                        }
                                     })
-                                    .text('Name');
-
-                                connectionName.append('text')
-                                    .attr({
-                                        'class': 'stats-value connection-name',
-                                        'x': 45,
-                                        'y': 14,
-                                        'width': 142
+                                  .classed('running', function () {
+                                      if (d.component.destination.exists === false) {
+                                          return false;
+                                      } else {
+                                          return d.component.destination.running;
+                                      }
+                                  })
+                                  .classed('stopped', function () {
+                                      if (d.component.destination.exists === false) {
+                                          return false;
+                                      } else {
+                                          return !d.component.destination.running;
+                                      }
+                                  })
+                                    .classed('is-missing-port', function () {
+                                        return d.component.destination.exists === false;
                                     });
                             } else {
-                                backgrounds.push(connectionName.select('rect.connection-label-background'));
-                                borders.push(connectionName.select('rect.connection-label-border'));
+                                // there is no connection to, remove the previous if necessary
+                                connectionTo.remove();
+                            }
+    
+                            // -----------------------
+                            // connection label - name
+                            // -----------------------
+    
+                            // get the connection name
+                          var connectionNameValue = nfCanvasUtils.formatConnectionName(d.component);
+    
+                            // is there a name to render
+                          if (!nfCommon.isBlank(connectionNameValue)) {
+                                // see if the connection name label is already rendered
+                                if (connectionName.empty()) {
+                                    connectionName = connectionLabelContainer.append('g')
+                                        .attr({
+                                            'class': 'connection-name-container'
+                                        });
+    
+                                    // background
+                                    backgrounds.push(connectionName.append('rect')
+                                        .attr({
+                                            'class': 'connection-label-background',
+                                            'width': dimensions.width,
+                                            'height': rowHeight
+                                        }));
+    
+                                    // border
+                                    borders.push(connectionName.append('rect')
+                                        .attr({
+                                            'class': 'connection-label-border',
+                                            'width': dimensions.width,
+                                            'height': 1
+                                        }));
+    
+                                    connectionName.append('text')
+                                        .attr({
+                                            'class': 'stats-label',
+                                            'x': 5,
+                                            'y': 14
+                                        })
+                                      .text(nf._.msg('nf-connection.Name'));
+    
+                                    connectionName.append('text')
+                                        .attr({
+                                            'class': 'stats-value connection-name',
+                                            'x': 45,
+                                            'y': 14,
+                                            'width': 142
+                                        });
+                                } else {
+                                    backgrounds.push(connectionName.select('rect.connection-label-background'));
+                                    borders.push(connectionName.select('rect.connection-label-border'));
+                                }
+    
+                                // update the connection name positioning
+                                connectionName.attr('transform', function () {
+                                    var y = (rowHeight * labelCount++);
+                                    return 'translate(0, ' + y + ')';
+                                });
+    
+                                // update the connection name
+                                connectionName.select('text.connection-name')
+                                    .each(function () {
+                                        var connectionToLabel = d3.select(this);
+    
+                                        // reset the label name to handle any previous state
+                                        connectionToLabel.text(null).selectAll('title').remove();
+    
+                                        // apply ellipsis to the label as necessary
+                                      nfCanvasUtils.ellipsis(connectionToLabel, connectionNameValue);
+                                    }).append('title').text(function () {
+                                    return connectionNameValue;
+                                });
+                            } else {
+                                // there is no connection name, remove the previous if necessary
+                                connectionName.remove();
                             }
-
-                            // update the connection name positioning
-                            connectionName.attr('transform', function () {
-                                var y = (rowHeight * labelCount++);
-                                return 'translate(0, ' + y + ')';
-                            });
-
-                            // update the connection name
-                            connectionName.select('text.connection-name')
-                                .each(function () {
-                                    var connectionToLabel = d3.select(this);
-
-                                    // reset the label name to handle any previous state
-                                    connectionToLabel.text(null).selectAll('title').remove();
-
-                                    // apply ellipsis to the label as necessary
-                                    nfCanvasUtils.ellipsis(connectionToLabel, connectionNameValue);
-                                }).append('title').text(function () {
-                                return connectionNameValue;
-                            });
                         } else {
-                            // there is no connection name, remove the previous if necessary
+                            // no permissions to read to remove previous if necessary
+                            connectionFrom.remove();
+                            connectionTo.remove();
                             connectionName.remove();
                         }
+    
+                        // -------------------------
+                        // connection label - queued
+                        // -------------------------
+    
+                      var HEIGHT_FOR_BACKPRESSURE = 3;
+  
+                        // see if the queue label is already rendered
+                        var queued = connectionLabelContainer.select('g.queued-container');
+                        if (queued.empty()) {
+                            queued = connectionLabelContainer.append('g')
+                                .attr({
+                                    'class': 'queued-container'
+                                });
+    
+                            // background
+                            backgrounds.push(queued.append('rect')
+                                .attr({
+                                    'class': 'connection-label-background',
+                                    'width': dimensions.width,
+                                  'height': rowHeight + HEIGHT_FOR_BACKPRESSURE
+                                }));
+    
+                            // border
+                            borders.push(queued.append('rect')
+                                .attr({
+                                    'class': 'connection-label-border',
+                                    'width': dimensions.width,
+                                    'height': 1
+                                }));
+    
+                            queued.append('text')
+                                .attr({
+                                    'class': 'stats-label',
+                                    'x': 5,
+                                    'y': 14
+                                })
+                              .text(nf._.msg('nf-connection.Queued'));
+    
+                            var queuedText = queued.append('text')
+                                .attr({
+                                    'class': 'stats-value queued',
+                                    'x': 55,
+                                    'y': 14
+                                });
+    
+                            // queued count
+                            queuedText.append('tspan')
+                                .attr({
+                                    'class': 'count'
+                                });
+    
+                            // queued size
+                            queuedText.append('tspan')
+                                .attr({
+                                    'class': 'size'
+                                });
+    
+                          // expiration icon
+                            queued.append('text')
+                                .attr({
+                                    'class': 'expiration-icon',
+                                    'x': 185,
+                                    'y': 14
+                              })
+                                .text(function () {
+                                    return '\uf017';
+                                })
+                              .append('title');
+  
+                          var yBackpressureOffset = rowHeight + HEIGHT_FOR_BACKPRESSURE - 4;
+  
+                          // backpressure object threshold
+  
+                          // start
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-tick object',
+                                  'width': 1,
+                                  'height': 3,
+                                  'x': 5,
+                                  'y': yBackpressureOffset
+                              });
+  
+                          // bar
+                          var backpressureCountOffset = 6;
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-object',
+                                  'width': backpressureBarWidth,
+                                  'height': 3,
+                                  'x': backpressureCountOffset,
+                                  'y': yBackpressureOffset
+                              })
+                              .append('title');
+  
+                          // end
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-tick object',
+                                  'width': 1,
+                                  'height': 3,
+                                  'x': backpressureCountOffset + backpressureBarWidth,
+                                  'y': yBackpressureOffset
+                              });
+  
+                          // percent full
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-percent object',
+                                  'width': 0,
+                                  'height': 3,
+                                  'x': backpressureCountOffset,
+                                  'y': yBackpressureOffset
+                              });
+  
+                          // backpressure data size threshold
+  
+                          // start
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-tick data-size',
+                                  'width': 1,
+                                  'height': 3,
+                                  'x': (dimensions.width / 2) + 10,
+                                  'y': yBackpressureOffset
+                              });
+  
+                          // bar
+                          var backpressureDataSizeOffset = (dimensions.width / 2) + 10 + 1;
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-data-size',
+                                  'width': backpressureBarWidth,
+                                  'height': 3,
+                                  'x': backpressureDataSizeOffset,
+                                  'y': yBackpressureOffset
+                              })
+                              .append('title');
+  
+                          // end
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-tick data-size',
+                                  'width': 1,
+                                  'height': 3,
+                                  'x': backpressureDataSizeOffset + backpressureBarWidth,
+                                  'y': yBackpressureOffset
+                              });
+  
+                          // percent full
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-percent data-size',
+                                  'width': 0,
+                                  'height': 3,
+                                  'x': backpressureDataSizeOffset,
+                                  'y': yBackpressureOffset
+                              });
+                      } else {
+                          backgrounds.push(queued.select('rect.connection-label-background'));
+                          borders.push(queued.select('rect.connection-label-border'));
+                      }
+  
+                      // update the queued vertical positioning as necessary
+                      queued.attr('transform', function () {
+                          var y = (rowHeight * labelCount++);
+                          return 'translate(0, ' + y + ')';
+                      });
+  
+                      // update the height based on the labels being rendered
+                      connectionLabelContainer.select('rect.body')
+                          .attr('height', function () {
+                              return (rowHeight * labelCount) + HEIGHT_FOR_BACKPRESSURE;
+                          })
+                          .classed('unauthorized', function () {
+                              return d.permissions.canRead === false;
+                          });
+                      connectionLabelContainer.select('rect.border')
+                          .attr('height', function () {
+                              return (rowHeight * labelCount) + HEIGHT_FOR_BACKPRESSURE;
+                          })
+                          .classed('unauthorized', function () {
+                              return d.permissions.canRead === false;
+                          });
+  
+                      // update the coloring of the backgrounds
+                      $.each(backgrounds, function (i, background) {
+                          if (i % 2 === 0) {
+                              background.attr('fill', '#f4f6f7');
+                          } else {
+                              background.attr('fill', '#ffffff');
+                          }
+                      });
+  
+                      // update the coloring of the label borders
+                      $.each(borders, function (i, border) {
+                          if (i > 0) {
+                              border.attr('fill', '#c7d2d7');
+                          } else {
+                              border.attr('fill', 'transparent');
+                          }
+                      });
+  
+                      // determine whether or not to show the expiration icon
+                      connectionLabelContainer.select('text.expiration-icon')
+                          .classed('hidden', function () {
+                              if (d.permissions.canRead) {
+                                  return !isExpirationConfigured(d.component);
+                              } else {
+                                  return true;
+                              }
+                          })
+                          .select('title').text(function () {
+                            if (d.permissions.canRead) {
+                                  return nf._.msg('nf-connection.FlowFilesOlder') + d.component.flowFileExpiration;
+                            } else {
+                                return '';
+                            }
+                        });
+    
+                      // update backpressure object fill
+                      connectionLabelContainer.select('rect.backpressure-object')
+                          .classed('not-configured', function () {
+                              return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseCount);
+                          });
+                      connectionLabelContainer.selectAll('rect.backpressure-tick.object')
+                          .classed('not-configured', function () {
+                              return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseCount);
+                          });
+  
+                      // update backpressure data size fill
+                      connectionLabelContainer.select('rect.backpressure-data-size')
+                          .classed('not-configured', function () {
+                              return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseBytes);
+                          });
+                      connectionLabelContainer.selectAll('rect.backpressure-tick.data-size')
+                          .classed('not-configured', function () {
+                              return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseBytes);
+                          });
+  
+                        if (d.permissions.canWrite) {
+                            // only support dragging the label when appropriate
+                            connectionLabelContainer.call(labelDrag);
+                        }
+    
+                        // update the connection status
+                        connection.call(updateConnectionStatus);
                     } else {
-                        // no permissions to read to remove previous if necessary
-                        connectionFrom.remove();
-                        connectionTo.remove();
-                        connectionName.remove();
-                    }
-
-                    // -------------------------
-                    // connection label - queued
-                    // -------------------------
-
-                    var HEIGHT_FOR_BACKPRESSURE = 3;
-
-                    // see if the queue label is already rendered
-                    var queued = connectionLabelContainer.select('g.queued-container');
-                    if (queued.empty()) {
-                        queued = connectionLabelContainer.append('g')
-                            .attr({
-                                'class': 'queued-container'
-                            });
-
-                        // background
-                        backgrounds.push(queued.append('rect')
-                            .attr({
-                                'class': 'connection-label-background',
-                                'width': dimensions.width,
-                                'height': rowHeight + HEIGHT_FOR_BACKPRESSURE
-                            }));
-
-                        // border
-                        borders.push(queued.append('rect')
-                            .attr({
-                                'class': 'connection-label-border',
-                                'width': dimensions.width,
-                                'height': 1
-                            }));
-
-                        queued.append('text')
-                            .attr({
-                                'class': 'stats-label',
-                                'x': 5,
-                                'y': 14
-                            })
-                            .text('Queued');
-
-                        var queuedText = queued.append('text')
-                            .attr({
-                                'class': 'stats-value queued',
-                                'x': 55,
-                                'y': 14
-                            });
-
-                        // queued count
-                        queuedText.append('tspan')
-                            .attr({
-                                'class': 'count'
-                            });
-
-                        // queued size
-                        queuedText.append('tspan')
-                            .attr({
-                                'class': 'size'
-                            });
-
-                        // expiration icon
-                        queued.append('text')
-                            .attr({
-                                'class': 'expiration-icon',
-                                'x': 185,
-                                'y': 14
-                            })
-                            .text(function () {
-                                return '\uf017';
-                            })
-                            .append('title');
-
-                        var yBackpressureOffset = rowHeight + HEIGHT_FOR_BACKPRESSURE - 4;
-
-                        // backpressure object threshold
-
-                        // start
-                        queued.append('rect')
-                            .attr({
-                                'class': 'backpressure-tick object',
-                                'width': 1,
-                                'height': 3,
-                                'x': 5,
-                                'y': yBackpressureOffset
-                            });
-
-                        // bar
-                        var backpressureCountOffset = 6;
-                        queued.append('rect')
-                            .attr({
-                                'class': 'backpressure-object',
-                                'width': backpressureBarWidth,
-                                'height': 3,
-                                'x': backpressureCountOffset,
-                                'y': yBackpressureOffset
-                            })
-                            .append('title');
-
-                        // end
-                        queued.append('rect')
-                            .attr({
-                                'class': 'backpressure-tick object',
-                                'width': 1,
-                                'height': 3,
-                                'x': backpressureCountOffset + backpressureBarWidth,
-                                'y': yBackpressureOffset
-                            });
-
-                        // percent full
-                        queued.append('rect')
-                            .attr({
-                                'class': 'backpressure-percent object',
-                                'width': 0,
-                                'height': 3,
-                                'x': backpressureCountOffset,
-                                'y': yBackpressureOffset
-                            });
-
-                        // backpressure data size threshold
-
-                        // start
-                        queued.append('rect')
-                            .attr({
-                                'class': 'backpressure-tick data-size',
-                                'width': 1,
-                                'height': 3,
-                                'x': (dimensions.width / 2) + 10,
-                                'y': yBackpressureOffset
-                            });
-
-                        // bar
-                        var backpressureDataSizeOffset = (dimensions.width / 2) + 10 + 1;
-                        queued.append('rect')
-                            .attr({
-                                'class': 'backpressure-data-size',
-                                'width': backpressureBarWidth,
-                                'height': 3,
-                                'x': backpressureDataSizeOffset,
-                                'y': yBackpressureOffset
-                            })
-                            .append('title');
-
-                        // end
-                        queued.append('rect')
-                            .attr({
-                                'class': 'backpressure-tick data-size',
-                                'width': 1,
-                                'height': 3,
-                                'x': backpressureDataSizeOffset + backpressureBarWidth,
-                                'y': yBackpressureOffset
-                            });
-
-                        // percent full
-                        queued.append('rect')
-                            .attr({
-                                'class': 'backpressure-percent data-size',
-                                'width': 0,
-                                'height': 3,
-                                'x': backpressureDataSizeOffset,
-                                'y': yBackpressureOffset
-                            });
-                    } else {
-                        backgrounds.push(queued.select('rect.connection-label-background'));
-                        borders.push(queued.select('rect.connection-label-border'));
-                    }
-
-                    // update the queued vertical positioning as necessary
-                    queued.attr('transform', function () {
-                        var y = (rowHeight * labelCount++);
-                        return 'translate(0, ' + y + ')';
-                    });
-
-                    // update the height based on the labels being rendered
-                    connectionLabelContainer.select('rect.body')
-                        .attr('height', function () {
-                            return (rowHeight * labelCount) + HEIGHT_FOR_BACKPRESSURE;
-                        })
-                        .classed('unauthorized', function () {
-                            return d.permissions.canRead === false;
-                        });
-                    connectionLabelContainer.select('rect.border')
-                        .attr('height', function () {
-                            return (rowHeight * labelCount) + HEIGHT_FOR_BACKPRESSURE;
-                        })
-                        .classed('unauthorized', function () {
-                            return d.permissions.canRead === false;
-                        });
-
-                    // update the coloring of the backgrounds
-                    $.each(backgrounds, function (i, background) {
-                        if (i % 2 === 0) {
-                            background.attr('fill', '#f4f6f7');
-                        } else {
-                            background.attr('fill', '#ffffff');
-                        }
-                    });
-
-                    // update the coloring of the label borders
-                    $.each(borders, function (i, border) {
-                        if (i > 0) {
-                            border.attr('fill', '#c7d2d7');
-                        } else {
-                            border.attr('fill', 'transparent');
-                        }
-                    });
-
-                    // determine whether or not to show the expiration icon
-                    connectionLabelContainer.select('text.expiration-icon')
-                        .classed('hidden', function () {
-                            if (d.permissions.canRead) {
-                                return !isExpirationConfigured(d.component);
-                            } else {
-                                return true;
-                            }
-                        })
-                        .select('title').text(function () {
-                        if (d.permissions.canRead) {
-                            return 'Expires FlowFiles older than ' + d.component.flowFileExpiration;
-                        } else {
-                            return '';
-                        }
-                    });
-
-                    // update backpressure object fill
-                    connectionLabelContainer.select('rect.backpressure-object')
-                        .classed('not-configured', function () {
-                            return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseCount);
-                        });
-                    connectionLabelContainer.selectAll('rect.backpressure-tick.object')
-                        .classed('not-configured', function () {
-                            return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseCount);
-                        });
-
-                    // update backpressure data size fill
-                    connectionLabelContainer.select('rect.backpressure-data-size')
-                        .classed('not-configured', function () {
-                            return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseBytes);
-                        });
-                    connectionLabelContainer.selectAll('rect.backpressure-tick.data-size')
-                        .classed('not-configured', function () {
-                            return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseBytes);
-                        });
-
-                    if (d.permissions.canWrite) {
-                        // only support dragging the label when appropriate
-                        connectionLabelContainer.call(labelDrag);
-                    }
-
-                    // update the connection status
-                    connection.call(updateConnectionStatus);
-                } else {
-                    if (!connectionLabelContainer.empty()) {
-                        connectionLabelContainer.remove();
+                        if (!connectionLabelContainer.empty()) {
+                            connectionLabelContainer.remove();
+                        }
                     }
                 }
-            }
-
-            // update the position of the label if possible
-            nfCanvasUtils.transition(connection.select('g.connection-label-container'), transition)
-                .attr('transform', function () {
-                    var label = d3.select(this).select('rect.body');
-                    var position = getLabelPosition(label);
-                    return 'translate(' + position.x + ', ' + position.y + ')';
-                });
-        });
-    };
-
-    /**
-     * Updates the stats of the connections in the specified selection.
-     *
-     * @param {selection} updated       The selected connections to update
-     */
-    var updateConnectionStatus = function (updated) {
-        if (updated.empty()) {
-            return;
-        }
-
-        // update data size
-        var dataSizeDeferred = $.Deferred(function (deferred) {
-            // queued count value
-            updated.select('text.queued tspan.count')
-                .text(function (d) {
-                    return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.queued, ' ');
-                });
-
-            var backpressurePercentDataSize = updated.select('rect.backpressure-percent.data-size');
-            backpressurePercentDataSize.transition()
-                .duration(400)
-                .attr({
-                    'width': function (d) {
-                        if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseBytes)) {
-                            return (backpressureBarWidth * d.status.aggregateSnapshot.percentUseBytes) / 100;
-                        } else {
-                            return 0;
-                        }
-                    }
-                }).each('end', function () {
-                backpressurePercentDataSize
-                    .classed('warning', function (d) {
-                        return isWarningBytes(d);
-                    })
-                    .classed('error', function (d) {
-                        return isErrorBytes(d);
+    
+                // update the position of the label if possible
+              nfCanvasUtils.transition(connection.select('g.connection-label-container'), transition)
+                    .attr('transform', function () {
+                        var label = d3.select(this).select('rect.body');
+                        var position = getLabelPosition(label);
+                        return 'translate(' + position.x + ', ' + position.y + ')';
                     });
-
-                deferred.resolve();
             });
-
-            updated.select('rect.backpressure-data-size').select('title').text(function (d) {
-                if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseBytes)) {
-                    return 'Queue is ' + d.status.aggregateSnapshot.percentUseBytes + '% full based on Back Pressure Data Size Threshold';
-                } else {
-                    return 'Back Pressure Data Size Threshold is not configured';
-                }
+        };
+    
+        /**
+         * Updates the stats of the connections in the specified selection.
+         *
+         * @param {selection} updated       The selected connections to update
+         */
+        var updateConnectionStatus = function (updated) {
+            if (updated.empty()) {
+                return;
+            }
+    
+          // update data size
+          var dataSizeDeferred = $.Deferred(function (deferred) {
+                // queued count value
+                updated.select('text.queued tspan.count')
+                    .text(function (d) {
+                      return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.queued, ' ');
+                  });
+  
+              var backpressurePercentDataSize = updated.select('rect.backpressure-percent.data-size');
+              backpressurePercentDataSize.transition()
+                  .duration(400)
+                  .attr({
+                      'width': function (d) {
+                          if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseBytes)) {
+                              return (backpressureBarWidth * d.status.aggregateSnapshot.percentUseBytes) / 100;
+                          } else {
+                              return 0;
+                          }
+                      }
+                  }).each('end', function () {
+                  backpressurePercentDataSize
+                      .classed('warning', function (d) {
+                          return isWarningBytes(d);
+                      })
+                      .classed('error', function (d) {
+                          return isErrorBytes(d);
+                      });
+  
+                  deferred.resolve();
+              });
+  
+              updated.select('rect.backpressure-data-size').select('title').text(function (d) {
+                  if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseBytes)) {
+                      return 'Queue is ' + d.status.aggregateSnapshot.percentUseBytes + '% full based on Back Pressure Data Size Threshold';
+                  } else {
+                      return 'Back Pressure Data Size Threshold is not configured';
+                  }
+              });
+          }).promise();
+  
+          // update object count
+          var objectCountDeferred = $.Deferred(function (deferred) {
+                // queued size value
+                updated.select('text.queued tspan.size')
+                    .text(function (d) {
+                      return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.queued, ' ');
+                  });
+  
+              var backpressurePercentObject = updated.select('rect.backpressure-percent.object');
+              backpressurePercentObject.transition()
+                  .duration(400)
+                  .attr({
+                      'width': function (d) {
+                          if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseCount)) {
+                              return (backpressureBarWidth * d.status.aggregateSnapshot.percentUseCount) / 100;
+                          } else {
+                              return 0;
+                          }
+                      }
+                  }).each('end', function () {
+                  backpressurePercentObject
+                      .classed('warning', function (d) {
+                          return isWarningCount(d);
+                      })
+                      .classed('error', function (d) {
+                          return isErrorCount(d);
+                      });
+  
+                  deferred.resolve();
+              });
+  
+              updated.select('rect.backpressure-object').select('title').text(function (d) {
+                  if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseCount)) {
+                      return 'Queue is ' + d.status.aggregateSnapshot.percentUseCount + '% full based on Back Pressure Object Threshold';
+                  } else {
+                      return 'Back Pressure Object Threshold is not configured';
+                  }
+              });
+          }).promise();
+  
+          // update connection once progress bars have transitioned
+          $.when(dataSizeDeferred, objectCountDeferred).done(function () {
+              // connection stroke
+              updated.select('path.connection-path')
+                  .classed('full', function (d) {
+                      return isFullCount(d) || isFullBytes(d);
+                  })
+                  .attr({
+                      'marker-end': getEndMarker
+                  });
+  
+              // border
+              updated.select('rect.border')
+                  .classed('full', function (d) {
+                      return isFullCount(d) || isFullBytes(d);
+                  });
+  
+              // drop shadow
+              updated.select('rect.body')
+                  .attr({
+                      'filter': getDropShadow
+                  });
             });
-        }).promise();
-
-        // update object count
-        var objectCountDeferred = $.Deferred(function (deferred) {
-            // queued size value
-            updated.select('text.queued tspan.size')
-                .text(function (d) {
-                    return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.queued, ' ');
-                });
-
-            var backpressurePercentObject = updated.select('rect.backpressure-percent.object');
-            backpressurePercentObject.transition()
-                .duration(400)
-                .attr({
-                    'width': function (d) {
-                        if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseCount)) {
-                            return (backpressureBarWidth * d.status.aggregateSnapshot.percentUseCount) / 100;
-                        } else {
-                            return 0;
-                        }
-                    }
-                }).each('end', function () {
-                backpressurePercentObject
-                    .classed('warning', function (d) {
-                        return isWarningCount(d);
-                    })
-                    .classed('error', function (d) {
-                        return isErrorCount(d);
+        };
+    
+        /**
+         * Saves the connection entry specified by d with the new configuration specified
+         * in connection.
+         *
+         * @param {type} d
+         * @param {type} connection
+         */
+        var save = function (d, connection) {
+            var entity = {
+              'revision': nfClient.getRevision(d),
+                'component': connection
+            };
+    
+            return $.ajax({
+                type: 'PUT',
+                url: d.uri,
+                data: JSON.stringify(entity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (response) {
+                // request was successful, update the entry
+              nfConnection.set(response);
+            }).fail(function (xhr, status, error) {
+                if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-connection.Connection'),
+                      dialogContent: nfCommon.escapeHtml(xhr.responseText)
                     });
-
-                deferred.resolve();
-            });
-
-            updated.select('rect.backpressure-object').select('title').text(function (d) {
-                if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseCount)) {
-                    return 'Queue is ' + d.status.aggregateSnapshot.percentUseCount + '% full based on Back Pressure Object Threshold';
                 } else {
-                    return 'Back Pressure Object Threshold is not configured';
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
                 }
             });
-        }).promise();
-
-        // update connection once progress bars have transitioned
-        $.when(dataSizeDeferred, objectCountDeferred).done(function () {
-            // connection stroke
-            updated.select('path.connection-path')
-                .classed('full', function (d) {
-                    return isFullCount(d) || isFullBytes(d);
-                })
-                .attr({
-                    'marker-end': getEndMarker
-                });
-
-            // border
-            updated.select('rect.border')
-                .classed('full', function (d) {
-                    return isFullCount(d) || isFullBytes(d);
-                });
-
-            // drop shadow
-            updated.select('rect.body')
-                .attr({
-                    'filter': getDropShadow
-                });
-        });
-    };
-
-    /**
-     * Saves the connection entry specified by d with the new configuration specified
-     * in connection.
-     *
-     * @param {type} d
-     * @param {type} connection
-     */
-    var save = function (d, connection) {
-        var entity = {
-            'revision': nfClient.getRevision(d),
-            'component': connection
         };
-
-        return $.ajax({
-            type: 'PUT',
-            url: d.uri,
-            data: JSON.stringify(entity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).done(function (response) {
-            // request was successful, update the entry
-            nfConnection.set(response);
-        }).fail(function (xhr, status, error) {
-            if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
-                nfDialog.showOkDialog({
-                    headerText: 'Connection',
-                    dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                });
-            } else {
-                nfErrorHandler.handleAjaxError(xhr, status, error);
-            }
-        });
-    };
-
-    // removes the specified connections
-    var removeConnections = function (removed) {
-        // consider reloading source/destination of connection being removed
-        removed.each(function (d) {
-            nfCanvasUtils.reloadConnectionSourceAndDestination(d.sourceId, d.destinationId);
-        });
-
-        // remove the connection
-        removed.remove();
-    };
-
-    var nfConnection = {
-        config: {
-            selfLoopXOffset: (dimensions.width / 2) + 5,
-            selfLoopYOffset: 25
-        },
-
-        /**
-         * Initializes the connection.
-         *
-         * @param nfSelectableRef   The nfSelectable module.
-         * @param nfContextMenuRef   The nfContextMenu module.
-         */
-        init: function (nfSelectableRef, nfContextMenuRef, nfConnectionConfigurationRef) {
-            nfSelectable = nfSelectableRef;
-            nfContextMenu = nfContextMenuRef;
-            nfConnectionConfiguration = nfConnectionConfigurationRef;
-
-            connectionMap = d3.map();
-            removedCache = d3.map();
-            addedCache = d3.map();
-
-            // create the connection container
-            connectionContainer = d3.select('#canvas').append('g')
-                .attr({
-                    'pointer-events': 'stroke',
-                    'class': 'connections'
-                });
-
-            // define the line generator
-            lineGenerator = d3.svg.line()
-                .x(function (d) {
-                    return d.x;
-                })
-                .y(function (d) {
-                    return d.y;
-                })
-                .interpolate('linear');
-
-            // handle bend point drag events
-            bendPointDrag = d3.behavior.drag()
-                .on('dragstart', function () {
-                    // stop further propagation
-                    d3.event.sourceEvent.stopPropagation();
-                })
-                .on('drag', function (d) {
-                    d.x = d3.event.x;
-                    d.y = d3.event.y;
-
-                    // redraw this connection
-                    d3.select(this.parentNode).call(updateConnections, {
-                        'updatePath': true,
-                        'updateLabel': false
+    
+        // removes the specified connections
+        var removeConnections = function (removed) {
+            // consider reloading source/destination of connection being removed
+            removed.each(function (d) {
+              nfCanvasUtils.reloadConnectionSourceAndDestination(d.sourceId, d.destinationId);
+            });
+    
+            // remove the connection
+            removed.remove();
+        };
+    
+      var nfConnection = {
+            config: {
+                selfLoopXOffset: (dimensions.width / 2) + 5,
+                selfLoopYOffset: 25
+            },
+    
+          /**
+           * Initializes the connection.
+           *
+           * @param nfSelectableRef   The nfSelectable module.
+           * @param nfContextMenuRef   The nfContextMenu module.
+           */
+          init: function (nfSelectableRef, nfContextMenuRef, nfConnectionConfigurationRef) {
+              nfSelectable = nfSelectableRef;
+              nfContextMenu = nfContextMenuRef;
+              nfConnectionConfiguration = nfConnectionConfigurationRef;
+  
+                connectionMap = d3.map();
+              removedCache = d3.map();
+              addedCache = d3.map();
+    
+                // create the connection container
+                connectionContainer = d3.select('#canvas').append('g')
+                    .attr({
+                        'pointer-events': 'stroke',
+                        'class': 'connections'
                     });
-                })
-                .on('dragend', function () {
-                    var connection = d3.select(this.parentNode);
-                    var connectionData = connection.datum();
-                    var bends = connection.selectAll('rect.midpoint').data();
-
-                    // ensure the bend lengths are the same
-                    if (bends.length === connectionData.component.bends.length) {
-                        // determine if the bend points have moved
-                        var different = false;
-                        for (var i = 0; i < bends.length && !different; i++) {
-                            if (bends[i].x !== connectionData.component.bends[i].x || bends[i].y !== connectionData.component.bends[i].y) {
-                                different = true;
+    
+                // define the line generator
+                lineGenerator = d3.svg.line()
+                    .x(function (d) {
+                        return d.x;
+                    })
+                    .y(function (d) {
+                        return d.y;
+                    })
+                    .interpolate('linear');
+    
+                // handle bend point drag events
+                bendPointDrag = d3.behavior.drag()
+                    .on('dragstart', function () {
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+                    })
+                    .on('drag', function (d) {
+                        d.x = d3.event.x;
+                        d.y = d3.event.y;
+    
+                        // redraw this connection
+                        d3.select(this.parentNode).call(updateConnections, {
+                            'updatePath': true,
+                            'updateLabel': false
+                        });
+                    })
+                    .on('dragend', function () {
+                        var connection = d3.select(this.parentNode);
+                        var connectionData = connection.datum();
+                        var bends = connection.selectAll('rect.midpoint').data();
+    
+                        // ensure the bend lengths are the same
+                        if (bends.length === connectionData.component.bends.length) {
+                            // determine if the bend points have moved
+                            var different = false;
+                            for (var i = 0; i < bends.length && !different; i++) {
+                                if (bends[i].x !== connectionData.component.bends[i].x || bends[i].y !== connectionData.component.bends[i].y) {
+                                    different = true;
+                                }
                             }
-                        }
-
-                        // only save the updated bends if necessary
-                        if (different) {
-                            save(connectionData, {
-                                id: connectionData.id,
-                                bends: bends
-                            }).fail(function () {
-                                // restore the previous bend points
-                                connectionData.bends = $.map(connectionData.component.bends, function (bend) {
-                                    return {
-                                        x: bend.x,
-                                        y: bend.y
-                                    };
-                                });
-
-                                // refresh the connection
-                                connection.call(updateConnections, {
-                                    'updatePath': true,
-                                    'updateLabel': false
+    
+                            // only save the updated bends if necessary
+                            if (different) {
+                                save(connectionData, {
+                                    id: connectionData.id,
+                                    bends: bends
+                                }).fail(function () {
+                                    // restore the previous bend points
+                                    connectionData.bends = $.map(connectionData.component.bends, function (bend) {
+                                        return {
+                                            x: bend.x,
+                                            y: bend.y
+                                        };
+                                    });
+    
+                                    // refresh the connection
+                                    connection.call(updateConnections, {
+                                        'updatePath': true,
+                                        'updateLabel': false
+                                    });
                                 });
-                            });
+                            }
                         }
-                    }
-
-                    // stop further propagation
-                    d3.event.sourceEvent.stopPropagation();
-                });
-
-            // handle endpoint drag events
-            endpointDrag = d3.behavior.drag()
-                .on('dragstart', function (d) {
-                    // indicate that dragging has begun
-                    d.dragging = true;
-
-                    // stop further propagation
-                    d3.event.sourceEvent.stopPropagation();
-                })
-                .on('drag', function (d) {
-                    d.x = d3.event.x - 8;
-                    d.y = d3.event.y - 8;
-
-                    // ensure the new destination is valid
-                    d3.select('g.hover').classed('connectable-destination', function () {
-                        return nfCanvasUtils.isValidConnectionDestination(d3.select(this));
+    
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
                     });
-
-                    // redraw this connection
-                    d3.select(this.parentNode).call(updateConnections, {
-                        'updatePath': true,
-                        'updateLabel': false
-                    });
-                })
-                .on('dragend', function (d) {
-                    // indicate that dragging as stopped
-                    d.dragging = false;
-
-                    // get the corresponding connection
-                    var connection = d3.select(this.parentNode);
-                    var connectionData = connection.datum();
-                    var previousDestinationId = connectionData.destinationId;
-
-                    // attempt to select a new destination
-                    var destination = d3.select('g.connectable-destination');
-
-                    // resets the connection if we're not over a new destination
-                    if (destination.empty()) {
-                        connection.call(updateConnections, {
+    
+                // handle endpoint drag events
+                endpointDrag = d3.behavior.drag()
+                    .on('dragstart', function (d) {
+                        // indicate that dragging has begun
+                        d.dragging = true;
+    
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+                    })
+                    .on('drag', function (d) {
+                        d.x = d3.event.x - 8;
+                        d.y = d3.event.y - 8;
+    
+                        // ensure the new destination is valid
+                        d3.select('g.hover').classed('connectable-destination', function () {
+                          return nfCanvasUtils.isValidConnectionDestination(d3.select(this));
+                        });
+    
+                        // redraw this connection
+                        d3.select(this.parentNode).call(updateConnections, {
                             'updatePath': true,
                             'updateLabel': false
                         });
-                    } else {
-                        // prompt for the new port if appropriate
-                        if (nfCanvasUtils.isProcessGroup(destination) || nfCanvasUtils.isRemoteProcessGroup(destination)) {
-                            // user will select new port and updated connect details will be set accordingly
-                            nfConnectionConfiguration.showConfiguration(connection, destination).done(function () {
-                                // reload the previous destination
-                                nfCanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId);
-                            }).fail(function () {
-                                // reset the connection
-                                connection.call(updateConnections, {
-                                    'updatePath': true,
-                                    'updateLabel': false
-                                });
+                    })
+                    .on('dragend', function (d) {
+                        // indicate that dragging as stopped
+                        d.dragging = false;
+    
+                        // get the corresponding connection
+                        var connection = d3.select(this.parentNode);
+                        var connectionData = connection.datum();
+                        var previousDestinationId = connectionData.destinationId;
+    
+                        // attempt to select a new destination
+                        var destination = d3.select('g.connectable-destination');
+    
+                        // resets the connection if we're not over a new destination
+                        if (destination.empty()) {
+                            connection.call(updateConnections, {
+                                'updatePath': true,
+                                'updateLabel': false
                             });
                         } else {
-                            // get the destination details
-                            var destinationData = destination.datum();
-                            var destinationType = nfCanvasUtils.getConnectableTypeForDestination(destination);
-
-                            var connectionEntity = {
-                                'revision': nfClient.getRevision(connectionData),
-                                'component': {
-                                    'id': connectionData.id,
-                                    'destination': {
-                                        'id': destinationData.id,
-                                        'groupId': nfCanvasUtils.getGroupId(),
-                                        'type': destinationType
-                                    }
-                                }
-                            };
-
-                            // if this is a self loop and there are less than 2 bends, add them
-                            if (connectionData.bends.length < 2 && connectionData.sourceId === destinationData.id) {
-                                var rightCenter = {
-                                    x: destinationData.position.x + (destinationData.dimensions.width),
-                                    y: destinationData.position.y + (destinationData.dimensions.height / 2)
-                                };
-                                var xOffset = nfConnection.config.selfLoopXOffset;
-                                var yOffset = nfConnection.config.selfLoopYOffset;
-
-                                connectionEntity.component.bends = [];
-                                connectionEntity.component.bends.push({
-                                    'x': (rightCenter.x + xOffset),
-                                    'y': (rightCenter.y - yOffset)
-                                });
-                                connectionEntity.component.bends.push({
-                                    'x': (rightCenter.x + xOffset),
-                                    'y': (rightCenter.y + yOffset)
-                                });
-                            }
-
-                            $.ajax({
-                                type: 'PUT',
-                                url: connectionData.uri,
-                                data: JSON.stringify(connectionEntity),
-                                dataType: 'json',
-                                contentType: 'application/json'
-                            }).done(function (response) {
-                                var updatedConnectionData = response.component;
-
-                                // refresh to update the label
-                                nfConnection.set(response);
-
-                                // reload the previous destination and the new source/destination
-                                nfCanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId);
-                                nfCanvasUtils.reloadConnectionSourceAndDestination(response.sourceId, response.destinationId);
-                            }).fail(function (xhr, status, error) {
-                                if (xhr.status === 400 || xhr.status === 401 || xhr.status === 403 || xhr.status === 404 || xhr.status === 409) {
-                                    nfDialog.showOkDialog({
-                                        headerText: 'Connection',
-                                        dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                                    });
-
+                            // prompt for the new port if appropriate
+                          if (nfCanvasUtils.isProcessGroup(destination) || nfCanvasUtils.isRemoteProcessGroup(destination)) {
+                                // user will select new port and updated connect details will be set accordingly
+                              nfConnectionConfiguration.showConfiguration(connection, destination).done(function () {
+                                    // reload the previous destination
+                                  nfCanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId);
+                                }).fail(function () {
                                     // reset the connection
                                     connection.call(updateConnections, {
                                         'updatePath': true,
                                         'updateLabel': false
                                     });
-                                } else {
-                                    nfErrorHandler.handleAjaxError(xhr, status, error);
-                                }
-                            });
-                        }
-                    }
-
-                    // stop further propagation
-                    d3.event.sourceEvent.stopPropagation();
-                });
-
-            // label drag behavior
-            labelDrag = d3.behavior.drag()
-                .on('dragstart', function (d) {
-                    // stop further propagation
-                    d3.event.sourceEvent.stopPropagation();
-                })
-                .on('drag', function (d) {
-                    if (d.bends.length > 1) {
-                        // get the dragged component
-                        var drag = d3.select('rect.label-drag');
-
-                        // lazily create the drag selection box
-                        if (drag.empty()) {
-                            var connectionLabel = d3.select(this).select('rect.body');
-
-                            var position = getLabelPosition(connectionLabel);
-                            var width = dimensions.width;
-                            var height = connectionLabel.attr('height');
-
-                            // create a selection box for the move
-                            drag = d3.select('#canvas').append('rect')
-                                .attr('x', position.x)
-                                .attr('y', position.y)
-                                .attr('class', 'label-drag')
-                                .attr('width', width)
-                                .attr('height', height)
-                                .attr('stroke-width', function () {
-                                    return 1 / nfCanvasUtils.scaleCanvasView();
-                                })
-                                .attr('stroke-dasharray', function () {
-                                    return 4 / nfCanvasUtils.scaleCanvasView();
-                                })
-                                .datum({
-                                    x: position.x,
-                                    y: position.y,
-                                    width: width,
-                                    height: height
                                 });
-                        } else {
-                            // update the position of the drag selection
-                            drag.attr('x', function (d) {
-                                d.x += d3.event.dx;
-                                return d.x;
-                            })
-                                .attr('y', function (d) {
-                                    d.y += d3.event.dy;
-                                    return d.y;
+                            } else {
+                                // get the destination details
+                                var destinationData = destination.datum();
+                              var destinationType = nfCanvasUtils.getConnectableTypeForDestination(destination);
+    
+                                var connectionEntity = {
+                                  'revision': nfClient.getRevision(connectionData),
+                                    'component': {
+                                        'id': connectionData.id,
+                                        'destination': {
+                                            'id': destinationData.id,
+                                          'groupId': nfCanvasUtils.getGroupId(),
+                                            'type': destinationType
+                                        }
+                                    }
+                                };
+    
+                                // if this is a self loop and there are less than 2 bends, add them
+                                if (connectionData.bends.length < 2 && connectionData.sourceId === destinationData.id) {
+                                    var rightCenter = {
+                                        x: destinationData.position.x + (destinationData.dimensions.width),
+                                        y: destinationData.position.y + (destinationData.dimensions.height / 2)
+                                    };
+                                  var xOffset = nfConnection.config.selfLoopXOffset;
+                                  var yOffset = nfConnection.config.selfLoopYOffset;
+    
+                                    connectionEntity.component.bends = [];
+                                    connectionEntity.component.bends.push({
+                                        'x': (rightCenter.x + xOffset),
+                                        'y': (rightCenter.y - yOffset)
+                                    });
+                                    connectionEntity.component.bends.push({
+                                        'x': (rightCenter.x + xOffset),
+                                        'y': (rightCenter.y + yOffset)
+                                    });
+                                }
+    
+                                $.ajax({
+                                    type: 'PUT',
+                                    url: connectionData.uri,
+                                    data: JSON.stringify(connectionEntity),
+                                    dataType: 'json',
+                                    contentType: 'application/json'
+                                }).done(function (response) {
+                                    var updatedConnectionData = response.component;
+    
+                                    // refresh to update the label
+                                  nfConnection.set(response);
+    
+                                    // reload the previous destination and the new source/destination
+                                  nfCanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId);
+                                  nfCanvasUtils.reloadConnectionSourceAndDestination(response.sourceId, response.destinationId);
+                                }).fail(function (xhr, status, error) {
+                                  if (xhr.status === 400 || xhr.status === 401 || xhr.status === 403 || xhr.status === 404 || xhr.status === 409) {
+                                      nfDialog.showOkDialog({
+                                          headerText: nf._.msg('nf-connection.Connection'),
+                                          dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                                        });
+    
+                                        // reset the connection
+                                        connection.call(updateConnections, {
+                                            'updatePath': true,
+                                            'updateLabel': false
+                                        });
+                                    } else {
+                                      nfErrorHandler.handleAjaxError(xhr, status, error);
+                                    }
                                 });
+                            }
                         }
-
-                        // calculate the current point
-                        var datum = drag.datum();
-                        var currentPoint = {
-                            x: datum.x + (datum.width / 2),
-                            y: datum.y + (datum.height / 2)
-                        };
-
-                        var closestBendIndex = -1;
-                        var minDistance;
-                        $.each(d.bends, function (i, bend) {
-                            var bendPoint = {
-                                'x': bend.x,
-                                'y': bend.y
-                            };
-
-                            // get the distance
-                            var distance = distanceBetweenPoints(currentPoint, bendPoint);
-
-                            // see if its the minimum
-                            if (closestBendIndex === -1 || distance < minDistance) {
-                                closestBendIndex = i;
-                                minDistance = distance;
+    
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+                    });
+    
+                // label drag behavior
+                labelDrag = d3.behavior.drag()
+                    .on('dragstart', function (d) {
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+                    })
+                    .on('drag', function (d) {
+                        if (d.bends.length > 1) {
+                            // get the dragged component
+                            var drag = d3.select('rect.label-drag');
+    
+                            // lazily create the drag selection box
+                            if (drag.empty()) {
+                                var connectionLabel = d3.select(this).select('rect.body');
+    
+                                var position = getLabelPosition(connectionLabel);
+                                var width = dimensions.width;
+                                var height = connectionLabel.attr('height');
+    
+                                // create a selection box for the move
+                                drag = d3.select('#canvas').append('rect')
+                                    .attr('x', position.x)
+                                    .attr('y', position.y)
+                                    .attr('class', 'label-drag')
+                                    .attr('width', width)
+                                    .attr('height', height)
+                                    .attr('stroke-width', function () {
+                                      return 1 / nfCanvasUtils.scaleCanvasView();
+                                    })
+                                    .attr('stroke-dasharray', function () {
+                                      return 4 / nfCanvasUtils.scaleCanvasView();
+                                    })
+                                    .datum({
+                                        x: position.x,
+                                        y: position.y,
+                                        width: width,
+                                        height: height
+                                    });
+                            } else {
+                                // update the position of the drag selection
+                                drag.attr('x', function (d) {
+                                    d.x += d3.event.dx;
+                                    return d.x;
+                                })
+                                    .attr('y', function (d) {
+                                        d.y += d3.event.dy;
+                                        return d.y;
+                                    });
                             }
-                        });
-
-                        // record the closest bend
-                        d.labelIndex = closestBendIndex;
-
-                        // refresh the connection
-                        d3.select(this.parentNode).call(updateConnections, {
-                            'updatePath': true,
-                            'updateLabel': false
-                        });
-                    }
-                })
-                .on('dragend', function (d) {
-                    if (d.bends.length > 1) {
-                        // get the drag selection
-                        var drag = d3.select('rect.label-drag');
-
-                        // ensure we found a drag selection
-                        if (!drag.empty()) {
-                            // remove the drag selection
-                            drag.remove();
+    
+                            // calculate the current point
+                            var datum = drag.datum();
+                            var currentPoint = {
+                                x: datum.x + (datum.width / 2),
+                                y: datum.y + (datum.height / 2)
+                            };
+    
+                            var closestBendIndex = -1;
+                            var minDistance;
+                            $.each(d.bends, function (i, bend) {
+                                var bendPoint = {
+                                    'x': bend.x,
+                                    'y': bend.y
+                                };
+    
+                                // get the distance
+                                var distance = distanceBetweenPoints(currentPoint, bendPoint);
+    
+                                // see if its the minimum
+                                if (closestBendIndex === -1 || distance < minDistance) {
+                                    closestBendIndex = i;
+                                    minDistance = distance;
+                                }
+                            });
+    
+                            // record the closest bend
+                            d.labelIndex = closestBendIndex;
+    
+                            // refresh the connection
+                            d3.select(this.parentNode).call(updateConnections, {
+                                'updatePath': true,
+                                'updateLabel': false
+                            });
                         }
-
-                        // only save if necessary
-                        if (d.labelIndex !== d.component.labelIndex) {
-                            // get the connection to refresh below
-                            var connection = d3.select(this.parentNode);
-
-                            // save the new label index
-                            save(d, {
-                                id: d.id,
-                                labelIndex: d.labelIndex
-                            }).fail(function () {
-                                // restore the previous label index
-                                d.labelIndex = d.component.labelIndex;
-
-                                // refresh the connection
-                                connection.call(updateConnections, {
-                                    'updatePath': true,
-                                    'updateLabel': false
+                    })
+                    .on('dragend', function (d) {
+                        if (d.bends.length > 1) {
+                            // get the drag selection
+                            var drag = d3.select('rect.label-drag');
+    
+                            // ensure we found a drag selection
+                            if (!drag.empty()) {
+                                // remove the drag selection
+                                drag.remove();
+                            }
+    
+                            // only save if necessary
+                            if (d.labelIndex !== d.component.labelIndex) {
+                                // get the connection to refresh below
+                                var connection = d3.select(this.parentNode);
+    
+                                // save the new label index
+                                save(d, {
+                                    id: d.id,
+                                    labelIndex: d.labelIndex
+                                }).fail(function () {
+                                    // restore the previous label index
+                                    d.labelIndex = d.component.labelIndex;
+    
+                                    // refresh the connection
+                                    connection.call(updateConnections, {
+                                        'updatePath': true,
+                                        'updateLabel': false
+                                    });
                                 });
-                            });
+                            }
                         }
-                    }
-
-                    // stop further propagation
-                    d3.event.sourceEvent.stopPropagation();
-                });
-        },
-
-        /**
-         * Adds the specified connection entity.
-         *
-         * @param connectionEntities       The connection
-         * @param options           Configuration options
-         */
-        add: function (connectionEntities, options) {
-            var selectAll = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-            }
-
-            // get the current time
-            var now = new Date().getTime();
-
-            var add = function (connectionEntity) {
-                addedCache.set(connectionEntity.id, now);
-
-                // add the connection
-                connectionMap.set(connectionEntity.id, $.extend({
-                    type: 'Connection'
-                }, connectionEntity));
-            };
-
-            // determine how to handle the specified connection
-            if ($.isArray(connectionEntities)) {
-                $.each(connectionEntities, function (_, connectionEntity) {
-                    add(connectionEntity);
-                });
-            } else if (nfCommon.isDefinedAndNotNull(connectionEntities)) {
-                add(connectionEntities);
-            }
-
-            // apply the selection and handle new connections
-            var selection = select();
-            selection.enter().call(renderConnections, selectAll);
-            selection.call(updateConnections, {
-                'updatePath': true,
-                'updateLabel': false
-            }).call(sort);
-        },
-
-        /**
-         * Determines if the specified selection is disconnected from other nodes.
-         *
-         * @argument {selection} selection          The selection
-         */
-        isDisconnected: function (selection) {

-
-            // if nothing is selected return
-            if (selection.empty()) {
-                return false;
-            }
-            var connections = d3.map();
-            var components = d3.map();
-            var isDisconnected = true;


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


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


-
-                // check all connections of this component
-                $.each(nfConnection.getComponentConnections(d.id), function (_, connection) {
-                    if (!connections.has(connection.id)) {
-                        isDisconnected = false;
-                        return false;
-                    }
-                });
-            });
-            if (isDisconnected) {

-
-                // go through each connection to ensure its source and destination are included
-                connections.forEach(function (id, connection) {
-                    if (isDisconnected) {

-
-                        // determine whether this connection and its components are included within the selection
-                        isDisconnected = components.has(nfCanvasUtils.getConnectionSourceComponentId(connection)) && components.has(nfCanvasUtils.getConnectionDestinationComponentId(connection));
-                    }
-                });
-            }
-            return isDisconnected;
-        },
-
-        /**
-         * Populates the graph with the specified connections.
-         *
-         * @argument {object | array} connectionEntities               The connections to add
-         * @argument {object} options                Configuration options
-         */
-        set: function (connectionEntities, options) {
-            var selectAll = false;
-            var transition = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-            }
-
-            var set = function (proposedConnectionEntity) {
-                var currentConnectionEntity = connectionMap.get(proposedConnectionEntity.id);
-
-                // set the connection if appropriate due to revision and wasn't previously removed
-                if (nfClient.isNewerRevision(currentConnectionEntity, proposedConnectionEntity) && !removedCache.has(proposedConnectionEntity.id)) {
-                    connectionMap.set(proposedConnectionEntity.id, $.extend({
-                        type: 'Connection'
-                    }, proposedConnectionEntity));
+    
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+                    });
+            },
+    
+            /**
+             * Adds the specified connection entity.
+             *
+             * @param connectionEntities       The connection
+             * @param options           Configuration options
+             */
+            add: function (connectionEntities, options) {
+                var selectAll = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
                 }
-            };
-
-            // determine how to handle the specified connection
-            if ($.isArray(connectionEntities)) {
-                $.each(connectionMap.keys(), function (_, key) {
-                    var currentConnectionEntity = connectionMap.get(key);
-                    var isPresent = $.grep(connectionEntities, function (proposedConnectionEntity) {
-                        return proposedConnectionEntity.id === currentConnectionEntity.id;
+    
+              // get the current time
+              var now = new Date().getTime();
+    
+                var add = function (connectionEntity) {
+                  addedCache.set(connectionEntity.id, now);
+  
+                    // add the connection
+                    connectionMap.set(connectionEntity.id, $.extend({
+                        type: 'Connection'
+                    }, connectionEntity));
+                };
+    
+                // determine how to handle the specified connection
+                if ($.isArray(connectionEntities)) {
+                    $.each(connectionEntities, function (_, connectionEntity) {
+                        add(connectionEntity);
                     });
-
-                    // if the current connection is not present and was not recently added, remove it
-                    if (isPresent.length === 0 && !addedCache.has(key)) {
-                        connectionMap.remove(key);
-                    }
-                });
-                $.each(connectionEntities, function (_, connectionEntity) {
-                    set(connectionEntity);
-                });
-            } else if (nfCommon.isDefinedAndNotNull(connectionEntities)) {
-                set(connectionEntities);
-            }
-
-            // apply the selection and handle all new connection
-            var selection = select();
-            selection.enter().call(renderConnections, selectAll);
-            selection.call(updateConnections, {
-                'updatePath': true,
-                'updateLabel': true,
-                'transition': transition
-            }).call(sort);
-            selection.exit().call(removeConnections);
-        },
-
-        /**
-         * Refreshes the connection in the UI.
-         *
-         * @param {string} connectionId
-         */
-        refresh: function (connectionId) {
-            if (nfCommon.isDefinedAndNotNull(connectionId)) {
-                d3.select('#id-' + connectionId).call(updateConnections, {
+              } else if (nfCommon.isDefinedAndNotNull(connectionEntities)) {
+                    add(connectionEntities);
+                }
+    
+                // apply the selection and handle new connections
+                var selection = select();
+                selection.enter().call(renderConnections, selectAll);
+                selection.call(updateConnections, {
                     'updatePath': true,
-                    'updateLabel': true
-                });
-            } else {
-                d3.selectAll('g.connection').call(updateConnections, {
+                    'updateLabel': false
+              }).call(sort);
+          },
+  
+          /**
+           * Determines if the specified selection is disconnected from other nodes.
+           *
+           * @argument {selection} selection          The selection
+           */
+          isDisconnected: function (selection) {
+  
+              // if nothing is selected return
+              if (selection.empty()) {
+                  return false;
+              }
+              var connections = d3.map();
+              var components = d3.map();
+              var isDisconnected = true;
+  
+              // include connections
+              selection.filter(function (d) {
+                  return d.type === 'Connection';
+              }).each(function (d) {
+                  connections.set(d.id, d);
+              });
+  
+              // include components and ensure their connections are included
+              selection.filter(function (d) {
+                  return d.type !== 'Connection';
+              }).each(function (d) {
+                  components.set(d.id, d.component);
+  
+                  // check all connections of this component
+                  $.each(nfConnection.getComponentConnections(d.id), function (_, connection) {
+                      if (!connections.has(connection.id)) {
+                          isDisconnected = false;
+                          return false;
+                      }
+                  });
+              });
+              if (isDisconnected) {
+  
+                  // go through each connection to ensure its source and destination are included
+                  connections.forEach(function (id, connection) {
+                      if (isDisconnected) {
+  
+                          // determine whether this connection and its components are included within the selection
+                          isDisconnected = components.has(nfCanvasUtils.getConnectionSourceComponentId(connection)) && components.has(nfCanvasUtils.getConnectionDestinationComponentId(connection));
+                      }
+                  });
+              }
+              return isDisconnected;
+            },
+    
+            /**
+             * Populates the graph with the specified connections.
+             *
+             * @argument {object | array} connectionEntities               The connections to add
+             * @argument {object} options                Configuration options
+             */
+            set: function (connectionEntities, options) {
+                var selectAll = false;
+                var transition = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                  transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+                }
+    
+              var set = function (proposedConnectionEntity) {
+                  var currentConnectionEntity = connectionMap.get(proposedConnectionEntity.id);
+  
+                  // set the connection if appropriate due to revision and wasn't previously removed
+                  if (nfClient.isNewerRevision(currentConnectionEntity, proposedConnectionEntity) && !removedCache.has(proposedConnectionEntity.id)) {
+                      connectionMap.set(proposedConnectionEntity.id, $.extend({
+                            type: 'Connection'
+                      }, proposedConnectionEntity));
+                  }
+                };
+    
+                // determine how to handle the specified connection
+                if ($.isArray(connectionEntities)) {
+                    $.each(connectionMap.keys(), function (_, key) {
+                      var currentConnectionEntity = connectionMap.get(key);
+                      var isPresent = $.grep(connectionEntities, function (proposedConnectionEntity) {
+                          return proposedConnectionEntity.id === currentConnectionEntity.id;
+                      });
+  
+                      // if the current connection is not present and was not recently added, remove it
+                      if (isPresent.length === 0 && !addedCache.has(key)) {
+                            connectionMap.remove(key);
+                      }
+                    });
+                    $.each(connectionEntities, function (_, connectionEntity) {
+                        set(connectionEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(connectionEntities)) {
+                    set(connectionEntities);
+                }
+    
+                // apply the selection and handle all new connection
+                var selection = select();
+                selection.enter().call(renderConnections, selectAll);
+                selection.call(updateConnections, {
                     'updatePath': true,
+                    'updateLabel': true,
+                    'transition': transition
+              }).call(sort);
+                selection.exit().call(removeConnections);
+            },
+    
+            /**
+             * Refreshes the connection in the UI.
+             *
+             * @param {string} connectionId
+             */
+            refresh: function (connectionId) {
+              if (nfCommon.isDefinedAndNotNull(connectionId)) {
+                    d3.select('#id-' + connectionId).call(updateConnections, {
+                        'updatePath': true,
+                        'updateLabel': true
+                    });
+                } else {
+                    d3.selectAll('g.connection').call(updateConnections, {
+                        'updatePath': true,
+                        'updateLabel': true
+                    });
+                }
+            },
+    
+            /**
+             * Refreshes the components necessary after a pan event.
+             */
+            pan: function () {
+                d3.selectAll('g.connection.entering, g.connection.leaving').call(updateConnections, {
+                    'updatePath': false,
                     'updateLabel': true
                 });
-            }
-        },
-
-        /**
-         * Refreshes the components necessary after a pan event.
-         */
-        pan: function () {
-            d3.selectAll('g.connection.entering, g.connection.leaving').call(updateConnections, {
-                'updatePath': false,
-                'updateLabel': true
-            });
-        },
-
-        /**
-         * Removes the specified connection.
-         *
-         * @param {array|string} connectionIds      The connection id
-         */
-        remove: function (connectionIds) {
-            var now = new Date().getTime();
-
-            if ($.isArray(connectionIds)) {
-                $.each(connectionIds, function (_, connectionId) {
-                    removedCache.set(connectionId, now);
-                    connectionMap.remove(connectionId);
-                });
-            } else {
-                removedCache.set(connectionIds, now);
-                connectionMap.remove(connectionIds);
-            }
-
-            // apply the selection and handle all removed connections
-            select().exit().call(removeConnections);
-        },
-
-        /**
-         * Removes all processors.
-         */
-        removeAll: function () {
-            nfConnection.remove(connectionMap.keys());
-        },
-
-        /**
-         * Reloads the connection state from the server and refreshes the UI.
-         *
-         * @param {string} id       The connection id
-         */
-        reload: function (id) {
-            if (connectionMap.has(id)) {
-                var connectionEntity = connectionMap.get(id);
-                return $.ajax({
-                    type: 'GET',
-                    url: connectionEntity.uri,
-                    dataType: 'json'
-                }).done(function (response) {
-                    nfConnection.set(response);
-                });
-            }
-        },
-
-        /**
-         * Reloads the connection status from the server and refreshes the UI.
-         *
-         * @param {string} id       The connection id
-         */
-        reloadStatus: function (id) {
-            if (connectionMap.has(id)) {
-                return $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/flow/connections/' + encodeURIComponent(id) + '/status',
-                    dataType: 'json'
-                }).done(function (response) {
-                    // update the existing connection
+            },
+    
+            /**
+             * Removes the specified connection.
+             *
+           * @param {array|string} connectionIds      The connection id
+             */
+          remove: function (connectionIds) {
+              var now = new Date().getTime();
+  
+              if ($.isArray(connectionIds)) {
+                  $.each(connectionIds, function (_, connectionId) {
+                      removedCache.set(connectionId, now);
+                      connectionMap.remove(connectionId);
+                    });
+                } else {
+                  removedCache.set(connectionIds, now);
+                  connectionMap.remove(connectionIds);
+                }
+    
+                // apply the selection and handle all removed connections
+                select().exit().call(removeConnections);
+            },
+    
+            /**
+             * Removes all processors.
+             */
+            removeAll: function () {
+              nfConnection.remove(connectionMap.keys());
+            },
+    
+            /**
+             * Reloads the connection state from the server and refreshes the UI.
+             *
+             * @param {string} id       The connection id
+             */
+            reload: function (id) {
+                if (connectionMap.has(id)) {
                     var connectionEntity = connectionMap.get(id);
-                    connectionEntity.status = response.connectionStatus;
-                    connectionMap.set(id, connectionEntity);
-
-                    // update the UI
-                    select().call(updateConnectionStatus);
-                });
-            }
-        },
-
-        /**
-         * Gets the connection that have a source or destination component with the specified id.
-         *
-         * @param {string} id     component id
-         * @returns {Array}     components connections
-         */
-        getComponentConnections: function (id) {
-            var connections = [];
-            connectionMap.forEach(function (_, entry) {
-                // see if this component is the source or destination of this connection
-                if (nfCanvasUtils.getConnectionSourceComponentId(entry) === id || nfCanvasUtils.getConnectionDestinationComponentId(entry) === id) {
-                    connections.push(entry);
+                    return $.ajax({
+                        type: 'GET',
+                        url: connectionEntity.uri,
+                        dataType: 'json'
+                    }).done(function (response) {
+                      nfConnection.set(response);
+                  });
+              }
+          },
+  
+          /**
+           * Reloads the connection status from the server and refreshes the UI.
+           *
+           * @param {string} id       The connection id
+           */
+          reloadStatus: function (id) {
+              if (connectionMap.has(id)) {
+                  return $.ajax({
+                      type: 'GET',
+                      url: '../nifi-api/flow/connections/' + encodeURIComponent(id) + '/status',
+                      dataType: 'json'
+                  }).done(function (response) {
+                      // update the existing connection
+                      var connectionEntity = connectionMap.get(id);
+                      connectionEntity.status = response.connectionStatus;
+                      connectionMap.set(id, connectionEntity);
+  
+                      // update the UI
+                      select().call(updateConnectionStatus);
+                    });
                 }
-            });
-            return connections;
-        },
-
-        /**
-         * If the connection id is specified it is returned. If no connection id
-         * specified, all connections are returned.
-         *
-         * @param {string} id
-         */
-        get: function (id) {
-            if (nfCommon.isUndefined(id)) {
-                return connectionMap.values();
-            } else {
-                return connectionMap.get(id);
-            }
-        },
-
-        /**
-         * Expires the caches up to the specified timestamp.
-         *
-         * @param timestamp
-         */
-        expireCaches: function (timestamp) {
-            var expire = function (cache) {
-                cache.forEach(function (id, entryTimestamp) {
-                    if (timestamp > entryTimestamp) {
-                        cache.remove(id);
+            },
+    
+            /**
+             * Gets the connection that have a source or destination component with the specified id.
+             *
+             * @param {string} id     component id
+             * @returns {Array}     components connections
+             */
+            getComponentConnections: function (id) {
+                var connections = [];
+                connectionMap.forEach(function (_, entry) {
+                    // see if this component is the source or destination of this connection
+                  if (nfCanvasUtils.getConnectionSourceComponentId(entry) === id || nfCanvasUtils.getConnectionDestinationComponentId(entry) === id) {
+                        connections.push(entry);
                     }
                 });
-            };
-
-            expire(addedCache);
-            expire(removedCache);
-        }
-    };
-
-    return nfConnection;
-}));
\ No newline at end of file
+                return connections;
+            },
+    
+            /**
+             * If the connection id is specified it is returned. If no connection id
+             * specified, all connections are returned.
+             *
+             * @param {string} id
+             */
+            get: function (id) {
+              if (nfCommon.isUndefined(id)) {
+                    return connectionMap.values();
+                } else {
+                    return connectionMap.get(id);
+                }
+          },
+  
+          /**
+           * Expires the caches up to the specified timestamp.
+           *
+           * @param timestamp
+           */
+          expireCaches: function (timestamp) {
+              var expire = function (cache) {
+                  cache.forEach(function (id, entryTimestamp) {
+                      if (timestamp > entryTimestamp) {
+                          cache.remove(id);
+                      }
+                  });
+              };
+  
+              expire(addedCache);
+              expire(removedCache);
+          }
+      };
+  
+      return nfConnection;
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js
index 4013167c4f0f..74993453079b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js
@@ -497,43 +497,43 @@
 
     // defines the available actions and the conditions which they apply
     var actions = [
-        {condition: emptySelection, menuItem: {clazz: 'fa fa-refresh', text: 'Refresh', action: 'reload'}},
-        {condition: isNotRootGroup, menuItem: {clazz: 'fa fa-level-up', text: 'Leave group', action: 'leaveGroup'}},
-        {condition: isConfigurable, menuItem: {clazz: 'fa fa-gear', text: 'Configure', action: 'showConfiguration'}},
-        {condition: hasDetails, menuItem: {clazz: 'fa fa-gear', text: 'View configuration', action: 'showDetails'}},
-        {condition: isProcessGroup, menuItem: {clazz: 'fa fa-sign-in', text: 'Enter group', action: 'enterGroup'}},
-        {condition: isRunnable, menuItem: {clazz: 'fa fa-play', text: 'Start', action: 'start'}},
-        {condition: isStoppable, menuItem: {clazz: 'fa fa-stop', text: 'Stop', action: 'stop'}},
-        {condition: canEnable, menuItem: {clazz: 'fa fa-flash', text: 'Enable', action: 'enable'}},
-        {condition: canDisable, menuItem: {clazz: 'icon icon-enable-false', text: 'Disable', action: 'disable'}},
-        {condition: canGroup, menuItem: {clazz: 'icon icon-group', text: 'Group', action: 'group'}},
-        {condition: isRemoteProcessGroup, menuItem: {clazz: 'fa fa-cloud', text: 'Remote ports', action: 'remotePorts'}},
-        {condition: canStartTransmission, menuItem: {clazz: 'fa fa-bullseye', text: 'Enable transmission', action: 'enableTransmission'}},
-        {condition: canStopTransmission, menuItem: { clazz: 'icon icon-transmit-false', text: 'Disable transmission', action: 'disableTransmission'}},
-        {condition: supportsStats, menuItem: {clazz: 'fa fa-area-chart', text: 'Status History', action: 'showStats'}},
-        {condition: canAccessProvenance, menuItem: {clazz: 'icon icon-provenance', imgStyle: 'context-menu-provenance', text: 'Data provenance', action: 'openProvenance'}},
-        {condition: isStatefulProcessor, menuItem: {clazz: 'fa fa-tasks', text: 'View state', action: 'viewState'}},
-        {condition: canMoveToFront, menuItem: {clazz: 'fa fa-clone', text: 'Bring to front', action: 'toFront'}},
-        {condition: isConnection, menuItem: {clazz: 'fa fa-long-arrow-left', text: 'Go to source', action: 'showSource'}},
-        {condition: isConnection, menuItem: {clazz: 'fa fa-long-arrow-right', text: 'Go to destination', action: 'showDestination'}},
-        {condition: hasUpstream, menuItem: {clazz: 'icon icon-connect', text: 'Upstream connections', action: 'showUpstream'}},
-        {condition: hasDownstream, menuItem: {clazz: 'icon icon-connect', text: 'Downstream connections', action: 'showDownstream'}},
-        {condition: hasUsage, menuItem: {clazz: 'fa fa-book', text: 'Usage', action: 'showUsage'}},
-        {condition: isRemoteProcessGroup, menuItem: {clazz: 'fa fa-refresh', text: 'Refresh', action: 'refreshRemoteFlow'}},
-        {condition: isRemoteProcessGroup, menuItem: {clazz: 'fa fa-external-link', text: 'Go to', action: 'openUri'}},
-        {condition: isColorable, menuItem: {clazz: 'fa fa-paint-brush', text: 'Change color', action: 'fillColor'}},
-        {condition: isNotConnection, menuItem: {clazz: 'fa fa-crosshairs', text: 'Center in view', action: 'center'}},
-        {condition: isCopyable, menuItem: {clazz: 'fa fa-copy', text: 'Copy', action: 'copy'}},
-        {condition: isPastable, menuItem: {clazz: 'fa fa-paste', text: 'Paste', action: 'paste'}},
-        {condition: canMoveToParent, menuItem: {clazz: 'fa fa-arrows', text: 'Move to parent group', action: 'moveIntoParent'}},
-        {condition: canListQueue, menuItem: {clazz: 'fa fa-list', text: 'List queue', action: 'listQueue'}},
-        {condition: canEmptyQueue, menuItem: {clazz: 'fa fa-minus-circle', text: 'Empty queue', action: 'emptyQueue'}},
-        {condition: isDeletable, menuItem: {clazz: 'fa fa-trash', text: 'Delete', action: 'delete'}},
-        {condition: canManagePolicies, menuItem: {clazz: 'fa fa-key', text: 'Access policies', action: 'managePolicies'}},
-        {condition: canAlign, menuItem: {clazz: 'fa fa-align-center', text: 'Align vertical', action: 'alignVertical'}},
-        {condition: canAlign, menuItem: { clazz: 'fa fa-align-center fa-rotate-90', text: 'Align horizontal', action: 'alignHorizontal'}},
-        {condition: canUploadTemplate, menuItem: {clazz: 'icon icon-template-import', text: 'Upload template', action: 'uploadTemplate'}},
-        {condition: canCreateTemplate, menuItem: {clazz: 'icon icon-template-save', text: 'Create template', action: 'template'}}
+        {condition: emptySelection, menuItem: {clazz: 'fa fa-refresh', text: nf._.msg('nf-context-menu.Refresh'), action: 'reload'}},
+        {condition: isNotRootGroup, menuItem: {clazz: 'fa fa-level-up', text: nf._.msg('nf-context-menu.LeaveGroup'), action: 'leaveGroup'}},
+        {condition: isConfigurable, menuItem: {clazz: 'fa fa-gear', text: nf._.msg('nf-context-menu.Configure'), action: 'showConfiguration'}},
+        {condition: hasDetails, menuItem: {clazz: 'fa fa-gear', text: nf._.msg('nf-context-menu.ViewConfiguration'), action: 'showDetails'}},
+        {condition: isProcessGroup, menuItem: {clazz: 'fa fa-sign-in', text: nf._.msg('nf-context-menu.EnterGroup'), action: 'enterGroup'}},
+        {condition: isRunnable, menuItem: {clazz: 'fa fa-play', text: nf._.msg('nf-context-menu.Start'), action: 'start'}},
+        {condition: isStoppable, menuItem: {clazz: 'fa fa-stop', text: nf._.msg('nf-context-menu.Stop'), action: 'stop'}},
+        {condition: canEnable, menuItem: {clazz: 'fa fa-flash', text: nf._.msg('nf-context-menu.canEnable'), action: 'enable'}},
+        {condition: canDisable, menuItem: {clazz: 'icon icon-enable-false', text: nf._.msg('nf-context-menu.canDisable'), action: 'disable'}},
+        {condition: canGroup, menuItem: {clazz: 'icon icon-group', text: nf._.msg('nf-context-menu.canGroup'), action: 'group'}},
+        {condition: isRemoteProcessGroup, menuItem: {clazz: 'fa fa-cloud', text: nf._.msg('nf-context-menu.RemotePorts'), action: 'remotePorts'}},
+        {condition: canStartTransmission, menuItem: {clazz: 'fa fa-bullseye', text: nf._.msg('nf-context-menu.EnableTransmission'), action: 'enableTransmission'}},
+        {condition: canStopTransmission, menuItem: {clazz: 'icon icon-transmit-false', text: nf._.msg('nf-context-menu.DisableTransmission'), action: 'disableTransmission'}},
+        {condition: supportsStats, menuItem: {clazz: 'fa fa-area-chart', text: nf._.msg('nf-context-menu.StatsHistory'), action: 'showStats'}},
+        {condition: canAccessProvenance, menuItem: {clazz: 'icon icon-provenance', imgStyle: 'context-menu-provenance', text: nf._.msg('nf-context-menu.DataProvenance'), action: 'openProvenance'}},
+        {condition: isStatefulProcessor, menuItem: {clazz: 'fa fa-tasks', text: nf._.msg('nf-context-menu.ViewState'), action: 'viewState'}},
+        {condition: canMoveToFront, menuItem: {clazz: 'fa fa-clone', text: nf._.msg('nf-context-menu.BringFront'), action: 'toFront'}},
+        {condition: isConnection, menuItem: {clazz: 'fa fa-long-arrow-left', text: nf._.msg('nf-context-menu.GoToSource'), action: 'showSource'}},
+        {condition: isConnection, menuItem: {clazz: 'fa fa-long-arrow-right', text: nf._.msg('nf-context-menu.GoToDestination'), action: 'showDestination'}},
+        {condition: hasUpstream, menuItem: {clazz: 'icon icon-connect', text: nf._.msg('nf-context-menu.UpstreamConnections'), action: 'showUpstream'}},
+        {condition: hasDownstream, menuItem: {clazz: 'icon icon-connect', text: nf._.msg('nf-context-menu.DownstreamConnections'), action: 'showDownstream'}},
+        {condition: hasUsage, menuItem: {clazz: 'fa fa-book', text: nf._.msg('nf-context-menu.Usage'), action: 'showUsage'}},
+        {condition: isRemoteProcessGroup, menuItem: {clazz: 'fa fa-refresh', text: nf._.msg('nf-context-menu.Refresh'), action: 'refreshRemoteFlow'}},
+        {condition: isRemoteProcessGroup, menuItem: {clazz: 'fa fa-external-link', text: nf._.msg('nf-context-menu.GoTo'), action: 'openUri'}},
+        {condition: isColorable, menuItem: {clazz: 'fa fa-paint-brush', text: nf._.msg('nf-context-menu.ChangeColor'), action: 'fillColor'}},
+        {condition: isNotConnection, menuItem: {clazz: 'fa fa-crosshairs', text: nf._.msg('nf-context-menu.CenterInView'), action: 'center'}},
+        {condition: isCopyable, menuItem: {clazz: 'fa fa-copy', text: nf._.msg('nf-context-menu.Copy'), action: 'copy'}},
+        {condition: isPastable, menuItem: {clazz: 'fa fa-paste', text: nf._.msg('nf-context-menu.Paste'), action: 'paste'}},
+        {condition: canMoveToParent, menuItem: {clazz: 'fa fa-arrows', text: nf._.msg('nf-context-menu.MoveParentGroup'), action: 'moveIntoParent'}},
+        {condition: canListQueue, menuItem: {clazz: 'fa fa-list', text: nf._.msg('nf-context-menu.QueueList'), action: 'listQueue'}},
+        {condition: canEmptyQueue, menuItem: {clazz: 'fa fa-minus-circle', text: nf._.msg('nf-context-menu.EmptyQueue'), action: 'emptyQueue'}},
+        {condition: isDeletable, menuItem: {clazz: 'fa fa-trash', text: nf._.msg('nf-context-menu.Delete'), action: 'delete'}},
+        {condition: canManagePolicies, menuItem: {clazz: 'fa fa-key', text: nf._.msg('nf-context-menu.canManagePolicies'), action: 'managePolicies'}},
+        {condition: canAlign, menuItem: {clazz: 'fa fa-align-center', text: nf._.msg('nf-context-menu.canAlign1'), action: 'alignVertical'}},
+        {condition: canAlign, menuItem: { clazz: 'fa fa-align-center fa-rotate-90', text: nf._.msg('nf-context-menu.canAlign2'), action: 'alignHorizontal'}},
+        {condition: canUploadTemplate, menuItem: {clazz: 'icon icon-template-import', text: nf._.msg('nf-context-menu.canUploadTemplate'), action: 'uploadTemplate'}},
+        {condition: canCreateTemplate, menuItem: {clazz: 'icon icon-template-save', text: nf._.msg('nf-context-menu.canCreateTemplate'), action: 'template'}}
     ];
 
     var nfContextMenu = {
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 2bbc8c2172d4..3491f55fe66f 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
@@ -1,2048 +1,1882 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.ErrorHandler',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.Client',
-                'nf.ControllerServices',
-                'nf.Settings',
-                'nf.UniversalCapture',
-                'nf.CustomUi',
-                'nf.CanvasUtils',
-                'nf.ReportingTask',
-                'nf.Processor'],
-            function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerServices, nfSettings, nfUniversalCapture, nfCustomUi, nfCanvasUtils, nfReportingTask, nfProcessor) {
-                return (nf.ControllerService = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerServices, nfSettings, nfUniversalCapture, nfCustomUi, nfCanvasUtils, nfReportingTask, nfProcessor));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ControllerService =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.ErrorHandler'),
-                require('nf.Common'),
-                require('nf.Dialog'),
-                require('nf.Client'),
-                require('nf.ControllerServices'),
-                require('nf.Settings'),
-                require('nf.UniversalCapture'),
-                require('nf.CustomUi'),
-                require('nf.CanvasUtils'),
-                require('nf.ReportingTask'),
-                require('nf.Processor')));
-    } else {
-        nf.ControllerService = factory(root.$,
-            root.d3,
-            root.nf.ErrorHandler,
-            root.nf.Common,
-            root.nf.Dialog,
-            root.nf.Client,
-            root.nf.ControllerServices,
-            root.nf.Settings,
-            root.nf.UniversalCapture,
-            root.nf.CustomUi,
-            root.nf.CanvasUtils,
-            root.nf.ReportingTask,
-            root.nf.Processor);
-    }
-}(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerServices, nfSettings, nfUniversalCapture, nfCustomUi, nfCanvasUtils, nfReportingTask, nfProcessor) {
-    'use strict';
-
-    var config = {
-        edit: 'edit',
-        readOnly: 'read-only',
-        serviceOnly: 'SERVICE_ONLY',
-        serviceAndReferencingComponents: 'SERVICE_AND_REFERENCING_COMPONENTS',
-        urls: {
-            api: '../nifi-api'
-        }
-    };
-
-    /**
-     * Handle any expected controller service configuration errors.
+    /*
+     * 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
      *
-     * @argument {object} xhr       The XmlHttpRequest
-     * @argument {string} status    The status of the request
-     * @argument {string} error     The error
+     * 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.
      */
-    var handleControllerServiceConfigurationError = function (xhr, status, error) {
-        if (xhr.status === 400) {
-            var errors = xhr.responseText.split('\n');
-
-            var content;
-            if (errors.length === 1) {
-                content = $('<span></span>').text(errors[0]);
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.ControllerServices',
+                  'nf.Settings',
+                  'nf.UniversalCapture',
+                  'nf.CustomUi',
+                  'nf.CanvasUtils',
+                  'nf.ReportingTask',
+                  'nf.Processor'],
+              function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerServices, nfSettings, nfUniversalCapture, nfCustomUi, nfCanvasUtils, nfReportingTask, nfProcessor) {
+                  return (nf.ControllerService = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerServices, nfSettings, nfUniversalCapture, nfCustomUi, nfCanvasUtils, nfReportingTask, nfProcessor));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ControllerService =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.ControllerServices'),
+                  require('nf.Settings'),
+                  require('nf.UniversalCapture'),
+                  require('nf.CustomUi'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ReportingTask'),
+                  require('nf.Processor')));
+      } else {
+          nf.ControllerService = factory(root.$,
+              root.d3,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.ControllerServices,
+              root.nf.Settings,
+              root.nf.UniversalCapture,
+              root.nf.CustomUi,
+              root.nf.CanvasUtils,
+              root.nf.ReportingTask,
+              root.nf.Processor);
+      }
+  }(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerServices, nfSettings, nfUniversalCapture, nfCustomUi, nfCanvasUtils, nfReportingTask, nfProcessor) {
+      'use strict';
+    
+        var config = {
+            edit: 'edit',
+            readOnly: 'read-only',
+            serviceOnly: 'SERVICE_ONLY',
+          serviceAndReferencingComponents: 'SERVICE_AND_REFERENCING_COMPONENTS',
+          urls: {
+              api: '../nifi-api'
+          }
+        };
+    
+        /**
+         * Handle any expected controller service configuration errors.
+         *
+         * @argument {object} xhr       The XmlHttpRequest
+         * @argument {string} status    The status of the request
+         * @argument {string} error     The error
+         */
+        var handleControllerServiceConfigurationError = function (xhr, status, error) {
+            if (xhr.status === 400) {
+                var errors = xhr.responseText.split('\n');
+    
+                var content;
+                if (errors.length === 1) {
+                    content = $('<span></span>').text(errors[0]);
+                } else {
+                  content = nfCommon.formatUnorderedList(errors);
+                }
+    
+              nfDialog.showOkDialog({
+                    dialogContent: content,
+                  headerText: nf._.msg('nf-controller-service.ControllerService')
+                });
             } else {
-                content = nfCommon.formatUnorderedList(errors);
+              nfErrorHandler.handleAjaxError(xhr, status, error);
             }
-
-            nfDialog.showOkDialog({
-                dialogContent: content,
-                headerText: 'Controller Service'
-            });
-        } else {
-            nfErrorHandler.handleAjaxError(xhr, status, error);
-        }
-    };
-
-    /**
-     * Determines whether the user has made any changes to the controller service configuration
-     * that needs to be saved.
-     */
-    var isSaveRequired = function () {
-        var entity = $('#controller-service-configuration').data('controllerServiceDetails');
-
-        // determine if any controller service settings have changed
-
-        if ($('#controller-service-name').val() !== entity.component['name']) {
-            return true;
-        }
-        if ($('#controller-service-comments').val() !== entity.component['comments']) {
+        };
+    
+        /**
+         * Determines whether the user has made any changes to the controller service configuration
+         * that needs to be saved.
+         */
+        var isSaveRequired = function () {
+            var entity = $('#controller-service-configuration').data('controllerServiceDetails');
+    
+            // determine if any controller service settings have changed
+    
+            if ($('#controller-service-name').val() !== entity.component['name']) {
+                return true;
+            }
+            if ($('#controller-service-comments').val() !== entity.component['comments']) {
+                return true;
+            }
+    
+            // defer to the properties
+            return $('#controller-service-properties').propertytable('isSaveRequired');
+        };
+    
+        /**
+         * Marshals the data that will be used to update the contr oller service's configuration.
+         */
+        var marshalDetails = function () {
+            // properties
+            var properties = $('#controller-service-properties').propertytable('marshalProperties');
+    
+            // create the controller service dto
+            var controllerServiceDto = {};
+            controllerServiceDto['id'] = $('#controller-service-id').text();
+            controllerServiceDto['name'] = $('#controller-service-name').val();
+            controllerServiceDto['comments'] = $('#controller-service-comments').val();
+    
+            // set the properties
+            if ($.isEmptyObject(properties) === false) {
+                controllerServiceDto['properties'] = properties;
+            }
+    
+            // create the controller service entity
+            var controllerServiceEntity = {};
+            controllerServiceEntity['component'] = controllerServiceDto;
+    
+            // return the marshaled details
+            return controllerServiceEntity;
+        };
+    
+        /**
+         * Validates the specified details.
+         *
+         * @argument {object} details       The details to validate
+         */
+        var validateDetails = function (details) {
             return true;
-        }
-
-        // defer to the properties
-        return $('#controller-service-properties').propertytable('isSaveRequired');
-    };
-
-    /**
-     * Marshals the data that will be used to update the contr oller service's configuration.
-     */
-    var marshalDetails = function () {
-        // properties
-        var properties = $('#controller-service-properties').propertytable('marshalProperties');
-
-        // create the controller service dto
-        var controllerServiceDto = {};
-        controllerServiceDto['id'] = $('#controller-service-id').text();
-        controllerServiceDto['name'] = $('#controller-service-name').val();
-        controllerServiceDto['comments'] = $('#controller-service-comments').val();
-
-        // set the properties
-        if ($.isEmptyObject(properties) === false) {
-            controllerServiceDto['properties'] = properties;
-        }
-
-        // create the controller service entity
-        var controllerServiceEntity = {};
-        controllerServiceEntity['component'] = controllerServiceDto;
-
-        // return the marshaled details
-        return controllerServiceEntity;
-    };
-
-    /**
-     * Validates the specified details.
-     *
-     * @argument {object} details       The details to validate
-     */
-    var validateDetails = function (details) {
-        return true;
-    };
-
-    /**
-     * Reloads the specified controller service if we have read permissions. It's referencing and referenced
-     * components are NOT reloaded.
-     *
-     * @param {jQuery} serviceTable
-     * @param {string} id
-     */
-    var reloadControllerService = function (serviceTable, id) {
-        // get the table and update the row accordingly
-        var controllerServiceGrid = serviceTable.data('gridInstance');
-        var controllerServiceData = controllerServiceGrid.getData();
-        var controllerServiceEntity = controllerServiceData.getItemById(id);
-
-        // this may happen if controller service A references another controller
-        // service B that has been removed. attempting to enable/disable/remove A
-        // will attempt to reload B which is no longer a known service. also ensure
-        // we have permissions to reload the service
-        if (nfCommon.isUndefined(controllerServiceEntity) || controllerServiceEntity.permissions.canRead === false) {
-            return $.Deferred(function (deferred) {
-                deferred.reject();
-            }).promise();
-        }
-
-        return $.ajax({
-            type: 'GET',
-            url: controllerServiceEntity.uri,
-            dataType: 'json'
-        }).done(function (response) {
-            renderControllerService(serviceTable, response);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Renders the specified controller service.
-     *
-     * @param {object} serviceTable
-     * @param {object} controllerServiceEntity
-     */
-    var renderControllerService = function (serviceTable, controllerServiceEntity) {
-        // get the table and update the row accordingly
-        var controllerServiceGrid = serviceTable.data('gridInstance');
-        var controllerServiceData = controllerServiceGrid.getData();
-        var currentControllerServiceEntity = controllerServiceData.getItemById(controllerServiceEntity.id);
-        controllerServiceData.updateItem(controllerServiceEntity.id, $.extend({
-            bulletins: currentControllerServiceEntity.bulletins
-        }, controllerServiceEntity));
-    };
-
-    /**
-     * Reloads the specified controller services and all of its referencing
-     * and referenced components.
-     *
-     * @param {jQuery} serviceTable
-     * @param {type} controllerService
-     */
-    var reloadControllerServiceAndReferencingComponents = function (serviceTable, controllerService) {
-        reloadControllerService(serviceTable, controllerService.id).done(function (response) {
-            reloadControllerServiceReferences(serviceTable, response.component);
-        });
-    };
-
-    /**
-     * Reloads components that reference this controller service as well as
-     * other services that this controller service references.
-     *
-     * @param {jQuery} serviceTable
-     * @param {object} controllerService
-     */
-    var reloadControllerServiceReferences = function (serviceTable, controllerService) {
-        // reload all dependent processors if they are currently visible
-        $.each(controllerService.referencingComponents, function (_, referencingComponentEntity) {
-            // ensure we can read the referencing component prior to reloading
-            if (referencingComponentEntity.permissions.canRead === false) {
-                return;
+        };
+    
+        /**
+         * Reloads the specified controller service if we have read permissions. It's referencing and referenced
+         * components are NOT reloaded.
+         *
+         * @param {jQuery} serviceTable
+         * @param {string} id
+         */
+        var reloadControllerService = function (serviceTable, id) {
+            // get the table and update the row accordingly
+            var controllerServiceGrid = serviceTable.data('gridInstance');
+            var controllerServiceData = controllerServiceGrid.getData();
+            var controllerServiceEntity = controllerServiceData.getItemById(id);
+    
+            // this may happen if controller service A references another controller
+            // service B that has been removed. attempting to enable/disable/remove A
+            // will attempt to reload B which is no longer a known service. also ensure
+            // we have permissions to reload the service
+          if (nfCommon.isUndefined(controllerServiceEntity) || controllerServiceEntity.permissions.canRead === false) {
+                return $.Deferred(function (deferred) {
+                    deferred.reject();
+                }).promise();
             }
-
-            var reference = referencingComponentEntity.component;
-            if (reference.referenceType === 'Processor') {
-                // reload the processor on the canvas if appropriate
-                if (nfCanvasUtils.getGroupId() === reference.groupId) {
-                    nfProcessor.reload(reference.id);
-                }
-
-                // update the current active thread count
-                $('div.' + reference.id + '-active-threads').text(reference.activeThreadCount);
-
-                // update the current state of this processor
-                var referencingComponentState = $('div.' + reference.id + '-state');
-                if (referencingComponentState.length) {
-                    updateReferencingSchedulableComponentState(referencingComponentState, reference);
-                }
-            } else if (reference.referenceType === 'ReportingTask') {
-                // reload the referencing reporting tasks
-                nfReportingTask.reload(reference.id);
-
-                // update the current active thread count
-                $('div.' + reference.id + '-active-threads').text(reference.activeThreadCount);
-
-                // update the current state of this reporting task
-                var referencingComponentState = $('div.' + reference.id + '-state');
-                if (referencingComponentState.length) {
-                    updateReferencingSchedulableComponentState(referencingComponentState, reference);
-                }
-            } else {
-                // reload the referencing services
-                reloadControllerService(serviceTable, reference.id);
-
-                // update the current state of this service
-                var referencingComponentState = $('div.' + reference.id + '-state');
-                if (referencingComponentState.length) {
-                    updateReferencingServiceState(referencingComponentState, reference);
-                }
-
-                // consider it's referencing components if appropriate
-                if (reference.referenceCycle === false) {
-                    reloadControllerServiceReferences(serviceTable, reference);
+    
+            return $.ajax({
+                type: 'GET',
+                url: controllerServiceEntity.uri,
+                dataType: 'json'
+            }).done(function (response) {
+                renderControllerService(serviceTable, response);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Renders the specified controller service.
+         *
+         * @param {object} serviceTable
+         * @param {object} controllerServiceEntity
+         */
+        var renderControllerService = function (serviceTable, controllerServiceEntity) {
+            // get the table and update the row accordingly
+            var controllerServiceGrid = serviceTable.data('gridInstance');
+            var controllerServiceData = controllerServiceGrid.getData();
+            var currentControllerServiceEntity = controllerServiceData.getItemById(controllerServiceEntity.id);
+            controllerServiceData.updateItem(controllerServiceEntity.id, $.extend({
+                bulletins: currentControllerServiceEntity.bulletins
+            }, controllerServiceEntity));
+        };
+    
+        /**
+         * Reloads the specified controller services and all of its referencing
+         * and referenced components.
+         *
+         * @param {jQuery} serviceTable
+         * @param {type} controllerService
+         */
+        var reloadControllerServiceAndReferencingComponents = function (serviceTable, controllerService) {
+            reloadControllerService(serviceTable, controllerService.id).done(function (response) {
+                reloadControllerServiceReferences(serviceTable, response.component);
+            });
+        };
+    
+        /**
+         * Reloads components that reference this controller service as well as
+         * other services that this controller service references.
+         *
+         * @param {jQuery} serviceTable
+         * @param {object} controllerService
+         */
+        var reloadControllerServiceReferences = function (serviceTable, controllerService) {
+            // reload all dependent processors if they are currently visible
+            $.each(controllerService.referencingComponents, function (_, referencingComponentEntity) {
+                // ensure we can read the referencing component prior to reloading
+                if (referencingComponentEntity.permissions.canRead === false) {
+                    return;
                 }
-            }
-        });
-
-        // see if this controller service references another controller service
-        // in order to update the referenced service referencing components
-        nfControllerService.reloadReferencedServices(serviceTable, controllerService);
-    };
-
-    /**
-     * Adds a border to the controller service referencing components if necessary.
-     *
-     * @argument {jQuery} referenceContainer
-     */
-    var updateReferencingComponentsBorder = function (referenceContainer) {
-        // determine if it is too big
-        var tooBig = referenceContainer.get(0).scrollHeight > Math.round(referenceContainer.innerHeight()) ||
-            referenceContainer.get(0).scrollWidth > Math.round(referenceContainer.innerWidth());
-
-        // draw the border if necessary
-        if (referenceContainer.is(':visible') && tooBig) {
-            referenceContainer.css('border-width', '1px');
-        } else {
-            referenceContainer.css('border-width', '0px');
-        }
-    };
-
-    /**
-     * Updates the specified bulletinIcon with the specified bulletins if necessary.
-     *
-     * @param {array} bulletins
-     * @param {jQuery} bulletinIcon
-     */
-    var updateBulletins = function (bulletins, bulletinIcon) {
-        var currentBulletins = bulletinIcon.data('bulletins');
-
-        // update the bulletins if necessary
-        if (nfCommon.doBulletinsDiffer(currentBulletins, bulletins)) {
-            bulletinIcon.data('bulletins', bulletins);
-
-            // format the new bulletins
-            var formattedBulletins = nfCommon.getFormattedBulletins(bulletins);
-
-            // if there are bulletins update them
-            if (bulletins.length > 0) {
-                var list = nfCommon.formatUnorderedList(formattedBulletins);
-
-                // update existing tooltip or initialize a new one if appropriate
-                if (bulletinIcon.data('qtip')) {
-                    bulletinIcon.qtip('option', 'content.text', list);
+    
+                var reference = referencingComponentEntity.component;
+                if (reference.referenceType === 'Processor') {
+                    // reload the processor on the canvas if appropriate
+                  if (nfCanvasUtils.getGroupId() === reference.groupId) {
+                      nfProcessor.reload(reference.id);
+                    }
+    
+                    // update the current active thread count
+                    $('div.' + reference.id + '-active-threads').text(reference.activeThreadCount);
+    
+                    // update the current state of this processor
+                    var referencingComponentState = $('div.' + reference.id + '-state');
+                    if (referencingComponentState.length) {
+                        updateReferencingSchedulableComponentState(referencingComponentState, reference);
+                    }
+                } else if (reference.referenceType === 'ReportingTask') {
+                    // reload the referencing reporting tasks
+                  nfReportingTask.reload(reference.id);
+    
+                    // update the current active thread count
+                    $('div.' + reference.id + '-active-threads').text(reference.activeThreadCount);
+    
+                    // update the current state of this reporting task
+                    var referencingComponentState = $('div.' + reference.id + '-state');
+                    if (referencingComponentState.length) {
+                        updateReferencingSchedulableComponentState(referencingComponentState, reference);
+                    }
                 } else {
-                    bulletinIcon.addClass('has-bulletins').show().qtip($.extend({},
-                        nfCanvasUtils.config.systemTooltipConfig,
-                        {
-                            content: list
-                        }));
+                    // reload the referencing services
+                    reloadControllerService(serviceTable, reference.id);
+    
+                    // update the current state of this service
+                    var referencingComponentState = $('div.' + reference.id + '-state');
+                    if (referencingComponentState.length) {
+                        updateReferencingServiceState(referencingComponentState, reference);
+                    }
+    
+                    // consider it's referencing components if appropriate
+                    if (reference.referenceCycle === false) {
+                        reloadControllerServiceReferences(serviceTable, reference);
+                    }
                 }
-            } else if (bulletinIcon.data('qtip')) {
-                bulletinIcon.removeClass('has-bulletins').removeData('bulletins').hide().qtip('api').destroy(true);
+            });
+    
+            // see if this controller service references another controller service
+            // in order to update the referenced service referencing components
+          nfControllerService.reloadReferencedServices(serviceTable, controllerService);
+        };
+    
+        /**
+         * Adds a border to the controller service referencing components if necessary.
+         *
+         * @argument {jQuery} referenceContainer
+         */
+        var updateReferencingComponentsBorder = function (referenceContainer) {
+            // determine if it is too big
+          var tooBig = referenceContainer.get(0).scrollHeight > Math.round(referenceContainer.innerHeight()) ||
+              referenceContainer.get(0).scrollWidth > Math.round(referenceContainer.innerWidth());
+    
+            // draw the border if necessary
+            if (referenceContainer.is(':visible') && tooBig) {
+                referenceContainer.css('border-width', '1px');
+            } else {
+                referenceContainer.css('border-width', '0px');
             }
-        }
-    };
-
-    /**
-     * Updates the referencingComponentState using the specified referencingComponent.
-     *
-     * @param {jQuery} referencingComponentState
-     * @param {object} referencingComponent
-     */
-    var updateReferencingSchedulableComponentState = function (referencingComponentState, referencingComponent) {
-        referencingComponentState.removeClass('disabled stopped running invalid').addClass(function () {
-            var icon = $(this);
-
-            var state = referencingComponent.state.toLowerCase();
-            if (state === 'stopped' && !nfCommon.isEmpty(referencingComponent.validationErrors)) {
-                state = 'invalid';
-
-                // add tooltip for the warnings
-                var list = nfCommon.formatUnorderedList(referencingComponent.validationErrors);
-                if (icon.data('qtip')) {
-                    icon.qtip('option', 'content.text', list);
-                } else {
-                    icon.qtip($.extend({},
-                        nfCanvasUtils.config.systemTooltipConfig,
-                        {
-                            content: list
-                        }));
+        };
+    
+        /**
+         * Updates the specified bulletinIcon with the specified bulletins if necessary.
+         *
+         * @param {array} bulletins
+         * @param {jQuery} bulletinIcon
+         */
+        var updateBulletins = function (bulletins, bulletinIcon) {
+            var currentBulletins = bulletinIcon.data('bulletins');
+    
+            // update the bulletins if necessary
+          if (nfCommon.doBulletinsDiffer(currentBulletins, bulletins)) {
+                bulletinIcon.data('bulletins', bulletins);
+    
+                // format the new bulletins
+              var formattedBulletins = nfCommon.getFormattedBulletins(bulletins);
+    
+                // if there are bulletins update them
+                if (bulletins.length > 0) {
+                  var list = nfCommon.formatUnorderedList(formattedBulletins);
+    
+                    // update existing tooltip or initialize a new one if appropriate
+                    if (bulletinIcon.data('qtip')) {
+                        bulletinIcon.qtip('option', 'content.text', list);
+                    } else {
+                        bulletinIcon.addClass('has-bulletins').show().qtip($.extend({},
+                          nfCanvasUtils.config.systemTooltipConfig,
+                            {
+                                content: list
+                            }));
+                    }
+                } else if (bulletinIcon.data('qtip')) {
+                    bulletinIcon.removeClass('has-bulletins').removeData('bulletins').hide().qtip('api').destroy(true);
                 }
-            } else if (icon.data('qtip')) {
-                icon.qtip('api').destroy(true);
             }
-            return state;
-        });
-    };
-
-    /**
-     * Updates the referencingServiceState using the specified referencingService.
-     *
-     * @param {jQuery} referencingServiceState
-     * @param {object} referencingService
-     */
-    var updateReferencingServiceState = function (referencingServiceState, referencingService) {
-        referencingServiceState.removeClass('disabled enabled invalid').addClass(function () {
-            var icon = $(this);
-
-            var state = referencingService.state === 'ENABLED' ? 'enabled' : 'disabled';
-            if (state === 'disabled' && !nfCommon.isEmpty(referencingService.validationErrors)) {
-                state = 'invalid';
-
-                // add tooltip for the warnings
-                var list = nfCommon.formatUnorderedList(referencingService.validationErrors);
-                if (icon.data('qtip')) {
-                    icon.qtip('option', 'content.text', list);
-                } else {
-                    icon.qtip($.extend({},
-                        nfCanvasUtils.config.systemTooltipConfig,
-                        {
-                            content: list
-                        }));
+        };
+    
+        /**
+         * Updates the referencingComponentState using the specified referencingComponent.
+         *
+         * @param {jQuery} referencingComponentState
+         * @param {object} referencingComponent
+         */
+        var updateReferencingSchedulableComponentState = function (referencingComponentState, referencingComponent) {
+            referencingComponentState.removeClass('disabled stopped running invalid').addClass(function () {
+                var icon = $(this);
+    
+                var state = referencingComponent.state.toLowerCase();
+              if (state === 'stopped' && !nfCommon.isEmpty(referencingComponent.validationErrors)) {
+                    state = 'invalid';
+    
+                    // add tooltip for the warnings
+                  var list = nfCommon.formatUnorderedList(referencingComponent.validationErrors);
+                    if (icon.data('qtip')) {
+                        icon.qtip('option', 'content.text', list);
+                    } else {
+                        icon.qtip($.extend({},
+                          nfCanvasUtils.config.systemTooltipConfig,
+                            {
+                                content: list
+                            }));
+                    }
+                } else if (icon.data('qtip')) {
+                    icon.qtip('api').destroy(true);
                 }
-            } else if (icon.data('qtip')) {
-                icon.qtip('api').destroy(true);
-            }
-            return state;
-        });
-    };
-
-    /**
-     * Updates the bulletins for all referencing components.
-     *
-     * @param {array} bulletins
-     */
-    var updateReferencingComponentBulletins = function (bulletins) {
-        var bulletinsBySource = d3.nest()
-            .key(function (d) {
-                return d.sourceId;
-            })
-            .map(bulletins, d3.map);
-
-        bulletinsBySource.forEach(function (sourceId, sourceBulletins) {
-            $('div.' + sourceId + '-bulletins').each(function () {
-                updateBulletins(sourceBulletins, $(this));
+                return state;
             });
-        });
-    };
-
-    /**
-     * Adds the specified reference for this controller service.
-     *
-     * @param {jQuery} serviceTable
-     * @param {jQuery} referenceContainer
-     * @param {array} referencingComponents
-     */
-    var createReferencingComponents = function (serviceTable, referenceContainer, referencingComponents) {
-        if (nfCommon.isEmpty(referencingComponents)) {
-            referenceContainer.append('<div class="unset">No referencing components.</div>');
-            return;
-        }
-
-        // toggles the visibility of a container
-        var toggle = function (twist, container) {
-            if (twist.hasClass('expanded')) {
-                twist.removeClass('expanded').addClass('collapsed');
-                container.hide();
-            } else {
-                twist.removeClass('collapsed').addClass('expanded');
-                container.show();
-            }
         };
-
-        var referencingComponentIds = [];
-        var processors = $('<ul class="referencing-component-listing clear"></ul>');
-        var services = $('<ul class="referencing-component-listing clear"></ul>');
-        var tasks = $('<ul class="referencing-component-listing clear"></ul>');
-        var unauthorized = $('<ul class="referencing-component-listing clear"></ul>');
-        $.each(referencingComponents, function (_, referencingComponentEntity) {
-            // check the access policy for this referencing component
-            if (referencingComponentEntity.permissions.canRead === false || referencingComponentEntity.permissions.canWrite === false) {
-                var unauthorizedReferencingComponent = $('<div class="unset"></div>').text(referencingComponentEntity.id);
-                unauthorized.append(unauthorizedReferencingComponent);
-            } else {
-                var referencingComponent = referencingComponentEntity.component;
-                referencingComponentIds.push(referencingComponent.id);
-
-                if (referencingComponent.referenceType === 'Processor') {
-                    var processorLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
-                        // show the component
-                        nfCanvasUtils.showComponent(referencingComponent.groupId, referencingComponent.id);
-
-                        // close the dialog and shell
-                        referenceContainer.closest('.dialog').modal('hide');
-                        $('#shell-close-button').click();
-                    });
-
-                    // state
-                    var processorState = $('<div class="referencing-component-state"></div>').addClass(referencingComponent.id + '-state');
-                    updateReferencingSchedulableComponentState(processorState, referencingComponent);
-
-                    // bulletin
-                    var processorBulletins = $('<div class="referencing-component-bulletins"></div>').addClass(referencingComponent.id + '-bulletins');
-
-                    // type
-                    var processorType = $('<span class="referencing-component-type"></span>').text(nfCommon.substringAfterLast(referencingComponent.type, '.'));
-
-                    // active thread count
-                    var processorActiveThreadCount = $('<span class="referencing-component-active-thread-count"></span>').addClass(referencingComponent.id + '-active-threads');
-                    if (nfCommon.isDefinedAndNotNull(referencingComponent.activeThreadCount) && referencingComponent.activeThreadCount > 0) {
-                        processorActiveThreadCount.text('(' + referencingComponent.activeThreadCount + ')');
+    
+        /**
+         * Updates the referencingServiceState using the specified referencingService.
+         *
+         * @param {jQuery} referencingServiceState
+         * @param {object} referencingService
+         */
+        var updateReferencingServiceState = function (referencingServiceState, referencingService) {
+            referencingServiceState.removeClass('disabled enabled invalid').addClass(function () {
+                var icon = $(this);
+    
+                var state = referencingService.state === 'ENABLED' ? 'enabled' : 'disabled';
+              if (state === 'disabled' && !nfCommon.isEmpty(referencingService.validationErrors)) {
+                    state = 'invalid';
+    
+                    // add tooltip for the warnings
+                  var list = nfCommon.formatUnorderedList(referencingService.validationErrors);
+                    if (icon.data('qtip')) {
+                        icon.qtip('option', 'content.text', list);
+                    } else {
+                        icon.qtip($.extend({},
+                          nfCanvasUtils.config.systemTooltipConfig,
+                            {
+                                content: list
+                            }));
                     }
-
-                    // processor
-                    var processorItem = $('<li></li>').append(processorState).append(processorBulletins).append(processorLink).append(processorType).append(processorActiveThreadCount);
-                    processors.append(processorItem);
-                } else if (referencingComponent.referenceType === 'ControllerService') {
-                    var serviceLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
-                        var controllerServiceGrid = serviceTable.data('gridInstance');
-                        var controllerServiceData = controllerServiceGrid.getData();
-
-                        // select the selected row
-                        var row = controllerServiceData.getRowById(referencingComponent.id);
-                        controllerServiceGrid.setSelectedRows([row]);
-                        controllerServiceGrid.scrollRowIntoView(row);
-
-                        // close the dialog and shell
-                        referenceContainer.closest('.dialog').modal('hide');
-                    });
-
-                    // container for this service's references
-                    var referencingServiceReferencesContainer = $('<div class="referencing-component-references hidden"></div>');
-                    var serviceTwist = $('<div class="service expansion-button collapsed pointer"></div>').on('click', function () {
-                        if (serviceTwist.hasClass('collapsed')) {
+                } else if (icon.data('qtip')) {
+                    icon.qtip('api').destroy(true);
+                }
+                return state;
+            });
+        };
+    
+        /**
+         * Updates the bulletins for all referencing components.
+         *
+         * @param {array} bulletins
+         */
+        var updateReferencingComponentBulletins = function (bulletins) {
+            var bulletinsBySource = d3.nest()
+                .key(function (d) {
+                    return d.sourceId;
+                })
+                .map(bulletins, d3.map);
+    
+            bulletinsBySource.forEach(function (sourceId, sourceBulletins) {
+                $('div.' + sourceId + '-bulletins').each(function () {
+                    updateBulletins(sourceBulletins, $(this));
+                });
+            });
+        };
+    
+        /**
+         * Adds the specified reference for this controller service.
+         *
+         * @param {jQuery} serviceTable
+         * @param {jQuery} referenceContainer
+         * @param {array} referencingComponents
+         */
+        var createReferencingComponents = function (serviceTable, referenceContainer, referencingComponents) {
+          if (nfCommon.isEmpty(referencingComponents)) {
+              referenceContainer.append('<div class="unset">'+nf._.msg('nf-actions.Message19')+'</div>');
+                return;
+            }
+    
+            // toggles the visibility of a container
+            var toggle = function (twist, container) {
+                if (twist.hasClass('expanded')) {
+                    twist.removeClass('expanded').addClass('collapsed');
+                    container.hide();
+                } else {
+                    twist.removeClass('collapsed').addClass('expanded');
+                    container.show();
+                }
+            };
+    
+            var referencingComponentIds = [];
+            var processors = $('<ul class="referencing-component-listing clear"></ul>');
+            var services = $('<ul class="referencing-component-listing clear"></ul>');
+            var tasks = $('<ul class="referencing-component-listing clear"></ul>');
+            var unauthorized = $('<ul class="referencing-component-listing clear"></ul>');
+            $.each(referencingComponents, function (_, referencingComponentEntity) {
+                // check the access policy for this referencing component
+                if (referencingComponentEntity.permissions.canRead === false || referencingComponentEntity.permissions.canWrite === false) {
+                    var unauthorizedReferencingComponent = $('<div class="unset"></div>').text(referencingComponentEntity.id);
+                    unauthorized.append(unauthorizedReferencingComponent);
+                } else {
+                    var referencingComponent = referencingComponentEntity.component;
+                    referencingComponentIds.push(referencingComponent.id);
+    
+                    if (referencingComponent.referenceType === 'Processor') {
+                        var processorLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
+                            // show the component
+                          nfCanvasUtils.showComponent(referencingComponent.groupId, referencingComponent.id);
+    
+                            // close the dialog and shell
+                            referenceContainer.closest('.dialog').modal('hide');
+                            $('#shell-close-button').click();
+                        });
+    
+                        // state
+                        var processorState = $('<div class="referencing-component-state"></div>').addClass(referencingComponent.id + '-state');
+                        updateReferencingSchedulableComponentState(processorState, referencingComponent);
+    
+                        // bulletin
+                        var processorBulletins = $('<div class="referencing-component-bulletins"></div>').addClass(referencingComponent.id + '-bulletins');
+    
+                        // type
+                      var processorType = $('<span class="referencing-component-type"></span>').text(nfCommon.substringAfterLast(referencingComponent.type, '.'));
+    
+                        // active thread count
+                        var processorActiveThreadCount = $('<span class="referencing-component-active-thread-count"></span>').addClass(referencingComponent.id + '-active-threads');
+                      if (nfCommon.isDefinedAndNotNull(referencingComponent.activeThreadCount) && referencingComponent.activeThreadCount > 0) {
+                            processorActiveThreadCount.text('(' + referencingComponent.activeThreadCount + ')');
+                        }
+    
+                        // processor
+                        var processorItem = $('<li></li>').append(processorState).append(processorBulletins).append(processorLink).append(processorType).append(processorActiveThreadCount);
+                        processors.append(processorItem);
+                    } else if (referencingComponent.referenceType === 'ControllerService') {
+                        var serviceLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
                             var controllerServiceGrid = serviceTable.data('gridInstance');
                             var controllerServiceData = controllerServiceGrid.getData();
-                            var referencingServiceEntity = controllerServiceData.getItemById(referencingComponent.id);
-                            var referencingService = referencingServiceEntity.component;
-
-                            // create the markup for the references
-                            createReferencingComponents(serviceTable, referencingServiceReferencesContainer, referencingService.referencingComponents);
-                        } else {
-                            referencingServiceReferencesContainer.empty();
+    
+                            // select the selected row
+                            var row = controllerServiceData.getRowById(referencingComponent.id);
+                            controllerServiceGrid.setSelectedRows([row]);
+                            controllerServiceGrid.scrollRowIntoView(row);
+    
+                            // close the dialog and shell
+                            referenceContainer.closest('.dialog').modal('hide');
+                        });
+    
+                        // container for this service's references
+                        var referencingServiceReferencesContainer = $('<div class="referencing-component-references hidden"></div>');
+                        var serviceTwist = $('<div class="service expansion-button collapsed pointer"></div>').on('click', function () {
+                            if (serviceTwist.hasClass('collapsed')) {
+                                var controllerServiceGrid = serviceTable.data('gridInstance');
+                                var controllerServiceData = controllerServiceGrid.getData();
+                                var referencingServiceEntity = controllerServiceData.getItemById(referencingComponent.id);
+                                var referencingService = referencingServiceEntity.component;
+    
+                                // create the markup for the references
+                                createReferencingComponents(serviceTable, referencingServiceReferencesContainer, referencingService.referencingComponents);
+                            } else {
+                                referencingServiceReferencesContainer.empty();
+                            }
+    
+                            // toggle visibility
+                            toggle(serviceTwist, referencingServiceReferencesContainer);
+    
+                            // update borders as necessary
+                            updateReferencingComponentsBorder(referenceContainer);
+                        });
+    
+                        // state
+                        var serviceState = $('<div class="referencing-component-state"></div>').addClass(referencingComponent.id + '-state');
+                        updateReferencingServiceState(serviceState, referencingComponent);
+    
+                        // bulletin
+                        var serviceBulletins = $('<div class="referencing-component-bulletins"></div>').addClass(referencingComponent.id + '-bulletins');
+    
+                        // type
+                      var serviceType = $('<span class="referencing-component-type"></span>').text(nfCommon.substringAfterLast(referencingComponent.type, '.'));
+    
+                        // service
+                        var serviceItem = $('<li></li>').append(serviceTwist).append(serviceState).append(serviceBulletins).append(serviceLink).append(serviceType).append(referencingServiceReferencesContainer);
+    
+                        services.append(serviceItem);
+                    } else if (referencingComponent.referenceType === 'ReportingTask') {
+                        var reportingTaskLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
+                            var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
+                            var reportingTaskData = reportingTaskGrid.getData();
+    
+                            // select the selected row
+                            var row = reportingTaskData.getRowById(referencingComponent.id);
+                            reportingTaskGrid.setSelectedRows([row]);
+                            reportingTaskGrid.scrollRowIntoView(row);
+    
+                            // select the reporting task tab
+                            $('#settings-tabs').find('li:last').click();
+    
+                            // close the dialog and shell
+                            referenceContainer.closest('.dialog').modal('hide');
+                        });
+    
+                        // state
+                        var reportingTaskState = $('<div class="referencing-component-state"></div>').addClass(referencingComponent.id + '-state');
+                        updateReferencingSchedulableComponentState(reportingTaskState, referencingComponent);
+    
+                        // bulletins
+                        var reportingTaskBulletins = $('<div class="referencing-component-bulletins"></div>').addClass(referencingComponent.id + '-bulletins');
+    
+                        // type
+                      var reportingTaskType = $('<span class="referencing-component-type"></span>').text(nfCommon.substringAfterLast(referencingComponent.type, '.'));
+    
+                        // active thread count
+                        var reportingTaskActiveThreadCount = $('<span class="referencing-component-active-thread-count"></span>').addClass(referencingComponent.id + '-active-threads');
+                      if (nfCommon.isDefinedAndNotNull(referencingComponent.activeThreadCount) && referencingComponent.activeThreadCount > 0) {
+                            reportingTaskActiveThreadCount.text('(' + referencingComponent.activeThreadCount + ')');
                         }
-
-                        // toggle visibility
-                        toggle(serviceTwist, referencingServiceReferencesContainer);
-
-                        // update borders as necessary
-                        updateReferencingComponentsBorder(referenceContainer);
-                    });
-
-                    // state
-                    var serviceState = $('<div class="referencing-component-state"></div>').addClass(referencingComponent.id + '-state');
-                    updateReferencingServiceState(serviceState, referencingComponent);
-
-                    // bulletin
-                    var serviceBulletins = $('<div class="referencing-component-bulletins"></div>').addClass(referencingComponent.id + '-bulletins');
-
-                    // type
-                    var serviceType = $('<span class="referencing-component-type"></span>').text(nfCommon.substringAfterLast(referencingComponent.type, '.'));
-
-                    // service
-                    var serviceItem = $('<li></li>').append(serviceTwist).append(serviceState).append(serviceBulletins).append(serviceLink).append(serviceType).append(referencingServiceReferencesContainer);
-
-                    services.append(serviceItem);
-                } else if (referencingComponent.referenceType === 'ReportingTask') {
-                    var reportingTaskLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
-                        var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
-                        var reportingTaskData = reportingTaskGrid.getData();
-
-                        // select the selected row
-                        var row = reportingTaskData.getRowById(referencingComponent.id);
-                        reportingTaskGrid.setSelectedRows([row]);
-                        reportingTaskGrid.scrollRowIntoView(row);
-
-                        // select the reporting task tab
-                        $('#settings-tabs').find('li:last').click();
-
-                        // close the dialog and shell
-                        referenceContainer.closest('.dialog').modal('hide');
-                    });
-
-                    // state
-                    var reportingTaskState = $('<div class="referencing-component-state"></div>').addClass(referencingComponent.id + '-state');
-                    updateReferencingSchedulableComponentState(reportingTaskState, referencingComponent);
-
-                    // bulletins
-                    var reportingTaskBulletins = $('<div class="referencing-component-bulletins"></div>').addClass(referencingComponent.id + '-bulletins');
-
-                    // type
-                    var reportingTaskType = $('<span class="referencing-component-type"></span>').text(nfCommon.substringAfterLast(referencingComponent.type, '.'));
-
-                    // active thread count
-                    var reportingTaskActiveThreadCount = $('<span class="referencing-component-active-thread-count"></span>').addClass(referencingComponent.id + '-active-threads');
-                    if (nfCommon.isDefinedAndNotNull(referencingComponent.activeThreadCount) && referencingComponent.activeThreadCount > 0) {
-                        reportingTaskActiveThreadCount.text('(' + referencingComponent.activeThreadCount + ')');
+    
+                        // reporting task
+                        var reportingTaskItem = $('<li></li>').append(reportingTaskState).append(reportingTaskBulletins).append(reportingTaskLink).append(reportingTaskType).append(reportingTaskActiveThreadCount);
+                        tasks.append(reportingTaskItem);
                     }
-
-                    // reporting task
-                    var reportingTaskItem = $('<li></li>').append(reportingTaskState).append(reportingTaskBulletins).append(reportingTaskLink).append(reportingTaskType).append(reportingTaskActiveThreadCount);
-                    tasks.append(reportingTaskItem);
                 }
-            }
-        });
-
-        // query for the bulletins
-        queryBulletins(referencingComponentIds).done(function (response) {
-            var bulletins = response.bulletinBoard.bulletins;
-            updateReferencingComponentBulletins(bulletins);
-        });
-
-        // create the collapsable listing for each type
-        var createReferenceBlock = function (titleText, list) {
-            if (list.is(':empty')) {
-                list.remove();
-                return;
-            }
-
-            var twist = $('<div class="expansion-button expanded"></div>');
-            var title = $('<span class="referencing-component-title"></span>').text(titleText);
-            var count = $('<span class="referencing-component-count"></span>').text('(' + list.children().length + ')');
-
-            // create the reference block
-            $('<div class="referencing-component-block pointer unselectable"></div>').on('click', function () {
-                // toggle this block
-                toggle(twist, list);
-
-                // update the border if necessary
-                updateReferencingComponentsBorder(referenceContainer);
-            }).append(twist).append(title).append(count).appendTo(referenceContainer);
-
-            // add the listing
-            list.appendTo(referenceContainer);
+            });
+    
+            // query for the bulletins
+            queryBulletins(referencingComponentIds).done(function (response) {
+                var bulletins = response.bulletinBoard.bulletins;
+                updateReferencingComponentBulletins(bulletins);
+            });
+    
+            // create the collapsable listing for each type
+            var createReferenceBlock = function (titleText, list) {
+                if (list.is(':empty')) {
+                    list.remove();
+                    return;
+                }
+    
+                var twist = $('<div class="expansion-button expanded"></div>');
+                var title = $('<span class="referencing-component-title"></span>').text(titleText);
+                var count = $('<span class="referencing-component-count"></span>').text('(' + list.children().length + ')');
+    
+                // create the reference block
+                $('<div class="referencing-component-block pointer unselectable"></div>').on('click', function () {
+                    // toggle this block
+                    toggle(twist, list);
+    
+                    // update the border if necessary
+                    updateReferencingComponentsBorder(referenceContainer);
+                }).append(twist).append(title).append(count).appendTo(referenceContainer);
+    
+                // add the listing
+                list.appendTo(referenceContainer);
+            };
+    
+            // create blocks for each type of component
+            createReferenceBlock('Processors', processors);
+            createReferenceBlock('Reporting Tasks', tasks);
+            createReferenceBlock('Controller Services', services);
+            createReferenceBlock('Unauthorized', unauthorized);
         };
-
-        // create blocks for each type of component
-        createReferenceBlock('Processors', processors);
-        createReferenceBlock('Reporting Tasks', tasks);
-        createReferenceBlock('Controller Services', services);
-        createReferenceBlock('Unauthorized', unauthorized);
-    };
-
-    /**
-     * Queries for bulletins for the specified components.
-     *
-     * @param {array} componentIds
-     * @returns {deferred}
-     */
-    var queryBulletins = function (componentIds) {
-        var ids = componentIds.join('|');
-
-        return $.ajax({
-            type: 'GET',
-            url: '../nifi-api/flow/bulletin-board',
-            data: {
-                sourceId: ids
-            },
-            dataType: 'json'
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Sets whether the specified controller service is enabled.
-     *
-     * @param {jQuery} serviceTable
-     * @param {object} controllerServiceEntity
-     * @param {boolean} enabled
-     * @param {function} pollCondition
-     */
-    var setEnabled = function (serviceTable, controllerServiceEntity, enabled, pollCondition) {
-        // build the request entity
-        var updateControllerServiceEntity = {
-            'revision': nfClient.getRevision(controllerServiceEntity),
-            'component': {
-                'id': controllerServiceEntity.id,
-                'state': enabled ? 'ENABLED' : 'DISABLED'
-            }
+    
+        /**
+         * Queries for bulletins for the specified components.
+         *
+         * @param {array} componentIds
+         * @returns {deferred}
+         */
+        var queryBulletins = function (componentIds) {
+            var ids = componentIds.join('|');
+    
+            return $.ajax({
+                type: 'GET',
+                url: '../nifi-api/flow/bulletin-board',
+                data: {
+                    sourceId: ids
+                },
+                dataType: 'json'
+          }).fail(nfErrorHandler.handleAjaxError);
         };
-
-        var updated = $.ajax({
-            type: 'PUT',
-            url: controllerServiceEntity.uri,
-            data: JSON.stringify(updateControllerServiceEntity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).done(function (response) {
-            renderControllerService(serviceTable, response);
-        }).fail(nfErrorHandler.handleAjaxError);
-
-        // wait until the polling of each service finished
-        return $.Deferred(function (deferred) {
-            updated.done(function () {
-                var serviceUpdated = pollService(controllerServiceEntity, function (service, bulletins) {
-                    if ($.isArray(bulletins)) {
+    
+        /**
+         * Sets whether the specified controller service is enabled.
+         *
+         * @param {jQuery} serviceTable
+         * @param {object} controllerServiceEntity
+         * @param {boolean} enabled
+         * @param {function} pollCondition
+         */
+        var setEnabled = function (serviceTable, controllerServiceEntity, enabled, pollCondition) {
+            // build the request entity
+            var updateControllerServiceEntity = {
+              'revision': nfClient.getRevision(controllerServiceEntity),
+                'component': {
+                    'id': controllerServiceEntity.id,
+                    'state': enabled ? 'ENABLED' : 'DISABLED'
+                }
+            };
+    
+            var updated = $.ajax({
+                type: 'PUT',
+                url: controllerServiceEntity.uri,
+                data: JSON.stringify(updateControllerServiceEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (response) {
+                renderControllerService(serviceTable, response);
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // wait until the polling of each service finished
+            return $.Deferred(function (deferred) {
+                updated.done(function () {
+                    var serviceUpdated = pollService(controllerServiceEntity, function (service, bulletins) {
+                        if ($.isArray(bulletins)) {
+                            if (enabled) {
+                                updateBulletins(bulletins, $('#enable-controller-service-bulletins'));
+                            } else {
+                                updateBulletins(bulletins, $('#disable-controller-service-bulletins'));
+                            }
+                        }
+    
+                        // the condition is met once the service is (ENABLING or ENABLED)/DISABLED
                         if (enabled) {
-                            updateBulletins(bulletins, $('#enable-controller-service-bulletins'));
+                            return service.state === 'ENABLING' || service.state === 'ENABLED';
                         } else {
-                            updateBulletins(bulletins, $('#disable-controller-service-bulletins'));
+                            return service.state === 'DISABLED';
                         }
-                    }
-
-                    // the condition is met once the service is (ENABLING or ENABLED)/DISABLED
-                    if (enabled) {
-                        return service.state === 'ENABLING' || service.state === 'ENABLED';
-                    } else {
-                        return service.state === 'DISABLED';
-                    }
-                }, function (service) {
-                    return queryBulletins([service.id]);
-                }, pollCondition);
-
-                // once the service has updated, resolve and render the updated service
-                serviceUpdated.done(function () {
-                    deferred.resolve();
+                    }, function (service) {
+                        return queryBulletins([service.id]);
+                    }, pollCondition);
+    
+                    // once the service has updated, resolve and render the updated service
+                    serviceUpdated.done(function () {
+                        deferred.resolve();
+                    }).fail(function () {
+                        deferred.reject();
+                    });
                 }).fail(function () {
                     deferred.reject();
                 });
-            }).fail(function () {
-                deferred.reject();
-            });
-        }).promise();
-    };
-
-    /**
-     * Gets the id's of all controller services referencing the specified controller service.
-     *
-     * @param {object} controllerService
-     */
-    var getReferencingControllerServiceIds = function (controllerService) {
-        var ids = d3.set();
-        ids.add(controllerService.id);
-
-        var checkReferencingServices = function (referencingComponents) {
+            }).promise();
+        };
+    
+        /**
+         * Gets the id's of all controller services referencing the specified controller service.
+         *
+         * @param {object} controllerService
+         */
+        var getReferencingControllerServiceIds = function (controllerService) {
+            var ids = d3.set();
+            ids.add(controllerService.id);
+    
+            var checkReferencingServices = function (referencingComponents) {
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'ControllerService') {
+                        // add the id
+                        ids.add(referencingComponent.id);
+    
+                        // consider it's referencing components if appropriate
+                        if (referencingComponent.referenceCycle === false) {
+                            checkReferencingServices(referencingComponent.referencingComponents);
+                        }
+                    }
+                });
+            };
+    
+            // check the referencing servcies
+            checkReferencingServices(controllerService.referencingComponents);
+            return ids;
+        };
+    
+        /**
+         * Gathers all referencing component revisions.
+         *
+         * @param referencingComponents
+         * @param referencingComponentRevisions
+         * @param serviceOnly - true includes only services, false includes only schedulable components
+         */
+        var getReferencingComponentRevisions = function (referencingComponents, referencingComponentRevisions, serviceOnly) {
+            // include the revision of each referencing component
             $.each(referencingComponents, function (_, referencingComponentEntity) {
                 var referencingComponent = referencingComponentEntity.component;
-                if (referencingComponent.referenceType === 'ControllerService') {
-                    // add the id
-                    ids.add(referencingComponent.id);
-
-                    // consider it's referencing components if appropriate
-                    if (referencingComponent.referenceCycle === false) {
-                        checkReferencingServices(referencingComponent.referencingComponents);
+    
+                if (serviceOnly) {
+                    if (referencingComponent.referenceType === 'ControllerService') {
+                      referencingComponentRevisions[referencingComponentEntity.id] = nfClient.getRevision(referencingComponentEntity);
+                    }
+                } else {
+                    if (referencingComponent.referenceType !== 'ControllerService') {
+                      referencingComponentRevisions[referencingComponentEntity.id] = nfClient.getRevision(referencingComponentEntity);
                     }
                 }
+    
+                // recurse
+                getReferencingComponentRevisions(referencingComponent.referencingComponents, referencingComponentRevisions, serviceOnly);
             });
         };
-
-        // check the referencing servcies
-        checkReferencingServices(controllerService.referencingComponents);
-        return ids;
-    };
-
-    /**
-     * Gathers all referencing component revisions.
-     *
-     * @param referencingComponents
-     * @param referencingComponentRevisions
-     * @param serviceOnly - true includes only services, false includes only schedulable components
-     */
-    var getReferencingComponentRevisions = function (referencingComponents, referencingComponentRevisions, serviceOnly) {
-        // include the revision of each referencing component
-        $.each(referencingComponents, function (_, referencingComponentEntity) {
-            var referencingComponent = referencingComponentEntity.component;
-
-            if (serviceOnly) {
-                if (referencingComponent.referenceType === 'ControllerService') {
-                    referencingComponentRevisions[referencingComponentEntity.id] = nfClient.getRevision(referencingComponentEntity);
-                }
-            } else {
-                if (referencingComponent.referenceType !== 'ControllerService') {
-                    referencingComponentRevisions[referencingComponentEntity.id] = nfClient.getRevision(referencingComponentEntity);
-                }
-            }
-
-            // recurse
-            getReferencingComponentRevisions(referencingComponent.referencingComponents, referencingComponentRevisions, serviceOnly);
-        });
-    };
-
-    /**
-     * Updates the scheduled state of the processors/reporting tasks referencing
-     * the specified controller service.
-     *
-     * @param {jQuery} serviceTable
-     * @param {object} controllerServiceEntity
-     * @param {boolean} running
-     * @param {function} pollCondition
-     */
-    var updateReferencingSchedulableComponents = function (serviceTable, controllerServiceEntity, running, pollCondition) {
-        var referencingRevisions = {};
-        getReferencingComponentRevisions(controllerServiceEntity.component.referencingComponents, referencingRevisions, false);
-
-        var referenceEntity = {
-            'id': controllerServiceEntity.id,
-            'state': running ? 'RUNNING' : 'STOPPED',
-            'referencingComponentRevisions': referencingRevisions
+    
+        /**
+         * Updates the scheduled state of the processors/reporting tasks referencing
+         * the specified controller service.
+         *
+         * @param {jQuery} serviceTable
+         * @param {object} controllerServiceEntity
+         * @param {boolean} running
+         * @param {function} pollCondition
+         */
+        var updateReferencingSchedulableComponents = function (serviceTable, controllerServiceEntity, running, pollCondition) {
+            var referencingRevisions = {};
+            getReferencingComponentRevisions(controllerServiceEntity.component.referencingComponents, referencingRevisions, false);
+    
+            var referenceEntity = {
+                'id': controllerServiceEntity.id,
+                'state': running ? 'RUNNING' : 'STOPPED',
+                'referencingComponentRevisions': referencingRevisions
+            };
+    
+            // issue the request to update the referencing components
+            var updated = $.ajax({
+                type: 'PUT',
+                url: controllerServiceEntity.uri + '/references',
+                data: JSON.stringify(referenceEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // Note: updated revisions will be retrieved after updateReferencingSchedulableComponents is invoked
+    
+            // wait unil the polling of each service finished
+            return $.Deferred(function (deferred) {
+                updated.done(function (response) {
+                    // update the controller service
+                    controllerServiceEntity.component.referencingComponents = response.controllerServiceReferencingComponents;
+    
+                    // if we're just starting schedulable components we're done when the update is finished
+                    if (running) {
+                        deferred.resolve();
+                    } else {
+                        // identify all referencing services
+                        var services = getReferencingControllerServiceIds(controllerServiceEntity.component);
+    
+                        // get the controller service grid
+                        var controllerServiceGrid = serviceTable.data('gridInstance');
+                        var controllerServiceData = controllerServiceGrid.getData();
+    
+                        // start polling for each controller service
+                        var polling = [];
+                        services.forEach(function (controllerServiceId) {
+                            var referencingService = controllerServiceData.getItemById(controllerServiceId);
+                            polling.push(stopReferencingSchedulableComponents(referencingService, pollCondition));
+                        });
+    
+                        // wait until polling has finished
+                        $.when.apply(window, polling).done(function () {
+                            deferred.resolve();
+                        }).fail(function () {
+                            deferred.reject();
+                        });
+                    }
+                }).fail(function () {
+                    deferred.reject();
+                });
+            }).promise();
         };
-
-        // issue the request to update the referencing components
-        var updated = $.ajax({
-            type: 'PUT',
-            url: controllerServiceEntity.uri + '/references',
-            data: JSON.stringify(referenceEntity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).fail(nfErrorHandler.handleAjaxError);
-
-        // Note: updated revisions will be retrieved after updateReferencingSchedulableComponents is invoked
-
-        // wait unil the polling of each service finished
-        return $.Deferred(function (deferred) {
-            updated.done(function (response) {
-                // update the controller service
-                controllerServiceEntity.component.referencingComponents = response.controllerServiceReferencingComponents;
-
-                // if we're just starting schedulable components we're done when the update is finished
-                if (running) {
-                    deferred.resolve();
-                } else {
+    
+        /**
+         * Polls the specified services referencing components to see if the
+         * specified condition is satisfied.
+         *
+         * @param {object} controllerServiceEntity
+         * @param {function} completeCondition
+         * @param {function} bulletinDeferred
+         * @param {function} pollCondition
+         */
+        var pollService = function (controllerServiceEntity, completeCondition, bulletinDeferred, pollCondition) {
+            var controllerService = controllerServiceEntity.component;
+    
+            // we want to keep polling until the condition is met
+            return $.Deferred(function (deferred) {
+                var current = 2;
+                var getTimeout = function () {
+                    var val = current;
+    
+                    // update the current timeout for the next time
+                    current = Math.min(current * 2, 4);
+    
+                    return val * 1000;
+                };
+    
+                // polls for the current status of the referencing components
+                var poll = function () {
+                    var bulletins = bulletinDeferred(controllerService);
+                    var service = $.ajax({
+                        type: 'GET',
+                        url: controllerServiceEntity.uri,
+                        dataType: 'json'
+                    });
+    
+                    $.when(bulletins, service).done(function (bulletinResult, serviceResult) {
+                        var bulletinResponse = bulletinResult[0];
+                        var serviceResponse = serviceResult[0];
+                        conditionMet(serviceResponse.component, bulletinResponse.bulletinBoard.bulletins);
+                    }).fail(function (xhr, status, error) {
+                        deferred.reject();
+                      nfErrorHandler.handleAjaxError(xhr, status, error);
+                    });
+                };
+    
+                // tests to if the condition has been met
+                var conditionMet = function (service, bulletins) {
+                    if (completeCondition(service, bulletins)) {
+                        deferred.resolve();
+                    } else {
+                        if (typeof pollCondition === 'function' && pollCondition()) {
+                            setTimeout(poll, getTimeout());
+                        } else {
+                            deferred.reject();
+                        }
+                    }
+                };
+    
+                // poll for the status of the referencing components
+                bulletinDeferred(controllerService).done(function (response) {
+                    conditionMet(controllerService, response.bulletinBoard.bulletins);
+                }).fail(function (xhr, status, error) {
+                    deferred.reject();
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+                });
+            }).promise();
+        };
+    
+        /**
+         * Continues to poll the specified controller service until all referencing schedulable
+         * components are stopped (not scheduled and 0 active threads).
+         *
+         * @param {object} controllerService
+         * @param {function} pollCondition
+         */
+        var stopReferencingSchedulableComponents = function (controllerService, pollCondition) {
+            // continue to poll the service until all schedulable components have stopped
+            return pollService(controllerService, function (service, bulletins) {
+                var referencingComponents = service.referencingComponents;
+    
+                var stillRunning = false;
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'Processor' || referencingComponent.referenceType === 'ReportingTask') {
+                        if (referencingComponent.state === 'RUNNING' || referencingComponent.activeThreadCount > 0) {
+                            stillRunning = true;
+                        }
+    
+                        // update the current active thread count
+                        $('div.' + referencingComponent.id + '-active-threads').text(referencingComponent.activeThreadCount);
+    
+                        // update the current state of this component
+                        var referencingComponentState = $('div.' + referencingComponent.id + '-state');
+                        updateReferencingSchedulableComponentState(referencingComponentState, referencingComponent);
+                    }
+                });
+    
+                // query for the bulletins
+                updateReferencingComponentBulletins(bulletins);
+    
+                // condition is met once all referencing are not running
+                return stillRunning === false;
+            }, function (service) {
+                var referencingSchedulableComponents = [];
+    
+                var referencingComponents = service.referencingComponents;
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'Processor' || referencingComponent.referenceType === 'ReportingTask') {
+                        referencingSchedulableComponents.push(referencingComponent.id);
+                    }
+                });
+    
+                return queryBulletins(referencingSchedulableComponents);
+            }, pollCondition);
+        };
+    
+        /**
+         * Continues to poll until all referencing services are enabled.
+         *
+         * @param {object} controllerService
+         * @param {function} pollCondition
+         */
+        var enableReferencingServices = function (controllerService, pollCondition) {
+            // continue to poll the service until all referencing services are enabled
+            return pollService(controllerService, function (service, bulletins) {
+                var referencingComponents = service.referencingComponents;
+    
+                var notEnabled = false;
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'ControllerService') {
+                        if (referencingComponent.state !== 'ENABLING' && referencingComponent.state !== 'ENABLED') {
+                            notEnabled = true;
+                        }
+    
+                        // update the state of the referencing service
+                        var referencingServiceState = $('div.' + referencingComponent.id + '-state');
+                        updateReferencingServiceState(referencingServiceState, referencingComponent);
+                    }
+                });
+    
+                // query for the bulletins
+                updateReferencingComponentBulletins(bulletins);
+    
+                // condition is met once all referencing are not disabled
+                return notEnabled === false;
+            }, function (service) {
+                var referencingSchedulableComponents = [];
+    
+                var referencingComponents = service.referencingComponents;
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'ControllerService') {
+                        referencingSchedulableComponents.push(referencingComponent.id);
+                    }
+                });
+    
+                return queryBulletins(referencingSchedulableComponents);
+            }, pollCondition);
+        };
+    
+        /**
+         * Continues to poll until all referencing services are disabled.
+         *
+         * @param {object} controllerService
+         * @param {function} pollCondition
+         */
+        var disableReferencingServices = function (controllerService, pollCondition) {
+            // continue to poll the service until all referencing services are disabled
+            return pollService(controllerService, function (service, bulletins) {
+                var referencingComponents = service.referencingComponents;
+    
+                var notDisabled = false;
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'ControllerService') {
+                        if (referencingComponent.state !== 'DISABLED') {
+                            notDisabled = true;
+                        }
+    
+                        // update the state of the referencing service
+                        var referencingServiceState = $('div.' + referencingComponent.id + '-state');
+                        updateReferencingServiceState(referencingServiceState, referencingComponent);
+                    }
+                });
+    
+                // query for the bulletins
+                updateReferencingComponentBulletins(bulletins);
+    
+                // condition is met once all referencing are not enabled
+                return notDisabled === false;
+            }, function (service) {
+                var referencingSchedulableComponents = [];
+    
+                var referencingComponents = service.referencingComponents;
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'ControllerService') {
+                        referencingSchedulableComponents.push(referencingComponent.id);
+                    }
+                });
+    
+                return queryBulletins(referencingSchedulableComponents);
+            }, pollCondition);
+        };
+    
+        /**
+         * Updates the referencing services with the specified state.
+         *
+         * @param {jQuery} serviceTable
+         * @param {object} controllerServiceEntity
+         * @param {boolean} enabled
+         * @param {function} pollCondition
+         */
+        var updateReferencingServices = function (serviceTable, controllerServiceEntity, enabled, pollCondition) {
+            var referencingRevisions = {};
+            getReferencingComponentRevisions(controllerServiceEntity.component.referencingComponents, referencingRevisions, true);
+    
+            // build the reference entity
+            var referenceEntity = {
+                'id': controllerServiceEntity.id,
+                'state': enabled ? 'ENABLED' : 'DISABLED',
+                'referencingComponentRevisions': referencingRevisions
+            };
+    
+            // issue the request to update the referencing components
+            var updated = $.ajax({
+                type: 'PUT',
+                url: controllerServiceEntity.uri + '/references',
+                data: JSON.stringify(referenceEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // Note: updated revisions will be retrieved after updateReferencingServices is invoked
+    
+            // wait unil the polling of each service finished
+            return $.Deferred(function (deferred) {
+                updated.done(function (response) {
+                    // update the controller service
+                    controllerServiceEntity.component.referencingComponents = response.controllerServiceReferencingComponents;
+    
                     // identify all referencing services
                     var services = getReferencingControllerServiceIds(controllerServiceEntity.component);
-
+    
                     // get the controller service grid
                     var controllerServiceGrid = serviceTable.data('gridInstance');
                     var controllerServiceData = controllerServiceGrid.getData();
-
+    
                     // start polling for each controller service
                     var polling = [];
                     services.forEach(function (controllerServiceId) {
                         var referencingService = controllerServiceData.getItemById(controllerServiceId);
-                        polling.push(stopReferencingSchedulableComponents(referencingService, pollCondition));
+    
+                        if (enabled) {
+                            polling.push(enableReferencingServices(referencingService, pollCondition));
+                        } else {
+                            polling.push(disableReferencingServices(referencingService, pollCondition));
+                        }
                     });
-
-                    // wait until polling has finished
+    
                     $.when.apply(window, polling).done(function () {
                         deferred.resolve();
                     }).fail(function () {
                         deferred.reject();
                     });
-                }
-            }).fail(function () {
-                deferred.reject();
-            });
-        }).promise();
-    };
-
-    /**
-     * Polls the specified services referencing components to see if the
-     * specified condition is satisfied.
-     *
-     * @param {object} controllerServiceEntity
-     * @param {function} completeCondition
-     * @param {function} bulletinDeferred
-     * @param {function} pollCondition
-     */
-    var pollService = function (controllerServiceEntity, completeCondition, bulletinDeferred, pollCondition) {
-        var controllerService = controllerServiceEntity.component;
-
-        // we want to keep polling until the condition is met
-        return $.Deferred(function (deferred) {
-            var current = 2;
-            var getTimeout = function () {
-                var val = current;
-
-                // update the current timeout for the next time
-                current = Math.min(current * 2, 4);
-
-                return val * 1000;
-            };
-
-            // polls for the current status of the referencing components
-            var poll = function () {
-                var bulletins = bulletinDeferred(controllerService);
-                var service = $.ajax({
-                    type: 'GET',
-                    url: controllerServiceEntity.uri,
-                    dataType: 'json'
-                });
-
-                $.when(bulletins, service).done(function (bulletinResult, serviceResult) {
-                    var bulletinResponse = bulletinResult[0];
-                    var serviceResponse = serviceResult[0];
-                    conditionMet(serviceResponse.component, bulletinResponse.bulletinBoard.bulletins);
-                }).fail(function (xhr, status, error) {
-                    deferred.reject();
-                    nfErrorHandler.handleAjaxError(xhr, status, error);
-                });
-            };
-
-            // tests to if the condition has been met
-            var conditionMet = function (service, bulletins) {
-                if (completeCondition(service, bulletins)) {
-                    deferred.resolve();
-                } else {
-                    if (typeof pollCondition === 'function' && pollCondition()) {
-                        setTimeout(poll, getTimeout());
-                    } else {
-                        deferred.reject();
-                    }
-                }
-            };
-
-            // poll for the status of the referencing components
-            bulletinDeferred(controllerService).done(function (response) {
-                conditionMet(controllerService, response.bulletinBoard.bulletins);
-            }).fail(function (xhr, status, error) {
-                deferred.reject();
-                nfErrorHandler.handleAjaxError(xhr, status, error);
-            });
-        }).promise();
-    };
-
-    /**
-     * Continues to poll the specified controller service until all referencing schedulable
-     * components are stopped (not scheduled and 0 active threads).
-     *
-     * @param {object} controllerService
-     * @param {function} pollCondition
-     */
-    var stopReferencingSchedulableComponents = function (controllerService, pollCondition) {
-        // continue to poll the service until all schedulable components have stopped
-        return pollService(controllerService, function (service, bulletins) {
-            var referencingComponents = service.referencingComponents;
-
-            var stillRunning = false;
-            $.each(referencingComponents, function (_, referencingComponentEntity) {
-                var referencingComponent = referencingComponentEntity.component;
-                if (referencingComponent.referenceType === 'Processor' || referencingComponent.referenceType === 'ReportingTask') {
-                    if (referencingComponent.state === 'RUNNING' || referencingComponent.activeThreadCount > 0) {
-                        stillRunning = true;
-                    }
-
-                    // update the current active thread count
-                    $('div.' + referencingComponent.id + '-active-threads').text(referencingComponent.activeThreadCount);
-
-                    // update the current state of this component
-                    var referencingComponentState = $('div.' + referencingComponent.id + '-state');
-                    updateReferencingSchedulableComponentState(referencingComponentState, referencingComponent);
-                }
-            });
-
-            // query for the bulletins
-            updateReferencingComponentBulletins(bulletins);
-
-            // condition is met once all referencing are not running
-            return stillRunning === false;
-        }, function (service) {
-            var referencingSchedulableComponents = [];
-
-            var referencingComponents = service.referencingComponents;
-            $.each(referencingComponents, function (_, referencingComponentEntity) {
-                var referencingComponent = referencingComponentEntity.component;
-                if (referencingComponent.referenceType === 'Processor' || referencingComponent.referenceType === 'ReportingTask') {
-                    referencingSchedulableComponents.push(referencingComponent.id);
-                }
-            });
-
-            return queryBulletins(referencingSchedulableComponents);
-        }, pollCondition);
-    };
-
-    /**
-     * Continues to poll until all referencing services are enabled.
-     *
-     * @param {object} controllerService
-     * @param {function} pollCondition
-     */
-    var enableReferencingServices = function (controllerService, pollCondition) {
-        // continue to poll the service until all referencing services are enabled
-        return pollService(controllerService, function (service, bulletins) {
-            var referencingComponents = service.referencingComponents;
-
-            var notEnabled = false;
-            $.each(referencingComponents, function (_, referencingComponentEntity) {
-                var referencingComponent = referencingComponentEntity.component;
-                if (referencingComponent.referenceType === 'ControllerService') {
-                    if (referencingComponent.state !== 'ENABLING' && referencingComponent.state !== 'ENABLED') {
-                        notEnabled = true;
-                    }
-
-                    // update the state of the referencing service
-                    var referencingServiceState = $('div.' + referencingComponent.id + '-state');
-                    updateReferencingServiceState(referencingServiceState, referencingComponent);
-                }
-            });
-
-            // query for the bulletins
-            updateReferencingComponentBulletins(bulletins);
-
-            // condition is met once all referencing are not disabled
-            return notEnabled === false;
-        }, function (service) {
-            var referencingSchedulableComponents = [];
-
-            var referencingComponents = service.referencingComponents;
-            $.each(referencingComponents, function (_, referencingComponentEntity) {
-                var referencingComponent = referencingComponentEntity.component;
-                if (referencingComponent.referenceType === 'ControllerService') {
-                    referencingSchedulableComponents.push(referencingComponent.id);
-                }
-            });
-
-            return queryBulletins(referencingSchedulableComponents);
-        }, pollCondition);
-    };
-
-    /**
-     * Continues to poll until all referencing services are disabled.
-     *
-     * @param {object} controllerService
-     * @param {function} pollCondition
-     */
-    var disableReferencingServices = function (controllerService, pollCondition) {
-        // continue to poll the service until all referencing services are disabled
-        return pollService(controllerService, function (service, bulletins) {
-            var referencingComponents = service.referencingComponents;
-
-            var notDisabled = false;
-            $.each(referencingComponents, function (_, referencingComponentEntity) {
-                var referencingComponent = referencingComponentEntity.component;
-                if (referencingComponent.referenceType === 'ControllerService') {
-                    if (referencingComponent.state !== 'DISABLED') {
-                        notDisabled = true;
-                    }
-
-                    // update the state of the referencing service
-                    var referencingServiceState = $('div.' + referencingComponent.id + '-state');
-                    updateReferencingServiceState(referencingServiceState, referencingComponent);
-                }
-            });
-
-            // query for the bulletins
-            updateReferencingComponentBulletins(bulletins);
-
-            // condition is met once all referencing are not enabled
-            return notDisabled === false;
-        }, function (service) {
-            var referencingSchedulableComponents = [];
-
-            var referencingComponents = service.referencingComponents;
-            $.each(referencingComponents, function (_, referencingComponentEntity) {
-                var referencingComponent = referencingComponentEntity.component;
-                if (referencingComponent.referenceType === 'ControllerService') {
-                    referencingSchedulableComponents.push(referencingComponent.id);
-                }
-            });
-
-            return queryBulletins(referencingSchedulableComponents);
-        }, pollCondition);
-    };
-
-    /**
-     * Updates the referencing services with the specified state.
-     *
-     * @param {jQuery} serviceTable
-     * @param {object} controllerServiceEntity
-     * @param {boolean} enabled
-     * @param {function} pollCondition
-     */
-    var updateReferencingServices = function (serviceTable, controllerServiceEntity, enabled, pollCondition) {
-        var referencingRevisions = {};
-        getReferencingComponentRevisions(controllerServiceEntity.component.referencingComponents, referencingRevisions, true);
-
-        // build the reference entity
-        var referenceEntity = {
-            'id': controllerServiceEntity.id,
-            'state': enabled ? 'ENABLED' : 'DISABLED',
-            'referencingComponentRevisions': referencingRevisions
-        };
-
-        // issue the request to update the referencing components
-        var updated = $.ajax({
-            type: 'PUT',
-            url: controllerServiceEntity.uri + '/references',
-            data: JSON.stringify(referenceEntity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).fail(nfErrorHandler.handleAjaxError);
-
-        // Note: updated revisions will be retrieved after updateReferencingServices is invoked
-
-        // wait unil the polling of each service finished
-        return $.Deferred(function (deferred) {
-            updated.done(function (response) {
-                // update the controller service
-                controllerServiceEntity.component.referencingComponents = response.controllerServiceReferencingComponents;
-
-                // identify all referencing services
-                var services = getReferencingControllerServiceIds(controllerServiceEntity.component);
-
-                // get the controller service grid
-                var controllerServiceGrid = serviceTable.data('gridInstance');
-                var controllerServiceData = controllerServiceGrid.getData();
-
-                // start polling for each controller service
-                var polling = [];
-                services.forEach(function (controllerServiceId) {
-                    var referencingService = controllerServiceData.getItemById(controllerServiceId);
-
-                    if (enabled) {
-                        polling.push(enableReferencingServices(referencingService, pollCondition));
-                    } else {
-                        polling.push(disableReferencingServices(referencingService, pollCondition));
-                    }
-                });
-
-                $.when.apply(window, polling).done(function () {
-                    deferred.resolve();
                 }).fail(function () {
                     deferred.reject();
                 });
-            }).fail(function () {
-                deferred.reject();
-            });
-        }).promise();
-    };
-
-    /**
-     * Shows the dialog for disabling a controller service.
-     *
-     * @argument {object} controllerService The controller service to disable
-     */
-    var showDisableControllerServiceDialog = function (serviceTable, controllerService) {
-        // populate the disable controller service dialog
-        $('#disable-controller-service-id').text(controllerService.id);
-        $('#disable-controller-service-name').text(controllerService.name);
-
-        // load the controller referencing components list
-        var referencingComponentsContainer = $('#disable-controller-service-referencing-components');
-        createReferencingComponents(serviceTable, referencingComponentsContainer, controllerService.referencingComponents);
-
-        // build the button model
-        var buttons = [{
-            buttonText: 'Disable',
-            color: {
-                base: '#728E9B',
-                hover: '#004849',
-                text: '#ffffff'
-            },
-            handler: {
-                click: function () {
-                    disableHandler(serviceTable);
-                }
-            }
-        }, {
-            buttonText: 'Cancel',
-            color: {
-                base: '#E3E8EB',
-                hover: '#C7D2D7',
-                text: '#004849'
-            },
-            handler: {
-                click: closeModal
-            }
-        }];
-
-        // show the dialog
-        $('#disable-controller-service-dialog').modal('setButtonModel', buttons).modal('show');
-
-        // load the bulletins
-        queryBulletins([controllerService.id]).done(function (response) {
-            updateBulletins(response.bulletinBoard.bulletins, $('#disable-controller-service-bulletins'));
-        });
-
-        // update the border if necessary
-        updateReferencingComponentsBorder(referencingComponentsContainer);
-    };
-
-    /**
-     * Shows the dialog for enabling a controller service.
-     *
-     * @param {object} serviceTable
-     * @param {object} controllerService
-     */
-    var showEnableControllerServiceDialog = function (serviceTable, controllerService) {
-        // populate the disable controller service dialog
-        $('#enable-controller-service-id').text(controllerService.id);
-        $('#enable-controller-service-name').text(controllerService.name);
-
-        // load the controller referencing components list
-        var referencingComponentsContainer = $('#enable-controller-service-referencing-components');
-        createReferencingComponents(serviceTable, referencingComponentsContainer, controllerService.referencingComponents);
-
-        // build the button model
-        var buttons = [{
-            buttonText: 'Enable',
-            color: {
-                base: '#728E9B',
-                hover: '#004849',
-                text: '#ffffff'
-            },
-            handler: {
-                click: function () {
-                    enableHandler(serviceTable);
-                }
-            }
-        }, {
-            buttonText: 'Cancel',
-            color: {
-                base: '#E3E8EB',
-                hover: '#C7D2D7',
-                text: '#004849'
-            },
-            handler: {
-                click: closeModal
-            }
-        }];
-
-        // show the dialog
-        $('#enable-controller-service-dialog').modal('setButtonModel', buttons).modal('show');
-
-        // load the bulletins
-        queryBulletins([controllerService.id]).done(function (response) {
-            updateBulletins(response.bulletinBoard.bulletins, $('#enable-controller-service-bulletins'));
-        });
-
-        // update the border if necessary
-        updateReferencingComponentsBorder(referencingComponentsContainer);
-    };
-
-    /**
-     * Used to handle closing a modal dialog
-     */
-    var closeModal = function () {
-        $(this).modal('hide');
-    };
-
-    /**
-     * Handles the disable action of the disable controller service dialog.
-     *
-     * @param {jQuery} serviceTable
-     */
-    var disableHandler = function (serviceTable) {
-        var disableDialog = $('#disable-controller-service-dialog');
-        var canceled = false;
-
-        // only provide a cancel option
-        disableDialog.modal('setButtonModel', [{
-            buttonText: 'Cancel',
-            color: {
-                base: '#E3E8EB',
-                hover: '#C7D2D7',
-                text: '#004849'
-            },
-            handler: {
-                click: function () {
-                    canceled = true;
-                    disableDialog.modal('setButtonModel', []);
-                    $('#disable-controller-service-dialog div.controller-service-canceling').show();
-                }
-            }
-        }]);
-
-        // show the progress
-        $('#disable-controller-service-scope-container').hide();
-        $('#disable-controller-service-progress-container').show();
-
-        // get the controller service
-        var controllerServiceId = $('#disable-controller-service-id').text();
-        var controllerServiceGrid = serviceTable.data('gridInstance');
-        var controllerServiceData = controllerServiceGrid.getData();
-        var controllerServiceEntity = controllerServiceData.getItemById(controllerServiceId);
-        var controllerService = controllerServiceEntity.component;
-
-        // whether or not to continue polling
-        var continuePolling = function () {
-            return canceled === false;
+            }).promise();
         };
-
-        // sets the close button on the dialog
-        var setCloseButton = function () {
-            $('#disable-controller-service-dialog div.controller-service-canceling').hide();
-            disableDialog.modal('setButtonModel', [{
-                buttonText: 'Close',
+    
+        /**
+         * Shows the dialog for disabling a controller service.
+         *
+         * @argument {object} controllerService The controller service to disable
+         */
+        var showDisableControllerServiceDialog = function (serviceTable, controllerService) {
+            // populate the disable controller service dialog
+            $('#disable-controller-service-id').text(controllerService.id);
+            $('#disable-controller-service-name').text(controllerService.name);
+    
+            // load the controller referencing components list
+            var referencingComponentsContainer = $('#disable-controller-service-referencing-components');
+            createReferencingComponents(serviceTable, referencingComponentsContainer, controllerService.referencingComponents);
+    
+            // build the button model
+            var buttons = [{
+              buttonText: nf._.msg('nf-controller-service.Disable'),
                 color: {
                     base: '#728E9B',
                     hover: '#004849',
                     text: '#ffffff'
                 },
+                handler: {
+                    click: function () {
+                        disableHandler(serviceTable);
+                    }
+                }
+            }, {
+              buttonText: nf._.msg('nf-controller-service.Cancel'),
+                color: {
+                    base: '#E3E8EB',
+                    hover: '#C7D2D7',
+                    text: '#004849'
+                },
                 handler: {
                     click: closeModal
                 }
-            }]);
-        };
-
-        // ensure we have access to all referencing components before attempting the sequence
-        if (hasUnauthorizedReferencingComponent(controllerService.referencingComponents)) {
-            setCloseButton();
-
-            nfDialog.showOkDialog({
-                headerText: 'Controller Service',
-                dialogContent: 'Unable to disable due to unauthorized referencing components.'
-            });
-            return;
-        }
-
-        $('#disable-progress-label').text('Steps to disable ' + controllerService.name);
-        var disableReferencingSchedulable = $('#disable-referencing-schedulable').addClass('ajax-loading');
-
-        $.Deferred(function (deferred) {
-            // stop all referencing schedulable components
-            var stopped = updateReferencingSchedulableComponents(serviceTable, controllerServiceEntity, false, continuePolling);
-
-            // once everything has stopped
-            stopped.done(function () {
-                disableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-complete');
-                var disableReferencingServices = $('#disable-referencing-services').addClass('ajax-loading');
-
-                // disable all referencing services
-                var disabled = updateReferencingServices(serviceTable, controllerServiceEntity, false, continuePolling);
-
-                // everything is disabled
-                disabled.done(function () {
-                    disableReferencingServices.removeClass('ajax-loading').addClass('ajax-complete');
-                    var disableControllerService = $('#disable-controller-service').addClass('ajax-loading');
-
-                    // disable this service
-                    setEnabled(serviceTable, controllerServiceEntity, false, continuePolling).done(function () {
-                        deferred.resolve();
-                        disableControllerService.removeClass('ajax-loading').addClass('ajax-complete');
-                    }).fail(function () {
-                        deferred.reject();
-                        disableControllerService.removeClass('ajax-loading').addClass('ajax-error');
-                    });
-                }).fail(function () {
-                    deferred.reject();
-                    disableReferencingServices.removeClass('ajax-loading').addClass('ajax-error');
-                });
-            }).fail(function () {
-                deferred.reject();
-                disableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-error');
+            }];
+    
+            // show the dialog
+            $('#disable-controller-service-dialog').modal('setButtonModel', buttons).modal('show');
+    
+            // load the bulletins
+            queryBulletins([controllerService.id]).done(function (response) {
+                updateBulletins(response.bulletinBoard.bulletins, $('#disable-controller-service-bulletins'));
             });
-        }).always(function () {
-            reloadControllerServiceAndReferencingComponents(serviceTable, controllerService);
-            setCloseButton();
-
-            // inform the user if the action was canceled
-            if (canceled === true && $('#nf-ok-dialog').not(':visible')) {
-                nfDialog.showOkDialog({
-                    headerText: 'Controller Service',
-                    dialogContent: 'The request to disable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.'
-                });
-            }
-        });
-    };
-
-    /**
-     * Determines if any of the specified referencing components are not authorized.
-     *
-     * @param referencingComponents referencing components
-     * @returns {boolean}
-     */
-    var hasUnauthorizedReferencingComponent = function (referencingComponents) {
-        var hasUnauthorized = false;
-
-        $.each(referencingComponents, function (_, referencingComponentEntity) {
-            if (referencingComponentEntity.permissions.canRead === false || referencingComponentEntity.permissions.canWrite === false) {
-                hasUnauthorized = true;
-                return false;
-            }
-
-            var referencingComponent = referencingComponentEntity.component;
-            if (hasUnauthorizedReferencingComponent(referencingComponent.referencingComponents)) {
-                hasUnauthorized = true;
-                return false;
-            }
-        });
-
-        return hasUnauthorized;
-    };
-
-    /**
-     * Handles the enable action of the enable controller service dialog.
-     *
-     * @param {jQuery} serviceTable
-     */
-    var enableHandler = function (serviceTable) {
-        var enableDialog = $('#enable-controller-service-dialog');
-        var canceled = false;
-
-        // get the controller service
-        var controllerServiceId = $('#enable-controller-service-id').text();
-        var controllerServiceGrid = serviceTable.data('gridInstance');
-        var controllerServiceData = controllerServiceGrid.getData();
-        var controllerServiceEntity = controllerServiceData.getItemById(controllerServiceId);
-        var controllerService = controllerServiceEntity.component;
-
-        // determine if we want to also activate referencing components
-        var scope = $('#enable-controller-service-scope').combo('getSelectedOption').value;
-
-        // update visibility
-        if (scope === config.serviceOnly) {
-            $('#enable-controller-service-progress li.referencing-component').hide();
-        }
-
-        // only provide a cancel option
-        enableDialog.modal('setButtonModel', [{
-            buttonText: 'Cancel',
-            color: {
-                base: '#E3E8EB',
-                hover: '#C7D2D7',
-                text: '#004849'
-            },
-            handler: {
-                click: function () {
-                    canceled = true;
-                    enableDialog.modal('setButtonModel', []);
-                    $('#enable-controller-service-dialog div.controller-service-canceling').show();
-                }
-            }
-        }]);
-
-        // show the progress
-        $('#enable-controller-service-scope-container').hide();
-        $('#enable-controller-service-progress-container').show();
-
-
-        // whether or not to continue polling
-        var continuePolling = function () {
-            return canceled === false;
+    
+            // update the border if necessary
+            updateReferencingComponentsBorder(referencingComponentsContainer);
         };
-
-        // sets the button to close
-        var setCloseButton = function () {
-            $('#enable-controller-service-dialog div.controller-service-canceling').hide();
-            enableDialog.modal('setButtonModel', [{
-                buttonText: 'Close',
+    
+        /**
+         * Shows the dialog for enabling a controller service.
+         *
+         * @param {object} serviceTable
+         * @param {object} controllerService
+         */
+        var showEnableControllerServiceDialog = function (serviceTable, controllerService) {
+            // populate the disable controller service dialog
+            $('#enable-controller-service-id').text(controllerService.id);
+            $('#enable-controller-service-name').text(controllerService.name);
+    
+            // load the controller referencing components list
+            var referencingComponentsContainer = $('#enable-controller-service-referencing-components');
+            createReferencingComponents(serviceTable, referencingComponentsContainer, controllerService.referencingComponents);
+    
+            // build the button model
+            var buttons = [{
+              buttonText: nf._.msg('nf-controller-service.Enable'),
                 color: {
                     base: '#728E9B',
                     hover: '#004849',
                     text: '#ffffff'
                 },
+                handler: {
+                    click: function () {
+                        enableHandler(serviceTable);
+                    }
+                }
+            }, {
+              buttonText: nf._.msg('nf-controller-service.Cancel'),
+                color: {
+                    base: '#E3E8EB',
+                    hover: '#C7D2D7',
+                    text: '#004849'
+                },
                 handler: {
                     click: closeModal
                 }
-            }]);
-        };
-
-        // ensure appropriate access
-        if (scope === config.serviceAndReferencingComponents && hasUnauthorizedReferencingComponent(controllerService.referencingComponents)) {
-            setCloseButton();
-
-            nfDialog.showOkDialog({
-                headerText: 'Controller Service',
-                dialogContent: 'Unable to enable due to unauthorized referencing components.'
+            }];
+    
+            // show the dialog
+            $('#enable-controller-service-dialog').modal('setButtonModel', buttons).modal('show');
+    
+            // load the bulletins
+            queryBulletins([controllerService.id]).done(function (response) {
+                updateBulletins(response.bulletinBoard.bulletins, $('#enable-controller-service-bulletins'));
             });
-            return;
-        }
-
-        $('#enable-progress-label').text('Steps to enable ' + controllerService.name);
-        var enableControllerService = $('#enable-controller-service').addClass('ajax-loading');
-
-        $.Deferred(function (deferred) {
-            // enable this controller service
-            var enable = setEnabled(serviceTable, controllerServiceEntity, true, continuePolling);
-
-            if (scope === config.serviceAndReferencingComponents) {
-                // once the service is enabled, activate all referencing components
-                enable.done(function () {
-                    enableControllerService.removeClass('ajax-loading').addClass('ajax-complete');
-                    var enableReferencingServices = $('#enable-referencing-services').addClass('ajax-loading');
-
-                    // enable the referencing services
-                    var servicesEnabled = updateReferencingServices(serviceTable, controllerServiceEntity, true, continuePolling);
-
-                    // once all the referencing services are enbled
-                    servicesEnabled.done(function () {
-                        enableReferencingServices.removeClass('ajax-loading').addClass('ajax-complete');
-                        var enableReferencingSchedulable = $('#enable-referencing-schedulable').addClass('ajax-loading');
-
-                        // start all referencing schedulable components
-                        updateReferencingSchedulableComponents(serviceTable, controllerServiceEntity, true, continuePolling).done(function () {
+    
+            // update the border if necessary
+            updateReferencingComponentsBorder(referencingComponentsContainer);
+        };
+    
+        /**
+         * Used to handle closing a modal dialog
+         */
+        var closeModal = function () {
+            $(this).modal('hide');
+        };
+    
+        /**
+         * Handles the disable action of the disable controller service dialog.
+         *
+         * @param {jQuery} serviceTable
+         */
+        var disableHandler = function (serviceTable) {
+            var disableDialog = $('#disable-controller-service-dialog');
+            var canceled = false;
+    
+            // only provide a cancel option
+            disableDialog.modal('setButtonModel', [{
+              buttonText: nf._.msg('nf-controller-service.Cancel'),
+                color: {
+                    base: '#E3E8EB',
+                    hover: '#C7D2D7',
+                    text: '#004849'
+                },
+                handler: {
+                    click: function () {
+                        canceled = true;
+                        disableDialog.modal('setButtonModel', []);
+                        $('#disable-controller-service-dialog div.controller-service-canceling').show();
+                    }
+                }
+            }]);
+    
+            // show the progress
+            $('#disable-controller-service-scope-container').hide();
+            $('#disable-controller-service-progress-container').show();
+    
+            // get the controller service
+            var controllerServiceId = $('#disable-controller-service-id').text();
+            var controllerServiceGrid = serviceTable.data('gridInstance');
+            var controllerServiceData = controllerServiceGrid.getData();
+            var controllerServiceEntity = controllerServiceData.getItemById(controllerServiceId);
+            var controllerService = controllerServiceEntity.component;
+    
+            // whether or not to continue polling
+            var continuePolling = function () {
+                return canceled === false;
+            };
+    
+            // sets the close button on the dialog
+            var setCloseButton = function () {
+                $('#disable-controller-service-dialog div.controller-service-canceling').hide();
+                disableDialog.modal('setButtonModel', [{
+                  buttonText: nf._.msg('nf-controller-service.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: closeModal
+                    }
+                }]);
+            };
+    
+            // ensure we have access to all referencing components before attempting the sequence
+            if (hasUnauthorizedReferencingComponent(controllerService.referencingComponents)) {
+                setCloseButton();
+    
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-controller-service.ControllerService'),
+                  dialogContent: nf._.msg('nf-controller-service.Message14')
+                });
+                return;
+            }
+    
+            $('#disable-progress-label').text('Steps to disable ' + controllerService.name);
+            var disableReferencingSchedulable = $('#disable-referencing-schedulable').addClass('ajax-loading');
+    
+            $.Deferred(function (deferred) {
+                // stop all referencing schedulable components
+                var stopped = updateReferencingSchedulableComponents(serviceTable, controllerServiceEntity, false, continuePolling);
+    
+                // once everything has stopped
+                stopped.done(function () {
+                    disableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-complete');
+                    var disableReferencingServices = $('#disable-referencing-services').addClass('ajax-loading');
+    
+                    // disable all referencing services
+                    var disabled = updateReferencingServices(serviceTable, controllerServiceEntity, false, continuePolling);
+    
+                    // everything is disabled
+                    disabled.done(function () {
+                        disableReferencingServices.removeClass('ajax-loading').addClass('ajax-complete');
+                        var disableControllerService = $('#disable-controller-service').addClass('ajax-loading');
+    
+                        // disable this service
+                        setEnabled(serviceTable, controllerServiceEntity, false, continuePolling).done(function () {
                             deferred.resolve();
-                            enableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-complete');
+                            disableControllerService.removeClass('ajax-loading').addClass('ajax-complete');
                         }).fail(function () {
                             deferred.reject();
-                            enableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-error');
+                            disableControllerService.removeClass('ajax-loading').addClass('ajax-error');
                         });
                     }).fail(function () {
                         deferred.reject();
-                        enableReferencingServices.removeClass('ajax-loading').addClass('ajax-error');
+                        disableReferencingServices.removeClass('ajax-loading').addClass('ajax-error');
                     });
                 }).fail(function () {
                     deferred.reject();
-                    enableControllerService.removeClass('ajax-loading').addClass('ajax-error');
-                });
-            } else {
-                enable.done(function () {
-                    deferred.resolve();
-                    enableControllerService.removeClass('ajax-loading').addClass('ajax-complete');
-                }).fail(function () {
-                    deferred.reject();
-                    enableControllerService.removeClass('ajax-loading').addClass('ajax-error');
+                    disableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-error');
                 });
+            }).always(function () {
+                reloadControllerServiceAndReferencingComponents(serviceTable, controllerService);
+                setCloseButton();
+    
+                // inform the user if the action was canceled
+                if (canceled === true && $('#nf-ok-dialog').not(':visible')) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-controller-service.ControllerService'),
+                      dialogContent: nf._.msg('nf-controller-service.Message5')
+                    });
+                }
+            });
+        };
+    
+        /**
+         * Determines if any of the specified referencing components are not authorized.
+         *
+         * @param referencingComponents referencing components
+         * @returns {boolean}
+         */
+        var hasUnauthorizedReferencingComponent = function (referencingComponents) {
+            var hasUnauthorized = false;
+    
+            $.each(referencingComponents, function (_, referencingComponentEntity) {
+                if (referencingComponentEntity.permissions.canRead === false || referencingComponentEntity.permissions.canWrite === false) {
+                    hasUnauthorized = true;
+                    return false;
+                }
+    
+                var referencingComponent = referencingComponentEntity.component;
+                if (hasUnauthorizedReferencingComponent(referencingComponent.referencingComponents)) {
+                    hasUnauthorized = true;
+                    return false;
+                }
+            });
+    
+            return hasUnauthorized;
+        };
+    
+        /**
+         * Handles the enable action of the enable controller service dialog.
+         *
+         * @param {jQuery} serviceTable
+         */
+        var enableHandler = function (serviceTable) {
+            var enableDialog = $('#enable-controller-service-dialog');
+            var canceled = false;
+    
+            // get the controller service
+            var controllerServiceId = $('#enable-controller-service-id').text();
+            var controllerServiceGrid = serviceTable.data('gridInstance');
+            var controllerServiceData = controllerServiceGrid.getData();
+            var controllerServiceEntity = controllerServiceData.getItemById(controllerServiceId);
+            var controllerService = controllerServiceEntity.component;
+    
+            // determine if we want to also activate referencing components
+            var scope = $('#enable-controller-service-scope').combo('getSelectedOption').value;
+    
+            // update visibility
+            if (scope === config.serviceOnly) {
+                $('#enable-controller-service-progress li.referencing-component').hide();
             }
-        }).always(function () {
-            reloadControllerServiceAndReferencingComponents(serviceTable, controllerService);
-            setCloseButton();
-
-            // inform the user if the action was canceled
-            if (canceled === true && $('#nf-ok-dialog').not(':visible')) {
-                nfDialog.showOkDialog({
-                    headerText: 'Controller Service',
-                    dialogContent: 'The request to enable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.'
+    
+            // only provide a cancel option
+            enableDialog.modal('setButtonModel', [{
+              buttonText: nf._.msg('nf-controller-service.Cancel'),
+                color: {
+                    base: '#E3E8EB',
+                    hover: '#C7D2D7',
+                    text: '#004849'
+                },
+                handler: {
+                    click: function () {
+                        canceled = true;
+                        enableDialog.modal('setButtonModel', []);
+                        $('#enable-controller-service-dialog div.controller-service-canceling').show();
+                    }
+                }
+            }]);
+    
+            // show the progress
+            $('#enable-controller-service-scope-container').hide();
+            $('#enable-controller-service-progress-container').show();
+    
+    
+            // whether or not to continue polling
+            var continuePolling = function () {
+                return canceled === false;
+            };
+    
+            // sets the button to close
+            var setCloseButton = function () {
+                $('#enable-controller-service-dialog div.controller-service-canceling').hide();
+                enableDialog.modal('setButtonModel', [{
+                  buttonText: nf._.msg('nf-controller-service.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: closeModal
+                    }
+                }]);
+            };
+    
+            // ensure appropriate access
+            if (scope === config.serviceAndReferencingComponents && hasUnauthorizedReferencingComponent(controllerService.referencingComponents)) {
+                setCloseButton();
+    
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-controller-service.ControllerService'),
+                  dialogContent: nf._.msg('nf-controller-service.Message15')
                 });
+                return;
             }
-        });
-    };
-
-    /**
-     * Gets a property descriptor for the controller service currently being configured.
-     *
-     * @param {type} propertyName
-     */
-    var getControllerServicePropertyDescriptor = function (propertyName) {
-        var controllerServiceEntity = $('#controller-service-configuration').data('controllerServiceDetails');
-        return $.ajax({
-            type: 'GET',
-            url: controllerServiceEntity.uri + '/descriptors',
-            data: {
-                propertyName: propertyName
-            },
-            dataType: 'json'
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Goes to a service configuration from the property table.
-     *
-     * @param {jQuery} serviceTable
-     */
-    var goToServiceFromProperty = function (serviceTable) {
-        return $.Deferred(function (deferred) {
-            // close all fields currently being edited
-            $('#controller-service-properties').propertytable('saveRow');
-
-            // determine if changes have been made
-            if (isSaveRequired()) {
-                // see if those changes should be saved
-                nfDialog.showYesNoDialog({
-                    headerText: 'Save',
-                    dialogContent: 'Save changes before going to this Controller Service?',
-                    noHandler: function () {
-                        deferred.resolve();
-                    },
-                    yesHandler: function () {
-                        var controllerServiceEntity = $('#controller-service-configuration').data('controllerServiceDetails');
-                        saveControllerService(serviceTable, controllerServiceEntity).done(function () {
-                            deferred.resolve();
+    
+            $('#enable-progress-label').text('Steps to enable ' + controllerService.name);
+            var enableControllerService = $('#enable-controller-service').addClass('ajax-loading');
+    
+            $.Deferred(function (deferred) {
+                // enable this controller service
+                var enable = setEnabled(serviceTable, controllerServiceEntity, true, continuePolling);
+    
+                if (scope === config.serviceAndReferencingComponents) {
+                    // once the service is enabled, activate all referencing components
+                    enable.done(function () {
+                        enableControllerService.removeClass('ajax-loading').addClass('ajax-complete');
+                        var enableReferencingServices = $('#enable-referencing-services').addClass('ajax-loading');
+    
+                        // enable the referencing services
+                        var servicesEnabled = updateReferencingServices(serviceTable, controllerServiceEntity, true, continuePolling);
+    
+                        // once all the referencing services are enbled
+                        servicesEnabled.done(function () {
+                            enableReferencingServices.removeClass('ajax-loading').addClass('ajax-complete');
+                            var enableReferencingSchedulable = $('#enable-referencing-schedulable').addClass('ajax-loading');
+    
+                            // start all referencing schedulable components
+                            updateReferencingSchedulableComponents(serviceTable, controllerServiceEntity, true, continuePolling).done(function () {
+                                deferred.resolve();
+                                enableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-complete');
+                            }).fail(function () {
+                                deferred.reject();
+                                enableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-error');
+                            });
                         }).fail(function () {
                             deferred.reject();
+                            enableReferencingServices.removeClass('ajax-loading').addClass('ajax-error');
                         });
-                    }
-                });
-            } else {
-                deferred.resolve();
-            }
-        }).promise();
-    };
-
-    var saveControllerService = function (serviceTable, controllerServiceEntity) {
-        // marshal the settings and properties and update the controller service
-        var updatedControllerService = marshalDetails();
-
-        // ensure details are valid as far as we can tell
-        if (validateDetails(updatedControllerService)) {
-            updatedControllerService['revision'] = nfClient.getRevision(controllerServiceEntity);
-
-            var previouslyReferencedServiceIds = [];
-            $.each(identifyReferencedServiceDescriptors(controllerServiceEntity.component), function (_, descriptor) {
-                var modifyingService = !nfCommon.isUndefined(updatedControllerService.component.properties) && !nfCommon.isUndefined(updatedControllerService.component.properties[descriptor.name]);
-                var isCurrentlyConfigured = nfCommon.isDefinedAndNotNull(controllerServiceEntity.component.properties[descriptor.name]);
-
-                // if we are attempting to update a controller service reference
-                if (modifyingService && isCurrentlyConfigured) {
-
-                    // record the current value if set
-                    previouslyReferencedServiceIds.push(controllerServiceEntity.component.properties[descriptor.name]);
+                    }).fail(function () {
+                        deferred.reject();
+                        enableControllerService.removeClass('ajax-loading').addClass('ajax-error');
+                    });
+                } else {
+                    enable.done(function () {
+                        deferred.resolve();
+                        enableControllerService.removeClass('ajax-loading').addClass('ajax-complete');
+                    }).fail(function () {
+                        deferred.reject();
+                        enableControllerService.removeClass('ajax-loading').addClass('ajax-error');
+                    });
+                }
+            }).always(function () {
+                reloadControllerServiceAndReferencingComponents(serviceTable, controllerService);
+                setCloseButton();
+    
+                // inform the user if the action was canceled
+                if (canceled === true && $('#nf-ok-dialog').not(':visible')) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-controller-service.ControllerService'),
+                      dialogContent: nf._.msg('nf-controller-service.Message2')
+                    });
                 }
             });
-
-            // update the selected component
+        };
+    
+        /**
+         * Gets a property descriptor for the controller service currently being configured.
+         *
+         * @param {type} propertyName
+         */
+        var getControllerServicePropertyDescriptor = function (propertyName) {
+            var controllerServiceEntity = $('#controller-service-configuration').data('controllerServiceDetails');
             return $.ajax({
-                type: 'PUT',
-                data: JSON.stringify(updatedControllerService),
-                url: controllerServiceEntity.uri,
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // reload the controller service
-                renderControllerService(serviceTable, response);
-
-                // reload all previously referenced controller services
-                $.each(previouslyReferencedServiceIds, function (_, oldServiceReferenceId) {
-                    reloadControllerService(serviceTable, oldServiceReferenceId);
-                });
-            }).fail(handleControllerServiceConfigurationError);
-        } else {
+                type: 'GET',
+                url: controllerServiceEntity.uri + '/descriptors',
+                data: {
+                    propertyName: propertyName
+                },
+                dataType: 'json'
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Goes to a service configuration from the property table.
+         *
+         * @param {jQuery} serviceTable
+         */
+        var goToServiceFromProperty = function (serviceTable) {
             return $.Deferred(function (deferred) {
-                deferred.reject();
+                // close all fields currently being edited
+                $('#controller-service-properties').propertytable('saveRow');
+    
+                // determine if changes have been made
+                if (isSaveRequired()) {
+                    // see if those changes should be saved
+                  nfDialog.showYesNoDialog({
+                      headerText: nf._.msg('nf-controller-service.Save'),
+                      dialogContent: nf._.msg('nf-controller-service.Message16'),
+                        noHandler: function () {
+                            deferred.resolve();
+                        },
+                        yesHandler: function () {
+                            var controllerServiceEntity = $('#controller-service-configuration').data('controllerServiceDetails');
+                            saveControllerService(serviceTable, controllerServiceEntity).done(function () {
+                                deferred.resolve();
+                            }).fail(function () {
+                                deferred.reject();
+                            });
+                        }
+                    });
+                } else {
+                    deferred.resolve();
+                }
             }).promise();
-        }
-    };
-
-    /**
-     * Identifies the descriptors that identify controller services.
-     *
-     * @param {object} component
-     */
-    var identifyReferencedServiceDescriptors = function (component) {
-        var referencedServiceDescriptors = [];
-
-        $.each(component.descriptors, function (_, descriptor) {
-            if (nfCommon.isDefinedAndNotNull(descriptor.identifiesControllerService)) {
-                referencedServiceDescriptors.push(descriptor);
-            }
-        });
-
-        return referencedServiceDescriptors;
-    };
-
-    /**
-     * Identifies descriptors that reference controller services.
-     *
-     * @param {object} component
-     */
-    var getReferencedServices = function (component) {
-        var referencedServices = [];
-
-        $.each(identifyReferencedServiceDescriptors(component), function (_, descriptor) {
-            var referencedServiceId = component.properties[descriptor.name];
-
-            // ensure the property is configured
-            if (nfCommon.isDefinedAndNotNull(referencedServiceId) && $.trim(referencedServiceId).length > 0) {
-                referencedServices.push(referencedServiceId);
+        };
+    
+        var saveControllerService = function (serviceTable, controllerServiceEntity) {
+            // marshal the settings and properties and update the controller service
+            var updatedControllerService = marshalDetails();
+    
+            // ensure details are valid as far as we can tell
+            if (validateDetails(updatedControllerService)) {
+              updatedControllerService['revision'] = nfClient.getRevision(controllerServiceEntity);
+    
+                var previouslyReferencedServiceIds = [];
+                $.each(identifyReferencedServiceDescriptors(controllerServiceEntity.component), function (_, descriptor) {
+                  var modifyingService = !nfCommon.isUndefined(updatedControllerService.component.properties) && !nfCommon.isUndefined(updatedControllerService.component.properties[descriptor.name]);
+                  var isCurrentlyConfigured = nfCommon.isDefinedAndNotNull(controllerServiceEntity.component.properties[descriptor.name]);
+    
+                    // if we are attempting to update a controller service reference
+                    if (modifyingService && isCurrentlyConfigured) {
+    
+                        // record the current value if set
+                        previouslyReferencedServiceIds.push(controllerServiceEntity.component.properties[descriptor.name]);
+                    }
+                });
+    
+                // update the selected component
+                return $.ajax({
+                    type: 'PUT',
+                    data: JSON.stringify(updatedControllerService),
+                    url: controllerServiceEntity.uri,
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // reload the controller service
+                    renderControllerService(serviceTable, response);
+    
+                    // reload all previously referenced controller services
+                    $.each(previouslyReferencedServiceIds, function (_, oldServiceReferenceId) {
+                        reloadControllerService(serviceTable, oldServiceReferenceId);
+                    });
+                }).fail(handleControllerServiceConfigurationError);
+            } else {
+                return $.Deferred(function (deferred) {
+                    deferred.reject();
+                }).promise();
             }
-        });
-
-        return referencedServices;
-    };
-
-    /**
-     * Track the current table
-     */
-    var currentTable;
-
-    var nfControllerService = {
+        };
+    
         /**
-         * Initializes the controller service configuration dialog.
+         * Identifies the descriptors that identify controller services.
+         *
+         * @param {object} component
          */
-        init: function () {
-            // initialize the configuration dialog tabs
-            $('#controller-service-configuration-tabs').tabbs({
-                tabStyle: 'tab',
-                selectedTabStyle: 'selected-tab',
-                scrollableTabContentStyle: 'scrollable',
-                tabs: [{
-                    name: 'Settings',
-                    tabContentId: 'controller-service-standard-settings-tab-content'
-                }, {
-                    name: 'Properties',
-                    tabContentId: 'controller-service-properties-tab-content'
-                }, {
-                    name: 'Comments',
-                    tabContentId: 'controller-service-comments-tab-content'
-                }],
-                select: function () {
-                    // remove all property detail dialogs
-                    nfUniversalCapture.removeAllPropertyDetailDialogs();
-
-                    // update the property table size in case this is the first time its rendered
-                    if ($(this).text() === 'Properties') {
-                        $('#controller-service-properties').propertytable('resetTableSize');
-                    }
-
-                    // close all fields currently being edited
-                    $('#controller-service-properties').propertytable('saveRow');
-
-                    // show the border around the processor relationships if necessary
-                    var referenceContainer = $('#controller-service-referencing-components');
-                    updateReferencingComponentsBorder(referenceContainer);
-                }
-            });
-
-            // initialize the conroller service configuration dialog
-            $('#controller-service-configuration').modal({
-                headerText: 'Configure Controller Service',
-                scrollableContentStyle: 'scrollable',
-                handler: {
-                    close: function () {
-                        // empty the referencing components list
-                        var referencingComponents = $('#controller-service-referencing-components');
-                        nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-state');
-                        nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins');
-                        referencingComponents.css('border-width', '0').empty();
-
-                        // cancel any active edits
-                        $('#controller-service-properties').propertytable('cancelEdit');
-
-                        // clear the tables
-                        $('#controller-service-properties').propertytable('clear');
-
-                        // clear the comments
-                        nfCommon.clearField('read-only-controller-service-comments');
-
-                        // removed the cached controller service details
-                        $('#controller-service-configuration').removeData('controllerServiceDetails');
-                    },
-                    open: function () {
-                        nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                    }
-                }
-            });
-
-            // initialize the disable service dialog
-            $('#disable-controller-service-dialog').modal({
-                headerText: 'Disable Controller Service',
-                scrollableContentStyle: 'scrollable',
-                handler: {
-                    close: function () {
-                        var disableDialog = $(this);
-
-                        // reset visibility
-                        $('#disable-controller-service-scope-container').show();
-                        $('#disable-controller-service-progress-container').hide();
-
-                        // clear the dialog
-                        $('#disable-controller-service-id').text('');
-                        $('#disable-controller-service-name').text('');
-
-                        // bulletins
-                        $('#disable-controller-service-bulletins').removeClass('has-bulletins').removeData('bulletins').hide();
-                        nfCommon.cleanUpTooltips($('#disable-controller-service-service-container'), '#disable-controller-service-bulletins');
-
-                        // reset progress
-                        $('div.disable-referencing-components').removeClass('ajax-loading ajax-complete ajax-error');
-
-                        // referencing components
-                        var referencingComponents = $('#disable-controller-service-referencing-components');
-                        nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-state');
-                        nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins');
-                        referencingComponents.css('border-width', '0').empty();
-                    }
-                }
-            });
-
-            // initialize the enable scope combo
-            $('#enable-controller-service-scope').combo({
-                options: [{
-                    text: 'Service only',
-                    value: config.serviceOnly,
-                    description: 'Enable only this controller service'
-                }, {
-                    text: 'Service and referencing components',
-                    value: config.serviceAndReferencingComponents,
-                    description: 'Enable this controller service and enable/start all referencing components'
-                }]
-            });
-
-            // initialize the enable service dialog
-            $('#enable-controller-service-dialog').modal({
-                headerText: 'Enable Controller Service',
-                scrollableContentStyle: 'scrollable',
-                handler: {
-                    close: function () {
-                        var enableDialog = $(this);
-
-                        // reset visibility
-                        $('#enable-controller-service-scope-container').show();
-                        $('#enable-controller-service-progress-container').hide();
-                        $('#enable-controller-service-progress li.referencing-component').show();
-
-                        // clear the dialog
-                        $('#enable-controller-service-id').text('');
-                        $('#enable-controller-service-name').text('');
-
-                        // bulletins
-                        $('#enable-controller-service-bulletins').removeClass('has-bulletins').removeData('bulletins').hide();
-                        nfCommon.cleanUpTooltips($('#enable-controller-service-service-container'), '#enable-controller-service-bulletins');
-
-                        // reset progress
-                        $('div.enable-referencing-components').removeClass('ajax-loading ajax-complete ajax-error');
-
-                        // referencing components
-                        var referencingComponents = $('#enable-controller-service-referencing-components');
-                        nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-state');
-                        nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins');
-                        referencingComponents.css('border-width', '0').empty();
-                    }
+        var identifyReferencedServiceDescriptors = function (component) {
+            var referencedServiceDescriptors = [];
+    
+            $.each(component.descriptors, function (_, descriptor) {
+              if (nfCommon.isDefinedAndNotNull(descriptor.identifiesControllerService)) {
+                    referencedServiceDescriptors.push(descriptor);
                 }
             });
-        },
-
+    
+            return referencedServiceDescriptors;
+        };
+    
         /**
-         * Shows the configuration dialog for the specified controller service.
+         * Identifies descriptors that reference controller services.
          *
-         * @argument {jQuery} serviceTable                 The controller service table
-         * @argument {object} controllerServiceEntity      The controller service
+         * @param {object} component
          */
-        showConfiguration: function (serviceTable, controllerServiceEntity) {
-            if (nfCommon.isUndefined(currentTable)) {
-                currentTable = serviceTable;
-            }
-            var controllerServiceDialog = $('#controller-service-configuration');
-            if (controllerServiceDialog.data('mode') !== config.edit || currentTable !== serviceTable) {
-                // update the visibility
-                $('#controller-service-configuration .controller-service-read-only').hide();
-                $('#controller-service-configuration .controller-service-editable').show();
-
-                // 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) {
-                        var controllerServicesUri;
-                        var createdControllerServicesTable;
-
-                        // calculate the correct uri
-                        var createdControllerService = response.component;
-                        if (nfCommon.isDefinedAndNotNull(createdControllerService.parentGroupId)) {
-                            controllerServicesUri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(createdControllerService.parentGroupId) + '/controller-services';
-                        } else {
-                            controllerServicesUri = config.urls.api + '/flow/controller/controller-services';
+        var getReferencedServices = function (component) {
+            var referencedServices = [];
+    
+            $.each(identifyReferencedServiceDescriptors(component), function (_, descriptor) {
+                var referencedServiceId = component.properties[descriptor.name];
+    
+                // ensure the property is configured
+              if (nfCommon.isDefinedAndNotNull(referencedServiceId) && $.trim(referencedServiceId).length > 0) {
+                    referencedServices.push(referencedServiceId);
+                }
+            });
+    
+            return referencedServices;
+        };
+    
+      /**
+       * Track the current table
+       */
+      var currentTable;
+  
+      var nfControllerService = {
+            /**
+             * Initializes the controller service configuration dialog.
+             */
+            init: function () {
+                // initialize the configuration dialog tabs
+                $('#controller-service-configuration-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                      name: nf._.msg('nf-controller-service.Settings'),
+                        tabContentId: 'controller-service-standard-settings-tab-content'
+                    }, {
+                      name: nf._.msg('nf-controller-service.Properties'),
+                        tabContentId: 'controller-service-properties-tab-content'
+                    }, {
+                      name: nf._.msg('nf-controller-service.Comments'),
+                        tabContentId: 'controller-service-comments-tab-content'
+                    }],
+                    select: function () {
+                        // remove all property detail dialogs
+                      nfUniversalCapture.removeAllPropertyDetailDialogs();
+    
+                        // update the property table size in case this is the first time its rendered
+                      if ($(this).text() === nf._.msg('nf-controller-service.Properties')) {
+                            $('#controller-service-properties').propertytable('resetTableSize');
                         }
-
-                        // load the controller services accordingly
-                        return nfControllerServices.loadControllerServices(controllerServicesUri, serviceTable);
-                    },
-                    goToServiceDeferred: function () {
-                        return goToServiceFromProperty(serviceTable);
+    
+                        // close all fields currently being edited
+                        $('#controller-service-properties').propertytable('saveRow');
+    
+                        // show the border around the processor relationships if necessary
+                        var referenceContainer = $('#controller-service-referencing-components');
+                        updateReferencingComponentsBorder(referenceContainer);
                     }
                 });
-
-                // update the mode
-                controllerServiceDialog.data('mode', config.edit);
-            }
-
-            //track the current table
-            currentTable = serviceTable;
-
-            // reload the service in case the property descriptors have changed
-            var reloadService = $.ajax({
-                type: 'GET',
-                url: controllerServiceEntity.uri,
-                dataType: 'json'
-            });
-
-            // get the controller service history
-            var loadHistory = $.ajax({
-                type: 'GET',
-                url: '../nifi-api/flow/history/components/' + encodeURIComponent(controllerServiceEntity.id),
-                dataType: 'json'
-            });
-
-            // once everything is loaded, show the dialog
-            $.when(reloadService, loadHistory).done(function (serviceResponse, historyResponse) {
-                // get the updated controller service
-                controllerServiceEntity = serviceResponse[0];
-                var controllerService = controllerServiceEntity.component;
-
-                // get the controller service history
-                var controllerServiceHistory = historyResponse[0].componentHistory;
-
-                // record the controller service details
-                controllerServiceDialog.data('controllerServiceDetails', controllerServiceEntity);
-
-                // populate the controller service settings
-                nfCommon.populateField('controller-service-id', controllerService['id']);
-                nfCommon.populateField('controller-service-type', nfCommon.substringAfterLast(controllerService['type'], '.'));
-                $('#controller-service-name').val(controllerService['name']);
-                $('#controller-service-comments').val(controllerService['comments']);
-
-                // get the reference container
-                var referenceContainer = $('#controller-service-referencing-components');
-
-                // load the controller referencing components list
-                createReferencingComponents(serviceTable, referenceContainer, controllerService.referencingComponents);
-
-                var buttons = [{
-                    buttonText: 'Apply',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
+    
+                // initialize the conroller service configuration dialog
+                $('#controller-service-configuration').modal({
+                  headerText: nf._.msg('nf-controller-service.Message7'),
+                    scrollableContentStyle: 'scrollable',
                     handler: {
-                        click: function () {
-                            // close all fields currently being edited
-                            $('#controller-service-properties').propertytable('saveRow');
-
-                            // save the controller service
-                            saveControllerService(serviceTable, controllerServiceEntity).done(function (response) {
-                                reloadControllerServiceReferences(serviceTable, response.component);
-
-                                // close the details panel
-                                controllerServiceDialog.modal('hide');
-                            });
+                        close: function () {
+                            // empty the referencing components list
+                            var referencingComponents = $('#controller-service-referencing-components');
+                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-state');
+                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins');
+                            referencingComponents.css('border-width', '0').empty();
+    
+                            // cancel any active edits
+                            $('#controller-service-properties').propertytable('cancelEdit');
+    
+                            // clear the tables
+                            $('#controller-service-properties').propertytable('clear');
+    
+                            // clear the comments
+                          nfCommon.clearField('read-only-controller-service-comments');
+    
+                            // removed the cached controller service details
+                            $('#controller-service-configuration').removeData('controllerServiceDetails');
+                        },
+                        open: function () {
+                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                         }
                     }
-                }, {
-                    buttonText: 'Cancel',
-                    color: {
-                        base: '#E3E8EB',
-                        hover: '#C7D2D7',
-                        text: '#004849'
-                    },
+                });
+    
+                // initialize the disable service dialog
+                $('#disable-controller-service-dialog').modal({
+                  headerText: nf._.msg('nf-controller-service.Message8'),
+                    scrollableContentStyle: 'scrollable',
+                    handler: {
+                        close: function () {
+                            var disableDialog = $(this);
+    
+                            // reset visibility
+                            $('#disable-controller-service-scope-container').show();
+                            $('#disable-controller-service-progress-container').hide();
+    
+                            // clear the dialog
+                            $('#disable-controller-service-id').text('');
+                            $('#disable-controller-service-name').text('');
+    
+                            // bulletins
+                            $('#disable-controller-service-bulletins').removeClass('has-bulletins').removeData('bulletins').hide();
+                          nfCommon.cleanUpTooltips($('#disable-controller-service-service-container'), '#disable-controller-service-bulletins');
+    
+                            // reset progress
+                            $('div.disable-referencing-components').removeClass('ajax-loading ajax-complete ajax-error');
+    
+                            // referencing components
+                            var referencingComponents = $('#disable-controller-service-referencing-components');
+                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-state');
+                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins');
+                            referencingComponents.css('border-width', '0').empty();
+                        }
+                    }
+                });
+    
+                // initialize the enable scope combo
+                $('#enable-controller-service-scope').combo({
+                    options: [{
+                      text: nf._.msg('nf-controller-service.ServiceOnle'),
+                        value: config.serviceOnly,
+                      description: nf._.msg('nf-controller-service.Message12')
+                    }, {
+                      text: nf._.msg('nf-controller-service.Message10'),
+                        value: config.serviceAndReferencingComponents,
+                      description: nf._.msg('nf-controller-service.Message11')
+                    }]
+                });
+    
+                // initialize the enable service dialog
+                $('#enable-controller-service-dialog').modal({
+                    headerText: 'Enable Controller Service',
+                    scrollableContentStyle: 'scrollable',
                     handler: {
-                        click: function () {
-                            controllerServiceDialog.modal('hide');
+                        close: function () {
+                            var enableDialog = $(this);
+    
+                            // reset visibility
+                            $('#enable-controller-service-scope-container').show();
+                            $('#enable-controller-service-progress-container').hide();
+                            $('#enable-controller-service-progress li.referencing-component').show();
+    
+                            // clear the dialog
+                            $('#enable-controller-service-id').text('');
+                            $('#enable-controller-service-name').text('');
+    
+                            // bulletins
+                            $('#enable-controller-service-bulletins').removeClass('has-bulletins').removeData('bulletins').hide();
+                          nfCommon.cleanUpTooltips($('#enable-controller-service-service-container'), '#enable-controller-service-bulletins');
+    
+                            // reset progress
+                            $('div.enable-referencing-components').removeClass('ajax-loading ajax-complete ajax-error');
+    
+                            // referencing components
+                            var referencingComponents = $('#enable-controller-service-referencing-components');
+                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-state');
+                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins');
+                            referencingComponents.css('border-width', '0').empty();
                         }
                     }
-                }];
-
-                // determine if we should show the advanced button
-                if (nfCommon.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') {
-                    buttons.push({
-                        buttonText: 'Advanced',
-                        clazz: 'fa fa-cog button-icon',
+                });
+            },
+    
+            /**
+             * Shows the configuration dialog for the specified controller service.
+             *
+             * @argument {jQuery} serviceTable                 The controller service table
+             * @argument {object} controllerServiceEntity      The controller service
+             */
+            showConfiguration: function (serviceTable, controllerServiceEntity) {
+              if (nfCommon.isUndefined(currentTable)) {
+                  currentTable = serviceTable;
+              }
+                var controllerServiceDialog = $('#controller-service-configuration');
+              if (controllerServiceDialog.data('mode') !== config.edit || currentTable !== serviceTable) {
+                    // update the visibility
+                    $('#controller-service-configuration .controller-service-read-only').hide();
+                    $('#controller-service-configuration .controller-service-editable').show();
+    
+                    // 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) {
+                          var controllerServicesUri;
+                          var createdControllerServicesTable;
+  
+                          // calculate the correct uri
+                          var createdControllerService = response.component;
+                          if (nfCommon.isDefinedAndNotNull(createdControllerService.parentGroupId)) {
+                              controllerServicesUri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(createdControllerService.parentGroupId) + '/controller-services';
+                          } else {
+                              controllerServicesUri = config.urls.api + '/flow/controller/controller-services';
+                          }
+  
+                          // load the controller services accordingly
+                          return nfControllerServices.loadControllerServices(controllerServicesUri, serviceTable);
+                      },
+                        goToServiceDeferred: function () {
+                            return goToServiceFromProperty(serviceTable);
+                        }
+                    });
+    
+                    // update the mode
+                    controllerServiceDialog.data('mode', config.edit);
+                }
+    
+              //track the current table
+              currentTable = serviceTable;
+  
+                // reload the service in case the property descriptors have changed
+                var reloadService = $.ajax({
+                    type: 'GET',
+                    url: controllerServiceEntity.uri,
+                    dataType: 'json'
+                });
+    
+                // get the controller service history
+                var loadHistory = $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/flow/history/components/' + encodeURIComponent(controllerServiceEntity.id),
+                    dataType: 'json'
+                });
+    
+                // once everything is loaded, show the dialog
+                $.when(reloadService, loadHistory).done(function (serviceResponse, historyResponse) {
+                    // get the updated controller service
+                    controllerServiceEntity = serviceResponse[0];
+                    var controllerService = controllerServiceEntity.component;
+    
+                    // get the controller service history
+                    var controllerServiceHistory = historyResponse[0].componentHistory;
+    
+                    // record the controller service details
+                    controllerServiceDialog.data('controllerServiceDetails', controllerServiceEntity);
+    
+                    // populate the controller service settings
+                  nfCommon.populateField('controller-service-id', controllerService['id']);
+                  nfCommon.populateField('controller-service-type', nfCommon.substringAfterLast(controllerService['type'], '.'));
+                    $('#controller-service-name').val(controllerService['name']);
+                    $('#controller-service-comments').val(controllerService['comments']);
+    
+                    // get the reference container
+                    var referenceContainer = $('#controller-service-referencing-components');
+    
+                    // load the controller referencing components list
+                    createReferencingComponents(serviceTable, referenceContainer, controllerService.referencingComponents);
+    
+                    var buttons = [{
+                      buttonText: nf._.msg('nf-controller-service.Apply'),
                         color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
                         },
                         handler: {
                             click: function () {
-                                var openCustomUi = function () {
-                                    // reset state and close the dialog manually to avoid hiding the faded background
-                                    controllerServiceDialog.modal('hide');
-
-                                    // close the settings dialog since the custom ui is also opened in the shell
-                                    $('#shell-close-button').click();
-
-                                    // show the custom ui
-                                    nfCustomUi.showCustomUi(controllerServiceEntity, controllerService.customUiUrl, true).done(function () {
-                                        // once the custom ui is closed, reload the controller service
-                                        reloadControllerServiceAndReferencingComponents(serviceTable, controllerService);
-
-                                        // show the settings
-                                        nfSettings.showSettings();
-                                    });
-                                };
-
                                 // close all fields currently being edited
                                 $('#controller-service-properties').propertytable('saveRow');
-
-                                // determine if changes have been made
-                                if (isSaveRequired()) {
-                                    // see if those changes should be saved
-                                    nfDialog.showYesNoDialog({
-                                        headerText: 'Save',
-                                        dialogContent: 'Save changes before opening the advanced configuration?',
-                                        noHandler: openCustomUi,
-                                        yesHandler: function () {
-                                            saveControllerService(serviceTable, controllerServiceEntity).done(function () {
-                                                // open the custom ui
-                                                openCustomUi();
-                                            });
-                                        }
-                                    });
-                                } else {
-                                    // if there were no changes, simply open the custom ui
-                                    openCustomUi();
-                                }
+    
+                                // save the controller service
+                                saveControllerService(serviceTable, controllerServiceEntity).done(function (response) {
+                                    reloadControllerServiceReferences(serviceTable, response.component);
+    
+                                    // close the details panel
+                                    controllerServiceDialog.modal('hide');
+                                });
                             }
                         }
-                    });
-                }
-
-                // set the button model
-                controllerServiceDialog.modal('setButtonModel', buttons);
-
-                // load the property table
-                $('#controller-service-properties')
-                    .propertytable('setGroupId', controllerService.parentGroupId)
-                    .propertytable('loadProperties', controllerService.properties, controllerService.descriptors, controllerServiceHistory.propertyHistory);
-
-                // show the details
-                controllerServiceDialog.modal('show');
-
-                // show the border if necessary
-                updateReferencingComponentsBorder(referenceContainer);
-
-                $('#controller-service-properties').propertytable('resetTableSize');
-            }).fail(nfErrorHandler.handleAjaxError);
-        },
-
-        /**
-         * Shows the controller service details in a read only dialog.
-         *
-         * @param {jQuery} serviceTable
-         * @param {object} controllerServiceEntity
-         */
-        showDetails: function (serviceTable, controllerServiceEntity) {
-            var controllerServiceDialog = $('#controller-service-configuration');
-            if (controllerServiceDialog.data('mode') !== config.readOnly) {
-                // update the visibility
-                $('#controller-service-configuration .controller-service-read-only').show();
-                $('#controller-service-configuration .controller-service-editable').hide();
-
-                // initialize the property table
-                $('#controller-service-properties').propertytable('destroy').propertytable({
-                    supportsGoTo: true,
-                    readOnly: true
-                });
-
-                // update the mode
-                controllerServiceDialog.data('mode', config.readOnly);
-            }
-
-            // reload the service in case the property descriptors have changed
-            var reloadService = $.ajax({
-                type: 'GET',
-                url: controllerServiceEntity.uri,
-                dataType: 'json'
-            });
-
-            // get the controller service history
-            var loadHistory = $.ajax({
-                type: 'GET',
-                url: '../nifi-api/flow/history/components/' + encodeURIComponent(controllerServiceEntity.id),
-                dataType: 'json'
-            });
-
-            // once everything is loaded, show the dialog
-            $.when(reloadService, loadHistory).done(function (serviceResponse, historyResponse) {
-                // get the updated controller service
-                controllerServiceEntity = serviceResponse[0];
-                var controllerService = controllerServiceEntity.component;
-
-                // get the controller service history
-                var controllerServiceHistory = historyResponse[0].componentHistory;
-
-                // record the controller service details
-                controllerServiceDialog.data('controllerServiceDetails', controllerServiceEntity);
-
-                // populate the controller service settings
-                nfCommon.populateField('controller-service-id', controllerService['id']);
-                nfCommon.populateField('controller-service-type', nfCommon.substringAfterLast(controllerService['type'], '.'));
-                nfCommon.populateField('read-only-controller-service-name', controllerService['name']);
-                nfCommon.populateField('read-only-controller-service-comments', controllerService['comments']);
-
-                // get the reference container
-                var referenceContainer = $('#controller-service-referencing-components');
-
-                // load the controller referencing components list
-                createReferencingComponents(serviceTable, referenceContainer, controllerService.referencingComponents);
-
-                var buttons = [{
-                    buttonText: 'Ok',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // hide the dialog
-                            controllerServiceDialog.modal('hide');
-                        }
-                    }
-                }];
-
-                // determine if we should show the advanced button
-                if (nfCommon.isDefinedAndNotNull(nfCustomUi) && nfCommon.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') {
-                    buttons.push({
-                        buttonText: 'Advanced',
-                        clazz: 'fa fa-cog button-icon',
+                    }, {
+                          buttonText: nf._.msg('nf-controller-service.Cancel'),
                         color: {
                             base: '#E3E8EB',
                             hover: '#C7D2D7',
@@ -2050,118 +1884,284 @@
                         },
                         handler: {
                             click: function () {
-                                // reset state and close the dialog manually to avoid hiding the faded background
                                 controllerServiceDialog.modal('hide');
-
-                                // close the settings dialog since the custom ui is also opened in the shell
-                                $('#shell-close-button').click();
-
-                                // show the custom ui
-                                nfCustomUi.showCustomUi(controllerServiceEntity, controllerService.customUiUrl, false).done(function () {
-                                    nfSettings.showSettings();
-                                });
                             }
                         }
+                    }];
+    
+                    // determine if we should show the advanced button
+                  if (nfCommon.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') {
+                        buttons.push({
+                          buttonText: nf._.msg('nf-controller-service.Advanced'),
+                            clazz: 'fa fa-cog button-icon',
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    var openCustomUi = function () {
+                                        // reset state and close the dialog manually to avoid hiding the faded background
+                                        controllerServiceDialog.modal('hide');
+    
+                                        // close the settings dialog since the custom ui is also opened in the shell
+                                        $('#shell-close-button').click();
+    
+                                        // show the custom ui
+                                      nfCustomUi.showCustomUi(controllerServiceEntity, controllerService.customUiUrl, true).done(function () {
+                                            // once the custom ui is closed, reload the controller service
+                                            reloadControllerServiceAndReferencingComponents(serviceTable, controllerService);
+    
+                                            // show the settings
+                                          nfSettings.showSettings();
+                                        });
+                                    };
+    
+                                    // close all fields currently being edited
+                                    $('#controller-service-properties').propertytable('saveRow');
+    
+                                    // determine if changes have been made
+                                    if (isSaveRequired()) {
+                                        // see if those changes should be saved
+                                      nfDialog.showYesNoDialog({
+                                          headerText: nf._.msg('nf-controller-service.Save'),
+                                          dialogContent: nf._.msg('nf-controller-service.Message13'),
+                                            noHandler: openCustomUi,
+                                            yesHandler: function () {
+                                                saveControllerService(serviceTable, controllerServiceEntity).done(function () {
+                                                    // open the custom ui
+                                                    openCustomUi();
+                                                });
+                                            }
+                                        });
+                                    } else {
+                                        // if there were no changes, simply open the custom ui
+                                        openCustomUi();
+                                    }
+                                }
+                            }
+                        });
+                    }
+    
+                    // set the button model
+                    controllerServiceDialog.modal('setButtonModel', buttons);
+    
+                    // load the property table
+                    $('#controller-service-properties')
+                        .propertytable('setGroupId', controllerService.parentGroupId)
+                        .propertytable('loadProperties', controllerService.properties, controllerService.descriptors, controllerServiceHistory.propertyHistory);
+    
+                    // show the details
+                    controllerServiceDialog.modal('show');
+    
+                    // show the border if necessary
+                    updateReferencingComponentsBorder(referenceContainer);
+    
+                    $('#controller-service-properties').propertytable('resetTableSize');
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows the controller service details in a read only dialog.
+             *
+             * @param {jQuery} serviceTable
+             * @param {object} controllerServiceEntity
+             */
+            showDetails: function (serviceTable, controllerServiceEntity) {
+                var controllerServiceDialog = $('#controller-service-configuration');
+                if (controllerServiceDialog.data('mode') !== config.readOnly) {
+                    // update the visibility
+                    $('#controller-service-configuration .controller-service-read-only').show();
+                    $('#controller-service-configuration .controller-service-editable').hide();
+    
+                    // initialize the property table
+                    $('#controller-service-properties').propertytable('destroy').propertytable({
+                      supportsGoTo: true,
+                        readOnly: true
                     });
+    
+                    // update the mode
+                    controllerServiceDialog.data('mode', config.readOnly);
                 }
-
-                // show the dialog
-                controllerServiceDialog.modal('setButtonModel', buttons);
-
-                // load the property table
-                $('#controller-service-properties').propertytable('loadProperties', controllerService.properties, controllerService.descriptors, controllerServiceHistory.propertyHistory);
-
-                // show the details
-                controllerServiceDialog.modal('show');
-
-                // show the border if necessary
-                updateReferencingComponentsBorder(referenceContainer);
-
-                $('#controller-service-properties').propertytable('resetTableSize');
-            });
-        },
-
-        /**
-         * Enables the specified controller service.
-         *
-         * @param {jQuery} serviceTable
-         * @param {object} controllerServiceEntity
-         */
-        enable: function (serviceTable, controllerServiceEntity) {
-            showEnableControllerServiceDialog(serviceTable, controllerServiceEntity.component);
-        },
-
-        /**
-         * Disables the specified controller service.
-         *
-         * @param {jQuery} serviceTable
-         * @param {object} controllerServiceEntity
-         */
-        disable: function (serviceTable, controllerServiceEntity) {
-            showDisableControllerServiceDialog(serviceTable, controllerServiceEntity.component);
-        },
-
-        /**
-         * Reloads the services that the specified comonent references. This is
-         * necessary because the specified component state is reflected in the
-         * referenced service referencing components.
-         *
-         * @param {jQuery} serviceTable
-         * @param {object} component
-         */
-        reloadReferencedServices: function (serviceTable, component) {
-            $.each(getReferencedServices(component), function (_, referencedServiceId) {
-                reloadControllerService(serviceTable, referencedServiceId);
-            });
-        },
-
-        /**
-         * Prompts the user before attempting to delete the specified controller service.
-         *
-         * @param {jQuery} serviceTable
-         * @param {object} controllerServiceEntity
-         */
-        promptToDeleteController: function (serviceTable, controllerServiceEntity) {
-            // prompt for deletion
-            nfDialog.showYesNoDialog({
-                headerText: 'Delete Controller Service',
-                dialogContent: 'Delete controller service \'' + nfCommon.escapeHtml(controllerServiceEntity.component.name) + '\'?',
-                yesHandler: function () {
-                    nfControllerService.remove(serviceTable, controllerServiceEntity);
-                }
-            });
-        },
-
-        /**
-         * Deletes the specified controller service.
-         *
-         * @param {jQuery} serviceTable
-         * @param {object} controllerServiceEntity
-         */
-        remove: function (serviceTable, controllerServiceEntity) {
-            // prompt for removal?
-
-            var revision = nfClient.getRevision(controllerServiceEntity);
-            $.ajax({
-                type: 'DELETE',
-                url: controllerServiceEntity.uri + '?' + $.param({
-                    version: revision.version,
-                    clientId: revision.clientId
-                }),
-                dataType: 'json'
-            }).done(function (response) {
-                // remove the service
-                var controllerServiceGrid = serviceTable.data('gridInstance');
-                var controllerServiceData = controllerServiceGrid.getData();
-                controllerServiceData.deleteItem(controllerServiceEntity.id);
-
-                // reload the as necessary
-                if (controllerServiceEntity.permissions.canRead) {
-                    reloadControllerServiceReferences(serviceTable, controllerServiceEntity.component);
-                }
-            }).fail(nfErrorHandler.handleAjaxError);
-        }
-    };
-
-    return nfControllerService;
-}));
+    
+                // reload the service in case the property descriptors have changed
+                var reloadService = $.ajax({
+                    type: 'GET',
+                    url: controllerServiceEntity.uri,
+                    dataType: 'json'
+                });
+    
+                // get the controller service history
+                var loadHistory = $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/flow/history/components/' + encodeURIComponent(controllerServiceEntity.id),
+                    dataType: 'json'
+                });
+    
+                // once everything is loaded, show the dialog
+                $.when(reloadService, loadHistory).done(function (serviceResponse, historyResponse) {
+                    // get the updated controller service
+                    controllerServiceEntity = serviceResponse[0];
+                    var controllerService = controllerServiceEntity.component;
+    
+                    // get the controller service history
+                    var controllerServiceHistory = historyResponse[0].componentHistory;
+    
+                    // record the controller service details
+                    controllerServiceDialog.data('controllerServiceDetails', controllerServiceEntity);
+    
+                    // populate the controller service settings
+                  nfCommon.populateField('controller-service-id', controllerService['id']);
+                  nfCommon.populateField('controller-service-type', nfCommon.substringAfterLast(controllerService['type'], '.'));
+                  nfCommon.populateField('read-only-controller-service-name', controllerService['name']);
+                  nfCommon.populateField('read-only-controller-service-comments', controllerService['comments']);
+    
+                    // get the reference container
+                    var referenceContainer = $('#controller-service-referencing-components');
+    
+                    // load the controller referencing components list
+                    createReferencingComponents(serviceTable, referenceContainer, controllerService.referencingComponents);
+    
+                    var buttons = [{
+                      buttonText: nf._.msg('nf-controller-service.Ok'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                // hide the dialog
+                                controllerServiceDialog.modal('hide');
+                            }
+                        }
+                    }];
+    
+                    // determine if we should show the advanced button
+                  if (nfCommon.isDefinedAndNotNull(nfCustomUi) && nfCommon.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') {
+                        buttons.push({
+                          buttonText: nf._.msg('nf-controller-service.Advanced'),
+                            clazz: 'fa fa-cog button-icon',
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    // reset state and close the dialog manually to avoid hiding the faded background
+                                    controllerServiceDialog.modal('hide');
+    
+                                    // close the settings dialog since the custom ui is also opened in the shell
+                                    $('#shell-close-button').click();
+    
+                                    // show the custom ui
+                                  nfCustomUi.showCustomUi(controllerServiceEntity, controllerService.customUiUrl, false).done(function () {
+                                      nfSettings.showSettings();
+                                    });
+                                }
+                            }
+                        });
+                    }
+    
+                    // show the dialog
+                    controllerServiceDialog.modal('setButtonModel', buttons);
+    
+                    // load the property table
+                    $('#controller-service-properties').propertytable('loadProperties', controllerService.properties, controllerService.descriptors, controllerServiceHistory.propertyHistory);
+    
+                    // show the details
+                    controllerServiceDialog.modal('show');
+    
+                    // show the border if necessary
+                    updateReferencingComponentsBorder(referenceContainer);
+    
+                    $('#controller-service-properties').propertytable('resetTableSize');
+                });
+            },
+    
+            /**
+             * Enables the specified controller service.
+             *
+             * @param {jQuery} serviceTable
+             * @param {object} controllerServiceEntity
+             */
+            enable: function (serviceTable, controllerServiceEntity) {
+                showEnableControllerServiceDialog(serviceTable, controllerServiceEntity.component);
+            },
+    
+            /**
+             * Disables the specified controller service.
+             *
+             * @param {jQuery} serviceTable
+             * @param {object} controllerServiceEntity
+             */
+            disable: function (serviceTable, controllerServiceEntity) {
+                showDisableControllerServiceDialog(serviceTable, controllerServiceEntity.component);
+            },
+    
+            /**
+             * Reloads the services that the specified comonent references. This is
+             * necessary because the specified component state is reflected in the
+             * referenced service referencing components.
+             *
+             * @param {jQuery} serviceTable
+             * @param {object} component
+             */
+            reloadReferencedServices: function (serviceTable, component) {
+                $.each(getReferencedServices(component), function (_, referencedServiceId) {
+                    reloadControllerService(serviceTable, referencedServiceId);
+                });
+            },
+    
+            /**
+           * Prompts the user before attempting to delete the specified controller service.
+           *
+           * @param {jQuery} serviceTable
+           * @param {object} controllerServiceEntity
+           */
+          promptToDeleteController: function (serviceTable, controllerServiceEntity) {
+              // prompt for deletion
+              nfDialog.showYesNoDialog({
+                  headerText: 'Delete Controller Service',
+                  dialogContent: 'Delete controller service \'' + nfCommon.escapeHtml(controllerServiceEntity.component.name) + '\'?',
+                  yesHandler: function () {
+                      nfControllerService.remove(serviceTable, controllerServiceEntity);
+                  }
+              });
+          },
+  
+          /**
+             * Deletes the specified controller service.
+             *
+             * @param {jQuery} serviceTable
+             * @param {object} controllerServiceEntity
+             */
+            remove: function (serviceTable, controllerServiceEntity) {
+                // prompt for removal?
+    
+              var revision = nfClient.getRevision(controllerServiceEntity);
+                $.ajax({
+                    type: 'DELETE',
+                    url: controllerServiceEntity.uri + '?' + $.param({
+                        version: revision.version,
+                        clientId: revision.clientId
+                    }),
+                    dataType: 'json'
+                }).done(function (response) {
+                    // remove the service
+                    var controllerServiceGrid = serviceTable.data('gridInstance');
+                    var controllerServiceData = controllerServiceGrid.getData();
+                    controllerServiceData.deleteItem(controllerServiceEntity.id);
+    
+                    // reload the as necessary
+                    if (controllerServiceEntity.permissions.canRead) {
+                        reloadControllerServiceReferences(serviceTable, controllerServiceEntity.component);
+                    }
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+    
+      return nfControllerService;
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
index 9f1a26d74bf9..15a658806024 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
@@ -1,1222 +1,1222 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'Slick',
-                'nf.Client',
-                'nf.Shell',
-                'nf.ProcessGroupConfiguration',
-                'nf.CanvasUtils',
-                'nf.ErrorHandler',
-                'nf.Dialog',
-                'nf.Common',
-                'nf.ControllerService',
-                'nf.ProcessGroup',
-                'nf.PolicyManagement',
-                'nf.ComponentState',
-                'nf.ng.Bridge'],
-            function ($, d3, Slick, nfClient, nfShell, nfProcessGroupConfiguration, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon, nfControllerService, nfProcessGroup, nfPolicyManagement, nfComponentState, nfNgBridge) {
-                return (nf.ControllerServices = factory($, d3, Slick, nfClient, nfShell, nfProcessGroupConfiguration, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon, nfControllerService, nfProcessGroup, nfPolicyManagement, nfComponentState, nfNgBridge));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ControllerServices =
-            factory(require('jquery'),
-                require('d3'),
-                require('Slick'),
-                require('nf.Client'),
-                require('nf.Shell'),
-                require('nf.ProcessGroupConfiguration'),
-                require('nf.CanvasUtils'),
-                require('nf.ErrorHandler'),
-                require('nf.Dialog'),
-                require('nf.Common'),
-                require('nf.ControllerService'),
-                require('nf.ProcessGroup'),
-                require('nf.PolicyManagement'),
-                require('nf.ComponentState'),
-                require('nf.ng.Bridge')));
-    } else {
-        nf.ControllerServices = factory(root.$,
-            root.d3,
-            root.Slick,
-            root.nf.Client,
-            root.nf.Shell,
-            root.nf.ProcessGroupConfiguration,
-            root.nf.CanvasUtils,
-            root.nf.ErrorHandler,
-            root.nf.Dialog,
-            root.nf.Common,
-            root.nf.ControllerService,
-            root.nf.ProcessGroup,
-            root.nf.PolicyManagement,
-            root.nf.ComponentState,
-            root.nf.ng.Bridge);
-    }
-}(this, function ($, d3, Slick, nfClient, nfShell, nfProcessGroupConfiguration, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon, nfControllerService, nfProcessGroup, nfPolicyManagement, nfComponentState, nfNgBridge) {
-    'use strict';
-
-    var dblClick = null;
-    var initialized = false;
-
-    var config = {
-        urls: {
-            api: '../nifi-api',
-            controllerServiceTypes: '../nifi-api/flow/controller-service-types'
-        }
-    };
-
-    var gridOptions = {
-        forceFitColumns: true,
-        enableTextSelectionOnCells: true,
-        enableCellNavigation: true,
-        enableColumnReorder: false,
-        autoEdit: false,
-        multiSelect: false,
-        rowHeight: 24
-    };
-
-    /**
-     * Whether the specified item is selectable.
+    /*
+     * 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
      *
-     * @param item controller service type
-     */
-    var isSelectable = function (item) {
-        return nfCommon.isBlank(item.usageRestriction) || nfCommon.canAccessRestrictedComponents();
-    };
-
-    /**
-     * 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 getControllerServiceTypeFilterText = function () {
-        return $('#controller-service-type-filter').val();
-    };
-
-    /**
-     * Filters the processor type table.
-     */
-    var applyControllerServiceTypeFilter = function () {
-        // get the dataview
-        var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
-
-        // ensure the grid has been initialized
-        if (nfCommon.isDefinedAndNotNull(controllerServiceTypesGrid)) {
-            var controllerServiceTypesData = controllerServiceTypesGrid.getData();
-
-            // update the search criteria
-            controllerServiceTypesData.setFilterArgs({
-                searchString: getControllerServiceTypeFilterText()
-            });
-            controllerServiceTypesData.refresh();
-
-            // update the buttons to possibly trigger the disabled state
-            $('#new-controller-service-dialog').modal('refreshButtons');
-
-            // update the selection if possible
-            if (controllerServiceTypesData.getLength() > 0) {
-                controllerServiceTypesGrid.setSelectedRows([0]);
-            }
-        }
-    };
-
-    /**
-     * Hides the selected controller service.
-     */
-    var clearSelectedControllerService = function () {
-        $('#controller-service-type-description').text('');
-        $('#controller-service-type-name').text('');
-        $('#selected-controller-service-name').text('');
-        $('#selected-controller-service-type').text('');
-        $('#controller-service-description-container').hide();
-    };
-
-    /**
-     * Clears the selected controller service type.
-     */
-    var clearControllerServiceSelection = function () {
-        // clear the selected row
-        clearSelectedControllerService();
-
-        // clear the active cell the it can be reselected when its included
-        var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
-        controllerServiceTypesGrid.resetActiveCell();
-    };
-
-    /**
-     * Performs the filtering.
-     *
-     * @param {object} item     The item subject to filtering
-     * @param {object} args     Filter arguments
-     * @returns {Boolean}       Whether or not to include the item
-     */
-    var filterControllerServiceTypes = function (item, args) {
-        // determine if the item matches the filter
-        var matchesFilter = matchesRegex(item, args);
-
-        // determine if the row matches the selected tags
-        var matchesTags = true;
-        if (matchesFilter) {
-            var tagFilters = $('#controller-service-tag-cloud').tagcloud('getSelectedTags');
-            var hasSelectedTags = tagFilters.length > 0;
-            if (hasSelectedTags) {
-                matchesTags = matchesSelectedTags(tagFilters, item['tags']);
-            }
-        }
-
-        // determine if this row should be visible
-        var matches = matchesFilter && matchesTags;
-
-        // if this row is currently selected and its being filtered
-        if (matches === false && $('#selected-controller-service-type').text() === item['type']) {
-            clearControllerServiceSelection();
-        }
-
-        return matches;
-    };
-
-    /**
-     * Determines if the item matches the filter.
-     *
-     * @param {object} item     The item to filter
-     * @param {object} args     The filter criteria
-     * @returns {boolean}       Whether the item matches the filter
-     */
-    var matchesRegex = function (item, args) {
-        if (args.searchString === '') {
-            return true;
-        }
-
-        try {
-            // perform the row filtering
-            var filterExp = new RegExp(args.searchString, 'i');
-        } catch (e) {
-            // invalid regex
-            return false;
-        }
-
-        // determine if the item matches the filter
-        var matchesLabel = item['label'].search(filterExp) >= 0;
-        var matchesTags = item['tags'].search(filterExp) >= 0;
-        return matchesLabel || matchesTags;
-    };
-
-    /**
-     * Determines if the specified tags match all the tags selected by the user.
+     *     http://www.apache.org/licenses/LICENSE-2.0
      *
-     * @argument {string[]} tagFilters      The tag filters
-     * @argument {string} tags              The tags to test
+     * 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.
      */
-    var matchesSelectedTags = function (tagFilters, tags) {
-        var selectedTags = [];
-        $.each(tagFilters, function (_, filter) {
-            selectedTags.push(filter);
-        });
-
-        // normalize the tags
-        var normalizedTags = tags.toLowerCase();
-
-        var matches = true;
-        $.each(selectedTags, function (i, selectedTag) {
-            if (normalizedTags.indexOf(selectedTag) === -1) {
-                matches = false;
-                return false;
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'Slick',
+                  'nf.Client',
+                  'nf.Shell',
+                  'nf.ProcessGroupConfiguration',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler',
+                  'nf.Dialog',
+                  'nf.Common',
+                  'nf.ControllerService',
+                  'nf.ProcessGroup',
+                  'nf.PolicyManagement',
+                  'nf.ComponentState',
+                  'nf.ng.Bridge'],
+              function ($, d3, Slick, nfClient, nfShell, nfProcessGroupConfiguration, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon, nfControllerService, nfProcessGroup, nfPolicyManagement, nfComponentState, nfNgBridge) {
+                  return (nf.ControllerServices = factory($, d3, Slick, nfClient, nfShell, nfProcessGroupConfiguration, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon, nfControllerService, nfProcessGroup, nfPolicyManagement, nfComponentState, nfNgBridge));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ControllerServices =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('Slick'),
+                  require('nf.Client'),
+                  require('nf.Shell'),
+                  require('nf.ProcessGroupConfiguration'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Dialog'),
+                  require('nf.Common'),
+                  require('nf.ControllerService'),
+                  require('nf.ProcessGroup'),
+                  require('nf.PolicyManagement'),
+                  require('nf.ComponentState'),
+                  require('nf.ng.Bridge')));
+      } else {
+          nf.ControllerServices = factory(root.$,
+              root.d3,
+              root.Slick,
+              root.nf.Client,
+              root.nf.Shell,
+              root.nf.ProcessGroupConfiguration,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler,
+              root.nf.Dialog,
+              root.nf.Common,
+              root.nf.ControllerService,
+              root.nf.ProcessGroup,
+              root.nf.PolicyManagement,
+              root.nf.ComponentState,
+              root.nf.ng.Bridge);
+      }
+  }(this, function ($, d3, Slick, nfClient, nfShell, nfProcessGroupConfiguration, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon, nfControllerService, nfProcessGroup, nfPolicyManagement, nfComponentState, nfNgBridge) {
+      'use strict';
+    
+        var dblClick = null;
+        var initialized = false;
+    
+        var config = {
+            urls: {
+                api: '../nifi-api',
+                controllerServiceTypes: '../nifi-api/flow/controller-service-types'
             }
-        });
-
-        return matches;
-    };
-
-    /**
-     * Adds the currently selected controller service.
-     *
-     * @param {string} controllerServicesUri
-     * @param {jQuery} serviceTable
-     */
-    var addSelectedControllerService = function (controllerServicesUri, serviceTable) {
-        var selectedServiceType = $('#selected-controller-service-type').text();
-
-        // ensure something was selected
-        if (selectedServiceType === '') {
-            nfDialog.showOkDialog({
-                headerText: 'Controller Service',
-                dialogContent: 'The type of controller service to create must be selected.'
-            });
-        } else {
-            addControllerService(controllerServicesUri, serviceTable, selectedServiceType);
-        }
-    };
-
-    /**
-     * Adds a new controller service of the specified type.
-     *
-     * @param {string} controllerServicesUri
-     * @param {jQuery} serviceTable
-     * @param {string} controllerServiceType
-     */
-    var addControllerService = function (controllerServicesUri, serviceTable, controllerServiceType) {
-        // build the controller service entity
-        var controllerServiceEntity = {
-            'revision': nfClient.getRevision({
-                'revision': {
-                    'version': 0
+        };
+    
+        var gridOptions = {
+            forceFitColumns: true,
+            enableTextSelectionOnCells: true,
+            enableCellNavigation: true,
+            enableColumnReorder: false,
+            autoEdit: false,
+            multiSelect: false,
+            rowHeight: 24
+        };
+    
+        /**
+       * Whether the specified item is selectable.
+       *
+       * @param item controller service type
+       */
+      var isSelectable = function (item) {
+          return nfCommon.isBlank(item.usageRestriction) || nfCommon.canAccessRestrictedComponents();
+      };
+  
+      /**
+         * 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 getControllerServiceTypeFilterText = function () {
+            return $('#controller-service-type-filter').val();
+        };
+    
+        /**
+         * Filters the processor type table.
+         */
+        var applyControllerServiceTypeFilter = function () {
+            // get the dataview
+            var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(controllerServiceTypesGrid)) {
+                var controllerServiceTypesData = controllerServiceTypesGrid.getData();
+    
+                // update the search criteria
+                controllerServiceTypesData.setFilterArgs({
+                    searchString: getControllerServiceTypeFilterText()
+                });
+                controllerServiceTypesData.refresh();
+    
+              // update the buttons to possibly trigger the disabled state
+              $('#new-controller-service-dialog').modal('refreshButtons');
+  
+                // update the selection if possible
+                if (controllerServiceTypesData.getLength() > 0) {
+                    controllerServiceTypesGrid.setSelectedRows([0]);
                 }
-            }),
-            'component': {
-                'type': controllerServiceType
             }
         };
-
-        // add the new controller service
-        var addService = $.ajax({
-            type: 'POST',
-            url: controllerServicesUri,
-            data: JSON.stringify(controllerServiceEntity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).done(function (controllerServiceEntity) {
-            // add the item
-            var controllerServicesGrid = serviceTable.data('gridInstance');
-            var controllerServicesData = controllerServicesGrid.getData();
-            controllerServicesData.addItem(controllerServiceEntity);
-
-            // resort
-            controllerServicesData.reSort();
-            controllerServicesGrid.invalidate();
-
-            // select the new controller service
-            var row = controllerServicesData.getRowById(controllerServiceEntity.id);
-            controllerServicesGrid.setSelectedRows([row]);
-            controllerServicesGrid.scrollRowIntoView(row);
-        }).fail(nfErrorHandler.handleAjaxError);
-
-        // hide the dialog
-        $('#new-controller-service-dialog').modal('hide');
-
-        return addService;
-    };
-
-    /**
-     * Initializes the new controller service dialog.
-     */
-    var initNewControllerServiceDialog = function () {
-        // initialize the processor type table
-        var controllerServiceTypesColumns = [
-            {
-                id: 'type',
-                name: 'Type',
-                field: 'label',
-                formatter: nfCommon.typeFormatter,
-                sortable: false,
-                resizable: true
-            },
-            {
-                id: 'tags',
-                name: 'Tags',
-                field: 'tags',
-                sortable: false,
-                resizable: true
-            }
-        ];
-
-        // initialize the dataview
-        var controllerServiceTypesData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        controllerServiceTypesData.setItems([]);
-        controllerServiceTypesData.setFilterArgs({
-            searchString: getControllerServiceTypeFilterText()
-        });
-        controllerServiceTypesData.setFilter(filterControllerServiceTypes);
-
-        // initialize the grid
-        var controllerServiceTypesGrid = new Slick.Grid('#controller-service-types-table', controllerServiceTypesData, controllerServiceTypesColumns, gridOptions);
-        controllerServiceTypesGrid.setSelectionModel(new Slick.RowSelectionModel());
-        controllerServiceTypesGrid.registerPlugin(new Slick.AutoTooltips());
-        controllerServiceTypesGrid.setSortColumn('type', true);
-        controllerServiceTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) {
-            if ($.isArray(args.rows) && args.rows.length === 1) {
-                var controllerServiceTypeIndex = args.rows[0];
-                var controllerServiceType = controllerServiceTypesGrid.getDataItem(controllerServiceTypeIndex);
-
-                // set the controller service type description
-                if (nfCommon.isDefinedAndNotNull(controllerServiceType)) {
-                    // show the selected controller service
-                    $('#controller-service-description-container').show();
-
-                    if (nfCommon.isBlank(controllerServiceType.description)) {
-                        $('#controller-service-type-description')
-                            .attr('title', '')
-                            .html('<span class="unset">No description specified</span>');
-                    } else {
-                        $('#controller-service-type-description')
-                            .width($('#controller-service-description-container').innerWidth() - 1)
-                            .html(controllerServiceType.description)
-                            .ellipsis();
-                    }
-
-                    // populate the dom
-                    $('#controller-service-type-name').text(controllerServiceType.label).ellipsis();
-                    $('#selected-controller-service-name').text(controllerServiceType.label);
-                    $('#selected-controller-service-type').text(controllerServiceType.type);
-
-                    // refresh the buttons based on the current selection
-                    $('#new-controller-service-dialog').modal('refreshButtons');
+    
+        /**
+         * Hides the selected controller service.
+         */
+        var clearSelectedControllerService = function () {
+            $('#controller-service-type-description').text('');
+            $('#controller-service-type-name').text('');
+            $('#selected-controller-service-name').text('');
+            $('#selected-controller-service-type').text('');
+            $('#controller-service-description-container').hide();
+        };
+    
+        /**
+         * Clears the selected controller service type.
+         */
+        var clearControllerServiceSelection = function () {
+            // clear the selected row
+            clearSelectedControllerService();
+    
+            // clear the active cell the it can be reselected when its included
+            var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
+            controllerServiceTypesGrid.resetActiveCell();
+        };
+    
+        /**
+         * Performs the filtering.
+         *
+         * @param {object} item     The item subject to filtering
+         * @param {object} args     Filter arguments
+         * @returns {Boolean}       Whether or not to include the item
+         */
+        var filterControllerServiceTypes = function (item, args) {
+            // determine if the item matches the filter
+            var matchesFilter = matchesRegex(item, args);
+    
+            // determine if the row matches the selected tags
+            var matchesTags = true;
+            if (matchesFilter) {
+                var tagFilters = $('#controller-service-tag-cloud').tagcloud('getSelectedTags');
+                var hasSelectedTags = tagFilters.length > 0;
+                if (hasSelectedTags) {
+                    matchesTags = matchesSelectedTags(tagFilters, item['tags']);
                 }
             }
-        });
-        controllerServiceTypesGrid.onViewportChanged.subscribe(function (e, args) {
-            nfCommon.cleanUpTooltips($('#controller-service-types-table'), 'div.view-usage-restriction');
-        });
-
-        // wire up the dataview to the grid
-        controllerServiceTypesData.onRowCountChanged.subscribe(function (e, args) {
-            controllerServiceTypesGrid.updateRowCount();
-            controllerServiceTypesGrid.render();
-
-            // update the total number of displayed processors
-            $('#displayed-controller-service-types').text(args.current);
-        });
-        controllerServiceTypesData.onRowsChanged.subscribe(function (e, args) {
-            controllerServiceTypesGrid.invalidateRows(args.rows);
-            controllerServiceTypesGrid.render();
-        });
-        controllerServiceTypesData.syncGridSelection(controllerServiceTypesGrid, true);
-
-        // hold onto an instance of the grid
-        $('#controller-service-types-table').data('gridInstance', controllerServiceTypesGrid).on('mouseenter', 'div.slick-cell', function (e) {
-            var usageRestriction = $(this).find('div.view-usage-restriction');
-            if (usageRestriction.length && !usageRestriction.data('qtip')) {
-                var rowId = $(this).find('span.row-id').text();
-
-                // get the status item
-                var item = controllerServiceTypesData.getItemById(rowId);
-
-                // show the tooltip
-                if (nfCommon.isDefinedAndNotNull(item.usageRestriction)) {
-                    usageRestriction.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                        content: item.usageRestriction,
-                        position: {
-                            container: $('#summary'),
-                            at: 'bottom right',
-                            my: 'top left',
-                            adjust: {
-                                x: 4,
-                                y: 4
-                            }
-                        }
-                    }));
-                }
+    
+            // determine if this row should be visible
+            var matches = matchesFilter && matchesTags;
+    
+            // if this row is currently selected and its being filtered
+            if (matches === false && $('#selected-controller-service-type').text() === item['type']) {
+                clearControllerServiceSelection();
             }
-        });
-
-        // load the available controller services
-        $.ajax({
-            type: 'GET',
-            url: config.urls.controllerServiceTypes,
-            dataType: 'json'
-        }).done(function (response) {
-            var id = 0;
-            var tags = [];
-
-            // begin the update
-            controllerServiceTypesData.beginUpdate();
-
-            // go through each controller service type
-            $.each(response.controllerServiceTypes, function (i, documentedType) {
-                // add the documented type
-                controllerServiceTypesData.addItem({
-                    id: id++,
-                    label: nfCommon.substringAfterLast(documentedType.type, '.'),
-                    type: documentedType.type,
-                    description: nfCommon.escapeHtml(documentedType.description),
-                    usageRestriction: nfCommon.escapeHtml(documentedType.usageRestriction),
-                    tags: documentedType.tags.join(', ')
-                });
-
-                // count the frequency of each tag for this type
-                $.each(documentedType.tags, function (i, tag) {
-                    tags.push(tag.toLowerCase());
-                });
-            });
-
-            // end the udpate
-            controllerServiceTypesData.endUpdate();
-
-            // set the total number of processors
-            $('#total-controller-service-types, #displayed-controller-service-types').text(response.controllerServiceTypes.length);
-
-            // create the tag cloud
-            $('#controller-service-tag-cloud').tagcloud({
-                tags: tags,
-                select: applyControllerServiceTypeFilter,
-                remove: applyControllerServiceTypeFilter
-            });
-        }).fail(nfErrorHandler.handleAjaxError);
-
-        // initialize the controller service dialog
-        $('#new-controller-service-dialog').modal({
-            headerText: 'Add Controller Service',
-            scrollableContentStyle: 'scrollable',
-            handler: {
-                close: function () {
-                    // clear the selected row
-                    clearSelectedControllerService();
-
-                    // clear any filter strings
-                    $('#controller-service-type-filter').val('');
-
-                    // clear the tagcloud
-                    $('#controller-service-tag-cloud').tagcloud('clearSelectedTags');
-
-                    // reset the filter
-                    applyControllerServiceTypeFilter();
-
-                    // unselect any current selection
-                    var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
-                    controllerServiceTypesGrid.setSelectedRows([]);
-                    controllerServiceTypesGrid.resetActiveCell();
-                },
-                resize: function () {
-                    $('#controller-service-type-description')
-                        .width($('#controller-service-description-container').innerWidth() - 1)
-                        .text($('#controller-service-type-description').attr('title'))
-                        .ellipsis();
-                }
+    
+            return matches;
+        };
+    
+        /**
+         * Determines if the item matches the filter.
+         *
+         * @param {object} item     The item to filter
+         * @param {object} args     The filter criteria
+         * @returns {boolean}       Whether the item matches the filter
+         */
+        var matchesRegex = function (item, args) {
+            if (args.searchString === '') {
+                return true;
             }
-        });
-    };
-
-    /**
-     * Formatter for the name column.
-     *
-     * @param {type} row
-     * @param {type} cell
-     * @param {type} value
-     * @param {type} columnDef
-     * @param {type} dataContext
-     * @returns {String}
-     */
-    var nameFormatter = function (row, cell, value, columnDef, dataContext) {
-        if (!dataContext.permissions.canRead) {
-            return '<span class="blank">' + dataContext.id + '</span>';
-        }
-        
-        return dataContext.component.name;
-    };
-
-    /**
-     * Formatter for the type column.
-     *
-     * @param {type} row
-     * @param {type} cell
-     * @param {type} value
-     * @param {type} columnDef
-     * @param {type} dataContext
-     * @returns {String}
-     */
-    var typeFormatter = function (row, cell, value, columnDef, dataContext) {
-        if (!dataContext.permissions.canRead) {
-            return '';
-        }
-        
-        return nfCommon.substringAfterLast(dataContext.component.type, '.');
-    };
-
-    /**
-     * Formatter for the name column.
-     *
-     * @param {type} row
-     * @param {type} cell
-     * @param {type} value
-     * @param {type} columnDef
-     * @param {type} dataContext
-     * @returns {String}
-     */
-    var groupIdFormatter = function (row, cell, value, columnDef, dataContext) {
-        if (!dataContext.permissions.canRead) {
-            return '';
-        }
-
-        if (nfCommon.isDefinedAndNotNull(dataContext.component.parentGroupId)) {
-            // see if this listing is based off a selected process group
-            var selection = nfCanvasUtils.getSelection();
-            if (selection.empty() === false) {
-                var selectedData = selection.datum();
-                if (selectedData.id === dataContext.component.parentGroupId) {
-                    if (selectedData.permissions.canRead) {
-                        return selectedData.component.name;
-                    } else {
-                        return selectedData.id;
-                    }
-                }
+    
+            try {
+                // perform the row filtering
+                var filterExp = new RegExp(args.searchString, 'i');
+            } catch (e) {
+                // invalid regex
+                return false;
             }
-
-            // there's either no selection or the service is defined in an ancestor component
-            var breadcrumbs = nfNgBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs();
-
-            var processGroupLabel = dataContext.component.parentGroupId;
-            $.each(breadcrumbs, function (_, breadcrumbEntity) {
-                if (breadcrumbEntity.id === dataContext.component.parentGroupId) {
-                    processGroupLabel = breadcrumbEntity.label;
-                    return false;
-                }
+    
+            // determine if the item matches the filter
+            var matchesLabel = item['label'].search(filterExp) >= 0;
+            var matchesTags = item['tags'].search(filterExp) >= 0;
+            return matchesLabel || matchesTags;
+        };
+    
+        /**
+         * Determines if the specified tags match all the tags selected by the user.
+         *
+         * @argument {string[]} tagFilters      The tag filters
+         * @argument {string} tags              The tags to test
+         */
+        var matchesSelectedTags = function (tagFilters, tags) {
+            var selectedTags = [];
+            $.each(tagFilters, function (_, filter) {
+                selectedTags.push(filter);
             });
-
-            return processGroupLabel;
-        } else {
-            return 'Controller';
-        }
-    };
-
-    /**
-     * Determines if the user has write permissions for the parent of the specified controller service.
-     *
-     * @param dataContext
-     * @returns {boolean} whether the user has write permissions for the parent of the controller service
-     */
-    var canWriteControllerServiceParent = function (dataContext) {
-        // we know the process group for this controller service is part of the current breadcrumb trail
-        var canWriteProcessGroupParent = function (processGroupId) {
-            // see if this listing is based off a selected process group
-            var selection = nfCanvasUtils.getSelection();
-            if (selection.empty() === false) {
-                var datum = selection.datum();
-                if (datum.id === processGroupId) {
-                    return datum.permissions.canWrite;
-                }
-            }
-
-            // there's either no selection or the service is defined in an ancestor component
-            var breadcrumbs = nfNgBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs();
-
-            var isAuthorized = false;
-            $.each(breadcrumbs, function (_, breadcrumbEntity) {
-                if (breadcrumbEntity.id === processGroupId) {
-                    isAuthorized = breadcrumbEntity.permissions.canWrite;
+    
+            // normalize the tags
+            var normalizedTags = tags.toLowerCase();
+    
+            var matches = true;
+            $.each(selectedTags, function (i, selectedTag) {
+                if (normalizedTags.indexOf(selectedTag) === -1) {
+                    matches = false;
                     return false;
                 }
             });
-
-            return isAuthorized;
+    
+            return matches;
         };
-
-        if (nfCommon.isDefinedAndNotNull(dataContext.component.parentGroupId)) {
-            return canWriteProcessGroupParent(dataContext.component.parentGroupId);
-        } else {
-            return nfCommon.canModifyController();
-        }
-    };
-
-    /**
-     * 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 (sortDetails.columnId === 'moreDetails') {
-                    var aBulletins = 0;
-                    if (!nfCommon.isEmpty(a.bulletins)) {
-                        aBulletins = a.bulletins.length;
-                    }
-                    var bBulletins = 0;
-                    if (!nfCommon.isEmpty(b.bulletins)) {
-                        bBulletins = b.bulletins.length;
-                    }
-                    return aBulletins - bBulletins;
-                } else if (sortDetails.columnId === 'type') {
-                    var aType = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(a.component[sortDetails.columnId], '.') : '';
-                    var bType = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(b.component[sortDetails.columnId], '.') : '';
-                    return aType === bType ? 0 : aType > bType ? 1 : -1;
-                } else if (sortDetails.columnId === 'state') {
-                    var aState = 'Invalid';
-                    if (nfCommon.isEmpty(a.component.validationErrors)) {
-                        aState = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-                    }
-                    var bState = 'Invalid';
-                    if (nfCommon.isEmpty(b.component.validationErrors)) {
-                        bState = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
-                    }
-                    return aState === bState ? 0 : aState > bState ? 1 : -1;
-                } else {
-                    var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-                    var bString = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
-                    return aString === bString ? 0 : aString > bString ? 1 : -1;
-                }
+    
+        /**
+         * Adds the currently selected controller service.
+         *
+         * @param {string} controllerServicesUri
+         * @param {jQuery} serviceTable
+         */
+        var addSelectedControllerService = function (controllerServicesUri, serviceTable) {
+            var selectedServiceType = $('#selected-controller-service-type').text();
+    
+            // ensure something was selected
+            if (selectedServiceType === '') {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-controller-service.ControllerService'),
+                  dialogContent: nf._.msg('nf-controller-service.Message14')
+                });
             } else {
-                if (!a.permissions.canRead && !b.permissions.canRead){
-                    return 0;
+                addControllerService(controllerServicesUri, serviceTable, selectedServiceType);
+            }
+        };
+    
+        /**
+         * Adds a new controller service of the specified type.
+         *
+         * @param {string} controllerServicesUri
+         * @param {jQuery} serviceTable
+         * @param {string} controllerServiceType
+         */
+        var addControllerService = function (controllerServicesUri, serviceTable, controllerServiceType) {
+            // build the controller service entity
+            var controllerServiceEntity = {
+              'revision': nfClient.getRevision({
+                    'revision': {
+                        'version': 0
+                    }
+                }),
+                'component': {
+                    'type': controllerServiceType
                 }
-                if(a.permissions.canRead){
-                    return 1;
-                } else {
-                    return -1;
+            };
+    
+            // add the new controller service
+            var addService = $.ajax({
+                type: 'POST',
+                url: controllerServicesUri,
+                data: JSON.stringify(controllerServiceEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (controllerServiceEntity) {
+                // add the item
+                var controllerServicesGrid = serviceTable.data('gridInstance');
+                var controllerServicesData = controllerServicesGrid.getData();
+                controllerServicesData.addItem(controllerServiceEntity);
+    
+                // resort
+                controllerServicesData.reSort();
+                controllerServicesGrid.invalidate();
+    
+                // select the new controller service
+                var row = controllerServicesData.getRowById(controllerServiceEntity.id);
+                controllerServicesGrid.setSelectedRows([row]);
+                controllerServicesGrid.scrollRowIntoView(row);
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // hide the dialog
+            $('#new-controller-service-dialog').modal('hide');
+    
+            return addService;
+        };
+    
+        /**
+         * Initializes the new controller service dialog.
+         */
+        var initNewControllerServiceDialog = function () {
+            // initialize the processor type table
+            var controllerServiceTypesColumns = [
+              {
+                  id: 'type',
+                  name: nf._.msg('nf-controller-services.Type'),
+                  field: 'label',
+                  formatter: nfCommon.typeFormatter,
+                  sortable: false,
+                  resizable: true
+              },
+              {
+                  id: 'tags',
+                  name: nf._.msg('nf-controller-services.Tags'),
+                  field: 'tags',
+                  sortable: false,
+                  resizable: true
+              }
+            ];
+    
+            // initialize the dataview
+            var controllerServiceTypesData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            controllerServiceTypesData.setItems([]);
+            controllerServiceTypesData.setFilterArgs({
+                searchString: getControllerServiceTypeFilterText()
+            });
+            controllerServiceTypesData.setFilter(filterControllerServiceTypes);
+    
+            // initialize the grid
+            var controllerServiceTypesGrid = new Slick.Grid('#controller-service-types-table', controllerServiceTypesData, controllerServiceTypesColumns, gridOptions);
+            controllerServiceTypesGrid.setSelectionModel(new Slick.RowSelectionModel());
+            controllerServiceTypesGrid.registerPlugin(new Slick.AutoTooltips());
+            controllerServiceTypesGrid.setSortColumn('type', true);
+            controllerServiceTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) {
+                if ($.isArray(args.rows) && args.rows.length === 1) {
+                    var controllerServiceTypeIndex = args.rows[0];
+                    var controllerServiceType = controllerServiceTypesGrid.getDataItem(controllerServiceTypeIndex);
+    
+                    // set the controller service type description
+                  if (nfCommon.isDefinedAndNotNull(controllerServiceType)) {
+                	// show the selected controller service
+                      $('#controller-service-description-container').show();
+
+                      if (nfCommon.isBlank(controllerServiceType.description)) {
+                          $('#controller-service-type-description')
+                              .attr('title', '')
+                              .html('<span class="unset">No description specified</span>');
+                      } else {
+                          $('#controller-service-type-description')
+                              .width($('#controller-service-description-container').innerWidth() - 1)
+                              .html(controllerServiceType.description)
+                              .ellipsis();
+                      }
+  
+                      // populate the dom
+                      $('#controller-service-type-name').text(controllerServiceType.label).ellipsis();
+                      $('#selected-controller-service-name').text(controllerServiceType.label);
+                      $('#selected-controller-service-type').text(controllerServiceType.type);
+  
+                      // refresh the buttons based on the current selection
+                      $('#new-controller-service-dialog').modal('refreshButtons');
+                  }
+              }
+          });
+          controllerServiceTypesGrid.onViewportChanged.subscribe(function (e, args) {
+              nfCommon.cleanUpTooltips($('#controller-service-types-table'), 'div.view-usage-restriction');
+            });
+    
+            // wire up the dataview to the grid
+            controllerServiceTypesData.onRowCountChanged.subscribe(function (e, args) {
+                controllerServiceTypesGrid.updateRowCount();
+                controllerServiceTypesGrid.render();
+    
+                // update the total number of displayed processors
+                $('#displayed-controller-service-types').text(args.current);
+            });
+            controllerServiceTypesData.onRowsChanged.subscribe(function (e, args) {
+                controllerServiceTypesGrid.invalidateRows(args.rows);
+                controllerServiceTypesGrid.render();
+            });
+            controllerServiceTypesData.syncGridSelection(controllerServiceTypesGrid, true);
+    
+            // hold onto an instance of the grid
+          $('#controller-service-types-table').data('gridInstance', controllerServiceTypesGrid).on('mouseenter', 'div.slick-cell', function (e) {
+              var usageRestriction = $(this).find('div.view-usage-restriction');
+              if (usageRestriction.length && !usageRestriction.data('qtip')) {
+                  var rowId = $(this).find('span.row-id').text();
+  
+                  // get the status item
+                  var item = controllerServiceTypesData.getItemById(rowId);
+  
+                  // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(item.usageRestriction)) {
+                      usageRestriction.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                          content: item.usageRestriction,
+                          position: {
+                              container: $('#summary'),
+                              at: 'bottom right',
+                              my: 'top left',
+                              adjust: {
+                                  x: 4,
+                                  y: 4
+                              }
+                          }
+                      }));
+                  }
+              }
+          });
+    
+            // load the available controller services
+            $.ajax({
+                type: 'GET',
+                url: config.urls.controllerServiceTypes,
+                dataType: 'json'
+            }).done(function (response) {
+                var id = 0;
+                var tags = [];
+    
+                // begin the update
+                controllerServiceTypesData.beginUpdate();
+    
+                // go through each controller service type
+                $.each(response.controllerServiceTypes, function (i, documentedType) {
+                    // add the documented type
+                    controllerServiceTypesData.addItem({
+                        id: id++,
+                      label: nfCommon.substringAfterLast(documentedType.type, '.'),
+                        type: documentedType.type,
+                      description: nfCommon.escapeHtml(documentedType.description),
+                      usageRestriction: nfCommon.escapeHtml(documentedType.usageRestriction),
+                        tags: documentedType.tags.join(', ')
+                    });
+    
+                    // count the frequency of each tag for this type
+                    $.each(documentedType.tags, function (i, tag) {
+                        tags.push(tag.toLowerCase());
+                    });
+                });
+    
+                // end the udpate
+                controllerServiceTypesData.endUpdate();
+    
+                // set the total number of processors
+                $('#total-controller-service-types, #displayed-controller-service-types').text(response.controllerServiceTypes.length);
+    
+                // create the tag cloud
+                $('#controller-service-tag-cloud').tagcloud({
+                    tags: tags,
+                    select: applyControllerServiceTypeFilter,
+                    remove: applyControllerServiceTypeFilter
+                });
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // initialize the controller service dialog
+            $('#new-controller-service-dialog').modal({
+              headerText: nf._.msg('nf-controller-service.AddControllerService'),
+                scrollableContentStyle: 'scrollable',
+                handler: {
+                    close: function () {
+                        // clear the selected row
+                        clearSelectedControllerService();
+    
+                        // clear any filter strings
+                        $('#controller-service-type-filter').val('');
+    
+                        // clear the tagcloud
+                        $('#controller-service-tag-cloud').tagcloud('clearSelectedTags');
+    
+                        // reset the filter
+                        applyControllerServiceTypeFilter();
+    
+                        // unselect any current selection
+                        var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
+                        controllerServiceTypesGrid.setSelectedRows([]);
+                        controllerServiceTypesGrid.resetActiveCell();
+                  },
+                  resize: function () {
+                      $('#controller-service-type-description')
+                          .width($('#controller-service-description-container').innerWidth() - 1)
+                          .text($('#controller-service-type-description').attr('title'))
+                          .ellipsis();
+                    }
                 }
+            });
+        };
+    
+        /**
+         * Formatter for the name column.
+         *
+         * @param {type} row
+         * @param {type} cell
+         * @param {type} value
+         * @param {type} columnDef
+         * @param {type} dataContext
+         * @returns {String}
+         */
+        var nameFormatter = function (row, cell, value, columnDef, dataContext) {
+            if (!dataContext.permissions.canRead) {
+                return '<span class="blank">' + dataContext.id + '</span>';
             }
+            
+            return dataContext.component.name;
         };
-
-        // perform the sort
-        data.sort(comparer, sortDetails.sortAsc);
-    };
-
-    /**
-     * Initializes the controller services tab.
-     * 
-     * @param {jQuery} serviceTable
-     * @param {function} showSettings
-     */
-    var initControllerServices = function (serviceTable, showSettings) {
-        // more details formatter
-        var moreControllerServiceDetails = function (row, cell, value, columnDef, dataContext) {
+    
+        /**
+         * Formatter for the type column.
+         *
+         * @param {type} row
+         * @param {type} cell
+         * @param {type} value
+         * @param {type} columnDef
+         * @param {type} dataContext
+         * @returns {String}
+         */
+        var typeFormatter = function (row, cell, value, columnDef, dataContext) {
             if (!dataContext.permissions.canRead) {
                 return '';
             }
             
-            var markup = '<div class="pointer view-controller-service fa fa-info-circle" title="View Details" style="margin-top: 5px; margin-right: 3px;" ></div>';
-
-            // always include a button to view the usage
-            markup += '<div title="Usage" class="pointer controller-service-usage fa fa-book" style="margin-top: 5px; margin-right: 3px;" ></div>';
-
-            var hasErrors = !nfCommon.isEmpty(dataContext.component.validationErrors);
-            var hasBulletins = !nfCommon.isEmpty(dataContext.bulletins);
-
-            if (hasErrors) {
-                markup += '<div class="pointer has-errors fa fa-warning" style="margin-top: 4px; margin-right: 3px; float: left;" ></div>';
-            }
-
-            if (hasBulletins) {
-                markup += '<div class="has-bulletins fa fa-sticky-note-o" style="margin-top: 5px; margin-right: 3px; float: left;"></div>';
-            }
-
-            if (hasErrors || hasBulletins) {
-                markup += '<span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
-            }
-
-            return markup;
+          return nfCommon.substringAfterLast(dataContext.component.type, '.');
         };
-
-        var controllerServiceStateFormatter = function (row, cell, value, columnDef, dataContext) {
+    
+        /**
+         * Formatter for the name column.
+         *
+         * @param {type} row
+         * @param {type} cell
+         * @param {type} value
+         * @param {type} columnDef
+         * @param {type} dataContext
+         * @returns {String}
+         */
+        var groupIdFormatter = function (row, cell, value, columnDef, dataContext) {
             if (!dataContext.permissions.canRead) {
                 return '';
             }
-            
-            // determine the appropriate label
-            var icon = '', label = '';
-            if (!nfCommon.isEmpty(dataContext.component.validationErrors)) {
-                icon = 'invalid fa fa-warning';
-                label = 'Invalid';
-            } else {
-                if (dataContext.component.state === 'DISABLED') {
-                    icon = 'disabled icon icon-enable-false"';
-                    label = 'Disabled';
-                } else if (dataContext.component.state === 'DISABLING') {
-                    icon = 'disabled icon icon-enable-false"';
-                    label = 'Disabling';
-                } else if (dataContext.component.state === 'ENABLED') {
-                    icon = 'enabled fa fa-flash';
-                    label = 'Enabled';
-                } else if (dataContext.component.state === 'ENABLING') {
-                    icon = 'enabled fa fa-flash';
-                    label = 'Enabling';
-                }
+    
+          if (nfCommon.isDefinedAndNotNull(dataContext.component.parentGroupId)) {
+              // see if this listing is based off a selected process group
+              var selection = nfCanvasUtils.getSelection();
+              if (selection.empty() === false) {
+                  var selectedData = selection.datum();
+                  if (selectedData.id === dataContext.component.parentGroupId) {
+                      if (selectedData.permissions.canRead) {
+                          return selectedData.component.name;
+                      } else {
+                          return selectedData.id;
+                      }
+                  }
+              }
+  
+              // there's either no selection or the service is defined in an ancestor component
+              var breadcrumbs = nfNgBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs();
+  
+              var processGroupLabel = dataContext.component.parentGroupId;
+              $.each(breadcrumbs, function (_, breadcrumbEntity) {
+                  if (breadcrumbEntity.id === dataContext.component.parentGroupId) {
+                      processGroupLabel = breadcrumbEntity.label;
+                      return false;
+                  }
+              });
+  
+              return processGroupLabel;
+          } else {
+              return 'Controller';
+          }
+      };
+  
+      /**
+       * Determines if the user has write permissions for the parent of the specified controller service.
+       *
+       * @param dataContext
+       * @returns {boolean} whether the user has write permissions for the parent of the controller service
+       */
+      var canWriteControllerServiceParent = function (dataContext) {
+          // we know the process group for this controller service is part of the current breadcrumb trail
+          var canWriteProcessGroupParent = function (processGroupId) {
+              // see if this listing is based off a selected process group
+              var selection = nfCanvasUtils.getSelection();
+              if (selection.empty() === false) {
+                  var datum = selection.datum();
+                  if (datum.id === processGroupId) {
+                      return datum.permissions.canWrite;
+                  }
+              }
+  
+              // there's either no selection or the service is defined in an ancestor component
+              var breadcrumbs = nfNgBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs();
+  
+              var isAuthorized = false;
+              $.each(breadcrumbs, function (_, breadcrumbEntity) {
+                  if (breadcrumbEntity.id === processGroupId) {
+                      isAuthorized = breadcrumbEntity.permissions.canWrite;
+                      return false;
+                  }
+              });
+  
+              return isAuthorized;
+          };
+  
+          if (nfCommon.isDefinedAndNotNull(dataContext.component.parentGroupId)) {
+              return canWriteProcessGroupParent(dataContext.component.parentGroupId);
+          } else {
+              return nfCommon.canModifyController();
             }
-
-            // format the markup
-            var formattedValue = '<div layout="row"><div class="' + icon + '" style="margin-top: 5px;"></div>';
-            return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + label + '</div></div>';
         };
-
-        var controllerServiceActionFormatter = function (row, cell, value, columnDef, dataContext) {
-            var markup = '';
-
-            if (dataContext.permissions.canRead && dataContext.permissions.canWrite) {
-                var definedByCurrentGroup = false;
-                if (nfCommon.isDefinedAndNotNull(dataContext.component.parentGroupId)) {
-                    // when opened in the process group context, the current group is store in #process-group-id
-                    if (dataContext.component.parentGroupId === $('#process-group-id').text()) {
-                        definedByCurrentGroup = true;
-                    }
-                } else {
-                    // when there is no parent group, the service is defined at the controller level and should be editable
-                    definedByCurrentGroup = true;
-                }
-
-                if (definedByCurrentGroup === true) {
-                    if (dataContext.component.state === 'ENABLED' || dataContext.component.state === 'ENABLING') {
-                        markup += '<div class="pointer disable-controller-service icon icon-enable-false" title="Disable" style="margin-top: 2px; margin-right: 3px;" ></div>';
-                    } else if (dataContext.component.state === 'DISABLED') {
-                        markup += '<div class="pointer edit-controller-service fa fa-pencil" title="Edit" style="margin-top: 2px; margin-right: 3px;" ></div>';
-
-                        // if there are no validation errors allow enabling
-                        if (nfCommon.isEmpty(dataContext.component.validationErrors)) {
-                            markup += '<div class="pointer enable-controller-service fa fa-flash" title="Enable" style="margin-top: 2px; margin-right: 3px;"></div>';
+    
+        /**
+         * 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 (sortDetails.columnId === 'moreDetails') {
+                        var aBulletins = 0;
+                      if (!nfCommon.isEmpty(a.bulletins)) {
+                            aBulletins = a.bulletins.length;
+                        }
+                        var bBulletins = 0;
+                      if (!nfCommon.isEmpty(b.bulletins)) {
+                            bBulletins = b.bulletins.length;
+                        }
+                        return aBulletins - bBulletins;
+                    } else if (sortDetails.columnId === 'type') {
+                      var aType = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(a.component[sortDetails.columnId], '.') : '';
+                      var bType = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(b.component[sortDetails.columnId], '.') : '';
+                        return aType === bType ? 0 : aType > bType ? 1 : -1;
+                    } else if (sortDetails.columnId === 'state') {
+                        var aState = 'Invalid';
+                      if (nfCommon.isEmpty(a.component.validationErrors)) {
+                          aState = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                        }
+                        var bState = 'Invalid';
+                      if (nfCommon.isEmpty(b.component.validationErrors)) {
+                          bState = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
                         }
+                        return aState === bState ? 0 : aState > bState ? 1 : -1;
+                    } else {
+                      var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                      var bString = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                        return aString === bString ? 0 : aString > bString ? 1 : -1;
                     }
-
-                    if (dataContext.component.persistsState === true) {
-                        markup += '<div title="View State" class="pointer view-state-controller-service fa fa-tasks" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                } else {
+                    if (!a.permissions.canRead && !b.permissions.canRead){
+                        return 0;
                     }
-
-                    if (canWriteControllerServiceParent(dataContext)) {
-                        markup += '<div class="pointer delete-controller-service fa fa-trash" title="Remove" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                    if(a.permissions.canRead){
+                        return 1;
+                    } else {
+                        return -1;
                     }
-                } else {
-                    markup += '<div class="pointer go-to-controller-service fa fa-long-arrow-right" title="Go To" style="margin-top: 2px; margin-right: 3px;" ></div>';
                 }
-            }
-
-            // allow policy configuration conditionally
-            if (nfCanvasUtils.isConfigurableAuthorizer() && nfCommon.canAccessTenants()) {
-                markup += '<div title="Access Policies" class="pointer edit-access-policies fa fa-key" style="margin-top: 2px;"></div>';
-            }
-
-            return markup;
+            };
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
         };
-
-        // define the column model for the controller services table
-        var controllerServicesColumns = [
-            {
-                id: 'moreDetails',
-                name: '&nbsp;',
-                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: 'Scope',
-                formatter: groupIdFormatter,
-                sortable: true,
-                resizeable: true
-            }
-        ];
-
-        // action column should always be last
-        controllerServicesColumns.push({id: 'actions', name: '&nbsp;', resizable: false, formatter: controllerServiceActionFormatter, sortable: false, width: 90, maxWidth: 90});
-
-        // initialize the dataview
-        var controllerServicesData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        controllerServicesData.setItems([]);
-
-        // initialize the sort
-        sort({
-            columnId: 'name',
-            sortAsc: true
-        }, controllerServicesData);
-
-        // initialize the grid
-        var controllerServicesGrid = new Slick.Grid(serviceTable, controllerServicesData, controllerServicesColumns, gridOptions);
-        controllerServicesGrid.setSelectionModel(new Slick.RowSelectionModel());
-        controllerServicesGrid.registerPlugin(new Slick.AutoTooltips());
-        controllerServicesGrid.setSortColumn('name', true);
-        controllerServicesGrid.onSort.subscribe(function (e, args) {
-            sort({
-                columnId: args.sortCol.id,
-                sortAsc: args.sortAsc
-            }, controllerServicesData);
-        });
-
-        // configure a click listener
-        controllerServicesGrid.onClick.subscribe(function (e, args) {
-            var target = $(e.target);
-
-            // get the service at this row
-            var controllerServiceEntity = controllerServicesData.getItem(args.row);
-
-            // determine the desired action
-            if (controllerServicesGrid.getColumns()[args.cell].id === 'actions') {
-                if (target.hasClass('edit-controller-service')) {
-                    nfControllerService.showConfiguration(serviceTable, controllerServiceEntity);
-                } else if (target.hasClass('enable-controller-service')) {
-                    nfControllerService.enable(serviceTable, controllerServiceEntity);
-                } else if (target.hasClass('disable-controller-service')) {
-                    nfControllerService.disable(serviceTable, controllerServiceEntity);
-                } else if (target.hasClass('delete-controller-service')) {
-                    nfControllerService.promptToDeleteController(serviceTable, controllerServiceEntity);
-                } else if (target.hasClass('view-state-controller-service')) {
-                    nfComponentState.showState(controllerServiceEntity, controllerServiceEntity.state === 'DISABLED');
-                } else if (target.hasClass('edit-access-policies')) {
-                    // show the policies for this service
-                    nfPolicyManagement.showControllerServicePolicy(controllerServiceEntity);
-
-                    // close the settings dialog
-                    $('#shell-close-button').click();
-                } else if (target.hasClass('go-to-controller-service')) {
-                    // load the parent group of the selected service
-                    nfProcessGroup.enterGroup(controllerServiceEntity.component.parentGroupId);
-
-                    // open/select the specific service
-                    $.Deferred(function (deferred) {
-                        if ($('#process-group-configuration').is(':visible')) {
-                            nfProcessGroupConfiguration.loadConfiguration(controllerServiceEntity.component.parentGroupId).done(function () {
-                                deferred.resolve();
-                            });
-                        } else {
-                            nfProcessGroupConfiguration.showConfiguration(controllerServiceEntity.component.parentGroupId).done(function () {
-                                deferred.resolve();
-                            });
+    
+        /**
+         * Initializes the controller services tab.
+         * 
+         * @param {jQuery} serviceTable
+       * @param {function} showSettings
+         */
+      var initControllerServices = function (serviceTable, showSettings) {
+            // more details formatter
+            var moreControllerServiceDetails = function (row, cell, value, columnDef, dataContext) {
+                if (!dataContext.permissions.canRead) {
+                    return '';
+                }
+                
+              var markup = '<div class="pointer view-controller-service fa fa-info-circle" title="'+nf._.msg('nf-controller-services.viewDtails')+'" style="margin-top: 5px; margin-right: 3px;" ></div>';
+    
+                // always include a button to view the usage
+              markup += '<div title="'+nf._.msg('nf-controller-services.usage')+'" class="pointer controller-service-usage fa fa-book" style="margin-top: 5px; margin-right: 3px;" ></div>';
+    
+              var hasErrors = !nfCommon.isEmpty(dataContext.component.validationErrors);
+              var hasBulletins = !nfCommon.isEmpty(dataContext.bulletins);
+    
+                if (hasErrors) {
+                    markup += '<div class="pointer has-errors fa fa-warning" style="margin-top: 4px; margin-right: 3px; float: left;" ></div>';
+                }
+    
+                if (hasBulletins) {
+                    markup += '<div class="has-bulletins fa fa-sticky-note-o" style="margin-top: 5px; margin-right: 3px; float: left;"></div>';
+                }
+    
+                if (hasErrors || hasBulletins) {
+                  markup += '<span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
+                }
+    
+                return markup;
+            };
+    
+            var controllerServiceStateFormatter = function (row, cell, value, columnDef, dataContext) {
+                if (!dataContext.permissions.canRead) {
+                    return '';
+                }
+                
+                // determine the appropriate label
+                var icon = '', label = '';
+              if (!nfCommon.isEmpty(dataContext.component.validationErrors)) {
+                    icon = 'invalid fa fa-warning';
+                  label = nf._.msg('nf-controller-services.Invalid');
+                } else {
+                    if (dataContext.component.state === 'DISABLED') {
+                        icon = 'disabled icon icon-enable-false"';
+                      label = nf._.msg('nf-controller-services.Disabled');
+                    } else if (dataContext.component.state === 'DISABLING') {
+                        icon = 'disabled icon icon-enable-false"';
+                      label = nf._.msg('nf-controller-services.Disabling');
+                    } else if (dataContext.component.state === 'ENABLED') {
+                        icon = 'enabled fa fa-flash';
+                      label = nf._.msg('nf-controller-services.Enabled');
+                    } else if (dataContext.component.state === 'ENABLING') {
+                        icon = 'enabled fa fa-flash';
+                      label = nf._.msg('nf-controller-services.Enabling');
+                    }
+                }
+    
+                // format the markup
+                var formattedValue = '<div layout="row"><div class="' + icon + '" style="margin-top: 5px;"></div>';
+                return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + label + '</div></div>';
+            };
+    
+            var controllerServiceActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+    
+                if (dataContext.permissions.canRead && dataContext.permissions.canWrite) {
+                  var definedByCurrentGroup = false;
+                  if (nfCommon.isDefinedAndNotNull(dataContext.component.parentGroupId)) {
+                      // when opened in the process group context, the current group is store in #process-group-id
+                      if (dataContext.component.parentGroupId === $('#process-group-id').text()) {
+                          definedByCurrentGroup = true;
+                      }
+                  } else {
+                      // when there is no parent group, the service is defined at the controller level and should be editable
+                      definedByCurrentGroup = true;
+                  }
+  
+                  if (definedByCurrentGroup === true) {
+                        if (dataContext.component.state === 'ENABLED' || dataContext.component.state === 'ENABLING') {
+                      markup += '<div class="pointer disable-controller-service icon icon-enable-false" title="'+nf._.msg('nf-controller-services.disable')+'" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                        } else if (dataContext.component.state === 'DISABLED') {
+                      markup += '<div class="pointer edit-controller-service fa fa-pencil" title="'+nf._.msg('nf-controller-services.edit')+'" style="margin-top: 2px; margin-right: 3px;" ></div>';
+    
+                            // if there are no validation errors allow enabling
+                          if (nfCommon.isEmpty(dataContext.component.validationErrors)) {
+                          markup += '<div class="pointer enable-controller-service fa fa-flash" title="'+nf._.msg('nf-controller-services.enable')+'" style="margin-top: 2px; margin-right: 3px;"></div>';
+                            }
                         }
-                    }).done(function () {
-                        nfProcessGroupConfiguration.selectControllerService(controllerServiceEntity.id);
-                    });
+    
+                        if (dataContext.component.persistsState === true) {
+                          markup += '<div title="View State" class="pointer view-state-controller-service fa fa-tasks" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                        }
+    
+                      if (canWriteControllerServiceParent(dataContext)) {
+                          markup += '<div class="pointer delete-controller-service fa fa-trash" title="Remove" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                      }
+                  } else {
+                      markup += '<div class="pointer go-to-controller-service fa fa-long-arrow-right" title="Go To" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                  }
                 }
-            } else if (controllerServicesGrid.getColumns()[args.cell].id === 'moreDetails') {
-                if (target.hasClass('view-controller-service')) {
-                    nfControllerService.showDetails(serviceTable, controllerServiceEntity);
-                } else if (target.hasClass('controller-service-usage')) {
-                     // close the settings dialog
-                     $('#shell-close-button').click();
-
-                     // open the documentation for this controller service
-                     nfShell.showPage('../nifi-docs/documentation?' + $.param({
-                         select: nfCommon.substringAfterLast(controllerServiceEntity.component.type, '.')
-                     })).done(function() {
-                         if (nfCommon.isDefinedAndNotNull(controllerServiceEntity.component.parentGroupId)) {
-                             var groupId;
-                             var processGroup = nfProcessGroup.get(controllerServiceEntity.component.parentGroupId);
-                             if (nfCommon.isDefinedAndNotNull(processGroup)) {
-                                 groupId = processGroup.id;
+    
+                // allow policy configuration conditionally
+              if (nfCanvasUtils.isConfigurableAuthorizer() && nfCommon.canAccessTenants()) {
+                  markup += '<div title="'+nf._.msg('nf-controller-services.acesspolicies')+'" class="pointer edit-access-policies fa fa-key" style="margin-top: 2px;"></div>';
+                }
+    
+                return markup;
+            };
+    
+            // define the column model for the controller services table
+            var controllerServicesColumns = [
+              {
+                  id: 'moreDetails',
+                  name: '&nbsp;',
+                  resizable: false,
+                  formatter: moreControllerServiceDetails,
+                  sortable: true,
+                  width: 90,
+                  maxWidth: 90,
+                  toolTip: 'Sorts based on presence of bulletins'
+              },
+              {
+                  id: 'name',
+                  name: nf._.msg('nf-controller-services.Name'),
+                  formatter: nameFormatter,
+                  sortable: true,
+                  resizable: true
+              },
+              {
+                  id: 'type',
+                  name: nf._.msg('nf-controller-services.Type'),
+                  formatter: typeFormatter,
+                  sortable: true,
+                  resizable: true
+              },
+              {
+                  id: 'state',
+                  name: nf._.msg('nf-controller-services.State'),
+                  formatter: controllerServiceStateFormatter,
+                  sortable: true,
+                  resizeable: true
+              },
+              {
+                  id: 'parentGroupId',
+                  name: nf._.msg('nf-controller-services.ProcessGroup'),
+                  formatter: groupIdFormatter,
+                  sortable: true,
+                  resizeable: true
+              }
+            ];
+    
+            // action column should always be last
+            controllerServicesColumns.push({id: 'actions', name: '&nbsp;', resizable: false, formatter: controllerServiceActionFormatter, sortable: false, width: 90, maxWidth: 90});
+    
+            // initialize the dataview
+            var controllerServicesData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            controllerServicesData.setItems([]);
+    
+            // initialize the sort
+            sort({
+                columnId: 'name',
+                sortAsc: true
+            }, controllerServicesData);
+    
+            // initialize the grid
+            var controllerServicesGrid = new Slick.Grid(serviceTable, controllerServicesData, controllerServicesColumns, gridOptions);
+            controllerServicesGrid.setSelectionModel(new Slick.RowSelectionModel());
+            controllerServicesGrid.registerPlugin(new Slick.AutoTooltips());
+            controllerServicesGrid.setSortColumn('name', true);
+            controllerServicesGrid.onSort.subscribe(function (e, args) {
+                sort({
+                    columnId: args.sortCol.id,
+                    sortAsc: args.sortAsc
+                }, controllerServicesData);
+            });
+    
+            // configure a click listener
+            controllerServicesGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the service at this row
+                var controllerServiceEntity = controllerServicesData.getItem(args.row);
+    
+                // determine the desired action
+                if (controllerServicesGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('edit-controller-service')) {
+                      nfControllerService.showConfiguration(serviceTable, controllerServiceEntity);
+                    } else if (target.hasClass('enable-controller-service')) {
+                      nfControllerService.enable(serviceTable, controllerServiceEntity);
+                    } else if (target.hasClass('disable-controller-service')) {
+                      nfControllerService.disable(serviceTable, controllerServiceEntity);
+                    } else if (target.hasClass('delete-controller-service')) {
+                      nfControllerService.promptToDeleteController(serviceTable, controllerServiceEntity);
+                    } else if (target.hasClass('view-state-controller-service')) {
+                      nfComponentState.showState(controllerServiceEntity, controllerServiceEntity.state === 'DISABLED');
+                    } else if (target.hasClass('edit-access-policies')) {
+                        // show the policies for this service
+                      nfPolicyManagement.showControllerServicePolicy(controllerServiceEntity);
+    
+                        // close the settings dialog
+                        $('#shell-close-button').click();
+                  } else if (target.hasClass('go-to-controller-service')) {
+                      // load the parent group of the selected service
+                      nfProcessGroup.enterGroup(controllerServiceEntity.component.parentGroupId);
+  
+                      // open/select the specific service
+                      $.Deferred(function (deferred) {
+                          if ($('#process-group-configuration').is(':visible')) {
+                              nfProcessGroupConfiguration.loadConfiguration(controllerServiceEntity.component.parentGroupId).done(function () {
+                                  deferred.resolve();
+                              });
+                          } else {
+                              nfProcessGroupConfiguration.showConfiguration(controllerServiceEntity.component.parentGroupId).done(function () {
+                                  deferred.resolve();
+                              });
+                          }
+                      }).done(function () {
+                          nfProcessGroupConfiguration.selectControllerService(controllerServiceEntity.id);
+                      });
+                    }
+                } else if (controllerServicesGrid.getColumns()[args.cell].id === 'moreDetails') {
+                    if (target.hasClass('view-controller-service')) {
+                      nfControllerService.showDetails(serviceTable, controllerServiceEntity);
+                    } else if (target.hasClass('controller-service-usage')) {
+                         // close the settings dialog
+                         $('#shell-close-button').click();
+    
+                         // open the documentation for this controller service
+                       nfShell.showPage('../nifi-docs/documentation?' + $.param({
+                           select: nfCommon.substringAfterLast(controllerServiceEntity.component.type, '.')
+                         })).done(function() {
+                           if (nfCommon.isDefinedAndNotNull(controllerServiceEntity.component.parentGroupId)) {
+                                 var groupId;
+                               var processGroup = nfProcessGroup.get(controllerServiceEntity.component.parentGroupId);
+                               if (nfCommon.isDefinedAndNotNull(processGroup)) {
+                                     groupId = processGroup.id;
+                                 } else {
+                                   groupId = nfCanvasUtils.getGroupId();
+                                 }
+    
+                                 // reload the corresponding group
+                               nfProcessGroupConfiguration.showConfiguration(groupId);
                              } else {
-                                 groupId = nfCanvasUtils.getGroupId();
+                               showSettings();
                              }
-
-                             // reload the corresponding group
-                             nfProcessGroupConfiguration.showConfiguration(groupId);
-                         } else {
-                             showSettings();
-                         }
-                     });
-                 }
-            }
-        });
-
-        // wire up the dataview to the grid
-        controllerServicesData.onRowCountChanged.subscribe(function (e, args) {
-            controllerServicesGrid.updateRowCount();
-            controllerServicesGrid.render();
-        });
-        controllerServicesData.onRowsChanged.subscribe(function (e, args) {
-            controllerServicesGrid.invalidateRows(args.rows);
-            controllerServicesGrid.render();
-        });
-        controllerServicesData.syncGridSelection(controllerServicesGrid, true);
-
-        // hold onto an instance of the grid
-        serviceTable.data('gridInstance', controllerServicesGrid).on('mouseenter', 'div.slick-cell', function (e) {
-            var errorIcon = $(this).find('div.has-errors');
-            if (errorIcon.length && !errorIcon.data('qtip')) {
-                var serviceId = $(this).find('span.row-id').text();
-
-                // get the service item
-                var controllerServiceEntity = controllerServicesData.getItemById(serviceId);
-
-                // format the errors
-                var tooltip = nfCommon.formatUnorderedList(controllerServiceEntity.component.validationErrors);
-
-                // show the tooltip
-                if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                    errorIcon.qtip($.extend({},
-                        nfCommon.config.tooltipConfig,
-                        {
-                            content: tooltip,
-                            position: {
-                                target: 'mouse',
-                                viewport: $('#shell-container'),
-                                adjust: {
-                                    x: 8,
-                                    y: 8,
-                                    method: 'flipinvert flipinvert'
+                         });
+                     }
+                }
+            });
+    
+            // wire up the dataview to the grid
+            controllerServicesData.onRowCountChanged.subscribe(function (e, args) {
+                controllerServicesGrid.updateRowCount();
+                controllerServicesGrid.render();
+            });
+            controllerServicesData.onRowsChanged.subscribe(function (e, args) {
+                controllerServicesGrid.invalidateRows(args.rows);
+                controllerServicesGrid.render();
+            });
+            controllerServicesData.syncGridSelection(controllerServicesGrid, true);
+    
+            // hold onto an instance of the grid
+            serviceTable.data('gridInstance', controllerServicesGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var errorIcon = $(this).find('div.has-errors');
+                if (errorIcon.length && !errorIcon.data('qtip')) {
+                    var serviceId = $(this).find('span.row-id').text();
+    
+                    // get the service item
+                    var controllerServiceEntity = controllerServicesData.getItemById(serviceId);
+    
+                    // format the errors
+                  var tooltip = nfCommon.formatUnorderedList(controllerServiceEntity.component.validationErrors);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                        errorIcon.qtip($.extend({},
+                          nfCommon.config.tooltipConfig,
+                            {
+                                content: tooltip,
+                                position: {
+                                    target: 'mouse',
+                                  viewport: $('#shell-container'),
+                                    adjust: {
+                                        x: 8,
+                                        y: 8,
+                                        method: 'flipinvert flipinvert'
+                                    }
                                 }
-                            }
-                        }));
+                            }));
+                    }
                 }
-            }
-
-            var bulletinIcon = $(this).find('div.has-bulletins');
-            if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                var taskId = $(this).find('span.row-id').text();
-
-                // get the task item
-                var controllerServiceEntity = controllerServicesData.getItemById(taskId);
-
-                // format the tooltip
-                var bulletins = nfCommon.getFormattedBulletins(controllerServiceEntity.bulletins);
-                var tooltip = nfCommon.formatUnorderedList(bulletins);
-
-                // show the tooltip
-                if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                    bulletinIcon.qtip($.extend({},
-                        nfCommon.config.tooltipConfig,
-                        {
-                            content: tooltip,
-                            position: {
-                                target: 'mouse',
-                                viewport: $('#shell-container'),
-                                adjust: {
-                                    x: 8,
-                                    y: 8,
-                                    method: 'flipinvert flipinvert'
+    
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var taskId = $(this).find('span.row-id').text();
+    
+                    // get the task item
+                    var controllerServiceEntity = controllerServicesData.getItemById(taskId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(controllerServiceEntity.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                        bulletinIcon.qtip($.extend({},
+                          nfCommon.config.tooltipConfig,
+                            {
+                                content: tooltip,
+                                position: {
+                                    target: 'mouse',
+                                  viewport: $('#shell-container'),
+                                    adjust: {
+                                        x: 8,
+                                        y: 8,
+                                        method: 'flipinvert flipinvert'
+                                    }
                                 }
-                            }
-                        }));
+                            }));
+                    }
                 }
-            }
-        });
-    };
-
-    /**
-     * Loads the controller services.
-     *
-     * @param {string} controllerServicesUri
-     * @param {jQuery} serviceTable
-     */
-    var loadControllerServices = function (controllerServicesUri, serviceTable) {
-        return $.ajax({
-            type: 'GET',
-            url: controllerServicesUri,
-            dataType: 'json'
-        }).done(function (response) {
-            var services = [];
-            $.each(response.controllerServices, function (_, service) {
-                services.push($.extend({
-                    bulletins: []
-                }, service));
             });
-
-            nfCommon.cleanUpTooltips(serviceTable, 'div.has-errors');
-            nfCommon.cleanUpTooltips(serviceTable, 'div.has-bulletins');
-
-            var controllerServicesGrid = serviceTable.data('gridInstance');
-            var controllerServicesData = controllerServicesGrid.getData();
-
-            // update the controller services
-            controllerServicesData.setItems(services);
-            controllerServicesData.reSort();
-            controllerServicesGrid.invalidate();
-            controllerServicesGrid.render();
-        });
-    };
-
-    return {
-        /**
-         * Initializes the status page.
-         *
-         * @param {jQuery} serviceTable
-         * @param {function} showSettings
-         */
-        init: function (serviceTable, showSettings) {
-            if (!initialized) {
-                // initialize the new controller service dialog
-                initNewControllerServiceDialog();
-
-                // don't run this again
-                initialized = true;
-            }
-
-            // initialize the controller service table
-            initControllerServices(serviceTable, showSettings);
-        },
-
+        };
+    
         /**
-         * Prompts for a new controller service.
+         * Loads the controller services.
          *
          * @param {string} controllerServicesUri
          * @param {jQuery} serviceTable
          */
-        promptNewControllerService: function (controllerServicesUri, serviceTable) {
-            // get the grid reference
-            var grid = $('#controller-service-types-table').data('gridInstance');
-
-            // update the keyhandler
-            $('#controller-service-type-filter').off('keyup').on('keyup', function (e) {
-                var code = e.keyCode ? e.keyCode : e.which;
-                if (code === $.ui.keyCode.ENTER) {
-                    var selected = grid.getSelectedRows();
-
-                    if (selected.length > 0) {
-                        // grid configured with multi-select = false
-                        var item = grid.getDataItem(selected[0]);
-                        if (isSelectable(item)) {
-                            addSelectedControllerService(controllerServicesUri, serviceTable);
-                        }
-                    }
-                } else {
-                    applyControllerServiceTypeFilter();
-                }
+        var loadControllerServices = function (controllerServicesUri, serviceTable) {
+            return $.ajax({
+                type: 'GET',
+                url: controllerServicesUri,
+                dataType: 'json'
+            }).done(function (response) {
+                var services = [];
+                $.each(response.controllerServices, function (_, service) {
+                    services.push($.extend({
+                        bulletins: []
+                    }, service));
+                });
+    
+              nfCommon.cleanUpTooltips(serviceTable, 'div.has-errors');
+              nfCommon.cleanUpTooltips(serviceTable, 'div.has-bulletins');
+    
+                var controllerServicesGrid = serviceTable.data('gridInstance');
+                var controllerServicesData = controllerServicesGrid.getData();
+    
+                // update the controller services
+                controllerServicesData.setItems(services);
+                controllerServicesData.reSort();
+                controllerServicesGrid.invalidate();
+              controllerServicesGrid.render();
             });
-
-            // update the button model and show the dialog
-            $('#new-controller-service-dialog').modal('setButtonModel', [{
-                buttonText: 'Add',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
-                disabled: function () {
-                    var selected = grid.getSelectedRows();
-
-                    if (selected.length > 0) {
-                        // grid configured with multi-select = false
-                        var item = grid.getDataItem(selected[0]);
-                        return isSelectable(item) === false;
+        };
+    
+        return {
+            /**
+             * Initializes the status page.
+             *
+             * @param {jQuery} serviceTable
+           * @param {function} showSettings
+             */
+          init: function (serviceTable, showSettings) {
+                if (!initialized) {
+                    // initialize the new controller service dialog
+                    initNewControllerServiceDialog();
+    
+                    // don't run this again
+                    initialized = true;
+                }
+    
+                // initialize the controller service table
+              initControllerServices(serviceTable, showSettings);
+            },
+    
+            /**
+             * Prompts for a new controller service.
+             *
+             * @param {string} controllerServicesUri
+             * @param {jQuery} serviceTable
+             */
+            promptNewControllerService: function (controllerServicesUri, serviceTable) {
+              // get the grid reference
+              var grid = $('#controller-service-types-table').data('gridInstance');
+  
+                // update the keyhandler
+                $('#controller-service-type-filter').off('keyup').on('keyup', function (e) {
+                    var code = e.keyCode ? e.keyCode : e.which;
+                    if (code === $.ui.keyCode.ENTER) {
+                      var selected = grid.getSelectedRows();
+  
+                      if (selected.length > 0) {
+                          // grid configured with multi-select = false
+                          var item = grid.getDataItem(selected[0]);
+                          if (isSelectable(item)) {
+                                addSelectedControllerService(controllerServicesUri, serviceTable);
+                          }
+                      }
                     } else {
-                        return grid.getData().getLength() === 0;
+                        applyControllerServiceTypeFilter();
                     }
-                },
-                handler: {
-                    click: function () {
-                        addSelectedControllerService(controllerServicesUri, serviceTable);
+                });
+    
+                // update the button model and show the dialog
+                $('#new-controller-service-dialog').modal('setButtonModel', [{
+                  buttonText: nf._.msg('nf-controller-services.Add'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                  disabled: function () {
+                      var selected = grid.getSelectedRows();
+  
+                      if (selected.length > 0) {
+                          // grid configured with multi-select = false
+                          var item = grid.getDataItem(selected[0]);
+                          return isSelectable(item) === false;
+                      } else {
+                          return grid.getData().getLength() === 0;
+                      }
+                  },
+                    handler: {
+                        click: function () {
+                            addSelectedControllerService(controllerServicesUri, serviceTable);
+                        }
                     }
-                }
-            }, {
-                buttonText: 'Cancel',
-                color: {
-                    base: '#E3E8EB',
-                    hover: '#C7D2D7',
-                    text: '#004849'
-                },
-                handler: {
-                    click: function () {
-                        $(this).modal('hide');
+                }, {
+                  buttonText: nf._.msg('nf-controller-service.Cancel'),
+                    color: {
+                        base: '#E3E8EB',
+                        hover: '#C7D2D7',
+                        text: '#004849'
+                    },
+                    handler: {
+                        click: function () {
+                            $(this).modal('hide');
+                        }
                     }
+                }]).modal('show');
+    
+                var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
+    
+                // remove previous dbl click handler
+                if (dblClick !== null) {
+                    controllerServiceTypesGrid.onDblClick.unsubscribe(dblClick);
                 }
-            }]).modal('show');
-
-            var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
-
-            // remove previous dbl click handler
-            if (dblClick !== null) {
-                controllerServiceTypesGrid.onDblClick.unsubscribe(dblClick);
-            }
-
-            // update the dbl click handler and subsrcibe
-            dblClick = function(e, args) {
-                var controllerServiceType = controllerServiceTypesGrid.getDataItem(args.row);
-
-                if (isSelectable(controllerServiceType)) {
-                    addControllerService(controllerServicesUri, serviceTable, controllerServiceType.type);
+    
+                // update the dbl click handler and subsrcibe
+                dblClick = function(e, args) {
+                    var controllerServiceType = controllerServiceTypesGrid.getDataItem(args.row);
+    
+                  if (isSelectable(controllerServiceType)) {
+                        addControllerService(controllerServicesUri, serviceTable, controllerServiceType.type);
+                  }
+                };
+                controllerServiceTypesGrid.onDblClick.subscribe(dblClick);
+    
+                // reset the canvas size after the dialog is shown
+              if (nfCommon.isDefinedAndNotNull(controllerServiceTypesGrid)) {
+                    controllerServiceTypesGrid.setSelectedRows([0]);
+                    controllerServiceTypesGrid.resizeCanvas();
                 }
-            };
-            controllerServiceTypesGrid.onDblClick.subscribe(dblClick);
-
-            // reset the canvas size after the dialog is shown
-            if (nfCommon.isDefinedAndNotNull(controllerServiceTypesGrid)) {
-                controllerServiceTypesGrid.setSelectedRows([0]);
-                controllerServiceTypesGrid.resizeCanvas();
-            }
-
-            // set the initial focus
-            $('#controller-service-type-filter').focus();
-        },
-
-        /**
-         * Update the size of the grid based on its container's current size.
-         * 
-         * @param {jQuery} serviceTable
-         */
-        resetTableSize: function (serviceTable) {
-            var controllerServicesGrid = serviceTable.data('gridInstance');
-            if (nfCommon.isDefinedAndNotNull(controllerServicesGrid)) {
-                controllerServicesGrid.resizeCanvas();
-            }
-        },
-
-        /**
-         * Loads the settings.
-         *
-         * @param {string} controllerServicesUri
-         * @param {jQuery} serviceTable
-         */
-        loadControllerServices: function (controllerServicesUri, serviceTable) {
-            return loadControllerServices(controllerServicesUri, serviceTable);
-        },
-
-        /**
-         * Sets the controller service and reporting task bulletins in their respective tables.
-         *
-         * @param {jQuery} serviceTable
-         * @param {object} controllerServiceBulletins
-         */
-        setBulletins: function(serviceTable, controllerServiceBulletins) {
-            // controller services
-            var controllerServicesGrid = serviceTable.data('gridInstance');
-            var controllerServicesData = controllerServicesGrid.getData();
-            controllerServicesData.beginUpdate();
-
-            // if there are some bulletins process them
-            if (!nfCommon.isEmpty(controllerServiceBulletins)) {
-                var controllerServiceBulletinsBySource = d3.nest()
-                    .key(function(d) { return d.sourceId; })
-                    .map(controllerServiceBulletins, d3.map);
-
-                controllerServiceBulletinsBySource.forEach(function(sourceId, sourceBulletins) {
-                    var controllerService = controllerServicesData.getItemById(sourceId);
-                    if (nfCommon.isDefinedAndNotNull(controllerService)) {
-                        controllerServicesData.updateItem(sourceId, $.extend(controllerService, {
-                            bulletins: sourceBulletins
+    
+                // set the initial focus
+                $('#controller-service-type-filter').focus();
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             * 
+             * @param {jQuery} serviceTable
+             */
+            resetTableSize: function (serviceTable) {
+                var controllerServicesGrid = serviceTable.data('gridInstance');
+              if (nfCommon.isDefinedAndNotNull(controllerServicesGrid)) {
+                    controllerServicesGrid.resizeCanvas();
+                }
+            },
+    
+            /**
+             * Loads the settings.
+             *
+             * @param {string} controllerServicesUri
+             * @param {jQuery} serviceTable
+             */
+            loadControllerServices: function (controllerServicesUri, serviceTable) {
+                return loadControllerServices(controllerServicesUri, serviceTable);
+            },
+    
+            /**
+             * Sets the controller service and reporting task bulletins in their respective tables.
+             *
+             * @param {jQuery} serviceTable
+             * @param {object} controllerServiceBulletins
+             */
+            setBulletins: function(serviceTable, controllerServiceBulletins) {
+                // controller services
+                var controllerServicesGrid = serviceTable.data('gridInstance');
+                var controllerServicesData = controllerServicesGrid.getData();
+                controllerServicesData.beginUpdate();
+    
+                // if there are some bulletins process them
+              if (!nfCommon.isEmpty(controllerServiceBulletins)) {
+                    var controllerServiceBulletinsBySource = d3.nest()
+                        .key(function(d) { return d.sourceId; })
+                        .map(controllerServiceBulletins, d3.map);
+    
+                    controllerServiceBulletinsBySource.forEach(function(sourceId, sourceBulletins) {
+                        var controllerService = controllerServicesData.getItemById(sourceId);
+                      if (nfCommon.isDefinedAndNotNull(controllerService)) {
+                            controllerServicesData.updateItem(sourceId, $.extend(controllerService, {
+                                bulletins: sourceBulletins
+                            }));
+                        }
+                    });
+                } else {
+                    // if there are no bulletins clear all
+                    var controllerServices = controllerServicesData.getItems();
+                    $.each(controllerServices, function(_, controllerService) {
+                        controllerServicesData.updateItem(controllerService.id, $.extend(controllerService, {
+                            bulletins: []
                         }));
-                    }
-                });
-            } else {
-                // if there are no bulletins clear all
-                var controllerServices = controllerServicesData.getItems();
-                $.each(controllerServices, function(_, controllerService) {
-                    controllerServicesData.updateItem(controllerService.id, $.extend(controllerService, {
-                        bulletins: []
-                    }));
-                });
+                    });
+                }
+                controllerServicesData.endUpdate();
             }
-            controllerServicesData.endUpdate();
-        }
-    };
-}));
\ No newline at end of file
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js
index f54268aa1310..b76319b219c2 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
@@ -1,88 +1,88 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-            'nf.Common',
-            'nf.Shell',
-            'nf.Dialog',
-            'nf.Client'], function ($, nfCommon, nfShell, nfDialog, nfClient) {
-            return (nf.CustomUi = factory($, nfCommon, nfShell, nfDialog, nfClient));
-        });
-    } 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 ($, nfCommon, nfShell, nfDialog, nfClient) {
-    'use strict';
-
-    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) {
-                nfCommon.getAccessToken('../nifi-api/access/ui-extension-token').done(function (uiExtensionToken) {
-                    // record the processor id
-                    $('#shell-close-button');
-
-                    var revision = nfClient.getRevision(entity);
-
-                    // build the customer ui params
-                    var customUiParams = {
-                        'id': entity.id,
-                        'revision': revision.version,
-                        'clientId': revision.clientId,
-                        'editable': editable
-                    };
-
-                    // conditionally include the ui extension token
-                    if (!nfCommon.isBlank(uiExtensionToken)) {
-                        customUiParams['access_token'] = uiExtensionToken;
-                    }
-
-                    // show the shell
-                    nfShell.showPage('..' + uri + '?' + $.param(customUiParams), false).done(function () {
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+              'nf.Common',
+              'nf.Shell',
+              'nf.Dialog',
+              'nf.Client'], function ($, nfCommon, nfShell, nfDialog, nfClient) {
+              return (nf.CustomUi = factory($, nfCommon, nfShell, nfDialog, nfClient));
+          });
+      } 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 ($, nfCommon, nfShell, nfDialog, nfClient) {
+      'use strict';
+  
+      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) {
+                  nfCommon.getAccessToken('../nifi-api/access/ui-extension-token').done(function (uiExtensionToken) {
+                        // record the processor id
+                        $('#shell-close-button');
+    
+                      var revision = nfClient.getRevision(entity);
+    
+                        // build the customer ui params
+                        var customUiParams = {
+                            'id': entity.id,
+                            'revision': revision.version,
+                            'clientId': revision.clientId,
+                            'editable': editable
+                        };
+    
+                        // conditionally include the ui extension token
+                      if (!nfCommon.isBlank(uiExtensionToken)) {
+                            customUiParams['access_token'] = uiExtensionToken;
+                        }
+    
+                        // show the shell
+                      nfShell.showPage('..' + uri + '?' + $.param(customUiParams), false).done(function () {
+                            deferred.resolve();
+                        });
+                    }).fail(function () {
+                      nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-custom-ui.AdvancedConfiguration'),
+                      dialogContent: nf._.msg('nf-custom-ui.Message1')
+                        });
                         deferred.resolve();
                     });
-                }).fail(function () {
-                    nfDialog.showOkDialog({
-                        headerText: 'Advanced Configuration',
-                        dialogContent: 'Unable to generate access token for accessing the advanced configuration dialog.'
-                    });
-                    deferred.resolve();
-                });
-            }).promise();
-        }
-    }
-}));
\ No newline at end of file
+                }).promise();
+            }
+      }
+  }));
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 56ff8f596b51..663304fcf55e 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
@@ -1,422 +1,422 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Connection',
-                'nf.Birdseye',
-                'nf.CanvasUtils',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.Client',
-                'nf.ErrorHandler'],
-            function ($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler) {
-                return (nf.Draggable = factory($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Draggable =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.Connection'),
-                require('nf.Birdseye'),
-                require('nf.CanvasUtils'),
-                require('nf.Common'),
-                require('nf.Dialog'),
-                require('nf.Client'),
-                require('nf.ErrorHandler')));
-    } else {
-        nf.Draggable = factory(root.$,
-            root.d3,
-            root.nf.Connection,
-            root.nf.Birdseye,
-            root.nf.CanvasUtils,
-            root.nf.Common,
-            root.nf.Dialog,
-            root.nf.Client,
-            root.nf.ErrorHandler);
-    }
-}(this, function ($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler) {
-    'use strict';
-
-    var nfCanvas;
-    var drag;
-
-    /**
-     * Updates the positioning of all selected components.
+    /*
+     * 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
      *
-     * @param {selection} dragSelection The current drag selection
-     */
-    var updateComponentsPosition = function (dragSelection) {
-        var updates = d3.map();
-
-        // determine the drag delta
-        var dragData = dragSelection.datum();
-        var delta = {
-            x: dragData.x - dragData.original.x,
-            y: dragData.y - dragData.original.y
-        };
-
-        // if the component didn't move, return
-        if (delta.x === 0 && delta.y === 0) {
-            return;
-        }
-
-        var selectedConnections = d3.selectAll('g.connection.selected');
-        var selectedComponents = d3.selectAll('g.component.selected');
-
-        // ensure every component is writable
-        if (nfCanvasUtils.canModify(selectedConnections) === false || nfCanvasUtils.canModify(selectedComponents) === false) {
-            nfDialog.showOkDialog({
-                headerText: 'Component Position',
-                dialogContent: 'Must be authorized to modify every component selected.'
-            });
-            return;
-        }
-
-        // go through each selected connection
-        selectedConnections.each(function (d) {
-            var connectionUpdate = nfDraggable.updateConnectionPosition(d, delta);
-            if (connectionUpdate !== null) {
-                updates.set(d.id, connectionUpdate);
-            }
-        });
-
-        // go through each selected component
-        selectedComponents.each(function (d) {
-            // consider any self looping connections
-            var connections = nfConnection.getComponentConnections(d.id);
-            $.each(connections, function (_, connection) {
-                if (!updates.has(connection.id) && nfCanvasUtils.getConnectionSourceComponentId(connection) === nfCanvasUtils.getConnectionDestinationComponentId(connection)) {
-                    var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
-                    if (connectionUpdate !== null) {
-                        updates.set(connection.id, connectionUpdate);
-                    }
-                }
-            });
-
-            // consider the component itself
-            updates.set(d.id, nfDraggable.updateComponentPosition(d, delta));
-        });
-
-        nfDraggable.refreshConnections(updates);
-    };
-
-    /**
-     * Updates the parent group of all selected components.
+     *     http://www.apache.org/licenses/LICENSE-2.0
      *
-     * @param {selection} the destination group
+     * 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.
      */
-    var updateComponentsGroup = function (group) {
-        // get the selection and deselect the components being moved
-        var selection = d3.selectAll('g.component.selected, g.connection.selected').classed('selected', false);
-
-        if (nfCanvasUtils.canModify(selection) === false) {
-            nfDialog.showOkDialog({
-                headerText: 'Component Position',
-                dialogContent: 'Must be authorized to modify every component selected.'
-            });
-            return;
-        }
-        if (nfCanvasUtils.canModify(group) === false) {
-            nfDialog.showOkDialog({
-                headerText: 'Component Position',
-                dialogContent: 'Not authorized to modify the destination group.'
-            });
-            return;
-        }
-
-        // move the seleciton into the group
-        nfCanvasUtils.moveComponents(selection, group);
-    };
-
-    var nfDraggable = {
-        init: function (canvas) {
-            nfCanvas = canvas;
-
-            // handle component drag events
-            drag = d3.behavior.drag()
-                .on('dragstart', function () {
-                    // stop further propagation
-                    d3.event.sourceEvent.stopPropagation();
-                })
-                .on('drag', function () {
-                    var dragSelection = d3.select('rect.drag-selection');
-
-                    // lazily create the drag selection box
-                    if (dragSelection.empty()) {
-                        // get the current selection
-                        var selection = d3.selectAll('g.component.selected');
-
-                        // determine the appropriate bounding box
-                        var minX = null, maxX = null, minY = null, maxY = null;
-                        selection.each(function (d) {
-                            if (minX === null || d.position.x < minX) {
-                                minX = d.position.x;
-                            }
-                            if (minY === null || d.position.y < minY) {
-                                minY = d.position.y;
-                            }
-                            var componentMaxX = d.position.x + d.dimensions.width;
-                            var componentMaxY = d.position.y + d.dimensions.height;
-                            if (maxX === null || componentMaxX > maxX) {
-                                maxX = componentMaxX;
-                            }
-                            if (maxY === null || componentMaxY > maxY) {
-                                maxY = componentMaxY;
-                            }
-                        });
-
-                        // create a selection box for the move
-                        d3.select('#canvas').append('rect')
-                            .attr('rx', 6)
-                            .attr('ry', 6)
-                            .attr('x', minX)
-                            .attr('y', minY)
-                            .attr('class', 'drag-selection')
-                            .attr('pointer-events', 'none')
-                            .attr('width', maxX - minX)
-                            .attr('height', maxY - minY)
-                            .attr('stroke-width', function () {
-                                return 1 / nfCanvasUtils.scaleCanvasView();
-                            })
-                            .attr('stroke-dasharray', function () {
-                                return 4 / nfCanvasUtils.scaleCanvasView();
-                            })
-                            .datum({
-                                original: {
-                                    x: minX,
-                                    y: minY
-                                },
-                                x: minX,
-                                y: minY
-                            });
-                    } else {
-                        // update the position of the drag selection
-                        dragSelection.attr('x', function (d) {
-                            d.x += d3.event.dx;
-                            return d.x;
-                        })
-                            .attr('y', function (d) {
-                                d.y += d3.event.dy;
-                                return d.y;
-                            });
-                    }
-                })
-                .on('dragend', function () {
-                    // stop further propagation
-                    d3.event.sourceEvent.stopPropagation();
-
-                    // get the drag selection
-                    var dragSelection = d3.select('rect.drag-selection');
-
-                    // ensure we found a drag selection
-                    if (dragSelection.empty()) {
-                        return;
-                    }
-
-                    // get the destination group if applicable... remove the drop flag if necessary to prevent
-                    // subsequent drop events from triggering prior to this move's completion
-                    var group = d3.select('g.drop').classed('drop', false);
-
-                    // either move or update the selections group as appropriate
-                    if (group.empty()) {
-                        updateComponentsPosition(dragSelection);
-                    } else {
-                        updateComponentsGroup(group);
-                    }
-
-                    // remove the drag selection
-                    dragSelection.remove();
-                });
-        },
-
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Connection',
+                  'nf.Birdseye',
+                  'nf.CanvasUtils',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.ErrorHandler'],
+              function ($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler) {
+                  return (nf.Draggable = factory($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.Draggable =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.Connection'),
+                  require('nf.Birdseye'),
+                  require('nf.CanvasUtils'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.ErrorHandler')));
+      } else {
+          nf.Draggable = factory(root.$,
+              root.d3,
+              root.nf.Connection,
+              root.nf.Birdseye,
+              root.nf.CanvasUtils,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.ErrorHandler);
+      }
+  }(this, function ($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler) {
+      'use strict';
+  
+      var nfCanvas;
+        var drag;
+    
         /**
-         * Update the component's position
+         * Updates the positioning of all selected components.
          *
-         * @param d     The component
-         * @param delta The change in position
-         * @returns {*}
+         * @param {selection} dragSelection The current drag selection
          */
-        updateComponentPosition: function (d, delta) {
-            var newPosition = {
-                'x': d.position.x + delta.x,
-                'y': d.position.y + delta.y
-            };
-
-            // build the entity
-            var entity = {
-                'revision': nfClient.getRevision(d),
-                'component': {
-                    'id': d.id,
-                    'position': newPosition
-                }
+        var updateComponentsPosition = function (dragSelection) {
+            var updates = d3.map();
+    
+            // determine the drag delta
+            var dragData = dragSelection.datum();
+            var delta = {
+                x: dragData.x - dragData.original.x,
+                y: dragData.y - dragData.original.y
             };
-
-            // update the component positioning
-            return $.Deferred(function (deferred) {
-                $.ajax({
-                    type: 'PUT',
-                    url: d.uri,
-                    data: JSON.stringify(entity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // update the component
-                    nfCanvasUtils.getComponentByType(d.type).set(response);
-
-                    // resolve with an object so we can refresh when finished
-                    deferred.resolve({
-                        type: d.type,
-                        id: d.id
-                    });
-                }).fail(function (xhr, status, error) {
-                    if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
-                        nfDialog.showOkDialog({
-                            headerText: 'Component Position',
-                            dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                        });
-                    } else {
-                        nfErrorHandler.handleAjaxError(xhr, status, error);
-                    }
-
-                    deferred.reject();
+    
+            // if the component didn't move, return
+            if (delta.x === 0 && delta.y === 0) {
+                return;
+            }
+    
+            var selectedConnections = d3.selectAll('g.connection.selected');
+            var selectedComponents = d3.selectAll('g.component.selected');
+    
+            // ensure every component is writable
+          if (nfCanvasUtils.canModify(selectedConnections) === false || nfCanvasUtils.canModify(selectedComponents) === false) {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-draggable.ComponentPosition'),
+                  dialogContent: nf._.msg('nf-draggable.Message2')
                 });
-            }).promise();
-        },
-
-        /**
-         * Update the connection's position
-         *
-         * @param d     The connection
-         * @param delta The change in position
-         * @returns {*}
-         */
-        updateConnectionPosition: function (d, delta) {
-            // only update if necessary
-            if (d.bends.length === 0) {
-                return null;
+                return;
             }
-
-            // calculate the new bend points
-            var newBends = $.map(d.bends, function (bend) {
-                return {
-                    x: bend.x + delta.x,
-                    y: bend.y + delta.y
-                };
-            });
-
-            var entity = {
-                'revision': nfClient.getRevision(d),
-                'component': {
-                    id: d.id,
-                    bends: newBends
+    
+            // go through each selected connection
+            selectedConnections.each(function (d) {
+              var connectionUpdate = nfDraggable.updateConnectionPosition(d, delta);
+                if (connectionUpdate !== null) {
+                    updates.set(d.id, connectionUpdate);
                 }
-            };
-
-            // update the component positioning
-            return $.Deferred(function (deferred) {
-                $.ajax({
-                    type: 'PUT',
-                    url: d.uri,
-                    data: JSON.stringify(entity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // update the component
-                    nfConnection.set(response);
-
-                    // resolve with an object so we can refresh when finished
-                    deferred.resolve({
-                        type: d.type,
-                        id: d.id
-                    });
-                }).fail(function (xhr, status, error) {
-                    if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
-                        nfDialog.showOkDialog({
-                            headerText: 'Component Position',
-                            dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                        });
-                    } else {
-                        nfErrorHandler.handleAjaxError(xhr, status, error);
+            });
+    
+            // go through each selected component
+            selectedComponents.each(function (d) {
+                // consider any self looping connections
+              var connections = nfConnection.getComponentConnections(d.id);
+                $.each(connections, function (_, connection) {
+                  if (!updates.has(connection.id) && nfCanvasUtils.getConnectionSourceComponentId(connection) === nfCanvasUtils.getConnectionDestinationComponentId(connection)) {
+                      var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
+                        if (connectionUpdate !== null) {
+                            updates.set(connection.id, connectionUpdate);
+                        }
                     }
-
-                    deferred.reject();
                 });
-            }).promise();
-        },
-
+    
+                // consider the component itself
+              updates.set(d.id, nfDraggable.updateComponentPosition(d, delta));
+          });
+  
+          nfDraggable.refreshConnections(updates);
+        };
+    
         /**
-         * Refresh the connections after dragging a component
-         *
-         * @param updates
+         * Updates the parent group of all selected components.
+       *
+       * @param {selection} the destination group
          */
-        refreshConnections: function (updates) {
-            if (updates.size() > 0) {
-                // wait for all updates to complete
-                $.when.apply(window, updates.values()).done(function () {
-                    var dragged = $.makeArray(arguments);
-                    var connections = d3.set();
-
-                    // refresh this component
-                    $.each(dragged, function (_, component) {
-                        // check if the component in question is a connection
-                        if (component.type === 'Connection') {
-                            connections.add(component.id);
-                        } else {
-                            // get connections that need to be refreshed because its attached to this component
-                            var componentConnections = nfConnection.getComponentConnections(component.id);
-                            $.each(componentConnections, function (_, connection) {
-                                connections.add(connection.id);
+      var updateComponentsGroup = function (group) {
+          // get the selection and deselect the components being moved
+          var selection = d3.selectAll('g.component.selected, g.connection.selected').classed('selected', false);
+    
+          if (nfCanvasUtils.canModify(selection) === false) {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-draggable.ComponentPosition'),
+                  dialogContent: nf._.msg('nf-draggable.Message2')
+                });
+                return;
+            }
+          if (nfCanvasUtils.canModify(group) === false) {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-draggable.ComponentPosition'),
+                  dialogContent: nf._.msg('nf-draggable.Message1')
+                });
+                return;
+            }
+    
+            // move the seleciton into the group
+          nfCanvasUtils.moveComponents(selection, group);
+        };
+    
+      var nfDraggable = {
+          init: function (canvas) {
+              nfCanvas = canvas;
+  
+                // handle component drag events
+                drag = d3.behavior.drag()
+                    .on('dragstart', function () {
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+                    })
+                    .on('drag', function () {
+                        var dragSelection = d3.select('rect.drag-selection');
+    
+                        // lazily create the drag selection box
+                        if (dragSelection.empty()) {
+                            // get the current selection
+                            var selection = d3.selectAll('g.component.selected');
+    
+                            // determine the appropriate bounding box
+                            var minX = null, maxX = null, minY = null, maxY = null;
+                            selection.each(function (d) {
+                                if (minX === null || d.position.x < minX) {
+                                    minX = d.position.x;
+                                }
+                                if (minY === null || d.position.y < minY) {
+                                    minY = d.position.y;
+                                }
+                                var componentMaxX = d.position.x + d.dimensions.width;
+                                var componentMaxY = d.position.y + d.dimensions.height;
+                                if (maxX === null || componentMaxX > maxX) {
+                                    maxX = componentMaxX;
+                                }
+                                if (maxY === null || componentMaxY > maxY) {
+                                    maxY = componentMaxY;
+                                }
                             });
+    
+                            // create a selection box for the move
+                            d3.select('#canvas').append('rect')
+                                .attr('rx', 6)
+                                .attr('ry', 6)
+                                .attr('x', minX)
+                                .attr('y', minY)
+                                .attr('class', 'drag-selection')
+                                .attr('pointer-events', 'none')
+                                .attr('width', maxX - minX)
+                                .attr('height', maxY - minY)
+                                .attr('stroke-width', function () {
+                                  return 1 / nfCanvasUtils.scaleCanvasView();
+                                })
+                                .attr('stroke-dasharray', function () {
+                                  return 4 / nfCanvasUtils.scaleCanvasView();
+                                })
+                                .datum({
+                                    original: {
+                                        x: minX,
+                                        y: minY
+                                    },
+                                    x: minX,
+                                    y: minY
+                                });
+                        } else {
+                            // update the position of the drag selection
+                            dragSelection.attr('x', function (d) {
+                                d.x += d3.event.dx;
+                                return d.x;
+                            })
+                                .attr('y', function (d) {
+                                    d.y += d3.event.dy;
+                                    return d.y;
+                                });
                         }
+                    })
+                    .on('dragend', function () {
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+    
+                        // get the drag selection
+                        var dragSelection = d3.select('rect.drag-selection');
+    
+                        // ensure we found a drag selection
+                        if (dragSelection.empty()) {
+                            return;
+                        }
+    
+                      // get the destination group if applicable... remove the drop flag if necessary to prevent
+                      // subsequent drop events from triggering prior to this move's completion
+                      var group = d3.select('g.drop').classed('drop', false);
+  
+                        // either move or update the selections group as appropriate
+                      if (group.empty()) {
+                            updateComponentsPosition(dragSelection);
+                        } else {
+                          updateComponentsGroup(group);
+                        }
+    
+                        // remove the drag selection
+                        dragSelection.remove();
                     });
-
-                    // refresh the connections
-                    connections.forEach(function (connectionId) {
-                        nfConnection.refresh(connectionId);
-                    });
-                }).always(function () {
-                    nfBirdseye.refresh();
-                });
+            },
+    
+            /**
+           * Update the component's position
+           *
+           * @param d     The component
+           * @param delta The change in position
+           * @returns {*}
+           */
+          updateComponentPosition: function (d, delta) {
+              var newPosition = {
+                  'x': d.position.x + delta.x,
+                  'y': d.position.y + delta.y
+              };
+  
+              // build the entity
+              var entity = {
+                  'revision': nfClient.getRevision(d),
+                  'component': {
+                      'id': d.id,
+                      'position': newPosition
+                  }
+              };
+  
+              // update the component positioning
+              return $.Deferred(function (deferred) {
+                  $.ajax({
+                      type: 'PUT',
+                      url: d.uri,
+                      data: JSON.stringify(entity),
+                      dataType: 'json',
+                      contentType: 'application/json'
+                  }).done(function (response) {
+                      // update the component
+                      nfCanvasUtils.getComponentByType(d.type).set(response);
+  
+                      // resolve with an object so we can refresh when finished
+                      deferred.resolve({
+                          type: d.type,
+                          id: d.id
+                      });
+                  }).fail(function (xhr, status, error) {
+                      if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
+                          nfDialog.showOkDialog({
+                              headerText: 'Component Position',
+                              dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                          });
+                      } else {
+                          nfErrorHandler.handleAjaxError(xhr, status, error);
+                      }
+  
+                      deferred.reject();
+                  });
+              }).promise();
+          },
+  
+          /**
+           * Update the connection's position
+           *
+           * @param d     The connection
+           * @param delta The change in position
+           * @returns {*}
+           */
+          updateConnectionPosition: function (d, delta) {
+              // only update if necessary
+              if (d.bends.length === 0) {
+                  return null;
+              }
+  
+              // calculate the new bend points
+              var newBends = $.map(d.bends, function (bend) {
+                  return {
+                      x: bend.x + delta.x,
+                      y: bend.y + delta.y
+                  };
+              });
+  
+              var entity = {
+                  'revision': nfClient.getRevision(d),
+                  'component': {
+                      id: d.id,
+                      bends: newBends
+                  }
+              };
+  
+              // update the component positioning
+              return $.Deferred(function (deferred) {
+                  $.ajax({
+                      type: 'PUT',
+                      url: d.uri,
+                      data: JSON.stringify(entity),
+                      dataType: 'json',
+                      contentType: 'application/json'
+                  }).done(function (response) {
+                      // update the component
+                      nfConnection.set(response);
+  
+                      // resolve with an object so we can refresh when finished
+                      deferred.resolve({
+                          type: d.type,
+                          id: d.id
+                      });
+                  }).fail(function (xhr, status, error) {
+                      if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
+                          nfDialog.showOkDialog({
+                              headerText: 'Component Position',
+                              dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                          });
+                      } else {
+                          nfErrorHandler.handleAjaxError(xhr, status, error);
+                      }
+  
+                      deferred.reject();
+                  });
+              }).promise();
+          },
+  
+          /**
+           * Refresh the connections after dragging a component
+           *
+           * @param updates
+           */
+          refreshConnections: function (updates) {
+              if (updates.size() > 0) {
+                  // wait for all updates to complete
+                  $.when.apply(window, updates.values()).done(function () {
+                      var dragged = $.makeArray(arguments);
+                      var connections = d3.set();
+  
+                      // refresh this component
+                      $.each(dragged, function (_, component) {
+                          // check if the component in question is a connection
+                          if (component.type === 'Connection') {
+                              connections.add(component.id);
+                          } else {
+                              // get connections that need to be refreshed because its attached to this component
+                              var componentConnections = nfConnection.getComponentConnections(component.id);
+                              $.each(componentConnections, function (_, connection) {
+                                  connections.add(connection.id);
+                              });
+                          }
+                      });
+  
+                      // refresh the connections
+                      connections.forEach(function (connectionId) {
+                          nfConnection.refresh(connectionId);
+                      });
+                  }).always(function () {
+                      nfBirdseye.refresh();
+                  });
+              }
+          },
+  
+          /**
+             * Activates the drag behavior for the components in the specified selection.
+             *
+             * @param {selection} components
+             */
+            activate: function (components) {
+                components.classed('moveable', true).call(drag);
+            },
+    
+            /**
+             * Deactivates the drag behavior for the components in the specified selection.
+             *
+             * @param {selection} components
+             */
+            deactivate: function (components) {
+                components.classed('moveable', false).on('.drag', null);
             }
-        },
-
-        /**
-         * Activates the drag behavior for the components in the specified selection.
-         *
-         * @param {selection} components
-         */
-        activate: function (components) {
-            components.classed('moveable', true).call(drag);
-        },
-
-        /**
-         * Deactivates the drag behavior for the components in the specified selection.
-         *
-         * @param {selection} components
-         */
-        deactivate: function (components) {
-            components.classed('moveable', false).on('.drag', null);
-        }
-    };
-
-    return nfDraggable;
-}));
\ No newline at end of file
+        };
+    
+      return nfDraggable;
+  }));
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 8faf92d0bb2b..f4ea6fb73194 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
@@ -1,875 +1,875 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-/**
- * Handles the upstream/downstream dialogs.
- */
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.ErrorHandler',
-                'nf.CanvasUtils'],
-            function ($, nfErrorHandler, nfCanvasUtils) {
-                return (nf.GoTo = factory($, nfErrorHandler, nfCanvasUtils));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.GoTo =
-            factory(require('jquery'),
-                require('nf.ErrorHandler'),
-                require('nf.CanvasUtils')));
-    } else {
-        nf.GoTo = factory(root.$,
-            root.nf.ErrorHandler,
-            root.nf.CanvasUtils);
-    }
-}(this, function ($, nfErrorHandler, nfCanvasUtils) {
-    'use strict';
-
-    var config = {
-        urls: {
-            api: '../nifi-api',
-            processGroups: '../nifi-api/flow/process-groups/'
-        }
-    };
-    
-    var currentComponentId;
-    var currentComponentLabel;
-
-    /**
-     * Adds a connection to the connections dialog.
+    /*
+     * 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
      *
-     * @param {string}  parentProcessGroupId
-     * @param {object}  connectionEntity
-     * @param {array}   processGroupEntities
-     * @param {array}   remoteProcessGroupEntities
-     */
-    var addConnection = function (parentProcessGroupId, connectionEntity, processGroupEntities, remoteProcessGroupEntities) {
-        var container = $('<div class="source-destination-connection"></div>').appendTo('#connections-container');
-
-        if (connectionEntity.sourceType === 'OUTPUT_PORT') {
-            addSourceOutputPort(parentProcessGroupId, container, connectionEntity, processGroupEntities);
-        } else if (connectionEntity.sourceType === 'REMOTE_OUTPUT_PORT') {
-            addSourceRemoteOutputPort(parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities);
-        } else {
-            addSourceComponent(container, connectionEntity);
-        }
-
-        var connectionEntry = $('<div class="connection-entry"></div>').appendTo(container);
-
-        // format the connection name.. fall back to id
-        var connectionStyle = 'unset';
-        var connectionName = 'Connection';
-        if (connectionEntity.permissions.canRead === true) {
-            var formattedConnectionName = nfCanvasUtils.formatConnectionName(connectionEntity.component);
-            if (formattedConnectionName !== '') {
-                connectionStyle = '';
-                connectionName = formattedConnectionName;
-            }
-        }
-
-        // connection
-        $('<div class="search-result-icon icon-connect"></div>').appendTo(connectionEntry);
-        $('<div class="connection-entry-name go-to-link"></div>').attr('title', connectionName).addClass(connectionStyle).text(connectionName).on('click', function () {
-            // go to the connection
-            nfCanvasUtils.showComponent(parentProcessGroupId, connectionEntity.id);
-
-            // close the dialog
-            $('#connections-dialog').modal('hide');
-        }).appendTo(connectionEntry);
-
-        // clear
-        $('<div class="clear"></div>').appendTo(connectionEntry);
-
-        if (connectionEntity.destinationType === 'INPUT_PORT') {
-            addDestinationInputPort(parentProcessGroupId, container, connectionEntity, processGroupEntities);
-        } else if (connectionEntity.destinationType === 'REMOTE_INPUT_PORT') {
-            addDestinationRemoteInputPort(parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities);
-        } else {
-            addDestinationComponent(container, connectionEntity);
-        }
-
-        // clear
-        $('<div class="clear"></div>').appendTo(container);
-    };
-
-    /**
-     * Adds a destination component to the dialog.
+     *     http://www.apache.org/licenses/LICENSE-2.0
      *
-     * @param {jQuery} container                    The container to add to
-     * @param {object} connectionEntity             The connection to the downstream component
+     * 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.
      */
-    var addDestinationComponent = function (container, connectionEntity) {
-        // get the appropriate component icon
-        var smallIconClass = 'icon-funnel';
-        if (connectionEntity.destinationType === 'PROCESSOR') {
-            smallIconClass = 'icon-processor';
-        } else if (connectionEntity.destinationType === 'OUTPUT_PORT') {
-            smallIconClass = 'icon-port-out';
-        }
-
-        // get the source name
-        var destinationName = connectionEntity.destinationId;
-        if (connectionEntity.permissions.canRead === true) {
-            destinationName = connectionEntity.component.destination.name;
-        } else if (currentComponentId === connectionEntity.destinationId) {
-            destinationName = currentComponentLabel;
-        }
-
-        // component
-        var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
-        $('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(downstreamComponent);
-        $('<div class="destination-component-name go-to-link"></div>').attr('title', destinationName).text(destinationName).on('click', function () {
-            // go to the component
-            nfCanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
-
-            // close the dialog
-            $('#connections-dialog').modal('hide');
-        }).appendTo(downstreamComponent);
-
-        // clear
-        $('<div class="clear"></div>').appendTo(downstreamComponent);
-    };
-
+    
+  /* global define, module, require, exports */
+    
     /**
-     * Adds a destination input port to the dialog.
-     *
-     * @param {string} parentProcessGroupId               The process group id
-     * @param {jQuery} container                    The container to add to
-     * @param {object} connectionEntity             The connection to the downstream input port
-     * @param {array}  processGroupEntities         The process groups
+     * Handles the upstream/downstream dialogs.
      */
-    var addDestinationInputPort = function (parentProcessGroupId, container, connectionEntity, processGroupEntities) {
-        var processGroupEntity;
-        $.each(processGroupEntities, function (_, pge) {
-            if (connectionEntity.destinationGroupId === pge.id) {
-                processGroupEntity = pge;
-                return false;
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.ErrorHandler',
+                  'nf.CanvasUtils'],
+              function ($, nfErrorHandler, nfCanvasUtils) {
+                  return (nf.GoTo = factory($, nfErrorHandler, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.GoTo =
+              factory(require('jquery'),
+                  require('nf.ErrorHandler'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.GoTo = factory(root.$,
+              root.nf.ErrorHandler,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, nfErrorHandler, nfCanvasUtils) {
+      'use strict';
+    
+        var config = {
+            urls: {
+                api: '../nifi-api',
+              processGroups: '../nifi-api/flow/process-groups/'
             }
-        });
-
-        // get the group label
-        var groupLabel = getDisplayName(processGroupEntity);
-
-        // process group
-        var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
-        $('<div class="search-result-icon icon-group"></div>').appendTo(downstreamComponent);
-        $('<div class="destination-component-name go-to-link"></div>').attr('title', groupLabel).text(groupLabel).on('click', function () {
-            // go to the remote process group
-            nfCanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
-
-            // close the dialog
-            $('#connections-dialog').modal('hide');
-        }).appendTo(downstreamComponent);
-
-        // clear
-        $('<div class="clear"></div>').appendTo(downstreamComponent);
-
-        // get the port label
-        var portLabel = connectionEntity.destinationId;
-        if (connectionEntity.permissions.canRead === true) {
-            portLabel = connectionEntity.component.destination.name;
-        } else if (currentComponentId === connectionEntity.destinationId) {
-            portLabel = currentComponentLabel;
-        }
-
-        // input port
-        var downstreamInputPort = $('<div class="destination-input-port"></div>').appendTo(downstreamComponent);
-        $('<div class="search-result-icon icon-port-in"></div>').appendTo(downstreamInputPort);
-        $('<div class="destination-input-port-name go-to-link"></div>').attr('title', portLabel).text(portLabel).on('click', function () {
-            // go to the remote process group
-            nfCanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
-
-            // close the dialog
-            $('#connections-dialog').modal('hide');
-        }).appendTo(downstreamInputPort);
-
-        // clear
-        $('<div class="clear"></div>').appendTo(downstreamComponent);
-    };
-
-    /**
-     * Adds a destination remote input port to the dialog.
-     *
-     * @param {string} parentProcessGroupId               The process group id
-     * @param {jQuery} container                    The container to add to
-     * @param {object} connectionEntity             The connection to the downstream remote input port
-     * @param {array} remoteProcessGroupEntities    The remote process groups
-     */
-    var addDestinationRemoteInputPort = function (parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities) {
-        var remoteProcessGroupEntity;
-        $.each(remoteProcessGroupEntities, function (_, rpge) {
-            if (connectionEntity.destinationGroupId === rpge.id) {
-                remoteProcessGroupEntity = rpge;
-                return false;
+        };
+        
+      var currentComponentId;
+      var currentComponentLabel;
+    
+        /**
+         * Adds a connection to the connections dialog.
+         *
+       * @param {string}  parentProcessGroupId
+       * @param {object}  connectionEntity
+       * @param {array}   processGroupEntities
+       * @param {array}   remoteProcessGroupEntities
+         */
+      var addConnection = function (parentProcessGroupId, connectionEntity, processGroupEntities, remoteProcessGroupEntities) {
+            var container = $('<div class="source-destination-connection"></div>').appendTo('#connections-container');
+    
+          if (connectionEntity.sourceType === 'OUTPUT_PORT') {
+              addSourceOutputPort(parentProcessGroupId, container, connectionEntity, processGroupEntities);
+          } else if (connectionEntity.sourceType === 'REMOTE_OUTPUT_PORT') {
+              addSourceRemoteOutputPort(parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities);
+            } else {
+              addSourceComponent(container, connectionEntity);
             }
-        });
-
-        // get the group label
-        var remoteGroupLabel = getDisplayName(remoteProcessGroupEntity);
-
-        // remote process group
-        var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
-        $('<div class="search-result-icon icon-group-remote"></div>').appendTo(downstreamComponent);
-        $('<div class="destination-component-name go-to-link"></div>').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () {
-            // go to the remote process group
-            nfCanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
-
-            // close the dialog
-            $('#connections-dialog').modal('hide');
-        }).appendTo(downstreamComponent);
-
-        // clear
-        $('<div class="clear"></div>').appendTo(downstreamComponent);
-
-        // get the port label
-        var remotePortLabel = connectionEntity.destinationId;
-        if (connectionEntity.permissions.canRead === true) {
-            remotePortLabel = connectionEntity.component.destination.name;
-        } else if (currentComponentId === connectionEntity.destinationId) {
-            remotePortLabel = currentComponentLabel;
-        }
-
-        // remote input port
-        var downstreamInputPort = $('<div class="destination-input-port"></div>').appendTo(downstreamComponent);
-        $('<div class="search-result-icon icon-port-in"></div>').appendTo(downstreamInputPort);
-        $('<div class="destination-input-port-name"></div>').attr('title', remotePortLabel).text(remotePortLabel).appendTo(downstreamInputPort);
-
-        // clear
-        $('<div class="clear"></div>').appendTo(downstreamComponent);
-    };
-
-    /**
-     * Adds a source component to the dialog.
-     *
-     * @param {jQuery} container                    The container to add to
-     * @param {object} connectionEntity             The connection to the upstream component
-     */
-    var addSourceComponent = function (container, connectionEntity) {
-        // get the appropriate component icon
-        var smallIconClass = 'icon-funnel';
-        if (connectionEntity.sourceType === 'PROCESSOR') {
-            smallIconClass = 'icon-processor';
-        } else if (connectionEntity.sourceType === 'INPUT_PORT') {
-            smallIconClass = 'icon-port-in';
-        }
-
-        // get the source name
-        var sourceName = connectionEntity.sourceId;
-        if (connectionEntity.permissions.canRead === true) {
-            sourceName = connectionEntity.component.source.name;
-        } else if (currentComponentId === connectionEntity.sourceId) {
-            sourceName = currentComponentLabel;
-        }
-
-        // component
-        var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
-        $('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(sourceComponent);
-        $('<div class="source-component-name go-to-link"></div>').attr('title', sourceName).text(sourceName).on('click', function () {
-            // go to the component
-            nfCanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
-
-            // close the dialog
-            $('#connections-dialog').modal('hide');
-        }).appendTo(sourceComponent);
-
-        // clear
-        $('<div class="clear"></div>').appendTo(sourceComponent);
-    };
-
-    /**
-     * Adds a source output port to the dialog.
-     *
-     * @param {string} parentProcessGroupId               The process group id
-     * @param {jQuery} container                    The container to add to
-     * @param {object} connectionEntity             The connection
-     * @param {array} processGroupEntities          The process groups
-     */
-    var addSourceOutputPort = function (parentProcessGroupId, container, connectionEntity, processGroupEntities) {
-        var processGroupEntity;
-        $.each(processGroupEntities, function (_, pge) {
-            if (connectionEntity.sourceGroupId === pge.id) {
-                processGroupEntity = pge;
-                return false;
+    
+            var connectionEntry = $('<div class="connection-entry"></div>').appendTo(container);
+    
+            // format the connection name.. fall back to id
+          var connectionStyle = 'unset';
+          var connectionName = 'Connection';
+          if (connectionEntity.permissions.canRead === true) {
+              var formattedConnectionName = nfCanvasUtils.formatConnectionName(connectionEntity.component);
+              if (formattedConnectionName !== '') {
+                  connectionStyle = '';
+                  connectionName = formattedConnectionName;
+              }
             }
-        });
-
-        // get the group label
-        var groupLabel = getDisplayName(processGroupEntity);
-
-        // process group
-        var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
-        $('<div class="search-result-icon icon-group"></div>').appendTo(sourceComponent);
-        $('<div class="source-component-name go-to-link"></div>').attr('title', groupLabel).text(groupLabel).on('click', function () {
-            // go to the process group
-            nfCanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
-
-            // close the dialog
-            $('#connections-dialog').modal('hide');
-        }).appendTo(sourceComponent);
-
-        // clear
-        $('<div class="clear"></div>').appendTo(sourceComponent);
-
-        // get the port label
-        var portLabel = connectionEntity.sourceId;
-        if (connectionEntity.permissions.canRead === true) {
-            portLabel = connectionEntity.component.source.name;
-        } else if (currentComponentId === connectionEntity.sourceId) {
-            portLabel = currentComponentLabel;
-        }
-
-        var sourceOutputPort = $('<div class="source-output-port"></div>').appendTo(sourceComponent);
-        $('<div class="search-result-icon icon-port-out"></div>').appendTo(sourceOutputPort);
-        $('<div class="source-output-port-name go-to-link"></div>').attr('title', portLabel).text(portLabel).on('click', function () {
-            // go to the output port
-            nfCanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
-
-            // close the dialog
-            $('#connections-dialog').modal('hide');
-        }).appendTo(sourceOutputPort);
-
-        // clear
-        $('<div class="clear"></div>').appendTo(sourceComponent);
-    };
-
-    /**
-     * Adds a source remote output port to the dialog.
-     *
-     * @param {string} parentProcessGroupId               The process group id
-     * @param {jQuery} container                    The container to add to
-     * @param {object} connectionEntity             The connection to the downstream remote output port
-     * @param {array} remoteProcessGroupEntities    The remote process groups
-     */
-    var addSourceRemoteOutputPort = function (parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities) {
-        var remoteProcessGroupEntity;
-        $.each(remoteProcessGroupEntities, function (_, rpge) {
-            if (connectionEntity.sourceGroupId === rpge.id) {
-                remoteProcessGroupEntity = rpge;
-                return false;
+    
+            // connection
+          $('<div class="search-result-icon icon-connect"></div>').appendTo(connectionEntry);
+            $('<div class="connection-entry-name go-to-link"></div>').attr('title', connectionName).addClass(connectionStyle).text(connectionName).on('click', function () {
+                // go to the connection
+              nfCanvasUtils.showComponent(parentProcessGroupId, connectionEntity.id);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(connectionEntry);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(connectionEntry);
+    
+          if (connectionEntity.destinationType === 'INPUT_PORT') {
+              addDestinationInputPort(parentProcessGroupId, container, connectionEntity, processGroupEntities);
+          } else if (connectionEntity.destinationType === 'REMOTE_INPUT_PORT') {
+              addDestinationRemoteInputPort(parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities);
+            } else {
+              addDestinationComponent(container, connectionEntity);
             }
-        });
-
-        // get the group label
-        var remoteGroupLabel = getDisplayName(remoteProcessGroupEntity);
-
-        // remote process group
-        var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
-        $('<div class="search-result-icon icon-group-remote"></div>').appendTo(sourceComponent);
-        $('<div class="source-component-name go-to-link"></div>').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () {
-            // go to the remote process group
-            nfCanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
-
-            // close the dialog
-            $('#connections-dialog').modal('hide');
-        }).appendTo(sourceComponent);
-
-        // clear
-        $('<div class="clear"></div>').appendTo(sourceComponent);
-
-        // get the port label
-        var remotePortLabel = connectionEntity.sourceId;
-        if (connectionEntity.permissions.canRead === true) {
-            remotePortLabel = connectionEntity.component.source.name;
-        } else if (connectionEntity.sourceId === currentComponentId) {
-            remotePortLabel = currentComponentLabel;
-        }
-
-        // port markup
-        var sourceOutputPort = $('<div class="source-output-port"></div>').appendTo(sourceComponent);
-        $('<div class="search-result-icon icon-port-out"></div>').appendTo(sourceOutputPort);
-        $('<div class="source-output-port-name"></div>').attr('title', remotePortLabel).text(remotePortLabel).appendTo(sourceOutputPort);
-
-        // clear
-        $('<div class="clear"></div>').appendTo(sourceComponent);
-    };
-
-    /**
-     * Gets the display name for the specified entity.
-     *
-     * @param entity entity
-     * @returns display name
-     */
-    var getDisplayName = function (entity) {
-        if (entity.permissions.canRead === true) {
-            return entity.component.name;
-        } else if (currentComponentId === entity.id) {
-            return currentComponentLabel;
-        } else {
-            return entity.id;
-        }
-    };
-
-    return {
-        /**
-         * Initializes the dialog.
-         */
-        init: function () {
-            $('#connections-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-                buttons: [{
-                    buttonText: 'Close',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            $('#connections-dialog').modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        $('#connections-context').empty();
-                        $('#connections-container').empty();
-                    }
-                }
-            });
-        },
-
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(container);
+        };
+    
         /**
-         * Shows components downstream from a processor.
+         * Adds a destination component to the dialog.
          *
-         * @param {selection} selection The processor selection
+         * @param {jQuery} container                    The container to add to
+       * @param {object} connectionEntity             The connection to the downstream component
          */
-        showDownstreamFromProcessor: function (selection) {
-            var processorEntity = selection.datum();
-            var connections = nfCanvasUtils.getComponentByType('Connection').get();
-            var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-            var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-
-            var processorLabel = getDisplayName(processorEntity);
-
-            // record details of the current component
-            currentComponentId = processorEntity.id;
-            currentComponentLabel = processorLabel;
-
-            // populate the downstream dialog
-            $('#connections-context')
-                .append('<div class="search-result-icon icon-processor"></div>')
-                .append($('<div class="connections-component-name"></div>').text(processorLabel))
-                .append('<div class="clear"></div>');
-
-            // add the destination for each connection
-            $.each(connections, function (_, connectionEntity) {
-                // only show connections for which this selection is the source
-                if (connectionEntity.sourceId === processorEntity.id) {
-                    addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                }
-            });
-
-            // ensure there are downstream components
-            if ($('#connections-container').is(':empty')) {
-                $('#connections-container').html('<span class="unset">No downstream components</span>');
+      var addDestinationComponent = function (container, connectionEntity) {
+            // get the appropriate component icon
+          var smallIconClass = 'icon-funnel';
+          if (connectionEntity.destinationType === 'PROCESSOR') {
+              smallIconClass = 'icon-processor';
+          } else if (connectionEntity.destinationType === 'OUTPUT_PORT') {
+              smallIconClass = 'icon-port-out';
+          }
+  
+          // get the source name
+          var destinationName = connectionEntity.destinationId;
+          if (connectionEntity.permissions.canRead === true) {
+              destinationName = connectionEntity.component.destination.name;
+          } else if (currentComponentId === connectionEntity.destinationId) {
+              destinationName = currentComponentLabel;
             }
-
-            // show the downstream dialog
-            $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show');
-        },
-
+    
+            // component
+            var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
+            $('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(downstreamComponent);
+          $('<div class="destination-component-name go-to-link"></div>').attr('title', destinationName).text(destinationName).on('click', function () {
+                // go to the component
+              nfCanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(downstreamComponent);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(downstreamComponent);
+        };
+    
         /**
-         * Shows components upstream from a processor.
+         * Adds a destination input port to the dialog.
          *
-         * @param {selection} selection The processor selection
+       * @param {string} parentProcessGroupId               The process group id
+         * @param {jQuery} container                    The container to add to
+       * @param {object} connectionEntity             The connection to the downstream input port
+       * @param {array}  processGroupEntities         The process groups
          */
-        showUpstreamFromProcessor: function (selection) {
-            var processorEntity = selection.datum();
-            var connections = nfCanvasUtils.getComponentByType('Connection').get();
-            var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-            var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-
-            var processorLabel = getDisplayName(processorEntity);
-
-            // record details of the current component
-            currentComponentId = processorEntity.id;
-            currentComponentLabel = processorLabel;
-            
-            // populate the upstream dialog
-            $('#connections-context')
-                .append('<div class="search-result-icon icon-processor"></div>')
-                .append($('<div class="connections-component-name"></div>').text(processorLabel))
-                .append('<div class="clear"></div>');
-
-            // add the source for each connection
-            $.each(connections, function (_, connectionEntity) {
-                // only show connections for which this selection is the destination
-                if (connectionEntity.destinationId === processorEntity.id) {
-                    addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                }
-            });
-
-            // ensure there are upstream components
-            if ($('#connections-container').is(':empty')) {
-                $('#connections-container').html('<span class="unset">No upstream components</span>');
-            }
-
-            // show the upstream dialog
-            $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show');
-        },
-
+      var addDestinationInputPort = function (parentProcessGroupId, container, connectionEntity, processGroupEntities) {
+          var processGroupEntity;
+          $.each(processGroupEntities, function (_, pge) {
+              if (connectionEntity.destinationGroupId === pge.id) {
+                  processGroupEntity = pge;
+                  return false;
+              }
+          });
+  
+          // get the group label
+          var groupLabel = getDisplayName(processGroupEntity);
+    
+            // process group
+            var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
+          $('<div class="search-result-icon icon-group"></div>').appendTo(downstreamComponent);
+          $('<div class="destination-component-name go-to-link"></div>').attr('title', groupLabel).text(groupLabel).on('click', function () {
+                // go to the remote process group
+              nfCanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(downstreamComponent);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(downstreamComponent);
+    
+          // get the port label
+          var portLabel = connectionEntity.destinationId;
+          if (connectionEntity.permissions.canRead === true) {
+              portLabel = connectionEntity.component.destination.name;
+          } else if (currentComponentId === connectionEntity.destinationId) {
+              portLabel = currentComponentLabel;
+          }
+    
+            // input port
+            var downstreamInputPort = $('<div class="destination-input-port"></div>').appendTo(downstreamComponent);
+          $('<div class="search-result-icon icon-port-in"></div>').appendTo(downstreamInputPort);
+          $('<div class="destination-input-port-name go-to-link"></div>').attr('title', portLabel).text(portLabel).on('click', function () {
+                // go to the remote process group
+              nfCanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(downstreamInputPort);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(downstreamComponent);
+        };
+    
         /**
-         * Shows components downstream from a process group or a remote process group.
+         * Adds a destination remote input port to the dialog.
          *
-         * @param {selection} selection The process group or remote process group selection
+       * @param {string} parentProcessGroupId               The process group id
+         * @param {jQuery} container                    The container to add to
+       * @param {object} connectionEntity             The connection to the downstream remote input port
+       * @param {array} remoteProcessGroupEntities    The remote process groups
          */
-        showDownstreamFromGroup: function (selection) {
-            var groupEntity = selection.datum();
-            var connections = nfCanvasUtils.getComponentByType('Connection').get();
-            var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-            var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-
-            var iconStyle = 'icon-group';
-            if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                iconStyle = 'icon-group-remote';
-            }
-
-            var groupLabel = getDisplayName(groupEntity);
-
-            // record details of the current component
-            currentComponentId = groupEntity.id;
-            currentComponentLabel = groupLabel;
-            
-            // populate the downstream dialog
-            $('#connections-context')
-                .append($('<div class="search-result-icon"></div>').addClass(iconStyle))
-                .append($('<div class="connections-component-name"></div>').text(groupLabel))
-                .append('<div class="clear"></div>');
-
-            // add the destination for each connection
-            $.each(connections, function (_, connectionEntity) {
-                // only show connections for which this selection is the source
-                if (connectionEntity.sourceGroupId === groupEntity.id) {
-                    addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                }
-            });
-
-            // ensure there are downstream components
-            if ($('#connections-container').is(':empty')) {
-                $('#connections-container').html('<span class="unset">No downstream components</span>');
-            }
-
-            // show the downstream dialog
-            $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show');
-        },
-
+      var addDestinationRemoteInputPort = function (parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities) {
+          var remoteProcessGroupEntity;
+          $.each(remoteProcessGroupEntities, function (_, rpge) {
+              if (connectionEntity.destinationGroupId === rpge.id) {
+                  remoteProcessGroupEntity = rpge;
+                  return false;
+              }
+          });
+  
+          // get the group label
+          var remoteGroupLabel = getDisplayName(remoteProcessGroupEntity);
+    
+            // remote process group
+            var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
+          $('<div class="search-result-icon icon-group-remote"></div>').appendTo(downstreamComponent);
+          $('<div class="destination-component-name go-to-link"></div>').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () {
+                // go to the remote process group
+              nfCanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(downstreamComponent);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(downstreamComponent);
+    
+          // get the port label
+          var remotePortLabel = connectionEntity.destinationId;
+          if (connectionEntity.permissions.canRead === true) {
+              remotePortLabel = connectionEntity.component.destination.name;
+          } else if (currentComponentId === connectionEntity.destinationId) {
+              remotePortLabel = currentComponentLabel;
+          }
+    
+            // remote input port
+            var downstreamInputPort = $('<div class="destination-input-port"></div>').appendTo(downstreamComponent);
+          $('<div class="search-result-icon icon-port-in"></div>').appendTo(downstreamInputPort);
+          $('<div class="destination-input-port-name"></div>').attr('title', remotePortLabel).text(remotePortLabel).appendTo(downstreamInputPort);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(downstreamComponent);
+        };
+    
         /**
-         * Shows components upstream from a process group or a remote process group.
+         * Adds a source component to the dialog.
          *
-         * @param {selection} selection The process group or remote process group selection
+         * @param {jQuery} container                    The container to add to
+       * @param {object} connectionEntity             The connection to the upstream component
          */
-        showUpstreamFromGroup: function (selection) {
-            var groupEntity = selection.datum();
-            var connections = nfCanvasUtils.getComponentByType('Connection').get();
-            var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-            var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-
-            var iconStyle = 'icon-group';
-            if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                iconStyle = 'icon-group-remote';
-            }
-
-            var groupLabel = getDisplayName(groupEntity);
-
-            // record details of the current component
-            currentComponentId = groupEntity.id;
-            currentComponentLabel = groupLabel;
-            
-            // populate the upstream dialog
-            $('#connections-context')
-                .append($('<div class="search-result-icon"></div>').addClass(iconStyle))
-                .append($('<div class="connections-component-name"></div>').text(groupLabel))
-                .append('<div class="clear"></div>');
-
-            // add the source for each connection
-            $.each(connections, function (_, connectionEntity) {
-                // only show connections for which this selection is the destination
-                if (connectionEntity.destinationGroupId === groupEntity.id) {
-                    addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                }
-            });
-
-            // ensure there are upstream components
-            if ($('#connections-container').is(':empty')) {
-                $('#connections-container').html('<span class="unset">No upstream components</span>');
+      var addSourceComponent = function (container, connectionEntity) {
+            // get the appropriate component icon
+          var smallIconClass = 'icon-funnel';
+          if (connectionEntity.sourceType === 'PROCESSOR') {
+              smallIconClass = 'icon-processor';
+          } else if (connectionEntity.sourceType === 'INPUT_PORT') {
+              smallIconClass = 'icon-port-in';
+          }
+  
+          // get the source name
+          var sourceName = connectionEntity.sourceId;
+          if (connectionEntity.permissions.canRead === true) {
+              sourceName = connectionEntity.component.source.name;
+          } else if (currentComponentId === connectionEntity.sourceId) {
+              sourceName = currentComponentLabel;
             }
-
-            // show the dialog
-            $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show');
-        },
-
+    
+            // component
+            var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
+            $('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(sourceComponent);
+          $('<div class="source-component-name go-to-link"></div>').attr('title', sourceName).text(sourceName).on('click', function () {
+                // go to the component
+              nfCanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(sourceComponent);
+    
+          // clear
+          $('<div class="clear"></div>').appendTo(sourceComponent);
+        };
+    
         /**
-         * Shows components downstream from an input port.
+         * Adds a source output port to the dialog.
          *
-         * @param {selection} selection The input port selection
+       * @param {string} parentProcessGroupId               The process group id
+         * @param {jQuery} container                    The container to add to
+       * @param {object} connectionEntity             The connection
+       * @param {array} processGroupEntities          The process groups
          */
-        showDownstreamFromInputPort: function (selection) {
-            var portEntity = selection.datum();
-            var connections = nfCanvasUtils.getComponentByType('Connection').get();
-            var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-            var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-
-            var portLabel = getDisplayName(portEntity);
-
-            // record details of the current component
-            currentComponentId = portEntity.id;
-            currentComponentLabel = portLabel;
-            
-            // populate the downstream dialog
-            $('#connections-context')
-                .append('<div class="search-result-icon icon-port-in"></div>')
-                .append($('<div class="connections-component-name"></div>').text(portLabel))
-                .append('<div class="clear"></div>');
-
-            // add the destination for each connection
-            $.each(connections, function (_, connectionEntity) {
-                // only show connections for which this selection is the source
-                if (connectionEntity.sourceId === portEntity.id) {
-                    addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                }
-            });
-
-            // ensure there are downstream components
-            if ($('#connections-container').is(':empty')) {
-                $('#connections-container').html('<span class="unset">No downstream components</span>');
-            }
-
-            // show the downstream dialog
-            $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show');
-        },
-
+      var addSourceOutputPort = function (parentProcessGroupId, container, connectionEntity, processGroupEntities) {
+          var processGroupEntity;
+          $.each(processGroupEntities, function (_, pge) {
+              if (connectionEntity.sourceGroupId === pge.id) {
+                  processGroupEntity = pge;
+                  return false;
+              }
+          });
+  
+          // get the group label
+          var groupLabel = getDisplayName(processGroupEntity);
+    
+            // process group
+            var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
+          $('<div class="search-result-icon icon-group"></div>').appendTo(sourceComponent);
+          $('<div class="source-component-name go-to-link"></div>').attr('title', groupLabel).text(groupLabel).on('click', function () {
+                // go to the process group
+              nfCanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(sourceComponent);
+    
+          // clear
+            $('<div class="clear"></div>').appendTo(sourceComponent);
+    
+          // get the port label
+          var portLabel = connectionEntity.sourceId;
+          if (connectionEntity.permissions.canRead === true) {
+              portLabel = connectionEntity.component.source.name;
+          } else if (currentComponentId === connectionEntity.sourceId) {
+              portLabel = currentComponentLabel;
+          }
+  
+            var sourceOutputPort = $('<div class="source-output-port"></div>').appendTo(sourceComponent);
+          $('<div class="search-result-icon icon-port-out"></div>').appendTo(sourceOutputPort);
+          $('<div class="source-output-port-name go-to-link"></div>').attr('title', portLabel).text(portLabel).on('click', function () {
+                // go to the output port
+              nfCanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(sourceOutputPort);
+    
+          // clear
+          $('<div class="clear"></div>').appendTo(sourceComponent);
+        };
+    
         /**
-         * Shows components upstream from an input port.
+         * Adds a source remote output port to the dialog.
          *
-         * @param {selection} selection The input port selection
-         */
-        showUpstreamFromInputPort: function (selection) {
-            var portEntity = selection.datum();
-
-            $.ajax({
-                type: 'GET',
-                url: config.urls.processGroups + encodeURIComponent(nfCanvasUtils.getParentGroupId()),
-                dataType: 'json'
-            }).done(function (response) {
-                var flow = response.processGroupFlow.flow;
-                var connections = flow.connections;
-                var processGroups = flow.processGroups;
-                var remoteProcessGroups = flow.remoteProcessGroups;
-
-                var portLabel = getDisplayName(portEntity);
-
-                // record details of the current component
-                currentComponentId = portEntity.id;
-                currentComponentLabel = portLabel;
+       * @param {string} parentProcessGroupId               The process group id
+         * @param {jQuery} container                    The container to add to
+       * @param {object} connectionEntity             The connection to the downstream remote output port
+       * @param {array} remoteProcessGroupEntities    The remote process groups
+       */
+      var addSourceRemoteOutputPort = function (parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities) {
+          var remoteProcessGroupEntity;
+          $.each(remoteProcessGroupEntities, function (_, rpge) {
+              if (connectionEntity.sourceGroupId === rpge.id) {
+                  remoteProcessGroupEntity = rpge;
+                  return false;
+              }
+          });
+  
+          // get the group label
+          var remoteGroupLabel = getDisplayName(remoteProcessGroupEntity);
+    
+            // remote process group
+            var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
+          $('<div class="search-result-icon icon-group-remote"></div>').appendTo(sourceComponent);
+          $('<div class="source-component-name go-to-link"></div>').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () {
+                // go to the remote process group
+              nfCanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(sourceComponent);
+    
+          // clear
+            $('<div class="clear"></div>').appendTo(sourceComponent);
+    
+          // get the port label
+          var remotePortLabel = connectionEntity.sourceId;
+          if (connectionEntity.permissions.canRead === true) {
+              remotePortLabel = connectionEntity.component.source.name;
+          } else if (connectionEntity.sourceId === currentComponentId) {
+              remotePortLabel = currentComponentLabel;
+          }
+  
+          // port markup
+            var sourceOutputPort = $('<div class="source-output-port"></div>').appendTo(sourceComponent);
+          $('<div class="search-result-icon icon-port-out"></div>').appendTo(sourceOutputPort);
+          $('<div class="source-output-port-name"></div>').attr('title', remotePortLabel).text(remotePortLabel).appendTo(sourceOutputPort);
+  
+          // clear
+          $('<div class="clear"></div>').appendTo(sourceComponent);
+      };
+  
+      /**
+       * Gets the display name for the specified entity.
+       *
+       * @param entity entity
+       * @returns display name
+       */
+      var getDisplayName = function (entity) {
+          if (entity.permissions.canRead === true) {
+              return entity.component.name;
+          } else if (currentComponentId === entity.id) {
+              return currentComponentLabel;
+          } else {
+              return entity.id;
+          }
+        };
+    
+        return {
+            /**
+             * Initializes the dialog.
+             */
+            init: function () {
+                $('#connections-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                    buttons: [{
+                      buttonText: nf._.msg('nf-go-to.Close'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#connections-dialog').modal('hide');
+                            }
+                        }
+                    }],
+                    handler: {
+                        close: function () {
+                            $('#connections-context').empty();
+                            $('#connections-container').empty();
+                        }
+                    }
+                });
+            },
+    
+            /**
+             * Shows components downstream from a processor.
+             *
+             * @param {selection} selection The processor selection
+             */
+            showDownstreamFromProcessor: function (selection) {
+              var processorEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+  
+              var processorLabel = getDisplayName(processorEntity);
+  
+              // record details of the current component
+              currentComponentId = processorEntity.id;
+              currentComponentLabel = processorLabel;
+    
+                // populate the downstream dialog
+                $('#connections-context')
+                  .append('<div class="search-result-icon icon-processor"></div>')
+                  .append($('<div class="connections-component-name"></div>').text(processorLabel))
+                    .append('<div class="clear"></div>');
+    
+                // add the destination for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the source
+                  if (connectionEntity.sourceId === processorEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are downstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoDownstreamComponents')+'</span>');
+                }
+    
+                // show the downstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components upstream from a processor.
+             *
+             * @param {selection} selection The processor selection
+             */
+            showUpstreamFromProcessor: function (selection) {
+              var processorEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+  
+              var processorLabel = getDisplayName(processorEntity);
+  
+              // record details of the current component
+              currentComponentId = processorEntity.id;
+              currentComponentLabel = processorLabel;
                 
                 // populate the upstream dialog
                 $('#connections-context')
-                    .append('<div class="search-result-icon icon-group"></div>')
-                    .append($('<div class="connections-component-name"></div>').text(nfCanvasUtils.getGroupName()))
-                    .append('<div class="clear"></div>')
-                    .append('<div class="search-result-icon icon-port-in" style="margin-left: 20px;"></div>')
-                    .append($('<div class="connections-component-name"></div>').text(portLabel))
+                  .append('<div class="search-result-icon icon-processor"></div>')
+                  .append($('<div class="connections-component-name"></div>').text(processorLabel))
                     .append('<div class="clear"></div>');
-
+    
                 // add the source for each connection
-                $.each(connections, function (_, connectionEntity) {
+              $.each(connections, function (_, connectionEntity) {
                     // only show connections for which this selection is the destination
-                    if (connectionEntity.destinationId === portEntity.id) {
-                        addConnection(nfCanvasUtils.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                  if (connectionEntity.destinationId === processorEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
                     }
                 });
-
+    
                 // ensure there are upstream components
                 if ($('#connections-container').is(':empty')) {
-                    $('#connections-container').html('<span class="unset">No upstream components</span>');
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
                 }
-
+    
                 // show the upstream dialog
-                $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show');
-            }).fail(nfErrorHandler.handleAjaxError);
-        },
-
-        /**
-         * Shows components downstream from an output port.
-         *
-         * @param {selection} selection The output port selection
-         */
-        showDownstreamFromOutputPort: function (selection) {
-            var portEntity = selection.datum();
-
-            $.ajax({
-                type: 'GET',
-                url: config.urls.processGroups + encodeURIComponent(nfCanvasUtils.getParentGroupId()),
-                dataType: 'json'
-            }).done(function (response) {
-                var flow = response.processGroupFlow.flow;
-                var connections = flow.connections;
-                var processGroups = flow.processGroups;
-                var remoteProcessGroups = flow.remoteProcessGroups;
-
-                var portLabel = getDisplayName(portEntity);
-
-                // record details of the current component
-                currentComponentId = portEntity.id;
-                currentComponentLabel = portLabel;
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components downstream from a process group or a remote process group.
+             *
+             * @param {selection} selection The process group or remote process group selection
+             */
+            showDownstreamFromGroup: function (selection) {
+              var groupEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+  
+              var iconStyle = 'icon-group';
+              if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                  iconStyle = 'icon-group-remote';
+              }
+  
+              var groupLabel = getDisplayName(groupEntity);
+  
+              // record details of the current component
+              currentComponentId = groupEntity.id;
+              currentComponentLabel = groupLabel;
                 
                 // populate the downstream dialog
                 $('#connections-context')
-                    .append('<div class="search-result-icon icon-group"></div>')
-                    .append($('<div class="connections-component-name"></div>').text(nfCanvasUtils.getGroupName()))
-                    .append('<div class="clear"></div>')
-                    .append('<div class="search-result-icon icon-port-out" style="margin-left: 20px;"></div>')
-                    .append($('<div class="connections-component-name"></div>').text(portLabel))
+                  .append($('<div class="search-result-icon"></div>').addClass(iconStyle))
+                  .append($('<div class="connections-component-name"></div>').text(groupLabel))
                     .append('<div class="clear"></div>');
-
+    
                 // add the destination for each connection
-                $.each(connections, function (_, connectionEntity) {
+              $.each(connections, function (_, connectionEntity) {
                     // only show connections for which this selection is the source
-                    if (connectionEntity.sourceId === portEntity.id) {
-                        addConnection(nfCanvasUtils.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                  if (connectionEntity.sourceGroupId === groupEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
                     }
                 });
-
+    
                 // ensure there are downstream components
                 if ($('#connections-container').is(':empty')) {
-                    $('#connections-container').html('<span class="unset">No downstream components</span>');
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoDownstreamComponents')+'</span>');
                 }
-
+    
                 // show the downstream dialog
-                $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show');
-            }).fail(nfErrorHandler.handleAjaxError);
-        },
-
-        /**
-         * Shows components upstream from an output port.
-         *
-         * @param {selection} selection The output port selection
-         */
-        showUpstreamFromOutputPort: function (selection) {
-            var portEntity = selection.datum();
-            var connections = nfCanvasUtils.getComponentByType('Connection').get();
-            var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-            var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-
-            var portLabel = getDisplayName(portEntity);
-            
-            // record details of the current component
-            currentComponentId = portEntity.id;
-            currentComponentLabel = portLabel;
-            
-            // populate the upstream dialog
-            $('#connections-context')
-                .append('<div class="search-result-icon icon-port-out"></div>')
-                .append($('<div class="connections-component-name"></div>').text(portLabel))
-                .append('<div class="clear"></div>');
-
-            // add the source for each connection
-            $.each(connections, function (_, connectionEntity) {
-                // only show connections for which this selection is the destination
-                if (connectionEntity.destinationId === portEntity.id) {
-                    addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components upstream from a process group or a remote process group.
+             *
+             * @param {selection} selection The process group or remote process group selection
+             */
+            showUpstreamFromGroup: function (selection) {
+              var groupEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+  
+              var iconStyle = 'icon-group';
+              if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                  iconStyle = 'icon-group-remote';
+              }
+  
+              var groupLabel = getDisplayName(groupEntity);
+  
+              // record details of the current component
+              currentComponentId = groupEntity.id;
+              currentComponentLabel = groupLabel;
+                
+                // populate the upstream dialog
+                $('#connections-context')
+                  .append($('<div class="search-result-icon"></div>').addClass(iconStyle))
+                  .append($('<div class="connections-component-name"></div>').text(groupLabel))
+                    .append('<div class="clear"></div>');
+    
+                // add the source for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the destination
+                  if (connectionEntity.destinationGroupId === groupEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are upstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
                 }
-            });
-
-            // ensure there are upstream components
-            if ($('#connections-container').is(':empty')) {
-                $('#connections-container').html('<span class="unset">No upstream components</span>');
-            }
-
-            // show the upstream dialog
-            $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show');
-        },
-
-        /**
-         * Shows components downstream from a funnel.
-         *
-         * @param {selection} selection The funnel selection
-         */
-        showDownstreamFromFunnel: function (selection) {
-            var funnelEntity = selection.datum();
-            var connections = nfCanvasUtils.getComponentByType('Connection').get();
-            var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-            var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-
-            // record details of the current component
-            currentComponentId = funnelEntity.id;
-            currentComponentLabel = 'Funnel';
-            
-            // populate the downstream dialog
-            $('#connections-context')
-                .append('<div class="search-result-icon icon-funnel"></div>')
-                .append($('<div class="connections-component-name"></div>').text('Funnel'))
-                .append('<div class="clear"></div>');
-
-            // add the destination for each connection
-            $.each(connections, function (_, connectionEntity) {
-                // only show connections for which this selection is the source
-                if (connectionEntity.sourceId === funnelEntity.id) {
-                    addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+    
+                // show the dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components downstream from an input port.
+             *
+             * @param {selection} selection The input port selection
+             */
+            showDownstreamFromInputPort: function (selection) {
+              var portEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+  
+              var portLabel = getDisplayName(portEntity);
+  
+              // record details of the current component
+              currentComponentId = portEntity.id;
+              currentComponentLabel = portLabel;
+                
+                // populate the downstream dialog
+                $('#connections-context')
+                  .append('<div class="search-result-icon icon-port-in"></div>')
+                  .append($('<div class="connections-component-name"></div>').text(portLabel))
+                    .append('<div class="clear"></div>');
+    
+                // add the destination for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the source
+                  if (connectionEntity.sourceId === portEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are downstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoDownstreamComponents')+'</span>');
                 }
-            });
-
-            // ensure there are downstream components
-            if ($('#connections-container').is(':empty')) {
-                $('#connections-container').html('<span class="unset">No downstream components</span>');
-            }
-
-            // show the downstream dialog
-            $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show');
-        },
-
-        /**
-         * Shows components upstream from a funnel.
-         *
-         * @param {selection} selection The funnel selection
-         */
-        showUpstreamFromFunnel: function (selection) {
-            var funnelEntity = selection.datum();
-            var connections = nfCanvasUtils.getComponentByType('Connection').get();
-            var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-            var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-
-            // record details of the current component
-            currentComponentId = funnelEntity.id;
-            currentComponentLabel = 'Funnel';
-            
-            // populate the upstream dialog
-            $('#connections-context')
-                .append('<div class="search-result-icon icon-funnel"></div>')
-                .append($('<div class="upstream-destination-name"></div>').text('Funnel'))
-                .append('<div class="clear"></div>');
-
-            // add the source for each connection
-            $.each(connections, function (_, connectionEntity) {
-                // only show connections for which this selection is the destination
-                if (connectionEntity.destinationId === funnelEntity.id) {
-                    addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+    
+                // show the downstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components upstream from an input port.
+             *
+             * @param {selection} selection The input port selection
+             */
+            showUpstreamFromInputPort: function (selection) {
+              var portEntity = selection.datum();
+    
+                $.ajax({
+                    type: 'GET',
+                  url: config.urls.processGroups + encodeURIComponent(nfCanvasUtils.getParentGroupId()),
+                    dataType: 'json'
+                }).done(function (response) {
+                  var flow = response.processGroupFlow.flow;
+                  var connections = flow.connections;
+                  var processGroups = flow.processGroups;
+                  var remoteProcessGroups = flow.remoteProcessGroups;
+  
+                  var portLabel = getDisplayName(portEntity);
+  
+                  // record details of the current component
+                  currentComponentId = portEntity.id;
+                  currentComponentLabel = portLabel;
+                    
+                    // populate the upstream dialog
+                    $('#connections-context')
+                      .append('<div class="search-result-icon icon-group"></div>')
+                      .append($('<div class="connections-component-name"></div>').text(nfCanvasUtils.getGroupName()))
+                        .append('<div class="clear"></div>')
+                      .append('<div class="search-result-icon icon-port-in" style="margin-left: 20px;"></div>')
+                      .append($('<div class="connections-component-name"></div>').text(portLabel))
+                        .append('<div class="clear"></div>');
+    
+                    // add the source for each connection
+                  $.each(connections, function (_, connectionEntity) {
+                        // only show connections for which this selection is the destination
+                      if (connectionEntity.destinationId === portEntity.id) {
+                          addConnection(nfCanvasUtils.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                        }
+                    });
+    
+                    // ensure there are upstream components
+                    if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
+                    }
+    
+                    // show the upstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows components downstream from an output port.
+             *
+             * @param {selection} selection The output port selection
+             */
+            showDownstreamFromOutputPort: function (selection) {
+              var portEntity = selection.datum();
+    
+                $.ajax({
+                    type: 'GET',
+                  url: config.urls.processGroups + encodeURIComponent(nfCanvasUtils.getParentGroupId()),
+                    dataType: 'json'
+                }).done(function (response) {
+                  var flow = response.processGroupFlow.flow;
+                  var connections = flow.connections;
+                  var processGroups = flow.processGroups;
+                  var remoteProcessGroups = flow.remoteProcessGroups;
+  
+                  var portLabel = getDisplayName(portEntity);
+  
+                  // record details of the current component
+                  currentComponentId = portEntity.id;
+                  currentComponentLabel = portLabel;
+                    
+                    // populate the downstream dialog
+                    $('#connections-context')
+                      .append('<div class="search-result-icon icon-group"></div>')
+                      .append($('<div class="connections-component-name"></div>').text(nfCanvasUtils.getGroupName()))
+                        .append('<div class="clear"></div>')
+                      .append('<div class="search-result-icon icon-port-out" style="margin-left: 20px;"></div>')
+                      .append($('<div class="connections-component-name"></div>').text(portLabel))
+                        .append('<div class="clear"></div>');
+    
+                    // add the destination for each connection
+                  $.each(connections, function (_, connectionEntity) {
+                        // only show connections for which this selection is the source
+                      if (connectionEntity.sourceId === portEntity.id) {
+                          addConnection(nfCanvasUtils.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                        }
+                    });
+    
+                    // ensure there are downstream components
+                    if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.DownstreamConnections')+'</span>');
+                    }
+    
+                    // show the downstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows components upstream from an output port.
+             *
+             * @param {selection} selection The output port selection
+             */
+            showUpstreamFromOutputPort: function (selection) {
+              var portEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+  
+              var portLabel = getDisplayName(portEntity);
+              
+              // record details of the current component
+              currentComponentId = portEntity.id;
+              currentComponentLabel = portLabel;
+                
+                // populate the upstream dialog
+                $('#connections-context')
+                  .append('<div class="search-result-icon icon-port-out"></div>')
+                  .append($('<div class="connections-component-name"></div>').text(portLabel))
+                    .append('<div class="clear"></div>');
+    
+                // add the source for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the destination
+                  if (connectionEntity.destinationId === portEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are upstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
                 }
-            });
-
-            // ensure there are upstream components
-            if ($('#connections-container').is(':empty')) {
-                $('#connections-container').html('<span class="unset">No upstream components</span>');
+    
+                // show the upstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components downstream from a funnel.
+             *
+             * @param {selection} selection The funnel selection
+             */
+            showDownstreamFromFunnel: function (selection) {
+              var funnelEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+    
+              // record details of the current component
+              currentComponentId = funnelEntity.id;
+              currentComponentLabel = 'Funnel';
+                
+                // populate the downstream dialog
+              $('#connections-context')
+                  .append('<div class="search-result-icon icon-funnel"></div>')
+                  .append($('<div class="connections-component-name"></div>').text('Funnel'))
+                  .append('<div class="clear"></div>');
+    
+                // add the destination for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the source
+                  if (connectionEntity.sourceId === funnelEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are downstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoDownstreamComponents')+'</span>');
+                }
+    
+                // show the downstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components upstream from a funnel.
+             *
+             * @param {selection} selection The funnel selection
+             */
+            showUpstreamFromFunnel: function (selection) {
+              var funnelEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+    
+              // record details of the current component
+              currentComponentId = funnelEntity.id;
+              currentComponentLabel = 'Funnel';
+                
+                // populate the upstream dialog
+              $('#connections-context')
+                  .append('<div class="search-result-icon icon-funnel"></div>')
+                  .append($('<div class="upstream-destination-name"></div>').text('Funnel'))
+                  .append('<div class="clear"></div>');
+    
+                // add the source for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the destination
+                  if (connectionEntity.destinationId === funnelEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are upstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
+                }
+    
+                // show the upstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
             }
-
-            // show the upstream dialog
-            $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('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/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 66ffe3bc382b..dedf04fdca60 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
@@ -1,198 +1,198 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.ErrorHandler',
-                'nf.Common',
-                'nf.Client',
-                'nf.CanvasUtils',
-                'nf.ng.Bridge',
-                'nf.Label'],
-            function ($, d3, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfLabel) {
-                return (nf.LabelConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfLabel));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.LabelConfiguration =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.ErrorHandler'),
-                require('nf.Common'),
-                require('nf.Client'),
-                require('nf.CanvasUtils'),
-                require('nf.ng.Bridge'),
-                require('nf.Label')));
-    } else {
-        nf.LabelConfiguration = factory(root.$,
-            root.d3,
-            root.nf.ErrorHandler,
-            root.nf.Common,
-            root.nf.Client,
-            root.nf.CanvasUtils,
-            root.nf.ng.Bridge,
-            root.nf.Label);
-    }
-}(this, function ($, d3, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfLabel) {
-    'use strict';
-
-    var labelId = '';
-
-    return {
-        /**
-         * Initializes the label details dialog.
-         */
-        init: function () {
-            // make the new property dialog draggable
-            $('#label-configuration').modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: 'Configure Label',
-                buttons: [{
-                    buttonText: 'Apply',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // get the label data
-                            var labelData = d3.select('#id-' + labelId).datum();
-
-                            // get the new values
-                            var labelValue = $('#label-value').val();
-                            var fontSize = $('#label-font-size').combo('getSelectedOption');
-
-                            // build the label entity
-                            var labelEntity = {
-                                'revision': nfClient.getRevision(labelData),
-                                'component': {
-                                    'id': labelId,
-                                    'label': labelValue,
-                                    'style': {
-                                        'font-size': fontSize.value
-                                    }
-                                }
-                            };
-
-                            // save the new label value
-                            $.ajax({
-                                type: 'PUT',
-                                url: labelData.uri,
-                                data: JSON.stringify(labelEntity),
-                                dataType: 'json',
-                                contentType: 'application/json'
-                            }).done(function (response) {
-                                // get the label out of the response
-                                nfLabel.set(response);
-
-                                // inform Angular app values have changed
-                                nfNgBridge.digest();
-                            }).fail(nfErrorHandler.handleAjaxError);
-
-                            // reset and hide the dialog
-                            this.modal('hide');
-                        }
-                    }
-                },
-                    {
-                        buttonText: 'Cancel',
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.ng.Bridge',
+                  'nf.Label'],
+              function ($, d3, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfLabel) {
+                  return (nf.LabelConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfLabel));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.LabelConfiguration =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ng.Bridge'),
+                  require('nf.Label')));
+      } else {
+          nf.LabelConfiguration = factory(root.$,
+              root.d3,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.ng.Bridge,
+              root.nf.Label);
+      }
+  }(this, function ($, d3, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfLabel) {
+      'use strict';
+    
+        var labelId = '';
+    
+        return {
+            /**
+             * Initializes the label details dialog.
+             */
+            init: function () {
+                // make the new property dialog draggable
+                $('#label-configuration').modal({
+                    scrollableContentStyle: 'scrollable',
+                  headerText: nf._.msg('nf-label-configuration.ConfigureLabel'),
+                    buttons: [{
+                      buttonText: nf._.msg('nf-label-configuration.Apply'),
                         color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
                         },
                         handler: {
                             click: function () {
+                                // get the label data
+                                var labelData = d3.select('#id-' + labelId).datum();
+    
+                                // get the new values
+                                var labelValue = $('#label-value').val();
+                                var fontSize = $('#label-font-size').combo('getSelectedOption');
+    
+                                // build the label entity
+                                var labelEntity = {
+                                  'revision': nfClient.getRevision(labelData),
+                                    'component': {
+                                        'id': labelId,
+                                        'label': labelValue,
+                                        'style': {
+                                            'font-size': fontSize.value
+                                        }
+                                    }
+                                };
+    
+                                // save the new label value
+                                $.ajax({
+                                    type: 'PUT',
+                                    url: labelData.uri,
+                                    data: JSON.stringify(labelEntity),
+                                    dataType: 'json',
+                                    contentType: 'application/json'
+                                }).done(function (response) {
+                                    // get the label out of the response
+                                  nfLabel.set(response);
+    
+                                    // inform Angular app values have changed
+                                  nfNgBridge.digest();
+                              }).fail(nfErrorHandler.handleAjaxError);
+    
+                                // reset and hide the dialog
                                 this.modal('hide');
                             }
                         }
-                    }],
-                handler: {
-                    close: function () {
-                        labelId = '';
+                    },
+                        {
+                          buttonText: nf._.msg('nf-label-configuration.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    this.modal('hide');
+                                }
+                            }
+                        }],
+                    handler: {
+                        close: function () {
+                            labelId = '';
+                        }
                     }
-                }
-            });
-
-            // create the available sizes
-            var sizes = [];
-            for (var i = 12; i <= 24; i += 2) {
-                sizes.push({
-                    text: i + 'px',
-                    value: i + 'px'
                 });
-            }
-
-            // initialize the font size combo
-            $('#label-font-size').combo({
-                options: sizes,
-                selectedOption: {
-                    value: '12px'
-                },
-                select: function (option) {
-                    var labelValue = $('#label-value');
-
-                    // reset the value to trigger IE to update, otherwise the
-                    // new line height wasn't being picked up
-                    labelValue.css({
-                        'font-size': option.value,
-                        'line-height': option.value
-                    }).val(labelValue.val());
-                }
-            });
-        },
-
-        /**
-         * Shows the configuration for the specified label.
-         *
-         * @argument {selection} selection      The selection
-         */
-        showConfiguration: function (selection) {
-            if (nfCanvasUtils.isLabel(selection)) {
-                var selectionData = selection.datum();
-
-                // get the label value
-                var labelValue = '';
-                if (nfCommon.isDefinedAndNotNull(selectionData.component.label)) {
-                    labelValue = selectionData.component.label;
-                }
-
-                // get the font size
-                var fontSize = '12px';
-                if (nfCommon.isDefinedAndNotNull(selectionData.component.style['font-size'])) {
-                    fontSize = selectionData.component.style['font-size'];
+    
+                // create the available sizes
+                var sizes = [];
+                for (var i = 12; i <= 24; i += 2) {
+                    sizes.push({
+                        text: i + 'px',
+                        value: i + 'px'
+                    });
                 }
-
-                // store the label uri
-                labelId = selectionData.id;
-
-                // populate the dialog
-                $('#label-value').val(labelValue);
-                $('#label-font-size').combo('setSelectedOption', {
-                    value: fontSize
+    
+                // initialize the font size combo
+                $('#label-font-size').combo({
+                    options: sizes,
+                    selectedOption: {
+                        value: '12px'
+                    },
+                    select: function (option) {
+                        var labelValue = $('#label-value');
+    
+                        // reset the value to trigger IE to update, otherwise the
+                        // new line height wasn't being picked up
+                        labelValue.css({
+                            'font-size': option.value,
+                            'line-height': option.value
+                        }).val(labelValue.val());
+                    }
                 });
-
-                // show the detail dialog
-                $('#label-configuration').modal('show');
+            },
+    
+            /**
+             * Shows the configuration for the specified label.
+             *
+             * @argument {selection} selection      The selection
+             */
+            showConfiguration: function (selection) {
+              if (nfCanvasUtils.isLabel(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // get the label value
+                    var labelValue = '';
+                  if (nfCommon.isDefinedAndNotNull(selectionData.component.label)) {
+                        labelValue = selectionData.component.label;
+                    }
+    
+                    // get the font size
+                    var fontSize = '12px';
+                  if (nfCommon.isDefinedAndNotNull(selectionData.component.style['font-size'])) {
+                        fontSize = selectionData.component.style['font-size'];
+                    }
+    
+                    // store the label uri
+                    labelId = selectionData.id;
+    
+                    // populate the dialog
+                    $('#label-value').val(labelValue);
+                    $('#label-font-size').combo('setSelectedOption', {
+                        value: fontSize
+                    });
+    
+                    // show the detail dialog
+                    $('#label-configuration').modal('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/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 1fdf181a178c..2c1ebe0b6859 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
@@ -1,1120 +1,1066 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'Slick',
-                'nf.ErrorHandler',
-                'nf.Common',
-                'nf.Client',
-                'nf.CanvasUtils',
-                'nf.ng.Bridge',
-                'nf.Dialog',
-                'nf.Shell'],
-            function ($, Slick, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfDialog, nfShell) {
-                return (nf.PolicyManagement = factory($, Slick, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfDialog, nfShell));
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.ng.Bridge',
+                  'nf.Dialog',
+                  'nf.Shell'],
+              function ($, Slick, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfDialog, nfShell) {
+                  return (nf.PolicyManagement = factory($, Slick, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfDialog, nfShell));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.PolicyManagement =
+              factory(require('jquery'),
+                  require('Slick'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ng.Bridge'),
+                  require('nf.Dialog'),
+                  require('nf.Shell')));
+      } else {
+          nf.PolicyManagement = factory(root.$,
+              root.Slick,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.ng.Bridge,
+              root.nf.Dialog,
+              root.nf.Shell);
+      }
+  }(this, function ($, Slick, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfDialog, nfShell) {
+      'use strict';
+        
+        var config = {
+            urls: {
+                api: '../nifi-api',
+                searchTenants: '../nifi-api/tenants/search-results'
+            }
+        };
+    
+        var initialized = false;
+    
+        var initAddTenantToPolicyDialog = function () {
+            $('#new-policy-user-button').on('click', function () {
+                $('#search-users-dialog').modal('show');
+                $('#search-users-field').focus();
             });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.PolicyManagement =
-            factory(require('jquery'),
-                require('Slick'),
-                require('nf.ErrorHandler'),
-                require('nf.Common'),
-                require('nf.Client'),
-                require('nf.CanvasUtils'),
-                require('nf.ng.Bridge'),
-                require('nf.Dialog'),
-                require('nf.Shell')));
-    } else {
-        nf.PolicyManagement = factory(root.$,
-            root.Slick,
-            root.nf.ErrorHandler,
-            root.nf.Common,
-            root.nf.Client,
-            root.nf.CanvasUtils,
-            root.nf.ng.Bridge,
-            root.nf.Dialog,
-            root.nf.Shell);
-    }
-}(this, function ($, Slick, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfDialog, nfShell) {
-    'use strict';
-    
-    var config = {
-        urls: {
-            api: '../nifi-api',
-            searchTenants: '../nifi-api/tenants/search-results'
-        }
-    };
-
-    var initialized = false;
-
-    var initAddTenantToPolicyDialog = function () {
-        $('#new-policy-user-button').on('click', function () {
-            $('#search-users-dialog').modal('show');
-            $('#search-users-field').focus();
-        });
-
-        $('#delete-policy-button').on('click', function () {
-            promptToDeletePolicy();
-        });
-
-        $('#search-users-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Add Users/Groups',
-            buttons: [{
-                buttonText: 'Add',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
-                handler: {
-                    click: function () {
-                        // add to table and update policy
-                        var policyGrid = $('#policy-table').data('gridInstance');
-                        var policyData = policyGrid.getData();
-
-                        // begin the update
-                        policyData.beginUpdate();
-
-                        // add all users/groups
-                        $.each(getTenantsToAdd($('#allowed-users')), function (_, user) {
-                            // remove the user
-                            policyData.addItem(user);
-                        });
-                        $.each(getTenantsToAdd($('#allowed-groups')), function (_, group) {
-                            // remove the user
-                            policyData.addItem(group);
-                        });
-
-                        // end the update
-                        policyData.endUpdate();
-
-                        // update the policy
-                        updatePolicy();
-
-                        // close the dialog
-                        $('#search-users-dialog').modal('hide');
-                    }
-                }
-            },
-                {
-                    buttonText: 'Cancel',
+    
+            $('#delete-policy-button').on('click', function () {
+                promptToDeletePolicy();
+            });
+    
+            $('#search-users-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-policy-management.AcessUser'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-policy-management.Add'),
                     color: {
-                        base: '#E3E8EB',
-                        hover: '#C7D2D7',
-                        text: '#004849'
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
                     },
                     handler: {
                         click: function () {
+                            // add to table and update policy
+                            var policyGrid = $('#policy-table').data('gridInstance');
+                            var policyData = policyGrid.getData();
+    
+                            // begin the update
+                            policyData.beginUpdate();
+    
+                          // add all users/groups
+                          $.each(getTenantsToAdd($('#allowed-users')), function (_, user) {
+                                // remove the user
+                                policyData.addItem(user);
+                          });
+                          $.each(getTenantsToAdd($('#allowed-groups')), function (_, group) {
+                              // remove the user
+                              policyData.addItem(group);
+                          });
+    
+                            // end the update
+                            policyData.endUpdate();
+    
+                            // update the policy
+                            updatePolicy();
+    
                             // close the dialog
                             $('#search-users-dialog').modal('hide');
                         }
                     }
-                }],
-            handler: {
-                close: function () {
-                    // reset the search fields
-                    $('#search-users-field').userSearchAutocomplete('reset').val('');
-
-                    // clear the selected users/groups
-                    $('#allowed-users, #allowed-groups').empty();
-                }
-            }
-        });
-
-        // listen for removal requests
-        $(document).on('click', 'div.remove-allowed-entity', function () {
-            $(this).closest('li').remove();
-        });
-
-        // configure the user auto complete
-        $.widget('nf.userSearchAutocomplete', $.ui.autocomplete, {
-            reset: function () {
-                this.term = null;
-            },
-            _create: function() {
-                this._super();
-                this.widget().menu('option', 'items', '> :not(.search-no-matches)' );
-            },
-            _normalize: function (searchResults) {
-                var items = [];
-                items.push(searchResults);
-                return items;
-            },
-            _renderMenu: function (ul, items) {
-                // results are normalized into a single element array
-                var searchResults = items[0];
-
-                var allowedGroups = getAllAllowedGroups();
-                var allowedUsers = getAllAllowedUsers();
-
-                var nfUserSearchAutocomplete = this;
-                $.each(searchResults.userGroups, function (_, tenant) {
-                    // see if this match is not already selected
-                    if ($.inArray(tenant.id, allowedGroups) === -1) {
-                        nfUserSearchAutocomplete._renderGroup(ul, $.extend({
-                            type: 'group'
-                        }, tenant));
-                    }
-                });
-                $.each(searchResults.users, function (_, tenant) {
-                    // see if this match is not already selected
-                    if ($.inArray(tenant.id, allowedUsers) === -1) {
-                        nfUserSearchAutocomplete._renderUser(ul, $.extend({
-                            type: 'user'
-                        }, tenant));
-                    }
-                });
-
-                // ensure there were some results
-                if (ul.children().length === 0) {
-                    ul.append('<li class="unset search-no-matches">No users matched the search terms</li>');
-                }
-            },
-            _resizeMenu: function () {
-                var ul = this.menu.element;
-                ul.width($('#search-users-field').outerWidth() - 2);
-            },
-            _renderUser: function (ul, match) {
-                var userContent = $('<a></a>').text(match.component.identity);
-                return $('<li></li>').data('ui-autocomplete-item', match).append(userContent).appendTo(ul);
-            },
-            _renderGroup: function (ul, match) {
-                var groupLabel = $('<span></span>').text(match.component.identity);
-                var groupContent = $('<a></a>').append('<div class="fa fa-users" style="margin-right: 5px;"></div>').append(groupLabel);
-                return $('<li></li>').data('ui-autocomplete-item', match).append(groupContent).appendTo(ul);
-            }
-        });
-
-        // configure the autocomplete field
-        $('#search-users-field').userSearchAutocomplete({
-            minLength: 0,
-            appendTo: '#search-users-results',
-            position: {
-                my: 'left top',
-                at: 'left bottom',
-                offset: '0 1'
-            },
-            source: function (request, response) {
-                // create the search request
-                $.ajax({
-                    type: 'GET',
-                    data: {
-                        q: request.term
-                    },
-                    dataType: 'json',
-                    url: config.urls.searchTenants
-                }).done(function (searchResponse) {
-                    response(searchResponse);
-                });
-            },
-            select: function (event, ui) {
-                addAllowedTenant(ui.item);
-
-                // reset the search field
-                $(this).val('');
-
-                // stop event propagation
-                return false;
-            }
-        });
-    };
-
-    /**
-     * Gets all allowed groups including those already in the policy and those selected while searching (not yet saved).
-     *
-     * @returns {Array}
-     */
-    var getAllAllowedGroups = function () {
-        var policyGrid = $('#policy-table').data('gridInstance');
-        var policyData = policyGrid.getData();
-
-        var userGroups = [];
-
-        // consider existing groups in the policy table
-        var items = policyData.getItems();
-        $.each(items, function (_, item) {
-            if (item.type === 'group') {
-                userGroups.push(item.id);
-            }
-        });
-
-        // also consider groups already selected in the search users dialog
-        $.each(getTenantsToAdd($('#allowed-groups')), function (_, group) {
-            userGroups.push(group.id);
-        });
-
-        return userGroups;
-    };
-
-    /**
-     * Gets the user groups that will be added upon applying the changes.
-     *
-     * @param {jQuery} container
-     * @returns {Array}
-     */
-    var getTenantsToAdd = function (container) {
-        var tenants = [];
-
-        // also consider groups already selected in the search users dialog
-        container.children('li').each(function (_, allowedTenant) {
-            var tenant = $(allowedTenant).data('tenant');
-            if (nfCommon.isDefinedAndNotNull(tenant)) {
-                tenants.push(tenant);
-            }
-        });
-
-        return tenants;
-    };
-
-    /**
-     * Gets all allowed users including those already in the policy and those selected while searching (not yet saved).
-     *
-     * @returns {Array}
-     */
-    var getAllAllowedUsers = function () {
-        var policyGrid = $('#policy-table').data('gridInstance');
-        var policyData = policyGrid.getData();
-
-        var users = [];
-
-        // consider existing users in the policy table
-        var items = policyData.getItems();
-        $.each(items, function (_, item) {
-            if (item.type === 'user') {
-                users.push(item.id);
-            }
-        });
-
-        // also consider users already selected in the search users dialog
-        $.each(getTenantsToAdd($('#allowed-users')), function (_, user) {
-            users.push(user.id);
-        });
-
-        return users;
-    };
-
-    /**
-     * Added the specified tenant to the listing of users/groups which will be added when applied.
-     *
-     * @param allowedTenant user/group to add
-     */
-    var addAllowedTenant = function (allowedTenant) {
-        var allowedTenants = allowedTenant.type === 'user' ? $('#allowed-users') : $('#allowed-groups');
-
-        // append the user
-        var tenant = $('<span></span>').addClass('allowed-entity ellipsis').text(allowedTenant.component.identity).ellipsis();
-        var tenantAction = $('<div></div>').addClass('remove-allowed-entity fa fa-trash');
-        $('<li></li>').data('tenant', allowedTenant).append(tenant).append(tenantAction).appendTo(allowedTenants);
-    };
-
-    /**
-     * Initializes the policy table.
-     */
-    var initPolicyTable = function () {
-        $('#override-policy-dialog').modal({
-            headerText: 'Override Policy',
-            buttons: [{
-                buttonText: 'Override',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
                 },
+                    {
+                      buttonText: nf._.msg('nf-policy-management.Cancel'),
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                // close the dialog
+                                $('#search-users-dialog').modal('hide');
+                            }
+                        }
+                    }],
                 handler: {
-                    click: function () {
-                        // create the policy, copying if appropriate
-                        createPolicy($('#copy-policy-radio-button').is(':checked'));
-
-                        $(this).modal('hide');
+                    close: function () {
+                        // reset the search fields
+                        $('#search-users-field').userSearchAutocomplete('reset').val('');
+    
+                      // clear the selected users/groups
+                      $('#allowed-users, #allowed-groups').empty();
+                  }
+              }
+          });
+  
+          // listen for removal requests
+          $(document).on('click', 'div.remove-allowed-entity', function () {
+              $(this).closest('li').remove();
+            });
+    
+            // configure the user auto complete
+            $.widget('nf.userSearchAutocomplete', $.ui.autocomplete, {
+                reset: function () {
+                    this.term = null;
+                },
+              _create: function() {
+                  this._super();
+                  this.widget().menu('option', 'items', '> :not(.search-no-matches)' );
+              },
+                _normalize: function (searchResults) {
+                    var items = [];
+                    items.push(searchResults);
+                    return items;
+                },
+                _renderMenu: function (ul, items) {
+                    // results are normalized into a single element array
+                    var searchResults = items[0];
+    
+                  var allowedGroups = getAllAllowedGroups();
+                  var allowedUsers = getAllAllowedUsers();
+  
+                  var nfUserSearchAutocomplete = this;
+                    $.each(searchResults.userGroups, function (_, tenant) {
+                      // see if this match is not already selected
+                      if ($.inArray(tenant.id, allowedGroups) === -1) {
+                          nfUserSearchAutocomplete._renderGroup(ul, $.extend({
+                              type: 'group'
+                          }, tenant));
+                      }
+                    });
+                    $.each(searchResults.users, function (_, tenant) {
+                      // see if this match is not already selected
+                      if ($.inArray(tenant.id, allowedUsers) === -1) {
+                          nfUserSearchAutocomplete._renderUser(ul, $.extend({
+                              type: 'user'
+                          }, tenant));
+                      }
+                    });
+    
+                    // ensure there were some results
+                    if (ul.children().length === 0) {
+                      ul.append('<li class="unset search-no-matches">'+nf._.msg('nf-policy-management.NoUserSearch')+'</li>');
                     }
+                },
+                _resizeMenu: function () {
+                    var ul = this.menu.element;
+                  ul.width($('#search-users-field').outerWidth() - 2);
+                },
+                _renderUser: function (ul, match) {
+                  var userContent = $('<a></a>').text(match.component.identity);
+                    return $('<li></li>').data('ui-autocomplete-item', match).append(userContent).appendTo(ul);
+                },
+                _renderGroup: function (ul, match) {
+                  var groupLabel = $('<span></span>').text(match.component.identity);
+                    var groupContent = $('<a></a>').append('<div class="fa fa-users" style="margin-right: 5px;"></div>').append(groupLabel);
+                    return $('<li></li>').data('ui-autocomplete-item', match).append(groupContent).appendTo(ul);
                 }
-            }, {
-                buttonText: 'Cancel',
-                color: {
-                    base: '#E3E8EB',
-                    hover: '#C7D2D7',
-                    text: '#004849'
+            });
+    
+            // configure the autocomplete field
+            $('#search-users-field').userSearchAutocomplete({
+                minLength: 0,
+                appendTo: '#search-users-results',
+                position: {
+                    my: 'left top',
+                    at: 'left bottom',
+                    offset: '0 1'
                 },
-                handler: {
-                    click: function () {
-                        $(this).modal('hide');
+                source: function (request, response) {
+                    // create the search request
+                    $.ajax({
+                        type: 'GET',
+                        data: {
+                            q: request.term
+                        },
+                        dataType: 'json',
+                        url: config.urls.searchTenants
+                    }).done(function (searchResponse) {
+                        response(searchResponse);
+                    });
+              },
+              select: function (event, ui) {
+                  addAllowedTenant(ui.item);
+  
+                  // reset the search field
+                  $(this).val('');
+  
+                  // stop event propagation
+                  return false;
+              }
+          });
+      };
+  
+      /**
+       * Gets all allowed groups including those already in the policy and those selected while searching (not yet saved).
+       *
+       * @returns {Array}
+       */
+      var getAllAllowedGroups = function () {
+          var policyGrid = $('#policy-table').data('gridInstance');
+          var policyData = policyGrid.getData();
+  
+          var userGroups = [];
+  
+          // consider existing groups in the policy table
+          var items = policyData.getItems();
+          $.each(items, function (_, item) {
+              if (item.type === 'group') {
+                  userGroups.push(item.id);
+              }
+          });
+  
+          // also consider groups already selected in the search users dialog
+          $.each(getTenantsToAdd($('#allowed-groups')), function (_, group) {
+              userGroups.push(group.id);
+          });
+  
+          return userGroups;
+      };
+  
+      /**
+       * Gets the user groups that will be added upon applying the changes.
+       *
+       * @param {jQuery} container
+       * @returns {Array}
+       */
+      var getTenantsToAdd = function (container) {
+          var tenants = [];
+  
+          // also consider groups already selected in the search users dialog
+          container.children('li').each(function (_, allowedTenant) {
+              var tenant = $(allowedTenant).data('tenant');
+              if (nfCommon.isDefinedAndNotNull(tenant)) {
+                  tenants.push(tenant);
+              }
+          });
+  
+          return tenants;
+      };
+  
+      /**
+       * Gets all allowed users including those already in the policy and those selected while searching (not yet saved).
+       *
+       * @returns {Array}
+       */
+      var getAllAllowedUsers = function () {
+          var policyGrid = $('#policy-table').data('gridInstance');
+          var policyData = policyGrid.getData();
+  
+          var users = [];
+  
+          // consider existing users in the policy table
+          var items = policyData.getItems();
+          $.each(items, function (_, item) {
+              if (item.type === 'user') {
+                  users.push(item.id);
+              }
+          });
+  
+          // also consider users already selected in the search users dialog
+          $.each(getTenantsToAdd($('#allowed-users')), function (_, user) {
+              users.push(user.id);
+          });
+  
+          return users;
+      };
+  
+      /**
+       * Added the specified tenant to the listing of users/groups which will be added when applied.
+       *
+       * @param allowedTenant user/group to add
+       */
+      var addAllowedTenant = function (allowedTenant) {
+          var allowedTenants = allowedTenant.type === 'user' ? $('#allowed-users') : $('#allowed-groups');
+  
+          // append the user
+          var tenant = $('<span></span>').addClass('allowed-entity ellipsis').text(allowedTenant.component.identity).ellipsis();
+          var tenantAction = $('<div></div>').addClass('remove-allowed-entity fa fa-trash');
+          $('<li></li>').data('tenant', allowedTenant).append(tenant).append(tenantAction).appendTo(allowedTenants);
+      };
+  
+      /**
+       * Initializes the policy table.
+       */
+        var initPolicyTable = function () {
+          $('#override-policy-dialog').modal({
+              headerText: 'Override Policy',
+              buttons: [{
+                  buttonText: 'Override',
+                  color: {
+                      base: '#728E9B',
+                      hover: '#004849',
+                      text: '#ffffff'
+                  },
+                  handler: {
+                      click: function () {
+                          // create the policy, copying if appropriate
+                          createPolicy($('#copy-policy-radio-button').is(':checked'));
+  
+                          $(this).modal('hide');
+                      }
+                  }
+              }, {
+                  buttonText: 'Cancel',
+                  color: {
+                      base: '#E3E8EB',
+                      hover: '#C7D2D7',
+                      text: '#004849'
+                  },
+                  handler: {
+                      click: function () {
+                          $(this).modal('hide');
+                      }
+                  }
+              }],
+              handler: {
+                  close: function () {
+                      // reset the radio button
+                      $('#copy-policy-radio-button').prop('checked', true);
+                  }
+              }
+          });
+  
+          // create/add a policy
+          $('#create-policy-link, #add-local-admin-link').on('click', function () {
+              createPolicy(false);
+          });
+  
+          // override a policy
+          $('#override-policy-link').on('click', function () {
+              $('#override-policy-dialog').modal('show');
+            });
+    
+            // policy type listing
+            $('#policy-type-list').combo({
+              options: [
+                  nfCommon.getPolicyTypeListing('flow'),
+                  nfCommon.getPolicyTypeListing('controller'),
+                  nfCommon.getPolicyTypeListing('provenance'),
+                  nfCommon.getPolicyTypeListing('restricted-components'),
+                  nfCommon.getPolicyTypeListing('policies'),
+                  nfCommon.getPolicyTypeListing('tenants'),
+                  nfCommon.getPolicyTypeListing('site-to-site'),
+                  nfCommon.getPolicyTypeListing('system'),
+                  nfCommon.getPolicyTypeListing('proxy'),
+                  nfCommon.getPolicyTypeListing('counters')],
+                select: function (option) {
+                    if (initialized) {
+                        // record the policy type
+                        $('#selected-policy-type').text(option.value);
+    
+                        // if the option is for a specific component
+                        if (option.value === 'controller' || option.value === 'counters' || option.value === 'policies' || option.value === 'tenants') {
+                            // update the policy target and let it relaod the policy
+                            $('#controller-policy-target').combo('setSelectedOption', {
+                                'value': 'read'
+                            }).show();
+                        } else {
+                            $('#controller-policy-target').hide();
+    
+                            // record the action
+                          if (option.value === 'proxy' || option.value === 'restricted-components') {
+                              $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
+                            } else {
+                              $('#selected-policy-action').text(nf._.msg('nf-policy-management.Read'));
+                            }
+    
+                            // reload the policy
+                            loadPolicy();
+                        }
                     }
                 }
-            }],
-            handler: {
-                close: function () {
-                    // reset the radio button
-                    $('#copy-policy-radio-button').prop('checked', true);
+            });
+    
+            // controller policy target
+            $('#controller-policy-target').combo({
+                options: [{
+                  text: nf._.msg('nf-policy-management.View'),
+                    value: 'read'
+                }, {
+                  text: nf._.msg('nf-policy-management.Modify'),
+                    value: 'write'
+                }],
+                select: function (option) {
+                    if (initialized) {
+                        // record the policy action
+                        $('#selected-policy-action').text(option.value);
+    
+                        // reload the policy
+                        loadPolicy();
+                    }
                 }
-            }
-        });
-
-        // create/add a policy
-        $('#create-policy-link, #add-local-admin-link').on('click', function () {
-            createPolicy(false);
-        });
-
-        // override a policy
-        $('#override-policy-link').on('click', function () {
-            $('#override-policy-dialog').modal('show');
-        });
-
-        // policy type listing
-        $('#policy-type-list').combo({
-            options: [
-                nfCommon.getPolicyTypeListing('flow'),
-                nfCommon.getPolicyTypeListing('controller'),
-                nfCommon.getPolicyTypeListing('provenance'),
-                nfCommon.getPolicyTypeListing('restricted-components'),
-                nfCommon.getPolicyTypeListing('policies'),
-                nfCommon.getPolicyTypeListing('tenants'),
-                nfCommon.getPolicyTypeListing('site-to-site'),
-                nfCommon.getPolicyTypeListing('system'),
-                nfCommon.getPolicyTypeListing('proxy'),
-                nfCommon.getPolicyTypeListing('counters')],
-            select: function (option) {
-                if (initialized) {
-                    // record the policy type
-                    $('#selected-policy-type').text(option.value);
-
-                    // if the option is for a specific component
-                    if (option.value === 'controller' || option.value === 'counters' || option.value === 'policies' || option.value === 'tenants') {
-                        // update the policy target and let it relaod the policy
-                        $('#controller-policy-target').combo('setSelectedOption', {
-                            'value': 'read'
-                        }).show();
-                    } else {
-                        $('#controller-policy-target').hide();
-
-                        // record the action
-                        if (option.value === 'proxy' || option.value === 'restricted-components') {
-                            $('#selected-policy-action').text('write');
-                        } else {
-                            $('#selected-policy-action').text('read');
+            });
+            
+            // component policy target
+            $('#component-policy-target').combo({
+                options: [{
+                  text: nf._.msg('nf-policy-management.ViewComponent'),
+                    value: 'read-component',
+                  description: nf._.msg('nf-policy-management.Message16')
+                }, {
+                  text: nf._.msg('nf-policy-management.ModifyComponent'),
+                    value: 'write-component',
+                  description: nf._.msg('nf-policy-management.Message17')
+                }, {
+                  text: nf._.msg('nf-policy-management.ViewData'),
+                    value: 'read-data',
+                  description: nf._.msg('nf-policy-management.Message18')
+                }, {
+                  text: nf._.msg('nf-policy-management.ModifyData'),
+                    value: 'write-data',
+                  description: nf._.msg('nf-policy-management.Message19')
+                }, {
+                  text: nf._.msg('nf-policy-management.ReceiveData'),
+                    value: 'write-receive-data',
+                  description: nf._.msg('nf-policy-management.Message20'),
+                    disabled: true
+                }, {
+                  text: nf._.msg('nf-policy-management.SendData'),
+                    value: 'write-send-data',
+                  description: nf._.msg('nf-policy-management.Message21'),
+                    disabled: true
+                }, {
+                  text: nf._.msg('nf-policy-management.ViewPolicies'),
+                    value: 'read-policies',
+                  description: nf._.msg('nf-policy-management.Message22')
+                }, {
+                  text: nf._.msg('nf-policy-management.ModifyPolicies'),
+                    value: 'write-policies',
+                  description: nf._.msg('nf-policy-management.Message23')
+                }],
+                select: function (option) {
+                    if (initialized) {
+                        var resource = $('#selected-policy-component-type').text();
+    
+                        if (option.value === 'read-component') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Read'));
+                        } else if (option.value === 'write-component') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
+                        } else if (option.value === 'read-data') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Read'));
+                            resource = ('data/' + resource);
+                        } else if (option.value === 'write-data') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
+                            resource = ('data/' + resource);
+                        } else if (option.value === 'read-policies') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Read'));
+                            resource = ('policies/' + resource);
+                        } else if (option.value === 'write-policies') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
+                            resource = ('policies/' + resource);
+                        } else if (option.value === 'write-receive-data') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
+                            resource = 'data-transfer/input-ports';
+                        } else if (option.value === 'write-send-data') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
+                            resource = 'data-transfer/output-ports';
                         }
-
+    
+                        // set the resource
+                        $('#selected-policy-type').text(resource);
+    
                         // reload the policy
                         loadPolicy();
                     }
                 }
-            }
-        });
-
-        // controller policy target
-        $('#controller-policy-target').combo({
-            options: [{
-                text: 'view',
-                value: 'read'
-            }, {
-                text: 'modify',
-                value: 'write'
-            }],
-            select: function (option) {
-                if (initialized) {
-                    // record the policy action
-                    $('#selected-policy-action').text(option.value);
-
-                    // reload the policy
-                    loadPolicy();
+            });
+    
+            // function for formatting the user identity
+            var identityFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+                if (dataContext.type === 'group') {
+                    markup += '<div class="fa fa-users" style="margin-right: 5px;"></div>';
                 }
-            }
-        });
-        
-        // component policy target
-        $('#component-policy-target').combo({
-            options: [{
-                text: 'view the component',
-                value: 'read-component',
-                description: 'Allows users to view component configuration details'
-            }, {
-                text: 'modify the component',
-                value: 'write-component',
-                description: 'Allows users to modify component configuration details'
-            }, {
-                text: 'view the data',
-                value: 'read-data',
-                description: 'Allows users to view metadata and content for this component through provenance data and flowfile queues in outbound connections'
-            }, {
-                text: 'modify the data',
-                value: 'write-data',
-                description: 'Allows users to empty flowfile queues in outbound connections and submit replays'
-            }, {
-                text: 'receive data via site-to-site',
-                value: 'write-receive-data',
-                description: 'Allows this port to receive data from these NiFi instances',
-                disabled: true
-            }, {
-                text: 'send data via site-to-site',
-                value: 'write-send-data',
-                description: 'Allows this port to send data to these NiFi instances',
-                disabled: true
-            }, {
-                text: 'view the policies',
-                value: 'read-policies',
-                description: 'Allows users to view the list of users who can view/modify this component'
-            }, {
-                text: 'modify the policies',
-                value: 'write-policies',
-                description: 'Allows users to modify the list of users who can view/modify this component'
-            }],
-            select: function (option) {
-                if (initialized) {
-                    var resource = $('#selected-policy-component-type').text();
-
-                    if (option.value === 'read-component') {
-                        $('#selected-policy-action').text('read');
-                    } else if (option.value === 'write-component') {
-                        $('#selected-policy-action').text('write');
-                    } else if (option.value === 'read-data') {
-                        $('#selected-policy-action').text('read');
-                        resource = ('data/' + resource);
-                    } else if (option.value === 'write-data') {
-                        $('#selected-policy-action').text('write');
-                        resource = ('data/' + resource);
-                    } else if (option.value === 'read-policies') {
-                        $('#selected-policy-action').text('read');
-                        resource = ('policies/' + resource);
-                    } else if (option.value === 'write-policies') {
-                        $('#selected-policy-action').text('write');
-                        resource = ('policies/' + resource);
-                    } else if (option.value === 'write-receive-data') {
-                        $('#selected-policy-action').text('write');
-                        resource = 'data-transfer/input-ports';
-                    } else if (option.value === 'write-send-data') {
-                        $('#selected-policy-action').text('write');
-                        resource = 'data-transfer/output-ports';
-                    }
-
-                    // set the resource
-                    $('#selected-policy-type').text(resource);
-
-                    // reload the policy
-                    loadPolicy();
+    
+                markup += dataContext.component.identity;
+    
+                return markup;
+            };
+    
+            // function for formatting the actions column
+            var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+    
+                // see if the user has permissions for the current policy
+                var currentEntity = $('#policy-table').data('policy');
+              var isPolicyEditable = $('#delete-policy-button').is(':disabled') === false;
+              if (currentEntity.permissions.canWrite === true && isPolicyEditable) {
+                  markup += '<div title="'+nf._.msg('nf-policy-management.Remove')+'" class="pointer delete-user fa fa-trash"></div>';
                 }
-            }
-        });
-
-        // function for formatting the user identity
-        var identityFormatter = function (row, cell, value, columnDef, dataContext) {
-            var markup = '';
-            if (dataContext.type === 'group') {
-                markup += '<div class="fa fa-users" style="margin-right: 5px;"></div>';
-            }
-
-            markup += dataContext.component.identity;
-
-            return markup;
-        };
-
-        // function for formatting the actions column
-        var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-            var markup = '';
-
-            // see if the user has permissions for the current policy
-            var currentEntity = $('#policy-table').data('policy');
-            var isPolicyEditable = $('#delete-policy-button').is(':disabled') === false;
-            if (currentEntity.permissions.canWrite === true && isPolicyEditable) {
-                markup += '<div title="Remove" class="pointer delete-user fa fa-trash"></div>';
-            }
-
-            return markup;
-        };
-
-        // initialize the templates table
-        var usersColumns = [
-            {
-                id: 'identity',
-                name: 'User',
-                sortable: true,
-                resizable: true,
-                formatter: identityFormatter
-            },
-            {
-                id: 'actions',
-                name: '&nbsp;',
-                sortable: false,
-                resizable: false,
-                formatter: actionFormatter,
-                width: 100,
-                maxWidth: 100
-            }
-        ];
-
-        var usersOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false
-        };
-
-        // initialize the dataview
-        var policyData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        policyData.setItems([]);
-
-        // initialize the sort
-        sort({
-            columnId: 'identity',
-            sortAsc: true
-        }, policyData);
-
-        // initialize the grid
-        var policyGrid = new Slick.Grid('#policy-table', policyData, usersColumns, usersOptions);
-        policyGrid.setSelectionModel(new Slick.RowSelectionModel());
-        policyGrid.registerPlugin(new Slick.AutoTooltips());
-        policyGrid.setSortColumn('identity', true);
-        policyGrid.onSort.subscribe(function (e, args) {
+    
+                return markup;
+            };
+    
+            // initialize the templates table
+            var usersColumns = [
+              {
+                  id: 'identity',
+                  name: 'User',
+                  sortable: true,
+                  resizable: true,
+                  formatter: identityFormatter
+              },
+              {
+                  id: 'actions',
+                  name: '&nbsp;',
+                  sortable: false,
+                  resizable: false,
+                  formatter: actionFormatter,
+                  width: 100,
+                  maxWidth: 100
+              }
+            ];
+    
+            var usersOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false
+            };
+    
+            // initialize the dataview
+            var policyData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            policyData.setItems([]);
+    
+            // initialize the sort
             sort({
-                columnId: args.sortCol.id,
-                sortAsc: args.sortAsc
+                columnId: 'identity',
+                sortAsc: true
             }, policyData);
-        });
-
-        // configure a click listener
-        policyGrid.onClick.subscribe(function (e, args) {
-            var target = $(e.target);
-
-            // get the node at this row
-            var item = policyData.getItem(args.row);
-
-            // determine the desired action
-            if (policyGrid.getColumns()[args.cell].id === 'actions') {
-                if (target.hasClass('delete-user')) {
-                    promptToRemoveUserFromPolicy(item);
-                }
-            }
-        });
-
-        // wire up the dataview to the grid
-        policyData.onRowCountChanged.subscribe(function (e, args) {
-            policyGrid.updateRowCount();
-            policyGrid.render();
-
-            // update the total number of displayed policy users
-            $('#displayed-policy-users').text(args.current);
-        });
-        policyData.onRowsChanged.subscribe(function (e, args) {
-            policyGrid.invalidateRows(args.rows);
-            policyGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#policy-table').data('gridInstance', policyGrid);
-
-        // initialize the number of displayed items
-        $('#displayed-policy-users').text('0');
-    };
-
-    /**
-     * 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) {
-                var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-                var bString = nfCommon.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){
-                    return 0;
+    
+            // initialize the grid
+            var policyGrid = new Slick.Grid('#policy-table', policyData, usersColumns, usersOptions);
+            policyGrid.setSelectionModel(new Slick.RowSelectionModel());
+            policyGrid.registerPlugin(new Slick.AutoTooltips());
+            policyGrid.setSortColumn('identity', true);
+            policyGrid.onSort.subscribe(function (e, args) {
+                sort({
+                    columnId: args.sortCol.id,
+                    sortAsc: args.sortAsc
+                }, policyData);
+            });
+    
+            // configure a click listener
+            policyGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = policyData.getItem(args.row);
+    
+                // determine the desired action
+                if (policyGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('delete-user')) {
+                        promptToRemoveUserFromPolicy(item);
+                    }
                 }
-                if(a.permissions.canRead){
-                    return 1;
+            });
+    
+            // wire up the dataview to the grid
+            policyData.onRowCountChanged.subscribe(function (e, args) {
+                policyGrid.updateRowCount();
+                policyGrid.render();
+    
+                // update the total number of displayed policy users
+                $('#displayed-policy-users').text(args.current);
+            });
+            policyData.onRowsChanged.subscribe(function (e, args) {
+                policyGrid.invalidateRows(args.rows);
+                policyGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#policy-table').data('gridInstance', policyGrid);
+    
+            // initialize the number of displayed items
+            $('#displayed-policy-users').text('0');
+        };
+    
+        /**
+         * 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) {
+                  var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                  var bString = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                    return aString === bString ? 0 : aString > bString ? 1 : -1;
                 } else {
-                    return -1;
+                    if (!a.permissions.canRead && !b.permissions.canRead){
+                        return 0;
+                    }
+                    if(a.permissions.canRead){
+                        return 1;
+                    } else {
+                        return -1;
+                    }
                 }
-            }
+            };
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
         };
-
-        // perform the sort
-        data.sort(comparer, sortDetails.sortAsc);
-    };
-
-    /**
-     * Prompts for the removal of the specified user.
-     *
-     * @param item
-     */
-    var promptToRemoveUserFromPolicy = function (item) {
-        nfDialog.showYesNoDialog({
-            headerText: 'Update Policy',
-            dialogContent: 'Remove \'' + nfCommon.escapeHtml(item.component.identity) + '\' from this policy?',
-            yesHandler: function () {
-                removeUserFromPolicy(item);
-            }
-        });
-    };
-
-    /**
-     * Removes the specified item from the current policy.
-     *
-     * @param item
-     */
-    var removeUserFromPolicy = function (item) {
-        var policyGrid = $('#policy-table').data('gridInstance');
-        var policyData = policyGrid.getData();
-
-        // begin the update
-        policyData.beginUpdate();
-
-        // remove the user
-        policyData.deleteItem(item.id);
-
-        // end the update
-        policyData.endUpdate();
-
-        // save the configuration
-        updatePolicy();
-    };
-
-    /**
-     * Prompts for the deletion of the selected policy.
-     */
-    var promptToDeletePolicy = function () {
-        nfDialog.showYesNoDialog({
-            headerText: 'Delete Policy',
-            dialogContent: 'By deleting this policy, the permissions for this component will revert to the inherited policy if applicable.',
-            yesText: 'Delete',
-            noText: 'Cancel',
-            yesHandler: function () {
-                deletePolicy();
-            }
-        });
-    };
-
-    /**
-     * Deletes the current policy.
-     */
-    var deletePolicy = function () {
-        var currentEntity = $('#policy-table').data('policy');
-        
-        if (nfCommon.isDefinedAndNotNull(currentEntity)) {
-            $.ajax({
-                type: 'DELETE',
-                url: currentEntity.uri + '?' + $.param(nfClient.getRevision(currentEntity)),
-                dataType: 'json'
-            }).done(function () {
-                loadPolicy();
-            }).fail(function (xhr, status, error) {
-                nfErrorHandler.handleAjaxError(xhr, status, error);
-                resetPolicy();
-                loadPolicy();
-            });
-        } else {
-            nfDialog.showOkDialog({
-                headerText: 'Delete Policy',
-                dialogContent: 'No policy selected'
+    
+        /**
+         * Prompts for the removal of the specified user.
+         *
+         * @param item
+         */
+        var promptToRemoveUserFromPolicy = function (item) {
+          nfDialog.showYesNoDialog({
+              headerText: nf._.msg('nf-policy-management.UpdatePolicy'),
+              dialogContent: nf._.msg('nf-policy-management.Message3') + nf.Common.escapeHtml(item.component.identity) + nf._.msg('nf-policy-management.Message4'),
+                yesHandler: function () {
+                    removeUserFromPolicy(item);
+                }
             });
-        }
-    };
-
-    /**
-     * Gets the currently selected resource.
-     */
-    var getSelectedResourceAndAction = function () {
-        var componentId = $('#selected-policy-component-id').text();
-        var resource = $('#selected-policy-type').text();
-        if (componentId !== '') {
-            resource += ('/' + componentId);
-        }
-
-        return {
-            'action': $('#selected-policy-action').text(),
-            'resource': '/' + resource
         };
-    };
-
-    /**
-     * Populates the table with the specified users and groups.
-     *
-     * @param users
-     * @param userGroups
-     */
-    var populateTable = function (users, userGroups) {
-        var policyGrid = $('#policy-table').data('gridInstance');
-        var policyData = policyGrid.getData();
-
-        // begin the update
-        policyData.beginUpdate();
-
-        var policyUsers = [];
-
-        // add each user
-        $.each(users, function (_, user) {
-            policyUsers.push($.extend({
-                type: 'user'
-            }, user));
-        });
-
-        // add each group
-        $.each(userGroups, function (_, group) {
-            policyUsers.push($.extend({
-                type: 'group'
-            }, group));
-        });
-
-        // set the rows
-        policyData.setItems(policyUsers);
-
-        // end the update
-        policyData.endUpdate();
-
-        // re-sort and clear selection after updating
-        policyData.reSort();
-        policyGrid.invalidate();
-        policyGrid.getSelectionModel().setSelectedRows([]);
-    };
-
-    /**
-     * Converts the specified resource into human readable form.
-     *
-     * @param resource
-     */
-    var getResourceMessage = function (resource) {
-        if (resource === '/policies') {
-            return $('<span>Showing effective policy inherited from all policies.</span>');
-        } else if (resource === '/controller') {
-            return $('<span>Showing effective policy inherited from the controller.</span>');
-        } else {
-            // extract the group id
-            var processGroupId = nfCommon.substringAfterLast(resource, '/');
-            var processGroupName = processGroupId;
-
-            // attempt to resolve the group name
-            var breadcrumbs = nfNgBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs();
-            $.each(breadcrumbs, function (_, breadcrumbEntity) {
-                if (breadcrumbEntity.id === processGroupId) {
-                    processGroupName = breadcrumbEntity.label;
-                    return false;
+    
+        /**
+         * Removes the specified item from the current policy.
+         *
+         * @param item
+         */
+        var removeUserFromPolicy = function (item) {
+            var policyGrid = $('#policy-table').data('gridInstance');
+            var policyData = policyGrid.getData();
+    
+            // begin the update
+            policyData.beginUpdate();
+    
+            // remove the user
+            policyData.deleteItem(item.id);
+    
+            // end the update
+            policyData.endUpdate();
+    
+            // save the configuration
+            updatePolicy();
+        };
+    
+        /**
+         * Prompts for the deletion of the selected policy.
+         */
+        var promptToDeletePolicy = function () {
+          nfDialog.showYesNoDialog({
+              headerText: nf._.msg('nf-policy-management.DeletePolicy'),
+              dialogContent: nf._.msg('nf-policy-management.Message24'),
+              yesText: 'Delete',
+              noText: 'Cancel',
+                yesHandler: function () {
+                    deletePolicy();
                 }
             });
-
-            // build the mark up
-            return $('<span>Showing effective policy inherited from Process Group </span>')
-                .append( $('<span class="link ellipsis" style="max-width: 200px; vertical-align: top;"></span>')
-                    .text(processGroupName)
-                    .attr('title', processGroupName)
-                    .on('click', function () {
-                        // close the shell
-                        $('#shell-close-button').click();
-
-                        // load the correct group and unselect everything if necessary
-                        nfCanvasUtils.getComponentByType('ProcessGroup').enterGroup(processGroupId).done(function () {
-                            nfCanvasUtils.getSelection().classed('selected', false);
-
-                            // inform Angular app that values have changed
-                            nfNgBridge.digest();
-                        });
-                    })
-            ).append('<span>.</span>');
-        }
-    };
-
-    /**
-     * Populates the specified policy.
-     *
-     * @param policyEntity
-     */
-    var populatePolicy = function (policyEntity) {
-        var policy = policyEntity.component;
-
-        // get the currently selected policy
-        var resourceAndAction = getSelectedResourceAndAction();
-
-        // reset of the policy message
-        resetPolicyMessage();
-
-        // store the current policy version
-        $('#policy-table').data('policy', policyEntity);
-
-        // see if the policy is for this resource
-        if (resourceAndAction.resource === policy.resource) {
-            // allow remove when policy is not inherited
-            $('#delete-policy-button').prop('disabled', policyEntity.permissions.canWrite === false);
-
-            // allow modification if allowed
-            $('#new-policy-user-button').prop('disabled', policyEntity.permissions.canWrite === false);
-        } else {
-            $('#policy-message').append(getResourceMessage(policy.resource));
-
-            // policy is inherited, we do not know if the user has permissions to modify the desired policy... show button and let server decide
-            $('#override-policy-message').show();
-
-            // do not support policy deletion/modification
-            $('#delete-policy-button').prop('disabled', true);
-            $('#new-policy-user-button').prop('disabled', true);
-        }
-
-        // populate the table
-        populateTable(policy.users, policy.userGroups);
-    };
-
-    /**
-     * Loads the configuration for the specified process group.
-     */
-    var loadPolicy = function () {
-        var resourceAndAction = getSelectedResourceAndAction();
-
-        var policyDeferred;
-        if (resourceAndAction.resource.startsWith('/policies')) {
-            $('#admin-policy-message').show();
-
-            policyDeferred = $.Deferred(function (deferred) {
+        };
+    
+        /**
+         * Deletes the current policy.
+         */
+        var deletePolicy = function () {
+            var currentEntity = $('#policy-table').data('policy');
+            
+          if (nfCommon.isDefinedAndNotNull(currentEntity)) {
                 $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/policies/' + resourceAndAction.action + resourceAndAction.resource,
+                    type: 'DELETE',
+                  url: currentEntity.uri + '?' + $.param(nfClient.getRevision(currentEntity)),
                     dataType: 'json'
-                }).done(function (policyEntity) {
-                    // update the refresh timestamp
-                    $('#policy-last-refreshed').text(policyEntity.generated);
-
-                    // ensure appropriate actions for the loaded policy
-                    if (policyEntity.permissions.canRead === true) {
-                        var policy = policyEntity.component;
-
-                        // if the return policy is for the desired policy (not inherited, show it)
-                        if (resourceAndAction.resource === policy.resource) {
+                }).done(function () {
+                    loadPolicy();
+                }).fail(function (xhr, status, error) {
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+                    resetPolicy();
+                    loadPolicy();
+                });
+            } else {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-policy-management.DeletePolicy'),
+                  dialogContent: nf._.msg('nf-policy-management.Message6')
+                });
+            }
+        };
+    
+        /**
+         * Gets the currently selected resource.
+         */
+        var getSelectedResourceAndAction = function () {
+            var componentId = $('#selected-policy-component-id').text();
+            var resource = $('#selected-policy-type').text();
+            if (componentId !== '') {
+                resource += ('/' + componentId);
+            }
+    
+            return {
+                'action': $('#selected-policy-action').text(),
+                'resource': '/' + resource
+            };
+        };
+    
+        /**
+         * Populates the table with the specified users and groups.
+         *
+         * @param users
+         * @param userGroups
+         */
+        var populateTable = function (users, userGroups) {
+            var policyGrid = $('#policy-table').data('gridInstance');
+            var policyData = policyGrid.getData();
+    
+            // begin the update
+            policyData.beginUpdate();
+    
+            var policyUsers = [];
+    
+            // add each user
+            $.each(users, function (_, user) {
+                policyUsers.push($.extend({
+                    type: 'user'
+                }, user));
+            });
+    
+            // add each group
+            $.each(userGroups, function (_, group) {
+                policyUsers.push($.extend({
+                    type: 'group'
+                }, group));
+            });
+    
+            // set the rows
+            policyData.setItems(policyUsers);
+    
+            // end the update
+            policyData.endUpdate();
+    
+            // re-sort and clear selection after updating
+            policyData.reSort();
+            policyGrid.invalidate();
+            policyGrid.getSelectionModel().setSelectedRows([]);
+        };
+    
+        /**
+         * Converts the specified resource into human readable form.
+         *
+         * @param resource
+         */
+      var getResourceMessage = function (resource) {
+            if (resource === '/policies') {
+              return $('<span>'+nf._.msg('nf-policy-management.AllPolicies')+'</span>');
+            } else if (resource === '/controller') {
+              return $('<span>'+nf._.msg('nf-policy-management.Controller')+'</span>');
+            } else {
+              // extract the group id
+              var processGroupId = nfCommon.substringAfterLast(resource, '/');
+              var processGroupName = processGroupId;
+  
+              // attempt to resolve the group name
+              var breadcrumbs = nfNgBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs();
+              $.each(breadcrumbs, function (_, breadcrumbEntity) {
+                  if (breadcrumbEntity.id === processGroupId) {
+                      processGroupName = breadcrumbEntity.label;
+                      return false;
+                  }
+              });
+  
+              // build the mark up
+              return $('<span>Showing effective policy inherited from Process Group </span>')
+                  .append( $('<span class="link ellipsis" style="max-width: 200px; vertical-align: top;"></span>')
+                      .text(processGroupName)
+                      .attr('title', processGroupName)
+                      .on('click', function () {
+                          // close the shell
+                          $('#shell-close-button').click();
+  
+                          // load the correct group and unselect everything if necessary
+                          nfCanvasUtils.getComponentByType('ProcessGroup').enterGroup(processGroupId).done(function () {
+                              nfCanvasUtils.getSelection().classed('selected', false);
+  
+                              // inform Angular app that values have changed
+                              nfNgBridge.digest();
+                          });
+                      })
+              ).append('<span>.</span>');
+            }
+        };
+    
+        /**
+         * Populates the specified policy.
+         *
+         * @param policyEntity
+         */
+        var populatePolicy = function (policyEntity) {
+            var policy = policyEntity.component;
+    
+            // get the currently selected policy
+            var resourceAndAction = getSelectedResourceAndAction();
+    
+            // reset of the policy message
+            resetPolicyMessage();
+    
+            // store the current policy version
+            $('#policy-table').data('policy', policyEntity);
+    
+            // see if the policy is for this resource
+            if (resourceAndAction.resource === policy.resource) {
+                // allow remove when policy is not inherited
+                $('#delete-policy-button').prop('disabled', policyEntity.permissions.canWrite === false);
+    
+              // allow modification if allowed
+              $('#new-policy-user-button').prop('disabled', policyEntity.permissions.canWrite === false);
+          } else {
+              $('#policy-message').append(getResourceMessage(policy.resource));
+    
+                // policy is inherited, we do not know if the user has permissions to modify the desired policy... show button and let server decide
+                $('#override-policy-message').show();
+    
+              // do not support policy deletion/modification
+                $('#delete-policy-button').prop('disabled', true);
+              $('#new-policy-user-button').prop('disabled', true);
+            }
+    
+            // populate the table
+            populateTable(policy.users, policy.userGroups);
+        };
+    
+        /**
+         * Loads the configuration for the specified process group.
+         */
+        var loadPolicy = function () {
+            var resourceAndAction = getSelectedResourceAndAction();
+    
+            var policyDeferred;
+            if (resourceAndAction.resource.startsWith('/policies')) {
+                $('#admin-policy-message').show();
+    
+                policyDeferred = $.Deferred(function (deferred) {
+                    $.ajax({
+                        type: 'GET',
+                        url: '../nifi-api/policies/' + resourceAndAction.action + resourceAndAction.resource,
+                        dataType: 'json'
+                    }).done(function (policyEntity) {
+                        // update the refresh timestamp
+                        $('#policy-last-refreshed').text(policyEntity.generated);
+    
+                        // ensure appropriate actions for the loaded policy
+                        if (policyEntity.permissions.canRead === true) {
+                            var policy = policyEntity.component;
+    
+                            // if the return policy is for the desired policy (not inherited, show it)
+                            if (resourceAndAction.resource === policy.resource) {
+                                // populate the policy details
+                                populatePolicy(policyEntity);
+                            } else {
+                                // reset the policy
+                                resetPolicy();
+    
+                                // show an appropriate message
+                              $('#policy-message').text(nf._.msg('nf-policy-management.Text2'));
+    
+                                // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
+                                $('#add-local-admin-message').show();
+                            }
+                        } else {
+                            // reset the policy
+                            resetPolicy();
+    
+                            // show an appropriate message
+                          $('#policy-message').text(nf._.msg('nf-policy-management.Text2'));
+    
+                            // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
+                            $('#add-local-admin-message').show();
+                        }
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                        if (xhr.status === 404) {
+                            // reset the policy
+                            resetPolicy();
+    
+                            // show an appropriate message
+                          $('#policy-message').text(nf._.msg('nf-policy-management.Text2'));
+    
+                            // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
+                            $('#add-local-admin-message').show();
+    
+                            deferred.resolve();
+                        } else if (xhr.status === 403) {
+                            // reset the policy
+                            resetPolicy();
+    
+                            // show an appropriate message
+                          $('#policy-message').text(nf._.msg('nf-policy-management.Text3'));
+    
+                            deferred.resolve();
+                        } else {
+                            // reset the policy
+                            resetPolicy();
+    
+                            deferred.reject();
+                          nfErrorHandler.handleAjaxError(xhr, status, error);
+                        }
+                    });
+                }).promise();
+            } else {
+                $('#admin-policy-message').hide();
+    
+                policyDeferred = $.Deferred(function (deferred) {
+                    $.ajax({
+                        type: 'GET',
+                        url: '../nifi-api/policies/' + resourceAndAction.action + resourceAndAction.resource,
+                        dataType: 'json'
+                    }).done(function (policyEntity) {
+                        // return OK so we either have access to the policy or we don't have access to an inherited policy
+    
+                        // update the refresh timestamp
+                        $('#policy-last-refreshed').text(policyEntity.generated);
+    
+                        // ensure appropriate actions for the loaded policy
+                        if (policyEntity.permissions.canRead === true) {
                             // populate the policy details
                             populatePolicy(policyEntity);
                         } else {
                             // reset the policy
                             resetPolicy();
-
+    
+                            // since we cannot read, the policy may be inherited or not... we cannot tell
+                          $('#policy-message').text(nf._.msg('nf-policy-management.Text4'));
+    
+                            // allow option to override because we don't know if it's supported or not
+                            $('#override-policy-message').show();
+                        }
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                        if (xhr.status === 404) {
+                            // reset the policy
+                            resetPolicy();
+    
                             // show an appropriate message
-                            $('#policy-message').text('No component specific administrators.');
-
+                          $('#policy-message').text(nf._.msg('nf-policy-management.Text5'));
+    
                             // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
-                            $('#add-local-admin-message').show();
+                            $('#new-policy-message').show();
+    
+                            deferred.resolve();
+                        } else if (xhr.status === 403) {
+                            // reset the policy
+                            resetPolicy();
+    
+                            // show an appropriate message
+                          $('#policy-message').text(nf._.msg('nf-policy-management.Text6'));
+    
+                            deferred.resolve();
+                        } else {
+                            resetPolicy();
+    
+                            deferred.reject();
+                          nfErrorHandler.handleAjaxError(xhr, status, error);
                         }
-                    } else {
-                        // reset the policy
-                        resetPolicy();
-
-                        // show an appropriate message
-                        $('#policy-message').text('No component specific administrators.');
-
-                        // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
-                        $('#add-local-admin-message').show();
-                    }
-
-                    deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    if (xhr.status === 404) {
-                        // reset the policy
-                        resetPolicy();
-
-                        // show an appropriate message
-                        $('#policy-message').text('No component specific administrators.');
-
-                        // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
-                        $('#add-local-admin-message').show();
-
-                        deferred.resolve();
-                    } else if (xhr.status === 403) {
-                        // reset the policy
-                        resetPolicy();
-
-                        // show an appropriate message
-                        $('#policy-message').text('Not authorized to access the policy for the specified resource.');
-
-                        deferred.resolve();
-                    } else {
-                        // reset the policy
-                        resetPolicy();
-
-                        deferred.reject();
-                        nfErrorHandler.handleAjaxError(xhr, status, error);
-                    }
-                });
-            }).promise();
-        } else {
-            $('#admin-policy-message').hide();
-
-            policyDeferred = $.Deferred(function (deferred) {
-                $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/policies/' + resourceAndAction.action + resourceAndAction.resource,
-                    dataType: 'json'
-                }).done(function (policyEntity) {
-                    // return OK so we either have access to the policy or we don't have access to an inherited policy
-
-                    // update the refresh timestamp
-                    $('#policy-last-refreshed').text(policyEntity.generated);
-
-                    // ensure appropriate actions for the loaded policy
-                    if (policyEntity.permissions.canRead === true) {
-                        // populate the policy details
-                        populatePolicy(policyEntity);
-                    } else {
-                        // reset the policy
-                        resetPolicy();
-
-                        // since we cannot read, the policy may be inherited or not... we cannot tell
-                        $('#policy-message').text('Not authorized to view the policy.');
-
-                        // allow option to override because we don't know if it's supported or not
-                        $('#override-policy-message').show();
-                    }
-
-                    deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    if (xhr.status === 404) {
-                        // reset the policy
-                        resetPolicy();
-
-                        // show an appropriate message
-                        $('#policy-message').text('No policy for the specified resource.');
-
-                        // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
-                        $('#new-policy-message').show();
-
-                        deferred.resolve();
-                    } else if (xhr.status === 403) {
-                        // reset the policy
-                        resetPolicy();
-
-                        // show an appropriate message
-                        $('#policy-message').text('Not authorized to access the policy for the specified resource.');
-
-                        deferred.resolve();
-                    } else {
-                        resetPolicy();
-
-                        deferred.reject();
-                        nfErrorHandler.handleAjaxError(xhr, status, error);
-                    }
-                });
-            }).promise();
-        }
-
-        return policyDeferred;
-    };
-
-    /**
-     * Creates a new policy for the current selection.
-     *
-     * @param copyInheritedPolicy   Whether or not to copy the inherited policy
-     */
-    var createPolicy = function (copyInheritedPolicy) {
-        var resourceAndAction = getSelectedResourceAndAction();
-
-        var users = [];
-        var userGroups = [];
-        if (copyInheritedPolicy === true) {
-            var policyGrid = $('#policy-table').data('gridInstance');
-            var policyData = policyGrid.getData();
-
-            var items = policyData.getItems();
-            $.each(items, function (_, item) {
-                var itemCopy = $.extend({}, item);
-
-                if (itemCopy.type === 'user') {
-                    users.push(itemCopy);
-                } else {
-                    userGroups.push(itemCopy);
-                }
-
-                // remove the type as it was added client side to render differently and is not part of the actual schema
-                delete itemCopy.type;
-            });
-        }
-
-        var entity = {
-            'revision': nfClient.getRevision({
-                'revision': {
-                    'version': 0
-                }
-            }),
-            'component': {
-                'action': resourceAndAction.action,
-                'resource': resourceAndAction.resource,
-                'users': users,
-                'userGroups': userGroups
+                    });
+                }).promise();
             }
+    
+            return policyDeferred;
         };
-
-        $.ajax({
-            type: 'POST',
-            url: '../nifi-api/policies',
-            data: JSON.stringify(entity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).done(function (policyEntity) {
-            // ensure appropriate actions for the loaded policy
-            if (policyEntity.permissions.canRead === true) {
-                // populate the policy details
-                populatePolicy(policyEntity);
-            } else {
-                // the request succeeded but we don't have access to the policy... reset/reload the policy
-                resetPolicy();
-                loadPolicy();
-            }
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Updates the policy for the current selection.
-     */
-    var updatePolicy = function () {
-        var policyGrid = $('#policy-table').data('gridInstance');
-        var policyData = policyGrid.getData();
-
-        var users = [];
-        var userGroups = [];
-
-        var items = policyData.getItems();
-        $.each(items, function (_, item) {
-            var itemCopy = $.extend({}, item);
-
-            if (itemCopy.type === 'user') {
-                users.push(itemCopy);
-            } else {
-                userGroups.push(itemCopy);
-            }
-
-            // remove the type as it was added client side to render differently and is not part of the actual schema
-            delete itemCopy.type;
-        });
-
-        var currentEntity = $('#policy-table').data('policy');
-        if (nfCommon.isDefinedAndNotNull(currentEntity)) {
+    
+        /**
+         * Creates a new policy for the current selection.
+       *
+       * @param copyInheritedPolicy   Whether or not to copy the inherited policy
+         */
+      var createPolicy = function (copyInheritedPolicy) {
+            var resourceAndAction = getSelectedResourceAndAction();
+    
+          var users = [];
+          var userGroups = [];
+          if (copyInheritedPolicy === true) {
+              var policyGrid = $('#policy-table').data('gridInstance');
+              var policyData = policyGrid.getData();
+  
+              var items = policyData.getItems();
+              $.each(items, function (_, item) {
+                  var itemCopy = $.extend({}, item);
+  
+                  if (itemCopy.type === 'user') {
+                      users.push(itemCopy);
+                  } else {
+                      userGroups.push(itemCopy);
+                  }
+  
+                  // remove the type as it was added client side to render differently and is not part of the actual schema
+                  delete itemCopy.type;
+              });
+          }
+  
             var entity = {
-                'revision': nfClient.getRevision(currentEntity),
+              'revision': nfClient.getRevision({
+                    'revision': {
+                        'version': 0
+                    }
+                }),
                 'component': {
-                    'id': currentEntity.id,
-                    'users': users,
-                    'userGroups': userGroups
+                    'action': resourceAndAction.action,
+                  'resource': resourceAndAction.resource,
+                  'users': users,
+                  'userGroups': userGroups
                 }
             };
     
             $.ajax({
-                type: 'PUT',
-                url: currentEntity.uri,
+                type: 'POST',
+                url: '../nifi-api/policies',
                 data: JSON.stringify(entity),
                 dataType: 'json',
                 contentType: 'application/json'
@@ -1128,263 +1074,189 @@
                     resetPolicy();
                     loadPolicy();
                 }
-            }).fail(function (xhr, status, error) {
-                nfErrorHandler.handleAjaxError(xhr, status, error);
-                resetPolicy();
-                loadPolicy();
-            }).always(function () {
-                nfCanvasUtils.reload({
-                    'transition': true
-                });
-            });
-        } else {
-            nfDialog.showOkDialog({
-                headerText: 'Update Policy',
-                dialogContent: 'No policy selected'
-            });
-        }
-    };
-
-    /**
-     * Shows the process group configuration.
-     */
-    var showPolicy = function () {
-        // show the configuration dialog
-        nfShell.showContent('#policy-management').always(function () {
-            reset();
-        });
-
-        // adjust the table size
-        nfPolicyManagement.resetTableSize();
-    };
-
-    /**
-     * Reset the policy message.
-     */
-    var resetPolicyMessage = function () {
-        $('#policy-message').text('').empty();
-        $('#new-policy-message').hide();
-        $('#override-policy-message').hide();
-        $('#add-local-admin-message').hide();
-    };
-
-    /**
-     * Reset the policy.
-     */
-    var resetPolicy = function () {
-        resetPolicyMessage();
-
-        // reset button state
-        $('#delete-policy-button').prop('disabled', true);
-        $('#new-policy-user-button').prop('disabled', true);
-
-        // reset the current policy
-        $('#policy-table').removeData('policy');
-
-        // populate the table with no users
-        populateTable([], []);
-    }
-
-    /**
-     * Resets the policy management dialog.
-     */
-    var reset = function () {
-        resetPolicy();
-
-        // clear the selected policy details
-        $('#selected-policy-type').text('');
-        $('#selected-policy-action').text('');
-        $('#selected-policy-component-id').text('');
-        $('#selected-policy-component-type').text('');
-        
-        // clear the selected component details
-        $('div.policy-selected-component-container').hide();
-    };
-
-    var nfPolicyManagement = {
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
         /**
-         * Initializes the settings page.
+         * Updates the policy for the current selection.
          */
-        init: function () {
-            initAddTenantToPolicyDialog();
-            initPolicyTable();
-
-            $('#policy-refresh-button').on('click', function () {
-                loadPolicy();
+        var updatePolicy = function () {
+            var policyGrid = $('#policy-table').data('gridInstance');
+            var policyData = policyGrid.getData();
+    
+            var users = [];
+            var userGroups = [];
+    
+            var items = policyData.getItems();
+            $.each(items, function (_, item) {
+              var itemCopy = $.extend({}, item);
+  
+              if (itemCopy.type === 'user') {
+                  users.push(itemCopy);
+              } else {
+                  userGroups.push(itemCopy);
+              }
+  
+              // remove the type as it was added client side to render differently and is not part of the actual schema
+              delete itemCopy.type;
             });
-
-            // reset the policy to initialize
-            resetPolicy();
-
-            // mark as initialized
-            initialized = true;
-        },
-
-        /**
-         * Update the size of the grid based on its container's current size.
-         */
-        resetTableSize: function () {
-            var policyTable = $('#policy-table');
-            if (policyTable.is(':visible')) {
-                var policyGrid = policyTable.data('gridInstance');
-                if (nfCommon.isDefinedAndNotNull(policyGrid)) {
-                    policyGrid.resizeCanvas();
-                }
+    
+            var currentEntity = $('#policy-table').data('policy');
+          if (nfCommon.isDefinedAndNotNull(currentEntity)) {
+                var entity = {
+                  'revision': nfClient.getRevision(currentEntity),
+                    'component': {
+                        'id': currentEntity.id,
+                        'users': users,
+                        'userGroups': userGroups
+                    }
+                };
+        
+                $.ajax({
+                    type: 'PUT',
+                    url: currentEntity.uri,
+                    data: JSON.stringify(entity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (policyEntity) {
+                    // ensure appropriate actions for the loaded policy
+                    if (policyEntity.permissions.canRead === true) {
+                        // populate the policy details
+                        populatePolicy(policyEntity);
+                    } else {
+                        // the request succeeded but we don't have access to the policy... reset/reload the policy
+                        resetPolicy();
+                        loadPolicy();
+                    }
+                }).fail(function (xhr, status, error) {
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+                    resetPolicy();
+                    loadPolicy();
+                }).always(function () {
+                  nfCanvasUtils.reload({
+                        'transition': true
+                    });
+                });
+            } else {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-policy-management.UpdatePolicy'),
+                  dialogContent: nf._.msg('nf-policy-management.Message6')
+                });
             }
-        },
-
+        };
+    
         /**
-         * Shows the controller service policy.
-         *
-         * @param d
+         * Shows the process group configuration.
          */
-        showControllerServicePolicy: function (d) {
-            // reset the policy message
-            resetPolicyMessage();
-
-            // update the policy controls visibility
-            $('#component-policy-controls').show();
-            $('#global-policy-controls').hide();
-
-            // update the visibility
-            if (d.permissions.canRead === true) {
-                $('#policy-selected-controller-service-container div.policy-selected-component-name').text(d.component.name);
-            } else {
-                $('#policy-selected-controller-service-container div.policy-selected-component-name').text(d.id);
-            }
-            $('#policy-selected-controller-service-container').show();
-
-            // populate the initial resource
-            $('#selected-policy-component-id').text(d.id);
-            $('#selected-policy-component-type').text('controller-services');
-            $('#component-policy-target')
-                .combo('setOptionEnabled', {
-                    value: 'write-receive-data'
-                }, false)
-                .combo('setOptionEnabled', {
-                    value: 'write-send-data'
-                }, false)
-                .combo('setOptionEnabled', {
-                    value: 'read-data'
-                }, false)
-                .combo('setOptionEnabled', {
-                    value: 'write-data'
-                }, false)
-                .combo('setSelectedOption', {
-                    value: 'read-component'
-                });
-
-            return loadPolicy().always(showPolicy);
-        },
-
+        var showPolicy = function () {
+            // show the configuration dialog
+          nfShell.showContent('#policy-management').always(function () {
+                reset();
+            });
+    
+            // adjust the table size
+          nfPolicyManagement.resetTableSize();
+        };
+    
         /**
-         * Shows the reporting task policy.
-         *
-         * @param d
+         * Reset the policy message.
          */
-        showReportingTaskPolicy: function (d) {
-            // reset the policy message
-            resetPolicyMessage();
-
-            // update the policy controls visibility
-            $('#component-policy-controls').show();
-            $('#global-policy-controls').hide();
-
-            // update the visibility
-            if (d.permissions.canRead === true) {
-                $('#policy-selected-reporting-task-container div.policy-selected-component-name').text(d.component.name);
-            } else {
-                $('#policy-selected-reporting-task-container div.policy-selected-component-name').text(d.id);
-            }
-            $('#policy-selected-reporting-task-container').show();
-            
-            // populate the initial resource
-            $('#selected-policy-component-id').text(d.id);
-            $('#selected-policy-component-type').text('reporting-tasks');
-            $('#component-policy-target')
-                .combo('setOptionEnabled', {
-                    value: 'write-receive-data'
-                }, false)
-                .combo('setOptionEnabled', {
-                    value: 'write-send-data'
-                }, false)
-                .combo('setOptionEnabled', {
-                    value: 'read-data'
-                }, false)
-                .combo('setOptionEnabled', {
-                    value: 'write-data'
-                }, false)
-                .combo('setSelectedOption', {
-                    value: 'read-component'
-                });
-
-            return loadPolicy().always(showPolicy);
-        },
-
+        var resetPolicyMessage = function () {
+          $('#policy-message').text('').empty();
+            $('#new-policy-message').hide();
+            $('#override-policy-message').hide();
+            $('#add-local-admin-message').hide();
+        };
+    
         /**
-         * Shows the template policy.
-         *
-         * @param d
+         * Reset the policy.
          */
-        showTemplatePolicy: function (d) {
-            // reset the policy message
+        var resetPolicy = function () {
             resetPolicyMessage();
-
-            // update the policy controls visibility
-            $('#component-policy-controls').show();
-            $('#global-policy-controls').hide();
-
-            // update the visibility
-            if (d.permissions.canRead === true) {
-                $('#policy-selected-template-container div.policy-selected-component-name').text(d.template.name);
-            } else {
-                $('#policy-selected-template-container div.policy-selected-component-name').text(d.id);
-            }
-            $('#policy-selected-template-container').show();
-
-            // populate the initial resource
-            $('#selected-policy-component-id').text(d.id);
-            $('#selected-policy-component-type').text('templates');
-            $('#component-policy-target')
-                .combo('setOptionEnabled', {
-                    value: 'write-receive-data'
-                }, false)
-                .combo('setOptionEnabled', {
-                    value: 'write-send-data'
-                }, false)
-                .combo('setOptionEnabled', {
-                    value: 'read-data'
-                }, false)
-                .combo('setOptionEnabled', {
-                    value: 'write-data'
-                }, false)
-                .combo('setSelectedOption', {
-                    value: 'read-component'
-                });
-
-            return loadPolicy().always(showPolicy);
-        },
-
+    
+            // reset button state
+            $('#delete-policy-button').prop('disabled', true);
+            $('#new-policy-user-button').prop('disabled', true);
+    
+            // reset the current policy
+            $('#policy-table').removeData('policy');
+    
+            // populate the table with no users
+            populateTable([], []);
+        }
+    
         /**
-         * Shows the component policy dialog.
+         * Resets the policy management dialog.
          */
-        showComponentPolicy: function (selection) {
-            // reset the policy message
-            resetPolicyMessage();
-
-            // update the policy controls visibility
-            $('#component-policy-controls').show();
-            $('#global-policy-controls').hide();
-
-            // update the visibility
-            $('#policy-selected-component-container').show();
+        var reset = function () {
+            resetPolicy();
+    
+            // clear the selected policy details
+            $('#selected-policy-type').text('');
+            $('#selected-policy-action').text('');
+            $('#selected-policy-component-id').text('');
+            $('#selected-policy-component-type').text('');
             
-            var resource;
-            if (selection.empty()) {
-                $('#selected-policy-component-id').text(nfCanvasUtils.getGroupId());
-                resource = 'process-groups';
-
-                // disable site to site option
+            // clear the selected component details
+            $('div.policy-selected-component-container').hide();
+        };
+    
+      var nfPolicyManagement = {
+            /**
+             * Initializes the settings page.
+             */
+            init: function () {
+                initAddTenantToPolicyDialog();
+                initPolicyTable();
+    
+                $('#policy-refresh-button').on('click', function () {
+                    loadPolicy();
+                });
+    
+                // reset the policy to initialize
+                resetPolicy();
+    
+                // mark as initialized
+                initialized = true;
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+                var policyTable = $('#policy-table');
+                if (policyTable.is(':visible')) {
+                    var policyGrid = policyTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(policyGrid)) {
+                        policyGrid.resizeCanvas();
+                    }
+                }
+            },
+    
+            /**
+             * Shows the controller service policy.
+             *
+             * @param d
+             */
+            showControllerServicePolicy: function (d) {
+                // reset the policy message
+                resetPolicyMessage();
+    
+                // update the policy controls visibility
+                $('#component-policy-controls').show();
+                $('#global-policy-controls').hide();
+    
+                // update the visibility
+                if (d.permissions.canRead === true) {
+                    $('#policy-selected-controller-service-container div.policy-selected-component-name').text(d.component.name);
+                } else {
+                    $('#policy-selected-controller-service-container div.policy-selected-component-name').text(d.id);
+                }
+                $('#policy-selected-controller-service-container').show();
+    
+                // populate the initial resource
+                $('#selected-policy-component-id').text(d.id);
+                $('#selected-policy-component-type').text('controller-services');
                 $('#component-policy-target')
                     .combo('setOptionEnabled', {
                         value: 'write-receive-data'
@@ -1394,81 +1266,209 @@
                     }, false)
                     .combo('setOptionEnabled', {
                         value: 'read-data'
-                    }, true)
+                    }, false)
                     .combo('setOptionEnabled', {
                         value: 'write-data'
-                    }, true);
-            } else {
-                var d = selection.datum();
+                    }, false)
+                    .combo('setSelectedOption', {
+                        value: 'read-component'
+                    });
+    
+                return loadPolicy().always(showPolicy);
+            },
+    
+            /**
+             * Shows the reporting task policy.
+             *
+             * @param d
+             */
+            showReportingTaskPolicy: function (d) {
+                // reset the policy message
+                resetPolicyMessage();
+    
+                // update the policy controls visibility
+                $('#component-policy-controls').show();
+                $('#global-policy-controls').hide();
+    
+                // update the visibility
+                if (d.permissions.canRead === true) {
+                    $('#policy-selected-reporting-task-container div.policy-selected-component-name').text(d.component.name);
+                } else {
+                    $('#policy-selected-reporting-task-container div.policy-selected-component-name').text(d.id);
+                }
+                $('#policy-selected-reporting-task-container').show();
+                
+                // populate the initial resource
                 $('#selected-policy-component-id').text(d.id);
-
-                if (nfCanvasUtils.isProcessor(selection)) {
-                    resource = 'processors';
-                } else if (nfCanvasUtils.isProcessGroup(selection)) {
-                    resource = 'process-groups';
-                } else if (nfCanvasUtils.isInputPort(selection)) {
-                    resource = 'input-ports';
-                } else if (nfCanvasUtils.isOutputPort(selection)) {
-                    resource = 'output-ports';
-                } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                    resource = 'remote-process-groups';
-                } else if (nfCanvasUtils.isLabel(selection)) {
-                    resource = 'labels';
-                } else if (nfCanvasUtils.isFunnel(selection)) {
-                    resource = 'funnels';
+                $('#selected-policy-component-type').text('reporting-tasks');
+                $('#component-policy-target')
+                    .combo('setOptionEnabled', {
+                        value: 'write-receive-data'
+                    }, false)
+                    .combo('setOptionEnabled', {
+                        value: 'write-send-data'
+                    }, false)
+                    .combo('setOptionEnabled', {
+                        value: 'read-data'
+                    }, false)
+                    .combo('setOptionEnabled', {
+                        value: 'write-data'
+                    }, false)
+                    .combo('setSelectedOption', {
+                        value: 'read-component'
+                    });
+    
+                return loadPolicy().always(showPolicy);
+            },
+    
+            /**
+             * Shows the template policy.
+             *
+             * @param d
+             */
+            showTemplatePolicy: function (d) {
+                // reset the policy message
+                resetPolicyMessage();
+    
+                // update the policy controls visibility
+                $('#component-policy-controls').show();
+                $('#global-policy-controls').hide();
+    
+                // update the visibility
+                if (d.permissions.canRead === true) {
+                    $('#policy-selected-template-container div.policy-selected-component-name').text(d.template.name);
+                } else {
+                    $('#policy-selected-template-container div.policy-selected-component-name').text(d.id);
                 }
-
-                // enable site to site option
+                $('#policy-selected-template-container').show();
+    
+                // populate the initial resource
+                $('#selected-policy-component-id').text(d.id);
+                $('#selected-policy-component-type').text('templates');
                 $('#component-policy-target')
                     .combo('setOptionEnabled', {
                         value: 'write-receive-data'
-                    }, nfCanvasUtils.isInputPort(selection) && nfCanvasUtils.getParentGroupId() === null)
+                    }, false)
                     .combo('setOptionEnabled', {
                         value: 'write-send-data'
-                    }, nfCanvasUtils.isOutputPort(selection) && nfCanvasUtils.getParentGroupId() === null)
+                    }, false)
                     .combo('setOptionEnabled', {
                         value: 'read-data'
-                    }, !nfCanvasUtils.isLabel(selection))
+                    }, false)
                     .combo('setOptionEnabled', {
                         value: 'write-data'
-                    }, !nfCanvasUtils.isLabel(selection));
-            }
-
-            // populate the initial resource
-            $('#selected-policy-component-type').text(resource);
-            $('#component-policy-target').combo('setSelectedOption', {
-                value: 'read-component'
-            });
-
-            return loadPolicy().always(showPolicy);
-        },
-
-        /**
-         * Shows the global policies dialog.
-         */
-        showGlobalPolicies: function () {
-            // reset the policy message
-            resetPolicyMessage();
-
-            // update the policy controls visibility
-            $('#component-policy-controls').hide();
-            $('#global-policy-controls').show();
-
-            // reload the current policies
-            var policyType = $('#policy-type-list').combo('getSelectedOption').value;
-            $('#selected-policy-type').text(policyType);
-
-            if (policyType === 'controller') {
-                $('#selected-policy-action').text($('#controller-policy-target').combo('getSelectedOption').value);
-            } else if (policyType === 'proxy' || policyType === 'restricted-components') {
-                $('#selected-policy-action').text('write');
-            } else {
-                $('#selected-policy-action').text('read');
+                    }, false)
+                    .combo('setSelectedOption', {
+                        value: 'read-component'
+                    });
+    
+                return loadPolicy().always(showPolicy);
+            },
+    
+            /**
+             * Shows the component policy dialog.
+             */
+            showComponentPolicy: function (selection) {
+                // reset the policy message
+                resetPolicyMessage();
+    
+                // update the policy controls visibility
+                $('#component-policy-controls').show();
+                $('#global-policy-controls').hide();
+    
+                // update the visibility
+                $('#policy-selected-component-container').show();
+                
+                var resource;
+                if (selection.empty()) {
+                  $('#selected-policy-component-id').text(nfCanvasUtils.getGroupId());
+                    resource = 'process-groups';
+    
+                    // disable site to site option
+                    $('#component-policy-target')
+                        .combo('setOptionEnabled', {
+                            value: 'write-receive-data'
+                        }, false)
+                        .combo('setOptionEnabled', {
+                            value: 'write-send-data'
+                        }, false)
+                        .combo('setOptionEnabled', {
+                            value: 'read-data'
+                        }, true)
+                        .combo('setOptionEnabled', {
+                            value: 'write-data'
+                        }, true);
+                } else {
+                    var d = selection.datum();
+                    $('#selected-policy-component-id').text(d.id);
+    
+                  if (nfCanvasUtils.isProcessor(selection)) {
+                        resource = 'processors';
+                  } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                        resource = 'process-groups';
+                  } else if (nfCanvasUtils.isInputPort(selection)) {
+                        resource = 'input-ports';
+                  } else if (nfCanvasUtils.isOutputPort(selection)) {
+                        resource = 'output-ports';
+                  } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                        resource = 'remote-process-groups';
+                  } else if (nfCanvasUtils.isLabel(selection)) {
+                        resource = 'labels';
+                  } else if (nfCanvasUtils.isFunnel(selection)) {
+                        resource = 'funnels';
+                    }
+    
+                    // enable site to site option
+                    $('#component-policy-target')
+                        .combo('setOptionEnabled', {
+                            value: 'write-receive-data'
+                      }, nfCanvasUtils.isInputPort(selection) && nfCanvasUtils.getParentGroupId() === null)
+                        .combo('setOptionEnabled', {
+                            value: 'write-send-data'
+                      }, nfCanvasUtils.isOutputPort(selection) && nfCanvasUtils.getParentGroupId() === null)
+                        .combo('setOptionEnabled', {
+                            value: 'read-data'
+                      }, !nfCanvasUtils.isLabel(selection))
+                        .combo('setOptionEnabled', {
+                            value: 'write-data'
+                      }, !nfCanvasUtils.isLabel(selection));
+                }
+    
+                // populate the initial resource
+                $('#selected-policy-component-type').text(resource);
+                $('#component-policy-target').combo('setSelectedOption', {
+                    value: 'read-component'
+                });
+    
+                return loadPolicy().always(showPolicy);
+            },
+    
+            /**
+             * Shows the global policies dialog.
+             */
+            showGlobalPolicies: function () {
+                // reset the policy message
+                resetPolicyMessage();
+    
+                // update the policy controls visibility
+                $('#component-policy-controls').hide();
+                $('#global-policy-controls').show();
+    
+                // reload the current policies
+                var policyType = $('#policy-type-list').combo('getSelectedOption').value;
+                $('#selected-policy-type').text(policyType);
+    
+                if (policyType === 'controller') {
+                    $('#selected-policy-action').text($('#controller-policy-target').combo('getSelectedOption').value);
+              } else if (policyType === 'proxy' || policyType === 'restricted-components') {
+                    $('#selected-policy-action').text('write');
+                } else {
+                    $('#selected-policy-action').text('read');
+                }
+    
+                return loadPolicy().always(showPolicy);
             }
-
-            return loadPolicy().always(showPolicy);
-        }
-    };
-
-    return nfPolicyManagement;
-}));
\ No newline at end of file
+        };
+    
+      return nfPolicyManagement;
+  }));
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 083b8cdeb7d7..09b3725c2cc1 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
@@ -1,215 +1,215 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.ErrorHandler',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.Client',
-                'nf.CanvasUtils',
-                'nf.ng.Bridge',
-                'nf.Port'],
-            function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfPort) {
-                return (nf.PortConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfPort));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.PortConfiguration =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.ErrorHandler'),
-                require('nf.Common'),
-                require('nf.Dialog'),
-                require('nf.Client'),
-                require('nf.CanvasUtils'),
-                require('nf.ng.Bridge'),
-                require('nf.Port')));
-    } else {
-        nf.PortConfiguration = factory(root.$,
-            root.d3,
-            root.nf.ErrorHandler,
-            root.nf.Common,
-            root.nf.Dialog,
-            root.nf.Client,
-            root.nf.CanvasUtils,
-            root.nf.ng.Bridge,
-            root.nf.Port);
-    }
-}(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfPort) {
-    'use strict';
-
-    /**
-     * Initializes the port dialog.
+    /*
+     * 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.
      */
-    var initPortConfigurationDialog = function () {
-        $('#port-configuration').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Configure Port',
-            buttons: [{
-                buttonText: 'Apply',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
-                handler: {
-                    click: function () {
-                        // get the port data to reference the uri
-                        var portId = $('#port-id').text();
-                        var portData = d3.select('#id-' + portId).datum();
-
-                        // build the updated port
-                        var port = {
-                            'id': portId,
-                            'name': $('#port-name').val(),
-                            'comments': $('#port-comments').val()
-                        };
-
-                        // include the concurrent tasks if appropriate
-                        if ($('#port-concurrent-task-container').is(':visible')) {
-                            port['concurrentlySchedulableTaskCount'] = $('#port-concurrent-tasks').val();
-                        }
-
-                        // mark the processor disabled if appropriate
-                        if ($('#port-enabled').hasClass('checkbox-unchecked')) {
-                            port['state'] = 'DISABLED';
-                        } else if ($('#port-enabled').hasClass('checkbox-checked')) {
-                            port['state'] = 'STOPPED';
-                        }
-
-                        // build the port entity
-                        var portEntity = {
-                            'revision': nfClient.getRevision(portData),
-                            'component': port
-                        };
-
-                        // update the selected component
-                        $.ajax({
-                            type: 'PUT',
-                            data: JSON.stringify(portEntity),
-                            url: portData.uri,
-                            dataType: 'json',
-                            contentType: 'application/json'
-                        }).done(function (response) {
-                            // refresh the port component
-                            nfPort.set(response);
-
-                            // inform Angular app values have changed
-                            nfNgBridge.digest();
-
-                            // close the details panel
-                            $('#port-configuration').modal('hide');
-                        }).fail(function (xhr, status, error) {
-                            // handle bad request locally to keep the dialog open, allowing the user
-                            // to make changes. if the request fails for another reason, the dialog
-                            // should be closed so the issue can be addressed (stale flow for instance)
-                            if (xhr.status === 400) {
-                                var errors = xhr.responseText.split('\n');
-
-                                var content;
-                                if (errors.length === 1) {
-                                    content = $('<span></span>').text(errors[0]);
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.ng.Bridge',
+                  'nf.Port'],
+              function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfPort) {
+                  return (nf.PortConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfPort));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.PortConfiguration =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ng.Bridge'),
+                  require('nf.Port')));
+      } else {
+          nf.PortConfiguration = factory(root.$,
+              root.d3,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.ng.Bridge,
+              root.nf.Port);
+      }
+  }(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfPort) {
+      'use strict';
+    
+        /**
+         * Initializes the port dialog.
+         */
+        var initPortConfigurationDialog = function () {
+            $('#port-configuration').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-port-configuration.ConfigurePort'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-port-configuration.Apply'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // get the port data to reference the uri
+                            var portId = $('#port-id').text();
+                            var portData = d3.select('#id-' + portId).datum();
+    
+                            // build the updated port
+                            var port = {
+                                'id': portId,
+                                'name': $('#port-name').val(),
+                                'comments': $('#port-comments').val()
+                            };
+    
+                            // include the concurrent tasks if appropriate
+                            if ($('#port-concurrent-task-container').is(':visible')) {
+                                port['concurrentlySchedulableTaskCount'] = $('#port-concurrent-tasks').val();
+                            }
+    
+                            // mark the processor disabled if appropriate
+                            if ($('#port-enabled').hasClass('checkbox-unchecked')) {
+                                port['state'] = 'DISABLED';
+                            } else if ($('#port-enabled').hasClass('checkbox-checked')) {
+                                port['state'] = 'STOPPED';
+                            }
+    
+                            // build the port entity
+                            var portEntity = {
+                              'revision': nfClient.getRevision(portData),
+                                'component': port
+                            };
+    
+                            // update the selected component
+                            $.ajax({
+                                type: 'PUT',
+                                data: JSON.stringify(portEntity),
+                                url: portData.uri,
+                                dataType: 'json',
+                                contentType: 'application/json'
+                            }).done(function (response) {
+                                // refresh the port component
+                              nfPort.set(response);
+    
+                                // inform Angular app values have changed
+                              nfNgBridge.digest();
+    
+                                // close the details panel
+                                $('#port-configuration').modal('hide');
+                            }).fail(function (xhr, status, error) {
+                                // handle bad request locally to keep the dialog open, allowing the user
+                                // to make changes. if the request fails for another reason, the dialog
+                                // should be closed so the issue can be addressed (stale flow for instance)
+                                if (xhr.status === 400) {
+                                    var errors = xhr.responseText.split('\n');
+    
+                                    var content;
+                                    if (errors.length === 1) {
+                                        content = $('<span></span>').text(errors[0]);
+                                    } else {
+                                      content = nfCommon.formatUnorderedList(errors);
+                                    }
+    
+                                  nfDialog.showOkDialog({
+                                        dialogContent: content,
+                                      headerText: nf._.msg('nf=port-configuration.PortConfigure')
+                                    });
                                 } else {
-                                    content = nfCommon.formatUnorderedList(errors);
+                                    // close the details panel
+                                    $('#port-configuration').modal('hide');
+    
+                                    // handle the error
+                                  nfErrorHandler.handleAjaxError(xhr, status, error);
                                 }
-
-                                nfDialog.showOkDialog({
-                                    dialogContent: content,
-                                    headerText: 'Port Configuration'
-                                });
-                            } else {
-                                // close the details panel
+                            });
+                        }
+                    }
+                },
+                    {
+                      buttonText: nf._.msg('nf=port-configuration.Cancel'),
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
                                 $('#port-configuration').modal('hide');
-
-                                // handle the error
-                                nfErrorHandler.handleAjaxError(xhr, status, error);
                             }
-                        });
+                        }
+                    }],
+                handler: {
+                    close: function () {
+                        // clear the port details
+                        $('#port-id').text('');
+                        $('#port-name').val('');
+                        $('#port-enabled').removeClass('checkbox-unchecked checkbox-checked');
+                        $('#port-concurrent-tasks').val('');
+                        $('#port-comments').val('');
                     }
                 }
+            });
+        };
+    
+        return {
+            init: function () {
+                initPortConfigurationDialog();
             },
-                {
-                    buttonText: 'Cancel',
-                    color: {
-                        base: '#E3E8EB',
-                        hover: '#C7D2D7',
-                        text: '#004849'
-                    },
-                    handler: {
-                        click: function () {
-                            $('#port-configuration').modal('hide');
-                        }
+    
+            /**
+             * Shows the details for the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            showConfiguration: function (selection) {
+                // if the specified component is a port, load its properties
+              if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // determine if the enabled checkbox is checked or not
+                    var portEnableStyle = 'checkbox-checked';
+                    if (selectionData.component.state === 'DISABLED') {
+                        portEnableStyle = 'checkbox-unchecked';
                     }
-                }],
-            handler: {
-                close: function () {
-                    // clear the port details
-                    $('#port-id').text('');
-                    $('#port-name').val('');
-                    $('#port-enabled').removeClass('checkbox-unchecked checkbox-checked');
-                    $('#port-concurrent-tasks').val('');
-                    $('#port-comments').val('');
-                }
-            }
-        });
-    };
-
-    return {
-        init: function () {
-            initPortConfigurationDialog();
-        },
-
-        /**
-         * Shows the details for the specified selection.
-         *
-         * @argument {selection} selection      The selection
-         */
-        showConfiguration: function (selection) {
-            // if the specified component is a port, load its properties
-            if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
-                var selectionData = selection.datum();
-
-                // determine if the enabled checkbox is checked or not
-                var portEnableStyle = 'checkbox-checked';
-                if (selectionData.component.state === 'DISABLED') {
-                    portEnableStyle = 'checkbox-unchecked';
-                }
-
-                // show concurrent tasks for root groups only
-                if (nfCanvasUtils.getParentGroupId() === null) {
-                    $('#port-concurrent-task-container').show();
-                } else {
-                    $('#port-concurrent-task-container').hide();
+    
+                    // show concurrent tasks for root groups only
+                  if (nfCanvasUtils.getParentGroupId() === null) {
+                        $('#port-concurrent-task-container').show();
+                    } else {
+                        $('#port-concurrent-task-container').hide();
+                    }
+    
+                    // populate the port settings
+                    $('#port-id').text(selectionData.id);
+                    $('#port-name').val(selectionData.component.name);
+                    $('#port-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(portEnableStyle);
+                    $('#port-concurrent-tasks').val(selectionData.component.concurrentlySchedulableTaskCount);
+                    $('#port-comments').val(selectionData.component.comments);
+    
+                    // show the details
+                    $('#port-configuration').modal('show');
                 }
-
-                // populate the port settings
-                $('#port-id').text(selectionData.id);
-                $('#port-name').val(selectionData.component.name);
-                $('#port-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(portEnableStyle);
-                $('#port-concurrent-tasks').val(selectionData.component.concurrentlySchedulableTaskCount);
-                $('#port-comments').val(selectionData.component.comments);
-
-                // show the details
-                $('#port-configuration').modal('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/canvas/nf-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
index 75f191683581..4ca9925f6bba 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
@@ -1,1292 +1,1292 @@
-/*
- * 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 d3, define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Connection',
-                'nf.Common',
-                'nf.Client',
-                'nf.CanvasUtils',
-                'nf.Dialog'],
-            function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, nfDialog) {
-                return (nf.ProcessGroup = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, nfDialog));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ProcessGroup =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.Connection'),
-                require('nf.Common'),
-                require('nf.Client'),
-                require('nf.CanvasUtils'),
-                require('nf.Dialog')));
-    } else {
-        nf.ProcessGroup = factory(root.$,
-            root.d3,
-            root.nf.Connection,
-            root.nf.Common,
-            root.nf.Client,
-            root.nf.CanvasUtils,
-            root.nf.Dialog);
-    }
-}(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, nfDialog) {
-    'use strict';
-
-    var nfConnectable;
-    var nfDraggable;
-    var nfSelectable;
-    var nfContextMenu;
-
-    var PREVIEW_NAME_LENGTH = 30;
-
-    var dimensions = {
-        width: 380,
-        height: 172
-    };
-
-    // ----------------------------
-    // process groups currently on the graph
-    // ----------------------------
-
-    var processGroupMap;
-
-    // -----------------------------------------------------------
-    // cache for components that are added/removed from the canvas
-    // -----------------------------------------------------------
-
-    var removedCache;
-    var addedCache;
-
-    // --------------------
-    // component containers
-    // --------------------
-
-    var processGroupContainer;
-
-    // --------------------------
-    // privately scoped functions
-    // --------------------------
-
-    /**
-     * Gets the process group comments.
+    /*
+     * 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
      *
-     * @param {object} d
-     */
-    var getProcessGroupComments = function (d) {
-        if (nfCommon.isBlank(d.component.comments)) {
-            return 'No comments specified';
-        } else {
-            return d.component.comments;
-        }
-    };
-
-    /**
-     * Selects the process group elements against the current process group map.
-     */
-    var select = function () {
-        return processGroupContainer.selectAll('g.process-group').data(processGroupMap.values(), function (d) {
-            return d.id;
-        });
-    };
-
-    /**
-     * Renders the process groups in the specified selection.
+     *     http://www.apache.org/licenses/LICENSE-2.0
      *
-     * @param {selection} entered           The selection of process groups to be rendered
-     * @param {boolean} selected            Whether the process group should be selected
+     * 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.
      */
-    var renderProcessGroups = function (entered, selected) {
-        if (entered.empty()) {
-            return;
-        }
-
-        var processGroup = entered.append('g')
-            .attr({
-                'id': function (d) {
-                    return 'id-' + d.id;
-                },
-                'class': 'process-group component'
-            })
-            .classed('selected', selected)
-            .call(nfCanvasUtils.position);
-
-        // ----
-        // body
-        // ----
-
-        // process group border
-        processGroup.append('rect')
-            .attr({
-                'class': 'border',
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': function (d) {
-                    return d.dimensions.height;
-                },
-                'fill': 'transparent',
-                'stroke': 'transparent'
-            });
-
-        // process group body
-        processGroup.append('rect')
-            .attr({
-                'class': 'body',
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': function (d) {
-                    return d.dimensions.height;
-                },
-                'filter': 'url(#component-drop-shadow)',
-                'stroke-width': 0
-            });
-
-        // process group name background
-        processGroup.append('rect')
-            .attr({
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': 32,
-                'fill': '#b8c6cd'
-            });
-
-        // process group name
-        processGroup.append('text')
-            .attr({
-                'x': 10,
-                'y': 20,
-                'width': 316,
-                'height': 16,
-                'class': 'process-group-name'
+    
+  /* global d3, define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Connection',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.Dialog'],
+              function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, nfDialog) {
+                  return (nf.ProcessGroup = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, nfDialog));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ProcessGroup =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.Connection'),
+                  require('nf.Common'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.Dialog')));
+      } else {
+          nf.ProcessGroup = factory(root.$,
+              root.d3,
+              root.nf.Connection,
+              root.nf.Common,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.Dialog);
+      }
+  }(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, nfDialog) {
+      'use strict';
+  
+      var nfConnectable;
+      var nfDraggable;
+      var nfSelectable;
+      var nfContextMenu;
+    
+        var PREVIEW_NAME_LENGTH = 30;
+    
+        var dimensions = {
+            width: 380,
+            height: 172
+        };
+    
+        // ----------------------------
+        // process groups currently on the graph
+        // ----------------------------
+    
+        var processGroupMap;
+    
+      // -----------------------------------------------------------
+      // cache for components that are added/removed from the canvas
+      // -----------------------------------------------------------
+  
+      var removedCache;
+      var addedCache;
+  
+        // --------------------
+        // component containers
+        // --------------------
+    
+        var processGroupContainer;
+    
+        // --------------------------
+        // privately scoped functions
+        // --------------------------
+    
+        /**
+         * Gets the process group comments.
+         *
+         * @param {object} d
+         */
+        var getProcessGroupComments = function (d) {
+          if (nfCommon.isBlank(d.component.comments)) {
+              return nf._.msg('nf-process-group.Message1');
+            } else {
+                return d.component.comments;
+            }
+        };
+    
+        /**
+         * Selects the process group elements against the current process group map.
+         */
+        var select = function () {
+            return processGroupContainer.selectAll('g.process-group').data(processGroupMap.values(), function (d) {
+                return d.id;
             });
-
-        // always support selecting and navigation
-        processGroup.on('dblclick', function (d) {
-            // enter this group on double click
-            nfProcessGroup.enterGroup(d.id);
-        })
-            .call(nfSelectable.activate).call(nfContextMenu.activate);
-
-        // only support dragging, connection, and drag and drop if appropriate
-        processGroup.filter(function (d) {
-            return d.permissions.canWrite && d.permissions.canRead;
-        })
-            .on('mouseover.drop', function (d) {
-                // Using mouseover/out to workaround chrome issue #122746
-
-                // get the target and ensure its not already been marked for drop
-                var target = d3.select(this);
-                if (!target.classed('drop')) {
-                    var targetData = target.datum();
-
-                    // see if there is a selection being dragged
-                    var drag = d3.select('rect.drag-selection');
-                    if (!drag.empty()) {
-                        // filter the current selection by this group
-                        var selection = nfCanvasUtils.getSelection().filter(function (d) {
-                            return targetData.id === d.id;
-                        });
-
-                        // ensure this group isn't in the selection
-                        if (selection.empty()) {
-                            // mark that we are hovering over a drop area if appropriate
-                            target.classed('drop', function () {
-                                // get the current selection and ensure its disconnected
-                                return nfConnection.isDisconnected(nfCanvasUtils.getSelection());
+        };
+    
+        /**
+         * Renders the process groups in the specified selection.
+         *
+         * @param {selection} entered           The selection of process groups to be rendered
+         * @param {boolean} selected            Whether the process group should be selected
+         */
+        var renderProcessGroups = function (entered, selected) {
+            if (entered.empty()) {
+                return;
+            }
+    
+            var processGroup = entered.append('g')
+                .attr({
+                    'id': function (d) {
+                        return 'id-' + d.id;
+                    },
+                    'class': 'process-group component'
+                })
+                .classed('selected', selected)
+              .call(nfCanvasUtils.position);
+    
+            // ----
+            // body
+            // ----
+    
+            // process group border
+            processGroup.append('rect')
+                .attr({
+                    'class': 'border',
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': function (d) {
+                        return d.dimensions.height;
+                    },
+                    'fill': 'transparent',
+                    'stroke': 'transparent'
+                });
+    
+            // process group body
+            processGroup.append('rect')
+                .attr({
+                    'class': 'body',
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': function (d) {
+                        return d.dimensions.height;
+                    },
+                    'filter': 'url(#component-drop-shadow)',
+                    'stroke-width': 0
+                });
+    
+            // process group name background
+            processGroup.append('rect')
+                .attr({
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': 32,
+                    'fill': '#b8c6cd'
+                });
+    
+            // process group name
+            processGroup.append('text')
+                .attr({
+                    'x': 10,
+                    'y': 20,
+                    'width': 316,
+                    'height': 16,
+                    'class': 'process-group-name'
+                });
+    
+            // always support selecting and navigation
+            processGroup.on('dblclick', function (d) {
+                // enter this group on double click
+              nfProcessGroup.enterGroup(d.id);
+            })
+              .call(nfSelectable.activate).call(nfContextMenu.activate);
+    
+            // only support dragging, connection, and drag and drop if appropriate
+            processGroup.filter(function (d) {
+                return d.permissions.canWrite && d.permissions.canRead;
+            })
+                .on('mouseover.drop', function (d) {
+                    // Using mouseover/out to workaround chrome issue #122746
+    
+                    // get the target and ensure its not already been marked for drop
+                    var target = d3.select(this);
+                    if (!target.classed('drop')) {
+                        var targetData = target.datum();
+    
+                        // see if there is a selection being dragged
+                        var drag = d3.select('rect.drag-selection');
+                        if (!drag.empty()) {
+                            // filter the current selection by this group
+                          var selection = nfCanvasUtils.getSelection().filter(function (d) {
+                                return targetData.id === d.id;
                             });
+    
+                            // ensure this group isn't in the selection
+                            if (selection.empty()) {
+                                // mark that we are hovering over a drop area if appropriate
+                                target.classed('drop', function () {
+                                    // get the current selection and ensure its disconnected
+                                  return nfConnection.isDisconnected(nfCanvasUtils.getSelection());
+                                });
+                            }
                         }
                     }
-                }
-            })
-            .on('mouseout.drop', function (d) {
-                // mark that we are no longer hovering over a drop area unconditionally
-                d3.select(this).classed('drop', false);
-            })
-            .call(nfDraggable.activate)
-            .call(nfConnectable.activate);
-    };
-
-    // attempt of space between component count and icon for process group contents
-    var CONTENTS_SPACER = 10;
-    var CONTENTS_VALUE_SPACER = 5;
-
-    /**
-     * Updates the process groups in the specified selection.
-     *
-     * @param {selection} updated               The process groups to be updated
-     */
-    var updateProcessGroups = function (updated) {
-        if (updated.empty()) {
-            return;
-        }
-
-        // process group border authorization
-        updated.select('rect.border')
-            .classed('unauthorized', function (d) {
-                return d.permissions.canRead === false;
-            });
-
-        // process group body authorization
-        updated.select('rect.body')
-            .classed('unauthorized', function (d) {
-                return d.permissions.canRead === false;
-            });
-
-        updated.each(function (processGroupData) {
-            var processGroup = d3.select(this);
-            var details = processGroup.select('g.process-group-details');
-
-            // update the component behavior as appropriate
-            nfCanvasUtils.editable(processGroup, nfConnectable, nfDraggable);
-
-            // if this processor is visible, render everything
-            if (processGroup.classed('visible')) {
-                if (details.empty()) {
-                    details = processGroup.append('g').attr('class', 'process-group-details');
-
-                    // -------------------
-                    // contents background
-                    // -------------------
-
-                    details.append('rect')
-                        .attr({
-                            'x': 0,
-                            'y': 32,
-                            'width': function () {
-                                return processGroupData.dimensions.width
-                            },
-                            'height': 24,
-                            'fill': '#e3e8eb'
+                })
+                .on('mouseout.drop', function (d) {
+                    // mark that we are no longer hovering over a drop area unconditionally
+                    d3.select(this).classed('drop', false);
+                })
+              .call(nfDraggable.activate)
+              .call(nfConnectable.activate);
+        };
+    
+        // attempt of space between component count and icon for process group contents
+        var CONTENTS_SPACER = 10;
+      var CONTENTS_VALUE_SPACER = 5;
+    
+        /**
+         * Updates the process groups in the specified selection.
+         *
+         * @param {selection} updated               The process groups to be updated
+         */
+        var updateProcessGroups = function (updated) {
+            if (updated.empty()) {
+                return;
+            }
+    
+            // process group border authorization
+            updated.select('rect.border')
+                .classed('unauthorized', function (d) {
+                    return d.permissions.canRead === false;
+                });
+    
+            // process group body authorization
+            updated.select('rect.body')
+                .classed('unauthorized', function (d) {
+                    return d.permissions.canRead === false;
+                });
+    
+            updated.each(function (processGroupData) {
+                var processGroup = d3.select(this);
+                var details = processGroup.select('g.process-group-details');
+    
+                // update the component behavior as appropriate
+              nfCanvasUtils.editable(processGroup, nfConnectable, nfDraggable);
+    
+                // if this processor is visible, render everything
+                if (processGroup.classed('visible')) {
+                    if (details.empty()) {
+                        details = processGroup.append('g').attr('class', 'process-group-details');
+    
+                        // -------------------
+                        // contents background
+                        // -------------------
+    
+                        details.append('rect')
+                            .attr({
+                                'x': 0,
+                                'y': 32,
+                                'width': function () {
+                                    return processGroupData.dimensions.width
+                                },
+                                'height': 24,
+                                'fill': '#e3e8eb'
+                            });
+    
+                        // --------
+                        // contents
+                        // --------
+    
+                        // transmitting icon
+                        details.append('text')
+                            .attr({
+                                'x': 10,
+                                'y': 49,
+                                'class': 'process-group-transmitting process-group-contents-icon',
+                                'font-family': 'FontAwesome'
+                            })
+                            .text('\uf140');
+    
+                        // transmitting count
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-transmitting-count process-group-contents-count'
+                            });
+    
+                        // not transmitting icon
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-not-transmitting process-group-contents-icon',
+                                'font-family': 'flowfont'
+                            })
+                            .text('\ue80a');
+    
+                        // not transmitting count
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-not-transmitting-count process-group-contents-count'
+                            });
+    
+                        // running icon
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-running process-group-contents-icon',
+                                'font-family': 'FontAwesome'
+                            })
+                            .text('\uf04b');
+    
+                        // running count
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-running-count process-group-contents-count'
+                            });
+    
+                        // stopped icon
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-stopped process-group-contents-icon',
+                                'font-family': 'FontAwesome'
+                            })
+                            .text('\uf04d');
+    
+                        // stopped count
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-stopped-count process-group-contents-count'
+                            });
+    
+                        // invalid icon
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-invalid process-group-contents-icon',
+                                'font-family': 'FontAwesome'
+                            })
+                            .text('\uf071');
+    
+                        // invalid count
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-invalid-count process-group-contents-count'
+                            });
+    
+                        // disabled icon
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-disabled process-group-contents-icon',
+                                'font-family': 'flowfont'
+                            })
+                            .text('\ue802');
+    
+                        // disabled count
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-disabled-count process-group-contents-count'
+                            });
+    
+                        // ----------------
+                        // stats background
+                        // ----------------
+    
+                        // queued
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 66,
+                                'fill': '#f4f6f7'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 84,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // in
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 85,
+                                'fill': '#ffffff'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 103,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // read/write
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 104,
+                                'fill': '#f4f6f7'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 122,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // out
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 123,
+                                'fill': '#ffffff'
+                            });
+    
+                        // -----
+                        // stats
+                        // -----
+    
+                        // stats label container
+                        var processGroupStatsLabel = details.append('g')
+                            .attr({
+                                'transform': 'translate(6, 75)'
+                            });
+    
+                        // queued label
+                        processGroupStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'x': 4,
+                                'y': 5,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-process-group.Queued'));
+    
+                        // in label
+                        processGroupStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'x': 4,
+                                'y': 24,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-process-group.In'));
+    
+                        // read/write label
+                        processGroupStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'x': 4,
+                                'y': 42,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-process-group.ReadWrite'));
+    
+                        // out label
+                        processGroupStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'x': 4,
+                                'y': 60,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-process-group.Out'));
+    
+                        // stats value container
+                        var processGroupStatsValue = details.append('g')
+                            .attr({
+                                'transform': 'translate(95, 75)'
+                            });
+    
+                        // queued value
+                        var queuedText = processGroupStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'x': 4,
+                                'y': 5,
+                                'class': 'process-group-queued stats-value'
+                            });
+    
+                        // queued count
+                        queuedText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // queued size
+                        queuedText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // in value
+                        var inText = processGroupStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'x': 4,
+                                'y': 24,
+                                'class': 'process-group-in stats-value'
+                            });
+    
+                        // in count
+                        inText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // in size
+                        inText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // in
+                        inText.append('tspan')
+                            .attr({
+                                'class': 'ports'
+                            });
+    
+                        // read/write value
+                        processGroupStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'x': 4,
+                                'y': 42,
+                                'class': 'process-group-read-write stats-value'
+                            });
+    
+                        // out value
+                        var outText = processGroupStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'x': 4,
+                                'y': 60,
+                                'class': 'process-group-out stats-value'
+                            });
+    
+                        // out ports
+                        outText.append('tspan')
+                            .attr({
+                                'class': 'ports'
+                            });
+    
+                        // out count
+                        outText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // out size
+                        outText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // stats value container
+                        var processGroupStatsInfo = details.append('g')
+                            .attr({
+                                'transform': 'translate(335, 75)'
+                            });
+    
+                        // in info
+                        processGroupStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'x': 4,
+                                'y': 24,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-process-group.5min'));
+    
+                        // read/write info
+                        processGroupStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'x': 4,
+                                'y': 42,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-process-group.5min'));
+    
+                        // out info
+                        processGroupStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'x': 4,
+                                'y': 60,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-process-group.5min'));
+    
+                        // --------
+                        // comments
+                        // --------
+    
+                        // process group comments
+                        details.append('text')
+                            .attr({
+                                'x': 10,
+                                'y': 160,
+                                'width': 342,
+                                'height': 22,
+                                'class': 'process-group-comments'
+                            });
+    
+                        // -------------------
+                        // active thread count
+                        // -------------------
+    
+                        // active thread count
+                        details.append('text')
+                            .attr({
+                                'class': 'active-thread-count-icon',
+                                'y': 20
+                            })
+                            .text('\ue83f');
+    
+                        // active thread icon
+                        details.append('text')
+                            .attr({
+                                'class': 'active-thread-count',
+                                'y': 20
+                            });
+    
+                        // ---------
+                        // bulletins
+                        // ---------
+    
+                        // bulletin background
+                        details.append('rect')
+                            .attr({
+                                'class': 'bulletin-background',
+                                'x': function () {
+                                    return processGroupData.dimensions.width - 24;
+                                },
+                                'y': 32,
+                                'width': 24,
+                                'height': 24
+                            });
+    
+                        // bulletin icon
+                        details.append('text')
+                            .attr({
+                                'class': 'bulletin-icon',
+                                'x': function () {
+                                    return processGroupData.dimensions.width - 17;
+                                },
+                                'y': 49
+                            })
+                            .text('\uf24a');
+                    }
+    
+                    // update transmitting
+                  var transmitting = details.select('text.process-group-transmitting')
+                      .classed('transmitting', function (d) {
+                          return d.permissions.canRead && d.activeRemotePortCount > 0;
+                      })
+                      .classed('zero', function (d) {
+                          return d.permissions.canRead && d.activeRemotePortCount === 0;
+                      });
+                    var transmittingCount = details.select('text.process-group-transmitting-count')
+                      .attr('x', function () {
+                          var transmittingCountX = parseInt(transmitting.attr('x'), 10);
+                          return transmittingCountX + Math.round(transmitting.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
+                      })
+                        .text(function (d) {
+                            return d.activeRemotePortCount;
                         });
-
-                    // --------
-                    // contents
-                    // --------
-
-                    // transmitting icon
-                    details.append('text')
-                        .attr({
-                            'x': 10,
-                            'y': 49,
-                            'class': 'process-group-transmitting process-group-contents-icon',
-                            'font-family': 'FontAwesome'
-                        })
-                        .text('\uf140');
-
-                    // transmitting count
-                    details.append('text')
-                        .attr({
-                            'y': 49,
-                            'class': 'process-group-transmitting-count process-group-contents-count'
+    
+                    // update not transmitting
+                    var notTransmitting = details.select('text.process-group-not-transmitting')
+                      .classed('not-transmitting', function (d) {
+                          return d.permissions.canRead && d.inactiveRemotePortCount > 0;
+                      })
+                      .classed('zero', function (d) {
+                          return d.permissions.canRead && d.inactiveRemotePortCount === 0;
+                      })
+                        .attr('x', function () {
+                            var transmittingX = parseInt(transmittingCount.attr('x'), 10);
+                          return transmittingX + Math.round(transmittingCount.node().getComputedTextLength()) + CONTENTS_SPACER;
                         });
-
-                    // not transmitting icon
-                    details.append('text')
-                        .attr({
-                            'y': 49,
-                            'class': 'process-group-not-transmitting process-group-contents-icon',
-                            'font-family': 'flowfont'
+                    var notTransmittingCount = details.select('text.process-group-not-transmitting-count')
+                        .attr('x', function () {
+                            var notTransmittingCountX = parseInt(notTransmitting.attr('x'), 10);
+                          return notTransmittingCountX + Math.round(notTransmitting.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
                         })
-                        .text('\ue80a');
-
-                    // not transmitting count
-                    details.append('text')
-                        .attr({
-                            'y': 49,
-                            'class': 'process-group-not-transmitting-count process-group-contents-count'
+                        .text(function (d) {
+                            return d.inactiveRemotePortCount;
                         });
-
-                    // running icon
-                    details.append('text')
-                        .attr({
-                            'y': 49,
-                            'class': 'process-group-running process-group-contents-icon',
-                            'font-family': 'FontAwesome'
-                        })
-                        .text('\uf04b');
-
-                    // running count
-                    details.append('text')
-                        .attr({
-                            'y': 49,
-                            'class': 'process-group-running-count process-group-contents-count'
+    
+                    // update running
+                    var running = details.select('text.process-group-running')
+                      .classed('running', function (d) {
+                          return d.permissions.canRead && d.component.runningCount > 0;
+                      })
+                      .classed('zero', function (d) {
+                          return d.permissions.canRead && d.component.runningCount === 0;
+                      })
+                        .attr('x', function () {
+                            var notTransmittingX = parseInt(notTransmittingCount.attr('x'), 10);
+                          return notTransmittingX + Math.round(notTransmittingCount.node().getComputedTextLength()) + CONTENTS_SPACER;
                         });
-
-                    // stopped icon
-                    details.append('text')
-                        .attr({
-                            'y': 49,
-                            'class': 'process-group-stopped process-group-contents-icon',
-                            'font-family': 'FontAwesome'
+                    var runningCount = details.select('text.process-group-running-count')
+                        .attr('x', function () {
+                            var runningCountX = parseInt(running.attr('x'), 10);
+                          return runningCountX + Math.round(running.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
                         })
-                        .text('\uf04d');
-
-                    // stopped count
-                    details.append('text')
-                        .attr({
-                            'y': 49,
-                            'class': 'process-group-stopped-count process-group-contents-count'
+                        .text(function (d) {
+                            return d.runningCount;
                         });
-
-                    // invalid icon
-                    details.append('text')
-                        .attr({
-                            'y': 49,
-                            'class': 'process-group-invalid process-group-contents-icon',
-                            'font-family': 'FontAwesome'
-                        })
-                        .text('\uf071');
-
-                    // invalid count
-                    details.append('text')
-                        .attr({
-                            'y': 49,
-                            'class': 'process-group-invalid-count process-group-contents-count'
+    
+                    // update stopped
+                    var stopped = details.select('text.process-group-stopped')
+                      .classed('stopped', function (d) {
+                          return d.permissions.canRead && d.component.stoppedCount > 0;
+                      })
+                      .classed('zero', function (d) {
+                          return d.permissions.canRead && d.component.stoppedCount === 0;
+                      })
+                        .attr('x', function () {
+                            var runningX = parseInt(runningCount.attr('x'), 10);
+                          return runningX + Math.round(runningCount.node().getComputedTextLength()) + CONTENTS_SPACER;
                         });
-
-                    // disabled icon
-                    details.append('text')
-                        .attr({
-                            'y': 49,
-                            'class': 'process-group-disabled process-group-contents-icon',
-                            'font-family': 'flowfont'
+                    var stoppedCount = details.select('text.process-group-stopped-count')
+                        .attr('x', function () {
+                            var stoppedCountX = parseInt(stopped.attr('x'), 10);
+                          return stoppedCountX + Math.round(stopped.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
                         })
-                        .text('\ue802');
-
-                    // disabled count
-                    details.append('text')
-                        .attr({
-                            'y': 49,
-                            'class': 'process-group-disabled-count process-group-contents-count'
-                        });
-
-                    // ----------------
-                    // stats background
-                    // ----------------
-
-                    // queued
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processGroupData.dimensions.width;
-                            },
-                            'height': 19,
-                            'x': 0,
-                            'y': 66,
-                            'fill': '#f4f6f7'
-                        });
-
-                    // border
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processGroupData.dimensions.width;
-                            },
-                            'height': 1,
-                            'x': 0,
-                            'y': 84,
-                            'fill': '#c7d2d7'
-                        });
-
-                    // in
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processGroupData.dimensions.width;
-                            },
-                            'height': 19,
-                            'x': 0,
-                            'y': 85,
-                            'fill': '#ffffff'
-                        });
-
-                    // border
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processGroupData.dimensions.width;
-                            },
-                            'height': 1,
-                            'x': 0,
-                            'y': 103,
-                            'fill': '#c7d2d7'
-                        });
-
-                    // read/write
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processGroupData.dimensions.width;
-                            },
-                            'height': 19,
-                            'x': 0,
-                            'y': 104,
-                            'fill': '#f4f6f7'
-                        });
-
-                    // border
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processGroupData.dimensions.width;
-                            },
-                            'height': 1,
-                            'x': 0,
-                            'y': 122,
-                            'fill': '#c7d2d7'
-                        });
-
-                    // out
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processGroupData.dimensions.width;
-                            },
-                            'height': 19,
-                            'x': 0,
-                            'y': 123,
-                            'fill': '#ffffff'
+                        .text(function (d) {
+                            return d.stoppedCount;
                         });
-
-                    // -----
-                    // stats
-                    // -----
-
-                    // stats label container
-                    var processGroupStatsLabel = details.append('g')
-                        .attr({
-                            'transform': 'translate(6, 75)'
+    
+                    // update invalid
+                    var invalid = details.select('text.process-group-invalid')
+                      .classed('invalid', function (d) {
+                            return d.permissions.canRead && d.component.invalidCount > 0;
+                      })
+                      .classed('zero', function (d) {
+                          return d.permissions.canRead && d.component.invalidCount === 0;
+                      })
+                      .attr('x', function () {
+                          var stoppedX = parseInt(stoppedCount.attr('x'), 10);
+                          return stoppedX + Math.round(stoppedCount.node().getComputedTextLength()) + CONTENTS_SPACER;
                         });
-
-                    // queued label
-                    processGroupStatsLabel.append('text')
-                        .attr({
-                            'width': 73,
-                            'height': 10,
-                            'x': 4,
-                            'y': 5,
-                            'class': 'stats-label'
-                        })
-                        .text('Queued');
-
-                    // in label
-                    processGroupStatsLabel.append('text')
-                        .attr({
-                            'width': 73,
-                            'height': 10,
-                            'x': 4,
-                            'y': 24,
-                            'class': 'stats-label'
-                        })
-                        .text('In');
-
-                    // read/write label
-                    processGroupStatsLabel.append('text')
-                        .attr({
-                            'width': 73,
-                            'height': 10,
-                            'x': 4,
-                            'y': 42,
-                            'class': 'stats-label'
-                        })
-                        .text('Read/Write');
-
-                    // out label
-                    processGroupStatsLabel.append('text')
-                        .attr({
-                            'width': 73,
-                            'height': 10,
-                            'x': 4,
-                            'y': 60,
-                            'class': 'stats-label'
+                    var invalidCount = details.select('text.process-group-invalid-count')
+                        .attr('x', function () {
+                            var invalidCountX = parseInt(invalid.attr('x'), 10);
+                          return invalidCountX + Math.round(invalid.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
                         })
-                        .text('Out');
-
-                    // stats value container
-                    var processGroupStatsValue = details.append('g')
-                        .attr({
-                            'transform': 'translate(95, 75)'
-                        });
-
-                    // queued value
-                    var queuedText = processGroupStatsValue.append('text')
-                        .attr({
-                            'width': 180,
-                            'height': 10,
-                            'x': 4,
-                            'y': 5,
-                            'class': 'process-group-queued stats-value'
-                        });
-
-                    // queued count
-                    queuedText.append('tspan')
-                        .attr({
-                            'class': 'count'
-                        });
-
-                    // queued size
-                    queuedText.append('tspan')
-                        .attr({
-                            'class': 'size'
-                        });
-
-                    // in value
-                    var inText = processGroupStatsValue.append('text')
-                        .attr({
-                            'width': 180,
-                            'height': 10,
-                            'x': 4,
-                            'y': 24,
-                            'class': 'process-group-in stats-value'
-                        });
-
-                    // in count
-                    inText.append('tspan')
-                        .attr({
-                            'class': 'count'
-                        });
-
-                    // in size
-                    inText.append('tspan')
-                        .attr({
-                            'class': 'size'
-                        });
-
-                    // in
-                    inText.append('tspan')
-                        .attr({
-                            'class': 'ports'
-                        });
-
-                    // read/write value
-                    processGroupStatsValue.append('text')
-                        .attr({
-                            'width': 180,
-                            'height': 10,
-                            'x': 4,
-                            'y': 42,
-                            'class': 'process-group-read-write stats-value'
-                        });
-
-                    // out value
-                    var outText = processGroupStatsValue.append('text')
-                        .attr({
-                            'width': 180,
-                            'height': 10,
-                            'x': 4,
-                            'y': 60,
-                            'class': 'process-group-out stats-value'
-                        });
-
-                    // out ports
-                    outText.append('tspan')
-                        .attr({
-                            'class': 'ports'
-                        });
-
-                    // out count
-                    outText.append('tspan')
-                        .attr({
-                            'class': 'count'
-                        });
-
-                    // out size
-                    outText.append('tspan')
-                        .attr({
-                            'class': 'size'
-                        });
-
-                    // stats value container
-                    var processGroupStatsInfo = details.append('g')
-                        .attr({
-                            'transform': 'translate(335, 75)'
+                        .text(function (d) {
+                            return d.invalidCount;
                         });
-
-                    // in info
-                    processGroupStatsInfo.append('text')
-                        .attr({
-                            'width': 25,
-                            'height': 10,
-                            'x': 4,
-                            'y': 24,
-                            'class': 'stats-info'
-                        })
-                        .text('5 min');
-
-                    // read/write info
-                    processGroupStatsInfo.append('text')
-                        .attr({
-                            'width': 25,
-                            'height': 10,
-                            'x': 4,
-                            'y': 42,
-                            'class': 'stats-info'
-                        })
-                        .text('5 min');
-
-                    // out info
-                    processGroupStatsInfo.append('text')
-                        .attr({
-                            'width': 25,
-                            'height': 10,
-                            'x': 4,
-                            'y': 60,
-                            'class': 'stats-info'
-                        })
-                        .text('5 min');
-
-                    // --------
-                    // comments
-                    // --------
-
-                    // process group comments
-                    details.append('text')
-                        .attr({
-                            'x': 10,
-                            'y': 160,
-                            'width': 342,
-                            'height': 22,
-                            'class': 'process-group-comments'
+    
+                    // update disabled
+                    var disabled = details.select('text.process-group-disabled')
+                      .classed('disabled', function (d) {
+                          return d.permissions.canRead && d.component.disabledCount > 0;
+                      })
+                      .classed('zero', function (d) {
+                          return d.permissions.canRead && d.component.disabledCount === 0;
+                      })
+                        .attr('x', function () {
+                            var invalidX = parseInt(invalidCount.attr('x'), 10);
+                          return invalidX + Math.round(invalidCount.node().getComputedTextLength()) + CONTENTS_SPACER;
                         });
-
-                    // -------------------
-                    // active thread count
-                    // -------------------
-
-                    // active thread count
-                    details.append('text')
-                        .attr({
-                            'class': 'active-thread-count-icon',
-                            'y': 20
+                    details.select('text.process-group-disabled-count')
+                        .attr('x', function () {
+                            var disabledCountX = parseInt(disabled.attr('x'), 10);
+                          return disabledCountX + Math.round(disabled.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
                         })
-                        .text('\ue83f');
-
-                    // active thread icon
-                    details.append('text')
-                        .attr({
-                            'class': 'active-thread-count',
-                            'y': 20
-                        });
-
-                    // ---------
-                    // bulletins
-                    // ---------
-
-                    // bulletin background
-                    details.append('rect')
-                        .attr({
-                            'class': 'bulletin-background',
-                            'x': function () {
-                                return processGroupData.dimensions.width - 24;
-                            },
-                            'y': 32,
-                            'width': 24,
-                            'height': 24
+                        .text(function (d) {
+                            return d.disabledCount;
                         });
-
-                    // bulletin icon
-                    details.append('text')
-                        .attr({
-                            'class': 'bulletin-icon',
-                            'x': function () {
-                                return processGroupData.dimensions.width - 17;
-                            },
-                            'y': 49
-                        })
-                        .text('\uf24a');
-                }
-
-                // update transmitting
-                var transmitting = details.select('text.process-group-transmitting')
-                    .classed('transmitting', function (d) {
-                        return d.permissions.canRead && d.activeRemotePortCount > 0;
-                    })
-                    .classed('zero', function (d) {
-                        return d.permissions.canRead && d.activeRemotePortCount === 0;
-                    });
-                var transmittingCount = details.select('text.process-group-transmitting-count')
-                    .attr('x', function () {
-                        var transmittingCountX = parseInt(transmitting.attr('x'), 10);
-                        return transmittingCountX + Math.round(transmitting.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
-                    })
-                    .text(function (d) {
-                        return d.activeRemotePortCount;
-                    });
-
-                // update not transmitting
-                var notTransmitting = details.select('text.process-group-not-transmitting')
-                    .classed('not-transmitting', function (d) {
-                        return d.permissions.canRead && d.inactiveRemotePortCount > 0;
-                    })
-                    .classed('zero', function (d) {
-                        return d.permissions.canRead && d.inactiveRemotePortCount === 0;
-                    })
-                    .attr('x', function () {
-                        var transmittingX = parseInt(transmittingCount.attr('x'), 10);
-                        return transmittingX + Math.round(transmittingCount.node().getComputedTextLength()) + CONTENTS_SPACER;
-                    });
-                var notTransmittingCount = details.select('text.process-group-not-transmitting-count')
-                    .attr('x', function () {
-                        var notTransmittingCountX = parseInt(notTransmitting.attr('x'), 10);
-                        return notTransmittingCountX + Math.round(notTransmitting.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
-                    })
-                    .text(function (d) {
-                        return d.inactiveRemotePortCount;
-                    });
-
-                // update running
-                var running = details.select('text.process-group-running')
-                    .classed('running', function (d) {
-                        return d.permissions.canRead && d.component.runningCount > 0;
-                    })
-                    .classed('zero', function (d) {
-                        return d.permissions.canRead && d.component.runningCount === 0;
-                    })
-                    .attr('x', function () {
-                        var notTransmittingX = parseInt(notTransmittingCount.attr('x'), 10);
-                        return notTransmittingX + Math.round(notTransmittingCount.node().getComputedTextLength()) + CONTENTS_SPACER;
-                    });
-                var runningCount = details.select('text.process-group-running-count')
-                    .attr('x', function () {
-                        var runningCountX = parseInt(running.attr('x'), 10);
-                        return runningCountX + Math.round(running.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
-                    })
-                    .text(function (d) {
-                        return d.runningCount;
-                    });
-
-                // update stopped
-                var stopped = details.select('text.process-group-stopped')
-                    .classed('stopped', function (d) {
-                        return d.permissions.canRead && d.component.stoppedCount > 0;
-                    })
-                    .classed('zero', function (d) {
-                        return d.permissions.canRead && d.component.stoppedCount === 0;
-                    })
-                    .attr('x', function () {
-                        var runningX = parseInt(runningCount.attr('x'), 10);
-                        return runningX + Math.round(runningCount.node().getComputedTextLength()) + CONTENTS_SPACER;
-                    });
-                var stoppedCount = details.select('text.process-group-stopped-count')
-                    .attr('x', function () {
-                        var stoppedCountX = parseInt(stopped.attr('x'), 10);
-                        return stoppedCountX + Math.round(stopped.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
-                    })
-                    .text(function (d) {
-                        return d.stoppedCount;
-                    });
-
-                // update invalid
-                var invalid = details.select('text.process-group-invalid')
-                    .classed('invalid', function (d) {
-                        return d.permissions.canRead && d.component.invalidCount > 0;
-                    })
-                    .classed('zero', function (d) {
-                        return d.permissions.canRead && d.component.invalidCount === 0;
-                    })
-                    .attr('x', function () {
-                        var stoppedX = parseInt(stoppedCount.attr('x'), 10);
-                        return stoppedX + Math.round(stoppedCount.node().getComputedTextLength()) + CONTENTS_SPACER;
-                    });
-                var invalidCount = details.select('text.process-group-invalid-count')
-                    .attr('x', function () {
-                        var invalidCountX = parseInt(invalid.attr('x'), 10);
-                        return invalidCountX + Math.round(invalid.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
-                    })
-                    .text(function (d) {
-                        return d.invalidCount;
-                    });
-
-                // update disabled
-                var disabled = details.select('text.process-group-disabled')
-                    .classed('disabled', function (d) {
-                        return d.permissions.canRead && d.component.disabledCount > 0;
-                    })
-                    .classed('zero', function (d) {
-                        return d.permissions.canRead && d.component.disabledCount === 0;
-                    })
-                    .attr('x', function () {
-                        var invalidX = parseInt(invalidCount.attr('x'), 10);
-                        return invalidX + Math.round(invalidCount.node().getComputedTextLength()) + CONTENTS_SPACER;
-                    });
-                details.select('text.process-group-disabled-count')
-                    .attr('x', function () {
-                        var disabledCountX = parseInt(disabled.attr('x'), 10);
-                        return disabledCountX + Math.round(disabled.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
-                    })
-                    .text(function (d) {
-                        return d.disabledCount;
-                    });
-
-                if (processGroupData.permissions.canRead) {
-                    // update the process group comments
-                    details.select('text.process-group-comments')
-                        .each(function (d) {
-                            var processGroupComments = d3.select(this);
-
-                            // reset the process group name to handle any previous state
-                            processGroupComments.text(null).selectAll('tspan, title').remove();
-
-                            // apply ellipsis to the port name as necessary
-                            nfCanvasUtils.ellipsis(processGroupComments, getProcessGroupComments(d));
-                        }).classed('unset', function (d) {
-                        return nfCommon.isBlank(d.component.comments);
-                    }).append('title').text(function (d) {
-                        return getProcessGroupComments(d);
-                    });
-
-                    // update the process group name
-                    processGroup.select('text.process-group-name')
-                        .each(function (d) {
-                            var processGroupName = d3.select(this);
-
-                            // reset the process group name to handle any previous state
-                            processGroupName.text(null).selectAll('title').remove();
-
-                            // apply ellipsis to the process group name as necessary
-                            nfCanvasUtils.ellipsis(processGroupName, d.component.name);
+    
+                    if (processGroupData.permissions.canRead) {
+                        // update the process group comments
+                        details.select('text.process-group-comments')
+                            .each(function (d) {
+                                var processGroupComments = d3.select(this);
+    
+                                // reset the process group name to handle any previous state
+                                processGroupComments.text(null).selectAll('tspan, title').remove();
+    
+                                // apply ellipsis to the port name as necessary
+                              nfCanvasUtils.ellipsis(processGroupComments, getProcessGroupComments(d));
+                            }).classed('unset', function (d) {
+                          return nfCommon.isBlank(d.component.comments);
                         }).append('title').text(function (d) {
-                        return d.component.name;
-                    });
-                } else {
-                    // clear the process group comments
-                    details.select('text.process-group-comments').text(null);
-
-                    // clear the process group name
-                    processGroup.select('text.process-group-name').text(null);
-                }
-
-                // populate the stats
-                processGroup.call(updateProcessGroupStatus);
-            } else {
-                if (processGroupData.permissions.canRead) {
-                    // update the process group name
-                    processGroup.select('text.process-group-name')
-                        .text(function (d) {
-                            var name = d.component.name;
-                            if (name.length > PREVIEW_NAME_LENGTH) {
-                                return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
-                            } else {
-                                return name;
-                            }
+                            return getProcessGroupComments(d);
                         });
+    
+                        // update the process group name
+                        processGroup.select('text.process-group-name')
+                            .each(function (d) {
+                                var processGroupName = d3.select(this);
+    
+                                // reset the process group name to handle any previous state
+                                processGroupName.text(null).selectAll('title').remove();
+    
+                                // apply ellipsis to the process group name as necessary
+                              nfCanvasUtils.ellipsis(processGroupName, d.component.name);
+                            }).append('title').text(function (d) {
+                            return d.component.name;
+                        });
+                    } else {
+                        // clear the process group comments
+                        details.select('text.process-group-comments').text(null);
+    
+                        // clear the process group name
+                        processGroup.select('text.process-group-name').text(null);
+                    }
+    
+                    // populate the stats
+                    processGroup.call(updateProcessGroupStatus);
                 } else {
-                    // clear the process group name
-                    processGroup.select('text.process-group-name').text(null);
-                }
-
-                // remove the tooltips
-                processGroup.call(removeTooltips);
-
-                // remove the details if necessary
-                if (!details.empty()) {
-                    details.remove();
+                    if (processGroupData.permissions.canRead) {
+                        // update the process group name
+                        processGroup.select('text.process-group-name')
+                            .text(function (d) {
+                                var name = d.component.name;
+                                if (name.length > PREVIEW_NAME_LENGTH) {
+                                    return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
+                                } else {
+                                    return name;
+                                }
+                            });
+                  } else {
+                      // clear the process group name
+                      processGroup.select('text.process-group-name').text(null);
+                    }
+    
+                    // remove the tooltips
+                    processGroup.call(removeTooltips);
+    
+                    // remove the details if necessary
+                    if (!details.empty()) {
+                        details.remove();
+                    }
                 }
-            }
-        });
-    };
-
-    /**
-     * Updates the process group status.
-     *
-     * @param {selection} updated           The process groups to be updated
-     */
-    var updateProcessGroupStatus = function (updated) {
-        if (updated.empty()) {
-            return;
-        }
-
-        // queued count value
-        updated.select('text.process-group-queued tspan.count')
-            .text(function (d) {
-                return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.queued, ' ');
-            });
-
-        // queued size value
-        updated.select('text.process-group-queued tspan.size')
-            .text(function (d) {
-                return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.queued, ' ');
             });
-
-        // in count value
-        updated.select('text.process-group-in tspan.count')
-            .text(function (d) {
-                return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.input, ' ');
-            });
-
-        // in size value
-        updated.select('text.process-group-in tspan.size')
-            .text(function (d) {
-                return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.input, ' ');
-            });
-
-        // in ports value
-        updated.select('text.process-group-in tspan.ports')
-            .text(function (d) {
-                return ' ' + String.fromCharCode(8594) + ' ' + d.inputPortCount;
-            });
-
-        // read/write value
-        updated.select('text.process-group-read-write')
-            .text(function (d) {
-                return d.status.aggregateSnapshot.read + ' / ' + d.status.aggregateSnapshot.written;
-            });
-
-        // out ports value
-        updated.select('text.process-group-out tspan.ports')
-            .text(function (d) {
-                return d.outputPortCount + ' ' + String.fromCharCode(8594) + ' ';
-            });
-
-        // out count value
-        updated.select('text.process-group-out tspan.count')
-            .text(function (d) {
-                return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.output, ' ');
-            });
-
-        // out size value
-        updated.select('text.process-group-out tspan.size')
-            .text(function (d) {
-                return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.output, ' ');
-            });
-
-        updated.each(function (d) {
-            var processGroup = d3.select(this);
-            var offset = 0;
-
-            // -------------------
-            // active thread count
-            // -------------------
-
-            nfCanvasUtils.activeThreadCount(processGroup, d, function (off) {
-                offset = off;
-            });
-
-            // ---------
-            // bulletins
-            // ---------
-
-            processGroup.select('rect.bulletin-background').classed('has-bulletins', function () {
-                return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
-            });
-
-            nfCanvasUtils.bulletins(processGroup, d, function () {
-                return d3.select('#process-group-tooltips');
-            }, offset);
-        });
-    };
-
-    /**
-     * Removes the process groups in the specified selection.
-     *
-     * @param {selection} removed               The process groups to be removed
-     */
-    var removeProcessGroups = function (removed) {
-        if (removed.empty()) {
-            return;
-        }
-
-        removed.call(removeTooltips).remove();
-    };
-
-    /**
-     * Removes the tooltips for the process groups in the specified selection.
-     *
-     * @param {selection} removed
-     */
-    var removeTooltips = function (removed) {
-        removed.each(function (d) {
-            // remove any associated tooltips
-            $('#bulletin-tip-' + d.id).remove();
-        });
-    };
-
-    var nfProcessGroup = {
-        /**
-         * Initializes of the Process Group handler.
-         *
-         * @param nfConnectableRef   The nfConnectable module.
-         * @param nfDraggableRef   The nfDraggable module.
-         * @param nfSelectableRef   The nfSelectable module.
-         * @param nfContextMenuRef   The nfContextMenu module.
-         */
-        init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
-            nfConnectable = nfConnectableRef;
-            nfDraggable = nfDraggableRef;
-            nfSelectable = nfSelectableRef;
-            nfContextMenu = nfContextMenuRef;
-
-            processGroupMap = d3.map();
-            removedCache = d3.map();
-            addedCache = d3.map();
-
-            // create the process group container
-            processGroupContainer = d3.select('#canvas').append('g')
-                .attr({
-                    'pointer-events': 'all',
-                    'class': 'process-groups'
-                });
-        },
-
+        };
+    
         /**
-         * Adds the specified process group entity.
+         * Updates the process group status.
          *
-         * @param processGroupEntities       The process group
-         * @param options           Configuration options
+         * @param {selection} updated           The process groups to be updated
          */
-        add: function (processGroupEntities, options) {
-            var selectAll = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+        var updateProcessGroupStatus = function (updated) {
+            if (updated.empty()) {
+                return;
             }
-
-            // get the current time
-            var now = new Date().getTime();
-
-            var add = function (processGroupEntity) {
-                addedCache.set(processGroupEntity.id, now);
-
-                // add the process group
-                processGroupMap.set(processGroupEntity.id, $.extend({
-                    type: 'ProcessGroup',
-                    dimensions: dimensions
-                }, processGroupEntity));
-            };
-
-            // determine how to handle the specified process groups
-            if ($.isArray(processGroupEntities)) {
-                $.each(processGroupEntities, function (_, processGroupEntity) {
-                    add(processGroupEntity);
+    
+            // queued count value
+            updated.select('text.process-group-queued tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.queued, ' ');
                 });
-            } else if (nfCommon.isDefinedAndNotNull(processGroupEntities)) {
-                add(processGroupEntities);
-            }
-
-            // apply the selection and handle new process groups
-            var selection = select();
-            selection.enter().call(renderProcessGroups, selectAll);
-            selection.call(updateProcessGroups);
-        },
-
-        /**
-         * Populates the graph with the specified process groups.
-         *
-         * @argument {object | array} processGroupEntities                    The process groups to add
-         * @argument {object} options                Configuration options
-         */
-        set: function (processGroupEntities, options) {
-            var selectAll = false;
-            var transition = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-            }
-
-            var set = function (proposedProcessGroupEntity) {
-                var currentProcessGroupEntity = processGroupMap.get(proposedProcessGroupEntity.id);
-
-                // set the process group if appropriate due to revision and wasn't previously removed
-                if (nfClient.isNewerRevision(currentProcessGroupEntity, proposedProcessGroupEntity) && !removedCache.has(proposedProcessGroupEntity.id)) {
-                    processGroupMap.set(proposedProcessGroupEntity.id, $.extend({
-                        type: 'ProcessGroup',
-                        dimensions: dimensions
-                    }, proposedProcessGroupEntity));
-                }
-            };
-
-            // determine how to handle the specified process groups
-            if ($.isArray(processGroupEntities)) {
-                $.each(processGroupMap.keys(), function (_, key) {
-                    var currentProcessGroupEntity = processGroupMap.get(key);
-                    var isPresent = $.grep(processGroupEntities, function (proposedProcessGroupEntity) {
-                        return proposedProcessGroupEntity.id === currentProcessGroupEntity.id;
-                    });
-
-                    // if the current process group is not present and was not recently added, remove it
-                    if (isPresent.length === 0 && !addedCache.has(key)) {
-                        processGroupMap.remove(key);
-                    }
+    
+            // queued size value
+            updated.select('text.process-group-queued tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.queued, ' ');
                 });
-                $.each(processGroupEntities, function (_, processGroupEntity) {
-                    set(processGroupEntity);
+    
+            // in count value
+            updated.select('text.process-group-in tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.input, ' ');
                 });
-            } else if (nfCommon.isDefinedAndNotNull(processGroupEntities)) {
-                set(processGroupEntities);
-            }
-
-            // apply the selection and handle all new process group
-            var selection = select();
-            selection.enter().call(renderProcessGroups, selectAll);
-            selection.call(updateProcessGroups).call(nfCanvasUtils.position, transition);
-            selection.exit().call(removeProcessGroups);
-        },
-
-        /**
-         * If the process group id is specified it is returned. If no process group id
-         * specified, all process groups are returned.
-         *
-         * @param {string} id
-         */
-        get: function (id) {
-            if (nfCommon.isUndefined(id)) {
-                return processGroupMap.values();
-            } else {
-                return processGroupMap.get(id);
-            }
-        },
-
-        /**
-         * If the process group id is specified it is refresh according to the current
-         * state. If no process group id is specified, all process groups are refreshed.
-         *
-         * @param {string} id      Optional
-         */
-        refresh: function (id) {
-            if (nfCommon.isDefinedAndNotNull(id)) {
-                d3.select('#id-' + id).call(updateProcessGroups);
-            } else {
-                d3.selectAll('g.process-group').call(updateProcessGroups);
-            }
-        },
-
-        /**
-         * Refreshes the components necessary after a pan event.
-         */
-        pan: function () {
-            d3.selectAll('g.process-group.entering, g.process-group.leaving').call(updateProcessGroups);
-        },
-
-        /**
-         * Reloads the process group state from the server and refreshes the UI.
-         * If the process group is currently unknown, this function reloads the canvas.
-         *
-         * @param {string} id The process group id
-         */
-        reload: function (id) {
-            if (processGroupMap.has(id)) {
-                var processGroupEntity = processGroupMap.get(id);
-                return $.ajax({
-                    type: 'GET',
-                    url: processGroupEntity.uri,
-                    dataType: 'json'
-                }).done(function (response) {
-                    nfProcessGroup.set(response);
+    
+            // in size value
+            updated.select('text.process-group-in tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.input, ' ');
                 });
-            }
-        },
-
-        /**
-         * Positions the component.
-         *
-         * @param {string} id   The id
-         */
-        position: function (id) {
-            d3.select('#id-' + id).call(nfCanvasUtils.position);
-        },
-
-        /**
-         * Removes the specified process group.
-         *
-         * @param {string} processGroupIds      The process group id(s)
-         */
-        remove: function (processGroupIds) {
-            var now = new Date().getTime();
-
-            if ($.isArray(processGroupIds)) {
-                $.each(processGroupIds, function (_, processGroupId) {
-                    removedCache.set(processGroupId, now);
-                    processGroupMap.remove(processGroupId);
+    
+            // in ports value
+            updated.select('text.process-group-in tspan.ports')
+                .text(function (d) {
+                    return ' ' + String.fromCharCode(8594) + ' ' + d.inputPortCount;
                 });
-            } else {
-                removedCache.set(processGroupIds, now);
-                processGroupMap.remove(processGroupIds);
-            }
-
-            // apply the selection and handle all removed process groups
-            select().exit().call(removeProcessGroups);
-        },
-
-        /**
-         * Removes all process groups.
-         */
-        removeAll: function () {
-            nfProcessGroup.remove(processGroupMap.keys());
-        },
-
+    
+            // read/write value
+            updated.select('text.process-group-read-write')
+                .text(function (d) {
+                    return d.status.aggregateSnapshot.read + ' / ' + d.status.aggregateSnapshot.written;
+                });
+    
+            // out ports value
+            updated.select('text.process-group-out tspan.ports')
+                .text(function (d) {
+                    return d.outputPortCount + ' ' + String.fromCharCode(8594) + ' ';
+                });
+    
+            // out count value
+            updated.select('text.process-group-out tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.output, ' ');
+                });
+    
+            // out size value
+            updated.select('text.process-group-out tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.output, ' ');
+                });
+    
+            updated.each(function (d) {
+                var processGroup = d3.select(this);
+                var offset = 0;
+    
+                // -------------------
+                // active thread count
+                // -------------------
+    
+              nfCanvasUtils.activeThreadCount(processGroup, d, function (off) {
+                    offset = off;
+                });
+    
+                // ---------
+                // bulletins
+                // ---------
+    
+                processGroup.select('rect.bulletin-background').classed('has-bulletins', function () {
+                  return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
+                });
+    
+              nfCanvasUtils.bulletins(processGroup, d, function () {
+                    return d3.select('#process-group-tooltips');
+                }, offset);
+            });
+        };
+    
         /**
-         * Expires the caches up to the specified timestamp.
+         * Removes the process groups in the specified selection.
          *
-         * @param timestamp
+         * @param {selection} removed               The process groups to be removed
          */
-        expireCaches: function (timestamp) {
-            var expire = function (cache) {
-                cache.forEach(function (id, entryTimestamp) {
-                    if (timestamp > entryTimestamp) {
-                        cache.remove(id);
-                    }
-                });
-            };
-
-            expire(addedCache);
-            expire(removedCache);
-        },
-
+        var removeProcessGroups = function (removed) {
+            if (removed.empty()) {
+                return;
+            }
+    
+            removed.call(removeTooltips).remove();
+        };
+    
         /**
-         * Enters the specified group.
+         * Removes the tooltips for the process groups in the specified selection.
          *
-         * @param {string} groupId
+         * @param {selection} removed
          */
-        enterGroup: function (groupId) {

-
-            // hide the context menu
-            nfContextMenu.hide();


-
-            // set the new group id
-            nfCanvasUtils.setGroupId(groupId);


-
-            // reload the graph
-            return nfCanvasUtils.reload().done(function () {

-
-                // attempt to restore the view
-                var viewRestored = nfCanvasUtils.restoreUserView();


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


-
-                    // refresh the canvas
-                    nfCanvasUtils.refreshCanvasView({
-                        transition: true
+        var removeTooltips = function (removed) {
+            removed.each(function (d) {
+                // remove any associated tooltips
+                $('#bulletin-tip-' + d.id).remove();
+            });
+        };
+    
+      var nfProcessGroup = {
+            /**
+             * Initializes of the Process Group handler.
+           *
+           * @param nfConnectableRef   The nfConnectable module.
+           * @param nfDraggableRef   The nfDraggable module.
+           * @param nfSelectableRef   The nfSelectable module.
+           * @param nfContextMenuRef   The nfContextMenu module.
+             */
+          init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
+              nfConnectable = nfConnectableRef;
+              nfDraggable = nfDraggableRef;
+              nfSelectable = nfSelectableRef;
+              nfContextMenu = nfContextMenuRef;
+  
+                processGroupMap = d3.map();
+              removedCache = d3.map();
+              addedCache = d3.map();
+    
+                // create the process group container
+                processGroupContainer = d3.select('#canvas').append('g')
+                    .attr({
+                        'pointer-events': 'all',
+                        'class': 'process-groups'
                     });
+            },
+    
+            /**
+             * Adds the specified process group entity.
+             *
+             * @param processGroupEntities       The process group
+             * @param options           Configuration options
+             */
+            add: function (processGroupEntities, options) {
+                var selectAll = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
                 }
-            }).fail(function () {
-                nfDialog.showOkDialog({
-                    headerText: 'Process Group',
-                    dialogContent: 'Unable to enter the selected group.'
-                });
-            });
-        }
-    };
-
-    return nfProcessGroup;
-}));
\ No newline at end of file
+    
+              // get the current time
+              var now = new Date().getTime();
+    
+                var add = function (processGroupEntity) {
+                  addedCache.set(processGroupEntity.id, now);
+  
+                    // add the process group
+                    processGroupMap.set(processGroupEntity.id, $.extend({
+                        type: 'ProcessGroup',
+                        dimensions: dimensions
+                    }, processGroupEntity));
+                };
+    
+                // determine how to handle the specified process groups
+                if ($.isArray(processGroupEntities)) {
+                    $.each(processGroupEntities, function (_, processGroupEntity) {
+                        add(processGroupEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(processGroupEntities)) {
+                    add(processGroupEntities);
+                }
+    
+                // apply the selection and handle new process groups
+                var selection = select();
+                selection.enter().call(renderProcessGroups, selectAll);
+                selection.call(updateProcessGroups);
+            },
+    
+            /**
+             * Populates the graph with the specified process groups.
+             *
+             * @argument {object | array} processGroupEntities                    The process groups to add
+             * @argument {object} options                Configuration options
+             */
+            set: function (processGroupEntities, options) {
+                var selectAll = false;
+                var transition = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                  transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+                }
+    
+              var set = function (proposedProcessGroupEntity) {
+                  var currentProcessGroupEntity = processGroupMap.get(proposedProcessGroupEntity.id);
+  
+                  // set the process group if appropriate due to revision and wasn't previously removed
+                  if (nfClient.isNewerRevision(currentProcessGroupEntity, proposedProcessGroupEntity) && !removedCache.has(proposedProcessGroupEntity.id)) {
+                      processGroupMap.set(proposedProcessGroupEntity.id, $.extend({
+                            type: 'ProcessGroup',
+                            dimensions: dimensions
+                      }, proposedProcessGroupEntity));
+                  }
+                };
+    
+                // determine how to handle the specified process groups
+                if ($.isArray(processGroupEntities)) {
+                    $.each(processGroupMap.keys(), function (_, key) {
+                      var currentProcessGroupEntity = processGroupMap.get(key);
+                      var isPresent = $.grep(processGroupEntities, function (proposedProcessGroupEntity) {
+                          return proposedProcessGroupEntity.id === currentProcessGroupEntity.id;
+                      });
+  
+                      // if the current process group is not present and was not recently added, remove it
+                      if (isPresent.length === 0 && !addedCache.has(key)) {
+                            processGroupMap.remove(key);
+                      }
+                    });
+                    $.each(processGroupEntities, function (_, processGroupEntity) {
+                        set(processGroupEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(processGroupEntities)) {
+                    set(processGroupEntities);
+                }
+    
+                // apply the selection and handle all new process group
+                var selection = select();
+                selection.enter().call(renderProcessGroups, selectAll);
+              selection.call(updateProcessGroups).call(nfCanvasUtils.position, transition);
+                selection.exit().call(removeProcessGroups);
+            },
+    
+            /**
+             * If the process group id is specified it is returned. If no process group id
+             * specified, all process groups are returned.
+             *
+             * @param {string} id
+             */
+            get: function (id) {
+              if (nfCommon.isUndefined(id)) {
+                    return processGroupMap.values();
+                } else {
+                    return processGroupMap.get(id);
+                }
+            },
+    
+            /**
+             * If the process group id is specified it is refresh according to the current
+             * state. If no process group id is specified, all process groups are refreshed.
+             *
+             * @param {string} id      Optional
+             */
+            refresh: function (id) {
+              if (nfCommon.isDefinedAndNotNull(id)) {
+                    d3.select('#id-' + id).call(updateProcessGroups);
+                } else {
+                    d3.selectAll('g.process-group').call(updateProcessGroups);
+                }
+            },
+    
+            /**
+             * Refreshes the components necessary after a pan event.
+             */
+            pan: function () {
+                d3.selectAll('g.process-group.entering, g.process-group.leaving').call(updateProcessGroups);
+            },
+    
+            /**
+             * Reloads the process group state from the server and refreshes the UI.
+             * If the process group is currently unknown, this function reloads the canvas.
+             *
+             * @param {string} id The process group id
+             */
+            reload: function (id) {
+                if (processGroupMap.has(id)) {
+                    var processGroupEntity = processGroupMap.get(id);
+                    return $.ajax({
+                        type: 'GET',
+                        url: processGroupEntity.uri,
+                        dataType: 'json'
+                    }).done(function (response) {
+                      nfProcessGroup.set(response);
+                    });
+                }
+            },
+    
+            /**
+             * Positions the component.
+             *
+             * @param {string} id   The id
+             */
+            position: function (id) {
+              d3.select('#id-' + id).call(nfCanvasUtils.position);
+            },
+    
+            /**
+             * Removes the specified process group.
+             *
+           * @param {string} processGroupIds      The process group id(s)
+             */
+          remove: function (processGroupIds) {
+              var now = new Date().getTime();
+  
+              if ($.isArray(processGroupIds)) {
+                  $.each(processGroupIds, function (_, processGroupId) {
+                      removedCache.set(processGroupId, now);
+                      processGroupMap.remove(processGroupId);
+                    });
+                } else {
+                  removedCache.set(processGroupIds, now);
+                  processGroupMap.remove(processGroupIds);
+                }
+    
+                // apply the selection and handle all removed process groups
+                select().exit().call(removeProcessGroups);
+            },
+    
+            /**
+             * Removes all process groups.
+             */
+            removeAll: function () {
+              nfProcessGroup.remove(processGroupMap.keys());
+          },
+  
+          /**
+           * Expires the caches up to the specified timestamp.
+           *
+           * @param timestamp
+           */
+          expireCaches: function (timestamp) {
+              var expire = function (cache) {
+                  cache.forEach(function (id, entryTimestamp) {
+                      if (timestamp > entryTimestamp) {
+                          cache.remove(id);
+                      }
+                  });
+              };
+  
+              expire(addedCache);
+              expire(removedCache);
+          },
+  
+          /**
+           * Enters the specified group.
+           *
+           * @param {string} groupId
+           */
+          enterGroup: function (groupId) {
+  
+              // hide the context menu
+              nfContextMenu.hide();
+  
+              // set the new group id
+              nfCanvasUtils.setGroupId(groupId);
+  
+              // reload the graph
+              return nfCanvasUtils.reload().done(function () {
+  
+                  // attempt to restore the view
+                  var viewRestored = nfCanvasUtils.restoreUserView();
+  
+                  // if the view was not restore attempt to fit
+                  if (viewRestored === false) {
+                      nfCanvasUtils.fitCanvasView();
+  
+                      // refresh the canvas
+                      nfCanvasUtils.refreshCanvasView({
+                          transition: true
+                      });
+                  }
+              }).fail(function () {
+                  nfDialog.showOkDialog({
+                      headerText: 'Process Group',
+                      dialogContent: 'Unable to enter the selected group.'
+                  });
+              });
+          }
+      };
+  
+      return nfProcessGroup;
+  }));
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 c26969ec058c..d394236eb23a 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
@@ -1,235 +1,304 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.ErrorHandler',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.Client',
-                'nf.CanvasUtils',
-                'nf.ng.Bridge',
-                'nf.Processor',
-                'nf.ClusterSummary',
-                'nf.CustomUi',
-                'nf.UniversalCapture',
-                'nf.Connection'],
-            function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfProcessor, nfClusterSummary, nfCustomUi, nfUniversalCapture, nfConnection) {
-                return (nf.ProcessorConfiguration = factory($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfProcessor, nfClusterSummary, nfCustomUi, nfUniversalCapture, nfConnection));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ProcessorConfiguration =
-            factory(require('jquery'),
-                require('nf.ErrorHandler'),
-                require('nf.Common'),
-                require('nf.Dialog'),
-                require('nf.Client'),
-                require('nf.CanvasUtils'),
-                require('nf.ng.Bridge'),
-                require('nf.Processor'),
-                require('nf.ClusterSummary'),
-                require('nf.CustomUi'),
-                require('nf.UniversalCapture'),
-                require('nf.Connection')));
-    } else {
-        nf.ProcessorConfiguration = factory(root.$,
-            root.nf.ErrorHandler,
-            root.nf.Common,
-            root.nf.Dialog,
-            root.nf.Client,
-            root.nf.CanvasUtils,
-            root.nf.ng.Bridge,
-            root.nf.Processor,
-            root.nf.ClusterSummary,
-            root.nf.CustomUi,
-            root.nf.UniversalCapture,
-            root.nf.Connection);
-    }
-}(this, function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfProcessor, nfClusterSummary, nfCustomUi, nfUniversalCapture, nfConnection) {
-    'use strict';
-
-    // possible values for a processor's run duration (in millis)
-    var RUN_DURATION_VALUES = [0, 25, 50, 100, 250, 500, 1000, 2000];
-
-    /**
-     * Gets the available scheduling strategies based on the specified processor.
+    /*
+     * 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
      *
-     * @param {object} processor
-     * @returns {Array}
+     * 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.
      */
-    var getSchedulingStrategies = function (processor) {
-        var strategies = [{
-            text: 'Timer driven',
-            value: 'TIMER_DRIVEN',
-            description: 'Processor will be scheduled to run on an interval defined by the run schedule.'
-        }];
-
-        // conditionally support event driven based on processor
-        if (processor.supportsEventDriven === true) {
-            strategies.push({
-                text: 'Event driven',
-                value: 'EVENT_DRIVEN',
-                description: 'Processor will be scheduled to run when triggered by an event (e.g. a FlowFile enters an incoming queue). This scheduling strategy is experimental.'
-            });
-        } else if (processor.config['schedulingStrategy'] === 'EVENT_DRIVEN') {
-            // the processor was once configured for event driven but no longer supports it
-            strategies.push({
-                text: 'Event driven',
-                value: 'EVENT_DRIVEN',
-                description: 'Processor will be scheduled to run when triggered by an event (e.g. a FlowFile enters an incoming queue). This scheduling strategy is experimental.',
-                disabled: true
-            });
-        }
-
-        // conditionally support event driven
-        if (processor.config['schedulingStrategy'] === 'PRIMARY_NODE_ONLY') {
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.ng.Bridge',
+                  'nf.Processor',
+                  'nf.ClusterSummary',
+                  'nf.CustomUi',
+                  'nf.UniversalCapture',
+                  'nf.Connection'],
+              function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfProcessor, nfClusterSummary, nfCustomUi, nfUniversalCapture, nfConnection) {
+                  return (nf.ProcessorConfiguration = factory($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfProcessor, nfClusterSummary, nfCustomUi, nfUniversalCapture, nfConnection));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ProcessorConfiguration =
+              factory(require('jquery'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ng.Bridge'),
+                  require('nf.Processor'),
+                  require('nf.ClusterSummary'),
+                  require('nf.CustomUi'),
+                  require('nf.UniversalCapture'),
+                  require('nf.Connection')));
+      } else {
+          nf.ProcessorConfiguration = factory(root.$,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.ng.Bridge,
+              root.nf.Processor,
+              root.nf.ClusterSummary,
+              root.nf.CustomUi,
+              root.nf.UniversalCapture,
+              root.nf.Connection);
+      }
+  }(this, function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfProcessor, nfClusterSummary, nfCustomUi, nfUniversalCapture, nfConnection) {
+      'use strict';
+    
+        // possible values for a processor's run duration (in millis)
+        var RUN_DURATION_VALUES = [0, 25, 50, 100, 250, 500, 1000, 2000];
+    
+        /**
+         * Gets the available scheduling strategies based on the specified processor.
+         *
+       * @param {object} processor
+         * @returns {Array}
+         */
+        var getSchedulingStrategies = function (processor) {
+            var strategies = [{
+              text: 'Timer driven',
+                value: 'TIMER_DRIVEN',
+              description: nf._.msg('nf-processor-configuration.Message1')
+            }];
+    
+            // conditionally support event driven based on processor
+            if (processor.supportsEventDriven === true) {
+                strategies.push({
+                  text: nf._.msg('nf-processor-configuration.EventDriven'),
+                    value: 'EVENT_DRIVEN',
+                  description: nf._.msg('nf-processor-configuration.Message2')
+                });
+            } else if (processor.config['schedulingStrategy'] === 'EVENT_DRIVEN') {
+                // the processor was once configured for event driven but no longer supports it
+                strategies.push({
+                  text: nf._.msg('nf-processor-configuration.EventDriven'),
+                    value: 'EVENT_DRIVEN',
+                  description: nf._.msg('nf-processor-configuration.Message2'),
+                    disabled: true
+                });
+            }
+    
+            // conditionally support event driven
+          if (processor.config['schedulingStrategy'] === 'PRIMARY_NODE_ONLY') {
+                strategies.push({
+                  text: nf._.msg('nf-processor-configuration.OnPrimaryNode'),
+                    value: 'PRIMARY_NODE_ONLY',
+                  description: nf._.msg('nf-processor-configuration.Message3'),
+                    disabled: true
+                });
+            }
+    
+            // add an option for cron driven
             strategies.push({
-                text: 'On primary node',
-                value: 'PRIMARY_NODE_ONLY',
-                description: 'Processor will be scheduled on the primary node on an interval defined by the run schedule. This option has been deprecated, please use the Execution setting below.',
-                disabled: true
+              text: nf._.msg('nf-processor-configuration.CronDriven'),
+                value: 'CRON_DRIVEN',
+              description: nf._.msg('nf-processor-configuration.Message5')
             });
-        }
-
-        // add an option for cron driven
-        strategies.push({
-            text: 'CRON driven',
-            value: 'CRON_DRIVEN',
-            description: 'Processor will be scheduled to run on at specific times based on the specified CRON string.'
-        });
-
-        return strategies;
-    };
-
-    /**
-     * Gets the available execution nodes based on the specified processor.
-     *
-     * @param {object} processor
-     * @returns {Array}
-     */
-    var getExecutionNodeOptions = function (processor) {
-        return [{
-            text: 'All nodes',
-            value: 'ALL',
-            description: 'Processor will be scheduled to run on all nodes'
-        }, {
-            text: 'Primary node',
-            value: 'PRIMARY',
-            description: 'Processor will be scheduled to run only on the primary node',
-            disabled: !nfClusterSummary.isClustered() && processor.config['executionNode'] === 'PRIMARY'
-        }];
-    };
-
-    /**
-     * Handle any expected processor configuration errors.
-     *
-     * @argument {object} xhr       The XmlHttpRequest
-     * @argument {string} status    The status of the request
-     * @argument {string} error     The error
-     */
-    var handleProcessorConfigurationError = function (xhr, status, error) {
-        if (xhr.status === 400) {
-            var errors = xhr.responseText.split('\n');
-
-            var content;
-            if (errors.length === 1) {
-                content = $('<span></span>').text(errors[0]);
+    
+            return strategies;
+        };
+    
+        /**
+       * Gets the available execution nodes based on the specified processor.
+       *
+       * @param {object} processor
+       * @returns {Array}
+       */
+      var getExecutionNodeOptions = function (processor) {
+          return [{
+              text: 'All nodes',
+              value: 'ALL',
+              description: 'Processor will be scheduled to run on all nodes'
+          }, {
+              text: 'Primary node',
+              value: 'PRIMARY',
+              description: 'Processor will be scheduled to run only on the primary node',
+              disabled: !nfClusterSummary.isClustered() && processor.config['executionNode'] === 'PRIMARY'
+          }];
+      };
+  
+      /**
+         * Handle any expected processor configuration errors.
+         *
+         * @argument {object} xhr       The XmlHttpRequest
+         * @argument {string} status    The status of the request
+         * @argument {string} error     The error
+         */
+        var handleProcessorConfigurationError = function (xhr, status, error) {
+            if (xhr.status === 400) {
+                var errors = xhr.responseText.split('\n');
+    
+                var content;
+                if (errors.length === 1) {
+                    content = $('<span></span>').text(errors[0]);
+                } else {
+                  content = nfCommon.formatUnorderedList(errors);
+                }
+    
+              nfDialog.showOkDialog({
+                    dialogContent: content,
+                  headerText: nf._.msg('nf-processor-configuration.ConfigureProcessor')
+                });
             } else {
-                content = nfCommon.formatUnorderedList(errors);
+              nfErrorHandler.handleAjaxError(xhr, status, error);
             }
-
-            nfDialog.showOkDialog({
-                dialogContent: content,
-                headerText: 'Processor Configuration'
-            });
-        } else {
-            nfErrorHandler.handleAjaxError(xhr, status, error);
-        }
-    };
-
-    /**
-     * Creates an option for the specified relationship name.
-     *
-     * @argument {object} relationship      The relationship
-     */
-    var createRelationshipOption = function (relationship) {
-        var relationshipLabel = $('<div class="relationship-name nf-checkbox-label ellipsis"></div>').text(relationship.name);
-        var relationshipValue = $('<span class="relationship-name-value hidden"></span>').text(relationship.name);
-
-        // build the relationship checkbox element
-        var relationshipCheckbox = $('<div class="processor-relationship nf-checkbox"></div>');
-        if (relationship.autoTerminate === true) {
-            relationshipCheckbox.addClass('checkbox-checked');
-        } else {
-            relationshipCheckbox.addClass('checkbox-unchecked');
-        }
-
-        // build the relationship container element
-        var relationshipContainerElement = $('<div class="processor-relationship-container"></div>').append(relationshipCheckbox).append(relationshipLabel).append(relationshipValue).appendTo('#auto-terminate-relationship-names');
-        if (!nfCommon.isBlank(relationship.description)) {
-            var relationshipDescription = $('<div class="relationship-description"></div>').text(relationship.description);
-            relationshipContainerElement.append(relationshipDescription);
-        }
-
-        return relationshipContainerElement;
-    };
-
-    /**
-     * Determines whether the user has made any changes to the processor configuration
-     * that needs to be saved.
-     */
-    var isSaveRequired = function () {
-        var details = $('#processor-configuration').data('processorDetails');
-
-        // determine if any processor settings have changed
-
-        // consider auto terminated relationships
-        var autoTerminatedChanged = false;
-        var autoTerminated = marshalRelationships();
-        $.each(details.relationships, function (i, relationship) {
+        };
+    
+        /**
+         * Creates an option for the specified relationship name.
+         *
+         * @argument {object} relationship      The relationship
+         */
+        var createRelationshipOption = function (relationship) {
+          var relationshipLabel = $('<div class="relationship-name nf-checkbox-label ellipsis"></div>').text(relationship.name);
+            var relationshipValue = $('<span class="relationship-name-value hidden"></span>').text(relationship.name);
+    
+            // build the relationship checkbox element
+            var relationshipCheckbox = $('<div class="processor-relationship nf-checkbox"></div>');
             if (relationship.autoTerminate === true) {
-                // relationship was auto terminated but is no longer selected
-                if ($.inArray(relationship.name, autoTerminated) === -1) {
-                    autoTerminatedChanged = true;
-                    return false;
+                relationshipCheckbox.addClass('checkbox-checked');
+            } else {
+                relationshipCheckbox.addClass('checkbox-unchecked');
+            }
+    
+            // build the relationship container element
+            var relationshipContainerElement = $('<div class="processor-relationship-container"></div>').append(relationshipCheckbox).append(relationshipLabel).append(relationshipValue).appendTo('#auto-terminate-relationship-names');
+          if (!nfCommon.isBlank(relationship.description)) {
+                var relationshipDescription = $('<div class="relationship-description"></div>').text(relationship.description);
+                relationshipContainerElement.append(relationshipDescription);
+            }
+    
+            return relationshipContainerElement;
+        };
+    
+        /**
+         * Determines whether the user has made any changes to the processor configuration
+         * that needs to be saved.
+         */
+        var isSaveRequired = function () {
+            var details = $('#processor-configuration').data('processorDetails');
+    
+            // determine if any processor settings have changed
+    
+            // consider auto terminated relationships
+            var autoTerminatedChanged = false;
+            var autoTerminated = marshalRelationships();
+            $.each(details.relationships, function (i, relationship) {
+                if (relationship.autoTerminate === true) {
+                    // relationship was auto terminated but is no longer selected
+                    if ($.inArray(relationship.name, autoTerminated) === -1) {
+                        autoTerminatedChanged = true;
+                        return false;
+                    }
+                } else if (relationship.autoTerminate === false) {
+                    // relationship was not auto terminated but is now selected
+                    if ($.inArray(relationship.name, autoTerminated) >= 0) {
+                        autoTerminatedChanged = true;
+                        return false;
+                    }
                 }
-            } else if (relationship.autoTerminate === false) {
-                // relationship was not auto terminated but is now selected
-                if ($.inArray(relationship.name, autoTerminated) >= 0) {
-                    autoTerminatedChanged = true;
-                    return false;
+            });
+            if (autoTerminatedChanged) {
+                return true;
+            }
+    
+            // consider the scheduling strategy
+            var schedulingStrategy = $('#scheduling-strategy-combo').combo('getSelectedOption').value;
+            if (schedulingStrategy !== (details.config['schedulingStrategy'] + '')) {
+                return true;
+            }
+    
+            // only consider the concurrent tasks if appropriate
+            if (details.supportsParallelProcessing === true) {
+                // get the appropriate concurrent tasks field
+                var concurrentTasks;
+                if (schedulingStrategy === 'EVENT_DRIVEN') {
+                    concurrentTasks = $('#event-driven-concurrently-schedulable-tasks');
+                } else if (schedulingStrategy === 'CRON_DRIVEN') {
+                    concurrentTasks = $('#cron-driven-concurrently-schedulable-tasks');
+                } else {
+                    concurrentTasks = $('#timer-driven-concurrently-schedulable-tasks');
+                }
+    
+                // check the concurrent tasks
+                if (concurrentTasks.val() !== (details.config['concurrentlySchedulableTaskCount'] + '')) {
+                    return true;
                 }
             }
-        });
-        if (autoTerminatedChanged) {
-            return true;
-        }
-
-        // consider the scheduling strategy
-        var schedulingStrategy = $('#scheduling-strategy-combo').combo('getSelectedOption').value;
-        if (schedulingStrategy !== (details.config['schedulingStrategy'] + '')) {
-            return true;
-        }
-
-        // only consider the concurrent tasks if appropriate
-        if (details.supportsParallelProcessing === true) {
+    
+            // get the appropriate scheduling period field
+            var schedulingPeriod;
+            if (schedulingStrategy === 'CRON_DRIVEN') {
+                schedulingPeriod = $('#cron-driven-scheduling-period');
+            } else if (schedulingStrategy !== 'EVENT_DRIVEN') {
+                schedulingPeriod = $('#timer-driven-scheduling-period');
+            }
+    
+            // check the scheduling period
+          if (nfCommon.isDefinedAndNotNull(schedulingPeriod) && schedulingPeriod.val() !== (details.config['schedulingPeriod'] + '')) {
+              return true;
+          }
+  
+          if ($('#execution-node-combo').combo('getSelectedOption').value !== (details.config['executionNode'] + '')) {
+                return true;
+            }
+            if ($('#processor-name').val() !== details['name']) {
+                return true;
+            }
+            if ($('#processor-enabled').hasClass('checkbox-checked') && details['state'] === 'DISABLED') {
+                return true;
+            } else if ($('#processor-enabled').hasClass('checkbox-unchecked') && (details['state'] === 'RUNNING' || details['state'] === 'STOPPED')) {
+                return true;
+            }
+            if ($('#penalty-duration').val() !== (details.config['penaltyDuration'] + '')) {
+                return true;
+            }
+            if ($('#yield-duration').val() !== (details.config['yieldDuration'] + '')) {
+                return true;
+            }
+            if ($('#bulletin-level-combo').combo('getSelectedOption').value !== (details.config['bulletinLevel'] + '')) {
+                return true;
+            }
+            if ($('#processor-comments').val() !== details.config['comments']) {
+                return true;
+            }
+    
+            // defer to the property and relationship grids
+            return $('#processor-properties').propertytable('isSaveRequired');
+        };
+    
+        /**
+         * Marshals the data that will be used to update the processor's configuration.
+       *
+       * @param {object} processor
+         */
+      var marshalDetails = function (processor) {
+            // create the config dto
+            var processorConfigDto = {};
+    
+            // get the scheduling strategy
+            var schedulingStrategy = $('#scheduling-strategy-combo').combo('getSelectedOption').value;
+    
             // get the appropriate concurrent tasks field
             var concurrentTasks;
             if (schedulingStrategy === 'EVENT_DRIVEN') {
@@ -239,670 +308,601 @@
             } else {
                 concurrentTasks = $('#timer-driven-concurrently-schedulable-tasks');
             }
-
-            // check the concurrent tasks
-            if (concurrentTasks.val() !== (details.config['concurrentlySchedulableTaskCount'] + '')) {
-                return true;
+    
+            // get the concurrent tasks if appropriate
+            if (!concurrentTasks.is(':disabled')) {
+                processorConfigDto['concurrentlySchedulableTaskCount'] = concurrentTasks.val();
             }
-        }
-
-        // get the appropriate scheduling period field
-        var schedulingPeriod;
-        if (schedulingStrategy === 'CRON_DRIVEN') {
-            schedulingPeriod = $('#cron-driven-scheduling-period');
-        } else if (schedulingStrategy !== 'EVENT_DRIVEN') {
-            schedulingPeriod = $('#timer-driven-scheduling-period');
-        }
-
-        // check the scheduling period
-        if (nfCommon.isDefinedAndNotNull(schedulingPeriod) && schedulingPeriod.val() !== (details.config['schedulingPeriod'] + '')) {
-            return true;
-        }
-
-        if ($('#execution-node-combo').combo('getSelectedOption').value !== (details.config['executionNode'] + '')) {
-            return true;
-        }
-        if ($('#processor-name').val() !== details['name']) {
-            return true;
-        }
-        if ($('#processor-enabled').hasClass('checkbox-checked') && details['state'] === 'DISABLED') {
-            return true;
-        } else if ($('#processor-enabled').hasClass('checkbox-unchecked') && (details['state'] === 'RUNNING' || details['state'] === 'STOPPED')) {
-            return true;
-        }
-        if ($('#penalty-duration').val() !== (details.config['penaltyDuration'] + '')) {
-            return true;
-        }
-        if ($('#yield-duration').val() !== (details.config['yieldDuration'] + '')) {
-            return true;
-        }
-        if ($('#bulletin-level-combo').combo('getSelectedOption').value !== (details.config['bulletinLevel'] + '')) {
-            return true;
-        }
-        if ($('#processor-comments').val() !== details.config['comments']) {
-            return true;
-        }
-
-        // defer to the property and relationship grids
-        return $('#processor-properties').propertytable('isSaveRequired');
-    };
-
-    /**
-     * Marshals the data that will be used to update the processor's configuration.
-     *
-     * @param {object} processor
-     */
-    var marshalDetails = function (processor) {
-        // create the config dto
-        var processorConfigDto = {};
-
-        // get the scheduling strategy
-        var schedulingStrategy = $('#scheduling-strategy-combo').combo('getSelectedOption').value;
-
-        // get the appropriate concurrent tasks field
-        var concurrentTasks;
-        if (schedulingStrategy === 'EVENT_DRIVEN') {
-            concurrentTasks = $('#event-driven-concurrently-schedulable-tasks');
-        } else if (schedulingStrategy === 'CRON_DRIVEN') {
-            concurrentTasks = $('#cron-driven-concurrently-schedulable-tasks');
-        } else {
-            concurrentTasks = $('#timer-driven-concurrently-schedulable-tasks');
-        }
-
-        // get the concurrent tasks if appropriate
-        if (!concurrentTasks.is(':disabled')) {
-            processorConfigDto['concurrentlySchedulableTaskCount'] = concurrentTasks.val();
-        }
-
-        // get the appropriate scheduling period field
-        var schedulingPeriod;
-        if (schedulingStrategy === 'CRON_DRIVEN') {
-            schedulingPeriod = $('#cron-driven-scheduling-period');
-        } else if (schedulingStrategy !== 'EVENT_DRIVEN') {
-            schedulingPeriod = $('#timer-driven-scheduling-period');
-        }
-
-        // get the scheduling period if appropriate
-        if (nfCommon.isDefinedAndNotNull(schedulingPeriod)) {
-            processorConfigDto['schedulingPeriod'] = schedulingPeriod.val();
-        }
-
-        processorConfigDto['executionNode'] = $('#execution-node-combo').combo('getSelectedOption').value;
-        processorConfigDto['penaltyDuration'] = $('#penalty-duration').val();
-        processorConfigDto['yieldDuration'] = $('#yield-duration').val();
-        processorConfigDto['bulletinLevel'] = $('#bulletin-level-combo').combo('getSelectedOption').value;
-        processorConfigDto['schedulingStrategy'] = schedulingStrategy;
-        processorConfigDto['comments'] = $('#processor-comments').val();
-
-        // run duration
-        if (processor.supportsBatching === true) {
-            var runDurationIndex = $('#run-duration-slider').slider('value');
-            processorConfigDto['runDurationMillis'] = RUN_DURATION_VALUES[runDurationIndex];
-        }
-
-        // relationships
-        processorConfigDto['autoTerminatedRelationships'] = marshalRelationships();
-
-        // properties
-        var properties = $('#processor-properties').propertytable('marshalProperties');
-
-        // set the properties
-        if ($.isEmptyObject(properties) === false) {
-            processorConfigDto['properties'] = properties;
-        }
-
-        // create the processor dto
-        var processorDto = {};
-        processorDto['id'] = $('#processor-id').text();
-        processorDto['name'] = $('#processor-name').val();
-        processorDto['config'] = processorConfigDto;
-
-        // mark the processor disabled if appropriate
-        if ($('#processor-enabled').hasClass('checkbox-unchecked')) {
-            processorDto['state'] = 'DISABLED';
-        } else if ($('#processor-enabled').hasClass('checkbox-checked')) {
-            processorDto['state'] = 'STOPPED';
-        }
-
-        // create the processor entity
-        var processorEntity = {};
-        processorEntity['component'] = processorDto;
-
-        // return the marshaled details
-        return processorEntity;
-    };
-
-    /**
-     * Marshals the relationships that will be auto terminated.
-     **/
-    var marshalRelationships = function () {
-        // get all available relationships
-        var availableRelationships = $('#auto-terminate-relationship-names');
-        var selectedRelationships = [];
-
-        // go through each relationship to determine which are selected
-        $.each(availableRelationships.children(), function (i, relationshipElement) {
-            var relationship = $(relationshipElement);
-
-            // get each relationship and its corresponding checkbox
-            var relationshipCheck = relationship.children('div.processor-relationship');
-
-            // see if this relationship has been selected
-            if (relationshipCheck.hasClass('checkbox-checked')) {
-                selectedRelationships.push(relationship.children('span.relationship-name-value').text());
+    
+            // get the appropriate scheduling period field
+            var schedulingPeriod;
+            if (schedulingStrategy === 'CRON_DRIVEN') {
+                schedulingPeriod = $('#cron-driven-scheduling-period');
+            } else if (schedulingStrategy !== 'EVENT_DRIVEN') {
+                schedulingPeriod = $('#timer-driven-scheduling-period');
             }
-        });
-
-        return selectedRelationships;
-    };
-
-    /**
-     * Validates the specified details.
-     *
-     * @argument {object} details       The details to validate
-     */
-    var validateDetails = function (details) {
-        var errors = [];
-        var processor = details['component'];
-        var config = processor['config'];
-
-        // ensure numeric fields are specified correctly
-        if (nfCommon.isDefinedAndNotNull(config['concurrentlySchedulableTaskCount']) && !$.isNumeric(config['concurrentlySchedulableTaskCount'])) {
-            errors.push('Concurrent tasks must be an integer value');
-        }
-        if (nfCommon.isDefinedAndNotNull(config['schedulingPeriod']) && nfCommon.isBlank(config['schedulingPeriod'])) {
-            errors.push('Run schedule must be specified');
-        }
-        if (nfCommon.isBlank(config['penaltyDuration'])) {
-            errors.push('Penalty duration must be specified');
-        }
-        if (nfCommon.isBlank(config['yieldDuration'])) {
-            errors.push('Yield duration must be specified');
-        }
-
-        if (errors.length > 0) {
-            nfDialog.showOkDialog({
-                dialogContent: nfCommon.formatUnorderedList(errors),
-                headerText: 'Processor Configuration'
-            });
-            return false;
-        } else {
-            return true;
-        }
-    };
-
-    /**
-     * Reloads the outgoing connections for the specified processor.
-     *
-     * @param {object} processor
-     */
-    var reloadProcessorConnections = function (processor) {
-        var connections = nfConnection.getComponentConnections(processor.id);
-        $.each(connections, function (_, connection) {
-            if (connection.permissions.canRead) {
-                if (connection.sourceId === processor.id) {
-                    nfConnection.reload(connection.id);
+    
+            // get the scheduling period if appropriate
+          if (nfCommon.isDefinedAndNotNull(schedulingPeriod)) {
+                processorConfigDto['schedulingPeriod'] = schedulingPeriod.val();
+            }
+    
+          processorConfigDto['executionNode'] = $('#execution-node-combo').combo('getSelectedOption').value;
+            processorConfigDto['penaltyDuration'] = $('#penalty-duration').val();
+            processorConfigDto['yieldDuration'] = $('#yield-duration').val();
+            processorConfigDto['bulletinLevel'] = $('#bulletin-level-combo').combo('getSelectedOption').value;
+            processorConfigDto['schedulingStrategy'] = schedulingStrategy;
+            processorConfigDto['comments'] = $('#processor-comments').val();
+    
+            // run duration
+          if (processor.supportsBatching === true) {
+                var runDurationIndex = $('#run-duration-slider').slider('value');
+                processorConfigDto['runDurationMillis'] = RUN_DURATION_VALUES[runDurationIndex];
+            }
+    
+            // relationships
+            processorConfigDto['autoTerminatedRelationships'] = marshalRelationships();
+    
+            // properties
+            var properties = $('#processor-properties').propertytable('marshalProperties');
+    
+            // set the properties
+            if ($.isEmptyObject(properties) === false) {
+                processorConfigDto['properties'] = properties;
+            }
+    
+            // create the processor dto
+            var processorDto = {};
+            processorDto['id'] = $('#processor-id').text();
+            processorDto['name'] = $('#processor-name').val();
+            processorDto['config'] = processorConfigDto;
+    
+            // mark the processor disabled if appropriate
+            if ($('#processor-enabled').hasClass('checkbox-unchecked')) {
+                processorDto['state'] = 'DISABLED';
+            } else if ($('#processor-enabled').hasClass('checkbox-checked')) {
+                processorDto['state'] = 'STOPPED';
+            }
+    
+            // create the processor entity
+            var processorEntity = {};
+            processorEntity['component'] = processorDto;
+    
+            // return the marshaled details
+            return processorEntity;
+        };
+    
+        /**
+         * Marshals the relationships that will be auto terminated.
+         **/
+        var marshalRelationships = function () {
+            // get all available relationships
+            var availableRelationships = $('#auto-terminate-relationship-names');
+            var selectedRelationships = [];
+    
+            // go through each relationship to determine which are selected
+            $.each(availableRelationships.children(), function (i, relationshipElement) {
+                var relationship = $(relationshipElement);
+    
+                // get each relationship and its corresponding checkbox
+                var relationshipCheck = relationship.children('div.processor-relationship');
+    
+                // see if this relationship has been selected
+                if (relationshipCheck.hasClass('checkbox-checked')) {
+                    selectedRelationships.push(relationship.children('span.relationship-name-value').text());
                 }
+            });
+    
+            return selectedRelationships;
+        };
+    
+        /**
+         * Validates the specified details.
+         *
+         * @argument {object} details       The details to validate
+         */
+        var validateDetails = function (details) {
+            var errors = [];
+            var processor = details['component'];
+            var config = processor['config'];
+    
+            // ensure numeric fields are specified correctly
+          if (nfCommon.isDefinedAndNotNull(config['concurrentlySchedulableTaskCount']) && !$.isNumeric(config['concurrentlySchedulableTaskCount'])) {
+              errors.push(nf._.msg('nf-processor-configuration.Error1'));
+          }
+          if (nfCommon.isDefinedAndNotNull(config['schedulingPeriod']) && nfCommon.isBlank(config['schedulingPeriod'])) {
+              errors.push(nf._.msg('nf-processor-configuration.Error2'));
+          }
+          if (nfCommon.isBlank(config['penaltyDuration'])) {
+              errors.push(nf._.msg('nf-processor-configuration.Error3'));
+          }
+          if (nfCommon.isBlank(config['yieldDuration'])) {
+              errors.push(nf._.msg('nf-processor-configuration.Error4'));
             }
-        });
-    };
-
-    /**
-     * Goes to a service configuration from the property table.
-     */
-    var goToServiceFromProperty = function () {
-        return $.Deferred(function (deferred) {
-            // close all fields currently being edited
-            $('#processor-properties').propertytable('saveRow');
-
-            // determine if changes have been made
-            if (isSaveRequired()) {
-                // see if those changes should be saved
-                nfDialog.showYesNoDialog({
-                    headerText: 'Processor Configuration',
-                    dialogContent: 'Save changes before going to this Controller Service?',
-                    noHandler: function () {
-                        deferred.resolve();
-                    },
-                    yesHandler: function () {
-                        var processor = $('#processor-configuration').data('processorDetails');
-                        saveProcessor(processor).done(function () {
-                            deferred.resolve();
-                        }).fail(function () {
-                            deferred.reject();
-                        });
-                    }
+    
+            if (errors.length > 0) {
+              nfDialog.showOkDialog({
+                  dialogContent: nfCommon.formatUnorderedList(errors),
+                  headerText: nf._.msg('nf-processor-configuration.ConfigureProcessor')
                 });
+                return false;
             } else {
-                deferred.resolve();
+                return true;
             }
-        }).promise();
-    };
-
-    /**
-     *
-     * @param {type} processor
-     * @returns {undefined}
-     */
-    var saveProcessor = function (processor) {
-        // marshal the settings and properties and update the processor
-        var updatedProcessor = marshalDetails(processor);
-
-        // ensure details are valid as far as we can tell
-        if (validateDetails(updatedProcessor)) {
-            // set the revision
-            var d = nfProcessor.get(processor.id);
-            updatedProcessor['revision'] = nfClient.getRevision(d);
-
-            // update the selected component
-            return $.ajax({
-                type: 'PUT',
-                data: JSON.stringify(updatedProcessor),
-                url: d.uri,
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // set the new processor state based on the response
-                nfProcessor.set(response);
-            }).fail(handleProcessorConfigurationError);
-        } else {
-            return $.Deferred(function (deferred) {
-                deferred.reject();
-            }).promise();
-        }
-    };
-
-    return {
+        };
+    
         /**
-         * Initializes the processor properties tab.
+         * Reloads the outgoing connections for the specified processor.
+         *
+         * @param {object} processor
          */
-        init: function () {
-            // initialize the properties tabs
-            $('#processor-configuration-tabs').tabbs({
-                tabStyle: 'tab',
-                selectedTabStyle: 'selected-tab',
-                scrollableTabContentStyle: 'scrollable',
-                tabs: [{
-                    name: 'Settings',
-                    tabContentId: 'processor-standard-settings-tab-content'
-                }, {
-                    name: 'Scheduling',
-                    tabContentId: 'processor-scheduling-tab-content'
-                }, {
-                    name: 'Properties',
-                    tabContentId: 'processor-properties-tab-content'
-                }, {
-                    name: 'Comments',
-                    tabContentId: 'processor-comments-tab-content'
-                }],
-                select: function () {
-                    // remove all property detail dialogs
-                    nfUniversalCapture.removeAllPropertyDetailDialogs();
-
-                    // update the processor property table size in case this is the first time its rendered
-                    if ($(this).text() === 'Properties') {
-                        $('#processor-properties').propertytable('resetTableSize');
-                    }
-
-                    // close all fields currently being edited
-                    $('#processor-properties').propertytable('saveRow');
-
-                    // show the border around the processor relationships if necessary
-                    var processorRelationships = $('#auto-terminate-relationship-names');
-                    if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > Math.round(processorRelationships.innerHeight())) {
-                        processorRelationships.css('border-width', '1px');
+        var reloadProcessorConnections = function (processor) {
+          var connections = nfConnection.getComponentConnections(processor.id);
+            $.each(connections, function (_, connection) {
+                if (connection.permissions.canRead) {
+                    if (connection.sourceId === processor.id) {
+                      nfConnection.reload(connection.id);
                     }
                 }
             });
-
-            // initialize the processor configuration dialog
-            $('#processor-configuration').modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: 'Configure Processor',
-                handler: {
-                    close: function () {
-                        // empty the relationship list
-                        $('#auto-terminate-relationship-names').css('border-width', '0').empty();
-
-                        // cancel any active edits and clear the table
-                        $('#processor-properties').propertytable('cancelEdit').propertytable('clear');
-
-                        // removed the cached processor details
-                        $('#processor-configuration').removeData('processorDetails');
-                    },
-                    open: function () {
-                        nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                    }
-                }
-            });
-
-            // initialize the bulletin combo
-            $('#bulletin-level-combo').combo({
-                options: [{
-                    text: 'DEBUG',
-                    value: 'DEBUG'
-                }, {
-                    text: 'INFO',
-                    value: 'INFO'
-                }, {
-                    text: 'WARN',
-                    value: 'WARN'
-                }, {
-                    text: 'ERROR',
-                    value: 'ERROR'
-                }]
-            });
-
-            // initialize the run duration slider
-            $('#run-duration-slider').slider({
-                min: 0,
-                max: RUN_DURATION_VALUES.length - 1,
-                change: function (event, ui) {
-                    var processor = $('#processor-configuration').data('processorDetails');
-                    if (ui.value > 0 && (processor.inputRequirement === 'INPUT_FORBIDDEN' || processor.inputRequirement === 'INPUT_ALLOWED')) {
-                        $('#run-duration-data-loss').show();
-                    } else {
-                        $('#run-duration-data-loss').hide();
-                    }
-                }
-            });
-
-            // 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');
-                    var d = nfProcessor.get(processor.id);
-                    return $.ajax({
-                        type: 'GET',
-                        url: d.uri + '/descriptors',
-                        data: {
-                            propertyName: propertyName
-                        },
-                        dataType: 'json'
-                    }).fail(nfErrorHandler.handleAjaxError);
-                },
-                goToServiceDeferred: goToServiceFromProperty
-            });
-        },
-
+        };
+    
         /**
-         * Shows the configuration dialog for the specified processor.
-         *
-         * @argument {selection} selection      The selection
+         * Goes to a service configuration from the property table.
          */
-        showConfiguration: function (selection) {
-            if (nfCanvasUtils.isProcessor(selection)) {
-                var selectionData = selection.datum();
-
-                // get the processor details
-                var processor = selectionData.component;
-
-                var requests = [];
-
-                // reload the processor in case an property descriptors have updated
-                requests.push(nfProcessor.reload(processor.id));
-
-                // get the processor history
-                requests.push($.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/flow/history/components/' + encodeURIComponent(processor.id),
-                    dataType: 'json'
-                }));
-
-                // once everything is loaded, show the dialog
-                $.when.apply(window, requests).done(function (processorResult, historyResult) {
-                    // get the updated processor'
-                    var processorResponse = processorResult[0];
-                    processor = processorResponse.component;
-
-                    // get the processor history
-                    var processorHistory = historyResult[0].componentHistory;
-
-                    // record the processor details
-                    $('#processor-configuration').data('processorDetails', processor);
-
-                    // determine if the enabled checkbox is checked or not
-                    var processorEnableStyle = 'checkbox-checked';
-                    if (processor['state'] === 'DISABLED') {
-                        processorEnableStyle = 'checkbox-unchecked';
-                    }
-
-                    // populate the processor settings
-                    $('#processor-id').text(processor['id']);
-                    $('#processor-type').text(nfCommon.substringAfterLast(processor['type'], '.'));
-                    $('#processor-name').val(processor['name']);
-                    $('#processor-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(processorEnableStyle);
-                    $('#penalty-duration').val(processor.config['penaltyDuration']);
-                    $('#yield-duration').val(processor.config['yieldDuration']);
-                    $('#processor-comments').val(processor.config['comments']);
-
-                    // set the run duration if applicable
-                    if (processor.supportsBatching === true) {
-                        $('#run-duration-setting-container').show();
-
-                        // set the run duration slider value
-                        var runDuration = RUN_DURATION_VALUES.indexOf(processor.config['runDurationMillis']);
-                        $('#run-duration-slider').slider('value', runDuration);
-                    } else {
-                        $('#run-duration-setting-container').hide();
-                    }
-
-                    // select the appropriate bulletin level
-                    $('#bulletin-level-combo').combo('setSelectedOption', {
-                        value: processor.config['bulletinLevel']
-                    });
-
-                    var schedulingStrategy = processor.config['schedulingStrategy'];
-
-                    // initialize the scheduling strategy
-                    $('#scheduling-strategy-combo').combo({
-                        options: getSchedulingStrategies(processor),
-                        selectedOption: {
-                            value: schedulingStrategy
+        var goToServiceFromProperty = function () {
+            return $.Deferred(function (deferred) {
+                // close all fields currently being edited
+                $('#processor-properties').propertytable('saveRow');
+    
+                // determine if changes have been made
+                if (isSaveRequired()) {
+                    // see if those changes should be saved
+                  nfDialog.showYesNoDialog({
+                      headerText: nf._.msg('nf-processor-configuration.ConfigureProcessor'),
+                      dialogContent: nf._.msg('nf-processor-configuration.Message6'),
+                        noHandler: function () {
+                            deferred.resolve();
                         },
-                        select: function (selectedOption) {
-                            // show the appropriate panel
-                            if (selectedOption.value === 'EVENT_DRIVEN') {
-                                $('#event-driven-warning').show();
-
-                                $('#timer-driven-options').hide();
-                                $('#event-driven-options').show();
-                                $('#cron-driven-options').hide();
-                            } else {
-                                $('#event-driven-warning').hide();
-
-                                if (selectedOption.value === 'CRON_DRIVEN') {
-                                    $('#timer-driven-options').hide();
-                                    $('#event-driven-options').hide();
-                                    $('#cron-driven-options').show();
-                                } else {
-                                    $('#timer-driven-options').show();
-                                    $('#event-driven-options').hide();
-                                    $('#cron-driven-options').hide();
-                                }
-                            }
+                        yesHandler: function () {
+                            var processor = $('#processor-configuration').data('processorDetails');
+                            saveProcessor(processor).done(function () {
+                                deferred.resolve();
+                            }).fail(function () {
+                                deferred.reject();
+                            });
                         }
                     });
-
-                    var executionNode = processor.config['executionNode'];
-
-                    // initialize the execution node combo
-                    $('#execution-node-combo').combo({
-                        options: getExecutionNodeOptions(processor),
-                        selectedOption: {
-                            value: executionNode
+                } else {
+                    deferred.resolve();
+                }
+            }).promise();
+        };
+    
+        /**
+         *
+         * @param {type} processor
+         * @returns {undefined}
+         */
+        var saveProcessor = function (processor) {
+            // marshal the settings and properties and update the processor
+          var updatedProcessor = marshalDetails(processor);
+    
+            // ensure details are valid as far as we can tell
+            if (validateDetails(updatedProcessor)) {
+                // set the revision
+              var d = nfProcessor.get(processor.id);
+              updatedProcessor['revision'] = nfClient.getRevision(d);
+    
+                // update the selected component
+                return $.ajax({
+                    type: 'PUT',
+                    data: JSON.stringify(updatedProcessor),
+                    url: d.uri,
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // set the new processor state based on the response
+                  nfProcessor.set(response);
+                }).fail(handleProcessorConfigurationError);
+            } else {
+                return $.Deferred(function (deferred) {
+                    deferred.reject();
+                }).promise();
+            }
+        };
+    
+        return {
+            /**
+             * Initializes the processor properties tab.
+             */
+            init: function () {
+                // initialize the properties tabs
+                $('#processor-configuration-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                      name: nf._.msg('nf-processor-configuration.Settings'),
+                        tabContentId: 'processor-standard-settings-tab-content'
+                    }, {
+                      name: nf._.msg('nf-processor-configuration.Scheduling'),
+                        tabContentId: 'processor-scheduling-tab-content'
+                    }, {
+                      name: nf._.msg('nf-processor-configuration.Properties'),
+                        tabContentId: 'processor-properties-tab-content'
+                    }, {
+                      name: nf._.msg('nf-processor-configuration.Comments'),
+                        tabContentId: 'processor-comments-tab-content'
+                    }],
+                    select: function () {
+                        // remove all property detail dialogs
+                      nfUniversalCapture.removeAllPropertyDetailDialogs();
+    
+                        // update the processor property table size in case this is the first time its rendered
+                      if ($(this).text() === nf._.msg('nf-processor-configuration.Properties')) {
+                            $('#processor-properties').propertytable('resetTableSize');
+                        }
+    
+                        // close all fields currently being edited
+                        $('#processor-properties').propertytable('saveRow');
+    
+                        // show the border around the processor relationships if necessary
+                        var processorRelationships = $('#auto-terminate-relationship-names');
+                      if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > Math.round(processorRelationships.innerHeight())) {
+                            processorRelationships.css('border-width', '1px');
                         }
-                    });
-
-                    // show the execution node option if we're cluster or we're currently configured to run on the primary node only
-                    if (nfClusterSummary.isClustered() || executionNode === 'PRIMARY') {
-                        $('#execution-node-options').show();
-                    } else {
-                        $('#execution-node-options').hide();
                     }
-
-                    // initialize the concurrentTasks
-                    var defaultConcurrentTasks = processor.config['defaultConcurrentTasks'];
-                    $('#timer-driven-concurrently-schedulable-tasks').val(defaultConcurrentTasks['TIMER_DRIVEN']);
-                    $('#event-driven-concurrently-schedulable-tasks').val(defaultConcurrentTasks['EVENT_DRIVEN']);
-                    $('#cron-driven-concurrently-schedulable-tasks').val(defaultConcurrentTasks['CRON_DRIVEN']);
-
-                    // get the appropriate concurrent tasks field
-                    var concurrentTasks;
-                    if (schedulingStrategy === 'EVENT_DRIVEN') {
-                        concurrentTasks = $('#event-driven-concurrently-schedulable-tasks').val(processor.config['concurrentlySchedulableTaskCount']);
-                    } else if (schedulingStrategy === 'CRON_DRIVEN') {
-                        concurrentTasks = $('#cron-driven-concurrently-schedulable-tasks').val(processor.config['concurrentlySchedulableTaskCount']);
-                    } else {
-                        concurrentTasks = $('#timer-driven-concurrently-schedulable-tasks').val(processor.config['concurrentlySchedulableTaskCount']);
+                });
+    
+                // initialize the processor configuration dialog
+                $('#processor-configuration').modal({
+                    scrollableContentStyle: 'scrollable',
+                  headerText: nf._.msg('nf-processor-configuration.ConfigureProcessor'),
+                    handler: {
+                        close: function () {
+                            // empty the relationship list
+                            $('#auto-terminate-relationship-names').css('border-width', '0').empty();
+    
+                            // cancel any active edits and clear the table
+                            $('#processor-properties').propertytable('cancelEdit').propertytable('clear');
+    
+                            // removed the cached processor details
+                            $('#processor-configuration').removeData('processorDetails');
+                        },
+                        open: function () {
+                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                        }
                     }
-
-                    // conditionally allow the user to specify the concurrent tasks
-                    if (nfCommon.isDefinedAndNotNull(concurrentTasks)) {
-                        if (processor.supportsParallelProcessing === true) {
-                            concurrentTasks.prop('disabled', false);
+                });
+    
+                // initialize the bulletin combo
+                $('#bulletin-level-combo').combo({
+                    options: [{
+                      text: nf._.msg('nf-processor-configuration.Debug'),
+                        value: 'DEBUG'
+                    }, {
+                      text: nf._.msg('nf-processor-configuration.Info'),
+                        value: 'INFO'
+                    }, {
+                      text: nf._.msg('nf-processor-configuration.Warn'),
+                        value: 'WARN'
+                    }, {
+                      text: nf._.msg('nf-processor-configuration.Error'),
+                        value: 'ERROR'
+                    }]
+                });
+    
+                // initialize the run duration slider
+                $('#run-duration-slider').slider({
+                    min: 0,
+                    max: RUN_DURATION_VALUES.length - 1,
+                    change: function (event, ui) {
+                        var processor = $('#processor-configuration').data('processorDetails');
+                        if (ui.value > 0 && (processor.inputRequirement === 'INPUT_FORBIDDEN' || processor.inputRequirement === 'INPUT_ALLOWED')) {
+                            $('#run-duration-data-loss').show();
                         } else {
-                            concurrentTasks.prop('disabled', true);
+                            $('#run-duration-data-loss').hide();
                         }
                     }
-
-                    // initialize the schedulingStrategy
-                    var defaultSchedulingPeriod = processor.config['defaultSchedulingPeriod'];
-                    $('#cron-driven-scheduling-period').val(defaultSchedulingPeriod['CRON_DRIVEN']);
-                    $('#timer-driven-scheduling-period').val(defaultSchedulingPeriod['TIMER_DRIVEN']);
-
-                    // set the scheduling period as appropriate
-                    if (processor.config['schedulingStrategy'] === 'CRON_DRIVEN') {
-                        $('#cron-driven-scheduling-period').val(processor.config['schedulingPeriod']);
-                    } else if (processor.config['schedulingStrategy'] !== 'EVENT_DRIVEN') {
-                        $('#timer-driven-scheduling-period').val(processor.config['schedulingPeriod']);
-                    }
-
-                    // load the relationship list
-                    if (!nfCommon.isEmpty(processor.relationships)) {
-                        $.each(processor.relationships, function (i, relationship) {
-                            createRelationshipOption(relationship);
-                        });
-                    } else {
-                        $('#auto-terminate-relationship-names').append('<div class="unset">This processor has no relationships.</div>');
-                    }
-
-                    var buttons = [{
-                        buttonText: 'Apply',
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                // close all fields currently being edited
-                                $('#processor-properties').propertytable('saveRow');
-
-                                // save the processor
-                                saveProcessor(processor).done(function (response) {
-                                    // reload the processor's outgoing connections
-                                    reloadProcessorConnections(processor);
-
-                                    // close the details panel
-                                    $('#processor-configuration').modal('hide');
-
-                                    // inform Angular app values have changed
-                                    nfNgBridge.digest();
-                                });
-                            }
-                        }
+                });
+    
+                // 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');
+                      var d = nfProcessor.get(processor.id);
+                        return $.ajax({
+                            type: 'GET',
+                            url: d.uri + '/descriptors',
+                            data: {
+                                propertyName: propertyName
+                            },
+                            dataType: 'json'
+                      }).fail(nfErrorHandler.handleAjaxError);
                     },
-                        {
-                            buttonText: 'Cancel',
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
+                    goToServiceDeferred: goToServiceFromProperty
+                });
+            },
+    
+            /**
+             * Shows the configuration dialog for the specified processor.
+             *
+             * @argument {selection} selection      The selection
+             */
+            showConfiguration: function (selection) {
+              if (nfCanvasUtils.isProcessor(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // get the processor details
+                    var processor = selectionData.component;
+    
+                    var requests = [];
+    
+                    // reload the processor in case an property descriptors have updated
+                  requests.push(nfProcessor.reload(processor.id));
+    
+                    // get the processor history
+                    requests.push($.ajax({
+                        type: 'GET',
+                        url: '../nifi-api/flow/history/components/' + encodeURIComponent(processor.id),
+                        dataType: 'json'
+                    }));
+    
+                    // once everything is loaded, show the dialog
+                    $.when.apply(window, requests).done(function (processorResult, historyResult) {
+                        // get the updated processor'
+                        var processorResponse = processorResult[0];
+                        processor = processorResponse.component;
+    
+                        // get the processor history
+                        var processorHistory = historyResult[0].componentHistory;
+    
+                        // record the processor details
+                        $('#processor-configuration').data('processorDetails', processor);
+    
+                        // determine if the enabled checkbox is checked or not
+                        var processorEnableStyle = 'checkbox-checked';
+                        if (processor['state'] === 'DISABLED') {
+                            processorEnableStyle = 'checkbox-unchecked';
+                        }
+    
+                        // populate the processor settings
+                        $('#processor-id').text(processor['id']);
+                      $('#processor-type').text(nfCommon.substringAfterLast(processor['type'], '.'));
+                        $('#processor-name').val(processor['name']);
+                        $('#processor-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(processorEnableStyle);
+                        $('#penalty-duration').val(processor.config['penaltyDuration']);
+                        $('#yield-duration').val(processor.config['yieldDuration']);
+                        $('#processor-comments').val(processor.config['comments']);
+    
+                        // set the run duration if applicable
+                        if (processor.supportsBatching === true) {
+                            $('#run-duration-setting-container').show();
+    
+                            // set the run duration slider value
+                            var runDuration = RUN_DURATION_VALUES.indexOf(processor.config['runDurationMillis']);
+                            $('#run-duration-slider').slider('value', runDuration);
+                        } else {
+                            $('#run-duration-setting-container').hide();
+                        }
+    
+                        // select the appropriate bulletin level
+                        $('#bulletin-level-combo').combo('setSelectedOption', {
+                            value: processor.config['bulletinLevel']
+                        });
+    
+                      var schedulingStrategy = processor.config['schedulingStrategy'];
+  
+                        // initialize the scheduling strategy
+                        $('#scheduling-strategy-combo').combo({
+                            options: getSchedulingStrategies(processor),
+                            selectedOption: {
+                              value: schedulingStrategy
                             },
-                            handler: {
-                                click: function () {
-                                    $('#processor-configuration').modal('hide');
+                            select: function (selectedOption) {
+                                // show the appropriate panel
+                                if (selectedOption.value === 'EVENT_DRIVEN') {
+                                    $('#event-driven-warning').show();
+    
+                                    $('#timer-driven-options').hide();
+                                    $('#event-driven-options').show();
+                                    $('#cron-driven-options').hide();
+                                } else {
+                                    $('#event-driven-warning').hide();
+    
+                                    if (selectedOption.value === 'CRON_DRIVEN') {
+                                        $('#timer-driven-options').hide();
+                                        $('#event-driven-options').hide();
+                                        $('#cron-driven-options').show();
+                                    } else {
+                                        $('#timer-driven-options').show();
+                                        $('#event-driven-options').hide();
+                                        $('#cron-driven-options').hide();
+                                    }
                                 }
                             }
-                        }];
-
-                    // determine if we should show the advanced button
-                    if (nfCommon.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') {
-                        buttons.push({
-                            buttonText: 'Advanced',
-                            clazz: 'fa fa-cog button-icon',
+                        });
+    
+                      var executionNode = processor.config['executionNode'];
+  
+                      // initialize the execution node combo
+                      $('#execution-node-combo').combo({
+                          options: getExecutionNodeOptions(processor),
+                          selectedOption: {
+                              value: executionNode
+                          }
+                      });
+  
+                      // show the execution node option if we're cluster or we're currently configured to run on the primary node only
+                      if (nfClusterSummary.isClustered() || executionNode === 'PRIMARY') {
+                          $('#execution-node-options').show();
+                      } else {
+                          $('#execution-node-options').hide();
+                      }
+  
+                        // initialize the concurrentTasks
+                        var defaultConcurrentTasks = processor.config['defaultConcurrentTasks'];
+                        $('#timer-driven-concurrently-schedulable-tasks').val(defaultConcurrentTasks['TIMER_DRIVEN']);
+                        $('#event-driven-concurrently-schedulable-tasks').val(defaultConcurrentTasks['EVENT_DRIVEN']);
+                        $('#cron-driven-concurrently-schedulable-tasks').val(defaultConcurrentTasks['CRON_DRIVEN']);
+    
+                        // get the appropriate concurrent tasks field
+                        var concurrentTasks;
+                      if (schedulingStrategy === 'EVENT_DRIVEN') {
+                            concurrentTasks = $('#event-driven-concurrently-schedulable-tasks').val(processor.config['concurrentlySchedulableTaskCount']);
+                      } else if (schedulingStrategy === 'CRON_DRIVEN') {
+                            concurrentTasks = $('#cron-driven-concurrently-schedulable-tasks').val(processor.config['concurrentlySchedulableTaskCount']);
+                        } else {
+                            concurrentTasks = $('#timer-driven-concurrently-schedulable-tasks').val(processor.config['concurrentlySchedulableTaskCount']);
+                        }
+    
+                        // conditionally allow the user to specify the concurrent tasks
+                      if (nfCommon.isDefinedAndNotNull(concurrentTasks)) {
+                            if (processor.supportsParallelProcessing === true) {
+                                concurrentTasks.prop('disabled', false);
+                            } else {
+                                concurrentTasks.prop('disabled', true);
+                            }
+                        }
+    
+                        // initialize the schedulingStrategy
+                        var defaultSchedulingPeriod = processor.config['defaultSchedulingPeriod'];
+                        $('#cron-driven-scheduling-period').val(defaultSchedulingPeriod['CRON_DRIVEN']);
+                        $('#timer-driven-scheduling-period').val(defaultSchedulingPeriod['TIMER_DRIVEN']);
+    
+                        // set the scheduling period as appropriate
+                        if (processor.config['schedulingStrategy'] === 'CRON_DRIVEN') {
+                            $('#cron-driven-scheduling-period').val(processor.config['schedulingPeriod']);
+                        } else if (processor.config['schedulingStrategy'] !== 'EVENT_DRIVEN') {
+                            $('#timer-driven-scheduling-period').val(processor.config['schedulingPeriod']);
+                        }
+    
+                        // load the relationship list
+                      if (!nfCommon.isEmpty(processor.relationships)) {
+                            $.each(processor.relationships, function (i, relationship) {
+                                createRelationshipOption(relationship);
+                            });
+                        } else {
+                          $('#auto-terminate-relationship-names').append('<div class="unset">'+nf._.msg('nf-processor-configuration.ThisProcessorHasNoRelationships')+'</div>');
+                        }
+    
+                        var buttons = [{
+                          buttonText: nf._.msg('nf-processor-configuration.Apply'),
                             color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
+                                base: '#728E9B',
+                                hover: '#004849',
+                                text: '#ffffff'
                             },
                             handler: {
                                 click: function () {
-                                    var openCustomUi = function () {
-                                        // reset state and close the dialog manually to avoid hiding the faded background
-                                        $('#processor-configuration').modal('hide');
-
-                                        // show the custom ui
-                                        nfCustomUi.showCustomUi(processorResponse, processor.config.customUiUrl, true).done(function () {
-                                            // once the custom ui is closed, reload the processor
-                                            nfProcessor.reload(processor.id);
-
-                                            // and reload the processor's outgoing connections
-                                            reloadProcessorConnections(processor);
-                                        });
-                                    };
-
                                     // close all fields currently being edited
                                     $('#processor-properties').propertytable('saveRow');
-
-                                    // determine if changes have been made
-                                    if (isSaveRequired()) {
-                                        // see if those changes should be saved
-                                        nfDialog.showYesNoDialog({
-                                            headerText: 'Save',
-                                            dialogContent: 'Save changes before opening the advanced configuration?',
-                                            noHandler: openCustomUi,
-                                            yesHandler: function () {
-                                                saveProcessor(processor).done(function (deferred) {
-                                                    // open the custom ui
-                                                    openCustomUi();
-                                                });
-                                            }
-                                        });
-                                    } else {
-                                        // if there were no changes, simply open the custom ui
-                                        openCustomUi();
-                                    }
+    
+                                    // save the processor
+                                    saveProcessor(processor).done(function (response) {
+                                        // reload the processor's outgoing connections
+                                        reloadProcessorConnections(processor);
+    
+                                        // close the details panel
+                                        $('#processor-configuration').modal('hide');
+    
+                                        // inform Angular app values have changed
+                                      nfNgBridge.digest();
+                                    });
                                 }
                             }
-                        });
-                    }
-
-                    // set the button model
-                    $('#processor-configuration').modal('setButtonModel', buttons);
-
-                    // load the property table
-                    $('#processor-properties')
-                        .propertytable('setGroupId', processor.parentGroupId)
-                        .propertytable('loadProperties', processor.config.properties, processor.config.descriptors, processorHistory.propertyHistory);
-
-                    // show the details
-                    $('#processor-configuration').modal('show');
-
-                    // add ellipsis if necessary
-                    $('#processor-configuration div.relationship-name').ellipsis();
-
-                    // show the border if necessary
-                    var processorRelationships = $('#auto-terminate-relationship-names');
-                    if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > Math.round(processorRelationships.innerHeight())) {
-                        processorRelationships.css('border-width', '1px');
-                    }
-                }).fail(nfErrorHandler.handleAjaxError);
+                        },
+                            {
+                              buttonText: nf._.msg('nf-processor-configuration.Cancel'),
+                                color: {
+                                    base: '#E3E8EB',
+                                    hover: '#C7D2D7',
+                                    text: '#004849'
+                                },
+                                handler: {
+                                    click: function () {
+                                        $('#processor-configuration').modal('hide');
+                                    }
+                                }
+                            }];
+    
+                        // determine if we should show the advanced button
+                      if (nfCommon.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') {
+                            buttons.push({
+                              buttonText: nf._.msg('nf-processor-configuration.Advanced'),
+                                clazz: 'fa fa-cog button-icon',
+                                color: {
+                                    base: '#E3E8EB',
+                                    hover: '#C7D2D7',
+                                    text: '#004849'
+                                },
+                                handler: {
+                                    click: function () {
+                                        var openCustomUi = function () {
+                                            // reset state and close the dialog manually to avoid hiding the faded background
+                                            $('#processor-configuration').modal('hide');
+    
+                                            // show the custom ui
+                                          nfCustomUi.showCustomUi(processorResponse, processor.config.customUiUrl, true).done(function () {
+                                                // once the custom ui is closed, reload the processor
+                                              nfProcessor.reload(processor.id);
+    
+                                                // and reload the processor's outgoing connections
+                                                reloadProcessorConnections(processor);
+                                            });
+                                        };
+    
+                                        // close all fields currently being edited
+                                        $('#processor-properties').propertytable('saveRow');
+    
+                                        // determine if changes have been made
+                                        if (isSaveRequired()) {
+                                            // see if those changes should be saved
+                                          nfDialog.showYesNoDialog({
+                                              headerText: nf._.msg('nf-processor-configuration.Save'),
+                                              dialogContent: nf._.msg('nf-processor-configuration.Message7'),
+                                                noHandler: openCustomUi,
+                                                yesHandler: function () {
+                                                    saveProcessor(processor).done(function (deferred) {
+                                                        // open the custom ui
+                                                        openCustomUi();
+                                                    });
+                                                }
+                                            });
+                                        } else {
+                                            // if there were no changes, simply open the custom ui
+                                            openCustomUi();
+                                        }
+                                    }
+                                }
+                            });
+                        }
+    
+                        // set the button model
+                        $('#processor-configuration').modal('setButtonModel', buttons);
+    
+                        // load the property table
+                        $('#processor-properties')
+                            .propertytable('setGroupId', processor.parentGroupId)
+                            .propertytable('loadProperties', processor.config.properties, processor.config.descriptors, processorHistory.propertyHistory);
+    
+                        // show the details
+                        $('#processor-configuration').modal('show');
+    
+                        // add ellipsis if necessary
+                        $('#processor-configuration div.relationship-name').ellipsis();
+    
+                        // show the border if necessary
+                        var processorRelationships = $('#auto-terminate-relationship-names');
+                      if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > Math.round(processorRelationships.innerHeight())) {
+                            processorRelationships.css('border-width', '1px');
+                        }
+                  }).fail(nfErrorHandler.handleAjaxError);
+                }
             }
-        }
-    };
-}));
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
index 4f2569934bcc..ccc90ba77eef 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
@@ -1,1087 +1,1087 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Common',
-                'nf.Client',
-                'nf.CanvasUtils'],
-            function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
-                return (nf.Processor = factory($, d3, nfCommon, nfClient, nfCanvasUtils));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Processor =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.Common'),
-                require('nf.Client'),
-                require('nf.CanvasUtils')));
-    } else {
-        nf.Processor = factory(root.$,
-            root.d3,
-            root.nf.Common,
-            root.nf.Client,
-            root.nf.CanvasUtils);
-    }
-}(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
-    'use strict';
-
-    var nfConnectable;
-    var nfDraggable;
-    var nfSelectable;
-    var nfContextMenu;
-
-    var PREVIEW_NAME_LENGTH = 25;
-
-    // default dimensions for each type of component
-    var dimensions = {
-        width: 350,
-        height: 130
-    };
-
-    // ---------------------------------
-    // processors currently on the graph
-    // ---------------------------------
-
-    var processorMap;
-
-    // -----------------------------------------------------------
-    // cache for components that are added/removed from the canvas
-    // -----------------------------------------------------------
-
-    var removedCache;
-    var addedCache;
-
-    // --------------------
-    // component containers
-    // --------------------
-
-    var processorContainer;
-
-    // --------------------------
-    // privately scoped functions
-    // --------------------------
-
-    /**
-     * Selects the processor elements against the current processor map.
-     */
-    var select = function () {
-        return processorContainer.selectAll('g.processor').data(processorMap.values(), function (d) {
-            return d.id;
-        });
-    };
-
-    // renders the processors
-    var renderProcessors = function (entered, selected) {
-        if (entered.empty()) {
-            return;
-        }
-
-        var processor = entered.append('g')
-            .attr({
-                'id': function (d) {
-                    return 'id-' + d.id;
-                },
-                'class': 'processor component'
-            })
-            .classed('selected', selected)
-            .call(nfCanvasUtils.position);
-
-        // processor border
-        processor.append('rect')
-            .attr({
-                'class': 'border',
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': function (d) {
-                    return d.dimensions.height;
-                },
-                'fill': 'transparent',
-                'stroke': 'transparent'
-            });
-
-        // processor body
-        processor.append('rect')
-            .attr({
-                'class': 'body',
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': function (d) {
-                    return d.dimensions.height;
-                },
-                'filter': 'url(#component-drop-shadow)',
-                'stroke-width': 0
-            });
-
-        // processor name
-        processor.append('text')
-            .attr({
-                'x': 72,
-                'y': 23,
-                'width': 210,
-                'height': 14,
-                'class': 'processor-name'
-            });
-
-        // processor icon container
-        processor.append('rect')
-            .attr({
-                'x': 0,
-                'y': 0,
-                'width': 50,
-                'height': 50,
-                'class': 'processor-icon-container'
-            });
-
-        // processor icon
-        processor.append('text')
-            .attr({
-                'x': 9,
-                'y': 35,
-                'class': 'processor-icon'
-            })
-            .text('\ue807');
-
-        // restricted icon background
-        processor.append('circle')
-            .attr({
-                'r': 9,
-                'cx': 12,
-                'cy': 12,
-                'class': 'restricted-background'
-            });
-
-        // restricted icon
-        processor.append('text')
-            .attr({
-                'x': 7.75,
-                'y': 17,
-                'class': 'restricted'
-            })
-            .text('\uf132');
-
-        // make processors selectable
-        processor.call(nfSelectable.activate).call(nfContextMenu.activate);
-    };
-
-    /**
-     * Updates the processors in the specified selection.
+    /*
+     * 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
      *
-     * @param {selection} updated       The processors to update
+     * 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.
      */
-    var updateProcessors = function (updated) {
-        if (updated.empty()) {
-            return;
-        }
-
-        // processor border authorization
-        updated.select('rect.border')
-            .classed('unauthorized', function (d) {
-                return d.permissions.canRead === false;
-            });
-
-        // processor body authorization
-        updated.select('rect.body')
-            .classed('unauthorized', function (d) {
-                return d.permissions.canRead === false;
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.CanvasUtils'],
+              function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
+                  return (nf.Processor = factory($, d3, nfCommon, nfClient, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.Processor =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.Common'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.Processor = factory(root.$,
+              root.d3,
+              root.nf.Common,
+              root.nf.Client,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
+      'use strict';
+  
+      var nfConnectable;
+      var nfDraggable;
+      var nfSelectable;
+      var nfContextMenu;
+    
+        var PREVIEW_NAME_LENGTH = 25;
+    
+        // default dimensions for each type of component
+        var dimensions = {
+            width: 350,
+            height: 130
+        };
+    
+        // ---------------------------------
+        // processors currently on the graph
+        // ---------------------------------
+    
+        var processorMap;
+    
+      // -----------------------------------------------------------
+      // cache for components that are added/removed from the canvas
+      // -----------------------------------------------------------
+  
+      var removedCache;
+      var addedCache;
+  
+        // --------------------
+        // component containers
+        // --------------------
+    
+        var processorContainer;
+    
+        // --------------------------
+        // privately scoped functions
+        // --------------------------
+    
+        /**
+         * Selects the processor elements against the current processor map.
+         */
+        var select = function () {
+            return processorContainer.selectAll('g.processor').data(processorMap.values(), function (d) {
+                return d.id;
             });
-
-        updated.each(function (processorData) {
-            var processor = d3.select(this);
-            var details = processor.select('g.processor-canvas-details');
-
-            // update the component behavior as appropriate
-            nfCanvasUtils.editable(processor, nfConnectable, nfDraggable);
-
-            // if this processor is visible, render everything
-            if (processor.classed('visible')) {
-                if (details.empty()) {
-                    details = processor.append('g').attr('class', 'processor-canvas-details');
-
-                    // run status icon
-                    details.append('text')
-                        .attr({
-                            'class': 'run-status-icon',
-                            'x': 55,
-                            'y': 23
-                        });
-
-                    // processor type
-                    details.append('text')
-                        .attr({
-                            'class': 'processor-type',
-                            'x': 72,
-                            'y': 37,
-                            'width': 236,
-                            'height': 12
-                        });
-
-                    // -----
-                    // stats
-                    // -----
-
-                    // draw the processor statistics table
-
-                    // in
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processorData.dimensions.width;
-                            },
-                            'height': 19,
-                            'x': 0,
-                            'y': 50,
-                            'fill': '#f4f6f7'
-                        });
-
-                    // border
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processorData.dimensions.width;
-                            },
-                            'height': 1,
-                            'x': 0,
-                            'y': 68,
-                            'fill': '#c7d2d7'
-                        });
-
-                    // read/write
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processorData.dimensions.width;
-                            },
-                            'height': 19,
-                            'x': 0,
-                            'y': 69,
-                            'fill': '#ffffff'
-                        });
-
-                    // border
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processorData.dimensions.width;
-                            },
-                            'height': 1,
-                            'x': 0,
-                            'y': 87,
-                            'fill': '#c7d2d7'
-                        });
-
-                    // out
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processorData.dimensions.width;
-                            },
-                            'height': 20,
-                            'x': 0,
-                            'y': 88,
-                            'fill': '#f4f6f7'
-                        });
-
-                    // border
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processorData.dimensions.width;
-                            },
-                            'height': 1,
-                            'x': 0,
-                            'y': 106,
-                            'fill': '#c7d2d7'
-                        });
-
-                    // tasks/time
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return processorData.dimensions.width;
-                            },
-                            'height': 19,
-                            'x': 0,
-                            'y': 107,
-                            'fill': '#ffffff'
-                        });
-
-                    // stats label container
-                    var processorStatsLabel = details.append('g')
-                        .attr({
-                            'transform': 'translate(10, 55)'
-                        });
-
-                    // in label
-                    processorStatsLabel.append('text')
-                        .attr({
-                            'width': 73,
-                            'height': 10,
-                            'y': 9,
-                            'class': 'stats-label'
-                        })
-                        .text('In');
-
-                    // read/write label
-                    processorStatsLabel.append('text')
-                        .attr({
-                            'width': 73,
-                            'height': 10,
-                            'y': 27,
-                            'class': 'stats-label'
-                        })
-                        .text('Read/Write');
-
-                    // out label
-                    processorStatsLabel.append('text')
-                        .attr({
-                            'width': 73,
-                            'height': 10,
-                            'y': 46,
-                            'class': 'stats-label'
-                        })
-                        .text('Out');
-
-                    // tasks/time label
-                    processorStatsLabel.append('text')
-                        .attr({
-                            'width': 73,
-                            'height': 10,
-                            'y': 65,
-                            'class': 'stats-label'
-                        })
-                        .text('Tasks/Time');
-
-                    // stats value container
-                    var processorStatsValue = details.append('g')
-                        .attr({
-                            'transform': 'translate(85, 55)'
-                        });
-
-                    // in value
-                    var inText = processorStatsValue.append('text')
-                        .attr({
-                            'width': 180,
-                            'height': 9,
-                            'y': 9,
-                            'class': 'processor-in stats-value'
-                        });
-
-                    // in count
-                    inText.append('tspan')
-                        .attr({
-                            'class': 'count'
-                        });
-
-                    // in size
-                    inText.append('tspan')
-                        .attr({
-                            'class': 'size'
-                        });
-
-                    // read/write value
-                    processorStatsValue.append('text')
-                        .attr({
-                            'width': 180,
-                            'height': 10,
-                            'y': 27,
-                            'class': 'processor-read-write stats-value'
-                        });
-
-                    // out value
-                    var outText = processorStatsValue.append('text')
-                        .attr({
-                            'width': 180,
-                            'height': 10,
-                            'y': 46,
-                            'class': 'processor-out stats-value'
-                        });
-
-                    // out count
-                    outText.append('tspan')
-                        .attr({
-                            'class': 'count'
-                        });
-
-                    // out size
-                    outText.append('tspan')
-                        .attr({
-                            'class': 'size'
-                        });
-
-                    // tasks/time value
-                    processorStatsValue.append('text')
-                        .attr({
-                            'width': 180,
-                            'height': 10,
-                            'y': 65,
-                            'class': 'processor-tasks-time stats-value'
-                        });
-
-                    // stats value container
-                    var processorStatsInfo = details.append('g')
-                        .attr('transform', 'translate(305, 55)');
-
-                    // in info
-                    processorStatsInfo.append('text')
-                        .attr({
-                            'width': 25,
-                            'height': 10,
-                            'y': 9,
-                            'class': 'stats-info'
-                        })
-                        .text('5 min');
-
-                    // read/write info
-                    processorStatsInfo.append('text')
-                        .attr({
-                            'width': 25,
-                            'height': 10,
-                            'y': 27,
-                            'class': 'stats-info'
-                        })
-                        .text('5 min');
-
-                    // out info
-                    processorStatsInfo.append('text')
-                        .attr({
-                            'width': 25,
-                            'height': 10,
-                            'y': 46,
-                            'class': 'stats-info'
-                        })
-                        .text('5 min');
-
-                    // tasks/time info
-                    processorStatsInfo.append('text')
-                        .attr({
-                            'width': 25,
-                            'height': 10,
-                            'y': 65,
-                            'class': 'stats-info'
-                        })
-                        .text('5 min');
-
-                    // -------------------
-                    // active thread count
-                    // -------------------
-
-                    // active thread count
-                    details.append('text')
-                        .attr({
-                            'class': 'active-thread-count-icon',
-                            'y': 42
-                        })
-                        .text('\ue83f');
-
-                    // active thread background
-                    details.append('text')
-                        .attr({
-                            'class': 'active-thread-count',
-                            'y': 42
-                        });
-
-                    // ---------
-                    // bulletins
-                    // ---------
-
-                    // bulletin background
-                    details.append('rect')
-                        .attr({
-                            'class': 'bulletin-background',
-                            'x': function (d) {
-                                return processorData.dimensions.width - 24;
-                            },
-                            'width': 24,
-                            'height': 24
-                        });
-
-                    // bulletin icon
-                    details.append('text')
-                        .attr({
-                            'class': 'bulletin-icon',
-                            'x': function (d) {
-                                return processorData.dimensions.width - 17;
-                            },
-                            'y': 17
-                        })
-                        .text('\uf24a');
-                }
-
-                if (processorData.permissions.canRead) {
-                    // update the processor name
-                    processor.select('text.processor-name')
-                        .each(function (d) {
-                            var processorName = d3.select(this);
-
-                            // reset the processor name to handle any previous state
-                            processorName.text(null).selectAll('title').remove();
-
-                            // apply ellipsis to the processor name as necessary
-                            nfCanvasUtils.ellipsis(processorName, d.component.name);
-                        }).append('title').text(function (d) {
-                        return d.component.name;
-                    });
-
-                    // update the processor type
-                    processor.select('text.processor-type')
-                        .each(function (d) {
-                            var processorType = d3.select(this);
-
-                            // reset the processor type to handle any previous state
-                            processorType.text(null).selectAll('title').remove();
-
-                            // apply ellipsis to the processor type as necessary
-                            nfCanvasUtils.ellipsis(processorType, nfCommon.substringAfterLast(d.component.type, '.'));
-                        }).append('title').text(function (d) {
-                        return nfCommon.substringAfterLast(d.component.type, '.');
-                    });
-                } else {
-                    // clear the processor name
-                    processor.select('text.processor-name').text(null);
-
-                    // clear the processor type
-                    processor.select('text.processor-type').text(null);
-                }
-
-                // populate the stats
-                processor.call(updateProcessorStatus);
-            } else {
-                if (processorData.permissions.canRead) {
-                    // update the processor name
-                    processor.select('text.processor-name')
-                        .text(function (d) {
-                            var name = d.component.name;
-                            if (name.length > PREVIEW_NAME_LENGTH) {
-                                return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
-                            } else {
-                                return name;
-                            }
-                        });
-                } else {
-                    // clear the processor name
-                    processor.select('text.processor-name').text(null);
-                }
-
-                // remove the tooltips
-                processor.call(removeTooltips);
-
-                // remove the details if necessary
-                if (!details.empty()) {
-                    details.remove();
-                }
+        };
+    
+        // renders the processors
+        var renderProcessors = function (entered, selected) {
+            if (entered.empty()) {
+                return;
             }
-
-            // ---------------
-            // processor color
-            // ---------------
-
-            //update the processor icon container
-            processor.select('rect.processor-icon-container').classed('unauthorized', !processorData.permissions.canRead);
-
-            //update the processor icon
-            processor.select('text.processor-icon').classed('unauthorized', !processorData.permissions.canRead);
-
-            //update the processor border
-            processor.select('rect.border').classed('unauthorized', !processorData.permissions.canRead);
-
-            // use the specified color if appropriate
-            if (processorData.permissions.canRead) {
-                if (nfCommon.isDefinedAndNotNull(processorData.component.style['background-color'])) {
-                    var color = processorData.component.style['background-color'];
-
-                    //update the processor icon container
-                    processor.select('rect.processor-icon-container')
-                        .style('fill', function (d) {
-                            return color;
-                        });
-
-                    //update the processor border
-                    processor.select('rect.border')
-                        .style('stroke', function (d) {
-                            return color;
-                        });
-                }
+    
+            var processor = entered.append('g')
+                .attr({
+                    'id': function (d) {
+                        return 'id-' + d.id;
+                    },
+                    'class': 'processor component'
+                })
+                .classed('selected', selected)
+              .call(nfCanvasUtils.position);
+    
+            // processor border
+            processor.append('rect')
+                .attr({
+                    'class': 'border',
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': function (d) {
+                        return d.dimensions.height;
+                    },
+                    'fill': 'transparent',
+                    'stroke': 'transparent'
+                });
+    
+            // processor body
+            processor.append('rect')
+                .attr({
+                    'class': 'body',
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': function (d) {
+                        return d.dimensions.height;
+                    },
+                    'filter': 'url(#component-drop-shadow)',
+                    'stroke-width': 0
+                });
+    
+            // processor name
+            processor.append('text')
+                .attr({
+                  'x': 72,
+                  'y': 23,
+                  'width': 210,
+                  'height': 14,
+                    'class': 'processor-name'
+                });
+    
+          // processor icon container
+          processor.append('rect')
+              .attr({
+                  'x': 0,
+                  'y': 0,
+                  'width': 50,
+                  'height': 50,
+                  'class': 'processor-icon-container'
+              });
+  
+            // processor icon
+            processor.append('text')
+                .attr({
+                  'x': 9,
+                  'y': 35,
+                    'class': 'processor-icon'
+                })
+                .text('\ue807');
+    
+          // restricted icon background
+          processor.append('circle')
+                .attr({
+                  'r': 9,
+                  'cx': 12,
+                  'cy': 12,
+                  'class': 'restricted-background'
+                });
+    
+          // restricted icon
+          processor.append('text')
+              .attr({
+                  'x': 7.75,
+                  'y': 17,
+                  'class': 'restricted'
+              })
+              .text('\uf132');
+    
+            // make processors selectable
+          processor.call(nfSelectable.activate).call(nfContextMenu.activate);
+        };
+    
+        /**
+         * Updates the processors in the specified selection.
+         *
+         * @param {selection} updated       The processors to update
+         */
+        var updateProcessors = function (updated) {
+            if (updated.empty()) {
+                return;
             }
-
-            // update the processor color
-            processor.select('text.processor-icon')
-                .style('fill', function (d) {
-
-                    // get the default color
-                    var color = nfProcessor.defaultIconColor();
-
-                    if (!d.permissions.canRead) {
-                        return color;
+    
+            // processor border authorization
+            updated.select('rect.border')
+                .classed('unauthorized', function (d) {
+                    return d.permissions.canRead === false;
+                });
+    
+            // processor body authorization
+            updated.select('rect.body')
+                .classed('unauthorized', function (d) {
+                    return d.permissions.canRead === false;
+                });
+    
+            updated.each(function (processorData) {
+                var processor = d3.select(this);
+                var details = processor.select('g.processor-canvas-details');
+    
+                // update the component behavior as appropriate
+              nfCanvasUtils.editable(processor, nfConnectable, nfDraggable);
+    
+                // if this processor is visible, render everything
+                if (processor.classed('visible')) {
+                    if (details.empty()) {
+                        details = processor.append('g').attr('class', 'processor-canvas-details');
+    
+                        // run status icon
+                        details.append('text')
+                            .attr({
+                                'class': 'run-status-icon',
+                              'x': 55,
+                              'y': 23
+                            });
+    
+                        // processor type
+                        details.append('text')
+                            .attr({
+                                'class': 'processor-type',
+                              'x': 72,
+                              'y': 37,
+                              'width': 236,
+                              'height': 12
+                            });
+    
+                        // -----
+                        // stats
+                        // -----
+    
+                        // draw the processor statistics table
+    
+                        // in
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 50,
+                                'fill': '#f4f6f7'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 68,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // read/write
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 69,
+                                'fill': '#ffffff'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 87,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // out
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 20,
+                                'x': 0,
+                                'y': 88,
+                                'fill': '#f4f6f7'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 106,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // tasks/time
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 107,
+                                'fill': '#ffffff'
+                            });
+    
+                        // stats label container
+                        var processorStatsLabel = details.append('g')
+                            .attr({
+                                'transform': 'translate(10, 55)'
+                            });
+    
+                        // in label
+                        processorStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'y': 9,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-processor.In'));
+    
+                        // read/write label
+                        processorStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'y': 27,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-processor.ReadWrite'));
+    
+                        // out label
+                        processorStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'y': 46,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-processor.Out'));
+    
+                        // tasks/time label
+                        processorStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'y': 65,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-processor.TasksTime'));
+    
+                        // stats value container
+                        var processorStatsValue = details.append('g')
+                            .attr({
+                                'transform': 'translate(85, 55)'
+                            });
+    
+                        // in value
+                        var inText = processorStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 9,
+                                'y': 9,
+                                'class': 'processor-in stats-value'
+                            });
+    
+                        // in count
+                        inText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // in size
+                        inText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // read/write value
+                        processorStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'y': 27,
+                                'class': 'processor-read-write stats-value'
+                            });
+    
+                        // out value
+                        var outText = processorStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'y': 46,
+                                'class': 'processor-out stats-value'
+                            });
+    
+                        // out count
+                        outText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // out size
+                        outText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // tasks/time value
+                        processorStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'y': 65,
+                                'class': 'processor-tasks-time stats-value'
+                            });
+    
+                        // stats value container
+                        var processorStatsInfo = details.append('g')
+                            .attr('transform', 'translate(305, 55)');
+    
+                        // in info
+                        processorStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'y': 9,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-processor.5min-1'));
+    
+                        // read/write info
+                        processorStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'y': 27,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-processor.5min-1'));
+    
+                        // out info
+                        processorStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'y': 46,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-processor.5min-1'));
+    
+                        // tasks/time info
+                        processorStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'y': 65,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-processor.5min-1'));
+    
+                        // -------------------
+                        // active thread count
+                        // -------------------
+    
+                        // active thread count
+                        details.append('text')
+                            .attr({
+                                'class': 'active-thread-count-icon',
+                                'y': 42
+                            })
+                            .text('\ue83f');
+    
+                        // active thread background
+                        details.append('text')
+                            .attr({
+                                'class': 'active-thread-count',
+                                'y': 42
+                            });
+    
+                        // ---------
+                        // bulletins
+                        // ---------
+    
+                        // bulletin background
+                        details.append('rect')
+                            .attr({
+                                'class': 'bulletin-background',
+                                'x': function (d) {
+                                    return processorData.dimensions.width - 24;
+                                },
+                                'width': 24,
+                                'height': 24
+                            });
+    
+                        // bulletin icon
+                        details.append('text')
+                            .attr({
+                                'class': 'bulletin-icon',
+                                'x': function (d) {
+                                    return processorData.dimensions.width - 17;
+                                },
+                                'y': 17
+                            })
+                            .text('\uf24a');
                     }
-
-                    // use the specified color if appropriate
-                    if (nfCommon.isDefinedAndNotNull(d.component.style['background-color'])) {
-                        color = d.component.style['background-color'];
-
-                        //special case #ffffff implies default fill
-                        if (color.toLowerCase() === '#ffffff') {
-                            color = nfProcessor.defaultIconColor();
-                        } else {
-                            color = nfCommon.determineContrastColor(
-                                nfCommon.substringAfterLast(
-                                    color, '#'));
-                        }
+    
+                    if (processorData.permissions.canRead) {
+                        // update the processor name
+                        processor.select('text.processor-name')
+                            .each(function (d) {
+                                var processorName = d3.select(this);
+    
+                                // reset the processor name to handle any previous state
+                                processorName.text(null).selectAll('title').remove();
+    
+                                // apply ellipsis to the processor name as necessary
+                              nfCanvasUtils.ellipsis(processorName, d.component.name);
+                            }).append('title').text(function (d) {
+                            return d.component.name;
+                        });
+    
+                        // update the processor type
+                        processor.select('text.processor-type')
+                            .each(function (d) {
+                                var processorType = d3.select(this);
+    
+                                // reset the processor type to handle any previous state
+                                processorType.text(null).selectAll('title').remove();
+    
+                                // apply ellipsis to the processor type as necessary
+                              nfCanvasUtils.ellipsis(processorType, nfCommon.substringAfterLast(d.component.type, '.'));
+                            }).append('title').text(function (d) {
+                          return nfCommon.substringAfterLast(d.component.type, '.');
+                        });
+                    } else {
+                        // clear the processor name
+                        processor.select('text.processor-name').text(null);
+    
+                        // clear the processor type
+                        processor.select('text.processor-type').text(null);
                     }
-
-                    return color;
-                });
-
-            // restricted component indicator
-            processor.select('circle.restricted-background').style('visibility', showRestricted);
-            processor.select('text.restricted').style('visibility', showRestricted);
-        });
-    };
-
-    /**
-     * Returns whether the resticted indicator should be shown for a given
-     * @param d
-     * @returns {*}
-     */
-    var showRestricted = function (d) {
-        if (!d.permissions.canRead) {
-            return 'hidden';
-        }
-
-        return d.component.restricted ? 'visible' : 'hidden';
-    }
-
-    /**
-     * Updates the stats for the processors in the specified selection.
-     *
-     * @param {selection} updated           The processors to update
-     */
-    var updateProcessorStatus = function (updated) {
-        if (updated.empty()) {
-            return;
-        }
-
-        // update the run status
-        updated.select('text.run-status-icon')
-            .attr({
-                'fill': function (d) {
-                    var fill = '#728e9b';
-
-                    if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
-                        fill = '#cf9f5d';
-                    } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
-                        fill = '#7dc7a0';
-                    } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
-                        fill = '#d18686';
+    
+                    // populate the stats
+                    processor.call(updateProcessorStatus);
+                } else {
+                    if (processorData.permissions.canRead) {
+                        // update the processor name
+                        processor.select('text.processor-name')
+                            .text(function (d) {
+                                var name = d.component.name;
+                                if (name.length > PREVIEW_NAME_LENGTH) {
+                                    return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
+                                } else {
+                                    return name;
+                                }
+                            });
+                  } else {
+                      // clear the processor name
+                      processor.select('text.processor-name').text(null);
                     }
-
-                    return fill;
-                },
-                'font-family': function (d) {
-                    var family = 'FontAwesome';
-                    if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
-                        family = 'flowfont';
+    
+                    // remove the tooltips
+                    processor.call(removeTooltips);
+    
+                    // remove the details if necessary
+                    if (!details.empty()) {
+                        details.remove();
                     }
-                    return family;
-                }
-            })
-            .text(function (d) {
-                var img = '';
-                if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
-                    img = '\ue802';
-                } else if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
-                    img = '\uf071';
-                } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
-                    img = '\uf04b';
-                } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
-                    img = '\uf04d';
                 }
-                return img;
-            })
-            .each(function (d) {
-                // get the tip
-                var tip = d3.select('#run-status-tip-' + d.id);
-
-                // if there are validation errors generate a tooltip
-                if (d.permissions.canRead && !nfCommon.isEmpty(d.component.validationErrors)) {
-                    // create the tip if necessary
-                    if (tip.empty()) {
-                        tip = d3.select('#processor-tooltips').append('div')
-                            .attr('id', function () {
-                                return 'run-status-tip-' + d.id;
-                            })
-                            .attr('class', 'tooltip nifi-tooltip');
-                    }
-
-                    // update the tip
-                    tip.html(function () {
-                        var list = nfCommon.formatUnorderedList(d.component.validationErrors);
-                        if (list === null || list.length === 0) {
-                            return '';
-                        } else {
-                            return $('<div></div>').append(list).html();
+    
+                // ---------------
+                // processor color
+                // ---------------
+    
+              //update the processor icon container
+              processor.select('rect.processor-icon-container').classed('unauthorized', !processorData.permissions.canRead);
+  
+              //update the processor icon
+              processor.select('text.processor-icon').classed('unauthorized', !processorData.permissions.canRead);
+  
+              //update the processor border
+              processor.select('rect.border').classed('unauthorized', !processorData.permissions.canRead);
+  
+              // use the specified color if appropriate
+              if (processorData.permissions.canRead) {
+                  if (nfCommon.isDefinedAndNotNull(processorData.component.style['background-color'])) {
+                      var color = processorData.component.style['background-color'];
+  
+                      //update the processor icon container
+                      processor.select('rect.processor-icon-container')
+                          .style('fill', function (d) {
+                              return color;
+                          });
+  
+                      //update the processor border
+                      processor.select('rect.border')
+                          .style('stroke', function (d) {
+                              return color;
+                          });
+                  }
+              }
+  
+                // update the processor color
+              processor.select('text.processor-icon')
+                    .style('fill', function (d) {
+    
+                        // get the default color
+                      var color = nfProcessor.defaultIconColor();
+    
+                        if (!d.permissions.canRead) {
+                            return color;
+                        }
+    
+                        // use the specified color if appropriate
+                      if (nfCommon.isDefinedAndNotNull(d.component.style['background-color'])) {
+                            color = d.component.style['background-color'];
+    
+                          //special case #ffffff implies default fill
+                          if (color.toLowerCase() === '#ffffff') {
+                              color = nfProcessor.defaultIconColor();
+                          } else {
+                              color = nfCommon.determineContrastColor(
+                                  nfCommon.substringAfterLast(
+                                      color, '#'));
+                          }
                         }
+    
+                        return color;
                     });
-
-                    // add the tooltip
-                    nfCanvasUtils.canvasTooltip(tip, d3.select(this));
-                } else {
-                    // remove the tip if necessary
-                    if (!tip.empty()) {
-                        tip.remove();
-                    }
-                }
-            });
-
-        // in count value
-        updated.select('text.processor-in tspan.count')
-            .text(function (d) {
-                return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.input, ' ');
-            });
-
-        // in size value
-        updated.select('text.processor-in tspan.size')
-            .text(function (d) {
-                return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.input, ' ');
-            });
-
-        // read/write value
-        updated.select('text.processor-read-write')
-            .text(function (d) {
-                return d.status.aggregateSnapshot.read + ' / ' + d.status.aggregateSnapshot.written;
-            });
-
-        // out count value
-        updated.select('text.processor-out tspan.count')
-            .text(function (d) {
-                return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.output, ' ');
-            });
-
-        // out size value
-        updated.select('text.processor-out tspan.size')
-            .text(function (d) {
-                return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.output, ' ');
-            });
-
-        // tasks/time value
-        updated.select('text.processor-tasks-time')
-            .text(function (d) {
-                return d.status.aggregateSnapshot.tasks + ' / ' + d.status.aggregateSnapshot.tasksDuration;
-            });
-
-        updated.each(function (d) {
-            var processor = d3.select(this);
-
-            // -------------------
-            // active thread count
-            // -------------------
-
-            nfCanvasUtils.activeThreadCount(processor, d);
-
-            // ---------
-            // bulletins
-            // ---------
-
-            processor.select('rect.bulletin-background').classed('has-bulletins', function () {
-                return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
-            });
-
-            nfCanvasUtils.bulletins(processor, d, function () {
-                return d3.select('#processor-tooltips');
-            }, 286);
-        });
-    };
-
-    /**
-     * Removes the processors in the specified selection.
-     *
-     * @param {selection} removed
-     */
-    var removeProcessors = function (removed) {
-        if (removed.empty()) {
-            return;
-        }
-
-        removed.call(removeTooltips).remove();
-    };
-
-    /**
-     * Removes the tooltips for the processors in the specified selection.
-     *
-     * @param {selection} removed
-     */
-    var removeTooltips = function (removed) {
-        removed.each(function (d) {
-            // remove any associated tooltips
-            $('#run-status-tip-' + d.id).remove();
-            $('#bulletin-tip-' + d.id).remove();
-        });
-    };
-
-    var nfProcessor = {
+    
+              // restricted component indicator
+              processor.select('circle.restricted-background').style('visibility', showRestricted);
+              processor.select('text.restricted').style('visibility', showRestricted);
+          });
+        };
+    
+      /**
+       * Returns whether the resticted indicator should be shown for a given
+       * @param d
+       * @returns {*}
+       */
+      var showRestricted = function (d) {
+          if (!d.permissions.canRead) {
+              return 'hidden';
+          }
+  
+          return d.component.restricted ? 'visible' : 'hidden';
+      }
+    
         /**
-         * Initializes of the Processor handler.
+         * Updates the stats for the processors in the specified selection.
          *
-         * @param nfConnectableRef   The nfConnectable module.
-         * @param nfDraggableRef   The nfDraggable module.
-         * @param nfSelectableRef   The nfSelectable module.
-         * @param nfContextMenuRef   The nfContextMenu module.
+         * @param {selection} updated           The processors to update
          */
-        init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
-            nfConnectable = nfConnectableRef;
-            nfDraggable = nfDraggableRef;
-            nfSelectable = nfSelectableRef;
-            nfContextMenu = nfContextMenuRef;
-
-            processorMap = d3.map();
-            removedCache = d3.map();
-            addedCache = d3.map();
-
-            // create the processor container
-            processorContainer = d3.select('#canvas').append('g')
+        var updateProcessorStatus = function (updated) {
+            if (updated.empty()) {
+                return;
+            }
+    
+            // update the run status
+            updated.select('text.run-status-icon')
                 .attr({
-                    'pointer-events': 'all',
-                    'class': 'processors'
+                    'fill': function (d) {
+                        var fill = '#728e9b';
+    
+                        if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
+                          fill = '#cf9f5d';
+                      } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
+                          fill = '#7dc7a0';
+                      } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
+                          fill = '#d18686';
+                        }
+    
+                        return fill;
+                    },
+                    'font-family': function (d) {
+                        var family = 'FontAwesome';
+                        if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
+                            family = 'flowfont';
+                        }
+                        return family;
+                    }
+                })
+                .text(function (d) {
+                    var img = '';
+                    if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
+                        img = '\ue802';
+                    } else if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
+                        img = '\uf071';
+                    } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
+                        img = '\uf04b';
+                    } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
+                        img = '\uf04d';
+                    }
+                    return img;
+                })
+                .each(function (d) {
+                    // get the tip
+                    var tip = d3.select('#run-status-tip-' + d.id);
+    
+                    // if there are validation errors generate a tooltip
+                  if (d.permissions.canRead && !nfCommon.isEmpty(d.component.validationErrors)) {
+                        // create the tip if necessary
+                        if (tip.empty()) {
+                            tip = d3.select('#processor-tooltips').append('div')
+                                .attr('id', function () {
+                                    return 'run-status-tip-' + d.id;
+                                })
+                                .attr('class', 'tooltip nifi-tooltip');
+                        }
+    
+                        // update the tip
+                        tip.html(function () {
+                          var list = nfCommon.formatUnorderedList(d.component.validationErrors);
+                            if (list === null || list.length === 0) {
+                                return '';
+                            } else {
+                                return $('<div></div>').append(list).html();
+                            }
+                        });
+    
+                        // add the tooltip
+                      nfCanvasUtils.canvasTooltip(tip, d3.select(this));
+                    } else {
+                        // remove the tip if necessary
+                        if (!tip.empty()) {
+                            tip.remove();
+                        }
+                    }
+                });
+    
+            // in count value
+            updated.select('text.processor-in tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.input, ' ');
+                });
+    
+            // in size value
+            updated.select('text.processor-in tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.input, ' ');
+                });
+    
+            // read/write value
+            updated.select('text.processor-read-write')
+                .text(function (d) {
+                    return d.status.aggregateSnapshot.read + ' / ' + d.status.aggregateSnapshot.written;
+                });
+    
+            // out count value
+            updated.select('text.processor-out tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.output, ' ');
+                });
+    
+            // out size value
+            updated.select('text.processor-out tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.output, ' ');
+                });
+    
+            // tasks/time value
+            updated.select('text.processor-tasks-time')
+                .text(function (d) {
+                    return d.status.aggregateSnapshot.tasks + ' / ' + d.status.aggregateSnapshot.tasksDuration;
+                });
+    
+            updated.each(function (d) {
+                var processor = d3.select(this);
+    
+                // -------------------
+                // active thread count
+                // -------------------
+    
+              nfCanvasUtils.activeThreadCount(processor, d);
+    
+                // ---------
+                // bulletins
+                // ---------
+    
+                processor.select('rect.bulletin-background').classed('has-bulletins', function () {
+                  return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
                 });
-        },
-
+    
+              nfCanvasUtils.bulletins(processor, d, function () {
+                    return d3.select('#processor-tooltips');
+                }, 286);
+            });
+        };
+    
         /**
-         * Adds the specified processor entity.
+         * Removes the processors in the specified selection.
          *
-         * @param processorEntities       The processor
-         * @param options           Configuration options
+         * @param {selection} removed
          */
-        add: function (processorEntities, options) {
-            var selectAll = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-            }
-
-            // get the current time
-            var now = new Date().getTime();
-
-            var add = function (processorEntity) {
-                addedCache.set(processorEntity.id, now);
-
-                // add the processor
-                processorMap.set(processorEntity.id, $.extend({
-                    type: 'Processor',
-                    dimensions: dimensions
-                }, processorEntity));
-            };
-
-            // determine how to handle the specified processor
-            if ($.isArray(processorEntities)) {
-                $.each(processorEntities, function (_, processorEntity) {
-                    add(processorEntity);
-                });
-            } else if (nfCommon.isDefinedAndNotNull(processorEntities)) {
-                add(processorEntities);
+        var removeProcessors = function (removed) {
+            if (removed.empty()) {
+                return;
             }
-
-            // apply the selection and handle new processor
-            var selection = select();
-            selection.enter().call(renderProcessors, selectAll);
-            selection.call(updateProcessors);
-        },
-
+    
+            removed.call(removeTooltips).remove();
+        };
+    
         /**
-         * Populates the graph with the specified processors.
+         * Removes the tooltips for the processors in the specified selection.
          *
-         * @argument {object | array} processorEntities                The processors to add
-         * @argument {object} options                Configuration options
+         * @param {selection} removed
          */
-        set: function (processorEntities, options) {
-            var selectAll = false;
-            var transition = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-            }
-
-            var set = function (proposedProcessorEntity) {
-                var currentProcessorEntity = processorMap.get(proposedProcessorEntity.id);
-
-                // set the processor if appropriate due to revision and wasn't previously removed
-                if (nfClient.isNewerRevision(currentProcessorEntity, proposedProcessorEntity) && !removedCache.has(proposedProcessorEntity.id)) {
-                    processorMap.set(proposedProcessorEntity.id, $.extend({
+        var removeTooltips = function (removed) {
+            removed.each(function (d) {
+                // remove any associated tooltips
+                $('#run-status-tip-' + d.id).remove();
+                $('#bulletin-tip-' + d.id).remove();
+            });
+        };
+    
+      var nfProcessor = {
+            /**
+             * Initializes of the Processor handler.
+           *
+           * @param nfConnectableRef   The nfConnectable module.
+           * @param nfDraggableRef   The nfDraggable module.
+           * @param nfSelectableRef   The nfSelectable module.
+           * @param nfContextMenuRef   The nfContextMenu module.
+             */
+          init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
+              nfConnectable = nfConnectableRef;
+              nfDraggable = nfDraggableRef;
+              nfSelectable = nfSelectableRef;
+              nfContextMenu = nfContextMenuRef;
+  
+                processorMap = d3.map();
+              removedCache = d3.map();
+              addedCache = d3.map();
+    
+                // create the processor container
+                processorContainer = d3.select('#canvas').append('g')
+                    .attr({
+                        'pointer-events': 'all',
+                        'class': 'processors'
+                    });
+            },
+    
+            /**
+             * Adds the specified processor entity.
+             *
+             * @param processorEntities       The processor
+             * @param options           Configuration options
+             */
+            add: function (processorEntities, options) {
+                var selectAll = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                }
+    
+              // get the current time
+              var now = new Date().getTime();
+    
+                var add = function (processorEntity) {
+                  addedCache.set(processorEntity.id, now);
+  
+                    // add the processor
+                    processorMap.set(processorEntity.id, $.extend({
                         type: 'Processor',
                         dimensions: dimensions
-                    }, proposedProcessorEntity));
+                    }, processorEntity));
+                };
+    
+                // determine how to handle the specified processor
+                if ($.isArray(processorEntities)) {
+                    $.each(processorEntities, function (_, processorEntity) {
+                        add(processorEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(processorEntities)) {
+                    add(processorEntities);
+                }
+    
+                // apply the selection and handle new processor
+                var selection = select();
+                selection.enter().call(renderProcessors, selectAll);
+                selection.call(updateProcessors);
+            },
+    
+            /**
+             * Populates the graph with the specified processors.
+             *
+             * @argument {object | array} processorEntities                The processors to add
+             * @argument {object} options                Configuration options
+             */
+            set: function (processorEntities, options) {
+                var selectAll = false;
+                var transition = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                  transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
                 }
-            };
-
-            // determine how to handle the specified processor
-            if ($.isArray(processorEntities)) {
-                $.each(processorMap.keys(), function (_, key) {
-                    var currentProcessorEntity = processorMap.get(key);
-                    var isPresent = $.grep(processorEntities, function (proposedProcessorEntity) {
-                        return proposedProcessorEntity.id === currentProcessorEntity.id;
+    
+              var set = function (proposedProcessorEntity) {
+                  var currentProcessorEntity = processorMap.get(proposedProcessorEntity.id);
+  
+                  // set the processor if appropriate due to revision and wasn't previously removed
+                  if (nfClient.isNewerRevision(currentProcessorEntity, proposedProcessorEntity) && !removedCache.has(proposedProcessorEntity.id)) {
+                      processorMap.set(proposedProcessorEntity.id, $.extend({
+                            type: 'Processor',
+                            dimensions: dimensions
+                      }, proposedProcessorEntity));
+                  }
+                };
+    
+                // determine how to handle the specified processor
+                if ($.isArray(processorEntities)) {
+                    $.each(processorMap.keys(), function (_, key) {
+                      var currentProcessorEntity = processorMap.get(key);
+                      var isPresent = $.grep(processorEntities, function (proposedProcessorEntity) {
+                          return proposedProcessorEntity.id === currentProcessorEntity.id;
+                      });
+  
+                      // if the current processor is not present and was not recently added, remove it
+                      if (isPresent.length === 0 && !addedCache.has(key)) {
+                            processorMap.remove(key);
+                      }
                     });
-
-                    // if the current processor is not present and was not recently added, remove it
-                    if (isPresent.length === 0 && !addedCache.has(key)) {
-                        processorMap.remove(key);
-                    }
-                });
-                $.each(processorEntities, function (_, processorEntity) {
-                    set(processorEntity);
-                });
-            } else if (nfCommon.isDefinedAndNotNull(processorEntities)) {
-                set(processorEntities);
-            }
-
-            // apply the selection and handle all new processors
-            var selection = select();
-            selection.enter().call(renderProcessors, selectAll);
-            selection.call(updateProcessors).call(nfCanvasUtils.position, transition);
-            selection.exit().call(removeProcessors);
-        },
-
-        /**
-         * If the processor id is specified it is returned. If no processor id
-         * specified, all processors are returned.
-         *
-         * @param {string} id
-         */
-        get: function (id) {
-            if (nfCommon.isUndefined(id)) {
-                return processorMap.values();
-            } else {
-                return processorMap.get(id);
-            }
-        },
-
-        /**
-         * If the processor id is specified it is refresh according to the current
-         * state. If not processor id is specified, all processors are refreshed.
-         *
-         * @param {string} id      Optional
-         */
-        refresh: function (id) {
-            if (nfCommon.isDefinedAndNotNull(id)) {
-                d3.select('#id-' + id).call(updateProcessors);
-            } else {
-                d3.selectAll('g.processor').call(updateProcessors);
-            }
-        },
-
-        /**
-         * Positions the component.
-         *
-         * @param {string} id   The id
-         */
-        position: function (id) {
-            d3.select('#id-' + id).call(nfCanvasUtils.position);
-        },
-
-        /**
-         * Refreshes the components necessary after a pan event.
-         */
-        pan: function () {
-            d3.selectAll('g.processor.entering, g.processor.leaving').call(updateProcessors);
-        },
-
-        /**
-         * Reloads the processor state from the server and refreshes the UI.
-         * If the processor is currently unknown, this function just returns.
-         *
-         * @param {string} id The processor id
-         */
-        reload: function (id) {
-            if (processorMap.has(id)) {
-                var processorEntity = processorMap.get(id);
-                return $.ajax({
-                    type: 'GET',
-                    url: processorEntity.uri,
-                    dataType: 'json'
-                }).done(function (response) {
-                    nfProcessor.set(response);
-                });
-            }
-        },
-
-        /**
-         * Removes the specified processor.
-         *
-         * @param {array|string} processorIds      The processors
-         */
-        remove: function (processorIds) {
-            var now = new Date().getTime();
-
-            if ($.isArray(processorIds)) {
-                $.each(processorIds, function (_, processorId) {
-                    removedCache.set(processorId, now);
-                    processorMap.remove(processorId);
-                });
-            } else {
-                removedCache.set(processorIds, now);
-                processorMap.remove(processorIds);
+                    $.each(processorEntities, function (_, processorEntity) {
+                        set(processorEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(processorEntities)) {
+                    set(processorEntities);
+                }
+    
+                // apply the selection and handle all new processors
+                var selection = select();
+                selection.enter().call(renderProcessors, selectAll);
+              selection.call(updateProcessors).call(nfCanvasUtils.position, transition);
+                selection.exit().call(removeProcessors);
+            },
+    
+            /**
+             * If the processor id is specified it is returned. If no processor id
+             * specified, all processors are returned.
+             *
+             * @param {string} id
+             */
+            get: function (id) {
+              if (nfCommon.isUndefined(id)) {
+                    return processorMap.values();
+                } else {
+                    return processorMap.get(id);
+                }
+            },
+    
+            /**
+             * If the processor id is specified it is refresh according to the current
+             * state. If not processor id is specified, all processors are refreshed.
+             *
+             * @param {string} id      Optional
+             */
+            refresh: function (id) {
+              if (nfCommon.isDefinedAndNotNull(id)) {
+                    d3.select('#id-' + id).call(updateProcessors);
+                } else {
+                    d3.selectAll('g.processor').call(updateProcessors);
+                }
+            },
+    
+            /**
+             * Positions the component.
+             *
+             * @param {string} id   The id
+             */
+            position: function (id) {
+              d3.select('#id-' + id).call(nfCanvasUtils.position);
+            },
+    
+            /**
+             * Refreshes the components necessary after a pan event.
+             */
+            pan: function () {
+                d3.selectAll('g.processor.entering, g.processor.leaving').call(updateProcessors);
+            },
+    
+            /**
+             * Reloads the processor state from the server and refreshes the UI.
+             * If the processor is currently unknown, this function just returns.
+             *
+             * @param {string} id The processor id
+             */
+            reload: function (id) {
+                if (processorMap.has(id)) {
+                    var processorEntity = processorMap.get(id);
+                    return $.ajax({
+                        type: 'GET',
+                        url: processorEntity.uri,
+                        dataType: 'json'
+                    }).done(function (response) {
+                      nfProcessor.set(response);
+                    });
+                }
+            },
+    
+            /**
+             * Removes the specified processor.
+             *
+           * @param {array|string} processorIds      The processors
+             */
+          remove: function (processorIds) {
+              var now = new Date().getTime();
+  
+              if ($.isArray(processorIds)) {
+                  $.each(processorIds, function (_, processorId) {
+                      removedCache.set(processorId, now);
+                      processorMap.remove(processorId);
+                    });
+                } else {
+                  removedCache.set(processorIds, now);
+                  processorMap.remove(processorIds);
+                }
+    
+                // apply the selection and handle all removed processors
+                select().exit().call(removeProcessors);
+            },
+    
+            /**
+             * Removes all processors.
+             */
+            removeAll: function () {
+              nfProcessor.remove(processorMap.keys());
+          },
+  
+          /**
+           * Expires the caches up to the specified timestamp.
+           *
+           * @param timestamp
+           */
+          expireCaches: function (timestamp) {
+              var expire = function (cache) {
+                  cache.forEach(function (id, entryTimestamp) {
+                      if (timestamp > entryTimestamp) {
+                          cache.remove(id);
+                      }
+                  });
+              };
+  
+              expire(addedCache);
+              expire(removedCache);
+          },
+  
+          /**
+           * Returns the default fill color that should be used when drawing a processor.
+           */
+          defaultFillColor: function () {
+              return '#FFFFFF';
+          },
+  
+          /**
+           * Returns the default icon color that should be used when drawing a processor.
+           */
+          defaultIconColor: function () {
+                return '#ad9897';
             }
-
-            // apply the selection and handle all removed processors
-            select().exit().call(removeProcessors);
-        },
-
-        /**
-         * Removes all processors.
-         */
-        removeAll: function () {
-            nfProcessor.remove(processorMap.keys());
-        },
-
-        /**
-         * Expires the caches up to the specified timestamp.
-         *
-         * @param timestamp
-         */
-        expireCaches: function (timestamp) {
-            var expire = function (cache) {
-                cache.forEach(function (id, entryTimestamp) {
-                    if (timestamp > entryTimestamp) {
-                        cache.remove(id);
-                    }
-                });
-            };
-
-            expire(addedCache);
-            expire(removedCache);
-        },
-
-        /**
-         * Returns the default fill color that should be used when drawing a processor.
-         */
-        defaultFillColor: function () {
-            return '#FFFFFF';
-        },
-
-        /**
-         * Returns the default icon color that should be used when drawing a processor.
-         */
-        defaultIconColor: function () {
-            return '#ad9897';
-        }
-    };
-
-    return nfProcessor;
-}));
\ No newline at end of file
+        };
+    
+      return nfProcessor;
+  }));
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 98632dc74265..ef3ba113a720 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
@@ -1,716 +1,240 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-/**
- * Lists FlowFiles from a given connection.
- */
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'Slick',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.Shell',
-                'nf.ng.Bridge',
-                'nf.ClusterSummary',
-                'nf.ErrorHandler',
-                'nf.Storage',
-                'nf.CanvasUtils'],
-            function ($, Slick, nfCommon, nfDialog, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils) {
-                return (nf.QueueListing = factory($, Slick, nfCommon, nfDialog, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.QueueListing =
-            factory(require('jquery'),
-                require('Slick'),
-                require('nf.Common'),
-                require('nf.Dialog'),
-                require('nf.Shell'),
-                require('nf.ng.Bridge'),
-                require('nf.ClusterSummary'),
-                require('nf.ErrorHandler'),
-                require('nf.Storage'),
-                require('nf.CanvasUtils')));
-    } else {
-        nf.QueueListing = factory(root.$,
-            root.Slick,
-            root.nf.Common,
-            root.nf.Dialog,
-            root.nf.Shell,
-            root.nf.ng.Bridge,
-            root.nf.ClusterSummary,
-            root.nf.ErrorHandler,
-            root.nf.Storage,
-            root.nf.CanvasUtils);
-    }
-}(this, function ($, Slick, nfCommon, nfDialog, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils) {
-    'use strict';
-
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        urls: {
-            uiExtensionToken: '../nifi-api/access/ui-extension-token',
-            downloadToken: '../nifi-api/access/download-token'
-        }
-    };
-
-    /**
-     * Initializes the listing request status dialog.
-     */
-    var initializeListingRequestStatusDialog = function () {
-        // configure the drop request status dialog
-        $('#listing-request-status-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Queue Listing',
-            handler: {
-                close: function () {
-                    // clear the current button model
-                    $('#listing-request-status-dialog').modal('setButtonModel', []);
-                }
-            }
-        });
-    };
-
-    /**
-     * Downloads the content for the flowfile currently being viewed.
+    /*
+     * 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.
      */
-    var downloadContent = function () {
-        var dataUri = $('#flowfile-uri').text() + '/content';
-
-        // perform the request once we've received a token
-        nfCommon.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
-            var parameters = {};
-
-            // conditionally include the ui extension token
-            if (!nfCommon.isBlank(downloadToken)) {
-                parameters['access_token'] = downloadToken;
-            }
-
-            // conditionally include the cluster node id
-            var clusterNodeId = $('#flowfile-cluster-node-id').text();
-            if (!nfCommon.isBlank(clusterNodeId)) {
-                parameters['clusterNodeId'] = clusterNodeId;
-            }
-
-            // open the url
-            if ($.isEmptyObject(parameters)) {
-                window.open(dataUri);
-            } else {
-                window.open(dataUri + '?' + $.param(parameters));
-            }
-        }).fail(function () {
-            nfDialog.showOkDialog({
-                headerText: 'Queue Listing',
-                dialogContent: 'Unable to generate access token for downloading content.'
-            });
-        });
-    };
-
+    
+  /* global define, module, require, exports */
+    
     /**
-     * Views the content for the flowfile currently being viewed.
+     * Lists FlowFiles from a given connection.
      */
-    var viewContent = function () {
-        var dataUri = $('#flowfile-uri').text() + '/content';
-
-        // generate tokens as necessary
-        var getAccessTokens = $.Deferred(function (deferred) {
-            if (nfStorage.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 () {
-                    nfDialog.showOkDialog({
-                        headerText: 'Queue Listing',
-                        dialogContent: 'Unable to generate access token for viewing content.'
-                    });
-                    deferred.reject();
-                });
-            } else {
-                deferred.resolve('', '');
-            }
-        }).promise();
-
-        // perform the request after we've received the tokens
-        getAccessTokens.done(function (uiExtensionToken, downloadToken) {
-            var dataUriParameters = {};
-
-            // conditionally include the cluster node id
-            var clusterNodeId = $('#flowfile-cluster-node-id').text();
-            if (!nfCommon.isBlank(clusterNodeId)) {
-                dataUriParameters['clusterNodeId'] = clusterNodeId;
-            }
-
-            // include the download token if applicable
-            if (!nfCommon.isBlank(downloadToken)) {
-                dataUriParameters['access_token'] = downloadToken;
-            }
-
-            // include parameters if necessary
-            if ($.isEmptyObject(dataUriParameters) === false) {
-                dataUri = dataUri + '?' + $.param(dataUriParameters);
-            }
-
-            // open the content viewer
-            var contentViewerUrl = $('#nifi-content-viewer-url').text();
-
-            // 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 += '&';
-            }
-
-            var contentViewerParameters = {
-                'ref': dataUri
-            };
-
-            // include the download token if applicable
-            if (!nfCommon.isBlank(uiExtensionToken)) {
-                contentViewerParameters['access_token'] = uiExtensionToken;
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Shell',
+                  'nf.ng.Bridge',
+                  'nf.ClusterSummary',
+                  'nf.ErrorHandler',
+                  'nf.Storage',
+                  'nf.CanvasUtils'],
+              function ($, Slick, nfCommon, nfDialog, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils) {
+                  return (nf.QueueListing = factory($, Slick, nfCommon, nfDialog, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.QueueListing =
+              factory(require('jquery'),
+                  require('Slick'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Shell'),
+                  require('nf.ng.Bridge'),
+                  require('nf.ClusterSummary'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Storage'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.QueueListing = factory(root.$,
+              root.Slick,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Shell,
+              root.nf.ng.Bridge,
+              root.nf.ClusterSummary,
+              root.nf.ErrorHandler,
+              root.nf.Storage,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, Slick, nfCommon, nfDialog, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils) {
+      'use strict';
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                uiExtensionToken: '../nifi-api/access/ui-extension-token',
+                downloadToken: '../nifi-api/access/download-token'
             }
-
-            // open the content viewer
-            window.open(contentViewerUrl + $.param(contentViewerParameters));
-        });
-    };
-
-    /**
-     * Performs a listing on the specified connection.
-     *
-     * @param connection the connection
-     */
-    var performListing = function (connection) {
-        var MAX_DELAY = 4;
-        var cancelled = false;
-        var listingRequest = null;
-        var listingRequestTimer = null;
-
-        return $.Deferred(function (deferred) {
-            // updates the progress bar
-            var updateProgress = function (percentComplete) {
-                // remove existing labels
-                var progressBar = $('#listing-request-percent-complete');
-                progressBar.find('div.progress-label').remove();
-                progressBar.find('md-progress-linear').remove();
-
-                // update the progress
-                var label = $('<div class="progress-label"></div>').text(percentComplete + '%');
-                (nfNgBridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + percentComplete + '" class="md-hue-2" md-mode="determinate" aria-label="Searching Queue"></md-progress-linear>'))(nfNgBridge.rootScope)).appendTo(progressBar);
-                progressBar.append(label);
-            };
-
-            // update the button model of the drop request status dialog
-            $('#listing-request-status-dialog').modal('setButtonModel', [{
-                headerText: 'Queue Listing',
-                buttonText: 'Stop',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
+        };
+    
+        /**
+         * Initializes the listing request status dialog.
+         */
+        var initializeListingRequestStatusDialog = function () {
+            // configure the drop request status dialog
+            $('#listing-request-status-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-queue-listing.QueueListing'),
                 handler: {
-                    click: function () {
-                        cancelled = true;
-
-                        // we are waiting for the next poll attempt
-                        if (listingRequestTimer !== null) {
-                            // cancel it
-                            clearTimeout(listingRequestTimer);
-
-                            // cancel the listing request
-                            completeListingRequest();
-                        }
+                    close: function () {
+                        // clear the current button model
+                        $('#listing-request-status-dialog').modal('setButtonModel', []);
                     }
                 }
-            }]);
-
-            // completes the listing request by removing it
-            var completeListingRequest = function () {
-                $('#listing-request-status-dialog').modal('hide');
-
-                var reject = cancelled;
-
-                // ensure the listing requests are present
-                if (nfCommon.isDefinedAndNotNull(listingRequest)) {
-                    $.ajax({
-                        type: 'DELETE',
-                        url: listingRequest.uri,
-                        dataType: 'json'
-                    });
-
-                    // use the listing request from when the listing completed
-                    if (nfCommon.isEmpty(listingRequest.flowFileSummaries)) {
-                        if (cancelled === false) {
-                            reject = true;
-
-                            // show the dialog
-                            nfDialog.showOkDialog({
-                                headerText: 'Queue Listing',
-                                dialogContent: 'The queue has no FlowFiles.'
-                            });
-                        }
-                    } else {
-                        // update the queue size
-                        $('#total-flowfiles-count').text(nfCommon.formatInteger(listingRequest.queueSize.objectCount));
-                        $('#total-flowfiles-size').text(nfCommon.formatDataSize(listingRequest.queueSize.byteCount));
-
-                        // update the last updated time
-                        $('#queue-listing-last-refreshed').text(listingRequest.lastUpdated);
-
-                        // show a message for the queue listing if necessary
-                        var queueListingTable = $('#queue-listing-table');
-                        var queueListingMessage = $('#queue-listing-message');
-                        if (listingRequest.sourceRunning === true || listingRequest.destinationRunning === true) {
-                            if (listingRequest.souceRunning === true && listingRequest.destinationRunning === true) {
-                                queueListingMessage.text('The source and destination of this queue are currently running. This listing may no longer be accurate.').show();
-                            } else if (listingRequest.sourceRunning === true) {
-                                queueListingMessage.text('The source of this queue is currently running. This listing may no longer be accurate.').show();
-                            } else if (listingRequest.destinationRunning === true) {
-                                queueListingMessage.text('The destination of this queue is currently running. This listing may no longer be accurate.').show();
-                            }
-                        } else {
-                            queueListingMessage.text('').hide();
-                        }
-
-                        // get the grid to load the data
-                        var queueListingGrid = $('#queue-listing-table').data('gridInstance');
-                        var queueListingData = queueListingGrid.getData();
-
-                        // load the flowfiles
-                        queueListingData.beginUpdate();
-                        queueListingData.setItems(listingRequest.flowFileSummaries, 'uuid');
-                        queueListingData.endUpdate();
-                    }
-                } else {
-                    reject = true;
+            });
+        };
+    
+        /**
+         * Downloads the content for the flowfile currently being viewed.
+         */
+        var downloadContent = function () {
+            var dataUri = $('#flowfile-uri').text() + '/content';
+    
+            // perform the request once we've received a token
+          nfCommon.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
+                var parameters = {};
+    
+                // conditionally include the ui extension token
+              if (!nfCommon.isBlank(downloadToken)) {
+                    parameters['access_token'] = downloadToken;
                 }
-
-                if (reject) {
-                    deferred.reject();
-                } else {
-                    deferred.resolve();
+    
+                // conditionally include the cluster node id
+                var clusterNodeId = $('#flowfile-cluster-node-id').text();
+              if (!nfCommon.isBlank(clusterNodeId)) {
+                    parameters['clusterNodeId'] = clusterNodeId;
                 }
-            };
-
-            // process the listing request
-            var processListingRequest = function (delay) {
-                // update the percent complete
-                updateProgress(listingRequest.percentCompleted);
-
-                // update the status of the listing request
-                $('#listing-request-status-message').text(listingRequest.state);
-
-                // close the dialog if the
-                if (listingRequest.finished === true || cancelled === true) {
-                    completeListingRequest();
+    
+                // open the url
+                if ($.isEmptyObject(parameters)) {
+                    window.open(dataUri);
                 } else {
-                    // wait delay to poll again
-                    listingRequestTimer = setTimeout(function () {
-                        // clear the listing request timer
-                        listingRequestTimer = null;
-
-                        // schedule to poll the status again in nextDelay
-                        pollListingRequest(Math.min(MAX_DELAY, delay * 2));
-                    }, delay * 1000);
+                    window.open(dataUri + '?' + $.param(parameters));
                 }
-            };
-
-            // schedule for the next poll iteration
-            var pollListingRequest = function (nextDelay) {
-                $.ajax({
-                    type: 'GET',
-                    url: listingRequest.uri,
-                    dataType: 'json'
-                }).done(function (response) {
-                    listingRequest = response.listingRequest;
-                    processListingRequest(nextDelay);
-                }).fail(completeListingRequest).fail(nfErrorHandler.handleAjaxError);
-            };
-
-            // issue the request to list the flow files
-            $.ajax({
-                type: 'POST',
-                url: '../nifi-api/flowfile-queues/' + connection.id + '/listing-requests',
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // initialize the progress bar value
-                updateProgress(0);
-
-                // show the progress dialog
-                $('#listing-request-status-dialog').modal('show');
-
-                // process the drop request
-                listingRequest = response.listingRequest;
-                processListingRequest(1);
-            }).fail(completeListingRequest).fail(nfErrorHandler.handleAjaxError);
-        }).promise();
-    };
-
-    /**
-     * Shows the details for the specified flowfile.
-     *
-     * @param flowFileSummary the flowfile summary
-     */
-    var showFlowFileDetails = function (flowFileSummary) {
-        // formats an flowfile detail
-        var formatFlowFileDetail = function (label, value) {
-            $('<div class="flowfile-detail"></div>').append(
-                $('<div class="detail-name"></div>').text(label)).append(
-                $('<div class="detail-value">' + nfCommon.formatValue(value) + '</div>').ellipsis()).append(
-                $('<div class="clear"></div>')).appendTo('#additional-flowfile-details');
-        };
-
-        // formats the content value
-        var formatContentValue = function (element, value) {
-            if (nfCommon.isDefinedAndNotNull(value)) {
-                element.removeClass('unset').text(value);
-            } else {
-                element.addClass('unset').text('No value set');
-            }
+            }).fail(function () {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-queue-listing.QueueListing'),
+                  dialogContent: nf._.msg('nf-queue-listing.Message1')
+                });
+            });
         };
-
-        var params = {};
-        if (nfCommon.isDefinedAndNotNull(flowFileSummary.clusterNodeId)) {
-            params['clusterNodeId'] = flowFileSummary.clusterNodeId;
-        }
-
-        $.ajax({
-            type: 'GET',
-            url: flowFileSummary.uri,
-            data: params,
-            dataType: 'json'
-        }).done(function (response) {
-            var flowFile = response.flowFile;
-
-            // show the URI to this flowfile
-            $('#flowfile-uri').text(flowFile.uri);
-
-            // show the flowfile details dialog
-            $('#flowfile-uuid').html(nfCommon.formatValue(flowFile.uuid));
-            $('#flowfile-filename').html(nfCommon.formatValue(flowFile.filename));
-            $('#flowfile-queue-position').html(nfCommon.formatValue(flowFile.position));
-            $('#flowfile-file-size').html(nfCommon.formatValue(flowFile.contentClaimFileSize));
-            $('#flowfile-queued-duration').text(nfCommon.formatDuration(flowFile.queuedDuration));
-            $('#flowfile-lineage-duration').text(nfCommon.formatDuration(flowFile.lineageDuration));
-            $('#flowfile-penalized').text(flowFile.penalized === true ? 'Yes' : 'No');
-
-            // conditionally show the cluster node identifier
-            if (nfCommon.isDefinedAndNotNull(flowFileSummary.clusterNodeId)) {
-                // save the cluster node id
-                $('#flowfile-cluster-node-id').text(flowFileSummary.clusterNodeId);
-
-                // render the cluster node address
-                formatFlowFileDetail('Node Address', flowFileSummary.clusterNodeAddress);
-            }
-
-            if (nfCommon.isDefinedAndNotNull(flowFile.contentClaimContainer)) {
-                // content claim
-                formatContentValue($('#content-container'), flowFile.contentClaimContainer);
-                formatContentValue($('#content-section'), flowFile.contentClaimSection);
-                formatContentValue($('#content-identifier'), flowFile.contentClaimIdentifier);
-                formatContentValue($('#content-offset'), flowFile.contentClaimOffset);
-                formatContentValue($('#content-bytes'), flowFile.contentClaimFileSizeBytes);
-
-                // input content file size
-                var contentSize = $('#content-size');
-                formatContentValue(contentSize, flowFile.contentClaimFileSize);
-                if (nfCommon.isDefinedAndNotNull(flowFile.contentClaimFileSize)) {
-                    // over the default tooltip with the actual byte count
-                    contentSize.attr('title', nfCommon.formatInteger(flowFile.contentClaimFileSizeBytes) + ' bytes');
+    
+        /**
+         * Views the content for the flowfile currently being viewed.
+         */
+        var viewContent = function () {
+            var dataUri = $('#flowfile-uri').text() + '/content';
+    
+            // generate tokens as necessary
+            var getAccessTokens = $.Deferred(function (deferred) {
+              if (nfStorage.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 () {
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-queue-listing.QueueListing'),
+                          dialogContent: nf._.msg('nf-queue-listing.Message2')
+                        });
+                        deferred.reject();
+                    });
+                } else {
+                    deferred.resolve('', '');
                 }
-
-                // show the content details
-                $('#flowfile-content-details').show();
-            } else {
-                $('#flowfile-content-details').hide();
-            }
-
-            // attributes
-            var attributesContainer = $('#flowfile-attributes-container');
-
-            // get any action details
-            $.each(flowFile.attributes, function (attributeName, attributeValue) {
-                // create the attribute record
-                var attributeRecord = $('<div class="attribute-detail"></div>')
-                    .append($('<div class="attribute-name">' + nfCommon.formatValue(attributeName) + '</div>').ellipsis())
-                    .appendTo(attributesContainer);
-
-                // add the current value
-                attributeRecord
-                    .append($('<div class="attribute-value">' + nfCommon.formatValue(attributeValue) + '</div>').ellipsis())
-                    .append('<div class="clear"></div>');
-            });
-
-            // show the dialog
-            $('#flowfile-details-dialog').modal('show');
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    var nfQueueListing = {
-        init: function () {
-            initializeListingRequestStatusDialog();
-
-            // define mouse over event for the refresh button
-            $('#queue-listing-refresh-button').click(function () {
-                var connection = $('#queue-listing-table').data('connection');
-                performListing(connection);
-            });
-
-            // define a custom formatter for showing more processor details
-            var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
-                return '<div class="pointer show-flowfile-details fa fa-info-circle" title="View Details" style="margin-top: 5px; float: left;"></div>';
-            };
-
-            // function for formatting data sizes
-            var dataSizeFormatter = function (row, cell, value, columnDef, dataContext) {
-                return nfCommon.formatDataSize(value);
-            };
-
-            // function for formatting durations
-            var durationFormatter = function (row, cell, value, columnDef, dataContext) {
-                return nfCommon.formatDuration(value);
-            };
-
-            // function for formatting penalization
-            var penalizedFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-
-                if (value === true) {
-                    markup += 'Yes';
+            }).promise();
+    
+            // perform the request after we've received the tokens
+            getAccessTokens.done(function (uiExtensionToken, downloadToken) {
+                var dataUriParameters = {};
+    
+                // conditionally include the cluster node id
+                var clusterNodeId = $('#flowfile-cluster-node-id').text();
+              if (!nfCommon.isBlank(clusterNodeId)) {
+                    dataUriParameters['clusterNodeId'] = clusterNodeId;
                 }
-
-                return markup;
-            };
-
-            // initialize the queue listing table
-            var queueListingColumns = [
-                {
-                    id: 'moreDetails',
-                    field: 'moreDetails',
-                    name: '&nbsp;',
-                    sortable: false,
-                    resizable: false,
-                    formatter: moreDetailsFormatter,
-                    width: 50,
-                    maxWidth: 50
-                },
-                {
-                    id: 'position',
-                    name: 'Position',
-                    field: 'position',
-                    sortable: false,
-                    resizable: false,
-                    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: 'size',
-                    name: 'File Size',
-                    field: 'size',
-                    sortable: false,
-                    resizable: true,
-                    defaultSortAsc: false,
-                    formatter: dataSizeFormatter
-                },
-                {
-                    id: 'queuedDuration',
-                    name: 'Queued Duration',
-                    field: 'queuedDuration',
-                    sortable: false,
-                    resizable: true,
-                    formatter: durationFormatter
-                },
-                {
-                    id: 'lineageDuration',
-                    name: 'Lineage Duration',
-                    field: 'lineageDuration',
-                    sortable: false,
-                    resizable: true,
-                    formatter: durationFormatter
-                },
-                {
-                    id: 'penalized',
-                    name: 'Penalized',
-                    field: 'penalized',
-                    sortable: false,
-                    resizable: false,
-                    width: 100,
-                    maxWidth: 100,
-                    formatter: penalizedFormatter
+    
+                // include the download token if applicable
+              if (!nfCommon.isBlank(downloadToken)) {
+                    dataUriParameters['access_token'] = downloadToken;
                 }
-            ];
-
-            // conditionally show the cluster node identifier
-            if (nfClusterSummary.isClustered()) {
-                queueListingColumns.push({
-                    id: 'clusterNodeAddress',
-                    name: 'Node',
-                    field: 'clusterNodeAddress',
-                    sortable: false,
-                    resizable: true
-                });
-            }
-
-            // add an actions column when the user can access provenance
-            if (nfCommon.canAccessProvenance()) {
-                // function for formatting actions
-                var actionsFormatter = function () {
-                    return '<div title="Provenance" class="pointer icon icon-provenance view-provenance"></div>';
+    
+                // include parameters if necessary
+                if ($.isEmptyObject(dataUriParameters) === false) {
+                    dataUri = dataUri + '?' + $.param(dataUriParameters);
+                }
+    
+                // open the content viewer
+                var contentViewerUrl = $('#nifi-content-viewer-url').text();
+    
+                // 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 += '&';
+                }
+    
+                var contentViewerParameters = {
+                    'ref': dataUri
                 };
-
-                queueListingColumns.push({
-                    id: 'actions',
-                    name: '&nbsp;',
-                    resizable: false,
-                    formatter: actionsFormatter,
-                    sortable: false,
-                    width: 50,
-                    maxWidth: 50
-                });
-            }
-
-            var queueListingOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: false,
-                enableColumnReorder: false,
-                autoEdit: false,
-                rowHeight: 24
-            };
-
-            // initialize the dataview
-            var queueListingData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            queueListingData.setItems([]);
-
-            // initialize the grid
-            var queueListingGrid = new Slick.Grid('#queue-listing-table', queueListingData, queueListingColumns, queueListingOptions);
-            queueListingGrid.setSelectionModel(new Slick.RowSelectionModel());
-            queueListingGrid.registerPlugin(new Slick.AutoTooltips());
-
-            // configure a click listener
-            queueListingGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-
-                // get the node at this row
-                var item = queueListingData.getItem(args.row);
-
-                // determine the desired action
-                if (queueListingGrid.getColumns()[args.cell].id === 'moreDetails') {
-                    if (target.hasClass('show-flowfile-details')) {
-                        showFlowFileDetails(item);
-                    }
-                } else if (queueListingGrid.getColumns()[args.cell].id === 'actions') {
-                    if (target.hasClass('view-provenance')) {
-                        // close the settings dialog
-                        $('#shell-close-button').click();
-
-                        // open the provenance page with the specified component
-                        nfShell.showPage('provenance?' + $.param({
-                                flowFileUuid: item.uuid
-                            }));
-                    }
+    
+                // include the download token if applicable
+              if (!nfCommon.isBlank(uiExtensionToken)) {
+                    contentViewerParameters['access_token'] = uiExtensionToken;
                 }
+    
+                // open the content viewer
+                window.open(contentViewerUrl + $.param(contentViewerParameters));
             });
-
-            // wire up the dataview to the grid
-            queueListingData.onRowCountChanged.subscribe(function (e, args) {
-                queueListingGrid.updateRowCount();
-                queueListingGrid.render();
-
-                // update the total number of displayed flowfiles
-                $('#displayed-flowfiles').text(args.current);
-            });
-            queueListingData.onRowsChanged.subscribe(function (e, args) {
-                queueListingGrid.invalidateRows(args.rows);
-                queueListingGrid.render();
-            });
-
-            // hold onto an instance of the grid
-            $('#queue-listing-table').data('gridInstance', queueListingGrid);
-
-            // initialize the number of display items
-            $('#displayed-flowfiles').text('0');
-        },
-
+        };
+    
         /**
-         * Initializes the flowfile details dialog.
+         * Performs a listing on the specified connection.
+         *
+         * @param connection the connection
          */
-        initFlowFileDetailsDialog: function () {
-            $('#content-download').on('click', downloadContent);
-
-            // only show if content viewer is configured
-            if (nfCommon.isContentViewConfigured()) {
-                $('#content-view').show();
-                $('#content-view').on('click', viewContent);
-            }
-
-            $('#flowfile-details-tabs').tabbs({
-                tabStyle: 'tab',
-                selectedTabStyle: 'selected-tab',
-                scrollableTabContentStyle: 'scrollable',
-                tabs: [{
-                    name: 'Details',
-                    tabContentId: 'flowfile-details-tab-content'
-                }, {
-                    name: 'Attributes',
-                    tabContentId: 'flowfile-attributes-tab-content'
-                }]
-            });
-
-            $('#flowfile-details-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: 'FlowFile',
-                buttons: [{
-                    buttonText: 'Ok',
+        var performListing = function (connection) {
+            var MAX_DELAY = 4;
+            var cancelled = false;
+            var listingRequest = null;
+            var listingRequestTimer = null;
+    
+            return $.Deferred(function (deferred) {
+                // updates the progress bar
+                var updateProgress = function (percentComplete) {
+                    // remove existing labels
+                    var progressBar = $('#listing-request-percent-complete');
+                    progressBar.find('div.progress-label').remove();
+                    progressBar.find('md-progress-linear').remove();
+    
+                    // update the progress
+                    var label = $('<div class="progress-label"></div>').text(percentComplete + '%');
+                  (nfNgBridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + percentComplete + '" class="md-hue-2" md-mode="determinate" aria-label="Searching Queue"></md-progress-linear>'))(nfNgBridge.rootScope)).appendTo(progressBar);
+                    progressBar.append(label);
+                };
+    
+                // update the button model of the drop request status dialog
+                $('#listing-request-status-dialog').modal('setButtonModel', [{
+                  headerText: nf._.msg('nf-queue-listing.QueueListing'),
+                  buttonText: nf._.msg('nf-queue-listing.Stop'),
                     color: {
                         base: '#728E9B',
                         hover: '#004849',
@@ -718,78 +242,554 @@
                     },
                     handler: {
                         click: function () {
-                            $('#flowfile-details-dialog').modal('hide');
+                            cancelled = true;
+    
+                            // we are waiting for the next poll attempt
+                            if (listingRequestTimer !== null) {
+                                // cancel it
+                                clearTimeout(listingRequestTimer);
+    
+                                // cancel the listing request
+                                completeListingRequest();
+                            }
                         }
                     }
-                }],
-                handler: {
-                    close: function () {
-                        // clear the details
-                        $('#flowfile-attributes-container').empty();
-                        $('#flowfile-cluster-node-id').text('');
-                        $('#additional-flowfile-details').empty();
-                    },
-                    open: function () {
-                        nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                }]);
+    
+                // completes the listing request by removing it
+                var completeListingRequest = function () {
+                    $('#listing-request-status-dialog').modal('hide');
+    
+                    var reject = cancelled;
+    
+                    // ensure the listing requests are present
+                  if (nfCommon.isDefinedAndNotNull(listingRequest)) {
+                        $.ajax({
+                            type: 'DELETE',
+                            url: listingRequest.uri,
+                            dataType: 'json'
+                        });
+    
+                        // use the listing request from when the listing completed
+                      if (nfCommon.isEmpty(listingRequest.flowFileSummaries)) {
+                            if (cancelled === false) {
+                                reject = true;
+    
+                                // show the dialog
+                              nfDialog.showOkDialog({
+                                  headerText: nf._.msg('nf-queue-listing.QueueListing'),
+                                  dialogContent: nf._.msg('nf-queue-listing.Message3')
+                                });
+                            }
+                        } else {
+                            // update the queue size
+                          $('#total-flowfiles-count').text(nfCommon.formatInteger(listingRequest.queueSize.objectCount));
+                          $('#total-flowfiles-size').text(nfCommon.formatDataSize(listingRequest.queueSize.byteCount));
+    
+                            // update the last updated time
+                            $('#queue-listing-last-refreshed').text(listingRequest.lastUpdated);
+    
+                            // show a message for the queue listing if necessary
+                            var queueListingTable = $('#queue-listing-table');
+                            var queueListingMessage = $('#queue-listing-message');
+                            if (listingRequest.sourceRunning === true || listingRequest.destinationRunning === true) {
+                                if (listingRequest.souceRunning === true && listingRequest.destinationRunning === true) {
+                                  queueListingMessage.text(nf._.msg('nf-queue-listing.Message4')).show();
+                                } else if (listingRequest.sourceRunning === true) {
+                                  queueListingMessage.text(nf._.msg('nf-queue-listing.Message5')).show();
+                                } else if (listingRequest.destinationRunning === true) {
+                                  queueListingMessage.text(nf._.msg('nf-queue-listing.Message6')).show();
+                                }
+                            } else {
+                                queueListingMessage.text('').hide();
+                            }
+    
+                            // get the grid to load the data
+                            var queueListingGrid = $('#queue-listing-table').data('gridInstance');
+                            var queueListingData = queueListingGrid.getData();
+    
+                            // load the flowfiles
+                            queueListingData.beginUpdate();
+                            queueListingData.setItems(listingRequest.flowFileSummaries, 'uuid');
+                            queueListingData.endUpdate();
+                        }
+                    } else {
+                        reject = true;
                     }
-                }
-            });
-        },
-
-        /**
-         * Update the size of the grid based on its container's current size.
-         */
-        resetTableSize: function () {
-            var queueListingGrid = $('#queue-listing-table').data('gridInstance');
-            if (nfCommon.isDefinedAndNotNull(queueListingGrid)) {
-                queueListingGrid.resizeCanvas();
-            }
-        },
-
+    
+                    if (reject) {
+                        deferred.reject();
+                    } else {
+                        deferred.resolve();
+                    }
+                };
+    
+                // process the listing request
+                var processListingRequest = function (delay) {
+                    // update the percent complete
+                    updateProgress(listingRequest.percentCompleted);
+    
+                    // update the status of the listing request
+                    $('#listing-request-status-message').text(listingRequest.state);
+    
+                    // close the dialog if the
+                    if (listingRequest.finished === true || cancelled === true) {
+                        completeListingRequest();
+                    } else {
+                        // wait delay to poll again
+                        listingRequestTimer = setTimeout(function () {
+                            // clear the listing request timer
+                            listingRequestTimer = null;
+    
+                            // schedule to poll the status again in nextDelay
+                            pollListingRequest(Math.min(MAX_DELAY, delay * 2));
+                        }, delay * 1000);
+                    }
+                };
+    
+                // schedule for the next poll iteration
+                var pollListingRequest = function (nextDelay) {
+                    $.ajax({
+                        type: 'GET',
+                        url: listingRequest.uri,
+                        dataType: 'json'
+                    }).done(function (response) {
+                        listingRequest = response.listingRequest;
+                        processListingRequest(nextDelay);
+                  }).fail(completeListingRequest).fail(nfErrorHandler.handleAjaxError);
+                };
+    
+                // issue the request to list the flow files
+                $.ajax({
+                    type: 'POST',
+                    url: '../nifi-api/flowfile-queues/' + connection.id + '/listing-requests',
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // initialize the progress bar value
+                    updateProgress(0);
+    
+                    // show the progress dialog
+                    $('#listing-request-status-dialog').modal('show');
+    
+                    // process the drop request
+                    listingRequest = response.listingRequest;
+                    processListingRequest(1);
+              }).fail(completeListingRequest).fail(nfErrorHandler.handleAjaxError);
+            }).promise();
+        };
+    
         /**
-         * Shows the listing of the FlowFiles from a given connection.
+         * Shows the details for the specified flowfile.
          *
-         * @param   {object}    The connection
+         * @param flowFileSummary the flowfile summary
          */
-        listQueue: function (connection) {
-            // perform the initial listing
-            performListing(connection).done(function () {
-                // update the connection name
-                var connectionName = '';
-                if (connection.permissions.canRead) {
-                    connectionName = nfCanvasUtils.formatConnectionName(connection.component);
+        var showFlowFileDetails = function (flowFileSummary) {
+            // formats an flowfile detail
+            var formatFlowFileDetail = function (label, value) {
+                $('<div class="flowfile-detail"></div>').append(
+                    $('<div class="detail-name"></div>').text(label)).append(
+                  $('<div class="detail-value">' + nfCommon.formatValue(value) + '</div>').ellipsis()).append(
+                    $('<div class="clear"></div>')).appendTo('#additional-flowfile-details');
+            };
+    
+            // formats the content value
+            var formatContentValue = function (element, value) {
+              if (nfCommon.isDefinedAndNotNull(value)) {
+                    element.removeClass('unset').text(value);
+                } else {
+                  element.addClass('unset').text(nf._.msg('nf-queue-listing.NoValueSet'));
+                }
+            };
+    
+            var params = {};
+          if (nfCommon.isDefinedAndNotNull(flowFileSummary.clusterNodeId)) {
+                params['clusterNodeId'] = flowFileSummary.clusterNodeId;
+            }
+    
+            $.ajax({
+                type: 'GET',
+                url: flowFileSummary.uri,
+                data: params,
+                dataType: 'json'
+            }).done(function (response) {
+                var flowFile = response.flowFile;
+    
+                // show the URI to this flowfile
+                $('#flowfile-uri').text(flowFile.uri);
+    
+                // show the flowfile details dialog
+              $('#flowfile-uuid').html(nfCommon.formatValue(flowFile.uuid));
+              $('#flowfile-filename').html(nfCommon.formatValue(flowFile.filename));
+              $('#flowfile-queue-position').html(nfCommon.formatValue(flowFile.position));
+              $('#flowfile-file-size').html(nfCommon.formatValue(flowFile.contentClaimFileSize));
+              $('#flowfile-queued-duration').text(nfCommon.formatDuration(flowFile.queuedDuration));
+              $('#flowfile-lineage-duration').text(nfCommon.formatDuration(flowFile.lineageDuration));
+              $('#flowfile-penalized').text(flowFile.penalized === true ? 'Yes' : 'No');
+    
+                // conditionally show the cluster node identifier
+              if (nfCommon.isDefinedAndNotNull(flowFileSummary.clusterNodeId)) {
+                    // save the cluster node id
+                    $('#flowfile-cluster-node-id').text(flowFileSummary.clusterNodeId);
+    
+                    // render the cluster node address
+                    formatFlowFileDetail('Node Address', flowFileSummary.clusterNodeAddress);
                 }
-                if (connectionName === '') {
-                    connectionName = 'Connection';
+    
+              if (nfCommon.isDefinedAndNotNull(flowFile.contentClaimContainer)) {
+                    // content claim
+                    formatContentValue($('#content-container'), flowFile.contentClaimContainer);
+                    formatContentValue($('#content-section'), flowFile.contentClaimSection);
+                    formatContentValue($('#content-identifier'), flowFile.contentClaimIdentifier);
+                    formatContentValue($('#content-offset'), flowFile.contentClaimOffset);
+                    formatContentValue($('#content-bytes'), flowFile.contentClaimFileSizeBytes);
+    
+                    // input content file size
+                    var contentSize = $('#content-size');
+                    formatContentValue(contentSize, flowFile.contentClaimFileSize);
+                  if (nfCommon.isDefinedAndNotNull(flowFile.contentClaimFileSize)) {
+                        // over the default tooltip with the actual byte count
+                      contentSize.attr('title', nfCommon.formatInteger(flowFile.contentClaimFileSizeBytes) + nf._.msg('nf-queue-listing.Bytes'));
+                    }
+    
+                    // show the content details
+                    $('#flowfile-content-details').show();
+                } else {
+                    $('#flowfile-content-details').hide();
                 }
-                $('#queue-listing-header-text').text(connectionName);
-
-                // show the listing container
-                nfShell.showContent('#queue-listing-container').done(function () {
-                    $('#queue-listing-table').removeData('connection');
-
-                    // clear the table
-                    var queueListingGrid = $('#queue-listing-table').data('gridInstance');
-                    var queueListingData = queueListingGrid.getData();
-
-                    // clear the flowfiles
-                    queueListingData.beginUpdate();
-                    queueListingData.setItems([], 'uuid');
-                    queueListingData.endUpdate();
-
-                    // reset stats
-                    $('#displayed-flowfiles, #total-flowfiles-count').text('0');
-                    $('#total-flowfiles-size').text(nfCommon.formatDataSize(0));
+    
+                // attributes
+                var attributesContainer = $('#flowfile-attributes-container');
+    
+                // get any action details
+                $.each(flowFile.attributes, function (attributeName, attributeValue) {
+                    // create the attribute record
+                    var attributeRecord = $('<div class="attribute-detail"></div>')
+                      .append($('<div class="attribute-name">' + nfCommon.formatValue(attributeName) + '</div>').ellipsis())
+                        .appendTo(attributesContainer);
+    
+                    // add the current value
+                    attributeRecord
+                      .append($('<div class="attribute-value">' + nfCommon.formatValue(attributeValue) + '</div>').ellipsis())
+                        .append('<div class="clear"></div>');
                 });
-
-                // adjust the table size
-                nfQueueListing.resetTableSize();
-
-                // store the connection for access later
-                $('#queue-listing-table').data('connection', connection);
-            });
-        }
-    };
-
-    return nfQueueListing;
-}));
\ No newline at end of file
+    
+                // show the dialog
+                $('#flowfile-details-dialog').modal('show');
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+      var nfQueueListing = {
+            init: function () {
+                initializeListingRequestStatusDialog();
+    
+                // define mouse over event for the refresh button
+                $('#queue-listing-refresh-button').click(function () {
+                    var connection = $('#queue-listing-table').data('connection');
+                    performListing(connection);
+                });
+    
+                // define a custom formatter for showing more processor details
+                var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
+                  return '<div class="pointer show-flowfile-details fa fa-info-circle" title="'+nf._.msg('nf-processor-configuration.ViewDetails')+'" style="margin-top: 5px; float: left;"></div>';
+                };
+    
+                // function for formatting data sizes
+                var dataSizeFormatter = function (row, cell, value, columnDef, dataContext) {
+                  return nfCommon.formatDataSize(value);
+                };
+    
+                // function for formatting durations
+                var durationFormatter = function (row, cell, value, columnDef, dataContext) {
+                  return nfCommon.formatDuration(value);
+                };
+    
+                // function for formatting penalization
+                var penalizedFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (value === true) {
+                        markup += 'Yes';
+                    }
+    
+                    return markup;
+                };
+    
+                // initialize the queue listing table
+                var queueListingColumns = [
+                    {
+                        id: 'moreDetails',
+                        field: 'moreDetails',
+                        name: '&nbsp;',
+                        sortable: false,
+                        resizable: false,
+                        formatter: moreDetailsFormatter,
+                        width: 50,
+                        maxWidth: 50
+                    },
+                    {
+                        id: 'position',
+                      name: nf._.msg('nf-queue-listing.Position'),
+                        field: 'position',
+                        sortable: false,
+                        resizable: false,
+                        width: 75,
+                        maxWidth: 75
+                    },
+                  {
+                      id: 'uuid',
+                      name: 'UUID',
+                      field: 'uuid',
+                      sortable: false,
+                      resizable: true
+                  },
+                  {
+                      id: 'filename',
+                      name: nf._.msg('nf-queue-listing.FileName'),
+                      field: 'filename',
+                      sortable: false,
+                      resizable: true
+                  },
+                    {
+                        id: 'size',
+                      name: nf._.msg('nf-queue-listing.FileSize'),
+                        field: 'size',
+                        sortable: false,
+                        resizable: true,
+                        defaultSortAsc: false,
+                        formatter: dataSizeFormatter
+                    },
+                    {
+                        id: 'queuedDuration',
+                      name: nf._.msg('nf-queue-listing.queuedDuration'),
+                        field: 'queuedDuration',
+                        sortable: false,
+                        resizable: true,
+                        formatter: durationFormatter
+                    },
+                    {
+                        id: 'lineageDuration',
+                      name: nf._.msg('nf-queue-listing.lineageDuration'),
+                        field: 'lineageDuration',
+                        sortable: false,
+                        resizable: true,
+                        formatter: durationFormatter
+                    },
+                    {
+                        id: 'penalized',
+                      name: nf._.msg('nf-queue-listing.penalized'),
+                        field: 'penalized',
+                        sortable: false,
+                        resizable: false,
+                        width: 100,
+                        maxWidth: 100,
+                        formatter: penalizedFormatter
+                    }
+                ];
+    
+                // conditionally show the cluster node identifier
+              if (nfClusterSummary.isClustered()) {
+                    queueListingColumns.push({
+                        id: 'clusterNodeAddress',
+                      name: nf._.msg('nf-queue-listing.node'),
+                        field: 'clusterNodeAddress',
+                        sortable: false,
+                        resizable: true
+                    });
+                }
+    
+                // add an actions column when the user can access provenance
+              if (nfCommon.canAccessProvenance()) {
+                    // function for formatting actions
+                    var actionsFormatter = function () {
+                      return '<div title="'+nf._.msg('nf-processor-configuration.Provenance')+'" class="pointer icon icon-provenance view-provenance"></div>';
+                    };
+    
+                    queueListingColumns.push({
+                        id: 'actions',
+                        name: '&nbsp;',
+                        resizable: false,
+                        formatter: actionsFormatter,
+                        sortable: false,
+                        width: 50,
+                        maxWidth: 50
+                    });
+                }
+    
+                var queueListingOptions = {
+                    forceFitColumns: true,
+                    enableTextSelectionOnCells: true,
+                    enableCellNavigation: false,
+                    enableColumnReorder: false,
+                    autoEdit: false,
+                    rowHeight: 24
+                };
+    
+                // initialize the dataview
+                var queueListingData = new Slick.Data.DataView({
+                    inlineFilters: false
+                });
+                queueListingData.setItems([]);
+    
+                // initialize the grid
+                var queueListingGrid = new Slick.Grid('#queue-listing-table', queueListingData, queueListingColumns, queueListingOptions);
+                queueListingGrid.setSelectionModel(new Slick.RowSelectionModel());
+                queueListingGrid.registerPlugin(new Slick.AutoTooltips());
+    
+                // configure a click listener
+                queueListingGrid.onClick.subscribe(function (e, args) {
+                    var target = $(e.target);
+    
+                    // get the node at this row
+                    var item = queueListingData.getItem(args.row);
+    
+                    // determine the desired action
+                    if (queueListingGrid.getColumns()[args.cell].id === 'moreDetails') {
+                        if (target.hasClass('show-flowfile-details')) {
+                            showFlowFileDetails(item);
+                        }
+                    } else if (queueListingGrid.getColumns()[args.cell].id === 'actions') {
+                        if (target.hasClass('view-provenance')) {
+                            // close the settings dialog
+                            $('#shell-close-button').click();
+    
+                            // open the provenance page with the specified component
+                          nfShell.showPage('provenance?' + $.param({
+                                    flowFileUuid: item.uuid
+                                }));
+                        }
+                    }
+                });
+    
+                // wire up the dataview to the grid
+                queueListingData.onRowCountChanged.subscribe(function (e, args) {
+                    queueListingGrid.updateRowCount();
+                    queueListingGrid.render();
+    
+                    // update the total number of displayed flowfiles
+                    $('#displayed-flowfiles').text(args.current);
+                });
+                queueListingData.onRowsChanged.subscribe(function (e, args) {
+                    queueListingGrid.invalidateRows(args.rows);
+                    queueListingGrid.render();
+                });
+    
+                // hold onto an instance of the grid
+                $('#queue-listing-table').data('gridInstance', queueListingGrid);
+    
+                // initialize the number of display items
+                $('#displayed-flowfiles').text('0');
+            },
+    
+            /**
+             * Initializes the flowfile details dialog.
+             */
+            initFlowFileDetailsDialog: function () {
+                $('#content-download').on('click', downloadContent);
+    
+                // only show if content viewer is configured
+              if (nfCommon.isContentViewConfigured()) {
+                    $('#content-view').show();
+                    $('#content-view').on('click', viewContent);
+                }
+    
+                $('#flowfile-details-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                        name: 'Details',
+                        tabContentId: 'flowfile-details-tab-content'
+                    }, {
+                        name: 'Attributes',
+                        tabContentId: 'flowfile-attributes-tab-content'
+                    }]
+                });
+    
+                $('#flowfile-details-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                  headerText: nf._.msg('nf-queue-listing.FlowFile'),
+                    buttons: [{
+                      buttonText: nf._.msg('nf-queue-listing.Ok'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#flowfile-details-dialog').modal('hide');
+                            }
+                        }
+                    }],
+                    handler: {
+                        close: function () {
+                            // clear the details
+                            $('#flowfile-attributes-container').empty();
+                            $('#flowfile-cluster-node-id').text('');
+                            $('#additional-flowfile-details').empty();
+                        },
+                        open: function () {
+                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                        }
+                    }
+                });
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+                var queueListingGrid = $('#queue-listing-table').data('gridInstance');
+              if (nfCommon.isDefinedAndNotNull(queueListingGrid)) {
+                    queueListingGrid.resizeCanvas();
+                }
+            },
+    
+            /**
+             * Shows the listing of the FlowFiles from a given connection.
+             *
+             * @param   {object}    The connection
+             */
+            listQueue: function (connection) {
+                // perform the initial listing
+                performListing(connection).done(function () {
+                    // update the connection name
+                    var connectionName = '';
+                    if (connection.permissions.canRead) {
+                      connectionName = nfCanvasUtils.formatConnectionName(connection.component);
+                    }
+                    if (connectionName === '') {
+                        connectionName = 'Connection';
+                    }
+                    $('#queue-listing-header-text').text(connectionName);
+    
+                    // show the listing container
+                  nfShell.showContent('#queue-listing-container').done(function () {
+                        $('#queue-listing-table').removeData('connection');
+    
+                        // clear the table
+                        var queueListingGrid = $('#queue-listing-table').data('gridInstance');
+                        var queueListingData = queueListingGrid.getData();
+    
+                        // clear the flowfiles
+                        queueListingData.beginUpdate();
+                        queueListingData.setItems([], 'uuid');
+                        queueListingData.endUpdate();
+    
+                        // reset stats
+                        $('#displayed-flowfiles, #total-flowfiles-count').text('0');
+                      $('#total-flowfiles-size').text(nfCommon.formatDataSize(0));
+                    });
+    
+                    // adjust the table size
+                  nfQueueListing.resetTableSize();
+    
+                    // store the connection for access later
+                    $('#queue-listing-table').data('connection', connection);
+                });
+            }
+        };
+    
+      return nfQueueListing;
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
index 6c613982d411..dca53d9e56e6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
@@ -1,106 +1,106 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common',
-                'nf.CanvasUtils'],
-            function ($, nfCommon, nfCanvasUtils) {
-                return (nf.RemoteProcessGroupDetails = factory($, nfCommon, nfCanvasUtils));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.RemoteProcessGroupDetails =
-            factory(require('jquery'),
-                require('nf.Common'),
-                require('nf.CanvasUtils')));
-    } else {
-        nf.RemoteProcessGroupDetails = factory(root.$,
-            root.nf.Common,
-            root.nf.CanvasUtils);
-    }
-}(this, function ($, nfCommon, nfCanvasUtils) {
-    'use strict';
-
-    return {
-        init: function () {
-            $('#remote-process-group-details').modal({
-                headerText: 'Remote Process Group Details',
-                scrollableContentStyle: 'scrollable',
-                buttons: [{
-                    buttonText: 'Ok',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.CanvasUtils'],
+              function ($, nfCommon, nfCanvasUtils) {
+                  return (nf.RemoteProcessGroupDetails = factory($, nfCommon, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.RemoteProcessGroupDetails =
+              factory(require('jquery'),
+                  require('nf.Common'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.RemoteProcessGroupDetails = factory(root.$,
+              root.nf.Common,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, nfCommon, nfCanvasUtils) {
+      'use strict';
+  
+        return {
+            init: function () {
+                $('#remote-process-group-details').modal({
+                  headerText: nf._.msg('nf-remote-process-group-details.RemoteProcessGroupDetails'),
+                    scrollableContentStyle: 'scrollable',
+                    buttons: [{
+                      buttonText: nf._.msg('nf-remote-process-group-details.Ok'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#remote-process-group-details').modal('hide');
+                            }
+                        }
+                    }],
                     handler: {
-                        click: function () {
-                            $('#remote-process-group-details').modal('hide');
+                        close: function () {
+                            // clear the remote process group details
+                          nfCommon.clearField('read-only-remote-process-group-id');
+                          nfCommon.clearField('read-only-remote-process-group-name');
+                          nfCommon.clearField('read-only-remote-process-group-urls');
+                          nfCommon.clearField('read-only-remote-process-group-timeout');
+                          nfCommon.clearField('read-only-remote-process-group-yield-duration');
+                          nfCommon.clearField('read-only-remote-process-group-transport-protocol');
+                          nfCommon.clearField('read-only-remote-process-group-local-network-interface');
+                          nfCommon.clearField('read-only-remote-process-group-proxy-host');
+                          nfCommon.clearField('read-only-remote-process-group-proxy-port');
+                          nfCommon.clearField('read-only-remote-process-group-proxy-user');
+                          nfCommon.clearField('read-only-remote-process-group-proxy-password');
                         }
                     }
-                }],
-                handler: {
-                    close: function () {
-                        // clear the remote process group details
-                        nfCommon.clearField('read-only-remote-process-group-id');
-                        nfCommon.clearField('read-only-remote-process-group-name');
-                        nfCommon.clearField('read-only-remote-process-group-urls');
-                        nfCommon.clearField('read-only-remote-process-group-timeout');
-                        nfCommon.clearField('read-only-remote-process-group-yield-duration');
-                        nfCommon.clearField('read-only-remote-process-group-transport-protocol');
-                        nfCommon.clearField('read-only-remote-process-group-local-network-interface');
-                        nfCommon.clearField('read-only-remote-process-group-proxy-host');
-                        nfCommon.clearField('read-only-remote-process-group-proxy-port');
-                        nfCommon.clearField('read-only-remote-process-group-proxy-user');
-                        nfCommon.clearField('read-only-remote-process-group-proxy-password');
-                    }
+                });
+            },
+    
+            /**
+             * Shows the details for the remote process group in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            showDetails: function (selection) {
+                // if the specified component is a remote process group, load its properties
+              if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // populate the port settings
+                  nfCommon.populateField('read-only-remote-process-group-id', selectionData.id);
+                  nfCommon.populateField('read-only-remote-process-group-name', selectionData.component.name);
+                  nfCommon.populateField('read-only-remote-process-group-urls', selectionData.component.targetUris);
+                  nfCommon.populateField('read-only-remote-process-group-timeout', selectionData.component.communicationsTimeout);
+                  nfCommon.populateField('read-only-remote-process-group-yield-duration', selectionData.component.yieldDuration);
+                  nfCommon.populateField('read-only-remote-process-group-transport-protocol', selectionData.component.transportProtocol);
+                  nfCommon.populateField('read-only-remote-process-group-local-network-interface', selectionData.component.localNetworkInterface);
+                  nfCommon.populateField('read-only-remote-process-group-proxy-host', selectionData.component.proxyHost);
+                  nfCommon.populateField('read-only-remote-process-group-proxy-port', selectionData.component.proxyPort);
+                  nfCommon.populateField('read-only-remote-process-group-proxy-user', selectionData.component.proxyUser);
+                  nfCommon.populateField('read-only-remote-process-group-proxy-password', selectionData.component.proxyPassword);
+    
+                    // show the details
+                    $('#remote-process-group-details').modal('show');
                 }
-            });
-        },
-
-        /**
-         * Shows the details for the remote process group in the specified selection.
-         *
-         * @argument {selection} selection      The selection
-         */
-        showDetails: function (selection) {
-            // if the specified component is a remote process group, load its properties
-            if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                var selectionData = selection.datum();
-
-                // populate the port settings
-                nfCommon.populateField('read-only-remote-process-group-id', selectionData.id);
-                nfCommon.populateField('read-only-remote-process-group-name', selectionData.component.name);
-                nfCommon.populateField('read-only-remote-process-group-urls', selectionData.component.targetUris);
-                nfCommon.populateField('read-only-remote-process-group-timeout', selectionData.component.communicationsTimeout);
-                nfCommon.populateField('read-only-remote-process-group-yield-duration', selectionData.component.yieldDuration);
-                nfCommon.populateField('read-only-remote-process-group-transport-protocol', selectionData.component.transportProtocol);
-                nfCommon.populateField('read-only-remote-process-group-local-network-interface', selectionData.component.localNetworkInterface);
-                nfCommon.populateField('read-only-remote-process-group-proxy-host', selectionData.component.proxyHost);
-                nfCommon.populateField('read-only-remote-process-group-proxy-port', selectionData.component.proxyPort);
-                nfCommon.populateField('read-only-remote-process-group-proxy-user', selectionData.component.proxyUser);
-                nfCommon.populateField('read-only-remote-process-group-proxy-password', selectionData.component.proxyPassword);
-
-                // show the details
-                $('#remote-process-group-details').modal('show');
             }
-        }
-    };
-}));
\ No newline at end of file
+        };
+  }));
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 2a7f28224d78..2fb18bc3eab9 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
@@ -1,592 +1,592 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.ErrorHandler',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.Client',
-                'nf.CanvasUtils',
-                'nf.ng.Bridge',
-                'nf.RemoteProcessGroup'],
-            function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup) {
-                return (nf.RemoteProcessGroupPorts = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.RemoteProcessGroupPorts =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.ErrorHandler'),
-                require('nf.Common'),
-                require('nf.Dialog'),
-                require('nf.Client'),
-                require('nf.CanvasUtils'),
-                require('nf.ng.Bridge'),
-                require('nf.RemoteProcessGroup')));
-    } else {
-        nf.RemoteProcessGroupPorts = factory(root.$,
-            root.d3,
-            root.nf.ErrorHandler,
-            root.nf.Common,
-            root.nf.Dialog,
-            root.nf.Client,
-            root.nf.CanvasUtils,
-            root.nf.ng.Bridge,
-            root.nf.RemoteProcessGroup);
-    }
-}(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup) {
-    'use strict';
-
-    /**
-     * Initializes the remote port configuration dialog.
+    /*
+     * 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.
      */
-    var initRemotePortConfigurationDialog = function () {
-        $('#remote-port-configuration').modal({
-            headerText: 'Configure Remote Port',
-            scrollableContentStyle: 'scrollable',
-            buttons: [{
-                buttonText: 'Apply',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
-                handler: {
-                    click: function () {
-                        var remotePortConcurrentTasks = $('#remote-port-concurrent-tasks').val();
-
-                        // ensure the property name and value is specified
-                        if ($.isNumeric(remotePortConcurrentTasks)) {
-                            var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
-                            var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum();
-                            var remotePortId = $('#remote-port-id').text();
-
-                            // create the remote process group details
-                            var remoteProcessGroupPortEntity = {
-                                'revision': nfClient.getRevision(remoteProcessGroupData),
-                                'remoteProcessGroupPort': {
-                                    id: remotePortId,
-                                    groupId: remoteProcessGroupId,
-                                    useCompression: $('#remote-port-use-compression').hasClass('checkbox-checked'),
-                                    concurrentlySchedulableTaskCount: remotePortConcurrentTasks
-                                }
-                            };
-
-                            // determine the type of port this is
-                            var portContextPath = '/output-ports/';
-                            if ($('#remote-port-type').text() === 'input') {
-                                portContextPath = '/input-ports/';
-                            }
-
-                            // update the selected component
-                            $.ajax({
-                                type: 'PUT',
-                                data: JSON.stringify(remoteProcessGroupPortEntity),
-                                url: remoteProcessGroupData.uri + portContextPath + encodeURIComponent(remotePortId),
-                                dataType: 'json',
-                                contentType: 'application/json'
-                            }).done(function (response) {
-                                // Update the RemoteProcessGroup revision.
-                                // RemotePorts share revision with parent RemoteProcessGroup.
-                                remoteProcessGroupData.revision = response.revision;
-
-                                // get the response
-                                var remotePort = response.remoteProcessGroupPort;
-
-                                // determine the compression label
-                                var compressionLabel = 'No';
-                                if (remotePort.useCompression === true) {
-                                    compressionLabel = 'Yes';
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.ng.Bridge',
+                  'nf.RemoteProcessGroup'],
+              function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup) {
+                  return (nf.RemoteProcessGroupPorts = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.RemoteProcessGroupPorts =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ng.Bridge'),
+                  require('nf.RemoteProcessGroup')));
+      } else {
+          nf.RemoteProcessGroupPorts = factory(root.$,
+              root.d3,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.ng.Bridge,
+              root.nf.RemoteProcessGroup);
+      }
+  }(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup) {
+      'use strict';
+    
+        /**
+         * Initializes the remote port configuration dialog.
+         */
+        var initRemotePortConfigurationDialog = function () {
+            $('#remote-port-configuration').modal({
+              headerText: nf._.msg('nf-remote-process-group-ports.ConfigureRemotePort'),
+                scrollableContentStyle: 'scrollable',
+                buttons: [{
+                  buttonText: nf._.msg('nf-remote-process-group-ports.Apply'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            var remotePortConcurrentTasks = $('#remote-port-concurrent-tasks').val();
+    
+                            // ensure the property name and value is specified
+                            if ($.isNumeric(remotePortConcurrentTasks)) {
+                                var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
+                                var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum();
+                                var remotePortId = $('#remote-port-id').text();
+    
+                                // create the remote process group details
+                                var remoteProcessGroupPortEntity = {
+                                  'revision': nfClient.getRevision(remoteProcessGroupData),
+                                    'remoteProcessGroupPort': {
+                                        id: remotePortId,
+                                        groupId: remoteProcessGroupId,
+                                        useCompression: $('#remote-port-use-compression').hasClass('checkbox-checked'),
+                                        concurrentlySchedulableTaskCount: remotePortConcurrentTasks
+                                    }
+                                };
+    
+                                // determine the type of port this is
+                                var portContextPath = '/output-ports/';
+                                if ($('#remote-port-type').text() === 'input') {
+                                    portContextPath = '/input-ports/';
                                 }
-
-                                // set the new values
-                                $('#' + remotePortId + '-concurrent-tasks').text(remotePort.concurrentlySchedulableTaskCount);
-                                $('#' + remotePortId + '-compression').text(compressionLabel);
-                            }).fail(function (xhr, status, error) {
-                                if (xhr.status === 400) {
-                                    var errors = xhr.responseText.split('\n');
-
-                                    var content;
-                                    if (errors.length === 1) {
-                                        content = $('<span></span>').text(errors[0]);
+    
+                                // update the selected component
+                                $.ajax({
+                                    type: 'PUT',
+                                    data: JSON.stringify(remoteProcessGroupPortEntity),
+                                    url: remoteProcessGroupData.uri + portContextPath + encodeURIComponent(remotePortId),
+                                    dataType: 'json',
+                                    contentType: 'application/json'
+                                }).done(function (response) {
+                                  // Update the RemoteProcessGroup revision.
+                                  // RemotePorts share revision with parent RemoteProcessGroup.
+                                  remoteProcessGroupData.revision = response.revision;
+    
+                                    // get the response
+                                    var remotePort = response.remoteProcessGroupPort;
+    
+                                    // determine the compression label
+                                    var compressionLabel = 'No';
+                                    if (remotePort.useCompression === true) {
+                                        compressionLabel = 'Yes';
+                                    }
+    
+                                    // set the new values
+                                    $('#' + remotePortId + '-concurrent-tasks').text(remotePort.concurrentlySchedulableTaskCount);
+                                    $('#' + remotePortId + '-compression').text(compressionLabel);
+                                }).fail(function (xhr, status, error) {
+                                    if (xhr.status === 400) {
+                                        var errors = xhr.responseText.split('\n');
+    
+                                        var content;
+                                        if (errors.length === 1) {
+                                            content = $('<span></span>').text(errors[0]);
+                                        } else {
+                                          content = nfCommon.formatUnorderedList(errors);
+                                        }
+    
+                                      nfDialog.showOkDialog({
+                                            dialogContent: content,
+                                          headerText: nf._.msg('nf-remote-process-group-ports.RemoteProcessGroupPorts')
+                                        });
                                     } else {
-                                        content = nfCommon.formatUnorderedList(errors);
+                                      nfErrorHandler.handleAjaxError(xhr, status, error);
                                     }
-
-                                    nfDialog.showOkDialog({
-                                        dialogContent: content,
-                                        headerText: 'Remote Process Group Ports'
-                                    });
-                                } else {
-                                    nfErrorHandler.handleAjaxError(xhr, status, error);
-                                }
-                            }).always(function () {
+                                }).always(function () {
+                                    // close the dialog
+                                    $('#remote-port-configuration').modal('hide');
+                                });
+                            } else {
+                              nfDialog.showOkDialog({
+                                  headerText: nf._.msg('nf-remote-process-group-ports.RemoteProcessGroupPorts'),
+                                  dialogContent: nf._.msg('nf-remote-process-group-ports.Message1')
+                                });
+    
                                 // close the dialog
                                 $('#remote-port-configuration').modal('hide');
-                            });
-                        } else {
-                            nfDialog.showOkDialog({
-                                headerText: 'Remote Process Group Ports',
-                                dialogContent: 'Concurrent tasks must be an integer value.'
-                            });
-
-                            // close the dialog
-                            $('#remote-port-configuration').modal('hide');
+                            }
                         }
                     }
+                },
+                    {
+                      buttonText: nf._.msg('nf-remote-process-group-ports.Cancel'),
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#remote-port-configuration').modal('hide');
+                            }
+                        }
+                    }],
+                handler: {
+                    close: function () {
+                        // clear the name/value textfields
+                        $('#remote-port-id').text('');
+                        $('#remote-port-name').text('');
+                        $('#remote-port-concurrent-tasks').val('');
+                        $('#remote-port-use-compression').removeClass('checkbox-checked checkbox-unchecked');
+                    }
                 }
-            },
-                {
-                    buttonText: 'Cancel',
+            });
+        };
+    
+        /**
+         * Initializes the remote process group configuration dialog.
+         */
+        var initRemoteProcessGroupConfigurationDialog = function () {
+            $('#remote-process-group-ports').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-remote-process-group-ports.RemoteProcessGroupPorts'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-remote-process-group-ports.Close'),
                     color: {
-                        base: '#E3E8EB',
-                        hover: '#C7D2D7',
-                        text: '#004849'
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
                     },
                     handler: {
                         click: function () {
-                            $('#remote-port-configuration').modal('hide');
+                            // get the component in question
+                            var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
+                            var remoteProcessGroup = d3.select('#id-' + remoteProcessGroupId);
+                            var remoteProcessGroupData = remoteProcessGroup.datum();
+    
+                            // if can modify, the over status of this node may have changed
+                          if (nfCanvasUtils.canModify(remoteProcessGroup)) {
+                                // reload the remote process group
+                              nfRemoteProcessGroup.reload(remoteProcessGroupData.id);
+                            }
+    
+                            // hide the dialog
+                            $('#remote-process-group-ports').modal('hide');
                         }
                     }
                 }],
-            handler: {
-                close: function () {
-                    // clear the name/value textfields
-                    $('#remote-port-id').text('');
-                    $('#remote-port-name').text('');
-                    $('#remote-port-concurrent-tasks').val('');
-                    $('#remote-port-use-compression').removeClass('checkbox-checked checkbox-unchecked');
-                }
-            }
-        });
-    };
-
-    /**
-     * Initializes the remote process group configuration dialog.
-     */
-    var initRemoteProcessGroupConfigurationDialog = function () {
-        $('#remote-process-group-ports').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Remote Process Group Ports',
-            buttons: [{
-                buttonText: 'Close',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
                 handler: {
-                    click: function () {
-                        // get the component in question
-                        var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
-                        var remoteProcessGroup = d3.select('#id-' + remoteProcessGroupId);
-                        var remoteProcessGroupData = remoteProcessGroup.datum();
-
-                        // if can modify, the over status of this node may have changed
-                        if (nfCanvasUtils.canModify(remoteProcessGroup)) {
-                            // reload the remote process group
-                            nfRemoteProcessGroup.reload(remoteProcessGroupData.id);
-                        }
-
-                        // hide the dialog
-                        $('#remote-process-group-ports').modal('hide');
+                    close: function () {
+                        // clear the remote process group details
+                        $('#remote-process-group-ports-id').text('');
+                        $('#remote-process-group-ports-name').text('');
+                      $('#remote-process-group-ports-urls').text('');
+    
+                        // clear any tooltips
+                        var dialog = $('#remote-process-group-ports');
+                      nfCommon.cleanUpTooltips(dialog, 'div.remote-port-removed');
+                      nfCommon.cleanUpTooltips(dialog, 'div.concurrent-tasks-info');
+    
+                        // clear the input and output ports
+                        $('#remote-process-group-input-ports-container').empty();
+                        $('#remote-process-group-output-ports-container').empty();
                     }
                 }
-            }],
-            handler: {
-                close: function () {
-                    // clear the remote process group details
-                    $('#remote-process-group-ports-id').text('');
-                    $('#remote-process-group-ports-name').text('');
-                    $('#remote-process-group-ports-urls').text('');
-
-                    // clear any tooltips
-                    var dialog = $('#remote-process-group-ports');
-                    nfCommon.cleanUpTooltips(dialog, 'div.remote-port-removed');
-                    nfCommon.cleanUpTooltips(dialog, 'div.concurrent-tasks-info');
-
-                    // clear the input and output ports
-                    $('#remote-process-group-input-ports-container').empty();
-                    $('#remote-process-group-output-ports-container').empty();
-                }
-            }
-        });
-    };
-
-    /**
-     * Creates the markup for configuration concurrent tasks for a port.
-     *
-     * @argument {jQuery} container         The container
-     * @argument {object} port              The port
-     * @argument {string} portType          The type of port
-     */
-    var createPortOption = function (container, port, portType) {
-        var portId = nfCommon.escapeHtml(port.id);
-        var portContainer = $('<div class="remote-port-container"></div>').appendTo(container);
-        var portContainerEditContainer = $('<div class="remote-port-edit-container"></div>').appendTo(portContainer);
-        var portContainerDetailsContainer = $('<div class="remote-port-details-container"></div>').appendTo(portContainer);
-
-        // get the component in question
-        var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
-        var remoteProcessGroup = d3.select('#id-' + remoteProcessGroupId);
-
-        // if can modify, support updating the remote group port
-        if (nfCanvasUtils.canModify(remoteProcessGroup)) {
-            // show the enabled transmission switch
-            var transmissionSwitch;
-            if (port.connected === true) {
-                if (port.transmitting === true) {
-                    transmissionSwitch = (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary enabled-active-transmission" aria-label="Toggle port transmission"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
-                    transmissionSwitch.click();
-                } else {
-                    if (port.exists === true) {
-                        transmissionSwitch = (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary enabled-inactive-transmission" aria-label="Toggle port transmission"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+            });
+        };
+    
+        /**
+         * Creates the markup for configuration concurrent tasks for a port.
+         *
+         * @argument {jQuery} container         The container
+         * @argument {object} port              The port
+         * @argument {string} portType          The type of port
+         */
+        var createPortOption = function (container, port, portType) {
+          var portId = nfCommon.escapeHtml(port.id);
+            var portContainer = $('<div class="remote-port-container"></div>').appendTo(container);
+            var portContainerEditContainer = $('<div class="remote-port-edit-container"></div>').appendTo(portContainer);
+            var portContainerDetailsContainer = $('<div class="remote-port-details-container"></div>').appendTo(portContainer);
+    
+            // get the component in question
+            var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
+            var remoteProcessGroup = d3.select('#id-' + remoteProcessGroupId);
+    
+            // if can modify, support updating the remote group port
+          if (nfCanvasUtils.canModify(remoteProcessGroup)) {
+                // show the enabled transmission switch
+                var transmissionSwitch;
+                if (port.connected === true) {
+                    if (port.transmitting === true) {
+                      transmissionSwitch = (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary enabled-active-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                        transmissionSwitch.click();
                     } else {
-                        (nfNgBridge.injector.get('$compile')($('<md-switch ng-disabled="true" style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="Toggle port transmission"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                        if (port.exists === true) {
+                          transmissionSwitch = (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary enabled-inactive-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                        } else {
+                          (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                        }
                     }
-                }
-            } else {
-                if (port.transmitting === true) {
-                    (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-active-transmission" aria-label="Toggle port transmission"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
-                } else {
-                    (nfNgBridge.injector.get('$compile')($('<md-switch ng-disabled="true" style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="Toggle port transmission"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
-                }
-            }
-
-            // only support configuration when the remote port exists
-            if (port.exists === true && port.connected === true) {
-                // create the button for editing the ports configuration
-                var editRemotePort = $('<button class="button edit-remote-port fa fa-pencil"></button>').click(function () {
-                    var portName = $('#' + portId + '-name').text();
-                    var portConcurrentTasks = $('#' + portId + '-concurrent-tasks').text();
-                    var portCompression = $('#' + portId + '-compression').text() === 'Yes';
-
-                    // show the configuration dialog
-                    configureRemotePort(port.id, portName, portConcurrentTasks, portCompression, portType);
-                }).appendTo(portContainerEditContainer);
-
-                // show/hide the edit button as appropriate
-                if (port.transmitting === true) {
-                    editRemotePort.hide();
                 } else {
-                    editRemotePort.show();
+                    if (port.transmitting === true) {
+                      (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-active-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                    } else {
+                      (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                    }
                 }
-            } else if (port.exists === false) {
-                $('<div class="remote-port-removed"/>').appendTo(portContainerEditContainer).qtip($.extend({},
-                    nfCommon.config.tooltipConfig,
-                    {
-                        content: 'This port has been removed.'
-                    }));
-            }
-
-            // only allow modifications to transmission when the swtich is defined
-            if (nfCommon.isDefinedAndNotNull(transmissionSwitch)) {
-                // create toggle for changing transmission state
-                transmissionSwitch.click(function () {
-                    // get the component being edited
-                    var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
-                    var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum();
-
-                    // determine the new transmission status
-                    var isTransmitting = false;
-                    if (transmissionSwitch.hasClass('enabled-inactive-transmission')) {
-                        isTransmitting = true;
+    
+                // only support configuration when the remote port exists
+                if (port.exists === true && port.connected === true) {
+                    // create the button for editing the ports configuration
+                    var editRemotePort = $('<button class="button edit-remote-port fa fa-pencil"></button>').click(function () {
+                        var portName = $('#' + portId + '-name').text();
+                        var portConcurrentTasks = $('#' + portId + '-concurrent-tasks').text();
+                        var portCompression = $('#' + portId + '-compression').text() === 'Yes';
+    
+                        // show the configuration dialog
+                        configureRemotePort(port.id, portName, portConcurrentTasks, portCompression, portType);
+                    }).appendTo(portContainerEditContainer);
+    
+                    // show/hide the edit button as appropriate
+                    if (port.transmitting === true) {
+                        editRemotePort.hide();
+                    } else {
+                        editRemotePort.show();
                     }
-
-                    // create the remote process group details
-                    var remoteProcessGroupPortEntity = {
-                        'revision': nfClient.getRevision(remoteProcessGroupData),
-                        'remoteProcessGroupPort': {
-                            id: port.id,
-                            groupId: remoteProcessGroupId,
-                            transmitting: isTransmitting
+                } else if (port.exists === false) {
+                    $('<div class="remote-port-removed"/>').appendTo(portContainerEditContainer).qtip($.extend({},
+                      nfCommon.config.tooltipConfig,
+                        {
+                          content: nf._.msg('nf-remote-process-group-ports.Message3')
+                        }));
+                }
+    
+                // only allow modifications to transmission when the swtich is defined
+              if (nfCommon.isDefinedAndNotNull(transmissionSwitch)) {
+                    // create toggle for changing transmission state
+                    transmissionSwitch.click(function () {
+                        // get the component being edited
+                        var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
+                        var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum();
+    
+                        // determine the new transmission status
+                        var isTransmitting = false;
+                        if (transmissionSwitch.hasClass('enabled-inactive-transmission')) {
+                            isTransmitting = true;
                         }
-                    };
-
-                    // determine the type of port this is
-                    var portContextPath = '/output-ports/';
-                    if (portType === 'input') {
-                        portContextPath = '/input-ports/';
-                    }
-
-                    // update the selected component
-                    $.ajax({
-                        type: 'PUT',
-                        data: JSON.stringify(remoteProcessGroupPortEntity),
-                        url: remoteProcessGroupData.uri + portContextPath + encodeURIComponent(port.id),
-                        dataType: 'json',
-                        contentType: 'application/json'
-                    }).done(function (response) {
-                        // Update the RemoteProcessGroup revision.
-                        // RemotePorts share revision with parent RemoteProcessGroup.
-                        remoteProcessGroupData.revision = response.revision;
-
-                        // get the response
-                        var remotePort = response.remoteProcessGroupPort;
-
-                        // if the remote port no long exists, disable the switch
-                        if (remotePort.exists === false) {
-                            // make the transmission switch disabled
-                            transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('disabled-inactive-transmission').off('click');
-
-                            // hide the edit button
-                            if (nfCommon.isDefinedAndNotNull(editRemotePort)) {
-                                editRemotePort.hide();
+    
+                        // create the remote process group details
+                        var remoteProcessGroupPortEntity = {
+                          'revision': nfClient.getRevision(remoteProcessGroupData),
+                            'remoteProcessGroupPort': {
+                                id: port.id,
+                                groupId: remoteProcessGroupId,
+                                transmitting: isTransmitting
                             }
-                        } else {
-                            // update the transmission status accordingly
-                            if (remotePort.transmitting === true) {
-                                // mark the status as transmitting
-                                transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('enabled-active-transmission');
-
+                        };
+    
+                        // determine the type of port this is
+                        var portContextPath = '/output-ports/';
+                        if (portType === 'input') {
+                            portContextPath = '/input-ports/';
+                        }
+    
+                        // update the selected component
+                        $.ajax({
+                            type: 'PUT',
+                            data: JSON.stringify(remoteProcessGroupPortEntity),
+                            url: remoteProcessGroupData.uri + portContextPath + encodeURIComponent(port.id),
+                            dataType: 'json',
+                            contentType: 'application/json'
+                        }).done(function (response) {
+                          // Update the RemoteProcessGroup revision.
+                          // RemotePorts share revision with parent RemoteProcessGroup.
+                          remoteProcessGroupData.revision = response.revision;
+    
+                            // get the response
+                            var remotePort = response.remoteProcessGroupPort;
+    
+                            // if the remote port no long exists, disable the switch
+                            if (remotePort.exists === false) {
+                                // make the transmission switch disabled
+                                transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('disabled-inactive-transmission').off('click');
+    
                                 // hide the edit button
-                                if (nfCommon.isDefinedAndNotNull(editRemotePort)) {
+                              if (nfCommon.isDefinedAndNotNull(editRemotePort)) {
                                     editRemotePort.hide();
                                 }
                             } else {
-                                // mark the status as not transmitting
-                                transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('enabled-inactive-transmission');
-
-                                // show the edit button
-                                if (nfCommon.isDefinedAndNotNull(editRemotePort)) {
-                                    editRemotePort.show();
+                                // update the transmission status accordingly
+                                if (remotePort.transmitting === true) {
+                                    // mark the status as transmitting
+                                    transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('enabled-active-transmission');
+    
+                                    // hide the edit button
+                                  if (nfCommon.isDefinedAndNotNull(editRemotePort)) {
+                                        editRemotePort.hide();
+                                    }
+                                } else {
+                                    // mark the status as not transmitting
+                                    transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('enabled-inactive-transmission');
+    
+                                    // show the edit button
+                                  if (nfCommon.isDefinedAndNotNull(editRemotePort)) {
+                                        editRemotePort.show();
+                                    }
                                 }
                             }
-                        }
-                    }).fail(function (xhr, status, error) {
-                        if (xhr.status === 400) {
-                            var errors = xhr.responseText.split('\n');
-
-                            var content;
-                            if (errors.length === 1) {
-                                content = $('<span></span>').text(errors[0]);
+                        }).fail(function (xhr, status, error) {
+                            if (xhr.status === 400) {
+                                var errors = xhr.responseText.split('\n');
+    
+                                var content;
+                                if (errors.length === 1) {
+                                    content = $('<span></span>').text(errors[0]);
+                                } else {
+                                  content = nfCommon.formatUnorderedList(errors);
+                                }
+    
+                              nfDialog.showOkDialog({
+                                  headerText: nf._.msg('nf-remote-process-group-ports.RemoteProcessGroupPorts'),
+                                    dialogContent: content
+                                });
                             } else {
-                                content = nfCommon.formatUnorderedList(errors);
+                              nfErrorHandler.handleAjaxError(xhr, status, error);
                             }
-
-                            nfDialog.showOkDialog({
-                                headerText: 'Remote Process Group Ports',
-                                dialogContent: content
-                            });
-                        } else {
-                            nfErrorHandler.handleAjaxError(xhr, status, error);
-                        }
+                        });
                     });
-                });
+                }
+            } else {
+                // show the disabled transmission switch
+                if (port.transmitting === true) {
+                  (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-active-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                } else {
+                  (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                }
             }
-        } else {
-            // show the disabled transmission switch
-            if (port.transmitting === true) {
-                (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-active-transmission" aria-label="Toggle port transmission"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+    
+            // add the port id and name
+            $('<div id="' + portId + '-id" class="remote-port-id hidden"></div>').text(port.id).appendTo(portContainerDetailsContainer);
+            $('<div id="' + portId + '-name" class="remote-port-name ellipsis"></div>').text(port.name).appendTo(portContainerDetailsContainer);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(portContainerDetailsContainer);
+    
+            // add the comments for this port
+          if (nfCommon.isBlank(port.comments)) {
+              $('<div class="remote-port-description unset">'+nf._.msg('nf-remote-process-group-ports.description')+'</div>').appendTo(portContainerDetailsContainer);
             } else {
-                (nfNgBridge.injector.get('$compile')($('<md-switch ng-disabled="true" style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="Toggle port transmission"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                $('<div class="remote-port-description"></div>').text(port.comments).appendTo(portContainerDetailsContainer);
             }
-        }
-
-        // add the port id and name
-        $('<div id="' + portId + '-id" class="remote-port-id hidden"></div>').text(port.id).appendTo(portContainerDetailsContainer);
-        $('<div id="' + portId + '-name" class="remote-port-name ellipsis"></div>').text(port.name).appendTo(portContainerDetailsContainer);
-
-        // clear
-        $('<div class="clear"></div>').appendTo(portContainerDetailsContainer);
-
-        // add the comments for this port
-        if (nfCommon.isBlank(port.comments)) {
-            $('<div class="remote-port-description unset">No description specified.</div>').appendTo(portContainerDetailsContainer);
-        } else {
-            $('<div class="remote-port-description"></div>').text(port.comments).appendTo(portContainerDetailsContainer);
-        }
-
-        // clear
-        $('<div class="clear"></div>').appendTo(portContainerDetailsContainer);
-
-        var concurrentTasksContainer = $('<div class="concurrent-task-container"></div>').appendTo(portContainerDetailsContainer);
-
-        // concurrent tasks
-        var concurrentTasks = $('<div class="setting-field"></div>').append($('<div id="' + portId + '-concurrent-tasks"></div>').text(port.concurrentlySchedulableTaskCount));
-
-        // add this ports concurrent tasks
-        $('<div>' +
-            '<div class="setting-name">' +
-            'Concurrent tasks' +
-            '<div class="processor-setting concurrent-tasks-info fa fa-question-circle"></div>' +
-            '</div>' +
-            '</div>').append(concurrentTasks).appendTo(concurrentTasksContainer).find('div.concurrent-tasks-info').qtip($.extend({},
-            nfCommon.config.tooltipConfig,
-            {
-                content: 'The number of tasks that should be concurrently scheduled for this port.'
-            }));
-
-        var compressionContainer = $('<div class="compression-container"></div>').appendTo(portContainerDetailsContainer);
-
-        // determine the compression label
-        var compressionLabel = 'No';
-        if (port.useCompression === true) {
-            compressionLabel = 'Yes';
-        }
-
-        // add this ports compression config
-        $('<div>' +
-            '<div class="setting-name">' +
-            'Compressed' +
-            '</div>' +
-            '<div class="setting-field">' +
-            '<div id="' + portId + '-compression">' + compressionLabel + '</div>' +
-            '</div>' +
-            '</div>').appendTo(compressionContainer);
-
-        // clear
-        $('<div class="clear"></div>').appendTo(portContainer);
-
-        // apply ellipsis where appropriate
-        portContainer.find('.ellipsis').ellipsis();
-
-        // inform Angular app values have changed
-        nfNgBridge.digest();
-    };
-
-    /**
-     * Configures the specified remote port.
-     *
-     * @argument {string} portId            The port id
-     * @argument {string} portName          The port name
-     * @argument {int} portConcurrentTasks  The number of concurrent tasks for the port
-     * @argument {boolean} portCompression  The compression flag for the port
-     * @argument {string} portType          The type of port this is
-     */
-    var configureRemotePort = function (portId, portName, portConcurrentTasks, portCompression, portType) {
-        // set port identifiers
-        $('#remote-port-id').text(portId);
-        $('#remote-port-type').text(portType);
-
-        // set port configuration
-        var checkState = 'checkbox-unchecked';
-        if (portCompression === true) {
-            checkState = 'checkbox-checked';
-        }
-        $('#remote-port-use-compression').addClass(checkState);
-        $('#remote-port-concurrent-tasks').val(portConcurrentTasks);
-
-        // set the port name
-        $('#remote-port-name').text(portName).ellipsis();
-
-        // show the dialog
-        $('#remote-port-configuration').modal('show');
-    };
-
-    return {
-        init: function () {
-            initRemotePortConfigurationDialog();
-            initRemoteProcessGroupConfigurationDialog();
-        },
-
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(portContainerDetailsContainer);
+    
+            var concurrentTasksContainer = $('<div class="concurrent-task-container"></div>').appendTo(portContainerDetailsContainer);
+    
+            // concurrent tasks
+          var concurrentTasks = $('<div class="setting-field"></div>').append($('<div id="' + portId + '-concurrent-tasks"></div>').text(port.concurrentlySchedulableTaskCount));
+    
+            // add this ports concurrent tasks
+            $('<div>' +
+                '<div class="setting-name">' +
+                'Concurrent tasks' +
+                '<div class="processor-setting concurrent-tasks-info fa fa-question-circle"></div>' +
+                '</div>' +
+                '</div>').append(concurrentTasks).appendTo(concurrentTasksContainer).find('div.concurrent-tasks-info').qtip($.extend({},
+              nfCommon.config.tooltipConfig,
+                {
+                  content: nf._.msg('nf-remote-process-group-ports.Message4')
+                }));
+    
+            var compressionContainer = $('<div class="compression-container"></div>').appendTo(portContainerDetailsContainer);
+    
+            // determine the compression label
+            var compressionLabel = 'No';
+            if (port.useCompression === true) {
+                compressionLabel = 'Yes';
+            }
+    
+            // add this ports compression config
+            $('<div>' +
+                '<div class="setting-name">' +
+                'Compressed' +
+                '</div>' +
+              '<div class="setting-field">' +
+                '<div id="' + portId + '-compression">' + compressionLabel + '</div>' +
+                '</div>' +
+                '</div>').appendTo(compressionContainer);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(portContainer);
+    
+            // apply ellipsis where appropriate
+            portContainer.find('.ellipsis').ellipsis();
+    
+          // inform Angular app values have changed
+          nfNgBridge.digest();
+        };
+    
         /**
-         * Shows the details for the remote process group in the specified selection.
+         * Configures the specified remote port.
          *
-         * @argument {selection} selection      The selection
+         * @argument {string} portId            The port id
+         * @argument {string} portName          The port name
+         * @argument {int} portConcurrentTasks  The number of concurrent tasks for the port
+         * @argument {boolean} portCompression  The compression flag for the port
+         * @argument {string} portType          The type of port this is
          */
-        showPorts: function (selection) {
-            // if the specified component is a remote process group, load its properties
-            if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                var selectionData = selection.datum();
-
-                // load the properties for the specified component
-                $.ajax({
-                    type: 'GET',
-                    url: selectionData.uri,
-                    dataType: 'json'
-                }).done(function (response) {
-                    var remoteProcessGroup = response.component;
-
-                    // set the model locally
-                    nfRemoteProcessGroup.set(response);
-
-                    // populate the port settings
-                    $('#remote-process-group-ports-id').text(remoteProcessGroup.id);
-                    $('#remote-process-group-ports-name').text(remoteProcessGroup.name);
-                    $('#remote-process-group-ports-urls').text(remoteProcessGroup.targetUris);
-
-                    // get the contents
-                    var remoteProcessGroupContents = remoteProcessGroup.contents;
-                    if (nfCommon.isDefinedAndNotNull(remoteProcessGroupContents)) {
-                        var connectedInputPorts = [];
-                        var disconnectedInputPorts = [];
-
-                        // show connected ports first
-                        var inputPortContainer = $('#remote-process-group-input-ports-container');
-                        $.each(remoteProcessGroupContents.inputPorts, function (_, inputPort) {
-                            if (inputPort.connected === true) {
-                                connectedInputPorts.push(inputPort);
-                            } else {
-                                disconnectedInputPorts.push(inputPort);
-                            }
-                        });
-
-                        // add all connected input ports
-                        $.each(connectedInputPorts, function (_, inputPort) {
-                            createPortOption(inputPortContainer, inputPort, 'input');
-                        });
-
-                        // add all disconnected input ports
-                        $.each(disconnectedInputPorts, function (_, inputPort) {
-                            createPortOption(inputPortContainer, inputPort, 'input');
-                        });
-
-                        if (nfCommon.isEmpty(connectedInputPorts) && nfCommon.isEmpty(disconnectedInputPorts)) {
-                            $('<div class="unset"></div>').text("No ports to display").appendTo(inputPortContainer);
-                        }
-
-                        var connectedOutputPorts = [];
-                        var disconnectedOutputPorts = [];
-
-                        // process all the output ports
-                        var outputPortContainer = $('#remote-process-group-output-ports-container');
-                        $.each(remoteProcessGroupContents.outputPorts, function (i, outputPort) {
-                            if (outputPort.connected === true) {
-                                connectedOutputPorts.push(outputPort);
-                            } else {
-                                disconnectedOutputPorts.push(outputPort);
-                            }
-                        });
-
-                        // add all connected output ports
-                        $.each(connectedOutputPorts, function (_, outputPort) {
-                            createPortOption(outputPortContainer, outputPort, 'output');
-                        });
-
-                        // add all disconnected output ports
-                        $.each(disconnectedOutputPorts, function (_, outputPort) {
-                            createPortOption(outputPortContainer, outputPort, 'output');
-                        });
-
-                        if (nfCommon.isEmpty(connectedOutputPorts) && nfCommon.isEmpty(disconnectedOutputPorts)) {
-                            $('<div class="unset"></div>').text("No ports to display").appendTo(outputPortContainer);
+        var configureRemotePort = function (portId, portName, portConcurrentTasks, portCompression, portType) {
+            // set port identifiers
+            $('#remote-port-id').text(portId);
+            $('#remote-port-type').text(portType);
+    
+            // set port configuration
+            var checkState = 'checkbox-unchecked';
+            if (portCompression === true) {
+                checkState = 'checkbox-checked';
+            }
+            $('#remote-port-use-compression').addClass(checkState);
+            $('#remote-port-concurrent-tasks').val(portConcurrentTasks);
+    
+            // set the port name
+            $('#remote-port-name').text(portName).ellipsis();
+    
+            // show the dialog
+            $('#remote-port-configuration').modal('show');
+        };
+    
+        return {
+            init: function () {
+                initRemotePortConfigurationDialog();
+                initRemoteProcessGroupConfigurationDialog();
+            },
+    
+            /**
+             * Shows the details for the remote process group in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            showPorts: function (selection) {
+                // if the specified component is a remote process group, load its properties
+              if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // load the properties for the specified component
+                    $.ajax({
+                        type: 'GET',
+                        url: selectionData.uri,
+                        dataType: 'json'
+                    }).done(function (response) {
+                        var remoteProcessGroup = response.component;
+    
+                        // set the model locally
+                      nfRemoteProcessGroup.set(response);
+    
+                        // populate the port settings
+                        $('#remote-process-group-ports-id').text(remoteProcessGroup.id);
+                        $('#remote-process-group-ports-name').text(remoteProcessGroup.name);
+                      $('#remote-process-group-ports-urls').text(remoteProcessGroup.targetUris);
+    
+                        // get the contents
+                        var remoteProcessGroupContents = remoteProcessGroup.contents;
+                      if (nfCommon.isDefinedAndNotNull(remoteProcessGroupContents)) {
+                            var connectedInputPorts = [];
+                            var disconnectedInputPorts = [];
+    
+                            // show connected ports first
+                            var inputPortContainer = $('#remote-process-group-input-ports-container');
+                            $.each(remoteProcessGroupContents.inputPorts, function (_, inputPort) {
+                                if (inputPort.connected === true) {
+                                    connectedInputPorts.push(inputPort);
+                                } else {
+                                    disconnectedInputPorts.push(inputPort);
+                                }
+                            });
+    
+                            // add all connected input ports
+                            $.each(connectedInputPorts, function (_, inputPort) {
+                                createPortOption(inputPortContainer, inputPort, 'input');
+                            });
+    
+                            // add all disconnected input ports
+                            $.each(disconnectedInputPorts, function (_, inputPort) {
+                                createPortOption(inputPortContainer, inputPort, 'input');
+                            });
+    
+                          if (nfCommon.isEmpty(connectedInputPorts) && nfCommon.isEmpty(disconnectedInputPorts)) {
+                              $('<div class="unset"></div>').text("No ports to display").appendTo(inputPortContainer);
+                          }
+  
+                            var connectedOutputPorts = [];
+                            var disconnectedOutputPorts = [];
+    
+                            // process all the output ports
+                            var outputPortContainer = $('#remote-process-group-output-ports-container');
+                            $.each(remoteProcessGroupContents.outputPorts, function (i, outputPort) {
+                                if (outputPort.connected === true) {
+                                    connectedOutputPorts.push(outputPort);
+                                } else {
+                                    disconnectedOutputPorts.push(outputPort);
+                                }
+                            });
+    
+                          // add all connected output ports
+                            $.each(connectedOutputPorts, function (_, outputPort) {
+                                createPortOption(outputPortContainer, outputPort, 'output');
+                            });
+    
+                          // add all disconnected output ports
+                            $.each(disconnectedOutputPorts, function (_, outputPort) {
+                                createPortOption(outputPortContainer, outputPort, 'output');
+                            });
+    
+                          if (nfCommon.isEmpty(connectedOutputPorts) && nfCommon.isEmpty(disconnectedOutputPorts)) {
+                              $('<div class="unset"></div>').text("No ports to display").appendTo(outputPortContainer);
+                          }
                         }
-                    }
-
-                    // show the details
-                    $('#remote-process-group-ports').modal('show');
-                }).fail(nfErrorHandler.handleAjaxError);
+    
+                        // show the details
+                        $('#remote-process-group-ports').modal('show');
+                  }).fail(nfErrorHandler.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-remote-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
index b91afd1e952d..832cdfd0515f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
@@ -1,1098 +1,1098 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Connection',
-                'nf.Common',
-                'nf.Client',
-                'nf.CanvasUtils'],
-            function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
-                return (nf.RemoteProcessGroup = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.RemoteProcessGroup =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.Connection'),
-                require('nf.Common'),
-                require('nf.Client'),
-                require('nf.CanvasUtils')));
-    } else {
-        nf.RemoteProcessGroup = factory(root.$,
-            root.d3,
-            root.nf.Connection,
-            root.nf.Common,
-            root.nf.Client,
-            root.nf.CanvasUtils);
-    }
-}(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
-    'use strict';
-
-    var nfConnectable;
-    var nfDraggable;
-    var nfSelectable;
-    var nfContextMenu;
-
-    var PREVIEW_NAME_LENGTH = 30;
-
-    var dimensions = {
-        width: 380,
-        height: 158
-    };
-
-    // --------------------------------------------
-    // remote process groups currently on the graph
-    // --------------------------------------------
-
-    var remoteProcessGroupMap;
-
-    // -----------------------------------------------------------
-    // cache for components that are added/removed from the canvas
-    // -----------------------------------------------------------
-
-    var removedCache;
-    var addedCache;
-
-    // --------------------
-    // component containers
-    // --------------------
-
-    var remoteProcessGroupContainer;
-
-    // --------------------------
-    // privately scoped functions
-    // --------------------------
-
-    /**
-     * Gets the process group comments.
+    /*
+     * 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
      *
-     * @param {object} d
-     */
-    var getProcessGroupComments = function (d) {
-        if (nfCommon.isBlank(d.component.comments)) {
-            return 'No comments specified';
-        } else {
-            return d.component.comments;
-        }
-    };
-
-    /**
-     * Selects the remote process group elements against the current remote process group map.
-     */
-    var select = function () {
-        return remoteProcessGroupContainer.selectAll('g.remote-process-group').data(remoteProcessGroupMap.values(), function (d) {
-            return d.id;
-        });
-    };
-
-    /**
-     * Renders the remote process groups in the specified selection.
+     *     http://www.apache.org/licenses/LICENSE-2.0
      *
-     * @param {selection} entered           The selection of remote process groups to be rendered
-     * @param {boolean} selected            Whether the remote process group is selected
+     * 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.
      */
-    var renderRemoteProcessGroups = function (entered, selected) {
-        if (entered.empty()) {
-            return;
-        }
-
-        var remoteProcessGroup = entered.append('g')
-            .attr({
-                'id': function (d) {
-                    return 'id-' + d.id;
-                },
-                'class': 'remote-process-group component'
-            })
-            .classed('selected', selected)
-            .call(nfCanvasUtils.position);
-
-        // ----
-        // body
-        // ----
-
-        // remote process group border
-        remoteProcessGroup.append('rect')
-            .attr({
-                'class': 'border',
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': function (d) {
-                    return d.dimensions.height;
-                },
-                'fill': 'transparent',
-                'stroke': 'transparent'
-            });
-
-        // remote process group body
-        remoteProcessGroup.append('rect')
-            .attr({
-                'class': 'body',
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': function (d) {
-                    return d.dimensions.height;
-                },
-                'filter': 'url(#component-drop-shadow)',
-                'stroke-width': 0
-            });
-
-        // remote process group name background
-        remoteProcessGroup.append('rect')
-            .attr({
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': 32,
-                'fill': '#b8c6cd'
-            });
-
-        // remote process group name
-        remoteProcessGroup.append('text')
-            .attr({
-                'x': 30,
-                'y': 20,
-                'width': 305,
-                'height': 16,
-                'class': 'remote-process-group-name'
-            });
-
-        // always support selection
-        remoteProcessGroup.call(nfSelectable.activate).call(nfContextMenu.activate);
-    };
-
-    // attempt of space between component count and icon for process group contents
-    var CONTENTS_SPACER = 5;
-
-    /**
-     * Updates the process groups in the specified selection.
-     *
-     * @param {selection} updated               The process groups to be updated
-     */
-    var updateRemoteProcessGroups = function (updated) {
-        if (updated.empty()) {
-            return;
-        }
-
-        // remote process group border authorization
-        updated.select('rect.border')
-            .classed('unauthorized', function (d) {
-                return d.permissions.canRead === false;
-            });
-
-        // remote process group body authorization
-        updated.select('rect.body')
-            .classed('unauthorized', function (d) {
-                return d.permissions.canRead === false;
-            });
-
-        updated.each(function (remoteProcessGroupData) {
-            var remoteProcessGroup = d3.select(this);
-            var details = remoteProcessGroup.select('g.remote-process-group-details');
-
-            // update the component behavior as appropriate
-            nfCanvasUtils.editable(remoteProcessGroup, nfConnectable, nfDraggable);
-
-            // if this processor is visible, render everything
-            if (remoteProcessGroup.classed('visible')) {
-                if (details.empty()) {
-                    details = remoteProcessGroup.append('g').attr('class', 'remote-process-group-details');
-
-                    // remote process group transmission status
-                    details.append('text')
-                        .attr({
-                            'class': 'remote-process-group-transmission-status',
-                            'x': 10,
-                            'y': 20
-                        });
-
-                    // ------------------
-                    // details background
-                    // ------------------
-
-                    details.append('rect')
-                        .attr({
-                            'x': 0,
-                            'y': 32,
-                            'width': function () {
-                                return remoteProcessGroupData.dimensions.width
-                            },
-                            'height': 24,
-                            'fill': '#e3e8eb'
-                        });
-
-                    // -------
-                    // details
-                    // -------
-
-                    // remote process group secure transfer
-                    details.append('text')
-                        .attr({
-                            'class': 'remote-process-group-transmission-secure',
-                            'x': 10,
-                            'y': 48
-                        });
-
-                    // remote process group uri
-                    details.append('text')
-                        .attr({
-                            'x': 30,
-                            'y': 48,
-                            'width': 305,
-                            'height': 12,
-                            'class': 'remote-process-group-uri'
-                        });
-
-                    // ----------------
-                    // stats background
-                    // ----------------
-
-                    // sent
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return remoteProcessGroupData.dimensions.width;
-                            },
-                            'height': 19,
-                            'x': 0,
-                            'y': 66,
-                            'fill': '#f4f6f7'
-                        });
-
-                    // border
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return remoteProcessGroupData.dimensions.width;
-                            },
-                            'height': 1,
-                            'x': 0,
-                            'y': 84,
-                            'fill': '#c7d2d7'
-                        });
-
-                    // received
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return remoteProcessGroupData.dimensions.width;
-                            },
-                            'height': 19,
-                            'x': 0,
-                            'y': 85,
-                            'fill': '#ffffff'
-                        });
-
-                    // border
-                    details.append('rect')
-                        .attr({
-                            'width': function () {
-                                return remoteProcessGroupData.dimensions.width;
-                            },
-                            'height': 1,
-                            'x': 0,
-                            'y': 103,
-                            'fill': '#c7d2d7'
-                        });
-
-                    // -----
-                    // stats
-                    // -----
-
-                    // stats label container
-                    var remoteProcessGroupStatsLabel = details.append('g')
-                        .attr({
-                            'transform': 'translate(6, 75)'
-                        });
-
-                    // sent label
-                    remoteProcessGroupStatsLabel.append('text')
-                        .attr({
-                            'width': 73,
-                            'height': 10,
-                            'x': 4,
-                            'y': 5,
-                            'class': 'stats-label'
-                        })
-                        .text('Sent');
-
-                    // received label
-                    remoteProcessGroupStatsLabel.append('text')
-                        .attr({
-                            'width': 73,
-                            'height': 10,
-                            'x': 4,
-                            'y': 23,
-                            'class': 'stats-label'
-                        })
-                        .text('Received');
-
-                    // stats value container
-                    var remoteProcessGroupStatsValue = details.append('g')
-                        .attr({
-                            'transform': 'translate(95, 75)'
-                        });
-
-                    // sent value
-                    var sentText = remoteProcessGroupStatsValue.append('text')
-                        .attr({
-                            'width': 180,
-                            'height': 10,
-                            'x': 4,
-                            'y': 5,
-                            'class': 'remote-process-group-sent stats-value'
-                        });
-
-                    // sent count
-                    sentText.append('tspan')
-                        .attr({
-                            'class': 'count'
-                        });
-
-                    // sent size
-                    sentText.append('tspan')
-                        .attr({
-                            'class': 'size'
-                        });
-
-                    // sent ports
-                    sentText.append('tspan')
-                        .attr({
-                            'class': 'ports'
-                        });
-
-                    // received value
-                    var receivedText = remoteProcessGroupStatsValue.append('text')
-                        .attr({
-                            'width': 180,
-                            'height': 10,
-                            'x': 4,
-                            'y': 23,
-                            'class': 'remote-process-group-received stats-value'
-                        });
-
-                    // received ports
-                    receivedText.append('tspan')
-                        .attr({
-                            'class': 'ports'
-                        });
-
-                    // received count
-                    receivedText.append('tspan')
-                        .attr({
-                            'class': 'count'
-                        });
-
-                    // received size
-                    receivedText.append('tspan')
-                        .attr({
-                            'class': 'size'
-                        });
-
-                    // stats value container
-                    var processGroupStatsInfo = details.append('g')
-                        .attr({
-                            'transform': 'translate(335, 75)'
-                        });
-
-                    // sent info
-                    processGroupStatsInfo.append('text')
-                        .attr({
-                            'width': 25,
-                            'height': 10,
-                            'x': 4,
-                            'y': 5,
-                            'class': 'stats-info'
-                        })
-                        .text('5 min');
-
-                    // received info
-                    processGroupStatsInfo.append('text')
-                        .attr({
-                            'width': 25,
-                            'height': 10,
-                            'x': 4,
-                            'y': 23,
-                            'class': 'stats-info'
-                        })
-                        .text('5 min');
-
-                    // --------
-                    // comments
-                    // --------
-
-                    // process group comments
-                    details.append('text')
-                        .attr({
-                            'x': 10,
-                            'y': 121,
-                            'width': 342,
-                            'height': 22,
-                            'class': 'remote-process-group-comments'
-                        });
-
-                    // -------------------
-                    // last refreshed time
-                    // -------------------
-
-                    details.append('rect')
-                        .attr({
-                            'x': 0,
-                            'y': function () {
-                                return remoteProcessGroupData.dimensions.height - 24;
-                            },
-                            'width': function () {
-                                return remoteProcessGroupData.dimensions.width;
-                            },
-                            'height': 24,
-                            'fill': '#e3e8eb'
-                        });
-
-                    details.append('text')
-                        .attr({
-                            'x': 370,
-                            'y': 150,
-                            'class': 'remote-process-group-last-refresh'
-                        });
-
-                    // -------------------
-                    // active thread count
-                    // -------------------
-
-                    // active thread count
-                    details.append('text')
-                        .attr({
-                            'class': 'active-thread-count-icon',
-                            'y': 20
-                        })
-                        .text('\ue83f');
-
-                    // active thread icon
-                    details.append('text')
-                        .attr({
-                            'class': 'active-thread-count',
-                            'y': 20
-                        });
-
-                    // ---------
-                    // bulletins
-                    // ---------
-
-                    // bulletin background
-                    details.append('rect')
-                        .attr({
-                            'class': 'bulletin-background',
-                            'x': function () {
-                                return remoteProcessGroupData.dimensions.width - 24;
-                            },
-                            'y': 32,
-                            'width': 24,
-                            'height': 24
-                        });
-
-                    // bulletin icon
-                    details.append('text')
-                        .attr({
-                            'class': 'bulletin-icon',
-                            'x': function () {
-                                return remoteProcessGroupData.dimensions.width - 17;
-                            },
-                            'y': 50
-                        })
-                        .text('\uf24a');
-                }
-
-                if (remoteProcessGroupData.permissions.canRead) {
-                    // remote process group uri
-                    details.select('text.remote-process-group-uri')
-                        .each(function (d) {
-                            var remoteProcessGroupUri = d3.select(this);
-
-                            // reset the remote process group name to handle any previous state
-                            remoteProcessGroupUri.text(null).selectAll('title').remove();
-
-                            // apply ellipsis to the remote process group name as necessary
-                            nfCanvasUtils.ellipsis(remoteProcessGroupUri, d.component.targetUris);
-                        }).append('title').text(function (d) {
-                        return d.component.name;
-                    });
-
-                    // update the process groups transmission status
-                    details.select('text.remote-process-group-transmission-secure')
-                        .text(function (d) {
-                            var icon = '';
-                            if (d.component.targetSecure === true) {
-                                icon = '\uf023';
-                            } else {
-                                icon = '\uf09c';
-                            }
-                            return icon;
-                        })
-                        .each(function (d) {
-                            // get the tip
-                            var tip = d3.select('#transmission-secure-' + d.id);
-
-                            // remove the tip if necessary
-                            if (tip.empty()) {
-                                tip = d3.select('#remote-process-group-tooltips').append('div')
-                                    .attr('id', function () {
-                                        return 'transmission-secure-' + d.id;
-                                    })
-                                    .attr('class', 'tooltip nifi-tooltip');
-                            }
-
-                            // update the tip
-                            tip.text(function () {
-                                if (d.component.targetSecure === true) {
-                                    return 'Site-to-Site is secure.';
-                                } else {
-                                    return 'Site-to-Site is NOT secure.';
-                                }
-                            });
-
-                            // add the tooltip
-                            nfCanvasUtils.canvasTooltip(tip, d3.select(this));
-                        });
-
-                    // ---------------
-                    // update comments
-                    // ---------------
-
-                    // update the process group comments
-                    details.select('text.remote-process-group-comments')
-                        .each(function (d) {
-                            var remoteProcessGroupComments = d3.select(this);
-
-                            // reset the processor name to handle any previous state
-                            remoteProcessGroupComments.text(null).selectAll('tspan, title').remove();
-
-                            // apply ellipsis to the port name as necessary
-                            nfCanvasUtils.ellipsis(remoteProcessGroupComments, getProcessGroupComments(d));
-                        }).classed('unset', function (d) {
-                        return nfCommon.isBlank(d.component.comments);
-                    }).append('title').text(function (d) {
-                        return getProcessGroupComments(d);
-                    });
-
-                    // --------------
-                    // last refreshed
-                    // --------------
-
-                    details.select('text.remote-process-group-last-refresh')
-                        .text(function (d) {
-                            if (nfCommon.isDefinedAndNotNull(d.component.flowRefreshed)) {
-                                return d.component.flowRefreshed;
-                            } else {
-                                return 'Remote flow not current';
-                            }
-                        });
-
-                    // update the process group name
-                    remoteProcessGroup.select('text.remote-process-group-name')
-                        .each(function (d) {
-                            var remoteProcessGroupName = d3.select(this);
-
-                            // reset the remote process group name to handle any previous state
-                            remoteProcessGroupName.text(null).selectAll('title').remove();
-
-                            // apply ellipsis to the remote process group name as necessary
-                            nfCanvasUtils.ellipsis(remoteProcessGroupName, d.component.name);
-                        }).append('title').text(function (d) {
-                        return d.component.name;
-                    });
-                } else {
-                    // clear the target uri
-                    details.select('text.remote-process-group-uri').text(null);
-
-                    // clear the transmission secure icon
-                    details.select('text.remote-process-group-transmission-secure').text(null);
-
-                    // clear the process group comments
-                    details.select('text.remote-process-group-comments').text(null);
-
-                    // clear the last refresh
-                    details.select('text.remote-process-group-last-refresh').text(null);
-
-                    // clear the name
-                    remoteProcessGroup.select('text.remote-process-group-name').text(null);
-                }
-
-                // populate the stats
-                remoteProcessGroup.call(updateProcessGroupStatus);
-            } else {
-                if (remoteProcessGroupData.permissions.canRead) {
-                    // update the process group name
-                    remoteProcessGroup.select('text.remote-process-group-name')
-                        .text(function (d) {
-                            var name = d.component.name;
-                            if (name.length > PREVIEW_NAME_LENGTH) {
-                                return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
-                            } else {
-                                return name;
-                            }
-                        });
-                } else {
-                    // clear the name
-                    remoteProcessGroup.select('text.remote-process-group-name').text(null);
-                }
-
-                // remove the tooltips
-                remoteProcessGroup.call(removeTooltips);
-
-                // remove the details if necessary
-                if (!details.empty()) {
-                    details.remove();
-                }
-            }
-        });
-    };
-
-    var hasIssues = function (d) {
-        return !nfCommon.isEmpty(d.component.authorizationIssues) || !nfCommon.isEmpty(d.component.validationErrors);
-    };
-
-    var getIssues = function (d) {
-        var issues = [];
-        if (!nfCommon.isEmpty(d.component.authorizationIssues)) {
-            issues = issues.concat(d.component.authorizationIssues);
-        }
-        if (!nfCommon.isEmpty(d.component.validationErrors)) {
-            issues = issues.concat(d.component.validationErrors);
-        }
-        return issues;
-    };
-
-    /**
-     * Updates the process group status.
-     *
-     * @param {selection} updated           The process groups to be updated
-     */
-    var updateProcessGroupStatus = function (updated) {
-        if (updated.empty()) {
-            return;
-        }
-
-        // sent count value
-        updated.select('text.remote-process-group-sent tspan.count')
-            .text(function (d) {
-                return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.sent, ' ');
-            });
-
-        // sent size value
-        updated.select('text.remote-process-group-sent tspan.size')
-            .text(function (d) {
-                return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.sent, ' ');
-            });
-
-        // sent ports value
-        updated.select('text.remote-process-group-sent tspan.ports')
-            .text(function (d) {
-                return ' ' + String.fromCharCode(8594) + ' ' + d.inputPortCount;
-            });
-
-        // received ports value
-        updated.select('text.remote-process-group-received tspan.ports')
-            .text(function (d) {
-                return d.outputPortCount + ' ' + String.fromCharCode(8594) + ' ';
-            });
-
-        // received count value
-        updated.select('text.remote-process-group-received tspan.count')
-            .text(function (d) {
-                return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.received, ' ');
-            });
-
-        // received size value
-        updated.select('text.remote-process-group-received tspan.size')
-            .text(function (d) {
-                return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.received, ' ');
-            });
-
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Connection',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.CanvasUtils'],
+              function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
+                  return (nf.RemoteProcessGroup = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.RemoteProcessGroup =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.Connection'),
+                  require('nf.Common'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.RemoteProcessGroup = factory(root.$,
+              root.d3,
+              root.nf.Connection,
+              root.nf.Common,
+              root.nf.Client,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
+      'use strict';
+  
+      var nfConnectable;
+      var nfDraggable;
+      var nfSelectable;
+      var nfContextMenu;
+    
+        var PREVIEW_NAME_LENGTH = 30;
+    
+        var dimensions = {
+            width: 380,
+            height: 158
+        };
+    
+        // --------------------------------------------
+        // remote process groups currently on the graph
+        // --------------------------------------------
+    
+        var remoteProcessGroupMap;
+    
+      // -----------------------------------------------------------
+      // cache for components that are added/removed from the canvas
+      // -----------------------------------------------------------
+  
+      var removedCache;
+      var addedCache;
+  
         // --------------------
-        // authorization issues
+        // component containers
         // --------------------
-
-        // TODO - only consider state from the status
-        // update the process groups transmission status
-        updated.select('text.remote-process-group-transmission-status')
-            .text(function (d) {
-                var icon = '';
-                if (d.permissions.canRead) {
-                    if (hasIssues(d)) {
-                        icon = '\uf071';
-                    } else if (d.component.transmitting === true) {
-                        icon = '\uf140';
-                    } else {
-                        icon = '\ue80a';
-                    }
-                }
-                return icon;
-            })
-            .attr('font-family', function (d) {
-                var family = '';
-                if (d.permissions.canRead) {
-                    if (hasIssues(d) || d.component.transmitting) {
-                        family = 'FontAwesome';
-                    } else {
-                        family = 'flowfont';
-                    }
-                }
-                return family;
-            })
-            .classed('invalid', function (d) {
-                return d.permissions.canRead && hasIssues(d);
-            })
-            .classed('transmitting', function (d) {
-                return d.permissions.canRead && !hasIssues(d) && d.component.transmitting === true;
-            })
-            .classed('not-transmitting', function (d) {
-                return d.permissions.canRead && !hasIssues(d) && d.component.transmitting === false;
-            })
-            .each(function (d) {
-                // get the tip
-                var tip = d3.select('#authorization-issues-' + d.id);
-
-                // if there are validation errors generate a tooltip
-                if (d.permissions.canRead && hasIssues(d)) {
-                    // create the tip if necessary
-                    if (tip.empty()) {
-                        tip = d3.select('#remote-process-group-tooltips').append('div')
-                            .attr('id', function () {
-                                return 'authorization-issues-' + d.id;
-                            })
-                            .attr('class', 'tooltip nifi-tooltip');
-                    }
-
-                    // update the tip
-                    tip.html(function () {
-                        var list = nfCommon.formatUnorderedList(getIssues(d));
-                        if (list === null || list.length === 0) {
-                            return '';
-                        } else {
-                            return $('<div></div>').append(list).html();
-                        }
-                    });
-
-                    // add the tooltip
-                    nfCanvasUtils.canvasTooltip(tip, d3.select(this));
-                } else {
-                    if (!tip.empty()) {
-                        tip.remove();
-                    }
-                }
-            });
-
-        updated.each(function (d) {
-            var remoteProcessGroup = d3.select(this);
-            var offset = 0;
-
-            // -------------------
-            // active thread count
-            // -------------------            
-
-            nfCanvasUtils.activeThreadCount(remoteProcessGroup, d, function (off) {
-                offset = off;
-            });
-
-            // ---------
-            // bulletins
-            // ---------
-
-            remoteProcessGroup.select('rect.bulletin-background').classed('has-bulletins', function () {
-                return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
-            });
-
-            nfCanvasUtils.bulletins(remoteProcessGroup, d, function () {
-                return d3.select('#remote-process-group-tooltips');
-            }, offset);
-        });
-    };
-
-    /**
-     * Removes the remote process groups in the specified selection.
-     *
-     * @param {selection} removed               The process groups to be removed
-     */
-    var removeRemoteProcessGroups = function (removed) {
-        if (removed.empty()) {
-            return;
-        }
-
-        removed.call(removeTooltips).remove();
-    };
-
-    /**
-     * Removes the tooltips for the remote process groups in the specified selection.
-     *
-     * @param {type} removed
-     */
-    var removeTooltips = function (removed) {
-        removed.each(function (d) {
-            // remove any associated tooltips
-            $('#bulletin-tip-' + d.id).remove();
-            $('#authorization-issues-' + d.id).remove();
-            $('#transmission-secure-' + d.id).remove();
-        });
-    };
-
-    var nfRemoteProcessGroup = {
+    
+        var remoteProcessGroupContainer;
+    
+        // --------------------------
+        // privately scoped functions
+        // --------------------------
+    
         /**
-         * Initializes of the Process Group handler.
+         * Gets the process group comments.
          *
-         * @param nfConnectableRef   The nfConnectable module.
-         * @param nfDraggableRef   The nfDraggable module.
-         * @param nfSelectableRef   The nfSelectable module.
-         * @param nfContextMenuRef   The nfContextMenu module.
+         * @param {object} d
          */
-        init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
-            nfConnectable = nfConnectableRef;
-            nfDraggable = nfDraggableRef;
-            nfSelectable = nfSelectableRef;
-            nfContextMenu = nfContextMenuRef;
-
-            remoteProcessGroupMap = d3.map();
-            removedCache = d3.map();
-            addedCache = d3.map();
-
-            // create the process group container
-            remoteProcessGroupContainer = d3.select('#canvas').append('g')
-                .attr({
-                    'pointer-events': 'all',
-                    'class': 'remote-process-groups'
-                });
-        },
-
+        var getProcessGroupComments = function (d) {
+          if (nfCommon.isBlank(d.component.comments)) {
+                return 'No comments specified';
+            } else {
+                return d.component.comments;
+            }
+        };
+    
         /**
-         * Adds the specified remote process group entity.
-         *
-         * @param remoteProcessGroupEntities       The remote process group
-         * @param options           Configuration options
+         * Selects the remote process group elements against the current remote process group map.
          */
-        add: function (remoteProcessGroupEntities, options) {
-            var selectAll = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-            }
-
-            // get the current time
-            var now = new Date().getTime();
-
-            var add = function (remoteProcessGroupEntity) {
-                addedCache.set(remoteProcessGroupEntity.id, now);
-
-                // add the remote process group
-                remoteProcessGroupMap.set(remoteProcessGroupEntity.id, $.extend({
-                    type: 'RemoteProcessGroup',
-                    dimensions: dimensions
-                }, remoteProcessGroupEntity));
-            };
-
-            // determine how to handle the specified remote process groups
-            if ($.isArray(remoteProcessGroupEntities)) {
-                $.each(remoteProcessGroupEntities, function (_, remoteProcessGroupEntity) {
-                    add(remoteProcessGroupEntity);
-                });
-            } else if (nfCommon.isDefinedAndNotNull(remoteProcessGroupEntities)) {
-                add(remoteProcessGroupEntities);
-            }
-
-            // apply the selection and handle new remote process groups
-            var selection = select();
-            selection.enter().call(renderRemoteProcessGroups, selectAll);
-            selection.call(updateRemoteProcessGroups);
-        },
-
+        var select = function () {
+            return remoteProcessGroupContainer.selectAll('g.remote-process-group').data(remoteProcessGroupMap.values(), function (d) {
+                return d.id;
+            });
+        };
+    
         /**
-         * Populates the graph with the specified remote process groups.
+         * Renders the remote process groups in the specified selection.
          *
-         * @argument {object | array} remoteProcessGroupEntities                   The remote process groups to add
-         * @argument {object} options                                    Configuration options
+         * @param {selection} entered           The selection of remote process groups to be rendered
+         * @param {boolean} selected            Whether the remote process group is selected
          */
-        set: function (remoteProcessGroupEntities, options) {
-            var selectAll = false;
-            var transition = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+        var renderRemoteProcessGroups = function (entered, selected) {
+            if (entered.empty()) {
+                return;
             }
-
-            var set = function (proposedRemoteProcessGroupEntity) {
-                var currentRemoteProcessGroupEntity = remoteProcessGroupMap.get(proposedRemoteProcessGroupEntity.id);
-
-                // set the remote process group if appropriate due to revision and wasn't previously removed
-                if (nfClient.isNewerRevision(currentRemoteProcessGroupEntity, proposedRemoteProcessGroupEntity) && !removedCache.has(proposedRemoteProcessGroupEntity.id)) {
-                    remoteProcessGroupMap.set(proposedRemoteProcessGroupEntity.id, $.extend({
-                        type: 'RemoteProcessGroup',
-                        dimensions: dimensions
-                    }, proposedRemoteProcessGroupEntity));
-                }
-            };
-
-            // determine how to handle the specified remote process groups
-            if ($.isArray(remoteProcessGroupEntities)) {
-                $.each(remoteProcessGroupMap.keys(), function (_, key) {
-                    var currentRemoteProcessGroupEntity = remoteProcessGroupMap.get(key);
-                    var isPresent = $.grep(remoteProcessGroupEntities, function (proposedRemoteProcessGroupEntity) {
-                        return proposedRemoteProcessGroupEntity.id === currentRemoteProcessGroupEntity.id;
-                    });
-
-                    // if the current remote process group is not present and was not recently added, remove it
-                    if (isPresent.length === 0 && !addedCache.has(key)) {
-                        remoteProcessGroupMap.remove(key);
-                    }
+    
+            var remoteProcessGroup = entered.append('g')
+                .attr({
+                    'id': function (d) {
+                        return 'id-' + d.id;
+                    },
+                    'class': 'remote-process-group component'
+                })
+                .classed('selected', selected)
+              .call(nfCanvasUtils.position);
+    
+            // ----
+            // body
+            // ----
+    
+            // remote process group border
+            remoteProcessGroup.append('rect')
+                .attr({
+                    'class': 'border',
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': function (d) {
+                        return d.dimensions.height;
+                    },
+                    'fill': 'transparent',
+                    'stroke': 'transparent'
+                });
+    
+            // remote process group body
+            remoteProcessGroup.append('rect')
+                .attr({
+                    'class': 'body',
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': function (d) {
+                        return d.dimensions.height;
+                    },
+                    'filter': 'url(#component-drop-shadow)',
+                    'stroke-width': 0
                 });
-                $.each(remoteProcessGroupEntities, function (_, remoteProcessGroupEntity) {
-                    set(remoteProcessGroupEntity);
+    
+            // remote process group name background
+            remoteProcessGroup.append('rect')
+                .attr({
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': 32,
+                    'fill': '#b8c6cd'
                 });
-            } else if (nfCommon.isDefinedAndNotNull(remoteProcessGroupEntities)) {
-                set(remoteProcessGroupEntities);
-            }
-
-            // apply the selection and handle all new remote process groups
-            var selection = select();
-            selection.enter().call(renderRemoteProcessGroups, selectAll);
-            selection.call(updateRemoteProcessGroups).call(nfCanvasUtils.position, transition);
-            selection.exit().call(removeRemoteProcessGroups);
-        },
-
+    
+            // remote process group name
+            remoteProcessGroup.append('text')
+                .attr({
+                    'x': 30,
+                    'y': 20,
+                    'width': 305,
+                    'height': 16,
+                    'class': 'remote-process-group-name'
+                });
+    
+            // always support selection
+          remoteProcessGroup.call(nfSelectable.activate).call(nfContextMenu.activate);
+        };
+    
+        // attempt of space between component count and icon for process group contents
+        var CONTENTS_SPACER = 5;
+    
         /**
-         * If the remote process group id is specified it is returned. If no remote process
-         * group id specified, all remote process groups are returned.
+         * Updates the process groups in the specified selection.
          *
-         * @param {string} id
+         * @param {selection} updated               The process groups to be updated
          */
-        get: function (id) {
-            if (nfCommon.isUndefined(id)) {
-                return remoteProcessGroupMap.values();
-            } else {
-                return remoteProcessGroupMap.get(id);
+        var updateRemoteProcessGroups = function (updated) {
+            if (updated.empty()) {
+                return;
             }
-        },
-
+    
+            // remote process group border authorization
+            updated.select('rect.border')
+                .classed('unauthorized', function (d) {
+                    return d.permissions.canRead === false;
+                });
+    
+            // remote process group body authorization
+            updated.select('rect.body')
+                .classed('unauthorized', function (d) {
+                    return d.permissions.canRead === false;
+                });
+    
+            updated.each(function (remoteProcessGroupData) {
+                var remoteProcessGroup = d3.select(this);
+                var details = remoteProcessGroup.select('g.remote-process-group-details');
+    
+                // update the component behavior as appropriate
+              nfCanvasUtils.editable(remoteProcessGroup, nfConnectable, nfDraggable);
+    
+                // if this processor is visible, render everything
+                if (remoteProcessGroup.classed('visible')) {
+                    if (details.empty()) {
+                        details = remoteProcessGroup.append('g').attr('class', 'remote-process-group-details');
+    
+                        // remote process group transmission status
+                        details.append('text')
+                            .attr({
+                                'class': 'remote-process-group-transmission-status',
+                                'x': 10,
+                                'y': 20
+                            });
+    
+                        // ------------------
+                        // details background
+                        // ------------------
+    
+                        details.append('rect')
+                            .attr({
+                                'x': 0,
+                                'y': 32,
+                                'width': function () {
+                                    return remoteProcessGroupData.dimensions.width
+                                },
+                                'height': 24,
+                                'fill': '#e3e8eb'
+                            });
+    
+                        // -------
+                        // details
+                        // -------
+    
+                        // remote process group secure transfer
+                        details.append('text')
+                            .attr({
+                                'class': 'remote-process-group-transmission-secure',
+                                'x': 10,
+                                'y': 48
+                            });
+    
+                        // remote process group uri
+                        details.append('text')
+                            .attr({
+                                'x': 30,
+                                'y': 48,
+                                'width': 305,
+                                'height': 12,
+                                'class': 'remote-process-group-uri'
+                            });
+    
+                        // ----------------
+                        // stats background
+                        // ----------------
+    
+                        // sent
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return remoteProcessGroupData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 66,
+                                'fill': '#f4f6f7'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return remoteProcessGroupData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 84,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // received
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return remoteProcessGroupData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 85,
+                                'fill': '#ffffff'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return remoteProcessGroupData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 103,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // -----
+                        // stats
+                        // -----
+    
+                        // stats label container
+                        var remoteProcessGroupStatsLabel = details.append('g')
+                            .attr({
+                                'transform': 'translate(6, 75)'
+                            });
+    
+                        // sent label
+                        remoteProcessGroupStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'x': 4,
+                                'y': 5,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-canvas.Sent'));
+    
+                        // received label
+                        remoteProcessGroupStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'x': 4,
+                                'y': 23,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-canvas.Received'));
+    
+                        // stats value container
+                        var remoteProcessGroupStatsValue = details.append('g')
+                            .attr({
+                                'transform': 'translate(95, 75)'
+                            });
+    
+                        // sent value
+                        var sentText = remoteProcessGroupStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'x': 4,
+                                'y': 5,
+                                'class': 'remote-process-group-sent stats-value'
+                            });
+    
+                        // sent count
+                        sentText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // sent size
+                        sentText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // sent ports
+                        sentText.append('tspan')
+                            .attr({
+                                'class': 'ports'
+                            });
+    
+                        // received value
+                        var receivedText = remoteProcessGroupStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'x': 4,
+                                'y': 23,
+                                'class': 'remote-process-group-received stats-value'
+                            });
+    
+                        // received ports
+                        receivedText.append('tspan')
+                            .attr({
+                                'class': 'ports'
+                            });
+    
+                        // received count
+                        receivedText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // received size
+                        receivedText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // stats value container
+                        var processGroupStatsInfo = details.append('g')
+                            .attr({
+                                'transform': 'translate(335, 75)'
+                            });
+    
+                        // sent info
+                        processGroupStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'x': 4,
+                                'y': 5,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-canvas.5min'));
+    
+                        // received info
+                        processGroupStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'x': 4,
+                                'y': 23,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-canvas.5min'));
+    
+                        // --------
+                        // comments
+                        // --------
+    
+                        // process group comments
+                        details.append('text')
+                            .attr({
+                                'x': 10,
+                                'y': 121,
+                                'width': 342,
+                                'height': 22,
+                                'class': 'remote-process-group-comments'
+                            });
+    
+                        // -------------------
+                        // last refreshed time
+                        // -------------------
+    
+                        details.append('rect')
+                            .attr({
+                                'x': 0,
+                                'y': function () {
+                                    return remoteProcessGroupData.dimensions.height - 24;
+                                },
+                                'width': function () {
+                                    return remoteProcessGroupData.dimensions.width;
+                                },
+                                'height': 24,
+                                'fill': '#e3e8eb'
+                            });
+    
+                        details.append('text')
+                            .attr({
+                                'x': 370,
+                                'y': 150,
+                                'class': 'remote-process-group-last-refresh'
+                            });
+    
+                        // -------------------
+                        // active thread count
+                        // -------------------
+    
+                        // active thread count
+                        details.append('text')
+                            .attr({
+                                'class': 'active-thread-count-icon',
+                                'y': 20
+                            })
+                            .text('\ue83f');
+    
+                        // active thread icon
+                        details.append('text')
+                            .attr({
+                                'class': 'active-thread-count',
+                                'y': 20
+                            });
+    
+                        // ---------
+                        // bulletins
+                        // ---------
+    
+                        // bulletin background
+                        details.append('rect')
+                            .attr({
+                                'class': 'bulletin-background',
+                                'x': function () {
+                                    return remoteProcessGroupData.dimensions.width - 24;
+                                },
+                                'y': 32,
+                                'width': 24,
+                                'height': 24
+                            });
+    
+                        // bulletin icon
+                        details.append('text')
+                            .attr({
+                                'class': 'bulletin-icon',
+                                'x': function () {
+                                    return remoteProcessGroupData.dimensions.width - 17;
+                                },
+                                'y': 50
+                            })
+                            .text('\uf24a');
+                    }
+    
+                    if (remoteProcessGroupData.permissions.canRead) {
+                        // remote process group uri
+                        details.select('text.remote-process-group-uri')
+                            .each(function (d) {
+                                var remoteProcessGroupUri = d3.select(this);
+    
+                                // reset the remote process group name to handle any previous state
+                                remoteProcessGroupUri.text(null).selectAll('title').remove();
+    
+                                // apply ellipsis to the remote process group name as necessary
+                              nfCanvasUtils.ellipsis(remoteProcessGroupUri, d.component.targetUris);
+                            }).append('title').text(function (d) {
+                            return d.component.name;
+                        });
+    
+                        // update the process groups transmission status
+                        details.select('text.remote-process-group-transmission-secure')
+                            .text(function (d) {
+                                var icon = '';
+                                if (d.component.targetSecure === true) {
+                                    icon = '\uf023';
+                                } else {
+                                    icon = '\uf09c';
+                                }
+                                return icon;
+                            })
+                            .each(function (d) {
+                                // get the tip
+                                var tip = d3.select('#transmission-secure-' + d.id);
+    
+                                // remove the tip if necessary
+                                if (tip.empty()) {
+                                    tip = d3.select('#remote-process-group-tooltips').append('div')
+                                        .attr('id', function () {
+                                            return 'transmission-secure-' + d.id;
+                                        })
+                                        .attr('class', 'tooltip nifi-tooltip');
+                                }
+    
+                                // update the tip
+                                tip.text(function () {
+                                    if (d.component.targetSecure === true) {
+                                        return 'Site-to-Site is secure.';
+                                    } else {
+                                        return 'Site-to-Site is NOT secure.';
+                                    }
+                                });
+    
+                                // add the tooltip
+                              nfCanvasUtils.canvasTooltip(tip, d3.select(this));
+                            });
+    
+                        // ---------------
+                        // update comments
+                        // ---------------
+    
+                        // update the process group comments
+                        details.select('text.remote-process-group-comments')
+                            .each(function (d) {
+                                var remoteProcessGroupComments = d3.select(this);
+    
+                                // reset the processor name to handle any previous state
+                                remoteProcessGroupComments.text(null).selectAll('tspan, title').remove();
+    
+                                // apply ellipsis to the port name as necessary
+                              nfCanvasUtils.ellipsis(remoteProcessGroupComments, getProcessGroupComments(d));
+                            }).classed('unset', function (d) {
+                          return nfCommon.isBlank(d.component.comments);
+                        }).append('title').text(function (d) {
+                            return getProcessGroupComments(d);
+                        });
+    
+                        // --------------
+                        // last refreshed
+                        // --------------
+    
+                        details.select('text.remote-process-group-last-refresh')
+                            .text(function (d) {
+                              if (nfCommon.isDefinedAndNotNull(d.component.flowRefreshed)) {
+                                    return d.component.flowRefreshed;
+                                } else {
+                                    return 'Remote flow not current';
+                                }
+                            });
+    
+                        // update the process group name
+                        remoteProcessGroup.select('text.remote-process-group-name')
+                            .each(function (d) {
+                                var remoteProcessGroupName = d3.select(this);
+    
+                                // reset the remote process group name to handle any previous state
+                                remoteProcessGroupName.text(null).selectAll('title').remove();
+    
+                                // apply ellipsis to the remote process group name as necessary
+                              nfCanvasUtils.ellipsis(remoteProcessGroupName, d.component.name);
+                            }).append('title').text(function (d) {
+                            return d.component.name;
+                        });
+                    } else {
+                        // clear the target uri
+                        details.select('text.remote-process-group-uri').text(null);
+    
+                        // clear the transmission secure icon
+                        details.select('text.remote-process-group-transmission-secure').text(null);
+    
+                        // clear the process group comments
+                        details.select('text.remote-process-group-comments').text(null);
+    
+                        // clear the last refresh
+                        details.select('text.remote-process-group-last-refresh').text(null);
+    
+                        // clear the name
+                        remoteProcessGroup.select('text.remote-process-group-name').text(null);
+                    }
+    
+                    // populate the stats
+                    remoteProcessGroup.call(updateProcessGroupStatus);
+                } else {
+                    if (remoteProcessGroupData.permissions.canRead) {
+                        // update the process group name
+                        remoteProcessGroup.select('text.remote-process-group-name')
+                            .text(function (d) {
+                                var name = d.component.name;
+                                if (name.length > PREVIEW_NAME_LENGTH) {
+                                    return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
+                                } else {
+                                    return name;
+                                }
+                            });
+                  } else {
+                      // clear the name
+                      remoteProcessGroup.select('text.remote-process-group-name').text(null);
+                    }
+    
+                    // remove the tooltips
+                    remoteProcessGroup.call(removeTooltips);
+    
+                    // remove the details if necessary
+                    if (!details.empty()) {
+                        details.remove();
+                    }
+                }
+            });
+        };
+    
+      var hasIssues = function (d) {
+          return !nfCommon.isEmpty(d.component.authorizationIssues) || !nfCommon.isEmpty(d.component.validationErrors);
+      };
+  
+      var getIssues = function (d) {
+          var issues = [];
+          if (!nfCommon.isEmpty(d.component.authorizationIssues)) {
+              issues = issues.concat(d.component.authorizationIssues);
+          }
+          if (!nfCommon.isEmpty(d.component.validationErrors)) {
+              issues = issues.concat(d.component.validationErrors);
+          }
+          return issues;
+      };
+  
         /**
-         * If the remote process group id is specified it is refresh according to the current
-         * state. If no remote process group id is specified, all remote process groups are refreshed.
+         * Updates the process group status.
          *
-         * @param {string} id      Optional
+         * @param {selection} updated           The process groups to be updated
          */
-        refresh: function (id) {
-            if (nfCommon.isDefinedAndNotNull(id)) {
-                d3.select('#id-' + id).call(updateRemoteProcessGroups);
-            } else {
-                d3.selectAll('g.remote-process-group').call(updateRemoteProcessGroups);
+        var updateProcessGroupStatus = function (updated) {
+            if (updated.empty()) {
+                return;
             }
-        },
-
-        /**
-         * Refreshes the components necessary after a pan event.
-         */
-        pan: function () {
-            d3.selectAll('g.remote-process-group.entering, g.remote-process-group.leaving').call(updateRemoteProcessGroups);
-        },
-
-        /**
-         * Reloads the remote process group state from the server and refreshes the UI.
-         * If the remote process group is currently unknown, this function just returns.
-         *
-         * @param {string} id       The remote process group id
-         */
-        reload: function (id) {
-            if (remoteProcessGroupMap.has(id)) {
-                var remoteProcessGroupEntity = remoteProcessGroupMap.get(id);
-                return $.ajax({
-                    type: 'GET',
-                    url: remoteProcessGroupEntity.uri,
-                    dataType: 'json'
-                }).done(function (response) {
-                    nfRemoteProcessGroup.set(response);
-
-                    // reload the group's connections
-                    var connections = nfConnection.getComponentConnections(id);
-                    $.each(connections, function (_, connection) {
-                        if (connection.permissions.canRead) {
-                            nfConnection.reload(connection.id);
+    
+            // sent count value
+            updated.select('text.remote-process-group-sent tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.sent, ' ');
+                });
+    
+            // sent size value
+            updated.select('text.remote-process-group-sent tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.sent, ' ');
+                });
+    
+            // sent ports value
+            updated.select('text.remote-process-group-sent tspan.ports')
+                .text(function (d) {
+                    return ' ' + String.fromCharCode(8594) + ' ' + d.inputPortCount;
+                });
+    
+            // received ports value
+            updated.select('text.remote-process-group-received tspan.ports')
+                .text(function (d) {
+                    return d.outputPortCount + ' ' + String.fromCharCode(8594) + ' ';
+                });
+    
+            // received count value
+            updated.select('text.remote-process-group-received tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.received, ' ');
+                });
+    
+            // received size value
+            updated.select('text.remote-process-group-received tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.received, ' ');
+                });
+    
+            // --------------------
+            // authorization issues
+            // --------------------
+    
+            // TODO - only consider state from the status
+            // update the process groups transmission status
+            updated.select('text.remote-process-group-transmission-status')
+                .text(function (d) {
+                    var icon = '';
+                    if (d.permissions.canRead) {
+                      if (hasIssues(d)) {
+                            icon = '\uf071';
+                        } else if (d.component.transmitting === true) {
+                            icon = '\uf140';
+                        } else {
+                            icon = '\ue80a';
                         }
-                    });
+                    }
+                    return icon;
+                })
+                .attr('font-family', function (d) {
+                    var family = '';
+                    if (d.permissions.canRead) {
+                      if (hasIssues(d) || d.component.transmitting) {
+                            family = 'FontAwesome';
+                        } else {
+                            family = 'flowfont';
+                        }
+                    }
+                    return family;
+                })
+              .classed('invalid', function (d) {
+                  return d.permissions.canRead && hasIssues(d);
+              })
+              .classed('transmitting', function (d) {
+                  return d.permissions.canRead && !hasIssues(d) && d.component.transmitting === true;
+              })
+              .classed('not-transmitting', function (d) {
+                  return d.permissions.canRead && !hasIssues(d) && d.component.transmitting === false;
+                })
+                .each(function (d) {
+                    // get the tip
+                    var tip = d3.select('#authorization-issues-' + d.id);
+    
+                    // if there are validation errors generate a tooltip
+                  if (d.permissions.canRead && hasIssues(d)) {
+                        // create the tip if necessary
+                        if (tip.empty()) {
+                            tip = d3.select('#remote-process-group-tooltips').append('div')
+                                .attr('id', function () {
+                                    return 'authorization-issues-' + d.id;
+                                })
+                                .attr('class', 'tooltip nifi-tooltip');
+                        }
+    
+                        // update the tip
+                        tip.html(function () {
+                          var list = nfCommon.formatUnorderedList(getIssues(d));
+                            if (list === null || list.length === 0) {
+                                return '';
+                            } else {
+                                return $('<div></div>').append(list).html();
+                            }
+                        });
+    
+                        // add the tooltip
+                      nfCanvasUtils.canvasTooltip(tip, d3.select(this));
+                    } else {
+                        if (!tip.empty()) {
+                            tip.remove();
+                        }
+                    }
                 });
-            }
-        },
-
-        /**
-         * Positions the component.
-         *
-         * @param {string} id   The id
-         */
-        position: function (id) {
-            d3.select('#id-' + id).call(nfCanvasUtils.position);
-        },
-
+    
+            updated.each(function (d) {
+                var remoteProcessGroup = d3.select(this);
+                var offset = 0;
+    
+                // -------------------
+                // active thread count
+                // -------------------            
+    
+              nfCanvasUtils.activeThreadCount(remoteProcessGroup, d, function (off) {
+                    offset = off;
+                });
+    
+                // ---------
+                // bulletins
+                // ---------
+    
+                remoteProcessGroup.select('rect.bulletin-background').classed('has-bulletins', function () {
+                  return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
+                });
+    
+              nfCanvasUtils.bulletins(remoteProcessGroup, d, function () {
+                    return d3.select('#remote-process-group-tooltips');
+                }, offset);
+            });
+        };
+    
         /**
-         * Removes the specified process group.
+         * Removes the remote process groups in the specified selection.
          *
-         * @param {array|string} remoteProcessGroupIds      The remote process group id(s)
+         * @param {selection} removed               The process groups to be removed
          */
-        remove: function (remoteProcessGroupIds) {
-            var now = new Date().getTime();
-
-            if ($.isArray(remoteProcessGroupIds)) {
-                $.each(remoteProcessGroupIds, function (_, remoteProcessGroupId) {
-                    removedCache.set(remoteProcessGroupId, now);
-                    remoteProcessGroupMap.remove(remoteProcessGroupId);
-                });
-            } else {
-                removedCache.set(remoteProcessGroupIds, now);
-                remoteProcessGroupMap.remove(remoteProcessGroupIds);
+        var removeRemoteProcessGroups = function (removed) {
+            if (removed.empty()) {
+                return;
             }
-
-            // apply the selection and handle all removed remote process groups
-            select().exit().call(removeRemoteProcessGroups);
-        },
-
-        /**
-         * Removes all remote process groups.
-         */
-        removeAll: function () {
-            nfRemoteProcessGroup.remove(remoteProcessGroupMap.keys());
-        },
-
+    
+            removed.call(removeTooltips).remove();
+        };
+    
         /**
-         * Expires the caches up to the specified timestamp.
+         * Removes the tooltips for the remote process groups in the specified selection.
          *
-         * @param timestamp
+         * @param {type} removed
          */
-        expireCaches: function (timestamp) {
-            var expire = function (cache) {
-                cache.forEach(function (id, entryTimestamp) {
-                    if (timestamp > entryTimestamp) {
-                        cache.remove(id);
-                    }
-                });
-            };
-
-            expire(addedCache);
-            expire(removedCache);
-        }
-    };
-
-    return nfRemoteProcessGroup;
-}));
\ No newline at end of file
+        var removeTooltips = function (removed) {
+            removed.each(function (d) {
+                // remove any associated tooltips
+                $('#bulletin-tip-' + d.id).remove();
+                $('#authorization-issues-' + d.id).remove();
+                $('#transmission-secure-' + d.id).remove();
+            });
+        };
+    
+      var nfRemoteProcessGroup = {
+            /**
+             * Initializes of the Process Group handler.
+           *
+           * @param nfConnectableRef   The nfConnectable module.
+           * @param nfDraggableRef   The nfDraggable module.
+           * @param nfSelectableRef   The nfSelectable module.
+           * @param nfContextMenuRef   The nfContextMenu module.
+             */
+          init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
+              nfConnectable = nfConnectableRef;
+              nfDraggable = nfDraggableRef;
+              nfSelectable = nfSelectableRef;
+              nfContextMenu = nfContextMenuRef;
+  
+                remoteProcessGroupMap = d3.map();
+              removedCache = d3.map();
+              addedCache = d3.map();
+    
+                // create the process group container
+                remoteProcessGroupContainer = d3.select('#canvas').append('g')
+                    .attr({
+                        'pointer-events': 'all',
+                        'class': 'remote-process-groups'
+                    });
+            },
+    
+            /**
+             * Adds the specified remote process group entity.
+             *
+             * @param remoteProcessGroupEntities       The remote process group
+             * @param options           Configuration options
+             */
+            add: function (remoteProcessGroupEntities, options) {
+                var selectAll = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                }
+    
+              // get the current time
+              var now = new Date().getTime();
+    
+                var add = function (remoteProcessGroupEntity) {
+                  addedCache.set(remoteProcessGroupEntity.id, now);
+  
+                    // add the remote process group
+                    remoteProcessGroupMap.set(remoteProcessGroupEntity.id, $.extend({
+                        type: 'RemoteProcessGroup',
+                        dimensions: dimensions
+                    }, remoteProcessGroupEntity));
+                };
+    
+                // determine how to handle the specified remote process groups
+                if ($.isArray(remoteProcessGroupEntities)) {
+                    $.each(remoteProcessGroupEntities, function (_, remoteProcessGroupEntity) {
+                        add(remoteProcessGroupEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(remoteProcessGroupEntities)) {
+                    add(remoteProcessGroupEntities);
+                }
+    
+                // apply the selection and handle new remote process groups
+                var selection = select();
+                selection.enter().call(renderRemoteProcessGroups, selectAll);
+                selection.call(updateRemoteProcessGroups);
+            },
+    
+            /**
+             * Populates the graph with the specified remote process groups.
+             *
+             * @argument {object | array} remoteProcessGroupEntities                   The remote process groups to add
+             * @argument {object} options                                    Configuration options
+             */
+            set: function (remoteProcessGroupEntities, options) {
+                var selectAll = false;
+                var transition = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                  transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+                }
+    
+              var set = function (proposedRemoteProcessGroupEntity) {
+                  var currentRemoteProcessGroupEntity = remoteProcessGroupMap.get(proposedRemoteProcessGroupEntity.id);
+  
+                  // set the remote process group if appropriate due to revision and wasn't previously removed
+                  if (nfClient.isNewerRevision(currentRemoteProcessGroupEntity, proposedRemoteProcessGroupEntity) && !removedCache.has(proposedRemoteProcessGroupEntity.id)) {
+                      remoteProcessGroupMap.set(proposedRemoteProcessGroupEntity.id, $.extend({
+                            type: 'RemoteProcessGroup',
+                            dimensions: dimensions
+                      }, proposedRemoteProcessGroupEntity));
+                  }
+                };
+    
+                // determine how to handle the specified remote process groups
+                if ($.isArray(remoteProcessGroupEntities)) {
+                    $.each(remoteProcessGroupMap.keys(), function (_, key) {
+                      var currentRemoteProcessGroupEntity = remoteProcessGroupMap.get(key);
+                      var isPresent = $.grep(remoteProcessGroupEntities, function (proposedRemoteProcessGroupEntity) {
+                          return proposedRemoteProcessGroupEntity.id === currentRemoteProcessGroupEntity.id;
+                      });
+  
+                      // if the current remote process group is not present and was not recently added, remove it
+                      if (isPresent.length === 0 && !addedCache.has(key)) {
+                            remoteProcessGroupMap.remove(key);
+                      }
+                    });
+                    $.each(remoteProcessGroupEntities, function (_, remoteProcessGroupEntity) {
+                        set(remoteProcessGroupEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(remoteProcessGroupEntities)) {
+                    set(remoteProcessGroupEntities);
+                }
+    
+                // apply the selection and handle all new remote process groups
+                var selection = select();
+                selection.enter().call(renderRemoteProcessGroups, selectAll);
+              selection.call(updateRemoteProcessGroups).call(nfCanvasUtils.position, transition);
+                selection.exit().call(removeRemoteProcessGroups);
+            },
+    
+            /**
+             * If the remote process group id is specified it is returned. If no remote process
+             * group id specified, all remote process groups are returned.
+             *
+             * @param {string} id
+             */
+            get: function (id) {
+              if (nfCommon.isUndefined(id)) {
+                    return remoteProcessGroupMap.values();
+                } else {
+                    return remoteProcessGroupMap.get(id);
+                }
+            },
+    
+            /**
+             * If the remote process group id is specified it is refresh according to the current
+             * state. If no remote process group id is specified, all remote process groups are refreshed.
+             *
+             * @param {string} id      Optional
+             */
+            refresh: function (id) {
+              if (nfCommon.isDefinedAndNotNull(id)) {
+                    d3.select('#id-' + id).call(updateRemoteProcessGroups);
+                } else {
+                    d3.selectAll('g.remote-process-group').call(updateRemoteProcessGroups);
+                }
+            },
+    
+            /**
+             * Refreshes the components necessary after a pan event.
+             */
+            pan: function () {
+                d3.selectAll('g.remote-process-group.entering, g.remote-process-group.leaving').call(updateRemoteProcessGroups);
+            },
+    
+            /**
+             * Reloads the remote process group state from the server and refreshes the UI.
+             * If the remote process group is currently unknown, this function just returns.
+             *
+             * @param {string} id       The remote process group id
+             */
+            reload: function (id) {
+                if (remoteProcessGroupMap.has(id)) {
+                    var remoteProcessGroupEntity = remoteProcessGroupMap.get(id);
+                    return $.ajax({
+                        type: 'GET',
+                        url: remoteProcessGroupEntity.uri,
+                        dataType: 'json'
+                    }).done(function (response) {
+                      nfRemoteProcessGroup.set(response);
+    
+                        // reload the group's connections
+                      var connections = nfConnection.getComponentConnections(id);
+                        $.each(connections, function (_, connection) {
+                            if (connection.permissions.canRead) {
+                              nfConnection.reload(connection.id);
+                            }
+                        });
+                    });
+                }
+            },
+    
+            /**
+             * Positions the component.
+             *
+             * @param {string} id   The id
+             */
+            position: function (id) {
+              d3.select('#id-' + id).call(nfCanvasUtils.position);
+            },
+    
+            /**
+             * Removes the specified process group.
+             *
+           * @param {array|string} remoteProcessGroupIds      The remote process group id(s)
+             */
+          remove: function (remoteProcessGroupIds) {
+              var now = new Date().getTime();
+  
+              if ($.isArray(remoteProcessGroupIds)) {
+                  $.each(remoteProcessGroupIds, function (_, remoteProcessGroupId) {
+                      removedCache.set(remoteProcessGroupId, now);
+                      remoteProcessGroupMap.remove(remoteProcessGroupId);
+                    });
+                } else {
+                  removedCache.set(remoteProcessGroupIds, now);
+                  remoteProcessGroupMap.remove(remoteProcessGroupIds);
+                }
+    
+                // apply the selection and handle all removed remote process groups
+                select().exit().call(removeRemoteProcessGroups);
+            },
+    
+            /**
+             * Removes all remote process groups.
+             */
+            removeAll: function () {
+              nfRemoteProcessGroup.remove(remoteProcessGroupMap.keys());
+          },
+  
+          /**
+           * Expires the caches up to the specified timestamp.
+           *
+           * @param timestamp
+           */
+          expireCaches: function (timestamp) {
+              var expire = function (cache) {
+                  cache.forEach(function (id, entryTimestamp) {
+                      if (timestamp > entryTimestamp) {
+                          cache.remove(id);
+                      }
+                  });
+              };
+  
+              expire(addedCache);
+              expire(removedCache);
+          }
+      };
+  
+      return nfRemoteProcessGroup;
+  }));
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 bb1b07c95f0c..28effc6d04cc 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
@@ -1,827 +1,827 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.ErrorHandler',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.Client',
-                'nf.ControllerService',
-                'nf.ControllerServices',
-                'nf.UniversalCapture',
-                'nf.CustomUi'],
-            function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerService, nfControllerServices, nfUniversalCapture, nfCustomUi) {
-                return (nf.ReportingTask = factory($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerService, nfControllerServices, nfUniversalCapture, nfCustomUi));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ReportingTask =
-            factory(require('jquery'),
-                require('nf.ErrorHandler'),
-                require('nf.Common'),
-                require('nf.Dialog'),
-                require('nf.Client'),
-                require('nf.ControllerService'),
-                require('nf.ControllerServices'),
-                require('nf.UniversalCapture'),
-                require('nf.CustomUi')));
-    } else {
-        nf.ReportingTask = factory(root.$,
-            root.nf.ErrorHandler,
-            root.nf.Common,
-            root.nf.Dialog,
-            root.nf.Client,
-            root.nf.ControllerService,
-            root.nf.ControllerServices,
-            root.nf.UniversalCapture,
-            root.nf.CustomUi);
-    }
-}(this, function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerService, nfControllerServices, nfUniversalCapture, nfCustomUi) {
-    'use strict';
-
-    var nfSettings;
-
-    var config = {
-        edit: 'edit',
-        readOnly: 'read-only',
-        urls: {
-            api: '../nifi-api'
-        }
-    };
-
-    // load the controller services
-    var controllerServicesUri = config.urls.api + '/flow/controller/controller-services';
-
-    /**
-     * Gets the controller services table.
+    /*
+     * 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
      *
-     * @returns {*|jQuery|HTMLElement}
-     */
-    var getControllerServicesTable = function () {
-        return $('#controller-services-table');
-    };
-
-    /**
-     * Handle any expected reporting task configuration errors.
+     *     http://www.apache.org/licenses/LICENSE-2.0
      *
-     * @argument {object} xhr       The XmlHttpRequest
-     * @argument {string} status    The status of the request
-     * @argument {string} error     The error
+     * 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.
      */
-    var handleReportingTaskConfigurationError = function (xhr, status, error) {
-        if (xhr.status === 400) {
-            var errors = xhr.responseText.split('\n');
-
-            var content;
-            if (errors.length === 1) {
-                content = $('<span></span>').text(errors[0]);
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.ControllerService',
+                  'nf.ControllerServices',
+                  'nf.UniversalCapture',
+                  'nf.CustomUi'],
+              function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerService, nfControllerServices, nfUniversalCapture, nfCustomUi) {
+                  return (nf.ReportingTask = factory($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerService, nfControllerServices, nfUniversalCapture, nfCustomUi));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ReportingTask =
+              factory(require('jquery'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.ControllerService'),
+                  require('nf.ControllerServices'),
+                  require('nf.UniversalCapture'),
+                  require('nf.CustomUi')));
+      } else {
+          nf.ReportingTask = factory(root.$,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.ControllerService,
+              root.nf.ControllerServices,
+              root.nf.UniversalCapture,
+              root.nf.CustomUi);
+      }
+  }(this, function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerService, nfControllerServices, nfUniversalCapture, nfCustomUi) {
+      'use strict';
+  
+      var nfSettings;
+    
+        var config = {
+            edit: 'edit',
+          readOnly: 'read-only',
+          urls: {
+              api: '../nifi-api'
+          }
+        };
+    
+      // load the controller services
+      var controllerServicesUri = config.urls.api + '/flow/controller/controller-services';
+    
+        /**
+         * Gets the controller services table.
+         *
+         * @returns {*|jQuery|HTMLElement}
+         */
+        var getControllerServicesTable = function () {
+            return $('#controller-services-table');
+        };
+    
+        /**
+         * Handle any expected reporting task configuration errors.
+         *
+         * @argument {object} xhr       The XmlHttpRequest
+         * @argument {string} status    The status of the request
+         * @argument {string} error     The error
+         */
+        var handleReportingTaskConfigurationError = function (xhr, status, error) {
+            if (xhr.status === 400) {
+                var errors = xhr.responseText.split('\n');
+    
+                var content;
+                if (errors.length === 1) {
+                    content = $('<span></span>').text(errors[0]);
+                } else {
+                  content = nfCommon.formatUnorderedList(errors);
+                }
+    
+              nfDialog.showOkDialog({
+                    dialogContent: content,
+                  headerText: nf._.msg('nf-reporting-task.ReportingTask')
+                });
             } else {
-                content = nfCommon.formatUnorderedList(errors);
+              nfErrorHandler.handleAjaxError(xhr, status, error);
             }
-
-            nfDialog.showOkDialog({
-                dialogContent: content,
-                headerText: 'Reporting Task'
-            });
-        } else {
-            nfErrorHandler.handleAjaxError(xhr, status, error);
-        }
-    };
-
-    /**
-     * Determines whether the user has made any changes to the reporting task configuration
-     * that needs to be saved.
-     */
-    var isSaveRequired = function () {
-        var entity = $('#reporting-task-configuration').data('reportingTaskDetails');
-
-        // determine if any reporting task settings have changed
-
-        if ($('#reporting-task-name').val() !== entity.component['name']) {
-            return true;
-        }
-        if ($('#reporting-task-comments').val() !== entity.component['comments']) {
-            return true;
-        }
-        if ($('#reporting-task-enabled').hasClass('checkbox-checked') && entity.component['state'] === 'DISABLED') {
-            return true;
-        } else if ($('#reporting-task-enabled').hasClass('checkbox-unchecked') && (entity.component['state'] === 'RUNNING' || entity.component['state'] === 'STOPPED')) {
-            return true;
-        }
-
-        // consider the scheduling strategy
-        var schedulingStrategy = $('#reporting-task-scheduling-strategy-combo').combo('getSelectedOption').value;
-        if (schedulingStrategy !== (entity.component['schedulingStrategy'] + '')) {
-            return true;
-        }
-
-        // get the appropriate scheduling period field
-        var schedulingPeriod;
-        if (schedulingStrategy === 'CRON_DRIVEN') {
-            schedulingPeriod = $('#reporting-task-cron-driven-scheduling-period');
-        } else {
-            schedulingPeriod = $('#reporting-task-timer-driven-scheduling-period');
-        }
-
-        // check the scheduling period
-        if (nfCommon.isDefinedAndNotNull(schedulingPeriod) && schedulingPeriod.val() !== (entity.component['schedulingPeriod'] + '')) {
-            return true;
-        }
-
-        // defer to the properties
-        return $('#reporting-task-properties').propertytable('isSaveRequired');
-    };
-
-    /**
-     * Marshals the data that will be used to update the reporting task's configuration.
-     */
-    var marshalDetails = function () {
-        // properties
-        var properties = $('#reporting-task-properties').propertytable('marshalProperties');
-
-        // get the scheduling strategy
-        var schedulingStrategy = $('#reporting-task-scheduling-strategy-combo').combo('getSelectedOption').value;
-
-        // get the appropriate scheduling period field
-        var schedulingPeriod;
-        if (schedulingStrategy === 'CRON_DRIVEN') {
-            schedulingPeriod = $('#reporting-task-cron-driven-scheduling-period');
-        } else {
-            schedulingPeriod = $('#reporting-task-timer-driven-scheduling-period');
-        }
-
-        // create the reporting task dto
-        var reportingTaskDto = {};
-        reportingTaskDto['id'] = $('#reporting-task-id').text();
-        reportingTaskDto['name'] = $('#reporting-task-name').val();
-        reportingTaskDto['schedulingStrategy'] = schedulingStrategy;
-        reportingTaskDto['schedulingPeriod'] = schedulingPeriod.val();
-        reportingTaskDto['comments'] = $('#reporting-task-comments').val();
-
-        // mark the processor disabled if appropriate
-        if ($('#reporting-task-enabled').hasClass('checkbox-unchecked')) {
-            reportingTaskDto['state'] = 'DISABLED';
-        } else if ($('#reporting-task-enabled').hasClass('checkbox-checked')) {
-            reportingTaskDto['state'] = 'STOPPED';
-        }
-
-        // set the properties
-        if ($.isEmptyObject(properties) === false) {
-            reportingTaskDto['properties'] = properties;
-        }
-
-        // create the reporting task entity
-        var reportingTaskEntity = {};
-        reportingTaskEntity['component'] = reportingTaskDto;
-
-        // return the marshaled details
-        return reportingTaskEntity;
-    };
-
-    /**
-     * Validates the specified details.
-     *
-     * @argument {object} details       The details to validate
-     */
-    var validateDetails = function (details) {
-        var errors = [];
-        var reportingTask = details['component'];
-
-        if (nfCommon.isBlank(reportingTask['schedulingPeriod'])) {
-            errors.push('Run schedule must be specified');
-        }
-
-        if (errors.length > 0) {
-            nfDialog.showOkDialog({
-                dialogContent: nfCommon.formatUnorderedList(errors),
-                headerText: 'Reporting Task'
-            });
-            return false;
-        } else {
-            return true;
-        }
-    };
-
-    /**
-     * Renders the specified reporting task.
-     *
-     * @param {object} reportingTask
-     */
-    var renderReportingTask = function (reportingTaskEntity) {
-        // get the table and update the row accordingly
-        var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
-        var reportingTaskData = reportingTaskGrid.getData();
-        var currentReportingTask = reportingTaskData.getItemById(reportingTaskEntity.id);
-        reportingTaskData.updateItem(reportingTaskEntity.id, $.extend({
-            bulletins: currentReportingTask.bulletins
-        }, reportingTaskEntity));
-    };
-
-    /**
-     *
-     * @param {object} reportingTaskEntity
-     * @param {boolean} running
-     */
-    var setRunning = function (reportingTaskEntity, running) {
-        var entity = {
-            'revision': nfClient.getRevision(reportingTaskEntity),
-            'component': {
-                'id': reportingTaskEntity.id,
-                'state': running === true ? 'RUNNING' : 'STOPPED'
+        };
+    
+        /**
+         * Determines whether the user has made any changes to the reporting task configuration
+         * that needs to be saved.
+         */
+        var isSaveRequired = function () {
+            var entity = $('#reporting-task-configuration').data('reportingTaskDetails');
+    
+            // determine if any reporting task settings have changed
+    
+            if ($('#reporting-task-name').val() !== entity.component['name']) {
+                return true;
+            }
+            if ($('#reporting-task-comments').val() !== entity.component['comments']) {
+                return true;
+            }
+            if ($('#reporting-task-enabled').hasClass('checkbox-checked') && entity.component['state'] === 'DISABLED') {
+                return true;
+            } else if ($('#reporting-task-enabled').hasClass('checkbox-unchecked') && (entity.component['state'] === 'RUNNING' || entity.component['state'] === 'STOPPED')) {
+                return true;
+            }
+    
+            // consider the scheduling strategy
+            var schedulingStrategy = $('#reporting-task-scheduling-strategy-combo').combo('getSelectedOption').value;
+            if (schedulingStrategy !== (entity.component['schedulingStrategy'] + '')) {
+                return true;
+            }
+    
+            // get the appropriate scheduling period field
+            var schedulingPeriod;
+            if (schedulingStrategy === 'CRON_DRIVEN') {
+                schedulingPeriod = $('#reporting-task-cron-driven-scheduling-period');
+            } else {
+                schedulingPeriod = $('#reporting-task-timer-driven-scheduling-period');
+            }
+    
+            // check the scheduling period
+          if (nfCommon.isDefinedAndNotNull(schedulingPeriod) && schedulingPeriod.val() !== (entity.component['schedulingPeriod'] + '')) {
+                return true;
             }
+    
+            // defer to the properties
+            return $('#reporting-task-properties').propertytable('isSaveRequired');
         };
-
-        return $.ajax({
-            type: 'PUT',
-            url: reportingTaskEntity.uri,
-            data: JSON.stringify(entity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).done(function (response) {
-            // update the task
-            renderReportingTask(response);
-            nfControllerService.reloadReferencedServices(getControllerServicesTable(), response.component);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Goes to a service configuration from the property table.
-     */
-    var goToServiceFromProperty = function () {
-        return $.Deferred(function (deferred) {
-            // close all fields currently being edited
-            $('#reporting-task-properties').propertytable('saveRow');
-
-            // determine if changes have been made
-            if (isSaveRequired()) {
-                // see if those changes should be saved
-                nfDialog.showYesNoDialog({
-                    headerText: 'Save',
-                    dialogContent: 'Save changes before going to this Controller Service?',
-                    noHandler: function () {
-                        deferred.resolve();
-                    },
-                    yesHandler: function () {
-                        var reportingTask = $('#reporting-task-configuration').data('reportingTaskDetails');
-                        saveReportingTask(reportingTask).done(function () {
-                            deferred.resolve();
-                        }).fail(function () {
-                            deferred.reject();
-                        });
-                    }
+    
+        /**
+         * Marshals the data that will be used to update the reporting task's configuration.
+         */
+        var marshalDetails = function () {
+            // properties
+            var properties = $('#reporting-task-properties').propertytable('marshalProperties');
+    
+            // get the scheduling strategy
+            var schedulingStrategy = $('#reporting-task-scheduling-strategy-combo').combo('getSelectedOption').value;
+    
+            // get the appropriate scheduling period field
+            var schedulingPeriod;
+            if (schedulingStrategy === 'CRON_DRIVEN') {
+                schedulingPeriod = $('#reporting-task-cron-driven-scheduling-period');
+            } else {
+                schedulingPeriod = $('#reporting-task-timer-driven-scheduling-period');
+            }
+    
+            // create the reporting task dto
+            var reportingTaskDto = {};
+            reportingTaskDto['id'] = $('#reporting-task-id').text();
+            reportingTaskDto['name'] = $('#reporting-task-name').val();
+            reportingTaskDto['schedulingStrategy'] = schedulingStrategy;
+            reportingTaskDto['schedulingPeriod'] = schedulingPeriod.val();
+            reportingTaskDto['comments'] = $('#reporting-task-comments').val();
+    
+            // mark the processor disabled if appropriate
+            if ($('#reporting-task-enabled').hasClass('checkbox-unchecked')) {
+                reportingTaskDto['state'] = 'DISABLED';
+            } else if ($('#reporting-task-enabled').hasClass('checkbox-checked')) {
+                reportingTaskDto['state'] = 'STOPPED';
+            }
+    
+            // set the properties
+            if ($.isEmptyObject(properties) === false) {
+                reportingTaskDto['properties'] = properties;
+            }
+    
+            // create the reporting task entity
+            var reportingTaskEntity = {};
+            reportingTaskEntity['component'] = reportingTaskDto;
+    
+            // return the marshaled details
+            return reportingTaskEntity;
+        };
+    
+        /**
+         * Validates the specified details.
+         *
+         * @argument {object} details       The details to validate
+         */
+        var validateDetails = function (details) {
+            var errors = [];
+            var reportingTask = details['component'];
+    
+          if (nfCommon.isBlank(reportingTask['schedulingPeriod'])) {
+              errors.push(nf._.msg('nf-reporting-task.RunScheduleMustBeSpecified'));
+            }
+    
+            if (errors.length > 0) {
+              nfDialog.showOkDialog({
+                  dialogContent: nfCommon.formatUnorderedList(errors),
+                  headerText: nf._.msg('nf-reporting-task.ReportingTask')
                 });
+                return false;
             } else {
-                deferred.resolve();
+                return true;
             }
-        }).promise();
-    };
-
-    /**
-     * Saves the specified reporting task.
-     *
-     * @param {type} reportingTask
-     */
-    var saveReportingTask = function (reportingTaskEntity) {
-        // marshal the settings and properties and update the reporting task
-        var updatedReportingTask = marshalDetails();
-
-        // ensure details are valid as far as we can tell
-        if (validateDetails(updatedReportingTask)) {
-            updatedReportingTask['revision'] = nfClient.getRevision(reportingTaskEntity);
-
-            // update the selected component
+        };
+    
+        /**
+         * Renders the specified reporting task.
+         *
+         * @param {object} reportingTask
+         */
+        var renderReportingTask = function (reportingTaskEntity) {
+            // get the table and update the row accordingly
+            var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
+            var reportingTaskData = reportingTaskGrid.getData();
+            var currentReportingTask = reportingTaskData.getItemById(reportingTaskEntity.id);
+            reportingTaskData.updateItem(reportingTaskEntity.id, $.extend({
+                bulletins: currentReportingTask.bulletins
+            }, reportingTaskEntity));
+        };
+    
+        /**
+         *
+         * @param {object} reportingTaskEntity
+         * @param {boolean} running
+         */
+        var setRunning = function (reportingTaskEntity, running) {
+            var entity = {
+              'revision': nfClient.getRevision(reportingTaskEntity),
+                'component': {
+                    'id': reportingTaskEntity.id,
+                    'state': running === true ? 'RUNNING' : 'STOPPED'
+                }
+            };
+    
             return $.ajax({
                 type: 'PUT',
-                data: JSON.stringify(updatedReportingTask),
                 url: reportingTaskEntity.uri,
+                data: JSON.stringify(entity),
                 dataType: 'json',
                 contentType: 'application/json'
             }).done(function (response) {
-                // update the reporting task
+                // update the task
                 renderReportingTask(response);
-            }).fail(handleReportingTaskConfigurationError);
-        } else {
+              nfControllerService.reloadReferencedServices(getControllerServicesTable(), response.component);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Goes to a service configuration from the property table.
+         */
+        var goToServiceFromProperty = function () {
             return $.Deferred(function (deferred) {
-                deferred.reject();
+                // close all fields currently being edited
+                $('#reporting-task-properties').propertytable('saveRow');
+    
+                // determine if changes have been made
+                if (isSaveRequired()) {
+                    // see if those changes should be saved
+                  nfDialog.showYesNoDialog({
+                      headerText: nf._.msg('nf-reporting-task.Save'),
+                      dialogContent: nf._.msg('nf-reporting-task.Message1'),
+                        noHandler: function () {
+                            deferred.resolve();
+                        },
+                        yesHandler: function () {
+                            var reportingTask = $('#reporting-task-configuration').data('reportingTaskDetails');
+                            saveReportingTask(reportingTask).done(function () {
+                                deferred.resolve();
+                            }).fail(function () {
+                                deferred.reject();
+                            });
+                        }
+                    });
+                } else {
+                    deferred.resolve();
+                }
             }).promise();
-        }
-    };
-
-    /**
-     * Gets a property descriptor for the controller service currently being configured.
-     *
-     * @param {type} propertyName
-     */
-    var getReportingTaskPropertyDescriptor = function (propertyName) {
-        var details = $('#reporting-task-configuration').data('reportingTaskDetails');
-        return $.ajax({
-            type: 'GET',
-            url: details.uri + '/descriptors',
-            data: {
-                propertyName: propertyName
-            },
-            dataType: 'json'
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    var nfReportingTask = {
+        };
+    
         /**
-         * Initializes the reporting task configuration dialog.
+         * Saves the specified reporting task.
          *
-         * @param nfSettingsRef   The nfSettings module.
+         * @param {type} reportingTask
          */
-        init: function (nfSettingsRef) {
-            nfSettings = nfSettingsRef;
-
-            // initialize the configuration dialog tabs
-            $('#reporting-task-configuration-tabs').tabbs({
-                tabStyle: 'tab',
-                selectedTabStyle: 'selected-tab',
-                scrollableTabContentStyle: 'scrollable',
-                tabs: [{
-                    name: 'Settings',
-                    tabContentId: 'reporting-task-standard-settings-tab-content'
-                }, {
-                    name: 'Properties',
-                    tabContentId: 'reporting-task-properties-tab-content'
-                }, {
-                    name: 'Comments',
-                    tabContentId: 'reporting-task-comments-tab-content'
-                }],
-                select: function () {
-                    // remove all property detail dialogs
-                    nfUniversalCapture.removeAllPropertyDetailDialogs();
-
-                    // update the property table size in case this is the first time its rendered
-                    if ($(this).text() === 'Properties') {
-                        $('#reporting-task-properties').propertytable('resetTableSize');
-                    }
-
-                    // close all fields currently being edited
-                    $('#reporting-task-properties').propertytable('saveRow');
-                }
-            });
-
-            // initialize the reporting task configuration dialog
-            $('#reporting-task-configuration').data('mode', config.edit).modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: 'Configure Reporting Task',
-                handler: {
-                    close: function () {
-                        // cancel any active edits
-                        $('#reporting-task-properties').propertytable('cancelEdit');
-
-                        // clear the tables
-                        $('#reporting-task-properties').propertytable('clear');
-
-                        // clear the comments
-                        nfCommon.clearField('read-only-reporting-task-comments');
-
-                        // removed the cached reporting task details
-                        $('#reporting-task-configuration').removeData('reportingTaskDetails');
-                    },
-                    open: function () {
-                        nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                    }
-                }
-            });
-
-            // initialize the property table
-            $('#reporting-task-properties').propertytable({
-                readOnly: false,
-                supportsGoTo: true,
-                dialogContainer: '#new-reporting-task-property-container',
-                descriptorDeferred: getReportingTaskPropertyDescriptor,
-                controllerServiceCreatedDeferred: function (response) {
-                    return nfControllerServices.loadControllerServices(controllerServicesUri, $('#controller-services-table'));
-                },
-                goToServiceDeferred: goToServiceFromProperty
-            });
-        },
-
+        var saveReportingTask = function (reportingTaskEntity) {
+            // marshal the settings and properties and update the reporting task
+            var updatedReportingTask = marshalDetails();
+    
+            // ensure details are valid as far as we can tell
+            if (validateDetails(updatedReportingTask)) {
+              updatedReportingTask['revision'] = nfClient.getRevision(reportingTaskEntity);
+    
+                // update the selected component
+                return $.ajax({
+                    type: 'PUT',
+                    data: JSON.stringify(updatedReportingTask),
+                    url: reportingTaskEntity.uri,
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // update the reporting task
+                    renderReportingTask(response);
+                }).fail(handleReportingTaskConfigurationError);
+            } else {
+                return $.Deferred(function (deferred) {
+                    deferred.reject();
+                }).promise();
+            }
+        };
+    
         /**
-         * Shows the configuration dialog for the specified reporting task.
+         * Gets a property descriptor for the controller service currently being configured.
          *
-         * @argument {reportingTask} reportingTaskEntity      The reporting task
+         * @param {type} propertyName
          */
-        showConfiguration: function (reportingTaskEntity) {
-            var reportingTaskDialog = $('#reporting-task-configuration');
-            if (reportingTaskDialog.data('mode') === config.readOnly) {
-                // update the visibility
-                $('#reporting-task-configuration .reporting-task-read-only').hide();
-                $('#reporting-task-configuration .reporting-task-editable').show();
-
-                // 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) {
-                        return nfControllerServices.loadControllerServices(controllerServicesUri, $('#controller-services-table'));
-                    },
-                    goToServiceDeferred: goToServiceFromProperty
-                });
-
-                // update the mode
-                reportingTaskDialog.data('mode', config.edit);
-            }
-
-            // reload the task in case the property descriptors have changed
-            var reloadTask = $.ajax({
-                type: 'GET',
-                url: reportingTaskEntity.uri,
-                dataType: 'json'
-            });
-
-            // get the reporting task history
-            var loadHistory = $.ajax({
+        var getReportingTaskPropertyDescriptor = function (propertyName) {
+            var details = $('#reporting-task-configuration').data('reportingTaskDetails');
+            return $.ajax({
                 type: 'GET',
-                url: '../nifi-api/flow/history/components/' + encodeURIComponent(reportingTaskEntity.id),
+                url: details.uri + '/descriptors',
+                data: {
+                    propertyName: propertyName
+                },
                 dataType: 'json'
-            });
-
-            // once everything is loaded, show the dialog
-            $.when(reloadTask, loadHistory).done(function (taskResponse, historyResponse) {
-                // get the updated reporting task
-                reportingTaskEntity = taskResponse[0];
-                var reportingTask = reportingTaskEntity.component;
-
-                // get the reporting task history
-                var reportingTaskHistory = historyResponse[0].componentHistory;
-
-                // record the reporting task details
-                $('#reporting-task-configuration').data('reportingTaskDetails', reportingTaskEntity);
-
-                // determine if the enabled checkbox is checked or not
-                var reportingTaskEnableStyle = 'checkbox-checked';
-                if (reportingTask['state'] === 'DISABLED') {
-                    reportingTaskEnableStyle = 'checkbox-unchecked';
-                }
-
-                // populate the reporting task settings
-                nfCommon.populateField('reporting-task-id', reportingTask['id']);
-                nfCommon.populateField('reporting-task-type', nfCommon.substringAfterLast(reportingTask['type'], '.'));
-                $('#reporting-task-name').val(reportingTask['name']);
-                $('#reporting-task-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(reportingTaskEnableStyle);
-                $('#reporting-task-comments').val(reportingTask['comments']);
-
-                // get the default schedule period
-                var defaultSchedulingPeriod = reportingTask['defaultSchedulingPeriod'];
-                var cronSchedulingPeriod = $('#reporting-task-cron-driven-scheduling-period').val(defaultSchedulingPeriod['CRON_DRIVEN']);
-                var timerSchedulingPeriod = $('#reporting-task-timer-driven-scheduling-period').val(defaultSchedulingPeriod['TIMER_DRIVEN']);
-
-                // set the scheduling period as appropriate
-                if (reportingTask['schedulingStrategy'] === 'CRON_DRIVEN') {
-                    cronSchedulingPeriod.val(reportingTask['schedulingPeriod']);
-                } else {
-                    timerSchedulingPeriod.val(reportingTask['schedulingPeriod']);
-                }
-
-                // initialize the scheduling strategy
-                $('#reporting-task-scheduling-strategy-combo').combo({
-                    options: [{
-                        text: 'Timer driven',
-                        value: 'TIMER_DRIVEN',
-                        description: 'Reporting task will be scheduled to run on an interval defined by the run schedule.'
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+      var nfReportingTask = {
+            /**
+             * Initializes the reporting task configuration dialog.
+           *
+           * @param nfSettingsRef   The nfSettings module.
+             */
+          init: function (nfSettingsRef) {
+              nfSettings = nfSettingsRef;
+  
+                // initialize the configuration dialog tabs
+                $('#reporting-task-configuration-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                      name: nf._.msg('nf-reporting-task.Settings'),
+                        tabContentId: 'reporting-task-standard-settings-tab-content'
+                    }, {
+                      name: nf._.msg('nf-reporting-task.Properties'),
+                        tabContentId: 'reporting-task-properties-tab-content'
                     }, {
-                        text: 'CRON driven',
-                        value: 'CRON_DRIVEN',
-                        description: 'Reporting task will be scheduled to run on at specific times based on the specified CRON string.'
+                      name: nf._.msg('nf-reporting-task.Comments'),
+                        tabContentId: 'reporting-task-comments-tab-content'
                     }],
-                    selectedOption: {
-                        value: reportingTask['schedulingStrategy']
-                    },
-                    select: function (selectedOption) {
-                        if (selectedOption.value === 'CRON_DRIVEN') {
-                            timerSchedulingPeriod.hide();
-                            cronSchedulingPeriod.show();
-                        } else {
-                            timerSchedulingPeriod.show();
-                            cronSchedulingPeriod.hide();
+                    select: function () {
+                        // remove all property detail dialogs
+                      nfUniversalCapture.removeAllPropertyDetailDialogs();
+    
+                        // update the property table size in case this is the first time its rendered
+                        if ($(this).text() === 'Properties') {
+                            $('#reporting-task-properties').propertytable('resetTableSize');
                         }
+    
+                        // close all fields currently being edited
+                        $('#reporting-task-properties').propertytable('saveRow');
                     }
                 });
-
-                var buttons = [{
-                    buttonText: 'Apply',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
+    
+                // initialize the reporting task configuration dialog
+                $('#reporting-task-configuration').data('mode', config.edit).modal({
+                    scrollableContentStyle: 'scrollable',
+                  headerText: nf._.msg('nf-reporting-task.ConfigureReportingTask'),
                     handler: {
-                        click: function () {
-                            // close all fields currently being edited
-                            $('#reporting-task-properties').propertytable('saveRow');
-
-                            // save the reporting task
-                            saveReportingTask(reportingTaskEntity).done(function (response) {
-                                // reload the reporting task
-                                nfControllerService.reloadReferencedServices(getControllerServicesTable(), response.component);
-
-                                // close the details panel
-                                $('#reporting-task-configuration').modal('hide');
-                            });
+                        close: function () {
+                            // cancel any active edits
+                            $('#reporting-task-properties').propertytable('cancelEdit');
+    
+                            // clear the tables
+                            $('#reporting-task-properties').propertytable('clear');
+    
+                            // clear the comments
+                          nfCommon.clearField('read-only-reporting-task-comments');
+    
+                            // removed the cached reporting task details
+                            $('#reporting-task-configuration').removeData('reportingTaskDetails');
+                        },
+                        open: function () {
+                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                         }
                     }
-                },
-                    {
-                        buttonText: 'Cancel',
-                        color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
+                });
+    
+                // initialize the property table
+                $('#reporting-task-properties').propertytable({
+                    readOnly: false,
+                  supportsGoTo: true,
+                    dialogContainer: '#new-reporting-task-property-container',
+                    descriptorDeferred: getReportingTaskPropertyDescriptor,
+                  controllerServiceCreatedDeferred: function (response) {
+                      return nfControllerServices.loadControllerServices(controllerServicesUri, $('#controller-services-table'));
+                  },
+                    goToServiceDeferred: goToServiceFromProperty
+                });
+            },
+    
+            /**
+             * Shows the configuration dialog for the specified reporting task.
+             *
+             * @argument {reportingTask} reportingTaskEntity      The reporting task
+             */
+            showConfiguration: function (reportingTaskEntity) {
+                var reportingTaskDialog = $('#reporting-task-configuration');
+                if (reportingTaskDialog.data('mode') === config.readOnly) {
+                    // update the visibility
+                    $('#reporting-task-configuration .reporting-task-read-only').hide();
+                    $('#reporting-task-configuration .reporting-task-editable').show();
+    
+                    // 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) {
+                          return nfControllerServices.loadControllerServices(controllerServicesUri, $('#controller-services-table'));
+                      },
+                        goToServiceDeferred: goToServiceFromProperty
+                    });
+    
+                    // update the mode
+                    reportingTaskDialog.data('mode', config.edit);
+                }
+    
+                // reload the task in case the property descriptors have changed
+                var reloadTask = $.ajax({
+                    type: 'GET',
+                    url: reportingTaskEntity.uri,
+                    dataType: 'json'
+                });
+    
+                // get the reporting task history
+                var loadHistory = $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/flow/history/components/' + encodeURIComponent(reportingTaskEntity.id),
+                    dataType: 'json'
+                });
+    
+                // once everything is loaded, show the dialog
+                $.when(reloadTask, loadHistory).done(function (taskResponse, historyResponse) {
+                    // get the updated reporting task
+                    reportingTaskEntity = taskResponse[0];
+                    var reportingTask = reportingTaskEntity.component;
+    
+                    // get the reporting task history
+                    var reportingTaskHistory = historyResponse[0].componentHistory;
+    
+                    // record the reporting task details
+                    $('#reporting-task-configuration').data('reportingTaskDetails', reportingTaskEntity);
+    
+                    // determine if the enabled checkbox is checked or not
+                    var reportingTaskEnableStyle = 'checkbox-checked';
+                    if (reportingTask['state'] === 'DISABLED') {
+                        reportingTaskEnableStyle = 'checkbox-unchecked';
+                    }
+    
+                    // populate the reporting task settings
+                  nfCommon.populateField('reporting-task-id', reportingTask['id']);
+                  nfCommon.populateField('reporting-task-type', nfCommon.substringAfterLast(reportingTask['type'], '.'));
+                    $('#reporting-task-name').val(reportingTask['name']);
+                    $('#reporting-task-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(reportingTaskEnableStyle);
+                    $('#reporting-task-comments').val(reportingTask['comments']);
+    
+                    // get the default schedule period
+                    var defaultSchedulingPeriod = reportingTask['defaultSchedulingPeriod'];
+                    var cronSchedulingPeriod = $('#reporting-task-cron-driven-scheduling-period').val(defaultSchedulingPeriod['CRON_DRIVEN']);
+                    var timerSchedulingPeriod = $('#reporting-task-timer-driven-scheduling-period').val(defaultSchedulingPeriod['TIMER_DRIVEN']);
+    
+                    // set the scheduling period as appropriate
+                    if (reportingTask['schedulingStrategy'] === 'CRON_DRIVEN') {
+                        cronSchedulingPeriod.val(reportingTask['schedulingPeriod']);
+                    } else {
+                        timerSchedulingPeriod.val(reportingTask['schedulingPeriod']);
+                    }
+    
+                    // initialize the scheduling strategy
+                    $('#reporting-task-scheduling-strategy-combo').combo({
+                        options: [{
+                          text: nf._.msg('nf-reporting-task.TimerDriven'),
+                            value: 'TIMER_DRIVEN',
+                          description: nf._.msg('nf-reporting-task.Message2')
+                        }, {
+                          text: nf._.msg('nf-reporting-task.CRONDriven'),
+                            value: 'CRON_DRIVEN',
+                          description: nf._.msg('nf-reporting-task.Message3')
+                        }],
+                        selectedOption: {
+                            value: reportingTask['schedulingStrategy']
                         },
-                        handler: {
-                            click: function () {
-                                $('#reporting-task-configuration').modal('hide');
+                        select: function (selectedOption) {
+                            if (selectedOption.value === 'CRON_DRIVEN') {
+                                timerSchedulingPeriod.hide();
+                                cronSchedulingPeriod.show();
+                            } else {
+                                timerSchedulingPeriod.show();
+                                cronSchedulingPeriod.hide();
                             }
                         }
-                    }];
-
-                // determine if we should show the advanced button
-                if (nfCommon.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') {
-                    buttons.push({
-                        buttonText: 'Advanced',
-                        clazz: 'fa fa-cog button-icon',
+                    });
+    
+                    var buttons = [{
+                      buttonText: nf._.msg('nf-reporting-task.Apply'),
                         color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
                         },
                         handler: {
                             click: function () {
-                                var openCustomUi = function () {
-                                    // reset state and close the dialog manually to avoid hiding the faded background
-                                    $('#reporting-task-configuration').modal('hide');
-
-                                    // close the settings dialog since the custom ui is also opened in the shell
-                                    $('#shell-close-button').click();
-
-                                    // show the custom ui
-                                    nfCustomUi.showCustomUi(reportingTaskEntity, reportingTask.customUiUrl, true).done(function () {
-                                        // once the custom ui is closed, reload the reporting task
-                                        nfReportingTask.reload(reportingTaskEntity.id).done(function (response) {
-                                            nfControllerService.reloadReferencedServices(getControllerServicesTable(), response.reportingTask);
-                                        });
-
-                                        // show the settings
-                                        nfSettings.showSettings();
-                                    });
-                                };
-
                                 // close all fields currently being edited
                                 $('#reporting-task-properties').propertytable('saveRow');
-
-                                // determine if changes have been made
-                                if (isSaveRequired()) {
-                                    // see if those changes should be saved
-                                    nfDialog.showYesNoDialog({
-                                        headerText: 'Save',
-                                        dialogContent: 'Save changes before opening the advanced configuration?',
-                                        noHandler: openCustomUi,
-                                        yesHandler: function () {
-                                            saveReportingTask(reportingTaskEntity).done(function () {
-                                                // open the custom ui
-                                                openCustomUi();
+    
+                                // save the reporting task
+                                saveReportingTask(reportingTaskEntity).done(function (response) {
+                                    // reload the reporting task
+                                  nfControllerService.reloadReferencedServices(getControllerServicesTable(), response.component);
+    
+                                    // close the details panel
+                                    $('#reporting-task-configuration').modal('hide');
+                                });
+                            }
+                        }
+                    },
+                        {
+                          buttonText: nf._.msg('nf-reporting-task.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    $('#reporting-task-configuration').modal('hide');
+                                }
+                            }
+                        }];
+    
+                    // determine if we should show the advanced button
+                  if (nfCommon.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') {
+                        buttons.push({
+                          buttonText: nf._.msg('nf-reporting-task.Advanced'),
+                            clazz: 'fa fa-cog button-icon',
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    var openCustomUi = function () {
+                                        // reset state and close the dialog manually to avoid hiding the faded background
+                                        $('#reporting-task-configuration').modal('hide');
+    
+                                        // close the settings dialog since the custom ui is also opened in the shell
+                                        $('#shell-close-button').click();
+    
+                                        // show the custom ui
+                                      nfCustomUi.showCustomUi(reportingTaskEntity, reportingTask.customUiUrl, true).done(function () {
+                                            // once the custom ui is closed, reload the reporting task
+                                          nfReportingTask.reload(reportingTaskEntity.id).done(function (response) {
+                                              nfControllerService.reloadReferencedServices(getControllerServicesTable(), response.reportingTask);
                                             });
-                                        }
-                                    });
-                                } else {
-                                    // if there were no changes, simply open the custom ui
-                                    openCustomUi();
+    
+                                            // show the settings
+                                          nfSettings.showSettings();
+                                        });
+                                    };
+    
+                                    // close all fields currently being edited
+                                    $('#reporting-task-properties').propertytable('saveRow');
+    
+                                    // determine if changes have been made
+                                    if (isSaveRequired()) {
+                                        // see if those changes should be saved
+                                      nfDialog.showYesNoDialog({
+                                          headerText: nf._.msg('nf-reporting-task.Save'),
+                                          dialogContent: nf._.msg('nf-reporting-task.Message4'),
+                                            noHandler: openCustomUi,
+                                            yesHandler: function () {
+                                                saveReportingTask(reportingTaskEntity).done(function () {
+                                                    // open the custom ui
+                                                    openCustomUi();
+                                                });
+                                            }
+                                        });
+                                    } else {
+                                        // if there were no changes, simply open the custom ui
+                                        openCustomUi();
+                                    }
                                 }
                             }
-                        }
+                        });
+                    }
+    
+                    // set the button model
+                    $('#reporting-task-configuration').modal('setButtonModel', buttons);
+    
+                    // load the property table
+                    $('#reporting-task-properties')
+                        .propertytable('setGroupId', reportingTask.parentGroupId)
+                        .propertytable('loadProperties', reportingTask.properties, reportingTask.descriptors, reportingTaskHistory.propertyHistory);
+    
+                    // show the details
+                    $('#reporting-task-configuration').modal('show');
+    
+                    $('#reporting-task-properties').propertytable('resetTableSize');
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows the reporting task details in a read only dialog.
+             *
+             * @param {object} reportingTaskEntity
+             */
+            showDetails: function (reportingTaskEntity) {
+                var reportingTaskDialog = $('#reporting-task-configuration');
+                if (reportingTaskDialog.data('mode') === config.edit) {
+                    // update the visibility
+                    $('#reporting-task-configuration .reporting-task-read-only').show();
+                    $('#reporting-task-configuration .reporting-task-editable').hide();
+    
+                    // initialize the property table
+                    $('#reporting-task-properties').propertytable('destroy').propertytable({
+                      supportsGoTo: true,
+                        readOnly: true
                     });
+    
+                    // update the mode
+                    reportingTaskDialog.data('mode', config.readOnly);
                 }
-
-                // set the button model
-                $('#reporting-task-configuration').modal('setButtonModel', buttons);
-
-                // load the property table
-                $('#reporting-task-properties')
-                    .propertytable('setGroupId', reportingTask.parentGroupId)
-                    .propertytable('loadProperties', reportingTask.properties, reportingTask.descriptors, reportingTaskHistory.propertyHistory);
-
-                // show the details
-                $('#reporting-task-configuration').modal('show');
-
-                $('#reporting-task-properties').propertytable('resetTableSize');
-            }).fail(nfErrorHandler.handleAjaxError);
-        },
-
-        /**
-         * Shows the reporting task details in a read only dialog.
-         *
-         * @param {object} reportingTaskEntity
-         */
-        showDetails: function (reportingTaskEntity) {
-            var reportingTaskDialog = $('#reporting-task-configuration');
-            if (reportingTaskDialog.data('mode') === config.edit) {
-                // update the visibility
-                $('#reporting-task-configuration .reporting-task-read-only').show();
-                $('#reporting-task-configuration .reporting-task-editable').hide();
-
-                // initialize the property table
-                $('#reporting-task-properties').propertytable('destroy').propertytable({
-                    supportsGoTo: true,
-                    readOnly: true
+    
+                // reload the task in case the property descriptors have changed
+                var reloadTask = $.ajax({
+                    type: 'GET',
+                    url: reportingTaskEntity.uri,
+                    dataType: 'json'
                 });
-
-                // update the mode
-                reportingTaskDialog.data('mode', config.readOnly);
-            }
-
-            // reload the task in case the property descriptors have changed
-            var reloadTask = $.ajax({
-                type: 'GET',
-                url: reportingTaskEntity.uri,
-                dataType: 'json'
-            });
-
-            // get the reporting task history
-            var loadHistory = $.ajax({
-                type: 'GET',
-                url: '../nifi-api/flow/history/components/' + encodeURIComponent(reportingTaskEntity.id),
-                dataType: 'json'
-            });
-
-            // once everything is loaded, show the dialog
-            $.when(reloadTask, loadHistory).done(function (taskResponse, historyResponse) {
-                // get the updated reporting task
-                reportingTaskEntity = taskResponse[0];
-                var reportingTask = reportingTaskEntity.component;
-
+    
                 // get the reporting task history
-                var reportingTaskHistory = historyResponse[0].componentHistory;
-
-                // populate the reporting task settings
-                nfCommon.populateField('reporting-task-id', reportingTask['id']);
-                nfCommon.populateField('reporting-task-type', nfCommon.substringAfterLast(reportingTask['type'], '.'));
-                nfCommon.populateField('read-only-reporting-task-name', reportingTask['name']);
-                nfCommon.populateField('read-only-reporting-task-comments', reportingTask['comments']);
-
-                // make the scheduling strategy human readable
-                var schedulingStrategy = reportingTask['schedulingStrategy'];
-                if (schedulingStrategy === 'CRON_DRIVEN') {
-                    schedulingStrategy = 'CRON driven';
-                } else {
-                    schedulingStrategy = "Timer driven";
-                }
-                nfCommon.populateField('read-only-reporting-task-scheduling-strategy', schedulingStrategy);
-                nfCommon.populateField('read-only-reporting-task-scheduling-period', reportingTask['schedulingPeriod']);
-
-                var buttons = [{
-                    buttonText: 'Ok',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // hide the dialog
-                            reportingTaskDialog.modal('hide');
-                        }
+                var loadHistory = $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/flow/history/components/' + encodeURIComponent(reportingTaskEntity.id),
+                    dataType: 'json'
+                });
+    
+                // once everything is loaded, show the dialog
+                $.when(reloadTask, loadHistory).done(function (taskResponse, historyResponse) {
+                    // get the updated reporting task
+                    reportingTaskEntity = taskResponse[0];
+                    var reportingTask = reportingTaskEntity.component;
+    
+                    // get the reporting task history
+                    var reportingTaskHistory = historyResponse[0].componentHistory;
+    
+                    // populate the reporting task settings
+                  nfCommon.populateField('reporting-task-id', reportingTask['id']);
+                  nfCommon.populateField('reporting-task-type', nfCommon.substringAfterLast(reportingTask['type'], '.'));
+                  nfCommon.populateField('read-only-reporting-task-name', reportingTask['name']);
+                  nfCommon.populateField('read-only-reporting-task-comments', reportingTask['comments']);
+    
+                    // make the scheduling strategy human readable
+                    var schedulingStrategy = reportingTask['schedulingStrategy'];
+                    if (schedulingStrategy === 'CRON_DRIVEN') {
+                        schedulingStrategy = 'CRON driven';
+                    } else {
+                        schedulingStrategy = "Timer driven";
                     }
-                }];
-
-                // determine if we should show the advanced button
-                if (nfCommon.isDefinedAndNotNull(nfCustomUi) && nfCommon.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') {
-                    buttons.push({
-                        buttonText: 'Advanced',
-                        clazz: 'fa fa-cog button-icon',
+                  nfCommon.populateField('read-only-reporting-task-scheduling-strategy', schedulingStrategy);
+                  nfCommon.populateField('read-only-reporting-task-scheduling-period', reportingTask['schedulingPeriod']);
+    
+                    var buttons = [{
+                      buttonText: nf._.msg('nf-reporting-task.Ok'),
                         color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
                         },
                         handler: {
                             click: function () {
-                                // reset state and close the dialog manually to avoid hiding the faded background
+                                // hide the dialog
                                 reportingTaskDialog.modal('hide');
-
-                                // close the settings dialog since the custom ui is also opened in the shell
-                                $('#shell-close-button').click();
-
-                                // show the custom ui
-                                nfCustomUi.showCustomUi(reportingTaskEntity, reportingTask.customUiUrl, false).done(function () {
-                                    nfSettings.showSettings();
-                                });
                             }
                         }
-                    });
-                }
-
-                // show the dialog
-                reportingTaskDialog.modal('setButtonModel', buttons).modal('show');
-
-                // load the property table
-                $('#reporting-task-properties').propertytable('loadProperties', reportingTask.properties, reportingTask.descriptors, reportingTaskHistory.propertyHistory);
-
-                // show the details
-                reportingTaskDialog.modal('show');
-
-                $('#reporting-task-properties').propertytable('resetTableSize');
-            });
-        },
-
-        /**
-         * Starts the specified reporting task.
-         *
-         * @param {object} reportingTaskEntity
-         */
-        start: function (reportingTaskEntity) {
-            setRunning(reportingTaskEntity, true);
-        },
-
-        /**
-         * Stops the specified reporting task.
-         *
-         * @param {object} reportingTaskEntity
-         */
-        stop: function (reportingTaskEntity) {
-            setRunning(reportingTaskEntity, false);
-        },
-
-        /**
-         * Reloads the specified reporting task.
-         *
-         * @param {string} id
-         */
-        reload: function (id) {
-            var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
-            var reportingTaskData = reportingTaskGrid.getData();
-            var reportingTaskEntity = reportingTaskData.getItemById(id);
-
-            return $.ajax({
-                type: 'GET',
-                url: reportingTaskEntity.uri,
-                dataType: 'json'
-            }).done(function (response) {
-                renderReportingTask(response);
-            }).fail(nfErrorHandler.handleAjaxError);
-        },
-
-        /**
-         * Prompts the user before attempting to delete the specified reporting task.
-         *
-         * @param {object} reportingTaskEntity
-         */
-        promptToDeleteReportingTask: function (reportingTaskEntity) {
-            // prompt for deletion
-            nfDialog.showYesNoDialog({
-                headerText: 'Delete Reporting Task',
-                dialogContent: 'Delete reporting task \'' + nfCommon.escapeHtml(reportingTaskEntity.component.name) + '\'?',
-                yesHandler: function () {
-                    nfReportingTask.remove(reportingTaskEntity);
-                }
-            });
-        },
-
-        /**
-         * Deletes the specified reporting task.
-         *
-         * @param {object} reportingTaskEntity
-         */
-        remove: function (reportingTaskEntity) {
-            // prompt for removal?
-
-            var revision = nfClient.getRevision(reportingTaskEntity);
-            $.ajax({
-                type: 'DELETE',
-                url: reportingTaskEntity.uri + '?' + $.param({
-                    version: revision.version,
-                    clientId: revision.clientId
-                }),
-                dataType: 'json'
-            }).done(function (response) {
-                // remove the task
+                    }];
+    
+                    // determine if we should show the advanced button
+                  if (nfCommon.isDefinedAndNotNull(nfCustomUi) && nfCommon.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') {
+                        buttons.push({
+                          buttonText: nf._.msg('nf-reporting-task.Advanced'),
+                            clazz: 'fa fa-cog button-icon',
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    // reset state and close the dialog manually to avoid hiding the faded background
+                                    reportingTaskDialog.modal('hide');
+    
+                                    // close the settings dialog since the custom ui is also opened in the shell
+                                    $('#shell-close-button').click();
+    
+                                    // show the custom ui
+                                  nfCustomUi.showCustomUi(reportingTaskEntity, reportingTask.customUiUrl, false).done(function () {
+                                      nfSettings.showSettings();
+                                    });
+                                }
+                            }
+                        });
+                    }
+    
+                    // show the dialog
+                    reportingTaskDialog.modal('setButtonModel', buttons).modal('show');
+    
+                    // load the property table
+                    $('#reporting-task-properties').propertytable('loadProperties', reportingTask.properties, reportingTask.descriptors, reportingTaskHistory.propertyHistory);
+    
+                    // show the details
+                    reportingTaskDialog.modal('show');
+    
+                    $('#reporting-task-properties').propertytable('resetTableSize');
+                });
+            },
+    
+            /**
+             * Starts the specified reporting task.
+             *
+             * @param {object} reportingTaskEntity
+             */
+            start: function (reportingTaskEntity) {
+                setRunning(reportingTaskEntity, true);
+            },
+    
+            /**
+             * Stops the specified reporting task.
+             *
+             * @param {object} reportingTaskEntity
+             */
+            stop: function (reportingTaskEntity) {
+                setRunning(reportingTaskEntity, false);
+            },
+    
+            /**
+             * Reloads the specified reporting task.
+             *
+             * @param {string} id
+             */
+            reload: function (id) {
                 var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
                 var reportingTaskData = reportingTaskGrid.getData();
-                reportingTaskData.deleteItem(reportingTaskEntity.id);
-            }).fail(nfErrorHandler.handleAjaxError);
-        }
-    };
-
-    return nfReportingTask;
-}));
+                var reportingTaskEntity = reportingTaskData.getItemById(id);
+    
+                return $.ajax({
+                    type: 'GET',
+                    url: reportingTaskEntity.uri,
+                    dataType: 'json'
+                }).done(function (response) {
+                    renderReportingTask(response);
+              }).fail(nfErrorHandler.handleAjaxError);
+          },
+  
+          /**
+           * Prompts the user before attempting to delete the specified reporting task.
+           *
+           * @param {object} reportingTaskEntity
+           */
+          promptToDeleteReportingTask: function (reportingTaskEntity) {
+              // prompt for deletion
+              nfDialog.showYesNoDialog({
+                  headerText: 'Delete Reporting Task',
+                  dialogContent: 'Delete reporting task \'' + nfCommon.escapeHtml(reportingTaskEntity.component.name) + '\'?',
+                  yesHandler: function () {
+                      nfReportingTask.remove(reportingTaskEntity);
+                  }
+              });
+            },
+    
+            /**
+             * Deletes the specified reporting task.
+             *
+             * @param {object} reportingTaskEntity
+             */
+            remove: function (reportingTaskEntity) {
+                // prompt for removal?
+    
+              var revision = nfClient.getRevision(reportingTaskEntity);
+                $.ajax({
+                    type: 'DELETE',
+                    url: reportingTaskEntity.uri + '?' + $.param({
+                        version: revision.version,
+                        clientId: revision.clientId
+                    }),
+                    dataType: 'json'
+                }).done(function (response) {
+                    // remove the task
+                    var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
+                    var reportingTaskData = reportingTaskGrid.getData();
+                    reportingTaskData.deleteItem(reportingTaskEntity.id);
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+    
+      return nfReportingTask;
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-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 fa7afbd9332f..1ba91ebbe88e 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
@@ -1,1312 +1,1312 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'Slick',
-                'd3',
-                'nf.Client',
-                'nf.Dialog',
-                'nf.Common',
-                'nf.CanvasUtils',
-                'nf.ControllerServices',
-                'nf.ErrorHandler',
-                'nf.ReportingTask',
-                'nf.Shell',
-                'nf.ComponentState',
-                'nf.PolicyManagement'],
-            function ($, Slick, d3, nfClient, nfDialog, nfCommon, nfCanvasUtils, nfControllerServices, nfErrorHandler, nfReportingTask, nfShell, nfComponentState, nfPolicyManagement) {
-                return (nf.Settings = factory($, Slick, d3, nfClient, nfDialog, nfCommon, nfCanvasUtils, nfControllerServices, nfErrorHandler, nfReportingTask, nfShell, nfComponentState, nfPolicyManagement));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Settings =
-            factory(require('jquery'),
-                require('Slick'),
-                require('d3'),
-                require('nf.Client'),
-                require('nf.Dialog'),
-                require('nf.Common'),
-                require('nf.CanvasUtils'),
-                require('nf.ControllerServices'),
-                require('nf.ErrorHandler'),
-                require('nf.ReportingTask'),
-                require('nf.Shell'),
-                require('nf.ComponentState'),
-                require('nf.PolicyManagement')));
-    } else {
-        nf.Settings = factory(root.$,
-            root.Slick,
-            root.d3,
-            root.nf.Client,
-            root.nf.Dialog,
-            root.nf.Common,
-            root.nf.CanvasUtils,
-            root.nf.ControllerServices,
-            root.nf.ErrorHandler,
-            root.nf.ReportingTask,
-            root.nf.Shell,
-            root.nf.ComponentState,
-            root.nf.PolicyManagement);
-    }
-}(this, function ($, Slick, d3, nfClient, nfDialog, nfCommon, nfCanvasUtils, nfControllerServices, nfErrorHandler, nfReportingTask, nfShell, nfComponentState, nfPolicyManagement) {
-    'use strict';
-
-
-    var config = {
-        urls: {
-            api: '../nifi-api',
-            controllerConfig: '../nifi-api/controller/config',
-            reportingTaskTypes: '../nifi-api/flow/reporting-task-types',
-            createReportingTask: '../nifi-api/controller/reporting-tasks',
-            reportingTasks: '../nifi-api/flow/reporting-tasks'
-        }
-    };
-
-    var gridOptions = {
-        forceFitColumns: true,
-        enableTextSelectionOnCells: true,
-        enableCellNavigation: true,
-        enableColumnReorder: false,
-        autoEdit: false,
-        multiSelect: false,
-        rowHeight: 24
-    };
-
-    /**
-     * Gets the controller services table.
+    /*
+     * 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
      *
-     * @returns {*|jQuery|HTMLElement}
-     */
-    var getControllerServicesTable = function () {
-        return $('#controller-services-table');
-    };
-
-    /**
-     * Saves the settings for the controller.
+     *     http://www.apache.org/licenses/LICENSE-2.0
      *
-     * @param version
+     * 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.
      */
-    var saveSettings = function (version) {
-        // marshal the configuration details
-        var configuration = marshalConfiguration();
-        var entity = {
-            'revision': nfClient.getRevision({
-                'revision': {
-                    'version': version
-                }
-            }),
-            'component': configuration
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'd3',
+                  'nf.Client',
+                  'nf.Dialog',
+                  'nf.Common',
+                  'nf.CanvasUtils',
+                  'nf.ControllerServices',
+                  'nf.ErrorHandler',
+                  'nf.ReportingTask',
+                  'nf.Shell',
+                  'nf.ComponentState',
+                  'nf.PolicyManagement'],
+              function ($, Slick, d3, nfClient, nfDialog, nfCommon, nfCanvasUtils, nfControllerServices, nfErrorHandler, nfReportingTask, nfShell, nfComponentState, nfPolicyManagement) {
+                  return (nf.Settings = factory($, Slick, d3, nfClient, nfDialog, nfCommon, nfCanvasUtils, nfControllerServices, nfErrorHandler, nfReportingTask, nfShell, nfComponentState, nfPolicyManagement));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.Settings =
+              factory(require('jquery'),
+                  require('Slick'),
+                  require('d3'),
+                  require('nf.Client'),
+                  require('nf.Dialog'),
+                  require('nf.Common'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ControllerServices'),
+                  require('nf.ErrorHandler'),
+                  require('nf.ReportingTask'),
+                  require('nf.Shell'),
+                  require('nf.ComponentState'),
+                  require('nf.PolicyManagement')));
+      } else {
+          nf.Settings = factory(root.$,
+              root.Slick,
+              root.d3,
+              root.nf.Client,
+              root.nf.Dialog,
+              root.nf.Common,
+              root.nf.CanvasUtils,
+              root.nf.ControllerServices,
+              root.nf.ErrorHandler,
+              root.nf.ReportingTask,
+              root.nf.Shell,
+              root.nf.ComponentState,
+              root.nf.PolicyManagement);
+      }
+  }(this, function ($, Slick, d3, nfClient, nfDialog, nfCommon, nfCanvasUtils, nfControllerServices, nfErrorHandler, nfReportingTask, nfShell, nfComponentState, nfPolicyManagement) {
+      'use strict';
+  
+    
+        var config = {
+            urls: {
+                api: '../nifi-api',
+                controllerConfig: '../nifi-api/controller/config',
+                reportingTaskTypes: '../nifi-api/flow/reporting-task-types',
+                createReportingTask: '../nifi-api/controller/reporting-tasks',
+                reportingTasks: '../nifi-api/flow/reporting-tasks'
+            }
         };
-
-        // save the new configuration details
-        $.ajax({
-            type: 'PUT',
-            url: config.urls.controllerConfig,
-            data: JSON.stringify(entity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).done(function (response) {
-            // close the settings dialog
-            nfDialog.showOkDialog({
-                headerText: 'Settings',
-                dialogContent: 'Settings successfully applied.'
-            });
-
-            // register the click listener for the save button
-            $('#settings-save').off('click').on('click', function () {
-                saveSettings(response.revision.version);
-            });
-        }).fail(nfErrorHandler.handleAjaxError);
-    }
-
-    /**
-     * Initializes the general tab.
-     */
-    var initGeneral = function () {
-    };
-
-    /**
-     * Marshals the details to include in the configuration request.
-     */
-    var marshalConfiguration = function () {
-        // create the configuration
-        var configuration = {};
-        configuration['maxTimerDrivenThreadCount'] = $('#maximum-timer-driven-thread-count-field').val();
-        configuration['maxEventDrivenThreadCount'] = $('#maximum-event-driven-thread-count-field').val();
-        return configuration;
-    };
-
-    /**
-     * Determines if the item matches the filter.
-     *
-     * @param {object} item     The item to filter
-     * @param {object} args     The filter criteria
-     * @returns {boolean}       Whether the item matches the filter
-     */
-    var matchesRegex = function (item, args) {
-        if (args.searchString === '') {
-            return true;
-        }
-
-        try {
-            // perform the row filtering
-            var filterExp = new RegExp(args.searchString, 'i');
-        } catch (e) {
-            // invalid regex
-            return false;
+    
+        var gridOptions = {
+            forceFitColumns: true,
+            enableTextSelectionOnCells: true,
+            enableCellNavigation: true,
+            enableColumnReorder: false,
+            autoEdit: false,
+            multiSelect: false,
+            rowHeight: 24
+        };
+    
+        /**
+         * Gets the controller services table.
+         *
+         * @returns {*|jQuery|HTMLElement}
+         */
+        var getControllerServicesTable = function () {
+            return $('#controller-services-table');
+        };
+    
+        /**
+         * Saves the settings for the controller.
+         *
+         * @param version
+         */
+        var saveSettings = function (version) {
+            // marshal the configuration details
+            var configuration = marshalConfiguration();
+            var entity = {
+              'revision': nfClient.getRevision({
+                    'revision': {
+                        'version': version
+                    }
+                }),
+                'component': configuration
+            };
+    
+            // save the new configuration details
+            $.ajax({
+                type: 'PUT',
+                url: config.urls.controllerConfig,
+                data: JSON.stringify(entity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (response) {
+                // close the settings dialog
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-settings.Settings'),
+                  dialogContent: nf._.msg('nf-settings.Message2')
+                });
+    
+                // register the click listener for the save button
+                $('#settings-save').off('click').on('click', function () {
+                    saveSettings(response.revision.version);
+                });
+          }).fail(nfErrorHandler.handleAjaxError);
         }
-
-        // determine if the item matches the filter
-        var matchesLabel = item['label'].search(filterExp) >= 0;
-        var matchesTags = item['tags'].search(filterExp) >= 0;
-        return matchesLabel || matchesTags;
-    };
-
-    /**
-     * Determines if the specified tags match all the tags selected by the user.
-     *
-     * @argument {string[]} tagFilters      The tag filters
-     * @argument {string} tags              The tags to test
-     */
-    var matchesSelectedTags = function (tagFilters, tags) {
-        var selectedTags = [];
-        $.each(tagFilters, function (_, filter) {
-            selectedTags.push(filter);
-        });
-
-        // normalize the tags
-        var normalizedTags = tags.toLowerCase();
-
-        var matches = true;
-        $.each(selectedTags, function (i, selectedTag) {
-            if (normalizedTags.indexOf(selectedTag) === -1) {
-                matches = false;
+    
+        /**
+         * Initializes the general tab.
+         */
+        var initGeneral = function () {
+        };
+    
+        /**
+         * Marshals the details to include in the configuration request.
+         */
+        var marshalConfiguration = function () {
+            // create the configuration
+            var configuration = {};
+            configuration['maxTimerDrivenThreadCount'] = $('#maximum-timer-driven-thread-count-field').val();
+            configuration['maxEventDrivenThreadCount'] = $('#maximum-event-driven-thread-count-field').val();
+            return configuration;
+        };
+    
+        /**
+         * Determines if the item matches the filter.
+         *
+         * @param {object} item     The item to filter
+         * @param {object} args     The filter criteria
+         * @returns {boolean}       Whether the item matches the filter
+         */
+        var matchesRegex = function (item, args) {
+            if (args.searchString === '') {
+                return true;
+            }
+    
+            try {
+                // perform the row filtering
+                var filterExp = new RegExp(args.searchString, 'i');
+            } catch (e) {
+                // invalid regex
                 return false;
             }
-        });
-
-        return matches;
-    };
-
-    /**
-     * Whether the specified item is selectable.
-     *
-     * @param item reporting task type
-     */
-    var isSelectable = function (item) {
-        return nfCommon.isBlank(item.usageRestriction) || nfCommon.canAccessRestrictedComponents();
-    };
-
-    /**
-     * Formatter for the name column.
-     *
-     * @param {type} row
-     * @param {type} cell
-     * @param {type} value
-     * @param {type} columnDef
-     * @param {type} dataContext
-     * @returns {String}
-     */
-    var nameFormatter = function (row, cell, value, columnDef, dataContext) {
-        if (!dataContext.permissions.canRead) {
-            return '<span class="blank">' + dataContext.id + '</span>';
-        }
-
-        return dataContext.component.name;
-    };
-
-    /**
-     * Formatter for the type column.
-     *
-     * @param {type} row
-     * @param {type} cell
-     * @param {type} value
-     * @param {type} columnDef
-     * @param {type} dataContext
-     * @returns {String}
-     */
-    var typeFormatter = function (row, cell, value, columnDef, dataContext) {
-        if (!dataContext.permissions.canRead) {
-            return '';
-        }
-
-        return nfCommon.substringAfterLast(dataContext.component.type, '.');
-    };
-
-    /**
-     * 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 (sortDetails.columnId === 'moreDetails') {
-                    var aBulletins = 0;
-                    if (!nfCommon.isEmpty(a.bulletins)) {
-                        aBulletins = a.bulletins.length;
-                    }
-                    var bBulletins = 0;
-                    if (!nfCommon.isEmpty(b.bulletins)) {
-                        bBulletins = b.bulletins.length;
+    
+            // determine if the item matches the filter
+            var matchesLabel = item['label'].search(filterExp) >= 0;
+            var matchesTags = item['tags'].search(filterExp) >= 0;
+            return matchesLabel || matchesTags;
+        };
+    
+        /**
+         * Determines if the specified tags match all the tags selected by the user.
+         *
+         * @argument {string[]} tagFilters      The tag filters
+         * @argument {string} tags              The tags to test
+         */
+        var matchesSelectedTags = function (tagFilters, tags) {
+            var selectedTags = [];
+            $.each(tagFilters, function (_, filter) {
+                selectedTags.push(filter);
+            });
+    
+            // normalize the tags
+            var normalizedTags = tags.toLowerCase();
+    
+            var matches = true;
+            $.each(selectedTags, function (i, selectedTag) {
+                if (normalizedTags.indexOf(selectedTag) === -1) {
+                    matches = false;
+                    return false;
+                }
+            });
+    
+            return matches;
+        };
+    
+        /**
+       * Whether the specified item is selectable.
+       *
+       * @param item reporting task type
+       */
+      var isSelectable = function (item) {
+          return nfCommon.isBlank(item.usageRestriction) || nfCommon.canAccessRestrictedComponents();
+      };
+  
+      /**
+         * Formatter for the name column.
+         *
+         * @param {type} row
+         * @param {type} cell
+         * @param {type} value
+         * @param {type} columnDef
+         * @param {type} dataContext
+         * @returns {String}
+         */
+        var nameFormatter = function (row, cell, value, columnDef, dataContext) {
+            if (!dataContext.permissions.canRead) {
+                return '<span class="blank">' + dataContext.id + '</span>';
+            }
+    
+            return dataContext.component.name;
+        };
+    
+        /**
+         * Formatter for the type column.
+         *
+         * @param {type} row
+         * @param {type} cell
+         * @param {type} value
+         * @param {type} columnDef
+         * @param {type} dataContext
+         * @returns {String}
+         */
+        var typeFormatter = function (row, cell, value, columnDef, dataContext) {
+            if (!dataContext.permissions.canRead) {
+                return '';
+            }
+    
+          return nfCommon.substringAfterLast(dataContext.component.type, '.');
+        };
+    
+        /**
+         * 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 (sortDetails.columnId === 'moreDetails') {
+                        var aBulletins = 0;
+                      if (!nfCommon.isEmpty(a.bulletins)) {
+                            aBulletins = a.bulletins.length;
+                        }
+                        var bBulletins = 0;
+                      if (!nfCommon.isEmpty(b.bulletins)) {
+                            bBulletins = b.bulletins.length;
+                        }
+                        return aBulletins - bBulletins;
+                    } else if (sortDetails.columnId === 'type') {
+                      var aType = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(a.component[sortDetails.columnId], '.') : '';
+                      var bType = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(b.component[sortDetails.columnId], '.') : '';
+                        return aType === bType ? 0 : aType > bType ? 1 : -1;
+                    } else if (sortDetails.columnId === 'state') {
+                        var aState = 'Invalid';
+                      if (nfCommon.isEmpty(a.component.validationErrors)) {
+                          aState = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                        }
+                        var bState = 'Invalid';
+                      if (nfCommon.isEmpty(b.component.validationErrors)) {
+                          bState = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                        }
+                        return aState === bState ? 0 : aState > bState ? 1 : -1;
+                    } else {
+                      var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                      var bString = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                        return aString === bString ? 0 : aString > bString ? 1 : -1;
                     }
-                    return aBulletins - bBulletins;
-                } else if (sortDetails.columnId === 'type') {
-                    var aType = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(a.component[sortDetails.columnId], '.') : '';
-                    var bType = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(b.component[sortDetails.columnId], '.') : '';
-                    return aType === bType ? 0 : aType > bType ? 1 : -1;
-                } else if (sortDetails.columnId === 'state') {
-                    var aState = 'Invalid';
-                    if (nfCommon.isEmpty(a.component.validationErrors)) {
-                        aState = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                } else {
+                    if (!a.permissions.canRead && !b.permissions.canRead) {
+                        return 0;
                     }
-                    var bState = 'Invalid';
-                    if (nfCommon.isEmpty(b.component.validationErrors)) {
-                        bState = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                    if (a.permissions.canRead) {
+                        return 1;
+                    } else {
+                        return -1;
                     }
-                    return aState === bState ? 0 : aState > bState ? 1 : -1;
-                } else {
-                    var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-                    var bString = nfCommon.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) {
-                    return 0;
                 }
-                if (a.permissions.canRead) {
-                    return 1;
-                } else {
-                    return -1;
+            };
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+        };
+    
+        /**
+         * Get the text out of the filter field. If the filter field doesn't
+         * have any text it will contain the text 'filter list' so this method
+         * accounts for that.
+         */
+        var getReportingTaskTypeFilterText = function () {
+            return $('#reporting-task-type-filter').val();
+        };
+    
+        /**
+         * Filters the reporting task type table.
+         */
+        var applyReportingTaskTypeFilter = function () {
+            // get the dataview
+            var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(reportingTaskTypesGrid)) {
+                var reportingTaskTypesData = reportingTaskTypesGrid.getData();
+    
+                // update the search criteria
+                reportingTaskTypesData.setFilterArgs({
+                    searchString: getReportingTaskTypeFilterText()
+                });
+                reportingTaskTypesData.refresh();
+    
+              // update the buttons to possibly trigger the disabled state
+              $('#new-reporting-task-dialog').modal('refreshButtons');
+  
+                // update the selection if possible
+                if (reportingTaskTypesData.getLength() > 0) {
+                    reportingTaskTypesGrid.setSelectedRows([0]);
                 }
             }
         };
-
-        // perform the sort
-        data.sort(comparer, sortDetails.sortAsc);
-    };
-
-    /**
-     * Get the text out of the filter field. If the filter field doesn't
-     * have any text it will contain the text 'filter list' so this method
-     * accounts for that.
-     */
-    var getReportingTaskTypeFilterText = function () {
-        return $('#reporting-task-type-filter').val();
-    };
-
-    /**
-     * Filters the reporting task type table.
-     */
-    var applyReportingTaskTypeFilter = function () {
-        // get the dataview
-        var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
-
-        // ensure the grid has been initialized
-        if (nfCommon.isDefinedAndNotNull(reportingTaskTypesGrid)) {
-            var reportingTaskTypesData = reportingTaskTypesGrid.getData();
-
-            // update the search criteria
-            reportingTaskTypesData.setFilterArgs({
-                searchString: getReportingTaskTypeFilterText()
-            });
-            reportingTaskTypesData.refresh();
-
-            // update the buttons to possibly trigger the disabled state
-            $('#new-reporting-task-dialog').modal('refreshButtons');
-
-            // update the selection if possible
-            if (reportingTaskTypesData.getLength() > 0) {
-                reportingTaskTypesGrid.setSelectedRows([0]);
-            }
-        }
-    };
-
-    /**
-     * Hides the selected reporting task.
-     */
-    var clearSelectedReportingTask = function () {
-        $('#reporting-task-type-description').text('');
-        $('#reporting-task-type-name').text('');
-        $('#selected-reporting-task-name').text('');
-        $('#selected-reporting-task-type').text('');
-        $('#reporting-task-description-container').hide();
-    };
-
-    /**
-     * Clears the selected reporting task type.
-     */
-    var clearReportingTaskSelection = function () {
-        // clear the selected row
-        clearSelectedReportingTask();
-
-        // clear the active cell the it can be reselected when its included
-        var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
-        reportingTaskTypesGrid.resetActiveCell();
-    };
-
-    /**
-     * Performs the filtering.
-     *
-     * @param {object} item     The item subject to filtering
-     * @param {object} args     Filter arguments
-     * @returns {Boolean}       Whether or not to include the item
-     */
-    var filterReportingTaskTypes = function (item, args) {
-        // determine if the item matches the filter
-        var matchesFilter = matchesRegex(item, args);
-
-        // determine if the row matches the selected tags
-        var matchesTags = true;
-        if (matchesFilter) {
-            var tagFilters = $('#reporting-task-tag-cloud').tagcloud('getSelectedTags');
-            var hasSelectedTags = tagFilters.length > 0;
-            if (hasSelectedTags) {
-                matchesTags = matchesSelectedTags(tagFilters, item['tags']);
-            }
-        }
-
-        // determine if this row should be visible
-        var matches = matchesFilter && matchesTags;
-
-        // if this row is currently selected and its being filtered
-        if (matches === false && $('#selected-reporting-task-type').text() === item['type']) {
-            clearReportingTaskSelection();
-        }
-
-        return matches;
-    };
-
-    /**
-     * Adds the currently selected reporting task.
-     */
-    var addSelectedReportingTask = function () {
-        var selectedTaskType = $('#selected-reporting-task-type').text();
-
-        // ensure something was selected
-        if (selectedTaskType === '') {
-            nfDialog.showOkDialog({
-                headerText: 'Settings',
-                dialogContent: 'The type of reporting task to create must be selected.'
-            });
-        } else {
-            addReportingTask(selectedTaskType);
-        }
-    };
-
-    /**
-     * Adds a new reporting task of the specified type.
-     *
-     * @param {string} reportingTaskType
-     */
-    var addReportingTask = function (reportingTaskType) {
-        // build the reporting task entity
-        var reportingTaskEntity = {
-            'revision': nfClient.getRevision({
-                'revision': {
-                    'version': 0
+    
+        /**
+         * Hides the selected reporting task.
+         */
+        var clearSelectedReportingTask = function () {
+            $('#reporting-task-type-description').text('');
+            $('#reporting-task-type-name').text('');
+            $('#selected-reporting-task-name').text('');
+            $('#selected-reporting-task-type').text('');
+            $('#reporting-task-description-container').hide();
+        };
+    
+        /**
+         * Clears the selected reporting task type.
+         */
+        var clearReportingTaskSelection = function () {
+            // clear the selected row
+            clearSelectedReportingTask();
+    
+            // clear the active cell the it can be reselected when its included
+            var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
+            reportingTaskTypesGrid.resetActiveCell();
+        };
+    
+        /**
+         * Performs the filtering.
+         *
+         * @param {object} item     The item subject to filtering
+         * @param {object} args     Filter arguments
+         * @returns {Boolean}       Whether or not to include the item
+         */
+        var filterReportingTaskTypes = function (item, args) {
+            // determine if the item matches the filter
+            var matchesFilter = matchesRegex(item, args);
+    
+            // determine if the row matches the selected tags
+            var matchesTags = true;
+            if (matchesFilter) {
+                var tagFilters = $('#reporting-task-tag-cloud').tagcloud('getSelectedTags');
+                var hasSelectedTags = tagFilters.length > 0;
+                if (hasSelectedTags) {
+                    matchesTags = matchesSelectedTags(tagFilters, item['tags']);
                 }
-            }),
-            'component': {
-                'type': reportingTaskType
             }
+    
+            // determine if this row should be visible
+            var matches = matchesFilter && matchesTags;
+    
+            // if this row is currently selected and its being filtered
+            if (matches === false && $('#selected-reporting-task-type').text() === item['type']) {
+                clearReportingTaskSelection();
+            }
+    
+            return matches;
         };
-
-        // add the new reporting task
-        var addTask = $.ajax({
-            type: 'POST',
-            url: config.urls.createReportingTask,
-            data: JSON.stringify(reportingTaskEntity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).done(function (reportingTaskEntity) {
-            // add the item
-            var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
-            var reportingTaskData = reportingTaskGrid.getData();
-            reportingTaskData.addItem(reportingTaskEntity);
-
-            // resort
-            reportingTaskData.reSort();
-            reportingTaskGrid.invalidate();
-
-            // select the new reporting task
-            var row = reportingTaskData.getRowById(reportingTaskEntity.id);
-            reportingTaskGrid.setSelectedRows([row]);
-            reportingTaskGrid.scrollRowIntoView(row);
-        }).fail(nfErrorHandler.handleAjaxError);
-
-        // hide the dialog
-        $('#new-reporting-task-dialog').modal('hide');
-
-        return addTask;
-    };
-
-    /**
-     * Initializes the new reporting task dialog.
-     */
-    var initNewReportingTaskDialog = function () {
-        // define the function for filtering the list
-        $('#reporting-task-type-filter').on('keyup', function (e) {
-            var code = e.keyCode ? e.keyCode : e.which;
-            if (code === $.ui.keyCode.ENTER) {
-                // get the grid reference
-                var grid = $('#reporting-task-types-table').data('gridInstance');
-                var selected = grid.getSelectedRows();
-
-                if (selected.length > 0) {
-                    // grid configured with multi-select = false
-                    var item = grid.getDataItem(selected[0]);
-                    if (isSelectable(item)) {
-                        addSelectedReportingTask();
-                    }
-                }
+    
+        /**
+         * Adds the currently selected reporting task.
+         */
+        var addSelectedReportingTask = function () {
+            var selectedTaskType = $('#selected-reporting-task-type').text();
+    
+            // ensure something was selected
+            if (selectedTaskType === '') {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-settings.Settings'),
+                  dialogContent: nf._.msg('nf-settings.Message3')
+                });
             } else {
-                applyReportingTaskTypeFilter();
+                addReportingTask(selectedTaskType);
             }
-        });
-
-        // initialize the processor type table
-        var reportingTaskTypesColumns = [
-            {
-                id: 'type',
-                name: 'Type',
-                field: 'label',
-                formatter: nfCommon.typeFormatter,
-                sortable: false,
-                resizable: true
-            },
-            {
-                id: 'tags',
-                name: 'Tags',
-                field: 'tags',
-                sortable: false,
-                resizable: true
-            }
-        ];
-
-        // initialize the dataview
-        var reportingTaskTypesData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        reportingTaskTypesData.setItems([]);
-        reportingTaskTypesData.setFilterArgs({
-            searchString: getReportingTaskTypeFilterText()
-        });
-        reportingTaskTypesData.setFilter(filterReportingTaskTypes);
-
-        // initialize the grid
-        var reportingTaskTypesGrid = new Slick.Grid('#reporting-task-types-table', reportingTaskTypesData, reportingTaskTypesColumns, gridOptions);
-        reportingTaskTypesGrid.setSelectionModel(new Slick.RowSelectionModel());
-        reportingTaskTypesGrid.registerPlugin(new Slick.AutoTooltips());
-        reportingTaskTypesGrid.setSortColumn('type', true);
-        reportingTaskTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) {
-            if ($.isArray(args.rows) && args.rows.length === 1) {
-                var reportingTaskTypeIndex = args.rows[0];
-                var reportingTaskType = reportingTaskTypesGrid.getDataItem(reportingTaskTypeIndex);
-
-                // set the reporting task type description
-                if (nfCommon.isDefinedAndNotNull(reportingTaskType)) {
-                    // show the selected reporting task
-                    $('#reporting-task-description-container').show();
-
-                    if (nfCommon.isBlank(reportingTaskType.description)) {
-                        $('#reporting-task-type-description')
-                            .attr('title', '')
-                            .html('<span class="unset">No description specified</span>');
-                    } else {
-                        $('#reporting-task-type-description')
-                            .width($('#reporting-task-description-container').innerWidth() - 1)
-                            .html(reportingTaskType.description)
-                            .ellipsis();
+        };
+    
+        /**
+         * Adds a new reporting task of the specified type.
+         *
+         * @param {string} reportingTaskType
+         */
+        var addReportingTask = function (reportingTaskType) {
+            // build the reporting task entity
+            var reportingTaskEntity = {
+              'revision': nfClient.getRevision({
+                    'revision': {
+                        'version': 0
                     }
-
-                    // populate the dom
-                    $('#reporting-task-type-name').text(reportingTaskType.label).ellipsis();
-                    $('#selected-reporting-task-name').text(reportingTaskType.label);
-                    $('#selected-reporting-task-type').text(reportingTaskType.type);
-
-                    // refresh the buttons based on the current selection
-                    $('#new-reporting-task-dialog').modal('refreshButtons');
+                }),
+                'component': {
+                    'type': reportingTaskType
                 }
-            }
-        });
-        reportingTaskTypesGrid.onDblClick.subscribe(function (e, args) {
-            var reportingTaskType = reportingTaskTypesGrid.getDataItem(args.row);
-
-            if (isSelectable(reportingTaskType)) {
-                addReportingTask(reportingTaskType.type);
-            }
-        });
-        reportingTaskTypesGrid.onViewportChanged.subscribe(function (e, args) {
-            nfCommon.cleanUpTooltips($('#reporting-task-types-table'), 'div.view-usage-restriction');
-        });
-
-        // wire up the dataview to the grid
-        reportingTaskTypesData.onRowCountChanged.subscribe(function (e, args) {
-            reportingTaskTypesGrid.updateRowCount();
-            reportingTaskTypesGrid.render();
-
-            // update the total number of displayed processors
-            $('#displayed-reporting-task-types').text(args.current);
-        });
-        reportingTaskTypesData.onRowsChanged.subscribe(function (e, args) {
-            reportingTaskTypesGrid.invalidateRows(args.rows);
-            reportingTaskTypesGrid.render();
-        });
-        reportingTaskTypesData.syncGridSelection(reportingTaskTypesGrid, true);
-
-        // hold onto an instance of the grid
-        $('#reporting-task-types-table').data('gridInstance', reportingTaskTypesGrid).on('mouseenter', 'div.slick-cell', function (e) {
-            var usageRestriction = $(this).find('div.view-usage-restriction');
-            if (usageRestriction.length && !usageRestriction.data('qtip')) {
-                var rowId = $(this).find('span.row-id').text();
-
-                // get the status item
-                var item = reportingTaskTypesData.getItemById(rowId);
-
-                // show the tooltip
-                if (nfCommon.isDefinedAndNotNull(item.usageRestriction)) {
-                    usageRestriction.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                        content: item.usageRestriction,
-                        position: {
-                            container: $('#summary'),
-                            at: 'bottom right',
-                            my: 'top left',
-                            adjust: {
-                                x: 4,
-                                y: 4
-                            }
-                        }
-                    }));
+            };
+    
+            // add the new reporting task
+            var addTask = $.ajax({
+                type: 'POST',
+                url: config.urls.createReportingTask,
+                data: JSON.stringify(reportingTaskEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (reportingTaskEntity) {
+                // add the item
+                var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
+                var reportingTaskData = reportingTaskGrid.getData();
+                reportingTaskData.addItem(reportingTaskEntity);
+    
+                // resort
+                reportingTaskData.reSort();
+                reportingTaskGrid.invalidate();
+    
+                // select the new reporting task
+                var row = reportingTaskData.getRowById(reportingTaskEntity.id);
+                reportingTaskGrid.setSelectedRows([row]);
+                reportingTaskGrid.scrollRowIntoView(row);
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // hide the dialog
+            $('#new-reporting-task-dialog').modal('hide');
+    
+            return addTask;
+        };
+    
+        /**
+         * Initializes the new reporting task dialog.
+         */
+        var initNewReportingTaskDialog = function () {
+            // define the function for filtering the list
+            $('#reporting-task-type-filter').on('keyup', function (e) {
+                var code = e.keyCode ? e.keyCode : e.which;
+                if (code === $.ui.keyCode.ENTER) {
+                  // get the grid reference
+                  var grid = $('#reporting-task-types-table').data('gridInstance');
+                  var selected = grid.getSelectedRows();
+  
+                  if (selected.length > 0) {
+                      // grid configured with multi-select = false
+                      var item = grid.getDataItem(selected[0]);
+                      if (isSelectable(item)) {
+                            addSelectedReportingTask();
+                      }
+                  }
+                } else {
+                    applyReportingTaskTypeFilter();
                 }
-            }
-        });
-
-        // load the available reporting tasks
-        $.ajax({
-            type: 'GET',
-            url: config.urls.reportingTaskTypes,
-            dataType: 'json'
-        }).done(function (response) {
-            var id = 0;
-            var tags = [];
-
-            // begin the update
-            reportingTaskTypesData.beginUpdate();
-
-            // go through each reporting task type
-            $.each(response.reportingTaskTypes, function (i, documentedType) {
-                // add the documented type
-                reportingTaskTypesData.addItem({
-                    id: id++,
-                    label: nfCommon.substringAfterLast(documentedType.type, '.'),
-                    type: documentedType.type,
-                    description: nfCommon.escapeHtml(documentedType.description),
-                    usageRestriction: nfCommon.escapeHtml(documentedType.usageRestriction),
-                    tags: documentedType.tags.join(', ')
-                });
-
-                // count the frequency of each tag for this type
-                $.each(documentedType.tags, function (i, tag) {
-                    tags.push(tag.toLowerCase());
-                });
             });
-
-            // end the udpate
-            reportingTaskTypesData.endUpdate();
-
-            // set the total number of processors
-            $('#total-reporting-task-types, #displayed-reporting-task-types').text(response.reportingTaskTypes.length);
-
-            // create the tag cloud
-            $('#reporting-task-tag-cloud').tagcloud({
-                tags: tags,
-                select: applyReportingTaskTypeFilter,
-                remove: applyReportingTaskTypeFilter
+    
+            // initialize the processor type table
+            var reportingTaskTypesColumns = [
+              {
+                  id: 'type',
+                  name: nf._.msg('nf-settings.Type'),
+                  field: 'label',
+                  formatter: nfCommon.typeFormatter,
+                  sortable: false,
+                  resizable: true
+              },
+              {
+                  id: 'tags',
+                  name: nf._.msg('nf-settings.Tags'),
+                  field: 'tags',
+                  sortable: false,
+                  resizable: true
+              }
+            ];
+    
+            // initialize the dataview
+            var reportingTaskTypesData = new Slick.Data.DataView({
+                inlineFilters: false
             });
-        }).fail(nfErrorHandler.handleAjaxError);
-
-        // initialize the reporting task dialog
-        $('#new-reporting-task-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Add Reporting Task',
-            buttons: [{
-                buttonText: 'Add',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
-                disabled: function () {
-                    var selected = reportingTaskTypesGrid.getSelectedRows();
-
-                    if (selected.length > 0) {
-                        // grid configured with multi-select = false
-                        var item = reportingTaskTypesGrid.getDataItem(selected[0]);
-                        return isSelectable(item) === false;
-                    } else {
-                        return reportingTaskTypesGrid.getData().getLength() === 0;
-                    }
-                },
-                handler: {
-                    click: function () {
-                        addSelectedReportingTask();
+            reportingTaskTypesData.setItems([]);
+            reportingTaskTypesData.setFilterArgs({
+                searchString: getReportingTaskTypeFilterText()
+            });
+            reportingTaskTypesData.setFilter(filterReportingTaskTypes);
+    
+            // initialize the grid
+            var reportingTaskTypesGrid = new Slick.Grid('#reporting-task-types-table', reportingTaskTypesData, reportingTaskTypesColumns, gridOptions);
+            reportingTaskTypesGrid.setSelectionModel(new Slick.RowSelectionModel());
+            reportingTaskTypesGrid.registerPlugin(new Slick.AutoTooltips());
+            reportingTaskTypesGrid.setSortColumn('type', true);
+            reportingTaskTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) {
+                if ($.isArray(args.rows) && args.rows.length === 1) {
+                    var reportingTaskTypeIndex = args.rows[0];
+                    var reportingTaskType = reportingTaskTypesGrid.getDataItem(reportingTaskTypeIndex);
+    
+                    // set the reporting task type description
+                  if (nfCommon.isDefinedAndNotNull(reportingTaskType)) {
+                        // show the selected reporting task
+                        $('#reporting-task-description-container').show();
+    
+                      if (nfCommon.isBlank(reportingTaskType.description)) {
+                          $('#reporting-task-type-description')
+                              .attr('title', '')
+                              .html('<span class="unset">No description specified</span>');
+                      } else {
+                          $('#reporting-task-type-description')
+                              .width($('#reporting-task-description-container').innerWidth() - 1)
+                              .html(reportingTaskType.description)
+                              .ellipsis();
+                      }
+  
+                      // populate the dom
+                      $('#reporting-task-type-name').text(reportingTaskType.label).ellipsis();
+                      $('#selected-reporting-task-name').text(reportingTaskType.label);
+                      $('#selected-reporting-task-type').text(reportingTaskType.type);
+  
+                      // refresh the buttons based on the current selection
+                      $('#new-reporting-task-dialog').modal('refreshButtons');
                     }
                 }
-            },
-                {
-                    buttonText: 'Cancel',
+            });
+            reportingTaskTypesGrid.onDblClick.subscribe(function (e, args) {
+                var reportingTaskType = reportingTaskTypesGrid.getDataItem(args.row);
+    
+              if (isSelectable(reportingTaskType)) {
+                    addReportingTask(reportingTaskType.type);
+              }
+          });
+          reportingTaskTypesGrid.onViewportChanged.subscribe(function (e, args) {
+              nfCommon.cleanUpTooltips($('#reporting-task-types-table'), 'div.view-usage-restriction');
+            });
+    
+            // wire up the dataview to the grid
+            reportingTaskTypesData.onRowCountChanged.subscribe(function (e, args) {
+                reportingTaskTypesGrid.updateRowCount();
+                reportingTaskTypesGrid.render();
+    
+                // update the total number of displayed processors
+                $('#displayed-reporting-task-types').text(args.current);
+            });
+            reportingTaskTypesData.onRowsChanged.subscribe(function (e, args) {
+                reportingTaskTypesGrid.invalidateRows(args.rows);
+                reportingTaskTypesGrid.render();
+            });
+            reportingTaskTypesData.syncGridSelection(reportingTaskTypesGrid, true);
+    
+            // hold onto an instance of the grid
+          $('#reporting-task-types-table').data('gridInstance', reportingTaskTypesGrid).on('mouseenter', 'div.slick-cell', function (e) {
+              var usageRestriction = $(this).find('div.view-usage-restriction');
+              if (usageRestriction.length && !usageRestriction.data('qtip')) {
+                  var rowId = $(this).find('span.row-id').text();
+  
+                  // get the status item
+                  var item = reportingTaskTypesData.getItemById(rowId);
+  
+                  // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(item.usageRestriction)) {
+                      usageRestriction.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                          content: item.usageRestriction,
+                          position: {
+                              container: $('#summary'),
+                              at: 'bottom right',
+                              my: 'top left',
+                              adjust: {
+                                  x: 4,
+                                  y: 4
+                              }
+                          }
+                      }));
+                  }
+              }
+          });
+    
+            // load the available reporting tasks
+            $.ajax({
+                type: 'GET',
+                url: config.urls.reportingTaskTypes,
+                dataType: 'json'
+            }).done(function (response) {
+                var id = 0;
+                var tags = [];
+    
+                // begin the update
+                reportingTaskTypesData.beginUpdate();
+    
+                // go through each reporting task type
+                $.each(response.reportingTaskTypes, function (i, documentedType) {
+                    // add the documented type
+                    reportingTaskTypesData.addItem({
+                        id: id++,
+                      label: nfCommon.substringAfterLast(documentedType.type, '.'),
+                        type: documentedType.type,
+                      description: nfCommon.escapeHtml(documentedType.description),
+                      usageRestriction: nfCommon.escapeHtml(documentedType.usageRestriction),
+                        tags: documentedType.tags.join(', ')
+                    });
+    
+                    // count the frequency of each tag for this type
+                    $.each(documentedType.tags, function (i, tag) {
+                        tags.push(tag.toLowerCase());
+                    });
+                });
+    
+                // end the udpate
+                reportingTaskTypesData.endUpdate();
+    
+                // set the total number of processors
+                $('#total-reporting-task-types, #displayed-reporting-task-types').text(response.reportingTaskTypes.length);
+    
+                // create the tag cloud
+                $('#reporting-task-tag-cloud').tagcloud({
+                    tags: tags,
+                    select: applyReportingTaskTypeFilter,
+                    remove: applyReportingTaskTypeFilter
+                });
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // initialize the reporting task dialog
+            $('#new-reporting-task-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-settings.Message11'),
+                buttons: [{
+                      buttonText: nf._.msg('nf-settings.Add'),
                     color: {
-                        base: '#E3E8EB',
-                        hover: '#C7D2D7',
-                        text: '#004849'
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
                     },
+                  disabled: function () {
+                      var selected = reportingTaskTypesGrid.getSelectedRows();
+  
+                      if (selected.length > 0) {
+                          // grid configured with multi-select = false
+                          var item = reportingTaskTypesGrid.getDataItem(selected[0]);
+                          return isSelectable(item) === false;
+                      } else {
+                          return reportingTaskTypesGrid.getData().getLength() === 0;
+                      }
+                  },
                     handler: {
                         click: function () {
-                            $(this).modal('hide');
+                            addSelectedReportingTask();
                         }
                     }
-                }],
-            handler: {
-                close: function () {
-                    // clear the selected row
-                    clearSelectedReportingTask();
-
-                    // clear any filter strings
-                    $('#reporting-task-type-filter').val('');
-
-                    // clear the tagcloud
-                    $('#reporting-task-tag-cloud').tagcloud('clearSelectedTags');
-
-                    // reset the filter
-                    applyReportingTaskTypeFilter();
-
-                    // unselect any current selection
-                    var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
-                    reportingTaskTypesGrid.setSelectedRows([]);
-                    reportingTaskTypesGrid.resetActiveCell();
                 },
-                resize: function () {
-                    $('#reporting-task-type-description')
-                        .width($('#reporting-task-description-container').innerWidth() - 1)
-                        .text($('#reporting-task-type-description').attr('title'))
-                        .ellipsis();
-                }
-            }
-        });
-    };
-
-    /**
-     * Initializes the reporting tasks tab.
-     */
-    var initReportingTasks = function () {
-        // initialize the new reporting task dialog
-        initNewReportingTaskDialog();
-
-        var moreReportingTaskDetails = function (row, cell, value, columnDef, dataContext) {
-            if (!dataContext.permissions.canRead) {
-                return '';
-            }
-
-            var markup = '<div title="View Details" class="pointer view-reporting-task fa fa-info-circle"></div>';
-
-            // always include a button to view the usage
-            markup += '<div title="Usage" class="pointer reporting-task-usage fa fa-book"></div>';
-
-            var hasErrors = !nfCommon.isEmpty(dataContext.component.validationErrors);
-            var hasBulletins = !nfCommon.isEmpty(dataContext.bulletins);
-
-            if (hasErrors) {
-                markup += '<div class="pointer has-errors fa fa-warning" ></div>';
-            }
-
-            if (hasBulletins) {
-                markup += '<div class="has-bulletins fa fa-sticky-note-o"></div>';
-            }
-
-            if (hasErrors || hasBulletins) {
-                markup += '<span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.component.id) + '</span>';
-            }
-
-            return markup;
-        };
-
-        var reportingTaskRunStatusFormatter = function (row, cell, value, columnDef, dataContext) {
-            if (!dataContext.permissions.canRead) {
-                return '';
-            }
-
-            // determine the appropriate label
-            var icon = '', label = '';
-            if (!nfCommon.isEmpty(dataContext.component.validationErrors)) {
-                label = 'Invalid';
-                icon = 'invalid fa fa-warning';
-            } else {
-                if (dataContext.component.state === 'STOPPED') {
-                    label = 'Stopped';
-                    icon = 'fa fa-stop stopped';
-                } else if (dataContext.component.state === 'RUNNING') {
-                    label = 'Running';
-                    icon = 'fa fa-play running';
-                } else {
-                    label = 'Disabled';
-                    icon = 'icon icon-enable-false disabled';
-                }
-            }
-
-            // include the active thread count if appropriate
-            var activeThreadCount = '';
-            if (nfCommon.isDefinedAndNotNull(dataContext.component.activeThreadCount) && dataContext.component.activeThreadCount > 0) {
-                activeThreadCount = '(' + dataContext.component.activeThreadCount + ')';
-            }
-
-            // format the markup
-            var formattedValue = '<div layout="row"><div class="' + icon + '" style="margin-top: 3px;"></div>';
-            return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + nfCommon.escapeHtml(label) + '</div><div style="float: left; margin-left: 4px;">' + nfCommon.escapeHtml(activeThreadCount) + '</div></div>';
-        };
-
-        var reportingTaskActionFormatter = function (row, cell, value, columnDef, dataContext) {
-            var markup = '';
-
-            if (dataContext.permissions.canRead && dataContext.permissions.canWrite) {
-                if (dataContext.component.state === 'RUNNING') {
-                    markup += '<div title="Stop" class="pointer stop-reporting-task fa fa-stop" style="margin-top: 2px; margin-right: 3px;" ></div>';
-                } else if (dataContext.component.state === 'STOPPED' || dataContext.component.state === 'DISABLED') {
-                    markup += '<div title="Edit" class="pointer edit-reporting-task fa fa-pencil" style="margin-top: 2px; margin-right: 3px;" ></div>';
-
-                    // support starting when stopped and no validation errors
-                    if (dataContext.component.state === 'STOPPED' && nfCommon.isEmpty(dataContext.component.validationErrors)) {
-                        markup += '<div title="Start" class="pointer start-reporting-task fa fa-play" style="margin-top: 2px; margin-right: 3px;"></div>';
+                    {
+                      buttonText: nf._.msg('nf-settings.Cancel'),
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                $(this).modal('hide');
+                            }
+                        }
+                    }],
+                handler: {
+                    close: function () {
+                        // clear the selected row
+                        clearSelectedReportingTask();
+    
+                        // clear any filter strings
+                        $('#reporting-task-type-filter').val('');
+    
+                        // clear the tagcloud
+                        $('#reporting-task-tag-cloud').tagcloud('clearSelectedTags');
+    
+                        // reset the filter
+                        applyReportingTaskTypeFilter();
+    
+                        // unselect any current selection
+                        var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
+                        reportingTaskTypesGrid.setSelectedRows([]);
+                        reportingTaskTypesGrid.resetActiveCell();
+                  },
+                  resize: function () {
+                      $('#reporting-task-type-description')
+                          .width($('#reporting-task-description-container').innerWidth() - 1)
+                          .text($('#reporting-task-type-description').attr('title'))
+                          .ellipsis();
                     }
                 }
-
-                if (dataContext.component.persistsState === true) {
-                    markup += '<div title="View State" class="pointer view-state-reporting-task fa fa-tasks" style="margin-top: 2px; margin-right: 3px;" ></div>';
-                }
-            }
-
-            if (dataContext.permissions.canWrite && nfCommon.canModifyController()) {
-                markup += '<div title="Remove" class="pointer delete-reporting-task fa fa-trash" style="margin-top: 2px; margin-right: 3px;" ></div>';
-            }
-
-            // allow policy configuration conditionally
-            if (nfCanvasUtils.isConfigurableAuthorizer() && nfCommon.canAccessTenants()) {
-                markup += '<div title="Access Policies" class="pointer edit-access-policies fa fa-key" style="margin-top: 2px;"></div>';
-            }
-
-            return markup;
+            });
         };
-
-        // define the column model for the reporting tasks table
-        var reportingTasksColumnModel = [
-            {
-                id: 'moreDetails',
-                name: '&nbsp;',
-                resizable: false,
-                formatter: moreReportingTaskDetails,
-                sortable: true,
-                width: 90,
-                maxWidth: 90,
-                toolTip: 'Sorts based on presence of bulletins'
-            },
-            {id: 'name', name: 'Name', sortable: true, resizable: true, formatter: nameFormatter},
-            {id: 'type', name: 'Type', sortable: true, resizable: true, formatter: typeFormatter},
-            {
-                id: 'state',
-                name: 'Run Status',
-                sortable: true,
-                resizeable: true,
-                formatter: reportingTaskRunStatusFormatter
-            }
-        ];
-
-        // action column should always be last
-        reportingTasksColumnModel.push({
-            id: 'actions',
-            name: '&nbsp;',
-            resizable: false,
-            formatter: reportingTaskActionFormatter,
-            sortable: false,
-            width: 90,
-            maxWidth: 90
-        });
-
-        // initialize the dataview
-        var reportingTasksData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        reportingTasksData.setItems([]);
-
-        // initialize the sort
-        sort({
-            columnId: 'name',
-            sortAsc: true
-        }, reportingTasksData);
-
-        // initialize the grid
-        var reportingTasksGrid = new Slick.Grid('#reporting-tasks-table', reportingTasksData, reportingTasksColumnModel, gridOptions);
-        reportingTasksGrid.setSelectionModel(new Slick.RowSelectionModel());
-        reportingTasksGrid.registerPlugin(new Slick.AutoTooltips());
-        reportingTasksGrid.setSortColumn('name', true);
-        reportingTasksGrid.onSort.subscribe(function (e, args) {
-            sort({
-                columnId: args.sortCol.id,
-                sortAsc: args.sortAsc
-            }, reportingTasksData);
-        });
-
-        // configure a click listener
-        reportingTasksGrid.onClick.subscribe(function (e, args) {
-            var target = $(e.target);
-
-            // get the service at this row
-            var reportingTaskEntity = reportingTasksData.getItem(args.row);
-
-            // determine the desired action
-            if (reportingTasksGrid.getColumns()[args.cell].id === 'actions') {
-                if (target.hasClass('edit-reporting-task')) {
-                    nfReportingTask.showConfiguration(reportingTaskEntity);
-                } else if (target.hasClass('start-reporting-task')) {
-                    nfReportingTask.start(reportingTaskEntity);
-                } else if (target.hasClass('stop-reporting-task')) {
-                    nfReportingTask.stop(reportingTaskEntity);
-                } else if (target.hasClass('delete-reporting-task')) {
-                    nfReportingTask.promptToDeleteReportingTask(reportingTaskEntity);
-                } else if (target.hasClass('view-state-reporting-task')) {
-                    var canClear = reportingTaskEntity.component.state === 'STOPPED' && reportingTaskEntity.component.activeThreadCount === 0;
-                    nfComponentState.showState(reportingTaskEntity, canClear);
-                } else if (target.hasClass('edit-access-policies')) {
-                    // show the policies for this service
-                    nfPolicyManagement.showReportingTaskPolicy(reportingTaskEntity);
-
-                    // close the settings dialog
-                    $('#shell-close-button').click();
+    
+        /**
+         * Initializes the reporting tasks tab.
+         */
+        var initReportingTasks = function () {
+            // initialize the new reporting task dialog
+            initNewReportingTaskDialog();
+    
+            var moreReportingTaskDetails = function (row, cell, value, columnDef, dataContext) {
+                if (!dataContext.permissions.canRead) {
+                    return '';
                 }
-            } else if (reportingTasksGrid.getColumns()[args.cell].id === 'moreDetails') {
-                if (target.hasClass('view-reporting-task')) {
-                    nfReportingTask.showDetails(reportingTaskEntity);
-                } else if (target.hasClass('reporting-task-usage')) {
-                    // close the settings dialog
-                    $('#shell-close-button').click();
-
-                    // open the documentation for this reporting task
-                    nfShell.showPage('../nifi-docs/documentation?' + $.param({
-                            select: nfCommon.substringAfterLast(reportingTaskEntity.component.type, '.')
-                        })).done(function () {
-                        nfSettings.showSettings();
-                    });
+    
+              var markup = '<div title="'+nf._.msg('nf-settings.ViewDetails')+'" class="pointer view-reporting-task fa fa-info-circle"></div>';
+    
+                // always include a button to view the usage
+              markup += '<div title="'+nf._.msg('nf-settings.Usage')+'" class="pointer reporting-task-usage fa fa-book"></div>';
+    
+              var hasErrors = !nfCommon.isEmpty(dataContext.component.validationErrors);
+              var hasBulletins = !nfCommon.isEmpty(dataContext.bulletins);
+    
+                if (hasErrors) {
+                  markup += '<div class="pointer has-errors fa fa-warning" ></div>';
                 }
-            }
-        });
-
-        // wire up the dataview to the grid
-        reportingTasksData.onRowCountChanged.subscribe(function (e, args) {
-            reportingTasksGrid.updateRowCount();
-            reportingTasksGrid.render();
-        });
-        reportingTasksData.onRowsChanged.subscribe(function (e, args) {
-            reportingTasksGrid.invalidateRows(args.rows);
-            reportingTasksGrid.render();
-        });
-        reportingTasksData.syncGridSelection(reportingTasksGrid, true);
-
-        // hold onto an instance of the grid
-        $('#reporting-tasks-table').data('gridInstance', reportingTasksGrid).on('mouseenter', 'div.slick-cell', function (e) {
-            var errorIcon = $(this).find('div.has-errors');
-            if (errorIcon.length && !errorIcon.data('qtip')) {
-                var taskId = $(this).find('span.row-id').text();
-
-                // get the task item
-                var reportingTaskEntity = reportingTasksData.getItemById(taskId);
-
-                // format the errors
-                var tooltip = nfCommon.formatUnorderedList(reportingTaskEntity.component.validationErrors);
-
-                // show the tooltip
-                if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                    errorIcon.qtip($.extend({},
-                        nfCommon.config.tooltipConfig,
-                        {
-                            content: tooltip,
-                            position: {
-                                target: 'mouse',
-                                viewport: $('#shell-container'),
-                                adjust: {
-                                    x: 8,
-                                    y: 8,
-                                    method: 'flipinvert flipinvert'
-                                }
-                            }
-                        }));
+    
+                if (hasBulletins) {
+                  markup += '<div class="has-bulletins fa fa-sticky-note-o"></div>';
                 }
-            }
-
-            var bulletinIcon = $(this).find('div.has-bulletins');
-            if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                var taskId = $(this).find('span.row-id').text();
-
-                // get the task item
-                var reportingTaskEntity = reportingTasksData.getItemById(taskId);
-
-                // format the tooltip
-                var bulletins = nfCommon.getFormattedBulletins(reportingTaskEntity.bulletins);
-                var tooltip = nfCommon.formatUnorderedList(bulletins);
-
-                // show the tooltip
-                if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                    bulletinIcon.qtip($.extend({},
-                        nfCommon.config.tooltipConfig,
-                        {
-                            content: tooltip,
-                            position: {
-                                target: 'mouse',
-                                viewport: $('#shell-container'),
-                                adjust: {
-                                    x: 8,
-                                    y: 8,
-                                    method: 'flipinvert flipinvert'
-                                }
-                            }
-                        }));
+    
+                if (hasErrors || hasBulletins) {
+                  markup += '<span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.component.id) + '</span>';
                 }
-            }
-        });
-    };
-
-    /**
-     * Loads the settings.
-     */
-    var loadSettings = function () {
-        var setUnauthorizedText = function () {
-            $('#read-only-maximum-timer-driven-thread-count-field').addClass('unset').text('Unauthorized');
-            $('#read-only-maximum-event-driven-thread-count-field').addClass('unset').text('Unauthorized');
-        };
-
-        var setEditable = function (editable) {
-            if (editable) {
-                $('#general-settings div.editable').show();
-                $('#general-settings div.read-only').hide();
-                $('#settings-save').show();
-            } else {
-                $('#general-settings div.editable').hide();
-                $('#general-settings div.read-only').show();
-                $('#settings-save').hide();
-            }
-        };
-
-        var settings = $.Deferred(function (deferred) {
-            $.ajax({
-                type: 'GET',
-                url: config.urls.controllerConfig,
-                dataType: 'json'
-            }).done(function (response) {
-                if (response.permissions.canWrite) {
-                    // populate the settings
-                    $('#maximum-timer-driven-thread-count-field').removeClass('unset').val(response.component.maxTimerDrivenThreadCount);
-                    $('#maximum-event-driven-thread-count-field').removeClass('unset').val(response.component.maxEventDrivenThreadCount);
-
-                    setEditable(true);
-
-                    // register the click listener for the save button
-                    $('#settings-save').off('click').on('click', function () {
-                        saveSettings(response.revision.version);
-                    });
+    
+                return markup;
+            };
+    
+            var reportingTaskRunStatusFormatter = function (row, cell, value, columnDef, dataContext) {
+                if (!dataContext.permissions.canRead) {
+                    return '';
+                }
+    
+                // determine the appropriate label
+                var icon = '', label = '';
+              if (!nfCommon.isEmpty(dataContext.component.validationErrors)) {
+                  label = nf._.msg('nf-settings.Invalid');
+                    icon = 'invalid fa fa-warning';
                 } else {
-                    if (response.permissions.canRead) {
-                        // populate the settings
-                        $('#read-only-maximum-timer-driven-thread-count-field').removeClass('unset').text(response.component.maxTimerDrivenThreadCount);
-                        $('#read-only-maximum-event-driven-thread-count-field').removeClass('unset').text(response.component.maxEventDrivenThreadCount);
+                    if (dataContext.component.state === 'STOPPED') {
+                      label = nf._.msg('nf-settings.Stopped');
+                      icon = 'fa fa-stop stopped';
+                    } else if (dataContext.component.state === 'RUNNING') {
+                      label = nf._.msg('nf-settings.Running');
+                      icon = 'fa fa-play running';
                     } else {
-                        setUnauthorizedText();
+                      label = nf._.msg('nf-settings.Disabled');
+                      icon = 'icon icon-enable-false disabled';
                     }
-
-                    setEditable(false);
                 }
-                deferred.resolve();
-            }).fail(function (xhr, status, error) {
-                if (xhr.status === 403) {
-                    setUnauthorizedText();
-                    setEditable(false);
-                    deferred.resolve();
-                } else {
-                    deferred.reject(xhr, status, error);
+    
+                // include the active thread count if appropriate
+                var activeThreadCount = '';
+              if (nfCommon.isDefinedAndNotNull(dataContext.component.activeThreadCount) && dataContext.component.activeThreadCount > 0) {
+                    activeThreadCount = '(' + dataContext.component.activeThreadCount + ')';
+                }
+    
+                // format the markup
+                var formattedValue = '<div layout="row"><div class="' + icon + '" style="margin-top: 3px;"></div>';
+              return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + nfCommon.escapeHtml(label) + '</div><div style="float: left; margin-left: 4px;">' + nfCommon.escapeHtml(activeThreadCount) + '</div></div>';
+            };
+    
+            var reportingTaskActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+    
+                if (dataContext.permissions.canRead && dataContext.permissions.canWrite) {
+                    if (dataContext.component.state === 'RUNNING') {
+                      markup += '<div title="'+nf._.msg('nf-settings.Stop')+'" class="pointer stop-reporting-task fa fa-stop" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                    } else if (dataContext.component.state === 'STOPPED' || dataContext.component.state === 'DISABLED') {
+                      markup += '<div title="'+nf._.msg('nf-settings.Edit')+'" class="pointer edit-reporting-task fa fa-pencil" style="margin-top: 2px; margin-right: 3px;" ></div>';
+    
+                        // support starting when stopped and no validation errors
+                      if (dataContext.component.state === 'STOPPED' && nfCommon.isEmpty(dataContext.component.validationErrors)) {
+                          markup += '<div title="'+nf._.msg('nf-settings.Start')+'" class="pointer start-reporting-task fa fa-play" style="margin-top: 2px; margin-right: 3px;"></div>';
+                        }
+                    }
+    
+                    if (dataContext.component.persistsState === true) {
+                      markup += '<div title="'+nf._.msg('nf-settings.ViewState')+'" class="pointer view-state-reporting-task fa fa-tasks" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                    }
+                }
+    
+              if (dataContext.permissions.canWrite && nfCommon.canModifyController()) {
+                  markup += '<div title="'+nf._.msg('nf-settings.Remove')+'" class="pointer delete-reporting-task fa fa-trash" style="margin-top: 2px; margin-right: 3px;" ></div>';
                 }
+    
+                // allow policy configuration conditionally
+              if (nfCanvasUtils.isConfigurableAuthorizer() && nfCommon.canAccessTenants()) {
+                  markup += '<div title="'+nf._.msg('nf-settings.AccessPolicies')+'" class="pointer edit-access-policies fa fa-key" style="margin-top: 2px;"></div>';
+                }
+    
+                return markup;
+            };
+    
+            // define the column model for the reporting tasks table
+            var reportingTasksColumnModel = [
+              {
+                  id: 'moreDetails',
+                  name: '&nbsp;',
+                  resizable: false,
+                  formatter: moreReportingTaskDetails,
+                  sortable: true,
+                  width: 90,
+                  maxWidth: 90,
+                  toolTip: 'Sorts based on presence of bulletins'
+              },
+              {id: 'name', name: nf._.msg('nf-settings.Name'), sortable: true, resizable: true, formatter: nameFormatter},
+              {id: 'type', name: nf._.msg('nf-settings.Type'), sortable: true, resizable: true, formatter: typeFormatter},
+              {
+                  id: 'state',
+                  name: nf._.msg('nf-settings.RunStatus'),
+                  sortable: true,
+                  resizeable: true,
+                  formatter: reportingTaskRunStatusFormatter
+              }
+            ];
+    
+            // action column should always be last
+          reportingTasksColumnModel.push({
+              id: 'actions',
+              name: '&nbsp;',
+              resizable: false,
+              formatter: reportingTaskActionFormatter,
+              sortable: false,
+              width: 90,
+              maxWidth: 90
+          });
+    
+            // initialize the dataview
+            var reportingTasksData = new Slick.Data.DataView({
+                inlineFilters: false
             });
-        }).promise();
-
-        // load the controller services
-        var controllerServicesUri = config.urls.api + '/flow/controller/controller-services';
-        var controllerServicesXhr = nfControllerServices.loadControllerServices(controllerServicesUri, getControllerServicesTable());
-
-        // load the reporting tasks
-        var reportingTasks = loadReportingTasks();
-
-        // return a deferred for all parts of the settings
-        return $.when(settings, controllerServicesXhr, reportingTasks).done(function (settingsResult, controllerServicesResult) {
-            var controllerServicesResponse = controllerServicesResult[0];
-
-            // update the current time
-            $('#settings-last-refreshed').text(controllerServicesResponse.currentTime);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Loads the reporting tasks.
-     */
-    var loadReportingTasks = function () {
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.reportingTasks,
-            dataType: 'json'
-        }).done(function (response) {
-            var tasks = [];
-            $.each(response.reportingTasks, function (_, task) {
-                tasks.push($.extend({
-                    bulletins: []
-                }, task));
+            reportingTasksData.setItems([]);
+    
+            // initialize the sort
+            sort({
+                columnId: 'name',
+                sortAsc: true
+            }, reportingTasksData);
+    
+            // initialize the grid
+            var reportingTasksGrid = new Slick.Grid('#reporting-tasks-table', reportingTasksData, reportingTasksColumnModel, gridOptions);
+            reportingTasksGrid.setSelectionModel(new Slick.RowSelectionModel());
+            reportingTasksGrid.registerPlugin(new Slick.AutoTooltips());
+            reportingTasksGrid.setSortColumn('name', true);
+            reportingTasksGrid.onSort.subscribe(function (e, args) {
+                sort({
+                    columnId: args.sortCol.id,
+                    sortAsc: args.sortAsc
+                }, reportingTasksData);
             });
-
-            var reportingTasksElement = $('#reporting-tasks-table');
-            nfCommon.cleanUpTooltips(reportingTasksElement, 'div.has-errors');
-            nfCommon.cleanUpTooltips(reportingTasksElement, 'div.has-bulletins');
-
-            var reportingTasksGrid = reportingTasksElement.data('gridInstance');
-            var reportingTasksData = reportingTasksGrid.getData();
-
-            // update the reporting tasks
-            reportingTasksData.setItems(tasks);
-            reportingTasksData.reSort();
-            reportingTasksGrid.invalidate();
-        });
-    };
-
-    /**
-     * Shows the process group configuration.
-     */
-    var showSettings = function () {
-        // show the settings dialog
-        nfShell.showContent('#settings').done(function () {
-            reset();
-        });
-
-        //reset content to account for possible policy changes
-        $('#settings-tabs').find('.selected-tab').click();
-
-        // adjust the table size
-        nfSettings.resetTableSize();
-    };
-
-    /**
-     * Reset state of this dialog.
-     */
-    var reset = function () {
-        // reset button state
-        $('#settings-save').mouseout();
-    };
-
-    var nfSettings = {
-        /**
-         * Initializes the settings page.
-         */
-        init: function () {
-            // initialize the settings tabs
-            $('#settings-tabs').tabbs({
-                tabStyle: 'tab',
-                selectedTabStyle: 'selected-tab',
-                scrollableTabContentStyle: 'scrollable',
-                tabs: [{
-                    name: 'General',
-                    tabContentId: 'general-settings-tab-content'
-                }, {
-                    name: 'Controller Services',
-                    tabContentId: 'controller-services-tab-content'
-                }, {
-                    name: 'Reporting Tasks',
-                    tabContentId: 'reporting-tasks-tab-content'
-                }],
-                select: function () {
-                    var tab = $(this).text();
-                    if (tab === 'General') {
-                        $('#controller-cs-availability').hide();
-                        $('#new-service-or-task').hide();
-                        $('#settings-save').show();
-                    } else {
-                        var canModifyController = false;
-                        if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                            // only consider write permissions for creating new controller services/reporting tasks
-                            canModifyController = nfCommon.currentUser.controllerPermissions.canWrite === true;
-                        }
-
-                        if (canModifyController) {
-                            $('#new-service-or-task').show();
-                            $('div.controller-settings-table').css('top', '32px');
-
-                            // update the tooltip on the button
-                            $('#new-service-or-task').attr('title', function () {
-                                if (tab === 'Controller Services') {
-                                    $('#settings-save').hide();
-                                    return 'Create a new controller service';
-                                } else if (tab === 'Reporting Tasks') {
-                                    $('#settings-save').hide();
-                                    return 'Create a new reporting task';
-                                }
-                            });
-                        } else {
-                            $('#new-service-or-task').hide();
-                            $('div.controller-settings-table').css('top', '0');
-                        }
-
-                        if (tab === 'Controller Services') {
-                            $('#controller-cs-availability').show();
-                        } else if (tab === 'Reporting Tasks') {
-                            $('#controller-cs-availability').hide();
-                        }
-
-                        // resize the table
-                        nfSettings.resetTableSize();
+    
+            // configure a click listener
+            reportingTasksGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the service at this row
+                var reportingTaskEntity = reportingTasksData.getItem(args.row);
+    
+                // determine the desired action
+                if (reportingTasksGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('edit-reporting-task')) {
+                      nfReportingTask.showConfiguration(reportingTaskEntity);
+                    } else if (target.hasClass('start-reporting-task')) {
+                      nfReportingTask.start(reportingTaskEntity);
+                    } else if (target.hasClass('stop-reporting-task')) {
+                      nfReportingTask.stop(reportingTaskEntity);
+                    } else if (target.hasClass('delete-reporting-task')) {
+                      nfReportingTask.promptToDeleteReportingTask(reportingTaskEntity);
+                    } else if (target.hasClass('view-state-reporting-task')) {
+                        var canClear = reportingTaskEntity.component.state === 'STOPPED' && reportingTaskEntity.component.activeThreadCount === 0;
+                      nfComponentState.showState(reportingTaskEntity, canClear);
+                    } else if (target.hasClass('edit-access-policies')) {
+                        // show the policies for this service
+                      nfPolicyManagement.showReportingTaskPolicy(reportingTaskEntity);
+    
+                        // close the settings dialog
+                        $('#shell-close-button').click();
+                    }
+                } else if (reportingTasksGrid.getColumns()[args.cell].id === 'moreDetails') {
+                    if (target.hasClass('view-reporting-task')) {
+                      nfReportingTask.showDetails(reportingTaskEntity);
+                    } else if (target.hasClass('reporting-task-usage')) {
+                        // close the settings dialog
+                        $('#shell-close-button').click();
+    
+                        // open the documentation for this reporting task
+                      nfShell.showPage('../nifi-docs/documentation?' + $.param({
+                              select: nfCommon.substringAfterLast(reportingTaskEntity.component.type, '.')
+                            })).done(function () {
+                          nfSettings.showSettings();
+                        });
                     }
                 }
             });
-
-            // settings refresh button
-            $('#settings-refresh-button').click(function () {
-                loadSettings();
+    
+            // wire up the dataview to the grid
+            reportingTasksData.onRowCountChanged.subscribe(function (e, args) {
+                reportingTasksGrid.updateRowCount();
+                reportingTasksGrid.render();
+            });
+            reportingTasksData.onRowsChanged.subscribe(function (e, args) {
+                reportingTasksGrid.invalidateRows(args.rows);
+                reportingTasksGrid.render();
             });
-
-            // create a new controller service or reporting task
-            $('#new-service-or-task').on('click', function () {
-                var selectedTab = $('#settings-tabs li.selected-tab').text();
-                if (selectedTab === 'Controller Services') {
-                    var controllerServicesUri = config.urls.api + '/controller/controller-services';
-                    nfControllerServices.promptNewControllerService(controllerServicesUri, getControllerServicesTable());
-                } else if (selectedTab === 'Reporting Tasks') {
-                    $('#new-reporting-task-dialog').modal('show');
-
-                    // reset the canvas size after the dialog is shown
-                    var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
-                    if (nfCommon.isDefinedAndNotNull(reportingTaskTypesGrid)) {
-                        reportingTaskTypesGrid.setSelectedRows([0]);
-                        reportingTaskTypesGrid.resizeCanvas();
+            reportingTasksData.syncGridSelection(reportingTasksGrid, true);
+    
+            // hold onto an instance of the grid
+            $('#reporting-tasks-table').data('gridInstance', reportingTasksGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var errorIcon = $(this).find('div.has-errors');
+                if (errorIcon.length && !errorIcon.data('qtip')) {
+                    var taskId = $(this).find('span.row-id').text();
+    
+                    // get the task item
+                    var reportingTaskEntity = reportingTasksData.getItemById(taskId);
+    
+                    // format the errors
+                  var tooltip = nfCommon.formatUnorderedList(reportingTaskEntity.component.validationErrors);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                        errorIcon.qtip($.extend({},
+                          nfCommon.config.tooltipConfig,
+                            {
+                                content: tooltip,
+                                position: {
+                                    target: 'mouse',
+                                  viewport: $('#shell-container'),
+                                    adjust: {
+                                        x: 8,
+                                        y: 8,
+                                        method: 'flipinvert flipinvert'
+                                    }
+                                }
+                            }));
+                    }
+                }
+    
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var taskId = $(this).find('span.row-id').text();
+    
+                    // get the task item
+                    var reportingTaskEntity = reportingTasksData.getItemById(taskId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(reportingTaskEntity.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                        bulletinIcon.qtip($.extend({},
+                          nfCommon.config.tooltipConfig,
+                            {
+                                content: tooltip,
+                                position: {
+                                    target: 'mouse',
+                                  viewport: $('#shell-container'),
+                                    adjust: {
+                                        x: 8,
+                                        y: 8,
+                                        method: 'flipinvert flipinvert'
+                                    }
+                                }
+                            }));
                     }
-
-                    // set the initial focus
-                    $('#reporting-task-type-filter').focus();
                 }
             });
-
-            // initialize each tab
-            initGeneral();
-            nfControllerServices.init(getControllerServicesTable(), nfSettings.showSettings);
-            initReportingTasks();
-        },
-
-        /**
-         * Update the size of the grid based on its container's current size.
-         */
-        resetTableSize: function () {
-            nfControllerServices.resetTableSize(getControllerServicesTable());
-
-            var reportingTasksGrid = $('#reporting-tasks-table').data('gridInstance');
-            if (nfCommon.isDefinedAndNotNull(reportingTasksGrid)) {
-                reportingTasksGrid.resizeCanvas();
-            }
-        },
-
+        };
+    
         /**
-         * Shows the settings dialog.
+         * Loads the settings.
          */
-        showSettings: function () {
-            return loadSettings().done(showSettings);
-        },
-
+        var loadSettings = function () {
+            var setUnauthorizedText = function () {
+                $('#read-only-maximum-timer-driven-thread-count-field').addClass('unset').text('Unauthorized');
+                $('#read-only-maximum-event-driven-thread-count-field').addClass('unset').text('Unauthorized');
+            };
+    
+            var setEditable = function (editable) {
+                if (editable) {
+                    $('#general-settings div.editable').show();
+                    $('#general-settings div.read-only').hide();
+                    $('#settings-save').show();
+                } else {
+                    $('#general-settings div.editable').hide();
+                    $('#general-settings div.read-only').show();
+                    $('#settings-save').hide();
+                }
+            };
+    
+            var settings = $.Deferred(function (deferred) {
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.controllerConfig,
+                    dataType: 'json'
+                }).done(function (response) {
+                    if (response.permissions.canWrite) {
+                        // populate the settings
+                        $('#maximum-timer-driven-thread-count-field').removeClass('unset').val(response.component.maxTimerDrivenThreadCount);
+                        $('#maximum-event-driven-thread-count-field').removeClass('unset').val(response.component.maxEventDrivenThreadCount);
+    
+                        setEditable(true);
+    
+                        // register the click listener for the save button
+                        $('#settings-save').off('click').on('click', function () {
+                            saveSettings(response.revision.version);
+                        });
+                    } else {
+                        if (response.permissions.canRead) {
+                            // populate the settings
+                            $('#read-only-maximum-timer-driven-thread-count-field').removeClass('unset').text(response.component.maxTimerDrivenThreadCount);
+                            $('#read-only-maximum-event-driven-thread-count-field').removeClass('unset').text(response.component.maxEventDrivenThreadCount);
+                        } else {
+                            setUnauthorizedText();
+                        }
+    
+                        setEditable(false);
+                    }
+                    deferred.resolve();
+                }).fail(function (xhr, status, error) {
+                    if (xhr.status === 403) {
+                        setUnauthorizedText();
+                        setEditable(false);
+                        deferred.resolve();
+                    } else {
+                        deferred.reject(xhr, status, error);
+                    }
+                });
+            }).promise();
+    
+            // load the controller services
+            var controllerServicesUri = config.urls.api + '/flow/controller/controller-services';
+          var controllerServicesXhr = nfControllerServices.loadControllerServices(controllerServicesUri, getControllerServicesTable());
+    
+            // load the reporting tasks
+            var reportingTasks = loadReportingTasks();
+    
+            // return a deferred for all parts of the settings
+          return $.when(settings, controllerServicesXhr, reportingTasks).done(function (settingsResult, controllerServicesResult) {
+                var controllerServicesResponse = controllerServicesResult[0];
+    
+                // update the current time
+                $('#settings-last-refreshed').text(controllerServicesResponse.currentTime);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
         /**
-         * Loads the settings dialogs.
+         * Loads the reporting tasks.
          */
-        loadSettings: function () {
-            return loadSettings();
-        },
-
+        var loadReportingTasks = function () {
+            return $.ajax({
+                type: 'GET',
+                url: config.urls.reportingTasks,
+                dataType: 'json'
+            }).done(function (response) {
+                var tasks = [];
+                $.each(response.reportingTasks, function (_, task) {
+                    tasks.push($.extend({
+                        bulletins: []
+                    }, task));
+                });
+    
+                var reportingTasksElement = $('#reporting-tasks-table');
+              nfCommon.cleanUpTooltips(reportingTasksElement, 'div.has-errors');
+              nfCommon.cleanUpTooltips(reportingTasksElement, 'div.has-bulletins');
+    
+                var reportingTasksGrid = reportingTasksElement.data('gridInstance');
+                var reportingTasksData = reportingTasksGrid.getData();
+    
+                // update the reporting tasks
+                reportingTasksData.setItems(tasks);
+                reportingTasksData.reSort();
+                reportingTasksGrid.invalidate();
+            });
+        };
+    
         /**
-         * Selects the specified controller service.
-         *
-         * @param {string} controllerServiceId
+         * Shows the process group configuration.
          */
-        selectControllerService: function (controllerServiceId) {
-            var controllerServiceGrid = getControllerServicesTable().data('gridInstance');
-            var controllerServiceData = controllerServiceGrid.getData();
-
-            // select the desired service
-            var row = controllerServiceData.getRowById(controllerServiceId);
-            controllerServiceGrid.setSelectedRows([row]);
-            controllerServiceGrid.scrollRowIntoView(row);
-
-            // select the controller services tab
-            $('#settings-tabs').find('li:eq(1)').click();
-        },
-
+        var showSettings = function () {
+            // show the settings dialog
+          nfShell.showContent('#settings').done(function () {
+                reset();
+            });
+    
+            //reset content to account for possible policy changes
+            $('#settings-tabs').find('.selected-tab').click();
+    
+            // adjust the table size
+          nfSettings.resetTableSize();
+        };
+    
         /**
-         * Sets the controller service and reporting task bulletins in their respective tables.
-         *
-         * @param {object} controllerServiceBulletins
-         * @param {object} reportingTaskBulletins
+         * Reset state of this dialog.
          */
-        setBulletins: function (controllerServiceBulletins, reportingTaskBulletins) {
-            if ($('#controller-services-table').data('gridInstance')) {
-                nfControllerServices.setBulletins(getControllerServicesTable(), controllerServiceBulletins);
-            }
-
-            // reporting tasks
-            var reportingTasksGrid = $('#reporting-tasks-table').data('gridInstance');
-            var reportingTasksData = reportingTasksGrid.getData();
-            reportingTasksData.beginUpdate();
-
-            // if there are some bulletins process them
-            if (!nfCommon.isEmpty(reportingTaskBulletins)) {
-                var reportingTaskBulletinsBySource = d3.nest()
-                    .key(function (d) {
-                        return d.sourceId;
-                    })
-                    .map(reportingTaskBulletins, d3.map);
-
-                reportingTaskBulletinsBySource.forEach(function (sourceId, sourceBulletins) {
-                    var reportingTask = reportingTasksData.getItemById(sourceId);
-                    if (nfCommon.isDefinedAndNotNull(reportingTask)) {
-                        reportingTasksData.updateItem(sourceId, $.extend(reportingTask, {
-                            bulletins: sourceBulletins
-                        }));
+        var reset = function () {
+            // reset button state
+            $('#settings-save').mouseout();
+        };
+    
+      var nfSettings = {
+            /**
+             * Initializes the settings page.
+             */
+            init: function () {
+                // initialize the settings tabs
+                $('#settings-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                      name: nf._.msg('nf-settings.General'),
+                        tabContentId: 'general-settings-tab-content'
+                    }, {
+                      name: nf._.msg('nf-settings.ControllerServices'),
+                        tabContentId: 'controller-services-tab-content'
+                    }, {
+                      name: nf._.msg('nf-settings.ReportingTasks'),
+                        tabContentId: 'reporting-tasks-tab-content'
+                    }],
+                    select: function () {
+                        var tab = $(this).text();
+                      if (tab === nf._.msg('nf-settings.General')) {
+                          $('#controller-cs-availability').hide();
+                            $('#new-service-or-task').hide();
+                            $('#settings-save').show();
+                        } else {
+                            var canModifyController = false;
+                          if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                                // only consider write permissions for creating new controller services/reporting tasks
+                              canModifyController = nfCommon.currentUser.controllerPermissions.canWrite === true;
+                            }
+    
+                            if (canModifyController) {
+                                $('#new-service-or-task').show();
+                                $('div.controller-settings-table').css('top', '32px');
+    
+                                // update the tooltip on the button
+                                $('#new-service-or-task').attr('title', function () {
+                                  if (tab === nf._.msg('nf-settings.ControllerServices')) {
+                                        $('#settings-save').hide();
+                                      return nf._.msg('nf-settings.Message12');
+                                  } else if (tab === nf._.msg('nf-settings.ReportingTasks')) {
+                                        $('#settings-save').hide();
+                                      return nf._.msg('nf-settings.Message13');
+                                    }
+                                });
+                            } else {
+                                $('#new-service-or-task').hide();
+                                $('div.controller-settings-table').css('top', '0');
+                            }
+    
+                          if (tab === nf._.msg('nf-settings.ControllerServices')) {
+                              $('#controller-cs-availability').show();
+                          } else if (tab === nf._.msg('nf-settings.ReportingTasks')) {
+                              $('#controller-cs-availability').hide();
+                          }
+  
+                            // resize the table
+                          nfSettings.resetTableSize();
+                        }
                     }
                 });
-            } else {
-                // if there are no bulletins clear all
-                var reportingTasks = reportingTasksData.getItems();
-                $.each(reportingTasks, function (_, reportingTask) {
-                    reportingTasksData.updateItem(reportingTask.id, $.extend(reportingTask, {
-                        bulletins: []
-                    }));
+    
+                // settings refresh button
+                $('#settings-refresh-button').click(function () {
+                    loadSettings();
                 });
+    
+                // create a new controller service or reporting task
+                $('#new-service-or-task').on('click', function () {
+                    var selectedTab = $('#settings-tabs li.selected-tab').text();
+                  if (selectedTab === nf._.msg('nf-settings.ControllerServices')) {
+                        var controllerServicesUri = config.urls.api + '/controller/controller-services';
+                      nfControllerServices.promptNewControllerService(controllerServicesUri, getControllerServicesTable());
+                  } else if (selectedTab === nf._.msg('nf-settings.ReportingTasks')) {
+                        $('#new-reporting-task-dialog').modal('show');
+    
+                        // reset the canvas size after the dialog is shown
+                        var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
+                      if (nfCommon.isDefinedAndNotNull(reportingTaskTypesGrid)) {
+                            reportingTaskTypesGrid.setSelectedRows([0]);
+                            reportingTaskTypesGrid.resizeCanvas();
+                        }
+    
+                        // set the initial focus
+                        $('#reporting-task-type-filter').focus();
+                    }
+                });
+    
+                // initialize each tab
+                initGeneral();
+              nfControllerServices.init(getControllerServicesTable(), nfSettings.showSettings);
+                initReportingTasks();
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+              nfControllerServices.resetTableSize(getControllerServicesTable());
+    
+                var reportingTasksGrid = $('#reporting-tasks-table').data('gridInstance');
+              if (nfCommon.isDefinedAndNotNull(reportingTasksGrid)) {
+                    reportingTasksGrid.resizeCanvas();
+                }
+            },
+    
+            /**
+             * Shows the settings dialog.
+             */
+            showSettings: function () {
+                return loadSettings().done(showSettings);
+            },
+    
+            /**
+             * Loads the settings dialogs.
+             */
+            loadSettings: function () {
+                return loadSettings();
+            },
+    
+            /**
+             * Selects the specified controller service.
+             *
+             * @param {string} controllerServiceId
+             */
+            selectControllerService: function (controllerServiceId) {
+                var controllerServiceGrid = getControllerServicesTable().data('gridInstance');
+                var controllerServiceData = controllerServiceGrid.getData();
+    
+                // select the desired service
+                var row = controllerServiceData.getRowById(controllerServiceId);
+                controllerServiceGrid.setSelectedRows([row]);
+                controllerServiceGrid.scrollRowIntoView(row);
+    
+                // select the controller services tab
+                $('#settings-tabs').find('li:eq(1)').click();
+            },
+    
+            /**
+             * Sets the controller service and reporting task bulletins in their respective tables.
+             *
+             * @param {object} controllerServiceBulletins
+             * @param {object} reportingTaskBulletins
+             */
+            setBulletins: function (controllerServiceBulletins, reportingTaskBulletins) {
+                if ($('#controller-services-table').data('gridInstance')) {
+                  nfControllerServices.setBulletins(getControllerServicesTable(), controllerServiceBulletins);
+                }
+    
+                // reporting tasks
+                var reportingTasksGrid = $('#reporting-tasks-table').data('gridInstance');
+                var reportingTasksData = reportingTasksGrid.getData();
+                reportingTasksData.beginUpdate();
+    
+                // if there are some bulletins process them
+              if (!nfCommon.isEmpty(reportingTaskBulletins)) {
+                    var reportingTaskBulletinsBySource = d3.nest()
+                        .key(function (d) {
+                            return d.sourceId;
+                        })
+                        .map(reportingTaskBulletins, d3.map);
+    
+                    reportingTaskBulletinsBySource.forEach(function (sourceId, sourceBulletins) {
+                        var reportingTask = reportingTasksData.getItemById(sourceId);
+                      if (nfCommon.isDefinedAndNotNull(reportingTask)) {
+                            reportingTasksData.updateItem(sourceId, $.extend(reportingTask, {
+                                bulletins: sourceBulletins
+                            }));
+                        }
+                    });
+                } else {
+                    // if there are no bulletins clear all
+                    var reportingTasks = reportingTasksData.getItems();
+                    $.each(reportingTasks, function (_, reportingTask) {
+                        reportingTasksData.updateItem(reportingTask.id, $.extend(reportingTask, {
+                            bulletins: []
+                        }));
+                    });
+                }
+                reportingTasksData.endUpdate();
             }
-            reportingTasksData.endUpdate();
-        }
-    };
-
-    return nfSettings;
-}));
\ No newline at end of file
+        };
+    
+      return nfSettings;
+  }));
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 c29f387391aa..9858e78e19ca 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
@@ -1,1365 +1,1365 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'Slick',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.ErrorHandler'],
-            function ($, Slick, nfCommon, nfDialog, nfErrorHandler) {
-                return (nf.ClusterTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler));
-            });
-    } 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, nfCommon, nfDialog, nfErrorHandler) {
-    'use strict';
-
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        primaryNode: 'Primary Node',
-        clusterCoordinator: 'Cluster Coordinator',
-        urls: {
-            cluster: '../nifi-api/controller/cluster',
-            nodes: '../nifi-api/controller/cluster/nodes',
-            systemDiagnostics: '../nifi-api/system-diagnostics'
-        },
-        data: [{
-            name: 'cluster',
-            update: refreshClusterData,
-            isAuthorized: nfCommon.canAccessController
-        }, {
-            name: 'systemDiagnostics',
-            update: refreshSystemDiagnosticsData,
-            isAuthorized: nfCommon.canAccessSystem
-        }
-        ]
-    };
-
-    var commonTableOptions = {
-        forceFitColumns: true,
-        enableTextSelectionOnCells: true,
-        enableCellNavigation: false,
-        enableColumnReorder: false,
-        autoEdit: false,
-        rowHeight: 24
-    };
-
-    var nodesTab = {
-        name: 'Nodes',
-        data: {
-            dataSet: 'cluster',
-            update: updateNodesTableData
-        },
-        tabContentId: 'cluster-nodes-tab-content',
-        tableId: 'cluster-nodes-table',
-        tableColumnModel: createNodeTableColumnModel,
-        tableIdColumn: 'nodeId',
-        tableOptions: commonTableOptions,
-        tableOnClick: nodesTableOnClick,
-        init: commonTableInit,
-        onSort: sort,
-        onTabSelected: onSelectTab,
-        filterOptions: [{
-            text: 'by address',
-            value: 'address'
-        }, {
-            text: 'by status',
-            value: 'status'
-        }]
-    };
-
-    var jvmTab = {
-        name: 'JVM',
-        data: {
-            dataSet: 'systemDiagnostics',
-            update: updateJvmTableData
-        },
-        tabContentId: 'cluster-jvm-tab-content',
-        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: 'uptime',
-                field: 'uptime',
-                name: 'Uptime',
-                sortable: true,
-                resizable: true,
-                cssClass: 'cell-right',
-                headerCssClass: 'header-right'
-            }
-        ],
-        tableIdColumn: 'id',
-        tableOptions: commonTableOptions,
-        tableOnClick: null,
-        init: commonTableInit,
-        onSort: sort,
-        onTabSelected: onSelectTab,
-        filterOptions: [{
-            text: 'by address',
-            value: 'node'
-        }]
-    };
-
-    var systemTab = {
-        name: 'System',
-        data: {
-            dataSet: 'systemDiagnostics',
-            update: updateSystemTableData
-        },
-        tabContentId: 'cluster-system-tab-content',
-        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'
-            }
-        ],
-        tableIdColumn: 'id',
-        tableOptions: commonTableOptions,
-        tableOnClick: null,
-        init: commonTableInit,
-        onSort: sort,
-        onTabSelected: onSelectTab,
-        filterOptions: [{
-            text: 'by address',
-            value: 'node'
-        }]
-    };
-
-    var flowFileTab = {
-        name: 'FlowFile Storage',
-        data: {
-            dataSet: 'systemDiagnostics',
-            update: updateFlowFileTableData
-        },
-        tabContentId: 'cluster-flowfile-tab-content',
-        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'
-            }
-        ],
-        tableIdColumn: 'id',
-        tableOptions: commonTableOptions,
-        tableOnClick: null,
-        init: commonTableInit,
-        onSort: sort,
-        onTabSelected: onSelectTab,
-        filterOptions: [{
-            text: 'by address',
-            value: 'node'
-        }]
-    };
-
-    var contentTab = {
-        name: 'Content Storage',
-        data: {
-            dataSet: 'systemDiagnostics',
-            update: updateContentTableData
-        },
-        tabContentId: 'cluster-content-tab-content',
-        tableId: 'cluster-content-table',
-        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'
-            }
-        ],
-        tableIdColumn: 'id',
-        tableOptions: commonTableOptions,
-        tableOnClick: null,
-        init: commonTableInit,
-        onSort: sort,
-        onTabSelected: onSelectTab,
-        filterOptions: [{
-            text: 'by address',
-            value: 'node'
-        }, {
-            text: 'by repository',
-            value: 'contentRepoId'
-        }]
-    };
-
-    var versionTab = {
-        name: 'Versions',
-        data: {
-            dataSet: 'systemDiagnostics',
-            update: updateVersionTableData
-        },
-        tabContentId: 'cluster-version-tab-content',
-        tableId: 'cluster-version-table',
-        tableColumnModel: [
-            {id: 'node', field: 'node', name: 'Node Address', sortable: true, resizable: true},
-            {id: 'version', field: 'version', name: 'NiFi Version', sortable: true, resizable: true},
-            {id: 'javavendor', field: 'javaVendor', name: 'Java Vendor', sortable: true, resizable: true},
-            {id: 'javaversion', field: 'javaVersion', name: 'Java Version', sortable: true, resizable: true},
-            {id: 'osname', field: 'osName', name: 'OS Name', sortable: true, resizable: true},
-            {id: 'osversion', field: 'osVersion', name: 'OS Version', sortable: true, resizable: true},
-            {id: 'osarch', field: 'osArchitecture', name: 'OS Architecture', sortable: true, resizable: true}
-        ],
-        tableIdColumn: 'id',
-        tableOptions: commonTableOptions,
-        tableOnClick: null,
-        init: commonTableInit,
-        onSort: sort,
-        onTabSelected: onSelectTab,
-        filterOptions: [{
-            text: 'by address',
-            value: 'address'
-        }]
-    };
-
-    var clusterTabs = [nodesTab, systemTab, jvmTab, flowFileTab, contentTab, versionTab];
-    var tabsByName = {};
-    var dataSetHandlers = {};
-
-    /**
-     * Click handler for the Nodes table options.
-     */
-    function nodesTableOnClick(e, args, target, item) {
-        if (nodesTab.grid.getColumns()[args.cell].id === 'actions') {
-            if (target.hasClass('prompt-for-connect')) {
-                promptForConnect(item);
-            } else if (target.hasClass('prompt-for-removal')) {
-                promptForRemoval(item);
-            } else if (target.hasClass('prompt-for-disconnect')) {
-                promptForDisconnect(item);
-            }
-        } else if (nodesTab.grid.getColumns()[args.cell].id === 'moreDetails') {
-            if (target.hasClass('show-node-details')) {
-                showNodeDetails(item);
-            }
-        }
-    }
-
-    /**
-     * Creates the Slick Grid column model for the Nodes table.
-     */
-    function createNodeTableColumnModel() {
-        var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
-            return '<div title="View Details" class="pointer show-node-details fa fa-info-circle" style="margin-top: 2px;"></div>';
-        };
-
-        // define a custom formatter for the run status column
-        var nodeFormatter = function (row, cell, value, columnDef, dataContext) {
-            return formatNodeAddress(dataContext);
-        };
-
-        // function for formatting the last accessed time
-        var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-            return nfCommon.formatValue(value);
-        };
-
-        // define a custom formatter for the status column
-        var statusFormatter = function (row, cell, value, columnDef, dataContext) {
-            return formatNodeStatus(dataContext);
-        };
-
-        var columnModel = [
-            {
-                id: 'moreDetails',
-                name: '&nbsp;',
-                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: '<span class="queued-title">Queue</span>&nbsp;/&nbsp;<span class="queued-size-title">Size</span>',
-                resizable: true,
-                sortable: true,
-                defaultSortAsc: false
-            },
-            {
-                id: 'status',
-                field: 'status',
-                name: 'Status',
-                formatter: statusFormatter,
-                resizable: true,
-                sortable: true
-            },
-            {
-                id: 'uptime',
-                field: 'nodeStartTime',
-                name: 'Started At',
-                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 (nfCommon.canModifyController()) {
-            var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-                var canDisconnect = false;
-                var canConnect = false;
-
-                // determine the current status
-                if (dataContext.status === 'CONNECTED' || dataContext.status === 'CONNECTING') {
-                    canDisconnect = true;
-                } else if (dataContext.status === 'DISCONNECTED') {
-                    canConnect = true;
-                }
-
-                // return the appropriate markup
-                if (canConnect) {
-                    return '<div title="Connect" class="pointer prompt-for-connect fa fa-plug" style="margin-top: 2px;"></div><div title="Delete" class="pointer prompt-for-removal fa fa-trash" style="margin-top: 2px;"></div>';
-                } else if (canDisconnect) {
-                    return '<div title="Disconnect" class="pointer prompt-for-disconnect fa fa-power-off" style="margin-top: 2px;"></div>';
-                } else {
-                    return '<div style="width: 16px; height: 16px;">&nbsp;</div>';
-                }
-            };
-
-            columnModel.push({
-                id: 'actions',
-                label: '&nbsp;',
-                formatter: actionFormatter,
-                resizable: false,
-                sortable: false,
-                width: 80,
-                maxWidth: 80
-            });
-        }
-
-        return columnModel;
-    }
-
-    var prevColumn, count;
-
-    /**
-     * Sorts the specified data using the specified sort details.
-     *
-     * @param {object} sortDetails
-     * @param {object} data
-     */
-    function sort(sortDetails, dataView, tab) {
-        // defines a function for sorting
-        var comparer = function (a, b) {
-            if (sortDetails.columnId === 'heartbeat' || sortDetails.columnId === 'uptime') {
-                var aDate = nfCommon.parseDateTime(a[sortDetails.columnId]);
-                var bDate = nfCommon.parseDateTime(b[sortDetails.columnId]);
-                return aDate.getTime() - bDate.getTime();
-            } else if (sortDetails.columnId === 'queued') {
-                var aSplit = a[sortDetails.columnId].split(/ \/ /);
-                var bSplit = b[sortDetails.columnId].split(/ \/ /);
-                var mod = count % 4;
-                if (mod < 2) {
-                    $('#cluster-nodes-table span.queued-title').addClass('sorted');
-                    var aCount = nfCommon.parseCount(aSplit[0]);
-                    var bCount = nfCommon.parseCount(bSplit[0]);
-                    return aCount - bCount;
-                } else {
-                    $('#cluster-nodes-table span.queued-size-title').addClass('sorted');
-                    var aSize = nfCommon.parseSize(aSplit[1]);
-                    var bSize = nfCommon.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 = nfCommon.parseSize(a[sortDetails.columnId]);
-                var bSize = nfCommon.parseSize(b[sortDetails.columnId]);
-                return aSize - bSize;
-            } else if (sortDetails.columnId === 'totalThreads' || sortDetails.columnId === 'daemonThreads'
-                || sortDetails.columnId === 'processors') {
-                var aCount = nfCommon.parseCount(a[sortDetails.columnId]);
-                var bCount = nfCommon.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 = nfCommon.parseCount(aSplit[0]);
-                var bCount = nfCommon.parseCount(bSplit[0]);
-                return aCount - bCount;
-            } else if (sortDetails.columnId === 'status') {
-                var aStatus = formatNodeStatus(a);
-                var bStatus = formatNodeStatus(b);
-                return aStatus === bStatus ? 0 : aStatus > bStatus ? 1 : -1;
-            } else if (sortDetails.columnId === 'formattedNodeAddress') {
-                var aNode = formatNodeAddress(a);
-                var bNode = formatNodeAddress(b);
-                return aNode === bNode ? 0 : aNode > bNode ? 1 : -1;
-            } else {
-                var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                return aString === bString ? 0 : aString > bString ? 1 : -1;
-            }
-        };
-
-        // remove previous sort indicators
-        $('#cluster-nodes-table span.queued-title').removeClass('sorted');
-        $('#cluster-nodes-table span.queued-size-title').removeClass('sorted');
-
-        // update/reset the count as appropriate
-        if (prevColumn !== sortDetails.columnId) {
-            count = 0;
-        } else {
-            count++;
-        }
-
-        // perform the sort
-        dataView.sort(comparer, sortDetails.sortAsc);
-
-        // record the previous table and sorted column
-        prevColumn = sortDetails.columnId;
-    };
-
-    /**
-     * Formats the address for the specified node.
+    /*
+     * 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
      *
-     * @param {object} node
-     * @returns {string}
-     */
-    var formatNodeAddress = function (node) {
-        return nfCommon.escapeHtml(node.address) + ':' + nfCommon.escapeHtml(node.apiPort);
-    };
-
-    /**
-     * Formats the status for the specified node.
-     *
-     * @param {object} node
-     * @returns {string}
-     */
-    var formatNodeStatus = function (node) {
-        var markup = node.status;
-        if (node.roles.includes(config.primaryNode)) {
-            markup += ', PRIMARY';
-        }
-        if (node.roles.includes(config.clusterCoordinator)) {
-            markup += ', COORDINATOR';
-        }
-        return markup;
-    }
-
-    /**
-     * Prompts to verify node connection.
-     *
-     * @argument {object} node     The node
-     */
-    var promptForConnect = function (node) {
-        // prompt to connect
-        nfDialog.showYesNoDialog({
-            headerText: 'Connect Node',
-            dialogContent: 'Connect \'' + formatNodeAddress(node) + '\' to this cluster?',
-            yesHandler: function () {
-                connect(node.nodeId);
-            }
-        });
-    };
-
-    /**
-     * Connects the node in the specified row.
-     *
-     * @argument {string} nodeId     The node id
-     */
-    var connect = function (nodeId) {
-        var entity = {
-            'node': {
-                'nodeId': nodeId,
-                'status': 'CONNECTING'
-            }
-        };
-        $.ajax({
-            type: 'PUT',
-            url: config.urls.nodes + '/' + encodeURIComponent(nodeId),
-            data: JSON.stringify(entity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).done(function (response) {
-            var node = response.node;
-
-            // update the node in the table
-            var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
-            var clusterData = clusterGrid.getData();
-            clusterData.updateItem(node.nodeId, node);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Prompts to verify node disconnection.
-     *
-     * @argument {object} node     The node
-     */
-    var promptForDisconnect = function (node) {
-        // prompt for disconnect
-        nfDialog.showYesNoDialog({
-            headerText: 'Disconnect Node',
-            dialogContent: 'Disconnect \'' + formatNodeAddress(node) + '\' from the cluster?',
-            yesHandler: function () {
-                disconnect(node.nodeId);
-            }
-        });
-    };
-
-    /**
-     * Disconnects the node in the specified row.
-     *
-     * @argument {string} nodeId     The node id
-     */
-    var disconnect = function (nodeId) {
-        var entity = {
-            'node': {
-                'nodeId': nodeId,
-                'status': 'DISCONNECTING'
-            }
-        };
-
-        $.ajax({
-            type: 'PUT',
-            url: config.urls.nodes + '/' + encodeURIComponent(nodeId),
-            data: JSON.stringify(entity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).done(function (response) {
-            var node = response.node;
-
-            // update the node in the table
-            var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
-            var clusterData = clusterGrid.getData();
-            clusterData.updateItem(node.nodeId, node);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Prompts to verify node disconnection.
-     *
-     * @argument {object} node     The node
-     */
-    var promptForRemoval = function (node) {
-        // prompt for disconnect
-        nfDialog.showYesNoDialog({
-            headerText: 'Remove Node',
-            dialogContent: 'Remove \'' + formatNodeAddress(node) + '\' from the cluster?',
-            yesHandler: function () {
-                remove(node.nodeId);
-            }
-        });
-    };
-
-    /**
-     * Disconnects the node in the specified row.
-     *
-     * @argument {string} nodeId     The node id
-     */
-    var remove = function (nodeId) {
-        $.ajax({
-            type: 'DELETE',
-            url: config.urls.nodes + '/' + encodeURIComponent(nodeId),
-            dataType: 'json'
-        }).done(function () {
-            // get the table and update the row accordingly
-            var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
-            var clusterData = clusterGrid.getData();
-            clusterData.deleteItem(nodeId);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * 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 $('#cluster-filter').val();
-    };
-
-    /**
-     * Applies the filter found in the filter expression text field.
-     */
-    var applyFilter = function () {
-        var visibleTab = getSelectedTab();
-        if (!visibleTab) {
-            return;
-        }
-
-        var grid = visibleTab.grid;
-
-        // ensure the grid has been initialized
-        if (nfCommon.isDefinedAndNotNull(grid)) {
-            var gridData = grid.getData();
-
-            // update the search criteria
-            gridData.setFilterArgs({
-                searchString: getFilterText(),
-                property: $('#cluster-filter-type').combo('getSelectedOption').value
-            });
-            gridData.refresh();
-        }
-    };
-
-    var getSelectedTab = function () {
-        var selectedTab = null;
-        clusterTabs.forEach(function (tab) {
-            if ($('#' + tab.tableId).is(':visible')) {
-                selectedTab = tab;
-            }
-        });
-        return selectedTab;
-    }
-
-    /**
-     * Performs the filtering.
-     *
-     * @param {object} item     The item subject to filtering
-     * @param {object} args     Filter arguments
-     * @returns {Boolean}       Whether or not to include the item
-     */
-    var filter = function (item, args) {
-        if (args.searchString === '') {
-            return true;
-        }
-
-        try {
-            // perform the row filtering
-            var filterExp = new RegExp(args.searchString, 'i');
-        } catch (e) {
-            // invalid regex
-            return false;
-        }
-
-        var searchText = item[args.property];
-        if (args.property === 'address') {
-            searchText = formatNodeAddress(item);
-        } else if (args.property === 'status') {
-            searchText = formatNodeStatus(item);
-        }
-
-        // perform the filter
-        return searchText.search(filterExp) >= 0;
-    };
-
-    /**
-     * Updates count of displayed and total rows.
-     */
-    function updateFilterStats(selectedTab) {
-        if (!selectedTab) {
-            selectedTab = getSelectedTab();
-        }
-        if (selectedTab.dataView) {
-            var displayedRows = selectedTab.dataView.getLength();
-            var totalRows = selectedTab.rowCount;
-            $('#displayed-rows').text(displayedRows);
-            $('#total-rows').text(totalRows);
-        }
-    }
-
-    /**
-     * Clears any existing table filter.
-     */
-    var clearFilter = function () {
-        $('#cluster-filter').val('');
-        applyFilter();
-    }
-
-    /**
-     * Show the node details.
+     *     http://www.apache.org/licenses/LICENSE-2.0
      *
-     * @argument {object} item     The item
-     */
-    var showNodeDetails = function (item) {
-        $.ajax({
-            type: 'GET',
-            url: config.urls.nodes + '/' + encodeURIComponent(item.nodeId),
-            dataType: 'json'
-        }).done(function (response) {
-            var node = response.node;
-
-            // update the dialog fields
-            $('#node-id').text(node.nodeId);
-            $('#node-address').text(formatNodeAddress(node));
-
-            // format the events
-            var events = $('#node-events');
-            if ($.isArray(node.events) && node.events.length > 0) {
-                var eventMessages = [];
-                $.each(node.events, function (i, event) {
-                    eventMessages.push(event.timestamp + ": " + event.message);
-                });
-                $('<div></div>').append(nfCommon.formatUnorderedList(eventMessages)).appendTo(events);
-            } else {
-                events.append('<div><span class="unset">None</span></div>');
-            }
-
-            // show the dialog
-            $('#node-details-dialog').modal('show');
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Applies system diagnostics data to the JVM tab.
-     */
-    function updateJvmTableData(systemDiagnosticsResponse) {
-        if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-            && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
-
-            var jvmTableRows = [];
-            systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
-                var snapshot = nodeSnapshot.snapshot;
-
-                // sort the garbage collection
-                var garbageCollection = snapshot.garbageCollection.sort(function (a, b) {
-                    return a.name === b.name ? 0 : a.name > b.name ? 1 : -1;
-                });
-
-                // add the node jvm details
-                jvmTableRows.push({
-                    id: nodeSnapshot.nodeId,
-                    node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                    address: nodeSnapshot.address,
-                    maxHeap: snapshot.maxHeap,
-                    totalHeap: snapshot.totalHeap,
-                    usedHeap: snapshot.usedHeap,
-                    heapUtilization: snapshot.heapUtilization,
-                    maxNonHeap: snapshot.maxNonHeap,
-                    totalNonHeap: snapshot.totalNonHeap,
-                    usedNonHeap: snapshot.usedNonHeap,
-                    gcOldGen: garbageCollection[0].collectionCount + ' times (' +
-                    garbageCollection[0].collectionTime + ')',
-                    gcNewGen: garbageCollection[1].collectionCount + ' times (' +
-                    garbageCollection[1].collectionTime + ')',
-                    uptime: snapshot.uptime
-                });
-            });
-            jvmTab.rowCount = jvmTableRows.length;
-            jvmTab.dataView.setItems(jvmTableRows);
-            jvmTab.dataView.reSort();
-            jvmTab.grid.invalidate();
-        } else {
-            jvmTab.rowCount = 0;
-        }
-    }
-
-    /**
-     * Applies system diagnostics data to the System tab.
-     */
-    function updateSystemTableData(systemDiagnosticsResponse) {
-        if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-            && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
-
-            var systemTableRows = [];
-            systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
-                var snapshot = nodeSnapshot.snapshot;
-                systemTableRows.push({
-                    id: nodeSnapshot.nodeId,
-                    node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                    address: nodeSnapshot.address,
-                    processors: snapshot.availableProcessors,
-                    processorLoadAverage: snapshot.processorLoadAverage,
-                    totalThreads: snapshot.totalThreads,
-                    daemonThreads: snapshot.daemonThreads
-                });
-            });
-            systemTab.rowCount = systemTableRows.length;
-            systemTab.dataView.setItems(systemTableRows);
-            systemTab.dataView.reSort();
-            systemTab.grid.invalidate();
-        } else {
-            systemTab.rowCount = 0;
-        }
-    }
-
-    /**
-     * Applies system diagnostics data to the FlowFile Storage tab.
+     * 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.
      */
-    function updateFlowFileTableData(systemDiagnosticsResponse) {
-        if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-            && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
-
-            var flowFileTableRows = [];
-            systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
-                var snapshot = nodeSnapshot.snapshot;
-                flowFileTableRows.push({
-                    id: nodeSnapshot.nodeId,
-                    node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                    address: nodeSnapshot.address,
-                    ffRepoTotal: snapshot.flowFileRepositoryStorageUsage.totalSpace,
-                    ffRepoUsed: snapshot.flowFileRepositoryStorageUsage.usedSpace,
-                    ffRepoFree: snapshot.flowFileRepositoryStorageUsage.freeSpace,
-                    ffRepoUtil: snapshot.flowFileRepositoryStorageUsage.utilization
-                });
-            });
-            flowFileTab.rowCount = flowFileTableRows.length;
-            flowFileTab.dataView.setItems(flowFileTableRows);
-            flowFileTab.dataView.reSort();
-            flowFileTab.grid.invalidate();
-        } else {
-            flowFileTab.rowCount = 0;
-        }
-    }
-
-    /**
-     * Applies system diagnostics data to the Content Storage tab.
-     */
-    function updateContentTableData(systemDiagnosticsResponse) {
-        if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-            && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
-
-            var contentStorageTableRows = [];
-            systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
-                var snapshot = nodeSnapshot.snapshot;
-                snapshot.contentRepositoryStorageUsage.forEach(function (contentRepoUsage) {
-                    contentStorageTableRows.push({
-                        id: nodeSnapshot.nodeId + ':' + contentRepoUsage.identifier,
-                        address: nodeSnapshot.address,
-                        node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                        contentRepoId: contentRepoUsage.identifier,
-                        contentRepoTotal: contentRepoUsage.totalSpace,
-                        contentRepoUsed: contentRepoUsage.usedSpace,
-                        contentRepoFree: contentRepoUsage.freeSpace,
-                        contentRepoUtil: contentRepoUsage.utilization
-                    });
-                });
-            });
-
-            contentTab.rowCount = contentStorageTableRows.length;
-            contentTab.dataView.setItems(contentStorageTableRows);
-            contentTab.dataView.reSort();
-            contentTab.grid.invalidate();
-        } else {
-            contentTab.rowCount = 0;
-        }
-    }
-
-    /**
-     * Applies system diagnostics data to the Versions tab.
-     */
-    function updateVersionTableData(systemDiagnosticsResponse) {
-        if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-            && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
-
-            var versionTableRows = [];
-            systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
-                var snapshot = nodeSnapshot.snapshot;
-                versionTableRows.push({
-                    id: nodeSnapshot.nodeId,
-                    address: nodeSnapshot.address,
-                    node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                    version: snapshot.versionInfo.niFiVersion,
-                    javaVendor: snapshot.versionInfo.javaVendor,
-                    javaVersion: snapshot.versionInfo.javaVersion,
-                    osName: snapshot.versionInfo.osName,
-                    osVersion: snapshot.versionInfo.osVersion,
-                    osArchitecture: snapshot.versionInfo.osArchitecture
-                });
-            });
-
-            versionTab.dataView.setItems(versionTableRows);
-            versionTab.dataView.reSort();
-            versionTab.grid.invalidate();
-        }
-    }
-
-    /**
-     * Loads system diagnostics data for the cluster.
-     */
-    function refreshSystemDiagnosticsData() {
-        var systemDiagnosticsUri = config.urls.systemDiagnostics
-        var loadPromise = $.ajax({
-            type: 'GET',
-            url: systemDiagnosticsUri,
-            data: {
-                nodewise: true
-            },
-            dataType: 'json'
-        }).done(function (systemDiagnosticsResponse) {
-            var handlers = dataSetHandlers['systemDiagnostics'];
-            handlers.forEach(function (handler) {
-                handler(systemDiagnosticsResponse);
-            });
-        }).fail(nfErrorHandler.handleAjaxError);
-        return loadPromise;
-    };
-
-    /**
-     * Generic initialization for Slick Grid tables
-     */
-    function commonTableInit(tab) {
-        var dataView = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        dataView.setItems([], tab.tableIdColumn);
-
-        dataView.setFilterArgs({
-            searchString: getFilterText(),
-            property: $('#cluster-filter-type').combo('getSelectedOption').value
-        });
-        dataView.setFilter(filter);
-
-        // initialize the sort
-        tab.onSort({
-            columnId: tab.tableIdColumn,
-            sortAsc: true
-        }, dataView);
-
-        // initialize the grid
-        var columnModel = tab.tableColumnModel;
-        if (typeof columnModel === 'function') {
-            columnModel = columnModel();
-        }
-        var grid = new Slick.Grid('#' + tab.tableId, dataView, columnModel, tab.tableOptions);
-        grid.setSelectionModel(new Slick.RowSelectionModel());
-        grid.setSortColumn(tab.tableIdColumn, true);
-        grid.onSort.subscribe(function (e, args) {
-            tab.onSort({
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
-            }, dataView, tab);
-        });
-
-        // wire up the dataview to the grid
-        dataView.onRowCountChanged.subscribe(function (e, args) {
-            grid.updateRowCount();
-            grid.render();
-            updateFilterStats(tab);
-        });
-        dataView.onRowsChanged.subscribe(function (e, args) {
-            grid.invalidateRows(args.rows);
-            grid.render();
-        });
-
-        // click events
-        if (tab.tableOnClick) {
-            grid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-                var item = dataView.getItem(args.row);
-                tab.tableOnClick(e, args, target, item);
-            });
-        }
-
-        // hold onto an instance of the grid
-        $('#' + tab.tableId).data('gridInstance', grid);
-        tab.dataView = dataView;
-        tab.grid = grid;
-    };
-
-    /**
-     * Apply the cluster nodes data set to the table.
-     */
-    function updateNodesTableData(clusterResponse) {
-        var cluster = clusterResponse.cluster;
-
-        // ensure there are groups specified
-        if (nfCommon.isDefinedAndNotNull(cluster.nodes)) {
-            var clusterGrid = nodesTab.grid;
-            var clusterData = clusterGrid.getData();
-
-            // set the items
-            nodesTab.rowCount = cluster.nodes.length;
-            clusterData.setItems(cluster.nodes);
-            clusterData.reSort();
-            clusterGrid.invalidate();
-
-            // update the stats last refreshed timestamp
-            $('#cluster-last-refreshed').text(cluster.generated);
-        } else {
-            $('#total-nodes').text('0');
-        }
-    }
-
-    /**
-     * Refreshes cluster data sets from the server.
-     */
-    function refreshClusterData() {
-        var clusterNodesDataPromise = $.ajax({
-            type: 'GET',
-            url: config.urls.cluster,
-            dataType: 'json'
-        }).done(function (response) {
-            var handlers = dataSetHandlers['cluster'];
-            handlers.forEach(function (handler) {
-                handler(response);
-            });
-        }).fail(nfErrorHandler.handleAjaxError);
-        return clusterNodesDataPromise;
-    }
-
-    /**
-     * Event handler triggered when the user switches tabs.
-     */
-    function onSelectTab(tab) {
-        // Resize table
-        var tabGrid = tab.grid;
-        if (nfCommon.isDefinedAndNotNull(tabGrid)) {
-            tabGrid.resizeCanvas();
-        }
-
-        // Clear filter text
-        clearFilter();
-
-        // Reset filter options
-        $('#cluster-filter-type').combo({
-            options: tab.filterOptions,
-            select: function (option) {
-                applyFilter();
-            }
-        });
-
-        updateFilterStats(tab);
-    }
-
-    var nfClusterTable = {
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.ErrorHandler'],
+              function ($, Slick, nfCommon, nfDialog, nfErrorHandler) {
+                  return (nf.ClusterTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler));
+              });
+      } 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, nfCommon, nfDialog, nfErrorHandler) {
+      'use strict';
+    
         /**
-         * Initializes the cluster list.
+         * Configuration object used to hold a number of configuration items.
          */
-        init: function () {
-            // initialize the user details dialog
-            $('#node-details-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: 'Node Details',
-                buttons: [{
-                    buttonText: 'Ok',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            $('#node-details-dialog').modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // clear the details
-                        $('#node-address').text('');
-                        $('#node-id').text('');
-                        $('#node-events').empty();
+        var config = {
+            primaryNode: 'Primary Node',
+          clusterCoordinator: 'Cluster Coordinator',
+            urls: {
+                cluster: '../nifi-api/controller/cluster',
+              nodes: '../nifi-api/controller/cluster/nodes',
+              systemDiagnostics: '../nifi-api/system-diagnostics'
+          },
+          data: [{
+              name: 'cluster',
+              update: refreshClusterData,
+              isAuthorized: nfCommon.canAccessController
+          }, {
+              name: 'systemDiagnostics',
+              update: refreshSystemDiagnosticsData,
+              isAuthorized: nfCommon.canAccessSystem
+          }
+          ]
+      };
+  
+      var commonTableOptions = {
+          forceFitColumns: true,
+          enableTextSelectionOnCells: true,
+          enableCellNavigation: false,
+          enableColumnReorder: false,
+          autoEdit: false,
+          rowHeight: 24
+      };
+  
+      var nodesTab = {
+          name: 'Nodes',
+          data: {
+              dataSet: 'cluster',
+              update: updateNodesTableData
+          },
+          tabContentId: 'cluster-nodes-tab-content',
+          tableId: 'cluster-nodes-table',
+          tableColumnModel: createNodeTableColumnModel,
+          tableIdColumn: 'nodeId',
+          tableOptions: commonTableOptions,
+          tableOnClick: nodesTableOnClick,
+          init: commonTableInit,
+          onSort: sort,
+          onTabSelected: onSelectTab,
+          filterOptions: [{
+              text: 'by address',
+                value: 'address'
+            }, {
+                text: nf._.msg('nf-cluster-table.ByStatus'),
+                value: 'status'
+          }]
+      };
+  
+      var jvmTab = {
+          name: 'JVM',
+          data: {
+              dataSet: 'systemDiagnostics',
+              update: updateJvmTableData
+          },
+          tabContentId: 'cluster-jvm-tab-content',
+          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: 'uptime',
+                  field: 'uptime',
+                  name: 'Uptime',
+                  sortable: true,
+                  resizable: true,
+                  cssClass: 'cell-right',
+                  headerCssClass: 'header-right'
+              }
+          ],
+          tableIdColumn: 'id',
+          tableOptions: commonTableOptions,
+          tableOnClick: null,
+          init: commonTableInit,
+          onSort: sort,
+          onTabSelected: onSelectTab,
+          filterOptions: [{
+              text: 'by address',
+              value: 'node'
+          }]
+      };
+  
+      var systemTab = {
+          name: 'System',
+          data: {
+              dataSet: 'systemDiagnostics',
+              update: updateSystemTableData
+          },
+          tabContentId: 'cluster-system-tab-content',
+          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'
+              }
+          ],
+          tableIdColumn: 'id',
+          tableOptions: commonTableOptions,
+          tableOnClick: null,
+          init: commonTableInit,
+          onSort: sort,
+          onTabSelected: onSelectTab,
+          filterOptions: [{
+              text: 'by address',
+              value: 'node'
+          }]
+      };
+  
+      var flowFileTab = {
+          name: 'FlowFile Storage',
+          data: {
+              dataSet: 'systemDiagnostics',
+              update: updateFlowFileTableData
+          },
+          tabContentId: 'cluster-flowfile-tab-content',
+          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'
+              }
+          ],
+          tableIdColumn: 'id',
+          tableOptions: commonTableOptions,
+          tableOnClick: null,
+          init: commonTableInit,
+          onSort: sort,
+          onTabSelected: onSelectTab,
+          filterOptions: [{
+              text: 'by address',
+              value: 'node'
+          }]
+      };
+  
+      var contentTab = {
+          name: 'Content Storage',
+          data: {
+              dataSet: 'systemDiagnostics',
+              update: updateContentTableData
+          },
+          tabContentId: 'cluster-content-tab-content',
+          tableId: 'cluster-content-table',
+          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'
+              }
+          ],
+          tableIdColumn: 'id',
+          tableOptions: commonTableOptions,
+          tableOnClick: null,
+          init: commonTableInit,
+          onSort: sort,
+          onTabSelected: onSelectTab,
+          filterOptions: [{
+              text: 'by address',
+              value: 'node'
+          }, {
+              text: 'by repository',
+              value: 'contentRepoId'
+          }]
+      };
+  
+      var versionTab = {
+          name: 'Versions',
+          data: {
+              dataSet: 'systemDiagnostics',
+              update: updateVersionTableData
+          },
+          tabContentId: 'cluster-version-tab-content',
+          tableId: 'cluster-version-table',
+          tableColumnModel: [
+              {id: 'node', field: 'node', name: 'Node Address', sortable: true, resizable: true},
+              {id: 'version', field: 'version', name: 'NiFi Version', sortable: true, resizable: true},
+              {id: 'javavendor', field: 'javaVendor', name: 'Java Vendor', sortable: true, resizable: true},
+              {id: 'javaversion', field: 'javaVersion', name: 'Java Version', sortable: true, resizable: true},
+              {id: 'osname', field: 'osName', name: 'OS Name', sortable: true, resizable: true},
+              {id: 'osversion', field: 'osVersion', name: 'OS Version', sortable: true, resizable: true},
+              {id: 'osarch', field: 'osArchitecture', name: 'OS Architecture', sortable: true, resizable: true}
+          ],
+          tableIdColumn: 'id',
+          tableOptions: commonTableOptions,
+          tableOnClick: null,
+          init: commonTableInit,
+          onSort: sort,
+          onTabSelected: onSelectTab,
+          filterOptions: [{
+              text: 'by address',
+              value: 'address'
+          }]
+      };
+  
+      var clusterTabs = [nodesTab, systemTab, jvmTab, flowFileTab, contentTab, versionTab];
+      var tabsByName = {};
+      var dataSetHandlers = {};
+  
+      /**
+       * Click handler for the Nodes table options.
+       */
+      function nodesTableOnClick(e, args, target, item) {
+          if (nodesTab.grid.getColumns()[args.cell].id === 'actions') {
+              if (target.hasClass('prompt-for-connect')) {
+                  promptForConnect(item);
+              } else if (target.hasClass('prompt-for-removal')) {
+                  promptForRemoval(item);
+              } else if (target.hasClass('prompt-for-disconnect')) {
+                  promptForDisconnect(item);
+              }
+          } else if (nodesTab.grid.getColumns()[args.cell].id === 'moreDetails') {
+              if (target.hasClass('show-node-details')) {
+                  showNodeDetails(item);
+              }
+          }
+      }
+  
+      /**
+       * Creates the Slick Grid column model for the Nodes table.
+       */
+      function createNodeTableColumnModel() {
+            var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
+                return '<div title="'+nf._.msg('nf-cluster-table.ViewDetails')+'" class="pointer show-node-details fa fa-info-circle" style="margin-top: 2px;"></div>';
+            };
+    
+            // define a custom formatter for the run status column
+            var nodeFormatter = function (row, cell, value, columnDef, dataContext) {
+                return formatNodeAddress(dataContext);
+            };
+    
+            // function for formatting the last accessed time
+            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
+              return nfCommon.formatValue(value);
+            };
+    
+            // define a custom formatter for the status column
+            var statusFormatter = function (row, cell, value, columnDef, dataContext) {
+              return formatNodeStatus(dataContext);
+            };
+    
+            var columnModel = [
+              {
+                  id: 'moreDetails',
+                  name: '&nbsp;',
+                  sortable: false,
+                  resizable: false,
+                  formatter: moreDetailsFormatter,
+                  width: 50,
+                  maxWidth: 50
+              },
+              {
+                  id: 'formattedNodeAddress',
+                  field: 'formattedNodeAddress',
+                  name: nf._.msg('nf-cluster-table.Node Address'),
+                  formatter: nodeFormatter,
+                  resizable: true,
+                  sortable: true
+              },
+              {
+                  id: 'activeThreadCount',
+                  field: 'activeThreadCount',
+                  name: nf._.msg('nf-cluster-table.ActiveThreadCount'),
+                  resizable: true,
+                  sortable: true,
+                  defaultSortAsc: false
+              },
+              {
+                  id: 'queued',
+                  field: 'queued',
+                  name: '<span class="queued-title">'+nf._.msg('nf-cluster-table.Queue')+'</span>&nbsp;/&nbsp;<span class="queued-size-title">Size</span>',
+                  resizable: true,
+                  sortable: true,
+                  defaultSortAsc: false
+              },
+              {
+                  id: 'status',
+                  field: 'status',
+                  name: nf._.msg('nf-cluster-table.Status'),
+                  formatter: statusFormatter,
+                  resizable: true,
+                  sortable: true
+              },
+              {
+                  id: 'uptime',
+                  field: 'nodeStartTime',
+                  name: nf._.msg('nf-cluster-table.Uptime'),
+                  formatter: valueFormatter,
+                  resizable: true,
+                  sortable: true,
+                  defaultSortAsc: false
+              },
+              {
+                  id: 'heartbeat',
+                  field: 'heartbeat',
+                  name: nf._.msg('nf-cluster-table.LastHeartbeat'),
+                  formatter: valueFormatter,
+                  resizable: true,
+                  sortable: true,
+                  defaultSortAsc: false
+              }
+            ];
+    
+            // only allow the admin to modify the cluster
+          if (nfCommon.canModifyController()) {
+                var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var canDisconnect = false;
+                    var canConnect = false;
+    
+                    // determine the current status
+                    if (dataContext.status === 'CONNECTED' || dataContext.status === 'CONNECTING') {
+                        canDisconnect = true;
+                    } else if (dataContext.status === 'DISCONNECTED') {
+                        canConnect = true;
                     }
-                }
-            });
-
-            // define the function for filtering the list
-            $('#cluster-filter').keyup(function () {
-                applyFilter();
-            });
-
-            // Authorize data sets
-            var dataSetAuthorized = {};
-            config.data = config.data.filter(function (dataSetConfig) {
-                dataSetConfig.authorized = dataSetConfig.isAuthorized();
-                dataSetAuthorized[dataSetConfig.name] = dataSetConfig.authorized;
-                if (dataSetConfig.authorized) {
-                    return true;
-                } else {
-                    return false;
-                }
-            });
-
-            // Filter tabs to authorized data sets
-            clusterTabs = clusterTabs.filter(function (tab) {
-                var tabDataSet = tab.data.dataSet;
-                if (dataSetAuthorized[tabDataSet]) {
-                    return true;
-                } else {
-                    return false;
-                }
-            });
-            clusterTabs.forEach(function (tab) {
-                tabsByName[tab.name] = tab;
-                var dataSetHandlerList = dataSetHandlers[tab.data.dataSet];
-                if (dataSetHandlerList) {
-                    dataSetHandlers[tab.data.dataSet] = dataSetHandlerList.concat([tab.data.update]);
-                } else {
-                    dataSetHandlers[tab.data.dataSet] = [tab.data.update];
-                }
-            });
-
-            // Initialize tab set
-            $('#cluster-tabs').tabbs({
-                tabStyle: 'tab',
-                selectedTabStyle: 'selected-tab',
-                scrollableTabContentStyle: 'scrollable',
-                tabs: clusterTabs,
-                select: function () {
-                    var tab = $(this).text();
-                    var selectedTab = tabsByName[tab];
-                    if (selectedTab) {
-                        selectedTab.onTabSelected(selectedTab);
+    
+                    // return the appropriate markup
+                    if (canConnect) {
+                        return '<div title="'+nf._.msg('nf-cluster-table.Connect')+'" class="pointer prompt-for-connect fa fa-plug" style="margin-top: 2px;"></div>&nbsp;<div title="'+nf._.msg('nf-cluster-table.Delete')+'" class="pointer prompt-for-removal fa fa-trash" style="margin-top: 2px;"></div>';
+                    } else if (canDisconnect) {
+                    	return '<div title="'+nf._.msg('nf-cluster-table.Disconnect')+'" class="pointer prompt-for-disconnect fa fa-power-off" style="margin-top: 2px;"></div>';
                     } else {
-                        console.error('Failed to match tab: ', tab, tabsByName);
+                        return '<div style="width: 16px; height: 16px;">&nbsp;</div>';
                     }
-                }
-            });
-
-            // listen for browser resize events to update the page size
-            $(window).resize(function () {
-                nfClusterTable.resetTableSize();
+                };
+    
+              columnModel.push({
+                  id: 'actions',
+                  label: '&nbsp;',
+                  formatter: actionFormatter,
+                  resizable: false,
+                  sortable: false,
+                  width: 80,
+                  maxWidth: 80
+              });
+          }
+  
+          return columnModel;
+      }
+  
+      var prevColumn, count;
+  
+      /**
+       * Sorts the specified data using the specified sort details.
+       *
+       * @param {object} sortDetails
+       * @param {object} data
+       */
+      function sort(sortDetails, dataView, tab) {
+          // defines a function for sorting
+          var comparer = function (a, b) {
+              if (sortDetails.columnId === 'heartbeat' || sortDetails.columnId === 'uptime') {
+                  var aDate = nfCommon.parseDateTime(a[sortDetails.columnId]);
+                  var bDate = nfCommon.parseDateTime(b[sortDetails.columnId]);
+                  return aDate.getTime() - bDate.getTime();
+              } else if (sortDetails.columnId === 'queued') {
+                  var aSplit = a[sortDetails.columnId].split(/ \/ /);
+                  var bSplit = b[sortDetails.columnId].split(/ \/ /);
+                  var mod = count % 4;
+                  if (mod < 2) {
+                      $('#cluster-nodes-table span.queued-title').addClass('sorted');
+                      var aCount = nfCommon.parseCount(aSplit[0]);
+                      var bCount = nfCommon.parseCount(bSplit[0]);
+                      return aCount - bCount;
+                  } else {
+                      $('#cluster-nodes-table span.queued-size-title').addClass('sorted');
+                      var aSize = nfCommon.parseSize(aSplit[1]);
+                      var bSize = nfCommon.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 = nfCommon.parseSize(a[sortDetails.columnId]);
+                  var bSize = nfCommon.parseSize(b[sortDetails.columnId]);
+                  return aSize - bSize;
+              } else if (sortDetails.columnId === 'totalThreads' || sortDetails.columnId === 'daemonThreads'
+                  || sortDetails.columnId === 'processors') {
+                  var aCount = nfCommon.parseCount(a[sortDetails.columnId]);
+                  var bCount = nfCommon.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 = nfCommon.parseCount(aSplit[0]);
+                  var bCount = nfCommon.parseCount(bSplit[0]);
+                  return aCount - bCount;
+              } else if (sortDetails.columnId === 'status') {
+                  var aStatus = formatNodeStatus(a);
+                  var bStatus = formatNodeStatus(b);
+                  return aStatus === bStatus ? 0 : aStatus > bStatus ? 1 : -1;
+              } else if (sortDetails.columnId === 'formattedNodeAddress') {
+                  var aNode = formatNodeAddress(a);
+                  var bNode = formatNodeAddress(b);
+                  return aNode === bNode ? 0 : aNode > bNode ? 1 : -1;
+              } else {
+                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                  return aString === bString ? 0 : aString > bString ? 1 : -1;
+              }
+          };
+  
+          // remove previous sort indicators
+          $('#cluster-nodes-table span.queued-title').removeClass('sorted');
+          $('#cluster-nodes-table span.queued-size-title').removeClass('sorted');
+  
+          // update/reset the count as appropriate
+          if (prevColumn !== sortDetails.columnId) {
+              count = 0;
+          } else {
+              count++;
+          }
+  
+          // perform the sort
+          dataView.sort(comparer, sortDetails.sortAsc);
+  
+          // record the previous table and sorted column
+          prevColumn = sortDetails.columnId;
+      };
+  
+      /**
+       * Formats the address for the specified node.
+       *
+       * @param {object} node
+       * @returns {string}
+       */
+      var formatNodeAddress = function (node) {
+          return nfCommon.escapeHtml(node.address) + ':' + nfCommon.escapeHtml(node.apiPort);
+      };
+  
+      /**
+       * Formats the status for the specified node.
+       *
+       * @param {object} node
+       * @returns {string}
+       */
+      var formatNodeStatus = function (node) {
+          var markup = node.status;
+          if (node.roles.includes(config.primaryNode)) {
+              markup += ', PRIMARY';
+          }
+          if (node.roles.includes(config.clusterCoordinator)) {
+              markup += ', COORDINATOR';
+          }
+          return markup;
+      }
+  
+      /**
+       * Prompts to verify node connection.
+       *
+       * @argument {object} node     The node
+       */
+      var promptForConnect = function (node) {
+          // prompt to connect
+          nfDialog.showYesNoDialog({
+              headerText: 'Connect Node',
+              dialogContent: 'Connect \'' + formatNodeAddress(node) + '\' to this cluster?',
+              yesHandler: function () {
+                  connect(node.nodeId);
+              }
+          });
+      };
+  
+      /**
+       * Connects the node in the specified row.
+       *
+       * @argument {string} nodeId     The node id
+       */
+      var connect = function (nodeId) {
+          var entity = {
+              'node': {
+                  'nodeId': nodeId,
+                  'status': 'CONNECTING'
+              }
+          };
+          $.ajax({
+              type: 'PUT',
+              url: config.urls.nodes + '/' + encodeURIComponent(nodeId),
+              data: JSON.stringify(entity),
+              dataType: 'json',
+              contentType: 'application/json'
+          }).done(function (response) {
+              var node = response.node;
+  
+              // update the node in the table
+              var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
+              var clusterData = clusterGrid.getData();
+              clusterData.updateItem(node.nodeId, node);
+          }).fail(nfErrorHandler.handleAjaxError);
+      };
+  
+      /**
+       * Prompts to verify node disconnection.
+       *
+       * @argument {object} node     The node
+       */
+      var promptForDisconnect = function (node) {
+          // prompt for disconnect
+          nfDialog.showYesNoDialog({
+              headerText: 'Disconnect Node',
+              dialogContent: 'Disconnect \'' + formatNodeAddress(node) + '\' from the cluster?',
+              yesHandler: function () {
+                  disconnect(node.nodeId);
+              }
+          });
+      };
+  
+      /**
+       * Disconnects the node in the specified row.
+       *
+       * @argument {string} nodeId     The node id
+       */
+      var disconnect = function (nodeId) {
+          var entity = {
+              'node': {
+                  'nodeId': nodeId,
+                  'status': 'DISCONNECTING'
+              }
+          };
+  
+          $.ajax({
+              type: 'PUT',
+              url: config.urls.nodes + '/' + encodeURIComponent(nodeId),
+              data: JSON.stringify(entity),
+              dataType: 'json',
+              contentType: 'application/json'
+          }).done(function (response) {
+              var node = response.node;
+  
+              // update the node in the table
+              var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
+              var clusterData = clusterGrid.getData();
+              clusterData.updateItem(node.nodeId, node);
+          }).fail(nfErrorHandler.handleAjaxError);
+      };
+  
+      /**
+       * Prompts to verify node disconnection.
+       *
+       * @argument {object} node     The node
+       */
+      var promptForRemoval = function (node) {
+          // prompt for disconnect
+          nfDialog.showYesNoDialog({
+              headerText: 'Remove Node',
+              dialogContent: 'Remove \'' + formatNodeAddress(node) + '\' from the cluster?',
+              yesHandler: function () {
+                  remove(node.nodeId);
+              }
+          });
+      };
+  
+      /**
+       * Disconnects the node in the specified row.
+       *
+       * @argument {string} nodeId     The node id
+       */
+      var remove = function (nodeId) {
+          $.ajax({
+              type: 'DELETE',
+              url: config.urls.nodes + '/' + encodeURIComponent(nodeId),
+              dataType: 'json'
+          }).done(function () {
+              // get the table and update the row accordingly
+              var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
+              var clusterData = clusterGrid.getData();
+              clusterData.deleteItem(nodeId);
+          }).fail(nfErrorHandler.handleAjaxError);
+      };
+  
+      /**
+       * 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 $('#cluster-filter').val();
+      };
+  
+      /**
+       * Applies the filter found in the filter expression text field.
+       */
+      var applyFilter = function () {
+          var visibleTab = getSelectedTab();
+          if (!visibleTab) {
+              return;
+          }
+  
+          var grid = visibleTab.grid;
+  
+          // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(grid)) {
+              var gridData = grid.getData();
+  
+              // update the search criteria
+              gridData.setFilterArgs({
+                  searchString: getFilterText(),
+                  property: $('#cluster-filter-type').combo('getSelectedOption').value
+              });
+              gridData.refresh();
+          }
+      };
+  
+      var getSelectedTab = function () {
+          var selectedTab = null;
+          clusterTabs.forEach(function (tab) {
+              if ($('#' + tab.tableId).is(':visible')) {
+                  selectedTab = tab;
+              }
+          });
+          return selectedTab;
+      }
+  
+      /**
+       * Performs the filtering.
+       *
+       * @param {object} item     The item subject to filtering
+       * @param {object} args     Filter arguments
+       * @returns {Boolean}       Whether or not to include the item
+       */
+      var filter = function (item, args) {
+          if (args.searchString === '') {
+              return true;
+          }
+  
+          try {
+              // perform the row filtering
+              var filterExp = new RegExp(args.searchString, 'i');
+          } catch (e) {
+              // invalid regex
+              return false;
+          }
+  
+          var searchText = item[args.property];
+          if (args.property === 'address') {
+              searchText = formatNodeAddress(item);
+          } else if (args.property === 'status') {
+              searchText = formatNodeStatus(item);
+          }
+  
+          // perform the filter
+          return searchText.search(filterExp) >= 0;
+      };
+  
+      /**
+       * Updates count of displayed and total rows.
+       */
+      function updateFilterStats(selectedTab) {
+          if (!selectedTab) {
+              selectedTab = getSelectedTab();
+          }
+          if (selectedTab.dataView) {
+              var displayedRows = selectedTab.dataView.getLength();
+              var totalRows = selectedTab.rowCount;
+              $('#displayed-rows').text(displayedRows);
+              $('#total-rows').text(totalRows);
+          }
+      }
+  
+      /**
+       * Clears any existing table filter.
+       */
+      var clearFilter = function () {
+          $('#cluster-filter').val('');
+          applyFilter();
+      }
+  
+      /**
+       * Show the node details.
+       *
+       * @argument {object} item     The item
+       */
+      var showNodeDetails = function (item) {
+          $.ajax({
+              type: 'GET',
+              url: config.urls.nodes + '/' + encodeURIComponent(item.nodeId),
+              dataType: 'json'
+          }).done(function (response) {
+              var node = response.node;
+  
+              // update the dialog fields
+              $('#node-id').text(node.nodeId);
+              $('#node-address').text(formatNodeAddress(node));
+  
+              // format the events
+              var events = $('#node-events');
+              if ($.isArray(node.events) && node.events.length > 0) {
+                  var eventMessages = [];
+                  $.each(node.events, function (i, event) {
+                      eventMessages.push(event.timestamp + ": " + event.message);
+                  });
+                  $('<div></div>').append(nfCommon.formatUnorderedList(eventMessages)).appendTo(events);
+              } else {
+                  events.append('<div><span class="unset">None</span></div>');
+              }
+  
+              // show the dialog
+              $('#node-details-dialog').modal('show');
+          }).fail(nfErrorHandler.handleAjaxError);
+      };
+  
+      /**
+       * Applies system diagnostics data to the JVM tab.
+       */
+      function updateJvmTableData(systemDiagnosticsResponse) {
+          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+  
+              var jvmTableRows = [];
+              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
+                  var snapshot = nodeSnapshot.snapshot;
+  
+                  // sort the garbage collection
+                  var garbageCollection = snapshot.garbageCollection.sort(function (a, b) {
+                      return a.name === b.name ? 0 : a.name > b.name ? 1 : -1;
+                  });
+  
+                  // add the node jvm details
+                  jvmTableRows.push({
+                      id: nodeSnapshot.nodeId,
+                      node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                      address: nodeSnapshot.address,
+                      maxHeap: snapshot.maxHeap,
+                      totalHeap: snapshot.totalHeap,
+                      usedHeap: snapshot.usedHeap,
+                      heapUtilization: snapshot.heapUtilization,
+                      maxNonHeap: snapshot.maxNonHeap,
+                      totalNonHeap: snapshot.totalNonHeap,
+                      usedNonHeap: snapshot.usedNonHeap,
+                      gcOldGen: garbageCollection[0].collectionCount + ' times (' +
+                      garbageCollection[0].collectionTime + ')',
+                      gcNewGen: garbageCollection[1].collectionCount + ' times (' +
+                      garbageCollection[1].collectionTime + ')',
+                      uptime: snapshot.uptime
+                  });
+              });
+              jvmTab.rowCount = jvmTableRows.length;
+              jvmTab.dataView.setItems(jvmTableRows);
+              jvmTab.dataView.reSort();
+              jvmTab.grid.invalidate();
+          } else {
+              jvmTab.rowCount = 0;
+          }
+      }
+  
+      /**
+       * Applies system diagnostics data to the System tab.
+       */
+      function updateSystemTableData(systemDiagnosticsResponse) {
+          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+  
+              var systemTableRows = [];
+              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
+                  var snapshot = nodeSnapshot.snapshot;
+                  systemTableRows.push({
+                      id: nodeSnapshot.nodeId,
+                      node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                      address: nodeSnapshot.address,
+                      processors: snapshot.availableProcessors,
+                      processorLoadAverage: snapshot.processorLoadAverage,
+                      totalThreads: snapshot.totalThreads,
+                      daemonThreads: snapshot.daemonThreads
+                  });
+              });
+              systemTab.rowCount = systemTableRows.length;
+              systemTab.dataView.setItems(systemTableRows);
+              systemTab.dataView.reSort();
+              systemTab.grid.invalidate();
+          } else {
+              systemTab.rowCount = 0;
+          }
+      }
+  
+      /**
+       * Applies system diagnostics data to the FlowFile Storage tab.
+       */
+      function updateFlowFileTableData(systemDiagnosticsResponse) {
+          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+  
+              var flowFileTableRows = [];
+              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
+                  var snapshot = nodeSnapshot.snapshot;
+                  flowFileTableRows.push({
+                      id: nodeSnapshot.nodeId,
+                      node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                      address: nodeSnapshot.address,
+                      ffRepoTotal: snapshot.flowFileRepositoryStorageUsage.totalSpace,
+                      ffRepoUsed: snapshot.flowFileRepositoryStorageUsage.usedSpace,
+                      ffRepoFree: snapshot.flowFileRepositoryStorageUsage.freeSpace,
+                      ffRepoUtil: snapshot.flowFileRepositoryStorageUsage.utilization
+                  });
+              });
+              flowFileTab.rowCount = flowFileTableRows.length;
+              flowFileTab.dataView.setItems(flowFileTableRows);
+              flowFileTab.dataView.reSort();
+              flowFileTab.grid.invalidate();
+          } else {
+              flowFileTab.rowCount = 0;
+          }
+      }
+  
+      /**
+       * Applies system diagnostics data to the Content Storage tab.
+       */
+      function updateContentTableData(systemDiagnosticsResponse) {
+          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+  
+              var contentStorageTableRows = [];
+              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
+                  var snapshot = nodeSnapshot.snapshot;
+                  snapshot.contentRepositoryStorageUsage.forEach(function (contentRepoUsage) {
+                      contentStorageTableRows.push({
+                          id: nodeSnapshot.nodeId + ':' + contentRepoUsage.identifier,
+                          address: nodeSnapshot.address,
+                          node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                          contentRepoId: contentRepoUsage.identifier,
+                          contentRepoTotal: contentRepoUsage.totalSpace,
+                          contentRepoUsed: contentRepoUsage.usedSpace,
+                          contentRepoFree: contentRepoUsage.freeSpace,
+                          contentRepoUtil: contentRepoUsage.utilization
+                      });
+                  });
+              });
+  
+              contentTab.rowCount = contentStorageTableRows.length;
+              contentTab.dataView.setItems(contentStorageTableRows);
+              contentTab.dataView.reSort();
+              contentTab.grid.invalidate();
+          } else {
+              contentTab.rowCount = 0;
+          }
+      }
+  
+      /**
+       * Applies system diagnostics data to the Versions tab.
+       */
+      function updateVersionTableData(systemDiagnosticsResponse) {
+          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+  
+              var versionTableRows = [];
+              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
+                  var snapshot = nodeSnapshot.snapshot;
+                  versionTableRows.push({
+                      id: nodeSnapshot.nodeId,
+                      address: nodeSnapshot.address,
+                      node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                      version: snapshot.versionInfo.niFiVersion,
+                      javaVendor: snapshot.versionInfo.javaVendor,
+                      javaVersion: snapshot.versionInfo.javaVersion,
+                      osName: snapshot.versionInfo.osName,
+                      osVersion: snapshot.versionInfo.osVersion,
+                      osArchitecture: snapshot.versionInfo.osArchitecture
+                  });
+              });
+  
+              versionTab.dataView.setItems(versionTableRows);
+              versionTab.dataView.reSort();
+              versionTab.grid.invalidate();
+          }
+      }
+  
+      /**
+       * Loads system diagnostics data for the cluster.
+       */
+      function refreshSystemDiagnosticsData() {
+          var systemDiagnosticsUri = config.urls.systemDiagnostics
+          var loadPromise = $.ajax({
+              type: 'GET',
+              url: systemDiagnosticsUri,
+              data: {
+                  nodewise: true
+              },
+              dataType: 'json'
+          }).done(function (systemDiagnosticsResponse) {
+              var handlers = dataSetHandlers['systemDiagnostics'];
+              handlers.forEach(function (handler) {
+                  handler(systemDiagnosticsResponse);
+              });
+          }).fail(nfErrorHandler.handleAjaxError);
+          return loadPromise;
+      };
+  
+      /**
+       * Generic initialization for Slick Grid tables
+       */
+      function commonTableInit(tab) {
+          var dataView = new Slick.Data.DataView({
+                inlineFilters: false
             });
-
-            // initialize tabs
-            clusterTabs.forEach(function (tab) {
-                try {
-                    tab.init(tab);
-                } catch (ex) {
-                    console.error('Failed to initialize tab', tab, ex);
-                }
-            });
-        },
-
-        /**
-         * Update the size of the grid based on its container's current size.
-         */
-        resetTableSize: function () {
-            clusterTabs.forEach(function (tab) {
-                if (tab && tab.grid) {
-                    tab.grid.resizeCanvas();
-                }
-            });
-        },
-
-        /**
-         * Load the processor cluster table.
-         */
-        loadClusterTable: function () {
-            var updateDataDeferreds = config.data.map(function (dataSetSpec) {
-                var dataSetDeferred = dataSetSpec.update();
-                return dataSetDeferred;
-            });
-            var aggregateDeferred = $.when.apply($, updateDataDeferreds);
-            aggregateDeferred = aggregateDeferred.done(function (aggregateResult) {
-                updateFilterStats(nodesTab);
+          dataView.setItems([], tab.tableIdColumn);
+  
+          dataView.setFilterArgs({
+                searchString: getFilterText(),
+                property: $('#cluster-filter-type').combo('getSelectedOption').value
             });
-            return aggregateDeferred;
-        }
-    };
-
-    return nfClusterTable;
-}));
\ No newline at end of file
+          dataView.setFilter(filter);
+    
+            // initialize the sort
+          tab.onSort({
+              columnId: tab.tableIdColumn,
+                sortAsc: true
+          }, dataView);
+    
+            // initialize the grid
+          var columnModel = tab.tableColumnModel;
+          if (typeof columnModel === 'function') {
+              columnModel = columnModel();
+          }
+          var grid = new Slick.Grid('#' + tab.tableId, dataView, columnModel, tab.tableOptions);
+          grid.setSelectionModel(new Slick.RowSelectionModel());
+          grid.setSortColumn(tab.tableIdColumn, true);
+          grid.onSort.subscribe(function (e, args) {
+              tab.onSort({
+                  columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+              }, dataView, tab);
+          });
+  
+          // wire up the dataview to the grid
+          dataView.onRowCountChanged.subscribe(function (e, args) {
+              grid.updateRowCount();
+              grid.render();
+              updateFilterStats(tab);
+          });
+          dataView.onRowsChanged.subscribe(function (e, args) {
+              grid.invalidateRows(args.rows);
+              grid.render();
+          });
+  
+          // click events
+          if (tab.tableOnClick) {
+              grid.onClick.subscribe(function (e, args) {
+                    var target = $(e.target);
+                  var item = dataView.getItem(args.row);
+                  tab.tableOnClick(e, args, target, item);
+              });
+          }
+    
+            // hold onto an instance of the grid
+          $('#' + tab.tableId).data('gridInstance', grid);
+          tab.dataView = dataView;
+          tab.grid = grid;
+      };
+  
+      /**
+       * Apply the cluster nodes data set to the table.
+       */
+      function updateNodesTableData(clusterResponse) {
+          var cluster = clusterResponse.cluster;
+    
+            // ensure there are groups specified
+          if (nfCommon.isDefinedAndNotNull(cluster.nodes)) {
+              var clusterGrid = nodesTab.grid;
+                var clusterData = clusterGrid.getData();
+    
+                // set the items
+              nodesTab.rowCount = cluster.nodes.length;
+                clusterData.setItems(cluster.nodes);
+                clusterData.reSort();
+                clusterGrid.invalidate();
+    
+                // update the stats last refreshed timestamp
+                $('#cluster-last-refreshed').text(cluster.generated);
+            } else {
+                $('#total-nodes').text('0');
+            }
+      }
+  
+      /**
+       * Refreshes cluster data sets from the server.
+       */
+      function refreshClusterData() {
+          var clusterNodesDataPromise = $.ajax({
+              type: 'GET',
+              url: config.urls.cluster,
+              dataType: 'json'
+          }).done(function (response) {
+              var handlers = dataSetHandlers['cluster'];
+              handlers.forEach(function (handler) {
+                  handler(response);
+              });
+          }).fail(nfErrorHandler.handleAjaxError);
+          return clusterNodesDataPromise;
+      }
+  
+      /**
+       * Event handler triggered when the user switches tabs.
+       */
+      function onSelectTab(tab) {
+          // Resize table
+          var tabGrid = tab.grid;
+          if (nfCommon.isDefinedAndNotNull(tabGrid)) {
+              tabGrid.resizeCanvas();
+          }
+  
+          // Clear filter text
+          clearFilter();
+  
+          // Reset filter options
+          $('#cluster-filter-type').combo({
+              options: tab.filterOptions,
+              select: function (option) {
+                  applyFilter();
+              }
+          });
+  
+          updateFilterStats(tab);
+      }
+  
+      var nfClusterTable = {
+          /**
+           * Initializes the cluster list.
+           */
+          init: function () {
+              // initialize the user details dialog
+              $('#node-details-dialog').modal({
+                  scrollableContentStyle: 'scrollable',
+                  headerText: 'Node Details',
+                  buttons: [{
+                      buttonText: 'Ok',
+                      color: {
+                          base: '#728E9B',
+                          hover: '#004849',
+                          text: '#ffffff'
+                      },
+                      handler: {
+                          click: function () {
+                              $('#node-details-dialog').modal('hide');
+                          }
+                      }
+                  }],
+                  handler: {
+                      close: function () {
+                          // clear the details
+                          $('#node-address').text('');
+                          $('#node-id').text('');
+                          $('#node-events').empty();
+                      }
+                  }
+              });
+  
+              // define the function for filtering the list
+              $('#cluster-filter').keyup(function () {
+                  applyFilter();
+              });
+  
+              // Authorize data sets
+              var dataSetAuthorized = {};
+              config.data = config.data.filter(function (dataSetConfig) {
+                  dataSetConfig.authorized = dataSetConfig.isAuthorized();
+                  dataSetAuthorized[dataSetConfig.name] = dataSetConfig.authorized;
+                  if (dataSetConfig.authorized) {
+                      return true;
+                  } else {
+                      return false;
+                  }
+              });
+  
+              // Filter tabs to authorized data sets
+              clusterTabs = clusterTabs.filter(function (tab) {
+                  var tabDataSet = tab.data.dataSet;
+                  if (dataSetAuthorized[tabDataSet]) {
+                      return true;
+                  } else {
+                      return false;
+                  }
+              });
+              clusterTabs.forEach(function (tab) {
+                  tabsByName[tab.name] = tab;
+                  var dataSetHandlerList = dataSetHandlers[tab.data.dataSet];
+                  if (dataSetHandlerList) {
+                      dataSetHandlers[tab.data.dataSet] = dataSetHandlerList.concat([tab.data.update]);
+                  } else {
+                      dataSetHandlers[tab.data.dataSet] = [tab.data.update];
+                  }
+              });
+  
+              // Initialize tab set
+              $('#cluster-tabs').tabbs({
+                  tabStyle: 'tab',
+                  selectedTabStyle: 'selected-tab',
+                  scrollableTabContentStyle: 'scrollable',
+                  tabs: clusterTabs,
+                  select: function () {
+                      var tab = $(this).text();
+                      var selectedTab = tabsByName[tab];
+                      if (selectedTab) {
+                          selectedTab.onTabSelected(selectedTab);
+                      } else {
+                          console.error('Failed to match tab: ', tab, tabsByName);
+                      }
+                  }
+              });
+  
+              // listen for browser resize events to update the page size
+              $(window).resize(function () {
+                  nfClusterTable.resetTableSize();
+              });
+  
+              // initialize tabs
+              clusterTabs.forEach(function (tab) {
+                  try {
+                      tab.init(tab);
+                  } catch (ex) {
+                      console.error('Failed to initialize tab', tab, ex);
+                  }
+              });
+          },
+  
+          /**
+           * Update the size of the grid based on its container's current size.
+           */
+          resetTableSize: function () {
+              clusterTabs.forEach(function (tab) {
+                  if (tab && tab.grid) {
+                      tab.grid.resizeCanvas();
+                  }
+              });
+          },
+  
+          /**
+           * Load the processor cluster table.
+           */
+          loadClusterTable: function () {
+              var updateDataDeferreds = config.data.map(function (dataSetSpec) {
+                  var dataSetDeferred = dataSetSpec.update();
+                  return dataSetDeferred;
+              });
+              var aggregateDeferred = $.when.apply($, updateDataDeferreds);
+              aggregateDeferred = aggregateDeferred.done(function (aggregateResult) {
+                  updateFilterStats(nodesTab);
+              });
+              return aggregateDeferred;
+          }
+      };
+  
+      return nfClusterTable;
+  }));
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 8cd04c7c628e..621d6806a8a9 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
@@ -1,335 +1,335 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'Slick',
-                'nf.Common',
-                'nf.ErrorHandler'],
-            function ($, Slick, nfCommon, nfErrorHandler) {
-                return (nf.CountersTable = factory($, Slick, nfCommon, nfErrorHandler));
-            });
-    } 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, nfCommon, nfErrorHandler) {
-    'use strict';
-
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        urls: {
-            counters: '../nifi-api/counters'
-        }
-    };
-
-    /**
-     * Sorts the specified data using the specified sort details.
+    /*
+     * 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
      *
-     * @param {object} sortDetails
-     * @param {object} data
+     * 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.
      */
-    var sort = function (sortDetails, data) {
-        // defines a function for sorting
-        var comparer = function (a, b) {
-            if (sortDetails.columnId === 'value') {
-                var aCount = nfCommon.parseCount(a[sortDetails.columnId]);
-                var bCount = nfCommon.parseCount(b[sortDetails.columnId]);
-                return aCount - bCount;
-            } else {
-                var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                return aString === bString ? 0 : aString > bString ? 1 : -1;
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Common',
+                  'nf.ErrorHandler'],
+              function ($, Slick, nfCommon, nfErrorHandler) {
+                  return (nf.CountersTable = factory($, Slick, nfCommon, nfErrorHandler));
+              });
+      } 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, nfCommon, nfErrorHandler) {
+      'use strict';
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                counters: '../nifi-api/counters'
             }
         };
-
-        // perform the sort
-        data.sort(comparer, sortDetails.sortAsc);
-    };
-
-    /**
-     * Get the text out of the filter field. If the filter field doesn't
-     * have any text it will contain the text 'filter list' so this method
-     * accounts for that.
-     */
-    var getFilterText = function () {
-        return $('#counters-filter').val();
-    };
-
-    /**
-     * Applies the filter found in the filter expression text field.
-     */
-    var applyFilter = function () {
-        // get the dataview
-        var countersGrid = $('#counters-table').data('gridInstance');
-
-        // ensure the grid has been initialized
-        if (nfCommon.isDefinedAndNotNull(countersGrid)) {
-            var countersData = countersGrid.getData();
-
-            // update the search criteria
-            countersData.setFilterArgs({
-                searchString: getFilterText(),
-                property: $('#counters-filter-type').combo('getSelectedOption').value
-            });
-            countersData.refresh();
-        }
-    };
-
-    /**
-     * Performs the filtering.
-     *
-     * @param {object} item     The item subject to filtering
-     * @param {object} args     Filter arguments
-     * @returns {Boolean}       Whether or not to include the item
-     */
-    var filter = function (item, args) {
-        if (args.searchString === '') {
-            return true;
-        }
-
-        try {
-            // perform the row filtering
-            var filterExp = new RegExp(args.searchString, 'i');
-        } catch (e) {
-            // invalid regex
-            return false;
-        }
-
-        // perform the filter
-        return item[args.property].search(filterExp) >= 0;
-    };
-
-    /**
-     * Resets the specified counter.
-     *
-     * @argument {object} item     The counter item
-     */
-    var resetCounter = function (item) {
-        $.ajax({
-            type: 'PUT',
-            url: config.urls.counters + '/' + encodeURIComponent(item.id),
-            dataType: 'json'
-        }).done(function (response) {
-            var counter = response.counter;
-
-            // get the table and update the row accordingly
-            var countersGrid = $('#counters-table').data('gridInstance');
-            var countersData = countersGrid.getData();
-            countersData.updateItem(counter.id, counter);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    return {
+    
         /**
-         * Initializes the counters list.
+         * Sorts the specified data using the specified sort details.
+         *
+         * @param {object} sortDetails
+         * @param {object} data
          */
-        init: function () {
-            // define the function for filtering the list
-            $('#counters-filter').keyup(function () {
-                applyFilter();
-            });
-
-            // filter type
-            $('#counters-filter-type').combo({
-                options: [{
-                    text: 'by name',
-                    value: 'name'
-                }, {
-                    text: 'by context',
-                    value: 'context'
-                }],
-                select: function (option) {
-                    applyFilter();
-                }
-            });
-
-            // 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
+        var sort = function (sortDetails, data) {
+            // defines a function for sorting
+            var comparer = function (a, b) {
+                if (sortDetails.columnId === 'value') {
+                  var aCount = nfCommon.parseCount(a[sortDetails.columnId]);
+                  var bCount = nfCommon.parseCount(b[sortDetails.columnId]);
+                    return aCount - bCount;
+                } else {
+                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                    return aString === bString ? 0 : aString > bString ? 1 : -1;
                 }
-            ];
-
-            // only allow dfm's to reset counters
-            if (nfCommon.canModifyCounters()) {
-                // function for formatting the actions column
-                var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-                    return '<div title="Reset Counter" class="pointer reset-counter fa fa-undo" style="margin-top: 2px;"></div>';
-                };
-
-                // add the action column
-                countersColumns.push({
-                    id: 'actions',
-                    name: '&nbsp;',
-                    sortable: false,
-                    resizable: false,
-                    formatter: actionFormatter,
-                    width: 100,
-                    maxWidth: 100
-                });
-            }
-
-            var countersOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: false,
-                enableColumnReorder: false,
-                autoEdit: false,
-                rowHeight: 24
             };
-
-            // initialize the dataview
-            var countersData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            countersData.setItems([]);
-            countersData.setFilterArgs({
-                searchString: getFilterText(),
-                property: $('#counters-filter-type').combo('getSelectedOption').value
-            });
-            countersData.setFilter(filter);
-
-            // initialize the sort
-            sort({
-                columnId: 'context',
-                sortAsc: true
-            }, countersData);
-
-            // initialize the grid
-            var countersGrid = new Slick.Grid('#counters-table', countersData, countersColumns, countersOptions);
-            countersGrid.setSelectionModel(new Slick.RowSelectionModel());
-            countersGrid.registerPlugin(new Slick.AutoTooltips());
-            countersGrid.setSortColumn('context', true);
-            countersGrid.onSort.subscribe(function (e, args) {
-                sort({
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, countersData);
-            });
-
-            // configure a click listener
-            countersGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-
-                // get the node at this row
-                var item = countersData.getItem(args.row);
-
-                // determine the desired action
-                if (countersGrid.getColumns()[args.cell].id === 'actions') {
-                    if (target.hasClass('reset-counter')) {
-                        resetCounter(item);
-                    }
-                }
-            });
-
-            // wire up the dataview to the grid
-            countersData.onRowCountChanged.subscribe(function (e, args) {
-                countersGrid.updateRowCount();
-                countersGrid.render();
-
-                // update the total number of displayed processors
-                $('#displayed-counters').text(args.current);
-            });
-            countersData.onRowsChanged.subscribe(function (e, args) {
-                countersGrid.invalidateRows(args.rows);
-                countersGrid.render();
-            });
-
-            // hold onto an instance of the grid
-            $('#counters-table').data('gridInstance', countersGrid);
-
-            // initialize the number of display items
-            $('#displayed-counters').text('0');
-        },
-
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+        };
+    
+        /**
+         * Get the text out of the filter field. If the filter field doesn't
+         * have any text it will contain the text 'filter list' so this method
+         * accounts for that.
+         */
+        var getFilterText = function () {
+            return $('#counters-filter').val();
+        };
+    
         /**
-         * Update the size of the grid based on its container's current size.
+         * Applies the filter found in the filter expression text field.
          */
-        resetTableSize: function () {
+        var applyFilter = function () {
+            // get the dataview
             var countersGrid = $('#counters-table').data('gridInstance');
-            if (nfCommon.isDefinedAndNotNull(countersGrid)) {
-                countersGrid.resizeCanvas();
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(countersGrid)) {
+                var countersData = countersGrid.getData();
+    
+                // update the search criteria
+                countersData.setFilterArgs({
+                    searchString: getFilterText(),
+                    property: $('#counters-filter-type').combo('getSelectedOption').value
+                });
+                countersData.refresh();
             }
-        },
-
+        };
+    
         /**
-         * Load the processor counters table.
+         * 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
          */
-        loadCountersTable: function () {
-            return $.ajax({
-                type: 'GET',
-                url: config.urls.counters,
+        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;
+            }
+    
+            // perform the filter
+            return item[args.property].search(filterExp) >= 0;
+        };
+    
+        /**
+         * Resets the specified counter.
+         *
+         * @argument {object} item     The counter item
+         */
+        var resetCounter = function (item) {
+            $.ajax({
+                type: 'PUT',
+                url: config.urls.counters + '/' + encodeURIComponent(item.id),
                 dataType: 'json'
             }).done(function (response) {
-                var report = response.counters;
-                var aggregateSnapshot = report.aggregateSnapshot;
-
-                // ensure there are groups specified
-                if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.counters)) {
-                    var countersGrid = $('#counters-table').data('gridInstance');
-                    var countersData = countersGrid.getData();
-
-                    // set the items
-                    countersData.setItems(aggregateSnapshot.counters);
-                    countersData.reSort();
-                    countersGrid.invalidate();
-
-                    // update the stats last refreshed timestamp
-                    $('#counters-last-refreshed').text(aggregateSnapshot.generated);
-
-                    // update the total number of processors
-                    $('#total-counters').text(aggregateSnapshot.counters.length);
-                } else {
-                    $('#total-counters').text('0');
+                var counter = response.counter;
+    
+                // get the table and update the row accordingly
+                var countersGrid = $('#counters-table').data('gridInstance');
+                var countersData = countersGrid.getData();
+                countersData.updateItem(counter.id, counter);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        return {
+            /**
+             * Initializes the counters list.
+             */
+            init: function () {
+                // define the function for filtering the list
+                $('#counters-filter').keyup(function () {
+                    applyFilter();
+                });
+    
+                // filter type
+                $('#counters-filter-type').combo({
+                    options: [{
+                        text: nf._.msg('nf-counters-table.ByName'),
+                        value: 'name'
+                    }, {
+                        text: nf._.msg('nf-counters-table.ByContext'),
+                        value: 'context'
+                    }],
+                    select: function (option) {
+                        applyFilter();
+                    }
+                });
+    
+                // initialize the templates table
+                var countersColumns = [
+                  {
+                      id: 'context',
+                      name: nf._.msg('nf-counters-table.Context'),
+                      field: 'context',
+                      sortable: true,
+                      resizable: true
+                  },
+                  {
+                      id: 'name',
+                      name: nf._.msg('nf-counters-table.Name'),
+                      field: 'name',
+                      sortable: true,
+                      resizable: true
+                  },
+                  {
+                      id: 'value',
+                      name: nf._.msg('nf-counters-table.Value'),
+                      field: 'value',
+                      sortable: true,
+                      resizable: true,
+                      defaultSortAsc: false
+                  }
+                ];
+    
+                // only allow dfm's to reset counters
+              if (nfCommon.canModifyCounters()) {
+                    // function for formatting the actions column
+                    var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+                        return '<div title="'+nf._.msg('nf-counters-table.Connect')+'" class="pointer reset-counter fa fa-undo" style="margin-top: 2px;"></div>';
+                    };
+    
+                    // add the action column
+                  countersColumns.push({
+                      id: 'actions',
+                      name: '&nbsp;',
+                      sortable: false,
+                      resizable: false,
+                      formatter: actionFormatter,
+                      width: 100,
+                      maxWidth: 100
+                  });
+                }
+    
+                var countersOptions = {
+                    forceFitColumns: true,
+                    enableTextSelectionOnCells: true,
+                    enableCellNavigation: false,
+                    enableColumnReorder: false,
+                    autoEdit: false,
+                    rowHeight: 24
+                };
+    
+                // initialize the dataview
+                var countersData = new Slick.Data.DataView({
+                    inlineFilters: false
+                });
+                countersData.setItems([]);
+                countersData.setFilterArgs({
+                    searchString: getFilterText(),
+                    property: $('#counters-filter-type').combo('getSelectedOption').value
+                });
+                countersData.setFilter(filter);
+    
+                // initialize the sort
+                sort({
+                    columnId: 'context',
+                    sortAsc: true
+                }, countersData);
+    
+                // initialize the grid
+                var countersGrid = new Slick.Grid('#counters-table', countersData, countersColumns, countersOptions);
+                countersGrid.setSelectionModel(new Slick.RowSelectionModel());
+                countersGrid.registerPlugin(new Slick.AutoTooltips());
+                countersGrid.setSortColumn('context', true);
+                countersGrid.onSort.subscribe(function (e, args) {
+                    sort({
+                        columnId: args.sortCol.field,
+                        sortAsc: args.sortAsc
+                    }, countersData);
+                });
+    
+                // configure a click listener
+                countersGrid.onClick.subscribe(function (e, args) {
+                    var target = $(e.target);
+    
+                    // get the node at this row
+                    var item = countersData.getItem(args.row);
+    
+                    // determine the desired action
+                    if (countersGrid.getColumns()[args.cell].id === 'actions') {
+                        if (target.hasClass('reset-counter')) {
+                            resetCounter(item);
+                        }
+                    }
+                });
+    
+                // wire up the dataview to the grid
+                countersData.onRowCountChanged.subscribe(function (e, args) {
+                    countersGrid.updateRowCount();
+                    countersGrid.render();
+    
+                    // update the total number of displayed processors
+                    $('#displayed-counters').text(args.current);
+                });
+                countersData.onRowsChanged.subscribe(function (e, args) {
+                    countersGrid.invalidateRows(args.rows);
+                    countersGrid.render();
+                });
+    
+                // hold onto an instance of the grid
+                $('#counters-table').data('gridInstance', countersGrid);
+    
+                // 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 (nfCommon.isDefinedAndNotNull(countersGrid)) {
+                    countersGrid.resizeCanvas();
                 }
-            }).fail(nfErrorHandler.handleAjaxError);
-        }
-    };
-}));
\ No newline at end of file
+            },
+    
+            /**
+             * Load the processor counters table.
+             */
+            loadCountersTable: function () {
+                return $.ajax({
+                    type: 'GET',
+                    url: config.urls.counters,
+                    dataType: 'json'
+                }).done(function (response) {
+                    var report = response.counters;
+                    var aggregateSnapshot = report.aggregateSnapshot;
+    
+                    // ensure there are groups specified
+                  if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.counters)) {
+                        var countersGrid = $('#counters-table').data('gridInstance');
+                        var countersData = countersGrid.getData();
+    
+                        // set the items
+                        countersData.setItems(aggregateSnapshot.counters);
+                        countersData.reSort();
+                        countersGrid.invalidate();
+    
+                        // update the stats last refreshed timestamp
+                        $('#counters-last-refreshed').text(aggregateSnapshot.generated);
+    
+                        // update the total number of processors
+                        $('#total-counters').text(aggregateSnapshot.counters.length);
+                    } else {
+                        $('#total-counters').text('0');
+                    }
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+  }));
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 22c587ee0759..a0279af6d168 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
@@ -1,227 +1,227 @@
-/*
- * 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 top, define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common',
-                'nf.CountersTable',
-                'nf.ErrorHandler',
-                'nf.Storage'],
-            function ($, nfCommon, nfCountersTable, nfErrorHandler, nfStorage) {
-                return (nf.Counters = factory($, nfCommon, nfCountersTable, nfErrorHandler, nfStorage));
-            });
-    } 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 ($, nfCommon, nfCountersTable, nfErrorHandler, nfStorage) {
-    'use strict';
-
-    $(document).ready(function () {
-        // initialize the counters page
-        nfCounters.init();
-    });
-
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        urls: {
-            banners: '../nifi-api/flow/banners',
-            about: '../nifi-api/flow/about',
-            currentUser: '../nifi-api/flow/current-user'
-        }
-    };
-
-    /**
-     * Loads the current user.
+    /*
+     * 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.
      */
-    var loadCurrentUser = function () {
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.currentUser,
-            dataType: 'json'
-        }).done(function (currentUser) {
-            nfCommon.setCurrentUser(currentUser);
-
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Initializes the counters page.
-     */
-    var initializeCountersPage = function () {
-        // define mouse over event for the refresh button
-        $('#refresh-button').click(function () {
-            nfCountersTable.loadCountersTable();
+    
+  /* global top, define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.CountersTable',
+                  'nf.ErrorHandler',
+                  'nf.Storage'],
+              function ($, nfCommon, nfCountersTable, nfErrorHandler, nfStorage) {
+                  return (nf.Counters = factory($, nfCommon, nfCountersTable, nfErrorHandler, nfStorage));
+              });
+      } 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 ($, nfCommon, nfCountersTable, nfErrorHandler, nfStorage) {
+      'use strict';
+    
+        $(document).ready(function () {
+            // initialize the counters page
+          nfCounters.init();
         });
-
-        // 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 (nfCommon.isDefinedAndNotNull(response.banners)) {
-                        if (nfCommon.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('counters');
-                        }
-
-                        if (nfCommon.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('counters');
-                        }
-                    }
-
-                    deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    nfErrorHandler.handleAjaxError(xhr, status, error);
-                    deferred.reject();
-                });
-            } else {
-                deferred.resolve();
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                banners: '../nifi-api/flow/banners',
+                about: '../nifi-api/flow/about',
+                currentUser: '../nifi-api/flow/current-user'
             }
-        }).promise();
-    };
-
-    var nfCounters = {
+        };
+    
+        /**
+         * Loads the current user.
+         */
+        var loadCurrentUser = function () {
+            return $.ajax({
+                type: 'GET',
+                url: config.urls.currentUser,
+                dataType: 'json'
+            }).done(function (currentUser) {
+              nfCommon.setCurrentUser(currentUser);
+    
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
         /**
          * Initializes the counters page.
          */
-        init: function () {
-            nfStorage.init();
-
-            // load the current user
-            loadCurrentUser().done(function () {
-                // create the counters table
-                nfCountersTable.init();
-
-                // load the table
-                nfCountersTable.loadCountersTable().done(function () {
-                    // once the table is initialized, finish initializing the page
-                    initializeCountersPage().done(function () {
-                        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'
-                                });
-
-                                $('#counters').css('margin', 40);
-                                $('#counters-table').css('bottom', 127);
-                                $('#counters-refresh-container').css('margin', 40);
+        var initializeCountersPage = function () {
+            // define mouse over event for the refresh button
+            $('#refresh-button').click(function () {
+              nfCountersTable.loadCountersTable();
+            });
+    
+            // 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 (nfCommon.isDefinedAndNotNull(response.banners)) {
+                          if (nfCommon.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('counters');
                             }
-
-                            // configure the initial grid height
-                            nfCountersTable.resetTableSize();
-                        };
-
-                        // get the about details
-                        $.ajax({
-                            type: 'GET',
-                            url: config.urls.about,
-                            dataType: 'json'
-                        }).done(function (response) {
-                            var aboutDetails = response.about;
-                            var countersTitle = aboutDetails.title + ' Counters';
-
-                            // set the document title and the about title
-                            document.title = countersTitle;
-                            $('#counters-header-text').text(countersTitle);
-
-                            // set the initial size
-                            setBodySize();
-                        }).fail(nfErrorHandler.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) {
-                                        dialog.modal('resize');
-                                    }, 50, $(dialogs[i]));
-                                }
+    
+                          if (nfCommon.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('counters');
                             }
-
-                            // 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]));
+                        }
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                      nfErrorHandler.handleAjaxError(xhr, status, error);
+                        deferred.reject();
+                    });
+                } else {
+                    deferred.resolve();
+                }
+            }).promise();
+        };
+    
+      var nfCounters = {
+            /**
+             * Initializes the counters page.
+             */
+            init: function () {
+              nfStorage.init();
+    
+                // load the current user
+                loadCurrentUser().done(function () {
+                    // create the counters table
+                  nfCountersTable.init();
+    
+                    // load the table
+                  nfCountersTable.loadCountersTable().done(function () {
+                        // once the table is initialized, finish initializing the page
+                        initializeCountersPage().done(function () {
+                            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'
+                                    });
+    
+                                    $('#counters').css('margin', 40);
+                                    $('#counters-table').css('bottom', 127);
+                                    $('#counters-refresh-container').css('margin', 40);
                                 }
-                            }
-
-                            // 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'));
+    
+                                // configure the initial grid height
+                              nfCountersTable.resetTableSize();
+                            };
+    
+                            // get the about details
+                            $.ajax({
+                                type: 'GET',
+                                url: config.urls.about,
+                                dataType: 'json'
+                            }).done(function (response) {
+                                var aboutDetails = response.about;
+                                var countersTitle = nf._.msg('nf-about')+ nf._.msg('nf-counters.Counters');
+    
+                                // set the document title and the about title
+                                document.title = countersTitle;
+                                $('#counters-header-text').text(countersTitle);
+    
+                                // set the initial size
+                                setBodySize();
+                          }).fail(nfErrorHandler.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) {
+                                            dialog.modal('resize');
+                                        }, 50, $(dialogs[i]));
+                                    }
                                 }
-                            }
-                            $.each(tabsContents, function (index, tabsContent) {
-                                nfCommon.toggleScrollable(tabsContent.get(0));
+    
+                                // 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) {
+                                  nfCommon.toggleScrollable(tabsContent.get(0));
+                                });
                             });
                         });
                     });
                 });
-            });
-        }
-    };
-
-    return nfCounters;
-}));
\ No newline at end of file
+            }
+        };
+    
+      return nfCounters;
+  }));
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 64bcab0ba115..cb7381f2b199 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
@@ -1,552 +1,552 @@
-/*
- * 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 top, define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'Slick',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.ErrorHandler',
-                'nf.HistoryModel'],
-            function ($, Slick, nfCommon, nfDialog, nfErrorHandler, nfHistoryModel) {
-                return (nf.HistoryTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler, nfHistoryModel));
-            });
-    } 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, nfCommon, nfDialog, nfErrorHandler, nfHistoryModel) {
-    'use strict';
-
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        defaultStartTime: '00:00:00',
-        defaultEndTime: '23:59:59',
-        styles: {
-            hidden: 'hidden'
-        },
-        urls: {
-            history: '../nifi-api/controller/history'
-        }
-    };
-
-    /**
-     * Initializes the details dialog.
+    /*
+     * 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.
      */
-    var initDetailsDialog = function () {
-        $('#action-details-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Action Details',
-            buttons: [{
-                buttonText: 'Ok',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
-                handler: {
-                    click: function () {
-                        $('#action-details-dialog').modal('hide');
-                    }
-                }
-            }],
-            handler: {
-                close: function () {
-                    // clear the details
-                    $('#action-details').empty();
-                }
+    
+  /* global top, define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.ErrorHandler',
+                  'nf.HistoryModel'],
+              function ($, Slick, nfCommon, nfDialog, nfErrorHandler, nfHistoryModel) {
+                  return (nf.HistoryTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler, nfHistoryModel));
+              });
+      } 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, nfCommon, nfDialog, nfErrorHandler, nfHistoryModel) {
+      'use strict';
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            defaultStartTime: '00:00:00',
+            defaultEndTime: '23:59:59',
+            styles: {
+                hidden: 'hidden'
+            },
+            urls: {
+                history: '../nifi-api/controller/history'
             }
-        });
-    };
-
-    /**
-     * Initializes the filter dialog.
-     */
-    var initFilterDialog = function () {
-        // clear the filter field
-        $('#history-filter').val('');
-
-        // filter type
-        $('#history-filter-type').combo({
-            options: [{
-                text: 'by id',
-                value: 'by id',
-                description: 'Filters based on the id of the component that was modified'
-            }, {
-                text: 'by user',
-                value: 'by user',
-                description: 'Filters based on the user that performed the action'
-            }]
-        });
-
-        // configure the start and end date picker
-        $('#history-filter-start-date, #history-filter-end-date').datepicker({
-            showAnim: '',
-            showOtherMonths: true,
-            selectOtherMonths: true
-        });
-        $('#history-filter-start-date').datepicker('setDate', '-14d');
-        $('#history-filter-end-date').datepicker('setDate', '+0d');
-
-        // initialize the start and end time
-        $('#history-filter-start-time').val(config.defaultStartTime);
-        $('#history-filter-end-time').val(config.defaultEndTime);
-
-        // configure the filter dialog
-        $('#history-filter-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Filter History',
-            buttons: [{
-                buttonText: 'Filter',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
-                handler: {
-                    click: function () {
-                        $('#history-filter-dialog').modal('hide');
-
-                        var filter = {};
-
-                        // extract the filter text
-                        var filterText = $('#history-filter').val();
-                        if (filterText !== '') {
-                            var filterType = $('#history-filter-type').combo('getSelectedOption').text;
-                            if (filterType === 'by id') {
-                                filter['sourceId'] = filterText;
-                            } else if (filterType === 'by user') {
-                                filter['userIdentity'] = filterText;
-                            }
-                        }
-
-                        // extract the start date time
-                        var startDate = $.trim($('#history-filter-start-date').val());
-                        var startTime = $.trim($('#history-filter-start-time').val());
-                        if (startDate !== '') {
-                            if (startTime === '') {
-                                startTime = config.defaultStartTime;
-                                $('#history-filter-start-time').val(startTime);
-                            }
-                            filter['startDate'] = startDate + ' ' + startTime;
-                        }
-
-                        // extract the end date time
-                        var endDate = $.trim($('#history-filter-end-date').val());
-                        var endTime = $.trim($('#history-filter-end-time').val());
-                        if (endDate !== '') {
-                            if (endTime === '') {
-                                endTime = config.defaultEndTime;
-                                $('#history-filter-end-time').val(endTime);
-                            }
-                            filter['endDate'] = endDate + ' ' + endTime;
+        };
+    
+        /**
+         * Initializes the details dialog.
+         */
+        var initDetailsDialog = function () {
+            $('#action-details-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+                headerText: nf._.msg('nf-history-table.ActionDetail'),
+                buttons: [{
+                    buttonText: nf._.msg('nf-history-table.Ok'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            $('#action-details-dialog').modal('hide');
                         }
-
-                        // set the filter
-                        var historyGrid = $('#history-table').data('gridInstance');
-                        var historyModel = historyGrid.getData();
-                        historyModel.setFilterArgs(filter);
-
-                        // reload the table
-                        nfHistoryTable.loadHistoryTable();
+                    }
+                }],
+                handler: {
+                    close: function () {
+                        // clear the details
+                        $('#action-details').empty();
                     }
                 }
-            },
-                {
-                    buttonText: 'Cancel',
+            });
+        };
+    
+        /**
+         * Initializes the filter dialog.
+         */
+        var initFilterDialog = function () {
+            // clear the filter field
+            $('#history-filter').val('');
+    
+            // filter type
+            $('#history-filter-type').combo({
+                options: [{
+                    text: nf._.msg('nf-history-table.ById'),
+                    value: 'by id',
+                    description: nf._.msg('nf-history-table.Message5')
+                }, {
+                    text: nf._.msg('nf-history-table.ByUser'),
+                    value: 'by user',
+                    description: nf._.msg('nf-history-table.Message6')
+                }]
+            });
+    
+            // configure the start and end date picker
+            $('#history-filter-start-date, #history-filter-end-date').datepicker({
+                showAnim: '',
+                showOtherMonths: true,
+                selectOtherMonths: true
+            });
+            $('#history-filter-start-date').datepicker('setDate', '-14d');
+            $('#history-filter-end-date').datepicker('setDate', '+0d');
+    
+            // initialize the start and end time
+            $('#history-filter-start-time').val(config.defaultStartTime);
+            $('#history-filter-end-time').val(config.defaultEndTime);
+    
+            // configure the filter dialog
+            $('#history-filter-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+                headerText: nf._.msg('nf-history-table.FilterHistory'),
+                buttons: [{
+                    buttonText: nf._.msg('nf-history-table.Filter'),
                     color: {
-                        base: '#E3E8EB',
-                        hover: '#C7D2D7',
-                        text: '#004849'
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
                     },
                     handler: {
                         click: function () {
                             $('#history-filter-dialog').modal('hide');
+    
+                            var filter = {};
+    
+                            // extract the filter text
+                            var filterText = $('#history-filter').val();
+                            if (filterText !== '') {
+                                var filterType = $('#history-filter-type').combo('getSelectedOption').text;
+                                if (filterType === 'by id') {
+                                    filter['sourceId'] = filterText;
+                                } else if (filterType === 'by user') {
+                                    filter['userIdentity'] = filterText;
+                                }
+                            }
+    
+                            // extract the start date time
+                            var startDate = $.trim($('#history-filter-start-date').val());
+                            var startTime = $.trim($('#history-filter-start-time').val());
+                            if (startDate !== '') {
+                                if (startTime === '') {
+                                    startTime = config.defaultStartTime;
+                                    $('#history-filter-start-time').val(startTime);
+                                }
+                                filter['startDate'] = startDate + ' ' + startTime;
+                            }
+    
+                            // extract the end date time
+                            var endDate = $.trim($('#history-filter-end-date').val());
+                            var endTime = $.trim($('#history-filter-end-time').val());
+                            if (endDate !== '') {
+                                if (endTime === '') {
+                                    endTime = config.defaultEndTime;
+                                    $('#history-filter-end-time').val(endTime);
+                                }
+                                filter['endDate'] = endDate + ' ' + endTime;
+                            }
+    
+                            // set the filter
+                            var historyGrid = $('#history-table').data('gridInstance');
+                            var historyModel = historyGrid.getData();
+                            historyModel.setFilterArgs(filter);
+    
+                            // reload the table
+                          nfHistoryTable.loadHistoryTable();
                         }
                     }
-                }]
-        });
-    };
-
-    /**
-     * Initializes the purge dialog.
-     */
-    var initPurgeDialog = function () {
-        // configure the start and end date picker
-        $('#history-purge-end-date').datepicker({
-            showAnim: '',
-            showOtherMonths: true,
-            selectOtherMonths: true
-        });
-        $('#history-purge-end-date').datepicker('setDate', '-1m');
-
-        // initialize the start and end time
-        $('#history-purge-end-time').val(config.defaultStartTime);
-
-        // configure the filter dialog
-        $('#history-purge-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Purge History',
-            buttons: [{
-                buttonText: 'Purge',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
                 },
-                handler: {
-                    click: function () {
-                        // hide the dialog
-                        $('#history-purge-dialog').modal('hide');
-
-                        // get the purge end date
-                        var endDate = $.trim($('#history-purge-end-date').val());
-                        var endTime = $.trim($('#history-purge-end-time').val());
-                        if (endDate !== '') {
-                            if (endTime === '') {
-                                endTime = config.defaultStartTime;
-                                $('#history-purge-end-time').val(endTime);
+                    {
+                        buttonText: nf._.msg('nf-history-table.Cancel'),
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#history-filter-dialog').modal('hide');
                             }
-                            var endDateTime = endDate + ' ' + endTime;
-                            var timezone = $('.timezone:first').text();
-                            nfDialog.showYesNoDialog({
-                                headerText: 'History',
-                                dialogContent: "Are you sure you want to delete all history before '" + nfCommon.escapeHtml(endDateTime) + " " + nfCommon.escapeHtml(timezone) + "'?",
-                                yesHandler: function () {
-                                    purgeHistory(endDateTime);
-                                }
-                            });
-                        } else {
-                            nfDialog.showOkDialog({
-                                headerText: 'History',
-                                dialogContent: 'The end date must be specified.'
-                            });
                         }
-                    }
-                }
-            },
-                {
-                    buttonText: 'Cancel',
+                    }]
+            });
+        };
+    
+        /**
+         * Initializes the purge dialog.
+         */
+        var initPurgeDialog = function () {
+            // configure the start and end date picker
+            $('#history-purge-end-date').datepicker({
+                showAnim: '',
+                showOtherMonths: true,
+                selectOtherMonths: true
+            });
+            $('#history-purge-end-date').datepicker('setDate', '-1m');
+    
+            // initialize the start and end time
+            $('#history-purge-end-time').val(config.defaultStartTime);
+    
+            // configure the filter dialog
+            $('#history-purge-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+                headerText: nf._.msg('nf-history-table.PurgeHistory'),
+                buttons: [{
+                    buttonText: nf._.msg('nf-history-table.Purge'),
                     color: {
-                        base: '#E3E8EB',
-                        hover: '#C7D2D7',
-                        text: '#004849'
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
                     },
                     handler: {
                         click: function () {
+                            // hide the dialog
                             $('#history-purge-dialog').modal('hide');
+    
+                            // get the purge end date
+                            var endDate = $.trim($('#history-purge-end-date').val());
+                            var endTime = $.trim($('#history-purge-end-time').val());
+                            if (endDate !== '') {
+                                if (endTime === '') {
+                                    endTime = config.defaultStartTime;
+                                    $('#history-purge-end-time').val(endTime);
+                                }
+                                var endDateTime = endDate + ' ' + endTime;
+                                var timezone = $('.timezone:first').text();
+                              nfDialog.showYesNoDialog({
+                                    headerText: nf._.msg('nf-history-table.History'),
+                                    dialogContent: nf._.msg('nf-history-table.Message3') + nfCommon.escapeHtml(endDateTime) + " " + nfCommon.escapeHtml(timezone) + nf._.msg('nf-history-table.Message3.1'),
+                                    yesHandler: function () {
+                                        purgeHistory(endDateTime);
+                                    }
+                                });
+                            } else {
+                              nfDialog.showOkDialog({
+                                    headerText: nf._.msg('nf-history-table.History'),
+                                    dialogContent: nf._.msg('nf-history-table.Message4')
+                                });
+                            }
                         }
                     }
-                }]
-        });
-    };
-
-    /**
-     * Initializes the history table.
-     */
-    var initHistoryTable = function () {
-        // clear the current filter
-        $('#clear-history-filter').click(function () {
-            // clear the filter dialog
-            $('#history-filter').val('');
-
-            // hide the overview
-            $('#history-filter-overview').css('visibility', 'hidden');
-
-            // clear the filter
-            var historyGrid = $('#history-table').data('gridInstance');
-            var historyModel = historyGrid.getData();
-            historyModel.setFilterArgs({});
-
-            // refresh the table
-            nfHistoryTable.loadHistoryTable();
-        });
-
-        // add hover effect and click handler for opening the dialog
-        $('#history-filter-button').click(function () {
-            $('#history-filter-dialog').modal('show');
-        });
-
-        // define a custom formatter for the more details column
-        var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
-            if (dataContext.canRead === true) {
-                return '<div title="View Details" class="pointer show-action-details fa fa-info-circle" style="margin-top: 4px;"></div>';
-            }
-            return "";
+                },
+                    {
+                        buttonText: nf._.msg('nf-history-table.Cancel'),
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#history-purge-dialog').modal('hide');
+                            }
+                        }
+                    }]
+            });
         };
-
-        // define how general values are formatted
-        var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-            if (dataContext.canRead !== true) {
-                return '<span class="unset" style="font-size: 13px; padding-top: 2px;">Not authorized</span>';
+    
+        /**
+         * Initializes the history table.
+         */
+        var initHistoryTable = function () {
+            // clear the current filter
+            $('#clear-history-filter').click(function () {
+                // clear the filter dialog
+                $('#history-filter').val('');
+    
+                // hide the overview
+                $('#history-filter-overview').css('visibility', 'hidden');
+    
+                // clear the filter
+                var historyGrid = $('#history-table').data('gridInstance');
+                var historyModel = historyGrid.getData();
+                historyModel.setFilterArgs({});
+    
+                // refresh the table
+              nfHistoryTable.loadHistoryTable();
+            });
+    
+            // add hover effect and click handler for opening the dialog
+            $('#history-filter-button').click(function () {
+                $('#history-filter-dialog').modal('show');
+            });
+    
+            // define a custom formatter for the more details column
+            var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
+              if (dataContext.canRead === true) {
+                  return '<div title="' + nf._.msg('nf-history-table.ViewDetails') + '" class="pointer show-action-details fa fa-info-circle" style="margin-top: 4px;"></div>';
+              }
+              return "";
+            };
+    
+            // define how general values are formatted
+            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
+                if (dataContext.canRead !== true) {
+                    return '<span class="unset" style="font-size: 13px; padding-top: 2px;">' + nf._.msg('nf-history-table.NotAuthorized') + '</span>';
+                }
+              return nfCommon.formatValue(dataContext.action[columnDef.field]);
+            };
+    
+            // initialize the templates table
+            var historyColumns = [
+                {
+                    id: 'moreDetails',
+                    name: '&nbsp;',
+                    sortable: false,
+                    resizable: false,
+                    formatter: moreDetailsFormatter,
+                    width: 50,
+                    maxWidth: 50
+                },
+              {
+                  id: 'timestamp',
+                  name: nf._.msg('nf-history-table.DateTime'),
+                  field: 'timestamp',
+                  sortable: true,
+                  resizable: true,
+                  formatter: valueFormatter
+              },
+              {
+                  id: 'sourceName',
+                  name: nf._.msg('nf-history-table.Name'),
+                  field: 'sourceName',
+                  sortable: true,
+                  resizable: true,
+                  formatter: valueFormatter
+              },
+              {
+                  id: 'sourceType',
+                  name: nf._.msg('nf-history-table.Type'),
+                  field: 'sourceType',
+                  sortable: true,
+                  resizable: true,
+                  formatter: valueFormatter
+              },
+              {
+                  id: 'operation',
+                  name: nf._.msg('nf-history-table.Operation'),
+                  field: 'operation',
+                  sortable: true,
+                  resizable: true,
+                  formatter: valueFormatter
+              },
+              {
+                  id: 'userIdentity',
+                  name: nf._.msg('nf-history-table.User'),
+                  field: 'userIdentity',
+                  sortable: true,
+                  resizable: true,
+                  formatter: valueFormatter
+              }
+            ];
+    
+            var historyOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: false,
+                enableColumnReorder: false,
+                autoEdit: false,
+                rowHeight: 24
+            };
+    
+            // create the remote model
+          var historyModel = new nfHistoryModel();
+    
+            // initialize the grid
+            var historyGrid = new Slick.Grid('#history-table', historyModel, historyColumns, historyOptions);
+            historyGrid.setSelectionModel(new Slick.RowSelectionModel());
+            historyGrid.registerPlugin(new Slick.AutoTooltips());
+    
+            // initialize the grid sorting
+            historyGrid.onSort.subscribe(function (e, args) {
+                // set the sort criteria on the model
+                historyModel.setSort(args.sortCol.field, args.sortAsc ? 1 : -1);
+    
+                // reload the grid
+                var vp = historyGrid.getViewport();
+                historyModel.ensureData(vp.top, vp.bottom);
+            });
+            historyGrid.setSortColumn('timestamp', false);
+    
+            // configure a click listener
+            historyGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = historyModel.getItem(args.row);
+    
+                // determine the desired action
+                if (historyGrid.getColumns()[args.cell].id === 'moreDetails') {
+                    if (target.hasClass('show-action-details')) {
+                      showActionDetails(item.action);
+                    }
+                }
+            });
+    
+            // listen for when the viewport changes so we can fetch the appropriate records
+            historyGrid.onViewportChanged.subscribe(function (e, args) {
+                var vp = historyGrid.getViewport();
+                historyModel.ensureData(vp.top, vp.bottom);
+            });
+    
+            // listen for when new data has been loaded
+            historyModel.onDataLoaded.subscribe(function (e, args) {
+                for (var i = args.from; i <= args.to; i++) {
+                    historyGrid.invalidateRow(i);
+                }
+                historyGrid.updateRowCount();
+                historyGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#history-table').data('gridInstance', historyGrid);
+    
+            // add the purge button if appropriate
+          if (nfCommon.canModifyController()) {
+                $('#history-purge-button').on('click', function () {
+                    $('#history-purge-dialog').modal('show');
+                }).show();
             }
-            return nfCommon.formatValue(dataContext.action[columnDef.field]);
         };
-
-        // initialize the templates table
-        var historyColumns = [
-            {
-                id: 'moreDetails',
-                name: '&nbsp;',
-                sortable: false,
-                resizable: false,
-                formatter: moreDetailsFormatter,
-                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
-            }
-        ];
-
-        var historyOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: false,
-            enableColumnReorder: false,
-            autoEdit: false,
-            rowHeight: 24
+    
+        /**
+         * Purges the history up to the specified end date.
+         *
+         * @argument {string} endDateTime       The end date time
+         */
+        var purgeHistory = function (endDateTime) {
+            $.ajax({
+                type: 'DELETE',
+                url: config.urls.history + '?' + $.param({
+                    endDate: endDateTime
+                }),
+                dataType: 'json'
+            }).done(function () {
+              nfHistoryTable.loadHistoryTable();
+          }).fail(nfErrorHandler.handleAjaxError);
         };
-
-        // create the remote model
-        var historyModel = new nfHistoryModel();
-
-        // initialize the grid
-        var historyGrid = new Slick.Grid('#history-table', historyModel, historyColumns, historyOptions);
-        historyGrid.setSelectionModel(new Slick.RowSelectionModel());
-        historyGrid.registerPlugin(new Slick.AutoTooltips());
-
-        // initialize the grid sorting
-        historyGrid.onSort.subscribe(function (e, args) {
-            // set the sort criteria on the model
-            historyModel.setSort(args.sortCol.field, args.sortAsc ? 1 : -1);
-
-            // reload the grid
-            var vp = historyGrid.getViewport();
-            historyModel.ensureData(vp.top, vp.bottom);
-        });
-        historyGrid.setSortColumn('timestamp', false);
-
-        // configure a click listener
-        historyGrid.onClick.subscribe(function (e, args) {
-            var target = $(e.target);
-
-            // get the node at this row
-            var item = historyModel.getItem(args.row);
-
-            // determine the desired action
-            if (historyGrid.getColumns()[args.cell].id === 'moreDetails') {
-                if (target.hasClass('show-action-details')) {
-                    showActionDetails(item.action);
+    
+        /**
+         * Shows the details for the specified action.
+         *
+         * @param {object} action
+         */
+        var showActionDetails = function (action) {
+            // create the markup for the dialog
+            var detailsMarkup = $('<div></div>').append(
+              $('<div class="action-detail"><div class="history-details-name">Id</div>' + nfCommon.escapeHtml(action.sourceId) + '</div>'));
+    
+            // get any component details
+            var componentDetails = action.componentDetails;
+    
+            // inspect the operation to determine if there are any component details
+          if (nfCommon.isDefinedAndNotNull(componentDetails)) {
+                if (action.sourceType === 'Processor' || action.sourceType === 'ControllerService' || action.sourceType === 'ReportingTask') {
+                    detailsMarkup.append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Type') + '</div>' + nfCommon.escapeHtml(componentDetails.type) + '</div>'));
+                } else if (action.sourceType === 'RemoteProcessGroup') {
+                    detailsMarkup.append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Uri') + '</div>' + nfCommon.formatValue(componentDetails.uri) + '</div>'));
                 }
             }
-        });
-
-        // listen for when the viewport changes so we can fetch the appropriate records
-        historyGrid.onViewportChanged.subscribe(function (e, args) {
-            var vp = historyGrid.getViewport();
-            historyModel.ensureData(vp.top, vp.bottom);
-        });
-
-        // listen for when new data has been loaded
-        historyModel.onDataLoaded.subscribe(function (e, args) {
-            for (var i = args.from; i <= args.to; i++) {
-                historyGrid.invalidateRow(i);
-            }
-            historyGrid.updateRowCount();
-            historyGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#history-table').data('gridInstance', historyGrid);
-
-        // add the purge button if appropriate
-        if (nfCommon.canModifyController()) {
-            $('#history-purge-button').on('click', function () {
-                $('#history-purge-dialog').modal('show');
-            }).show();
-        }
-    };
-
-    /**
-     * Purges the history up to the specified end date.
-     *
-     * @argument {string} endDateTime       The end date time
-     */
-    var purgeHistory = function (endDateTime) {
-        $.ajax({
-            type: 'DELETE',
-            url: config.urls.history + '?' + $.param({
-                endDate: endDateTime
-            }),
-            dataType: 'json'
-        }).done(function () {
-            nfHistoryTable.loadHistoryTable();
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Shows the details for the specified action.
-     *
-     * @param {object} action
-     */
-    var showActionDetails = function (action) {
-        // create the markup for the dialog
-        var detailsMarkup = $('<div></div>').append(
-            $('<div class="action-detail"><div class="history-details-name">Id</div>' + nfCommon.escapeHtml(action.sourceId) + '</div>'));
-
-        // get any component details
-        var componentDetails = action.componentDetails;
-
-        // inspect the operation to determine if there are any component details
-        if (nfCommon.isDefinedAndNotNull(componentDetails)) {
-            if (action.sourceType === 'Processor' || action.sourceType === 'ControllerService' || action.sourceType === 'ReportingTask') {
-                detailsMarkup.append(
-                    $('<div class="action-detail"><div class="history-details-name">Type</div>' + nfCommon.escapeHtml(componentDetails.type) + '</div>'));
-            } else if (action.sourceType === 'RemoteProcessGroup') {
-                detailsMarkup.append(
-                    $('<div class="action-detail"><div class="history-details-name">Uri</div>' + nfCommon.formatValue(componentDetails.uri) + '</div>'));
-            }
-        }
-
-        // get any action details
-        var actionDetails = action.actionDetails;
-
-        // inspect the operation to determine if there are any action details
-        if (nfCommon.isDefinedAndNotNull(actionDetails)) {
-            if (action.operation === 'Configure') {
-                detailsMarkup.append(
-                    $('<div class="action-detail"><div class="history-details-name">Name</div>' + nfCommon.formatValue(actionDetails.name) + '</div>')).append(
-                    $('<div class="action-detail"><div class="history-details-name">Value</div>' + nfCommon.formatValue(actionDetails.value) + '</div>')).append(
-                    $('<div class="action-detail"><div class="history-details-name">Previous Value</div>' + nfCommon.formatValue(actionDetails.previousValue) + '</div>'));
-            } else if (action.operation === 'Connect' || action.operation === 'Disconnect') {
-                detailsMarkup.append(
-                    $('<div class="action-detail"><div class="history-details-name">Source Id</div>' + nfCommon.escapeHtml(actionDetails.sourceId) + '</div>')).append(
-                    $('<div class="action-detail"><div class="history-details-name">Source Name</div>' + nfCommon.formatValue(actionDetails.sourceName) + '</div>')).append(
-                    $('<div class="action-detail"><div class="history-details-name">Source Type</div>' + nfCommon.escapeHtml(actionDetails.sourceType) + '</div>')).append(
-                    $('<div class="action-detail"><div class="history-details-name">Relationship(s)</div>' + nfCommon.formatValue(actionDetails.relationship) + '</div>')).append(
-                    $('<div class="action-detail"><div class="history-details-name">Destination Id</div>' + nfCommon.escapeHtml(actionDetails.destinationId) + '</div>')).append(
-                    $('<div class="action-detail"><div class="history-details-name">Destination Name</div>' + nfCommon.formatValue(actionDetails.destinationName) + '</div>')).append(
-                    $('<div class="action-detail"><div class="history-details-name">Destination Type</div>' + nfCommon.escapeHtml(actionDetails.destinationType) + '</div>'));
-            } else if (action.operation === 'Move') {
-                detailsMarkup.append(
-                    $('<div class="action-detail"><div class="history-details-name">Group</div>' + nfCommon.formatValue(actionDetails.group) + '</div>')).append(
-                    $('<div class="action-detail"><div class="history-details-name">Group Id</div>' + nfCommon.escapeHtml(actionDetails.groupId) + '</div>')).append(
-                    $('<div class="action-detail"><div class="history-details-name">Previous Group</div>' + nfCommon.formatValue(actionDetails.previousGroup) + '</div>')).append(
-                    $('<div class="action-detail"><div class="history-details-name">Previous Group Id</div>' + nfCommon.escapeHtml(actionDetails.previousGroupId) + '</div>'));
-            } else if (action.operation === 'Purge') {
-                detailsMarkup.append(
-                    $('<div class="action-detail"><div class="history-details-name">End Date</div>' + nfCommon.escapeHtml(actionDetails.endDate) + '</div>'));
+    
+            // get any action details
+            var actionDetails = action.actionDetails;
+    
+            // inspect the operation to determine if there are any action details
+          if (nfCommon.isDefinedAndNotNull(actionDetails)) {
+                if (action.operation === 'Configure') {
+                    detailsMarkup.append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Name') + '</div>' + nfCommon.formatValue(actionDetails.name) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Value') + '</div>' + nfCommon.formatValue(actionDetails.value) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.PreviousValue') + '</div>' + nfCommon.formatValue(actionDetails.previousValue) + '</div>'));
+                } else if (action.operation === 'Connect' || action.operation === 'Disconnect') {
+                    detailsMarkup.append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.SourceId') + '</div>' + nfCommon.escapeHtml(actionDetails.sourceId) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.SourceName') + '</div>' + nfCommon.formatValue(actionDetails.sourceName) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.SourceType') + '</div>' + nfCommon.escapeHtml(actionDetails.sourceType) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Relationship') + '</div>' + nfCommon.formatValue(actionDetails.relationship) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.DestinationId') + '</div>' + nfCommon.escapeHtml(actionDetails.destinationId) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.DestinationName') + '</div>' + nfCommon.formatValue(actionDetails.destinationName) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.DestinationType') + '</div>' + nfCommon.escapeHtml(actionDetails.destinationType) + '</div>'));
+                } else if (action.operation === 'Move') {
+                    detailsMarkup.append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Group') + '</div>' + nfCommon.formatValue(actionDetails.group) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.GroupId') + '</div>' + nfCommon.escapeHtml(actionDetails.groupId) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.PreviousGroup') + '</div>' + nfCommon.formatValue(actionDetails.previousGroup) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.PreviousGroupId') + '</div>' + nfCommon.escapeHtml(actionDetails.previousGroupId) + '</div>'));
+                } else if (action.operation === 'Purge') {
+                    detailsMarkup.append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.EndTime') + '</div>' + nfCommon.escapeHtml(actionDetails.endDate) + '</div>'));
+                }
             }
-        }
-
-        // populate the dialog
-        $('#action-details').append(detailsMarkup);
-
-        // show the dialog
-        $('#action-details-dialog').modal('show');
-    };
-
-    var nfHistoryTable = {
-        init: function () {
-            initDetailsDialog();
-            initFilterDialog();
-            initPurgeDialog();
-            initHistoryTable();
-        },
-
-        /**
-         * Update the size of the grid based on its container's current size.
-         */
-        resetTableSize: function () {
-            var historyGrid = $('#history-table').data('gridInstance');
-            if (nfCommon.isDefinedAndNotNull(historyGrid)) {
-                historyGrid.resizeCanvas();
+    
+            // populate the dialog
+            $('#action-details').append(detailsMarkup);
+    
+            // show the dialog
+            $('#action-details-dialog').modal('show');
+        };
+    
+      var nfHistoryTable = {
+            init: function () {
+                initDetailsDialog();
+                initFilterDialog();
+                initPurgeDialog();
+                initHistoryTable();
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+                var historyGrid = $('#history-table').data('gridInstance');
+              if (nfCommon.isDefinedAndNotNull(historyGrid)) {
+                    historyGrid.resizeCanvas();
+                }
+            },
+    
+            /**
+             * Load the processor status table.
+             */
+            loadHistoryTable: function () {
+                var historyGrid = $('#history-table').data('gridInstance');
+    
+                // clear the history model
+                var historyModel = historyGrid.getData();
+                historyModel.clear();
+    
+                // request refresh of the current 'page'
+                historyGrid.onViewportChanged.notify();
             }
-        },
-
-        /**
-         * Load the processor status table.
-         */
-        loadHistoryTable: function () {
-            var historyGrid = $('#history-table').data('gridInstance');
-
-            // clear the history model
-            var historyModel = historyGrid.getData();
-            historyModel.clear();
-
-            // request refresh of the current 'page'
-            historyGrid.onViewportChanged.notify();
-        }
-    };
-
-    return nfHistoryTable;
-}));
+        };
+    
+      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 85b21222aeda..3fd6e8842354 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
@@ -1,236 +1,236 @@
-/*
- * 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 top, define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common',
-                'nf.HistoryTable',
-                'nf.ErrorHandler',
-                'nf.Storage',
-                'nf.ClusterSummary'],
-            function ($, nfCommon, nfHistoryTable, nfErrorHandler, nfStorage, nfClusterSummary) {
-                return (nf.History = factory($, nfCommon, nfHistoryTable, nfErrorHandler, nfStorage, nfClusterSummary));
-            });
-    } 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 ($, nfCommon, nfHistoryTable, nfErrorHandler, nfStorage, nfClusterSummary) {
-    'use strict';
-
-    $(document).ready(function () {
-        // initialize the status page
-        nfHistory.init();
-    });
-
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        urls: {
-            banners: '../nifi-api/flow/banners',
-            about: '../nifi-api/flow/about',
-            currentUser: '../nifi-api/flow/current-user'
-        }
-    };
-
-    /**
-     * Loads the current user.
+    /*
+     * 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.
      */
-    var loadCurrentUser = function () {
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.currentUser,
-            dataType: 'json'
-        }).done(function (currentUser) {
-            nfCommon.setCurrentUser(currentUser);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Initializes the history page.
-     */
-    var initializeHistoryPage = function () {
-        // define mouse over event for the refresh button
-        $('#refresh-button').click(function () {
-            nfHistoryTable.loadHistoryTable();
+    
+  /* global top, define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.HistoryTable',
+                  'nf.ErrorHandler',
+                  'nf.Storage',
+                  'nf.ClusterSummary'],
+              function ($, nfCommon, nfHistoryTable, nfErrorHandler, nfStorage, nfClusterSummary) {
+                  return (nf.History = factory($, nfCommon, nfHistoryTable, nfErrorHandler, nfStorage, nfClusterSummary));
+              });
+      } 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 ($, nfCommon, nfHistoryTable, nfErrorHandler, nfStorage, nfClusterSummary) {
+      'use strict';
+    
+        $(document).ready(function () {
+            // initialize the status page
+          nfHistory.init();
         });
-
-        // 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 (nfCommon.isDefinedAndNotNull(response.banners)) {
-                        if (nfCommon.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('history');
-                        }
-
-                        if (nfCommon.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('history');
-                        }
-                    }
-
-                    deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    nfErrorHandler.handleAjaxError(xhr, status, error);
-                    deferred.reject();
-                });
-            } else {
-                deferred.resolve();
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                banners: '../nifi-api/flow/banners',
+                about: '../nifi-api/flow/about',
+              currentUser: '../nifi-api/flow/current-user'
             }
-        }).promise();
-    };
-
-    var nfHistory = {
+        };
+    
         /**
-         * Initializes the status page.
+         * Loads the current user.
          */
-        init: function () {
-            // load the current user
-            var currentUser = loadCurrentUser()
-
-            nfStorage.init();
-
-            // ensure the config requests are loaded
-            $.when(currentUser).done(function (currentUserResult) {
-                // if clustered, show message to indicate location of actions
-                if (nfClusterSummary.isClustered() === true) {
-                    $('#cluster-history-message').show();
-                }
-
-                // create the history table
-                nfHistoryTable.init();
-
-                // load the history table
-                nfHistoryTable.loadHistoryTable();
-
-                // once the table is initialized, finish initializing the page
-                initializeHistoryPage().done(function () {
-                    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'
-                            });
-
-                            $('#history').css('margin', 40);
-                            $('#history-refresh-container').css('margin', 40);
-                        }
-
-                        // configure the initial grid height
-                        nfHistoryTable.resetTableSize();
-                    };
-
-                    // get the about details
+        var loadCurrentUser = function () {
+            return $.ajax({
+                type: 'GET',
+                url: config.urls.currentUser,
+                dataType: 'json'
+            }).done(function (currentUser) {
+              nfCommon.setCurrentUser(currentUser);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Initializes the history page.
+         */
+        var initializeHistoryPage = function () {
+            // define mouse over event for the refresh button
+            $('#refresh-button').click(function () {
+              nfHistoryTable.loadHistoryTable();
+            });
+    
+            // 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.about,
+                        url: config.urls.banners,
                         dataType: 'json'
                     }).done(function (response) {
-                        var aboutDetails = response.about;
-                        var historyTitle = aboutDetails.title + ' History';
-
-                        // set the document title and the about title
-                        document.title = historyTitle;
-                        $('#history-header-text').text(historyTitle);
-
-                        // set the initial size
-                        setBodySize();
-                    }).fail(nfErrorHandler.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) {
-                                    dialog.modal('resize');
-                                }, 50, $(dialogs[i]));
+                        // ensure the banners response is specified
+                      if (nfCommon.isDefinedAndNotNull(response.banners)) {
+                          if (nfCommon.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('history');
                             }
-                        }
-
-                        // 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]));
+    
+                          if (nfCommon.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('history');
                             }
                         }
-
-                        // 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'));
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                      nfErrorHandler.handleAjaxError(xhr, status, error);
+                        deferred.reject();
+                    });
+                } else {
+                    deferred.resolve();
+                }
+            }).promise();
+        };
+    
+      var nfHistory = {
+            /**
+             * Initializes the status page.
+             */
+            init: function () {
+                // load the current user
+              var currentUser = loadCurrentUser()
+  
+              nfStorage.init();
+  
+              // ensure the config requests are loaded
+              $.when(currentUser).done(function (currentUserResult) {
+                  // if clustered, show message to indicate location of actions
+                  if (nfClusterSummary.isClustered() === true) {
+                      $('#cluster-history-message').show();
+                  }
+    
+                    // create the history table
+                  nfHistoryTable.init();
+    
+                    // load the history table
+                  nfHistoryTable.loadHistoryTable();
+    
+                    // once the table is initialized, finish initializing the page
+                    initializeHistoryPage().done(function () {
+                        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'
+                                });
+    
+                                $('#history').css('margin', 40);
+                                $('#history-refresh-container').css('margin', 40);
                             }
-                        }
-                        $.each(tabsContents, function (index, tabsContent) {
-                            nfCommon.toggleScrollable(tabsContent.get(0));
+    
+                            // configure the initial grid height
+                          nfHistoryTable.resetTableSize();
+                        };
+    
+                        // get the about details
+                        $.ajax({
+                            type: 'GET',
+                            url: config.urls.about,
+                            dataType: 'json'
+                        }).done(function (response) {
+                            var aboutDetails = response.about;
+                            var historyTitle = nf._.msg('nf-about')+ nf._.msg('nf-history-table.History');
+    
+                            // set the document title and the about title
+                            document.title = historyTitle;
+                            $('#history-header-text').text(historyTitle);
+    
+                            // set the initial size
+                            setBodySize();
+                      }).fail(nfErrorHandler.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) {
+                                        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) {
+                              nfCommon.toggleScrollable(tabsContent.get(0));
+                            });
                         });
                     });
                 });
-            });
-        }
-    };
-
-    return nfHistory;
-}));
\ No newline at end of file
+            }
+        };
+    
+      return nfHistory;
+  }));
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 3c1b95f350a9..cff96d354316 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
@@ -1,241 +1,241 @@
-/*
- * 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 top, define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.Storage'],
-            function ($, nfCommon, nfDialog, nfStorage) {
-                return (nf.Login = factory($, nfCommon, nfDialog, nfStorage));
-            });
-    } 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 ($, nfCommon, nfDialog, nfStorage) {
-    'use strict';
-
-    $(document).ready(function () {
-        nfLogin.init();
-    });
-
-    var config = {
-        urls: {
-            token: '../nifi-api/access/token',
-            accessStatus: '../nifi-api/access',
-            accessConfig: '../nifi-api/access/config'
-        }
-    };
-
-    var initializeMessage = function () {
-        $('#login-message-container').show();
-    };
-
-    var showLogin = function () {
-        // reset the forms
-        $('#username').val('');
-        $('#password').val('');
-        $('#login-submission-button').text('Log in');
-
-        // update the form visibility
-        $('#login-container').show();
-        $('#nifi-registration-container').hide();
-
-        // set the focus
-        $('#username').focus();
-    };
-
-    var initializeSubmission = function () {
-        $('#login-submission-button').on('click', function () {
-            if ($('#login-container').is(':visible')) {
-                login();
-            }
+    /*
+     * 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 top, define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Storage'],
+              function ($, nfCommon, nfDialog, nfStorage) {
+                  return (nf.Login = factory($, nfCommon, nfDialog, nfStorage));
+              });
+      } 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 ($, nfCommon, nfDialog, nfStorage) {
+      'use strict';
+    
+        $(document).ready(function () {
+          nfLogin.init();
         });
-
-        $('#login-submission-container').show();
-    };
-
-    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',
-            url: config.urls.token,
-            data: {
-                'username': $('#username').val(),
-                'password': $('#password').val()
+    
+        var config = {
+            urls: {
+                token: '../nifi-api/access/token',
+                accessStatus: '../nifi-api/access',
+                accessConfig: '../nifi-api/access/config'
             }
-        }).done(function (jwt) {
-            // get the payload and store the token with the appropirate expiration
-            var token = nfCommon.getJwtPayload(jwt);
-            var expiration = parseInt(token['exp'], 10) * nfCommon.MILLIS_PER_SECOND;
-            nfStorage.setItem('jwt', jwt, expiration);
-
-            // check to see if they actually have access now
+        };
+    
+        var initializeMessage = function () {
+            $('#login-message-container').show();
+        };
+    
+        var showLogin = function () {
+            // reset the forms
+            $('#username').val('');
+            $('#password').val('');
+            $('#login-submission-button').text(nf._.msg('nf-login.Login'));
+    
+            // update the form visibility
+            $('#login-container').show();
+            $('#nifi-registration-container').hide();
+    
+            // set the focus
+            $('#username').focus();
+        };
+    
+        var initializeSubmission = function () {
+            $('#login-submission-button').on('click', function () {
+                if ($('#login-container').is(':visible')) {
+                    login();
+                }
+            });
+    
+            $('#login-submission-container').show();
+        };
+    
+        var login = function () {
+            // remove focus
+            $('#username, #password').blur();
+    
+            // show the logging message...
+            $('#login-progress-label').text(nf._.msg('nf-login.Logining'));
+            $('#login-progress-container').show();
+            $('#login-submission-container').hide();
+    
+            // login submit
             $.ajax({
-                type: 'GET',
-                url: config.urls.accessStatus,
-                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
-                    if (top !== window) {
-                        parent.window.location = '/nifi';
+                type: 'POST',
+                url: config.urls.token,
+                data: {
+                    'username': $('#username').val(),
+                    'password': $('#password').val()
+                }
+            }).done(function (jwt) {
+                // get the payload and store the token with the appropirate expiration
+              var token = nfCommon.getJwtPayload(jwt);
+              var expiration = parseInt(token['exp'], 10) * nfCommon.MILLIS_PER_SECOND;
+              nfStorage.setItem('jwt', jwt, expiration);
+    
+                // check to see if they actually have access now
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.accessStatus,
+                    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
+                        if (top !== window) {
+                            parent.window.location = '/nifi';
+                        } else {
+                            window.location = '/nifi';
+                        }
                     } else {
-                        window.location = '/nifi';
+                        $('#login-message-title').text(nf._.msg('nf-login.Message1'));
+                        $('#login-message').text(accessStatus.message);
+    
+                        // update visibility
+                        $('#login-container').hide();
+                        $('#login-submission-container').hide();
+                        $('#login-progress-container').hide();
+                        $('#login-message-container').show();
                     }
-                } else {
-                    $('#login-message-title').text('Unable to log in');
-                    $('#login-message').text(accessStatus.message);
-
+                }).fail(function (xhr, status, error) {
+                    $('#login-message-title').text(nf._.msg('nf-login.Message1'));
+                    $('#login-message').text(xhr.responseText);
+    
                     // update visibility
                     $('#login-container').hide();
                     $('#login-submission-container').hide();
                     $('#login-progress-container').hide();
                     $('#login-message-container').show();
-                }
+                });
             }).fail(function (xhr, status, error) {
-                $('#login-message-title').text('Unable to log in');
-                $('#login-message').text(xhr.responseText);
-
-                // update visibility
-                $('#login-container').hide();
-                $('#login-submission-container').hide();
+              nfDialog.showOkDialog({
+                    headerText: nf._.msg('nf-login.Login'),
+                    dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                });
+    
+                // update the form visibility
+                $('#login-submission-container').show();
                 $('#login-progress-container').hide();
-                $('#login-message-container').show();
-            });
-        }).fail(function (xhr, status, error) {
-            nfDialog.showOkDialog({
-                headerText: 'Login',
-                dialogContent: nfCommon.escapeHtml(xhr.responseText)
-            });
-
-            // update the form visibility
-            $('#login-submission-container').show();
-            $('#login-progress-container').hide();
-        });
-    };
-
-    var showLogoutLink = function () {
-        nfCommon.showLogoutLink();
-    };
-
-    var nfLogin = {
-        /**
-         * Initializes the login page.
-         */
-        init: function () {
-            nfStorage.init();
-
-            if (nfStorage.getItem('jwt') !== null) {
-                showLogoutLink();
-            }
-
-            // supporting logging in via enter press
-            $('#username, #password').on('keyup', function (e) {
-                var code = e.keyCode ? e.keyCode : e.which;
-                if (code === $.ui.keyCode.ENTER) {
-                    login();
-                }
             });
-
-            // access status
-            var accessStatus = $.ajax({
-                type: 'GET',
-                url: config.urls.accessStatus,
-                dataType: 'json'
-            }).fail(function (xhr, status, error) {
-                $('#login-message-title').text('Unable to check Access Status');
-                $('#login-message').text(xhr.responseText);
-                initializeMessage();
-            });
-
-            // access config
-            var accessConfigXhr = $.ajax({
-                type: 'GET',
-                url: config.urls.accessConfig,
-                dataType: 'json'
-            });
-
-            $.when(accessStatus, accessConfigXhr).done(function (accessStatusResult, accessConfigResult) {
-                var accessStatusResponse = accessStatusResult[0];
-                var accessStatus = accessStatusResponse.accessStatus;
-
-                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');
-                    $('#login-message').text('This NiFi is not configured to support username/password logins.');
-                    showMessage = true;
-                    needsLogin = false;
+        };
+    
+        var showLogoutLink = function () {
+          nfCommon.showLogoutLink();
+        };
+    
+      var nfLogin = {
+            /**
+             * Initializes the login page.
+             */
+            init: function () {
+              nfStorage.init();
+    
+              if (nfStorage.getItem('jwt') !== null) {
+                    showLogoutLink();
                 }
-
-                // initialize the page as appropriate
-                if (showMessage === true) {
+    
+                // supporting logging in via enter press
+                $('#username, #password').on('keyup', function (e) {
+                    var code = e.keyCode ? e.keyCode : e.which;
+                    if (code === $.ui.keyCode.ENTER) {
+                        login();
+                    }
+                });
+    
+                // access status
+                var accessStatus = $.ajax({
+                    type: 'GET',
+                    url: config.urls.accessStatus,
+                    dataType: 'json'
+                }).fail(function (xhr, status, error) {
+                    $('#login-message-title').text(nf._.msg('nf-login.Message2'));
+                    $('#login-message').text(xhr.responseText);
                     initializeMessage();
-                } else if (needsLogin === true) {
-                    showLogin();
-                    initializeSubmission();
-                }
-            });
-        }
-    };
-
-    return nfLogin;
-}));
\ No newline at end of file
+                });
+    
+                // access config
+                var accessConfigXhr = $.ajax({
+                    type: 'GET',
+                    url: config.urls.accessConfig,
+                    dataType: 'json'
+                });
+    
+                $.when(accessStatus, accessConfigXhr).done(function (accessStatusResult, accessConfigResult) {
+                    var accessStatusResponse = accessStatusResult[0];
+                    var accessStatus = accessStatusResponse.accessStatus;
+    
+                    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(nf._.msg('nf-login.SUCCESS'));
+                        $('#login-message').text(accessStatus.message);
+                    }
+    
+                    // if login is required, verify its supported
+                    if (accessConfig.supportsLogin === false && needsLogin === true) {
+                        $('#login-message-title').text(nf._.msg('nf-login.Denied'));
+                        $('#login-message').text(nf._.msg('nf-login.Message3'));
+                        showMessage = true;
+                        needsLogin = false;
+                    }
+    
+                    // initialize the page as appropriate
+                    if (showMessage === true) {
+                        initializeMessage();
+                    } else if (needsLogin === true) {
+                        showLogin();
+                        initializeSubmission();
+                    }
+                });
+            }
+        };
+    
+      return nfLogin;
+  }));
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 682ad4c1a8cf..e4b02145ff86 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
@@ -1,1266 +1,1266 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports, parseFloat */
-
-// Define a common utility class used across the entire application.
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Storage'],
-            function ($, d3, nfStorage) {
-                return (nf.Common = factory($, d3, nfStorage));
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports, parseFloat */
+  
+  // Define a common utility class used across the entire application.
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Storage'],
+              function ($, d3, nfStorage) {
+                  return (nf.Common = factory($, d3, nfStorage));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.Common = factory(require('jquery'),
+              require('d3'),
+              require('nf.Storage')));
+      } else {
+          nf.Common = factory(root.$,
+              root.d3,
+              root.nf.Storage);
+      }
+  }(this, function ($, d3, nfStorage) {
+      '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';
+            $('<img/>').attr('src', imgSrc).on('load', function () {
+                $('div.message-pane').css('background-image', imgSrc);
             });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Common = factory(require('jquery'),
-            require('d3'),
-            require('nf.Storage')));
-    } else {
-        nf.Common = factory(root.$,
-            root.d3,
-            root.nf.Storage);
-    }
-}(this, function ($, d3, nfStorage) {
-    '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';
-        $('<img/>').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');
-            }
-        });
-
-        // setup click areas for custom checkboxes
-        $(document).on('click', '.nf-checkbox-label', function (e) {
-            $(e.target).parent().find('.nf-checkbox').click();
-        });
-
-        // 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 (nfStorage.getItem('jwt') !== null) {
-            $('#user-logout-container').css('display', 'block');
-            nfCommon.scheduleTokenRefresh();
-        }
-
-        // handle logout
-        $('#user-logout').on('click', function () {
-            nfStorage.removeItem('jwt');
-            window.location = '/nifi/login';
-        });
-
-        // handle home
-        $('#user-home').on('click', function () {
-            if (top !== window) {
-                parent.window.location = '/nifi';
-            } else {
-                window.location = '/nifi';
+    
+            // 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');
+                }
+            });
+    
+          // setup click areas for custom checkboxes
+          $(document).on('click', '.nf-checkbox-label', function (e) {
+              $(e.target).parent().find('.nf-checkbox').click();
+          });
+  
+            // 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 (nfStorage.getItem('jwt') !== null) {
+                $('#user-logout-container').css('display', 'block');
+              nfCommon.scheduleTokenRefresh();
             }
+    
+            // handle logout
+            $('#user-logout').on('click', function () {
+              nfStorage.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;
-
-    var policyTypeListing = [{
-        text: 'view the user interface',
-        value: 'flow',
-        description: 'Allows users to view the user interface'
-    }, {
-        text: 'access the controller',
-        value: 'controller',
-        description: 'Allows users to view/modify the controller including Reporting Tasks, Controller Services, and Nodes in the Cluster'
-    }, {
-        text: 'query provenance',
-        value: 'provenance',
-        description: 'Allows users to submit a Provenance Search and request Event Lineage'
-    }, {
-        text: 'access restricted components',
-        value: 'restricted-components',
-        description: 'Allows users to create/modify restricted components assuming otherwise sufficient permissions'
-    }, {
-        text: 'access all policies',
-        value: 'policies',
-        description: 'Allows users to view/modify the policies for all components'
-    }, {
-        text: 'access users/user groups',
-        value: 'tenants',
-        description: 'Allows users to view/modify the users and user groups'
-    }, {
-        text: 'retrieve site-to-site details',
-        value: 'site-to-site',
-        description: 'Allows other NiFi instances to retrieve Site-To-Site details of this NiFi'
-    }, {
-        text: 'view system diagnostics',
-        value: 'system',
-        description: 'Allows users to view System Diagnostics'
-    }, {
-        text: 'proxy user requests',
-        value: 'proxy',
-        description: 'Allows proxy machines to send requests on the behalf of others'
-    }, {
-        text: 'access counters',
-        value: 'counters',
-        description: 'Allows users to view/modify Counters'
-    }];
-
-    var nfCommon = {
-        ANONYMOUS_USER_TEXT: 'Anonymous user',
-
-        config: {
-            sensitiveText: 'Sensitive value set',
-            tooltipConfig: {
-                style: {
-                    classes: 'nifi-tooltip'
-                },
-                show: {
-                    solo: true,
-                    effect: function (offset) {
-                        $(this).slideDown(100);
+    
+        // interval for cancelling token refresh when necessary
+        var tokenRefreshInterval = null;
+    
+      var policyTypeListing = [{
+          text: 'view the user interface',
+          value: 'flow',
+          description: 'Allows users to view the user interface'
+      }, {
+          text: 'access the controller',
+          value: 'controller',
+          description: 'Allows users to view/modify the controller including Reporting Tasks, Controller Services, and Nodes in the Cluster'
+      }, {
+          text: 'query provenance',
+          value: 'provenance',
+          description: 'Allows users to submit a Provenance Search and request Event Lineage'
+      }, {
+          text: 'access restricted components',
+          value: 'restricted-components',
+          description: 'Allows users to create/modify restricted components assuming otherwise sufficient permissions'
+      }, {
+          text: 'access all policies',
+          value: 'policies',
+          description: 'Allows users to view/modify the policies for all components'
+      }, {
+          text: 'access users/user groups',
+          value: 'tenants',
+          description: 'Allows users to view/modify the users and user groups'
+      }, {
+          text: 'retrieve site-to-site details',
+          value: 'site-to-site',
+          description: 'Allows other NiFi instances to retrieve Site-To-Site details of this NiFi'
+      }, {
+          text: 'view system diagnostics',
+          value: 'system',
+          description: 'Allows users to view System Diagnostics'
+      }, {
+          text: 'proxy user requests',
+          value: 'proxy',
+          description: 'Allows proxy machines to send requests on the behalf of others'
+      }, {
+          text: 'access counters',
+          value: 'counters',
+          description: 'Allows users to view/modify Counters'
+      }];
+  
+      var nfCommon = {
+            ANONYMOUS_USER_TEXT: 'Anonymous user',
+    
+            config: {
+                sensitiveText: 'Sensitive value set',
+                tooltipConfig: {
+                    style: {
+                        classes: 'nifi-tooltip'
+                    },
+                    show: {
+                        solo: true,
+                        effect: function (offset) {
+                            $(this).slideDown(100);
+                        }
+                    },
+                    hide: {
+                        effect: function (offset) {
+                            $(this).slideUp(100);
+                        }
+                    },
+                    position: {
+                        at: 'bottom center',
+                        my: 'top center',
+                        adjust: {
+                            y: 5
+                        }
                     }
-                },
-                hide: {
-                    effect: function (offset) {
-                        $(this).slideUp(100);
+                }
+            },
+    
+            /**
+             * Determines if the current broswer supports SVG.
+             */
+            SUPPORTS_SVG: !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect,
+    
+            /**
+             * The current user.
+             */
+            currentUser: undefined,
+    
+            /**
+           * Formats type of a component for a new instance dialog.
+           *
+           * @param row
+           * @param cell
+           * @param value
+           * @param columnDef
+           * @param dataContext
+           * @returns {string}
+           */
+          typeFormatter: function (row, cell, value, columnDef, dataContext) {
+              var markup = '';
+  
+              // restriction
+              if (nfCommon.isBlank(dataContext.usageRestriction) === false) {
+                  markup += '<div class="view-usage-restriction fa fa-shield"></div><span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
+              } else {
+                  markup += '<div class="fa"></div>';
+              }
+  
+              // type
+              markup += value;
+  
+              return markup;
+          },
+  
+          /**
+             * Sets the current user.
+             *
+             * @param currentUser
+             */
+            setCurrentUser: function (currentUser) {
+              nfCommon.currentUser = currentUser;
+            },
+    
+            /**
+             * Automatically refresh tokens by checking once an hour if its going to expire soon.
+             */
+            scheduleTokenRefresh: function () {
+                // if we are currently polling for token refresh, cancel it
+                if (tokenRefreshInterval !== null) {
+                    clearInterval(tokenRefreshInterval);
+                }
+    
+                // set the interval to one hour
+              var interval = nfCommon.MILLIS_PER_MINUTE;
+    
+                var checkExpiration = function () {
+                  var expiration = nfStorage.getItemExpiration('jwt');
+    
+                    // ensure there is an expiration and token present
+                    if (expiration !== null) {
+                        var expirationDate = new Date(expiration);
+                        var now = new Date();
+    
+                        // get the time remainging plus a little bonus time to reload the token
+                      var timeRemaining = expirationDate.valueOf() - now.valueOf() - (30 * nfCommon.MILLIS_PER_SECOND);
+                        if (timeRemaining < interval) {
+                          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({}, nfCommon.config.tooltipConfig, {
+                                    content: nf._.msg('nf-common.Message15'),
+                                    position: {
+                                        my: 'top right',
+                                        at: 'bottom left'
+                                    }
+                                }));
+                            }
+                        }
                     }
-                },
-                position: {
-                    at: 'bottom center',
-                    my: 'top center',
-                    adjust: {
-                        y: 5
+                };
+    
+                // perform initial check
+                checkExpiration();
+    
+                // schedule subsequent checks
+                tokenRefreshInterval = setInterval(checkExpiration, interval);
+            },
+    
+            /**
+             * Sets the anonymous user label.
+             */
+            setAnonymousUserLabel: function () {
+                var anonymousUserAlert = $('#anonymous-user-alert');
+                if (anonymousUserAlert.data('qtip')) {
+                    anonymousUserAlert.qtip('api').destroy(true);
+                }
+    
+                // alert user's of anonymous access
+              anonymousUserAlert.show().qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                    content: nf._.msg('nf-common.Message16'),
+                    position: {
+                        my: 'top right',
+                        at: 'bottom left'
+                    }
+                }));
+    
+                // render the anonymous user text
+              $('#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 (nfCommon.isDefinedAndNotNull(jwt)) {
+                    var segments = jwt.split(/\./);
+                    if (segments.length !== 3) {
+                        return '';
+                    }
+    
+                    var rawPayload = $.base64.atob(segments[1]);
+                    var payload = JSON.parse(rawPayload);
+    
+                  if (nfCommon.isDefinedAndNotNull(payload)) {
+                        return payload;
+                    } else {
+                        return null;
                     }
                 }
-            }
-        },
-
-        /**
-         * Determines if the current broswer supports SVG.
-         */
-        SUPPORTS_SVG: !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect,
-
-        /**
-         * The current user.
-         */
-        currentUser: undefined,
-
-        /**
-         * Formats type of a component for a new instance dialog.
-         *
-         * @param row
-         * @param cell
-         * @param value
-         * @param columnDef
-         * @param dataContext
-         * @returns {string}
-         */
-        typeFormatter: function (row, cell, value, columnDef, dataContext) {
-            var markup = '';
-
-            // restriction
-            if (nfCommon.isBlank(dataContext.usageRestriction) === false) {
-                markup += '<div class="view-usage-restriction fa fa-shield"></div><span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
-            } else {
-                markup += '<div class="fa"></div>';
-            }
-
-            // type
-            markup += value;
-
-            return markup;
-        },
-
-        /**
-         * Sets the current user.
-         *
-         * @param currentUser
-         */
-        setCurrentUser: function (currentUser) {
-            nfCommon.currentUser = currentUser;
-        },
-
-        /**
-         * Automatically refresh tokens by checking once an hour if its going to expire soon.
-         */
-        scheduleTokenRefresh: function () {
-            // if we are currently polling for token refresh, cancel it
-            if (tokenRefreshInterval !== null) {
-                clearInterval(tokenRefreshInterval);
-            }
-
-            // set the interval to one hour
-            var interval = nfCommon.MILLIS_PER_MINUTE;
-
-            var checkExpiration = function () {
-                var expiration = nfStorage.getItemExpiration('jwt');
-
-                // ensure there is an expiration and token present
-                if (expiration !== null) {
-                    var expirationDate = new Date(expiration);
-                    var now = new Date();
-
-                    // get the time remainging plus a little bonus time to reload the token
-                    var timeRemaining = expirationDate.valueOf() - now.valueOf() - (30 * nfCommon.MILLIS_PER_SECOND);
-                    if (timeRemaining < interval) {
-                        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({}, nfCommon.config.tooltipConfig, {
-                                content: 'Your session will expire soon. Please log in again to avoid being automatically logged out.',
-                                position: {
-                                    my: 'top right',
-                                    at: 'bottom left'
-                                }
-                            }));
-                        }
+    
+                return null;
+            },
+    
+            /**
+             * Determines whether the current user can access provenance.
+             *
+             * @returns {boolean}
+             */
+            canAccessProvenance: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.provenancePermissions.canRead === true;
+              } else {
+                  return false;
+              }
+          },
+  
+          /**
+           * Determines whether the current user can access restricted comopnents.
+           *
+           * @returns {boolean}
+           */
+          canAccessRestrictedComponents: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.restrictedComponentsPermissions.canWrite === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can access counters.
+             *
+             * @returns {boolean}
+             */
+            canAccessCounters: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.countersPermissions.canRead === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can modify counters.
+             *
+             * @returns {boolean}
+             */
+            canModifyCounters: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.countersPermissions.canRead === true && nfCommon.currentUser.countersPermissions.canWrite === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can access tenants.
+             *
+             * @returns {boolean}
+             */
+            canAccessTenants: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.tenantsPermissions.canRead === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can modify tenants.
+             *
+             * @returns {boolean}
+             */
+            canModifyTenants: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.tenantsPermissions.canRead === true && nfCommon.currentUser.tenantsPermissions.canWrite === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can access counters.
+             *
+             * @returns {boolean}
+             */
+            canAccessPolicies: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.policiesPermissions.canRead === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can modify counters.
+             *
+             * @returns {boolean}
+             */
+            canModifyPolicies: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.policiesPermissions.canRead === true && nfCommon.currentUser.policiesPermissions.canWrite === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can access the controller.
+             *
+             * @returns {boolean}
+             */
+            canAccessController: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.controllerPermissions.canRead === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can modify the controller.
+             *
+             * @returns {boolean}
+             */
+            canModifyController: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.controllerPermissions.canRead === true && nfCommon.currentUser.controllerPermissions.canWrite === true;
+              } else {
+                  return false;
+              }
+          },
+  
+          /**
+           * Determines whether the current user can access system diagnostics.
+           *
+           * @returns {boolean}
+           */
+          canAccessSystem: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.systemPermissions.canRead === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * 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
+             */
+            addHoverEffect: function (selector, normalStyle, overStyle) {
+                $(document).on('mouseenter', selector, function () {
+                    $(this).removeClass(normalStyle).addClass(overStyle);
+                }).on('mouseleave', selector, function () {
+                    $(this).removeClass(overStyle).addClass(normalStyle);
+                });
+                return $(selector).addClass(normalStyle);
+            },
+    
+            /**
+             * Determine if an `element` has content overflow and adds the `.scrollable` class if it does.
+             *
+             * @param {HTMLElement} element The DOM element to toggle .scrollable upon.
+             */
+            toggleScrollable: function (element) {
+                if ($(element).is(':visible')) {
+                    if (element.offsetHeight < element.scrollHeight ||
+                        element.offsetWidth < element.scrollWidth) {
+                        // your element has overflow
+                        $(element).addClass('scrollable');
+                    } else {
+                        $(element).removeClass('scrollable');
                     }
                 }
-            };
-
-            // perform initial check
-            checkExpiration();
-
-            // schedule subsequent checks
-            tokenRefreshInterval = setInterval(checkExpiration, interval);
-        },
-
-        /**
-         * Sets the anonymous user label.
-         */
-        setAnonymousUserLabel: function () {
-            var anonymousUserAlert = $('#anonymous-user-alert');
-            if (anonymousUserAlert.data('qtip')) {
-                anonymousUserAlert.qtip('api').destroy(true);
-            }
-
-            // alert user's of anonymous access
-            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',
-                    at: 'bottom left'
+            },
+    
+            /**
+           * Determines the contrast color of a given hex color.
+             *
+           * @param {string} hex  The hex color to test.
+           * @returns {string} The contrasting color string.
+           */
+          determineContrastColor: function (hex) {
+              if (parseInt(hex, 16) > 0xffffff / 1.5) {
+                  return '#000000';
+              }
+              return '#ffffff';
+            },
+    
+            /**
+             * Shows the logout link if appropriate.
+             */
+            showLogoutLink: function () {
+              if (nfStorage.getItem('jwt') === null) {
+                    $('#user-logout-container').css('display', 'none');
+                } else {
+                    $('#user-logout-container').css('display', 'block');
                 }
-            }));
-
-            // render the anonymous user text
-            $('#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 (nfCommon.isDefinedAndNotNull(jwt)) {
-                var segments = jwt.split(/\./);
-                if (segments.length !== 3) {
-                    return '';
+            },
+    
+            /**
+             * Returns whether a content viewer has been configured.
+             *
+             * @returns {boolean}
+             */
+            isContentViewConfigured: function () {
+                var contentViewerUrl = $('#nifi-content-viewer-url').text();
+              return !nfCommon.isBlank(contentViewerUrl);
+            },
+    
+            /**
+             * 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 (nfCommon.isUndefined(value) || nfCommon.isNull(value)) {
+                    return $('#' + target).addClass('unset').text(nf._.msg('nf-common.Message13'));
+                } else if (value === '') {
+                    return $('#' + target).addClass('blank').text(nf._.msg('nf-common.Message14'));
+                } else {
+                    return $('#' + target).text(value);
                 }
-
-                var rawPayload = $.base64.atob(segments[1]);
-                var payload = JSON.parse(rawPayload);
-
-                if (nfCommon.isDefinedAndNotNull(payload)) {
-                    return payload;
+            },
+    
+            /**
+             * 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) {
+                return $('#' + target).removeClass('unset blank').text('');
+            },
+    
+            /**
+             * Cleans up any tooltips that have been created for the specified container.
+             *
+             * @param {jQuery} container
+             * @param {string} tooltipTarget
+             */
+            cleanUpTooltips: function (container, tooltipTarget) {
+                container.find(tooltipTarget).each(function () {
+                    var tip = $(this);
+                    if (tip.data('qtip')) {
+                        var api = tip.qtip('api');
+                        api.destroy(true);
+                    }
+                });
+            },
+    
+            /**
+             * Formats the tooltip for the specified property.
+             *
+             * @param {object} propertyDescriptor      The property descriptor
+             * @param {object} propertyHistory         The property history
+             * @returns {string}
+             */
+            formatPropertyTooltip: function (propertyDescriptor, propertyHistory) {
+                var tipContent = [];
+    
+                // show the property description if applicable
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                  if (!nfCommon.isBlank(propertyDescriptor.description)) {
+                      tipContent.push(nfCommon.escapeHtml(propertyDescriptor.description));
+                  }
+                  if (!nfCommon.isBlank(propertyDescriptor.defaultValue)) {
+                      tipContent.push('<b>'+nf._.msg('nf-summary-table.DefaultValue')+':</b> ' + nfCommon.escapeHtml(propertyDescriptor.defaultValue));
+                  }
+                  if (!nfCommon.isBlank(propertyDescriptor.supportsEl)) {
+                      tipContent.push('<b>'+nf._.msg('nf-summary-table.SupportsExpressionLanguage')+':</b> ' + nfCommon.escapeHtml(propertyDescriptor.supportsEl));
+                    }
+                }
+    
+              if (nfCommon.isDefinedAndNotNull(propertyHistory)) {
+                  if (!nfCommon.isEmpty(propertyHistory.previousValues)) {
+                        var history = [];
+                        $.each(propertyHistory.previousValues, function (_, previousValue) {
+                          history.push('<li>' + nfCommon.escapeHtml(previousValue.previousValue) + ' - ' + nfCommon.escapeHtml(previousValue.timestamp) + ' (' + nfCommon.escapeHtml(previousValue.userIdentity) + ')</li>');
+                        });
+                      tipContent.push('<b>'+nf._.msg('nf-summary-table.History')+':</b><ul class="property-info">' + history.join('') + '</ul>');
+                    }
+                }
+    
+                if (tipContent.length > 0) {
+                    return tipContent.join('<br/><br/>');
                 } else {
                     return null;
                 }
-            }
-
-            return null;
-        },
-
-        /**
-         * Determines whether the current user can access provenance.
-         *
-         * @returns {boolean}
-         */
-        canAccessProvenance: function () {
-            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                return nfCommon.currentUser.provenancePermissions.canRead === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * Determines whether the current user can access restricted comopnents.
-         *
-         * @returns {boolean}
-         */
-        canAccessRestrictedComponents: function () {
-            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                return nfCommon.currentUser.restrictedComponentsPermissions.canWrite === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * Determines whether the current user can access counters.
-         *
-         * @returns {boolean}
-         */
-        canAccessCounters: function () {
-            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                return nfCommon.currentUser.countersPermissions.canRead === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * Determines whether the current user can modify counters.
-         *
-         * @returns {boolean}
-         */
-        canModifyCounters: function () {
-            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                return nfCommon.currentUser.countersPermissions.canRead === true && nfCommon.currentUser.countersPermissions.canWrite === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * Determines whether the current user can access tenants.
-         *
-         * @returns {boolean}
-         */
-        canAccessTenants: function () {
-            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                return nfCommon.currentUser.tenantsPermissions.canRead === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * Determines whether the current user can modify tenants.
-         *
-         * @returns {boolean}
-         */
-        canModifyTenants: function () {
-            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                return nfCommon.currentUser.tenantsPermissions.canRead === true && nfCommon.currentUser.tenantsPermissions.canWrite === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * Determines whether the current user can access counters.
-         *
-         * @returns {boolean}
-         */
-        canAccessPolicies: function () {
-            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                return nfCommon.currentUser.policiesPermissions.canRead === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * Determines whether the current user can modify counters.
-         *
-         * @returns {boolean}
-         */
-        canModifyPolicies: function () {
-            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                return nfCommon.currentUser.policiesPermissions.canRead === true && nfCommon.currentUser.policiesPermissions.canWrite === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * Determines whether the current user can access the controller.
-         *
-         * @returns {boolean}
-         */
-        canAccessController: function () {
-            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                return nfCommon.currentUser.controllerPermissions.canRead === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * Determines whether the current user can modify the controller.
-         *
-         * @returns {boolean}
-         */
-        canModifyController: function () {
-            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                return nfCommon.currentUser.controllerPermissions.canRead === true && nfCommon.currentUser.controllerPermissions.canWrite === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * Determines whether the current user can access system diagnostics.
-         *
-         * @returns {boolean}
-         */
-        canAccessSystem: function () {
-            if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                return nfCommon.currentUser.systemPermissions.canRead === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * 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
-         */
-        addHoverEffect: function (selector, normalStyle, overStyle) {
-            $(document).on('mouseenter', selector, function () {
-                $(this).removeClass(normalStyle).addClass(overStyle);
-            }).on('mouseleave', selector, function () {
-                $(this).removeClass(overStyle).addClass(normalStyle);
-            });
-            return $(selector).addClass(normalStyle);
-        },
-
-        /**
-         * Determine if an `element` has content overflow and adds the `.scrollable` class if it does.
-         *
-         * @param {HTMLElement} element The DOM element to toggle .scrollable upon.
-         */
-        toggleScrollable: function (element) {
-            if ($(element).is(':visible')) {
-                if (element.offsetHeight < element.scrollHeight ||
-                    element.offsetWidth < element.scrollWidth) {
-                    // your element has overflow
-                    $(element).addClass('scrollable');
+            },
+    
+            /**
+             * 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 '<div><span class="label">' + nfCommon.formatValue(name) + ': </span>' + nfCommon.formatValue(value) + '</div>';
+            },
+    
+            /**
+             * Formats the specified value accordingly.
+             *
+             * @argument {string} value     The value of the property
+             */
+            formatValue: function (value) {
+              if (nfCommon.isDefinedAndNotNull(value)) {
+                    if (value === '') {
+                        return '<span class="blank" style="font-size: 13px; padding-top: 2px;">'+nf._.msg('nf-common.Message27')+'</span>';
+                    } else {
+                      return nfCommon.escapeHtml(value);
+                    }
                 } else {
-                    $(element).removeClass('scrollable');
+                    return '<span class="unset" style="font-size: 13px; padding-top: 2px;">'+nf._.msg('nf-common.Message28')+'</span>';
                 }
-            }
-        },
-
-        /**
-         * Determines the contrast color of a given hex color.
-         *
-         * @param {string} hex  The hex color to test.
-         * @returns {string} The contrasting color string.
-         */
-        determineContrastColor: function (hex) {
-            if (parseInt(hex, 16) > 0xffffff / 1.5) {
-                return '#000000';
-            }
-            return '#ffffff';
-        },
-
-        /**
-         * Shows the logout link if appropriate.
-         */
-        showLogoutLink: function () {
-            if (nfStorage.getItem('jwt') === null) {
-                $('#user-logout-container').css('display', 'none');
-            } else {
-                $('#user-logout-container').css('display', 'block');
-            }
-        },
-
-        /**
-         * Returns whether a content viewer has been configured.
-         *
-         * @returns {boolean}
-         */
-        isContentViewConfigured: function () {
-            var contentViewerUrl = $('#nifi-content-viewer-url').text();
-            return !nfCommon.isBlank(contentViewerUrl);
-        },
-
-        /**
-         * 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 (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');
-            } else {
-                return $('#' + target).text(value);
-            }
-        },
-
-        /**
-         * 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) {
-            return $('#' + target).removeClass('unset blank').text('');
-        },
-
-        /**
-         * Cleans up any tooltips that have been created for the specified container.
-         *
-         * @param {jQuery} container
-         * @param {string} tooltipTarget
-         */
-        cleanUpTooltips: function (container, tooltipTarget) {
-            container.find(tooltipTarget).each(function () {
-                var tip = $(this);
-                if (tip.data('qtip')) {
-                    var api = tip.qtip('api');
-                    api.destroy(true);
-                }
-            });
-        },
-
-        /**
-         * Formats the tooltip for the specified property.
-         *
-         * @param {object} propertyDescriptor      The property descriptor
-         * @param {object} propertyHistory         The property history
-         * @returns {string}
-         */
-        formatPropertyTooltip: function (propertyDescriptor, propertyHistory) {
-            var tipContent = [];
-
-            // show the property description if applicable
-            if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                if (!nfCommon.isBlank(propertyDescriptor.description)) {
-                    tipContent.push(nfCommon.escapeHtml(propertyDescriptor.description));
+            },
+    
+            /**
+             * HTML escapes the specified string. If the string is null
+             * or undefined, an empty string is returned.
+             *
+             * @returns {string}
+             */
+            escapeHtml: (function () {
+                var entityMap = {
+                    '&': '&amp;',
+                    '<': '&lt;',
+                    '>': '&gt;',
+                    '"': '&quot;',
+                    "'": '&#39;',
+                    '/': '&#x2f;'
+                };
+    
+                return function (string) {
+                  if (nfCommon.isDefinedAndNotNull(string)) {
+                        return String(string).replace(/[&<>"'\/]/g, function (s) {
+                            return entityMap[s];
+                        });
+                    } else {
+                        return '';
+                    }
+                };
+            }()),
+    
+            /**
+             * Determines if the specified property is sensitive.
+             *
+             * @argument {object} propertyDescriptor        The property descriptor
+             */
+            isSensitiveProperty: function (propertyDescriptor) {
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                    return propertyDescriptor.sensitive === true;
+                } else {
+                    return false;
                 }
-                if (!nfCommon.isBlank(propertyDescriptor.defaultValue)) {
-                    tipContent.push('<b>Default value:</b> ' + nfCommon.escapeHtml(propertyDescriptor.defaultValue));
+            },
+    
+            /**
+             * Determines if the specified property is required.
+             *
+             * @param {object} propertyDescriptor           The property descriptor
+             */
+            isRequiredProperty: function (propertyDescriptor) {
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                    return propertyDescriptor.required === true;
+                } else {
+                    return false;
                 }
-                if (!nfCommon.isBlank(propertyDescriptor.supportsEl)) {
-                    tipContent.push('<b>Supports expression language:</b> ' + nfCommon.escapeHtml(propertyDescriptor.supportsEl));
+            },
+    
+            /**
+             * Determines if the specified property is required.
+             *
+             * @param {object} propertyDescriptor           The property descriptor
+             */
+            isDynamicProperty: function (propertyDescriptor) {
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                    return propertyDescriptor.dynamic === true;
+                } else {
+                    return false;
                 }
-            }
-
-            if (nfCommon.isDefinedAndNotNull(propertyHistory)) {
-                if (!nfCommon.isEmpty(propertyHistory.previousValues)) {
-                    var history = [];
-                    $.each(propertyHistory.previousValues, function (_, previousValue) {
-                        history.push('<li>' + nfCommon.escapeHtml(previousValue.previousValue) + ' - ' + nfCommon.escapeHtml(previousValue.timestamp) + ' (' + nfCommon.escapeHtml(previousValue.userIdentity) + ')</li>');
-                    });
-                    tipContent.push('<b>History:</b><ul class="property-info">' + history.join('') + '</ul>');
+            },
+    
+            /**
+             * Gets the allowable values for the specified property.
+             *
+             * @argument {object} propertyDescriptor        The property descriptor
+             */
+            getAllowableValues: function (propertyDescriptor) {
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                    return propertyDescriptor.allowableValues;
+                } else {
+                    return null;
                 }
-            }
-
-            if (tipContent.length > 0) {
-                return tipContent.join('<br/><br/>');
-            } else {
-                return null;
-            }
-        },
-
-        /**
-         * 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 '<div><span class="label">' + nfCommon.formatValue(name) + ': </span>' + nfCommon.formatValue(value) + '</div>';
-        },
-
-        /**
-         * Formats the specified value accordingly.
-         *
-         * @argument {string} value     The value of the property
-         */
-        formatValue: function (value) {
-            if (nfCommon.isDefinedAndNotNull(value)) {
-                if (value === '') {
-                    return '<span class="blank" style="font-size: 13px; padding-top: 2px;">Empty string set</span>';
+            },
+    
+            /**
+             * Returns whether the specified property supports EL.
+             *
+             * @param {object} propertyDescriptor           The property descriptor
+             */
+            supportsEl: function (propertyDescriptor) {
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                    return propertyDescriptor.supportsEl === true;
                 } else {
-                    return nfCommon.escapeHtml(value);
+                    return false;
                 }
-            } else {
-                return '<span class="unset" style="font-size: 13px; padding-top: 2px;">No value set</span>';
-            }
-        },
-
-        /**
-         * HTML escapes the specified string. If the string is null
-         * or undefined, an empty string is returned.
-         *
-         * @returns {string}
-         */
-        escapeHtml: (function () {
-            var entityMap = {
-                '&': '&amp;',
-                '<': '&lt;',
-                '>': '&gt;',
-                '"': '&quot;',
-                "'": '&#39;',
-                '/': '&#x2f;'
-            };
-
-            return function (string) {
-                if (nfCommon.isDefinedAndNotNull(string)) {
-                    return String(string).replace(/[&<>"'\/]/g, function (s) {
-                        return entityMap[s];
+            },
+    
+            /**
+             * 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) {
+                if ($.isArray(array)) {
+                    var ul = $('<ul class="result"></ul>');
+                    $.each(array, function (_, item) {
+                        var li = $('<li></li>').appendTo(ul);
+                        if (item instanceof jQuery) {
+                            li.append(item);
+                        } else {
+                            li.text(item);
+                        }
                     });
+                    return ul;
                 } else {
-                    return '';
+                    return null;
                 }
-            };
-        }()),
-
-        /**
-         * Determines if the specified property is sensitive.
-         *
-         * @argument {object} propertyDescriptor        The property descriptor
-         */
-        isSensitiveProperty: function (propertyDescriptor) {
-            if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                return propertyDescriptor.sensitive === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * Determines if the specified property is required.
-         *
-         * @param {object} propertyDescriptor           The property descriptor
-         */
-        isRequiredProperty: function (propertyDescriptor) {
-            if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                return propertyDescriptor.required === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * Determines if the specified property is required.
-         *
-         * @param {object} propertyDescriptor           The property descriptor
-         */
-        isDynamicProperty: function (propertyDescriptor) {
-            if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                return propertyDescriptor.dynamic === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * Gets the allowable values for the specified property.
-         *
-         * @argument {object} propertyDescriptor        The property descriptor
-         */
-        getAllowableValues: function (propertyDescriptor) {
-            if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                return propertyDescriptor.allowableValues;
-            } else {
-                return null;
-            }
-        },
-
-        /**
-         * Returns whether the specified property supports EL.
-         *
-         * @param {object} propertyDescriptor           The property descriptor
-         */
-        supportsEl: function (propertyDescriptor) {
-            if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                return propertyDescriptor.supportsEl === true;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * 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) {
-            if ($.isArray(array)) {
-                var ul = $('<ul class="result"></ul>');
-                $.each(array, function (_, item) {
-                    var li = $('<li></li>').appendTo(ul);
-                    if (item instanceof jQuery) {
-                        li.append(item);
+            },
+    
+            /**
+             * 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
+             */
+            substringAfterLast: function (str, strToFind) {
+                var result = '';
+                var indexOfStrToFind = str.lastIndexOf(strToFind);
+                if (indexOfStrToFind >= 0) {
+                    var indexAfterStrToFind = indexOfStrToFind + strToFind.length;
+                    if (indexAfterStrToFind < str.length) {
+                        result = str.substr(indexAfterStrToFind);
+                    }
+                }
+                return result;
+            },
+    
+            /**
+             * 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
+             */
+            substringAfterFirst: function (str, strToFind) {
+                var result = '';
+                var indexOfStrToFind = str.indexOf(strToFind);
+                if (indexOfStrToFind >= 0) {
+                    var indexAfterStrToFind = indexOfStrToFind + strToFind.length;
+                    if (indexAfterStrToFind < str.length) {
+                        result = str.substr(indexAfterStrToFind);
+                    }
+                }
+                return result;
+            },
+    
+            /**
+             * Extracts the contents of the specified str before the strToFind. If the
+             * strToFind is not found or the first part of the str, an empty string is
+             * returned.
+             *
+             * @argument {string} str       The full string
+             * @argument {string} strToFind The substring to find
+             */
+            substringBeforeFirst: function (str, strToFind) {
+                var result = '';
+                var indexOfStrToFind = str.indexOf(strToFind);
+                if (indexOfStrToFind >= 0) {
+                    result = str.substr(0, indexOfStrToFind);
+                }
+                return result
+            },
+    
+            /**
+             * 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
+             */
+            setCursor: function (domId, isMouseOver) {
+                if (isMouseOver) {
+                    $('#' + domId).addClass('pointer');
+                } else {
+                    $('#' + domId).removeClass('pointer');
+                }
+            },
+    
+            /**
+             * Gets an access token from the specified url.
+             *
+             * @param accessTokenUrl    The access token
+             * @returns the access token as a deferred
+             */
+            getAccessToken: function (accessTokenUrl) {
+                return $.Deferred(function (deferred) {
+                  if (nfStorage.hasItem('jwt')) {
+                        $.ajax({
+                            type: 'POST',
+                            url: accessTokenUrl
+                        }).done(function (token) {
+                            deferred.resolve(token);
+                        }).fail(function () {
+                            deferred.reject();
+                        })
                     } else {
-                        li.text(item);
+                        deferred.resolve('');
                     }
-                });
-                return ul;
-            } else {
-                return null;
-            }
-        },
-
-        /**
-         * 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
-         */
-        substringAfterLast: function (str, strToFind) {
-            var result = '';
-            var indexOfStrToFind = str.lastIndexOf(strToFind);
-            if (indexOfStrToFind >= 0) {
-                var indexAfterStrToFind = indexOfStrToFind + strToFind.length;
-                if (indexAfterStrToFind < str.length) {
-                    result = str.substr(indexAfterStrToFind);
+                }).promise();
+            },
+    
+            /**
+             * Constants for time duration formatting.
+             */
+            MILLIS_PER_DAY: 86400000,
+            MILLIS_PER_HOUR: 3600000,
+            MILLIS_PER_MINUTE: 60000,
+            MILLIS_PER_SECOND: 1000,
+    
+            /**
+             * Formats the specified duration.
+             *
+             * @param {integer} duration in millis
+             */
+            formatDuration: function (duration) {
+                // don't support sub millisecond resolution
+                duration = duration < 1 ? 0 : duration;
+    
+                // determine the number of days in the specified duration
+              var days = duration / nfCommon.MILLIS_PER_DAY;
+                days = days >= 1 ? parseInt(days, 10) : 0;
+              duration %= nfCommon.MILLIS_PER_DAY;
+    
+                // remaining duration should be less than 1 day, get number of hours
+              var hours = duration / nfCommon.MILLIS_PER_HOUR;
+                hours = hours >= 1 ? parseInt(hours, 10) : 0;
+              duration %= nfCommon.MILLIS_PER_HOUR;
+    
+                // remaining duration should be less than 1 hour, get number of minutes
+              var minutes = duration / nfCommon.MILLIS_PER_MINUTE;
+                minutes = minutes >= 1 ? parseInt(minutes, 10) : 0;
+              duration %= nfCommon.MILLIS_PER_MINUTE;
+    
+                // remaining duration should be less than 1 minute, get number of seconds
+              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 % nfCommon.MILLIS_PER_SECOND);
+    
+                // format the time
+              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) {
+                    return days + ' days and ' + time;
+                } else {
+                    return time;
                 }
-            }
-            return result;
-        },
-
-        /**
-         * 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
-         */
-        substringAfterFirst: function (str, strToFind) {
-            var result = '';
-            var indexOfStrToFind = str.indexOf(strToFind);
-            if (indexOfStrToFind >= 0) {
-                var indexAfterStrToFind = indexOfStrToFind + strToFind.length;
-                if (indexAfterStrToFind < str.length) {
-                    result = str.substr(indexAfterStrToFind);
+            },
+    
+            /**
+             * Constants for formatting data size.
+             */
+            BYTES_IN_KILOBYTE: 1024,
+            BYTES_IN_MEGABYTE: 1048576,
+            BYTES_IN_GIGABYTE: 1073741824,
+            BYTES_IN_TERABYTE: 1099511627776,
+    
+            /**
+             * 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 / nfCommon.BYTES_IN_TERABYTE);
+                if (dataSizeToFormat > 1) {
+                    return dataSizeToFormat.toFixed(2) + " TB";
                 }
-            }
-            return result;
-        },
-
-        /**
-         * Extracts the contents of the specified str before the strToFind. If the
-         * strToFind is not found or the first part of the str, an empty string is
-         * returned.
-         *
-         * @argument {string} str       The full string
-         * @argument {string} strToFind The substring to find
-         */
-        substringBeforeFirst: function (str, strToFind) {
-            var result = '';
-            var indexOfStrToFind = str.indexOf(strToFind);
-            if (indexOfStrToFind >= 0) {
-                result = str.substr(0, indexOfStrToFind);
-            }
-            return result
-        },
-
-        /**
-         * 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
-         */
-        setCursor: function (domId, isMouseOver) {
-            if (isMouseOver) {
-                $('#' + domId).addClass('pointer');
-            } else {
-                $('#' + domId).removeClass('pointer');
-            }
-        },
-
-        /**
-         * Gets an access token from the specified url.
-         *
-         * @param accessTokenUrl    The access token
-         * @returns the access token as a deferred
-         */
-        getAccessToken: function (accessTokenUrl) {
-            return $.Deferred(function (deferred) {
-                if (nfStorage.hasItem('jwt')) {
-                    $.ajax({
-                        type: 'POST',
-                        url: accessTokenUrl
-                    }).done(function (token) {
-                        deferred.resolve(token);
-                    }).fail(function () {
-                        deferred.reject();
-                    })
+    
+                // check gigabytes
+              dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_GIGABYTE);
+                if (dataSizeToFormat > 1) {
+                    return dataSizeToFormat.toFixed(2) + " GB";
+                }
+    
+                // check megabytes
+              dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_MEGABYTE);
+                if (dataSizeToFormat > 1) {
+                    return dataSizeToFormat.toFixed(2) + " MB";
+                }
+    
+                // check kilobytes
+              dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_KILOBYTE);
+                if (dataSizeToFormat > 1) {
+                    return dataSizeToFormat.toFixed(2) + " KB";
+                }
+    
+                // default to bytes
+                return parseFloat(dataSize).toFixed(2) + nf._.msg('nf-common.Bytes');
+            },
+    
+            /**
+             * 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) {
+                var string = integer + '';
+                var regex = /(\d+)(\d{3})/;
+                while (regex.test(string)) {
+                    string = string.replace(regex, '$1' + ',' + '$2');
+                }
+                return string;
+            },
+    
+            /**
+             * Formats the specified float using two demical places.
+             *
+             * @param {float} f
+             */
+            formatFloat: function (f) {
+              if (nfCommon.isUndefinedOrNull(f)) {
+                    return 0.00 + '';
+                }
+                return f.toFixed(2) + '';
+            },
+    
+            /**
+             * 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
+             * @returns {string}
+             */
+            pad: function (value, width, character) {
+                var s = value + '';
+    
+                // pad until wide enough
+                while (s.length < width) {
+                    s = character + s;
+                }
+    
+                return s;
+            },
+    
+            /**
+             * Formats the specified DateTime.
+             *
+             * @param {Date} date
+             * @returns {String}
+             */
+            formatDateTime: function (date) {
+              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 (!nfCommon.isDefinedAndNotNull(rawDateTime)) {
+                    return new Date();
+                }
+              if (rawDateTime === 'No value set') {
+                    return new Date();
+                }
+              if (rawDateTime === 'Empty string set') {
+                    return new Date();
+                }
+    
+                // parse the date time
+                var dateTime = rawDateTime.split(/ /);
+    
+                // ensure the correct number of tokens
+                if (dateTime.length !== 3) {
+                    return new Date();
+                }
+    
+                // get the date and time
+                var date = dateTime[0].split(/\//);
+                var time = dateTime[1].split(/:/);
+    
+                // ensure the correct number of tokens
+                if (date.length !== 3 || time.length !== 3) {
+                    return new Date();
+                }
+              var year = parseInt(date[2], 10);
+              var month = parseInt(date[0], 10) - 1; // new Date() accepts months 0 - 11
+              var day = parseInt(date[1], 10);
+              var hours = parseInt(time[0], 10);
+              var minutes = parseInt(time[1], 10);
+    
+                // detect if there is millis
+              var secondsSpec = time[2].split(/\./);
+              var seconds = parseInt(secondsSpec[0], 10);
+              var milliseconds = 0;
+              if (secondsSpec.length === 2) {
+                  milliseconds = parseInt(secondsSpec[1], 10);
+                }
+              return new Date(year, month, day, hours, minutes, seconds, milliseconds);
+            },
+    
+            /**
+             * Parses the specified duration and returns the total number of millis.
+             *
+             * @param {string} rawDuration
+             * @returns {number}        The number of millis
+             */
+            parseDuration: function (rawDuration) {
+                var duration = rawDuration.split(/:/);
+    
+                // ensure the appropriate number of tokens
+                if (duration.length !== 3) {
+                    return 0;
+                }
+    
+                // detect if there is millis
+                var seconds = duration[2].split(/\./);
+                if (seconds.length === 2) {
+                    return new Date(1970, 0, 1, parseInt(duration[0], 10), parseInt(duration[1], 10), parseInt(seconds[0], 10), parseInt(seconds[1], 10)).getTime();
                 } else {
-                    deferred.resolve('');
+                    return new Date(1970, 0, 1, parseInt(duration[0], 10), parseInt(duration[1], 10), parseInt(duration[2], 10), 0).getTime();
                 }
-            }).promise();
-        },
-
-        /**
-         * Constants for time duration formatting.
-         */
-        MILLIS_PER_DAY: 86400000,
-        MILLIS_PER_HOUR: 3600000,
-        MILLIS_PER_MINUTE: 60000,
-        MILLIS_PER_SECOND: 1000,
-
-        /**
-         * Formats the specified duration.
-         *
-         * @param {integer} duration in millis
-         */
-        formatDuration: function (duration) {
-            // don't support sub millisecond resolution
-            duration = duration < 1 ? 0 : duration;
-
-            // determine the number of days in the specified duration
-            var days = duration / nfCommon.MILLIS_PER_DAY;
-            days = days >= 1 ? parseInt(days, 10) : 0;
-            duration %= nfCommon.MILLIS_PER_DAY;
-
-            // remaining duration should be less than 1 day, get number of hours
-            var hours = duration / nfCommon.MILLIS_PER_HOUR;
-            hours = hours >= 1 ? parseInt(hours, 10) : 0;
-            duration %= nfCommon.MILLIS_PER_HOUR;
-
-            // remaining duration should be less than 1 hour, get number of minutes
-            var minutes = duration / nfCommon.MILLIS_PER_MINUTE;
-            minutes = minutes >= 1 ? parseInt(minutes, 10) : 0;
-            duration %= nfCommon.MILLIS_PER_MINUTE;
-
-            // remaining duration should be less than 1 minute, get number of seconds
-            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 % nfCommon.MILLIS_PER_SECOND);
-
-            // format the time
-            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) {
-                return days + ' days and ' + time;
-            } else {
-                return time;
-            }
-        },
-
-        /**
-         * Constants for formatting data size.
-         */
-        BYTES_IN_KILOBYTE: 1024,
-        BYTES_IN_MEGABYTE: 1048576,
-        BYTES_IN_GIGABYTE: 1073741824,
-        BYTES_IN_TERABYTE: 1099511627776,
-
-        /**
-         * 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 / nfCommon.BYTES_IN_TERABYTE);
-            if (dataSizeToFormat > 1) {
-                return dataSizeToFormat.toFixed(2) + " TB";
-            }
-
-            // check gigabytes
-            dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_GIGABYTE);
-            if (dataSizeToFormat > 1) {
-                return dataSizeToFormat.toFixed(2) + " GB";
-            }
-
-            // check megabytes
-            dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_MEGABYTE);
-            if (dataSizeToFormat > 1) {
-                return dataSizeToFormat.toFixed(2) + " MB";
-            }
-
-            // check kilobytes
-            dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_KILOBYTE);
-            if (dataSizeToFormat > 1) {
-                return dataSizeToFormat.toFixed(2) + " KB";
-            }
-
-            // default to bytes
-            return parseFloat(dataSize).toFixed(2) + " bytes";
-        },
-
-        /**
-         * 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) {
-            var string = integer + '';
-            var regex = /(\d+)(\d{3})/;
-            while (regex.test(string)) {
-                string = string.replace(regex, '$1' + ',' + '$2');
-            }
-            return string;
-        },
-
-        /**
-         * Formats the specified float using two demical places.
-         *
-         * @param {float} f
-         */
-        formatFloat: function (f) {
-            if (nfCommon.isUndefinedOrNull(f)) {
-                return 0.00 + '';
-            }
-            return f.toFixed(2) + '';
-        },
-
-        /**
-         * 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
-         * @returns {string}
-         */
-        pad: function (value, width, character) {
-            var s = value + '';
-
-            // pad until wide enough
-            while (s.length < width) {
-                s = character + s;
-            }
-
-            return s;
-        },
-
-        /**
-         * Formats the specified DateTime.
-         *
-         * @param {Date} date
-         * @returns {String}
-         */
-        formatDateTime: function (date) {
-            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 (!nfCommon.isDefinedAndNotNull(rawDateTime)) {
-                return new Date();
-            }
-            if (rawDateTime === 'No value set') {
-                return new Date();
-            }
-            if (rawDateTime === 'Empty string set') {
-                return new Date();
-            }
-
-            // parse the date time
-            var dateTime = rawDateTime.split(/ /);
-
-            // ensure the correct number of tokens
-            if (dateTime.length !== 3) {
-                return new Date();
-            }
-
-            // get the date and time
-            var date = dateTime[0].split(/\//);
-            var time = dateTime[1].split(/:/);
-
-            // ensure the correct number of tokens
-            if (date.length !== 3 || time.length !== 3) {
-                return new Date();
-            }
-            var year = parseInt(date[2], 10);
-            var month = parseInt(date[0], 10) - 1; // new Date() accepts months 0 - 11
-            var day = parseInt(date[1], 10);
-            var hours = parseInt(time[0], 10);
-            var minutes = parseInt(time[1], 10);
-
-            // detect if there is millis
-            var secondsSpec = time[2].split(/\./);
-            var seconds = parseInt(secondsSpec[0], 10);
-            var milliseconds = 0;
-            if (secondsSpec.length === 2) {
-                milliseconds = parseInt(secondsSpec[1], 10);
-            }
-            return new Date(year, month, day, hours, minutes, seconds, milliseconds);
-        },
-
-        /**
-         * Parses the specified duration and returns the total number of millis.
-         *
-         * @param {string} rawDuration
-         * @returns {number}        The number of millis
-         */
-        parseDuration: function (rawDuration) {
-            var duration = rawDuration.split(/:/);
-
-            // ensure the appropriate number of tokens
-            if (duration.length !== 3) {
-                return 0;
-            }
-
-            // detect if there is millis
-            var seconds = duration[2].split(/\./);
-            if (seconds.length === 2) {
-                return new Date(1970, 0, 1, parseInt(duration[0], 10), parseInt(duration[1], 10), parseInt(seconds[0], 10), parseInt(seconds[1], 10)).getTime();
-            } else {
-                return new Date(1970, 0, 1, parseInt(duration[0], 10), parseInt(duration[1], 10), parseInt(duration[2], 10), 0).getTime();
-            }
-        },
-
-        /**
-         * Parses the specified size.
-         *
-         * @param {string} rawSize
-         * @returns {int}
-         */
-        parseSize: function (rawSize) {
-            var tokens = rawSize.split(/ /);
-            var size = parseFloat(tokens[0].replace(/,/g, ''));
-            var units = tokens[1];
-
-            if (units === 'KB') {
-                return size * 1024;
-            } else if (units === 'MB') {
-                return size * 1024 * 1024;
-            } else if (units === 'GB') {
-                return size * 1024 * 1024 * 1024;
-            } else if (units === 'TB') {
-                return size * 1024 * 1024 * 1024 * 1024;
-            } else {
-                return size;
-            }
-        },
-
-        /**
-         * Parses the specified count.
-         *
-         * @param {string} rawCount
-         * @returns {int}
-         */
-        parseCount: function (rawCount) {
-            // extract the count
-            var count = rawCount.split(/ /, 1);
-
-            // ensure the string was split successfully
-            if (count.length !== 1) {
-                return 0;
-            }
-
-            // convert the count to an integer
-            var intCount = parseInt(count[0].replace(/,/g, ''), 10);
-
-            // ensure it was parsable as an integer
-            if (isNaN(intCount)) {
-                return 0;
-            }
-            return intCount;
-        },
-
-        /**
-         * Determines if the specified object is defined and not null.
-         *
-         * @argument {object} obj   The object to test
-         */
-        isDefinedAndNotNull: function (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 nfCommon.isUndefined(obj) || nfCommon.isNull(obj);
-        },
-
-        /**
-         * Determines if the specified object is undefined.
-         *
-         * @argument {object} obj   The object to test
-         */
-        isUndefined: function (obj) {
-            return typeof obj === 'undefined';
-        },
-
-        /**
-         * Determines whether the specified string is blank (or null or undefined).
-         *
-         * @argument {string} str   The string to test
-         */
-        isBlank: function (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) {
-            return obj === null;
-        },
-
-        /**
-         * 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) {
-            return $.isArray(arr) ? arr.length === 0 : true;
-        },
-
-        /**
-         * Determines if these are the same bulletins. If both arguments are not
-         * arrays, false is returned.
-         *
-         * @param {array} bulletins
-         * @param {array} otherBulletins
-         * @returns {boolean}
-         */
-        doBulletinsDiffer: function (bulletins, otherBulletins) {
-            if ($.isArray(bulletins) && $.isArray(otherBulletins)) {
-                if (bulletins.length === otherBulletins.length) {
-                    for (var i = 0; i < bulletins.length; i++) {
-                        if (bulletins[i].id !== otherBulletins[i].id || bulletins[i].canRead !== otherBulletins[i].canRead) {
-                            return true;
+            },
+    
+            /**
+             * Parses the specified size.
+             *
+             * @param {string} rawSize
+             * @returns {int}
+             */
+            parseSize: function (rawSize) {
+                var tokens = rawSize.split(/ /);
+                var size = parseFloat(tokens[0].replace(/,/g, ''));
+                var units = tokens[1];
+    
+                if (units === 'KB') {
+                    return size * 1024;
+                } else if (units === 'MB') {
+                    return size * 1024 * 1024;
+                } else if (units === 'GB') {
+                    return size * 1024 * 1024 * 1024;
+                } else if (units === 'TB') {
+                    return size * 1024 * 1024 * 1024 * 1024;
+                } else {
+                    return size;
+                }
+            },
+    
+            /**
+             * Parses the specified count.
+             *
+             * @param {string} rawCount
+             * @returns {int}
+             */
+            parseCount: function (rawCount) {
+                // extract the count
+                var count = rawCount.split(/ /, 1);
+    
+                // ensure the string was split successfully
+                if (count.length !== 1) {
+                    return 0;
+                }
+    
+                // convert the count to an integer
+                var intCount = parseInt(count[0].replace(/,/g, ''), 10);
+    
+                // ensure it was parsable as an integer
+                if (isNaN(intCount)) {
+                    return 0;
+                }
+                return intCount;
+            },
+    
+            /**
+             * Determines if the specified object is defined and not null.
+             *
+             * @argument {object} obj   The object to test
+             */
+            isDefinedAndNotNull: function (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 nfCommon.isUndefined(obj) || nfCommon.isNull(obj);
+            },
+    
+            /**
+             * Determines if the specified object is undefined.
+             *
+             * @argument {object} obj   The object to test
+             */
+            isUndefined: function (obj) {
+                return typeof obj === 'undefined';
+            },
+    
+            /**
+             * Determines whether the specified string is blank (or null or undefined).
+             *
+             * @argument {string} str   The string to test
+             */
+            isBlank: function (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) {
+                return obj === null;
+            },
+    
+            /**
+             * 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) {
+                return $.isArray(arr) ? arr.length === 0 : true;
+            },
+    
+            /**
+             * Determines if these are the same bulletins. If both arguments are not
+             * arrays, false is returned.
+             *
+             * @param {array} bulletins
+             * @param {array} otherBulletins
+             * @returns {boolean}
+             */
+            doBulletinsDiffer: function (bulletins, otherBulletins) {
+                if ($.isArray(bulletins) && $.isArray(otherBulletins)) {
+                    if (bulletins.length === otherBulletins.length) {
+                        for (var i = 0; i < bulletins.length; i++) {
+                            if (bulletins[i].id !== otherBulletins[i].id || bulletins[i].canRead !== otherBulletins[i].canRead) {
+                                return true;
+                            }
                         }
+                    } else {
+                        return true;
                     }
-                } else {
+                } else if ($.isArray(bulletins) || $.isArray(otherBulletins)) {
                     return true;
                 }
-            } else if ($.isArray(bulletins) || $.isArray(otherBulletins)) {
-                return true;
-            }
-            return false;
-        },
-
-        /**
-         * Formats the specified bulletin list.
-         *
-         * @argument {array} bulletins      The bulletins
-         * @return {array}                  The jQuery objects
-         */
-        getFormattedBulletins: function (bulletinEntities) {
-            var formattedBulletinEntities = [];
-            $.each(bulletinEntities, function (j, bulletinEntity) {
-                if (bulletinEntity.canRead === true) {
-                    var bulletin = bulletinEntity.bulletin;
-
-                    // format the node address
-                    var nodeAddress = '';
-                    if (nfCommon.isDefinedAndNotNull(bulletin.nodeAddress)) {
-                        nodeAddress = '-&nbsp;' + nfCommon.escapeHtml(bulletin.nodeAddress) + '&nbsp;-&nbsp;';
+                return false;
+            },
+    
+            /**
+             * Formats the specified bulletin list.
+             *
+             * @argument {array} bulletins      The bulletins
+             * @return {array}                  The jQuery objects
+             */
+            getFormattedBulletins: function (bulletinEntities) {
+                var formattedBulletinEntities = [];
+                $.each(bulletinEntities, function (j, bulletinEntity) {
+                    if (bulletinEntity.canRead === true) {
+                        var bulletin = bulletinEntity.bulletin;
+    
+                        // format the node address
+                        var nodeAddress = '';
+                      if (nfCommon.isDefinedAndNotNull(bulletin.nodeAddress)) {
+                          nodeAddress = '-&nbsp;' + nfCommon.escapeHtml(bulletin.nodeAddress) + '&nbsp;-&nbsp;';
+                        }
+    
+                        // set the bulletin message (treat as text)
+                        var bulletinMessage = $('<pre></pre>').css({
+                            'white-space': 'pre-wrap'
+                        }).text(bulletin.message);
+    
+                        // create the bulletin message
+                        var formattedBulletin = $('<div>' +
+                          nfCommon.escapeHtml(bulletin.timestamp) + '&nbsp;' +
+                            nodeAddress + '&nbsp;' +
+                          '<b>' + nfCommon.escapeHtml(bulletin.level) + '</b>&nbsp;' +
+                            '</div>').append(bulletinMessage);
+    
+                        formattedBulletinEntities.push(formattedBulletin);
                     }
-
-                    // set the bulletin message (treat as text)
-                    var bulletinMessage = $('<pre></pre>').css({
-                        'white-space': 'pre-wrap'
-                    }).text(bulletin.message);
-
-                    // create the bulletin message
-                    var formattedBulletin = $('<div>' +
-                        nfCommon.escapeHtml(bulletin.timestamp) + '&nbsp;' +
-                        nodeAddress + '&nbsp;' +
-                        '<b>' + nfCommon.escapeHtml(bulletin.level) + '</b>&nbsp;' +
-                        '</div>').append(bulletinMessage);
-
-                    formattedBulletinEntities.push(formattedBulletin);
-                }
-            });
-            return formattedBulletinEntities;
-        },
-
-        getPolicyTypeListing: function (value) {
-            var nest = d3.nest()
-                .key(function (d) {
-                    return d.value;
-                })
-                .map(policyTypeListing, d3.map);
-            return nest.get(value)[0];
-        }
-    };
-
-    return nfCommon;
-}));
+                });
+                return formattedBulletinEntities;
+          },
+  
+          getPolicyTypeListing: function (value) {
+              var nest = d3.nest()
+                  .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 a6538a905c21..b847a0cc21a6 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
@@ -1,553 +1,553 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common',
-                'nf.ErrorHandler'],
-            function ($, nfCommon, nfErrorHandler) {
-                return (nf.ConnectionDetails = factory($, nfCommon, nfErrorHandler));
-            });
-    } 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 ($, nfCommon, nfErrorHandler) {
-    'use strict';
-
-    /**
-     * Initialize the details for the source of the connection.
+    /*
+     * 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
      *
-     * @argument {string} groupId               The id of the current group
-     * @argument {string} groupName             The name of the current group
-     * @argument {object} source        The source of the connection
-     */
-    var initializeConnectionSource = function (groupId, groupName, source) {
-        if (source.type === 'PROCESSOR') {
-            return initializeSourceProcessor(groupId, groupName, source);
-        } else if (source.type === 'FUNNEL') {
-            return initializeSourceFunnel(groupId, groupName, source);
-        } else if (source.type === 'REMOTE_OUTPUT_PORT') {
-            return initializeRemoteSourcePort(groupId, groupName, source);
-        } else {
-            return initializeLocalSourcePort(groupId, groupName, source);
-        }
-    };
-
-    /**
-     * Initialize the details for the source processor.
+     *     http://www.apache.org/licenses/LICENSE-2.0
      *
-     * @argument {string} groupId               The id of the current group
-     * @argument {string} groupName             The name of the current group
-     * @argument {object} source            The source of the connection
+     * 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.
      */
-    var initializeSourceProcessor = function (groupId, groupName, source) {
-        return $.Deferred(function (deferred) {
-            $.ajax({
-                type: 'GET',
-                url: '../nifi-api/processors/' + encodeURIComponent(source.id),
-                dataType: 'json'
-            }).done(function (response) {
-                var processor = response.component;
-                var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name);
-                var processorType = $('<div></div>').text(nfCommon.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nfCommon.substringAfterLast(processor.type, '.'));
-
-                // populate source processor details
-                $('#read-only-connection-source-label').text('From processor');
-                $('#read-only-connection-source').append(processorName).append(processorType);
-                $('#read-only-connection-source-group-name').text(groupName);
-
-                deferred.resolve();
-            }).fail(function (xhr, status, error) {
-                if (xhr.status === 403) {
-                    var processorName = $('<div class="label"></div>').text(source.name).addClass('ellipsis').attr('title', source.name);
-                    var processorType = $('<div></div>').text('Processor').addClass('ellipsis').attr('title', 'Processor');
-
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.ErrorHandler'],
+              function ($, nfCommon, nfErrorHandler) {
+                  return (nf.ConnectionDetails = factory($, nfCommon, nfErrorHandler));
+              });
+      } 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 ($, nfCommon, nfErrorHandler) {
+      'use strict';
+    
+        /**
+         * Initialize the details for the source of the connection.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} source        The source of the connection
+         */
+        var initializeConnectionSource = function (groupId, groupName, source) {
+            if (source.type === 'PROCESSOR') {
+                return initializeSourceProcessor(groupId, groupName, source);
+            } else if (source.type === 'FUNNEL') {
+                return initializeSourceFunnel(groupId, groupName, source);
+            } else if (source.type === 'REMOTE_OUTPUT_PORT') {
+                return initializeRemoteSourcePort(groupId, groupName, source);
+            } else {
+                return initializeLocalSourcePort(groupId, groupName, source);
+            }
+        };
+    
+        /**
+         * Initialize the details for the source processor.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} source            The source of the connection
+         */
+        var initializeSourceProcessor = function (groupId, groupName, source) {
+            return $.Deferred(function (deferred) {
+                $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/processors/' + encodeURIComponent(source.id),
+                    dataType: 'json'
+                }).done(function (response) {
+                    var processor = response.component;
+                  var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name);
+                  var processorType = $('<div></div>').text(nfCommon.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nfCommon.substringAfterLast(processor.type, '.'));
+    
                     // populate source processor details
-                    $('#read-only-connection-source-label').text('From processor');
+                    $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromProcessor'));
                     $('#read-only-connection-source').append(processorName).append(processorType);
                     $('#read-only-connection-source-group-name').text(groupName);
-
+    
                     deferred.resolve();
-                } else {
-                    deferred.reject(xhr, status, error);
-                }
-            });
-        }).promise();
-    };
-
-    /**
-     * Initialize the details for the source funnel.
-     *
-     * @argument {string} groupId               The id of the current group
-     * @argument {string} groupName             The name of the current group
-     * @argument {object} source            The source of the connection
-     */
-    var initializeSourceFunnel = function (groupId, groupName, source) {
-        return $.Deferred(function (deferred) {
-            $('#read-only-connection-source-label').text('From funnel');
-            $('#read-only-connection-source').text('funnel').attr('title', 'funnel');
-            $('#read-only-connection-source-group-name').text(groupName);
-            deferred.resolve();
-        }).promise();
-    };
-
-    /**
-     * Initialize the details for the remote source port.
-     *
-     * @argument {string} groupId               The id of the current group
-     * @argument {string} groupName             The name of the current group
-     * @argument {object} source            The source of the connection
-     */
-    var initializeRemoteSourcePort = function (groupId, groupName, source) {
-        return $.Deferred(function (deferred) {
-            $.ajax({
-                type: 'GET',
-                url: '../nifi-api/remote-process-groups/' + encodeURIComponent(source.groupId),
-                dataType: 'json'
-            }).done(function (response) {
-                var remoteProcessGroup = response.component;
-
-                // populate source port details
-                $('#read-only-connection-source-label').text('From output');
-                $('#read-only-connection-source').text(source.name).attr('title', source.name);
-                $('#read-only-connection-source-group-name').text(remoteProcessGroup.name);
-
-                deferred.resolve();
-            }).fail(function (xhr, status, error) {
-                if (xhr.status === 403) {
-                    // populate source processor details
-                    $('#read-only-connection-source-label').text('From output');
-                    $('#read-only-connection-source').text(source.name).attr('title', source.name);
-                    $('#read-only-connection-source-group-name').text(source.groupId);
-
-                    deferred.resolve();
-                } else {
-                    deferred.reject(xhr, status, error);
-                }
-            });
-        }).promise();
-    };
-
-    /**
-     * Initialize the details for the source port.
-     *
-     * @argument {string} groupId               The id of the current group
-     * @argument {string} groupName             The name of the current group
-     * @argument {object} source            The source of the connection
-     */
-    var initializeLocalSourcePort = function (groupId, groupName, source) {
-        return $.Deferred(function (deferred) {
-            if (groupId === source.groupId) {
-                // populate source port details
-                $('#read-only-connection-source-label').text('From input');
-                $('#read-only-connection-source').text(source.name).attr('title', source.name);
+                }).fail(function (xhr, status, error) {
+                    if (xhr.status === 403) {
+                      var processorName = $('<div class="label"></div>').text(source.name).addClass('ellipsis').attr('title', source.name);
+                      var processorType = $('<div></div>').text(nf._.msg('nf-connection-details.Processor')).addClass('ellipsis').attr('title', 'Processor');
+    
+                        // populate source processor details
+                        $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromProcessor'));
+                        $('#read-only-connection-source').append(processorName).append(processorType);
+                        $('#read-only-connection-source-group-name').text(groupName);
+    
+                        deferred.resolve();
+                    } else {
+                        deferred.reject(xhr, status, error);
+                    }
+                });
+            }).promise();
+        };
+    
+        /**
+         * Initialize the details for the source funnel.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} source            The source of the connection
+         */
+        var initializeSourceFunnel = function (groupId, groupName, source) {
+            return $.Deferred(function (deferred) {
+                $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromFunnel'));
+              $('#read-only-connection-source').text('funnel').attr('title', 'funnel');
                 $('#read-only-connection-source-group-name').text(groupName);
-
                 deferred.resolve();
-            } else {
+            }).promise();
+        };
+    
+        /**
+         * Initialize the details for the remote source port.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} source            The source of the connection
+         */
+        var initializeRemoteSourcePort = function (groupId, groupName, source) {
+            return $.Deferred(function (deferred) {
                 $.ajax({
                     type: 'GET',
-                    url: '../nifi-api/process-groups/' + encodeURIComponent(source.groupId),
+                    url: '../nifi-api/remote-process-groups/' + encodeURIComponent(source.groupId),
                     dataType: 'json'
                 }).done(function (response) {
-                    var processGroup = response.component;
-
+                    var remoteProcessGroup = response.component;
+    
                     // populate source port details
-                    $('#read-only-connection-source-label').text('From output');
-                    $('#read-only-connection-source').text(source.name).attr('title', source.name);
-                    $('#read-only-connection-source-group-name').text(processGroup.name);
-
-                    deferred.resolve();
+                    $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromOutPut'));
+                  $('#read-only-connection-source').text(source.name).attr('title', source.name);
+                    $('#read-only-connection-source-group-name').text(remoteProcessGroup.name);
+    
+                  deferred.resolve();
                 }).fail(function (xhr, status, error) {
                     if (xhr.status === 403) {
                         // populate source processor details
-                        $('#read-only-connection-source-label').text('From output');
-                        $('#read-only-connection-source').text(source.name).attr('title', source.name);
+                        $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromOutPut'));
+                      $('#read-only-connection-source').text(source.name).attr('title', source.name);
                         $('#read-only-connection-source-group-name').text(source.groupId);
-
+    
                         deferred.resolve();
                     } else {
                         deferred.reject(xhr, status, error);
                     }
                 });
+            }).promise();
+        };
+    
+        /**
+         * Initialize the details for the source port.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} source            The source of the connection
+         */
+        var initializeLocalSourcePort = function (groupId, groupName, source) {
+            return $.Deferred(function (deferred) {
+                if (groupId === source.groupId) {
+                    // populate source port details
+                    $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromInput'));
+                  $('#read-only-connection-source').text(source.name).attr('title', source.name);
+                    $('#read-only-connection-source-group-name').text(groupName);
+    
+                    deferred.resolve();
+                } else {
+                    $.ajax({
+                        type: 'GET',
+                        url: '../nifi-api/process-groups/' + encodeURIComponent(source.groupId),
+                        dataType: 'json'
+                    }).done(function (response) {
+                        var processGroup = response.component;
+    
+                        // populate source port details
+                        $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromOutPut'));
+                      $('#read-only-connection-source').text(source.name).attr('title', source.name);
+                        $('#read-only-connection-source-group-name').text(processGroup.name);
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                        if (xhr.status === 403) {
+                            // populate source processor details
+                          $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromOutPut'));
+                          $('#read-only-connection-source').text(source.name).attr('title', source.name);
+                            $('#read-only-connection-source-group-name').text(source.groupId);
+    
+                            deferred.resolve();
+                        } else {
+                            deferred.reject(xhr, status, error);
+                        }
+                    });
+                }
+            }).promise();
+        };
+    
+        /**
+         * Initialize the details for the destination of the connection.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} destination            The destination of the connection
+         */
+        var initializeConnectionDestination = function (groupId, groupName, destination) {
+            if (destination.type === 'PROCESSOR') {
+                return initializeDestinationProcessor(groupId, groupName, destination);
+            } else if (destination.type === 'FUNNEL') {
+                return initializeDestinationFunnel(groupId, groupName, destination);
+            } else if (destination.type === 'REMOTE_INPUT_PORT') {
+                return initializeDestinationRemotePort(groupId, groupName, destination);
+            } else {
+                return initializeDestinationLocalPort(groupId, groupName, destination);
             }
-        }).promise();
-    };
-
-    /**
-     * Initialize the details for the destination of the connection.
-     *
-     * @argument {string} groupId               The id of the current group
-     * @argument {string} groupName             The name of the current group
-     * @argument {object} destination            The destination of the connection
-     */
-    var initializeConnectionDestination = function (groupId, groupName, destination) {
-        if (destination.type === 'PROCESSOR') {
-            return initializeDestinationProcessor(groupId, groupName, destination);
-        } else if (destination.type === 'FUNNEL') {
-            return initializeDestinationFunnel(groupId, groupName, destination);
-        } else if (destination.type === 'REMOTE_INPUT_PORT') {
-            return initializeDestinationRemotePort(groupId, groupName, destination);
-        } else {
-            return initializeDestinationLocalPort(groupId, groupName, destination);
-        }
-    };
-
-    /**
-     * Initialize the details for the destination processor.
-     *
-     * @argument {string} groupId               The id of the current group
-     * @argument {string} groupName             The name of the current group
-     * @argument {object} destination            The destination of the connection
-     */
-    var initializeDestinationProcessor = function (groupId, groupName, destination) {
-        return $.Deferred(function (deferred) {
-            $.ajax({
-                type: 'GET',
-                url: '../nifi-api/processors/' + encodeURIComponent(destination.id),
-                dataType: 'json'
-            }).done(function (response) {
-                var processor = response.component;
-                var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name);
-                var processorType = $('<div></div>').text(nfCommon.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nfCommon.substringAfterLast(processor.type, '.'));
-
-                // populate destination processor details
-                $('#read-only-connection-target-label').text('To processor');
-                $('#read-only-connection-target').append(processorName).append(processorType);
-                $('#read-only-connection-target-group-name').text(groupName);
-
-                deferred.resolve();
-            }).fail(function (xhr, status, error) {
-                if (xhr.status === 403) {
-                    var processorName = $('<div class="label"></div>').text(destination.name).addClass('ellipsis').attr('title', destination.name);
-                    var processorType = $('<div></div>').text('Processor').addClass('ellipsis').attr('title', 'Processor');
-
+        };
+    
+        /**
+         * Initialize the details for the destination processor.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} destination            The destination of the connection
+         */
+        var initializeDestinationProcessor = function (groupId, groupName, destination) {
+            return $.Deferred(function (deferred) {
+                $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/processors/' + encodeURIComponent(destination.id),
+                    dataType: 'json'
+                }).done(function (response) {
+                    var processor = response.component;
+                  var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name);
+                  var processorType = $('<div></div>').text(nfCommon.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nfCommon.substringAfterLast(processor.type, '.'));
+    
                     // populate destination processor details
                     $('#read-only-connection-target-label').text('To processor');
                     $('#read-only-connection-target').append(processorName).append(processorType);
                     $('#read-only-connection-target-group-name').text(groupName);
-
+    
                     deferred.resolve();
-                } else {
-                    deferred.reject(xhr, status, error);
-                }
-            });
-        }).promise();
-    };
-
-    /**
-     * Initialize the details for the source funnel.
-     *
-     * @argument {string} groupId               The id of the current group
-     * @argument {string} groupName             The name of the current group
-     * @argument {object} destination            The destination of the connection
-     */
-    var initializeDestinationFunnel = function (groupId, groupName, destination) {
-        return $.Deferred(function (deferred) {
-            $('#read-only-connection-target-label').text('To funnel');
-            $('#read-only-connection-target').text('funnel').attr('title', 'funnel');
-            $('#read-only-connection-target-group-name').text(groupName);
-            deferred.resolve();
-        }).promise();
-    };
-
-    /**
-     * Initialize the details for the remote source port.
-     *
-     * @argument {string} groupId               The id of the current group
-     * @argument {string} groupName             The name of the current group
-     * @argument {object} destination            The destination of the connection
-     */
-    var initializeDestinationRemotePort = function (groupId, groupName, destination) {
-        return $.Deferred(function (deferred) {
-            $.ajax({
-                type: 'GET',
-                url: '../nifi-api/remote-process-groups/' + encodeURIComponent(destination.groupId),
-                dataType: 'json'
-            }).done(function (response) {
-                var remoteProcessGroup = response.component;
-
-                // populate source port details
-                $('#read-only-connection-target-label').text('To input');
-                $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
-                $('#read-only-connection-target-group-name').text(remoteProcessGroup.name);
-
-                deferred.resolve();
-            }).fail(function (xhr, status, error) {
-                if (xhr.status === 403) {
-                    // populate source port details
-                    $('#read-only-connection-target-label').text('To input');
-                    $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
-                    $('#read-only-connection-target-group-name').text(destination.groupId);
-
-                    deferred.resolve();
-                } else {
-                    deferred.reject(xhr, status, error);
-                }
-            });
-        }).promise();
-    };
-
-    /**
-     * Initialize the details for the destination port.
-     *
-     * @argument {string} groupId               The id of the current group
-     * @argument {string} groupName             The name of the current group
-     * @argument {object} destination            The destination of the connection
-     */
-    var initializeDestinationLocalPort = function (groupId, groupName, destination) {
-        return $.Deferred(function (deferred) {
-            if (groupId === destination.groupId) {
-                // populate destination port details
-                $('#read-only-connection-target-label').text('To output');
-                $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
+                }).fail(function (xhr, status, error) {
+                    if (xhr.status === 403) {
+                      var processorName = $('<div class="label"></div>').text(destination.name).addClass('ellipsis').attr('title', destination.name);
+                      var processorType = $('<div></div>').text(nf._.msg('nf-connection-details.Processor')).addClass('ellipsis').attr('title', 'Processor');
+    
+                        // populate destination processor details
+                      $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToProcessor'));
+                        $('#read-only-connection-target').append(processorName).append(processorType);
+                        $('#read-only-connection-target-group-name').text(groupName);
+    
+                        deferred.resolve();
+                    } else {
+                        deferred.reject(xhr, status, error);
+                    }
+                });
+            }).promise();
+        };
+    
+        /**
+         * Initialize the details for the source funnel.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} destination            The destination of the connection
+         */
+        var initializeDestinationFunnel = function (groupId, groupName, destination) {
+            return $.Deferred(function (deferred) {
+                $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToFunnel'));
+              $('#read-only-connection-target').text('funnel').attr('title', 'funnel');
                 $('#read-only-connection-target-group-name').text(groupName);
-
                 deferred.resolve();
-            } else {
+            }).promise();
+        };
+    
+        /**
+         * Initialize the details for the remote source port.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} destination            The destination of the connection
+         */
+        var initializeDestinationRemotePort = function (groupId, groupName, destination) {
+            return $.Deferred(function (deferred) {
                 $.ajax({
                     type: 'GET',
-                    url: '../nifi-api/process-groups/' + encodeURIComponent(destination.groupId),
+                    url: '../nifi-api/remote-process-groups/' + encodeURIComponent(destination.groupId),
                     dataType: 'json'
                 }).done(function (response) {
-                    var processGroup = response.component;
-
-                    // populate destination port details
-                    $('#read-only-connection-target-label').text('To input');
-                    $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
-                    $('#read-only-connection-target-group-name').text(processGroup.name);
-
+                    var remoteProcessGroup = response.component;
+    
+                    // populate source port details
+                    $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToInput'));
+                  $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
+                    $('#read-only-connection-target-group-name').text(remoteProcessGroup.name);
+    
                     deferred.resolve();
                 }).fail(function (xhr, status, error) {
                     if (xhr.status === 403) {
                         // populate source port details
-                        $('#read-only-connection-target-label').text('To input');
-                        $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
+                        $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToInput'));
+                      $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
                         $('#read-only-connection-target-group-name').text(destination.groupId);
-
+    
                         deferred.resolve();
                     } else {
                         deferred.reject(xhr, status, error);
                     }
                 });
-            }
-        }).promise();
-    };
-
-
-    /**
-     * Creates the relationship option for the specified relationship.
-     *
-     * @argument {string} name      The relationship name
-     */
-    var createRelationshipOption = function (name) {
-        $('<div class="available-relationship-container"></div>').append(
-            $('<div class="relationship-name"></div>').text(name)).appendTo('#read-only-relationship-names');
-    };
-
-    return {
+            }).promise();
+        };
+    
         /**
-         * Initializes the connection details dialog.
+         * Initialize the details for the destination port.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} destination            The destination of the connection
          */
-        init: function () {
-            // initialize the details tabs
-            $('#connection-details-tabs').tabbs({
-                tabStyle: 'tab',
-                selectedTabStyle: 'selected-tab',
-                scrollableTabContentStyle: 'scrollable',
-                tabs: [{
-                    name: 'Details',
-                    tabContentId: 'read-only-connection-details-tab-content'
-                }, {
-                    name: 'Settings',
-                    tabContentId: 'read-only-connection-settings-tab-content'
-                }]
-            });
-
-            // configure the connection details dialog
-            $('#connection-details').modal({
-                headerText: 'Connection Details',
-                scrollableContentStyle: 'scrollable',
-                buttons: [{
-                    buttonText: 'Ok',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            $('#connection-details').modal('hide');
+        var initializeDestinationLocalPort = function (groupId, groupName, destination) {
+            return $.Deferred(function (deferred) {
+                if (groupId === destination.groupId) {
+                    // populate destination port details
+                    $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToOutput'));
+                  $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
+                    $('#read-only-connection-target-group-name').text(groupName);
+    
+                    deferred.resolve();
+                } else {
+                    $.ajax({
+                        type: 'GET',
+                        url: '../nifi-api/process-groups/' + encodeURIComponent(destination.groupId),
+                        dataType: 'json'
+                    }).done(function (response) {
+                        var processGroup = response.component;
+    
+                        // populate destination port details
+                      $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToInput'));
+                      $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
+                        $('#read-only-connection-target-group-name').text(processGroup.name);
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                        if (xhr.status === 403) {
+                            // populate source port details
+                            $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToInput'));
+                          $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
+                            $('#read-only-connection-target-group-name').text(destination.groupId);
+    
+                            deferred.resolve();
+                        } else {
+                            deferred.reject(xhr, status, error);
                         }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // clear the relationship names
-                        $('#read-only-relationship-names').empty();
-
-                        // clear the connection details
-                        nfCommon.clearField('read-only-connection-name');
-                        nfCommon.clearField('read-only-connection-id');
-
-                        // clear the connection source details
-                        $('#read-only-connection-source-label').text('');
-                        $('#read-only-connection-source').empty();
-                        $('#read-only-connection-source-group-name').text('');
-
-                        // clear the connection target details
-                        $('#read-only-connection-target-label').text('');
-                        $('#read-only-connection-target').empty();
-                        $('#read-only-connection-target-group-name').text('');
-
-                        // clear the relationship details
-                        $('#read-only-relationship-names').css('border-width', '0').empty();
-
-                        // clear the connection settings
-                        $('#read-only-flow-file-expiration').text('');
-                        $('#read-only-back-pressure-object-threshold').text('');
-                        $('#read-only-back-pressure-data-size-threshold').text('');
-                        $('#read-only-prioritizers').empty();
-                    },
-                    open: function () {
-                        nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                    }
+                    });
                 }
-            });
-        },
-
+            }).promise();
+        };
+    
+    
         /**
-         * Shows the details for the specified edge.
+         * Creates the relationship option for the specified relationship.
          *
-         * @argument {string} groupId           The group id
-         * @argument {string} connectionId      The connection id
+         * @argument {string} name      The relationship name
          */
-        showDetails: function (groupId, connectionId) {
-            // get the group details
-            var groupXhr = $.ajax({
-                type: 'GET',
-                url: '../nifi-api/flow/process-groups/' + encodeURIComponent(groupId),
-                dataType: 'json'
-            });
-
-            // get the connection details
-            var connectionXhr = $.ajax({
-                type: 'GET',
-                url: '../nifi-api/connections/' + encodeURIComponent(connectionId),
-                dataType: 'json'
-            });
-
-            // populate the dialog once get have all necessary details
-            $.when(groupXhr, connectionXhr).done(function (groupResult, connectionResult) {
-                var groupResponse = groupResult[0];
-                var connectionResponse = connectionResult[0];
-
-                // ensure we can read this connection.. though should never fail as the request returned successfully
-                if (connectionResponse.permissions.canRead) {
-                    var connection = connectionResponse.component;
-                    var groupName = groupResponse.permissions.canRead ? groupResponse.processGroupFlow.breadcrumb.breadcrumb.name : groupResponse.processGroupFlow.id;
-
-                    // process the source
-                    var connectionSource = initializeConnectionSource(groupResponse.id, groupName, connection.source);
-
-                    // process the destination
-                    var connectionDestination = initializeConnectionDestination(groupResponse.id, groupName, connection.destination);
-
-                    // finish populating the dialog once the source and destination have been loaded
-                    $.when(connectionSource, connectionDestination).done(function () {
-                        // process the relationships
-                        var availableRelationships = connection.availableRelationships;
-                        var selectedRelationships = connection.selectedRelationships;
-
-                        // show the available relationship if applicable
-                        if (nfCommon.isDefinedAndNotNull(availableRelationships) || nfCommon.isDefinedAndNotNull(selectedRelationships)) {
-                            // populate the available connections
-                            $.each(availableRelationships, function (i, name) {
-                                createRelationshipOption(name);
-                            });
-
-                            // ensure all selected relationships are present
-                            // (may be undefined) and selected
-                            $.each(selectedRelationships, function (i, name) {
-                                // mark undefined relationships accordingly
-                                if ($.inArray(name, availableRelationships) === -1) {
-                                    var option = createRelationshipOption(name);
-                                    $(option).children('div.relationship-name').addClass('undefined');
-                                }
-
-                                // ensure all selected relationships are bold
-                                var relationships = $('#read-only-relationship-names').children('div');
-                                $.each(relationships.children('div.relationship-name'), function (i, relationshipNameElement) {
-                                    var relationshipName = $(relationshipNameElement);
-                                    if (relationshipName.text() === name) {
-                                        relationshipName.css('font-weight', 'bold');
-                                    }
-                                });
-                            });
-
-                            $('#selected-relationship-text').show();
-                            $('#read-only-relationship-names-container').show();
-                        } else {
-                            $('#selected-relationship-text').hide();
-                            $('#read-only-relationship-names-container').hide();
-                        }
-
-                        // set the connection details
-                        nfCommon.populateField('read-only-connection-name', connection.name);
-                        nfCommon.populateField('read-only-connection-id', connection.id);
-                        nfCommon.populateField('read-only-flow-file-expiration', connection.flowFileExpiration);
-                        nfCommon.populateField('read-only-back-pressure-object-threshold', connection.backPressureObjectThreshold);
-                        nfCommon.populateField('read-only-back-pressure-data-size-threshold', connection.backPressureDataSizeThreshold);
-
-                        // prioritizers
-                        if (nfCommon.isDefinedAndNotNull(connection.prioritizers) && connection.prioritizers.length > 0) {
-                            var prioritizerList = $('<ol></ol>').css('list-style', 'decimal inside none');
-                            $.each(connection.prioritizers, function (i, type) {
-                                prioritizerList.append($('<li></li>').text(nfCommon.substringAfterLast(type, '.')));
-                            });
-                            $('#read-only-prioritizers').append(prioritizerList);
-                        } else {
-                            var noValueSet = $('<span class="unset">No value set</span>');
-                            $('#read-only-prioritizers').append(noValueSet);
+        var createRelationshipOption = function (name) {
+            $('<div class="available-relationship-container"></div>').append(
+                $('<div class="relationship-name"></div>').text(name)).appendTo('#read-only-relationship-names');
+        };
+    
+        return {
+            /**
+             * Initializes the connection details dialog.
+             */
+            init: function () {
+                // initialize the details tabs
+                $('#connection-details-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                        name: nf._.msg('nf-connection-details.Details'),
+                        tabContentId: 'read-only-connection-details-tab-content'
+                    }, {
+                        name: nf._.msg('nf-connection-details.Settings'),
+                        tabContentId: 'read-only-connection-settings-tab-content'
+                    }]
+                });
+    
+                // configure the connection details dialog
+                $('#connection-details').modal({
+                    headerText: nf._.msg('nf-connection-details.ConnectionDetails'),
+                    scrollableContentStyle: 'scrollable',
+                    buttons: [{
+                        buttonText: nf._.msg('nf-connection-details.Ok'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#connection-details').modal('hide');
+                            }
                         }
-
-                        // select the first tab
-                        $('#connection-details-tabs').find('li:first').click();
-
-                        // show the dialog
-                        $('#connection-details').modal('show');
-
-                        // show the border if necessary
-                        var relationshipNames = $('#read-only-relationship-names');
-                        if (relationshipNames.is(':visible') && relationshipNames.get(0).scrollHeight > Math.round(relationshipNames.innerHeight())) {
-                            relationshipNames.css('border-width', '1px');
+                    }],
+                    handler: {
+                        close: function () {
+                            // clear the relationship names
+                            $('#read-only-relationship-names').empty();
+    
+                            // clear the connection details
+                          nfCommon.clearField('read-only-connection-name');
+                          nfCommon.clearField('read-only-connection-id');
+    
+                            // clear the connection source details
+                            $('#read-only-connection-source-label').text('');
+                            $('#read-only-connection-source').empty();
+                            $('#read-only-connection-source-group-name').text('');
+    
+                            // clear the connection target details
+                            $('#read-only-connection-target-label').text('');
+                            $('#read-only-connection-target').empty();
+                            $('#read-only-connection-target-group-name').text('');
+    
+                            // clear the relationship details
+                            $('#read-only-relationship-names').css('border-width', '0').empty();
+    
+                            // clear the connection settings
+                            $('#read-only-flow-file-expiration').text('');
+                            $('#read-only-back-pressure-object-threshold').text('');
+                            $('#read-only-back-pressure-data-size-threshold').text('');
+                            $('#read-only-prioritizers').empty();
+                        },
+                        open: function () {
+                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                         }
-                    }).fail(nfErrorHandler.handleAjaxError);
-                }
-            }).fail(nfErrorHandler.handleAjaxError);
-        }
-    };
-}));
\ No newline at end of file
+                    }
+                });
+            },
+    
+            /**
+             * Shows the details for the specified edge.
+             *
+             * @argument {string} groupId           The group id
+             * @argument {string} connectionId      The connection id
+             */
+            showDetails: function (groupId, connectionId) {
+                // get the group details
+                var groupXhr = $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/flow/process-groups/' + encodeURIComponent(groupId),
+                    dataType: 'json'
+                });
+    
+                // get the connection details
+                var connectionXhr = $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/connections/' + encodeURIComponent(connectionId),
+                    dataType: 'json'
+                });
+    
+                // populate the dialog once get have all necessary details
+                $.when(groupXhr, connectionXhr).done(function (groupResult, connectionResult) {
+                    var groupResponse = groupResult[0];
+                    var connectionResponse = connectionResult[0];
+    
+                    // ensure we can read this connection.. though should never fail as the request returned successfully
+                    if (connectionResponse.permissions.canRead) {
+                        var connection = connectionResponse.component;
+                        var groupName = groupResponse.permissions.canRead ? groupResponse.processGroupFlow.breadcrumb.breadcrumb.name : groupResponse.processGroupFlow.id;
+    
+                        // process the source
+                        var connectionSource = initializeConnectionSource(groupResponse.id, groupName, connection.source);
+    
+                        // process the destination
+                        var connectionDestination = initializeConnectionDestination(groupResponse.id, groupName, connection.destination);
+    
+                        // finish populating the dialog once the source and destination have been loaded
+                        $.when(connectionSource, connectionDestination).done(function () {
+                            // process the relationships
+                            var availableRelationships = connection.availableRelationships;
+                            var selectedRelationships = connection.selectedRelationships;
+    
+                            // show the available relationship if applicable
+                          if (nfCommon.isDefinedAndNotNull(availableRelationships) || nfCommon.isDefinedAndNotNull(selectedRelationships)) {
+                                // populate the available connections
+                                $.each(availableRelationships, function (i, name) {
+                                    createRelationshipOption(name);
+                                });
+    
+                                // ensure all selected relationships are present
+                                // (may be undefined) and selected
+                                $.each(selectedRelationships, function (i, name) {
+                                    // mark undefined relationships accordingly
+                                    if ($.inArray(name, availableRelationships) === -1) {
+                                        var option = createRelationshipOption(name);
+                                        $(option).children('div.relationship-name').addClass('undefined');
+                                    }
+    
+                                    // ensure all selected relationships are bold
+                                    var relationships = $('#read-only-relationship-names').children('div');
+                                    $.each(relationships.children('div.relationship-name'), function (i, relationshipNameElement) {
+                                        var relationshipName = $(relationshipNameElement);
+                                        if (relationshipName.text() === name) {
+                                            relationshipName.css('font-weight', 'bold');
+                                        }
+                                    });
+                                });
+    
+                                $('#selected-relationship-text').show();
+                                $('#read-only-relationship-names-container').show();
+                            } else {
+                                $('#selected-relationship-text').hide();
+                                $('#read-only-relationship-names-container').hide();
+                            }
+    
+                            // set the connection details
+                          nfCommon.populateField('read-only-connection-name', connection.name);
+                          nfCommon.populateField('read-only-connection-id', connection.id);
+                          nfCommon.populateField('read-only-flow-file-expiration', connection.flowFileExpiration);
+                          nfCommon.populateField('read-only-back-pressure-object-threshold', connection.backPressureObjectThreshold);
+                          nfCommon.populateField('read-only-back-pressure-data-size-threshold', connection.backPressureDataSizeThreshold);
+    
+                            // prioritizers
+                          if (nfCommon.isDefinedAndNotNull(connection.prioritizers) && connection.prioritizers.length > 0) {
+                                var prioritizerList = $('<ol></ol>').css('list-style', 'decimal inside none');
+                                $.each(connection.prioritizers, function (i, type) {
+                                  prioritizerList.append($('<li></li>').text(nfCommon.substringAfterLast(type, '.')));
+                                });
+                                $('#read-only-prioritizers').append(prioritizerList);
+                            } else {
+                                var noValueSet = $('<span class="unset">'+nf._.msg('nf-connection-details.NoValueSet')+'</span>');
+                                $('#read-only-prioritizers').append(noValueSet);
+                            }
+    
+                            // select the first tab
+                            $('#connection-details-tabs').find('li:first').click();
+    
+                            // show the dialog
+                            $('#connection-details').modal('show');
+    
+                            // show the border if necessary
+                            var relationshipNames = $('#read-only-relationship-names');
+                          if (relationshipNames.is(':visible') && relationshipNames.get(0).scrollHeight > Math.round(relationshipNames.innerHeight())) {
+                                relationshipNames.css('border-width', '1px');
+                            }
+                      }).fail(nfErrorHandler.handleAjaxError);
+                    }
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+  }));
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 fff81b4c777e..884c74ed67b7 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
@@ -1,178 +1,178 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery'], 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', []);
-                }
-            }
-        });
-    });
-
-    var nfDialog = {
-        /**
-         * Shows an general dialog with an Okay button populated with the
-         * specified dialog content.
-         *
-         * @argument {object} options       Dialog options
-         */
-        showOkDialog: function (options) {
-            options = $.extend({
-                headerText: '',
-                dialogContent: ''
-            }, options);
-
-            // regardless of whether the dialog is already visible, the new content will be appended
-            var content = $('<p></p>').append(options.dialogContent);
-            $('#nf-ok-dialog-content').append(content);
-
-            // update the button model
-            $('#nf-ok-dialog').modal('setButtonModel', [{
-                buttonText: 'Ok',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery'], 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: {
-                    click: function () {
-                        // close the dialog
-                        $('#nf-ok-dialog').modal('hide');
-                        if (typeof options.okHandler === 'function') {
-                            options.okHandler.call(this);
-                        }
+                    close: function () {
+                        // clear the content
+                        $('#nf-ok-dialog-content').empty();
                     }
                 }
-            }]);
-
-            // show the dialog
-            $('#nf-ok-dialog').modal('setHeaderText', options.headerText).modal('show');
-        },
-
-        /**
-         * Shows an general dialog with Yes and No buttons populated with the
-         * specified dialog content.
-         *
-         * @argument {object} options       Dialog options
-         */
-        showYesNoDialog: function (options) {
-            options = $.extend({
-                headerText: '',
-                dialogContent: '',
-                yesText: 'Yes',
-                noText: 'No'
-            }, options);
-
-            // add the content to the prompt
-            var content = $('<p></p>').append(options.dialogContent);
-            $('#nf-yes-no-dialog-content').append(content);
-
-            // update the button model
-            $('#nf-yes-no-dialog').modal('setButtonModel', [{
-                buttonText: options.yesText,
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
+            });
+    
+            // configure the yes/no dialog
+            $('#nf-yes-no-dialog').modal({
+                scrollableContentStyle: 'scrollable',
                 handler: {
-                    click: function () {
-                        // close the dialog
-                        $('#nf-yes-no-dialog').modal('hide');
-                        if (typeof options.yesHandler === 'function') {
-                            options.yesHandler.call(this);
-                        }
+                    close: function () {
+                        // clear the content and reset the button model
+                        $('#nf-yes-no-dialog-content').empty();
+                        $('#nf-yes-no-dialog').modal('setButtonModel', []);
                     }
                 }
+            });
+        });
+    
+      var nfDialog = {
+            /**
+             * Shows an general dialog with an Okay button populated with the
+             * specified dialog content.
+             *
+             * @argument {object} options       Dialog options
+             */
+            showOkDialog: function (options) {
+                options = $.extend({
+                    headerText: '',
+                    dialogContent: ''
+                }, options);
+    
+                // regardless of whether the dialog is already visible, the new content will be appended
+                var content = $('<p></p>').append(options.dialogContent);
+                $('#nf-ok-dialog-content').append(content);
+    
+                // update the button model
+                $('#nf-ok-dialog').modal('setButtonModel', [{
+                    buttonText: nf._.msg('nf-dialog.Ok'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // close the dialog
+                            $('#nf-ok-dialog').modal('hide');
+                            if (typeof options.okHandler === 'function') {
+                                options.okHandler.call(this);
+                            }
+                        }
+                    }
+                }]);
+    
+                // show the dialog
+                $('#nf-ok-dialog').modal('setHeaderText', options.headerText).modal('show');
             },
-                {
-                    buttonText: options.noText,
+    
+            /**
+             * Shows an general dialog with Yes and No buttons populated with the
+             * specified dialog content.
+             *
+             * @argument {object} options       Dialog options
+             */
+            showYesNoDialog: function (options) {
+                options = $.extend({
+                    headerText: '',
+                    dialogContent: '',
+                    yesText: 'Yes',
+                    noText: 'No'
+                }, options);
+    
+                // add the content to the prompt
+                var content = $('<p></p>').append(options.dialogContent);
+                $('#nf-yes-no-dialog-content').append(content);
+    
+                // update the button model
+                $('#nf-yes-no-dialog').modal('setButtonModel', [{
+                    buttonText: options.yesText,
                     color: {
-                        base: '#E3E8EB',
-                        hover: '#C7D2D7',
-                        text: '#004849'
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
                     },
                     handler: {
                         click: function () {
                             // close the dialog
                             $('#nf-yes-no-dialog').modal('hide');
-                            if (typeof options.noHandler === 'function') {
-                                options.noHandler.call(this);
+                            if (typeof options.yesHandler === 'function') {
+                                options.yesHandler.call(this);
                             }
                         }
                     }
-                }]);
-
-            // 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.'
-            });
-        }
-    };
-
-    return nfDialog;
-}));
\ No newline at end of file
+                },
+                    {
+                        buttonText: options.noText,
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                // close the dialog
+                                $('#nf-yes-no-dialog').modal('hide');
+                                if (typeof options.noHandler === 'function') {
+                                    options.noHandler.call(this);
+                                }
+                            }
+                        }
+                    }]);
+    
+                // 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.'
+              });
+            }
+        };
+    
+      return nfDialog;
+  }));
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 190160025dfb..8ddf99e6ccc2 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
@@ -1,1188 +1,1188 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-            'd3',
-            'nf.Common',
-            'nf.Dialog',
-            'nf.ErrorHandler'],
-            function ($, d3, nfCommon, nfDialog, nfErrorHandler) {
-            return (nf.StatusHistory = factory($, d3, nfCommon, nfDialog, nfErrorHandler));
-        });
-    } 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, nfCommon, nfDialog, nfErrorHandler) {
-    var config = {
-        nifiInstanceId: 'nifi-instance-id',
-        nifiInstanceLabel: 'NiFi',
-        type: {
-            processor: 'Processor',
-            inputPort: 'Input Port',
-            outputPort: 'Output Port',
-            processGroup: 'Process Group',
-            remoteProcessGroup: 'Remote Process Group',
-            connection: 'Connection',
-            funnel: 'Funnel',
-            template: 'Template',
-            label: 'Label'
-        },
-        urls: {
-            api: '../nifi-api'
-        }
-    };
-
-    /**
-     * Mapping of formatters to use for the chart's y axis.
-     */
-    var formatters = {
-        'DURATION': function (d) {
-            return nfCommon.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 nfCommon.formatInteger(d);
-            } else {
-                return nfCommon.formatFloat(d);
-            }
-        },
-        'DATA_SIZE': function (d) {
-            return nfCommon.formatDataSize(d);
-        }
-    };
-
-    /**
-     * The time offset of the server.
-     */
-    var serverTimeOffset = null;
-
-    /**
-     * The current extent of the brush.
-     */
-    var brushExtent = null;
-
-    /**
-     * The currently selected descriptor.
-     */
-    var descriptor = null;
-
-    /**
-     * The instances and whether they are visible or not
-     */
-    var instances = null;
-
-    /**
-     * Handles the status history response.
+    /*
+     * 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
      *
-     * @param {string} groupId
-     * @param {string} id
-     * @param {object} componentStatusHistory
-     * @param {string} componentType
-     * @param {object} selectedDescriptor
+     * 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.
      */
-    var handleStatusHistoryResponse = function (groupId, id, componentStatusHistory, componentType, selectedDescriptor) {
-        // update the last refreshed
-        $('#status-history-last-refreshed').text(componentStatusHistory.generated);
-
-        // initialize the status history
-        var statusHistory = {
-            groupId: groupId,
-            id: id,
-            type: componentType,
-            instances: []
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+              'd3',
+              'nf.Common',
+              'nf.Dialog',
+              'nf.ErrorHandler'],
+              function ($, d3, nfCommon, nfDialog, nfErrorHandler) {
+              return (nf.StatusHistory = factory($, d3, nfCommon, nfDialog, nfErrorHandler));
+          });
+      } 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, nfCommon, nfDialog, nfErrorHandler) {
+        var config = {
+            nifiInstanceId: 'nifi-instance-id',
+            nifiInstanceLabel: nf._.msg('nf-status-history.NiFi'),
+            type: {
+                processor: 'Processor',
+                inputPort: 'Input Port',
+                outputPort: 'Output Port',
+                processGroup: 'Process Group',
+                remoteProcessGroup: 'Remote Process Group',
+                connection: 'Connection',
+                funnel: 'Funnel',
+                template: 'Template',
+                label: 'Label'
+            },
+            urls: {
+                api: '../nifi-api'
+            }
         };
-
-        // get the descriptors
-        var descriptors = componentStatusHistory.fieldDescriptors;
-        statusHistory.details = componentStatusHistory.componentDetails;
-        statusHistory.selectedDescriptor = nfCommon.isUndefined(selectedDescriptor) ? descriptors[0] : selectedDescriptor;
-
-        // ensure enough status snapshots
-        if (nfCommon.isDefinedAndNotNull(componentStatusHistory.aggregateSnapshots) && componentStatusHistory.aggregateSnapshots.length > 1) {
-            statusHistory.instances.push({
-                id: config.nifiInstanceId,
-                label: config.nifiInstanceLabel,
-                snapshots: componentStatusHistory.aggregateSnapshots
-            });
-        } else {
-            insufficientHistory();
-            return;
-        }
-
-        // get the status for each node in the cluster if applicable
-        $.each(componentStatusHistory.nodeSnapshots, function (_, nodeSnapshots) {
+    
+        /**
+         * Mapping of formatters to use for the chart's y axis.
+         */
+        var formatters = {
+            'DURATION': function (d) {
+              return nfCommon.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 nfCommon.formatInteger(d);
+                } else {
+                  return nfCommon.formatFloat(d);
+                }
+            },
+            'DATA_SIZE': function (d) {
+              return nfCommon.formatDataSize(d);
+            }
+        };
+    
+        /**
+         * The time offset of the server.
+         */
+        var serverTimeOffset = null;
+    
+        /**
+         * The current extent of the brush.
+         */
+        var brushExtent = null;
+    
+        /**
+         * The currently selected descriptor.
+         */
+        var descriptor = null;
+    
+        /**
+         * The instances and whether they are visible or not
+         */
+        var instances = null;
+    
+        /**
+         * Handles the status history response.
+         *
+         * @param {string} groupId
+         * @param {string} id
+         * @param {object} componentStatusHistory
+         * @param {string} componentType
+         * @param {object} selectedDescriptor
+         */
+        var handleStatusHistoryResponse = function (groupId, id, componentStatusHistory, componentType, selectedDescriptor) {
+            // update the last refreshed
+            $('#status-history-last-refreshed').text(componentStatusHistory.generated);
+    
+            // initialize the status history
+            var statusHistory = {
+                groupId: groupId,
+                id: id,
+                type: componentType,
+                instances: []
+            };
+    
+            // get the descriptors
+            var descriptors = componentStatusHistory.fieldDescriptors;
+            statusHistory.details = componentStatusHistory.componentDetails;
+          statusHistory.selectedDescriptor = nfCommon.isUndefined(selectedDescriptor) ? descriptors[0] : selectedDescriptor;
+    
             // ensure enough status snapshots
-            if (nfCommon.isDefinedAndNotNull(nodeSnapshots.statusSnapshots) && nodeSnapshots.statusSnapshots.length > 1) {
+          if (nfCommon.isDefinedAndNotNull(componentStatusHistory.aggregateSnapshots) && componentStatusHistory.aggregateSnapshots.length > 1) {
                 statusHistory.instances.push({
-                    id: nodeSnapshots.nodeId,
-                    label: nodeSnapshots.address + ':' + nodeSnapshots.apiPort,
-                    snapshots: nodeSnapshots.statusSnapshots
+                    id: config.nifiInstanceId,
+                    label: config.nifiInstanceLabel,
+                    snapshots: componentStatusHistory.aggregateSnapshots
                 });
+            } else {
+                insufficientHistory();
+                return;
             }
-        });
-
-        // ensure we found eligible status history
-        if (statusHistory.instances.length > 0) {
-            // store the status history
-            $('#status-history-dialog').data('status-history', statusHistory);
-
-            // chart the status history
-            chart(statusHistory, descriptors);
-        } else {
-            insufficientHistory();
-        }
-    };
-
-    /**
-     * Shows an error message stating there is insufficient history available.
-     */
-    var insufficientHistory = function () {
-        // notify the user
-        nfDialog.showOkDialog({
-            headerText: 'Status History',
-            dialogContent: 'Insufficient history, please try again later.'
-        });
-    };
-
-    /**
-     * Builds the chart using the statusHistory and the available fields.
-     *
-     * @param {type} statusHistory
-     * @param {type} descriptors
-     */
-    var chart = function (statusHistory, descriptors) {
-        if (instances === null) {
-            instances = {};
-        }
-
-        // go through each instance of this status history
-        $.each(statusHistory.instances, function (_, instance) {
-            // and convert each timestamp accordingly
-            instance.snapshots.forEach(function (d) {
-                // 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
-                d.timestamp = new Date(d.timestamp + userTimeOffset + serverTimeOffset);
-            });
-        });
-
-        // this will trigger the chart to be updated
-        setAvailableFields(descriptors, statusHistory.selectedDescriptor);
-    };
-
-    /**
-     * Sets the available fields.
-     *
-     * @param {type} descriptors
-     * @param {type} selected
-     */
-    var setAvailableFields = function (descriptors, selected) {
-        var options = [];
-        $.each(descriptors, function (_, d) {
-            options.push({
-                text: d.label,
-                value: d.field,
-                description: nfCommon.escapeHtml(d.description)
-            });
-        });
-
-        // build the combo with the available fields
-        $('#status-history-metric-combo').combo({
-            selectedOption: {
-                value: selected.field
-            },
-            options: options,
-            select: function (selectedOption) {
-                // find the corresponding descriptor
-                var selectedDescriptor = null;
-                $.each(descriptors, function (_, d) {
-                    if (selectedOption.value === d.field) {
-                        selectedDescriptor = d;
-                        return false;
-                    }
-                });
-
-                // ensure the descriptor was found
-                if (selectedDescriptor !== null) {
-                    // clear the current extent if this is a newly selected descriptor
-                    if (descriptor === null || descriptor.field !== selectedDescriptor.field) {
-                        brushExtent = null;
-                    }
-
-                    // record the currently selected descriptor
-                    descriptor = selectedDescriptor;
-
-                    // update the selected chart
-                    var statusHistory = $('#status-history-dialog').data('status-history');
-                    statusHistory.selectedDescriptor = selectedDescriptor;
-                    $('#status-history-dialog').data('status-history', statusHistory);
-
-                    // update the chart
-                    updateChart();
+    
+            // get the status for each node in the cluster if applicable
+            $.each(componentStatusHistory.nodeSnapshots, function (_, nodeSnapshots) {
+                // ensure enough status snapshots
+              if (nfCommon.isDefinedAndNotNull(nodeSnapshots.statusSnapshots) && nodeSnapshots.statusSnapshots.length > 1) {
+                    statusHistory.instances.push({
+                        id: nodeSnapshots.nodeId,
+                        label: nodeSnapshots.address + ':' + nodeSnapshots.apiPort,
+                        snapshots: nodeSnapshots.statusSnapshots
+                    });
                 }
-            }
-        });
-
-        $('#status-history-dialog').modal('show');
-    };
-
-    var getChartMinHeight = function () {
-        return $('#status-history-chart-container').parent().outerHeight() - $('#status-history-chart-control-container').outerHeight() -
-            parseInt($('#status-history-chart-control-container').css('margin-top'), 10);
-    };
-
-    var getChartMaxHeight = function () {
-        return $('body').height() - $('#status-history-chart-control-container').outerHeight() -
-            $('#status-history-refresh-container').outerHeight() -
-            parseInt($('#status-history-chart-control-container').css('margin-top'), 10) -
-            parseInt($('.dialog-content').css('top')) - parseInt($('.dialog-content').css('bottom'));
-    };
-
-    var getChartMaxWidth = function () {
-        return $('body').width() - $('#status-history-details').innerWidth() -
-            parseInt($('#status-history-dialog').css('left'), 10) -
-            parseInt($('.dialog-content').css('left')) - parseInt($('.dialog-content').css('right'));
-    };
-
-    /**
-     * Updates the chart with the specified status history and the selected field.
-     */
-    var updateChart = function () {
-
-        var statusHistoryDialog = $('#status-history-dialog');
-
-        if (statusHistoryDialog.is(':visible')) {
-            var statusHistory = statusHistoryDialog.data('status-history');
-
-            // get the selected descriptor
-            var selectedDescriptor = statusHistory.selectedDescriptor;
-
-            // remove current details
-            $('#status-history-details').empty();
-
-            // add status history details
-            var detailsContainer = buildDetailsContainer('Status History');
-            d3.map(statusHistory.details).forEach(function (label, value) {
-                addDetailItem(detailsContainer, label, value);
             });
-
-            var margin = {
-                top: 15,
-                right: 20,
-                bottom: 25,
-                left: 75
-            };
-
-            // -------------
-            // prep the data
-            // -------------
-
-            // available colors
-            var color = d3.scale.category10();
-
-            // determine the available instances
-            var instanceLabels = [];
-            $.each(statusHistory.instances, function (_, instance) {
-                instanceLabels.push(instance.label);
+    
+            // ensure we found eligible status history
+            if (statusHistory.instances.length > 0) {
+                // store the status history
+                $('#status-history-dialog').data('status-history', statusHistory);
+    
+                // chart the status history
+                chart(statusHistory, descriptors);
+            } else {
+                insufficientHistory();
+            }
+        };
+    
+        /**
+         * Shows an error message stating there is insufficient history available.
+         */
+        var insufficientHistory = function () {
+            // notify the user
+          nfDialog.showOkDialog({
+                headerText: nf._.msg('nf-status-history.StatusHistory'),
+                dialogContent: nf._.msg('nf-status-history.Message')
             });
-
-            // specify the domain based on the detected instances
-            color.domain(instanceLabels);
-
-            // data for the chart
-            var statusData = [];
-
+        };
+    
+        /**
+         * Builds the chart using the statusHistory and the available fields.
+         *
+         * @param {type} statusHistory
+         * @param {type} descriptors
+         */
+        var chart = function (statusHistory, descriptors) {
+            if (instances === null) {
+                instances = {};
+            }
+    
             // 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 (nfCommon.isUndefinedOrNull(instances[instance.id])) {
-                    instances[instance.id] = true;
-                }
-
-                // and convert the model
-                statusData.push({
-                    id: instance.id,
-                    label: instance.label,
-                    values: $.map(instance.snapshots, function (d) {
-                        return {
-                            timestamp: d.timestamp,
-                            value: d.statusMetrics[selectedDescriptor.field]
-                        };
-                    }),
-                    visible: instances[instance.id] === true
+                // and convert each timestamp accordingly
+                instance.snapshots.forEach(function (d) {
+                    // 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
+                    d.timestamp = new Date(d.timestamp + userTimeOffset + serverTimeOffset);
                 });
             });
-
-            // --------------------------
-            // custom time axis formatter
-            // --------------------------
-
-            var customTimeFormat = d3.time.format.multi([
-                [':%S.%L', function (d) {
-                    return d.getMilliseconds();
-                }],
-                [':%S', function (d) {
-                    return d.getSeconds();
-                }],
-                ['%H:%M', function (d) {
-                    return d.getMinutes();
-                }],
-                ['%H:%M', function (d) {
-                    return d.getHours();
-                }],
-                ['%a %d', function (d) {
-                    return d.getDay() && d.getDate() !== 1;
-                }],
-                ['%b %d', function (d) {
-                    return d.getDate() !== 1;
-                }],
-                ['%B', function (d) {
-                    return d.getMonth();
-                }],
-                ['%Y', function () {
-                    return true;
-                }]
-            ]);
-
-            // ----------
-            // main chart
-            // ----------
-
-            // the container for the main chart
-            var chartContainer = $('#status-history-chart-container').empty();
-            if (chartContainer.hasClass('ui-resizable')) {
-                chartContainer.resizable('destroy');
-                chartContainer.removeAttr("style");
-            }
-
-            // calculate the dimensions
-            chartContainer.height(getChartMinHeight());
-
-            // determine the new width/height
-            var width = chartContainer.outerWidth() - margin.left - margin.right;
-            var height = chartContainer.outerHeight() - margin.top - margin.bottom;
-
-            maxWidth = $('#status-history-container').width();
-            if (width > maxWidth) {
-                width = maxWidth;
-            }
-
-            maxHeight = getChartMaxHeight();
-            if (height > maxHeight) {
-                height = maxHeight;
-            }
-
-            // define the x axis for the main chart
-            var x = d3.time.scale()
-                .range([0, width]);
-
-            var xAxis = d3.svg.axis()
-                .scale(x)
-                .ticks(5)
-                .tickFormat(customTimeFormat)
-                .orient('bottom');
-
-            // define the y axis
-            var y = d3.scale.linear()
-                .range([height, 0]);
-
-            var yAxis = d3.svg.axis()
-                .scale(y)
-                .tickFormat(formatters[selectedDescriptor.formatter])
-                .orient('left');
-
-
-            // status line
-            var line = d3.svg.line()
-                .interpolate('monotone')
-                .x(function (d) {
-                    return x(d.timestamp);
-                })
-                .y(function (d) {
-                    return y(d.value);
-                });
-
-            // build the chart svg
-            var chartSvg = d3.select('#status-history-chart-container').append('svg')
-                .attr('style', 'pointer-events: none;')
-                .attr('width', chartContainer.parent().width())
-                .attr('height', chartContainer.innerHeight());
-            // define a clip the path
-            var clipPath = chartSvg.append('defs').append('clipPath')
-                .attr('id', 'clip')
-                .append('rect')
-                .attr('width', width)
-                .attr('height', height);
-
-            // build the chart
-            var chart = chartSvg.append('g')
-                .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
-
-            // determine the min/max date
-            var minDate = d3.min(statusData, function (d) {
-                return d3.min(d.values, function (s) {
-                    return s.timestamp;
+    
+            // this will trigger the chart to be updated
+            setAvailableFields(descriptors, statusHistory.selectedDescriptor);
+        };
+    
+        /**
+         * Sets the available fields.
+         *
+         * @param {type} descriptors
+         * @param {type} selected
+         */
+        var setAvailableFields = function (descriptors, selected) {
+            var options = [];
+            $.each(descriptors, function (_, d) {
+                options.push({
+                    text: d.label,
+                    value: d.field,
+                  description: nfCommon.escapeHtml(d.description)
                 });
             });
-            var maxDate = d3.max(statusData, function (d) {
-                return d3.max(d.values, function (s) {
-                    return s.timestamp;
-                });
+    
+            // build the combo with the available fields
+            $('#status-history-metric-combo').combo({
+                selectedOption: {
+                    value: selected.field
+                },
+                options: options,
+                select: function (selectedOption) {
+                    // find the corresponding descriptor
+                    var selectedDescriptor = null;
+                    $.each(descriptors, function (_, d) {
+                        if (selectedOption.value === d.field) {
+                            selectedDescriptor = d;
+                            return false;
+                        }
+                    });
+    
+                    // ensure the descriptor was found
+                    if (selectedDescriptor !== null) {
+                        // clear the current extent if this is a newly selected descriptor
+                        if (descriptor === null || descriptor.field !== selectedDescriptor.field) {
+                            brushExtent = null;
+                        }
+    
+                        // record the currently selected descriptor
+                        descriptor = selectedDescriptor;
+    
+                        // update the selected chart
+                        var statusHistory = $('#status-history-dialog').data('status-history');
+                        statusHistory.selectedDescriptor = selectedDescriptor;
+                        $('#status-history-dialog').data('status-history', statusHistory);
+    
+                        // update the chart
+                        updateChart();
+                    }
+                }
             });
-            addDetailItem(detailsContainer, 'Start', nfCommon.formatDateTime(minDate));
-            addDetailItem(detailsContainer, 'End', nfCommon.formatDateTime(maxDate));
-
-            // determine the x axis range
-            x.domain([minDate, maxDate]);
-
-            // determine the y axis range
-            y.domain([getMinValue(statusData), getMaxValue(statusData)]);
-
-            // build the x axis
-            chart.append('g')
-                .attr('class', 'x axis')
-                .attr('transform', 'translate(0, ' + height + ')')
-                .call(xAxis);
-
-            // build the y axis
-            chart.append('g')
-                .attr('class', 'y axis')
-                .call(yAxis)
-                .append('text')
-                .attr('transform', 'rotate(-90)')
-                .attr('y', 6)
-                .attr('dy', '.71em')
-                .attr('text-anchor', 'end')
-                .text(selectedDescriptor.label);
-
-            // build the chart
-            var status = chart.selectAll('.status')
-                .data(statusData)
-                .enter()
-                .append('g')
-                .attr('clip-path', 'url(#clip)')
-                .attr('class', 'status');
-
-            // draw the lines
-            status.append('path')
-                .attr('class', function (d) {
-                    return 'chart-line chart-line-' + d.id;
-                })
-                .attr('d', function (d) {
-                    return line(d.values);
-                })
-                .attr('stroke', function (d) {
-                    return color(d.label);
-                })
-                .classed('hidden', function (d) {
-                    return d.visible === false;
-                })
-                .append('title')
-                .text(function (d) {
-                    return d.label;
+    
+            $('#status-history-dialog').modal('show');
+        };
+    
+        var getChartMinHeight = function () {
+            return $('#status-history-chart-container').parent().outerHeight() - $('#status-history-chart-control-container').outerHeight() -
+                parseInt($('#status-history-chart-control-container').css('margin-top'), 10);
+        };
+    
+        var getChartMaxHeight = function () {
+            return $('body').height() - $('#status-history-chart-control-container').outerHeight() -
+                $('#status-history-refresh-container').outerHeight() -
+                parseInt($('#status-history-chart-control-container').css('margin-top'), 10) -
+                parseInt($('.dialog-content').css('top')) - parseInt($('.dialog-content').css('bottom'));
+        };
+    
+        var getChartMaxWidth = function () {
+            return $('body').width() - $('#status-history-details').innerWidth() -
+                parseInt($('#status-history-dialog').css('left'), 10) -
+                parseInt($('.dialog-content').css('left')) - parseInt($('.dialog-content').css('right'));
+        };
+    
+        /**
+         * Updates the chart with the specified status history and the selected field.
+         */
+        var updateChart = function () {
+    
+            var statusHistoryDialog = $('#status-history-dialog');
+    
+            if (statusHistoryDialog.is(':visible')) {
+                var statusHistory = statusHistoryDialog.data('status-history');
+    
+                // get the selected descriptor
+                var selectedDescriptor = statusHistory.selectedDescriptor;
+    
+                // remove current details
+                $('#status-history-details').empty();
+    
+                // add status history details
+                var detailsContainer = buildDetailsContainer(nf._.msg('nf-status-history.StatusHistory'));
+                d3.map(statusHistory.details).forEach(function (label, value) {
+                    addDetailItem(detailsContainer, label, value);
+                });
+    
+                var margin = {
+                    top: 15,
+                    right: 20,
+                    bottom: 25,
+                    left: 75
+                };
+    
+                // -------------
+                // prep the data
+                // -------------
+    
+                // available colors
+                var color = d3.scale.category10();
+    
+                // determine the available instances
+                var instanceLabels = [];
+                $.each(statusHistory.instances, function (_, instance) {
+                    instanceLabels.push(instance.label);
+                });
+    
+                // specify the domain based on the detected instances
+                color.domain(instanceLabels);
+    
+                // data for the chart
+                var statusData = [];
+    
+                // 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 (nfCommon.isUndefinedOrNull(instances[instance.id])) {
+                        instances[instance.id] = true;
+                    }
+    
+                    // and convert the model
+                    statusData.push({
+                        id: instance.id,
+                        label: instance.label,
+                        values: $.map(instance.snapshots, function (d) {
+                            return {
+                                timestamp: d.timestamp,
+                                value: d.statusMetrics[selectedDescriptor.field]
+                            };
+                        }),
+                        visible: instances[instance.id] === true
+                    });
                 });
-
-            // draw the control points for each line
-            status.each(function (d) {
-                // create a group for the control points
-                var markGroup = d3.select(this).append('g')
-                    .attr('class', function () {
-                        return 'mark-group mark-group-' + d.id;
+    
+                // --------------------------
+                // custom time axis formatter
+                // --------------------------
+    
+                var customTimeFormat = d3.time.format.multi([
+                    [':%S.%L', function (d) {
+                        return d.getMilliseconds();
+                    }],
+                    [':%S', function (d) {
+                        return d.getSeconds();
+                    }],
+                    ['%H:%M', function (d) {
+                        return d.getMinutes();
+                    }],
+                    ['%H:%M', function (d) {
+                        return d.getHours();
+                    }],
+                    ['%a %d', function (d) {
+                        return d.getDay() && d.getDate() !== 1;
+                    }],
+                    ['%b %d', function (d) {
+                        return d.getDate() !== 1;
+                    }],
+                    ['%B', function (d) {
+                        return d.getMonth();
+                    }],
+                    ['%Y', function () {
+                        return true;
+                    }]
+                ]);
+    
+                // ----------
+                // main chart
+                // ----------
+    
+                // the container for the main chart
+                var chartContainer = $('#status-history-chart-container').empty();
+                if (chartContainer.hasClass('ui-resizable')) {
+                    chartContainer.resizable('destroy');
+                    chartContainer.removeAttr("style");
+                }
+    
+                // calculate the dimensions
+                chartContainer.height(getChartMinHeight());
+    
+                // determine the new width/height
+                var width = chartContainer.outerWidth() - margin.left - margin.right;
+                var height = chartContainer.outerHeight() - margin.top - margin.bottom;
+    
+                maxWidth = $('#status-history-container').width();
+                if (width > maxWidth) {
+                    width = maxWidth;
+                }
+    
+                maxHeight = getChartMaxHeight();
+                if (height > maxHeight) {
+                    height = maxHeight;
+                }
+    
+                // define the x axis for the main chart
+                var x = d3.time.scale()
+                    .range([0, width]);
+    
+                var xAxis = d3.svg.axis()
+                    .scale(x)
+                    .ticks(5)
+                    .tickFormat(customTimeFormat)
+                    .orient('bottom');
+    
+                // define the y axis
+                var y = d3.scale.linear()
+                    .range([height, 0]);
+    
+                var yAxis = d3.svg.axis()
+                    .scale(y)
+                    .tickFormat(formatters[selectedDescriptor.formatter])
+                    .orient('left');
+    
+    
+                // status line
+                var line = d3.svg.line()
+                    .interpolate('monotone')
+                    .x(function (d) {
+                        return x(d.timestamp);
                     })
-                    .classed('hidden', function (d) {
-                        return d.visible === false;
+                    .y(function (d) {
+                        return y(d.value);
+                    });
+    
+                // build the chart svg
+                var chartSvg = d3.select('#status-history-chart-container').append('svg')
+                    .attr('style', 'pointer-events: none;')
+                    .attr('width', chartContainer.parent().width())
+                    .attr('height', chartContainer.innerHeight());
+                // define a clip the path
+                var clipPath = chartSvg.append('defs').append('clipPath')
+                    .attr('id', 'clip')
+                    .append('rect')
+                    .attr('width', width)
+                    .attr('height', height);
+    
+                // build the chart
+                var chart = chartSvg.append('g')
+                    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
+    
+                // determine the min/max date
+                var minDate = d3.min(statusData, function (d) {
+                    return d3.min(d.values, function (s) {
+                        return s.timestamp;
+                    });
+                });
+                var maxDate = d3.max(statusData, function (d) {
+                    return d3.max(d.values, function (s) {
+                        return s.timestamp;
                     });
-
-                // draw the control points
-                markGroup.selectAll('circle.mark')
-                    .data(d.values)
+                });
+                addDetailItem(detailsContainer, nf._.msg('nf-status-history.Start'), nf.Common.formatDateTime(minDate));
+                addDetailItem(detailsContainer, nf._.msg('nf-status-history.End'), nf.Common.formatDateTime(maxDate));
+    
+                // determine the x axis range
+                x.domain([minDate, maxDate]);
+    
+                // determine the y axis range
+                y.domain([getMinValue(statusData), getMaxValue(statusData)]);
+    
+                // build the x axis
+                chart.append('g')
+                    .attr('class', 'x axis')
+                    .attr('transform', 'translate(0, ' + height + ')')
+                    .call(xAxis);
+    
+                // build the y axis
+                chart.append('g')
+                    .attr('class', 'y axis')
+                    .call(yAxis)
+                    .append('text')
+                    .attr('transform', 'rotate(-90)')
+                    .attr('y', 6)
+                    .attr('dy', '.71em')
+                    .attr('text-anchor', 'end')
+                    .text(selectedDescriptor.label);
+    
+                // build the chart
+                var status = chart.selectAll('.status')
+                    .data(statusData)
                     .enter()
-                    .append('circle')
-                    .attr('style', 'pointer-events: all;')
-                    .attr('class', 'mark')
-                    .attr('cx', function (v) {
-                        return x(v.timestamp);
+                    .append('g')
+                    .attr('clip-path', 'url(#clip)')
+                    .attr('class', 'status');
+    
+                // draw the lines
+                status.append('path')
+                    .attr('class', function (d) {
+                        return 'chart-line chart-line-' + d.id;
                     })
-                    .attr('cy', function (v) {
-                        return y(v.value);
+                    .attr('d', function (d) {
+                        return line(d.values);
                     })
-                    .attr('fill', function () {
+                    .attr('stroke', function (d) {
                         return color(d.label);
                     })
-                    .attr('r', 1.5)
+                    .classed('hidden', function (d) {
+                        return d.visible === false;
+                    })
                     .append('title')
-                    .text(function (v) {
-                        return d.label + ' -- ' + formatters[selectedDescriptor.formatter](v.value);
+                    .text(function (d) {
+                        return d.label;
                     });
-            });
-
-            // update the size of the chart
-            chartSvg.attr('width', chartContainer.parent().width())
-                .attr('height', chartContainer.innerHeight());
-
-            // update the size of the clipper
-            clipPath.attr('width', width)
-                .attr('height', height);
-
-            // update the position of the x axis
-            chart.select('.x.axis').attr('transform', 'translate(0, ' + height + ')');
-
-            // -------------
-            // control chart
-            // -------------
-
-            // the container for the main chart control
-            var chartControlContainer = $('#status-history-chart-control-container').empty();
-            var controlHeight = chartControlContainer.innerHeight() - margin.top - margin.bottom;
-
-            var xControl = d3.time.scale()
-                .range([0, width]);
-
-            var xControlAxis = d3.svg.axis()
-                .scale(xControl)
-                .ticks(5)
-                .tickFormat(customTimeFormat)
-                .orient('bottom');
-
-            var yControl = d3.scale.linear()
-                .range([controlHeight, 0]);
-
-            var yControlAxis = d3.svg.axis()
-                .scale(yControl)
-                .tickValues(y.domain())
-                .tickFormat(formatters[selectedDescriptor.formatter])
-                .orient('left');
-
-            // status line
-            var controlLine = d3.svg.line()
-                .interpolate('monotone')
-                .x(function (d) {
-                    return xControl(d.timestamp);
-                })
-                .y(function (d) {
-                    return yControl(d.value);
-                });
-
-            // build the svg
-            var controlChartSvg = d3.select('#status-history-chart-control-container').append('svg')
-                .attr('width', chartContainer.parent().width())
-                .attr('height', controlHeight + margin.top + margin.bottom);
-
-            // build the control chart
-            var control = controlChartSvg.append('g')
-                .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
-
-            // increase the y domain slightly
-            var yControlDomain = y.domain();
-            yControlDomain[1] *= 1.04;
-
-            // define the domain for the control chart
-            xControl.domain(x.domain());
-            yControl.domain(yControlDomain);
-
-            // build the control x axis
-            control.append('g')
-                .attr('class', 'x axis')
-                .attr('transform', 'translate(0, ' + controlHeight + ')')
-                .call(xControlAxis);
-
-            // build the control y axis
-            control.append('g')
-                .attr('class', 'y axis')
-                .call(yControlAxis);
-
-            // build the control chart
-            var controlStatus = control.selectAll('.status')
-                .data(statusData)
-                .enter()
-                .append('g')
-                .attr('class', 'status');
-
-            // draw the lines
-            controlStatus.append('path')
-                .attr('class', function (d) {
-                    return 'chart-line chart-line-' + d.id;
-                })
-                .attr('d', function (d) {
-                    return controlLine(d.values);
-                })
-                .attr('stroke', function (d) {
-                    return color(d.label);
-                })
-                .classed('hidden', function (d) {
-                    return instances[d.id] === false;
-                })
-                .append('title')
-                .text(function (d) {
-                    return d.label;
+    
+                // draw the control points for each line
+                status.each(function (d) {
+                    // create a group for the control points
+                    var markGroup = d3.select(this).append('g')
+                        .attr('class', function () {
+                            return 'mark-group mark-group-' + d.id;
+                        })
+                        .classed('hidden', function (d) {
+                            return d.visible === false;
+                        });
+    
+                    // draw the control points
+                    markGroup.selectAll('circle.mark')
+                        .data(d.values)
+                        .enter()
+                        .append('circle')
+                        .attr('style', 'pointer-events: all;')
+                        .attr('class', 'mark')
+                        .attr('cx', function (v) {
+                            return x(v.timestamp);
+                        })
+                        .attr('cy', function (v) {
+                            return y(v.value);
+                        })
+                        .attr('fill', function () {
+                            return color(d.label);
+                        })
+                        .attr('r', 1.5)
+                        .append('title')
+                        .text(function (v) {
+                            return d.label + ' -- ' + formatters[selectedDescriptor.formatter](v.value);
+                        });
                 });
-
-            // -------------------
-            // configure the brush
-            // -------------------
-
-            /**
-             * Updates the axis for the main chart.
-             *
-             * @param {array} xDomain   The new domain for the x axis
-             * @param {array} yDomain   The new domain for the y axis
-             */
-            var updateAxes = function (xDomain, yDomain) {
-                // update the domain of the main chart
-                x.domain(xDomain);
-                y.domain(yDomain);
-
-                // update the chart lines
-                status.selectAll('.chart-line')
-                    .attr('d', function (d) {
-                        return line(d.values);
+    
+                // update the size of the chart
+                chartSvg.attr('width', chartContainer.parent().width())
+                    .attr('height', chartContainer.innerHeight());
+    
+                // update the size of the clipper
+                clipPath.attr('width', width)
+                    .attr('height', height);
+    
+                // update the position of the x axis
+                chart.select('.x.axis').attr('transform', 'translate(0, ' + height + ')');
+    
+                // -------------
+                // control chart
+                // -------------
+    
+                // the container for the main chart control
+                var chartControlContainer = $('#status-history-chart-control-container').empty();
+                var controlHeight = chartControlContainer.innerHeight() - margin.top - margin.bottom;
+    
+                var xControl = d3.time.scale()
+                    .range([0, width]);
+    
+                var xControlAxis = d3.svg.axis()
+                    .scale(xControl)
+                    .ticks(5)
+                    .tickFormat(customTimeFormat)
+                    .orient('bottom');
+    
+                var yControl = d3.scale.linear()
+                    .range([controlHeight, 0]);
+    
+                var yControlAxis = d3.svg.axis()
+                    .scale(yControl)
+                    .tickValues(y.domain())
+                    .tickFormat(formatters[selectedDescriptor.formatter])
+                    .orient('left');
+    
+                // status line
+                var controlLine = d3.svg.line()
+                    .interpolate('monotone')
+                    .x(function (d) {
+                        return xControl(d.timestamp);
+                    })
+                    .y(function (d) {
+                        return yControl(d.value);
                     });
-                status.selectAll('circle.mark')
-                    .attr('cx', function (v) {
-                        return x(v.timestamp);
+    
+                // build the svg
+                var controlChartSvg = d3.select('#status-history-chart-control-container').append('svg')
+                    .attr('width', chartContainer.parent().width())
+                    .attr('height', controlHeight + margin.top + margin.bottom);
+    
+                // build the control chart
+                var control = controlChartSvg.append('g')
+                    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
+    
+                // increase the y domain slightly
+                var yControlDomain = y.domain();
+                yControlDomain[1] *= 1.04;
+    
+                // define the domain for the control chart
+                xControl.domain(x.domain());
+                yControl.domain(yControlDomain);
+    
+                // build the control x axis
+                control.append('g')
+                    .attr('class', 'x axis')
+                    .attr('transform', 'translate(0, ' + controlHeight + ')')
+                    .call(xControlAxis);
+    
+                // build the control y axis
+                control.append('g')
+                    .attr('class', 'y axis')
+                    .call(yControlAxis);
+    
+                // build the control chart
+                var controlStatus = control.selectAll('.status')
+                    .data(statusData)
+                    .enter()
+                    .append('g')
+                    .attr('class', 'status');
+    
+                // draw the lines
+                controlStatus.append('path')
+                    .attr('class', function (d) {
+                        return 'chart-line chart-line-' + d.id;
                     })
-                    .attr('cy', function (v) {
-                        return y(v.value);
+                    .attr('d', function (d) {
+                        return controlLine(d.values);
                     })
-                    .attr('r', function () {
-                        return brush.empty() ? 1.5 : 4;
-                    });
-
-                // update the x axis
-                chart.select('.x.axis').call(xAxis);
-                chart.select('.y.axis').call(yAxis);
-            };
-
-            /**
-             * Handles brush events by updating the main chart according to the context window
-             * or the control domain if there is no context window.
-             */
-            var brushed = function () {
-                // determine the new x and y domains
-                var xContextDomain, yContextDomain;
-                if (brush.empty()) {
-                    // get the all visible instances
-                    var visibleInstances = $.grep(statusData, function (d) {
-                        return d.visible;
+                    .attr('stroke', function (d) {
+                        return color(d.label);
+                    })
+                    .classed('hidden', function (d) {
+                        return instances[d.id] === false;
+                    })
+                    .append('title')
+                    .text(function (d) {
+                        return d.label;
                     });
-
-                    // determine the appropriate y domain
-                    if (visibleInstances.length === 0) {
-                        yContextDomain = yControl.domain();
+    
+                // -------------------
+                // configure the brush
+                // -------------------
+    
+                /**
+                 * Updates the axis for the main chart.
+                 *
+                 * @param {array} xDomain   The new domain for the x axis
+                 * @param {array} yDomain   The new domain for the y axis
+                 */
+                var updateAxes = function (xDomain, yDomain) {
+                    // update the domain of the main chart
+                    x.domain(xDomain);
+                    y.domain(yDomain);
+    
+                    // update the chart lines
+                    status.selectAll('.chart-line')
+                        .attr('d', function (d) {
+                            return line(d.values);
+                        });
+                    status.selectAll('circle.mark')
+                        .attr('cx', function (v) {
+                            return x(v.timestamp);
+                        })
+                        .attr('cy', function (v) {
+                            return y(v.value);
+                        })
+                        .attr('r', function () {
+                            return brush.empty() ? 1.5 : 4;
+                        });
+    
+                    // update the x axis
+                    chart.select('.x.axis').call(xAxis);
+                    chart.select('.y.axis').call(yAxis);
+                };
+    
+                /**
+                 * Handles brush events by updating the main chart according to the context window
+                 * or the control domain if there is no context window.
+                 */
+                var brushed = function () {
+                    // determine the new x and y domains
+                    var xContextDomain, yContextDomain;
+                    if (brush.empty()) {
+                        // get the all visible instances
+                        var visibleInstances = $.grep(statusData, function (d) {
+                            return d.visible;
+                        });
+    
+                        // determine the appropriate y domain
+                        if (visibleInstances.length === 0) {
+                            yContextDomain = yControl.domain();
+                        } else {
+                            yContextDomain = [
+                                d3.min(visibleInstances, function (d) {
+                                    return d3.min(d.values, function (s) {
+                                        return s.value;
+                                    });
+                                }),
+                                d3.max(visibleInstances, function (d) {
+                                    return d3.max(d.values, function (s) {
+                                        return s.value;
+                                    });
+                                })
+                            ];
+                        }
+                        xContextDomain = xControl.domain();
+    
+                        // clear the current extent
+                        brushExtent = null;
                     } else {
-                        yContextDomain = [
-                            d3.min(visibleInstances, function (d) {
-                                return d3.min(d.values, function (s) {
-                                    return s.value;
-                                });
-                            }),
-                            d3.max(visibleInstances, function (d) {
-                                return d3.max(d.values, function (s) {
-                                    return s.value;
-                                });
-                            })
-                        ];
-                    }
-                    xContextDomain = xControl.domain();
-
-                    // clear the current extent
-                    brushExtent = null;
-                } else {
-                    var extent = brush.extent();
-                    xContextDomain = [extent[0][0], extent[1][0]];
-                    yContextDomain = [extent[0][1], extent[1][1]];
-
-                    // hold onto the current brush
-                    brushExtent = extent;
-                }
-
-                // update the axes accordingly
-                updateAxes(xContextDomain, yContextDomain);
-
-                // update the aggregate statistics according to the new domain
-                updateAggregateStatistics();
-            };
-
-            // build the brush
-            var brush = d3.svg.brush()
-                .x(xControl)
-                .y(yControl)
-                .on('brush', brushed);
-
-            // conditionally set the brush extent
-            if (nfCommon.isDefinedAndNotNull(brushExtent)) {
-                brush = brush.extent(brushExtent);
-            }
-
-            // context area
-            control.append('g')
-                .attr('class', 'brush')
-                .call(brush);
-
-            // add expansion to the extent
-            control.select('rect.extent')
-                .attr('style', 'pointer-events: all;')
-                .on('dblclick', function () {
-                    if (!brush.empty()) {
-                        // get the current extent to get the x range
                         var extent = brush.extent();
-
-                        // get the y range (this value does not change from the original y domain)
-                        var yRange = yControl.domain();
-
-                        // expand the extent vertically
-                        brush.extent([[extent[0][0], yRange[0]], [extent[1][0], yRange[1]]]);
-
-                        // update the brush control
-                        control.select('.brush').call(brush);
-
-                        // run the brush to update the axes of the main chart
-                        brushed();
+                        xContextDomain = [extent[0][0], extent[1][0]];
+                        yContextDomain = [extent[0][1], extent[1][1]];
+    
+                        // hold onto the current brush
+                        brushExtent = extent;
                     }
-                });
-
-            // --------------------
-            // aggregate statistics
-            // --------------------
-
-            var updateAggregateStatistics = function () {
-                // locate the instances that have data points within the current brush
-                var withinBrush = $.map(statusData, function (d) {
-                    var xDomain = x.domain();
-                    var yDomain = y.domain();
-
-                    // copy to avoid modifying the original
-                    var copy = $.extend({}, d);
-
-                    // update the copy to only include values within the brush
-                    return $.extend(copy, {
-                        values: $.grep(d.values, function (s) {
-                            return s.timestamp.getTime() >= xDomain[0].getTime() && s.timestamp.getTime() <= xDomain[1].getTime() && s.value >= yDomain[0] && s.value <= yDomain[1];
-                        })
+    
+                    // update the axes accordingly
+                    updateAxes(xContextDomain, yContextDomain);
+    
+                    // update the aggregate statistics according to the new domain
+                    updateAggregateStatistics();
+                };
+    
+                // build the brush
+                var brush = d3.svg.brush()
+                    .x(xControl)
+                    .y(yControl)
+                    .on('brush', brushed);
+    
+                // conditionally set the brush extent
+              if (nfCommon.isDefinedAndNotNull(brushExtent)) {
+                    brush = brush.extent(brushExtent);
+                }
+    
+                // context area
+                control.append('g')
+                    .attr('class', 'brush')
+                    .call(brush);
+    
+                // add expansion to the extent
+                control.select('rect.extent')
+                    .attr('style', 'pointer-events: all;')
+                    .on('dblclick', function () {
+                        if (!brush.empty()) {
+                            // get the current extent to get the x range
+                            var extent = brush.extent();
+    
+                            // get the y range (this value does not change from the original y domain)
+                            var yRange = yControl.domain();
+    
+                            // expand the extent vertically
+                            brush.extent([[extent[0][0], yRange[0]], [extent[1][0], yRange[1]]]);
+    
+                            // update the brush control
+                            control.select('.brush').call(brush);
+    
+                            // run the brush to update the axes of the main chart
+                            brushed();
+                        }
                     });
-                });
-
-                // consider visible nodes with data in the brush
-                var nodes = $.grep(withinBrush, function (d) {
-                    return d.id !== config.nifiInstanceId && d.visible && d.values.length > 0;
-                });
-
-                var nodeMinValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMinValue(nodes));
-                var nodeMeanValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMeanValue(nodes));
-                var nodeMaxValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMaxValue(nodes));
-
-                // update the currently displayed min/max/mean
-                $('#node-aggregate-statistics').text(nodeMinValue + ' / ' + nodeMaxValue + ' / ' + nodeMeanValue);
-
-                // only consider the cluster with data in the brush
-                var cluster = $.grep(withinBrush, function (d) {
-                    return d.id === config.nifiInstanceId && d.visible && d.values.length > 0;
-                });
-
-                // determine the cluster values
-                var clusterMinValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMinValue(cluster));
-                var clusterMeanValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMeanValue(cluster));
-                var clusterMaxValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMaxValue(cluster));
-
-                // update the cluster min/max/mean
-                $('#cluster-aggregate-statistics').text(clusterMinValue + ' / ' + clusterMaxValue + ' / ' + clusterMeanValue);
-            };
-
-            // ----------------
-            // build the legend
-            // ----------------
-
-            // identify all nodes and sort
-            var nodes = $.grep(statusData, function (status) {
-                return status.id !== config.nifiInstanceId;
-            }).sort(function (a, b) {
-                return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
-            });
-
-            // adds a legend entry for the specified instance
-            var addLegendEntry = function (legend, instance) {
-                // create the label and the checkbox
-                var instanceLabelElement = $('<div></div>').addClass('legend-label nf-checkbox-label').css('color', color(instance.label)).text(instance.label).ellipsis();
-                var instanceCheckboxElement = $('<div class="nf-checkbox"></div>').on('click', function () {
-                    // get the line and the control points for this instance (select all for the line to update control and main charts)
-                    var chartLine = d3.selectAll('path.chart-line-' + instance.id);
-                    var markGroup = d3.select('g.mark-group-' + instance.id);
-
-                    // determine if it was hidden
-                    var isHidden = markGroup.classed('hidden');
-
-                    // toggle the visibility
-                    chartLine.classed('hidden', function () {
-                        return !isHidden;
+    
+                // --------------------
+                // aggregate statistics
+                // --------------------
+    
+                var updateAggregateStatistics = function () {
+                    // locate the instances that have data points within the current brush
+                    var withinBrush = $.map(statusData, function (d) {
+                        var xDomain = x.domain();
+                        var yDomain = y.domain();
+    
+                        // copy to avoid modifying the original
+                        var copy = $.extend({}, d);
+    
+                        // update the copy to only include values within the brush
+                        return $.extend(copy, {
+                            values: $.grep(d.values, function (s) {
+                                return s.timestamp.getTime() >= xDomain[0].getTime() && s.timestamp.getTime() <= xDomain[1].getTime() && s.value >= yDomain[0] && s.value <= yDomain[1];
+                            })
+                        });
                     });
-                    markGroup.classed('hidden', function () {
-                        return !isHidden;
+    
+                    // consider visible nodes with data in the brush
+                    var nodes = $.grep(withinBrush, function (d) {
+                        return d.id !== config.nifiInstanceId && d.visible && d.values.length > 0;
                     });
-
-                    // update whether its visible
-                    instance.visible = isHidden;
-
-                    // record the current status so it persists across refreshes
-                    instances[instance.id] = instance.visible;
-
-                    // update the brush
-                    brushed();
-                }).addClass(instance.visible ? 'checkbox-checked' : 'checkbox-unchecked');
-
-                // add the legend entry
-                $('<div class="legend-entry"></div>').append(instanceCheckboxElement).append(instanceLabelElement).on('mouseenter', function () {
-                    d3.selectAll('path.chart-line-' + instance.id).classed('over', true);
-                }).on('mouseleave', function () {
-                    d3.selectAll('path.chart-line-' + instance.id).classed('over', false);
-                }).appendTo(legend);
-            };
-
-            // get the cluster instance
-            var cluster = $.grep(statusData, function (status) {
-                return status.id === config.nifiInstanceId;
-            });
-
-            // build the cluster container
-            var clusterDetailsContainer = buildDetailsContainer('NiFi');
-
-            // add the total cluster values
-            addDetailItem(clusterDetailsContainer, 'Min / Max / Mean', '', 'cluster-aggregate-statistics');
-
-            // build the cluster legend
-            addLegendEntry(clusterDetailsContainer, cluster[0]);
-
-            // if there are entries to render
-            if (nodes.length > 0) {
+    
+                    var nodeMinValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMinValue(nodes));
+                    var nodeMeanValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMeanValue(nodes));
+                    var nodeMaxValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMaxValue(nodes));
+    
+                    // update the currently displayed min/max/mean
+                    $('#node-aggregate-statistics').text(nodeMinValue + ' / ' + nodeMaxValue + ' / ' + nodeMeanValue);
+    
+                    // only consider the cluster with data in the brush
+                    var cluster = $.grep(withinBrush, function (d) {
+                        return d.id === config.nifiInstanceId && d.visible && d.values.length > 0;
+                    });
+    
+                    // determine the cluster values
+                    var clusterMinValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMinValue(cluster));
+                    var clusterMeanValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMeanValue(cluster));
+                    var clusterMaxValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMaxValue(cluster));
+    
+                    // update the cluster min/max/mean
+                    $('#cluster-aggregate-statistics').text(clusterMinValue + ' / ' + clusterMaxValue + ' / ' + clusterMeanValue);
+                };
+    
+                // ----------------
+                // build the legend
+                // ----------------
+    
+                // identify all nodes and sort
+                var nodes = $.grep(statusData, function (status) {
+                    return status.id !== config.nifiInstanceId;
+                }).sort(function (a, b) {
+                    return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
+                });
+    
+                // adds a legend entry for the specified instance
+                var addLegendEntry = function (legend, instance) {
+                    // create the label and the checkbox
+                  var instanceLabelElement = $('<div></div>').addClass('legend-label nf-checkbox-label').css('color', color(instance.label)).text(instance.label).ellipsis();
+                    var instanceCheckboxElement = $('<div class="nf-checkbox"></div>').on('click', function () {
+                        // get the line and the control points for this instance (select all for the line to update control and main charts)
+                        var chartLine = d3.selectAll('path.chart-line-' + instance.id);
+                        var markGroup = d3.select('g.mark-group-' + instance.id);
+    
+                        // determine if it was hidden
+                        var isHidden = markGroup.classed('hidden');
+    
+                        // toggle the visibility
+                        chartLine.classed('hidden', function () {
+                            return !isHidden;
+                        });
+                        markGroup.classed('hidden', function () {
+                            return !isHidden;
+                        });
+    
+                        // update whether its visible
+                        instance.visible = isHidden;
+    
+                        // record the current status so it persists across refreshes
+                        instances[instance.id] = instance.visible;
+    
+                        // update the brush
+                        brushed();
+                    }).addClass(instance.visible ? 'checkbox-checked' : 'checkbox-unchecked');
+    
+                    // add the legend entry
+                    $('<div class="legend-entry"></div>').append(instanceCheckboxElement).append(instanceLabelElement).on('mouseenter', function () {
+                        d3.selectAll('path.chart-line-' + instance.id).classed('over', true);
+                    }).on('mouseleave', function () {
+                        d3.selectAll('path.chart-line-' + instance.id).classed('over', false);
+                    }).appendTo(legend);
+                };
+    
+                // get the cluster instance
+                var cluster = $.grep(statusData, function (status) {
+                    return status.id === config.nifiInstanceId;
+                });
+    
                 // build the cluster container
-                var nodeDetailsContainer = buildDetailsContainer('Nodes');
-
+                var clusterDetailsContainer = buildDetailsContainer(nf._.msg('nf-status-history.NiFi'));
+    
                 // add the total cluster values
-                addDetailItem(nodeDetailsContainer, 'Min / Max / Mean', '', 'node-aggregate-statistics');
-
-                // add each legend entry
-                $.each(nodes, function (_, instance) {
-                    addLegendEntry(nodeDetailsContainer, instance);
+                addDetailItem(clusterDetailsContainer, nf._.msg('nf-status-history.Min_Max_Mean'), '', 'cluster-aggregate-statistics');
+    
+                // build the cluster legend
+                addLegendEntry(clusterDetailsContainer, cluster[0]);
+    
+                // if there are entries to render
+                if (nodes.length > 0) {
+                    // build the cluster container
+                    var nodeDetailsContainer = buildDetailsContainer('Nodes');
+    
+                    // add the total cluster values
+                    addDetailItem(nodeDetailsContainer, nf._.msg('nf-status-history.Min_Max_Mean'), '', 'node-aggregate-statistics');
+    
+                    // add each legend entry
+                    $.each(nodes, function (_, instance) {
+                        addLegendEntry(nodeDetailsContainer, instance);
+                    });
+                }
+    
+                // update the brush
+                brushed();
+    
+                // ---------------
+                // handle resizing
+                // ---------------
+    
+                var maxWidth, maxHeight, minHeight, resizeExtent, dialog;
+                chartContainer.append('<div class="ui-resizable-handle ui-resizable-se"></div>').resizable({
+                    minWidth: 425,
+                    minHeight: 150,
+                    handles: {
+                        'se': '.ui-resizable-se'
+                    },
+                    start: function (e, ui) {
+                        // record the current extent so it can be reset on stop
+                        if (!brush.empty()) {
+                            resizeExtent = brush.extent();
+                        }
+                    },
+                    resize: function (e, ui) {
+                        // -----------
+                        // containment
+                        // -----------
+                        dialog = $('#status-history-dialog');
+                      var nfDialogData = {};
+                      if (nfCommon.isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                          nfDialogData = dialog.data('nf-dialog');
+                        }
+                      nfDialogData['min-width'] = (dialog.width() / $(window).width()) * 100 + '%';
+                      nfDialogData['min-height'] = (dialog.height() / $(window).height()) * 100 + '%';
+                      nfDialogData.responsive['fullscreen-width'] = dialog.outerWidth() + 'px';
+                      nfDialogData.responsive['fullscreen-height'] = dialog.outerHeight() + 'px';
+    
+                        maxWidth = getChartMaxWidth();
+                        if (ui.helper.width() > maxWidth) {
+                            ui.helper.width(maxWidth);
+    
+                          nfDialogData.responsive['fullscreen-width'] = $(window).width() + 'px';
+                          nfDialogData['min-width'] = '100%';
+                        }
+    
+                        maxHeight = getChartMaxHeight();
+                        if (ui.helper.height() > maxHeight) {
+                            ui.helper.height(maxHeight);
+    
+                          nfDialogData.responsive['fullscreen-height'] = $(window).height() + 'px';
+                          nfDialogData['min-height'] = '100%';
+                        }
+    
+                        minHeight = getChartMinHeight();
+                        if (ui.helper.height() < minHeight) {
+                            ui.helper.height(minHeight);
+                        }
+    
+                      nfDialogData['min-width'] = (parseInt(nfDialogData['min-width'], 10) >= 100) ? '100%' : nfDialogData['min-width'];
+                      nfDialogData['min-height'] = (parseInt(nfDialogData['min-height'], 10) >= 100) ? '100%' : nfDialogData['min-height'];
+    
+                        //persist data attribute
+                      dialog.data('nfDialog', nfDialogData);
+    
+                        // ----------------------
+                        // status history dialog
+                        // ----------------------
+    
+                        dialog.css('min-width', (chartContainer.outerWidth() + $('#status-history-details').outerWidth() + 40));
+                        dialog.css('min-height', (chartContainer.outerHeight() +
+                        $('#status-history-refresh-container').outerHeight() + $('#status-history-chart-control-container').outerHeight() +
+                        $('.dialog-buttons').outerHeight() + $('.dialog-header').outerHeight() + 40 + 5));
+    
+                        dialog.center();
+                    },
+                    stop: updateChart
                 });
             }
-
-            // update the brush
-            brushed();
-
-            // ---------------
-            // handle resizing
-            // ---------------
-
-            var maxWidth, maxHeight, minHeight, resizeExtent, dialog;
-            chartContainer.append('<div class="ui-resizable-handle ui-resizable-se"></div>').resizable({
-                minWidth: 425,
-                minHeight: 150,
-                handles: {
-                    'se': '.ui-resizable-se'
-                },
-                start: function (e, ui) {
-                    // record the current extent so it can be reset on stop
-                    if (!brush.empty()) {
-                        resizeExtent = brush.extent();
-                    }
-                },
-                resize: function (e, ui) {
-                    // -----------
-                    // containment
-                    // -----------
-                    dialog = $('#status-history-dialog');
-                    var nfDialogData = {};
-                    if (nfCommon.isDefinedAndNotNull(dialog.data('nf-dialog'))) {
-                        nfDialogData = dialog.data('nf-dialog');
-                    }
-                    nfDialogData['min-width'] = (dialog.width() / $(window).width()) * 100 + '%';
-                    nfDialogData['min-height'] = (dialog.height() / $(window).height()) * 100 + '%';
-                    nfDialogData.responsive['fullscreen-width'] = dialog.outerWidth() + 'px';
-                    nfDialogData.responsive['fullscreen-height'] = dialog.outerHeight() + 'px';
-
-                    maxWidth = getChartMaxWidth();
-                    if (ui.helper.width() > maxWidth) {
-                        ui.helper.width(maxWidth);
-
-                        nfDialogData.responsive['fullscreen-width'] = $(window).width() + 'px';
-                        nfDialogData['min-width'] = '100%';
-                    }
-
-                    maxHeight = getChartMaxHeight();
-                    if (ui.helper.height() > maxHeight) {
-                        ui.helper.height(maxHeight);
-
-                        nfDialogData.responsive['fullscreen-height'] = $(window).height() + 'px';
-                        nfDialogData['min-height'] = '100%';
-                    }
-
-                    minHeight = getChartMinHeight();
-                    if (ui.helper.height() < minHeight) {
-                        ui.helper.height(minHeight);
-                    }
-
-                    nfDialogData['min-width'] = (parseInt(nfDialogData['min-width'], 10) >= 100) ? '100%' : nfDialogData['min-width'];
-                    nfDialogData['min-height'] = (parseInt(nfDialogData['min-height'], 10) >= 100) ? '100%' : nfDialogData['min-height'];
-
-                    //persist data attribute
-                    dialog.data('nfDialog', nfDialogData);
-
-                    // ----------------------
-                    // status history dialog
-                    // ----------------------
-
-                    dialog.css('min-width', (chartContainer.outerWidth() + $('#status-history-details').outerWidth() + 40));
-                    dialog.css('min-height', (chartContainer.outerHeight() +
-                    $('#status-history-refresh-container').outerHeight() + $('#status-history-chart-control-container').outerHeight() +
-                    $('.dialog-buttons').outerHeight() + $('.dialog-header').outerHeight() + 40 + 5));
-
-                    dialog.center();
-                },
-                stop: updateChart
-            });
-        }
-    };
-
-    /**
-     * Gets the minimum value from the specified instances.
-     *
-     * @param {type} nodeInstances
-     */
-    var getMinValue = function (nodeInstances) {
-        return d3.min(nodeInstances, function (d) {
-            return d3.min(d.values, function (s) {
-                return s.value;
-            });
-        });
-    };
-
-    /**
-     * Gets the maximum value from the specified instances.
-     *
-     * @param {type} nodeInstances
-     */
-    var getMaxValue = function (nodeInstances) {
-        return d3.max(nodeInstances, function (d) {
-            return d3.max(d.values, function (s) {
-                return s.value;
-            });
-        });
-    };
-
-    /**
-     * Gets the mean value from the specified instances.
-     *
-     * @param {type} nodeInstances
-     */
-    var getMeanValue = function (nodeInstances) {
-        var snapshotCount = 0;
-        var totalValue = d3.sum(nodeInstances, function (d) {
-            snapshotCount += d.values.length;
-            return d3.sum(d.values, function (s) {
-                return s.value;
-            });
-        });
-        return totalValue / snapshotCount;
-    };
-
-    /**
-     * Builds a details container.
-     *
-     * @param {type} label
-     */
-    var buildDetailsContainer = function (label) {
-        var detailContainer = $('<div class="status-history-detail"></div>').appendTo('#status-history-details');
-        $('<div class="detail-container-label"></div>').text(label).appendTo(detailContainer);
-        return $('<div></div>').appendTo(detailContainer);
-    };
-
-    /**
-     * Adds a detail item and specified container.
-     *
-     * @param {type} container
-     * @param {type} label
-     * @param {type} value
-     * @param {type} valueElementId
-     */
-    var addDetailItem = function (container, label, value, valueElementId) {
-        var detailContainer = $('<div class="detail-item"></div>').appendTo(container);
-        $('<div class="setting-name"></div>').text(label).appendTo(detailContainer);
-        var detailElement = $('<div class="setting-field"></div>').text(value).appendTo(detailContainer);
-
-        if (nfCommon.isDefinedAndNotNull(valueElementId)) {
-            detailElement.attr('id', valueElementId);
-        }
-    };
-
-    var nfStatusHistory = {
+        };
+    
         /**
-         * Initializes the lineage graph.
+         * Gets the minimum value from the specified instances.
          *
-         * @param {integer} timeOffset The time offset of the server
+         * @param {type} nodeInstances
          */
-        init: function (timeOffset) {
-            serverTimeOffset = timeOffset;
-
-            $('#status-history-refresh-button').click(function () {
-                var statusHistory = $('#status-history-dialog').data('status-history');
-                if (statusHistory !== null) {
-                    if (statusHistory.type === config.type.processor) {
-                        nfStatusHistory.showProcessorChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
-                    } else if (statusHistory.type === config.type.processGroup) {
-                        nfStatusHistory.showProcessGroupChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
-                    } else if (statusHistory.type === config.type.remoteProcessGroup) {
-                        nfStatusHistory.showRemoteProcessGroupChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
-                    } else {
-                        nfStatusHistory.showConnectionChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
-                    }
-                }
-            });
-
-            // configure the dialog and make it draggable
-            $('#status-history-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: "Status History",
-                buttons: [{
-                    buttonText: 'Close',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            this.modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // remove the current status history
-                        $('#status-history-dialog').removeData('status-history');
-
-                        // reset the dom
-                        $('#status-history-chart-container').empty();
-                        $('#status-history-chart-control-container').empty();
-                        $('#status-history-details').empty();
-
-                        // clear the extent and selected descriptor
-                        brushExtent = null;
-                        descriptor = null;
-                        instances = null;
-                    },
-                    open: updateChart
-                }
+        var getMinValue = function (nodeInstances) {
+            return d3.min(nodeInstances, function (d) {
+                return d3.min(d.values, function (s) {
+                    return s.value;
+                });
             });
-
-            $(window).on('resize', function (e) {
-                if (e.target === window) {
-                    updateChart();
-                }
-                nfCommon.toggleScrollable($('#status-history-details').get(0));
-            })
-        },
-
+        };
+    
         /**
-         * Shows the status history for the specified connection in this instance.
+         * Gets the maximum value from the specified instances.
          *
-         * @param {type} groupId
-         * @param {type} connectionId
-         * @param {type} selectedDescriptor
+         * @param {type} nodeInstances
          */
-        showConnectionChart: function (groupId, connectionId, selectedDescriptor) {
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/flow/connections/' + encodeURIComponent(connectionId) + '/status/history',
-                dataType: 'json'
-            }).done(function (response) {
-                handleStatusHistoryResponse(groupId, connectionId, response.statusHistory, config.type.connection, selectedDescriptor);
-            }).fail(nfErrorHandler.handleAjaxError);
-        },
-
+        var getMaxValue = function (nodeInstances) {
+            return d3.max(nodeInstances, function (d) {
+                return d3.max(d.values, function (s) {
+                    return s.value;
+                });
+            });
+        };
+    
         /**
-         * Shows the status history for the specified processor in this instance.
+         * Gets the mean value from the specified instances.
          *
-         * @param {type} groupId
-         * @param {type} processorId
-         * @param {type} selectedDescriptor
+         * @param {type} nodeInstances
          */
-        showProcessorChart: function (groupId, processorId, selectedDescriptor) {
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/flow/processors/' + encodeURIComponent(processorId) + '/status/history',
-                dataType: 'json'
-            }).done(function (response) {
-                handleStatusHistoryResponse(groupId, processorId, response.statusHistory, config.type.processor, selectedDescriptor);
-            }).fail(nfErrorHandler.handleAjaxError);
-        },
-
+        var getMeanValue = function (nodeInstances) {
+            var snapshotCount = 0;
+            var totalValue = d3.sum(nodeInstances, function (d) {
+                snapshotCount += d.values.length;
+                return d3.sum(d.values, function (s) {
+                    return s.value;
+                });
+            });
+            return totalValue / snapshotCount;
+        };
+    
         /**
-         * Shows the status history for the specified process group in this instance.
+         * Builds a details container.
          *
-         * @param {type} groupId
-         * @param {type} processGroupId
-         * @param {type} selectedDescriptor
+         * @param {type} label
          */
-        showProcessGroupChart: function (groupId, processGroupId, selectedDescriptor) {
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupId) + '/status/history',
-                dataType: 'json'
-            }).done(function (response) {
-                handleStatusHistoryResponse(groupId, processGroupId, response.statusHistory, config.type.processGroup, selectedDescriptor);
-            }).fail(nfErrorHandler.handleAjaxError);
-        },
-
+        var buildDetailsContainer = function (label) {
+            var detailContainer = $('<div class="status-history-detail"></div>').appendTo('#status-history-details');
+            $('<div class="detail-container-label"></div>').text(label).appendTo(detailContainer);
+            return $('<div></div>').appendTo(detailContainer);
+        };
+    
         /**
-         * Shows the status history for the specified remote process group in this instance.
+         * Adds a detail item and specified container.
          *
-         * @param {type} groupId
-         * @param {type} remoteProcessGroupId
-         * @param {type} selectedDescriptor
+         * @param {type} container
+         * @param {type} label
+         * @param {type} value
+         * @param {type} valueElementId
          */
-        showRemoteProcessGroupChart: function (groupId, remoteProcessGroupId, selectedDescriptor) {
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/flow/remote-process-groups/' + encodeURIComponent(remoteProcessGroupId) + '/status/history',
-                dataType: 'json'
-            }).done(function (response) {
-                handleStatusHistoryResponse(groupId, remoteProcessGroupId, response.statusHistory, config.type.remoteProcessGroup, selectedDescriptor);
-            }).fail(nfErrorHandler.handleAjaxError);
-        }
-    };
-
-    return nfStatusHistory;
-}));
\ No newline at end of file
+        var addDetailItem = function (container, label, value, valueElementId) {
+            var detailContainer = $('<div class="detail-item"></div>').appendTo(container);
+            $('<div class="setting-name"></div>').text(label).appendTo(detailContainer);
+            var detailElement = $('<div class="setting-field"></div>').text(value).appendTo(detailContainer);
+    
+          if (nfCommon.isDefinedAndNotNull(valueElementId)) {
+                detailElement.attr('id', valueElementId);
+            }
+        };
+    
+      var nfStatusHistory = {
+            /**
+             * Initializes the lineage graph.
+             *
+             * @param {integer} timeOffset The time offset of the server
+             */
+            init: function (timeOffset) {
+                serverTimeOffset = timeOffset;
+    
+                $('#status-history-refresh-button').click(function () {
+                    var statusHistory = $('#status-history-dialog').data('status-history');
+                    if (statusHistory !== null) {
+                        if (statusHistory.type === config.type.processor) {
+                          nfStatusHistory.showProcessorChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
+                        } else if (statusHistory.type === config.type.processGroup) {
+                          nfStatusHistory.showProcessGroupChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
+                        } else if (statusHistory.type === config.type.remoteProcessGroup) {
+                          nfStatusHistory.showRemoteProcessGroupChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
+                        } else {
+                          nfStatusHistory.showConnectionChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
+                        }
+                    }
+                });
+    
+                // configure the dialog and make it draggable
+                $('#status-history-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                    headerText: nf._.msg('nf-status-history.StatusHistory'),
+                    buttons: [{
+                        buttonText: nf._.msg('nf-status-history.Close'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                this.modal('hide');
+                            }
+                        }
+                    }],
+                    handler: {
+                        close: function () {
+                            // remove the current status history
+                            $('#status-history-dialog').removeData('status-history');
+    
+                            // reset the dom
+                            $('#status-history-chart-container').empty();
+                            $('#status-history-chart-control-container').empty();
+                            $('#status-history-details').empty();
+    
+                            // clear the extent and selected descriptor
+                            brushExtent = null;
+                            descriptor = null;
+                            instances = null;
+                        },
+                        open: updateChart
+                    }
+                });
+    
+                $(window).on('resize', function (e) {
+                    if (e.target === window) {
+                        updateChart();
+                    }
+                  nfCommon.toggleScrollable($('#status-history-details').get(0));
+                })
+            },
+    
+            /**
+             * Shows the status history for the specified connection in this instance.
+             *
+             * @param {type} groupId
+             * @param {type} connectionId
+             * @param {type} selectedDescriptor
+             */
+            showConnectionChart: function (groupId, connectionId, selectedDescriptor) {
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.api + '/flow/connections/' + encodeURIComponent(connectionId) + '/status/history',
+                    dataType: 'json'
+                }).done(function (response) {
+                    handleStatusHistoryResponse(groupId, connectionId, response.statusHistory, config.type.connection, selectedDescriptor);
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows the status history for the specified processor in this instance.
+             *
+             * @param {type} groupId
+             * @param {type} processorId
+             * @param {type} selectedDescriptor
+             */
+            showProcessorChart: function (groupId, processorId, selectedDescriptor) {
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.api + '/flow/processors/' + encodeURIComponent(processorId) + '/status/history',
+                    dataType: 'json'
+                }).done(function (response) {
+                    handleStatusHistoryResponse(groupId, processorId, response.statusHistory, config.type.processor, selectedDescriptor);
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows the status history for the specified process group in this instance.
+             *
+             * @param {type} groupId
+             * @param {type} processGroupId
+             * @param {type} selectedDescriptor
+             */
+            showProcessGroupChart: function (groupId, processGroupId, selectedDescriptor) {
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupId) + '/status/history',
+                    dataType: 'json'
+                }).done(function (response) {
+                    handleStatusHistoryResponse(groupId, processGroupId, response.statusHistory, config.type.processGroup, selectedDescriptor);
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows the status history for the specified remote process group in this instance.
+             *
+             * @param {type} groupId
+             * @param {type} remoteProcessGroupId
+             * @param {type} selectedDescriptor
+             */
+            showRemoteProcessGroupChart: function (groupId, remoteProcessGroupId, selectedDescriptor) {
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.api + '/flow/remote-process-groups/' + encodeURIComponent(remoteProcessGroupId) + '/status/history',
+                    dataType: 'json'
+                }).done(function (response) {
+                    handleStatusHistoryResponse(groupId, remoteProcessGroupId, response.statusHistory, config.type.remoteProcessGroup, selectedDescriptor);
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+    
+      return nfStatusHistory;
+  }));
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 28ef92f70303..22e82eeec159 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
@@ -1,1423 +1,1423 @@
-/*
- * 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 top, define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.ErrorHandler'],
-            function ($, d3, nfCommon, nfDialog, nfErrorHandler) {
-                return (nf.ng.ProvenanceLineage = factory($, d3, nfCommon, nfDialog, nfErrorHandler));
-            });
-    } 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, nfCommon, nfDialog, nfErrorHandler) {
-    'use strict';
-
-    var mySelf = function () {
-        'use strict';
-
-        /**
-         * Configuration object used to hold a number of configuration items.
-         */
-        var config = {
-            sliderTickCount: 75,
-            urls: {
-                lineage: '../nifi-api/provenance/lineage'
-
-            }
-        };
-
-        /**
-         * Initializes the lineage query dialog.
-         */
-        var initLineageQueryDialog = function () {
-            // initialize the dialog
-            $('#lineage-query-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: 'Computing FlowFile 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"});
-
-                if (window.navigator.msSaveOrOpenBlob) {
-                    window.navigator.msSaveOrOpenBlob(svg, fileName);
-                } else {
-                    var url = DOMURL.createObjectURL(svg);
-                    link.href = url;
-                    link.download = fileName;
-                    link.click();
+    /*
+     * 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 top, define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.ErrorHandler'],
+              function ($, d3, nfCommon, nfDialog, nfErrorHandler) {
+                  return (nf.ng.ProvenanceLineage = factory($, d3, nfCommon, nfDialog, nfErrorHandler));
+              });
+      } 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, nfCommon, nfDialog, nfErrorHandler) {
+      'use strict';
+  
+      var mySelf = function () {
+            'use strict';
+    
+            /**
+             * Configuration object used to hold a number of configuration items.
+             */
+            var config = {
+                sliderTickCount: 75,
+                urls: {
+                  lineage: '../nifi-api/provenance/lineage'
+  
                 }
-            } 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 = $('<div class="context-menu-item"></div>').on('click', item.click).on('mouseenter', function () {
-                        $(this).addClass('hover');
-                    }).on('mouseleave', function () {
-                        $(this).removeClass('hover');
-                    }).appendTo(contextMenu);
-
-                    // add the img and the text
-                    $('<div class="context-menu-item-img"></div>').addClass(item['class']).appendTo(menuItem);
-                    $('<div class="context-menu-item-text"></div>').text(item['text']).appendTo(menuItem);
-                    $('<div class="clear"></div>').appendTo(menuItem);
+            };
+    
+            /**
+             * Initializes the lineage query dialog.
+             */
+            var initLineageQueryDialog = function () {
+                // initialize the dialog
+                $('#lineage-query-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                    headerText: nf._.msg('nf-provenance-lineage.Message1')
+                });
+          };
+  
+          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 {
+                  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 = $('<div class="context-menu-item"></div>').on('click', item.click).on('mouseenter', function () {
+                            $(this).addClass('hover');
+                        }).on('mouseleave', function () {
+                            $(this).removeClass('hover');
+                        }).appendTo(contextMenu);
+    
+                        // add the img and the text
+                        $('<div class="context-menu-item-img"></div>').addClass(item['class']).appendTo(menuItem);
+                        $('<div class="context-menu-item-text"></div>').text(item['text']).appendTo(menuItem);
+                        $('<div class="clear"></div>').appendTo(menuItem);
+                    }
+                });
+            };
+    
+            /**
+             * Submits the specified lineage request.
+             *
+             * @param {type} lineageRequest
+             * @returns {deferred}
+             */
+            var submitLineage = function (lineageRequest) {
+                var lineageEntity = {
+                    'lineage': {
+                        'request': lineageRequest
+                    }
+                };
+    
+                return $.ajax({
+                    type: 'POST',
+                    url: config.urls.lineage,
+                    data: JSON.stringify(lineageEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            /**
+             * Gets the specified lineage.
+             *
+             * @param {type} lineage
+             * @returns {deferred}
+             */
+            var getLineage = function (lineage) {
+                var url = lineage.uri;
+              if (nfCommon.isDefinedAndNotNull(lineage.request.clusterNodeId)) {
+                    url += '?' + $.param({
+                            clusterNodeId: lineage.request.clusterNodeId
+                        });
                 }
-            });
-        };
-
-        /**
-         * Submits the specified lineage request.
-         *
-         * @param {type} lineageRequest
-         * @returns {deferred}
-         */
-        var submitLineage = function (lineageRequest) {
-            var lineageEntity = {
-                'lineage': {
-                    'request': lineageRequest
+    
+                return $.ajax({
+                    type: 'GET',
+                    url: url,
+                    dataType: 'json'
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            /**
+             * Cancels the specified lineage.
+             *
+             * @param {type} lineage
+             * @returns {deferred}
+             */
+            var cancelLineage = function (lineage) {
+                var url = lineage.uri;
+              if (nfCommon.isDefinedAndNotNull(lineage.request.clusterNodeId)) {
+                    url += '?' + $.param({
+                            clusterNodeId: lineage.request.clusterNodeId
+                        });
                 }
+    
+                return $.ajax({
+                    type: 'DELETE',
+                    url: url,
+                    dataType: 'json'
+              }).fail(nfErrorHandler.handleAjaxError);
             };
-
-            return $.ajax({
-                type: 'POST',
-                url: config.urls.lineage,
-                data: JSON.stringify(lineageEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).fail(nfErrorHandler.handleAjaxError);
-        };
-
-        /**
-         * Gets the specified lineage.
-         *
-         * @param {type} lineage
-         * @returns {deferred}
-         */
-        var getLineage = function (lineage) {
-            var url = lineage.uri;
-            if (nfCommon.isDefinedAndNotNull(lineage.request.clusterNodeId)) {
-                url += '?' + $.param({
-                        clusterNodeId: lineage.request.clusterNodeId
+    
+            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 (nfCommon.isUndefined(depth)) {
+                            locateDescendants(children, descendants);
+                        } else if (depth > 1) {
+                            locateDescendants(children, descendants, depth - 1);
+                        }
                     });
-            }
-
-            return $.ajax({
-                type: 'GET',
-                url: url,
-                dataType: 'json'
-            }).fail(nfErrorHandler.handleAjaxError);
-        };
-
-        /**
-         * Cancels the specified lineage.
-         *
-         * @param {type} lineage
-         * @returns {deferred}
-         */
-        var cancelLineage = function (lineage) {
-            var url = lineage.uri;
-            if (nfCommon.isDefinedAndNotNull(lineage.request.clusterNodeId)) {
-                url += '?' + $.param({
-                        clusterNodeId: lineage.request.clusterNodeId
+                };
+    
+                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);
                     });
-            }
-
-            return $.ajax({
-                type: 'DELETE',
-                url: url,
-                dataType: 'json'
-            }).fail(nfErrorHandler.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);
+    
+                    // 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++;
+                        }
                     });
-
-                    if (nfCommon.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) {
+    
+                    // 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;
+    
+                    // 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;
+    
+                            // 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;
+    
+                            // type of node
+                            if (oneNode.type !== twoNode.type) {
+                                return oneNode.type > twoNode.type ? 1 : -1;
                             }
-                        }
-
-                        // 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;
+    
+                            // type of event
+                            if (oneNode.eventType !== twoNode.eventType) {
+                                return oneNode.eventType > twoNode.eventType ? 1 : -1;
                             }
-                        }
-
-                        // 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;
+    
+                            // 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;
+                                }
                             }
-                        } 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;
-                        }
+    
+                            // 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;
+                        });
                     }
-
-                    // evenly space the nodes under the origin
-                    node.x = (i * DEFAULT_NODE_SPACING) + originX - (depthWidth / 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;
-                });
-
-                // 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;
-
-                    if (difference < DEFAULT_NODE_SPACING) {
-                        second.x += (DEFAULT_NODE_SPACING - difference);
+    
+                    var originX = width / 2;
+                    if (parents.length > 0) {
+                        originX = d3.mean(parents, function (parentId) {
+                            var parent = nodeLookup.get(parentId);
+                            return parent.x;
+                        });
                     }
-                }
-
-                // if there are children to position
-                if (children.length > 0) {
-                    var childLevelDifference = DEFAULT_LEVEL_DIFFERENCE / 3;
-
-                    // 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;
+    
+                        // 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);
                     });
-
-                    // 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
+    
+                    // 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;
                     });
-
-                    // 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 (nfCommon.isUndefined(minMillis) || minMillis > node.millis) {
-                        minMillis = node.millis;
-                        minTimestamp = node.timestamp;
+    
+                    // 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;
+    
+                        if (difference < DEFAULT_NODE_SPACING) {
+                            second.x += (DEFAULT_NODE_SPACING - difference);
+                        }
                     }
-                    if (nfCommon.isUndefined(maxMillis) || maxMillis < node.millis) {
-                        maxMillis = node.millis;
+    
+                    // if there are children to position
+                    if (children.length > 0) {
+                        var childLevelDifference = DEFAULT_LEVEL_DIFFERENCE / 3;
+    
+                        // 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;
+                        $.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);
                     }
-                });
-
-                // 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 > 0 ? step : 1).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 nfCommon.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 + ')';
+                };
+    
+                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);
                     });
-                });
-
-            // 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();
-
-                    // prevents browser from using text cursor
-                    d3.event.preventDefault();
-                })
-                .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;
+    
+                    // 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 (nfCommon.isUndefined(minMillis) || minMillis > node.millis) {
+                            minMillis = node.millis;
+                            minTimestamp = node.timestamp;
                         }
-                    },
-                    'refY': 0,
-                    'markerWidth': 6,
-                    'markerHeight': 6,
-                    'orient': 'auto',
-                    'fill': function (d) {
-                        if (d.indexOf('SELECTED') >= 0) {
-                            return '#ba554a';
-                        } else {
-                            return '#000000';
+                      if (nfCommon.isUndefined(maxMillis) || maxMillis < node.millis) {
+                            maxMillis = node.millis;
                         }
-                    }
-                })
-                .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;
+    
+                    // 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);
                     });
-
-                    // 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;
+    
+                    // 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 > 0 ? step : 1).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 nfCommon.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 + ')';
+                        });
                     });
-
-                    // 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({
-                change: slide,
-                slide: slide
-            });
-
-            // renders flowfile nodes
-            var renderFlowFile = function (flowfiles) {
-                flowfiles
-                    .classed('flowfile', true)
+    
+                // 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) {
-                        d3.event.stopPropagation();
-                    });
-
-                // node
-                flowfiles.append('circle')
-                    .attr({
-                        'r': 16,
-                        'fill': '#fff',
-                        'stroke': '#000',
-                        'stroke-width': 1.0
+                        // hide the context menu if necessary
+                        d3.selectAll('circle.context').classed('context', false);
+                        $('#provenance-lineage-context-menu').hide().empty();
+    
+                      // prevents browser from using text cursor
+                      d3.event.preventDefault();
                     })
-                    .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 + ')';
-                            });
+                    .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();
                     });
-
-                var icon = flowfiles.append('g')
+    
+                svg.append('rect')
                     .attr({
-                        'class': 'flowfile-icon',
-                        'transform': function (d) {
-                            return 'translate(-9,-9)';
-                        }
-                    }).append('text')
+                        'width': '100%',
+                        'height': '100%',
+                        'fill': '#f9fafb'
+                    });
+    
+                svg.append('defs').selectAll('marker')
+                    .data(['FLOWFILE', 'FLOWFILE-SELECTED', 'EVENT', 'EVENT-SELECTED'])
+                    .enter().append('marker')
                     .attr({
-                        'font-family': 'flowfont',
-                        'font-size': '18px',
-                        'fill': '#ad9897',
-                        'transform': function (d) {
-                            return 'translate(0,15)';
+                        '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';
+                            }
                         }
                     })
-                    .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';
+                    .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'
                     });
-            };
-
-            var showContextMenu = function (d, provenanceTableCtrl) {
-                // 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);
+    
+                // 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);
                     }
-                }];
-
-                // 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');
-
-
-                        // 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 (nfCommon.isDefinedAndNotNull(lineage)) {
-                                cancelLineage(lineage);
+    
+                    // 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({
+                    change: slide,
+                    slide: slide
+                });
+    
+                // renders flowfile nodes
+                var renderFlowFile = function (flowfiles) {
+                  flowfiles
+                      .classed('flowfile', true)
+                      .on('mousedown', function (d) {
+                          d3.event.stopPropagation();
+                      });
+    
+                    // node
+                    flowfiles.append('circle')
+                        .attr({
+                            'r': 16,
+                            'fill': '#fff',
+                            'stroke': '#000',
+                            'stroke-width': 1.0
+                        })
+                        .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)';
                             }
-
-                            // close the dialog
-                            $('#lineage-query-dialog').modal('hide');
-                        };
-
-                        // 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;
+                        }).append('text')
+                        .attr({
+                            'font-family': 'flowfont',
+                            'font-size': '18px',
+                            'fill': '#ad9897',
+                            'transform': function (d) {
+                                return 'translate(0,15)';
                             }
-
-                            // close the dialog if the results contain an error
-                            if (!nfCommon.isEmpty(lineage.results.errors)) {
-                                var errors = lineage.results.errors;
-                                nfDialog.showOkDialog({
-                                    headerText: 'Process Lineage',
-                                    dialogContent: nfCommon.formatUnorderedList(errors)
+                        })
+                        .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)';
                                 });
-
-                                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
-                                    nfDialog.showOkDialog({
-                                        headerText: 'Lineage Results',
-                                        dialogContent: 'The lineage search has completed successfully but there no results were found. The events may have aged off.'
-                                    });
+                        })
+                        .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';
+                      });
+              };
+  
+              var showContextMenu = function (d, provenanceTableCtrl) {
+                    // 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: nf._.msg('nf-provenance-lineage.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();
+                                        }
+                                    }
                                 }
-
-                                // 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, if its not done computing wait 1 second before checking again
-                            processLineage(1);
-                        }).fail(closeDialog);
-                    };
-
-                    // handles updating the lineage graph
-                    var renderEventLineage = function (lineageResults) {
-                        addLineage(lineageResults.nodes, lineageResults.links, provenanceTableCtrl);
-                    };
-
-                    // 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);
-
-                            // 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;
+                            }]).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 (nfCommon.isDefinedAndNotNull(lineage)) {
+                                    cancelLineage(lineage);
                                 }
+    
+                                // close the dialog
+                                $('#lineage-query-dialog').modal('hide');
+                            };
+    
+                            // polls for the event lineage
+                          var pollLineage = function () {
+                                getLineage(lineage).done(function (response) {
+                                    lineage = response.lineage;
+    
+                                  // process the lineage
+                                  processLineage();
+                                }).fail(closeDialog);
                             };
-
-                            // 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;
+    
+                            // 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 (!nfCommon.isEmpty(lineage.results.errors)) {
+                                    var errors = lineage.results.errors;
+                                  nfDialog.showOkDialog({
+                                         headerText: nf._.msg('nf-provenance-lineage.Process Lineage'),
+                                         dialogContent: nfCommon.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
+                                      nfDialog.showOkDialog({
+                                             headerText: nf._.msg('nf-provenance-lineage.Lineage Results'),
+                                             dialogContent: nf._.msg('nf-provenance-lineage.Message2')
+                                        });
+                                    }
+    
+                                    // close the searching.. dialog
+                                    closeDialog();
                                 } else {
-                                    return link.flowFileUuid !== eventUuid;
+                                    lineageTimer = setTimeout(function () {
+                                        // clear the timer since we've been invoked
+                                        lineageTimer = null;
+    
+                                        // for the lineage
+                                      pollLineage();
+                                  }, 2000);
                                 }
                             };
-
-                            // the event is fan in if the flowfile uuid is in the children
-                            var fanIn = $.inArray(eventUuid, provenanceEvent.childUuids) >= 0;
-
-                            // collapses the specified uuids
-                            var collapse = function (uuids) {
-                                var newUuids = false;
-
-                                // 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);
+    
+                            // once the query is submitted wait until its finished
+                            submitLineage(lineageRequest).done(function (response) {
+                                lineage = response.lineage;
+    
+                                // process the lineage, if its not done computing wait 1 second before checking again
+                                processLineage(1);
+                            }).fail(closeDialog);
+                        };
+    
+                        // handles updating the lineage graph
+                        var renderEventLineage = function (lineageResults) {
+                            addLineage(lineageResults.nodes, lineageResults.links, provenanceTableCtrl);
+                        };
+    
+                        // 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);
+    
+                                // 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;
+                                    }
+                                };
+    
+                                // 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;
+                                    }
+                                };
+    
+                                // the event is fan in if the flowfile uuid is in the children
+                                var fanIn = $.inArray(eventUuid, provenanceEvent.childUuids) >= 0;
+    
+                                // collapses the specified uuids
+                                var collapse = function (uuids) {
+                                    var newUuids = false;
+    
+                                    // 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);
+                                                    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;
                                             }
-                                        });
-                                    }
-                                });
-
-                                // 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': nf._.msg('nf-provenance-lineage.Find parents'),
+                            'click': function () {
+                                expandLineage({
+                                    lineageRequestType: 'PARENTS',
+                                    eventId: d.id,
+                                    clusterNodeId: clusterNodeId
                                 });
-
-                                // collapse any related uuids
-                                if (newUuids) {
-                                    collapse(uuids);
+                            }
+                        }, {
+                            'class': 'lineage-view-children',
+                            'text': nf._.msg('nf-provenance-lineage.Expand'),
+                            'click': function () {
+                                expandLineage({
+                                    lineageRequestType: 'CHILDREN',
+                                    eventId: d.id,
+                                    clusterNodeId: clusterNodeId
+                                });
+                            }
+                        }, {
+                            'class': 'lineage-collapse-children',
+                            'text': nf._.msg('nf-provenance-lineage.Collapse'),
+                            'click': function () {
+                                // collapse the children lineage
+                                collapseLineage(d.id, provenanceTableCtrl);
+                            }
+                        });
+                    }
+    
+                    // show the context menu for an event
+                    addContextMenuItems(menuItems);
+              };
+  
+              // renders event nodes
+              var renderEvent = function (events, provenanceTableCtrl) {
+                  events
+                      .on('contextmenu', function (d) {
+                          // select the current node for a visible cue
+                          d3.select('#event-node-' + d.id).classed('context', true);
+  
+                          // show the context menu
+                          showContextMenu(d, provenanceTableCtrl);
+                      })
+                      .on('mousedown', function (d) {
+                          d3.event.stopPropagation();
+                      });
+  
+                  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;
+                          }
+                        });
+    
+                    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');
                                 }
-                            };
-
-                            // collapse the specified uuids
-                            collapse(eventUuids);
-
-                            // update the layout
-                            refresh(provenanceTableCtrl);
+                                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
+                                });
+                            }
                         });
-                    };
-
-                    // 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);
-            };
-
-            // renders event nodes
-            var renderEvent = function (events, provenanceTableCtrl) {
-                events
-                    .on('contextmenu', function (d) {
-                        // select the current node for a visible cue
-                        d3.select('#event-node-' + d.id).classed('context', true);
-
-                        // show the context menu
-                        showContextMenu(d, provenanceTableCtrl);
-                    })
-                    .on('mousedown', function (d) {
-                        d3.event.stopPropagation();
-                    });
-
-                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;
-                        }
+                };
+    
+                // updates the ui
+                var update = function (provenanceTableCtrl) {
+                    // update the node data
+                    nodes = nodes.data(nodeLookup.values(), function (d) {
+                        return d.id;
                     });
-
-                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');
+    
+                    // 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 {
-                                lines.push('ATTRIBUTES');
+                                return 'translate(' + d.incoming[0].source.x + ',' + d.incoming[0].source.y + ')';
                             }
-                            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
-                            });
-                        }
+                        })
+                        .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;
                     });
-            };
-
-            // 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) {
+    
+                    // 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);
-
-                // 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();
+                        })
+                        .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);
             };
-
-            // 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(/<path([^>]*?)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 '<path' + before + 'd="M' + moveX + ',' + moveY + 'L' + lineX + ',' + lineY + '"' + after + '>';
+    
+            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();
                     });
-
-                    // adjust node positioning based on the offset of the bounding box
-                    svg = svg.replace(/<g([^>]*?)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;
+    
+                  $('#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(/<path([^>]*?)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 '<path' + before + 'd="M' + moveX + ',' + moveY + 'L' + lineX + ',' + lineY + '"' + after + '>';
+                      });
+  
+                      // adjust node positioning based on the offset of the bounding box
+                      svg = svg.replace(/<g([^>]*?)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 '<g' + before + 'transform="translate(' + x + ',' + y + ')"' + after + '>';
+                      });
+  
+                      // namespaces
+                      svg = svg.replace(/<svg ([^>]*)/, 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 = '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\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: nf._.msg('nf-provenance-lineage.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();
+                                }
+                            }
                         }
-
-                        var x = parseFloat(rawX) - offsetX;
-                        var y = parseFloat(rawY) - offsetY;
-                        return '<g' + before + 'transform="translate(' + x + ',' + y + ')"' + after + '>';
-                    });
-
-                    // namespaces
-                    svg = svg.replace(/<svg ([^>]*)/, 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;
+                    }]).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 (nfCommon.isDefinedAndNotNull(lineage)) {
+                            cancelLineage(lineage);
                         }
-
-                        if (svgString.indexOf(nsXlink) === -1) {
-                            svgString += nsXlink;
+    
+                        // 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;
                         }
-
-                        if (svgString.indexOf(version) === -1) {
-                            svgString += version;
+    
+                        // close the dialog if the results contain an error
+                      if (!nfCommon.isEmpty(lineage.results.errors)) {
+                            var errors = lineage.results.errors;
+                          nfDialog.showOkDialog({
+                            headerText: nf._.msg('nf-provenance-lineage.Process Lineage'),
+                            dialogContent: nfCommon.formatUnorderedList(errors)
+                            });
+    
+                            closeDialog();
+                            return;
                         }
-
-                        return svgString;
-                    });
-
-                    // doctype
-                    svg = '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\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();
-                            }
+    
+                        // 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);
                         }
-                    }
-                }]).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 (nfCommon.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) {
+                    };
+    
+                    // once the query is submitted wait until its finished
+                    submitLineage(lineageRequest).done(function (response) {
                         lineage = response.lineage;
-
-                        // process the lineage
-                        processLineage(provenanceTableCtrl);
+    
+                        // process the results, if they are not done wait 1 second before trying again
+                      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 (!nfCommon.isEmpty(lineage.results.errors)) {
-                        var errors = lineage.results.errors;
-                        nfDialog.showOkDialog({
-                            headerText: 'Process Lineage',
-                            dialogContent: nfCommon.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
+    
+            var provenanceLineageCtrl = new ProvenanceLineageCtrl();
+            return provenanceLineageCtrl;
+        };
+    
+      return mySelf;
+  }));
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 1ae4c1d01c65..371be34540ef 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
@@ -1,1514 +1,1514 @@
-/*
- * 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 top, define, module, require, exports */
-
-(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, nfCommon, nfDialog, nfErrorHandler, nfStorage, nfNgBridge) {
-                return (nf.ng.ProvenanceTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler, nfStorage, nfNgBridge));
-            });
-    } 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, nfCommon, nfDialog, nfErrorHandler, nfStorage, nfNgBridge) {
-    'use strict';
-
-    var nfProvenanceTable = function (provenanceLineageCtrl) {
-        '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'
-            }
-        };
-
-        /**
-         * 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
-            nfCommon.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
-                var parameters = {};
-
-                // conditionally include the ui extension token
-                if (!nfCommon.isBlank(downloadToken)) {
-                    parameters['access_token'] = downloadToken;
-                }
-
-                // conditionally include the cluster node id
-                var clusterNodeId = $('#provenance-event-cluster-node-id').text();
-                if (!nfCommon.isBlank(clusterNodeId)) {
-                    parameters['clusterNodeId'] = clusterNodeId;
-                }
-
-                // open the url
-                if ($.isEmptyObject(parameters)) {
-                    window.open(dataUri);
-                } else {
-                    window.open(dataUri + '?' + $.param(parameters));
+    /*
+     * 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 top, define, module, require, exports */
+  
+  (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, nfCommon, nfDialog, nfErrorHandler, nfStorage, nfNgBridge) {
+                  return (nf.ng.ProvenanceTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler, nfStorage, nfNgBridge));
+              });
+      } 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, nfCommon, nfDialog, nfErrorHandler, nfStorage, nfNgBridge) {
+      'use strict';
+  
+      var nfProvenanceTable = function (provenanceLineageCtrl) {
+            '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'
                 }
-            }).fail(function () {
-                nfDialog.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();
-
-            // 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 (nfStorage.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
+            };
+    
+            /**
+             * 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
+              nfCommon.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
+                    var parameters = {};
+    
+                    // conditionally include the ui extension token
+                  if (!nfCommon.isBlank(downloadToken)) {
+                        parameters['access_token'] = downloadToken;
+                    }
+    
+                    // conditionally include the cluster node id
+                    var clusterNodeId = $('#provenance-event-cluster-node-id').text();
+                  if (!nfCommon.isBlank(clusterNodeId)) {
+                        parameters['clusterNodeId'] = clusterNodeId;
+                    }
+    
+                    // open the url
+                    if ($.isEmptyObject(parameters)) {
+                        window.open(dataUri);
+                    } else {
+                        window.open(dataUri + '?' + $.param(parameters));
+                    }
+                }).fail(function () {
+                  nfDialog.showOkDialog({
+                    headerText: nf._.msg('nf-provenance-table.Provenance'),
+                    dialogContent: nf._.msg('nf-provenance-table.Message8')
                     });
-
-                    // 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 () {
-                        nfDialog.showOkDialog({
-                            headerText: 'Provenance',
-                            dialogContent: 'Unable to generate access token for viewing 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();
+    
+                // 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 (nfStorage.hasItem('jwt')) {
+                        // generate a token for the ui extension and another for the callback
+                        var uiExtensionToken = $.ajax({
+                            type: 'POST',
+                            url: config.urls.uiExtensionToken
                         });
-                        deferred.reject();
-                    });
-                } else {
-                    deferred.resolve('', '');
-                }
-            }).promise();
-
-            // perform the request after we've received the tokens
-            getAccessTokens.done(function (uiExtensionToken, downloadToken) {
-                var dataUriParameters = {};
-
-                // conditionally include the cluster node id
-                var clusterNodeId = $('#provenance-event-cluster-node-id').text();
-                if (!nfCommon.isBlank(clusterNodeId)) {
-                    dataUriParameters['clusterNodeId'] = clusterNodeId;
-                }
-
-                // include the download token if applicable
-                if (!nfCommon.isBlank(downloadToken)) {
-                    dataUriParameters['access_token'] = downloadToken;
-                }
-
-                // include parameters if necessary
-                if ($.isEmptyObject(dataUriParameters) === false) {
-                    dataUri = dataUri + '?' + $.param(dataUriParameters);
-                }
-
-                // open the content viewer
-                var contentViewerUrl = $('#nifi-content-viewer-url').text();
-
-                // 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 += '&';
-                }
-
-                var contentViewerParameters = {
-                    'ref': dataUri
-                };
-
-                // include the download token if applicable
-                if (!nfCommon.isBlank(uiExtensionToken)) {
-                    contentViewerParameters['access_token'] = uiExtensionToken;
-                }
-
-                // open the content viewer
-                window.open(contentViewerUrl + $.param(contentViewerParameters));
-            });
-        };
-
-        /**
-         * 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');
-                        }
+                        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 () {
+                          nfDialog.showOkDialog({
+                            headerText: nf._.msg('nf-provenance-table.Provenance'),
+                            dialogContent: nf._.msg('nf-provenance-table.Message7')
+                            });
+                            deferred.reject();
+                        });
+                    } else {
+                        deferred.resolve('', '');
                     }
-                }],
-                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 () {
-                        nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                }).promise();
+    
+                // perform the request after we've received the tokens
+                getAccessTokens.done(function (uiExtensionToken, downloadToken) {
+                    var dataUriParameters = {};
+    
+                    // conditionally include the cluster node id
+                    var clusterNodeId = $('#provenance-event-cluster-node-id').text();
+                  if (!nfCommon.isBlank(clusterNodeId)) {
+                        dataUriParameters['clusterNodeId'] = clusterNodeId;
                     }
-                }
-            });
-
-            // 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 (nfCommon.isContentViewConfigured()) {
-                // input view
-                $('#input-content-view').on('click', function () {
-                    viewContent('input');
+    
+                    // include the download token if applicable
+                  if (!nfCommon.isBlank(downloadToken)) {
+                        dataUriParameters['access_token'] = downloadToken;
+                    }
+    
+                    // include parameters if necessary
+                    if ($.isEmptyObject(dataUriParameters) === false) {
+                        dataUri = dataUri + '?' + $.param(dataUriParameters);
+                    }
+    
+                    // open the content viewer
+                    var contentViewerUrl = $('#nifi-content-viewer-url').text();
+    
+                    // 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 += '&';
+                    }
+    
+                    var contentViewerParameters = {
+                        'ref': dataUri
+                    };
+    
+                    // include the download token if applicable
+                  if (!nfCommon.isBlank(uiExtensionToken)) {
+                        contentViewerParameters['access_token'] = uiExtensionToken;
+                    }
+    
+                    // open the content viewer
+                    window.open(contentViewerUrl + $.param(contentViewerParameters));
                 });
-
-                // output view
-                $('#output-content-view').on('click', function () {
-                    viewContent('output');
+            };
+    
+            /**
+             * Initializes the details dialog.
+             */
+            var initDetailsDialog = function () {
+                // initialize the properties tabs
+                $('#event-details-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                        name: nf._.msg('nf-provenance-table.Details'),
+                        tabContentId: 'event-details-tab-content'
+                    }, {
+                        name: nf._.msg('nf-provenance-table.Attributes'),
+                        tabContentId: 'attributes-tab-content'
+                    }, {
+                        name: nf._.msg('nf-provenance-table.Content'),
+                        tabContentId: 'content-tab-content'
+                    }]
                 });
-            }
-
-            // handle the replay and downloading
-            $('#replay-content').on('click', function () {
-                var replayEntity = {
-                    'eventId': $('#provenance-event-id').text()
-                };
-
-                // conditionally include the cluster node id
-                var clusterNodeId = $('#provenance-event-cluster-node-id').text();
-                if (!nfCommon.isBlank(clusterNodeId)) {
-                    replayEntity['clusterNodeId'] = clusterNodeId;
-                }
-
-                $.ajax({
-                    type: 'POST',
-                    url: config.urls.replays,
-                    data: JSON.stringify(replayEntity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    nfDialog.showOkDialog({
-                        headerText: 'Provenance',
-                        dialogContent: 'Successfully submitted replay request.'
-                    });
-                }).fail(nfErrorHandler.handleAjaxError);
-
-                $('#event-details-dialog').modal('hide');
-            });
-
-            // show the replay panel
-            $('#replay-details').show();
-        };
-
-        /**
-         * 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(nfErrorHandler.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',
+    
+                $('#event-details-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                    headerText: nf._.msg('nf-provenance-table.ProvenanceEvent'),
+                    buttons: [{
+                        buttonText: nf._.msg('nf-provenance-table.Ok'),
                         color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
                         },
                         handler: {
                             click: function () {
-                                $('#provenance-search-dialog').modal('hide');
+                                $('#event-details-dialog').modal('hide');
                             }
                         }
-                    }]
-            });
-
-            return $.ajax({
-                type: 'GET',
-                url: config.urls.searchOptions,
-                dataType: 'json'
-            }).done(function (response) {
-                var provenanceOptions = response.provenanceOptions;
-
-                // load all searchable fields
-                $.each(provenanceOptions.searchableFields, function (_, field) {
-                    appendSearchableField(field);
+                    }],
+                    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 () {
+                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(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 = $('<div class="searchable-field"></div>').appendTo('#searchable-fields-container');
-            $('<span class="searchable-field-id hidden"></span>').text(field.id).appendTo(searchableField);
-            $('<div class="searchable-field-name"></div>').text(field.label).appendTo(searchableField);
-            $('<div class="searchable-field-value"><input type="text" class="searchable-field-input"/></div>').appendTo(searchableField);
-            $('<div class="clear"></div>').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 (!nfCommon.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'
+    
+                // 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();
+                    }
                 });
-            }
-
-            // initialize the filter combo
-            $('#provenance-filter-type').combo({
-                options: filterOptions,
-                select: function (option) {
-                    applyFilter();
+    
+                // 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 (nfCommon.isContentViewConfigured()) {
+                    // input view
+                    $('#input-content-view').on('click', function () {
+                        viewContent('input');
+                    });
+    
+                    // output view
+                    $('#output-content-view').on('click', function () {
+                        viewContent('output');
+                    });
                 }
-            });
-
-            // 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('');
+    
+                // handle the replay and downloading
+                $('#replay-content').on('click', function () {
+                    var replayEntity = {
+                        'eventId': $('#provenance-event-id').text()
+                    };
+    
+                    // conditionally include the cluster node id
+                    var clusterNodeId = $('#provenance-event-cluster-node-id').text();
+                  if (!nfCommon.isBlank(clusterNodeId)) {
+                        replayEntity['clusterNodeId'] = clusterNodeId;
+                    }
+    
+                    $.ajax({
+                        type: 'POST',
+                        url: config.urls.replays,
+                        data: JSON.stringify(replayEntity),
+                        dataType: 'json',
+                        contentType: 'application/json'
+                    }).done(function (response) {
+                      nfDialog.showOkDialog({
+                        headerText: nf._.msg('nf-provenance-table.Provenance'),
+                        dialogContent: nf._.msg('nf-provenance-table.Message1')
+                        });
+                  }).fail(nfErrorHandler.handleAjaxError);
+    
+                    $('#event-details-dialog').modal('hide');
+                });
+    
+                // show the replay panel
+                $('#replay-details').show();
+            };
+    
+            /**
+             * 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
                 });
-
-                // reset the default start date/time
+    
+                // 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');
-
-                // reset the minimum and maximum file size
+    
+                // initialize the default file sizes
                 $('#provenance-search-minimum-file-size').val('');
                 $('#provenance-search-maximum-file-size').val('');
-
-                // if we are clustered reset the selected option
+    
+                // allow users to be able to search a specific node
                 if (isClustered) {
-                    $('#provenance-search-location').combo('setSelectedOption', {
-                        text: 'cluster'
-                    });
+                    // 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(nfErrorHandler.handleAjaxError);
+    
+                    // show the node search combo
+                    $('#provenance-search-location-container').show();
                 }
-
-                // 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');
-            });
-
-            // define a custom formatter for the more details column
-            var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
-                return '<div title="View Details" class="pointer show-event-details fa fa-info-circle"></div>';
+    
+                // configure the search dialog
+                $('#provenance-search-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                    headerText: nf._.msg('nf-provenance-table.Message2'),
+                    buttons: [{
+                        buttonText: nf._.msg('nf-provenance-table.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: nf._.msg('nf-provenance-table.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    $('#provenance-search-dialog').modal('hide');
+                                }
+                            }
+                        }]
+                });
+    
+                return $.ajax({
+                    type: 'GET',
+                    url: config.urls.searchOptions,
+                    dataType: 'json'
+                }).done(function (response) {
+                    var provenanceOptions = response.provenanceOptions;
+    
+                    // load all searchable fields
+                    $.each(provenanceOptions.searchableFields, function (_, field) {
+                        appendSearchableField(field);
+                    });
+                });
             };
-
-            // define how general values are formatted
-            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-                return nfCommon.formatValue(value);
+    
+            /**
+             * Initializes the provenance query dialog.
+             */
+            var initProvenanceQueryDialog = function () {
+                // initialize the dialog
+                $('#provenance-query-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                    headerText: nf._.msg('nf-provenance-table.Message10')
+                });
             };
-
-            // 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 (nfCommon.SUPPORTS_SVG) {
-                    markup += '<div title="Show Lineage" class="pointer show-lineage icon icon-lineage" style="margin-right: 3px;"></div>';
-                }
-
-                // conditionally support going to the component
-                var isRemotePort = dataContext.componentType === 'Remote Input Port' || dataContext.componentType === 'Remote Output Port';
-                if (isInShell && nfCommon.isDefinedAndNotNull(dataContext.groupId) && isRemotePort === false) {
-                    markup += '<div class="pointer go-to fa fa-long-arrow-right" title="Go To"></div>';
+    
+            /**
+             * Appends the specified searchable field to the search dialog.
+             *
+             * @param {type} field      The searchable field
+             */
+            var appendSearchableField = function (field) {
+                var searchableField = $('<div class="searchable-field"></div>').appendTo('#searchable-fields-container');
+                $('<span class="searchable-field-id hidden"></span>').text(field.id).appendTo(searchableField);
+                $('<div class="searchable-field-name"></div>').text(field.label).appendTo(searchableField);
+                $('<div class="searchable-field-value"><input type="text" class="searchable-field-input"/></div>').appendTo(searchableField);
+                $('<div class="clear"></div>').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');
                 }
-
-                return markup;
+    
+                // ensure the no searchable fields message is hidden
+                $('#no-searchable-fields').hide();
             };
-
-            // initialize the provenance table
-            var provenanceColumns = [
-                {
-                    id: 'moreDetails',
-                    name: '&nbsp;',
-                    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 (nfCommon.SUPPORTS_SVG || isInShell) {
-                provenanceColumns.push({
-                    id: 'actions',
-                    name: '&nbsp;',
-                    formatter: showLineageFormatter,
-                    resizable: false,
-                    sortable: false,
-                    width: 50,
-                    maxWidth: 50
+    
+            /**
+             * 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 (!nfCommon.isBlank(searchValue)) {
+                        searchCriteria[fieldId] = searchValue;
+                    }
                 });
-            }
-
-            var provenanceOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false,
-                multiSelect: false,
-                rowHeight: 24
+                return searchCriteria;
             };
-
-            // 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);
-                    }
+    
+            /**
+             * 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: nf._.msg('nf-provenance-table.ByComponentName'),
+                    value: 'componentName'
+                }, {
+                    text: nf._.msg('nf-provenance-table.ByComponentType'),
+                    value: 'componentType'
+                }, {
+                    text: nf._.msg('nf-provenance-table.ByType'),
+                    value: 'eventType'
+                }];
+    
+                // if clustered, allowing filtering by node id
+                if (isClustered) {
+                    filterOptions.push({
+                        text: nf._.msg('nf-provenance-table.ByNode'),
+                        value: 'clusterNodeAddress'
+                    });
                 }
-            });
-
-            // 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(nfCommon.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 (nfCommon.isDefinedAndNotNull(provenanceGrid)) {
-                var provenanceData = provenanceGrid.getData();
-
-                // update the search criteria
-                provenanceData.setFilterArgs({
-                    searchString: getFilterText(),
-                    property: $('#provenance-filter-type').combo('getSelectedOption').value
+    
+                // initialize the filter combo
+                $('#provenance-filter-type').combo({
+                    options: filterOptions,
+                    select: function (option) {
+                        applyFilter();
+                    }
                 });
-                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 = nfCommon.parseDateTime(a[sortDetails.columnId]).getTime();
-                    var bTime = nfCommon.parseDateTime(b[sortDetails.columnId]).getTime();
-                    if (aTime === bTime) {
-                        return a['id'] - b['id'];
-                    } else {
-                        return aTime - bTime;
+    
+                // 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: nf._.msg('nf-provenance-table.Cluster')
+                        });
                     }
-                } else if (sortDetails.columnId === 'fileSize') {
-                    var aSize = nfCommon.parseSize(a[sortDetails.columnId]);
-                    var bSize = nfCommon.parseSize(b[sortDetails.columnId]);
-                    if (aSize === bSize) {
-                        return a['id'] - b['id'];
-                    } else {
-                        return aSize - bSize;
+    
+                    // 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');
+                });
+    
+                // define a custom formatter for the more details column
+                var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
+                    return '<div title="'+nf._.msg('nf-provenance-table.ViewDetail')+'" class="pointer show-event-details fa fa-info-circle"></div>';
+                };
+    
+                // define how general values are formatted
+                var valueFormatter = function (row, cell, value, columnDef, dataContext) {
+                  return nfCommon.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 (nfCommon.SUPPORTS_SVG) {
+                        markup += '<div title="'+nf._.msg('nf-provenance-table.ShowLineage')+'" class="pointer show-lineage icon icon-lineage" style="margin-right: 3px;"></div>';
                     }
-                } else {
-                    var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                    var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                    if (aString === bString) {
-                        return a['id'] - b['id'];
-                    } else {
-                        return aString === bString ? 0 : aString > bString ? 1 : -1;
+    
+                    // conditionally support going to the component
+                  var isRemotePort = dataContext.componentType === 'Remote Input Port' || dataContext.componentType === 'Remote Output Port';
+                  if (isInShell && nfCommon.isDefinedAndNotNull(dataContext.groupId) && isRemotePort === false) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-provenance-table.GoTo')+'"></div>';
                     }
-                }
-            };
-
-            // 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(nfErrorHandler.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 (nfCommon.isDefinedAndNotNull(provenance.request.clusterNodeId)) {
-                url += '?' + $.param({
-                        clusterNodeId: provenance.request.clusterNodeId,
-                        summarize: true,
-                        incrementalResults: false
-                    });
-            } else {
-                url += '?' + $.param({
-                        summarize: true,
-                        incrementalResults: false
+    
+                    return markup;
+                };
+    
+                // initialize the provenance table
+                var provenanceColumns = [
+                    {
+                        id: 'moreDetails',
+                        name: '&nbsp;',
+                        sortable: false,
+                        resizable: false,
+                        formatter: moreDetailsFormatter,
+                        width: 50,
+                        maxWidth: 50
+                    },
+                    {
+                        id: 'eventTime',
+                        name: nf._.msg('nf-provenance-table.DateTime'),
+                        field: 'eventTime',
+                        sortable: true,
+                        defaultSortAsc: false,
+                        resizable: true
+                    },
+                  {
+                      id: 'eventType',
+                      name: nf._.msg('nf-provenance-table.Type'),
+                      field: 'eventType',
+                      sortable: true,
+                      resizable: true
+                  },
+                  {
+                      id: 'flowFileUuid',
+                      name: nf._.msg('nf-provenance-table.FlowFileUuid'),
+                      field: 'flowFileUuid',
+                      sortable: true,
+                      resizable: true
+                  },
+                  {
+                      id: 'fileSize',
+                      name: nf._.msg('nf-provenance-table.Size'),
+                      field: 'fileSize',
+                      sortable: true,
+                      defaultSortAsc: false,
+                      resizable: true
+                  },
+                    {
+                        id: 'componentName',
+                        name: nf._.msg('nf-provenance-table.ComponentName'),
+                        field: 'componentName',
+                        sortable: true,
+                        resizable: true,
+                        formatter: valueFormatter
+                    },
+                  {
+                      id: 'componentType',
+                      name: nf._.msg('nf-provenance-table.ComponentType'),
+                      field: 'componentType',
+                      sortable: true,
+                      resizable: true
+                  }
+                ];
+    
+                // conditionally show the cluster node identifier
+                if (isClustered) {
+                    provenanceColumns.push({
+                        id: 'clusterNodeAddress',
+                        name: nf._.msg('nf-provenance-table.Node'),
+                        field: 'clusterNodeAddress',
+                        sortable: true,
+                        resizable: true
                     });
-            }
-
-            return $.ajax({
-                type: 'GET',
-                url: url,
-                dataType: 'json'
-            }).fail(nfErrorHandler.handleAjaxError);
-        };
-
-        /**
-         * Cancels the specified provenance query.
-         *
-         * @param {object} provenance
-         * @return {deferred}
-         */
-        var cancelProvenance = function (provenance) {
-            var url = provenance.uri;
-            if (nfCommon.isDefinedAndNotNull(provenance.request.clusterNodeId)) {
-                url += '?' + $.param({
-                        clusterNodeId: provenance.request.clusterNodeId
+                }
+    
+                // conditionally show the action column
+              if (nfCommon.SUPPORTS_SVG || isInShell) {
+                    provenanceColumns.push({
+                        id: 'actions',
+                        name: '&nbsp;',
+                        formatter: showLineageFormatter,
+                        resizable: false,
+                        sortable: false,
+                        width: 50,
+                        maxWidth: 50
                     });
-            }
-
-            return $.ajax({
-                type: 'DELETE',
-                url: url,
-                dataType: 'json'
-            }).fail(nfErrorHandler.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 (nfCommon.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(nfCommon.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 nfCommon.isUndefinedOrNull(query.startDate) && nfCommon.isUndefinedOrNull(query.endDate) && $.isEmptyObject(query.searchTerms);
+                }
+    
+                var provenanceOptions = {
+                    forceFitColumns: true,
+                    enableTextSelectionOnCells: true,
+                    enableCellNavigation: true,
+                    enableColumnReorder: false,
+                    autoEdit: false,
+                    multiSelect: false,
+                    rowHeight: 24
                 };
-
-                // update the filter message based on the request
-                if (isBlankQuery(provenanceRequest)) {
-                    var message = 'Showing the most recent ';
-                    if (provenanceResults.totalCount >= config.maxResults) {
-                        message += (nfCommon.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 += (nfCommon.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.');
+    
+                // 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);
+                        }
                     }
-                    $('#provenance-query-message').text(message);
-                    $('#clear-provenance-search').show();
-                }
-
-                // update the total number of events
-                $('#total-events').text(nfCommon.formatInteger(provenanceResults.provenanceEvents.length));
-            } else {
+                });
+    
+                // 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(nfCommon.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');
-            }
-        };
-
-        /**
-         * 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 (nfCommon.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 (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && nfCommon.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();
-                        nfErrorHandler.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.
+             * Applies the filter found in the filter expression text field.
              */
-            resetTableSize: function () {
+            var applyFilter = function () {
+                // get the dataview
                 var provenanceGrid = $('#provenance-table').data('gridInstance');
-                if (nfCommon.isDefinedAndNotNull(provenanceGrid)) {
-                    provenanceGrid.resizeCanvas();
+    
+                // ensure the grid has been initialized
+              if (nfCommon.isDefinedAndNotNull(provenanceGrid)) {
+                    var provenanceData = provenanceGrid.getData();
+    
+                    // update the search criteria
+                    provenanceData.setFilterArgs({
+                        searchString: getFilterText(),
+                        property: $('#provenance-filter-type').combo('getSelectedOption').value
+                    });
+                    provenanceData.refresh();
                 }
-            },
-
+            };
+    
             /**
-             * Updates the value of the specified progress bar.
+             * 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 {jQuery}  progressBar
-             * @param {integer} value
-             * @returns {undefined}
+             * @param {object} item     The item subject to filtering
+             * @param {object} args     Filter arguments
+             * @returns {Boolean}       Whether or not to include the item
              */
-            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 = $('<div class="progress-label"></div>').text(value + '%');
-                (nfNgBridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + value + '" class="md-hue-2" md-mode="determinate" aria-label="Progress"></md-progress-linear>'))(nfNgBridge.rootScope)).appendTo(progressBar);
-                progressBar.append(label);
-            },
-
+            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;
+            };
+    
             /**
-             * 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.
+             * Sorts the data according to the sort details.
              *
-             * @param {object} query
+             * @param {type} sortDetails
+             * @param {type} data
              */
-            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',
-                        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();
-                            }
+            var sort = function (sortDetails, data) {
+                // defines a function for sorting
+                var comparer = function (a, b) {
+                    if (sortDetails.columnId === 'eventTime') {
+                      var aTime = nfCommon.parseDateTime(a[sortDetails.columnId]).getTime();
+                      var bTime = nfCommon.parseDateTime(b[sortDetails.columnId]).getTime();
+                        if (aTime === bTime) {
+                            return a['id'] - b['id'];
+                        } else {
+                            return aTime - bTime;
                         }
-                    }
-                }]).modal('show');
-
-                // -----------------------------
-                // determine the provenance query
-                // -----------------------------
-
-                // handle the specified query appropriately
-                if (nfCommon.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 = {};
-                }
-
-                // 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 (nfCommon.isDefinedAndNotNull(provenance)) {
-                        cancelProvenance(provenance);
-                    }
-
-                    // close the dialog
-                    $('#provenance-query-dialog').modal('hide');
-                };
-
-                // polls the server for the status of the provenance
-                var pollProvenance = function () {
-                    getProvenance(provenance).done(function (response) {
-                        // update the provenance
-                        provenance = response.provenance;
-
-                        // process the provenance
-                        processProvenanceResponse();
-                    }).fail(closeDialog);
-                };
-
-                // processes the provenance
-                var processProvenanceResponse = function () {
-                    // if the request was cancelled just ignore the current response
-                    if (cancelled === true) {
-                        closeDialog();
-                        return;
-                    }
-
-                    // update the percent complete
-                    provenanceTableCtrl.updateProgress(provenanceProgress, provenance.percentCompleted);
-
-                    // process the results if they are finished
-                    if (provenance.finished === true) {
-                        // show any errors when the query finishes
-                        if (!nfCommon.isEmpty(provenance.results.errors)) {
-                            var errors = provenance.results.errors;
-                            nfDialog.showOkDialog({
-                                headerText: 'Provenance',
-                                dialogContent: nfCommon.formatUnorderedList(errors),
-                            });
+                    } else if (sortDetails.columnId === 'fileSize') {
+                      var aSize = nfCommon.parseSize(a[sortDetails.columnId]);
+                      var bSize = nfCommon.parseSize(b[sortDetails.columnId]);
+                        if (aSize === bSize) {
+                            return a['id'] - b['id'];
+                        } else {
+                            return aSize - bSize;
                         }
-
-                        // process the results
-                        loadProvenanceResults(provenance, provenanceTableCtrl);
-
-                        // hide the dialog
-                        closeDialog();
                     } else {
-                        // start the wait to poll again
-                        provenanceTimer = setTimeout(function () {
-                            // clear the timer since we've been invoked
-                            provenanceTimer = null;
-
-                            // poll provenance
-                            pollProvenance();
-                        }, 2000);
+                      var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                      var bString = nfCommon.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)
                     }
                 };
-
-                // once the query is submitted wait until its finished
-                submitProvenance(query).done(function (response) {
-                    // update the provenance
-                    provenance = response.provenance;
-
-                    // process the results, if they are not done wait 1 second before trying again
-                    processProvenanceResponse();
-                }).fail(closeDialog);
-            },
-
+    
+                // submit the provenance request
+                return $.ajax({
+                    type: 'POST',
+                    url: config.urls.provenance,
+                    data: JSON.stringify(provenanceEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
             /**
-             * Gets the details for the specified event.
+             * Gets the results from the provenance query for the specified id.
              *
-             * @param {string} eventId
-             * @param {string} clusterNodeId    The id of the node in the cluster where this event/flowfile originated
+             * @param {object} provenance
+             * @returns {deferred}
              */
-            getEventDetails: function (eventId, clusterNodeId) {
-                var url;
-                if (nfCommon.isDefinedAndNotNull(clusterNodeId)) {
-                    url = config.urls.provenanceEvents + encodeURIComponent(eventId) + '?' + $.param({
-                            clusterNodeId: clusterNodeId
+            var getProvenance = function (provenance) {
+                var url = provenance.uri;
+              if (nfCommon.isDefinedAndNotNull(provenance.request.clusterNodeId)) {
+                    url += '?' + $.param({
+                          clusterNodeId: provenance.request.clusterNodeId,
+                          summarize: true,
+                          incrementalResults: false
+                      });
+              } else {
+                  url += '?' + $.param({
+                          summarize: true,
+                          incrementalResults: false
                         });
-                } else {
-                    url = config.urls.provenanceEvents + encodeURIComponent(eventId);
                 }
-
+    
                 return $.ajax({
                     type: 'GET',
                     url: url,
                     dataType: 'json'
-                }).fail(nfErrorHandler.handleAjaxError);
-            },
-
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
             /**
-             * Shows the details for the specified action.
+             * Cancels the specified provenance query.
              *
-             * @param {string} eventId
-             * @param {string} clusterNodeId    The id of the node in the cluster where this event/flowfile originated
+             * @param {object} provenance
+             * @return {deferred}
              */
-            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(nfCommon.formatValue(event.eventTime)).ellipsis();
-                    $('#provenance-event-type').html(nfCommon.formatValue(event.eventType)).ellipsis();
-                    $('#provenance-event-flowfile-uuid').html(nfCommon.formatValue(event.flowFileUuid)).ellipsis();
-                    $('#provenance-event-component-id').html(nfCommon.formatValue(event.componentId)).ellipsis();
-                    $('#provenance-event-component-name').html(nfCommon.formatValue(event.componentName)).ellipsis();
-                    $('#provenance-event-component-type').html(nfCommon.formatValue(event.componentType)).ellipsis();
-                    $('#provenance-event-details').html(nfCommon.formatValue(event.details)).ellipsis();
-
-                    // over the default tooltip with the actual byte count
-                    var fileSize = $('#provenance-event-file-size').html(nfCommon.formatValue(event.fileSize)).ellipsis();
-                    fileSize.attr('title', nfCommon.formatInteger(event.fileSizeBytes) + ' bytes');
-
-                    // sets an duration
-                    var setDuration = function (field, value) {
-                        if (nfCommon.isDefinedAndNotNull(value)) {
-                            if (value === 0) {
-                                field.text('< 1ms');
-                            } else {
-                                field.text(nfCommon.formatDuration(value));
-                            }
+            var cancelProvenance = function (provenance) {
+                var url = provenance.uri;
+              if (nfCommon.isDefinedAndNotNull(provenance.request.clusterNodeId)) {
+                    url += '?' + $.param({
+                            clusterNodeId: provenance.request.clusterNodeId
+                        });
+                }
+    
+                return $.ajax({
+                    type: 'DELETE',
+                    url: url,
+                    dataType: 'json'
+              }).fail(nfErrorHandler.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 (nfCommon.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(nfCommon.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 nfCommon.isUndefinedOrNull(query.startDate) && nfCommon.isUndefinedOrNull(query.endDate) && $.isEmptyObject(query.searchTerms);
+                    };
+    
+                    // update the filter message based on the request
+                    if (isBlankQuery(provenanceRequest)) {
+                        var message = nf._.msg('nf-provenance-table.Message');
+                        if (provenanceResults.totalCount >= config.maxResults) {
+                            message += (nfCommon.formatInteger(config.maxResults) + nf._.msg('nf-provenance-table.Of') + provenanceResults.total + nf._.msg('nf-provenance-table.Message4'));
                         } else {
-                            field.html('<span class="unset">No value set</span>');
+                            message += (nf._.msg('nf-provenance-table.Events'));
                         }
-                    };
-
-                    // handle durations
-                    setDuration($('#provenance-event-duration'), event.eventDuration);
-                    setDuration($('#provenance-lineage-duration'), event.lineageDuration);
-
-                    // formats an event detail
-                    var formatEventDetail = function (label, value) {
-                        $('<div class="event-detail"></div>').append(
-                            $('<div class="detail-name"></div>').text(label)).append(
-                            $('<div class="detail-value">' + nfCommon.formatValue(value) + '</div>').ellipsis()).append(
-                            $('<div class="clear"></div>')).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);
+                        $('#provenance-query-message').text(message);
+                        $('#clear-provenance-search').hide();
+                    } else {
+                        var message = nf._.msg('nf-provenance-table.Showing');
+                        if (provenanceResults.totalCount >= config.maxResults) {
+                            message += (nfCommon.formatInteger(config.maxResults) + nf._.msg('nf-provenance-table.Of') + provenanceResults.total + nf._.msg('nf-provenance-table.Message5'));
+                        } else {
+                            message += (nf._.msg('nf-provenance-table.Message6'));
+                        }
+                        $('#provenance-query-message').text(message);
+                        $('#clear-provenance-search').show();
                     }
-
-                    // conditionally show the cluster node identifier
-                    if (nfCommon.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);
+    
+                    // update the total number of events
+                  $('#total-events').text(nfCommon.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 (nfCommon.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 (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
+                            parent.nf.CanvasUtils.showComponent(item.groupId, item.componentId);
+                            parent.$('#shell-close-button').click();
+                        }
                     }
-
-                    // populate the parent/child flowfile uuids
-                    var parentUuids = $('#parent-flowfiles-container');
-                    var childUuids = $('#child-flowfiles-container');
-
-                    // handle parent flowfiles
-                    if (nfCommon.isEmpty(event.parentUuids)) {
-                        $('#parent-flowfile-count').text(0);
-                        parentUuids.append('<span class="unset">No parents</span>');
-                    } else {
-                        $('#parent-flowfile-count').text(event.parentUuids.length);
-                        $.each(event.parentUuids, function (_, uuid) {
-                            $('<div></div>').text(uuid).appendTo(parentUuids);
-                        });
+                }
+            };
+    
+            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();
+                          nfErrorHandler.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 (nfCommon.isDefinedAndNotNull(provenanceGrid)) {
+                        provenanceGrid.resizeCanvas();
                     }
-
-                    // handle child flowfiles
-                    if (nfCommon.isEmpty(event.childUuids)) {
-                        $('#child-flowfile-count').text(0);
-                        childUuids.append('<span class="unset">No children</span>');
+                },
+    
+                /**
+                 * 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 = $('<div class="progress-label"></div>').text(value + '%');
+                    (nfNgBridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + value + '" class="md-hue-2" md-mode="determinate" aria-label="'+nf._.msg('nf-provenance-table.Process')+'"></md-progress-linear>'))(nfNgBridge.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: nf._.msg('nf-provenance-table.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();
+                                }
+                            }
+                        }
+                    }]).modal('show');
+    
+                    // -----------------------------
+                    // determine the provenance query
+                    // -----------------------------
+    
+                    // handle the specified query appropriately
+                  if (nfCommon.isDefinedAndNotNull(query)) {
+                        // store the last query performed
+                        cachedQuery = query;
+                    } else if (!$.isEmptyObject(cachedQuery)) {
+                        // use the last query performed
+                        query = cachedQuery;
                     } else {
-                        $('#child-flowfile-count').text(event.childUuids.length);
-                        $.each(event.childUuids, function (_, uuid) {
-                            $('<div></div>').text(uuid).appendTo(childUuids);
-                        });
+                        // don't use a query
+                        query = {};
                     }
-
-                    // get the attributes container
-                    var attributesContainer = $('#attributes-container');
-
-                    // get any action details
-                    $.each(event.attributes, function (_, attribute) {
-                        // create the attribute record
-                        var attributeRecord = $('<div class="attribute-detail"></div>')
-                            .append($('<div class="attribute-name">' + nfCommon.formatValue(attribute.name) + '</div>').ellipsis())
-                            .appendTo(attributesContainer);
-
-                        // add the current value
-                        attributeRecord
-                            .append($('<div class="attribute-value">' + nfCommon.formatValue(attribute.value) + '</div>').ellipsis())
-                            .append('<div class="clear"></div>');
-
-                        // show the previous value if the property has changed
-                        if (attribute.value !== attribute.previousValue) {
-                            if (nfCommon.isDefinedAndNotNull(attribute.previousValue)) {
-                                attributeRecord
-                                    .append($('<div class="modified-attribute-value">' + nfCommon.formatValue(attribute.previousValue) + '<span class="unset"> (previous)</span></div>').ellipsis())
-                                    .append('<div class="clear"></div>');
+    
+                    // 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 (nfCommon.isDefinedAndNotNull(provenance)) {
+                            cancelProvenance(provenance);
+                        }
+    
+                        // close the dialog
+                        $('#provenance-query-dialog').modal('hide');
+                    };
+    
+                  // polls the server for the status of the provenance
+                  var pollProvenance = function () {
+                        getProvenance(provenance).done(function (response) {
+                            // update the provenance
+                            provenance = response.provenance;
+    
+                            // process the provenance
+                          processProvenanceResponse();
+                        }).fail(closeDialog);
+                    };
+    
+                  // processes the provenance
+                  var processProvenanceResponse = function () {
+                        // if the request was cancelled just ignore the current response
+                        if (cancelled === true) {
+                            closeDialog();
+                            return;
+                        }
+    
+                        // update the percent complete
+                      provenanceTableCtrl.updateProgress(provenanceProgress, provenance.percentCompleted);
+    
+                        // process the results if they are finished
+                        if (provenance.finished === true) {
+                            // show any errors when the query finishes
+                          if (!nfCommon.isEmpty(provenance.results.errors)) {
+                                var errors = provenance.results.errors;
+                              nfDialog.showOkDialog({
+                                    headerText: nf._.msg('nf-provenance-table.Provenance'),
+                                    dialogContent: nfCommon.formatUnorderedList(errors),
+                                });
+                            }
+    
+                            // process the results
+                          loadProvenanceResults(provenance, provenanceTableCtrl);
+    
+                            // hide the dialog
+                            closeDialog();
+                        } else {
+                            // start the wait to poll again
+                            provenanceTimer = setTimeout(function () {
+                                // clear the timer since we've been invoked
+                                provenanceTimer = null;
+    
+                                // 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 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 (nfCommon.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(nfErrorHandler.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(nfCommon.formatValue(event.eventTime)).ellipsis();
+                      $('#provenance-event-type').html(nfCommon.formatValue(event.eventType)).ellipsis();
+                      $('#provenance-event-flowfile-uuid').html(nfCommon.formatValue(event.flowFileUuid)).ellipsis();
+                      $('#provenance-event-component-id').html(nfCommon.formatValue(event.componentId)).ellipsis();
+                      $('#provenance-event-component-name').html(nfCommon.formatValue(event.componentName)).ellipsis();
+                      $('#provenance-event-component-type').html(nfCommon.formatValue(event.componentType)).ellipsis();
+                      $('#provenance-event-details').html(nfCommon.formatValue(event.details)).ellipsis();
+    
+                        // over the default tooltip with the actual byte count
+                      var fileSize = $('#provenance-event-file-size').html(nfCommon.formatValue(event.fileSize)).ellipsis();
+                        fileSize.attr('title', nfCommon.formatInteger(event.fileSizeBytes) + nf._.msg('nf-provenance-table.Bytes'));
+    
+                        // sets an duration
+                        var setDuration = function (field, value) {
+                          if (nfCommon.isDefinedAndNotNull(value)) {
+                                if (value === 0) {
+                                    field.text('< 1ms');
+                                } else {
+                                  field.text(nfCommon.formatDuration(value));
+                                }
                             } else {
-                                attributeRecord
-                                    .append($('<div class="unset" style="font-size: 13px; padding-top: 2px;">' + nfCommon.formatValue(attribute.previousValue) + '</div>').ellipsis())
-                                    .append('<div class="clear"></div>');
+                              field.html('<span class="unset">'+nf._.msg('nf-provenance-table.NoValueSet')+'</span>');
                             }
+                        };
+    
+                        // handle durations
+                        setDuration($('#provenance-event-duration'), event.eventDuration);
+                        setDuration($('#provenance-lineage-duration'), event.lineageDuration);
+    
+                        // formats an event detail
+                        var formatEventDetail = function (label, value) {
+                            $('<div class="event-detail"></div>').append(
+                                $('<div class="detail-name"></div>').text(label)).append(
+                              $('<div class="detail-value">' + nfCommon.formatValue(value) + '</div>').ellipsis()).append(
+                                $('<div class="clear"></div>')).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 (nfCommon.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 (nfCommon.isEmpty(event.parentUuids)) {
+                            $('#parent-flowfile-count').text(0);
+                            parentUuids.append('<span class="unset">'+nf._.msg('nf-provenance-table.NoParent')+'</span>');
                         } else {
-                            // mark this attribute as not modified
-                            attributeRecord.addClass('attribute-unmodified');
+                            $('#parent-flowfile-count').text(event.parentUuids.length);
+                            $.each(event.parentUuids, function (_, uuid) {
+                                $('<div></div>').text(uuid).appendTo(parentUuids);
+                            });
                         }
-                    });
-
-                    var formatContentValue = function (element, value) {
-                        if (nfCommon.isDefinedAndNotNull(value)) {
-                            element.removeClass('unset').text(value);
+    
+                        // handle child flowfiles
+                      if (nfCommon.isEmpty(event.childUuids)) {
+                            $('#child-flowfile-count').text(0);
+                            childUuids.append('<span class="unset">'+nf._.msg('nf-provenance-table.NoChildren')+'</span>');
                         } else {
-                            element.addClass('unset').text('No value previously set');
+                            $('#child-flowfile-count').text(event.childUuids.length);
+                            $.each(event.childUuids, function (_, uuid) {
+                                $('<div></div>').text(uuid).appendTo(childUuids);
+                            });
                         }
-                    };
-
-                    // 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 (nfCommon.isDefinedAndNotNull(event.inputContentClaimFileSize)) {
-                        // over the default tooltip with the actual byte count
-                        inputContentSize.attr('title', nfCommon.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 (nfCommon.isDefinedAndNotNull(event.outputContentClaimFileSize)) {
-                        // over the default tooltip with the actual byte count
-                        outputContentSize.attr('title', nfCommon.formatInteger(event.outputContentClaimFileSizeBytes) + ' bytes');
-                    }
-
-                    if (event.inputContentAvailable === true) {
-                        $('#input-content-download').show();
-
-                        if (nfCommon.isContentViewConfigured()) {
-                            $('#input-content-view').show();
+    
+                        // get the attributes container
+                        var attributesContainer = $('#attributes-container');
+    
+                        // get any action details
+                        $.each(event.attributes, function (_, attribute) {
+                            // create the attribute record
+                            var attributeRecord = $('<div class="attribute-detail"></div>')
+                              .append($('<div class="attribute-name">' + nfCommon.formatValue(attribute.name) + '</div>').ellipsis())
+                                .appendTo(attributesContainer);
+    
+                            // add the current value
+                            attributeRecord
+                              .append($('<div class="attribute-value">' + nfCommon.formatValue(attribute.value) + '</div>').ellipsis())
+                                .append('<div class="clear"></div>');
+    
+                            // show the previous value if the property has changed
+                            if (attribute.value !== attribute.previousValue) {
+                              if (nfCommon.isDefinedAndNotNull(attribute.previousValue)) {
+                                    attributeRecord
+                                      .append($('<div class="modified-attribute-value">' + nfCommon.formatValue(attribute.previousValue) + '<span class="unset"> (previous)</span></div>').ellipsis())
+                                        .append('<div class="clear"></div>');
+                                } else {
+                                    attributeRecord
+                                      .append($('<div class="unset" style="font-size: 13px; padding-top: 2px;">' + nfCommon.formatValue(attribute.previousValue) + '</div>').ellipsis())
+                                        .append('<div class="clear"></div>');
+                                }
+                            } else {
+                                // mark this attribute as not modified
+                                attributeRecord.addClass('attribute-unmodified');
+                            }
+                        });
+    
+                        var formatContentValue = function (element, value) {
+                          if (nfCommon.isDefinedAndNotNull(value)) {
+                                element.removeClass('unset').text(value);
+                            } else {
+                                element.addClass('unset').text(nf._.msg('nf-provenance-table.Message9'));
+                            }
+                        };
+    
+                        // content
+                        $('#input-content-header').text(nf._.msg('nf-provenance-table.InputClaim'));
+                        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 (nfCommon.isDefinedAndNotNull(event.inputContentClaimFileSize)) {
+                            // over the default tooltip with the actual byte count
+                          inputContentSize.attr('title', nfCommon.formatInteger(event.inputContentClaimFileSizeBytes) + nf._.msg('nf-provenance-table.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 (nfCommon.isDefinedAndNotNull(event.outputContentClaimFileSize)) {
+                            // over the default tooltip with the actual byte count
+                          outputContentSize.attr('title', nfCommon.formatInteger(event.outputContentClaimFileSizeBytes) + nf._.msg('nf-provenance-table.Bytes'));
+                        }
+    
+                        if (event.inputContentAvailable === true) {
+                            $('#input-content-download').show();
+    
+                          if (nfCommon.isContentViewConfigured()) {
+                                $('#input-content-view').show();
+                            } else {
+                                $('#input-content-view').hide();
+                            }
                         } 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 (nfCommon.isContentViewConfigured()) {
-                            $('#output-content-view').show();
+    
+                        if (event.outputContentAvailable === true) {
+                            $('#output-content-download').show();
+    
+                          if (nfCommon.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();
-                    }
-
-                    // show the dialog
-                    $('#event-details-dialog').modal('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');
+                  });
+                }
             }
-        }
-
-        var provenanceTableCtrl = new ProvenanceTableCtrl();
-        return provenanceTableCtrl;
-    };
-
-    return nfProvenanceTable;
-}));
\ No newline at end of file
+    
+            var provenanceTableCtrl = new ProvenanceTableCtrl();
+            return provenanceTableCtrl;
+        };
+    
+      return nfProvenanceTable;
+  }));
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 b6ec30ef0e55..e4823b14f326 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
@@ -1,248 +1,248 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.SummaryTable'],
-            function ($, nfCommon, nfDialog, nfSummaryTable) {
-                return (nf.ClusterSearch = factory($, nfCommon, nfDialog, nfSummaryTable));
-            });
-    } 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 ($, nfCommon, nfDialog, nfSummaryTable) {
-    'use strict';
-
-    /**
-     * Configuration object used to hold a number of configuration items.
+    /*
+     * 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.
      */
-    var config = {
-        search: 'Search nodes',
-        urls: {
-            clusterSearch: '../nifi-api/flow/cluster/search-results'
-        }
-    };
-
-    return {
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.SummaryTable'],
+              function ($, nfCommon, nfDialog, nfSummaryTable) {
+                  return (nf.ClusterSearch = factory($, nfCommon, nfDialog, nfSummaryTable));
+              });
+      } 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 ($, nfCommon, nfDialog, nfSummaryTable) {
+      'use strict';
+  
         /**
-         * Initialize the header by register all required listeners.
+         * Configuration object used to hold a number of configuration items.
          */
-        init: function () {
-            // configure the view single node dialog
-            $('#view-single-node-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: 'Select node',
-                buttons: [{
-                    buttonText: 'Ok',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            var clusterSearchTerm = $('#cluster-search-field').val();
-
-                            // create the search request
-                            $.ajax({
-                                type: 'GET',
-                                data: {
-                                    q: clusterSearchTerm
-                                },
-                                dataType: 'json',
-                                url: config.urls.clusterSearch
-                            }).done(function (response) {
-                                var searchResults = response.nodeResults;
-
-                                // selects the specified node
-                                var selectNode = function (node) {
-                                    // update the urls to point to this specific node of the cluster
-                                    nfSummaryTable.setClusterNodeId(node.id);
-
-                                    // load the summary for the selected node
-                                    nfSummaryTable.loadSummaryTable();
-
-                                    // update the header
-                                    $('#summary-header-text').text(node.address + ' Summary');
-                                };
-
-                                // ensure the search found some results
-                                if (!$.isArray(searchResults) || searchResults.length === 0) {
-                                    nfDialog.showOkDialog({
-                                        headerText: 'Cluster Search',
-                                        dialogContent: 'No nodes match \'' + nfCommon.escapeHtml(clusterSearchTerm) + '\'.'
-                                    });
-                                } else if (searchResults.length > 1) {
-                                    var exactMatch = false;
-
-                                    // look for an exact match
-                                    $.each(searchResults, function (_, result) {
-                                        if (result.address === clusterSearchTerm) {
-                                            selectNode(result);
-                                            exactMatch = true;
-                                            return false;
+        var config = {
+            search: 'Search nodes',
+            urls: {
+                clusterSearch: '../nifi-api/flow/cluster/search-results'
+            }
+        };
+    
+        return {
+            /**
+             * Initialize the header by register all required listeners.
+             */
+            init: function () {
+                // configure the view single node dialog
+                $('#view-single-node-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                    headerText: nf._.msg('nf-cluster-search.SelectNode'),
+                    buttons: [{
+                        buttonText: nf._.msg('nf-cluster-search.Ok'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                var clusterSearchTerm = $('#cluster-search-field').val();
+    
+                                // create the search request
+                                $.ajax({
+                                    type: 'GET',
+                                    data: {
+                                        q: clusterSearchTerm
+                                    },
+                                    dataType: 'json',
+                                    url: config.urls.clusterSearch
+                                }).done(function (response) {
+                                    var searchResults = response.nodeResults;
+    
+                                    // selects the specified node
+                                    var selectNode = function (node) {
+                                        // update the urls to point to this specific node of the cluster
+                                      nfSummaryTable.setClusterNodeId(node.id);
+    
+                                        // load the summary for the selected node
+                                      nfSummaryTable.loadSummaryTable();
+    
+                                        // update the header
+                                        $('#summary-header-text').text(node.address + nf._.msg('nf-cluster-search.Summary'));
+                                    };
+    
+                                    // ensure the search found some results
+                                    if (!$.isArray(searchResults) || searchResults.length === 0) {
+                                      nfDialog.showOkDialog({
+                                            headerText: nf._.msg('nf-cluster-search.ClusterSearch'),
+                                            dialogContent: nf._.msg('nf-cluster-search.Message1') + nf.Common.escapeHtml(clusterSearchTerm) + '\'.'
+                                        });
+                                    } else if (searchResults.length > 1) {
+                                        var exactMatch = false;
+    
+                                        // look for an exact match
+                                        $.each(searchResults, function (_, result) {
+                                            if (result.address === clusterSearchTerm) {
+                                                selectNode(result);
+                                                exactMatch = true;
+                                                return false;
+                                            }
+                                        });
+    
+                                        // if there is an exact match, use it
+                                        if (exactMatch) {
+                                            // close the dialog
+                                            $('#view-single-node-dialog').modal('hide');
+                                        } else {
+                                          nfDialog.showOkDialog({
+                                                headerText: nf._.msg('nf-cluster-search.ClusterSearch'),
+                                                dialogContent: nf._.msg('nf-cluster-search.Message2') + nf.Common.escapeHtml(clusterSearchTerm) + '\'.'
+                                            });
                                         }
-                                    });
-
-                                    // if there is an exact match, use it
-                                    if (exactMatch) {
+                                    } else if (searchResults.length === 1) {
+                                        selectNode(searchResults[0]);
+    
                                         // close the dialog
                                         $('#view-single-node-dialog').modal('hide');
-                                    } else {
-                                        nfDialog.showOkDialog({
-                                            headerText: 'Cluster Search',
-                                            dialogContent: 'More than one node matches \'' + nfCommon.escapeHtml(clusterSearchTerm) + '\'.'
-                                        });
                                     }
-                                } else if (searchResults.length === 1) {
-                                    selectNode(searchResults[0]);
-
+                                });
+                            }
+                        }
+                    },
+                        {
+                            buttonText: nf._.msg('nf-cluster-search.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
                                     // close the dialog
-                                    $('#view-single-node-dialog').modal('hide');
+                                    this.modal('hide');
                                 }
-                            });
+                            }
+                        }],
+                    handler: {
+                        close: function () {
+                            // reset the search field
+                            $('#cluster-search-field').val(config.search).addClass('search-nodes').clusterSearchAutocomplete('reset');
                         }
                     }
-                },
-                    {
-                        buttonText: 'Cancel',
-                        color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
-                        },
-                        handler: {
-                            click: function () {
-                                // close the dialog
-                                this.modal('hide');
-                            }
+                });
+    
+                // configure the cluster auto complete
+                $.widget('nf.clusterSearchAutocomplete', $.ui.autocomplete, {
+                    reset: function () {
+                        this.term = null;
+                    },
+                  _create: function() {
+                      this._super();
+                      this.widget().menu('option', 'items', '> :not(.search-no-matches)' );
+                  },
+                    _normalize: function (searchResults) {
+                        var items = [];
+                        items.push(searchResults);
+                        return items;
+                    },
+                    _renderMenu: function (ul, items) {
+                        // results are normalized into a single element array
+                        var searchResults = items[0];
+    
+                      var nfClusterSearchAutocomplete = this;
+                        $.each(searchResults.nodeResults, function (_, node) {
+                          nfClusterSearchAutocomplete._renderItem(ul, {
+                                label: node.address,
+                                value: node.address
+                            });
+                        });
+    
+                        // ensure there were some results
+                        if (ul.children().length === 0) {
+                            ul.append('<li class="unset search-no-matches">'+nf._.msg('nf-cluster-search.Message3')+'</li>');
                         }
-                    }],
-                handler: {
-                    close: function () {
-                        // reset the search field
-                        $('#cluster-search-field').val(config.search).addClass('search-nodes').clusterSearchAutocomplete('reset');
+                    },
+                    _resizeMenu: function () {
+                        var ul = this.menu.element;
+                      ul.width($('#cluster-search-field').outerWidth() - 2);
+                  },
+                  _renderItem: function (ul, match) {
+                      var itemContent = $('<a></a>').text(match.label);
+                      return $('<li></li>').data('ui-autocomplete-item', match).append(itemContent).appendTo(ul);
                     }
-                }
-            });
-
-            // configure the cluster auto complete
-            $.widget('nf.clusterSearchAutocomplete', $.ui.autocomplete, {
-                reset: function () {
-                    this.term = null;
-                },
-                _create: function() {
-                    this._super();
-                    this.widget().menu('option', 'items', '> :not(.search-no-matches)' );
-                },
-                _normalize: function (searchResults) {
-                    var items = [];
-                    items.push(searchResults);
-                    return items;
-                },
-                _renderMenu: function (ul, items) {
-                    // results are normalized into a single element array
-                    var searchResults = items[0];
-
-                    var nfClusterSearchAutocomplete = this;
-                    $.each(searchResults.nodeResults, function (_, node) {
-                        nfClusterSearchAutocomplete._renderItem(ul, {
-                            label: node.address,
-                            value: node.address
+                });
+    
+                // configure the autocomplete field
+                $('#cluster-search-field').clusterSearchAutocomplete({
+                    minLength: 0,
+                    appendTo: '#search-cluster-results',
+                    position: {
+                        my: 'left top',
+                        at: 'left bottom',
+                        offset: '0 1'
+                    },
+                    source: function (request, response) {
+                        // create the search request
+                        $.ajax({
+                            type: 'GET',
+                            data: {
+                                q: request.term
+                            },
+                            dataType: 'json',
+                            url: config.urls.clusterSearch
+                        }).done(function (searchResponse) {
+                            response(searchResponse);
                         });
-                    });
-
-                    // ensure there were some results
-                    if (ul.children().length === 0) {
-                        ul.append('<li class="unset search-no-matches">No nodes matched the search terms</li>');
                     }
-                },
-                _resizeMenu: function () {
-                    var ul = this.menu.element;
-                    ul.width($('#cluster-search-field').outerWidth() - 2);
-                },
-                _renderItem: function (ul, match) {
-                    var itemContent = $('<a></a>').text(match.label);
-                    return $('<li></li>').data('ui-autocomplete-item', match).append(itemContent).appendTo(ul);
-                }
-            });
-
-            // configure the autocomplete field
-            $('#cluster-search-field').clusterSearchAutocomplete({
-                minLength: 0,
-                appendTo: '#search-cluster-results',
-                position: {
-                    my: 'left top',
-                    at: 'left bottom',
-                    offset: '0 1'
-                },
-                source: function (request, response) {
-                    // create the search request
-                    $.ajax({
-                        type: 'GET',
-                        data: {
-                            q: request.term
-                        },
-                        dataType: 'json',
-                        url: config.urls.clusterSearch
-                    }).done(function (searchResponse) {
-                        response(searchResponse);
-                    });
-                }
-            }).focus(function () {
-                // conditionally clear the text for the user to type
-                if ($(this).val() === config.search) {
-                    $(this).val('').removeClass('search-nodes');
-                }
-            }).val(config.search).addClass('search-nodes');
-
-            // handle the view single node click event
-            $('#view-single-node-link').click(function () {
-                // hold the search nodes dialog
-                $('#view-single-node-dialog').modal('show');
-                $('#cluster-search-field').focus();
-            });
-
-            // handle the view cluster click event
-            $('#view-cluster-link').click(function () {
-                // reset the urls and refresh the table
-                nfSummaryTable.setClusterNodeId(null);
-                nfSummaryTable.loadSummaryTable();
-
-                // update the header
-                $('#summary-header-text').text('NiFi Summary');
-            });
-
-            // show the view links
-            $('#view-options-container').show();
-        }
-    };
-}));
\ No newline at end of file
+                }).focus(function () {
+                    // conditionally clear the text for the user to type
+                    if ($(this).val() === config.search) {
+                        $(this).val('').removeClass('search-nodes');
+                    }
+                }).val(config.search).addClass('search-nodes');
+    
+                // handle the view single node click event
+                $('#view-single-node-link').click(function () {
+                    // hold the search nodes dialog
+                    $('#view-single-node-dialog').modal('show');
+                    $('#cluster-search-field').focus();
+                });
+    
+                // handle the view cluster click event
+                $('#view-cluster-link').click(function () {
+                    // reset the urls and refresh the table
+                  nfSummaryTable.setClusterNodeId(null);
+                  nfSummaryTable.loadSummaryTable();
+    
+                    // update the header
+                    $('#summary-header-text').text(nf._.msg('nf-cluster-search.NiFiSumary'));
+                });
+    
+                // show the view links
+                $('#view-options-container').show();
+            }
+        };
+  }));
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 4f83691efbce..1c1583d77e15 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
@@ -1,3052 +1,3052 @@
-/*
- * 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 top, define, module, require, exports */
-
-(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, nfCommon, nfErrorHandler, nfStatusHistory, nfProcessorDetails, nfConnectionDetails, nfNgBridge) {
-                return (nf.SummaryTable = factory($, Slick, nfCommon, nfErrorHandler, nfStatusHistory, nfProcessorDetails, nfConnectionDetails, nfNgBridge));
-            });
-    } 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, nfCommon, nfErrorHandler, nfStatusHistory, nfProcessorDetails, nfConnectionDetails, nfNgBridge) {
-    'use strict';
-
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        urls: {
-            api: '../nifi-api',
-            status: '../nifi-api/flow/process-groups/root/status',
-            systemDiagnostics: '../nifi-api/system-diagnostics',
-            flowConfig: '../nifi-api/flow/config'
-        }
-    };
-
-    /**
-     * Goes to the specified component if possible.
+    /*
+     * 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
      *
-     * @argument {string} groupId       The id of the group
-     * @argument {string} componentId   The id of the component
-     */
-    var goTo = function (groupId, componentId) {
-        // only attempt this if we're within a frame
-        if (top !== window) {
-            // and our parent has canvas utils and shell defined
-            if (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
-                parent.nf.CanvasUtils.showComponent(groupId, componentId);
-                parent.$('#shell-close-button').click();
-            }
-        }
-    };
-
-    /**
-     * Initializes the summary table.
+     *     http://www.apache.org/licenses/LICENSE-2.0
      *
-     * @param {type} isClustered
+     * 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.
      */
-    var initSummaryTable = function (isClustered) {
-        // define the function for filtering the list
-        $('#summary-filter').keyup(function () {
-            applyFilter();
-        });
-
-        // initialize the summary tabs
-        $('#summary-tabs').tabbs({
-            tabStyle: 'tab',
-            selectedTabStyle: 'selected-tab',
-            scrollableTabContentStyle: 'scrollable',
-            tabs: [{
-                name: 'Processors',
-                tabContentId: 'processor-summary-tab-content'
-            }, {
-                name: 'Input Ports',
-                tabContentId: 'input-port-summary-tab-content'
-            }, {
-                name: 'Output Ports',
-                tabContentId: 'output-port-summary-tab-content'
-            }, {
-                name: 'Remote Process Groups',
-                tabContentId: 'remote-process-group-summary-tab-content'
-            }, {
-                name: 'Connections',
-                tabContentId: 'connection-summary-tab-content'
-            }, {
-                name: 'Process Groups',
-                tabContentId: 'process-group-summary-tab-content'
-            }],
-            select: function () {
-                var tab = $(this).text();
-                if (tab === 'Processors') {
-                    // ensure the processor table is sized properly
-                    var processorsGrid = $('#processor-summary-table').data('gridInstance');
-                    if (nfCommon.isDefinedAndNotNull(processorsGrid)) {
-                        processorsGrid.resizeCanvas();
-
-                        // update the total number of processors
-                        $('#displayed-items').text(nfCommon.formatInteger(processorsGrid.getData().getLength()));
-                        $('#total-items').text(nfCommon.formatInteger(processorsGrid.getData().getLength()));
-                    }
-
-                    // update the combo for processors
-                    $('#summary-filter-type').combo({
-                        options: [{
-                            text: 'by name',
-                            value: 'name'
-                        }, {
-                            text: 'by type',
-                            value: 'type'
-                        }],
-                        select: function (option) {
-                            applyFilter();
+  /* global top, define, module, require, exports */
+    
+  (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, nfCommon, nfErrorHandler, nfStatusHistory, nfProcessorDetails, nfConnectionDetails, nfNgBridge) {
+                  return (nf.SummaryTable = factory($, Slick, nfCommon, nfErrorHandler, nfStatusHistory, nfProcessorDetails, nfConnectionDetails, nfNgBridge));
+              });
+      } 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, nfCommon, nfErrorHandler, nfStatusHistory, nfProcessorDetails, nfConnectionDetails, nfNgBridge) {
+      'use strict';
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                api: '../nifi-api',
+                status: '../nifi-api/flow/process-groups/root/status',
+                systemDiagnostics: '../nifi-api/system-diagnostics',
+                flowConfig: '../nifi-api/flow/config'
+            }
+        };
+    
+        /**
+         * Goes to the specified component if possible.
+         *
+         * @argument {string} groupId       The id of the group
+         * @argument {string} componentId   The id of the component
+         */
+        var goTo = function (groupId, componentId) {
+            // only attempt this if we're within a frame
+            if (top !== window) {
+                // and our parent has canvas utils and shell defined
+              if (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
+                    parent.nf.CanvasUtils.showComponent(groupId, componentId);
+                    parent.$('#shell-close-button').click();
+                }
+            }
+        };
+    
+        /**
+         * Initializes the summary table.
+         *
+         * @param {type} isClustered
+         */
+        var initSummaryTable = function (isClustered) {
+            // define the function for filtering the list
+            $('#summary-filter').keyup(function () {
+                applyFilter();
+            });
+    
+            // initialize the summary tabs
+            $('#summary-tabs').tabbs({
+                tabStyle: 'tab',
+                selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
+                tabs: [{
+                  name: nf._.msg('nf-summary-table.Processors'),
+                    tabContentId: 'processor-summary-tab-content'
+                }, {
+                  name: nf._.msg('nf-summary-table.InputPorts'),
+                    tabContentId: 'input-port-summary-tab-content'
+                }, {
+                  name: nf._.msg('nf-summary-table.OutputPorts'),
+                    tabContentId: 'output-port-summary-tab-content'
+                }, {
+                  name: nf._.msg('nf-summary-table.RemoteProcessGroups'),
+                    tabContentId: 'remote-process-group-summary-tab-content'
+                }, {
+                  name: nf._.msg('nf-summary-table.Connections'),
+                    tabContentId: 'connection-summary-tab-content'
+                }, {
+                  name: nf._.msg('nf-summary-table.ProcessGroups'),
+                    tabContentId: 'process-group-summary-tab-content'
+                }],
+                select: function () {
+                    var tab = $(this).text();
+                  if (tab === nf._.msg('nf-summary-table.Processors')) {
+                        // ensure the processor table is sized properly
+                        var processorsGrid = $('#processor-summary-table').data('gridInstance');
+                      if (nfCommon.isDefinedAndNotNull(processorsGrid)) {
+                            processorsGrid.resizeCanvas();
+    
+                            // update the total number of processors
+                          $('#displayed-items').text(nfCommon.formatInteger(processorsGrid.getData().getLength()));
+                          $('#total-items').text(nfCommon.formatInteger(processorsGrid.getData().getLength()));
                         }
-                    });
-                } else if (tab === 'Connections') {
-                    // ensure the connection table is size properly
-                    var connectionsGrid = $('#connection-summary-table').data('gridInstance');
-                    if (nfCommon.isDefinedAndNotNull(connectionsGrid)) {
-                        connectionsGrid.resizeCanvas();
-
-                        // update the total number of connections
-                        $('#displayed-items').text(nfCommon.formatInteger(connectionsGrid.getData().getLength()));
-                        $('#total-items').text(nfCommon.formatInteger(connectionsGrid.getData().getLength()));
-                    }
-
-                    // update the combo for connections
-                    $('#summary-filter-type').combo({
-                        options: [{
-                            text: 'by source',
-                            value: 'sourceName'
-                        }, {
-                            text: 'by name',
-                            value: 'name'
-                        }, {
-                            text: 'by destination',
-                            value: 'destinationName'
-                        }],
-                        select: function (option) {
-                            applyFilter();
+    
+                        // update the combo for processors
+                        $('#summary-filter-type').combo({
+                            options: [{
+                              text: nf._.msg('nf-summary-table.ByName'),
+                                value: 'name'
+                            }, {
+                              text: nf._.msg('nf-summary-table.ByType'),
+                                value: 'type'
+                            }],
+                            select: function (option) {
+                                applyFilter();
+                            }
+                        });
+                  } else if (tab === nf._.msg('nf-summary-table.Connections')) {
+                        // ensure the connection table is size properly
+                        var connectionsGrid = $('#connection-summary-table').data('gridInstance');
+                      if (nf.Common.isDefinedAndNotNull(connectionsGrid)) {
+                            connectionsGrid.resizeCanvas();
+    
+                            // update the total number of connections
+                          $('#displayed-items').text(nfCommon.formatInteger(connectionsGrid.getData().getLength()));
+                          $('#total-items').text(nfCommon.formatInteger(connectionsGrid.getData().getLength()));
                         }
-                    });
-                } else if (tab === 'Input Ports') {
-                    // ensure the connection table is size properly
-                    var inputPortsGrid = $('#input-port-summary-table').data('gridInstance');
-                    if (nfCommon.isDefinedAndNotNull(inputPortsGrid)) {
-                        inputPortsGrid.resizeCanvas();
-
-                        // update the total number of input ports
-                        $('#displayed-items').text(nfCommon.formatInteger(inputPortsGrid.getData().getLength()));
-                        $('#total-items').text(nfCommon.formatInteger(inputPortsGrid.getData().getLength()));
-                    }
-
-                    // update the combo for input ports
-                    $('#summary-filter-type').combo({
-                        options: [{
-                            text: 'by name',
-                            value: 'name'
-                        }],
-                        select: function (option) {
-                            applyFilter();
+    
+                        // update the combo for connections
+                        $('#summary-filter-type').combo({
+                            options: [{
+                              text: nf._.msg('nf-summary-table.BySource'),
+                                value: 'sourceName'
+                            }, {
+                              text: nf._.msg('nf-summary-table.ByName'),
+                                value: 'name'
+                            }, {
+                              text: nf._.msg('nf-summary-table.ByDestination'),
+                                value: 'destinationName'
+                            }],
+                            select: function (option) {
+                                applyFilter();
+                            }
+                        });
+                  } else if (tab === nf._.msg('nf-summary-table.InputPorts')) {
+                        // ensure the connection table is size properly
+                        var inputPortsGrid = $('#input-port-summary-table').data('gridInstance');
+                      if (nfCommon.isDefinedAndNotNull(inputPortsGrid)) {
+                            inputPortsGrid.resizeCanvas();
+    
+                            // update the total number of input ports
+                          $('#displayed-items').text(nfCommon.formatInteger(inputPortsGrid.getData().getLength()));
+                          $('#total-items').text(nfCommon.formatInteger(inputPortsGrid.getData().getLength()));
                         }
-                    });
-                } else if (tab === 'Output Ports') {
-                    // ensure the connection table is size properly
-                    var outputPortsGrid = $('#output-port-summary-table').data('gridInstance');
-                    if (nfCommon.isDefinedAndNotNull(outputPortsGrid)) {
-                        outputPortsGrid.resizeCanvas();
-
-                        // update the total number of output ports
-                        $('#displayed-items').text(nfCommon.formatInteger(outputPortsGrid.getData().getLength()));
-                        $('#total-items').text(nfCommon.formatInteger(outputPortsGrid.getData().getLength()));
-                    }
-
-                    // update the combo for output ports
-                    $('#summary-filter-type').combo({
-                        options: [{
-                            text: 'by name',
-                            value: 'name'
-                        }],
-                        select: function (option) {
-                            applyFilter();
+    
+                        // update the combo for input ports
+                        $('#summary-filter-type').combo({
+                            options: [{
+                              text: nf._.msg('nf-summary-table.ByName'),
+                                value: 'name'
+                            }],
+                            select: function (option) {
+                                applyFilter();
+                            }
+                        });
+                  } else if (tab === nf._.msg('nf-summary-table.OutputPorts')) {
+                        // ensure the connection table is size properly
+                        var outputPortsGrid = $('#output-port-summary-table').data('gridInstance');
+                      if (nfCommon.isDefinedAndNotNull(outputPortsGrid)) {
+                            outputPortsGrid.resizeCanvas();
+    
+                            // update the total number of output ports
+                          $('#displayed-items').text(nfCommon.formatInteger(outputPortsGrid.getData().getLength()));
+                          $('#total-items').text(nfCommon.formatInteger(outputPortsGrid.getData().getLength()));
                         }
-                    });
-                } else if (tab === 'Remote Process Groups') {
-                    // ensure the connection table is size properly
-                    var remoteProcessGroupsGrid = $('#remote-process-group-summary-table').data('gridInstance');
-                    if (nfCommon.isDefinedAndNotNull(remoteProcessGroupsGrid)) {
-                        remoteProcessGroupsGrid.resizeCanvas();
-
-                        // update the total number of remote process groups
-                        $('#displayed-items').text(nfCommon.formatInteger(remoteProcessGroupsGrid.getData().getLength()));
-                        $('#total-items').text(nfCommon.formatInteger(remoteProcessGroupsGrid.getData().getLength()));
-                    }
-
-                    // update the combo for remote process groups
-                    $('#summary-filter-type').combo({
-                        options: [{
-                            text: 'by name',
-                            value: 'name'
-                        }, {
-                            text: 'by uri',
-                            value: 'targetUri'
-                        }],
-                        select: function (option) {
-                            applyFilter();
+    
+                        // update the combo for output ports
+                        $('#summary-filter-type').combo({
+                            options: [{
+                              text: nf._.msg('nf-summary-table.ByName'),
+                                value: 'name'
+                            }],
+                            select: function (option) {
+                                applyFilter();
+                            }
+                        });
+                  } else if (tab === nf._.msg('nf-summary-table.RemoteProcessGroups')) {
+                        // ensure the connection table is size properly
+                        var remoteProcessGroupsGrid = $('#remote-process-group-summary-table').data('gridInstance');
+                      if (nfCommon.isDefinedAndNotNull(remoteProcessGroupsGrid)) {
+                            remoteProcessGroupsGrid.resizeCanvas();
+    
+                            // update the total number of remote process groups
+                          $('#displayed-items').text(nfCommon.formatInteger(remoteProcessGroupsGrid.getData().getLength()));
+                          $('#total-items').text(nfCommon.formatInteger(remoteProcessGroupsGrid.getData().getLength()));
                         }
-                    });
-                } else {
-                    // ensure the connection table is size properly
-                    var processGroupGrid = $('#process-group-summary-table').data('gridInstance');
-                    if (nfCommon.isDefinedAndNotNull(processGroupGrid)) {
-                        processGroupGrid.resizeCanvas();
-
-                        // update the total number of process groups
-                        $('#displayed-items').text(nfCommon.formatInteger(processGroupGrid.getData().getLength()));
-                        $('#total-items').text(nfCommon.formatInteger(processGroupGrid.getData().getLength()));
-                    }
-
-                    // update the combo for process groups
-                    $('#summary-filter-type').combo({
-                        options: [{
-                            text: 'by name',
-                            value: 'name'
-                        }],
-                        select: function (option) {
-                            applyFilter();
+    
+                        // update the combo for remote process groups
+                        $('#summary-filter-type').combo({
+                            options: [{
+                              text: nf._.msg('nf-summary-table.ByName'),
+                                value: 'name'
+                            }, {
+                              text: nf._.msg('nf-summary-table.ByUri'),
+                                value: 'targetUri'
+                            }],
+                            select: function (option) {
+                                applyFilter();
+                            }
+                        });
+                    } else {
+                        // ensure the connection table is size properly
+                        var processGroupGrid = $('#process-group-summary-table').data('gridInstance');
+                      if (nfCommon.isDefinedAndNotNull(processGroupGrid)) {
+                            processGroupGrid.resizeCanvas();
+    
+                            // update the total number of process groups
+                          $('#displayed-items').text(nfCommon.formatInteger(processGroupGrid.getData().getLength()));
+                          $('#total-items').text(nfCommon.formatInteger(processGroupGrid.getData().getLength()));
                         }
-                    });
+    
+                        // update the combo for process groups
+                        $('#summary-filter-type').combo({
+                            options: [{
+                              text: nf._.msg('nf-summary-table.ByName'),
+                                value: 'name'
+                            }],
+                            select: function (option) {
+                                applyFilter();
+                            }
+                        });
+                    }
+    
+                    // reset the filter
+                    $('#summary-filter').val('');
+                    applyFilter();
                 }
-
-                // reset the filter
-                $('#summary-filter').val('');
-                applyFilter();
-            }
-        });
-
-        // define a custom formatter for showing more processor details
-        var moreProcessorDetails = function (row, cell, value, columnDef, dataContext) {
-            var markup = '<div title="View Processor Details" class="pointer show-processor-details fa fa-info-circle" style="margin-right: 3px;"></div>';
-
-            // if there are bulletins, render them on the graph
-            if (!nfCommon.isEmpty(dataContext.bulletins)) {
-                markup += '<div class="has-bulletins fa fa-sticky-note-o"></div><span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
-            }
-
-            return markup;
-        };
-
-        // formatter for io
-        var ioFormatter = function (row, cell, value, columnDef, dataContext) {
-            return dataContext.read + ' / ' + dataContext.written;
-        };
-
-        // formatter for tasks
-        var taskTimeFormatter = function (row, cell, value, columnDef, dataContext) {
-            return nfCommon.formatInteger(dataContext.tasks) + ' / ' + dataContext.tasksDuration;
-        };
-
-        // function for formatting the last accessed time
-        var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-            return nfCommon.formatValue(value);
-        };
-
-        // define a custom formatter for the run status column
-        var runStatusFormatter = function (row, cell, value, columnDef, dataContext) {
-            var activeThreadCount = '';
-            if (nfCommon.isDefinedAndNotNull(dataContext.activeThreadCount) && dataContext.activeThreadCount > 0) {
-                activeThreadCount = '(' + dataContext.activeThreadCount + ')';
-            }
-            var classes = nfCommon.escapeHtml(value.toLowerCase());
-            switch (nfCommon.escapeHtml(value.toLowerCase())) {
-                case 'running':
-                    classes += ' fa fa-play running';
-                    break;
-                case 'stopped':
-                    classes += ' fa fa-stop stopped';
-                    break;
-                case 'enabled':
-                    classes += ' fa fa-flash enabled';
-                    break;
-                case 'disabled':
-                    classes += ' icon icon-enable-false disabled';
-                    break;
-                case 'invalid':
-                    classes += ' fa fa-warning invalid';
-                    break;
-                default:
-                    classes += '';
-            }
-            var formattedValue = '<div layout="row"><div class="' + classes + '"></div>';
-            return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + nfCommon.escapeHtml(value) + '</div><div style="float: left; margin-left: 4px;">' + nfCommon.escapeHtml(activeThreadCount) + '</div></div>';
-        };
-
-        // define the input, read, written, and output columns (reused between both tables)
-        var nameColumn = {id: 'name', field: 'name', name: 'Name', sortable: true, resizable: true};
-        var runStatusColumn = {
-            id: 'runStatus',
-            field: 'runStatus',
-            name: 'Run Status',
-            formatter: runStatusFormatter,
-            sortable: true
-        };
-        var inputColumn = {
-            id: 'input',
-            field: 'input',
-            name: '<span class="input-title">In</span>&nbsp;/&nbsp;<span class="input-size-title">Size</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">5 min</span>',
-            toolTip: 'Count / data size in the last 5 min',
-            sortable: true,
-            defaultSortAsc: false,
-            resizable: true
-        };
-        var ioColumn = {
-            id: 'io',
-            field: 'io',
-            name: '<span class="read-title">Read</span>&nbsp;/&nbsp;<span class="written-title">Write</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">5 min</span>',
-            toolTip: 'Data size in the last 5 min',
-            formatter: ioFormatter,
-            sortable: true,
-            defaultSortAsc: false,
-            resizable: true
-        };
-        var outputColumn = {
-            id: 'output',
-            field: 'output',
-            name: '<span class="output-title">Out</span>&nbsp;/&nbsp;<span class="output-size-title">Size</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">5 min</span>',
-            toolTip: 'Count / data size in the last 5 min',
-            sortable: true,
-            defaultSortAsc: false,
-            resizable: true
-        };
-        var tasksTimeColumn = {
-            id: 'tasks',
-            field: 'tasks',
-            name: '<span class="tasks-title">Tasks</span>&nbsp;/&nbsp;<span class="time-title">Time</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">5 min</span>',
-            toolTip: 'Count / duration in the last 5 min',
-            formatter: taskTimeFormatter,
-            sortable: true,
-            defaultSortAsc: false,
-            resizable: true
-        };
-
-        // define the column model for the processor summary table
-        var processorsColumnModel = [
-            {
-                id: 'moreDetails',
-                field: 'moreDetails',
-                name: '&nbsp;',
-                resizable: false,
-                formatter: moreProcessorDetails,
-                sortable: true,
-                width: 50,
-                maxWidth: 50,
-                toolTip: 'Sorts based on presence of bulletins'
-            },
-            nameColumn,
-            {id: 'type', field: 'type', name: 'Type', sortable: true, resizable: true},
-            runStatusColumn,
-            inputColumn,
-            ioColumn,
-            outputColumn,
-            tasksTimeColumn
-        ];
-
-        // determine if the this page is in the shell
-        var isInShell = (top !== window);
-
-        // add an action column if appropriate
-        if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
-            // define how the column is formatted
-            var processorActionFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-
-                if (isInShell) {
-                    markup += '<div class="pointer go-to fa fa-long-arrow-right" title="Go To Processor" style="margin-right: 3px;"></div>';
+            });
+    
+            // define a custom formatter for showing more processor details
+            var moreProcessorDetails = function (row, cell, value, columnDef, dataContext) {
+              var markup = '<div title="'+nf._.msg('nf-summary-table.ViewProcessor')+'" class="pointer show-processor-details fa fa-info-circle" style="margin-right: 3px;"></div>';
+    
+                // if there are bulletins, render them on the graph
+              if (!nfCommon.isEmpty(dataContext.bulletins)) {
+                  markup += '<div class="has-bulletins fa fa-sticky-note-o"></div><span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
                 }
-
-                if (nfCommon.SUPPORTS_SVG) {
-                    markup += '<div class="pointer show-processor-status-history fa fa-area-chart" title="View Status History" style="margin-right: 3px;"></div>';
+    
+                return markup;
+            };
+    
+            // formatter for io
+            var ioFormatter = function (row, cell, value, columnDef, dataContext) {
+                return dataContext.read + ' / ' + dataContext.written;
+            };
+    
+            // formatter for tasks
+            var taskTimeFormatter = function (row, cell, value, columnDef, dataContext) {
+              return nfCommon.formatInteger(dataContext.tasks) + ' / ' + dataContext.tasksDuration;
+            };
+    
+            // function for formatting the last accessed time
+            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
+              return nfCommon.formatValue(value);
+            };
+    
+            // define a custom formatter for the run status column
+            var runStatusFormatter = function (row, cell, value, columnDef, dataContext) {
+                var activeThreadCount = '';
+              if (nfCommon.isDefinedAndNotNull(dataContext.activeThreadCount) && dataContext.activeThreadCount > 0) {
+                    activeThreadCount = '(' + dataContext.activeThreadCount + ')';
                 }
-
-                if (isClustered) {
-                    markup += '<div class="pointer show-cluster-processor-summary fa fa-cubes" title="View Processor Details"></div>';
+              var classes = nfCommon.escapeHtml(value.toLowerCase());
+              switch (nfCommon.escapeHtml(value.toLowerCase())) {
+                    case 'running':
+                      classes += ' fa fa-play running';
+                        break;
+                    case 'stopped':
+                      classes += ' fa fa-stop stopped';
+                        break;
+                    case 'enabled':
+                      classes += ' fa fa-flash enabled';
+                        break;
+                    case 'disabled':
+                      classes += ' icon icon-enable-false disabled';
+                        break;
+                    case 'invalid':
+                      classes += ' fa fa-warning invalid';
+                        break;
+                    default:
+                        classes += '';
                 }
-
-                return markup;
+                var formattedValue = '<div layout="row"><div class="' + classes + '"></div>';
+              return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + nfCommon.escapeHtml(value) + '</div><div style="float: left; margin-left: 4px;">' + nfCommon.escapeHtml(activeThreadCount) + '</div></div>';
             };
-
-            // define the action column for clusters and within the shell
-            processorsColumnModel.push({
-                id: 'actions',
-                name: '&nbsp;',
-                formatter: processorActionFormatter,
-                resizable: false,
-                sortable: false,
-                width: 75,
-                maxWidth: 75
-            });
-        }
-
-        // initialize the templates table
-        var processorsOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-
-        // initialize the dataview
-        var processorsData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        processorsData.setItems([]);
-        processorsData.setFilterArgs({
-            searchString: '',
-            property: 'name'
-        });
-        processorsData.setFilter(filter);
-
-        // initialize the sort
-        sort('processor-summary-table', {
-            columnId: 'name',
-            sortAsc: true
-        }, processorsData);
-
-        // initialize the grid
-        var processorsGrid = new Slick.Grid('#processor-summary-table', processorsData, processorsColumnModel, processorsOptions);
-        processorsGrid.setSelectionModel(new Slick.RowSelectionModel());
-        processorsGrid.registerPlugin(new Slick.AutoTooltips());
-        processorsGrid.setSortColumn('name', true);
-        processorsGrid.onSort.subscribe(function (e, args) {
+    
+            // define the input, read, written, and output columns (reused between both tables)
+          var nameColumn = {id: 'name', field: 'name', name: nf._.msg('nf-summary-table.Name'), sortable: true, resizable: true};
+            var runStatusColumn = {
+                id: 'runStatus',
+                field: 'runStatus',
+              name: nf._.msg('nf-summary-table.RunStatus'),
+                formatter: runStatusFormatter,
+                sortable: true
+            };
+            var inputColumn = {
+                id: 'input',
+                field: 'input',
+              name: '<span class="input-title">'+nf._.msg('nf-summary-table.In')+'</span>&nbsp;/&nbsp;<span class="input-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip:nf._.msg('nf-summary-table.Message'),
+                sortable: true,
+                defaultSortAsc: false,
+                resizable: true
+            };
+            var ioColumn = {
+                id: 'io',
+                field: 'io',
+              name: '<span class="read-title">'+nf._.msg('nf-summary-table.Read')+'</span>&nbsp;/&nbsp;<span class="written-title">'+nf._.msg('nf-summary-table.Write')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip: nf._.msg('nf-summary-table.Message1'),
+                formatter: ioFormatter,
+                sortable: true,
+                defaultSortAsc: false,
+                resizable: true
+            };
+            var outputColumn = {
+                id: 'output',
+                field: 'output',
+              name: '<span class="output-title">'+nf._.msg('nf-summary-table.Out')+'</span>&nbsp;/&nbsp;<span class="output-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip: nf._.msg('nf-summary-table.Message'),
+                sortable: true,
+                defaultSortAsc: false,
+                resizable: true
+            };
+            var tasksTimeColumn = {
+                id: 'tasks',
+                field: 'tasks',
+              name: '<span class="tasks-title">'+nf._.msg('nf-summary-table.Tasks')+'</span>&nbsp;/&nbsp;<span class="time-title">'+nf._.msg('nf-summary-table.Time')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip: nf._.msg('nf-summary-table.Message2'),
+                formatter: taskTimeFormatter,
+                sortable: true,
+                defaultSortAsc: false,
+                resizable: true
+            };
+    
+            // define the column model for the processor summary table
+            var processorsColumnModel = [
+                {
+                    id: 'moreDetails',
+                    field: 'moreDetails',
+                    name: '&nbsp;',
+                    resizable: false,
+                    formatter: moreProcessorDetails,
+                    sortable: true,
+                    width: 50,
+                    maxWidth: 50,
+                  toolTip: nf._.msg('nf-summary-table.Message4')
+                },
+                nameColumn,
+              {id: 'type', field: 'type', name: nf._.msg('nf-summary-table.Type'), sortable: true, resizable: true},
+                runStatusColumn,
+                inputColumn,
+                ioColumn,
+                outputColumn,
+                tasksTimeColumn
+            ];
+    
+            // determine if the this page is in the shell
+            var isInShell = (top !== window);
+    
+            // add an action column if appropriate
+          if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
+                // define how the column is formatted
+                var processorActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (isInShell) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToProcessor')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                  if (nfCommon.SUPPORTS_SVG) {
+                      markup += '<div class="pointer show-processor-status-history fa fa-area-chart" title="'+nf._.msg('nf-summary-table.ViewStatus')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                    if (isClustered) {
+                      markup += '<div class="pointer show-cluster-processor-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewProcessor')+'"></div>';
+                    }
+    
+                    return markup;
+                };
+    
+                // define the action column for clusters and within the shell
+                processorsColumnModel.push({
+                    id: 'actions',
+                    name: '&nbsp;',
+                    formatter: processorActionFormatter,
+                    resizable: false,
+                    sortable: false,
+                    width: 75,
+                    maxWidth: 75
+                });
+            }
+    
+            // initialize the templates table
+            var processorsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var processorsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            processorsData.setItems([]);
+            processorsData.setFilterArgs({
+                searchString: '',
+                property: 'name'
+            });
+            processorsData.setFilter(filter);
+    
+            // initialize the sort
             sort('processor-summary-table', {
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
+                columnId: 'name',
+                sortAsc: true
             }, processorsData);
-        });
-
-        // configure a click listener
-        processorsGrid.onClick.subscribe(function (e, args) {
-            var target = $(e.target);
-
-            // get the node at this row
-            var item = processorsData.getItem(args.row);
-
-            // determine the desired action
-            if (processorsGrid.getColumns()[args.cell].id === 'actions') {
-                if (target.hasClass('go-to')) {
-                    goTo(item.groupId, item.id);
-                } else if (target.hasClass('show-processor-status-history')) {
-                    nfStatusHistory.showProcessorChart(item.groupId, item.id);
-                } else if (target.hasClass('show-cluster-processor-summary')) {
-                    // load the cluster processor summary
-                    loadClusterProcessorSummary(item.groupId, item.id);
-
-                    // hide the summary loading indicator
-                    $('#summary-loading-container').hide();
-
-                    // show the dialog
-                    $('#cluster-processor-summary-dialog').modal('show');
-
-                    // resize after opening
-                    clusterProcessorsGrid.resizeCanvas();
+    
+            // initialize the grid
+            var processorsGrid = new Slick.Grid('#processor-summary-table', processorsData, processorsColumnModel, processorsOptions);
+            processorsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            processorsGrid.registerPlugin(new Slick.AutoTooltips());
+            processorsGrid.setSortColumn('name', true);
+            processorsGrid.onSort.subscribe(function (e, args) {
+                sort('processor-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, processorsData);
+            });
+    
+            // configure a click listener
+            processorsGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = processorsData.getItem(args.row);
+    
+                // determine the desired action
+                if (processorsGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('go-to')) {
+                        goTo(item.groupId, item.id);
+                    } else if (target.hasClass('show-processor-status-history')) {
+                      nfStatusHistory.showProcessorChart(item.groupId, item.id);
+                    } else if (target.hasClass('show-cluster-processor-summary')) {
+                        // load the cluster processor summary
+                        loadClusterProcessorSummary(item.groupId, item.id);
+    
+                        // hide the summary loading indicator
+                        $('#summary-loading-container').hide();
+    
+                        // show the dialog
+                        $('#cluster-processor-summary-dialog').modal('show');
+    
+                        // resize after opening
+                        clusterProcessorsGrid.resizeCanvas();
+                    }
+                } else if (processorsGrid.getColumns()[args.cell].id === 'moreDetails') {
+                    if (target.hasClass('show-processor-details')) {
+                      nfProcessorDetails.showDetails(item.groupId, item.id);
+                    }
                 }
-            } else if (processorsGrid.getColumns()[args.cell].id === 'moreDetails') {
-                if (target.hasClass('show-processor-details')) {
-                    nfProcessorDetails.showDetails(item.groupId, item.id);
+            });
+    
+            // wire up the dataview to the grid
+            processorsData.onRowCountChanged.subscribe(function (e, args) {
+                processorsGrid.updateRowCount();
+                processorsGrid.render();
+    
+                // update the total number of displayed processors if necessary
+                if ($('#processor-summary-table').is(':visible')) {
+                  $('#displayed-items').text(nfCommon.formatInteger(args.current));
                 }
-            }
-        });
-
-        // wire up the dataview to the grid
-        processorsData.onRowCountChanged.subscribe(function (e, args) {
-            processorsGrid.updateRowCount();
-            processorsGrid.render();
-
-            // update the total number of displayed processors if necessary
-            if ($('#processor-summary-table').is(':visible')) {
-                $('#displayed-items').text(nfCommon.formatInteger(args.current));
-            }
-        });
-        processorsData.onRowsChanged.subscribe(function (e, args) {
-            processorsGrid.invalidateRows(args.rows);
-            processorsGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#processor-summary-table').data('gridInstance', processorsGrid).on('mouseenter', 'div.slick-cell', function (e) {
-            var bulletinIcon = $(this).find('div.has-bulletins');
-            if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                var processorId = $(this).find('span.row-id').text();
-
-                // get the status item
-                var item = processorsData.getItemById(processorId);
-
-                // format the tooltip
-                var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
-                var tooltip = nfCommon.formatUnorderedList(bulletins);
-
-                // show the tooltip
-                if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                    bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                        content: tooltip,
-                        position: {
-                            container: $('#summary'),
-                            at: 'bottom right',
-                            my: 'top left',
-                            adjust: {
-                                x: 4,
-                                y: 4
+            });
+            processorsData.onRowsChanged.subscribe(function (e, args) {
+                processorsGrid.invalidateRows(args.rows);
+                processorsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#processor-summary-table').data('gridInstance', processorsGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var processorId = $(this).find('span.row-id').text();
+    
+                    // get the status item
+                    var item = processorsData.getItemById(processorId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                            content: tooltip,
+                            position: {
+                                container: $('#summary'),
+                                at: 'bottom right',
+                                my: 'top left',
+                                adjust: {
+                                    x: 4,
+                                    y: 4
+                                }
                             }
-                        }
-                    }));
+                        }));
+                    }
                 }
-            }
-        });
-
-        // initialize the cluster processor summary dialog
-        $('#cluster-processor-summary-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Cluster Processor Summary',
-            buttons: [{
-                buttonText: 'Close',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
+            });
+    
+            // initialize the cluster processor summary dialog
+            $('#cluster-processor-summary-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.ClusterProcessorSummary'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the cluster processor summary dialog
+                            $('#cluster-processor-id').text('');
+                            $('#cluster-processor-name').text('');
+    
+                            // close the dialog
+                            this.modal('hide');
+                        }
+                    }
+                }],
                 handler: {
-                    click: function () {
-                        // clear the cluster processor summary dialog
-                        $('#cluster-processor-id').text('');
-                        $('#cluster-processor-name').text('');
-
-                        // close the dialog
-                        this.modal('hide');
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
                     }
                 }
-            }],
-            handler: {
-                close: function () {
-                    // show the summary loading container
-                    $('#summary-loading-container').show();
-                }
-            }
-        });
-
-        // cluster processor refresh
-        $('#cluster-processor-refresh-button').click(function () {
-            loadClusterProcessorSummary($('#cluster-processor-group-id').text(), $('#cluster-processor-id').text());
-        });
-
-        // initialize the cluster processor column model
-        var clusterProcessorsColumnModel = [
-            {id: 'node', field: 'node', name: 'Node', sortable: true, resizable: true},
-            runStatusColumn,
-            inputColumn,
-            ioColumn,
-            outputColumn,
-            tasksTimeColumn
-        ];
-
-        // initialize the options for the cluster processors table
-        var clusterProcessorsOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-
-        // initialize the dataview
-        var clusterProcessorsData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        clusterProcessorsData.setItems([]);
-
-        // initialize the sort
-        sort('cluster-processor-summary-table', {
-            columnId: 'node',
-            sortAsc: true
-        }, clusterProcessorsData);
-
-        // initialize the grid
-        var clusterProcessorsGrid = new Slick.Grid('#cluster-processor-summary-table', clusterProcessorsData, clusterProcessorsColumnModel, clusterProcessorsOptions);
-        clusterProcessorsGrid.setSelectionModel(new Slick.RowSelectionModel());
-        clusterProcessorsGrid.registerPlugin(new Slick.AutoTooltips());
-        clusterProcessorsGrid.setSortColumn('node', true);
-        clusterProcessorsGrid.onSort.subscribe(function (e, args) {
+            });
+    
+            // cluster processor refresh
+            $('#cluster-processor-refresh-button').click(function () {
+                loadClusterProcessorSummary($('#cluster-processor-group-id').text(), $('#cluster-processor-id').text());
+            });
+    
+            // initialize the cluster processor column model
+            var clusterProcessorsColumnModel = [
+              {id: 'node', field: 'node', name: nf._.msg('Node'), sortable: true, resizable: true},
+                runStatusColumn,
+                inputColumn,
+                ioColumn,
+                outputColumn,
+                tasksTimeColumn
+            ];
+    
+            // initialize the options for the cluster processors table
+            var clusterProcessorsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var clusterProcessorsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            clusterProcessorsData.setItems([]);
+    
+            // initialize the sort
             sort('cluster-processor-summary-table', {
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
+                columnId: 'node',
+                sortAsc: true
             }, clusterProcessorsData);
-        });
-
-        // wire up the dataview to the grid
-        clusterProcessorsData.onRowCountChanged.subscribe(function (e, args) {
-            clusterProcessorsGrid.updateRowCount();
-            clusterProcessorsGrid.render();
-        });
-        clusterProcessorsData.onRowsChanged.subscribe(function (e, args) {
-            clusterProcessorsGrid.invalidateRows(args.rows);
-            clusterProcessorsGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#cluster-processor-summary-table').data('gridInstance', clusterProcessorsGrid);
-
-        // define a custom formatter for showing more processor details
-        var moreConnectionDetails = function (row, cell, value, columnDef, dataContext) {
-            return '<div class="pointer show-connection-details fa fa-info-circle" title="View Connection Details" style="margin-top: 5px;"></div>';
-        };
-
-        var backpressureFormatter = function (row, cell, value, columnDef, dataContext) {
-            var percentUseCount = 'NA';
-            if (nfCommon.isDefinedAndNotNull(dataContext.percentUseCount)) {
-                percentUseCount = dataContext.percentUseCount + '%';
-            }
-            var percentUseBytes = 'NA';
-            if (nfCommon.isDefinedAndNotNull(dataContext.percentUseBytes)) {
-                percentUseBytes = dataContext.percentUseBytes + '%';
-            }
-            return percentUseCount + ' / ' + percentUseBytes;
-        };
-
-        // define the input, read, written, and output columns (reused between both tables)
-        var queueColumn = {
-            id: 'queued',
-            field: 'queued',
-            name: '<span class="queued-title">Queue</span>&nbsp;/&nbsp;<span class="queued-size-title">Size</span>',
-            sortable: true,
-            defaultSortAsc: false,
-            resize: true
-        };
-
-        // define the backpressure column (reused between both tables)
-        var backpressureColumn = {
-            id: 'backpressure',
-            field: 'backpressure',
-            name: '<span class="backpressure-object-title">Queue</span>&nbsp;/&nbsp;<span class="backpressure-data-size-title">Size</span> Threshold',
-            sortable: true,
-            defaultSortAsc: false,
-            formatter: backpressureFormatter,
-            resize: true
-        };
-
-        // define the column model for the summary table
-        var connectionsColumnModel = [
-            {
-                id: 'moreDetails',
-                name: '&nbsp;',
-                sortable: false,
-                resizable: false,
-                formatter: moreConnectionDetails,
-                width: 50,
-                maxWidth: 50
-            },
-            {id: 'sourceName', field: 'sourceName', name: 'Source Name', sortable: true, resizable: true},
-            {id: 'name', field: 'name', name: 'Name', sortable: true, resizable: true, formatter: valueFormatter},
-            {
-                id: 'destinationName',
-                field: 'destinationName',
-                name: 'Destination Name',
+    
+            // initialize the grid
+            var clusterProcessorsGrid = new Slick.Grid('#cluster-processor-summary-table', clusterProcessorsData, clusterProcessorsColumnModel, clusterProcessorsOptions);
+            clusterProcessorsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            clusterProcessorsGrid.registerPlugin(new Slick.AutoTooltips());
+            clusterProcessorsGrid.setSortColumn('node', true);
+            clusterProcessorsGrid.onSort.subscribe(function (e, args) {
+                sort('cluster-processor-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, clusterProcessorsData);
+            });
+    
+            // wire up the dataview to the grid
+            clusterProcessorsData.onRowCountChanged.subscribe(function (e, args) {
+                clusterProcessorsGrid.updateRowCount();
+                clusterProcessorsGrid.render();
+            });
+            clusterProcessorsData.onRowsChanged.subscribe(function (e, args) {
+                clusterProcessorsGrid.invalidateRows(args.rows);
+                clusterProcessorsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#cluster-processor-summary-table').data('gridInstance', clusterProcessorsGrid);
+    
+            // define a custom formatter for showing more processor details
+            var moreConnectionDetails = function (row, cell, value, columnDef, dataContext) {
+              return '<div class="pointer show-connection-details fa fa-info-circle" title="'+nf._.msg('nf-summary-table.ViewConnect')+'" style="margin-top: 5px;"></div>';
+          };
+  
+          var backpressureFormatter = function (row, cell, value, columnDef, dataContext) {
+              var percentUseCount = 'NA';
+              if (nfCommon.isDefinedAndNotNull(dataContext.percentUseCount)) {
+                  percentUseCount = dataContext.percentUseCount + '%';
+              }
+              var percentUseBytes = 'NA';
+              if (nfCommon.isDefinedAndNotNull(dataContext.percentUseBytes)) {
+                  percentUseBytes = dataContext.percentUseBytes + '%';
+              }
+              return percentUseCount + ' / ' + percentUseBytes;
+            };
+    
+            // define the input, read, written, and output columns (reused between both tables)
+            var queueColumn = {
+                id: 'queued',
+                field: 'queued',
+              name: '<span class="queued-title">'+nf._.msg('nf-summary-table.Queue')+'</span>&nbsp;/&nbsp;<span class="queued-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>',
                 sortable: true,
-                resizable: true
-            },
-            inputColumn,
-            queueColumn,
-            backpressureColumn,
-            outputColumn
-        ];
-
-        // add an action column if appropriate
-        if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
-            // define how the column is formatted
-            var connectionActionFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-
-                if (isInShell) {
-                    markup += '<div class="pointer go-to fa fa-long-arrow-right" title="Go To Connection" style="margin-right: 3px;"></div>';
-                }
-
-                if (nfCommon.SUPPORTS_SVG) {
-                    markup += '<div class="pointer show-connection-status-history fa fa-area-chart" title="View Status History" style="margin-right: 3px;"></div>';
-                }
-
-                if (isClustered) {
-                    markup += '<div class="pointer show-cluster-connection-summary fa fa-cubes" title="View Connection Details"></div>';
-                }
-
-                return markup;
+                defaultSortAsc: false,
+              resize: true
+          };
+  
+          // define the backpressure column (reused between both tables)
+          var backpressureColumn = {
+              id: 'backpressure',
+              field: 'backpressure',
+              name: '<span class="backpressure-object-title">Queue</span>&nbsp;/&nbsp;<span class="backpressure-data-size-title">Size</span> Threshold',
+              sortable: true,
+              defaultSortAsc: false,
+              formatter: backpressureFormatter,
+                resize: true
             };
-
-            // define the action column for clusters and within the shell
-            connectionsColumnModel.push({
-                id: 'actions',
-                name: '&nbsp;',
-                formatter: connectionActionFormatter,
-                resizable: false,
-                sortable: false,
-                width: 75,
-                maxWidth: 75
-            });
-        }
-
-        // initialize the templates table
-        var connectionsOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-
-        // initialize the dataview
-        var connectionsData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        connectionsData.setItems([]);
-        connectionsData.setFilterArgs({
-            searchString: '',
-            property: 'sourceName'
-        });
-        connectionsData.setFilter(filter);
-
-        // initialize the sort
-        sort('connection-summary-table', {
-            columnId: 'sourceName',
-            sortAsc: true
-        }, connectionsData);
-
-        // initialize the grid
-        var connectionsGrid = new Slick.Grid('#connection-summary-table', connectionsData, connectionsColumnModel, connectionsOptions);
-        connectionsGrid.setSelectionModel(new Slick.RowSelectionModel());
-        connectionsGrid.registerPlugin(new Slick.AutoTooltips());
-        connectionsGrid.setSortColumn('sourceName', true);
-        connectionsGrid.onSort.subscribe(function (e, args) {
+    
+            // define the column model for the summary table
+            var connectionsColumnModel = [
+                {
+                    id: 'moreDetails',
+                    name: '&nbsp;',
+                    sortable: false,
+                    resizable: false,
+                    formatter: moreConnectionDetails,
+                    width: 50,
+                    maxWidth: 50
+                },
+              {id: 'sourceName', field: 'sourceName', name: nf._.msg('nf-summary-table.SourceName'), sortable: true, resizable: true},
+              {id: 'name', field: 'name', name: nf._.msg('nf-summary-table.Name'), sortable: true, resizable: true, formatter: valueFormatter},
+                {
+                    id: 'destinationName',
+                    field: 'destinationName',
+                  name: nf._.msg('nf-summary-table.DestinationName'),
+                    sortable: true,
+                    resizable: true
+                },
+                inputColumn,
+                queueColumn,
+              backpressureColumn,
+                outputColumn
+            ];
+    
+            // add an action column if appropriate
+          if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
+                // define how the column is formatted
+                var connectionActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (isInShell) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToConnect')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                  if (nfCommon.SUPPORTS_SVG) {
+                      markup += '<div class="pointer show-connection-status-history fa fa-area-chart" title="'+nf._.msg('nf-summary-table.ViewStatus')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                    if (isClustered) {
+                      markup += '<div class="pointer show-cluster-connection-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewConnect')+'"></div>';
+                    }
+    
+                    return markup;
+                };
+    
+                // define the action column for clusters and within the shell
+                connectionsColumnModel.push({
+                    id: 'actions',
+                    name: '&nbsp;',
+                    formatter: connectionActionFormatter,
+                    resizable: false,
+                    sortable: false,
+                    width: 75,
+                    maxWidth: 75
+                });
+            }
+    
+            // initialize the templates table
+            var connectionsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var connectionsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            connectionsData.setItems([]);
+            connectionsData.setFilterArgs({
+                searchString: '',
+                property: 'sourceName'
+            });
+            connectionsData.setFilter(filter);
+    
+            // initialize the sort
             sort('connection-summary-table', {
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
+                columnId: 'sourceName',
+                sortAsc: true
             }, connectionsData);
-        });
-
-        // configure a click listener
-        connectionsGrid.onClick.subscribe(function (e, args) {
-            var target = $(e.target);
-
-            // get the node at this row
-            var item = connectionsData.getItem(args.row);
-
-            // determine the desired action
-            if (connectionsGrid.getColumns()[args.cell].id === 'actions') {
-                if (target.hasClass('go-to')) {
-                    goTo(item.groupId, item.id);
-                } else if (target.hasClass('show-connection-status-history')) {
-                    nfStatusHistory.showConnectionChart(item.groupId, item.id);
-                } else if (target.hasClass('show-cluster-connection-summary')) {
-                    // load the cluster processor summary
-                    loadClusterConnectionSummary(item.groupId, item.id);
-
-                    // hide the summary loading indicator
-                    $('#summary-loading-container').hide();
-
-                    // show the dialog
-                    $('#cluster-connection-summary-dialog').modal('show');
-
-                    // resize after opening
-                    clusterConnectionsGrid.resizeCanvas();
+    
+            // initialize the grid
+            var connectionsGrid = new Slick.Grid('#connection-summary-table', connectionsData, connectionsColumnModel, connectionsOptions);
+            connectionsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            connectionsGrid.registerPlugin(new Slick.AutoTooltips());
+            connectionsGrid.setSortColumn('sourceName', true);
+            connectionsGrid.onSort.subscribe(function (e, args) {
+                sort('connection-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, connectionsData);
+            });
+    
+            // configure a click listener
+            connectionsGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = connectionsData.getItem(args.row);
+    
+                // determine the desired action
+                if (connectionsGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('go-to')) {
+                        goTo(item.groupId, item.id);
+                    } else if (target.hasClass('show-connection-status-history')) {
+                      nfStatusHistory.showConnectionChart(item.groupId, item.id);
+                    } else if (target.hasClass('show-cluster-connection-summary')) {
+                        // load the cluster processor summary
+                        loadClusterConnectionSummary(item.groupId, item.id);
+    
+                        // hide the summary loading indicator
+                        $('#summary-loading-container').hide();
+    
+                        // show the dialog
+                        $('#cluster-connection-summary-dialog').modal('show');
+    
+                        // resize after opening
+                        clusterConnectionsGrid.resizeCanvas();
+                    }
+                } else if (connectionsGrid.getColumns()[args.cell].id === 'moreDetails') {
+                    if (target.hasClass('show-connection-details')) {
+                      nfConnectionDetails.showDetails(item.groupId, item.id);
+                    }
                 }
-            } else if (connectionsGrid.getColumns()[args.cell].id === 'moreDetails') {
-                if (target.hasClass('show-connection-details')) {
-                    nfConnectionDetails.showDetails(item.groupId, item.id);
+            });
+    
+            // wire up the dataview to the grid
+            connectionsData.onRowCountChanged.subscribe(function (e, args) {
+                connectionsGrid.updateRowCount();
+                connectionsGrid.render();
+    
+                // update the total number of displayed processors, if necessary
+                if ($('#connection-summary-table').is(':visible')) {
+                  $('#displayed-items').text(nfCommon.formatInteger(args.current));
                 }
-            }
-        });
-
-        // wire up the dataview to the grid
-        connectionsData.onRowCountChanged.subscribe(function (e, args) {
-            connectionsGrid.updateRowCount();
-            connectionsGrid.render();
-
-            // update the total number of displayed processors, if necessary
-            if ($('#connection-summary-table').is(':visible')) {
-                $('#displayed-items').text(nfCommon.formatInteger(args.current));
-            }
-        });
-        connectionsData.onRowsChanged.subscribe(function (e, args) {
-            connectionsGrid.invalidateRows(args.rows);
-            connectionsGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#connection-summary-table').data('gridInstance', connectionsGrid);
-
-        // initialize the cluster connection summary dialog
-        $('#cluster-connection-summary-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Cluster Connection Summary',
-            buttons: [{
-                buttonText: 'Close',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
+            });
+            connectionsData.onRowsChanged.subscribe(function (e, args) {
+                connectionsGrid.invalidateRows(args.rows);
+                connectionsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#connection-summary-table').data('gridInstance', connectionsGrid);
+    
+            // initialize the cluster connection summary dialog
+            $('#cluster-connection-summary-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.ClusterConnectionSummary'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the cluster connection summary dialog
+                            $('#cluster-connection-id').text('');
+                            $('#cluster-connection-name').text('');
+    
+                            // close the dialog
+                            this.modal('hide');
+                        }
+                    }
+                }],
                 handler: {
-                    click: function () {
-                        // clear the cluster connection summary dialog
-                        $('#cluster-connection-id').text('');
-                        $('#cluster-connection-name').text('');
-
-                        // close the dialog
-                        this.modal('hide');
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
                     }
                 }
-            }],
-            handler: {
-                close: function () {
-                    // show the summary loading container
-                    $('#summary-loading-container').show();
-                }
-            }
-        });
-
-        // cluster connection refresh
-        $('#cluster-connection-refresh-button').click(function () {
-            loadClusterConnectionSummary($('#cluster-connection-group-id').text(), $('#cluster-connection-id').text());
-        });
-
-        // initialize the cluster processor column model
-        var clusterConnectionsColumnModel = [
-            {id: 'node', field: 'node', name: 'Node', sortable: true, resizable: true},
-            inputColumn,
-            queueColumn,
-            backpressureColumn,
-            outputColumn
-        ];
-
-        // initialize the options for the cluster processors table
-        var clusterConnectionsOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-
-        // initialize the dataview
-        var clusterConnectionsData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        clusterConnectionsData.setItems([]);
-
-        // initialize the sort
-        sort('cluster-connection-summary-table', {
-            columnId: 'node',
-            sortAsc: true
-        }, clusterConnectionsData);
-
-        // initialize the grid
-        var clusterConnectionsGrid = new Slick.Grid('#cluster-connection-summary-table', clusterConnectionsData, clusterConnectionsColumnModel, clusterConnectionsOptions);
-        clusterConnectionsGrid.setSelectionModel(new Slick.RowSelectionModel());
-        clusterConnectionsGrid.registerPlugin(new Slick.AutoTooltips());
-        clusterConnectionsGrid.setSortColumn('node', true);
-        clusterConnectionsGrid.onSort.subscribe(function (e, args) {
+            });
+    
+            // cluster connection refresh
+            $('#cluster-connection-refresh-button').click(function () {
+                loadClusterConnectionSummary($('#cluster-connection-group-id').text(), $('#cluster-connection-id').text());
+            });
+    
+            // initialize the cluster processor column model
+            var clusterConnectionsColumnModel = [
+              {id: 'node', field: 'node', name: nf._.msg('nf-summary-table.Node'), sortable: true, resizable: true},
+                inputColumn,
+                queueColumn,
+              backpressureColumn,
+                outputColumn
+            ];
+    
+            // initialize the options for the cluster processors table
+            var clusterConnectionsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var clusterConnectionsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            clusterConnectionsData.setItems([]);
+    
+            // initialize the sort
             sort('cluster-connection-summary-table', {
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
+                columnId: 'node',
+                sortAsc: true
             }, clusterConnectionsData);
-        });
-
-        // wire up the dataview to the grid
-        clusterConnectionsData.onRowCountChanged.subscribe(function (e, args) {
-            clusterConnectionsGrid.updateRowCount();
-            clusterConnectionsGrid.render();
-        });
-        clusterConnectionsData.onRowsChanged.subscribe(function (e, args) {
-            clusterConnectionsGrid.invalidateRows(args.rows);
-            clusterConnectionsGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#cluster-connection-summary-table').data('gridInstance', clusterConnectionsGrid);
-
-        // define a custom formatter for showing more port/group details
-        var moreDetails = function (row, cell, value, columnDef, dataContext) {
-            var markup = '';
-
-            // if there are bulletins, render them on the graph
-            if (!nfCommon.isEmpty(dataContext.bulletins)) {
-                markup += '<div class="has-bulletins fa fa-sticky-note-o" style="margin-top: 5px; margin-left: 5px; float: left;"></div><span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
-            }
-
-            return markup;
-        };
-
-        var moreDetailsColumn = {
-            id: 'moreDetails',
-            field: 'moreDetails',
-            name: '&nbsp;',
-            resizable: false,
-            formatter: moreDetails,
-            sortable: true,
-            width: 50,
-            maxWidth: 50,
-            toolTip: 'Sorts based on presence of bulletins'
-        };
-        var transferredColumn = {
-            id: 'transferred',
-            field: 'transferred',
-            name: '<span class="transferred-title">Transferred</span>&nbsp;/&nbsp;<span class="transferred-size-title">Size</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">5 min</span>',
-            toolTip: 'Count / data size transferred to and from connections in the last 5 min',
-            resizable: true,
-            defaultSortAsc: false,
-            sortable: true
-        };
-        var sentColumn = {
-            id: 'sent',
-            field: 'sent',
-            name: '<span class="sent-title">Sent</span>&nbsp;/&nbsp;<span class="sent-size-title">Size</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">5 min</span>',
-            toolTip: 'Count / data size in the last 5 min',
-            sortable: true,
-            defaultSortAsc: false,
-            resizable: true
-        };
-        var receivedColumn = {
-            id: 'received',
-            field: 'received',
-            name: '<span class="received-title">Received</span>&nbsp;/&nbsp;<span class="received-size-title">Size</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">5 min</span>',
-            toolTip: 'Count / data size in the last 5 min',
-            sortable: true,
-            defaultSortAsc: false,
-            resizable: true
-        };
-
-        // define the column model for the summary table
-        var processGroupsColumnModel = [
-            moreDetailsColumn,
-            {id: 'name', field: 'name', name: 'Name', sortable: true, resizable: true, formatter: valueFormatter},
-            transferredColumn,
-            inputColumn,
-            ioColumn,
-            outputColumn,
-            sentColumn,
-            receivedColumn
-        ];
-
-        // add an action column if appropriate
-        if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
-            // define how the column is formatted
-            var processGroupActionFormatter = function (row, cell, value, columnDef, dataContext) {
+    
+            // initialize the grid
+            var clusterConnectionsGrid = new Slick.Grid('#cluster-connection-summary-table', clusterConnectionsData, clusterConnectionsColumnModel, clusterConnectionsOptions);
+            clusterConnectionsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            clusterConnectionsGrid.registerPlugin(new Slick.AutoTooltips());
+            clusterConnectionsGrid.setSortColumn('node', true);
+            clusterConnectionsGrid.onSort.subscribe(function (e, args) {
+                sort('cluster-connection-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, clusterConnectionsData);
+            });
+    
+            // wire up the dataview to the grid
+            clusterConnectionsData.onRowCountChanged.subscribe(function (e, args) {
+                clusterConnectionsGrid.updateRowCount();
+                clusterConnectionsGrid.render();
+            });
+            clusterConnectionsData.onRowsChanged.subscribe(function (e, args) {
+                clusterConnectionsGrid.invalidateRows(args.rows);
+                clusterConnectionsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#cluster-connection-summary-table').data('gridInstance', clusterConnectionsGrid);
+    
+            // define a custom formatter for showing more port/group details
+            var moreDetails = function (row, cell, value, columnDef, dataContext) {
                 var markup = '';
-
-                if (isInShell && dataContext.groupId !== null) {
-                    markup += '<div class="pointer go-to fa fa-long-arrow-right" title="Go To Process Group" style="margin-right: 3px;"></div>';
-                }
-
-                if (nfCommon.SUPPORTS_SVG) {
-                    markup += '<div class="pointer show-process-group-status-history fa fa-area-chart" title="View Status History" style="margin-right: 3px;"></div>';
+    
+                // if there are bulletins, render them on the graph
+              if (!nfCommon.isEmpty(dataContext.bulletins)) {
+                  markup += '<div class="has-bulletins fa fa-sticky-note-o" style="margin-top: 5px; margin-left: 5px; float: left;"></div><span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
                 }
-
-                if (isClustered) {
-                    markup += '<div class="pointer show-cluster-process-group-summary fa fa-cubes" title="View Process Group Details"></div>';
-                }
-
+    
                 return markup;
             };
-
-            // define the action column for clusters and within the shell
-            processGroupsColumnModel.push({
-                id: 'actions',
+    
+            var moreDetailsColumn = {
+                id: 'moreDetails',
+                field: 'moreDetails',
                 name: '&nbsp;',
-                formatter: processGroupActionFormatter,
                 resizable: false,
-                sortable: false,
-                width: 75,
-                maxWidth: 75
-            });
-        }
-
-        // initialize the templates table
-        var processGroupsOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-
-        // initialize the dataview
-        var processGroupsData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        processGroupsData.setItems([]);
-        processGroupsData.setFilterArgs({
-            searchString: '',
-            property: 'name'
-        });
-        processGroupsData.setFilter(filter);
-
-        // initialize the sort
-        sort('process-group-summary-table', {
-            columnId: 'name',
-            sortAsc: true
-        }, processGroupsData);
-
-        // initialize the grid
-        var processGroupsGrid = new Slick.Grid('#process-group-summary-table', processGroupsData, processGroupsColumnModel, processGroupsOptions);
-        processGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
-        processGroupsGrid.registerPlugin(new Slick.AutoTooltips());
-        processGroupsGrid.setSortColumn('name', true);
-        processGroupsGrid.onSort.subscribe(function (e, args) {
+                formatter: moreDetails,
+                sortable: true,
+                width: 50,
+                maxWidth: 50,
+              toolTip: nf._.msg('nf-summary-table.Message4')
+            };
+            var transferredColumn = {
+                id: 'transferred',
+                field: 'transferred',
+              name: '<span class="transferred-title">'+nf._.msg('nf-summary-table.Transferred')+'</span>&nbsp;/&nbsp;<span class="transferred-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip: nf._.msg('nf-summary-table.Message3'),
+                resizable: true,
+                defaultSortAsc: false,
+                sortable: true
+            };
+            var sentColumn = {
+                id: 'sent',
+                field: 'sent',
+              name: '<span class="sent-title">'+nf._.msg('nf-summary-table.Sent')+'</span>&nbsp;/&nbsp;<span class="sent-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip: nf._.msg('nf-summary-table.Message'),
+                sortable: true,
+                defaultSortAsc: false,
+                resizable: true
+            };
+            var receivedColumn = {
+                id: 'received',
+                field: 'received',
+              name: '<span class="received-title">'+nf._.msg('nf-summary-table.Received')+'</span>&nbsp;/&nbsp;<span class="received-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip: nf._.msg('nf-summary-table.Message'),
+                sortable: true,
+                defaultSortAsc: false,
+                resizable: true
+            };
+    
+            // define the column model for the summary table
+            var processGroupsColumnModel = [
+                moreDetailsColumn,
+              {id: 'name', field: 'name', name: nf._.msg('nf-summary-table.Name'), sortable: true, resizable: true, formatter: valueFormatter},
+                transferredColumn,
+                inputColumn,
+                ioColumn,
+                outputColumn,
+                sentColumn,
+                receivedColumn
+            ];
+    
+            // add an action column if appropriate
+          if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
+                // define how the column is formatted
+                var processGroupActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (isInShell && dataContext.groupId !== null) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToProcessor')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                  if (nfCommon.SUPPORTS_SVG) {
+                      markup += '<div class="pointer show-process-group-status-history fa fa-area-chart" title="'+nf._.msg('nf-summary-table.ViewStatus')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                    if (isClustered) {
+                      markup += '<div class="pointer show-cluster-process-group-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewProcessorGroup')+'"></div>';
+                    }
+    
+                    return markup;
+                };
+    
+                // define the action column for clusters and within the shell
+                processGroupsColumnModel.push({
+                    id: 'actions',
+                    name: '&nbsp;',
+                    formatter: processGroupActionFormatter,
+                    resizable: false,
+                    sortable: false,
+                    width: 75,
+                    maxWidth: 75
+                });
+            }
+    
+            // initialize the templates table
+            var processGroupsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var processGroupsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            processGroupsData.setItems([]);
+            processGroupsData.setFilterArgs({
+                searchString: '',
+                property: 'name'
+            });
+            processGroupsData.setFilter(filter);
+    
+            // initialize the sort
             sort('process-group-summary-table', {
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
+                columnId: 'name',
+                sortAsc: true
             }, processGroupsData);
-        });
-
-        // configure a click listener
-        processGroupsGrid.onClick.subscribe(function (e, args) {
-            var target = $(e.target);
-
-            // get the node at this row
-            var item = processGroupsData.getItem(args.row);
-
-            // determine the desired action
-            if (processGroupsGrid.getColumns()[args.cell].id === 'actions') {
-                if (target.hasClass('go-to')) {
-                    if (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.ProcessGroup) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
-                        parent.nf.ProcessGroup.enterGroup(item.id);
-                        parent.$('#shell-close-button').click();
+    
+            // initialize the grid
+            var processGroupsGrid = new Slick.Grid('#process-group-summary-table', processGroupsData, processGroupsColumnModel, processGroupsOptions);
+            processGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            processGroupsGrid.registerPlugin(new Slick.AutoTooltips());
+            processGroupsGrid.setSortColumn('name', true);
+            processGroupsGrid.onSort.subscribe(function (e, args) {
+                sort('process-group-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, processGroupsData);
+            });
+    
+            // configure a click listener
+            processGroupsGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = processGroupsData.getItem(args.row);
+    
+                // determine the desired action
+                if (processGroupsGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('go-to')) {
+                      if (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.ProcessGroup) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
+                          parent.nf.ProcessGroup.enterGroup(item.id);
+                            parent.$('#shell-close-button').click();
+                        }
+                    } else if (target.hasClass('show-process-group-status-history')) {
+                      nfStatusHistory.showProcessGroupChart(item.groupId, item.id);
+                    } else if (target.hasClass('show-cluster-process-group-summary')) {
+                        // load the cluster processor summary
+                        loadClusterProcessGroupSummary(item.id);
+    
+                        // hide the summary loading indicator
+                        $('#summary-loading-container').hide();
+    
+                        // show the dialog
+                        $('#cluster-process-group-summary-dialog').modal('show');
+    
+                        // resize after opening
+                        clusterProcessGroupsGrid.resizeCanvas();
                     }
-                } else if (target.hasClass('show-process-group-status-history')) {
-                    nfStatusHistory.showProcessGroupChart(item.groupId, item.id);
-                } else if (target.hasClass('show-cluster-process-group-summary')) {
-                    // load the cluster processor summary
-                    loadClusterProcessGroupSummary(item.id);
-
-                    // hide the summary loading indicator
-                    $('#summary-loading-container').hide();
-
-                    // show the dialog
-                    $('#cluster-process-group-summary-dialog').modal('show');
-
-                    // resize after opening
-                    clusterProcessGroupsGrid.resizeCanvas();
                 }
-            }
-        });
-
-        // wire up the dataview to the grid
-        processGroupsData.onRowCountChanged.subscribe(function (e, args) {
-            processGroupsGrid.updateRowCount();
-            processGroupsGrid.render();
-
-            // update the total number of displayed process groups if necessary
-            if ($('#process-group-summary-table').is(':visible')) {
-                $('#displayed-items').text(nfCommon.formatInteger(args.current));
-            }
-        });
-        processGroupsData.onRowsChanged.subscribe(function (e, args) {
-            processGroupsGrid.invalidateRows(args.rows);
-            processGroupsGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#process-group-summary-table').data('gridInstance', processGroupsGrid).on('mouseenter', 'div.slick-cell', function (e) {
-            var bulletinIcon = $(this).find('div.has-bulletins');
-            if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                var processGroupId = $(this).find('span.row-id').text();
-
-                // get the status item
-                var item = processGroupsData.getItemById(processGroupId);
-
-                // format the tooltip
-                var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
-                var tooltip = nfCommon.formatUnorderedList(bulletins);
-
-                // show the tooltip
-                if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                    bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                        content: tooltip,
-                        position: {
-                            container: $('#summary'),
-                            at: 'bottom right',
-                            my: 'top left',
-                            adjust: {
-                                x: 4,
-                                y: 4
+            });
+    
+            // wire up the dataview to the grid
+            processGroupsData.onRowCountChanged.subscribe(function (e, args) {
+                processGroupsGrid.updateRowCount();
+                processGroupsGrid.render();
+    
+                // update the total number of displayed process groups if necessary
+                if ($('#process-group-summary-table').is(':visible')) {
+                  $('#displayed-items').text(nfCommon.formatInteger(args.current));
+                }
+            });
+            processGroupsData.onRowsChanged.subscribe(function (e, args) {
+                processGroupsGrid.invalidateRows(args.rows);
+                processGroupsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#process-group-summary-table').data('gridInstance', processGroupsGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var processGroupId = $(this).find('span.row-id').text();
+    
+                    // get the status item
+                    var item = processGroupsData.getItemById(processGroupId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                            content: tooltip,
+                            position: {
+                                container: $('#summary'),
+                                at: 'bottom right',
+                                my: 'top left',
+                                adjust: {
+                                    x: 4,
+                                    y: 4
+                                }
                             }
-                        }
-                    }));
+                        }));
+                    }
                 }
-            }
-        });
-
-        // initialize the cluster process group summary dialog
-        $('#cluster-process-group-summary-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Cluster Process Group Summary',
-            buttons: [{
-                buttonText: 'Close',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
+            });
+    
+            // initialize the cluster process group summary dialog
+            $('#cluster-process-group-summary-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.ClusterProcessGroupSummary'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the cluster processor summary dialog
+                            $('#cluster-process-group-id').text('');
+                            $('#cluster-process-group-name').text('');
+    
+                            // close the dialog
+                            this.modal('hide');
+                        }
+                    }
+                }],
                 handler: {
-                    click: function () {
-                        // clear the cluster processor summary dialog
-                        $('#cluster-process-group-id').text('');
-                        $('#cluster-process-group-name').text('');
-
-                        // close the dialog
-                        this.modal('hide');
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
                     }
                 }
-            }],
-            handler: {
-                close: function () {
-                    // show the summary loading container
-                    $('#summary-loading-container').show();
-                }
-            }
-        });
-
-        // cluster process group refresh
-        $('#cluster-process-group-refresh-button').click(function () {
-            loadClusterProcessGroupSummary($('#cluster-process-group-id').text());
-        });
-
-        // initialize the cluster process groups column model
-        var clusterProcessGroupsColumnModel = [
-            {id: 'node', field: 'node', name: 'Node', sortable: true, resizable: true},
-            transferredColumn,
-            inputColumn,
-            ioColumn,
-            outputColumn,
-            sentColumn,
-            receivedColumn
-        ];
-
-        // initialize the options for the cluster processors table
-        var clusterProcessGroupsOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-
-        // initialize the dataview
-        var clusterProcessGroupsData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        clusterProcessGroupsData.setItems([]);
-
-        // initialize the sort
-        sort('cluster-processor-summary-table', {
-            columnId: 'node',
-            sortAsc: true
-        }, clusterProcessGroupsData);
-
-        // initialize the grid
-        var clusterProcessGroupsGrid = new Slick.Grid('#cluster-process-group-summary-table', clusterProcessGroupsData, clusterProcessGroupsColumnModel, clusterProcessGroupsOptions);
-        clusterProcessGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
-        clusterProcessGroupsGrid.registerPlugin(new Slick.AutoTooltips());
-        clusterProcessGroupsGrid.setSortColumn('node', true);
-        clusterProcessGroupsGrid.onSort.subscribe(function (e, args) {
-            sort('cluster-process-group-summary-table', {
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
+            });
+    
+            // cluster process group refresh
+            $('#cluster-process-group-refresh-button').click(function () {
+                loadClusterProcessGroupSummary($('#cluster-process-group-id').text());
+            });
+    
+            // initialize the cluster process groups column model
+            var clusterProcessGroupsColumnModel = [
+                {id: 'node', field: 'node', name: 'Node', sortable: true, resizable: true},
+                transferredColumn,
+                inputColumn,
+                ioColumn,
+                outputColumn,
+                sentColumn,
+                receivedColumn
+            ];
+    
+            // initialize the options for the cluster processors table
+            var clusterProcessGroupsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var clusterProcessGroupsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            clusterProcessGroupsData.setItems([]);
+    
+            // initialize the sort
+            sort('cluster-processor-summary-table', {
+                columnId: 'node',
+                sortAsc: true
             }, clusterProcessGroupsData);
-        });
-
-        // wire up the dataview to the grid
-        clusterProcessGroupsData.onRowCountChanged.subscribe(function (e, args) {
-            clusterProcessGroupsGrid.updateRowCount();
-            clusterProcessGroupsGrid.render();
-        });
-        clusterProcessGroupsData.onRowsChanged.subscribe(function (e, args) {
-            clusterProcessGroupsGrid.invalidateRows(args.rows);
-            clusterProcessGroupsGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#cluster-process-group-summary-table').data('gridInstance', clusterProcessGroupsGrid);
-
-        // define the column model for the summary table
-        var inputPortsColumnModel = [
-            moreDetailsColumn,
-            nameColumn,
-            runStatusColumn,
-            outputColumn
-        ];
-
-        // add an action column if appropriate
-        if (isClustered || isInShell) {
-            // define how the column is formatted
-            var inputPortActionFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-
-                if (isInShell) {
-                    markup += '<div class="pointer go-to fa fa-long-arrow-right" title="Go To Input Port" style="margin-right: 3px;"></div>';
-                }
-
-                if (isClustered) {
-                    markup += '<div class="pointer show-cluster-input-port-summary fa fa-cubes" title="View Input Port Details"></div>';
-                }
-
-                return markup;
+    
+            // initialize the grid
+            var clusterProcessGroupsGrid = new Slick.Grid('#cluster-process-group-summary-table', clusterProcessGroupsData, clusterProcessGroupsColumnModel, clusterProcessGroupsOptions);
+            clusterProcessGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            clusterProcessGroupsGrid.registerPlugin(new Slick.AutoTooltips());
+            clusterProcessGroupsGrid.setSortColumn('node', true);
+            clusterProcessGroupsGrid.onSort.subscribe(function (e, args) {
+                sort('cluster-process-group-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, clusterProcessGroupsData);
+            });
+    
+            // wire up the dataview to the grid
+            clusterProcessGroupsData.onRowCountChanged.subscribe(function (e, args) {
+                clusterProcessGroupsGrid.updateRowCount();
+                clusterProcessGroupsGrid.render();
+            });
+            clusterProcessGroupsData.onRowsChanged.subscribe(function (e, args) {
+                clusterProcessGroupsGrid.invalidateRows(args.rows);
+                clusterProcessGroupsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#cluster-process-group-summary-table').data('gridInstance', clusterProcessGroupsGrid);
+    
+            // define the column model for the summary table
+            var inputPortsColumnModel = [
+                moreDetailsColumn,
+                nameColumn,
+                runStatusColumn,
+                outputColumn
+            ];
+    
+            // add an action column if appropriate
+            if (isClustered || isInShell) {
+                // define how the column is formatted
+                var inputPortActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (isInShell) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToInputPort')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                    if (isClustered) {
+                      markup += '<div class="pointer show-cluster-input-port-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewInputPort')+'"></div>';
+                    }
+    
+                    return markup;
+                };
+    
+                // define the action column for clusters and within the shell
+                inputPortsColumnModel.push({
+                    id: 'actions',
+                    name: '&nbsp;',
+                    formatter: inputPortActionFormatter,
+                    resizable: false,
+                    sortable: false,
+                    width: 75,
+                    maxWidth: 75
+                });
+            }
+    
+            // initialize the input ports table
+            var inputPortsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
             };
-
-            // define the action column for clusters and within the shell
-            inputPortsColumnModel.push({
-                id: 'actions',
-                name: '&nbsp;',
-                formatter: inputPortActionFormatter,
-                resizable: false,
-                sortable: false,
-                width: 75,
-                maxWidth: 75
-            });
-        }
-
-        // initialize the input ports table
-        var inputPortsOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-
-        // initialize the dataview
-        var inputPortsData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        inputPortsData.setItems([]);
-        inputPortsData.setFilterArgs({
-            searchString: '',
-            property: 'name'
-        });
-        inputPortsData.setFilter(filter);
-
-        // initialize the sort
-        sort('input-port-summary-table', {
-            columnId: 'name',
-            sortAsc: true
-        }, inputPortsData);
-
-        // initialize the grid
-        var inputPortsGrid = new Slick.Grid('#input-port-summary-table', inputPortsData, inputPortsColumnModel, inputPortsOptions);
-        inputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
-        inputPortsGrid.registerPlugin(new Slick.AutoTooltips());
-        inputPortsGrid.setSortColumn('name', true);
-        inputPortsGrid.onSort.subscribe(function (e, args) {
+    
+            // initialize the dataview
+            var inputPortsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            inputPortsData.setItems([]);
+            inputPortsData.setFilterArgs({
+                searchString: '',
+                property: 'name'
+            });
+            inputPortsData.setFilter(filter);
+    
+            // initialize the sort
             sort('input-port-summary-table', {
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
+                columnId: 'name',
+                sortAsc: true
             }, inputPortsData);
-        });
-
-        // configure a click listener
-        inputPortsGrid.onClick.subscribe(function (e, args) {
-            var target = $(e.target);
-
-            // get the node at this row
-            var item = inputPortsData.getItem(args.row);
-
-            // determine the desired action
-            if (inputPortsGrid.getColumns()[args.cell].id === 'actions') {
-                if (target.hasClass('go-to')) {
-                    goTo(item.groupId, item.id);
-                } else if (target.hasClass('show-cluster-input-port-summary')) {
-                    // load the cluster processor summary
-                    loadClusterInputPortSummary(item.groupId, item.id);
-
-                    // hide the summary loading indicator
-                    $('#summary-loading-container').hide();
-
-                    // show the dialog
-                    $('#cluster-input-port-summary-dialog').modal('show');
-
-                    // resize after opening
-                    clusterInputPortsGrid.resizeCanvas();
-                }
-            }
-        });
-
-        // wire up the dataview to the grid
-        inputPortsData.onRowCountChanged.subscribe(function (e, args) {
-            inputPortsGrid.updateRowCount();
-            inputPortsGrid.render();
-
-            // update the total number of displayed processors, if necessary
-            if ($('#input-port-summary-table').is(':visible')) {
-                $('#display-items').text(nfCommon.formatInteger(args.current));
-            }
-        });
-        inputPortsData.onRowsChanged.subscribe(function (e, args) {
-            inputPortsGrid.invalidateRows(args.rows);
-            inputPortsGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#input-port-summary-table').data('gridInstance', inputPortsGrid).on('mouseenter', 'div.slick-cell', function (e) {
-            var bulletinIcon = $(this).find('div.has-bulletins');
-            if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                var portId = $(this).find('span.row-id').text();
-
-                // get the status item
-                var item = inputPortsData.getItemById(portId);
-
-                // format the tooltip
-                var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
-                var tooltip = nfCommon.formatUnorderedList(bulletins);
-
-                // show the tooltip
-                if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                    bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                        content: tooltip,
-                        position: {
-                            container: $('#summary'),
-                            at: 'bottom right',
-                            my: 'top left',
-                            adjust: {
-                                x: 4,
-                                y: 4
+    
+            // initialize the grid
+            var inputPortsGrid = new Slick.Grid('#input-port-summary-table', inputPortsData, inputPortsColumnModel, inputPortsOptions);
+            inputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            inputPortsGrid.registerPlugin(new Slick.AutoTooltips());
+            inputPortsGrid.setSortColumn('name', true);
+            inputPortsGrid.onSort.subscribe(function (e, args) {
+                sort('input-port-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, inputPortsData);
+            });
+    
+            // configure a click listener
+            inputPortsGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = inputPortsData.getItem(args.row);
+    
+                // determine the desired action
+                if (inputPortsGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('go-to')) {
+                        goTo(item.groupId, item.id);
+                    } else if (target.hasClass('show-cluster-input-port-summary')) {
+                        // load the cluster processor summary
+                        loadClusterInputPortSummary(item.groupId, item.id);
+    
+                        // hide the summary loading indicator
+                        $('#summary-loading-container').hide();
+    
+                        // show the dialog
+                        $('#cluster-input-port-summary-dialog').modal('show');
+    
+                        // resize after opening
+                        clusterInputPortsGrid.resizeCanvas();
+                    }
+                }
+            });
+    
+            // wire up the dataview to the grid
+            inputPortsData.onRowCountChanged.subscribe(function (e, args) {
+                inputPortsGrid.updateRowCount();
+                inputPortsGrid.render();
+    
+                // update the total number of displayed processors, if necessary
+                if ($('#input-port-summary-table').is(':visible')) {
+                  $('#display-items').text(nfCommon.formatInteger(args.current));
+                }
+            });
+            inputPortsData.onRowsChanged.subscribe(function (e, args) {
+                inputPortsGrid.invalidateRows(args.rows);
+                inputPortsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#input-port-summary-table').data('gridInstance', inputPortsGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var portId = $(this).find('span.row-id').text();
+    
+                    // get the status item
+                    var item = inputPortsData.getItemById(portId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                            content: tooltip,
+                            position: {
+                                container: $('#summary'),
+                                at: 'bottom right',
+                                my: 'top left',
+                                adjust: {
+                                    x: 4,
+                                    y: 4
+                                }
                             }
-                        }
-                    }));
+                        }));
+                    }
                 }
-            }
-        });
-
-        // initialize the cluster input port summary dialog
-        $('#cluster-input-port-summary-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Cluster Input Port Summary',
-            buttons: [{
-                buttonText: 'Close',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
+            });
+    
+            // initialize the cluster input port summary dialog
+            $('#cluster-input-port-summary-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.ClusterInputPortSummary'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the cluster processor summary dialog
+                            $('#cluster-input-port-id').text('');
+                            $('#cluster-input-port-name').text('');
+    
+                            // close the dialog
+                            this.modal('hide');
+                        }
+                    }
+                }],
                 handler: {
-                    click: function () {
-                        // clear the cluster processor summary dialog
-                        $('#cluster-input-port-id').text('');
-                        $('#cluster-input-port-name').text('');
-
-                        // close the dialog
-                        this.modal('hide');
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
                     }
                 }
-            }],
-            handler: {
-                close: function () {
-                    // show the summary loading container
-                    $('#summary-loading-container').show();
-                }
-            }
-        });
-
-        // cluster input port refresh
-        $('#cluster-input-port-refresh-button').click(function () {
-            loadClusterInputPortSummary($('#cluster-input-port-group-id').text(), $('#cluster-input-port-id').text());
-        });
-
-        // initialize the cluster input port column model
-        var clusterInputPortsColumnModel = [
-            {id: 'node', field: 'node', name: 'Node', sortable: true, resizable: true},
-            runStatusColumn,
-            outputColumn
-        ];
-
-        // initialize the options for the cluster input port table
-        var clusterInputPortsOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-
-        // initialize the dataview
-        var clusterInputPortsData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        clusterInputPortsData.setItems([]);
-
-        // initialize the sort
-        sort('cluster-input-port-summary-table', {
-            columnId: 'node',
-            sortAsc: true
-        }, clusterInputPortsData);
-
-        // initialize the grid
-        var clusterInputPortsGrid = new Slick.Grid('#cluster-input-port-summary-table', clusterInputPortsData, clusterInputPortsColumnModel, clusterInputPortsOptions);
-        clusterInputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
-        clusterInputPortsGrid.registerPlugin(new Slick.AutoTooltips());
-        clusterInputPortsGrid.setSortColumn('node', true);
-        clusterInputPortsGrid.onSort.subscribe(function (e, args) {
+            });
+    
+            // cluster input port refresh
+            $('#cluster-input-port-refresh-button').click(function () {
+                loadClusterInputPortSummary($('#cluster-input-port-group-id').text(), $('#cluster-input-port-id').text());
+            });
+    
+            // initialize the cluster input port column model
+            var clusterInputPortsColumnModel = [
+              {id: 'node', field: 'node', name: nf._.msg('nf-summary-table.Node'), sortable: true, resizable: true},
+                runStatusColumn,
+                outputColumn
+            ];
+    
+            // initialize the options for the cluster input port table
+            var clusterInputPortsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var clusterInputPortsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            clusterInputPortsData.setItems([]);
+    
+            // initialize the sort
             sort('cluster-input-port-summary-table', {
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
+                columnId: 'node',
+                sortAsc: true
             }, clusterInputPortsData);
-        });
-
-        // wire up the dataview to the grid
-        clusterInputPortsData.onRowCountChanged.subscribe(function (e, args) {
-            clusterInputPortsGrid.updateRowCount();
-            clusterInputPortsGrid.render();
-        });
-        clusterInputPortsData.onRowsChanged.subscribe(function (e, args) {
-            clusterInputPortsGrid.invalidateRows(args.rows);
-            clusterInputPortsGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#cluster-input-port-summary-table').data('gridInstance', clusterInputPortsGrid);
-
-        // define the column model for the summary table
-        var outputPortsColumnModel = [
-            moreDetailsColumn,
-            nameColumn,
-            runStatusColumn,
-            inputColumn
-        ];
-
-        // add an action column if appropriate
-        if (isClustered || isInShell) {
-            // define how the column is formatted
-            var outputPortActionFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-
-                if (isInShell) {
-                    markup += '<div class="pointer go-to fa fa-long-arrow-right" title="Go To Output Port" style="margin-right: 3px;"></div>';
-                }
-
-                if (isClustered) {
-                    markup += '<div class="pointer show-cluster-output-port-summary fa fa-cubes" title="View Output Port Details"></div>';
-                }
-
-                return markup;
+    
+            // initialize the grid
+            var clusterInputPortsGrid = new Slick.Grid('#cluster-input-port-summary-table', clusterInputPortsData, clusterInputPortsColumnModel, clusterInputPortsOptions);
+            clusterInputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            clusterInputPortsGrid.registerPlugin(new Slick.AutoTooltips());
+            clusterInputPortsGrid.setSortColumn('node', true);
+            clusterInputPortsGrid.onSort.subscribe(function (e, args) {
+                sort('cluster-input-port-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, clusterInputPortsData);
+            });
+    
+            // wire up the dataview to the grid
+            clusterInputPortsData.onRowCountChanged.subscribe(function (e, args) {
+                clusterInputPortsGrid.updateRowCount();
+                clusterInputPortsGrid.render();
+            });
+            clusterInputPortsData.onRowsChanged.subscribe(function (e, args) {
+                clusterInputPortsGrid.invalidateRows(args.rows);
+                clusterInputPortsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#cluster-input-port-summary-table').data('gridInstance', clusterInputPortsGrid);
+    
+            // define the column model for the summary table
+            var outputPortsColumnModel = [
+                moreDetailsColumn,
+                nameColumn,
+                runStatusColumn,
+                inputColumn
+            ];
+    
+            // add an action column if appropriate
+            if (isClustered || isInShell) {
+                // define how the column is formatted
+                var outputPortActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (isInShell) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToOutputPort')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                    if (isClustered) {
+                      markup += '<div class="pointer show-cluster-output-port-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewOutputPort')+'"></div>';
+                    }
+    
+                    return markup;
+                };
+    
+                // define the action column for clusters and within the shell
+                outputPortsColumnModel.push({
+                    id: 'actions',
+                    name: '&nbsp;',
+                    formatter: outputPortActionFormatter,
+                    resizable: false,
+                    sortable: false,
+                    width: 75,
+                    maxWidth: 75
+                });
+            }
+    
+            // initialize the input ports table
+            var outputPortsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
             };
-
-            // define the action column for clusters and within the shell
-            outputPortsColumnModel.push({
-                id: 'actions',
-                name: '&nbsp;',
-                formatter: outputPortActionFormatter,
-                resizable: false,
-                sortable: false,
-                width: 75,
-                maxWidth: 75
-            });
-        }
-
-        // initialize the input ports table
-        var outputPortsOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-
-        // initialize the dataview
-        var outputPortsData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        outputPortsData.setItems([]);
-        outputPortsData.setFilterArgs({
-            searchString: '',
-            property: 'name'
-        });
-        outputPortsData.setFilter(filter);
-
-        // initialize the sort
-        sort('output-port-summary-table', {
-            columnId: 'name',
-            sortAsc: true
-        }, outputPortsData);
-
-        // initialize the grid
-        var outputPortsGrid = new Slick.Grid('#output-port-summary-table', outputPortsData, outputPortsColumnModel, outputPortsOptions);
-        outputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
-        outputPortsGrid.registerPlugin(new Slick.AutoTooltips());
-        outputPortsGrid.setSortColumn('name', true);
-        outputPortsGrid.onSort.subscribe(function (e, args) {
+    
+            // initialize the dataview
+            var outputPortsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            outputPortsData.setItems([]);
+            outputPortsData.setFilterArgs({
+                searchString: '',
+                property: 'name'
+            });
+            outputPortsData.setFilter(filter);
+    
+            // initialize the sort
             sort('output-port-summary-table', {
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
+                columnId: 'name',
+                sortAsc: true
             }, outputPortsData);
-        });
-
-        // configure a click listener
-        outputPortsGrid.onClick.subscribe(function (e, args) {
-            var target = $(e.target);
-
-            // get the node at this row
-            var item = outputPortsData.getItem(args.row);
-
-            // determine the desired action
-            if (outputPortsGrid.getColumns()[args.cell].id === 'actions') {
-                if (target.hasClass('go-to')) {
-                    goTo(item.groupId, item.id);
-                } else if (target.hasClass('show-cluster-output-port-summary')) {
-                    // load the cluster processor summary
-                    loadClusterOutputPortSummary(item.groupId, item.id);
-
-                    // hide the summary loading indicator
-                    $('#summary-loading-container').hide();
-
-                    // show the dialog
-                    $('#cluster-output-port-summary-dialog').modal('show');
-
-                    // resize after opening
-                    clusterOutputPortsGrid.resizeCanvas();
+    
+            // initialize the grid
+            var outputPortsGrid = new Slick.Grid('#output-port-summary-table', outputPortsData, outputPortsColumnModel, outputPortsOptions);
+            outputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            outputPortsGrid.registerPlugin(new Slick.AutoTooltips());
+            outputPortsGrid.setSortColumn('name', true);
+            outputPortsGrid.onSort.subscribe(function (e, args) {
+                sort('output-port-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, outputPortsData);
+            });
+    
+            // configure a click listener
+            outputPortsGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = outputPortsData.getItem(args.row);
+    
+                // determine the desired action
+                if (outputPortsGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('go-to')) {
+                        goTo(item.groupId, item.id);
+                    } else if (target.hasClass('show-cluster-output-port-summary')) {
+                        // load the cluster processor summary
+                        loadClusterOutputPortSummary(item.groupId, item.id);
+    
+                        // hide the summary loading indicator
+                        $('#summary-loading-container').hide();
+    
+                        // show the dialog
+                        $('#cluster-output-port-summary-dialog').modal('show');
+    
+                        // resize after opening
+                        clusterOutputPortsGrid.resizeCanvas();
+                    }
                 }
-            }
-        });
-
-        // wire up the dataview to the grid
-        outputPortsData.onRowCountChanged.subscribe(function (e, args) {
-            outputPortsGrid.updateRowCount();
-            outputPortsGrid.render();
-
-            // update the total number of displayed processors, if necessary
-            if ($('#output-port-summary-table').is(':visible')) {
-                $('#display-items').text(nfCommon.formatInteger(args.current));
-            }
-        });
-        outputPortsData.onRowsChanged.subscribe(function (e, args) {
-            outputPortsGrid.invalidateRows(args.rows);
-            outputPortsGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#output-port-summary-table').data('gridInstance', outputPortsGrid).on('mouseenter', 'div.slick-cell', function (e) {
-            var bulletinIcon = $(this).find('div.has-bulletins');
-            if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                var portId = $(this).find('span.row-id').text();
-
-                // get the status item
-                var item = outputPortsData.getItemById(portId);
-
-                // format the tooltip
-                var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
-                var tooltip = nfCommon.formatUnorderedList(bulletins);
-
-                // show the tooltip
-                if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                    bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                        content: tooltip,
-                        position: {
-                            container: $('#summary'),
-                            at: 'bottom right',
-                            my: 'top left',
-                            adjust: {
-                                x: 4,
-                                y: 4
+            });
+    
+            // wire up the dataview to the grid
+            outputPortsData.onRowCountChanged.subscribe(function (e, args) {
+                outputPortsGrid.updateRowCount();
+                outputPortsGrid.render();
+    
+                // update the total number of displayed processors, if necessary
+                if ($('#output-port-summary-table').is(':visible')) {
+                  $('#display-items').text(nfCommon.formatInteger(args.current));
+                }
+            });
+            outputPortsData.onRowsChanged.subscribe(function (e, args) {
+                outputPortsGrid.invalidateRows(args.rows);
+                outputPortsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#output-port-summary-table').data('gridInstance', outputPortsGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var portId = $(this).find('span.row-id').text();
+    
+                    // get the status item
+                    var item = outputPortsData.getItemById(portId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                            content: tooltip,
+                            position: {
+                                container: $('#summary'),
+                                at: 'bottom right',
+                                my: 'top left',
+                                adjust: {
+                                    x: 4,
+                                    y: 4
+                                }
                             }
-                        }
-                    }));
+                        }));
+                    }
                 }
-            }
-        });
-
-        // initialize the cluster output port summary dialog
-        $('#cluster-output-port-summary-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Cluster Output Port Summary',
-            buttons: [{
-                buttonText: 'Close',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
+            });
+    
+            // initialize the cluster output port summary dialog
+            $('#cluster-output-port-summary-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.ClusterOutPutPortSummary'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the cluster processor summary dialog
+                            $('#cluster-output-port-id').text('');
+                            $('#cluster-output-port-name').text('');
+    
+                            // close the dialog
+                            this.modal('hide');
+                        }
+                    }
+                }],
                 handler: {
-                    click: function () {
-                        // clear the cluster processor summary dialog
-                        $('#cluster-output-port-id').text('');
-                        $('#cluster-output-port-name').text('');
-
-                        // close the dialog
-                        this.modal('hide');
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
                     }
                 }
-            }],
-            handler: {
-                close: function () {
-                    // show the summary loading container
-                    $('#summary-loading-container').show();
-                }
-            }
-        });
-
-        // cluster output port refresh
-        $('#cluster-output-port-refresh-button').click(function () {
-            loadClusterOutputPortSummary($('#cluster-output-port-group-id').text(), $('#cluster-output-port-id').text());
-        });
-
-        // initialize the cluster output port column model
-        var clusterOutputPortsColumnModel = [
-            {id: 'node', field: 'node', name: 'Node', sortable: true, resizable: true},
-            runStatusColumn,
-            inputColumn
-        ];
-
-        // initialize the options for the cluster output port table
-        var clusterOutputPortsOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-
-        // initialize the dataview
-        var clusterOutputPortsData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        clusterOutputPortsData.setItems([]);
-
-        // initialize the sort
-        sort('cluster-output-port-summary-table', {
-            columnId: 'node',
-            sortAsc: true
-        }, clusterOutputPortsData);
-
-        // initialize the grid
-        var clusterOutputPortsGrid = new Slick.Grid('#cluster-output-port-summary-table', clusterOutputPortsData, clusterOutputPortsColumnModel, clusterOutputPortsOptions);
-        clusterOutputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
-        clusterOutputPortsGrid.registerPlugin(new Slick.AutoTooltips());
-        clusterOutputPortsGrid.setSortColumn('node', true);
-        clusterOutputPortsGrid.onSort.subscribe(function (e, args) {
+            });
+    
+            // cluster output port refresh
+            $('#cluster-output-port-refresh-button').click(function () {
+                loadClusterOutputPortSummary($('#cluster-output-port-group-id').text(), $('#cluster-output-port-id').text());
+            });
+    
+            // initialize the cluster output port column model
+            var clusterOutputPortsColumnModel = [
+              {id: 'node', field: 'node', name: nf._.msg('nf-summary-table.Node'), sortable: true, resizable: true},
+                runStatusColumn,
+                inputColumn
+            ];
+    
+            // initialize the options for the cluster output port table
+            var clusterOutputPortsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var clusterOutputPortsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            clusterOutputPortsData.setItems([]);
+    
+            // initialize the sort
             sort('cluster-output-port-summary-table', {
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
+                columnId: 'node',
+                sortAsc: true
             }, clusterOutputPortsData);
-        });
-
-        // wire up the dataview to the grid
-        clusterOutputPortsData.onRowCountChanged.subscribe(function (e, args) {
-            clusterOutputPortsGrid.updateRowCount();
-            clusterOutputPortsGrid.render();
-        });
-        clusterOutputPortsData.onRowsChanged.subscribe(function (e, args) {
-            clusterOutputPortsGrid.invalidateRows(args.rows);
-            clusterOutputPortsGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#cluster-output-port-summary-table').data('gridInstance', clusterOutputPortsGrid);
-
-        // define a custom formatter for the run status column
-        var transmissionStatusFormatter = function (row, cell, value, columnDef, dataContext) {
-            var activeThreadCount = '';
-            if (nfCommon.isDefinedAndNotNull(dataContext.activeThreadCount) && dataContext.activeThreadCount > 0) {
-                activeThreadCount = '(' + dataContext.activeThreadCount + ')';
-            }
-
-            // determine what to put in the mark up
-            var transmissionClass = 'invalid fa fa-warning';
-            var transmissionLabel = 'Invalid';
-            if (value === 'Transmitting') {
-                transmissionClass = 'transmitting fa fa-bullseye';
-                transmissionLabel = value;
-            } else {
-                transmissionClass = 'not-transmitting icon icon-transmit-false';
-                transmissionLabel = 'Not Transmitting';
-            }
-
-            // generate the mark up
-            var formattedValue = '<div layout="row"><div class="' + transmissionClass + '"></div>';
-            return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + transmissionLabel + '</div><div style="float: left; margin-left: 4px;">' + nfCommon.escapeHtml(activeThreadCount) + '</div></div>';
-        };
-
-        var transmissionStatusColumn = {
-            id: 'transmissionStatus',
-            field: 'transmissionStatus',
-            name: 'Transmitting',
-            formatter: transmissionStatusFormatter,
-            sortable: true,
-            resizable: true
-        };
-        var targetUriColumn = {
-            id: 'targetUri',
-            field: 'targetUri',
-            name: 'Target URI',
-            sortable: true,
-            resizable: true
-        };
-
-        // define the column model for the summary table
-        var remoteProcessGroupsColumnModel = [
-            {
-                id: 'moreDetails',
-                field: 'moreDetails',
-                name: '&nbsp;',
-                resizable: false,
-                formatter: moreDetails,
-                sortable: true,
-                width: 50,
-                maxWidth: 50,
-                toolTip: 'Sorts based on presence of bulletins'
-            },
-            nameColumn,
-            targetUriColumn,
-            transmissionStatusColumn,
-            sentColumn,
-            receivedColumn
-        ];
-
-        // add an action column if appropriate
-        if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
-            // define how the column is formatted
-            var remoteProcessGroupActionFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-
-                if (isInShell) {
-                    markup += '<div class="pointer go-to fa fa-long-arrow-right" title="Go To Process Group" style="margin-right: 3px;"></div>';
-                }
-
-                if (nfCommon.SUPPORTS_SVG) {
-                    markup += '<div class="pointer show-remote-process-group-status-history fa fa-area-chart" title="View Status History" style="margin-right: 3px;"></div>';
+    
+            // initialize the grid
+            var clusterOutputPortsGrid = new Slick.Grid('#cluster-output-port-summary-table', clusterOutputPortsData, clusterOutputPortsColumnModel, clusterOutputPortsOptions);
+            clusterOutputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            clusterOutputPortsGrid.registerPlugin(new Slick.AutoTooltips());
+            clusterOutputPortsGrid.setSortColumn('node', true);
+            clusterOutputPortsGrid.onSort.subscribe(function (e, args) {
+                sort('cluster-output-port-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, clusterOutputPortsData);
+            });
+    
+            // wire up the dataview to the grid
+            clusterOutputPortsData.onRowCountChanged.subscribe(function (e, args) {
+                clusterOutputPortsGrid.updateRowCount();
+                clusterOutputPortsGrid.render();
+            });
+            clusterOutputPortsData.onRowsChanged.subscribe(function (e, args) {
+                clusterOutputPortsGrid.invalidateRows(args.rows);
+                clusterOutputPortsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#cluster-output-port-summary-table').data('gridInstance', clusterOutputPortsGrid);
+    
+            // define a custom formatter for the run status column
+            var transmissionStatusFormatter = function (row, cell, value, columnDef, dataContext) {
+                var activeThreadCount = '';
+              if (nfCommon.isDefinedAndNotNull(dataContext.activeThreadCount) && dataContext.activeThreadCount > 0) {
+                    activeThreadCount = '(' + dataContext.activeThreadCount + ')';
                 }
-
-                if (isClustered) {
-                    markup += '<div class="pointer show-cluster-remote-process-group-summary fa fa-cubes" title="View Remote Process Group Details"></div>';
+    
+                // determine what to put in the mark up
+                var transmissionClass = 'invalid fa fa-warning';
+                var transmissionLabel = 'Invalid';
+                if (value === 'Transmitting') {
+                    transmissionClass = 'transmitting fa fa-bullseye';
+                    transmissionLabel = value;
+                } else {
+                    transmissionClass = 'not-transmitting icon icon-transmit-false';
+                    transmissionLabel = 'Not Transmitting';
                 }
-
-                return markup;
+    
+                // generate the mark up
+              var formattedValue = '<div layout="row"><div class="' + transmissionClass + '"></div>';
+              return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + transmissionLabel + '</div><div style="float: left; margin-left: 4px;">' + nfCommon.escapeHtml(activeThreadCount) + '</div></div>';
             };
-
-            // define the action column for clusters and within the shell
-            remoteProcessGroupsColumnModel.push({
-                id: 'actions',
-                name: '&nbsp;',
-                formatter: remoteProcessGroupActionFormatter,
-                resizable: false,
-                sortable: false,
-                width: 75,
-                maxWidth: 75
-            });
-        }
-
-        // initialize the remote process groups table
-        var remoteProcessGroupsOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-
-        // initialize the dataview
-        var remoteProcessGroupsData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        remoteProcessGroupsData.setItems([]);
-        remoteProcessGroupsData.setFilterArgs({
-            searchString: '',
-            property: 'name'
-        });
-        remoteProcessGroupsData.setFilter(filter);
-
-        // initialize the sort
-        sort('remote-process-group-summary-table', {
-            columnId: 'name',
-            sortAsc: true
-        }, remoteProcessGroupsData);
-
-        // initialize the grid
-        var remoteProcessGroupsGrid = new Slick.Grid('#remote-process-group-summary-table', remoteProcessGroupsData, remoteProcessGroupsColumnModel, remoteProcessGroupsOptions);
-        remoteProcessGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
-        remoteProcessGroupsGrid.registerPlugin(new Slick.AutoTooltips());
-        remoteProcessGroupsGrid.setSortColumn('name', true);
-        remoteProcessGroupsGrid.onSort.subscribe(function (e, args) {
+    
+            var transmissionStatusColumn = {
+                id: 'transmissionStatus',
+                field: 'transmissionStatus',
+              name: nf._.msg('nf-summary-table.Transmitting'),
+                formatter: transmissionStatusFormatter,
+                sortable: true,
+                resizable: true
+            };
+            var targetUriColumn = {
+                id: 'targetUri',
+                field: 'targetUri',
+              name: nf._.msg('nf-summary-table.Target URI'),
+                sortable: true,
+                resizable: true
+            };
+    
+            // define the column model for the summary table
+            var remoteProcessGroupsColumnModel = [
+                {
+                    id: 'moreDetails',
+                    field: 'moreDetails',
+                    name: '&nbsp;',
+                    resizable: false,
+                    formatter: moreDetails,
+                    sortable: true,
+                    width: 50,
+                    maxWidth: 50,
+                  toolTip: nf._.msg('nf-summary-table.Message4')
+                },
+                nameColumn,
+                targetUriColumn,
+                transmissionStatusColumn,
+                sentColumn,
+                receivedColumn
+            ];
+    
+            // add an action column if appropriate
+          if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
+                // define how the column is formatted
+                var remoteProcessGroupActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (isInShell) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToProcessorGroup')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                  if (nfCommon.SUPPORTS_SVG) {
+                      markup += '<div class="pointer show-remote-process-group-status-history fa fa-area-chart" title="'+nf._.msg('nf-summary-table.ViewStatus')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                    if (isClustered) {
+                      markup += '<div class="pointer show-cluster-remote-process-group-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewRemoteProcessorGroup')+'"></div>';
+                    }
+    
+                    return markup;
+                };
+    
+                // define the action column for clusters and within the shell
+                remoteProcessGroupsColumnModel.push({
+                    id: 'actions',
+                    name: '&nbsp;',
+                    formatter: remoteProcessGroupActionFormatter,
+                    resizable: false,
+                    sortable: false,
+                    width: 75,
+                    maxWidth: 75
+                });
+            }
+    
+            // initialize the remote process groups table
+            var remoteProcessGroupsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var remoteProcessGroupsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            remoteProcessGroupsData.setItems([]);
+            remoteProcessGroupsData.setFilterArgs({
+                searchString: '',
+                property: 'name'
+            });
+            remoteProcessGroupsData.setFilter(filter);
+    
+            // initialize the sort
             sort('remote-process-group-summary-table', {
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
+                columnId: 'name',
+                sortAsc: true
             }, remoteProcessGroupsData);
-        });
-
-        // configure a click listener
-        remoteProcessGroupsGrid.onClick.subscribe(function (e, args) {
-            var target = $(e.target);
-
-            // get the node at this row
-            var item = remoteProcessGroupsData.getItem(args.row);
-
-            // determine the desired action
-            if (remoteProcessGroupsGrid.getColumns()[args.cell].id === 'actions') {
-                if (target.hasClass('go-to')) {
-                    goTo(item.groupId, item.id);
-                } else if (target.hasClass('show-remote-process-group-status-history')) {
-                    nfStatusHistory.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);
-
-                    // hide the summary loading indicator
-                    $('#summary-loading-container').hide();
-
-                    // show the dialog
-                    $('#cluster-remote-process-group-summary-dialog').modal('show');
-
-                    // resize after opening
-                    clusterRemoteProcessGroupsGrid.resizeCanvas();
+    
+            // initialize the grid
+            var remoteProcessGroupsGrid = new Slick.Grid('#remote-process-group-summary-table', remoteProcessGroupsData, remoteProcessGroupsColumnModel, remoteProcessGroupsOptions);
+            remoteProcessGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            remoteProcessGroupsGrid.registerPlugin(new Slick.AutoTooltips());
+            remoteProcessGroupsGrid.setSortColumn('name', true);
+            remoteProcessGroupsGrid.onSort.subscribe(function (e, args) {
+                sort('remote-process-group-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, remoteProcessGroupsData);
+            });
+    
+            // configure a click listener
+            remoteProcessGroupsGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = remoteProcessGroupsData.getItem(args.row);
+    
+                // determine the desired action
+                if (remoteProcessGroupsGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('go-to')) {
+                        goTo(item.groupId, item.id);
+                    } else if (target.hasClass('show-remote-process-group-status-history')) {
+                      nfStatusHistory.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);
+    
+                        // hide the summary loading indicator
+                        $('#summary-loading-container').hide();
+    
+                        // show the dialog
+                        $('#cluster-remote-process-group-summary-dialog').modal('show');
+    
+                        // resize after opening
+                        clusterRemoteProcessGroupsGrid.resizeCanvas();
+                    }
                 }
-            }
-        });
-
-        // wire up the dataview to the grid
-        remoteProcessGroupsData.onRowCountChanged.subscribe(function (e, args) {
-            remoteProcessGroupsGrid.updateRowCount();
-            remoteProcessGroupsGrid.render();
-
-            // update the total number of displayed processors, if necessary
-            if ($('#remote-process-group-summary-table').is(':visible')) {
-                $('#displayed-items').text(nfCommon.formatInteger(args.current));
-            }
-        });
-        remoteProcessGroupsData.onRowsChanged.subscribe(function (e, args) {
-            remoteProcessGroupsGrid.invalidateRows(args.rows);
-            remoteProcessGroupsGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#remote-process-group-summary-table').data('gridInstance', remoteProcessGroupsGrid).on('mouseenter', 'div.slick-cell', function (e) {
-            var bulletinIcon = $(this).find('div.has-bulletins');
-            if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                var remoteProcessGroupId = $(this).find('span.row-id').text();
-
-                // get the status item
-                var item = remoteProcessGroupsData.getItemById(remoteProcessGroupId);
-
-                // format the tooltip
-                var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
-                var tooltip = nfCommon.formatUnorderedList(bulletins);
-
-                // show the tooltip
-                if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                    bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                        content: tooltip,
-                        position: {
-                            container: $('#summary'),
-                            at: 'bottom right',
-                            my: 'top left',
-                            adjust: {
-                                x: 4,
-                                y: 4
+            });
+    
+            // wire up the dataview to the grid
+            remoteProcessGroupsData.onRowCountChanged.subscribe(function (e, args) {
+                remoteProcessGroupsGrid.updateRowCount();
+                remoteProcessGroupsGrid.render();
+    
+                // update the total number of displayed processors, if necessary
+                if ($('#remote-process-group-summary-table').is(':visible')) {
+                  $('#displayed-items').text(nfCommon.formatInteger(args.current));
+                }
+            });
+            remoteProcessGroupsData.onRowsChanged.subscribe(function (e, args) {
+                remoteProcessGroupsGrid.invalidateRows(args.rows);
+                remoteProcessGroupsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#remote-process-group-summary-table').data('gridInstance', remoteProcessGroupsGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var remoteProcessGroupId = $(this).find('span.row-id').text();
+    
+                    // get the status item
+                    var item = remoteProcessGroupsData.getItemById(remoteProcessGroupId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                            content: tooltip,
+                            position: {
+                                container: $('#summary'),
+                                at: 'bottom right',
+                                my: 'top left',
+                                adjust: {
+                                    x: 4,
+                                    y: 4
+                                }
                             }
-                        }
-                    }));
+                        }));
+                    }
                 }
-            }
-        });
-
-        // initialize the cluster remote process group summary dialog
-        $('#cluster-remote-process-group-summary-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'Cluster Remote Process Group Summary',
-            buttons: [{
-                buttonText: 'Close',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
+            });
+    
+            // initialize the cluster remote process group summary dialog
+            $('#cluster-remote-process-group-summary-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.ClusterRemoteProcessGroupSummary'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the cluster processor summary dialog
+                            $('#cluster-remote-process-group-id').text('');
+                            $('#cluster-remote-process-group-name').text('');
+    
+                            // close the dialog
+                            this.modal('hide');
+                        }
+                    }
+                }],
                 handler: {
-                    click: function () {
-                        // clear the cluster processor summary dialog
-                        $('#cluster-remote-process-group-id').text('');
-                        $('#cluster-remote-process-group-name').text('');
-
-                        // close the dialog
-                        this.modal('hide');
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
                     }
                 }
-            }],
-            handler: {
-                close: function () {
-                    // show the summary loading container
-                    $('#summary-loading-container').show();
-                }
-            }
-        });
-
-        // cluster remote process group refresh
-        $('#cluster-remote-process-group-refresh-button').click(function () {
-            loadClusterRemoteProcessGroupSummary($('#cluster-remote-process-group-group-id').text(), $('#cluster-remote-process-group-id').text());
-        });
-
-        // initialize the cluster remote process group column model
-        var clusterRemoteProcessGroupsColumnModel = [
-            {id: 'node', field: 'node', name: 'Node', sortable: true, resizable: true},
-            targetUriColumn,
-            transmissionStatusColumn,
-            sentColumn,
-            receivedColumn
-        ];
-
-        // initialize the options for the cluster remote process group table
-        var clusterRemoteProcessGroupsOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: false,
-            enableColumnReorder: false,
-            autoEdit: false,
-            rowHeight: 24
-        };
-
-        // initialize the dataview
-        var clusterRemoteProcessGroupsData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        clusterRemoteProcessGroupsData.setItems([]);
-
-        // initialize the sort
-        sort('cluster-remote-process-group-summary-table', {
-            columnId: 'node',
-            sortAsc: true
-        }, clusterRemoteProcessGroupsData);
-
-        // initialize the grid
-        var clusterRemoteProcessGroupsGrid = new Slick.Grid('#cluster-remote-process-group-summary-table', clusterRemoteProcessGroupsData, clusterRemoteProcessGroupsColumnModel, clusterRemoteProcessGroupsOptions);
-        clusterRemoteProcessGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
-        clusterRemoteProcessGroupsGrid.registerPlugin(new Slick.AutoTooltips());
-        clusterRemoteProcessGroupsGrid.setSortColumn('node', true);
-        clusterRemoteProcessGroupsGrid.onSort.subscribe(function (e, args) {
+            });
+    
+            // cluster remote process group refresh
+            $('#cluster-remote-process-group-refresh-button').click(function () {
+                loadClusterRemoteProcessGroupSummary($('#cluster-remote-process-group-group-id').text(), $('#cluster-remote-process-group-id').text());
+            });
+    
+            // initialize the cluster remote process group column model
+            var clusterRemoteProcessGroupsColumnModel = [
+              {id: 'node', field: 'node', name: nf._.msg('nf-summary-table.Node'), sortable: true, resizable: true},
+                targetUriColumn,
+                transmissionStatusColumn,
+                sentColumn,
+                receivedColumn
+            ];
+    
+            // initialize the options for the cluster remote process group table
+            var clusterRemoteProcessGroupsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: false,
+                enableColumnReorder: false,
+                autoEdit: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var clusterRemoteProcessGroupsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            clusterRemoteProcessGroupsData.setItems([]);
+    
+            // initialize the sort
             sort('cluster-remote-process-group-summary-table', {
-                columnId: args.sortCol.field,
-                sortAsc: args.sortAsc
+                columnId: 'node',
+                sortAsc: true
             }, clusterRemoteProcessGroupsData);
-        });
-
-        // wire up the dataview to the grid
-        clusterRemoteProcessGroupsData.onRowCountChanged.subscribe(function (e, args) {
-            clusterRemoteProcessGroupsGrid.updateRowCount();
-            clusterRemoteProcessGroupsGrid.render();
-        });
-        clusterRemoteProcessGroupsData.onRowsChanged.subscribe(function (e, args) {
-            clusterRemoteProcessGroupsGrid.invalidateRows(args.rows);
-            clusterRemoteProcessGroupsGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#cluster-remote-process-group-summary-table').data('gridInstance', clusterRemoteProcessGroupsGrid);
-
-        // show the dialog when clicked
-        $('#system-diagnostics-link').click(function () {
-            refreshSystemDiagnostics().done(function () {
-                // hide the summary loading container
-                $('#summary-loading-container').hide();
-
-                // show the dialog
-                $('#system-diagnostics-dialog').modal('show');
-            });
-        });
-
-        // initialize the summary tabs
-        $('#system-diagnostics-tabs').tabbs({
-            tabStyle: 'tab',
-            selectedTabStyle: 'selected-tab',
-            scrollableTabContentStyle: 'scrollable',
-            tabs: [{
-                name: 'JVM',
-                tabContentId: 'jvm-tab-content'
-            }, {
-                name: 'System',
-                tabContentId: 'system-tab-content'
-            }, {
-                name: 'Version',
-                tabContentId: 'version-tab-content'
-            }]
-        });
-
-        // initialize the system diagnostics dialog
-        $('#system-diagnostics-dialog').modal({
-            scrollableContentStyle: 'scrollable',
-            headerText: 'System Diagnostics',
-            buttons: [{
-                buttonText: 'Close',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
+    
+            // initialize the grid
+            var clusterRemoteProcessGroupsGrid = new Slick.Grid('#cluster-remote-process-group-summary-table', clusterRemoteProcessGroupsData, clusterRemoteProcessGroupsColumnModel, clusterRemoteProcessGroupsOptions);
+            clusterRemoteProcessGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            clusterRemoteProcessGroupsGrid.registerPlugin(new Slick.AutoTooltips());
+            clusterRemoteProcessGroupsGrid.setSortColumn('node', true);
+            clusterRemoteProcessGroupsGrid.onSort.subscribe(function (e, args) {
+                sort('cluster-remote-process-group-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, clusterRemoteProcessGroupsData);
+            });
+    
+            // wire up the dataview to the grid
+            clusterRemoteProcessGroupsData.onRowCountChanged.subscribe(function (e, args) {
+                clusterRemoteProcessGroupsGrid.updateRowCount();
+                clusterRemoteProcessGroupsGrid.render();
+            });
+            clusterRemoteProcessGroupsData.onRowsChanged.subscribe(function (e, args) {
+                clusterRemoteProcessGroupsGrid.invalidateRows(args.rows);
+                clusterRemoteProcessGroupsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#cluster-remote-process-group-summary-table').data('gridInstance', clusterRemoteProcessGroupsGrid);
+    
+            // show the dialog when clicked
+            $('#system-diagnostics-link').click(function () {
+                refreshSystemDiagnostics().done(function () {
+                    // hide the summary loading container
+                    $('#summary-loading-container').hide();
+    
+                    // show the dialog
+                    $('#system-diagnostics-dialog').modal('show');
+                });
+            });
+    
+            // initialize the summary tabs
+            $('#system-diagnostics-tabs').tabbs({
+                tabStyle: 'tab',
+                selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
+                tabs: [{
+                  name: nf._.msg('nf-summary-table.JVM'),
+                    tabContentId: 'jvm-tab-content'
+                }, {
+                  name: nf._.msg('nf-summary-table.System'),
+                    tabContentId: 'system-tab-content'
+              }, {
+                  name: 'Version',
+                  tabContentId: 'version-tab-content'
+                }]
+            });
+    
+            // initialize the system diagnostics dialog
+            $('#system-diagnostics-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.SystemDiagnostics'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            this.modal('hide');
+                        }
+                    }
+                }],
                 handler: {
-                    click: function () {
-                        this.modal('hide');
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
+                    },
+                    open: function () {
+                      nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                     }
                 }
-            }],
-            handler: {
-                close: function () {
-                    // show the summary loading container
-                    $('#summary-loading-container').show();
-                },
-                open: function () {
-                    nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                }
+            });
+    
+            // refresh the system diagnostics when clicked
+            $('#system-diagnostics-refresh-button').click(function () {
+                refreshSystemDiagnostics();
+            });
+    
+            // initialize the total number of processors
+            $('#total-items').text('0');
+        };
+    
+        var sortState = {};
+    
+        /**
+         * Sorts the specified data using the specified sort details.
+         *
+         * @param {string} tableId
+         * @param {object} sortDetails
+         * @param {object} data
+         */
+        var sort = function (tableId, sortDetails, data) {
+            // ensure there is a state object for this table
+          if (nfCommon.isUndefined(sortState[tableId])) {
+                sortState[tableId] = {};
             }
-        });
-
-        // refresh the system diagnostics when clicked
-        $('#system-diagnostics-refresh-button').click(function () {
-            refreshSystemDiagnostics();
-        });
-
-        // initialize the total number of processors
-        $('#total-items').text('0');
-    };
-
-    var sortState = {};
-
-    /**
-     * Sorts the specified data using the specified sort details.
-     *
-     * @param {string} tableId
-     * @param {object} sortDetails
-     * @param {object} data
-     */
-    var sort = function (tableId, sortDetails, data) {
-        // ensure there is a state object for this table
-        if (nfCommon.isUndefined(sortState[tableId])) {
-            sortState[tableId] = {};
-        }
-
-        // defines a function for sorting
-        var comparer = function (a, b) {
-            if (sortDetails.columnId === 'moreDetails') {
-                var aBulletins = 0;
-                if (!nfCommon.isEmpty(a.bulletins)) {
-                    aBulletins = a.bulletins.length;
-                }
-                var bBulletins = 0;
-                if (!nfCommon.isEmpty(b.bulletins)) {
-                    bBulletins = b.bulletins.length;
-                }
-                return aBulletins - bBulletins;
-            } else if (sortDetails.columnId === 'runStatus' || sortDetails.columnId === 'transmissionStatus') {
-                var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                if (aString === bString) {
-                    return a.activeThreadCount - b.activeThreadCount;
+    
+            // defines a function for sorting
+            var comparer = function (a, b) {
+                if (sortDetails.columnId === 'moreDetails') {
+                    var aBulletins = 0;
+                  if (!nfCommon.isEmpty(a.bulletins)) {
+                        aBulletins = a.bulletins.length;
+                    }
+                    var bBulletins = 0;
+                  if (!nfCommon.isEmpty(b.bulletins)) {
+                        bBulletins = b.bulletins.length;
+                    }
+                    return aBulletins - bBulletins;
+                } else if (sortDetails.columnId === 'runStatus' || sortDetails.columnId === 'transmissionStatus') {
+                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                    if (aString === bString) {
+                        return a.activeThreadCount - b.activeThreadCount;
+                    } else {
+                        return aString === bString ? 0 : aString > bString ? 1 : -1;
+                    }
+                } else if (sortDetails.columnId === 'queued') {
+                    var mod = sortState[tableId].count % 4;
+                    if (mod < 2) {
+                        $('#' + tableId + ' span.queued-title').addClass('sorted');
+                      var aQueueCount = nfCommon.parseCount(a['queuedCount']);
+                      var bQueueCount = nfCommon.parseCount(b['queuedCount']);
+                        return aQueueCount - bQueueCount;
+                    } else {
+                        $('#' + tableId + ' span.queued-size-title').addClass('sorted');
+                      var aQueueSize = nfCommon.parseSize(a['queuedSize']);
+                      var bQueueSize = nfCommon.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 = nfCommon.isDefinedAndNotNull(a['percentUseCount']) ? a['percentUseCount'] : -1;
+                      var bPercentUseObject = nfCommon.isDefinedAndNotNull(b['percentUseCount']) ? b['percentUseCount'] : -1;
+                      return aPercentUseObject - bPercentUseObject;
+                  } else {
+                      $('#' + tableId + ' span.backpressure-data-size-title').addClass('sorted');
+                      var aPercentUseDataSize = nfCommon.isDefinedAndNotNull(a['percentUseBytes']) ? a['percentUseBytes'] : -1;
+                      var bPercentUseDataSize = nfCommon.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') {
+                  var aSplit = a[sortDetails.columnId].split(/\(([^)]+)\)/);
+                  var bSplit = b[sortDetails.columnId].split(/\(([^)]+)\)/);
+                    var mod = sortState[tableId].count % 4;
+                    if (mod < 2) {
+                        $('#' + tableId + ' span.' + sortDetails.columnId + '-title').addClass('sorted');
+                      var aCount = nfCommon.parseCount(aSplit[0]);
+                      var bCount = nfCommon.parseCount(bSplit[0]);
+                        return aCount - bCount;
+                    } else {
+                        $('#' + tableId + ' span.' + sortDetails.columnId + '-size-title').addClass('sorted');
+                      var aSize = nfCommon.parseSize(aSplit[1]);
+                      var bSize = nfCommon.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 = nfCommon.parseSize(a['read']);
+                      var bReadSize = nfCommon.parseSize(b['read']);
+                        return aReadSize - bReadSize;
+                    } else {
+                        $('#' + tableId + ' span.written-title').addClass('sorted');
+                      var aWriteSize = nfCommon.parseSize(a['written']);
+                      var bWriteSize = nfCommon.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 = nfCommon.parseCount(a['tasks']);
+                      var bTasks = nfCommon.parseCount(b['tasks']);
+                        return aTasks - bTasks;
+                    } else {
+                        $('#' + tableId + ' span.time-title').addClass('sorted');
+                      var aDuration = nfCommon.parseDuration(a['tasksDuration']);
+                      var bDuration = nfCommon.parseDuration(b['tasksDuration']);
+                        return aDuration - bDuration;
+                    }
                 } else {
+                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
                     return aString === bString ? 0 : aString > bString ? 1 : -1;
                 }
-            } else if (sortDetails.columnId === 'queued') {
-                var mod = sortState[tableId].count % 4;
-                if (mod < 2) {
-                    $('#' + tableId + ' span.queued-title').addClass('sorted');
-                    var aQueueCount = nfCommon.parseCount(a['queuedCount']);
-                    var bQueueCount = nfCommon.parseCount(b['queuedCount']);
-                    return aQueueCount - bQueueCount;
-                } else {
-                    $('#' + tableId + ' span.queued-size-title').addClass('sorted');
-                    var aQueueSize = nfCommon.parseSize(a['queuedSize']);
-                    var bQueueSize = nfCommon.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 = nfCommon.isDefinedAndNotNull(a['percentUseCount']) ? a['percentUseCount'] : -1;
-                    var bPercentUseObject = nfCommon.isDefinedAndNotNull(b['percentUseCount']) ? b['percentUseCount'] : -1;
-                    return aPercentUseObject - bPercentUseObject;
-                } else {
-                    $('#' + tableId + ' span.backpressure-data-size-title').addClass('sorted');
-                    var aPercentUseDataSize = nfCommon.isDefinedAndNotNull(a['percentUseBytes']) ? a['percentUseBytes'] : -1;
-                    var bPercentUseDataSize = nfCommon.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') {
-                var aSplit = a[sortDetails.columnId].split(/\(([^)]+)\)/);
-                var bSplit = b[sortDetails.columnId].split(/\(([^)]+)\)/);
-                var mod = sortState[tableId].count % 4;
-                if (mod < 2) {
-                    $('#' + tableId + ' span.' + sortDetails.columnId + '-title').addClass('sorted');
-                    var aCount = nfCommon.parseCount(aSplit[0]);
-                    var bCount = nfCommon.parseCount(bSplit[0]);
-                    return aCount - bCount;
-                } else {
-                    $('#' + tableId + ' span.' + sortDetails.columnId + '-size-title').addClass('sorted');
-                    var aSize = nfCommon.parseSize(aSplit[1]);
-                    var bSize = nfCommon.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 = nfCommon.parseSize(a['read']);
-                    var bReadSize = nfCommon.parseSize(b['read']);
-                    return aReadSize - bReadSize;
-                } else {
-                    $('#' + tableId + ' span.written-title').addClass('sorted');
-                    var aWriteSize = nfCommon.parseSize(a['written']);
-                    var bWriteSize = nfCommon.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 = nfCommon.parseCount(a['tasks']);
-                    var bTasks = nfCommon.parseCount(b['tasks']);
-                    return aTasks - bTasks;
-                } else {
-                    $('#' + tableId + ' span.time-title').addClass('sorted');
-                    var aDuration = nfCommon.parseDuration(a['tasksDuration']);
-                    var bDuration = nfCommon.parseDuration(b['tasksDuration']);
-                    return aDuration - bDuration;
-                }
+            };
+    
+            // remove previous sort indicators
+            $('#' + tableId + ' span.queued-title').removeClass('sorted');
+            $('#' + tableId + ' span.queued-size-title').removeClass('sorted');
+          $('#' + tableId + ' span.backpressure-object-title').removeClass('sorted');
+          $('#' + tableId + ' span.backpressure-data-size-title').removeClass('sorted');
+            $('#' + tableId + ' span.input-title').removeClass('sorted');
+            $('#' + tableId + ' span.input-size-title').removeClass('sorted');
+            $('#' + tableId + ' span.output-title').removeClass('sorted');
+            $('#' + tableId + ' span.output-size-title').removeClass('sorted');
+            $('#' + tableId + ' span.read-title').removeClass('sorted');
+            $('#' + tableId + ' span.written-title').removeClass('sorted');
+            $('#' + tableId + ' span.time-title').removeClass('sorted');
+            $('#' + tableId + ' span.tasks-title').removeClass('sorted');
+            $('#' + tableId + ' span.sent-title').removeClass('sorted');
+            $('#' + tableId + ' span.sent-size-title').removeClass('sorted');
+            $('#' + tableId + ' span.received-title').removeClass('sorted');
+            $('#' + tableId + ' span.received-size-title').removeClass('sorted');
+            $('#' + tableId + ' span.transferred-title').removeClass('sorted');
+            $('#' + tableId + ' span.transferred-size-title').removeClass('sorted');
+    
+            // update/reset the count as appropriate
+            if (sortState[tableId].prevColumn !== sortDetails.columnId) {
+                sortState[tableId].count = 0;
             } else {
-                var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                return aString === bString ? 0 : aString > bString ? 1 : -1;
+                sortState[tableId].count++;
             }
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+    
+            // record the previous table and sorted column
+            sortState[tableId].prevColumn = sortDetails.columnId;
         };
-
-        // remove previous sort indicators
-        $('#' + tableId + ' span.queued-title').removeClass('sorted');
-        $('#' + tableId + ' span.queued-size-title').removeClass('sorted');
-        $('#' + tableId + ' span.backpressure-object-title').removeClass('sorted');
-        $('#' + tableId + ' span.backpressure-data-size-title').removeClass('sorted');
-        $('#' + tableId + ' span.input-title').removeClass('sorted');
-        $('#' + tableId + ' span.input-size-title').removeClass('sorted');
-        $('#' + tableId + ' span.output-title').removeClass('sorted');
-        $('#' + tableId + ' span.output-size-title').removeClass('sorted');
-        $('#' + tableId + ' span.read-title').removeClass('sorted');
-        $('#' + tableId + ' span.written-title').removeClass('sorted');
-        $('#' + tableId + ' span.time-title').removeClass('sorted');
-        $('#' + tableId + ' span.tasks-title').removeClass('sorted');
-        $('#' + tableId + ' span.sent-title').removeClass('sorted');
-        $('#' + tableId + ' span.sent-size-title').removeClass('sorted');
-        $('#' + tableId + ' span.received-title').removeClass('sorted');
-        $('#' + tableId + ' span.received-size-title').removeClass('sorted');
-        $('#' + tableId + ' span.transferred-title').removeClass('sorted');
-        $('#' + tableId + ' span.transferred-size-title').removeClass('sorted');
-
-        // update/reset the count as appropriate
-        if (sortState[tableId].prevColumn !== sortDetails.columnId) {
-            sortState[tableId].count = 0;
-        } else {
-            sortState[tableId].count++;
-        }
-
-        // perform the sort
-        data.sort(comparer, sortDetails.sortAsc);
-
-        // record the previous table and sorted column
-        sortState[tableId].prevColumn = sortDetails.columnId;
-    };
-
-    /**
-     * Performs the processor 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;
-    };
-
-    /**
-     * Refreshes the system diagnostics.
-     */
-    var refreshSystemDiagnostics = function () {
-        var systemDiagnosticsUri = config.urls.systemDiagnostics;
-
-        // add the parameter if appropriate
-        var parameters = {};
-        if (!nfCommon.isNull(clusterNodeId)) {
-            parameters['clusterNodeId'] = clusterNodeId;
-        }
-
-        // update the status uri if appropriate
-        if (!$.isEmptyObject(parameters)) {
-            systemDiagnosticsUri += '?' + $.param(parameters);
-        }
-
-        return $.ajax({
-            type: 'GET',
-            url: systemDiagnosticsUri,
-            dataType: 'json'
-        }).done(function (response) {
-            var systemDiagnostics = response.systemDiagnostics;
-            var aggregateSnapshot = systemDiagnostics.aggregateSnapshot;
-
-            // heap
-            $('#max-heap').text(aggregateSnapshot.maxHeap);
-            $('#total-heap').text(aggregateSnapshot.totalHeap);
-            $('#used-heap').text(aggregateSnapshot.usedHeap);
-            $('#free-heap').text(aggregateSnapshot.freeHeap);
-
-            // ensure the heap utilization could be calculated
-            if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.heapUtilization)) {
-                $('#utilization-heap').text('(' + aggregateSnapshot.heapUtilization + ')');
-            } else {
-                $('#utilization-heap').text('');
-            }
-
-            // non heap
-            $('#max-non-heap').text(aggregateSnapshot.maxNonHeap);
-            $('#total-non-heap').text(aggregateSnapshot.totalNonHeap);
-            $('#used-non-heap').text(aggregateSnapshot.usedNonHeap);
-            $('#free-non-heap').text(aggregateSnapshot.freeNonHeap);
-
-            // enure the non heap utilization could be calculated
-            if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.nonHeapUtilization)) {
-                $('#utilization-non-heap').text('(' + aggregateSnapshot.nonHeapUtilization + ')');
-            } else {
-                $('#utilization-non-heap').text('');
+    
+        /**
+         * Performs the processor 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;
             }
-
-            // garbage collection
-            var garbageCollectionContainer = $('#garbage-collection-table tbody').empty();
-            if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.garbageCollection)) {
-                // sort the garbage collections
-                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
-                $.each(sortedGarbageCollection, function (_, garbageCollection) {
-                    addGarbageCollection(garbageCollectionContainer, garbageCollection);
-                });
+    
+            try {
+                // perform the row filtering
+                var filterExp = new RegExp(args.searchString, 'i');
+            } catch (e) {
+                // invalid regex
+                return false;
             }
-            
-            // uptime
-            $('#uptime').text(aggregateSnapshot.uptime);
-
-            // available processors
-            $('#available-processors').text(aggregateSnapshot.availableProcessors);
-
-            // load
-            if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.processorLoadAverage)) {
-                $('#processor-load-average').text(nfCommon.formatFloat(aggregateSnapshot.processorLoadAverage));
-            } else {
-                $('#processor-load-average').html(nfCommon.formatValue(aggregateSnapshot.processorLoadAverage));
+    
+            return item[args.property].search(filterExp) >= 0;
+        };
+    
+        /**
+         * Refreshes the system diagnostics.
+         */
+        var refreshSystemDiagnostics = function () {
+            var systemDiagnosticsUri = config.urls.systemDiagnostics;
+    
+            // add the parameter if appropriate
+            var parameters = {};
+          if (!nfCommon.isNull(clusterNodeId)) {
+                parameters['clusterNodeId'] = clusterNodeId;
             }
-
-            // flow file storage usage
-            var flowFileRepositoryStorageUsageContainer = $('#flow-file-repository-storage-usage-container').empty();
-            addStorageUsage(flowFileRepositoryStorageUsageContainer, aggregateSnapshot.flowFileRepositoryStorageUsage);
-
-            // content repo storage usage
-            var contentRepositoryUsageContainer = $('#content-repository-storage-usage-container').empty();
-            if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.contentRepositoryStorageUsage)) {
-                // sort the content repos
-                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
-                $.each(sortedContentRepositoryStorageUsage, function (_, contentRepository) {
-                    addStorageUsage(contentRepositoryUsageContainer, contentRepository);
-                });
+    
+            // update the status uri if appropriate
+            if (!$.isEmptyObject(parameters)) {
+                systemDiagnosticsUri += '?' + $.param(parameters);
             }
-
-            // Version
-            var versionSpanSelectorToFieldMap = {
-                '#version-nifi': aggregateSnapshot.versionInfo.niFiVersion,
-                '#version-build-tag': aggregateSnapshot.versionInfo.buildTag,
-                '#version-build-timestamp': aggregateSnapshot.versionInfo.buildTimestamp,
-                '#version-build-branch': aggregateSnapshot.versionInfo.buildBranch,
-                '#version-build-revision': aggregateSnapshot.versionInfo.buildRevision,
-                '#version-java-version': aggregateSnapshot.versionInfo.javaVersion,
-                '#version-java-vendor': aggregateSnapshot.versionInfo.javaVendor,
-                '#version-os-name': aggregateSnapshot.versionInfo.osName,
-                '#version-os-version': aggregateSnapshot.versionInfo.osVersion,
-                '#version-os-arch': aggregateSnapshot.versionInfo.osArchitecture
-            };
-            for (var versionSpanSelector in versionSpanSelectorToFieldMap) {
-                var dataField = versionSpanSelectorToFieldMap[versionSpanSelector];
-                if (dataField) {
-                    $(versionSpanSelector).text(dataField);
+    
+            return $.ajax({
+                type: 'GET',
+                url: systemDiagnosticsUri,
+                dataType: 'json'
+            }).done(function (response) {
+                var systemDiagnostics = response.systemDiagnostics;
+                var aggregateSnapshot = systemDiagnostics.aggregateSnapshot;
+    
+                // heap
+                $('#max-heap').text(aggregateSnapshot.maxHeap);
+                $('#total-heap').text(aggregateSnapshot.totalHeap);
+                $('#used-heap').text(aggregateSnapshot.usedHeap);
+                $('#free-heap').text(aggregateSnapshot.freeHeap);
+    
+                // ensure the heap utilization could be calculated
+              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.heapUtilization)) {
+                    $('#utilization-heap').text('(' + aggregateSnapshot.heapUtilization + ')');
                 } else {
-                    $(versionSpanSelector).text('(not available)').addClass('unset');
+                    $('#utilization-heap').text('');
                 }
-            }
-
-            // update the stats last refreshed timestamp
-            $('#system-diagnostics-last-refreshed').text(aggregateSnapshot.statsLastRefreshed);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Adds a new garbage collection to the dialog
-     * @param {type} container
-     * @param {type} garbageCollection
-     */
-    var addGarbageCollection = function (container, garbageCollection) {
-        var nameTr = $('<tr></tr>').appendTo(container);
-        $('<td class="setting-name"></td>').text(garbageCollection.name + ':').appendTo(nameTr);
-        var valTr = $('<tr></tr>').appendTo(container);
-        $('<td></td>').append($('<b></b>').text(garbageCollection.collectionCount + ' times (' + garbageCollection.collectionTime + ')')).appendTo(valTr);
-        $('<tr></tr>').text(' ').appendTo(container);
-    };
-
-    /**
-     * Adds a new storage usage process bar to the dialog.
-     *
-     * @argument {jQuery} container     The container to add the storage usage to.
-     * @argument {object} storageUsage     The storage usage.
-     */
-    var addStorageUsage = function (container, storageUsage) {
-        var total = parseInt(storageUsage.totalSpaceBytes, 10);
-        var used = parseInt(storageUsage.usedSpaceBytes, 10);
-        var storageUsageContainer = $('<div class="storage-usage"></div>').appendTo(container);
-
-        var storage = $('<div class="storage-identifier setting-name"></div>');
-        storage.text('Usage:');
-        if (nfCommon.isDefinedAndNotNull(storageUsage.identifier)) {
-            storage.text('Usage for ' + storageUsage.identifier + ':');
-        }
-        storage.appendTo(storageUsageContainer);
-
-        (nfNgBridge.injector.get('$compile')($('<md-progress-linear class="md-hue-2" md-mode="determinate" value="' + (used / total) * 100 + '" aria-label="FlowFile Repository Storage Usage"></md-progress-linear>'))(nfNgBridge.rootScope)).appendTo(storageUsageContainer);
-
-        var usageDetails = $('<div class="storage-usage-details"></div>').text(' (' + storageUsage.usedSpace + ' of ' + storageUsage.totalSpace + ')').prepend($('<b></b>').text(Math.round((used / total) * 100) + '%'));
-        $('<div class="storage-usage-header"></div>').append(usageDetails).append('<div class="clear"></div>').appendTo(storageUsageContainer);
-    };
-
-    /**
-     * 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 $('#summary-filter').val();
-    };
-
-    /**
-     * Poplates the processor summary table using the specified process group.
-     *
-     * @argument {array} processorItems                 The processor data
-     * @argument {array} connectionItems                The connection data
-     * @argument {array} processGroupItems              The process group data
-     * @argument {array} inputPortItems                 The input port data
-     * @argument {array} outputPortItems                The input port data
-     * @argument {array} remoteProcessGroupItems        The remote process group data
-     * @argument {object} aggregateSnapshot            The process group status
-     */
-    var populateProcessGroupStatus = function (processorItems, connectionItems, processGroupItems, inputPortItems, outputPortItems, remoteProcessGroupItems, aggregateSnapshot) {
-        // add the processors to the summary grid
-        $.each(aggregateSnapshot.processorStatusSnapshots, function (i, procStatusEntity) {
-            processorItems.push(procStatusEntity.processorStatusSnapshot);
-        });
-
-        // add the processors to the summary grid
-        $.each(aggregateSnapshot.connectionStatusSnapshots, function (i, connStatusEntity) {
-            connectionItems.push(connStatusEntity.connectionStatusSnapshot);
-        });
-
-        // add the input ports to the summary grid
-        $.each(aggregateSnapshot.inputPortStatusSnapshots, function (i, portStatusEntity) {
-            inputPortItems.push(portStatusEntity.portStatusSnapshot);
-        });
-
-        // add the input ports to the summary grid
-        $.each(aggregateSnapshot.outputPortStatusSnapshots, function (i, portStatusEntity) {
-            outputPortItems.push(portStatusEntity.portStatusSnapshot);
-        });
-
-        // add the input ports to the summary grid
-        $.each(aggregateSnapshot.remoteProcessGroupStatusSnapshots, function (i, rpgStatusEntity) {
-            remoteProcessGroupItems.push(rpgStatusEntity.remoteProcessGroupStatusSnapshot);
-        });
-
-        // add the process group status as well
-        processGroupItems.push(aggregateSnapshot);
-
-        // add any child group's status
-        $.each(aggregateSnapshot.processGroupStatusSnapshots, function (i, childProcessGroupEntity) {
-            populateProcessGroupStatus(processorItems, connectionItems, processGroupItems, inputPortItems, outputPortItems, remoteProcessGroupItems, childProcessGroupEntity.processGroupStatusSnapshot);
-        });
-    };
-
-    /**
-     * Applies the filter found in the filter expression text field.
-     */
-    var applyFilter = function () {
-        var grid;
-        if ($('#processor-summary-table').is(':visible')) {
-            grid = $('#processor-summary-table').data('gridInstance');
-        } else if ($('#connection-summary-table').is(':visible')) {
-            grid = $('#connection-summary-table').data('gridInstance');
-        } else if ($('#input-port-summary-table').is(':visible')) {
-            grid = $('#input-port-summary-table').data('gridInstance');
-        } else if ($('#output-port-summary-table').is(':visible')) {
-            grid = $('#output-port-summary-table').data('gridInstance');
-        } else if ($('#process-group-summary-table').is(':visible')) {
-            grid = $('#process-group-summary-table').data('gridInstance');
-        } else if ($('#remote-process-group-summary-table').is(':visible')) {
-            grid = $('#remote-process-group-summary-table').data('gridInstance');
-        }
-
-        // ensure the grid has been initialized
-        if (nfCommon.isDefinedAndNotNull(grid)) {
-            var data = grid.getData();
-
-            // update the search criteria
-            data.setFilterArgs({
-                searchString: getFilterText(),
-                property: $('#summary-filter-type').combo('getSelectedOption').value
-            });
-            data.refresh();
-        }
-    };
-
-    /**
-     * Loads  the cluster processor details dialog for the specified processor.
-     *
-     * @argument {string} groupId         The group id
-     * @argument {string} processorId     The processor id
-     */
-    var loadClusterProcessorSummary = function (groupId, processorId) {
-        // get the summary
-        $.ajax({
-            type: 'GET',
-            url: config.urls.api + '/flow/processors/' + encodeURIComponent(processorId) + '/status',
-            data: {
-                nodewise: true
-            },
-            dataType: 'json'
-        }).done(function (response) {
-            if (nfCommon.isDefinedAndNotNull(response.processorStatus)) {
-                var processorStatus = response.processorStatus;
-
-                var clusterProcessorsGrid = $('#cluster-processor-summary-table').data('gridInstance');
-                var clusterProcessorsData = clusterProcessorsGrid.getData();
-
-                var clusterProcessors = [];
-
-                // populate the table
-                $.each(processorStatus.nodeSnapshots, function (i, nodeSnapshot) {
-                    var snapshot = nodeSnapshot.statusSnapshot;
-                    clusterProcessors.push({
-                        id: nodeSnapshot.nodeId,
-                        node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                        runStatus: snapshot.runStatus,
-                        activeThreadCount: snapshot.activeThreadCount,
-                        input: snapshot.input,
-                        read: snapshot.read,
-                        written: snapshot.written,
-                        output: snapshot.output,
-                        tasks: snapshot.tasks,
-                        tasksDuration: snapshot.tasksDuration
-                    });
-                });
-
-                // update the processors
-                clusterProcessorsData.setItems(clusterProcessors);
-                clusterProcessorsData.reSort();
-                clusterProcessorsGrid.invalidate();
-
-                // populate the processor details
-                $('#cluster-processor-name').text(processorStatus.name).ellipsis();
-                $('#cluster-processor-type').text(processorStatus.aggregateSnapshot.type).ellipsis();
-                $('#cluster-processor-id').text(processorStatus.id);
-                $('#cluster-processor-group-id').text(processorStatus.groupId);
-
-                // update the stats last refreshed timestamp
-                $('#cluster-processor-summary-last-refreshed').text(processorStatus.statsLastRefreshed);
-            }
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Loads the cluster connection details dialog for the specified processor.
-     *
-     * @argument {string} groupId   The group id
-     * @argument {string} connectionId     The connection id
-     */
-    var loadClusterConnectionSummary = function (groupId, connectionId) {
-        // get the summary
-        $.ajax({
-            type: 'GET',
-            url: config.urls.api + '/flow/connections/' + encodeURIComponent(connectionId) + '/status',
-            data: {
-                nodewise: true
-            },
-            dataType: 'json'
-        }).done(function (response) {
-            if (nfCommon.isDefinedAndNotNull(response.connectionStatus)) {
-                var connectionStatus = response.connectionStatus;
-
-                var clusterConnectionsGrid = $('#cluster-connection-summary-table').data('gridInstance');
-                var clusterConnectionsData = clusterConnectionsGrid.getData();
-
-                var clusterConnections = [];
-
-                // populate the table
-                $.each(connectionStatus.nodeSnapshots, function (i, nodeSnapshot) {
-                    var snapshot = nodeSnapshot.statusSnapshot;
-                    clusterConnections.push({
-                        id: nodeSnapshot.nodeId,
-                        node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                        input: snapshot.input,
-                        queued: snapshot.queued,
-                        queuedCount: snapshot.queuedCount,
-                        queuedSize: snapshot.queuedSize,
-                        percentUseCount: snapshot.percentUseCount,
-                        percentUseBytes: snapshot.percentUseBytes,
-                        output: snapshot.output
-                    });
-                });
-
-                // update the processors
-                clusterConnectionsData.setItems(clusterConnections);
-                clusterConnectionsData.reSort();
-                clusterConnectionsGrid.invalidate();
-
-                // populate the processor details
-                $('#cluster-connection-name').text(connectionStatus.name).ellipsis();
-                $('#cluster-connection-type').text('Connection').ellipsis();
-                $('#cluster-connection-id').text(connectionStatus.id);
-                $('#cluster-connection-group-id').text(connectionStatus.groupId);
-
-                // update the stats last refreshed timestamp
-                $('#cluster-connection-summary-last-refreshed').text(connectionStatus.statsLastRefreshed);
-            }
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Loads the cluster input port details dialog for the specified processor.
-     *
-     * @argument {string} processGroupId     The process group id
-     */
-    var loadClusterProcessGroupSummary = function (processGroupId) {
-        // get the summary
-        $.ajax({
-            type: 'GET',
-            url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupId) + '/status',
-            data: {
-                nodewise: true,
-                recursive: false
-            },
-            dataType: 'json'
-        }).done(function (response) {
-            if (nfCommon.isDefinedAndNotNull(response.processGroupStatus)) {
-                var processGroupStatus = response.processGroupStatus;
-
-                var clusterProcessGroupsGrid = $('#cluster-process-group-summary-table').data('gridInstance');
-                var clusterProcessGroupsData = clusterProcessGroupsGrid.getData();
-
-                var clusterProcessGroups = [];
-
-                // populate the table
-                $.each(processGroupStatus.nodeSnapshots, function (i, nodeSnapshot) {
-                    var snapshot = nodeSnapshot.statusSnapshot;
-                    clusterProcessGroups.push({
-                        id: nodeSnapshot.nodeId,
-                        node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                        activeThreadCount: snapshot.activeThreadCount,
-                        transferred: snapshot.transferred,
-                        input: snapshot.input,
-                        queued: snapshot.queued,
-                        queuedCount: snapshot.queuedCount,
-                        queuedSize: snapshot.queuedSize,
-                        output: snapshot.output,
-                        read: snapshot.read,
-                        written: snapshot.written,
-                        sent: snapshot.sent,
-                        received: snapshot.received
-                    });
-                });
-
-                // update the input ports
-                clusterProcessGroupsData.setItems(clusterProcessGroups);
-                clusterProcessGroupsData.reSort();
-                clusterProcessGroupsGrid.invalidate();
-
-                // populate the input port details
-                $('#cluster-process-group-name').text(processGroupStatus.name).ellipsis();
-                $('#cluster-process-group-type').text('Process Group').ellipsis();
-                $('#cluster-process-group-id').text(processGroupStatus.id);
-
-                // update the stats last refreshed timestamp
-                $('#cluster-process-group-summary-last-refreshed').text(processGroupStatus.statsLastRefreshed);
-            }
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Loads the cluster input port details dialog for the specified processor.
-     *
-     * @argument {string} groupId         The group id
-     * @argument {string} inputPortId     The input port id
-     */
-    var loadClusterInputPortSummary = function (groupId, inputPortId) {
-        // get the summary
-        $.ajax({
-            type: 'GET',
-            url: config.urls.api + '/flow/input-ports/' + encodeURIComponent(inputPortId) + '/status',
-            data: {
-                nodewise: true
-            },
-            dataType: 'json'
-        }).done(function (response) {
-            if (nfCommon.isDefinedAndNotNull(response.portStatus)) {
-                var inputPortStatus = response.portStatus;
-
-                var clusterInputPortsGrid = $('#cluster-input-port-summary-table').data('gridInstance');
-                var clusterInputPortsData = clusterInputPortsGrid.getData();
-
-                var clusterInputPorts = [];
-
-                // populate the table
-                $.each(inputPortStatus.nodeSnapshots, function (i, nodeSnapshot) {
-                    var snapshot = nodeSnapshot.statusSnapshot;
-                    clusterInputPorts.push({
-                        id: nodeSnapshot.nodeId,
-                        node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                        runStatus: snapshot.runStatus,
-                        activeThreadCount: snapshot.activeThreadCount,
-                        output: snapshot.output
-                    });
-                });
-
-                // update the input ports
-                clusterInputPortsData.setItems(clusterInputPorts);
-                clusterInputPortsData.reSort();
-                clusterInputPortsGrid.invalidate();
-
-                // populate the input port details
-                $('#cluster-input-port-name').text(inputPortStatus.name).ellipsis();
-                $('#cluster-input-port-type').text('Input Port').ellipsis();
-                $('#cluster-input-port-id').text(inputPortStatus.id);
-                $('#cluster-input-port-group-id').text(inputPortStatus.groupId);
-
-                // update the stats last refreshed timestamp
-                $('#cluster-input-port-summary-last-refreshed').text(inputPortStatus.statsLastRefreshed);
-            }
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Loads the cluster output port details dialog for the specified processor.
-     *
-     * @argument {string} groupId          The group id
-     * @argument {string} outputPortId     The row id
-     */
-    var loadClusterOutputPortSummary = function (groupId, outputPortId) {
-        // get the summary
-        $.ajax({
-            type: 'GET',
-            url: config.urls.api + '/flow/output-ports/' + encodeURIComponent(outputPortId) + '/status',
-            data: {
-                nodewise: true
-            },
-            dataType: 'json'
-        }).done(function (response) {
-            if (nfCommon.isDefinedAndNotNull(response.portStatus)) {
-                var outputPortStatus = response.portStatus;
-
-                var clusterOutputPortsGrid = $('#cluster-output-port-summary-table').data('gridInstance');
-                var clusterOutputPortsData = clusterOutputPortsGrid.getData();
-
-                var clusterOutputPorts = [];
-
-                // populate the table
-                $.each(outputPortStatus.nodeSnapshots, function (i, nodeSnapshot) {
-                    var snapshot = nodeSnapshot.statusSnapshot;
-                    clusterOutputPorts.push({
-                        id: nodeSnapshot.nodeId,
-                        node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                        runStatus: snapshot.runStatus,
-                        activeThreadCount: snapshot.activeThreadCount,
-                        input: snapshot.input
+    
+                // non heap
+                $('#max-non-heap').text(aggregateSnapshot.maxNonHeap);
+                $('#total-non-heap').text(aggregateSnapshot.totalNonHeap);
+                $('#used-non-heap').text(aggregateSnapshot.usedNonHeap);
+                $('#free-non-heap').text(aggregateSnapshot.freeNonHeap);
+    
+                // enure the non heap utilization could be calculated
+              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.nonHeapUtilization)) {
+                    $('#utilization-non-heap').text('(' + aggregateSnapshot.nonHeapUtilization + ')');
+                } else {
+                    $('#utilization-non-heap').text('');
+                }
+    
+                // garbage collection
+                var garbageCollectionContainer = $('#garbage-collection-table tbody').empty();
+              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.garbageCollection)) {
+                  // sort the garbage collections
+                  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
+                  $.each(sortedGarbageCollection, function (_, garbageCollection) {
+                        addGarbageCollection(garbageCollectionContainer, garbageCollection);
                     });
-                });
-
-                // update the output ports
-                clusterOutputPortsData.setItems(clusterOutputPorts);
-                clusterOutputPortsData.reSort();
-                clusterOutputPortsGrid.invalidate();
-
-                // populate the output port details
-                $('#cluster-output-port-name').text(outputPortStatus.name).ellipsis();
-                $('#cluster-output-port-type').text('Output Port').ellipsis();
-                $('#cluster-output-port-id').text(outputPortStatus.id);
-                $('#cluster-output-port-group-id').text(outputPortStatus.groupId);
-
-                // update the stats last refreshed timestamp
-                $('#cluster-output-port-summary-last-refreshed').text(outputPortStatus.statsLastRefreshed);
-            }
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Loads the cluster remote process group details dialog for the specified processor.
-     *
-     * @argument {string} groupId   The group id
-     * @argument {string} remoteProcessGroupId     The remote process group id
-     */
-    var loadClusterRemoteProcessGroupSummary = function (groupId, remoteProcessGroupId) {
-        // get the summary
-        $.ajax({
-            type: 'GET',
-            url: config.urls.api + '/flow/remote-process-groups/' + encodeURIComponent(remoteProcessGroupId) + '/status',
-            data: {
-                nodewise: true
-            },
-            dataType: 'json'
-        }).done(function (response) {
-            if (nfCommon.isDefinedAndNotNull(response.remoteProcessGroupStatus)) {
-                var remoteProcessGroupStatus = response.remoteProcessGroupStatus;
-
-                var clusterRemoteProcessGroupsGrid = $('#cluster-remote-process-group-summary-table').data('gridInstance');
-                var clusterRemoteProcessGroupsData = clusterRemoteProcessGroupsGrid.getData();
-
-                var clusterRemoteProcessGroups = [];
-
-                // populate the table
-                $.each(remoteProcessGroupStatus.nodeSnapshots, function (i, nodeSnapshot) {
-                    var snapshot = nodeSnapshot.statusSnapshot;
-                    clusterRemoteProcessGroups.push({
-                        id: nodeSnapshot.nodeId,
-                        node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                        targetUri: snapshot.targetUri,
-                        transmissionStatus: snapshot.transmissionStatus,
-                        sent: snapshot.sent,
-                        received: snapshot.received,
-                        activeThreadCount: snapshot.activeThreadCount
+              }
+              
+              // uptime
+              $('#uptime').text(aggregateSnapshot.uptime);
+    
+                // available processors
+                $('#available-processors').text(aggregateSnapshot.availableProcessors);
+    
+                // load
+              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.processorLoadAverage)) {
+                  $('#processor-load-average').text(nfCommon.formatFloat(aggregateSnapshot.processorLoadAverage));
+                } else {
+                  $('#processor-load-average').html(nfCommon.formatValue(aggregateSnapshot.processorLoadAverage));
+                }
+    
+              // flow file storage usage
+                var flowFileRepositoryStorageUsageContainer = $('#flow-file-repository-storage-usage-container').empty();
+                addStorageUsage(flowFileRepositoryStorageUsageContainer, aggregateSnapshot.flowFileRepositoryStorageUsage);
+    
+              // content repo storage usage
+                var contentRepositoryUsageContainer = $('#content-repository-storage-usage-container').empty();
+              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.contentRepositoryStorageUsage)) {
+                  // sort the content repos
+                  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
+                  $.each(sortedContentRepositoryStorageUsage, function (_, contentRepository) {
+                        addStorageUsage(contentRepositoryUsageContainer, contentRepository);
                     });
-                });
-
-                // update the remote process groups
-                clusterRemoteProcessGroupsData.setItems(clusterRemoteProcessGroups);
-                clusterRemoteProcessGroupsData.reSort();
-                clusterRemoteProcessGroupsGrid.invalidate();
-
-                // populate the remote process group details
-                $('#cluster-remote-process-group-name').text(remoteProcessGroupStatus.name).ellipsis();
-                $('#cluster-remote-process-group-type').text('Remote Process Group').ellipsis();
-                $('#cluster-remote-process-group-id').text(remoteProcessGroupStatus.id);
-                $('#cluster-remote-process-group-group-id').text(remoteProcessGroupStatus.groupId);
-
+              }
+  
+              // Version
+              var versionSpanSelectorToFieldMap = {
+                  '#version-nifi': aggregateSnapshot.versionInfo.niFiVersion,
+                  '#version-build-tag': aggregateSnapshot.versionInfo.buildTag,
+                  '#version-build-timestamp': aggregateSnapshot.versionInfo.buildTimestamp,
+                  '#version-build-branch': aggregateSnapshot.versionInfo.buildBranch,
+                  '#version-build-revision': aggregateSnapshot.versionInfo.buildRevision,
+                  '#version-java-version': aggregateSnapshot.versionInfo.javaVersion,
+                  '#version-java-vendor': aggregateSnapshot.versionInfo.javaVendor,
+                  '#version-os-name': aggregateSnapshot.versionInfo.osName,
+                  '#version-os-version': aggregateSnapshot.versionInfo.osVersion,
+                  '#version-os-arch': aggregateSnapshot.versionInfo.osArchitecture
+              };
+              for (var versionSpanSelector in versionSpanSelectorToFieldMap) {
+                  var dataField = versionSpanSelectorToFieldMap[versionSpanSelector];
+                  if (dataField) {
+                      $(versionSpanSelector).text(dataField);
+                  } else {
+                      $(versionSpanSelector).text('(not available)').addClass('unset');
+                  }
+              }
+    
                 // update the stats last refreshed timestamp
-                $('#cluster-remote-process-group-summary-last-refreshed').text(remoteProcessGroupStatus.statsLastRefreshed);
-            }
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    var clusterNodeId = null;
-
-    return {
-
+                $('#system-diagnostics-last-refreshed').text(aggregateSnapshot.statsLastRefreshed);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Adds a new garbage collection to the dialog
+         * @param {type} container
+         * @param {type} garbageCollection
+         */
+        var addGarbageCollection = function (container, garbageCollection) {
+            var nameTr = $('<tr></tr>').appendTo(container);
+          $('<td class="setting-name"></td>').text(garbageCollection.name + ':').appendTo(nameTr);
+            var valTr = $('<tr></tr>').appendTo(container);
+          $('<td></td>').append($('<b></b>').text(garbageCollection.collectionCount + nf._.msg('nf-summary-table.times') + '(' + garbageCollection.collectionTime + ')')).appendTo(valTr);
+            $('<tr></tr>').text(' ').appendTo(container);
+        };
+    
         /**
-         * Initializes the status table.
+         * Adds a new storage usage process bar to the dialog.
          *
-         * @argument {boolean} isClustered Whether or not this NiFi is clustered.
+         * @argument {jQuery} container     The container to add the storage usage to.
+         * @argument {object} storageUsage     The storage usage.
          */
-        init: function (isClustered) {
-            return $.Deferred(function (deferred) {
-                // get the controller config to get the server offset
-                var configRequest = $.ajax({
-                    type: 'GET',
-                    url: config.urls.flowConfig,
-                    dataType: 'json'
-                }).done(function (configResponse) {
-                    var configDetails = configResponse.flowConfiguration;
-
-                    // initialize the chart
-                    nfStatusHistory.init(configDetails.timeOffset);
-
-                    // initialize the processor/connection details dialog
-                    nfProcessorDetails.init(false);
-                    nfConnectionDetails.init();
-                    initSummaryTable(isClustered);
-
-                    deferred.resolve();
-                }).fail(function () {
-                    deferred.reject();
-                });
-            }).promise();
-        },
-
+        var addStorageUsage = function (container, storageUsage) {
+            var total = parseInt(storageUsage.totalSpaceBytes, 10);
+            var used = parseInt(storageUsage.usedSpaceBytes, 10);
+            var storageUsageContainer = $('<div class="storage-usage"></div>').appendTo(container);
+    
+            var storage = $('<div class="storage-identifier setting-name"></div>');
+            storage.text('Usage:');
+          if (nfCommon.isDefinedAndNotNull(storageUsage.identifier)) {
+              storage.text(nf._.msg('nf-summary-table.UsageFor') + storageUsage.identifier + ':');
+            }
+            storage.appendTo(storageUsageContainer);
+    
+          (nfNgBridge.injector.get('$compile')($('<md-progress-linear class="md-hue-2" md-mode="determinate" value="' + (used / total) * 100 + '" aria-label="FlowFile Repository Storage Usage"></md-progress-linear>'))(nfNgBridge.rootScope)).appendTo(storageUsageContainer);
+    
+            var usageDetails = $('<div class="storage-usage-details"></div>').text(' (' + storageUsage.usedSpace + ' of ' + storageUsage.totalSpace + ')').prepend($('<b></b>').text(Math.round((used / total) * 100) + '%'));
+            $('<div class="storage-usage-header"></div>').append(usageDetails).append('<div class="clear"></div>').appendTo(storageUsageContainer);
+        };
+    
+        /**
+         * 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 $('#summary-filter').val();
+        };
+    
         /**
-         * Sets the cluster node id which will only show status from this node on subsequent reloads.
+         * Poplates the processor summary table using the specified process group.
          *
-         * @param nodeId
+         * @argument {array} processorItems                 The processor data
+         * @argument {array} connectionItems                The connection data
+         * @argument {array} processGroupItems              The process group data
+         * @argument {array} inputPortItems                 The input port data
+         * @argument {array} outputPortItems                The input port data
+         * @argument {array} remoteProcessGroupItems        The remote process group data
+         * @argument {object} aggregateSnapshot            The process group status
          */
-        setClusterNodeId: function (nodeId) {
-            clusterNodeId = nodeId;
-        },
-
+        var populateProcessGroupStatus = function (processorItems, connectionItems, processGroupItems, inputPortItems, outputPortItems, remoteProcessGroupItems, aggregateSnapshot) {
+            // add the processors to the summary grid
+            $.each(aggregateSnapshot.processorStatusSnapshots, function (i, procStatusEntity) {
+                processorItems.push(procStatusEntity.processorStatusSnapshot);
+            });
+    
+            // add the processors to the summary grid
+            $.each(aggregateSnapshot.connectionStatusSnapshots, function (i, connStatusEntity) {
+                connectionItems.push(connStatusEntity.connectionStatusSnapshot);
+            });
+    
+            // add the input ports to the summary grid
+            $.each(aggregateSnapshot.inputPortStatusSnapshots, function (i, portStatusEntity) {
+                inputPortItems.push(portStatusEntity.portStatusSnapshot);
+            });
+    
+            // add the input ports to the summary grid
+            $.each(aggregateSnapshot.outputPortStatusSnapshots, function (i, portStatusEntity) {
+                outputPortItems.push(portStatusEntity.portStatusSnapshot);
+            });
+    
+            // add the input ports to the summary grid
+            $.each(aggregateSnapshot.remoteProcessGroupStatusSnapshots, function (i, rpgStatusEntity) {
+                remoteProcessGroupItems.push(rpgStatusEntity.remoteProcessGroupStatusSnapshot);
+            });
+    
+            // add the process group status as well
+            processGroupItems.push(aggregateSnapshot);
+    
+            // add any child group's status
+            $.each(aggregateSnapshot.processGroupStatusSnapshots, function (i, childProcessGroupEntity) {
+                populateProcessGroupStatus(processorItems, connectionItems, processGroupItems, inputPortItems, outputPortItems, remoteProcessGroupItems, childProcessGroupEntity.processGroupStatusSnapshot);
+            });
+        };
+    
         /**
-         * Update the size of the grid based on its container's current size.
+         * Applies the filter found in the filter expression text field.
          */
-        resetTableSize: function () {
-            var processorsTable = $('#processor-summary-table');
-            if (processorsTable.is(':visible')) {
-                var processorsGrid = processorsTable.data('gridInstance');
-                if (nfCommon.isDefinedAndNotNull(processorsGrid)) {
-                    processorsGrid.resizeCanvas();
-                }
-            }
-
-            var connectionsTable = $('#connection-summary-table');
-            if (connectionsTable.is(':visible')) {
-                var connectionsGrid = connectionsTable.data('gridInstance');
-                if (nfCommon.isDefinedAndNotNull(connectionsGrid)) {
-                    connectionsGrid.resizeCanvas();
-                }
+        var applyFilter = function () {
+            var grid;
+            if ($('#processor-summary-table').is(':visible')) {
+                grid = $('#processor-summary-table').data('gridInstance');
+            } else if ($('#connection-summary-table').is(':visible')) {
+                grid = $('#connection-summary-table').data('gridInstance');
+            } else if ($('#input-port-summary-table').is(':visible')) {
+                grid = $('#input-port-summary-table').data('gridInstance');
+            } else if ($('#output-port-summary-table').is(':visible')) {
+                grid = $('#output-port-summary-table').data('gridInstance');
+            } else if ($('#process-group-summary-table').is(':visible')) {
+                grid = $('#process-group-summary-table').data('gridInstance');
+            } else if ($('#remote-process-group-summary-table').is(':visible')) {
+                grid = $('#remote-process-group-summary-table').data('gridInstance');
             }
-
-            var processGroupsTable = $('#process-group-summary-table');
-            if (processGroupsTable.is(':visible')) {
-                var processGroupsGrid = processGroupsTable.data('gridInstance');
-                if (nfCommon.isDefinedAndNotNull(processGroupsGrid)) {
-                    processGroupsGrid.resizeCanvas();
-                }
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(grid)) {
+                var data = grid.getData();
+    
+                // update the search criteria
+                data.setFilterArgs({
+                    searchString: getFilterText(),
+                    property: $('#summary-filter-type').combo('getSelectedOption').value
+                });
+                data.refresh();
             }
-
-            var inputPortsTable = $('#input-port-summary-table');
-            if (inputPortsTable.is(':visible')) {
-                var inputPortGrid = inputPortsTable.data('gridInstance');
-                if (nfCommon.isDefinedAndNotNull(inputPortGrid)) {
-                    inputPortGrid.resizeCanvas();
+        };
+    
+        /**
+         * Loads  the cluster processor details dialog for the specified processor.
+         *
+         * @argument {string} groupId         The group id
+         * @argument {string} processorId     The processor id
+         */
+        var loadClusterProcessorSummary = function (groupId, processorId) {
+            // get the summary
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/flow/processors/' + encodeURIComponent(processorId) + '/status',
+                data: {
+                    nodewise: true
+                },
+                dataType: 'json'
+            }).done(function (response) {
+              if (nfCommon.isDefinedAndNotNull(response.processorStatus)) {
+                    var processorStatus = response.processorStatus;
+    
+                    var clusterProcessorsGrid = $('#cluster-processor-summary-table').data('gridInstance');
+                    var clusterProcessorsData = clusterProcessorsGrid.getData();
+    
+                    var clusterProcessors = [];
+    
+                    // populate the table
+                    $.each(processorStatus.nodeSnapshots, function (i, nodeSnapshot) {
+                        var snapshot = nodeSnapshot.statusSnapshot;
+                        clusterProcessors.push({
+                            id: nodeSnapshot.nodeId,
+                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                            runStatus: snapshot.runStatus,
+                            activeThreadCount: snapshot.activeThreadCount,
+                            input: snapshot.input,
+                            read: snapshot.read,
+                            written: snapshot.written,
+                            output: snapshot.output,
+                            tasks: snapshot.tasks,
+                            tasksDuration: snapshot.tasksDuration
+                        });
+                    });
+    
+                    // update the processors
+                    clusterProcessorsData.setItems(clusterProcessors);
+                    clusterProcessorsData.reSort();
+                    clusterProcessorsGrid.invalidate();
+    
+                    // populate the processor details
+                    $('#cluster-processor-name').text(processorStatus.name).ellipsis();
+                  $('#cluster-processor-type').text(processorStatus.aggregateSnapshot.type).ellipsis();
+                    $('#cluster-processor-id').text(processorStatus.id);
+                    $('#cluster-processor-group-id').text(processorStatus.groupId);
+    
+                    // update the stats last refreshed timestamp
+                    $('#cluster-processor-summary-last-refreshed').text(processorStatus.statsLastRefreshed);
                 }
-            }
-
-            var outputPortsTable = $('#output-port-summary-table');
-            if (outputPortsTable.is(':visible')) {
-                var outputPortGrid = outputPortsTable.data('gridInstance');
-                if (nfCommon.isDefinedAndNotNull(outputPortGrid)) {
-                    outputPortGrid.resizeCanvas();
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Loads the cluster connection details dialog for the specified processor.
+         *
+         * @argument {string} groupId   The group id
+         * @argument {string} connectionId     The connection id
+         */
+        var loadClusterConnectionSummary = function (groupId, connectionId) {
+            // get the summary
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/flow/connections/' + encodeURIComponent(connectionId) + '/status',
+                data: {
+                    nodewise: true
+                },
+                dataType: 'json'
+            }).done(function (response) {
+              if (nfCommon.isDefinedAndNotNull(response.connectionStatus)) {
+                    var connectionStatus = response.connectionStatus;
+    
+                    var clusterConnectionsGrid = $('#cluster-connection-summary-table').data('gridInstance');
+                    var clusterConnectionsData = clusterConnectionsGrid.getData();
+    
+                    var clusterConnections = [];
+    
+                    // populate the table
+                    $.each(connectionStatus.nodeSnapshots, function (i, nodeSnapshot) {
+                        var snapshot = nodeSnapshot.statusSnapshot;
+                        clusterConnections.push({
+                            id: nodeSnapshot.nodeId,
+                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                            input: snapshot.input,
+                            queued: snapshot.queued,
+                            queuedCount: snapshot.queuedCount,
+                            queuedSize: snapshot.queuedSize,
+                          percentUseCount: snapshot.percentUseCount,
+                          percentUseBytes: snapshot.percentUseBytes,
+                            output: snapshot.output
+                        });
+                    });
+    
+                    // update the processors
+                    clusterConnectionsData.setItems(clusterConnections);
+                    clusterConnectionsData.reSort();
+                    clusterConnectionsGrid.invalidate();
+    
+                    // populate the processor details
+                    $('#cluster-connection-name').text(connectionStatus.name).ellipsis();
+                  $('#cluster-connection-type').text('Connection').ellipsis();
+                    $('#cluster-connection-id').text(connectionStatus.id);
+                    $('#cluster-connection-group-id').text(connectionStatus.groupId);
+    
+                    // update the stats last refreshed timestamp
+                    $('#cluster-connection-summary-last-refreshed').text(connectionStatus.statsLastRefreshed);
                 }
-            }
-
-            var remoteProcessGroupsTable = $('#remote-process-group-summary-table');
-            if (remoteProcessGroupsTable.is(':visible')) {
-                var remoteProcessGroupGrid = remoteProcessGroupsTable.data('gridInstance');
-                if (nfCommon.isDefinedAndNotNull(remoteProcessGroupGrid)) {
-                    remoteProcessGroupGrid.resizeCanvas();
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Loads the cluster input port details dialog for the specified processor.
+         *
+         * @argument {string} processGroupId     The process group id
+         */
+        var loadClusterProcessGroupSummary = function (processGroupId) {
+            // get the summary
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupId) + '/status',
+                data: {
+                    nodewise: true,
+                    recursive: false
+                },
+                dataType: 'json'
+            }).done(function (response) {
+              if (nfCommon.isDefinedAndNotNull(response.processGroupStatus)) {
+                    var processGroupStatus = response.processGroupStatus;
+    
+                    var clusterProcessGroupsGrid = $('#cluster-process-group-summary-table').data('gridInstance');
+                    var clusterProcessGroupsData = clusterProcessGroupsGrid.getData();
+    
+                    var clusterProcessGroups = [];
+    
+                    // populate the table
+                    $.each(processGroupStatus.nodeSnapshots, function (i, nodeSnapshot) {
+                        var snapshot = nodeSnapshot.statusSnapshot;
+                        clusterProcessGroups.push({
+                            id: nodeSnapshot.nodeId,
+                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                            activeThreadCount: snapshot.activeThreadCount,
+                            transferred: snapshot.transferred,
+                            input: snapshot.input,
+                            queued: snapshot.queued,
+                            queuedCount: snapshot.queuedCount,
+                            queuedSize: snapshot.queuedSize,
+                            output: snapshot.output,
+                            read: snapshot.read,
+                            written: snapshot.written,
+                            sent: snapshot.sent,
+                            received: snapshot.received
+                        });
+                    });
+    
+                    // update the input ports
+                    clusterProcessGroupsData.setItems(clusterProcessGroups);
+                    clusterProcessGroupsData.reSort();
+                    clusterProcessGroupsGrid.invalidate();
+    
+                    // populate the input port details
+                    $('#cluster-process-group-name').text(processGroupStatus.name).ellipsis();
+                  $('#cluster-process-group-type').text('Process Group').ellipsis();
+                    $('#cluster-process-group-id').text(processGroupStatus.id);
+    
+                    // update the stats last refreshed timestamp
+                    $('#cluster-process-group-summary-last-refreshed').text(processGroupStatus.statsLastRefreshed);
                 }
-            }
-        },
-
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
         /**
-         * Load the summary table.
+         * Loads the cluster input port details dialog for the specified processor.
+         *
+         * @argument {string} groupId         The group id
+         * @argument {string} inputPortId     The input port id
          */
-        loadSummaryTable: function () {
-            var statusUri = config.urls.status;
-
-            // add the parameter if appropriate
-            var parameters = {};
-            if (!nfCommon.isNull(clusterNodeId)) {
-                parameters['clusterNodeId'] = clusterNodeId;
-            }
-
-            // update the status uri if appropriate
-            if (!$.isEmptyObject(parameters)) {
-                statusUri += '?' + $.param(parameters);
-            }
-
-            return $.ajax({
+        var loadClusterInputPortSummary = function (groupId, inputPortId) {
+            // get the summary
+            $.ajax({
                 type: 'GET',
-                url: statusUri,
+                url: config.urls.api + '/flow/input-ports/' + encodeURIComponent(inputPortId) + '/status',
                 data: {
-                    recursive: true
+                    nodewise: true
                 },
                 dataType: 'json'
             }).done(function (response) {
-                var processGroupStatus = response.processGroupStatus;
-                var aggregateSnapshot = processGroupStatus.aggregateSnapshot;
-
-                if (nfCommon.isDefinedAndNotNull(aggregateSnapshot)) {
-                    // remove any tooltips from the processor table
-                    var processorsGridElement = $('#processor-summary-table');
-                    nfCommon.cleanUpTooltips(processorsGridElement, 'div.has-bulletins');
-
-                    // get the processor grid/data
-                    var processorsGrid = processorsGridElement.data('gridInstance');
-                    var processorsData = processorsGrid.getData();
-
-                    // get the connections grid/data (do not render bulletins)
-                    var connectionsGrid = $('#connection-summary-table').data('gridInstance');
-                    var connectionsData = connectionsGrid.getData();
-
-                    // remove any tooltips from the process group table
-                    var processGroupGridElement = $('#process-group-summary-table');
-                    nfCommon.cleanUpTooltips(processGroupGridElement, 'div.has-bulletins');
-
-                    // get the process group grid/data
-                    var processGroupGrid = processGroupGridElement.data('gridInstance');
-                    var processGroupData = processGroupGrid.getData();
-
-                    // remove any tooltips from the input port table
-                    var inputPortsGridElement = $('#input-port-summary-table');
-                    nfCommon.cleanUpTooltips(inputPortsGridElement, 'div.has-bulletins');
-
-                    // get the input ports grid/data
-                    var inputPortsGrid = inputPortsGridElement.data('gridInstance');
-                    var inputPortsData = inputPortsGrid.getData();
-
-                    // remove any tooltips from the output port table
-                    var outputPortsGridElement = $('#output-port-summary-table');
-                    nfCommon.cleanUpTooltips(outputPortsGridElement, 'div.has-bulletins');
-
-                    // get the output ports grid/data
-                    var outputPortsGrid = outputPortsGridElement.data('gridInstance');
-                    var outputPortsData = outputPortsGrid.getData();
-
-                    // remove any tooltips from the remote process group table
-                    var remoteProcessGroupsGridElement = $('#remote-process-group-summary-table');
-                    nfCommon.cleanUpTooltips(remoteProcessGroupsGridElement, 'div.has-bulletins');
-
-                    // get the remote process groups grid
-                    var remoteProcessGroupsGrid = remoteProcessGroupsGridElement.data('gridInstance');
-                    var remoteProcessGroupsData = remoteProcessGroupsGrid.getData();
-
-                    var processorItems = [];
-                    var connectionItems = [];
-                    var processGroupItems = [];
-                    var inputPortItems = [];
-                    var outputPortItems = [];
-                    var remoteProcessGroupItems = [];
-
-                    // populate the tables
-                    populateProcessGroupStatus(processorItems, connectionItems, processGroupItems, inputPortItems, outputPortItems, remoteProcessGroupItems, aggregateSnapshot);
-
-                    // update the processors
-                    processorsData.setItems(processorItems);
-                    processorsData.reSort();
-                    processorsGrid.invalidate();
-
-                    // update the connections
-                    connectionsData.setItems(connectionItems);
-                    connectionsData.reSort();
-                    connectionsGrid.invalidate();
-
-                    // update the process groups
-                    processGroupData.setItems(processGroupItems);
-                    processGroupData.reSort();
-                    processGroupGrid.invalidate();
-
+              if (nfCommon.isDefinedAndNotNull(response.portStatus)) {
+                    var inputPortStatus = response.portStatus;
+    
+                    var clusterInputPortsGrid = $('#cluster-input-port-summary-table').data('gridInstance');
+                    var clusterInputPortsData = clusterInputPortsGrid.getData();
+    
+                    var clusterInputPorts = [];
+    
+                    // populate the table
+                    $.each(inputPortStatus.nodeSnapshots, function (i, nodeSnapshot) {
+                        var snapshot = nodeSnapshot.statusSnapshot;
+                        clusterInputPorts.push({
+                            id: nodeSnapshot.nodeId,
+                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                            runStatus: snapshot.runStatus,
+                            activeThreadCount: snapshot.activeThreadCount,
+                            output: snapshot.output
+                        });
+                    });
+    
                     // update the input ports
-                    inputPortsData.setItems(inputPortItems);
-                    inputPortsData.reSort();
-                    inputPortsGrid.invalidate();
-
+                    clusterInputPortsData.setItems(clusterInputPorts);
+                    clusterInputPortsData.reSort();
+                    clusterInputPortsGrid.invalidate();
+    
+                    // populate the input port details
+                    $('#cluster-input-port-name').text(inputPortStatus.name).ellipsis();
+                  $('#cluster-input-port-type').text('Input Port').ellipsis();
+                    $('#cluster-input-port-id').text(inputPortStatus.id);
+                    $('#cluster-input-port-group-id').text(inputPortStatus.groupId);
+    
+                    // update the stats last refreshed timestamp
+                    $('#cluster-input-port-summary-last-refreshed').text(inputPortStatus.statsLastRefreshed);
+                }
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Loads the cluster output port details dialog for the specified processor.
+         *
+         * @argument {string} groupId          The group id
+         * @argument {string} outputPortId     The row id
+         */
+        var loadClusterOutputPortSummary = function (groupId, outputPortId) {
+            // get the summary
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/flow/output-ports/' + encodeURIComponent(outputPortId) + '/status',
+                data: {
+                    nodewise: true
+                },
+                dataType: 'json'
+            }).done(function (response) {
+              if (nfCommon.isDefinedAndNotNull(response.portStatus)) {
+                    var outputPortStatus = response.portStatus;
+    
+                    var clusterOutputPortsGrid = $('#cluster-output-port-summary-table').data('gridInstance');
+                    var clusterOutputPortsData = clusterOutputPortsGrid.getData();
+    
+                    var clusterOutputPorts = [];
+    
+                    // populate the table
+                    $.each(outputPortStatus.nodeSnapshots, function (i, nodeSnapshot) {
+                        var snapshot = nodeSnapshot.statusSnapshot;
+                        clusterOutputPorts.push({
+                            id: nodeSnapshot.nodeId,
+                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                            runStatus: snapshot.runStatus,
+                            activeThreadCount: snapshot.activeThreadCount,
+                            input: snapshot.input
+                        });
+                    });
+    
                     // update the output ports
-                    outputPortsData.setItems(outputPortItems);
-                    outputPortsData.reSort();
-                    outputPortsGrid.invalidate();
-
+                    clusterOutputPortsData.setItems(clusterOutputPorts);
+                    clusterOutputPortsData.reSort();
+                    clusterOutputPortsGrid.invalidate();
+    
+                    // populate the output port details
+                    $('#cluster-output-port-name').text(outputPortStatus.name).ellipsis();
+                  $('#cluster-output-port-type').text('Output Port').ellipsis();
+                    $('#cluster-output-port-id').text(outputPortStatus.id);
+                    $('#cluster-output-port-group-id').text(outputPortStatus.groupId);
+    
+                    // update the stats last refreshed timestamp
+                    $('#cluster-output-port-summary-last-refreshed').text(outputPortStatus.statsLastRefreshed);
+                }
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Loads the cluster remote process group details dialog for the specified processor.
+         *
+         * @argument {string} groupId   The group id
+         * @argument {string} remoteProcessGroupId     The remote process group id
+         */
+        var loadClusterRemoteProcessGroupSummary = function (groupId, remoteProcessGroupId) {
+            // get the summary
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/flow/remote-process-groups/' + encodeURIComponent(remoteProcessGroupId) + '/status',
+                data: {
+                    nodewise: true
+                },
+                dataType: 'json'
+            }).done(function (response) {
+              if (nfCommon.isDefinedAndNotNull(response.remoteProcessGroupStatus)) {
+                    var remoteProcessGroupStatus = response.remoteProcessGroupStatus;
+    
+                    var clusterRemoteProcessGroupsGrid = $('#cluster-remote-process-group-summary-table').data('gridInstance');
+                    var clusterRemoteProcessGroupsData = clusterRemoteProcessGroupsGrid.getData();
+    
+                    var clusterRemoteProcessGroups = [];
+    
+                    // populate the table
+                    $.each(remoteProcessGroupStatus.nodeSnapshots, function (i, nodeSnapshot) {
+                        var snapshot = nodeSnapshot.statusSnapshot;
+                        clusterRemoteProcessGroups.push({
+                            id: nodeSnapshot.nodeId,
+                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                            targetUri: snapshot.targetUri,
+                            transmissionStatus: snapshot.transmissionStatus,
+                            sent: snapshot.sent,
+                            received: snapshot.received,
+                            activeThreadCount: snapshot.activeThreadCount
+                        });
+                    });
+    
                     // update the remote process groups
-                    remoteProcessGroupsData.setItems(remoteProcessGroupItems);
-                    remoteProcessGroupsData.reSort();
-                    remoteProcessGroupsGrid.invalidate();
-
+                    clusterRemoteProcessGroupsData.setItems(clusterRemoteProcessGroups);
+                    clusterRemoteProcessGroupsData.reSort();
+                    clusterRemoteProcessGroupsGrid.invalidate();
+    
+                    // populate the remote process group details
+                    $('#cluster-remote-process-group-name').text(remoteProcessGroupStatus.name).ellipsis();
+                  $('#cluster-remote-process-group-type').text('Remote Process Group').ellipsis();
+                    $('#cluster-remote-process-group-id').text(remoteProcessGroupStatus.id);
+                    $('#cluster-remote-process-group-group-id').text(remoteProcessGroupStatus.groupId);
+    
                     // update the stats last refreshed timestamp
-                    $('#summary-last-refreshed').text(processGroupStatus.statsLastRefreshed);
-
-                    // update the total number of processors
-                    if ($('#processor-summary-table').is(':visible')) {
-                        $('#total-items').text(nfCommon.formatInteger(processorItems.length));
-                    } else if ($('#connection-summary-table').is(':visible')) {
-                        $('#total-items').text(nfCommon.formatInteger(connectionItems.length));
-                    } else if ($('#input-port-summary-table').is(':visible')) {
-                        $('#total-items').text(nfCommon.formatInteger(inputPortItems.length));
-                    } else if ($('#output-port-summary-table').is(':visible')) {
-                        $('#total-items').text(nfCommon.formatInteger(outputPortItems.length));
-                    } else if ($('#process-group-summary-table').is(':visible')) {
-                        $('#total-items').text(nfCommon.formatInteger(processGroupItems.length));
-                    } else {
-                        $('#total-items').text(nfCommon.formatInteger(remoteProcessGroupItems.length));
+                    $('#cluster-remote-process-group-summary-last-refreshed').text(remoteProcessGroupStatus.statsLastRefreshed);
+                }
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        var clusterNodeId = null;
+    
+        return {
+    
+            /**
+             * Initializes the status table.
+             *
+             * @argument {boolean} isClustered Whether or not this NiFi is clustered.
+             */
+            init: function (isClustered) {
+                return $.Deferred(function (deferred) {
+                    // get the controller config to get the server offset
+                    var configRequest = $.ajax({
+                        type: 'GET',
+                        url: config.urls.flowConfig,
+                        dataType: 'json'
+                    }).done(function (configResponse) {
+                        var configDetails = configResponse.flowConfiguration;
+    
+                        // initialize the chart
+                      nfStatusHistory.init(configDetails.timeOffset);
+    
+                        // initialize the processor/connection details dialog
+                      nfProcessorDetails.init(false);
+                      nfConnectionDetails.init();
+                        initSummaryTable(isClustered);
+    
+                        deferred.resolve();
+                    }).fail(function () {
+                        deferred.reject();
+                    });
+                }).promise();
+            },
+    
+            /**
+             * Sets the cluster node id which will only show status from this node on subsequent reloads.
+             *
+             * @param nodeId
+             */
+            setClusterNodeId: function (nodeId) {
+                clusterNodeId = nodeId;
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+                var processorsTable = $('#processor-summary-table');
+                if (processorsTable.is(':visible')) {
+                    var processorsGrid = processorsTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(processorsGrid)) {
+                        processorsGrid.resizeCanvas();
+                    }
+                }
+    
+                var connectionsTable = $('#connection-summary-table');
+                if (connectionsTable.is(':visible')) {
+                    var connectionsGrid = connectionsTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(connectionsGrid)) {
+                        connectionsGrid.resizeCanvas();
+                    }
+                }
+    
+                var processGroupsTable = $('#process-group-summary-table');
+                if (processGroupsTable.is(':visible')) {
+                    var processGroupsGrid = processGroupsTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(processGroupsGrid)) {
+                        processGroupsGrid.resizeCanvas();
+                    }
+                }
+    
+                var inputPortsTable = $('#input-port-summary-table');
+                if (inputPortsTable.is(':visible')) {
+                    var inputPortGrid = inputPortsTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(inputPortGrid)) {
+                        inputPortGrid.resizeCanvas();
+                    }
+                }
+    
+                var outputPortsTable = $('#output-port-summary-table');
+                if (outputPortsTable.is(':visible')) {
+                    var outputPortGrid = outputPortsTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(outputPortGrid)) {
+                        outputPortGrid.resizeCanvas();
+                    }
+                }
+    
+                var remoteProcessGroupsTable = $('#remote-process-group-summary-table');
+                if (remoteProcessGroupsTable.is(':visible')) {
+                    var remoteProcessGroupGrid = remoteProcessGroupsTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(remoteProcessGroupGrid)) {
+                        remoteProcessGroupGrid.resizeCanvas();
                     }
-                } else {
-                    $('#total-items').text('0');
                 }
-            }).fail(nfErrorHandler.handleAjaxError);
-        }
-    };
-}));
\ No newline at end of file
+            },
+    
+            /**
+             * Load the summary table.
+             */
+            loadSummaryTable: function () {
+                var statusUri = config.urls.status;
+    
+                // add the parameter if appropriate
+                var parameters = {};
+              if (!nfCommon.isNull(clusterNodeId)) {
+                    parameters['clusterNodeId'] = clusterNodeId;
+                }
+    
+                // update the status uri if appropriate
+                if (!$.isEmptyObject(parameters)) {
+                    statusUri += '?' + $.param(parameters);
+                }
+    
+                return $.ajax({
+                    type: 'GET',
+                    url: statusUri,
+                    data: {
+                        recursive: true
+                    },
+                    dataType: 'json'
+                }).done(function (response) {
+                    var processGroupStatus = response.processGroupStatus;
+                    var aggregateSnapshot = processGroupStatus.aggregateSnapshot;
+    
+                  if (nfCommon.isDefinedAndNotNull(aggregateSnapshot)) {
+                        // remove any tooltips from the processor table
+                        var processorsGridElement = $('#processor-summary-table');
+                      nfCommon.cleanUpTooltips(processorsGridElement, 'div.has-bulletins');
+    
+                        // get the processor grid/data
+                        var processorsGrid = processorsGridElement.data('gridInstance');
+                        var processorsData = processorsGrid.getData();
+    
+                        // get the connections grid/data (do not render bulletins)
+                        var connectionsGrid = $('#connection-summary-table').data('gridInstance');
+                        var connectionsData = connectionsGrid.getData();
+    
+                        // remove any tooltips from the process group table
+                        var processGroupGridElement = $('#process-group-summary-table');
+                      nfCommon.cleanUpTooltips(processGroupGridElement, 'div.has-bulletins');
+    
+                        // get the process group grid/data
+                        var processGroupGrid = processGroupGridElement.data('gridInstance');
+                        var processGroupData = processGroupGrid.getData();
+    
+                        // remove any tooltips from the input port table
+                        var inputPortsGridElement = $('#input-port-summary-table');
+                      nfCommon.cleanUpTooltips(inputPortsGridElement, 'div.has-bulletins');
+    
+                        // get the input ports grid/data
+                        var inputPortsGrid = inputPortsGridElement.data('gridInstance');
+                        var inputPortsData = inputPortsGrid.getData();
+    
+                        // remove any tooltips from the output port table
+                        var outputPortsGridElement = $('#output-port-summary-table');
+                      nfCommon.cleanUpTooltips(outputPortsGridElement, 'div.has-bulletins');
+    
+                        // get the output ports grid/data
+                        var outputPortsGrid = outputPortsGridElement.data('gridInstance');
+                        var outputPortsData = outputPortsGrid.getData();
+    
+                        // remove any tooltips from the remote process group table
+                        var remoteProcessGroupsGridElement = $('#remote-process-group-summary-table');
+                      nfCommon.cleanUpTooltips(remoteProcessGroupsGridElement, 'div.has-bulletins');
+    
+                        // get the remote process groups grid
+                        var remoteProcessGroupsGrid = remoteProcessGroupsGridElement.data('gridInstance');
+                        var remoteProcessGroupsData = remoteProcessGroupsGrid.getData();
+    
+                        var processorItems = [];
+                        var connectionItems = [];
+                        var processGroupItems = [];
+                        var inputPortItems = [];
+                        var outputPortItems = [];
+                        var remoteProcessGroupItems = [];
+    
+                        // populate the tables
+                        populateProcessGroupStatus(processorItems, connectionItems, processGroupItems, inputPortItems, outputPortItems, remoteProcessGroupItems, aggregateSnapshot);
+    
+                        // update the processors
+                        processorsData.setItems(processorItems);
+                        processorsData.reSort();
+                        processorsGrid.invalidate();
+    
+                        // update the connections
+                        connectionsData.setItems(connectionItems);
+                        connectionsData.reSort();
+                        connectionsGrid.invalidate();
+    
+                        // update the process groups
+                        processGroupData.setItems(processGroupItems);
+                        processGroupData.reSort();
+                        processGroupGrid.invalidate();
+    
+                        // update the input ports
+                        inputPortsData.setItems(inputPortItems);
+                        inputPortsData.reSort();
+                        inputPortsGrid.invalidate();
+    
+                        // update the output ports
+                        outputPortsData.setItems(outputPortItems);
+                        outputPortsData.reSort();
+                        outputPortsGrid.invalidate();
+    
+                        // update the remote process groups
+                        remoteProcessGroupsData.setItems(remoteProcessGroupItems);
+                        remoteProcessGroupsData.reSort();
+                        remoteProcessGroupsGrid.invalidate();
+    
+                        // update the stats last refreshed timestamp
+                        $('#summary-last-refreshed').text(processGroupStatus.statsLastRefreshed);
+    
+                        // update the total number of processors
+                        if ($('#processor-summary-table').is(':visible')) {
+                          $('#total-items').text(nfCommon.formatInteger(processorItems.length));
+                        } else if ($('#connection-summary-table').is(':visible')) {
+                          $('#total-items').text(nfCommon.formatInteger(connectionItems.length));
+                        } else if ($('#input-port-summary-table').is(':visible')) {
+                          $('#total-items').text(nfCommon.formatInteger(inputPortItems.length));
+                        } else if ($('#output-port-summary-table').is(':visible')) {
+                          $('#total-items').text(nfCommon.formatInteger(outputPortItems.length));
+                      } else if ($('#process-group-summary-table').is(':visible')) {
+                          $('#total-items').text(nfCommon.formatInteger(processGroupItems.length));
+                        } else {
+                          $('#total-items').text(nfCommon.formatInteger(remoteProcessGroupItems.length));
+                        }
+                    } else {
+                        $('#total-items').text('0');
+                    }
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+  }));
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 8c5e4debfd55..0f930cd17b33 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
@@ -1,465 +1,465 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'Slick',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.ErrorHandler'],
-            function ($, Slick, nfCommon, nfDialog, nfErrorHandler) {
-                return (nf.TemplatesTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler));
-            });
-    } 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, nfCommon, nfDialog, nfErrorHandler) {
-    'use strict';
-
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        urls: {
-            templates: '../nifi-api/flow/templates',
-            downloadToken: '../nifi-api/access/download-token'
-        }
-    };
-
-    /**
-     * Sorts the specified data using the specified sort details.
+    /*
+     * 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
      *
-     * @param {object} sortDetails
-     * @param {object} data
+     * 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.
      */
-    var sort = function (sortDetails, data) {
-        // defines a function for sorting
-        var comparer = function (a, b) {
-            if (a.permissions.canRead && b.permissions.canRead) {
-                if (sortDetails.columnId === 'timestamp') {
-                    var aDate = nfCommon.parseDateTime(a.template[sortDetails.columnId]);
-                    var bDate = nfCommon.parseDateTime(b.template[sortDetails.columnId]);
-                    return aDate.getTime() - bDate.getTime();
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.ErrorHandler'],
+              function ($, Slick, nfCommon, nfDialog, nfErrorHandler) {
+                  return (nf.TemplatesTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler));
+              });
+      } 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, nfCommon, nfDialog, nfErrorHandler) {
+      'use strict';
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                templates: '../nifi-api/flow/templates',
+                downloadToken: '../nifi-api/access/download-token'
+            }
+        };
+    
+        /**
+         * 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 (sortDetails.columnId === 'timestamp') {
+                      var aDate = nfCommon.parseDateTime(a.template[sortDetails.columnId]);
+                      var bDate = nfCommon.parseDateTime(b.template[sortDetails.columnId]);
+                        return aDate.getTime() - bDate.getTime();
+                    } else {
+                      var aString = nfCommon.isDefinedAndNotNull(a.template[sortDetails.columnId]) ? a.template[sortDetails.columnId] : '';
+                      var bString = nfCommon.isDefinedAndNotNull(b.template[sortDetails.columnId]) ? b.template[sortDetails.columnId] : '';
+                        return aString === bString ? 0 : aString > bString ? 1 : -1;
+                    }
                 } else {
-                    var aString = nfCommon.isDefinedAndNotNull(a.template[sortDetails.columnId]) ? a.template[sortDetails.columnId] : '';
-                    var bString = nfCommon.isDefinedAndNotNull(b.template[sortDetails.columnId]) ? b.template[sortDetails.columnId] : '';
-                    return aString === bString ? 0 : aString > bString ? 1 : -1;
+                    if (!a.permissions.canRead && !b.permissions.canRead) {
+                        return 0;
+                    }
+                    if (a.permissions.canRead) {
+                        return 1;
+                    } else {
+                        return -1;
+                    }
                 }
-            } else {
-                if (!a.permissions.canRead && !b.permissions.canRead) {
-                    return 0;
+            };
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+        };
+    
+        /**
+         * Prompts the user before attempting to delete the specified template.
+         *
+         * @argument {object} templateEntity     The template
+         */
+        var promptToDeleteTemplate = function (templateEntity) {
+            // prompt for deletion
+          nfDialog.showYesNoDialog({
+              headerText: nf._.msg('nf-templates-table.DeleteTemplate'),
+              dialogContent: nf._.msg('nf-templates-table.Message1') + nfCommon.escapeHtml(templateEntity.template.name) + '\'?',
+                yesHandler: function () {
+                    deleteTemplate(templateEntity);
                 }
-                if (a.permissions.canRead) {
-                    return 1;
-                } else {
-                    return -1;
+            });
+        };
+    
+        /**
+         * 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 (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.PolicyManagement) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
+                    parent.nf.PolicyManagement.showTemplatePolicy(templateEntity);
+                    parent.$('#shell-close-button').click();
                 }
             }
         };
-
-        // perform the sort
-        data.sort(comparer, sortDetails.sortAsc);
-    };
-
-    /**
-     * Prompts the user before attempting to delete the specified template.
-     *
-     * @argument {object} templateEntity     The template
-     */
-    var promptToDeleteTemplate = function (templateEntity) {
-        // prompt for deletion
-        nfDialog.showYesNoDialog({
-            headerText: 'Delete Template',
-            dialogContent: 'Delete template \'' + nfCommon.escapeHtml(templateEntity.template.name) + '\'?',
-            yesHandler: function () {
-                deleteTemplate(templateEntity);
-            }
-        });
-    };
-
-    /**
-     * 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 (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.PolicyManagement) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
-                parent.nf.PolicyManagement.showTemplatePolicy(templateEntity);
-                parent.$('#shell-close-button').click();
-            }
-        }
-    };
-
-    /**
-     * Deletes the template with the specified id.
-     *
-     * @argument {string} templateEntity     The template
-     */
-    var deleteTemplate = function (templateEntity) {
-        $.ajax({
-            type: 'DELETE',
-            url: templateEntity.template.uri,
-            dataType: 'json'
-        }).done(function () {
+    
+        /**
+         * Deletes the template with the specified id.
+         *
+         * @argument {string} templateEntity     The template
+         */
+        var deleteTemplate = function (templateEntity) {
+            $.ajax({
+                type: 'DELETE',
+                url: templateEntity.template.uri,
+                dataType: 'json'
+            }).done(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(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * 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 $('#templates-filter').val();
+        };
+    
+        /**
+         * Applies the filter found in the filter expression text field.
+         */
+        var applyFilter = function () {
+            // get the dataview
             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(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * 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 $('#templates-filter').val();
-    };
-
-    /**
-     * Applies the filter found in the filter expression text field.
-     */
-    var applyFilter = function () {
-        // get the dataview
-        var templatesGrid = $('#templates-table').data('gridInstance');
-
-        // ensure the grid has been initialized
-        if (nfCommon.isDefinedAndNotNull(templatesGrid)) {
-            var templatesData = templatesGrid.getData();
-
-            // update the search criteria
-            templatesData.setFilterArgs({
-                searchString: getFilterText(),
-                property: $('#templates-filter-type').combo('getSelectedOption').value
-            });
-            templatesData.refresh();
-        }
-    };
-
-    /**
-     * Performs the filtering.
-     *
-     * @param {object} item     The item subject to filtering
-     * @param {object} args     Filter arguments
-     * @returns {Boolean}       Whether or not to include the item
-     */
-    var filter = function (item, args) {
-        if (args.searchString === '') {
-            return true;
-        }
-
-        try {
-            // perform the row filtering
-            var filterExp = new RegExp(args.searchString, 'i');
-        } catch (e) {
-            // invalid regex
-            return false;
-        }
-
-        // perform the filter
-        return item.template[args.property].search(filterExp) >= 0;
-    };
-
-    /**
-     * Downloads the specified template.
-     *
-     * @param {object} templateEntity     The template
-     */
-    var downloadTemplate = function (templateEntity) {
-        nfCommon.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
-            var parameters = {};
-
-            // conditionally include the download token
-            if (!nfCommon.isBlank(downloadToken)) {
-                parameters['access_token'] = downloadToken;
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(templatesGrid)) {
+                var templatesData = templatesGrid.getData();
+    
+                // update the search criteria
+                templatesData.setFilterArgs({
+                    searchString: getFilterText(),
+                    property: $('#templates-filter-type').combo('getSelectedOption').value
+                });
+                templatesData.refresh();
             }
-
-            // open the url
-            if ($.isEmptyObject(parameters)) {
-                window.open(templateEntity.template.uri + '/download');
-            } else {
-                window.open(templateEntity.template.uri + '/download' + '?' + $.param(parameters));
+        };
+    
+        /**
+         * Performs the filtering.
+         *
+         * @param {object} item     The item subject to filtering
+         * @param {object} args     Filter arguments
+         * @returns {Boolean}       Whether or not to include the item
+         */
+        var filter = function (item, args) {
+            if (args.searchString === '') {
+                return true;
             }
-        }).fail(function () {
-            nfDialog.showOkDialog({
-                headerText: 'Download Template',
-                dialogContent: 'Unable to generate access token for downloading content.'
-            });
-        });
-    };
-
-    return {
+    
+            try {
+                // perform the row filtering
+                var filterExp = new RegExp(args.searchString, 'i');
+            } catch (e) {
+                // invalid regex
+                return false;
+            }
+    
+            // perform the filter
+            return item.template[args.property].search(filterExp) >= 0;
+        };
+    
         /**
-         * Initializes the templates list.
+         * Downloads the specified template.
+         *
+         * @param {object} templateEntity     The template
          */
-        init: function () {
-            // define the function for filtering the list
-            $('#templates-filter').keyup(function () {
-                applyFilter();
-            });
-
-            // filter type
-            $('#templates-filter-type').combo({
-                options: [{
-                    text: 'by name',
-                    value: 'name'
-                }, {
-                    text: 'by description',
-                    value: 'description'
-                }],
-                select: function (option) {
-                    applyFilter();
-                }
-            });
-
-            var timestampFormatter = function (row, cell, value, columnDef, dataContext) {
-                if (!dataContext.permissions.canRead) {
-                    return '';
-                }
-
-                return dataContext.template.timestamp;
-            };
-
-            var nameFormatter = function (row, cell, value, columnDef, dataContext) {
-                if (!dataContext.permissions.canRead) {
-                    return '<span class="blank">' + dataContext.id + '</span>';
-                }
-
-                return dataContext.template.name;
-            };
-
-            var descriptionFormatter = function (row, cell, value, columnDef, dataContext) {
-                if (!dataContext.permissions.canRead) {
-                    return '';
+        var downloadTemplate = function (templateEntity) {
+          nfCommon.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
+                var parameters = {};
+    
+                // conditionally include the download token
+              if (!nfCommon.isBlank(downloadToken)) {
+                    parameters['access_token'] = downloadToken;
                 }
-
-                return nfCommon.formatValue(dataContext.template.description);
-            };
-
-            var groupIdFormatter = function (row, cell, value, columnDef, dataContext) {
-                if (!dataContext.permissions.canRead) {
-                    return '';
-                }
-
-                return dataContext.template.groupId;
-            };
-
-            // function for formatting the actions column
-            var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-
-                if (dataContext.permissions.canRead === true) {
-                    markup += '<div title="Download" class="pointer export-template icon icon-template-save" style="margin-top: 2px; margin-right: 3px;"></div>';
-                }
-
-                // all DFMs to remove templates
-                if (dataContext.permissions.canWrite === true) {
-                    markup += '<div title="Remove Template" class="pointer prompt-to-delete-template fa fa-trash" style="margin-top: 2px; margin-right: 3px;"></div>';
-                }
-
-                // allow policy configuration conditionally if embedded in
-                if (top !== window && nfCommon.canAccessTenants()) {
-                    if (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && parent.nf.CanvasUtils.isConfigurableAuthorizer()) {
-                        markup += '<div title="Access Policies" class="pointer edit-access-policies fa fa-key" style="margin-top: 2px;"></div>';
-                    }
-                }
-
-                return markup;
-            };
-
-            // 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: '&nbsp;',
-                    sortable: false,
-                    resizable: false,
-                    formatter: actionFormatter,
-                    width: 100,
-                    maxWidth: 100
+    
+                // open the url
+                if ($.isEmptyObject(parameters)) {
+                    window.open(templateEntity.template.uri + '/download');
+                } else {
+                    window.open(templateEntity.template.uri + '/download' + '?' + $.param(parameters));
                 }
-            ];
-
-            var templatesOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: false,
-                enableColumnReorder: false,
-                autoEdit: false,
-                rowHeight: 24
-            };
-
-            // initialize the dataview
-            var templatesData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            templatesData.setItems([]);
-            templatesData.setFilterArgs({
-                searchString: getFilterText(),
-                property: $('#templates-filter-type').combo('getSelectedOption').value
+            }).fail(function () {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-templates-table.DownloadTemplate'),
+                  dialogContent: nf._.msg('nf-templates-table.Message2')
+                });
             });
-            templatesData.setFilter(filter);
-
-            // initialize the sort
-            sort({
-                columnId: 'timestamp',
-                sortAsc: false
-            }, templatesData);
-
-            // initialize the grid
-            var templatesGrid = new Slick.Grid('#templates-table', templatesData, templatesColumns, templatesOptions);
-            templatesGrid.setSelectionModel(new Slick.RowSelectionModel());
-            templatesGrid.registerPlugin(new Slick.AutoTooltips());
-            templatesGrid.setSortColumn('timestamp', false);
-            templatesGrid.onSort.subscribe(function (e, args) {
+        };
+    
+        return {
+            /**
+             * Initializes the templates list.
+             */
+            init: function () {
+                // define the function for filtering the list
+                $('#templates-filter').keyup(function () {
+                    applyFilter();
+                });
+    
+                // filter type
+                $('#templates-filter-type').combo({
+                    options: [{
+                      text: nf._.msg('nf-templates-table.ByName'),
+                        value: 'name'
+                    }, {
+                      text: nf._.msg('nf-templates-table.ByDescription'),
+                        value: 'description'
+                    }],
+                    select: function (option) {
+                        applyFilter();
+                    }
+                });
+    
+                var timestampFormatter = function (row, cell, value, columnDef, dataContext) {
+                    if (!dataContext.permissions.canRead) {
+                        return '';
+                    }
+    
+                    return dataContext.template.timestamp;
+                };
+    
+                var nameFormatter = function (row, cell, value, columnDef, dataContext) {
+                    if (!dataContext.permissions.canRead) {
+                        return '<span class="blank">' + dataContext.id + '</span>';
+                    }
+    
+                    return dataContext.template.name;
+                };
+    
+                var descriptionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    if (!dataContext.permissions.canRead) {
+                        return '';
+                    }
+    
+                  return nfCommon.formatValue(dataContext.template.description);
+                };
+    
+                var groupIdFormatter = function (row, cell, value, columnDef, dataContext) {
+                    if (!dataContext.permissions.canRead) {
+                        return '';
+                    }
+    
+                    return dataContext.template.groupId;
+                };
+    
+                // function for formatting the actions column
+                var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (dataContext.permissions.canRead === true) {
+                      markup += '<div title="'+nf._.msg('nf-summary-table.Download')+'" class="pointer export-template icon icon-template-save" style="margin-top: 2px; margin-right: 3px;"></div>';
+                    }
+    
+                    // all DFMs to remove templates
+                    if (dataContext.permissions.canWrite === true) {
+                      markup += '<div title="'+nf._.msg('nf-summary-table.RemovieTemplate')+'" class="pointer prompt-to-delete-template fa fa-trash" style="margin-top: 2px; margin-right: 3px;"></div>';
+                    }
+    
+                  // allow policy configuration conditionally if embedded in
+                  if (top !== window && nfCommon.canAccessTenants()) {
+                      if (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && parent.nf.CanvasUtils.isConfigurableAuthorizer()) {
+                          markup += '<div title="'+nf._.msg('nf-summary-table.AccessPolicies')+'" class="pointer edit-access-policies fa fa-key" style="margin-top: 2px;"></div>';
+                        }
+                    }
+    
+                    return markup;
+                };
+    
+                // initialize the templates table
+                var templatesColumns = [
+                  {
+                      id: 'timestamp',
+                      name: nf._.msg('nf-templates-table.DateTime'),
+                      sortable: true,
+                      defaultSortAsc: false,
+                      resizable: false,
+                      formatter: timestampFormatter,
+                      width: 225,
+                      maxWidth: 225
+                  },
+                  {
+                      id: 'name',
+                      name: nf._.msg('nf-templates-table.Name'),
+                      sortable: true,
+                      resizable: true,
+                      formatter: nameFormatter
+                  },
+                  {
+                      id: 'description',
+                      name: nf._.msg('nf-templates-table.Description'),
+                      sortable: true,
+                      resizable: true,
+                      formatter: descriptionFormatter
+                  },
+                  {
+                      id: 'groupId',
+                      name: nf._.msg('nf-templates-table.GroupId'),
+                      sortable: true,
+                      resizable: true,
+                      formatter: groupIdFormatter
+                  },
+                  {
+                      id: 'actions',
+                      name: '&nbsp;',
+                      sortable: false,
+                      resizable: false,
+                      formatter: actionFormatter,
+                      width: 100,
+                      maxWidth: 100
+                  }
+                ];
+    
+                var templatesOptions = {
+                    forceFitColumns: true,
+                    enableTextSelectionOnCells: true,
+                    enableCellNavigation: false,
+                    enableColumnReorder: false,
+                    autoEdit: false,
+                    rowHeight: 24
+                };
+    
+                // initialize the dataview
+                var templatesData = new Slick.Data.DataView({
+                    inlineFilters: false
+                });
+                templatesData.setItems([]);
+                templatesData.setFilterArgs({
+                    searchString: getFilterText(),
+                    property: $('#templates-filter-type').combo('getSelectedOption').value
+                });
+                templatesData.setFilter(filter);
+    
+                // initialize the sort
                 sort({
-                    columnId: args.sortCol.id,
-                    sortAsc: args.sortAsc
+                    columnId: 'timestamp',
+                    sortAsc: false
                 }, templatesData);
-            });
-
-            // configure a click listener
-            templatesGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-
-                // get the node at this row
-                var item = templatesData.getItem(args.row);
-
-                // determine the desired action
-                if (templatesGrid.getColumns()[args.cell].id === 'actions') {
-                    if (target.hasClass('export-template')) {
-                        downloadTemplate(item);
-                    } else if (target.hasClass('prompt-to-delete-template')) {
-                        promptToDeleteTemplate(item);
-                    } else if (target.hasClass('edit-access-policies')) {
-                        openAccessPolicies(item);
+    
+                // initialize the grid
+                var templatesGrid = new Slick.Grid('#templates-table', templatesData, templatesColumns, templatesOptions);
+                templatesGrid.setSelectionModel(new Slick.RowSelectionModel());
+                templatesGrid.registerPlugin(new Slick.AutoTooltips());
+                templatesGrid.setSortColumn('timestamp', false);
+                templatesGrid.onSort.subscribe(function (e, args) {
+                    sort({
+                        columnId: args.sortCol.id,
+                        sortAsc: args.sortAsc
+                    }, templatesData);
+                });
+    
+                // configure a click listener
+                templatesGrid.onClick.subscribe(function (e, args) {
+                    var target = $(e.target);
+    
+                    // get the node at this row
+                    var item = templatesData.getItem(args.row);
+    
+                    // determine the desired action
+                    if (templatesGrid.getColumns()[args.cell].id === 'actions') {
+                        if (target.hasClass('export-template')) {
+                            downloadTemplate(item);
+                        } else if (target.hasClass('prompt-to-delete-template')) {
+                            promptToDeleteTemplate(item);
+                        } else if (target.hasClass('edit-access-policies')) {
+                            openAccessPolicies(item);
+                        }
                     }
+                });
+    
+                // wire up the dataview to the grid
+                templatesData.onRowCountChanged.subscribe(function (e, args) {
+                    templatesGrid.updateRowCount();
+                    templatesGrid.render();
+    
+                    // update the total number of displayed processors
+                    $('#displayed-templates').text(args.current);
+                });
+                templatesData.onRowsChanged.subscribe(function (e, args) {
+                    templatesGrid.invalidateRows(args.rows);
+                    templatesGrid.render();
+                });
+    
+                // hold onto an instance of the grid
+                $('#templates-table').data('gridInstance', templatesGrid);
+    
+                // 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 (nfCommon.isDefinedAndNotNull(templateGrid)) {
+                    templateGrid.resizeCanvas();
                 }
-            });
-
-            // wire up the dataview to the grid
-            templatesData.onRowCountChanged.subscribe(function (e, args) {
-                templatesGrid.updateRowCount();
-                templatesGrid.render();
-
-                // update the total number of displayed processors
-                $('#displayed-templates').text(args.current);
-            });
-            templatesData.onRowsChanged.subscribe(function (e, args) {
-                templatesGrid.invalidateRows(args.rows);
-                templatesGrid.render();
-            });
-
-            // hold onto an instance of the grid
-            $('#templates-table').data('gridInstance', templatesGrid);
-
-            // 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 (nfCommon.isDefinedAndNotNull(templateGrid)) {
-                templateGrid.resizeCanvas();
+            },
+    
+            /**
+             * Load the processor templates table.
+             */
+            loadTemplatesTable: function () {
+                return $.ajax({
+                    type: 'GET',
+                    url: config.urls.templates,
+                    dataType: 'json'
+                }).done(function (response) {
+                    // ensure there are groups specified
+                  if (nfCommon.isDefinedAndNotNull(response.templates)) {
+                        var templatesGrid = $('#templates-table').data('gridInstance');
+                        var templatesData = templatesGrid.getData();
+    
+                        // set the items
+                        templatesData.setItems(response.templates);
+                        templatesData.reSort();
+                        templatesGrid.invalidate();
+    
+                        // update the stats last refreshed timestamp
+                        $('#templates-last-refreshed').text(response.generated);
+    
+                        // update the total number of processors
+                        $('#total-templates').text(response.templates.length);
+                    } else {
+                        $('#total-templates').text('0');
+                    }
+              }).fail(nfErrorHandler.handleAjaxError);
             }
-        },
-
-        /**
-         * Load the processor templates table.
-         */
-        loadTemplatesTable: function () {
-            return $.ajax({
-                type: 'GET',
-                url: config.urls.templates,
-                dataType: 'json'
-            }).done(function (response) {
-                // ensure there are groups specified
-                if (nfCommon.isDefinedAndNotNull(response.templates)) {
-                    var templatesGrid = $('#templates-table').data('gridInstance');
-                    var templatesData = templatesGrid.getData();
-
-                    // set the items
-                    templatesData.setItems(response.templates);
-                    templatesData.reSort();
-                    templatesGrid.invalidate();
-
-                    // update the stats last refreshed timestamp
-                    $('#templates-last-refreshed').text(response.generated);
-
-                    // update the total number of processors
-                    $('#total-templates').text(response.templates.length);
-                } else {
-                    $('#total-templates').text('0');
-                }
-            }).fail(nfErrorHandler.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/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 73a812567965..2c4f93c6bbd0 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
@@ -1,1318 +1,1318 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'Slick',
-                'nf.Common',
-                'nf.Client',
-                'nf.ErrorHandler'],
-            function ($, Slick, nfCommon, nfClient, nfErrorHandler) {
-                return (nf.UsersTable = factory($, Slick, nfCommon, nfClient, nfErrorHandler));
-            });
-    } 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, nfCommon, nfClient, nfErrorHandler) {
-    'use strict';
-
-    /**
-     * Configuration object used to hold a number of configuration items.
+    /*
+     * 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.
      */
-    var config = {
-        urls: {
-            users: '../nifi-api/tenants/users',
-            userGroups: '../nifi-api/tenants/user-groups'
-        }
-    };
-
-    var initUserDeleteDialog = function () {
-        $('#user-delete-dialog').modal({
-            headerText: 'Delete Account',
-            buttons: [{
-                buttonText: 'Delete',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
-                handler: {
-                    click: function () {
-                        var userId = $('#user-id-delete-dialog').val();
-
-                        // get the user
-                        var usersGrid = $('#users-table').data('gridInstance');
-                        var usersData = usersGrid.getData();
-                        var user = usersData.getItemById(userId);
-
-                        // update the user
-                        $.ajax({
-                            type: 'DELETE',
-                            url: user.uri + '?' + $.param(nfClient.getRevision(user)),
-                            dataType: 'json'
-                        }).done(function () {
-                            nfUsersTable.loadUsersTable();
-                        }).fail(nfErrorHandler.handleAjaxError);
-
-                        // hide the dialog
-                        $('#user-delete-dialog').modal('hide');
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.ErrorHandler'],
+              function ($, Slick, nfCommon, nfClient, nfErrorHandler) {
+                  return (nf.UsersTable = factory($, Slick, nfCommon, nfClient, nfErrorHandler));
+              });
+      } 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, nfCommon, nfClient, nfErrorHandler) {
+      'use strict';
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                users: '../nifi-api/tenants/users',
+                userGroups: '../nifi-api/tenants/user-groups'
+            }
+        };
+    
+        var initUserDeleteDialog = function () {
+            $('#user-delete-dialog').modal({
+              headerText: nf._.msg('nf-users-table.DeleteAccount'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-users-table.Delete'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            var userId = $('#user-id-delete-dialog').val();
+    
+                            // get the user
+                            var usersGrid = $('#users-table').data('gridInstance');
+                            var usersData = usersGrid.getData();
+                            var user = usersData.getItemById(userId);
+    
+                            // update the user
+                            $.ajax({
+                                type: 'DELETE',
+                              url: user.uri + '?' + $.param(nfClient.getRevision(user)),
+                                dataType: 'json'
+                            }).done(function () {
+                              nfUsersTable.loadUsersTable();
+                          }).fail(nfErrorHandler.handleAjaxError);
+    
+                            // hide the dialog
+                            $('#user-delete-dialog').modal('hide');
+                        }
                     }
-                }
-            }, {
-                buttonText: 'Cancel',
-                color: {
-                    base: '#E3E8EB',
-                    hover: '#C7D2D7',
-                    text: '#004849'
-                },
+                }, {
+                  buttonText: nf._.msg('nf-users-table.Cancel'),
+                    color: {
+                        base: '#E3E8EB',
+                        hover: '#C7D2D7',
+                        text: '#004849'
+                    },
+                    handler: {
+                        click: function () {
+                            $('#user-delete-dialog').modal('hide');
+                        }
+                    }
+                }],
                 handler: {
-                    click: function () {
-                        $('#user-delete-dialog').modal('hide');
+                    close: function () {
+                        // clear the current user
+                        $('#user-id-delete-dialog').val('');
+                        $('#user-name-delete-dialog').text('');
                     }
                 }
-            }],
-            handler: {
-                close: function () {
-                    // clear the current user
-                    $('#user-id-delete-dialog').val('');
-                    $('#user-name-delete-dialog').text('');
-                }
-            }
-        });
-    };
-
-    /**
-     * Gets the currently selected groups.
-     *
-     * @returns {Array} groups
-     */
-    var getSelectedGroups = function () {
-        var selectedGroups = [];
-        $('#available-groups div.group-check').filter(function () {
-            return $(this).hasClass('checkbox-checked');
-        }).each(function () {
-            var id = $(this).next('span.group-id').text();
-            selectedGroups.push({
-                'id': id
             });
-        });
-        return selectedGroups;
-    };
-
-    /**
-     * Gets the currently selected users.
-     *
-     * @returns {Array} users
-     */
-    var getSelectedUsers = function () {
-        var selectedUsers = [];
-        $('#available-users div.user-check').filter(function () {
-            return $(this).hasClass('checkbox-checked');
-        }).each(function () {
-            var id = $(this).next('span.user-id').text();
-            selectedUsers.push({
-                'id': id
+        };
+    
+        /**
+         * Gets the currently selected groups.
+         *
+         * @returns {Array} groups
+         */
+        var getSelectedGroups = function () {
+            var selectedGroups = [];
+            $('#available-groups div.group-check').filter(function () {
+                return $(this).hasClass('checkbox-checked');
+            }).each(function () {
+                var id = $(this).next('span.group-id').text();
+                selectedGroups.push({
+                    'id': id
+                });
             });
-        });
-        return selectedUsers;
-    };
-
-    /**
-     * Adds the specified user to the specified group.
-     *
-     * @param groupEntity
-     * @param userEntity
-     * @returns xhr
-     */
-    var addUserToGroup = function (groupEntity, userEntity) {
-        var groupMembers = [];
-
-        // get all the current users
-        $.each(groupEntity.component.users, function (_, member) {
-            groupMembers.push({
-                'id': member.id
+            return selectedGroups;
+        };
+    
+        /**
+         * Gets the currently selected users.
+         *
+         * @returns {Array} users
+         */
+        var getSelectedUsers = function () {
+            var selectedUsers = [];
+            $('#available-users div.user-check').filter(function () {
+                return $(this).hasClass('checkbox-checked');
+            }).each(function () {
+                var id = $(this).next('span.user-id').text();
+                selectedUsers.push({
+                    'id': id
+                });
             });
-        });
-
-        // add the new user
-        groupMembers.push({
-            'id': userEntity.id
-        });
-
-        // build the request entity
-        var updatedGroupEntity = {
-            'revision': nfClient.getRevision(groupEntity),
-            'component': $.extend({}, groupEntity.component, {
-                'users': groupMembers
-            })
+            return selectedUsers;
         };
-
-        // update the group
-        return $.ajax({
-            type: 'PUT',
-            url: groupEntity.uri,
-            data: JSON.stringify(updatedGroupEntity),
-            dataType: 'json',
-            contentType: 'application/json'
-        });
-    };
-
-    /**
-     * Adds the specified user to the specified group.
-     *
-     * @param groupEntity
-     * @param userEntity
-     * @returns xhr
-     */
-    var removeUserFromGroup = function (groupEntity, userEntity) {
-        var groupMembers = [];
-
-        // get all the current users
-        $.each(groupEntity.component.users, function (_, member) {
-            // do not include the specified user
-            if (member.id !== userEntity.id) {
+    
+        /**
+         * Adds the specified user to the specified group.
+         *
+         * @param groupEntity
+         * @param userEntity
+         * @returns xhr
+         */
+        var addUserToGroup = function (groupEntity, userEntity) {
+            var groupMembers = [];
+    
+            // get all the current users
+            $.each(groupEntity.component.users, function (_, member) {
                 groupMembers.push({
                     'id': member.id
                 });
-            }
-        });
-
-        // build the request entity
-        var updatedGroupEntity = {
-            'revision': nfClient.getRevision(groupEntity),
-            'component': $.extend({}, groupEntity.component, {
-                'users': groupMembers
-            })
+            });
+    
+            // add the new user
+            groupMembers.push({
+                'id': userEntity.id
+            });
+    
+            // build the request entity
+            var updatedGroupEntity = {
+              'revision': nfClient.getRevision(groupEntity),
+                'component': $.extend({}, groupEntity.component, {
+                    'users': groupMembers
+                })
+            };
+    
+            // update the group
+            return $.ajax({
+                type: 'PUT',
+                url: groupEntity.uri,
+                data: JSON.stringify(updatedGroupEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            });
         };
-
-        // update the group
-        return $.ajax({
-            type: 'PUT',
-            url: groupEntity.uri,
-            data: JSON.stringify(updatedGroupEntity),
-            dataType: 'json',
-            contentType: 'application/json'
-        });
-    };
-
-    /**
-     * Creates the specified user.
-     *
-     * @param newUserEntity
-     * @param selectedGroups
-     */
-    var createUser = function (newUserEntity, selectedGroups) {
-        // get the grid and data
-        var usersGrid = $('#users-table').data('gridInstance');
-        var usersData = usersGrid.getData();
-
-        // create the user
-        var userXhr = $.ajax({
-            type: 'POST',
-            url: config.urls.users,
-            data: JSON.stringify(newUserEntity),
-            dataType: 'json',
-            contentType: 'application/json'
-        });
-
-        // if the user was successfully created
-        userXhr.done(function (userEntity) {
-            var xhrs = [];
-            $.each(selectedGroups, function (_, selectedGroup) {
-                var groupEntity = usersData.getItemById(selectedGroup.id)
-                xhrs.push(addUserToGroup(groupEntity, userEntity));
+    
+        /**
+         * Adds the specified user to the specified group.
+         *
+         * @param groupEntity
+         * @param userEntity
+         * @returns xhr
+         */
+        var removeUserFromGroup = function (groupEntity, userEntity) {
+            var groupMembers = [];
+    
+            // get all the current users
+            $.each(groupEntity.component.users, function (_, member) {
+                // do not include the specified user
+                if (member.id !== userEntity.id) {
+                    groupMembers.push({
+                        'id': member.id
+                    });
+                }
+            });
+    
+            // build the request entity
+            var updatedGroupEntity = {
+              'revision': nfClient.getRevision(groupEntity),
+                'component': $.extend({}, groupEntity.component, {
+                    'users': groupMembers
+                })
+            };
+    
+            // update the group
+            return $.ajax({
+                type: 'PUT',
+                url: groupEntity.uri,
+                data: JSON.stringify(updatedGroupEntity),
+                dataType: 'json',
+                contentType: 'application/json'
             });
-
-            $.when.apply(window, xhrs).always(function () {
-                nfUsersTable.loadUsersTable().done(function () {
-                    // select the new user
-                    var row = usersData.getRowById(userEntity.id);
-                    usersGrid.setSelectedRows([row]);
-                    usersGrid.scrollRowIntoView(row);
-                });
-            }).fail(nfErrorHandler.handleAjaxError);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Updates the specified user.
-     *
-     * @param userId
-     * @param userIdentity
-     * @param selectedGroups
-     */
-    var updateUser = function (userId, userIdentity, selectedGroups) {
-        // get the grid and data
-        var usersGrid = $('#users-table').data('gridInstance');
-        var usersData = usersGrid.getData();
-        var userEntity = usersData.getItemById(userId);
-
-        var updatedUserEntity = {
-            'revision': nfClient.getRevision(userEntity),
-            'component': {
-                'id': userId,
-                'identity': userIdentity
-            }
         };
-
-        // update the user
-        var userXhr = $.ajax({
-            type: 'PUT',
-            url: userEntity.uri,
-            data: JSON.stringify(updatedUserEntity),
-            dataType: 'json',
-            contentType: 'application/json'
-        });
-
-        userXhr.done(function (updatedUserEntity) {
-
-            // determine what to add/remove
-            var groupsAdded = [];
-            var groupsRemoved = [];
-            $.each(updatedUserEntity.component.userGroups, function (_, currentGroup) {
-                var isSelected = $.grep(selectedGroups, function (group) {
-                    return group.id === currentGroup.id;
+    
+        /**
+         * Creates the specified user.
+         *
+         * @param newUserEntity
+         * @param selectedGroups
+         */
+        var createUser = function (newUserEntity, selectedGroups) {
+            // get the grid and data
+            var usersGrid = $('#users-table').data('gridInstance');
+            var usersData = usersGrid.getData();
+    
+            // create the user
+            var userXhr = $.ajax({
+                type: 'POST',
+                url: config.urls.users,
+                data: JSON.stringify(newUserEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            });
+    
+            // if the user was successfully created
+            userXhr.done(function (userEntity) {
+                var xhrs = [];
+                $.each(selectedGroups, function (_, selectedGroup) {
+                    var groupEntity = usersData.getItemById(selectedGroup.id)
+                    xhrs.push(addUserToGroup(groupEntity, userEntity));
                 });
-
-                // if the current group is not selected, mark it for removed
-                if (isSelected.length === 0) {
-                    groupsRemoved.push(currentGroup);
+    
+                $.when.apply(window, xhrs).always(function () {
+                  nfUsersTable.loadUsersTable().done(function () {
+                        // select the new user
+                        var row = usersData.getRowById(userEntity.id);
+                        usersGrid.setSelectedRows([row]);
+                        usersGrid.scrollRowIntoView(row);
+                    });
+              }).fail(nfErrorHandler.handleAjaxError);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Updates the specified user.
+         *
+         * @param userId
+         * @param userIdentity
+         * @param selectedGroups
+         */
+        var updateUser = function (userId, userIdentity, selectedGroups) {
+            // get the grid and data
+            var usersGrid = $('#users-table').data('gridInstance');
+            var usersData = usersGrid.getData();
+            var userEntity = usersData.getItemById(userId);
+    
+            var updatedUserEntity = {
+              'revision': nfClient.getRevision(userEntity),
+                'component': {
+                    'id': userId,
+                    'identity': userIdentity
                 }
+            };
+    
+            // update the user
+            var userXhr = $.ajax({
+                type: 'PUT',
+                url: userEntity.uri,
+                data: JSON.stringify(updatedUserEntity),
+                dataType: 'json',
+                contentType: 'application/json'
             });
-            $.each(selectedGroups, function (_, selectedGroup) {
-                var isSelected = $.grep(updatedUserEntity.component.userGroups, function (group) {
-                    return group.id === selectedGroup.id;
+    
+            userXhr.done(function (updatedUserEntity) {
+    
+                // determine what to add/remove
+                var groupsAdded = [];
+                var groupsRemoved = [];
+                $.each(updatedUserEntity.component.userGroups, function (_, currentGroup) {
+                    var isSelected = $.grep(selectedGroups, function (group) {
+                        return group.id === currentGroup.id;
+                    });
+    
+                    // if the current group is not selected, mark it for removed
+                    if (isSelected.length === 0) {
+                        groupsRemoved.push(currentGroup);
+                    }
+                });
+                $.each(selectedGroups, function (_, selectedGroup) {
+                    var isSelected = $.grep(updatedUserEntity.component.userGroups, function (group) {
+                        return group.id === selectedGroup.id;
+                    });
+    
+                    // if the selected group is not current, mark it for addition
+                    if (isSelected.length === 0) {
+                        groupsAdded.push(selectedGroup);
+                    }
+                });
+    
+                // update each group
+                var xhrs = [];
+                $.each(groupsAdded, function (_, group) {
+                    var groupEntity = usersData.getItemById(group.id);
+                    xhrs.push(addUserToGroup(groupEntity, updatedUserEntity))
+                });
+                $.each(groupsRemoved, function (_, group) {
+                    var groupEntity = usersData.getItemById(group.id);
+                    xhrs.push(removeUserFromGroup(groupEntity, updatedUserEntity));
+                });
+    
+                $.when.apply(window, xhrs).always(function () {
+                  nfUsersTable.loadUsersTable();
+              }).fail(nfErrorHandler.handleAjaxError);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Creates the specified group.
+         *
+         * @param newGroupEntity
+         */
+        var createGroup = function (newGroupEntity) {
+            // create the group
+            $.ajax({
+                type: 'POST',
+                url: config.urls.userGroups,
+                data: JSON.stringify(newGroupEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (groupEntity) {
+              nfUsersTable.loadUsersTable().done(function () {
+                    // add the user
+                    var usersGrid = $('#users-table').data('gridInstance');
+                    var usersData = usersGrid.getData();
+    
+                    // select the new user
+                    var row = usersData.getRowById(groupEntity.id);
+                    usersGrid.setSelectedRows([row]);
+                    usersGrid.scrollRowIntoView(row);
                 });
-
-                // if the selected group is not current, mark it for addition
-                if (isSelected.length === 0) {
-                    groupsAdded.push(selectedGroup);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        var updateGroup = function (groupId, groupIdentity, selectedUsers) {
+            // get the grid and data
+            var usersGrid = $('#users-table').data('gridInstance');
+            var usersData = usersGrid.getData();
+            var groupEntity = usersData.getItemById(groupId);
+    
+            var updatedGroupoEntity = {
+              'revision': nfClient.getRevision(groupEntity),
+                'component': {
+                    'id': groupId,
+                    'identity': groupIdentity,
+                    'users': selectedUsers
                 }
-            });
-
-            // update each group
-            var xhrs = [];
-            $.each(groupsAdded, function (_, group) {
-                var groupEntity = usersData.getItemById(group.id);
-                xhrs.push(addUserToGroup(groupEntity, updatedUserEntity))
-            });
-            $.each(groupsRemoved, function (_, group) {
-                var groupEntity = usersData.getItemById(group.id);
-                xhrs.push(removeUserFromGroup(groupEntity, updatedUserEntity));
-            });
-
-            $.when.apply(window, xhrs).always(function () {
-                nfUsersTable.loadUsersTable();
-            }).fail(nfErrorHandler.handleAjaxError);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Creates the specified group.
-     *
-     * @param newGroupEntity
-     */
-    var createGroup = function (newGroupEntity) {
-        // create the group
-        $.ajax({
-            type: 'POST',
-            url: config.urls.userGroups,
-            data: JSON.stringify(newGroupEntity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).done(function (groupEntity) {
-            nfUsersTable.loadUsersTable().done(function () {
-                // add the user
-                var usersGrid = $('#users-table').data('gridInstance');
-                var usersData = usersGrid.getData();
-
-                // select the new user
-                var row = usersData.getRowById(groupEntity.id);
-                usersGrid.setSelectedRows([row]);
-                usersGrid.scrollRowIntoView(row);
-            });
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    var updateGroup = function (groupId, groupIdentity, selectedUsers) {
-        // get the grid and data
-        var usersGrid = $('#users-table').data('gridInstance');
-        var usersData = usersGrid.getData();
-        var groupEntity = usersData.getItemById(groupId);
-
-        var updatedGroupoEntity = {
-            'revision': nfClient.getRevision(groupEntity),
-            'component': {
-                'id': groupId,
-                'identity': groupIdentity,
-                'users': selectedUsers
-            }
+            };
+    
+            // update the user
+            $.ajax({
+                type: 'PUT',
+                url: groupEntity.uri,
+                data: JSON.stringify(updatedGroupoEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (groupEntity) {
+              nfUsersTable.loadUsersTable();
+          }).fail(nfErrorHandler.handleAjaxError);
         };
-
-        // update the user
-        $.ajax({
-            type: 'PUT',
-            url: groupEntity.uri,
-            data: JSON.stringify(updatedGroupoEntity),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).done(function (groupEntity) {
-            nfUsersTable.loadUsersTable();
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Initializes the user table.
-     */
-    var initUserDialog = function () {
-        $('#user-dialog').modal({
-            headerText: 'User/Group',
-            buttons: [{
-                buttonText: 'Ok',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
-                handler: {
-                    click: function () {
-                        var userId = $('#user-id-edit-dialog').text();
-                        var userIdentity = $('#user-identity-edit-dialog').val();
-
-                        // see if we should create or update this user
-                        if ($.trim(userId) === '') {
-                            var tenantEntity = {
-                                'revision': nfClient.getRevision({
-                                    'revision': {
-                                        'version': 0
-                                    }
-                                })
-                            };
-
-                            // handle whether it's a user or a group
-                            if ($('#individual-radio-button').is(':checked')) {
-                                // record the user groups
-                                tenantEntity['component'] = {
-                                    'identity': userIdentity
-                                };
-
-                                createUser(tenantEntity, getSelectedGroups());
-                            } else {
-                                // record the users
-                                tenantEntity['component'] = {
-                                    'identity': userIdentity,
-                                    'users': getSelectedUsers()
+    
+        /**
+         * Initializes the user table.
+         */
+        var initUserDialog = function () {
+            $('#user-dialog').modal({
+              headerText: nf._.msg('nf-users-table.UserGroup'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-users-table.Ok'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            var userId = $('#user-id-edit-dialog').text();
+                            var userIdentity = $('#user-identity-edit-dialog').val();
+    
+                            // see if we should create or update this user
+                            if ($.trim(userId) === '') {
+                                var tenantEntity = {
+                                  'revision': nfClient.getRevision({
+                                        'revision': {
+                                            'version': 0
+                                        }
+                                    })
                                 };
-
-                                createGroup(tenantEntity);
-                            }
-
-                            // update any selected policies
-                        } else {
-                            // handle whether it's a user or a group
-                            if ($('#individual-radio-button').is(':checked')) {
-                                updateUser(userId, userIdentity, getSelectedGroups());
-
+    
+                                // handle whether it's a user or a group
+                                if ($('#individual-radio-button').is(':checked')) {
+                                    // record the user groups
+                                    tenantEntity['component'] = {
+                                        'identity': userIdentity
+                                    };
+    
+                                    createUser(tenantEntity, getSelectedGroups());
+                                } else {
+                                    // record the users
+                                    tenantEntity['component'] = {
+                                        'identity': userIdentity,
+                                        'users': getSelectedUsers()
+                                    };
+    
+                                    createGroup(tenantEntity);
+                                }
+    
                                 // update any selected policies
                             } else {
-                                updateGroup(userId, userIdentity, getSelectedUsers());
-
-                                // update any selected policies
+                                // handle whether it's a user or a group
+                                if ($('#individual-radio-button').is(':checked')) {
+                                    updateUser(userId, userIdentity, getSelectedGroups());
+    
+                                    // update any selected policies
+                                } else {
+                                    updateGroup(userId, userIdentity, getSelectedUsers());
+    
+                                    // update any selected policies
+                                }
                             }
+    
+                            $('#user-dialog').modal('hide');
                         }
-
-                        $('#user-dialog').modal('hide');
                     }
-                }
-            }, {
-                buttonText: 'Cancel',
-                color: {
-                    base: '#E3E8EB',
-                    hover: '#C7D2D7',
-                    text: '#004849'
-                },
+                }, {
+                  buttonText: nf._.msg('nf-users-table.Cancel'),
+                    color: {
+                        base: '#E3E8EB',
+                        hover: '#C7D2D7',
+                        text: '#004849'
+                    },
+                    handler: {
+                        click: function () {
+                            $('#user-dialog').modal('hide');
+                        }
+                    }
+                }],
                 handler: {
-                    click: function () {
-                        $('#user-dialog').modal('hide');
+                    close: function () {
+                        // reset the radio button
+                        $('#user-dialog input[name="userOrGroup"]').attr('disabled', false);
+                        $('#individual-radio-button').prop('checked', true);
+                        $('#user-groups').show();
+                        $('#group-members').hide();
+    
+                        // clear the fields
+                        $('#user-id-edit-dialog').text('');
+                        $('#user-identity-edit-dialog').val('');
+                        $('#available-users').empty()
+                        $('#available-groups').empty()
                     }
                 }
-            }],
-            handler: {
-                close: function () {
-                    // reset the radio button
-                    $('#user-dialog input[name="userOrGroup"]').attr('disabled', false);
-                    $('#individual-radio-button').prop('checked', true);
+            });
+    
+            // listen for changes to the user/group radio
+            $('#user-dialog input[name="userOrGroup"]').on('change', function () {
+                if ($(this).val() === 'individual') {
                     $('#user-groups').show();
                     $('#group-members').hide();
-
-                    // clear the fields
-                    $('#user-id-edit-dialog').text('');
-                    $('#user-identity-edit-dialog').val('');
-                    $('#available-users').empty()
-                    $('#available-groups').empty()
+                } else {
+                    $('#user-groups').hide();
+                    $('#group-members').show();
                 }
-            }
-        });
-
-        // listen for changes to the user/group radio
-        $('#user-dialog input[name="userOrGroup"]').on('change', function () {
-            if ($(this).val() === 'individual') {
-                $('#user-groups').show();
-                $('#group-members').hide();
-            } else {
-                $('#user-groups').hide();
-                $('#group-members').show();
-            }
-        });
-    };
-
-    /**
-     * Initializes the user policies dialog.
-     */
-    var initUserPoliciesDialog = function () {
-        $('#user-policies-dialog').modal({
-            headerText: 'User Policies',
-            buttons: [{
-                buttonText: 'Close',
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
-                handler: {
-                    click: function () {
-                        $('#user-policies-dialog').modal('hide');
-                    }
+            });
+        };
+    
+        /**
+       * Initializes the user policies dialog.
+       */
+      var initUserPoliciesDialog = function () {
+          $('#user-policies-dialog').modal({
+              headerText: 'User Policies',
+              buttons: [{
+                  buttonText: 'Close',
+                  color: {
+                      base: '#728E9B',
+                      hover: '#004849',
+                      text: '#ffffff'
+                  },
+                  handler: {
+                      click: function () {
+                          $('#user-policies-dialog').modal('hide');
+                      }
+                  }
+              }]
+          });
+      };
+  
+      /**
+       * Generates a human readable global policy strung.
+       *
+       * @param dataContext
+       * @returns {string}
+       */
+      var globalResourceParser = function (dataContext) {
+          return 'Global policy to ' +
+              nfCommon.getPolicyTypeListing(nfCommon.substringAfterFirst(dataContext.component.resource, '/')).text;
+      };
+  
+      /**
+       * Generates a human readable component policy string.
+       *
+       * @param dataContext
+       * @returns {string}
+       */
+      var componentResourceParser = function (dataContext) {
+          var resource = dataContext.component.resource;
+          var policyLabel = '';
+  
+          //determine policy type
+          if (resource.startsWith('/policies')) {
+              resource = nfCommon.substringAfterFirst(resource, '/policies');
+              policyLabel += 'Admin policy for ';
+          } else if (resource.startsWith('/data-transfer')) {
+              resource = nfCommon.substringAfterFirst(resource, '/data-transfer');
+              policyLabel += 'Site to site policy for ';
+          } else if (resource.startsWith('/data')) {
+              resource = nfCommon.substringAfterFirst(resource, '/data');
+              policyLabel += 'Data policy for ';
+          } else {
+              policyLabel += 'Component policy for ';
+          }
+  
+          if (resource.startsWith('/processors')) {
+              policyLabel += 'processor ';
+          } else if (resource.startsWith('/controller-services')) {
+              policyLabel += 'controller service ';
+          } else if (resource.startsWith('/funnels')) {
+              policyLabel += 'funnel ';
+          } else if (resource.startsWith('/input-ports')) {
+              policyLabel += 'input port ';
+          } else if (resource.startsWith('/labels')) {
+              policyLabel += 'label ';
+          } else if (resource.startsWith('/output-ports')) {
+              policyLabel += 'output port ';
+          } else if (resource.startsWith('/process-groups')) {
+              policyLabel += 'process group ';
+          } else if (resource.startsWith('/remote-process-groups')) {
+              policyLabel += 'remote process group ';
+          } else if (resource.startsWith('/reporting-tasks')) {
+              policyLabel += 'reporting task ';
+          } else if (resource.startsWith('/templates')) {
+              policyLabel += 'template ';
+          }
+  
+          if (dataContext.component.componentReference.permissions.canRead === true) {
+              policyLabel += '<span style="font-weight: 500">' + dataContext.component.componentReference.component.name + '</span>';
+          } else {
+              policyLabel += '<span class="unset">' + dataContext.component.componentReference.id + '</span>'
+          }
+  
+          return policyLabel;
+      };
+  
+      /**
+       * Initializes the user policies table.
+       */
+      var initUserPoliciesTable = function () {
+  
+          // function for formatting the human readable name of the policy
+          var policyDisplayNameFormatter = function (row, cell, value, columnDef, dataContext) {
+              // if the user has permission to the policy
+              if (dataContext.permissions.canRead === true) {
+                  // check if Global policy
+                  if (nfCommon.isUndefinedOrNull(dataContext.component.componentReference)) {
+                      return globalResourceParser(dataContext);
+                  }
+                  // not a global policy... check if user has access to the component reference
+                  return componentResourceParser(dataContext);
+              } else {
+                  return '<span class="unset">' + dataContext.id + '</span>';
+              }
+          };
+  
+          // function for formatting the actions column
+          var actionsFormatter = function (row, cell, value, columnDef, dataContext) {
+              var markup = '';
+  
+              if (dataContext.permissions.canRead === true) {
+                  if (nfCommon.isDefinedAndNotNull(dataContext.component.componentReference)) {
+                      if (dataContext.component.resource.indexOf('/processors') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/controller-services') >= 0) {
+                          //TODO: implement go to for CS
+                      } else if (dataContext.component.resource.indexOf('/funnels') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/input-ports') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/labels') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/output-ports') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/process-groups') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-process-group fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/remote-process-groups') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/reporting-tasks') >= 0) {
+                          //TODO: implement go to for RT
+                      } else if (dataContext.component.resource.indexOf('/templates') >= 0) {
+                          //TODO: implement go to for Templates
+                      }
+                  }
+              }
+  
+              return markup;
+          };
+  
+          // function for formatting the action column
+          var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+              var markup = '';
+  
+              if (dataContext.permissions.canRead === true) {
+                  markup += dataContext.component.action;
+              }
+  
+              return markup;
+          };
+  
+          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
+              }
+          ];
+  
+          // add the actions if we're in the shell
+          if (top !== window) {
+              userPoliciesColumns.push({
+                  id: 'actions',
+                  name: '&nbsp;',
+                  sortable: false,
+                  resizable: false,
+                  formatter: actionsFormatter,
+                  width: 25
+              });
+          }
+  
+          var userPoliciesOptions = {
+              forceFitColumns: true,
+              enableTextSelectionOnCells: true,
+              enableCellNavigation: true,
+              enableColumnReorder: false,
+              autoEdit: false
+          };
+  
+          // initialize the dataview
+          var userPoliciesData = new Slick.Data.DataView({
+              inlineFilters: false
+          });
+          userPoliciesData.setItems([]);
+  
+          // initialize the sort
+          userPolicySort({
+              columnId: 'policy',
+              sortAsc: true
+          }, userPoliciesData);
+  
+          // initialize the grid
+          var userPoliciesGrid = new Slick.Grid('#user-policies-table', userPoliciesData, userPoliciesColumns, userPoliciesOptions);
+          userPoliciesGrid.setSelectionModel(new Slick.RowSelectionModel());
+          userPoliciesGrid.registerPlugin(new Slick.AutoTooltips());
+          userPoliciesGrid.setSortColumn('policy', true);
+          userPoliciesGrid.onSort.subscribe(function (e, args) {
+              userPolicySort({
+                  columnId: args.sortCol.id,
+                  sortAsc: args.sortAsc
+              }, userPoliciesData);
+          });
+  
+          // configure a click listener
+          userPoliciesGrid.onClick.subscribe(function (e, args) {
+              var target = $(e.target);
+  
+              // get the node at this row
+              var item = userPoliciesData.getItem(args.row);
+  
+              // determine the desired action
+              if (userPoliciesGrid.getColumns()[args.cell].id === 'actions') {
+                  if (target.hasClass('go-to-component')) {
+                      parent.$('body').trigger('GoTo:Component', {
+                          id: item.component.componentReference.id,
+                          parentGroupId: item.component.componentReference.parentGroupId
+                      });
+                      parent.$('#shell-close-button').click();
+                  } else if (target.hasClass('go-to-process-group')) {
+                      parent.$('body').trigger('GoTo:ProcessGroup', {
+                          id: item.component.componentReference.id
+                      });
+                      parent.$('#shell-close-button').click();
+                  }
+              }
+          });
+  
+          // wire up the dataview to the grid
+          userPoliciesData.onRowCountChanged.subscribe(function (e, args) {
+              userPoliciesGrid.updateRowCount();
+              userPoliciesGrid.render();
+          });
+          userPoliciesData.onRowsChanged.subscribe(function (e, args) {
+              userPoliciesGrid.invalidateRows(args.rows);
+              userPoliciesGrid.render();
+          });
+  
+          // hold onto an instance of the grid
+          $('#user-policies-table').data('gridInstance', userPoliciesGrid);
+      };
+  
+      /**
+         * Initializes the processor list.
+         */
+        var initUsersTable = function () {
+            // define the function for filtering the list
+            $('#users-filter').keyup(function () {
+                applyFilter();
+            });
+    
+            // filter type
+            $('#users-filter-type').combo({
+                options: [{
+                  text: nf._.msg('nf-users-table.ByUser'),
+                    value: 'identity'
+                }],
+                select: function (option) {
+                    applyFilter();
                 }
-            }]
-        });
-    };
-
-    /**
-     * Generates a human readable global policy strung.
-     *
-     * @param dataContext
-     * @returns {string}
-     */
-    var globalResourceParser = function (dataContext) {
-        return 'Global policy to ' +
-            nfCommon.getPolicyTypeListing(nfCommon.substringAfterFirst(dataContext.component.resource, '/')).text;
-    };
-
-    /**
-     * Generates a human readable component policy string.
-     *
-     * @param dataContext
-     * @returns {string}
-     */
-    var componentResourceParser = function (dataContext) {
-        var resource = dataContext.component.resource;
-        var policyLabel = '';
-
-        //determine policy type
-        if (resource.startsWith('/policies')) {
-            resource = nfCommon.substringAfterFirst(resource, '/policies');
-            policyLabel += 'Admin policy for ';
-        } else if (resource.startsWith('/data-transfer')) {
-            resource = nfCommon.substringAfterFirst(resource, '/data-transfer');
-            policyLabel += 'Site to site policy for ';
-        } else if (resource.startsWith('/data')) {
-            resource = nfCommon.substringAfterFirst(resource, '/data');
-            policyLabel += 'Data policy for ';
-        } else {
-            policyLabel += 'Component policy for ';
-        }
-
-        if (resource.startsWith('/processors')) {
-            policyLabel += 'processor ';
-        } else if (resource.startsWith('/controller-services')) {
-            policyLabel += 'controller service ';
-        } else if (resource.startsWith('/funnels')) {
-            policyLabel += 'funnel ';
-        } else if (resource.startsWith('/input-ports')) {
-            policyLabel += 'input port ';
-        } else if (resource.startsWith('/labels')) {
-            policyLabel += 'label ';
-        } else if (resource.startsWith('/output-ports')) {
-            policyLabel += 'output port ';
-        } else if (resource.startsWith('/process-groups')) {
-            policyLabel += 'process group ';
-        } else if (resource.startsWith('/remote-process-groups')) {
-            policyLabel += 'remote process group ';
-        } else if (resource.startsWith('/reporting-tasks')) {
-            policyLabel += 'reporting task ';
-        } else if (resource.startsWith('/templates')) {
-            policyLabel += 'template ';
-        }
-
-        if (dataContext.component.componentReference.permissions.canRead === true) {
-            policyLabel += '<span style="font-weight: 500">' + dataContext.component.componentReference.component.name + '</span>';
-        } else {
-            policyLabel += '<span class="unset">' + dataContext.component.componentReference.id + '</span>'
-        }
-
-        return policyLabel;
-    };
-
-    /**
-     * Initializes the user policies table.
-     */
-    var initUserPoliciesTable = function () {
-
-        // function for formatting the human readable name of the policy
-        var policyDisplayNameFormatter = function (row, cell, value, columnDef, dataContext) {
-            // if the user has permission to the policy
-            if (dataContext.permissions.canRead === true) {
-                // check if Global policy
-                if (nfCommon.isUndefinedOrNull(dataContext.component.componentReference)) {
-                    return globalResourceParser(dataContext);
+            });
+    
+            // function for formatting the user identity
+            var identityFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+                if (dataContext.type === 'group') {
+                    markup += '<div class="fa fa-users" style="margin-right: 5px;"></div>';
                 }
-                // not a global policy... check if user has access to the component reference
-                return componentResourceParser(dataContext);
-            } else {
-                return '<span class="unset">' + dataContext.id + '</span>';
-            }
-        };
-
-        // function for formatting the actions column
-        var actionsFormatter = function (row, cell, value, columnDef, dataContext) {
-            var markup = '';
-
-            if (dataContext.permissions.canRead === true) {
-                if (nfCommon.isDefinedAndNotNull(dataContext.component.componentReference)) {
-                    if (dataContext.component.resource.indexOf('/processors') >= 0) {
-                        markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
-                    } else if (dataContext.component.resource.indexOf('/controller-services') >= 0) {
-                        //TODO: implement go to for CS
-                    } else if (dataContext.component.resource.indexOf('/funnels') >= 0) {
-                        markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
-                    } else if (dataContext.component.resource.indexOf('/input-ports') >= 0) {
-                        markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
-                    } else if (dataContext.component.resource.indexOf('/labels') >= 0) {
-                        markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
-                    } else if (dataContext.component.resource.indexOf('/output-ports') >= 0) {
-                        markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
-                    } else if (dataContext.component.resource.indexOf('/process-groups') >= 0) {
-                        markup += '<div title="Go To" class="pointer go-to-process-group fa fa-long-arrow-right" style="float: left;"></div>';
-                    } else if (dataContext.component.resource.indexOf('/remote-process-groups') >= 0) {
-                        markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
-                    } else if (dataContext.component.resource.indexOf('/reporting-tasks') >= 0) {
-                        //TODO: implement go to for RT
-                    } else if (dataContext.component.resource.indexOf('/templates') >= 0) {
-                        //TODO: implement go to for Templates
+    
+                markup += dataContext.component.identity;
+    
+                return markup;
+            };
+    
+            // function for formatting the members/groups
+            var membersGroupsFormatter = function (row, cell, value, columnDef, dataContext) {
+                if (dataContext.type === 'group') {
+                    return 'Members: <b>' + dataContext.component.users.map(function (user) {
+                            return user.component.identity;
+                        }).join('</b>, <b>') + '</b>';
+                } else {
+                    return 'Member of: <b>' + dataContext.component.userGroups.map(function (group) {
+                            return group.component.identity;
+                        }).join('</b>, <b>') + '</b>';
+                }
+            };
+    
+            // function for formatting the actions column
+            var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+    
+                // ensure user can modify the user
+              if (nfCommon.canModifyTenants()) {
+                  markup += '<div title="'+nf._.msg('nf-users-table.Edit')+'" class="pointer edit-user fa fa-pencil" style="margin-right: 3px;"></div>';
+                  markup += '<div title="'+nf._.msg('nf-users-table.Remove')+'" class="pointer delete-user fa fa-trash"></div>';
+              }
+  
+              if (!nfCommon.isEmpty(dataContext.component.accessPolicies)) {
+                  markup += '<div title="View User Policies" class="pointer view-user-policies fa fa-key" style="margin-left: 3px;"></div>';
+                }
+    
+                return markup;
+            };
+    
+            // initialize the templates table
+            var usersColumns = [
+              {
+                  id: 'identity',
+                  name: nf._.msg('nf-users-table.User'),
+                  sortable: true,
+                  resizable: true,
+                  formatter: identityFormatter
+              },
+              {
+                  id: 'membersGroups',
+                  name: '&nbsp;',
+                  sortable: true,
+                  defaultSortAsc: false,
+                  resizable: true,
+                  formatter: membersGroupsFormatter
+              },
+              {
+                  id: 'actions',
+                  name: '&nbsp;',
+                  sortable: false,
+                  resizable: false,
+                  formatter: actionFormatter,
+                  width: 100,
+                  maxWidth: 100
+              }
+            ];
+    
+            var usersOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false
+            };
+    
+            // initialize the dataview
+            var usersData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            usersData.setItems([]);
+            usersData.setFilterArgs({
+                searchString: getFilterText(),
+                property: $('#users-filter-type').combo('getSelectedOption').value
+            });
+            usersData.setFilter(filter);
+    
+            // initialize the sort
+          userSort({
+                columnId: 'identity',
+                sortAsc: true
+            }, usersData);
+    
+            // initialize the grid
+            var usersGrid = new Slick.Grid('#users-table', usersData, usersColumns, usersOptions);
+            usersGrid.setSelectionModel(new Slick.RowSelectionModel());
+            usersGrid.registerPlugin(new Slick.AutoTooltips());
+            usersGrid.setSortColumn('identity', true);
+            usersGrid.onSort.subscribe(function (e, args) {
+              userSort({
+                    columnId: args.sortCol.id,
+                    sortAsc: args.sortAsc
+                }, usersData);
+            });
+    
+            // configure a click listener
+            usersGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = usersData.getItem(args.row);
+    
+                // determine the desired action
+                if (usersGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('edit-user')) {
+                        editUser(item);
+                  } else if (target.hasClass('view-user-policies')) {
+                      viewUserPolicies(item);
+                    } else if (target.hasClass('delete-user')) {
+                        deleteUser(item);
                     }
                 }
-            }
-
-            return markup;
-        };
-
-        // function for formatting the action column
-        var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-            var markup = '';
-
-            if (dataContext.permissions.canRead === true) {
-                markup += dataContext.component.action;
-            }
-
-            return markup;
-        };
-
-        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
-            }
-        ];
-
-        // add the actions if we're in the shell
-        if (top !== window) {
-            userPoliciesColumns.push({
-                id: 'actions',
-                name: '&nbsp;',
-                sortable: false,
-                resizable: false,
-                formatter: actionsFormatter,
-                width: 25
             });
-        }
-
-        var userPoliciesOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false
+    
+            // wire up the dataview to the grid
+            usersData.onRowCountChanged.subscribe(function (e, args) {
+                usersGrid.updateRowCount();
+                usersGrid.render();
+    
+                // update the total number of displayed processors
+                $('#displayed-users').text(args.current);
+            });
+            usersData.onRowsChanged.subscribe(function (e, args) {
+                usersGrid.invalidateRows(args.rows);
+                usersGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#users-table').data('gridInstance', usersGrid);
+    
+            // initialize the number of displayed items
+            $('#displayed-users').text('0');
         };
-
-        // initialize the dataview
-        var userPoliciesData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        userPoliciesData.setItems([]);
-
-        // initialize the sort
-        userPolicySort({
-            columnId: 'policy',
-            sortAsc: true
-        }, userPoliciesData);
-
-        // initialize the grid
-        var userPoliciesGrid = new Slick.Grid('#user-policies-table', userPoliciesData, userPoliciesColumns, userPoliciesOptions);
-        userPoliciesGrid.setSelectionModel(new Slick.RowSelectionModel());
-        userPoliciesGrid.registerPlugin(new Slick.AutoTooltips());
-        userPoliciesGrid.setSortColumn('policy', true);
-        userPoliciesGrid.onSort.subscribe(function (e, args) {
-            userPolicySort({
-                columnId: args.sortCol.id,
-                sortAsc: args.sortAsc
-            }, userPoliciesData);
-        });
-
-        // configure a click listener
-        userPoliciesGrid.onClick.subscribe(function (e, args) {
-            var target = $(e.target);
-
-            // get the node at this row
-            var item = userPoliciesData.getItem(args.row);
-
-            // determine the desired action
-            if (userPoliciesGrid.getColumns()[args.cell].id === 'actions') {
-                if (target.hasClass('go-to-component')) {
-                    parent.$('body').trigger('GoTo:Component', {
-                        id: item.component.componentReference.id,
-                        parentGroupId: item.component.componentReference.parentGroupId
-                    });
-                    parent.$('#shell-close-button').click();
-                } else if (target.hasClass('go-to-process-group')) {
-                    parent.$('body').trigger('GoTo:ProcessGroup', {
-                        id: item.component.componentReference.id
-                    });
-                    parent.$('#shell-close-button').click();
+    
+        /**
+         * Sorts the specified data using the specified sort details.
+         *
+         * @param {object} sortDetails
+         * @param {object} data
+         */
+      var userSort = function (sortDetails, data) {
+            // defines a function for sorting
+            var comparer = function (a, b) {
+                if (a.permissions.canRead && b.permissions.canRead) {
+                  var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                  var bString = nfCommon.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) {
+                      return 0;
+                  }
+                  if (a.permissions.canRead) {
+                      return 1;
+                  } else {
+                      return -1;
+                  }
+              }
+          };
+  
+          // perform the sort
+          data.sort(comparer, sortDetails.sortAsc);
+      };
+  
+      /**
+       * Sorts the specified data using the specified sort details.
+       *
+       * @param {object} sortDetails
+       * @param {object} data
+       */
+      var userPolicySort = function (sortDetails, data) {
+          // defines a function for sorting
+          var comparer = function (a, b) {
+              if (a.permissions.canRead && b.permissions.canRead) {
+                  if (sortDetails.columnId === 'action') {
+                      var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                      var bString = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                      return aString === bString ? 0 : aString > bString ? 1 : -1;
+                  } else if (sortDetails.columnId === 'policy') {
+                      var aString = '';
+                      var bString = '';
+  
+                      // if the user has permission to the policy
+                      if (a.permissions.canRead === true) {
+                          // check if Global policy
+                          if (nfCommon.isUndefinedOrNull(a.component.componentReference)) {
+                              aString = globalResourceParser(a);
+                          } else {
+                              // not a global policy... check if user has access to the component reference
+                              aString = componentResourceParser(a);
+                          }
+                      } else {
+                          aString = a.id;
+                      }
+  
+                      // if the user has permission to the policy
+                      if (b.permissions.canRead === true) {
+                          // check if Global policy
+                          if (nfCommon.isUndefinedOrNull(b.component.componentReference)) {
+                              bString = globalResourceParser(b);
+                          } else {
+                              // not a global policy... check if user has access to the component reference
+                              bString = componentResourceParser(b);
+                          }
+                      } else {
+                          bString = b.id;
+                      }
+  
+                      return aString === bString ? 0 : aString > bString ? 1 : -1;
+                  }
+                } else {
+                    if (!a.permissions.canRead && !b.permissions.canRead) {
+                        return 0;
+                    }
+                    if (a.permissions.canRead) {
+                        return 1;
+                    } else {
+                        return -1;
+                    }
                 }
-            }
-        });
-
-        // wire up the dataview to the grid
-        userPoliciesData.onRowCountChanged.subscribe(function (e, args) {
-            userPoliciesGrid.updateRowCount();
-            userPoliciesGrid.render();
-        });
-        userPoliciesData.onRowsChanged.subscribe(function (e, args) {
-            userPoliciesGrid.invalidateRows(args.rows);
-            userPoliciesGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#user-policies-table').data('gridInstance', userPoliciesGrid);
-    };
-
-    /**
-     * Initializes the processor list.
-     */
-    var initUsersTable = function () {
-        // define the function for filtering the list
-        $('#users-filter').keyup(function () {
-            applyFilter();
-        });
-
-        // filter type
-        $('#users-filter-type').combo({
-            options: [{
-                text: 'by user',
-                value: 'identity'
-            }],
-            select: function (option) {
-                applyFilter();
-            }
-        });
-
-        // function for formatting the user identity
-        var identityFormatter = function (row, cell, value, columnDef, dataContext) {
-            var markup = '';
-            if (dataContext.type === 'group') {
-                markup += '<div class="fa fa-users" style="margin-right: 5px;"></div>';
-            }
-
-            markup += dataContext.component.identity;
-
-            return markup;
+            };
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
         };
-
-        // function for formatting the members/groups
-        var membersGroupsFormatter = function (row, cell, value, columnDef, dataContext) {
-            if (dataContext.type === 'group') {
-                return 'Members: <b>' + dataContext.component.users.map(function (user) {
-                        return user.component.identity;
-                    }).join('</b>, <b>') + '</b>';
-            } else {
-                return 'Member of: <b>' + dataContext.component.userGroups.map(function (group) {
-                        return group.component.identity;
-                    }).join('</b>, <b>') + '</b>';
-            }
+    
+        /**
+         * 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 $('#users-filter').val();
         };
-
-        // function for formatting the actions column
-        var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-            var markup = '';
-
-            // ensure user can modify the user
-            if (nfCommon.canModifyTenants()) {
-                markup += '<div title="Edit" class="pointer edit-user fa fa-pencil" style="margin-right: 3px;"></div>';
-                markup += '<div title="Remove" class="pointer delete-user fa fa-trash"></div>';
-            }
-
-            if (!nfCommon.isEmpty(dataContext.component.accessPolicies)) {
-                markup += '<div title="View User Policies" class="pointer view-user-policies fa fa-key" style="margin-left: 3px;"></div>';
+    
+        /**
+         * Applies the filter found in the filter expression text field.
+         */
+        var applyFilter = function () {
+            // get the dataview
+            var usersGrid = $('#users-table').data('gridInstance');
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(usersGrid)) {
+                var usersData = usersGrid.getData();
+    
+                // update the search criteria
+                usersData.setFilterArgs({
+                    searchString: getFilterText(),
+                    property: $('#users-filter-type').combo('getSelectedOption').value
+                });
+                usersData.refresh();
             }
-
-            return markup;
         };
-
-        // initialize the templates table
-        var usersColumns = [
-            {
-                id: 'identity',
-                name: 'User',
-                sortable: true,
-                resizable: true,
-                formatter: identityFormatter
-            },
-            {
-                id: 'membersGroups',
-                name: '&nbsp;',
-                sortable: true,
-                defaultSortAsc: false,
-                resizable: true,
-                formatter: membersGroupsFormatter
-            },
-            {
-                id: 'actions',
-                name: '&nbsp;',
-                sortable: false,
-                resizable: false,
-                formatter: actionFormatter,
-                width: 100,
-                maxWidth: 100
+    
+        /**
+         * Performs the filtering.
+         *
+         * @param {object} item     The item subject to filtering
+         * @param {object} args     Filter arguments
+         * @returns {Boolean}       Whether or not to include the item
+         */
+        var filter = function (item, args) {
+            if (args.searchString === '') {
+                return true;
             }
-        ];
-
-        var usersOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false
-        };
-
-        // initialize the dataview
-        var usersData = new Slick.Data.DataView({
-            inlineFilters: false
-        });
-        usersData.setItems([]);
-        usersData.setFilterArgs({
-            searchString: getFilterText(),
-            property: $('#users-filter-type').combo('getSelectedOption').value
-        });
-        usersData.setFilter(filter);
-
-        // initialize the sort
-        userSort({
-            columnId: 'identity',
-            sortAsc: true
-        }, usersData);
-
-        // initialize the grid
-        var usersGrid = new Slick.Grid('#users-table', usersData, usersColumns, usersOptions);
-        usersGrid.setSelectionModel(new Slick.RowSelectionModel());
-        usersGrid.registerPlugin(new Slick.AutoTooltips());
-        usersGrid.setSortColumn('identity', true);
-        usersGrid.onSort.subscribe(function (e, args) {
-            userSort({
-                columnId: args.sortCol.id,
-                sortAsc: args.sortAsc
-            }, usersData);
-        });
-
-        // configure a click listener
-        usersGrid.onClick.subscribe(function (e, args) {
-            var target = $(e.target);
-
-            // get the node at this row
-            var item = usersData.getItem(args.row);
-
-            // determine the desired action
-            if (usersGrid.getColumns()[args.cell].id === 'actions') {
-                if (target.hasClass('edit-user')) {
-                    editUser(item);
-                } else if (target.hasClass('view-user-policies')) {
-                    viewUserPolicies(item);
-                } else if (target.hasClass('delete-user')) {
-                    deleteUser(item);
-                }
-            }
-        });
-
-        // wire up the dataview to the grid
-        usersData.onRowCountChanged.subscribe(function (e, args) {
-            usersGrid.updateRowCount();
-            usersGrid.render();
-
-            // update the total number of displayed processors
-            $('#displayed-users').text(args.current);
-        });
-        usersData.onRowsChanged.subscribe(function (e, args) {
-            usersGrid.invalidateRows(args.rows);
-            usersGrid.render();
-        });
-
-        // hold onto an instance of the grid
-        $('#users-table').data('gridInstance', usersGrid);
-
-        // initialize the number of displayed items
-        $('#displayed-users').text('0');
-    };
-
-    /**
-     * Sorts the specified data using the specified sort details.
-     *
-     * @param {object} sortDetails
-     * @param {object} data
-     */
-    var userSort = function (sortDetails, data) {
-        // defines a function for sorting
-        var comparer = function (a, b) {
-            if (a.permissions.canRead && b.permissions.canRead) {
-                var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-                var bString = nfCommon.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) {
-                    return 0;
-                }
-                if (a.permissions.canRead) {
-                    return 1;
-                } else {
-                    return -1;
-                }
+    
+            try {
+                // perform the row filtering
+                var filterExp = new RegExp(args.searchString, 'i');
+            } catch (e) {
+                // invalid regex
+                return false;
             }
+    
+            return item.component[args.property].search(filterExp) >= 0;
         };
-
-        // perform the sort
-        data.sort(comparer, sortDetails.sortAsc);
-    };
-
-    /**
-     * Sorts the specified data using the specified sort details.
-     *
-     * @param {object} sortDetails
-     * @param {object} data
-     */
-    var userPolicySort = function (sortDetails, data) {
-        // defines a function for sorting
-        var comparer = function (a, b) {
-            if (a.permissions.canRead && b.permissions.canRead) {
-                if (sortDetails.columnId === 'action') {
-                    var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-                    var bString = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
-                    return aString === bString ? 0 : aString > bString ? 1 : -1;
-                } else if (sortDetails.columnId === 'policy') {
-                    var aString = '';
-                    var bString = '';
-
-                    // if the user has permission to the policy
-                    if (a.permissions.canRead === true) {
-                        // check if Global policy
-                        if (nfCommon.isUndefinedOrNull(a.component.componentReference)) {
-                            aString = globalResourceParser(a);
-                        } else {
-                            // not a global policy... check if user has access to the component reference
-                            aString = componentResourceParser(a);
-                        }
-                    } else {
-                        aString = a.id;
-                    }
-
-                    // if the user has permission to the policy
-                    if (b.permissions.canRead === true) {
-                        // check if Global policy
-                        if (nfCommon.isUndefinedOrNull(b.component.componentReference)) {
-                            bString = globalResourceParser(b);
-                        } else {
-                            // not a global policy... check if user has access to the component reference
-                            bString = componentResourceParser(b);
-                        }
-                    } else {
-                        bString = b.id;
+    
+        /**
+         * Builds a listing a users.
+         */
+        var buildUsersList = function () {
+            var usersGrid = $('#users-table').data('gridInstance');
+            var usersData = usersGrid.getData();
+            var usersList = $('#available-users');
+    
+            // add a row for each user
+            var count = 0;
+            $.each(usersData.getItems(), function (_, user) {
+                if (user.type === 'user') {
+                    // checkbox
+                    var checkbox = $('<div class="user-check nf-checkbox checkbox-unchecked"></div>').addClass('group-user-' + user.id);
+    
+                    // user id
+                    var userId = $('<span class="user-id hidden"></span>').text(user.id);
+    
+                    // identity
+                  var identity = $('<div class="available-identities nf-checkbox-label"></div>').text(user.component.identity);
+    
+                    // clear
+                    var clear = $('<div class="clear"></div>');
+    
+                    // list item
+                    var li = $('<li></li>').append(checkbox).append(userId).append(identity).append(clear).appendTo(usersList);
+                    if (count++ % 2 === 0) {
+                        li.addClass('even');
                     }
-
-                    return aString === bString ? 0 : aString > bString ? 1 : -1;
-                }
-            } else {
-                if (!a.permissions.canRead && !b.permissions.canRead) {
-                    return 0;
-                }
-                if (a.permissions.canRead) {
-                    return 1;
-                } else {
-                    return -1;
                 }
-            }
+            });
         };
-
-        // perform the sort
-        data.sort(comparer, sortDetails.sortAsc);
-    };
-
-    /**
-     * Get the text out of the filter field. If the filter field doesn't
-     * have any text it will contain the text 'filter list' so this method
-     * accounts for that.
-     */
-    var getFilterText = function () {
-        return $('#users-filter').val();
-    };
-
-    /**
-     * Applies the filter found in the filter expression text field.
-     */
-    var applyFilter = function () {
-        // get the dataview
-        var usersGrid = $('#users-table').data('gridInstance');
-
-        // ensure the grid has been initialized
-        if (nfCommon.isDefinedAndNotNull(usersGrid)) {
+    
+        /**
+         * Builds a listing a users.
+         */
+        var buildGroupsList = function () {
+            var usersGrid = $('#users-table').data('gridInstance');
             var usersData = usersGrid.getData();
-
-            // update the search criteria
-            usersData.setFilterArgs({
-                searchString: getFilterText(),
-                property: $('#users-filter-type').combo('getSelectedOption').value
-            });
-            usersData.refresh();
-        }
-    };
-
-    /**
-     * Performs the filtering.
-     *
-     * @param {object} item     The item subject to filtering
-     * @param {object} args     Filter arguments
-     * @returns {Boolean}       Whether or not to include the item
-     */
-    var filter = function (item, args) {
-        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.component[args.property].search(filterExp) >= 0;
-    };
-
-    /**
-     * Builds a listing a users.
-     */
-    var buildUsersList = function () {
-        var usersGrid = $('#users-table').data('gridInstance');
-        var usersData = usersGrid.getData();
-        var usersList = $('#available-users');
-
-        // add a row for each user
-        var count = 0;
-        $.each(usersData.getItems(), function (_, user) {
-            if (user.type === 'user') {
-                // checkbox
-                var checkbox = $('<div class="user-check nf-checkbox checkbox-unchecked"></div>').addClass('group-user-' + user.id);
-
-                // user id
-                var userId = $('<span class="user-id hidden"></span>').text(user.id);
-
-                // identity
-                var identity = $('<div class="available-identities nf-checkbox-label"></div>').text(user.component.identity);
-
-                // clear
-                var clear = $('<div class="clear"></div>');
-
-                // list item
-                var li = $('<li></li>').append(checkbox).append(userId).append(identity).append(clear).appendTo(usersList);
-                if (count++ % 2 === 0) {
-                    li.addClass('even');
-                }
-            }
-        });
-    };
-
-    /**
-     * Builds a listing a users.
-     */
-    var buildGroupsList = function () {
-        var usersGrid = $('#users-table').data('gridInstance');
-        var usersData = usersGrid.getData();
-        var groupsList = $('#available-groups');
-
-        // add a row for each user
-        var count = 0;
-        $.each(usersData.getItems(), function (_, group) {
-            if (group.type === 'group') {
-                // checkbox
-                var checkbox = $('<div class="group-check nf-checkbox checkbox-unchecked"></div>').addClass('user-group-' + group.id);
-
-                // group id
-                var groupId = $('<span class="group-id hidden"></span>').text(group.id);
-
-                // icon
-                var groupIcon = $('<div class="fa fa-users nf-checkbox-label" style="margin-top: 6px;"></div>');
-
-                // identity
-                var identity = $('<div class="available-identities nf-checkbox-label"></div>').text(group.component.identity);
-
-                // clear
-                var clear = $('<div class="clear"></div>');
-
-                // list item
-                var li = $('<li></li>').append(checkbox).append(groupId).append(groupIcon).append(identity).append(clear).appendTo(groupsList);
-                if (count++ % 2 === 0) {
-                    li.addClass('even');
+            var groupsList = $('#available-groups');
+    
+            // add a row for each user
+            var count = 0;
+            $.each(usersData.getItems(), function (_, group) {
+                if (group.type === 'group') {
+                    // checkbox
+                    var checkbox = $('<div class="group-check nf-checkbox checkbox-unchecked"></div>').addClass('user-group-' + group.id);
+    
+                    // group id
+                    var groupId = $('<span class="group-id hidden"></span>').text(group.id);
+    
+                    // icon
+                  var groupIcon = $('<div class="fa fa-users nf-checkbox-label" style="margin-top: 6px;"></div>');
+    
+                    // identity
+                  var identity = $('<div class="available-identities nf-checkbox-label"></div>').text(group.component.identity);
+    
+                    // clear
+                    var clear = $('<div class="clear"></div>');
+    
+                    // list item
+                    var li = $('<li></li>').append(checkbox).append(groupId).append(groupIcon).append(identity).append(clear).appendTo(groupsList);
+                    if (count++ % 2 === 0) {
+                        li.addClass('even');
+                    }
                 }
-            }
-        });
-    };
-
-    /**
-     * Edit's the specified user's account.
-     *
-     * @argument {object} user        The user item
-     */
-    var editUser = function (user) {
-        // populate the users info
-        $('#user-id-edit-dialog').text(user.id);
-        $('#user-identity-edit-dialog').val(user.component.identity);
-
-        if (user.type === 'user') {
-            $('#individual-radio-button').prop('checked', true);
-            $('#user-groups').show();
-            $('#group-members').hide();
-
-            // list all the groups currently in the table
-            buildGroupsList();
-
-            // select each group this user belongs to
-            $.each(user.component.userGroups, function (_, userGroup) {
-                $('div.group-check.user-group-' + userGroup.id).removeClass('checkbox-unchecked').addClass('checkbox-checked');
             });
-        } else {
-            $('#group-radio-button').prop('checked', true);
-            $('#user-groups').hide();
-            $('#group-members').show();
-
-            // list all the users currently in the table
-            buildUsersList();
-
-            // select each user that belongs to this group
-            $.each(user.component.users, function (_, member) {
-                $('div.user-check.group-user-' + member.id).removeClass('checkbox-unchecked').addClass('checkbox-checked');
-            });
-        }
-
-        // disable the type radio
-        $('#user-dialog input[name="userOrGroup"]').attr('disabled', true);
-
-        // show the dialog
-        $('#user-dialog').modal('show');
-    };
-
-    /**
-     * Delete's the specified user's account.
-     *
-     * @argument {object} user        The user item
-     */
-    var deleteUser = function (user) {
-        // populate the users info
-        $('#user-id-delete-dialog').val(user.id);
-        $('#user-identity-delete-dialog').text(user.component.identity);
-
-        // show the dialog
-        $('#user-delete-dialog').modal('show');
-    };
-
-    /**
-     * Open's a view of the specified user's policies.
-     *
-     * @argument {object} user        The user item
-     */
-    var viewUserPolicies = function (user) {
-        var userPoliciesGrid = $('#user-policies-table').data('gridInstance');
-        var userPoliciesData = userPoliciesGrid.getData();
-
-        // begin the update
-        userPoliciesData.beginUpdate();
-
-        // set the rows
-        if (nfCommon.isDefinedAndNotNull(user.component.accessPolicies)) {
-            userPoliciesData.setItems(user.component.accessPolicies);
-        }
-
-        $('#policies-dialog-user-name').text(user.component.identity);
-
-        // end the update
-        userPoliciesData.endUpdate();
-
-        // re-sort and clear selection after updating
-        userPoliciesData.reSort();
-        userPoliciesGrid.invalidate();
-        userPoliciesGrid.getSelectionModel().setSelectedRows([]);
-
-        // show the dialog
-        $('#user-policies-dialog').modal('show');
-        userPoliciesGrid.resizeCanvas();
-    };
-
-    var nfUsersTable = {
-        init: function () {
-            initUserDialog();
-            initUserPoliciesDialog();
-            initUserPoliciesTable();
-            initUserDeleteDialog();
-            initUsersTable();
-
-            if (nfCommon.canModifyTenants()) {
-                $('#new-user-button').on('click', function () {
-                    buildUsersList();
-                    buildGroupsList();
-
-                    // show the dialog
-                    $('#user-dialog').modal('show');
-
-                    // set the focus automatically, only when adding a new user
-                    $('#user-identity-edit-dialog').focus();
+        };
+    
+        /**
+         * Edit's the specified user's account.
+         *
+         * @argument {object} user        The user item
+         */
+        var editUser = function (user) {
+            // populate the users info
+            $('#user-id-edit-dialog').text(user.id);
+            $('#user-identity-edit-dialog').val(user.component.identity);
+    
+            if (user.type === 'user') {
+                $('#individual-radio-button').prop('checked', true);
+                $('#user-groups').show();
+                $('#group-members').hide();
+    
+                // list all the groups currently in the table
+                buildGroupsList();
+    
+                // select each group this user belongs to
+                $.each(user.component.userGroups, function (_, userGroup) {
+                    $('div.group-check.user-group-' + userGroup.id).removeClass('checkbox-unchecked').addClass('checkbox-checked');
                 });
-
-                $('#new-user-button').prop('disabled', false);
             } else {
-                $('#new-user-button').prop('disabled', true);
+                $('#group-radio-button').prop('checked', true);
+                $('#user-groups').hide();
+                $('#group-members').show();
+    
+                // list all the users currently in the table
+                buildUsersList();
+    
+                // select each user that belongs to this group
+                $.each(user.component.users, function (_, member) {
+                    $('div.user-check.group-user-' + member.id).removeClass('checkbox-unchecked').addClass('checkbox-checked');
+                });
             }
-        },
-
+    
+            // disable the type radio
+            $('#user-dialog input[name="userOrGroup"]').attr('disabled', true);
+    
+            // show the dialog
+            $('#user-dialog').modal('show');
+        };
+    
         /**
-         * Update the size of the grid based on its container's current size.
+         * Delete's the specified user's account.
+         *
+         * @argument {object} user        The user item
          */
-        resetTableSize: function () {
-            var usersTable = $('#users-table');
-            if (usersTable.is(':visible')) {
-                var grid = usersTable.data('gridInstance');
-                if (nfCommon.isDefinedAndNotNull(grid)) {
-                    grid.resizeCanvas();
+        var deleteUser = function (user) {
+            // populate the users info
+            $('#user-id-delete-dialog').val(user.id);
+            $('#user-identity-delete-dialog').text(user.component.identity);
+    
+            // show the dialog
+            $('#user-delete-dialog').modal('show');
+        };
+    
+      /**
+       * Open's a view of the specified user's policies.
+       *
+       * @argument {object} user        The user item
+       */
+      var viewUserPolicies = function (user) {
+          var userPoliciesGrid = $('#user-policies-table').data('gridInstance');
+          var userPoliciesData = userPoliciesGrid.getData();
+  
+          // begin the update
+          userPoliciesData.beginUpdate();
+  
+          // set the rows
+          if (nfCommon.isDefinedAndNotNull(user.component.accessPolicies)) {
+              userPoliciesData.setItems(user.component.accessPolicies);
+          }
+  
+          $('#policies-dialog-user-name').text(user.component.identity);
+  
+          // end the update
+          userPoliciesData.endUpdate();
+  
+          // re-sort and clear selection after updating
+          userPoliciesData.reSort();
+          userPoliciesGrid.invalidate();
+          userPoliciesGrid.getSelectionModel().setSelectedRows([]);
+  
+          // show the dialog
+          $('#user-policies-dialog').modal('show');
+          userPoliciesGrid.resizeCanvas();
+      };
+  
+      var nfUsersTable = {
+            init: function () {
+                initUserDialog();
+              initUserPoliciesDialog();
+              initUserPoliciesTable();
+                initUserDeleteDialog();
+                initUsersTable();
+    
+              if (nfCommon.canModifyTenants()) {
+                    $('#new-user-button').on('click', function () {
+                        buildUsersList();
+                        buildGroupsList();
+    
+                      // show the dialog
+                        $('#user-dialog').modal('show');
+    
+                      // set the focus automatically, only when adding a new user
+                      $('#user-identity-edit-dialog').focus();
+                    });
+    
+                    $('#new-user-button').prop('disabled', false);
+                } else {
+                    $('#new-user-button').prop('disabled', true);
                 }
-            }
-        },
-
-        /**
-         * Load the users table.
-         */
-        loadUsersTable: function () {
-            var users = $.ajax({
-                type: 'GET',
-                url: config.urls.users,
-                dataType: 'json'
-            });
-
-            var groups = $.ajax({
-                type: 'GET',
-                url: config.urls.userGroups,
-                dataType: 'json'
-            });
-
-            return $.when(users, groups).done(function (usersResults, groupsResults) {
-                var usersResponse = usersResults[0];
-                var groupsResponse = groupsResults[0];
-
-                // update the refresh timestamp
-                $('#users-last-refreshed').text(usersResponse.generated);
-
-                var usersGrid = $('#users-table').data('gridInstance');
-                var usersData = usersGrid.getData();
-
-                // begin the update
-                usersData.beginUpdate();
-
-                var users = [];
-
-                // add each user
-                $.each(usersResponse.users, function (_, user) {
-                    users.push($.extend({
-                        type: 'user'
-                    }, user));
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+                var usersTable = $('#users-table');
+                if (usersTable.is(':visible')) {
+                    var grid = usersTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(grid)) {
+                        grid.resizeCanvas();
+                    }
+                }
+            },
+    
+            /**
+           * Load the users table.
+             */
+            loadUsersTable: function () {
+                var users = $.ajax({
+                    type: 'GET',
+                    url: config.urls.users,
+                    dataType: 'json'
                 });
-
-                // add each group
-                $.each(groupsResponse.userGroups, function (_, group) {
-                    users.push($.extend({
-                        type: 'group'
-                    }, group));
+    
+                var groups = $.ajax({
+                    type: 'GET',
+                    url: config.urls.userGroups,
+                    dataType: 'json'
                 });
-
-                // set the rows
-                usersData.setItems(users);
-
-                // end the update
-                usersData.endUpdate();
-
-                // re-sort and clear selection after updating
-                usersData.reSort();
-                usersGrid.invalidate();
-                usersGrid.getSelectionModel().setSelectedRows([]);
-
-                $('#total-users').text(usersData.getLength());
-            }).fail(nfErrorHandler.handleAjaxError);
-        }
-    };
-
-    return nfUsersTable;
-}));
\ No newline at end of file
+    
+                return $.when(users, groups).done(function (usersResults, groupsResults) {
+                    var usersResponse = usersResults[0];
+                    var groupsResponse = groupsResults[0];
+    
+                    // update the refresh timestamp
+                    $('#users-last-refreshed').text(usersResponse.generated);
+    
+                    var usersGrid = $('#users-table').data('gridInstance');
+                    var usersData = usersGrid.getData();
+    
+                    // begin the update
+                    usersData.beginUpdate();
+    
+                    var users = [];
+    
+                    // add each user
+                    $.each(usersResponse.users, function (_, user) {
+                        users.push($.extend({
+                            type: 'user'
+                        }, user));
+                    });
+    
+                    // add each group
+                    $.each(groupsResponse.userGroups, function (_, group) {
+                        users.push($.extend({
+                            type: 'group'
+                        }, group));
+                    });
+    
+                    // set the rows
+                    usersData.setItems(users);
+    
+                    // end the update
+                    usersData.endUpdate();
+    
+                    // re-sort and clear selection after updating
+                    usersData.reSort();
+                    usersGrid.invalidate();
+                    usersGrid.getSelectionModel().setSelectedRows([]);
+    
+                    $('#total-users').text(usersData.getLength());
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+    
+      return nfUsersTable;
+  }));
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 e39e160c08cc..125e95f035b7 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
@@ -1,208 +1,208 @@
-/*
- * 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 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 ($, nfCommon, nfUsersTable, nfErrorHandler, nfStorage, nfClient) {
-                return (nf.Users = factory($, nfCommon, nfUsersTable, nfErrorHandler, nfStorage, nfClient));
-            });
-    } 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 ($, nfCommon, nfUsersTable, nfErrorHandler, nfStorage, nfClient) {
-    'use strict';
-
-    $(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.
-     */
-    var config = {
-        urls: {
-            banners: '../nifi-api/flow/banners',
-            controllerAbout: '../nifi-api/flow/about',
-            currentUser: '../nifi-api/flow/current-user'
-        }
-    };
-
-    /**
-     * Loads the current users authorities.
+    /*
+     * 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.
      */
-    var ensureAccess = function () {
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.currentUser,
-            dataType: 'json'
-        }).done(function (currentUser) {
-            nfCommon.setCurrentUser(currentUser);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    var initializeUsersPage = function () {
-        // define mouse over event for the refresh button
-        nfCommon.addHoverEffect('#user-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () {
-            nfUsersTable.loadUsersTable();
-        });
-
-        // get the banners if we're not in the shell
-        return $.Deferred(function (deferred) {
+    
+  /* global 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 ($, nfCommon, nfUsersTable, nfErrorHandler, nfStorage, nfClient) {
+                  return (nf.Users = factory($, nfCommon, nfUsersTable, nfErrorHandler, nfStorage, nfClient));
+              });
+      } 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 ($, nfCommon, nfUsersTable, nfErrorHandler, nfStorage, nfClient) {
+      'use strict';
+  
+        $(document).ready(function () {
+            // initialize the counters page
+          nfUsers.init();
+    
+            //alter styles if we're not in the shell
             if (top === window) {
-                $.ajax({
-                    type: 'GET',
-                    url: config.urls.banners,
-                    dataType: 'json'
-                }).done(function (bannerResponse) {
-                    // ensure the banners response is specified
-                    if (nfCommon.isDefinedAndNotNull(bannerResponse.banners)) {
-                        if (nfCommon.isDefinedAndNotNull(bannerResponse.banners.headerText) && bannerResponse.banners.headerText !== '') {
-                            // update the header text
-                            var bannerHeader = $('#banner-header').text(bannerResponse.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('users');
-                        }
-
-                        if (nfCommon.isDefinedAndNotNull(bannerResponse.banners.footerText) && bannerResponse.banners.footerText !== '') {
-                            // update the footer text and show it
-                            var bannerFooter = $('#banner-footer').text(bannerResponse.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('users');
-                        }
-                    }
-
-                    deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    nfErrorHandler.handleAjaxError(xhr, status, error);
-                    deferred.reject();
-                });
-            } else {
-                deferred.resolve();
+                $('#users').css('top', 20);
+                $('#users-refresh-container').css('bottom', 20);
             }
         });
-    };
-
-    var nfUsers = {
+    
         /**
-         * Initializes the counters page.
+         * Configuration object used to hold a number of configuration items.
          */
-        init: function () {
-            nfStorage.init();
-
-            // initialize the client
-            nfClient.init();
-
-            // load the users authorities
-            ensureAccess().done(function () {
-                // create the counters table
-                nfUsersTable.init();
-
-                // load the users table
-                nfUsersTable.loadUsersTable().done(function () {
-                    // finish initializing users page
-                    initializeUsersPage().done(function () {
-                        // listen for browser resize events to update the page size
-                        $(window).resize(nfUsersTable.resetTableSize);
-
-                        // configure the initial grid height
-                        nfUsersTable.resetTableSize();
-
-                        // get the about details
-                        $.ajax({
-                            type: 'GET',
-                            url: config.urls.controllerAbout,
-                            dataType: 'json'
-                        }).done(function (response) {
-                            var aboutDetails = response.about;
-                            var countersTitle = aboutDetails.title + ' Users';
-
-                            // set the document title and the about title
-                            document.title = countersTitle;
-                            $('#users-header-text').text(countersTitle);
-                        }).fail(nfErrorHandler.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) {
-                                    dialog.modal('resize');
-                                }, 50, $(dialogs[i]));
+        var config = {
+            urls: {
+                banners: '../nifi-api/flow/banners',
+                controllerAbout: '../nifi-api/flow/about',
+                currentUser: '../nifi-api/flow/current-user'
+            }
+        };
+    
+        /**
+         * Loads the current users authorities.
+         */
+        var ensureAccess = function () {
+            return $.ajax({
+                type: 'GET',
+                url: config.urls.currentUser,
+                dataType: 'json'
+            }).done(function (currentUser) {
+              nfCommon.setCurrentUser(currentUser);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        var initializeUsersPage = function () {
+            // define mouse over event for the refresh button
+          nfCommon.addHoverEffect('#user-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () {
+              nfUsersTable.loadUsersTable();
+            });
+    
+            // get the banners if we're not in the shell
+            return $.Deferred(function (deferred) {
+                if (top === window) {
+                    $.ajax({
+                        type: 'GET',
+                        url: config.urls.banners,
+                        dataType: 'json'
+                    }).done(function (bannerResponse) {
+                        // ensure the banners response is specified
+                      if (nfCommon.isDefinedAndNotNull(bannerResponse.banners)) {
+                          if (nfCommon.isDefinedAndNotNull(bannerResponse.banners.headerText) && bannerResponse.banners.headerText !== '') {
+                                // update the header text
+                                var bannerHeader = $('#banner-header').text(bannerResponse.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('users');
                             }
-                        }
-
-                        // 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]));
+    
+                          if (nfCommon.isDefinedAndNotNull(bannerResponse.banners.footerText) && bannerResponse.banners.footerText !== '') {
+                                // update the footer text and show it
+                                var bannerFooter = $('#banner-footer').text(bannerResponse.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('users');
                             }
                         }
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                      nfErrorHandler.handleAjaxError(xhr, status, error);
+                        deferred.reject();
                     });
-                });
+                } else {
+                    deferred.resolve();
+                }
             });
-        }
-    };
-
-    return nfUsers;
-}));
\ No newline at end of file
+        };
+    
+      var nfUsers = {
+            /**
+             * Initializes the counters page.
+             */
+            init: function () {
+              nfStorage.init();
+    
+                // initialize the client
+              nfClient.init();
+    
+                // load the users authorities
+                ensureAccess().done(function () {
+                    // create the counters table
+                  nfUsersTable.init();
+    
+                    // load the users table
+                  nfUsersTable.loadUsersTable().done(function () {
+                        // finish initializing users page
+                        initializeUsersPage().done(function () {
+                            // listen for browser resize events to update the page size
+                          $(window).resize(nfUsersTable.resetTableSize);
+    
+                            // configure the initial grid height
+                          nfUsersTable.resetTableSize();
+    
+                            // get the about details
+                            $.ajax({
+                                type: 'GET',
+                                url: config.urls.controllerAbout,
+                                dataType: 'json'
+                            }).done(function (response) {
+                                var aboutDetails = response.about;
+                              var countersTitle = nf._.msg('nf-about')+ nf._.msg('nf-users.Users');
+  
+                                // set the document title and the about title
+                                document.title = countersTitle;
+                                $('#users-header-text').text(countersTitle);
+                          }).fail(nfErrorHandler.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) {
+                                      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]));
+                              }
+                          }
+                        });
+                    });
+                });
+            }
+        };
+    
+      return nfUsers;
+  }));

From 2da95e0d39d03bb0ba2596c0733071b4ceb86992 Mon Sep 17 00:00:00 2001
From: WangJian <1925432244@qq.com>
Date: Sun, 19 Mar 2017 10:13:53 +0800
Subject: [PATCH 04/13] Updated js directory to add *.js localized changes and
 add gloabalization directory

---
 .../webapp/js/nf/globalization/resources.js   | 1884 +++++++++++++++++
 .../js/nf/globalization/resources_jp.js       | 1522 +++++++++++++
 2 files changed, 3406 insertions(+)
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
new file mode 100644
index 000000000000..33019c747be2
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
@@ -0,0 +1,1884 @@
+
+nf._ = (function () {
+    var locale = "cn";
+    var cn = {
+    		"nf-actions.UpdateResource": "更新来源",
+            "nf-actions.Refreshing": "正在刷新",
+            "nf-actions.RemoteGroupProcess": "远程处理组",
+            "nf-actions.NoTargetURIDefined": "目标URI未定义.",
+            "nf-actions.Header1": "激活组件",
+            "nf-actions.Message1": "未选定合格的组件，请选择合格组件进行激活并保证组件当前未被运行.",
+            "nf-actions.Header2": "下线组件",
+            "nf-actions.Message2": "未选定合格的组件，请选择合格组件进行下线并保证组件当前未被运行.",
+            "nf-actions.Header3": "启动组件",
+            "nf-actions.Message3": "未选定合格的组件，请选择合格组件启动并组件当前未被运行.",
+            "nf-actions.Header4": "停止组件",
+            "nf-actions.Message4": "未选定合格的组件，请选择要停止的组件.",
+            "nf-actions.Header5": "重新加载",
+            "nf-actions.Message5": "未选定合格的组件，请选择要删除的组件.",
+            "nf-actions.Header6": "粘贴错误",
+            "nf-actions.EmptyQueue": "清空队列",
+            "nf-actions.Message6": "是否确定要清空队列？所有流文件将被移除.",
+            "nf-actions.Cancel": "取消",
+            "nf-actions.Empty": "空",
+            "nf-actions.Stop": "停止",
+            "nf-actions.Message7": " 被从队列里移除.",
+            "nf-actions.Message8": "没有流文件被移除.",
+            "nf-actions.Message9": "当前选择不能创建模版.",
+            "nf-actions.CreateTemplate": "创建模板",
+            "nf-actions.Create": "创建",
+            "nf-actions.Template": "模版 '",
+            "nf-actions.Message11": "' 成功创建.",
+            "nf-actions.Message12": "试图复制粘贴时发生错误.",
+            "nf-actions.Message13": "模板名称不能为空.",
+            "nf-actions.Message14": "删除请求百分比完成",
+            "nf-actions.Message15": "流文件",
+            "nf-actions.Message16": "在",
+            "nf-actions.Message17": "之外",
+            "nf-actions.Message18": "从队列中移除.",
+            "nf-actions.Message19": "没有引用组件.",
+            "nf-canvas-graph-controls-controller.ProcessGroup": "处理器组",
+            "nf-canvas-graph-controls-controller.Processor": "处理器",
+            "nf-canvas-graph-controls-controller.InputPort": "输入端口",
+            "nf-canvas-graph-controls-controller.OutputPort": "输出端口",
+            "nf-canvas-graph-controls-controller.RemoteProcessGroup": "远程进程组",
+            "nf-canvas-graph-controls-controller.Funnel": "漏斗",
+            "nf-canvas-graph-controls-controller.Label": "标签",
+            "nf-canvas-graph-controls-controller.Connection": "连接",
+            "nf-canvas-graph-controls-controller.MultipleSelected": "已选择多个",
+    		"nf-canvas-global-menu-controller.About": "关于数据流",
+    		"nf-canvas-global-menu-controller.OK": "确认",
+    		"nf-canvas-operate-controller.SUCCESS": "成功",
+    		"nf-canvas-operate-controller.SuccessContent": "模板成功导入.",
+    		"nf-canvas-operate-controller.Upload": "上传模板",
+    		"nf-canvas-operate-controller.ButtonUpload": "上传模板",
+    		"nf-canvas-operate-controller.UploadTemplate": "没有选定模板.请在浏览器中选择一个模板.",
+    		"nf-canvas-operate-controller.Cancel": "取消",
+    		"nf-canvas-operate-controller.ChangeColor": "改变颜色",
+    		"nf-canvas-operate-controller.Apply": "应用",
+    		"nf-canvas-operate-controller.Error": "错误",
+    		"nf-canvas-operate-controller.CreateTemplate": "创建模板",
+    		"nf-canvas-operate-controller.Message1": "无法导入模板. 请检查日志中的错误.",
+            "nf-canvas-flow-status.Processors": "处理器",
+            "nf-canvas-flow-status.ProcessGroups": "处理组",
+            "nf-canvas-flow-status-controller.Processors": "处理器",
+            "nf-canvas-flow-status-controller.ProcessGroups": "处理组",
+            "nf-canvas-flow-status-controller.RemoteProcessGroups": "远程处理组",
+            "nf-canvas-flow-status-controller.Connection": "连接",
+            "nf-canvas-flow-status-controller.InputPorts": "输入端口",
+            "nf-canvas-flow-status-controller.OutputPorts": "输出端口",
+            "nf-canvas-flow-status-controller.Funnel": "漏斗",
+            "nf-canvas-flow-status-controller.no-matches": "没有符合查询要求的结果",
+            "nf-canvas-toobbar.Start": "启动",
+            "nf-canvas-toobbar.Stop": "停止",
+            "nf-canvas-toobbar.Copy": "复制",
+            "nf-canvas-toobbar.Paste": "粘贴",
+            "nf-canvas-toobbar.Group": "组",
+            "nf-canvas-toobbar.Enable": "有效",
+            "nf-canvas-toobbar.Disable": "无效",
+            "nf-canvas-toobbar.CreateTemplate": "创建模版",
+            "nf-canvas-toobbar.ChangeColor": "改变颜色",
+            "nf-canvas-toobbar.Delete": "删除",        
+            "nf-canvas-header.OK": "确定",
+            "nf-canvas-header.CreateTemplate": "创建模版",
+            "nf-canvas-header.Fill": "填写",
+            "nf-canvas-header.Apply": "适用",
+            "nf-canvas-header.Cancel": "取消",
+    		"nf-group-component.AddProcessGroup": "添加处理组",
+    		"nf-group-component.Add": "添加",
+    		"nf-group-component.Cancel": "取消",
+    		"nf-input-port-component.AddPort": "添加端口",
+    		"nf-input-port-component.Add": "添加",
+    		"nf-input-port-component.Cancel": "取消",
+    		"nf-input-port-component.new-port-type": "输入",
+    		"nf-output-port-component.Add": "添加",
+    		"nf-output-port-component.Cancel": "取消",
+    		"nf-output-port-component.new-port-type": "输出",
+    		"nf-processor-component.AddProcessor": "添加处理器",
+    		"nf-processor-component.AddProcessorContent": "创建该类型的处理器必须被选择.",
+    		"nf-processor-component.Add": "添加",
+    		"nf-processor-component.Cancel": "取消",
+    		"nf-processor-component.Type": "类型",
+    		"nf-processor-component.Tags": "标签",
+    		"nf-processor-component.NoDescriptionSpecified": "未指定说明",
+    		"nf-remote-process-group-component.ConfigurationError": "配置错误",
+    		"nf-remote-process-group-component.AddRemoteProcessGroup": "添加远程处理组",
+    		"nf-remote-process-group-component.Add": "添加",
+    		"nf-remote-process-group-component.Cancel": "取消",
+    		"nf-template-component.AddTemplate": "添加模板",
+    		"nf-template-component.Add": "添加",
+    		"nf-template-component.Cancel": "取消",
+    		"nf-template-component.InstantiateTemplate": "实例化模板",
+    		"nf-template-component.InstantiateTemplateContent": "数据流中没有被加载的模板.",
+            "nf-canvas-header.Message": "不能刷新当前组.",
+            "nf-canvas-header.components.AddGroup": "添加处理组",
+            "nf-canvas-header.components.AddButton": "添加",
+            "nf-canvas-header.components.CancelButton": "取消",
+            "nf-canvas-toolbox.Input": "输入",
+            "nf-canvas-toolbox.OutPut": "输出",        
+            "nf-canvas-toolbox.Filter": "过滤器",
+            "nf-canvas-toolbox.Processor": "处理器",
+            "nf-canvas-toolbox.InputPort": "输入端口",
+            "nf-canvas-toolbox.OutputPort": "输出端口",
+            "nf-canvas-toolbox.ProcessGroup": "处理组",
+            "nf-canvas-toolbox.RemoteProcessGroup": "远程处理组",
+            "nf-canvas-toolbox.Connection": "连接",
+            "nf-canvas-toolbox.Funnel": "漏斗",
+            "nf-canvas-toolbox.Template": "模版",
+            "nf-canvas-toolbox.Label": "标签",
+            "nf-canvas-toolbox.Add": "添加",
+            "nf-canvas-toolbox.Cancel": "取消",
+            "nf-canvas-toolbox.Instantiate Template": "实例化模版",
+            "nf-canvas-toolbox.Message": "模版尚未加载进入数据流系统.",
+            "nf-canvas-toolbox.Type": "类型",
+            "nf-canvas-toolbox.Tags": "标签",
+            "nf-canvas-toolbox.Message1": "没有指定描述",
+            "nf-canvas-toolbox.AddProcessor": "添加处理器",
+            "nf-canvas-toolbox.AddPort": "添加端口",
+            "nf-canvas-toolbox.AddProcessGroup": "添加处理过程组",
+            "nf-canvas-toolbox.AddRemoteProcessGroup": "添加远程处理过程组",
+            "nf-canvas-utils.Header1": "处理组",
+            "nf-canvas-utils.Message1": "无法加载特定组件的组.",
+            "nf-canvas-utils.Message2": "无法找到特定组件.",
+            "nf-canvas-utils.Message3": "无法进入选定组.",
+            "nf-canvas-utils.Message4": "不能把端口移出根组",
+            "nf-canvas-utils.Message5": "这些端口当前与组外有连接: <b>",
+            "nf-canvas-utils.Message6": "这些端口在目标处理过程组里已经存在: <b>",
+            "nf-canvas-utils.Message7": "组件已经在最顶层组",
+            "nf-canvas.Browser": "不支持的浏览器",
+            "nf-canvas.Message1": "流程图需要用SVG显示.请选择支持SVG的浏览器.",
+            "nf-canvas.ClusterConn": "集群连接",
+            "nf-canvas.Message2": "此节点当前未连接到集群.对此处对数据流进行的任何修改都不会在群集中复制.",
+            "nf-canvas.Message3": "此节点刚刚加入群集.对此处对数据流的任何修改都将在群集中进行复制.",
+            "nf-component-state.Header1": "组件状态",
+            "nf-component-state.Button1": "关闭",
+            "nf-component-state.Content1": "该组件没有需要清除的状态",
+    		"nf-component-state.Message1": "组件状态只能在组件没有活动运行时清除",
+    		"nf-component-state.Key": "键",
+    		"nf-component-state.Value": "值",
+    		"nf-component-state.Scope": "范围",
+    		"nf-connection-configuration.ConnectionConfiguration": "连接配置",
+            "nf-connection-configuration.Add": "添加",
+            "nf-connection-configuration.Message0": "连接必须至少选择一个关联.",
+            "nf-connection-configuration.Cancel": "取消",
+            "nf-connection-configuration.Message1": "\\' 不支持任何关联.",
+            "nf-connection-configuration.Message2": "\\' 无任何输出端口.",
+            "nf-connection-configuration.Message4": "\\' 无任何输入端口.",
+    		"nf-connection-configuration.Message5": "未授权任何输出端口 \\'",
+            "nf-connection-configuration.Message6": "配置错误",
+            "nf-connection-configuration.ConfigureConnection": "配制连接",
+            "nf-connection-configuration.Detail": "详情",
+            "nf-connection-configuration.Setting": "设置",
+            "nf-connection-configuration.CreateConnection": "创建连接",
+            "nf-connection-configuration.Apply": "应用",
+            "nf-connection-configuration.Message7": "连接至少要选择一个关联.",
+    		"nf-connection.Connection": "连接",
+            "nf-connection.Message1": "循环连接要至少有两个拐点.",
+            "nf-connection.From": "从",
+            "nf-connection.To": "到",
+            "nf-connection.Name": "名称",
+            "nf-connection.Queued": "排队",
+            "nf-connection.FlowFilesOlder": "使流文件超过",
+            "nf-context-menu.RefreshStatus": "刷新状态",
+            "nf-context-menu.LeaveGroup": "离开组",
+            "nf-context-menu.Configure": "配置",
+            "nf-context-menu.ViewConfiguration": "查看配置",
+            "nf-context-menu.EnterGroup": "进入组",
+            "nf-context-menu.Start": "开始",
+            "nf-context-menu.Stop": "停止",
+            "nf-context-menu.canEnable": "开启",
+            "nf-context-menu.canDisable": "禁用",
+            "nf-context-menu.canGroup": "组",
+            "nf-context-menu.canManagePolicies": "访问策略",
+            "nf-context-menu.canAlign1": "垂直对齐",
+            "nf-context-menu.canAlign2": "水平对齐",
+            "nf-context-menu.canUploadTemplate": "上传模板",
+            "nf-context-menu.canCreateTemplate": "创建模板",
+            "nf-context-menu.RemotePorts": "远程端口",
+            "nf-context-menu.EnableTransmission": "使转换有效",
+            "nf-context-menu.DisableTransmission": "使转换无效",
+    		"nf-context-menu.StatsHistory": "历史状态",
+    		"nf-context-menu.ViewState": "查看状态",
+            "nf-context-menu.Stats": "状态",
+            "nf-context-menu.DataProvenance": "数据来源",
+            "nf-context-menu.BringFront": "带到前端",
+            "nf-context-menu.GoToSource": "进入源",
+            "nf-context-menu.GoToDestination": "进入目标",
+            "nf-context-menu.UpstreamConnections": "上游连接",
+            "nf-context-menu.DownstreamConnections": "下游连接",
+            "nf-context-menu.Usage": "用途",
+            "nf-context-menu.Refresh": "刷新",
+            "nf-context-menu.GoTo": "进入",
+            "nf-context-menu.ChangeColor": "变换颜色",
+            "nf-context-menu.CenterInView": "视图居中",
+            "nf-context-menu.Copy": "复制",
+            "nf-context-menu.Paste": "粘贴",
+            "nf-context-menu.MoveParentGroup": "移动到父亲组",
+    		"nf-context-menu.QueueList": "队列列表",
+            "nf-context-menu.EmptyQueue": "清空队列",
+            "nf-context-menu.Delete": "删除",
+            "nf-controller-service.ConfigurationError": "配置错误",
+            "nf-controller-service.Cancel": "取消",
+            "nf-controller-service.Close": "关闭",
+            "nf-controller-service.Message1": "使无效的步骤",
+            "nf-controller-service.ActionCanceled": "动作取消",
+            "nf-controller-service.Message2": "请求有效的动作被取消，但是部分请求可能已经被执行. 请验证服务关联的所有组件.",
+            "nf-controller-service.Message3": "有效步骤 ",
+            "nf-controller-service.Message4": "动作取消",
+            "nf-controller-service.Message5": "请求无效的动作被取消，但是部分请求可能已经被执行. 请验证服务关联的所有组件..",
+            "nf-controller-service.Message6": "保存设置?",
+            "nf-controller-service.Settings": "配置",
+            "nf-controller-service.Properties": "属性",
+            "nf-controller-service.Comments": "评论",
+            "nf-controller-service.Message7": "配置控制器服务",
+            "nf-controller-service.Message8": "使控制器服务无效",
+            "nf-controller-service.Disable": "无效",
+            "nf-controller-service.ServiceOnle": "仅服务",
+            "nf-controller-service.Message9": "仅有效当前控制器服务",
+            "nf-controller-service.Message10": "服务和相关组件",
+            "nf-controller-service.Message11": "使控制器服务有效，并使关联组件有效/启动",
+            "nf-controller-service.Message12": "使控制服务器有效",
+            "nf-controller-service.Enable": "有效",
+            "nf-controller-service.Apply": "应用",
+            "nf-controller-service.Advanced": "高级",
+            "nf-controller-service.Message13": "在进入高级设置前保存变更?",
+            "nf-controller-service.Ok": "确定",
+    		"nf-controller-service.ControllerService": "控制器服务",
+    		"nf-controller-service.Message14": "由于未授权的引用组件，无法禁用.",
+    		"nf-controller-service.Message15": "由于未授权的引用组件，无法启用.",
+    		"nf-controller-service.Save": "保存",
+    		"nf-controller-service.Message16": "在进入控制器服务前保存变更?",
+            "nf-controller-services.Add": "添加",
+    		"nf-controller-services.ControllerService": "控制器服务",
+    		"nf-controller-services.Message14": "必须选择要创建的控制器服务类型.",
+    		"nf-controller-services.AddControllerService": "添加控制器服务",
+    		"nf-controller-services.Invalid": "失效",
+    		"nf-controller-services.Disabled": "已禁用",
+    		"nf-controller-services.Disabling": "禁用中",
+    		"nf-controller-services.Enabled": "已启用",
+    		"nf-controller-services.Enabling": "启用中",
+    		"nf-controller-services.toolTip": "基于存在的公告进行排序",
+    		"nf-controller-services.Name": "名称",
+    		"nf-controller-services.Type": "类型",
+    		"nf-controller-services.Tags": "标签",
+    		"nf-controller-services.State": "状态",
+    		"nf-controller-services.ProcessGroup": "处理组",
+    		"nf-controller-services.type-description": "未指定说明",
+    		"nf-controller-services.viewDtails": "查看详情",
+    		"nf-controller-services.usage": "用法",
+    		"nf-controller-services.disable": "禁用",
+    		"nf-controller-services.edit": "编辑",
+    		"nf-controller-services.enable": "启用",
+    		"nf-controller-services.viewstate": "查看状态",
+    		"nf-controller-services.remove": "移除",
+    		"nf-controller-services.acesspolicies": "访问策略",
+    		"nf-custom-ui.AdvancedConfiguration": "高级配置",
+    		"nf-custom-ui.Message1": "无法生成访问高级访问配置对话框的访问令牌.",
+    		"nf-draggable.ComponentPosition": "组件位置",
+    		"nf-draggable.Message1": "未授权修改目的地组.",
+    		"nf-draggable.Message2": "选择修改的每个组件都必须被授权.",
+            "nf-go-to.Close": "关闭",
+            "nf-go-to.NoDownstreamComponents": "无下游组件",
+            "nf-go-to.NoUpstreamComponents": "无上游组件",
+            "nf-go-to.DownstreamConnections": "下游连接",
+            "nf-go-to.UpstreamConnections": "上游连接",
+            "nf-go-to.Message1": "无上游连接",
+            "nf-go-to.Message2": "无下游连接", 
+            "nf-go-to.Funnel": "漏斗",
+            "nf-label-configuration.ConfigureLabel": "配置标签",
+    		"nf-label-configuration.Apply": "应用",
+    		"nf-label-configuration.Cancel": "取消",
+    		"nf-policy-management.ViewUserInterface": "查看用户接口",
+    		"nf-policy-management.AcessController": "访问控制器",
+    		"nf-policy-management.QueryProvenance": "查询来源",
+    		"nf-policy-management.AcessPolicies": "访问所有策略",
+    		"nf-policy-management.AcessUser": "访问用户/用户组",
+    		"nf-policy-management.retrieve": "检索站点到站点的详情信息",
+    		"nf-policy-management.diagnostics": "查看系统分析",
+    		"nf-policy-management.proxy": "代理用户请求",
+    		"nf-policy-management.counters": "访问计数器",
+    		"nf-policy-management.ViewComponent": "查看组件",
+    		"nf-policy-management.ModifyComponent": "修改组件",
+    		"nf-policy-management.ViewData": "查看数据",
+    		"nf-policy-management.ModifyData": "修改数据",
+    		"nf-policy-management.ReceiveData": "通过站点到站点接收数据",
+    		"nf-policy-management.SendData": "通过站点到站点发送数据",
+    		"nf-policy-management.ViewPolicies": "查看策略",
+    		"nf-policy-management.ModifyPolicies": "修改策略",
+    		"nf-policy-management.Searchusers": "搜索用户",
+    		"nf-policy-management.Ok": "确定",
+    		"nf-policy-management.Add": "添加",
+    		"nf-policy-management.UserSearch": "用户搜索",
+    		"nf-policy-management.Message1": "没有匹配的用户\\'",
+    		"nf-policy-management.Message2": "多个用户匹配\\'",
+    		"nf-policy-management.Cancel": "取消",
+    		"nf-policy-management.UpdatePolicy": "更新策略",
+    		"nf-policy-management.DeletePolicy": "删除策略",
+    		"nf-policy-management.Message3": "删除\\'",
+    		"nf-policy-management.Message4": "\\'从这个策略？",
+    		"nf-policy-management.Message5": "确实要删除此策略吗?",
+    		"nf-policy-management.Message6": "没有选择策略",
+    		"nf-policy-management.Message7": "允许用户查看用户接口",
+    		"nf-policy-management.Message8": "允许用户查看/修改控制器，包括集群中的报告任务，控制器服务和节点",
+    		"nf-policy-management.Message9": "允许用户提交来源搜索并请求事件继承",
+    		"nf-policy-management.Message10": "允许用户查看/修改所有组件的策略",
+    		"nf-policy-management.Message11": "允许用户查看/修改用户组",
+    		"nf-policy-management.Message12": "允许其他NiFi实例检索此数据流的“站点到站点”详情信息",
+    		"nf-policy-management.Message13": "允许用户查看系统分析",
+    		"nf-policy-management.Message14": "允许代理计算机代表他人发送请求",
+    		"nf-policy-management.Message15": "允许用户查看/修改计数器",
+    		"nf-policy-management.Message16": "允许用户查看组件配置详情信息",
+    		"nf-policy-management.Message17": "允许用户修改组件配置详情信息",
+    		"nf-policy-management.Message18": "允许用户通过出站连接中的源数据和流文件队列查看此组件的元数据和内容",
+    		"nf-policy-management.Message19": "允许用户在出站连接中清空流文件队列并提交重放",
+    		"nf-policy-management.Message20": "允许此端口从这些数据流实例接收数据",
+    		"nf-policy-management.Message21": "允许此端口向这些数据流实例发送数据",
+    		"nf-policy-management.Message22": "允许用户查看可以查看/修改此组件的用户列表",
+    		"nf-policy-management.Message23": "允许用户修改可以查看/修改此组件的用户列表",
+    		"nf-policy-management.Message24": "通过删除此策略，此组件的权限将恢复为继承的策略（如果适用）.",
+    		"nf-policy-management.Text1": "显示从中继承的有效策略",
+    		"nf-policy-management.Text2": "没有组件特定的管理员.",
+    		"nf-policy-management.Text3": "未授权访问指定资源的策略.",
+    		"nf-policy-management.Text4": "未授权查看该策略.",
+    		"nf-policy-management.Text5": "没有指定资源的策略.",
+    		"nf-policy-management.Text6": "未授权访问指定资源的策略.",
+    		"nf-policy-management.Write": "写",
+    		"nf-policy-management.Read": "读",
+    		"nf-policy-management.View": "查看",
+    		"nf-policy-management.Modify": "修改",
+    		"nf-policy-management.AllPolicies": "所有策略",
+    		"nf-policy-management.Controller": "这个控制器",
+    		"nf-policy-management.ProcessorGroup": "处理组",
+    		"nf-policy-management.reporting-tasks": "报告任务",
+    		"nf-policy-management.NoUserSearch": "没有匹配的用户",
+    		"nf-policy-management.Remove": "移除",
+            "nf-port-configuration.ConfigurePort": "配置端口",
+            "nf-port-configuration.Apply": "应用",
+            "nf-port-configuration.ConfigurationError": "配置错误",
+            "nf-port-configuration.Cancel": "取消",
+            "nf-port-details.PortDetails": "端口详情",
+            "nf-port-details.OK": "确定",
+            "nf-process-group-configuration.ConfigureProcessGroup": "配置处理组",
+            "nf-process-group-configuration.Apply": "应用",
+            "nf-process-group-configuration.Cancel": "取消",
+            "nf-process-group-configuration.General": "通用",
+            "nf-process-group-configuration.ControllerService": "控制器服务",
+            "nf-process-group-details.ProcessGroupDetails": "处理组详情",
+            "nf-process-group-details.Ok": "应用",
+            "nf-process-group.Message1": "无评价内容",
+            "nf-process-group.Queued": "队列中",
+            "nf-process-group.In": "输入",
+            "nf-process-group.ReadWrite": "读/写",
+            "nf-process-group.Out": "输出",
+            "nf-process-group.5min": "(5 分钟)",
+            "nf-process-group.Message1": "没有指定的评论",
+            "nf-processor-configuration.TimerDriven": "时间驱动",
+            "nf-processor-configuration.Message1": "处理器将按照计划任务时间间隔执行.",
+            "nf-processor-configuration.EventDriven": "事件驱动",
+            "nf-processor-configuration.Message2": "处理器将按照事件驱动执行 (例如 流文件进入一个队列). 计划任务策略是试探性的.",
+            "nf-processor-configuration.OnPrimaryNode": "在主节点",
+            "nf-processor-configuration.Message3": "处理器将在主节点按照设置间隔时间被执行.",
+            "nf-processor-configuration.CronDriven": "CRON驱动",
+            "nf-processor-configuration.Message5": "处理器将按照CRON格式指定的时间被执行.",
+    		"nf-processor-configuration.Error1": "并发任务必须是整数值",
+    		"nf-processor-configuration.Error2": "必须指定运行计划",
+    		"nf-processor-configuration.Error3": "必须指定处罚持续时间",
+    		"nf-processor-configuration.Error4": "必须指定产量持续时间",
+            "nf-processor-configuration.ConfigurationError": "配置错误",
+            "nf-processor-configuration.Message6": "保存变更在进入控制器服务之前?",
+            "nf-processor-configuration.Settings": "设置",
+            "nf-processor-configuration.Scheduling": "执行计划",
+            "nf-processor-configuration.Properties": "属性",
+            "nf-processor-configuration.Comments": "评论",
+            "nf-processor-configuration.ConfigureProcessor": "配置处理器",
+            "nf-processor-configuration.Debug": "调试",
+            "nf-processor-configuration.Info": "信息",
+            "nf-processor-configuration.Warn": "警告",
+            "nf-processor-configuration.Error": "错误",
+            "nf-processor-configuration.Apply": "应用",
+            "nf-processor-configuration.Cancel": "取消",
+            "nf-processor-configuration.Advanced": "高级",
+            "nf-processor-configuration.Message7": "保存变更在进入高级设置?",
+            "nf-processor-configuration.ThisProcessorHasNoRelationships": "这个处理器没有关系.",
+            "nf-processor-configuration.ViewDetails": "查看详情",
+            "nf-processor-configuration.Provenance": "来源",
+            "nf-processor.In": "输入",
+            "nf-processor.ReadWrite": "读/写",
+            "nf-processor.Out": "输出",
+            "nf-processor.TasksTime": "任务/时间",
+            "nf-processor.5min-1": "5 分钟",
+            "nf-processor.5min": "(5 分钟)",
+            "nf-registration.Thanks": "谢谢",
+            "nf-registration.Message1": "您的请求将被快速执行.",
+            "nf-queue-listing.QueueListing": "队列列表",
+    		"nf-queue-listing.Message1": "无法生成用于下载内容的访问令牌.",
+    		"nf-queue-listing.Message2": "无法生成用于查看内容的访问令牌.",
+    		"nf-queue-listing.Stop": "停止",
+    		"nf-queue-listing.Message3": "队列没有流文件.",
+    		"nf-queue-listing.FlowFile": "流文件",
+    		"nf-queue-listing.Ok": "确定",
+    		"nf-queue-listing.Message4": "此队列的源和目标当前正在运行. 这个列表可能不再准确.",
+    		"nf-queue-listing.Message5": "此队列的源当前正在运行. 此商家信息可能不再准确无误.",
+    		"nf-queue-listing.Message6": "此队列的目标正在运行. 此商家信息可能不再准确无误.",
+    		"nf-queue-listing.NoValueSet": "未设置值",
+    		"nf-queue-listing.Yes": "是",
+    		"nf-queue-listing.No": "否",
+    		"nf-queue-listing.Position": "位置",
+    		"nf-queue-listing.FileName": "文件名",
+    		"nf-queue-listing.FileSize": "文件大小",
+    		"nf-queue-listing.queuedDuration": "排队持续时间",
+    		"nf-queue-listing.lineageDuration": "继承时间",
+    		"nf-queue-listing.penalized": "处罚",
+    		"nf-queue-listing.node": "节点",
+    		"nf-queue-listing.Bytes": " 字节",
+    		"nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "配置远程处理组",
+            "nf-remote-process-group-configuration.Apply": "应用",
+            "nf-remote-process-group-configuration.ConfigurationError": "配置错误",
+            "nf-remote-process-group-configuration.Cancel": "取消",
+    		"nf-remote-process-group-configuration.Message5": "远程进程组配置",
+            "nf-remote-process-group-details.RemoteProcessGroupDetails": "远程处理组详情",
+            "nf-remote-process-group-details.Ok": "确定",
+            "nf-remote-process-group-ports.ConfigureRemotePort": "配置远程端口",
+            "nf-remote-process-group-ports.Apply": "应用",
+            "nf-remote-process-group-ports.ConfigurationError": "配置错误",
+            "nf-remote-process-group-ports.Message1": "当前任务要求整数值.",
+            "nf-remote-process-group-ports.Cancel": "取消",
+            "nf-remote-process-group-ports.RemoteProcessGroupPorts": "远程处理组端口",
+            "nf-remote-process-group-ports.Close": "关闭",
+            "nf-remote-process-group-ports.Message2": "没有描述.",
+    		"nf-remote-process-group-ports.Message3": "此端口已删除.",
+    		"nf-remote-process-group-ports.Message4": "应同时为此端口计划的任务数.",
+    		"nf-remote-process-group-ports.transmissionSwitch": "切换端口传输",
+    		"nf-remote-process-group-ports.description": "未指定说明.",
+            "nf-remote-process-group.Message1": "没有评论",
+            "nf-remote-process-group.Sent": "发送",
+            "nf-remote-process-group.Received": "接收",
+            "nf-remote-process-group.5min": "(5 分钟)",
+            "nf-remote-process-group.Message2": "Site-to-Site 是安全的.",
+            "nf-remote-process-group.Message3": "Site-to-Site 是非安全的.",
+            "nf-remote-process-group.Message4": "远程流不在当前运行",
+            "nf-reporting-task.ReportingTask": "报告任务",
+    		"nf-reporting-task.Save": "保存",
+            "nf-reporting-task.ConfigurationError": "配置错误",
+            "nf-reporting-task.Message1": "进入控制器服务前保存设置?",
+            "nf-reporting-task.Settings": "设置",
+            "nf-reporting-task.Properties": "属性",
+            "nf-reporting-task.Comments": "评论",
+            "nf-reporting-task.ConfigureReportingTask": "配置报告任务",
+            "nf-reporting-task.Node": "节点",
+            "nf-reporting-task.ClusterManager": "集群管理者",
+            "nf-reporting-task.TimerDriven": "时间驱动",
+            "nf-reporting-task.Message2": "报告任务将按照指定时间间隔执行.",
+            "nf-reporting-task.CRONDriven": "CRON驱动",
+            "nf-reporting-task.Message3": "报告任务将按照CRON配置执行.",
+            "nf-reporting-task.Apply": "应用",
+            "nf-reporting-task.Cancel": "取消",
+            "nf-reporting-task.Advanced": "高级",
+            "nf-reporting-task.Message4": "在进入高级设置前保存变更?",
+    		"nf-reporting-task.Ok": "确定",
+            "nf-search.Search": "检索",
+            "nf-secure-port-configuration": "设置",
+            "nf-secure-port-configuration.AccessControl": "权限控制",
+            "nf-secure-port-configuration.ConfigureSecurePort": "配置安全端口",
+            "nf-secure-port-configuration.Apply": "应用",
+            "nf-secure-port-configuration.Cancel": "取消",
+            "nf-secure-port-configuration.InputPort": "输入端口",
+            "nf-secure-port-configuration.OutputPort": "输出端口",
+            "nf-secure-port-details.Settings": "设置",
+            "nf-secure-port-details.AccessControl": "权限控制",
+            "nf-secure-port-details.SecurePortDetails": "安全端口详情",
+            "nf-secure-port-details.Ok": "确定",
+            "nf-settings.Filter": "过滤器",
+            "nf-settings.Message1": "一个流压缩包被成功创建.",
+            "nf-settings.Message2": "设置被成功适用.",
+            "nf-settings.Message3": "控制器服务的类型必须被选定.",
+            "nf-settings.Text": "节点",
+            "nf-settings.ClusterManager": "集群管理员",
+            "nf-settings.Message4": "控制器服务在节点可使用.",
+            "nf-settings.Message5": "控制器服务在集群管理员可使用.",
+            "nf-settings.Message6": "无描述信息",
+            "nf-settings.Message7": "添加控制器服务",
+            "nf-settings.Add": "添加",
+            "nf-settings.Cancel": "取消",
+            "nf-settings.Node": "节点",
+            "nf-settings": "集群管理员",
+            "nf-settings.ViewDetail": "查看详情",
+            "nf-settings.Disable": "无效",
+            "nf-settings.Enable": "有效",
+            "nf-settings.Remove": "移除",
+            "nf-settings.Usage": "用法",
+            "nf-settings.Name": "名称",
+            "nf-settings.State": "状态",
+            "nf-settings.Availability": "可以获得",
+            "nf-settings.Message8": "报告任务仅节点可获得.",
+            "nf-settings.Message9": "报告任务集群管理者有权取得.",
+            "nf-settings.Type": "类型",
+            "nf-settings.Tags": "标签",
+            "nf-settings.Message10": "无指定的描述",
+            "nf-settings.Message11": "添加报告任务",
+            "nf-settings.ViewDetails": "查看详情",
+            "nf-settings.Stop": "停止",
+            "nf-settings.Edit": "编辑",
+            "nf-settings.Start": "开始",
+            "nf-settings.RunStatus": "运行状态",
+            "nf-settings.General": "通用",
+            "nf-settings.ControllerServices": "控制器服务",
+            "nf-settings.ReportingTasks": "报告任务",
+            "nf-settings.Message12": "创建一个新的控制器服务",
+            "nf-settings.Message13": "创建一个新的报告任务",
+            "nf-settings.Settings": " 设置",
+            "nf-settings.ViewState": "查看状态",
+            "nf-settings.AccessPolicies": "访问策略",
+            "nf-settings.Invalid": "无效",
+            "nf-settings.Stopped": "已停止",
+            "nf-settings.Running": "运行中",
+            "nf-settings.Disabled": "禁用",
+            "nf-about": "数据流",
+            "nf-bulletin-board.defaultFilterText": "过滤",
+            "nf-bulletin-board.ByMessage": "通过信息过滤",
+            "nf-bulletin-board.ByName": "通过名字过滤",
+            "nf-bulletin-board.ById": "通过识别符过滤",
+            "nf-bulletin-board.ByGroupId": "通过组识别符过滤",
+            "nf-bulletin-board.Message1": "过滤 ",
+            "nf-bulletin-board.Message2": " 匹配 \\\\'",
+            "nf-bulletin-board.Message3": "自动刷新开始",
+            "nf-bulletin-board.Message4": "自动刷新停止", 
+            "nf-bulletin-board.Message5": "移除过滤器",
+            "nf-bulletin-board.BulletinBoard": "公告板",
+            "nf-cluster.Cluster": " 集群",
+            "nf-cluster-table.Filter": "用过滤器",
+            "nf-cluster-table.Message1": "连接 \\'",
+            "nf-cluster-table.Message2": "\\' 到这个集群?",
+            "nf-cluster-table.Message3": "断开 \\'",
+            "nf-cluster-table.Message4": "\\' 从这个集群?",
+            "nf-cluster-table.Message5": "移除 \\'",
+            "nf-cluster-table.Message6": "\\' 从这个集群?",
+            "nf-cluster-table.NodeDetails": "节点详情",
+            "nf-cluster-table.Ok": "确定",
+            "nf-cluster-table.ByAddress": "通过地址过滤",
+            "nf-cluster-table.ByStatus": "通过状态过滤",
+            "nf-cluster-table.ViewDetails": "查看详情",
+            "nf-cluster-table.Node Address": "节点地址",
+            "nf-cluster-table.ActiveThreadCount": "运行的线程数",
+            "nf-cluster-table.Size": "大小",
+            "nf-cluster-table.Queue": "排队",                
+            "nf-cluster-table.Status": "状态",
+            "nf-cluster-table.Uptime": "运行时间",
+            "nf-cluster-table.LastHeartbeat": "最后心跳",
+            "nf-cluster-table.Connect": "连接",
+            "nf-cluster-table.Remove": "移除",
+            "nf-cluster-table.Disconnect": "断开",
+            "nf-cluster-table.MakePrimary": "作为首选",
+            "nf-cluster-table.None": "无",
+            "nf-counters-table.Filter": "过滤器",
+            "nf-counters-table.ByName": "通过名称过滤",
+            "nf-counters-table.ByContext": "通过上下文过滤",
+            "nf-counters-table.Context": "上下文",
+            "nf-counters-table.Name": "名称",
+            "nf-counters-table.Value": "值",
+            "nf-counters-table.Reset": "重置",
+            "nf-counters-table.Delete": "删除",
+            "nf-counters-table.Connect": "连接",
+            "nf-counters.Counters": "计数器",
+            "nf-history.History": "历史",
+            "nf-history-table.Filter": "过滤器",
+            "nf-history-table.ActionDetail": "动作详情",
+            "nf-history-table.Ok": "确定",
+            "nf-history-table.ById": "用标识过滤",
+            "nf-history-table.Message1": "过滤器基于组件标识的过滤器被更新了",
+            "nf-history-table.ByUser": "用用户过滤",
+            "nf-history-table.Message2": "基于运行任务的用户的过滤器",
+            "nf-history-table.FilterHistory": "过滤器历史",
+            "nf-history-table.Cancel": "取消",
+            "nf-history-table.PurgeHistory": "清除历史",
+            "nf-history-table.Purge": "清除",
+    		"nf-history-table.History": "历史",
+            "nf-history-table.Message3": "是否确定删除历史 '",
+            "nf-history-table.Message3.1": "\\'\\?",
+            "nf-history-table.Message4": "结束日期必须被指定.",
+            "nf-history-table.ViewDetails": "查看详情",
+            "nf-history-table.DateTime": "日期/时间",
+            "nf-history-table.Name": "名称",
+            "nf-history-table.Type": "类型",
+            "nf-history-table.Operation": "操作",
+            "nf-history-table.User": "用户",
+            "nf-history-table.Value": "值",
+            "nf-history-table.PreviousValue": "之前的值",
+            "nf-history-table.SourceId": "源标识",
+            "nf-history-table.SourceName": "源名称",
+            "nf-history-table.SourceType": "源类型",
+            "nf-history-table.Relationship": "关联",
+            "nf-history-table.DestinationId": "目的标识",
+            "nf-history-table.DestinationName": "目的名称",
+            "nf-history-table.DestinationType": "目的类型",
+            "nf-history-table.Group": "组",
+            "nf-history-table.GroupId": "组标识",
+            "nf-history-table.PreviousGroup": "前面的组",
+            "nf-history-table.PreviousGroupId": "前面组标识",
+            "nf-history-table.EndDate": "结束日期",
+            "nf-history-table.History": "历史",
+    		"nf-history-table.Message5": "基于被修改的组件的id的过滤器",
+    		"nf-history-table.Message6": "基于执行操作的用户的过滤器",
+    		"nf-history-table.NotAuthorized": "无权限",
+    		"nf-history-table.Uri": "统一资源标识符",
+    		"nf-history-table.EndTime": "结束时间",
+    		"nf-login.Login": "登录",
+    		"nf-login.Logining": "登入中...",
+    		"nf-login.SUCCESS": "成功",
+    		"nf-login.Denied": "登录被拒绝",
+    		"nf-login.Message1": "不能登入",
+    		"nf-login.Message2": "不能核对访问状态",
+    		"nf-login.Message3": "当前数据流没有配置账号/密码登录.",
+    		"nf-common.History": "<b>历史:</b><ul class=\"property-info\">",
+    		"nf-common.DefaultValue": "<b>默认值:</b> ",
+    		"nf-common.SupportsExpressionLanguage": "<b>支持表达式语言:</b> ",
+            "nf-common.sensitiveText": "敏感值设置",
+            "nf-common.Message1": "异常发生",
+            "nf-common.Message2": "请查看日志.",
+            "nf-common.Message3": "无法链接数据流系统",
+            "nf-common.Message4": "未授权",
+            "nf-common.Message5": "需要使用数据流系统的授权.",
+            "nf-common.Message6": "禁止",
+            "nf-common.Message7": "无法授权使用当前数据流系统.",
+            "nf-common.Message9": "与应用内核通信失败，在重启之前请查看日志并修正配置错误.",
+            "nf-common.ParseError": "分析错误",
+            "nf-common.Message10": "无法拦截来自数据流的返回.",
+            "nf-common.Message11": ": 异常返回",
+            "nf-common.Message12": "异常发生，请查看日志.",
+            "nf-common.Message13": "无值设置",
+            "nf-common.Message14": "空字符串设置",
+            "nf-common.Message15": "您的会话马上要过期. 请再登录以避免自动登出.",
+            "nf-common.Message16": "您的权限目前有限. 登录有权账户或者向管理申请一个有权账户.",
+            "nf-common.Message17": "您的会话已经过期. 请重新加载再登录.",
+            "nf-common.Message18": "您的会话已经过期. 请点击确认，再登录.",
+            "nf-common.Message19": "请确认应用正在运行并且检查日志.",
+            "nf-common.Message20": "请求超时，请确认应用是否在运行并检查日志.",
+            "nf-common.Message21": "请求被终止.",
+            "nf-common.Message22": "请求传输机制失败. 请确认应用正在运行并且有权访问.",
+    		"nf-common.Message23": "请确保应用程序正在运行，并检查日志中是否存在任何错误.",
+    		"nf-common.Message24": "无法与数据流通信",
+    		"nf-common.Unauthorized": "无权限",
+    		"nf-common.Message25": "使用此数据流需要进行身份验证.",
+    		"nf-common.Message26": "发生意外的错误",
+            "nf-common.SessionExpired": "请求超时",
+            "nf-common.AccessDenied": "拒绝访问",
+    		"nf-common.Error": "错误",
+            "nf-common.DefaultValue": "缺省值:",   
+            "nf-common.SupportsExpressionLanuage":"支持的表达语言:", 	
+            "nf-common.Message27": "空字符串之前设置",
+            "nf-common.Message28": "没有之前设置的值",
+            "nf-common.Bytes": " 字节",
+            "nf-connection-details.FromProcessor": "从处理器",
+    		"nf-connection-details.Processor": "处理器",
+            "nf-connection-details.FromFunnel": "从漏斗",
+            "nf-connection-details.FromOutPut": "从输出",
+            "nf-connection-details.FromInput": "从输入",
+            "nf-connection-details.ToProcessor": "从处理器",
+            "nf-connection-details.ToFunnel": "到漏斗",
+            "nf-connection-details.ToInput": "到输入",
+            "nf-connection-details.ToOutput": "到输出",
+            "nf-connection-details.Details": "详情",
+            "nf-connection-details.Settings": "设置",
+            "nf-connection-details.ConnectionDetails": "连接详情",
+            "nf-connection-details.Ok": "确定",
+            "nf-connection-details.NoValueSet": "确定",
+            "nf-dialog.Ok": "确定",
+            "nf-dialog.Yes": "是",
+            "nf-dialog.No": "否",
+            "nf-processor-details.Settings": "设置",
+            "nf-processor-details.Scheduling": "计划调度中",
+            "nf-processor-details.Properties": "属性",
+            "nf-processor-details.Comments": "评论",
+            "nf-processor-details.ProcessorDetails": "处理器详情",
+            "nf-processor-details.Ok": "确定",
+            "nf-processor-details.Advanced": "高级",
+    		"nf-processor-details.Error": "错误",
+    		"nf-processor-details.ThisProcessorHasNoRelationships": "该处理器没有关系",
+            "nf-status-history.StatusHistory":"历史状态信息",        
+            "nf-status-history.Processor": "处理器",
+            "nf-status-history.InputPort": "输入端口",
+            "nf-status-history.OutputPort": "输出端口",
+            "nf-status-history.ProcessGroup": "处理组",
+            "nf-status-history.RemoteProcessGroup": "远程处理组",
+            "nf-status-history.Connection": "连接",
+            "nf-status-history.Funnel": "漏斗",
+            "nf-status-history.Template": "模版",
+            "nf-status-history.Label": "标签",
+            "nf-status-history.Message":"没有足够的历史信息, 请稍后再试.",
+    		"nf-status-history.Close": "关闭",
+    		"nf-status-history.Start": "开始",
+    		"nf-status-history.End": "结束",
+    		"nf-status-history.Min_Max_Mean": "最小/最大/平均",
+    		"nf-status-history.NiFi": "数据流",
+            "nf-provenance.DataProvenance": "来源",
+            "nf-provenance-lineage.Message1": "计算流文件关系...",
+            "nf-provenance-lineage.ViewDetails": "查看详情",
+            "nf-provenance-lineage.Message2": "继承关系查找完成，但是没有结果. 事件可能过期.",
+            "nf-provenance-lineage.Find parents": "查找父亲",
+            "nf-provenance-lineage.Expand": "扩展",
+            "nf-provenance-lineage.Collapse": "崩溃",
+            "nf-provenance-lineage.Cancel": "取消",
+    		"nf-provenance-lineage.Lineage Results": "谱系结果",
+    		"nf-provenance-lineage.Process Lineage": "过程继承",
+            "nf-provenance-table.Filter": "过滤器",
+            "nf-provenance-table.Message": "显示最近 ",
+            "nf-provenance-table.Of": " 中 ",
+            "nf-provenance-table.Events": " 事件. ",
+            "nf-provenance-table.Message4": " 事件, 请修改检索条件.",
+            "nf-provenance-table.Showing": "显示",
+            "nf-provenance-table.Message5": "符合检索条件的事件, 请修改检索条件. ",
+            "nf-provenance-table.Message6": "符合检索条件的事件. ",
+            "nf-provenance-table.Details": "详情",
+            "nf-provenance-table.Attributes": "属性",
+            "nf-provenance-table.Content": "内容",
+            "nf-provenance-table.ProvenanceEvent": "数据源事件",
+            "nf-provenance-table.Ok": "确定",
+            "nf-provenance-table.Message1": "回放请求提交成功.",
+            "nf-provenance-table.Message2": "检索事件",
+            "nf-provenance-table.Search": "检索",
+            "nf-provenance-table.Message3": "检索数据源事件...",
+            "nf-provenance-table.ByComponentName": "通过组件名过滤",
+            "nf-provenance-table.ByComponentType": "通过组件类型过滤",
+            "nf-provenance-table.ByType": "通过类型过滤",
+            "nf-provenance-table.ByNode": "通过节点过滤",
+            "nf-provenance-table.Cluster": "集群",
+            "nf-provenance-table.ViewDetail": "查看详情",
+            "nf-provenance-table.ShowLineage": "显示继承关系",
+            "nf-provenance-table.GoTo": "进入",
+            "nf-provenance-table.DateTime": "日期/时间",
+            "nf-provenance-table.Type": "类型",
+            "nf-provenance-table.FlowFileUuid": "流文件 Uuid",
+            "nf-provenance-table.Size": "大小",
+            "nf-provenance-table.ComponentName": "组件名称",
+            "nf-provenance-table.ComponentType": "组件类型",
+            "nf-provenance-table.Node": "节点",
+            "nf-provenance-table.Cancel": "取消",
+            "nf-provenance-table.NoValueSet": "没有值",
+            "nf-provenance-table.Claim": "断言",
+            "nf-provenance-table.InputClaim": "输入声明",
+    		"nf-provenance-table.Provenance": "出处",
+    		"nf-provenance-table.Message7": "无法生成用于查看内容的访问令牌.",
+    		"nf-provenance-table.Message8": "无法生成用于下载内容的访问令牌.",
+    		"nf-provenance-table.Message9": "没有先前设置的值",
+    		"nf-provenance-table.Message10": "正在搜索原因事件...",
+    		"nf-provenance-table.Process": "进展",
+    		"nf-provenance-table.NoValueSet": "未设置值",
+    		"nf-provenance-table.NoChildren": "没有孩子",
+    		"nf-provenance-table.NoParent": "没有父母",
+    		"nf-provenance-table.Bytes": " 字节",
+    		"nf-cluster-search.Summary": "总结",
+            "nf-cluster-search.SelectNode": "选择节点",
+            "nf-cluster-search.Ok": "确定",
+    		"nf-cluster-search.ClusterSearch": "集群搜索",
+            "nf-cluster-search.Message1": "无节点匹配 \\'",
+            "nf-cluster-search.Message2": "多于一个节点匹配 \\'",
+            "nf-cluster-search.Cancel": "取消",
+            "nf-cluster-search.NiFiSumary": "数据流总结",
+            "nf-cluster-search.Message3": "没有与搜索项匹配的节点",
+            "nf-summary-table.Filter": "过滤器",
+            "nf-summary-table.Processors": "处理器",
+            "nf-summary-table.Connections": "连接",
+            "nf-summary-table.InputPorts": "输入端口",
+            "nf-summary-table.OutputPorts": "输出端口",
+            "nf-summary-table.RemoteProcessGroups": "远程处理组",
+            "nf-summary-table.ProcessGroups": "处理组",
+            "nf-summary-table.ByName": "通过名字过滤",
+            "nf-summary-table.ByType": "通过类型过滤",
+            "nf-summary-table.BySource": "通过源过滤",
+            "nf-summary-table.ByDestination": "通过目标过滤",
+            "nf-summary-table.ByUri": "通过uri过滤",
+            "nf-summary-table.ViewDetail": "查看详情",
+            "nf-summary-table.SourceName": "源名称",
+            "nf-summary-table.Name": "名称",
+            "nf-summary-table.RunStatus": "运行状态",
+            "nf-summary-table.In": "输入",
+            "nf-summary-table.Size": "大小",
+            "nf-summary-table.Message": "最后5分钟数量 / 数据大小",
+            "nf-summary-table.Read": "读",
+            "nf-summary-table.Write": "写",
+            "nf-summary-table.5min": "5分钟",
+            "nf-summary-table.Message1": "最后5分钟数据量",
+            "nf-summary-table.Out": "输出",
+            "nf-summary-table.Tasks": "任务",
+            "nf-summary-table.Time": "时间",
+            "nf-summary-table.Message2": "最后5分钟数量 / 延续期",
+            "nf-summary-table.Type": "类型",
+            "nf-summary-table.GoTo": "进入",
+            "nf-summary-table.ShowHistory": "显示历史",
+            "nf-summary-table.ShowDetail": "显示详情",
+            "nf-summary-table.ClusterProcessorSummary": "集群处理器一览",
+            "nf-summary-table.Node": "节点",
+            "nf-summary-table.Queue": "队列",
+            "nf-summary-table.SourceName": "源名称",
+            "nf-summary-table.DestinationName": "目标名称",
+            "nf-summary-table.ClusterConnectionSummary": "集群连接一览",
+            "nf-summary-table.Close": "关闭",
+            "nf-summary-table.Transferred": "传输结束",
+            "nf-summary-table.Message3": "最后5分钟从连接器传输的数量 / 数据大小",
+            "nf-summary-table.Sent": "发送",
+            "nf-summary-table.Received": "接收",
+            "nf-summary-table.ClusterProcessGroupSummary": "集群处理组一览",
+            "nf-summary-table.ClusterInputPortSummary": "集群输入端口一览",
+            "nf-summary-table.ClusterOutPutPortSummary": "集群输出端口一览",
+            "nf-summary-table.Transmitting": "转换中",
+            "nf-summary-table.Target URI": "目标 URI",
+            "nf-summary-table.ClusterRemoteProcessGroupSummary": "集群远程处理组一览",
+            "nf-summary-table.JVM": "Java虚拟机",
+            "nf-summary-table.System": "系统",
+            "nf-summary-table.SystemDiagnostics": "系统分析",
+            "nf-summary-table.Summary": " 总结",
+    		"nf-summary-table.Message4": "基于公告的存在进行排序",
+    		"nf-summary-table.times": "次",
+    		"nf-summary-table.UsageFor": "用法",
+    		"nf-summary-table.GoToProcessor": "转向处理器",
+    		"nf-summary-table.ViewStatus": "查看状态历史",
+    		"nf-summary-table.ViewProcessor": "查看处理器详情",
+    		"nf-summary-table.ViewConnect": "查看连接详情",
+    		"nf-summary-table.GoToConnect": "转向连接",
+    		"nf-summary-table.GoToProcessorGroup": "转向处理组",
+    		"nf-summary-table.ViewProcessorGroup": "查看处理组详情",
+    		"nf-summary-table.GoToInputPort": "转向输入端口",
+    		"nf-summary-table.ViewInputPort": "查看输入端口详情",
+    		"nf-summary-table.GoToOutputPort": "转向输出端口",
+    		"nf-summary-table.ViewOutputPort": "查看输出端口详情",
+    		"nf-summary-table.ViewRemoteProcessorGroup": "查看远程处理组详情",
+    		"nf-summary-table.aria1": "数据流存储库存储使用",
+            "nf-summary.Summary": "总结",
+            "nf-templates-table.Templates": " 模版",
+            "nf-templates-table.Message": "选择模版导入",
+            "nf-templates-table.Filter": "过滤",
+    		"nf-templates-table.DeleteTemplate": "删除模板",
+            "nf-templates-table.Message1": "删除模版 \"",
+    		"nf-templates-table.DownloadTemplate": "下载模板",
+    		"nf-templates-table.Message2": "无法生成用于下载内容的访问令牌.",
+            "nf-templates-table.ByName": "用名称过滤",
+            "nf-templates-table.ByDescription": "用描述过滤",
+            "nf-templates-table.RemovieTemplate": "移除模版",
+            "nf-templates-table.DateTime": "日期/时间",
+            "nf-templates-table.Name": "名称",
+            "nf-templates-table.Description": "描述",
+            "nf-templates-table.GroupId": "处理组标识",
+            "nf-templates-table.Download": "下载",
+            "nf-templates-table.AccessPolicies": "访问策略",
+            "nf-templates.Templates": "模板",
+            "nf-users.Users": "用户",
+            "nf-users-table.Filter": "过滤",
+            "nf-users-table.UserDetails": "用户详情",
+            "nf-users-table.Ok": "确定",
+            "nf-users-table.UserRoles": "用户角色",
+            "nf-users-table.Apply": "应用",
+            "nf-users-table.Cancel": "取消",
+            "nf-users-table.GroupRoles": "组角色",
+            "nf-users-table.DeleteUser": "删除用户",
+            "nf-users-table.Delete": "删除",
+            "nf-users-table.RevokeAccess": "重新启用权限",
+            "nf-users-table.Revoke": "重新启用",
+            "nf-users-table.SetUserGroup": "设置用户组",
+            "nf-users-table.Group": "组",
+            "nf-users-table.Message": "组名不能为空.",
+            "nf-users-table.ByUser": "通过用户过滤",
+            "nf-users-table.ByGroup": "通过组过滤",
+            "nf-users-table.ByRole": "通过角色过滤",
+            "nf-users-table.AuthorizationPending": "授权处理中",
+            "nf-users-table.AccessRevoked": "权限已被重新启用",
+            "nf-users-table.NoRolesSet": "没有角色被设置",
+            "nf-users-table.Message1": "多个用户权限不同",
+            "nf-users-table.Message2": "多个用户状态不同",
+            "nf-users-table.Message3": "状态未被设置",
+            "nf-users-table.EditAccess": "编辑权限",
+            "nf-users-table.RevokeAccess.Ungroup": "脱离组",
+            "nf-users-table.DeleteAccount": "删除帐号",
+            "nf-users-table.User": "用户",
+            "nf-users-table.Roles": "角色",
+            "nf-users-table.LastAccessed": "最后访问",
+            "nf-users-table.Status": "状态",
+            "nf-users-table.GroupUsers": "组内用户",
+            "nf-users-table.Message4": "选择一个或多个用户.",
+            "nf-users-table.Message5": "移除所有用户从组 \\'",
+            "nf-users-table.Message6": "删除 \\'",
+            "nf-users-table.Message7": "\\' 从组 \\'",
+    		"nf-users-table.UserGroup": "用户/组",
+    		"nf-users-table.Edit": "编辑",
+    		"nf-users-table.Remove": "移除",
+    		"jquery-propertytable.SensitiveValueSet": "敏感值",
+            "jquery-propertytable.EmptyStringSet": "空字符串",
+            "jquery-propertytable.NoValueSet": "无值",
+            "jquery-propertytable.RequiredField": "必填属性",
+            "jquery-propertytable.Property": "属性",
+            "jquery-propertytable.Value": "值",        
+            "jquery-propertytable.PropertyName": "属性名称",
+            "jquery-propertytable.NewProperty": "新增属性",        
+            "jquery-propertytable.Ok": "确认",
+            "jquery-propertytable.Delete": "删除",
+            "jquery-propertytable.GoTo": "去",
+            "jquery-propertytable.Cancel": "取消",
+            "jquery-propertytable.Empty": "空值",
+            "jquery-propertytable.SetEmptyString": "设置空字符串",
+            "jquery-propertytable.ControllerService" : "控制器服务",
+            "jquery-propertytable.Tags" : "标签",
+            "jquery-propertytable.Create" : "创建",
+            "jquery-propertytable.Description" : "描述",
+            "jquery-propertytable.AddControllerService" : "添加控制器服务",
+            "jquery-propertytable.AddProperty": "添加属性",
+            "jquery-propertytable.PropertyExists": "属性存在",
+            "jquery-propertytable.Message0": "具有此名称的属性已存在。",
+            "jquery-propertytable.Message": "属性已经存在.",
+            "jquery-propertytable.Message1": "必须指定属性名.",
+            "jquery-propertytable.Message3": "创建新服务...",
+            "jquery-propertytable.Message2": "该属性没有控制器服务与其对应.",
+            "slick.editors.Message1": "请输入有效的整数",
+            "slick.editors.Message2": "请输入有效的正数",
+            "slick.grid.Message1": "Slickgrid需要一个有效的容器，",
+            "slick.grid.Message2": "不存在于DOM中",
+            "slick.grid.Message3": "找不到样式表。",
+            "slick.grid.Message4": "添加单元格Css样式：单元格CSS哈希的键'",
+            "slick.grid.Message5": "'已经存在。",
+            "slick.grid.Message6": "从节点获取单元：无法获取单元 -",
+            "slick.grid.Message7": "Grid : 使活动单元格可编辑 : options.editable为false时,应该永远不会调用",
+            "slick.grid.Message8": "未设置选择模型",
+            "jquery-tagcloud.NoTagsSpecified": "未指定标签"       
+        };
+    var en = {
+    		"nf-actions.UpdateResource": "Update Resource",
+    		"nf-actions.Refreshing": "Refreshing",
+    		"nf-actions.RemoteGroupProcess": "Remote Group Process",
+    		"nf-actions.NoTargetURIDefined": "No target URI defined.",
+    		"nf-actions.Header1": "Enable components",
+    		"nf-actions.Message1": "No eligible components are selected. Please select the components to be enabled and ensure they are no longer running.",
+    		"nf-actions.Header2": "Disable components",
+    		"nf-actions.Message2": "No eligible components are selected. Please select the components to be disabled and ensure they are no longer running.",
+    		"nf-actions.Header3": "Start components",
+    		"nf-actions.Message3": "No eligible components are selected. Please select the components to be started and ensure they are no longer running.",
+    		"nf-actions.Header4": "Stop components",
+    		"nf-actions.Message4": "No eligible components are selected. Please select the components to be stopped.",
+    		"nf-actions.Header5": "Reload",
+    		"nf-actions.Message5": "No eligible components are selected. Please select the components to be deleted.",
+    		"nf-actions.Header6": "Paste error",
+    		"nf-actions.EmptyQueue": "Empty Queue",
+    		"nf-actions.Message6": "Are you sure you want to empty this queue? All FlowFiles waiting at the time of the request will be removed.",
+    		"nf-actions.Cancel": "Cancel",
+    		"nf-actions.Empty": "Empty",
+    		"nf-actions.Stop": "Stop",
+    		"nf-actions.Message7": " were removed from the queue.",
+    		"nf-actions.Message8": "No FlowFiles were removed.",
+    		"nf-actions.Message9": "The current selection is not valid to create a template.",
+    		"nf-actions.CreateTemplate": "Create Template",
+    		"nf-actions.Create": "Create",
+    		"nf-actions.Template": "Template '",
+    		"nf-actions.Message11": "' was successfully created.",
+    		"nf-actions.Message12": "An error occurred while attempting to copy and paste.",
+    		"nf-actions.Message13": "The template name can not be empty.",
+    		"nf-actions.Message14": "Delete the request percentage to complete",
+    		"nf-actions.Message15": "Flow files",
+    		"nf-actions.Message16": "In",
+    		"nf-actions.Message17": "Outside",
+    		"nf-actions.Message18": "Remove from the queue.",
+    		"nf-actions.Message19": "No reference to the component.",
+    		"nf-canvas-graph-controls-controller.ProcessGroup": "Process Group",
+    		"nf-canvas-graph-controls-controller.Processor": "Processor",
+    		"nf-canvas-graph-controls-controller.InputPort": "Input Port",
+    		"nf-canvas-graph-controls-controller.OutputPort": "Output Port",
+    		"nf-canvas-graph-controls-controller.RemoteProcessGroup": "Remote Process Group",
+    		"nf-canvas-graph-controls-controller.Funnel": "Funnel",
+    		"nf-canvas-graph-controls-controller.Label": "Label",
+    		"nf-canvas-graph-controls-controller.Connection": "Connection",
+    		"nf-canvas-graph-controls-controller.MultipleSelected": "Multiple Selected",
+    		"nf-canvas-global-menu-controller.About": "About Flow Files",
+    		"nf-canvas-global-menu-controller.OK": "OK",
+    		"nf-canvas-operate-controller.SUCCESS": "SUCCESS",
+    		"nf-canvas-operate-controller.SuccessContent": "The template was successfully imported.",
+    		"nf-canvas-operate-controller.Upload": "Upload template",
+    		"nf-canvas-operate-controller.ButtonUpload": "Upload template",
+    		"nf-canvas-operate-controller.UploadTemplate": "No template is selected. Please select a template in the browser.",
+    		"nf-canvas-operate-controller.Cancel": "Cancel",
+    		"nf-canvas-operate-controller.ChangeColor": "Change Color",
+    		"nf-canvas-operate-controller.Apply": "Apply",
+    		"nf-canvas-operate-controller.Error": "Error",
+    		"nf-canvas-operate-controller.CreateTemplate": "Create Template",
+    		"nf-canvas-operate-controller.Message1": "The template can not be imported. Please check the errors in the log.",
+    		"nf-canvas-flow-status.Processors": "Processors",
+    		"nf-canvas-flow-status.ProcessGroups": "Process Groups",
+    		"nf-canvas-flow-status-controller.Processors": "Processors",
+    		"nf-canvas-flow-status-controller.ProcessGroups": "Process Groups",
+    		"nf-canvas-flow-status-controller.RemoteProcessGroups": "Remote Process Groups",
+    		"nf-canvas-flow-status-controller.Connection": "Connection",
+    		"nf-canvas-flow-status-controller.InputPorts": "InputPorts",
+    		"nf-canvas-flow-status-controller.OutputPorts": "OutputPorts",
+    		"nf-canvas-flow-status-controller.Funnel": "Funnel",
+    		"nf-canvas-flow-status-controller.no-matches": "Did not meet the results of the query request",
+    		"nf-canvas-toobbar.Start": "Start",
+    		"nf-canvas-toobbar.Stop": "Stop",
+    		"nf-canvas-toobbar.Copy": "Copy",
+    		"nf-canvas-toobbar.Paste": "Paste",
+    		"nf-canvas-toobbar.Group": "Group",
+    		"nf-canvas-toobbar.Enable": "Enable",
+    		"nf-canvas-toobbar.Disable": "Disable",
+    		"nf-canvas-toobbar.CreateTemplate": "Create Template",
+    		"nf-canvas-toobbar.ChangeColor": "Change Color",
+    		"nf-canvas-toobbar.Delete": "Delete",
+    		"nf-canvas-header.OK": "Ok",
+    		"nf-canvas-header.CreateTemplate": "Create Template",
+    		"nf-canvas-header.Fill": "Fill",
+    		"nf-canvas-header.Apply": "Apply",
+    		"nf-canvas-header.Cancel": "Cancel",
+    		"nf-group-component.AddProcessGroup": "Add Process Group",
+    		"nf-group-component.Add": "Add",
+    		"nf-group-component.Cancel": "Cancel",
+    		"nf-input-port-component.AddPort": "Add Port",
+    		"nf-input-port-component.Add": "Add",
+    		"nf-input-port-component.Cancel": "Cancel",
+    		"nf-input-port-component.new-port-type": "Enter",
+    		"nf-output-port-component.Add": "Add",
+    		"nf-output-port-component.Cancel": "Cancel",
+    		"nf-output-port-component.new-port-type": "Output",
+    		"nf-processor-component.AddProcessor": "Add Processor",
+    		"nf-processor-component.AddProcessorContent": "The processor that created this type must be selected.",
+    		"nf-processor-component.Add": "Add",
+    		"nf-processor-component.Cancel": "Cancel",
+    		"nf-processor-component.Type": "Type",
+    		"nf-processor-component.Tags": "Tags",
+    		"nf-processor-component.NoDescriptionSpecified": "No Description Specified",
+    		"nf-remote-process-group-component.ConfigurationError": "Configuration Error",
+    		"nf-remote-process-group-component.AddRemoteProcessGroup": "Add Remote Process Group",
+    		"nf-remote-process-group-component.Add": "Add",
+    		"nf-remote-process-group-component.Cancel": "Cancel",
+    		"nf-template-component.AddTemplate": "Add Template",
+    		"nf-template-component.Add": "Add",
+    		"nf-template-component.Cancel": "Cancel",
+    		"nf-template-component.InstantiateTemplate": "Instantiate Template",
+    		"nf-template-component.InstantiateTemplateContent": "There is no template to load in the flow files.",
+    		"nf-canvas-header.Message": "Unable to refresh the current group.",
+    		"nf-canvas-header.components.AddGroup": "Add Group",
+    		"nf-canvas-header.components.AddButton": "Add",
+    		"nf-canvas-header.components.CancelButton": "Cancel",
+    		"nf-canvas-toolbox.Input": "Input",
+    		"nf-canvas-toolbox.OutPut": "Output",
+    		"nf-canvas-toolbox.Filter": "Filter",
+    		"nf-canvas-toolbox.Processor": "Processor",
+    		"nf-canvas-toolbox.InputPort": "Input Port",
+    		"nf-canvas-toolbox.OutputPort": "Output Port",
+    		"nf-canvas-toolbox.ProcessGroup": "Process Group",
+    		"nf-canvas-toolbox.RemoteProcessGroup": "Remote Process Group",
+    		"nf-canvas-toolbox.Connection": "Connection",
+    		"nf-canvas-toolbox.Funnel": "Funnel",
+    		"nf-canvas-toolbox.Template": "Template",
+    		"nf-canvas-toolbox.Label": "Label",
+    		"nf-canvas-toolbox.Add": "Add",
+    		"nf-canvas-toolbox.Cancel": "Cancel",
+    		"nf-canvas-toolbox.Instantiate Template": "Instantiate Template",
+    		"nf-canvas-toolbox.Message": "No templates have been loaded into this NiFi.",
+    		"nf-canvas-toolbox.Type": "Type",
+    		"nf-canvas-toolbox.Tags": "Tags",
+    		"nf-canvas-toolbox.Message1": "No description specified",
+    		"nf-canvas-toolbox.AddProcessor": "Add Processor",
+    		"nf-canvas-toolbox.AddPort": "Add Port",
+    		"nf-canvas-toolbox.AddProcessGroup": "Add Process Group",
+    		"nf-canvas-toolbox.AddRemoteProcessGroup": "Add Remote Process Group",
+    		"nf-canvas-utils.Header1": "Process Group",
+    		"nf-canvas-utils.Message1": "Unable to load the group for the specified component.",
+    		"nf-canvas-utils.Message2": "Unable to find the specified component.",
+    		"nf-canvas-utils.Message3": "Unable to enter the selected group.",
+    		"nf-canvas-utils.Message4": "Cannot move Ports out of the root group",
+    		"nf-canvas-utils.Message5": "The following ports are currently connected outside of this group: <b>",
+    		"nf-canvas-utils.Message6": "The following ports already exist in the target process group: <b>",
+    		"nf-canvas-utils.Message7": "Components are already in the topmost group",
+    		"nf-canvas.Browser": "Unsupported Browser",
+    		"nf-canvas.Message1": "Flow graphs are shown using SVG. Please use a browser that supports rendering SVG.",
+    		"nf-canvas.ClusterConn": "Cluster Connection",
+    		"nf-canvas.Message2": "This node is not currently connected to the cluster. Any changes made to the data stream here are not replicated in the cluster.",
+    		"nf-canvas.Message3": "This node has just been added to the cluster. Any changes to the data stream here will be replicated in the cluster.",
+    		"nf-component-state.Header1": "Component status",
+    		"nf-component-state.Button1": "Close",
+    		"nf-component-state.Content1": "The component does not need to be cleared",
+    		"nf-component-state.Message1": "The component status can only be cleared when the component is not active",
+    		"nf-component-state.Key": "Key",
+    		"nf-component-state.Value": "Value",
+    		"nf-component-state.Scope": "Scope",
+    		"nf-connection-configuration.ConnectionConfiguration": "Connection Configuration",
+    		"nf-connection-configuration.Add": "Add",
+    		"nf-connection-configuration.Message0": "The connection must have at least one relationship selected.",
+    		"nf-connection-configuration.Cancel": "Cancel",
+    		"nf-connection-configuration.Message1": "\\' does not support any relationships.",
+    		"nf-connection-configuration.Message2": "\\' does not have any output ports.",
+    		"nf-connection-configuration.Message4": "\\' does not have any input ports.",
+    		"nf-connection-configuration.Message5": "未授权任何输出端口 \\'",
+    		"nf-connection-configuration.Message6": "Configuration Error",
+    		"nf-connection-configuration.ConfigureConnection": "Configure Connection",
+    		"nf-connection-configuration.Detail": "Details",
+    		"nf-connection-configuration.Setting": "Settings",
+    		"nf-connection-configuration.CreateConnection": "Create Connection",
+    		"nf-connection-configuration.Apply": "Apply",
+    		"nf-connection-configuration.Message7": "The connection must have at least one relationship selected.",
+    		"nf-connection.Connection": "Connection",
+    		"nf-connection.Message1": "Looping connections must have at least two bend points.",
+    		"nf-connection.From": "From",
+    		"nf-connection.To": "To",
+    		"nf-connection.Name": "Name",
+    		"nf-connection.Queued": "Queued",
+    		"nf-connection.FlowFilesOlder": "Flow Files Older",
+    		"nf-context-menu.RefreshStatus": "Refresh status",
+    		"nf-context-menu.LeaveGroup": "Leave group",
+    		"nf-context-menu.Configure": "Configure",
+    		"nf-context-menu.ViewConfiguration": "View configuration",
+    		"nf-context-menu.EnterGroup": "Enter group",
+    		"nf-context-menu.Start": "Start",
+    		"nf-context-menu.Stop": "Stop",
+    		"nf-context-menu.canEnable": "Enable",
+    		"nf-context-menu.canDisable": "Disable",
+    		"nf-context-menu.canGroup": "Group",
+    		"nf-context-menu.canManagePolicies": "Access Policies",
+    		"nf-context-menu.canAlign1": "Vertical alignment",
+    		"nf-context-menu.canAlign2": "Horizontal alignment",
+    		"nf-context-menu.canUploadTemplate": "Upload Template",
+    		"nf-context-menu.canCreateTemplate": "Create Template",
+    		"nf-context-menu.RemotePorts": "Remote ports",
+    		"nf-context-menu.EnableTransmission": "Enable transmission",
+    		"nf-context-menu.DisableTransmission": "Disable transmission",
+    		"nf-context-menu.StatsHistory": "Stats History",
+    		"nf-context-menu.ViewState": "View State",
+    		"nf-context-menu.Stats": "Stats",
+    		"nf-context-menu.DataProvenance": "Data provenance",
+    		"nf-context-menu.BringFront": "Bring to front",
+    		"nf-context-menu.GoToSource": "Go to source",
+    		"nf-context-menu.GoToDestination": "Go to destination",
+    		"nf-context-menu.UpstreamConnections": "Upstream connections",
+    		"nf-context-menu.DownstreamConnections": "Downstream connections",
+    		"nf-context-menu.Usage": "Usage",
+    		"nf-context-menu.Refresh": "Refresh",
+    		"nf-context-menu.GoTo": "Go to",
+    		"nf-context-menu.ChangeColor": "Change color",
+    		"nf-context-menu.CenterInView": "Center in view",
+    		"nf-context-menu.Copy": "Copy",
+    		"nf-context-menu.Paste": "Paste",
+    		"nf-context-menu.MoveParentGroup": "Move to parent group",
+    		"nf-context-menu.QueueList": "Queue List",
+    		"nf-context-menu.EmptyQueue": "Empty queue",
+    		"nf-context-menu.Delete": "Delete",
+    		"nf-controller-service.ConfigurationError": "Configuration Error",
+    		"nf-controller-service.Cancel": "Cancel",
+    		"nf-controller-service.Close": "Close",
+    		"nf-controller-service.Message1": "Steps to disable",
+    		"nf-controller-service.ActionCanceled": "Action Canceled",
+    		"nf-controller-service.Message2": "The request to disable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
+    		"nf-controller-service.Message3": "Steps to enable ",
+    		"nf-controller-service.Message4": "Action Canceled",
+    		"nf-controller-service.Message5": "The request to enable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
+    		"nf-controller-service.Message6": "Save changes before going to this Controller Service?",
+    		"nf-controller-service.Settings": "Settings",
+    		"nf-controller-service.Properties": "Properties",
+    		"nf-controller-service.Comments": "Comments",
+    		"nf-controller-service.Message7": "Configure Controller Service",
+    		"nf-controller-service.Message8": "Disable Controller Service",
+    		"nf-controller-service.Disable": "Disable",
+    		"nf-controller-service.ServiceOnle": "Service only",
+    		"nf-controller-service.Message9": "Enable only this controller service",
+    		"nf-controller-service.Message10": "Service and referencing components",
+    		"nf-controller-service.Message11": "Enable this controller service and enable/start all referencing components",
+    		"nf-controller-service.Message12": "Enable Controller Service",
+    		"nf-controller-service.Enable": "Enable",
+    		"nf-controller-service.Apply": "Apply",
+    		"nf-controller-service.Advanced": "Advanced",
+    		"nf-controller-service.Message13": "Save changes before opening the advanced configuration?",
+    		"nf-controller-service.Ok": "Ok",
+    		"nf-controller-service.ControllerService": "Controller Service",
+    		"nf-controller-service.Message14": "The unauthorized component can not be disabled due to unauthorized use.",
+    		"nf-controller-service.Message15": "Unable to invoke component due to unauthorized use.",
+    		"nf-controller-service.Save": "Save",
+    		"nf-controller-service.Message16": "Save the changes before entering the controller service?",
+    		"nf-controller-services.Add": "Add",
+    		"nf-controller-services.ControllerService": "Controller Service",
+    		"nf-controller-services.Message14": "You must select the type of controller service you want to create.",
+    		"nf-controller-services.AddControllerService": "Add Controller Service",
+    		"nf-controller-services.Invalid": "Invalid",
+    		"nf-controller-services.Disabled": "Disabled",
+    		"nf-controller-services.Disabling": "Disabling",
+    		"nf-controller-services.Enabled": "Enabled",
+    		"nf-controller-services.Enabling": "Enabling",
+    		"nf-controller-services.toolTip": "Based on the presence of the announcement",
+    		"nf-controller-services.Name": "Name",
+    		"nf-controller-services.Type": "Type",
+    		"nf-controller-services.Tags": "Tags",
+    		"nf-controller-services.State": "State",
+    		"nf-controller-services.ProcessGroup": "Process Group",
+    		"nf-controller-services.type-description": "Not specified",
+    		"nf-controller-services.viewDtails": "View Dtails",
+    		"nf-controller-services.usage": "Usage",
+    		"nf-controller-services.disable": "Disable",
+    		"nf-controller-services.edit": "Edit",
+    		"nf-controller-services.enable": "Enable",
+    		"nf-controller-services.viewstate": "View State",
+    		"nf-controller-services.remove": "Remove",
+    		"nf-controller-services.acesspolicies": "Access Policies",
+    		"nf-custom-ui.AdvancedConfiguration": "Advanced Configuration",
+    		"nf-custom-ui.Message1": "Unable to generate an access token to access the Advanced Access Configuration dialog box.",
+    		"nf-draggable.ComponentPosition": "Component Position",
+    		"nf-draggable.Message1": "Unauthorized modification of destination group.",
+    		"nf-draggable.Message2": "Each component that chooses to modify must be authorized.",
+    		"nf-go-to.Close": "Close",
+    		"nf-go-to.NoDownstreamComponents": "No Downstream Components",
+    		"nf-go-to.NoUpstreamComponents": "No Upstream Components",
+    		"nf-go-to.DownstreamConnections": "Downstream Connections",
+    		"nf-go-to.UpstreamConnections": "Upstream Connections",
+    		"nf-go-to.Message1": "No upstream components",
+    		"nf-go-to.Message2": "No downstream components",
+    		"nf-go-to.Funnel": "Funnel",
+    		"nf-label-configuration.ConfigureLabel": "Configure Label",
+    		"nf-label-configuration.Apply": "Apply",
+    		"nf-label-configuration.Cancel": "Cancel",
+    		"nf-policy-management.ViewUserInterface": "View User Interface",
+    		"nf-policy-management.AcessController": "Acess Controller",
+    		"nf-policy-management.QueryProvenance": "Query Provenance",
+    		"nf-policy-management.AcessPolicies": "Acess Policies",
+    		"nf-policy-management.AcessUser": "Acess User/Group",
+    		"nf-policy-management.retrieve": "Retrieve site-to-site details",
+    		"nf-policy-management.diagnostics": "View system analysis",
+    		"nf-policy-management.proxy": "Proxy user request",
+    		"nf-policy-management.counters": "Access counters",
+    		"nf-policy-management.ViewComponent": "View Component",
+    		"nf-policy-management.ModifyComponent": "Modify Component",
+    		"nf-policy-management.ViewData": "View Data",
+    		"nf-policy-management.ModifyData": "Modify Data",
+    		"nf-policy-management.ReceiveData": "Through the site to the site to receive data",
+    		"nf-policy-management.SendData": "Send Data",
+    		"nf-policy-management.ViewPolicies": "View Policies",
+    		"nf-policy-management.ModifyPolicies": "Modify Policies",
+    		"nf-policy-management.Searchusers": "Search users",
+    		"nf-policy-management.Ok": "Ok",
+    		"nf-policy-management.Add": "Add",
+    		"nf-policy-management.UserSearch": "User Search",
+    		"nf-policy-management.Message1": "There is no matching user\\'",
+    		"nf-policy-management.Message2": "Multiple users match\\'",
+    		"nf-policy-management.Cancel": "Cancel",
+    		"nf-policy-management.UpdatePolicy": "Update Policy",
+    		"nf-policy-management.DeletePolicy": "Delete Policy",
+    		"nf-policy-management.Message3": "Delete\\'",
+    		"nf-policy-management.Message4": "\\'From this strategy?",
+    		"nf-policy-management.Message5": "Are you sure you want to delete this policy?",
+    		"nf-policy-management.Message6": "No choice strategy",
+    		"nf-policy-management.Message7": "Allows the user to view the user interface",
+    		"nf-policy-management.Message8": "Allows the user to view / modify the controller, including reporting tasks in the cluster, controller services, and nodes",
+    		"nf-policy-management.Message9": "Allows users to submit source searches and request event inheritance",
+    		"nf-policy-management.Message10": "Allows users to view / modify policies for all components",
+    		"nf-policy-management.Message11": "Allows users to view / modify user groups",
+    		"nf-policy-management.Message12": "Allows other instances of NiFi to retrieve the Site-to-Site details for this data stream",
+    		"nf-policy-management.Message13": "Allow users to view system analysis",
+    		"nf-policy-management.Message14": "Allows the proxy computer to send requests on behalf of others",
+    		"nf-policy-management.Message15": "Allows the user to view / modify the counter",
+    		"nf-policy-management.Message16": "Allows users to view component configuration details",
+    		"nf-policy-management.Message17": "Allows the user to modify the component configuration details",
+    		"nf-policy-management.Message18": "Allows the user to view the metadata and content of this component through the source data and stream file queues in the outbound connection",
+    		"nf-policy-management.Message19": "Allows the user to empty the stream file queue in the outbound connection and submit the replay",
+    		"nf-policy-management.Message20": "Allows this port to receive data from these data stream instances",
+    		"nf-policy-management.Message21": "Allows this port to send data to these data stream instances",
+    		"nf-policy-management.Message22": "Allows users to view a list of users who can view / modify this component",
+    		"nf-policy-management.Message23": "Allows users to modify the list of users who can view / modify this component",
+    		"nf-policy-management.Message24": "By removing this policy, the permissions for this component will revert to inherited policies, if applicable.",
+    		"nf-policy-management.Text1": "Shows the valid policies inherited from",
+    		"nf-policy-management.Text2": "No component specific administrator.",
+    		"nf-policy-management.Text3": "Unauthorized access to the specified resource policy.",
+    		"nf-policy-management.Text4": "Unauthorized view of the policy.",
+    		"nf-policy-management.Text5": "There is no policy for specifying resources.",
+    		"nf-policy-management.Text6": "Unauthorized access to the specified resource policy.",
+    		"nf-policy-management.Write": "Write",
+    		"nf-policy-management.Read": "Read",
+    		"nf-policy-management.View": "View",
+    		"nf-policy-management.Modify": "Modify",
+    		"nf-policy-management.AllPolicies": "All Policies",
+    		"nf-policy-management.Controller": "Controller",
+    		"nf-policy-management.ProcessorGroup": "Processor Group",
+    		"nf-policy-management.reporting-tasks": "Reporting Tasks",
+    		"nf-policy-management.NoUserSearch": "No User Search",
+    		"nf-policy-management.Remove": "Remove",
+    		"nf-port-configuration.ConfigurePort": "Configure Port",
+    		"nf-port-configuration.Apply": "Apply",
+    		"nf-port-configuration.ConfigurationError": "Configuration Error",
+    		"nf-port-configuration.Cancel": "Cancel",
+    		"nf-port-details.PortDetails": "Port Details",
+    		"nf-port-details.OK": "Ok",
+    		"nf-process-group-configuration.ConfigureProcessGroup": "Configure Process Group",
+    		"nf-process-group-configuration.Apply": "Apply",
+    		"nf-process-group-configuration.Cancel": "Cancel",
+    		"nf-process-group-configuration.General": "General",
+    		"nf-process-group-configuration.ControllerService": "Controller Service",
+    		"nf-process-group-details.ProcessGroupDetails": "Process Group Details",
+    		"nf-process-group-details.Ok": "Ok",
+    		"nf-process-group.Message1": "No comments specified",
+    		"nf-process-group.Queued": "Queued",
+    		"nf-process-group.In": "In",
+    		"nf-process-group.ReadWrite": "Read/Write",
+    		"nf-process-group.Out": "Out",
+    		"nf-process-group.5min": "(5 min)",
+    		"nf-processor-configuration.TimerDriven": "Timer driven",
+    		"nf-processor-configuration.Message1": "Processor will be scheduled to run on an interval defined by the run schedule.",
+    		"nf-processor-configuration.EventDriven": "Event driven",
+    		"nf-processor-configuration.Message2": "Processor will be scheduled to run when triggered by an event (e.g. a FlowFile enters an incoming queue). This scheduling strategy is experimental.",
+    		"nf-processor-configuration.OnPrimaryNode": "On primary node",
+    		"nf-processor-configuration.Message3": "Processor will be scheduled on the primary node on an interval defined by the run schedule.",
+    		"nf-processor-configuration.CronDriven": "CRON驱动",
+    		"nf-processor-configuration.Message5": "Processor will be scheduled to run on at specific times based on the specified CRON string.",
+    		"nf-processor-configuration.Error1": "Concurrent tasks must be integer values",
+    		"nf-processor-configuration.Error2": "Must specify an operational plan",
+    		"nf-processor-configuration.Error3": "The duration of the penalty must be specified",
+    		"nf-processor-configuration.Error4": "Must specify the duration of the production",
+    		"nf-processor-configuration.ConfigurationError": "Configuration Error",
+    		"nf-processor-configuration.Message6": "Save changes before going to this Controller Service?",
+    		"nf-processor-configuration.Settings": "Settings",
+    		"nf-processor-configuration.Scheduling": "Scheduling",
+    		"nf-processor-configuration.Properties": "Properties",
+    		"nf-processor-configuration.Comments": "Comments",
+    		"nf-processor-configuration.ConfigureProcessor": "Configure Processor",
+    		"nf-processor-configuration.Debug": "DEBUG",
+    		"nf-processor-configuration.Info": "INFO",
+    		"nf-processor-configuration.Warn": "WARN",
+    		"nf-processor-configuration.Error": "ERROR",
+    		"nf-processor-configuration.Apply": "Apply",
+    		"nf-processor-configuration.Cancel": "Cancel",
+    		"nf-processor-configuration.Advanced": "Advanced",
+    		"nf-processor-configuration.Message7": "Save changes before opening the advanced configuration?",
+    		"nf-processor-configuration.ThisProcessorHasNoRelationships": "This processor does not matter.",
+    		"nf-processor-configuration.ViewDetails": "View Details",
+    		"nf-processor-configuration.Provenance": "Provenance",
+    		"nf-processor.In": "In",
+    		"nf-processor.ReadWrite": "Read/Write",
+    		"nf-processor.Out": "Out",
+    		"nf-processor.TasksTime": "Tasks/Time",
+    		"nf-processor.5min-1": "5 分钟",
+    		"nf-processor.5min": "(5 min)",
+    		"nf-registration.Thanks": "Thanks",
+    		"nf-registration.Message1": "Your request will be processed shortly.",
+    		"nf-queue-listing.QueueListing": "队列列表",
+    		"nf-queue-listing.Message1": "Unable to generate an access token for downloading content.",
+    		"nf-queue-listing.Message2": "Unable to generate access token for viewing content.",
+    		"nf-queue-listing.Stop": "Stop",
+    		"nf-queue-listing.Message3": "Queue has no stream file.",
+    		"nf-queue-listing.FlowFile": "Flow File",
+    		"nf-queue-listing.Ok": "Ok",
+    		"nf-queue-listing.Message4": "The source and destination of this queue are currently running. This list may no longer be accurate.",
+    		"nf-queue-listing.Message5": "The source of this queue is currently running. This listing may no longer be accurate.",
+    		"nf-queue-listing.Message6": "The goal of this queue is running. This listing may no longer be accurate.",
+    		"nf-queue-listing.NoValueSet": "No Value Set",
+    		"nf-queue-listing.Yes": "Yes",
+    		"nf-queue-listing.No": "No",
+    		"nf-queue-listing.Position": "Position",
+    		"nf-queue-listing.FileName": "File Name",
+    		"nf-queue-listing.FileSize": "File Size",
+    		"nf-queue-listing.queuedDuration": "Queued Duration",
+    		"nf-queue-listing.lineageDuration": "Lineage Duration",
+    		"nf-queue-listing.penalized": "Penalized",
+    		"nf-queue-listing.node": "Node",
+    		"nf-queue-listing.Bytes": "Bytes",
+    		"nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "Configure Remote Process Group",
+    		"nf-remote-process-group-configuration.Apply": "Apply",
+    		"nf-remote-process-group-configuration.ConfigurationError": "Configuration Error",
+    		"nf-remote-process-group-configuration.Cancel": "Cancel",
+    		"nf-remote-process-group-configuration.Message5": "Remote process group configuration",
+    		"nf-remote-process-group-details.RemoteProcessGroupDetails": "Remote Process Group Details",
+    		"nf-remote-process-group-details.Ok": "Ok",
+    		"nf-remote-process-group-ports.ConfigureRemotePort": "Configure Remote Port",
+    		"nf-remote-process-group-ports.Apply": "Apply",
+    		"nf-remote-process-group-ports.ConfigurationError": "Configuration Error",
+    		"nf-remote-process-group-ports.Message1": "Concurrent tasks must be an integer value.",
+    		"nf-remote-process-group-ports.Cancel": "Cancel",
+    		"nf-remote-process-group-ports.RemoteProcessGroupPorts": "Remote Process Group Ports",
+    		"nf-remote-process-group-ports.Close": "Close",
+    		"nf-remote-process-group-ports.Message2": "No description specified.",
+    		"nf-remote-process-group-ports.Message3": "This port has been deleted.",
+    		"nf-remote-process-group-ports.Message4": "The number of tasks that should be scheduled for this port at the same time.",
+    		"nf-remote-process-group-ports.transmissionSwitch": "Switch port transfer",
+    		"nf-remote-process-group-ports.description": "Not specified.",
+    		"nf-remote-process-group.Message1": "No comments specified",
+    		"nf-remote-process-group.Sent": "Sent",
+    		"nf-remote-process-group.Received": "Received",
+    		"nf-remote-process-group.5min": "(5 min)",
+    		"nf-remote-process-group.Message2": "Site-to-Site is secure.",
+    		"nf-remote-process-group.Message3": "Site-to-Site is NOT secure.",
+    		"nf-remote-process-group.Message4": "Remote flow not current",
+    		"nf-reporting-task.ReportingTask": "Reporting Task",
+    		"nf-reporting-task.Save": "Save",
+    		"nf-reporting-task.ConfigurationError": "Configuration Error",
+    		"nf-reporting-task.Message1": "Save changes before going to this Controller Service?",
+    		"nf-reporting-task.Settings": "Settings",
+    		"nf-reporting-task.Properties": "Properties",
+    		"nf-reporting-task.Comments": "Comments",
+    		"nf-reporting-task.ConfigureReportingTask": "Configure Reporting Task",
+    		"nf-reporting-task.Node": "Node",
+    		"nf-reporting-task.ClusterManager": "Cluster Manager",
+    		"nf-reporting-task.TimerDriven": "Timer driven",
+    		"nf-reporting-task.Message2": "Reporting task will be scheduled to run on an interval defined by the run schedule.",
+    		"nf-reporting-task.CRONDriven": "CRON driven",
+    		"nf-reporting-task.Message3": "Reporting task will be scheduled to run on at specific times based on the specified CRON string.",
+    		"nf-reporting-task.Apply": "Apply",
+    		"nf-reporting-task.Cancel": "Cancel",
+    		"nf-reporting-task.Advanced": "Advanced",
+    		"nf-reporting-task.Message4": "Save changes before opening the advanced configuration?",
+    		"nf-reporting-task.Ok": "Ok",
+    		"nf-search.Search": "Search",
+    		"nf-secure-port-configuration": "Settings",
+    		"nf-secure-port-configuration.AccessControl": "Access Control",
+    		"nf-secure-port-configuration.ConfigureSecurePort": "Configure Secure Port",
+    		"nf-secure-port-configuration.Apply": "Apply",
+    		"nf-secure-port-configuration.Cancel": "Cancel",
+    		"nf-secure-port-configuration.InputPort": "InputPort",
+    		"nf-secure-port-configuration.OutputPort": "OutputPort",
+    		"nf-secure-port-details.Settings": "Settings",
+    		"nf-secure-port-details.AccessControl": "Access Control",
+    		"nf-secure-port-details.SecurePortDetails": "Secure Port Details",
+    		"nf-secure-port-details.Ok": "Ok",
+    		"nf-settings.Filter": "Filter",
+    		"nf-settings.Message1": "A new flow archive was successfully created.",
+    		"nf-settings.Message2": "Settings successfully applied.",
+    		"nf-settings.Message3": "The type of controller service to create must be selected.",
+    		"nf-settings.Text": "Node",
+    		"nf-settings.ClusterManager": "Cluster Manager",
+    		"nf-settings.Message4": "This controller service will be available on the nodes only.",
+    		"nf-settings.Message5": "This controller service will be available on the cluster manager only.",
+    		"nf-settings.Message6": "No description specified",
+    		"nf-settings.Message7": "Add Controller Service",
+    		"nf-settings.Add": "Add",
+    		"nf-settings.Cancel": "Cancel",
+    		"nf-settings.Node": "Node",
+    		"nf-settings": "Cluster Manager",
+    		"nf-settings.ViewDetail": "View Details",
+    		"nf-settings.Disable": "Disable",
+    		"nf-settings.Enable": "Enable",
+    		"nf-settings.Remove": "Remove",
+    		"nf-settings.Usage": "Usage",
+    		"nf-settings.Name": "Name",
+    		"nf-settings.State": "State",
+    		"nf-settings.Availability": "Availability",
+    		"nf-settings.Message8": "This reporting task will be available on the nodes only.",
+    		"nf-settings.Message9": "This reporting task will be available on the cluster manager only.",
+    		"nf-settings.Type": "Type",
+    		"nf-settings.Tags": "Tags",
+    		"nf-settings.Message10": "No description specified",
+    		"nf-settings.Message11": "Add Reporting Task",
+    		"nf-settings.ViewDetails": "View Details",
+    		"nf-settings.Stop": "Stop",
+    		"nf-settings.Edit": "Edit",
+    		"nf-settings.Start": "Start",
+    		"nf-settings.RunStatus": "Run Status",
+    		"nf-settings.General": "General",
+    		"nf-settings.ControllerServices": "Controller Services",
+    		"nf-settings.ReportingTasks": "Reporting Tasks",
+    		"nf-settings.Message12": "Create a new controller service",
+    		"nf-settings.Message13": "Create a new reporting task",
+    		"nf-settings.Settings": " Settings",
+    		"nf-settings.ViewState": "ViewState",
+    		"nf-settings.AccessPolicies": "Access Policies",
+    		"nf-settings.Invalid": "Invalid",
+    		"nf-settings.Stopped": "Stopped",
+    		"nf-settings.Running": "Running",
+    		"nf-settings.Disabled": "Disabled",
+    		"nf-about": "NiFi Flow",
+    		"nf-bulletin-board.defaultFilterText": "Filter",
+    		"nf-bulletin-board.ByMessage": "by message",
+    		"nf-bulletin-board.ByName": "by name",
+    		"nf-bulletin-board.ById": "by id",
+    		"nf-bulletin-board.ByGroupId": "by group id",
+    		"nf-bulletin-board.Message1": "Filter ",
+    		"nf-bulletin-board.Message2": " matching \\\\'",
+    		"nf-bulletin-board.Message3": "Auto refresh started",
+    		"nf-bulletin-board.Message4": "Auto refresh stopped",
+    		"nf-bulletin-board.Message5": "Remove the filter",
+    		"nf-bulletin-board.BulletinBoard": " Bulletin Board",
+    		"nf-cluster.Cluster": " Cluster",
+    		"nf-cluster-table.Filter": "Filter",
+    		"nf-cluster-table.Message1": "Connect \\'",
+    		"nf-cluster-table.Message2": "\\' to this cluster?",
+    		"nf-cluster-table.Message3": "Disconnect \\'",
+    		"nf-cluster-table.Message4": "\\' from the cluster?",
+    		"nf-cluster-table.Message5": "Remove \\'",
+    		"nf-cluster-table.Message6": "\\' from the cluster?",
+    		"nf-cluster-table.NodeDetails": "Node Details",
+    		"nf-cluster-table.Ok": "Ok",
+    		"nf-cluster-table.ByAddress": "by address",
+    		"nf-cluster-table.ByStatus": "by status",
+    		"nf-cluster-table.ViewDetails": "View Details",
+    		"nf-cluster-table.Node Address": "Node Address",
+    		"nf-cluster-table.ActiveThreadCount": "Active Thread Count",
+    		"nf-cluster-table.Size": "Size",
+    		"nf-cluster-table.Queue": "Queue",
+    		"nf-cluster-table.Status": "Status",
+    		"nf-cluster-table.Uptime": "Uptime",
+    		"nf-cluster-table.LastHeartbeat": "Last Heartbeat",
+    		"nf-cluster-table.Connect": "Connect",
+    		"nf-cluster-table.Remove": "Remove",
+    		"nf-cluster-table.Disconnect": "Disconnect",
+    		"nf-cluster-table.MakePrimary": "Make Primary",
+    		"nf-cluster-table.None": "无",
+    		"nf-counters-table.Filter": "Filter",
+    		"nf-counters-table.ByName": "by name",
+    		"nf-counters-table.ByContext": "by context",
+    		"nf-counters-table.Context": "Context",
+    		"nf-counters-table.Name": "Name",
+    		"nf-counters-table.Value": "Value",
+    		"nf-counters-table.Reset": "Reset",
+    		"nf-counters-table.Delete": "Delete",
+    		"nf-counters-table.Connect": "Connect",
+    		"nf-counters.Counters": " Counters",
+    		"nf-history.History": "历史",
+    		"nf-history-table.Filter": "Filter",
+    		"nf-history-table.ActionDetail": "Action Details",
+    		"nf-history-table.Ok": "Ok",
+    		"nf-history-table.ById": "by id",
+    		"nf-history-table.Message1": "Filters based on the id of the component that was modified",
+    		"nf-history-table.ByUser": "by user",
+    		"nf-history-table.Message2": "Filters based on the user that performed the action",
+    		"nf-history-table.FilterHistory": "Filter History",
+    		"nf-history-table.Cancel": "Cancel",
+    		"nf-history-table.PurgeHistory": "Purge History",
+    		"nf-history-table.Purge": "Purge",
+    		"nf-history-table.History": " History",
+    		"nf-history-table.Message3": "Are you sure you want to delete all history before '",
+    		"nf-history-table.Message3.1": "\\'?",
+    		"nf-history-table.Message4": "The end date must be specified.",
+    		"nf-history-table.ViewDetails": "View Details",
+    		"nf-history-table.DateTime": "Date/Time",
+    		"nf-history-table.Name": "Name",
+    		"nf-history-table.Type": "Type",
+    		"nf-history-table.Operation": "Operation",
+    		"nf-history-table.User": "User",
+    		"nf-history-table.Value": "Value",
+    		"nf-history-table.PreviousValue": "Previous Value",
+    		"nf-history-table.SourceId": "Source Id",
+    		"nf-history-table.SourceName": "Source Name",
+    		"nf-history-table.SourceType": "Source Type",
+    		"nf-history-table.Relationship": "Relationship(s)",
+    		"nf-history-table.DestinationId": "Destination Id",
+    		"nf-history-table.DestinationName": "Destination Name",
+    		"nf-history-table.DestinationType": "Destination Type",
+    		"nf-history-table.Group": "Group",
+    		"nf-history-table.GroupId": "GroupId",
+    		"nf-history-table.PreviousGroup": "Previous Group",
+    		"nf-history-table.PreviousGroupId": "Previous Group Id",
+    		"nf-history-table.EndDate": "End Date",
+    		"nf-history-table.Message5": "A filter based on the id of the modified component",
+    		"nf-history-table.Message6": "A filter based on the user performing the operation",
+    		"nf-history-table.NotAuthorized": "No Authorized",
+    		"nf-history-table.Uri": "Uri",
+    		"nf-history-table.EndTime": "End Time",
+    		"nf-login.Login": "Login",
+    		"nf-login.Logining": "Logining...",
+    		"nf-login.SUCCESS": "SUCCESS",
+    		"nf-login.Denied": "Denied",
+    		"nf-login.Message1": "Can not log in",
+    		"nf-login.Message2": "Can not check access status",
+    		"nf-login.Message3": "The current data stream is not configured with account / password login.",
+    		"nf-common.History": "<b>History:</b><ul class=\"property-info\">",
+    		"nf-common.DefaultValue": "<b>Default Value:</b> ",
+    		"nf-common.SupportsExpressionLanguage": "<b>Supports Expression Language:</b> ",
+    		"nf-common.sensitiveText": "Sensitive value set",
+    		"nf-common.Message1": "An unexpected error has occurred",
+    		"nf-common.Message2": "Please check the logs.",
+    		"nf-common.Message3": "Unable to communicate with NiFi",
+    		"nf-common.Message4": "Unauthorized",
+    		"nf-common.Message5": "Authorization is required to use this NiFi.",
+    		"nf-common.Message6": "Forbidden",
+    		"nf-common.Message7": "Unable to authorize you to use this NiFi.",
+    		"nf-common.Message9": "An error occurred communicating with the application core. Please check the logs and fix any configuration issues before restarting.",
+    		"nf-common.ParseError": "Parse Error",
+    		"nf-common.Message10": "Unable to interpret response from NiFi.",
+    		"nf-common.Message11": ": Unexpected Response",
+    		"nf-common.Message12": "An unexpected error has occurred. Please check the logs.",
+    		"nf-common.Message13": "No value set",
+    		"nf-common.Message14": "Empty string set",
+    		"nf-common.Message15": "Your session will expire soon. Please log in again to avoid being automatically logged out.",
+    		"nf-common.Message16": "You are accessing with limited authority. Log in or request an account to access with additional authority granted to you by an administrator.",
+    		"nf-common.Message17": "Your session has expired. Please reload to log in again.",
+    		"nf-common.Message18": "Your session has expired. Please press Ok to log in again.",
+    		"nf-common.Message19": "Please ensure the application is running and check the logs for any errors.",
+    		"nf-common.Message20": "Request has timed out. Please ensure the application is running and check the logs for any errors.",
+    		"nf-common.Message21": "Request has been aborted.",
+    		"nf-common.Message22": "Request transport mechanism failed. Please ensure the host where the application is running is accessible.",
+    		"nf-common.Message23": "Make sure that the application is running and check if there are any errors in the log.",
+    		"nf-common.Message24": "Can not communicate with data stream",
+    		"nf-common.Unauthorized": "Unauthorized",
+    		"nf-common.Message25": "Use this data stream for authentication.",
+    		"nf-common.Message26": "An unexpected error occurred",
+    		"nf-common.SessionExpired": "Session Expired",
+    		"nf-common.AccessDenied": "Access Denied",
+    		"nf-common.Error": "Error",
+    		"nf-common.SupportsExpressionLanuage":"Supports expression language:",
+    		"nf-common.Message27": "Empty string before setting",
+    		"nf-common.Message28": "No value previously set",
+    		"nf-common.Bytes": " Bytes",
+    		"nf-connection-details.FromProcessor": "From processor",
+    		"nf-connection-details.Processor": "Processor",
+    		"nf-connection-details.FromFunnel": "From Funnel",
+    		"nf-connection-details.FromOutPut": "From output",
+    		"nf-connection-details.FromInput": "From input",
+    		"nf-connection-details.ToProcessor": "To processor",
+    		"nf-connection-details.ToFunnel": "To funnel",
+    		"nf-connection-details.ToInput": "To input",
+    		"nf-connection-details.ToOutput": "To output",
+    		"nf-connection-details.Details": "Details",
+    		"nf-connection-details.Settings": "Settings",
+    		"nf-connection-details.ConnectionDetails": "Connection Details",
+    		"nf-connection-details.Ok": "Ok",
+    		"nf-connection-details.NoValueSet": "No Value Set",
+    		"nf-dialog.Ok": "Ok",
+    		"nf-dialog.Yes": "Yes",
+    		"nf-dialog.No": "No",
+    		"nf-processor-details.Settings": "Settings",
+    		"nf-processor-details.Scheduling": "Scheduling",
+    		"nf-processor-details.Properties": "Properties",
+    		"nf-processor-details.Comments": "Comments",
+    		"nf-processor-details.ProcessorDetails": "Processor Details",
+    		"nf-processor-details.Ok": "Ok",
+    		"nf-processor-details.Advanced": "Advanced",
+    		"nf-processor-details.Error": "错误",
+    		"nf-processor-details.ThisProcessorHasNoRelationships": "This Processor Has No Relationships",
+    		"nf-status-history.StatusHistory":"Status History",
+    		"nf-status-history.Processor": "Processor",
+    		"nf-status-history.InputPort": "Input Port",
+    		"nf-status-history.OutputPort": "Output Port",
+    		"nf-status-history.ProcessGroup": "Process Group",
+    		"nf-status-history.RemoteProcessGroup": "Remote Process Group",
+    		"nf-status-history.Connection": "Connection",
+    		"nf-status-history.Funnel": "Funnel",
+    		"nf-status-history.Template": "Template",
+    		"nf-status-history.Label": "Label",
+    		"nf-status-history.Message":"Insufficient history, please try again later.",
+    		"nf-status-history.Close": "Close",
+    		"nf-status-history.Start": "Start",
+    		"nf-status-history.End": "End",
+    		"nf-status-history.Min_Max_Mean": "Min/Max/Mean",
+    		"nf-status-history.NiFi": "NiFi",
+    		"nf-provenance.DataProvenance": " Data Provenance",
+    		"nf-provenance-lineage.Message1": "Computing FlowFile lineage...",
+    		"nf-provenance-lineage.ViewDetails": "View details",
+    		"nf-provenance-lineage.Message2": "The lineage search has completed successfully but there no results were found. The events may have aged off.",
+    		"nf-provenance-lineage.Find parents": "Find parents",
+    		"nf-provenance-lineage.Expand": "Expand",
+    		"nf-provenance-lineage.Collapse": "Collapse",
+    		"nf-provenance-lineage.Cancel": "Cancel",
+    		"nf-provenance-lineage.Lineage Results": "Pedigree results",
+    		"nf-provenance-lineage.Process Lineage": "Process Lineage",
+    		"nf-provenance-table.Filter": "Filter",
+    		"nf-provenance-table.Message": "Showing the most recent ",
+    		"nf-provenance-table.Of": " of ",
+    		"nf-provenance-table.Events": "events.",
+    		"nf-provenance-table.Message4": " events, please refine the search.",
+    		"nf-provenance-table.Showing": "Showing ",
+    		"nf-provenance-table.Message5": " events that match the specified query, please refine the search.",
+    		"nf-provenance-table.Message6": "the events that match the specified query.",
+    		"nf-provenance-table.Details": "Details",
+    		"nf-provenance-table.Attributes": "Attributes",
+    		"nf-provenance-table.Content": "Content",
+    		"nf-provenance-table.ProvenanceEvent": "Provenance Event",
+    		"nf-provenance-table.Ok": "Ok",
+    		"nf-provenance-table.Message1": "Successfully submitted replay request.",
+    		"nf-provenance-table.Message2": "Search Events",
+    		"nf-provenance-table.Search": "Search",
+    		"nf-provenance-table.Message3": "Searching provenance events...",
+    		"nf-provenance-table.ByComponentName": "by component name",
+    		"nf-provenance-table.ByComponentType": "by component type",
+    		"nf-provenance-table.ByType": "by type",
+    		"nf-provenance-table.ByNode": "by node",
+    		"nf-provenance-table.Cluster": "cluster",
+    		"nf-provenance-table.ViewDetail": "View Details",
+    		"nf-provenance-table.ShowLineage": "Show Lineage",
+    		"nf-provenance-table.GoTo": "Go To",
+    		"nf-provenance-table.DateTime": "Date/Time",
+    		"nf-provenance-table.Type": "Type",
+    		"nf-provenance-table.FlowFileUuid": "FlowFile Uuid",
+    		"nf-provenance-table.Size": "Size",
+    		"nf-provenance-table.ComponentName": "Component Name",
+    		"nf-provenance-table.ComponentType": "Component Type",
+    		"nf-provenance-table.Node": "Node",
+    		"nf-provenance-table.Cancel": "Cancel",
+    		"nf-provenance-table.NoValueSet": "No value set",
+    		"nf-provenance-table.Claim": "Claim",
+    		"nf-provenance-table.InputClaim": "Input Claim",
+    		"nf-provenance-table.Provenance": "Provenance",
+    		"nf-provenance-table.Message7": "Unable to generate access token for viewing content.",
+    		"nf-provenance-table.Message8": "Unable to generate an access token for downloading content.",
+    		"nf-provenance-table.Message9": "No previously set value",
+    		"nf-provenance-table.Message10": "Searching for cause event...",
+    		"nf-provenance-table.Process": "Process",
+    		"nf-provenance-table.NoChildren": "No Children",
+    		"nf-provenance-table.NoParent": "No Parent",
+    		"nf-provenance-table.Bytes": " Bytes",
+    		"nf-cluster-search.Summary": "Summary",
+    		"nf-cluster-search.SelectNode": "Select node",
+    		"nf-cluster-search.Ok": "Ok",
+    		"nf-cluster-search.ClusterSearch": "Cluster Search",
+    		"nf-cluster-search.Message1": "No nodes match \\'",
+    		"nf-cluster-search.Message2": "More than one node matches \\'",
+    		"nf-cluster-search.Cancel": "Cancel",
+    		"nf-cluster-search.NiFiSumary": "NiFi Summary",
+    		"nf-cluster-search.Message3": "No node matching the search term",
+    		"nf-summary-table.Filter": "Filter",
+    		"nf-summary-table.Processors": "Processors",
+    		"nf-summary-table.Connections": "Connections",
+    		"nf-summary-table.InputPorts": "Input Ports",
+    		"nf-summary-table.OutputPorts": "Output Ports",
+    		"nf-summary-table.RemoteProcessGroups": "Remote Process Groups",
+    		"nf-summary-table.ProcessGroups": "Process Groups",
+    		"nf-summary-table.ByName": "by name",
+    		"nf-summary-table.ByType": "by type",
+    		"nf-summary-table.BySource": "by source",
+    		"nf-summary-table.ByDestination": "by destination",
+    		"nf-summary-table.ByUri": "by uri",
+    		"nf-summary-table.ViewDetail": "View Details",
+    		"nf-summary-table.SourceName": "SourceName",
+    		"nf-summary-table.Name": "Name",
+    		"nf-summary-table.RunStatus": "Run Status",
+    		"nf-summary-table.In": "In",
+    		"nf-summary-table.Size": "Size",
+    		"nf-summary-table.Message": "Count / data size in the last 5 min",
+    		"nf-summary-table.Read": "Read",
+    		"nf-summary-table.Write": "Write",
+    		"nf-summary-table.5min": "5 min",
+    		"nf-summary-table.Message1": "Data size in the last 5 min",
+    		"nf-summary-table.Out": "Out",
+    		"nf-summary-table.Tasks": "Tasks",
+    		"nf-summary-table.Time": "Time",
+    		"nf-summary-table.Message2": "Count / duration in the last 5 min",
+    		"nf-summary-table.Type": "Type",
+    		"nf-summary-table.GoTo": "Go To",
+    		"nf-summary-table.ShowHistory": "Show History",
+    		"nf-summary-table.ShowDetail": "Show Details",
+    		"nf-summary-table.ClusterProcessorSummary": "Cluster Processor Summary",
+    		"nf-summary-table.Node": "Node",
+    		"nf-summary-table.Queue": "Queue",
+    		"nf-summary-table.DestinationName": "Destination Name",
+    		"nf-summary-table.ClusterConnectionSummary": "Cluster Connection Summary",
+    		"nf-summary-table.Close": "Close",
+    		"nf-summary-table.Transferred": "Transferred",
+    		"nf-summary-table.Message3": "Count / data size transferred to and from connections in the last 5 min",
+    		"nf-summary-table.Sent": "Sent",
+    		"nf-summary-table.Received": "Received",
+    		"nf-summary-table.ClusterProcessGroupSummary": "Cluster Process Group Summary",
+    		"nf-summary-table.ClusterInputPortSummary": "Cluster Input Port Summary",
+    		"nf-summary-table.ClusterOutPutPortSummary": "Cluster Output Port Summary",
+    		"nf-summary-table.Transmitting": "Transmitting",
+    		"nf-summary-table.Target URI": "Target URI",
+    		"nf-summary-table.ClusterRemoteProcessGroupSummary": "Cluster Remote Process Group Summary",
+    		"nf-summary-table.JVM": "JVM",
+    		"nf-summary-table.System": "System",
+    		"nf-summary-table.SystemDiagnostics": "System Diagnostics",
+    		"nf-summary-table.Summary": " Summary",
+    		"nf-summary-table.Message4": "Based on the presence of announcements",
+    		"nf-summary-table.times": "times",
+    		"nf-summary-table.UsageFor": "Usage For",
+    		"nf-summary-table.GoToProcessor": "Go To Processor",
+    		"nf-summary-table.ViewStatus": "View Status",
+    		"nf-summary-table.ViewProcessor": "View Processor",
+    		"nf-summary-table.ViewConnect": "View Connect",
+    		"nf-summary-table.GoToConnect": "Go To Connect",
+    		"nf-summary-table.GoToProcessorGroup": "Go To Processor Group",
+    		"nf-summary-table.ViewProcessorGroup": "View Processor Group",
+    		"nf-summary-table.GoToInputPort": "Go To Input Port",
+    		"nf-summary-table.ViewInputPort": "View Input Port",
+    		"nf-summary-table.GoToOutputPort": "Go To Output Port",
+    		"nf-summary-table.ViewOutputPort": "View Output Port",
+    		"nf-summary-table.ViewRemoteProcessorGroup": "View Remote Processor Group",
+    		"nf-summary-table.aria1": "The data stream is stored using the repository",
+    		"nf-summary.Summary": "Summary",
+    		"nf-templates-table.Templates": " Templates",
+    		"nf-templates-table.Message": " Select template to import",
+    		"nf-templates-table.Filter": "Filter",
+    		"nf-templates-table.DeleteTemplate": "Delete Template",
+    		"nf-templates-table.Message1": "Delete template \'",
+    		"nf-templates-table.DownloadTemplate": "Download Template",
+    		"nf-templates-table.Message2": "Unable to generate an access token for downloading content.",
+    		"nf-templates-table.ByName": "by name",
+    		"nf-templates-table.ByDescription": "by description",
+    		"nf-templates-table.RemovieTemplate": "Remove Template",
+    		"nf-templates-table.DateTime": "Date/Time",
+    		"nf-templates-table.Name": "Name",
+    		"nf-templates-table.Description": "Description",
+    		"nf-templates-table.GroupId": "Process group Id",
+    		"nf-templates-table.Download": "Download",
+    		"nf-templates-table.AccessPolicies": "Access Policies",
+    		"nf-templates.Templates": "Templates",
+    		"nf-users.Users": "Users",
+    		"nf-users-table.Filter": "Filter",
+    		"nf-users-table.UserDetails": "User Details",
+    		"nf-users-table.Ok": "Ok",
+    		"nf-users-table.UserRoles": "User Roles",
+    		"nf-users-table.Apply": "Apply",
+    		"nf-users-table.Cancel": "Cancel",
+    		"nf-users-table.GroupRoles": "Group Roles",
+    		"nf-users-table.DeleteUser": "Delete User",
+    		"nf-users-table.Delete": "Delete",
+    		"nf-users-table.RevokeAccess": "Revoke Access",
+    		"nf-users-table.Revoke": "Revoke",
+    		"nf-users-table.SetUserGroup": "Set Users Group",
+    		"nf-users-table.Group": "Group",
+    		"nf-users-table.Message": "Group name cannot be blank.",
+    		"nf-users-table.ByUser": "by user",
+    		"nf-users-table.ByGroup": "by group",
+    		"nf-users-table.ByRole": "by role",
+    		"nf-users-table.AuthorizationPending": "Authorization Pending",
+    		"nf-users-table.AccessRevoked": "Access Revoked",
+    		"nf-users-table.NoRolesSet": "No roles set",
+    		"nf-users-table.Message1": "Multiple users with different roles",
+    		"nf-users-table.Message2": "Multiple users with different status",
+    		"nf-users-table.Message3": "No status set",
+    		"nf-users-table.EditAccess": "Edit Access",
+    		"nf-users-table.RevokeAccess.Ungroup": "Ungroup",
+    		"nf-users-table.DeleteAccount": "Delete Account",
+    		"nf-users-table.User": "User",
+    		"nf-users-table.Roles": "Roles",
+    		"nf-users-table.LastAccessed": "Last Accessed",
+    		"nf-users-table.Status": "Status",
+    		"nf-users-table.GroupUsers": "Group Users",
+    		"nf-users-table.Message4": "Select one or more users to group.",
+    		"nf-users-table.Message5": "Remove all users from group \\'",
+    		"nf-users-table.Message6": "Remove user \\'",
+    		"nf-users-table.Message7": "\\' from group \\'",
+    		"nf-users-table.UserGroup": "User/Group",
+    		"nf-users-table.Edit": "Edit",
+    		"nf-users-table.Remove": "Remove",
+    		"jquery-propertytable.SensitiveValueSet": "Sensitive value set",
+    		"jquery-propertytable.EmptyStringSet": "Empty string set",
+    		"jquery-propertytable.NoValueSet": "no value set",
+    		"jquery-propertytable.RequiredField": "Required field",
+    		"jquery-propertytable.Property": "Property",
+    		"jquery-propertytable.Value": "Value",
+    		"jquery-propertytable.PropertyName": "Property Name",
+    		"jquery-propertytable.NewProperty": "New property",
+    		"jquery-propertytable.Ok": "Ok",
+    		"jquery-propertytable.Delete": "Delete",
+    		"jquery-propertytable.GoTo": "Go To",
+    		"jquery-propertytable.Cancel": "Cancel",   
+    		"jquery-propertytable.Empty": "Empty",
+    		"jquery-propertytable.SetEmptyString": "Set Empty String",
+    		"jquery-propertytable.ControllerService" : "Controller Service",
+    		"jquery-propertytable.Tags" : "Tags",
+    		"jquery-propertytable.Create" : "Create",
+    		"jquery-propertytable.Description" : "Description",
+    		"jquery-propertytable.AddControllerService" : "Add Controller Service",
+    		"jquery-propertytable.AddProperty": "Add Property",
+    		"jquery-propertytable.PropertyExists": "Property Exists",
+    		"jquery-propertytable.Message0": "A property with this name already exists。",
+    		"jquery-propertytable.Message": "A property with this name already exists.",
+    		"jquery-propertytable.Message1": "Property name must be specified.",
+    		"jquery-propertytable.Message3": "Create new service ...",
+    		"jquery-propertytable.Message2": "No controller service types found that are applicable for this property.",
+    		"slick.editors.Message1": "Please enter a valid integer",
+    		"slick.editors.Message2": "Please enter a valid positive number",
+    		"slick.grid.Message1": "Slickgrid requires a valid container，",
+    		"slick.grid.Message2": "Does not exist in the DOM",
+    		"slick.grid.Message3": "Style table not found.",
+    		"slick.grid.Message4": "Add cell Css style: cell CSS hash key'",
+    		"slick.grid.Message5": "'already exists.",
+    		"slick.grid.Message6": "From node acquisition unit: Unable to get unit -",
+    		"slick.grid.Message7": "Grid : Make the active cell editable: options.editable to false when it should never be called",
+    		"slick.grid.Message8": "The selection model is not set",
+    		"jquery-tagcloud.NoTagsSpecified": "Unspecified label" 
+
+    };
+    return {
+        msg: function (key) {
+            if (locale === "en") {
+                return en[key];
+            }
+            if ((locale === "cn")) {
+                return cn[key];
+            }
+        }
+    };
+})();
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js
new file mode 100644
index 000000000000..769046e9eec9
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js
@@ -0,0 +1,1522 @@
+
+nf._ = (function () {
+    var locale = "jp";
+    var jp = {
+        "nf-about": "データフロー",
+        "nf-bulletin-board.defaultFilterText": "フィルタリング",
+        "nf-bulletin-board.ByMessage": "情報でフィルタリングします。",
+        "nf-bulletin-board.ByName": "名前でフィルタリングします。",
+        "nf-bulletin-board.ById": "識別子でフィルタリングします。",
+        "nf-bulletin-board.ByGroupId": "グループ識別子でフィルタリングします。",
+        "nf-bulletin-board.Message1": "フィルタリング ",
+        "nf-bulletin-board.Message2": " マッチング \\\\'",
+        "nf-bulletin-board.Message3": "自動リフレッシュ開始",
+        "nf-bulletin-board.Message4": "自動リフレッシュ終了",
+		"nf-bulletin-board.Message5": "削除フィルター",
+        "nf-bulletin-board.BulletinBoard": " 掲示板",
+		"nf-actions.UpdateResource": "更新のソース",
+        "nf-actions.Refreshing": "更新中",
+        "nf-actions.RemoteGroupProcess": "リモート処理グループ",
+        "nf-actions.NoTargetURIDefined": "ターゲットURIが定義されていません。",
+        "nf-actions.Message1": "該当するコンポーネントを選択していません。該当するコンポーネントを選択して活性化し、且つ、現在コンポーネントが実行されていないことを保証します。",
+        "nf-actions.Message2": "該当するコンポーネントを選択していません。該当するコンポーネントを選択してオフラインさせ、現在コンポーネントが実行されていないことを保証します。",
+        "nf-actions.Message3": "該当するコンポーネントを選択していません。該当するコンポーネントを選択して起動し、現在コンポーネントが実行されていません。",
+        "nf-actions.Message4": "該当するコンポーネントを選択していません。終了するコンポーネントを選択してください。",
+        "nf-actions.Message5": "該当するコンポーネントを選択していません。削除するコンポーネントを選択してください",
+        "nf-actions.EmptyQueue": "空きのキュー",
+        "nf-actions.Message6": "キューをクリアしてよろしいですか。すべてのフローファイルはクリアされます。",
+        "nf-actions.Cancel": "キャンセル",
+        "nf-actions.Empty": "空き",
+        "nf-actions.Stop": "終了",
+        "nf-actions.Message7": " キューからクリアされます。",
+        "nf-actions.Message8": "クリアされるフローファイルがありません。",
+        "nf-actions.Message9": "現在の選択では、テンプレートを作成できません。",
+        "nf-actions.Create": "作成",
+        "nf-actions.Template": "テンプレート '",
+        "nf-actions.Message11": "' 正しく作成しました。",
+        "nf-actions.Message12": "コピーペーストする時、エラーが発生しました。",
+        "nf-canvas-toobbar.Start": "起動",
+        "nf-canvas-toobbar.Stop": "終了",
+        "nf-canvas-toobbar.Copy": "コピー",
+        "nf-canvas-toobbar.Paste": "ペースト",
+        "nf-canvas-toobbar.Group": "グループ",
+        "nf-canvas-toobbar.Enable": "イネーブル",
+        "nf-canvas-toobbar.Disable": "ディセーブル",
+        "nf-canvas-toobbar.CreateTemplate": "テンプレート作成",
+        "nf-canvas-toobbar.ChangeColor": "色変更",
+        "nf-canvas-toobbar.Delete": "削除",        
+        "nf-canvas-header.OK": "はい",
+        "nf-canvas-header.CreateTemplate": "テンプレート作成",
+        "nf-canvas-header.Fill": "記入",
+        "nf-canvas-header.Apply": "適用",
+        "nf-canvas-header.Cancel": "キャンセル",
+        "nf-canvas-header.Message": "現在のグループをリフレッシュできません。",
+        "nf-canvas-toolbox.Input": "入力",
+        "nf-canvas-toolbox.OutPut": "出力",        
+        "nf-canvas-toolbox.Filter": "フィルター",
+        "nf-canvas-toolbox.Processor": "プロセッサー",
+        "nf-canvas-toolbox.InputPort": "インプットポート",
+        "nf-canvas-toolbox.OutputPort": "アウトプットポート",
+        "nf-canvas-toolbox.ProcessGroup": "プロセスグループ",
+        "nf-canvas-toolbox.RemoteProcessGroup": "リモートプロセスグループ",
+        "nf-canvas-toolbox.Connection": "接続",
+        "nf-canvas-toolbox.Funnel": "じょうご",
+        "nf-canvas-toolbox.Template": "テンプレート",
+        "nf-canvas-toolbox.Label": "ラベル",
+        "nf-canvas-toolbox.Add": "追加",
+        "nf-canvas-toolbox.Cancel": "キャンセル",
+        "nf-canvas-toolbox.Instantiate Template": "インスタンス化したテンプレート",
+        "nf-canvas-toolbox.Message": "テンプレートはデータフローシステムにロードされていません。",
+        "nf-canvas-toolbox.Type": "タイプ",
+        "nf-canvas-toolbox.Tags": "ラベル",
+        "nf-canvas-toolbox.Message1": "説明を指定していません。",
+        "nf-canvas-toolbox.AddProcessor": "プロセッサー追加",
+        "nf-canvas-toolbox.AddPort": "ポート追加",
+        "nf-canvas-toolbox.AddProcessGroup": "プロセスグループ追加",
+        "nf-canvas-toolbox.AddRemoteProcessGroup": "リモートプロセスグループ追加",
+        "nf-canvas-utils.Message1": "特定のコンポーネントグループをロードできません.",
+        "nf-canvas-utils.Message2": "特定のコンポーネントが見つかりませんでした。",
+        "nf-canvas-utils.Message3": "選択したグループに入れません。",
+        "nf-canvas-utils.Message4": "ポートをルートグループから移動できません。",
+        "nf-canvas-utils.Message5": "これらのポートは現在グループ外部に接続しています: <b>",
+        "nf-canvas-utils.Message6": "これらのポートはターゲットプロセスグループにあります: <b>",
+        "nf-canvas.Browser": "対応しないブラウザです。",
+        "nf-canvas.Message1": "フローチャートはSVGで表示すべきです。SVGに対応するブラウザを選択してください。",
+        "nf-connection-configuration.Add": "追加",
+        "nf-connection-configuration.Message0": "接続は、少なくとも１つのリレーションシップを選択すべきです。",
+        "nf-connection-configuration.Cancel": "キャンセル",
+        "nf-connection-configuration.Message1": "\\' いずれのリレーションシップにも対応しません。",
+        "nf-connection-configuration.Message2": "\\' いずれのアウトプットポートもありません。",
+        "nf-connection-configuration.Message4": "\\' いずれのインプットポートもありません。",
+        "nf-connection-configuration.Message6": "コンフィギュレーションエラー",
+        "nf-connection-configuration.ConfigureConnection": "接続コンフィギュレーショ",
+        "nf-connection-configuration.Detail": "詳細",
+        "nf-connection-configuration.Setting": "設定",
+        "nf-connection-configuration.CreateConnection": "接続作成",
+        "nf-connection-configuration.Apply": "アプリー",
+        "nf-connection-configuration.Message7": "接続は、少なくとも１つのリレーションシップを選択すべきです。",
+        "nf-connection-configuration.Message8": "接続コンフィギュレーション",
+        "nf-connection.Message1": "ループ接続には少なくとも２つの反曲点が必要です。",
+        "nf-connection.From": "から",
+        "nf-connection.To": "まで",
+        "nf-connection.Name": "名称",
+        "nf-connection.Queued": "キューイング",
+        "nf-context-menu.RefreshStatus": "リフレッシュ状態",
+        "nf-context-menu.LeaveGroup": "グループと離れます。",
+        "nf-context-menu.Configure": "コンフィギュレーション",
+        "nf-context-menu.ViewConfiguration": "コンフィギュレーションをビューします。",
+        "nf-context-menu.EnterGroup": "グループに入ります。",
+        "nf-context-menu.Start": "開始",
+        "nf-context-menu.Stop": "終了",
+        "nf-context-menu.RemotePorts": "リモートポート",
+        "nf-context-menu.EnableTransmission": "イネーブルに変換させます。",
+        "nf-context-menu.DisableTransmission": "ディセーブルに変換させます。",
+        "nf-context-menu.Stats": "ステータス",
+        "nf-context-menu.DataProvenance": "データ出所",
+        "nf-context-menu.BringFront": "フロントに持ってきます",
+        "nf-context-menu.GoToSource": "ソースに入ります。",
+        "nf-context-menu.GoToDestination": "ターゲットに入ります。",
+        "nf-context-menu.UpstreamConnections": "上流接続",
+        "nf-context-menu.DownstreamConnections": "下流接続",
+        "nf-context-menu.Usage": "用途",
+        "nf-context-menu.Refresh": "リフレッシュ",
+        "nf-context-menu.GoTo": "エントリー",
+        "nf-context-menu.ChangeColor": "色変更",
+        "nf-context-menu.CenterInView": "ビュー中央合わせ",
+        "nf-context-menu.Copy": "コピー",
+        "nf-context-menu.Paste": "ペースト",
+        "nf-context-menu.MoveParentGroup": "親グループに移動します。",
+        "nf-context-menu.EmptyQueue": "空きのキュー",
+        "nf-context-menu.Delete": "削除",
+        "nf-controller-service.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-controller-service.Cancel": "キャンセル",
+        "nf-controller-service.Close": "閉じる",
+        "nf-controller-service.Message1": "ディセーブルにする手順",
+        "nf-controller-service.ActionCanceled": "動作キャンセル",
+        "nf-controller-service.Message2": "イネーブルリクエストの動作はキャンセルされましたが、一部のリクエストは実行たかもしれません。 サービスリレーションシップのすべてのコンポーネントを検証してください。",
+        "nf-controller-service.Message3": "イネーブル手順 ",
+        "nf-controller-service.Message4": "動作キャンセル",
+        "nf-controller-service.Message5": "ディセーブルリクエストの動作はキャンセルされましたが、、一部のリクエストは実行たかもしれません。 サービスリレーションシップのすべてのコンポーネントを検証してください。",
+        "nf-controller-service.Message6": "設定を保存しますか?",
+        "nf-controller-service.Settings": "コンフィギュレーション",
+        "nf-controller-service.Properties": "プロパティ",
+        "nf-controller-service.Comments": "コメント",
+        "nf-controller-service.Message7": "コンフィギュレーションコントローラーサービス",
+        "nf-controller-service.Message8": "そのサービスディセーブルをコントロールします。",
+        "nf-controller-service.Disable": "ディセーブル",
+        "nf-controller-service.ServiceOnle": "サービスのみ",
+        "nf-controller-service.Message9": "現在のコントローラーサービスだけをイネーブルにします。",
+        "nf-controller-service.Message10": "サービスと関連关コンポーネント",
+        "nf-controller-service.Message11": "コントローラーサービスをイネーブルにします。リレーションシップコンポーネントをイネーブル/起動させます。",
+        "nf-controller-service.Message12": "コントロールサーバーをイネーブルにします。",
+        "nf-controller-service.Enable": "イネーブル",
+        "nf-controller-service.Apply": "アプリー",
+        "nf-controller-service.Advanced": "アドバンスド",
+        "nf-controller-service.Message13": "アドバンスド設定前、変更を保存しますか?",
+        "nf-controller-service.Ok": "はい",
+        "nf-go-to.Close": "閉じる",
+        "nf-go-to.DownstreamConnections": "下流接続",
+        "nf-go-to.UpstreamConnections": "上流接続",
+        "nf-go-to.Message1": "上流接続がありません。",
+        "nf-go-to.Message2": "下流接続がありません。",        
+        "nf-port-configuration.ConfigurePort": "コンフィギュレーションポート",
+        "nf-port-configuration.Apply": "アプリー",
+        "nf-port-configuration.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-port-configuration.Cancel": "キャンセル",
+        "nf-port-details.PortDetails": "ポート詳細",
+        "nf-port-details.OK": "はい",
+        "nf-process-group-configuration.ConfigureProcessGroup": "コンフィギュレーションプロセスグループ",
+        "nf-process-group-configuration.Apply": "アプリー",
+        "nf-process-group-configuration.Cancel": "キャンセル",
+        "nf-process-group-details.ProcessGroupDetails": "プロセスグループ詳細",
+        "nf-process-group-details.Ok": "アプリー",
+        "nf-process-group.Message1": "コメントがありません",
+        "nf-process-group.Queued": "キューイング",
+        "nf-process-group.In": "入力",
+        "nf-process-group.ReadWrite": "リード/ライト",
+        "nf-process-group.Out": "出力",
+        "nf-process-group.5min": "(5 分間)",
+        "nf-processor-configuration.TimerDriven": "時間ドライブ",
+        "nf-processor-configuration.Message1": "プロセッサーは計画時間どおり実行されます。",
+        "nf-processor-configuration.EventDriven": "イベントドライブ",
+        "nf-processor-configuration.Message2": "プロセッサーはイベントドライブどおりに実行します(例、フローファイルがキューに入る)。計画タスクポリシーは打診的です。",
+        "nf-processor-configuration.OnPrimaryNode": "メインノードにあります。",
+        "nf-processor-configuration.Message3": "プロセッサーはメインノードで指定時間間隔どおりに次を実行されます。Processor will be scheduled on the primary node on an interval defined by the run schedule.",
+        "nf-processor-configuration.CronDriven": "CRONドライブ",
+        "nf-processor-configuration.Message5": "プロセッサーはCRON形式の指定時間で実行されます。",
+        "nf-processor-configuration.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-processor-configuration.Message6": "コントローラーサービスに入る前、変更を保存しますか?",
+        "nf-processor-configuration.Settings": "設定",
+        "nf-processor-configuration.Scheduling": "計画実行中",
+        "nf-processor-configuration.Properties": "プロパティ",
+        "nf-processor-configuration.Comments": "コメント",
+        "nf-processor-configuration.ConfigureProcessor": "コンフィギュレーションプロセッサー",
+        "nf-processor-configuration.Debug": "デバッグ",
+        "nf-processor-configuration.Info": "情報",
+        "nf-processor-configuration.Warn": "警告",
+        "nf-processor-configuration.Error": "エラー",
+        "nf-processor-configuration.Apply": "アプリー",
+        "nf-processor-configuration.Cancel": "キャンセル",
+        "nf-processor-configuration.Advanced": "アドバンスド",
+        "nf-processor-configuration.Message7": "アドバンスド設定に入る前に、変更を保存しますか?",
+        "nf-processor.In": "入力",
+        "nf-processor.ReadWrite": "リード/ライト",
+        "nf-processor.Out": "出力",
+        "nf-processor.TasksTime": "タスク/時間",
+        "nf-processor.5min": "(5 分間)",
+        "nf-registration.Thanks": "ありがとうございました。",
+        "nf-registration.Message1": "您的リクエスト将被快速执行.",
+        "nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "コンフィギュレーションリモートプロセスグループ",
+        "nf-remote-process-group-configuration.Apply": "アプリー",
+        "nf-remote-process-group-configuration.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-remote-process-group-configuration.Cancel": "キャンセル",
+        "nf-remote-process-group-details.RemoteProcessGroupDetails": "リモートプロセスグループ詳細",
+        "nf-remote-process-group-details.Ok": "はい",
+        "nf-remote-process-group-ports.ConfigureRemotePort": "コンフィギュレーションリモートポート",
+        "nf-remote-process-group-ports.Apply": "アプリー",
+        "nf-remote-process-group-ports.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-remote-process-group-ports.Message1": "現在タスク要求整数值.",
+        "nf-remote-process-group-ports.Cancel": "キャンセル",
+        "nf-remote-process-group-ports.RemoteProcessGroupPorts": "リモートプロセスグループポート",
+        "nf-remote-process-group-ports.Close": "閉じる",
+        "nf-remote-process-group-ports.Message2": "説明がありません。",
+        "nf-remote-process-group.Message1": "コメントがありません。",
+        "nf-remote-process-group.Sent": "送信",
+        "nf-remote-process-group.Received": "受信",
+        "nf-remote-process-group.5min": "(5 分間)",
+        "nf-remote-process-group.Message2": "Site-to-Site は安全です。",
+        "nf-remote-process-group.Message3": "Site-to-Site は安全ではありません。",
+        "nf-remote-process-group.Message4": "現在、リモートフローは実行されていません。",
+        "nf-reporting-task.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-reporting-task.Message1": "コントローラーサービスに入る前に、設定を保存しますか。?",
+        "nf-reporting-task.Settings": "設定",
+        "nf-reporting-task.Properties": "プロパティ",
+        "nf-reporting-task.Comments": "コメント",
+        "nf-reporting-task.ConfigureReportingTask": "レポートタスクを設定します。",
+        "nf-reporting-task.Node": "ノード",
+        "nf-reporting-task.ClusterManager": "クラスターマネージャー",
+        "nf-reporting-task.TimerDriven": "時間ドライブ",
+        "nf-reporting-task.Message2": "レポートタスクは指定時間間隔で実行されます。",
+        "nf-reporting-task.CRONDriven": "CRONドライブ",
+        "nf-reporting-task.Message3": "レポートタスクはCRONコンフィギュレーションで実行されます。",
+        "nf-reporting-task.Apply": "アプリー",
+        "nf-reporting-task.Cancel": "キャンセル",
+        "nf-reporting-task.Advanced": "アドバンスド",
+        "nf-reporting-task.Message4": "アドバンスド設定に入る前に、変更を保存しますか?",
+        "nf-search.Search": "検索",
+        "nf-secure-port-configuration": "設定",
+        "nf-secure-port-configuration.AccessControl": "権限制御",
+        "nf-secure-port-configuration.ConfigureSecurePort": "コンフィギュレーションセキュリティポート",
+        "nf-secure-port-configuration.Apply": "アプリー",
+        "nf-secure-port-configuration.Cancel": "キャンセル",
+        "nf-secure-port-configuration.InputPort": "インプットポート",
+        "nf-secure-port-configuration.OutputPort": "アウトプットポート",
+        "nf-secure-port-details.Settings": "設定",
+        "nf-secure-port-details.AccessControl": "権限制御",
+        "nf-secure-port-details.SecurePortDetails": "セキュリティポート詳細",
+        "nf-secure-port-details.Ok": "はい",
+        "nf-settings.Filter": "フィルター",
+        "nf-settings.Message1": "スチームパッケージは正しく作成されました。",
+        "nf-settings.Message2": "設定は正しく適用されました。",
+        "nf-settings.Message3": "コントローラーサービスのタイプを選択すべきです。",
+        "nf-settings.Text": "ノード",
+        "nf-settings.ClusterManager": "クラスターマネージャー",
+        "nf-settings.Message4": "コントローラーサービスはノードで利用できます。",
+        "nf-settings.Message5": "コントローラーサービスはクラスターマネージャーで利用できます。",
+        "nf-settings.Message6": "説明情報がありません。",
+        "nf-settings.Message7": "コントローラーサービスを追加します。",
+        "nf-settings.Add": "追加",
+        "nf-settings.Cancel": "キャンセル",
+        "nf-settings.Node": "ノード",
+        "nf-settings": "クラスターマネージャー",
+        "nf-settings.ViewDetail": "詳細を確認します。",
+        "nf-settings.Disable": "ディセーブル",
+        "nf-settings.Enable": "イネーブル",
+        "nf-settings.Remove": "リムーブ",
+        "nf-settings.Usage": "用途",
+        "nf-settings.Name": "名称",
+        "nf-settings.State": "ステータス",
+        "nf-settings.Availability": "取得できます。",
+        "nf-settings.Message8": "レポートタスク仅ノードは取得できます。",
+        "nf-settings.Message9": "レポートタスククラスターマネージャーを取得する権限があります。",
+        "nf-settings.Type": "タイプ",
+        "nf-settings.Tags": "ラベル",
+        "nf-settings.Message10": "指定した説明がありません",
+        "nf-settings.Message11": "レポートタスクを追加します。",
+        "nf-settings.ViewDetails": "詳細を確認します。",
+        "nf-settings.Stop": "終了",
+        "nf-settings.Edit": "編集",
+        "nf-settings.Start": "開始",
+        "nf-settings.RunStatus": "実行ステータス",
+        "nf-settings.General": "共通",
+        "nf-settings.ControllerServices": "コントローラーサービス",
+        "nf-settings.ReportingTasks": "レポートタスク",
+        "nf-settings.Message12": "新しいコントローラーサービスを作成します",
+        "nf-settings.Message13": "新しいレポートタスクを作成します。",
+        "nf-settings.Settings": " 設定",
+        "nf-cluster.Cluster": " クラスター",
+        "nf-cluster-table.Filter": "フィルターを使います。",
+        "nf-cluster-table.Message1": "接続 \\'",
+        "nf-cluster-table.Message2": "\\' 当該クラスターにしますか?",
+        "nf-cluster-table.Message3": "切断 \\'",
+        "nf-cluster-table.Message4": "\\' 当該クラスターから　しますか?",
+        "nf-cluster-table.Message5": "リムーブ \\'",
+        "nf-cluster-table.Message6": "\\' 当該クラスターから　しますか?",
+        "nf-cluster-table.NodeDetails": "ノード詳細",
+        "nf-cluster-table.Ok": "はい",
+        "nf-cluster-table.ByAddress": "アドレスでフィルタリングします。",
+        "nf-cluster-table.ByStatus": "用ステータスフィルタリング",
+        "nf-cluster-table.ViewDetails": "詳細を確認します",
+        "nf-cluster-table.Node Address": "ノードアドレス",
+        "nf-cluster-table.ActiveThreadCount": "実行するスレッドの数",
+        "nf-cluster-table.Size": "サイズ",
+        "nf-cluster-table.Queue": "キューイング",                
+        "nf-cluster-table.Status": "ステータス",
+        "nf-cluster-table.Uptime": "実行時間",
+        "nf-cluster-table.LastHeartbeat": "最後のハートビート",
+        "nf-cluster-table.Connect": "接続",
+        "nf-cluster-table.Remove": "リムーブ",
+        "nf-cluster-table.Disconnect": "切断",
+        "nf-cluster-table.MakePrimary": "プライマリーにします。",
+        "nf-counters-table.Filter": "フィルター",
+        "nf-counters-table.ByName": "名称でフィルタリングします",
+        "nf-counters-table.ByContext": "コンテキストでフィルタリングします。",
+        "nf-counters-table.Context": "コンテキスト",
+        "nf-counters-table.Name": "名称",
+        "nf-counters-table.Value": "値",
+        "nf-counters-table.Reset": "リセット",
+        "nf-counters.Counters": " カウンター",
+        "nf-history-table.Filter": "フィルター",
+        "nf-history-table.ActionDetail": "動作詳細",
+        "nf-history-table.Ok": "はい",
+        "nf-history-table.ById": "IDでフィルタリングします。",
+        "nf-history-table.Message1": "コンポーネントIDに基づくフィルターは更新されました。",
+        "nf-history-table.ByUser": "ユーザーでフィルタリングします。",
+        "nf-history-table.Message2": "実行タスクに基づくユーザーのフィルター",
+        "nf-history-table.FilterHistory": "フィルター履歴",
+        "nf-history-table.Cancel": "キャンセル",
+        "nf-history-table.PurgeHistory": "履歴をクリアします。",
+        "nf-history-table.Purge": "クリア",
+        "nf-history-table.Message3": "履歴を削除してよろしいですか。 '",
+        "nf-history-table.Message3.1": "\\'\\?",
+        "nf-history-table.Message4": "終了日付は指定必須です。",
+        "nf-history-table.ViewDetails": "詳細を確認します",
+        "nf-history-table.DateTime": "日付/時間",
+        "nf-history-table.Name": "名称",
+        "nf-history-table.Type": "タイプ",
+        "nf-history-table.Operation": "操作",
+        "nf-history-table.User": "ユーザー",
+        "nf-history-table.Value": "値",
+        "nf-history-table.PreviousValue": "前の値",
+        "nf-history-table.SourceId": "ソースID",
+        "nf-history-table.SourceName": "ソース名称",
+        "nf-history-table.SourceType": "ソースタイプ",
+        "nf-history-table.Relationship": "リレーションシップ",
+        "nf-history-table.DestinationId": "デスティネーションID",
+        "nf-history-table.DestinationName": "デスティネーション名称",
+        "nf-history-table.DestinationType": "デスティネーションタイプ",
+        "nf-history-table.Group": "グループ",
+        "nf-history-table.GroupId": "グループID",
+        "nf-history-table.PreviousGroup": "前のグループ",
+        "nf-history-table.PreviousGroupId": "前グループID",
+        "nf-history-table.EndDate": "終了日付",
+        "nf-history-table.History": " 履歴",
+        "nf-common.sensitiveText": "敏感値の設定",
+        "nf-common.Message1": "異常が発生しました。",
+        "nf-common.Message2": "ログを確認してください。",
+        "nf-common.Message3": "データフローシステムにリンクできません。",
+        "nf-common.Message4": "ライセンスがありません。",
+        "nf-common.Message5": "データフローシステムのライセンスが必要です。",
+        "nf-common.Message6": "禁止",
+        "nf-common.Message7": "現在のデータフローシステムにライセンスを授与できません。",
+        "nf-common.Message9": "応用カーネルに通信できませんでした。再起動の前、ログを確認し、コンフィギュレーションエラーを修正してください。",
+        "nf-common.ParseError": "エラー分析",
+        "nf-common.Message10": "データフローからの返却を遮断できません。",
+        "nf-common.Message11": ": 異常で戻ります。",
+        "nf-common.Message12": "異常が発生しました。ログを確認してください。",
+        "nf-common.Message13": "値の設定がありません",
+        "nf-common.Message14": "文字列の設定は空きです。",
+        "nf-common.Message15": "ご利用のセッションはもうすぐに利用期限になります。自動ログオフされないように、再度ログインしてください。",
+        "nf-common.Message16": "現在ご利用の権限は限られています。権限のあるアカウントでログインしますか、あるいは権限のあるアカウントを申請してください。",
+        "nf-common.Message17": "ご利用のセッションは利用期限になっています。再度ロードし、新たにログインしてください。",
+        "nf-common.Message18": "ご利用のセッションは利用期限になっています。「はい」をクリックして、再度ログインしてください。",
+        "nf-common.Message19": "アプリーが実行されていることを確認し、ログを検査してください。",
+        "nf-common.Message20": "リクエストがタイムアウトになり、アプリーが実行されているかを確認し、ログを検査してください。",
+        "nf-common.Message21": "リクエストは終了されました。",
+        "nf-common.Message22": "リクエスト転送仕組みは失敗しました。アプリーが実行されており、アクセス権限を持つことを確認してください。",
+        "nf-common.SessionExpired": "リクエストがライムアウトです。",
+        "nf-common.AccessDenied": "権限を拒否します。",
+        "nf-common.DefaultValue": "デフォルト値:",   
+        "nf-common.SupportsExpressionLanuage":"対応する表現言語:",        
+        "nf-connection-details.FromProcessor": "プロセッサー",
+        "nf-connection-details.FromOutPut": "アウトプットから",
+        "nf-connection-details.FromInput": "インプットから",
+        "nf-connection-details.ToProcessor": "プロセッサーから",
+        "nf-connection-details.ToFunnel": "じょうごまで",
+        "nf-connection-details.ToInput": "インプットまで",
+        "nf-connection-details.ToOutput": "アウトプットまで",
+        "nf-connection-details.Details": "詳細",
+        "nf-connection-details.Settings": "設定",
+        "nf-connection-details.ConnectionDetails": "接続詳細",
+        "nf-connection-details.Ok": "はい",
+        "nf-dialog.Ok": "はい",
+        "nf-dialog.Yes": "はい",
+        "nf-dialog.No": "いいえ",
+        "nf-processor-details.Settings": "設定",
+        "nf-processor-details.Scheduling": "計画をスケジューリングしています。",
+        "nf-processor-details.Properties": "プロパティ",
+        "nf-processor-details.Comments": "コメント",
+        "nf-processor-details.ProcessorDetails": "プロセッサー詳細",
+        "nf-processor-details.Ok": "はい",
+        "nf-processor-details.Advanced": "アドバンスド",
+        "nf-status-history.StatusHistory":"ステータス履歴情報",        
+        "nf-status-history.Processor": "プロセッサー",
+        "nf-status-history.InputPort": "インプットポート",
+        "nf-status-history.OutputPort": "アウトプットポート",
+        "nf-status-history.ProcessGroup": "プロセスグループ",
+        "nf-status-history.RemoteProcessGroup": "リモートプロセスグループ",
+        "nf-status-history.Connection": "接続",
+        "nf-status-history.Funnel": "じょうご",
+        "nf-status-history.Template": "テンプレート",
+        "nf-status-history.Label": "ラベル",
+        "nf-status-history.Message":"十分の履歴情報がありません。後で試してください。",        
+        "nf-provenance.DataProvenance": " データソース",
+        "nf-provenance-lineage.Message1": "フローファイル関係を計算します...",
+        "nf-provenance-lineage.ViewDetails": "詳細を確認します",
+        "nf-provenance-lineage.Message2": "継承関係の検索は終わりましたが、結果が見つかりませんでした。イベントは期限になっている可能性があります。",
+        "nf-provenance-lineage.Find parents": "親を検索します",
+        "nf-provenance-lineage.Expand": "拡張",
+        "nf-provenance-lineage.Collapse": "崩溃",
+        "nf-provenance-lineage.Cancel": "キャンセル",
+        "nf-provenance-table.Filter": "フィルター",
+        "nf-provenance-table.Message": "最近の表示 ",
+        "nf-provenance-table.Of": " 中 ",
+        "nf-provenance-table.Events": " イベント. ",
+        "nf-provenance-table.Message4": " イベント、検索条件を修正してください。",
+        "nf-provenance-table.Showing": "表示 ",
+        "nf-provenance-table.Message5": " 検索条件に合致するイベント。検索条件を修正してください。 ",
+        "nf-provenance-table.Message6": "検索条件に合致するイベントです。 ",
+        "nf-provenance-table.Details": "詳細",
+        "nf-provenance-table.Attributes": "プロパティ",
+        "nf-provenance-table.Content": "コンテンツ",
+        "nf-provenance-table.ProvenanceEvent": "データソースイベント",
+        "nf-provenance-table.Ok": "はい",
+        "nf-provenance-table.Message1": "再生リクエストを正しくサミットしました。",
+        "nf-provenance-table.Message2": "検索イベント",
+        "nf-provenance-table.Search": "検索",
+        "nf-provenance-table.Message3": "データソースイベントを検索します...",
+        "nf-provenance-table.ByComponentName": "コンポーネント名でフィルタリングします",
+        "nf-provenance-table.ByComponentType": "コンポーネントタイプでフィルタリングします。",
+        "nf-provenance-table.ByType": "タイプフィルタリングで",
+        "nf-provenance-table.ByNode": "ノードフィルタリングで",
+        "nf-provenance-table.Cluster": "クラスター",
+        "nf-provenance-table.ViewDetail": "詳細を確認します",
+        "nf-provenance-table.ShowLineage": "継承関係を検査します。",
+        "nf-provenance-table.GoTo": "エントリー",
+        "nf-provenance-table.DateTime": "日付/時間",
+        "nf-provenance-table.Type": "タイプ",
+        "nf-provenance-table.FlowFileUuid": "フローファイル Uuid",
+        "nf-provenance-table.Size": "サイズ",
+        "nf-provenance-table.ComponentName": "コンポーネント名称",
+        "nf-provenance-table.ComponentType": "コンポーネントタイプ",
+        "nf-provenance-table.Node": "ノード",
+        "nf-provenance-table.Cancel": "キャンセル",
+        "nf-provenance-table.NoValueSet": "値がありません",
+        "nf-provenance-table.Claim": "アサーション",
+        "nf-provenance-table.InputClain": "インプットアサーション",
+        "nf-cluster-search.SelectNode": "ノード選択",
+        "nf-cluster-search.Ok": "はい",
+        "nf-cluster-search.Message1": "マッチングするノードがありません。 \\'",
+        "nf-cluster-search.Message2": "２つ以上のノードがマッチングします。 \\'",
+        "nf-cluster-search.Cancel": "キャンセル",
+        "nf-cluster-search.NiFiSumary": "データフローサマリー",
+        "nf-summary-table.Filter": "フィルター",
+        "nf-summary-table.Processors": "プロセッサー",
+        "nf-summary-table.Connections": "接続",
+        "nf-summary-table.InputPorts": "インプットポート",
+        "nf-summary-table.OutputPorts": "アウトプットポート",
+        "nf-summary-table.RemoteProcessGroups": "リモートプロセスグループ",
+        "nf-summary-table.ProcessGroups": "プロセスグループ",
+        "nf-summary-table.ByName": "名前でフィルタリングします",
+        "nf-summary-table.ByType": "タイプでフィルタリングします",
+        "nf-summary-table.BySource": "ソースでフィルタリングします",
+        "nf-summary-table.ByDestination": "ターゲットでフィルタリングします",
+        "nf-summary-table.ByUri": "uriでフィルタリングします",
+        "nf-summary-table.ViewDetail": "詳細を確認します",
+        "nf-summary-table.SourceName": "ソース名称",
+        "nf-summary-table.Name": "名称",
+        "nf-summary-table.RunStatus": "実行ステータス",
+        "nf-summary-table.In": "入力",
+        "nf-summary-table.Size": "サイズ",
+        "nf-summary-table.Message": "最後5分間の数 / データサイズ",
+        "nf-summary-table.Read": "リード",
+        "nf-summary-table.Write": "ライト",
+        "nf-summary-table.5min": "5分間",
+        "nf-summary-table.Message1": "最後5分間のデータ量",
+        "nf-summary-table.Out": "出力",
+        "nf-summary-table.Tasks": "タスク",
+        "nf-summary-table.Time": "時間",
+        "nf-summary-table.Message2": "最後5分間の数 / 延長期",
+        "nf-summary-table.Type": "タイプ",
+        "nf-summary-table.GoTo": "エントリー",
+        "nf-summary-table.ShowHistory": "履歴表示",
+        "nf-summary-table.ShowDetail": "詳細表示",
+        "nf-summary-table.ClusterProcessorSummary": "クラスタープロセッサーの一覧",
+        "nf-summary-table.Node": "ノード",
+        "nf-summary-table.Queue": "キュー",
+        "nf-summary-table.SourceName": "ソース名称",
+        "nf-summary-table.DestinationName": "ターゲット名称",
+        "nf-summary-table.ClusterConnectionSummary": "クラスター接続一覧",
+        "nf-summary-table.Close": "閉じる",
+        "nf-summary-table.Transferred": "転送終了",
+        "nf-summary-table.Message3": "最後5分間コネクターから送信する数 / データサイズ",
+        "nf-summary-table.Sent": "送信する",
+        "nf-summary-table.Received": "受信する",
+        "nf-summary-table.ClusterProcessGroupSummary": "クラスタープロセスグループ一覧",
+        "nf-summary-table.ClusterInputPortSummary": "クラスターインプットポート一覧",
+        "nf-summary-table.ClusterOutPutPortSummary": "クラスターアウトプットポート一覧",
+        "nf-summary-table.Transmitting": "変換中",
+        "nf-summary-table.Target URI": "ターゲット URI",
+        "nf-summary-table.ClusterRemoteProcessGroupSummary": "クラスターリモートプロセスグループ一覧",
+        "nf-summary-table.JVM": "Javaバーチャルマシン",
+        "nf-summary-table.System": "システム",
+        "nf-summary-table.SystemDiagnostics": "システム診断",
+        "nf-summary-table.Summary": " サマリー",
+        "nf-templates-table.Templates": " テンプレート",
+        "nf-templates-table.Message": "テンプレートを選択し、インポートします",
+        "nf-templates-table.Filter": "フィルタリング",
+        "nf-templates-table.Message1": "テンプレート削除 \"",
+        "nf-templates-table.ByName": "名称でフィルタリングします",
+        "nf-templates-table.ByDescription": "説明でフィルタリングします",
+        "nf-templates-table.RemovieTemplate": "テンプレートリムーブ",
+        "nf-templates-table.DateTime": "日付/時間",
+        "nf-templates-table.Name": "名称",
+        "nf-templates-table.Description": "説明",
+        "nf-users-table.Filter": "フィルタリング",
+        "nf-users-table.UserDetails": "ユーザー詳細",
+        "nf-users-table.Ok": "はい",
+        "nf-users-table.UserRoles": "ユーザーオール",
+        "nf-users-table.Apply": "アプリー",
+        "nf-users-table.Cancel": "キャンセル",
+        "nf-users-table.GroupRoles": "グループロール",
+        "nf-users-table.DeleteUser": "ユーザー削除",
+        "nf-users-table.Delete": "削除",
+        "nf-users-table.RevokeAccess": "権限を再度有効化します。",
+        "nf-users-table.Revoke": "再度有効化",
+        "nf-users-table.SetUserGroup": "ユーザーグループを設定します。",
+        "nf-users-table.Group": "グループ",
+        "nf-users-table.Message": "グループ名が空きになっていはいけません。",
+        "nf-users-table.ByUser": "ユーザーでフィルタリングします。",
+        "nf-users-table.ByGroup": "グループでフィルタリングします。",
+        "nf-users-table.ByRole": "ロールでフィルタリングします。",
+        "nf-users-table.AuthorizationPending": "ライセンスを授与しています。",
+        "nf-users-table.AccessRevoked": "権限は再度有効化されました。",
+        "nf-users-table.NoRolesSet": "設定されたロールがありません。",
+        "nf-users-table.Message1": "複数のユーザーの権限が異なります。",
+        "nf-users-table.Message2": "複数のユーザーのステータスが異なります。",
+        "nf-users-table.Message3": "ステータスが設定されていません。",
+        "nf-users-table.EditAccess": "権限編集",
+        "nf-users-table.RevokeAccess.Ungroup": "グループ離脱",
+        "nf-users-table.DeleteAccount": "アカウント削除",
+        "nf-users-table.User": "ユーザー",
+        "nf-users-table.Roles": "ロール",
+        "nf-users-table.LastAccessed": "最後アクセス",
+        "nf-users-table.Status": "ステータス",
+        "nf-users-table.GroupUsers": "グループ内のユーザー",
+        "nf-users-table.Message4": "１つあるいは複数のユーザーを選択します。",
+        "nf-users-table.Message5": "すべてのユーザーをグループからリムーブします。 \\'",
+        "nf-users-table.Message6": "削除 \\'",
+        "nf-users-table.Message7": "\\' グループから \\'",
+        "jquery-propertytable.SensitiveValueSet": "敏感値",
+        "jquery-propertytable.EmptyStringSet": "文字列は空きです。",
+        "jquery-propertytable.NoValueSet": "値がありません",
+        "jquery-propertytable.RequiredField": "必須のプロパティ",
+        "jquery-propertytable.Property": "プロパティ",
+        "jquery-propertytable.Value": "値",        
+        "jquery-propertytable.PropertyName": "プロパティ名称",
+        "jquery-propertytable.NewProperty": "プロパティ新規追加",        
+        "jquery-propertytable.Ok": "確認",        
+        "jquery-propertytable.Cancel": "キャンセル",
+        "jquery-propertytable.Empty": "空きの値",
+        "jquery-propertytable.ControllerService": "コントローラーサービス",
+        "jquery-propertytable.Tags": "ラベル",
+        "jquery-propertytable.Create": "作成",
+        "jquery-propertytable.Description": "説明",
+        "jquery-propertytable.Message": "プロパティがあります。",
+        "jquery-propertytable.Message1": "プロパティ名を指定しなければなりません。",
+        "jquery-propertytable.Message2": "当該プロパティに対応するコントローラーサービスがありません。",
+        "nf-actions.Header1": "アクティベーションコンポーネント",
+        "nf-actions.Header2": "オフラインコンポーネント",
+        "nf-actions.Header3": "コンポーネントの開始",
+        "nf-actions.Header4": "停止するコンポーネント",
+        "nf-actions.Header5": "リロード",
+        "nf-actions.Header6": "貼り付けエラー",
+        "nf-actions.CreateTemplate": "テンプレートを作成します。",
+        "nf-actions.Message13": "テンプレート名は空にすることはできません。",
+        "nf-actions.Message14": "パーセント完全な削除要求",
+        "nf-actions.Message15": "ストリーム・ファイル",
+        "nf-actions.Message16": "で",
+        "nf-actions.Message17": "外",
+        "nf-actions.Message18": "キューから削除しました。",
+        "nf-actions.Message19": "コンポーネントへの参照はありません。",
+        "nf-canvas-graph-controls-controller.ProcessGroup": "プロセッサ群",
+        "nf-canvas-graph-controls-controller.Processor": "プロセッサ",
+        "nf-canvas-graph-controls-controller.InputPort": "入力ポート",
+        "nf-canvas-graph-controls-controller.OutputPort": "出力ポート",
+        "nf-canvas-graph-controls-controller.RemoteProcessGroup": "リモートプロセスグループ",
+        "nf-canvas-graph-controls-controller.Funnel": "漏斗",
+        "nf-canvas-graph-controls-controller.Label": "ラベル",
+        "nf-canvas-graph-controls-controller.Connection": "接続",
+        "nf-canvas-graph-controls-controller.MultipleSelected": "選択した複数の",
+		"nf-canvas-global-menu-controller.About": "データストリームについて",
+		"nf-canvas-global-menu-controller.OK": "確認します",
+		"nf-canvas-operate-controller.SUCCESS": "サクセス",
+		"nf-canvas-operate-controller.SuccessContent": "テンプレートが正常にインポート。",
+		"nf-canvas-operate-controller.Upload": "アップロードテンプレート",
+		"nf-canvas-operate-controller.ButtonUpload": "アップロードテンプレート",
+		"nf-canvas-operate-controller.UploadTemplate": "テンプレートを選択していない。ブラウザでテンプレートを選択してください。",
+		"nf-canvas-operate-controller.Cancel": "キャンセル",
+		"nf-canvas-operate-controller.ChangeColor": "変色します",
+		"nf-canvas-operate-controller.Apply": "アプリケーション",
+		"nf-canvas-operate-controller.Error": "エラー",
+		"nf-canvas-operate-controller.CreateTemplate": "テンプレートを作成します。",
+		"nf-canvas-operate-controller.Message1": "テンプレートをインポートすることはできません。エラーのログを確認してください。",
+        "nf-canvas-flow-status.Processors": "プロセッサ",
+        "nf-canvas-flow-status.ProcessGroups": "治療群",
+        "nf-canvas-flow-status-controller.Processors": "プロセッサ",
+        "nf-canvas-flow-status-controller.ProcessGroups": "治療群",
+        "nf-canvas-flow-status-controller.RemoteProcessGroups": "リモート処理群",
+        "nf-canvas-flow-status-controller.Connection": "接続",
+        "nf-canvas-flow-status-controller.InputPorts": "入力ポート",
+        "nf-canvas-flow-status-controller.OutputPorts": "出力ポート",
+        "nf-canvas-flow-status-controller.Funnel": "漏斗",
+        "nf-canvas-flow-status-controller.no-matches": "結果は、クエリの要件を満たしていませんでした",
+		"nf-group-component.AddProcessGroup": "治療群を追加すること",
+		"nf-group-component.Add": "加えます",
+		"nf-group-component.Cancel": "キャンセル",
+		"nf-input-port-component.AddPort": "ポートを追加します。",
+		"nf-input-port-component.Add": "加えます",
+		"nf-input-port-component.Cancel": "キャンセル",
+		"nf-input-port-component.new-port-type": "エントリー",
+		"nf-output-port-component.Add": "加えます",
+		"nf-output-port-component.Cancel": "キャンセル",
+		"nf-output-port-component.new-port-type": "輸出",
+		"nf-processor-component.AddProcessor": "プロセッサを追加",
+		"nf-processor-component.AddProcessorContent": "このタイプの作成選択されているプロセッサを持っています。",
+		"nf-processor-component.Add": "加えます",
+		"nf-processor-component.Cancel": "キャンセル",
+		"nf-processor-component.Type": "タイプ",
+		"nf-processor-component.Tags": "标签",
+		"nf-processor-component.NoDescriptionSpecified": "説明が指定されていません",
+		"nf-remote-process-group-component.ConfigurationError": "設定エラー",
+		"nf-remote-process-group-component.AddRemoteProcessGroup": "リモートグループを追加します。",
+		"nf-remote-process-group-component.Add": "加えます",
+		"nf-remote-process-group-component.Cancel": "キャンセル",
+		"nf-template-component.AddTemplate": "テンプレートの追加",
+		"nf-template-component.Add": "加えます",
+		"nf-template-component.Cancel": "キャンセル",
+		"nf-template-component.InstantiateTemplate": "テンプレートのインスタンス化",
+		"nf-template-component.InstantiateTemplateContent": "いいえデータ・フロー・テンプレートがロードされません。",
+        "nf-canvas-header.components.AddGroup": "治療群を追加すること",
+        "nf-canvas-header.components.AddButton": "加えます",
+        "nf-canvas-header.components.CancelButton": "キャンセル",
+        "nf-canvas-utils.Header1": "治療群",
+        "nf-canvas-utils.Message7": "コンポーネントグループは、トップレベルでした",
+        "nf-canvas.ClusterConn": "クラスタ接続",
+        "nf-canvas.Message2": "このノードは、現在クラスタに接続されていません。ここでは、データストリームの任意の変更は、クラスタ内で複製されません。",
+        "nf-canvas.Message3": "これはただのクラスタノードに追加しました。ここでは、データストリームの任意の変更がクラスタ内で複製されます。",
+        "nf-component-state.Header1": "コンポーネントステータス",
+        "nf-component-state.Button1": "クローズ",
+        "nf-component-state.Content1": "コンポーネントは状態をクリアする必要はありません。",
+		"nf-component-state.Message1": "コンポーネントが活動を実行していないときは、コンポーネントのステータスはクリアのみ可能",
+		"nf-component-state.Key": "ボンド",
+		"nf-component-state.Value": "値",
+		"nf-component-state.Scope": "スコープ",
+		"nf-connection-configuration.ConnectionConfiguration": "接続形態",
+		"nf-connection-configuration.Message5": "許可されていない任意の出力ポート \\'",
+		"nf-connection.Connection": "接続",
+        "nf-connection.FlowFilesOlder": "ファイルには、流れを超えて",
+		"nf-context-menu.StatsHistory": "履歴状態",
+		"nf-context-menu.ViewState": "ビューステータス",
+		"nf-context-menu.QueueList": "キューリスト",
+		"nf-controller-service.ControllerService": "コントローラのサービス",
+		"nf-controller-service.Message14": "不正なコンポーネントを参照するため、無効にすることはできません。",
+		"nf-controller-service.Message15": "不正なコンポーネントを参照するため、有効にすることはできません。",
+		"nf-controller-service.Save": "保存",
+		"nf-controller-service.Message16": "変更を保存するには、サービスコントローラーに入る前に？",
+        "nf-controller-services.Add": "加えます",
+		"nf-controller-services.ControllerService": "コントローラのサービス",
+		"nf-controller-services.Message14": "あなたが作成するサービスコントローラーのタイプを選択する必要があります。",
+		"nf-controller-services.AddControllerService": "コントローラサービスを追加",
+		"nf-controller-services.Invalid": "失敗します",
+		"nf-controller-services.Disabled": "使用禁止",
+		"nf-controller-services.Disabling": "で無効に",
+		"nf-controller-services.Enabled": "使用可能",
+		"nf-controller-services.Enabling": "で有効に",
+		"nf-controller-services.toolTip": "発表の存在に基づいて並べ替え",
+		"nf-controller-services.Name": "名前",
+		"nf-controller-services.Type": "タイプ",
+		"nf-controller-services.Tags": "ラベル",
+		"nf-controller-services.State": "状態",
+		"nf-controller-services.ProcessGroup": "治療群",
+		"nf-controller-services.type-description": "説明が指定されていません",
+		"nf-controller-services.viewDtails": "詳細を参照してください。",
+		"nf-controller-services.usage": "使用法",
+		"nf-controller-services.disable": "無効にします",
+		"nf-controller-services.edit": "編集",
+		"nf-controller-services.enable": "有効にします",
+		"nf-controller-services.viewstate": "ビューステータス",
+		"nf-controller-services.remove": "削除します",
+		"nf-controller-services.acesspolicies": "アクセスポリシー",
+		"nf-custom-ui.AdvancedConfiguration": "高度な設定",
+		"nf-custom-ui.Message1": "設定ダイアログに高度なアクセスをアクセスするためのアクセストークンを生成することができません。",
+		"nf-draggable.ComponentPosition": "コンポーネント場所",
+		"nf-draggable.Message1": "無許可の変更先グループ。",
+		"nf-draggable.Message2": "各コンポーネントが承認される必要があり、変更を選択します。",
+        "nf-go-to.NoDownstreamComponents": "いいえ下流成分はありません",
+        "nf-go-to.NoUpstreamComponents": "いいえ、上流コンポーネントはありません",
+        "nf-go-to.Funnel": "漏斗",
+        "nf-label-configuration.ConfigureLabel": "[設定]タブ",
+		"nf-label-configuration.Apply": "アプリケーション",
+		"nf-label-configuration.Cancel": "キャンセル",
+		"nf-policy-management.ViewUserInterface": "ビューのユーザーインターフェイス",
+		"nf-policy-management.AcessController": "アクセスコントローラ",
+		"nf-policy-management.QueryProvenance": "発見源",
+		"nf-policy-management.AcessPolicies": "すべてのポリシーにアクセス",
+		"nf-policy-management.AcessUser": "アクセスユーザー/ユーザーグループ",
+		"nf-policy-management.retrieve": "詳しくは、情報検索サイト間",
+		"nf-policy-management.diagnostics": "ビューシステム解析",
+		"nf-policy-management.proxy": "プロキシユーザ要求",
+		"nf-policy-management.counters": "アクセスカウンター",
+		"nf-policy-management.ViewComponent": "ビューコンポーネント",
+		"nf-policy-management.ModifyComponent": "コンポーネントを変更",
+		"nf-policy-management.ViewData": "データを表示",
+		"nf-policy-management.ModifyData": "データを変更します",
+		"nf-policy-management.ReceiveData": "サイトにサイトを介してデータを受け取ります",
+		"nf-policy-management.SendData": "データを送信することによって、サイトへのサイト",
+		"nf-policy-management.ViewPolicies": "ビュー・ポリシー",
+		"nf-policy-management.ModifyPolicies": "ポリシーを変更",
+		"nf-policy-management.Searchusers": "検索ユーザー",
+		"nf-policy-management.Ok": "決定します",
+		"nf-policy-management.UserSearch": "ユーザーの検索します",
+		"nf-policy-management.Message1": "一致するユーザーません\\'",
+		"nf-policy-management.Message2": "複数のユーザーが一致します\\'",
+		"nf-policy-management.Cancel": "キャンセル",
+		"nf-policy-management.UpdatePolicy": "ポリシーを更新",
+		"nf-policy-management.Message3": "削除\\'",
+		"nf-policy-management.Message4": "\\'この戦略から？",
+		"nf-policy-management.Message5": "実際にこの戦略を削除したいですか？",
+		"nf-policy-management.Message6": "いいえ選択ポリシーはありません",
+		"nf-policy-management.Message7": "これにより、ユーザーはユーザーインターフェイスを表示することができ",
+		"nf-policy-management.Message8": "これにより、ユーザーは、クラスタ・レポート作成作業を含む/編集コントローラ、およびノードコントローラサービスを表示することができます",
+		"nf-policy-management.Message9": "ソースとユーザーがイベントを継承した検索要求を提出することができます",
+		"nf-policy-management.Message10": "ユーザーが表示することができます/すべてのコンポーネントのポリシーを変更",
+		"nf-policy-management.Message11": "これにより、ユーザーはユーザーグループを変更/表示することができます",
+		"nf-policy-management.Message12": "許可する他のデータを詳細にインスタンスが「サイトへのサイト」は、このデータストリームを取得するストリーム",
+		"nf-policy-management.Message13": "これにより、ユーザーは、システムの分析を表示することができます",
+		"nf-policy-management.Message14": "エージェントコンピュータが他人に代わって要求を送信する許可",
+		"nf-policy-management.Message15": "これにより、ユーザーは/編集カウンタを表示することができます",
+		"nf-policy-management.Message16": "ユーザーがコンポーネントの構成情報の詳細を表示することができます",
+		"nf-policy-management.Message17": "これは、ユーザがコンポーネントの設定情報の詳細を変更することができ",
+		"nf-policy-management.Message18": "これは、データソースとストリームファイルキュー内のアウトバウンド接続に、ユーザーがこのコンポーネントのメタデータとコンテンツを表示することができます",
+		"nf-policy-management.Message19": "これは、ユーザーがストリームファイルキューのアウトバウンド接続をクリアし、リプレイを提出することができます",
+		"nf-policy-management.Message20": "このポートは、データ・ストリーム・インスタンスからのデータを受信することを可能にします",
+		"nf-policy-management.Message21": "このポートは、データ・ストリーム・インスタンスにデータを送信することを可能にします",
+		"nf-policy-management.Message22": "これは、このコンポーネントのユーザーの見ることができます/編集するには、リストのユーザーが表示することができます",
+		"nf-policy-management.Message23": "ユーザーが表示することができます変更することができます/このコンポーネントのユーザーのリストを編集",
+		"nf-policy-management.Text1": "ディスプレイは、効果的な戦略を継承します",
+		"nf-policy-management.Text2": "いいえコンポーネント固有の管理者はありません。",
+		"nf-policy-management.Text3": "指定されたリソースポリシーへの不正なアクセス。",
+		"nf-policy-management.Text4": "ポリシーを表示する権限がありません。",
+		"nf-policy-management.Text5": "いいえ指定されたリソースポリシーはありません。",
+		"nf-policy-management.Text6": "指定されたリソースポリシーへの不正なアクセス。",
+		"nf-policy-management.Write": "書きます",
+		"nf-policy-management.Read": "読みます",
+		"nf-policy-management.View": "ビュー",
+		"nf-policy-management.Modify": "修正します",
+		"nf-policy-management.AllPolicies": "すべてのポリシー",
+		"nf-policy-management.Controller": "このコントローラ",
+		"nf-policy-management.ProcessorGroup": "治療群",
+		"nf-policy-management.reporting-tasks": "タスクを報告",
+		"nf-policy-management.NoUserSearch": "一致するユーザーません",
+		"nf-policy-management.Remove": "削除します",
+        "nf-process-group-configuration.General": "一般的な",
+        "nf-process-group-configuration.ControllerService": "コントローラのサービス",
+		"nf-processor-configuration.Error1": "同時タスクは整数値でなければなりません",
+		"nf-processor-configuration.Error2": "あなたは、事業計画を指定する必要があります。",
+		"nf-processor-configuration.Error3": "あなたは罰の期間を指定する必要があります",
+		"nf-processor-configuration.Error4": "あなたは、生産の継続時間を指定する必要があります",
+        "nf-processor-configuration.ThisProcessorHasNoRelationships": "このプロセッサは、重要ではありません。",
+        "nf-processor-configuration.ViewDetails": "詳細を参照してください。",
+        "nf-processor-configuration.Provenance": "ソース",
+        "nf-processor.5min-1": "5分",
+        "nf-queue-listing.QueueListing": "キューリスト",
+		"nf-queue-listing.Message1": "ダウンロード可能なコンテンツのアクセストークンを生成することができません。",
+		"nf-queue-listing.Message2": "アクセストークンを表示するためのコンテンツを生成することができません。",
+		"nf-queue-listing.Stop": "停止",
+		"nf-queue-listing.Message3": "キューは、ファイルをストリーミングしません.",
+		"nf-queue-listing.FlowFile": "ストリーム・ファイル",
+		"nf-queue-listing.Ok": "決定します",
+		"nf-queue-listing.Message4": "このキューのソースとターゲットは、現在実行されています。このリストは、もはや正確ではないかもしれません。",
+		"nf-queue-listing.Message5": "現在実行されているこのキューのソースは。このリストは、もはや正確ではないかもしれません。",
+		"nf-queue-listing.Message6": "このキューの目標は、この一覧は、もはや正確なものとすることができる。実行されていません。",
+		"nf-queue-listing.NoValueSet": "値が設定されていません",
+		"nf-queue-listing.Yes": "それは",
+		"nf-queue-listing.No": "いいえ",
+		"nf-queue-listing.Position": "場所",
+		"nf-queue-listing.FileName": "ファイル名",
+		"nf-queue-listing.FileSize": "ファイルサイズ",
+		"nf-queue-listing.queuedDuration": "待ち行列の長さ",
+		"nf-queue-listing.lineageDuration": "継承タイム",
+		"nf-queue-listing.penalized": "罰します",
+		"nf-queue-listing.node": "ノード",
+		"nf-queue-listing.Bytes": " バイト",
+		"nf-remote-process-group-configuration.Message5": "リモートプロセスグループの設定",
+		"nf-remote-process-group-ports.Message3": "このポートは削除されました。",
+		"nf-remote-process-group-ports.Message4": "同時タスクの数は、このポートのために計画する必要があります。",
+		"nf-remote-process-group-ports.transmissionSwitch": "スイッチポートの送信",
+		"nf-remote-process-group-ports.description": "指示に指定されていません。",
+        "nf-reporting-task.ReportingTask": "タスクを報告",
+		"nf-reporting-task.Save": "保存",
+		"nf-reporting-task.Ok": "決定します",
+        "nf-settings.ViewState": "ビューステータス",
+        "nf-settings.AccessPolicies": "アクセスポリシー",
+        "nf-settings.Invalid": "無効",
+        "nf-settings.Stopped": "停止",
+        "nf-settings.Running": "操作",
+        "nf-settings.Disabled": "無効にします",
+        "nf-cluster-table.None": "いいえ",
+        "nf-counters-table.Delete": "削除",
+        "nf-counters-table.Connect": "接続",
+        "nf-history.History": "歴史",
+		"nf-history-table.Message5": "IDベースのフィルタ修正コンポーネント",
+		"nf-history-table.Message6": "ユーザーのフィルタに基づいてアクションを実行",
+		"nf-history-table.NotAuthorized": "権限がありません",
+		"nf-history-table.Uri": "統一資源識別子",
+		"nf-history-table.EndTime": "終了時間",
+		"nf-login.Login": "ログイン",
+		"nf-login.Logining": "にログインしています...",
+		"nf-login.SUCCESS": "サクセス",
+		"nf-login.Denied": "ログインは拒否されました",
+		"nf-login.Message1": "サインインできません。",
+		"nf-login.Message2": "あなたがアクセス状態を確認することはできません",
+		"nf-login.Message3": "現在のデータ・ストリームは、ユーザー名/パスワードが設定されていません。",
+		"nf-common.History": "歴史",
+		"nf-common.SupportsExpressionLanguage": "式言語のサポート：",
+		"nf-common.Message23": "アプリケーションが実行されていることを確認し、ログにエラーがないかどうか確認してください。",
+		"nf-common.Message24": "データストリームと通信できません。",
+		"nf-common.Unauthorized": "権限がありません",
+		"nf-common.Message25": "このデータストリームを使用して認証を必要とします。",
+		"nf-common.Message26": "予期しないエラーが発生しました",
+		"nf-common.Error": "エラー",
+        "nf-common.Message27": "空の文字列を設定する前に",
+        "nf-common.Message28": "値は、前に設定されていません",
+        "nf-common.Bytes": " バイト",
+		"nf-connection-details.Processor": "プロセッサ",
+        "nf-connection-details.FromFunnel": "ホッパーから",
+        "nf-connection-details.NoValueSet": "決定します",
+		"nf-processor-details.Error": "エラー",
+		"nf-processor-details.ThisProcessorHasNoRelationships": "プロセッサは問題ではありません。",
+		"nf-status-history.Close": "クローズ",
+		"nf-status-history.Start": "始めます",
+		"nf-status-history.End": "終了",
+		"nf-status-history.Min_Max_Mean": "最低/最大/平均",
+		"nf-status-history.NiFi": "データ流",
+		"nf-provenance-lineage.Lineage Results": "血統結果",
+		"nf-provenance-lineage.Process Lineage": "連続プロセス",
+        "nf-provenance-table.InputClaim": "入力ステートメント",
+		"nf-provenance-table.Provenance": "ソース",
+		"nf-provenance-table.Message7": "アクセストークンを表示するためのコンテンツを生成することができません。",
+		"nf-provenance-table.Message8": "ダウンロード可能なコンテンツのアクセストークンを生成することができません。",
+		"nf-provenance-table.Message9": "いいえ値は以前に設定されていません",
+		"nf-provenance-table.Message10": "原因イベントを検索...",
+		"nf-provenance-table.Process": "進捗",
+		"nf-provenance-table.NoChildren": "子供なし",
+		"nf-provenance-table.NoParent": "いいえ両親はありません",
+		"nf-provenance-table.Bytes": " バイト",
+		"nf-cluster-search.Summary": "サマリー",
+		"nf-cluster-search.ClusterSearch": "クラスタ検索",
+        "nf-cluster-search.Message3": "検索用語に一致するノードなし",
+		"nf-summary-table.Message4": "アナウンスを選別の存在に基づいて",
+		"nf-summary-table.times": "回数",
+		"nf-summary-table.UsageFor": "使用法",
+		"nf-summary-table.GoToProcessor": "ステアリングプロセッサ",
+		"nf-summary-table.ViewStatus": "ビューステートの歴史",
+		"nf-summary-table.ViewProcessor": "ビュープロセッサの詳細",
+		"nf-summary-table.ViewConnect": "ビューの接続の詳細",
+		"nf-summary-table.GoToConnect": "ステアリング接続",
+		"nf-summary-table.GoToProcessorGroup": "ステアリングトリートメント",
+		"nf-summary-table.ViewProcessorGroup": "ビューは、詳細を扱わ",
+		"nf-summary-table.GoToInputPort": "ステアリング入力ポート",
+		"nf-summary-table.ViewInputPort": "入力ポートの詳細を見ます",
+		"nf-summary-table.GoToOutputPort": "ステアリング出力ポート",
+		"nf-summary-table.ViewOutputPort": "詳しくは、出力ポートを表示します",
+		"nf-summary-table.ViewRemoteProcessorGroup": "グループの詳細をリモーティングを参照してください。",
+		"nf-summary-table.aria1": "店が使用するデータ・フロー・リポジトリ",
+        "nf-summary.Summary": "サマリー",
+		"nf-templates-table.DeleteTemplate": "テンプレートを削除します",
+		"nf-templates-table.DownloadTemplate": "テンプレートのダウンロード",
+		"nf-templates-table.Message2": "ダウンロード可能なコンテンツのアクセストークンを生成することができません。",
+        "nf-templates-table.GroupId": "プロセスグループID",
+        "nf-templates-table.Download": "ダウンロード",
+        "nf-templates-table.AccessPolicies": "アクセスポリシー",
+        "nf-templates.Templates": "テンプレート",
+        "nf-users.Users": "ユーザー",
+		"nf-users-table.UserGroup": "ユーザ/グループ",
+		"nf-users-table.Edit": "編集",
+		"nf-users-table.Remove": "削除します",
+        "jquery-propertytable.Delete": "削除",
+        "jquery-propertytable.GoTo": "行きます",
+        "jquery-propertytable.SetEmptyString": "空の文字列を設定します",
+        "jquery-propertytable.AddControllerService": "コントローラサービスを追加",
+        "jquery-propertytable.AddProperty": "プロパティの追加",
+        "jquery-propertytable.PropertyExists": "プロパティが存在します",
+        "jquery-propertytable.Message0": "この名前のプロパティが既に存在しています。",
+        "jquery-propertytable.Message3": "新しいサービスを作成します...",
+        "slick.editors.Message1": "有効な整数を入力してください",
+        "slick.editors.Message2": "有効な正の数を入力してください。",
+        "slick.grid.Message1": "Slickgridは、有効なコンテナを必要とし、",
+        "slick.grid.Message2": "これは、DOMに存在しません",
+        "slick.grid.Message3": "スタイルシートを見つけることができません。",
+        "slick.grid.Message4": "細胞CSSスタイルを追加します：細胞CSSのハッシュキー'",
+        "slick.grid.Message5": "'すでに存在しています。",
+        "slick.grid.Message6": "ノードから取得部：ユニットを取得できません -",
+        "slick.grid.Message7": "Grid : アクティブセルが編集可能になります : options.editableへfalse時,あなたが呼ばれることはありません",
+        "slick.grid.Message8": "選択モデルが設定されていません",
+        "jquery-tagcloud.NoTagsSpecified": "タグ指定なし"
+    };
+    var en = {
+        "nf-about": "NiFi Flow",
+        "nf-bulletin-board.defaultFilterText": "Filter",
+        "nf-bulletin-board.ByMessage": "by message",
+        "nf-bulletin-board.ByName": "by name",
+        "nf-bulletin-board.ById": "by id",
+        "nf-bulletin-board.ByGroupId": "by group id",
+        "nf-bulletin-board.Message1": "Filter ",
+        "nf-bulletin-board.Message2": " matching \\\\'",
+        "nf-bulletin-board.Message3": "Auto refresh started",
+        "nf-bulletin-board.Message4": "Auto refresh stopped",
+        "nf-bulletin-board.BulletinBoard": " Bulletin Board",
+        "nf-actions.NoTargetURIDefined": "No target URI defined.",
+        "nf-actions.Message1": "No eligible components are selected. Please select the components to be enabled and ensure they are no longer running.",
+        "nf-actions.Message2": "No eligible components are selected. Please select the components to be disabled and ensure they are no longer running.",
+        "nf-actions.Message3": "No eligible components are selected. Please select the components to be started and ensure they are no longer running.",
+        "nf-actions.Message4": "No eligible components are selected. Please select the components to be stopped.",
+        "nf-actions.Message5": "No eligible components are selected. Please select the components to be deleted.",
+        "nf-actions.EmptyQueue": "Empty Queue",
+        "nf-actions.Message6": "Are you sure you want to empty this queue? All FlowFiles waiting at the time of the request will be removed.",
+        "nf-actions.Cancel": "Cancel",
+        "nf-actions.Empty": "Empty",
+        "nf-actions.Stop": "Stop",
+        "nf-actions.Message7": " were removed from the queue.",
+        "nf-actions.Message8": "No FlowFiles were removed.",
+        "nf-actions.Message9": "The current selection is not valid to create a template.",
+        "nf-actions.Create": "Create",
+        "nf-actions.Template": "Template '",
+        "nf-actions.Message11": "' was successfully created.",
+        "nf-actions.Message12": "An error occurred while attempting to copy and paste.",
+        "nf-canvas-toobbar.Start": "Start",
+        "nf-canvas-toobbar.Stop": "Stop",
+        "nf-canvas-toobbar.Copy": "Copy",
+        "nf-canvas-toobbar.Paste": "Paste",
+        "nf-canvas-toobbar.Group": "Group",
+        "nf-canvas-toobbar.Enable": "Enable",
+        "nf-canvas-toobbar.Disable": "Disable",
+        "nf-canvas-toobbar.CreateTemplate": "Create Template",
+        "nf-canvas-toobbar.ChangeColor": "Change Color",
+        "nf-canvas-toobbar.Delete": "Delete",
+        "nf-canvas-header.OK": "Ok",
+        "nf-canvas-header.CreateTemplate": "Create Template",
+        "nf-canvas-header.Fill": "Fill",
+        "nf-canvas-header.Apply": "Apply",
+        "nf-canvas-header.Cancel": "Cancel",
+        "nf-canvas-header.Message": "Unable to refresh the current group.",
+        "nf-canvas-toolbox.Input": "Input",
+        "nf-canvas-toolbox.OutPut": "Output",
+        "nf-canvas-toolbox.Filter": "Filter",
+        "nf-canvas-toolbox.Processor": "Processor",
+        "nf-canvas-toolbox.InputPort": "Input Port",
+        "nf-canvas-toolbox.OutputPort": "Output Port",
+        "nf-canvas-toolbox.ProcessGroup": "Process Group",
+        "nf-canvas-toolbox.RemoteProcessGroup": "Remote Process Group",
+        "nf-canvas-toolbox.Connection": "Connection",
+        "nf-canvas-toolbox.Funnel": "Funnel",
+        "nf-canvas-toolbox.Template": "Template",
+        "nf-canvas-toolbox.Label": "Label",
+        "nf-canvas-toolbox.Add": "Add",
+        "nf-canvas-toolbox.Cancel": "Cancel",
+        "nf-canvas-toolbox.Instantiate Template": "Instantiate Template",
+        "nf-canvas-toolbox.Message": "No templates have been loaded into this NiFi.",
+        "nf-canvas-toolbox.Type": "Type",
+        "nf-canvas-toolbox.Tags": "Tags",
+        "nf-canvas-toolbox.Message1": "No description specified",
+        "nf-canvas-toolbox.AddProcessor": "Add Processor",
+        "nf-canvas-toolbox.AddPort": "Add Port",
+        "nf-canvas-toolbox.AddProcessGroup": "Add Process Group",
+        "nf-canvas-toolbox.AddRemoteProcessGroup": "Add Remote Process Group",
+        "nf-canvas-utils.Message1": "Unable to load the group for the specified component.",
+        "nf-canvas-utils.Message2": "Unable to find the specified component.",
+        "nf-canvas-utils.Message3": "Unable to enter the selected group.",
+        "nf-canvas-utils.Message4": "Cannot move Ports out of the root group",
+        "nf-canvas-utils.Message5": "The following ports are currently connected outside of this group: <b>",
+        "nf-canvas-utils.Message6": "The following ports already exist in the target process group: <b>",
+        "nf-canvas.Browser": "Unsupported Browser",
+        "nf-canvas.Message1": "Flow graphs are shown using SVG. Please use a browser that supports rendering SVG.",
+        "nf-connection-configuration.Add": "Add",
+        "nf-connection-configuration.Message0": "The connection must have at least one relationship selected.",
+        "nf-connection-configuration.Cancel": "Cancel",
+        "nf-connection-configuration.Message1": "\\' does not support any relationships.",
+        "nf-connection-configuration.Message2": "\\' does not have any output ports.",
+        "nf-connection-configuration.Message4": "\\' does not have any input ports.",
+        "nf-connection-configuration.Message6": "Configuration Error",
+        "nf-connection-configuration.ConfigureConnection": "Configure Connection",
+        "nf-connection-configuration.Detail": "Details",
+        "nf-connection-configuration.Setting": "Settings",
+        "nf-connection-configuration.CreateConnection": "Create Connection",
+        "nf-connection-configuration.Apply": "Apply",
+        "nf-connection-configuration.Message7": "The connection must have at least one relationship selected.",
+        "nf-connection-configuration.Message8": "Configure Connection",
+        "nf-connection.Message1": "Looping connections must have at least two bend points.",
+        "nf-connection.From": "From",
+        "nf-connection.To": "To",
+        "nf-connection.Name": "Name",
+        "nf-connection.Queued": "Queued",
+        "nf-context-menu.RefreshStatus": "Refresh status",
+        "nf-context-menu.LeaveGroup": "Leave group",
+        "nf-context-menu.Configure": "Configure",
+        "nf-context-menu.ViewConfiguration": "View configuration",
+        "nf-context-menu.EnterGroup": "Enter group",
+        "nf-context-menu.Start": "Start",
+        "nf-context-menu.Stop": "Stop",
+        "nf-context-menu.RemotePorts": "Remote ports",
+        "nf-context-menu.EnableTransmission": "Enable transmission",
+        "nf-context-menu.DisableTransmission": "Disable transmission",
+        "nf-context-menu.Stats": "Stats",
+        "nf-context-menu.DataProvenance": "Data provenance",
+        "nf-context-menu.BringFront": "Bring to front",
+        "nf-context-menu.GoToSource": "Go to source",
+        "nf-context-menu.GoToDestination": "Go to destination",
+        "nf-context-menu.UpstreamConnections": "Upstream connections",
+        "nf-context-menu.DownstreamConnections": "Downstream connections",
+        "nf-context-menu.Usage": "Usage",
+        "nf-context-menu.Refresh": "Refresh",
+        "nf-context-menu.GoTo": "Go to",
+        "nf-context-menu.ChangeColor": "Change color",
+        "nf-context-menu.CenterInView": "Center in view",
+        "nf-context-menu.Copy": "Copy",
+        "nf-context-menu.Paste": "Paste",
+        "nf-context-menu.MoveParentGroup": "Move to parent group",
+        "nf-context-menu.EmptyQueue": "Empty queue",
+        "nf-context-menu.Delete": "Delete",
+        "nf-controller-service.ConfigurationError": "Configuration Error",
+        "nf-controller-service.Cancel": "Cancel",
+        "nf-controller-service.Close": "Close",
+        "nf-controller-service.Message1": "Steps to disable",
+        "nf-controller-service.ActionCanceled": "Action Canceled",
+        "nf-controller-service.Message2": "The request to disable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
+        "nf-controller-service.Message3": "Steps to enable ",
+        "nf-controller-service.Message4": "Action Canceled",
+        "nf-controller-service.Message5": "The request to enable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
+        "nf-controller-service.Message6": "Save changes before going to this Controller Service?",
+        "nf-controller-service.Settings": "Settings",
+        "nf-controller-service.Properties": "Properties",
+        "nf-controller-service.Comments": "Comments",
+        "nf-controller-service.Message7": "Configure Controller Service",
+        "nf-controller-service.Message8": "Disable Controller Service",
+        "nf-controller-service.Disable": "Disable",
+        "nf-controller-service.ServiceOnle": "Service only",
+        "nf-controller-service.Message9": "Enable only this controller service",
+        "nf-controller-service.Message10": "Service and referencing components",
+        "nf-controller-service.Message11": "Enable this controller service and enable/start all referencing components",
+        "nf-controller-service.Message12": "Enable Controller Service",
+        "nf-controller-service.Enable": "Enable",
+        "nf-controller-service.Apply": "Apply",
+        "nf-controller-service.Advanced": "Advanced",
+        "nf-controller-service.Message13": "Save changes before opening the advanced configuration?",
+        "nf-controller-service.Ok": "Ok",
+        "nf-go-to.Close": "Close",
+        "nf-go-to.DownstreamConnections": "Downstream Connections",
+        "nf-go-to.UpstreamConnections": "Upstream Connections",
+        "nf-go-to.Message1": "No upstream components",
+        "nf-go-to.Message2": "No downstream components",
+        "nf-port-configuration.ConfigurePort": "Configure Port",
+        "nf-port-configuration.Apply": "Apply",
+        "nf-port-configuration.ConfigurationError": "Configuration Error",
+        "nf-port-configuration.Cancel": "Cancel",
+        "nf-port-details.PortDetails": "Port Details",
+        "nf-port-details.OK": "Ok",
+        "nf-process-group-configuration.ConfigureProcessGroup": "Configure Process Group",
+        "nf-process-group-configuration.Apply": "Apply",
+        "nf-process-group-configuration.Cancel": "Cancel",
+        "nf-process-group-details.ProcessGroupDetails": "Process Group Details",
+        "nf-process-group-details.Ok": "Ok",
+        "nf-process-group.Message1": "No comments specified",
+        "nf-process-group.Queued": "Queued",
+        "nf-process-group.In": "In",
+        "nf-process-group.ReadWrite": "Read/Write",
+        "nf-process-group.Out": "Out",
+        "nf-process-group.5min": "(5 min)",
+        "nf-processor-configuration.TimerDriven": "Timer driven",
+        "nf-processor-configuration.Message1": "Processor will be scheduled to run on an interval defined by the run schedule.",
+        "nf-processor-configuration.EventDriven": "Event driven",
+        "nf-processor-configuration.Message2": "Processor will be scheduled to run when triggered by an event (e.g. a FlowFile enters an incoming queue). This scheduling strategy is experimental.",
+        "nf-processor-configuration.OnPrimaryNode": "On primary node",
+        "nf-processor-configuration.Message3": "Processor will be scheduled on the primary node on an interval defined by the run schedule.", "nf-processor-configuration.CronDriven": "CRON driven",
+        "nf-processor-configuration.Message5": "Processor will be scheduled to run on at specific times based on the specified CRON string.",
+        "nf-processor-configuration.ConfigurationError": "Configuration Error",
+        "nf-processor-configuration.Message6": "Save changes before going to this Controller Service?",
+        "nf-processor-configuration.Settings": "Settings",
+        "nf-processor-configuration.Scheduling": "Scheduling",
+        "nf-processor-configuration.Properties": "Properties",
+        "nf-processor-configuration.Comments": "Comments",
+        "nf-processor-configuration.ConfigureProcessor": "Configure Processor",
+        "nf-processor-configuration.Debug": "DEBUG",
+        "nf-processor-configuration.Info": "INFO",
+        "nf-processor-configuration.Warn": "WARN",
+        "nf-processor-configuration.Error": "ERROR",
+        "nf-processor-configuration.Apply": "Apply",
+        "nf-processor-configuration.Cancel": "Cancel",
+        "nf-processor-configuration.Advanced": "Advanced",
+        "nf-processor-configuration.Message7": "Save changes before opening the advanced configuration?",
+        "nf-processor.In": "In",
+        "nf-processor.ReadWrite": "Read/Write",
+        "nf-processor.Out": "Out",
+        "nf-processor.TasksTime": "Tasks/Time",
+        "nf-processor.5min": "(5 min)",
+        "nf-registration.Thanks": "Thanks",
+        "nf-registration.Message1": "Your request will be processed shortly.",
+        "nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "Configure Remote Process Group",
+        "nf-remote-process-group-configuration.Apply": "Apply",
+        "nf-remote-process-group-configuration.ConfigurationError": "Configuration Error",
+        "nf-remote-process-group-configuration.Cancel": "Cancel",
+        "nf-remote-process-group-details.RemoteProcessGroupDetails": "Remote Process Group Details",
+        "nf-remote-process-group-details.Ok": "Ok",
+        "nf-remote-process-group-ports.ConfigureRemotePort": "Configure Remote Port",
+        "nf-remote-process-group-ports.Apply": "Apply",
+        "nf-remote-process-group-ports.ConfigurationError": "Configuration Error",
+        "nf-remote-process-group-ports.Message1": "Concurrent tasks must be an integer value.",
+        "nf-remote-process-group-ports.Cancel": "Cancel",
+        "nf-remote-process-group-ports.RemoteProcessGroupPorts": "Remote Process Group Ports",
+        "nf-remote-process-group-ports.Close": "Close",
+        "nf-remote-process-group-ports.Message2": "No description specified.",
+        "nf-remote-process-group.Message1": "No comments specified",
+        "nf-remote-process-group.Sent": "Sent",
+        "nf-remote-process-group.Received": "Received",
+        "nf-remote-process-group.5min": "(5 min)",
+        "nf-remote-process-group.Message2": "Site-to-Site is secure.",
+        "nf-remote-process-group.Message3": "Site-to-Site is NOT secure.",
+        "nf-remote-process-group.Message4": "Remote flow not current",
+        "nf-reporting-task.ConfigurationError": "Configuration Error",
+        "nf-reporting-task.Message1": "Save changes before going to this Controller Service?",
+        "nf-reporting-task.Settings": "Settings",
+        "nf-reporting-task.Properties": "Properties",
+        "nf-reporting-task.Comments": "Comments",
+        "nf-reporting-task.ConfigureReportingTask": "Configure Reporting Task",
+        "nf-reporting-task.Node": "Node",
+        "nf-reporting-task.ClusterManager": "Cluster Manager",
+        "nf-reporting-task.TimerDriven": "Timer driven",
+        "nf-reporting-task.Message2": "Reporting task will be scheduled to run on an interval defined by the run schedule.",
+        "nf-reporting-task.CRONDriven": "CRON driven",
+        "nf-reporting-task.Message3": "Reporting task will be scheduled to run on at specific times based on the specified CRON string.",
+        "nf-reporting-task.Apply": "Apply",
+        "nf-reporting-task.Cancel": "Cancel",
+        "nf-reporting-task.Advanced": "Advanced",
+        "nf-reporting-task.Message4": "Save changes before opening the advanced configuration?",
+        "nf-search.Search": "Search",
+        "nf-secure-port-configuration": "Settings",
+        "nf-secure-port-configuration.AccessControl": "Access Control",
+        "nf-secure-port-configuration.ConfigureSecurePort": "Configure Secure Port",
+        "nf-secure-port-configuration.Apply": "Apply",
+        "nf-secure-port-configuration.Cancel": "Cancel",
+        "nf-secure-port-configuration.InputPort": "InputPort",
+        "nf-secure-port-configuration.OutputPort": "OutputPort",
+        "nf-secure-port-details.Settings": "Settings",
+        "nf-secure-port-details.AccessControl": "Access Control",
+        "nf-secure-port-details.SecurePortDetails": "Secure Port Details",
+        "nf-secure-port-details.Ok": "Ok",
+        "nf-settings.Filter": "Filter",
+        "nf-settings.Message1": "A new flow archive was successfully created.",
+        "nf-settings.Message2": "Settings successfully applied.",
+        "nf-settings.Message3": "The type of controller service to create must be selected.",
+        "nf-settings.Text": "Node",
+        "nf-settings.ClusterManager": "Cluster Manager",
+        "nf-settings.Message4": "This controller service will be available on the nodes only.",
+        "nf-settings.Message5": "This controller service will be available on the cluster manager only.",
+        "nf-settings.Message6": "No description specified",
+        "nf-settings.Message7": "Add Controller Service",
+        "nf-settings.Add": "Add",
+        "nf-settings.Cancel": "Cancel",
+        "nf-settings.Node": "Node",
+        "nf-settings": "Cluster Manager",
+        "nf-settings.ViewDetail": "View Details",
+        "nf-settings.Disable": "Disable",
+        "nf-settings.Enable": "Enable",
+        "nf-settings.Remove": "Remove",
+        "nf-settings.Usage": "Usage",
+        "nf-settings.Name": "Name",
+        "nf-settings.State": "State",
+        "nf-settings.Availability": "Availability",
+        "nf-settings.Message8": "This reporting task will be available on the nodes only.",
+        "nf-settings.Message9": "This reporting task will be available on the cluster manager only.",
+        "nf-settings.Type": "Type",
+        "nf-settings.Tags": "Tags",
+        "nf-settings.Message10": "No description specified",
+        "nf-settings.Message11": "Add Reporting Task",
+        "nf-settings.ViewDetails": "View Details",
+        "nf-settings.Stop": "Stop",
+        "nf-settings.Edit": "Edit",
+        "nf-settings.Start": "Start",
+        "nf-settings.RunStatus": "Run Status",
+        "nf-settings.General": "General",
+        "nf-settings.ControllerServices": "Controller Services",
+        "nf-settings.ReportingTasks": "Reporting Tasks",
+        "nf-settings.Message12": "Create a new controller service",
+        "nf-settings.Message13": "Create a new reporting task",
+        "nf-settings.Settings": " Settings",
+        "nf-cluster-table.Filter": "Filter",
+        "nf-cluster-table.Message1": "Connect \\'",
+        "nf-cluster-table.Message2": "\\' to this cluster?",
+        "nf-cluster-table.Message3": "Disconnect \\'",
+        "nf-cluster-table.Message4": "\\' from the cluster?",
+        "nf-cluster-table.Message5": "Remove \\'",
+        "nf-cluster-table.Message6": "\\' from the cluster?",
+        "nf-cluster-table.NodeDetails": "Node Details",
+        "nf-cluster-table.Ok": "Ok",
+        "nf-cluster-table.ByAddress": "by address",
+        "nf-cluster-table.ByStatus": "by status",
+        "nf-cluster-table.ViewDetails": "View Details",
+        "nf-cluster-table.Node Address": "Node Address",
+        "nf-cluster-table.ActiveThreadCount": "Active Thread Count",
+        "nf-cluster-table.Size": "Size",
+        "nf-cluster-table.Queue": "Queue",        
+        "nf-cluster-table.Status": "Status",
+        "nf-cluster-table.Uptime": "Uptime",
+        "nf-cluster-table.LastHeartbeat": "Last Heartbeat",
+        "nf-cluster-table.Connect": "Connect",
+        "nf-cluster-table.Remove": "Remove",
+        "nf-cluster-table.Disconnect": "Disconnect",
+        "nf-cluster-table.MakePrimary": "Make Primary",
+        "nf-counters-table.Filter": "Filter",
+        "nf-counters-table.ByName": "by name",
+        "nf-counters-table.ByContext": "by context",
+        "nf-counters-table.Context": "Context",
+        "nf-counters-table.Name": "Name",
+        "nf-counters-table.Value": "Value",
+        "nf-counters-table.Reset": "Reset",
+        "nf-counters.Counters": " Counters",
+        "nf-history-table.Filter": "Filter",
+        "nf-history-table.ActionDetail": "Action Details",
+        "nf-history-table.Ok": "Ok",
+        "nf-history-table.ById": "by id",
+        "nf-history-table.Message1": "Filters based on the id of the component that was modified",
+        "nf-history-table.ByUser": "by user",
+        "nf-history-table.Message2": "Filters based on the user that performed the action",
+        "nf-history-table.FilterHistory": "Filter History",
+        "nf-history-table.Cancel": "Cancel",
+        "nf-history-table.PurgeHistory": "Purge History",
+        "nf-history-table.Purge": "Purge",
+        "nf-history-table.Message3": "Are you sure you want to delete all history before '",
+        "nf-history-table.Message3.1": "\\'?",
+        "nf-history-table.Message4": "The end date must be specified.",
+        "nf-history-table.ViewDetails": "View Details",
+        "nf-history-table.DateTime": "Date/Time",
+        "nf-history-table.Name": "Name",
+        "nf-history-table.Type": "Type",
+        "nf-history-table.Operation": "Operation",
+        "nf-history-table.User": "User",
+        "nf-history-table.Value": "Value",
+        "nf-history-table.PreviousValue": "Previous Value",
+        "nf-history-table.SourceId": "Source Id",
+        "nf-history-table.SourceName": "Source Name",
+        "nf-history-table.SourceType": "Source Type",
+        "nf-history-table.Relationship": "Relationship(s)",
+        "nf-history-table.DestinationId": "Destination Id",
+        "nf-history-table.DestinationName": "Destination Name",
+        "nf-history-table.DestinationType": "Destination Type",
+        "nf-history-table.Group": "Group",
+        "nf-history-table.GroupId": "GroupId",
+        "nf-history-table.PreviousGroup": "Previous Group",
+        "nf-history-table.PreviousGroupId": "Previous Group Id",
+        "nf-history-table.EndDate": "End Date",
+        "nf-history-table.History": " History",
+        "nf-common.sensitiveText": "Sensitive value set",
+        "nf-common.Message1": "An unexpected error has occurred",
+        "nf-common.Message2": "Please check the logs.",
+        "nf-common.Message3": "Unable to communicate with NiFi",
+        "nf-common.Message4": "Unauthorized",
+        "nf-common.Message5": "Authorization is required to use this NiFi.",
+        "nf-common.Message6": "Forbidden",
+        "nf-common.Message7": "Unable to authorize you to use this NiFi.",
+        "nf-common.Message9": "An error occurred communicating with the application core. Please check the logs and fix any configuration issues before restarting.",
+        "nf-common.ParseError": "Parse Error",
+        "nf-common.Message10": "Unable to interpret response from NiFi.",
+        "nf-common.Message11": ": Unexpected Response",
+        "nf-common.Message12": "An unexpected error has occurred. Please check the logs.",
+        "nf-common.Message13": "No value set",
+        "nf-common.Message14": "Empty string set",
+        "nf-common.Message15": "Your session will expire soon. Please log in again to avoid being automatically logged out.",
+        "nf-common.Message16": "You are accessing with limited authority. Log in or request an account to access with additional authority granted to you by an administrator.",
+        "nf-common.Message17": "Your session has expired. Please reload to log in again.",
+        "nf-common.Message18": "Your session has expired. Please press Ok to log in again.",
+        "nf-common.Message19": "Please ensure the application is running and check the logs for any errors.",
+        "nf-common.Message20": "Request has timed out. Please ensure the application is running and check the logs for any errors.",
+        "nf-common.Message21": "Request has been aborted.",
+        "nf-common.Message22": "Request transport mechanism failed. Please ensure the host where the application is running is accessible.",
+        "nf-common.SessionExpired": "Session Expired",
+        "nf-common.AccessDenied": "Access Denied",
+        "nf-common.DefaultValue": "Default value:",
+        "nf-common.SupportsExpressionLanuage":"Supports expression language:",
+        "nf-connection-details.FromProcessor": "From processor",
+        "nf-connection-details.FromOutPut": "From output",
+        "nf-connection-details.FromInput": "From input",
+        "nf-connection-details.ToProcessor": "To processor",
+        "nf-connection-details.ToFunnel": "To funnel",
+        "nf-connection-details.ToInput": "To input",
+        "nf-connection-details.ToOutput": "To output",
+        "nf-connection-details.Details": "Details",
+        "nf-connection-details.Settings": "Settings",
+        "nf-connection-details.ConnectionDetails": "Connection Details",
+        "nf-connection-details.Ok": "Ok",
+        "nf-dialog.Ok": "Ok",
+        "nf-dialog.Yes": "Yes",
+        "nf-dialog.No": "No",
+        "nf-processor-details.Settings": "Settings",
+        "nf-processor-details.Scheduling": "Scheduling",
+        "nf-processor-details.Properties": "Properties",
+        "nf-processor-details.Comments": "Comments",
+        "nf-processor-details.ProcessorDetails": "Processor Details",
+        "nf-processor-details.Ok": "Ok",
+        "nf-processor-details.Advanced": "Advanced",
+        "nf-status-history.StatusHistory":"Status History",
+        "nf-status-history.Processor": "Processor",
+        "nf-status-history.InputPort": "Input Port",
+        "nf-status-history.OutputPort": "Output Port",
+        "nf-status-history.ProcessGroup": "Process Group",
+        "nf-status-history.RemoteProcessGroup": "Remote Process Group",
+        "nf-status-history.Connection": "Connection",
+        "nf-status-history.Funnel": "Funnel",
+        "nf-status-history.Template": "Template",
+        "nf-status-history.Label": "Label",
+        "nf-status-history.Message":"Insufficient history, please try again later.",
+        "nf-provenance.DataProvenance": " Data Provenance",
+        "nf-provenance-lineage.Message1": "Computing FlowFile lineage...",
+        "nf-provenance-lineage.ViewDetails": "View details",
+        "nf-provenance-lineage.Message2": "The lineage search has completed successfully but there no results were found. The events may have aged off.",
+        "nf-provenance-lineage.Find parents": "Find parents",
+        "nf-provenance-lineage.Expand": "Expand",
+        "nf-provenance-lineage.Collapse": "Collapse",
+        "nf-provenance-lineage.Cancel": "Cancel",
+        "nf-provenance-table.Filter": "Filter",
+        "nf-provenance-table.Message": "Showing the most recent ",
+        "nf-provenance-table.Of": " of ",
+        "nf-provenance-table.Events": "events.",
+        "nf-provenance-table.Message4": " events, please refine the search.",
+        "nf-provenance-table.Showing": "Showing ",
+        "nf-provenance-table.Message5": " events that match the specified query, please refine the search.",
+        "nf-provenance-table.Message6": "the events that match the specified query.",
+        "nf-provenance-table.Details": "Details",
+        "nf-provenance-table.Attributes": "Attributes",
+        "nf-provenance-table.Content": "Content",
+        "nf-provenance-table.ProvenanceEvent": "Provenance Event",
+        "nf-provenance-table.Ok": "Ok",
+        "nf-provenance-table.Message1": "Successfully submitted replay request.",
+        "nf-provenance-table.Message2": "Search Events",
+        "nf-provenance-table.Search": "Search",
+        "nf-provenance-table.Message3": "Searching provenance events...",
+        "nf-provenance-table.ByComponentName": "by component name",
+        "nf-provenance-table.ByComponentType": "by component type",
+        "nf-provenance-table.ByType": "by type",
+        "nf-provenance-table.ByNode": "by node",
+        "nf-provenance-table.Cluster": "cluster",
+        "nf-provenance-table.ViewDetail": "View Details",
+        "nf-provenance-table.ShowLineage": "Show Lineage",
+        "nf-provenance-table.GoTo": "Go To",
+        "nf-provenance-table.DateTime": "Date/Time",
+        "nf-provenance-table.Type": "Type",
+        "nf-provenance-table.FlowFileUuid": "FlowFile Uuid",
+        "nf-provenance-table.Size": "Size",
+        "nf-provenance-table.ComponentName": "Component Name",
+        "nf-provenance-table.ComponentType": "Component Type",
+        "nf-provenance-table.Node": "Node",
+        "nf-provenance-table.Cancel": "Cancel",
+        "nf-provenance-table.NoValueSet": "No value set",
+        "nf-provenance-table.Claim": "Claim",
+        "nf-provenance-table.InputClain": "Input Claim",
+        "nf-cluster-search.SelectNode": "Select node",
+        "nf-cluster-search.Ok": "Ok",
+        "nf-cluster-search.Message1": "No nodes match \\'",
+        "nf-cluster-search.Message2": "More than one node matches \\'",
+        "nf-cluster-search.Cancel": "Cancel",
+        "nf-cluster-search.NiFiSumary": "NiFi Summary",
+        "nf-summary-table.Filter": "Filter",
+        "nf-summary-table.Processors": "Processors",
+        "nf-summary-table.Connections": "Connections",
+        "nf-summary-table.InputPorts": "Input Ports",
+        "nf-summary-table.OutputPorts": "Output Ports",
+        "nf-summary-table.RemoteProcessGroups": "Remote Process Groups",
+        "nf-summary-table.ProcessGroups": "Process Groups",
+        "nf-summary-table.ByName": "by name",
+        "nf-summary-table.ByType": "by type",
+        "nf-summary-table.BySource": "by source",
+        "nf-summary-table.ByDestination": "by destination",
+        "nf-summary-table.ByUri": "by uri",
+        "nf-summary-table.ViewDetail": "View Details",
+        "nf-summary-table.SourceName": "Source Name",
+        "nf-summary-table.Name": "Name",
+        "nf-summary-table.RunStatus": "Run Status",
+        "nf-summary-table.In": "In",
+        "nf-summary-table.Size": "Size",
+        "nf-summary-table.Message": "Count / data size in the last 5 min",
+        "nf-summary-table.Read": "Read",
+        "nf-summary-table.Write": "Write",
+        "nf-summary-table.5min": "5 min",
+        "nf-summary-table.Message1": "Data size in the last 5 min",
+        "nf-summary-table.Out": "Out",
+        "nf-summary-table.Tasks": "Tasks",
+        "nf-summary-table.Time": "Time",
+        "nf-summary-table.Message2": "Count / duration in the last 5 min",
+        "nf-summary-table.Type": "Type",
+        "nf-summary-table.GoTo": "Go To",
+        "nf-summary-table.ShowHistory": "Show History",
+        "nf-summary-table.ShowDetail": "Show Details",
+        "nf-summary-table.ClusterProcessorSummary": "Cluster Processor Summary",
+        "nf-summary-table.Node": "Node",
+        "nf-summary-table.Queue": "Queue",
+        "nf-summary-table.SourceName": "SourceName",
+        "nf-summary-table.DestinationName": "Destination Name",
+        "nf-summary-table.ClusterConnectionSummary": "Cluster Connection Summary",
+        "nf-summary-table.Close": "Close",
+        "nf-summary-table.Transferred": "Transferred",
+        "nf-summary-table.Message3": "Count / data size transferred to and from connections in the last 5 min",
+        "nf-summary-table.Sent": "Sent",
+        "nf-summary-table.Received": "Received",
+        "nf-summary-table.ClusterProcessGroupSummary": "Cluster Process Group Summary",
+        "nf-summary-table.ClusterInputPortSummary": "Cluster Input Port Summary",
+        "nf-summary-table.ClusterOutPutPortSummary": "Cluster Output Port Summary",
+        "nf-summary-table.Transmitting": "Transmitting",
+        "nf-summary-table.Target URI": "Target URI",
+        "nf-summary-table.ClusterRemoteProcessGroupSummary": "Cluster Remote Process Group Summary",
+        "nf-summary-table.JVM": "JVM",
+        "nf-summary-table.System": "System",
+        "nf-summary-table.SystemDiagnostics": "System Diagnostics",
+        "nf-summary-table.Summary": " Summary",
+        "nf-templates-table.Templates": " Templates",
+        "nf-templates-table.Message": " Select template to import",
+        "nf-templates-table.Filter": "Filter",
+        "nf-templates-table.Message1": "Delete template \'",
+        "nf-templates-table.ByName": "by name",
+        "nf-templates-table.ByDescription": "by description",
+        "nf-templates-table.RemovieTemplate": "Remove Template",
+        "nf-templates-table.DateTime": "Date/Time",
+        "nf-templates-table.Name": "Name",
+        "nf-templates-table.Description": "Description",
+        "nf-users-table.Users.Title": " Users",
+        "nf-users-table.Filter": "Filter",
+        "nf-users-table.UserDetails": "User Details",
+        "nf-users-table.Ok": "Ok",
+        "nf-users-table.UserRoles": "User Roles",
+        "nf-users-table.Apply": "Apply",
+        "nf-users-table.Cancel": "Cancel",
+        "nf-users-table.GroupRoles": "Group Roles",
+        "nf-users-table.DeleteUser": "Delete User",
+        "nf-users-table.Delete": "Delete",
+        "nf-users-table.RevokeAccess": "Revoke Access",
+        "nf-users-table.Revoke": "Revoke",
+        "nf-users-table.SetUserGroup": "Set Users Group",
+        "nf-users-table.Group": "Group",
+        "nf-users-table.Message": "Group name cannot be blank.",
+        "nf-users-table.ByUser": "by user",
+        "nf-users-table.ByGroup": "by group",
+        "nf-users-table.ByRole": "by role",
+        "nf-users-table.AuthorizationPending": "Authorization Pending",
+        "nf-users-table.AccessRevoked": "Access Revoked",
+        "nf-users-table.NoRolesSet": "No roles set",
+        "nf-users-table.Message1": "Multiple users with different roles",
+        "nf-users-table.Message2": "Multiple users with different status",
+        "nf-users-table.Message3": "No status set",
+        "nf-users-table.EditAccess": "Edit Access",
+        "nf-users-table.RevokeAccess.Ungroup": "Ungroup",
+        "nf-users-table.DeleteAccount": "Delete Account",
+        "nf-users-table.User": "User",
+        "nf-users-table.Roles": "Roles",
+        "nf-users-table.LastAccessed": "Last Accessed",
+        "nf-users-table.Status": "Status",
+        "nf-users-table.GroupUsers": "Group Users",
+        "nf-users-table.Message4": "Select one or more users to group.",
+        "nf-users-table.Message5": "Remove all users from group \\'",
+        "nf-users-table.Message6": "Remove user \\'",
+        "nf-users-table.Message7": "\\' from group \\'",
+        "jquery-propertytable.SensitiveValueSet": "Sensitive value set",
+        "jquery-propertytable.EmptyStringSet": "Empty string set",
+        "jquery-propertytable.NoValueSet": "no value set",
+        "jquery-propertytable.RequiredField": "Required field",
+        "jquery-propertytable.Property": "Property",
+        "jquery-propertytable.Value": "Value",
+        "jquery-propertytable.Ok": "Ok",        
+        "jquery-propertytable.Cancel": "Cancel",   
+        "jquery-propertytable.Empty": "Empty",        
+        "jquery-propertytable.NewProperty": "New property",
+        "jquery-propertytable.ControllerService" : "Controller Service",
+        "jquery-propertytable.Tags" : "Tags",
+        "jquery-propertytable.Create" : "Create",
+        "jquery-propertytable.Description" : "Description",
+        "jquery-propertytable.Message": "A property with this name already exists.",
+        "jquery-propertytable.Message1": "Property name must be specified.",
+        "jquery-propertytable.Message2": "No controller service types found that are applicable for this property."
+    };
+
+    return {
+        msg: function (key) {
+            if (locale === "en") {
+                return en[key];
+            }
+            if ((locale === "cn")) {
+                return cn[key];
+            }
+            if ((locale === "jp")) {
+                return jp[key];
+            }
+        }
+    };
+})();
+

From c55c9dfbe2761ac035ac6a5ae10161dda9d80331 Mon Sep 17 00:00:00 2001
From: WangJian <1925432244@qq.com>
Date: Sun, 19 Mar 2017 10:13:53 +0800
Subject: [PATCH 05/13] NIFI-3603:Updated js directory to add *.js localized
 changes and add gloabalization directory

---
 .../webapp/js/nf/globalization/resources.js   | 1884 +++++++++++++++++
 .../js/nf/globalization/resources_jp.js       | 1522 +++++++++++++
 2 files changed, 3406 insertions(+)
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
new file mode 100644
index 000000000000..33019c747be2
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
@@ -0,0 +1,1884 @@
+
+nf._ = (function () {
+    var locale = "cn";
+    var cn = {
+    		"nf-actions.UpdateResource": "更新来源",
+            "nf-actions.Refreshing": "正在刷新",
+            "nf-actions.RemoteGroupProcess": "远程处理组",
+            "nf-actions.NoTargetURIDefined": "目标URI未定义.",
+            "nf-actions.Header1": "激活组件",
+            "nf-actions.Message1": "未选定合格的组件，请选择合格组件进行激活并保证组件当前未被运行.",
+            "nf-actions.Header2": "下线组件",
+            "nf-actions.Message2": "未选定合格的组件，请选择合格组件进行下线并保证组件当前未被运行.",
+            "nf-actions.Header3": "启动组件",
+            "nf-actions.Message3": "未选定合格的组件，请选择合格组件启动并组件当前未被运行.",
+            "nf-actions.Header4": "停止组件",
+            "nf-actions.Message4": "未选定合格的组件，请选择要停止的组件.",
+            "nf-actions.Header5": "重新加载",
+            "nf-actions.Message5": "未选定合格的组件，请选择要删除的组件.",
+            "nf-actions.Header6": "粘贴错误",
+            "nf-actions.EmptyQueue": "清空队列",
+            "nf-actions.Message6": "是否确定要清空队列？所有流文件将被移除.",
+            "nf-actions.Cancel": "取消",
+            "nf-actions.Empty": "空",
+            "nf-actions.Stop": "停止",
+            "nf-actions.Message7": " 被从队列里移除.",
+            "nf-actions.Message8": "没有流文件被移除.",
+            "nf-actions.Message9": "当前选择不能创建模版.",
+            "nf-actions.CreateTemplate": "创建模板",
+            "nf-actions.Create": "创建",
+            "nf-actions.Template": "模版 '",
+            "nf-actions.Message11": "' 成功创建.",
+            "nf-actions.Message12": "试图复制粘贴时发生错误.",
+            "nf-actions.Message13": "模板名称不能为空.",
+            "nf-actions.Message14": "删除请求百分比完成",
+            "nf-actions.Message15": "流文件",
+            "nf-actions.Message16": "在",
+            "nf-actions.Message17": "之外",
+            "nf-actions.Message18": "从队列中移除.",
+            "nf-actions.Message19": "没有引用组件.",
+            "nf-canvas-graph-controls-controller.ProcessGroup": "处理器组",
+            "nf-canvas-graph-controls-controller.Processor": "处理器",
+            "nf-canvas-graph-controls-controller.InputPort": "输入端口",
+            "nf-canvas-graph-controls-controller.OutputPort": "输出端口",
+            "nf-canvas-graph-controls-controller.RemoteProcessGroup": "远程进程组",
+            "nf-canvas-graph-controls-controller.Funnel": "漏斗",
+            "nf-canvas-graph-controls-controller.Label": "标签",
+            "nf-canvas-graph-controls-controller.Connection": "连接",
+            "nf-canvas-graph-controls-controller.MultipleSelected": "已选择多个",
+    		"nf-canvas-global-menu-controller.About": "关于数据流",
+    		"nf-canvas-global-menu-controller.OK": "确认",
+    		"nf-canvas-operate-controller.SUCCESS": "成功",
+    		"nf-canvas-operate-controller.SuccessContent": "模板成功导入.",
+    		"nf-canvas-operate-controller.Upload": "上传模板",
+    		"nf-canvas-operate-controller.ButtonUpload": "上传模板",
+    		"nf-canvas-operate-controller.UploadTemplate": "没有选定模板.请在浏览器中选择一个模板.",
+    		"nf-canvas-operate-controller.Cancel": "取消",
+    		"nf-canvas-operate-controller.ChangeColor": "改变颜色",
+    		"nf-canvas-operate-controller.Apply": "应用",
+    		"nf-canvas-operate-controller.Error": "错误",
+    		"nf-canvas-operate-controller.CreateTemplate": "创建模板",
+    		"nf-canvas-operate-controller.Message1": "无法导入模板. 请检查日志中的错误.",
+            "nf-canvas-flow-status.Processors": "处理器",
+            "nf-canvas-flow-status.ProcessGroups": "处理组",
+            "nf-canvas-flow-status-controller.Processors": "处理器",
+            "nf-canvas-flow-status-controller.ProcessGroups": "处理组",
+            "nf-canvas-flow-status-controller.RemoteProcessGroups": "远程处理组",
+            "nf-canvas-flow-status-controller.Connection": "连接",
+            "nf-canvas-flow-status-controller.InputPorts": "输入端口",
+            "nf-canvas-flow-status-controller.OutputPorts": "输出端口",
+            "nf-canvas-flow-status-controller.Funnel": "漏斗",
+            "nf-canvas-flow-status-controller.no-matches": "没有符合查询要求的结果",
+            "nf-canvas-toobbar.Start": "启动",
+            "nf-canvas-toobbar.Stop": "停止",
+            "nf-canvas-toobbar.Copy": "复制",
+            "nf-canvas-toobbar.Paste": "粘贴",
+            "nf-canvas-toobbar.Group": "组",
+            "nf-canvas-toobbar.Enable": "有效",
+            "nf-canvas-toobbar.Disable": "无效",
+            "nf-canvas-toobbar.CreateTemplate": "创建模版",
+            "nf-canvas-toobbar.ChangeColor": "改变颜色",
+            "nf-canvas-toobbar.Delete": "删除",        
+            "nf-canvas-header.OK": "确定",
+            "nf-canvas-header.CreateTemplate": "创建模版",
+            "nf-canvas-header.Fill": "填写",
+            "nf-canvas-header.Apply": "适用",
+            "nf-canvas-header.Cancel": "取消",
+    		"nf-group-component.AddProcessGroup": "添加处理组",
+    		"nf-group-component.Add": "添加",
+    		"nf-group-component.Cancel": "取消",
+    		"nf-input-port-component.AddPort": "添加端口",
+    		"nf-input-port-component.Add": "添加",
+    		"nf-input-port-component.Cancel": "取消",
+    		"nf-input-port-component.new-port-type": "输入",
+    		"nf-output-port-component.Add": "添加",
+    		"nf-output-port-component.Cancel": "取消",
+    		"nf-output-port-component.new-port-type": "输出",
+    		"nf-processor-component.AddProcessor": "添加处理器",
+    		"nf-processor-component.AddProcessorContent": "创建该类型的处理器必须被选择.",
+    		"nf-processor-component.Add": "添加",
+    		"nf-processor-component.Cancel": "取消",
+    		"nf-processor-component.Type": "类型",
+    		"nf-processor-component.Tags": "标签",
+    		"nf-processor-component.NoDescriptionSpecified": "未指定说明",
+    		"nf-remote-process-group-component.ConfigurationError": "配置错误",
+    		"nf-remote-process-group-component.AddRemoteProcessGroup": "添加远程处理组",
+    		"nf-remote-process-group-component.Add": "添加",
+    		"nf-remote-process-group-component.Cancel": "取消",
+    		"nf-template-component.AddTemplate": "添加模板",
+    		"nf-template-component.Add": "添加",
+    		"nf-template-component.Cancel": "取消",
+    		"nf-template-component.InstantiateTemplate": "实例化模板",
+    		"nf-template-component.InstantiateTemplateContent": "数据流中没有被加载的模板.",
+            "nf-canvas-header.Message": "不能刷新当前组.",
+            "nf-canvas-header.components.AddGroup": "添加处理组",
+            "nf-canvas-header.components.AddButton": "添加",
+            "nf-canvas-header.components.CancelButton": "取消",
+            "nf-canvas-toolbox.Input": "输入",
+            "nf-canvas-toolbox.OutPut": "输出",        
+            "nf-canvas-toolbox.Filter": "过滤器",
+            "nf-canvas-toolbox.Processor": "处理器",
+            "nf-canvas-toolbox.InputPort": "输入端口",
+            "nf-canvas-toolbox.OutputPort": "输出端口",
+            "nf-canvas-toolbox.ProcessGroup": "处理组",
+            "nf-canvas-toolbox.RemoteProcessGroup": "远程处理组",
+            "nf-canvas-toolbox.Connection": "连接",
+            "nf-canvas-toolbox.Funnel": "漏斗",
+            "nf-canvas-toolbox.Template": "模版",
+            "nf-canvas-toolbox.Label": "标签",
+            "nf-canvas-toolbox.Add": "添加",
+            "nf-canvas-toolbox.Cancel": "取消",
+            "nf-canvas-toolbox.Instantiate Template": "实例化模版",
+            "nf-canvas-toolbox.Message": "模版尚未加载进入数据流系统.",
+            "nf-canvas-toolbox.Type": "类型",
+            "nf-canvas-toolbox.Tags": "标签",
+            "nf-canvas-toolbox.Message1": "没有指定描述",
+            "nf-canvas-toolbox.AddProcessor": "添加处理器",
+            "nf-canvas-toolbox.AddPort": "添加端口",
+            "nf-canvas-toolbox.AddProcessGroup": "添加处理过程组",
+            "nf-canvas-toolbox.AddRemoteProcessGroup": "添加远程处理过程组",
+            "nf-canvas-utils.Header1": "处理组",
+            "nf-canvas-utils.Message1": "无法加载特定组件的组.",
+            "nf-canvas-utils.Message2": "无法找到特定组件.",
+            "nf-canvas-utils.Message3": "无法进入选定组.",
+            "nf-canvas-utils.Message4": "不能把端口移出根组",
+            "nf-canvas-utils.Message5": "这些端口当前与组外有连接: <b>",
+            "nf-canvas-utils.Message6": "这些端口在目标处理过程组里已经存在: <b>",
+            "nf-canvas-utils.Message7": "组件已经在最顶层组",
+            "nf-canvas.Browser": "不支持的浏览器",
+            "nf-canvas.Message1": "流程图需要用SVG显示.请选择支持SVG的浏览器.",
+            "nf-canvas.ClusterConn": "集群连接",
+            "nf-canvas.Message2": "此节点当前未连接到集群.对此处对数据流进行的任何修改都不会在群集中复制.",
+            "nf-canvas.Message3": "此节点刚刚加入群集.对此处对数据流的任何修改都将在群集中进行复制.",
+            "nf-component-state.Header1": "组件状态",
+            "nf-component-state.Button1": "关闭",
+            "nf-component-state.Content1": "该组件没有需要清除的状态",
+    		"nf-component-state.Message1": "组件状态只能在组件没有活动运行时清除",
+    		"nf-component-state.Key": "键",
+    		"nf-component-state.Value": "值",
+    		"nf-component-state.Scope": "范围",
+    		"nf-connection-configuration.ConnectionConfiguration": "连接配置",
+            "nf-connection-configuration.Add": "添加",
+            "nf-connection-configuration.Message0": "连接必须至少选择一个关联.",
+            "nf-connection-configuration.Cancel": "取消",
+            "nf-connection-configuration.Message1": "\\' 不支持任何关联.",
+            "nf-connection-configuration.Message2": "\\' 无任何输出端口.",
+            "nf-connection-configuration.Message4": "\\' 无任何输入端口.",
+    		"nf-connection-configuration.Message5": "未授权任何输出端口 \\'",
+            "nf-connection-configuration.Message6": "配置错误",
+            "nf-connection-configuration.ConfigureConnection": "配制连接",
+            "nf-connection-configuration.Detail": "详情",
+            "nf-connection-configuration.Setting": "设置",
+            "nf-connection-configuration.CreateConnection": "创建连接",
+            "nf-connection-configuration.Apply": "应用",
+            "nf-connection-configuration.Message7": "连接至少要选择一个关联.",
+    		"nf-connection.Connection": "连接",
+            "nf-connection.Message1": "循环连接要至少有两个拐点.",
+            "nf-connection.From": "从",
+            "nf-connection.To": "到",
+            "nf-connection.Name": "名称",
+            "nf-connection.Queued": "排队",
+            "nf-connection.FlowFilesOlder": "使流文件超过",
+            "nf-context-menu.RefreshStatus": "刷新状态",
+            "nf-context-menu.LeaveGroup": "离开组",
+            "nf-context-menu.Configure": "配置",
+            "nf-context-menu.ViewConfiguration": "查看配置",
+            "nf-context-menu.EnterGroup": "进入组",
+            "nf-context-menu.Start": "开始",
+            "nf-context-menu.Stop": "停止",
+            "nf-context-menu.canEnable": "开启",
+            "nf-context-menu.canDisable": "禁用",
+            "nf-context-menu.canGroup": "组",
+            "nf-context-menu.canManagePolicies": "访问策略",
+            "nf-context-menu.canAlign1": "垂直对齐",
+            "nf-context-menu.canAlign2": "水平对齐",
+            "nf-context-menu.canUploadTemplate": "上传模板",
+            "nf-context-menu.canCreateTemplate": "创建模板",
+            "nf-context-menu.RemotePorts": "远程端口",
+            "nf-context-menu.EnableTransmission": "使转换有效",
+            "nf-context-menu.DisableTransmission": "使转换无效",
+    		"nf-context-menu.StatsHistory": "历史状态",
+    		"nf-context-menu.ViewState": "查看状态",
+            "nf-context-menu.Stats": "状态",
+            "nf-context-menu.DataProvenance": "数据来源",
+            "nf-context-menu.BringFront": "带到前端",
+            "nf-context-menu.GoToSource": "进入源",
+            "nf-context-menu.GoToDestination": "进入目标",
+            "nf-context-menu.UpstreamConnections": "上游连接",
+            "nf-context-menu.DownstreamConnections": "下游连接",
+            "nf-context-menu.Usage": "用途",
+            "nf-context-menu.Refresh": "刷新",
+            "nf-context-menu.GoTo": "进入",
+            "nf-context-menu.ChangeColor": "变换颜色",
+            "nf-context-menu.CenterInView": "视图居中",
+            "nf-context-menu.Copy": "复制",
+            "nf-context-menu.Paste": "粘贴",
+            "nf-context-menu.MoveParentGroup": "移动到父亲组",
+    		"nf-context-menu.QueueList": "队列列表",
+            "nf-context-menu.EmptyQueue": "清空队列",
+            "nf-context-menu.Delete": "删除",
+            "nf-controller-service.ConfigurationError": "配置错误",
+            "nf-controller-service.Cancel": "取消",
+            "nf-controller-service.Close": "关闭",
+            "nf-controller-service.Message1": "使无效的步骤",
+            "nf-controller-service.ActionCanceled": "动作取消",
+            "nf-controller-service.Message2": "请求有效的动作被取消，但是部分请求可能已经被执行. 请验证服务关联的所有组件.",
+            "nf-controller-service.Message3": "有效步骤 ",
+            "nf-controller-service.Message4": "动作取消",
+            "nf-controller-service.Message5": "请求无效的动作被取消，但是部分请求可能已经被执行. 请验证服务关联的所有组件..",
+            "nf-controller-service.Message6": "保存设置?",
+            "nf-controller-service.Settings": "配置",
+            "nf-controller-service.Properties": "属性",
+            "nf-controller-service.Comments": "评论",
+            "nf-controller-service.Message7": "配置控制器服务",
+            "nf-controller-service.Message8": "使控制器服务无效",
+            "nf-controller-service.Disable": "无效",
+            "nf-controller-service.ServiceOnle": "仅服务",
+            "nf-controller-service.Message9": "仅有效当前控制器服务",
+            "nf-controller-service.Message10": "服务和相关组件",
+            "nf-controller-service.Message11": "使控制器服务有效，并使关联组件有效/启动",
+            "nf-controller-service.Message12": "使控制服务器有效",
+            "nf-controller-service.Enable": "有效",
+            "nf-controller-service.Apply": "应用",
+            "nf-controller-service.Advanced": "高级",
+            "nf-controller-service.Message13": "在进入高级设置前保存变更?",
+            "nf-controller-service.Ok": "确定",
+    		"nf-controller-service.ControllerService": "控制器服务",
+    		"nf-controller-service.Message14": "由于未授权的引用组件，无法禁用.",
+    		"nf-controller-service.Message15": "由于未授权的引用组件，无法启用.",
+    		"nf-controller-service.Save": "保存",
+    		"nf-controller-service.Message16": "在进入控制器服务前保存变更?",
+            "nf-controller-services.Add": "添加",
+    		"nf-controller-services.ControllerService": "控制器服务",
+    		"nf-controller-services.Message14": "必须选择要创建的控制器服务类型.",
+    		"nf-controller-services.AddControllerService": "添加控制器服务",
+    		"nf-controller-services.Invalid": "失效",
+    		"nf-controller-services.Disabled": "已禁用",
+    		"nf-controller-services.Disabling": "禁用中",
+    		"nf-controller-services.Enabled": "已启用",
+    		"nf-controller-services.Enabling": "启用中",
+    		"nf-controller-services.toolTip": "基于存在的公告进行排序",
+    		"nf-controller-services.Name": "名称",
+    		"nf-controller-services.Type": "类型",
+    		"nf-controller-services.Tags": "标签",
+    		"nf-controller-services.State": "状态",
+    		"nf-controller-services.ProcessGroup": "处理组",
+    		"nf-controller-services.type-description": "未指定说明",
+    		"nf-controller-services.viewDtails": "查看详情",
+    		"nf-controller-services.usage": "用法",
+    		"nf-controller-services.disable": "禁用",
+    		"nf-controller-services.edit": "编辑",
+    		"nf-controller-services.enable": "启用",
+    		"nf-controller-services.viewstate": "查看状态",
+    		"nf-controller-services.remove": "移除",
+    		"nf-controller-services.acesspolicies": "访问策略",
+    		"nf-custom-ui.AdvancedConfiguration": "高级配置",
+    		"nf-custom-ui.Message1": "无法生成访问高级访问配置对话框的访问令牌.",
+    		"nf-draggable.ComponentPosition": "组件位置",
+    		"nf-draggable.Message1": "未授权修改目的地组.",
+    		"nf-draggable.Message2": "选择修改的每个组件都必须被授权.",
+            "nf-go-to.Close": "关闭",
+            "nf-go-to.NoDownstreamComponents": "无下游组件",
+            "nf-go-to.NoUpstreamComponents": "无上游组件",
+            "nf-go-to.DownstreamConnections": "下游连接",
+            "nf-go-to.UpstreamConnections": "上游连接",
+            "nf-go-to.Message1": "无上游连接",
+            "nf-go-to.Message2": "无下游连接", 
+            "nf-go-to.Funnel": "漏斗",
+            "nf-label-configuration.ConfigureLabel": "配置标签",
+    		"nf-label-configuration.Apply": "应用",
+    		"nf-label-configuration.Cancel": "取消",
+    		"nf-policy-management.ViewUserInterface": "查看用户接口",
+    		"nf-policy-management.AcessController": "访问控制器",
+    		"nf-policy-management.QueryProvenance": "查询来源",
+    		"nf-policy-management.AcessPolicies": "访问所有策略",
+    		"nf-policy-management.AcessUser": "访问用户/用户组",
+    		"nf-policy-management.retrieve": "检索站点到站点的详情信息",
+    		"nf-policy-management.diagnostics": "查看系统分析",
+    		"nf-policy-management.proxy": "代理用户请求",
+    		"nf-policy-management.counters": "访问计数器",
+    		"nf-policy-management.ViewComponent": "查看组件",
+    		"nf-policy-management.ModifyComponent": "修改组件",
+    		"nf-policy-management.ViewData": "查看数据",
+    		"nf-policy-management.ModifyData": "修改数据",
+    		"nf-policy-management.ReceiveData": "通过站点到站点接收数据",
+    		"nf-policy-management.SendData": "通过站点到站点发送数据",
+    		"nf-policy-management.ViewPolicies": "查看策略",
+    		"nf-policy-management.ModifyPolicies": "修改策略",
+    		"nf-policy-management.Searchusers": "搜索用户",
+    		"nf-policy-management.Ok": "确定",
+    		"nf-policy-management.Add": "添加",
+    		"nf-policy-management.UserSearch": "用户搜索",
+    		"nf-policy-management.Message1": "没有匹配的用户\\'",
+    		"nf-policy-management.Message2": "多个用户匹配\\'",
+    		"nf-policy-management.Cancel": "取消",
+    		"nf-policy-management.UpdatePolicy": "更新策略",
+    		"nf-policy-management.DeletePolicy": "删除策略",
+    		"nf-policy-management.Message3": "删除\\'",
+    		"nf-policy-management.Message4": "\\'从这个策略？",
+    		"nf-policy-management.Message5": "确实要删除此策略吗?",
+    		"nf-policy-management.Message6": "没有选择策略",
+    		"nf-policy-management.Message7": "允许用户查看用户接口",
+    		"nf-policy-management.Message8": "允许用户查看/修改控制器，包括集群中的报告任务，控制器服务和节点",
+    		"nf-policy-management.Message9": "允许用户提交来源搜索并请求事件继承",
+    		"nf-policy-management.Message10": "允许用户查看/修改所有组件的策略",
+    		"nf-policy-management.Message11": "允许用户查看/修改用户组",
+    		"nf-policy-management.Message12": "允许其他NiFi实例检索此数据流的“站点到站点”详情信息",
+    		"nf-policy-management.Message13": "允许用户查看系统分析",
+    		"nf-policy-management.Message14": "允许代理计算机代表他人发送请求",
+    		"nf-policy-management.Message15": "允许用户查看/修改计数器",
+    		"nf-policy-management.Message16": "允许用户查看组件配置详情信息",
+    		"nf-policy-management.Message17": "允许用户修改组件配置详情信息",
+    		"nf-policy-management.Message18": "允许用户通过出站连接中的源数据和流文件队列查看此组件的元数据和内容",
+    		"nf-policy-management.Message19": "允许用户在出站连接中清空流文件队列并提交重放",
+    		"nf-policy-management.Message20": "允许此端口从这些数据流实例接收数据",
+    		"nf-policy-management.Message21": "允许此端口向这些数据流实例发送数据",
+    		"nf-policy-management.Message22": "允许用户查看可以查看/修改此组件的用户列表",
+    		"nf-policy-management.Message23": "允许用户修改可以查看/修改此组件的用户列表",
+    		"nf-policy-management.Message24": "通过删除此策略，此组件的权限将恢复为继承的策略（如果适用）.",
+    		"nf-policy-management.Text1": "显示从中继承的有效策略",
+    		"nf-policy-management.Text2": "没有组件特定的管理员.",
+    		"nf-policy-management.Text3": "未授权访问指定资源的策略.",
+    		"nf-policy-management.Text4": "未授权查看该策略.",
+    		"nf-policy-management.Text5": "没有指定资源的策略.",
+    		"nf-policy-management.Text6": "未授权访问指定资源的策略.",
+    		"nf-policy-management.Write": "写",
+    		"nf-policy-management.Read": "读",
+    		"nf-policy-management.View": "查看",
+    		"nf-policy-management.Modify": "修改",
+    		"nf-policy-management.AllPolicies": "所有策略",
+    		"nf-policy-management.Controller": "这个控制器",
+    		"nf-policy-management.ProcessorGroup": "处理组",
+    		"nf-policy-management.reporting-tasks": "报告任务",
+    		"nf-policy-management.NoUserSearch": "没有匹配的用户",
+    		"nf-policy-management.Remove": "移除",
+            "nf-port-configuration.ConfigurePort": "配置端口",
+            "nf-port-configuration.Apply": "应用",
+            "nf-port-configuration.ConfigurationError": "配置错误",
+            "nf-port-configuration.Cancel": "取消",
+            "nf-port-details.PortDetails": "端口详情",
+            "nf-port-details.OK": "确定",
+            "nf-process-group-configuration.ConfigureProcessGroup": "配置处理组",
+            "nf-process-group-configuration.Apply": "应用",
+            "nf-process-group-configuration.Cancel": "取消",
+            "nf-process-group-configuration.General": "通用",
+            "nf-process-group-configuration.ControllerService": "控制器服务",
+            "nf-process-group-details.ProcessGroupDetails": "处理组详情",
+            "nf-process-group-details.Ok": "应用",
+            "nf-process-group.Message1": "无评价内容",
+            "nf-process-group.Queued": "队列中",
+            "nf-process-group.In": "输入",
+            "nf-process-group.ReadWrite": "读/写",
+            "nf-process-group.Out": "输出",
+            "nf-process-group.5min": "(5 分钟)",
+            "nf-process-group.Message1": "没有指定的评论",
+            "nf-processor-configuration.TimerDriven": "时间驱动",
+            "nf-processor-configuration.Message1": "处理器将按照计划任务时间间隔执行.",
+            "nf-processor-configuration.EventDriven": "事件驱动",
+            "nf-processor-configuration.Message2": "处理器将按照事件驱动执行 (例如 流文件进入一个队列). 计划任务策略是试探性的.",
+            "nf-processor-configuration.OnPrimaryNode": "在主节点",
+            "nf-processor-configuration.Message3": "处理器将在主节点按照设置间隔时间被执行.",
+            "nf-processor-configuration.CronDriven": "CRON驱动",
+            "nf-processor-configuration.Message5": "处理器将按照CRON格式指定的时间被执行.",
+    		"nf-processor-configuration.Error1": "并发任务必须是整数值",
+    		"nf-processor-configuration.Error2": "必须指定运行计划",
+    		"nf-processor-configuration.Error3": "必须指定处罚持续时间",
+    		"nf-processor-configuration.Error4": "必须指定产量持续时间",
+            "nf-processor-configuration.ConfigurationError": "配置错误",
+            "nf-processor-configuration.Message6": "保存变更在进入控制器服务之前?",
+            "nf-processor-configuration.Settings": "设置",
+            "nf-processor-configuration.Scheduling": "执行计划",
+            "nf-processor-configuration.Properties": "属性",
+            "nf-processor-configuration.Comments": "评论",
+            "nf-processor-configuration.ConfigureProcessor": "配置处理器",
+            "nf-processor-configuration.Debug": "调试",
+            "nf-processor-configuration.Info": "信息",
+            "nf-processor-configuration.Warn": "警告",
+            "nf-processor-configuration.Error": "错误",
+            "nf-processor-configuration.Apply": "应用",
+            "nf-processor-configuration.Cancel": "取消",
+            "nf-processor-configuration.Advanced": "高级",
+            "nf-processor-configuration.Message7": "保存变更在进入高级设置?",
+            "nf-processor-configuration.ThisProcessorHasNoRelationships": "这个处理器没有关系.",
+            "nf-processor-configuration.ViewDetails": "查看详情",
+            "nf-processor-configuration.Provenance": "来源",
+            "nf-processor.In": "输入",
+            "nf-processor.ReadWrite": "读/写",
+            "nf-processor.Out": "输出",
+            "nf-processor.TasksTime": "任务/时间",
+            "nf-processor.5min-1": "5 分钟",
+            "nf-processor.5min": "(5 分钟)",
+            "nf-registration.Thanks": "谢谢",
+            "nf-registration.Message1": "您的请求将被快速执行.",
+            "nf-queue-listing.QueueListing": "队列列表",
+    		"nf-queue-listing.Message1": "无法生成用于下载内容的访问令牌.",
+    		"nf-queue-listing.Message2": "无法生成用于查看内容的访问令牌.",
+    		"nf-queue-listing.Stop": "停止",
+    		"nf-queue-listing.Message3": "队列没有流文件.",
+    		"nf-queue-listing.FlowFile": "流文件",
+    		"nf-queue-listing.Ok": "确定",
+    		"nf-queue-listing.Message4": "此队列的源和目标当前正在运行. 这个列表可能不再准确.",
+    		"nf-queue-listing.Message5": "此队列的源当前正在运行. 此商家信息可能不再准确无误.",
+    		"nf-queue-listing.Message6": "此队列的目标正在运行. 此商家信息可能不再准确无误.",
+    		"nf-queue-listing.NoValueSet": "未设置值",
+    		"nf-queue-listing.Yes": "是",
+    		"nf-queue-listing.No": "否",
+    		"nf-queue-listing.Position": "位置",
+    		"nf-queue-listing.FileName": "文件名",
+    		"nf-queue-listing.FileSize": "文件大小",
+    		"nf-queue-listing.queuedDuration": "排队持续时间",
+    		"nf-queue-listing.lineageDuration": "继承时间",
+    		"nf-queue-listing.penalized": "处罚",
+    		"nf-queue-listing.node": "节点",
+    		"nf-queue-listing.Bytes": " 字节",
+    		"nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "配置远程处理组",
+            "nf-remote-process-group-configuration.Apply": "应用",
+            "nf-remote-process-group-configuration.ConfigurationError": "配置错误",
+            "nf-remote-process-group-configuration.Cancel": "取消",
+    		"nf-remote-process-group-configuration.Message5": "远程进程组配置",
+            "nf-remote-process-group-details.RemoteProcessGroupDetails": "远程处理组详情",
+            "nf-remote-process-group-details.Ok": "确定",
+            "nf-remote-process-group-ports.ConfigureRemotePort": "配置远程端口",
+            "nf-remote-process-group-ports.Apply": "应用",
+            "nf-remote-process-group-ports.ConfigurationError": "配置错误",
+            "nf-remote-process-group-ports.Message1": "当前任务要求整数值.",
+            "nf-remote-process-group-ports.Cancel": "取消",
+            "nf-remote-process-group-ports.RemoteProcessGroupPorts": "远程处理组端口",
+            "nf-remote-process-group-ports.Close": "关闭",
+            "nf-remote-process-group-ports.Message2": "没有描述.",
+    		"nf-remote-process-group-ports.Message3": "此端口已删除.",
+    		"nf-remote-process-group-ports.Message4": "应同时为此端口计划的任务数.",
+    		"nf-remote-process-group-ports.transmissionSwitch": "切换端口传输",
+    		"nf-remote-process-group-ports.description": "未指定说明.",
+            "nf-remote-process-group.Message1": "没有评论",
+            "nf-remote-process-group.Sent": "发送",
+            "nf-remote-process-group.Received": "接收",
+            "nf-remote-process-group.5min": "(5 分钟)",
+            "nf-remote-process-group.Message2": "Site-to-Site 是安全的.",
+            "nf-remote-process-group.Message3": "Site-to-Site 是非安全的.",
+            "nf-remote-process-group.Message4": "远程流不在当前运行",
+            "nf-reporting-task.ReportingTask": "报告任务",
+    		"nf-reporting-task.Save": "保存",
+            "nf-reporting-task.ConfigurationError": "配置错误",
+            "nf-reporting-task.Message1": "进入控制器服务前保存设置?",
+            "nf-reporting-task.Settings": "设置",
+            "nf-reporting-task.Properties": "属性",
+            "nf-reporting-task.Comments": "评论",
+            "nf-reporting-task.ConfigureReportingTask": "配置报告任务",
+            "nf-reporting-task.Node": "节点",
+            "nf-reporting-task.ClusterManager": "集群管理者",
+            "nf-reporting-task.TimerDriven": "时间驱动",
+            "nf-reporting-task.Message2": "报告任务将按照指定时间间隔执行.",
+            "nf-reporting-task.CRONDriven": "CRON驱动",
+            "nf-reporting-task.Message3": "报告任务将按照CRON配置执行.",
+            "nf-reporting-task.Apply": "应用",
+            "nf-reporting-task.Cancel": "取消",
+            "nf-reporting-task.Advanced": "高级",
+            "nf-reporting-task.Message4": "在进入高级设置前保存变更?",
+    		"nf-reporting-task.Ok": "确定",
+            "nf-search.Search": "检索",
+            "nf-secure-port-configuration": "设置",
+            "nf-secure-port-configuration.AccessControl": "权限控制",
+            "nf-secure-port-configuration.ConfigureSecurePort": "配置安全端口",
+            "nf-secure-port-configuration.Apply": "应用",
+            "nf-secure-port-configuration.Cancel": "取消",
+            "nf-secure-port-configuration.InputPort": "输入端口",
+            "nf-secure-port-configuration.OutputPort": "输出端口",
+            "nf-secure-port-details.Settings": "设置",
+            "nf-secure-port-details.AccessControl": "权限控制",
+            "nf-secure-port-details.SecurePortDetails": "安全端口详情",
+            "nf-secure-port-details.Ok": "确定",
+            "nf-settings.Filter": "过滤器",
+            "nf-settings.Message1": "一个流压缩包被成功创建.",
+            "nf-settings.Message2": "设置被成功适用.",
+            "nf-settings.Message3": "控制器服务的类型必须被选定.",
+            "nf-settings.Text": "节点",
+            "nf-settings.ClusterManager": "集群管理员",
+            "nf-settings.Message4": "控制器服务在节点可使用.",
+            "nf-settings.Message5": "控制器服务在集群管理员可使用.",
+            "nf-settings.Message6": "无描述信息",
+            "nf-settings.Message7": "添加控制器服务",
+            "nf-settings.Add": "添加",
+            "nf-settings.Cancel": "取消",
+            "nf-settings.Node": "节点",
+            "nf-settings": "集群管理员",
+            "nf-settings.ViewDetail": "查看详情",
+            "nf-settings.Disable": "无效",
+            "nf-settings.Enable": "有效",
+            "nf-settings.Remove": "移除",
+            "nf-settings.Usage": "用法",
+            "nf-settings.Name": "名称",
+            "nf-settings.State": "状态",
+            "nf-settings.Availability": "可以获得",
+            "nf-settings.Message8": "报告任务仅节点可获得.",
+            "nf-settings.Message9": "报告任务集群管理者有权取得.",
+            "nf-settings.Type": "类型",
+            "nf-settings.Tags": "标签",
+            "nf-settings.Message10": "无指定的描述",
+            "nf-settings.Message11": "添加报告任务",
+            "nf-settings.ViewDetails": "查看详情",
+            "nf-settings.Stop": "停止",
+            "nf-settings.Edit": "编辑",
+            "nf-settings.Start": "开始",
+            "nf-settings.RunStatus": "运行状态",
+            "nf-settings.General": "通用",
+            "nf-settings.ControllerServices": "控制器服务",
+            "nf-settings.ReportingTasks": "报告任务",
+            "nf-settings.Message12": "创建一个新的控制器服务",
+            "nf-settings.Message13": "创建一个新的报告任务",
+            "nf-settings.Settings": " 设置",
+            "nf-settings.ViewState": "查看状态",
+            "nf-settings.AccessPolicies": "访问策略",
+            "nf-settings.Invalid": "无效",
+            "nf-settings.Stopped": "已停止",
+            "nf-settings.Running": "运行中",
+            "nf-settings.Disabled": "禁用",
+            "nf-about": "数据流",
+            "nf-bulletin-board.defaultFilterText": "过滤",
+            "nf-bulletin-board.ByMessage": "通过信息过滤",
+            "nf-bulletin-board.ByName": "通过名字过滤",
+            "nf-bulletin-board.ById": "通过识别符过滤",
+            "nf-bulletin-board.ByGroupId": "通过组识别符过滤",
+            "nf-bulletin-board.Message1": "过滤 ",
+            "nf-bulletin-board.Message2": " 匹配 \\\\'",
+            "nf-bulletin-board.Message3": "自动刷新开始",
+            "nf-bulletin-board.Message4": "自动刷新停止", 
+            "nf-bulletin-board.Message5": "移除过滤器",
+            "nf-bulletin-board.BulletinBoard": "公告板",
+            "nf-cluster.Cluster": " 集群",
+            "nf-cluster-table.Filter": "用过滤器",
+            "nf-cluster-table.Message1": "连接 \\'",
+            "nf-cluster-table.Message2": "\\' 到这个集群?",
+            "nf-cluster-table.Message3": "断开 \\'",
+            "nf-cluster-table.Message4": "\\' 从这个集群?",
+            "nf-cluster-table.Message5": "移除 \\'",
+            "nf-cluster-table.Message6": "\\' 从这个集群?",
+            "nf-cluster-table.NodeDetails": "节点详情",
+            "nf-cluster-table.Ok": "确定",
+            "nf-cluster-table.ByAddress": "通过地址过滤",
+            "nf-cluster-table.ByStatus": "通过状态过滤",
+            "nf-cluster-table.ViewDetails": "查看详情",
+            "nf-cluster-table.Node Address": "节点地址",
+            "nf-cluster-table.ActiveThreadCount": "运行的线程数",
+            "nf-cluster-table.Size": "大小",
+            "nf-cluster-table.Queue": "排队",                
+            "nf-cluster-table.Status": "状态",
+            "nf-cluster-table.Uptime": "运行时间",
+            "nf-cluster-table.LastHeartbeat": "最后心跳",
+            "nf-cluster-table.Connect": "连接",
+            "nf-cluster-table.Remove": "移除",
+            "nf-cluster-table.Disconnect": "断开",
+            "nf-cluster-table.MakePrimary": "作为首选",
+            "nf-cluster-table.None": "无",
+            "nf-counters-table.Filter": "过滤器",
+            "nf-counters-table.ByName": "通过名称过滤",
+            "nf-counters-table.ByContext": "通过上下文过滤",
+            "nf-counters-table.Context": "上下文",
+            "nf-counters-table.Name": "名称",
+            "nf-counters-table.Value": "值",
+            "nf-counters-table.Reset": "重置",
+            "nf-counters-table.Delete": "删除",
+            "nf-counters-table.Connect": "连接",
+            "nf-counters.Counters": "计数器",
+            "nf-history.History": "历史",
+            "nf-history-table.Filter": "过滤器",
+            "nf-history-table.ActionDetail": "动作详情",
+            "nf-history-table.Ok": "确定",
+            "nf-history-table.ById": "用标识过滤",
+            "nf-history-table.Message1": "过滤器基于组件标识的过滤器被更新了",
+            "nf-history-table.ByUser": "用用户过滤",
+            "nf-history-table.Message2": "基于运行任务的用户的过滤器",
+            "nf-history-table.FilterHistory": "过滤器历史",
+            "nf-history-table.Cancel": "取消",
+            "nf-history-table.PurgeHistory": "清除历史",
+            "nf-history-table.Purge": "清除",
+    		"nf-history-table.History": "历史",
+            "nf-history-table.Message3": "是否确定删除历史 '",
+            "nf-history-table.Message3.1": "\\'\\?",
+            "nf-history-table.Message4": "结束日期必须被指定.",
+            "nf-history-table.ViewDetails": "查看详情",
+            "nf-history-table.DateTime": "日期/时间",
+            "nf-history-table.Name": "名称",
+            "nf-history-table.Type": "类型",
+            "nf-history-table.Operation": "操作",
+            "nf-history-table.User": "用户",
+            "nf-history-table.Value": "值",
+            "nf-history-table.PreviousValue": "之前的值",
+            "nf-history-table.SourceId": "源标识",
+            "nf-history-table.SourceName": "源名称",
+            "nf-history-table.SourceType": "源类型",
+            "nf-history-table.Relationship": "关联",
+            "nf-history-table.DestinationId": "目的标识",
+            "nf-history-table.DestinationName": "目的名称",
+            "nf-history-table.DestinationType": "目的类型",
+            "nf-history-table.Group": "组",
+            "nf-history-table.GroupId": "组标识",
+            "nf-history-table.PreviousGroup": "前面的组",
+            "nf-history-table.PreviousGroupId": "前面组标识",
+            "nf-history-table.EndDate": "结束日期",
+            "nf-history-table.History": "历史",
+    		"nf-history-table.Message5": "基于被修改的组件的id的过滤器",
+    		"nf-history-table.Message6": "基于执行操作的用户的过滤器",
+    		"nf-history-table.NotAuthorized": "无权限",
+    		"nf-history-table.Uri": "统一资源标识符",
+    		"nf-history-table.EndTime": "结束时间",
+    		"nf-login.Login": "登录",
+    		"nf-login.Logining": "登入中...",
+    		"nf-login.SUCCESS": "成功",
+    		"nf-login.Denied": "登录被拒绝",
+    		"nf-login.Message1": "不能登入",
+    		"nf-login.Message2": "不能核对访问状态",
+    		"nf-login.Message3": "当前数据流没有配置账号/密码登录.",
+    		"nf-common.History": "<b>历史:</b><ul class=\"property-info\">",
+    		"nf-common.DefaultValue": "<b>默认值:</b> ",
+    		"nf-common.SupportsExpressionLanguage": "<b>支持表达式语言:</b> ",
+            "nf-common.sensitiveText": "敏感值设置",
+            "nf-common.Message1": "异常发生",
+            "nf-common.Message2": "请查看日志.",
+            "nf-common.Message3": "无法链接数据流系统",
+            "nf-common.Message4": "未授权",
+            "nf-common.Message5": "需要使用数据流系统的授权.",
+            "nf-common.Message6": "禁止",
+            "nf-common.Message7": "无法授权使用当前数据流系统.",
+            "nf-common.Message9": "与应用内核通信失败，在重启之前请查看日志并修正配置错误.",
+            "nf-common.ParseError": "分析错误",
+            "nf-common.Message10": "无法拦截来自数据流的返回.",
+            "nf-common.Message11": ": 异常返回",
+            "nf-common.Message12": "异常发生，请查看日志.",
+            "nf-common.Message13": "无值设置",
+            "nf-common.Message14": "空字符串设置",
+            "nf-common.Message15": "您的会话马上要过期. 请再登录以避免自动登出.",
+            "nf-common.Message16": "您的权限目前有限. 登录有权账户或者向管理申请一个有权账户.",
+            "nf-common.Message17": "您的会话已经过期. 请重新加载再登录.",
+            "nf-common.Message18": "您的会话已经过期. 请点击确认，再登录.",
+            "nf-common.Message19": "请确认应用正在运行并且检查日志.",
+            "nf-common.Message20": "请求超时，请确认应用是否在运行并检查日志.",
+            "nf-common.Message21": "请求被终止.",
+            "nf-common.Message22": "请求传输机制失败. 请确认应用正在运行并且有权访问.",
+    		"nf-common.Message23": "请确保应用程序正在运行，并检查日志中是否存在任何错误.",
+    		"nf-common.Message24": "无法与数据流通信",
+    		"nf-common.Unauthorized": "无权限",
+    		"nf-common.Message25": "使用此数据流需要进行身份验证.",
+    		"nf-common.Message26": "发生意外的错误",
+            "nf-common.SessionExpired": "请求超时",
+            "nf-common.AccessDenied": "拒绝访问",
+    		"nf-common.Error": "错误",
+            "nf-common.DefaultValue": "缺省值:",   
+            "nf-common.SupportsExpressionLanuage":"支持的表达语言:", 	
+            "nf-common.Message27": "空字符串之前设置",
+            "nf-common.Message28": "没有之前设置的值",
+            "nf-common.Bytes": " 字节",
+            "nf-connection-details.FromProcessor": "从处理器",
+    		"nf-connection-details.Processor": "处理器",
+            "nf-connection-details.FromFunnel": "从漏斗",
+            "nf-connection-details.FromOutPut": "从输出",
+            "nf-connection-details.FromInput": "从输入",
+            "nf-connection-details.ToProcessor": "从处理器",
+            "nf-connection-details.ToFunnel": "到漏斗",
+            "nf-connection-details.ToInput": "到输入",
+            "nf-connection-details.ToOutput": "到输出",
+            "nf-connection-details.Details": "详情",
+            "nf-connection-details.Settings": "设置",
+            "nf-connection-details.ConnectionDetails": "连接详情",
+            "nf-connection-details.Ok": "确定",
+            "nf-connection-details.NoValueSet": "确定",
+            "nf-dialog.Ok": "确定",
+            "nf-dialog.Yes": "是",
+            "nf-dialog.No": "否",
+            "nf-processor-details.Settings": "设置",
+            "nf-processor-details.Scheduling": "计划调度中",
+            "nf-processor-details.Properties": "属性",
+            "nf-processor-details.Comments": "评论",
+            "nf-processor-details.ProcessorDetails": "处理器详情",
+            "nf-processor-details.Ok": "确定",
+            "nf-processor-details.Advanced": "高级",
+    		"nf-processor-details.Error": "错误",
+    		"nf-processor-details.ThisProcessorHasNoRelationships": "该处理器没有关系",
+            "nf-status-history.StatusHistory":"历史状态信息",        
+            "nf-status-history.Processor": "处理器",
+            "nf-status-history.InputPort": "输入端口",
+            "nf-status-history.OutputPort": "输出端口",
+            "nf-status-history.ProcessGroup": "处理组",
+            "nf-status-history.RemoteProcessGroup": "远程处理组",
+            "nf-status-history.Connection": "连接",
+            "nf-status-history.Funnel": "漏斗",
+            "nf-status-history.Template": "模版",
+            "nf-status-history.Label": "标签",
+            "nf-status-history.Message":"没有足够的历史信息, 请稍后再试.",
+    		"nf-status-history.Close": "关闭",
+    		"nf-status-history.Start": "开始",
+    		"nf-status-history.End": "结束",
+    		"nf-status-history.Min_Max_Mean": "最小/最大/平均",
+    		"nf-status-history.NiFi": "数据流",
+            "nf-provenance.DataProvenance": "来源",
+            "nf-provenance-lineage.Message1": "计算流文件关系...",
+            "nf-provenance-lineage.ViewDetails": "查看详情",
+            "nf-provenance-lineage.Message2": "继承关系查找完成，但是没有结果. 事件可能过期.",
+            "nf-provenance-lineage.Find parents": "查找父亲",
+            "nf-provenance-lineage.Expand": "扩展",
+            "nf-provenance-lineage.Collapse": "崩溃",
+            "nf-provenance-lineage.Cancel": "取消",
+    		"nf-provenance-lineage.Lineage Results": "谱系结果",
+    		"nf-provenance-lineage.Process Lineage": "过程继承",
+            "nf-provenance-table.Filter": "过滤器",
+            "nf-provenance-table.Message": "显示最近 ",
+            "nf-provenance-table.Of": " 中 ",
+            "nf-provenance-table.Events": " 事件. ",
+            "nf-provenance-table.Message4": " 事件, 请修改检索条件.",
+            "nf-provenance-table.Showing": "显示",
+            "nf-provenance-table.Message5": "符合检索条件的事件, 请修改检索条件. ",
+            "nf-provenance-table.Message6": "符合检索条件的事件. ",
+            "nf-provenance-table.Details": "详情",
+            "nf-provenance-table.Attributes": "属性",
+            "nf-provenance-table.Content": "内容",
+            "nf-provenance-table.ProvenanceEvent": "数据源事件",
+            "nf-provenance-table.Ok": "确定",
+            "nf-provenance-table.Message1": "回放请求提交成功.",
+            "nf-provenance-table.Message2": "检索事件",
+            "nf-provenance-table.Search": "检索",
+            "nf-provenance-table.Message3": "检索数据源事件...",
+            "nf-provenance-table.ByComponentName": "通过组件名过滤",
+            "nf-provenance-table.ByComponentType": "通过组件类型过滤",
+            "nf-provenance-table.ByType": "通过类型过滤",
+            "nf-provenance-table.ByNode": "通过节点过滤",
+            "nf-provenance-table.Cluster": "集群",
+            "nf-provenance-table.ViewDetail": "查看详情",
+            "nf-provenance-table.ShowLineage": "显示继承关系",
+            "nf-provenance-table.GoTo": "进入",
+            "nf-provenance-table.DateTime": "日期/时间",
+            "nf-provenance-table.Type": "类型",
+            "nf-provenance-table.FlowFileUuid": "流文件 Uuid",
+            "nf-provenance-table.Size": "大小",
+            "nf-provenance-table.ComponentName": "组件名称",
+            "nf-provenance-table.ComponentType": "组件类型",
+            "nf-provenance-table.Node": "节点",
+            "nf-provenance-table.Cancel": "取消",
+            "nf-provenance-table.NoValueSet": "没有值",
+            "nf-provenance-table.Claim": "断言",
+            "nf-provenance-table.InputClaim": "输入声明",
+    		"nf-provenance-table.Provenance": "出处",
+    		"nf-provenance-table.Message7": "无法生成用于查看内容的访问令牌.",
+    		"nf-provenance-table.Message8": "无法生成用于下载内容的访问令牌.",
+    		"nf-provenance-table.Message9": "没有先前设置的值",
+    		"nf-provenance-table.Message10": "正在搜索原因事件...",
+    		"nf-provenance-table.Process": "进展",
+    		"nf-provenance-table.NoValueSet": "未设置值",
+    		"nf-provenance-table.NoChildren": "没有孩子",
+    		"nf-provenance-table.NoParent": "没有父母",
+    		"nf-provenance-table.Bytes": " 字节",
+    		"nf-cluster-search.Summary": "总结",
+            "nf-cluster-search.SelectNode": "选择节点",
+            "nf-cluster-search.Ok": "确定",
+    		"nf-cluster-search.ClusterSearch": "集群搜索",
+            "nf-cluster-search.Message1": "无节点匹配 \\'",
+            "nf-cluster-search.Message2": "多于一个节点匹配 \\'",
+            "nf-cluster-search.Cancel": "取消",
+            "nf-cluster-search.NiFiSumary": "数据流总结",
+            "nf-cluster-search.Message3": "没有与搜索项匹配的节点",
+            "nf-summary-table.Filter": "过滤器",
+            "nf-summary-table.Processors": "处理器",
+            "nf-summary-table.Connections": "连接",
+            "nf-summary-table.InputPorts": "输入端口",
+            "nf-summary-table.OutputPorts": "输出端口",
+            "nf-summary-table.RemoteProcessGroups": "远程处理组",
+            "nf-summary-table.ProcessGroups": "处理组",
+            "nf-summary-table.ByName": "通过名字过滤",
+            "nf-summary-table.ByType": "通过类型过滤",
+            "nf-summary-table.BySource": "通过源过滤",
+            "nf-summary-table.ByDestination": "通过目标过滤",
+            "nf-summary-table.ByUri": "通过uri过滤",
+            "nf-summary-table.ViewDetail": "查看详情",
+            "nf-summary-table.SourceName": "源名称",
+            "nf-summary-table.Name": "名称",
+            "nf-summary-table.RunStatus": "运行状态",
+            "nf-summary-table.In": "输入",
+            "nf-summary-table.Size": "大小",
+            "nf-summary-table.Message": "最后5分钟数量 / 数据大小",
+            "nf-summary-table.Read": "读",
+            "nf-summary-table.Write": "写",
+            "nf-summary-table.5min": "5分钟",
+            "nf-summary-table.Message1": "最后5分钟数据量",
+            "nf-summary-table.Out": "输出",
+            "nf-summary-table.Tasks": "任务",
+            "nf-summary-table.Time": "时间",
+            "nf-summary-table.Message2": "最后5分钟数量 / 延续期",
+            "nf-summary-table.Type": "类型",
+            "nf-summary-table.GoTo": "进入",
+            "nf-summary-table.ShowHistory": "显示历史",
+            "nf-summary-table.ShowDetail": "显示详情",
+            "nf-summary-table.ClusterProcessorSummary": "集群处理器一览",
+            "nf-summary-table.Node": "节点",
+            "nf-summary-table.Queue": "队列",
+            "nf-summary-table.SourceName": "源名称",
+            "nf-summary-table.DestinationName": "目标名称",
+            "nf-summary-table.ClusterConnectionSummary": "集群连接一览",
+            "nf-summary-table.Close": "关闭",
+            "nf-summary-table.Transferred": "传输结束",
+            "nf-summary-table.Message3": "最后5分钟从连接器传输的数量 / 数据大小",
+            "nf-summary-table.Sent": "发送",
+            "nf-summary-table.Received": "接收",
+            "nf-summary-table.ClusterProcessGroupSummary": "集群处理组一览",
+            "nf-summary-table.ClusterInputPortSummary": "集群输入端口一览",
+            "nf-summary-table.ClusterOutPutPortSummary": "集群输出端口一览",
+            "nf-summary-table.Transmitting": "转换中",
+            "nf-summary-table.Target URI": "目标 URI",
+            "nf-summary-table.ClusterRemoteProcessGroupSummary": "集群远程处理组一览",
+            "nf-summary-table.JVM": "Java虚拟机",
+            "nf-summary-table.System": "系统",
+            "nf-summary-table.SystemDiagnostics": "系统分析",
+            "nf-summary-table.Summary": " 总结",
+    		"nf-summary-table.Message4": "基于公告的存在进行排序",
+    		"nf-summary-table.times": "次",
+    		"nf-summary-table.UsageFor": "用法",
+    		"nf-summary-table.GoToProcessor": "转向处理器",
+    		"nf-summary-table.ViewStatus": "查看状态历史",
+    		"nf-summary-table.ViewProcessor": "查看处理器详情",
+    		"nf-summary-table.ViewConnect": "查看连接详情",
+    		"nf-summary-table.GoToConnect": "转向连接",
+    		"nf-summary-table.GoToProcessorGroup": "转向处理组",
+    		"nf-summary-table.ViewProcessorGroup": "查看处理组详情",
+    		"nf-summary-table.GoToInputPort": "转向输入端口",
+    		"nf-summary-table.ViewInputPort": "查看输入端口详情",
+    		"nf-summary-table.GoToOutputPort": "转向输出端口",
+    		"nf-summary-table.ViewOutputPort": "查看输出端口详情",
+    		"nf-summary-table.ViewRemoteProcessorGroup": "查看远程处理组详情",
+    		"nf-summary-table.aria1": "数据流存储库存储使用",
+            "nf-summary.Summary": "总结",
+            "nf-templates-table.Templates": " 模版",
+            "nf-templates-table.Message": "选择模版导入",
+            "nf-templates-table.Filter": "过滤",
+    		"nf-templates-table.DeleteTemplate": "删除模板",
+            "nf-templates-table.Message1": "删除模版 \"",
+    		"nf-templates-table.DownloadTemplate": "下载模板",
+    		"nf-templates-table.Message2": "无法生成用于下载内容的访问令牌.",
+            "nf-templates-table.ByName": "用名称过滤",
+            "nf-templates-table.ByDescription": "用描述过滤",
+            "nf-templates-table.RemovieTemplate": "移除模版",
+            "nf-templates-table.DateTime": "日期/时间",
+            "nf-templates-table.Name": "名称",
+            "nf-templates-table.Description": "描述",
+            "nf-templates-table.GroupId": "处理组标识",
+            "nf-templates-table.Download": "下载",
+            "nf-templates-table.AccessPolicies": "访问策略",
+            "nf-templates.Templates": "模板",
+            "nf-users.Users": "用户",
+            "nf-users-table.Filter": "过滤",
+            "nf-users-table.UserDetails": "用户详情",
+            "nf-users-table.Ok": "确定",
+            "nf-users-table.UserRoles": "用户角色",
+            "nf-users-table.Apply": "应用",
+            "nf-users-table.Cancel": "取消",
+            "nf-users-table.GroupRoles": "组角色",
+            "nf-users-table.DeleteUser": "删除用户",
+            "nf-users-table.Delete": "删除",
+            "nf-users-table.RevokeAccess": "重新启用权限",
+            "nf-users-table.Revoke": "重新启用",
+            "nf-users-table.SetUserGroup": "设置用户组",
+            "nf-users-table.Group": "组",
+            "nf-users-table.Message": "组名不能为空.",
+            "nf-users-table.ByUser": "通过用户过滤",
+            "nf-users-table.ByGroup": "通过组过滤",
+            "nf-users-table.ByRole": "通过角色过滤",
+            "nf-users-table.AuthorizationPending": "授权处理中",
+            "nf-users-table.AccessRevoked": "权限已被重新启用",
+            "nf-users-table.NoRolesSet": "没有角色被设置",
+            "nf-users-table.Message1": "多个用户权限不同",
+            "nf-users-table.Message2": "多个用户状态不同",
+            "nf-users-table.Message3": "状态未被设置",
+            "nf-users-table.EditAccess": "编辑权限",
+            "nf-users-table.RevokeAccess.Ungroup": "脱离组",
+            "nf-users-table.DeleteAccount": "删除帐号",
+            "nf-users-table.User": "用户",
+            "nf-users-table.Roles": "角色",
+            "nf-users-table.LastAccessed": "最后访问",
+            "nf-users-table.Status": "状态",
+            "nf-users-table.GroupUsers": "组内用户",
+            "nf-users-table.Message4": "选择一个或多个用户.",
+            "nf-users-table.Message5": "移除所有用户从组 \\'",
+            "nf-users-table.Message6": "删除 \\'",
+            "nf-users-table.Message7": "\\' 从组 \\'",
+    		"nf-users-table.UserGroup": "用户/组",
+    		"nf-users-table.Edit": "编辑",
+    		"nf-users-table.Remove": "移除",
+    		"jquery-propertytable.SensitiveValueSet": "敏感值",
+            "jquery-propertytable.EmptyStringSet": "空字符串",
+            "jquery-propertytable.NoValueSet": "无值",
+            "jquery-propertytable.RequiredField": "必填属性",
+            "jquery-propertytable.Property": "属性",
+            "jquery-propertytable.Value": "值",        
+            "jquery-propertytable.PropertyName": "属性名称",
+            "jquery-propertytable.NewProperty": "新增属性",        
+            "jquery-propertytable.Ok": "确认",
+            "jquery-propertytable.Delete": "删除",
+            "jquery-propertytable.GoTo": "去",
+            "jquery-propertytable.Cancel": "取消",
+            "jquery-propertytable.Empty": "空值",
+            "jquery-propertytable.SetEmptyString": "设置空字符串",
+            "jquery-propertytable.ControllerService" : "控制器服务",
+            "jquery-propertytable.Tags" : "标签",
+            "jquery-propertytable.Create" : "创建",
+            "jquery-propertytable.Description" : "描述",
+            "jquery-propertytable.AddControllerService" : "添加控制器服务",
+            "jquery-propertytable.AddProperty": "添加属性",
+            "jquery-propertytable.PropertyExists": "属性存在",
+            "jquery-propertytable.Message0": "具有此名称的属性已存在。",
+            "jquery-propertytable.Message": "属性已经存在.",
+            "jquery-propertytable.Message1": "必须指定属性名.",
+            "jquery-propertytable.Message3": "创建新服务...",
+            "jquery-propertytable.Message2": "该属性没有控制器服务与其对应.",
+            "slick.editors.Message1": "请输入有效的整数",
+            "slick.editors.Message2": "请输入有效的正数",
+            "slick.grid.Message1": "Slickgrid需要一个有效的容器，",
+            "slick.grid.Message2": "不存在于DOM中",
+            "slick.grid.Message3": "找不到样式表。",
+            "slick.grid.Message4": "添加单元格Css样式：单元格CSS哈希的键'",
+            "slick.grid.Message5": "'已经存在。",
+            "slick.grid.Message6": "从节点获取单元：无法获取单元 -",
+            "slick.grid.Message7": "Grid : 使活动单元格可编辑 : options.editable为false时,应该永远不会调用",
+            "slick.grid.Message8": "未设置选择模型",
+            "jquery-tagcloud.NoTagsSpecified": "未指定标签"       
+        };
+    var en = {
+    		"nf-actions.UpdateResource": "Update Resource",
+    		"nf-actions.Refreshing": "Refreshing",
+    		"nf-actions.RemoteGroupProcess": "Remote Group Process",
+    		"nf-actions.NoTargetURIDefined": "No target URI defined.",
+    		"nf-actions.Header1": "Enable components",
+    		"nf-actions.Message1": "No eligible components are selected. Please select the components to be enabled and ensure they are no longer running.",
+    		"nf-actions.Header2": "Disable components",
+    		"nf-actions.Message2": "No eligible components are selected. Please select the components to be disabled and ensure they are no longer running.",
+    		"nf-actions.Header3": "Start components",
+    		"nf-actions.Message3": "No eligible components are selected. Please select the components to be started and ensure they are no longer running.",
+    		"nf-actions.Header4": "Stop components",
+    		"nf-actions.Message4": "No eligible components are selected. Please select the components to be stopped.",
+    		"nf-actions.Header5": "Reload",
+    		"nf-actions.Message5": "No eligible components are selected. Please select the components to be deleted.",
+    		"nf-actions.Header6": "Paste error",
+    		"nf-actions.EmptyQueue": "Empty Queue",
+    		"nf-actions.Message6": "Are you sure you want to empty this queue? All FlowFiles waiting at the time of the request will be removed.",
+    		"nf-actions.Cancel": "Cancel",
+    		"nf-actions.Empty": "Empty",
+    		"nf-actions.Stop": "Stop",
+    		"nf-actions.Message7": " were removed from the queue.",
+    		"nf-actions.Message8": "No FlowFiles were removed.",
+    		"nf-actions.Message9": "The current selection is not valid to create a template.",
+    		"nf-actions.CreateTemplate": "Create Template",
+    		"nf-actions.Create": "Create",
+    		"nf-actions.Template": "Template '",
+    		"nf-actions.Message11": "' was successfully created.",
+    		"nf-actions.Message12": "An error occurred while attempting to copy and paste.",
+    		"nf-actions.Message13": "The template name can not be empty.",
+    		"nf-actions.Message14": "Delete the request percentage to complete",
+    		"nf-actions.Message15": "Flow files",
+    		"nf-actions.Message16": "In",
+    		"nf-actions.Message17": "Outside",
+    		"nf-actions.Message18": "Remove from the queue.",
+    		"nf-actions.Message19": "No reference to the component.",
+    		"nf-canvas-graph-controls-controller.ProcessGroup": "Process Group",
+    		"nf-canvas-graph-controls-controller.Processor": "Processor",
+    		"nf-canvas-graph-controls-controller.InputPort": "Input Port",
+    		"nf-canvas-graph-controls-controller.OutputPort": "Output Port",
+    		"nf-canvas-graph-controls-controller.RemoteProcessGroup": "Remote Process Group",
+    		"nf-canvas-graph-controls-controller.Funnel": "Funnel",
+    		"nf-canvas-graph-controls-controller.Label": "Label",
+    		"nf-canvas-graph-controls-controller.Connection": "Connection",
+    		"nf-canvas-graph-controls-controller.MultipleSelected": "Multiple Selected",
+    		"nf-canvas-global-menu-controller.About": "About Flow Files",
+    		"nf-canvas-global-menu-controller.OK": "OK",
+    		"nf-canvas-operate-controller.SUCCESS": "SUCCESS",
+    		"nf-canvas-operate-controller.SuccessContent": "The template was successfully imported.",
+    		"nf-canvas-operate-controller.Upload": "Upload template",
+    		"nf-canvas-operate-controller.ButtonUpload": "Upload template",
+    		"nf-canvas-operate-controller.UploadTemplate": "No template is selected. Please select a template in the browser.",
+    		"nf-canvas-operate-controller.Cancel": "Cancel",
+    		"nf-canvas-operate-controller.ChangeColor": "Change Color",
+    		"nf-canvas-operate-controller.Apply": "Apply",
+    		"nf-canvas-operate-controller.Error": "Error",
+    		"nf-canvas-operate-controller.CreateTemplate": "Create Template",
+    		"nf-canvas-operate-controller.Message1": "The template can not be imported. Please check the errors in the log.",
+    		"nf-canvas-flow-status.Processors": "Processors",
+    		"nf-canvas-flow-status.ProcessGroups": "Process Groups",
+    		"nf-canvas-flow-status-controller.Processors": "Processors",
+    		"nf-canvas-flow-status-controller.ProcessGroups": "Process Groups",
+    		"nf-canvas-flow-status-controller.RemoteProcessGroups": "Remote Process Groups",
+    		"nf-canvas-flow-status-controller.Connection": "Connection",
+    		"nf-canvas-flow-status-controller.InputPorts": "InputPorts",
+    		"nf-canvas-flow-status-controller.OutputPorts": "OutputPorts",
+    		"nf-canvas-flow-status-controller.Funnel": "Funnel",
+    		"nf-canvas-flow-status-controller.no-matches": "Did not meet the results of the query request",
+    		"nf-canvas-toobbar.Start": "Start",
+    		"nf-canvas-toobbar.Stop": "Stop",
+    		"nf-canvas-toobbar.Copy": "Copy",
+    		"nf-canvas-toobbar.Paste": "Paste",
+    		"nf-canvas-toobbar.Group": "Group",
+    		"nf-canvas-toobbar.Enable": "Enable",
+    		"nf-canvas-toobbar.Disable": "Disable",
+    		"nf-canvas-toobbar.CreateTemplate": "Create Template",
+    		"nf-canvas-toobbar.ChangeColor": "Change Color",
+    		"nf-canvas-toobbar.Delete": "Delete",
+    		"nf-canvas-header.OK": "Ok",
+    		"nf-canvas-header.CreateTemplate": "Create Template",
+    		"nf-canvas-header.Fill": "Fill",
+    		"nf-canvas-header.Apply": "Apply",
+    		"nf-canvas-header.Cancel": "Cancel",
+    		"nf-group-component.AddProcessGroup": "Add Process Group",
+    		"nf-group-component.Add": "Add",
+    		"nf-group-component.Cancel": "Cancel",
+    		"nf-input-port-component.AddPort": "Add Port",
+    		"nf-input-port-component.Add": "Add",
+    		"nf-input-port-component.Cancel": "Cancel",
+    		"nf-input-port-component.new-port-type": "Enter",
+    		"nf-output-port-component.Add": "Add",
+    		"nf-output-port-component.Cancel": "Cancel",
+    		"nf-output-port-component.new-port-type": "Output",
+    		"nf-processor-component.AddProcessor": "Add Processor",
+    		"nf-processor-component.AddProcessorContent": "The processor that created this type must be selected.",
+    		"nf-processor-component.Add": "Add",
+    		"nf-processor-component.Cancel": "Cancel",
+    		"nf-processor-component.Type": "Type",
+    		"nf-processor-component.Tags": "Tags",
+    		"nf-processor-component.NoDescriptionSpecified": "No Description Specified",
+    		"nf-remote-process-group-component.ConfigurationError": "Configuration Error",
+    		"nf-remote-process-group-component.AddRemoteProcessGroup": "Add Remote Process Group",
+    		"nf-remote-process-group-component.Add": "Add",
+    		"nf-remote-process-group-component.Cancel": "Cancel",
+    		"nf-template-component.AddTemplate": "Add Template",
+    		"nf-template-component.Add": "Add",
+    		"nf-template-component.Cancel": "Cancel",
+    		"nf-template-component.InstantiateTemplate": "Instantiate Template",
+    		"nf-template-component.InstantiateTemplateContent": "There is no template to load in the flow files.",
+    		"nf-canvas-header.Message": "Unable to refresh the current group.",
+    		"nf-canvas-header.components.AddGroup": "Add Group",
+    		"nf-canvas-header.components.AddButton": "Add",
+    		"nf-canvas-header.components.CancelButton": "Cancel",
+    		"nf-canvas-toolbox.Input": "Input",
+    		"nf-canvas-toolbox.OutPut": "Output",
+    		"nf-canvas-toolbox.Filter": "Filter",
+    		"nf-canvas-toolbox.Processor": "Processor",
+    		"nf-canvas-toolbox.InputPort": "Input Port",
+    		"nf-canvas-toolbox.OutputPort": "Output Port",
+    		"nf-canvas-toolbox.ProcessGroup": "Process Group",
+    		"nf-canvas-toolbox.RemoteProcessGroup": "Remote Process Group",
+    		"nf-canvas-toolbox.Connection": "Connection",
+    		"nf-canvas-toolbox.Funnel": "Funnel",
+    		"nf-canvas-toolbox.Template": "Template",
+    		"nf-canvas-toolbox.Label": "Label",
+    		"nf-canvas-toolbox.Add": "Add",
+    		"nf-canvas-toolbox.Cancel": "Cancel",
+    		"nf-canvas-toolbox.Instantiate Template": "Instantiate Template",
+    		"nf-canvas-toolbox.Message": "No templates have been loaded into this NiFi.",
+    		"nf-canvas-toolbox.Type": "Type",
+    		"nf-canvas-toolbox.Tags": "Tags",
+    		"nf-canvas-toolbox.Message1": "No description specified",
+    		"nf-canvas-toolbox.AddProcessor": "Add Processor",
+    		"nf-canvas-toolbox.AddPort": "Add Port",
+    		"nf-canvas-toolbox.AddProcessGroup": "Add Process Group",
+    		"nf-canvas-toolbox.AddRemoteProcessGroup": "Add Remote Process Group",
+    		"nf-canvas-utils.Header1": "Process Group",
+    		"nf-canvas-utils.Message1": "Unable to load the group for the specified component.",
+    		"nf-canvas-utils.Message2": "Unable to find the specified component.",
+    		"nf-canvas-utils.Message3": "Unable to enter the selected group.",
+    		"nf-canvas-utils.Message4": "Cannot move Ports out of the root group",
+    		"nf-canvas-utils.Message5": "The following ports are currently connected outside of this group: <b>",
+    		"nf-canvas-utils.Message6": "The following ports already exist in the target process group: <b>",
+    		"nf-canvas-utils.Message7": "Components are already in the topmost group",
+    		"nf-canvas.Browser": "Unsupported Browser",
+    		"nf-canvas.Message1": "Flow graphs are shown using SVG. Please use a browser that supports rendering SVG.",
+    		"nf-canvas.ClusterConn": "Cluster Connection",
+    		"nf-canvas.Message2": "This node is not currently connected to the cluster. Any changes made to the data stream here are not replicated in the cluster.",
+    		"nf-canvas.Message3": "This node has just been added to the cluster. Any changes to the data stream here will be replicated in the cluster.",
+    		"nf-component-state.Header1": "Component status",
+    		"nf-component-state.Button1": "Close",
+    		"nf-component-state.Content1": "The component does not need to be cleared",
+    		"nf-component-state.Message1": "The component status can only be cleared when the component is not active",
+    		"nf-component-state.Key": "Key",
+    		"nf-component-state.Value": "Value",
+    		"nf-component-state.Scope": "Scope",
+    		"nf-connection-configuration.ConnectionConfiguration": "Connection Configuration",
+    		"nf-connection-configuration.Add": "Add",
+    		"nf-connection-configuration.Message0": "The connection must have at least one relationship selected.",
+    		"nf-connection-configuration.Cancel": "Cancel",
+    		"nf-connection-configuration.Message1": "\\' does not support any relationships.",
+    		"nf-connection-configuration.Message2": "\\' does not have any output ports.",
+    		"nf-connection-configuration.Message4": "\\' does not have any input ports.",
+    		"nf-connection-configuration.Message5": "未授权任何输出端口 \\'",
+    		"nf-connection-configuration.Message6": "Configuration Error",
+    		"nf-connection-configuration.ConfigureConnection": "Configure Connection",
+    		"nf-connection-configuration.Detail": "Details",
+    		"nf-connection-configuration.Setting": "Settings",
+    		"nf-connection-configuration.CreateConnection": "Create Connection",
+    		"nf-connection-configuration.Apply": "Apply",
+    		"nf-connection-configuration.Message7": "The connection must have at least one relationship selected.",
+    		"nf-connection.Connection": "Connection",
+    		"nf-connection.Message1": "Looping connections must have at least two bend points.",
+    		"nf-connection.From": "From",
+    		"nf-connection.To": "To",
+    		"nf-connection.Name": "Name",
+    		"nf-connection.Queued": "Queued",
+    		"nf-connection.FlowFilesOlder": "Flow Files Older",
+    		"nf-context-menu.RefreshStatus": "Refresh status",
+    		"nf-context-menu.LeaveGroup": "Leave group",
+    		"nf-context-menu.Configure": "Configure",
+    		"nf-context-menu.ViewConfiguration": "View configuration",
+    		"nf-context-menu.EnterGroup": "Enter group",
+    		"nf-context-menu.Start": "Start",
+    		"nf-context-menu.Stop": "Stop",
+    		"nf-context-menu.canEnable": "Enable",
+    		"nf-context-menu.canDisable": "Disable",
+    		"nf-context-menu.canGroup": "Group",
+    		"nf-context-menu.canManagePolicies": "Access Policies",
+    		"nf-context-menu.canAlign1": "Vertical alignment",
+    		"nf-context-menu.canAlign2": "Horizontal alignment",
+    		"nf-context-menu.canUploadTemplate": "Upload Template",
+    		"nf-context-menu.canCreateTemplate": "Create Template",
+    		"nf-context-menu.RemotePorts": "Remote ports",
+    		"nf-context-menu.EnableTransmission": "Enable transmission",
+    		"nf-context-menu.DisableTransmission": "Disable transmission",
+    		"nf-context-menu.StatsHistory": "Stats History",
+    		"nf-context-menu.ViewState": "View State",
+    		"nf-context-menu.Stats": "Stats",
+    		"nf-context-menu.DataProvenance": "Data provenance",
+    		"nf-context-menu.BringFront": "Bring to front",
+    		"nf-context-menu.GoToSource": "Go to source",
+    		"nf-context-menu.GoToDestination": "Go to destination",
+    		"nf-context-menu.UpstreamConnections": "Upstream connections",
+    		"nf-context-menu.DownstreamConnections": "Downstream connections",
+    		"nf-context-menu.Usage": "Usage",
+    		"nf-context-menu.Refresh": "Refresh",
+    		"nf-context-menu.GoTo": "Go to",
+    		"nf-context-menu.ChangeColor": "Change color",
+    		"nf-context-menu.CenterInView": "Center in view",
+    		"nf-context-menu.Copy": "Copy",
+    		"nf-context-menu.Paste": "Paste",
+    		"nf-context-menu.MoveParentGroup": "Move to parent group",
+    		"nf-context-menu.QueueList": "Queue List",
+    		"nf-context-menu.EmptyQueue": "Empty queue",
+    		"nf-context-menu.Delete": "Delete",
+    		"nf-controller-service.ConfigurationError": "Configuration Error",
+    		"nf-controller-service.Cancel": "Cancel",
+    		"nf-controller-service.Close": "Close",
+    		"nf-controller-service.Message1": "Steps to disable",
+    		"nf-controller-service.ActionCanceled": "Action Canceled",
+    		"nf-controller-service.Message2": "The request to disable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
+    		"nf-controller-service.Message3": "Steps to enable ",
+    		"nf-controller-service.Message4": "Action Canceled",
+    		"nf-controller-service.Message5": "The request to enable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
+    		"nf-controller-service.Message6": "Save changes before going to this Controller Service?",
+    		"nf-controller-service.Settings": "Settings",
+    		"nf-controller-service.Properties": "Properties",
+    		"nf-controller-service.Comments": "Comments",
+    		"nf-controller-service.Message7": "Configure Controller Service",
+    		"nf-controller-service.Message8": "Disable Controller Service",
+    		"nf-controller-service.Disable": "Disable",
+    		"nf-controller-service.ServiceOnle": "Service only",
+    		"nf-controller-service.Message9": "Enable only this controller service",
+    		"nf-controller-service.Message10": "Service and referencing components",
+    		"nf-controller-service.Message11": "Enable this controller service and enable/start all referencing components",
+    		"nf-controller-service.Message12": "Enable Controller Service",
+    		"nf-controller-service.Enable": "Enable",
+    		"nf-controller-service.Apply": "Apply",
+    		"nf-controller-service.Advanced": "Advanced",
+    		"nf-controller-service.Message13": "Save changes before opening the advanced configuration?",
+    		"nf-controller-service.Ok": "Ok",
+    		"nf-controller-service.ControllerService": "Controller Service",
+    		"nf-controller-service.Message14": "The unauthorized component can not be disabled due to unauthorized use.",
+    		"nf-controller-service.Message15": "Unable to invoke component due to unauthorized use.",
+    		"nf-controller-service.Save": "Save",
+    		"nf-controller-service.Message16": "Save the changes before entering the controller service?",
+    		"nf-controller-services.Add": "Add",
+    		"nf-controller-services.ControllerService": "Controller Service",
+    		"nf-controller-services.Message14": "You must select the type of controller service you want to create.",
+    		"nf-controller-services.AddControllerService": "Add Controller Service",
+    		"nf-controller-services.Invalid": "Invalid",
+    		"nf-controller-services.Disabled": "Disabled",
+    		"nf-controller-services.Disabling": "Disabling",
+    		"nf-controller-services.Enabled": "Enabled",
+    		"nf-controller-services.Enabling": "Enabling",
+    		"nf-controller-services.toolTip": "Based on the presence of the announcement",
+    		"nf-controller-services.Name": "Name",
+    		"nf-controller-services.Type": "Type",
+    		"nf-controller-services.Tags": "Tags",
+    		"nf-controller-services.State": "State",
+    		"nf-controller-services.ProcessGroup": "Process Group",
+    		"nf-controller-services.type-description": "Not specified",
+    		"nf-controller-services.viewDtails": "View Dtails",
+    		"nf-controller-services.usage": "Usage",
+    		"nf-controller-services.disable": "Disable",
+    		"nf-controller-services.edit": "Edit",
+    		"nf-controller-services.enable": "Enable",
+    		"nf-controller-services.viewstate": "View State",
+    		"nf-controller-services.remove": "Remove",
+    		"nf-controller-services.acesspolicies": "Access Policies",
+    		"nf-custom-ui.AdvancedConfiguration": "Advanced Configuration",
+    		"nf-custom-ui.Message1": "Unable to generate an access token to access the Advanced Access Configuration dialog box.",
+    		"nf-draggable.ComponentPosition": "Component Position",
+    		"nf-draggable.Message1": "Unauthorized modification of destination group.",
+    		"nf-draggable.Message2": "Each component that chooses to modify must be authorized.",
+    		"nf-go-to.Close": "Close",
+    		"nf-go-to.NoDownstreamComponents": "No Downstream Components",
+    		"nf-go-to.NoUpstreamComponents": "No Upstream Components",
+    		"nf-go-to.DownstreamConnections": "Downstream Connections",
+    		"nf-go-to.UpstreamConnections": "Upstream Connections",
+    		"nf-go-to.Message1": "No upstream components",
+    		"nf-go-to.Message2": "No downstream components",
+    		"nf-go-to.Funnel": "Funnel",
+    		"nf-label-configuration.ConfigureLabel": "Configure Label",
+    		"nf-label-configuration.Apply": "Apply",
+    		"nf-label-configuration.Cancel": "Cancel",
+    		"nf-policy-management.ViewUserInterface": "View User Interface",
+    		"nf-policy-management.AcessController": "Acess Controller",
+    		"nf-policy-management.QueryProvenance": "Query Provenance",
+    		"nf-policy-management.AcessPolicies": "Acess Policies",
+    		"nf-policy-management.AcessUser": "Acess User/Group",
+    		"nf-policy-management.retrieve": "Retrieve site-to-site details",
+    		"nf-policy-management.diagnostics": "View system analysis",
+    		"nf-policy-management.proxy": "Proxy user request",
+    		"nf-policy-management.counters": "Access counters",
+    		"nf-policy-management.ViewComponent": "View Component",
+    		"nf-policy-management.ModifyComponent": "Modify Component",
+    		"nf-policy-management.ViewData": "View Data",
+    		"nf-policy-management.ModifyData": "Modify Data",
+    		"nf-policy-management.ReceiveData": "Through the site to the site to receive data",
+    		"nf-policy-management.SendData": "Send Data",
+    		"nf-policy-management.ViewPolicies": "View Policies",
+    		"nf-policy-management.ModifyPolicies": "Modify Policies",
+    		"nf-policy-management.Searchusers": "Search users",
+    		"nf-policy-management.Ok": "Ok",
+    		"nf-policy-management.Add": "Add",
+    		"nf-policy-management.UserSearch": "User Search",
+    		"nf-policy-management.Message1": "There is no matching user\\'",
+    		"nf-policy-management.Message2": "Multiple users match\\'",
+    		"nf-policy-management.Cancel": "Cancel",
+    		"nf-policy-management.UpdatePolicy": "Update Policy",
+    		"nf-policy-management.DeletePolicy": "Delete Policy",
+    		"nf-policy-management.Message3": "Delete\\'",
+    		"nf-policy-management.Message4": "\\'From this strategy?",
+    		"nf-policy-management.Message5": "Are you sure you want to delete this policy?",
+    		"nf-policy-management.Message6": "No choice strategy",
+    		"nf-policy-management.Message7": "Allows the user to view the user interface",
+    		"nf-policy-management.Message8": "Allows the user to view / modify the controller, including reporting tasks in the cluster, controller services, and nodes",
+    		"nf-policy-management.Message9": "Allows users to submit source searches and request event inheritance",
+    		"nf-policy-management.Message10": "Allows users to view / modify policies for all components",
+    		"nf-policy-management.Message11": "Allows users to view / modify user groups",
+    		"nf-policy-management.Message12": "Allows other instances of NiFi to retrieve the Site-to-Site details for this data stream",
+    		"nf-policy-management.Message13": "Allow users to view system analysis",
+    		"nf-policy-management.Message14": "Allows the proxy computer to send requests on behalf of others",
+    		"nf-policy-management.Message15": "Allows the user to view / modify the counter",
+    		"nf-policy-management.Message16": "Allows users to view component configuration details",
+    		"nf-policy-management.Message17": "Allows the user to modify the component configuration details",
+    		"nf-policy-management.Message18": "Allows the user to view the metadata and content of this component through the source data and stream file queues in the outbound connection",
+    		"nf-policy-management.Message19": "Allows the user to empty the stream file queue in the outbound connection and submit the replay",
+    		"nf-policy-management.Message20": "Allows this port to receive data from these data stream instances",
+    		"nf-policy-management.Message21": "Allows this port to send data to these data stream instances",
+    		"nf-policy-management.Message22": "Allows users to view a list of users who can view / modify this component",
+    		"nf-policy-management.Message23": "Allows users to modify the list of users who can view / modify this component",
+    		"nf-policy-management.Message24": "By removing this policy, the permissions for this component will revert to inherited policies, if applicable.",
+    		"nf-policy-management.Text1": "Shows the valid policies inherited from",
+    		"nf-policy-management.Text2": "No component specific administrator.",
+    		"nf-policy-management.Text3": "Unauthorized access to the specified resource policy.",
+    		"nf-policy-management.Text4": "Unauthorized view of the policy.",
+    		"nf-policy-management.Text5": "There is no policy for specifying resources.",
+    		"nf-policy-management.Text6": "Unauthorized access to the specified resource policy.",
+    		"nf-policy-management.Write": "Write",
+    		"nf-policy-management.Read": "Read",
+    		"nf-policy-management.View": "View",
+    		"nf-policy-management.Modify": "Modify",
+    		"nf-policy-management.AllPolicies": "All Policies",
+    		"nf-policy-management.Controller": "Controller",
+    		"nf-policy-management.ProcessorGroup": "Processor Group",
+    		"nf-policy-management.reporting-tasks": "Reporting Tasks",
+    		"nf-policy-management.NoUserSearch": "No User Search",
+    		"nf-policy-management.Remove": "Remove",
+    		"nf-port-configuration.ConfigurePort": "Configure Port",
+    		"nf-port-configuration.Apply": "Apply",
+    		"nf-port-configuration.ConfigurationError": "Configuration Error",
+    		"nf-port-configuration.Cancel": "Cancel",
+    		"nf-port-details.PortDetails": "Port Details",
+    		"nf-port-details.OK": "Ok",
+    		"nf-process-group-configuration.ConfigureProcessGroup": "Configure Process Group",
+    		"nf-process-group-configuration.Apply": "Apply",
+    		"nf-process-group-configuration.Cancel": "Cancel",
+    		"nf-process-group-configuration.General": "General",
+    		"nf-process-group-configuration.ControllerService": "Controller Service",
+    		"nf-process-group-details.ProcessGroupDetails": "Process Group Details",
+    		"nf-process-group-details.Ok": "Ok",
+    		"nf-process-group.Message1": "No comments specified",
+    		"nf-process-group.Queued": "Queued",
+    		"nf-process-group.In": "In",
+    		"nf-process-group.ReadWrite": "Read/Write",
+    		"nf-process-group.Out": "Out",
+    		"nf-process-group.5min": "(5 min)",
+    		"nf-processor-configuration.TimerDriven": "Timer driven",
+    		"nf-processor-configuration.Message1": "Processor will be scheduled to run on an interval defined by the run schedule.",
+    		"nf-processor-configuration.EventDriven": "Event driven",
+    		"nf-processor-configuration.Message2": "Processor will be scheduled to run when triggered by an event (e.g. a FlowFile enters an incoming queue). This scheduling strategy is experimental.",
+    		"nf-processor-configuration.OnPrimaryNode": "On primary node",
+    		"nf-processor-configuration.Message3": "Processor will be scheduled on the primary node on an interval defined by the run schedule.",
+    		"nf-processor-configuration.CronDriven": "CRON驱动",
+    		"nf-processor-configuration.Message5": "Processor will be scheduled to run on at specific times based on the specified CRON string.",
+    		"nf-processor-configuration.Error1": "Concurrent tasks must be integer values",
+    		"nf-processor-configuration.Error2": "Must specify an operational plan",
+    		"nf-processor-configuration.Error3": "The duration of the penalty must be specified",
+    		"nf-processor-configuration.Error4": "Must specify the duration of the production",
+    		"nf-processor-configuration.ConfigurationError": "Configuration Error",
+    		"nf-processor-configuration.Message6": "Save changes before going to this Controller Service?",
+    		"nf-processor-configuration.Settings": "Settings",
+    		"nf-processor-configuration.Scheduling": "Scheduling",
+    		"nf-processor-configuration.Properties": "Properties",
+    		"nf-processor-configuration.Comments": "Comments",
+    		"nf-processor-configuration.ConfigureProcessor": "Configure Processor",
+    		"nf-processor-configuration.Debug": "DEBUG",
+    		"nf-processor-configuration.Info": "INFO",
+    		"nf-processor-configuration.Warn": "WARN",
+    		"nf-processor-configuration.Error": "ERROR",
+    		"nf-processor-configuration.Apply": "Apply",
+    		"nf-processor-configuration.Cancel": "Cancel",
+    		"nf-processor-configuration.Advanced": "Advanced",
+    		"nf-processor-configuration.Message7": "Save changes before opening the advanced configuration?",
+    		"nf-processor-configuration.ThisProcessorHasNoRelationships": "This processor does not matter.",
+    		"nf-processor-configuration.ViewDetails": "View Details",
+    		"nf-processor-configuration.Provenance": "Provenance",
+    		"nf-processor.In": "In",
+    		"nf-processor.ReadWrite": "Read/Write",
+    		"nf-processor.Out": "Out",
+    		"nf-processor.TasksTime": "Tasks/Time",
+    		"nf-processor.5min-1": "5 分钟",
+    		"nf-processor.5min": "(5 min)",
+    		"nf-registration.Thanks": "Thanks",
+    		"nf-registration.Message1": "Your request will be processed shortly.",
+    		"nf-queue-listing.QueueListing": "队列列表",
+    		"nf-queue-listing.Message1": "Unable to generate an access token for downloading content.",
+    		"nf-queue-listing.Message2": "Unable to generate access token for viewing content.",
+    		"nf-queue-listing.Stop": "Stop",
+    		"nf-queue-listing.Message3": "Queue has no stream file.",
+    		"nf-queue-listing.FlowFile": "Flow File",
+    		"nf-queue-listing.Ok": "Ok",
+    		"nf-queue-listing.Message4": "The source and destination of this queue are currently running. This list may no longer be accurate.",
+    		"nf-queue-listing.Message5": "The source of this queue is currently running. This listing may no longer be accurate.",
+    		"nf-queue-listing.Message6": "The goal of this queue is running. This listing may no longer be accurate.",
+    		"nf-queue-listing.NoValueSet": "No Value Set",
+    		"nf-queue-listing.Yes": "Yes",
+    		"nf-queue-listing.No": "No",
+    		"nf-queue-listing.Position": "Position",
+    		"nf-queue-listing.FileName": "File Name",
+    		"nf-queue-listing.FileSize": "File Size",
+    		"nf-queue-listing.queuedDuration": "Queued Duration",
+    		"nf-queue-listing.lineageDuration": "Lineage Duration",
+    		"nf-queue-listing.penalized": "Penalized",
+    		"nf-queue-listing.node": "Node",
+    		"nf-queue-listing.Bytes": "Bytes",
+    		"nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "Configure Remote Process Group",
+    		"nf-remote-process-group-configuration.Apply": "Apply",
+    		"nf-remote-process-group-configuration.ConfigurationError": "Configuration Error",
+    		"nf-remote-process-group-configuration.Cancel": "Cancel",
+    		"nf-remote-process-group-configuration.Message5": "Remote process group configuration",
+    		"nf-remote-process-group-details.RemoteProcessGroupDetails": "Remote Process Group Details",
+    		"nf-remote-process-group-details.Ok": "Ok",
+    		"nf-remote-process-group-ports.ConfigureRemotePort": "Configure Remote Port",
+    		"nf-remote-process-group-ports.Apply": "Apply",
+    		"nf-remote-process-group-ports.ConfigurationError": "Configuration Error",
+    		"nf-remote-process-group-ports.Message1": "Concurrent tasks must be an integer value.",
+    		"nf-remote-process-group-ports.Cancel": "Cancel",
+    		"nf-remote-process-group-ports.RemoteProcessGroupPorts": "Remote Process Group Ports",
+    		"nf-remote-process-group-ports.Close": "Close",
+    		"nf-remote-process-group-ports.Message2": "No description specified.",
+    		"nf-remote-process-group-ports.Message3": "This port has been deleted.",
+    		"nf-remote-process-group-ports.Message4": "The number of tasks that should be scheduled for this port at the same time.",
+    		"nf-remote-process-group-ports.transmissionSwitch": "Switch port transfer",
+    		"nf-remote-process-group-ports.description": "Not specified.",
+    		"nf-remote-process-group.Message1": "No comments specified",
+    		"nf-remote-process-group.Sent": "Sent",
+    		"nf-remote-process-group.Received": "Received",
+    		"nf-remote-process-group.5min": "(5 min)",
+    		"nf-remote-process-group.Message2": "Site-to-Site is secure.",
+    		"nf-remote-process-group.Message3": "Site-to-Site is NOT secure.",
+    		"nf-remote-process-group.Message4": "Remote flow not current",
+    		"nf-reporting-task.ReportingTask": "Reporting Task",
+    		"nf-reporting-task.Save": "Save",
+    		"nf-reporting-task.ConfigurationError": "Configuration Error",
+    		"nf-reporting-task.Message1": "Save changes before going to this Controller Service?",
+    		"nf-reporting-task.Settings": "Settings",
+    		"nf-reporting-task.Properties": "Properties",
+    		"nf-reporting-task.Comments": "Comments",
+    		"nf-reporting-task.ConfigureReportingTask": "Configure Reporting Task",
+    		"nf-reporting-task.Node": "Node",
+    		"nf-reporting-task.ClusterManager": "Cluster Manager",
+    		"nf-reporting-task.TimerDriven": "Timer driven",
+    		"nf-reporting-task.Message2": "Reporting task will be scheduled to run on an interval defined by the run schedule.",
+    		"nf-reporting-task.CRONDriven": "CRON driven",
+    		"nf-reporting-task.Message3": "Reporting task will be scheduled to run on at specific times based on the specified CRON string.",
+    		"nf-reporting-task.Apply": "Apply",
+    		"nf-reporting-task.Cancel": "Cancel",
+    		"nf-reporting-task.Advanced": "Advanced",
+    		"nf-reporting-task.Message4": "Save changes before opening the advanced configuration?",
+    		"nf-reporting-task.Ok": "Ok",
+    		"nf-search.Search": "Search",
+    		"nf-secure-port-configuration": "Settings",
+    		"nf-secure-port-configuration.AccessControl": "Access Control",
+    		"nf-secure-port-configuration.ConfigureSecurePort": "Configure Secure Port",
+    		"nf-secure-port-configuration.Apply": "Apply",
+    		"nf-secure-port-configuration.Cancel": "Cancel",
+    		"nf-secure-port-configuration.InputPort": "InputPort",
+    		"nf-secure-port-configuration.OutputPort": "OutputPort",
+    		"nf-secure-port-details.Settings": "Settings",
+    		"nf-secure-port-details.AccessControl": "Access Control",
+    		"nf-secure-port-details.SecurePortDetails": "Secure Port Details",
+    		"nf-secure-port-details.Ok": "Ok",
+    		"nf-settings.Filter": "Filter",
+    		"nf-settings.Message1": "A new flow archive was successfully created.",
+    		"nf-settings.Message2": "Settings successfully applied.",
+    		"nf-settings.Message3": "The type of controller service to create must be selected.",
+    		"nf-settings.Text": "Node",
+    		"nf-settings.ClusterManager": "Cluster Manager",
+    		"nf-settings.Message4": "This controller service will be available on the nodes only.",
+    		"nf-settings.Message5": "This controller service will be available on the cluster manager only.",
+    		"nf-settings.Message6": "No description specified",
+    		"nf-settings.Message7": "Add Controller Service",
+    		"nf-settings.Add": "Add",
+    		"nf-settings.Cancel": "Cancel",
+    		"nf-settings.Node": "Node",
+    		"nf-settings": "Cluster Manager",
+    		"nf-settings.ViewDetail": "View Details",
+    		"nf-settings.Disable": "Disable",
+    		"nf-settings.Enable": "Enable",
+    		"nf-settings.Remove": "Remove",
+    		"nf-settings.Usage": "Usage",
+    		"nf-settings.Name": "Name",
+    		"nf-settings.State": "State",
+    		"nf-settings.Availability": "Availability",
+    		"nf-settings.Message8": "This reporting task will be available on the nodes only.",
+    		"nf-settings.Message9": "This reporting task will be available on the cluster manager only.",
+    		"nf-settings.Type": "Type",
+    		"nf-settings.Tags": "Tags",
+    		"nf-settings.Message10": "No description specified",
+    		"nf-settings.Message11": "Add Reporting Task",
+    		"nf-settings.ViewDetails": "View Details",
+    		"nf-settings.Stop": "Stop",
+    		"nf-settings.Edit": "Edit",
+    		"nf-settings.Start": "Start",
+    		"nf-settings.RunStatus": "Run Status",
+    		"nf-settings.General": "General",
+    		"nf-settings.ControllerServices": "Controller Services",
+    		"nf-settings.ReportingTasks": "Reporting Tasks",
+    		"nf-settings.Message12": "Create a new controller service",
+    		"nf-settings.Message13": "Create a new reporting task",
+    		"nf-settings.Settings": " Settings",
+    		"nf-settings.ViewState": "ViewState",
+    		"nf-settings.AccessPolicies": "Access Policies",
+    		"nf-settings.Invalid": "Invalid",
+    		"nf-settings.Stopped": "Stopped",
+    		"nf-settings.Running": "Running",
+    		"nf-settings.Disabled": "Disabled",
+    		"nf-about": "NiFi Flow",
+    		"nf-bulletin-board.defaultFilterText": "Filter",
+    		"nf-bulletin-board.ByMessage": "by message",
+    		"nf-bulletin-board.ByName": "by name",
+    		"nf-bulletin-board.ById": "by id",
+    		"nf-bulletin-board.ByGroupId": "by group id",
+    		"nf-bulletin-board.Message1": "Filter ",
+    		"nf-bulletin-board.Message2": " matching \\\\'",
+    		"nf-bulletin-board.Message3": "Auto refresh started",
+    		"nf-bulletin-board.Message4": "Auto refresh stopped",
+    		"nf-bulletin-board.Message5": "Remove the filter",
+    		"nf-bulletin-board.BulletinBoard": " Bulletin Board",
+    		"nf-cluster.Cluster": " Cluster",
+    		"nf-cluster-table.Filter": "Filter",
+    		"nf-cluster-table.Message1": "Connect \\'",
+    		"nf-cluster-table.Message2": "\\' to this cluster?",
+    		"nf-cluster-table.Message3": "Disconnect \\'",
+    		"nf-cluster-table.Message4": "\\' from the cluster?",
+    		"nf-cluster-table.Message5": "Remove \\'",
+    		"nf-cluster-table.Message6": "\\' from the cluster?",
+    		"nf-cluster-table.NodeDetails": "Node Details",
+    		"nf-cluster-table.Ok": "Ok",
+    		"nf-cluster-table.ByAddress": "by address",
+    		"nf-cluster-table.ByStatus": "by status",
+    		"nf-cluster-table.ViewDetails": "View Details",
+    		"nf-cluster-table.Node Address": "Node Address",
+    		"nf-cluster-table.ActiveThreadCount": "Active Thread Count",
+    		"nf-cluster-table.Size": "Size",
+    		"nf-cluster-table.Queue": "Queue",
+    		"nf-cluster-table.Status": "Status",
+    		"nf-cluster-table.Uptime": "Uptime",
+    		"nf-cluster-table.LastHeartbeat": "Last Heartbeat",
+    		"nf-cluster-table.Connect": "Connect",
+    		"nf-cluster-table.Remove": "Remove",
+    		"nf-cluster-table.Disconnect": "Disconnect",
+    		"nf-cluster-table.MakePrimary": "Make Primary",
+    		"nf-cluster-table.None": "无",
+    		"nf-counters-table.Filter": "Filter",
+    		"nf-counters-table.ByName": "by name",
+    		"nf-counters-table.ByContext": "by context",
+    		"nf-counters-table.Context": "Context",
+    		"nf-counters-table.Name": "Name",
+    		"nf-counters-table.Value": "Value",
+    		"nf-counters-table.Reset": "Reset",
+    		"nf-counters-table.Delete": "Delete",
+    		"nf-counters-table.Connect": "Connect",
+    		"nf-counters.Counters": " Counters",
+    		"nf-history.History": "历史",
+    		"nf-history-table.Filter": "Filter",
+    		"nf-history-table.ActionDetail": "Action Details",
+    		"nf-history-table.Ok": "Ok",
+    		"nf-history-table.ById": "by id",
+    		"nf-history-table.Message1": "Filters based on the id of the component that was modified",
+    		"nf-history-table.ByUser": "by user",
+    		"nf-history-table.Message2": "Filters based on the user that performed the action",
+    		"nf-history-table.FilterHistory": "Filter History",
+    		"nf-history-table.Cancel": "Cancel",
+    		"nf-history-table.PurgeHistory": "Purge History",
+    		"nf-history-table.Purge": "Purge",
+    		"nf-history-table.History": " History",
+    		"nf-history-table.Message3": "Are you sure you want to delete all history before '",
+    		"nf-history-table.Message3.1": "\\'?",
+    		"nf-history-table.Message4": "The end date must be specified.",
+    		"nf-history-table.ViewDetails": "View Details",
+    		"nf-history-table.DateTime": "Date/Time",
+    		"nf-history-table.Name": "Name",
+    		"nf-history-table.Type": "Type",
+    		"nf-history-table.Operation": "Operation",
+    		"nf-history-table.User": "User",
+    		"nf-history-table.Value": "Value",
+    		"nf-history-table.PreviousValue": "Previous Value",
+    		"nf-history-table.SourceId": "Source Id",
+    		"nf-history-table.SourceName": "Source Name",
+    		"nf-history-table.SourceType": "Source Type",
+    		"nf-history-table.Relationship": "Relationship(s)",
+    		"nf-history-table.DestinationId": "Destination Id",
+    		"nf-history-table.DestinationName": "Destination Name",
+    		"nf-history-table.DestinationType": "Destination Type",
+    		"nf-history-table.Group": "Group",
+    		"nf-history-table.GroupId": "GroupId",
+    		"nf-history-table.PreviousGroup": "Previous Group",
+    		"nf-history-table.PreviousGroupId": "Previous Group Id",
+    		"nf-history-table.EndDate": "End Date",
+    		"nf-history-table.Message5": "A filter based on the id of the modified component",
+    		"nf-history-table.Message6": "A filter based on the user performing the operation",
+    		"nf-history-table.NotAuthorized": "No Authorized",
+    		"nf-history-table.Uri": "Uri",
+    		"nf-history-table.EndTime": "End Time",
+    		"nf-login.Login": "Login",
+    		"nf-login.Logining": "Logining...",
+    		"nf-login.SUCCESS": "SUCCESS",
+    		"nf-login.Denied": "Denied",
+    		"nf-login.Message1": "Can not log in",
+    		"nf-login.Message2": "Can not check access status",
+    		"nf-login.Message3": "The current data stream is not configured with account / password login.",
+    		"nf-common.History": "<b>History:</b><ul class=\"property-info\">",
+    		"nf-common.DefaultValue": "<b>Default Value:</b> ",
+    		"nf-common.SupportsExpressionLanguage": "<b>Supports Expression Language:</b> ",
+    		"nf-common.sensitiveText": "Sensitive value set",
+    		"nf-common.Message1": "An unexpected error has occurred",
+    		"nf-common.Message2": "Please check the logs.",
+    		"nf-common.Message3": "Unable to communicate with NiFi",
+    		"nf-common.Message4": "Unauthorized",
+    		"nf-common.Message5": "Authorization is required to use this NiFi.",
+    		"nf-common.Message6": "Forbidden",
+    		"nf-common.Message7": "Unable to authorize you to use this NiFi.",
+    		"nf-common.Message9": "An error occurred communicating with the application core. Please check the logs and fix any configuration issues before restarting.",
+    		"nf-common.ParseError": "Parse Error",
+    		"nf-common.Message10": "Unable to interpret response from NiFi.",
+    		"nf-common.Message11": ": Unexpected Response",
+    		"nf-common.Message12": "An unexpected error has occurred. Please check the logs.",
+    		"nf-common.Message13": "No value set",
+    		"nf-common.Message14": "Empty string set",
+    		"nf-common.Message15": "Your session will expire soon. Please log in again to avoid being automatically logged out.",
+    		"nf-common.Message16": "You are accessing with limited authority. Log in or request an account to access with additional authority granted to you by an administrator.",
+    		"nf-common.Message17": "Your session has expired. Please reload to log in again.",
+    		"nf-common.Message18": "Your session has expired. Please press Ok to log in again.",
+    		"nf-common.Message19": "Please ensure the application is running and check the logs for any errors.",
+    		"nf-common.Message20": "Request has timed out. Please ensure the application is running and check the logs for any errors.",
+    		"nf-common.Message21": "Request has been aborted.",
+    		"nf-common.Message22": "Request transport mechanism failed. Please ensure the host where the application is running is accessible.",
+    		"nf-common.Message23": "Make sure that the application is running and check if there are any errors in the log.",
+    		"nf-common.Message24": "Can not communicate with data stream",
+    		"nf-common.Unauthorized": "Unauthorized",
+    		"nf-common.Message25": "Use this data stream for authentication.",
+    		"nf-common.Message26": "An unexpected error occurred",
+    		"nf-common.SessionExpired": "Session Expired",
+    		"nf-common.AccessDenied": "Access Denied",
+    		"nf-common.Error": "Error",
+    		"nf-common.SupportsExpressionLanuage":"Supports expression language:",
+    		"nf-common.Message27": "Empty string before setting",
+    		"nf-common.Message28": "No value previously set",
+    		"nf-common.Bytes": " Bytes",
+    		"nf-connection-details.FromProcessor": "From processor",
+    		"nf-connection-details.Processor": "Processor",
+    		"nf-connection-details.FromFunnel": "From Funnel",
+    		"nf-connection-details.FromOutPut": "From output",
+    		"nf-connection-details.FromInput": "From input",
+    		"nf-connection-details.ToProcessor": "To processor",
+    		"nf-connection-details.ToFunnel": "To funnel",
+    		"nf-connection-details.ToInput": "To input",
+    		"nf-connection-details.ToOutput": "To output",
+    		"nf-connection-details.Details": "Details",
+    		"nf-connection-details.Settings": "Settings",
+    		"nf-connection-details.ConnectionDetails": "Connection Details",
+    		"nf-connection-details.Ok": "Ok",
+    		"nf-connection-details.NoValueSet": "No Value Set",
+    		"nf-dialog.Ok": "Ok",
+    		"nf-dialog.Yes": "Yes",
+    		"nf-dialog.No": "No",
+    		"nf-processor-details.Settings": "Settings",
+    		"nf-processor-details.Scheduling": "Scheduling",
+    		"nf-processor-details.Properties": "Properties",
+    		"nf-processor-details.Comments": "Comments",
+    		"nf-processor-details.ProcessorDetails": "Processor Details",
+    		"nf-processor-details.Ok": "Ok",
+    		"nf-processor-details.Advanced": "Advanced",
+    		"nf-processor-details.Error": "错误",
+    		"nf-processor-details.ThisProcessorHasNoRelationships": "This Processor Has No Relationships",
+    		"nf-status-history.StatusHistory":"Status History",
+    		"nf-status-history.Processor": "Processor",
+    		"nf-status-history.InputPort": "Input Port",
+    		"nf-status-history.OutputPort": "Output Port",
+    		"nf-status-history.ProcessGroup": "Process Group",
+    		"nf-status-history.RemoteProcessGroup": "Remote Process Group",
+    		"nf-status-history.Connection": "Connection",
+    		"nf-status-history.Funnel": "Funnel",
+    		"nf-status-history.Template": "Template",
+    		"nf-status-history.Label": "Label",
+    		"nf-status-history.Message":"Insufficient history, please try again later.",
+    		"nf-status-history.Close": "Close",
+    		"nf-status-history.Start": "Start",
+    		"nf-status-history.End": "End",
+    		"nf-status-history.Min_Max_Mean": "Min/Max/Mean",
+    		"nf-status-history.NiFi": "NiFi",
+    		"nf-provenance.DataProvenance": " Data Provenance",
+    		"nf-provenance-lineage.Message1": "Computing FlowFile lineage...",
+    		"nf-provenance-lineage.ViewDetails": "View details",
+    		"nf-provenance-lineage.Message2": "The lineage search has completed successfully but there no results were found. The events may have aged off.",
+    		"nf-provenance-lineage.Find parents": "Find parents",
+    		"nf-provenance-lineage.Expand": "Expand",
+    		"nf-provenance-lineage.Collapse": "Collapse",
+    		"nf-provenance-lineage.Cancel": "Cancel",
+    		"nf-provenance-lineage.Lineage Results": "Pedigree results",
+    		"nf-provenance-lineage.Process Lineage": "Process Lineage",
+    		"nf-provenance-table.Filter": "Filter",
+    		"nf-provenance-table.Message": "Showing the most recent ",
+    		"nf-provenance-table.Of": " of ",
+    		"nf-provenance-table.Events": "events.",
+    		"nf-provenance-table.Message4": " events, please refine the search.",
+    		"nf-provenance-table.Showing": "Showing ",
+    		"nf-provenance-table.Message5": " events that match the specified query, please refine the search.",
+    		"nf-provenance-table.Message6": "the events that match the specified query.",
+    		"nf-provenance-table.Details": "Details",
+    		"nf-provenance-table.Attributes": "Attributes",
+    		"nf-provenance-table.Content": "Content",
+    		"nf-provenance-table.ProvenanceEvent": "Provenance Event",
+    		"nf-provenance-table.Ok": "Ok",
+    		"nf-provenance-table.Message1": "Successfully submitted replay request.",
+    		"nf-provenance-table.Message2": "Search Events",
+    		"nf-provenance-table.Search": "Search",
+    		"nf-provenance-table.Message3": "Searching provenance events...",
+    		"nf-provenance-table.ByComponentName": "by component name",
+    		"nf-provenance-table.ByComponentType": "by component type",
+    		"nf-provenance-table.ByType": "by type",
+    		"nf-provenance-table.ByNode": "by node",
+    		"nf-provenance-table.Cluster": "cluster",
+    		"nf-provenance-table.ViewDetail": "View Details",
+    		"nf-provenance-table.ShowLineage": "Show Lineage",
+    		"nf-provenance-table.GoTo": "Go To",
+    		"nf-provenance-table.DateTime": "Date/Time",
+    		"nf-provenance-table.Type": "Type",
+    		"nf-provenance-table.FlowFileUuid": "FlowFile Uuid",
+    		"nf-provenance-table.Size": "Size",
+    		"nf-provenance-table.ComponentName": "Component Name",
+    		"nf-provenance-table.ComponentType": "Component Type",
+    		"nf-provenance-table.Node": "Node",
+    		"nf-provenance-table.Cancel": "Cancel",
+    		"nf-provenance-table.NoValueSet": "No value set",
+    		"nf-provenance-table.Claim": "Claim",
+    		"nf-provenance-table.InputClaim": "Input Claim",
+    		"nf-provenance-table.Provenance": "Provenance",
+    		"nf-provenance-table.Message7": "Unable to generate access token for viewing content.",
+    		"nf-provenance-table.Message8": "Unable to generate an access token for downloading content.",
+    		"nf-provenance-table.Message9": "No previously set value",
+    		"nf-provenance-table.Message10": "Searching for cause event...",
+    		"nf-provenance-table.Process": "Process",
+    		"nf-provenance-table.NoChildren": "No Children",
+    		"nf-provenance-table.NoParent": "No Parent",
+    		"nf-provenance-table.Bytes": " Bytes",
+    		"nf-cluster-search.Summary": "Summary",
+    		"nf-cluster-search.SelectNode": "Select node",
+    		"nf-cluster-search.Ok": "Ok",
+    		"nf-cluster-search.ClusterSearch": "Cluster Search",
+    		"nf-cluster-search.Message1": "No nodes match \\'",
+    		"nf-cluster-search.Message2": "More than one node matches \\'",
+    		"nf-cluster-search.Cancel": "Cancel",
+    		"nf-cluster-search.NiFiSumary": "NiFi Summary",
+    		"nf-cluster-search.Message3": "No node matching the search term",
+    		"nf-summary-table.Filter": "Filter",
+    		"nf-summary-table.Processors": "Processors",
+    		"nf-summary-table.Connections": "Connections",
+    		"nf-summary-table.InputPorts": "Input Ports",
+    		"nf-summary-table.OutputPorts": "Output Ports",
+    		"nf-summary-table.RemoteProcessGroups": "Remote Process Groups",
+    		"nf-summary-table.ProcessGroups": "Process Groups",
+    		"nf-summary-table.ByName": "by name",
+    		"nf-summary-table.ByType": "by type",
+    		"nf-summary-table.BySource": "by source",
+    		"nf-summary-table.ByDestination": "by destination",
+    		"nf-summary-table.ByUri": "by uri",
+    		"nf-summary-table.ViewDetail": "View Details",
+    		"nf-summary-table.SourceName": "SourceName",
+    		"nf-summary-table.Name": "Name",
+    		"nf-summary-table.RunStatus": "Run Status",
+    		"nf-summary-table.In": "In",
+    		"nf-summary-table.Size": "Size",
+    		"nf-summary-table.Message": "Count / data size in the last 5 min",
+    		"nf-summary-table.Read": "Read",
+    		"nf-summary-table.Write": "Write",
+    		"nf-summary-table.5min": "5 min",
+    		"nf-summary-table.Message1": "Data size in the last 5 min",
+    		"nf-summary-table.Out": "Out",
+    		"nf-summary-table.Tasks": "Tasks",
+    		"nf-summary-table.Time": "Time",
+    		"nf-summary-table.Message2": "Count / duration in the last 5 min",
+    		"nf-summary-table.Type": "Type",
+    		"nf-summary-table.GoTo": "Go To",
+    		"nf-summary-table.ShowHistory": "Show History",
+    		"nf-summary-table.ShowDetail": "Show Details",
+    		"nf-summary-table.ClusterProcessorSummary": "Cluster Processor Summary",
+    		"nf-summary-table.Node": "Node",
+    		"nf-summary-table.Queue": "Queue",
+    		"nf-summary-table.DestinationName": "Destination Name",
+    		"nf-summary-table.ClusterConnectionSummary": "Cluster Connection Summary",
+    		"nf-summary-table.Close": "Close",
+    		"nf-summary-table.Transferred": "Transferred",
+    		"nf-summary-table.Message3": "Count / data size transferred to and from connections in the last 5 min",
+    		"nf-summary-table.Sent": "Sent",
+    		"nf-summary-table.Received": "Received",
+    		"nf-summary-table.ClusterProcessGroupSummary": "Cluster Process Group Summary",
+    		"nf-summary-table.ClusterInputPortSummary": "Cluster Input Port Summary",
+    		"nf-summary-table.ClusterOutPutPortSummary": "Cluster Output Port Summary",
+    		"nf-summary-table.Transmitting": "Transmitting",
+    		"nf-summary-table.Target URI": "Target URI",
+    		"nf-summary-table.ClusterRemoteProcessGroupSummary": "Cluster Remote Process Group Summary",
+    		"nf-summary-table.JVM": "JVM",
+    		"nf-summary-table.System": "System",
+    		"nf-summary-table.SystemDiagnostics": "System Diagnostics",
+    		"nf-summary-table.Summary": " Summary",
+    		"nf-summary-table.Message4": "Based on the presence of announcements",
+    		"nf-summary-table.times": "times",
+    		"nf-summary-table.UsageFor": "Usage For",
+    		"nf-summary-table.GoToProcessor": "Go To Processor",
+    		"nf-summary-table.ViewStatus": "View Status",
+    		"nf-summary-table.ViewProcessor": "View Processor",
+    		"nf-summary-table.ViewConnect": "View Connect",
+    		"nf-summary-table.GoToConnect": "Go To Connect",
+    		"nf-summary-table.GoToProcessorGroup": "Go To Processor Group",
+    		"nf-summary-table.ViewProcessorGroup": "View Processor Group",
+    		"nf-summary-table.GoToInputPort": "Go To Input Port",
+    		"nf-summary-table.ViewInputPort": "View Input Port",
+    		"nf-summary-table.GoToOutputPort": "Go To Output Port",
+    		"nf-summary-table.ViewOutputPort": "View Output Port",
+    		"nf-summary-table.ViewRemoteProcessorGroup": "View Remote Processor Group",
+    		"nf-summary-table.aria1": "The data stream is stored using the repository",
+    		"nf-summary.Summary": "Summary",
+    		"nf-templates-table.Templates": " Templates",
+    		"nf-templates-table.Message": " Select template to import",
+    		"nf-templates-table.Filter": "Filter",
+    		"nf-templates-table.DeleteTemplate": "Delete Template",
+    		"nf-templates-table.Message1": "Delete template \'",
+    		"nf-templates-table.DownloadTemplate": "Download Template",
+    		"nf-templates-table.Message2": "Unable to generate an access token for downloading content.",
+    		"nf-templates-table.ByName": "by name",
+    		"nf-templates-table.ByDescription": "by description",
+    		"nf-templates-table.RemovieTemplate": "Remove Template",
+    		"nf-templates-table.DateTime": "Date/Time",
+    		"nf-templates-table.Name": "Name",
+    		"nf-templates-table.Description": "Description",
+    		"nf-templates-table.GroupId": "Process group Id",
+    		"nf-templates-table.Download": "Download",
+    		"nf-templates-table.AccessPolicies": "Access Policies",
+    		"nf-templates.Templates": "Templates",
+    		"nf-users.Users": "Users",
+    		"nf-users-table.Filter": "Filter",
+    		"nf-users-table.UserDetails": "User Details",
+    		"nf-users-table.Ok": "Ok",
+    		"nf-users-table.UserRoles": "User Roles",
+    		"nf-users-table.Apply": "Apply",
+    		"nf-users-table.Cancel": "Cancel",
+    		"nf-users-table.GroupRoles": "Group Roles",
+    		"nf-users-table.DeleteUser": "Delete User",
+    		"nf-users-table.Delete": "Delete",
+    		"nf-users-table.RevokeAccess": "Revoke Access",
+    		"nf-users-table.Revoke": "Revoke",
+    		"nf-users-table.SetUserGroup": "Set Users Group",
+    		"nf-users-table.Group": "Group",
+    		"nf-users-table.Message": "Group name cannot be blank.",
+    		"nf-users-table.ByUser": "by user",
+    		"nf-users-table.ByGroup": "by group",
+    		"nf-users-table.ByRole": "by role",
+    		"nf-users-table.AuthorizationPending": "Authorization Pending",
+    		"nf-users-table.AccessRevoked": "Access Revoked",
+    		"nf-users-table.NoRolesSet": "No roles set",
+    		"nf-users-table.Message1": "Multiple users with different roles",
+    		"nf-users-table.Message2": "Multiple users with different status",
+    		"nf-users-table.Message3": "No status set",
+    		"nf-users-table.EditAccess": "Edit Access",
+    		"nf-users-table.RevokeAccess.Ungroup": "Ungroup",
+    		"nf-users-table.DeleteAccount": "Delete Account",
+    		"nf-users-table.User": "User",
+    		"nf-users-table.Roles": "Roles",
+    		"nf-users-table.LastAccessed": "Last Accessed",
+    		"nf-users-table.Status": "Status",
+    		"nf-users-table.GroupUsers": "Group Users",
+    		"nf-users-table.Message4": "Select one or more users to group.",
+    		"nf-users-table.Message5": "Remove all users from group \\'",
+    		"nf-users-table.Message6": "Remove user \\'",
+    		"nf-users-table.Message7": "\\' from group \\'",
+    		"nf-users-table.UserGroup": "User/Group",
+    		"nf-users-table.Edit": "Edit",
+    		"nf-users-table.Remove": "Remove",
+    		"jquery-propertytable.SensitiveValueSet": "Sensitive value set",
+    		"jquery-propertytable.EmptyStringSet": "Empty string set",
+    		"jquery-propertytable.NoValueSet": "no value set",
+    		"jquery-propertytable.RequiredField": "Required field",
+    		"jquery-propertytable.Property": "Property",
+    		"jquery-propertytable.Value": "Value",
+    		"jquery-propertytable.PropertyName": "Property Name",
+    		"jquery-propertytable.NewProperty": "New property",
+    		"jquery-propertytable.Ok": "Ok",
+    		"jquery-propertytable.Delete": "Delete",
+    		"jquery-propertytable.GoTo": "Go To",
+    		"jquery-propertytable.Cancel": "Cancel",   
+    		"jquery-propertytable.Empty": "Empty",
+    		"jquery-propertytable.SetEmptyString": "Set Empty String",
+    		"jquery-propertytable.ControllerService" : "Controller Service",
+    		"jquery-propertytable.Tags" : "Tags",
+    		"jquery-propertytable.Create" : "Create",
+    		"jquery-propertytable.Description" : "Description",
+    		"jquery-propertytable.AddControllerService" : "Add Controller Service",
+    		"jquery-propertytable.AddProperty": "Add Property",
+    		"jquery-propertytable.PropertyExists": "Property Exists",
+    		"jquery-propertytable.Message0": "A property with this name already exists。",
+    		"jquery-propertytable.Message": "A property with this name already exists.",
+    		"jquery-propertytable.Message1": "Property name must be specified.",
+    		"jquery-propertytable.Message3": "Create new service ...",
+    		"jquery-propertytable.Message2": "No controller service types found that are applicable for this property.",
+    		"slick.editors.Message1": "Please enter a valid integer",
+    		"slick.editors.Message2": "Please enter a valid positive number",
+    		"slick.grid.Message1": "Slickgrid requires a valid container，",
+    		"slick.grid.Message2": "Does not exist in the DOM",
+    		"slick.grid.Message3": "Style table not found.",
+    		"slick.grid.Message4": "Add cell Css style: cell CSS hash key'",
+    		"slick.grid.Message5": "'already exists.",
+    		"slick.grid.Message6": "From node acquisition unit: Unable to get unit -",
+    		"slick.grid.Message7": "Grid : Make the active cell editable: options.editable to false when it should never be called",
+    		"slick.grid.Message8": "The selection model is not set",
+    		"jquery-tagcloud.NoTagsSpecified": "Unspecified label" 
+
+    };
+    return {
+        msg: function (key) {
+            if (locale === "en") {
+                return en[key];
+            }
+            if ((locale === "cn")) {
+                return cn[key];
+            }
+        }
+    };
+})();
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js
new file mode 100644
index 000000000000..769046e9eec9
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js
@@ -0,0 +1,1522 @@
+
+nf._ = (function () {
+    var locale = "jp";
+    var jp = {
+        "nf-about": "データフロー",
+        "nf-bulletin-board.defaultFilterText": "フィルタリング",
+        "nf-bulletin-board.ByMessage": "情報でフィルタリングします。",
+        "nf-bulletin-board.ByName": "名前でフィルタリングします。",
+        "nf-bulletin-board.ById": "識別子でフィルタリングします。",
+        "nf-bulletin-board.ByGroupId": "グループ識別子でフィルタリングします。",
+        "nf-bulletin-board.Message1": "フィルタリング ",
+        "nf-bulletin-board.Message2": " マッチング \\\\'",
+        "nf-bulletin-board.Message3": "自動リフレッシュ開始",
+        "nf-bulletin-board.Message4": "自動リフレッシュ終了",
+		"nf-bulletin-board.Message5": "削除フィルター",
+        "nf-bulletin-board.BulletinBoard": " 掲示板",
+		"nf-actions.UpdateResource": "更新のソース",
+        "nf-actions.Refreshing": "更新中",
+        "nf-actions.RemoteGroupProcess": "リモート処理グループ",
+        "nf-actions.NoTargetURIDefined": "ターゲットURIが定義されていません。",
+        "nf-actions.Message1": "該当するコンポーネントを選択していません。該当するコンポーネントを選択して活性化し、且つ、現在コンポーネントが実行されていないことを保証します。",
+        "nf-actions.Message2": "該当するコンポーネントを選択していません。該当するコンポーネントを選択してオフラインさせ、現在コンポーネントが実行されていないことを保証します。",
+        "nf-actions.Message3": "該当するコンポーネントを選択していません。該当するコンポーネントを選択して起動し、現在コンポーネントが実行されていません。",
+        "nf-actions.Message4": "該当するコンポーネントを選択していません。終了するコンポーネントを選択してください。",
+        "nf-actions.Message5": "該当するコンポーネントを選択していません。削除するコンポーネントを選択してください",
+        "nf-actions.EmptyQueue": "空きのキュー",
+        "nf-actions.Message6": "キューをクリアしてよろしいですか。すべてのフローファイルはクリアされます。",
+        "nf-actions.Cancel": "キャンセル",
+        "nf-actions.Empty": "空き",
+        "nf-actions.Stop": "終了",
+        "nf-actions.Message7": " キューからクリアされます。",
+        "nf-actions.Message8": "クリアされるフローファイルがありません。",
+        "nf-actions.Message9": "現在の選択では、テンプレートを作成できません。",
+        "nf-actions.Create": "作成",
+        "nf-actions.Template": "テンプレート '",
+        "nf-actions.Message11": "' 正しく作成しました。",
+        "nf-actions.Message12": "コピーペーストする時、エラーが発生しました。",
+        "nf-canvas-toobbar.Start": "起動",
+        "nf-canvas-toobbar.Stop": "終了",
+        "nf-canvas-toobbar.Copy": "コピー",
+        "nf-canvas-toobbar.Paste": "ペースト",
+        "nf-canvas-toobbar.Group": "グループ",
+        "nf-canvas-toobbar.Enable": "イネーブル",
+        "nf-canvas-toobbar.Disable": "ディセーブル",
+        "nf-canvas-toobbar.CreateTemplate": "テンプレート作成",
+        "nf-canvas-toobbar.ChangeColor": "色変更",
+        "nf-canvas-toobbar.Delete": "削除",        
+        "nf-canvas-header.OK": "はい",
+        "nf-canvas-header.CreateTemplate": "テンプレート作成",
+        "nf-canvas-header.Fill": "記入",
+        "nf-canvas-header.Apply": "適用",
+        "nf-canvas-header.Cancel": "キャンセル",
+        "nf-canvas-header.Message": "現在のグループをリフレッシュできません。",
+        "nf-canvas-toolbox.Input": "入力",
+        "nf-canvas-toolbox.OutPut": "出力",        
+        "nf-canvas-toolbox.Filter": "フィルター",
+        "nf-canvas-toolbox.Processor": "プロセッサー",
+        "nf-canvas-toolbox.InputPort": "インプットポート",
+        "nf-canvas-toolbox.OutputPort": "アウトプットポート",
+        "nf-canvas-toolbox.ProcessGroup": "プロセスグループ",
+        "nf-canvas-toolbox.RemoteProcessGroup": "リモートプロセスグループ",
+        "nf-canvas-toolbox.Connection": "接続",
+        "nf-canvas-toolbox.Funnel": "じょうご",
+        "nf-canvas-toolbox.Template": "テンプレート",
+        "nf-canvas-toolbox.Label": "ラベル",
+        "nf-canvas-toolbox.Add": "追加",
+        "nf-canvas-toolbox.Cancel": "キャンセル",
+        "nf-canvas-toolbox.Instantiate Template": "インスタンス化したテンプレート",
+        "nf-canvas-toolbox.Message": "テンプレートはデータフローシステムにロードされていません。",
+        "nf-canvas-toolbox.Type": "タイプ",
+        "nf-canvas-toolbox.Tags": "ラベル",
+        "nf-canvas-toolbox.Message1": "説明を指定していません。",
+        "nf-canvas-toolbox.AddProcessor": "プロセッサー追加",
+        "nf-canvas-toolbox.AddPort": "ポート追加",
+        "nf-canvas-toolbox.AddProcessGroup": "プロセスグループ追加",
+        "nf-canvas-toolbox.AddRemoteProcessGroup": "リモートプロセスグループ追加",
+        "nf-canvas-utils.Message1": "特定のコンポーネントグループをロードできません.",
+        "nf-canvas-utils.Message2": "特定のコンポーネントが見つかりませんでした。",
+        "nf-canvas-utils.Message3": "選択したグループに入れません。",
+        "nf-canvas-utils.Message4": "ポートをルートグループから移動できません。",
+        "nf-canvas-utils.Message5": "これらのポートは現在グループ外部に接続しています: <b>",
+        "nf-canvas-utils.Message6": "これらのポートはターゲットプロセスグループにあります: <b>",
+        "nf-canvas.Browser": "対応しないブラウザです。",
+        "nf-canvas.Message1": "フローチャートはSVGで表示すべきです。SVGに対応するブラウザを選択してください。",
+        "nf-connection-configuration.Add": "追加",
+        "nf-connection-configuration.Message0": "接続は、少なくとも１つのリレーションシップを選択すべきです。",
+        "nf-connection-configuration.Cancel": "キャンセル",
+        "nf-connection-configuration.Message1": "\\' いずれのリレーションシップにも対応しません。",
+        "nf-connection-configuration.Message2": "\\' いずれのアウトプットポートもありません。",
+        "nf-connection-configuration.Message4": "\\' いずれのインプットポートもありません。",
+        "nf-connection-configuration.Message6": "コンフィギュレーションエラー",
+        "nf-connection-configuration.ConfigureConnection": "接続コンフィギュレーショ",
+        "nf-connection-configuration.Detail": "詳細",
+        "nf-connection-configuration.Setting": "設定",
+        "nf-connection-configuration.CreateConnection": "接続作成",
+        "nf-connection-configuration.Apply": "アプリー",
+        "nf-connection-configuration.Message7": "接続は、少なくとも１つのリレーションシップを選択すべきです。",
+        "nf-connection-configuration.Message8": "接続コンフィギュレーション",
+        "nf-connection.Message1": "ループ接続には少なくとも２つの反曲点が必要です。",
+        "nf-connection.From": "から",
+        "nf-connection.To": "まで",
+        "nf-connection.Name": "名称",
+        "nf-connection.Queued": "キューイング",
+        "nf-context-menu.RefreshStatus": "リフレッシュ状態",
+        "nf-context-menu.LeaveGroup": "グループと離れます。",
+        "nf-context-menu.Configure": "コンフィギュレーション",
+        "nf-context-menu.ViewConfiguration": "コンフィギュレーションをビューします。",
+        "nf-context-menu.EnterGroup": "グループに入ります。",
+        "nf-context-menu.Start": "開始",
+        "nf-context-menu.Stop": "終了",
+        "nf-context-menu.RemotePorts": "リモートポート",
+        "nf-context-menu.EnableTransmission": "イネーブルに変換させます。",
+        "nf-context-menu.DisableTransmission": "ディセーブルに変換させます。",
+        "nf-context-menu.Stats": "ステータス",
+        "nf-context-menu.DataProvenance": "データ出所",
+        "nf-context-menu.BringFront": "フロントに持ってきます",
+        "nf-context-menu.GoToSource": "ソースに入ります。",
+        "nf-context-menu.GoToDestination": "ターゲットに入ります。",
+        "nf-context-menu.UpstreamConnections": "上流接続",
+        "nf-context-menu.DownstreamConnections": "下流接続",
+        "nf-context-menu.Usage": "用途",
+        "nf-context-menu.Refresh": "リフレッシュ",
+        "nf-context-menu.GoTo": "エントリー",
+        "nf-context-menu.ChangeColor": "色変更",
+        "nf-context-menu.CenterInView": "ビュー中央合わせ",
+        "nf-context-menu.Copy": "コピー",
+        "nf-context-menu.Paste": "ペースト",
+        "nf-context-menu.MoveParentGroup": "親グループに移動します。",
+        "nf-context-menu.EmptyQueue": "空きのキュー",
+        "nf-context-menu.Delete": "削除",
+        "nf-controller-service.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-controller-service.Cancel": "キャンセル",
+        "nf-controller-service.Close": "閉じる",
+        "nf-controller-service.Message1": "ディセーブルにする手順",
+        "nf-controller-service.ActionCanceled": "動作キャンセル",
+        "nf-controller-service.Message2": "イネーブルリクエストの動作はキャンセルされましたが、一部のリクエストは実行たかもしれません。 サービスリレーションシップのすべてのコンポーネントを検証してください。",
+        "nf-controller-service.Message3": "イネーブル手順 ",
+        "nf-controller-service.Message4": "動作キャンセル",
+        "nf-controller-service.Message5": "ディセーブルリクエストの動作はキャンセルされましたが、、一部のリクエストは実行たかもしれません。 サービスリレーションシップのすべてのコンポーネントを検証してください。",
+        "nf-controller-service.Message6": "設定を保存しますか?",
+        "nf-controller-service.Settings": "コンフィギュレーション",
+        "nf-controller-service.Properties": "プロパティ",
+        "nf-controller-service.Comments": "コメント",
+        "nf-controller-service.Message7": "コンフィギュレーションコントローラーサービス",
+        "nf-controller-service.Message8": "そのサービスディセーブルをコントロールします。",
+        "nf-controller-service.Disable": "ディセーブル",
+        "nf-controller-service.ServiceOnle": "サービスのみ",
+        "nf-controller-service.Message9": "現在のコントローラーサービスだけをイネーブルにします。",
+        "nf-controller-service.Message10": "サービスと関連关コンポーネント",
+        "nf-controller-service.Message11": "コントローラーサービスをイネーブルにします。リレーションシップコンポーネントをイネーブル/起動させます。",
+        "nf-controller-service.Message12": "コントロールサーバーをイネーブルにします。",
+        "nf-controller-service.Enable": "イネーブル",
+        "nf-controller-service.Apply": "アプリー",
+        "nf-controller-service.Advanced": "アドバンスド",
+        "nf-controller-service.Message13": "アドバンスド設定前、変更を保存しますか?",
+        "nf-controller-service.Ok": "はい",
+        "nf-go-to.Close": "閉じる",
+        "nf-go-to.DownstreamConnections": "下流接続",
+        "nf-go-to.UpstreamConnections": "上流接続",
+        "nf-go-to.Message1": "上流接続がありません。",
+        "nf-go-to.Message2": "下流接続がありません。",        
+        "nf-port-configuration.ConfigurePort": "コンフィギュレーションポート",
+        "nf-port-configuration.Apply": "アプリー",
+        "nf-port-configuration.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-port-configuration.Cancel": "キャンセル",
+        "nf-port-details.PortDetails": "ポート詳細",
+        "nf-port-details.OK": "はい",
+        "nf-process-group-configuration.ConfigureProcessGroup": "コンフィギュレーションプロセスグループ",
+        "nf-process-group-configuration.Apply": "アプリー",
+        "nf-process-group-configuration.Cancel": "キャンセル",
+        "nf-process-group-details.ProcessGroupDetails": "プロセスグループ詳細",
+        "nf-process-group-details.Ok": "アプリー",
+        "nf-process-group.Message1": "コメントがありません",
+        "nf-process-group.Queued": "キューイング",
+        "nf-process-group.In": "入力",
+        "nf-process-group.ReadWrite": "リード/ライト",
+        "nf-process-group.Out": "出力",
+        "nf-process-group.5min": "(5 分間)",
+        "nf-processor-configuration.TimerDriven": "時間ドライブ",
+        "nf-processor-configuration.Message1": "プロセッサーは計画時間どおり実行されます。",
+        "nf-processor-configuration.EventDriven": "イベントドライブ",
+        "nf-processor-configuration.Message2": "プロセッサーはイベントドライブどおりに実行します(例、フローファイルがキューに入る)。計画タスクポリシーは打診的です。",
+        "nf-processor-configuration.OnPrimaryNode": "メインノードにあります。",
+        "nf-processor-configuration.Message3": "プロセッサーはメインノードで指定時間間隔どおりに次を実行されます。Processor will be scheduled on the primary node on an interval defined by the run schedule.",
+        "nf-processor-configuration.CronDriven": "CRONドライブ",
+        "nf-processor-configuration.Message5": "プロセッサーはCRON形式の指定時間で実行されます。",
+        "nf-processor-configuration.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-processor-configuration.Message6": "コントローラーサービスに入る前、変更を保存しますか?",
+        "nf-processor-configuration.Settings": "設定",
+        "nf-processor-configuration.Scheduling": "計画実行中",
+        "nf-processor-configuration.Properties": "プロパティ",
+        "nf-processor-configuration.Comments": "コメント",
+        "nf-processor-configuration.ConfigureProcessor": "コンフィギュレーションプロセッサー",
+        "nf-processor-configuration.Debug": "デバッグ",
+        "nf-processor-configuration.Info": "情報",
+        "nf-processor-configuration.Warn": "警告",
+        "nf-processor-configuration.Error": "エラー",
+        "nf-processor-configuration.Apply": "アプリー",
+        "nf-processor-configuration.Cancel": "キャンセル",
+        "nf-processor-configuration.Advanced": "アドバンスド",
+        "nf-processor-configuration.Message7": "アドバンスド設定に入る前に、変更を保存しますか?",
+        "nf-processor.In": "入力",
+        "nf-processor.ReadWrite": "リード/ライト",
+        "nf-processor.Out": "出力",
+        "nf-processor.TasksTime": "タスク/時間",
+        "nf-processor.5min": "(5 分間)",
+        "nf-registration.Thanks": "ありがとうございました。",
+        "nf-registration.Message1": "您的リクエスト将被快速执行.",
+        "nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "コンフィギュレーションリモートプロセスグループ",
+        "nf-remote-process-group-configuration.Apply": "アプリー",
+        "nf-remote-process-group-configuration.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-remote-process-group-configuration.Cancel": "キャンセル",
+        "nf-remote-process-group-details.RemoteProcessGroupDetails": "リモートプロセスグループ詳細",
+        "nf-remote-process-group-details.Ok": "はい",
+        "nf-remote-process-group-ports.ConfigureRemotePort": "コンフィギュレーションリモートポート",
+        "nf-remote-process-group-ports.Apply": "アプリー",
+        "nf-remote-process-group-ports.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-remote-process-group-ports.Message1": "現在タスク要求整数值.",
+        "nf-remote-process-group-ports.Cancel": "キャンセル",
+        "nf-remote-process-group-ports.RemoteProcessGroupPorts": "リモートプロセスグループポート",
+        "nf-remote-process-group-ports.Close": "閉じる",
+        "nf-remote-process-group-ports.Message2": "説明がありません。",
+        "nf-remote-process-group.Message1": "コメントがありません。",
+        "nf-remote-process-group.Sent": "送信",
+        "nf-remote-process-group.Received": "受信",
+        "nf-remote-process-group.5min": "(5 分間)",
+        "nf-remote-process-group.Message2": "Site-to-Site は安全です。",
+        "nf-remote-process-group.Message3": "Site-to-Site は安全ではありません。",
+        "nf-remote-process-group.Message4": "現在、リモートフローは実行されていません。",
+        "nf-reporting-task.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-reporting-task.Message1": "コントローラーサービスに入る前に、設定を保存しますか。?",
+        "nf-reporting-task.Settings": "設定",
+        "nf-reporting-task.Properties": "プロパティ",
+        "nf-reporting-task.Comments": "コメント",
+        "nf-reporting-task.ConfigureReportingTask": "レポートタスクを設定します。",
+        "nf-reporting-task.Node": "ノード",
+        "nf-reporting-task.ClusterManager": "クラスターマネージャー",
+        "nf-reporting-task.TimerDriven": "時間ドライブ",
+        "nf-reporting-task.Message2": "レポートタスクは指定時間間隔で実行されます。",
+        "nf-reporting-task.CRONDriven": "CRONドライブ",
+        "nf-reporting-task.Message3": "レポートタスクはCRONコンフィギュレーションで実行されます。",
+        "nf-reporting-task.Apply": "アプリー",
+        "nf-reporting-task.Cancel": "キャンセル",
+        "nf-reporting-task.Advanced": "アドバンスド",
+        "nf-reporting-task.Message4": "アドバンスド設定に入る前に、変更を保存しますか?",
+        "nf-search.Search": "検索",
+        "nf-secure-port-configuration": "設定",
+        "nf-secure-port-configuration.AccessControl": "権限制御",
+        "nf-secure-port-configuration.ConfigureSecurePort": "コンフィギュレーションセキュリティポート",
+        "nf-secure-port-configuration.Apply": "アプリー",
+        "nf-secure-port-configuration.Cancel": "キャンセル",
+        "nf-secure-port-configuration.InputPort": "インプットポート",
+        "nf-secure-port-configuration.OutputPort": "アウトプットポート",
+        "nf-secure-port-details.Settings": "設定",
+        "nf-secure-port-details.AccessControl": "権限制御",
+        "nf-secure-port-details.SecurePortDetails": "セキュリティポート詳細",
+        "nf-secure-port-details.Ok": "はい",
+        "nf-settings.Filter": "フィルター",
+        "nf-settings.Message1": "スチームパッケージは正しく作成されました。",
+        "nf-settings.Message2": "設定は正しく適用されました。",
+        "nf-settings.Message3": "コントローラーサービスのタイプを選択すべきです。",
+        "nf-settings.Text": "ノード",
+        "nf-settings.ClusterManager": "クラスターマネージャー",
+        "nf-settings.Message4": "コントローラーサービスはノードで利用できます。",
+        "nf-settings.Message5": "コントローラーサービスはクラスターマネージャーで利用できます。",
+        "nf-settings.Message6": "説明情報がありません。",
+        "nf-settings.Message7": "コントローラーサービスを追加します。",
+        "nf-settings.Add": "追加",
+        "nf-settings.Cancel": "キャンセル",
+        "nf-settings.Node": "ノード",
+        "nf-settings": "クラスターマネージャー",
+        "nf-settings.ViewDetail": "詳細を確認します。",
+        "nf-settings.Disable": "ディセーブル",
+        "nf-settings.Enable": "イネーブル",
+        "nf-settings.Remove": "リムーブ",
+        "nf-settings.Usage": "用途",
+        "nf-settings.Name": "名称",
+        "nf-settings.State": "ステータス",
+        "nf-settings.Availability": "取得できます。",
+        "nf-settings.Message8": "レポートタスク仅ノードは取得できます。",
+        "nf-settings.Message9": "レポートタスククラスターマネージャーを取得する権限があります。",
+        "nf-settings.Type": "タイプ",
+        "nf-settings.Tags": "ラベル",
+        "nf-settings.Message10": "指定した説明がありません",
+        "nf-settings.Message11": "レポートタスクを追加します。",
+        "nf-settings.ViewDetails": "詳細を確認します。",
+        "nf-settings.Stop": "終了",
+        "nf-settings.Edit": "編集",
+        "nf-settings.Start": "開始",
+        "nf-settings.RunStatus": "実行ステータス",
+        "nf-settings.General": "共通",
+        "nf-settings.ControllerServices": "コントローラーサービス",
+        "nf-settings.ReportingTasks": "レポートタスク",
+        "nf-settings.Message12": "新しいコントローラーサービスを作成します",
+        "nf-settings.Message13": "新しいレポートタスクを作成します。",
+        "nf-settings.Settings": " 設定",
+        "nf-cluster.Cluster": " クラスター",
+        "nf-cluster-table.Filter": "フィルターを使います。",
+        "nf-cluster-table.Message1": "接続 \\'",
+        "nf-cluster-table.Message2": "\\' 当該クラスターにしますか?",
+        "nf-cluster-table.Message3": "切断 \\'",
+        "nf-cluster-table.Message4": "\\' 当該クラスターから　しますか?",
+        "nf-cluster-table.Message5": "リムーブ \\'",
+        "nf-cluster-table.Message6": "\\' 当該クラスターから　しますか?",
+        "nf-cluster-table.NodeDetails": "ノード詳細",
+        "nf-cluster-table.Ok": "はい",
+        "nf-cluster-table.ByAddress": "アドレスでフィルタリングします。",
+        "nf-cluster-table.ByStatus": "用ステータスフィルタリング",
+        "nf-cluster-table.ViewDetails": "詳細を確認します",
+        "nf-cluster-table.Node Address": "ノードアドレス",
+        "nf-cluster-table.ActiveThreadCount": "実行するスレッドの数",
+        "nf-cluster-table.Size": "サイズ",
+        "nf-cluster-table.Queue": "キューイング",                
+        "nf-cluster-table.Status": "ステータス",
+        "nf-cluster-table.Uptime": "実行時間",
+        "nf-cluster-table.LastHeartbeat": "最後のハートビート",
+        "nf-cluster-table.Connect": "接続",
+        "nf-cluster-table.Remove": "リムーブ",
+        "nf-cluster-table.Disconnect": "切断",
+        "nf-cluster-table.MakePrimary": "プライマリーにします。",
+        "nf-counters-table.Filter": "フィルター",
+        "nf-counters-table.ByName": "名称でフィルタリングします",
+        "nf-counters-table.ByContext": "コンテキストでフィルタリングします。",
+        "nf-counters-table.Context": "コンテキスト",
+        "nf-counters-table.Name": "名称",
+        "nf-counters-table.Value": "値",
+        "nf-counters-table.Reset": "リセット",
+        "nf-counters.Counters": " カウンター",
+        "nf-history-table.Filter": "フィルター",
+        "nf-history-table.ActionDetail": "動作詳細",
+        "nf-history-table.Ok": "はい",
+        "nf-history-table.ById": "IDでフィルタリングします。",
+        "nf-history-table.Message1": "コンポーネントIDに基づくフィルターは更新されました。",
+        "nf-history-table.ByUser": "ユーザーでフィルタリングします。",
+        "nf-history-table.Message2": "実行タスクに基づくユーザーのフィルター",
+        "nf-history-table.FilterHistory": "フィルター履歴",
+        "nf-history-table.Cancel": "キャンセル",
+        "nf-history-table.PurgeHistory": "履歴をクリアします。",
+        "nf-history-table.Purge": "クリア",
+        "nf-history-table.Message3": "履歴を削除してよろしいですか。 '",
+        "nf-history-table.Message3.1": "\\'\\?",
+        "nf-history-table.Message4": "終了日付は指定必須です。",
+        "nf-history-table.ViewDetails": "詳細を確認します",
+        "nf-history-table.DateTime": "日付/時間",
+        "nf-history-table.Name": "名称",
+        "nf-history-table.Type": "タイプ",
+        "nf-history-table.Operation": "操作",
+        "nf-history-table.User": "ユーザー",
+        "nf-history-table.Value": "値",
+        "nf-history-table.PreviousValue": "前の値",
+        "nf-history-table.SourceId": "ソースID",
+        "nf-history-table.SourceName": "ソース名称",
+        "nf-history-table.SourceType": "ソースタイプ",
+        "nf-history-table.Relationship": "リレーションシップ",
+        "nf-history-table.DestinationId": "デスティネーションID",
+        "nf-history-table.DestinationName": "デスティネーション名称",
+        "nf-history-table.DestinationType": "デスティネーションタイプ",
+        "nf-history-table.Group": "グループ",
+        "nf-history-table.GroupId": "グループID",
+        "nf-history-table.PreviousGroup": "前のグループ",
+        "nf-history-table.PreviousGroupId": "前グループID",
+        "nf-history-table.EndDate": "終了日付",
+        "nf-history-table.History": " 履歴",
+        "nf-common.sensitiveText": "敏感値の設定",
+        "nf-common.Message1": "異常が発生しました。",
+        "nf-common.Message2": "ログを確認してください。",
+        "nf-common.Message3": "データフローシステムにリンクできません。",
+        "nf-common.Message4": "ライセンスがありません。",
+        "nf-common.Message5": "データフローシステムのライセンスが必要です。",
+        "nf-common.Message6": "禁止",
+        "nf-common.Message7": "現在のデータフローシステムにライセンスを授与できません。",
+        "nf-common.Message9": "応用カーネルに通信できませんでした。再起動の前、ログを確認し、コンフィギュレーションエラーを修正してください。",
+        "nf-common.ParseError": "エラー分析",
+        "nf-common.Message10": "データフローからの返却を遮断できません。",
+        "nf-common.Message11": ": 異常で戻ります。",
+        "nf-common.Message12": "異常が発生しました。ログを確認してください。",
+        "nf-common.Message13": "値の設定がありません",
+        "nf-common.Message14": "文字列の設定は空きです。",
+        "nf-common.Message15": "ご利用のセッションはもうすぐに利用期限になります。自動ログオフされないように、再度ログインしてください。",
+        "nf-common.Message16": "現在ご利用の権限は限られています。権限のあるアカウントでログインしますか、あるいは権限のあるアカウントを申請してください。",
+        "nf-common.Message17": "ご利用のセッションは利用期限になっています。再度ロードし、新たにログインしてください。",
+        "nf-common.Message18": "ご利用のセッションは利用期限になっています。「はい」をクリックして、再度ログインしてください。",
+        "nf-common.Message19": "アプリーが実行されていることを確認し、ログを検査してください。",
+        "nf-common.Message20": "リクエストがタイムアウトになり、アプリーが実行されているかを確認し、ログを検査してください。",
+        "nf-common.Message21": "リクエストは終了されました。",
+        "nf-common.Message22": "リクエスト転送仕組みは失敗しました。アプリーが実行されており、アクセス権限を持つことを確認してください。",
+        "nf-common.SessionExpired": "リクエストがライムアウトです。",
+        "nf-common.AccessDenied": "権限を拒否します。",
+        "nf-common.DefaultValue": "デフォルト値:",   
+        "nf-common.SupportsExpressionLanuage":"対応する表現言語:",        
+        "nf-connection-details.FromProcessor": "プロセッサー",
+        "nf-connection-details.FromOutPut": "アウトプットから",
+        "nf-connection-details.FromInput": "インプットから",
+        "nf-connection-details.ToProcessor": "プロセッサーから",
+        "nf-connection-details.ToFunnel": "じょうごまで",
+        "nf-connection-details.ToInput": "インプットまで",
+        "nf-connection-details.ToOutput": "アウトプットまで",
+        "nf-connection-details.Details": "詳細",
+        "nf-connection-details.Settings": "設定",
+        "nf-connection-details.ConnectionDetails": "接続詳細",
+        "nf-connection-details.Ok": "はい",
+        "nf-dialog.Ok": "はい",
+        "nf-dialog.Yes": "はい",
+        "nf-dialog.No": "いいえ",
+        "nf-processor-details.Settings": "設定",
+        "nf-processor-details.Scheduling": "計画をスケジューリングしています。",
+        "nf-processor-details.Properties": "プロパティ",
+        "nf-processor-details.Comments": "コメント",
+        "nf-processor-details.ProcessorDetails": "プロセッサー詳細",
+        "nf-processor-details.Ok": "はい",
+        "nf-processor-details.Advanced": "アドバンスド",
+        "nf-status-history.StatusHistory":"ステータス履歴情報",        
+        "nf-status-history.Processor": "プロセッサー",
+        "nf-status-history.InputPort": "インプットポート",
+        "nf-status-history.OutputPort": "アウトプットポート",
+        "nf-status-history.ProcessGroup": "プロセスグループ",
+        "nf-status-history.RemoteProcessGroup": "リモートプロセスグループ",
+        "nf-status-history.Connection": "接続",
+        "nf-status-history.Funnel": "じょうご",
+        "nf-status-history.Template": "テンプレート",
+        "nf-status-history.Label": "ラベル",
+        "nf-status-history.Message":"十分の履歴情報がありません。後で試してください。",        
+        "nf-provenance.DataProvenance": " データソース",
+        "nf-provenance-lineage.Message1": "フローファイル関係を計算します...",
+        "nf-provenance-lineage.ViewDetails": "詳細を確認します",
+        "nf-provenance-lineage.Message2": "継承関係の検索は終わりましたが、結果が見つかりませんでした。イベントは期限になっている可能性があります。",
+        "nf-provenance-lineage.Find parents": "親を検索します",
+        "nf-provenance-lineage.Expand": "拡張",
+        "nf-provenance-lineage.Collapse": "崩溃",
+        "nf-provenance-lineage.Cancel": "キャンセル",
+        "nf-provenance-table.Filter": "フィルター",
+        "nf-provenance-table.Message": "最近の表示 ",
+        "nf-provenance-table.Of": " 中 ",
+        "nf-provenance-table.Events": " イベント. ",
+        "nf-provenance-table.Message4": " イベント、検索条件を修正してください。",
+        "nf-provenance-table.Showing": "表示 ",
+        "nf-provenance-table.Message5": " 検索条件に合致するイベント。検索条件を修正してください。 ",
+        "nf-provenance-table.Message6": "検索条件に合致するイベントです。 ",
+        "nf-provenance-table.Details": "詳細",
+        "nf-provenance-table.Attributes": "プロパティ",
+        "nf-provenance-table.Content": "コンテンツ",
+        "nf-provenance-table.ProvenanceEvent": "データソースイベント",
+        "nf-provenance-table.Ok": "はい",
+        "nf-provenance-table.Message1": "再生リクエストを正しくサミットしました。",
+        "nf-provenance-table.Message2": "検索イベント",
+        "nf-provenance-table.Search": "検索",
+        "nf-provenance-table.Message3": "データソースイベントを検索します...",
+        "nf-provenance-table.ByComponentName": "コンポーネント名でフィルタリングします",
+        "nf-provenance-table.ByComponentType": "コンポーネントタイプでフィルタリングします。",
+        "nf-provenance-table.ByType": "タイプフィルタリングで",
+        "nf-provenance-table.ByNode": "ノードフィルタリングで",
+        "nf-provenance-table.Cluster": "クラスター",
+        "nf-provenance-table.ViewDetail": "詳細を確認します",
+        "nf-provenance-table.ShowLineage": "継承関係を検査します。",
+        "nf-provenance-table.GoTo": "エントリー",
+        "nf-provenance-table.DateTime": "日付/時間",
+        "nf-provenance-table.Type": "タイプ",
+        "nf-provenance-table.FlowFileUuid": "フローファイル Uuid",
+        "nf-provenance-table.Size": "サイズ",
+        "nf-provenance-table.ComponentName": "コンポーネント名称",
+        "nf-provenance-table.ComponentType": "コンポーネントタイプ",
+        "nf-provenance-table.Node": "ノード",
+        "nf-provenance-table.Cancel": "キャンセル",
+        "nf-provenance-table.NoValueSet": "値がありません",
+        "nf-provenance-table.Claim": "アサーション",
+        "nf-provenance-table.InputClain": "インプットアサーション",
+        "nf-cluster-search.SelectNode": "ノード選択",
+        "nf-cluster-search.Ok": "はい",
+        "nf-cluster-search.Message1": "マッチングするノードがありません。 \\'",
+        "nf-cluster-search.Message2": "２つ以上のノードがマッチングします。 \\'",
+        "nf-cluster-search.Cancel": "キャンセル",
+        "nf-cluster-search.NiFiSumary": "データフローサマリー",
+        "nf-summary-table.Filter": "フィルター",
+        "nf-summary-table.Processors": "プロセッサー",
+        "nf-summary-table.Connections": "接続",
+        "nf-summary-table.InputPorts": "インプットポート",
+        "nf-summary-table.OutputPorts": "アウトプットポート",
+        "nf-summary-table.RemoteProcessGroups": "リモートプロセスグループ",
+        "nf-summary-table.ProcessGroups": "プロセスグループ",
+        "nf-summary-table.ByName": "名前でフィルタリングします",
+        "nf-summary-table.ByType": "タイプでフィルタリングします",
+        "nf-summary-table.BySource": "ソースでフィルタリングします",
+        "nf-summary-table.ByDestination": "ターゲットでフィルタリングします",
+        "nf-summary-table.ByUri": "uriでフィルタリングします",
+        "nf-summary-table.ViewDetail": "詳細を確認します",
+        "nf-summary-table.SourceName": "ソース名称",
+        "nf-summary-table.Name": "名称",
+        "nf-summary-table.RunStatus": "実行ステータス",
+        "nf-summary-table.In": "入力",
+        "nf-summary-table.Size": "サイズ",
+        "nf-summary-table.Message": "最後5分間の数 / データサイズ",
+        "nf-summary-table.Read": "リード",
+        "nf-summary-table.Write": "ライト",
+        "nf-summary-table.5min": "5分間",
+        "nf-summary-table.Message1": "最後5分間のデータ量",
+        "nf-summary-table.Out": "出力",
+        "nf-summary-table.Tasks": "タスク",
+        "nf-summary-table.Time": "時間",
+        "nf-summary-table.Message2": "最後5分間の数 / 延長期",
+        "nf-summary-table.Type": "タイプ",
+        "nf-summary-table.GoTo": "エントリー",
+        "nf-summary-table.ShowHistory": "履歴表示",
+        "nf-summary-table.ShowDetail": "詳細表示",
+        "nf-summary-table.ClusterProcessorSummary": "クラスタープロセッサーの一覧",
+        "nf-summary-table.Node": "ノード",
+        "nf-summary-table.Queue": "キュー",
+        "nf-summary-table.SourceName": "ソース名称",
+        "nf-summary-table.DestinationName": "ターゲット名称",
+        "nf-summary-table.ClusterConnectionSummary": "クラスター接続一覧",
+        "nf-summary-table.Close": "閉じる",
+        "nf-summary-table.Transferred": "転送終了",
+        "nf-summary-table.Message3": "最後5分間コネクターから送信する数 / データサイズ",
+        "nf-summary-table.Sent": "送信する",
+        "nf-summary-table.Received": "受信する",
+        "nf-summary-table.ClusterProcessGroupSummary": "クラスタープロセスグループ一覧",
+        "nf-summary-table.ClusterInputPortSummary": "クラスターインプットポート一覧",
+        "nf-summary-table.ClusterOutPutPortSummary": "クラスターアウトプットポート一覧",
+        "nf-summary-table.Transmitting": "変換中",
+        "nf-summary-table.Target URI": "ターゲット URI",
+        "nf-summary-table.ClusterRemoteProcessGroupSummary": "クラスターリモートプロセスグループ一覧",
+        "nf-summary-table.JVM": "Javaバーチャルマシン",
+        "nf-summary-table.System": "システム",
+        "nf-summary-table.SystemDiagnostics": "システム診断",
+        "nf-summary-table.Summary": " サマリー",
+        "nf-templates-table.Templates": " テンプレート",
+        "nf-templates-table.Message": "テンプレートを選択し、インポートします",
+        "nf-templates-table.Filter": "フィルタリング",
+        "nf-templates-table.Message1": "テンプレート削除 \"",
+        "nf-templates-table.ByName": "名称でフィルタリングします",
+        "nf-templates-table.ByDescription": "説明でフィルタリングします",
+        "nf-templates-table.RemovieTemplate": "テンプレートリムーブ",
+        "nf-templates-table.DateTime": "日付/時間",
+        "nf-templates-table.Name": "名称",
+        "nf-templates-table.Description": "説明",
+        "nf-users-table.Filter": "フィルタリング",
+        "nf-users-table.UserDetails": "ユーザー詳細",
+        "nf-users-table.Ok": "はい",
+        "nf-users-table.UserRoles": "ユーザーオール",
+        "nf-users-table.Apply": "アプリー",
+        "nf-users-table.Cancel": "キャンセル",
+        "nf-users-table.GroupRoles": "グループロール",
+        "nf-users-table.DeleteUser": "ユーザー削除",
+        "nf-users-table.Delete": "削除",
+        "nf-users-table.RevokeAccess": "権限を再度有効化します。",
+        "nf-users-table.Revoke": "再度有効化",
+        "nf-users-table.SetUserGroup": "ユーザーグループを設定します。",
+        "nf-users-table.Group": "グループ",
+        "nf-users-table.Message": "グループ名が空きになっていはいけません。",
+        "nf-users-table.ByUser": "ユーザーでフィルタリングします。",
+        "nf-users-table.ByGroup": "グループでフィルタリングします。",
+        "nf-users-table.ByRole": "ロールでフィルタリングします。",
+        "nf-users-table.AuthorizationPending": "ライセンスを授与しています。",
+        "nf-users-table.AccessRevoked": "権限は再度有効化されました。",
+        "nf-users-table.NoRolesSet": "設定されたロールがありません。",
+        "nf-users-table.Message1": "複数のユーザーの権限が異なります。",
+        "nf-users-table.Message2": "複数のユーザーのステータスが異なります。",
+        "nf-users-table.Message3": "ステータスが設定されていません。",
+        "nf-users-table.EditAccess": "権限編集",
+        "nf-users-table.RevokeAccess.Ungroup": "グループ離脱",
+        "nf-users-table.DeleteAccount": "アカウント削除",
+        "nf-users-table.User": "ユーザー",
+        "nf-users-table.Roles": "ロール",
+        "nf-users-table.LastAccessed": "最後アクセス",
+        "nf-users-table.Status": "ステータス",
+        "nf-users-table.GroupUsers": "グループ内のユーザー",
+        "nf-users-table.Message4": "１つあるいは複数のユーザーを選択します。",
+        "nf-users-table.Message5": "すべてのユーザーをグループからリムーブします。 \\'",
+        "nf-users-table.Message6": "削除 \\'",
+        "nf-users-table.Message7": "\\' グループから \\'",
+        "jquery-propertytable.SensitiveValueSet": "敏感値",
+        "jquery-propertytable.EmptyStringSet": "文字列は空きです。",
+        "jquery-propertytable.NoValueSet": "値がありません",
+        "jquery-propertytable.RequiredField": "必須のプロパティ",
+        "jquery-propertytable.Property": "プロパティ",
+        "jquery-propertytable.Value": "値",        
+        "jquery-propertytable.PropertyName": "プロパティ名称",
+        "jquery-propertytable.NewProperty": "プロパティ新規追加",        
+        "jquery-propertytable.Ok": "確認",        
+        "jquery-propertytable.Cancel": "キャンセル",
+        "jquery-propertytable.Empty": "空きの値",
+        "jquery-propertytable.ControllerService": "コントローラーサービス",
+        "jquery-propertytable.Tags": "ラベル",
+        "jquery-propertytable.Create": "作成",
+        "jquery-propertytable.Description": "説明",
+        "jquery-propertytable.Message": "プロパティがあります。",
+        "jquery-propertytable.Message1": "プロパティ名を指定しなければなりません。",
+        "jquery-propertytable.Message2": "当該プロパティに対応するコントローラーサービスがありません。",
+        "nf-actions.Header1": "アクティベーションコンポーネント",
+        "nf-actions.Header2": "オフラインコンポーネント",
+        "nf-actions.Header3": "コンポーネントの開始",
+        "nf-actions.Header4": "停止するコンポーネント",
+        "nf-actions.Header5": "リロード",
+        "nf-actions.Header6": "貼り付けエラー",
+        "nf-actions.CreateTemplate": "テンプレートを作成します。",
+        "nf-actions.Message13": "テンプレート名は空にすることはできません。",
+        "nf-actions.Message14": "パーセント完全な削除要求",
+        "nf-actions.Message15": "ストリーム・ファイル",
+        "nf-actions.Message16": "で",
+        "nf-actions.Message17": "外",
+        "nf-actions.Message18": "キューから削除しました。",
+        "nf-actions.Message19": "コンポーネントへの参照はありません。",
+        "nf-canvas-graph-controls-controller.ProcessGroup": "プロセッサ群",
+        "nf-canvas-graph-controls-controller.Processor": "プロセッサ",
+        "nf-canvas-graph-controls-controller.InputPort": "入力ポート",
+        "nf-canvas-graph-controls-controller.OutputPort": "出力ポート",
+        "nf-canvas-graph-controls-controller.RemoteProcessGroup": "リモートプロセスグループ",
+        "nf-canvas-graph-controls-controller.Funnel": "漏斗",
+        "nf-canvas-graph-controls-controller.Label": "ラベル",
+        "nf-canvas-graph-controls-controller.Connection": "接続",
+        "nf-canvas-graph-controls-controller.MultipleSelected": "選択した複数の",
+		"nf-canvas-global-menu-controller.About": "データストリームについて",
+		"nf-canvas-global-menu-controller.OK": "確認します",
+		"nf-canvas-operate-controller.SUCCESS": "サクセス",
+		"nf-canvas-operate-controller.SuccessContent": "テンプレートが正常にインポート。",
+		"nf-canvas-operate-controller.Upload": "アップロードテンプレート",
+		"nf-canvas-operate-controller.ButtonUpload": "アップロードテンプレート",
+		"nf-canvas-operate-controller.UploadTemplate": "テンプレートを選択していない。ブラウザでテンプレートを選択してください。",
+		"nf-canvas-operate-controller.Cancel": "キャンセル",
+		"nf-canvas-operate-controller.ChangeColor": "変色します",
+		"nf-canvas-operate-controller.Apply": "アプリケーション",
+		"nf-canvas-operate-controller.Error": "エラー",
+		"nf-canvas-operate-controller.CreateTemplate": "テンプレートを作成します。",
+		"nf-canvas-operate-controller.Message1": "テンプレートをインポートすることはできません。エラーのログを確認してください。",
+        "nf-canvas-flow-status.Processors": "プロセッサ",
+        "nf-canvas-flow-status.ProcessGroups": "治療群",
+        "nf-canvas-flow-status-controller.Processors": "プロセッサ",
+        "nf-canvas-flow-status-controller.ProcessGroups": "治療群",
+        "nf-canvas-flow-status-controller.RemoteProcessGroups": "リモート処理群",
+        "nf-canvas-flow-status-controller.Connection": "接続",
+        "nf-canvas-flow-status-controller.InputPorts": "入力ポート",
+        "nf-canvas-flow-status-controller.OutputPorts": "出力ポート",
+        "nf-canvas-flow-status-controller.Funnel": "漏斗",
+        "nf-canvas-flow-status-controller.no-matches": "結果は、クエリの要件を満たしていませんでした",
+		"nf-group-component.AddProcessGroup": "治療群を追加すること",
+		"nf-group-component.Add": "加えます",
+		"nf-group-component.Cancel": "キャンセル",
+		"nf-input-port-component.AddPort": "ポートを追加します。",
+		"nf-input-port-component.Add": "加えます",
+		"nf-input-port-component.Cancel": "キャンセル",
+		"nf-input-port-component.new-port-type": "エントリー",
+		"nf-output-port-component.Add": "加えます",
+		"nf-output-port-component.Cancel": "キャンセル",
+		"nf-output-port-component.new-port-type": "輸出",
+		"nf-processor-component.AddProcessor": "プロセッサを追加",
+		"nf-processor-component.AddProcessorContent": "このタイプの作成選択されているプロセッサを持っています。",
+		"nf-processor-component.Add": "加えます",
+		"nf-processor-component.Cancel": "キャンセル",
+		"nf-processor-component.Type": "タイプ",
+		"nf-processor-component.Tags": "标签",
+		"nf-processor-component.NoDescriptionSpecified": "説明が指定されていません",
+		"nf-remote-process-group-component.ConfigurationError": "設定エラー",
+		"nf-remote-process-group-component.AddRemoteProcessGroup": "リモートグループを追加します。",
+		"nf-remote-process-group-component.Add": "加えます",
+		"nf-remote-process-group-component.Cancel": "キャンセル",
+		"nf-template-component.AddTemplate": "テンプレートの追加",
+		"nf-template-component.Add": "加えます",
+		"nf-template-component.Cancel": "キャンセル",
+		"nf-template-component.InstantiateTemplate": "テンプレートのインスタンス化",
+		"nf-template-component.InstantiateTemplateContent": "いいえデータ・フロー・テンプレートがロードされません。",
+        "nf-canvas-header.components.AddGroup": "治療群を追加すること",
+        "nf-canvas-header.components.AddButton": "加えます",
+        "nf-canvas-header.components.CancelButton": "キャンセル",
+        "nf-canvas-utils.Header1": "治療群",
+        "nf-canvas-utils.Message7": "コンポーネントグループは、トップレベルでした",
+        "nf-canvas.ClusterConn": "クラスタ接続",
+        "nf-canvas.Message2": "このノードは、現在クラスタに接続されていません。ここでは、データストリームの任意の変更は、クラスタ内で複製されません。",
+        "nf-canvas.Message3": "これはただのクラスタノードに追加しました。ここでは、データストリームの任意の変更がクラスタ内で複製されます。",
+        "nf-component-state.Header1": "コンポーネントステータス",
+        "nf-component-state.Button1": "クローズ",
+        "nf-component-state.Content1": "コンポーネントは状態をクリアする必要はありません。",
+		"nf-component-state.Message1": "コンポーネントが活動を実行していないときは、コンポーネントのステータスはクリアのみ可能",
+		"nf-component-state.Key": "ボンド",
+		"nf-component-state.Value": "値",
+		"nf-component-state.Scope": "スコープ",
+		"nf-connection-configuration.ConnectionConfiguration": "接続形態",
+		"nf-connection-configuration.Message5": "許可されていない任意の出力ポート \\'",
+		"nf-connection.Connection": "接続",
+        "nf-connection.FlowFilesOlder": "ファイルには、流れを超えて",
+		"nf-context-menu.StatsHistory": "履歴状態",
+		"nf-context-menu.ViewState": "ビューステータス",
+		"nf-context-menu.QueueList": "キューリスト",
+		"nf-controller-service.ControllerService": "コントローラのサービス",
+		"nf-controller-service.Message14": "不正なコンポーネントを参照するため、無効にすることはできません。",
+		"nf-controller-service.Message15": "不正なコンポーネントを参照するため、有効にすることはできません。",
+		"nf-controller-service.Save": "保存",
+		"nf-controller-service.Message16": "変更を保存するには、サービスコントローラーに入る前に？",
+        "nf-controller-services.Add": "加えます",
+		"nf-controller-services.ControllerService": "コントローラのサービス",
+		"nf-controller-services.Message14": "あなたが作成するサービスコントローラーのタイプを選択する必要があります。",
+		"nf-controller-services.AddControllerService": "コントローラサービスを追加",
+		"nf-controller-services.Invalid": "失敗します",
+		"nf-controller-services.Disabled": "使用禁止",
+		"nf-controller-services.Disabling": "で無効に",
+		"nf-controller-services.Enabled": "使用可能",
+		"nf-controller-services.Enabling": "で有効に",
+		"nf-controller-services.toolTip": "発表の存在に基づいて並べ替え",
+		"nf-controller-services.Name": "名前",
+		"nf-controller-services.Type": "タイプ",
+		"nf-controller-services.Tags": "ラベル",
+		"nf-controller-services.State": "状態",
+		"nf-controller-services.ProcessGroup": "治療群",
+		"nf-controller-services.type-description": "説明が指定されていません",
+		"nf-controller-services.viewDtails": "詳細を参照してください。",
+		"nf-controller-services.usage": "使用法",
+		"nf-controller-services.disable": "無効にします",
+		"nf-controller-services.edit": "編集",
+		"nf-controller-services.enable": "有効にします",
+		"nf-controller-services.viewstate": "ビューステータス",
+		"nf-controller-services.remove": "削除します",
+		"nf-controller-services.acesspolicies": "アクセスポリシー",
+		"nf-custom-ui.AdvancedConfiguration": "高度な設定",
+		"nf-custom-ui.Message1": "設定ダイアログに高度なアクセスをアクセスするためのアクセストークンを生成することができません。",
+		"nf-draggable.ComponentPosition": "コンポーネント場所",
+		"nf-draggable.Message1": "無許可の変更先グループ。",
+		"nf-draggable.Message2": "各コンポーネントが承認される必要があり、変更を選択します。",
+        "nf-go-to.NoDownstreamComponents": "いいえ下流成分はありません",
+        "nf-go-to.NoUpstreamComponents": "いいえ、上流コンポーネントはありません",
+        "nf-go-to.Funnel": "漏斗",
+        "nf-label-configuration.ConfigureLabel": "[設定]タブ",
+		"nf-label-configuration.Apply": "アプリケーション",
+		"nf-label-configuration.Cancel": "キャンセル",
+		"nf-policy-management.ViewUserInterface": "ビューのユーザーインターフェイス",
+		"nf-policy-management.AcessController": "アクセスコントローラ",
+		"nf-policy-management.QueryProvenance": "発見源",
+		"nf-policy-management.AcessPolicies": "すべてのポリシーにアクセス",
+		"nf-policy-management.AcessUser": "アクセスユーザー/ユーザーグループ",
+		"nf-policy-management.retrieve": "詳しくは、情報検索サイト間",
+		"nf-policy-management.diagnostics": "ビューシステム解析",
+		"nf-policy-management.proxy": "プロキシユーザ要求",
+		"nf-policy-management.counters": "アクセスカウンター",
+		"nf-policy-management.ViewComponent": "ビューコンポーネント",
+		"nf-policy-management.ModifyComponent": "コンポーネントを変更",
+		"nf-policy-management.ViewData": "データを表示",
+		"nf-policy-management.ModifyData": "データを変更します",
+		"nf-policy-management.ReceiveData": "サイトにサイトを介してデータを受け取ります",
+		"nf-policy-management.SendData": "データを送信することによって、サイトへのサイト",
+		"nf-policy-management.ViewPolicies": "ビュー・ポリシー",
+		"nf-policy-management.ModifyPolicies": "ポリシーを変更",
+		"nf-policy-management.Searchusers": "検索ユーザー",
+		"nf-policy-management.Ok": "決定します",
+		"nf-policy-management.UserSearch": "ユーザーの検索します",
+		"nf-policy-management.Message1": "一致するユーザーません\\'",
+		"nf-policy-management.Message2": "複数のユーザーが一致します\\'",
+		"nf-policy-management.Cancel": "キャンセル",
+		"nf-policy-management.UpdatePolicy": "ポリシーを更新",
+		"nf-policy-management.Message3": "削除\\'",
+		"nf-policy-management.Message4": "\\'この戦略から？",
+		"nf-policy-management.Message5": "実際にこの戦略を削除したいですか？",
+		"nf-policy-management.Message6": "いいえ選択ポリシーはありません",
+		"nf-policy-management.Message7": "これにより、ユーザーはユーザーインターフェイスを表示することができ",
+		"nf-policy-management.Message8": "これにより、ユーザーは、クラスタ・レポート作成作業を含む/編集コントローラ、およびノードコントローラサービスを表示することができます",
+		"nf-policy-management.Message9": "ソースとユーザーがイベントを継承した検索要求を提出することができます",
+		"nf-policy-management.Message10": "ユーザーが表示することができます/すべてのコンポーネントのポリシーを変更",
+		"nf-policy-management.Message11": "これにより、ユーザーはユーザーグループを変更/表示することができます",
+		"nf-policy-management.Message12": "許可する他のデータを詳細にインスタンスが「サイトへのサイト」は、このデータストリームを取得するストリーム",
+		"nf-policy-management.Message13": "これにより、ユーザーは、システムの分析を表示することができます",
+		"nf-policy-management.Message14": "エージェントコンピュータが他人に代わって要求を送信する許可",
+		"nf-policy-management.Message15": "これにより、ユーザーは/編集カウンタを表示することができます",
+		"nf-policy-management.Message16": "ユーザーがコンポーネントの構成情報の詳細を表示することができます",
+		"nf-policy-management.Message17": "これは、ユーザがコンポーネントの設定情報の詳細を変更することができ",
+		"nf-policy-management.Message18": "これは、データソースとストリームファイルキュー内のアウトバウンド接続に、ユーザーがこのコンポーネントのメタデータとコンテンツを表示することができます",
+		"nf-policy-management.Message19": "これは、ユーザーがストリームファイルキューのアウトバウンド接続をクリアし、リプレイを提出することができます",
+		"nf-policy-management.Message20": "このポートは、データ・ストリーム・インスタンスからのデータを受信することを可能にします",
+		"nf-policy-management.Message21": "このポートは、データ・ストリーム・インスタンスにデータを送信することを可能にします",
+		"nf-policy-management.Message22": "これは、このコンポーネントのユーザーの見ることができます/編集するには、リストのユーザーが表示することができます",
+		"nf-policy-management.Message23": "ユーザーが表示することができます変更することができます/このコンポーネントのユーザーのリストを編集",
+		"nf-policy-management.Text1": "ディスプレイは、効果的な戦略を継承します",
+		"nf-policy-management.Text2": "いいえコンポーネント固有の管理者はありません。",
+		"nf-policy-management.Text3": "指定されたリソースポリシーへの不正なアクセス。",
+		"nf-policy-management.Text4": "ポリシーを表示する権限がありません。",
+		"nf-policy-management.Text5": "いいえ指定されたリソースポリシーはありません。",
+		"nf-policy-management.Text6": "指定されたリソースポリシーへの不正なアクセス。",
+		"nf-policy-management.Write": "書きます",
+		"nf-policy-management.Read": "読みます",
+		"nf-policy-management.View": "ビュー",
+		"nf-policy-management.Modify": "修正します",
+		"nf-policy-management.AllPolicies": "すべてのポリシー",
+		"nf-policy-management.Controller": "このコントローラ",
+		"nf-policy-management.ProcessorGroup": "治療群",
+		"nf-policy-management.reporting-tasks": "タスクを報告",
+		"nf-policy-management.NoUserSearch": "一致するユーザーません",
+		"nf-policy-management.Remove": "削除します",
+        "nf-process-group-configuration.General": "一般的な",
+        "nf-process-group-configuration.ControllerService": "コントローラのサービス",
+		"nf-processor-configuration.Error1": "同時タスクは整数値でなければなりません",
+		"nf-processor-configuration.Error2": "あなたは、事業計画を指定する必要があります。",
+		"nf-processor-configuration.Error3": "あなたは罰の期間を指定する必要があります",
+		"nf-processor-configuration.Error4": "あなたは、生産の継続時間を指定する必要があります",
+        "nf-processor-configuration.ThisProcessorHasNoRelationships": "このプロセッサは、重要ではありません。",
+        "nf-processor-configuration.ViewDetails": "詳細を参照してください。",
+        "nf-processor-configuration.Provenance": "ソース",
+        "nf-processor.5min-1": "5分",
+        "nf-queue-listing.QueueListing": "キューリスト",
+		"nf-queue-listing.Message1": "ダウンロード可能なコンテンツのアクセストークンを生成することができません。",
+		"nf-queue-listing.Message2": "アクセストークンを表示するためのコンテンツを生成することができません。",
+		"nf-queue-listing.Stop": "停止",
+		"nf-queue-listing.Message3": "キューは、ファイルをストリーミングしません.",
+		"nf-queue-listing.FlowFile": "ストリーム・ファイル",
+		"nf-queue-listing.Ok": "決定します",
+		"nf-queue-listing.Message4": "このキューのソースとターゲットは、現在実行されています。このリストは、もはや正確ではないかもしれません。",
+		"nf-queue-listing.Message5": "現在実行されているこのキューのソースは。このリストは、もはや正確ではないかもしれません。",
+		"nf-queue-listing.Message6": "このキューの目標は、この一覧は、もはや正確なものとすることができる。実行されていません。",
+		"nf-queue-listing.NoValueSet": "値が設定されていません",
+		"nf-queue-listing.Yes": "それは",
+		"nf-queue-listing.No": "いいえ",
+		"nf-queue-listing.Position": "場所",
+		"nf-queue-listing.FileName": "ファイル名",
+		"nf-queue-listing.FileSize": "ファイルサイズ",
+		"nf-queue-listing.queuedDuration": "待ち行列の長さ",
+		"nf-queue-listing.lineageDuration": "継承タイム",
+		"nf-queue-listing.penalized": "罰します",
+		"nf-queue-listing.node": "ノード",
+		"nf-queue-listing.Bytes": " バイト",
+		"nf-remote-process-group-configuration.Message5": "リモートプロセスグループの設定",
+		"nf-remote-process-group-ports.Message3": "このポートは削除されました。",
+		"nf-remote-process-group-ports.Message4": "同時タスクの数は、このポートのために計画する必要があります。",
+		"nf-remote-process-group-ports.transmissionSwitch": "スイッチポートの送信",
+		"nf-remote-process-group-ports.description": "指示に指定されていません。",
+        "nf-reporting-task.ReportingTask": "タスクを報告",
+		"nf-reporting-task.Save": "保存",
+		"nf-reporting-task.Ok": "決定します",
+        "nf-settings.ViewState": "ビューステータス",
+        "nf-settings.AccessPolicies": "アクセスポリシー",
+        "nf-settings.Invalid": "無効",
+        "nf-settings.Stopped": "停止",
+        "nf-settings.Running": "操作",
+        "nf-settings.Disabled": "無効にします",
+        "nf-cluster-table.None": "いいえ",
+        "nf-counters-table.Delete": "削除",
+        "nf-counters-table.Connect": "接続",
+        "nf-history.History": "歴史",
+		"nf-history-table.Message5": "IDベースのフィルタ修正コンポーネント",
+		"nf-history-table.Message6": "ユーザーのフィルタに基づいてアクションを実行",
+		"nf-history-table.NotAuthorized": "権限がありません",
+		"nf-history-table.Uri": "統一資源識別子",
+		"nf-history-table.EndTime": "終了時間",
+		"nf-login.Login": "ログイン",
+		"nf-login.Logining": "にログインしています...",
+		"nf-login.SUCCESS": "サクセス",
+		"nf-login.Denied": "ログインは拒否されました",
+		"nf-login.Message1": "サインインできません。",
+		"nf-login.Message2": "あなたがアクセス状態を確認することはできません",
+		"nf-login.Message3": "現在のデータ・ストリームは、ユーザー名/パスワードが設定されていません。",
+		"nf-common.History": "歴史",
+		"nf-common.SupportsExpressionLanguage": "式言語のサポート：",
+		"nf-common.Message23": "アプリケーションが実行されていることを確認し、ログにエラーがないかどうか確認してください。",
+		"nf-common.Message24": "データストリームと通信できません。",
+		"nf-common.Unauthorized": "権限がありません",
+		"nf-common.Message25": "このデータストリームを使用して認証を必要とします。",
+		"nf-common.Message26": "予期しないエラーが発生しました",
+		"nf-common.Error": "エラー",
+        "nf-common.Message27": "空の文字列を設定する前に",
+        "nf-common.Message28": "値は、前に設定されていません",
+        "nf-common.Bytes": " バイト",
+		"nf-connection-details.Processor": "プロセッサ",
+        "nf-connection-details.FromFunnel": "ホッパーから",
+        "nf-connection-details.NoValueSet": "決定します",
+		"nf-processor-details.Error": "エラー",
+		"nf-processor-details.ThisProcessorHasNoRelationships": "プロセッサは問題ではありません。",
+		"nf-status-history.Close": "クローズ",
+		"nf-status-history.Start": "始めます",
+		"nf-status-history.End": "終了",
+		"nf-status-history.Min_Max_Mean": "最低/最大/平均",
+		"nf-status-history.NiFi": "データ流",
+		"nf-provenance-lineage.Lineage Results": "血統結果",
+		"nf-provenance-lineage.Process Lineage": "連続プロセス",
+        "nf-provenance-table.InputClaim": "入力ステートメント",
+		"nf-provenance-table.Provenance": "ソース",
+		"nf-provenance-table.Message7": "アクセストークンを表示するためのコンテンツを生成することができません。",
+		"nf-provenance-table.Message8": "ダウンロード可能なコンテンツのアクセストークンを生成することができません。",
+		"nf-provenance-table.Message9": "いいえ値は以前に設定されていません",
+		"nf-provenance-table.Message10": "原因イベントを検索...",
+		"nf-provenance-table.Process": "進捗",
+		"nf-provenance-table.NoChildren": "子供なし",
+		"nf-provenance-table.NoParent": "いいえ両親はありません",
+		"nf-provenance-table.Bytes": " バイト",
+		"nf-cluster-search.Summary": "サマリー",
+		"nf-cluster-search.ClusterSearch": "クラスタ検索",
+        "nf-cluster-search.Message3": "検索用語に一致するノードなし",
+		"nf-summary-table.Message4": "アナウンスを選別の存在に基づいて",
+		"nf-summary-table.times": "回数",
+		"nf-summary-table.UsageFor": "使用法",
+		"nf-summary-table.GoToProcessor": "ステアリングプロセッサ",
+		"nf-summary-table.ViewStatus": "ビューステートの歴史",
+		"nf-summary-table.ViewProcessor": "ビュープロセッサの詳細",
+		"nf-summary-table.ViewConnect": "ビューの接続の詳細",
+		"nf-summary-table.GoToConnect": "ステアリング接続",
+		"nf-summary-table.GoToProcessorGroup": "ステアリングトリートメント",
+		"nf-summary-table.ViewProcessorGroup": "ビューは、詳細を扱わ",
+		"nf-summary-table.GoToInputPort": "ステアリング入力ポート",
+		"nf-summary-table.ViewInputPort": "入力ポートの詳細を見ます",
+		"nf-summary-table.GoToOutputPort": "ステアリング出力ポート",
+		"nf-summary-table.ViewOutputPort": "詳しくは、出力ポートを表示します",
+		"nf-summary-table.ViewRemoteProcessorGroup": "グループの詳細をリモーティングを参照してください。",
+		"nf-summary-table.aria1": "店が使用するデータ・フロー・リポジトリ",
+        "nf-summary.Summary": "サマリー",
+		"nf-templates-table.DeleteTemplate": "テンプレートを削除します",
+		"nf-templates-table.DownloadTemplate": "テンプレートのダウンロード",
+		"nf-templates-table.Message2": "ダウンロード可能なコンテンツのアクセストークンを生成することができません。",
+        "nf-templates-table.GroupId": "プロセスグループID",
+        "nf-templates-table.Download": "ダウンロード",
+        "nf-templates-table.AccessPolicies": "アクセスポリシー",
+        "nf-templates.Templates": "テンプレート",
+        "nf-users.Users": "ユーザー",
+		"nf-users-table.UserGroup": "ユーザ/グループ",
+		"nf-users-table.Edit": "編集",
+		"nf-users-table.Remove": "削除します",
+        "jquery-propertytable.Delete": "削除",
+        "jquery-propertytable.GoTo": "行きます",
+        "jquery-propertytable.SetEmptyString": "空の文字列を設定します",
+        "jquery-propertytable.AddControllerService": "コントローラサービスを追加",
+        "jquery-propertytable.AddProperty": "プロパティの追加",
+        "jquery-propertytable.PropertyExists": "プロパティが存在します",
+        "jquery-propertytable.Message0": "この名前のプロパティが既に存在しています。",
+        "jquery-propertytable.Message3": "新しいサービスを作成します...",
+        "slick.editors.Message1": "有効な整数を入力してください",
+        "slick.editors.Message2": "有効な正の数を入力してください。",
+        "slick.grid.Message1": "Slickgridは、有効なコンテナを必要とし、",
+        "slick.grid.Message2": "これは、DOMに存在しません",
+        "slick.grid.Message3": "スタイルシートを見つけることができません。",
+        "slick.grid.Message4": "細胞CSSスタイルを追加します：細胞CSSのハッシュキー'",
+        "slick.grid.Message5": "'すでに存在しています。",
+        "slick.grid.Message6": "ノードから取得部：ユニットを取得できません -",
+        "slick.grid.Message7": "Grid : アクティブセルが編集可能になります : options.editableへfalse時,あなたが呼ばれることはありません",
+        "slick.grid.Message8": "選択モデルが設定されていません",
+        "jquery-tagcloud.NoTagsSpecified": "タグ指定なし"
+    };
+    var en = {
+        "nf-about": "NiFi Flow",
+        "nf-bulletin-board.defaultFilterText": "Filter",
+        "nf-bulletin-board.ByMessage": "by message",
+        "nf-bulletin-board.ByName": "by name",
+        "nf-bulletin-board.ById": "by id",
+        "nf-bulletin-board.ByGroupId": "by group id",
+        "nf-bulletin-board.Message1": "Filter ",
+        "nf-bulletin-board.Message2": " matching \\\\'",
+        "nf-bulletin-board.Message3": "Auto refresh started",
+        "nf-bulletin-board.Message4": "Auto refresh stopped",
+        "nf-bulletin-board.BulletinBoard": " Bulletin Board",
+        "nf-actions.NoTargetURIDefined": "No target URI defined.",
+        "nf-actions.Message1": "No eligible components are selected. Please select the components to be enabled and ensure they are no longer running.",
+        "nf-actions.Message2": "No eligible components are selected. Please select the components to be disabled and ensure they are no longer running.",
+        "nf-actions.Message3": "No eligible components are selected. Please select the components to be started and ensure they are no longer running.",
+        "nf-actions.Message4": "No eligible components are selected. Please select the components to be stopped.",
+        "nf-actions.Message5": "No eligible components are selected. Please select the components to be deleted.",
+        "nf-actions.EmptyQueue": "Empty Queue",
+        "nf-actions.Message6": "Are you sure you want to empty this queue? All FlowFiles waiting at the time of the request will be removed.",
+        "nf-actions.Cancel": "Cancel",
+        "nf-actions.Empty": "Empty",
+        "nf-actions.Stop": "Stop",
+        "nf-actions.Message7": " were removed from the queue.",
+        "nf-actions.Message8": "No FlowFiles were removed.",
+        "nf-actions.Message9": "The current selection is not valid to create a template.",
+        "nf-actions.Create": "Create",
+        "nf-actions.Template": "Template '",
+        "nf-actions.Message11": "' was successfully created.",
+        "nf-actions.Message12": "An error occurred while attempting to copy and paste.",
+        "nf-canvas-toobbar.Start": "Start",
+        "nf-canvas-toobbar.Stop": "Stop",
+        "nf-canvas-toobbar.Copy": "Copy",
+        "nf-canvas-toobbar.Paste": "Paste",
+        "nf-canvas-toobbar.Group": "Group",
+        "nf-canvas-toobbar.Enable": "Enable",
+        "nf-canvas-toobbar.Disable": "Disable",
+        "nf-canvas-toobbar.CreateTemplate": "Create Template",
+        "nf-canvas-toobbar.ChangeColor": "Change Color",
+        "nf-canvas-toobbar.Delete": "Delete",
+        "nf-canvas-header.OK": "Ok",
+        "nf-canvas-header.CreateTemplate": "Create Template",
+        "nf-canvas-header.Fill": "Fill",
+        "nf-canvas-header.Apply": "Apply",
+        "nf-canvas-header.Cancel": "Cancel",
+        "nf-canvas-header.Message": "Unable to refresh the current group.",
+        "nf-canvas-toolbox.Input": "Input",
+        "nf-canvas-toolbox.OutPut": "Output",
+        "nf-canvas-toolbox.Filter": "Filter",
+        "nf-canvas-toolbox.Processor": "Processor",
+        "nf-canvas-toolbox.InputPort": "Input Port",
+        "nf-canvas-toolbox.OutputPort": "Output Port",
+        "nf-canvas-toolbox.ProcessGroup": "Process Group",
+        "nf-canvas-toolbox.RemoteProcessGroup": "Remote Process Group",
+        "nf-canvas-toolbox.Connection": "Connection",
+        "nf-canvas-toolbox.Funnel": "Funnel",
+        "nf-canvas-toolbox.Template": "Template",
+        "nf-canvas-toolbox.Label": "Label",
+        "nf-canvas-toolbox.Add": "Add",
+        "nf-canvas-toolbox.Cancel": "Cancel",
+        "nf-canvas-toolbox.Instantiate Template": "Instantiate Template",
+        "nf-canvas-toolbox.Message": "No templates have been loaded into this NiFi.",
+        "nf-canvas-toolbox.Type": "Type",
+        "nf-canvas-toolbox.Tags": "Tags",
+        "nf-canvas-toolbox.Message1": "No description specified",
+        "nf-canvas-toolbox.AddProcessor": "Add Processor",
+        "nf-canvas-toolbox.AddPort": "Add Port",
+        "nf-canvas-toolbox.AddProcessGroup": "Add Process Group",
+        "nf-canvas-toolbox.AddRemoteProcessGroup": "Add Remote Process Group",
+        "nf-canvas-utils.Message1": "Unable to load the group for the specified component.",
+        "nf-canvas-utils.Message2": "Unable to find the specified component.",
+        "nf-canvas-utils.Message3": "Unable to enter the selected group.",
+        "nf-canvas-utils.Message4": "Cannot move Ports out of the root group",
+        "nf-canvas-utils.Message5": "The following ports are currently connected outside of this group: <b>",
+        "nf-canvas-utils.Message6": "The following ports already exist in the target process group: <b>",
+        "nf-canvas.Browser": "Unsupported Browser",
+        "nf-canvas.Message1": "Flow graphs are shown using SVG. Please use a browser that supports rendering SVG.",
+        "nf-connection-configuration.Add": "Add",
+        "nf-connection-configuration.Message0": "The connection must have at least one relationship selected.",
+        "nf-connection-configuration.Cancel": "Cancel",
+        "nf-connection-configuration.Message1": "\\' does not support any relationships.",
+        "nf-connection-configuration.Message2": "\\' does not have any output ports.",
+        "nf-connection-configuration.Message4": "\\' does not have any input ports.",
+        "nf-connection-configuration.Message6": "Configuration Error",
+        "nf-connection-configuration.ConfigureConnection": "Configure Connection",
+        "nf-connection-configuration.Detail": "Details",
+        "nf-connection-configuration.Setting": "Settings",
+        "nf-connection-configuration.CreateConnection": "Create Connection",
+        "nf-connection-configuration.Apply": "Apply",
+        "nf-connection-configuration.Message7": "The connection must have at least one relationship selected.",
+        "nf-connection-configuration.Message8": "Configure Connection",
+        "nf-connection.Message1": "Looping connections must have at least two bend points.",
+        "nf-connection.From": "From",
+        "nf-connection.To": "To",
+        "nf-connection.Name": "Name",
+        "nf-connection.Queued": "Queued",
+        "nf-context-menu.RefreshStatus": "Refresh status",
+        "nf-context-menu.LeaveGroup": "Leave group",
+        "nf-context-menu.Configure": "Configure",
+        "nf-context-menu.ViewConfiguration": "View configuration",
+        "nf-context-menu.EnterGroup": "Enter group",
+        "nf-context-menu.Start": "Start",
+        "nf-context-menu.Stop": "Stop",
+        "nf-context-menu.RemotePorts": "Remote ports",
+        "nf-context-menu.EnableTransmission": "Enable transmission",
+        "nf-context-menu.DisableTransmission": "Disable transmission",
+        "nf-context-menu.Stats": "Stats",
+        "nf-context-menu.DataProvenance": "Data provenance",
+        "nf-context-menu.BringFront": "Bring to front",
+        "nf-context-menu.GoToSource": "Go to source",
+        "nf-context-menu.GoToDestination": "Go to destination",
+        "nf-context-menu.UpstreamConnections": "Upstream connections",
+        "nf-context-menu.DownstreamConnections": "Downstream connections",
+        "nf-context-menu.Usage": "Usage",
+        "nf-context-menu.Refresh": "Refresh",
+        "nf-context-menu.GoTo": "Go to",
+        "nf-context-menu.ChangeColor": "Change color",
+        "nf-context-menu.CenterInView": "Center in view",
+        "nf-context-menu.Copy": "Copy",
+        "nf-context-menu.Paste": "Paste",
+        "nf-context-menu.MoveParentGroup": "Move to parent group",
+        "nf-context-menu.EmptyQueue": "Empty queue",
+        "nf-context-menu.Delete": "Delete",
+        "nf-controller-service.ConfigurationError": "Configuration Error",
+        "nf-controller-service.Cancel": "Cancel",
+        "nf-controller-service.Close": "Close",
+        "nf-controller-service.Message1": "Steps to disable",
+        "nf-controller-service.ActionCanceled": "Action Canceled",
+        "nf-controller-service.Message2": "The request to disable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
+        "nf-controller-service.Message3": "Steps to enable ",
+        "nf-controller-service.Message4": "Action Canceled",
+        "nf-controller-service.Message5": "The request to enable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
+        "nf-controller-service.Message6": "Save changes before going to this Controller Service?",
+        "nf-controller-service.Settings": "Settings",
+        "nf-controller-service.Properties": "Properties",
+        "nf-controller-service.Comments": "Comments",
+        "nf-controller-service.Message7": "Configure Controller Service",
+        "nf-controller-service.Message8": "Disable Controller Service",
+        "nf-controller-service.Disable": "Disable",
+        "nf-controller-service.ServiceOnle": "Service only",
+        "nf-controller-service.Message9": "Enable only this controller service",
+        "nf-controller-service.Message10": "Service and referencing components",
+        "nf-controller-service.Message11": "Enable this controller service and enable/start all referencing components",
+        "nf-controller-service.Message12": "Enable Controller Service",
+        "nf-controller-service.Enable": "Enable",
+        "nf-controller-service.Apply": "Apply",
+        "nf-controller-service.Advanced": "Advanced",
+        "nf-controller-service.Message13": "Save changes before opening the advanced configuration?",
+        "nf-controller-service.Ok": "Ok",
+        "nf-go-to.Close": "Close",
+        "nf-go-to.DownstreamConnections": "Downstream Connections",
+        "nf-go-to.UpstreamConnections": "Upstream Connections",
+        "nf-go-to.Message1": "No upstream components",
+        "nf-go-to.Message2": "No downstream components",
+        "nf-port-configuration.ConfigurePort": "Configure Port",
+        "nf-port-configuration.Apply": "Apply",
+        "nf-port-configuration.ConfigurationError": "Configuration Error",
+        "nf-port-configuration.Cancel": "Cancel",
+        "nf-port-details.PortDetails": "Port Details",
+        "nf-port-details.OK": "Ok",
+        "nf-process-group-configuration.ConfigureProcessGroup": "Configure Process Group",
+        "nf-process-group-configuration.Apply": "Apply",
+        "nf-process-group-configuration.Cancel": "Cancel",
+        "nf-process-group-details.ProcessGroupDetails": "Process Group Details",
+        "nf-process-group-details.Ok": "Ok",
+        "nf-process-group.Message1": "No comments specified",
+        "nf-process-group.Queued": "Queued",
+        "nf-process-group.In": "In",
+        "nf-process-group.ReadWrite": "Read/Write",
+        "nf-process-group.Out": "Out",
+        "nf-process-group.5min": "(5 min)",
+        "nf-processor-configuration.TimerDriven": "Timer driven",
+        "nf-processor-configuration.Message1": "Processor will be scheduled to run on an interval defined by the run schedule.",
+        "nf-processor-configuration.EventDriven": "Event driven",
+        "nf-processor-configuration.Message2": "Processor will be scheduled to run when triggered by an event (e.g. a FlowFile enters an incoming queue). This scheduling strategy is experimental.",
+        "nf-processor-configuration.OnPrimaryNode": "On primary node",
+        "nf-processor-configuration.Message3": "Processor will be scheduled on the primary node on an interval defined by the run schedule.", "nf-processor-configuration.CronDriven": "CRON driven",
+        "nf-processor-configuration.Message5": "Processor will be scheduled to run on at specific times based on the specified CRON string.",
+        "nf-processor-configuration.ConfigurationError": "Configuration Error",
+        "nf-processor-configuration.Message6": "Save changes before going to this Controller Service?",
+        "nf-processor-configuration.Settings": "Settings",
+        "nf-processor-configuration.Scheduling": "Scheduling",
+        "nf-processor-configuration.Properties": "Properties",
+        "nf-processor-configuration.Comments": "Comments",
+        "nf-processor-configuration.ConfigureProcessor": "Configure Processor",
+        "nf-processor-configuration.Debug": "DEBUG",
+        "nf-processor-configuration.Info": "INFO",
+        "nf-processor-configuration.Warn": "WARN",
+        "nf-processor-configuration.Error": "ERROR",
+        "nf-processor-configuration.Apply": "Apply",
+        "nf-processor-configuration.Cancel": "Cancel",
+        "nf-processor-configuration.Advanced": "Advanced",
+        "nf-processor-configuration.Message7": "Save changes before opening the advanced configuration?",
+        "nf-processor.In": "In",
+        "nf-processor.ReadWrite": "Read/Write",
+        "nf-processor.Out": "Out",
+        "nf-processor.TasksTime": "Tasks/Time",
+        "nf-processor.5min": "(5 min)",
+        "nf-registration.Thanks": "Thanks",
+        "nf-registration.Message1": "Your request will be processed shortly.",
+        "nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "Configure Remote Process Group",
+        "nf-remote-process-group-configuration.Apply": "Apply",
+        "nf-remote-process-group-configuration.ConfigurationError": "Configuration Error",
+        "nf-remote-process-group-configuration.Cancel": "Cancel",
+        "nf-remote-process-group-details.RemoteProcessGroupDetails": "Remote Process Group Details",
+        "nf-remote-process-group-details.Ok": "Ok",
+        "nf-remote-process-group-ports.ConfigureRemotePort": "Configure Remote Port",
+        "nf-remote-process-group-ports.Apply": "Apply",
+        "nf-remote-process-group-ports.ConfigurationError": "Configuration Error",
+        "nf-remote-process-group-ports.Message1": "Concurrent tasks must be an integer value.",
+        "nf-remote-process-group-ports.Cancel": "Cancel",
+        "nf-remote-process-group-ports.RemoteProcessGroupPorts": "Remote Process Group Ports",
+        "nf-remote-process-group-ports.Close": "Close",
+        "nf-remote-process-group-ports.Message2": "No description specified.",
+        "nf-remote-process-group.Message1": "No comments specified",
+        "nf-remote-process-group.Sent": "Sent",
+        "nf-remote-process-group.Received": "Received",
+        "nf-remote-process-group.5min": "(5 min)",
+        "nf-remote-process-group.Message2": "Site-to-Site is secure.",
+        "nf-remote-process-group.Message3": "Site-to-Site is NOT secure.",
+        "nf-remote-process-group.Message4": "Remote flow not current",
+        "nf-reporting-task.ConfigurationError": "Configuration Error",
+        "nf-reporting-task.Message1": "Save changes before going to this Controller Service?",
+        "nf-reporting-task.Settings": "Settings",
+        "nf-reporting-task.Properties": "Properties",
+        "nf-reporting-task.Comments": "Comments",
+        "nf-reporting-task.ConfigureReportingTask": "Configure Reporting Task",
+        "nf-reporting-task.Node": "Node",
+        "nf-reporting-task.ClusterManager": "Cluster Manager",
+        "nf-reporting-task.TimerDriven": "Timer driven",
+        "nf-reporting-task.Message2": "Reporting task will be scheduled to run on an interval defined by the run schedule.",
+        "nf-reporting-task.CRONDriven": "CRON driven",
+        "nf-reporting-task.Message3": "Reporting task will be scheduled to run on at specific times based on the specified CRON string.",
+        "nf-reporting-task.Apply": "Apply",
+        "nf-reporting-task.Cancel": "Cancel",
+        "nf-reporting-task.Advanced": "Advanced",
+        "nf-reporting-task.Message4": "Save changes before opening the advanced configuration?",
+        "nf-search.Search": "Search",
+        "nf-secure-port-configuration": "Settings",
+        "nf-secure-port-configuration.AccessControl": "Access Control",
+        "nf-secure-port-configuration.ConfigureSecurePort": "Configure Secure Port",
+        "nf-secure-port-configuration.Apply": "Apply",
+        "nf-secure-port-configuration.Cancel": "Cancel",
+        "nf-secure-port-configuration.InputPort": "InputPort",
+        "nf-secure-port-configuration.OutputPort": "OutputPort",
+        "nf-secure-port-details.Settings": "Settings",
+        "nf-secure-port-details.AccessControl": "Access Control",
+        "nf-secure-port-details.SecurePortDetails": "Secure Port Details",
+        "nf-secure-port-details.Ok": "Ok",
+        "nf-settings.Filter": "Filter",
+        "nf-settings.Message1": "A new flow archive was successfully created.",
+        "nf-settings.Message2": "Settings successfully applied.",
+        "nf-settings.Message3": "The type of controller service to create must be selected.",
+        "nf-settings.Text": "Node",
+        "nf-settings.ClusterManager": "Cluster Manager",
+        "nf-settings.Message4": "This controller service will be available on the nodes only.",
+        "nf-settings.Message5": "This controller service will be available on the cluster manager only.",
+        "nf-settings.Message6": "No description specified",
+        "nf-settings.Message7": "Add Controller Service",
+        "nf-settings.Add": "Add",
+        "nf-settings.Cancel": "Cancel",
+        "nf-settings.Node": "Node",
+        "nf-settings": "Cluster Manager",
+        "nf-settings.ViewDetail": "View Details",
+        "nf-settings.Disable": "Disable",
+        "nf-settings.Enable": "Enable",
+        "nf-settings.Remove": "Remove",
+        "nf-settings.Usage": "Usage",
+        "nf-settings.Name": "Name",
+        "nf-settings.State": "State",
+        "nf-settings.Availability": "Availability",
+        "nf-settings.Message8": "This reporting task will be available on the nodes only.",
+        "nf-settings.Message9": "This reporting task will be available on the cluster manager only.",
+        "nf-settings.Type": "Type",
+        "nf-settings.Tags": "Tags",
+        "nf-settings.Message10": "No description specified",
+        "nf-settings.Message11": "Add Reporting Task",
+        "nf-settings.ViewDetails": "View Details",
+        "nf-settings.Stop": "Stop",
+        "nf-settings.Edit": "Edit",
+        "nf-settings.Start": "Start",
+        "nf-settings.RunStatus": "Run Status",
+        "nf-settings.General": "General",
+        "nf-settings.ControllerServices": "Controller Services",
+        "nf-settings.ReportingTasks": "Reporting Tasks",
+        "nf-settings.Message12": "Create a new controller service",
+        "nf-settings.Message13": "Create a new reporting task",
+        "nf-settings.Settings": " Settings",
+        "nf-cluster-table.Filter": "Filter",
+        "nf-cluster-table.Message1": "Connect \\'",
+        "nf-cluster-table.Message2": "\\' to this cluster?",
+        "nf-cluster-table.Message3": "Disconnect \\'",
+        "nf-cluster-table.Message4": "\\' from the cluster?",
+        "nf-cluster-table.Message5": "Remove \\'",
+        "nf-cluster-table.Message6": "\\' from the cluster?",
+        "nf-cluster-table.NodeDetails": "Node Details",
+        "nf-cluster-table.Ok": "Ok",
+        "nf-cluster-table.ByAddress": "by address",
+        "nf-cluster-table.ByStatus": "by status",
+        "nf-cluster-table.ViewDetails": "View Details",
+        "nf-cluster-table.Node Address": "Node Address",
+        "nf-cluster-table.ActiveThreadCount": "Active Thread Count",
+        "nf-cluster-table.Size": "Size",
+        "nf-cluster-table.Queue": "Queue",        
+        "nf-cluster-table.Status": "Status",
+        "nf-cluster-table.Uptime": "Uptime",
+        "nf-cluster-table.LastHeartbeat": "Last Heartbeat",
+        "nf-cluster-table.Connect": "Connect",
+        "nf-cluster-table.Remove": "Remove",
+        "nf-cluster-table.Disconnect": "Disconnect",
+        "nf-cluster-table.MakePrimary": "Make Primary",
+        "nf-counters-table.Filter": "Filter",
+        "nf-counters-table.ByName": "by name",
+        "nf-counters-table.ByContext": "by context",
+        "nf-counters-table.Context": "Context",
+        "nf-counters-table.Name": "Name",
+        "nf-counters-table.Value": "Value",
+        "nf-counters-table.Reset": "Reset",
+        "nf-counters.Counters": " Counters",
+        "nf-history-table.Filter": "Filter",
+        "nf-history-table.ActionDetail": "Action Details",
+        "nf-history-table.Ok": "Ok",
+        "nf-history-table.ById": "by id",
+        "nf-history-table.Message1": "Filters based on the id of the component that was modified",
+        "nf-history-table.ByUser": "by user",
+        "nf-history-table.Message2": "Filters based on the user that performed the action",
+        "nf-history-table.FilterHistory": "Filter History",
+        "nf-history-table.Cancel": "Cancel",
+        "nf-history-table.PurgeHistory": "Purge History",
+        "nf-history-table.Purge": "Purge",
+        "nf-history-table.Message3": "Are you sure you want to delete all history before '",
+        "nf-history-table.Message3.1": "\\'?",
+        "nf-history-table.Message4": "The end date must be specified.",
+        "nf-history-table.ViewDetails": "View Details",
+        "nf-history-table.DateTime": "Date/Time",
+        "nf-history-table.Name": "Name",
+        "nf-history-table.Type": "Type",
+        "nf-history-table.Operation": "Operation",
+        "nf-history-table.User": "User",
+        "nf-history-table.Value": "Value",
+        "nf-history-table.PreviousValue": "Previous Value",
+        "nf-history-table.SourceId": "Source Id",
+        "nf-history-table.SourceName": "Source Name",
+        "nf-history-table.SourceType": "Source Type",
+        "nf-history-table.Relationship": "Relationship(s)",
+        "nf-history-table.DestinationId": "Destination Id",
+        "nf-history-table.DestinationName": "Destination Name",
+        "nf-history-table.DestinationType": "Destination Type",
+        "nf-history-table.Group": "Group",
+        "nf-history-table.GroupId": "GroupId",
+        "nf-history-table.PreviousGroup": "Previous Group",
+        "nf-history-table.PreviousGroupId": "Previous Group Id",
+        "nf-history-table.EndDate": "End Date",
+        "nf-history-table.History": " History",
+        "nf-common.sensitiveText": "Sensitive value set",
+        "nf-common.Message1": "An unexpected error has occurred",
+        "nf-common.Message2": "Please check the logs.",
+        "nf-common.Message3": "Unable to communicate with NiFi",
+        "nf-common.Message4": "Unauthorized",
+        "nf-common.Message5": "Authorization is required to use this NiFi.",
+        "nf-common.Message6": "Forbidden",
+        "nf-common.Message7": "Unable to authorize you to use this NiFi.",
+        "nf-common.Message9": "An error occurred communicating with the application core. Please check the logs and fix any configuration issues before restarting.",
+        "nf-common.ParseError": "Parse Error",
+        "nf-common.Message10": "Unable to interpret response from NiFi.",
+        "nf-common.Message11": ": Unexpected Response",
+        "nf-common.Message12": "An unexpected error has occurred. Please check the logs.",
+        "nf-common.Message13": "No value set",
+        "nf-common.Message14": "Empty string set",
+        "nf-common.Message15": "Your session will expire soon. Please log in again to avoid being automatically logged out.",
+        "nf-common.Message16": "You are accessing with limited authority. Log in or request an account to access with additional authority granted to you by an administrator.",
+        "nf-common.Message17": "Your session has expired. Please reload to log in again.",
+        "nf-common.Message18": "Your session has expired. Please press Ok to log in again.",
+        "nf-common.Message19": "Please ensure the application is running and check the logs for any errors.",
+        "nf-common.Message20": "Request has timed out. Please ensure the application is running and check the logs for any errors.",
+        "nf-common.Message21": "Request has been aborted.",
+        "nf-common.Message22": "Request transport mechanism failed. Please ensure the host where the application is running is accessible.",
+        "nf-common.SessionExpired": "Session Expired",
+        "nf-common.AccessDenied": "Access Denied",
+        "nf-common.DefaultValue": "Default value:",
+        "nf-common.SupportsExpressionLanuage":"Supports expression language:",
+        "nf-connection-details.FromProcessor": "From processor",
+        "nf-connection-details.FromOutPut": "From output",
+        "nf-connection-details.FromInput": "From input",
+        "nf-connection-details.ToProcessor": "To processor",
+        "nf-connection-details.ToFunnel": "To funnel",
+        "nf-connection-details.ToInput": "To input",
+        "nf-connection-details.ToOutput": "To output",
+        "nf-connection-details.Details": "Details",
+        "nf-connection-details.Settings": "Settings",
+        "nf-connection-details.ConnectionDetails": "Connection Details",
+        "nf-connection-details.Ok": "Ok",
+        "nf-dialog.Ok": "Ok",
+        "nf-dialog.Yes": "Yes",
+        "nf-dialog.No": "No",
+        "nf-processor-details.Settings": "Settings",
+        "nf-processor-details.Scheduling": "Scheduling",
+        "nf-processor-details.Properties": "Properties",
+        "nf-processor-details.Comments": "Comments",
+        "nf-processor-details.ProcessorDetails": "Processor Details",
+        "nf-processor-details.Ok": "Ok",
+        "nf-processor-details.Advanced": "Advanced",
+        "nf-status-history.StatusHistory":"Status History",
+        "nf-status-history.Processor": "Processor",
+        "nf-status-history.InputPort": "Input Port",
+        "nf-status-history.OutputPort": "Output Port",
+        "nf-status-history.ProcessGroup": "Process Group",
+        "nf-status-history.RemoteProcessGroup": "Remote Process Group",
+        "nf-status-history.Connection": "Connection",
+        "nf-status-history.Funnel": "Funnel",
+        "nf-status-history.Template": "Template",
+        "nf-status-history.Label": "Label",
+        "nf-status-history.Message":"Insufficient history, please try again later.",
+        "nf-provenance.DataProvenance": " Data Provenance",
+        "nf-provenance-lineage.Message1": "Computing FlowFile lineage...",
+        "nf-provenance-lineage.ViewDetails": "View details",
+        "nf-provenance-lineage.Message2": "The lineage search has completed successfully but there no results were found. The events may have aged off.",
+        "nf-provenance-lineage.Find parents": "Find parents",
+        "nf-provenance-lineage.Expand": "Expand",
+        "nf-provenance-lineage.Collapse": "Collapse",
+        "nf-provenance-lineage.Cancel": "Cancel",
+        "nf-provenance-table.Filter": "Filter",
+        "nf-provenance-table.Message": "Showing the most recent ",
+        "nf-provenance-table.Of": " of ",
+        "nf-provenance-table.Events": "events.",
+        "nf-provenance-table.Message4": " events, please refine the search.",
+        "nf-provenance-table.Showing": "Showing ",
+        "nf-provenance-table.Message5": " events that match the specified query, please refine the search.",
+        "nf-provenance-table.Message6": "the events that match the specified query.",
+        "nf-provenance-table.Details": "Details",
+        "nf-provenance-table.Attributes": "Attributes",
+        "nf-provenance-table.Content": "Content",
+        "nf-provenance-table.ProvenanceEvent": "Provenance Event",
+        "nf-provenance-table.Ok": "Ok",
+        "nf-provenance-table.Message1": "Successfully submitted replay request.",
+        "nf-provenance-table.Message2": "Search Events",
+        "nf-provenance-table.Search": "Search",
+        "nf-provenance-table.Message3": "Searching provenance events...",
+        "nf-provenance-table.ByComponentName": "by component name",
+        "nf-provenance-table.ByComponentType": "by component type",
+        "nf-provenance-table.ByType": "by type",
+        "nf-provenance-table.ByNode": "by node",
+        "nf-provenance-table.Cluster": "cluster",
+        "nf-provenance-table.ViewDetail": "View Details",
+        "nf-provenance-table.ShowLineage": "Show Lineage",
+        "nf-provenance-table.GoTo": "Go To",
+        "nf-provenance-table.DateTime": "Date/Time",
+        "nf-provenance-table.Type": "Type",
+        "nf-provenance-table.FlowFileUuid": "FlowFile Uuid",
+        "nf-provenance-table.Size": "Size",
+        "nf-provenance-table.ComponentName": "Component Name",
+        "nf-provenance-table.ComponentType": "Component Type",
+        "nf-provenance-table.Node": "Node",
+        "nf-provenance-table.Cancel": "Cancel",
+        "nf-provenance-table.NoValueSet": "No value set",
+        "nf-provenance-table.Claim": "Claim",
+        "nf-provenance-table.InputClain": "Input Claim",
+        "nf-cluster-search.SelectNode": "Select node",
+        "nf-cluster-search.Ok": "Ok",
+        "nf-cluster-search.Message1": "No nodes match \\'",
+        "nf-cluster-search.Message2": "More than one node matches \\'",
+        "nf-cluster-search.Cancel": "Cancel",
+        "nf-cluster-search.NiFiSumary": "NiFi Summary",
+        "nf-summary-table.Filter": "Filter",
+        "nf-summary-table.Processors": "Processors",
+        "nf-summary-table.Connections": "Connections",
+        "nf-summary-table.InputPorts": "Input Ports",
+        "nf-summary-table.OutputPorts": "Output Ports",
+        "nf-summary-table.RemoteProcessGroups": "Remote Process Groups",
+        "nf-summary-table.ProcessGroups": "Process Groups",
+        "nf-summary-table.ByName": "by name",
+        "nf-summary-table.ByType": "by type",
+        "nf-summary-table.BySource": "by source",
+        "nf-summary-table.ByDestination": "by destination",
+        "nf-summary-table.ByUri": "by uri",
+        "nf-summary-table.ViewDetail": "View Details",
+        "nf-summary-table.SourceName": "Source Name",
+        "nf-summary-table.Name": "Name",
+        "nf-summary-table.RunStatus": "Run Status",
+        "nf-summary-table.In": "In",
+        "nf-summary-table.Size": "Size",
+        "nf-summary-table.Message": "Count / data size in the last 5 min",
+        "nf-summary-table.Read": "Read",
+        "nf-summary-table.Write": "Write",
+        "nf-summary-table.5min": "5 min",
+        "nf-summary-table.Message1": "Data size in the last 5 min",
+        "nf-summary-table.Out": "Out",
+        "nf-summary-table.Tasks": "Tasks",
+        "nf-summary-table.Time": "Time",
+        "nf-summary-table.Message2": "Count / duration in the last 5 min",
+        "nf-summary-table.Type": "Type",
+        "nf-summary-table.GoTo": "Go To",
+        "nf-summary-table.ShowHistory": "Show History",
+        "nf-summary-table.ShowDetail": "Show Details",
+        "nf-summary-table.ClusterProcessorSummary": "Cluster Processor Summary",
+        "nf-summary-table.Node": "Node",
+        "nf-summary-table.Queue": "Queue",
+        "nf-summary-table.SourceName": "SourceName",
+        "nf-summary-table.DestinationName": "Destination Name",
+        "nf-summary-table.ClusterConnectionSummary": "Cluster Connection Summary",
+        "nf-summary-table.Close": "Close",
+        "nf-summary-table.Transferred": "Transferred",
+        "nf-summary-table.Message3": "Count / data size transferred to and from connections in the last 5 min",
+        "nf-summary-table.Sent": "Sent",
+        "nf-summary-table.Received": "Received",
+        "nf-summary-table.ClusterProcessGroupSummary": "Cluster Process Group Summary",
+        "nf-summary-table.ClusterInputPortSummary": "Cluster Input Port Summary",
+        "nf-summary-table.ClusterOutPutPortSummary": "Cluster Output Port Summary",
+        "nf-summary-table.Transmitting": "Transmitting",
+        "nf-summary-table.Target URI": "Target URI",
+        "nf-summary-table.ClusterRemoteProcessGroupSummary": "Cluster Remote Process Group Summary",
+        "nf-summary-table.JVM": "JVM",
+        "nf-summary-table.System": "System",
+        "nf-summary-table.SystemDiagnostics": "System Diagnostics",
+        "nf-summary-table.Summary": " Summary",
+        "nf-templates-table.Templates": " Templates",
+        "nf-templates-table.Message": " Select template to import",
+        "nf-templates-table.Filter": "Filter",
+        "nf-templates-table.Message1": "Delete template \'",
+        "nf-templates-table.ByName": "by name",
+        "nf-templates-table.ByDescription": "by description",
+        "nf-templates-table.RemovieTemplate": "Remove Template",
+        "nf-templates-table.DateTime": "Date/Time",
+        "nf-templates-table.Name": "Name",
+        "nf-templates-table.Description": "Description",
+        "nf-users-table.Users.Title": " Users",
+        "nf-users-table.Filter": "Filter",
+        "nf-users-table.UserDetails": "User Details",
+        "nf-users-table.Ok": "Ok",
+        "nf-users-table.UserRoles": "User Roles",
+        "nf-users-table.Apply": "Apply",
+        "nf-users-table.Cancel": "Cancel",
+        "nf-users-table.GroupRoles": "Group Roles",
+        "nf-users-table.DeleteUser": "Delete User",
+        "nf-users-table.Delete": "Delete",
+        "nf-users-table.RevokeAccess": "Revoke Access",
+        "nf-users-table.Revoke": "Revoke",
+        "nf-users-table.SetUserGroup": "Set Users Group",
+        "nf-users-table.Group": "Group",
+        "nf-users-table.Message": "Group name cannot be blank.",
+        "nf-users-table.ByUser": "by user",
+        "nf-users-table.ByGroup": "by group",
+        "nf-users-table.ByRole": "by role",
+        "nf-users-table.AuthorizationPending": "Authorization Pending",
+        "nf-users-table.AccessRevoked": "Access Revoked",
+        "nf-users-table.NoRolesSet": "No roles set",
+        "nf-users-table.Message1": "Multiple users with different roles",
+        "nf-users-table.Message2": "Multiple users with different status",
+        "nf-users-table.Message3": "No status set",
+        "nf-users-table.EditAccess": "Edit Access",
+        "nf-users-table.RevokeAccess.Ungroup": "Ungroup",
+        "nf-users-table.DeleteAccount": "Delete Account",
+        "nf-users-table.User": "User",
+        "nf-users-table.Roles": "Roles",
+        "nf-users-table.LastAccessed": "Last Accessed",
+        "nf-users-table.Status": "Status",
+        "nf-users-table.GroupUsers": "Group Users",
+        "nf-users-table.Message4": "Select one or more users to group.",
+        "nf-users-table.Message5": "Remove all users from group \\'",
+        "nf-users-table.Message6": "Remove user \\'",
+        "nf-users-table.Message7": "\\' from group \\'",
+        "jquery-propertytable.SensitiveValueSet": "Sensitive value set",
+        "jquery-propertytable.EmptyStringSet": "Empty string set",
+        "jquery-propertytable.NoValueSet": "no value set",
+        "jquery-propertytable.RequiredField": "Required field",
+        "jquery-propertytable.Property": "Property",
+        "jquery-propertytable.Value": "Value",
+        "jquery-propertytable.Ok": "Ok",        
+        "jquery-propertytable.Cancel": "Cancel",   
+        "jquery-propertytable.Empty": "Empty",        
+        "jquery-propertytable.NewProperty": "New property",
+        "jquery-propertytable.ControllerService" : "Controller Service",
+        "jquery-propertytable.Tags" : "Tags",
+        "jquery-propertytable.Create" : "Create",
+        "jquery-propertytable.Description" : "Description",
+        "jquery-propertytable.Message": "A property with this name already exists.",
+        "jquery-propertytable.Message1": "Property name must be specified.",
+        "jquery-propertytable.Message2": "No controller service types found that are applicable for this property."
+    };
+
+    return {
+        msg: function (key) {
+            if (locale === "en") {
+                return en[key];
+            }
+            if ((locale === "cn")) {
+                return cn[key];
+            }
+            if ((locale === "jp")) {
+                return jp[key];
+            }
+        }
+    };
+})();
+

From 216d4d84d67dba21ab76264c14ee1221c8c654dc Mon Sep 17 00:00:00 2001
From: WangJian <1925432244@qq.com>
Date: Sun, 19 Mar 2017 10:33:28 +0800
Subject: [PATCH 06/13] NIFI-3603:Add the *.properties file

---
 .../src/main/java/Messages_cn.properties      | 785 +++++++++++++++++
 .../src/main/java/Messages_en.properties      | 788 ++++++++++++++++++
 .../src/main/java/Messages_jp.properties      | 743 +++++++++++++++++
 3 files changed, 2316 insertions(+)
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_cn.properties
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_en.properties
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_jp.properties

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_cn.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_cn.properties
new file mode 100644
index 000000000000..b4b8abc81e29
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_cn.properties
@@ -0,0 +1,785 @@
+#-------------------------------------------------
+# pages
+# login
+pages.login.title=\u6570\u636e\u6d41\u767b\u5f55
+# bulletin-board
+pages.bulletin-board.title=\u6570\u636e\u6d41\u516c\u544a\u677f
+#-------------------------------------------------
+# pages
+# canvas
+pages.canvas.title=\u6570\u636e\u6d41
+#-------------------------------------------------
+# pages
+# cluster
+pages.cluster.title=\u6570\u636e\u6d41\u96c6\u7fa4
+#-------------------------------------------------
+# pages
+# counters
+pages.counters.title=\u6570\u636e\u6d41\u8ba1\u6570\u5668
+#-------------------------------------------------
+# pages
+# history
+pages.history.title=\u6570\u636e\u6d41\u5386\u53f2\u4fe1\u606f
+#-------------------------------------------------
+# pages
+# message-page
+
+#-------------------------------------------------
+# pages
+# provenance
+pages.provenance.title=\u6570\u636e\u6d41\u6765\u6e90
+#-------------------------------------------------
+# pages
+# summary
+pages.summary.title=\u6570\u636e\u6d41\u603b\u89c8
+#-------------------------------------------------
+# pages
+# templates
+pages.templates.title=\u6570\u636e\u6d41\u6a21\u7248
+#-------------------------------------------------
+# pages
+# users
+pages.users.title=\u6570\u636e\u6d41\u7528\u6237\u7ba1\u7406
+
+#-------------------------------------------------
+# partials
+# banners-main
+#-------------------------------------------------
+# partials
+# banners-utility
+#-------------------------------------------------
+# partials
+# connection-details
+partials.connection-details.WithinGroup=\u7ec4\u5185
+partials.connection-details.Relationships=\u5173\u8054
+partials.connection-details.configuration-tab.read-only-relationship-names-container.title=\u9009\u5b9a\u7684\u5173\u8054\u662f\u9ed1\u4f53\u5b57
+partials.connection-details.Name=\u540d\u79f0
+partials.connection-details.Id=\u8bc6\u522b\u7b26
+partials.connection-details.read-only-flow-file-expiration=\u6d41\u6587\u4ef6\u6709\u6548\u671f
+partials.connection-details.read-only-flow-file-expiration.title=\u5bf9\u8c61\u5728\u6570\u636e\u6d41\u4e2d\u6700\u5927\u6709\u6548\u65f6\u95f4
+partials.connection-details.read-only-back-pressure-object-threshold=\u540e\u53f0\u538b\u529b\u5bf9\u8c61\u9650\u5236
+partials.connection-details.read-only-back-pressure-object-threshold.title=\u5728\u540e\u53f0\u538b\u529b\u5b9e\u65bd\u524d\u961f\u5217\u5bb9\u7eb3\u7684\u6700\u5927\u5bf9\u8c61\u6570
+partials.connection-details.read-only-back-pressure-data-size-threshold=\u540e\u53f0\u538b\u529b\u6570\u636e\u9650\u5236
+partials.connection-details.read-only-back-pressure-data-size-threshold.title=\u5728\u540e\u53f0\u538b\u529b\u5b9e\u65bd\u524d\u961f\u5217\u91cc\u5bf9\u8c61\u6700\u5927\u6570\u91cf
+partials.connection-details.read-only-prioritizers=\u4f18\u5148\u7ea7
+partials.connection-details.read-only-prioritizers.title=\u8fd9\u4e2a\u5904\u7406\u5668\u5de5\u4f5c\u961f\u5217\u4e2d\u88ab\u91cd\u6392\u7684\u4f18\u5148\u7ea7
+#-------------------------------------------------
+# partials
+# message-pane
+partials.message-pane.logout=\u767b\u51fa
+partials.message-pane.userhome=\u7528\u6237\u4e3b\u9875
+#-------------------------------------------------
+# partials
+# ok-dialog
+#-------------------------------------------------
+# partials
+# processor-details
+partials.processor-details.read-only-processor-name=\u540d\u79f0
+partials.processor-details.read-only-processor-id=\u6807\u8bc6\u7b26
+partials.processor-details.read-only-processor-type=\u7c7b\u578b
+partials.processor-details.read-only-penalty-duration=\u5ef6\u65f6\u5468\u671f
+partials.processor-details.read-only-penalty-duration.title=\u8fd9\u4e2a\u5904\u7406\u5668\u5ef6\u8fdf\u67d0\u4e2a\u6d41\u6587\u4ef6\u7b49\u5f85\u7684\u65f6\u95f4
+partials.processor-details.read-only-yield-duration=\u751f\u4ea7\u5468\u671f
+partials.processor-details.read-only-yield-duration.title=\u5f53\u4e00\u4e2a\u5904\u7406\u5668\u5904\u4e8e\u751f\u4ea7\u72b6\u6001\uff0c\u76f4\u5230\u751f\u4ea7\u5468\u671f\u7ed3\u675f\u8fd9\u4e2a\u5904\u7406\u5668\u90fd\u4e0d\u4f1a\u518d\u88ab\u8c03\u5ea6
+partials.processor-details.read-only-bulletin-level=\u516c\u544a\u7ea7\u522b
+partials.processor-details.read-only-bulletin-level.title=\u8fd9\u4e2a\u5904\u7406\u5668\u4ea7\u751f\u516c\u544a\u65f6\u6240\u9700\u7684\u7ea7\u522b
+partials.processor-details.read-only-auto-terminate-relationship-names=\u81ea\u52a8\u7ec8\u6b62\u5173\u8054
+partials.processor-details.read-only-auto-terminate-relationship-names.title=\u5c06\u81ea\u52a8\u7ec8\u6b62\u6d41\u6587\u4ef6\u6267\u884c\u5e76\u4e14\u628a\u6240\u6709\u5173\u8054\u8bbe\u4e3a\u9ed1\u4f53
+partials.processor-details.read-only-scheduling-strategy=\u8ba1\u5212\u7b56\u7565
+partials.processor-details.read-only-scheduling-strategy.title=\u7528\u4e8e\u8fd9\u4e2a\u5904\u7406\u5668\u7684\u7b56\u7565
+partials.processor-details.read-only-concurrently-schedulable-tasks=\u5f53\u524d\u4efb\u52a1
+partials.processor-details.read-only-concurrently-schedulable-tasks.title=\u5f53\u524d\u5904\u7406\u5668\u6b63\u5728\u6267\u884c\u8ba1\u5212\u4efb\u52a1\u6267\u884c\u7684\u4efb\u52a1\u6570
+partials.processor-details.read-only-scheduling-period=\u8fd0\u884c\u8ba1\u5212\u4efb\u52a1
+partials.processor-details.read-only-scheduling-period.title=\u6bcf\u4e2a\u4efb\u52a1\u6267\u884c\u7684\u6700\u5c0f\u95f4\u9694\u65f6\u95f4
+partials.processor-details.read-only-execution-node-options=\u6267\u884c
+partials.processor-details.read-only-execution-node-options.title=\u8be5\u8282\u70b9\u662f\u5c06\u88ab\u8c03\u5ea6\u8fd0\u884c\u7684\u5904\u7406\u5668\u002e
+partials.processor-details.read-only-run-duration=\u6267\u884c\u65f6\u95f4
+partials.processor-details.read-only-run-duration.title=\u5f53\u8ba1\u5212\u4efb\u52a1\u88ab\u6267\u884c\u65f6\uff0c\u5904\u7406\u5668\u4f1a\u6267\u884c\u8fd9\u91cc\u6307\u5b9a\u7684\u65f6\u95f4\u3002\u5982\u679c\u6267\u884c\u65f6\u95f4\u662f1\u6beb\u79d2\uff0c\u8ba1\u5212\u4efb\u52a1\u53ea\u88ab\u6267\u884c\u4e00\u6b21
+partials.processor-details.read-only-processor-comments=\u8bc4\u4ef7
+#-------------------------------------------------
+# partials
+# status-history-dialog
+partials.status-history-dialog.LastUpdated=\u6700\u540e\u66f4\u65b0
+partials.status-history-dialog.Close=\u5173\u95ed
+partials.status-history-dialog.Refresh=\u5237\u65b0
+#-------------------------------------------------
+# partials
+# yes-no-dialog
+
+#-------------------------------------------------
+# partials
+# bulletin-board
+#-------------------------------------------------
+# partials
+# bulletin-board-content
+partials.bulletin-board.bulletin-board-content.bulletin-board-header-text=\u6570\u636e\u6d41\u516c\u544a\u677f
+partials.bulletin-board.bulletin-board-content.bulletin-board-filter=\u8fc7\u6ee4
+partials.bulletin-board.bulletin-board-content.refresh-toggle=\u5207\u6362\u81ea\u52a8\u5237\u65b0
+partials.bulletin-board.bulletin-board-content.bulletin-board-refresh-container=\u81ea\u52a8\u5237\u65b0
+partials.bulletin-board.bulletin-board-content.bulletin-board-last-refreshed-container=\u6700\u540e\u66f4\u65b0
+partials.bulletin-board.bulletin-board-content.refresh-button=\u5f00\u59cb/\u505c\u6b62 \u81ea\u52a8\u5237\u65b0
+partials.bulletin-board.Clear=\u6e05\u7a7a
+#-------------------------------------------------
+# partials
+# canvas
+partials.canvas.about-dailog.Tagged=\u8ffd\u8e2a
+partials.canvas.about-dailog.From=\u4ece
+partials.canvas.about-dailog.OnBranch=\u5728\u5206\u652f
+partials.canvas.about-dailog.nf-version=\u0041\u0070\u0061\u0063\u0068\u0065\u0020\u004e\u0069\u0046\u0069\u662f\u4e00\u4e2a\u652f\u6301\u9ad8\u5ea6\u53ef\u6269\u5c55\u548c\u7075\u6d3b\u7684\u6570\u636e\u6d41\u7684\u6846\u67b6\u002e\u5b83\u53ef\u4ee5\u901a\u8fc7\u4f01\u4e1a\u7ea7\u670d\u52a1\u5668\u96c6\u7fa4\u5728\u7b14\u8bb0\u672c\u7535\u8111\u4e0a\u8fd0\u884c\u002e\u800c\u4e0d\u662f\u6307\u5b9a\u7279\u5b9a\u7684\u6570\u636e\u6d41\u6216\u884c\u4e3a\uff0c\u5b83\u5141\u8bb8\u60a8\u8bbe\u8ba1\u81ea\u5df1\u7684\u9488\u5bf9\u60a8\u7684\u7279\u5b9a\u73af\u5883\u5b9a\u5236\u7684\u6700\u4f73\u6570\u636e\u6d41\u002e
+#canvas-header
+partials.canvas.canvas-header.login=\u767b\u5f55
+partials.canvas.canvas-header.logout=\u6ce8\u9500
+partials.canvas.canvas-header.help-link=\u5e2e\u52a9
+partials.canvas.canvas-header.about-link=\u5173\u4e8e
+partials.canvas.canvas-header.reporting-link=\u603b\u7ed3
+partials.canvas.canvas-header.counters-link=\u8ba1\u6570
+partials.canvas.canvas-header.history-link=\u6d41\u8bbe\u5b9a\u5386\u53f2
+partials.canvas.canvas-header.provenance-link=\u6570\u636e\u6765\u6e90
+partials.canvas.canvas-header.flow-settings-link=\u63a7\u5236\u5668\u8bbe\u5b9a
+partials.canvas.canvas-header.templates-link=\u6a21\u7248
+partials.canvas.canvas-header.users-link=\u7528\u6237
+partials.canvas.canvas-header.cluster-link=\u96c6\u7fa4
+partials.canvas.canvas-header.bulletin-board-link=\u516c\u544a\u677f
+partials.canvas.canvas-header.policies-link=\u7b56\u7565
+#component-state-dialog
+partials.canvas.component-state-dialog.Name=\u540d\u79f0
+partials.canvas.component-state-dialog.Description=\u63cf\u8ff0
+partials.canvas.component-state-dialog.component-state-partial-results-container=\u663e\u793a\u90e8\u5206\u7b54\u6848
+partials.canvas.component-state-dialog.component-state-filter-status1=\u5c55\u793a
+partials.canvas.component-state-dialog.component-state-filter-status2=\u7684
+partials.canvas.component-state-dialog.clear-link=\u72b6\u6001\u6e05\u7a7a
+partials.canvas.component-state-dialog.component-state-filter=\u8fc7\u6ee4
+#connection-configuration
+partials.canvas.connection-configuration.Name=\u540d\u79f0
+partials.canvas.connection-configuration.Id=\u6807\u8bc6\u7b26
+partials.canvas.connection-configuration.FlowFileExpiration=\u6d41\u6587\u4ef6\u6709\u6548\u65f6\u95f4
+partials.canvas.connection-configuration.FlowFileExpiration.title=\u5bf9\u8c61\u5728\u6570\u636e\u6d41\u4e2d\u6700\u5927\u6709\u6548\u65f6\u95f4
+partials.canvas.connection-configuration.BackPressureObjectThreshold=\u540e\u53f0\u538b\u529b\u5bf9\u8c61\u9650\u5236
+partials.canvas.connection-configuration.BackPressureObjectThreshold.Title=\u5728\u540e\u53f0\u538b\u529b\u5b9e\u65bd\u524d\u961f\u5217\u5bb9\u7eb3\u7684\u6700\u5927\u5bf9\u8c61\u6570
+partials.canvas.connection-configuration.BackPressureDataSizeThreshold=\u540e\u53f0\u538b\u529b\u6570\u636e\u9650\u5236
+partials.canvas.connection-configuration.BackPressureDataSizeThreshold.Title=\u5728\u540e\u53f0\u538b\u529b\u5b9e\u65bd\u524d\u961f\u5217\u91cc\u5bf9\u8c61\u6700\u5927\u6570\u91cf
+partials.canvas.connection-configuration.AvailablePrioritizers=\u53ef\u9009\u4f18\u5148\u7ea7
+partials.canvas.connection-configuration.AvailablePrioritizers.title=\u53ef\u4ee5\u5728\u6d41\u6587\u4ef6\u5de5\u4f5c\u961f\u5217\u91cc\u88ab\u91cd\u65b0\u6392\u5e03\u7684\u4f18\u5148\u7ea7
+partials.canvas.connection-configuration.SelectedPrioritizers=\u9009\u62e9\u7684\u4f18\u5148\u7ea7
+partials.canvas.connection-configuration.SelectedPrioritizers.title=\u5df2\u7ecf\u5728\u6d41\u6587\u4ef6\u5de5\u4f5c\u961f\u5217\u91cc\u88ab\u91cd\u65b0\u6392\u5e03\u7684\u4f18\u5148\u7ea7
+partials.canvas.connection-configuration.FromOutput=\u6765\u81ea\u8f93\u51fa
+partials.canvas.connection-configuration.FromInput=\u6765\u81ea\u8f93\u5165
+partials.canvas.connection-configuration.FromFunnel=\u6765\u81ea\u6f0f\u6597
+partials.canvas.connection-configuration.Funnel=\u6f0f\u6597
+partials.canvas.connection-configuration.FromProcessor=\u6765\u81ea\u5904\u7406\u5668
+partials.canvas.connection-configuration.WithinGroup=\u5728\u7ec4\u5185
+partials.canvas.connection-configuration.ForRelationships=\u5173\u8054
+partials.canvas.connection-configuration.ToInput=\u5411\u8f93\u5165
+partials.canvas.connection-configuration.ToOutput=\u5411\u8f93\u51fa
+partials.canvas.connection-configuration.ToFunnel=\u5411\u6f0f\u6597
+partials.canvas.connection-configuration.ToProcessor=\u5411\u5904\u7406\u5668
+partials.canvas.connection-configuration.WithinGroup=\u5728\u7ec4\u5185
+#connections-dialog
+partials.canvas.connections-dialog.SelectedComponent=\u9009\u5b9a\u7684\u7ec4\u4ef6
+partials.canvas.connections-dialog.Source=\u6e90
+partials.canvas.connections-dialog.Destination=\u76ee\u6807
+#controller-service-configuration
+partials.canvas.controller-service-configuration.Name=\u540d\u79f0
+partials.canvas.controller-service-configuration.Id=\u6807\u8bc6\u7b26
+partials.canvas.controller-service-configuration.Type=\u7c7b\u578b
+partials.canvas.controller-service-configuration.Availability=\u53ef\u7528
+partials.canvas.controller-service-configuration.Availability.title=\u63a7\u5236\u5668\u670d\u52a1\u53ef\u7528\u7684\u5730\u65b9
+partials.canvas.controller-service-configuration.ReferencingComponents=\u53c2\u7167\u7ec4\u4ef6
+partials.canvas.controller-service-configuration.ReferencingComponents.title=\u8fd9\u4e2a\u63a7\u5236\u5668\u7684\u5176\u4ed6\u7ec4\u4ef6
+partials.canvas.controller-service-configuration.Comments=\u8bc4\u4ef7
+#disable-controller-service-dialog
+partials.canvas.disable-controller-service-dialog.Service=\u670d\u52a1
+partials.canvas.disable-controller-service-dialog.Scope=\u8303\u56f4
+partials.canvas.disable-controller-service-dialog.Scope.setting-field=\u670d\u52a1\u548c\u53c2\u7167\u7ec4\u4ef6
+partials.canvas.disable-controller-service-dialog.Scope.setting-field.title=\u505c\u6b62\u670d\u52a1\u524d\u8bf7\u5148\u5c06\u53c2\u7167\u7ec4\u4ef6\u5173\u95ed\u6216\u8005\u65e0\u6548
+partials.canvas.disable-controller-service-dialog.disable-controller-service-progress.1=\u505c\u6b62\u53c2\u7167\u63a7\u5236\u5668\u5e76\u62a5\u544a\u4efb\u52a1
+partials.canvas.disable-controller-service-dialog.disable-controller-service-progress.2=\u4f7f\u53c2\u7167\u63a7\u5236\u5668\u65e0\u6548
+partials.canvas.disable-controller-service-dialog.disable-controller-service-progress.3=\u4f7f\u63a7\u5236\u5668\u65e0\u6548
+partials.canvas.disable-controller-service-dialog.ReferencingComponents=\u53c2\u7167\u7ec4\u4ef6
+partials.canvas.disable-controller-service-dialog.ReferencingComponents.title=\u8fd9\u4e2a\u63a7\u5236\u5668\u7684\u5176\u4ed6\u7ec4\u4ef6
+partials.canvas.disable-controller-service-dialog.canceling=\u53d6\u6d88\u4e2d
+#drop-request-status-dialog
+#enable-controller-service-dialog
+partials.canvas.enable-controller-service-dialog.enable-controller-service-progress.1=\u542f\u52a8\u63a7\u5236\u5668\u670d\u52a1
+partials.canvas.enable-controller-service-dialog.enable-controller-service-progress.2=\u542f\u52a8\u53c2\u7167\u63a7\u5236\u5668\u670d\u52a1
+partials.canvas.enable-controller-service-dialog.enable-controller-service-progress.3=\u542f\u52a8\u53c2\u7167\u5904\u7406\u5668\u548c\u62a5\u544a\u4efb\u52a1
+partials.canvas.enable-controller-service-dialog.ReferencingComponents=\u53c2\u7167\u7ec4\u4ef6
+partials.canvas.enable-controller-service-dialog.ReferencingComponents.title=\u8fd9\u4e2a\u63a7\u5236\u5668\u7684\u5176\u4ed6\u7ec4\u4ef6
+partials.canvas.enable-controller-service-dialog.Canceling=\u53d6\u6d88\u4e2d
+partials.canvas.enable-controller-service-dialog.Service=\u670d\u52a1
+partials.canvas.enable-controller-service-dialog.Scope=\u8303\u56f4
+#fill-color-dialog
+partials.canvas.fill-color-dialog.Color=\u989c\u8272
+partials.canvas.fill-color-dialog.Value=\u586b\u5145\u503c
+partials.canvas.fill-color-dialog.Preview=\u9884\u89c8
+partials.canvas.fill-color-dialog.Processor=\u5904\u7406\u5668
+partials.canvas.fill-color-dialog.Label=\u6807\u7b7e
+partials.canvas.fill-color-dialog.ProcessorName=\u5904\u7406\u5668\u540d\u79f0
+#flow-status
+partials.canvas.flow-status.ActiveThreads=\u5de5\u4f5c\u7684\u7ebf\u7a0b:
+partials.canvas.flow-status.Queued=\u6392\u961f\u4e2d
+partials.canvas.flow-status.connected-nodes-element=\u94fe\u63a5\u7684\u8282\u70b9:
+partials.canvas.flow-status.flow-status-property-element=\u7edf\u8ba1\u6700\u540e\u66f4\u65b0
+partials.canvas.flow-status.refresh-required-link=\u5237\u65b0
+partials.canvas.flow-status.search-field=\u8fc7\u6ee4
+#flowfile-details-dialog
+partials.canvas.flowfile-details-dialog.detail=\u6d41\u6587\u4ef6\u8be6\u60c5
+partials.canvas.flowfile-details-dialog.filename=\u6587\u4ef6\u540d
+partials.canvas.flowfile-details-dialog.filesize=\u6587\u4ef6\u5927\u5c0f
+partials.canvas.flowfile-details-dialog.queuelocation=\u961f\u5217\u4f4d\u7f6e
+partials.canvas.flowfile-details-dialog.queueduration=\u6392\u961f\u6301\u7eed\u65f6\u95f4
+partials.canvas.flowfile-details-dialog.lineageduration=\u6cbf\u88ad\u65f6\u95f4
+partials.canvas.flowfile-details-dialog.penalized=\u60e9\u7f5a
+partials.canvas.flowfile-details-dialog.contentclaim=\u5185\u5bb9\u58f0\u660e
+partials.canvas.flowfile-details-dialog.container=\u5bb9\u5668
+partials.canvas.flowfile-details-dialog.section=\u5730\u533a
+partials.canvas.flowfile-details-dialog.identifier=\u6807\u8bc6\u7b26
+partials.canvas.flowfile-details-dialog.offset=\u504f\u79fb
+partials.canvas.flowfile-details-dialog.size=\u5927\u5c0f
+partials.canvas.flowfile-details-dialog.download=\u4e0b\u8f7d
+partials.canvas.flowfile-details-dialog.view=\u67e5\u770b
+partials.canvas.flowfile-details-dialog.attributevalue=\u5c5e\u6027\u503c
+#instantiate-template-dialog
+partials.canvas.instantiate-template-dialog.choosetmplate=\u9009\u62e9\u6a21\u677f
+#label-configuration
+partials.canvas.label-configuration.LabelValue=\u6807\u7b7e\u503c
+partials.canvas.label-configuration.fontSize=\u5b57\u4f53\u5927\u5c0f
+partials.canvas.label-configuration.label-configuration-apply=\u5e94\u7528
+partials.canvas.label-configuration.label-configuration-cancel=\u53d6\u6d88
+#navigation
+partials.canvas.navigation.Navigate=\u5bfc\u822a
+partials.canvas.navigation.Operate=\u64cd\u4f5c
+partials.canvas.navigation.Delete=\u5220\u9664
+partials.canvas.navigation.PanUp=\u9762\u677f\u4e0a\u79fb
+partials.canvas.navigation.PanLeft=\u9762\u677f\u5de6\u79fb
+partials.canvas.navigation.PanRight=\u9762\u677f\u53f3\u79fb
+partials.canvas.navigation.PanDown=\u9762\u677f\u4e0b\u79fb
+partials.canvas.navigation.zoom-in-button=\u653e\u5927
+partials.canvas.navigation.zoom-out-button=\u7f29\u5c0f
+partials.canvas.navigation.zoom-fit-button=\u81ea\u9002\u5e94
+partials.canvas.navigation.zoom-actual-button=\u5b9e\u9645\u5927\u5c0f
+partials.canvas.navigation.configuration=\u914d\u7f6e
+partials.canvas.navigation.accesspolicies=\u8bbf\u95ee\u7b56\u7565
+partials.canvas.navigation.enable=\u542f\u7528
+partials.canvas.navigation.disable=\u7981\u7528
+partials.canvas.navigation.start=\u5f00\u59cb
+partials.canvas.navigation.stop=\u505c\u6b62
+partials.canvas.navigation.createTemplate=\u521b\u5efa\u6a21\u677f
+partials.canvas.navigation.uploadTemplate=\u4e0a\u4f20\u6a21\u677f
+partials.canvas.navigation.copy=\u62f7\u8d1d
+partials.canvas.navigation.paste=\u7c98\u8d34
+partials.canvas.navigation.group=\u7ec4
+partials.canvas.navigation.fillcolor=\u989c\u8272\u586b\u5145
+partials.canvas.navigation.chagecolor=\u6539\u53d8\u989c\u8272
+partials.canvas.navigation.delete=\u5220\u9664
+#new-controller-service-dialog
+partials.canvas.new-controller-service-dialog.TagCloud=\u6807\u7b7e\u4e91
+partials.canvas.new-controller-service-dialog.Displaying=\u663e\u793a
+partials.canvas.new-controller-service-dialog.Of=\u4e2d
+partials.canvas.new-controller-service-dialog.controller-service-type-name-title=\u9009\u5b9a\u7684\u63a7\u5236\u5668\u670d\u52a1
+partials.canvas.new-controller-service-dialog.Tags=\u6807\u7b7e
+partials.canvas.new-controller-service-dialog.AvailableOn=\u53ef\u7528\u6253\u5f00
+partials.canvas.new-controller-service-dialog.controller-service-type-filter=\u8fc7\u6ee4
+#new-port-dialog
+partials.canvas.new-port-dialog.Input=\u8f93\u5165
+partials.canvas.new-port-dialog.portname=\u7aef\u53e3\u53f7
+#new-process-group-dialog
+partials.canvas.new-process-group-dialog.ProcessGroupName=\u5904\u7406\u7ec4\u540d\u79f0
+#new-processor-dialog
+partials.canvas.new-processor-dialog.TagCloud=\u6807\u7b7e\u4e91
+partials.canvas.new-processor-dialog.Displaying=\u663e\u793a
+partials.canvas.new-processor-dialog.Of=\u4e2d
+partials.canvas.new-processor-dialog.processor-type-name-title=\u9009\u5b9a\u7684\u5904\u7406\u5668
+partials.canvas.new-processor-dialog.Tags=\u6807\u7b7e
+partials.canvas.new-processor-dialog.processor-type-filter-container=\u8fc7\u6ee4
+#new-remote-process-group-dialog
+partials.canvas.new-remote-process-group-dialog.URL=\u7f51\u5740
+partials.canvas.new-remote-process-group-dialog.circle=\u6307\u5b9a\u8fdc\u7a0b\u76ee\u6807\u004e\u0069\u0046\u0069\u0020\u0055\u0052\u004c\u002e\u0020\u53ef\u4ee5\u4ee5\u9017\u53f7\u5206\u9694\u683c\u5f0f\u6307\u5b9a\u591a\u4e2a\u0055\u0052\u004c\u002e\u0020\u4e0d\u540c\u7684\u534f\u8bae\u4e0d\u80fd\u6df7\u5408\u002e\u0020\u5982\u679c\u8fdc\u7a0b\u004e\u0069\u0046\u0069\u662f\u7fa4\u96c6\uff0c\u5219\u5efa\u8bae\u4f7f\u7528\u4e24\u4e2a\u6216\u66f4\u591a\u8282\u70b9\u0055\u0052\u004c\u4ee5\u5b9e\u73b0\u66f4\u597d\u7684\u8fde\u63a5\u5efa\u7acb\u53ef\u7528\u6027\u002e
+partials.canvas.new-remote-process-group-dialog.Transport=\u4f20\u8f93\u534f\u8bae
+partials.canvas.new-remote-process-group-dialog.TransportTitle=\u6307\u5b9a\u4f20\u8f93\u534f\u8bae\u4f7f\u7528\u8be5\u8fdc\u7a0b\u5904\u7406\u7ec4\u901a\u4fe1
+partials.canvas.new-remote-process-group-dialog.LocalNetwork=\u672c\u5730\u7f51\u7edc\u63a5\u53e3
+partials.canvas.new-remote-process-group-dialog.LocalNetworkTitle=\u672c\u5730\u7f51\u7edc\u63a5\u53e3\u53d1\u9001\u002f\u63a5\u6536\u6570\u636e\u002e\u0020\u5982\u679c\u672a\u6307\u5b9a\uff0c\u5219\u4f7f\u7528\u4efb\u4f55\u672c\u5730\u5730\u5740\u002e\u0020\u5982\u679c\u662f\u96c6\u7fa4\uff0c\u5219\u6240\u6709\u8282\u70b9\u5fc5\u987b\u5177\u6709\u5e26\u6709\u6b64\u6807\u8bc6\u7b26\u7684\u63a5\u53e3\u002e
+partials.canvas.new-remote-process-group-dialog.HttpProxyHostname=\u0068\u0074\u0074\u0070\u4ee3\u7406\u670d\u52a1\u5668\u5730\u5740
+partials.canvas.new-remote-process-group-dialog.HttpProxyHostnameTitle=\u6307\u5b9a\u8981\u4f7f\u7528\u7684\u4ee3\u7406\u670d\u52a1\u5668\u540d\u002e\u0020\u5982\u679c\u4e0d\u6307\u5b9a\u002c\u0020\u0048\u0054\u0054\u0050\u6d41\u91cf\u76f4\u63a5\u53d1\u9001\u5230\u76ee\u6807\u53d1\u751f\u004e\u0049\u0046\u0049\u5e94\u7528\u4e0a\u002e
+partials.canvas.new-remote-process-group-dialog.HttpProxyPort=\u0068\u0074\u0074\u0070\u4ee3\u7406\u670d\u52a1\u5668\u7aef\u53e3
+partials.canvas.new-remote-process-group-dialog.HttpProxyPortTitle=\u6307\u5b9a\u4ee3\u7406\u670d\u52a1\u5668\u7684\u7aef\u53e3\u53f7\u002c\u53ef\u9009\u002e\u5982\u679c\u6ca1\u6709\u6307\u5b9a\u002c\u9ed8\u8ba4\u0020\u0038\u0030\u7aef\u53e3\u002e
+partials.canvas.new-remote-process-group-dialog.HttpProxyUser=\u0068\u0074\u0074\u0070\u4ee3\u7406\u7528\u6237\u540d
+partials.canvas.new-remote-process-group-dialog.HttpProxyUserTitle=\u6307\u5b9a\u8981\u8fde\u63a5\u5230\u4ee3\u7406\u670d\u52a1\u5668\u7684\u7528\u6237\u540d\u002c\u53ef\u9009\u002e
+partials.canvas.new-remote-process-group-dialog.HttpProxyPassword=\u0068\u0074\u0074\u0070\u4ee3\u7406\u5bc6\u7801
+partials.canvas.new-remote-process-group-dialog.HttpProxyPasswordTitle=\u6307\u5b9a\u8981\u8fde\u63a5\u5230\u4ee3\u7406\u670d\u52a1\u5668\u7684\u5bc6\u7801\u002c\u53ef\u9009\u002e
+partials.canvas.new-remote-process-group-dialog.timeout=\u901a\u4fe1\u8d85\u65f6
+partials.canvas.new-remote-process-group-dialog.timeoutTitle=\u5f53\u4e0e\u8fd9\u4e2a\u8fdc\u7a0b\u8fdb\u7a0b\u7ec4\u7684\u901a\u4fe1\u82b1\u8d39\u7684\u65f6\u95f4\u8f83\u957f\u65f6\u002c\u5b83\u5c06\u8d85\u65f6\u002e
+partials.canvas.new-remote-process-group-dialog.yield=\u4ea7\u51fa\u6301\u7eed\u65f6\u95f4
+#override-policy-dialog
+partials.canvas.override-policy-dialog.content=\u60a8\u8981\u8986\u76d6\u7ee7\u627f\u7684\u7b56\u7565\u8fd8\u662f\u7a7a\u7b56\u7565\u7684\u526f\u672c\uff1f
+partials.canvas.override-policy-dialog.Copy=\u590d\u5236
+partials.canvas.override-policy-dialog.Empty=\u7a7a
+#new-reporting-task-dialog
+partials.canvas.new-reporting-task-dialog.TagCloud=\u6807\u7b7e\u4e91
+partials.canvas.new-reporting-task-dialog.Displaying=\u663e\u793a
+partials.canvas.new-processor-dialog.Of=\u4e2d
+partials.canvas.new-reporting-task-dialog.Tags=\u6807\u7b7e
+partials.canvas.new-reporting-task-dialog.ReportTask=\u9009\u5b9a\u7684\u62a5\u544a\u4efb\u52a1
+partials.canvas.new-reporting-task-dialog.AvailableOn=\u53ef\u7528\u6253\u5f00
+partials.canvas.new-reporting-task-dialog.reporting-task-type-filter=\u8fc7\u6ee4
+#new-template-dialog
+partials.canvas.new-template-dialog.Name=\u540d\u79f0
+partials.canvas.new-template-dialog.Description=\u63cf\u8ff0
+#policy-management
+partials.canvas.policy-management.policy-management-header-text=\u8bbf\u95ee\u7b56\u7565
+partials.canvas.policy-management.create-policy-link=\u521b\u5efa
+partials.canvas.policy-management.new-policy-message=\u4e00\u4e2a\u65b0\u7684\u7b56\u7565
+partials.canvas.policy-management.override-policy-link=\u8986\u76d6
+partials.canvas.policy-management.override-policy-message=\u8fd9\u4e2a\u7b56\u7565
+partials.canvas.policy-management.add-local-admin-link=\u6dfb\u52a0
+partials.canvas.policy-management.add-local-admin-message=\u5176\u4ed6\u7ba1\u7406\u5458\u7684\u7b56\u7565
+partials.canvas.policy-management.policy-selected-component-type1=\u6a21\u677f
+partials.canvas.policy-management.policy-selected-component-type2=\u670d\u52a1\u5668\u7ba1\u7406
+partials.canvas.policy-management.policy-selected-component-type3=\u4efb\u52a1\u62a5\u544a
+partials.canvas.policy-management.last-refreshed-container=\u6700\u65b0\u66f4\u65b0
+partials.canvas.policy-management.admin-policy-message=\u4ec5\u5217\u51fa\u7ec4\u4ef6\u7279\u5b9a\u7ba1\u7406\u5458\u002e\u7ee7\u627f\u7684\u7ba1\u7406\u5458\u672a\u663e\u793a\u002e
+partials.canvas.policy-management.policy-refresh-button=\u5237\u65b0
+#port-configuration
+partials.canvas.port-configuration.PortName=\u7aef\u53e3\u53f7
+partials.canvas.port-configuration.Enabled=\u6253\u5f00
+partials.canvas.port-configuration.Id=\u6807\u8bc6\u7b26
+partials.canvas.port-configuration.ConcurrentTasks=\u5f53\u524d\u4efb\u52a1
+partials.canvas.port-configuration.ConcurrentTasks.title=\u5f53\u524d\u7aef\u53e3\u6267\u884c\u7684\u4efb\u52a1\u6570
+partials.canvas.port-configuration.Comments=\u8bc4\u4ef7
+#port-details
+partials.canvas.port-details.PortName=\u7aef\u53e3\u53f7
+partials.canvas.port-details.Id=\u6807\u8bc6\u7b26
+partials.canvas.port-details.Comments=\u8bc4\u4ef7
+#process-group-configuration
+partials.canvas.process-group-configuration.process-group-configuration-header-text=\u5904\u7406\u7ec4\u914d\u7f6e
+partials.canvas.process-group-configuration.ProcessGroupName=\u5904\u7406\u7ec4\u540d\u79f0
+partials.canvas.process-group-configuration.Processgroupcomments=\u5904\u7406\u7ec4\u8bc4\u8bba
+partials.canvas.process-group-configuration.process-group-configuration-save=\u5e94\u7528
+partials.canvas.process-group-configuration.last-refreshed-container=\u6700\u65b0\u66f4\u65b0
+partials.canvas.process-group-configuration.process-group-configuration-refresh-button=\u5237\u65b0
+partials.canvas.process-group-configuration.Name=\u540d\u79f0
+partials.canvas.process-group-configuration.Id=\u6807\u8bc6\u7b26
+partials.canvas.process-group-configuration.Comments=\u8bc4\u4ef7
+partials.canvas.process-group-configuration.availability=\u5217\u51fa\u7684\u670d\u52a1\u53ef\u7528\u4e8e\u6b64\u8fc7\u7a0b\u7ec4\u7684\u6240\u6709\u540e\u4ee3\u5904\u7406\u5668\u548c\u670d\u52a1\u002e
+#process-group-details
+partials.canvas.process-group-details.Name=\u540d\u79f0
+partials.canvas.process-group-details.Id=\u6807\u8bc6\u7b26
+partials.canvas.process-group-details.Comments=\u8bc4\u4ef7
+#processor-configuration
+partials.canvas.processor-configuration.Name=\u540d\u79f0
+partials.canvas.processor-configuration.Enabled=\u5df2\u6253\u5f00
+partials.canvas.processor-configuration.Id=\u6807\u8bc6\u7b26
+partials.canvas.processor-configuration.Type=\u7c7b\u578b
+partials.canvas.processor-configuration.PenaltyDuration=\u5ef6\u65f6\u5468\u671f
+partials.canvas.processor-configuration.PenaltyDuration.title=\u8fd9\u4e2a\u5904\u7406\u5668\u5ef6\u8fdf\u67d0\u4e2a\u6d41\u6587\u4ef6\u7b49\u5f85\u7684\u65f6\u95f4
+partials.canvas.processor-configuration.YieldDuration=\u751f\u4ea7\u5468\u671f
+partials.canvas.processor-configuration.YieldDuration.title=\u5f53\u4e00\u4e2a\u5904\u7406\u5668\u5904\u4e8e\u751f\u4ea7\u72b6\u6001\uff0c\u76f4\u5230\u751f\u4ea7\u5468\u671f\u7ed3\u675f\u8fd9\u4e2a\u5904\u7406\u5668\u90fd\u4e0d\u4f1a\u518d\u88ab\u8c03\u5ea6
+partials.canvas.processor-configuration.BulletinLevel=\u516c\u544a\u7ea7\u522b
+partials.canvas.processor-configuration.BulletinLevel.title=\u8fd9\u4e2a\u5904\u7406\u5668\u4ea7\u751f\u516c\u544a\u65f6\u6240\u9700\u7684\u7ea7\u522b
+partials.canvas.processor-configuration.AutoTerminateRelationships=\u81ea\u52a8\u7ec8\u6b62\u5173\u8054
+partials.canvas.processor-configuration.AutoTerminateRelationships.title=\u65e0\u5b9a\u4e49\u65f6\u6307\u5b9a\u5173\u8054\u7684\u6570\u636e\u6d41\u6587\u4ef6\u5c06\u88ab\u7ec8\u6b62\u6267\u884c
+partials.canvas.processor-configuration.SchedulingStrategy=\u8ba1\u5212\u7b56\u7565
+partials.canvas.processor-configuration.SchedulingStrategy.title=\u7528\u4e8e\u8fd9\u4e2a\u5904\u7406\u5668\u7684\u7b56\u7565
+partials.canvas.processor-configuration.event-driven-warning=\u5b9e\u9a8c\u7b56\u7565
+partials.canvas.processor-configuration.ConcurrentTasks=\u5f53\u524d\u4efb\u52a1
+partials.canvas.processor-configuration.ConcurrentTasks.title=\u5f53\u524d\u5904\u7406\u5668\u6b63\u5728\u6267\u884c\u8ba1\u5212\u4efb\u52a1\u6267\u884c\u7684\u4efb\u52a1\u6570
+partials.canvas.processor-configuration.RunSchedule=\u8fd0\u884c\u8ba1\u5212\u4efb\u52a1
+partials.canvas.processor-configuration.RunSchedule.title.1=\u8ba1\u5212\u4efb\u52a1\u8fd0\u884c\u65f6\u95f4
+partials.canvas.processor-configuration.RunSchedule.title.2=CRON\u8868\u8fbe\u5f0f\u7528\u4e8e\u8fd9\u4e2a\u5904\u7406\u5668\u6267\u884c
+partials.canvas.processor-configuration.RunDuration=\u6267\u884c\u671f\u95f4
+partials.canvas.processor-configuration.RunDuration.title=\u5f53\u8ba1\u5212\u4efb\u52a1\u88ab\u6267\u884c\u65f6\uff0c\u5904\u7406\u5668\u5c06\u6301\u7eed\u8fd0\u884c\u4e0a\u8ff0\u65f6\u95f4\u3002\u6267\u884c\u671f\u95f4\u4e3a0\u6beb\u79d2\u7684\u4efb\u52a1\u53ea\u88ab\u6267\u884c\u4e00\u6b21
+partials.canvas.processor-configuration.Execution=\u6267\u884c
+partials.canvas.processor-configuration.ExecutionTitle=\u8be5\u5904\u7406\u5668\u5c06\u88ab\u8c03\u5ea6\u8fd0\u884c\u7684\u8282\u70b9\u002e
+partials.canvas.processor-configuration.LowerLatency=\u66f4\u4f4e\u7684\u5ef6\u8fdf
+partials.canvas.processor-configuration.HigherThroughput=\u66f4\u9ad8\u541e\u5410\u91cf
+partials.canvas.processor-configuration.HigherThroughput.Warning=\u5f53\u6570\u636e\u6d41\u5173\u95ed\u65f6\uff0c\u4f5c\u4e3a\u6e90\u5904\u7406\u5668\u6267\u884c\u65f6\u95f4\u5927\u4e8e0\u6beb\u79d2\uff0c\u4f46\u662f\u6ca1\u6709\u8f93\u5165\u94fe\u63a5\u6709\u53ef\u80fd\u4e22\u5931\u6570\u636e
+#queue-listing
+partials.canvas.queue-listing.queue-listing-refresh-button=\u5237\u65b0 
+partials.canvas.queue-listing.queue-listing-stats-deploy=\u663e\u793a  
+partials.canvas.queue-listing.queue-listing-stats-of=\u7684
+partials.canvas.queue-listing.lastUpdate=\u6700\u65b0\u66f4\u65b0                                                    
+#registration
+partials.canvas.registration.register-title=\u4f60\u672a\u88ab\u6388\u6743\u8bbf\u95ee\u6570\u636e\u6d41
+partials.canvas.registration.expand-registration-text=\u8bf7\u6c42\u6743\u9650
+partials.canvas.registration.registration-form.setting-name=\u9a8c\u8bc1
+partials.canvas.registration.registration-form.remaining-characters=\u5b57\u7b26\u4fdd\u7559
+partials.canvas.registration.registration-form.registration-form-submit=\u63d0\u4ea4
+#remote-port-configuration
+partials.canvas.remote-port-configuration.Name=\u540d\u79f0
+partials.canvas.remote-port-configuration.ConcurrentTasks=\u5f53\u524d\u4efb\u52a1
+partials.canvas.remote-port-configuration.ConcurrentTasks.title=\u5f53\u524d\u7aef\u53e3\u6267\u884c\u7684\u4efb\u52a1\u6570
+partials.canvas.remote-port-configuration.remote-port-use-compression=\u88ab\u538b\u7f29
+#remote-process-group-configuration
+partials.canvas.remote-process-group-configuration.Name=\u540d\u79f0
+partials.canvas.remote-process-group-configuration.Id=\u6807\u8bc6\u7b26
+partials.canvas.remote-process-group-configuration.URL=\u7f51\u5740
+partials.canvas.remote-process-group-configuration.TransportProtocol=\u4f20\u8f93\u534f\u8bae
+partials.canvas.remote-process-group-configuration.TransportProtocolTitle=\u6307\u5b9a\u7528\u4e8e\u6b64\u8fdc\u7a0b\u8fc7\u7a0b\u7ec4\u901a\u4fe1\u7684\u4f20\u8f93\u534f\u8bae\u002e
+partials.canvas.remote-process-group-configuration.hostname=\u0048\u0054\u0054\u0050\u4ee3\u7406\u670d\u52a1\u5668\u540d\u79f0
+partials.canvas.remote-process-group-configuration.hostnameTitle=\u6307\u5b9a\u8981\u4f7f\u7528\u7684\u4ee3\u7406\u670d\u52a1\u5668\u7684\u4e3b\u673a\u540d\u002e\u0020\u5982\u679c\u672a\u6307\u5b9a\u002c\u0048\u0054\u0054\u0050\u6d41\u91cf\u5c06\u76f4\u63a5\u53d1\u9001\u5230\u76ee\u6807\u004e\u0069\u0046\u0069\u5e94\u7528\u002e
+partials.canvas.remote-process-group-configuration.port=\u0048\u0054\u0054\u0050\u4ee3\u7406\u670d\u52a1\u5668\u7aef\u53e3
+partials.canvas.remote-process-group-configuration.portTitle=\u6307\u5b9a\u4ee3\u7406\u670d\u52a1\u5668\u7684\u7aef\u53e3\u53f7\u002c\u53ef\u9009\u002e\u5982\u679c\u672a\u6307\u5b9a\u002c\u5c06\u4f7f\u7528\u9ed8\u8ba4\u7aef\u53e3\u0038\u0030\u002e
+partials.canvas.remote-process-group-configuration.user=\u0048\u0054\u0054\u0050\u4ee3\u7406\u7528\u6237
+partials.canvas.remote-process-group-configuration.userTitle=\u6307\u5b9a\u8981\u8fde\u63a5\u5230\u4ee3\u7406\u670d\u52a1\u5668\u7684\u7528\u6237\u540d\u002c\u53ef\u9009\u002e
+partials.canvas.remote-process-group-configuration.pwd=\u0048\u0054\u0054\u0050\u4ee3\u7406\u5bc6\u7801
+partials.canvas.remote-process-group-configuration.pwdTitle=\u6307\u5B9A\u7528\u4E8E\u8FDE\u63A5\u5230\u4EE3\u7406\u670D\u52A1\u5668\u7684\u7528\u6237\u5BC6\u7801\uFF0C\u53EF\u9009\u3002
+partials.canvas.remote-process-group-configuration.LocalNetwork=\u672c\u5730\u7f51\u7edc\u63a5\u53e3
+partials.canvas.remote-process-group-configuration.LocalNetworkTitle=\u672c\u5730\u7f51\u7edc\u63a5\u53e3\u53d1\u9001\u002f\u63a5\u6536\u6570\u636e\u002e\u0020\u5982\u679c\u672a\u6307\u5b9a\uff0c\u5219\u4f7f\u7528\u4efb\u4f55\u672c\u5730\u5730\u5740\u002e\u0020\u5982\u679c\u662f\u96c6\u7fa4\uff0c\u5219\u6240\u6709\u8282\u70b9\u5fc5\u987b\u5177\u6709\u5e26\u6709\u6b64\u6807\u8bc6\u7b26\u7684\u63a5\u53e3\u002e
+partials.canvas.remote-process-group-configuration.CommunicationsTimeout=\u901a\u8baf\u8d85\u65f6
+partials.canvas.remote-process-group-configuration.CommunicationsTimeoutTitle=\u5f53\u4e0e\u6b64\u8fdc\u7a0b\u8fdb\u7a0b\u7ec4\u7684\u901a\u4fe1\u6240\u82b1\u8d39\u7684\u65f6\u95f4\u8d85\u8fc7\u6b64\u65f6\u95f4\u91cf\u65f6\u002c\u5b83\u5c06\u8d85\u65f6\u002e
+partials.canvas.remote-process-group-configuration.YieldDuration=\u751f\u4ea7\u5468\u671f
+partials.canvas.remote-process-group-configuration.YieldDuration.title=\u5f53\u8fdc\u7a0b\u5904\u7406\u7ec4\u8d85\u65f6\u540e\uff0c\u7cfb\u7edf\u5c06\u7b49\u5f85\u6307\u5b9a\u65f6\u95f4\u518d\u8fdb\u884c\u8c03\u5ea6
+#remote-process-group-details
+partials.canvas.remote-process-group-details.Name=\u540d\u79f0
+partials.canvas.remote-process-group-details.Id=\u6807\u8bc6\u7b26
+partials.canvas.remote-process-group-details.URL=\u7f51\u5740
+partials.canvas.remote-process-group-details.TransportProtocol=\u4f20\u8f93\u534f\u8bae
+partials.canvas.remote-process-group-details.TransportProtocolTitle=\u6307\u5b9a\u7528\u4e8e\u6b64\u8fdc\u7a0b\u8fc7\u7a0b\u7ec4\u901a\u4fe1\u7684\u4f20\u8f93\u534f\u8bae\u002e
+partials.canvas.remote-process-group-details.hostname=\u0048\u0054\u0054\u0050\u4ee3\u7406\u670d\u52a1\u5668\u540d\u79f0
+partials.canvas.remote-process-group-details.hostnameTitle=\u6307\u5b9a\u8981\u4f7f\u7528\u7684\u4ee3\u7406\u670d\u52a1\u5668\u7684\u4e3b\u673a\u540d\u002e\u0020\u5982\u679c\u672a\u6307\u5b9a\u002c\u0048\u0054\u0054\u0050\u6d41\u91cf\u5c06\u76f4\u63a5\u53d1\u9001\u5230\u76ee\u6807\u004e\u0069\u0046\u0069\u5e94\u7528\u002e
+partials.canvas.remote-process-group-details.LocalNetwork=\u672c\u5730\u7f51\u7edc\u63a5\u53e3
+partials.canvas.remote-process-group-details.LocalNetworkTitle=\u672c\u5730\u7f51\u7edc\u63a5\u53e3\u53d1\u9001\u002f\u63a5\u6536\u6570\u636e\u002e\u0020\u5982\u679c\u672a\u6307\u5b9a\uff0c\u5219\u4f7f\u7528\u4efb\u4f55\u672c\u5730\u5730\u5740\u002e\u0020\u5982\u679c\u662f\u96c6\u7fa4\uff0c\u5219\u6240\u6709\u8282\u70b9\u5fc5\u987b\u5177\u6709\u5e26\u6709\u6b64\u6807\u8bc6\u7b26\u7684\u63a5\u53e3\u002e
+partials.canvas.remote-process-group-details.port=\u0048\u0054\u0054\u0050\u4ee3\u7406\u670d\u52a1\u5668\u7aef\u53e3
+partials.canvas.remote-process-group-details.portTitle=\u6307\u5b9a\u4ee3\u7406\u670d\u52a1\u5668\u7684\u7aef\u53e3\u53f7\u002c\u53ef\u9009\u002e\u5982\u679c\u672a\u6307\u5b9a\u002c\u5c06\u4f7f\u7528\u9ed8\u8ba4\u7aef\u53e3\u0038\u0030\u002e
+partials.canvas.remote-process-group-details.user=\u0048\u0054\u0054\u0050\u4ee3\u7406\u7528\u6237
+partials.canvas.remote-process-group-details.userTitle=\u6307\u5b9a\u8981\u8fde\u63a5\u5230\u4ee3\u7406\u670d\u52a1\u5668\u7684\u7528\u6237\u540d\u002c\u53ef\u9009\u002e
+partials.canvas.remote-process-group-details.pwd=\u0048\u0054\u0054\u0050\u4ee3\u7406\u5bc6\u7801
+partials.canvas.remote-process-group-details.pwdTitle=\u6307\u5B9A\u7528\u4E8E\u8FDE\u63A5\u5230\u4EE3\u7406\u670D\u52A1\u5668\u7684\u7528\u6237\u5BC6\u7801\uFF0C\u53EF\u9009\u3002
+partials.canvas.remote-process-group-details.CommunicationsTimeout=\u901a\u8baf\u8d85\u65f6
+partials.canvas.remote-process-group-details.CommunicationsTimeoutTitle=\u5f53\u4e0e\u6b64\u8fdc\u7a0b\u8fdb\u7a0b\u7ec4\u7684\u901a\u4fe1\u6240\u82b1\u8d39\u7684\u65f6\u95f4\u8d85\u8fc7\u6b64\u65f6\u95f4\u91cf\u65f6\u002c\u5b83\u5c06\u8d85\u65f6\u002e
+partials.canvas.remote-process-group-details.YieldDuration=\u751f\u4ea7\u5468\u671f
+partials.canvas.remote-process-group-details.YieldDuration.title=\u5f53\u8fdc\u7a0b\u5904\u7406\u7ec4\u8d85\u65f6\u540e\uff0c\u7cfb\u7edf\u5c06\u7b49\u5f85\u6307\u5b9a\u65f6\u95f4\u518d\u8fdb\u884c\u8c03\u5ea6
+#remote-process-group-ports
+partials.canvas.remote-process-group-ports.Name=\u540d\u79f0
+partials.canvas.remote-process-group-ports.InputPorts=\u8f93\u5165\u7aef\u53e3
+partials.canvas.remote-process-group-ports.URL=\u7f51\u5740
+partials.canvas.remote-process-group-ports.OutputPorts=\u8f93\u51fa\u7aef\u53e3
+#reporting-task-configuration
+partials.canvas.reporting-task-configuration.Name=\u540d\u79f0
+partials.canvas.reporting-task-configuration.Enabled=\u5df2\u6253\u5f00
+partials.canvas.reporting-task-configuration.Id=\u6807\u8bc6\u7b26
+partials.canvas.reporting-task-configuration.Type=\u7c7b\u578b
+partials.canvas.reporting-task-configuration.Availability=\u53ef\u7528
+partials.canvas.reporting-task-configuration.Availability.title=\u63a7\u5236\u5668\u670d\u52a1\u53ef\u7528\u7684\u5730\u65b9
+partials.canvas.reporting-task-configuration.SchedulingStrategy=\u8ba1\u5212\u7b56\u7565
+partials.canvas.reporting-task-configuration.SchedulingStrategy.title=\u7528\u4e8e\u8fd9\u4e2a\u62a5\u544a\u4efb\u52a1\u7684\u7b56\u7565
+partials.canvas.reporting-task-configuration.RunSchedule=\u8fd0\u884c\u8ba1\u5212\u4efb\u52a1
+partials.canvas.reporting-task-configuration.RunSchedule.title=\u8ba1\u5212\u4efb\u52a1\u8fd0\u884c\u65f6\u95f4
+partials.canvas.reporting-task-configuration.Comments=\u8bc4\u4ef7
+#secure-port-configuration
+partials.canvas.secure-port-configuration.PortName=\u7aef\u53e3\u53f7
+partials.canvas.secure-port-configuration.Enable=\u6253\u5f00
+partials.canvas.secure-port-configuration.Id=\u6807\u8bc6\u7b26
+partials.canvas.secure-port-configuration.ConcurrentTasks=\u5f53\u524d\u4efb\u52a1
+partials.canvas.secure-port-configuration.ConcurrentTasks.title=\u5f53\u524d\u7aef\u53e3\u6267\u884c\u7684\u4efb\u52a1\u6570
+partials.canvas.secure-port-configuration.Comments=\u8bc4\u4ef7
+partials.canvas.secure-port-configuration.SearchUsers=\u68c0\u7d22\u7528\u6237
+partials.canvas.secure-port-configuration.AllowedUsers=\u5141\u8bb8\u7528\u6237
+partials.canvas.secure-port-configuration.AllowedGroups=\u5141\u8bb8\u7ec4
+#secure-port-details
+partials.canvas.secure-port-details.PortName=\u7aef\u53e3\u53f7
+partials.canvas.secure-port-details.Id=\u6807\u8bc6\u7b26
+partials.canvas.secure-port-details.ConcurrentTasks=\u5f53\u524d\u4efb\u52a1
+partials.canvas.secure-port-details.ConcurrentTasks.title=\u5f53\u524d\u7aef\u53e3\u6267\u884c\u7684\u4efb\u52a1\u6570
+partials.canvas.secure-port-details.Comments=\u8bc4\u4ef7
+partials.canvas.secure-port-details.AllowedUsers=\u5141\u8bb8\u7528\u6237
+partials.canvas.secure-port-details.AllowedGroups=\u5141\u8bb8\u7ec4
+#search-users-dialog
+partials.canvas.search-users-dialog.search-users-field=\u7528\u6237\u8eab\u4efd
+partials.canvas.search-users-dialog.SelectedUsers=\u9009\u5b9a\u7684\u7528\u6237
+partials.canvas.search-users-dialog.SelectedGroups=\u9009\u5b9a\u7684\u7ec4
+#settings-content
+partials.canvas.settings-content.new-service-or-task=\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u63a7\u5236\u5668\u670d\u52a1
+partials.canvas.settings-content.settings-header-text=\u6570\u636e\u6d41\u914d\u7f6e
+partials.canvas.settings-content.setting1=\u6700\u5927\u5b9a\u65f6\u5668\u9a71\u52a8\u7ebf\u7a0b\u6570
+partials.canvas.settings-content.setting1-title=\u7cfb\u7edf\u53ef\u7528\u7684\u5b9a\u65f6\u5668\u9a71\u52a8\u5904\u7406\u5668\u7684\u6700\u5927\u7ebf\u7a0b\u6570\u002e
+partials.canvas.settings-content.setting2=\u6700\u5927\u4e8b\u4ef6\u9a71\u52a8\u7ebf\u7a0b\u8ba1\u6570
+partials.canvas.settings-content.setting2-title=\u4e8b\u4ef6\u9a71\u52a8\u5904\u7406\u5668\u53ef\u7528\u4e8e\u7cfb\u7edf\u7684\u6700\u5927\u7ebf\u7a0b\u6570\u002e
+partials.canvas.settings-content.settings-save=\u5e94\u7528
+partials.canvas.settings-content.LastUpdated=\u6700\u540e\u66f4\u65b0:&nbsp;
+partials.canvas.settings-content.DataFlowName=\u6570\u636e\u6d41\u540d\u79f0
+partials.canvas.settings-content.Refresh=\u5237\u65b0
+partials.canvas.settings-content.Apply=\u5e94\u7528
+partials.canvas.settings-content.archive-flow-link=\u5907\u4efd\u6d41
+partials.canvas.settings-content.archive-flow-link.title=\u538b\u7f29\u6d41\u914d\u7f6e
+partials.canvas.settings-content.DataFlowComments=\u6570\u636e\u6d41\u6ce8\u91ca
+partials.canvas.settings-content.MaximumTimerDrivenThreadCoun=\u6700\u5927\u65f6\u95f4\u9a71\u52a8\u578b\u7ebf\u7a0b\u6570
+partials.canvas.settings-content.MaximumTimerDrivenThreadCount=\u65f6\u95f4\u9a71\u52a8\u578b\u63a7\u5236\u5668\u8bbe\u5b9a\u7684\u6700\u5927\u7ebf\u7a0b\u6570
+partials.canvas.settings-content.MaximumTimerDrivenThreadCount.title=\u7cfb\u7edf\u4e3a\u65f6\u95f4\u9a71\u52a8\u578b\u63a7\u5236\u5668\u8bbe\u5b9a\u7684\u6700\u5927\u7ebf\u7a0b\u6570
+partials.canvas.settings-content.MaximumEventDrivenThreadCount=\u6700\u5927\u4e8b\u4ef6\u9a71\u52a8\u578b\u7ebf\u7a0b\u6570
+partials.canvas.settings-content.MaximumEventDrivenThreadCount.title=\u7cfb\u7edf\u4e3a\u4e8b\u4ef6\u9a71\u52a8\u578b\u63a7\u5236\u5668\u8bbe\u5b9a\u7684\u6700\u5927\u7ebf\u7a0b\u6570
+partials.canvas.settings-content.container=\u5217\u51fa\u7684\u670d\u52a1\u9002\u7528\u4e8e\u201c\u63a7\u5236\u5668\u8bbe\u7f6e\u201d\u4e2d\u5b9a\u4e49\u7684\u6240\u6709\u62a5\u544a\u4efb\u52a1\u548c\u670d\u52a1\u002e
+#shell
+partials.canvas.shell.shell-undock-button=\u5728\u65b0\u7684\u7a97\u53e3\u6253\u5f00
+partials.canvas.shell.shell-close-button=\u5173\u95ed
+partials.canvas.shell.OpenNewWindows=\u6253\u5f00\u65b0\u7684\u7a97\u53e3
+paritals.canvas.shell.Close=\u5173\u95ed
+#upload-template-dialog
+partials.cancas.upload-template-dialog.select-template-label=\u9009\u62e9\u6a21\u677f
+partials.cancas.upload-template-dialog.template-file-field=\u6d4f\u89c8
+#-------------------------------------------------
+# partials
+# cluster
+# cluster-content
+partials.cluster.cluster-content.NiFiCluster=\u6570\u636e\u6d41\u96c6\u7fa4\u670d\u52a1\u5668
+partials.cluster.cluster-content.Displaying=\u663e\u793a:&nbsp;
+partials.cluster.cluster-content.Of=&nbsp;\u4e2d&nbsp;
+partials.cluster.cluster-content.LastUpdated=\u6700\u540e\u66f4\u65b0:
+partials.cluster.cluster-content.Filter=\u8fc7\u6ee4
+partials.cluster.cluster-content.Refresh=\u5237\u65b0
+#node-details-dialog
+partials.cluster.node-details-dialog.Address=\u5730\u5740
+partials.cluster.node-details-dialog.NodeId=\u8282\u70b9\u6807\u8bc6\u7b26
+partials.cluster.node-details-dialog.NodeEvents=\u8282\u70b9\u4e8b\u4ef6
+#-------------------------------------------------
+# partials
+# counters
+# counters-content
+partials.counters.counters-content.counters-header-text=\u6570\u636e\u6d41\u8ba1\u6570\u5668
+partials.counters.counters-content.Displaying=\u663e\u793a&nbsp;
+partials.counters.counters-content.Of=&nbsp;\u4e2d&nbsp;
+partials.counters.counters-content.LastUpdated=\u6700\u540e\u66f4\u65b0:&nbsp;
+partials.counters.counters-content.Filter=\u8fc7\u6ee4
+partials.counters.counters-content.Refresh=\u5237\u65b0
+#-------------------------------------------------
+# partials
+# history
+# action-details-dialog
+# history-content
+partials.history.history-content.history-header-text=\u6570\u636e\u6d41\u5386\u53f2\u4fe1\u606f
+partials.history.history-content.Refresh=\u5237\u65b0
+partials.history.history-content.LastUpdated=\u6700\u540e\u66f4\u65b0:&nbsp;
+partials.history.history-content.history-filter-overview=\u4e00\u4e2a\u8fc7\u6ee4\u5668\u88ab\u5e94\u7528
+partials.history.history-content.clear-history-filter=\u6e05\u7a7a\u8fc7\u6ee4\u5668
+partials.history.history-content.Filter=\u8fc7\u6ee4\u5668
+partials.history.history-content.Purge=\u51c0\u5316\u5668
+paritals.history.history-content.cluster-history-message=\u4ec5\u67e5\u770b\u5f53\u524d\u8282\u70b9\u7684\u5386\u53f2\u8bb0\u5f55\u3002\u0020\u6d4f\u89c8\u53e6\u4e00\u4e2a\u8282\u70b9\u4ee5\u67e5\u770b\u5176\u5386\u53f2\u8bb0\u5f55\u3002
+paritals.history.history-content.history-last-refreshed-container=\u6700\u8fd1\u66f4\u65b0\u65f6\u95f4\uff1a
+paritals.history.history-content.history-filter-button.title=\u8fc7\u6ee4\u5668\u5386\u53f2\u8bb0\u5f55
+paritals.history.history-content.history-purge-button.title=\u6e05\u9664\u5386\u53f2
+paritals.history.history-content.refresh-button.title=\u5237\u65b0
+# history-filter-dialog
+partials.history.history-filter-dialog.Filter=\u8fc7\u6ee4\u5668
+partials.history.history-filter-dialog.StartDate=\u5f00\u59cb\u65e5\u671f
+partials.history.history-filter-dialog.StartDate.title=\u5f00\u59cb\u65e5\u671f\u683c\u5f0f\u4e3a 'mm/dd/yyyy'. \u5fc5\u987b\u6307\u5b9a\u5f00\u59cb\u65f6\u95f4
+partials.history.history-filter-dialog.StartTime=\u5f00\u59cb\u65f6\u95f4
+partials.history.history-filter-dialog.StartTime.title=\u5f00\u59cb\u65f6\u95f4\u683c\u5f0f\u4e3a 'hh:mm:ss',\u5fc5\u987b\u6307\u5b9a\u5f00\u59cb\u65e5\u671f
+partials.history.history-filter-dialog.EndDate=\u7ed3\u675f\u65e5\u671f
+partials.history.history-filter-dialog.EndDate.title=\u7ed3\u675f\u65e5\u671f\u683c\u5f0f\u4e3a 'mm/dd/yyyy'. \u5fc5\u987b\u6307\u5b9a\u7ed3\u675f\u65f6\u95f4
+partials.history.history-filter-dialog.EndTime=\u7ed3\u675f\u65f6\u95f4
+partials.history.history-filter-dialog.EndTime.title=\u7ed3\u675f\u65f6\u95f4\u683c\u5f0f\u4e3a 'hh:mm:ss',\u5fc5\u987b\u6307\u5b9a\u7ed3\u675f\u65e5\u671f
+# history-purge-dialog
+partials.history.history-purge-dialog.Title1=\u6e05\u9664\u7ed3\u675f\u65e5\u671f\u683c\u5f0f\u4e3a 'mm/dd/yyyy'. \u8fd8\u5fc5\u987b\u6307\u5b9a\u7ed3\u675f\u65f6\u95f4\u002e
+partials.history.history-purge-dialog.Title2=\u7ed3\u675f\u65f6\u95f4\u683c\u5f0f\u4e3a\u0020 'hh:mm:ss', \u8fd8\u5fc5\u987b\u6307\u5b9a\u7ed3\u675f\u65e5\u671f\u002e
+partials.history.history-purge-dialog.EndDate=\u7ed3\u675f\u65e5\u671f
+partials.history.history-purge-dialog.EndDate.title=\u51c0\u5316\u7ed3\u675f\u65f6\u95f4\u683c\u5f0f\u4e3a 'hh:mm:ss',\u5fc5\u987b\u6307\u5b9a\u7ed3\u675f\u65e5\u671f
+partials.history.history-purge-dialog.EndTime=\u7ed3\u675f\u65f6\u95f4
+partials.history.history-purge-dialog.EndTime.title=\u7ed3\u675f\u65f6\u95f4\u683c\u5f0f\u4e3a 'hh:mm:ss',\u5fc5\u987b\u6307\u5b9a\u7ed3\u675f\u65e5\u671f
+
+#-------------------------------------------------
+# partials
+# login
+# login-form
+paritals.login.login-form.login-title=\u767b\u5f55
+paritals.login.login-form.Username=\u7528\u6237\u540d
+paritals.login.login-form.Password=\u5bc6\u7801
+paritals.login.login-form.User=\u7528\u6237
+# login-message
+# login-progress
+# login-submission
+paritals.login.login-submission.login-submission-button=\u767b\u5f55
+
+#-------------------------------------------------
+# partials
+# provenance
+# lineage-query-dialog
+# provenance-content
+partials.provenance.provenance-content.provenance-header-text=\u6570\u636e\u6d41\u6765\u6e90
+partials.provenance.provenance-content.Displaying=\u663e\u793a
+partials.provenance.provenance-content.oldest-event-message=\u53ef\u7528\u65e7\u4e8b\u4ef6
+partials.provenance.provenance-content.LastUpdated=\u6700\u540e\u66f4\u65b0
+partials.provenance.provenance-content.clear-provenance-search=\u6e05\u7a7a\u68c0\u7d22
+partials.provenance.provenance-content.Search=\u68c0\u7d22
+partials.provenance.provenance-content.Refresh=\u5237\u65b0
+partials.provenance.provenance-content.Download=\u4e0b\u8f7d
+partials.provenance.provenance-content.Close=\u5173\u95ed
+paritals.provenance.provenance-content.refresh-button.title=\u5237\u65b0
+paritals.provenance.provenance-content.provenance-lineage-downloader.title=\u4e0b\u8f7d
+paritals.provenance.provenance-content.provenance-lineage-closer.title=\u8fd4\u56de\u4e8b\u4ef6\u5217\u8868
+paritals.provenance.provenance-content.provenance-filter-container=\u8fc7\u6ee4
+# provenance-event-details-dialog
+partials.provenance.provenance-event-details-dialog.Time=\u65f6\u95f4
+partials.provenance.provenance-event-details-dialog.EventDuration=\u4e8b\u4ef6\u6301\u7eed\u65f6\u95f4
+partials.provenance.provenance-event-details-dialog.LineageDuration=\u6301\u7eed\u65f6\u95f4
+partials.provenance.provenance-event-details-dialog.Type=\u7c7b\u578b
+partials.provenance.provenance-event-details-dialog.FlowFileUuid=\u6587\u4ef6UUID
+partials.provenance.provenance-event-details-dialog.FileSize=\u6587\u4ef6\u5927\u5c0f
+partials.provenance.provenance-event-details-dialog.ComponentId=\u7ec4\u4ef6\u8bc6\u522b\u7b26
+partials.provenance.provenance-event-details-dialog.ComponentName=\u7ec4\u4ef6\u540d\u79f0
+partials.provenance.provenance-event-details-dialog.ComponentType=\u7ec4\u4ef6\u7c7b\u578b
+partials.provenance.provenance-event-details-dialog.Details=\u8be6\u7ec6
+partials.provenance.provenance-event-details-dialog.ParentFlowFiles=\u7236\u6570\u636e\u6d41\u6587\u4ef6
+partials.provenance.provenance-event-details-dialog.ChildFlowFiles=\u5b50\u6570\u636e\u6d41\u6587\u4ef6
+partials.provenance.provenance-event-details-dialog.AttributeValues=\u5c5e\u6027\u503c
+partials.provenance.provenance-event-details-dialog.OnlyShowModified=\u4ec5\u663e\u793a\u66f4\u65b0\u7684
+partials.provenance.provenance-event-details-dialog.InputClaim=\u8f93\u5165\u786e\u8ba4
+partials.provenance.provenance-event-details-dialog.Container=\u5bb9\u5668
+partials.provenance.provenance-event-details-dialog.Section=\u533a\u57df
+partials.provenance.provenance-event-details-dialog.Identifier=\u8bc6\u522b\u7b26
+partials.provenance.provenance-event-details-dialog.Offset=\u504f\u79fb
+partials.provenance.provenance-event-details-dialog.Size=\u5927\u5c0f
+partials.provenance.provenance-event-details-dialog.Download=\u4e0b\u8f7d
+partials.provenance.provenance-event-details-dialog.View=\u67e5\u770b
+partials.provenance.provenance-event-details-dialog.OutputClaim=\u8f93\u51fa\u58f0\u660e
+partials.provenance.provenance-event-details-dialog.Replay=\u91cd\u653e
+partials.provenance.provenance-event-details-dialog.ConnectionId=\u94fe\u63a5\u6807\u793a\u7b26
+partials.provenance.provenance-event-details-dialog.Submit=\u63d0\u4ea4
+#provenance-query-dialog
+#provenance-search-dialog
+partials.provenance.provenance-search-dialog.Fields=\u5c5e\u6027
+partials.provenance.provenance-search-dialog.no-searchable-fields=\u65e0\u53ef\u68c0\u7d22\u7684\u5c5e\u6027\u88ab\u8bbe\u5b9a
+partials.provenance.provenance-search-dialog.StartDate=\u5f00\u59cb\u65e5\u671f
+partials.provenance.provenance-search-dialog.StartDate.title=\u5f00\u59cb\u65e5\u671f\u683c\u5f0f\u4e3a 'mm/dd/yyyy'. \u5fc5\u987b\u6307\u5b9a\u5f00\u59cb\u65f6\u95f4
+partials.provenance.provenance-search-dialog.StartTime=\u5f00\u59cb\u65f6\u95f4
+partials.provenance.provenance-search-dialog.StartTime.title=\u5f00\u59cb\u65f6\u95f4\u683c\u5f0f\u4e3a 'hh:mm:ss',\u5fc5\u987b\u6307\u5b9a\u5f00\u59cb\u65e5\u671f
+partials.provenance.provenance-search-dialog.EndDate=\u7ed3\u675f\u65e5\u671f
+partials.provenance.provenance-search-dialog.EndDate.title=\u7ed3\u675f\u65e5\u671f\u683c\u5f0f\u4e3a 'mm/dd/yyyy'. \u5fc5\u987b\u6307\u5b9a\u7ed3\u675f\u65f6\u95f4
+partials.provenance.provenance-search-dialog.EndTime=\u7ed3\u675f\u65f6\u95f4
+partials.provenance.provenance-search-dialog.EndTime.title=\u7ed3\u675f\u65f6\u95f4\u683c\u5f0f\u4e3a 'hh:mm:ss',\u5fc5\u987b\u6307\u5b9a\u7ed3\u675f\u65e5\u671f
+partials.provenance.provenance-search-dialog.MinimumFileSize=\u6700\u5c0f\u6587\u4ef6\u5927\u5c0f
+partials.provenance.provenance-search-dialog.MinimumFileSize.title=\u6700\u5c0f\u6587\u4ef6\u5927\u5c0f \u4f8b\u5982: 2KB
+partials.provenance.provenance-search-dialog.MaximumFileSize=\u6700\u5927\u6587\u4ef6\u5927\u5c0f
+partials.provenance.provenance-search-dialog.MaximumFileSize.title=\u6700\u5927\u6587\u4ef6\u5927\u5c0f \u4f8b\u5982: 4GB
+partials.provenance.provenance-search-dialog.SearchLocation=\u68c0\u7d22\u5730\u533a
+#-------------------------------------------------
+# partials
+# summary
+# cluster-connection-summary-dialog
+partials.summary.cluster-connection-summary-dialog.LastUpdated=\u6700\u540e\u66f4\u65b0:
+partials.summary.cluster-connection-summary-dialog.Refresh=\u5237\u65b0
+# cluster-input-port-summary-dialog
+partials.summary.cluster-input-port-summary-dialog.LastUpdated=\u6700\u540e\u66f4\u65b0:
+partials.summary.cluster-input-port-summary-dialog.Refresh=\u5237\u65b0
+# cluster-output-port-summary-dialog
+partials.summary.cluster-output-port-summary-dialog.LastUpdated=\u6700\u540e\u66f4\u65b0:
+partials.summary.cluster-output-port-summary-dialog.Refresh=\u5237\u65b0
+# cluster-process-group-summary-dialog
+partials.summary.cluster-process-group-summary-dialog.LastUpdated=\u6700\u540e\u66f4\u65b0:
+partials.summary.cluster-process-group-summary-dialog.Refresh=\u5237\u65b0
+# cluster-processor-summary-dialog
+partials.summary.cluster-processor-summary-dialog.LastUpdated=\u6700\u540e\u66f4\u65b0:
+partials.summary.cluster-processor-summary-dialog.Refresh=\u5237\u65b0
+
+# cluster-remote-process-group-summary-dialog
+partials.summary.cluster-remote-process-group-summary-dialog.LastUpdated=\u6700\u540e\u66f4\u65b0:
+partials.summary.cluster-remote-process-group-summary-dialog.Refresh=\u5237\u65b0
+# summary-content
+partials.summary.summary-content.summary-header-text=\u6570\u636e\u6d41\u603b\u7ed3
+partials.summary.summary-content.Displaying=\u663e\u793a&nbsp;
+partials.summary.summary-content.Of=&nbsp;\u4e2d&nbsp;
+partials.summary.summary-content.View=\u67e5\u770b:
+partials.summary.summary-content.SingleNode=\u5355\u8282\u70b9
+partials.summary.summary-content.Cluster=\u96c6\u7fa4
+partials.summary.summary-content.Refresh=\u5237\u65b0
+partials.summary.summary-content.LastUpdated=\u6700\u540e\u66f4\u65b0:
+partials.summary.summary-content.SystemDiagnostics=\u7cfb\u7edf\u5206\u6790
+partials.summary.summary-content.summary-filter-container=\u8fc7\u6ee4
+# system-diagnostics-dialog
+partials.summary.system-diagnostics-dialog.Refresh=\u5237\u65b0
+partials.summary.system-diagnostics-dialog.LastUpdated=\u6700\u540e\u66f4\u65b0:
+partials.summary.system-diagnostics-dialog.Heap=\u5806
+partials.summary.system-diagnostics-dialog.Max=\u6700\u5927\u503c
+partials.summary.system-diagnostics-dialog.Total=\u603b\u8ba1
+partials.summary.system-diagnostics-dialog.Used=\u4f7f\u7528\u7684
+partials.summary.system-diagnostics-dialog.Free=\u672a\u7528\u7684
+partials.summary.system-diagnostics-dialog.NonHeap=\u975e\u5806
+partials.summary.system-diagnostics-dialog.GarbageCollection=\u5783\u573e\u56de\u6536
+partials.summary.system-diagnostics-dialog.Runtime=\u8fd0\u884c\u65f6\u95f4
+partials.summary.system-diagnostics-dialog.Uptime=\u66f4\u65b0\u65f6\u95f4
+partials.summary.system-diagnostics-dialog.AvailableProcessors=\u53ef\u7528\u5904\u7406\u5668
+partials.summary.system-diagnostics-dialog.ProcessorLoadAverage=\u5904\u7406\u5668\u5e73\u5747\u8d1f\u8377
+partials.summary.system-diagnostics-dialog.ProcessorLoadAverage.title=\u5904\u7406\u5668\u5728\u6700\u540e\u4e00\u5206\u949f\u7684\u5e73\u5747\u8d1f\u8377. \u4e0d\u662f\u6240\u6709\u64cd\u4f5c\u7cfb\u7edf\u90fd\u53ef\u4ee5\u7528
+partials.summary.system-diagnostics-dialog.FlowFileRepositoryStorageUsage=\u6d41\u6587\u4ef6\u5b58\u50a8\u5360\u7528
+partials.summary.system-diagnostics-dialog.ContentRepositoryStorageUsage=\u5185\u5bb9\u5b58\u50a8\u5360\u7528
+partials.summary.version-tab-content.nifi=\u6570\u636e\u6d41
+partials.summary.version-tab-content.nifiVersion=\u6570\u636e\u6d41\u7248\u672c
+partials.summary.version-tab-content.tag=\u6807\u7b7e
+partials.summary.version-tab-content.buildDate=\u6784\u5efa\u65e5\u671f\u002f\u65f6\u95f4
+partials.summary.version-tab-content.branch=\u5206\u652f
+partials.summary.version-tab-content.revision=\u4fee\u8ba2
+partials.summary.version-tab-content.Version=\u7248\u672c
+partials.summary.version-tab-content.Vendor=\u4f9b\u5e94\u5546
+partials.summary.version-tab-content.Operating=\u64cd\u4f5c\u7cfb\u7edf
+partials.summary.version-tab-content.Name=\u540d\u5b57
+partials.summary.version-tab-content.Architecture=\u5efa\u7b51
+partials.summary.system-diagnostics-refresh-container.refresh=\u5237\u65b0
+
+# view-single-node-dialog
+partials.summary.view-single-node-dialog.cluster-search-example=\u4f8b\u5982:
+#-------------------------------------------------
+# partials
+# templates
+# templates-content
+partials.templates.templates-content.templates-header-text=\u6570\u636e\u6d41\u6a21\u7248
+partials.templates.templates-content.Displaying=\u663e\u793a&nbsp;
+partials.templates.templates-content.Of=&nbsp;\u4e2d&nbsp;
+partials.templates.templates-content.LastUpdated=\u6700\u540e\u66f4\u65b0:
+partials.templates.templates-content.Browse=\u6d4f\u89c8
+partials.templates.templates-content.Import=\u5bfc\u5165
+partials.templates.templates-content.\u53d6\u6d88=\u53d6\u6d88
+partials.templates.templates-content.Refresh=\u5237\u65b0
+partials.templates.templates-content.templates-filter-container=\u8fc7\u6ee4
+#-------------------------------------------------
+# partials
+# users
+# group-revoke-dialog
+partials.users.group-revoke-dialog.dialog-content=\u4f60\u786e\u8ba4\u8981\u5c06\u6743\u9650\u8d4b\u4e88\u6240\u6709\u7528\u6237
+# group-roles-dialog
+partials.users.group-roles-dialog.Group=\u7ec4
+partials.users.group-roles-dialog.Roles=\u89d2\u8272
+partials.users.group-roles-dialog.Administrator=\u7ba1\u7406\u5458
+partials.users.group-roles-dialog.DataFlowManager=\u6570\u636e\u6d41\u7ba1\u7406\u4eba
+partials.users.group-roles-dialog.ReadOnly=\u53ea\u8bfb
+partials.users.group-roles-dialog.Provenance=\u6765\u6e90
+partials.users.group-roles-dialog.NiFi=\u6570\u636e\u6d41
+partials.users.group-roles-dialog.Proxy=\u4ee3\u7406
+# user-delete-dialog
+partials.users.user-delete-dialog.user-id-delete-dialog=\u4f60\u786e\u5b9a\u8981\u5220\u9664\u7528\u6237\u5e10\u53f7
+# user-dialog
+partials.users.user-dialog.Individual=\u4e2a\u4eba
+partials.users.user-dialog.Group=\u7ec4
+partials.users.user-dialog.Identity=\u8eab\u4efd
+partials.users.user-dialog.user-groups=\u6210\u5458\u7684
+partials.users.user-dialog.group-members=\u6210\u5458
+# user-policies-dialog
+partials.users.user-policies-dialog.User=\u7528\u6237
+partials.users.user-policies-dialog.user-policy-message=\u9664\u975e\u660e\u786e\u8986\u76d6\uff0c\u5426\u5219\u4e00\u4e9b\u7b56\u7565\u53ef\u4ee5\u7531\u540e\u4ee3\u7ec4\u4ef6\u7ee7\u627f\u002e
+# user-details-dialog
+partials.users.user-details-dialog.User=\u7528\u6237
+partials.users.user-details-dialog.DN=DN
+partials.users.user-details-dialog.Created=\u5df2\u521b\u5efa
+partials.users.user-details-dialog.LastVerified=\u6700\u540e\u9a8c\u8bc1\u65f6\u95f4
+partials.users.user-details-dialog.Justification=\u9a8c\u8bc1
+# user-group-dialog
+partials.users.user-group-dialog.GroupName=\u7ec4\u540d
+# user-revoke-dialog
+partials.users.user-revoke-dialog.user-id-revoke-dialog=\u4f60\u786e\u5b9a\u5c06\u8981\u6388\u6743
+# user-roles-dialog
+partials.users.user-roles-dialog.User=\u7528\u6237
+partials.users.user-roles-dialog.Justification=\u9a8c\u8bc1
+partials.users.user-roles-dialog.Roles=\u89d2\u8272
+partials.users.user-roles-dialog.Administrator=\u7ba1\u7406\u5458
+partials.users.user-roles-dialog.DataFlowManager=\u6570\u636e\u6d41\u7ba1\u7406\u4eba
+partials.users.user-roles-dialog.ReadOnly=\u53ea\u8bfb
+partials.users.user-roles-dialog.Provenance=\u6570\u636e\u6765\u6e90
+partials.users.user-roles-dialog.NiFi=\u6570\u636e\u6d41
+partials.users.user-roles-dialog.Proxy=\u4ee3\u7406
+# users-content
+partials.users.users-content.users-header-text=\u6570\u636e\u6d41\u7528\u6237
+partials.users.users-content.Displaying=\u663e\u793a&nbsp;
+partials.users.users-content.Of=&nbsp;\u4e2d&nbsp;
+partials.users.users-content.LastUpdated=\u6700\u540e\u66f4\u65b0:
+partials.users.users-content.ShowByGroup=\u6839\u636e\u7ec4\u663e\u793a
+partials.users.users-content.Group=\u7ec4
+partials.users.users-content.Refresh=\u5237\u65b0
+partials.users.users-content.users-filter-container=\u8fc7\u6ee4
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_en.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_en.properties
new file mode 100644
index 000000000000..6667ba6dc03e
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_en.properties
@@ -0,0 +1,788 @@
+#-------------------------------------------------
+# pages
+# login
+pages.login.title=NiFi Login
+# bulletin-board
+pages.bulletin-board.title=NiFi Bulletin Board
+#-------------------------------------------------
+# pages
+# canvas
+pages.canvas.title=NiFi
+#-------------------------------------------------
+# pages
+# cluster
+pages.cluster.title=NiFi Cluster
+#-------------------------------------------------
+# pages
+# counters
+pages.counters.title=NiFi Counters
+#-------------------------------------------------
+# pages
+# history
+pages.history.title=NiFi History
+#-------------------------------------------------
+# pages
+# message-page
+
+#-------------------------------------------------
+# pages
+# provenance
+pages.provenance.title=NiFi Data Provenance
+#-------------------------------------------------
+# pages
+# summary
+pages.summary.title=NiFi Summary
+#-------------------------------------------------
+# pages
+# templates
+pages.templates.title=NiFi Templates
+#-------------------------------------------------
+# pages
+# users
+pages.users.title=NiFi Users
+
+#-------------------------------------------------
+# partials
+# banners-main
+#-------------------------------------------------
+# partials
+# banners-utility
+#-------------------------------------------------
+# partials
+# connection-details
+partials.connection-details.WithinGroup=Within group
+partials.connection-details.Relationships=Relationships
+partials.connection-details.configuration-tab.read-only-relationship-names-container.title=Selected relationships are in bold.
+partials.connection-details.Name=Name
+partials.connection-details.Id=Id
+partials.connection-details.read-only-flow-file-expiration=FlowFile expiration
+partials.connection-details.read-only-flow-file-expiration.title=The maximum amount of time an object may be in the flow before it will be automatically aged out of the flow.
+partials.connection-details.read-only-back-pressure-object-threshold=Back pressure object threshold
+partials.connection-details.read-only-back-pressure-object-threshold.title=The maximum number of objects that can be queued before back pressure is applied.
+partials.connection-details.read-only-back-pressure-data-size-threshold=Back pressure data size threshold
+partials.connection-details.read-only-back-pressure-data-size-threshold.title= The maximum data size of objects that can be queued before back pressure is applied.
+partials.connection-details.read-only-prioritizers=Prioritizers
+partials.connection-details.read-only-prioritizers.title=Prioritizers that have been selected to reprioritize FlowFiles in this processors work queue.
+#-------------------------------------------------
+# partials
+# message-pane
+partials.message-pane.logout=Login out
+partials.message-pane.userhome=User home
+#-------------------------------------------------
+# partials
+# ok-dialog
+#-------------------------------------------------
+# partials
+# processor-details
+partials.processor-details.read-only-processor-name=Name
+partials.processor-details.read-only-processor-id=Id
+partials.processor-details.read-only-processor-type=Type
+partials.processor-details.read-only-penalty-duration=Penalty duration
+partials.processor-details.read-only-penalty-duration.title=The amount of time used when this processor penalizes a FlowFile.
+partials.processor-details.read-only-yield-duration=Yield duration
+partials.processor-details.read-only-yield-duration.title=When a processor yields, it will not be scheduled again until this amount of time elapses.
+partials.processor-details.read-only-bulletin-level=Bulletin level
+partials.processor-details.read-only-bulletin-level.title=The level at which this processor will generate bulletins.
+partials.processor-details.read-only-auto-terminate-relationship-names=Automatically terminate relationships
+partials.processor-details.read-only-auto-terminate-relationship-names.title=Will automatically terminate FlowFiles sent to all relationships in bold.
+partials.processor-details.read-only-scheduling-strategy=Scheduling strategy
+partials.processor-details.read-only-scheduling-strategy.title=The strategy used to schedule this processor.
+partials.processor-details.read-only-concurrently-schedulable-tasks=Concurrent tasks
+partials.processor-details.read-only-concurrently-schedulable-tasks.title=The number of tasks that should be concurrently scheduled for this processor.
+partials.processor-details.read-only-scheduling-period=Run schedule
+partials.processor-details.read-only-scheduling-period.title=The minimum number of seconds that should elapse between task executions.
+partials.processor-details.read-only-execution-node-options=Execution
+partials.processor-details.read-only-execution-node-options.title=The node(s) that this processor will be scheduled to run on.
+partials.processor-details.read-only-run-duration=Run duration
+partials.processor-details.read-only-run-duration.title=When scheduled to run, the processor will continue running for up to this duration. A run duration of 0ms will execute once when scheduled.
+partials.processor-details.read-only-processor-comments=Comments
+#-------------------------------------------------
+# partials
+# status-history-dialog
+partials.status-history-dialog.LastUpdated=Last updated
+partials.status-history-dialog.Close=Close
+partials.status-history-dialog.Refresh=Refresh
+#-------------------------------------------------
+# partials
+# yes-no-dialog
+
+#-------------------------------------------------
+# partials
+# bulletin-board
+#-------------------------------------------------
+# partials
+# bulletin-board-content
+partials.bulletin-board.bulletin-board-content.bulletin-board-header-text=NiFi Bulletin Board
+partials.bulletin-board.bulletin-board-content.bulletin-board-filter=Filter
+partials.bulletin-board.bulletin-board-content.refresh-toggle=Toggle automatic update
+partials.bulletin-board.bulletin-board-content.bulletin-board-refresh-container=Automatic update
+partials.bulletin-board.bulletin-board-content.bulletin-board-last-refreshed-container=Last updated
+partials.bulletin-board.bulletin-board-content.refresh-button=Start/Stop auto refresh
+partials.bulletin-board.Clear=Clear
+#-------------------------------------------------
+# partials
+# canvas
+partials.canvas.about-dailog.Tagged=Tagged
+partials.canvas.about-dailog.From=From
+partials.canvas.about-dailog.OnBranch=on branch
+partials.canvas.about-dailog.nf-version=Apache NiFi is a framework to support highly scalable and flexible dataflows.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.
+#canvas-header
+partials.canvas.canvas-header.login=login
+partials.canvas.canvas-header.logout=logout
+partials.canvas.canvas-header.help-link=help
+partials.canvas.canvas-header.about-link=about
+partials.canvas.canvas-header.reporting-link=Summary
+partials.canvas.canvas-header.counters-link=Counters
+partials.canvas.canvas-header.history-link=Flow Configuration History
+partials.canvas.canvas-header.provenance-link=Data Provenance
+partials.canvas.canvas-header.flow-settings-link=Controller Settings
+partials.canvas.canvas-header.templates-link=Templates
+partials.canvas.canvas-header.users-link=Users
+partials.canvas.canvas-header.cluster-link=Cluster
+partials.canvas.canvas-header.bulletin-board-link=Bulletin Board
+partials.canvas.canvas-header.policies-link=Policies
+component-state-dialog
+partials.canvas.component-state-dialog.Name=Name
+partials.canvas.component-state-dialog.Description=Description
+partials.canvas.component-state-dialog.component-state-partial-results-container=Part of the answer is displayed
+partials.canvas.component-state-dialog.component-state-filter-status1=Displaying
+partials.canvas.component-state-dialog.component-state-filter-status2=of
+partials.canvas.component-state-dialog.clear-link=Empty Status
+partials.canvas.component-state-dialog.component-state-filter=Filter
+#connection-configuration
+partials.canvas.connection-configuration.Name=Name
+partials.canvas.connection-configuration.Id=Id
+partials.canvas.connection-configuration.FlowFileExpiration=FlowFile expiration
+partials.canvas.connection-configuration.FlowFileExpiration.title=The maximum amount of time an object may be in the flow before it will be automatically aged out of the flow.
+partials.canvas.connection-configuration.BackPressureObjectThreshold=Back pressure object threshold
+partials.canvas.connection-configuration.BackPressureObjectThreshold.Title=The maximum number of objects that can be queued before back pressure is applied.
+partials.canvas.connection-configuration.BackPressureDataSizeThreshold=Back pressure data size threshold
+partials.canvas.connection-configuration.BackPressureDataSizeThreshold.Title=The maximum data size of objects that can be queued before back pressure is applied.
+partials.canvas.connection-configuration.AvailablePrioritizers=Available prioritizers
+partials.canvas.connection-configuration.AvailablePrioritizers.title=Available prioritizers that could reprioritize FlowFiles in this work queue.
+partials.canvas.connection-configuration.SelectedPrioritizers=Selected Prioritizers
+partials.canvas.connection-configuration.SelectedPrioritizers.title=Prioritizers that have been selected to reprioritize FlowFiles in this work queue.
+partials.canvas.connection-configuration.FromOutput=From output
+partials.canvas.connection-configuration.FromInput=From input
+partials.canvas.connection-configuration.FromFunnel=From funnel
+partials.canvas.connection-configuration.Funnel=funnel
+partials.canvas.connection-configuration.FromProcessor=From processor
+partials.canvas.connection-configuration.WithinGroup=Within group
+partials.canvas.connection-configuration.ForRelationships=For relationships
+partials.canvas.connection-configuration.ToInput=To input
+partials.canvas.connection-configuration.ToOutput=To output
+partials.canvas.connection-configuration.ToFunnel=To funnel
+partials.canvas.connection-configuration.ToProcessor=To processor
+partials.canvas.connection-configuration.WithinGroup=Within group
+#connections-dialog
+partials.canvas.connections-dialog.SelectedComponent=Selected component
+partials.canvas.connections-dialog.Source=Source
+partials.canvas.connections-dialog.Destination=Destination
+#controller-service-configuration
+partials.canvas.controller-service-configuration.Name=Name
+partials.canvas.controller-service-configuration.Id=Id
+partials.canvas.controller-service-configuration.Type=Type
+partials.canvas.controller-service-configuration.Availability=Availability
+partials.canvas.controller-service-configuration.Availability.title=Where this controller service is available.
+partials.canvas.controller-service-configuration.ReferencingComponents=Referencing Components
+partials.canvas.controller-service-configuration.ReferencingComponents.title=Other components referencing this controller service.
+partials.canvas.controller-service-configuration.Comments=Comments
+#disable-controller-service-dialog
+partials.canvas.disable-controller-service-dialog.Service=Service
+partials.canvas.disable-controller-service-dialog.Scope=Scope
+partials.canvas.disable-controller-service-dialog.Scope.setting-field=Service and referencing components
+partials.canvas.disable-controller-service-dialog.Scope.setting-field.title=Referencing components must be disabled/stopped in order to disable this service.
+partials.canvas.disable-controller-service-dialog.disable-controller-service-progress.1=Stopping referencing processors and reporting tasks
+partials.canvas.disable-controller-service-dialog.disable-controller-service-progress.2=Disabling referencing controller services
+partials.canvas.disable-controller-service-dialog.disable-controller-service-progress.3=Disabling this controller service
+partials.canvas.disable-controller-service-dialog.ReferencingComponents=Referencing Components
+partials.canvas.disable-controller-service-dialog.ReferencingComponents.title=Other components referencing this controller service.
+partials.canvas.disable-controller-service-dialog.canceling=Canceling
+#drop-request-status-dialog
+#enable-controller-service-dialog
+partials.canvas.enable-controller-service-dialog.enable-controller-service-progress.1=Enabling this controller service
+partials.canvas.enable-controller-service-dialog.enable-controller-service-progress.2=Enabling referencing controller services
+partials.canvas.enable-controller-service-dialog.enable-controller-service-progress.3=Starting referencing processors and reporting tasks
+partials.canvas.enable-controller-service-dialog.ReferencingComponents=Referencing Components
+partials.canvas.enable-controller-service-dialog.ReferencingComponents.title=Other components referencing this controller service.
+partials.canvas.enable-controller-service-dialog.Canceling=Canceling
+partials.canvas.enable-controller-service-dialog.Service=Service
+partials.canvas.enable-controller-service-dialog.Scope=Scope
+#fill-color-dialog
+partials.canvas.fill-color-dialog.Color=Color
+partials.canvas.fill-color-dialog.Value=Value
+partials.canvas.fill-color-dialog.Preview=Preview
+partials.canvas.fill-color-dialog.Processor=Processor
+partials.canvas.fill-color-dialog.Label=Label
+partials.canvas.fill-color-dialog.ProcessorName=Processor Name
+#flow-status
+partials.canvas.flow-status.ActiveThreads=Active threads:
+partials.canvas.flow-status.Queued=Queued:
+partials.canvas.flow-status.connected-nodes-element=Connected nodes:
+partials.canvas.flow-status.flow-status-property-element=Stats last refreshed:
+partials.canvas.flow-status.refresh-required-link=Refresh
+partials.canvas.flow-status.search-field=Filter
+#flowfile-details-dialog
+partials.canvas.flowfile-details-dialog.detail=Flow Files Detail
+partials.canvas.flowfile-details-dialog.filename=File Name
+partials.canvas.flowfile-details-dialog.filesize=File Size
+partials.canvas.flowfile-details-dialog.queuelocation=Queue Location
+partials.canvas.flowfile-details-dialog.queueduration=Queuing Duration
+partials.canvas.flowfile-details-dialog.lineageduration=Follow the time
+partials.canvas.flowfile-details-dialog.penalized=Punishment
+partials.canvas.flowfile-details-dialog.contentclaim=Content Statement
+partials.canvas.flowfile-details-dialog.container=Container
+partials.canvas.flowfile-details-dialog.section=Area
+partials.canvas.flowfile-details-dialog.identifier=Id
+partials.canvas.flowfile-details-dialog.offset=Offset
+partials.canvas.flowfile-details-dialog.size=Size
+partials.canvas.flowfile-details-dialog.download=Download
+partials.canvas.flowfile-details-dialog.view=View
+partials.canvas.flowfile-details-dialog.attributevalue=Attribute Value
+#instantiate-template-dialog
+partials.canvas.instantiate-template-dialog.choosetmplate=Choose Tmplate
+#label-configuration
+partials.canvas.label-configuration.LabelValue=Label Value
+partials.canvas.label-configuration.fontSize=Font Size
+partials.canvas.label-configuration.label-configuration-apply=Apply
+partials.canvas.label-configuration.label-configuration-cancel=Cancel
+#navigation
+partials.canvas.navigation.Navigate=Navigate
+partials.canvas.navigation.Operate=Operate
+partials.canvas.navigation.Delete=Delete
+partials.canvas.navigation.PanUp=Pan Up
+partials.canvas.navigation.PanLeft=Pan Left
+partials.canvas.navigation.PanRight=Pan Right
+partials.canvas.navigation.PanDown=Pan Down
+partials.canvas.navigation.zoom-in-button=Zoom In
+partials.canvas.navigation.zoom-out-button=Zoom Out
+partials.canvas.navigation.zoom-fit-button=Fit
+partials.canvas.navigation.zoom-actual-button=Actual Size
+partials.canvas.navigation.configuration=Configuration
+partials.canvas.navigation.accesspolicies=Access Policies
+partials.canvas.navigation.enable=Enable
+partials.canvas.navigation.disable=Disable
+partials.canvas.navigation.start=Start
+partials.canvas.navigation.stop=Stop
+partials.canvas.navigation.createTemplate=Create Template
+partials.canvas.navigation.uploadTemplate=Upload Template
+partials.canvas.navigation.copy=Copy
+partials.canvas.navigation.paste=Paste
+partials.canvas.navigation.group=Group
+partials.canvas.navigation.fillcolor=Fill Color
+partials.canvas.navigation.chagecolor=Change Color
+partials.canvas.navigation.delete=Delete
+#new-controller-service-dialog
+partials.canvas.new-controller-service-dialog.TagCloud=Tag Cloud
+partials.canvas.new-controller-service-dialog.Displaying=Displaying&nbsp;
+partials.canvas.new-controller-service-dialog.Of=&nbsp;of&nbsp;
+partials.canvas.new-controller-service-dialog.controller-service-type-name-title=Selected controller service
+partials.canvas.new-controller-service-dialog.Tags=Tags
+partials.canvas.new-controller-service-dialog.AvailableOn=Available on
+partials.canvas.new-controller-service-dialog.controller-service-type-filter=Filter
+#new-port-dialog
+partials.canvas.new-port-dialog.Input=Input
+partials.canvas.new-port-dialog.portname=Port Name
+#new-process-group-dialog
+partials.canvas.new-process-group-dialog.ProcessGroupName=Process group name
+#new-processor-dialog
+partials.canvas.new-processor-dialog.TagCloud=Tag Cloud
+partials.canvas.new-processor-dialog.Displaying=Displaying&nbsp;
+partials.canvas.new-processor-dialog.Of=&nbsp;of&nbsp;
+anvas.new-processor-dialog.processor-type-name-title=Selected Processor
+partials.canvas.new-processor-dialog.Tags=Tags
+partials.canvas.new-processor-dialog.processor-type-filter-container=Filter
+#new-remote-process-group-dialog
+partials.canvas.new-remote-process-group-dialog.URL=URL
+partials.canvas.new-remote-process-group-dialog.circle=Specify the remote target NiFi URLs. Multiple URLs can be specified in comma-separated format. Different protocols cannot be mixed. If remote NiFi is a cluster, two or more node URLs are recommended for better connection establishment availability.
+partials.canvas.new-remote-process-group-dialog.Transport=Transfer Protocol
+partials.canvas.new-remote-process-group-dialog.TransportTitle=Specifies that the transport protocol uses this remote processing group to communicate
+partials.canvas.new-remote-process-group-dialog.LocalNetwork=Local Network Interface
+partials.canvas.new-remote-process-group-dialog.LocalNetworkTitle=The local network interface to send/receive data. If not specified, any local address is used. If clustered, all nodes must have an interface with this identifier.
+partials.canvas.new-remote-process-group-dialog.HttpProxyHostname=Http server proxy address
+partials.canvas.new-remote-process-group-dialog.HttpProxyHostnameTitle=Specifies the name of the proxy server to use. If not specified, HTTP traffic is sent directly to the target where the NIFI application occurs.
+partials.canvas.new-remote-process-group-dialog.HttpProxyPort=Http server proxy port
+partials.canvas.new-remote-process-group-dialog.HttpProxyPortTitle=Specifies the port number of the proxy server, optional. If not specified, the default is 80 ports.
+partials.canvas.new-remote-process-group-dialog.HttpProxyUser=Http proxy user name
+partials.canvas.new-remote-process-group-dialog.HttpProxyUserTitle=Specifies the user name to connect to the proxy server, optional.
+partials.canvas.new-remote-process-group-dialog.HttpProxyPassword=Http proxy password
+partials.canvas.new-remote-process-group-dialog.HttpProxyPasswordTitle=Specify the password to connect to the proxy server, optional.
+partials.canvas.new-remote-process-group-dialog.timeout=Time out
+partials.canvas.new-remote-process-group-dialog.timeoutTitle=When communication with this remote process group takes longer, it will time out.
+partials.canvas.new-remote-process-group-dialog.yield=Yield duration
+#override-policy-dialog
+partials.canvas.override-policy-dialog.content=Do you want to override with a copy of the inherited policy or an empty policy?
+partials.canvas.override-policy-dialog.Copy=Copy
+partials.canvas.override-policy-dialog.Empty=Empty
+#new-reporting-task-dialog
+partials.canvas.new-reporting-task-dialog.TagCloud=Tag Cloud
+partials.canvas.new-reporting-task-dialog.Displaying=Displaying&nbsp;
+partials.canvas.new-processor-dialog.Of=&nbsp;of&nbsp;
+partials.canvas.new-reporting-task-dialog.Tags=Tags
+partials.canvas.new-reporting-task-dialog.ReportTask=Selected report task
+partials.canvas.new-reporting-task-dialog.AvailableOn=Available on
+partials.canvas.new-reporting-task-dialog.reporting-task-type-filter=Filter
+#new-template-dialog
+partials.canvas.new-template-dialog.Name=Name
+partials.canvas.new-template-dialog.Description=Description
+#policy-management
+partials.canvas.policy-management.policy-management-header-text=Acess Policies
+partials.canvas.policy-management.create-policy-link=Create
+partials.canvas.policy-management.new-policy-message=A new policy
+partials.canvas.policy-management.override-policy-link=Override
+partials.canvas.policy-management.override-policy-message=The Policy
+partials.canvas.policy-management.add-local-admin-link=Add
+partials.canvas.policy-management.add-local-admin-message=Other administrator policies
+partials.canvas.policy-management.policy-selected-component-type1=Template
+partials.canvas.policy-management.policy-selected-component-type2=Service Controller
+partials.canvas.policy-management.policy-selected-component-type3=Task Report
+partials.canvas.policy-management.last-refreshed-container=Last Updated
+partials.canvas.policy-management.admin-policy-message=Only the component-specific administrator is listed. The inherited administrator does not display.
+partials.canvas.policy-management.policy-refresh-button=Refresh
+#port-configuration
+partials.canvas.port-configuration.PortName=Port name
+partials.canvas.port-configuration.Enabled=Enabled
+partials.canvas.port-configuration.Id=Id
+partials.canvas.port-configuration.ConcurrentTasks=Concurrent tasks
+partials.canvas.port-configuration.ConcurrentTasks.title=The number of tasks that should be concurrently scheduled for this port.
+partials.canvas.port-configuration.Comments=Comments
+#port-details
+partials.canvas.port-details.PortName=Port name
+partials.canvas.port-details.Id=Id
+partials.canvas.port-details.Comments=Comments
+#process-group-configuration
+partials.canvas.process-group-configuration.process-group-configuration-header-text=Process Group Configuration
+partials.canvas.process-group-configuration.ProcessGroupName=Process Group Name
+partials.canvas.process-group-configuration.Processgroupcomments=Process Group Comment
+partials.canvas.process-group-configuration.process-group-configuration-save=Apply
+partials.canvas.process-group-configuration.last-refreshed-container=Last Updated
+partials.canvas.process-group-configuration.process-group-configuration-refresh-button=Refresh
+partials.canvas.process-group-configuration.Name=Name
+partials.canvas.process-group-configuration.Id=Id
+partials.canvas.process-group-configuration.Comments=Comments
+partials.canvas.process-group-configuration.availability=Listed services are available to all descendant Processors and services of this Process Group.
+#process-group-details
+partials.canvas.process-group-details.Name=Name
+partials.canvas.process-group-details.Id=Id
+partials.canvas.process-group-details.Comments=Comments
+#processor-configuration
+partials.canvas.processor-configuration.Name=Name
+partials.canvas.processor-configuration.Enabled=Enabled
+partials.canvas.processor-configuration.Id=Id
+partials.canvas.processor-configuration.Type=Type
+partials.canvas.processor-configuration.PenaltyDuration=Penalty duration
+partials.canvas.processor-configuration.PenaltyDuration.title=The amount of time used when this processor penalizes a FlowFile.
+partials.canvas.processor-configuration.YieldDuration=Yield duration
+partials.canvas.processor-configuration.YieldDuration.title=When a processor yields, it will not be scheduled again until this amount of time elapses.
+partials.canvas.processor-configuration.BulletinLevel=Bulletin level
+partials.canvas.processor-configuration.BulletinLevel.title=The level at which this processor will generate bulletins.
+partials.canvas.processor-configuration.AutoTerminateRelationships=Auto terminate relationships
+partials.canvas.processor-configuration.AutoTerminateRelationships.title Will automatically terminate FlowFiles sent to a given relationship if it is not defined elsewhere.
+partials.canvas.processor-configuration.SchedulingStrategy=Scheduling strategy
+partials.canvas.processor-configuration.SchedulingStrategy.title=The strategy used to schedule this processor.
+partials.canvas.processor-configuration.event-driven-warning=This strategy is experimental
+partials.canvas.processor-configuration.ConcurrentTasks=Concurrent tasks
+partials.canvas.processor-configuration.ConcurrentTasks.title=The number of tasks that should be concurrently scheduled for this processor.
+partials.canvas.processor-configuration.RunSchedule=Run schedule
+partials.canvas.processor-configuration.RunSchedule.title.1=The amount of time that should elapse between task executions.
+partials.canvas.processor-configuration.RunSchedule.title.2=The CRON expression that defines when this processor should run.
+partials.canvas.processor-configuration.RunDuration=Run duration
+partials.canvas.processor-configuration.RunDuration.title=When scheduled to run, the processor will continue running for up to this duration. A run duration of 0ms will execute once when scheduled.
+partials.canvas.processor-configuration.Execution=Execution
+partials.canvas.processor-configuration.ExecutionTitle=The node(s) that this processor will be scheduled to run on.
+partials.canvas.processor-configuration.LowerLatency=Lower latency
+partials.canvas.processor-configuration.HigherThroughput=Higher throughput
+partials.canvas.processor-configuration.HigherThroughput.Warning=Source Processors with a run duration greater than 0ms and no incoming connections could lose data when NiFi is shutdown.
+#queue-listing
+partials.canvas.queue-listing.queue-listing-refresh-button=Refresh
+partials.canvas.queue-listing.queue-listing-stats-deploy=Deploy
+partials.canvas.queue-listing.queue-listing-stats-of=of
+partials.canvas.queue-listing.lastUpdate=Last Updated  
+#registration
+partials.canvas.registration.register-title=You are not authorized to access this data flow
+partials.canvas.registration.expand-registration-text=Request Access
+partials.canvas.registration.registration-form.setting-name=Justification
+partials.canvas.registration.registration-form.remaining-characters=characters remaining
+partials.canvas.registration.registration-form.registration-form-submit=Submit
+#remote-port-configuration
+partials.canvas.remote-port-configuration.Name=Name
+partials.canvas.remote-port-configuration.ConcurrentTasks=Concurrent tasks
+partials.canvas.remote-port-configuration.ConcurrentTasks.title=The number of tasks that should be concurrently scheduled for this port.
+partials.canvas.remote-port-configuration.remote-port-use-compression=Compressed
+#remote-process-group-configuration
+partials.canvas.remote-process-group-configuration.Name=Name
+partials.canvas.remote-process-group-configuration.Id=Id
+partials.canvas.remote-process-group-configuration.URL=URL
+partials.canvas.remote-process-group-configuration.TransportProtocol=Transfer Protocol
+partials.canvas.remote-process-group-configuration.TransportProtocolTitle=Specifies the transport protocol used for this remote process group communication.
+partials.canvas.remote-process-group-configuration.hostname=HTTP proxy server name
+partials.canvas.remote-process-group-configuration.hostnameTitle=Specifies the host name of the proxy server to use. If not specified, HTTP traffic will be sent directly to the target NiFi application.
+partials.canvas.remote-process-group-configuration.port=HTTP proxy server port
+partials.canvas.remote-process-group-configuration.portTitle=Specifies the port number of the proxy server, optional. If not specified, the default port 80 will be used.
+partials.canvas.remote-process-group-configuration.user=HTTP proxy user
+partials.canvas.remote-process-group-configuration.userTitle=Specifies the user name to connect to the proxy server.
+partials.canvas.remote-process-group-configuration.pwd=HTTP proxy password
+partials.canvas.remote-process-group-configuration.pwdTitle=Specifies the user password to connect to the proxy server, optionally.
+partials.canvas.remote-process-group-configuration.LocalNetwork=Local NetWork Interface
+partials.canvas.remote-process-group-configuration.LocalNetworkTitle=The local network interface to send/receive data. If not specified, any local address is used. If clustered, all nodes must have an interface with this identifier.
+partials.canvas.remote-process-group-configuration.CommunicationsTimeoutTitle=\u5f53\u4e0e\u6b64\u8fdc\u7a0b\u8fdb\u7a0b\u7ec4\u7684\u901a\u4fe1\u6240\u82b1\u8d39\u7684\u65f6\u95f4\u8d85\u8fc7\u6b64\u65f6\u95f4\u91cf\u65f6\u002c\u5b83\u5c06\u8d85\u65f6\u002e
+partials.canvas.remote-process-group-configuration.CommunicationsTimeout=Communications timeout
+partials.canvas.remote-process-group-configuration.YieldDuration=Yield duration
+partials.canvas.remote-process-group-configuration.YieldDuration.title=When communication with this remote process group fails, it will not be scheduled again until this amount of time elapses.
+#remote-process-group-details
+partials.canvas.remote-process-group-details.Name=Name
+partials.canvas.remote-process-group-details.Id=Id
+partials.canvas.remote-process-group-details.URL=URL
+partials.canvas.remote-process-group-details.TransportProtocol=Transfer Protocol
+partials.canvas.remote-process-group-details.TransportProtocolTitle=Specifies the transport protocol used for this remote process group communication.
+partials.canvas.remote-process-group-details.hostname=HTTP proxy server name
+partials.canvas.remote-process-group-details.hostnameTitle=Specifies the host name of the proxy server to use. If not specified, HTTP traffic will be sent directly to the target NiFi application.
+partials.canvas.remote-process-group-details.LocalNetwork=Local NetWork Interface
+partials.canvas.remote-process-group-details.LocalNetworkTitle=The local network interface to send/receive data. If not specified, any local address is used. If clustered, all nodes must have an interface with this identifier.
+partials.canvas.remote-process-group-details.port=HTTP proxy server port
+partials.canvas.remote-process-group-details.portTitle=Specifies the port number of the proxy server, optional. If not specified, the default port 80 will be used.
+partials.canvas.remote-process-group-details.user=HTTP proxy user
+partials.canvas.remote-process-group-details.userTitle=Specifies the user name to connect to the proxy server.
+partials.canvas.remote-process-group-details.pwd=HTTP proxy password
+partials.canvas.remote-process-group-details.pwdTitle=Specifies the user password to connect to the proxy server, optionally.
+partials.canvas.remote-process-group-details.CommunicationsTimeout=Communications timeout
+partials.canvas.remote-process-group-details.CommunicationsTimeoutTitle=When the time spent on communication with this remote process group exceeds this amount of time, it will time out.
+partials.canvas.remote-process-group-details.YieldDuration=Yield duration
+partials.canvas.remote-process-group-details.YieldDuration.title=When communication with this remote process group fails, it will not be scheduled again until this amount of time elapses.
+#remote-process-group-ports
+partials.canvas.remote-process-group-ports.Name=Name
+partials.canvas.remote-process-group-ports.InputPorts=Input ports
+partials.canvas.remote-process-group-ports.URL=URL
+partials.canvas.remote-process-group-ports.OutputPorts=Output ports
+#reporting-task-configuration
+partials.canvas.reporting-task-configuration.Name=Name
+partials.canvas.reporting-task-configuration.Enabled=Enabled
+partials.canvas.reporting-task-configuration.Id=Id
+partials.canvas.reporting-task-configuration.Type=Type
+partials.canvas.reporting-task-configuration.Availability=Availability
+partials.canvas.reporting-task-configuration.Availability.title=Where this controller service is available.
+partials.canvas.reporting-task-configuration.SchedulingStrategy=Scheduling strategy
+partials.canvas.reporting-task-configuration.SchedulingStrategy.title=The strategy used to schedule this reporting task.
+partials.canvas.reporting-task-configuration.RunSchedule=Run schedule
+partials.canvas.reporting-task-configuration.RunSchedule.title=The amount of time that should elapse between task executions.
+partials.canvas.reporting-task-configuration.Comments=Comments
+#secure-port-configuration
+partials.canvas.secure-port-configuration.PortName=Port name
+partials.canvas.secure-port-configuration.Enable=Enable
+partials.canvas.secure-port-configuration.Id=Id
+partials.canvas.secure-port-configuration.ConcurrentTasks=Concurrent tasks
+partials.canvas.secure-port-configuration.ConcurrentTasks.title=The number of tasks that should be concurrently scheduled for this port.
+partials.canvas.secure-port-configuration.Comments=Comments
+partials.canvas.secure-port-configuration.SearchUsers=Search Users
+partials.canvas.secure-port-configuration.AllowedUsers=Allowed Users
+partials.canvas.secure-port-configuration.AllowedGroups=Allowed Groups
+#secure-port-details
+partials.canvas.secure-port-details.PortName=Port name
+partials.canvas.secure-port-details.Id=Id
+partials.canvas.secure-port-details.ConcurrentTasks=Concurrent tasks
+partials.canvas.secure-port-details.ConcurrentTasks.title=The number of tasks that should be concurrently scheduled for this port.
+partials.canvas.secure-port-details.Comments=Comments
+partials.canvas.secure-port-details.AllowedUsers=Allowed Users
+partials.canvas.secure-port-details.AllowedGroups=Allowed Groups
+#search-users-dialog
+partials.canvas.search-users-dialog.search-users-field=\u7528\u6237\u8eab\u4efd
+partials.canvas.search-users-dialog.SelectedUsers=Selected Users
+partials.canvas.search-users-dialog.SelectedGroups=Selected Groups
+#settings-content
+partials.canvas.settings-content.new-service-or-task=Create a new controller service
+partials.canvas.settings-content.settings-header-text=Data flow configuration
+partials.canvas.settings-content.setting1=Maximum number of timer drivers
+partials.canvas.settings-content.setting1-title=The maximum number of threads that the system can use to drive the processor.
+partials.canvas.settings-content.setting2=Maximum event-driven thread count
+partials.canvas.settings-content.setting2-title=Event-driven processor can be used for the maximum number of threads in the system.
+partials.canvas.settings-content.settings-save=Apply
+partials.canvas.settings-content.LastUpdated=Last updated:&nbsp;
+partials.canvas.settings-content.DataFlowName=Data flow name
+partials.canvas.settings-content.Refresh=Refresh
+partials.canvas.settings-content.Apply=Apply
+partials.canvas.settings-content.archive-flow-link=Back-up flow
+partials.canvas.settings-content.archive-flow-link.title=Archives the flow configuration.
+partials.canvas.settings-content.DataFlowComments=Data flow comments
+partials.canvas.settings-content.MaximumTimerDrivenThreadCoun=Maximum number of time-driven threads
+partials.canvas.settings-content.MaximumTimerDrivenThreadCount=Maximum timer driven thread count
+partials.canvas.settings-content.MaximumTimerDrivenThreadCount.title=The maximum number of threads for timer driven processors available to the system.
+partials.canvas.settings-content.MaximumEventDrivenThreadCount=Maximum event driven thread count
+partials.canvas.settings-content.MaximumEventDrivenThreadCount.title=The maximum number of threads for event driven processors available to the system.
+partials.canvas.settings-content.container=Listed services are available to all Reporting Tasks and services defined in the Controller Settings.
+#shell
+partials.canvas.shell.shell-undock-button=Open in a new window
+partials.canvas.shell.shell-close-button=Close
+partials.canvas.shell.OpenNewWindows=Open in New Window
+paritals.canvas.shell.Close=Close
+#upload-template-dialog
+partials.cancas.upload-template-dialog.select-template-label=Select the template
+partials.cancas.upload-template-dialog.template-file-field=Browse
+#-------------------------------------------------
+# partials
+# cluster
+# cluster-content
+partials.cluster.cluster-content.NiFiCluster=NiFi Cluster
+partials.cluster.cluster-content.Displaying=Displaying&nbsp;
+partials.cluster.cluster-content.LastUpdated=Last updated:&nbsp;
+partials.cluster.cluster-content.Of=&nbsp;of&nbsp;
+partials.cluster.cluster-content.Filter=Filter
+partials.cluster.cluster-content.Refresh=Refresh
+#node-details-dialog
+partials.cluster.node-details-dialog.Address=Address
+partials.cluster.node-details-dialog.NodeId=Node Id
+partials.cluster.node-details-dialog.NodeEvents=Node Events
+#-------------------------------------------------
+# partials
+# counters
+# counters-content
+partials.counters.counters-content.counters-header-text=Nifi Counters
+partials.counters.counters-content.Displaying=Displaying&nbsp;
+partials.counters.counters-content.Of=&nbsp;of&nbsp;
+partials.counters.counters-content.LastUpdated=Last updated:&nbsp;
+partials.counters.counters-content.Filter=Filter
+partials.counters.counters-content.Refresh=Refresh
+#-------------------------------------------------
+# partials
+# history
+# action-details-dialog
+# history-content
+partials.history.history-content.history-header-text=NiFi History
+partials.history.history-content.Refresh=Refresh
+partials.history.history-content.LastUpdated=Last updated:&nbsp;
+partials.history.history-content.history-filter-overview=A filter has been applied.
+partials.history.history-content.clear-history-filter=Clear filter
+partials.history.history-content.Filter=Filter
+partials.history.history-content.Purge=Purge
+paritals.history.history-content.cluster-history-message=View only the history of the current node. Browse another node to view its history.
+paritals.history.history-content.history-last-refreshed-container=Last updated:
+paritals.history.history-content.history-filter-button.title=Filter history
+paritals.history.history-content.history-purge-button.title=Clear history
+paritals.history.history-content.refresh-button.title=Refresh
+# history-filter-dialog
+partials.history.history-filter-dialog.Filter=Filter
+partials.history.history-filter-dialog.StartDate=Start date
+partials.history.history-filter-dialog.StartDate.title=The start date in the format 'mm/dd/yyyy'. Must also specify start time.
+partials.history.history-filter-dialog.StartTime=Start time
+partials.history.history-filter-dialog.StartTime.title=The start time in the format 'hh:mm:ss'. Must also specify start date.
+partials.history.history-filter-dialog.EndDate=End date
+partials.history.history-filter-dialog.EndDate.title=The end date in the format 'mm/dd/yyyy'. Must also specify end time.
+partials.history.history-filter-dialog.EndTime=End time
+partials.history.history-filter-dialog.EndTime.title=The end time in the format 'hh:mm:ss'. Must also specify end date.
+# history-purge-dialog
+partials.history.history-purge-dialog.Title1=Clear the end date format is 'mm / dd / yyyy'. The clear end date format is 'mm / dd / yyyy'. You must also specify the end time.
+partials.history.history-purge-dialog.Title2=The end time format is 'hh: mm: ss', and the end date must also be specified.
+partials.history.history-purge-dialog.EndDate=End date
+partials.history.history-purge-dialog.EndDate.title=The purge end date in the format 'mm/dd/yyyy'. Must also specify end time.
+partials.history.history-purge-dialog.EndTime=End time
+partials.history.history-purge-dialog.EndTime.title=The end time in the format 'hh:mm:ss'. Must also specify end date.
+
+#-------------------------------------------------
+# partials
+# login
+# login-form
+paritals.login.login-form.login-title=Login
+paritals.login.login-form.Username=Username
+paritals.login.login-form.Password=Password
+paritals.login.login-form.User=User
+# login-message
+# login-progress
+# login-submission
+paritals.login.login-submission.login-submission-button==Login
+
+#-------------------------------------------------
+# partials
+# provenance
+# lineage-query-dialog
+# provenance-content
+partials.provenance.provenance-content.provenance-header-text=NiFi Data Provenance
+partials.provenance.provenance-content.Displaying=Displaying
+partials.provenance.provenance-content.oldest-event-message=Oldest event available:
+partials.provenance.provenance-content.LastUpdated=Last updated:
+partials.provenance.provenance-content.clear-provenance-search=Clear search
+partials.provenance.provenance-content.Search=Search
+partials.provenance.provenance-content.Refresh=Refresh
+partials.provenance.provenance-content.Download=Download
+partials.provenance.provenance-content.Close=Close
+paritals.provenance.provenance-content.refresh-button.title=Refresh
+paritals.provenance.provenance-content.provenance-lineage-downloader.title=Download
+paritals.provenance.provenance-content.provenance-lineage-closer.title=Returns the event list
+paritals.provenance.provenance-content.provenance-filter-container=Filter
+# provenance-event-details-dialog
+partials.provenance.provenance-event-details-dialog.Time=Time
+partials.provenance.provenance-event-details-dialog.EventDuration=Event Duration
+partials.provenance.provenance-event-details-dialog.LineageDuration=Lineage Duration
+partials.provenance.provenance-event-details-dialog.Type=Type
+partials.provenance.provenance-event-details-dialog.FlowFileUuid=FlowFile Uuid
+partials.provenance.provenance-event-details-dialog.FileSize=File Size
+partials.provenance.provenance-event-details-dialog.ComponentId=Component Id
+partials.provenance.provenance-event-details-dialog.ComponentName=Component Name
+partials.provenance.provenance-event-details-dialog.ComponentType=Component Type
+partials.provenance.provenance-event-details-dialog.Details=Details
+partials.provenance.provenance-event-details-dialog.ParentFlowFiles=Parent FlowFiles
+partials.provenance.provenance-event-details-dialog.ChildFlowFiles=Child FlowFiles
+partials.provenance.provenance-event-details-dialog.AttributeValues=Attribute Values
+partials.provenance.provenance-event-details-dialog.OnlyShowModified=Only show modified
+partials.provenance.provenance-event-details-dialog.InputClaim=Input Claim
+partials.provenance.provenance-event-details-dialog.Container=Container
+partials.provenance.provenance-event-details-dialog.Section=Section
+partials.provenance.provenance-event-details-dialog.Identifier=Identifier
+partials.provenance.provenance-event-details-dialog.Offset=Offset
+partials.provenance.provenance-event-details-dialog.Size=Size
+partials.provenance.provenance-event-details-dialog.Download=Download
+partials.provenance.provenance-event-details-dialog.View=View
+partials.provenance.provenance-event-details-dialog.OutputClaim=Output Claim
+partials.provenance.provenance-event-details-dialog.Replay=Replay
+partials.provenance.provenance-event-details-dialog.ConnectionId=Connection Id
+partials.provenance.provenance-event-details-dialog.Submit=Submit
+#provenance-query-dialog
+#provenance-search-dialog
+partials.provenance.provenance-search-dialog.Fields=Fields
+partials.provenance.provenance-search-dialog.no-searchable-fields=No searchable fields have been configured.
+partials.provenance.provenance-search-dialog.StartDate=Start date
+partials.provenance.provenance-search-dialog.StartDate.title=The start date in the format 'mm/dd/yyyy'. Must also specify start time.
+partials.provenance.provenance-search-dialog.StartTime=Start time
+partials.provenance.provenance-search-dialog.StartTime.title=The start time in the format 'hh:mm:ss'. Must also specify start date.
+partials.provenance.provenance-search-dialog.EndDate=End date
+partials.provenance.provenance-search-dialog.EndDate.title=The end date in the format 'mm/dd/yyyy'. Must also specify end time.
+partials.provenance.provenance-search-dialog.EndTime=End time
+partials.provenance.provenance-search-dialog.EndTime.title=The end time in the format 'hh:mm:ss'. Must also specify end date.
+partials.provenance.provenance-search-dialog.MinimumFileSize=Minimum file size
+partials.provenance.provenance-search-dialog.MinimumFileSize.title=The minimum file size (e.g. 2 KB).
+partials.provenance.provenance-search-dialog.MaximumFileSize=Maximum file size
+partials.provenance.provenance-search-dialog.MaximumFileSize.title=The maximum file size (e.g. 4 GB).
+partials.provenance.provenance-search-dialog.SearchLocation=Search location
+#-------------------------------------------------
+# partials
+# summary
+# cluster-connection-summary-dialog
+partials.summary.cluster-connection-summary-dialog.LastUpdated=Last updated:
+partials.summary.cluster-connection-summary-dialog.Refresh=Refresh
+# cluster-input-port-summary-dialog
+partials.summary.cluster-input-port-summary-dialog.LastUpdated=Last updated:
+partials.summary.cluster-input-port-summary-dialog.Refresh=Refresh
+# cluster-output-port-summary-dialog
+partials.summary.cluster-output-port-summary-dialog.LastUpdated=Last updated:
+partials.summary.cluster-output-port-summary-dialog.Refresh=Refresh
+# cluster-process-group-summary-dialog
+partials.summary.cluster-process-group-summary-dialog.LastUpdated=Last updated:
+partials.summary.cluster-process-group-summary-dialog.Refresh=Refresh
+# cluster-processor-summary-dialog
+partials.summary.cluster-processor-summary-dialog.LastUpdated=Last updated:
+partials.summary.cluster-processor-summary-dialog.Refresh=Refresh
+
+# cluster-remote-process-group-summary-dialog
+partials.summary.cluster-remote-process-group-summary-dialog.LastUpdated=Last updated:
+partials.summary.cluster-remote-process-group-summary-dialog.Refresh=Refresh
+# summary-content
+partials.summary.summary-content.summary-header-text=NiFi Summary
+partials.summary.summary-content.Displaying=Displaying&nbsp;
+partials.summary.summary-content.Of=&nbsp;of&nbsp;
+partials.summary.summary-content.View=View:
+partials.summary.summary-content.SingleNode=Single node
+partials.summary.summary-content.Cluster=Cluster
+partials.summary.summary-content.Refresh=Refresh
+partials.summary.summary-content.LastUpdated=Last updated:
+partials.summary.summary-content.SystemDiagnostics=system diagnostics
+partials.summary.summary-content.summary-filter-container=Filter
+# system-diagnostics-dialog
+partials.summary.system-diagnostics-dialog.Refresh=Refresh
+partials.summary.system-diagnostics-dialog.LastUpdated=Last updated:
+partials.summary.system-diagnostics-dialog.Heap=Heap
+partials.summary.system-diagnostics-dialog.Max=Max
+partials.summary.system-diagnostics-dialog.Total=Total
+partials.summary.system-diagnostics-dialog.Used=Used
+partials.summary.system-diagnostics-dialog.Free=Free
+partials.summary.system-diagnostics-dialog.NonHeap=Non heap
+partials.summary.system-diagnostics-dialog.GarbageCollection=Garbage collection
+partials.summary.system-diagnostics-dialog.Runtime=Runtime
+partials.summary.system-diagnostics-dialog.Uptime=Uptime
+partials.summary.system-diagnostics-dialog.AvailableProcessors=Available processors
+partials.summary.system-diagnostics-dialog.ProcessorLoadAverage=Processor load average
+partials.summary.system-diagnostics-dialog.ProcessorLoadAverage.title=Processor load average for the last minute. Not available on all platforms.
+partials.summary.system-diagnostics-dialog.FlowFileRepositoryStorageUsage=FlowFile repository storage usage
+partials.summary.system-diagnostics-dialog.ContentRepositoryStorageUsage=Content repository storage usage
+partials.summary.version-tab-content.nifi=NiFi
+partials.summary.version-tab-content.nifiVersion=NiFi Version
+partials.summary.version-tab-content.tag=Tag
+partials.summary.version-tab-content.buildDate=Build Date/Time
+partials.summary.version-tab-content.branch=Branch
+partials.summary.version-tab-content.revision=Revision
+partials.summary.version-tab-content.Version=Version
+partials.summary.version-tab-content.Vendor=Vendor
+partials.summary.version-tab-content.Operating=Operating System
+partials.summary.version-tab-content.Name=Name
+partials.summary.version-tab-content.Architecture=Architecture
+partials.summary.system-diagnostics-refresh-container.refresh=Refresh
+# view-single-node-dialog
+partials.summary.view-single-node-dialog.cluster-search-example=e.g:
+#-------------------------------------------------
+# partials
+# templates
+# templates-content
+partials.templates.templates-content.templates-header-text=NiFi Templates
+partials.templates.templates-content.Displaying=Displaying&nbsp;
+partials.templates.templates-content.Of=&nbsp;of&nbsp;
+partials.templates.templates-content.LastUpdated=Last updated:&nbsp;
+partials.templates.templates-content.Browse=Browse
+partials.templates.templates-content.Import=Import
+partials.templates.templates-content.Cancel=Cancel
+partials.templates.templates-content.Refresh=Refresh
+partials.templates.templates-content.templates-filter-container=\u8fc7\u6ee4
+#-------------------------------------------------
+# partials
+# users
+# group-revoke-dialog
+partials.users.group-revoke-dialog.dialog-content=Are you sure you want to revoke access for all users in '
+# group-roles-dialog
+partials.users.group-roles-dialog.Group=Group
+partials.users.group-roles-dialog.Roles=Roles
+partials.users.group-roles-dialog.Administrator=Administrator
+partials.users.group-roles-dialog.DataFlowManager=Data Flow Manager
+partials.users.group-roles-dialog.ReadOnly=Read Only
+partials.users.group-roles-dialog.Provenance=Provenance
+partials.users.group-roles-dialog.NiFi=NiFi
+partials.users.group-roles-dialog.Proxy=Proxy
+# user-delete-dialog
+partials.users.user-delete-dialog.user-id-delete-dialog=Are you sure you want to delete the user account for
+# user-dialog
+partials.users.user-dialog.Individual=Individual
+partials.users.user-dialog.Group=Group
+partials.users.user-dialog.Identity=Identity
+partials.users.user-dialog.user-groups=Members of
+partials.users.user-dialog.group-members=Members
+# user-details-dialog
+partials.users.user-details-dialog.User=User
+partials.users.user-details-dialog.DN=DN
+partials.users.user-details-dialog.Created=Created
+partials.users.user-details-dialog.LastVerified=Last Verified
+partials.users.user-details-dialog.Justification=Justification
+# user-group-dialog
+partials.users.user-group-dialog.GroupName=Group name
+# user-revoke-dialog
+partials.users.user-revoke-dialog.user-id-revoke-dialog=Are you sure you want to revoke access for
+# user-roles-dialog
+partials.users.user-roles-dialog.User=User
+partials.users.user-roles-dialog.Justification=Justification
+partials.users.user-roles-dialog.Roles=Roles
+partials.users.user-roles-dialog.Administrator=Administrator
+partials.users.user-roles-dialog.DataFlowManager=Data Flow Manager
+partials.users.user-roles-dialog.ReadOnly=Read Only
+partials.users.user-roles-dialog.Provenance=Provenance
+partials.users.user-roles-dialog.NiFi=NiFi
+partials.users.user-roles-dialog.Proxy=Proxy
+# users-content
+partials.users.users-content.users-header-text=NiFi Users
+partials.users.users-content.Displaying=Displaying&nbsp;
+partials.users.users-content.Of=&nbsp;of&nbsp;
+partials.users.users-content.LastUpdated=Last updated:
+partials.users.users-content.ShowByGroup=Show by group
+partials.users.users-content.Group=Group
+partials.users.users-content.Refresh=Refresh
+partials.users.users-content.users-filter-container=Filter
+
+
+
+
+
+
+
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_jp.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_jp.properties
new file mode 100644
index 000000000000..7c5ed8503a07
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_jp.properties
@@ -0,0 +1,743 @@
+#-------------------------------------------------
+# pages
+# login
+pages.login.title=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u30ed\u30b0\u30a4\u30f3
+# bulletin-board
+pages.bulletin-board.title=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u63b2\u793a\u677f
+#-------------------------------------------------
+# pages
+# canvas
+pages.canvas.title=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc
+#-------------------------------------------------
+# pages
+# cluster
+pages.cluster.title=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u30af\u30e9\u30b9\u30bf\u30fc
+#-------------------------------------------------
+# pages
+# counters
+pages.counters.title=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u30ab\u30a6\u30f3\u30bf
+#-------------------------------------------------
+# pages
+# history
+pages.history.title=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u5c65\u6b74\u60c5\u5831
+#-------------------------------------------------
+# pages
+# message-page
+
+#-------------------------------------------------
+# pages
+# provenance
+pages.provenance.title=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u51fa\u6240
+#-------------------------------------------------
+# pages
+# summary
+pages.summary.title=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u30b5\u30de\u30ea\u30fc
+#-------------------------------------------------
+# pages
+# templates
+pages.templates.title=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8
+#-------------------------------------------------
+# pages
+# users
+pages.users.title=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406
+
+#-------------------------------------------------
+# partials
+# banners-main
+#-------------------------------------------------
+# partials
+# banners-utility
+#-------------------------------------------------
+# partials
+# connection-details
+partials.connection-details.WithinGroup=\u30b0\u30eb\u30fc\u30d7\u5185
+partials.connection-details.Relationships=\u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u30b7\u30c3\u30d7
+partials.connection-details.configuration-tab.read-only-relationship-names-container.title=\u9078\u629e\u3057\u305f\u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u30b7\u30c3\u30d7\u306f\u30b4\u30b7\u30c3\u30af\u4f53\u3067\u3059\u3002
+partials.connection-details.Name=\u540d\u79f0
+partials.connection-details.Id=\u8b58\u5225\u5b50
+partials.connection-details.read-only-flow-file-expiration=\u30d5\u30ed\u30fc\u30d5\u30a1\u30a4\u30eb\u306e\u6709\u52b9\u671f\u9593
+partials.connection-details.read-only-flow-file-expiration.title=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u306b\u304a\u3051\u308b\u30aa\u30d6\u30b8\u30a7\u304f\u306e\u6700\u5927\u6709\u52b9\u671f\u9593
+partials.connection-details.read-only-back-pressure-object-threshold=\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u30d7\u30ec\u30c3\u30b7\u30e3\u30fc\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5236\u9650
+partials.connection-details.read-only-back-pressure-object-threshold.title=\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u30d7\u30ec\u30c3\u30b7\u30e3\u30fc\u3092\u5b9f\u65bd\u3059\u308b\u524d\u3001\u30ad\u30e5\u30fc\u306b\u683c\u7d0d\u3059\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u6700\u5927\u6570
+partials.connection-details.read-only-back-pressure-data-size-threshold=\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u30d7\u30ec\u30c3\u30b7\u30e3\u30fc\u306e\u30c7\u30fc\u30bf\u5236\u9650
+partials.connection-details.read-only-back-pressure-data-size-threshold.title=\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u30d7\u30ec\u30c3\u30b7\u30e3\u30fc\u3092\u5b9f\u65bd\u3059\u308b\u524d\u3001\u30ad\u30e5\u30fc\u306b\u304a\u3051\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u6700\u5927\u6570
+partials.connection-details.read-only-prioritizers=\u512a\u5148\u9806\u4f4d
+partials.connection-details.read-only-prioritizers.title=\u5f53\u8a72\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u4f5c\u696d\u30ad\u30e5\u30fc\u3067\u518d\u7de8\u3055\u308c\u305f\u512a\u5148\u9806\u4f4d
+#-------------------------------------------------
+# partials
+# message-pane
+partials.message-pane.logout=\u30b5\u30a4\u30f3\u30a2\u30a6\u30c8
+partials.message-pane.userhome=\u30db\u30fc\u30e0\u30e6\u30fc\u30b6\u30fc
+#-------------------------------------------------
+# partials
+# ok-dialog
+#-------------------------------------------------
+# partials
+# processor-details
+partials.processor-details.read-only-processor-name=\u540d\u79f0
+partials.processor-details.read-only-processor-id=\u8b58\u5225\u5b50
+partials.processor-details.read-only-processor-type=\u30bf\u30a4\u30d7
+partials.processor-details.read-only-penalty-duration=\u9045\u5ef6\u30b5\u30a4\u30af\u30eb
+partials.processor-details.read-only-penalty-duration.title=\u5f53\u8a72\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u3067\u30d5\u30ed\u30fc\u30d5\u30a1\u30a4\u30eb\u3092\u9045\u5ef6\u3055\u305b\u308b\u5f85\u3061\u6642\u9593
+partials.processor-details.read-only-yield-duration=\u751f\u7523\u30b5\u30a4\u30af\u30eb
+partials.processor-details.read-only-yield-duration.title=\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u304c\u751f\u7523\u72b6\u614b\u3067\u3042\u308b\u5834\u5408\u3001\u751f\u7523\u30b5\u30a4\u30af\u30eb\u304c\u7d42\u308f\u308b\u307e\u3067\u3001\u5f53\u8a72\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u306f\u5ea6\u3068\u30b9\u30b1\u30b8\u30e5\u30fc\u30ea\u30f3\u30b0\u3055\u308c\u307e\u305b\u3093\u3002
+partials.processor-details.read-only-bulletin-level=\u516c\u544a\u30ec\u30d9\u30eb
+partials.processor-details.read-only-bulletin-level.title=\u5f53\u8a72\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u3067\u516c\u544a\u304c\u767a\u751f\u3059\u308b\u3068\u304d\u306b\u5fc5\u8981\u306a\u30ec\u30d9\u30eb
+partials.processor-details.read-only-auto-terminate-relationship-names=\u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u30b7\u30c3\u30d7\u3092\u81ea\u52d5\u7d42\u4e86\u3057\u307e\u3059\u3002
+partials.processor-details.read-only-auto-terminate-relationship-names.title=\u30d5\u30ed\u30fc\u30d5\u30a1\u30a4\u30eb\u306e\u5b9f\u884c\u3092\u81ea\u52d5\u7d42\u4e86\u3057\u3001\u3059\u3079\u3066\u306e\u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u30b7\u30c3\u30d7\u3092\u30b4\u30b7\u30c3\u30af\u4f53\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002
+partials.processor-details.read-only-scheduling-strategy=\u8a08\u753b\u30dd\u30ea\u30b7\u30fc
+partials.processor-details.read-only-scheduling-strategy.title=\u3053\u306e\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u306b\u4f7f\u3046\u30dd\u30ea\u30b7\u30fc\u3067\u3059
+partials.processor-details.read-only-concurrently-schedulable-tasks=\u73fe\u5728\u306e\u30bf\u30b9\u30af
+partials.processor-details.read-only-concurrently-schedulable-tasks.title=\u73fe\u5728\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u304c\u5b9f\u884c\u3057\u3066\u3044\u308b\u8a08\u753b\u30bf\u30b9\u30af\u306e\u6570
+partials.processor-details.read-only-scheduling-period=\u8a08\u753b\u30bf\u30b9\u30af\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002
+partials.processor-details.read-only-scheduling-period.title=\u5404\u30bf\u30b9\u30af\u3092\u5b9f\u884c\u3059\u308b\u6700\u77ed\u306e\u6642\u9593\u9593\u9694\u3067\u3059\u3002
+partials.processor-details.read-only-run-duration=\u5b9f\u884c\u6642\u9593
+partials.processor-details.read-only-run-duration.title=\u8a08\u753b\u30bf\u30b9\u30af\u304c\u5b9f\u884c\u3055\u308c\u305f\u3068\u304d\u3001\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u304c\u3053\u3053\u3067\u6307\u5b9a\u3057\u305f\u6642\u9593\u3067\u5b9f\u884c\u3057\u307e\u3059\u3002\u5b9f\u884c\u6642\u9593\u306f1\u30df\u30ea\u30bb\u30ab\u30f3\u30c9\u306e\u5834\u5408\u3001\u8a08\u753b\u30bf\u30b9\u30af\u306f1\u56de\u3060\u3051\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002
+partials.processor-details.read-only-processor-comments=\u8a55\u4fa1
+#-------------------------------------------------
+# partials
+# status-history-dialog
+partials.status-history-dialog.LastUpdated=\u6700\u7d42\u66f4\u65b0
+partials.status-history-dialog.Close=\u9589\u3058\u308b
+partials.status-history-dialog.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+#-------------------------------------------------
+# partials
+# yes-no-dialog
+
+#-------------------------------------------------
+# partials
+# bulletin-board
+#-------------------------------------------------
+# partials
+# bulletin-board-content
+partials.bulletin-board.bulletin-board-content.bulletin-board-header-text=\u30c7\u30fc\u30bf\u30b9\u30c8\u30ea\u30fc\u30e0\u306e\u63b2\u793a\u677f
+partials.bulletin-board.bulletin-board-content.bulletin-board-filter=\u308d\u904e
+partials.bulletin-board.bulletin-board-content.refresh-toggle=\u5207\u6362\u81ea\u52a8\u5237\u65b0
+partials.bulletin-board.bulletin-board-content.bulletin-board-refresh-container=\u81ea\u52d5\u66f4\u65b0
+partials.bulletin-board.bulletin-board-content.bulletin-board-last-refreshed-container=\u6700\u7d42\u66f4\u65b0
+partials.bulletin-board.bulletin-board-content.refresh-button=\u30b9\u30bf\u30fc\u30c8\u002f\u30b9\u30c8\u30c3\u30d7\u30aa\u30fc\u30c8\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+partials.bulletin-board.Clear=\u30af\u30ea\u30a2
+#-------------------------------------------------
+# partials
+# canvas
+partials.canvas.about-dailog.nf-version=\u30d0\u30fc\u30b8\u30e7\u30f3
+#canvas-header
+partials.canvas.canvas-header.login=\u30ed\u30b0\u30a4\u30f3
+partials.canvas.canvas-header.logout=\u30ed\u30b0\u30a2\u30a6\u30c8
+partials.canvas.canvas-header.help-link=\u30d8\u30eb\u30d7
+partials.canvas.canvas-header.about-link=\u30a2\u30d0\u30a6\u30c8
+partials.canvas.canvas-header.reporting-link=\u307e\u3068\u3081
+partials.canvas.canvas-header.counters-link=\u8a08\u6570
+partials.canvas.canvas-header.history-link=\u30d5\u30ed\u30fc\u8a2d\u5b9a\u5c65\u6b74
+partials.canvas.canvas-header.provenance-link=\u30c7\u30fc\u30bf\u51fa\u6240
+partials.canvas.canvas-header.flow-settings-link=\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u8a2d\u5b9a
+partials.canvas.canvas-header.templates-link=\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8
+partials.canvas.canvas-header.users-link=\u30e6\u30fc\u30b6\u30fc
+partials.canvas.canvas-header.cluster-link=\u30af\u30e9\u30b9\u30bf\u30fc
+partials.canvas.canvas-header.bulletin-board-link=\u63b2\u793a\u677f
+partials.canvas.canvas-header.policies-link=\u7b56\u7565
+#component-state-dialog
+partials.canvas.component-state-dialog.Name=\u540d\u79f0
+partials.canvas.component-state-dialog.Description=\u8aac\u660e
+partials.canvas.component-state-dialog.component-state-partial-results-container=\u90e8\u5206\u306e\u89e3\u7b54\u3092\u8868\u793a
+partials.canvas.component-state-dialog.component-state-filter-status1=\u5c55\u793a
+partials.canvas.component-state-dialog.component-state-filter-status2=\u306e
+partials.canvas.component-state-dialog.clear-link=\u72b6\u614b\u306b\u306a\u308b
+partials.canvas.component-state-dialog.component-state-filter=\u308d\u904e
+#connection-configuration
+partials.canvas.connection-configuration.Name=\u540d\u79f0
+partials.canvas.connection-configuration.Id=\u8b58\u5225\u5b50
+partials.canvas.connection-configuration.FlowFileExpiration=\u30d5\u30ed\u30fc\u30d5\u30a1\u30a4\u30eb\u6709\u6548\u6642\u9593
+partials.canvas.connection-configuration.FlowFileExpiration.title=\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5728\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u4e2d\u6700\u5927\u6709\u6548\u6642\u9593
+partials.canvas.connection-configuration.BackPressureObjectThreshold=\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u30d7\u30ec\u30c3\u30b7\u30e3\u30fc\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5236\u9650
+partials.canvas.connection-configuration.BackPressureObjectThreshold.Title=\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u30d7\u30ec\u30c3\u30b7\u30e3\u30fc\u3092\u5b9f\u65bd\u3059\u308b\u524d\u3001\u30ad\u30e5\u30fc\u3067\u683c\u7d0d\u3059\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u6700\u5927\u6570
+partials.canvas.connection-configuration.BackPressureDataSizeThreshold=\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u30d7\u30ec\u30c3\u30b7\u30e3\u30fc\u30c7\u30fc\u30bf\u5236\u9650
+partials.canvas.connection-configuration.BackPressureDataSizeThreshold.Title=\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u30d7\u30ec\u30c3\u30b7\u30e3\u30fc\u3092\u5b9f\u65bd\u3059\u308b\u524d\u3001\u30ad\u30e5\u30fc\u306b\u3051\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u6700\u5927\u6570
+partials.canvas.connection-configuration.AvailablePrioritizers=\u512a\u5148\u9806\u4f4d\u3092\u9078\u629e\u3067\u304d\u307e\u3059\u3002
+partials.canvas.connection-configuration.AvailablePrioritizers.title=\u30d5\u30ed\u30fc\u30d5\u30a1\u30a4\u30eb\u4f5c\u696d\u30ad\u30e5\u30fc\u3067\u518d\u7de8\u53ef\u80fd\u306a\u512a\u5148\u9806\u4f4d
+partials.canvas.connection-configuration.SelectedPrioritizers=\u9078\u629e\u3057\u305f\u512a\u5148\u9806\u4f4d
+partials.canvas.connection-configuration.SelectedPrioritizers.title=\u3059\u3067\u306b\u30d5\u30ed\u30fc\u30d5\u30a1\u30a4\u30eb\u4f5c\u696d\u30ad\u30e5\u30fc\u3067\u518d\u7de8\u3055\u308c\u305f\u512a\u5148\u9806\u4f4d\u3067\u3059\u3002
+partials.canvas.connection-configuration.FromOutput=\u30a2\u30a6\u30c8\u30d7\u30c3\u30c8\u3088\u308a
+partials.canvas.connection-configuration.FromInput=\u30a4\u30f3\u30d7\u30c3\u30c8\u3088\u308a
+partials.canvas.connection-configuration.FromFunnel=\u3058\u3087\u3046\u3054\u3088\u308a
+partials.canvas.connection-configuration.Funnel=\u3058\u3087\u3046\u3054
+partials.canvas.connection-configuration.FromProcessor=\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u3088\u308a
+partials.canvas.connection-configuration.WithinGroup=\u30b0\u30eb\u30fc\u30d7\u5185\u306b\u3042\u308a\u307e\u3059
+partials.canvas.connection-configuration.ForRelationships=\u4e3a\u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u30b7\u30c3\u30d7
+partials.canvas.connection-configuration.ToInput=\u30a4\u30f3\u30d7\u30c3\u30c8\u3078
+partials.canvas.connection-configuration.ToOutput=\u30a2\u30a6\u30c8\u30d7\u30c3\u30c8\u3078
+partials.canvas.connection-configuration.ToFunnel=\u3058\u3087\u3046\u3054\u3078
+partials.canvas.connection-configuration.ToProcessor=\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u3078
+partials.canvas.connection-configuration.WithinGroup=\u30b0\u30eb\u30fc\u30d7\u5185\u306b\u3042\u308a\u307e\u3059
+#connections-dialog
+partials.canvas.connections-dialog.SelectedComponent=\u9078\u629e\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8
+partials.canvas.connections-dialog.Source=\u30bd\u30fc\u30b9
+partials.canvas.connections-dialog.Destination=\u30c7\u30b9\u30c6\u30a3\u30cd\u30fc\u30b7\u30e7\u30f3
+#controller-service-configuration
+partials.canvas.controller-service-configuration.Name=\u540d\u79f0
+partials.canvas.controller-service-configuration.Id=\u8b58\u5225\u5b50
+partials.canvas.controller-service-configuration.Type=\u30bf\u30a4\u30d7
+partials.canvas.controller-service-configuration.Availability=\u5229\u7528\u53ef\u80fd
+partials.canvas.controller-service-configuration.Availability.title=\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u30b5\u30fc\u30d3\u30b9\u304c\u5229\u7528\u53ef\u80fd\u306a\u7b87\u6240
+partials.canvas.controller-service-configuration.ReferencingComponents=\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u53c2\u7167\u3057\u307e\u3059\u3002
+partials.canvas.controller-service-configuration.ReferencingComponents.title=\u5f53\u8a72\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u4ed6\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8
+partials.canvas.controller-service-configuration.Comments=\u8a55\u4fa1
+#disable-controller-service-dialog
+partials.canvas.disable-controller-service-dialog.Service=\u30b5\u30fc\u30d3\u30b9
+partials.canvas.disable-controller-service-dialog.Scope=\u7bc4\u56f2
+partials.canvas.disable-controller-service-dialog.Scope.setting-field=\u30b5\u30fc\u30d3\u30b9\u3068\u5f15\u7528\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8
+partials.canvas.disable-controller-service-dialog.Scope.setting-field.title=\u30b5\u30fc\u30d3\u30b9\u3092\u7d42\u4e86\u3059\u308b\u524d\u3001\u5f15\u7528\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u9589\u3058\u308b\u304b\u3001\u7121\u52b9\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002
+partials.canvas.disable-controller-service-dialog.disable-controller-service-progress.1=\u5f15\u7528\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u53c2\u7167\u3092\u7d42\u4e86\u3057\u3001\u30bf\u30b9\u30af\u3092\u5831\u544a\u3057\u307e\u3059\u3002
+partials.canvas.disable-controller-service-dialog.disable-controller-service-progress.2=\u5f15\u7528\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u7121\u52b9\u306b\u3057\u307e\u3059\u3002
+partials.canvas.disable-controller-service-dialog.disable-controller-service-progress.3=\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u7121\u52b9\u306b\u3057\u307e\u3059\u3002
+partials.canvas.disable-controller-service-dialog.ReferencingComponents=\u5f15\u7528\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8
+partials.canvas.disable-controller-service-dialog.ReferencingComponents.title=\u5f53\u8a72\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u4ed6\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8
+partials.canvas.disable-controller-service-dialog.canceling=\u30ad\u30e3\u30f3\u30bb\u30eb\u4e2d
+#drop-request-status-dialog
+#enable-controller-service-dialog
+partials.canvas.enable-controller-service-dialog.enable-controller-service-progress.1=\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u30b5\u30fc\u30d3\u30b9\u3092\u8d77\u52d5\u3057\u307e\u3059\u3002
+partials.canvas.enable-controller-service-dialog.enable-controller-service-progress.2=\u5f15\u7528\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u30b5\u30fc\u30d3\u30b9\u3092\u8d77\u52d5\u3057\u307e\u3059\u3002
+partials.canvas.enable-controller-service-dialog.enable-controller-service-progress.3=\u5f15\u7528\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u3092\u8d77\u52d5\u3057\u3001\u30bf\u30b9\u30af\u3092\u5831\u544a\u3057\u307e\u3059\u3002
+partials.canvas.enable-controller-service-dialog.ReferencingComponents=\u5f15\u7528\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8
+partials.canvas.enable-controller-service-dialog.ReferencingComponents.title=\u5f53\u8a72\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u4ed6\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8
+partials.canvas.enable-controller-service-dialog.Canceling=\u30ad\u30e3\u30f3\u30bb\u30eb\u4e2d
+partials.canvas.enable-controller-service-dialog.Service=\u30b5\u30fc\u30d3\u30b9
+partials.canvas.enable-controller-service-dialog.Scope=\u7bc4\u56f2
+#fill-color-dialog
+partials.canvas.fill-color-dialog.Color=\u8272
+partials.canvas.fill-color-dialog.Value=\u5024
+partials.canvas.fill-color-dialog.Preview=\u30d7\u30ec\u30d3\u30e5\u30fc
+partials.canvas.fill-color-dialog.Processor=\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc
+partials.canvas.fill-color-dialog.Label=\u30e9\u30d9\u30eb
+#flow-status
+partials.canvas.flow-status.ActiveThreads=\u4f5c\u696d\u30b9\u30ec\u30c3\u30c9:
+partials.canvas.flow-status.Queued=\u30ad\u30e5\u30fc\u30a4\u30f3\u30b0
+partials.canvas.flow-status.connected-nodes-element=\u30ea\u30f3\u30af\u306e\u30ce\u30fc\u30c9:
+partials.canvas.flow-status.flow-status-property-element=\u6700\u7d42\u66f4\u65b0\u3092\u7d71\u8a08\u3057\u307e\u3059
+partials.canvas.flow-status.refresh-required-link=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+partials.canvas.flow-status.search-field=\u308d\u904e
+#flowfile-details-dialog
+partials.canvas.flowfile-details-dialog.detail=\u30d5\u30ed\u30fc\u30d5\u30a1\u30a4\u30eb\u306e\u8a73\u7d30
+partials.canvas.flowfile-details-dialog.filename=\u30d5\u30a1\u30a4\u30eb\u540d
+partials.canvas.flowfile-details-dialog.filesize=\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba
+partials.canvas.flowfile-details-dialog.queuelocation=\u5f85\u3061\u884c\u5217\u4f4d\u7f6e
+partials.canvas.flowfile-details-dialog.queueduration=\u4f75\u6301\u7d9a\u6642\u9593
+partials.canvas.flowfile-details-dialog.lineageduration=\u8e0f\u8972\u6642\u9593
+partials.canvas.flowfile-details-dialog.penalized=\u7f70
+partials.canvas.flowfile-details-dialog.contentclaim=\u5185\u5bb9\u30b9\u30c6\u30fc\u30c8\u30e1\u30f3\u30c8
+partials.canvas.flowfile-details-dialog.container=\u5bb9\u5668
+partials.canvas.flowfile-details-dialog.section=\u5730\u57df
+partials.canvas.flowfile-details-dialog.identifier=\u8b58\u5225\u5b50
+partials.canvas.flowfile-details-dialog.offset=\u30aa\u30d5\u30bb\u30c3\u30c8
+partials.canvas.flowfile-details-dialog.size=\u5927\u304d\u3055
+partials.canvas.flowfile-details-dialog.download=\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9
+partials.canvas.flowfile-details-dialog.view=\u67e5\u770b
+partials.canvas.flowfile-details-dialog.attributevalue=\u5c5e\u6027\u5024
+#instantiate-template-dialog
+partials.canvas.instantiate-template-dialog.choosetmplate=\u9078\u629e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8
+#label-configuration
+partials.canvas.label-configuration.LabelValue=\u30e9\u30d9\u30eb\u5024
+partials.canvas.label-configuration.fontSize=\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba
+partials.canvas.label-configuration.label-configuration-apply=\u5fdc\u7528
+partials.canvas.label-configuration.label-configuration-cancel=\u30ad\u30e3\u30f3\u30bb\u30eb
+#navigation
+partials.canvas.navigation.Navigate=\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3
+partials.canvas.navigation.Operate=\u64cd\u4f5c
+partials.canvas.navigation.Delete=\u524a\u9664
+partials.canvas.navigation.PanUp=\u30d1\u30cd\u30eb\u3092\u4e0a\u79fb\u52d5
+partials.canvas.navigation.PanLeft=\u30d1\u30cd\u30eb\u3092\u5de6\u79fb\u52d5
+partials.canvas.navigation.PanRight=\u30d1\u30cd\u30eb\u3092\u53f3\u79fb\u52d5
+partials.canvas.navigation.PanDown=\u30d1\u30cd\u30eb\u3092\u4e0b\u79fb\u52d5
+partials.canvas.navigation.zoom-in-button=\u62e1\u5927
+partials.canvas.navigation.zoom-out-button=\u7e2e\u5c0f
+partials.canvas.navigation.zoom-fit-button=\u9069\u5fdc
+partials.canvas.navigation.zoom-actual-button=\u5b9f\u969b\u306e\u30b5\u30a4\u30ba
+partials.canvas.navigation.configuration=\u30b3\u30f3\u30d5\u30a3\u30ae\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3
+partials.canvas.navigation.accesspolicies=\u30a2\u30af\u30bb\u30b9\u30dd\u30ea\u30b7\u30fc
+partials.canvas.navigation.enable=\u6709\u52b9\u306b\u3057\u307e\u3059
+partials.canvas.navigation.disable=\u7121\u52b9\u306b\u3057\u307e\u3059
+partials.canvas.navigation.start=\u59cb\u3081\u307e\u3059
+partials.canvas.navigation.stop=\u505c\u6b62
+partials.canvas.navigation.createTemplate=\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
+partials.canvas.navigation.uploadTemplate=\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8
+partials.canvas.navigation.copy=\u30b3\u30d4\u30fc
+partials.canvas.navigation.paste=\u30b9\u30c6\u30a3\u30c3\u30af
+partials.canvas.navigation.group=\u30b0\u30eb\u30fc\u30d7
+partials.canvas.navigation.fillcolor=\u30ab\u30e9\u30fc\u5857\u308a\u3064\u3076\u3057
+partials.canvas.navigation.delete=\u524a\u9664
+#new-controller-service-dialog
+partials.canvas.new-controller-service-dialog.TagCloud=\u30e9\u30d9\u30eb\u96f2
+partials.canvas.new-controller-service-dialog.Displaying=\u8868\u793a&nbsp;
+partials.canvas.new-controller-service-dialog.Of=&nbsp;\u4e2d&nbsp;
+partials.canvas.new-controller-service-dialog.controller-service-type-name-title=\u9078\u5b9a\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30b5\u30fc\u30d3\u30b9
+partials.canvas.new-controller-service-dialog.Tags=\u30e9\u30d9\u30eb
+partials.canvas.new-controller-service-dialog.AvailableOn=\u6709\u52b9\u6027\u3092\u30aa\u30f3\u306b\u3057\u307e\u3059\u3002
+partials.canvas.new-controller-service-dialog.controller-service-type-filter=\u308d\u904e
+#new-port-dialog
+partials.canvas.new-port-dialog.Input=\u30a4\u30f3\u30d7\u30c3\u30c8
+partials.canvas.new-port-dialog.portname=\u30dd\u30fc\u30c8\u540d
+#new-process-group-dialog
+partials.canvas.new-process-group-dialog.ProcessGroupName=\u30d7\u30ed\u30bb\u30b9\u30b0\u30eb\u30fc\u30d7\u540d\u79f0
+#new-processor-dialog
+partials.canvas.new-processor-dialog.TagCloud=\u30e9\u30d9\u30eb\u96f2
+partials.canvas.new-processor-dialog.Displaying=\u8868\u793a&nbsp;
+partials.canvas.new-processor-dialog.Of=&nbsp;\u4e2d&nbsp;
+partials.canvas.new-processor-dialog.processor-type-name-title=\u9078\u5b9a\u306e\u30d7\u30ed\u30bb\u30c3\u30b5
+partials.canvas.new-processor-dialog.Tags=\u30e9\u30d9\u30eb
+partials.canvas.new-processor-dialog.processor-type-filter-container=\u308d\u904e
+#new-remote-process-group-dialog
+partials.canvas.new-remote-process-group-dialog.URL=URL
+partials.canvas.new-remote-process-group-dialog.Transport=\u8ee2\u9001\u30d7\u30ed\u30c8\u30b3\u30eb
+partials.canvas.new-remote-process-group-dialog.TransportTitle=\u8ee2\u9001\u30d7\u30ed\u30c8\u30b3\u30eb\u306b\u3064\u3044\u3066\u306f\u3001\u30ea\u30e2\u30fc\u30c8\u51e6\u7406\u30b0\u30eb\u30fc\u30d7\u901a\u4fe1
+partials.canvas.new-remote-process-group-dialog.HttpProxyHostname=\u4ee3\u7406\u30b5\u30fc\u30d0\u30fc\u30a2\u30c9\u30ec\u30b9
+partials.canvas.new-remote-process-group-dialog.HttpProxyHostnameTitle=\u6307\u5b9a\u304c\u4f7f\u3046\u30d7\u30ed\u30ad\u30b7\u30b5\u30fc\u30d0\u30fc\u540d\u3092\u6307\u5b9a\u3057\u306a\u3044\u3002\u3082\u3057\u3001\u0048\u0054\u0054\u0050\u6d41\u91cf\u76f4\u63a5\u9001\u308b\u76ee\u6a19\u304c\u004e\u0049\u0046\u0049\u5fdc\u7528\u306e\u4e0a\u3002
+partials.canvas.new-remote-process-group-dialog.HttpProxyPort=\u4ee3\u7406\u30b5\u30fc\u30d0\u30fc\u30dd\u30fc\u30c8
+partials.canvas.new-remote-process-group-dialog.HttpProxyPortTitle=\u6307\u5b9a\u4ee3\u7406\u30b5\u30fc\u30d0\u30fc\u306e\u30dd\u30fc\u30c8\u53f7\u306f\u3001\u6307\u5b9a\u3001\u6307\u5b9a\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u0038\u0030\u30dd\u30fc\u30c8\u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002
+partials.canvas.new-remote-process-group-dialog.HttpProxyUser=\u4ee3\u7406\u5e97\u540d
+partials.canvas.new-remote-process-group-dialog.HttpProxyUserTitle=\u4ee3\u7406\u30b5\u30fc\u30d0\u30fc\u306e\u30e6\u30fc\u30b6\u540d\u306b\u63a5\u7d9a\u3057\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u6307\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002
+partials.canvas.new-remote-process-group-dialog.HttpProxyPassword=\u4ee3\u7406\u6697\u53f7\u306e\u4ee3\u884c
+partials.canvas.new-remote-process-group-dialog.HttpProxyPasswordTitle=\u4ee3\u7406\u30b5\u30fc\u30d0\u30fc\u306e\u30d1\u30b9\u30ef\u30fc\u30c9\u306b\u63a5\u7d9a\u3057\u3066\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u6307\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002
+partials.canvas.new-remote-process-group-dialog.timeout=\u901a\u4fe1\u6b98\u696d
+partials.canvas.new-remote-process-group-dialog.timeoutTitle=\u3053\u306e\u30ea\u30e2\u30fc\u30c8\u30d7\u30ed\u30bb\u30b9\u30b0\u30eb\u30fc\u30d7\u3068\u306e\u901a\u4fe1\u304c\u6642\u9593\u306e\u9577\u3044\u6642\u9593\u306e\u9577\u3044\u9593\u3001\u305d\u308c\u306f\u6642\u9593\u306e\u6642\u9593\u304c\u304b\u304b\u3063\u3066\u3001\u305d\u308c\u306f\u6642\u9593\u304c\u6b98\u696d\u002e
+partials.canvas.new-remote-process-group-dialog.yield=\u7523\u51fa\u6301\u7d9a\u6642\u9593
+#new-reporting-task-dialog-content
+partials.canvas.new-reporting-task-dialog.TagCloud=\u30e9\u30d9\u30eb\u96f2
+partials.canvas.new-reporting-task-dialog.Displaying=\u8868\u793a&nbsp;
+partials.canvas.new-processor-dialog.Of=&nbsp;\u4e2d&nbsp;
+partials.canvas.new-reporting-task-dialog.Tags=\u30e9\u30d9\u30eb
+partials.canvas.new-reporting-task-dialog.ReportTask=\u9078\u629e\u306e\u5831\u544a\u306f\u4efb\u52d9\u3092\u5831\u544a\u3059\u308b
+partials.canvas.new-reporting-task-dialog.AvailableOn=\u6709\u52b9\u6027\u3092\u30aa\u30f3\u306b\u3057\u307e\u3059
+partials.canvas.new-reporting-task-dialog.reporting-task-type-filter=\u308d\u904e
+#new-template-dialog
+partials.canvas.new-template-dialog.Name=\u540d\u79f0
+partials.canvas.new-template-dialog.Description=\u8aac\u660e
+#policy-management
+partials.canvas.policy-management.policy-management-header-text=\u30a2\u30af\u30bb\u30b9\u6226\u7565
+partials.canvas.policy-management.create-policy-link=\u5275\u5efa
+partials.canvas.policy-management.new-policy-message=\u65b0\u305f\u306a\u6226\u7565
+partials.canvas.policy-management.override-policy-link=\u8986\u3046
+partials.canvas.policy-management.override-policy-message=\u3053\u306e\u7b56\u7565\u306f
+partials.canvas.policy-management.add-local-admin-link=\u8db3\u3092\u4ed8\u3051\u308b
+partials.canvas.policy-management.add-local-admin-message=\u306e\u4ed6\u7ba1\u7406\u4eba\u306e\u7b56\u7565
+partials.canvas.policy-management.policy-selected-component-type1=\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8
+partials.canvas.policy-management.policy-selected-component-type2=\u30b5\u30fc\u30d0\u30fc\u7ba1\u7406
+partials.canvas.policy-management.policy-selected-component-type3=\u30bf\u30b9\u30af\u5831\u544a\u66f8
+partials.canvas.policy-management.last-refreshed-container=\u6700\u65b0\u66f4\u65b0
+partials.canvas.policy-management.admin-policy-message=\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u7279\u5b9a\u306e\u7ba1\u7406\u4eba\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u002e
+partials.canvas.policy-management.policy-refresh-button=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+#port-configuration
+partials.canvas.port-configuration.PortName=\u30dd\u30fc\u30c8\u540d
+partials.canvas.port-configuration.Enabled=\u958b\u304f
+partials.canvas.port-configuration.Id=\u8b58\u5225\u5b50
+partials.canvas.port-configuration.ConcurrentTasks=\u73fe\u5728\u30bf\u30b9\u30af
+partials.canvas.port-configuration.ConcurrentTasks.title=\u73fe\u5728\u30dd\u30fc\u30c8\u5b9f\u884c\u7684\u30bf\u30b9\u30af\u6570
+partials.canvas.port-configuration.Comments=\u8a55\u4fa1
+#port-details
+partials.canvas.port-details.PortName=\u30dd\u30fc\u30c8\u540d
+partials.canvas.port-details.Id=\u8b58\u5225\u5b50
+partials.canvas.port-details.Comments=\u8a55\u4fa1
+#process-group-configuration
+partials.canvas.process-group-configuration.process-group-configuration-header-text=\u51e6\u7406\u30b0\u30eb\u30fc\u30d7\u306e\u8a2d\u5b9a
+partials.canvas.process-group-configuration.ProcessGroupName=\u51e6\u7406\u30b0\u30eb\u30fc\u30d7\u540d
+partials.canvas.process-group-configuration.Processgroupcomments=\u51e6\u7406\u30b0\u30eb\u30fc\u30d7\u306e\u30b3\u30e1\u30f3\u30c8
+partials.canvas.process-group-configuration.process-group-configuration-save=\u5fdc\u7528
+partials.canvas.process-group-configuration.last-refreshed-container=\u6700\u65b0\u66f4\u65b0
+partials.canvas.process-group-configuration.process-group-configuration-refresh-button=\u66f4\u65b0
+partials.canvas.process-group-configuration.Name=\u540d\u79f0
+partials.canvas.process-group-configuration.Id=\u8b58\u5225\u5b50
+partials.canvas.process-group-configuration.Comments=\u8a55\u4fa1
+#process-group-details
+partials.canvas.process-group-details.Name=\u540d\u79f0
+partials.canvas.process-group-details.Id=\u8b58\u5225\u5b50
+partials.canvas.process-group-details.Comments=\u8a55\u4fa1
+#processor-configuration
+partials.canvas.processor-configuration.Name=\u540d\u79f0
+partials.canvas.processor-configuration.Enabled=\u958b\u304d\u307e\u3057\u305f
+partials.canvas.processor-configuration.Id=\u8b58\u5225\u5b50
+partials.canvas.processor-configuration.Type=\u30bf\u30a4\u30d7
+partials.canvas.processor-configuration.PenaltyDuration=\u9045\u5ef6\u30b5\u30a4\u30af\u30eb
+partials.canvas.processor-configuration.PenaltyDuration.title=\u5f53\u8a72\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u3067\u3042\u308b\u30d5\u30ed\u30fc\u30d5\u30a1\u30a4\u30eb\u3092\u9045\u5ef6\u3055\u305b\u308b\u5f85\u3061\u6642\u9593
+partials.canvas.processor-configuration.YieldDuration=\u751f\u7523\u30b5\u30a4\u30af\u30eb
+partials.canvas.processor-configuration.YieldDuration.title=\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u304c\u751f\u7523\u72b6\u614b\u3067\u3042\u308b\u5834\u5408\u3001\u751f\u7523\u30b5\u30a4\u30af\u30eb\u304c\u7d42\u308f\u308b\u307e\u3067\u3001\u3053\u306e\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u306f\u4e8c\u5ea6\u3068\u30b9\u30b1\u30b8\u30e5\u30fc\u30ea\u30f3\u30b0\u3055\u308c\u307e\u305b\u3093\u3002
+partials.canvas.processor-configuration.BulletinLevel=\u516c\u544a\u30ec\u30d9\u30eb
+partials.canvas.processor-configuration.BulletinLevel.title=\u5f53\u8a72\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u3067\u516c\u544a\u304c\u767a\u751f\u3059\u308b\u3068\u304d\u306b\u5fc5\u8981\u306a\u30ec\u30d9\u30eb\u3067\u3059\u3002
+partials.canvas.processor-configuration.AutoTerminateRelationships=\u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u30b7\u30c3\u30d7\u3092\u81ea\u52d5\u7d42\u4e86\u3057\u307e\u3059\u3002
+partials.canvas.processor-configuration.AutoTerminateRelationships.title= \u5b9a\u7fa9\u3057\u3066\u3044\u306a\u3044\u5834\u5408\u3001\u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u30b7\u30c3\u30d7\u3092\u6307\u5b9a\u3057\u305f\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u30d5\u30a1\u30a4\u30eb\u306f\u5b9f\u884c\u505c\u6b62\u306b\u306a\u308a\u307e\u3059\u3002
+partials.canvas.processor-configuration.SchedulingStrategy=\u8a08\u753b\u30dd\u30ea\u30b7\u30fc
+partials.canvas.processor-configuration.SchedulingStrategy.title=\u5f53\u8a72\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u306b\u4f7f\u3046\u30dd\u30ea\u30b7\u30fc
+partials.canvas.processor-configuration.event-driven-warning=\u5b9f\u9a13\u30dd\u30ea\u30b7\u30fc
+partials.canvas.processor-configuration.ConcurrentTasks=\u73fe\u5728\u30bf\u30b9\u30af
+partials.canvas.processor-configuration.ConcurrentTasks.title=\u73fe\u5728\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u304c\u5b9f\u884c\u3057\u3066\u3044\u308b\u8a08\u753b\u30bf\u30b9\u30af\u306e\u30bf\u30b9\u30af\u6570
+partials.canvas.processor-configuration.RunSchedule=\u8a08\u753b\u30bf\u30b9\u30af\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002
+partials.canvas.processor-configuration.RunSchedule.title.1=\u8a08\u753b\u30bf\u30b9\u30af\u306e\u5b9f\u884c\u6642\u9593
+partials.canvas.processor-configuration.RunSchedule.title.2=CRON\u8868\u73fe\u5f0f\u306f\u5f53\u8a72\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u306b\u5b9f\u884c\u306b\u4f7f\u308f\u308c\u307e\u3059\u3002
+partials.canvas.processor-configuration.RunDuration=\u5b9f\u884c\u671f\u9593
+partials.canvas.processor-configuration.RunDuration.title=\u8a08\u753b\u30bf\u30b9\u30af\u304c\u5b9f\u884c\u3055\u308c\u305f\u5834\u5408\u3001\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u306f\u4e0a\u8a18\u306e\u6642\u9593\u3067\u5b9f\u884c\u3057\u307e\u3059\u3002\u5b9f\u884c\u671f\u9593\u304c0\u30df\u30ea\u30bb\u30ab\u30f3\u30c9\u306e\u30bf\u30b9\u30af\u306f1\u5ea6\u3060\u3051\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002
+partials.canvas.processor-configuration.LowerLatency=\u3088\u308a\u4f4e\u3044\u9045\u5ef6
+partials.canvas.processor-configuration.HigherThroughput=\u3088\u308a\u591a\u3044\u30b9\u30eb\u30fc\u30d7\u30c3\u30c8
+partials.canvas.processor-configuration.HigherThroughput.Warning=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u304c\u9589\u3058\u3089\u308c\u308b\u3068\u304d\u3001\u30bd\u30fc\u30b9\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u306e\u5b9f\u884c\u6642\u9593\u304c0\u30df\u30ea\u30bb\u30ab\u30f3\u30c9\u3088\u308a\u591a\u3044\u304c\u3001\u30a4\u30f3\u30d7\u30c3\u30c8\u30ea\u30f3\u30af\u304c\u306a\u3044\u305f\u3081\u3001\u30c7\u30fc\u30bf\u7d1b\u5931\u306e\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002
+#queue-listing
+partials.canvas.queue-listing.queue-listing-refresh-button=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+partials.canvas.queue-listing.queue-listing-stats-deploy=\u8868\u793a  
+partials.canvas.queue-listing.queue-listing-stats-of=\u306e
+partials.canvas.queue-listing.lastUpdate=\u6700\u65b0\u66f4\u65b0
+#registration
+partials.canvas.registration.register-title=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u306b\u30a2\u30af\u30bb\u30b9\u30e9\u30a4\u30bb\u30f3\u30b9\u304c\u3042\u308a\u307e\u3059\u3002
+partials.canvas.registration.expand-registration-text=\u6a29\u9650\u3092\u30ea\u30af\u30a8\u30b9\u30c8\u3057\u307e\u3059\u3002
+partials.canvas.registration.registration-form.setting-name=\u691c\u8a3c
+partials.canvas.registration.registration-form.remaining-characters=\u6587\u5b57\u3092\u4fdd\u7559\u3057\u307e\u3059\u3002
+partials.canvas.registration.registration-form.registration-form-submit=\u30b5\u30d6\u30df\u30c3\u30c8
+#remote-port-configuration
+partials.canvas.remote-port-configuration.Name=\u540d\u79f0
+partials.canvas.remote-port-configuration.ConcurrentTasks=\u73fe\u5728\u30bf\u30b9\u30af
+partials.canvas.remote-port-configuration.ConcurrentTasks.title=\u73fe\u5728\u30dd\u30fc\u30c8\u304c\u5b9f\u884c\u3059\u308b\u30bf\u30b9\u30af\u6570
+partials.canvas.remote-port-configuration.remote-port-use-compression=\u5727\u7e2e\u3055\u308c\u307e\u3059
+#remote-process-group-configuration
+partials.canvas.remote-process-group-configuration.Name=\u540d\u79f0
+partials.canvas.remote-process-group-configuration.Id=\u8b58\u5225\u5b50
+partials.canvas.remote-process-group-configuration.URL=URL
+partials.canvas.remote-process-group-configuration.TransportProtocol=\u8ee2\u9001\u30d7\u30ed\u30c8\u30b3\u30eb
+partials.canvas.remote-process-group-configuration.TransportProtocolTitle=\u3053\u306e\u30ea\u30e2\u30fc\u30c8\u30b0\u30eb\u30fc\u30d7\u901a\u4fe1\u51e6\u7406\u306b\u4f7f\u7528\u3055\u308c\u308b\u30c8\u30e9\u30f3\u30b9\u30dd\u30fc\u30c8\u30d7\u30ed\u30c8\u30b3\u30eb\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002
+partials.canvas.remote-process-group-configuration.hostname=\u0048\u0054\u0054\u0050\u30d7\u30ed\u30ad\u30b7\u30b5\u30fc\u30d0\u30fc\u540d
+partials.canvas.remote-process-group-configuration.hostnameTitle=\u6307\u5b9a\u304c\u4f7f\u3046\u30d7\u30ed\u30ad\u30b7\u30b5\u30fc\u30d0\u30fc\u306e\u30db\u30b9\u30c8\u540d\u002e\u3082\u3057\u672a\u6307\u5b9a\u3001\u0048\u0054\u0054\u0050\u6d41\u91cf\u306f\u76f4\u63a5\u9001\u4ed8\u004e\u0069\u0046\u0069\u5fdc\u7528\u76ee\u6a19\u3002
+partials.canvas.remote-process-group-configuration.port=\u0048\u0054\u0054\u0050\u30d7\u30ed\u30ad\u30b7\u30b5\u30fc\u30d0\u30fc\u30dd\u30fc\u30c8
+partials.canvas.remote-process-group-configuration.portTitle=\u6307\u5b9a\u4ee3\u7406\u30b5\u30fc\u30d0\u30fc\u306e\u30dd\u30fc\u30c8\u756a\u53f7\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u002e\u6307\u5b9a\u3055\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u30dd\u30fc\u30c8\u0038\u0030\u0020\u002e
+partials.canvas.remote-process-group-configuration.user=\u0048\u0054\u0054\u0050\u30d7\u30ed\u30ad\u30b7\u30e6\u30fc\u30b6\u30fc
+partials.canvas.remote-process-group-configuration.userTitle=\u4ee3\u7406\u30b5\u30fc\u30d0\u30fc\u306e\u30e6\u30fc\u30b6\u540d\u306b\u63a5\u7d9a\u3057\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u6307\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002
+partials.canvas.remote-process-group-configuration.pwd=\u0048\u0054\u0054\u0050\u30d7\u30ed\u30ad\u30b7\u30d1\u30b9\u30ef\u30fc\u30c9
+partials.canvas.remote-process-group-configuration.pwdTitle=\u4ee3\u7406\u30b5\u30fc\u30d0\u30fc\u306b\u63a5\u7d9a\u3059\u308b\u30e6\u30fc\u30b6\u30fc\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u6307\u5b9a\u3057\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u3002
+partials.canvas.remote-process-group-configuration.CommunicationsTimeout=\u901a\u4fe1\u6b98\u696d
+partials.canvas.remote-process-group-configuration.CommunicationsTimeoutTitle=\u5f7c\u3068\u3053\u306e\u30ea\u30e2\u30fc\u30c8\u30d7\u30ed\u30bb\u30b9\u7d44\u306e\u901a\u4fe1\u306b\u8cbb\u3084\u3059\u6642\u9593\u3092\u8d85\u3048\u308b\u3068\u304d\u95f4\u91cf\u3059\u308b\u6642\u3001\u305d\u308c\u3067\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u3002
+partials.canvas.remote-process-group-configuration.YieldDuration=\u751f\u7523\u30b5\u30a4\u30af\u30eb
+partials.canvas.remote-process-group-configuration.YieldDuration.title=\u9060\u9694\u51e6\u7406\u30c1\u30fc\u30e0\u304c\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u3057\u305f\u5f8c\u3001\u30b7\u30b9\u30c6\u30e0\u306f\u6307\u5b9a\u3057\u305f\u6642\u9593\u3092\u5f85\u3064
+#remote-process-group-details
+partials.canvas.remote-process-group-details.Name=\u540d\u79f0
+partials.canvas.remote-process-group-details.Id=\u8b58\u5225\u5b50
+partials.canvas.remote-process-group-details.URL=URL
+partials.canvas.remote-process-group-details.TransportProtocol=\u8ee2\u9001\u30d7\u30ed\u30c8\u30b3\u30eb
+partials.canvas.remote-process-group-details.TransportProtocolTitle=\u3053\u306e\u30ea\u30e2\u30fc\u30c8\u30b0\u30eb\u30fc\u30d7\u901a\u4fe1\u51e6\u7406\u306b\u4f7f\u7528\u3055\u308c\u308b\u30c8\u30e9\u30f3\u30b9\u30dd\u30fc\u30c8\u30d7\u30ed\u30c8\u30b3\u30eb\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002
+partials.canvas.remote-process-group-details.hostname=\u0048\u0054\u0054\u0050\u30d7\u30ed\u30ad\u30b7\u30b5\u30fc\u30d0\u30fc\u540d
+partials.canvas.remote-process-group-details.hostnameTitle=\u6307\u5b9a\u304c\u4f7f\u3046\u30d7\u30ed\u30ad\u30b7\u30b5\u30fc\u30d0\u30fc\u306e\u30db\u30b9\u30c8\u540d\u002e\u3082\u3057\u672a\u6307\u5b9a\u3001\u0048\u0054\u0054\u0050\u6d41\u91cf\u306f\u76f4\u63a5\u9001\u4ed8\u004e\u0069\u0046\u0069\u5fdc\u7528\u76ee\u6a19\u3002
+partials.canvas.remote-process-group-details.port=\u0048\u0054\u0054\u0050\u30d7\u30ed\u30ad\u30b7\u30b5\u30fc\u30d0\u30fc\u30dd\u30fc\u30c8
+partials.canvas.remote-process-group-details.portTitle=\u6307\u5b9a\u4ee3\u7406\u30b5\u30fc\u30d0\u30fc\u306e\u30dd\u30fc\u30c8\u756a\u53f7\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u002e\u6307\u5b9a\u3055\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u30dd\u30fc\u30c8\u0038\u0030\u0020\u002e
+partials.canvas.remote-process-group-details.user=\u0048\u0054\u0054\u0050\u30d7\u30ed\u30ad\u30b7\u30e6\u30fc\u30b6\u30fc
+partials.canvas.remote-process-group-details.userTitle=\u4ee3\u7406\u30b5\u30fc\u30d0\u30fc\u306e\u30e6\u30fc\u30b6\u540d\u306b\u63a5\u7d9a\u3057\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u6307\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002
+partials.canvas.remote-process-group-details.pwd=\u0048\u0054\u0054\u0050\u30d7\u30ed\u30ad\u30b7\u30d1\u30b9\u30ef\u30fc\u30c9
+partials.canvas.remote-process-group-details.pwdTitle=\u4ee3\u7406\u30b5\u30fc\u30d0\u30fc\u306b\u63a5\u7d9a\u3059\u308b\u30e6\u30fc\u30b6\u30fc\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u6307\u5b9a\u3057\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u3002
+partials.canvas.remote-process-group-details.CommunicationsTimeout=\u901a\u4fe1\u6b98\u696d
+partials.canvas.remote-process-group-details.CommunicationsTimeoutTitle=\u5f7c\u3068\u3053\u306e\u30ea\u30e2\u30fc\u30c8\u30d7\u30ed\u30bb\u30b9\u7d44\u306e\u901a\u4fe1\u306b\u8cbb\u3084\u3059\u6642\u9593\u3092\u8d85\u3048\u308b\u3068\u304d\u95f4\u91cf\u3059\u308b\u6642\u3001\u305d\u308c\u3067\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u3002
+partials.canvas.remote-process-group-details.YieldDuration=\u751f\u7523\u30b5\u30a4\u30af\u30eb
+partials.canvas.remote-process-group-details.YieldDuration.title=\u9060\u9694\u51e6\u7406\u30c1\u30fc\u30e0\u304c\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u3057\u305f\u5f8c\u3001\u30b7\u30b9\u30c6\u30e0\u306f\u6307\u5b9a\u3057\u305f\u6642\u9593\u3092\u5f85\u3064
+#remote-process-group-ports
+partials.canvas.remote-process-group-ports.Name=\u540d\u79f0
+partials.canvas.remote-process-group-ports.InputPorts=\u30a4\u30f3\u30d7\u30c3\u30c8\u30dd\u30fc\u30c8
+partials.canvas.remote-process-group-ports.URL=URL
+partials.canvas.remote-process-group-ports.OutputPorts=\u30a2\u30a6\u30c8\u30d7\u30c3\u30c8\u30dd\u30fc\u30c8
+#reporting-task-configuration
+partials.canvas.reporting-task-configuration.Name=\u540d\u79f0
+partials.canvas.reporting-task-configuration.Enabled=\u958b\u304b\u308c\u307e\u3057\u305f
+partials.canvas.reporting-task-configuration.Id=\u8b58\u5225\u5b50
+partials.canvas.reporting-task-configuration.Type=\u30bf\u30a4\u30d7
+partials.canvas.reporting-task-configuration.Availability=\u5229\u7528\u53ef\u80fd
+partials.canvas.reporting-task-configuration.Availability.title=\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u30b5\u30fc\u30d3\u30b9\u304c\u5229\u7528\u53ef\u80fd\u306a\u7b87\u6240
+partials.canvas.reporting-task-configuration.SchedulingStrategy=\u8a08\u753b\u30dd\u30ea\u30b7\u30fc
+partials.canvas.reporting-task-configuration.SchedulingStrategy.title=\u5f53\u8a72\u5831\u544a\u30bf\u30b9\u30af\u306b\u4f7f\u3046\u30dd\u30ea\u30b7\u30fc
+partials.canvas.reporting-task-configuration.RunSchedule=\u8a08\u753b\u30bf\u30b9\u30af\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002
+partials.canvas.reporting-task-configuration.RunSchedule.title=\u8a08\u753b\u30bf\u30b9\u30af\u306e\u5b9f\u884c\u6642\u9593
+partials.canvas.reporting-task-configuration.Comments=\u8a55\u4fa1
+#secure-port-configuration
+partials.canvas.secure-port-configuration.PortName=\u30dd\u30fc\u30c8\u540d
+partials.canvas.secure-port-configuration.Enable=\u8d77\u52d5
+partials.canvas.secure-port-configuration.Id=\u8b58\u5225\u5b50
+partials.canvas.secure-port-configuration.ConcurrentTasks=\u73fe\u5728\u30bf\u30b9\u30af
+partials.canvas.secure-port-configuration.ConcurrentTasks.title=\u73fe\u5728\u30dd\u30fc\u30c8\u304c\u5b9f\u884c\u3057\u3066\u3044\u308b\u30bf\u30b9\u30af\u6570
+partials.canvas.secure-port-configuration.Comments=\u8a55\u4fa1
+partials.canvas.secure-port-configuration.SearchUsers=\u30e6\u30fc\u30b6\u30fc\u691c\u7d22
+partials.canvas.secure-port-configuration.AllowedUsers=\u30e6\u30fc\u30b6\u30fc\u3092\u8a31\u53ef\u3057\u307e\u3059\u3002
+partials.canvas.secure-port-configuration.AllowedGroups=\u30b0\u30eb\u30fc\u30d7\u3092\u8a31\u53ef\u3057\u307e\u3059\u3002
+#secure-port-details
+partials.canvas.secure-port-details.PortName=\u30dd\u30fc\u30c8\u540d
+partials.canvas.secure-port-details.Id=\u8b58\u5225\u5b50
+partials.canvas.secure-port-details.ConcurrentTasks=\u73fe\u5728\u30bf\u30b9\u30af
+partials.canvas.secure-port-details.ConcurrentTasks.title=\u73fe\u5728\u30dd\u30fc\u30c8\u304c\u5b9f\u884c\u3057\u3066\u3044\u308b\u30bf\u30b9\u30af\u6570
+partials.canvas.secure-port-details.Comments=\u8a55\u4fa1
+partials.canvas.secure-port-details.AllowedUsers=\u30e6\u30fc\u30b6\u30fc\u3092\u8a31\u53ef\u3057\u307e\u3059\u3002
+partials.canvas.secure-port-details.AllowedGroups=\u30b0\u30eb\u30fc\u30d7\u3092\u8a31\u53ef\u3057\u307e\u3059\u3002
+#search-users-dialog
+partials.canvas.search-users-dialog.search-users-field=\u30e6\u30fc\u30b6\u30fc\u0049\u0044
+#settings-content
+partials.canvas.settings-content.new-service-or-task=\u65b0\u3057\u3044\u30b5\u30fc\u30d3\u30b9\u30fb\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
+partials.canvas.settings-content.settings-header-text=\u30c7\u30fc\u30bf\u30b9\u30c8\u30ea\u30fc\u30e0\u69cb\u6210
+partials.canvas.settings-content.setting1=\u30b9\u30ec\u30c3\u30c9\u30bf\u30a4\u30de\u30fc\u30c9\u30e9\u30a4\u30d6\u306e\u6700\u5927\u6570
+partials.canvas.settings-content.setting1-title=\u30b7\u30b9\u30c6\u30e0\u30bf\u30a4\u30de\u30fc\u99c6\u52d5\u578b\u30d7\u30ed\u30bb\u30c3\u30b5\u4e0a\u3067\u5229\u7528\u53ef\u80fd\u306a\u30b9\u30ec\u30c3\u30c9\u306e\u6700\u5927\u6570\u3002
+partials.canvas.settings-content.setting2=\u6700\u5927\u306e\u30a4\u30d9\u30f3\u30c8\u99c6\u52d5\u578b\u30b9\u30ec\u30c3\u30c9\u6570
+partials.canvas.settings-content.setting2-title=\u30a4\u30d9\u30f3\u30c8\u99c6\u52d5\u578b\u30d7\u30ed\u30bb\u30c3\u30b5\u306f\u3001\u30b7\u30b9\u30c6\u30e0\u5185\u306e\u30b9\u30ec\u30c3\u30c9\u306e\u6700\u5927\u6570\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
+partials.canvas.settings-content.settings-save=\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3
+partials.canvas.settings-content.LastUpdated=\u6700\u7d42\u66f4\u65b0\u65e5\uff1a
+partials.canvas.settings-content.DataFlowName=\u30c7\u30fc\u30bf\u30b9\u30c8\u30ea\u30fc\u30e0\u306e\u540d\u524d
+partials.canvas.settings-content.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+partials.canvas.settings-content.Apply=\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3
+partials.canvas.settings-content.archive-flow-link=\u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u30b9\u30c8\u30ea\u30fc\u30e0
+partials.canvas.settings-content.archive-flow-link.title=\u5727\u7e2e\u30b9\u30c8\u30ea\u30fc\u30e0\u69cb\u6210
+partials.canvas.settings-content.DataFlowComments=\u30c7\u30fc\u30bf\u30b9\u30c8\u30ea\u30fc\u30e0\u306e\u30b3\u30e1\u30f3\u30c8
+partials.canvas.settings-content.MaximumTimerDrivenThreadCoun=\u6700\u5927\u6642\u9593\u99c6\u52d5\u306e\u30b9\u30ec\u30c3\u30c9
+partials.canvas.settings-content.MaximumTimerDrivenThreadCount=\u30b9\u30ec\u30c3\u30c9\u306e\u6700\u5927\u6570\u306f\u3001\u6642\u9593\u99c6\u52d5\u578b\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3092\u8a2d\u5b9a\u3057\u307e\u3057\u305f
+partials.canvas.settings-content.MaximumTimerDrivenThreadCount.title=\u6642\u9593\u99c6\u52d5\u30b7\u30b9\u30c6\u30e0\u306e\u5236\u5fa1\u88c5\u7f6e\u306f\u3001\u30b9\u30ec\u30c3\u30c9\u306e\u6700\u5927\u6570\u3092\u8a2d\u5b9a\u3057\u307e\u3059
+partials.canvas.settings-content.MaximumEventDrivenThreadCount=\u30a4\u30d9\u30f3\u30c8\u99c6\u52d5\u578b\u30b9\u30ec\u30c3\u30c9\u306e\u6700\u5927\u6570
+partials.canvas.settings-content.MaximumEventDrivenThreadCount.title=\u30a4\u30d9\u30f3\u30c8\u99c6\u52d5\u578b\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u8a2d\u5b9a\u306e\u305f\u3081\u306e\u30b9\u30ec\u30c3\u30c9\u306e\u6700\u5927\u6570
+#shell
+partials.canvas.shell.shell-undock-button=\u65b0\u3057\u3044\u30a6\u30a3\u30f3\u30c9\u30a6\u3067\u958b\u304f
+partials.canvas.shell.shell-close-button=\u9589\u9396
+partials.canvas.shell.OpenNewWindows=\u65b0\u3057\u3044\u30a6\u30a3\u30f3\u30c9\u30a6\u3092\u958b\u304d\u307e\u3059\u3002
+paritals.canvas.shell.Close=\u9589\u3058\u308b
+#upload-template-dialog
+partials.cancas.upload-template-dialog.select-template-label=\u9078\u629e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8
+partials.cancas.upload-template-dialog.template-file-field=\u30d6\u30e9\u30a6\u30ba
+#-------------------------------------------------
+# partials
+# cluster
+# cluster-content
+partials.cluster.cluster-content.NiFiCluster=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u30af\u30e9\u30b9\u30bf\u30fc\u30b5\u30fc\u30d0\u30fc
+partials.cluster.cluster-content.Displaying=\u8868\u793a:&nbsp;
+partials.cluster.cluster-content.Of=&nbsp;\u4e2d&nbsp;
+partials.cluster.cluster-content.LastUpdated=\u6700\u7d42\u66f4\u65b0:
+partials.cluster.cluster-content.Filter=\u308d\u904e
+partials.cluster.cluster-content.Refresh=\u5237\u65b0
+#node-details-dialog
+partials.cluster.node-details-dialog.Address=\u30a2\u30c9\u30ec\u30b9
+partials.cluster.node-details-dialog.NodeId=\u30ce\u30fc\u30c9\u8b58\u5225\u5b50
+partials.cluster.node-details-dialog.NodeEvents=\u30ce\u30fc\u30c9\u30a4\u30d9\u30f3\u30c8
+#-------------------------------------------------
+# partials
+# counters
+# counters-content
+partials.counters.counters-content.counters-header-text=\u30c7\u30fc\u30bf\u30fb\u30d5\u30ed\u30fc\u30fb\u30ab\u30a6\u30f3\u30bf
+partials.counters.counters-content.Displaying=\u8868\u793a&nbsp;
+partials.counters.counters-content.Of=&nbsp;\u4e2d&nbsp;
+partials.counters.counters-content.LastUpdated=\u6700\u7d42\u66f4\u65b0:&nbsp;
+partials.counters.counters-content.Filter=\u308d\u904e
+partials.counters.counters-content.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+#-------------------------------------------------
+# partials
+# history
+# action-details-dialog
+# history-content
+partials.history.history-content.history-header-text=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u306e\u5c65\u6b74\u60c5\u5831
+partials.history.history-content.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+partials.history.history-content.LastUpdated=\u6700\u7d42\u66f4\u65b0:&nbsp;
+partials.history.history-content.history-filter-overview=\uff11\u3064\u306e\u30d5\u30a3\u30eb\u30bf\u30fc\u306f\u5fdc\u7528\u3055\u308c\u307e\u3057\u305f\u3002
+partials.history.history-content.clear-history-filter=\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u30af\u30ea\u30a2\u3057\u307e\u3059\u3002
+partials.history.history-content.Filter=\u30d5\u30a3\u30eb\u30bf\u30fc
+partials.history.history-content.Purge=\u6d44\u5316\u8a2d\u5099
+paritals.history.history-content.cluster-history-message=\u73fe\u5728\u306e\u30ce\u30fc\u30c9\u306e\u6b74\u53f2\u8a18\u9332\u3092\u898b\u308b\u3060\u3051\u3067\u3002\u5225\u306e\u0031\u3064\u306e\u30ce\u30fc\u30c9\u3092\u30d6\u30e9\u30a6\u30ba\u3066\u305d\u306e\u6b74\u53f2\u306e\u8a18\u9332\u3092\u8abf\u3079\u3066\u3002
+paritals.history.history-content.history-last-refreshed-container=\u6700\u8fd1\u66f4\u65b0\u6642\u9593\u3092\u66f4\u65b0\u3057\u3066\uff1a
+paritals.history.history-content.history-filter-button.title=\u30d5\u30a3\u30eb\u30bf\u30fc\u306e\u6b74\u53f2\u8a18\u9332
+paritals.history.history-content.history-purge-button.title=\u6b74\u53f2\u3092\u30af\u30ea\u30a2\u3059\u308b
+paritals.history.history-content.refresh-button.title=\u66f4\u65b0
+# history-filter-dialog
+partials.history.history-filter-dialog.Filter=\u30d5\u30a3\u30eb\u30bf\u30fc
+partials.history.history-filter-dialog.StartDate=\u958b\u59cb\u65e5\u4ed8
+partials.history.history-filter-dialog.StartDate.title=\u958b\u59cb\u65e5\u4ed8\u306e\u5f62\u5f0f\u306f 'mm/dd/yyyy'\u3067\u3059\u3002 \u958b\u59cb\u6642\u9593\u3092\u6307\u5b9a\u3059\u3079\u304d\u3067\u3059\u3002
+partials.history.history-filter-dialog.StartTime=\u958b\u59cb\u6642\u9593
+partials.history.history-filter-dialog.StartTime.title=\u958b\u59cb\u6642\u9593\u306e\u5f62\u5f0f\u306f 'hh:mm:ss'\u3067\u3059\u3002\u958b\u59cb\u65e5\u4ed8\u3092\u6307\u5b9a\u3059\u3079\u304d\u3067\u3059\u3002
+partials.history.history-filter-dialog.EndDate=\u7d42\u4e86\u65e5\u4ed8
+partials.history.history-filter-dialog.EndDate.title=\u7d42\u4e86\u65e5\u4ed8\u306e\u5f62\u5f0f\u306f 'mm/dd/yyyy'\u3067\u3059\u3002 \u7d42\u4e86\u6642\u9593\u3092\u6307\u5b9a\u3059\u3079\u304d\u3067\u3059\u3002
+partials.history.history-filter-dialog.EndTime=\u7d42\u4e86\u6642\u9593
+partials.history.history-filter-dialog.EndTime.title=\u7d42\u4e86\u6642\u9593\u306e\u5f62\u5f0f\u306f 'hh:mm:ss'\u3067\u3059\u3002\u7d42\u4e86\u65e5\u4ed8\u3092\u6307\u5b9a\u3059\u3079\u304d\u3067\u3059\u3002
+# history-purge-dialog
+partials.history.history-purge-dialog.Title1=\u30af\u30ea\u30a2\u7d42\u4e86\u65e5\u4ed8\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u300c\u0059\u0059\u0059\u0059\u0020\u002f\u0020\u004d\u004d\u0020\u002f\u0020\u0044\u0044\u300d\u3002\u307e\u305f\u3001\u7d42\u4e86\u6642\u523b\u3092\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
+partials.history.history-purge-dialog.Title2=\u7d42\u4e86\u6642\u523b\u5f62\u5f0f\u300c\u0068\u0068\uff1a\u006d\u006d\uff1a\u0073\u0073\u300d\u306f\u3001\u3042\u306a\u305f\u306f\u307e\u305f\u3001\u7d42\u4e86\u65e5\u3092\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
+partials.history.history-purge-dialog.EndDate=\u7d42\u4e86\u65e5\u4ed8
+partials.history.history-purge-dialog.EndDate.title=\u6d44\u5316\u7d42\u4e86\u6642\u9593\u306e\u5f62\u5f0f\u306f 'hh:mm:ss'\u3067\u3059\u3002\u7d42\u4e86\u65e5\u4ed8\u3092\u6307\u5b9a\u3059\u3079\u304d\u3067\u3059\u3002
+partials.history.history-purge-dialog.EndTime=\u7d42\u4e86\u6642\u9593
+partials.history.history-purge-dialog.EndTime.title=\u7d42\u4e86\u6642\u9593\u306e\u5f62\u5f0f\u306f 'hh:mm:ss'\u3067\u3059\u3002\u7d42\u4e86\u65e5\u4ed8\u3092\u6307\u5b9a\u3059\u3079\u304d\u3067\u3059\u3002
+
+#-------------------------------------------------
+# partials
+# login
+# login-form
+paritals.login.login-form.login-title=\u767b\u9332
+paritals.login.login-form.Username=\u30e6\u30fc\u30b6\u30fc\u540d
+paritals.login.login-form.Password=\u30d1\u30b9\u30ef\u30fc\u30c9
+paritals.login.login-form.User=\u30e6\u30fc\u30b6\u30fc
+# login-message
+# login-progress
+# login-submission
+paritals.login.login-submission.login-submission-button=\u767b\u9332
+
+#-------------------------------------------------
+# partials
+# provenance
+# lineage-query-dialog
+# provenance-content
+partials.provenance.provenance-content.provenance-header-text=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u30c7\u30fc\u30bf\u51fa\u6240
+partials.provenance.provenance-content.Displaying=\u8868\u793a
+partials.provenance.provenance-content.oldest-event-message=\u5229\u7528\u53ef\u80fd\u306a\u53e4\u3044\u30a4\u30d9\u30f3\u30c8
+partials.provenance.provenance-content.LastUpdated=\u6700\u7d42\u66f4\u65b0:
+partials.provenance.provenance-content.clear-provenance-search=\u691c\u7d22\u3092\u30af\u30ea\u30a2\u3057\u307e\u3059
+partials.provenance.provenance-content.Search=\u691c\u7d22
+partials.provenance.provenance-content.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+partials.provenance.provenance-content.Download=\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9
+partials.provenance.provenance-content.Close=\u9589\u3058\u308b
+paritals.provenance.provenance-content.refresh-button.title=\u66f4\u65b0
+paritals.provenance.provenance-content.provenance-lineage-downloader.title=\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9
+paritals.provenance.provenance-content.provenance-lineage-closer.title=\u4e8b\u4ef6\u306e\u30ea\u30b9\u30c8\u306b\u623b\u308b
+paritals.provenance.provenance-content.provenance-filter-container=\u308d\u904e
+# provenance-event-details-dialog
+partials.provenance.provenance-event-details-dialog.Time=\u6642\u9593
+partials.provenance.provenance-event-details-dialog.EventDuration=\u30a4\u30d9\u30f3\u30c8\u306e\u6301\u7d9a\u6642\u9593
+partials.provenance.provenance-event-details-dialog.LineageDuration=\u6301\u7d9a\u6642\u9593
+partials.provenance.provenance-event-details-dialog.Type=\u30bf\u30a4\u30d7
+partials.provenance.provenance-event-details-dialog.FlowFileUuid=\u30d5\u30a1\u30a4\u30ebUUID
+partials.provenance.provenance-event-details-dialog.FileSize=\u30d5\u30a1\u30a4\u30eb\u306e\u30b5\u30a4\u30ba
+partials.provenance.provenance-event-details-dialog.ComponentId=\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8b58\u5225\u5b50
+partials.provenance.provenance-event-details-dialog.ComponentName=\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u540d\u79f0
+partials.provenance.provenance-event-details-dialog.ComponentType=\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30bf\u30a4\u30d7
+partials.provenance.provenance-event-details-dialog.Details=\u8a73\u7d30
+partials.provenance.provenance-event-details-dialog.ParentFlowFiles=\u89aa\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u30d5\u30a1\u30a4\u30eb
+partials.provenance.provenance-event-details-dialog.ChildFlowFiles=\u5b50\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u30d5\u30a1\u30a4\u30eb
+partials.provenance.provenance-event-details-dialog.AttributeValues=\u3071\u308d\u3071\u3066\u3043\u5024
+partials.provenance.provenance-event-details-dialog.OnlyShowModified=\u66f4\u65b0\u5206\u306e\u307f\u3092\u8868\u793a\u3057\u307e\u3059
+partials.provenance.provenance-event-details-dialog.InputClaim=\u30a4\u30f3\u30d7\u30c3\u30c8\u78ba\u8a8d
+partials.provenance.provenance-event-details-dialog.Container=\u5bb9\u5668
+partials.provenance.provenance-event-details-dialog.Section=\u5730\u57df
+partials.provenance.provenance-event-details-dialog.Identifier=\u8b58\u5225\u5b50
+partials.provenance.provenance-event-details-dialog.Offset=\u30aa\u30d5\u30bb\u30c3\u30c8
+partials.provenance.provenance-event-details-dialog.Size=\u30b5\u30a4\u30ba
+partials.provenance.provenance-event-details-dialog.Download=\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9
+partials.provenance.provenance-event-details-dialog.View=\u30d3\u30e5\u30fc
+partials.provenance.provenance-event-details-dialog.OutputClaim=\u30a2\u30a6\u30c8\u30d7\u30c3\u30c8\u5ba3\u8a00
+partials.provenance.provenance-event-details-dialog.Replay=\u30ea\u30d7\u30ec\u30a4
+partials.provenance.provenance-event-details-dialog.ConnectionId=\u30ea\u30f3\u30af\u8b58\u5225\u5b50
+partials.provenance.provenance-event-details-dialog.Submit=\u30b5\u30d6\u30df\u30c3\u30c8
+#provenance-query-dialog
+#provenance-search-dialog
+partials.provenance.provenance-search-dialog.Fields=\u30d7\u30ed\u30d1\u30c6\u30a3
+partials.provenance.provenance-search-dialog.no-searchable-fields=\u691c\u7d22\u53ef\u80fd\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3057\u305f\u3053\u3068\u304c\u3042\u308a\u307e\u305b\u3093\u3002
+partials.provenance.provenance-search-dialog.StartDate=\u958b\u59cb\u65e5\u4ed8
+partials.provenance.provenance-search-dialog.StartDate.title=\u958b\u59cb\u65e5\u4ed8\u306e\u5f62\u5f0f\u306f 'mm/dd/yyyy'\u3067\u3059\u3002 \u958b\u59cb\u6642\u9593\u3092\u6307\u5b9a\u3059\u3079\u304d\u3067\u3059\u3002
+partials.provenance.provenance-search-dialog.StartTime=\u958b\u59cb\u6642\u9593
+partials.provenance.provenance-search-dialog.StartTime.title=\u958b\u59cb\u6642\u9593\u306e\u5f62\u5f0f\u306f 'hh:mm:ss'\u3067\u3059\u3002\u958b\u59cb\u65e5\u4ed8\u3092\u6307\u5b9a\u3059\u3079\u304d\u3067\u3059\u3002
+partials.provenance.provenance-search-dialog.EndDate=\u7d42\u4e86\u65e5\u4ed8
+partials.provenance.provenance-search-dialog.EndDate.title=\u7d42\u4e86\u65e5\u4ed8\u306e\u5f62\u5f0f\u306f 'mm/dd/yyyy'\u3067\u3059\u3002 \u7d42\u4e86\u6642\u9593\u3092\u6307\u5b9a\u3059\u3079\u304d\u3067\u3059\u3002
+partials.provenance.provenance-search-dialog.EndTime=\u7d42\u4e86\u6642\u9593
+partials.provenance.provenance-search-dialog.EndTime.title=\u7d42\u4e86\u6642\u9593\u306e\u5f62\u5f0f\u306f 'hh:mm:ss'\u3067\u3059\u3002\u7d42\u4e86\u65e5\u4ed8\u3092\u6307\u5b9a\u3059\u3079\u304d\u3067\u3059\u3002
+partials.provenance.provenance-search-dialog.MinimumFileSize=\u6700\u5c0f\u30d5\u30a1\u30a4\u30eb\u306e\u30b5\u30a4\u30ba
+partials.provenance.provenance-search-dialog.MinimumFileSize.title=\u6700\u5c0f\u30d5\u30a1\u30a4\u30eb\u306e\u30b5\u30a4\u30ba \u4f8b\u3001 2KB
+partials.provenance.provenance-search-dialog.MaximumFileSize=\u6700\u5927\u30d5\u30a1\u30a4\u30eb\u306e\u30b5\u30a4\u30ba
+partials.provenance.provenance-search-dialog.MaximumFileSize.title=\u6700\u5927\u30d5\u30a1\u30a4\u30eb\u306e\u30b5\u30a4\u30ba \u4f8b\u3001 4GB
+partials.provenance.provenance-search-dialog.SearchLocation=\u691c\u7d22\u5730\u57df
+#-------------------------------------------------
+# partials
+# summary
+# cluster-connection-summary-dialog
+partials.summary.cluster-connection-summary-dialog.LastUpdated=\u6700\u7d42\u66f4\u65b0:
+partials.summary.cluster-connection-summary-dialog.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+# cluster-input-port-summary-dialog
+partials.summary.cluster-input-port-summary-dialog.LastUpdated=\u6700\u7d42\u66f4\u65b0:
+partials.summary.cluster-input-port-summary-dialog.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+# cluster-output-port-summary-dialog
+partials.summary.cluster-output-port-summary-dialog.LastUpdated=\u6700\u7d42\u66f4\u65b0:
+partials.summary.cluster-output-port-summary-dialog.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+# cluster-process-group-summary-dialog
+partials.summary.cluster-process-group-summary-dialog.LastUpdated=\u6700\u7d42\u66f4\u65b0:
+partials.summary.cluster-process-group-summary-dialog.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+# cluster-processor-summary-dialog
+partials.summary.cluster-processor-summary-dialog.LastUpdated=\u6700\u7d42\u66f4\u65b0:
+partials.summary.cluster-processor-summary-dialog.Refresh=\u66f4\u65b0
+
+# cluster-remote-process-group-summary-dialog
+partials.summary.cluster-remote-process-group-summary-dialog.LastUpdated=\u6700\u7d42\u66f4\u65b0:
+partials.summary.cluster-remote-process-group-summary-dialog.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+# summary-content
+partials.summary.summary-content.summary-header-text=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u306e\u307e\u3068\u3081
+partials.summary.summary-content.Displaying=\u8868\u793a&nbsp;
+partials.summary.summary-content.Of=&nbsp;\u4e2d&nbsp;
+partials.summary.summary-content.View=\u30d3\u30e5\u30fc:
+partials.summary.summary-content.SingleNode=\u30b7\u30f3\u30b0\u30eb\u30ce\u30fc\u30c9
+partials.summary.summary-content.Cluster=\u30af\u30e9\u30b9\u30bf\u30fc
+partials.summary.summary-content.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+partials.summary.summary-content.LastUpdated=\u6700\u7d42\u66f4\u65b0:
+partials.summary.summary-content.SystemDiagnostics=\u30b7\u30b9\u30c6\u30e0\u5206\u6790
+partials.summary.summary-content.summary-filter-container=\u308d\u904e
+# system-diagnostics-dialog
+partials.summary.system-diagnostics-dialog.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+partials.summary.system-diagnostics-dialog.LastUpdated=\u6700\u7d42\u66f4\u65b0:
+partials.summary.system-diagnostics-dialog.Heap=\u30d2\u30fc\u30d7
+partials.summary.system-diagnostics-dialog.Max=\u6700\u5927\u5024
+partials.summary.system-diagnostics-dialog.Total=\u7dcf\u8a08
+partials.summary.system-diagnostics-dialog.Used=\u4f7f\u7528\u3057\u305f
+partials.summary.system-diagnostics-dialog.Free=\u672a\u4f7f\u7528
+partials.summary.system-diagnostics-dialog.NonHeap=\u30ce\u30f3\u30d2\u30fc\u30d7
+partials.summary.system-diagnostics-dialog.GarbageCollection=\u30ac\u30fc\u30d9\u30b8\u30b3\u30ec\u30af\u30b7\u30e7\u30f3
+partials.summary.system-diagnostics-dialog.AvailableProcessors=\u5229\u7528\u53ef\u80fd\u306a\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc
+partials.summary.system-diagnostics-dialog.ProcessorLoadAverage=\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u306e\u5e73\u5747\u8ca0\u8377
+partials.summary.system-diagnostics-dialog.ProcessorLoadAverage.title=\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u306e\u6700\u5f8c\u306e1\u5206\u9593\u306e\u5e73\u5747\u8ca0\u8377\u3067\u3059\u3002\u3059\u3079\u3066\u306e\u30b7\u30b9\u30c6\u30e0\u304c\u5229\u7528\u3067\u304d\u308b\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002
+partials.summary.system-diagnostics-dialog.FlowFileRepositoryStorageUsage=\u30d5\u30ed\u30fc\u30d5\u30a1\u30a4\u30eb\u306e\u683c\u7d0d\u5229\u7528
+partials.summary.system-diagnostics-dialog.ContentRepositoryStorageUsage=\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u683c\u7d0d\u5229\u7528
+# view-single-node-dialog
+partials.summary.view-single-node-dialog.cluster-search-example=\u4f8b\u3048\u3070\uff1a
+#-------------------------------------------------
+# partials
+# templates
+# templates-content
+partials.templates.templates-content.templates-header-text=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8
+partials.templates.templates-content.Displaying=\u8868\u793a&nbsp;
+partials.templates.templates-content.Of=&nbsp;\u4e2d&nbsp;
+partials.templates.templates-content.LastUpdated=\u6700\u7d42\u66f4\u65b0:
+partials.templates.templates-content.Browse=\u30d6\u30e9\u30a6\u30b9
+partials.templates.templates-content.Import=\u30a4\u30f3\u30dd\u30fc\u30c8
+partials.templates.templates-content.\u30ad\u30e3\u30f3\u30bb\u30eb=\u30ad\u30e3\u30f3\u30bb\u30eb
+partials.templates.templates-content.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+partials.templates.templates-content.templates-filter-container=\u308d\u904e
+#-------------------------------------------------
+# partials
+# users
+# group-revoke-dialog
+partials.users.group-revoke-dialog.dialog-content=\u30e9\u30a4\u30bb\u30f3\u30b9\u3092\u3059\u3079\u3066\u306e\u30e6\u30fc\u30b6\u30fc\u306b\u914d\u5e03\u3057\u3066\u3088\u308d\u3057\u3044\u3067\u3059\u304b\u3002
+# group-roles-dialog
+partials.users.group-roles-dialog.Group=\u30b0\u30eb\u30fc\u30d7
+partials.users.group-roles-dialog.Roles=\u30ed\u30fc\u30eb
+partials.users.group-roles-dialog.Administrator=\u30a2\u30c9\u30df\u30cb\u30b9\u30c8\u30ec\u30fc\u30bf
+partials.users.group-roles-dialog.DataFlowManager=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u306e\u7ba1\u7406\u8005
+partials.users.group-roles-dialog.ReadOnly=\u30ea\u30fc\u30c9\u30aa\u30f3\u30ea\u30fc
+partials.users.group-roles-dialog.Provenance=\u51fa\u6240
+partials.users.group-roles-dialog.NiFi=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc
+partials.users.group-roles-dialog.Proxy=\u30d7\u30ed\u30ad\u30b7
+# user-delete-dialog
+partials.users.user-delete-dialog.user-id-delete-dialog=\u30e6\u30fc\u30b6\u30fc\u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u524a\u9664\u3057\u3066\u3088\u308d\u3057\u3044\u3067\u3059\u304b\u3002
+# user-dialog
+partials.users.user-dialog.Individual=\u500b\u4eba\u7684\u306a
+partials.users.user-dialog.Group=\u30b0\u30eb\u30fc\u30d7
+partials.users.user-dialog.Identity=\u30a2\u30a4\u30c7\u30f3\u30c6\u30a3\u30c6\u30a3
+partials.users.user-dialog.user-groups=\u30e1\u30f3\u30d0\u30fc\u306e
+partials.users.user-dialog.group-members=\u30e1\u30f3\u30d0\u30fc
+# user-details-dialog
+partials.users.user-details-dialog.User=\u30e6\u30fc\u30b6\u30fc
+partials.users.user-details-dialog.DN=DN
+partials.users.user-details-dialog.Created=\u4f5c\u6210\u6e08\u307f
+partials.users.user-details-dialog.LastVerified=\u6700\u5f8c\u306e\u691c\u8a3c\u6642\u9593
+partials.users.user-details-dialog.Justification=\u691c\u8a3c
+# user-group-dialog
+partials.users.user-group-dialog.GroupName=\u30b0\u30eb\u30fc\u30d7\u540d
+# user-revoke-dialog
+partials.users.user-revoke-dialog.user-id-revoke-dialog=\u30e9\u30a4\u30bb\u30f3\u30b9\u3092\u3000\u3057\u3066\u3088\u308d\u3057\u3044\u3067\u3059\u304b\u3002
+# user-roles-dialog
+partials.users.user-roles-dialog.User=\u30e6\u30fc\u30b6\u30fc
+partials.users.user-roles-dialog.Justification=\u691c\u8a3c
+partials.users.user-roles-dialog.Roles=\u30ed\u30fc\u30eb
+partials.users.user-roles-dialog.Administrator=\u30a2\u30c9\u30df\u30cb\u30b9\u30c8\u30ec\u30fc\u30bf
+partials.users.user-roles-dialog.DataFlowManager=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u306e\u7ba1\u7406\u8005
+partials.users.user-roles-dialog.ReadOnly=\u30ea\u30fc\u30c9\u30aa\u30f3\u30ea\u30fc
+partials.users.user-roles-dialog.Provenance=\u30c7\u30fc\u30bf\u51fa\u6240
+partials.users.user-roles-dialog.NiFi=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc
+partials.users.user-roles-dialog.Proxy=\u30d7\u30ed\u30ad\u30b7
+# users-content
+partials.users.users-content.users-header-text=\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u30e6\u30fc\u30b6\u30fc
+partials.users.users-content.Displaying=\u8868\u793a&nbsp;
+partials.users.users-content.Of=&nbsp;\u4e2d&nbsp;
+partials.users.users-content.LastUpdated=\u6700\u7d42\u66f4\u65b0:
+partials.users.users-content.ShowByGroup=\u30b0\u30eb\u30fc\u30d7\u306b\u57fa\u3065\u304d\u3001\u8868\u793a\u3057\u307e\u3059\u3002
+partials.users.users-content.Group=\u30b0\u30eb\u30fc\u30d7
+partials.users.users-content.Refresh=\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5
+partials.users.users-content.users-filter-container=\u308d\u904e
\ No newline at end of file

From 60492b13c10cbab667d3b3cc2e9aaacc2a2341a2 Mon Sep 17 00:00:00 2001
From: WangJian <1925432244@qq.com>
Date: Sun, 19 Mar 2017 10:36:05 +0800
Subject: [PATCH 07/13] nothing

---
 .../src/main/webapp/js/codemirror/LICENSE     |   19 -
 .../js/codemirror/addon/fold/foldgutter.css   |   20 -
 .../js/codemirror/addon/hint/show-hint.css    |   38 -
 .../js/codemirror/addon/lint/json-lint.js     |   31 -
 .../webapp/js/codemirror/addon/lint/lint.css  |   73 -
 .../webapp/js/codemirror/addon/lint/lint.js   |  239 --
 .../codemirror/lib/codemirror-compressed.js   |   26 -
 .../webapp/js/codemirror/lib/codemirror.css   |  318 --
 .../webapp/js/jquery/combo/jquery.combo.css   |  117 -
 .../webapp/js/jquery/combo/jquery.combo.js    |  363 --
 .../main/webapp/js/jquery/combo/menuArrow.png |  Bin 251 -> 0 bytes
 .../webapp/js/jquery/combo/menuArrowSmall.png |  Bin 233 -> 0 bytes
 .../main/webapp/js/jquery/jquery.base64.js    |  123 -
 .../main/webapp/js/jquery/jquery.center.js    |   35 -
 .../src/main/webapp/js/jquery/jquery.count.js |   99 -
 .../src/main/webapp/js/jquery/jquery.each.js  |   31 -
 .../main/webapp/js/jquery/jquery.ellipsis.js  |  165 -
 .../src/main/webapp/js/jquery/jquery.tab.js   |   69 -
 .../webapp/js/jquery/modal/jquery.modal.css   |   94 -
 .../webapp/js/jquery/modal/jquery.modal.js    |  578 ----
 .../js/jquery/nfeditor/jquery.nfeditor.css    |   75 -
 .../js/jquery/nfeditor/jquery.nfeditor.js     |  335 --
 .../js/jquery/nfeditor/languages/nfel.css     |   51 -
 .../js/jquery/nfeditor/languages/nfel.js      |  874 -----
 .../propertytable/buttonNewProperty.png       |  Bin 590 -> 0 bytes
 .../propertytable/jquery.propertytable.css    |  122 -
 .../propertytable/jquery.propertytable.js     | 1928 -----------
 .../webapp/js/jquery/tabbs/jquery.tabbs.css   |   91 -
 .../webapp/js/jquery/tabbs/jquery.tabbs.js    |  107 -
 .../js/jquery/tagcloud/jquery.tagcloud.css    |   70 -
 .../js/jquery/tagcloud/jquery.tagcloud.js     |  225 --
 .../js/nf/bulletin-board/nf-bulletin-board.js |  494 ---
 .../nf-ng-breadcrumbs-controller.js           |  192 --
 .../nf-ng-canvas-flow-status-controller.js    |  520 ---
 .../nf-ng-canvas-global-menu-controller.js    |  440 ---
 .../nf-ng-canvas-graph-controls-controller.js |  351 --
 .../nf-ng-canvas-header-controller.js         |  155 -
 .../nf-ng-canvas-navigate-controller.js       |  111 -
 .../nf-ng-canvas-operate-controller.js        |  510 ---
 .../nf-ng-canvas-toolbox-controller.js        |  168 -
 .../directives/nf-ng-breadcrumbs-directive.js |   50 -
 .../directives/nf-ng-draggable-directive.js   |   43 -
 .../components/nf-ng-funnel-component.js      |  148 -
 .../components/nf-ng-group-component.js       |  274 --
 .../components/nf-ng-input-port-component.js  |  267 --
 .../components/nf-ng-label-component.js       |  153 -
 .../components/nf-ng-output-port-component.js |  258 --
 .../components/nf-ng-processor-component.js   |  710 ----
 .../nf-ng-remote-process-group-component.js   |  321 --
 .../components/nf-ng-template-component.js    |  287 --
 .../main/webapp/js/nf/canvas/nf-actions.js    | 1724 ----------
 .../main/webapp/js/nf/canvas/nf-birdseye.js   |  372 --
 .../js/nf/canvas/nf-canvas-bootstrap.js       |  400 ---
 .../js/nf/canvas/nf-canvas-error-handler.js   |   72 -
 .../webapp/js/nf/canvas/nf-canvas-utils.js    | 1685 ---------
 .../src/main/webapp/js/nf/canvas/nf-canvas.js | 1330 -------
 .../main/webapp/js/nf/canvas/nf-clipboard.js  |  115 -
 .../webapp/js/nf/canvas/nf-component-state.js |  424 ---
 .../webapp/js/nf/canvas/nf-connectable.js     |  289 --
 .../nf/canvas/nf-connection-configuration.js  | 1472 --------
 .../main/webapp/js/nf/canvas/nf-connection.js | 2185 ------------
 .../webapp/js/nf/canvas/nf-context-menu.js    |  631 ----
 .../js/nf/canvas/nf-controller-service.js     | 2167 ------------
 .../js/nf/canvas/nf-controller-services.js    | 1222 -------
 .../main/webapp/js/nf/canvas/nf-custom-ui.js  |   88 -
 .../main/webapp/js/nf/canvas/nf-draggable.js  |  422 ---
 .../src/main/webapp/js/nf/canvas/nf-funnel.js |  418 ---
 .../src/main/webapp/js/nf/canvas/nf-go-to.js  |  875 -----
 .../src/main/webapp/js/nf/canvas/nf-graph.js  |  423 ---
 .../js/nf/canvas/nf-label-configuration.js    |  198 --
 .../src/main/webapp/js/nf/canvas/nf-label.js  |  617 ----
 .../js/nf/canvas/nf-ng-canvas-namespace.js    |   19 -
 .../js/nf/canvas/nf-policy-management.js      | 1474 --------
 .../js/nf/canvas/nf-port-configuration.js     |  215 --
 .../webapp/js/nf/canvas/nf-port-details.js    |   87 -
 .../src/main/webapp/js/nf/canvas/nf-port.js   |  775 -----
 .../canvas/nf-process-group-configuration.js  |  382 ---
 .../webapp/js/nf/canvas/nf-process-group.js   | 1292 -------
 .../nf/canvas/nf-processor-configuration.js   |  908 -----
 .../main/webapp/js/nf/canvas/nf-processor.js  | 1087 ------
 .../webapp/js/nf/canvas/nf-queue-listing.js   |  795 -----
 .../nf-remote-process-group-configuration.js  |  208 --
 .../canvas/nf-remote-process-group-details.js |  106 -
 .../canvas/nf-remote-process-group-ports.js   |  592 ----
 .../js/nf/canvas/nf-remote-process-group.js   | 1098 ------
 .../webapp/js/nf/canvas/nf-reporting-task.js  |  827 -----
 .../main/webapp/js/nf/canvas/nf-selectable.js |   85 -
 .../main/webapp/js/nf/canvas/nf-settings.js   | 1312 -------
 .../main/webapp/js/nf/canvas/nf-snippet.js    |  175 -
 .../webapp/js/nf/cluster/nf-cluster-table.js  | 1365 --------
 .../main/webapp/js/nf/cluster/nf-cluster.js   |  227 --
 .../js/nf/counters/nf-counters-table.js       |  335 --
 .../main/webapp/js/nf/counters/nf-counters.js |  227 --
 .../webapp/js/nf/globalization/resources.js   | 1884 ----------
 .../js/nf/globalization/resources_jp.js       | 1522 --------
 .../webapp/js/nf/history/nf-history-model.js  |  239 --
 .../webapp/js/nf/history/nf-history-table.js  |  552 ---
 .../main/webapp/js/nf/history/nf-history.js   |  236 --
 .../src/main/webapp/js/nf/login/nf-login.js   |  241 --
 .../src/main/webapp/js/nf/nf-ajax-setup.js    |   57 -
 .../src/main/webapp/js/nf/nf-client.js        |   87 -
 .../main/webapp/js/nf/nf-cluster-summary.js   |   81 -
 .../src/main/webapp/js/nf/nf-common.js        | 1266 -------
 .../webapp/js/nf/nf-connection-details.js     |  553 ---
 .../src/main/webapp/js/nf/nf-dialog.js        |  178 -
 .../src/main/webapp/js/nf/nf-error-handler.js |  147 -
 .../src/main/webapp/js/nf/nf-namespace.js     |   20 -
 .../src/main/webapp/js/nf/nf-ng-app-config.js |  109 -
 .../main/webapp/js/nf/nf-ng-app-controller.js |   74 -
 .../src/main/webapp/js/nf/nf-ng-bridge.js     |   98 -
 .../src/main/webapp/js/nf/nf-ng-namespace.js  |   19 -
 .../webapp/js/nf/nf-ng-service-provider.js    |   62 -
 .../main/webapp/js/nf/nf-processor-details.js |  325 --
 .../src/main/webapp/js/nf/nf-shell.js         |  214 --
 .../main/webapp/js/nf/nf-status-history.js    | 1188 -------
 .../src/main/webapp/js/nf/nf-storage.js       |  195 --
 .../main/webapp/js/nf/nf-universal-capture.js |  146 -
 .../js/nf/provenance/nf-provenance-lineage.js | 1423 --------
 .../js/nf/provenance/nf-provenance-table.js   | 1514 --------
 .../webapp/js/nf/provenance/nf-provenance.js  |  362 --
 .../webapp/js/nf/summary/nf-cluster-search.js |  248 --
 .../webapp/js/nf/summary/nf-summary-table.js  | 3052 -----------------
 .../main/webapp/js/nf/summary/nf-summary.js   |  305 --
 .../js/nf/templates/nf-templates-table.js     |  465 ---
 .../webapp/js/nf/templates/nf-templates.js    |  226 --
 .../main/webapp/js/nf/users/nf-users-table.js | 1318 -------
 .../src/main/webapp/js/nf/users/nf-users.js   |  208 --
 127 files changed, 61102 deletions(-)
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/LICENSE
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/fold/foldgutter.css
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/hint/show-hint.css
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/json-lint.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.css
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror-compressed.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror.css
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.css
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js
 delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/menuArrow.png
 delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/menuArrowSmall.png
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.base64.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.center.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.count.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.each.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.ellipsis.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.tab.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.css
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.css
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.js
 delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/buttonNewProperty.png
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.css
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/bulletin-board/nf-bulletin-board.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js
 delete mode 100644 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
 delete mode 100644 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
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js
 delete mode 100644 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
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js
 delete mode 100644 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
 delete mode 100644 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
 delete mode 100644 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
 delete mode 100644 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
 delete mode 100644 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
 delete mode 100644 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
 delete mode 100644 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
 delete mode 100644 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
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js
 delete 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
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-clipboard.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-ng-canvas-namespace.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
 delete mode 100644 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
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
 delete mode 100644 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
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-selectable.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-snippet.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ajax-setup.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-client.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-cluster-summary.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-error-handler.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-namespace.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-namespace.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-service-provider.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-storage.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-universal-capture.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users.js

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/LICENSE b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/LICENSE
deleted file mode 100644
index d21bbea5a633..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/LICENSE
+++ /dev/null
@@ -1,19 +0,0 @@
-Copyright (C) 2014 by Marijn Haverbeke <marijnh@gmail.com> and others
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/fold/foldgutter.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/fold/foldgutter.css
deleted file mode 100644
index ad19ae2d3ee1..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/fold/foldgutter.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.CodeMirror-foldmarker {
-  color: blue;
-  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
-  font-family: arial;
-  line-height: .3;
-  cursor: pointer;
-}
-.CodeMirror-foldgutter {
-  width: .7em;
-}
-.CodeMirror-foldgutter-open,
-.CodeMirror-foldgutter-folded {
-  cursor: pointer;
-}
-.CodeMirror-foldgutter-open:after {
-  content: "\25BE";
-}
-.CodeMirror-foldgutter-folded:after {
-  content: "\25B8";
-}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/hint/show-hint.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/hint/show-hint.css
deleted file mode 100644
index 924e638f7f7b..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/hint/show-hint.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.CodeMirror-hints {
-  position: absolute;
-  z-index: 10;
-  overflow: hidden;
-  list-style: none;
-
-  margin: 0;
-  padding: 2px;
-
-  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-  border-radius: 3px;
-  border: 1px solid silver;
-
-  background: white;
-  font-size: 90%;
-  font-family: monospace;
-
-  max-height: 20em;
-  overflow-y: auto;
-}
-
-.CodeMirror-hint {
-  margin: 0;
-  padding: 0 4px;
-  border-radius: 2px;
-  max-width: 19em;
-  overflow: hidden;
-  white-space: pre;
-  color: black;
-  cursor: pointer;
-}
-
-li.CodeMirror-hint-active {
-  background: #08f;
-  color: white;
-}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/json-lint.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/json-lint.js
deleted file mode 100644
index 9dbb616b3b44..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/json-lint.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: http://codemirror.net/LICENSE
-
-// Depends on jsonlint.js from https://github.com/zaach/jsonlint
-
-// declare global: jsonlint
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-"use strict";
-
-CodeMirror.registerHelper("lint", "json", function(text) {
-  var found = [];
-  jsonlint.parseError = function(str, hash) {
-    var loc = hash.loc;
-    found.push({from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
-                to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
-                message: str});
-  };
-  try { jsonlint.parse(text); }
-  catch(e) {}
-  return found;
-});
-
-});
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.css
deleted file mode 100644
index 414a9a0e0666..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.css
+++ /dev/null
@@ -1,73 +0,0 @@
-/* The lint marker gutter */
-.CodeMirror-lint-markers {
-  width: 16px;
-}
-
-.CodeMirror-lint-tooltip {
-  background-color: infobackground;
-  border: 1px solid black;
-  border-radius: 4px 4px 4px 4px;
-  color: infotext;
-  font-family: monospace;
-  font-size: 10pt;
-  overflow: hidden;
-  padding: 2px 5px;
-  position: fixed;
-  white-space: pre;
-  white-space: pre-wrap;
-  z-index: 100;
-  max-width: 600px;
-  opacity: 0;
-  transition: opacity .4s;
-  -moz-transition: opacity .4s;
-  -webkit-transition: opacity .4s;
-  -o-transition: opacity .4s;
-  -ms-transition: opacity .4s;
-}
-
-.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning {
-  background-position: left bottom;
-  background-repeat: repeat-x;
-}
-
-.CodeMirror-lint-mark-error {
-  background-image:
-  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==")
-  ;
-}
-
-.CodeMirror-lint-mark-warning {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
-}
-
-.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning {
-  background-position: center center;
-  background-repeat: no-repeat;
-  cursor: pointer;
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  vertical-align: middle;
-  position: relative;
-}
-
-.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning {
-  padding-left: 18px;
-  background-position: top left;
-  background-repeat: no-repeat;
-}
-
-.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
-}
-
-.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
-}
-
-.CodeMirror-lint-marker-multiple {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
-  background-repeat: no-repeat;
-  background-position: right bottom;
-  width: 100%; height: 100%;
-}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.js
deleted file mode 100644
index e3a452766d31..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.js
+++ /dev/null
@@ -1,239 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: http://codemirror.net/LICENSE
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-  "use strict";
-  var GUTTER_ID = "CodeMirror-lint-markers";
-
-  function showTooltip(e, content) {
-    var tt = document.createElement("div");
-    tt.className = "CodeMirror-lint-tooltip";
-    tt.appendChild(content.cloneNode(true));
-    document.body.appendChild(tt);
-
-    function position(e) {
-      if (!tt.parentNode) return CodeMirror.off(document, "mousemove", position);
-      tt.style.top = Math.max(0, e.clientY - tt.offsetHeight - 5) + "px";
-      tt.style.left = (e.clientX + 5) + "px";
-    }
-    CodeMirror.on(document, "mousemove", position);
-    position(e);
-    if (tt.style.opacity != null) tt.style.opacity = 1;
-    return tt;
-  }
-  function rm(elt) {
-    if (elt.parentNode) elt.parentNode.removeChild(elt);
-  }
-  function hideTooltip(tt) {
-    if (!tt.parentNode) return;
-    if (tt.style.opacity == null) rm(tt);
-    tt.style.opacity = 0;
-    setTimeout(function() { rm(tt); }, 600);
-  }
-
-  function showTooltipFor(e, content, node) {
-    var tooltip = showTooltip(e, content);
-    function hide() {
-      CodeMirror.off(node, "mouseout", hide);
-      if (tooltip) { hideTooltip(tooltip); tooltip = null; }
-    }
-    var poll = setInterval(function() {
-      if (tooltip) for (var n = node;; n = n.parentNode) {
-        if (n && n.nodeType == 11) n = n.host;
-        if (n == document.body) return;
-        if (!n) { hide(); break; }
-      }
-      if (!tooltip) return clearInterval(poll);
-    }, 400);
-    CodeMirror.on(node, "mouseout", hide);
-  }
-
-  function LintState(cm, options, hasGutter) {
-    this.marked = [];
-    this.options = options;
-    this.timeout = null;
-    this.hasGutter = hasGutter;
-    this.onMouseOver = function(e) { onMouseOver(cm, e); };
-    this.waitingFor = 0
-  }
-
-  function parseOptions(_cm, options) {
-    if (options instanceof Function) return {getAnnotations: options};
-    if (!options || options === true) options = {};
-    return options;
-  }
-
-  function clearMarks(cm) {
-    var state = cm.state.lint;
-    if (state.hasGutter) cm.clearGutter(GUTTER_ID);
-    for (var i = 0; i < state.marked.length; ++i)
-      state.marked[i].clear();
-    state.marked.length = 0;
-  }
-
-  function makeMarker(labels, severity, multiple, tooltips) {
-    var marker = document.createElement("div"), inner = marker;
-    marker.className = "CodeMirror-lint-marker-" + severity;
-    if (multiple) {
-      inner = marker.appendChild(document.createElement("div"));
-      inner.className = "CodeMirror-lint-marker-multiple";
-    }
-
-    if (tooltips != false) CodeMirror.on(inner, "mouseover", function(e) {
-      showTooltipFor(e, labels, inner);
-    });
-
-    return marker;
-  }
-
-  function getMaxSeverity(a, b) {
-    if (a == "error") return a;
-    else return b;
-  }
-
-  function groupByLine(annotations) {
-    var lines = [];
-    for (var i = 0; i < annotations.length; ++i) {
-      var ann = annotations[i], line = ann.from.line;
-      (lines[line] || (lines[line] = [])).push(ann);
-    }
-    return lines;
-  }
-
-  function annotationTooltip(ann) {
-    var severity = ann.severity;
-    if (!severity) severity = "error";
-    var tip = document.createElement("div");
-    tip.className = "CodeMirror-lint-message-" + severity;
-    tip.appendChild(document.createTextNode(ann.message));
-    return tip;
-  }
-
-  function lintAsync(cm, getAnnotations, passOptions) {
-    var state = cm.state.lint
-    var id = ++state.waitingFor
-    function abort() {
-      id = -1
-      cm.off("change", abort)
-    }
-    cm.on("change", abort)
-    getAnnotations(cm.getValue(), function(annotations, arg2) {
-      cm.off("change", abort)
-      if (state.waitingFor != id) return
-      if (arg2 && annotations instanceof CodeMirror) annotations = arg2
-      updateLinting(cm, annotations)
-    }, passOptions, cm);
-  }
-
-  function startLinting(cm) {
-    var state = cm.state.lint, options = state.options;
-    var passOptions = options.options || options; // Support deprecated passing of `options` property in options
-    var getAnnotations = options.getAnnotations || cm.getHelper(CodeMirror.Pos(0, 0), "lint");
-    if (!getAnnotations) return;
-    if (options.async || getAnnotations.async) {
-      lintAsync(cm, getAnnotations, passOptions)
-    } else {
-      updateLinting(cm, getAnnotations(cm.getValue(), passOptions, cm));
-    }
-  }
-
-  function updateLinting(cm, annotationsNotSorted) {
-    clearMarks(cm);
-    var state = cm.state.lint, options = state.options;
-
-    var annotations = groupByLine(annotationsNotSorted);
-
-    for (var line = 0; line < annotations.length; ++line) {
-      var anns = annotations[line];
-      if (!anns) continue;
-
-      var maxSeverity = null;
-      var tipLabel = state.hasGutter && document.createDocumentFragment();
-
-      for (var i = 0; i < anns.length; ++i) {
-        var ann = anns[i];
-        var severity = ann.severity;
-        if (!severity) severity = "error";
-        maxSeverity = getMaxSeverity(maxSeverity, severity);
-
-        if (options.formatAnnotation) ann = options.formatAnnotation(ann);
-        if (state.hasGutter) tipLabel.appendChild(annotationTooltip(ann));
-
-        if (ann.to) state.marked.push(cm.markText(ann.from, ann.to, {
-          className: "CodeMirror-lint-mark-" + severity,
-          __annotation: ann
-        }));
-      }
-
-      if (state.hasGutter)
-        cm.setGutterMarker(line, GUTTER_ID, makeMarker(tipLabel, maxSeverity, anns.length > 1,
-                                                       state.options.tooltips));
-    }
-    if (options.onUpdateLinting) options.onUpdateLinting(annotationsNotSorted, annotations, cm);
-  }
-
-  function onChange(cm) {
-    var state = cm.state.lint;
-    if (!state) return;
-    clearTimeout(state.timeout);
-    state.timeout = setTimeout(function(){startLinting(cm);}, state.options.delay || 500);
-  }
-
-  function popupTooltips(annotations, e) {
-    var target = e.target || e.srcElement;
-    var tooltip = document.createDocumentFragment();
-    for (var i = 0; i < annotations.length; i++) {
-      var ann = annotations[i];
-      tooltip.appendChild(annotationTooltip(ann));
-    }
-    showTooltipFor(e, tooltip, target);
-  }
-
-  function onMouseOver(cm, e) {
-    var target = e.target || e.srcElement;
-    if (!/\bCodeMirror-lint-mark-/.test(target.className)) return;
-    var box = target.getBoundingClientRect(), x = (box.left + box.right) / 2, y = (box.top + box.bottom) / 2;
-    var spans = cm.findMarksAt(cm.coordsChar({left: x, top: y}, "client"));
-
-    var annotations = [];
-    for (var i = 0; i < spans.length; ++i) {
-      var ann = spans[i].__annotation;
-      if (ann) annotations.push(ann);
-    }
-    if (annotations.length) popupTooltips(annotations, e);
-  }
-
-  CodeMirror.defineOption("lint", false, function(cm, val, old) {
-    if (old && old != CodeMirror.Init) {
-      clearMarks(cm);
-      if (cm.state.lint.options.lintOnChange !== false)
-        cm.off("change", onChange);
-      CodeMirror.off(cm.getWrapperElement(), "mouseover", cm.state.lint.onMouseOver);
-      clearTimeout(cm.state.lint.timeout);
-      delete cm.state.lint;
-    }
-
-    if (val) {
-      var gutters = cm.getOption("gutters"), hasLintGutter = false;
-      for (var i = 0; i < gutters.length; ++i) if (gutters[i] == GUTTER_ID) hasLintGutter = true;
-      var state = cm.state.lint = new LintState(cm, parseOptions(cm, val), hasLintGutter);
-      if (state.options.lintOnChange !== false)
-        cm.on("change", onChange);
-      if (state.options.tooltips != false)
-        CodeMirror.on(cm.getWrapperElement(), "mouseover", state.onMouseOver);
-
-      startLinting(cm);
-    }
-  });
-
-  CodeMirror.defineExtension("performLint", function() {
-    if (this.state.lint) startLinting(this);
-  });
-});
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror-compressed.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror-compressed.js
deleted file mode 100644
index 262fea7a8513..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror-compressed.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* CodeMirror - Minified & Bundled
-   Generated on 2/22/2015 with http://codemirror.net/doc/compress.html
-   Version: 4.8
-
-   CodeMirror Library:
-   - codemirror.js
-   Modes:
-   - javascript.js
-   - xml.js
-   Add-ons:
-   - brace-fold.js
-   - comment-fold.js
-   - foldcode.js
-   - foldgutter.js
-   - markdown-fold.js
-   - matchbrackets.js
-   - show-hint.js
-   - xml-fold.js
- */
-
-!function(a){if("object"==typeof exports&&"object"==typeof module)module.exports=a();else{if("function"==typeof define&&define.amd)return define([],a);this.CodeMirror=a()}}(function(){"use strict";function w(a,b){if(!(this instanceof w))return new w(a,b);this.options=b=b?Qg(b):{},Qg(ie,b,!1),J(b);var c=b.value;"string"==typeof c&&(c=new Lf(c,b.mode)),this.doc=c;var f=this.display=new x(a,c);f.wrapper.CodeMirror=this,F(this),D(this),b.lineWrapping&&(this.display.wrapper.className+=" CodeMirror-wrap"),b.autofocus&&!o&&_c(this),this.state={keyMaps:[],overlays:[],modeGen:0,overwrite:!1,focused:!1,suppressEdits:!1,pasteIncoming:!1,cutIncoming:!1,draggingText:!1,highlight:new Gg,keySeq:null},d&&11>e&&setTimeout(Rg($c,this,!0),20),cd(this),ih(),Ac(this),this.curOp.forceUpdate=!0,Pf(this,c),b.autofocus&&!o||bh()==f.input?setTimeout(Rg(Hd,this),20):Id(this);for(var g in je)je.hasOwnProperty(g)&&je[g](this,b[g],le);P(this);for(var h=0;h<pe.length;++h)pe[h](this);Cc(this)}function x(a,b){var c=this,g=c.input=Yg("textarea",null,null,"position: absolute; padding: 0; width: 1px; height: 1em; outline: none");f?g.style.width="1000px":g.setAttribute("wrap","off"),n&&(g.style.border="1px solid black"),g.setAttribute("autocorrect","off"),g.setAttribute("autocapitalize","off"),g.setAttribute("spellcheck","false"),c.inputDiv=Yg("div",[g],null,"overflow: hidden; position: relative; width: 3px; height: 0px;"),c.scrollbarH=Yg("div",[Yg("div",null,null,"height: 100%; min-height: 1px")],"CodeMirror-hscrollbar"),c.scrollbarV=Yg("div",[Yg("div",null,null,"min-width: 1px")],"CodeMirror-vscrollbar"),c.scrollbarFiller=Yg("div",null,"CodeMirror-scrollbar-filler"),c.gutterFiller=Yg("div",null,"CodeMirror-gutter-filler"),c.lineDiv=Yg("div",null,"CodeMirror-code"),c.selectionDiv=Yg("div",null,null,"position: relative; z-index: 1"),c.cursorDiv=Yg("div",null,"CodeMirror-cursors"),c.measure=Yg("div",null,"CodeMirror-measure"),c.lineMeasure=Yg("div",null,"CodeMirror-measure"),c.lineSpace=Yg("div",[c.measure,c.lineMeasure,c.selectionDiv,c.cursorDiv,c.lineDiv],null,"position: relative; outline: none"),c.mover=Yg("div",[Yg("div",[c.lineSpace],"CodeMirror-lines")],null,"position: relative"),c.sizer=Yg("div",[c.mover],"CodeMirror-sizer"),c.heightForcer=Yg("div",null,null,"position: absolute; height: "+Bg+"px; width: 1px;"),c.gutters=Yg("div",null,"CodeMirror-gutters"),c.lineGutter=null,c.scroller=Yg("div",[c.sizer,c.heightForcer,c.gutters],"CodeMirror-scroll"),c.scroller.setAttribute("tabIndex","-1"),c.wrapper=Yg("div",[c.inputDiv,c.scrollbarH,c.scrollbarV,c.scrollbarFiller,c.gutterFiller,c.scroller],"CodeMirror"),d&&8>e&&(c.gutters.style.zIndex=-1,c.scroller.style.paddingRight=0),n&&(g.style.width="0px"),f||(c.scroller.draggable=!0),k&&(c.inputDiv.style.height="1px",c.inputDiv.style.position="absolute"),d&&8>e&&(c.scrollbarH.style.minHeight=c.scrollbarV.style.minWidth="18px"),a&&(a.appendChild?a.appendChild(c.wrapper):a(c.wrapper)),c.viewFrom=c.viewTo=b.first,c.view=[],c.externalMeasured=null,c.viewOffset=0,c.lastWrapHeight=c.lastWrapWidth=0,c.updateLineNumbers=null,c.lineNumWidth=c.lineNumInnerWidth=c.lineNumChars=null,c.prevInput="",c.alignWidgets=!1,c.pollingFast=!1,c.poll=new Gg,c.cachedCharWidth=c.cachedTextHeight=c.cachedPaddingH=null,c.inaccurateSelection=!1,c.maxLine=null,c.maxLineLength=0,c.maxLineChanged=!1,c.wheelDX=c.wheelDY=c.wheelStartX=c.wheelStartY=null,c.shift=!1,c.selForContextMenu=null}function y(a){a.doc.mode=w.getMode(a.options,a.doc.modeOption),z(a)}function z(a){a.doc.iter(function(a){a.stateAfter&&(a.stateAfter=null),a.styles&&(a.styles=null)}),a.doc.frontier=a.doc.first,Tb(a,100),a.state.modeGen++,a.curOp&&Pc(a)}function A(a){a.options.lineWrapping?(eh(a.display.wrapper,"CodeMirror-wrap"),a.display.sizer.style.minWidth=""):(dh(a.display.wrapper,"CodeMirror-wrap"),I(a)),C(a),Pc(a),kc(a),setTimeout(function(){M(a)},100)}function B(a){var b=wc(a.display),c=a.options.lineWrapping,d=c&&Math.max(5,a.display.scroller.clientWidth/xc(a.display)-3);return function(e){if(ef(a.doc,e))return 0;var f=0;if(e.widgets)for(var g=0;g<e.widgets.length;g++)e.widgets[g].height&&(f+=e.widgets[g].height);return c?f+(Math.ceil(e.text.length/d)||1)*b:f+b}}function C(a){var b=a.doc,c=B(a);b.iter(function(a){var b=c(a);b!=a.height&&Tf(a,b)})}function D(a){a.display.wrapper.className=a.display.wrapper.className.replace(/\s*cm-s-\S+/g,"")+a.options.theme.replace(/(^|\s)\s*/g," cm-s-"),kc(a)}function E(a){F(a),Pc(a),setTimeout(function(){O(a)},20)}function F(a){var b=a.display.gutters,c=a.options.gutters;$g(b);for(var d=0;d<c.length;++d){var e=c[d],f=b.appendChild(Yg("div",null,"CodeMirror-gutter "+e));"CodeMirror-linenumbers"==e&&(a.display.lineGutter=f,f.style.width=(a.display.lineNumWidth||1)+"px")}b.style.display=d?"":"none",G(a)}function G(a){var b=a.display.gutters.offsetWidth;a.display.sizer.style.marginLeft=b+"px",a.display.scrollbarH.style.left=a.options.fixedGutter?b+"px":0}function H(a){if(0==a.height)return 0;for(var c,b=a.text.length,d=a;c=Ze(d);){var e=c.find(0,!0);d=e.from.line,b+=e.from.ch-e.to.ch}for(d=a;c=$e(d);){var e=c.find(0,!0);b-=d.text.length-e.from.ch,d=e.to.line,b+=d.text.length-e.to.ch}return b}function I(a){var b=a.display,c=a.doc;b.maxLine=Qf(c,c.first),b.maxLineLength=H(b.maxLine),b.maxLineChanged=!0,c.iter(function(a){var c=H(a);c>b.maxLineLength&&(b.maxLineLength=c,b.maxLine=a)})}function J(a){var b=Ng(a.gutters,"CodeMirror-linenumbers");-1==b&&a.lineNumbers?a.gutters=a.gutters.concat(["CodeMirror-linenumbers"]):b>-1&&!a.lineNumbers&&(a.gutters=a.gutters.slice(0),a.gutters.splice(b,1))}function K(a){return a.display.scroller.clientHeight-a.display.wrapper.clientHeight<Bg-3}function L(a){var b=a.display.scroller;return{clientHeight:b.clientHeight,barHeight:a.display.scrollbarV.clientHeight,scrollWidth:b.scrollWidth,clientWidth:b.clientWidth,hScrollbarTakesSpace:K(a),barWidth:a.display.scrollbarH.clientWidth,docHeight:Math.round(a.doc.height+Yb(a.display))}}function M(a,b){b||(b=L(a));var c=a.display,d=mh(c.measure),e=b.docHeight+Bg,f=b.scrollWidth>b.clientWidth;f&&b.scrollWidth<=b.clientWidth+1&&d>0&&!b.hScrollbarTakesSpace&&(f=!1);var g=e>b.clientHeight;if(g?(c.scrollbarV.style.display="block",c.scrollbarV.style.bottom=f?d+"px":"0",c.scrollbarV.firstChild.style.height=Math.max(0,e-b.clientHeight+(b.barHeight||c.scrollbarV.clientHeight))+"px"):(c.scrollbarV.style.display="",c.scrollbarV.firstChild.style.height="0"),f?(c.scrollbarH.style.display="block",c.scrollbarH.style.right=g?d+"px":"0",c.scrollbarH.firstChild.style.width=b.scrollWidth-b.clientWidth+(b.barWidth||c.scrollbarH.clientWidth)+"px"):(c.scrollbarH.style.display="",c.scrollbarH.firstChild.style.width="0"),f&&g?(c.scrollbarFiller.style.display="block",c.scrollbarFiller.style.height=c.scrollbarFiller.style.width=d+"px"):c.scrollbarFiller.style.display="",f&&a.options.coverGutterNextToScrollbar&&a.options.fixedGutter?(c.gutterFiller.style.display="block",c.gutterFiller.style.height=d+"px",c.gutterFiller.style.width=c.gutters.offsetWidth+"px"):c.gutterFiller.style.display="",!a.state.checkedOverlayScrollbar&&b.clientHeight>0){if(0===d){var h=p&&!l?"12px":"18px";c.scrollbarV.style.minWidth=c.scrollbarH.style.minHeight=h;var i=function(b){pg(b)!=c.scrollbarV&&pg(b)!=c.scrollbarH&&Kc(a,gd)(b)};rg(c.scrollbarV,"mousedown",i),rg(c.scrollbarH,"mousedown",i)}a.state.checkedOverlayScrollbar=!0}}function N(a,b,c){var d=c&&null!=c.top?Math.max(0,c.top):a.scroller.scrollTop;d=Math.floor(d-Xb(a));var e=c&&null!=c.bottom?c.bottom:d+a.wrapper.clientHeight,f=Vf(b,d),g=Vf(b,e);if(c&&c.ensure){var h=c.ensure.from.line,i=c.ensure.to.line;if(f>h)return{from:h,to:Vf(b,Wf(Qf(b,h))+a.wrapper.clientHeight)};if(Math.min(i,b.lastLine())>=g)return{from:Vf(b,Wf(Qf(b,i))-a.wrapper.clientHeight),to:i}}return{from:f,to:Math.max(g,f+1)}}function O(a){var b=a.display,c=b.view;if(b.alignWidgets||b.gutters.firstChild&&a.options.fixedGutter){for(var d=R(b)-b.scroller.scrollLeft+a.doc.scrollLeft,e=b.gutters.offsetWidth,f=d+"px",g=0;g<c.length;g++)if(!c[g].hidden){a.options.fixedGutter&&c[g].gutter&&(c[g].gutter.style.left=f);var h=c[g].alignable;if(h)for(var i=0;i<h.length;i++)h[i].style.left=f}a.options.fixedGutter&&(b.gutters.style.left=d+e+"px")}}function P(a){if(!a.options.lineNumbers)return!1;var b=a.doc,c=Q(a.options,b.first+b.size-1),d=a.display;if(c.length!=d.lineNumChars){var e=d.measure.appendChild(Yg("div",[Yg("div",c)],"CodeMirror-linenumber CodeMirror-gutter-elt")),f=e.firstChild.offsetWidth,g=e.offsetWidth-f;return d.lineGutter.style.width="",d.lineNumInnerWidth=Math.max(f,d.lineGutter.offsetWidth-g),d.lineNumWidth=d.lineNumInnerWidth+g,d.lineNumChars=d.lineNumInnerWidth?c.length:-1,d.lineGutter.style.width=d.lineNumWidth+"px",G(a),!0}return!1}function Q(a,b){return String(a.lineNumberFormatter(b+a.firstLineNumber))}function R(a){return a.scroller.getBoundingClientRect().left-a.sizer.getBoundingClientRect().left}function S(a,b,c){var d=a.display;this.viewport=b,this.visible=N(d,a.doc,b),this.editorIsHidden=!d.wrapper.offsetWidth,this.wrapperHeight=d.wrapper.clientHeight,this.wrapperWidth=d.wrapper.clientWidth,this.oldViewFrom=d.viewFrom,this.oldViewTo=d.viewTo,this.oldScrollerWidth=d.scroller.clientWidth,this.force=c,this.dims=$(a)}function T(a,b){var c=a.display,d=a.doc;if(b.editorIsHidden)return Rc(a),!1;if(!b.force&&b.visible.from>=c.viewFrom&&b.visible.to<=c.viewTo&&(null==c.updateLineNumbers||c.updateLineNumbers>=c.viewTo)&&0==Vc(a))return!1;P(a)&&(Rc(a),b.dims=$(a));var e=d.first+d.size,f=Math.max(b.visible.from-a.options.viewportMargin,d.first),g=Math.min(e,b.visible.to+a.options.viewportMargin);c.viewFrom<f&&f-c.viewFrom<20&&(f=Math.max(d.first,c.viewFrom)),c.viewTo>g&&c.viewTo-g<20&&(g=Math.min(e,c.viewTo)),v&&(f=cf(a.doc,f),g=df(a.doc,g));var h=f!=c.viewFrom||g!=c.viewTo||c.lastWrapHeight!=b.wrapperHeight||c.lastWrapWidth!=b.wrapperWidth;Uc(a,f,g),c.viewOffset=Wf(Qf(a.doc,c.viewFrom)),a.display.mover.style.top=c.viewOffset+"px";var i=Vc(a);if(!h&&0==i&&!b.force&&(null==c.updateLineNumbers||c.updateLineNumbers>=c.viewTo))return!1;var j=bh();return i>4&&(c.lineDiv.style.display="none"),_(a,c.updateLineNumbers,b.dims),i>4&&(c.lineDiv.style.display=""),j&&bh()!=j&&j.offsetHeight&&j.focus(),$g(c.cursorDiv),$g(c.selectionDiv),h&&(c.lastWrapHeight=b.wrapperHeight,c.lastWrapWidth=b.wrapperWidth,Tb(a,400)),c.updateLineNumbers=null,!0}function U(a,b){for(var c=b.force,d=b.viewport,e=!0;;e=!1){if(e&&a.options.lineWrapping&&b.oldScrollerWidth!=a.display.scroller.clientWidth)c=!0;else if(c=!1,d&&null!=d.top&&(d={top:Math.min(a.doc.height+Yb(a.display)-Bg-a.display.scroller.clientHeight,d.top)}),b.visible=N(a.display,a.doc,d),b.visible.from>=a.display.viewFrom&&b.visible.to<=a.display.viewTo)break;if(!T(a,b))break;Y(a);var f=L(a);Pb(a),W(a,f),M(a,f)}vg(a,"update",a),(a.display.viewFrom!=b.oldViewFrom||a.display.viewTo!=b.oldViewTo)&&vg(a,"viewportChange",a,a.display.viewFrom,a.display.viewTo)}function V(a,b){var c=new S(a,b);if(T(a,c)){Y(a),U(a,c);var d=L(a);Pb(a),W(a,d),M(a,d)}}function W(a,b){a.display.sizer.style.minHeight=a.display.heightForcer.style.top=b.docHeight+"px",a.display.gutters.style.height=Math.max(b.docHeight,b.clientHeight-Bg)+"px"}function X(a,b){a.display.sizer.offsetWidth+a.display.gutters.offsetWidth<a.display.scroller.clientWidth-1&&(a.display.sizer.style.minHeight=a.display.heightForcer.style.top="0px",a.display.gutters.style.height=b.docHeight+"px")}function Y(a){for(var b=a.display,c=b.lineDiv.offsetTop,f=0;f<b.view.length;f++){var h,g=b.view[f];if(!g.hidden){if(d&&8>e){var i=g.node.offsetTop+g.node.offsetHeight;h=i-c,c=i}else{var j=g.node.getBoundingClientRect();h=j.bottom-j.top}var k=g.line.height-h;if(2>h&&(h=wc(b)),(k>.001||-.001>k)&&(Tf(g.line,h),Z(g.line),g.rest))for(var l=0;l<g.rest.length;l++)Z(g.rest[l])}}}function Z(a){if(a.widgets)for(var b=0;b<a.widgets.length;++b)a.widgets[b].height=a.widgets[b].node.offsetHeight}function $(a){for(var b=a.display,c={},d={},e=b.gutters.clientLeft,f=b.gutters.firstChild,g=0;f;f=f.nextSibling,++g)c[a.options.gutters[g]]=f.offsetLeft+f.clientLeft+e,d[a.options.gutters[g]]=f.clientWidth;return{fixedPos:R(b),gutterTotalWidth:b.gutters.offsetWidth,gutterLeft:c,gutterWidth:d,wrapperWidth:b.wrapper.clientWidth}}function _(a,b,c){function i(b){var c=b.nextSibling;return f&&p&&a.display.currentWheelTarget==b?b.style.display="none":b.parentNode.removeChild(b),c}for(var d=a.display,e=a.options.lineNumbers,g=d.lineDiv,h=g.firstChild,j=d.view,k=d.viewFrom,l=0;l<j.length;l++){var m=j[l];if(m.hidden);else if(m.node){for(;h!=m.node;)h=i(h);var o=e&&null!=b&&k>=b&&m.lineNumber;m.changes&&(Ng(m.changes,"gutter")>-1&&(o=!1),ab(a,m,k,c)),o&&($g(m.lineNumber),m.lineNumber.appendChild(document.createTextNode(Q(a.options,k)))),h=m.node.nextSibling}else{var n=ib(a,m,k,c);g.insertBefore(n,h)}k+=m.size}for(;h;)h=i(h)}function ab(a,b,c,d){for(var e=0;e<b.changes.length;e++){var f=b.changes[e];"text"==f?eb(a,b):"gutter"==f?gb(a,b,c,d):"class"==f?fb(b):"widget"==f&&hb(b,d)}b.changes=null}function bb(a){return a.node==a.text&&(a.node=Yg("div",null,null,"position: relative"),a.text.parentNode&&a.text.parentNode.replaceChild(a.node,a.text),a.node.appendChild(a.text),d&&8>e&&(a.node.style.zIndex=2)),a.node}function cb(a){var b=a.bgClass?a.bgClass+" "+(a.line.bgClass||""):a.line.bgClass;if(b&&(b+=" CodeMirror-linebackground"),a.background)b?a.background.className=b:(a.background.parentNode.removeChild(a.background),a.background=null);else if(b){var c=bb(a);a.background=c.insertBefore(Yg("div",null,b),c.firstChild)}}function db(a,b){var c=a.display.externalMeasured;return c&&c.line==b.line?(a.display.externalMeasured=null,b.measure=c.measure,c.built):zf(a,b)}function eb(a,b){var c=b.text.className,d=db(a,b);b.text==b.node&&(b.node=d.pre),b.text.parentNode.replaceChild(d.pre,b.text),b.text=d.pre,d.bgClass!=b.bgClass||d.textClass!=b.textClass?(b.bgClass=d.bgClass,b.textClass=d.textClass,fb(b)):c&&(b.text.className=c)}function fb(a){cb(a),a.line.wrapClass?bb(a).className=a.line.wrapClass:a.node!=a.text&&(a.node.className="");var b=a.textClass?a.textClass+" "+(a.line.textClass||""):a.line.textClass;a.text.className=b||""}function gb(a,b,c,d){b.gutter&&(b.node.removeChild(b.gutter),b.gutter=null);var e=b.line.gutterMarkers;if(a.options.lineNumbers||e){var f=bb(b),g=b.gutter=f.insertBefore(Yg("div",null,"CodeMirror-gutter-wrapper","left: "+(a.options.fixedGutter?d.fixedPos:-d.gutterTotalWidth)+"px; width: "+d.gutterTotalWidth+"px"),b.text);if(b.line.gutterClass&&(g.className+=" "+b.line.gutterClass),!a.options.lineNumbers||e&&e["CodeMirror-linenumbers"]||(b.lineNumber=g.appendChild(Yg("div",Q(a.options,c),"CodeMirror-linenumber CodeMirror-gutter-elt","left: "+d.gutterLeft["CodeMirror-linenumbers"]+"px; width: "+a.display.lineNumInnerWidth+"px"))),e)for(var h=0;h<a.options.gutters.length;++h){var i=a.options.gutters[h],j=e.hasOwnProperty(i)&&e[i];j&&g.appendChild(Yg("div",[j],"CodeMirror-gutter-elt","left: "+d.gutterLeft[i]+"px; width: "+d.gutterWidth[i]+"px"))}}}function hb(a,b){a.alignable&&(a.alignable=null);for(var d,c=a.node.firstChild;c;c=d){var d=c.nextSibling;"CodeMirror-linewidget"==c.className&&a.node.removeChild(c)}jb(a,b)}function ib(a,b,c,d){var e=db(a,b);return b.text=b.node=e.pre,e.bgClass&&(b.bgClass=e.bgClass),e.textClass&&(b.textClass=e.textClass),fb(b),gb(a,b,c,d),jb(b,d),b.node}function jb(a,b){if(kb(a.line,a,b,!0),a.rest)for(var c=0;c<a.rest.length;c++)kb(a.rest[c],a,b,!1)}function kb(a,b,c,d){if(a.widgets)for(var e=bb(b),f=0,g=a.widgets;f<g.length;++f){var h=g[f],i=Yg("div",[h.node],"CodeMirror-linewidget");h.handleMouseEvents||(i.ignoreEvents=!0),lb(h,i,b,c),d&&h.above?e.insertBefore(i,b.gutter||b.text):e.appendChild(i),vg(h,"redraw")}}function lb(a,b,c,d){if(a.noHScroll){(c.alignable||(c.alignable=[])).push(b);var e=d.wrapperWidth;b.style.left=d.fixedPos+"px",a.coverGutter||(e-=d.gutterTotalWidth,b.style.paddingLeft=d.gutterTotalWidth+"px"),b.style.width=e+"px"}a.coverGutter&&(b.style.zIndex=5,b.style.position="relative",a.noHScroll||(b.style.marginLeft=-d.gutterTotalWidth+"px"))}function ob(a){return mb(a.line,a.ch)}function pb(a,b){return nb(a,b)<0?b:a}function qb(a,b){return nb(a,b)<0?a:b}function rb(a,b){this.ranges=a,this.primIndex=b}function sb(a,b){this.anchor=a,this.head=b}function tb(a,b){var c=a[b];a.sort(function(a,b){return nb(a.from(),b.from())}),b=Ng(a,c);for(var d=1;d<a.length;d++){var e=a[d],f=a[d-1];if(nb(f.to(),e.from())>=0){var g=qb(f.from(),e.from()),h=pb(f.to(),e.to()),i=f.empty()?e.from()==e.head:f.from()==f.head;b>=d&&--b,a.splice(--d,2,new sb(i?h:g,i?g:h))}}return new rb(a,b)}function ub(a,b){return new rb([new sb(a,b||a)],0)}function vb(a,b){return Math.max(a.first,Math.min(b,a.first+a.size-1))}function wb(a,b){if(b.line<a.first)return mb(a.first,0);var c=a.first+a.size-1;return b.line>c?mb(c,Qf(a,c).text.length):xb(b,Qf(a,b.line).text.length)}function xb(a,b){var c=a.ch;return null==c||c>b?mb(a.line,b):0>c?mb(a.line,0):a}function yb(a,b){return b>=a.first&&b<a.first+a.size}function zb(a,b){for(var c=[],d=0;d<b.length;d++)c[d]=wb(a,b[d]);return c}function Ab(a,b,c,d){if(a.cm&&a.cm.display.shift||a.extend){var e=b.anchor;if(d){var f=nb(c,e)<0;f!=nb(d,e)<0?(e=c,c=d):f!=nb(c,d)<0&&(c=d)}return new sb(e,c)}return new sb(d||c,c)}function Bb(a,b,c,d){Hb(a,new rb([Ab(a,a.sel.primary(),b,c)],0),d)}function Cb(a,b,c){for(var d=[],e=0;e<a.sel.ranges.length;e++)d[e]=Ab(a,a.sel.ranges[e],b[e],null);var f=tb(d,a.sel.primIndex);Hb(a,f,c)}function Db(a,b,c,d){var e=a.sel.ranges.slice(0);e[b]=c,Hb(a,tb(e,a.sel.primIndex),d)}function Eb(a,b,c,d){Hb(a,ub(b,c),d)}function Fb(a,b){var c={ranges:b.ranges,update:function(b){this.ranges=[];for(var c=0;c<b.length;c++)this.ranges[c]=new sb(wb(a,b[c].anchor),wb(a,b[c].head))}};return tg(a,"beforeSelectionChange",a,c),a.cm&&tg(a.cm,"beforeSelectionChange",a.cm,c),c.ranges!=b.ranges?tb(c.ranges,c.ranges.length-1):b}function Gb(a,b,c){var d=a.history.done,e=Lg(d);e&&e.ranges?(d[d.length-1]=b,Ib(a,b,c)):Hb(a,b,c)}function Hb(a,b,c){Ib(a,b,c),cg(a,a.sel,a.cm?a.cm.curOp.id:0/0,c)}function Ib(a,b,c){(zg(a,"beforeSelectionChange")||a.cm&&zg(a.cm,"beforeSelectionChange"))&&(b=Fb(a,b));var d=c&&c.bias||(nb(b.primary().head,a.sel.primary().head)<0?-1:1);Jb(a,Lb(a,b,d,!0)),c&&c.scroll===!1||!a.cm||be(a.cm)}function Jb(a,b){b.equals(a.sel)||(a.sel=b,a.cm&&(a.cm.curOp.updateInput=a.cm.curOp.selectionChanged=!0,yg(a.cm)),vg(a,"cursorActivity",a))}function Kb(a){Jb(a,Lb(a,a.sel,null,!1),Dg)}function Lb(a,b,c,d){for(var e,f=0;f<b.ranges.length;f++){var g=b.ranges[f],h=Mb(a,g.anchor,c,d),i=Mb(a,g.head,c,d);(e||h!=g.anchor||i!=g.head)&&(e||(e=b.ranges.slice(0,f)),e[f]=new sb(h,i))}return e?tb(e,b.primIndex):b}function Mb(a,b,c,d){var e=!1,f=b,g=c||1;a.cantEdit=!1;a:for(;;){var h=Qf(a,f.line);if(h.markedSpans)for(var i=0;i<h.markedSpans.length;++i){var j=h.markedSpans[i],k=j.marker;if((null==j.from||(k.inclusiveLeft?j.from<=f.ch:j.from<f.ch))&&(null==j.to||(k.inclusiveRight?j.to>=f.ch:j.to>f.ch))){if(d&&(tg(k,"beforeCursorEnter"),k.explicitlyCleared)){if(h.markedSpans){--i;continue}break}if(!k.atomic)continue;var l=k.find(0>g?-1:1);if(0==nb(l,f)&&(l.ch+=g,l.ch<0?l=l.line>a.first?wb(a,mb(l.line-1)):null:l.ch>h.text.length&&(l=l.line<a.first+a.size-1?mb(l.line+1,0):null),!l)){if(e)return d?(a.cantEdit=!0,mb(a.first,0)):Mb(a,b,c,!0);e=!0,l=b,g=-g}f=l;continue a}}return f}}function Nb(a){for(var b=a.display,c=a.doc,d={},e=d.cursors=document.createDocumentFragment(),f=d.selection=document.createDocumentFragment(),g=0;g<c.sel.ranges.length;g++){var h=c.sel.ranges[g],i=h.empty();(i||a.options.showCursorWhenSelecting)&&Qb(a,h,e),i||Rb(a,h,f)}if(a.options.moveInputWithCursor){var j=qc(a,c.sel.primary().head,"div"),k=b.wrapper.getBoundingClientRect(),l=b.lineDiv.getBoundingClientRect();d.teTop=Math.max(0,Math.min(b.wrapper.clientHeight-10,j.top+l.top-k.top)),d.teLeft=Math.max(0,Math.min(b.wrapper.clientWidth-10,j.left+l.left-k.left))}return d}function Ob(a,b){_g(a.display.cursorDiv,b.cursors),_g(a.display.selectionDiv,b.selection),null!=b.teTop&&(a.display.inputDiv.style.top=b.teTop+"px",a.display.inputDiv.style.left=b.teLeft+"px")}function Pb(a){Ob(a,Nb(a))}function Qb(a,b,c){var d=qc(a,b.head,"div",null,null,!a.options.singleCursorHeightPerLine),e=c.appendChild(Yg("div","\xa0","CodeMirror-cursor"));if(e.style.left=d.left+"px",e.style.top=d.top+"px",e.style.height=Math.max(0,d.bottom-d.top)*a.options.cursorHeight+"px",d.other){var f=c.appendChild(Yg("div","\xa0","CodeMirror-cursor CodeMirror-secondarycursor"));f.style.display="",f.style.left=d.other.left+"px",f.style.top=d.other.top+"px",f.style.height=.85*(d.other.bottom-d.other.top)+"px"}}function Rb(a,b,c){function j(a,b,c,d){0>b&&(b=0),b=Math.round(b),d=Math.round(d),f.appendChild(Yg("div",null,"CodeMirror-selected","position: absolute; left: "+a+"px; top: "+b+"px; width: "+(null==c?i-a:c)+"px; height: "+(d-b)+"px"))}function k(b,c,d){function m(c,d){return pc(a,mb(b,c),"div",f,d)}var k,l,f=Qf(e,b),g=f.text.length;return xh(Xf(f),c||0,null==d?g:d,function(a,b,e){var n,o,p,f=m(a,"left");if(a==b)n=f,o=p=f.left;else{if(n=m(b-1,"right"),"rtl"==e){var q=f;f=n,n=q}o=f.left,p=n.right}null==c&&0==a&&(o=h),n.top-f.top>3&&(j(o,f.top,null,f.bottom),o=h,f.bottom<n.top&&j(o,f.bottom,null,n.top)),null==d&&b==g&&(p=i),(!k||f.top<k.top||f.top==k.top&&f.left<k.left)&&(k=f),(!l||n.bottom>l.bottom||n.bottom==l.bottom&&n.right>l.right)&&(l=n),h+1>o&&(o=h),j(o,n.top,p-o,n.bottom)}),{start:k,end:l}}var d=a.display,e=a.doc,f=document.createDocumentFragment(),g=Zb(a.display),h=g.left,i=d.lineSpace.offsetWidth-g.right,l=b.from(),m=b.to();if(l.line==m.line)k(l.line,l.ch,m.ch);else{var n=Qf(e,l.line),o=Qf(e,m.line),p=af(n)==af(o),q=k(l.line,l.ch,p?n.text.length+1:null).end,r=k(m.line,p?0:null,m.ch).start;p&&(q.top<r.top-2?(j(q.right,q.top,null,q.bottom),j(h,r.top,r.left,r.bottom)):j(q.right,q.top,r.left-q.right,q.bottom)),q.bottom<r.top&&j(h,q.bottom,null,r.top)}c.appendChild(f)}function Sb(a){if(a.state.focused){var b=a.display;clearInterval(b.blinker);var c=!0;b.cursorDiv.style.visibility="",a.options.cursorBlinkRate>0?b.blinker=setInterval(function(){b.cursorDiv.style.visibility=(c=!c)?"":"hidden"},a.options.cursorBlinkRate):a.options.cursorBlinkRate<0&&(b.cursorDiv.style.visibility="hidden")}}function Tb(a,b){a.doc.mode.startState&&a.doc.frontier<a.display.viewTo&&a.state.highlight.set(b,Rg(Ub,a))}function Ub(a){var b=a.doc;if(b.frontier<b.first&&(b.frontier=b.first),!(b.frontier>=a.display.viewTo)){var c=+new Date+a.options.workTime,d=re(b.mode,Wb(a,b.frontier)),e=[];b.iter(b.frontier,Math.min(b.first+b.size,a.display.viewTo+500),function(f){if(b.frontier>=a.display.viewFrom){var g=f.styles,h=tf(a,f,d,!0);f.styles=h.styles;var i=f.styleClasses,j=h.classes;j?f.styleClasses=j:i&&(f.styleClasses=null);for(var k=!g||g.length!=f.styles.length||i!=j&&(!i||!j||i.bgClass!=j.bgClass||i.textClass!=j.textClass),l=0;!k&&l<g.length;++l)k=g[l]!=f.styles[l];k&&e.push(b.frontier),f.stateAfter=re(b.mode,d)}else vf(a,f.text,d),f.stateAfter=0==b.frontier%5?re(b.mode,d):null;return++b.frontier,+new Date>c?(Tb(a,a.options.workDelay),!0):void 0}),e.length&&Jc(a,function(){for(var b=0;b<e.length;b++)Qc(a,e[b],"text")})}}function Vb(a,b,c){for(var d,e,f=a.doc,g=c?-1:b-(a.doc.mode.innerMode?1e3:100),h=b;h>g;--h){if(h<=f.first)return f.first;var i=Qf(f,h-1);if(i.stateAfter&&(!c||h<=f.frontier))return h;var j=Hg(i.text,null,a.options.tabSize);(null==e||d>j)&&(e=h-1,d=j)}return e}function Wb(a,b,c){var d=a.doc,e=a.display;if(!d.mode.startState)return!0;var f=Vb(a,b,c),g=f>d.first&&Qf(d,f-1).stateAfter;return g=g?re(d.mode,g):se(d.mode),d.iter(f,b,function(c){vf(a,c.text,g);var h=f==b-1||0==f%5||f>=e.viewFrom&&f<e.viewTo;c.stateAfter=h?re(d.mode,g):null,++f}),c&&(d.frontier=f),g}function Xb(a){return a.lineSpace.offsetTop}function Yb(a){return a.mover.offsetHeight-a.lineSpace.offsetHeight}function Zb(a){if(a.cachedPaddingH)return a.cachedPaddingH;var b=_g(a.measure,Yg("pre","x")),c=window.getComputedStyle?window.getComputedStyle(b):b.currentStyle,d={left:parseInt(c.paddingLeft),right:parseInt(c.paddingRight)};return isNaN(d.left)||isNaN(d.right)||(a.cachedPaddingH=d),d}function $b(a,b,c){var d=a.options.lineWrapping,e=d&&a.display.scroller.clientWidth;if(!b.measure.heights||d&&b.measure.width!=e){var f=b.measure.heights=[];if(d){b.measure.width=e;for(var g=b.text.firstChild.getClientRects(),h=0;h<g.length-1;h++){var i=g[h],j=g[h+1];Math.abs(i.bottom-j.bottom)>2&&f.push((i.bottom+j.top)/2-c.top)}}f.push(c.bottom-c.top)}}function _b(a,b,c){if(a.line==b)return{map:a.measure.map,cache:a.measure.cache};for(var d=0;d<a.rest.length;d++)if(a.rest[d]==b)return{map:a.measure.maps[d],cache:a.measure.caches[d]};for(var d=0;d<a.rest.length;d++)if(Uf(a.rest[d])>c)return{map:a.measure.maps[d],cache:a.measure.caches[d],before:!0}}function ac(a,b){b=af(b);var c=Uf(b),d=a.display.externalMeasured=new Nc(a.doc,b,c);d.lineN=c;var e=d.built=zf(a,d);return d.text=e.pre,_g(a.display.lineMeasure,e.pre),d}function bc(a,b,c,d){return ec(a,dc(a,b),c,d)}function cc(a,b){if(b>=a.display.viewFrom&&b<a.display.viewTo)return a.display.view[Sc(a,b)];var c=a.display.externalMeasured;return c&&b>=c.lineN&&b<c.lineN+c.size?c:void 0}function dc(a,b){var c=Uf(b),d=cc(a,c);d&&!d.text?d=null:d&&d.changes&&ab(a,d,c,$(a)),d||(d=ac(a,b));var e=_b(d,b,c);return{line:b,view:d,rect:null,map:e.map,cache:e.cache,before:e.before,hasHeights:!1}}function ec(a,b,c,d,e){b.before&&(c=-1);var g,f=c+(d||"");return b.cache.hasOwnProperty(f)?g=b.cache[f]:(b.rect||(b.rect=b.view.text.getBoundingClientRect()),b.hasHeights||($b(a,b.view,b.rect),b.hasHeights=!0),g=gc(a,b,c,d),g.bogus||(b.cache[f]=g)),{left:g.left,right:g.right,top:e?g.rtop:g.top,bottom:e?g.rbottom:g.bottom}}function gc(a,b,c,f){for(var h,i,j,k,g=b.map,l=0;l<g.length;l+=3){var m=g[l],n=g[l+1];if(m>c?(i=0,j=1,k="left"):n>c?(i=c-m,j=i+1):(l==g.length-3||c==n&&g[l+3]>c)&&(j=n-m,i=j-1,c>=n&&(k="right")),null!=i){if(h=g[l+2],m==n&&f==(h.insertLeft?"left":"right")&&(k=f),"left"==f&&0==i)for(;l&&g[l-2]==g[l-3]&&g[l-1].insertLeft;)h=g[(l-=3)+2],k="left";if("right"==f&&i==n-m)for(;l<g.length-3&&g[l+3]==g[l+4]&&!g[l+5].insertLeft;)h=g[(l+=3)+2],k="right";break}}var o;if(3==h.nodeType){for(var l=0;4>l;l++){for(;i&&Xg(b.line.text.charAt(m+i));)--i;for(;n>m+j&&Xg(b.line.text.charAt(m+j));)++j;if(d&&9>e&&0==i&&j==n-m)o=h.parentNode.getBoundingClientRect();else if(d&&a.options.lineWrapping){var p=Zg(h,i,j).getClientRects();o=p.length?p["right"==f?p.length-1:0]:fc}else o=Zg(h,i,j).getBoundingClientRect()||fc;if(o.left||o.right||0==i)break;j=i,i-=1,k="right"}d&&11>e&&(o=hc(a.display.measure,o))}else{i>0&&(k=f="right");var p;o=a.options.lineWrapping&&(p=h.getClientRects()).length>1?p["right"==f?p.length-1:0]:h.getBoundingClientRect()}if(d&&9>e&&!i&&(!o||!o.left&&!o.right)){var q=h.parentNode.getClientRects()[0];o=q?{left:q.left,right:q.left+xc(a.display),top:q.top,bottom:q.bottom}:fc}for(var r=o.top-b.rect.top,s=o.bottom-b.rect.top,t=(r+s)/2,u=b.view.measure.heights,l=0;l<u.length-1&&!(t<u[l]);l++);var v=l?u[l-1]:0,w=u[l],x={left:("right"==k?o.right:o.left)-b.rect.left,right:("left"==k?o.left:o.right)-b.rect.left,top:v,bottom:w};return o.left||o.right||(x.bogus=!0),a.options.singleCursorHeightPerLine||(x.rtop=r,x.rbottom=s),x}function hc(a,b){if(!window.screen||null==screen.logicalXDPI||screen.logicalXDPI==screen.deviceXDPI||!vh(a))return b;var c=screen.logicalXDPI/screen.deviceXDPI,d=screen.logicalYDPI/screen.deviceYDPI;return{left:b.left*c,right:b.right*c,top:b.top*d,bottom:b.bottom*d}}function ic(a){if(a.measure&&(a.measure.cache={},a.measure.heights=null,a.rest))for(var b=0;b<a.rest.length;b++)a.measure.caches[b]={}}function jc(a){a.display.externalMeasure=null,$g(a.display.lineMeasure);for(var b=0;b<a.display.view.length;b++)ic(a.display.view[b])}function kc(a){jc(a),a.display.cachedCharWidth=a.display.cachedTextHeight=a.display.cachedPaddingH=null,a.options.lineWrapping||(a.display.maxLineChanged=!0),a.display.lineNumChars=null}function lc(){return window.pageXOffset||(document.documentElement||document.body).scrollLeft}function mc(){return window.pageYOffset||(document.documentElement||document.body).scrollTop}function nc(a,b,c,d){if(b.widgets)for(var e=0;e<b.widgets.length;++e)if(b.widgets[e].above){var f=jf(b.widgets[e]);c.top+=f,c.bottom+=f}if("line"==d)return c;d||(d="local");var g=Wf(b);if("local"==d?g+=Xb(a.display):g-=a.display.viewOffset,"page"==d||"window"==d){var h=a.display.lineSpace.getBoundingClientRect();g+=h.top+("window"==d?0:mc());var i=h.left+("window"==d?0:lc());c.left+=i,c.right+=i}return c.top+=g,c.bottom+=g,c}function oc(a,b,c){if("div"==c)return b;var d=b.left,e=b.top;if("page"==c)d-=lc(),e-=mc();else if("local"==c||!c){var f=a.display.sizer.getBoundingClientRect();d+=f.left,e+=f.top}var g=a.display.lineSpace.getBoundingClientRect();return{left:d-g.left,top:e-g.top}}function pc(a,b,c,d,e){return d||(d=Qf(a.doc,b.line)),nc(a,d,bc(a,d,b.ch,e),c)}function qc(a,b,c,d,e,f){function g(b,g){var h=ec(a,e,b,g?"right":"left",f);return g?h.left=h.right:h.right=h.left,nc(a,d,h,c)}function h(a,b){var c=i[b],d=c.level%2;return a==yh(c)&&b&&c.level<i[b-1].level?(c=i[--b],a=zh(c)-(c.level%2?0:1),d=!0):a==zh(c)&&b<i.length-1&&c.level<i[b+1].level&&(c=i[++b],a=yh(c)-c.level%2,d=!1),d&&a==c.to&&a>c.from?g(a-1):g(a,d)}d=d||Qf(a.doc,b.line),e||(e=dc(a,d));var i=Xf(d),j=b.ch;if(!i)return g(j);var k=Hh(i,j),l=h(j,k);return null!=Gh&&(l.other=h(j,Gh)),l}function rc(a,b){var c=0,b=wb(a.doc,b);a.options.lineWrapping||(c=xc(a.display)*b.ch);var d=Qf(a.doc,b.line),e=Wf(d)+Xb(a.display);return{left:c,right:c,top:e,bottom:e+d.height}}function sc(a,b,c,d){var e=mb(a,b);return e.xRel=d,c&&(e.outside=!0),e}function tc(a,b,c){var d=a.doc;if(c+=a.display.viewOffset,0>c)return sc(d.first,0,!0,-1);var e=Vf(d,c),f=d.first+d.size-1;if(e>f)return sc(d.first+d.size-1,Qf(d,f).text.length,!0,1);0>b&&(b=0);for(var g=Qf(d,e);;){var h=uc(a,g,e,b,c),i=$e(g),j=i&&i.find(0,!0);if(!i||!(h.ch>j.from.ch||h.ch==j.from.ch&&h.xRel>0))return h;e=Uf(g=j.to.line)}}function uc(a,b,c,d,e){function j(d){var e=qc(a,mb(c,d),"line",b,i);return g=!0,f>e.bottom?e.left-h:f<e.top?e.left+h:(g=!1,e.left)}var f=e-Wf(b),g=!1,h=2*a.display.wrapper.clientWidth,i=dc(a,b),k=Xf(b),l=b.text.length,m=Ah(b),n=Bh(b),o=j(m),p=g,q=j(n),r=g;if(d>q)return sc(c,n,r,1);for(;;){if(k?n==m||n==Jh(b,m,1):1>=n-m){for(var s=o>d||q-d>=d-o?m:n,t=d-(s==m?o:q);Xg(b.text.charAt(s));)++s;var u=sc(c,s,s==m?p:r,-1>t?-1:t>1?1:0);return u}var v=Math.ceil(l/2),w=m+v;if(k){w=m;for(var x=0;v>x;++x)w=Jh(b,w,1)}var y=j(w);y>d?(n=w,q=y,(r=g)&&(q+=1e3),l=v):(m=w,o=y,p=g,l-=v)}}function wc(a){if(null!=a.cachedTextHeight)return a.cachedTextHeight;if(null==vc){vc=Yg("pre");for(var b=0;49>b;++b)vc.appendChild(document.createTextNode("x")),vc.appendChild(Yg("br"));vc.appendChild(document.createTextNode("x"))}_g(a.measure,vc);var c=vc.offsetHeight/50;return c>3&&(a.cachedTextHeight=c),$g(a.measure),c||1}function xc(a){if(null!=a.cachedCharWidth)return a.cachedCharWidth;var b=Yg("span","xxxxxxxxxx"),c=Yg("pre",[b]);_g(a.measure,c);var d=b.getBoundingClientRect(),e=(d.right-d.left)/10;return e>2&&(a.cachedCharWidth=e),e||10}function Ac(a){a.curOp={cm:a,viewChanged:!1,startHeight:a.doc.height,forceUpdate:!1,updateInput:null,typing:!1,changeObjs:null,cursorActivityHandlers:null,cursorActivityCalled:0,selectionChanged:!1,updateMaxLine:!1,scrollLeft:null,scrollTop:null,scrollToPos:null,id:++zc},yc?yc.ops.push(a.curOp):a.curOp.ownsGroup=yc={ops:[a.curOp],delayedCallbacks:[]}}function Bc(a){var b=a.delayedCallbacks,c=0;do{for(;c<b.length;c++)b[c]();for(var d=0;d<a.ops.length;d++){var e=a.ops[d];if(e.cursorActivityHandlers)for(;e.cursorActivityCalled<e.cursorActivityHandlers.length;)e.cursorActivityHandlers[e.cursorActivityCalled++](e.cm)}}while(c<b.length)}function Cc(a){var b=a.curOp,c=b.ownsGroup;if(c)try{Bc(c)}finally{yc=null;for(var d=0;d<c.ops.length;d++)c.ops[d].cm.curOp=null;Dc(c)}}function Dc(a){for(var b=a.ops,c=0;c<b.length;c++)Ec(b[c]);for(var c=0;c<b.length;c++)Fc(b[c]);for(var c=0;c<b.length;c++)Gc(b[c]);
-for(var c=0;c<b.length;c++)Hc(b[c]);for(var c=0;c<b.length;c++)Ic(b[c])}function Ec(a){var b=a.cm,c=b.display;a.updateMaxLine&&I(b),a.mustUpdate=a.viewChanged||a.forceUpdate||null!=a.scrollTop||a.scrollToPos&&(a.scrollToPos.from.line<c.viewFrom||a.scrollToPos.to.line>=c.viewTo)||c.maxLineChanged&&b.options.lineWrapping,a.update=a.mustUpdate&&new S(b,a.mustUpdate&&{top:a.scrollTop,ensure:a.scrollToPos},a.forceUpdate)}function Fc(a){a.updatedDisplay=a.mustUpdate&&T(a.cm,a.update)}function Gc(a){var b=a.cm,c=b.display;a.updatedDisplay&&Y(b),a.barMeasure=L(b),c.maxLineChanged&&!b.options.lineWrapping&&(a.adjustWidthTo=bc(b,c.maxLine,c.maxLine.text.length).left+3,a.maxScrollLeft=Math.max(0,c.sizer.offsetLeft+a.adjustWidthTo+Bg-c.scroller.clientWidth)),(a.updatedDisplay||a.selectionChanged)&&(a.newSelectionNodes=Nb(b))}function Hc(a){var b=a.cm;null!=a.adjustWidthTo&&(b.display.sizer.style.minWidth=a.adjustWidthTo+"px",a.maxScrollLeft<b.doc.scrollLeft&&sd(b,Math.min(b.display.scroller.scrollLeft,a.maxScrollLeft),!0),b.display.maxLineChanged=!1),a.newSelectionNodes&&Ob(b,a.newSelectionNodes),a.updatedDisplay&&W(b,a.barMeasure),(a.updatedDisplay||a.startHeight!=b.doc.height)&&M(b,a.barMeasure),a.selectionChanged&&Sb(b),b.state.focused&&a.updateInput&&$c(b,a.typing)}function Ic(a){var b=a.cm,c=b.display,d=b.doc;if(null!=a.adjustWidthTo&&Math.abs(a.barMeasure.scrollWidth-b.display.scroller.scrollWidth)>1&&M(b),a.updatedDisplay&&U(b,a.update),null==c.wheelStartX||null==a.scrollTop&&null==a.scrollLeft&&!a.scrollToPos||(c.wheelStartX=c.wheelStartY=null),null!=a.scrollTop&&(c.scroller.scrollTop!=a.scrollTop||a.forceScroll)){var e=Math.max(0,Math.min(c.scroller.scrollHeight-c.scroller.clientHeight,a.scrollTop));c.scroller.scrollTop=c.scrollbarV.scrollTop=d.scrollTop=e}if(null!=a.scrollLeft&&(c.scroller.scrollLeft!=a.scrollLeft||a.forceScroll)){var g=Math.max(0,Math.min(c.scroller.scrollWidth-c.scroller.clientWidth,a.scrollLeft));c.scroller.scrollLeft=c.scrollbarH.scrollLeft=d.scrollLeft=g,O(b)}if(a.scrollToPos){var h=Zd(b,wb(d,a.scrollToPos.from),wb(d,a.scrollToPos.to),a.scrollToPos.margin);a.scrollToPos.isCursor&&b.state.focused&&Yd(b,h)}var i=a.maybeHiddenMarkers,j=a.maybeUnhiddenMarkers;if(i)for(var k=0;k<i.length;++k)i[k].lines.length||tg(i[k],"hide");if(j)for(var k=0;k<j.length;++k)j[k].lines.length&&tg(j[k],"unhide");c.wrapper.offsetHeight&&(d.scrollTop=b.display.scroller.scrollTop),a.updatedDisplay&&f&&(b.options.lineWrapping&&X(b,a.barMeasure),a.barMeasure.scrollWidth>a.barMeasure.clientWidth&&a.barMeasure.scrollWidth<a.barMeasure.clientWidth+1&&!K(b)&&M(b)),a.changeObjs&&tg(b,"changes",b,a.changeObjs)}function Jc(a,b){if(a.curOp)return b();Ac(a);try{return b()}finally{Cc(a)}}function Kc(a,b){return function(){if(a.curOp)return b.apply(a,arguments);Ac(a);try{return b.apply(a,arguments)}finally{Cc(a)}}}function Lc(a){return function(){if(this.curOp)return a.apply(this,arguments);Ac(this);try{return a.apply(this,arguments)}finally{Cc(this)}}}function Mc(a){return function(){var b=this.cm;if(!b||b.curOp)return a.apply(this,arguments);Ac(b);try{return a.apply(this,arguments)}finally{Cc(b)}}}function Nc(a,b,c){this.line=b,this.rest=bf(b),this.size=this.rest?Uf(Lg(this.rest))-c+1:1,this.node=this.text=null,this.hidden=ef(a,b)}function Oc(a,b,c){for(var e,d=[],f=b;c>f;f=e){var g=new Nc(a.doc,Qf(a.doc,f),f);e=f+g.size,d.push(g)}return d}function Pc(a,b,c,d){null==b&&(b=a.doc.first),null==c&&(c=a.doc.first+a.doc.size),d||(d=0);var e=a.display;if(d&&c<e.viewTo&&(null==e.updateLineNumbers||e.updateLineNumbers>b)&&(e.updateLineNumbers=b),a.curOp.viewChanged=!0,b>=e.viewTo)v&&cf(a.doc,b)<e.viewTo&&Rc(a);else if(c<=e.viewFrom)v&&df(a.doc,c+d)>e.viewFrom?Rc(a):(e.viewFrom+=d,e.viewTo+=d);else if(b<=e.viewFrom&&c>=e.viewTo)Rc(a);else if(b<=e.viewFrom){var f=Tc(a,c,c+d,1);f?(e.view=e.view.slice(f.index),e.viewFrom=f.lineN,e.viewTo+=d):Rc(a)}else if(c>=e.viewTo){var f=Tc(a,b,b,-1);f?(e.view=e.view.slice(0,f.index),e.viewTo=f.lineN):Rc(a)}else{var g=Tc(a,b,b,-1),h=Tc(a,c,c+d,1);g&&h?(e.view=e.view.slice(0,g.index).concat(Oc(a,g.lineN,h.lineN)).concat(e.view.slice(h.index)),e.viewTo+=d):Rc(a)}var i=e.externalMeasured;i&&(c<i.lineN?i.lineN+=d:b<i.lineN+i.size&&(e.externalMeasured=null))}function Qc(a,b,c){a.curOp.viewChanged=!0;var d=a.display,e=a.display.externalMeasured;if(e&&b>=e.lineN&&b<e.lineN+e.size&&(d.externalMeasured=null),!(b<d.viewFrom||b>=d.viewTo)){var f=d.view[Sc(a,b)];if(null!=f.node){var g=f.changes||(f.changes=[]);-1==Ng(g,c)&&g.push(c)}}}function Rc(a){a.display.viewFrom=a.display.viewTo=a.doc.first,a.display.view=[],a.display.viewOffset=0}function Sc(a,b){if(b>=a.display.viewTo)return null;if(b-=a.display.viewFrom,0>b)return null;for(var c=a.display.view,d=0;d<c.length;d++)if(b-=c[d].size,0>b)return d}function Tc(a,b,c,d){var f,e=Sc(a,b),g=a.display.view;if(!v||c==a.doc.first+a.doc.size)return{index:e,lineN:c};for(var h=0,i=a.display.viewFrom;e>h;h++)i+=g[h].size;if(i!=b){if(d>0){if(e==g.length-1)return null;f=i+g[e].size-b,e++}else f=i-b;b+=f,c+=f}for(;cf(a.doc,c)!=c;){if(e==(0>d?0:g.length-1))return null;c+=d*g[e-(0>d?1:0)].size,e+=d}return{index:e,lineN:c}}function Uc(a,b,c){var d=a.display,e=d.view;0==e.length||b>=d.viewTo||c<=d.viewFrom?(d.view=Oc(a,b,c),d.viewFrom=b):(d.viewFrom>b?d.view=Oc(a,b,d.viewFrom).concat(d.view):d.viewFrom<b&&(d.view=d.view.slice(Sc(a,b))),d.viewFrom=b,d.viewTo<c?d.view=d.view.concat(Oc(a,d.viewTo,c)):d.viewTo>c&&(d.view=d.view.slice(0,Sc(a,c)))),d.viewTo=c}function Vc(a){for(var b=a.display.view,c=0,d=0;d<b.length;d++){var e=b[d];e.hidden||e.node&&!e.changes||++c}return c}function Wc(a){a.display.pollingFast||a.display.poll.set(a.options.pollInterval,function(){Zc(a),a.state.focused&&Wc(a)})}function Xc(a){function c(){var d=Zc(a);d||b?(a.display.pollingFast=!1,Wc(a)):(b=!0,a.display.poll.set(60,c))}var b=!1;a.display.pollingFast=!0,a.display.poll.set(20,c)}function Zc(a){var b=a.display.input,c=a.display.prevInput,f=a.doc;if(!a.state.focused||sh(b)&&!c||bd(a)||a.options.disableInput||a.state.keySeq)return!1;a.state.pasteIncoming&&a.state.fakedLastChar&&(b.value=b.value.substring(0,b.value.length-1),a.state.fakedLastChar=!1);var g=b.value;if(g==c&&!a.somethingSelected())return!1;if(d&&e>=9&&a.display.inputHasSelection===g||p&&/[\uf700-\uf7ff]/.test(g))return $c(a),!1;var h=!a.curOp;h&&Ac(a),a.display.shift=!1,8203!=g.charCodeAt(0)||f.sel!=a.display.selForContextMenu||c||(c="\u200b");for(var i=0,j=Math.min(c.length,g.length);j>i&&c.charCodeAt(i)==g.charCodeAt(i);)++i;var k=g.slice(i),l=rh(k),m=null;a.state.pasteIncoming&&f.sel.ranges.length>1&&(Yc&&Yc.join("\n")==k?m=0==f.sel.ranges.length%Yc.length&&Og(Yc,rh):l.length==f.sel.ranges.length&&(m=Og(l,function(a){return[a]})));for(var n=f.sel.ranges.length-1;n>=0;n--){var o=f.sel.ranges[n],q=o.from(),r=o.to();i<c.length?q=mb(q.line,q.ch-(c.length-i)):a.state.overwrite&&o.empty()&&!a.state.pasteIncoming&&(r=mb(r.line,Math.min(Qf(f,r.line).text.length,r.ch+Lg(l).length)));var s=a.curOp.updateInput,t={from:q,to:r,text:m?m[n%m.length]:l,origin:a.state.pasteIncoming?"paste":a.state.cutIncoming?"cut":"+input"};if(Rd(a.doc,t),vg(a,"inputRead",a,t),k&&!a.state.pasteIncoming&&a.options.electricChars&&a.options.smartIndent&&o.head.ch<100&&(!n||f.sel.ranges[n-1].head.line!=o.head.line)){var u=a.getModeAt(o.head),v=Ld(t);if(u.electricChars){for(var w=0;w<u.electricChars.length;w++)if(k.indexOf(u.electricChars.charAt(w))>-1){de(a,v.line,"smart");break}}else u.electricInput&&u.electricInput.test(Qf(f,v.line).text.slice(0,v.ch))&&de(a,v.line,"smart")}}return be(a),a.curOp.updateInput=s,a.curOp.typing=!0,g.length>1e3||g.indexOf("\n")>-1?b.value=a.display.prevInput="":a.display.prevInput=g,h&&Cc(a),a.state.pasteIncoming=a.state.cutIncoming=!1,!0}function $c(a,b){var c,f,g=a.doc;if(a.somethingSelected()){a.display.prevInput="";var h=g.sel.primary();c=th&&(h.to().line-h.from().line>100||(f=a.getSelection()).length>1e3);var i=c?"-":f||a.getSelection();a.display.input.value=i,a.state.focused&&Mg(a.display.input),d&&e>=9&&(a.display.inputHasSelection=i)}else b||(a.display.prevInput=a.display.input.value="",d&&e>=9&&(a.display.inputHasSelection=null));a.display.inaccurateSelection=c}function _c(a){"nocursor"==a.options.readOnly||o&&bh()==a.display.input||a.display.input.focus()}function ad(a){a.state.focused||(_c(a),Hd(a))}function bd(a){return a.options.readOnly||a.doc.cantEdit}function cd(a){function c(){a.state.focused&&setTimeout(Rg(_c,a),0)}function g(b){xg(a,b)||og(b)}function h(c){if(a.somethingSelected())Yc=a.getSelections(),b.inaccurateSelection&&(b.prevInput="",b.inaccurateSelection=!1,b.input.value=Yc.join("\n"),Mg(b.input));else{for(var d=[],e=[],f=0;f<a.doc.sel.ranges.length;f++){var g=a.doc.sel.ranges[f].head.line,h={anchor:mb(g,0),head:mb(g+1,0)};e.push(h),d.push(a.getRange(h.anchor,h.head))}"cut"==c.type?a.setSelections(e,null,Dg):(b.prevInput="",b.input.value=d.join("\n"),Mg(b.input)),Yc=d}"cut"==c.type&&(a.state.cutIncoming=!0)}var b=a.display;rg(b.scroller,"mousedown",Kc(a,gd)),d&&11>e?rg(b.scroller,"dblclick",Kc(a,function(b){if(!xg(a,b)){var c=fd(a,b);if(c&&!nd(a,b)&&!ed(a.display,b)){lg(b);var d=a.findWordAt(c);Bb(a.doc,d.anchor,d.head)}}})):rg(b.scroller,"dblclick",function(b){xg(a,b)||lg(b)}),rg(b.lineSpace,"selectstart",function(a){ed(b,a)||lg(a)}),t||rg(b.scroller,"contextmenu",function(b){Jd(a,b)}),rg(b.scroller,"scroll",function(){b.scroller.clientHeight&&(rd(a,b.scroller.scrollTop),sd(a,b.scroller.scrollLeft,!0),tg(a,"scroll",a))}),rg(b.scrollbarV,"scroll",function(){b.scroller.clientHeight&&rd(a,b.scrollbarV.scrollTop)}),rg(b.scrollbarH,"scroll",function(){b.scroller.clientHeight&&sd(a,b.scrollbarH.scrollLeft)}),rg(b.scroller,"mousewheel",function(b){vd(a,b)}),rg(b.scroller,"DOMMouseScroll",function(b){vd(a,b)}),rg(b.scrollbarH,"mousedown",c),rg(b.scrollbarV,"mousedown",c),rg(b.wrapper,"scroll",function(){b.wrapper.scrollTop=b.wrapper.scrollLeft=0}),rg(b.input,"keyup",function(b){Fd.call(a,b)}),rg(b.input,"input",function(){d&&e>=9&&a.display.inputHasSelection&&(a.display.inputHasSelection=null),Xc(a)}),rg(b.input,"keydown",Kc(a,Dd)),rg(b.input,"keypress",Kc(a,Gd)),rg(b.input,"focus",Rg(Hd,a)),rg(b.input,"blur",Rg(Id,a)),a.options.dragDrop&&(rg(b.scroller,"dragstart",function(b){qd(a,b)}),rg(b.scroller,"dragenter",g),rg(b.scroller,"dragover",g),rg(b.scroller,"drop",Kc(a,pd))),rg(b.scroller,"paste",function(c){ed(b,c)||(a.state.pasteIncoming=!0,_c(a),Xc(a))}),rg(b.input,"paste",function(){if(f&&!a.state.fakedLastChar&&!(new Date-a.state.lastMiddleDown<200)){var c=b.input.selectionStart,d=b.input.selectionEnd;b.input.value+="$",b.input.selectionEnd=d,b.input.selectionStart=c,a.state.fakedLastChar=!0}a.state.pasteIncoming=!0,Xc(a)}),rg(b.input,"cut",h),rg(b.input,"copy",h),k&&rg(b.sizer,"mouseup",function(){bh()==b.input&&b.input.blur(),_c(a)})}function dd(a){var b=a.display;(b.lastWrapHeight!=b.wrapper.clientHeight||b.lastWrapWidth!=b.wrapper.clientWidth)&&(b.cachedCharWidth=b.cachedTextHeight=b.cachedPaddingH=null,a.setSize())}function ed(a,b){for(var c=pg(b);c!=a.wrapper;c=c.parentNode)if(!c||c.ignoreEvents||c.parentNode==a.sizer&&c!=a.mover)return!0}function fd(a,b,c,d){var e=a.display;if(!c){var f=pg(b);if(f==e.scrollbarH||f==e.scrollbarV||f==e.scrollbarFiller||f==e.gutterFiller)return null}var g,h,i=e.lineSpace.getBoundingClientRect();try{g=b.clientX-i.left,h=b.clientY-i.top}catch(b){return null}var k,j=tc(a,g,h);if(d&&1==j.xRel&&(k=Qf(a.doc,j.line).text).length==j.ch){var l=Hg(k,k.length,a.options.tabSize)-k.length;j=mb(j.line,Math.max(0,Math.round((g-Zb(a.display).left)/xc(a.display))-l))}return j}function gd(a){if(!xg(this,a)){var b=this,c=b.display;if(c.shift=a.shiftKey,ed(c,a))return f||(c.scroller.draggable=!1,setTimeout(function(){c.scroller.draggable=!0},100)),void 0;if(!nd(b,a)){var d=fd(b,a);switch(window.focus(),qg(a)){case 1:d?jd(b,a,d):pg(a)==c.scroller&&lg(a);break;case 2:f&&(b.state.lastMiddleDown=+new Date),d&&Bb(b.doc,d),setTimeout(Rg(_c,b),20),lg(a);break;case 3:t&&Jd(b,a)}}}}function jd(a,b,c){setTimeout(Rg(ad,a),0);var e,d=+new Date;id&&id.time>d-400&&0==nb(id.pos,c)?e="triple":hd&&hd.time>d-400&&0==nb(hd.pos,c)?(e="double",id={time:d,pos:c}):(e="single",hd={time:d,pos:c});var f=a.doc.sel,g=p?b.metaKey:b.ctrlKey;a.options.dragDrop&&kh&&!bd(a)&&"single"==e&&f.contains(c)>-1&&f.somethingSelected()?kd(a,b,c,g):ld(a,b,c,e,g)}function kd(a,b,c,g){var h=a.display,i=Kc(a,function(j){f&&(h.scroller.draggable=!1),a.state.draggingText=!1,sg(document,"mouseup",i),sg(h.scroller,"drop",i),Math.abs(b.clientX-j.clientX)+Math.abs(b.clientY-j.clientY)<10&&(lg(j),g||Bb(a.doc,c),_c(a),d&&9==e&&setTimeout(function(){document.body.focus(),_c(a)},20))});f&&(h.scroller.draggable=!0),a.state.draggingText=i,h.scroller.dragDrop&&h.scroller.dragDrop(),rg(document,"mouseup",i),rg(h.scroller,"drop",i)}function ld(a,b,c,d,e){function n(b){if(0!=nb(m,b))if(m=b,"rect"==d){for(var e=[],f=a.options.tabSize,k=Hg(Qf(g,c.line).text,c.ch,f),l=Hg(Qf(g,b.line).text,b.ch,f),n=Math.min(k,l),o=Math.max(k,l),p=Math.min(c.line,b.line),q=Math.min(a.lastLine(),Math.max(c.line,b.line));q>=p;p++){var r=Qf(g,p).text,s=Ig(r,n,f);n==o?e.push(new sb(mb(p,s),mb(p,s))):r.length>s&&e.push(new sb(mb(p,s),mb(p,Ig(r,o,f))))}e.length||e.push(new sb(c,c)),Hb(g,tb(j.ranges.slice(0,i).concat(e),i),{origin:"*mouse",scroll:!1}),a.scrollIntoView(b)}else{var t=h,u=t.anchor,v=b;if("single"!=d){if("double"==d)var w=a.findWordAt(b);else var w=new sb(mb(b.line,0),wb(g,mb(b.line+1,0)));nb(w.anchor,u)>0?(v=w.head,u=qb(t.from(),w.anchor)):(v=w.anchor,u=pb(t.to(),w.head))}var e=j.ranges.slice(0);e[i]=new sb(wb(g,u),v),Hb(g,tb(e,i),Eg)}}function q(b){var c=++p,e=fd(a,b,!0,"rect"==d);if(e)if(0!=nb(e,m)){ad(a),n(e);var h=N(f,g);(e.line>=h.to||e.line<h.from)&&setTimeout(Kc(a,function(){p==c&&q(b)}),150)}else{var i=b.clientY<o.top?-20:b.clientY>o.bottom?20:0;i&&setTimeout(Kc(a,function(){p==c&&(f.scroller.scrollTop+=i,q(b))}),50)}}function r(b){p=1/0,lg(b),_c(a),sg(document,"mousemove",s),sg(document,"mouseup",t),g.history.lastSelOrigin=null}var f=a.display,g=a.doc;lg(b);var h,i,j=g.sel;if(e&&!b.shiftKey?(i=g.sel.contains(c),h=i>-1?g.sel.ranges[i]:new sb(c,c)):h=g.sel.primary(),b.altKey)d="rect",e||(h=new sb(c,c)),c=fd(a,b,!0,!0),i=-1;else if("double"==d){var k=a.findWordAt(c);h=a.display.shift||g.extend?Ab(g,h,k.anchor,k.head):k}else if("triple"==d){var l=new sb(mb(c.line,0),wb(g,mb(c.line+1,0)));h=a.display.shift||g.extend?Ab(g,h,l.anchor,l.head):l}else h=Ab(g,h,c);e?i>-1?Db(g,i,h,Eg):(i=g.sel.ranges.length,Hb(g,tb(g.sel.ranges.concat([h]),i),{scroll:!1,origin:"*mouse"})):(i=0,Hb(g,new rb([h],0),Eg),j=g.sel);var m=c,o=f.wrapper.getBoundingClientRect(),p=0,s=Kc(a,function(a){qg(a)?q(a):r(a)}),t=Kc(a,r);rg(document,"mousemove",s),rg(document,"mouseup",t)}function md(a,b,c,d,e){try{var f=b.clientX,g=b.clientY}catch(b){return!1}if(f>=Math.floor(a.display.gutters.getBoundingClientRect().right))return!1;d&&lg(b);var h=a.display,i=h.lineDiv.getBoundingClientRect();if(g>i.bottom||!zg(a,c))return ng(b);g-=i.top-h.viewOffset;for(var j=0;j<a.options.gutters.length;++j){var k=h.gutters.childNodes[j];if(k&&k.getBoundingClientRect().right>=f){var l=Vf(a.doc,g),m=a.options.gutters[j];return e(a,c,a,l,m,b),ng(b)}}}function nd(a,b){return md(a,b,"gutterClick",!0,vg)}function pd(a){var b=this;if(!xg(b,a)&&!ed(b.display,a)){lg(a),d&&(od=+new Date);var c=fd(b,a,!0),e=a.dataTransfer.files;if(c&&!bd(b))if(e&&e.length&&window.FileReader&&window.File)for(var f=e.length,g=Array(f),h=0,i=function(a,d){var e=new FileReader;e.onload=Kc(b,function(){if(g[d]=e.result,++h==f){c=wb(b.doc,c);var a={from:c,to:c,text:rh(g.join("\n")),origin:"paste"};Rd(b.doc,a),Gb(b.doc,ub(c,Ld(a)))}}),e.readAsText(a)},j=0;f>j;++j)i(e[j],j);else{if(b.state.draggingText&&b.doc.sel.contains(c)>-1)return b.state.draggingText(a),setTimeout(Rg(_c,b),20),void 0;try{var g=a.dataTransfer.getData("Text");if(g){if(b.state.draggingText&&!(p?a.metaKey:a.ctrlKey))var k=b.listSelections();if(Ib(b.doc,ub(c,c)),k)for(var j=0;j<k.length;++j)Xd(b.doc,"",k[j].anchor,k[j].head,"drag");b.replaceSelection(g,"around","paste"),_c(b)}}catch(a){}}}}function qd(a,b){if(d&&(!a.state.draggingText||+new Date-od<100))return og(b),void 0;if(!xg(a,b)&&!ed(a.display,b)&&(b.dataTransfer.setData("Text",a.getSelection()),b.dataTransfer.setDragImage&&!j)){var c=Yg("img",null,null,"position: fixed; left: 0; top: 0;");c.src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",i&&(c.width=c.height=1,a.display.wrapper.appendChild(c),c._top=c.offsetTop),b.dataTransfer.setDragImage(c,0,0),i&&c.parentNode.removeChild(c)}}function rd(b,c){Math.abs(b.doc.scrollTop-c)<2||(b.doc.scrollTop=c,a||V(b,{top:c}),b.display.scroller.scrollTop!=c&&(b.display.scroller.scrollTop=c),b.display.scrollbarV.scrollTop!=c&&(b.display.scrollbarV.scrollTop=c),a&&V(b),Tb(b,100))}function sd(a,b,c){(c?b==a.doc.scrollLeft:Math.abs(a.doc.scrollLeft-b)<2)||(b=Math.min(b,a.display.scroller.scrollWidth-a.display.scroller.clientWidth),a.doc.scrollLeft=b,O(a),a.display.scroller.scrollLeft!=b&&(a.display.scroller.scrollLeft=b),a.display.scrollbarH.scrollLeft!=b&&(a.display.scrollbarH.scrollLeft=b))}function vd(b,c){var d=c.wheelDeltaX,e=c.wheelDeltaY;null==d&&c.detail&&c.axis==c.HORIZONTAL_AXIS&&(d=c.detail),null==e&&c.detail&&c.axis==c.VERTICAL_AXIS?e=c.detail:null==e&&(e=c.wheelDelta);var g=b.display,h=g.scroller;if(d&&h.scrollWidth>h.clientWidth||e&&h.scrollHeight>h.clientHeight){if(e&&p&&f)a:for(var j=c.target,k=g.view;j!=h;j=j.parentNode)for(var l=0;l<k.length;l++)if(k[l].node==j){b.display.currentWheelTarget=j;break a}if(d&&!a&&!i&&null!=ud)return e&&rd(b,Math.max(0,Math.min(h.scrollTop+e*ud,h.scrollHeight-h.clientHeight))),sd(b,Math.max(0,Math.min(h.scrollLeft+d*ud,h.scrollWidth-h.clientWidth))),lg(c),g.wheelStartX=null,void 0;if(e&&null!=ud){var m=e*ud,n=b.doc.scrollTop,o=n+g.wrapper.clientHeight;0>m?n=Math.max(0,n+m-50):o=Math.min(b.doc.height,o+m+50),V(b,{top:n,bottom:o})}20>td&&(null==g.wheelStartX?(g.wheelStartX=h.scrollLeft,g.wheelStartY=h.scrollTop,g.wheelDX=d,g.wheelDY=e,setTimeout(function(){if(null!=g.wheelStartX){var a=h.scrollLeft-g.wheelStartX,b=h.scrollTop-g.wheelStartY,c=b&&g.wheelDY&&b/g.wheelDY||a&&g.wheelDX&&a/g.wheelDX;g.wheelStartX=g.wheelStartY=null,c&&(ud=(ud*td+c)/(td+1),++td)}},200)):(g.wheelDX+=d,g.wheelDY+=e))}}function wd(a,b,c){if("string"==typeof b&&(b=te[b],!b))return!1;a.display.pollingFast&&Zc(a)&&(a.display.pollingFast=!1);var d=a.display.shift,e=!1;try{bd(a)&&(a.state.suppressEdits=!0),c&&(a.display.shift=!1),e=b(a)!=Cg}finally{a.display.shift=d,a.state.suppressEdits=!1}return e}function xd(a,b,c){for(var d=0;d<a.state.keyMaps.length;d++){var e=we(b,a.state.keyMaps[d],c);if(e)return e}return a.options.extraKeys&&we(b,a.options.extraKeys,c)||we(b,a.options.keyMap,c)}function zd(a,b,c,d){var e=a.state.keySeq;if(e){if(xe(b))return"handled";yd.set(50,function(){a.state.keySeq==e&&(a.state.keySeq=null,$c(a))}),b=e+" "+b}var f=xd(a,b,d);return"multi"==f&&(a.state.keySeq=b),"handled"==f&&vg(a,"keyHandled",a,b,c),("handled"==f||"multi"==f)&&(lg(c),Sb(a)),e&&!f&&/\'$/.test(b)?(lg(c),!0):!!f}function Ad(a,b){var c=ye(b,!0);return c?b.shiftKey&&!a.state.keySeq?zd(a,"Shift-"+c,b,function(b){return wd(a,b,!0)})||zd(a,c,b,function(b){return("string"==typeof b?/^go[A-Z]/.test(b):b.motion)?wd(a,b):void 0}):zd(a,c,b,function(b){return wd(a,b)}):!1}function Bd(a,b,c){return zd(a,"'"+c+"'",b,function(b){return wd(a,b,!0)})}function Dd(a){var b=this;if(ad(b),!xg(b,a)){d&&11>e&&27==a.keyCode&&(a.returnValue=!1);var c=a.keyCode;b.display.shift=16==c||a.shiftKey;var f=Ad(b,a);i&&(Cd=f?c:null,!f&&88==c&&!th&&(p?a.metaKey:a.ctrlKey)&&b.replaceSelection("",null,"cut")),18!=c||/\bCodeMirror-crosshair\b/.test(b.display.lineDiv.className)||Ed(b)}}function Ed(a){function c(a){18!=a.keyCode&&a.altKey||(dh(b,"CodeMirror-crosshair"),sg(document,"keyup",c),sg(document,"mouseover",c))}var b=a.display.lineDiv;eh(b,"CodeMirror-crosshair"),rg(document,"keyup",c),rg(document,"mouseover",c)}function Fd(a){16==a.keyCode&&(this.doc.sel.shift=!1),xg(this,a)}function Gd(a){var b=this;if(!(xg(b,a)||a.ctrlKey&&!a.altKey||p&&a.metaKey)){var c=a.keyCode,f=a.charCode;if(i&&c==Cd)return Cd=null,lg(a),void 0;if(!(i&&(!a.which||a.which<10)||k)||!Ad(b,a)){var g=String.fromCharCode(null==f?c:f);Bd(b,a,g)||(d&&e>=9&&(b.display.inputHasSelection=null),Xc(b))}}}function Hd(a){"nocursor"!=a.options.readOnly&&(a.state.focused||(tg(a,"focus",a),a.state.focused=!0,eh(a.display.wrapper,"CodeMirror-focused"),a.curOp||a.display.selForContextMenu==a.doc.sel||($c(a),f&&setTimeout(Rg($c,a,!0),0))),Wc(a),Sb(a))}function Id(a){a.state.focused&&(tg(a,"blur",a),a.state.focused=!1,dh(a.display.wrapper,"CodeMirror-focused")),clearInterval(a.display.blinker),setTimeout(function(){a.state.focused||(a.display.shift=!1)},150)}function Jd(a,b){function m(){if(null!=c.input.selectionStart){var b=a.somethingSelected(),d=c.input.value="\u200b"+(b?c.input.value:"");c.prevInput=b?"":"\u200b",c.input.selectionStart=1,c.input.selectionEnd=d.length,c.selForContextMenu=a.doc.sel}}function n(){if(c.inputDiv.style.position="relative",c.input.style.cssText=k,d&&9>e&&(c.scrollbarV.scrollTop=c.scroller.scrollTop=h),Wc(a),null!=c.input.selectionStart){(!d||d&&9>e)&&m();var b=0,f=function(){c.selForContextMenu==a.doc.sel&&0==c.input.selectionStart?Kc(a,te.selectAll)(a):b++<10?c.detectingSelectAll=setTimeout(f,500):$c(a)};c.detectingSelectAll=setTimeout(f,200)}}if(!xg(a,b,"contextmenu")){var c=a.display;if(!ed(c,b)&&!Kd(a,b)){var g=fd(a,b),h=c.scroller.scrollTop;if(g&&!i){var j=a.options.resetSelectionOnContextMenu;j&&-1==a.doc.sel.contains(g)&&Kc(a,Hb)(a.doc,ub(g),Dg);var k=c.input.style.cssText;if(c.inputDiv.style.position="absolute",c.input.style.cssText="position: fixed; width: 30px; height: 30px; top: "+(b.clientY-5)+"px; left: "+(b.clientX-5)+"px; z-index: 1000; background: "+(d?"rgba(255, 255, 255, .05)":"transparent")+"; outline: none; border-width: 0; outline: none; overflow: hidden; opacity: .05; filter: alpha(opacity=5);",f)var l=window.scrollY;if(_c(a),f&&window.scrollTo(null,l),$c(a),a.somethingSelected()||(c.input.value=c.prevInput=" "),c.selForContextMenu=a.doc.sel,clearTimeout(c.detectingSelectAll),d&&e>=9&&m(),t){og(b);var o=function(){sg(window,"mouseup",o),setTimeout(n,20)};rg(window,"mouseup",o)}else setTimeout(n,50)}}}}function Kd(a,b){return zg(a,"gutterContextMenu")?md(a,b,"gutterContextMenu",!1,tg):!1}function Md(a,b){if(nb(a,b.from)<0)return a;if(nb(a,b.to)<=0)return Ld(b);var c=a.line+b.text.length-(b.to.line-b.from.line)-1,d=a.ch;return a.line==b.to.line&&(d+=Ld(b).ch-b.to.ch),mb(c,d)}function Nd(a,b){for(var c=[],d=0;d<a.sel.ranges.length;d++){var e=a.sel.ranges[d];c.push(new sb(Md(e.anchor,b),Md(e.head,b)))}return tb(c,a.sel.primIndex)}function Od(a,b,c){return a.line==b.line?mb(c.line,a.ch-b.ch+c.ch):mb(c.line+(a.line-b.line),a.ch)}function Pd(a,b,c){for(var d=[],e=mb(a.first,0),f=e,g=0;g<b.length;g++){var h=b[g],i=Od(h.from,e,f),j=Od(Ld(h),e,f);if(e=h.to,f=j,"around"==c){var k=a.sel.ranges[g],l=nb(k.head,k.anchor)<0;d[g]=new sb(l?j:i,l?i:j)}else d[g]=new sb(i,i)}return new rb(d,a.sel.primIndex)}function Qd(a,b,c){var d={canceled:!1,from:b.from,to:b.to,text:b.text,origin:b.origin,cancel:function(){this.canceled=!0}};return c&&(d.update=function(b,c,d,e){b&&(this.from=wb(a,b)),c&&(this.to=wb(a,c)),d&&(this.text=d),void 0!==e&&(this.origin=e)}),tg(a,"beforeChange",a,d),a.cm&&tg(a.cm,"beforeChange",a.cm,d),d.canceled?null:{from:d.from,to:d.to,text:d.text,origin:d.origin}}function Rd(a,b,c){if(a.cm){if(!a.cm.curOp)return Kc(a.cm,Rd)(a,b,c);if(a.cm.state.suppressEdits)return}if(!(zg(a,"beforeChange")||a.cm&&zg(a.cm,"beforeChange"))||(b=Qd(a,b,!0))){var d=u&&!c&&Se(a,b.from,b.to);if(d)for(var e=d.length-1;e>=0;--e)Sd(a,{from:d[e].from,to:d[e].to,text:e?[""]:b.text});else Sd(a,b)}}function Sd(a,b){if(1!=b.text.length||""!=b.text[0]||0!=nb(b.from,b.to)){var c=Nd(a,b);ag(a,b,c,a.cm?a.cm.curOp.id:0/0),Vd(a,b,c,Pe(a,b));var d=[];Of(a,function(a,c){c||-1!=Ng(d,a.history)||(kg(a.history,b),d.push(a.history)),Vd(a,b,null,Pe(a,b))})}}function Td(a,b,c){if(!a.cm||!a.cm.state.suppressEdits){for(var e,d=a.history,f=a.sel,g="undo"==b?d.done:d.undone,h="undo"==b?d.undone:d.done,i=0;i<g.length&&(e=g[i],c?!e.ranges||e.equals(a.sel):e.ranges);i++);if(i!=g.length){for(d.lastOrigin=d.lastSelOrigin=null;e=g.pop(),e.ranges;){if(dg(e,h),c&&!e.equals(a.sel))return Hb(a,e,{clearRedo:!1}),void 0;f=e}var j=[];dg(f,h),h.push({changes:j,generation:d.generation}),d.generation=e.generation||++d.maxGeneration;for(var k=zg(a,"beforeChange")||a.cm&&zg(a.cm,"beforeChange"),i=e.changes.length-1;i>=0;--i){var l=e.changes[i];if(l.origin=b,k&&!Qd(a,l,!1))return g.length=0,void 0;j.push(Zf(a,l));var m=i?Nd(a,l):Lg(g);Vd(a,l,m,Re(a,l)),!i&&a.cm&&a.cm.scrollIntoView({from:l.from,to:Ld(l)});var n=[];Of(a,function(a,b){b||-1!=Ng(n,a.history)||(kg(a.history,l),n.push(a.history)),Vd(a,l,null,Re(a,l))})}}}}function Ud(a,b){if(0!=b&&(a.first+=b,a.sel=new rb(Og(a.sel.ranges,function(a){return new sb(mb(a.anchor.line+b,a.anchor.ch),mb(a.head.line+b,a.head.ch))}),a.sel.primIndex),a.cm)){Pc(a.cm,a.first,a.first-b,b);for(var c=a.cm.display,d=c.viewFrom;d<c.viewTo;d++)Qc(a.cm,d,"gutter")}}function Vd(a,b,c,d){if(a.cm&&!a.cm.curOp)return Kc(a.cm,Vd)(a,b,c,d);if(b.to.line<a.first)return Ud(a,b.text.length-1-(b.to.line-b.from.line)),void 0;if(!(b.from.line>a.lastLine())){if(b.from.line<a.first){var e=b.text.length-1-(a.first-b.from.line);Ud(a,e),b={from:mb(a.first,0),to:mb(b.to.line+e,b.to.ch),text:[Lg(b.text)],origin:b.origin}}var f=a.lastLine();b.to.line>f&&(b={from:b.from,to:mb(f,Qf(a,f).text.length),text:[b.text[0]],origin:b.origin}),b.removed=Rf(a,b.from,b.to),c||(c=Nd(a,b)),a.cm?Wd(a.cm,b,d):Hf(a,b,d),Ib(a,c,Dg)}}function Wd(a,b,c){var d=a.doc,e=a.display,f=b.from,g=b.to,h=!1,i=f.line;a.options.lineWrapping||(i=Uf(af(Qf(d,f.line))),d.iter(i,g.line+1,function(a){return a==e.maxLine?(h=!0,!0):void 0})),d.sel.contains(b.from,b.to)>-1&&yg(a),Hf(d,b,c,B(a)),a.options.lineWrapping||(d.iter(i,f.line+b.text.length,function(a){var b=H(a);b>e.maxLineLength&&(e.maxLine=a,e.maxLineLength=b,e.maxLineChanged=!0,h=!1)}),h&&(a.curOp.updateMaxLine=!0)),d.frontier=Math.min(d.frontier,f.line),Tb(a,400);var j=b.text.length-(g.line-f.line)-1;f.line!=g.line||1!=b.text.length||Gf(a.doc,b)?Pc(a,f.line,g.line+1,j):Qc(a,f.line,"text");var k=zg(a,"changes"),l=zg(a,"change");if(l||k){var m={from:f,to:g,text:b.text,removed:b.removed,origin:b.origin};l&&vg(a,"change",a,m),k&&(a.curOp.changeObjs||(a.curOp.changeObjs=[])).push(m)}a.display.selForContextMenu=null}function Xd(a,b,c,d,e){if(d||(d=c),nb(d,c)<0){var f=d;d=c,c=f}"string"==typeof b&&(b=rh(b)),Rd(a,{from:c,to:d,text:b,origin:e})}function Yd(a,b){if(!xg(a,"scrollCursorIntoView")){var c=a.display,d=c.sizer.getBoundingClientRect(),e=null;if(b.top+d.top<0?e=!0:b.bottom+d.top>(window.innerHeight||document.documentElement.clientHeight)&&(e=!1),null!=e&&!m){var f=Yg("div","\u200b",null,"position: absolute; top: "+(b.top-c.viewOffset-Xb(a.display))+"px; height: "+(b.bottom-b.top+Bg)+"px; left: "+b.left+"px; width: 2px;");a.display.lineSpace.appendChild(f),f.scrollIntoView(e),a.display.lineSpace.removeChild(f)}}}function Zd(a,b,c,d){null==d&&(d=0);for(var e=0;5>e;e++){var f=!1,g=qc(a,b),h=c&&c!=b?qc(a,c):g,i=_d(a,Math.min(g.left,h.left),Math.min(g.top,h.top)-d,Math.max(g.left,h.left),Math.max(g.bottom,h.bottom)+d),j=a.doc.scrollTop,k=a.doc.scrollLeft;if(null!=i.scrollTop&&(rd(a,i.scrollTop),Math.abs(a.doc.scrollTop-j)>1&&(f=!0)),null!=i.scrollLeft&&(sd(a,i.scrollLeft),Math.abs(a.doc.scrollLeft-k)>1&&(f=!0)),!f)return g}}function $d(a,b,c,d,e){var f=_d(a,b,c,d,e);null!=f.scrollTop&&rd(a,f.scrollTop),null!=f.scrollLeft&&sd(a,f.scrollLeft)}function _d(a,b,c,d,e){var f=a.display,g=wc(a.display);0>c&&(c=0);var h=a.curOp&&null!=a.curOp.scrollTop?a.curOp.scrollTop:f.scroller.scrollTop,i=f.scroller.clientHeight-Bg,j={};e-c>i&&(e=c+i);var k=a.doc.height+Yb(f),l=g>c,m=e>k-g;if(h>c)j.scrollTop=l?0:c;else if(e>h+i){var n=Math.min(c,(m?k:e)-i);n!=h&&(j.scrollTop=n)}var o=a.curOp&&null!=a.curOp.scrollLeft?a.curOp.scrollLeft:f.scroller.scrollLeft,p=f.scroller.clientWidth-Bg-f.gutters.offsetWidth,q=d-b>p;return q&&(d=b+p),10>b?j.scrollLeft=0:o>b?j.scrollLeft=Math.max(0,b-(q?0:10)):d>p+o-3&&(j.scrollLeft=d+(q?0:10)-p),j}function ae(a,b,c){(null!=b||null!=c)&&ce(a),null!=b&&(a.curOp.scrollLeft=(null==a.curOp.scrollLeft?a.doc.scrollLeft:a.curOp.scrollLeft)+b),null!=c&&(a.curOp.scrollTop=(null==a.curOp.scrollTop?a.doc.scrollTop:a.curOp.scrollTop)+c)}function be(a){ce(a);var b=a.getCursor(),c=b,d=b;a.options.lineWrapping||(c=b.ch?mb(b.line,b.ch-1):b,d=mb(b.line,b.ch+1)),a.curOp.scrollToPos={from:c,to:d,margin:a.options.cursorScrollMargin,isCursor:!0}}function ce(a){var b=a.curOp.scrollToPos;if(b){a.curOp.scrollToPos=null;var c=rc(a,b.from),d=rc(a,b.to),e=_d(a,Math.min(c.left,d.left),Math.min(c.top,d.top)-b.margin,Math.max(c.right,d.right),Math.max(c.bottom,d.bottom)+b.margin);a.scrollTo(e.scrollLeft,e.scrollTop)}}function de(a,b,c,d){var f,e=a.doc;null==c&&(c="add"),"smart"==c&&(e.mode.indent?f=Wb(a,b):c="prev");var g=a.options.tabSize,h=Qf(e,b),i=Hg(h.text,null,g);h.stateAfter&&(h.stateAfter=null);var k,j=h.text.match(/^\s*/)[0];if(d||/\S/.test(h.text)){if("smart"==c&&(k=e.mode.indent(f,h.text.slice(j.length),h.text),k==Cg||k>150)){if(!d)return;c="prev"}}else k=0,c="not";"prev"==c?k=b>e.first?Hg(Qf(e,b-1).text,null,g):0:"add"==c?k=i+a.options.indentUnit:"subtract"==c?k=i-a.options.indentUnit:"number"==typeof c&&(k=i+c),k=Math.max(0,k);var l="",m=0;if(a.options.indentWithTabs)for(var n=Math.floor(k/g);n;--n)m+=g,l+="	";if(k>m&&(l+=Kg(k-m)),l!=j)Xd(e,l,mb(b,0),mb(b,j.length),"+input");else for(var n=0;n<e.sel.ranges.length;n++){var o=e.sel.ranges[n];if(o.head.line==b&&o.head.ch<j.length){var m=mb(b,j.length);Db(e,n,new sb(m,m));break}}h.stateAfter=null}function ee(a,b,c,d){var e=b,f=b;return"number"==typeof b?f=Qf(a,vb(a,b)):e=Uf(b),null==e?null:(d(f,e)&&a.cm&&Qc(a.cm,e,c),f)}function fe(a,b){for(var c=a.doc.sel.ranges,d=[],e=0;e<c.length;e++){for(var f=b(c[e]);d.length&&nb(f.from,Lg(d).to)<=0;){var g=d.pop();if(nb(g.from,f.from)<0){f.from=g.from;break}}d.push(f)}Jc(a,function(){for(var b=d.length-1;b>=0;b--)Xd(a.doc,"",d[b].from,d[b].to,"+delete");be(a)})}function ge(a,b,c,d,e){function k(){var b=f+c;return b<a.first||b>=a.first+a.size?j=!1:(f=b,i=Qf(a,b))}function l(a){var b=(e?Jh:Kh)(i,g,c,!0);if(null==b){if(a||!k())return j=!1;g=e?(0>c?Bh:Ah)(i):0>c?i.text.length:0}else g=b;return!0}var f=b.line,g=b.ch,h=c,i=Qf(a,f),j=!0;if("char"==d)l();else if("column"==d)l(!0);else if("word"==d||"group"==d)for(var m=null,n="group"==d,o=a.cm&&a.cm.getHelper(b,"wordChars"),p=!0;!(0>c)||l(!p);p=!1){var q=i.text.charAt(g)||"\n",r=Ug(q,o)?"w":n&&"\n"==q?"n":!n||/\s/.test(q)?null:"p";if(!n||p||r||(r="s"),m&&m!=r){0>c&&(c=1,l());break}if(r&&(m=r),c>0&&!l(!p))break}var s=Mb(a,mb(f,g),h,!0);return j||(s.hitSide=!0),s}function he(a,b,c,d){var g,e=a.doc,f=b.left;if("page"==d){var h=Math.min(a.display.wrapper.clientHeight,window.innerHeight||document.documentElement.clientHeight);g=b.top+c*(h-(0>c?1.5:.5)*wc(a.display))}else"line"==d&&(g=c>0?b.bottom+3:b.top-3);for(;;){var i=tc(a,f,g);if(!i.outside)break;if(0>c?0>=g:g>=e.height){i.hitSide=!0;break}g+=5*c}return i}function ke(a,b,c,d){w.defaults[a]=b,c&&(je[a]=d?function(a,b,d){d!=le&&c(a,b,d)}:c)}function ve(a){for(var c,d,e,f,b=a.split(/-(?!$)/),a=b[b.length-1],g=0;g<b.length-1;g++){var h=b[g];if(/^(cmd|meta|m)$/i.test(h))f=!0;else if(/^a(lt)?$/i.test(h))c=!0;else if(/^(c|ctrl|control)$/i.test(h))d=!0;else{if(!/^s(hift)$/i.test(h))throw new Error("Unrecognized modifier name: "+h);e=!0}}return c&&(a="Alt-"+a),d&&(a="Ctrl-"+a),f&&(a="Cmd-"+a),e&&(a="Shift-"+a),a}function ze(a){return"string"==typeof a?ue[a]:a}function De(a,b,c,d,e){if(d&&d.shared)return Fe(a,b,c,d,e);if(a.cm&&!a.cm.curOp)return Kc(a.cm,De)(a,b,c,d,e);var f=new Be(a,e),g=nb(b,c);if(d&&Qg(d,f,!1),g>0||0==g&&f.clearWhenEmpty!==!1)return f;if(f.replacedWith&&(f.collapsed=!0,f.widgetNode=Yg("span",[f.replacedWith],"CodeMirror-widget"),d.handleMouseEvents||(f.widgetNode.ignoreEvents=!0),d.insertLeft&&(f.widgetNode.insertLeft=!0)),f.collapsed){if(_e(a,b.line,b,c,f)||b.line!=c.line&&_e(a,c.line,b,c,f))throw new Error("Inserting collapsed marker partially overlapping an existing one");
-v=!0}f.addToHistory&&ag(a,{from:b,to:c,origin:"markText"},a.sel,0/0);var j,h=b.line,i=a.cm;if(a.iter(h,c.line+1,function(a){i&&f.collapsed&&!i.options.lineWrapping&&af(a)==i.display.maxLine&&(j=!0),f.collapsed&&h!=b.line&&Tf(a,0),Me(a,new Je(f,h==b.line?b.ch:null,h==c.line?c.ch:null)),++h}),f.collapsed&&a.iter(b.line,c.line+1,function(b){ef(a,b)&&Tf(b,0)}),f.clearOnEnter&&rg(f,"beforeCursorEnter",function(){f.clear()}),f.readOnly&&(u=!0,(a.history.done.length||a.history.undone.length)&&a.clearHistory()),f.collapsed&&(f.id=++Ce,f.atomic=!0),i){if(j&&(i.curOp.updateMaxLine=!0),f.collapsed)Pc(i,b.line,c.line+1);else if(f.className||f.title||f.startStyle||f.endStyle)for(var k=b.line;k<=c.line;k++)Qc(i,k,"text");f.atomic&&Kb(i.doc),vg(i,"markerAdded",i,f)}return f}function Fe(a,b,c,d,e){d=Qg(d),d.shared=!1;var f=[De(a,b,c,d,e)],g=f[0],h=d.widgetNode;return Of(a,function(a){h&&(d.widgetNode=h.cloneNode(!0)),f.push(De(a,wb(a,b),wb(a,c),d,e));for(var i=0;i<a.linked.length;++i)if(a.linked[i].isParent)return;g=Lg(f)}),new Ee(f,g)}function Ge(a){return a.findMarks(mb(a.first,0),a.clipPos(mb(a.lastLine())),function(a){return a.parent})}function He(a,b){for(var c=0;c<b.length;c++){var d=b[c],e=d.find(),f=a.clipPos(e.from),g=a.clipPos(e.to);if(nb(f,g)){var h=De(a,f,g,d.primary,d.primary.type);d.markers.push(h),h.parent=d}}}function Ie(a){for(var b=0;b<a.length;b++){var c=a[b],d=[c.primary.doc];Of(c.primary.doc,function(a){d.push(a)});for(var e=0;e<c.markers.length;e++){var f=c.markers[e];-1==Ng(d,f.doc)&&(f.parent=null,c.markers.splice(e--,1))}}}function Je(a,b,c){this.marker=a,this.from=b,this.to=c}function Ke(a,b){if(a)for(var c=0;c<a.length;++c){var d=a[c];if(d.marker==b)return d}}function Le(a,b){for(var c,d=0;d<a.length;++d)a[d]!=b&&(c||(c=[])).push(a[d]);return c}function Me(a,b){a.markedSpans=a.markedSpans?a.markedSpans.concat([b]):[b],b.marker.attachLine(a)}function Ne(a,b,c){if(a)for(var e,d=0;d<a.length;++d){var f=a[d],g=f.marker,h=null==f.from||(g.inclusiveLeft?f.from<=b:f.from<b);if(h||f.from==b&&"bookmark"==g.type&&(!c||!f.marker.insertLeft)){var i=null==f.to||(g.inclusiveRight?f.to>=b:f.to>b);(e||(e=[])).push(new Je(g,f.from,i?null:f.to))}}return e}function Oe(a,b,c){if(a)for(var e,d=0;d<a.length;++d){var f=a[d],g=f.marker,h=null==f.to||(g.inclusiveRight?f.to>=b:f.to>b);if(h||f.from==b&&"bookmark"==g.type&&(!c||f.marker.insertLeft)){var i=null==f.from||(g.inclusiveLeft?f.from<=b:f.from<b);(e||(e=[])).push(new Je(g,i?null:f.from-b,null==f.to?null:f.to-b))}}return e}function Pe(a,b){var c=yb(a,b.from.line)&&Qf(a,b.from.line).markedSpans,d=yb(a,b.to.line)&&Qf(a,b.to.line).markedSpans;if(!c&&!d)return null;var e=b.from.ch,f=b.to.ch,g=0==nb(b.from,b.to),h=Ne(c,e,g),i=Oe(d,f,g),j=1==b.text.length,k=Lg(b.text).length+(j?e:0);if(h)for(var l=0;l<h.length;++l){var m=h[l];if(null==m.to){var n=Ke(i,m.marker);n?j&&(m.to=null==n.to?null:n.to+k):m.to=e}}if(i)for(var l=0;l<i.length;++l){var m=i[l];if(null!=m.to&&(m.to+=k),null==m.from){var n=Ke(h,m.marker);n||(m.from=k,j&&(h||(h=[])).push(m))}else m.from+=k,j&&(h||(h=[])).push(m)}h&&(h=Qe(h)),i&&i!=h&&(i=Qe(i));var o=[h];if(!j){var q,p=b.text.length-2;if(p>0&&h)for(var l=0;l<h.length;++l)null==h[l].to&&(q||(q=[])).push(new Je(h[l].marker,null,null));for(var l=0;p>l;++l)o.push(q);o.push(i)}return o}function Qe(a){for(var b=0;b<a.length;++b){var c=a[b];null!=c.from&&c.from==c.to&&c.marker.clearWhenEmpty!==!1&&a.splice(b--,1)}return a.length?a:null}function Re(a,b){var c=gg(a,b),d=Pe(a,b);if(!c)return d;if(!d)return c;for(var e=0;e<c.length;++e){var f=c[e],g=d[e];if(f&&g)a:for(var h=0;h<g.length;++h){for(var i=g[h],j=0;j<f.length;++j)if(f[j].marker==i.marker)continue a;f.push(i)}else g&&(c[e]=g)}return c}function Se(a,b,c){var d=null;if(a.iter(b.line,c.line+1,function(a){if(a.markedSpans)for(var b=0;b<a.markedSpans.length;++b){var c=a.markedSpans[b].marker;!c.readOnly||d&&-1!=Ng(d,c)||(d||(d=[])).push(c)}}),!d)return null;for(var e=[{from:b,to:c}],f=0;f<d.length;++f)for(var g=d[f],h=g.find(0),i=0;i<e.length;++i){var j=e[i];if(!(nb(j.to,h.from)<0||nb(j.from,h.to)>0)){var k=[i,1],l=nb(j.from,h.from),m=nb(j.to,h.to);(0>l||!g.inclusiveLeft&&!l)&&k.push({from:j.from,to:h.from}),(m>0||!g.inclusiveRight&&!m)&&k.push({from:h.to,to:j.to}),e.splice.apply(e,k),i+=k.length-1}}return e}function Te(a){var b=a.markedSpans;if(b){for(var c=0;c<b.length;++c)b[c].marker.detachLine(a);a.markedSpans=null}}function Ue(a,b){if(b){for(var c=0;c<b.length;++c)b[c].marker.attachLine(a);a.markedSpans=b}}function Ve(a){return a.inclusiveLeft?-1:0}function We(a){return a.inclusiveRight?1:0}function Xe(a,b){var c=a.lines.length-b.lines.length;if(0!=c)return c;var d=a.find(),e=b.find(),f=nb(d.from,e.from)||Ve(a)-Ve(b);if(f)return-f;var g=nb(d.to,e.to)||We(a)-We(b);return g?g:b.id-a.id}function Ye(a,b){var d,c=v&&a.markedSpans;if(c)for(var e,f=0;f<c.length;++f)e=c[f],e.marker.collapsed&&null==(b?e.from:e.to)&&(!d||Xe(d,e.marker)<0)&&(d=e.marker);return d}function Ze(a){return Ye(a,!0)}function $e(a){return Ye(a,!1)}function _e(a,b,c,d,e){var f=Qf(a,b),g=v&&f.markedSpans;if(g)for(var h=0;h<g.length;++h){var i=g[h];if(i.marker.collapsed){var j=i.marker.find(0),k=nb(j.from,c)||Ve(i.marker)-Ve(e),l=nb(j.to,d)||We(i.marker)-We(e);if(!(k>=0&&0>=l||0>=k&&l>=0)&&(0>=k&&(nb(j.to,c)>0||i.marker.inclusiveRight&&e.inclusiveLeft)||k>=0&&(nb(j.from,d)<0||i.marker.inclusiveLeft&&e.inclusiveRight)))return!0}}}function af(a){for(var b;b=Ze(a);)a=b.find(-1,!0).line;return a}function bf(a){for(var b,c;b=$e(a);)a=b.find(1,!0).line,(c||(c=[])).push(a);return c}function cf(a,b){var c=Qf(a,b),d=af(c);return c==d?b:Uf(d)}function df(a,b){if(b>a.lastLine())return b;var d,c=Qf(a,b);if(!ef(a,c))return b;for(;d=$e(c);)c=d.find(1,!0).line;return Uf(c)+1}function ef(a,b){var c=v&&b.markedSpans;if(c)for(var d,e=0;e<c.length;++e)if(d=c[e],d.marker.collapsed){if(null==d.from)return!0;if(!d.marker.widgetNode&&0==d.from&&d.marker.inclusiveLeft&&ff(a,b,d))return!0}}function ff(a,b,c){if(null==c.to){var d=c.marker.find(1,!0);return ff(a,d.line,Ke(d.line.markedSpans,c.marker))}if(c.marker.inclusiveRight&&c.to==b.text.length)return!0;for(var e,f=0;f<b.markedSpans.length;++f)if(e=b.markedSpans[f],e.marker.collapsed&&!e.marker.widgetNode&&e.from==c.to&&(null==e.to||e.to!=c.from)&&(e.marker.inclusiveLeft||c.marker.inclusiveRight)&&ff(a,b,e))return!0}function hf(a,b,c){Wf(b)<(a.curOp&&a.curOp.scrollTop||a.doc.scrollTop)&&ae(a,null,c)}function jf(a){if(null!=a.height)return a.height;if(!ah(document.body,a.node)){var b="position: relative;";a.coverGutter&&(b+="margin-left: -"+a.cm.getGutterElement().offsetWidth+"px;"),_g(a.cm.display.measure,Yg("div",[a.node],null,b))}return a.height=a.node.offsetHeight}function kf(a,b,c,d){var e=new gf(a,c,d);return e.noHScroll&&(a.display.alignWidgets=!0),ee(a.doc,b,"widget",function(b){var c=b.widgets||(b.widgets=[]);if(null==e.insertAt?c.push(e):c.splice(Math.min(c.length-1,Math.max(0,e.insertAt)),0,e),e.line=b,!ef(a.doc,b)){var d=Wf(b)<a.doc.scrollTop;Tf(b,b.height+jf(e)),d&&ae(a,null,e.height),a.curOp.forceUpdate=!0}return!0}),e}function mf(a,b,c,d){a.text=b,a.stateAfter&&(a.stateAfter=null),a.styles&&(a.styles=null),null!=a.order&&(a.order=null),Te(a),Ue(a,c);var e=d?d(a):1;e!=a.height&&Tf(a,e)}function nf(a){a.parent=null,Te(a)}function of(a,b){if(a)for(;;){var c=a.match(/(?:^|\s+)line-(background-)?(\S+)/);if(!c)break;a=a.slice(0,c.index)+a.slice(c.index+c[0].length);var d=c[1]?"bgClass":"textClass";null==b[d]?b[d]=c[2]:new RegExp("(?:^|s)"+c[2]+"(?:$|s)").test(b[d])||(b[d]+=" "+c[2])}return a}function pf(a,b){if(a.blankLine)return a.blankLine(b);if(a.innerMode){var c=w.innerMode(a,b);return c.mode.blankLine?c.mode.blankLine(c.state):void 0}}function qf(a,b,c,d){for(var e=0;10>e;e++){d&&(d[0]=w.innerMode(a,c).mode);var f=a.token(b,c);if(b.pos>b.start)return f}throw new Error("Mode "+a.name+" failed to advance stream.")}function rf(a,b,c,d){function e(a){return{start:k.start,end:k.pos,string:k.current(),type:h||null,state:a?re(f.mode,j):j}}var h,f=a.doc,g=f.mode;b=wb(f,b);var l,i=Qf(f,b.line),j=Wb(a,b.line,c),k=new Ae(i.text,a.options.tabSize);for(d&&(l=[]);(d||k.pos<b.ch)&&!k.eol();)k.start=k.pos,h=qf(g,k,j),d&&l.push(e(!0));return d?l:e()}function sf(a,b,c,d,e,f,g){var h=c.flattenSpans;null==h&&(h=a.options.flattenSpans);var l,i=0,j=null,k=new Ae(b,a.options.tabSize),m=a.options.addModeClass&&[null];for(""==b&&of(pf(c,d),f);!k.eol();){if(k.pos>a.options.maxHighlightLength?(h=!1,g&&vf(a,b,d,k.pos),k.pos=b.length,l=null):l=of(qf(c,k,d,m),f),m){var n=m[0].name;n&&(l="m-"+(l?n+" "+l:n))}h&&j==l||(i<k.start&&e(k.start,j),i=k.start,j=l),k.start=k.pos}for(;i<k.pos;){var o=Math.min(k.pos,i+5e4);e(o,j),i=o}}function tf(a,b,c,d){var e=[a.state.modeGen],f={};sf(a,b.text,a.doc.mode,c,function(a,b){e.push(a,b)},f,d);for(var g=0;g<a.state.overlays.length;++g){var h=a.state.overlays[g],i=1,j=0;sf(a,b.text,h.mode,!0,function(a,b){for(var c=i;a>j;){var d=e[i];d>a&&e.splice(i,1,a,e[i+1],d),i+=2,j=Math.min(a,d)}if(b)if(h.opaque)e.splice(c,i-c,a,"cm-overlay "+b),i=c+2;else for(;i>c;c+=2){var f=e[c+1];e[c+1]=(f?f+" ":"")+"cm-overlay "+b}},f)}return{styles:e,classes:f.bgClass||f.textClass?f:null}}function uf(a,b,c){if(!b.styles||b.styles[0]!=a.state.modeGen){var d=tf(a,b,b.stateAfter=Wb(a,Uf(b)));b.styles=d.styles,d.classes?b.styleClasses=d.classes:b.styleClasses&&(b.styleClasses=null),c===a.doc.frontier&&a.doc.frontier++}return b.styles}function vf(a,b,c,d){var e=a.doc.mode,f=new Ae(b,a.options.tabSize);for(f.start=f.pos=d||0,""==b&&pf(e,c);!f.eol()&&f.pos<=a.options.maxHighlightLength;)qf(e,f,c),f.start=f.pos}function yf(a,b){if(!a||/^\s*$/.test(a))return null;var c=b.addModeClass?xf:wf;return c[a]||(c[a]=a.replace(/\S+/g,"cm-$&"))}function zf(a,b){var c=Yg("span",null,null,f?"padding-right: .1px":null),e={pre:Yg("pre",[c]),content:c,col:0,pos:0,cm:a};b.measure={};for(var g=0;g<=(b.rest?b.rest.length:0);g++){var i,h=g?b.rest[g-1]:b.line;e.pos=0,e.addToken=Bf,(d||f)&&a.getOption("lineWrapping")&&(e.addToken=Cf(e.addToken)),qh(a.display.measure)&&(i=Xf(h))&&(e.addToken=Df(e.addToken,i)),e.map=[];var j=b!=a.display.externalMeasured&&Uf(h);Ff(h,e,uf(a,h,j)),h.styleClasses&&(h.styleClasses.bgClass&&(e.bgClass=fh(h.styleClasses.bgClass,e.bgClass||"")),h.styleClasses.textClass&&(e.textClass=fh(h.styleClasses.textClass,e.textClass||""))),0==e.map.length&&e.map.push(0,0,e.content.appendChild(oh(a.display.measure))),0==g?(b.measure.map=e.map,b.measure.cache={}):((b.measure.maps||(b.measure.maps=[])).push(e.map),(b.measure.caches||(b.measure.caches=[])).push({}))}return f&&/\bcm-tab\b/.test(e.content.lastChild.className)&&(e.content.className="cm-tab-wrap-hack"),tg(a,"renderLine",a,b.line,e.pre),e.pre.className&&(e.textClass=fh(e.pre.className,e.textClass||"")),e}function Af(a){var b=Yg("span","\u2022","cm-invalidchar");return b.title="\\u"+a.charCodeAt(0).toString(16),b}function Bf(a,b,c,f,g,h){if(b){var i=a.cm.options.specialChars,j=!1;if(i.test(b))for(var k=document.createDocumentFragment(),l=0;;){i.lastIndex=l;var m=i.exec(b),n=m?m.index-l:b.length-l;if(n){var o=document.createTextNode(b.slice(l,l+n));d&&9>e?k.appendChild(Yg("span",[o])):k.appendChild(o),a.map.push(a.pos,a.pos+n,o),a.col+=n,a.pos+=n}if(!m)break;if(l+=n+1,"	"==m[0]){var p=a.cm.options.tabSize,q=p-a.col%p,o=k.appendChild(Yg("span",Kg(q),"cm-tab"));a.col+=q}else{var o=a.cm.options.specialCharPlaceholder(m[0]);d&&9>e?k.appendChild(Yg("span",[o])):k.appendChild(o),a.col+=1}a.map.push(a.pos,a.pos+1,o),a.pos++}else{a.col+=b.length;var k=document.createTextNode(b);a.map.push(a.pos,a.pos+b.length,k),d&&9>e&&(j=!0),a.pos+=b.length}if(c||f||g||j){var r=c||"";f&&(r+=f),g&&(r+=g);var s=Yg("span",[k],r);return h&&(s.title=h),a.content.appendChild(s)}a.content.appendChild(k)}}function Cf(a){function b(a){for(var b=" ",c=0;c<a.length-2;++c)b+=c%2?" ":"\xa0";return b+=" "}return function(c,d,e,f,g,h){a(c,d.replace(/ {3,}/g,b),e,f,g,h)}}function Df(a,b){return function(c,d,e,f,g,h){e=e?e+" cm-force-border":"cm-force-border";for(var i=c.pos,j=i+d.length;;){for(var k=0;k<b.length;k++){var l=b[k];if(l.to>i&&l.from<=i)break}if(l.to>=j)return a(c,d,e,f,g,h);a(c,d.slice(0,l.to-i),e,f,null,h),f=null,d=d.slice(l.to-i),i=l.to}}}function Ef(a,b,c,d){var e=!d&&c.widgetNode;e&&(a.map.push(a.pos,a.pos+b,e),a.content.appendChild(e)),a.pos+=b}function Ff(a,b,c){var d=a.markedSpans,e=a.text,f=0;if(d)for(var k,m,n,o,p,q,h=e.length,i=0,g=1,j="",l=0;;){if(l==i){m=n=o=p="",q=null,l=1/0;for(var r=[],s=0;s<d.length;++s){var t=d[s],u=t.marker;t.from<=i&&(null==t.to||t.to>i)?(null!=t.to&&l>t.to&&(l=t.to,n=""),u.className&&(m+=" "+u.className),u.startStyle&&t.from==i&&(o+=" "+u.startStyle),u.endStyle&&t.to==l&&(n+=" "+u.endStyle),u.title&&!p&&(p=u.title),u.collapsed&&(!q||Xe(q.marker,u)<0)&&(q=t)):t.from>i&&l>t.from&&(l=t.from),"bookmark"==u.type&&t.from==i&&u.widgetNode&&r.push(u)}if(q&&(q.from||0)==i&&(Ef(b,(null==q.to?h+1:q.to)-i,q.marker,null==q.from),null==q.to))return;if(!q&&r.length)for(var s=0;s<r.length;++s)Ef(b,0,r[s])}if(i>=h)break;for(var v=Math.min(h,l);;){if(j){var w=i+j.length;if(!q){var x=w>v?j.slice(0,v-i):j;b.addToken(b,x,k?k+m:m,o,i+x.length==l?n:"",p)}if(w>=v){j=j.slice(v-i),i=v;break}i=w,o=""}j=e.slice(f,f=c[g++]),k=yf(c[g++],b.cm.options)}}else for(var g=1;g<c.length;g+=2)b.addToken(b,e.slice(f,f=c[g]),yf(c[g+1],b.cm.options))}function Gf(a,b){return 0==b.from.ch&&0==b.to.ch&&""==Lg(b.text)&&(!a.cm||a.cm.options.wholeLineUpdateBefore)}function Hf(a,b,c,d){function e(a){return c?c[a]:null}function f(a,c,e){mf(a,c,e,d),vg(a,"change",a,b)}var g=b.from,h=b.to,i=b.text,j=Qf(a,g.line),k=Qf(a,h.line),l=Lg(i),m=e(i.length-1),n=h.line-g.line;if(Gf(a,b)){for(var o=0,p=[];o<i.length-1;++o)p.push(new lf(i[o],e(o),d));f(k,k.text,m),n&&a.remove(g.line,n),p.length&&a.insert(g.line,p)}else if(j==k)if(1==i.length)f(j,j.text.slice(0,g.ch)+l+j.text.slice(h.ch),m);else{for(var p=[],o=1;o<i.length-1;++o)p.push(new lf(i[o],e(o),d));p.push(new lf(l+j.text.slice(h.ch),m,d)),f(j,j.text.slice(0,g.ch)+i[0],e(0)),a.insert(g.line+1,p)}else if(1==i.length)f(j,j.text.slice(0,g.ch)+i[0]+k.text.slice(h.ch),e(0)),a.remove(g.line+1,n);else{f(j,j.text.slice(0,g.ch)+i[0],e(0)),f(k,l+k.text.slice(h.ch),m);for(var o=1,p=[];o<i.length-1;++o)p.push(new lf(i[o],e(o),d));n>1&&a.remove(g.line+1,n-1),a.insert(g.line+1,p)}vg(a,"change",a,b)}function If(a){this.lines=a,this.parent=null;for(var b=0,c=0;b<a.length;++b)a[b].parent=this,c+=a[b].height;this.height=c}function Jf(a){this.children=a;for(var b=0,c=0,d=0;d<a.length;++d){var e=a[d];b+=e.chunkSize(),c+=e.height,e.parent=this}this.size=b,this.height=c,this.parent=null}function Of(a,b,c){function d(a,e,f){if(a.linked)for(var g=0;g<a.linked.length;++g){var h=a.linked[g];if(h.doc!=e){var i=f&&h.sharedHist;(!c||i)&&(b(h.doc,i),d(h.doc,a,i))}}}d(a,null,!0)}function Pf(a,b){if(b.cm)throw new Error("This document is already in use.");a.doc=b,b.cm=a,C(a),y(a),a.options.lineWrapping||I(a),a.options.mode=b.modeOption,Pc(a)}function Qf(a,b){if(b-=a.first,0>b||b>=a.size)throw new Error("There is no line "+(b+a.first)+" in the document.");for(var c=a;!c.lines;)for(var d=0;;++d){var e=c.children[d],f=e.chunkSize();if(f>b){c=e;break}b-=f}return c.lines[b]}function Rf(a,b,c){var d=[],e=b.line;return a.iter(b.line,c.line+1,function(a){var f=a.text;e==c.line&&(f=f.slice(0,c.ch)),e==b.line&&(f=f.slice(b.ch)),d.push(f),++e}),d}function Sf(a,b,c){var d=[];return a.iter(b,c,function(a){d.push(a.text)}),d}function Tf(a,b){var c=b-a.height;if(c)for(var d=a;d;d=d.parent)d.height+=c}function Uf(a){if(null==a.parent)return null;for(var b=a.parent,c=Ng(b.lines,a),d=b.parent;d;b=d,d=d.parent)for(var e=0;d.children[e]!=b;++e)c+=d.children[e].chunkSize();return c+b.first}function Vf(a,b){var c=a.first;a:do{for(var d=0;d<a.children.length;++d){var e=a.children[d],f=e.height;if(f>b){a=e;continue a}b-=f,c+=e.chunkSize()}return c}while(!a.lines);for(var d=0;d<a.lines.length;++d){var g=a.lines[d],h=g.height;if(h>b)break;b-=h}return c+d}function Wf(a){a=af(a);for(var b=0,c=a.parent,d=0;d<c.lines.length;++d){var e=c.lines[d];if(e==a)break;b+=e.height}for(var f=c.parent;f;c=f,f=c.parent)for(var d=0;d<f.children.length;++d){var g=f.children[d];if(g==c)break;b+=g.height}return b}function Xf(a){var b=a.order;return null==b&&(b=a.order=Lh(a.text)),b}function Yf(a){this.done=[],this.undone=[],this.undoDepth=1/0,this.lastModTime=this.lastSelTime=0,this.lastOp=this.lastSelOp=null,this.lastOrigin=this.lastSelOrigin=null,this.generation=this.maxGeneration=a||1}function Zf(a,b){var c={from:ob(b.from),to:Ld(b),text:Rf(a,b.from,b.to)};return eg(a,c,b.from.line,b.to.line+1),Of(a,function(a){eg(a,c,b.from.line,b.to.line+1)},!0),c}function $f(a){for(;a.length;){var b=Lg(a);if(!b.ranges)break;a.pop()}}function _f(a,b){return b?($f(a.done),Lg(a.done)):a.done.length&&!Lg(a.done).ranges?Lg(a.done):a.done.length>1&&!a.done[a.done.length-2].ranges?(a.done.pop(),Lg(a.done)):void 0}function ag(a,b,c,d){var e=a.history;e.undone.length=0;var g,f=+new Date;if((e.lastOp==d||e.lastOrigin==b.origin&&b.origin&&("+"==b.origin.charAt(0)&&a.cm&&e.lastModTime>f-a.cm.options.historyEventDelay||"*"==b.origin.charAt(0)))&&(g=_f(e,e.lastOp==d))){var h=Lg(g.changes);0==nb(b.from,b.to)&&0==nb(b.from,h.to)?h.to=Ld(b):g.changes.push(Zf(a,b))}else{var i=Lg(e.done);for(i&&i.ranges||dg(a.sel,e.done),g={changes:[Zf(a,b)],generation:e.generation},e.done.push(g);e.done.length>e.undoDepth;)e.done.shift(),e.done[0].ranges||e.done.shift()}e.done.push(c),e.generation=++e.maxGeneration,e.lastModTime=e.lastSelTime=f,e.lastOp=e.lastSelOp=d,e.lastOrigin=e.lastSelOrigin=b.origin,h||tg(a,"historyAdded")}function bg(a,b,c,d){var e=b.charAt(0);return"*"==e||"+"==e&&c.ranges.length==d.ranges.length&&c.somethingSelected()==d.somethingSelected()&&new Date-a.history.lastSelTime<=(a.cm?a.cm.options.historyEventDelay:500)}function cg(a,b,c,d){var e=a.history,f=d&&d.origin;c==e.lastSelOp||f&&e.lastSelOrigin==f&&(e.lastModTime==e.lastSelTime&&e.lastOrigin==f||bg(a,f,Lg(e.done),b))?e.done[e.done.length-1]=b:dg(b,e.done),e.lastSelTime=+new Date,e.lastSelOrigin=f,e.lastSelOp=c,d&&d.clearRedo!==!1&&$f(e.undone)}function dg(a,b){var c=Lg(b);c&&c.ranges&&c.equals(a)||b.push(a)}function eg(a,b,c,d){var e=b["spans_"+a.id],f=0;a.iter(Math.max(a.first,c),Math.min(a.first+a.size,d),function(c){c.markedSpans&&((e||(e=b["spans_"+a.id]={}))[f]=c.markedSpans),++f})}function fg(a){if(!a)return null;for(var c,b=0;b<a.length;++b)a[b].marker.explicitlyCleared?c||(c=a.slice(0,b)):c&&c.push(a[b]);return c?c.length?c:null:a}function gg(a,b){var c=b["spans_"+a.id];if(!c)return null;for(var d=0,e=[];d<b.text.length;++d)e.push(fg(c[d]));return e}function hg(a,b,c){for(var d=0,e=[];d<a.length;++d){var f=a[d];if(f.ranges)e.push(c?rb.prototype.deepCopy.call(f):f);else{var g=f.changes,h=[];e.push({changes:h});for(var i=0;i<g.length;++i){var k,j=g[i];if(h.push({from:j.from,to:j.to,text:j.text}),b)for(var l in j)(k=l.match(/^spans_(\d+)$/))&&Ng(b,Number(k[1]))>-1&&(Lg(h)[l]=j[l],delete j[l])}}}return e}function ig(a,b,c,d){c<a.line?a.line+=d:b<a.line&&(a.line=b,a.ch=0)}function jg(a,b,c,d){for(var e=0;e<a.length;++e){var f=a[e],g=!0;if(f.ranges){f.copied||(f=a[e]=f.deepCopy(),f.copied=!0);for(var h=0;h<f.ranges.length;h++)ig(f.ranges[h].anchor,b,c,d),ig(f.ranges[h].head,b,c,d)}else{for(var h=0;h<f.changes.length;++h){var i=f.changes[h];if(c<i.from.line)i.from=mb(i.from.line+d,i.from.ch),i.to=mb(i.to.line+d,i.to.ch);else if(b<=i.to.line){g=!1;break}}g||(a.splice(0,e+1),e=0)}}}function kg(a,b){var c=b.from.line,d=b.to.line,e=b.text.length-(d-c)-1;jg(a.done,c,d,e),jg(a.undone,c,d,e)}function ng(a){return null!=a.defaultPrevented?a.defaultPrevented:0==a.returnValue}function pg(a){return a.target||a.srcElement}function qg(a){var b=a.which;return null==b&&(1&a.button?b=1:2&a.button?b=3:4&a.button&&(b=2)),p&&a.ctrlKey&&1==b&&(b=3),b}function vg(a,b){function f(a){return function(){a.apply(null,d)}}var c=a._handlers&&a._handlers[b];if(c){var e,d=Array.prototype.slice.call(arguments,2);yc?e=yc.delayedCallbacks:ug?e=ug:(e=ug=[],setTimeout(wg,0));for(var g=0;g<c.length;++g)e.push(f(c[g]))}}function wg(){var a=ug;ug=null;for(var b=0;b<a.length;++b)a[b]()}function xg(a,b,c){return"string"==typeof b&&(b={type:b,preventDefault:function(){this.defaultPrevented=!0}}),tg(a,c||b.type,a,b),ng(b)||b.codemirrorIgnore}function yg(a){var b=a._handlers&&a._handlers.cursorActivity;if(b)for(var c=a.curOp.cursorActivityHandlers||(a.curOp.cursorActivityHandlers=[]),d=0;d<b.length;++d)-1==Ng(c,b[d])&&c.push(b[d])}function zg(a,b){var c=a._handlers&&a._handlers[b];return c&&c.length>0}function Ag(a){a.prototype.on=function(a,b){rg(this,a,b)},a.prototype.off=function(a,b){sg(this,a,b)}}function Gg(){this.id=null}function Ig(a,b,c){for(var d=0,e=0;;){var f=a.indexOf("	",d);-1==f&&(f=a.length);var g=f-d;if(f==a.length||e+g>=b)return d+Math.min(g,b-e);if(e+=f-d,e+=c-e%c,d=f+1,e>=b)return d}}function Kg(a){for(;Jg.length<=a;)Jg.push(Lg(Jg)+" ");return Jg[a]}function Lg(a){return a[a.length-1]}function Ng(a,b){for(var c=0;c<a.length;++c)if(a[c]==b)return c;return-1}function Og(a,b){for(var c=[],d=0;d<a.length;d++)c[d]=b(a[d],d);return c}function Pg(a,b){var c;if(Object.create)c=Object.create(a);else{var d=function(){};d.prototype=a,c=new d}return b&&Qg(b,c),c}function Qg(a,b,c){b||(b={});for(var d in a)!a.hasOwnProperty(d)||c===!1&&b.hasOwnProperty(d)||(b[d]=a[d]);return b}function Rg(a){var b=Array.prototype.slice.call(arguments,1);return function(){return a.apply(null,b)}}function Ug(a,b){return b?b.source.indexOf("\\w")>-1&&Tg(a)?!0:b.test(a):Tg(a)}function Vg(a){for(var b in a)if(a.hasOwnProperty(b)&&a[b])return!1;return!0}function Xg(a){return a.charCodeAt(0)>=768&&Wg.test(a)}function Yg(a,b,c,d){var e=document.createElement(a);if(c&&(e.className=c),d&&(e.style.cssText=d),"string"==typeof b)e.appendChild(document.createTextNode(b));else if(b)for(var f=0;f<b.length;++f)e.appendChild(b[f]);return e}function $g(a){for(var b=a.childNodes.length;b>0;--b)a.removeChild(a.firstChild);return a}function _g(a,b){return $g(a).appendChild(b)}function ah(a,b){if(a.contains)return a.contains(b);for(;b=b.parentNode;)if(b==a)return!0}function bh(){return document.activeElement}function ch(a){return new RegExp("(^|\\s)"+a+"(?:$|\\s)\\s*")}function fh(a,b){for(var c=a.split(" "),d=0;d<c.length;d++)c[d]&&!ch(c[d]).test(b)&&(b+=" "+c[d]);return b}function gh(a){if(document.body.getElementsByClassName)for(var b=document.body.getElementsByClassName("CodeMirror"),c=0;c<b.length;c++){var d=b[c].CodeMirror;d&&a(d)}}function ih(){hh||(jh(),hh=!0)}function jh(){var a;rg(window,"resize",function(){null==a&&(a=setTimeout(function(){a=null,lh=null,gh(dd)},100))}),rg(window,"blur",function(){gh(Id)})}function mh(a){if(null!=lh)return lh;var b=Yg("div",null,null,"width: 50px; height: 50px; overflow-x: scroll");return _g(a,b),b.offsetWidth&&(lh=b.offsetHeight-b.clientHeight),lh||0}function oh(a){if(null==nh){var b=Yg("span","\u200b");_g(a,Yg("span",[b,document.createTextNode("x")])),0!=a.firstChild.offsetHeight&&(nh=b.offsetWidth<=1&&b.offsetHeight>2&&!(d&&8>e))}return nh?Yg("span","\u200b"):Yg("span","\xa0",null,"display: inline-block; width: 1px; margin-right: -1px")}function qh(a){if(null!=ph)return ph;var b=_g(a,document.createTextNode("A\u062eA")),c=Zg(b,0,1).getBoundingClientRect();if(!c||c.left==c.right)return!1;var d=Zg(b,1,2).getBoundingClientRect();return ph=d.right-c.right<3}function vh(a){if(null!=uh)return uh;var b=_g(a,Yg("span","x")),c=b.getBoundingClientRect(),d=Zg(b,0,1).getBoundingClientRect();return uh=Math.abs(c.left-d.left)>1}function xh(a,b,c,d){if(!a)return d(b,c,"ltr");for(var e=!1,f=0;f<a.length;++f){var g=a[f];(g.from<c&&g.to>b||b==c&&g.to==b)&&(d(Math.max(g.from,b),Math.min(g.to,c),1==g.level?"rtl":"ltr"),e=!0)}e||d(b,c,"ltr")}function yh(a){return a.level%2?a.to:a.from}function zh(a){return a.level%2?a.from:a.to}function Ah(a){var b=Xf(a);return b?yh(b[0]):0}function Bh(a){var b=Xf(a);return b?zh(Lg(b)):a.text.length}function Ch(a,b){var c=Qf(a.doc,b),d=af(c);d!=c&&(b=Uf(d));var e=Xf(d),f=e?e[0].level%2?Bh(d):Ah(d):0;return mb(b,f)}function Dh(a,b){for(var c,d=Qf(a.doc,b);c=$e(d);)d=c.find(1,!0).line,b=null;var e=Xf(d),f=e?e[0].level%2?Ah(d):Bh(d):d.text.length;return mb(null==b?Uf(d):b,f)}function Eh(a,b){var c=Ch(a,b.line),d=Qf(a.doc,c.line),e=Xf(d);if(!e||0==e[0].level){var f=Math.max(0,d.text.search(/\S/)),g=b.line==c.line&&b.ch<=f&&b.ch;return mb(c.line,g?0:f)}return c}function Fh(a,b,c){var d=a[0].level;return b==d?!0:c==d?!1:c>b}function Hh(a,b){Gh=null;for(var d,c=0;c<a.length;++c){var e=a[c];if(e.from<b&&e.to>b)return c;if(e.from==b||e.to==b){if(null!=d)return Fh(a,e.level,a[d].level)?(e.from!=e.to&&(Gh=d),c):(e.from!=e.to&&(Gh=c),d);d=c}}return d}function Ih(a,b,c,d){if(!d)return b+c;do b+=c;while(b>0&&Xg(a.text.charAt(b)));return b}function Jh(a,b,c,d){var e=Xf(a);if(!e)return Kh(a,b,c,d);for(var f=Hh(e,b),g=e[f],h=Ih(a,b,g.level%2?-c:c,d);;){if(h>g.from&&h<g.to)return h;if(h==g.from||h==g.to)return Hh(e,h)==f?h:(g=e[f+=c],c>0==g.level%2?g.to:g.from);if(g=e[f+=c],!g)return null;h=c>0==g.level%2?Ih(a,g.to,-1,d):Ih(a,g.from,1,d)}}function Kh(a,b,c,d){var e=b+c;if(d)for(;e>0&&Xg(a.text.charAt(e));)e+=c;return 0>e||e>a.text.length?null:e}var a=/gecko\/\d/i.test(navigator.userAgent),b=/MSIE \d/.test(navigator.userAgent),c=/Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent),d=b||c,e=d&&(b?document.documentMode||6:c[1]),f=/WebKit\//.test(navigator.userAgent),g=f&&/Qt\/\d+\.\d+/.test(navigator.userAgent),h=/Chrome\//.test(navigator.userAgent),i=/Opera\//.test(navigator.userAgent),j=/Apple Computer/.test(navigator.vendor),k=/KHTML\//.test(navigator.userAgent),l=/Mac OS X 1\d\D([8-9]|\d\d)\D/.test(navigator.userAgent),m=/PhantomJS/.test(navigator.userAgent),n=/AppleWebKit/.test(navigator.userAgent)&&/Mobile\/\w+/.test(navigator.userAgent),o=n||/Android|webOS|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(navigator.userAgent),p=n||/Mac/.test(navigator.platform),q=/win/i.test(navigator.platform),r=i&&navigator.userAgent.match(/Version\/(\d*\.\d*)/);r&&(r=Number(r[1])),r&&r>=15&&(i=!1,f=!0);var s=p&&(g||i&&(null==r||12.11>r)),t=a||d&&e>=9,u=!1,v=!1,mb=w.Pos=function(a,b){return this instanceof mb?(this.line=a,this.ch=b,void 0):new mb(a,b)},nb=w.cmpPos=function(a,b){return a.line-b.line||a.ch-b.ch};rb.prototype={primary:function(){return this.ranges[this.primIndex]},equals:function(a){if(a==this)return!0;if(a.primIndex!=this.primIndex||a.ranges.length!=this.ranges.length)return!1;for(var b=0;b<this.ranges.length;b++){var c=this.ranges[b],d=a.ranges[b];if(0!=nb(c.anchor,d.anchor)||0!=nb(c.head,d.head))return!1}return!0},deepCopy:function(){for(var a=[],b=0;b<this.ranges.length;b++)a[b]=new sb(ob(this.ranges[b].anchor),ob(this.ranges[b].head));return new rb(a,this.primIndex)},somethingSelected:function(){for(var a=0;a<this.ranges.length;a++)if(!this.ranges[a].empty())return!0;return!1},contains:function(a,b){b||(b=a);for(var c=0;c<this.ranges.length;c++){var d=this.ranges[c];if(nb(b,d.from())>=0&&nb(a,d.to())<=0)return c}return-1}},sb.prototype={from:function(){return qb(this.anchor,this.head)},to:function(){return pb(this.anchor,this.head)},empty:function(){return this.head.line==this.anchor.line&&this.head.ch==this.anchor.ch}};var vc,hd,id,fc={left:0,right:0,top:0,bottom:0},yc=null,zc=0,Yc=null,od=0,td=0,ud=null;d?ud=-.53:a?ud=15:h?ud=-.7:j&&(ud=-1/3);var yd=new Gg,Cd=null,Ld=w.changeEnd=function(a){return a.text?mb(a.from.line+a.text.length-1,Lg(a.text).length+(1==a.text.length?a.from.ch:0)):a.to};w.prototype={constructor:w,focus:function(){window.focus(),_c(this),Xc(this)},setOption:function(a,b){var c=this.options,d=c[a];(c[a]!=b||"mode"==a)&&(c[a]=b,je.hasOwnProperty(a)&&Kc(this,je[a])(this,b,d))},getOption:function(a){return this.options[a]},getDoc:function(){return this.doc},addKeyMap:function(a,b){this.state.keyMaps[b?"push":"unshift"](ze(a))},removeKeyMap:function(a){for(var b=this.state.keyMaps,c=0;c<b.length;++c)if(b[c]==a||b[c].name==a)return b.splice(c,1),!0},addOverlay:Lc(function(a,b){var c=a.token?a:w.getMode(this.options,a);if(c.startState)throw new Error("Overlays may not be stateful.");this.state.overlays.push({mode:c,modeSpec:a,opaque:b&&b.opaque}),this.state.modeGen++,Pc(this)}),removeOverlay:Lc(function(a){for(var b=this.state.overlays,c=0;c<b.length;++c){var d=b[c].modeSpec;if(d==a||"string"==typeof a&&d.name==a)return b.splice(c,1),this.state.modeGen++,Pc(this),void 0}}),indentLine:Lc(function(a,b,c){"string"!=typeof b&&"number"!=typeof b&&(b=null==b?this.options.smartIndent?"smart":"prev":b?"add":"subtract"),yb(this.doc,a)&&de(this,a,b,c)}),indentSelection:Lc(function(a){for(var b=this.doc.sel.ranges,c=-1,d=0;d<b.length;d++){var e=b[d];if(e.empty())e.head.line>c&&(de(this,e.head.line,a,!0),c=e.head.line,d==this.doc.sel.primIndex&&be(this));else{var f=e.from(),g=e.to(),h=Math.max(c,f.line);c=Math.min(this.lastLine(),g.line-(g.ch?0:1))+1;for(var i=h;c>i;++i)de(this,i,a);var j=this.doc.sel.ranges;0==f.ch&&b.length==j.length&&j[d].from().ch>0&&Db(this.doc,d,new sb(f,j[d].to()),Dg)}}}),getTokenAt:function(a,b){return rf(this,a,b)},getLineTokens:function(a,b){return rf(this,mb(a),b,!0)},getTokenTypeAt:function(a){a=wb(this.doc,a);var f,b=uf(this,Qf(this.doc,a.line)),c=0,d=(b.length-1)/2,e=a.ch;if(0==e)f=b[2];else for(;;){var g=c+d>>1;if((g?b[2*g-1]:0)>=e)d=g;else{if(!(b[2*g+1]<e)){f=b[2*g+2];break}c=g+1}}var h=f?f.indexOf("cm-overlay "):-1;return 0>h?f:0==h?null:f.slice(0,h-1)},getModeAt:function(a){var b=this.doc.mode;return b.innerMode?w.innerMode(b,this.getTokenAt(a).state).mode:b},getHelper:function(a,b){return this.getHelpers(a,b)[0]},getHelpers:function(a,b){var c=[];if(!qe.hasOwnProperty(b))return qe;var d=qe[b],e=this.getModeAt(a);if("string"==typeof e[b])d[e[b]]&&c.push(d[e[b]]);else if(e[b])for(var f=0;f<e[b].length;f++){var g=d[e[b][f]];g&&c.push(g)}else e.helperType&&d[e.helperType]?c.push(d[e.helperType]):d[e.name]&&c.push(d[e.name]);for(var f=0;f<d._global.length;f++){var h=d._global[f];h.pred(e,this)&&-1==Ng(c,h.val)&&c.push(h.val)}return c},getStateAfter:function(a,b){var c=this.doc;return a=vb(c,null==a?c.first+c.size-1:a),Wb(this,a+1,b)},cursorCoords:function(a,b){var c,d=this.doc.sel.primary();return c=null==a?d.head:"object"==typeof a?wb(this.doc,a):a?d.from():d.to(),qc(this,c,b||"page")},charCoords:function(a,b){return pc(this,wb(this.doc,a),b||"page")},coordsChar:function(a,b){return a=oc(this,a,b||"page"),tc(this,a.left,a.top)},lineAtHeight:function(a,b){return a=oc(this,{top:a,left:0},b||"page").top,Vf(this.doc,a+this.display.viewOffset)},heightAtLine:function(a,b){var c=!1,d=this.doc.first+this.doc.size-1;a<this.doc.first?a=this.doc.first:a>d&&(a=d,c=!0);var e=Qf(this.doc,a);return nc(this,e,{top:0,left:0},b||"page").top+(c?this.doc.height-Wf(e):0)},defaultTextHeight:function(){return wc(this.display)},defaultCharWidth:function(){return xc(this.display)},setGutterMarker:Lc(function(a,b,c){return ee(this.doc,a,"gutter",function(a){var d=a.gutterMarkers||(a.gutterMarkers={});return d[b]=c,!c&&Vg(d)&&(a.gutterMarkers=null),!0})}),clearGutter:Lc(function(a){var b=this,c=b.doc,d=c.first;c.iter(function(c){c.gutterMarkers&&c.gutterMarkers[a]&&(c.gutterMarkers[a]=null,Qc(b,d,"gutter"),Vg(c.gutterMarkers)&&(c.gutterMarkers=null)),++d})}),addLineWidget:Lc(function(a,b,c){return kf(this,a,b,c)}),removeLineWidget:function(a){a.clear()},lineInfo:function(a){if("number"==typeof a){if(!yb(this.doc,a))return null;var b=a;if(a=Qf(this.doc,a),!a)return null}else{var b=Uf(a);if(null==b)return null}return{line:b,handle:a,text:a.text,gutterMarkers:a.gutterMarkers,textClass:a.textClass,bgClass:a.bgClass,wrapClass:a.wrapClass,widgets:a.widgets}},getViewport:function(){return{from:this.display.viewFrom,to:this.display.viewTo}},addWidget:function(a,b,c,d,e){var f=this.display;a=qc(this,wb(this.doc,a));var g=a.bottom,h=a.left;if(b.style.position="absolute",f.sizer.appendChild(b),"over"==d)g=a.top;else if("above"==d||"near"==d){var i=Math.max(f.wrapper.clientHeight,this.doc.height),j=Math.max(f.sizer.clientWidth,f.lineSpace.clientWidth);
-("above"==d||a.bottom+b.offsetHeight>i)&&a.top>b.offsetHeight?g=a.top-b.offsetHeight:a.bottom+b.offsetHeight<=i&&(g=a.bottom),h+b.offsetWidth>j&&(h=j-b.offsetWidth)}b.style.top=g+"px",b.style.left=b.style.right="","right"==e?(h=f.sizer.clientWidth-b.offsetWidth,b.style.right="0px"):("left"==e?h=0:"middle"==e&&(h=(f.sizer.clientWidth-b.offsetWidth)/2),b.style.left=h+"px"),c&&$d(this,h,g,h+b.offsetWidth,g+b.offsetHeight)},triggerOnKeyDown:Lc(Dd),triggerOnKeyPress:Lc(Gd),triggerOnKeyUp:Fd,execCommand:function(a){return te.hasOwnProperty(a)?te[a](this):void 0},findPosH:function(a,b,c,d){var e=1;0>b&&(e=-1,b=-b);for(var f=0,g=wb(this.doc,a);b>f&&(g=ge(this.doc,g,e,c,d),!g.hitSide);++f);return g},moveH:Lc(function(a,b){var c=this;c.extendSelectionsBy(function(d){return c.display.shift||c.doc.extend||d.empty()?ge(c.doc,d.head,a,b,c.options.rtlMoveVisually):0>a?d.from():d.to()},Fg)}),deleteH:Lc(function(a,b){var c=this.doc.sel,d=this.doc;c.somethingSelected()?d.replaceSelection("",null,"+delete"):fe(this,function(c){var e=ge(d,c.head,a,b,!1);return 0>a?{from:e,to:c.head}:{from:c.head,to:e}})}),findPosV:function(a,b,c,d){var e=1,f=d;0>b&&(e=-1,b=-b);for(var g=0,h=wb(this.doc,a);b>g;++g){var i=qc(this,h,"div");if(null==f?f=i.left:i.left=f,h=he(this,i,e,c),h.hitSide)break}return h},moveV:Lc(function(a,b){var c=this,d=this.doc,e=[],f=!c.display.shift&&!d.extend&&d.sel.somethingSelected();if(d.extendSelectionsBy(function(g){if(f)return 0>a?g.from():g.to();var h=qc(c,g.head,"div");null!=g.goalColumn&&(h.left=g.goalColumn),e.push(h.left);var i=he(c,h,a,b);return"page"==b&&g==d.sel.primary()&&ae(c,null,pc(c,i,"div").top-h.top),i},Fg),e.length)for(var g=0;g<d.sel.ranges.length;g++)d.sel.ranges[g].goalColumn=e[g]}),findWordAt:function(a){var b=this.doc,c=Qf(b,a.line).text,d=a.ch,e=a.ch;if(c){var f=this.getHelper(a,"wordChars");(a.xRel<0||e==c.length)&&d?--d:++e;for(var g=c.charAt(d),h=Ug(g,f)?function(a){return Ug(a,f)}:/\s/.test(g)?function(a){return/\s/.test(a)}:function(a){return!/\s/.test(a)&&!Ug(a)};d>0&&h(c.charAt(d-1));)--d;for(;e<c.length&&h(c.charAt(e));)++e}return new sb(mb(a.line,d),mb(a.line,e))},toggleOverwrite:function(a){(null==a||a!=this.state.overwrite)&&((this.state.overwrite=!this.state.overwrite)?eh(this.display.cursorDiv,"CodeMirror-overwrite"):dh(this.display.cursorDiv,"CodeMirror-overwrite"),tg(this,"overwriteToggle",this,this.state.overwrite))},hasFocus:function(){return bh()==this.display.input},scrollTo:Lc(function(a,b){(null!=a||null!=b)&&ce(this),null!=a&&(this.curOp.scrollLeft=a),null!=b&&(this.curOp.scrollTop=b)}),getScrollInfo:function(){var a=this.display.scroller,b=Bg;return{left:a.scrollLeft,top:a.scrollTop,height:a.scrollHeight-b,width:a.scrollWidth-b,clientHeight:a.clientHeight-b,clientWidth:a.clientWidth-b}},scrollIntoView:Lc(function(a,b){if(null==a?(a={from:this.doc.sel.primary().head,to:null},null==b&&(b=this.options.cursorScrollMargin)):"number"==typeof a?a={from:mb(a,0),to:null}:null==a.from&&(a={from:a,to:null}),a.to||(a.to=a.from),a.margin=b||0,null!=a.from.line)ce(this),this.curOp.scrollToPos=a;else{var c=_d(this,Math.min(a.from.left,a.to.left),Math.min(a.from.top,a.to.top)-a.margin,Math.max(a.from.right,a.to.right),Math.max(a.from.bottom,a.to.bottom)+a.margin);this.scrollTo(c.scrollLeft,c.scrollTop)}}),setSize:Lc(function(a,b){function d(a){return"number"==typeof a||/^\d+$/.test(String(a))?a+"px":a}var c=this;null!=a&&(c.display.wrapper.style.width=d(a)),null!=b&&(c.display.wrapper.style.height=d(b)),c.options.lineWrapping&&jc(this);var e=c.display.viewFrom;c.doc.iter(e,c.display.viewTo,function(a){if(a.widgets)for(var b=0;b<a.widgets.length;b++)if(a.widgets[b].noHScroll){Qc(c,e,"widget");break}++e}),c.curOp.forceUpdate=!0,tg(c,"refresh",this)}),operation:function(a){return Jc(this,a)},refresh:Lc(function(){var a=this.display.cachedTextHeight;Pc(this),this.curOp.forceUpdate=!0,kc(this),this.scrollTo(this.doc.scrollLeft,this.doc.scrollTop),G(this),(null==a||Math.abs(a-wc(this.display))>.5)&&C(this),tg(this,"refresh",this)}),swapDoc:Lc(function(a){var b=this.doc;return b.cm=null,Pf(this,a),kc(this),$c(this),this.scrollTo(a.scrollLeft,a.scrollTop),this.curOp.forceScroll=!0,vg(this,"swapDoc",this,b),b}),getInputField:function(){return this.display.input},getWrapperElement:function(){return this.display.wrapper},getScrollerElement:function(){return this.display.scroller},getGutterElement:function(){return this.display.gutters}},Ag(w);var ie=w.defaults={},je=w.optionHandlers={},le=w.Init={toString:function(){return"CodeMirror.Init"}};ke("value","",function(a,b){a.setValue(b)},!0),ke("mode",null,function(a,b){a.doc.modeOption=b,y(a)},!0),ke("indentUnit",2,y,!0),ke("indentWithTabs",!1),ke("smartIndent",!0),ke("tabSize",4,function(a){z(a),kc(a),Pc(a)},!0),ke("specialChars",/[\t\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/g,function(a,b){a.options.specialChars=new RegExp(b.source+(b.test("	")?"":"|	"),"g"),a.refresh()},!0),ke("specialCharPlaceholder",Af,function(a){a.refresh()},!0),ke("electricChars",!0),ke("rtlMoveVisually",!q),ke("wholeLineUpdateBefore",!0),ke("theme","default",function(a){D(a),E(a)},!0),ke("keyMap","default",function(a,b,c){var d=ze(b),e=c!=w.Init&&ze(c);e&&e.detach&&e.detach(a,d),d.attach&&d.attach(a,e||null)}),ke("extraKeys",null),ke("lineWrapping",!1,A,!0),ke("gutters",[],function(a){J(a.options),E(a)},!0),ke("fixedGutter",!0,function(a,b){a.display.gutters.style.left=b?R(a.display)+"px":"0",a.refresh()},!0),ke("coverGutterNextToScrollbar",!1,M,!0),ke("lineNumbers",!1,function(a){J(a.options),E(a)},!0),ke("firstLineNumber",1,E,!0),ke("lineNumberFormatter",function(a){return a},E,!0),ke("showCursorWhenSelecting",!1,Pb,!0),ke("resetSelectionOnContextMenu",!0),ke("readOnly",!1,function(a,b){"nocursor"==b?(Id(a),a.display.input.blur(),a.display.disabled=!0):(a.display.disabled=!1,b||$c(a))}),ke("disableInput",!1,function(a,b){b||$c(a)},!0),ke("dragDrop",!0),ke("cursorBlinkRate",530),ke("cursorScrollMargin",0),ke("cursorHeight",1,Pb,!0),ke("singleCursorHeightPerLine",!0,Pb,!0),ke("workTime",100),ke("workDelay",100),ke("flattenSpans",!0,z,!0),ke("addModeClass",!1,z,!0),ke("pollInterval",100),ke("undoDepth",200,function(a,b){a.doc.history.undoDepth=b}),ke("historyEventDelay",1250),ke("viewportMargin",10,function(a){a.refresh()},!0),ke("maxHighlightLength",1e4,z,!0),ke("moveInputWithCursor",!0,function(a,b){b||(a.display.inputDiv.style.top=a.display.inputDiv.style.left=0)}),ke("tabindex",null,function(a,b){a.display.input.tabIndex=b||""}),ke("autofocus",null);var me=w.modes={},ne=w.mimeModes={};w.defineMode=function(a,b){w.defaults.mode||"null"==a||(w.defaults.mode=a),arguments.length>2&&(b.dependencies=Array.prototype.slice.call(arguments,2)),me[a]=b},w.defineMIME=function(a,b){ne[a]=b},w.resolveMode=function(a){if("string"==typeof a&&ne.hasOwnProperty(a))a=ne[a];else if(a&&"string"==typeof a.name&&ne.hasOwnProperty(a.name)){var b=ne[a.name];"string"==typeof b&&(b={name:b}),a=Pg(b,a),a.name=b.name}else if("string"==typeof a&&/^[\w\-]+\/[\w\-]+\+xml$/.test(a))return w.resolveMode("application/xml");return"string"==typeof a?{name:a}:a||{name:"null"}},w.getMode=function(a,b){var b=w.resolveMode(b),c=me[b.name];if(!c)return w.getMode(a,"text/plain");var d=c(a,b);if(oe.hasOwnProperty(b.name)){var e=oe[b.name];for(var f in e)e.hasOwnProperty(f)&&(d.hasOwnProperty(f)&&(d["_"+f]=d[f]),d[f]=e[f])}if(d.name=b.name,b.helperType&&(d.helperType=b.helperType),b.modeProps)for(var f in b.modeProps)d[f]=b.modeProps[f];return d},w.defineMode("null",function(){return{token:function(a){a.skipToEnd()}}}),w.defineMIME("text/plain","null");var oe=w.modeExtensions={};w.extendMode=function(a,b){var c=oe.hasOwnProperty(a)?oe[a]:oe[a]={};Qg(b,c)},w.defineExtension=function(a,b){w.prototype[a]=b},w.defineDocExtension=function(a,b){Lf.prototype[a]=b},w.defineOption=ke;var pe=[];w.defineInitHook=function(a){pe.push(a)};var qe=w.helpers={};w.registerHelper=function(a,b,c){qe.hasOwnProperty(a)||(qe[a]=w[a]={_global:[]}),qe[a][b]=c},w.registerGlobalHelper=function(a,b,c,d){w.registerHelper(a,b,d),qe[a]._global.push({pred:c,val:d})};var re=w.copyState=function(a,b){if(b===!0)return b;if(a.copyState)return a.copyState(b);var c={};for(var d in b){var e=b[d];e instanceof Array&&(e=e.concat([])),c[d]=e}return c},se=w.startState=function(a,b,c){return a.startState?a.startState(b,c):!0};w.innerMode=function(a,b){for(;a.innerMode;){var c=a.innerMode(b);if(!c||c.mode==a)break;b=c.state,a=c.mode}return c||{mode:a,state:b}};var te=w.commands={selectAll:function(a){a.setSelection(mb(a.firstLine(),0),mb(a.lastLine()),Dg)},singleSelection:function(a){a.setSelection(a.getCursor("anchor"),a.getCursor("head"),Dg)},killLine:function(a){fe(a,function(b){if(b.empty()){var c=Qf(a.doc,b.head.line).text.length;return b.head.ch==c&&b.head.line<a.lastLine()?{from:b.head,to:mb(b.head.line+1,0)}:{from:b.head,to:mb(b.head.line,c)}}return{from:b.from(),to:b.to()}})},deleteLine:function(a){fe(a,function(b){return{from:mb(b.from().line,0),to:wb(a.doc,mb(b.to().line+1,0))}})},delLineLeft:function(a){fe(a,function(a){return{from:mb(a.from().line,0),to:a.from()}})},delWrappedLineLeft:function(a){fe(a,function(b){var c=a.charCoords(b.head,"div").top+5,d=a.coordsChar({left:0,top:c},"div");return{from:d,to:b.from()}})},delWrappedLineRight:function(a){fe(a,function(b){var c=a.charCoords(b.head,"div").top+5,d=a.coordsChar({left:a.display.lineDiv.offsetWidth+100,top:c},"div");return{from:b.from(),to:d}})},undo:function(a){a.undo()},redo:function(a){a.redo()},undoSelection:function(a){a.undoSelection()},redoSelection:function(a){a.redoSelection()},goDocStart:function(a){a.extendSelection(mb(a.firstLine(),0))},goDocEnd:function(a){a.extendSelection(mb(a.lastLine()))},goLineStart:function(a){a.extendSelectionsBy(function(b){return Ch(a,b.head.line)},{origin:"+move",bias:1})},goLineStartSmart:function(a){a.extendSelectionsBy(function(b){return Eh(a,b.head)},{origin:"+move",bias:1})},goLineEnd:function(a){a.extendSelectionsBy(function(b){return Dh(a,b.head.line)},{origin:"+move",bias:-1})},goLineRight:function(a){a.extendSelectionsBy(function(b){var c=a.charCoords(b.head,"div").top+5;return a.coordsChar({left:a.display.lineDiv.offsetWidth+100,top:c},"div")},Fg)},goLineLeft:function(a){a.extendSelectionsBy(function(b){var c=a.charCoords(b.head,"div").top+5;return a.coordsChar({left:0,top:c},"div")},Fg)},goLineLeftSmart:function(a){a.extendSelectionsBy(function(b){var c=a.charCoords(b.head,"div").top+5,d=a.coordsChar({left:0,top:c},"div");return d.ch<a.getLine(d.line).search(/\S/)?Eh(a,b.head):d},Fg)},goLineUp:function(a){a.moveV(-1,"line")},goLineDown:function(a){a.moveV(1,"line")},goPageUp:function(a){a.moveV(-1,"page")},goPageDown:function(a){a.moveV(1,"page")},goCharLeft:function(a){a.moveH(-1,"char")},goCharRight:function(a){a.moveH(1,"char")},goColumnLeft:function(a){a.moveH(-1,"column")},goColumnRight:function(a){a.moveH(1,"column")},goWordLeft:function(a){a.moveH(-1,"word")},goGroupRight:function(a){a.moveH(1,"group")},goGroupLeft:function(a){a.moveH(-1,"group")},goWordRight:function(a){a.moveH(1,"word")},delCharBefore:function(a){a.deleteH(-1,"char")},delCharAfter:function(a){a.deleteH(1,"char")},delWordBefore:function(a){a.deleteH(-1,"word")},delWordAfter:function(a){a.deleteH(1,"word")},delGroupBefore:function(a){a.deleteH(-1,"group")},delGroupAfter:function(a){a.deleteH(1,"group")},indentAuto:function(a){a.indentSelection("smart")},indentMore:function(a){a.indentSelection("add")},indentLess:function(a){a.indentSelection("subtract")},insertTab:function(a){a.replaceSelection("	")},insertSoftTab:function(a){for(var b=[],c=a.listSelections(),d=a.options.tabSize,e=0;e<c.length;e++){var f=c[e].from(),g=Hg(a.getLine(f.line),f.ch,d);b.push(new Array(d-g%d+1).join(" "))}a.replaceSelections(b)},defaultTab:function(a){a.somethingSelected()?a.indentSelection("add"):a.execCommand("insertTab")},transposeChars:function(a){Jc(a,function(){for(var b=a.listSelections(),c=[],d=0;d<b.length;d++){var e=b[d].head,f=Qf(a.doc,e.line).text;if(f)if(e.ch==f.length&&(e=new mb(e.line,e.ch-1)),e.ch>0)e=new mb(e.line,e.ch+1),a.replaceRange(f.charAt(e.ch-1)+f.charAt(e.ch-2),mb(e.line,e.ch-2),e,"+transpose");else if(e.line>a.doc.first){var g=Qf(a.doc,e.line-1).text;g&&a.replaceRange(f.charAt(0)+"\n"+g.charAt(g.length-1),mb(e.line-1,g.length-1),mb(e.line,1),"+transpose")}c.push(new sb(e,e))}a.setSelections(c)})},newlineAndIndent:function(a){Jc(a,function(){for(var b=a.listSelections().length,c=0;b>c;c++){var d=a.listSelections()[c];a.replaceRange("\n",d.anchor,d.head,"+input"),a.indentLine(d.from().line+1,null,!0),be(a)}})},toggleOverwrite:function(a){a.toggleOverwrite()}},ue=w.keyMap={};ue.basic={Left:"goCharLeft",Right:"goCharRight",Up:"goLineUp",Down:"goLineDown",End:"goLineEnd",Home:"goLineStartSmart",PageUp:"goPageUp",PageDown:"goPageDown",Delete:"delCharAfter",Backspace:"delCharBefore","Shift-Backspace":"delCharBefore",Tab:"defaultTab","Shift-Tab":"indentAuto",Enter:"newlineAndIndent",Insert:"toggleOverwrite",Esc:"singleSelection"},ue.pcDefault={"Ctrl-A":"selectAll","Ctrl-D":"deleteLine","Ctrl-Z":"undo","Shift-Ctrl-Z":"redo","Ctrl-Y":"redo","Ctrl-Home":"goDocStart","Ctrl-End":"goDocEnd","Ctrl-Up":"goLineUp","Ctrl-Down":"goLineDown","Ctrl-Left":"goGroupLeft","Ctrl-Right":"goGroupRight","Alt-Left":"goLineStart","Alt-Right":"goLineEnd","Ctrl-Backspace":"delGroupBefore","Ctrl-Delete":"delGroupAfter","Ctrl-S":"save","Ctrl-F":"find","Ctrl-G":"findNext","Shift-Ctrl-G":"findPrev","Shift-Ctrl-F":"replace","Shift-Ctrl-R":"replaceAll","Ctrl-[":"indentLess","Ctrl-]":"indentMore","Ctrl-U":"undoSelection","Shift-Ctrl-U":"redoSelection","Alt-U":"redoSelection",fallthrough:"basic"},ue.emacsy={"Ctrl-F":"goCharRight","Ctrl-B":"goCharLeft","Ctrl-P":"goLineUp","Ctrl-N":"goLineDown","Alt-F":"goWordRight","Alt-B":"goWordLeft","Ctrl-A":"goLineStart","Ctrl-E":"goLineEnd","Ctrl-V":"goPageDown","Shift-Ctrl-V":"goPageUp","Ctrl-D":"delCharAfter","Ctrl-H":"delCharBefore","Alt-D":"delWordAfter","Alt-Backspace":"delWordBefore","Ctrl-K":"killLine","Ctrl-T":"transposeChars"},ue.macDefault={"Cmd-A":"selectAll","Cmd-D":"deleteLine","Cmd-Z":"undo","Shift-Cmd-Z":"redo","Cmd-Y":"redo","Cmd-Home":"goDocStart","Cmd-Up":"goDocStart","Cmd-End":"goDocEnd","Cmd-Down":"goDocEnd","Alt-Left":"goGroupLeft","Alt-Right":"goGroupRight","Cmd-Left":"goLineLeft","Cmd-Right":"goLineRight","Alt-Backspace":"delGroupBefore","Ctrl-Alt-Backspace":"delGroupAfter","Alt-Delete":"delGroupAfter","Cmd-S":"save","Cmd-F":"find","Cmd-G":"findNext","Shift-Cmd-G":"findPrev","Cmd-Alt-F":"replace","Shift-Cmd-Alt-F":"replaceAll","Cmd-[":"indentLess","Cmd-]":"indentMore","Cmd-Backspace":"delWrappedLineLeft","Cmd-Delete":"delWrappedLineRight","Cmd-U":"undoSelection","Shift-Cmd-U":"redoSelection","Ctrl-Up":"goDocStart","Ctrl-Down":"goDocEnd",fallthrough:["basic","emacsy"]},ue["default"]=p?ue.macDefault:ue.pcDefault,w.normalizeKeyMap=function(a){var b={};for(var c in a)if(a.hasOwnProperty(c)){var d=a[c];if(/^(name|fallthrough|(de|at)tach)$/.test(c))continue;if("..."==d){delete a[c];continue}for(var e=Og(c.split(" "),ve),f=0;f<e.length;f++){var g,h;f==e.length-1?(h=c,g=d):(h=e.slice(0,f+1).join(" "),g="...");var i=b[h];if(i){if(i!=g)throw new Error("Inconsistent bindings for "+h)}else b[h]=g}delete a[c]}for(var j in b)a[j]=b[j];return a};var we=w.lookupKey=function(a,b,c){b=ze(b);var d=b.call?b.call(a):b[a];if(d===!1)return"nothing";if("..."===d)return"multi";if(null!=d&&c(d))return"handled";if(b.fallthrough){if("[object Array]"!=Object.prototype.toString.call(b.fallthrough))return we(a,b.fallthrough,c);for(var e=0;e<b.fallthrough.length;e++){var f=we(a,b.fallthrough[e],c);if(f)return f}}},xe=w.isModifierKey=function(a){var b="string"==typeof a?a:wh[a.keyCode];return"Ctrl"==b||"Alt"==b||"Shift"==b||"Mod"==b},ye=w.keyName=function(a,b){if(i&&34==a.keyCode&&a["char"])return!1;var c=wh[a.keyCode],d=c;return null==d||a.altGraphKey?!1:(a.altKey&&"Alt"!=c&&(d="Alt-"+d),(s?a.metaKey:a.ctrlKey)&&"Ctrl"!=c&&(d="Ctrl-"+d),(s?a.ctrlKey:a.metaKey)&&"Cmd"!=c&&(d="Cmd-"+d),!b&&a.shiftKey&&"Shift"!=c&&(d="Shift-"+d),d)};w.fromTextArea=function(a,b){function d(){a.value=i.getValue()}if(b||(b={}),b.value=a.value,!b.tabindex&&a.tabindex&&(b.tabindex=a.tabindex),!b.placeholder&&a.placeholder&&(b.placeholder=a.placeholder),null==b.autofocus){var c=bh();b.autofocus=c==a||null!=a.getAttribute("autofocus")&&c==document.body}if(a.form&&(rg(a.form,"submit",d),!b.leaveSubmitMethodAlone)){var e=a.form,f=e.submit;try{var g=e.submit=function(){d(),e.submit=f,e.submit(),e.submit=g}}catch(h){}}a.style.display="none";var i=w(function(b){a.parentNode.insertBefore(b,a.nextSibling)},b);return i.save=d,i.getTextArea=function(){return a},i.toTextArea=function(){i.toTextArea=isNaN,d(),a.parentNode.removeChild(i.getWrapperElement()),a.style.display="",a.form&&(sg(a.form,"submit",d),"function"==typeof a.form.submit&&(a.form.submit=f))},i};var Ae=w.StringStream=function(a,b){this.pos=this.start=0,this.string=a,this.tabSize=b||8,this.lastColumnPos=this.lastColumnValue=0,this.lineStart=0};Ae.prototype={eol:function(){return this.pos>=this.string.length},sol:function(){return this.pos==this.lineStart},peek:function(){return this.string.charAt(this.pos)||void 0},next:function(){return this.pos<this.string.length?this.string.charAt(this.pos++):void 0},eat:function(a){var b=this.string.charAt(this.pos);if("string"==typeof a)var c=b==a;else var c=b&&(a.test?a.test(b):a(b));return c?(++this.pos,b):void 0},eatWhile:function(a){for(var b=this.pos;this.eat(a););return this.pos>b},eatSpace:function(){for(var a=this.pos;/[\s\u00a0]/.test(this.string.charAt(this.pos));)++this.pos;return this.pos>a},skipToEnd:function(){this.pos=this.string.length},skipTo:function(a){var b=this.string.indexOf(a,this.pos);return b>-1?(this.pos=b,!0):void 0},backUp:function(a){this.pos-=a},column:function(){return this.lastColumnPos<this.start&&(this.lastColumnValue=Hg(this.string,this.start,this.tabSize,this.lastColumnPos,this.lastColumnValue),this.lastColumnPos=this.start),this.lastColumnValue-(this.lineStart?Hg(this.string,this.lineStart,this.tabSize):0)},indentation:function(){return Hg(this.string,null,this.tabSize)-(this.lineStart?Hg(this.string,this.lineStart,this.tabSize):0)},match:function(a,b,c){if("string"!=typeof a){var f=this.string.slice(this.pos).match(a);return f&&f.index>0?null:(f&&b!==!1&&(this.pos+=f[0].length),f)}var d=function(a){return c?a.toLowerCase():a},e=this.string.substr(this.pos,a.length);return d(e)==d(a)?(b!==!1&&(this.pos+=a.length),!0):void 0},current:function(){return this.string.slice(this.start,this.pos)},hideFirstChars:function(a,b){this.lineStart+=a;try{return b()}finally{this.lineStart-=a}}};var Be=w.TextMarker=function(a,b){this.lines=[],this.type=b,this.doc=a};Ag(Be),Be.prototype.clear=function(){if(!this.explicitlyCleared){var a=this.doc.cm,b=a&&!a.curOp;if(b&&Ac(a),zg(this,"clear")){var c=this.find();c&&vg(this,"clear",c.from,c.to)}for(var d=null,e=null,f=0;f<this.lines.length;++f){var g=this.lines[f],h=Ke(g.markedSpans,this);a&&!this.collapsed?Qc(a,Uf(g),"text"):a&&(null!=h.to&&(e=Uf(g)),null!=h.from&&(d=Uf(g))),g.markedSpans=Le(g.markedSpans,h),null==h.from&&this.collapsed&&!ef(this.doc,g)&&a&&Tf(g,wc(a.display))}if(a&&this.collapsed&&!a.options.lineWrapping)for(var f=0;f<this.lines.length;++f){var i=af(this.lines[f]),j=H(i);j>a.display.maxLineLength&&(a.display.maxLine=i,a.display.maxLineLength=j,a.display.maxLineChanged=!0)}null!=d&&a&&this.collapsed&&Pc(a,d,e+1),this.lines.length=0,this.explicitlyCleared=!0,this.atomic&&this.doc.cantEdit&&(this.doc.cantEdit=!1,a&&Kb(a.doc)),a&&vg(a,"markerCleared",a,this),b&&Cc(a),this.parent&&this.parent.clear()}},Be.prototype.find=function(a,b){null==a&&"bookmark"==this.type&&(a=1);for(var c,d,e=0;e<this.lines.length;++e){var f=this.lines[e],g=Ke(f.markedSpans,this);if(null!=g.from&&(c=mb(b?f:Uf(f),g.from),-1==a))return c;if(null!=g.to&&(d=mb(b?f:Uf(f),g.to),1==a))return d}return c&&{from:c,to:d}},Be.prototype.changed=function(){var a=this.find(-1,!0),b=this,c=this.doc.cm;a&&c&&Jc(c,function(){var d=a.line,e=Uf(a.line),f=cc(c,e);if(f&&(ic(f),c.curOp.selectionChanged=c.curOp.forceUpdate=!0),c.curOp.updateMaxLine=!0,!ef(b.doc,d)&&null!=b.height){var g=b.height;b.height=null;var h=jf(b)-g;h&&Tf(d,d.height+h)}})},Be.prototype.attachLine=function(a){if(!this.lines.length&&this.doc.cm){var b=this.doc.cm.curOp;b.maybeHiddenMarkers&&-1!=Ng(b.maybeHiddenMarkers,this)||(b.maybeUnhiddenMarkers||(b.maybeUnhiddenMarkers=[])).push(this)}this.lines.push(a)},Be.prototype.detachLine=function(a){if(this.lines.splice(Ng(this.lines,a),1),!this.lines.length&&this.doc.cm){var b=this.doc.cm.curOp;(b.maybeHiddenMarkers||(b.maybeHiddenMarkers=[])).push(this)}};var Ce=0,Ee=w.SharedTextMarker=function(a,b){this.markers=a,this.primary=b;for(var c=0;c<a.length;++c)a[c].parent=this};Ag(Ee),Ee.prototype.clear=function(){if(!this.explicitlyCleared){this.explicitlyCleared=!0;for(var a=0;a<this.markers.length;++a)this.markers[a].clear();vg(this,"clear")}},Ee.prototype.find=function(a,b){return this.primary.find(a,b)};var gf=w.LineWidget=function(a,b,c){if(c)for(var d in c)c.hasOwnProperty(d)&&(this[d]=c[d]);this.cm=a,this.node=b};Ag(gf),gf.prototype.clear=function(){var a=this.cm,b=this.line.widgets,c=this.line,d=Uf(c);if(null!=d&&b){for(var e=0;e<b.length;++e)b[e]==this&&b.splice(e--,1);b.length||(c.widgets=null);var f=jf(this);Jc(a,function(){hf(a,c,-f),Qc(a,d,"widget"),Tf(c,Math.max(0,c.height-f))})}},gf.prototype.changed=function(){var a=this.height,b=this.cm,c=this.line;this.height=null;var d=jf(this)-a;d&&Jc(b,function(){b.curOp.forceUpdate=!0,hf(b,c,d),Tf(c,c.height+d)})};var lf=w.Line=function(a,b,c){this.text=a,Ue(this,b),this.height=c?c(this):1};Ag(lf),lf.prototype.lineNo=function(){return Uf(this)};var wf={},xf={};If.prototype={chunkSize:function(){return this.lines.length},removeInner:function(a,b){for(var c=a,d=a+b;d>c;++c){var e=this.lines[c];this.height-=e.height,nf(e),vg(e,"delete")}this.lines.splice(a,b)},collapse:function(a){a.push.apply(a,this.lines)},insertInner:function(a,b,c){this.height+=c,this.lines=this.lines.slice(0,a).concat(b).concat(this.lines.slice(a));for(var d=0;d<b.length;++d)b[d].parent=this},iterN:function(a,b,c){for(var d=a+b;d>a;++a)if(c(this.lines[a]))return!0}},Jf.prototype={chunkSize:function(){return this.size},removeInner:function(a,b){this.size-=b;for(var c=0;c<this.children.length;++c){var d=this.children[c],e=d.chunkSize();if(e>a){var f=Math.min(b,e-a),g=d.height;if(d.removeInner(a,f),this.height-=g-d.height,e==f&&(this.children.splice(c--,1),d.parent=null),0==(b-=f))break;a=0}else a-=e}if(this.size-b<25&&(this.children.length>1||!(this.children[0]instanceof If))){var h=[];this.collapse(h),this.children=[new If(h)],this.children[0].parent=this}},collapse:function(a){for(var b=0;b<this.children.length;++b)this.children[b].collapse(a)},insertInner:function(a,b,c){this.size+=b.length,this.height+=c;for(var d=0;d<this.children.length;++d){var e=this.children[d],f=e.chunkSize();if(f>=a){if(e.insertInner(a,b,c),e.lines&&e.lines.length>50){for(;e.lines.length>50;){var g=e.lines.splice(e.lines.length-25,25),h=new If(g);e.height-=h.height,this.children.splice(d+1,0,h),h.parent=this}this.maybeSpill()}break}a-=f}},maybeSpill:function(){if(!(this.children.length<=10)){var a=this;do{var b=a.children.splice(a.children.length-5,5),c=new Jf(b);if(a.parent){a.size-=c.size,a.height-=c.height;var e=Ng(a.parent.children,a);a.parent.children.splice(e+1,0,c)}else{var d=new Jf(a.children);d.parent=a,a.children=[d,c],a=d}c.parent=a.parent}while(a.children.length>10);a.parent.maybeSpill()}},iterN:function(a,b,c){for(var d=0;d<this.children.length;++d){var e=this.children[d],f=e.chunkSize();if(f>a){var g=Math.min(b,f-a);if(e.iterN(a,g,c))return!0;if(0==(b-=g))break;a=0}else a-=f}}};var Kf=0,Lf=w.Doc=function(a,b,c){if(!(this instanceof Lf))return new Lf(a,b,c);null==c&&(c=0),Jf.call(this,[new If([new lf("",null)])]),this.first=c,this.scrollTop=this.scrollLeft=0,this.cantEdit=!1,this.cleanGeneration=1,this.frontier=c;var d=mb(c,0);this.sel=ub(d),this.history=new Yf(null),this.id=++Kf,this.modeOption=b,"string"==typeof a&&(a=rh(a)),Hf(this,{from:d,to:d,text:a}),Hb(this,ub(d),Dg)};Lf.prototype=Pg(Jf.prototype,{constructor:Lf,iter:function(a,b,c){c?this.iterN(a-this.first,b-a,c):this.iterN(this.first,this.first+this.size,a)},insert:function(a,b){for(var c=0,d=0;d<b.length;++d)c+=b[d].height;this.insertInner(a-this.first,b,c)},remove:function(a,b){this.removeInner(a-this.first,b)},getValue:function(a){var b=Sf(this,this.first,this.first+this.size);return a===!1?b:b.join(a||"\n")},setValue:Mc(function(a){var b=mb(this.first,0),c=this.first+this.size-1;Rd(this,{from:b,to:mb(c,Qf(this,c).text.length),text:rh(a),origin:"setValue"},!0),Hb(this,ub(b))}),replaceRange:function(a,b,c,d){b=wb(this,b),c=c?wb(this,c):b,Xd(this,a,b,c,d)},getRange:function(a,b,c){var d=Rf(this,wb(this,a),wb(this,b));return c===!1?d:d.join(c||"\n")},getLine:function(a){var b=this.getLineHandle(a);return b&&b.text},getLineHandle:function(a){return yb(this,a)?Qf(this,a):void 0},getLineNumber:function(a){return Uf(a)},getLineHandleVisualStart:function(a){return"number"==typeof a&&(a=Qf(this,a)),af(a)},lineCount:function(){return this.size},firstLine:function(){return this.first},lastLine:function(){return this.first+this.size-1},clipPos:function(a){return wb(this,a)},getCursor:function(a){var c,b=this.sel.primary();return c=null==a||"head"==a?b.head:"anchor"==a?b.anchor:"end"==a||"to"==a||a===!1?b.to():b.from()},listSelections:function(){return this.sel.ranges},somethingSelected:function(){return this.sel.somethingSelected()},setCursor:Mc(function(a,b,c){Eb(this,wb(this,"number"==typeof a?mb(a,b||0):a),null,c)}),setSelection:Mc(function(a,b,c){Eb(this,wb(this,a),wb(this,b||a),c)}),extendSelection:Mc(function(a,b,c){Bb(this,wb(this,a),b&&wb(this,b),c)}),extendSelections:Mc(function(a,b){Cb(this,zb(this,a,b))}),extendSelectionsBy:Mc(function(a,b){Cb(this,Og(this.sel.ranges,a),b)}),setSelections:Mc(function(a,b,c){if(a.length){for(var d=0,e=[];d<a.length;d++)e[d]=new sb(wb(this,a[d].anchor),wb(this,a[d].head));null==b&&(b=Math.min(a.length-1,this.sel.primIndex)),Hb(this,tb(e,b),c)}}),addSelection:Mc(function(a,b,c){var d=this.sel.ranges.slice(0);d.push(new sb(wb(this,a),wb(this,b||a))),Hb(this,tb(d,d.length-1),c)}),getSelection:function(a){for(var c,b=this.sel.ranges,d=0;d<b.length;d++){var e=Rf(this,b[d].from(),b[d].to());c=c?c.concat(e):e}return a===!1?c:c.join(a||"\n")},getSelections:function(a){for(var b=[],c=this.sel.ranges,d=0;d<c.length;d++){var e=Rf(this,c[d].from(),c[d].to());a!==!1&&(e=e.join(a||"\n")),b[d]=e}return b},replaceSelection:function(a,b,c){for(var d=[],e=0;e<this.sel.ranges.length;e++)d[e]=a;this.replaceSelections(d,b,c||"+input")},replaceSelections:Mc(function(a,b,c){for(var d=[],e=this.sel,f=0;f<e.ranges.length;f++){var g=e.ranges[f];d[f]={from:g.from(),to:g.to(),text:rh(a[f]),origin:c}}for(var h=b&&"end"!=b&&Pd(this,d,b),f=d.length-1;f>=0;f--)Rd(this,d[f]);h?Gb(this,h):this.cm&&be(this.cm)}),undo:Mc(function(){Td(this,"undo")}),redo:Mc(function(){Td(this,"redo")}),undoSelection:Mc(function(){Td(this,"undo",!0)}),redoSelection:Mc(function(){Td(this,"redo",!0)}),setExtending:function(a){this.extend=a},getExtending:function(){return this.extend},historySize:function(){for(var a=this.history,b=0,c=0,d=0;d<a.done.length;d++)a.done[d].ranges||++b;for(var d=0;d<a.undone.length;d++)a.undone[d].ranges||++c;return{undo:b,redo:c}},clearHistory:function(){this.history=new Yf(this.history.maxGeneration)},markClean:function(){this.cleanGeneration=this.changeGeneration(!0)},changeGeneration:function(a){return a&&(this.history.lastOp=this.history.lastSelOp=this.history.lastOrigin=null),this.history.generation},isClean:function(a){return this.history.generation==(a||this.cleanGeneration)},getHistory:function(){return{done:hg(this.history.done),undone:hg(this.history.undone)}},setHistory:function(a){var b=this.history=new Yf(this.history.maxGeneration);b.done=hg(a.done.slice(0),null,!0),b.undone=hg(a.undone.slice(0),null,!0)},addLineClass:Mc(function(a,b,c){return ee(this,a,"gutter"==b?"gutter":"class",function(a){var d="text"==b?"textClass":"background"==b?"bgClass":"gutter"==b?"gutterClass":"wrapClass";if(a[d]){if(ch(c).test(a[d]))return!1;a[d]+=" "+c}else a[d]=c;return!0})}),removeLineClass:Mc(function(a,b,c){return ee(this,a,"class",function(a){var d="text"==b?"textClass":"background"==b?"bgClass":"gutter"==b?"gutterClass":"wrapClass",e=a[d];if(!e)return!1;if(null==c)a[d]=null;else{var f=e.match(ch(c));if(!f)return!1;var g=f.index+f[0].length;a[d]=e.slice(0,f.index)+(f.index&&g!=e.length?" ":"")+e.slice(g)||null}return!0})}),markText:function(a,b,c){return De(this,wb(this,a),wb(this,b),c,"range")},setBookmark:function(a,b){var c={replacedWith:b&&(null==b.nodeType?b.widget:b),insertLeft:b&&b.insertLeft,clearWhenEmpty:!1,shared:b&&b.shared};return a=wb(this,a),De(this,a,a,c,"bookmark")},findMarksAt:function(a){a=wb(this,a);var b=[],c=Qf(this,a.line).markedSpans;if(c)for(var d=0;d<c.length;++d){var e=c[d];(null==e.from||e.from<=a.ch)&&(null==e.to||e.to>=a.ch)&&b.push(e.marker.parent||e.marker)}return b},findMarks:function(a,b,c){a=wb(this,a),b=wb(this,b);var d=[],e=a.line;return this.iter(a.line,b.line+1,function(f){var g=f.markedSpans;if(g)for(var h=0;h<g.length;h++){var i=g[h];e==a.line&&a.ch>i.to||null==i.from&&e!=a.line||e==b.line&&i.from>b.ch||c&&!c(i.marker)||d.push(i.marker.parent||i.marker)}++e}),d},getAllMarks:function(){var a=[];return this.iter(function(b){var c=b.markedSpans;if(c)for(var d=0;d<c.length;++d)null!=c[d].from&&a.push(c[d].marker)}),a},posFromIndex:function(a){var b,c=this.first;return this.iter(function(d){var e=d.text.length+1;return e>a?(b=a,!0):(a-=e,++c,void 0)}),wb(this,mb(c,b))},indexFromPos:function(a){a=wb(this,a);var b=a.ch;return a.line<this.first||a.ch<0?0:(this.iter(this.first,a.line,function(a){b+=a.text.length+1}),b)},copy:function(a){var b=new Lf(Sf(this,this.first,this.first+this.size),this.modeOption,this.first);return b.scrollTop=this.scrollTop,b.scrollLeft=this.scrollLeft,b.sel=this.sel,b.extend=!1,a&&(b.history.undoDepth=this.history.undoDepth,b.setHistory(this.getHistory())),b},linkedDoc:function(a){a||(a={});var b=this.first,c=this.first+this.size;null!=a.from&&a.from>b&&(b=a.from),null!=a.to&&a.to<c&&(c=a.to);var d=new Lf(Sf(this,b,c),a.mode||this.modeOption,b);return a.sharedHist&&(d.history=this.history),(this.linked||(this.linked=[])).push({doc:d,sharedHist:a.sharedHist}),d.linked=[{doc:this,isParent:!0,sharedHist:a.sharedHist}],He(d,Ge(this)),d},unlinkDoc:function(a){if(a instanceof w&&(a=a.doc),this.linked)for(var b=0;b<this.linked.length;++b){var c=this.linked[b];if(c.doc==a){this.linked.splice(b,1),a.unlinkDoc(this),Ie(Ge(this));break}}if(a.history==this.history){var d=[a.id];Of(a,function(a){d.push(a.id)},!0),a.history=new Yf(null),a.history.done=hg(this.history.done,d),a.history.undone=hg(this.history.undone,d)}},iterLinkedDocs:function(a){Of(this,a)},getMode:function(){return this.mode},getEditor:function(){return this.cm}}),Lf.prototype.eachLine=Lf.prototype.iter;var Mf="iter insert remove copy getEditor".split(" ");for(var Nf in Lf.prototype)Lf.prototype.hasOwnProperty(Nf)&&Ng(Mf,Nf)<0&&(w.prototype[Nf]=function(a){return function(){return a.apply(this.doc,arguments)}}(Lf.prototype[Nf]));Ag(Lf);var lg=w.e_preventDefault=function(a){a.preventDefault?a.preventDefault():a.returnValue=!1},mg=w.e_stopPropagation=function(a){a.stopPropagation?a.stopPropagation():a.cancelBubble=!0},og=w.e_stop=function(a){lg(a),mg(a)},rg=w.on=function(a,b,c){if(a.addEventListener)a.addEventListener(b,c,!1);else if(a.attachEvent)a.attachEvent("on"+b,c);else{var d=a._handlers||(a._handlers={}),e=d[b]||(d[b]=[]);e.push(c)}},sg=w.off=function(a,b,c){if(a.removeEventListener)a.removeEventListener(b,c,!1);else if(a.detachEvent)a.detachEvent("on"+b,c);else{var d=a._handlers&&a._handlers[b];if(!d)return;for(var e=0;e<d.length;++e)if(d[e]==c){d.splice(e,1);
-break}}},tg=w.signal=function(a,b){var c=a._handlers&&a._handlers[b];if(c)for(var d=Array.prototype.slice.call(arguments,2),e=0;e<c.length;++e)c[e].apply(null,d)},ug=null,Bg=30,Cg=w.Pass={toString:function(){return"CodeMirror.Pass"}},Dg={scroll:!1},Eg={origin:"*mouse"},Fg={origin:"+move"};Gg.prototype.set=function(a,b){clearTimeout(this.id),this.id=setTimeout(b,a)};var Hg=w.countColumn=function(a,b,c,d,e){null==b&&(b=a.search(/[^\s\u00a0]/),-1==b&&(b=a.length));for(var f=d||0,g=e||0;;){var h=a.indexOf("	",f);if(0>h||h>=b)return g+(b-f);g+=h-f,g+=c-g%c,f=h+1}},Jg=[""],Mg=function(a){a.select()};n?Mg=function(a){a.selectionStart=0,a.selectionEnd=a.value.length}:d&&(Mg=function(a){try{a.select()}catch(b){}}),[].indexOf&&(Ng=function(a,b){return a.indexOf(b)}),[].map&&(Og=function(a,b){return a.map(b)});var Zg,Sg=/[\u00df\u0590-\u05f4\u0600-\u06ff\u3040-\u309f\u30a0-\u30ff\u3400-\u4db5\u4e00-\u9fcc\uac00-\ud7af]/,Tg=w.isWordChar=function(a){return/\w/.test(a)||a>"\x80"&&(a.toUpperCase()!=a.toLowerCase()||Sg.test(a))},Wg=/[\u0300-\u036f\u0483-\u0489\u0591-\u05bd\u05bf\u05c1\u05c2\u05c4\u05c5\u05c7\u0610-\u061a\u064b-\u065e\u0670\u06d6-\u06dc\u06de-\u06e4\u06e7\u06e8\u06ea-\u06ed\u0711\u0730-\u074a\u07a6-\u07b0\u07eb-\u07f3\u0816-\u0819\u081b-\u0823\u0825-\u0827\u0829-\u082d\u0900-\u0902\u093c\u0941-\u0948\u094d\u0951-\u0955\u0962\u0963\u0981\u09bc\u09be\u09c1-\u09c4\u09cd\u09d7\u09e2\u09e3\u0a01\u0a02\u0a3c\u0a41\u0a42\u0a47\u0a48\u0a4b-\u0a4d\u0a51\u0a70\u0a71\u0a75\u0a81\u0a82\u0abc\u0ac1-\u0ac5\u0ac7\u0ac8\u0acd\u0ae2\u0ae3\u0b01\u0b3c\u0b3e\u0b3f\u0b41-\u0b44\u0b4d\u0b56\u0b57\u0b62\u0b63\u0b82\u0bbe\u0bc0\u0bcd\u0bd7\u0c3e-\u0c40\u0c46-\u0c48\u0c4a-\u0c4d\u0c55\u0c56\u0c62\u0c63\u0cbc\u0cbf\u0cc2\u0cc6\u0ccc\u0ccd\u0cd5\u0cd6\u0ce2\u0ce3\u0d3e\u0d41-\u0d44\u0d4d\u0d57\u0d62\u0d63\u0dca\u0dcf\u0dd2-\u0dd4\u0dd6\u0ddf\u0e31\u0e34-\u0e3a\u0e47-\u0e4e\u0eb1\u0eb4-\u0eb9\u0ebb\u0ebc\u0ec8-\u0ecd\u0f18\u0f19\u0f35\u0f37\u0f39\u0f71-\u0f7e\u0f80-\u0f84\u0f86\u0f87\u0f90-\u0f97\u0f99-\u0fbc\u0fc6\u102d-\u1030\u1032-\u1037\u1039\u103a\u103d\u103e\u1058\u1059\u105e-\u1060\u1071-\u1074\u1082\u1085\u1086\u108d\u109d\u135f\u1712-\u1714\u1732-\u1734\u1752\u1753\u1772\u1773\u17b7-\u17bd\u17c6\u17c9-\u17d3\u17dd\u180b-\u180d\u18a9\u1920-\u1922\u1927\u1928\u1932\u1939-\u193b\u1a17\u1a18\u1a56\u1a58-\u1a5e\u1a60\u1a62\u1a65-\u1a6c\u1a73-\u1a7c\u1a7f\u1b00-\u1b03\u1b34\u1b36-\u1b3a\u1b3c\u1b42\u1b6b-\u1b73\u1b80\u1b81\u1ba2-\u1ba5\u1ba8\u1ba9\u1c2c-\u1c33\u1c36\u1c37\u1cd0-\u1cd2\u1cd4-\u1ce0\u1ce2-\u1ce8\u1ced\u1dc0-\u1de6\u1dfd-\u1dff\u200c\u200d\u20d0-\u20f0\u2cef-\u2cf1\u2de0-\u2dff\u302a-\u302f\u3099\u309a\ua66f-\ua672\ua67c\ua67d\ua6f0\ua6f1\ua802\ua806\ua80b\ua825\ua826\ua8c4\ua8e0-\ua8f1\ua926-\ua92d\ua947-\ua951\ua980-\ua982\ua9b3\ua9b6-\ua9b9\ua9bc\uaa29-\uaa2e\uaa31\uaa32\uaa35\uaa36\uaa43\uaa4c\uaab0\uaab2-\uaab4\uaab7\uaab8\uaabe\uaabf\uaac1\uabe5\uabe8\uabed\udc00-\udfff\ufb1e\ufe00-\ufe0f\ufe20-\ufe26\uff9e\uff9f]/;Zg=document.createRange?function(a,b,c){var d=document.createRange();return d.setEnd(a,c),d.setStart(a,b),d}:function(a,b,c){var d=document.body.createTextRange();try{d.moveToElementText(a.parentNode)}catch(e){return d}return d.collapse(!0),d.moveEnd("character",c),d.moveStart("character",b),d},d&&11>e&&(bh=function(){try{return document.activeElement}catch(a){return document.body}});var lh,nh,ph,dh=w.rmClass=function(a,b){var c=a.className,d=ch(b).exec(c);if(d){var e=c.slice(d.index+d[0].length);a.className=c.slice(0,d.index)+(e?d[1]+e:"")}},eh=w.addClass=function(a,b){var c=a.className;ch(b).test(c)||(a.className+=(c?" ":"")+b)},hh=!1,kh=function(){if(d&&9>e)return!1;var a=Yg("div");return"draggable"in a||"dragDrop"in a}(),rh=w.splitLines=3!="\n\nb".split(/\n/).length?function(a){for(var b=0,c=[],d=a.length;d>=b;){var e=a.indexOf("\n",b);-1==e&&(e=a.length);var f=a.slice(b,"\r"==a.charAt(e-1)?e-1:e),g=f.indexOf("\r");-1!=g?(c.push(f.slice(0,g)),b+=g+1):(c.push(f),b=e+1)}return c}:function(a){return a.split(/\r\n?|\n/)},sh=window.getSelection?function(a){try{return a.selectionStart!=a.selectionEnd}catch(b){return!1}}:function(a){try{var b=a.ownerDocument.selection.createRange()}catch(c){}return b&&b.parentElement()==a?0!=b.compareEndPoints("StartToEnd",b):!1},th=function(){var a=Yg("div");return"oncopy"in a?!0:(a.setAttribute("oncopy","return;"),"function"==typeof a.oncopy)}(),uh=null,wh={3:"Enter",8:"Backspace",9:"Tab",13:"Enter",16:"Shift",17:"Ctrl",18:"Alt",19:"Pause",20:"CapsLock",27:"Esc",32:"Space",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"Left",38:"Up",39:"Right",40:"Down",44:"PrintScrn",45:"Insert",46:"Delete",59:";",61:"=",91:"Mod",92:"Mod",93:"Mod",107:"=",109:"-",127:"Delete",173:"-",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'",63232:"Up",63233:"Down",63234:"Left",63235:"Right",63272:"Delete",63273:"Home",63275:"End",63276:"PageUp",63277:"PageDown",63302:"Insert"};w.keyNames=wh,function(){for(var a=0;10>a;a++)wh[a+48]=wh[a+96]=String(a);for(var a=65;90>=a;a++)wh[a]=String.fromCharCode(a);for(var a=1;12>=a;a++)wh[a+111]=wh[a+63235]="F"+a}();var Gh,Lh=function(){function c(c){return 247>=c?a.charAt(c):c>=1424&&1524>=c?"R":c>=1536&&1773>=c?b.charAt(c-1536):c>=1774&&2220>=c?"r":c>=8192&&8203>=c?"w":8204==c?"b":"L"}function j(a,b,c){this.level=a,this.from=b,this.to=c}var a="bbbbbbbbbtstwsbbbbbbbbbbbbbbssstwNN%%%NNNNNN,N,N1111111111NNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNbbbbbbsbbbbbbbbbbbbbbbbbbbbbbbbbb,N%%%%NNNNLNNNNN%%11NLNNN1LNNNNNLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLN",b="rrrrrrrrrrrr,rNNmmmmmmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmrrrrrrrnnnnnnnnnn%nnrrrmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmmmmmmNmmmm",d=/[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/,e=/[stwN]/,f=/[LRr]/,g=/[Lb1n]/,h=/[1n]/,i="L";return function(a){if(!d.test(a))return!1;for(var m,b=a.length,k=[],l=0;b>l;++l)k.push(m=c(a.charCodeAt(l)));for(var l=0,n=i;b>l;++l){var m=k[l];"m"==m?k[l]=n:n=m}for(var l=0,o=i;b>l;++l){var m=k[l];"1"==m&&"r"==o?k[l]="n":f.test(m)&&(o=m,"r"==m&&(k[l]="R"))}for(var l=1,n=k[0];b-1>l;++l){var m=k[l];"+"==m&&"1"==n&&"1"==k[l+1]?k[l]="1":","!=m||n!=k[l+1]||"1"!=n&&"n"!=n||(k[l]=n),n=m}for(var l=0;b>l;++l){var m=k[l];if(","==m)k[l]="N";else if("%"==m){for(var p=l+1;b>p&&"%"==k[p];++p);for(var q=l&&"!"==k[l-1]||b>p&&"1"==k[p]?"1":"N",r=l;p>r;++r)k[r]=q;l=p-1}}for(var l=0,o=i;b>l;++l){var m=k[l];"L"==o&&"1"==m?k[l]="L":f.test(m)&&(o=m)}for(var l=0;b>l;++l)if(e.test(k[l])){for(var p=l+1;b>p&&e.test(k[p]);++p);for(var s="L"==(l?k[l-1]:i),t="L"==(b>p?k[p]:i),q=s||t?"L":"R",r=l;p>r;++r)k[r]=q;l=p-1}for(var v,u=[],l=0;b>l;)if(g.test(k[l])){var w=l;for(++l;b>l&&g.test(k[l]);++l);u.push(new j(0,w,l))}else{var x=l,y=u.length;for(++l;b>l&&"L"!=k[l];++l);for(var r=x;l>r;)if(h.test(k[r])){r>x&&u.splice(y,0,new j(1,x,r));var z=r;for(++r;l>r&&h.test(k[r]);++r);u.splice(y,0,new j(2,z,r)),x=r}else++r;l>x&&u.splice(y,0,new j(1,x,l))}return 1==u[0].level&&(v=a.match(/^\s+/))&&(u[0].from=v[0].length,u.unshift(new j(0,0,v[0].length))),1==Lg(u).level&&(v=a.match(/\s+$/))&&(Lg(u).to-=v[0].length,u.push(new j(0,b-v[0].length,b))),u[0].level!=Lg(u).level&&u.push(new j(u[0].level,b,b)),u}}();return w.version="4.8.0",w}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";a.defineMode("javascript",function(b,c){function m(a){for(var c,b=!1,d=!1;null!=(c=a.next());){if(!b){if("/"==c&&!d)return;"["==c?d=!0:d&&"]"==c&&(d=!1)}b=!b&&"\\"==c}}function p(a,b,c){return n=a,o=c,b}function q(a,b){var c=a.next();if('"'==c||"'"==c)return b.tokenize=r(c),b.tokenize(a,b);if("."==c&&a.match(/^\d+(?:[eE][+\-]?\d+)?/))return p("number","number");if("."==c&&a.match(".."))return p("spread","meta");if(/[\[\]{}\(\),;\:\.]/.test(c))return p(c);if("="==c&&a.eat(">"))return p("=>","operator");if("0"==c&&a.eat(/x/i))return a.eatWhile(/[\da-f]/i),p("number","number");if(/\d/.test(c))return a.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/),p("number","number");if("/"==c)return a.eat("*")?(b.tokenize=s,s(a,b)):a.eat("/")?(a.skipToEnd(),p("comment","comment")):"operator"==b.lastType||"keyword c"==b.lastType||"sof"==b.lastType||/^[\[{}\(,;:]$/.test(b.lastType)?(m(a),a.eatWhile(/[gimy]/),p("regexp","string-2")):(a.eatWhile(k),p("operator","operator",a.current()));if("`"==c)return b.tokenize=t,t(a,b);if("#"==c)return a.skipToEnd(),p("error","error");if(k.test(c))return a.eatWhile(k),p("operator","operator",a.current());if(i.test(c)){a.eatWhile(i);var d=a.current(),e=j.propertyIsEnumerable(d)&&j[d];return e&&"."!=b.lastType?p(e.type,e.style,d):p("variable","variable",d)}}function r(a){return function(b,c){var e,d=!1;if(f&&"@"==b.peek()&&b.match(l))return c.tokenize=q,p("jsonld-keyword","meta");for(;null!=(e=b.next())&&(e!=a||d);)d=!d&&"\\"==e;return d||(c.tokenize=q),p("string","string")}}function s(a,b){for(var d,c=!1;d=a.next();){if("/"==d&&c){b.tokenize=q;break}c="*"==d}return p("comment","comment")}function t(a,b){for(var d,c=!1;null!=(d=a.next());){if(!c&&("`"==d||"$"==d&&a.eat("{"))){b.tokenize=q;break}c=!c&&"\\"==d}return p("quasi","string-2",a.current())}function v(a,b){b.fatArrowAt&&(b.fatArrowAt=null);var c=a.string.indexOf("=>",a.start);if(!(0>c)){for(var d=0,e=!1,f=c-1;f>=0;--f){var g=a.string.charAt(f),h=u.indexOf(g);if(h>=0&&3>h){if(!d){++f;break}if(0==--d)break}else if(h>=3&&6>h)++d;else if(i.test(g))e=!0;else if(e&&!d){++f;break}}e&&!d&&(b.fatArrowAt=f)}}function x(a,b,c,d,e,f){this.indented=a,this.column=b,this.type=c,this.prev=e,this.info=f,null!=d&&(this.align=d)}function y(a,b){for(var c=a.localVars;c;c=c.next)if(c.name==b)return!0;for(var d=a.context;d;d=d.prev)for(var c=d.vars;c;c=c.next)if(c.name==b)return!0}function z(a,b,c,d,e){var f=a.cc;for(A.state=a,A.stream=e,A.marked=null,A.cc=f,A.style=b,a.lexical.hasOwnProperty("align")||(a.lexical.align=!0);;){var h=f.length?f.pop():g?L:K;if(h(c,d)){for(;f.length&&f[f.length-1].lex;)f.pop()();return A.marked?A.marked:"variable"==c&&y(a,d)?"variable-2":b}}}function B(){for(var a=arguments.length-1;a>=0;a--)A.cc.push(arguments[a])}function C(){return B.apply(null,arguments),!0}function D(a){function b(b){for(var c=b;c;c=c.next)if(c.name==a)return!0;return!1}var d=A.state;if(d.context){if(A.marked="def",b(d.localVars))return;d.localVars={name:a,next:d.localVars}}else{if(b(d.globalVars))return;c.globalVars&&(d.globalVars={name:a,next:d.globalVars})}}function F(){A.state.context={prev:A.state.context,vars:A.state.localVars},A.state.localVars=E}function G(){A.state.localVars=A.state.context.vars,A.state.context=A.state.context.prev}function H(a,b){var c=function(){var c=A.state,d=c.indented;if("stat"==c.lexical.type)d=c.lexical.indented;else for(var e=c.lexical;e&&")"==e.type&&e.align;e=e.prev)d=e.indented;c.lexical=new x(d,A.stream.column(),a,null,c.lexical,b)};return c.lex=!0,c}function I(){var a=A.state;a.lexical.prev&&(")"==a.lexical.type&&(a.indented=a.lexical.indented),a.lexical=a.lexical.prev)}function J(a){function b(c){return c==a?C():";"==a?B():C(b)}return b}function K(a,b){return"var"==a?C(H("vardef",b.length),eb,J(";"),I):"keyword a"==a?C(H("form"),L,K,I):"keyword b"==a?C(H("form"),K,I):"{"==a?C(H("}"),bb,I):";"==a?C():"if"==a?("else"==A.state.lexical.info&&A.state.cc[A.state.cc.length-1]==I&&A.state.cc.pop()(),C(H("form"),L,K,I,jb)):"function"==a?C(pb):"for"==a?C(H("form"),kb,K,I):"variable"==a?C(H("stat"),W):"switch"==a?C(H("form"),L,H("}","switch"),J("{"),bb,I,I):"case"==a?C(L,J(":")):"default"==a?C(J(":")):"catch"==a?C(H("form"),F,J("("),qb,J(")"),K,I,G):"module"==a?C(H("form"),F,vb,G,I):"class"==a?C(H("form"),rb,I):"export"==a?C(H("form"),wb,I):"import"==a?C(H("form"),xb,I):B(H("stat"),L,J(";"),I)}function L(a){return N(a,!1)}function M(a){return N(a,!0)}function N(a,b){if(A.state.fatArrowAt==A.stream.start){var c=b?V:U;if("("==a)return C(F,H(")"),_(fb,")"),I,J("=>"),c,G);if("variable"==a)return B(F,fb,J("=>"),c,G)}var d=b?R:Q;return w.hasOwnProperty(a)?C(d):"function"==a?C(pb,d):"keyword c"==a?C(b?P:O):"("==a?C(H(")"),O,Cb,J(")"),I,d):"operator"==a||"spread"==a?C(b?M:L):"["==a?C(H("]"),Ab,I,d):"{"==a?ab(Y,"}",null,d):"quasi"==a?B(S,d):C()}function O(a){return a.match(/[;\}\)\],]/)?B():B(L)}function P(a){return a.match(/[;\}\)\],]/)?B():B(M)}function Q(a,b){return","==a?C(L):R(a,b,!1)}function R(a,b,c){var d=0==c?Q:R,e=0==c?L:M;return"=>"==a?C(F,c?V:U,G):"operator"==a?/\+\+|--/.test(b)?C(d):"?"==b?C(L,J(":"),e):C(e):"quasi"==a?B(S,d):";"!=a?"("==a?ab(M,")","call",d):"."==a?C(X,d):"["==a?C(H("]"),O,J("]"),I,d):void 0:void 0}function S(a,b){return"quasi"!=a?B():"${"!=b.slice(b.length-2)?C(S):C(L,T)}function T(a){return"}"==a?(A.marked="string-2",A.state.tokenize=t,C(S)):void 0}function U(a){return v(A.stream,A.state),B("{"==a?K:L)}function V(a){return v(A.stream,A.state),B("{"==a?K:M)}function W(a){return":"==a?C(I,K):B(Q,J(";"),I)}function X(a){return"variable"==a?(A.marked="property",C()):void 0}function Y(a,b){return"variable"==a||"keyword"==A.style?(A.marked="property","get"==b||"set"==b?C(Z):C($)):"number"==a||"string"==a?(A.marked=f?"property":A.style+" property",C($)):"jsonld-keyword"==a?C($):"["==a?C(L,J("]"),$):void 0}function Z(a){return"variable"!=a?B($):(A.marked="property",C(pb))}function $(a){return":"==a?C(M):"("==a?B(pb):void 0}function _(a,b){function c(d){if(","==d){var e=A.state.lexical;return"call"==e.info&&(e.pos=(e.pos||0)+1),C(a,c)}return d==b?C():C(J(b))}return function(d){return d==b?C():B(a,c)}}function ab(a,b,c){for(var d=3;d<arguments.length;d++)A.cc.push(arguments[d]);return C(H(b,c),_(a,b),I)}function bb(a){return"}"==a?C():B(K,bb)}function cb(a){return h&&":"==a?C(db):void 0}function db(a){return"variable"==a?(A.marked="variable-3",C()):void 0}function eb(){return B(fb,cb,hb,ib)}function fb(a,b){return"variable"==a?(D(b),C()):"["==a?ab(fb,"]"):"{"==a?ab(gb,"}"):void 0}function gb(a,b){return"variable"!=a||A.stream.match(/^\s*:/,!1)?("variable"==a&&(A.marked="property"),C(J(":"),fb,hb)):(D(b),C(hb))}function hb(a,b){return"="==b?C(M):void 0}function ib(a){return","==a?C(eb):void 0}function jb(a,b){return"keyword b"==a&&"else"==b?C(H("form","else"),K,I):void 0}function kb(a){return"("==a?C(H(")"),lb,J(")"),I):void 0}function lb(a){return"var"==a?C(eb,J(";"),nb):";"==a?C(nb):"variable"==a?C(mb):B(L,J(";"),nb)}function mb(a,b){return"in"==b||"of"==b?(A.marked="keyword",C(L)):C(Q,nb)}function nb(a,b){return";"==a?C(ob):"in"==b||"of"==b?(A.marked="keyword",C(L)):B(L,J(";"),ob)}function ob(a){")"!=a&&C(L)}function pb(a,b){return"*"==b?(A.marked="keyword",C(pb)):"variable"==a?(D(b),C(pb)):"("==a?C(F,H(")"),_(qb,")"),I,K,G):void 0}function qb(a){return"spread"==a?C(qb):B(fb,cb)}function rb(a,b){return"variable"==a?(D(b),C(sb)):void 0}function sb(a,b){return"extends"==b?C(L,sb):"{"==a?C(H("}"),tb,I):void 0}function tb(a,b){return"variable"==a||"keyword"==A.style?(A.marked="property","get"==b||"set"==b?C(ub,pb,tb):C(pb,tb)):"*"==b?(A.marked="keyword",C(tb)):";"==a?C(tb):"}"==a?C():void 0}function ub(a){return"variable"!=a?B():(A.marked="property",C())}function vb(a,b){return"string"==a?C(K):"variable"==a?(D(b),C(zb)):void 0}function wb(a,b){return"*"==b?(A.marked="keyword",C(zb,J(";"))):"default"==b?(A.marked="keyword",C(L,J(";"))):B(K)}function xb(a){return"string"==a?C():B(yb,zb)}function yb(a,b){return"{"==a?ab(yb,"}"):("variable"==a&&D(b),C())}function zb(a,b){return"from"==b?(A.marked="keyword",C(L)):void 0}function Ab(a){return"]"==a?C():B(M,Bb)}function Bb(a){return"for"==a?B(Cb,J("]")):","==a?C(_(P,"]")):B(_(M,"]"))}function Cb(a){return"for"==a?C(kb,Cb):"if"==a?C(L,Cb):void 0}var n,o,d=b.indentUnit,e=c.statementIndent,f=c.jsonld,g=c.json||f,h=c.typescript,i=c.wordCharacters||/[\w$\xa1-\uffff]/,j=function(){function a(a){return{type:a,style:"keyword"}}var b=a("keyword a"),c=a("keyword b"),d=a("keyword c"),e=a("operator"),f={type:"atom",style:"atom"},g={"if":a("if"),"while":b,"with":b,"else":c,"do":c,"try":c,"finally":c,"return":d,"break":d,"continue":d,"new":d,"delete":d,"throw":d,"debugger":d,"var":a("var"),"const":a("var"),let:a("var"),"function":a("function"),"catch":a("catch"),"for":a("for"),"switch":a("switch"),"case":a("case"),"default":a("default"),"in":e,"typeof":e,"instanceof":e,"true":f,"false":f,"null":f,undefined:f,NaN:f,Infinity:f,"this":a("this"),module:a("module"),"class":a("class"),"super":a("atom"),yield:d,"export":a("export"),"import":a("import"),"extends":d};if(h){var i={type:"variable",style:"variable-3"},j={"interface":a("interface"),"extends":a("extends"),constructor:a("constructor"),"public":a("public"),"private":a("private"),"protected":a("protected"),"static":a("static"),string:i,number:i,bool:i,any:i};for(var k in j)g[k]=j[k]}return g}(),k=/[+\-*&%=<>!?|~^]/,l=/^@(context|id|value|language|type|container|list|set|reverse|index|base|vocab|graph)"/,u="([{}])",w={atom:!0,number:!0,variable:!0,string:!0,regexp:!0,"this":!0,"jsonld-keyword":!0},A={state:null,column:null,marked:null,cc:null},E={name:"this",next:{name:"arguments"}};return I.lex=!0,{startState:function(a){var b={tokenize:q,lastType:"sof",cc:[],lexical:new x((a||0)-d,0,"block",!1),localVars:c.localVars,context:c.localVars&&{vars:c.localVars},indented:0};return c.globalVars&&"object"==typeof c.globalVars&&(b.globalVars=c.globalVars),b},token:function(a,b){if(a.sol()&&(b.lexical.hasOwnProperty("align")||(b.lexical.align=!1),b.indented=a.indentation(),v(a,b)),b.tokenize!=s&&a.eatSpace())return null;var c=b.tokenize(a,b);return"comment"==n?c:(b.lastType="operator"!=n||"++"!=o&&"--"!=o?n:"incdec",z(b,c,n,o,a))},indent:function(b,f){if(b.tokenize==s)return a.Pass;if(b.tokenize!=q)return 0;var g=f&&f.charAt(0),h=b.lexical;if(!/^\s*else\b/.test(f))for(var i=b.cc.length-1;i>=0;--i){var j=b.cc[i];if(j==I)h=h.prev;else if(j!=jb)break}"stat"==h.type&&"}"==g&&(h=h.prev),e&&")"==h.type&&"stat"==h.prev.type&&(h=h.prev);var k=h.type,l=g==k;return"vardef"==k?h.indented+("operator"==b.lastType||","==b.lastType?h.info+1:0):"form"==k&&"{"==g?h.indented:"form"==k?h.indented+d:"stat"==k?h.indented+("operator"==b.lastType||","==b.lastType?e||d:0):"switch"!=h.info||l||0==c.doubleIndentSwitch?h.align?h.column+(l?0:1):h.indented+(l?0:d):h.indented+(/^(?:case|default)\b/.test(f)?d:2*d)},electricInput:/^\s*(?:case .*?:|default:|\{|\})$/,blockCommentStart:g?null:"/*",blockCommentEnd:g?null:"*/",lineComment:g?null:"//",fold:"brace",helperType:g?"json":"javascript",jsonldMode:f,jsonMode:g}}),a.registerHelper("wordChars","javascript",/[\w$]/),a.defineMIME("text/javascript","javascript"),a.defineMIME("text/ecmascript","javascript"),a.defineMIME("application/javascript","javascript"),a.defineMIME("application/x-javascript","javascript"),a.defineMIME("application/ecmascript","javascript"),a.defineMIME("application/json",{name:"javascript",json:!0}),a.defineMIME("application/x-json",{name:"javascript",json:!0}),a.defineMIME("application/ld+json",{name:"javascript",jsonld:!0}),a.defineMIME("text/typescript",{name:"javascript",typescript:!0}),a.defineMIME("application/typescript",{name:"javascript",typescript:!0})}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";a.defineMode("xml",function(b,c){function k(a,b){function c(c){return b.tokenize=c,c(a,b)}var d=a.next();if("<"==d)return a.eat("!")?a.eat("[")?a.match("CDATA[")?c(n("atom","]]>")):null:a.match("--")?c(n("comment","-->")):a.match("DOCTYPE",!0,!0)?(a.eatWhile(/[\w\._\-]/),c(o(1))):null:a.eat("?")?(a.eatWhile(/[\w\._\-]/),b.tokenize=n("meta","?>"),"meta"):(i=a.eat("/")?"closeTag":"openTag",b.tokenize=l,"tag bracket");if("&"==d){var e;return e=a.eat("#")?a.eat("x")?a.eatWhile(/[a-fA-F\d]/)&&a.eat(";"):a.eatWhile(/[\d]/)&&a.eat(";"):a.eatWhile(/[\w\.\-:]/)&&a.eat(";"),e?"atom":"error"}return a.eatWhile(/[^&<]/),null}function l(a,b){var c=a.next();if(">"==c||"/"==c&&a.eat(">"))return b.tokenize=k,i=">"==c?"endTag":"selfcloseTag","tag bracket";if("="==c)return i="equals",null;if("<"==c){b.tokenize=k,b.state=s,b.tagName=b.tagStart=null;var d=b.tokenize(a,b);return d?d+" tag error":"tag error"}return/[\'\"]/.test(c)?(b.tokenize=m(c),b.stringStartCol=a.column(),b.tokenize(a,b)):(a.match(/^[^\s\u00a0=<>\"\']*[^\s\u00a0=<>\"\'\/]/),"word")}function m(a){var b=function(b,c){for(;!b.eol();)if(b.next()==a){c.tokenize=l;break}return"string"};return b.isInAttribute=!0,b}function n(a,b){return function(c,d){for(;!c.eol();){if(c.match(b)){d.tokenize=k;break}c.next()}return a}}function o(a){return function(b,c){for(var d;null!=(d=b.next());){if("<"==d)return c.tokenize=o(a+1),c.tokenize(b,c);if(">"==d){if(1==a){c.tokenize=k;break}return c.tokenize=o(a-1),c.tokenize(b,c)}}return"meta"}}function p(a,b,c){this.prev=a.context,this.tagName=b,this.indent=a.indented,this.startOfLine=c,(g.doNotIndent.hasOwnProperty(b)||a.context&&a.context.noIndent)&&(this.noIndent=!0)}function q(a){a.context&&(a.context=a.context.prev)}function r(a,b){for(var c;;){if(!a.context)return;if(c=a.context.tagName,!g.contextGrabbers.hasOwnProperty(c)||!g.contextGrabbers[c].hasOwnProperty(b))return;q(a)}}function s(a,b,c){return"openTag"==a?(c.tagStart=b.column(),t):"closeTag"==a?u:s}function t(a,b,c){return"word"==a?(c.tagName=b.current(),j="tag",x):(j="error",t)}function u(a,b,c){if("word"==a){var d=b.current();return c.context&&c.context.tagName!=d&&g.implicitlyClosed.hasOwnProperty(c.context.tagName)&&q(c),c.context&&c.context.tagName==d?(j="tag",v):(j="tag error",w)}return j="error",w}function v(a,b,c){return"endTag"!=a?(j="error",v):(q(c),s)}function w(a,b,c){return j="error",v(a,b,c)}function x(a,b,c){if("word"==a)return j="attribute",y;if("endTag"==a||"selfcloseTag"==a){var d=c.tagName,e=c.tagStart;return c.tagName=c.tagStart=null,"selfcloseTag"==a||g.autoSelfClosers.hasOwnProperty(d)?r(c,d):(r(c,d),c.context=new p(c,d,e==c.indented)),s}return j="error",x}function y(a,b,c){return"equals"==a?z:(g.allowMissing||(j="error"),x(a,b,c))}function z(a,b,c){return"string"==a?A:"word"==a&&g.allowUnquoted?(j="string",x):(j="error",x(a,b,c))}function A(a,b,c){return"string"==a?A:x(a,b,c)}var d=b.indentUnit,e=c.multilineTagIndentFactor||1,f=c.multilineTagIndentPastTag;null==f&&(f=!0);var i,j,g=c.htmlMode?{autoSelfClosers:{area:!0,base:!0,br:!0,col:!0,command:!0,embed:!0,frame:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0,menuitem:!0},implicitlyClosed:{dd:!0,li:!0,optgroup:!0,option:!0,p:!0,rp:!0,rt:!0,tbody:!0,td:!0,tfoot:!0,th:!0,tr:!0},contextGrabbers:{dd:{dd:!0,dt:!0},dt:{dd:!0,dt:!0},li:{li:!0},option:{option:!0,optgroup:!0},optgroup:{optgroup:!0},p:{address:!0,article:!0,aside:!0,blockquote:!0,dir:!0,div:!0,dl:!0,fieldset:!0,footer:!0,form:!0,h1:!0,h2:!0,h3:!0,h4:!0,h5:!0,h6:!0,header:!0,hgroup:!0,hr:!0,menu:!0,nav:!0,ol:!0,p:!0,pre:!0,section:!0,table:!0,ul:!0},rp:{rp:!0,rt:!0},rt:{rp:!0,rt:!0},tbody:{tbody:!0,tfoot:!0},td:{td:!0,th:!0},tfoot:{tbody:!0},th:{td:!0,th:!0},thead:{tbody:!0,tfoot:!0},tr:{tr:!0}},doNotIndent:{pre:!0},allowUnquoted:!0,allowMissing:!0,caseFold:!0}:{autoSelfClosers:{},implicitlyClosed:{},contextGrabbers:{},doNotIndent:{},allowUnquoted:!1,allowMissing:!1,caseFold:!1},h=c.alignCDATA;return{startState:function(){return{tokenize:k,state:s,indented:0,tagName:null,tagStart:null,context:null}},token:function(a,b){if(!b.tagName&&a.sol()&&(b.indented=a.indentation()),a.eatSpace())return null;i=null;var c=b.tokenize(a,b);return(c||i)&&"comment"!=c&&(j=null,b.state=b.state(i||c,a,b),j&&(c="error"==j?c+" error":j)),c},indent:function(b,c,i){var j=b.context;if(b.tokenize.isInAttribute)return b.tagStart==b.indented?b.stringStartCol+1:b.indented+d;if(j&&j.noIndent)return a.Pass;if(b.tokenize!=l&&b.tokenize!=k)return i?i.match(/^(\s*)/)[0].length:0;if(b.tagName)return f?b.tagStart+b.tagName.length+2:b.tagStart+d*e;if(h&&/<!\[CDATA\[/.test(c))return 0;var m=c&&/^<(\/)?([\w_:\.-]*)/.exec(c);if(m&&m[1])for(;j;){if(j.tagName==m[2]){j=j.prev;break}if(!g.implicitlyClosed.hasOwnProperty(j.tagName))break;j=j.prev}else if(m)for(;j;){var n=g.contextGrabbers[j.tagName];if(!n||!n.hasOwnProperty(m[2]))break;j=j.prev}for(;j&&!j.startOfLine;)j=j.prev;return j?j.indent+d:0},electricInput:/<\/[\s\w:]+>$/,blockCommentStart:"<!--",blockCommentEnd:"-->",configuration:c.htmlMode?"html":"xml",helperType:c.htmlMode?"html":"xml"}}),a.defineMIME("text/xml","xml"),a.defineMIME("application/xml","xml"),a.mimeModes.hasOwnProperty("text/html")||a.defineMIME("text/html",{name:"xml",htmlMode:!0})}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";a.registerHelper("fold","brace",function(b,c){function h(f){for(var h=c.ch,i=0;;){var j=0>=h?-1:e.lastIndexOf(f,h-1);if(-1!=j){if(1==i&&j<c.ch)break;if(g=b.getTokenTypeAt(a.Pos(d,j+1)),!/^(comment|string)/.test(g))return j+1;h=j-1}else{if(1==i)break;i=1,h=e.length}}}var f,g,d=c.line,e=b.getLine(d),i="{",j="}",f=h("{");if(null==f&&(i="[",j="]",f=h("[")),null!=f){var m,n,k=1,l=b.lastLine();a:for(var o=d;l>=o;++o)for(var p=b.getLine(o),q=o==d?f:0;;){var r=p.indexOf(i,q),s=p.indexOf(j,q);if(0>r&&(r=p.length),0>s&&(s=p.length),q=Math.min(r,s),q==p.length)break;if(b.getTokenTypeAt(a.Pos(o,q+1))==g)if(q==r)++k;else if(!--k){m=o,n=q;break a}++q}if(null!=m&&(d!=m||n!=f))return{from:a.Pos(d,f),to:a.Pos(m,n)}}}),a.registerHelper("fold","import",function(b,c){function d(c){if(c<b.firstLine()||c>b.lastLine())return null;var d=b.getTokenAt(a.Pos(c,1));if(/\S/.test(d.string)||(d=b.getTokenAt(a.Pos(c,d.end+1))),"keyword"!=d.type||"import"!=d.string)return null;for(var e=c,f=Math.min(b.lastLine(),c+10);f>=e;++e){var g=b.getLine(e),h=g.indexOf(";");if(-1!=h)return{startCh:d.end,end:a.Pos(e,h)}}}var f,c=c.line,e=d(c);if(!e||d(c-1)||(f=d(c-2))&&f.end.line==c-1)return null;for(var g=e.end;;){var h=d(g.line+1);if(null==h)break;g=h.end}return{from:b.clipPos(a.Pos(c,e.startCh+1)),to:g}}),a.registerHelper("fold","include",function(b,c){function d(c){if(c<b.firstLine()||c>b.lastLine())return null;var d=b.getTokenAt(a.Pos(c,1));return/\S/.test(d.string)||(d=b.getTokenAt(a.Pos(c,d.end+1))),"meta"==d.type&&"#include"==d.string.slice(0,8)?d.start+8:void 0}var c=c.line,e=d(c);if(null==e||null!=d(c-1))return null;for(var f=c;;){var g=d(f+1);if(null==g)break;++f}return{from:a.Pos(c,e+1),to:b.clipPos(a.Pos(f))}})}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";a.registerGlobalHelper("fold","comment",function(a){return a.blockCommentStart&&a.blockCommentEnd},function(b,c){var d=b.getModeAt(c),e=d.blockCommentStart,f=d.blockCommentEnd;if(e&&f){for(var i,g=c.line,h=b.getLine(g),j=c.ch,k=0;;){var l=0>=j?-1:h.lastIndexOf(e,j-1);if(-1!=l){if(1==k&&l<c.ch)return;if(/comment/.test(b.getTokenTypeAt(a.Pos(g,l+1)))){i=l+e.length;break}j=l-1}else{if(1==k)return;k=1,j=h.length}}var o,p,m=1,n=b.lastLine();a:for(var q=g;n>=q;++q)for(var r=b.getLine(q),s=q==g?i:0;;){var t=r.indexOf(e,s),u=r.indexOf(f,s);if(0>t&&(t=r.length),0>u&&(u=r.length),s=Math.min(t,u),s==r.length)break;if(s==t)++m;else if(!--m){o=q,p=s;break a}++s}if(null!=o&&(g!=o||p!=i))return{from:a.Pos(g,i),to:a.Pos(o,p)}}})}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";function b(b,d,f,g){function j(a){var c=h(b,d);if(!c||c.to.line-c.from.line<i)return null;for(var e=b.findMarksAt(c.from),f=0;f<e.length;++f)if(e[f].__isFold&&"fold"!==g){if(!a)return null;c.cleared=!0,e[f].clear()}return c}if(f&&f.call){var h=f;f=null}else var h=e(b,f,"rangeFinder");"number"==typeof d&&(d=a.Pos(d,0));var i=e(b,f,"minFoldSize"),k=j(!0);if(e(b,f,"scanUp"))for(;!k&&d.line>b.firstLine();)d=a.Pos(d.line-1,0),k=j(!1);if(k&&!k.cleared&&"unfold"!==g){var l=c(b,f);a.on(l,"mousedown",function(b){m.clear(),a.e_preventDefault(b)});var m=b.markText(k.from,k.to,{replacedWith:l,clearOnEnter:!0,__isFold:!0});m.on("clear",function(c,d){a.signal(b,"unfold",b,c,d)}),a.signal(b,"fold",b,k.from,k.to)}}function c(a,b){var c=e(a,b,"widget");if("string"==typeof c){var d=document.createTextNode(c);c=document.createElement("span"),c.appendChild(d),c.className="CodeMirror-foldmarker"}return c}function e(a,b,c){if(b&&void 0!==b[c])return b[c];var e=a.options.foldOptions;return e&&void 0!==e[c]?e[c]:d[c]}a.newFoldFunction=function(a,c){return function(d,e){b(d,e,{rangeFinder:a,widget:c})}},a.defineExtension("foldCode",function(a,c,d){b(this,a,c,d)}),a.defineExtension("isFolded",function(a){for(var b=this.findMarksAt(a),c=0;c<b.length;++c)if(b[c].__isFold)return!0}),a.commands.toggleFold=function(a){a.foldCode(a.getCursor())},a.commands.fold=function(a){a.foldCode(a.getCursor(),null,"fold")},a.commands.unfold=function(a){a.foldCode(a.getCursor(),null,"unfold")},a.commands.foldAll=function(b){b.operation(function(){for(var c=b.firstLine(),d=b.lastLine();d>=c;c++)b.foldCode(a.Pos(c,0),null,"fold")})},a.commands.unfoldAll=function(b){b.operation(function(){for(var c=b.firstLine(),d=b.lastLine();d>=c;c++)b.foldCode(a.Pos(c,0),null,"unfold")})},a.registerHelper("fold","combine",function(){var a=Array.prototype.slice.call(arguments,0);return function(b,c){for(var d=0;d<a.length;++d){var e=a[d](b,c);if(e)return e}}}),a.registerHelper("fold","auto",function(a,b){for(var c=a.getHelpers(b,"fold"),d=0;d<c.length;d++){var e=c[d](a,b);if(e)return e}});var d={rangeFinder:a.fold.auto,widget:"\u2194",minFoldSize:0,scanUp:!1};a.defineOption("foldOptions",null)}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror"),require("./foldcode")):"function"==typeof define&&define.amd?define(["../../lib/codemirror","./foldcode"],a):a(CodeMirror)}(function(a){"use strict";function c(a){this.options=a,this.from=this.to=0}function d(a){return a===!0&&(a={}),null==a.gutter&&(a.gutter="CodeMirror-foldgutter"),null==a.indicatorOpen&&(a.indicatorOpen="CodeMirror-foldgutter-open"),null==a.indicatorFolded&&(a.indicatorFolded="CodeMirror-foldgutter-folded"),a}function e(a,c){for(var d=a.findMarksAt(b(c)),e=0;e<d.length;++e)if(d[e].__isFold&&d[e].find().from.line==c)return!0}function f(a){if("string"==typeof a){var b=document.createElement("div");return b.className=a+" CodeMirror-guttermarker-subtle",b}return a.cloneNode(!0)}function g(c,d,g){var h=c.state.foldGutter.options,i=d;c.eachLine(d,g,function(d){var g=null;if(e(c,i))g=f(h.indicatorFolded);else{var j=b(i,0),k=h.rangeFinder||a.fold.auto,l=k&&k(c,j);l&&l.from.line+1<l.to.line&&(g=f(h.indicatorOpen))}c.setGutterMarker(d,h.gutter,g),++i})}function h(a){var b=a.getViewport(),c=a.state.foldGutter;c&&(a.operation(function(){g(a,b.from,b.to)}),c.from=b.from,c.to=b.to)}function i(a,c,d){var e=a.state.foldGutter.options;d==e.gutter&&a.foldCode(b(c,0),e.rangeFinder)}function j(a){var b=a.state.foldGutter,c=a.state.foldGutter.options;b.from=b.to=0,clearTimeout(b.changeUpdate),b.changeUpdate=setTimeout(function(){h(a)},c.foldOnChangeTimeSpan||600)}function k(a){var b=a.state.foldGutter,c=a.state.foldGutter.options;clearTimeout(b.changeUpdate),b.changeUpdate=setTimeout(function(){var c=a.getViewport();b.from==b.to||c.from-b.to>20||b.from-c.to>20?h(a):a.operation(function(){c.from<b.from&&(g(a,c.from,b.from),b.from=c.from),c.to>b.to&&(g(a,b.to,c.to),b.to=c.to)})},c.updateViewportTimeSpan||400)}function l(a,b){var c=a.state.foldGutter,d=b.line;d>=c.from&&d<c.to&&g(a,d,d+1)}a.defineOption("foldGutter",!1,function(b,e,f){f&&f!=a.Init&&(b.clearGutter(b.state.foldGutter.options.gutter),b.state.foldGutter=null,b.off("gutterClick",i),b.off("change",j),b.off("viewportChange",k),b.off("fold",l),b.off("unfold",l),b.off("swapDoc",h)),e&&(b.state.foldGutter=new c(d(e)),h(b),b.on("gutterClick",i),b.on("change",j),b.on("viewportChange",k),b.on("fold",l),b.on("unfold",l),b.on("swapDoc",h))
-});var b=a.Pos}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";a.registerHelper("fold","markdown",function(b,c){function e(c){var d=b.getTokenTypeAt(a.Pos(c,0));return d&&/\bheader\b/.test(d)}function f(a,b,c){var f=b&&b.match(/^#+/);return f&&e(a)?f[0].length:(f=c&&c.match(/^[=\-]+\s*$/),f&&e(a+1)?"="==c[0]?1:2:d)}var d=100,g=b.getLine(c.line),h=b.getLine(c.line+1),i=f(c.line,g,h);if(i===d)return void 0;for(var j=b.lastLine(),k=c.line,l=b.getLine(k+2);j>k&&!(f(k+1,h,l)<=i);)++k,h=l,l=b.getLine(k+2);return{from:a.Pos(c.line,g.length),to:a.Pos(k,b.getLine(k).length)}})}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){function e(a,b,e,g){var h=a.getLineHandle(b.line),i=b.ch-1,j=i>=0&&d[h.text.charAt(i)]||d[h.text.charAt(++i)];if(!j)return null;var k=">"==j.charAt(1)?1:-1;if(e&&k>0!=(i==b.ch))return null;var l=a.getTokenTypeAt(c(b.line,i+1)),m=f(a,c(b.line,i+(k>0?1:0)),k,l||null,g);return null==m?null:{from:c(b.line,i),to:m&&m.pos,match:m&&m.ch==j.charAt(0),forward:k>0}}function f(a,b,e,f,g){for(var h=g&&g.maxScanLineLength||1e4,i=g&&g.maxScanLines||1e3,j=[],k=g&&g.bracketRegex?g.bracketRegex:/[(){}[\]]/,l=e>0?Math.min(b.line+i,a.lastLine()+1):Math.max(a.firstLine()-1,b.line-i),m=b.line;m!=l;m+=e){var n=a.getLine(m);if(n){var o=e>0?0:n.length-1,p=e>0?n.length:-1;if(!(n.length>h))for(m==b.line&&(o=b.ch-(0>e?1:0));o!=p;o+=e){var q=n.charAt(o);if(k.test(q)&&(void 0===f||a.getTokenTypeAt(c(m,o+1))==f)){var r=d[q];if(">"==r.charAt(1)==e>0)j.push(q);else{if(!j.length)return{pos:c(m,o),ch:q};j.pop()}}}}}return m-e==(e>0?a.lastLine():a.firstLine())?!1:null}function g(a,d,f){for(var g=a.state.matchBrackets.maxHighlightLineLength||1e3,h=[],i=a.listSelections(),j=0;j<i.length;j++){var k=i[j].empty()&&e(a,i[j].head,!1,f);if(k&&a.getLine(k.from.line).length<=g){var l=k.match?"CodeMirror-matchingbracket":"CodeMirror-nonmatchingbracket";h.push(a.markText(k.from,c(k.from.line,k.from.ch+1),{className:l})),k.to&&a.getLine(k.to.line).length<=g&&h.push(a.markText(k.to,c(k.to.line,k.to.ch+1),{className:l}))}}if(h.length){b&&a.state.focused&&a.display.input.focus();var m=function(){a.operation(function(){for(var a=0;a<h.length;a++)h[a].clear()})};if(!d)return m;setTimeout(m,800)}}function i(a){a.operation(function(){h&&(h(),h=null),h=g(a,!1,a.state.matchBrackets)})}var b=/MSIE \d/.test(navigator.userAgent)&&(null==document.documentMode||document.documentMode<8),c=a.Pos,d={"(":")>",")":"(<","[":"]>","]":"[<","{":"}>","}":"{<"},h=null;a.defineOption("matchBrackets",!1,function(b,c,d){d&&d!=a.Init&&b.off("cursorActivity",i),c&&(b.state.matchBrackets="object"==typeof c?c:{},b.on("cursorActivity",i))}),a.defineExtension("matchBrackets",function(){g(this,!0)}),a.defineExtension("findMatchingBracket",function(a,b,c){return e(this,a,b,c)}),a.defineExtension("scanForBracket",function(a,b,c,d){return f(this,a,b,c,d)})}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";function d(a,b){this.cm=a,this.options=this.buildOptions(b),this.widget=this.onClose=null}function e(a){return"string"==typeof a?a:a.text}function f(a,b){function f(a,d){var f;f="string"!=typeof d?function(a){return d(a,b)}:c.hasOwnProperty(d)?c[d]:d,e[a]=f}var c={Up:function(){b.moveFocus(-1)},Down:function(){b.moveFocus(1)},PageUp:function(){b.moveFocus(-b.menuSize()+1,!0)},PageDown:function(){b.moveFocus(b.menuSize()-1,!0)},Home:function(){b.setFocus(0)},End:function(){b.setFocus(b.length-1)},Enter:b.pick,Tab:b.pick,Esc:b.close},d=a.options.customKeys,e=d?{}:c;if(d)for(var g in d)d.hasOwnProperty(g)&&f(g,d[g]);var h=a.options.extraKeys;if(h)for(var g in h)h.hasOwnProperty(g)&&f(g,h[g]);return e}function g(a,b){for(;b&&b!=a;){if("LI"===b.nodeName.toUpperCase()&&b.parentNode==a)return b;b=b.parentNode}}function h(d,h){this.completion=d,this.data=h;var i=this,j=d.cm,k=this.hints=document.createElement("ul");k.className="CodeMirror-hints",this.selectedHint=h.selectedHint||0;for(var l=h.list,m=0;m<l.length;++m){var n=k.appendChild(document.createElement("li")),o=l[m],p=b+(m!=this.selectedHint?"":" "+c);null!=o.className&&(p=o.className+" "+p),n.className=p,o.render?o.render(n,h,o):n.appendChild(document.createTextNode(o.displayText||e(o))),n.hintId=m}var q=j.cursorCoords(d.options.alignWithWord?h.from:null),r=q.left,s=q.bottom,t=!0;k.style.left=r+"px",k.style.top=s+"px";var u=window.innerWidth||Math.max(document.body.offsetWidth,document.documentElement.offsetWidth),v=window.innerHeight||Math.max(document.body.offsetHeight,document.documentElement.offsetHeight);(d.options.container||document.body).appendChild(k);var w=k.getBoundingClientRect(),x=w.bottom-v;if(x>0){var y=w.bottom-w.top,z=q.top-(q.bottom-w.top);if(z-y>0)k.style.top=(s=q.top-y)+"px",t=!1;else if(y>v){k.style.height=v-5+"px",k.style.top=(s=q.bottom-w.top)+"px";var A=j.getCursor();h.from.ch!=A.ch&&(q=j.cursorCoords(A),k.style.left=(r=q.left)+"px",w=k.getBoundingClientRect())}}var B=w.left-u;if(B>0&&(w.right-w.left>u&&(k.style.width=u-5+"px",B-=w.right-w.left-u),k.style.left=(r=q.left-B)+"px"),j.addKeyMap(this.keyMap=f(d,{moveFocus:function(a,b){i.changeActive(i.selectedHint+a,b)},setFocus:function(a){i.changeActive(a)},menuSize:function(){return i.screenAmount()},length:l.length,close:function(){d.close()},pick:function(){i.pick()},data:h})),d.options.closeOnUnfocus){var C;j.on("blur",this.onBlur=function(){C=setTimeout(function(){d.close()},100)}),j.on("focus",this.onFocus=function(){clearTimeout(C)})}var D=j.getScrollInfo();return j.on("scroll",this.onScroll=function(){var a=j.getScrollInfo(),b=j.getWrapperElement().getBoundingClientRect(),c=s+D.top-a.top,e=c-(window.pageYOffset||(document.documentElement||document.body).scrollTop);return t||(e+=k.offsetHeight),e<=b.top||e>=b.bottom?d.close():(k.style.top=c+"px",k.style.left=r+D.left-a.left+"px",void 0)}),a.on(k,"dblclick",function(a){var b=g(k,a.target||a.srcElement);b&&null!=b.hintId&&(i.changeActive(b.hintId),i.pick())}),a.on(k,"click",function(a){var b=g(k,a.target||a.srcElement);b&&null!=b.hintId&&(i.changeActive(b.hintId),d.options.completeOnSingleClick&&i.pick())}),a.on(k,"mousedown",function(){setTimeout(function(){j.focus()},20)}),a.signal(h,"select",l[0],k.firstChild),!0}var b="CodeMirror-hint",c="CodeMirror-hint-active";a.showHint=function(a,b,c){if(!b)return a.showHint(c);c&&c.async&&(b.async=!0);var d={hint:b};if(c)for(var e in c)d[e]=c[e];return a.showHint(d)},a.defineExtension("showHint",function(b){if(!(this.listSelections().length>1||this.somethingSelected())){this.state.completionActive&&this.state.completionActive.close();var c=this.state.completionActive=new d(this,b),e=c.options.hint;if(e)return a.signal(this,"startCompletion",this),e.async?(e(this,function(a){c.showHints(a)},c.options),void 0):c.showHints(e(this,c.options))}}),d.prototype={close:function(){this.active()&&(this.cm.state.completionActive=null,this.widget&&this.widget.close(),this.onClose&&this.onClose(),a.signal(this.cm,"endCompletion",this.cm))},active:function(){return this.cm.state.completionActive==this},pick:function(b,c){var d=b.list[c];d.hint?d.hint(this.cm,b,d):this.cm.replaceRange(e(d),d.from||b.from,d.to||b.to,"complete"),a.signal(b,"pick",d),this.close()},showHints:function(a){return a&&a.list.length&&this.active()?(this.options.completeSingle&&1==a.list.length?this.pick(a,0):this.showWidget(a),void 0):this.close()},showWidget:function(b){function l(){e||(e=!0,d.close(),d.cm.off("cursorActivity",p),b&&a.signal(b,"close"))}function m(){if(!e){a.signal(b,"update");var c=d.options.hint;c.async?c(d.cm,n,d.options):n(c(d.cm,d.options))}}function n(a){if(b=a,!e){if(!b||!b.list.length)return l();d.widget&&d.widget.close(),d.widget=new h(d,b)}}function o(){c&&(k(c),c=0)}function p(){o();var a=d.cm.getCursor(),b=d.cm.getLine(a.line);a.line!=g.line||b.length-a.ch!=i-g.ch||a.ch<g.ch||d.cm.somethingSelected()||a.ch&&f.test(b.charAt(a.ch-1))?d.close():(c=j(m),d.widget&&d.widget.close())}this.widget=new h(this,b),a.signal(b,"shown");var e,c=0,d=this,f=this.options.closeCharacters,g=this.cm.getCursor(),i=this.cm.getLine(g.line).length,j=window.requestAnimationFrame||function(a){return setTimeout(a,1e3/60)},k=window.cancelAnimationFrame||clearTimeout;this.cm.on("cursorActivity",p),this.onClose=l},buildOptions:function(a){var b=this.cm.options.hintOptions,c={};for(var d in i)c[d]=i[d];if(b)for(var d in b)void 0!==b[d]&&(c[d]=b[d]);if(a)for(var d in a)void 0!==a[d]&&(c[d]=a[d]);return c}},h.prototype={close:function(){if(this.completion.widget==this){this.completion.widget=null,this.hints.parentNode.removeChild(this.hints),this.completion.cm.removeKeyMap(this.keyMap);var a=this.completion.cm;this.completion.options.closeOnUnfocus&&(a.off("blur",this.onBlur),a.off("focus",this.onFocus)),a.off("scroll",this.onScroll)}},pick:function(){this.completion.pick(this.data,this.selectedHint)},changeActive:function(b,d){if(b>=this.data.list.length?b=d?this.data.list.length-1:0:0>b&&(b=d?0:this.data.list.length-1),this.selectedHint!=b){var e=this.hints.childNodes[this.selectedHint];e.className=e.className.replace(" "+c,""),e=this.hints.childNodes[this.selectedHint=b],e.className+=" "+c,e.offsetTop<this.hints.scrollTop?this.hints.scrollTop=e.offsetTop-3:e.offsetTop+e.offsetHeight>this.hints.scrollTop+this.hints.clientHeight&&(this.hints.scrollTop=e.offsetTop+e.offsetHeight-this.hints.clientHeight+3),a.signal(this.data,"select",this.data.list[this.selectedHint],e)}},screenAmount:function(){return Math.floor(this.hints.clientHeight/this.hints.firstChild.offsetHeight)||1}},a.registerHelper("hint","auto",function(b,c){var e,d=b.getHelpers(b.getCursor(),"hint");if(d.length)for(var f=0;f<d.length;f++){var g=d[f](b,c);if(g&&g.list.length)return g}else if(e=b.getHelper(b.getCursor(),"hintWords")){if(e)return a.hint.fromList(b,{words:e})}else if(a.hint.anyword)return a.hint.anyword(b,c)}),a.registerHelper("hint","fromList",function(b,c){for(var d=b.getCursor(),e=b.getTokenAt(d),f=[],g=0;g<c.words.length;g++){var h=c.words[g];h.slice(0,e.string.length)==e.string&&f.push(h)}return f.length?{list:f,from:a.Pos(d.line,e.start),to:a.Pos(d.line,e.end)}:void 0}),a.commands.autocomplete=a.showHint;var i={hint:a.hint.auto,completeSingle:!0,alignWithWord:!0,closeCharacters:/[\s()\[\]{};:>,]/,closeOnUnfocus:!0,completeOnSingleClick:!1,container:null,customKeys:null,extraKeys:null};a.defineOption("hintOptions",null)}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";function c(a,b){return a.line-b.line||a.ch-b.ch}function g(a,b,c,d){this.line=b,this.ch=c,this.cm=a,this.text=a.getLine(b),this.min=d?d.from:a.firstLine(),this.max=d?d.to-1:a.lastLine()}function h(a,c){var d=a.cm.getTokenTypeAt(b(a.line,c));return d&&/\btag\b/.test(d)}function i(a){return a.line>=a.max?void 0:(a.ch=0,a.text=a.cm.getLine(++a.line),!0)}function j(a){return a.line<=a.min?void 0:(a.text=a.cm.getLine(--a.line),a.ch=a.text.length,!0)}function k(a){for(;;){var b=a.text.indexOf(">",a.ch);if(-1==b){if(i(a))continue;return}{if(h(a,b+1)){var c=a.text.lastIndexOf("/",b),d=c>-1&&!/\S/.test(a.text.slice(c+1,b));return a.ch=b+1,d?"selfClose":"regular"}a.ch=b+1}}}function l(a){for(;;){var b=a.ch?a.text.lastIndexOf("<",a.ch-1):-1;if(-1==b){if(j(a))continue;return}if(h(a,b+1)){f.lastIndex=b,a.ch=b;var c=f.exec(a.text);if(c&&c.index==b)return c}else a.ch=b}}function m(a){for(;;){f.lastIndex=a.ch;var b=f.exec(a.text);if(!b){if(i(a))continue;return}{if(h(a,b.index+1))return a.ch=b.index+b[0].length,b;a.ch=b.index+1}}}function n(a){for(;;){var b=a.ch?a.text.lastIndexOf(">",a.ch-1):-1;if(-1==b){if(j(a))continue;return}{if(h(a,b+1)){var c=a.text.lastIndexOf("/",b),d=c>-1&&!/\S/.test(a.text.slice(c+1,b));return a.ch=b+1,d?"selfClose":"regular"}a.ch=b}}}function o(a,c){for(var d=[];;){var f,e=m(a),g=a.line,h=a.ch-(e?e[0].length:0);if(!e||!(f=k(a)))return;if("selfClose"!=f)if(e[1]){for(var i=d.length-1;i>=0;--i)if(d[i]==e[2]){d.length=i;break}if(0>i&&(!c||c==e[2]))return{tag:e[2],from:b(g,h),to:b(a.line,a.ch)}}else d.push(e[2])}}function p(a,c){for(var d=[];;){var e=n(a);if(!e)return;if("selfClose"!=e){var f=a.line,g=a.ch,h=l(a);if(!h)return;if(h[1])d.push(h[2]);else{for(var i=d.length-1;i>=0;--i)if(d[i]==h[2]){d.length=i;break}if(0>i&&(!c||c==h[2]))return{tag:h[2],from:b(a.line,a.ch),to:b(f,g)}}}else l(a)}}var b=a.Pos,d="A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD",e=d+"-:.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040",f=new RegExp("<(/?)(["+d+"]["+e+"]*)","g");a.registerHelper("fold","xml",function(a,c){for(var d=new g(a,c.line,0);;){var f,e=m(d);if(!e||d.line!=c.line||!(f=k(d)))return;if(!e[1]&&"selfClose"!=f){var c=b(d.line,d.ch),h=o(d,e[2]);return h&&{from:c,to:h.from}}}}),a.findMatchingTag=function(a,d,e){var f=new g(a,d.line,d.ch,e);if(-1!=f.text.indexOf(">")||-1!=f.text.indexOf("<")){var h=k(f),i=h&&b(f.line,f.ch),j=h&&l(f);if(h&&j&&!(c(f,d)>0)){var m={from:b(f.line,f.ch),to:i,tag:j[2]};return"selfClose"==h?{open:m,close:null,at:"open"}:j[1]?{open:p(f,j[2]),close:m,at:"close"}:(f=new g(a,i.line,i.ch,e),{open:m,close:o(f,j[2]),at:"open"})}}},a.findEnclosingTag=function(a,b,c){for(var d=new g(a,b.line,b.ch,c);;){var e=p(d);if(!e)break;var f=new g(a,b.line,b.ch,c),h=o(f,e.tag);if(h)return{open:e,close:h}}},a.scanForClosingTag=function(a,b,c,d){var e=new g(a,b.line,b.ch,d?{from:0,to:d}:null);return o(e,c)}});
\ 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/codemirror/lib/codemirror.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror.css
deleted file mode 100644
index e2d4ec2048c4..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror.css
+++ /dev/null
@@ -1,318 +0,0 @@
-/* BASICS */
-
-.CodeMirror {
-  /* Set height, width, borders, and global font properties here */
-  font-family: monospace;
-  height: 300px;
-}
-.CodeMirror-scroll {
-  /* Set scrolling behaviour here */
-  overflow: auto;
-}
-
-/* PADDING */
-
-.CodeMirror-lines {
-  padding: 4px 0; /* Vertical padding around content */
-}
-.CodeMirror pre {
-  padding: 0 4px; /* Horizontal padding of content */
-}
-
-.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-  background-color: white; /* The little square between H and V scrollbars */
-}
-
-/* GUTTER */
-
-.CodeMirror-gutters {
-  border-right: 1px solid #ddd;
-  background-color: #f7f7f7;
-  white-space: nowrap;
-}
-.CodeMirror-linenumbers {}
-.CodeMirror-linenumber {
-  padding: 0 3px 0 5px;
-  min-width: 20px;
-  text-align: right;
-  color: #999;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-}
-
-.CodeMirror-guttermarker { color: black; }
-.CodeMirror-guttermarker-subtle { color: #999; }
-
-/* CURSOR */
-
-.CodeMirror div.CodeMirror-cursor {
-  border-left: 1px solid black;
-}
-/* Shown when moving in bi-directional text */
-.CodeMirror div.CodeMirror-secondarycursor {
-  border-left: 1px solid silver;
-}
-.CodeMirror.cm-fat-cursor div.CodeMirror-cursor {
-  width: auto;
-  border: 0;
-  background: #7e7;
-}
-.CodeMirror.cm-fat-cursor div.CodeMirror-cursors {
-  z-index: 1;
-}
-
-.cm-animate-fat-cursor {
-  width: auto;
-  border: 0;
-  -webkit-animation: blink 1.06s steps(1) infinite;
-  -moz-animation: blink 1.06s steps(1) infinite;
-  animation: blink 1.06s steps(1) infinite;
-}
-@-moz-keyframes blink {
-  0% { background: #7e7; }
-  50% { background: none; }
-  100% { background: #7e7; }
-}
-@-webkit-keyframes blink {
-  0% { background: #7e7; }
-  50% { background: none; }
-  100% { background: #7e7; }
-}
-@keyframes blink {
-  0% { background: #7e7; }
-  50% { background: none; }
-  100% { background: #7e7; }
-}
-
-/* Can style cursor different in overwrite (non-insert) mode */
-div.CodeMirror-overwrite div.CodeMirror-cursor {}
-
-.cm-tab { display: inline-block; text-decoration: inherit; }
-
-.CodeMirror-ruler {
-  border-left: 1px solid #ccc;
-  position: absolute;
-}
-
-/* DEFAULT THEME */
-
-.cm-s-default .cm-keyword {color: #708;}
-.cm-s-default .cm-atom {color: #219;}
-.cm-s-default .cm-number {color: #164;}
-.cm-s-default .cm-def {color: #00f;}
-.cm-s-default .cm-variable,
-.cm-s-default .cm-punctuation,
-.cm-s-default .cm-property,
-.cm-s-default .cm-operator {}
-.cm-s-default .cm-variable-2 {color: #05a;}
-.cm-s-default .cm-variable-3 {color: #085;}
-.cm-s-default .cm-comment {color: #a50;}
-.cm-s-default .cm-string {color: #a11;}
-.cm-s-default .cm-string-2 {color: #f50;}
-.cm-s-default .cm-meta {color: #555;}
-.cm-s-default .cm-qualifier {color: #555;}
-.cm-s-default .cm-builtin {color: #30a;}
-.cm-s-default .cm-bracket {color: #997;}
-.cm-s-default .cm-tag {color: #170;}
-.cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
-.cm-s-default .cm-hr {color: #999;}
-.cm-s-default .cm-link {color: #00c;}
-
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-.cm-strikethrough {text-decoration: line-through;}
-
-.cm-s-default .cm-error {color: #f00;}
-.cm-invalidchar {color: #f00;}
-
-/* Default styles for common addons */
-
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
-.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
-.CodeMirror-activeline-background {background: #e8f2ff;}
-
-/* STOP */
-
-/* The rest of this file contains styles related to the mechanics of
-   the editor. You probably shouldn't touch them. */
-
-.CodeMirror {
-  line-height: 1;
-  position: relative;
-  overflow: hidden;
-  background: white;
-  color: black;
-}
-
-.CodeMirror-scroll {
-  /* 30px is the magic margin used to hide the element's real scrollbars */
-  /* See overflow: hidden in .CodeMirror */
-  margin-bottom: -30px; margin-right: -30px;
-  padding-bottom: 30px;
-  height: 100%;
-  outline: none; /* Prevent dragging from highlighting the element */
-  position: relative;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-}
-.CodeMirror-sizer {
-  position: relative;
-  border-right: 30px solid transparent;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-}
-
-/* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actuall scrolling happens, thus preventing shaking and
-   flickering artifacts. */
-.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-  position: absolute;
-  z-index: 6;
-  display: none;
-}
-.CodeMirror-vscrollbar {
-  right: 0; top: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-.CodeMirror-hscrollbar {
-  bottom: 0; left: 0;
-  overflow-y: hidden;
-  overflow-x: scroll;
-}
-.CodeMirror-scrollbar-filler {
-  right: 0; bottom: 0;
-}
-.CodeMirror-gutter-filler {
-  left: 0; bottom: 0;
-}
-
-.CodeMirror-gutters {
-  position: absolute; left: 0; top: 0;
-  padding-bottom: 30px;
-  z-index: 3;
-}
-.CodeMirror-gutter {
-  white-space: normal;
-  height: 100%;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  padding-bottom: 30px;
-  margin-bottom: -32px;
-  display: inline-block;
-  /* Hack to make IE7 behave */
-  *zoom:1;
-  *display:inline;
-}
-.CodeMirror-gutter-wrapper {
-  position: absolute;
-  z-index: 4;
-  height: 100%;
-}
-.CodeMirror-gutter-elt {
-  position: absolute;
-  cursor: default;
-  z-index: 4;
-}
-
-.CodeMirror-lines {
-  cursor: text;
-  min-height: 1px; /* prevents collapsing before first draw */
-}
-.CodeMirror pre {
-  /* Reset some styles that the rest of the page might have set */
-  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
-  border-width: 0;
-  background: transparent;
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  white-space: pre;
-  word-wrap: normal;
-  line-height: inherit;
-  color: inherit;
-  z-index: 2;
-  position: relative;
-  overflow: visible;
-}
-.CodeMirror-wrap pre {
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  word-break: normal;
-}
-
-.CodeMirror-linebackground {
-  position: absolute;
-  left: 0; right: 0; top: 0; bottom: 0;
-  z-index: 0;
-}
-
-.CodeMirror-linewidget {
-  position: relative;
-  z-index: 2;
-  overflow: auto;
-}
-
-.CodeMirror-widget {}
-
-.CodeMirror-wrap .CodeMirror-scroll {
-  overflow-x: hidden;
-}
-
-.CodeMirror-measure {
-  position: absolute;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-}
-.CodeMirror-measure pre { position: static; }
-
-.CodeMirror div.CodeMirror-cursor {
-  position: absolute;
-  border-right: none;
-  width: 0;
-}
-
-div.CodeMirror-cursors {
-  visibility: hidden;
-  position: relative;
-  z-index: 3;
-}
-.CodeMirror-focused div.CodeMirror-cursors {
-  visibility: visible;
-}
-
-.CodeMirror-selected { background: #d9d9d9; }
-.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
-.CodeMirror-crosshair { cursor: crosshair; }
-
-.cm-searching {
-  background: #ffa;
-  background: rgba(255, 255, 0, .4);
-}
-
-/* IE7 hack to prevent it from returning funny offsetTops on the spans */
-.CodeMirror span { *vertical-align: text-bottom; }
-
-/* Used to force a border model for a node */
-.cm-force-border { padding-right: .1px; }
-
-@media print {
-  /* Hide the cursor when printing */
-  .CodeMirror div.CodeMirror-cursors {
-    visibility: hidden;
-  }
-}
-
-/* See issue #2901 */
-.cm-tab-wrap-hack:after { content: ''; }
-
-/* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext { background: none; }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.css
deleted file mode 100644
index 6ab472d69d1f..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.css
+++ /dev/null
@@ -1,117 +0,0 @@
-/*
- * 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.
- */
-/*
-    Styles for the Nifi combo box.
-*/
-
-.combo {
-    color: #262626;
-    font-family: Roboto, sans-serif;
-    font-size: 13px;
-    padding:0 10px;
-    height: 30px;
-    line-height: 30px;
-    border: 1px solid #eaeef0;
-}
-
-.combo-options {
-    background: #fefefe;
-    color: #262626;
-    list-style: none;
-    border: 1px solid #004849;
-    box-shadow:0 3px 6px rgba(0,0,0,0.3);
-    z-index: 2000;
-    border-top: none;
-    font-size: 13px;
-}
-
-.combo-options .fa {
-    color: #004849;
-}
-
-.combo-open {
-    background: #fff !important;
-    border: 1px solid #004849 !important;
-    border-bottom: 1px solid #fff !important;
-    font-weight: bold;
-    color: #262626;
-    box-shadow:0 3px 6px rgba(0,0,0,0.3);
-}
-
-.combo-arrow {
-    float: right;
-    width: 10px;
-    margin-top: 8px;
-}
-
-.combo-text {
-    float: left;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    width: 80%;
-    font-weight: normal;
-}
-
-div.selected-disabled-option {
-    font-style: italic;
-    color: #828282;
-}
-
-.combo-options ul > li {
-    height: 32px;
-    padding: 0px 10px;
-}
-
-.combo-options ul > li.disabled-option {
-    font-style: italic;
-}
-
-.combo-option-text {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    float: left;
-    height: 32px;
-    font-weight: normal;
-    line-height: 32px;
-}
-
-.combo-glass-pane {
-    position: absolute;
-    background: #E3E8EB;
-    opacity: 0.0;
-    left: 0px;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    z-index: 1999;
-}
-
-div.combo-nifi-tooltip {
-    border: 1px solid #454545;
-    background-color: #FFFFA3;
-    color: #454545;
-}
-
-div.combo-button-normal {
-    background-color: #eaeef0;
-}
-
-span.combo-option-text {
-    max-width: 227px;
-}
\ 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/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
deleted file mode 100644
index b6d324b400be..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js
+++ /dev/null
@@ -1,363 +0,0 @@
-/*
- * 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.
- */
-
-/* requires qtip plugin to be loaded first*/
-
-/**
- * Create a new combo box. The options are specified in the following
- * format:
- *
- * {
- *   selectedOption: {
- *      value: 'option 2'
- *   },
- *   options: [{
- *      text: 'option 1',
- *      value: 'option 1',
- *      disabled: true,
- *      description: 'Option description...'
- *   }, {
- *      text: 'option 2',
- *      value: 'option 2',
- *      optionClass: 'my-style'
- *   }],
- *   maxHeight: 300,
- *   select: selectHandler
- * }
- *
- * Options have a label (specified as the text property that is rendered
- * to users) and a value which is not. Additionally, options can be marked
- * as disabled. A disabled option cannot be selected by a user but may be
- * programmatically selected (supporting the restoration of options that have
- * become invalid). It is up to the developer to ensure that the selected
- * option is not disabled.
- *
- * The optionClass option supports specifying a class to apply to the
- * option element.
- */
-
-/**
- * jQuery plugin for a NiFi style combo box.
- *
- * @param {type} $
- * @returns {undefined}
- */
-(function ($) {
-
-    var isUndefined = function (obj) {
-        return typeof obj === 'undefined';
-    };
-
-    var isNull = function (obj) {
-        return obj === null;
-    };
-
-    var isDefinedAndNotNull = function (obj) {
-        return !isUndefined(obj) && !isNull(obj);
-    };
-
-    var isBlank = function (str) {
-        return isUndefined(str) || isNull(str) || str === '';
-    };
-
-    var selectOption = function (combo, text, value) {
-        var config = combo.data('options');
-        var comboText = combo.children('div.combo-text');
-        var selectedOption;
-
-        // attempt to match on value first
-        if (isDefinedAndNotNull(value)) {
-            $.each(config.options, function (i, option) {
-                if (value === option.value) {
-                    selectedOption = option;
-                }
-            });
-        }
-
-        // if no option values matched, try the text
-        if (isUndefined(selectedOption)) {
-            $.each(config.options, function (i, option) {
-                if (isUndefined(selectedOption)) {
-                    selectedOption = option;
-                }
-
-                if (text === option.text) {
-                    selectedOption = option;
-                }
-            });
-        }
-
-        // ensure we found the selected option
-        if (isDefinedAndNotNull(selectedOption)) {
-            comboText.removeClass('selected-disabled-option').attr('title', selectedOption.text).text(selectedOption.text).data('text', selectedOption.text);
-
-            // if the selected option is disabled show it
-            if (selectedOption.disabled === true) {
-                comboText.addClass('selected-disabled-option');
-            }
-
-            // store the selected option
-            combo.data('selected-option', selectedOption);
-
-            // fire a select event if applicable
-            if (isDefinedAndNotNull(config.select)) {
-                config.select.call(combo, selectedOption);
-            }
-        }
-
-    };
-
-    var methods = {
-
-        /**
-         * Initializes the combo box.
-         *
-         * @argument {object} options The options for the combo box
-         */
-        init: function (options) {
-            return this.each(function () {
-                // ensure the options have been properly specified
-                if (isDefinedAndNotNull(options) &&
-                    isDefinedAndNotNull(options.options)) {
-
-                    // get the combo 
-                    var combo = $(this);
-
-                    // clear any current contents, remote events, and store options
-                    combo.empty().unbind().data('options', options);
-
-                    // add a div to hold the text
-                    $('<div class="combo-text"></div>').appendTo(combo);
-
-                    // add hover effect and handle a combo click
-                    combo.addClass('combo-button-normal pointer combo').hover(function () {
-                        combo.removeClass('button-normal').addClass('combo-button-over');
-                    }, function () {
-                        combo.removeClass('button-over').addClass('combo-button-normal');
-                    }).click(function (event) {
-                        var comboConfigOptions = combo.data('options');
-                        
-                        //add active styles
-                        $(this).addClass('combo-open');
-
-                        // determine the position of the element in question
-                        var position = combo.offset();
-
-                        // create the combo box options beneath it
-                        var comboOptions = $('<div></div>').addClass('combo-options').css({
-                            'position': 'absolute',
-                            'left': position.left + 'px',
-                            'top': (position.top + combo.outerHeight() - 1) + 'px',
-                            'width': (combo.outerWidth() - 2) + 'px',
-                            'overflow-y': 'auto'
-                        });
-
-                        // keep track of the overall height
-                        var actualHeight = 0;
-
-                        // set the max height if necessary
-                        var maxHeight = -1;
-                        if (isDefinedAndNotNull(comboConfigOptions.maxHeight)) {
-                            maxHeight = parseInt(comboConfigOptions.maxHeight);
-                            if (maxHeight > 0) {
-                                comboOptions.css('max-height', maxHeight + 'px');
-                            }
-                        }
-
-                        // create the list that will contain the options
-                        var optionList = $('<ul></ul>').appendTo(comboOptions);
-
-                        // process the options
-                        $.each(comboConfigOptions.options, function (i, option) {
-                            var optionText = $('<span class="combo-option-text"></span>').attr('title', option.text).text(option.text);
-                            var optionValue = $('<span class="hidden"></span>').text(option.value);
-
-                            // create each option
-                            var optionElement = $('<li></li>').addClass(option.optionClass).append(optionText).append(optionValue).appendTo(optionList);
-
-                            // this is option is enabled register appropriate listeners
-                            if (option.disabled === true) {
-                                optionElement.addClass('unset disabled-option');
-                            } else {
-                                optionElement.click(function () {
-                                    //remove active styles
-                                    $('.combo').removeClass('combo-open');
-
-                                    // select the option
-                                    selectOption(combo, option.text, option.value);
-
-                                    // click the glass pane which will hide the options
-                                    $('.combo-glass-pane').click();
-                                }).hover(function () {
-                                    $(this).addClass('pointer').css('background', '#eaeef0');
-                                }, function () {
-                                    $(this).removeClass('pointer').css('background', '#ffffff');
-                                });
-                            }
-
-                            if (!isBlank(option.description)) {
-                                $('<div style="float: right; line-height: 32px;" class="fa fa-question-circle"></div>').appendTo(optionElement).qtip($.extend({},
-                                    {
-                                        style: {
-                                            classes: 'nifi-tooltip'
-                                        },
-                                        show: {
-                                            solo: true,
-                                            effect: function(offset) {
-                                                $(this).slideDown(100);
-                                            }
-                                        },
-                                        hide: {
-                                            effect: function(offset) {
-                                                $(this).slideUp(100);
-                                            }
-                                        },
-                                        position: {
-                                            at: 'bottom center',
-                                            my: 'top center',
-                                            adjust: {
-                                                y: 5
-                                            }
-                                        }
-                                    },
-                                    {
-                                        content: option.description,
-                                        position: {
-                                            at: 'top right',
-                                            my: 'bottom left'
-                                        }
-                                    }
-                                ));
-                            }
-
-                            actualHeight += 16;
-                        });
-
-                        // show the glass pane to catch the click events
-                        var comboGlassPane = $('<div class="combo-glass-pane"></div>').one('click', function () {
-                            if (comboOptions.length !== 0) {
-                                // clean up tooltips
-                                comboOptions.find('.fa').each(function () {
-                                    var tip = $(this);
-                                    if (tip.data('qtip')) {
-                                        var api = tip.qtip('api');
-                                        api.destroy(true);
-                                    }
-                                });
-                                // remove the options
-                                comboOptions.remove();
-
-                                //remove active styles
-                                $('.combo').removeClass('combo-open');
-                            }
-
-                            // remove the glass pane
-                            $(this).remove();
-                        });
-
-                        // add the combo to the dom
-                        $('body').append(comboOptions).append(comboGlassPane);
-
-                        // stop the event propagation so the body click event isn't fired
-                        event.stopPropagation();
-                    });
-
-                    // add the drop down arrow
-                    $('<div class="combo-arrow fa fa-chevron-down"></div>').appendTo(combo);
-
-                    // set the selection
-                    if (isDefinedAndNotNull(options.selectedOption)) {
-                        selectOption(combo, options.selectedOption.text, options.selectedOption.value);
-                    } else {
-                        selectOption(combo);
-                    }
-                }
-            });
-        },
-
-        /**
-         * Returns the selected option of the first matching element.
-         */
-        getSelectedOption: function () {
-            var value;
-
-            this.each(function () {
-                value = $(this).data('selected-option');
-                return false;
-            });
-
-            return value;
-        },
-
-        /**
-         * Sets the selected option.
-         *
-         * @argument {object} option The option to select
-         */
-        setSelectedOption: function (option) {
-            return this.each(function () {
-                selectOption($(this), option.text, option.value);
-            });
-        },
-
-        /**
-         * Sets whether the specified option is enabled or disabled.
-         * 
-         * @param option
-         * @param enabled
-         */
-        setOptionEnabled: function (option, enabled) {
-            return this.each(function () {
-                var combo = $(this);
-                var comboConfigOptions = combo.data('options');
-
-                $.each(comboConfigOptions.options, function (i, configOption) {
-                     if (configOption.value === option.value) {
-                        configOption.disabled = !enabled;   
-                     }
-                });
-            });
-        },
-
-        /**
-         * Destroys the combo.
-         */
-        destroy: function () {
-            return this.each(function () {
-                $(this).empty().unbind().removeData();
-
-                // remove the options if open
-                $('div.combo-glass-pane').click();
-            });
-        },
-
-        /**
-         * Closes the combo.
-         */
-        close: function () {
-            $('div.combo-glass-pane').click();
-        }
-    };
-
-    $.fn.combo = function (method) {
-        if (methods[method]) {
-            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-        } else {
-            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/combo/menuArrow.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/menuArrow.png
deleted file mode 100755
index 48c4d20fa98e0e023078b0d1bef94fceb8a63e32..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 251
zcmeAS@N?(olHy`uVBq!ia0vp^AT}!p8<4C?sm%aVEX7WqAsj$Z!;#Vf<Z~8yL>4nJ
za0`Jj<E6WGe}IBAC9V-A!TD(=<%vb942~)JNvR5MnMJAP`9;~q3eLeMY@04G0ICxM
zsdFw$O)SaG&r=A=%uQu5Fx3YlLqkz@OC_L+U{4pv5RRG2CdS6U&pWUr2#Si9rX(cX
z@OPN2{P_R>|B^z&!m=MU%I4VD|6@G%|G%PHdP+({@EeQdV?E3~Kv2*MB9|^*dZJ5q
f_wL>N2c9s*8cQpFj@Z2yXgq_btDnm{r-UW|fe%ZO

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/menuArrowSmall.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/menuArrowSmall.png
deleted file mode 100755
index ee380931b21506f0e7c5e9a6737fa4a9df6608cd..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 233
zcmeAS@N?(olHy`uVBq!ia0vp^96-#%!3HEZpRM}<;uJf1hHwBu4M$1`kk47*5n0T@
zz%2yAjF;}#{Q(Nfl(<He1m~xflqVLYGB~E>C#5R5WfrBD=NDxcD>w(6ux+}$0H{t3
zq|Ui0HL)Z!KTjbfGdGpNz*HZI3=KuqEtP;O96eneLpWw8n;0AaKHtE;p`)wI%E-Xr
z&2h!|Cw~0@U*C4*hzq+;m(26?^XnTv{;%)gm6Vh`(Iu09W=3H{V`C#D!}LU9<u`w>
Rm;w!B@O1TaS?83{1OP;~N(=x1

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.base64.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.base64.js
deleted file mode 100644
index 32ceab073fef..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.base64.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/*!
- * jquery.base64.js 0.0.3 - https://github.com/yckart/jquery.base64.js
- * Makes Base64 en & -decoding simpler as it is.
- *
- * Based upon: https://gist.github.com/Yaffle/1284012
- *
- * Copyright (c) 2012 Yannick Albert (http://yckart.com)
- * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
- * 2013/02/10
- **/
-;(function($) {
-
-    var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",
-        a256 = '',
-        r64 = [256],
-        r256 = [256],
-        i = 0;
-
-    var UTF8 = {
-
-        /**
-         * Encode multi-byte Unicode string into utf-8 multiple single-byte characters
-         * (BMP / basic multilingual plane only)
-         *
-         * Chars in range U+0080 - U+07FF are encoded in 2 chars, U+0800 - U+FFFF in 3 chars
-         *
-         * @param {String} strUni Unicode string to be encoded as UTF-8
-         * @returns {String} encoded string
-         */
-        encode: function(strUni) {
-            // use regular expressions & String.replace callback function for better efficiency
-            // than procedural approaches
-            var strUtf = strUni.replace(/[\u0080-\u07ff]/g, // U+0080 - U+07FF => 2 bytes 110yyyyy, 10zzzzzz
-            function(c) {
-                var cc = c.charCodeAt(0);
-                return String.fromCharCode(0xc0 | cc >> 6, 0x80 | cc & 0x3f);
-            })
-            .replace(/[\u0800-\uffff]/g, // U+0800 - U+FFFF => 3 bytes 1110xxxx, 10yyyyyy, 10zzzzzz
-            function(c) {
-                var cc = c.charCodeAt(0);
-                return String.fromCharCode(0xe0 | cc >> 12, 0x80 | cc >> 6 & 0x3F, 0x80 | cc & 0x3f);
-            });
-            return strUtf;
-        },
-
-        /**
-         * Decode utf-8 encoded string back into multi-byte Unicode characters
-         *
-         * @param {String} strUtf UTF-8 string to be decoded back to Unicode
-         * @returns {String} decoded string
-         */
-        decode: function(strUtf) {
-            // note: decode 3-byte chars first as decoded 2-byte strings could appear to be 3-byte char!
-            var strUni = strUtf.replace(/[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g, // 3-byte chars
-            function(c) { // (note parentheses for precence)
-                var cc = ((c.charCodeAt(0) & 0x0f) << 12) | ((c.charCodeAt(1) & 0x3f) << 6) | (c.charCodeAt(2) & 0x3f);
-                return String.fromCharCode(cc);
-            })
-            .replace(/[\u00c0-\u00df][\u0080-\u00bf]/g, // 2-byte chars
-            function(c) { // (note parentheses for precence)
-                var cc = (c.charCodeAt(0) & 0x1f) << 6 | c.charCodeAt(1) & 0x3f;
-                return String.fromCharCode(cc);
-            });
-            return strUni;
-        }
-    };
-
-    while(i < 256) {
-        var c = String.fromCharCode(i);
-        a256 += c;
-        r256[i] = i;
-        r64[i] = b64.indexOf(c);
-        ++i;
-    }
-
-    function code(s, discard, alpha, beta, w1, w2) {
-        s = String(s);
-        var buffer = 0,
-            i = 0,
-            length = s.length,
-            result = '',
-            bitsInBuffer = 0;
-
-        while(i < length) {
-            var c = s.charCodeAt(i);
-            c = c < 256 ? alpha[c] : -1;
-
-            buffer = (buffer << w1) + c;
-            bitsInBuffer += w1;
-
-            while(bitsInBuffer >= w2) {
-                bitsInBuffer -= w2;
-                var tmp = buffer >> bitsInBuffer;
-                result += beta.charAt(tmp);
-                buffer ^= tmp << bitsInBuffer;
-            }
-            ++i;
-        }
-        if(!discard && bitsInBuffer > 0) result += beta.charAt(buffer << (w2 - bitsInBuffer));
-        return result;
-    }
-
-    var Plugin = $.base64 = function(dir, input, encode) {
-            return input ? Plugin[dir](input, encode) : dir ? null : this;
-        };
-
-    Plugin.btoa = Plugin.encode = function(plain, utf8encode) {
-        plain = Plugin.raw === false || Plugin.utf8encode || utf8encode ? UTF8.encode(plain) : plain;
-        plain = code(plain, false, r256, b64, 8, 6);
-        return plain + '===='.slice((plain.length % 4) || 4);
-    };
-
-    Plugin.atob = Plugin.decode = function(coded, utf8decode) {
-        coded = coded.replace(/[^A-Za-z0-9\+\/\=]/g, "");
-        coded = String(coded).split('=');
-        var i = coded.length;
-        do {--i;
-            coded[i] = code(coded[i], true, r64, a256, 6, 8);
-        } while (i > 0);
-        coded = coded.join('');
-        return Plugin.raw === false || Plugin.utf8decode || utf8decode ? UTF8.decode(coded) : coded;
-    };
-}(jQuery));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.center.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.center.js
deleted file mode 100644
index 407bd47e1e09..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.center.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * 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.
- */
-
-/**
- * Simple jQuery plugin to center any matched elements. Implementation
- * specifics suggested on StackOverflow.
- * 
- * @param {type} $
- * @returns {undefined}
- */
-(function ($) {
-    $.fn.center = function () {
-        return this.each(function () {
-            $(this).css({
-                'position': 'absolute',
-                'top': ($(window).height() - $(this).outerHeight()) / 2 + $(window).scrollTop() + 'px',
-                'left': ($(window).width() - $(this).outerWidth()) / 2 + $(window).scrollLeft() + 'px'
-            });
-        });
-    };
-})(jQuery);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.count.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.count.js
deleted file mode 100644
index e61d932a4390..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.count.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * 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.
- */
-
-/**
- * Adds a simple character counter functionality to the matched elements. The 
- * options are specified in the following format:
- * 
- * {
- *   charCountField: element or dom id for displaying the remaining characters (must support .text())
- *   maxLength: maxlength in case the matched element does not have a max length set
- * }
- * 
- * Implementation specifics suggested on StackOverflow.
- * 
- * @param {type} $
- * @returns {undefined}
- */
-(function ($) {
-
-    var isUndefined = function (obj) {
-        return typeof obj === 'undefined';
-    };
-
-    var isNull = function (obj) {
-        return obj === null;
-    };
-
-    var isDefinedAndNotNull = function (obj) {
-        return !isUndefined(obj) && !isNull(obj);
-    };
-
-    var methods = {
-        
-        /**
-         * Initializes the count widget.
-         * 
-         * @param {type} options
-         */
-        init: function (options) {
-            return this.each(function () {
-                // ensure the options have been properly specified
-                if (isDefinedAndNotNull(options) && isDefinedAndNotNull(options.charCountField)) {
-
-                    // get the field
-                    var field = $(this);
-
-                    // determine the appropriate max length
-                    var maxLength = $(field).attr('maxlength');
-                    if (isUndefined(maxLength) || isNull(maxLength)) {
-                        maxLength = options.maxLength;
-                    }
-
-                    // ensure we found a max length
-                    if (isDefinedAndNotNull(maxLength)) {
-                        // listen for keyup and blur events
-                        $(field).bind('keyup blur', function () {
-                            // get the current value
-                            var value = $(field).val();
-
-                            // determine if the length is too long
-                            if (value.length > maxLength) {
-                                // update the value accordingly
-                                $(field).val(value.slice(0, maxLength));
-
-                                // update the count field
-                                $(options.charCountField).text(0);
-                            } else {
-                                // update the count field
-                                $(options.charCountField).text(maxLength - value.length);
-                            }
-                        }).keyup();
-                    }
-                }
-            });
-        }
-    };
-
-    $.fn.count = function (method) {
-        if (methods[method]) {
-            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-        } else {
-            return methods.init.apply(this, arguments);
-        }
-    };
-})(jQuery);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.each.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.each.js
deleted file mode 100644
index 90f76b880f72..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.each.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * 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.
- */
-(function ($) {
-    // get a reference to the original each method
-    var origEach = $.each;
-
-    // override the jQuery each method (not $.fn.each as
-    // we are not calling with a jQuery 'instance', $.fn.each
-    // defers to this function with 'this' as the object param)
-    $.each = function (object, callback, args) {
-        // ensure the object specified is not undefined or null
-        if (typeof object !== 'undefined' && object !== null) {
-            return origEach.call(this, object, callback, args);
-        }
-        return object;
-    };
-})(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/jquery.ellipsis.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.ellipsis.js
deleted file mode 100644
index ceb95dfa8e21..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.ellipsis.js
+++ /dev/null
@@ -1,165 +0,0 @@
-/*
- * 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.
- */
-
-/**
- * Plugin to provide support for generating ellipsis. This plugin comprises
- * a number of suggested techniques found on StackOverflow.
- * 
- * @param {type} $
- * @returns {undefined}
- */
-(function ($) {
-
-    var entityMap = {
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        '"': '&quot;',
-        "'": '&#39;',
-        '/': '&#x2f;'
-    };
-
-    var escapeHtml = function (string) {
-        return String(string).replace(/[&<>"'\/]/g, function (s) {
-            return entityMap[s];
-        });
-    };
-
-    /**
-     * Inserts ellipsis in elements where the contents exceed the width. The
-     * original text is preserved in the title attribute of the element. The
-     * element should have the following css properties:
-     * 
-     * overflow: hidden;
-     * white-space: nowrap;
-     * width: 50px (value must be set in 'px')
-     * 
-     * If multiline is desired, add a 'multiline' class to the element.
-     * 
-     * @param {type} addTooltip
-     */
-    $.fn.ellipsis = function (addTooltip) {
-        addTooltip = (typeof addTooltip === 'undefined' || addTooltip === null) ? true : addTooltip;
-
-        // function for determining if the browser supports ellipsis via css
-        function supportsOverflowProperty() {
-            var s = document.documentElement.style;
-            return ('textOverflow' in s || 'OTextOverflow' in s);
-        }
-
-        function binarySearch(length, funct) {
-            var low = 0;
-            var high = length - 1;
-            var best = -1;
-            var mid;
-
-            while (low <= high) {
-                mid = ~~((low + high) / 2);
-                var result = funct(mid);
-                if (result < 0) {
-                    high = mid - 1;
-                } else if (result > 0) {
-                    low = mid + 1;
-                } else {
-                    best = mid;
-                    low = mid + 1;
-                }
-            }
-
-            return best;
-        }
-
-        // chain and process each matched element
-        return this.each(function () {
-            var element = $(this);
-
-            // preserve the original text in the title attribute
-            var text = element.text();
-            if (addTooltip) {
-                element.attr('title', text);
-            }
-
-            // determine if this is a multiline element
-            var multiline = element.hasClass('multiline');
-
-            // if its not multiline and the browser supports ellipsis via css, use it
-            if (!multiline && supportsOverflowProperty()) {
-                element.css({
-                    'text-overflow': 'ellipsis',
-                    'o-text-overflow': 'ellipsis'
-                });
-            } else {
-                // clone the element and add to the body - this addresses issues where
-                // the element may not have been added to the dom (causing its size and 
-                // styles to be incorrect)
-                var cloneElement = $(this.cloneNode(true)).hide().appendTo('body');
-
-                // make a scratch element to adjusting the text size
-                var scratchElement = $(this.cloneNode(true)).hide().css({
-                    'position': 'absolute',
-                    'overflow': 'visible'
-                }).width(multiline ? cloneElement.width() : 'auto').height(multiline ? 'auto' : cloneElement.height()).appendTo('body');
-
-                // function for determining if the scratch element is too tall
-                var isTooTall = function () {
-                    return scratchElement.height() >= cloneElement.height();
-                };
-
-                // function for determining if the scratch element is too wide
-                var isTooWide = function () {
-                    return scratchElement.width() >= cloneElement.width();
-                };
-
-                // determine the appropriate function to use
-                var isTooBig = multiline ? isTooTall : isTooWide;
-
-                // if the text is too big, adjust it accordingly
-                if (isTooBig()) {
-                    var originalText = escapeHtml(text);
-
-                    // function for creating the text within the scratch element
-                    var createContent = function (i) {
-                        var t = originalText.substr(0, i);
-                        scratchElement.html(t + '&#8230;');
-                    };
-
-                    // function for performing the search
-                    var search = function (i) {
-                        createContent(i);
-                        if (isTooBig()) {
-                            return -1;
-                        }
-                        return 0;
-                    };
-
-                    // determine the appropriate length
-                    var length = binarySearch(originalText.length - 1, search);
-
-                    // create the content at the appropriate length
-                    createContent(length);
-                }
-
-                // update the actual elements value
-                element.html(scratchElement.html());
-
-                // remove the cloned and scratch elements
-                cloneElement.remove();
-                scratchElement.remove();
-            }
-        });
-    };
-})(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/jquery.tab.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.tab.js
deleted file mode 100644
index 5155153e7c68..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.tab.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * 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.
- */
-/**
- * Plugin to support entering tab characters into textarea's or textfield's. 
- * Code heavily borrowed from stackoverflow post by user tim-down
- * (http://stackoverflow.com/questions/4379535/tab-within-a-text-area-without-changing-focus-jquery/4380032#4380032)
- */
-(function ($) {
-    /**
-     * Adds key listeners for capturing tab keys.
-     */
-    function allowTabChar(element) {
-        $(element).keydown(function (e) {
-            if (e.which == 9) {
-                if (e.shiftKey == false && e.ctrlKey == false) {
-                    insertText(this, '\t');
-                }
-                return false;
-            }
-        }).keypress(function (e) {
-            if (e.which == 9) {
-                return false;
-            }
-        });
-    }
-
-    /**
-     * Inserts the specified text into the specified element.
-     */
-    function insertText(element, text) {
-        element.focus();
-        if (typeof element.selectionStart == 'number') {
-            var value = element.value;
-            var selectionStart = element.selectionStart;
-            element.value = value.slice(0, selectionStart) + text + value.slice(element.selectionEnd);
-            element.selectionEnd = element.selectionStart = selectionStart + text.length;
-        } else if (typeof document.selection != 'undefined') {
-            var textRange = document.selection.createRange();
-            textRange.text = text;
-            textRange.collapse(false);
-            textRange.select();
-        }
-    }
-
-    $.fn.tab = function () {
-        return this.each(function () {
-            if (this.nodeType == 1) {
-                var nodeName = this.nodeName.toLowerCase();
-                if (nodeName == 'textarea' || (nodeName == 'input' && this.type == 'text')) {
-                    allowTabChar(this);
-                }
-            }
-        });
-    }
-})(jQuery);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
deleted file mode 100644
index d998436a189b..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * 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.
- */
-/*
-    Styles for the Nifi dialog.
-*/
-
-.dialog {
-    background-color: #ffffff;
-    box-shadow: 0 5px 8px rgba(0,0,0,0.30);
-    overflow: hidden;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-}
-
-.small-dialog {
-    max-height: 32%;
-    max-width: 23%;
-    min-height: 250px;
-    min-width: 320px;
-    font-size: 13px;
-    line-height: 1.3;
-}
-
-.medium-dialog {
-    max-height: 55%;
-    max-width: 34%;
-    min-height: 420px;
-    min-width: 470px;
-}
-
-.large-dialog {
-    max-height: 72%;
-    max-width: 55%;
-    min-height: 560px;
-    min-width: 760px;
-}
-
-.modal-glass {
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    opacity: 0.65;
-}
-
-.dialog-header {
-    height: 56px;
-    background-color: #728E9B;
-    overflow: hidden;
-}
-
-.dialog-header-text {
-    color: #fff;
-    font-size: 18px;
-    font-family: 'Roboto Slab';
-    font-style: normal;
-    font-weight: bold;
-    line-height: 56px;
-    padding-left: 20px;
-    text-overflow: ellipsis;
-}
-
-.dialog-content {
-    position: absolute;
-    top: 76px;
-    bottom: 52px;
-    left: 20px;
-    right: 20px;
-    overflow-y: auto;
-    word-wrap: break-word;
-}
-
-.dialog-buttons {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 32px;
-}
\ 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/modal/jquery.modal.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
deleted file mode 100644
index 25fe57ff74e4..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
+++ /dev/null
@@ -1,578 +0,0 @@
-/*
- * 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.
- */
-
-/**
- * Create a new dialog.
- *
- * If the height, width, and fullscreen breakpoints options are not set this plugin will look for (and use)
- * any CSS defined styles for height, min/max-height, width, min/max-width. If no CSS styles are defined then the
- * plugin will attempt to calculate these values when the dialog is first opened (based on screen size).
- *
- * The options are specified in the following format:
- *
- * {
- *   header: true,
- *   footer: true,
- *   headerText: 'Dialog Header',
- *   scrollableContentStyle: 'scrollable',
- *   buttons: [{
- *      buttonText: 'Cancel',
- *          color: {
- *              base: '#728E9B',
- *              hover: '#004849',
- *              text: '#ffffff'
- *          },
- *          disabled: isDisabledFunction,
- *      handler: {
- *          click: cancelHandler
- *      }
- *   }, {
- *      buttonText: 'Apply',
- *          color: {
- *              base: '#E3E8EB',
- *              hover: '#C7D2D7',
- *              text: '#004849'
- *          },
- *          disabled: isDisabledFunction,
- *      handler: {
- *          click: applyHandler
- *      }
- *   }],
- *   handler: {
- *      close: closeHandler,
- *      open: openHandler,
- *      resize: resizeHandler
- *   },
- *   height: "55%", //optional. Property can also be set with css (accepts 'px' or '%' values)
- *   width: "34%", //optional. Property can also be set with css (accepts 'px' or '%' values)
- *   min-height: "420px", //optional, defaults to 'height'. Property  can also be set with css (accepts 'px' values)
- *   min-width: "470px" //optional, defaults to 'width'. Property can also be set with css (accepts 'px' values)
- *   responsive: {
- *       x: "true", //optional, default true
- *       y: "true", //optional, default true
- *       fullscreen-height: "420px", //optional, default is original dialog height (accepts 'px' values)
- *       fullscreen-width: "470px", //optional, default is original dialog width (accepts 'px' values)
- *      },
- *      glasspane: "#728E9B" //optional, sets the color of modal glasspane...default if unset is the dialog header color
- * }
- *
- * The content of the dialog MUST be contained in an element with the class `dialog-content`
- * directly under the dialog element.
- *
- * <div id="dialogId">
- *  <div class="dialog-content">
- *      //Dialog Content....
- *  </div>
- * </div>
- *
- * @argument {jQuery} $
- */
-(function ($) {
-
-    var isUndefined = function (obj) {
-        return typeof obj === 'undefined';
-    };
-
-    var isNull = function (obj) {
-        return obj === null;
-    };
-
-    var isDefinedAndNotNull = function (obj) {
-        return !isUndefined(obj) && !isNull(obj);
-    };
-
-    var isBlank = function (str) {
-        return isUndefined(str) || isNull(str) || str === '';
-    };
-
-    // private function for adding buttons
-    var addButtons = function (dialog, buttonModel) {
-        if (isDefinedAndNotNull(buttonModel)) {
-            var buttonWrapper = $('<div class="dialog-buttons"></div>');
-            $.each(buttonModel, function (i, buttonConfig) {
-                var isDisabled = function () {
-                    return typeof buttonConfig.disabled === 'function' && buttonConfig.disabled.call() === true;
-                };
-
-                // create the button
-                var button = $('<div class="button"></div>').append($('<span></span>').text(buttonConfig.buttonText));
-
-                // add the class if specified
-                if (isDefinedAndNotNull(buttonConfig.clazz)) {
-                    button.addClass(buttonConfig.clazz);
-                }
-
-                // set the color if specified
-                if (isDefinedAndNotNull(buttonConfig.color)) {
-                    button.css({
-                        'background': buttonConfig.color.base,
-                        'color': buttonConfig.color.text
-                    });
-                }
-
-                // check if the button should be disabled
-                if (isDisabled()) {
-                    button.addClass('disabled-button');
-                } else {
-                    // enable custom hover if specified
-                    if (isDefinedAndNotNull(buttonConfig.color)) {
-                        button.hover(function () {
-                            $(this).css("background-color", buttonConfig.color.hover);
-                        }, function () {
-                            $(this).css("background-color", buttonConfig.color.base);
-                        });
-                    }
-
-                    button.click(function () {
-                        var handler = $(this).data('handler');
-                        if (isDefinedAndNotNull(handler) && typeof handler.click === 'function') {
-                            handler.click.call(dialog);
-                        }
-                    });
-                }
-
-                // add the button to the wrapper
-                button.data('handler', buttonConfig.handler).appendTo(buttonWrapper);
-            });
-
-            // store the button model to refresh later
-            dialog.append(buttonWrapper).data('buttonModel', buttonModel);
-        }
-    };
-
-    var methods = {
-
-        /**
-         * Initializes the dialog.
-         *
-         * @argument {object} options The options for the plugin
-         */
-        init: function (options) {
-            return this.each(function () {
-                // get the combo
-                var dialog = $(this).addClass('dialog cancellable modal');
-                dialog.css('display', 'none');
-
-                var nfDialogData = {};
-                if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
-                    nfDialogData = dialog.data('nf-dialog');
-                }
-
-                // ensure the options have been properly specified
-                if (isDefinedAndNotNull(options)) {
-
-                    $.extend(nfDialogData, options);
-
-                    //persist data attribute
-                    dialog.data('nfDialog', nfDialogData);
-                }
-
-                // determine if dialog needs a header
-                if (!isDefinedAndNotNull(nfDialogData.header) || nfDialogData.header) {
-                    var dialogHeaderText = $('<span class="dialog-header-text"></span>');
-                    var dialogHeader = $('<div class="dialog-header"></div>').prepend(dialogHeaderText);
-
-                    // determine if the specified header text is null
-                    if (!isBlank(nfDialogData.headerText)) {
-                        dialogHeaderText.text(nfDialogData.headerText);
-                    }
-
-                    dialog.prepend(dialogHeader);
-                }
-
-                // determine if dialog needs footer/buttons
-                if (!isDefinedAndNotNull(nfDialogData.footer) || nfDialogData.footer) {
-                    // add the buttons
-                    addButtons(dialog, nfDialogData.buttons);
-                }
-            });
-        },
-
-        /**
-         * Sets the handler that is used when the dialog is closed.
-         *
-         * @argument {function} handler The function to call when hiding the dialog
-         */
-        setCloseHandler: function (handler) {
-            return this.each(function (index, dialog) {
-
-                var nfDialogData = {};
-                if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
-                    nfDialogData = $(dialog).data('nf-dialog');
-                }
-                if (!isDefinedAndNotNull(nfDialogData.handler)){
-                    nfDialogData.handler = {};
-                }
-                nfDialogData.handler.close = handler;
-
-                //persist data attribute
-                $(dialog).data('nfDialog', nfDialogData);
-            });
-        },
-
-        /**
-         * Sets the handler that is used when the dialog is opened.
-         *
-         * @argument {function} handler The function to call when showing the dialog
-         */
-        setOpenHandler: function (handler) {
-            return this.each(function (index, dialog) {
-
-                var nfDialogData = {};
-                if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
-                    nfDialogData = $(dialog).data('nf-dialog');
-                }
-                if (!isDefinedAndNotNull(nfDialogData.handler)){
-                    nfDialogData.handler = {};
-                }
-                nfDialogData.handler.open = handler;
-
-                //persist data attribute
-                $(dialog).data('nfDialog', nfDialogData);
-            });
-        },
-
-        /**
-         * Sets the handler that is used when the dialog is resized.
-         *
-         * @argument {function} handler The function to call when resizing the dialog
-         */
-        setResizeHandler: function (handler) {
-            return this.each(function (index, dialog) {
-
-                var nfDialogData = {};
-                if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
-                    nfDialogData = $(dialog).data('nf-dialog');
-                }
-                if (!isDefinedAndNotNull(nfDialogData.handler)){
-                    nfDialogData.handler = {};
-                }
-                nfDialogData.handler.resize = handler;
-
-                //persist data attribute
-                $(dialog).data('nfDialog', nfDialogData);
-            });
-        },
-
-        /**
-         * Updates the button model for the selected dialog.
-         *
-         * @argument {array} buttons The new button model
-         */
-        setButtonModel: function (buttons) {
-            return this.each(function () {
-                if (isDefinedAndNotNull(buttons)) {
-                    var dialog = $(this);
-
-                    // remove the current buttons
-                    dialog.children('.dialog-buttons').remove();
-
-                    // add the new buttons
-                    addButtons(dialog, buttons);
-                }
-            });
-        },
-
-        /**
-         * Refreshes the buttons with the existing model.
-         */
-        refreshButtons: function () {
-            return this.each(function () {
-                var dialog = $(this);
-                var buttons = dialog.data('buttonModel');
-
-                // remove the current buttons
-                dialog.children('.dialog-buttons').remove();
-
-                // add the new buttons
-                addButtons(dialog, buttons);
-            });
-        },
-
-        /**
-         * Sets the header text of the dialog.
-         *
-         * @argument {string} text Text to use a as a header
-         */
-        setHeaderText: function (text) {
-            return this.each(function () {
-                $(this).find('span.dialog-header-text').text(text);
-            });
-        },
-
-        resize: function () {
-            var dialog = $(this);
-            var dialogContent = dialog.find('.dialog-content');
-
-            var nfDialogData = {};
-            if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
-                nfDialogData = dialog.data('nf-dialog');
-            }
-
-            //initialize responsive properties
-            if (!isDefinedAndNotNull(nfDialogData.responsive)) {
-                nfDialogData.responsive = {};
-
-                if (!isDefinedAndNotNull(nfDialogData.responsive.x)) {
-                    nfDialogData.responsive.x = true;
-                }
-
-                if (!isDefinedAndNotNull(nfDialogData.responsive.y)) {
-                    nfDialogData.responsive.y = true;
-                }
-            } else {
-                if (!isDefinedAndNotNull(nfDialogData.responsive.x)) {
-                    nfDialogData.responsive.x = true;
-                } else {
-                    nfDialogData.responsive.x = (nfDialogData.responsive.x == "true" || nfDialogData.responsive.x == true) ? true : false;
-                }
-
-                if (!isDefinedAndNotNull(nfDialogData.responsive.y)) {
-                    nfDialogData.responsive.y = true;
-                } else {
-                    nfDialogData.responsive.y = (nfDialogData.responsive.y == "true" || nfDialogData.responsive.y == true) ? true : false;
-                }
-            }
-
-            if (nfDialogData.responsive.y || nfDialogData.responsive.x) {
-
-                var fullscreenHeight;
-                var fullscreenWidth;
-
-                if (isDefinedAndNotNull(nfDialogData.responsive['fullscreen-height'])) {
-                    fullscreenHeight = parseInt(nfDialogData.responsive['fullscreen-height'], 10);
-                } else {
-                    nfDialogData.responsive['fullscreen-height'] = dialog.height() + 'px';
-
-                    fullscreenHeight = parseInt(nfDialogData.responsive['fullscreen-height'], 10);
-                }
-
-                if (isDefinedAndNotNull(nfDialogData.responsive['fullscreen-width'])) {
-                    fullscreenWidth = parseInt(nfDialogData.responsive['fullscreen-width'], 10);
-                } else {
-                    nfDialogData.responsive['fullscreen-width'] = dialog.width() + 'px';
-
-                    fullscreenWidth = parseInt(nfDialogData.responsive['fullscreen-width'], 10);
-                }
-
-                if (!isDefinedAndNotNull(nfDialogData.width)) {
-                    nfDialogData.width = dialog.css('width');
-                }
-
-                if (!isDefinedAndNotNull(nfDialogData['min-width'])) {
-                    if (parseInt(dialog.css('min-width'), 10) > 0) {
-                        nfDialogData['min-width'] = dialog.css('min-width');
-                    } else {
-                        nfDialogData['min-width'] = nfDialogData.width;
-                    }
-                }
-
-                //min-width should always be set in terms of px
-                if (nfDialogData['min-width'].indexOf("%") > 0) {
-                    nfDialogData['min-width'] = ($(window).width() * (parseInt(nfDialogData['min-width'], 10) / 100)) + 'px';
-                }
-
-                if (!isDefinedAndNotNull(nfDialogData.height)) {
-                    nfDialogData.height = dialog.css('height');
-                }
-
-                if (!isDefinedAndNotNull(nfDialogData['min-height'])) {
-                    if (parseInt(dialog.css('min-height'), 10) > 0) {
-                        nfDialogData['min-height'] = dialog.css('min-height');
-                    } else {
-                        nfDialogData['min-height'] = nfDialogData.height;
-                    }
-                }
-
-                //min-height should always be set in terms of px
-                if (nfDialogData['min-height'].indexOf("%") > 0) {
-                    nfDialogData['min-height'] = ($(window).height() * (parseInt(nfDialogData['min-height'], 10) / 100)) + 'px';
-                }
-
-                //resize dialog
-                if ($(window).height() < fullscreenHeight) {
-                    if (nfDialogData.responsive.y) {
-                        dialog.css('height', '100%');
-                        dialog.css('min-height', '100%');
-                    }
-                } else {
-                    //set the dialog min-height
-                    dialog.css('min-height', nfDialogData['min-height']);
-                    if (nfDialogData.responsive.y) {
-                        //make sure nfDialogData.height is in terms of %
-                        if (nfDialogData.height.indexOf("px") > 0) {
-                            nfDialogData.height = (parseInt(nfDialogData.height, 10) / $(window).height() * 100) + '%';
-                        }
-                        dialog.css('height', nfDialogData.height);
-                    }
-                }
-
-                if ($(window).width() < fullscreenWidth) {
-                    if (nfDialogData.responsive.x) {
-                        dialog.css('width', '100%');
-                        dialog.css('min-width', '100%');
-                    }
-                } else {
-                    //set the dialog width
-                    dialog.css('min-width', nfDialogData['min-width']);
-                    if (nfDialogData.responsive.x) {
-                        //make sure nfDialogData.width is in terms of %
-                        if (nfDialogData.width.indexOf("px") > 0) {
-                            nfDialogData.width = (parseInt(nfDialogData.width, 10) / $(window).width() * 100) + '%';
-                        }
-                        dialog.css('width', nfDialogData.width);
-                    }
-                }
-
-                dialog.center();
-
-                //persist data attribute
-                dialog.data('nfDialog', nfDialogData);
-            }
-
-            //apply scrollable style if applicable
-            if (dialogContent[0].offsetHeight < dialogContent[0].scrollHeight) {
-                // your element has overflow
-                if (isDefinedAndNotNull(nfDialogData.scrollableContentStyle)) {
-                    dialogContent.addClass(nfDialogData.scrollableContentStyle);
-                }
-            } else {
-                // your element doesn't have overflow
-                if (isDefinedAndNotNull(nfDialogData.scrollableContentStyle)) {
-                    dialogContent.removeClass(nfDialogData.scrollableContentStyle);
-                }
-            }
-
-            if (isDefinedAndNotNull(nfDialogData.handler)) {
-                var handler = nfDialogData.handler.resize;
-                if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
-                    // invoke the handler
-                    handler.call(dialog);
-                }
-            }
-        },
-
-        /**
-         * Shows the dialog.
-         */
-        show: function () {
-            var dialog = $(this);
-
-            var zIndex = dialog.css('z-index');
-            if (zIndex === 'auto') {
-                if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
-                    zIndex = (isDefinedAndNotNull(dialog.data('nf-dialog')['z-index'])) ?
-                        dialog.data('nf-dialog')['z-index'] : 1301;
-                } else {
-                    zIndex = 1301;
-                }
-            }
-            var openDialogs = $.makeArray($('.dialog:visible'));
-            if (openDialogs.length >= 1){
-                var zVals = openDialogs.map(function(openDialog){
-                    var index;
-                    return isNaN(index = parseInt($(openDialog).css("z-index"), 10)) ? 0 : index;
-                });
-                //Add 2 so that we have room for the glass pane overlay of the new dialog
-                zIndex = Math.max.apply(null, zVals) + 2;
-            }
-            dialog.css('z-index', zIndex);
-
-            var nfDialogData = {};
-            if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
-                nfDialogData = dialog.data('nf-dialog');
-            }
-
-            var glasspane;
-            if (isDefinedAndNotNull(nfDialogData.glasspane)) {
-                glasspane = nfDialogData.glasspane;
-            } else {
-                nfDialogData.glasspane = glasspane = dialog.find('.dialog-header').css('background-color'); //default to header color
-            }
-
-            if(top !== window || !isDefinedAndNotNull(nfDialogData.glasspane)) {
-                nfDialogData.glasspane = glasspane = 'transparent';
-            }
-
-            if (!$('body').find("[data-nf-dialog-parent='" + dialog.attr('id') + "']").is(':visible')) {
-                //create glass pane overlay
-                $('<div></div>').attr('data-nf-dialog-parent', dialog.attr('id')).addClass("modal-glass").css({
-                    "background-color": glasspane,
-                    "z-index": zIndex - 1
-                }).appendTo($('body'));
-            }
-
-            //persist data attribute
-            dialog.data('nfDialog', nfDialogData);
-
-            return this.each(function () {
-                // show the dialog
-                if (!dialog.is(':visible')) {
-                    dialog.show();
-                    dialog.modal('resize');
-                    dialog.center();
-
-                    if (isDefinedAndNotNull(nfDialogData.handler)) {
-                        var handler = nfDialogData.handler.open;
-                        if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
-                            // invoke the handler
-                            handler.call(dialog);
-                        }
-                    }
-                }
-            });
-        },
-
-        /**
-         * Hides the dialog.
-         */
-        hide: function () {
-            return this.each(function () {
-                var dialog = $(this);
-
-                var nfDialogData = {};
-                if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
-                    nfDialogData = dialog.data('nf-dialog');
-                }
-
-                if (isDefinedAndNotNull(nfDialogData.handler)) {
-                    var handler = nfDialogData.handler.close;
-                    if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
-                        // invoke the handler
-                        handler.call(dialog);
-                    }
-                }
-
-                // remove the modal glass pane overlay
-                $('body').find("[data-nf-dialog-parent='" + dialog.attr('id') + "']").remove();
-
-                if (dialog.is(':visible')) {
-                    // hide the dialog
-                    dialog.hide();
-                }
-            });
-        }
-    };
-
-    $.fn.modal = function (method) {
-        if (methods[method]) {
-            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-        } else {
-            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/nfeditor/jquery.nfeditor.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.css
deleted file mode 100644
index dcf1457a80e6..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * 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.
- */
-/*
-    CodeMirror styles
-*/
-
-.nfel-editor .CodeMirror {
-    height: 100px;
-    border: 1px solid #aaa;
-    font-family: monospace;
-    background-color: #fff;
-    cursor: default;
-    line-height: normal;
-    min-width: 210px;
-}
-
-.nfel-editor .CodeMirror-scroll {
-    overflow-x: auto;
-    overflow-y: auto;
-}
-
-.nfel-editor .ui-resizable-se {
-    width: 16px;
-    height: 16px;
-    background-image: url(../../../images/iconResize.png);
-    background-color: #fff;
-    z-index: 6;
-}
-
-/*
-    Override some defaults...
-*/
-
-.CodeMirror-hints {
-    font-size: 13px !important;
-    z-index: 100001 !important;
-}
-
-.cm-s-default {
-    font-size: 13px;
-    font-family: monospace;
-}
-
-.cm-s-default .CodeMirror-matchingbracket {
-    color: #000 !important;
-    background-color: #aaa;
-    opacity: 0.5;
-    filter: alpha(opacity=50);
-}
-
-/*
-    Override some defaults for this instance...
-*/
-
-.nfel-editor .CodeMirror-vscrollbar {
-    bottom: 18px !important;
-}
-
-.nfel-editor .CodeMirror-hscrollbar {
-    right: 18px !important;
-}
\ 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/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
deleted file mode 100644
index 8a00257cb950..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.js
+++ /dev/null
@@ -1,335 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'CodeMirror',
-                'nf'],
-            function ($, CodeMirror, nf) {
-                factory($, CodeMirror, nf);
-            });
-    } 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';
-    };
-
-    var isNull = function (obj) {
-        return obj === null;
-    };
-
-    var isDefinedAndNotNull = function (obj) {
-        return !isUndefined(obj) && !isNull(obj);
-    };
-
-    var isBlank = function (str) {
-        return isUndefined(str) || isNull(str) || str === '';
-    };
-
-    var isFunction = function (funct) {
-        return typeof funct === 'function';
-    };
-
-    var methods = {
-
-        /**
-         * 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) {
-            return this.each(function () {
-                if (isUndefined(options) || isNull(options)) {
-                    return false;
-                }
-
-                var languageId = options.languageId;
-                var languageAssist = nf[languageId];
-
-                if (isUndefined(languageAssist) || isNull(languageAssist)) {
-                    return false;
-                }
-
-                // should support resizing
-                var resizable = options.resizable === true;
-
-                // is the property sensitive
-                var sensitive = options.sensitive === true;
-
-                var content = isDefinedAndNotNull(options.content) ? options.content : '';
-                var field = $('<textarea></textarea>').text(content).appendTo($(this));
-
-                // define a mode for NiFi expression language
-                if (isFunction(languageAssist.color)) {
-                    CodeMirror.commands.autocomplete = function (cm) {
-                        if (isFunction(languageAssist.suggest)) {
-                            CodeMirror.showHint(cm, nf[languageId].suggest);
-                        }
-                    };
-
-                    CodeMirror.defineMode(languageId, nf[languageId].color);
-
-                    // is the editor read only
-                    var readOnly = options.readOnly === true;
-
-                    var editor = CodeMirror.fromTextArea(field.get(0), {
-                        mode: languageId,
-                        lineNumbers: true,
-                        matchBrackets: true,
-                        readOnly: readOnly,
-                        extraKeys: {
-                            'Ctrl-Space': 'autocomplete',
-                            'Esc': function (cm) {
-                                if (isFunction(options.escape)) {
-                                    options.escape();
-                                }
-                            },
-                            'Enter': function (cm) {
-                                if (isFunction(options.enter)) {
-                                    options.enter();
-                                }
-                            }
-                        }
-                    });
-
-                    // set the size
-                    var width = null;
-                    if (isDefinedAndNotNull(options.width)) {
-                        width = options.width;
-                    }
-                    var height = null;
-                    if (isDefinedAndNotNull(options.height)) {
-                        height = options.height;
-                    }
-                    editor.setSize(width, height);
-
-                    // store the editor instance for later
-                    $(this).data('editorInstance', editor);
-
-                    // get a reference to the codemirror
-                    var codeMirror = $(this).find('.CodeMirror');
-
-                    // reference the code portion
-                    var code = codeMirror.find('.CodeMirror-code');
-
-                    // make this resizable if specified
-                    if (resizable) {
-                        codeMirror.append('<div class="ui-resizable-handle ui-resizable-se"></div>').resizable({
-                            handles: {
-                                'se': '.ui-resizable-se'
-                            },
-                            resize: function () {
-                                editor.setSize($(this).width(), $(this).height());
-                                editor.refresh();
-                            }
-                        });
-                    }
-
-                    // handle keydown to signify the content has changed
-                    editor.on('change', function (cm, event) {
-                        codeMirror.addClass('modified');
-                    });
-
-                    // handle keyHandled to stop event propagation/default as necessary
-                    editor.on('keyHandled', function (cm, name, evt) {
-                        if (name === 'Esc') {
-                            // stop propagation of the escape event
-                            evt.stopImmediatePropagation();
-                            evt.preventDefault();
-                        }
-                    });
-
-                    // handle sensitive values differently
-                    if (sensitive) {
-                        code.addClass('sensitive');
-
-                        var handleSensitive = function (cm, event) {
-                            if (code.hasClass('sensitive')) {
-                                code.removeClass('sensitive');
-                                editor.setValue('');
-                            }
-                        };
-
-                        // remove the sensitive style if necessary
-                        editor.on('mousedown', handleSensitive);
-                        editor.on('keydown', handleSensitive);
-                    }
-
-                    // set the min width/height
-                    if (isDefinedAndNotNull(options.minWidth)) {
-                        codeMirror.resizable('option', 'minWidth', options.minWidth);
-                    }
-                    if (isDefinedAndNotNull(options.minHeight)) {
-                        codeMirror.resizable('option', 'minHeight', options.minHeight);
-                    }
-                }
-            });
-        },
-
-        /**
-         * Refreshes the editor.
-         */
-        refresh: function () {
-            return this.each(function () {
-                var editor = $(this).data('editorInstance');
-
-                // ensure the editor was initialized
-                if (isDefinedAndNotNull(editor)) {
-                    editor.refresh();
-                }
-            });
-        },
-
-        /**
-         * Sets the size of the editor.
-         *
-         * @param {integer} width
-         * @param {integer} height
-         */
-        setSize: function (width, height) {
-            return this.each(function () {
-                var editor = $(this).data('editorInstance');
-
-                // ensure the editor was initialized
-                if (isDefinedAndNotNull(editor)) {
-                    editor.setSize(width, height);
-                }
-            });
-        },
-
-        /**
-         * Gets the value of the editor in the first matching selector.
-         */
-        getValue: function () {
-            var value;
-
-            this.each(function () {
-                var editor = $(this).data('editorInstance');
-
-                // ensure the editor was initialized
-                if (isDefinedAndNotNull(editor)) {
-                    value = editor.getValue();
-                }
-
-                return false;
-            });
-
-            return value;
-        },
-
-        /**
-         * Sets the value of the editor.
-         *
-         * @param {string} value
-         */
-        setValue: function (value) {
-            return this.each(function () {
-                var editor = $(this).data('editorInstance');
-
-                // ensure the editor was initialized
-                if (isDefinedAndNotNull(editor)) {
-                    editor.setValue(value);
-
-                    // remove the modified marking since the value was reset
-                    $(this).find('.CodeMirror').removeClass('modified');
-                }
-            });
-        },
-
-        /**
-         * Sets the focus.
-         */
-        focus: function () {
-            return this.each(function () {
-                var editor = $(this).data('editorInstance');
-
-                // ensure the editor was initialized
-                if (isDefinedAndNotNull(editor)) {
-                    editor.focus();
-                }
-            });
-        },
-
-        /**
-         * Sets the focus.
-         */
-        selectAll: function () {
-            return this.each(function () {
-                var editor = $(this).data('editorInstance');
-
-                // ensure the editor was initialized
-                if (isDefinedAndNotNull(editor)) {
-                    editor.execCommand('selectAll');
-                }
-            });
-        },
-
-        /**
-         * Gets whether the value of the editor in the first matching selector has been modified.
-         */
-        isModified: function () {
-            var modified;
-
-            this.each(function () {
-                modified = $(this).find('.CodeMirror').hasClass('modified');
-                return false;
-            });
-
-            return modified;
-        },
-
-        /**
-         * Destroys the editor.
-         */
-        destroy: function () {
-            return this.removeData('editorInstance').find('.CodeMirror').removeClass('modified');
-        }
-    };
-
-    $.fn.nfeditor = function (method) {
-        if (methods[method]) {
-            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-        } else {
-            return methods.init.apply(this, arguments);
-        }
-    };
-}));
\ 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.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.css
deleted file mode 100644
index ac4478df5f32..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.css
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * 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.
- */
-
-ul.CodeMirror-hints {
-    overflow-y: scroll;
-}
-
-div.el-section {
-    margin: 5px 0;
-}
-
-div.el-name {
-    font-weight: bold;
-    font-family: monospace;
-    font-size: 16px;
-    margin-bottom: 10px;
-}
-
-div.el-header {
-    float: left;
-    width: 75px;
-    font-weight: bold;
-}
-
-ul.el-arguments {
-    margin-top: 5px;
-    list-style-type: disc;
-    list-style-position: inside;
-}
-
-span.el-argument-name {
-    font-family: monospace;
-}
-
-div.nfel-tooltip {
-    max-width: 350px;
-}
\ 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
deleted file mode 100644
index 44f4b0345ed1..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.js
+++ /dev/null
@@ -1,874 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-/* 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.
-     * 
-     * @param {type} args
-     * @returns {String}
-     */
-    var formatArguments = function(args) {
-        if ($.isEmptyObject(args)) {
-            return '<span class="unset">None</span>';
-        } else {
-            var formatted = '<div class="clear"></div><ul class="el-arguments">';
-            $.each(args, function(key, value) {
-                formatted += (
-                    '<li>' +
-                        '<span class="el-argument-name">' + key + '</span> - ' +
-                        value +
-                    '</li>'
-                );
-            });
-            formatted += '</ul>';
-            return formatted;
-        }
-    };
-    
-    var subjectlessFunctions = [];
-    var functions = [];
-    
-    var subjectlessFunctionRegex = new RegExp('^$');
-    var functionRegex = new RegExp('^$');
-    
-    var functionDetails = {};
-    
-    $.ajax({
-        type: 'GET',
-        url: '../nifi-docs/html/expression-language-guide.html',
-        dataType: 'html'
-    }).done(function(response) {
-        $(response).find('div.function').each(function() {
-            var elFunction = $(this);
-            
-            var name = elFunction.find('h3').text();
-            var description = elFunction.find('span.description').text();
-            var returnType = elFunction.find('span.returnType').text();
-            
-            var subject;
-            var subjectSpan = subject = elFunction.find('span.subject');
-            var subjectless = elFunction.find('span.subjectless');
-            
-            // Determine if this function supports running subjectless
-            if (subjectless.length) {
-                subjectlessFunctions.push(name);
-                subject = '<span class="unset">None</span>';
-            }
-
-            // Determine if this function supports running with a subject
-            if (subjectSpan.length) {
-                functions.push(name);
-                subject = elFunction.find('span.subject').text();
-            }
-
-            // find the arguments
-            var args = {};
-            elFunction.find('span.argName').each(function() {
-                var argName = $(this);
-                var argDescription = argName.next('span.argDesc');
-                args[argName.text()] = argDescription.text(); 
-            });
-            
-            // format the function tooltip
-            functionDetails[name] = 
-                '<div>' + 
-                    '<div class="el-name el-section">' + name + '</div>' +
-                    '<div class="el-section">' + description + '</div>' +
-                    '<div class="el-section">' + 
-                        '<div class="el-header">Arguments</div>' +
-                        formatArguments(args) + 
-                    '</div>' +
-                    '<div class="el-section">' + 
-                        '<div class="el-header">Subject</div>' +
-                        '<p>' + subject + '</p>' + 
-                        '<div class="clear"></div>' +
-                    '</div>' +
-                    '<div class="el-section">' + 
-                        '<div class="el-header">Returns</div>' +
-                        '<p>' + returnType + '</p>' +
-                        '<div class="clear"></div>' +
-                    '</div>' +
-                '</div>';
-        });
-    }).always(function() {
-        // build the regex for all functions discovered
-        subjectlessFunctionRegex = new RegExp('^((' + subjectlessFunctions.join(')|(') + '))$');
-        functionRegex = new RegExp('^((' + functions.join(')|(') + '))$');
-    });
-    
-    // valid context states
-    var SUBJECT = 'subject';
-    var FUNCTION = 'function';
-    var SUBJECT_OR_FUNCTION = 'subject-or-function';
-    var EXPRESSION = 'expression';
-    var ARGUMENTS = 'arguments';
-    var ARGUMENT = 'argument';
-    var INVALID = 'invalid';
-    
-    /**
-     * Handles dollars identifies on the stream.
-     * 
-     * @param {object} stream   The character stream
-     * @param {object} states    The states
-     */
-    var handleDollar = function (stream, states) {
-        // determine the number of sequential dollars
-        var dollarCount = 0;
-        stream.eatWhile(function (ch) {
-            if (ch === '$') {
-                dollarCount++;
-                return true;
-            }
-            return false;
-        });
-
-        // if there is an even number of consecutive dollars this expression is escaped
-        if (dollarCount % 2 === 0) {
-            // do not style an escaped expression
-            return null;
-        }
-
-        // if there was an odd number of consecutive dollars and there was more than 1
-        if (dollarCount > 1) {
-            // back up one char so we can process the start sequence next iteration
-            stream.backUp(1);
-
-            // do not style the preceeding dollars
-            return null;
-        }
-
-        // if the next character isn't the start of an expression
-        if (stream.peek() === '{') {
-            // consume the open curly
-            stream.next();
-
-            // new expression start
-            states.push({
-                context: EXPRESSION
-            });
-
-            // consume any addition whitespace
-            stream.eatSpace();
-
-            return 'bracket';
-        } else {
-            // not a valid start sequence
-            return null;
-        }
-    };
-
-    /**
-     * Handles dollars identifies on the stream.
-     * 
-     * @param {object} stream   The character stream
-     * @param {object} state    The current state
-     */
-    var handleStringLiteral = function (stream, state) {
-        var current = stream.next();
-        var foundTrailing = false;
-        var foundEscapeChar = false;
-
-        // locate a closing string delimitor
-        var foundStringLiteral = stream.eatWhile(function (ch) {
-            // we've just found the trailing delimitor, stop
-            if (foundTrailing === true) {
-                return false;
-            }
-
-            // if this is the trailing delimitor, only consume
-            // if we did not see the escape character on the 
-            // previous iteration
-            if (ch === current) {
-                foundTrailing = foundEscapeChar === false;
-            }
-
-            // reset the escape character flag
-            foundEscapeChar = false;
-
-            // if this is the escape character, set the flag
-            if (ch === '\\') {
-                foundEscapeChar = true;
-            }
-
-            // consume this character
-            return true;
-        });
-
-        // if we found the trailing delimitor
-        if (foundStringLiteral) {
-            return 'string';
-        }
-
-        // there is no trailing delimitor... clear the current context
-        state.context = INVALID;
-        stream.skipToEnd();
-        return null;
-    };
-    
-    // the api for the currently selected completion
-    var currentApi = null;
-    
-    // the identifier to cancel showing the tip for the next completion
-    var showTip = null;
-    
-    // the apis of every completion rendered
-    var apis = [];
-    
-    /**
-     * Listens for select event on the auto complete.
-     * 
-     * @param {type} completion
-     * @param {type} element
-     * @returns {undefined}
-     */
-    var select = function(completion, element) {
-        hide();
-
-        currentApi = $(element).qtip('api');
-        showTip = setTimeout(function() {
-            currentApi.show();
-        }, 500);
-    };
-    
-    /**
-     * Cancels the next tip to show, if applicable. Hides the currently
-     * visible tip, if applicable.
-     * 
-     * @returns {undefined}
-     */
-    var hide = function() {
-        if (showTip !== null) {
-            clearInterval(showTip);
-            showTip = null;
-        }
-        
-        if (currentApi !== null) {
-            currentApi.hide();  
-        }
-    };
-
-    /**
-     * Listens for close events for the auto complete.
-     * 
-     * @returns {undefined}
-     */
-    var close = function() {
-        if (showTip !== null) {
-            clearInterval(showTip);
-            showTip = null;
-        }
-        
-        // clear the current api (since its in the apis array)
-        currentApi = null;
-        
-        // destroy the tip from every applicable function
-        $.each(apis, function(_, api) {
-            api.destroy(true);
-        });
-        
-        // reset the apis
-        apis = [];
-    };
-
-    /**
-     * Renders an auto complete item.
-     * 
-     * @param {type} element
-     * @param {type} self
-     * @param {type} data
-     * @returns {undefined}
-     */
-    var renderer = function(element, self, data) {
-        var item = $('<div></div>').text(data.text);
-        var li = $(element).qtip({
-            content: functionDetails[data.text],
-            style: {
-                classes: 'nifi-tooltip nfel-tooltip',
-                tip: false,
-                width: 350
-            },
-            show: {
-                event: false,
-                effect: false
-            },
-            hide: {
-                event: false,
-                effect: false
-            },
-            position: {
-                at: 'bottom right',
-                my: 'bottom left',
-                adjust: {
-                    x: 20
-                }
-            }
-        }).append(item);
-        
-        // record the api for destruction later
-        apis.push(li.qtip('api'));
-    };
-    
-    return {
-
-        /**
-         * Returns an object that provides syntax highlighting for NiFi expression language.
-         */
-        color: function () {
-            // builds the states based off the specified initial value
-            var buildStates = function (initialStates) {
-                // each state has a context
-                var states = initialStates;
-
-                return {
-                    copy: function () {
-                        var copy = [];
-                        for (var i = 0; i < states.length; i++) {
-                            copy.push({
-                                context: states[i].context
-                            });
-                        }
-                        return copy;
-                    },
-                    get: function () {
-                        if (states.length === 0) {
-                            return {
-                                context: null
-                            };
-                        } else {
-                            return states[states.length - 1];
-                        }
-                    },
-                    push: function (state) {
-                        return states.push(state);
-                    },
-                    pop: function () {
-                        return states.pop();
-                    }
-                };
-            };
-
-            return {
-                startState: function () {
-                    // build states with an empty array
-                    return buildStates([]);
-                },
-
-                copyState: function (state) {
-                    // build states with 
-                    return buildStates(state.copy());
-                },
-
-                token: function (stream, states) {
-                    // consume any whitespace
-                    if (stream.eatSpace()) {
-                        return null;
-                    }
-
-                    // if we've hit the end of the line
-                    if (stream.eol()) {
-                        return null;
-                    }
-
-                    // get the current character
-                    var current = stream.peek();
-
-                    // if we've hit some comments... will consume the remainder of the line
-                    if (current === '#') {
-                        stream.skipToEnd();
-                        return 'comment';
-                    }
-
-                    // get the current state
-                    var state = states.get();
-
-                    // the current input is invalid
-                    if (state.context === INVALID) {
-                        stream.skipToEnd();
-                        return null;
-                    }
-
-                    // within an expression
-                    if (state.context === EXPRESSION) {
-                        var attributeOrSubjectlessFunctionExpression = /^[^'"#${}()[\],:;\/*\\\s\t\r\n0-9][^'"#${}()[\],:;\/*\\\s\t\r\n]*/;
-
-                        // attempt to extract a function name
-                        var attributeOrSubjectlessFunctionName = stream.match(attributeOrSubjectlessFunctionExpression, false);
-
-                        // if the result returned a match
-                        if (attributeOrSubjectlessFunctionName !== null && attributeOrSubjectlessFunctionName.length === 1) {
-                            // consume the entire token to better support suggest below
-                            stream.match(attributeOrSubjectlessFunctionExpression);
-
-                            // if the result returned a match and is followed by a (
-                            if (subjectlessFunctionRegex.test(attributeOrSubjectlessFunctionName) && stream.peek() === '(') {
-                                // --------------------
-                                // subjectless function
-                                // --------------------
-
-                                // context change to function
-                                state.context = ARGUMENTS;
-
-                                // style for function
-                                return 'builtin';
-                            } else {
-                                // ---------------------
-                                // attribute or function
-                                // ---------------------
-
-                                // context change to function or subject... not sure yet
-                                state.context = SUBJECT_OR_FUNCTION;
-
-                                // this could be an attribute or a partial function name... style as attribute until we know
-                                return 'variable-2';
-                            }
-                        } else if (current === '\'' || current === '"') {
-                            // --------------
-                            // string literal
-                            // --------------
-
-                            // handle the string literal
-                            var expressionStringResult = handleStringLiteral(stream, state);
-
-                            // considered a quoted variable
-                            if (expressionStringResult !== null) {
-                                // context change to function
-                                state.context = SUBJECT;
-                            }
-
-                            return expressionStringResult;
-                        } else if (current === '$') {
-                            // -----------------
-                            // nested expression
-                            // -----------------
-
-                            var expressionDollarResult = handleDollar(stream, states);
-
-                            // if we've found an embedded expression we need to...
-                            if (expressionDollarResult !== null) {
-                                // transition back to subject when this expression completes
-                                state.context = SUBJECT;
-                            }
-
-                            return expressionDollarResult;
-                        } else if (current === '}') {
-                            // -----------------
-                            // end of expression
-                            // -----------------
-
-                            // consume the close
-                            stream.next();
-
-                            // signifies the end of an expression
-                            if (typeof states.pop() === 'undefined') {
-                                return null;
-                            } else {
-                                // style as expression
-                                return 'bracket';
-                            }
-                        } else {
-                            // ----------
-                            // unexpected
-                            // ----------
-
-                            // consume to move along
-                            stream.skipToEnd();
-                            state.context = INVALID;
-
-                            // unexpected...
-                            return null;
-                        }
-                    }
-
-                    // within a subject
-                    if (state.context === SUBJECT || state.context === SUBJECT_OR_FUNCTION) {
-                        // if the next character indicates the start of a function call
-                        if (current === ':') {
-                            // -------------------------
-                            // trigger for function name
-                            // -------------------------
-
-                            // consume the colon and update the context
-                            stream.next();
-                            state.context = FUNCTION;
-
-                            // consume any addition whitespace
-                            stream.eatSpace();
-
-                            // don't style
-                            return null;
-                        } else if (current === '}') {
-                            // -----------------
-                            // end of expression
-                            // -----------------
-
-                            // consume the close
-                            stream.next();
-
-                            // signifies the end of an expression
-                            if (typeof states.pop() === 'undefined') {
-                                return null;
-                            } else {
-                                // style as expression
-                                return 'bracket';
-                            }
-                        } else {
-                            // ----------
-                            // unexpected
-                            // ----------
-
-                            // consume to move along
-                            stream.skipToEnd();
-                            state.context = INVALID;
-
-                            // unexpected...
-                            return null;
-                        }
-                    }
-
-                    // within a function
-                    if (state.context === FUNCTION) {
-                        // attempt to extract a function name
-                        var functionName = stream.match(/^[a-zA-Z]+/, false);
-
-                        // if the result returned a match
-                        if (functionName !== null && functionName.length === 1) {
-                            // consume the entire token to ensure the whole function
-                            // name is matched. this is an issue with functions like
-                            // substring and substringAfter since 'substringA' would
-                            // match the former and when we really want to autocomplete
-                            // against the latter.
-                            stream.match(/^[a-zA-Z]+/);
-
-                            // see if this matches a known function and is followed by (
-                            if (functionRegex.test(functionName) && stream.peek() === '(') {
-                                // --------
-                                // function
-                                // --------
-
-                                // change context to arugments
-                                state.context = ARGUMENTS;
-
-                                // style for function
-                                return 'builtin';
-                            } else {
-                                // ------------------------------
-                                // maybe function... not sure yet
-                                // ------------------------------
-
-                                // not sure yet... 
-                                return null;
-                            }
-                        } else {
-                            // ----------
-                            // unexpected
-                            // ----------
-
-                            // consume and move along
-                            stream.skipToEnd();
-                            state.context = INVALID;
-
-                            // unexpected...
-                            return null;
-                        }
-                    }
-
-                    // within arguments
-                    if (state.context === ARGUMENTS) {
-                        if (current === '(') {
-                            // --------------
-                            // argument start
-                            // --------------
-
-                            // consume the open paranthesis
-                            stream.next();
-
-                            // change context to handle an argument
-                            state.context = ARGUMENT;
-
-                            // start of arguments
-                            return null;
-                        } else if (current === ')') {
-                            // --------------
-                            // argument close
-                            // --------------
-
-                            // consume the close paranthesis
-                            stream.next();
-
-                            // change context to subject for potential chaining
-                            state.context = SUBJECT;
-
-                            // end of arguments
-                            return null;
-                        } else if (current === ',') {
-                            // ------------------
-                            // argument separator
-                            // ------------------
-
-                            // consume the comma
-                            stream.next();
-
-                            // change context back to argument
-                            state.context = ARGUMENT;
-
-                            // argument separator
-                            return null;
-                        } else {
-                            // ----------
-                            // unexpected
-                            // ----------
-
-                            // consume and move along
-                            stream.skipToEnd();
-                            state.context = INVALID;
-
-                            // unexpected...
-                            return null;
-                        }
-                    }
-
-                    // within a specific argument
-                    if (state.context === ARGUMENT) {
-                        if (current === '\'' || current === '"') {
-                            // --------------
-                            // string literal
-                            // --------------
-
-                            // handle the string literal
-                            var argumentStringResult = handleStringLiteral(stream, state);
-
-                            // successfully processed a string literal... 
-                            if (argumentStringResult !== null) {
-                                // change context back to arguments
-                                state.context = ARGUMENTS;
-                            }
-
-                            return argumentStringResult;
-                        } else if (stream.match(/^[-\+]?((([0-9]+\.[0-9]*)([eE][+-]?([0-9])+)?)|((\.[0-9]+)([eE][+-]?([0-9])+)?)|(([0-9]+)([eE][+-]?([0-9])+)))/)) {
-                            // -------------
-                            // Decimal value
-                            // -------------
-                            // This matches the following ANTLR spec for deciamls
-                            //
-                            // DECIMAL :     OP? ('0'..'9')+ '.' ('0'..'9')* EXP?    ^([0-9]+\.[0-9]*)([eE][+-]?([0-9])+)?
-                            //             | OP? '.' ('0'..'9')+ EXP?
-                            //             | OP? ('0'..'9')+ EXP;
-                            //
-                            // fragment OP: ('+'|'-');
-                            // fragment EXP : ('e'|'E') ('+'|'-')? ('0'..'9')+ ;
-
-                            // change context back to arguments
-                            state.context = ARGUMENTS;
-
-                            // style for decimal (use same as number)
-                            return 'number';
-                        } else if (stream.match(/^[-\+]?[0-9]+/)) {
-                            // -------------
-                            // integer value
-                            // -------------
-
-                            // change context back to arguments
-                            state.context = ARGUMENTS;
-
-                            // style for integers
-                            return 'number';
-                        } else if (stream.match(/^((true)|(false))/)) {
-                            // -------------
-                            // boolean value
-                            // -------------
-
-                            // change context back to arguments
-                            state.context = ARGUMENTS;
-
-                            // style for boolean (use same as number)
-                            return 'number';
-                        } else if (current === ')') {
-                            // ----------------------------------
-                            // argument close (zero arg function)
-                            // ----------------------------------
-
-                            // consume the close paranthesis
-                            stream.next();
-
-                            // change context to subject for potential chaining
-                            state.context = SUBJECT;
-
-                            // end of arguments
-                            return null;
-                        } else if (current === '$') {
-                            // -----------------
-                            // nested expression
-                            // -----------------
-
-                            // handle the nested expression
-                            var argumentDollarResult = handleDollar(stream, states);
-
-                            // if we've found an embedded expression we need to...
-                            if (argumentDollarResult !== null) {
-                                // transition back to arguments when then expression completes
-                                state.context = ARGUMENTS;
-                            }
-
-                            return argumentDollarResult;
-                        } else {
-                            // ----------
-                            // unexpected
-                            // ----------
-
-                            // consume and move along
-                            stream.skipToEnd();
-                            state.context = INVALID;
-
-                            // unexpected...
-                            return null;
-                        }
-                    }
-
-                    // signifies the potential start of an expression
-                    if (current === '$') {
-                        return handleDollar(stream, states);
-                    }
-
-                    // signifies the end of an expression
-                    if (current === '}') {
-                        stream.next();
-                        if (typeof states.pop() === 'undefined') {
-                            return null;
-                        } else {
-                            return 'bracket';
-                        }
-                    }
-
-                    // ----------------------------------------------------------
-                    // extra characters that are around expression[s] end up here
-                    // ----------------------------------------------------------
-
-                    // consume the character to keep things moving along
-                    stream.next();
-                    return;
-                }
-            };
-        },
-
-        /**
-         * Returns the suggestions for the content at the current cursor.
-         * 
-         * @param {type} editor
-         */
-        suggest: function (editor) {
-            // Find the token at the cursor
-            var cursor = editor.getCursor();
-            var token = editor.getTokenAt(cursor);
-            var includeAll = false;
-            var state = token.state.get();
-
-            // whether or not the current context is within a function
-            var isFunction = function (context) {
-                // attempting to match a function name or already successfully matched a function name
-                return context === FUNCTION || context === ARGUMENTS;
-            };
-
-            // whether or not the current context is within a subject-less funciton
-            var isSubjectlessFunction = function (context) {
-                // within an expression when no characters are found or when the string may be an attribute or a function
-                return context === EXPRESSION || context === SUBJECT_OR_FUNCTION;
-            };
-
-            // only support suggestion in certain cases
-            var context = state.context;
-            if (!isSubjectlessFunction(context) && !isFunction(context)) {
-                return null;
-            }
-
-            // lower case for case insensitive comparison
-            var value = token.string.toLowerCase();
-
-            // trim to ignore extra whitespace
-            var trimmed = $.trim(value);
-
-            // identify potential patterns and increment the start location appropriately
-            if (trimmed === '${' || trimmed === ':') {
-                includeAll = true;
-                token.start += value.length;
-            }
-
-            var getCompletions = function(functions) {
-                var found = [];
-
-                $.each(functions, function (i, funct) {
-                    if ($.inArray(funct, found) === -1) {
-                        if (includeAll || funct.toLowerCase().indexOf(value) === 0) {
-                            found.push({
-                                text: funct,
-                                render: renderer
-                            });
-                        }
-                    }
-                });
-
-                return found;
-            };
-
-            // get the suggestions for the current context
-            var completionList = getCompletions(isSubjectlessFunction(context) ? subjectlessFunctions : functions);
-            completionList = completionList.sort(function (a, b) {
-                var aLower = a.text.toLowerCase();
-                var bLower = b.text.toLowerCase();
-                return aLower === bLower ? 0 : aLower > bLower ? 1 : -1;
-            });
-
-            var completions = {
-                list: completionList,
-                from: {
-                    line: cursor.line,
-                    ch: token.start
-                },
-                to: {
-                    line: cursor.line,
-                    ch: token.end
-                }
-            };
-
-            CodeMirror.on(completions, 'select', select);
-            CodeMirror.on(completions, 'close', close);
-
-            return completions;
-        }
-    };
-}));
\ 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/buttonNewProperty.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/buttonNewProperty.png
deleted file mode 100755
index 3e51a153069813db95ba0c298d59af8504a73122..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 590
zcmV-U0<ryxP)<h;3K|Lk000e1NJLTq001Tc000vR1^@s6{EC0D00004b3#c}2nYxW
zd<bNS00009a7bBm000W`000W`0Ya=am;e9(9CSrkbW?9;ba!ELWdK2BZ(?O2Mrm?o
zcW-iQb09-gGzPNMpa1{>7IZ~ebVG7wVRUJ4ZXi@?ZDjy3H7_wSFEKFCBDYfj00E{+
zL_t(YiOrV3PQx$|#?Nu5Ed7(b07DlRRt5$JIuL|}gb*-*#7lr!C`=Vk!N39oT@YE|
z0a&wSWp0(anW`d!&6MDaW4Bd3^d{fk=U=`!P8<?NkpN5Kx~?r0)Z#dXAPANQg<%M;
z>sn*g0021WOT+T8#i{`S2qD069HluLjg*?_c}6ojR+1!2&G&sRt5`8gsUjkTKp1@$
zd9bktgb<@K6YJ$OF7m_8bt9`VR&|$-<G^J4jq)m8*_aL1>Kmh!Dtn4j3X|y+<!PEC
zjpuoaF@WklC9|qDzVEBX^5{LkD?nZE`nZG4l*f0EZ(3Hl*FD=q^NY7K4|%!g4SBvT
zR<UA(!2lRz3&DoNA!J#GYMgUOl4M~PV+`f!Q3@g8@?Z-IZl6B>$0s|eCxlQwsCmvg
zhwf<y^{yUXi}C%%zA{f{A!GG=9f`-|G5ln|XmYdJtTa;28;u64GsYBFtJTu7j7L({
zMQ0s3wpgoeOn#H(5JJGs(KgC;T3Ms3_s)0cW*Jwkyyr~XS^e^!o5fn~-=2QIzci@b
cZi7wMAK*1zbtJYD761SM07*qoM6N<$f+sZg#{d8T

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
deleted file mode 100644
index 560ba2e64713..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
+++ /dev/null
@@ -1,122 +0,0 @@
-/*
- * 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.
- */
-
-/*
-    Styles for the property table.
-*/
-
-div.required-property-note {
-    font-weight: bold;
-    font-size: 12px;
-    float: left;
-    height: 28px;
-    line-height: 28px;
-    margin-left: 6px;
-}
-
-div.add-property {
-    float: right;
-    margin-bottom: 4px;
-    font-size: 16px;
-    text-transform: uppercase;
-}
-
-div.add-property-text {
-    float: left;
-    margin-left: 5px;
-    height: 19px;
-    line-height: 19px;
-    color: #262626;
-}
-
-div.property-table {
-    position: absolute;
-    top: 42px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    min-height: 150px;
-}
-
-.property-table .fa {
-    float: right;
-    color: #004849;
-    line-height: 18px;
-}
-
-/*
-    New property dialog
-*/
-
-div.new-property-button-container {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    right: 0;
-}
-
-/*
-    Styles for the property editor.
-*/
-
-div.slickgrid-nfel-editor .nfel-editor, div.property-detail .nfel-editor {
-    margin-bottom: 5px;
-    margin-top: 10px;
-}
-
-div.edit-property-value {
-    height: 20px;
-    padding-right: 60px;
-}
-
-textarea.value-field {
-    float: left;
-    width: 95%;
-    height: 26px;
-    font-size: 11px !important;
-    resize: vertical;
-    overflow-y: auto;
-
-}
-
-div.string-check-container {
-    line-height: 20px;
-}
-
-div.string-check {
-    width: 12px;
-    height: 12px;
-    margin-top: 3px;
-}
-
-span.string-check-label {
-    font-size: 13px;
-    font-weight: normal;
-    color: #262626;
-}
-
-div.value pre {
-    overflow: hidden;
-}
-
-/*
-    Table styles
-*/
-
-td.right-border {
-    border-right: 1px solid #aaa;
-}
\ 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
deleted file mode 100644
index 7cac90d0e00d..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
+++ /dev/null
@@ -1,1928 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  /* 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,
-                        nfCommon,
-                        nfUniversalCapture,
-                        nfDialog,
-                        nfClient,
-                        nfErrorHandler,
-                        nfProcessGroupConfiguration,
-                        nfSettings) {
-                  factory($,
-                      Slick,
-                      nfCommon,
-                      nfUniversalCapture,
-                      nfDialog,
-                      nfClient,
-                      nfErrorHandler,
-                      nfProcessGroupConfiguration,
-                      nfSettings);
-              });
-      } 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,
-                    nfCommon,
-                    nfUniversalCapture,
-                    nfDialog,
-                    nfClient,
-                    nfErrorHandler,
-                    nfProcessGroupConfiguration,
-                    nfSettings) {
-  
-        var languageId = 'nfel';
-        var editorClass = languageId + '-editor';
-        var groupId = null;
-    
-        // text editor
-        var textEditor = function (args) {
-            var scope = this;
-            var initialValue = '';
-            var previousValue;
-            var propertyDescriptor;
-            var wrapper;
-            var isEmpty;
-            var input;
-    
-            this.init = function () {
-                var container = $('body');
-    
-                // get the property descriptor
-                var gridContainer = $(args.grid.getContainerNode());
-                var descriptors = gridContainer.data('descriptors');
-                propertyDescriptor = descriptors[args.item.property];
-    
-                // record the previous value
-                previousValue = args.item[args.column.field];
-    
-                // create the wrapper
-                wrapper = $('<div></div>').addClass('slickgrid-editor').css({
-                    'z-index': 100000,
-                    'position': 'absolute',
-                    'border-radius': '2px',
-                    'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
-                    'background-color': 'rgb(255, 255, 255)',
-                    'overflow': 'hidden',
-                    'padding': '10px 20px',
-                  'cursor': 'move',
-                  'transform': 'translate3d(0px, 0px, 0px)'
-                }).appendTo(container);
-    
-                // create the input field
-                input = $('<textarea hidefocus rows="5"/>').css({
-                    'height': '80px',
-                    'width': args.position.width + 'px',
-                    'min-width': '212px',
-                    'margin-bottom': '5px',
-                  'margin-top': '10px',
-                  'white-space': 'pre'
-                }).tab().on('keydown', scope.handleKeyDown).appendTo(wrapper);
-    
-                wrapper.draggable({
-                    cancel: '.button, textarea, .nf-checkbox',
-                    containment: 'parent'
-                });
-    
-                // create the button panel
-                var stringCheckPanel = $('<div class="string-check-container">');
-                stringCheckPanel.appendTo(wrapper);
-    
-                // build the custom checkbox
-                isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel);
-              $('<span class="string-check-label nf-checkbox-label">&nbsp;' + nf._.msg('jquery-propertytable.SetEmptyString') + '</span>').appendTo(stringCheckPanel);
-    
-                var ok = $('<div class="button">Ok</div>').css({
-                    'color': '#fff',
-                    'background': '#728E9B'
-                }).hover(
-                    function () {
-                        $(this).css('background', '#004849');
-                    }, function () {
-                        $(this).css('background', '#728E9B');
-                    }).on('click', scope.save);
-              var cancel = $('<div class="secondary-button">' + nf._.msg('jquery-propertytable.Cancel') + '</div>').css({
-                    'color': '#004849',
-                    'background': '#E3E8EB'
-                }).hover(
-                    function () {
-                        $(this).css('background', '#C7D2D7');
-                    }, function () {
-                        $(this).css('background', '#E3E8EB');
-                    }).on('click', scope.cancel);
-                $('<div></div>').css({
-                    'position': 'relative',
-                    'top': '10px',
-                    'left': '20px',
-                    'width': '212px',
-                    'clear': 'both',
-                    'float': 'right'
-                }).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
-    
-                // position and focus
-                scope.position(args.position);
-                input.focus().select();
-            };
-    
-            this.handleKeyDown = function (e) {
-                if (e.which === $.ui.keyCode.ENTER && !e.shiftKey) {
-                    scope.save();
-                } else if (e.which === $.ui.keyCode.ESCAPE) {
-                    scope.cancel();
-    
-                    // prevent further propagation or escape press and prevent default behavior
-                    e.stopImmediatePropagation();
-                    e.preventDefault();
-                }
-            };
-    
-            this.save = function () {
-                args.commitChanges();
-            };
-    
-            this.cancel = function () {
-                input.val(initialValue);
-                args.cancelChanges();
-            };
-    
-            this.hide = function () {
-                wrapper.hide();
-            };
-    
-            this.show = function () {
-                wrapper.show();
-            };
-    
-            this.position = function (position) {
-                wrapper.css({
-                    'top': position.top - 27,
-                    'left': position.left - 20
-                });
-            };
-    
-            this.destroy = function () {
-                wrapper.remove();
-            };
-    
-            this.focus = function () {
-                input.focus();
-            };
-    
-            this.loadValue = function (item) {
-                // determine if this is a sensitive property
-                var isEmptyChecked = false;
-              var sensitive = nfCommon.isSensitiveProperty(propertyDescriptor);
-    
-                // determine the value to use when populating the text field
-              if (nfCommon.isDefinedAndNotNull(item[args.column.field])) {
-                    if (sensitive) {
-                      initialValue = nfCommon.config.sensitiveText;
-                    } else {
-                        initialValue = item[args.column.field];
-                        isEmptyChecked = initialValue === '';
-                    }
-                }
-    
-                // determine if its an empty string
-                var checkboxStyle = isEmptyChecked ? 'checkbox-checked' : 'checkbox-unchecked';
-                isEmpty.addClass(checkboxStyle);
-    
-                // style sensitive properties differently
-                if (sensitive) {
-                    input.addClass('sensitive').keydown(function () {
-                        var sensitiveInput = $(this);
-                        if (sensitiveInput.hasClass('sensitive')) {
-                            sensitiveInput.removeClass('sensitive');
-                          if (sensitiveInput.val() === nfCommon.config.sensitiveText) {
-                                sensitiveInput.val('');
-                            }
-                        }
-                    });
-                }
-    
-                input.val(initialValue);
-                input.select();
-            };
-    
-            this.serializeValue = function () {
-                // if the field has been cleared, set the value accordingly
-                if (input.val() === '') {
-                    // if the user has checked the empty string checkbox, use emtpy string
-                    if (isEmpty.hasClass('checkbox-checked')) {
-                        return '';
-                    } else {
-                        // otherwise if the property is required
-                      if (nfCommon.isRequiredProperty(propertyDescriptor)) {
-                          if (nfCommon.isBlank(propertyDescriptor.defaultValue)) {
-                                return previousValue;
-                            } else {
-                                return propertyDescriptor.defaultValue;
-                            }
-                        } else {
-                            // if the property is not required, clear the value
-                            return null;
-                        }
-                    }
-                } else {
-                    // if the field still has the sensitive class it means a property
-                    // was edited but never modified so we should restore the previous
-                    // value instead of setting it to the 'sensitive value set' string
-                    if (input.hasClass('sensitive')) {
-                        return previousValue;
-                    } else {
-                        // if there is text specified, use that value
-                        return input.val();
-                    }
-                }
-            };
-    
-            this.applyValue = function (item, state) {
-                item[args.column.field] = state;
-            };
-    
-            this.isValueChanged = function () {
-                return scope.serializeValue() !== previousValue;
-            };
-    
-            this.validate = function () {
-                return {
-                    valid: true,
-                    msg: null
-                };
-            };
-    
-            // initialize the custom long text editor
-            this.init();
-        };
-    
-        // nfel editor
-        var nfelEditor = function (args) {
-            var scope = this;
-            var initialValue = '';
-            var previousValue;
-            var propertyDescriptor;
-            var isEmpty;
-            var wrapper;
-            var editor;
-    
-            this.init = function () {
-                var container = $('body');
-    
-                // get the property descriptor
-                var gridContainer = $(args.grid.getContainerNode());
-                var descriptors = gridContainer.data('descriptors');
-                propertyDescriptor = descriptors[args.item.property];
-    
-                // determine if this is a sensitive property
-              var sensitive = nfCommon.isSensitiveProperty(propertyDescriptor);
-    
-                // record the previous value
-                previousValue = args.item[args.column.field];
-    
-                var languageId = 'nfel';
-                var editorClass = languageId + '-editor';
-    
-                // create the wrapper
-                wrapper = $('<div></div>').addClass('slickgrid-nfel-editor').css({
-                    'z-index': 14000,
-                    'position': 'absolute',
-                    'padding': '10px 20px',
-                    'overflow': 'hidden',
-                    'border-radius': '2px',
-                    'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
-                    'background-color': 'rgb(255, 255, 255)',
-                  'cursor': 'move',
-                  'transform': 'translate3d(0px, 0px, 0px)'
-                }).draggable({
-                    cancel: 'input, textarea, pre, .nf-checkbox, .button, .' + editorClass,
-                    containment: 'parent'
-                }).appendTo(container);
-    
-                // create the editor
-                editor = $('<div></div>').addClass(editorClass).appendTo(wrapper).nfeditor({
-                    languageId: languageId,
-                    width: (args.position.width < 212) ? 212 : args.position.width,
-                    minWidth: 212,
-                    minHeight: 100,
-                    resizable: true,
-                    sensitive: sensitive,
-                    escape: function () {
-                        scope.cancel();
-                    },
-                    enter: function () {
-                        scope.save();
-                    }
-                });
-    
-                // create the button panel
-                var stringCheckPanel = $('<div class="string-check-container">');
-                stringCheckPanel.appendTo(wrapper);
-    
-                // build the custom checkbox
-                isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel);
-              $('<span class="string-check-label nf-checkbox-label">&nbsp;' + nf._.msg('jquery-propertytable.SetEmptyString') + '</span>').appendTo(stringCheckPanel);
-    
-              var ok = $('<div class="button">' + nf._.msg('jquery-propertytable.Ok') + '</div>').css({
-                    'color': '#fff',
-                    'background': '#728E9B'
-                }).hover(
-                    function () {
-                        $(this).css('background', '#004849');
-                    }, function () {
-                        $(this).css('background', '#728E9B');
-                    }).on('click', scope.save);
-              var cancel = $('<div class="secondary-button">' + nf._.msg('jquery-propertytable.Cancel') + '</div>').css({
-                    'color': '#004849',
-                    'background': '#E3E8EB'
-                }).hover(
-                    function () {
-                        $(this).css('background', '#C7D2D7');
-                    }, function () {
-                        $(this).css('background', '#E3E8EB');
-                    }).on('click', scope.cancel);
-                $('<div></div>').css({
-                    'position': 'relative',
-                    'top': '10px',
-                    'left': '20px',
-                    'width': '212px',
-                    'clear': 'both',
-                    'float': 'right'
-                }).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
-    
-                // position and focus
-                scope.position(args.position);
-                editor.nfeditor('focus').nfeditor('selectAll');
-            };
-    
-            this.save = function () {
-                args.commitChanges();
-            };
-    
-            this.cancel = function () {
-                editor.nfeditor('setValue', initialValue);
-                args.cancelChanges();
-            };
-    
-            this.hide = function () {
-                wrapper.hide();
-            };
-    
-            this.show = function () {
-                wrapper.show();
-                editor.nfeditor('refresh');
-            };
-    
-            this.position = function (position) {
-                wrapper.css({
-                  'top': position.top - 21,
-                  'left': position.left - 43
-                });
-            };
-    
-            this.destroy = function () {
-                editor.nfeditor('destroy');
-                wrapper.remove();
-            };
-    
-            this.focus = function () {
-                editor.nfeditor('focus');
-            };
-    
-            this.loadValue = function (item) {
-                // determine if this is a sensitive property
-                var isEmptyChecked = false;
-              var sensitive = nfCommon.isSensitiveProperty(propertyDescriptor);
-    
-                // determine the value to use when populating the text field
-              if (nfCommon.isDefinedAndNotNull(item[args.column.field])) {
-                    if (sensitive) {
-                      initialValue = nfCommon.config.sensitiveText;
-                    } else {
-                        initialValue = item[args.column.field];
-                        isEmptyChecked = initialValue === '';
-                    }
-                }
-    
-                // determine if its an empty string
-                var checkboxStyle = isEmptyChecked ? 'checkbox-checked' : 'checkbox-unchecked';
-                isEmpty.addClass(checkboxStyle);
-    
-                editor.nfeditor('setValue', initialValue).nfeditor('selectAll');
-            };
-    
-            this.serializeValue = function () {
-                var value = editor.nfeditor('getValue');
-    
-                // if the field has been cleared, set the value accordingly
-                if (value === '') {
-                    // if the user has checked the empty string checkbox, use emtpy string
-                    if (isEmpty.hasClass('checkbox-checked')) {
-                        return '';
-                    } else {
-                        // otherwise if the property is required
-                      if (nfCommon.isRequiredProperty(propertyDescriptor)) {
-                          if (nfCommon.isBlank(propertyDescriptor.defaultValue)) {
-                                return previousValue;
-                            } else {
-                                return propertyDescriptor.defaultValue;
-                            }
-                        } else {
-                            // if the property is not required, clear the value
-                            return null;
-                        }
-                    }
-                } else {
-                    // if the field still has the sensitive class it means a property
-                    // was edited but never modified so we should restore the previous
-                    // value instead of setting it to the 'sensitive value set' string
-    
-                    // if the field hasn't been modified return the previous value... this
-                    // is important because sensitive properties contain the text 'sensitive
-                    // value set' which is cleared when the value is edited. we do not
-                    // want to actually use this value
-                    if (editor.nfeditor('isModified') === false) {
-                        return previousValue;
-                    } else {
-                        // if there is text specified, use that value
-                        return value;
-                    }
-                }
-            };
-    
-            this.applyValue = function (item, state) {
-                item[args.column.field] = state;
-            };
-    
-            this.isValueChanged = function () {
-                return scope.serializeValue() !== previousValue;
-            };
-    
-            this.validate = function () {
-                return {
-                    valid: true,
-                    msg: null
-                };
-            };
-    
-            // initialize the custom long nfel editor
-            this.init();
-        };
-    
-        // combo editor
-        var comboEditor = function (args) {
-            var scope = this;
-            var initialValue = null;
-            var wrapper;
-            var combo;
-            var propertyDescriptor;
-    
-            this.init = function () {
-                var container = $('body');
-    
-                // get the property descriptor
-                var gridContainer = $(args.grid.getContainerNode());
-                var descriptors = gridContainer.data('descriptors');
-                propertyDescriptor = descriptors[args.item.property];
-    
-                // get the options
-                var propertyContainer = gridContainer.closest('.property-container');
-                var configurationOptions = propertyContainer.data('options');
-    
-                // create the wrapper
-                wrapper = $('<div class="combo-editor"></div>').css({
-                    'z-index': 1999,
-                    'position': 'absolute',
-                    'padding': '10px 20px',
-                    'overflow': 'hidden',
-                    'border-radius': '2px',
-                    'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
-                    'background-color': 'rgb(255, 255, 255)',
-                  'cursor': 'move',
-                  'transform': 'translate3d(0px, 0px, 0px)'
-                }).draggable({
-                    cancel: '.button, .combo',
-                    containment: 'parent'
-                }).appendTo(container);
-    
-                // check for allowable values which will drive which editor to use
-              var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
-    
-                // show the output port options
-                var options = [];
-                if (propertyDescriptor.required === false) {
-                    options.push({
-                      text: nf._.msg('jquery-propertytable.NoValueSet'),
-                        value: null,
-                        optionClass: 'unset'
-                    });
-                }
-                if ($.isArray(allowableValues)) {
-                    $.each(allowableValues, function (i, allowableValueEntity) {
-                        var allowableValue = allowableValueEntity.allowableValue;
-                        options.push({
-                            text: allowableValue.displayName,
-                            value: allowableValue.value,
-                            disabled: allowableValueEntity.canRead === false && allowableValue.value !== args.item['previousValue'],
-                          description: nfCommon.escapeHtml(allowableValue.description)
-                        });
-                    });
-                }
-    
-                // ensure the options there is at least one option
-                if (options.length === 0) {
-                    options.push({
-                      text: nf._.msg('jquery-propertytable.NoValueSet'),
-                        value: null,
-                        optionClass: 'unset',
-                        disabled: true
-                    });
-                }
-    
-                // if this descriptor identifies a controller service, provide a way to create one
-              if (nfCommon.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService)) {
-                    options.push({
-                      text: nf._.msg('jquery-propertytable.Message3'),
-                        value: undefined,
-                        optionClass: 'unset'
-                    });
-                }
-    
-                // determine the max height
-                var position = args.position;
-                var windowHeight = $(window).height();
-                var maxHeight = windowHeight - position.bottom - 16;
-    
-                // build the combo field
-                combo = $('<div class="value-combo combo"></div>').combo({
-                    options: options,
-                    maxHeight: maxHeight,
-                    select: function (option) {
-                        if (typeof option.value === 'undefined') {
-                            // cancel the current edit
-                            scope.cancel();
-    
-                            // prompt for the new service type
-                            promptForNewControllerService(gridContainer, args.grid, args.item, propertyDescriptor.identifiesControllerService, configurationOptions);
-                        }
-                    }
-                }).css({
-                    'margin-top': '10px',
-                    'margin-bottom': '10px',
-                  'width': ((position.width - 16) < 212) ? 212 : (position.width - 16) + 'px'
-              }).appendTo(wrapper);
-    
-                // add buttons for handling user input
-              var cancel = $('<div class="secondary-button">'+nf._.msg('jquery-propertytable.Cancel')+'</div>').css({
-                    'color': '#004849',
-                    'background': '#E3E8EB'
-                }).hover(
-                    function () {
-                        $(this).css('background', '#C7D2D7');
-                    }, function () {
-                        $(this).css('background', '#E3E8EB');
-                    }).on('click', scope.cancel);
-              var ok = $('<div class="button">' + nf._.msg('jquery-propertytable.Ok') + '</div>').css({
-                    'color': '#fff',
-                    'background': '#728E9B'
-                }).hover(
-                    function () {
-                        $(this).css('background', '#004849');
-                    }, function () {
-                        $(this).css('background', '#728E9B');
-                    }).on('click', scope.save);
-    
-                $('<div></div>').css({
-                    'position': 'relative',
-                    'top': '10px',
-                    'left': '20px',
-                    'width': '212px',
-                    'clear': 'both',
-                    'float': 'right'
-                }).append(ok).append(cancel).appendTo(wrapper);
-    
-                // position and focus
-                scope.position(position);
-            };
-    
-            this.save = function () {
-                args.commitChanges();
-            };
-    
-            this.cancel = function () {
-                args.cancelChanges();
-            };
-    
-            this.hide = function () {
-                wrapper.hide();
-            };
-    
-            this.show = function () {
-                wrapper.show();
-            };
-    
-            this.position = function (position) {
-                wrapper.css({
-                    'top': position.top - 24,
-                    'left': position.left - 20
-                });
-            };
-    
-            this.destroy = function () {
-                combo.combo('destroy');
-                wrapper.remove();
-            };
-    
-            this.focus = function () {
-            };
-    
-            this.loadValue = function (item) {
-                // select as appropriate
-              if (!nfCommon.isUndefined(item.value)) {
-                    initialValue = item.value;
-    
-                    combo.combo('setSelectedOption', {
-                        value: item.value
-                    });
-              } else if (nfCommon.isDefinedAndNotNull(propertyDescriptor.defaultValue)) {
-                    initialValue = propertyDescriptor.defaultValue;
-    
-                    combo.combo('setSelectedOption', {
-                        value: propertyDescriptor.defaultValue
-                    });
-                }
-            };
-    
-            this.serializeValue = function () {
-                var selectedOption = combo.combo('getSelectedOption');
-                return selectedOption.value;
-            };
-    
-            this.applyValue = function (item, state) {
-                item[args.column.field] = state;
-            };
-    
-            this.isValueChanged = function () {
-                var selectedOption = combo.combo('getSelectedOption');
-                return (!(selectedOption.value === "" && initialValue === null)) && (selectedOption.value !== initialValue);
-            };
-    
-            this.validate = function () {
-                return {
-                    valid: true,
-                    msg: null
-                };
-            };
-    
-            // initialize the custom long text editor
-            this.init();
-        };
-    
-        /**
-         * Shows the property value for the specified row and cell.
-         *
-         * @param {type} propertyGrid
-         * @param {type} descriptors
-         * @param {type} row
-         * @param {type} cell
-         */
-        var showPropertyValue = function (propertyGrid, descriptors, row, cell) {
-            // remove any currently open detail dialogs
-          nfUniversalCapture.removeAllPropertyDetailDialogs();
-    
-            // get the property in question
-            var propertyData = propertyGrid.getData();
-            var property = propertyData.getItem(row);
-    
-            // ensure there is a value
-          if (nfCommon.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 (!nfCommon.isSensitiveProperty(propertyDescriptor)) {
-    
-                    // get details about the location of the cell
-                    var cellNode = $(propertyGrid.getCellNode(row, cell));
-                    var offset = cellNode.offset();
-    
-                    // create the wrapper
-                    var wrapper = $('<div class="property-detail"></div>').css({
-                        'z-index': 1999,
-                        'position': 'absolute',
-                      'padding': '10px 20px',
-                        'overflow': 'hidden',
-                        'border-radius': '2px',
-                        'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
-                        'background-color': 'rgb(255, 255, 255)',
-                        'cursor': 'move',
-                      'transform': 'translate3d(0px, 0px, 0px)',
-                      'top': offset.top - 24,
-                      'left': offset.left - 20
-                    }).appendTo('body');
-    
-                  var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
-                    if ($.isArray(allowableValues)) {
-                        // prevent dragging over the combo
-                        wrapper.draggable({
-                            cancel: '.button, .combo',
-                            containment: 'parent'
-                        });
-    
-                        // create the read only options
-                        var options = [];
-                        $.each(allowableValues, function (i, allowableValueEntity) {
-                            var allowableValue = allowableValueEntity.allowableValue;
-                            options.push({
-                                text: allowableValue.displayName,
-                                value: allowableValue.value,
-                              description: nfCommon.escapeHtml(allowableValue.description),
-                                disabled: true
-                            });
-                        });
-    
-                        // ensure the options there is at least one option
-                        if (options.length === 0) {
-                            options.push({
-                              text: nf._.msg('jquery-propertytable.NoValueSet'),
-                                value: null,
-                                optionClass: 'unset',
-                                disabled: true
-                            });
-                        }
-    
-                        // determine the max height
-                        var windowHeight = $(window).height();
-                        var maxHeight = windowHeight - (offset.top + cellNode.height()) - 16;
-                        var width = cellNode.width() - 16;
-    
-                        // build the combo field
-                      $('<div class="value-combo combo"></div>').css({
-                          'width': width,
-                          'margin-top': '10px',
-                          'margin-bottom': '10px'
-                      }).combo({
-                            options: options,
-                            maxHeight: maxHeight,
-                            selectedOption: {
-                                value: property.value
-                            }
-                        }).appendTo(wrapper);
-    
-                      $('<div class="button">Ok</div>').css({
-                          'position': 'relative',
-                          'top': '10px',
-                          'left': '20px'
-                        }).hover(
-                            function () {
-                                $(this).css('background', '#004849');
-                            }, function () {
-                                $(this).css('background', '#728E9B');
-                            }).on('click', function () {
-                            wrapper.hide().remove();
-                        }).appendTo(wrapper);
-                    } else {
-                        var editor = null;
-    
-                        // so the nfel editor is appropriate
-                      if (nfCommon.supportsEl(propertyDescriptor)) {
-                            var languageId = 'nfel';
-                            var editorClass = languageId + '-editor';
-    
-                            // prevent dragging over the nf editor
-                          wrapper.css({
-                              'z-index': 1999,
-                              'position': 'absolute',
-                              'padding': '10px 20px',
-                              'overflow': 'hidden',
-                              'border-radius': '2px',
-                              'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
-                              'background-color': 'rgb(255, 255, 255)',
-                              'cursor': 'move',
-                              'transform': 'translate3d(0px, 0px, 0px)',
-                              'top': offset.top - 22,
-                              'left': offset.left - 43
-                          }).draggable({
-                                cancel: 'input, textarea, pre, .button, .' + editorClass,
-                                containment: 'parent'
-                            });
-    
-                            // create the editor
-                            editor = $('<div></div>').addClass(editorClass).appendTo(wrapper).nfeditor({
-                                languageId: languageId,
-                                width: cellNode.width(),
-                                content: property.value,
-                                minWidth: 175,
-                                minHeight: 100,
-                                readOnly: true,
-                                resizable: true,
-                                escape: function () {
-                                    cleanUp();
-                                }
-                            });
-                        } else {
-                          wrapper.css({
-                              'z-index': 1999,
-                              'position': 'absolute',
-                              'padding': '10px 20px',
-                              'overflow': 'hidden',
-                              'border-radius': '2px',
-                              'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
-                              'background-color': 'rgb(255, 255, 255)',
-                              'cursor': 'move',
-                              'transform': 'translate3d(0px, 0px, 0px)',
-                              'top': offset.top - 26,
-                              'left': offset.left - 20
-                          });
-    
-                            // create the input field
-                            $('<textarea hidefocus rows="5" readonly="readonly"/>').css({
-                                'height': '80px',
-                              'resize': 'both',
-                                'width': cellNode.width() + 'px',
-                              'margin': '10px 0px',
-                              'white-space': 'pre'
-                            }).text(property.value).on('keydown', function (evt) {
-                                if (evt.which === $.ui.keyCode.ESCAPE) {
-                                    cleanUp();
-    
-                                    evt.stopImmediatePropagation();
-                                    evt.preventDefault();
-                                }
-                            }).appendTo(wrapper);
-    
-                            // prevent dragging over standard components
-                            wrapper.draggable({
-                                containment: 'parent'
-                            });
-                        }
-    
-                        var cleanUp = function () {
-                            // clean up the editor
-                            if (editor !== null) {
-                                editor.nfeditor('destroy');
-                            }
-    
-                            // clean up the rest
-                            wrapper.hide().remove();
-                        };
-    
-                        // add an ok button that will remove the entire pop up
-                      var ok = $('<div class="button">' + nf._.msg('jquery-propertytable.Ok') + '</div>').css({
-                          'position': 'relative',
-                          'top': '10px',
-                          'left': '20px'
-                        }).hover(
-                            function () {
-                                $(this).css('background', '#004849');
-                            }, function () {
-                                $(this).css('background', '#728E9B');
-                            }).on('click', function () {
-                            cleanUp();
-                        });
-    
-                        $('<div></div>').append(ok).append('<div class="clear"></div>').appendTo(wrapper);
-                    }
-                }
-            }
-        };
-    
-        /**
-         * Gets the available controller services that implement the specified type and
-         * prompts the user to create one.
-         *
-         * @param {jQuery} gridContainer The grid container
-         * @param {slickgrid} grid The grid
-         * @param {object} item The item
-         * @param {type} serviceType The type of service to create
-         * @param {object} configurationOptions The configuration options
-         */
-        var promptForNewControllerService = function (gridContainer, grid, item, serviceType, configurationOptions) {
-            $.ajax({
-                type: 'GET',
-                url: '../nifi-api/flow/controller-service-types',
-                data: {
-                    serviceType: serviceType
-                },
-                dataType: 'json'
-            }).done(function (response) {
-                var options = [];
-                $.each(response.controllerServiceTypes, function (i, controllerServiceType) {
-                    options.push({
-                      text: nfCommon.substringAfterLast(controllerServiceType.type, '.'),
-                        value: controllerServiceType.type,
-                      description: nfCommon.escapeHtml(controllerServiceType.description)
-                    });
-                });
-    
-                // ensure there are some applicable controller services
-                if (options.length === 0) {
-                  nfDialog.showOkDialog({
-                      headerText: nf._.msg('jquery-propertytable.ControllerService'),
-                      dialogContent: nf._.msg('jquery-propertytable.Message2')
-                    });
-                } else {
-                    var newControllerServiceDialogMarkup =
-                        '<div id="new-inline-controller-service-dialog" class="hidden dialog medium-dialog cancellable">' +
-                        '<div class="dialog-content">' +
-                        '<div>' +
-                        '<div class="setting-name">Controller Service</div>' +
-                        '<div class="setting-field">' +
-                        '<div class="new-inline-controller-service-combo"></div>' +
-                        '</div>' +
-                        '</div>' +
-                        '<div>' +
-                                  '<div class="setting-name">' + nf._.msg('jquery-propertytable.Tags') + '</div>' +
-                        '<div class="setting-field">' +
-                        '<div class="new-inline-controller-service-tags"></div>' +
-                        '</div>' +
-                        '</div>' +
-                        '<div>' +
-                                  '<div class="setting-name">' + nf._.msg('jquery-propertytable.Description') + '</div>' +
-                        '<div class="setting-field">' +
-                        '<div class="new-inline-controller-service-description"></div>' +
-                        '</div>' +
-                        '</div>' +
-                        '</div>' +
-                        '</div>';
-    
-                    var newControllerServiceDialog = $(newControllerServiceDialogMarkup).appendTo(configurationOptions.dialogContainer);
-                    var newControllerServiceCombo = newControllerServiceDialog.find('div.new-inline-controller-service-combo');
-                    var newControllerServiceTags = newControllerServiceDialog.find('div.new-inline-controller-service-tags');
-                    var newControllerServiceDescription = newControllerServiceDialog.find('div.new-inline-controller-service-description');
-    
-                    // build the combo field
-                    newControllerServiceCombo.combo({
-                        options: options,
-                        select: function (option) {
-                            var service;
-                            $.each(response.controllerServiceTypes, function (i, controllerServiceType) {
-                                if (controllerServiceType.type === option.value) {
-                                    service = controllerServiceType;
-                                    return false;
-                                }
-                            });
-    
-                            // set the service details
-                            newControllerServiceTags.text(service.tags.join(', ')).ellipsis();
-                            newControllerServiceDescription.text(service.description);
-                        }
-                    });
-    
-                    newControllerServiceDialog.modal({
-                      headerText: nf._.msg('jquery-propertytable.AddControllerService'),
-                        scrollableContentStyle: 'scrollable',
-                        buttons: [{
-                          buttonText: nf._.msg('jquery-propertytable.Create'),
-                            color: {
-                                base: '#728E9B',
-                                hover: '#004849',
-                                text: '#ffffff'
-                            },
-                            handler: {
-                                click: function () {
-                                    create();
-                                }
-                            }
-                        },
-                            {
-                              buttonText: nf._.msg('jquery-propertytable.Cancel'),
-                                color: {
-                                    base: '#E3E8EB',
-                                    hover: '#C7D2D7',
-                                    text: '#004849'
-                                },
-                                handler: {
-                                    click: function () {
-                                        cancel();
-                                    }
-                                }
-                            }]
-                    });
-    
-                    var create = function () {
-                        var newControllerServiceType = newControllerServiceCombo.combo('getSelectedOption').value;
-    
-                        // build the controller service entity
-                        var controllerServiceEntity = {
-                          'revision': nfClient.getRevision({
-                                'revision': {
-                                    'version': 0,
-                                }
-                            }),
-                            'component': {
-                                'type': newControllerServiceType
-                            }
-                        };
-    
-                        // determine the appropriate uri for creating the controller service
-                        var uri = '../nifi-api/controller/controller-services';
-                      if (nfCommon.isDefinedAndNotNull(groupId)) {
-                            uri = '../nifi-api/process-groups/' + encodeURIComponent(groupId) + '/controller-services';
-                        }
-    
-                        // add the new controller service
-                        $.ajax({
-                            type: 'POST',
-                            url: uri,
-                            data: JSON.stringify(controllerServiceEntity),
-                            dataType: 'json',
-                            contentType: 'application/json'
-                        }).done(function (response) {
-                            // load the descriptor and update the property
-                            configurationOptions.descriptorDeferred(item.property).done(function (descriptorResponse) {
-                                var descriptor = descriptorResponse.propertyDescriptor;
-    
-                                // store the descriptor for use later
-                                var descriptors = gridContainer.data('descriptors');
-                              if (!nfCommon.isUndefined(descriptors)) {
-                                    descriptors[descriptor.name] = descriptor;
-                                }
-    
-                                // add a row for the new property
-                                var data = grid.getData();
-                                data.updateItem(item.id, $.extend(item, {
-                                    value: response.component.id
-                                }));
-    
-                                // close the dialog
-                                newControllerServiceDialog.modal('hide');
-                            });
-    
-                          // invoke callback if necessary
-                          if (typeof configurationOptions.controllerServiceCreatedDeferred === 'function') {
-                              configurationOptions.controllerServiceCreatedDeferred(response);
-                          }
-                      }).fail(nfErrorHandler.handleAjaxError);
-                    };
-    
-                    var cancel = function () {
-                        newControllerServiceDialog.modal('hide');
-                    };
-    
-                    newControllerServiceDialog.modal('show');
-                }
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        var initPropertiesTable = function (table, options) {
-            // function for formatting the property name
-            var nameFormatter = function (row, cell, value, columnDef, dataContext) {
-                var nameWidthOffset = 30;
-                var cellContent = $('<div></div>');
-    
-                // format the contents
-                var formattedValue = $('<span/>').addClass('table-cell').text(value).appendTo(cellContent);
-                if (dataContext.type === 'required') {
-                    formattedValue.addClass('required');
-                }
-    
-                // get the property descriptor
-                var descriptors = table.data('descriptors');
-                var propertyDescriptor = descriptors[dataContext.property];
-    
-                // show the property description if applicable
-              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                  if (!nfCommon.isBlank(propertyDescriptor.description) || !nfCommon.isBlank(propertyDescriptor.defaultValue) || !nfCommon.isBlank(propertyDescriptor.supportsEl)) {
-                        $('<div class="fa fa-question-circle" alt="Info" style="float: right; margin-right: 6px; margin-top: 4px;"></div>').appendTo(cellContent);
-                        $('<span class="hidden property-descriptor-name"></span>').text(dataContext.property).appendTo(cellContent);
-                        nameWidthOffset = 46; // 10 + icon width (10) + icon margin (6) + padding (20)
-                    }
-                }
-    
-                // adjust the width accordingly
-                formattedValue.width(columnDef.width - nameWidthOffset).ellipsis();
-    
-                // return the cell content
-                return cellContent.html();
-            };
-    
-            // function for formatting the property value
-            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-                var valueMarkup;
-              if (nfCommon.isDefinedAndNotNull(value)) {
-                    // get the property descriptor
-                    var descriptors = table.data('descriptors');
-                    var propertyDescriptor = descriptors[dataContext.property];
-    
-                    // determine if the property is sensitive
-                  if (nfCommon.isSensitiveProperty(propertyDescriptor)) {
-                      valueMarkup = '<span class="table-cell sensitive">' + nf._.msg('jquery-propertytable.SensitiveValueSet') + '</span>';
-                    } else {
-                        // if there are allowable values, attempt to swap out for the display name
-                      var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
-                        if ($.isArray(allowableValues)) {
-                            $.each(allowableValues, function (_, allowableValueEntity) {
-                                var allowableValue = allowableValueEntity.allowableValue;
-                                if (value === allowableValue.value) {
-                                    value = allowableValue.displayName;
-                                    return false;
-                                }
-                            });
-                        }
-    
-                        if (value === '') {
-                          valueMarkup = '<span class="table-cell blank">' + nf._.msg('jquery-propertytable.EmptyStringSet') + '</span>';
-                      } else {
-                          valueMarkup = '<div class="table-cell value"><pre class="ellipsis">' + nfCommon.escapeHtml(value) + '</pre></div>';
-                      }
-                  }
-              } else {
-                  valueMarkup = '<span class="unset">' + nf._.msg('jquery-propertytable.NoValueSet') + '</span>';
-                }
-    
-                // format the contents
-                var content = $(valueMarkup);
-                if (dataContext.type === 'required') {
-                    content.addClass('required');
-                }
-                content.find('.ellipsis').width(columnDef.width - 10).ellipsis();
-    
-                // return the appropriate markup
-                return $('<div/>').append(content).html();
-            };
-    
-            var propertyColumns = [
-                {
-                    id: 'property',
-                    field: 'displayName',
-                  name: nf._.msg('jquery-propertytable.Property'),
-                    sortable: false,
-                    resizable: true,
-                    rerenderOnResize: true,
-                    formatter: nameFormatter
-                },
-                {
-                    id: 'value',
-                    field: 'value',
-                  name: nf._.msg('jquery-propertytable.Value'),
-                    sortable: false,
-                    resizable: true,
-                    cssClass: 'pointer',
-                    rerenderOnResize: true,
-                    formatter: valueFormatter
-                }
-            ];
-    
-            // custom formatter for the actions column
-            var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-    
-                // get the property descriptor
-                var descriptors = table.data('descriptors');
-                var propertyDescriptor = descriptors[dataContext.property];
-    
-              var identifiesControllerService = nfCommon.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService);
-              var isConfigured = nfCommon.isDefinedAndNotNull(dataContext.value);
-    
-                // check to see if we should provide a button for going to a controller service
-              if (identifiesControllerService && isConfigured && (options.supportsGoTo === true)) {
-                    // ensure the configured value is referencing a valid service
-                    $.each(propertyDescriptor.allowableValues, function (_, allowableValueEntity) {
-                        var allowableValue = allowableValueEntity.allowableValue;
-                        if (allowableValue.value === dataContext.value) {
-                          markup += '<div class="pointer go-to-service fa fa-long-arrow-right" title="' + nf._.msg('jquery-propertytable.GoTo') + '" style="margin-top: 2px" ></div>';
-                            return false;
-                        }
-                    });
-                }
-    
-                // allow user defined properties to be removed
-                if (options.readOnly !== true && dataContext.type === 'userDefined') {
-                  markup += '<div title="' + nf._.msg('jquery-propertytable.Delete') + '" class="delete-property pointer fa fa-trash" style="margin-top: 2px" ></div>';
-                }
-    
-                return markup;
-            };
-            propertyColumns.push({id: "actions", name: "&nbsp;", minWidth: 20, width: 20, formatter: actionFormatter});
-    
-            var propertyConfigurationOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                editable: options.readOnly !== true,
-                enableAddRow: false,
-                autoEdit: false,
-                rowHeight: 24
-            };
-    
-            // initialize the dataview
-            var propertyData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            propertyData.setItems([]);
-            propertyData.setFilterArgs({
-                searchString: '',
-                property: 'hidden'
-            });
-            propertyData.setFilter(filter);
-            propertyData.getItemMetadata = function (index) {
-                var item = propertyData.getItem(index);
-    
-                // get the property descriptor
-                var descriptors = table.data('descriptors');
-                var propertyDescriptor = descriptors[item.property];
-    
-                // support el if specified or unsure yet (likely a dynamic property)
-              if (nfCommon.isUndefinedOrNull(propertyDescriptor) || nfCommon.supportsEl(propertyDescriptor)) {
-                    return {
-                        columns: {
-                            value: {
-                                editor: nfelEditor
-                            }
-                        }
-                    };
-                } else {
-                    // check for allowable values which will drive which editor to use
-                  var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
-                    if ($.isArray(allowableValues)) {
-                        return {
-                            columns: {
-                                value: {
-                                    editor: comboEditor
-                                }
-                            }
-                        };
-                    } else {
-                        return {
-                            columns: {
-                                value: {
-                                    editor: textEditor
-                                }
-                            }
-                        };
-                    }
-                }
-            };
-    
-            var goToControllerService = function (property) {
-                $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/controller-services/' + encodeURIComponent(property.value),
-                    dataType: 'json'
-                }).done(function (controllerServiceEntity) {
-                    // close the dialog
-                    var dialog = table.closest('.dialog');
-                    if (dialog.hasClass('modal')) {
-                        dialog.modal('hide');
-                    } else {
-                        dialog.hide();
-                    }
-    
-                    var controllerService = controllerServiceEntity.component;
-                    $.Deferred(function (deferred) {
-                      if (nfCommon.isDefinedAndNotNull(controllerService.parentGroupId)) {
-                            if ($('#process-group-configuration').is(':visible')) {
-                              nfProcessGroupConfiguration.loadConfiguration(controllerService.parentGroupId).done(function () {
-                                    deferred.resolve();
-                                });
-                            } else {
-                              nfProcessGroupConfiguration.showConfiguration(controllerService.parentGroupId).done(function () {
-                                    deferred.resolve();
-                                });
-                            }
-                        } else {
-                            if ($('#settings').is(':visible')) {
-                                // reload the settings
-                              nfSettings.loadSettings().done(function () {
-                                    deferred.resolve();
-                                });
-                            } else {
-                                // reload the settings and show
-                              nfSettings.showSettings().done(function () {
-                                    deferred.resolve();
-                                });
-                            }
-                        }
-                    }).done(function () {
-                      if (nfCommon.isDefinedAndNotNull(controllerService.parentGroupId)) {
-                          nfProcessGroupConfiguration.selectControllerService(property.value);
-                        } else {
-                          nfSettings.selectControllerService(property.value);
-                        }
-                    });
-              }).fail(nfErrorHandler.handleAjaxError);
-            };
-    
-            // initialize the grid
-            var propertyGrid = new Slick.Grid(table, propertyData, propertyColumns, propertyConfigurationOptions);
-            propertyGrid.setSelectionModel(new Slick.RowSelectionModel());
-            propertyGrid.onClick.subscribe(function (e, args) {
-                if (propertyGrid.getColumns()[args.cell].id === 'value') {
-                    if (options.readOnly === true) {
-                        var descriptors = table.data('descriptors');
-                        showPropertyValue(propertyGrid, descriptors, args.row, args.cell);
-                    } else {
-                        // edits the clicked cell
-                        propertyGrid.gotoCell(args.row, args.cell, true);
-                    }
-    
-                    // prevents standard edit logic
-                    e.stopImmediatePropagation();
-                } else if (propertyGrid.getColumns()[args.cell].id === 'actions') {
-                    var property = propertyData.getItem(args.row);
-    
-                    var target = $(e.target);
-                    if (target.hasClass('delete-property')) {
-                        // mark the property in question for removal and refresh the table
-                        propertyData.updateItem(property.id, $.extend(property, {
-                            hidden: true
-                        }));
-    
-                        // prevents standard edit logic
-                        e.stopImmediatePropagation();
-                    } else if (target.hasClass('go-to-service')) {
-                        if (options.readOnly === true) {
-                            goToControllerService(property);
-                        } else {
-                            // load the property descriptor if possible
-                            if (typeof options.goToServiceDeferred === 'function') {
-                                options.goToServiceDeferred().done(function () {
-                                    goToControllerService(property);
-                                });
-                            }
-                        }
-                    }
-                }
-            });
-            propertyGrid.onKeyDown.subscribe(function (e, args) {
-                if (e.which === $.ui.keyCode.ESCAPE) {
-                    var editorLock = propertyGrid.getEditorLock();
-                    if (editorLock.isActive()) {
-                        editorLock.cancelCurrentEdit();
-    
-                        // prevents standard cancel logic - standard logic does
-                        // not stop propagation when escape is pressed
-                        e.stopImmediatePropagation();
-                        e.preventDefault();
-                    }
-                }
-            });
-    
-            // wire up the dataview to the grid
-            propertyData.onRowCountChanged.subscribe(function (e, args) {
-                propertyGrid.updateRowCount();
-                propertyGrid.render();
-            });
-            propertyData.onRowsChanged.subscribe(function (e, args) {
-                propertyGrid.invalidateRows(args.rows);
-                propertyGrid.render();
-            });
-    
-            // hold onto an instance of the grid and listen for mouse events to add tooltips where appropriate
-            table.data('gridInstance', propertyGrid).on('mouseenter', 'div.slick-cell', function (e) {
-                var infoIcon = $(this).find('div.fa-question-circle');
-                if (infoIcon.length && !infoIcon.data('qtip')) {
-                    var property = $(this).find('span.property-descriptor-name').text();
-    
-                    // get the property descriptor
-                    var descriptors = table.data('descriptors');
-                    var propertyDescriptor = descriptors[property];
-    
-                    // get the history
-                    var history = table.data('history');
-                    var propertyHistory = history[property];
-    
-                    // format the tooltip
-                  var tooltip = nfCommon.formatPropertyTooltip(propertyDescriptor, propertyHistory);
-    
-                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                        infoIcon.qtip($.extend({},
-                          nfCommon.config.tooltipConfig,
-                            {
-                                content: tooltip
-                            }));
-                    }
-                }
-            });
-        };
-    
-        var saveRow = function (table) {
-            // get the property grid to commit the current edit
-            var propertyGrid = table.data('gridInstance');
-          if (nfCommon.isDefinedAndNotNull(propertyGrid)) {
-                var editController = propertyGrid.getEditController();
-                editController.commitCurrentEdit();
-            }
-        };
-    
-        /**
-         * Performs the filtering.
-         *
-         * @param {object} item     The item subject to filtering
-         * @param {object} args     Filter arguments
-         * @returns {Boolean}       Whether or not to include the item
-         */
-        var filter = function (item, args) {
-            return item.hidden === false;
-        };
-    
-        /**
-         * Loads the specified properties.
-         *
-         * @param {type} table
-         * @param {type} properties
-         * @param {type} descriptors
-         * @param {type} history
-         */
-        var loadProperties = function (table, properties, descriptors, history) {
-            // save the descriptors and history
-            table.data({
-                'descriptors': descriptors,
-                'history': history
-            });
-    
-            // get the grid
-            var propertyGrid = table.data('gridInstance');
-            var propertyData = propertyGrid.getData();
-    
-            // generate the properties
-          if (nfCommon.isDefinedAndNotNull(properties)) {
-                propertyData.beginUpdate();
-    
-                var i = 0;
-                $.each(properties, function (name, value) {
-                    // get the property descriptor
-                    var descriptor = descriptors[name];
-    
-                    // determine the property type
-                    var type = 'userDefined';
-                    var displayName = name;
-                  if (nfCommon.isDefinedAndNotNull(descriptor)) {
-                      if (nfCommon.isRequiredProperty(descriptor)) {
-                            type = 'required';
-                      } else if (nfCommon.isDynamicProperty(descriptor)) {
-                            type = 'userDefined';
-                        } else {
-                            type = 'optional';
-                        }
-    
-                        // use the display name if possible
-                        displayName = descriptor.displayName;
-    
-                        // determine the value
-                      if (nfCommon.isNull(value) && nfCommon.isDefinedAndNotNull(descriptor.defaultValue)) {
-                            value = descriptor.defaultValue;
-                        }
-                    }
-    
-                    // add the row
-                    propertyData.addItem({
-                        id: i++,
-                        hidden: false,
-                        property: name,
-                        displayName: displayName,
-                        previousValue: value,
-                        value: value,
-                        type: type
-                    });
-                });
-    
-                propertyData.endUpdate();
-            }
-        };
-    
-        /**
-         * Clears the property table container.
-         *
-         * @param {jQuery} propertyTableContainer
-         */
-        var clear = function (propertyTableContainer) {
-            var options = propertyTableContainer.data('options');
-            if (options.readOnly === true) {
-              nfUniversalCapture.removeAllPropertyDetailDialogs();
-            } else {
-                // clear any existing new property dialogs
-              if (nfCommon.isDefinedAndNotNull(options.dialogContainer)) {
-                    $('#new-property-dialog').modal("hide");
-                }
-            }
-    
-            // clean up data
-            var table = propertyTableContainer.find('div.property-table');
-            table.removeData('descriptors history');
-    
-            // clean up any tooltips that may have been generated
-          nfCommon.cleanUpTooltips(table, 'div.fa-question-circle');
-    
-            // clear the data in the grid
-            var propertyGrid = table.data('gridInstance');
-            var propertyData = propertyGrid.getData();
-            propertyData.setItems([]);
-        };
-    
-        var methods = {
-          /**
-           * 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 (nfCommon.isDefinedAndNotNull(options)) {
-                        // get the tag cloud
-                        var propertyTableContainer = $(this);
-    
-                        // clear any current contents, remote events, and store options
-                        propertyTableContainer.empty().unbind().addClass('property-container').data('options', options);
-    
-                        // build the component
-                        var header = $('<div class="properties-header"></div>').appendTo(propertyTableContainer);
-                      $('<div class="required-property-note">' + nf._.msg('jquery-propertytable.RequiredField') + '</div>').appendTo(header);
-    
-                        // build the table
-                        var table = $('<div class="property-table"></div>').appendTo(propertyTableContainer);
-    
-                        // optionally add a add new property button
-                      if (options.readOnly !== true && nfCommon.isDefinedAndNotNull(options.dialogContainer)) {
-                            // build the new property dialog
-                            var newPropertyDialogMarkup =
-                                '<div id="new-property-dialog" class="dialog cancellable small-dialog hidden">' +
-                                '<div class="dialog-content">' +
-                                '<div>' +
-                                          '<div class="setting-name">' + nf._.msg('jquery-propertytable.PropertyName') + '</div>' +
-                                '<div class="setting-field new-property-name-container">' +
-                                '<input class="new-property-name" type="text"/>' +
-                                '</div>' +
-                                '</div>' +
-                                '</div>' +
-                                '</div>';
-    
-                            var newPropertyDialog = $(newPropertyDialogMarkup).appendTo(options.dialogContainer);
-                            var newPropertyNameField = newPropertyDialog.find('input.new-property-name');
-    
-                            newPropertyDialog.modal({
-                              headerText: nf._.msg('jquery-propertytable.AddProperty'),
-                                scrollableContentStyle: 'scrollable',
-                                buttons: [{
-                                  buttonText: nf._.msg('jquery-propertytable.Ok'),
-                                    color: {
-                                        base: '#728E9B',
-                                        hover: '#004849',
-                                        text: '#ffffff'
-                                    },
-                                    handler: {
-                                        click: function () {
-                                            add();
-                                        }
-                                    }
-                                },
-                                    {
-                                      buttonText: nf._.msg('jquery-propertytable.Cancel'),
-                                        color: {
-                                            base: '#E3E8EB',
-                                            hover: '#C7D2D7',
-                                            text: '#004849'
-                                        },
-                                        handler: {
-                                            click: function () {
-                                                cancel();
-                                            }
-                                        }
-                                    }]
-                            });
-    
-                            var add = function () {
-                                var propertyName = $.trim(newPropertyNameField.val());
-    
-                                // ensure the property name is specified
-                                if (propertyName !== '') {
-                                    var propertyGrid = table.data('gridInstance');
-                                    var propertyData = propertyGrid.getData();
-    
-                                    // ensure the property name is unique
-                                    var existingItem = null;
-                                    $.each(propertyData.getItems(), function (_, item) {
-                                        if (propertyName === item.property) {
-                                            existingItem = item;
-                                            return false;
-                                        }
-                                    });
-    
-                                    if (existingItem === null) {
-                                        // load the descriptor and add the property
-                                        options.descriptorDeferred(propertyName).done(function (response) {
-                                            var descriptor = response.propertyDescriptor;
-    
-                                            // store the descriptor for use later
-                                            var descriptors = table.data('descriptors');
-                                          if (!nfCommon.isUndefined(descriptors)) {
-                                                descriptors[descriptor.name] = descriptor;
-                                            }
-    
-                                            // add a row for the new property
-                                            var id = propertyData.getLength();
-                                            propertyData.addItem({
-                                                id: id,
-                                                hidden: false,
-                                                property: propertyName,
-                                                displayName: propertyName,
-                                                previousValue: null,
-                                                value: null,
-                                                type: 'userDefined'
-                                            });
-    
-                                            // select the new properties row
-                                            var row = propertyData.getRowById(id);
-                                            propertyGrid.setActiveCell(row, propertyGrid.getColumnIndex('value'));
-                                            propertyGrid.editActiveCell();
-                                        });
-                                    } else {
-                                        // if this row is currently hidden, clear the value and show it
-                                        if (existingItem.hidden === true) {
-                                            propertyData.updateItem(existingItem.id, $.extend(existingItem, {
-                                                hidden: false,
-                                                previousValue: null,
-                                                value: null
-                                            }));
-    
-                                            // select the new properties row
-                                            var row = propertyData.getRowById(existingItem.id);
-                                            propertyGrid.setActiveCell(row, propertyGrid.getColumnIndex('value'));
-                                            propertyGrid.editActiveCell();
-                                        } else {
-                                          nfDialog.showOkDialog({
-                                              headerText: nf._.msg('jquery-propertytable.PropertyExists'),
-                                              dialogContent: nf._.msg('jquery-propertytable.Message0')
-                                            });
-    
-                                            // select the existing properties row
-                                            var row = propertyData.getRowById(existingItem.id);
-                                            propertyGrid.setSelectedRows([row]);
-                                            propertyGrid.scrollRowIntoView(row);
-                                        }
-                                    }
-                                } else {
-                                  nfDialog.showOkDialog({
-                                      headerText: nf._.msg('jquery-propertytable.PropertyName'),
-                                      dialogContent: nf._.msg('jquery-propertytable.Message1')
-                                    });
-                                }
-    
-                                // close the dialog
-                                newPropertyDialog.modal('hide');
-                            };
-    
-                            var cancel = function () {
-                                newPropertyDialog.modal('hide');
-                            };
-    
-                            // enable enter to add
-                            newPropertyNameField.on('keydown', function (e) {
-                                var code = e.keyCode ? e.keyCode : e.which;
-                                if (code === $.ui.keyCode.ENTER) {
-                                    add();
-    
-                                    // prevents the enter from propagating into the field for editing the new property value
-                                    e.stopImmediatePropagation();
-                                    e.preventDefault();
-                                }
-                            });
-    
-                          newPropertyDialog.on('click', 'div.new-property-ok', add).on('click', 'div.new-property-cancel', cancel);
-    
-                            // build the control to open the new property dialog
-                            var addProperty = $('<div class="add-property"></div>').appendTo(header);
-                            $('<button class="button fa fa-plus"></button>').on('click', function () {
-                                // close all fields currently being edited
-                                saveRow(table);
-    
-                                // clear the dialog
-                                newPropertyNameField.val('');
-    
-                                // open the new property dialog
-                                newPropertyDialog.modal('show');
-    
-                                // set the initial focus
-                                newPropertyNameField.focus();
-                            }).appendTo(addProperty);
-                        }
-                        $('<div class="clear"></div>').appendTo(header);
-    
-                        // initializes the properties table
-                        initPropertiesTable(table, options);
-                    }
-                });
-            },
-    
-            /**
-             * Loads the specified properties.
-             *
-             * @argument {object} properties        The properties
-             * @argument {map} descriptors          The property descriptors (property name  property descriptor)
-             * @argument {map} history
-             */
-            loadProperties: function (properties, descriptors, history) {
-                return this.each(function () {
-                    var table = $(this).find('div.property-table');
-                    loadProperties(table, properties, descriptors, history);
-                });
-            },
-    
-            /**
-             * Saves the last edited row in the specified grid.
-             */
-            saveRow: function () {
-                return this.each(function () {
-                    var table = $(this).find('div.property-table');
-                    saveRow(table);
-                });
-            },
-    
-            /**
-             * Update the size of the grid based on its container's current size.
-             */
-            resetTableSize: function () {
-                return this.each(function () {
-                    var table = $(this).find('div.property-table');
-                    var propertyGrid = table.data('gridInstance');
-                  if (nfCommon.isDefinedAndNotNull(propertyGrid)) {
-                        propertyGrid.resizeCanvas();
-                    }
-                });
-            },
-    
-            /**
-             * Cancels the edit in the specified row.
-             */
-            cancelEdit: function () {
-                return this.each(function () {
-                    var table = $(this).find('div.property-table');
-                    var propertyGrid = table.data('gridInstance');
-                  if (nfCommon.isDefinedAndNotNull(propertyGrid)) {
-                        var editController = propertyGrid.getEditController();
-                        editController.cancelCurrentEdit();
-                    }
-                });
-            },
-    
-            /**
-             * Destroys the property table.
-             */
-            destroy: function () {
-                return this.each(function () {
-                    var propertyTableContainer = $(this);
-                    var options = propertyTableContainer.data('options');
-    
-                  if (nfCommon.isDefinedAndNotNull(options)) {
-                        // clear the property table container
-                        clear(propertyTableContainer);
-    
-                        // clear any existing new property dialogs
-                      if (nfCommon.isDefinedAndNotNull(options.dialogContainer)) {
-                            $('#new-property-dialog').modal("hide");
-                            $(options.dialogContainer).children('div.new-inline-controller-service-dialog').remove();
-                        }
-                    }
-                });
-            },
-    
-            /**
-             * Clears the property table.
-             */
-            clear: function () {
-                return this.each(function () {
-                    clear($(this));
-                });
-            },
-    
-            /**
-             * Determines if a save is required for the first matching element.
-             */
-            isSaveRequired: function () {
-                var isSaveRequired = false;
-    
-                this.each(function () {
-                    // get the property grid
-                    var table = $(this).find('div.property-table');
-                    var propertyGrid = table.data('gridInstance');
-                    var propertyData = propertyGrid.getData();
-    
-                    // determine if any of the properties have changed
-                    $.each(propertyData.getItems(), function () {
-                        if (this.value !== this.previousValue) {
-                            isSaveRequired = true;
-                            return false;
-                        }
-                    });
-    
-                    return false;
-                });
-    
-                return isSaveRequired;
-            },
-    
-            /**
-             * Marshalls the properties for the first matching element.
-             */
-            marshalProperties: function () {
-                // properties
-                var properties = {};
-    
-                this.each(function () {
-                    // get the property grid data
-                    var table = $(this).find('div.property-table');
-                    var propertyGrid = table.data('gridInstance');
-                    var propertyData = propertyGrid.getData();
-                    $.each(propertyData.getItems(), function () {
-                        if (this.hidden === true) {
-                            // hidden properties were removed by the user, clear the value
-                            properties[this.property] = null;
-                        } else if (this.value !== this.previousValue) {
-                            // the value has changed
-                            properties[this.property] = this.value;
-                        }
-                    });
-    
-                    return false;
-                });
-    
-                return properties;
-            },
-    
-            /**
-             * Sets the current group id.
-             */
-            setGroupId: function (currentGroupId) {
-                return this.each(function () {
-                    groupId = currentGroupId;
-                });
-            }
-        };
-    
-        $.fn.propertytable = function (method) {
-            if (methods[method]) {
-                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-            } else {
-                return methods.init.apply(this, arguments);
-            }
-        };
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
deleted file mode 100644
index 9e5ac333542c..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * 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.
- */
-/*
-    Styles for the Nifi tabs.
-*/
-
-ul.tab-pane {
-    display: block;
-}
-
-.tab {
-    float: left;
-    background-color: #eaeef0;
-    margin-right: 2px;
-    text-align: center;
-    cursor: pointer;
-    line-height: 32px;
-    font-weight: 500;
-    height: 31px;
-    min-width: 88px;
-    padding: 0 10px;
-    border: 1px solid #CCDADB;
-    text-transform: uppercase;
-    color: #004849;
-    border-bottom: 0px;
-}
-
-.tab:hover {
-    border: 1px solid #004849;
-}
-
-.selected-tab {
-    background-color: #fff;
-    border: 1px solid #004849;
-    border-bottom-color: #fff;
-    color: #262626;
-    border-bottom: 1px solid #fff !important;
-}
-
-.tab-container {
-    background-color: transparent;
-    height: 32px;
-    margin-bottom: 20px;
-    border-bottom: 1px solid #004849;
-    width: 100%;
-}
-
-div.configuration-tab {
-    display: none;
-}
-
-div[id$=-tabs-content] {
-    overflow: auto;
-    position: absolute;
-    top: 33px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-}
-
-div[id$=-tab-content] {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    left: 0px;
-    bottom: 0px;
-    padding-top: 10px;
-}
-
-div[id$=-properties] {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    left: 0px;
-    bottom: 0px;
-    padding-top: 10px;
-}
\ 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/tabbs/jquery.tabbs.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
deleted file mode 100644
index fdd59d47b901..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * 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.
- */
-(function ($) {
-
-    var isUndefined = function (obj) {
-        return typeof obj === 'undefined';
-    };
-
-    var isNull = function (obj) {
-        return obj === null;
-    };
-
-    var isDefinedAndNotNull = function (obj) {
-        return !isUndefined(obj) && !isNull(obj);
-    };
-
-    /**
-     * Create a new tabbed pane. The options are specified in the following
-     * format:
-     *
-     * {
-     *   tabStyle: 'tabStyle',
-     *   selectedTabStyle: 'selectedTabStyle',
-     *   tabs: [{
-     *      name: 'tab 1',
-     *      tabContentId: 'tab1ContentId'
-     *   }, {
-     *      name: 'tab 2',
-     *      tabContentId: 'tab2ContentId'
-     *   }],
-     *   select: selectHandler
-     * }
-     *
-     * @argument {object} options
-     */
-    $.fn.tabbs = function (options) {
-        return this.each(function () {
-            var tabPane = $(this);
-
-            // create the unorder list
-            var tabList = $('<ul/>').addClass('tab-pane');
-            var shownTab = false;
-
-            // create each tab
-            $.each(options.tabs, function () {
-                // generate the tab content style
-                var tabContentStyle = tabPane.attr('id') + '-content';
-                var tabDefinition = this;
-
-                // mark the tab content
-                $('#' + tabDefinition.tabContentId).addClass(tabContentStyle).hide();
-
-                // prep the tab itself
-                var tab = $('<li></li>').text(tabDefinition.name).addClass(options.tabStyle).click(function () {
-                    // hide all tab content
-                    $('.' + tabContentStyle).hide();
-
-                    // show the desired tab
-                    var tabContent = $('#' + tabDefinition.tabContentId).show();
-
-                    // check if content has overflow
-                    var tabContentContainer = tabContent.parent();
-                    if (tabContentContainer.get(0).offsetHeight < tabContentContainer.get(0).scrollHeight ||
-                        tabContentContainer.get(0).offsetWidth < tabContentContainer.get(0).scrollWidth) {
-                        tabContentContainer.addClass(options.scrollableTabContentStyle);
-                    } else {
-                        tabContentContainer.removeClass(options.scrollableTabContentStyle);
-                    }
-
-                    // unselect the previously selected tab
-                    tabList.children('.' + options.tabStyle).removeClass(options.selectedTabStyle);
-
-                    // mark the tab as selected
-                    $(this).addClass(options.selectedTabStyle);
-
-                    // fire a select event if applicable
-                    if (isDefinedAndNotNull(options.select)) {
-                        options.select.call(this);
-                    }
-                }).appendTo(tabList);
-
-                // always show the first tab
-                if (!shownTab) {
-                    tab.click();
-                    shownTab = true;
-                }
-            });
-
-            // add the tab list
-            tabList.appendTo(tabPane);
-        });
-    };
-})(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.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.css
deleted file mode 100644
index d1210ddc19fd..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * 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.
- */
-
-/*
-    Styles for the Nifi tag cloud.
-*/
-
-ul.tag-cloud {
-    font-size: 90%;
-    padding: 2px;
-    margin-left: -5px;
-    overflow: hidden;
-}
-
-ul.tag-cloud li {
-    float: left;
-    list-style-type: none;
-    margin: 2px 2px;
-    height: 20px;
-    white-space: nowrap;
-    line-height: 20px;
-    max-width: 180px;
-}
-
-ul.tag-filter {
-    overflow: hidden;
-    margin-top: 10px;
-}
-
-ul.tag-filter li {
-    height: 18px;
-    line-height: 18px;
-    padding: 2px;
-}
-
-div.selected-tag-text {
-    float: left;
-}
-
-img.remove-selected-tag {
-    float: right;
-    margin-top: 1px;
-}
-
-ul.tag-filter li {
-    background: #004849;
-    border-radius: 2px;
-    line-height: 15px;
-    padding: 5px 10px;
-    color: #ffffff;
-    margin: 5px;
-}
-
-.tag-filter .fa {
-    color: #fff !important;
-}
\ 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
deleted file mode 100644
index 26e33585c503..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.js
+++ /dev/null
@@ -1,225 +0,0 @@
-    /*
-     * 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 */
-    
-    /**
-     * jQuery plugin for a NiFi style tag cloud. The options are specified in the following
-     * format:
-     *
-     * {
-     *   tags: ['attributes', 'copy', 'regex', 'xml', 'copy', 'xml', 'attributes'],
-     *   select: selectHandler,
-     *   remove: removeHandler
-     * }
-     *
-     * @param {type} $
-     * @returns {undefined}
-     */
-    (function ($) {
-    
-        var isUndefined = function (obj) {
-            return typeof obj === 'undefined';
-        };
-    
-        var isNull = function (obj) {
-            return obj === null;
-        };
-    
-        var isDefinedAndNotNull = function (obj) {
-            return !isUndefined(obj) && !isNull(obj);
-        };
-    
-        var isBlank = function (str) {
-            return isUndefined(str) || isNull(str) || str === '';
-        };
-    
-        var config = {
-            maxTags: 25,
-            maxTagFontSize: 2,
-            minTagFontSize: 1,
-            minWidth: 20
-        };
-    
-        /**
-         * Adds the specified tag filter.
-         *
-         * @argument {jQuery} cloudContainer    The tag cloud container
-         * @argument {string} tag               The tag to add
-         */
-        var addTagFilter = function (cloudContainer, tag) {
-            var config = cloudContainer.data('options');
-            var tagFilter = cloudContainer.find('ul.tag-filter');
-    
-            // ensure this tag hasn't already been added
-            var tagFilterExists = false;
-            tagFilter.find('li div.selected-tag-text').each(function () {
-                if (tag === $(this).text()) {
-                    tagFilterExists = true;
-                    return false;
-                }
-            });
-    
-            // add this tag filter if applicable
-            if (!tagFilterExists) {
-                // create the list item content
-                var tagText = $('<div class="selected-tag-text"></div>').text(tag);
-                var removeTagIcon = $('<div class="fa fa-close remove-selected-tag pointer"></div>').click(function () {
-                    // remove this tag
-                    $(this).closest('li').remove();
-    
-                    // fire a remove event if applicable
-                    if (isDefinedAndNotNull(config.remove)) {
-                        config.remove.call(cloudContainer, tag);
-                    }
-                });
-                var selectedTagItem = $('<div layout="row" layout-align="space-between center"></div>').append(tagText).append(removeTagIcon);
-    
-                // create the list item and update the tag filter list
-                $('<li></li>').append(selectedTagItem).appendTo(tagFilter);
-    
-                // fire a select event if applicable
-                if (isDefinedAndNotNull(config.select)) {
-                    config.select.call(cloudContainer, tag);
-                }
-            }
-        };
-    
-        var methods = {
-    
-            /**
-             * Initializes the tag cloud.
-             *
-             * @argument {object} options The options for the tag cloud
-             */
-            init: function (options) {
-                return this.each(function () {
-                    // ensure the options have been properly specified
-                    if (isDefinedAndNotNull(options) && isDefinedAndNotNull(options.tags)) {
-                        // get the tag cloud
-                        var cloudContainer = $(this);
-    
-                        // clear any current contents, remote events, and store options
-                        cloudContainer.empty().unbind().data('options', options);
-    
-                        // build the component
-                        var cloud = $('<ul class="tag-cloud"></ul>').appendTo(cloudContainer);
-                        var filter = $('<ul class="tag-filter"></ul>').appendTo(cloudContainer);
-    
-                        var tagCloud = {};
-                        var tags = [];
-    
-                        // count the frequency of each tag for this type
-                        $.each(options.tags, function (i, tag) {
-                            var normalizedTagName = tag.toLowerCase();
-    
-                          if (isDefinedAndNotNull(tagCloud[normalizedTagName])) {
-                                tagCloud[normalizedTagName].count = tagCloud[normalizedTagName].count + 1;
-                            } else {
-                                var tagCloudEntry = {
-                                    term: normalizedTagName,
-                                    count: 1
-                                };
-                                tags.push(tagCloudEntry);
-                                tagCloud[normalizedTagName] = tagCloudEntry;
-                            }
-                        });
-    
-                        // handle the case when no tags are present
-                        if (tags.length > 0) {
-                            // sort the tags by frequency to limit the less frequent tags
-                            tags.sort(function (a, b) {
-                                return b.count - a.count;
-                            });
-    
-                            // limit to the most frequest tags
-                            if (tags.length > config.maxTags) {
-                                tags = tags.slice(0, config.maxTags);
-                            }
-    
-                            // determine the max frequency
-                            var maxFrequency = tags[0].count;
-    
-                            // sort the tags alphabetically
-                            tags.sort(function (a, b) {
-                                var compA = a.term.toUpperCase();
-                                var compB = b.term.toUpperCase();
-                                return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
-                            });
-    
-                            // set the tag content
-                            $.each(tags, function (i, tag) {
-                                // determine the appropriate font size
-                                var fontSize = Math.log(tag.count) / Math.log(maxFrequency) * (config.maxTagFontSize - config.minTagFontSize) + config.minTagFontSize;
-                                var minWidth = config.minWidth * fontSize;
-    
-                                // create the tag cloud entry
-                                $('<li></li>').append($('<span class="link"></span>').text(tag.term).css({
-                                    'font-size': fontSize + 'em'
-                                })).css({
-                                    'min-width': minWidth + 'px'
-                                }).click(function () {
-                                    // ensure we don't exceed 5 selected
-                                    if (filter.children('li').length < 5) {
-                                        var tagText = $(this).children('span').text();
-                                        addTagFilter(cloudContainer, tagText);
-                                    }
-                                }).appendTo(cloud).ellipsis();
-                            });
-                        } else {
-                            // indicate when no tags are found
-                          $('<li><span class="unset">' + nf._.msg('jquery-tagcloud.NoTagsSpecified') + '</span></li>').appendTo(cloud);
-                        }
-                    }
-                });
-            },
-    
-            /**
-             * Resets the selected tags from the tag cloud.
-             */
-            clearSelectedTags: function () {
-                return this.each(function () {
-                    var cloudContainer = $(this);
-                    cloudContainer.find('div.remove-selected-tag').trigger('click');
-                });
-            },
-    
-            /**
-             * Returns the selected tags of the first matching element.
-             */
-            getSelectedTags: function () {
-                var tags = [];
-    
-                this.each(function () {
-                    var cloudContainer = $(this);
-                    cloudContainer.find('div.selected-tag-text').each(function () {
-                        tags.push($(this).text());
-                    });
-                });
-    
-                return tags;
-            }
-        };
-    
-        $.fn.tagcloud = function (method) {
-            if (methods[method]) {
-                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-            } else {
-                return methods.init.apply(this, arguments);
-            }
-        };
-    })(jQuery);
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
deleted file mode 100644
index 97503ee2f613..000000000000
--- 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
+++ /dev/null
@@ -1,494 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'angular',
-                  'nf.Common',
-                  'nf.ng.AppConfig',
-                  'nf.ng.AppCtrl',
-                  'nf.ng.ServiceProvider',
-                  'nf.ng.Bridge',
-                  'nf.ErrorHandler',
-                  'nf.Storage'],
-              function ($,
-                        angular,
-                        nfCommon,
-                        appConfig,
-                        appCtrl,
-                        serviceProvider,
-                        nfNgBridge,
-                        nfErrorHandler,
-                        nfStorage) {
-                  return (nf.ng.BulletinBoardCtrl =
-                      factory($,
-                          angular,
-                          nfCommon,
-                          appConfig,
-                          appCtrl,
-                          serviceProvider,
-                          nfNgBridge,
-                          nfErrorHandler,
-                          nfStorage));
-              });
-      } 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, nfCommon, appConfig, appCtrl, serviceProvider, nfNgBridge, nfErrorHandler, nfStorage) {
-       'use strict';
-    
-        $(document).ready(function () {
-    
-            //Create Angular App
-            var app = angular.module('ngBulletinBoardApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
-    
-            //Define Dependency Injection Annotations
-          appConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
-          appCtrl.$inject = ['$scope', 'serviceProvider', 'bulletinBoardCtrl'];
-          nfBulletinBoard.$inject = ['serviceProvider'];
-          serviceProvider.$inject = [];
-    
-            //Configure Angular App
-          app.config(appConfig);
-    
-            //Define Angular App Controllers
-          app.controller('ngBulletinBoardAppCtrl', appCtrl);
-    
-            //Define Angular App Services
-          app.service('serviceProvider', serviceProvider);
-          app.service('bulletinBoardCtrl', nfBulletinBoard);
-    
-            //Manually Boostrap Angular App
-          nfNgBridge.injector = angular.bootstrap($('body'), ['ngBulletinBoardApp'], {strictDi: true});
-    
-            // initialize the bulletin board
-          nfNgBridge.injector.get('bulletinBoardCtrl').init();
-      });
-  
-      var nfBulletinBoard = function (serviceProvider) {
-    
-            /**
-             * 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'
-                }
-            };
-    
-            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();
-                });
-    
-                // filter type
-                $('#bulletin-board-filter-type').combo({
-                    options: [{
-                        text: nf._.msg('nf-bulletin-board.ByMessage'),
-                        value: 'message'
-                    }, {
-                        text: nf._.msg('nf-bulletin-board.ByName'),
-                        value: 'sourceName'
-                    }, {
-                        text: nf._.msg('nf-bulletin-board.ById'),
-                        value: 'sourceId'
-                    }, {
-                        text: nf._.msg('nf-bulletin-board.ByGroupId'),
-                        value: 'groupId'
-                    }]
-                });
-    
-                // get the about details
-                var getTitle = $.ajax({
-                    type: 'GET',
-                    url: config.urls.about,
-                    dataType: 'json'
-                }).done(function (response) {
-                    var aboutDetails = response.about;
-                    var bulletinBoardTitle = nf._.msg('nf-about')+ nf._.msg('nf-bulletin-board.BulletinBoard');
-    
-                    // set the document title and the about title
-                    document.title = bulletinBoardTitle;
-                    $('#bulletin-board-header-text').text(bulletinBoardTitle);
-              }).fail(nfErrorHandler.handleAjaxError);
-    
-                // 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 (nfCommon.isDefinedAndNotNull(response.banners)) {
-                              if (nfCommon.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('bulletin-board');
-                                }
-    
-                              if (nfCommon.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) {
-                          nfErrorHandler.handleAjaxError(xhr, status, error);
-                            deferred.reject();
-                        });
-                    } else {
-                        deferred.resolve();
-                    }
-                });
-    
-                return $.Deferred(function (deferred) {
-                    $.when(getTitle, loadBanners).done(function () {
-                        deferred.resolve();
-                    }).fail(function () {
-                        deferred.reject();
-                    });
-                }).promise();
-            };
-    
-            /**
-             * Starts polling for new bulletins.
-             */
-            var start = function () {
-                var refreshButton = $('#refresh-button');
-                var bulletinContainer = $('#bulletin-board-container');
-    
-                appendAndScroll(bulletinContainer, '<div class="bulletin-action">'+nf._.msg('nf-bulletin-board.Message3')+'</div>');
-    
-                // 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, '<div class="bulletin-action">'+nf._.msg('nf-bulletin-board.Message4')+'</div>');
-    
-                // 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 (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && nfCommon.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"
-                        });
-                    }
-    
-                  nfStorage.init();
-    
-                    initializePage().done(function () {
-                        start();
-                    });
-                },
-    
-                /**
-                 * Loads the bulletins since the last refresh.
-                 */
-                loadBulletins: function () {
-                    var data = {};
-    
-                    // include the timestamp if appropriate
-                  if (nfCommon.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 = $('<div class="bulletin-action"></div>').text(nf._.msg('nf-bulletin-board.Message1') + filterOption.text + nf._.msg('nf-bulletin-board.Message2') + filter + '\'');
-                            appendAndScroll(bulletinContainer, filterContent.get(0));
-                            filterText = filter;
-                            filterType = filterOption.text;
-                        }
-                    } else if (filterText !== null) {
-                        appendAndScroll(bulletinContainer, '<div class="bulletin-action">'+nf._.msg('nf-bulletin-board.Message5')+'</div>');
-                        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 (nfCommon.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 (nfCommon.isDefinedAndNotNull(bulletin.sourceId) && nfCommon.isDefinedAndNotNull(bulletin.groupId) && top !== window) {
-                                        source = $('<div class="bulletin-source bulletin-link"></div>').text(bulletin.sourceId).on('click', function () {
-                                            goToSource(bulletin.groupId, bulletin.sourceId);
-                                        });
-                                    } else {
-                                        var sourceId = bulletin.sourceId;
-                                      if (nfCommon.isUndefined(sourceId) || nfCommon.isNull(sourceId)) {
-                                            sourceId = '';
-                                        }
-                                        source = $('<div class="bulletin-source"></div>').text(sourceId);
-                                    }
-    
-                                    // build the markup for this bulletin
-                                    var bulletinMarkup = $('<div class="bulletin"></div>');
-    
-                                    // build the markup for this bulletins info
-                                    var bulletinInfoMarkup = $('<div class="bulletin-info"></div>').appendTo(bulletinMarkup);
-                                    $('<div class="bulletin-timestamp"></div>').text(bulletin.timestamp).appendTo(bulletinInfoMarkup);
-                                    $('<div class="bulletin-severity"></div>').addClass(severityStyle).text(bulletin.level).appendTo(bulletinInfoMarkup);
-                                    source.appendTo(bulletinInfoMarkup);
-                                    $('<div class="clear"></div>').appendTo(bulletinInfoMarkup);
-    
-                                    // format the node address if applicable
-                                  if (nfCommon.isDefinedAndNotNull(bulletin.nodeAddress)) {
-                                        $('<div class="bulletin-node"></div>').text(bulletin.nodeAddress).appendTo(bulletinMarkup);
-                                    }
-    
-                                    // add the bulletin message (treat as text)
-                                    $('<pre class="bulletin-message"></pre>').text(bulletin.message).appendTo(bulletinMarkup);
-                                    $('<div class="clear"></div>').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('<div class="bulletin-action">&#8230;</div>');
-                            }
-                        }
-                    }).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 {
-                          nfErrorHandler.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;
-        };
-    
-      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-breadcrumbs-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js
deleted file mode 100644
index 72cd57ba0f74..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js
+++ /dev/null
@@ -1,192 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common'],
-            function ($, nfCommon) {
-                return (nf.ng.BreadcrumbsCtrl = factory($, nfCommon));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.BreadcrumbsCtrl =
-            factory(require('jquery'),
-                require('nf.Common')));
-    } else {
-        nf.ng.BreadcrumbsCtrl = factory(root.$,
-            root.nf.Common);
-    }
-}(this, function ($, nfCommon) {
-    'use strict';
-
-    return function (serviceProvider) {
-        'use strict';
-
-        function BreadcrumbsCtrl() {
-            this.breadcrumbs = [];
-        }
-
-        BreadcrumbsCtrl.prototype = {
-            constructor: BreadcrumbsCtrl,
-
-            /**
-             *  Register the breadcrumbs controller.
-             */
-            register: function () {
-                if (serviceProvider.breadcrumbsCtrl === undefined) {
-                    serviceProvider.register('breadcrumbsCtrl', breadcrumbsCtrl);
-                }
-            },
-
-            /**
-             * Generate the breadcrumbs.
-             *
-             * @param {object} breadcrumbEntity  The breadcrumb
-             */
-            generateBreadcrumbs: function (breadcrumbEntity) {
-                var label = breadcrumbEntity.id;
-                if (breadcrumbEntity.permissions.canRead) {
-                    label = breadcrumbEntity.breadcrumb.name;
-                }
-
-                this.breadcrumbs.unshift($.extend({
-                    'label': label
-                }, breadcrumbEntity));
-
-                if (nfCommon.isDefinedAndNotNull(breadcrumbEntity.parentBreadcrumb)) {
-                    this.generateBreadcrumbs(breadcrumbEntity.parentBreadcrumb);
-                }
-            },
-
-            /**
-             * Reset the breadcrumbs.
-             */
-            resetBreadcrumbs: function () {
-                this.breadcrumbs = [];
-            },
-
-            /**
-             * Get the breadcrumbs.
-             */
-            getBreadcrumbs: function () {
-                return this.breadcrumbs;
-            },
-
-            /**
-             * Update the breadcrumbs css.
-             *
-             * @param {object} style  The style to be applied.
-             */
-            updateBreadcrumbsCss: function (style) {
-                $('#breadcrumbs').css(style);
-            },
-
-            /**
-             * Reset initial scroll position.
-             */
-            resetScrollPosition: function () {
-                var title = $('#data-flow-title-container');
-                var titlePosition = title.position();
-                var titleWidth = title.outerWidth();
-                var titleRight = titlePosition.left + titleWidth;
-
-                var padding = $('#breadcrumbs-right-border').width();
-                var viewport = $('#data-flow-title-viewport');
-                var viewportWidth = viewport.width();
-                var viewportRight = viewportWidth - padding;
-
-                // if the title's right is past the viewport's right, shift accordingly
-                if (titleRight > viewportRight) {
-                    // adjust the position
-                    title.css('left', (titlePosition.left - (titleRight - viewportRight)) + 'px');
-                } else {
-                    title.css('left', '10px');
-                }
-            },
-
-            /**
-             * Registers a scroll event on the `element`
-             *
-             * @param {object} element    The element event listener will be registered upon.
-             */
-            registerMouseWheelEvent: function (element) {
-                // mousewheel -> IE, Chrome
-                // DOMMouseScroll -> FF
-                // wheel -> FF, IE
-
-                // still having issues with this in IE :/
-                element.on('DOMMouseScroll mousewheel', function (evt, d) {
-                    if (nfCommon.isUndefinedOrNull(evt.originalEvent)) {
-                        return;
-                    }
-
-                    var title = $('#data-flow-title-container');
-                    var titlePosition = title.position();
-                    var titleWidth = title.outerWidth();
-                    var titleRight = titlePosition.left + titleWidth;
-
-                    var padding = $('#breadcrumbs-right-border').width();
-                    var viewport = $('#data-flow-title-viewport');
-                    var viewportWidth = viewport.width();
-                    var viewportRight = viewportWidth - padding;
-
-                    // if the width of the title is larger than the viewport
-                    if (titleWidth > viewportWidth) {
-                        var adjust = false;
-
-                        var delta = 0;
-
-                        //Chrome and Safari both have evt.originalEvent.detail defined but
-                        //evt.originalEvent.wheelDelta holds the correct value so we must
-                        //check for evt.originalEvent.wheelDelta first!
-                        if (nfCommon.isDefinedAndNotNull(evt.originalEvent.wheelDelta)) {
-                            delta = evt.originalEvent.wheelDelta;
-                        } else if (nfCommon.isDefinedAndNotNull(evt.originalEvent.detail)) {
-                            delta = -evt.originalEvent.detail;
-                        }
-
-                        // determine the increment
-                        if (delta > 0 && titleRight > viewportRight) {
-                            var increment = -25;
-                            adjust = true;
-                        } else if (delta < 0 && (titlePosition.left - padding) < 0) {
-                            increment = 25;
-
-                            // don't shift too far
-                            if (titlePosition.left + increment > padding) {
-                                increment = padding - titlePosition.left;
-                            }
-
-                            adjust = true;
-                        }
-
-                        if (adjust) {
-                            // adjust the position
-                            title.css('left', (titlePosition.left + increment) + 'px');
-                        }
-                    }
-                });
-            }
-        }
-
-        var breadcrumbsCtrl = new BreadcrumbsCtrl();
-        breadcrumbsCtrl.register();
-        return breadcrumbsCtrl;
-    }
-}));
\ No newline at end of file
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
deleted file mode 100644
index b4acd58bacc9..000000000000
--- 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
+++ /dev/null
@@ -1,520 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.CanvasUtils',
-                  'nf.ContextMenu',
-                  'nf.ClusterSummary',
-                  'nf.ErrorHandler',
-                  'nf.Settings'],
-              function ($, nfCommon, nfDialog, nfCanvasUtils, nfContextMenu, nfClusterSummary, nfErrorHandler, nfSettings) {
-                  return (nf.ng.Canvas.FlowStatusCtrl = factory($, nfCommon, nfDialog, nfCanvasUtils, nfContextMenu, nfClusterSummary, nfErrorHandler, nfSettings));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ng.Canvas.FlowStatusCtrl =
-              factory(require('jquery'),
-                  require('nf.Common'),
-                  require('nf.Dialog'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ContextMenu'),
-                  require('nf.ClusterSummary'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Settings')));
-      } else {
-          nf.ng.Canvas.FlowStatusCtrl = factory(root.$,
-              root.nf.Common,
-              root.nf.Dialog,
-              root.nf.CanvasUtils,
-              root.nf.ContextMenu,
-              root.nf.ClusterSummary,
-              root.nf.ErrorHandler,
-              root.nf.Settings);
-      }
-  }(this, function ($, nfCommon, nfDialog, nfCanvasUtils, nfContextMenu, nfClusterSummary, nfErrorHandler, nfSettings) {
-      'use strict';
-  
-      return function (serviceProvider) {
-            'use strict';
-    
-            var config = {
-                search: 'Search',
-                urls: {
-                    search: '../nifi-api/flow/search-results',
-                    status: '../nifi-api/flow/status'
-                }
-            };
-    
-            function FlowStatusCtrl() {
-                this.connectedNodesCount = "-";
-                this.activeThreadCount = "-";
-                this.totalQueued = "-";
-                this.controllerTransmittingCount = "-";
-                this.controllerNotTransmittingCount = "-";
-                this.controllerRunningCount = "-";
-                this.controllerStoppedCount = "-";
-                this.controllerInvalidCount = "-";
-                this.controllerDisabledCount = "-";
-                this.statsLastRefreshed = "-";
-    
-                /**
-                 * The search controller.
-                 */
-                this.search = {
-    
-                    /**
-                     * Get the search input element.
-                     */
-                    getInputElement: function () {
-                        return $('#search-field');
-                    },
-    
-                    /**
-                     * Get the search button element.
-                     */
-                    getButtonElement: function () {
-                        return $('#search-button');
-                    },
-    
-                    /**
-                     * Get the search container element.
-                     */
-                    getSearchContainerElement: function () {
-                        return $('#search-container');
-                    },
-    
-                    /**
-                     * Initialize the search controller.
-                     */
-                    init: function () {
-    
-                      var searchCtrl = this;
-    
-                        // Create new jQuery UI widget
-                        $.widget('nf.searchAutocomplete', $.ui.autocomplete, {
-                            reset: function () {
-                                this.term = null;
-                            },
-                          _create: function () {
-                              this._super();
-                              this.widget().menu('option', 'items', '> :not(.search-header, .search-no-matches)');
-                          },
-                            _resizeMenu: function () {
-                                var ul = this.menu.element;
-                              ul.width(400);
-                            },
-                            _normalize: function (searchResults) {
-                                var items = [];
-                                items.push(searchResults);
-                                return items;
-                            },
-                            _renderMenu: function (ul, items) {
-                              var nfSearchAutocomplete = this;
-    
-                                // the object that holds the search results is normalized into a single element array
-                                var searchResults = items[0];
-    
-                                // show all processors
-                              if (!nfCommon.isEmpty(searchResults.processorResults)) {
-                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-processor"></div>'+nf._.msg('nf-canvas-flow-status-controller.Processors')+'</li>');
-                                    $.each(searchResults.processorResults, function (i, processorMatch) {
-                                      nfSearchAutocomplete._renderItem(ul, processorMatch);
-                                    });
-                                }
-    
-                                // show all process groups
-                              if (!nfCommon.isEmpty(searchResults.processGroupResults)) {
-                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-group"></div>'+nf._.msg('nf-canvas-flow-status-controller.ProcessGroups')+'</li>');
-                                    $.each(searchResults.processGroupResults, function (i, processGroupMatch) {
-                                      nfSearchAutocomplete._renderItem(ul, processGroupMatch);
-                                    });
-                                }
-    
-                                // show all remote process groups
-                              if (!nfCommon.isEmpty(searchResults.remoteProcessGroupResults)) {
-                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-group-remote"></div>'+nf._.msg('nf-canvas-flow-status-controller.RemoteProcessGroups')+'</li>');
-                                    $.each(searchResults.remoteProcessGroupResults, function (i, remoteProcessGroupMatch) {
-                                      nfSearchAutocomplete._renderItem(ul, remoteProcessGroupMatch);
-                                    });
-                                }
-    
-                                // show all connections
-                              if (!nfCommon.isEmpty(searchResults.connectionResults)) {
-                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-connect"></div>'+nf._.msg('nf-canvas-flow-status-controller.Connection')+'</li>');
-                                    $.each(searchResults.connectionResults, function (i, connectionMatch) {
-                                      nfSearchAutocomplete._renderItem(ul, connectionMatch);
-                                    });
-                                }
-    
-                                // show all input ports
-                              if (!nfCommon.isEmpty(searchResults.inputPortResults)) {
-                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-port-in"></div>'+nf._.msg('nf-canvas-flow-status-controller.InputPorts')+'</li>');
-                                    $.each(searchResults.inputPortResults, function (i, inputPortMatch) {
-                                      nfSearchAutocomplete._renderItem(ul, inputPortMatch);
-                                    });
-                                }
-    
-                                // show all output ports
-                              if (!nfCommon.isEmpty(searchResults.outputPortResults)) {
-                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-port-out"></div>'+nf._.msg('nf-canvas-flow-status-controller.OutputPorts')+'</li>');
-                                    $.each(searchResults.outputPortResults, function (i, outputPortMatch) {
-                                      nfSearchAutocomplete._renderItem(ul, outputPortMatch);
-                                    });
-                                }
-    
-                                // show all funnels
-                              if (!nfCommon.isEmpty(searchResults.funnelResults)) {
-                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-funnel"></div>'+nf._.msg('nf-canvas-flow-status-controller.Funnel')+'</li>');
-                                    $.each(searchResults.funnelResults, function (i, funnelMatch) {
-                                      nfSearchAutocomplete._renderItem(ul, funnelMatch);
-                                    });
-                                }
-    
-                                // ensure there were some results
-                                if (ul.children().length === 0) {
-                              ul.append('<li class="unset search-no-matches">'+nf._.msg('nf-canvas-flow-status-controller.no-matches')+'</li>');
-                                }
-                            },
-                            _renderItem: function (ul, match) {
-                                var itemContent = $('<a></a>').append($('<div class="search-match-header"></div>').text(match.name));
-                                $.each(match.matches, function (i, match) {
-                                    itemContent.append($('<div class="search-match"></div>').text(match));
-                                });
-                                return $('<li></li>').data('ui-autocomplete-item', match).append(itemContent).appendTo(ul);
-                            }
-                      });
-    
-                        // configure the new searchAutocomplete jQuery UI widget
-                        this.getInputElement().searchAutocomplete({
-                            appendTo: '#search-flow-results',
-                            position: {
-                                my: 'right top',
-                                at: 'right bottom',
-                                offset: '1 1'
-                            },
-                            source: function (request, response) {
-                                // create the search request
-                                $.ajax({
-                                    type: 'GET',
-                                    data: {
-                                        q: request.term
-                                    },
-                                    dataType: 'json',
-                                    url: config.urls.search
-                                }).done(function (searchResponse) {
-                                    response(searchResponse.searchResultsDTO);
-                                });
-                            },
-                            select: function (event, ui) {
-                                var item = ui.item;
-    
-                                // show the selected component
-                              nfCanvasUtils.showComponent(item.groupId, item.id);
-    
-                              searchCtrl.getInputElement().val('').blur();
-    
-                                // stop event propagation
-                                return false;
-                            },
-                            open: function (event, ui) {
-                                // show the glass pane
-                                var searchField = $(this);
-                                $('<div class="search-glass-pane"></div>').one('click', function () {
-                                }).appendTo('body');
-                            },
-                            close: function (event, ui) {
-                                // set the input text to '' and reset the cached term
-                                $(this).searchAutocomplete('reset');
-                              searchCtrl.getInputElement().val('');
-    
-                                // remove the glass pane
-                                $('div.search-glass-pane').remove();
-                            }
-                        });
-    
-                        // hide the search input
-                      searchCtrl.toggleSearchField();
-                    },
-    
-                    /**
-                     * Toggle/Slide the search field open/closed.
-                     */
-                    toggleSearchField: function () {
-                      var searchCtrl = this;
-    
-                        // hide the context menu if necessary
-                      nfContextMenu.hide();
-    
-                      var isVisible = searchCtrl.getInputElement().is(':visible');
-                        var display = 'none';
-                        var class1 = 'search-container-opened';
-                        var class2 = 'search-container-closed';
-                        if (!isVisible) {
-                          searchCtrl.getButtonElement().css('background-color', '#FFFFFF');
-                            display = 'inline-block';
-                            class1 = 'search-container-closed';
-                            class2 = 'search-container-opened';
-                        } else {
-                          searchCtrl.getInputElement().css('display', display);
-                        }
-    
-                        this.getSearchContainerElement().switchClass(class1, class2, 500, function () {
-                          searchCtrl.getInputElement().css('display', display);
-                            if (!isVisible) {
-                              searchCtrl.getButtonElement().css('background-color', '#FFFFFF');
-                              searchCtrl.getInputElement().focus();
-                            } else {
-                              searchCtrl.getButtonElement().css('background-color', '#E3E8EB');
-                            }
-                        });
-                    }
-                }
-    
-                /**
-                 * The bulletins controller.
-                 */
-                this.bulletins = {
-    
-                    /**
-                     * Update the bulletins.
-                     *
-                     * @param response  The controller bulletins returned from the `../nifi-api/controller/bulletins` endpoint.
-                     */
-                    update: function (response) {
-    
-                        // icon for system bulletins
-                        var bulletinIcon = $('#bulletin-button');
-                        var currentBulletins = bulletinIcon.data('bulletins');
-    
-                        // update the bulletins if necessary
-                      if (nfCommon.doBulletinsDiffer(currentBulletins, response.bulletins)) {
-                            bulletinIcon.data('bulletins', response.bulletins);
-    
-                            // get the formatted the bulletins
-                          var bulletins = nfCommon.getFormattedBulletins(response.bulletins);
-    
-                            // bulletins for this processor are now gone
-                            if (bulletins.length === 0) {
-                                if (bulletinIcon.data('qtip')) {
-                                    bulletinIcon.removeClass('has-bulletins').qtip('api').destroy(true);
-                                }
-                            } else {
-                              var newBulletins = nfCommon.formatUnorderedList(bulletins);
-    
-                                // different bulletins, refresh
-                                if (bulletinIcon.data('qtip')) {
-                                    bulletinIcon.qtip('option', 'content.text', newBulletins);
-                                } else {
-                                    // no bulletins before, show icon and tips
-                                    bulletinIcon.addClass('has-bulletins').qtip($.extend({},
-                                      nfCanvasUtils.config.systemTooltipConfig,
-                                        {
-                                            content: newBulletins,
-                                            position: {
-                                                at: 'bottom left',
-                                                my: 'top right',
-                                                adjust: {
-                                                    x: 4
-                                                }
-                                            }
-                                        }
-                                    ));
-                                }
-                            }
-                        }
-    
-                        // update controller service and reporting task bulletins
-                      nfSettings.setBulletins(response.controllerServiceBulletins, response.reportingTaskBulletins);
-                    }
-    
-                }
-            }
-    
-            FlowStatusCtrl.prototype = {
-                constructor: FlowStatusCtrl,
-    
-                /**
-                 * Initialize the flow status controller.
-                 */
-                init: function () {
-                    this.search.init();
-                },
-    
-                /**
-                 * Reloads the current status of the flow.
-                 */
-                reloadFlowStatus: function () {
-                  var flowStatusCtrl = this;
-    
-                    return $.ajax({
-                        type: 'GET',
-                        url: config.urls.status,
-                        dataType: 'json'
-                    }).done(function (response) {
-                        // report the updated status
-                      if (nfCommon.isDefinedAndNotNull(response.controllerStatus)) {
-                          flowStatusCtrl.update(response.controllerStatus);
-                        }
-                  }).fail(nfErrorHandler.handleAjaxError);
-                },
-    
-                /**
-                 * Updates the cluster summary.
-                 *
-               * @param summary
-                 */
-              updateClusterSummary: function (summary) {
-                    // see if this node has been (dis)connected
-                  if (nfClusterSummary.isConnectedToCluster() !== summary.connectedToCluster) {
-                      if (summary.connectedToCluster) {
-                          nfDialog.showConnectedToClusterMessage();
-                        } else {
-                          nfDialog.showDisconnectedFromClusterMessage();
-                        }
-                    }
-    
-                    var color = '#728E9B';
-    
-                    // update the connection state
-                  if (summary.connectedToCluster) {
-                      if (nfCommon.isDefinedAndNotNull(summary.connectedNodes)) {
-                          var connectedNodes = summary.connectedNodes.split(' / ');
-                            if (connectedNodes.length === 2 && connectedNodes[0] !== connectedNodes[1]) {
-                                this.clusterConnectionWarning = true;
-                                color = '#BA554A';
-                            }
-                        }
-                        this.connectedNodesCount =
-                          nfCommon.isDefinedAndNotNull(summary.connectedNodes) ? summary.connectedNodes : '-';
-                    } else {
-                        this.connectedNodesCount = 'Disconnected';
-                        color = '#BA554A';
-                    }
-    
-                    // update the color
-                    $('#connected-nodes-count').closest('div.fa-cubes').css('color', color);
-                },
-    
-                /**
-                 * Update the flow status counts.
-                 *
-                 * @param status  The controller status returned from the `../nifi-api/flow/status` endpoint.
-                 */
-                update: function (status) {
-                  var controllerInvalidCount = (nfCommon.isDefinedAndNotNull(status.invalidCount)) ? status.invalidCount : 0;
-  
-                  if (this.controllerInvalidCount > 0) {
-                      $('#controller-invalid-count').parent().removeClass('zero').addClass('invalid');
-                  } else {
-                      $('#controller-invalid-count').parent().removeClass('invalid').addClass('zero');
-                  }
-    
-                    // update the report values
-                    this.activeThreadCount = status.activeThreadCount;
-    
-                  if (this.activeThreadCount > 0) {
-                      $('#flow-status-container').find('.icon-threads').removeClass('zero');
-                  } else {
-                      $('#flow-status-container').find('.icon-threads').addClass('zero');
-                  }
-  
-                    this.totalQueued = status.queued;
-    
-                  if (this.totalQueued.indexOf('0 / 0') >= 0) {
-                      $('#flow-status-container').find('.fa-list').addClass('zero');
-                  } else {
-                      $('#flow-status-container').find('.fa-list').removeClass('zero');
-                  }
-  
-                    // update the component counts
-                    this.controllerTransmittingCount =
-                      nfCommon.isDefinedAndNotNull(status.activeRemotePortCount) ?
-                            status.activeRemotePortCount : '-';
-    
-                  if (this.controllerTransmittingCount > 0) {
-                      $('#flow-status-container').find('.fa-bullseye').removeClass('zero').addClass('transmitting');
-                  } else {
-                      $('#flow-status-container').find('.fa-bullseye').removeClass('transmitting').addClass('zero');
-                  }
-  
-                    this.controllerNotTransmittingCount =
-                      nfCommon.isDefinedAndNotNull(status.inactiveRemotePortCount) ?
-                            status.inactiveRemotePortCount : '-';
-    
-                  if (this.controllerNotTransmittingCount > 0) {
-                      $('#flow-status-container').find('.icon-transmit-false').removeClass('zero').addClass('not-transmitting');
-                  } else {
-                      $('#flow-status-container').find('.icon-transmit-false').removeClass('not-transmitting').addClass('zero');
-                  }
-  
-                    this.controllerRunningCount =
-                      nfCommon.isDefinedAndNotNull(status.runningCount) ? status.runningCount : '-';
-  
-                  if (this.controllerRunningCount > 0) {
-                      $('#flow-status-container').find('.fa-play').removeClass('zero').addClass('running');
-                  } else {
-                      $('#flow-status-container').find('.fa-play').removeClass('running').addClass('zero');
-                  }
-    
-                    this.controllerStoppedCount =
-                      nfCommon.isDefinedAndNotNull(status.stoppedCount) ? status.stoppedCount : '-';
-  
-                  if (this.controllerStoppedCount > 0) {
-                      $('#flow-status-container').find('.fa-stop').removeClass('zero').addClass('stopped');
-                  } else {
-                      $('#flow-status-container').find('.fa-stop').removeClass('stopped').addClass('zero');
-                  }
-    
-                    this.controllerInvalidCount =
-                      nfCommon.isDefinedAndNotNull(status.invalidCount) ? status.invalidCount : '-';
-  
-                  if (this.controllerInvalidCount > 0) {
-                      $('#flow-status-container').find('.fa-warning').removeClass('zero').addClass('invalid');
-                  } else {
-                      $('#flow-status-container').find('.fa-warning').removeClass('invalid').addClass('zero');
-                  }
-    
-                    this.controllerDisabledCount =
-                      nfCommon.isDefinedAndNotNull(status.disabledCount) ? status.disabledCount : '-';
-  
-                  if (this.controllerDisabledCount > 0) {
-                      $('#flow-status-container').find('.icon-enable-false').removeClass('zero').addClass('disabled');
-                  } else {
-                      $('#flow-status-container').find('.icon-enable-false').removeClass('disabled').addClass('zero');
-                  }
-    
-                },
-    
-                /**
-                 * Updates the controller level bulletins
-                 *
-                 * @param response
-                 */
-                updateBulletins: function (response) {
-                    this.bulletins.update(response);
-                }
-            }
-    
-            var flowStatusCtrl = new FlowStatusCtrl();
-            return flowStatusCtrl;
-        };
-  }));
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
deleted file mode 100644
index ef06518a7944..000000000000
--- 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
+++ /dev/null
@@ -1,440 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Common',
-                  'nf.QueueListing',
-                  'nf.Shell',
-                  'nf.PolicyManagement',
-                  'nf.ClusterSummary',
-                  'nf.ErrorHandler',
-                  'nf.Settings',
-                  'nf.CanvasUtils'],
-              function ($, nfCommon, nfQueueListing, nfShell, nfPolicyManagement, nfClusterSummary, nfErrorHandler, nfSettings, nfCanvasUtils) {
-                  return (nf.ng.Canvas.GlobalMenuCtrl = factory($, nfCommon, nfQueueListing, nfShell, nfPolicyManagement, nfClusterSummary, nfErrorHandler, nfSettings, nfCanvasUtils));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ng.Canvas.GlobalMenuCtrl =
-              factory(require('jquery'),
-                  require('nf.Common'),
-                  require('nf.QueueListing'),
-                  require('nf.Shell'),
-                  require('nf.PolicyManagement'),
-                  require('nf.ClusterSummary'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Settings'),
-                  require('nf.CanvasUtils')));
-      } else {
-          nf.ng.Canvas.GlobalMenuCtrl = factory(root.$,
-              root.nf.Common,
-              root.nf.QueueListing,
-              root.nf.Shell,
-              root.nf.PolicyManagement,
-              root.nf.ClusterSummary,
-              root.nf.ErrorHandler,
-              root.nf.Settings,
-              root.nf.CanvasUtils);
-      }
-  }(this, function ($, nfCommon, nfQueueListing, nfShell, nfPolicyManagement, nfClusterSummary, nfErrorHandler, nfSettings, nfCanvasUtils) {
-      'use strict';
-  
-      return function (serviceProvider) {
-            'use strict';
-    
-            var config = {
-                urls: {
-                    helpDocument: '../nifi-docs/documentation',
-                    controllerAbout: '../nifi-api/flow/about'
-                }
-            };
-    
-            function GlobalMenuCtrl(serviceProvider) {
-    
-                /**
-                 * The summary menu item controller.
-                 */
-                this.summary = {
-    
-                    /**
-                     * The summary menu item's shell controller.
-                     */
-                    shell: {
-    
-                        /**
-                         * Launch the summary shell.
-                         */
-                        launch: function () {
-                          nfShell.showPage('summary');
-                        }
-                    }
-                };
-    
-                /**
-                 * The counters menu item controller.
-                 */
-                this.counters = {
-    
-                    /**
-                     * The counters menu item's shell controller.
-                     */
-                    shell: {
-    
-                        /**
-                         * Launch the counters shell.
-                         */
-                        launch: function () {
-                          if (nfCommon.canAccessCounters()) {
-                              nfShell.showPage('counters');
-                            }
-                        }
-                    }
-                };
-    
-                /**
-                 * The bulletin board menu item controller.
-                 */
-                this.bulletinBoard = {
-    
-                    /**
-                     * The bulletin board menu item's shell controller.
-                     */
-                    shell: {
-    
-                        /**
-                         * Launch the bulletin board shell.
-                         */
-                        launch: function () {
-                          nfShell.showPage('bulletin-board');
-                        }
-                    }
-                };
-    
-                /**
-                 * The data provenance menu item controller.
-                 */
-                this.dataProvenance = {
-    
-                    /**
-                     * The data provenance menu item's shell controller.
-                     */
-                    shell: {
-    
-                        /**
-                         * Launch the data provenance shell.
-                         */
-                        launch: function () {
-                          if (nfCommon.canAccessProvenance()) {
-                              nfShell.showPage('provenance');
-                            }
-                        }
-                    }
-                };
-    
-                /**
-                 * The controller settings menu item controller.
-                 */
-                this.controllerSettings = {
-    
-                    /**
-                     * The controller settings menu item's shell controller.
-                     */
-                    shell: {
-    
-                        /**
-                         * Launch the settings shell.
-                         */
-                        launch: function () {
-                          nfSettings.showSettings();
-                        }
-                    }
-                };
-    
-                /**
-                 * The cluster menu item controller.
-                 */
-                this.cluster = {
-    
-                    /**
-                     * Determines if the cluster menu item is enabled.
-                     *
-                     * @returns {*|boolean}
-                     */
-                    visible: function () {
-                      return nfClusterSummary.isConnectedToCluster();
-                    },
-    
-                    /**
-                     * The cluster menu item's shell controller.
-                     */
-                    shell: {
-    
-                        /**
-                         * Launch the cluster shell.
-                         */
-                        launch: function () {
-                          if (nfCommon.canAccessController()) {
-                              nfShell.showPage('cluster');
-                            }
-                        }
-                    }
-                };
-    
-                /**
-                 * The flow config history menu item controller.
-                 */
-                this.flowConfigHistory = {
-    
-                    /**
-                     * The flow config history menu item's shell controller.
-                     */
-                    shell: {
-    
-                        /**
-                         * Launch the history shell.
-                         */
-                        launch: function () {
-                          nfShell.showPage('history');
-                        }
-                    }
-                };
-    
-                /**
-                 * The users menu item controller.
-                 */
-                this.users = {
-    
-                    /**
-                     * The users menu item's shell controller.
-                     */
-                    shell: {
-    
-                        /**
-                         * Launch the users shell.
-                         */
-                        launch: function () {
-                          if (nfCommon.canAccessTenants()) {
-                              nfShell.showPage('users');
-                            }
-                        }
-                    }
-                };
-    
-                /**
-                 * The policies menu item controller.
-                 */
-                this.policies = {
-    
-                    /**
-                     * The policies menu item's shell controller.
-                     */
-                    shell: {
-    
-                        /**
-                         * Launch the policies shell.
-                         */
-                        launch: function () {
-                          if (nfCommon.canModifyPolicies() && nfCommon.canAccessTenants()) {
-                              nfPolicyManagement.showGlobalPolicies();
-                            }
-                        }
-                    }
-                };
-    
-                /**
-                 * The templates menu item controller.
-                 */
-                this.templates = {
-    
-                    /**
-                     * The templates menu item's shell controller.
-                     */
-                    shell: {
-    
-                        /**
-                         * Launch the templates shell.
-                         */
-                        launch: function () {
-                          nfShell.showPage('templates?' + $.param({
-                                  groupId: nfCanvasUtils.getGroupId()
-                                }));
-                        }
-                    }
-                };
-    
-                /**
-                 * The help menu item controller.
-                 */
-                this.help = {
-    
-                    /**
-                     * The help menu item's shell controller.
-                     */
-                    shell: {
-    
-                        /**
-                         * Launch the help documentation shell.
-                         */
-                        launch: function () {
-                          nfShell.showPage(config.urls.helpDocument);
-                        }
-                    }
-                };
-    
-                /**
-                 * The about menu item controller.
-                 */
-                this.about = {
-    
-                    /**
-                     * Initialize the about details.
-                     */
-                    init: function () {
-                        // get the about details
-                        $.ajax({
-                            type: 'GET',
-                            url: config.urls.controllerAbout,
-                            dataType: 'json'
-                        }).done(function (response) {
-                            var aboutDetails = response.about;
-                            // set the document title and the about title
-                      document.title = nf._.msg('nf-about');
-                            $('#nf-version').text(aboutDetails.version);
-                          var showVersionDetail = false;
-                          if (aboutDetails.buildTag && aboutDetails.buildTag !== 'HEAD') {
-                              $('#nf-about-build-tag').text(aboutDetails.buildTag);
-                              $('#nf-version-detail-tag').show();
-                              showVersionDetail = true;
-                          }
-                          if (aboutDetails.buildRevision) {
-                              $('#nf-about-build-revision').text(aboutDetails.buildRevision);
-                              $('#nf-about-build-branch').text(aboutDetails.buildBranch);
-                              $('#nf-version-detail-commit').show();
-                              showVersionDetail = true
-                          }
-                          if (aboutDetails.buildTimestamp) {
-                              $('#nf-about-build-timestamp').text(aboutDetails.buildTimestamp);
-                              $('#nf-version-detail-timestamp').show();
-                              showVersionDetail = true;
-                          }
-                          if (showVersionDetail) {
-                              $('#nf-version-detail').show();
-                          }
-    
-                            // store the content viewer url if available
-                          if (!nfCommon.isBlank(aboutDetails.contentViewerUrl)) {
-                                $('#nifi-content-viewer-url').text(aboutDetails.contentViewerUrl);
-                              nfQueueListing.initFlowFileDetailsDialog();
-                            }
-                      }).fail(nfErrorHandler.handleAjaxError);
-    
-                        this.modal.init();
-                    },
-    
-                    /**
-                     * The about menu item's modal controller.
-                     */
-                    modal: {
-    
-                        /**
-                         * Gets the modal element.
-                         *
-                         * @returns {*|jQuery|HTMLElement}
-                         */
-                        getElement: function () {
-                            return $('#nf-about');
-                        },
-    
-                        /**
-                         * Initialize the modal.
-                         */
-                        init: function () {
-                          var aboutModal = this;
-    
-                            var resizeAbout = function () {
-                                var dialog = $(this);
-                                var top = $('#nf-about-pic-container').height() + $('.dialog-header').height() + 10; //10 for padding-top
-                                dialog.find('.dialog-content').css('top', top);
-                            };
-    
-                            this.getElement().modal({
-                                scrollableContentStyle: 'scrollable',
-                          headerText: nf._.msg('nf-canvas-global-menu-controller.About'),
-                                handler: {
-                                    resize: resizeAbout
-                                },
-                                buttons: [{
-                              buttonText: nf._.msg('nf-canvas-global-menu-controller.OK'),
-                                    color: {
-                                        base: '#728E9B',
-                                        hover: '#004849',
-                                        text: '#ffffff'
-                                    },
-                                    handler: {
-                                        click: function () {
-                                          aboutModal.hide();
-                                        }
-                                    }
-                                }]
-                            });
-                        },
-    
-                        /**
-                         * Updates the modal config.
-                         *
-                         * @param {string} name             The name of the property to update.
-                         * @param {object|array} config     The config for the `name`.
-                         */
-                        update: function (name, config) {
-                            this.getElement().modal(name, config);
-                        },
-    
-                        /**
-                         * Show the modal
-                         */
-                        show: function () {
-                            this.getElement().modal('show');
-                        },
-    
-                        /**
-                         * Hide the modal
-                         */
-                        hide: function () {
-                            this.getElement().modal('hide');
-                        }
-                    }
-                }
-            }
-    
-            GlobalMenuCtrl.prototype = {
-                constructor: GlobalMenuCtrl,
-    
-                /**
-                 * Initialize the global menu controls.
-                 */
-                init: function () {
-                    this.about.init();
-                }
-            }
-    
-            var globalMenuCtrl = new GlobalMenuCtrl();
-            return globalMenuCtrl;
-        };
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js
deleted file mode 100644
index 88c5844d69a8..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js
+++ /dev/null
@@ -1,351 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Actions',
-                  'nf.Birdseye',
-                  'nf.Storage',
-                  'nf.CanvasUtils',
-                  'nf.ProcessGroupConfiguration'],
-              function ($, nfActions, nfBirdseye, nfStorage, nfCanvasUtils, nfProcessGroupConfiguration) {
-                  return (nf.ng.Canvas.GraphControlsCtrl = factory($, nfActions, nfBirdseye, nfStorage, nfCanvasUtils, nfProcessGroupConfiguration));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ng.Canvas.GraphControlsCtrl =
-              factory(require('jquery'),
-                  require('nf.Actions'),
-                  require('nf.Birdseye'),
-                  require('nf.Storage'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ProcessGroupConfiguration')));
-      } else {
-          nf.ng.Canvas.GraphControlsCtrl = factory(root.$,
-              root.nf.Actions,
-              root.nf.Birdseye,
-              root.nf.Storage,
-              root.nf.CanvasUtils,
-              root.nf.ProcessGroupConfiguration);
-      }
-  }(this, function ($, nfActions, nfBirdseye, nfStorage, nfCanvasUtils, nfProcessGroupConfiguration) {
-      'use strict';
-  
-      return function (serviceProvider, navigateCtrl, operateCtrl) {
-            'use strict';
-    
-            /**
-             * Opens the specified graph control.
-             *
-             * @param {jQuery} graphControl
-             */
-            var openGraphControl = function (graphControl) {
-                // undock if necessary
-                if ($('div.graph-control-content').is(':visible') === false) {
-                    $('#graph-controls div.graph-control-docked').hide();
-                    $('#graph-controls div.graph-control-header-container').show();
-                    $('.graph-control').removeClass('docked');
-                }
-    
-                // show the content of the specified graph control
-                graphControl.children('div.graph-control-content').show();
-                graphControl.find('div.graph-control-expansion').removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
-    
-                // handle specific actions as necessary
-                if (graphControl.attr('id') === 'navigation-control') {
-                  nfBirdseye.updateBirdseyeVisibility(true);
-                }
-    
-                // get the current visibility
-              var graphControlVisibility = nfStorage.getItem('graph-control-visibility');
-                if (graphControlVisibility === null) {
-                    graphControlVisibility = {};
-                }
-    
-                // update the visibility for this graph control
-                var graphControlId = graphControl.attr('id');
-                graphControlVisibility[graphControlId] = true;
-              nfStorage.setItem('graph-control-visibility', graphControlVisibility);
-            };
-    
-            /**
-             * Hides the specified graph control.
-             *
-             * @param {jQuery} graphControl
-             */
-            var hideGraphControl = function (graphControl) {
-                // hide the content of the specified graph control
-                graphControl.children('div.graph-control-content').hide();
-                graphControl.find('div.graph-control-expansion').removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
-    
-                // dock if necessary
-                if ($('div.graph-control-content').is(':visible') === false) {
-                    $('#graph-controls div.graph-control-header-container').hide();
-                    $('#graph-controls div.graph-control-docked').show();
-                    $('.graph-control').addClass('docked');
-                }
-    
-                // handle specific actions as necessary
-                if (graphControl.attr('id') === 'navigation-control') {
-                  nfBirdseye.updateBirdseyeVisibility(false);
-                }
-    
-                // get the current visibility
-              var graphControlVisibility = nfStorage.getItem('graph-control-visibility');
-                if (graphControlVisibility === null) {
-                    graphControlVisibility = {};
-                }
-    
-                // update the visibility for this graph control
-                var graphControlId = graphControl.attr('id');
-                graphControlVisibility[graphControlId] = false;
-              nfStorage.setItem('graph-control-visibility', graphControlVisibility);
-            };
-    
-            function GraphControlsCtrl(navigateCtrl, operateCtrl) {
-                this.navigateCtrl = navigateCtrl;
-                this.operateCtrl = operateCtrl;
-            }
-    
-            GraphControlsCtrl.prototype = {
-                constructor: GraphControlsCtrl,
-    
-                /**
-                 *  Register the header controller.
-                 */
-                register: function () {
-                    if (serviceProvider.graphControlsCtrl === undefined) {
-                        serviceProvider.register('graphControlsCtrl', graphControlsCtrl);
-                    }
-                },
-    
-                /**
-                 * Initialize the graph controls.
-                 */
-                init: function () {
-                    this.operateCtrl.init();
-                    // initial the graph control visibility
-                  var graphControlVisibility = nfStorage.getItem('graph-control-visibility');
-                    if (graphControlVisibility !== null) {
-                        $.each(graphControlVisibility, function (id, isVisible) {
-                            var graphControl = $('#' + id);
-                            if (graphControl) {
-                                if (isVisible) {
-                                    openGraphControl(graphControl);
-                                } else {
-                                    hideGraphControl(graphControl);
-                                }
-                            }
-                        });
-                    } else {
-                        openGraphControl($('#navigation-control'));
-                        openGraphControl($('#operation-control'));
-                    }
-                },
-    
-                /**
-                 * Undock the graph control.
-                 * @param {jQuery} $event
-                 */
-                undock: function ($event) {
-                    openGraphControl($($event.target).parent());
-                },
-    
-                /**
-                 * Expand the graph control.
-                 * @param {jQuery} $event
-                 */
-                expand: function ($event) {
-                    var icon = $($event.target);
-                    if (icon.find('.fa-plus-square-o').length > 0 || icon.hasClass('fa-plus-square-o') || icon.parent().children().find('.fa-plus-square-o').length > 0) {
-                        openGraphControl(icon.closest('div.graph-control'));
-                    } else {
-                        hideGraphControl(icon.closest('div.graph-control'));
-                    }
-                },
-    
-                /**
-                 * Gets the icon to show for the selection context.
-                 */
-                getContextIcon: function () {
-                  var selection = nfCanvasUtils.getSelection();
-    
-                    if (selection.empty()) {
-                      if (nfCanvasUtils.getParentGroupId() === null) {
-                            return 'icon-drop';
-                        } else {
-                            return 'icon-group';
-                        }
-                    } else {
-                        if (selection.size() === 1) {
-                          if (nfCanvasUtils.isProcessor(selection)) {
-                                return 'icon-processor';
-                          } else if (nfCanvasUtils.isProcessGroup(selection)) {
-                                return 'icon-group';
-                          } else if (nfCanvasUtils.isInputPort(selection)) {
-                                return 'icon-port-in';
-                          } else if (nfCanvasUtils.isOutputPort(selection)) {
-                                return 'icon-port-out';
-                          } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                                return 'icon-group-remote';
-                          } else if (nfCanvasUtils.isFunnel(selection)) {
-                                return 'icon-funnel';
-                          } else if (nfCanvasUtils.isLabel(selection)) {
-                                return 'icon-label';
-                          } else if (nfCanvasUtils.isConnection(selection)) {
-                                return 'icon-connect';
-                            }
-                        } else {
-                            return 'icon-drop';
-                        }
-                    }
-                },
-    
-                /**
-                 * Will hide target when appropriate.
-                 */
-                hide: function () {
-                  var selection = nfCanvasUtils.getSelection();
-                    if (selection.size() > 1) {
-                        return 'invisible'
-                    } else {
-                        return '';
-                    }
-                },
-    
-                /**
-                 * Gets the name to show for the selection context.
-                 */
-                getContextName: function () {
-                  var selection = nfCanvasUtils.getSelection();
-                  var canRead = nfCanvasUtils.canReadFromGroup();
-    
-                    if (selection.empty()) {
-                        if (canRead) {
-                          return nfCanvasUtils.getGroupName();
-                        } else {
-                          return nfCanvasUtils.getGroupId();
-                        }
-                    } else {
-                        if (selection.size() === 1) {
-                            var d = selection.datum();
-                            if (d.permissions.canRead) {
-                              if (nfCanvasUtils.isLabel(selection)) {
-                                    if ($.trim(d.component.label) !== '') {
-                                        return d.component.label;
-                                    } else {
-                                        return '';
-                                    }
-                              } else if (nfCanvasUtils.isConnection(selection)) {
-                                  return nfCanvasUtils.formatConnectionName(d.component);
-                                } else {
-                                    return d.component.name;
-                                }
-                            } else {
-                                return d.id;
-                            }
-                        } else {
-                            return 'Multiple components selected';
-                        }
-                    }
-                },
-    
-                /**
-                 * Gets the type to show for the selection context.
-                 */
-                getContextType: function () {
-                  var selection = nfCanvasUtils.getSelection();
-    
-                    if (selection.empty()) {
-                  return nf._.msg('nf-canvas-graph-controls-controller.ProcessGroup');
-                    } else {
-                        if (selection.size() === 1) {
-                          if (nfCanvasUtils.isProcessor(selection)) {
-                          return nf._.msg('nf-canvas-graph-controls-controller.Processor');
-                      } else if (nf.CanvasUtils.isProcessGroup(selection)) {
-                          return nf._.msg('nf-canvas-graph-controls-controller.ProcessGroup');
-                      } else if (nf.CanvasUtils.isInputPort(selection)) {
-                          return nf._.msg('nf-canvas-graph-controls-controller.InputPort');
-                      } else if (nf.CanvasUtils.isOutputPort(selection)) {
-                          return nf._.msg('nf-canvas-graph-controls-controller.OutputPort');
-                      } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) {
-                          return nf._.msg('nf-canvas-graph-controls-controller.RemoteProcessGroup');
-                      } else if (nf.CanvasUtils.isFunnel(selection)) {
-                          return nf._.msg('nf-canvas-graph-controls-controller.Funnel');
-                      } else if (nf.CanvasUtils.isLabel(selection)) {
-                          return nf._.msg('nf-canvas-graph-controls-controller.Label');
-                      } else if (nf.CanvasUtils.isConnection(selection)) {
-                          return nf._.msg('nf-canvas-graph-controls-controller.Connection');
-                      }  
-                        } else {
-                      return nf._.msg('nf-canvas-graph-controls-controller.MultipleSelected');
-                        }
-                    }
-                },
-    
-                /**
-                 * Gets the id to show for the selection context.
-                 */
-                getContextId: function () {
-                  var selection = nfCanvasUtils.getSelection();
-    
-                    if (selection.empty()) {
-                      return nfCanvasUtils.getGroupId();
-                    } else {
-                        if (selection.size() === 1) {
-                            var d = selection.datum();
-                            return d.id;
-                        } else {
-                          return nf._.msg('nf-canvas-graph-controls-controller.MultipleSelected');
-                        }
-                    }
-                },
-    
-                /**
-                 * Determines whether the user can configure or open the details dialog.
-                 */
-                canConfigureOrOpenDetails: function () {
-                  var selection = nfCanvasUtils.getSelection();
-    
-                    if (selection.empty()) {
-                        return true;
-                    }
-    
-                  return nfCanvasUtils.isConfigurable(selection) || nfCanvasUtils.hasDetails(selection);
-                },
-    
-                /**
-                 * Opens either the configuration or details view based on the current state.
-                 */
-                openConfigureOrDetailsView: function () {
-                  var selection = nfCanvasUtils.getSelection();
-  
-                  if (nfCanvasUtils.isConfigurable(selection)) {
-                      nfActions.showConfiguration(selection);
-                  } else if (nfCanvasUtils.hasDetails(selection)) {
-                      nfActions.showDetails(selection);
-                  }
-                }
-            }
-    
-            var graphControlsCtrl = new GraphControlsCtrl(navigateCtrl, operateCtrl);
-            graphControlsCtrl.register();
-            return graphControlsCtrl;
-        };
-  }));
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
deleted file mode 100644
index 6e4a30bf79b9..000000000000
--- 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
+++ /dev/null
@@ -1,155 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common',
-                'nf.Storage',
-                'nf.Shell',
-                'nf.ErrorHandler'],
-            function ($, nfCommon, nfStorage, nfShell, nfErrorHandler) {
-                return (nf.ng.Canvas.HeaderCtrl = factory($, nfCommon, nfStorage, nfShell, nfErrorHandler));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.Canvas.HeaderCtrl =
-            factory(require('jquery'),
-                require('nf.Common'),
-                require('nf.Storage'),
-                require('nf.Shell'),
-                require('nf.ErrorHandler')));
-    } else {
-        nf.ng.Canvas.HeaderCtrl = factory(root.$,
-            root.nf.Common,
-            root.nf.Storage,
-            root.nf.Shell,
-            root.nf.ErrorHandler);
-    }
-}(this, function ($, nfCommon, nfStorage, nfShell, nfErrorHandler) {
-    'use strict';
-
-    return function (serviceProvider, toolboxCtrl, globalMenuCtrl, flowStatusCtrl) {
-        'use strict';
-
-        var MIN_TOOLBAR_WIDTH = 640;
-
-        var config = {
-            urls: {
-                accessConfig: '../nifi-api/access/config'
-            }
-        };
-
-        function HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl) {
-            this.toolboxCtrl = toolboxCtrl;
-            this.globalMenuCtrl = globalMenuCtrl;
-            this.flowStatusCtrl = flowStatusCtrl;
-
-            /**
-             * The login controller.
-             */
-            this.loginCtrl = {
-
-                /**
-                 * Initialize the login controller.
-                 */
-                init: function () {
-                    var loginCtrl = this;
-
-                    // if the user is not anonymous or accessing via http
-                    if ($('#current-user').text() !== nfCommon.ANONYMOUS_USER_TEXT || location.protocol === 'http:') {
-                        $('#login-link-container').css('display', 'none');
-                    }
-
-                    // if accessing via http, don't show the current user
-                    if (location.protocol === 'http:') {
-                        $('#current-user-container').css('display', 'none');
-                    }
-
-                    // get the login config
-                    var loginXhr = $.ajax({
-                        type: 'GET',
-                        url: config.urls.accessConfig,
-                        dataType: 'json'
-                    });
-
-                    $.when(loginXhr).done(function (loginResult) {
-                        loginCtrl.supportsLogin = loginResult.config.supportsLogin;
-                    }).fail(nfErrorHandler.handleAjaxError);
-                },
-
-                /**
-                 * Boolean describing whether or not the NiFi instance supports login.
-                 */
-                supportsLogin: undefined,
-
-                /**
-                 * The login shell controller.
-                 */
-                shell: {
-
-                    /**
-                     * Launch the login shell.
-                     */
-                    launch: function () {
-                        nfShell.showPage('login', false);
-                    }
-                }
-            };
-
-            /**
-             * The logout controller.
-             */
-            this.logoutCtrl = {
-                logout: function () {
-                    nfStorage.removeItem("jwt");
-                    window.location = '/nifi';
-                }
-            };
-        }
-
-        HeaderCtrl.prototype = {
-            constructor: HeaderCtrl,
-
-            /**
-             *  Register the header controller.
-             */
-            register: function () {
-                if (serviceProvider.headerCtrl === undefined) {
-                    serviceProvider.register('headerCtrl', headerCtrl);
-                }
-            },
-
-            /**
-             * Initialize the canvas header.
-             *
-             * @argument {boolean} supportsLogin    Whether login is supported.
-             */
-            init: function () {
-                this.toolboxCtrl.init();
-                this.globalMenuCtrl.init();
-                this.flowStatusCtrl.init();
-                this.loginCtrl.init();
-            }
-        }
-
-        var headerCtrl = new HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl);
-        headerCtrl.register();
-        return headerCtrl;
-    };
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js
deleted file mode 100644
index 46dc70fafb18..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['nf.CanvasUtils',
-                'nf.ContextMenu'],
-            function (nfCanvasUtils, nfContextMenu) {
-                return (nf.ng.Canvas.NavigateCtrl = factory(nfCanvasUtils, nfContextMenu));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.Canvas.NavigateCtrl =
-            factory(require('nf.CanvasUtils'),
-                require('nf.ContextMenu')));
-    } else {
-        nf.ng.Canvas.NavigateCtrl = factory(root.nf.CanvasUtils,
-            root.nf.ContextMenu);
-    }
-}(this, function (nfCanvasUtils, nfContextMenu) {
-    'use strict';
-
-    return function () {
-        'use strict';
-
-        function NavigateCtrl() {
-
-            /**
-             * Zoom in on the canvas.
-             */
-            this.zoomIn = function () {
-                nfCanvasUtils.zoomCanvasViewIn();
-
-                // hide the context menu
-                nfContextMenu.hide();
-
-                // refresh the canvas
-                nfCanvasUtils.refreshCanvasView({
-                    transition: true
-                });
-            };
-
-            /**
-             * Zoom out on the canvas.
-             */
-            this.zoomOut = function () {
-                nfCanvasUtils.zoomCanvasViewOut();
-
-                // hide the context menu
-                nfContextMenu.hide();
-
-                // refresh the canvas
-                nfCanvasUtils.refreshCanvasView({
-                    transition: true
-                });
-            };
-
-            /**
-             * Zoom fit on the canvas.
-             */
-            this.zoomFit = function () {
-                nfCanvasUtils.fitCanvasView();
-
-                // hide the context menu
-                nfContextMenu.hide();
-
-                // refresh the canvas
-                nfCanvasUtils.refreshCanvasView({
-                    transition: true
-                });
-            };
-
-            /**
-             * Zoom actual size on the canvas.
-             */
-            this.zoomActualSize = function () {
-                nfCanvasUtils.actualSizeCanvasView();
-
-                // hide the context menu
-                nfContextMenu.hide();
-
-                // refresh the canvas
-                nfCanvasUtils.refreshCanvasView({
-                    transition: true
-                });
-            };
-        }
-
-        NavigateCtrl.prototype = {
-            constructor: NavigateCtrl
-        }
-
-        var navigateCtrl = new NavigateCtrl();
-        return navigateCtrl;
-    };
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
deleted file mode 100644
index 27326fff6918..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
+++ /dev/null
@@ -1,510 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.Dialog',
-                  'nf.Birdseye',
-                  'nf.CanvasUtils',
-                  'nf.Common',
-                  'nf.Client',
-                  'nf.Processor'],
-              function ($, d3, nfDialog, nfBirdseye, nfCanvasUtils, nfCommon, nfClient, nfProcessor) {
-                  return (nf.ng.Canvas.OperateCtrl = factory($, d3, nfDialog, nfBirdseye, nfCanvasUtils, nfCommon, nfClient, nfProcessor));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ng.Canvas.OperateCtrl =
-              factory(require('jquery'),
-                  require('d3'),
-                  require('nf.Dialog'),
-                  require('nf.Birdseye'),
-                  require('nf.CanvasUtils'),
-                  require('nf.Common'),
-                  require('nf.Client'),
-                  require('nf.Processor')));
-      } else {
-          nf.ng.Canvas.OperateCtrl = factory(root.$,
-              root.d3,
-              root.nf.Dialog,
-              root.nf.Birdseye,
-              root.nf.CanvasUtils,
-              root.nf.Common,
-              root.nf.Client,
-              root.nf.Processor);
-      }
-  }(this, function ($, d3, nfDialog, nfBirdseye, nfCanvasUtils, nfCommon, nfClient, nfProcessor) {
-      'use strict';
-  
-      return function () {
-            'use strict';
-    
-            // updates the color if its a valid hex color string
-            var updateColor = function () {
-                var hex = $('#fill-color-value').val();
-    
-                // only update the fill color when its a valid hex color string
-                // #[six hex characters|three hex characters] case insensitive
-                if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)) {
-                    $('#fill-color').minicolors('value', hex);
-                }
-            };
-    
-            function OperateCtrl() {
-    
-                /**
-                 * The canvas operator's create template component.
-                 */
-                this.template = {
-    
-                    /**
-                     * The canvas operator's create template component's modal.
-                     */
-                    modal: {
-    
-                        /**
-                         * Gets the modal element.
-                         *
-                         * @returns {*|jQuery|HTMLElement}
-                         */
-                        getElement: function () {
-                            return $('#new-template-dialog');
-                        },
-    
-                        /**
-                         * Initialize the modal.
-                         */
-                        init: function () {
-                            // configure the create template dialog
-                            this.getElement().modal({
-                                scrollableContentStyle: 'scrollable',
-                          headerText: nf._.msg('nf-canvas-operate-controller.CreateTemplate')
-                            });
-                        },
-    
-                        /**
-                         * Updates the modal config.
-                         *
-                         * @param {string} name             The name of the property to update.
-                         * @param {object|array} config     The config for the `name`.
-                         */
-                        update: function (name, config) {
-                            this.getElement().modal(name, config);
-                        },
-    
-                        /**
-                         * Show the modal.
-                         */
-                        show: function () {
-                            this.getElement().modal('show');
-                        },
-    
-                        /**
-                         * Hide the modal.
-                         */
-                        hide: function () {
-                            this.getElement().modal('hide');
-                        }
-                    }
-                };
-    
-                /**
-                 * The canvas operator's create template component.
-                 */
-                this.templateUpload = {
-    
-                    /**
-                     * The canvas operator's create template component's modal.
-                     */
-                    modal: {
-    
-                        /**
-                         * Gets the modal element.
-                         *
-                         * @returns {*|jQuery|HTMLElement}
-                         */
-                        getElement: function () {
-                            return $('#upload-template-dialog');
-                        },
-    
-                        /**
-                         * Initialize the modal.
-                         */
-                        init: function () {
-                            // initialize the form
-                            var templateForm = $('#template-upload-form').ajaxForm({
-                              url: '../nifi-api/process-groups/',
-                                dataType: 'xml',
-                              beforeSubmit: function (formData, $form, options) {
-                                  // ensure uploading to the current process group
-                                  options.url += (encodeURIComponent(nfCanvasUtils.getGroupId()) + '/templates/upload');
-                              },
-                                success: function (response, statusText, xhr, form) {
-                                  // see if the import was successful and inform the user
-                                    if (response.documentElement.tagName === 'templateEntity') {
-                                      nfDialog.showOkDialog({
-                                      headerText: nf._.msg('nf-canvas-operate-controller.SUCCESS'),
-                                      dialogContent: nf._.msg('nf-canvas-operate-controller.SuccessContent')
-                                        });
-                                    } else {
-                                        // import failed
-                                      var statusText = nf._.msg('nf-canvas-operate-controller.Message1');
-                                        if (response.documentElement.tagName === 'errorResponse') {
-                                            // if a more specific error was given, use it
-                                            var errorMessage = response.documentElement.getAttribute('statusText');
-                                          if (!nfCommon.isBlank(errorMessage)) {
-                                              statusText = errorMessage;
-                                          }
-                                      }
-  
-                                      // show reason
-                                      nfDialog.showOkDialog({
-                                          headerText: 'Unable to Upload',
-                                          dialogContent: nfCommon.escapeHtml(statusText)
-                                      });
-                                    }
-                                },
-                                error: function (xhr, statusText, error) {
-                                  // request failed
-                                  nfDialog.showOkDialog({
-                                      headerText: 'Unable to Upload',
-                                      dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                                  });
-                                }
-                            });
-    
-                            // configure the upload template dialog
-                            this.getElement().modal({
-                          headerText: nf._.msg('nf-canvas-operate-controller.Upload'),
-                                buttons: [{
-                              buttonText: nf._.msg('nf-canvas-operate-controller.ButtonUpload'),
-                                    color: {
-                                        base: '#728E9B',
-                                        hover: '#004849',
-                                        text: '#ffffff'
-                                    },
-                                    handler: {
-                                        click: function () {
-                                            var selectedTemplate = $('#selected-template-name').text();
-    
-                                            // submit the template if necessary
-                                          if (nfCommon.isBlank(selectedTemplate)) {
-                                          $('#upload-template-status').text(nf._.msg('nf-canvas-operate-controller.UploadTemplate'));
-                                            } else {
-                                                templateForm.submit();
-    
-                                              // hide the dialog
-                                              $('#upload-template-dialog').modal('hide');
-                                            }
-                                        }
-                                    }
-                                }, {
-                              buttonText: nf._.msg('nf-canvas-operate-controller.Cancel'),
-                                    color: {
-                                        base: '#E3E8EB',
-                                        hover: '#C7D2D7',
-                                        text: '#004849'
-                                    },
-                                    handler: {
-                                        click: function () {
-                                            // hide the dialog
-                                            $('#upload-template-dialog').modal('hide');
-                                        }
-                                    }
-                                }],
-                                handler: {
-                                    close: function () {
-                                        // set the filename
-                                        $('#selected-template-name').text('');
-                                        $('#upload-template-status').text('');
-    
-                                        // reset the form to ensure that the change fire will fire
-                                        templateForm.resetForm();
-                                    }
-                                }
-                            });
-    
-                          $('#template-file-field-button').on('click', function (e) {
-                              $('#template-file-field').click();
-                          });
-  
-                            // add a handler for the change file input chain event
-                            $('#template-file-field').on('change', function (e) {
-                                var filename = $(this).val();
-                              if (!nfCommon.isBlank(filename)) {
-                                    filename = filename.replace(/^.*[\\\/]/, '');
-                                }
-    
-                                // set the filename and clear any status
-                                $('#selected-template-name').text(filename);
-                                $('#upload-template-status').text('');
-                            });
-                        },
-    
-                        /**
-                         * Updates the modal config.
-                         *
-                         * @param {string} name             The name of the property to update.
-                         * @param {object|array} config     The config for the `name`.
-                         */
-                        update: function (name, config) {
-                            this.getElement().modal(name, config);
-                        },
-    
-                        /**
-                         * Show the modal.
-                         */
-                        show: function () {
-                            this.getElement().modal('show');
-                        },
-    
-                        /**
-                         * Hide the modal.
-                         */
-                        hide: function () {
-                            this.getElement().modal('hide');
-                        }
-                    }
-                };
-    
-                /**
-                 * The canvas operator's fillcolor component.
-                 */
-                this.fillcolor = {
-    
-                    /**
-                     * The canvas operator's fillcolor component's modal.
-                     */
-                    modal: {
-    
-                        /**
-                         * Gets the modal element.
-                         *
-                         * @returns {*|jQuery|HTMLElement}
-                         */
-                        getElement: function () {
-                            return $('#fill-color-dialog');
-                        },
-    
-                        /**
-                         * Initialize the modal.
-                         */
-                        init: function () {
-                            // configure the create fillcolor dialog
-                            this.getElement().modal({
-                                scrollableContentStyle: 'scrollable',
-                          headerText: nf._.msg('nf-canvas-operate-controller.ChangeColor'),
-                                buttons: [{
-                              buttonText: nf._.msg('nf-canvas-operate-controller.Apply'),
-                                    color: {
-                                        base: '#728E9B',
-                                        hover: '#004849',
-                                        text: '#ffffff'
-                                    },
-                                    handler: {
-                                        click: function () {
-                                          var selection = nfCanvasUtils.getSelection();
-    
-                                            // color the selected components
-                                            selection.each(function (d) {
-                                                var selected = d3.select(this);
-                                                var selectedData = selected.datum();
-    
-                                                // get the color and update the styles
-                                                var color = $('#fill-color').minicolors('value');
-    
-                                                // ensure the color actually changed
-                                                if (color !== selectedData.component.style['background-color']) {
-                                                    // build the request entity
-                                                    var entity = {
-                                                      'revision': nfClient.getRevision(selectedData),
-                                                        'component': {
-                                                            'id': selectedData.id,
-                                                            'style': {
-                                                                'background-color': color
-                                                            }
-                                                        }
-                                                    };
-    
-                                                    // update the style for the specified component
-                                                    $.ajax({
-                                                        type: 'PUT',
-                                                        url: selectedData.uri,
-                                                        data: JSON.stringify(entity),
-                                                        dataType: 'json',
-                                                        contentType: 'application/json'
-                                                    }).done(function (response) {
-                                                        // update the component
-                                                      nfCanvasUtils.getComponentByType(selectedData.type).set(response);
-                                                    }).fail(function (xhr, status, error) {
-                                                        if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
-                                                          nfDialog.showOkDialog({
-                                                          headerText: nf._.msg('nf-canvas-operate-controller.Error'),
-                                                              dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                                                            });
-                                                        }
-                                                    }).always(function () {
-                                                      nfBirdseye.refresh();
-                                                    });
-                                                }
-                                            });
-    
-                                            // close the dialog
-                                            $('#fill-color-dialog').modal('hide');
-                                        }
-                                    }
-                                },
-                                    {
-                                  buttonText: nf._.msg('nf-canvas-operate-controller.Cancel'),
-                                        color: {
-                                            base: '#E3E8EB',
-                                            hover: '#C7D2D7',
-                                            text: '#004849'
-                                        },
-                                        handler: {
-                                            click: function () {
-                                                // close the dialog
-                                                $('#fill-color-dialog').modal('hide');
-                                            }
-                                        }
-                                    }],
-                                handler: {
-                                    close: function () {
-                                        // clear the current color
-                                        $('#fill-color-value').val('');
-                                        $('#fill-color').minicolors('value', '');
-                                    }
-                                }
-                            });
-                        },
-    
-                        /**
-                         * Updates the modal config.
-                         *
-                         * @param {string} name             The name of the property to update.
-                         * @param {object|array} config     The config for the `name`.
-                         */
-                        update: function (name, config) {
-                            this.getElement().modal(name, config);
-                        },
-    
-                        /**
-                         * Show the modal.
-                         */
-                        show: function () {
-                            this.getElement().modal('show');
-                        },
-    
-                        /**
-                         * Hide the modal.
-                         */
-                        hide: function () {
-                            this.getElement().modal('hide');
-                        },
-    
-                        /**
-                         * The canvas operator's fillcolor component modal's minicolors.
-                         */
-                        minicolors: {
-    
-                            /**
-                             * Gets the minicolors element.
-                             *
-                             * @returns {*|jQuery|HTMLElement}
-                             */
-                            getElement: function () {
-                                return $('#fill-color');
-                            },
-    
-                            /**
-                             * Initialize the minicolors.
-                             */
-                            init: function () {
-                                // configure the minicolors
-                                this.getElement().minicolors({
-                                    inline: true,
-                                    change: function (hex, opacity) {
-                                        // update the value
-                                        $('#fill-color-value').val(hex);
-    
-                                        // always update the preview
-                                      if (hex.toLowerCase() === '#ffffff') {
-                                          //special case #ffffff implies default fill
-                                          $('#fill-color-processor-preview-icon').css({
-                                              'color': nfProcessor.defaultIconColor(),
-                                              'background-color': hex
-                                          });
-                                      } else {
-                                          $('#fill-color-processor-preview-icon').css({
-                                              'color': nfCommon.determineContrastColor(
-                                                  nfCommon.substringAfterLast(
-                                                      hex, '#')),
-                                              'background-color': hex
-                                          });
-                                      }
-  
-                                      var borderColor = hex;
-                                      if (borderColor.toLowerCase() === '#ffffff') {
-                                          borderColor = 'rgba(0,0,0,0.25)';
-                                      }
-                                      $('#fill-color-processor-preview').css({
-                                          'border-color': borderColor
-                                      });
-  
-                                        $('#fill-color-label-preview').css({
-                                          'background': hex
-                                        });
-                                      $('#fill-color-label-preview-value').css('color',
-                                          nfCommon.determineContrastColor(nfCommon.substringAfterLast(hex, '#'))
-                                      );
-                                    }
-                                });
-    
-                                // apply fill color from field on blur and enter press
-                                $('#fill-color-value').on('blur', updateColor).on('keyup', function (e) {
-                                    var code = e.keyCode ? e.keyCode : e.which;
-                                    if (code === $.ui.keyCode.ENTER) {
-                                        updateColor();
-                                    }
-                                });
-                            }
-                        }
-                    }
-                };
-            }
-    
-            OperateCtrl.prototype = {
-                constructor: OperateCtrl,
-    
-                /**
-                 * Initializes the canvas operate controller.
-                 */
-                init: function () {
-                    this.template.modal.init();
-                    this.templateUpload.modal.init();
-                    this.fillcolor.modal.init();
-                    this.fillcolor.modal.minicolors.init();
-                }
-            }
-    
-            var operateCtrl = new OperateCtrl();
-            return operateCtrl;
-        };
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js
deleted file mode 100644
index 23dcaa11b476..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js
+++ /dev/null
@@ -1,168 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['nf.CanvasUtils',
-                  'nf.ContextMenu'],
-              function (nfCanvasUtils, nfContextMenu) {
-                  return (nf.ng.Canvas.ToolboxCtrl = factory(nfCanvasUtils, nfContextMenu));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ng.Canvas.ToolboxCtrl =
-              factory(require('nf.CanvasUtils'),
-                  require('nf.ContextMenu')));
-      } else {
-          nf.ng.Canvas.ToolboxCtrl = factory(root.nf.CanvasUtils,
-              root.nf.ContextMenu);
-      }
-  }(this, function (nfCanvasUtils, nfContextMenu) {
-      'use strict';
-  
-      return function (processorComponent,
-                         inputPortComponent,
-                         outputPortComponent,
-                         groupComponent,
-                         remoteGroupComponent,
-                         funnelComponent,
-                         templateComponent,
-                         labelComponent) {
-            'use strict';
-    
-            function ToolboxCtrl(processorComponent,
-                                 inputPortComponent,
-                                 outputPortComponent,
-                                 groupComponent,
-                                 remoteGroupComponent,
-                                 funnelComponent,
-                                 templateComponent,
-                                 labelComponent) {
-                this.processorComponent = processorComponent;
-                this.inputPortComponent = inputPortComponent;
-                this.outputPortComponent = outputPortComponent;
-                this.groupComponent = groupComponent;
-                this.remoteGroupComponent = remoteGroupComponent;
-                this.funnelComponent = funnelComponent;
-                this.templateComponent = templateComponent;
-                this.labelComponent = labelComponent;
-    
-                /**
-                 * Config for the toolbox
-                 */
-                this.config = {
-                    type: {
-                  processor: nf._.msg('nf-canvas-toolbox.Processor'),
-                  inputPort: nf._.msg('nf-canvas-toolbox.InputPort'),
-                  outputPort: nf._.msg('nf-canvas-toolbox.OutputPort'),
-                  processGroup: nf._.msg('nf-canvas-toolbox.ProcessGroup'),
-                  remoteProcessGroup: nf._.msg('nf-canvas-toolbox.RemoteProcessGroup'),
-                  connection: nf._.msg('nf-canvas-toolbox.Connection'),
-                  funnel: nf._.msg('nf-canvas-toolbox.Funnel'),
-                  template: nf._.msg('nf-canvas-toolbox.Template'),
-                  label: nf._.msg('nf-canvas-toolbox.Label')
-                    },
-                    urls: {
-                        api: '../nifi-api',
-                        controller: '../nifi-api/controller',
-                        processorTypes: '../nifi-api/flow/processor-types'
-                    }
-                };
-            }
-    
-            ToolboxCtrl.prototype = {
-                constructor: ToolboxCtrl,
-    
-                /**
-                 * Initialize the toolbox controller.
-                 */
-                init: function () {
-                    // initialize modal dialogs
-                    processorComponent.modal.init();
-                    inputPortComponent.modal.init();
-                    outputPortComponent.modal.init();
-                    groupComponent.modal.init();
-                    remoteGroupComponent.modal.init();
-                    templateComponent.modal.init();
-                },
-    
-                /**
-                 * Gets the draggable configuration for a toolbox component.
-                 *
-                 * @param {object} component        The component responsible for handling the stop event.
-                 * @returns {object}                The draggable configuration.
-                 *
-                 * NOTE: The `component` must implement a dropHandler.
-                 */
-                draggableComponentConfig: function (component) {
-    
-                    //add hover effect
-                    component.getElement().hover(function () {
-                        component.getElement().removeClass(component.icon).addClass(component.hoverIcon);
-                    }, function () {
-                        component.getElement().removeClass(component.hoverIcon).addClass(component.icon);
-                    })
-    
-                    return {
-                        zIndex: 1011,
-                        revert: true,
-                        revertDuration: 0,
-                        cancel: false,
-                        containment: 'body',
-                        cursor: '-webkit-grabbing',
-                        start: function (e, ui) {
-                            // hide the context menu if necessary
-                          nfContextMenu.hide();
-                        },
-                        stop: function (e, ui) {
-                          var translate = nfCanvasUtils.translateCanvasView();
-                          var scale = nfCanvasUtils.scaleCanvasView();
-    
-                            var mouseX = e.originalEvent.pageX;
-                          var mouseY = e.originalEvent.pageY - nfCanvasUtils.getCanvasOffset();
-    
-                            // invoke the drop handler if we're over the canvas
-                            if (mouseX >= 0 && mouseY >= 0) {
-                                // adjust the x and y coordinates accordingly
-                                var x = (mouseX / scale) - (translate[0] / scale);
-                                var y = (mouseY / scale) - (translate[1] / scale);
-    
-                                //each component must implement a dropHandler function
-                                component.dropHandler.apply(component, [{
-                                    x: x,
-                                    y: y
-                                }]);
-                            }
-                        },
-                        helper: component.dragIcon
-                    }
-                }
-            }
-    
-            var toolboxCtrl =
-                new ToolboxCtrl(processorComponent,
-                    inputPortComponent,
-                    outputPortComponent,
-                    groupComponent,
-                    remoteGroupComponent,
-                    funnelComponent,
-                    templateComponent,
-                    labelComponent);
-            return toolboxCtrl;
-        };
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js
deleted file mode 100644
index cb8a8b21e9b2..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define([],
-            function () {
-                return (nf.ng.BreadcrumbsDirective = factory());
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.BreadcrumbsDirective =
-            factory());
-    } else {
-        nf.ng.BreadcrumbsDirective = factory();
-    }
-}(this, function () {
-    'use strict';
-
-    return function (breadcrumbsCtrl) {
-        return {
-            restrict: 'E',
-            templateUrl: 'views/nf-ng-breadcrumbs-directive-view.html',
-            scope: {
-                'breadcrumbs': '=',
-                'clickFunc': '=',
-                'highlightCrumbId': '=',
-                'separatorFunc': '='
-            },
-            link: function (scope, element, attrs) {
-                breadcrumbsCtrl.registerMouseWheelEvent(element);
-            }
-        };
-    };
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js
deleted file mode 100644
index 93afc5f549d1..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define([],
-            function () {
-                return (nf.ng.DraggableDirective = factory());
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.DraggableDirective =
-            factory());
-    } else {
-        nf.ng.DraggableDirective = factory();
-    }
-}(this, function () {
-    'use strict';
-
-    return function () {
-        return {
-            restrict: 'AE',
-            link: function (scope, element, attrs) {
-                element.draggable(scope.$eval(attrs.nfDraggable));
-            }
-        };
-    };
-}));
\ No newline at end of file
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
deleted file mode 100644
index 94db750e4be9..000000000000
--- 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
+++ /dev/null
@@ -1,148 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Client',
-                'nf.Birdseye',
-                'nf.Graph',
-                'nf.CanvasUtils',
-                'nf.ErrorHandler'],
-            function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-                return (nf.ng.FunnelComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.FunnelComponent =
-            factory(require('jquery'),
-                require('nf.Client'),
-                require('nf.Birdseye'),
-                require('nf.Graph'),
-                require('nf.CanvasUtils'),
-                require('nf.ErrorHandler')));
-    } else {
-        nf.ng.FunnelComponent = factory(root.$,
-            root.nf.Client,
-            root.nf.Birdseye,
-            root.nf.Graph,
-            root.nf.CanvasUtils,
-            root.nf.ErrorHandler);
-    }
-}(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-    'use strict';
-
-    return function (serviceProvider) {
-        'use strict';
-
-        function FunnelComponent() {
-            this.icon = 'icon icon-funnel';
-
-            this.hoverIcon = 'icon icon-funnel-add';
-        }
-
-        FunnelComponent.prototype = {
-            constructor: FunnelComponent,
-
-            /**
-             * Gets the component.
-             *
-             * @returns {*|jQuery|HTMLElement}
-             */
-            getElement: function () {
-                return $('#funnel-component');
-            },
-
-            /**
-             * Enable the component.
-             */
-            enabled: function () {
-                this.getElement().attr('disabled', false);
-            },
-
-            /**
-             * Disable the component.
-             */
-            disabled: function () {
-                this.getElement().attr('disabled', true);
-            },
-
-            /**
-             * Handler function for when component is dropped on the canvas.
-             *
-             * @argument {object} pt        The point that the component was dropped.
-             */
-            dropHandler: function (pt) {
-                this.createFunnel(pt);
-            },
-
-            /**
-             * The drag icon for the toolbox component.
-             *
-             * @param event
-             * @returns {*|jQuery|HTMLElement}
-             */
-            dragIcon: function (event) {
-                return $('<div class="icon icon-funnel-add"></div>');
-            },
-
-            /**
-             * Creates a new funnel at the specified point.
-             *
-             * @argument {object} pt        The point that the funnel was dropped.
-             */
-            createFunnel: function (pt) {
-                var outputPortEntity = {
-                    'revision': nfClient.getRevision({
-                        'revision': {
-                            'version': 0
-                        }
-                    }),
-                    'component': {
-                        'position': {
-                            'x': pt.x,
-                            'y': pt.y
-                        }
-                    }
-                };
-
-                // create a new funnel
-                $.ajax({
-                    type: 'POST',
-                    url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/funnels',
-                    data: JSON.stringify(outputPortEntity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // add the funnel to the graph
-                    nfGraph.add({
-                        'funnels': [response]
-                    }, {
-                        'selectAll': true
-                    });
-
-                    // update the birdseye
-                    nfBirdseye.refresh();
-                }).fail(nfErrorHandler.handleAjaxError);
-            }
-        }
-
-        var funnelComponent = new FunnelComponent();
-        return funnelComponent;
-    };
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js
deleted file mode 100644
index eccbf977f659..000000000000
--- 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
+++ /dev/null
@@ -1,274 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Client',
-                  'nf.Birdseye',
-                  'nf.Graph',
-                  'nf.CanvasUtils',
-                  'nf.ErrorHandler'],
-              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-                  return (nf.ng.GroupComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ng.GroupComponent =
-              factory(require('jquery'),
-                  require('nf.Client'),
-                  require('nf.Birdseye'),
-                  require('nf.Graph'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ErrorHandler')));
-      } else {
-          nf.ng.GroupComponent = factory(root.$,
-              root.nf.Client,
-              root.nf.Birdseye,
-              root.nf.Graph,
-              root.nf.CanvasUtils,
-              root.nf.ErrorHandler);
-      }
-  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-      'use strict';
-  
-      return function (serviceProvider) {
-            'use strict';
-    
-            /**
-             * Create the group and add to the graph.
-             *
-             * @argument {string} groupName The name of the group.
-             * @argument {object} pt        The point that the group was dropped.
-             */
-            var createGroup = function (groupName, pt) {
-                var processGroupEntity = {
-                  'revision': nfClient.getRevision({
-                        'revision': {
-                            'version': 0
-                        }
-                    }),
-                    'component': {
-                        'name': groupName,
-                        'position': {
-                            'x': pt.x,
-                            'y': pt.y
-                        }
-                    }
-                };
-    
-                // create a new processor of the defined type
-                return $.ajax({
-                    type: 'POST',
-                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/process-groups',
-                    data: JSON.stringify(processGroupEntity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // add the process group to the graph
-                  nfGraph.add({
-                        'processGroups': [response]
-                    }, {
-                        'selectAll': true
-                    });
-    
-                    // update component visibility
-                  nfGraph.updateVisibility();
-    
-                    // update the birdseye
-                  nfBirdseye.refresh();
-              }).fail(nfErrorHandler.handleAjaxError);
-            };
-    
-            function GroupComponent() {
-    
-                this.icon = 'icon icon-group';
-    
-                this.hoverIcon = 'icon icon-group-add';
-    
-                /**
-                 * The group component's modal.
-                 */
-                this.modal = {
-    
-                    /**
-                     * Gets the modal element.
-                     *
-                     * @returns {*|jQuery|HTMLElement}
-                     */
-                    getElement: function () {
-                        return $('#new-process-group-dialog');
-                    },
-    
-                    /**
-                     * Initialize the modal.
-                     */
-                    init: function () {
-                        // configure the new process group dialog
-                        this.getElement().modal({
-                            scrollableContentStyle: 'scrollable',
-                      headerText: nf._.msg('nf-group-component.AddProcessGroup'),
-                            handler: {
-                                close: function () {
-                                    $('#new-process-group-name').val('');
-                                }
-                            }
-                        });
-                    },
-    
-                    /**
-                     * Updates the modal config.
-                     *
-                     * @param {string} name             The name of the property to update.
-                     * @param {object|array} config     The config for the `name`.
-                     */
-                    update: function (name, config) {
-                        this.getElement().modal(name, config);
-                    },
-    
-                    /**
-                     * Show the modal.
-                     */
-                    show: function () {
-                        this.getElement().modal('show');
-                    },
-    
-                    /**
-                     * Hide the modal.
-                     */
-                    hide: function () {
-                        this.getElement().modal('hide');
-                    }
-                };
-            }
-    
-            GroupComponent.prototype = {
-                constructor: GroupComponent,
-    
-                /**
-                 * Gets the component.
-                 *
-                 * @returns {*|jQuery|HTMLElement}
-                 */
-                getElement: function () {
-                    return $('#group-component');
-                },
-    
-                /**
-                 * Enable the component.
-                 */
-                enabled: function () {
-                    this.getElement().attr('disabled', false);
-                },
-    
-                /**
-                 * Disable the component.
-                 */
-                disabled: function () {
-                    this.getElement().attr('disabled', true);
-                },
-    
-                /**
-                 * Handler function for when component is dropped on the canvas.
-                 *
-                 * @argument {object} pt        The point that the component was dropped.
-                 */
-                dropHandler: function (pt) {
-                    this.promptForGroupName(pt);
-                },
-    
-                /**
-                 * The drag icon for the toolbox component.
-                 *
-                 * @param event
-                 * @returns {*|jQuery|HTMLElement}
-                 */
-                dragIcon: function (event) {
-                    return $('<div class="icon icon-group-add"></div>');
-                },
-    
-                /**
-                 * Prompts the user to enter the name for the group.
-                 *
-                 * @argument {object} pt        The point that the group was dropped.
-                 */
-                promptForGroupName: function (pt) {
-                  var groupComponent = this;
-                    return $.Deferred(function (deferred) {
-                        var addGroup = function () {
-                            // get the name of the group and clear the textfield
-                            var groupName = $('#new-process-group-name').val();
-    
-                            // hide the dialog
-                          groupComponent.modal.hide();
-    
-                            // create the group and resolve the deferred accordingly
-                            createGroup(groupName, pt).done(function (response) {
-                                deferred.resolve(response.component);
-                            }).fail(function () {
-                                deferred.reject();
-                            });
-                        };
-    
-                      groupComponent.modal.update('setButtonModel', [{
-                      buttonText: nf._.msg('nf-group-component.Add'),
-                            color: {
-                                base: '#728E9B',
-                                hover: '#004849',
-                                text: '#ffffff'
-                            },
-                            handler: {
-                                click: addGroup
-                            }
-                        },
-                            {
-                          buttonText: nf._.msg('nf-group-component.Cancel'),
-                                color: {
-                                    base: '#E3E8EB',
-                                    hover: '#C7D2D7',
-                                    text: '#004849'
-                                },
-                                handler: {
-                                    click: function () {
-                                        // reject the deferred
-                                        deferred.reject();
-    
-                                        // close the dialog
-                                      groupComponent.modal.hide();
-                                    }
-                                }
-                            }]);
-    
-                        // show the dialog
-                      groupComponent.modal.show();
-    
-                        // set up the focus and key handlers
-                        $('#new-process-group-name').focus().off('keyup').on('keyup', function (e) {
-                            var code = e.keyCode ? e.keyCode : e.which;
-                            if (code === $.ui.keyCode.ENTER) {
-                                addGroup();
-                            }
-                        });
-                    }).promise();
-                }
-            }
-    
-            var groupComponent = new GroupComponent();
-            return groupComponent;
-        };
-  }));
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
deleted file mode 100644
index 392fecbc7cc9..000000000000
--- 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
+++ /dev/null
@@ -1,267 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Client',
-                  'nf.Birdseye',
-                  'nf.Graph',
-                  'nf.CanvasUtils',
-                  'nf.ErrorHandler'],
-              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-                  return (nf.ng.InputPortComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ng.InputPortComponent =
-              factory(require('jquery'),
-                  require('nf.Client'),
-                  require('nf.Birdseye'),
-                  require('nf.Graph'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ErrorHandler')));
-      } else {
-          nf.ng.InputPortComponent = factory(root.$,
-              root.nf.Client,
-              root.nf.Birdseye,
-              root.nf.Graph,
-              root.nf.CanvasUtils,
-              root.nf.ErrorHandler);
-      }
-  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-      'use strict';
-  
-      return function (serviceProvider) {
-            'use strict';
-    
-            /**
-             * Create the input port and add to the graph.
-             *
-             * @argument {string} portName          The input port name.
-             * @argument {object} pt                The point that the input port was dropped.
-             */
-            var createInputPort = function (portName, pt) {
-                var inputPortEntity = {
-                  'revision': nfClient.getRevision({
-                        'revision': {
-                            'version': 0
-                        }
-                    }),
-                    'component': {
-                        'name': portName,
-                        'position': {
-                            'x': pt.x,
-                            'y': pt.y
-                        }
-                    }
-                };
-    
-                // create a new processor of the defined type
-                $.ajax({
-                    type: 'POST',
-                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/input-ports',
-                    data: JSON.stringify(inputPortEntity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // add the port to the graph
-                  nfGraph.add({
-                        'inputPorts': [response]
-                    }, {
-                        'selectAll': true
-                    });
-    
-                    // update component visibility
-                  nfGraph.updateVisibility();
-    
-                    // update the birdseye
-                  nfBirdseye.refresh();
-              }).fail(nfErrorHandler.handleAjaxError);
-            };
-    
-            function InputPortComponent() {
-    
-                this.icon = 'icon icon-port-in';
-    
-                this.hoverIcon = 'icon icon-port-in-add';
-    
-                /**
-                 * The input port component's modal.
-                 */
-                this.modal = {
-    
-                    /**
-                     * Gets the modal element.
-                     *
-                     * @returns {*|jQuery|HTMLElement}
-                     */
-                    getElement: function () {
-                        return $('#new-port-dialog');
-                    },
-    
-                    /**
-                     * Initialize the modal.
-                     */
-                    init: function () {
-                        // configure the new port dialog
-                        this.getElement().modal({
-                            scrollableContentStyle: 'scrollable',
-                      headerText: nf._.msg('nf-input-port-component.AddPort'),
-                            handler: {
-                                close: function () {
-                                    $('#new-port-name').val('');
-                                }
-                            }
-                        });
-                    },
-    
-                    /**
-                     * Updates the modal config.
-                     *
-                     * @param {string} name             The name of the property to update.
-                     * @param {object|array} config     The config for the `name`.
-                     */
-                    update: function (name, config) {
-                        this.getElement().modal(name, config);
-                    },
-    
-                    /**
-                     * Show the modal.
-                     */
-                    show: function () {
-                        this.getElement().modal('show');
-                    },
-    
-                    /**
-                     * Hide the modal.
-                     */
-                    hide: function () {
-                        this.getElement().modal('hide');
-                    }
-                };
-            }
-    
-            InputPortComponent.prototype = {
-                constructor: InputPortComponent,
-    
-                /**
-                 * Gets the component.
-                 *
-                 * @returns {*|jQuery|HTMLElement}
-                 */
-                getElement: function () {
-                    return $('#port-in-component');
-                },
-    
-                /**
-                 * Enable the component.
-                 */
-                enabled: function () {
-                    this.getElement().attr('disabled', false);
-                },
-    
-                /**
-                 * Disable the component.
-                 */
-                disabled: function () {
-                    this.getElement().attr('disabled', true);
-                },
-    
-                /**
-                 * Handler function for when component is dropped on the canvas.
-                 *
-                 * @argument {object} pt        The point that the component was dropped.
-                 */
-                dropHandler: function (pt) {
-                    this.promptForInputPortName(pt);
-                },
-    
-                /**
-                 * The drag icon for the toolbox component.
-                 *
-                 * @param event
-                 * @returns {*|jQuery|HTMLElement}
-                 */
-                dragIcon: function (event) {
-                    return $('<div class="icon icon-port-in-add"></div>');
-                },
-    
-                /**
-                 * Prompts the user to enter the name for the input port.
-                 *
-                 * @argument {object} pt        The point that the input port was dropped.
-                 */
-                promptForInputPortName: function (pt) {
-                  var inputPortComponent = this;
-                    var addInputPort = function () {
-                        // get the name of the input port and clear the textfield
-                        var portName = $('#new-port-name').val();
-    
-                        // hide the dialog
-                      inputPortComponent.modal.hide();
-    
-                        // create the input port
-                        createInputPort(portName, pt);
-                    };
-    
-                    this.modal.update('setButtonModel', [{
-                  buttonText: nf._.msg('nf-input-port-component.Add'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: addInputPort
-                        }
-                    },
-                        {
-                      buttonText: nf._.msg('nf-input-port-component.Cancel'),
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                  inputPortComponent.modal.hide();
-                                }
-                            }
-                        }]);
-    
-                    // update the port type
-              $('#new-port-type').text(nf._.msg('nf-input-port-component.new-port-type'));
-    
-                    // show the dialog
-                    this.modal.show();
-    
-                    // set up the focus and key handlers
-                    $('#new-port-name').focus().off('keyup').on('keyup', function (e) {
-                        var code = e.keyCode ? e.keyCode : e.which;
-                        if (code === $.ui.keyCode.ENTER) {
-                            addInputPort();
-                        }
-                    });
-                }
-            }
-    
-            var inputPortComponent = new InputPortComponent();
-            return inputPortComponent;
-        };
-  }));
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
deleted file mode 100644
index 95621094075d..000000000000
--- 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
+++ /dev/null
@@ -1,153 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Client',
-                'nf.Birdseye',
-                'nf.Graph',
-                'nf.CanvasUtils',
-                'nf.ErrorHandler',
-                'nf.Label'],
-            function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfLabel) {
-                return (nf.ng.LabelComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfLabel));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.LabelComponent =
-            factory(require('jquery'),
-                require('nf.Client'),
-                require('nf.Birdseye'),
-                require('nf.Graph'),
-                require('nf.CanvasUtils'),
-                require('nf.ErrorHandler'),
-                require('nf.Label')));
-    } else {
-        nf.ng.LabelComponent = factory(root.$,
-            root.nf.Client,
-            root.nf.Birdseye,
-            root.nf.Graph,
-            root.nf.CanvasUtils,
-            root.nf.ErrorHandler,
-            root.nf.Label);
-    }
-}(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfLabel) {
-    'use strict';
-
-    return function (serviceProvider) {
-        'use strict';
-
-        function LabelComponent() {
-            this.icon = 'icon icon-label';
-
-            this.hoverIcon = 'icon icon-label-add';
-        }
-
-        LabelComponent.prototype = {
-            constructor: LabelComponent,
-
-            /**
-             * Gets the component.
-             *
-             * @returns {*|jQuery|HTMLElement}
-             */
-            getElement: function () {
-                return $('#label-component');
-            },
-
-            /**
-             * Enable the component.
-             */
-            enabled: function () {
-                this.getElement().attr('disabled', false);
-            },
-
-            /**
-             * Disable the component.
-             */
-            disabled: function () {
-                this.getElement().attr('disabled', true);
-            },
-
-            /**
-             * Handler function for when component is dropped on the canvas.
-             *
-             * @argument {object} pt        The point that the component was dropped.
-             */
-            dropHandler: function (pt) {
-                this.createLabel(pt);
-            },
-
-            /**
-             * The drag icon for the toolbox component.
-             *
-             * @param event
-             * @returns {*|jQuery|HTMLElement}
-             */
-            dragIcon: function (event) {
-                return $('<div class="icon icon-label-add"></div>');
-            },
-
-            /**
-             * Create the label and add to the graph.
-             *
-             * @argument {object} pt        The point that the label was dropped.
-             */
-            createLabel: function (pt) {
-                var labelEntity = {
-                    'revision': nfClient.getRevision({
-                        'revision': {
-                            'version': 0
-                        }
-                    }),
-                    'component': {
-                        'width': nfLabel.config.width,
-                        'height': nfLabel.config.height,
-                        'position': {
-                            'x': pt.x,
-                            'y': pt.y
-                        }
-                    }
-                };
-
-                // create a new label
-                $.ajax({
-                    type: 'POST',
-                    url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/labels',
-                    data: JSON.stringify(labelEntity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // add the label to the graph
-                    nfGraph.add({
-                        'labels': [response]
-                    }, {
-                        'selectAll': true
-                    });
-
-                    // update the birdseye
-                    nfBirdseye.refresh();
-                }).fail(nfErrorHandler.handleAjaxError);
-            }
-        }
-
-        var labelComponent = new LabelComponent();
-        return labelComponent;
-    };
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js
deleted file mode 100644
index f27ec59cea9f..000000000000
--- 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
+++ /dev/null
@@ -1,258 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Client',
-                  'nf.Birdseye',
-                  'nf.Graph',
-                  'nf.CanvasUtils',
-                  'nf.ErrorHandler'],
-              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-                  return (nf.ng.OutputPortComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ng.OutputPortComponent =
-              factory(require('jquery'),
-                  require('nf.Client'),
-                  require('nf.Birdseye'),
-                  require('nf.Graph'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ErrorHandler')));
-      } else {
-          nf.ng.OutputPortComponent = factory(root.$,
-              root.nf.Client,
-              root.nf.Birdseye,
-              root.nf.Graph,
-              root.nf.CanvasUtils,
-              root.nf.ErrorHandler);
-      }
-  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
-      'use strict';
-  
-      return function (serviceProvider) {
-            'use strict';
-    
-            /**
-             * Create the input port and add to the graph.
-             *
-             * @argument {string} portName          The output port name.
-             * @argument {object} pt                The point that the output port was dropped.
-             */
-            var createOutputPort = function (portName, pt) {
-                var outputPortEntity = {
-                  'revision': nfClient.getRevision({
-                        'revision': {
-                            'version': 0
-                        }
-                    }),
-                    'component': {
-                        'name': portName,
-                        'position': {
-                            'x': pt.x,
-                            'y': pt.y
-                        }
-                    }
-                };
-    
-                // create a new processor of the defined type
-                $.ajax({
-                    type: 'POST',
-                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/output-ports',
-                    data: JSON.stringify(outputPortEntity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // add the port to the graph
-                  nfGraph.add({
-                        'outputPorts': [response]
-                    }, {
-                        'selectAll': true
-                    });
-    
-                    // update component visibility
-                  nfGraph.updateVisibility();
-    
-                    // update the birdseye
-                  nfBirdseye.refresh();
-              }).fail(nfErrorHandler.handleAjaxError);
-            };
-    
-            function OutputPortComponent() {
-    
-                this.icon = 'icon icon-port-out';
-    
-                this.hoverIcon = 'icon icon-port-out-add';
-    
-                /**
-                 * The output port component's modal.
-                 */
-                this.modal = {
-    
-                    /**
-                     * Gets the modal element.
-                     *
-                     * @returns {*|jQuery|HTMLElement}
-                     */
-                    getElement: function () {
-                        return $('#new-port-dialog'); //Reuse the input port dialog....
-                    },
-    
-                    /**
-                     * Initialize the modal.
-                     */
-                    init: function () {
-                        //Reuse the input port dialog....
-                    },
-    
-                    /**
-                     * Updates the modal config.
-                     *
-                     * @param {string} name             The name of the property to update.
-                     * @param {object|array} config     The config for the `name`.
-                     */
-                    update: function (name, config) {
-                        this.getElement().modal(name, config);
-                    },
-    
-                    /**
-                     * Show the modal.
-                     */
-                    show: function () {
-                        this.getElement().modal('show');
-                    },
-    
-                    /**
-                     * Hide the modal.
-                     */
-                    hide: function () {
-                        this.getElement().modal('hide');
-                    }
-                };
-            }
-    
-            OutputPortComponent.prototype = {
-                constructor: OutputPortComponent,
-    
-                /**
-                 * Gets the component.
-                 *
-                 * @returns {*|jQuery|HTMLElement}
-                 */
-                getElement: function () {
-                    return $('#port-out-component');
-                },
-    
-                /**
-                 * Enable the component.
-                 */
-                enabled: function () {
-                    this.getElement().attr('disabled', false);
-                },
-    
-                /**
-                 * Disable the component.
-                 */
-                disabled: function () {
-                    this.getElement().attr('disabled', true);
-                },
-    
-                /**
-                 * Handler function for when component is dropped on the canvas.
-                 *
-                 * @argument {object} pt        The point that the component was dropped.
-                 */
-                dropHandler: function (pt) {
-                    this.promptForOutputPortName(pt);
-                },
-    
-                /**
-                 * The drag icon for the toolbox component.
-                 *
-                 * @param event
-                 * @returns {*|jQuery|HTMLElement}
-                 */
-                dragIcon: function (event) {
-                    return $('<div class="icon icon-port-out-add"></div>');
-                },
-    
-                /**
-                 * Prompts the user to enter the name for the output port.
-                 *
-                 * @argument {object} pt        The point that the output port was dropped.
-                 */
-                promptForOutputPortName: function (pt) {
-                  var outputPortComponent = this;
-                    var addOutputPort = function () {
-                        // get the name of the output port and clear the textfield
-                        var portName = $('#new-port-name').val();
-    
-                        // hide the dialog
-                      outputPortComponent.modal.hide();
-    
-                        // create the output port
-                        createOutputPort(portName, pt);
-                    };
-    
-                    this.modal.update('setButtonModel', [{
-                  buttonText: nf._.msg('nf-output-port-component.Add'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: addOutputPort
-                        }
-                    },
-                        {
-                      buttonText: nf._.msg('nf-output-port-component.Cancel'),
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                  outputPortComponent.modal.hide();
-                                }
-                            }
-                        }]);
-    
-                    // update the port type
-              $('#new-port-type').text(nf._.msg('nf-output-port-component.new-port-type'));
-    
-                    // set the focus and show the dialog
-                    this.modal.show();
-    
-                    // set up the focus and key handlers
-                    $('#new-port-name').focus().off('keyup').on('keyup', function (e) {
-                        var code = e.keyCode ? e.keyCode : e.which;
-                        if (code === $.ui.keyCode.ENTER) {
-                            addOutputPort();
-                        }
-                    });
-                }
-            }
-    
-            var outputPortComponent = new OutputPortComponent();
-            return outputPortComponent;
-        };
-  }));
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
deleted file mode 100644
index 0d5249621ec1..000000000000
--- 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
+++ /dev/null
@@ -1,710 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'Slick',
-                  'nf.Client',
-                  'nf.Birdseye',
-                  'nf.Graph',
-                  'nf.CanvasUtils',
-                  'nf.ErrorHandler',
-                  'nf.Dialog',
-                  'nf.Common'],
-              function ($, Slick, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
-                  return (nf.ng.ProcessorComponent = factory($, Slick, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ng.ProcessorComponent =
-              factory(require('jquery'),
-                  require('Slick'),
-                  require('nf.Client'),
-                  require('nf.Birdseye'),
-                  require('nf.Graph'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Dialog'),
-                  require('nf.Common')));
-      } else {
-          nf.ng.ProcessorComponent = factory(root.$,
-              root.Slick,
-              root.nf.Client,
-              root.nf.Birdseye,
-              root.nf.Graph,
-              root.nf.CanvasUtils,
-              root.nf.ErrorHandler,
-              root.nf.Dialog,
-              root.nf.Common);
-      }
-  }(this, function ($, Slick, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
-      'use strict';
-  
-      return function (serviceProvider) {
-            'use strict';
-    
-            /**
-             * Filters the processor type table.
-             */
-            var applyFilter = function () {
-                // get the dataview
-                var processorTypesGrid = $('#processor-types-table').data('gridInstance');
-    
-                // ensure the grid has been initialized
-              if (nfCommon.isDefinedAndNotNull(processorTypesGrid)) {
-                    var processorTypesData = processorTypesGrid.getData();
-    
-                    // update the search criteria
-                    processorTypesData.setFilterArgs({
-                        searchString: getFilterText()
-                    });
-                    processorTypesData.refresh();
-    
-                  // update the buttons to possibly trigger the disabled state
-                  $('#new-processor-dialog').modal('refreshButtons');
-  
-                    // update the selection if possible
-                    if (processorTypesData.getLength() > 0) {
-                        processorTypesGrid.setSelectedRows([0]);
-                    }
-                }
-            };
-    
-            /**
-             * Determines if the item matches the filter.
-             *
-             * @param {object} item     The item to filter.
-             * @param {object} args     The filter criteria.
-             * @returns {boolean}       Whether the item matches the filter.
-             */
-            var matchesRegex = function (item, args) {
-                if (args.searchString === '') {
-                    return true;
-                }
-    
-                try {
-                    // perform the row filtering
-                    var filterExp = new RegExp(args.searchString, 'i');
-                } catch (e) {
-                    // invalid regex
-                    return false;
-                }
-    
-                // determine if the item matches the filter
-                var matchesLabel = item['label'].search(filterExp) >= 0;
-                var matchesTags = item['tags'].search(filterExp) >= 0;
-                return matchesLabel || matchesTags;
-            };
-    
-            /**
-             * Performs the filtering.
-             *
-             * @param {object} item     The item subject to filtering.
-             * @param {object} args     Filter arguments.
-             * @returns {Boolean}       Whether or not to include the item.
-             */
-            var filter = function (item, args) {
-                // determine if the item matches the filter
-                var matchesFilter = matchesRegex(item, args);
-    
-                // determine if the row matches the selected tags
-                var matchesTags = true;
-                if (matchesFilter) {
-                    var tagFilters = $('#processor-tag-cloud').tagcloud('getSelectedTags');
-                    var hasSelectedTags = tagFilters.length > 0;
-                    if (hasSelectedTags) {
-                        matchesTags = matchesSelectedTags(tagFilters, item['tags']);
-                    }
-                }
-    
-                // determine if this row should be visible
-                var matches = matchesFilter && matchesTags;
-    
-                // if this row is currently selected and its being filtered
-                if (matches === false && $('#selected-processor-type').text() === item['type']) {
-                    // clear the selected row
-                    $('#processor-type-description').text('');
-                    $('#processor-type-name').text('');
-                    $('#selected-processor-name').text('');
-                    $('#selected-processor-type').text('');
-    
-                    // clear the active cell the it can be reselected when its included
-                    var processTypesGrid = $('#processor-types-table').data('gridInstance');
-                    processTypesGrid.resetActiveCell();
-                }
-    
-                return matches;
-            };
-    
-            /**
-             * Determines if the specified tags match all the tags selected by the user.
-             *
-             * @argument {string[]} tagFilters      The tag filters.
-             * @argument {string} tags              The tags to test.
-             */
-            var matchesSelectedTags = function (tagFilters, tags) {
-                var selectedTags = [];
-                $.each(tagFilters, function (_, filter) {
-                    selectedTags.push(filter);
-                });
-    
-                // normalize the tags
-                var normalizedTags = tags.toLowerCase();
-    
-                var matches = true;
-                $.each(selectedTags, function (i, selectedTag) {
-                    if (normalizedTags.indexOf(selectedTag) === -1) {
-                        matches = false;
-                        return false;
-                    }
-                });
-    
-                return matches;
-            };
-    
-            /**
-             * Sorts the specified data using the specified sort details.
-             *
-             * @param {object} sortDetails
-             * @param {object} data
-             */
-            var sort = function (sortDetails, data) {
-                // defines a function for sorting
-                var comparer = function (a, b) {
-                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                    return aString === bString ? 0 : aString > bString ? 1 : -1;
-                };
-    
-                // perform the sort
-                data.sort(comparer, sortDetails.sortAsc);
-            };
-    
-            /**
-             * Get the text out of the filter field. If the filter field doesn't
-             * have any text it will contain the text 'filter list' so this method
-             * accounts for that.
-             */
-            var getFilterText = function () {
-                return $('#processor-type-filter').val();
-            };
-    
-            /**
-             * Resets the filtered processor types.
-             */
-            var resetProcessorDialog = function () {
-                // clear the selected tag cloud
-                $('#processor-tag-cloud').tagcloud('clearSelectedTags');
-    
-                // clear any filter strings
-                $('#processor-type-filter').val('');
-    
-                // reapply the filter
-                applyFilter();
-    
-                // clear the selected row
-                $('#processor-type-description').text('');
-                $('#processor-type-name').text('');
-                $('#selected-processor-name').text('');
-                $('#selected-processor-type').text('');
-    
-                // unselect any current selection
-                var processTypesGrid = $('#processor-types-table').data('gridInstance');
-                processTypesGrid.setSelectedRows([]);
-                processTypesGrid.resetActiveCell();
-            };
-    
-            /**
-             * Create the processor and add to the graph.
-             *
-             * @argument {string} name              The processor name.
-             * @argument {string} processorType     The processor type.
-             * @argument {object} pt                The point that the processor was dropped.
-             */
-            var createProcessor = function (name, processorType, pt) {
-                var processorEntity = {
-                  'revision': nfClient.getRevision({
-                        'revision': {
-                            'version': 0
-                        }
-                    }),
-                    'component': {
-                        'type': processorType,
-                        'name': name,
-                        'position': {
-                            'x': pt.x,
-                            'y': pt.y
-                        }
-                    }
-                };
-    
-                // create a new processor of the defined type
-                $.ajax({
-                    type: 'POST',
-                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/processors',
-                    data: JSON.stringify(processorEntity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // add the processor to the graph
-                  nfGraph.add({
-                        'processors': [response]
-                    }, {
-                        'selectAll': true
-                    });
-    
-                    // update component visibility
-                  nfGraph.updateVisibility();
-    
-                    // update the birdseye
-                  nfBirdseye.refresh();
-              }).fail(nfErrorHandler.handleAjaxError);
-          };
-  
-          /**
-           * Whether the specified item is selectable.
-           *
-           * @param item process type
-           */
-          var isSelectable = function (item) {
-              return nfCommon.isBlank(item.usageRestriction) || nfCommon.canAccessRestrictedComponents();
-            };
-    
-            function ProcessorComponent() {
-    
-                this.icon = 'icon icon-processor';
-    
-                this.hoverIcon = 'icon icon-processor-add';
-    
-                /**
-                 * The processor component's modal.
-                 */
-                this.modal = {
-    
-                    /**
-                     * The processor component modal's filter.
-                     */
-                    filter: {
-    
-                        /**
-                         * Initialize the filter.
-                         */
-                        init: function () {
-                            // initialize the processor type table
-                            var processorTypesColumns = [
-                              {
-                                  id: 'type',
-                                  name: nf._.msg('nf-processor-component.Type'),
-                                  field: 'label',
-                                  formatter: nfCommon.typeFormatter,
-                                  sortable: true,
-                                  resizable: true
-                              },
-                              {
-                                  id: 'tags',
-                                  name: nf._.msg('nf-processor-component.Tags'),
-                                  field: 'tags',
-                                  sortable: true,
-                                  resizable: true
-                              }
-                            ];
-    
-                            var processorTypesOptions = {
-                                forceFitColumns: true,
-                                enableTextSelectionOnCells: true,
-                                enableCellNavigation: true,
-                                enableColumnReorder: false,
-                                autoEdit: false,
-                                multiSelect: false,
-                                rowHeight: 24
-                            };
-    
-                            // initialize the dataview
-                            var processorTypesData = new Slick.Data.DataView({
-                                inlineFilters: false
-                            });
-                            processorTypesData.setItems([]);
-                            processorTypesData.setFilterArgs({
-                                searchString: getFilterText()
-                            });
-                            processorTypesData.setFilter(filter);
-    
-                            // initialize the sort
-                            sort({
-                                columnId: 'type',
-                                sortAsc: true
-                            }, processorTypesData);
-    
-                            // initialize the grid
-                            var processorTypesGrid = new Slick.Grid('#processor-types-table', processorTypesData, processorTypesColumns, processorTypesOptions);
-                            processorTypesGrid.setSelectionModel(new Slick.RowSelectionModel());
-                            processorTypesGrid.registerPlugin(new Slick.AutoTooltips());
-                            processorTypesGrid.setSortColumn('type', true);
-                            processorTypesGrid.onSort.subscribe(function (e, args) {
-                                sort({
-                                    columnId: args.sortCol.field,
-                                    sortAsc: args.sortAsc
-                                }, processorTypesData);
-                            });
-                            processorTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) {
-                                if ($.isArray(args.rows) && args.rows.length === 1) {
-                                    var processorTypeIndex = args.rows[0];
-                                    var processorType = processorTypesGrid.getDataItem(processorTypeIndex);
-    
-                                    // set the processor type description
-                                  if (nfCommon.isDefinedAndNotNull(processorType)) {
-                                      if (nfCommon.isBlank(processorType.description)) {
-                                          $('#processor-type-description')
-                                              .attr('title', '')
-                                              .html('<span class="unset">No description specified</span>');
-                                        } else {
-                                          $('#processor-type-description')
-                                              .width($('#processor-description-container').innerWidth() - 1)
-                                              .html(processorType.description)
-                                              .ellipsis();
-                                        }
-    
-                                        // populate the dom
-                                        $('#processor-type-name').text(processorType.label).ellipsis();
-                                        $('#selected-processor-name').text(processorType.label);
-                                        $('#selected-processor-type').text(processorType.type);
-    
-                                      // refresh the buttons based on the current selection
-                                      $('#new-processor-dialog').modal('refreshButtons');
-                                  }
-                              }
-                          });
-                          processorTypesGrid.onViewportChanged.subscribe(function (e, args) {
-                              nfCommon.cleanUpTooltips($('#processor-types-table'), 'div.view-usage-restriction');
-                            });
-    
-                            // wire up the dataview to the grid
-                            processorTypesData.onRowCountChanged.subscribe(function (e, args) {
-                                processorTypesGrid.updateRowCount();
-                                processorTypesGrid.render();
-    
-                                // update the total number of displayed processors
-                                $('#displayed-processor-types').text(args.current);
-                            });
-                            processorTypesData.onRowsChanged.subscribe(function (e, args) {
-                                processorTypesGrid.invalidateRows(args.rows);
-                                processorTypesGrid.render();
-                            });
-                            processorTypesData.syncGridSelection(processorTypesGrid, false);
-    
-                            // hold onto an instance of the grid
-                          $('#processor-types-table').data('gridInstance', processorTypesGrid).on('mouseenter', 'div.slick-cell', function (e) {
-                              var usageRestriction = $(this).find('div.view-usage-restriction');
-                              if (usageRestriction.length && !usageRestriction.data('qtip')) {
-                                  var rowId = $(this).find('span.row-id').text();
-  
-                                  // get the status item
-                                  var item = processorTypesData.getItemById(rowId);
-  
-                                  // show the tooltip
-                                  if (nfCommon.isDefinedAndNotNull(item.usageRestriction)) {
-                                      usageRestriction.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                                          content: item.usageRestriction,
-                                          position: {
-                                              container: $('#summary'),
-                                              at: 'bottom right',
-                                              my: 'top left',
-                                              adjust: {
-                                                  x: 4,
-                                                  y: 4
-                                              }
-                                          }
-                                      }));
-                                  }
-                              }
-                          });
-    
-                            // load the available processor types, this select is shown in the
-                            // new processor dialog when a processor is dragged onto the screen
-                            $.ajax({
-                                type: 'GET',
-                                url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.processorTypes,
-                                dataType: 'json'
-                            }).done(function (response) {
-                                var tags = [];
-    
-                                // begin the update
-                                processorTypesData.beginUpdate();
-    
-                                // go through each processor type
-                                $.each(response.processorTypes, function (i, documentedType) {
-                                    var type = documentedType.type;
-    
-                                    // create the row for the processor type
-                                    processorTypesData.addItem({
-                                        id: i,
-                                      label: nfCommon.substringAfterLast(type, '.'),
-                                        type: type,
-                                      description: nfCommon.escapeHtml(documentedType.description),
-                                      usageRestriction: nfCommon.escapeHtml(documentedType.usageRestriction),
-                                        tags: documentedType.tags.join(', ')
-                                    });
-    
-                                    // count the frequency of each tag for this type
-                                    $.each(documentedType.tags, function (i, tag) {
-                                        tags.push(tag.toLowerCase());
-                                    });
-                                });
-    
-                                // end the udpate
-                                processorTypesData.endUpdate();
-    
-                                // set the total number of processors
-                                $('#total-processor-types, #displayed-processor-types').text(response.processorTypes.length);
-    
-                                // create the tag cloud
-                                $('#processor-tag-cloud').tagcloud({
-                                    tags: tags,
-                                    select: applyFilter,
-                                    remove: applyFilter
-                                });
-                          }).fail(nfErrorHandler.handleAjaxError);
-                        }
-                    },
-    
-                    /**
-                     * Gets the modal element.
-                     *
-                     * @returns {*|jQuery|HTMLElement}
-                     */
-                    getElement: function () {
-                        return $('#new-processor-dialog');
-                    },
-    
-                    /**
-                     * Initialize the modal.
-                     */
-                    init: function () {
-                        this.filter.init();
-    
-                        // configure the new processor dialog
-                        this.getElement().modal({
-                            scrollableContentStyle: 'scrollable',
-                      headerText: nf._.msg('nf-processor-component.AddProcessor'),
-                          handler: {
-                              resize: function () {
-                                  $('#processor-type-description')
-                                      .width($('#processor-description-container').innerWidth() - 1)
-                                      .text($('#processor-type-description').attr('title'))
-                                      .ellipsis();
-                              }
-                          }
-                        });
-                    },
-    
-                    /**
-                     * Updates the modal config.
-                     *
-                     * @param {string} name             The name of the property to update.
-                     * @param {object|array} config     The config for the `name`.
-                     */
-                    update: function (name, config) {
-                        this.getElement().modal(name, config);
-                    },
-    
-                    /**
-                     * Show the modal
-                     */
-                    show: function () {
-                        this.getElement().modal('show');
-                    },
-    
-                    /**
-                     * Hide the modal
-                     */
-                    hide: function () {
-                        this.getElement().modal('hide');
-                    }
-                };
-            }
-    
-            ProcessorComponent.prototype = {
-                constructor: ProcessorComponent,
-    
-                /**
-                 * Gets the component.
-                 *
-                 * @returns {*|jQuery|HTMLElement}
-                 */
-                getElement: function () {
-                    return $('#processor-component');
-                },
-    
-                /**
-                 * Enable the component.
-                 */
-                enabled: function () {
-                    this.getElement().attr('disabled', false);
-                },
-    
-                /**
-                 * Disable the component.
-                 */
-                disabled: function () {
-                    this.getElement().attr('disabled', true);
-                },
-    
-                /**
-                 * Handler function for when component is dropped on the canvas.
-                 *
-                 * @argument {object} pt        The point that the component was dropped
-                 */
-                dropHandler: function (pt) {
-                    this.promptForProcessorType(pt);
-                },
-    
-                /**
-                 * The drag icon for the toolbox component.
-                 *
-                 * @param event
-                 * @returns {*|jQuery|HTMLElement}
-                 */
-                dragIcon: function (event) {
-                    return $('<div class="icon icon-processor-add"></div>');
-                },
-    
-                /**
-                 * Prompts the user to select the type of new processor to create.
-                 *
-                 * @argument {object} pt        The point that the processor was dropped
-                 */
-                promptForProcessorType: function (pt) {
-                  var processorComponent = this;
-  
-                    // handles adding the selected processor at the specified point
-                    var addProcessor = function () {
-                        // get the type of processor currently selected
-                        var name = $('#selected-processor-name').text();
-                        var processorType = $('#selected-processor-type').text();
-    
-                        // ensure something was selected
-                        if (name === '' || processorType === '') {
-                          nfDialog.showOkDialog({
-                          headerText: nf._.msg('nf-processor-component.AddProcessor'),
-                          dialogContent: nf._.msg('nf-processor-component.AddProcessorContent')
-                            });
-                        } else {
-                            // create the new processor
-                            createProcessor(name, processorType, pt);
-                        }
-    
-                        // hide the dialog
-                      processorComponent.modal.hide();
-                    };
-    
-                    // get the grid reference
-                    var grid = $('#processor-types-table').data('gridInstance');
-    
-                    // add the processor when its double clicked in the table
-                    var gridDoubleClick = function (e, args) {
-                        var processorType = grid.getDataItem(args.row);
-    
-                      if (isSelectable(processorType)) {
-                            $('#selected-processor-name').text(processorType.label);
-                            $('#selected-processor-type').text(processorType.type);
-    
-                            addProcessor();
-                      }
-                    };
-    
-                    // register a handler for double click events
-                    grid.onDblClick.subscribe(gridDoubleClick);
-    
-                    // update the button model
-                    this.modal.update('setButtonModel', [{
-                  buttonText: nf._.msg('nf-processor-component.Add'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                      disabled: function () {
-                          var selected = grid.getSelectedRows();
-  
-                          if (selected.length > 0) {
-                              // grid configured with multi-select = false
-                              var item = grid.getDataItem(selected[0]);
-                              return isSelectable(item) === false;
-                          } else {
-                              return grid.getData().getLength() === 0;
-                          }
-                      },
-                        handler: {
-                            click: addProcessor
-                        }
-                    },
-                        {
-                      buttonText: nf._.msg('nf-processor-component.Cancel'),
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                    $('#new-processor-dialog').modal('hide');
-                                }
-                            }
-                        }]);
-    
-                    // set a new handler for closing the the dialog
-                    this.modal.update('setCloseHandler', function () {
-                        // remove the handler
-                        grid.onDblClick.unsubscribe(gridDoubleClick);
-    
-                        // clear the current filters
-                        resetProcessorDialog();
-                    });
-    
-                    // show the dialog
-                    this.modal.show();
-    
-                    // setup the filter
-                    $('#processor-type-filter').focus().off('keyup').on('keyup', function (e) {
-                        var code = e.keyCode ? e.keyCode : e.which;
-                        if (code === $.ui.keyCode.ENTER) {
-                          var selected = grid.getSelectedRows();
-  
-                          if (selected.length > 0) {
-                              // grid configured with multi-select = false
-                              var item = grid.getDataItem(selected[0]);
-                              if (isSelectable(item)) {
-                                    addProcessor();
-                              }
-                          }
-                        } else {
-                            applyFilter();
-                        }
-                    });
-    
-                    // adjust the grid canvas now that its been rendered
-                    grid.resizeCanvas();
-                    grid.setSelectedRows([0]);
-                }
-            }
-    
-            var processorComponent = new ProcessorComponent();
-            return processorComponent;
-        };
-  }));
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
deleted file mode 100644
index 86b0dec44ac0..000000000000
--- 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
+++ /dev/null
@@ -1,321 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Client',
-                  'nf.Birdseye',
-                  'nf.Graph',
-                  'nf.CanvasUtils',
-                  'nf.ErrorHandler',
-                  'nf.Dialog',
-                  'nf.Common'],
-              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
-                  return (nf.ng.RemoteProcessGroupComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ng.RemoteProcessGroupComponent =
-              factory(require('jquery'),
-                  require('nf.Client'),
-                  require('nf.Birdseye'),
-                  require('nf.Graph'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Dialog'),
-                  require('nf.Common')));
-      } else {
-          nf.ng.RemoteProcessGroupComponent = factory(root.$,
-              root.nf.Client,
-              root.nf.Birdseye,
-              root.nf.Graph,
-              root.nf.CanvasUtils,
-              root.nf.ErrorHandler,
-              root.nf.Dialog,
-              root.nf.Common);
-      }
-  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
-      'use strict';
-  
-      return function (serviceProvider) {
-            'use strict';
-    
-            /**
-             * Create the controller and add to the graph.
-             *
-             * @argument {object} pt                            The point that the remote group was dropped.
-             */
-            var createRemoteProcessGroup = function (pt) {
-    
-                var remoteProcessGroupEntity = {
-                  'revision': nfClient.getRevision({
-                        'revision': {
-                            'version': 0
-                        }
-                    }),
-                    'component': {
-                      'targetUris': $('#new-remote-process-group-uris').val(),
-                        'position': {
-                            'x': pt.x,
-                            'y': pt.y
-                        },
-                        'communicationsTimeout': $('#new-remote-process-group-timeout').val(),
-                        'yieldDuration': $('#new-remote-process-group-yield-duration').val(),
-                        'transportProtocol': $('#new-remote-process-group-transport-protocol-combo').combo('getSelectedOption').value,
-                      'localNetworkInterface': $('#new-remote-process-group-local-network-interface').val(),
-                        'proxyHost': $('#new-remote-process-group-proxy-host').val(),
-                        'proxyPort': $('#new-remote-process-group-proxy-port').val(),
-                        'proxyUser': $('#new-remote-process-group-proxy-user').val(),
-                        'proxyPassword': $('#new-remote-process-group-proxy-password').val()
-                    }
-                };
-    
-                // create a new processor of the defined type
-                $.ajax({
-                    type: 'POST',
-                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/remote-process-groups',
-                    data: JSON.stringify(remoteProcessGroupEntity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // add the processor to the graph
-                  nfGraph.add({
-                        'remoteProcessGroups': [response]
-                    }, {
-                        'selectAll': true
-                    });
-    
-                    // hide the dialog
-                    $('#new-remote-process-group-dialog').modal('hide');
-    
-                    // update component visibility
-                  nfGraph.updateVisibility();
-    
-                    // update the birdseye
-                  nfBirdseye.refresh();
-                }).fail(function (xhr, status, error) {
-                    if (xhr.status === 400) {
-                        var errors = xhr.responseText.split('\n');
-    
-                        var content;
-                        if (errors.length === 1) {
-                            content = $('<span></span>').text(errors[0]);
-                        } else {
-                          content = nfCommon.formatUnorderedList(errors);
-                        }
-    
-                      nfDialog.showOkDialog({
-                            dialogContent: content,
-                      headerText: nf._.msg('nf-remote-process-group-component.ConfigurationError')
-                        });
-                    } else {
-                      nfErrorHandler.handleAjaxError(xhr, status, error);
-                    }
-                });
-            };
-    
-            function RemoteProcessGroupComponent() {
-    
-                this.icon = 'icon icon-group-remote';
-    
-                this.hoverIcon = 'icon icon-group-remote-add';
-    
-                /**
-                 * The remote group component's modal.
-                 */
-                this.modal = {
-    
-                    /**
-                     * Gets the modal element.
-                     *
-                     * @returns {*|jQuery|HTMLElement}
-                     */
-                    getElement: function () {
-                        return $('#new-remote-process-group-dialog');
-                    },
-    
-                    /**
-                     * Initialize the modal.
-                     */
-                    init: function () {
-                        var defaultTimeout = "30 sec";
-                        var defaultYieldDuration = "10 sec";
-    
-                        // configure the new remote process group dialog
-                        this.getElement().modal({
-                            scrollableContentStyle: 'scrollable',
-                      headerText: nf._.msg('nf-remote-process-group-component.AddRemoteProcessGroup'),
-                            handler: {
-                                close: function () {
-                                  $('#new-remote-process-group-uris').val('');
-                                    $('#new-remote-process-group-timeout').val(defaultTimeout);
-                                    $('#new-remote-process-group-yield-duration').val(defaultYieldDuration);
-                                    $('#new-remote-process-group-transport-protocol-combo').combo('setSelectedOption', {
-                                        value: 'RAW'
-                                    });
-                                  $('#new-remote-process-group-local-network-interface').val('');
-                                    $('#new-remote-process-group-proxy-host').val('');
-                                    $('#new-remote-process-group-proxy-port').val('');
-                                    $('#new-remote-process-group-proxy-user').val('');
-                                    $('#new-remote-process-group-proxy-password').val('');
-                                }
-                            }
-                        });
-    
-                        // set default values
-                        $('#new-remote-process-group-timeout').val(defaultTimeout);
-                        $('#new-remote-process-group-yield-duration').val(defaultYieldDuration);
-    
-                        // initialize the transport protocol combo
-                        $('#new-remote-process-group-transport-protocol-combo').combo({
-                            options: [{
-                                text: 'RAW',
-                                value: 'RAW'
-                            }, {
-                                text: 'HTTP',
-                                value: 'HTTP'
-                            }]
-                        });
-                    },
-    
-                    /**
-                     * Updates the modal config.
-                     *
-                     * @param {string} name             The name of the property to update.
-                     * @param {object|array} config     The config for the `name`.
-                     */
-                    update: function (name, config) {
-                        this.getElement().modal(name, config);
-                    },
-    
-                    /**
-                     * Show the modal.
-                     */
-                    show: function () {
-                        this.getElement().modal('show');
-                    },
-    
-                    /**
-                     * Hide the modal.
-                     */
-                    hide: function () {
-                        this.getElement().modal('hide');
-                    }
-                };
-            }
-    
-            RemoteProcessGroupComponent.prototype = {
-                constructor: RemoteProcessGroupComponent,
-    
-                /**
-                 * Gets the component.
-                 *
-                 * @returns {*|jQuery|HTMLElement}
-                 */
-                getElement: function () {
-                    return $('#group-remote-component');
-                },
-    
-                /**
-                 * Enable the component.
-                 */
-                enabled: function () {
-                    this.getElement().attr('disabled', false);
-                },
-    
-                /**
-                 * Disable the component.
-                 */
-                disabled: function () {
-                    this.getElement().attr('disabled', true);
-                },
-    
-                /**
-                 * Handler function for when component is dropped on the canvas.
-                 *
-                 * @argument {object} pt        The point that the component was dropped.
-                 */
-                dropHandler: function (pt) {
-                    this.promptForRemoteProcessGroupUri(pt);
-                },
-    
-                /**
-                 * The drag icon for the toolbox component.
-                 *
-                 * @param event
-                 * @returns {*|jQuery|HTMLElement}
-                 */
-                dragIcon: function (event) {
-                    return $('<div class="icon icon-group-remote-add"></div>');
-                },
-    
-                /**
-                 * Prompts the user to enter the URI for the remote process group.
-                 *
-                 * @argument {object} pt        The point that the remote group was dropped.
-                 */
-                promptForRemoteProcessGroupUri: function (pt) {
-                  var remoteProcessGroupComponent = this;
-                    var addRemoteProcessGroup = function () {
-                        // create the remote process group
-                        createRemoteProcessGroup(pt);
-                    };
-    
-                    this.modal.update('setButtonModel', [{
-                  buttonText: nf._.msg('nf-remote-process-group-component.Add'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: addRemoteProcessGroup
-                        }
-                    },
-                        {
-                      buttonText: nf._.msg('nf-remote-process-group-component.Cancel'),
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                  remoteProcessGroupComponent.modal.hide();
-                                }
-                            }
-                        }]);
-    
-                    // show the dialog
-                    this.modal.show();
-    
-                    // set the focus and key handlers
-                  $('#new-remote-process-group-uris').focus().off('keyup').on('keyup', function (e) {
-                        var code = e.keyCode ? e.keyCode : e.which;
-                        if (code === $.ui.keyCode.ENTER) {
-                            addRemoteProcessGroup();
-                        }
-                    });
-                }
-            }
-    
-            var remoteProcessGroupComponent = new RemoteProcessGroupComponent();
-            return remoteProcessGroupComponent;
-        };
-  }));
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
deleted file mode 100644
index 664010f90830..000000000000
--- 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
+++ /dev/null
@@ -1,287 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Client',
-                  'nf.Birdseye',
-                  'nf.Graph',
-                  'nf.CanvasUtils',
-                  'nf.ErrorHandler',
-                  'nf.Dialog',
-                  'nf.Common'],
-              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
-                  return (nf.ng.TemplateComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ng.TemplateComponent =
-              factory(require('jquery'),
-                  require('nf.Client'),
-                  require('nf.Birdseye'),
-                  require('nf.Graph'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Dialog'),
-                  require('nf.Common')));
-      } else {
-          nf.ng.TemplateComponent = factory(root.$,
-              root.nf.Client,
-              root.nf.Birdseye,
-              root.nf.Graph,
-              root.nf.CanvasUtils,
-              root.nf.ErrorHandler,
-              root.nf.Dialog,
-              root.nf.Common);
-      }
-  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
-      'use strict';
-  
-      return function (serviceProvider) {
-            'use strict';
-    
-            /**
-             * Instantiates the specified template.
-             *
-             * @argument {string} templateId        The template id.
-             * @argument {object} pt                The point that the template was dropped.
-             */
-            var createTemplate = function (templateId, pt) {
-                var instantiateTemplateInstance = {
-                    'templateId': templateId,
-                    'originX': pt.x,
-                    'originY': pt.y
-                };
-    
-                // create a new instance of the new template
-                $.ajax({
-                    type: 'POST',
-                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/template-instance',
-                    data: JSON.stringify(instantiateTemplateInstance),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // populate the graph accordingly
-                  nfGraph.add(response.flow, {
-                        'selectAll': true
-                    });
-    
-                    // update component visibility
-                  nfGraph.updateVisibility();
-    
-                    // update the birdseye
-                  nfBirdseye.refresh();
-              }).fail(nfErrorHandler.handleAjaxError);
-            };
-    
-            function TemplateComponent() {
-    
-                this.icon = 'icon icon-template';
-    
-                this.hoverIcon = 'icon icon-template-add';
-    
-                /**
-                 * The template component's modal.
-                 */
-                this.modal = {
-    
-                    /**
-                     * Gets the modal element.
-                     *
-                     * @returns {*|jQuery|HTMLElement}
-                     */
-                    getElement: function () {
-                        return $('#instantiate-template-dialog');
-                    },
-    
-                    /**
-                     * Initialize the modal.
-                     */
-                    init: function () {
-                        // configure the instantiate template dialog
-                        this.getElement().modal({
-                            scrollableContentStyle: 'scrollable',
-                          headerText: nf._.msg('nf-template-component.AddTemplate')
-                        });
-                    },
-    
-                    /**
-                     * Updates the modal config.
-                     *
-                     * @param {string} name             The name of the property to update.
-                     * @param {object|array} config     The config for the `name`.
-                     */
-                    update: function (name, config) {
-                        this.getElement().modal(name, config);
-                    },
-    
-                    /**
-                     * Show the modal.
-                     */
-                    show: function () {
-                        this.getElement().modal('show');
-                    },
-    
-                    /**
-                     * Hide the modal.
-                     */
-                    hide: function () {
-                        this.getElement().modal('hide');
-                    }
-                };
-            }
-    
-            TemplateComponent.prototype = {
-                constructor: TemplateComponent,
-    
-                /**
-                 * Gets the component.
-                 *
-                 * @returns {*|jQuery|HTMLElement}
-                 */
-                getElement: function () {
-                    return $('#template-component');
-                },
-    
-                /**
-                 * Enable the component.
-                 */
-                enabled: function () {
-                    this.getElement().attr('disabled', false);
-                },
-    
-                /**
-                 * Disable the component.
-                 */
-                disabled: function () {
-                    this.getElement().attr('disabled', true);
-                },
-    
-                /**
-                 * Handler function for when component is dropped on the canvas.
-                 *
-                 * @argument {object} pt        The point that the component was dropped.
-                 */
-                dropHandler: function (pt) {
-                    this.promptForTemplate(pt);
-                },
-    
-                /**
-                 * The drag icon for the toolbox component.
-                 *
-                 * @param event
-                 * @returns {*|jQuery|HTMLElement}
-                 */
-                dragIcon: function (event) {
-                    return $('<div class="icon icon-template-add"></div>');
-                },
-    
-                /**
-                 * Prompts the user to select a template.
-                 *
-                 * @argument {object} pt        The point that the template was dropped.
-                 */
-                promptForTemplate: function (pt) {
-                  var templateComponent = this;
-                    $.ajax({
-                        type: 'GET',
-                        url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/flow/templates',
-                        dataType: 'json'
-                    }).done(function (response) {
-                        var templates = response.templates;
-                      if (nfCommon.isDefinedAndNotNull(templates) && templates.length > 0) {
-                          // sort the templates
-                          templates = templates.sort(function (one, two) {
-                              var oneDate = nfCommon.parseDateTime(one.template.timestamp);
-                              var twoDate = nfCommon.parseDateTime(two.template.timestamp);
-  
-                              // newest templates first
-                              return twoDate.getTime() - oneDate.getTime();
-                          });
-  
-                            var options = [];
-                            $.each(templates, function (_, templateEntity) {
-                                if (templateEntity.permissions.canRead === true) {
-                                    options.push({
-                                        text: templateEntity.template.name,
-                                        value: templateEntity.id,
-                                      description: nfCommon.escapeHtml(templateEntity.template.description)
-                                    });
-                                }
-                            });
-    
-                            // configure the templates combo
-                            $('#available-templates').combo({
-                                maxHeight: 300,
-                                options: options
-                            });
-    
-                            // update the button model
-                          templateComponent.modal.update('setButtonModel', [{
-                          buttonText: nf._.msg('nf-template-component.Add'),
-                                color: {
-                                    base: '#728E9B',
-                                    hover: '#004849',
-                                    text: '#ffffff'
-                                },
-                                handler: {
-                                    click: function () {
-                                        // get the type of processor currently selected
-                                        var selectedOption = $('#available-templates').combo('getSelectedOption');
-                                        var templateId = selectedOption.value;
-    
-                                        // hide the dialog
-                                      templateComponent.modal.hide();
-    
-                                        // instantiate the specified template
-                                        createTemplate(templateId, pt);
-                                    }
-                                }
-                            },
-                                {
-                              buttonText: nf._.msg('nf-template-component.Cancel'),
-                                    color: {
-                                        base: '#E3E8EB',
-                                        hover: '#C7D2D7',
-                                        text: '#004849'
-                                    },
-                                    handler: {
-                                        click: function () {
-                                          templateComponent.modal.hide();
-                                        }
-                                    }
-                                }]);
-    
-                            // show the dialog
-                          templateComponent.modal.show();
-                        } else {
-                          nfDialog.showOkDialog({
-                          headerText: nf._.msg('nf-template-component.InstantiateTemplate'),
-                          dialogContent: nf._.msg('nf-template-component.InstantiateTemplateContent')
-                            });
-                        }
-    
-                  }).fail(nfErrorHandler.handleAjaxError);
-                }
-            }
-    
-            var templateComponent = new TemplateComponent();
-            return templateComponent;
-        };
-  }));
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
deleted file mode 100644
index 078af95d4198..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
+++ /dev/null
@@ -1,1724 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.CanvasUtils',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.Client',
-                  'nf.ErrorHandler',
-                  'nf.Clipboard',
-                  'nf.Snippet',
-                  'nf.GoTo',
-                  'nf.ng.Bridge',
-                  'nf.Shell',
-                  'nf.ComponentState',
-                  'nf.Draggable',
-                  'nf.Birdseye',
-                  'nf.Connection',
-                  'nf.Graph',
-                  'nf.ProcessGroupConfiguration',
-                  'nf.ProcessorConfiguration',
-                  'nf.ProcessorDetails',
-                  'nf.LabelConfiguration',
-                  'nf.RemoteProcessGroupConfiguration',
-                  'nf.RemoteProcessGroupDetails',
-                  'nf.PortConfiguration',
-                  'nf.PortDetails',
-                  'nf.ConnectionConfiguration',
-                  'nf.ConnectionDetails',
-                  'nf.PolicyManagement',
-                  'nf.RemoteProcessGroup',
-                  'nf.Label',
-                  'nf.Processor',
-                  'nf.RemoteProcessGroupPorts',
-                  'nf.QueueListing',
-                  'nf.StatusHistory'],
-              function ($, d3, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler, nfClipboard, nfSnippet, nfGoto, nfNgBridge, nfShell, nfComponentState, nfDraggable, nfBirdseye, nfConnection, nfGraph, nfProcessGroupConfiguration, nfProcessorConfiguration, nfProcessorDetails, nfLabelConfiguration, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupDetails, nfPortConfiguration, nfPortDetails, nfConnectionConfiguration, nfConnectionDetails, nfPolicyManagement, nfRemoteProcessGroup, nfLabel, nfProcessor, nfRemoteProcessGroupPorts, nfQueueListing, nfStatusHistory) {
-                  return (nf.Actions = factory($, d3, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler, nfClipboard, nfSnippet, nfGoto, nfNgBridge, nfShell, nfComponentState, nfDraggable, nfBirdseye, nfConnection, nfGraph, nfProcessGroupConfiguration, nfProcessorConfiguration, nfProcessorDetails, nfLabelConfiguration, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupDetails, nfPortConfiguration, nfPortDetails, nfConnectionConfiguration, nfConnectionDetails, nfPolicyManagement, nfRemoteProcessGroup, nfLabel, nfProcessor, nfRemoteProcessGroupPorts, nfQueueListing, nfStatusHistory));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.Actions =
-              factory(require('jquery'),
-                  require('d3'),
-                  require('nf.CanvasUtils'),
-                  require('nf.Common'),
-                  require('nf.Dialog'),
-                  require('nf.Client'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Clipboard'),
-                  require('nf.Snippet'),
-                  require('nf.GoTo'),
-                  require('nf.ng.Bridge'),
-                  require('nf.Shell'),
-                  require('nf.ComponentState'),
-                  require('nf.Draggable'),
-                  require('nf.Birdseye'),
-                  require('nf.Connection'),
-                  require('nf.Graph'),
-                  require('nf.ProcessGroupConfiguration'),
-                  require('nf.ProcessorConfiguration'),
-                  require('nf.ProcessorDetails'),
-                  require('nf.LabelConfiguration'),
-                  require('nf.RemoteProcessGroupConfiguration'),
-                  require('nf.RemoteProcessGroupDetails'),
-                  require('nf.PortConfiguration'),
-                  require('nf.PortDetails'),
-                  require('nf.ConnectionConfiguration'),
-                  require('nf.ConnectionDetails'),
-                  require('nf.PolicyManagement'),
-                  require('nf.RemoteProcessGroup'),
-                  require('nf.Label'),
-                  require('nf.Processor'),
-                  require('nf.RemoteProcessGroupPorts'),
-                  require('nf.QueueListing'),
-                  require('nf.StatusHistory')));
-      } else {
-          nf.Actions = factory(root.$,
-              root.d3,
-              root.nf.CanvasUtils,
-              root.nf.Common,
-              root.nf.Dialog,
-              root.nf.Client,
-              root.nf.ErrorHandler,
-              root.nf.Clipboard,
-              root.nf.Snippet,
-              root.nf.GoTo,
-              root.nf.ng.Bridge,
-              root.nf.Shell,
-              root.nf.ComponentState,
-              root.nf.Draggable,
-              root.nf.Birdseye,
-              root.nf.Connection,
-              root.nf.Graph,
-              root.nf.ProcessGroupConfiguration,
-              root.nf.ProcessorConfiguration,
-              root.nf.ProcessorDetails,
-              root.nf.LabelConfiguration,
-              root.nf.RemoteProcessGroupConfiguration,
-              root.nf.RemoteProcessGroupDetails,
-              root.nf.PortConfiguration,
-              root.nf.PortDetails,
-              root.nf.ConnectionConfiguration,
-              root.nf.ConnectionDetails,
-              root.nf.PolicyManagement,
-              root.nf.RemoteProcessGroup,
-              root.nf.Label,
-              root.nf.Processor,
-              root.nf.RemoteProcessGroupPorts,
-              root.nf.QueueListing,
-              root.nf.StatusHistory);
-      }
-  }(this, function ($, d3, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler, nfClipboard, nfSnippet, nfGoto, nfNgBridge, nfShell, nfComponentState, nfDraggable, nfBirdseye, nfConnection, nfGraph, nfProcessGroupConfiguration, nfProcessorConfiguration, nfProcessorDetails, nfLabelConfiguration, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupDetails, nfPortConfiguration, nfPortDetails, nfConnectionConfiguration, nfConnectionDetails, nfPolicyManagement, nfRemoteProcessGroup, nfLabel, nfProcessor, nfRemoteProcessGroupPorts, nfQueueListing, nfStatusHistory) {
-      'use strict';
-    
-        var config = {
-            urls: {
-                api: '../nifi-api',
-                controller: '../nifi-api/controller'
-            }
-        };
-    
-        /**
-         * Initializes the drop request status dialog.
-         */
-        var initializeDropRequestStatusDialog = function () {
-            // configure the drop request status dialog
-            $('#drop-request-status-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-                handler: {
-                    close: function () {
-                        // clear the current button model
-                        $('#drop-request-status-dialog').modal('setButtonModel', []);
-                    }
-                }
-            });
-        };
-    
-    
-        /**
-         * Updates the resource with the specified entity.
-         *
-         * @param {string} uri
-         * @param {object} entity
-         */
-        var updateResource = function (uri, entity) {
-            return $.ajax({
-                type: 'PUT',
-                url: uri,
-                data: JSON.stringify(entity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).fail(function (xhr, status, error) {
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-actions.UpdateResource'),
-                  dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                });
-            });
-        };
-    
-        // create a method for updating process groups and processors
-        var updateProcessGroup = function (response) {
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(response.id),
-                dataType: 'json'
-            }).done(function (response) {
-              nfGraph.set(response.processGroupFlow.flow);
-            });
-        };
-    
-      // determine if the source of this connection is part of the selection
-      var isSourceSelected = function (connection, selection) {
-          return selection.filter(function (d) {
-                  return nfCanvasUtils.getConnectionSourceComponentId(connection) === d.id;
-              }).size() > 0;
-      };
-  
-      var nfActions = {
-            /**
-             * Initializes the actions.
-             */
-            init: function () {
-                initializeDropRequestStatusDialog();
-            },
-    
-            /**
-             * Enters the specified process group.
-             *
-             * @param {selection} selection     The the currently selected component
-             */
-            enterGroup: function (selection) {
-              if (selection.size() === 1 && nfCanvasUtils.isProcessGroup(selection)) {
-                    var selectionData = selection.datum();
-                  nfCanvasUtils.getComponentByType('ProcessGroup').enterGroup(selectionData.id);
-                }
-            },
-    
-            /**
-             * Exits the current process group but entering the parent group.
-             */
-            leaveGroup: function () {
-              nfCanvasUtils.getComponentByType('ProcessGroup').enterGroup(nfCanvasUtils.getParentGroupId());
-            },
-    
-            /**
-             * Refresh the flow of the remote process group in the specified selection.
-             *
-             * @param {selection} selection
-             */
-            refreshRemoteFlow: function (selection) {
-              if (selection.size() === 1 && nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                    var d = selection.datum();
-                    var refreshTimestamp = d.component.flowRefreshed;
-    
-                    var setLastRefreshed = function (lastRefreshed) {
-                        // set the new value in case the component is redrawn during the refresh
-                        d.component.flowRefreshed = lastRefreshed;
-    
-                        // update the UI to show last refreshed if appropriate
-                        if (selection.classed('visible')) {
-                            selection.select('text.remote-process-group-last-refresh')
-                                .text(function () {
-                                    return lastRefreshed;
-                                });
-                        }
-                    };
-    
-                    var poll = function (nextDelay) {
-                        $.ajax({
-                            type: 'GET',
-                            url: d.uri,
-                            dataType: 'json'
-                        }).done(function (response) {
-                            var remoteProcessGroup = response.component;
-    
-                            // the timestamp has not updated yet, poll again
-                            if (refreshTimestamp === remoteProcessGroup.flowRefreshed) {
-                                schedule(nextDelay);
-                            } else {
-                              nfRemoteProcessGroup.set(response);
-    
-                                // reload the group's connections
-                              var connections = nfConnection.getComponentConnections(remoteProcessGroup.id);
-                                $.each(connections, function (_, connection) {
-                                    if (connection.permissions.canRead) {
-                                      nfConnection.reload(connection.id);
-                                    }
-                                });
-                            }
-                        });
-                    };
-    
-                    var schedule = function (delay) {
-                        if (delay <= 32) {
-                            setTimeout(function () {
-                                poll(delay * 2);
-                            }, delay * 1000);
-                        } else {
-                            // reset to the previous value since the contents could not be updated (set to null?)
-                            setLastRefreshed(refreshTimestamp);
-                        }
-                    };
-    
-                  setLastRefreshed(nf._.msg('nf-actions.Refreshing'));
-                    poll(1);
-                }
-            },
-    
-            /**
-             * Opens the remote process group in the specified selection.
-             *
-             * @param {selection} selection         The selection
-             */
-            openUri: function (selection) {
-              if (selection.size() === 1 && nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                    var selectionData = selection.datum();
-                    var uri = selectionData.component.targetUri;
-    
-                  if (!nfCommon.isBlank(uri)) {
-                        window.open(encodeURI(uri));
-                    } else {
-                      nfDialog.showOkDialog({
-                          headerText: nf._.msg('nf-actions.RemoteGroupProcess'),
-                          dialogContent: nf._.msg('nf-actions.NoTargetURIDefined')
-                        });
-                    }
-                }
-            },
-    
-            /**
-             * Shows and selects the source of the connection in the specified selection.
-             *
-             * @param {selection} selection     The selection
-             */
-            showSource: function (selection) {
-              if (selection.size() === 1 && nfCanvasUtils.isConnection(selection)) {
-                    var selectionData = selection.datum();
-    
-                    // the source is in the current group
-                  if (selectionData.sourceGroupId === nfCanvasUtils.getGroupId()) {
-                        var source = d3.select('#id-' + selectionData.sourceId);
-                      nfActions.show(source);
-                    } else if (selectionData.sourceType === 'REMOTE_OUTPUT_PORT') {
-                        // if the source is remote
-                        var remoteSource = d3.select('#id-' + selectionData.sourceGroupId);
-                      nfActions.show(remoteSource);
-                    } else {
-                        // if the source is local but in a sub group
-                      nfCanvasUtils.showComponent(selectionData.sourceGroupId, selectionData.sourceId);
-                    }
-                }
-            },
-    
-            /**
-             * Shows and selects the destination of the connection in the specified selection.
-             *
-             * @param {selection} selection     The selection
-             */
-            showDestination: function (selection) {
-              if (selection.size() === 1 && nfCanvasUtils.isConnection(selection)) {
-                    var selectionData = selection.datum();
-    
-                    // the destination is in the current group or its remote
-                  if (selectionData.destinationGroupId === nfCanvasUtils.getGroupId()) {
-                        var destination = d3.select('#id-' + selectionData.destinationId);
-                      nfActions.show(destination);
-                    } else if (selectionData.destinationType === 'REMOTE_INPUT_PORT') {
-                        // if the destination is remote
-                        var remoteDestination = d3.select('#id-' + selectionData.destinationGroupId);
-                      nfActions.show(remoteDestination);
-                    } else {
-                        // if the destination is local but in a sub group
-                      nfCanvasUtils.showComponent(selectionData.destinationGroupId, selectionData.destinationId);
-                    }
-                }
-            },
-    
-            /**
-             * Shows the downstream components from the specified selection.
-             *
-             * @param {selection} selection     The selection
-             */
-            showDownstream: function (selection) {
-              if (selection.size() === 1 && !nfCanvasUtils.isConnection(selection)) {
-    
-                    // open the downstream dialog according to the selection
-                  if (nfCanvasUtils.isProcessor(selection)) {
-                      nfGoto.showDownstreamFromProcessor(selection);
-                  } else if (nfCanvasUtils.isFunnel(selection)) {
-                      nfGoto.showDownstreamFromFunnel(selection);
-                  } else if (nfCanvasUtils.isInputPort(selection)) {
-                      nfGoto.showDownstreamFromInputPort(selection);
-                  } else if (nfCanvasUtils.isOutputPort(selection)) {
-                      nfGoto.showDownstreamFromOutputPort(selection);
-                  } else if (nfCanvasUtils.isProcessGroup(selection) || nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                      nfGoto.showDownstreamFromGroup(selection);
-                    }
-                }
-            },
-    
-            /**
-             * Shows the upstream components from the specified selection.
-             *
-             * @param {selection} selection     The selection
-             */
-            showUpstream: function (selection) {
-              if (selection.size() === 1 && !nfCanvasUtils.isConnection(selection)) {
-    
-                    // open the downstream dialog according to the selection
-                  if (nfCanvasUtils.isProcessor(selection)) {
-                      nfGoto.showUpstreamFromProcessor(selection);
-                  } else if (nfCanvasUtils.isFunnel(selection)) {
-                      nfGoto.showUpstreamFromFunnel(selection);
-                  } else if (nfCanvasUtils.isInputPort(selection)) {
-                      nfGoto.showUpstreamFromInputPort(selection);
-                  } else if (nfCanvasUtils.isOutputPort(selection)) {
-                      nfGoto.showUpstreamFromOutputPort(selection);
-                  } else if (nfCanvasUtils.isProcessGroup(selection) || nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                      nfGoto.showUpstreamFromGroup(selection);
-                    }
-                }
-            },
-    
-            /**
-             * Shows and selects the component in the specified selection.
-             *
-             * @param {selection} selection     The selection
-             */
-            show: function (selection) {
-                if (selection.size() === 1) {
-                    // deselect the current selection
-                  var currentlySelected = nfCanvasUtils.getSelection();
-                    currentlySelected.classed('selected', false);
-    
-                    // select only the component/connection in question
-                    selection.classed('selected', true);
-                  nfActions.center(selection);
-  
-                  // inform Angular app that values have changed
-                  nfNgBridge.digest();
-                }
-            },
-    
-            /**
-             * Selects all components in the specified selection.
-             *
-             * @param {selection} selection     Selection of components to select
-             */
-            select: function (selection) {
-                selection.classed('selected', true);
-            },
-    
-            /**
-             * Selects all components.
-             */
-            selectAll: function () {
-              nfActions.select(d3.selectAll('g.component, g.connection'));
-            },
-    
-            /**
-             * Centers the component in the specified selection.
-             *
-             * @argument {selection} selection      The selection
-             */
-            center: function (selection) {
-                if (selection.size() === 1) {
-                    var box;
-                  if (nfCanvasUtils.isConnection(selection)) {
-                        var x, y;
-                        var d = selection.datum();
-    
-                        // get the position of the connection label
-                        if (d.bends.length > 0) {
-                            var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1);
-                            x = d.bends[i].x;
-                            y = d.bends[i].y;
-                        } else {
-                            x = (d.start.x + d.end.x) / 2;
-                            y = (d.start.y + d.end.y) / 2;
-                        }
-    
-                        box = {
-                            x: x,
-                            y: y,
-                            width: 1,
-                            height: 1
-                        };
-                    } else {
-                        var selectionData = selection.datum();
-                        var selectionPosition = selectionData.position;
-    
-                        box = {
-                            x: selectionPosition.x,
-                            y: selectionPosition.y,
-                            width: selectionData.dimensions.width,
-                            height: selectionData.dimensions.height
-                        };
-                    }
-    
-                    // center on the component
-                  nfCanvasUtils.centerBoundingBox(box);
-    
-                    // refresh the canvas
-                  nfCanvasUtils.refreshCanvasView({
-                        transition: true
-                    });
-                }
-            },
-    
-            /**
-             * Enables all eligible selected components.
-             *
-             * @argument {selection} selection      The selection
-             */
-            enable: function (selection) {
-              var componentsToEnable = nfCanvasUtils.filterEnable(selection);
-    
-                if (componentsToEnable.empty()) {
-                  nfDialog.showOkDialog({
-                      headerText: nf._.msg('nf-actions.Header1'),
-                      dialogContent: nf._.msg('nf-actions.Message1')
-                    });
-                } else {
-                    var enableRequests = [];
-    
-                    // enable the selected processors
-                    componentsToEnable.each(function (d) {
-                        var selected = d3.select(this);
-    
-                        // build the entity
-                        var entity = {
-                          'revision': nfClient.getRevision(d),
-                            'component': {
-                                'id': d.id,
-                                'state': 'STOPPED'
-                            }
-                        };
-    
-                        enableRequests.push(updateResource(d.uri, entity).done(function (response) {
-                          nfCanvasUtils.getComponentByType(d.type).set(response);
-                        }));
-                    });
-    
-                    // inform Angular app once the updates have completed
-                    if (enableRequests.length > 0) {
-                        $.when.apply(window, enableRequests).always(function () {
-                          nfNgBridge.digest();
-                        });
-                    }
-                }
-            },
-    
-            /**
-             * Disables all eligible selected components.
-             *
-             * @argument {selection} selection      The selection
-             */
-            disable: function (selection) {
-              var componentsToDisable = nfCanvasUtils.filterDisable(selection);
-    
-                if (componentsToDisable.empty()) {
-                  nfDialog.showOkDialog({
-                      headerText: nf._.msg('nf-actions.Header2'),
-                      dialogContent: nf._.msg('nf-actions.Message2')
-                    });
-                } else {
-                    var disableRequests = [];
-    
-                    // disable the selected components
-                    componentsToDisable.each(function (d) {
-                        var selected = d3.select(this);
-    
-                        // build the entity
-                        var entity = {
-                          'revision': nfClient.getRevision(d),
-                            'component': {
-                                'id': d.id,
-                                'state': 'DISABLED'
-                            }
-                        };
-    
-                        disableRequests.push(updateResource(d.uri, entity).done(function (response) {
-                          nfCanvasUtils.getComponentByType(d.type).set(response);
-                        }));
-                    });
-    
-                    // inform Angular app once the updates have completed
-                    if (disableRequests.length > 0) {
-                        $.when.apply(window, disableRequests).always(function () {
-                          nfNgBridge.digest();
-                        });
-                    }
-                }
-            },
-    
-            /**
-             * Opens provenance with the component in the specified selection.
-             *
-             * @argument {selection} selection The selection
-             */
-            openProvenance: function (selection) {
-                if (selection.size() === 1) {
-                    var selectionData = selection.datum();
-    
-                    // open the provenance page with the specified component
-                  nfShell.showPage('provenance?' + $.param({
-                            componentId: selectionData.id
-                        }));
-                }
-            },
-    
-            /**
-             * Starts the components in the specified selection.
-             *
-             * @argument {selection} selection      The selection
-             */
-            start: function (selection) {
-                if (selection.empty()) {
-                    // build the entity
-                    var entity = {
-                      'id': nfCanvasUtils.getGroupId(),
-                        'state': 'RUNNING'
-                    };
-    
-                  updateResource(config.urls.api + '/flow/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()), entity).done(updateProcessGroup);
-                } else {
-                    var componentsToStart = selection.filter(function (d) {
-                      return nfCanvasUtils.isRunnable(d3.select(this));
-                    });
-    
-                    // ensure there are startable components selected
-                    if (componentsToStart.empty()) {
-                      nfDialog.showOkDialog({
-                          headerText: nf._.msg('nf-actions.Header3'),
-                          dialogContent: nf._.msg('nf-actions.Message3')
-                        });
-                    } else {
-                        var startRequests = [];
-    
-                        // start each selected component
-                        componentsToStart.each(function (d) {
-                            var selected = d3.select(this);
-    
-                            // prepare the request
-                            var uri, entity;
-                          if (nfCanvasUtils.isProcessGroup(selected)) {
-                                uri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(d.id);
-                                entity = {
-                                    'id': d.id,
-                                    'state': 'RUNNING'
-                                }
-                            } else {
-                                uri = d.uri;
-                                entity = {
-                                  'revision': nfClient.getRevision(d),
-                                    'component': {
-                                        'id': d.id,
-                                        'state': 'RUNNING'
-                                    }
-                                };
-                            }
-    
-                            startRequests.push(updateResource(uri, entity).done(function (response) {
-                              if (nfCanvasUtils.isProcessGroup(selected)) {
-                                  nfCanvasUtils.getComponentByType('ProcessGroup').reload(d.id);
-                                } else {
-                                  nfCanvasUtils.getComponentByType(d.type).set(response);
-                                }
-                            }));
-                        });
-    
-                        // inform Angular app once the updates have completed
-                        if (startRequests.length > 0) {
-                            $.when.apply(window, startRequests).always(function () {
-                              nfNgBridge.digest();
-                            });
-                        }
-                    }
-                }
-            },
-    
-            /**
-             * Stops the components in the specified selection.
-             *
-             * @argument {selection} selection      The selection
-             */
-            stop: function (selection) {
-                if (selection.empty()) {
-                    // build the entity
-                    var entity = {
-                      'id': nfCanvasUtils.getGroupId(),
-                        'state': 'STOPPED'
-                    };
-    
-                  updateResource(config.urls.api + '/flow/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()), entity).done(updateProcessGroup);
-                } else {
-                    var componentsToStop = selection.filter(function (d) {
-                      return nfCanvasUtils.isStoppable(d3.select(this));
-                    });
-    
-                    // ensure there are some component to stop
-                    if (componentsToStop.empty()) {
-                      nfDialog.showOkDialog({
-                          headerText: nf._.msg('nf-actions.Header4'),
-                          dialogContent: nf._.msg('nf-actions.Message4')
-                        });
-                    } else {
-                        var stopRequests = [];
-    
-                        // stop each selected component
-                        componentsToStop.each(function (d) {
-                            var selected = d3.select(this);
-    
-                            // prepare the request
-                            var uri, entity;
-                          if (nfCanvasUtils.isProcessGroup(selected)) {
-                                uri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(d.id);
-                                entity = {
-                                    'id': d.id,
-                                    'state': 'STOPPED'
-                                };
-                            } else {
-                                uri = d.uri;
-                                entity = {
-                                  'revision': nfClient.getRevision(d),
-                                    'component': {
-                                        'id': d.id,
-                                        'state': 'STOPPED'
-                                    }
-                                };
-                            }
-    
-                            stopRequests.push(updateResource(uri, entity).done(function (response) {
-                              if (nfCanvasUtils.isProcessGroup(selected)) {
-                                  nfCanvasUtils.getComponentByType('ProcessGroup').reload(d.id);
-                                } else {
-                                  nfCanvasUtils.getComponentByType(d.type).set(response);
-                                }
-                            }));
-                        });
-    
-                        // inform Angular app once the updates have completed
-                        if (stopRequests.length > 0) {
-                            $.when.apply(window, stopRequests).always(function () {
-                              nfNgBridge.digest();
-                            });
-                        }
-                    }
-                }
-            },
-    
-            /**
-             * Enables transmission for the components in the specified selection.
-             *
-             * @argument {selection} selection      The selection
-             */
-            enableTransmission: function (selection) {
-                var componentsToEnable = selection.filter(function (d) {
-                  return nfCanvasUtils.canStartTransmitting(d3.select(this));
-                });
-    
-                // start each selected component
-                componentsToEnable.each(function (d) {
-                    // build the entity
-                    var entity = {
-                      'revision': nfClient.getRevision(d),
-                        'component': {
-                            'id': d.id,
-                            'transmitting': true
-                        }
-                    };
-    
-                    // start transmitting
-                    updateResource(d.uri, entity).done(function (response) {
-                      nfRemoteProcessGroup.set(response);
-                    });
-                });
-            },
-    
-            /**
-             * Disables transmission for the components in the specified selection.
-             *
-             * @argument {selection} selection      The selection
-             */
-            disableTransmission: function (selection) {
-                var componentsToDisable = selection.filter(function (d) {
-                  return nfCanvasUtils.canStopTransmitting(d3.select(this));
-                });
-    
-                // stop each selected component
-                componentsToDisable.each(function (d) {
-                    // build the entity
-                    var entity = {
-                      'revision': nfClient.getRevision(d),
-                        'component': {
-                            'id': d.id,
-                            'transmitting': false
-                        }
-                    };
-    
-                    updateResource(d.uri, entity).done(function (response) {
-                      nfRemoteProcessGroup.set(response);
-                    });
-                });
-            },
-    
-            /**
-             * Shows the configuration dialog for the specified selection.
-             *
-             * @param {selection} selection     Selection of the component to be configured
-             */
-            showConfiguration: function (selection) {
-                if (selection.empty()) {
-                  nfProcessGroupConfiguration.showConfiguration(nfCanvasUtils.getGroupId());
-                } else if (selection.size() === 1) {
-                    var selectionData = selection.datum();
-                  if (nfCanvasUtils.isProcessor(selection)) {
-                      nfProcessorConfiguration.showConfiguration(selection);
-                  } else if (nfCanvasUtils.isLabel(selection)) {
-                      nfLabelConfiguration.showConfiguration(selection);
-                  } else if (nfCanvasUtils.isProcessGroup(selection)) {
-                      nfProcessGroupConfiguration.showConfiguration(selectionData.id);
-                  } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                      nfRemoteProcessGroupConfiguration.showConfiguration(selection);
-                  } else if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
-                      nfPortConfiguration.showConfiguration(selection);
-                  } else if (nfCanvasUtils.isConnection(selection)) {
-                      nfConnectionConfiguration.showConfiguration(selection);
-                    }
-                }
-            },
-    
-            /**
-             * Opens the policy management page for the selected component.
-             *
-             * @param selection
-             */
-            managePolicies: function(selection) {
-                if (selection.size() <= 1) {
-                  nfPolicyManagement.showComponentPolicy(selection);
-                }
-            },
-    
-            // Defines an action for showing component details (like configuration but read only).
-            showDetails: function (selection) {
-                if (selection.empty()) {
-                  nfProcessGroupConfiguration.showConfiguration(nfCanvasUtils.getGroupId());
-                } else if (selection.size() === 1) {
-                    var selectionData = selection.datum();
-                  if (nfCanvasUtils.isProcessor(selection)) {
-                      nfProcessorDetails.showDetails(nfCanvasUtils.getGroupId(), selectionData.id);
-                  } else if (nfCanvasUtils.isProcessGroup(selection)) {
-                      nfProcessGroupConfiguration.showConfiguration(selectionData.id);
-                  } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                      nfRemoteProcessGroupDetails.showDetails(selection);
-                  } else if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
-                      nfPortDetails.showDetails(selection);
-                  } else if (nfCanvasUtils.isConnection(selection)) {
-                      nfConnectionDetails.showDetails(nfCanvasUtils.getGroupId(), selectionData.id);
-                    }
-                }
-            },
-    
-            /**
-             * Shows the usage documentation for the component in the specified selection.
-             *
-             * @param {selection} selection     The selection
-             */
-            showUsage: function (selection) {
-              if (selection.size() === 1 && nfCanvasUtils.isProcessor(selection)) {
-                    var selectionData = selection.datum();
-                  nfShell.showPage('../nifi-docs/documentation?' + $.param({
-                          select: nfCommon.substringAfterLast(selectionData.component.type, '.')
-                        }));
-                }
-            },
-    
-            /**
-             * Shows the stats for the specified selection.
-             *
-             * @argument {selection} selection      The selection
-             */
-            showStats: function (selection) {
-                if (selection.size() === 1) {
-                    var selectionData = selection.datum();
-                  if (nfCanvasUtils.isProcessor(selection)) {
-                      nfStatusHistory.showProcessorChart(nfCanvasUtils.getGroupId(), selectionData.id);
-                  } else if (nfCanvasUtils.isProcessGroup(selection)) {
-                      nfStatusHistory.showProcessGroupChart(nfCanvasUtils.getGroupId(), selectionData.id);
-                  } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                      nfStatusHistory.showRemoteProcessGroupChart(nfCanvasUtils.getGroupId(), selectionData.id);
-                  } else if (nfCanvasUtils.isConnection(selection)) {
-                      nfStatusHistory.showConnectionChart(nfCanvasUtils.getGroupId(), selectionData.id);
-                    }
-                }
-            },
-    
-            /**
-             * Opens the remote ports dialog for the remote process group in the specified selection.
-             *
-             * @param {selection} selection         The selection
-             */
-            remotePorts: function (selection) {
-              if (selection.size() === 1 && nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                  nfRemoteProcessGroupPorts.showPorts(selection);
-                }
-            },
-    
-            /**
-             * Reloads the status for the entire canvas (components and flow.)
-             */
-            reload: function () {
-              nfCanvasUtils.reload({
-                    'transition': true
-                });
-            },
-    
-            /**
-             * Deletes the component in the specified selection.
-             *
-             * @param {selection} selection     The selection containing the component to be removed
-             */
-            'delete': function (selection) {
-              if (nfCommon.isUndefined(selection) || selection.empty()) {
-                  nfDialog.showOkDialog({
-                      headerText: nf._.msg('nf-actions.Header5'),
-                      dialogContent: nf._.msg('nf-actions.Message5')
-                    });
-                } else {
-                    if (selection.size() === 1) {
-                        var selectionData = selection.datum();
-                      var revision = nfClient.getRevision(selectionData);
-    
-                        $.ajax({
-                            type: 'DELETE',
-                            url: selectionData.uri + '?' + $.param({
-                                version: revision.version,
-                                clientId: revision.clientId
-                            }),
-                            dataType: 'json'
-                        }).done(function (response) {
-                            // remove the component/connection in question
-                          nfCanvasUtils.getComponentByType(selectionData.type).remove(selectionData.id);
-    
-                            // if the selection is a connection, reload the source and destination accordingly
-                          if (nfCanvasUtils.isConnection(selection) === false) {
-                              var connections = nfConnection.getComponentConnections(selectionData.id);
-                                if (connections.length > 0) {
-                                    var ids = [];
-                                    $.each(connections, function (_, connection) {
-                                        ids.push(connection.id);
-                                    });
-    
-                                    // remove the corresponding connections
-                                  nfConnection.remove(ids);
-                                }
-                            }
-    
-                            // refresh the birdseye
-                          nfBirdseye.refresh();
-                            // inform Angular app values have changed
-                          nfNgBridge.digest();
-                      }).fail(nfErrorHandler.handleAjaxError);
-                    } else {
-                      var parentGroupId = nfCanvasUtils.getGroupId();
-  
-                        // create a snippet for the specified component and link to the data flow
-                      var snippet = nfSnippet.marshal(selection, parentGroupId);
-                      nfSnippet.create(snippet).done(function (response) {
-                            // remove the snippet, effectively removing the components
-                          nfSnippet.remove(response.snippet.id).done(function () {
-                                var components = d3.map();
-    
-                                // add the id to the type's array
-                                var addComponent = function (type, id) {
-                                    if (!components.has(type)) {
-                                        components.set(type, []);
-                                    }
-                                    components.get(type).push(id);
-                                };
-    
-                                // go through each component being removed
-                                selection.each(function (d) {
-                                    // remove the corresponding entry
-                                    addComponent(d.type, d.id);
-    
-                                    // if this is not a connection, see if it has any connections that need to be removed
-                                    if (d.type !== 'Connection') {
-                                      var connections = nfConnection.getComponentConnections(d.id);
-                                        if (connections.length > 0) {
-                                            $.each(connections, function (_, connection) {
-                                                addComponent('Connection', connection.id);
-                                            });
-                                        }
-                                    }
-                                });
-    
-                                // remove all the non connections in the snippet first
-                                components.forEach(function (type, ids) {
-                                    if (type !== 'Connection') {
-                                      nfCanvasUtils.getComponentByType(type).remove(ids);
-                                    }
-                                });
-    
-                                // then remove all the connections
-                                if (components.has('Connection')) {
-                                  nfConnection.remove(components.get('Connection'));
-                                }
-    
-                                // refresh the birdseye
-                              nfBirdseye.refresh();
-    
-                                // inform Angular app values have changed
-                              nfNgBridge.digest();
-                          }).fail(nfErrorHandler.handleAjaxError);
-                      }).fail(nfErrorHandler.handleAjaxError);
-                    }
-                }
-            },
-    
-            /**
-             * Deletes the flow files in the specified connection.
-             *
-             * @param {type} selection
-             */
-            emptyQueue: function (selection) {
-              if (selection.size() !== 1 || !nfCanvasUtils.isConnection(selection)) {
-                    return;
-                }
-    
-                // prompt the user before emptying the queue
-              nfDialog.showYesNoDialog({
-                  headerText: nf._.msg('nf-actions.EmptyQueue'),
-                  dialogContent: nf._.msg('nf-actions.Message6'),
-                  noText: nf._.msg('nf-actions.Cancel'),
-                  yesText: nf._.msg('nf-actions.Empty'),
-                    yesHandler: function () {
-                        // get the connection data
-                        var connection = selection.datum();
-    
-                        var MAX_DELAY = 4;
-                        var cancelled = false;
-                        var dropRequest = null;
-                        var dropRequestTimer = null;
-    
-                        // updates the progress bar
-                        var updateProgress = function (percentComplete) {
-                            // remove existing labels
-                            var progressBar = $('#drop-request-percent-complete');
-                            progressBar.find('div.progress-label').remove();
-                            progressBar.find('md-progress-linear').remove();
-    
-                            // update the progress bar
-                            var label = $('<div class="progress-label"></div>').text(percentComplete + '%');
-                          (nfNgBridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + percentComplete + '" class="md-hue-2" md-mode="determinate" aria-label="Drop request percent complete"></md-progress-linear>'))(nfNgBridge.rootScope)).appendTo(progressBar);
-                            progressBar.append(label);
-                        };
-    
-                        // update the button model of the drop request status dialog
-                        $('#drop-request-status-dialog').modal('setButtonModel', [{
-                          buttonText: nf._.msg('nf-actions.Stop'),
-                            color: {
-                                base: '#728E9B',
-                                hover: '#004849',
-                                text: '#ffffff'
-                            },
-                            handler: {
-                                click: function () {
-                                    cancelled = true;
-    
-                                    // we are waiting for the next poll attempt
-                                    if (dropRequestTimer !== null) {
-                                        // cancel it
-                                        clearTimeout(dropRequestTimer);
-    
-                                        // cancel the drop request
-                                        completeDropRequest();
-                                    }
-                                }
-                            }
-                        }]);
-    
-                        // completes the drop request by removing it and showing how many flowfiles were deleted
-                        var completeDropRequest = function () {
-                          // reload the connection status
-                          nfConnection.reloadStatus(connection.id);
-  
-                          // clean up as appropriate
-                          if (nfCommon.isDefinedAndNotNull(dropRequest)) {
-                                $.ajax({
-                                    type: 'DELETE',
-                                    url: dropRequest.uri,
-                                    dataType: 'json'
-                                }).done(function (response) {
-                                    // report the results of this drop request
-                                    dropRequest = response.dropRequest;
-    
-                                    // build the results
-                                    var droppedTokens = dropRequest.dropped.split(/ \/ /);
-                                    var results = $('<div></div>');
-                                    $('<span class="label"></span>').text(droppedTokens[0]).appendTo(results);
-                                  $('<span></span>').text(nf._.msg('nf-actions.Message15')+' (' + droppedTokens[1] + ')').appendTo(results);
-    
-                                    // if the request did not complete, include the original
-                                    if (dropRequest.percentCompleted < 100) {
-                                        var originalTokens = dropRequest.original.split(/ \/ /);
-                                      $('<span class="label"></span>').text(nf._.msg('nf-actions.Message16') + originalTokens[0]).appendTo(results) + nf._.msg('nf-actions.Message17');
-                                        $('<span></span>').text(' (' + originalTokens[1] + ')').appendTo(results);
-                                    }
-                                  $('<span></span>').text(nf._.msg('nf-actions.Message18')).appendTo(results);
-    
-                                    // if this request failed so the error
-                                  if (nfCommon.isDefinedAndNotNull(dropRequest.failureReason)) {
-                                        $('<br/><br/><span></span>').text(dropRequest.failureReason).appendTo(results);
-                                    }
-    
-                                    // display the results
-                                  nfDialog.showOkDialog({
-                                      headerText: nf._.msg('nf-actions.EmptyQueue'),
-                                        dialogContent: results
-                                    });
-                                }).always(function () {
-                                    $('#drop-request-status-dialog').modal('hide');
-                                });
-                            } else {
-                                // nothing was removed
-                              nfDialog.showOkDialog({
-                                  headerText: nf._.msg('nf-actions.EmptyQueue'),
-                                  dialogContent: nf._.msg('nf-actions.Message8')
-                                });
-    
-                                // close the dialog
-                                $('#drop-request-status-dialog').modal('hide');
-                            }
-                        };
-    
-                        // process the drop request
-                        var processDropRequest = function (delay) {
-                            // update the percent complete
-                            updateProgress(dropRequest.percentCompleted);
-    
-                            // update the status of the drop request
-                            $('#drop-request-status-message').text(dropRequest.state);
-    
-                            // close the dialog if the
-                            if (dropRequest.finished === true || cancelled === true) {
-                                completeDropRequest();
-                            } else {
-                                // wait delay to poll again
-                                dropRequestTimer = setTimeout(function () {
-                                    // clear the drop request timer
-                                    dropRequestTimer = null;
-    
-                                    // schedule to poll the status again in nextDelay
-                                    pollDropRequest(Math.min(MAX_DELAY, delay * 2));
-                                }, delay * 1000);
-                            }
-                        };
-    
-                        // schedule for the next poll iteration
-                        var pollDropRequest = function (nextDelay) {
-                            $.ajax({
-                                type: 'GET',
-                                url: dropRequest.uri,
-                                dataType: 'json'
-                            }).done(function (response) {
-                                dropRequest = response.dropRequest;
-                                processDropRequest(nextDelay);
-                            }).fail(function (xhr, status, error) {
-                                if (xhr.status === 403) {
-                                  nfErrorHandler.handleAjaxError(xhr, status, error);
-                                } else {
-                                    completeDropRequest()
-                                }
-                            });
-                        };
-    
-                        // issue the request to delete the flow files
-                        $.ajax({
-                            type: 'POST',
-                            url: '../nifi-api/flowfile-queues/' + encodeURIComponent(connection.id) + '/drop-requests',
-                            dataType: 'json',
-                            contentType: 'application/json'
-                        }).done(function (response) {
-                            // initialize the progress bar value
-                            updateProgress(0);
-    
-                            // show the progress dialog
-                            $('#drop-request-status-dialog').modal('show');
-    
-                            // process the drop request
-                            dropRequest = response.dropRequest;
-                            processDropRequest(1);
-                        }).fail(function (xhr, status, error) {
-                            if (xhr.status === 403) {
-                              nfErrorHandler.handleAjaxError(xhr, status, error);
-                            } else {
-                                completeDropRequest()
-                            }
-                        });
-                    }
-                });
-            },
-    
-            /**
-             * Lists the flow files in the specified connection.
-             *
-             * @param {selection} selection
-             */
-            listQueue: function (selection) {
-              if (selection.size() !== 1 || !nfCanvasUtils.isConnection(selection)) {
-                    return;
-                }
-    
-                // get the connection data
-                var connection = selection.datum();
-    
-                // list the flow files in the specified connection
-              nfQueueListing.listQueue(connection);
-            },
-    
-            /**
-             * Views the state for the specified processor.
-             *
-             * @param {selection} selection
-             */
-            viewState: function (selection) {
-              if (selection.size() !== 1 || !nfCanvasUtils.isProcessor(selection)) {
-                    return;
-                }
-    
-                // get the processor data
-                var processor = selection.datum();
-    
-                // view the state for the selected processor
-              nfComponentState.showState(processor, nfCanvasUtils.isConfigurable(selection));
-          },
-  
-          /**
-           * Aligns the components in the specified selection vertically along the center of the components.
-           *
-           * @param {array} selection      The selection
-           */
-          alignVertical: function (selection) {
-              var updates = d3.map();
-              // ensure every component is writable
-              if (nfCanvasUtils.canModify(selection) === false) {
-                  nfDialog.showOkDialog({
-                      headerText: 'Component Position',
-                      dialogContent: 'Must be authorized to modify every component selected.'
-                  });
-                  return;
-              }
-              // determine the extent
-              var minX = null, maxX = null;
-              selection.each(function (d) {
-                  if (d.type !== "Connection") {
-                      if (minX === null || d.position.x < minX) {
-                          minX = d.position.x;
-                      }
-                      var componentMaxX = d.position.x + d.dimensions.width;
-                      if (maxX === null || componentMaxX > maxX) {
-                          maxX = componentMaxX;
-                      }
-                  }
-              });
-              var center = (minX + maxX) / 2;
-  
-              // align all components left
-              selection.each(function(d) {
-                  if (d.type !== "Connection") {
-                      var delta = {
-                          x: center - (d.position.x + d.dimensions.width / 2),
-                          y: 0
-                      };
-                      // if this component is already centered, no need to updated it
-                      if (delta.x !== 0) {
-                          // consider any connections
-                          var connections = nfConnection.getComponentConnections(d.id);
-                          $.each(connections, function(_, connection) {
-                              var connectionSelection = d3.select('#id-' + connection.id);
-  
-                              if (!updates.has(connection.id) && nfCanvasUtils.getConnectionSourceComponentId(connection) === nfCanvasUtils.getConnectionDestinationComponentId(connection)) {
-                                  // this connection is self looping and hasn't been updated by the delta yet
-                                  var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
-                                  if (connectionUpdate !== null) {
-                                      updates.set(connection.id, connectionUpdate);
-                                  }
-                              } else if (!updates.has(connection.id) && connectionSelection.classed('selected') && nfCanvasUtils.canModify(connectionSelection)) {
-                                  // this is a selected connection that hasn't been updated by the delta yet
-                                  if (nfCanvasUtils.getConnectionSourceComponentId(connection) === d.id || !isSourceSelected(connection, selection)) {
-                                      // the connection is either outgoing or incoming when the source of the connection is not part of the selection
-                                      var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
-                                      if (connectionUpdate !== null) {
-                                          updates.set(connection.id, connectionUpdate);
-                                      }
-                                  }
-                              }
-                          });
-                          updates.set(d.id, nfDraggable.updateComponentPosition(d, delta));
-                      }
-                  }
-              });
-              nfDraggable.refreshConnections(updates);
-          },
-  
-          /**
-           * Aligns the components in the specified selection horizontally along the center of the components.
-           *
-           * @param {array} selection      The selection
-           */
-          alignHorizontal: function (selection) {
-              var updates = d3.map();
-              // ensure every component is writable
-              if (nfCanvasUtils.canModify(selection) === false) {
-                  nfDialog.showOkDialog({
-                      headerText: 'Component Position',
-                      dialogContent: 'Must be authorized to modify every component selected.'
-                  });
-                  return;
-              }
-  
-              // determine the extent
-              var minY = null, maxY = null;
-              selection.each(function (d) {
-                  if (d.type !== "Connection") {
-                      if (minY === null || d.position.y < minY) {
-                          minY = d.position.y;
-                      }
-                      var componentMaxY = d.position.y + d.dimensions.height;
-                      if (maxY === null || componentMaxY > maxY) {
-                          maxY = componentMaxY;
-                      }
-                  }
-              });
-              var center = (minY + maxY) / 2;
-  
-              // align all components with top most component
-              selection.each(function(d) {
-                  if (d.type !== "Connection") {
-                      var delta = {
-                          x: 0,
-                          y: center - (d.position.y + d.dimensions.height / 2)
-                      };
-  
-                      // if this component is already centered, no need to updated it
-                      if (delta.y !== 0) {
-                          // consider any connections
-                          var connections = nfConnection.getComponentConnections(d.id);
-                          $.each(connections, function(_, connection) {
-                              var connectionSelection = d3.select('#id-' + connection.id);
-  
-                              if (!updates.has(connection.id) && nfCanvasUtils.getConnectionSourceComponentId(connection) === nfCanvasUtils.getConnectionDestinationComponentId(connection)) {
-                                  // this connection is self looping and hasn't been updated by the delta yet
-                                  var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
-                                  if (connectionUpdate !== null) {
-                                      updates.set(connection.id, connectionUpdate);
-                                  }
-                              } else if (!updates.has(connection.id) && connectionSelection.classed('selected') && nfCanvasUtils.canModify(connectionSelection)) {
-                                  // this is a selected connection that hasn't been updated by the delta yet
-                                  if (nfCanvasUtils.getConnectionSourceComponentId(connection) === d.id || !isSourceSelected(connection, selection)) {
-                                      // the connection is either outgoing or incoming when the source of the connection is not part of the selection
-                                      var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
-                                      if (connectionUpdate !== null) {
-                                          updates.set(connection.id, connectionUpdate);
-                                      }
-                                  }
-                              }
-                          });
-                          updates.set(d.id, nfDraggable.updateComponentPosition(d, delta));
-                      }
-                  }
-              });
-  
-              nfDraggable.refreshConnections(updates);
-            },
-    
-            /**
-             * Opens the fill color dialog for the component in the specified selection.
-             *
-             * @param {type} selection      The selection
-             */
-            fillColor: function (selection) {
-              if (nfCanvasUtils.isColorable(selection)) {
-                    // we know that the entire selection is processors or labels... this
-                    // checks if the first item is a processor... if true, all processors
-                  var allProcessors = nfCanvasUtils.isProcessor(selection);
-    
-                    var color;
-                    if (allProcessors) {
-                      color = nfProcessor.defaultFillColor();
-                    } else {
-                      color = nfLabel.defaultColor();
-                    }
-    
-                    // if there is only one component selected, get its color otherwise use default
-                    if (selection.size() === 1) {
-                        var selectionData = selection.datum();
-    
-                        // use the specified color if appropriate
-                      if (nfCommon.isDefinedAndNotNull(selectionData.component.style['background-color'])) {
-                            color = selectionData.component.style['background-color'];
-                        }
-                    }
-    
-                    // set the color
-                    $('#fill-color').minicolors('value', color);
-    
-                    // update the preview visibility
-                    if (allProcessors) {
-                        $('#fill-color-processor-preview').show();
-                        $('#fill-color-label-preview').hide();
-                    } else {
-                        $('#fill-color-processor-preview').hide();
-                        $('#fill-color-label-preview').show();
-                    }
-    
-                    // show the dialog
-                    $('#fill-color-dialog').modal('show');
-                }
-            },
-    
-            /**
-             * Groups the currently selected components into a new group.
-             */
-            group: function () {
-              var selection = nfCanvasUtils.getSelection();
-    
-                // ensure that components have been specified
-                if (selection.empty()) {
-                    return;
-                }
-    
-                // determine the origin of the bounding box for the selected components
-              var origin = nfCanvasUtils.getOrigin(selection);
-    
-                var pt = {'x': origin.x, 'y': origin.y};
-              $.when(nfNgBridge.injector.get('groupComponent').promptForGroupName(pt)).done(function (processGroup) {
-                    var group = d3.select('#id-' + processGroup.id);
-                  nfCanvasUtils.moveComponents(selection, group);
-                });
-            },
-    
-            /**
-             * Moves the currently selected component into the current parent group.
-             */
-            moveIntoParent: function () {
-              var selection = nfCanvasUtils.getSelection();
-    
-                // ensure that components have been specified
-                if (selection.empty()) {
-                    return;
-                }
-    
-                // move the current selection into the parent group
-              nfCanvasUtils.moveComponentsToParent(selection);
-            },
-    
-            /**
-             * Uploads a new template.
-             */
-            uploadTemplate: function () {
-                $('#upload-template-dialog').modal('show');
-            },
-    
-            /**
-             * Creates a new template based off the currently selected components. If no components
-             * are selected, a template of the entire canvas is made.
-             */
-            template: function () {
-              var selection = nfCanvasUtils.getSelection();
-    
-                // if no components are selected, use the entire graph
-                if (selection.empty()) {
-                    selection = d3.selectAll('g.component, g.connection');
-                }
-    
-                // ensure that components have been specified
-                if (selection.empty()) {
-                  nfDialog.showOkDialog({
-                      headerText: nf._.msg('nf-actions.CreateTemplate'),
-                      dialogContent: nf._.msg('nf-actions.Message9')
-                    });
-                    return;
-                }
-    
-                // remove dangling edges (where only the source or destination is also selected)
-              selection = nfCanvasUtils.trimDanglingEdges(selection);
-    
-                // ensure that components specified are valid
-                if (selection.empty()) {
-                  nfDialog.showOkDialog({
-                      headerText: nf._.msg('nf-actions.CreateTemplate'),
-                      dialogContent: nf._.msg('nf-actions.Message9')
-                    });
-                    return;
-                }
-    
-                // prompt for the template name
-                $('#new-template-dialog').modal('setButtonModel', [{
-                  buttonText: nf._.msg('nf-actions.Create'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // get the template details
-                            var templateName = $('#new-template-name').val();
-    
-                            // ensure the template name is not blank
-                          if (nfCommon.isBlank(templateName)) {
-                              nfDialog.showOkDialog({
-                                  headerText: nf._.msg('nf-actions.CreateTemplate'),
-                                  dialogContent: nf._.msg('nf-actions.Message13')
-                                });
-                                return;
-                            }
-    
-                            // hide the dialog
-                            $('#new-template-dialog').modal('hide');
-    
-                            // get the description
-                            var templateDescription = $('#new-template-description').val();
-    
-                            // create a snippet
-                          var parentGroupId = nfCanvasUtils.getGroupId();
-                          var snippet = nfSnippet.marshal(selection, parentGroupId);
-    
-                            // create the snippet
-                          nfSnippet.create(snippet).done(function (response) {
-                                var createSnippetEntity = {
-                                    'name': templateName,
-                                    'description': templateDescription,
-                                    'snippetId': response.snippet.id
-                                };
-    
-                                // create the template
-                                $.ajax({
-                                    type: 'POST',
-                                  url: config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/templates',
-                                    data: JSON.stringify(createSnippetEntity),
-                                    dataType: 'json',
-                                    contentType: 'application/json'
-                                }).done(function () {
-                                    // show the confirmation dialog
-                                  nfDialog.showOkDialog({
-                                      headerText: nf._.msg('nf-actions.CreateTemplate'),
-                                      dialogContent: nf._.msg('nf-actions.Template')+"'" + nfCommon.escapeHtml(templateName) + "'"+nf._.msg('nf-actions.Message11')
-                                    });
-                                }).always(function () {
-                                    // clear the template dialog fields
-                                    $('#new-template-name').val('');
-                                    $('#new-template-description').val('');
-                              }).fail(nfErrorHandler.handleAjaxError);
-                          }).fail(nfErrorHandler.handleAjaxError);
-                        }
-                    }
-                }, {
-                  buttonText: nf._.msg('nf-actions.Cancel'),
-                    color: {
-                        base: '#E3E8EB',
-                        hover: '#C7D2D7',
-                        text: '#004849'
-                    },
-                    handler: {
-                        click: function () {
-                            // clear the template dialog fields
-                            $('#new-template-name').val('');
-                            $('#new-template-description').val('');
-    
-                            $('#new-template-dialog').modal('hide');
-                        }
-                    }
-                }]).modal('show');
-    
-                // auto focus on the template name
-                $('#new-template-name').focus();
-            },
-    
-            /**
-             * Copies the component in the specified selection.
-             *
-             * @param {selection} selection     The selection containing the component to be copied
-             */
-            copy: function (selection) {
-                if (selection.empty()) {
-                    return;
-                }
-    
-                // determine the origin of the bounding box of the selection
-              var origin = nfCanvasUtils.getOrigin(selection);
-    
-                // copy the snippet details
-              var parentGroupId = nfCanvasUtils.getGroupId();
-              nfClipboard.copy({
-                  snippet: nfSnippet.marshal(selection, parentGroupId),
-                    origin: origin
-                });
-            },
-    
-            /**
-             * Pastes the currently copied selection.
-             *
-             * @param {selection} selection     The selection containing the component to be copied
-             * @param {obj} evt                 The mouse event
-             */
-            paste: function (selection, evt) {
-              if (nfCommon.isDefinedAndNotNull(evt)) {
-                    // get the current scale and translation
-                  var scale = nfCanvasUtils.scaleCanvasView();
-                  var translate = nfCanvasUtils.translateCanvasView();
-    
-                    var mouseX = evt.pageX;
-                  var mouseY = evt.pageY - nfCanvasUtils.getCanvasOffset();
-    
-                    // adjust the x and y coordinates accordingly
-                    var x = (mouseX / scale) - (translate[0] / scale);
-                    var y = (mouseY / scale) - (translate[1] / scale);
-    
-                    // record the paste origin
-                    var pasteLocation = {
-                        x: x,
-                        y: y
-                    };
-                }
-    
-                // perform the paste
-              nfClipboard.paste().done(function (data) {
-                    var copySnippet = $.Deferred(function (deferred) {
-                        var reject = function (xhr, status, error) {
-                            deferred.reject(xhr.responseText);
-                        };
-    
-                      var destinationProcessGroupId = nfCanvasUtils.getGroupId();
-  
-                        // create a snippet from the details
-                      nfSnippet.create(data['snippet']).done(function (createResponse) {
-                            // determine the origin of the bounding box of the copy
-                            var origin = pasteLocation;
-                            var snippetOrigin = data['origin'];
-    
-                            // determine the appropriate origin
-                          if (!nfCommon.isDefinedAndNotNull(origin)) {
-                                snippetOrigin.x += 25;
-                                snippetOrigin.y += 25;
-                                origin = snippetOrigin;
-                            }
-    
-                            // copy the snippet to the new location
-                          nfSnippet.copy(createResponse.snippet.id, origin, destinationProcessGroupId).done(function (copyResponse) {
-                                var snippetFlow = copyResponse.flow;
-    
-                                // update the graph accordingly
-                              nfGraph.add(snippetFlow, {
-                                    'selectAll': true
-                                });
-    
-                                // update component visibility
-                              nfGraph.updateVisibility();
-    
-                                // refresh the birdseye/toolbar
-                              nfBirdseye.refresh();
-                            }).fail(function () {
-                                // an error occured while performing the copy operation, reload the
-                                // graph in case it was a partial success
-                              nfCanvasUtils.reload().done(function () {
-                                    // update component visibility
-                                  nfGraph.updateVisibility();
-    
-                                    // refresh the birdseye/toolbar
-                                  nfBirdseye.refresh();
-                                });
-                            }).fail(reject);
-                        }).fail(reject);
-                    }).promise();
-    
-                    // show the appropriate message is the copy fails
-                    copySnippet.fail(function (responseText) {
-                        // look for a message
-                      var message = nf._.msg('nf-actions.Message12');
-                        if ($.trim(responseText) !== '') {
-                            message = responseText;
-                        }
-    
-                      nfDialog.showOkDialog({
-                          headerText: nf._.msg('nf-actions.Header6'),
-                          dialogContent: nfCommon.escapeHtml(message)
-                        });
-                    });
-                });
-            },
-    
-            /**
-             * Moves the connection in the specified selection to the front.
-             *
-             * @param {selection} selection
-             */
-            toFront: function (selection) {
-              if (selection.size() !== 1 || !nfCanvasUtils.isConnection(selection)) {
-                    return;
-                }
-    
-                // get the connection data
-                var connection = selection.datum();
-    
-                // determine the current max zIndex
-                var maxZIndex = -1;
-              $.each(nfConnection.get(), function (_, otherConnection) {
-                    if (connection.id !== otherConnection.id && otherConnection.zIndex > maxZIndex) {
-                        maxZIndex = otherConnection.zIndex;
-                    }
-                });
-    
-                // ensure the edge wasn't already in front
-                if (maxZIndex >= 0) {
-                    // use one higher
-                    var zIndex = maxZIndex + 1;
-    
-                    // build the connection entity
-                    var connectionEntity = {
-                      'revision': nfClient.getRevision(connection),
-                        'component': {
-                            'id': connection.id,
-                            'zIndex': zIndex
-                        }
-                    };
-    
-                    // update the edge in question
-                    $.ajax({
-                        type: 'PUT',
-                        url: connection.uri,
-                        data: JSON.stringify(connectionEntity),
-                        dataType: 'json',
-                        contentType: 'application/json'
-                    }).done(function (response) {
-                      nfConnection.set(response);
-                    });
-                }
-            }
-        };
-    
-      return nfActions;
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js
deleted file mode 100644
index 4355e05a7b72..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js
+++ /dev/null
@@ -1,372 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Common',
-                'nf.CanvasUtils',
-                'nf.ContextMenu',
-                'nf.Label'],
-            function ($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel) {
-                return (nf.Birdseye = factory($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Birdseye =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.Common'),
-                require('nf.CanvasUtils'),
-                require('nf.ContextMenu'),
-                require('nf.Label')));
-    } else {
-        nf.Birdseye = factory(root.$,
-            root.d3,
-            root.nf.Common,
-            root.nf.CanvasUtils,
-            root.nf.ContextMenu,
-            root.nf.Label);
-    }
-}(this, function ($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel) {
-    'use strict';
-
-    var nfGraph;
-    var birdseyeGroup;
-    var componentGroup;
-
-    // refreshes the birdseye
-    var refresh = function (components) {
-        var translate = nfCanvasUtils.translateCanvasView();
-        var scale = nfCanvasUtils.scaleCanvasView();
-
-        // scale the translation
-        translate = [translate[0] / scale, translate[1] / scale];
-
-        // get the bounding box for the graph and convert into canvas space
-        var graphBox = d3.select('#canvas').node().getBoundingClientRect();
-        var graphLeft = (graphBox.left / scale) - translate[0];
-        var graphTop = ((graphBox.top - nfCanvasUtils.getCanvasOffset()) / scale) - translate[1];
-        var graphRight = (graphBox.right / scale) - translate[0];
-        var graphBottom = (graphBox.bottom / scale) - translate[1];
-
-        // get the screen bounding box and convert into canvas space
-        var canvasContainer = $('#canvas-container');
-        var screenWidth = canvasContainer.width() / scale;
-        var screenHeight = canvasContainer.height() / scale;
-        var screenLeft = -translate[0];
-        var screenTop = -translate[1];
-        var screenRight = screenLeft + screenWidth;
-        var screenBottom = screenTop + screenHeight;
-
-        // determine the maximum size of the canvas given the graph and the visible portion on the screen
-        var canvasLeft = Math.min(graphLeft, screenLeft);
-        var canvasTop = Math.min(graphTop, screenTop);
-        var canvasRight = Math.max(graphRight, screenRight);
-        var canvasBottom = Math.max(graphBottom, screenBottom);
-        var canvasWidth = canvasRight - canvasLeft;
-        var canvasHeight = canvasBottom - canvasTop;
-
-        // get the width/height we have to work with
-        var birdseye = $('#birdseye');
-        var birdseyeWidth = birdseye.width();
-        var birdseyeHeight = birdseye.height();
-
-        // determine the appropriate scale for the birdseye (min scale to accomodate total width and height)
-        var birdseyeWidthScale = birdseyeWidth / canvasWidth;
-        var birdseyeHeightScale = birdseyeHeight / canvasHeight;
-        var birdseyeScale = Math.min(birdseyeWidthScale, birdseyeHeightScale);
-
-        // calculate the translation for the birdseye and the brush
-        var birdseyeTranslate = [0, 0];
-        var brushTranslate = [0, 0];
-        if (translate[0] < 0 && translate[1] < 0) {
-            birdseyeTranslate = [0, 0];
-            brushTranslate = [-translate[0], -translate[1]];
-        } else if (translate[0] >= 0 && translate[1] < 0) {
-            birdseyeTranslate = [translate[0], 0];
-            brushTranslate = [0, -translate[1]];
-        } else if (translate[0] < 0 && translate[1] >= 0) {
-            birdseyeTranslate = [0, translate[1]];
-            brushTranslate = [-translate[0], 0];
-        } else {
-            birdseyeTranslate = [translate[0], translate[1]];
-            brushTranslate = [0, 0];
-        }
-
-        // offset in case the graph has positive/negative coordinates and panning appropriately
-        var offsetX = 0;
-        var left = -graphLeft;
-        if (translate[0] < 0) {
-            if (translate[0] < left) {
-                offsetX = left;
-            } else {
-                offsetX = left - (left - translate[0]);
-            }
-        } else {
-            if (translate[0] < left) {
-                offsetX = left - translate[0];
-            }
-        }
-        var offsetY = 0;
-        var top = -graphTop;
-        if (translate[1] < 0) {
-            if (translate[1] < top) {
-                offsetY = top;
-            } else {
-                offsetY = top - (top - translate[1]);
-            }
-        } else {
-            if (translate[1] < top) {
-                offsetY = top - translate[1];
-            }
-        }
-
-        // adjust the translations of the birdseye and brush to account for the offset
-        birdseyeTranslate = [birdseyeTranslate[0] + offsetX, birdseyeTranslate[1] + offsetY];
-        brushTranslate = [brushTranslate[0] + offsetX, brushTranslate[1] + offsetY];
-
-        // update the birdseye
-        birdseyeGroup.attr('transform', 'scale(' + birdseyeScale + ')');
-        componentGroup.attr('transform', 'translate(' + birdseyeTranslate + ')');
-
-        // update the brush
-        d3.select('rect.birdseye-brush')
-            .attr({
-                'width': screenWidth,
-                'height': screenHeight,
-                'stroke-width': (2 / birdseyeScale),
-                'transform': function (d) {
-                    d.x = brushTranslate[0];
-                    d.y = brushTranslate[1];
-
-                    return 'translate(' + brushTranslate + ')';
-                }
-            });
-
-        // redraw the canvas
-        var canvasElement = d3.select('#birdseye-canvas').node();
-        var context = canvasElement.getContext('2d');
-        context.save();
-
-        // clear the current canvas
-        context.setTransform(1, 0, 0, 1, 0, 0);
-        context.clearRect(0, 0, canvasElement.width, canvasElement.height);
-
-        context.restore();
-        context.save();
-
-        // apply the current transformation
-        context.translate(birdseyeTranslate[0] * birdseyeScale, birdseyeTranslate[1] * birdseyeScale);
-        context.scale(birdseyeScale, birdseyeScale);
-
-        // labels
-        $.each(components.labels, function (_, d) {
-            var color = nfLabel.defaultColor();
-
-            if (d.permissions.canRead) {
-                // use the specified color if appropriate
-                if (nfCommon.isDefinedAndNotNull(d.component.style['background-color'])) {
-                    color = d.component.style['background-color'];
-                }
-            }
-
-            context.fillStyle = color;
-            context.fillRect(d.position.x, d.position.y, d.dimensions.width, d.dimensions.height);
-        });
-
-        // funnels
-        context.fillStyle = '#ad9897';
-        $.each(components.funnels, function (_, d) {
-            context.fillRect(d.position.x, d.position.y, d.dimensions.width, d.dimensions.height);
-        });
-
-        // ports
-        context.fillStyle = '#bbdcde';
-        $.each(components.ports, function (_, d) {
-            context.fillRect(d.position.x, d.position.y, d.dimensions.width, d.dimensions.height);
-        });
-
-        // remote process groups
-        context.fillStyle = '#728e9b';
-        $.each(components.remoteProcessGroups, function (_, d) {
-            context.fillRect(d.position.x, d.position.y, d.dimensions.width, d.dimensions.height);
-        });
-
-        // process groups
-        $.each(components.processGroups, function (_, d) {
-            context.fillRect(d.position.x, d.position.y, d.dimensions.width, d.dimensions.height);
-        });
-
-        // processors
-        $.each(components.processors, function (_, d) {
-            //default color
-            var color = '#dde4eb';
-
-            if (d.permissions.canRead) {
-                // use the specified color if appropriate
-                if (nfCommon.isDefinedAndNotNull(d.component.style['background-color'])) {
-                    color = d.component.style['background-color'];
-
-                    //if the background color is #ffffff use the default instead
-                    if (color === '#ffffff') {
-                        color = '#dde4eb';
-                    }
-                }
-            }
-
-            context.fillStyle = color;
-            context.fillRect(d.position.x, d.position.y, d.dimensions.width, d.dimensions.height);
-        });
-
-        context.restore();
-    };
-
-    // whether or not the birdseye is open, don't adjust unless necessary
-    var visible = true;
-
-    var nfBirdseye = {
-
-        /**
-         * Initializes of the graph controller.
-         *
-         * @param nfGraphRef   The nfConnectable module.
-         */
-        init: function (nfGraphRef) {
-            nfGraph = nfGraphRef;
-
-            var birdseye = $('#birdseye');
-
-            d3.select('#birdseye').append('canvas')
-                .attr('id', 'birdseye-canvas')
-                .attr('width', birdseye.width())
-                .attr('height', birdseye.height());
-
-            // build the birdseye svg
-            var svg = d3.select('#birdseye').append('svg')
-                .attr('width', birdseye.width())
-                .attr('height', birdseye.height());
-
-            // group birdseye components together
-            birdseyeGroup = svg.append('g')
-                .attr('class', 'birdseye');
-
-            // processor in the birdseye
-            componentGroup = birdseyeGroup.append('g')
-                .attr('pointer-events', 'none');
-
-            // define the brush drag behavior
-            var brush = d3.behavior.drag()
-                .origin(function (d) {
-                    return {
-                        x: d.x,
-                        y: d.y
-                    };
-                })
-                .on('dragstart', function () {
-                    // hide the context menu
-                    nfContextMenu.hide();
-                })
-                .on('drag', function (d) {
-                    d.x += d3.event.dx;
-                    d.y += d3.event.dy;
-
-                    // update the location of the brush
-                    d3.select(this).attr('transform', function () {
-                        return 'translate(' + d.x + ', ' + d.y + ')';
-                    });
-                    // get the current transformation
-                    var scale = nfCanvasUtils.scaleCanvasView();
-                    var translate = nfCanvasUtils.translateCanvasView();
-
-                    // update the translation according to the delta
-                    translate = [(-d3.event.dx * scale) + translate[0], (-d3.event.dy * scale) + translate[1]];
-
-                    // record the current transforms
-                    nfCanvasUtils.translateCanvasView(translate);
-
-                    // refresh the canvas
-                    nfCanvasUtils.refreshCanvasView({
-                        persist: false,
-                        transition: false,
-                        refreshComponents: false,
-                        refreshBirdseye: false
-                    });
-                })
-                .on('dragend', function () {
-                    // update component visibility
-                    nfGraph.updateVisibility();
-
-                    // persist the users view
-                    nfCanvasUtils.persistUserView();
-
-                    // refresh the birdseye
-                    nfBirdseye.refresh();
-                });
-
-            // context area
-            birdseyeGroup.append('g')
-                .attr({
-                    'pointer-events': 'all',
-                    'class': 'birdseye-brush-container'
-                })
-                .append('rect')
-                .attr('class', 'birdseye-brush moveable')
-                .datum({
-                    x: 0,
-                    y: 0
-                })
-                .call(brush);
-        },
-
-        /**
-         * Handles rendering of the birdseye tool.
-         */
-        refresh: function () {
-            if (visible) {
-                refresh(nfGraph.get());
-            }
-        },
-
-        /**
-         * Function that needs to be call when the birdseye visibility changes.
-         *
-         * @param {boolean} isVisible
-         */
-        updateBirdseyeVisibility: function (isVisible) {
-            var birdseye = $('#birdseye');
-
-            // update the outline collapse icon
-            if (isVisible) {
-                // show the outline
-                birdseye.show();
-                visible = true;
-
-                // refresh the birdseye as it may have changed
-                refresh(nfGraph.get());
-            } else {
-                // hide the outline
-                birdseye.hide();
-                visible = false;
-            }
-        }
-    };
-
-    return nfBirdseye;
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js
deleted file mode 100644
index 2d98e08ef44b..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js
+++ /dev/null
@@ -1,400 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'angular',
-                'nf.Common',
-                'nf.CanvasUtils',
-                'nf.ErrorHandler',
-                'nf.Client',
-                'nf.ClusterSummary',
-                'nf.Dialog',
-                'nf.Storage',
-                'nf.Canvas',
-                'nf.Graph',
-                'nf.ContextMenu',
-                'nf.Shell',
-                'nf.Settings',
-                'nf.Snippet',
-                'nf.Actions',
-                'nf.QueueListing',
-                'nf.ComponentState',
-                'nf.Draggable',
-                'nf.Connectable',
-                'nf.StatusHistory',
-                'nf.Birdseye',
-                'nf.ConnectionConfiguration',
-                'nf.ControllerService',
-                'nf.ReportingTask',
-                'nf.PolicyManagement',
-                'nf.ProcessorConfiguration',
-                'nf.ProcessGroupConfiguration',
-                'nf.ControllerServices',
-                'nf.RemoteProcessGroupConfiguration',
-                'nf.RemoteProcessGroupPorts',
-                'nf.PortConfiguration',
-                'nf.LabelConfiguration',
-                'nf.ProcessorDetails',
-                'nf.PortDetails',
-                'nf.ConnectionDetails',
-                'nf.RemoteProcessGroupDetails',
-                'nf.GoTo',
-                'nf.ng.Bridge',
-                'nf.ng.AppCtrl',
-                'nf.ng.AppConfig',
-                'nf.ng.ServiceProvider',
-                'nf.ng.BreadcrumbsCtrl',
-                'nf.ng.Canvas.HeaderCtrl',
-                'nf.ng.Canvas.FlowStatusCtrl',
-                'nf.ng.Canvas.GlobalMenuCtrl',
-                'nf.ng.Canvas.ToolboxCtrl',
-                'nf.ng.ProcessorComponent',
-                'nf.ng.InputPortComponent',
-                'nf.ng.OutputPortComponent',
-                'nf.ng.GroupComponent',
-                'nf.ng.RemoteProcessGroupComponent',
-                'nf.ng.FunnelComponent',
-                'nf.ng.TemplateComponent',
-                'nf.ng.LabelComponent',
-                'nf.ng.Canvas.GraphControlsCtrl',
-                'nf.ng.Canvas.NavigateCtrl',
-                'nf.ng.Canvas.OperateCtrl',
-                'nf.ng.BreadcrumbsDirective',
-                'nf.ng.DraggableDirective'],
-            function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) {
-                return factory($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective);
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = factory(require('jquery'),
-            require('angular'),
-            require('nf.Common'),
-            require('nf.CanvasUtils'),
-            require('nf.ErrorHandler'),
-            require('nf.Client'),
-            require('nf.ClusterSummary'),
-            require('nf.Dialog'),
-            require('f.Storage'),
-            require('nf.Canvas'),
-            require('nf.Graph'),
-            require('nf.ContextMenu'),
-            require('nf.Shell'),
-            require('nf.Settings'),
-            require('nf.Actions'),
-            require('nf.Snippet'),
-            require('nf.QueueListing'),
-            require('nf.ComponentState'),
-            require('nf.Draggable'),
-            require('nf.Connectable'),
-            require('nf.StatusHistory'),
-            require('nf.Birdseye'),
-            require('nf.ConnectionConfiguration'),
-            require('nf.ControllerService'),
-            require('nf.ReportingTask'),
-            require('nf.PolicyManagement'),
-            require('nf.ProcessorConfiguration'),
-            require('nf.ProcessGroupConfiguration'),
-            require('nf.ControllerServices'),
-            require('nf.RemoteProcessGroupConfiguration'),
-            require('nf.RemoteProcessGroupPorts'),
-            require('nf.PortConfiguration'),
-            require('nf.LabelConfiguration'),
-            require('nf.ProcessorDetails'),
-            require('nf.PortDetails'),
-            require('nf.ConnectionDetails'),
-            require('nf.RemoteProcessGroupDetails'),
-            require('nf.GoTo'),
-            require('nf.ng.Bridge'),
-            require('nf.ng.AppCtrl'),
-            require('nf.ng.AppConfig'),
-            require('nf.ng.ServiceProvider'),
-            require('nf.ng.BreadcrumbsCtrl'),
-            require('nf.ng.Canvas.HeaderCtrl'),
-            require('nf.ng.Canvas.FlowStatusCtrl'),
-            require('nf.ng.Canvas.GlobalMenuCtrl'),
-            require('nf.ng.Canvas.ToolboxCtrl'),
-            require('nf.ng.ProcessorComponent'),
-            require('nf.ng.InputPortComponent'),
-            require('nf.ng.OutputPortComponent'),
-            require('nf.ng.GroupComponent'),
-            require('nf.ng.RemoteProcessGroupComponent'),
-            require('nf.ng.FunnelComponent'),
-            require('nf.ng.TemplateComponent'),
-            require('nf.ng.LabelComponent'),
-            require('nf.ng.Canvas.GraphControlsCtrl'),
-            require('nf.ng.Canvas.NavigateCtrl'),
-            require('nf.ng.Canvas.OperateCtrl'),
-            require('nf.ng.BreadcrumbsDirective'),
-            require('nf.ng.DraggableDirective'));
-    } else {
-        factory(root.$,
-            root.angular,
-            root.nf.Common,
-            root.nf.CanvasUtils,
-            root.nf.ErrorHandler,
-            root.nf.Client,
-            root.nf.ClusterSummary,
-            root.nf.Dialog,
-            root.nf.Storage,
-            root.nf.Canvas,
-            root.nf.Graph,
-            root.nf.ContextMenu,
-            root.nf.Shell,
-            root.nf.Settings,
-            root.nf.Actions,
-            root.nf.Snippet,
-            root.nf.QueueListing,
-            root.nf.ComponentState,
-            root.nf.Draggable,
-            root.nf.Connectable,
-            root.nf.StatusHistory,
-            root.nf.Birdseye,
-            root.nf.ConnectionConfiguration,
-            root.nf.ControllerService,
-            root.nf.ReportingTask,
-            root.nf.PolicyManagement,
-            root.nf.ProcessorConfiguration,
-            root.nf.ProcessGroupConfiguration,
-            root.nf.ControllerServices,
-            root.nf.RemoteProcessGroupConfiguration,
-            root.nf.RemoteProcessGroupPorts,
-            root.nf.PortConfiguration,
-            root.nf.LabelConfiguration,
-            root.nf.ProcessorDetails,
-            root.nf.PortDetails,
-            root.nf.ConnectionDetails,
-            root.nf.RemoteProcessGroupDetails,
-            root.nf.GoTo,
-            root.nf.ng.Bridge,
-            root.nf.ng.AppCtrl,
-            root.nf.ng.AppConfig,
-            root.nf.ng.ServiceProvider,
-            root.nf.ng.BreadcrumbsCtrl,
-            root.nf.ng.Canvas.HeaderCtrl,
-            root.nf.ng.Canvas.FlowStatusCtrl,
-            root.nf.ng.Canvas.GlobalMenuCtrl,
-            root.nf.ng.Canvas.ToolboxCtrl,
-            root.nf.ng.ProcessorComponent,
-            root.nf.ng.InputPortComponent,
-            root.nf.ng.OutputPortComponent,
-            root.nf.ng.GroupComponent,
-            root.nf.ng.RemoteProcessGroupComponent,
-            root.nf.ng.FunnelComponent,
-            root.nf.ng.TemplateComponent,
-            root.nf.ng.LabelComponent,
-            root.nf.ng.Canvas.GraphControlsCtrl,
-            root.nf.ng.Canvas.NavigateCtrl,
-            root.nf.ng.Canvas.OperateCtrl,
-            root.nf.ng.BreadcrumbsDirective,
-            root.nf.ng.DraggableDirective);
-    }
-}(this, function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) {
-
-    var config = {
-        urls: {
-            flowConfig: '../nifi-api/flow/config'
-        }
-    };
-
-    /**
-     * Bootstrap the canvas application.
-     */
-    $(document).ready(function () {
-        if (nfCanvas.SUPPORTS_SVG) {
-
-            //Create Angular App
-            var app = angular.module('ngCanvasApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
-
-            //Define Dependency Injection Annotations
-            appConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
-            appCtrl.$inject = ['$scope', 'serviceProvider', '$compile', 'headerCtrl', 'graphControlsCtrl'];
-            serviceProvider.$inject = [];
-            breadcrumbsCtrl.$inject = ['serviceProvider'];
-            headerCtrl.$inject = ['serviceProvider', 'toolboxCtrl', 'globalMenuCtrl', 'flowStatusCtrl'];
-            flowStatusCtrl.$inject = ['serviceProvider'];
-            globalMenuCtrl.$inject = ['serviceProvider'];
-            toolboxCtrl.$inject = ['processorComponent',
-                'inputPortComponent',
-                'outputPortComponent',
-                'groupComponent',
-                'remoteGroupComponent',
-                'funnelComponent',
-                'templateComponent',
-                'labelComponent'];
-            processorComponent.$inject = ['serviceProvider'];
-            inputPortComponent.$inject = ['serviceProvider'];
-            outputPortComponent.$inject = ['serviceProvider'];
-            processGroupComponent.$inject = ['serviceProvider'];
-            remoteProcessGroupComponent.$inject = ['serviceProvider'];
-            funnelComponent.$inject = ['serviceProvider'];
-            templateComponent.$inject = ['serviceProvider'];
-            labelComponent.$inject = ['serviceProvider'];
-            graphControlsCtrl.$inject = ['serviceProvider', 'navigateCtrl', 'operateCtrl'];
-            navigateCtrl.$inject = [];
-            operateCtrl.$inject = [];
-            breadcrumbsDirective.$inject = ['breadcrumbsCtrl'];
-            draggableDirective.$inject = [];
-
-            //Configure Angular App
-            app.config(appConfig);
-
-            //Define Angular App Controllers
-            app.controller('ngCanvasAppCtrl', appCtrl);
-
-            //Define Angular App Services
-            app.service('serviceProvider', serviceProvider);
-            app.service('breadcrumbsCtrl', breadcrumbsCtrl);
-            app.service('headerCtrl', headerCtrl);
-            app.service('flowStatusCtrl', flowStatusCtrl);
-            app.service('globalMenuCtrl', globalMenuCtrl);
-            app.service('toolboxCtrl', toolboxCtrl);
-            app.service('processorComponent', processorComponent);
-            app.service('inputPortComponent', inputPortComponent);
-            app.service('outputPortComponent', outputPortComponent);
-            app.service('groupComponent', processGroupComponent);
-            app.service('remoteGroupComponent', remoteProcessGroupComponent);
-            app.service('funnelComponent', funnelComponent);
-            app.service('templateComponent', templateComponent);
-            app.service('labelComponent', labelComponent);
-            app.service('graphControlsCtrl', graphControlsCtrl);
-            app.service('navigateCtrl', navigateCtrl);
-            app.service('operateCtrl', operateCtrl);
-
-            //Define Angular App Directives
-            app.directive('nfBreadcrumbs', breadcrumbsDirective);
-            app.directive('nfDraggable', draggableDirective);
-
-            // initialize the canvas utils and invert control of the canvas,
-            // actions, snippet, birdseye, and graph
-            nfCanvasUtils.init(nfCanvas, nfActions, nfSnippet, nfBirdseye, nfGraph);
-
-            //Manually Boostrap Angular App
-            nfNgBridge.injector = angular.bootstrap($('body'), ['ngCanvasApp'], {strictDi: true});
-
-            // initialize the NiFi
-            var userXhr = nfCanvas.init();
-
-            userXhr.done(function () {
-                // load the client id
-                var clientXhr = nfClient.init();
-
-                // get the controller config to register the status poller
-                var configXhr = $.ajax({
-                    type: 'GET',
-                    url: config.urls.flowConfig,
-                    dataType: 'json'
-                });
-
-                // ensure the config requests are loaded
-                $.when(configXhr, nfClusterSummary.loadClusterSummary(), userXhr, clientXhr).done(function (configResult) {
-                    var configResponse = configResult[0];
-
-                    // calculate the canvas offset
-                    var canvasContainer = $('#canvas-container');
-                    nfCanvas.CANVAS_OFFSET = canvasContainer.offset().top;
-
-                    // get the config details
-                    var configDetails = configResponse.flowConfiguration;
-
-                    // show disconnected message on load if necessary
-                    if (nfClusterSummary.isClustered() && !nfClusterSummary.isConnectedToCluster()) {
-                        nfDialog.showDisconnectedFromClusterMessage();
-                    }
-
-                    // get the auto refresh interval
-                    var autoRefreshIntervalSeconds = parseInt(configDetails.autoRefreshIntervalSeconds, 10);
-
-                    // record whether we can configure the authorizer
-                    nfCanvas.setConfigurableAuthorizer(configDetails.supportsConfigurableAuthorizer);
-
-                    // init nfStorage
-                    nfStorage.init();
-
-                    // initialize the application
-                    nfCanvas.initCanvas();
-                    nfCanvas.View.init();
-                    // initialize the context menu and invert control of the actions
-                    nfContextMenu.init(nfActions);
-                    // initialize the shell and invert control of the context menu
-                    nfShell.init(nfContextMenu);
-                    nfNgBridge.injector.get('headerCtrl').init();
-                    nfSettings.init();
-                    nfActions.init();
-                    nfQueueListing.init();
-                    nfComponentState.init();
-
-                    // initialize the component behaviors
-                    nfDraggable.init();
-                    nfConnectable.init();
-
-                    // initialize the chart
-                    nfStatusHistory.init(configDetails.timeOffset);
-
-                    // initialize the birdseye
-                    nfBirdseye.init(nfGraph);
-
-                    // initialize the connection config and invert control of the birdseye and graph
-                    nfConnectionConfiguration.init(nfBirdseye, nfGraph);
-                    nfControllerService.init();
-                    nfReportingTask.init(nfSettings);
-                    nfPolicyManagement.init();
-                    nfProcessorConfiguration.init();
-                    // initialize the PG config and invert control of the controllerServices
-                    nfProcessGroupConfiguration.init(nfControllerServices);
-                    nfRemoteProcessGroupConfiguration.init();
-                    nfRemoteProcessGroupPorts.init();
-                    nfPortConfiguration.init();
-                    nfLabelConfiguration.init();
-                    nfProcessorDetails.init(true);
-                    nfPortDetails.init();
-                    nfConnectionDetails.init();
-                    nfRemoteProcessGroupDetails.init();
-                    nfGoto.init();
-                    nfGraph.init().done(function () {
-                        nfNgBridge.injector.get('graphControlsCtrl').init();
-
-                        // determine the split between the polling
-                        var pollingSplit = autoRefreshIntervalSeconds / 2;
-
-                        // register the polling
-                        setTimeout(function () {
-                            nfCanvas.startPolling(autoRefreshIntervalSeconds);
-                        }, pollingSplit * 1000);
-
-                        // hide the splash screen
-                        nfCanvas.hideSplash();
-                    }).fail(nfErrorHandler.handleAjaxError);
-                }).fail(nfErrorHandler.handleAjaxError);
-            }).fail(nfErrorHandler.handleAjaxError);
-
-            //initialize toolbox components tooltips
-            $('.component-button').qtip($.extend({}, nfCommon.config.tooltipConfig));
-        } else {
-            $('#message-title').text('Unsupported Browser');
-            $('#message-content').text('Flow graphs are shown using SVG. Please use a browser that supports rendering SVG.');
-
-            // show the error pane
-            $('#message-pane').show();
-
-            // hide the splash screen
-            nfCanvas.hideSplash();
-        }
-    });
-}));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-error-handler.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-error-handler.js
deleted file mode 100644
index 05519a320a95..000000000000
--- 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
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['nf.ErrorHandler',
-                'nf.Common',
-                'nf.Canvas',
-                'nf.ContextMenu'],
-            function (ajaxErrorHandler, nfCommon, nfCanvas, nfContextMenu) {
-                return (nf.ErrorHandler = factory(ajaxErrorHandler, nfCommon, nfCanvas, nfContextMenu));
-            });
-    } 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, nfCommon, nfCanvas, nfContextMenu) {
-    '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);
-            nfCommon.showLogoutLink();
-
-            // hide the splash screen if required
-            if ($('#splash').is(':visible')) {
-                nfCanvas.hideSplash();
-            }
-
-            // hide the context menu
-            nfContextMenu.hide();
-
-            // shut off the auto refresh
-            nfCanvas.stopPolling();
-
-            // allow page refresh with ctrl-r
-            nfCanvas.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-utils.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
deleted file mode 100644
index 055157fd770c..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
+++ /dev/null
@@ -1,1685 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['d3',
-                'jquery',
-                'nf.Common',
-                'nf.ErrorHandler',
-                'nf.Dialog',
-                'nf.Clipboard',
-                'nf.Storage'],
-            function (d3, $, nfCommon, nfErrorHandler, nfDialog, nfClipboard, nfStorage) {
-                return (nf.CanvasUtils = factory(d3, $, nfCommon, nfErrorHandler, nfDialog, nfClipboard, nfStorage));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.CanvasUtils = factory(
-            require('d3'),
-            require('jquery'),
-            require('nf.Common'),
-            require('nf.ErrorHandler'),
-            require('nf.Dialog'),
-            require('nf.Clipboard'),
-            require('nf.Storage')));
-    } else {
-        nf.CanvasUtils = factory(
-            root.d3,
-            root.$,
-            root.nf.Common,
-            root.nf.ErrorHandler,
-            root.nf.Dialog,
-            root.nf.Clipboard,
-            root.nf.Storage);
-    }
-}(this, function (d3, $, nfCommon, nfErrorHandler, nfDialog, nfClipboard, nfStorage) {
-    'use strict';
-
-    var nfCanvas;
-    var nfActions;
-    var nfSnippet;
-    var nfBirdseye;
-    var nfGraph;
-
-    var config = {
-        storage: {
-            namePrefix: 'nifi-view-'
-        },
-        urls: {
-            controller: '../nifi-api/controller'
-        }
-    };
-
-    var TWO_PI = 2 * Math.PI;
-
-    var binarySearch = function (length, comparator) {
-        var low = 0;
-        var high = length - 1;
-        var mid;
-
-        var result = 0;
-        while (low <= high) {
-            mid = ~~((low + high) / 2);
-            result = comparator(mid);
-            if (result < 0) {
-                high = mid - 1;
-            } else if (result > 0) {
-                low = mid + 1;
-            } else {
-                break;
-            }
-        }
-
-        return mid;
-    };
-
-    var moveComponents = function (components, groupId) {
-        return $.Deferred(function (deferred) {
-            var parentGroupId = nfCanvasUtils.getGroupId();
-
-            // create a snippet for the specified components
-            var snippet = nfSnippet.marshal(components, parentGroupId);
-            nfSnippet.create(snippet).done(function (response) {
-                // move the snippet into the target
-                nfSnippet.move(response.snippet.id, groupId).done(function () {
-                    var componentMap = d3.map();
-
-                    // add the id to the type's array
-                    var addComponent = function (type, id) {
-                        if (!componentMap.has(type)) {
-                            componentMap.set(type, []);
-                        }
-                        componentMap.get(type).push(id);
-                    };
-
-                    // go through each component being removed
-                    components.each(function (d) {
-                        addComponent(d.type, d.id);
-                    });
-
-                    // refresh all component types as necessary (handle components that have been removed)
-                    componentMap.forEach(function (type, ids) {
-                        nfCanvasUtils.getComponentByType(type).remove(ids);
-                    });
-
-                    // refresh the birdseye
-                    nfBirdseye.refresh();
-
-                    deferred.resolve();
-                }).fail(nfErrorHandler.handleAjaxError).fail(function () {
-                    deferred.reject();
-                });
-            }).fail(nfErrorHandler.handleAjaxError).fail(function () {
-                deferred.reject();
-            });
-        }).promise();
-    };
-
-    var nfCanvasUtils = {
-
-        /**
-         * Initialize the canvas utils.
-         *
-         * @param nfCanvasRef   The nfCanvas module.
-         * @param nfActionsRef   The nfActions module.
-         * @param nfSnippetRef   The nfSnippet module.
-         * @param nfBirdseyeRef   The nfBirdseye module.
-         * @param nfGraphRef   The nfGraph module.
-         */
-        init: function(nfCanvasRef, nfActionsRef, nfSnippetRef, nfBirdseyeRef, nfGraphRef){
-            nfCanvas = nfCanvasRef;
-            nfActions = nfActionsRef;
-            nfSnippet = nfSnippetRef;
-            nfBirdseye = nfBirdseyeRef;
-            nfGraph = nfGraphRef;
-        },
-
-        config: {
-            systemTooltipConfig: {
-                style: {
-                    classes: 'nifi-tooltip'
-                },
-                show: {
-                    solo: true,
-                    effect: false
-                },
-                hide: {
-                    effect: false
-                },
-                position: {
-                    at: 'bottom right',
-                    my: 'top left'
-                }
-            }
-        },
-
-        /**
-         * Gets a graph component `type`.
-         *
-         * @param type  The type of component.
-         */
-        getComponentByType: function (type) {
-            return nfGraph.getComponentByType(type);
-        },
-
-        /**
-         * Calculates the point on the specified bounding box that is closest to the
-         * specified point.
-         *
-         * @param {object} p            The point
-         * @param {object} bBox         The bounding box
-         */
-        getPerimeterPoint: function (p, bBox) {
-            // calculate theta
-            var theta = Math.atan2(bBox.height, bBox.width);
-
-            // get the rectangle radius
-            var xRadius = bBox.width / 2;
-            var yRadius = bBox.height / 2;
-
-            // get the center point
-            var cx = bBox.x + xRadius;
-            var cy = bBox.y + yRadius;
-
-            // calculate alpha
-            var dx = p.x - cx;
-            var dy = p.y - cy;
-            var alpha = Math.atan2(dy, dx);
-
-            // normalize aphla into 0 <= alpha < 2 PI
-            alpha = alpha % TWO_PI;
-            if (alpha < 0) {
-                alpha += TWO_PI;
-            }
-
-            // calculate beta
-            var beta = (Math.PI / 2) - alpha;
-
-            // detect the appropriate quadrant and return the point on the perimeter
-            if ((alpha >= 0 && alpha < theta) || (alpha >= (TWO_PI - theta) && alpha < TWO_PI)) {
-                // right quadrant
-                return {
-                    'x': bBox.x + bBox.width,
-                    'y': cy + Math.tan(alpha) * xRadius
-                };
-            } else if (alpha >= theta && alpha < (Math.PI - theta)) {
-                // bottom quadrant
-                return {
-                    'x': cx + Math.tan(beta) * yRadius,
-                    'y': bBox.y + bBox.height
-                };
-            } else if (alpha >= (Math.PI - theta) && alpha < (Math.PI + theta)) {
-                // left quadrant
-                return {
-                    'x': bBox.x,
-                    'y': cy - Math.tan(alpha) * xRadius
-                };
-            } else {
-                // top quadrant
-                return {
-                    'x': cx - Math.tan(beta) * yRadius,
-                    'y': bBox.y
-                };
-            }
-        },
-
-        /**
-         * Shows the specified component in the specified group.
-         *
-         * @argument {string} groupId       The id of the group
-         * @argument {string} componentId   The id of the component
-         */
-        showComponent: function (groupId, componentId) {
-            // ensure the group id is specified
-            if (nfCommon.isDefinedAndNotNull(groupId)) {
-                // initiate a graph refresh
-                var refreshGraph = $.Deferred(function (deferred) {
-                    // load a different group if necessary
-                    if (groupId !== nfCanvas.getGroupId()) {
-                        // set the new group id
-                        nfCanvas.setGroupId(groupId);
-
-                        // reload
-                        nfCanvas.reload().done(function () {
-                            deferred.resolve();
-                        }).fail(function () {
-                            nfDialog.showOkDialog({
-                                headerText: 'Process Group',
-                                dialogContent: 'Unable to load the group for the specified component.'
-                            });
-                            deferred.reject();
-                        });
-                    } else {
-                        deferred.resolve();
-                    }
-                }).promise();
-
-                // when the refresh has completed, select the match
-                refreshGraph.done(function () {
-                    // attempt to locate the corresponding component
-                    var component = d3.select('#id-' + componentId);
-                    if (!component.empty()) {
-                        nfActions.show(component);
-                    } else {
-                        nfDialog.showOkDialog({
-                            headerText: 'Process Group',
-                            dialogContent: 'Unable to find the specified component.'
-                        });
-                    }
-                });
-            }
-        },
-
-        /**
-         * Gets the currently selected components and connections.
-         *
-         * @returns {selection}     The currently selected components and connections
-         */
-        getSelection: function () {
-            return d3.selectAll('g.component.selected, g.connection.selected');
-        },
-
-        /**
-         * Centers the specified bounding box.
-         *
-         * @param {type} boundingBox
-         */
-        centerBoundingBox: function (boundingBox) {
-            var scale = nfCanvas.View.scale();
-
-            // get the canvas normalized width and height
-            var canvasContainer = $('#canvas-container');
-            var screenWidth = canvasContainer.width() / scale;
-            var screenHeight = canvasContainer.height() / scale;
-
-            // determine the center location for this component in canvas space
-            var center = [(screenWidth / 2) - (boundingBox.width / 2), (screenHeight / 2) - (boundingBox.height / 2)];
-
-            // calculate the difference between the center point and the position of this component and convert to screen space
-            nfCanvas.View.translate([(center[0] - boundingBox.x) * scale, (center[1] - boundingBox.y) * scale]);
-        },
-
-        /**
-         * Enables/disables the editable behavior for the specified selection based on their access policies.
-         *
-         * @param selection     selection
-         * @param nfConnectableRef   The nfConnectable module.
-         * @param nfDraggableRef   The nfDraggable module.
-         */
-        editable: function (selection, nfConnectableRef, nfDraggableRef) {
-            if (nfCanvasUtils.canModify(selection)) {
-                if (!selection.classed('connectable')) {
-                    selection.call(nfConnectableRef.activate);
-                }
-                if (!selection.classed('moveable')) {
-                    selection.call(nfDraggableRef.activate);
-                }
-            } else {
-                if (selection.classed('connectable')) {
-                    selection.call(nfConnectableRef.deactivate);
-                }
-                if (selection.classed('moveable')) {
-                    selection.call(nfDraggableRef.deactivate);
-                }
-            }
-        },
-
-        /**
-         * Conditionally apply the transition.
-         *
-         * @param selection     selection
-         * @param transition    transition
-         */
-        transition: function (selection, transition) {
-            if (transition && !selection.empty()) {
-                return selection.transition().duration(400);
-            } else {
-                return selection;
-            }
-        },
-
-        /**
-         * Position the component accordingly.
-         *
-         * @param {selection} updated
-         */
-        position: function (updated, transition) {
-            if (updated.empty()) {
-                return;
-            }
-
-            return nfCanvasUtils.transition(updated, transition)
-                .attr('transform', function (d) {
-                    return 'translate(' + d.position.x + ', ' + d.position.y + ')';
-                });
-        },
-
-        /**
-         * Applies single line ellipsis to the component in the specified selection if necessary.
-         *
-         * @param {selection} selection
-         * @param {string} text
-         */
-        ellipsis: function (selection, text) {
-            var width = parseInt(selection.attr('width'), 10);
-            var node = selection.node();
-
-            // set the element text
-            selection.text(text);
-
-            // see if the field is too big for the field
-            if (text.length > 0 && node.getSubStringLength(0, text.length - 1) > width) {
-                // make some room for the ellipsis
-                width -= 5;
-
-                // determine the appropriate index
-                var i = binarySearch(text.length, function (x) {
-                    var length = node.getSubStringLength(0, x);
-                    if (length > width) {
-                        // length is too long, try the lower half
-                        return -1;
-                    } else if (length < width) {
-                        // length is too short, try the upper half
-                        return 1;
-                    }
-                    return 0;
-                });
-
-                // trim at the appropriate length and add ellipsis
-                selection.text(text.substring(0, i) + String.fromCharCode(8230));
-            }
-        },
-
-        /**
-         * Applies multiline ellipsis to the component in the specified seleciton. Text will
-         * wrap for the specified number of lines. The last line will be ellipsis if necessary.
-         *
-         * @param {selection} selection
-         * @param {integer} lineCount
-         * @param {string} text
-         */
-        multilineEllipsis: function (selection, lineCount, text) {
-            var i = 1;
-            var words = text.split(/\s+/).reverse();
-
-            // get the appropriate position
-            var x = parseInt(selection.attr('x'), 10);
-            var y = parseInt(selection.attr('y'), 10);
-            var width = parseInt(selection.attr('width'), 10);
-
-            var line = [];
-            var tspan = selection.append('tspan')
-                .attr({
-                    'x': x,
-                    'y': y,
-                    'width': width
-                });
-
-            // go through each word
-            var word = words.pop();
-            while (nfCommon.isDefinedAndNotNull(word)) {
-                // add the current word
-                line.push(word);
-
-                // update the label text
-                tspan.text(line.join(' '));
-
-                // if this word caused us to go too far
-                if (tspan.node().getComputedTextLength() > width) {
-                    // remove the current word
-                    line.pop();
-
-                    // update the label text
-                    tspan.text(line.join(' '));
-
-                    // create the tspan for the next line
-                    tspan = selection.append('tspan')
-                        .attr({
-                            'x': x,
-                            'dy': '1.2em',
-                            'width': width
-                        });
-
-                    // if we've reached the last line, use single line ellipsis
-                    if (++i >= lineCount) {
-                        // get the remainder using the current word and
-                        // reversing whats left
-                        var remainder = [word].concat(words.reverse());
-
-                        // apply ellipsis to the last line
-                        nfCanvasUtils.ellipsis(tspan, remainder.join(' '));
-
-                        // we've reached the line count
-                        break;
-                    } else {
-                        tspan.text(word);
-
-                        // prep the line for the next iteration
-                        line = [word];
-                    }
-                }
-
-                // get the next word
-                word = words.pop();
-            }
-        },
-
-        /**
-         * Updates the active thread count on the specified selection.
-         *
-         * @param {selection} selection         The selection
-         * @param {object} d                    The data
-         * @param {function} setOffset          Optional function to handle the width of the active thread count component
-         * @return
-         */
-        activeThreadCount: function (selection, d, setOffset) {
-            // if there is active threads show the count, otherwise hide
-            if (d.status.aggregateSnapshot.activeThreadCount > 0) {
-                // update the active thread count
-                var activeThreadCount = selection.select('text.active-thread-count')
-                    .text(function () {
-                        return d.status.aggregateSnapshot.activeThreadCount;
-                    })
-                    .style('display', 'block')
-                    .each(function () {
-                        var bBox = this.getBBox();
-                        d3.select(this).attr('x', function () {
-                            return d.dimensions.width - bBox.width - 15;
-                        });
-                    });
-
-                // update the background width
-                selection.select('text.active-thread-count-icon')
-                    .attr('x', function () {
-                        var bBox = activeThreadCount.node().getBBox();
-
-                        // update the offset
-                        if (typeof setOffset === 'function') {
-                            setOffset(bBox.width + 6);
-                        }
-
-                        return d.dimensions.width - bBox.width - 20;
-                    })
-                    .style('display', 'block');
-            } else {
-                selection.selectAll('text.active-thread-count, text.active-thread-count-icon').style('display', 'none');
-            }
-        },
-
-        /**
-         * Disables the default browser behavior of following image href when control clicking.
-         *
-         * @param {selection} selection                 The image
-         */
-        disableImageHref: function (selection) {
-            selection.on('click.disableImageHref', function () {
-                if (d3.event.ctrlKey || d3.event.shiftKey) {
-                    d3.event.preventDefault();
-                }
-            });
-        },
-
-        /**
-         * Handles component bulletins.
-         *
-         * @param {selection} selection                    The component
-         * @param {object} d                                The data
-         * @param {function} getTooltipContainer            Function to get the tooltip container
-         * @param {function} offset                         Optional offset
-         */
-        bulletins: function (selection, d, getTooltipContainer, offset) {
-            offset = nfCommon.isDefinedAndNotNull(offset) ? offset : 0;
-
-            // get the tip
-            var tip = d3.select('#bulletin-tip-' + d.id);
-
-            var hasBulletins = false;
-            if (!nfCommon.isEmpty(d.bulletins)) {
-                // format the bulletins
-                var bulletins = nfCommon.getFormattedBulletins(d.bulletins);
-                hasBulletins = bulletins.length > 0;
-
-                if (hasBulletins) {
-                    // create the unordered list based off the formatted bulletins
-                    var list = nfCommon.formatUnorderedList(bulletins);
-                }
-            }
-
-            // if there are bulletins show them, otherwise hide
-            if (hasBulletins) {
-                // update the tooltip
-                selection.select('text.bulletin-icon')
-                    .each(function () {
-                        // create the tip if necessary
-                        if (tip.empty()) {
-                            tip = getTooltipContainer().append('div')
-                                .attr('id', function () {
-                                    return 'bulletin-tip-' + d.id;
-                                })
-                                .attr('class', 'tooltip nifi-tooltip');
-                        }
-
-                        // add the tooltip
-                        tip.html(function () {
-                            return $('<div></div>').append(list).html();
-                        });
-
-                        nfCanvasUtils.canvasTooltip(tip, d3.select(this));
-                    });
-
-                // update the tooltip background
-                selection.select('text.bulletin-icon').style("visibility", "visible");
-                selection.select('rect.bulletin-background').style("visibility", "visible");
-            } else {
-                // clean up if necessary
-                if (!tip.empty()) {
-                    tip.remove();
-                }
-
-                // update the tooltip background
-                selection.select('text.bulletin-icon').style("visibility", "hidden");
-                selection.select('rect.bulletin-background').style("visibility", "hidden");
-            }
-        },
-
-        /**
-         * Adds the specified tooltip to the specified target.
-         *
-         * @param {selection} tip           The tooltip
-         * @param {selection} target        The target of the tooltip
-         */
-        canvasTooltip: function (tip, target) {
-            target.on('mouseenter', function () {
-                tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px').style('display', 'block');
-            })
-                .on('mousemove', function () {
-                    tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px');
-                })
-                .on('mouseleave', function () {
-                    tip.style('display', 'none');
-                });
-        },
-
-        /**
-         * Determines if the specified selection is alignable (in a single action).
-         *
-         * @param {selection} selection     The selection
-         * @returns {boolean}
-         */
-        canAlign: function(selection) {
-            var canAlign = true;
-
-            // determine if the current selection is entirely connections
-            var selectedConnections = selection.filter(function(d) {
-                var connection = d3.select(this);
-                return nfCanvasUtils.isConnection(connection);
-            });
-
-            // require multiple selections besides connections
-            if (selection.size() - selectedConnections.size() < 2) {
-                canAlign = false;
-            }
-
-            // require write permissions
-            if (nfCanvasUtils.canModify(selection) === false) {
-                canAlign = false;
-            }
-
-            return canAlign;
-        },
-
-        /**
-         * Determines if the specified selection is colorable (in a single action).
-         *
-         * @param {selection} selection     The selection
-         * @returns {boolean}
-         */
-        isColorable: function(selection) {
-            if (selection.empty()) {
-                return false;
-            }
-
-            // require read and write permissions
-            if (nfCanvasUtils.canRead(selection) === false || nfCanvasUtils.canModify(selection) === false) {
-                return false;
-            }
-
-            // determine if the current selection is entirely processors or labels
-            var selectedProcessors = selection.filter(function(d) {
-                var processor = d3.select(this);
-                return nfCanvasUtils.isProcessor(processor) && nfCanvasUtils.canModify(processor);
-            });
-            var selectedLabels = selection.filter(function(d) {
-                var label = d3.select(this);
-                return nfCanvasUtils.isLabel(label) && nfCanvasUtils.canModify(label);
-            });
-
-            var allProcessors = selectedProcessors.size() === selection.size();
-            var allLabels = selectedLabels.size() === selection.size();
-
-            return allProcessors || allLabels;
-        },
-
-        /**
-         * Determines if the specified selection is a connection.
-         *
-         * @argument {selection} selection      The selection
-         */
-        isConnection: function (selection) {
-            return selection.classed('connection');
-        },
-
-        /**
-         * Determines if the specified selection is a remote process group.
-         *
-         * @argument {selection} selection      The selection
-         */
-        isRemoteProcessGroup: function (selection) {
-            return selection.classed('remote-process-group');
-        },
-
-        /**
-         * Determines if the specified selection is a processor.
-         *
-         * @argument {selection} selection      The selection
-         */
-        isProcessor: function (selection) {
-            return selection.classed('processor');
-        },
-
-        /**
-         * Determines if the specified selection is a label.
-         *
-         * @argument {selection} selection      The selection
-         */
-        isLabel: function (selection) {
-            return selection.classed('label');
-        },
-
-        /**
-         * Determines if the specified selection is an input port.
-         *
-         * @argument {selection} selection      The selection
-         */
-        isInputPort: function (selection) {
-            return selection.classed('input-port');
-        },
-
-        /**
-         * Determines if the specified selection is an output port.
-         *
-         * @argument {selection} selection      The selection
-         */
-        isOutputPort: function (selection) {
-            return selection.classed('output-port');
-        },
-
-        /**
-         * Determines if the specified selection is a process group.
-         *
-         * @argument {selection} selection      The selection
-         */
-        isProcessGroup: function (selection) {
-            return selection.classed('process-group');
-        },
-
-        /**
-         * Determines if the specified selection is a funnel.
-         *
-         * @argument {selection} selection      The selection
-         */
-        isFunnel: function (selection) {
-            return selection.classed('funnel');
-        },
-
-        /**
-         * Determines if the components in the specified selection are runnable.
-         *
-         * @argument {selection} selection      The selection
-         * @return {boolean}                    Whether the selection is runnable
-         */
-        areRunnable: function (selection) {
-            if (selection.empty()) {
-                return true;
-            }
-
-            var runnable = true;
-            selection.each(function () {
-                if (!nfCanvasUtils.isRunnable(d3.select(this))) {
-                    runnable = false;
-                    return false;
-                }
-            });
-
-            return runnable;
-        },
-
-        /**
-         * Determines if the component in the specified selection is runnable.
-         *
-         * @argument {selection} selection      The selection
-         * @return {boolean}                    Whether the selection is runnable
-         */
-        isRunnable: function (selection) {
-            if (selection.size() !== 1) {
-                return false;
-            }
-
-            if (nfCanvasUtils.isProcessGroup(selection)) {
-                return true;
-            }
-
-            if (nfCanvasUtils.canModify(selection) === false) {
-                return false;
-            }
-
-            var runnable = false;
-            var selectionData = selection.datum();
-            if (nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
-                runnable = nfCanvasUtils.supportsModification(selection) && selectionData.status.aggregateSnapshot.runStatus === 'Stopped';
-            }
-
-            return runnable;
-        },
-
-        /**
-         * Determines if the components in the specified selection are stoppable.
-         *
-         * @argument {selection} selection      The selection
-         * @return {boolean}                    Whether the selection is stoppable
-         */
-        areStoppable: function (selection) {
-            if (selection.empty()) {
-                return true;
-            }
-
-            var stoppable = true;
-            selection.each(function () {
-                if (!nfCanvasUtils.isStoppable(d3.select(this))) {
-                    stoppable = false;
-                    return false;
-                }
-            });
-
-            return stoppable;
-        },
-
-        /**
-         * Determines if the component in the specified selection is runnable.
-         *
-         * @argument {selection} selection      The selection
-         * @return {boolean}                    Whether the selection is runnable
-         */
-        isStoppable: function (selection) {
-            if (selection.size() !== 1) {
-                return false;
-            }
-
-            if (nfCanvasUtils.isProcessGroup(selection)) {
-                return true;
-            }
-
-            if (nfCanvasUtils.canModify(selection) === false) {
-                return false;
-            }
-
-            var stoppable = false;
-            var selectionData = selection.datum();
-            if (nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
-                stoppable = selectionData.status.aggregateSnapshot.runStatus === 'Running';
-            }
-
-            return stoppable;
-        },
-
-        /**
-         * Filters the specified selection for any components that supports enable.
-         *
-         * @argument {selection} selection      The selection
-         */
-        filterEnable: function (selection) {
-            return selection.filter(function (d) {
-                var selected = d3.select(this);
-                var selectedData = selected.datum();
-
-                // ensure its a processor, input port, or output port and supports modification and is disabled (can enable)
-                return ((nfCanvasUtils.isProcessor(selected) || nfCanvasUtils.isInputPort(selected) || nfCanvasUtils.isOutputPort(selected)) &&
-                nfCanvasUtils.supportsModification(selected) &&
-                selectedData.status.aggregateSnapshot.runStatus === 'Disabled');
-            });
-        },
-
-        /**
-         * Determines if the specified selection contains any components that supports enable.
-         *
-         * @argument {selection} selection      The selection
-         */
-        canEnable: function (selection) {
-            if (selection.empty()) {
-                return false;
-            }
-
-            if (nfCanvasUtils.canModify(selection) === false) {
-                return false;
-            }
-
-            return nfCanvasUtils.filterEnable(selection).size() === selection.size();
-        },
-
-        /**
-         * Filters the specified selection for any components that supports disable.
-         *
-         * @argument {selection} selection      The selection
-         */
-        filterDisable: function (selection) {
-            return selection.filter(function (d) {
-                var selected = d3.select(this);
-                var selectedData = selected.datum();
-
-                // ensure its a processor, input port, or output port and supports modification and is stopped (can disable)
-                return ((nfCanvasUtils.isProcessor(selected) || nfCanvasUtils.isInputPort(selected) || nfCanvasUtils.isOutputPort(selected)) &&
-                nfCanvasUtils.supportsModification(selected) &&
-                (selectedData.status.aggregateSnapshot.runStatus === 'Stopped' ||
-                selectedData.status.aggregateSnapshot.runStatus === 'Invalid'));
-            });
-        },
-
-        /**
-         * Determines if the specified selection contains any components that supports disable.
-         *
-         * @argument {selection} selection      The selection
-         */
-        canDisable: function (selection) {
-            if (selection.empty()) {
-                return false;
-            }
-
-            if (nfCanvasUtils.canModify(selection) === false) {
-                return false;
-            }
-
-            return nfCanvasUtils.filterDisable(selection).size() === selection.size();
-        },
-
-
-        /**
-         * Determines if the specified selection can all start transmitting.
-         *
-         * @argument {selection} selection      The selection
-         * @return {boolean}                    Whether the selection can start transmitting
-         */
-        canAllStartTransmitting: function (selection) {
-            if (selection.empty()) {
-                return false;
-            }
-
-            var canStartTransmitting = true;
-            selection.each(function () {
-                if (!nfCanvasUtils.canStartTransmitting(d3.select(this))) {
-                    canStartTransmitting = false;
-                }
-            });
-            return canStartTransmitting;
-        },
-
-        /**
-         * Determines if the specified selection supports starting transmission.
-         *
-         * @argument {selection} selection      The selection
-         */
-        canStartTransmitting: function (selection) {
-            if (selection.size() !== 1) {
-                return false;
-            }
-
-            if (nfCanvasUtils.canModify(selection) === false || nfCanvasUtils.canRead(selection) === false) {
-                return false;
-            }
-
-            return nfCanvasUtils.isRemoteProcessGroup(selection);
-        },
-
-        /**
-         * Determines if the specified selection can all stop transmitting.
-         *
-         * @argument {selection} selection      The selection
-         * @return {boolean}                    Whether the selection can stop transmitting
-         */
-        canAllStopTransmitting: function (selection) {
-            if (selection.empty()) {
-                return false;
-            }
-
-            var canStopTransmitting = true;
-            selection.each(function () {
-                if (!nfCanvasUtils.canStopTransmitting(d3.select(this))) {
-                    canStopTransmitting = false;
-                }
-            });
-            return canStopTransmitting;
-        },
-
-        /**
-         * Determines if the specified selection can stop transmission.
-         *
-         * @argument {selection} selection      The selection
-         */
-        canStopTransmitting: function (selection) {
-            if (selection.size() !== 1) {
-                return false;
-            }
-
-            if (nfCanvasUtils.canModify(selection) === false || nfCanvasUtils.canRead(selection) === false) {
-                return false;
-            }
-
-            return nfCanvasUtils.isRemoteProcessGroup(selection);
-        },
-
-        /**
-         * Determines whether the components in the specified selection are deletable.
-         *
-         * @argument {selection} selection      The selection
-         * @return {boolean}            Whether the selection is deletable
-         */
-        areDeletable: function (selection) {
-            if (selection.empty()) {
-                return false;
-            }
-
-            var isDeletable = true;
-            selection.each(function () {
-                if (!nfCanvasUtils.isDeletable(d3.select(this))) {
-                    isDeletable = false;
-                }
-            });
-            return isDeletable;
-        },
-
-        /**
-         * Determines whether the component in the specified selection is deletable.
-         *
-         * @argument {selection} selection      The selection
-         * @return {boolean}            Whether the selection is deletable
-         */
-        isDeletable: function (selection) {
-            if (selection.size() !== 1) {
-                return false;
-            }
-
-            // ensure the user has write permissions to the current process group
-            if (nfCanvas.canWrite() === false) {
-                return false;
-            }
-
-            if (nfCanvasUtils.canModify(selection) === false) {
-                return false;
-            }
-
-            return nfCanvasUtils.supportsModification(selection);
-        },
-
-        /**
-         * Determines whether the specified selection is configurable.
-         *
-         * @param selection
-         */
-        isConfigurable: function (selection) {
-            // ensure the correct number of components are selected
-            if (selection.size() !== 1) {
-                if (selection.empty()) {
-                    return true;
-                } else {
-                    return false;
-                }
-            }
-
-            if (nfCanvasUtils.isProcessGroup(selection)) {
-                return true;
-            }
-            if (nfCanvasUtils.canRead(selection) === false || nfCanvasUtils.canModify(selection) === false) {
-                return false;
-            }
-            if (nfCanvasUtils.isFunnel(selection)) {
-                return false;
-            }
-
-            return nfCanvasUtils.supportsModification(selection);
-        },
-
-        /**
-         * Determines whether the specified selection has details.
-         *
-         * @param selection
-         */
-        hasDetails: function (selection) {
-            // ensure the correct number of components are selected
-            if (selection.size() !== 1) {
-                return false;
-            }
-
-            if (nfCanvasUtils.canRead(selection) === false) {
-                return false;
-            }
-            if (nfCanvasUtils.canModify(selection)) {
-                if (nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection) || nfCanvasUtils.isRemoteProcessGroup(selection) || nfCanvasUtils.isConnection(selection)) {
-                    return !nfCanvasUtils.isConfigurable(selection);
-                }
-            } else {
-                return nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isConnection(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection) || nfCanvasUtils.isRemoteProcessGroup(selection);
-            }
-
-            return false;
-        },
-
-        /**
-         * Determines whether the user can configure or open the policy management page.
-         */
-        canManagePolicies: function () {
-            var selection = nfCanvasUtils.getSelection();
-
-            // ensure 0 or 1 components selected
-            if (selection.size() <= 1) {
-                // if something is selected, ensure it's not a connection
-                if (!selection.empty() && nfCanvasUtils.isConnection(selection)) {
-                    return false;
-                }
-
-                // ensure access to read tenants
-                return nfCommon.canAccessTenants();
-            }
-
-            return false;
-        },
-
-        /**
-         * Determines whether the components in the specified selection are writable.
-         *
-         * @argument {selection} selection      The selection
-         * @return {boolean}            Whether the selection is writable
-         */
-        canModify: function (selection) {
-            var selectionSize = selection.size();
-            var writableSize = selection.filter(function (d) {
-                return d.permissions.canWrite;
-            }).size();
-
-            return selectionSize === writableSize;
-        },
-
-        /**
-         * Determines whether the components in the specified selection are readable.
-         *
-         * @argument {selection} selection      The selection
-         * @return {boolean}            Whether the selection is readable
-         */
-        canRead: function (selection) {
-            var selectionSize = selection.size();
-            var readableSize = selection.filter(function (d) {
-                return d.permissions.canRead;
-            }).size();
-
-            return selectionSize === readableSize;
-        },
-
-        /**
-         * Determines whether the specified selection is in a state to support modification.
-         *
-         * @argument {selection} selection      The selection
-         */
-        supportsModification: function (selection) {
-            if (selection.size() !== 1) {
-                return false;
-            }
-
-            // get the selection data
-            var selectionData = selection.datum();
-
-            var supportsModification = false;
-            if (nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
-                supportsModification = !(selectionData.status.aggregateSnapshot.runStatus === 'Running' || selectionData.status.aggregateSnapshot.activeThreadCount > 0);
-            } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                supportsModification = !(selectionData.status.transmissionStatus === 'Transmitting' || selectionData.status.aggregateSnapshot.activeThreadCount > 0);
-            } else if (nfCanvasUtils.isProcessGroup(selection)) {
-                supportsModification = true;
-            } else if (nfCanvasUtils.isFunnel(selection)) {
-                supportsModification = true;
-            } else if (nfCanvasUtils.isLabel(selection)) {
-                supportsModification = true;
-            } else if (nfCanvasUtils.isConnection(selection)) {
-                var isSourceConfigurable = false;
-                var isDestinationConfigurable = false;
-
-                var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(selectionData);
-                var source = d3.select('#id-' + sourceComponentId);
-                if (!source.empty()) {
-                    if (nfCanvasUtils.isRemoteProcessGroup(source) || nfCanvasUtils.isProcessGroup(source)) {
-                        isSourceConfigurable = true;
-                    } else {
-                        isSourceConfigurable = nfCanvasUtils.supportsModification(source);
-                    }
-                }
-
-                var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(selectionData);
-                var destination = d3.select('#id-' + destinationComponentId);
-                if (!destination.empty()) {
-                    if (nfCanvasUtils.isRemoteProcessGroup(destination) || nfCanvasUtils.isProcessGroup(destination)) {
-                        isDestinationConfigurable = true;
-                    } else {
-                        isDestinationConfigurable = nfCanvasUtils.supportsModification(destination);
-                    }
-                }
-
-                supportsModification = isSourceConfigurable && isDestinationConfigurable;
-            }
-            return supportsModification;
-        },
-
-        /**
-         * Determines the connectable type for the specified source selection.
-         *
-         * @argument {selection} selection      The selection
-         */
-        getConnectableTypeForSource: function (selection) {
-            var type;
-            if (nfCanvasUtils.isProcessor(selection)) {
-                type = 'PROCESSOR';
-            } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                type = 'REMOTE_OUTPUT_PORT';
-            } else if (nfCanvasUtils.isProcessGroup(selection)) {
-                type = 'OUTPUT_PORT';
-            } else if (nfCanvasUtils.isInputPort(selection)) {
-                type = 'INPUT_PORT';
-            } else if (nfCanvasUtils.isFunnel(selection)) {
-                type = 'FUNNEL';
-            }
-            return type;
-        },
-
-        /**
-         * Determines the connectable type for the specified destination selection.
-         *
-         * @argument {selection} selection      The selection
-         */
-        getConnectableTypeForDestination: function (selection) {
-            var type;
-            if (nfCanvasUtils.isProcessor(selection)) {
-                type = 'PROCESSOR';
-            } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                type = 'REMOTE_INPUT_PORT';
-            } else if (nfCanvasUtils.isProcessGroup(selection)) {
-                type = 'INPUT_PORT';
-            } else if (nfCanvasUtils.isOutputPort(selection)) {
-                type = 'OUTPUT_PORT';
-            } else if (nfCanvasUtils.isFunnel(selection)) {
-                type = 'FUNNEL';
-            }
-            return type;
-        },
-
-        /**
-         * Determines if the graph is currently in a state to copy.
-         *
-         * @argument {selection} selection    The selection
-         */
-        isCopyable: function (selection) {
-            // if nothing is selected return
-            if (selection.empty()) {
-                return false;
-            }
-
-            if (nfCanvasUtils.canRead(selection) === false) {
-                return false;
-            }
-
-            // determine how many copyable components are selected
-            var copyable = selection.filter(function (d) {
-                var selected = d3.select(this);
-                if (nfCanvasUtils.isConnection(selected)) {
-                    var sourceIncluded = !selection.filter(function (source) {
-                        var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(d);
-                        return sourceComponentId === source.id;
-                    }).empty();
-                    var destinationIncluded = !selection.filter(function (destination) {
-                        var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(d);
-                        return destinationComponentId === destination.id;
-                    }).empty();
-                    return sourceIncluded && destinationIncluded;
-                } else {
-                    return nfCanvasUtils.isProcessor(selected) || nfCanvasUtils.isFunnel(selected) || nfCanvasUtils.isLabel(selected) || nfCanvasUtils.isProcessGroup(selected) || nfCanvasUtils.isRemoteProcessGroup(selected) || nfCanvasUtils.isInputPort(selected) || nfCanvasUtils.isOutputPort(selected);
-                }
-            });
-
-            // ensure everything selected is copyable
-            return selection.size() === copyable.size();
-        },
-
-        /**
-         * Determines if something is currently pastable.
-         */
-        isPastable: function () {
-            return nfCanvas.canWrite() && nfClipboard.isCopied();
-        },
-
-        /**
-         * Persists the current user view.
-         */
-        persistUserView: function () {
-            var name = config.storage.namePrefix + nfCanvas.getGroupId();
-
-            // create the item to store
-            var translate = nfCanvas.View.translate();
-            var item = {
-                scale: nfCanvas.View.scale(),
-                translateX: translate[0],
-                translateY: translate[1]
-            };
-
-            // store the item
-            nfStorage.setItem(name, item);
-        },
-
-        /**
-         * Gets the name for this connection.
-         *
-         * @param {object} connection
-         */
-        formatConnectionName: function (connection) {
-            if (!nfCommon.isBlank(connection.name)) {
-                return connection.name;
-            } else if (nfCommon.isDefinedAndNotNull(connection.selectedRelationships)) {
-                return connection.selectedRelationships.join(', ');
-            }
-            return '';
-        },
-
-        /**
-         * Reloads a connection's source and destination.
-         *
-         * @param {string} sourceComponentId          The connection source id
-         * @param {string} destinationComponentId     The connection destination id
-         */
-        reloadConnectionSourceAndDestination: function (sourceComponentId, destinationComponentId) {
-            if (nfCommon.isBlank(sourceComponentId) === false) {
-                var source = d3.select('#id-' + sourceComponentId);
-                if (source.empty() === false) {
-                    nfGraph.reload(source);
-                }
-            }
-            if (nfCommon.isBlank(destinationComponentId) === false) {
-                var destination = d3.select('#id-' + destinationComponentId);
-                if (destination.empty() === false) {
-                    nfGraph.reload(destination);
-                }
-            }
-        },
-
-        /**
-         * Returns the component id of the source of this processor. If the connection is attached
-         * to a port in a [sub|remote] group, the component id will be that of the group. Otherwise
-         * it is the component itself.
-         *
-         * @param {object} connection   The connection in question
-         */
-        getConnectionSourceComponentId: function (connection) {
-            var sourceId = connection.sourceId;
-            if (connection.sourceGroupId !== nfCanvas.getGroupId()) {
-                sourceId = connection.sourceGroupId;
-            }
-            return sourceId;
-        },
-
-        /**
-         * Returns the component id of the source of this processor. If the connection is attached
-         * to a port in a [sub|remote] group, the component id will be that of the group. Otherwise
-         * it is the component itself.
-         *
-         * @param {object} connection   The connection in question
-         */
-        getConnectionDestinationComponentId: function (connection) {
-            var destinationId = connection.destinationId;
-            if (connection.destinationGroupId !== nfCanvas.getGroupId()) {
-                destinationId = connection.destinationGroupId;
-            }
-            return destinationId;
-        },
-
-        /**
-         * Attempts to restore a persisted view. Returns a flag that indicates if the
-         * view was restored.
-         */
-        restoreUserView: function () {
-            var viewRestored = false;
-
-            try {
-                // see if we can restore the view position from storage
-                var name = config.storage.namePrefix + nfCanvas.getGroupId();
-                var item = nfStorage.getItem(name);
-
-                // ensure the item is valid
-                if (nfCommon.isDefinedAndNotNull(item)) {
-                    if (isFinite(item.scale) && isFinite(item.translateX) && isFinite(item.translateY)) {
-                        // restore previous view
-                        nfCanvas.View.translate([item.translateX, item.translateY]);
-                        nfCanvas.View.scale(item.scale);
-
-                        // refresh the canvas
-                        nfCanvas.View.refresh({
-                            transition: true
-                        });
-
-                        // mark the view was restore
-                        viewRestored = true;
-                    }
-                }
-            } catch (e) {
-                // likely could not parse item.. ignoring
-            }
-
-            return viewRestored;
-        },
-
-        /**
-         * Gets the origin of the bounding box for the specified selection.
-         *
-         * @argument {selection} selection      The selection
-         */
-        getOrigin: function (selection) {
-            var origin = {};
-
-            selection.each(function (d) {
-                var selected = d3.select(this);
-                if (!nfCanvasUtils.isConnection(selected)) {
-                    if (nfCommon.isUndefined(origin.x) || d.position.x < origin.x) {
-                        origin.x = d.position.x;
-                    }
-                    if (nfCommon.isUndefined(origin.y) || d.position.y < origin.y) {
-                        origin.y = d.position.y;
-                    }
-                }
-            });
-
-            return origin;
-        },
-
-        /**
-         * Moves the specified components into the current parent group.
-         *
-         * @param {selection} components
-         */
-        moveComponentsToParent: function (components) {
-            var groupId = nfCanvas.getParentGroupId();
-
-            // if the group id is null, we're already in the top most group
-            if (groupId === null) {
-                nfDialog.showOkDialog({
-                    headerText: 'Process Group',
-                    dialogContent: 'Components are already in the topmost group.'
-                });
-            } else {
-                moveComponents(components, groupId);
-            }
-        },
-
-        /**
-         * Moves the specified components into the specified group.
-         *
-         * @param {selection} components    The components to move
-         * @param {selection} group         The destination group
-         */
-        moveComponents: function (components, group) {
-            var groupData = group.datum();
-
-            // move the components into the destination and...
-            moveComponents(components, groupData.id).done(function () {
-                // reload the target group
-                nfCanvasUtils.getComponentByType('ProcessGroup').reload(groupData.id);
-            });
-        },
-
-        /**
-         * Removes any dangling edges. All components are retained as well as any
-         * edges whose source and destination are also retained.
-         *
-         * @param {selection} selection
-         * @returns {array}
-         */
-        trimDanglingEdges: function (selection) {
-            // returns whether the source and destination of the specified connection are present in the specified selection
-            var keepConnection = function (connection) {
-                var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connection);
-                var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connection);
-
-                // determine if both source and destination are selected
-                var includesSource = false;
-                var includesDestination = false;
-                selection.each(function (d) {
-                    if (d.id === sourceComponentId) {
-                        includesSource = true;
-                    }
-                    if (d.id === destinationComponentId) {
-                        includesDestination = true;
-                    }
-                });
-
-                return includesSource && includesDestination;
-            };
-
-            // include all components and connections whose source/destination are also selected
-            return selection.filter(function (d) {
-                if (d.type === 'Connection') {
-                    return keepConnection(d);
-                } else {
-                    return true;
-                }
-            });
-        },
-
-        /**
-         * Determines if the component in the specified selection is a valid connection source.
-         *
-         * @param {selection} selection         The selection
-         * @return {boolean} Whether the selection is a valid connection source
-         */
-        isValidConnectionSource: function (selection) {
-            if (selection.size() !== 1) {
-                return false;
-            }
-
-            // always allow connections from process groups
-            if (nfCanvasUtils.isProcessGroup(selection)) {
-                return true;
-            }
-
-            // require read and write for a connection source since we'll need to read the source to obtain valid relationships, etc
-            if (nfCanvasUtils.canRead(selection) === false || nfCanvasUtils.canModify(selection) === false) {
-                return false;
-            }
-
-            return nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isRemoteProcessGroup(selection) ||
-                nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isFunnel(selection);
-        },
-
-        /**
-         * Determines if the component in the specified selection is a valid connection destination.
-         *
-         * @param {selection} selection         The selection
-         * @return {boolean} Whether the selection is a valid connection destination
-         */
-        isValidConnectionDestination: function (selection) {
-            if (selection.size() !== 1) {
-                return false;
-            }
-
-            if (nfCanvasUtils.isProcessGroup(selection)) {
-                return true;
-            }
-
-            // require write for a connection destination
-            if (nfCanvasUtils.canModify(selection) === false) {
-                return false;
-            }
-
-            if (nfCanvasUtils.isRemoteProcessGroup(selection) || nfCanvasUtils.isOutputPort(selection) || nfCanvasUtils.isFunnel(selection)) {
-                return true;
-            }
-
-            // if processor, ensure it supports input
-            if (nfCanvasUtils.isProcessor(selection)) {
-                var destinationData = selection.datum();
-                return destinationData.inputRequirement !== 'INPUT_FORBIDDEN';
-            }
-        },
-
-        /**
-         * Returns whether the authorizer is configurable.
-         */
-        isConfigurableAuthorizer: function () {
-            return nfCanvas.isConfigurableAuthorizer();
-        },
-
-        /**
-         * Set the group id.
-         *
-         * @argument {string} gi       The group id
-         */
-        setGroupId: function (gi) {
-            return nfCanvas.setGroupId(gi);
-        },
-
-        /**
-         * Get the group id.
-         */
-        getGroupId: function () {
-            return nfCanvas.getGroupId();
-        },
-
-        /**
-         * Get the group name.
-         */
-        getGroupName: function () {
-            return nfCanvas.getGroupName();
-        },
-
-        /**
-         * Get the parent group id.
-         */
-        getParentGroupId: function () {
-            return nfCanvas.getParentGroupId();
-        },
-
-        /**
-         * Reloads the status for the entire canvas (components and flow.)
-         */
-        reload: function () {
-            return nfCanvas.reload({
-                'transition': true
-            });
-        },
-
-        /**
-         * Whether the current user can read from this group.
-         *
-         * @returns {boolean}   can write
-         */
-        canReadFromGroup: function () {
-            return nfCanvas.canRead();
-        },
-
-        /**
-         * Whether the current user can write in this group.
-         *
-         * @returns {boolean}   can write
-         */
-        canWrite: function () {
-            return nfCanvas.canWrite();
-        },
-
-        /**
-         * Refreshes the view based on the configured translation and scale.
-         *
-         * @param {object} options Options for the refresh operation
-         */
-        refreshCanvasView: function (options) {
-            return nfCanvas.View.refresh(options);
-        },
-
-        /**
-         * Sets/gets the current scale.
-         *
-         * @param {number} scale        The new scale
-         */
-        scaleCanvasView: function (scale) {
-            return nfCanvas.View.scale(scale);
-        },
-
-        /**
-         * Sets/gets the current translation.
-         *
-         * @param {array} translate     [x, y]
-         */
-        translateCanvasView: function (translate) {
-            return nfCanvas.View.translate(translate);
-        },
-
-        /**
-         * Zooms to fit the entire graph on the canvas.
-         */
-        fitCanvasView: function () {
-            return nfCanvas.View.fit();
-        },
-
-        /**
-         * Zooms in a single zoom increment.
-         */
-        zoomCanvasViewIn: function () {
-            return nfCanvas.View.zoomIn();
-        },
-
-        /**
-         * Zooms out a single zoom increment.
-         */
-        zoomCanvasViewOut: function () {
-            return nfCanvas.View.zoomOut();
-        },
-
-        /**
-         * Zooms to the actual size (1 to 1).
-         */
-        actualSizeCanvasView: function () {
-            return nfCanvas.View.actualSize();
-        },
-
-        /**
-         * Whether or not a component should be rendered based solely on the current scale.
-         *
-         * @returns {Boolean}
-         */
-        shouldRenderPerScale: function () {
-            return nfCanvas.View.shouldRenderPerScale();
-        },
-
-        /**
-         * Gets the canvas offset.
-         */
-        getCanvasOffset: function () {
-            return nfCanvas.CANVAS_OFFSET;
-        }
-    };
-    return nfCanvasUtils;
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
deleted file mode 100644
index 74b43d860719..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
+++ /dev/null
@@ -1,1330 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Common',
-                'nf.Graph',
-                'nf.Shell',
-                'nf.ng.Bridge',
-                'nf.ClusterSummary',
-                'nf.ErrorHandler',
-                'nf.Storage',
-                'nf.CanvasUtils',
-                'nf.Birdseye',
-                'nf.ContextMenu',
-                'nf.Actions',
-                'nf.ProcessGroup'],
-            function ($, d3, nfCommon, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup) {
-                return (nf.Canvas = factory($, d3, nfCommon, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Canvas =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.Common'),
-                require('nf.Graph'),
-                require('nf.Shell'),
-                require('nf.ng.Bridge'),
-                require('nf.ClusterSummary'),
-                require('nf.ErrorHandler'),
-                require('nf.Storage'),
-                require('nf.CanvasUtils'),
-                require('nf.Birdseye'),
-                require('nf.ContextMenu'),
-                require('nf.Actions'),
-                require('nf.ProcessGroup')));
-    } else {
-        nf.Canvas = factory(root.$,
-            root.d3,
-            root.nf.Common,
-            root.nf.Graph,
-            root.nf.Shell,
-            root.nf.ng.Bridge,
-            root.nf.ClusterSummary,
-            root.nf.ErrorHandler,
-            root.nf.Storage,
-            root.nf.CanvasUtils,
-            root.nf.Birdseye,
-            root.nf.ContextMenu,
-            root.nf.Actions,
-            root.nf.ProcessGroup);
-    }
-}(this, function ($, d3, nfCommon, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup) {
-    'use strict';
-
-    var SCALE = 1;
-    var TRANSLATE = [0, 0];
-    var INCREMENT = 1.2;
-    var MAX_SCALE = 8;
-    var MIN_SCALE = 0.2;
-    var MIN_SCALE_TO_RENDER = 0.6;
-
-    var polling = false;
-    var allowPageRefresh = false;
-    var groupId = 'root';
-    var groupName = null;
-    var permissions = null;
-    var parentGroupId = null;
-    var configurableAuthorizer = false;
-    var svg = null;
-    var canvas = null;
-
-    var canvasClicked = false;
-    var panning = false;
-
-    var config = {
-        urls: {
-            api: '../nifi-api',
-            currentUser: '../nifi-api/flow/current-user',
-            controllerBulletins: '../nifi-api/flow/controller/bulletins',
-            kerberos: '../nifi-api/access/kerberos',
-            revision: '../nifi-api/flow/revision',
-            banners: '../nifi-api/flow/banners'
-        }
-    };
-
-    /**
-     * Register the poller.
-     *
-     * @argument {int} autoRefreshInterval      The auto refresh interval
-     */
-    var poll = function (autoRefreshInterval) {
-        // ensure we're suppose to poll
-        if (polling) {
-            // reload the status
-            nfCanvas.reload({
-                'transition': true
-            }).done(function () {
-                // start the wait to poll again
-                setTimeout(function () {
-                    poll(autoRefreshInterval);
-                }, autoRefreshInterval * 1000);
-            });
-        }
-    };
-
-    /**
-     * Refreshes the graph.
-     *
-     * @argument {string} processGroupId        The process group id
-     * @argument {object} options               Configuration options
-     */
-    var reloadProcessGroup = function (processGroupId, options) {
-        var now = new Date().getTime();
-
-        // load the controller
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupId),
-            dataType: 'json'
-        }).done(function (flowResponse) {
-            // get the controller and its contents
-            var processGroupFlow = flowResponse.processGroupFlow;
-
-            // set the group details
-            nfCanvas.setGroupId(processGroupFlow.id);
-
-            // get the current group name from the breadcrumb
-            var breadcrumb = processGroupFlow.breadcrumb;
-            if (breadcrumb.permissions.canRead) {
-                nfCanvas.setGroupName(breadcrumb.breadcrumb.name);
-            } else {
-                nfCanvas.setGroupName(breadcrumb.id);
-            }
-
-            // update the access policies
-            permissions = flowResponse.permissions;
-
-            // update the breadcrumbs
-            nfNgBridge.injector.get('breadcrumbsCtrl').resetBreadcrumbs();
-            // inform Angular app values have changed
-            nfNgBridge.digest();
-            nfNgBridge.injector.get('breadcrumbsCtrl').generateBreadcrumbs(breadcrumb);
-            nfNgBridge.injector.get('breadcrumbsCtrl').resetScrollPosition();
-
-            // update the timestamp
-            $('#stats-last-refreshed').text(processGroupFlow.lastRefreshed);
-
-            // set the parent id if applicable
-            if (nfCommon.isDefinedAndNotNull(processGroupFlow.parentGroupId)) {
-                nfCanvas.setParentGroupId(processGroupFlow.parentGroupId);
-            } else {
-                nfCanvas.setParentGroupId(null);
-            }
-
-            // refresh the graph
-            nfGraph.expireCaches(now);
-            nfGraph.set(processGroupFlow.flow, $.extend({
-                'selectAll': false
-            }, options));
-
-            // update component visibility
-            nfCanvas.View.updateVisibility();
-
-            // update the birdseye
-            nfBirdseye.refresh();
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Loads the current user and updates the current user locally.
-     *
-     * @returns xhr
-     */
-    var loadCurrentUser = function () {
-        // get the current user
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.currentUser,
-            dataType: 'json'
-        }).done(function (currentUser) {
-            // set the current user
-            nfCommon.setCurrentUser(currentUser);
-        });
-    };
-
-    var nfCanvas = {
-        CANVAS_OFFSET: 0,
-
-        /**
-         * Determines if the current broswer supports SVG.
-         */
-        SUPPORTS_SVG: !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect,
-
-        /**
-         * Hides the splash that is displayed while the application is loading.
-         */
-        hideSplash: function () {
-            $('#splash').fadeOut();
-        },
-
-        /**
-         * Remove the status poller.
-         */
-        stopPolling: function () {
-            // set polling flag
-            polling = false;
-        },
-
-        /**
-         * Disable the canvas refresh hot key.
-         */
-        disableRefreshHotKey: function () {
-            allowPageRefresh = true;
-        },
-
-        /**
-         * Reloads the flow from the server based on the currently specified group id.
-         * To load another group, update nfCanvas.setGroupId, clear the canvas, and call nfCanvas.reload.
-         */
-        reload: function (options) {
-            return $.Deferred(function (deferred) {
-                // issue the requests
-                var processGroupXhr = reloadProcessGroup(nfCanvas.getGroupId(), options);
-                var statusXhr = nfNgBridge.injector.get('flowStatusCtrl').reloadFlowStatus();
-                var currentUserXhr = loadCurrentUser();
-                var controllerBulletins = $.ajax({
-                    type: 'GET',
-                    url: config.urls.controllerBulletins,
-                    dataType: 'json'
-                }).done(function (response) {
-                    nfNgBridge.injector.get('flowStatusCtrl').updateBulletins(response);
-                });
-                var clusterSummary = nfClusterSummary.loadClusterSummary().done(function (response) {
-                    var clusterSummary = response.clusterSummary;
-
-                    // update the cluster summary
-                    nfNgBridge.injector.get('flowStatusCtrl').updateClusterSummary(clusterSummary);
-                });
-
-                // wait for all requests to complete
-                $.when(processGroupXhr, statusXhr, currentUserXhr, controllerBulletins, clusterSummary).done(function (processGroupResult) {
-                    // inform Angular app values have changed
-                    nfNgBridge.digest();
-
-                    // resolve the deferred
-                    deferred.resolve(processGroupResult);
-                }).fail(function (xhr, status, error) {
-                    deferred.reject(xhr, status, error);
-                });
-            }).promise();
-        },
-
-        /**
-         * Initializes the canvas.
-         */
-        initCanvas: function () {
-            var canvasContainer = $('#canvas-container');
-
-            // create the canvas
-            svg = d3.select('#canvas-container').append('svg')
-                .on('contextmenu', function () {
-                    // reset the canvas click flag
-                    canvasClicked = false;
-
-                    // since the context menu event propagated back to the canvas, clear the selection
-                    nfCanvasUtils.getSelection().classed('selected', false);
-
-                    // show the context menu on the canvas
-                    nfContextMenu.show();
-
-                    // prevent default browser behavior
-                    d3.event.preventDefault();
-                });
-
-            // create the definitions element
-            var defs = svg.append('defs');
-
-            // create arrow definitions for the various line types
-            defs.selectAll('marker')
-                .data(['normal', 'ghost', 'unauthorized', 'full'])
-                .enter().append('marker')
-                .attr({
-                    'id': function (d) {
-                        return d;
-                    },
-                    'viewBox': '0 0 6 6',
-                    'refX': 5,
-                    'refY': 3,
-                    'markerWidth': 6,
-                    'markerHeight': 6,
-                    'orient': 'auto',
-                    'fill': function (d) {
-                        if (d === 'ghost') {
-                            return '#aaaaaa';
-                        } else if (d === 'unauthorized') {
-                            return '#ba554a';
-                        } else if (d === 'full') {
-                            return '#ba554a';
-                        } else {
-                            return '#000000';
-                        }
-                    }
-                })
-                .append('path')
-                .attr('d', 'M2,3 L0,6 L6,3 L0,0 z');
-
-            // filter for drop shadow
-            var componentDropShadowFilter = defs.append('filter')
-                .attr({
-                    'id': 'component-drop-shadow',
-                    'height': '140%',
-                    'y': '-20%'
-                });
-
-            // blur
-            componentDropShadowFilter.append('feGaussianBlur')
-                .attr({
-                    'in': 'SourceAlpha',
-                    'stdDeviation': 3,
-                    'result': 'blur'
-                });
-
-            // offset
-            componentDropShadowFilter.append('feOffset')
-                .attr({
-                    'in': 'blur',
-                    'dx': 0,
-                    'dy': 1,
-                    'result': 'offsetBlur'
-                });
-
-            // color/opacity
-            componentDropShadowFilter.append('feFlood')
-                .attr({
-                    'flood-color': '#000000',
-                    'flood-opacity': 0.4,
-                    'result': 'offsetColor'
-                });
-
-            // combine
-            componentDropShadowFilter.append('feComposite')
-                .attr({
-                    'in': 'offsetColor',
-                    'in2': 'offsetBlur',
-                    'operator': 'in',
-                    'result': 'offsetColorBlur'
-                });
-
-            // stack the effect under the source graph
-            var componentDropShadowFeMerge = componentDropShadowFilter.append('feMerge');
-            componentDropShadowFeMerge.append('feMergeNode')
-                .attr('in', 'offsetColorBlur');
-            componentDropShadowFeMerge.append('feMergeNode')
-                .attr('in', 'SourceGraphic');
-
-            // filter for drop shadow
-            var connectionFullDropShadowFilter = defs.append('filter')
-                .attr({
-                    'id': 'connection-full-drop-shadow',
-                    'height': '140%',
-                    'y': '-20%'
-                });
-
-            // blur
-            connectionFullDropShadowFilter.append('feGaussianBlur')
-                .attr({
-                    'in': 'SourceAlpha',
-                    'stdDeviation': 3,
-                    'result': 'blur'
-                });
-
-            // offset
-            connectionFullDropShadowFilter.append('feOffset')
-                .attr({
-                    'in': 'blur',
-                    'dx': 0,
-                    'dy': 1,
-                    'result': 'offsetBlur'
-                });
-
-            // color/opacity
-            connectionFullDropShadowFilter.append('feFlood')
-                .attr({
-                    'flood-color': '#ba554a',
-                    'flood-opacity': 1,
-                    'result': 'offsetColor'
-                });
-
-            // combine
-            connectionFullDropShadowFilter.append('feComposite')
-                .attr({
-                    'in': 'offsetColor',
-                    'in2': 'offsetBlur',
-                    'operator': 'in',
-                    'result': 'offsetColorBlur'
-                });
-
-            // stack the effect under the source graph
-            var connectionFullFeMerge = connectionFullDropShadowFilter.append('feMerge');
-            connectionFullFeMerge.append('feMergeNode')
-                .attr('in', 'offsetColorBlur');
-            connectionFullFeMerge.append('feMergeNode')
-                .attr('in', 'SourceGraphic');
-
-            // create the canvas element
-            canvas = svg.append('g')
-                .attr({
-                    'transform': 'translate(' + TRANSLATE + ') scale(' + SCALE + ')',
-                    'pointer-events': 'all',
-                    'id': 'canvas'
-                });
-
-            // handle canvas events
-            svg.on('mousedown.selection', function () {
-                canvasClicked = true;
-
-                if (d3.event.button !== 0) {
-                    // prevent further propagation (to parents and others handlers
-                    // on the same element to prevent zoom behavior)
-                    d3.event.stopImmediatePropagation();
-                    return;
-                }
-
-                // show selection box if shift is held down
-                if (d3.event.shiftKey) {
-                    var position = d3.mouse(canvas.node());
-                    canvas.append('rect')
-                        .attr('rx', 6)
-                        .attr('ry', 6)
-                        .attr('x', position[0])
-                        .attr('y', position[1])
-                        .attr('class', 'selection')
-                        .attr('width', 0)
-                        .attr('height', 0)
-                        .attr('stroke-width', function () {
-                            return 1 / nfCanvas.View.scale();
-                        })
-                        .attr('stroke-dasharray', function () {
-                            return 4 / nfCanvas.View.scale();
-                        })
-                        .datum(position);
-
-                    // prevent further propagation (to parents and others handlers
-                    // on the same element to prevent zoom behavior)
-                    d3.event.stopImmediatePropagation();
-
-                    // prevents the browser from changing to a text selection cursor
-                    d3.event.preventDefault();
-                }
-            })
-                .on('mousemove.selection', function () {
-                    // update selection box if shift is held down
-                    if (d3.event.shiftKey) {
-                        // get the selection box
-                        var selectionBox = d3.select('rect.selection');
-                        if (!selectionBox.empty()) {
-                            // get the original position
-                            var originalPosition = selectionBox.datum();
-                            var position = d3.mouse(canvas.node());
-
-                            var d = {};
-                            if (originalPosition[0] < position[0]) {
-                                d.x = originalPosition[0];
-                                d.width = position[0] - originalPosition[0];
-                            } else {
-                                d.x = position[0];
-                                d.width = originalPosition[0] - position[0];
-                            }
-
-                            if (originalPosition[1] < position[1]) {
-                                d.y = originalPosition[1];
-                                d.height = position[1] - originalPosition[1];
-                            } else {
-                                d.y = position[1];
-                                d.height = originalPosition[1] - position[1];
-                            }
-
-                            // update the selection box
-                            selectionBox.attr(d);
-
-                            // prevent further propagation (to parents)
-                            d3.event.stopPropagation();
-                        }
-                    }
-                })
-                .on('mouseup.selection', function () {
-                    // ensure this originated from clicking the canvas, not a component.
-                    // when clicking on a component, the event propagation is stopped so
-                    // it never reaches the canvas. we cannot do this however on up events
-                    // since the drag events break down
-                    if (canvasClicked === false) {
-                        return;
-                    }
-
-                    // reset the canvas click flag
-                    canvasClicked = false;
-
-                    // get the selection box
-                    var selectionBox = d3.select('rect.selection');
-                    if (!selectionBox.empty()) {
-                        var selectionBoundingBox = {
-                            x: parseInt(selectionBox.attr('x'), 10),
-                            y: parseInt(selectionBox.attr('y'), 10),
-                            width: parseInt(selectionBox.attr('width'), 10),
-                            height: parseInt(selectionBox.attr('height'), 10)
-                        };
-
-                        // see if a component should be selected or not
-                        d3.selectAll('g.component').classed('selected', function (d) {
-                            // consider it selected if its already selected or enclosed in the bounding box
-                            return d3.select(this).classed('selected') ||
-                                d.position.x >= selectionBoundingBox.x && (d.position.x + d.dimensions.width) <= (selectionBoundingBox.x + selectionBoundingBox.width) &&
-                                d.position.y >= selectionBoundingBox.y && (d.position.y + d.dimensions.height) <= (selectionBoundingBox.y + selectionBoundingBox.height);
-                        });
-
-                        // see if a connection should be selected or not
-                        d3.selectAll('g.connection').classed('selected', function (d) {
-                            // consider all points
-                            var points = [d.start].concat(d.bends, [d.end]);
-
-                            // determine the bounding box
-                            var x = d3.extent(points, function (pt) {
-                                return pt.x;
-                            });
-                            var y = d3.extent(points, function (pt) {
-                                return pt.y;
-                            });
-
-                            // consider it selected if its already selected or enclosed in the bounding box
-                            return d3.select(this).classed('selected') ||
-                                x[0] >= selectionBoundingBox.x && x[1] <= (selectionBoundingBox.x + selectionBoundingBox.width) &&
-                                y[0] >= selectionBoundingBox.y && y[1] <= (selectionBoundingBox.y + selectionBoundingBox.height);
-                        });
-
-                        // remove the selection box
-                        selectionBox.remove();
-                    } else if (panning === false) {
-                        // deselect as necessary if we are not panning
-                        nfCanvasUtils.getSelection().classed('selected', false);
-                    }
-
-                    // inform Angular app values have changed
-                    nfNgBridge.digest();
-                });
-
-            // define a function for update the graph dimensions
-            var updateGraphSize = function () {
-                // get the location of the bottom of the graph
-                var footer = $('#banner-footer');
-                var bottom = 0;
-                if (footer.is(':visible')) {
-                    bottom = footer.height();
-                }
-
-                // calculate size
-                var top = parseInt(canvasContainer.css('top'), 10);
-                var windowHeight = $(window).height();
-                var canvasHeight = (windowHeight - (bottom + top));
-
-                // canvas/svg
-                canvasContainer.css({
-                    'height': canvasHeight + 'px',
-                    'bottom': bottom + 'px'
-                });
-                svg.attr({
-                    'height': canvasContainer.height(),
-                    'width': $(window).width()
-                });
-
-                //breadcrumbs
-                nfNgBridge.injector.get('breadcrumbsCtrl').updateBreadcrumbsCss({'bottom': bottom + 'px'});
-
-                // body
-                $('#canvas-body').css({
-                    'height': windowHeight + 'px',
-                    'width': $(window).width() + 'px'
-                });
-            };
-
-            // define a function for update the flow status dimensions
-            var updateFlowStatusContainerSize = function () {
-                $('#flow-status-container').css({
-                    'width': ((($('#nifi-logo').width() + $('#component-container').width())/$(window).width())*100)*2 + '%'
-                });
-            };
-            updateFlowStatusContainerSize();
-
-            // listen for events to go to components
-            $('body').on('GoTo:Component', function (e, item) {
-                nfCanvasUtils.showComponent(item.parentGroupId, item.id);
-            });
-
-            // listen for events to go to process groups
-            $('body').on('GoTo:ProcessGroup', function (e, item) {
-                nfProcessGroup.enterGroup(item.id).done(function () {
-                    nfCanvasUtils.getSelection().classed('selected', false);
-
-                    // inform Angular app that values have changed
-                    nfNgBridge.digest();
-                });
-            });
-
-            // listen for browser resize events to reset the graph size
-            $(window).on('resize', function (e) {
-                if (e.target === window) {
-                    // close the hamburger menu if open
-                    if($('.md-menu-backdrop').is(':visible') === true){
-                        $('.md-menu-backdrop').click();
-                    }
-
-                    updateGraphSize();
-                    updateFlowStatusContainerSize();
-
-                    // resize shell when appropriate
-                    var shell = $('#shell-dialog');
-                    if (shell.is(':visible')){
-                        setTimeout(function(shell){
-                            nfShell.resizeContent(shell);
-                            if(shell.find('#shell-iframe').is(':visible')) {
-                                nfShell.resizeIframe(shell);
-                            }
-                        }, 50, shell);
-                    }
-
-                    // resize dialogs when appropriate
-                    var dialogs = $('.dialog');
-                    for (var i = 0, len = dialogs.length; i < len; i++) {
-                        if ($(dialogs[i]).is(':visible')){
-                            setTimeout(function(dialog){
-                                dialog.modal('resize');
-                            }, 50, $(dialogs[i]));
-                        }
-                    }
-
-                    // resize grids when appropriate
-                    var gridElements = $('*[class*="slickgrid_"]');
-                    for (var j = 0, len = gridElements.length; j < len; j++) {
-                        if ($(gridElements[j]).is(':visible')){
-                            setTimeout(function(gridElement){
-                                gridElement.data('gridInstance').resizeCanvas();
-                            }, 50, $(gridElements[j]));
-                        }
-                    }
-
-                    // toggle tabs .scrollable when appropriate
-                    var tabsContainers = $('.tab-container');
-                    var tabsContents = [];
-                    for (var k = 0, len = tabsContainers.length; k < len; k++) {
-                        if ($(tabsContainers[k]).is(':visible')){
-                            tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
-                        }
-                    }
-                    $.each(tabsContents, function (index, tabsContent) {
-                        nfCommon.toggleScrollable(tabsContent.get(0));
-                    });
-                }
-            }).on('keydown', function (evt) {
-                // if a dialog is open, disable canvas shortcuts
-                if ($('.dialog').is(':visible') || $('#search-field').is(':focus')) {
-                    return;
-                }
-
-                // get the current selection
-                var selection = nfCanvasUtils.getSelection();
-
-                // handle shortcuts
-                var isCtrl = evt.ctrlKey || evt.metaKey;
-                if (isCtrl) {
-                    if (evt.keyCode === 82) {
-                        if (allowPageRefresh === true) {
-                            location.reload();
-                            return;
-                        }
-                        // ctrl-r
-                        nfActions.reload();
-
-                        // default prevented in nf-universal-capture.js
-                    } else if (evt.keyCode === 65) {
-                        // ctrl-a
-                        nfActions.selectAll();
-                        nfNgBridge.digest();
-
-                        // only want to prevent default if the action was performed, otherwise default select all would be overridden
-                        evt.preventDefault();
-                    } else if (evt.keyCode === 67) {
-                        // ctrl-c
-                        if (nfCanvas.canWrite() && nfCanvasUtils.isCopyable(selection)) {
-                            nfActions.copy(selection);
-                        }
-                    } else if (evt.keyCode === 86) {
-                        // ctrl-v
-                        if (nfCanvas.canWrite() && nfCanvasUtils.isPastable()) {
-                            nfActions.paste(selection);
-
-                            // only want to prevent default if the action was performed, otherwise default paste would be overridden
-                            evt.preventDefault();
-                        }
-                    }
-                } else {
-                    if (evt.keyCode === 8 || evt.keyCode === 46) {
-                        // backspace or delete
-                        if (nfCanvas.canWrite() && nfCanvasUtils.areDeletable(selection)) {
-                            nfActions['delete'](selection);
-                        }
-
-                        // default prevented in nf-universal-capture.js
-                    }
-                }
-            });
-
-            // get the banners and update the page accordingly
-            $.ajax({
-                type: 'GET',
-                url: config.urls.banners,
-                dataType: 'json'
-            }).done(function (response) {
-                // ensure the banners response is specified
-                if (nfCommon.isDefinedAndNotNull(response.banners)) {
-                    if (nfCommon.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') {
-                        // update the header text and show it
-                        $('#banner-header').addClass('banner-header-background').text(response.banners.headerText).show();
-                        $('#canvas-container').css('top', '98px');
-                    }
-
-                    if (nfCommon.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') {
-                        // update the footer text and show it
-                        var bannerFooter = $('#banner-footer').text(response.banners.footerText).show();
-
-                        var updateBottom = function (elementId) {
-                            var element = $('#' + elementId);
-                            element.css('bottom', parseInt(bannerFooter.css('height'), 10) + 'px');
-                        };
-
-                        // update the position of elements affected by bottom banners
-                        updateBottom('graph');
-                    }
-                }
-
-                // update the graph dimensions
-                updateGraphSize();
-            }).fail(nfErrorHandler.handleAjaxError);
-        },
-
-        /**
-         * Initialize NiFi.
-         */
-        init: function () {
-            // attempt kerberos authentication
-            var ticketExchange = $.Deferred(function (deferred) {
-                if (nfStorage.hasItem('jwt')) {
-                    deferred.resolve();
-                } else {
-                    $.ajax({
-                        type: 'POST',
-                        url: config.urls.kerberos,
-                        dataType: 'text'
-                    }).done(function (jwt) {
-                        // get the payload and store the token with the appropriate expiration
-                        var token = nfCommon.getJwtPayload(jwt);
-                        var expiration = parseInt(token['exp'], 10) * nfCommon.MILLIS_PER_SECOND;
-                        nfStorage.setItem('jwt', jwt, expiration);
-                        deferred.resolve();
-                    }).fail(function () {
-                        deferred.reject();
-                    });
-                }
-            }).promise();
-
-            // load the current user
-            return $.Deferred(function (deferred) {
-                ticketExchange.always(function () {
-                    loadCurrentUser().done(function (currentUser) {
-                        // if the user is logged, we want to determine if they were logged in using a certificate
-                        if (currentUser.anonymous === false) {
-                            // render the users name
-                            $('#current-user').text(currentUser.identity).show();
-
-                            // render the logout button if there is a token locally
-                            if (nfStorage.getItem('jwt') !== null) {
-                                $('#logout-link-container').show();
-                            }
-                        } else {
-                            // set the anonymous user label
-                            nfCommon.setAnonymousUserLabel();
-                        }
-                        deferred.resolve();
-                    }).fail(function (xhr, status, error) {
-                        // there is no anonymous access and we don't know this user - open the login page which handles login/registration/etc
-                        if (xhr.status === 401) {
-                            window.location = '/nifi/login';
-                        } else {
-                            deferred.reject(xhr, status, error);
-                        }
-                    });
-                });
-            }).promise();
-        },
-
-        /**
-         * Set the group id.
-         *
-         * @argument {string} gi       The group id
-         */
-        setGroupId: function (gi) {
-            groupId = gi;
-        },
-
-        /**
-         * Get the group id.
-         */
-        getGroupId: function () {
-            return groupId;
-        },
-
-        /**
-         * Set the group name.
-         *
-         * @argument {string} gn     The group name
-         */
-        setGroupName: function (gn) {
-            groupName = gn;
-        },
-
-        /**
-         * Get the group name.
-         */
-        getGroupName: function () {
-            return groupName;
-        },
-
-        /**
-         * Set the parent group id.
-         *
-         * @argument {string} pgi     The id of the parent group
-         */
-        setParentGroupId: function (pgi) {
-            parentGroupId = pgi;
-        },
-
-        /**
-         * Get the parent group id.
-         */
-        getParentGroupId: function () {
-            return parentGroupId;
-        },
-
-        /**
-         * Set whether the authorizer is configurable.
-         *
-         * @param bool The boolean value representing whether the authorizer is configurable.
-         */
-        setConfigurableAuthorizer: function(bool){
-            configurableAuthorizer = bool;
-        },
-
-        /**
-         * Returns whether the authorizer is configurable.
-         */
-        isConfigurableAuthorizer: function () {
-            return configurableAuthorizer;
-        },
-
-        /**
-         * Whether the current user can read from this group.
-         *
-         * @returns {boolean}   can write
-         */
-        canRead: function () {
-            if (permissions === null) {
-                return false;
-            } else {
-                return permissions.canRead === true;
-            }
-        },
-
-        /**
-         * Whether the current user can write in this group.
-         *
-         * @returns {boolean}   can write
-         */
-        canWrite: function () {
-            if (permissions === null) {
-                return false;
-            } else {
-                return permissions.canWrite === true;
-            }
-        },
-
-        /**
-         * Starts polling.
-         *
-         * @argument {int} autoRefreshInterval      The auto refresh interval
-         */
-        startPolling: function (autoRefreshInterval) {
-            // set polling flag
-            polling = true;
-            poll(autoRefreshInterval);
-        },
-
-        View: (function () {
-
-            /**
-             * Updates component visibility based on their proximity to the screen's viewport.
-             */
-            var updateComponentVisibility = function () {
-                var canvasContainer = $('#canvas-container');
-                var translate = nfCanvas.View.translate();
-                var scale = nfCanvas.View.scale();
-
-                // scale the translation
-                translate = [translate[0] / scale, translate[1] / scale];
-
-                // get the normalized screen width and height
-                var screenWidth = canvasContainer.width() / scale;
-                var screenHeight = canvasContainer.height() / scale;
-
-                // calculate the screen bounds one screens worth in each direction
-                var screenLeft = -translate[0] - screenWidth;
-                var screenTop = -translate[1] - screenHeight;
-                var screenRight = screenLeft + (screenWidth * 3);
-                var screenBottom = screenTop + (screenHeight * 3);
-
-                // detects whether a component is visible and should be rendered
-                var isComponentVisible = function (d) {
-                    if (!nfCanvas.View.shouldRenderPerScale()) {
-                        return false;
-                    }
-
-                    var left = d.position.x;
-                    var top = d.position.y;
-                    var right = left + d.dimensions.width;
-                    var bottom = top + d.dimensions.height;
-
-                    // determine if the component is now visible
-                    return screenLeft < right && screenRight > left && screenTop < bottom && screenBottom > top;
-                };
-
-                // detects whether a connection is visible and should be rendered
-                var isConnectionVisible = function (d) {
-                    if (!nfCanvas.View.shouldRenderPerScale()) {
-                        return false;
-                    }
-
-                    var x, y;
-                    if (d.bends.length > 0) {
-                        var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1);
-                        x = d.bends[i].x;
-                        y = d.bends[i].y;
-                    } else {
-                        x = (d.start.x + d.end.x) / 2;
-                        y = (d.start.y + d.end.y) / 2;
-                    }
-
-                    return screenLeft < x && screenRight > x && screenTop < y && screenBottom > y;
-                };
-
-                // marks the specific component as visible and determines if its entering or leaving visibility
-                var updateVisibility = function (d, isVisible) {
-                    var selection = d3.select('#id-' + d.id);
-                    var visible = isVisible(d);
-                    var wasVisible = selection.classed('visible');
-
-                    // mark the selection as appropriate
-                    selection.classed('visible', visible)
-                        .classed('entering', function () {
-                            return visible && !wasVisible;
-                        }).classed('leaving', function () {
-                        return !visible && wasVisible;
-                    });
-                };
-
-                // get the all components
-                var graph = nfGraph.get();
-
-                // update the visibility for each component
-                $.each(graph.processors, function (_, d) {
-                    updateVisibility(d, isComponentVisible);
-                });
-                $.each(graph.ports, function (_, d) {
-                    updateVisibility(d, isComponentVisible);
-                });
-                $.each(graph.processGroups, function (_, d) {
-                    updateVisibility(d, isComponentVisible);
-                });
-                $.each(graph.remoteProcessGroups, function (_, d) {
-                    updateVisibility(d, isComponentVisible);
-                });
-                $.each(graph.connections, function (_, d) {
-                    updateVisibility(d, isConnectionVisible);
-                });
-            };
-
-            // initialize the zoom behavior
-            var behavior;
-
-            return {
-                init: function () {
-                    var refreshed;
-                    var zoomed = false;
-
-                    // define the behavior
-                    behavior = d3.behavior.zoom()
-                        .scaleExtent([MIN_SCALE, MAX_SCALE])
-                        .translate(TRANSLATE)
-                        .scale(SCALE)
-                        .on('zoomstart', function () {
-                            // hide the context menu
-                            nfContextMenu.hide();
-                        })
-                        .on('zoom', function () {
-                            // if we have zoomed, indicate that we are panning
-                            // to prevent deselection elsewhere
-                            if (zoomed) {
-                                panning = true;
-                            } else {
-                                zoomed = true;
-                            }
-
-                            // see if the scale has changed during this zoom event,
-                            // we want to only transition when zooming in/out as running
-                            // the transitions during pan events is
-                            var transition = d3.event.sourceEvent.type === 'wheel' || d3.event.sourceEvent.type === 'mousewheel';
-
-                            // refresh the canvas
-                            refreshed = nfCanvas.View.refresh({
-                                persist: false,
-                                transition: transition,
-                                refreshComponents: false,
-                                refreshBirdseye: false
-                            });
-                        })
-                        .on('zoomend', function () {
-                            // ensure the canvas was actually refreshed
-                            if (nfCommon.isDefinedAndNotNull(refreshed)) {
-                                nfCanvas.View.updateVisibility();
-
-                                // refresh the birdseye
-                                refreshed.done(function () {
-                                    nfBirdseye.refresh();
-                                });
-
-                                // persist the users view
-                                nfCanvasUtils.persistUserView();
-
-                                // reset the refreshed deferred
-                                refreshed = null;
-                            }
-
-                            panning = false;
-                            zoomed = false;
-                        });
-
-                    // add the behavior to the canvas and disable dbl click zoom
-                    svg.call(behavior).on('dblclick.zoom', null);
-                },
-
-                /**
-                 * Whether or not a component should be rendered based solely on the current scale.
-                 *
-                 * @returns {Boolean}
-                 */
-                shouldRenderPerScale: function () {
-                    return nfCanvas.View.scale() >= MIN_SCALE_TO_RENDER;
-                },
-
-                /**
-                 * Updates component visibility based on the current translation/scale.
-                 */
-                updateVisibility: function () {
-                    updateComponentVisibility();
-                    nfGraph.pan();
-                },
-
-                /**
-                 * Sets/gets the current translation.
-                 *
-                 * @param {array} translate     [x, y]
-                 */
-                translate: function (translate) {
-                    if (nfCommon.isUndefined(translate)) {
-                        return behavior.translate();
-                    } else {
-                        behavior.translate(translate);
-                    }
-                },
-
-                /**
-                 * Sets/gets the current scale.
-                 *
-                 * @param {number} scale        The new scale
-                 */
-                scale: function (scale) {
-                    if (nfCommon.isUndefined(scale)) {
-                        return behavior.scale();
-                    } else {
-                        behavior.scale(scale);
-                    }
-                },
-
-                /**
-                 * Zooms in a single zoom increment.
-                 */
-                zoomIn: function () {
-                    var translate = nfCanvas.View.translate();
-                    var scale = nfCanvas.View.scale();
-                    var newScale = Math.min(scale * INCREMENT, MAX_SCALE);
-
-                    // get the canvas normalized width and height
-                    var canvasContainer = $('#canvas-container');
-                    var screenWidth = canvasContainer.width() / scale;
-                    var screenHeight = canvasContainer.height() / scale;
-
-                    // adjust the scale
-                    nfCanvas.View.scale(newScale);
-
-                    // center around the center of the screen accounting for the translation accordingly
-                    nfCanvasUtils.centerBoundingBox({
-                        x: (screenWidth / 2) - (translate[0] / scale),
-                        y: (screenHeight / 2) - (translate[1] / scale),
-                        width: 1,
-                        height: 1
-                    });
-                },
-
-                /**
-                 * Zooms out a single zoom increment.
-                 */
-                zoomOut: function () {
-                    var translate = nfCanvas.View.translate();
-                    var scale = nfCanvas.View.scale();
-                    var newScale = Math.max(scale / INCREMENT, MIN_SCALE);
-
-                    // get the canvas normalized width and height
-                    var canvasContainer = $('#canvas-container');
-                    var screenWidth = canvasContainer.width() / scale;
-                    var screenHeight = canvasContainer.height() / scale;
-
-                    // adjust the scale
-                    nfCanvas.View.scale(newScale);
-
-                    // center around the center of the screen accounting for the translation accordingly
-                    nfCanvasUtils.centerBoundingBox({
-                        x: (screenWidth / 2) - (translate[0] / scale),
-                        y: (screenHeight / 2) - (translate[1] / scale),
-                        width: 1,
-                        height: 1
-                    });
-                },
-
-                /**
-                 * Zooms to fit the entire graph on the canvas.
-                 */
-                fit: function () {
-                    var translate = nfCanvas.View.translate();
-                    var scale = nfCanvas.View.scale();
-                    var newScale;
-
-                    // get the canvas normalized width and height
-                    var canvasContainer = $('#canvas-container');
-                    var canvasWidth = canvasContainer.width();
-                    var canvasHeight = canvasContainer.height();
-
-                    // get the bounding box for the graph
-                    var graphBox = d3.select('#canvas').node().getBoundingClientRect();
-                    var graphWidth = graphBox.width / scale;
-                    var graphHeight = graphBox.height / scale;
-                    var graphLeft = graphBox.left / scale;
-                    var graphTop = (graphBox.top - nfCanvas.CANVAS_OFFSET) / scale;
-
-
-                    // adjust the scale to ensure the entire graph is visible
-                    if (graphWidth > canvasWidth || graphHeight > canvasHeight) {
-                        newScale = Math.min(canvasWidth / graphWidth, canvasHeight / graphHeight);
-
-                        // ensure the scale is within bounds
-                        newScale = Math.min(Math.max(newScale, MIN_SCALE), MAX_SCALE);
-                    } else {
-                        newScale = 1;
-
-                        // since the entire graph will fit on the canvas, offset origin appropriately
-                        graphLeft -= 100;
-                        graphTop -= 50;
-                    }
-
-                    // set the new scale
-                    nfCanvas.View.scale(newScale);
-
-                    // center as appropriate
-                    nfCanvasUtils.centerBoundingBox({
-                        x: graphLeft - (translate[0] / scale),
-                        y: graphTop - (translate[1] / scale),
-                        width: canvasWidth / newScale,
-                        height: canvasHeight / newScale
-                    });
-                },
-
-                /**
-                 * Zooms to the actual size (1 to 1).
-                 */
-                actualSize: function () {
-                    var translate = nfCanvas.View.translate();
-                    var scale = nfCanvas.View.scale();
-
-                    // get the first selected component
-                    var selection = nfCanvasUtils.getSelection();
-
-                    // set the updated scale
-                    nfCanvas.View.scale(1);
-
-                    // box to zoom towards
-                    var box;
-
-                    // if components have been selected position the view accordingly
-                    if (!selection.empty()) {
-                        // gets the data for the first component
-                        var selectionBox = selection.node().getBoundingClientRect();
-
-                        // get the bounding box for the selected components
-                        box = {
-                            x: (selectionBox.left / scale) - (translate[0] / scale),
-                            y: ((selectionBox.top - nfCanvas.CANVAS_OFFSET) / scale) - (translate[1] / scale),
-                            width: selectionBox.width / scale,
-                            height: selectionBox.height / scale
-                        };
-                    } else {
-                        // get the offset
-                        var canvasContainer = $('#canvas-container');
-
-                        // get the canvas normalized width and height
-                        var screenWidth = canvasContainer.width() / scale;
-                        var screenHeight = canvasContainer.height() / scale;
-
-                        // center around the center of the screen accounting for the translation accordingly
-                        box = {
-                            x: (screenWidth / 2) - (translate[0] / scale),
-                            y: (screenHeight / 2) - (translate[1] / scale),
-                            width: 1,
-                            height: 1
-                        };
-                    }
-
-                    // center as appropriate
-                    nfCanvasUtils.centerBoundingBox(box);
-                },
-
-                /**
-                 * Refreshes the view based on the configured translation and scale.
-                 *
-                 * @param {object} options Options for the refresh operation
-                 */
-                refresh: function (options) {
-                    return $.Deferred(function (deferred) {
-
-                        var persist = true;
-                        var transition = false;
-                        var refreshComponents = true;
-                        var refreshBirdseye = true;
-
-                        // extract the options if specified
-                        if (nfCommon.isDefinedAndNotNull(options)) {
-                            persist = nfCommon.isDefinedAndNotNull(options.persist) ? options.persist : persist;
-                            transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-                            refreshComponents = nfCommon.isDefinedAndNotNull(options.refreshComponents) ? options.refreshComponents : refreshComponents;
-                            refreshBirdseye = nfCommon.isDefinedAndNotNull(options.refreshBirdseye) ? options.refreshBirdseye : refreshBirdseye;
-                        }
-
-                        // update component visibility
-                        if (refreshComponents) {
-                            nfCanvas.View.updateVisibility();
-                        }
-
-                        // persist if appropriate
-                        if (persist === true) {
-                            nfCanvasUtils.persistUserView();
-                        }
-
-                        // update the canvas
-                        if (transition === true) {
-                            canvas.transition()
-                                .duration(500)
-                                .attr('transform', function () {
-                                    return 'translate(' + behavior.translate() + ') scale(' + behavior.scale() + ')';
-                                })
-                                .each('end', function () {
-                                    // refresh birdseye if appropriate
-                                    if (refreshBirdseye === true) {
-                                        nfBirdseye.refresh();
-                                    }
-
-                                    deferred.resolve();
-                                });
-                        } else {
-                            canvas.attr('transform', function () {
-                                return 'translate(' + behavior.translate() + ') scale(' + behavior.scale() + ')';
-                            });
-
-                            // refresh birdseye if appropriate
-                            if (refreshBirdseye === true) {
-                                nfBirdseye.refresh();
-                            }
-
-                            deferred.resolve();
-                        }
-                    }).promise();
-                }
-            };
-        }())
-    };
-
-    return nfCanvas;
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-clipboard.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-clipboard.js
deleted file mode 100644
index c6fdadc78464..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-clipboard.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-/**
- * Clipboard used for copying and pasting content.
- */
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common'],
-            function ($, nfCommon) {
-                return (nf.Clipboard = factory($, nfCommon));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Clipboard =
-            factory(require('jquery'),
-                require('nf.Common')));
-    } else {
-        nf.Clipboard = factory(root.$,
-            root.nf.Common);
-    }
-}(this, function ($, nfCommon) {
-    'use strict';
-
-    var COPY = 'copy';
-    var PASTE = 'paste';
-    var data = null;
-    var listeners = {};
-
-    return {
-        /**
-         * Add a listener to receive copy and paste events.
-         *
-         * @argument {object} listener      A clipboard listener
-         * @argument {function} funct       Callback when clipboard events occur
-         */
-        addListener: function (listener, funct) {
-            listeners[listener] = funct;
-        },
-
-        /**
-         * Remove the specified listener.
-         *
-         * @argument {object} listener      A clipboard listener
-         */
-        removeListener: function (listener) {
-            if (nfCommon.isDefinedAndNotNull(listeners[listener])) {
-                delete listeners[listener];
-            }
-        },
-
-        /**
-         * Copy the specified data.
-         *
-         * @argument {object} d      The data to copy to the clipboard
-         */
-        copy: function (d) {
-            data = d;
-
-            // inform the listeners
-            for (var listener in listeners) {
-                listeners[listener].call(listener, COPY, data);
-            }
-        },
-
-        /**
-         * Checks to see if any data has been copied.
-         */
-        isCopied: function () {
-            return nfCommon.isDefinedAndNotNull(data);
-        },
-
-        /**
-         * Gets the most recent data thats copied. This operation
-         * will remove the corresponding data from the clipboard.
-         */
-        paste: function () {
-            return $.Deferred(function (deferred) {
-                // ensure there was data
-                if (nfCommon.isDefinedAndNotNull(data)) {
-                    var clipboardData = data;
-
-                    // resolve the deferred
-                    deferred.resolve(clipboardData);
-
-                    // clear the clipboard
-                    data = null;
-
-                    // inform the listeners
-                    for (var listener in listeners) {
-                        listeners[listener].call(listener, PASTE, clipboardData);
-                    }
-                } else {
-                    deferred.reject();
-                }
-            }).promise();
-        }
-    };
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
deleted file mode 100644
index 50e47bc94cbd..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
+++ /dev/null
@@ -1,424 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-    /**
-     * Views state for a given component.
-     */
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'Slick',
-                  'nf.ClusterSummary',
-                  'nf.ErrorHandler',
-                  'nf.Dialog',
-                  'nf.Common'],
-              function ($, Slick, nfClusterSummary, nfErrorHandler, nfDialog, nfCommon) {
-                  return (nf.ComponentState = factory($, Slick, nfClusterSummary, nfErrorHandler, nfDialog, nfCommon));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ComponentState =
-              factory(require('jquery'),
-                  require('Slick'),
-                  require('nf.ClusterSummary'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Dialog'),
-                  require('nf.Common')));
-      } else {
-          nf.ComponentState = factory(root.$,
-              root.Slick,
-              root.nf.ClusterSummary,
-              root.nf.ErrorHandler,
-              root.nf.Dialog,
-              root.nf.Common);
-      }
-  }(this, function ($, Slick, nfClusterSummary, nfErrorHandler, nfDialog, nfCommon) {
-      'use strict';
-    
-        /**
-         * Filters the component state table.
-         */
-        var applyFilter = function () {
-            // get the dataview
-            var componentStateTable = $('#component-state-table').data('gridInstance');
-    
-            // ensure the grid has been initialized
-          if (nfCommon.isDefinedAndNotNull(componentStateTable)) {
-                var componentStateData = componentStateTable.getData();
-    
-                // update the search criteria
-                componentStateData.setFilterArgs({
-                    searchString: getFilterText()
-                });
-                componentStateData.refresh();
-            }
-        };
-    
-        /**
-         * Determines if the item matches the filter.
-         *
-         * @param {object} item     The item to filter
-         * @param {object} args     The filter criteria
-         * @returns {boolean}       Whether the item matches the filter
-         */
-        var 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;
-            }
-    
-            // determine if the item matches the filter
-            var matchesKey = item['key'].search(filterExp) >= 0;
-            var matchesValue = item['value'].search(filterExp) >= 0;
-    
-            // conditionally consider the scope
-            var matchesScope = false;
-          if (nfCommon.isDefinedAndNotNull(item['scope'])) {
-                matchesScope = item['scope'].search(filterExp) >= 0;
-            }
-    
-            return matchesKey || matchesValue || matchesScope;
-        };
-    
-        /**
-         * Sorts the specified data using the specified sort details.
-         *
-         * @param {object} sortDetails
-         * @param {object} data
-         */
-        var sort = function (sortDetails, data) {
-            // defines a function for sorting
-            var comparer = function (a, b) {
-              var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-              var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                return aString === bString ? 0 : aString > bString ? 1 : -1;
-            };
-    
-            // perform the sort
-            data.sort(comparer, sortDetails.sortAsc);
-        };
-    
-        /**
-         * Get the text out of the filter field. If the filter field doesn't
-         * have any text it will contain the text 'filter list' so this method
-         * accounts for that.
-         */
-        var getFilterText = function () {
-            return $('#component-state-filter').val();
-        };
-    
-        /**
-         * Clears the component state table.
-         */
-        var clearTable = function () {
-            var componentStateGrid = $('#component-state-table').data('gridInstance');
-            var componentStateData = componentStateGrid.getData();
-            componentStateData.setItems([]);
-    
-            // hide the partial results details message
-            $('#component-state-partial-results-container').hide();
-    
-            // clear the total number entries
-            $('#displayed-component-state-entries').text('0');
-            $('#total-component-state-entries').text('0');
-        };
-    
-        /**
-         * Loads the table with the component state.
-         *
-         * @param {object} componentState
-         */
-        var loadComponentState = function (localState, clusterState) {
-            var count = 0;
-            var totalEntries = 0;
-            var showPartialDetails = false;
-    
-            var componentStateGrid = $('#component-state-table').data('gridInstance');
-            var componentStateData = componentStateGrid.getData();
-    
-            // begin the update
-            componentStateData.beginUpdate();
-    
-            // local state
-          if (nfCommon.isDefinedAndNotNull(localState)) {
-                $.each(localState.state, function (i, stateEntry) {
-                    componentStateData.addItem($.extend({
-                        id: count++,
-                        scope: stateEntry.clusterNodeAddress
-                    }, stateEntry));
-                });
-                totalEntries += localState.totalEntryCount;
-    
-              if (nfCommon.isDefinedAndNotNull(localState.state) && localState.totalEntryCount !== localState.state.length) {
-                    showPartialDetails = true;
-                }
-            }
-    
-          if (nfCommon.isDefinedAndNotNull(clusterState)) {
-                $.each(clusterState.state, function (i, stateEntry) {
-                    componentStateData.addItem($.extend({
-                        id: count++,
-                        scope: 'Cluster'
-                    }, stateEntry));
-                });
-                totalEntries += clusterState.totalEntryCount;
-    
-              if (nfCommon.isDefinedAndNotNull(clusterState.state) && clusterState.totalEntryCount !== clusterState.state.length) {
-                    showPartialDetails = true;
-                }
-            }
-    
-            // complete the update
-            componentStateData.endUpdate();
-            componentStateData.reSort();
-    
-            if (showPartialDetails) {
-                $('#component-state-partial-results-container').show();
-            }
-    
-            // update the total number of state entries
-          $('#total-component-state-entries').text(nfCommon.formatInteger(totalEntries));
-        };
-    
-        /**
-         * Reset the dialog.
-         */
-        var resetDialog = function () {
-            // clear the fields
-            $('#component-state-name').text('');
-            $('#component-state-description').text('');
-    
-            // clear any filter strings
-            $('#component-state-filter').val('');
-    
-            // reset clear link
-            $('#clear-link').removeClass('disabled').attr('title', '');
-    
-            // clear the table
-            clearTable();
-    
-            // clear the component
-            $('#component-state-table').removeData('component');
-        };
-    
-        return {
-            init: function () {
-                // intialize the component state filter
-                $('#component-state-filter').on('keyup', function () {
-                    applyFilter();
-                });
-    
-                // initialize the processor configuration dialog
-                $('#component-state-dialog').modal({
-                    scrollableContentStyle: 'scrollable',
-                  headerText: nf._.msg('nf-component-state.Header1'),
-                    buttons: [{
-                      buttonText: nf._.msg('nf-component-state.Button1'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                $(this).modal('hide');
-                            }
-                        }
-                    }],
-                    handler: {
-                        close: function () {
-                            resetDialog();
-                      },
-                      resize: function () {
-                          $('#component-state-description')
-                              .width($('#component-state-dialog').find('.dialog-content').innerWidth() - 1)
-                              .text($('#component-state-description').attr('title'))
-                              .ellipsis();
-                        }
-                    }
-                });
-    
-                // clear state link
-                $('#clear-link').on('click', function () {
-                    if ($(this).hasClass('disabled') === false) {
-                        var componentStateTable = $('#component-state-table');
-    
-                        // ensure there is state to clear
-                        var componentStateGrid = componentStateTable.data('gridInstance');
-                        var stateEntryCount = componentStateGrid.getDataLength();
-    
-                        if (stateEntryCount > 0) {
-                            var componentEntity = componentStateTable.data('component');
-                            $.ajax({
-                                type: 'POST',
-                                url: componentEntity.uri + '/state/clear-requests',
-                                dataType: 'json'
-                            }).done(function (response) {
-                                // clear the table
-                                clearTable();
-    
-                                // reload the table with no state
-                                loadComponentState()
-                          }).fail(nfErrorHandler.handleAjaxError);
-                        } else {
-                          nfDialog.showOkDialog({
-                              headerText: nf._.msg('nf-component-state.Header1'),
-                              dialogContent: nf._.msg('nf-component-state.Content1')
-                            });
-                        }
-                    }
-                });
-    
-                // initialize the queue listing table
-                var componentStateColumns = [
-                  {
-                      id: 'key',
-                      field: 'key',
-                      name: nf._.msg('nf-component-state.Key'),
-                      sortable: true,
-                      resizable: true
-                  },
-                  {
-                      id: 'value',
-                      field: 'value',
-                      name: nf._.msg('nf-component-state.Value'),
-                      sortable: true,
-                      resizable: true
-                  }
-                ];
-    
-                // conditionally show the cluster node identifier
-              if (nfClusterSummary.isClustered()) {
-                    componentStateColumns.push({
-                        id: 'scope',
-                        field: 'scope',
-                      name: nf._.msg('nf-component-state.Scope'),
-                        sortable: true,
-                        resizable: true
-                    });
-                }
-    
-                var componentStateOptions = {
-                    forceFitColumns: true,
-                    enableTextSelectionOnCells: true,
-                    enableCellNavigation: false,
-                    enableColumnReorder: false,
-                    autoEdit: false,
-                    rowHeight: 24
-                };
-    
-                // initialize the dataview
-                var componentStateData = new Slick.Data.DataView({
-                    inlineFilters: false
-                });
-                componentStateData.setItems([]);
-                componentStateData.setFilterArgs({
-                    searchString: '',
-                    property: 'key'
-                });
-                componentStateData.setFilter(filter);
-    
-                // initialize the sort
-                sort({
-                    columnId: 'key',
-                    sortAsc: true
-                }, componentStateData);
-    
-                // initialize the grid
-                var componentStateGrid = new Slick.Grid('#component-state-table', componentStateData, componentStateColumns, componentStateOptions);
-                componentStateGrid.setSelectionModel(new Slick.RowSelectionModel());
-                componentStateGrid.registerPlugin(new Slick.AutoTooltips());
-                componentStateGrid.setSortColumn('key', true);
-                componentStateGrid.onSort.subscribe(function (e, args) {
-                    sort({
-                        columnId: args.sortCol.field,
-                        sortAsc: args.sortAsc
-                    }, componentStateData);
-                });
-    
-                // wire up the dataview to the grid
-                componentStateData.onRowCountChanged.subscribe(function (e, args) {
-                    componentStateGrid.updateRowCount();
-                    componentStateGrid.render();
-    
-                    // update the total number of displayed items
-                    $('#displayed-component-state-entries').text(args.current);
-                });
-                componentStateData.onRowsChanged.subscribe(function (e, args) {
-                    componentStateGrid.invalidateRows(args.rows);
-                    componentStateGrid.render();
-                });
-    
-                // hold onto an instance of the grid
-                $('#component-state-table').data('gridInstance', componentStateGrid);
-    
-                // initialize the number of display items
-                $('#displayed-component-state-entries').text('0');
-                $('#total-component-state-entries').text('0');
-            },
-    
-            /**
-             * Shows the state for a given component.
-             *
-             * @param {object} componentEntity
-             * @param {boolean} canClear
-             */
-            showState: function (componentEntity, canClear) {
-                return $.ajax({
-                    type: 'GET',
-                    url: componentEntity.uri + '/state',
-                    dataType: 'json'
-                }).done(function (response) {
-                    var componentState = response.componentState;
-                    var componentStateTable = $('#component-state-table');
-    
-                    // load the table
-                    loadComponentState(componentState.localState, componentState.clusterState);
-    
-                  // show the dialog
-                  $('#component-state-dialog').modal('show');
-  
-                    // populate the name/description
-                    $('#component-state-name').text(componentEntity.component.name);
-                  $('#component-state-description')
-                      .width($('#component-state-dialog').find('.dialog-content').innerWidth() - 1)
-                      .text(componentState.stateDescription)
-                      .ellipsis();
-    
-                    // store the component
-                    componentStateTable.data('component', componentEntity);
-    
-                    // only activate the link when appropriate
-                    if (canClear === false) {
-                      $('#clear-link').addClass('disabled').attr('title', nf._.msg('nf-component-state.Message1'));
-                    }
-    
-                    // reset the grid size
-                    var componentStateGrid = componentStateTable.data('gridInstance');
-                    componentStateGrid.resizeCanvas();
-              }).fail(nfErrorHandler.handleAjaxError);
-            }
-        };
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
deleted file mode 100644
index 91d29f612cdc..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
+++ /dev/null
@@ -1,289 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['d3',
-                'nf.Connection',
-                'nf.ConnectionConfiguration',
-                'nf.CanvasUtils'],
-            function (d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils) {
-                return (nf.Connectable = factory(d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Connectable =
-            factory(require('d3'),
-                require('nf.Connection'),
-                require('nf.ConnectionConfiguration'),
-                require('nf.CanvasUtils')));
-    } else {
-        nf.Connectable = factory(root.d3,
-            root.nf.Connection,
-            root.nf.ConnectionConfiguration,
-            root.nf.CanvasUtils);
-    }
-}(this, function (d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils) {
-    'use strict';
-
-    var connect;
-    var canvas;
-    var origin;
-
-    /**
-     * Determines if we want to allow adding connections in the current state:
-     *
-     * 1) When shift is down, we could be adding components to the current selection.
-     * 2) When the selection box is visible, we are in the process of moving all the
-     * components currently selected.
-     * 3) When the drag selection box is visible, we are in the process or selecting components
-     * using the selection box.
-     *
-     * @returns {boolean}
-     */
-    var allowConnection = function () {
-        return !d3.event.shiftKey && d3.select('rect.drag-selection').empty() && d3.select('rect.selection').empty();
-    };
-
-    return {
-        init: function () {
-            canvas = d3.select('#canvas');
-
-            // dragging behavior for the connector
-            connect = d3.behavior.drag()
-                .origin(function (d) {
-                    origin = d3.mouse(canvas.node());
-                    return {
-                        x: origin[0],
-                        y: origin[1]
-                    };
-                })
-                .on('dragstart', function (d) {
-                    // stop further propagation
-                    d3.event.sourceEvent.stopPropagation();
-
-                    // unselect the previous components
-                    nfCanvasUtils.getSelection().classed('selected', false);
-
-                    // mark the source component has selected
-                    var source = d3.select(this.parentNode).classed('selected', true);
-
-                    // mark this component as dragging and selected
-                    d3.select(this).classed('dragging', true);
-
-                    // mark the source of the drag
-                    var sourceData = source.datum();
-
-                    // start the drag line and insert it first to keep it on the bottom
-                    var position = d3.mouse(canvas.node());
-                    canvas.insert('path', ':first-child')
-                        .datum({
-                            'sourceId': sourceData.id,
-                            'sourceWidth': sourceData.dimensions.width,
-                            'x': position[0],
-                            'y': position[1]
-                        })
-                        .attr({
-                            'class': 'connector',
-                            'd': function (pathDatum) {
-                                return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + pathDatum.x + ' ' + pathDatum.y;
-                            }
-                        });
-
-                    // updates the location of the connection img
-                    d3.select(this).attr('transform', function () {
-                        return 'translate(' + position[0] + ', ' + (position[1] + 20) + ')';
-                    });
-
-                    // re-append the image to keep it on top
-                    canvas.node().appendChild(this);
-                })
-                .on('drag', function (d) {
-                    // updates the location of the connection img
-                    d3.select(this).attr('transform', function () {
-                        return 'translate(' + d3.event.x + ', ' + (d3.event.y + 50) + ')';
-                    });
-
-                    // mark node's connectable if supported
-                    var destination = d3.select('g.hover').classed('connectable-destination', function () {
-                        // ensure the mouse has moved at least 10px in any direction, it seems that
-                        // when the drag event is trigger is not consistent between browsers. as a result
-                        // some browser would trigger when the mouse hadn't moved yet which caused
-                        // click and contextmenu events to appear like an attempt to connection the
-                        // component to itself. requiring the mouse to have actually moved before
-                        // checking the eligiblity of the destination addresses the issue
-                        return (Math.abs(origin[0] - d3.event.x) > 10 || Math.abs(origin[1] - d3.event.y) > 10) &&
-                            nfCanvasUtils.isValidConnectionDestination(d3.select(this));
-                    });
-
-                    // update the drag line
-                    d3.select('path.connector').classed('connectable', function () {
-                        if (destination.empty()) {
-                            return false;
-                        }
-
-                        // if there is a potential destination, see if its connectable
-                        return destination.classed('connectable-destination');
-                    }).attr('d', function (pathDatum) {
-                        if (!destination.empty() && destination.classed('connectable-destination')) {
-                            var destinationData = destination.datum();
-
-                            // show the line preview as appropriate
-                            if (pathDatum.sourceId === destinationData.id) {
-                                var x = pathDatum.x;
-                                var y = pathDatum.y;
-                                var componentOffset = pathDatum.sourceWidth / 2;
-                                var xOffset = nfConnection.config.selfLoopXOffset;
-                                var yOffset = nfConnection.config.selfLoopYOffset;
-                                return 'M' + x + ' ' + y + 'L' + (x + componentOffset + xOffset) + ' ' + (y - yOffset) + 'L' + (x + componentOffset + xOffset) + ' ' + (y + yOffset) + 'Z';
-                            } else {
-                                // get the position on the destination perimeter
-                                var end = nfCanvasUtils.getPerimeterPoint(pathDatum, {
-                                    'x': destinationData.position.x,
-                                    'y': destinationData.position.y,
-                                    'width': destinationData.dimensions.width,
-                                    'height': destinationData.dimensions.height
-                                });
-
-                                // direct line between components to provide a 'snap feel'
-                                return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + end.x + ' ' + end.y;
-                            }
-                        } else {
-                            return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + d3.event.x + ' ' + d3.event.y;
-                        }
-                    });
-                })
-                .on('dragend', function (d) {
-                    // stop further propagation
-                    d3.event.sourceEvent.stopPropagation();
-
-                    // get the add connect img
-                    var addConnect = d3.select(this);
-
-                    // get the connector, if it the current point is not over a new destination
-                    // the connector will be removed. otherwise it will be removed after the
-                    // connection has been configured/cancelled
-                    var connector = d3.select('path.connector');
-                    var connectorData = connector.datum();
-
-                    // get the destination
-                    var destination = d3.select('g.connectable-destination');
-
-                    // we are not over a new destination
-                    if (destination.empty()) {
-                        // get the source to determine if we are still over it
-                        var source = d3.select('#id-' + connectorData.sourceId);
-                        var sourceData = source.datum();
-
-                        // get the mouse position relative to the source
-                        var position = d3.mouse(source.node());
-
-                        // if the position is outside the component, remove the add connect img
-                        if (position[0] < 0 || position[0] > sourceData.dimensions.width || position[1] < 0 || position[1] > sourceData.dimensions.height) {
-                            addConnect.remove();
-                        } else {
-                            // reset the add connect img by restoring the position and place in the DOM
-                            addConnect.classed('dragging', false).attr('transform', function () {
-                                return 'translate(' + d.origX + ', ' + d.origY + ')';
-                            });
-                            source.node().appendChild(this);
-                        }
-
-                        // remove the connector
-                        connector.remove();
-                    } else {
-                        // remove the add connect img
-                        addConnect.remove();
-
-                        // create the connection
-                        var destinationData = destination.datum();
-                        nfConnectionConfiguration.createConnection(connectorData.sourceId, destinationData.id);
-                    }
-                });
-        },
-
-        /**
-         * Activates the connect behavior for the components in the specified selection.
-         *
-         * @param {selection} components
-         */
-        activate: function (components) {
-            components
-                .classed('connectable', true)
-                .on('mouseenter.connectable', function (d) {
-                    if (allowConnection()) {
-                        var selection = d3.select(this);
-
-                        // ensure the current component supports connection source
-                        if (nfCanvasUtils.isValidConnectionSource(selection)) {
-                            // see if theres already a connector rendered
-                            var addConnect = d3.select('text.add-connect');
-                            if (addConnect.empty()) {
-                                var x = (d.dimensions.width / 2) - 14;
-                                var y = (d.dimensions.height / 2) + 14;
-
-                                selection.append('text')
-                                    .datum({
-                                        origX: x,
-                                        origY: y
-                                    })
-                                    .call(connect)
-                                    .attr({
-                                        'class': 'add-connect',
-                                        'transform': 'translate(' + x + ', ' + y + ')'
-                                    })
-                                    .text('\ue834');
-                            }
-                        }
-                    }
-                })
-                .on('mouseleave.connectable', function () {
-                    // conditionally remove the connector
-                    var addConnect = d3.select(this).select('text.add-connect');
-                    if (!addConnect.empty() && !addConnect.classed('dragging')) {
-                        addConnect.remove();
-                    }
-                })
-                // Using mouseover/out to workaround chrome issue #122746
-                .on('mouseover.connectable', function () {
-                    // mark that we are hovering when appropriate
-                    d3.select(this).classed('hover', function () {
-                        return allowConnection();
-                    });
-                })
-                .on('mouseout.connection', function () {
-                    // remove all hover related classes
-                    d3.select(this).classed('hover connectable-destination', false);
-                });
-        },
-
-        /**
-         * Deactivates the connect behavior for the components in the specified selection.
-         *
-         * @param {selection} components
-         */
-        deactivate: function (components) {
-            components
-                .classed('connectable', false)
-                .on('mouseenter.connectable', null)
-                .on('mouseleave.connectable', null)
-                .on('mouseover.connectable', null)
-                .on('mouseout.connectable', null);
-        }
-    };
-}));
\ 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
deleted file mode 100644
index 148290a9a16b..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
+++ /dev/null
@@ -1,1472 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.ErrorHandler',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.Client',
-                  'nf.CanvasUtils',
-                  'nf.Connection'],
-              function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfConnection) {
-                  return (nf.ConnectionConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfConnection));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ConnectionConfiguration =
-              factory(require('jquery'),
-                  require('d3'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Common'),
-                  require('nf.Dialog'),
-                  require('nf.Client'),
-                  require('nf.CanvasUtils'),
-                  require('nf.Connection')));
-      } else {
-          nf.ConnectionConfiguration = factory(root.$,
-              root.d3,
-              root.nf.ErrorHandler,
-              root.nf.Common,
-              root.nf.Dialog,
-              root.nf.Client,
-              root.nf.CanvasUtils,
-              root.nf.Connection);
-      }
-  }(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfConnection) {
-      'use strict';
-  
-      var nfBirdseye;
-      var nfGraph;
-    
-        var CONNECTION_OFFSET_Y_INCREMENT = 75;
-        var CONNECTION_OFFSET_X_INCREMENT = 200;
-    
-        var config = {
-            urls: {
-                api: '../nifi-api',
-                prioritizers: '../nifi-api/flow/prioritizers'
-            }
-        };
-    
-        /**
-         * Removes the temporary if necessary.
-         */
-        var removeTempEdge = function () {
-            d3.select('path.connector').remove();
-        };
-    
-        /**
-         * Initializes the source in the new connection dialog.
-         *
-         * @argument {selection} source        The source
-         */
-        var initializeSourceNewConnectionDialog = function (source) {
-            // handle the selected source
-          if (nfCanvasUtils.isProcessor(source)) {
-                return $.Deferred(function (deferred) {
-                    // initialize the source processor
-                    initializeSourceProcessor(source).done(function (processor) {
-                      if (!nfCommon.isEmpty(processor.relationships)) {
-                            // populate the available connections
-                            $.each(processor.relationships, function (i, relationship) {
-                                createRelationshipOption(relationship.name);
-                            });
-    
-                            // if there is a single relationship auto select
-                            var relationships = $('#relationship-names').children('div');
-                            if (relationships.length === 1) {
-                                relationships.children('div.available-relationship').removeClass('checkbox-unchecked').addClass('checkbox-checked');
-                            }
-    
-                            // configure the button model
-                            $('#connection-configuration').modal('setButtonModel', [{
-                              buttonText: nf._.msg('nf-connection-configuration.Add'),
-                                color: {
-                                    base: '#728E9B',
-                                    hover: '#004849',
-                                    text: '#ffffff'
-                                },
-                                handler: {
-                                    click: function () {
-                                        // get the selected relationships
-                                        var selectedRelationships = getSelectedRelationships();
-    
-                                        // ensure some relationships were selected
-                                        if (selectedRelationships.length > 0) {
-                                            addConnection(selectedRelationships);
-                                        } else {
-                                            // inform users that no relationships were selected
-                                          nfDialog.showOkDialog({
-                                              headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
-                                              dialogContent: nf._.msg('nf-connection-configuration.Message0')
-                                            });
-                                        }
-    
-                                        // close the dialog
-                                        $('#connection-configuration').modal('hide');
-                                    }
-                                }
-                            },
-                                {
-                                  buttonText: nf._.msg('nf-connection-configuration.Cancel'),
-                                    color: {
-                                        base: '#E3E8EB',
-                                        hover: '#C7D2D7',
-                                        text: '#004849'
-                                    },
-                                    handler: {
-                                        click: function () {
-                                            $('#connection-configuration').modal('hide');
-                                        }
-                                    }
-                                }]);
-    
-                            // resolve the deferred
-                            deferred.resolve();
-                        } else {
-                            // there are no relationships for this processor
-                          nfDialog.showOkDialog({
-                              headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
-                              dialogContent: '\'' + nfCommon.escapeHtml(processor.name) + nf._.msg('nf-connection-configuration.Message1')
-                            });
-    
-                            // reset the dialog
-                            resetDialog();
-    
-                            deferred.reject();
-                        }
-                    }).fail(function () {
-                        deferred.reject();
-                    });
-                }).promise();
-            } else {
-                return $.Deferred(function (deferred) {
-                    // determine how to initialize the source
-                    var connectionSourceDeferred;
-                  if (nfCanvasUtils.isInputPort(source)) {
-                        connectionSourceDeferred = initializeSourceInputPort(source);
-                  } else if (nfCanvasUtils.isRemoteProcessGroup(source)) {
-                        connectionSourceDeferred = initializeSourceRemoteProcessGroup(source);
-                  } else if (nfCanvasUtils.isProcessGroup(source)) {
-                        connectionSourceDeferred = initializeSourceProcessGroup(source);
-                    } else {
-                        connectionSourceDeferred = initializeSourceFunnel(source);
-                    }
-    
-                    // finish initialization when appropriate
-                    connectionSourceDeferred.done(function () {
-                        // configure the button model
-                        $('#connection-configuration').modal('setButtonModel', [{
-                          buttonText: nf._.msg('nf-connection-configuration.Add'),
-                            color: {
-                                base: '#728E9B',
-                                hover: '#004849',
-                                text: '#ffffff'
-                            },
-                            handler: {
-                                click: function () {
-                                    // add the connection
-                                    addConnection();
-    
-                                    // close the dialog
-                                    $('#connection-configuration').modal('hide');
-                                }
-                            }
-                        },
-                            {
-                              buttonText: nf._.msg('nf-connection-configuration.Cancel'),
-                                color: {
-                                    base: '#E3E8EB',
-                                    hover: '#C7D2D7',
-                                    text: '#004849'
-                                },
-                                handler: {
-                                    click: function () {
-                                        $('#connection-configuration').modal('hide');
-                                    }
-                                }
-                            }]);
-    
-                        deferred.resolve();
-                    }).fail(function () {
-                        deferred.reject();
-                    });
-                }).promise();
-            }
-        };
-    
-        /**
-         * Initializes the source when the source is an input port.
-         *
-         * @argument {selection} source        The source
-         */
-        var initializeSourceInputPort = function (source) {
-            return $.Deferred(function (deferred) {
-                // get the input port data
-                var inputPortData = source.datum();
-                var inputPortName = inputPortData.permissions.canRead ? inputPortData.component.name : inputPortData.id;
-    
-                // populate the port information
-                $('#input-port-source').show();
-              $('#input-port-source-name').text(inputPortName).attr('title', inputPortName);
-    
-                // populate the connection source details
-                $('#connection-source-id').val(inputPortData.id);
-                $('#connection-source-component-id').val(inputPortData.id);
-    
-                // populate the group details
-              $('#connection-source-group-id').val(nfCanvasUtils.getGroupId());
-              $('#connection-source-group-name').text(nfCanvasUtils.getGroupName());
-    
-                // resolve the deferred
-                deferred.resolve();
-            }).promise();
-        };
-    
-        /**
-         * Initializes the source when the source is an input port.
-         *
-         * @argument {selection} source        The source
-         */
-        var initializeSourceFunnel = function (source) {
-            return $.Deferred(function (deferred) {
-                // get the funnel data
-                var funnelData = source.datum();
-    
-                // populate the port information
-                $('#funnel-source').show();
-    
-                // populate the connection source details
-                $('#connection-source-id').val(funnelData.id);
-                $('#connection-source-component-id').val(funnelData.id);
-    
-                // populate the group details
-              $('#connection-source-group-id').val(nfCanvasUtils.getGroupId());
-              $('#connection-source-group-name').text(nfCanvasUtils.getGroupName());
-    
-                // resolve the deferred
-                deferred.resolve();
-            }).promise();
-        };
-    
-        /**
-         * Initializes the source when the source is a processor.
-         *
-         * @argument {selection} source        The source
-         */
-        var initializeSourceProcessor = function (source) {
-            return $.Deferred(function (deferred) {
-                // get the processor data
-                var processorData = source.datum();
-                var processorName = processorData.permissions.canRead ? processorData.component.name : processorData.id;
-              var processorType = processorData.permissions.canRead ? nfCommon.substringAfterLast(processorData.component.type, '.') : 'Processor';
-    
-                // populate the source processor information
-                $('#processor-source').show();
-              $('#processor-source-name').text(processorName).attr('title', processorName);
-              $('#processor-source-type').text(processorType).attr('title', processorType);
-    
-                // populate the connection source details
-                $('#connection-source-id').val(processorData.id);
-                $('#connection-source-component-id').val(processorData.id);
-    
-                // populate the group details
-              $('#connection-source-group-id').val(nfCanvasUtils.getGroupId());
-              $('#connection-source-group-name').text(nfCanvasUtils.getGroupName());
-    
-                // show the available relationships
-                $('#relationship-names-container').show();
-    
-                deferred.resolve(processorData.component);
-            });
-        };
-    
-        /**
-         * Initializes the source when the source is a process group.
-         *
-         * @argument {selection} source        The source
-         */
-        var initializeSourceProcessGroup = function (source) {
-            return $.Deferred(function (deferred) {
-                // get the process group data
-                var processGroupData = source.datum();
-    
-                $.ajax({
-                    type: 'GET',
-                    url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupData.id),
-                    dataType: 'json'
-                }).done(function (response) {
-                    var processGroup = response.processGroupFlow;
-                    var processGroupName = response.permissions.canRead ? processGroup.breadcrumb.breadcrumb.name : processGroup.id;
-                    var processGroupContents = processGroup.flow;
-    
-                    // show the output port options
-                    var options = [];
-                    $.each(processGroupContents.outputPorts, function (i, outputPort) {
-                        // require explicit access to the output port as it's the source of the connection
-                        if (outputPort.permissions.canRead && outputPort.permissions.canWrite) {
-                            var component = outputPort.component;
-                            options.push({
-                                text: component.name,
-                                value: component.id,
-                              description: nfCommon.escapeHtml(component.comments)
-                            });
-                        }
-                    });
-    
-                    // only proceed if there are output ports
-                  if (!nfCommon.isEmpty(options)) {
-                        $('#output-port-source').show();
-    
-                        // sort the options
-                        options.sort(function (a, b) {
-                            return a.text.localeCompare(b.text);
-                        });
-    
-                        // create the combo
-                        $('#output-port-options').combo({
-                            options: options,
-                            maxHeight: 300,
-                            select: function (option) {
-                                $('#connection-source-id').val(option.value);
-                            }
-                        });
-    
-                        // populate the connection details
-                        $('#connection-source-component-id').val(processGroup.id);
-    
-                        // populate the group details
-                        $('#connection-source-group-id').val(processGroup.id);
-                        $('#connection-source-group-name').text(processGroupName);
-    
-                        deferred.resolve();
-                    } else {
-                      var message = '\'' + nfCommon.escapeHtml(processGroupName) + nf._.msg('nf-connection-configuration.Message2');
-                      if (nfCommon.isEmpty(processGroupContents.outputPorts) === false) {
-                          message = nf._.msg('nf-connection-configuration.Message5') + nf.Common.escapeHtml(processGroupName) + '\'.';
-                        }
-    
-                        // there are no output ports for this process group
-                      nfDialog.showOkDialog({
-                          headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
-                            dialogContent: message
-                        });
-    
-                        // reset the dialog
-                        resetDialog();
-    
-                        deferred.reject();
-                    }
-                }).fail(function (xhr, status, error) {
-                    // handle the error
-                  nfErrorHandler.handleAjaxError(xhr, status, error);
-    
-                    deferred.reject();
-                });
-            }).promise();
-        };
-    
-        /**
-         * Initializes the source when the source is a remote process group.
-         *
-         * @argument {selection} source        The source
-         */
-        var initializeSourceRemoteProcessGroup = function (source) {
-            return $.Deferred(function (deferred) {
-                // get the remote process group data
-                var remoteProcessGroupData = source.datum();
-    
-                $.ajax({
-                    type: 'GET',
-                    url: remoteProcessGroupData.uri,
-                    dataType: 'json'
-                }).done(function (response) {
-                    var remoteProcessGroup = response.component;
-                    var remoteProcessGroupContents = remoteProcessGroup.contents;
-    
-                    // only proceed if there are output ports
-                  if (!nfCommon.isEmpty(remoteProcessGroupContents.outputPorts)) {
-                        $('#output-port-source').show();
-    
-                        // show the output port options
-                        var options = [];
-                        $.each(remoteProcessGroupContents.outputPorts, function (i, outputPort) {
-                            options.push({
-                                text: outputPort.name,
-                                value: outputPort.id,
-                                disabled: outputPort.exists === false,
-                              description: nfCommon.escapeHtml(outputPort.comments)
-                            });
-                        });
-    
-                        // sort the options
-                        options.sort(function (a, b) {
-                            return a.text.localeCompare(b.text);
-                        });
-    
-                        // create the combo
-                        $('#output-port-options').combo({
-                            options: options,
-                            maxHeight: 300,
-                            select: function (option) {
-                                $('#connection-source-id').val(option.value);
-                            }
-                        });
-    
-                        // populate the connection details
-                        $('#connection-source-component-id').val(remoteProcessGroup.id);
-    
-                        // populate the group details
-                        $('#connection-source-group-id').val(remoteProcessGroup.id);
-                        $('#connection-source-group-name').text(remoteProcessGroup.name);
-    
-                        deferred.resolve();
-                    } else {
-                        // there are no relationships for this processor
-                      nfDialog.showOkDialog({
-                          headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
-                          dialogContent: '\'' + nfCommon.escapeHtml(remoteProcessGroup.name) + nf._.msg('nf-connection-configuration.Message2')
-                        });
-    
-                        // reset the dialog
-                        resetDialog();
-    
-                        deferred.reject();
-                    }
-                }).fail(function (xhr, status, error) {
-                    // handle the error
-                  nfErrorHandler.handleAjaxError(xhr, status, error);
-    
-                    deferred.reject();
-                });
-            }).promise();
-        };
-    
-        var initializeDestinationNewConnectionDialog = function (destination) {
-          if (nfCanvasUtils.isOutputPort(destination)) {
-                return initializeDestinationOutputPort(destination);
-          } else if (nfCanvasUtils.isProcessor(destination)) {
-                return initializeDestinationProcessor(destination);
-          } else if (nfCanvasUtils.isRemoteProcessGroup(destination)) {
-                return initializeDestinationRemoteProcessGroup(destination);
-          } else if (nfCanvasUtils.isFunnel(destination)) {
-                return initializeDestinationFunnel(destination);
-            } else {
-                return initializeDestinationProcessGroup(destination);
-            }
-        };
-    
-        var initializeDestinationOutputPort = function (destination) {
-            return $.Deferred(function (deferred) {
-                var outputPortData = destination.datum();
-                var outputPortName = outputPortData.permissions.canRead ? outputPortData.component.name : outputPortData.id;
-    
-                $('#output-port-destination').show();
-              $('#output-port-destination-name').text(outputPortName).attr('title', outputPortName);
-    
-                // populate the connection destination details
-                $('#connection-destination-id').val(outputPortData.id);
-                $('#connection-destination-component-id').val(outputPortData.id);
-    
-                // populate the group details
-              $('#connection-destination-group-id').val(nfCanvasUtils.getGroupId());
-              $('#connection-destination-group-name').text(nfCanvasUtils.getGroupName());
-    
-                deferred.resolve();
-            }).promise();
-        };
-    
-        var initializeDestinationFunnel = function (destination) {
-            return $.Deferred(function (deferred) {
-                var funnelData = destination.datum();
-    
-                $('#funnel-destination').show();
-    
-                // populate the connection destination details
-                $('#connection-destination-id').val(funnelData.id);
-                $('#connection-destination-component-id').val(funnelData.id);
-    
-                // populate the group details
-              $('#connection-destination-group-id').val(nfCanvasUtils.getGroupId());
-              $('#connection-destination-group-name').text(nfCanvasUtils.getGroupName());
-    
-                deferred.resolve();
-            }).promise();
-        };
-    
-        var initializeDestinationProcessor = function (destination) {
-            return $.Deferred(function (deferred) {
-                var processorData = destination.datum();
-                var processorName = processorData.permissions.canRead ? processorData.component.name : processorData.id;
-              var processorType = processorData.permissions.canRead ? nfCommon.substringAfterLast(processorData.component.type, '.') : 'Processor';
-    
-                $('#processor-destination').show();
-              $('#processor-destination-name').text(processorName).attr('title', processorName);
-              $('#processor-destination-type').text(processorType).attr('title', processorType);
-    
-                // populate the connection destination details
-                $('#connection-destination-id').val(processorData.id);
-                $('#connection-destination-component-id').val(processorData.id);
-    
-                // populate the group details
-              $('#connection-destination-group-id').val(nfCanvasUtils.getGroupId());
-              $('#connection-destination-group-name').text(nfCanvasUtils.getGroupName());
-    
-                deferred.resolve();
-            }).promise();
-        };
-    
-        /**
-         * Initializes the destination when the destination is a process group.
-         *
-         * @argument {selection} destination        The destination
-         */
-        var initializeDestinationProcessGroup = function (destination) {
-            return $.Deferred(function (deferred) {
-                var processGroupData = destination.datum();
-    
-                $.ajax({
-                    type: 'GET',
-                    url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupData.id),
-                    dataType: 'json'
-                }).done(function (response) {
-                    var processGroup = response.processGroupFlow;
-                    var processGroupName = response.permissions.canRead ? processGroup.breadcrumb.breadcrumb.name : processGroup.id;
-                    var processGroupContents = processGroup.flow;
-    
-                    // show the input port options
-                    var options = [];
-                    $.each(processGroupContents.inputPorts, function (i, inputPort) {
-                        options.push({
-                            text: inputPort.permissions.canRead ? inputPort.component.name : inputPort.id,
-                            value: inputPort.id,
-                          description: inputPort.permissions.canRead ? nfCommon.escapeHtml(inputPort.component.comments) : null
-                        });
-                    });
-    
-                    // only proceed if there are output ports
-                  if (!nfCommon.isEmpty(options)) {
-                        $('#input-port-destination').show();
-    
-                        // sort the options
-                        options.sort(function (a, b) {
-                            return a.text.localeCompare(b.text);
-                        });
-    
-                        // create the combo
-                        $('#input-port-options').combo({
-                            options: options,
-                            maxHeight: 300,
-                            select: function (option) {
-                                $('#connection-destination-id').val(option.value);
-                            }
-                        });
-    
-                        // populate the connection details
-                        $('#connection-destination-component-id').val(processGroup.id);
-    
-                        // populate the group details
-                        $('#connection-destination-group-id').val(processGroup.id);
-                        $('#connection-destination-group-name').text(processGroupName);
-    
-                        deferred.resolve();
-                    } else {
-                        // there are no relationships for this processor
-                      nfDialog.showOkDialog({
-                          headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
-                          dialogContent: '\'' + nfCommon.escapeHtml(processGroupName) + nf._.msg('nf-connection-configuration.Message4')
-                        });
-    
-                        // reset the dialog
-                        resetDialog();
-    
-                        deferred.reject();
-                    }
-                }).fail(function (xhr, status, error) {
-                    // handle the error
-                  nfErrorHandler.handleAjaxError(xhr, status, error);
-    
-                    deferred.reject();
-                });
-            }).promise();
-        };
-    
-        /**
-         * Initializes the source when the source is a remote process group.
-         *
-         * @argument {selection} destination        The destination
-         * @argument {object} connectionDestination The connection destination object
-         */
-        var initializeDestinationRemoteProcessGroup = function (destination, connectionDestination) {
-            return $.Deferred(function (deferred) {
-                var remoteProcessGroupData = destination.datum();
-    
-                $.ajax({
-                    type: 'GET',
-                    url: remoteProcessGroupData.uri,
-                    dataType: 'json'
-                }).done(function (response) {
-                    var remoteProcessGroup = response.component;
-                    var remoteProcessGroupContents = remoteProcessGroup.contents;
-    
-                    // only proceed if there are output ports
-                  if (!nfCommon.isEmpty(remoteProcessGroupContents.inputPorts)) {
-                        $('#input-port-destination').show();
-    
-                        // show the input port options
-                        var options = [];
-                        $.each(remoteProcessGroupContents.inputPorts, function (i, inputPort) {
-                            options.push({
-                                text: inputPort.name,
-                                value: inputPort.id,
-                                disabled: inputPort.exists === false,
-                              description: nfCommon.escapeHtml(inputPort.comments)
-                            });
-                        });
-    
-                        // sort the options
-                        options.sort(function (a, b) {
-                            return a.text.localeCompare(b.text);
-                        });
-    
-                        // create the combo
-                        $('#input-port-options').combo({
-                            options: options,
-                            maxHeight: 300,
-                            select: function (option) {
-                                $('#connection-destination-id').val(option.value);
-                            }
-                        });
-    
-                        // populate the connection details
-                        $('#connection-destination-component-id').val(remoteProcessGroup.id);
-    
-                        // populate the group details
-                        $('#connection-destination-group-id').val(remoteProcessGroup.id);
-                        $('#connection-destination-group-name').text(remoteProcessGroup.name);
-    
-                        deferred.resolve();
-                    } else {
-                        // there are no relationships for this processor
-                      nfDialog.showOkDialog({
-                          headerText: nf._.msg('nf-connection-configuration.ConfigureConnection'),
-                          dialogContent: '\'' + nfCommon.escapeHtml(remoteProcessGroup.name) + nf._.msg('nf-connection-configuration.Message4')
-                        });
-    
-                        // reset the dialog
-                        resetDialog();
-    
-                        deferred.reject();
-                    }
-                }).fail(function (xhr, status, error) {
-                    // handle the error
-                  nfErrorHandler.handleAjaxError(xhr, status, error);
-    
-                    deferred.reject();
-                });
-            }).promise();
-        };
-    
-        /**
-         * Initializes the source panel for groups.
-         *
-         * @argument {selection} source    The source of the connection
-         */
-        var initializeSourceReadOnlyGroup = function (source) {
-            return $.Deferred(function (deferred) {
-                var sourceData = source.datum();
-                var sourceName = sourceData.permissions.canRead ? sourceData.component.name : sourceData.id;
-    
-                // populate the port information
-                $('#read-only-output-port-source').show();
-    
-                // populate the component information
-                $('#connection-source-component-id').val(sourceData.id);
-    
-                // populate the group details
-                $('#connection-source-group-id').val(sourceData.id);
-                $('#connection-source-group-name').text(sourceName);
-    
-                // resolve the deferred
-                deferred.resolve();
-            }).promise();
-        };
-    
-        /**
-         * Initializes the source in the existing connection dialog.
-         *
-         * @argument {selection} source        The source
-         */
-        var initializeSourceEditConnectionDialog = function (source) {
-          if (nfCanvasUtils.isProcessor(source)) {
-                return initializeSourceProcessor(source);
-          } else if (nfCanvasUtils.isInputPort(source)) {
-                return initializeSourceInputPort(source);
-          } else if (nfCanvasUtils.isFunnel(source)) {
-                return initializeSourceFunnel(source);
-            } else {
-                return initializeSourceReadOnlyGroup(source);
-            }
-        };
-    
-        /**
-         * Initializes the destination in the existing connection dialog.
-         *
-         * @argument {selection} destination        The destination
-         * @argument {object} connectionDestination The connection destination object
-         */
-        var initializeDestinationEditConnectionDialog = function (destination, connectionDestination) {
-          if (nfCanvasUtils.isProcessor(destination)) {
-                return initializeDestinationProcessor(destination);
-          } else if (nfCanvasUtils.isOutputPort(destination)) {
-                return initializeDestinationOutputPort(destination);
-          } else if (nfCanvasUtils.isRemoteProcessGroup(destination)) {
-                return initializeDestinationRemoteProcessGroup(destination, connectionDestination);
-          } else if (nfCanvasUtils.isFunnel(destination)) {
-                return initializeDestinationFunnel(destination);
-            } else {
-                return initializeDestinationProcessGroup(destination);
-            }
-        };
-    
-        /**
-         * Creates an option for the specified relationship name.
-         *
-         * @argument {string} name      The relationship name
-         */
-        var createRelationshipOption = function (name) {
-          var relationshipLabel = $('<div class="relationship-name nf-checkbox-label ellipsis"></div>').text(name);
-            var relationshipValue = $('<span class="relationship-name-value hidden"></span>').text(name);
-            return $('<div class="available-relationship-container"><div class="available-relationship nf-checkbox checkbox-unchecked"></div>' +
-                '</div>').append(relationshipLabel).append(relationshipValue).appendTo('#relationship-names');
-        };
-    
-        /**
-         * Adds a new connection.
-         *
-         * @argument {array} selectedRelationships      The selected relationships
-         */
-        var addConnection = function (selectedRelationships) {
-            // get the connection details
-            var sourceId = $('#connection-source-id').val();
-            var destinationId = $('#connection-destination-id').val();
-    
-            // get the selection components
-            var sourceComponentId = $('#connection-source-component-id').val();
-            var source = d3.select('#id-' + sourceComponentId);
-            var destinationComponentId = $('#connection-destination-component-id').val();
-            var destination = d3.select('#id-' + destinationComponentId);
-    
-            // get the source/destination data
-            var sourceData = source.datum();
-            var destinationData = destination.datum();
-    
-            // add bend points if we're dealing with a self loop
-            var bends = [];
-            if (sourceComponentId === destinationComponentId) {
-                var rightCenter = {
-                    x: sourceData.position.x + (sourceData.dimensions.width),
-                    y: sourceData.position.y + (sourceData.dimensions.height / 2)
-                };
-    
-              var xOffset = nfConnection.config.selfLoopXOffset;
-              var yOffset = nfConnection.config.selfLoopYOffset;
-                bends.push({
-                    'x': (rightCenter.x + xOffset),
-                    'y': (rightCenter.y - yOffset)
-                });
-                bends.push({
-                    'x': (rightCenter.x + xOffset),
-                    'y': (rightCenter.y + yOffset)
-                });
-            } else {
-                var existingConnections = [];
-    
-                // get all connections for the source component
-              var connectionsForSourceComponent = nfConnection.getComponentConnections(sourceComponentId);
-                $.each(connectionsForSourceComponent, function (_, connectionForSourceComponent) {
-                    // get the id for the source/destination component
-                  var connectionSourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connectionForSourceComponent);
-                  var connectionDestinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connectionForSourceComponent);
-    
-                    // if the connection is between these same components, consider it for collisions
-                    if ((connectionSourceComponentId === sourceComponentId && connectionDestinationComponentId === destinationComponentId) ||
-                        (connectionDestinationComponentId === sourceComponentId && connectionSourceComponentId === destinationComponentId)) {
-    
-                        // record all connections between these two components in question
-                        existingConnections.push(connectionForSourceComponent);
-                    }
-                });
-    
-                // if there are existing connections between these components, ensure the new connection won't collide
-                if (existingConnections.length > 0) {
-                    var avoidCollision = false;
-                    $.each(existingConnections, function (_, existingConnection) {
-                        // only consider multiple connections with no bend points a collision, the existance of 
-                        // bend points suggests that the user has placed the connection into a desired location
-                      if (nfCommon.isEmpty(existingConnection.bends)) {
-                            avoidCollision = true;
-                            return false;
-                        }
-                    });
-    
-                    // if we need to avoid a collision
-                    if (avoidCollision === true) {
-                        // determine the middle of the source/destination components
-                        var sourceMiddle = [sourceData.position.x + (sourceData.dimensions.width / 2), sourceData.position.y + (sourceData.dimensions.height / 2)];
-                        var destinationMiddle = [destinationData.position.x + (destinationData.dimensions.width / 2), destinationData.position.y + (destinationData.dimensions.height / 2)];
-    
-                        // detect if the line is more horizontal or vertical
-                        var slope = ((sourceMiddle[1] - destinationMiddle[1]) / (sourceMiddle[0] - destinationMiddle[0]));
-                        var isMoreHorizontal = slope <= 1 && slope >= -1;
-    
-                        // determines if the specified coordinate collides with another connection
-                        var collides = function (x, y) {
-                            var collides = false;
-                            $.each(existingConnections, function (_, existingConnection) {
-                              if (!nfCommon.isEmpty(existingConnection.bends)) {
-                                    if (isMoreHorizontal) {
-                                        // horizontal lines are adjusted in the y space
-                                        if (existingConnection.bends[0].y === y) {
-                                            collides = true;
-                                            return false;
-                                        }
-                                    } else {
-                                        // vertical lines are adjusted in the x space
-                                        if (existingConnection.bends[0].x === x) {
-                                            collides = true;
-                                            return false;
-                                        }
-                                    }
-                                }
-                            });
-                            return collides;
-                        };
-    
-                        // find the mid point on the connection
-                        var xCandidate = (sourceMiddle[0] + destinationMiddle[0]) / 2;
-                        var yCandidate = (sourceMiddle[1] + destinationMiddle[1]) / 2;
-    
-                        // attempt to position this connection so it doesn't collide
-                        var xStep = isMoreHorizontal ? 0 : CONNECTION_OFFSET_X_INCREMENT;
-                        var yStep = isMoreHorizontal ? CONNECTION_OFFSET_Y_INCREMENT : 0;
-                        var positioned = false;
-                        while (positioned === false) {
-                            // consider above and below, then increment and try again (if necessary)
-                            if (collides(xCandidate - xStep, yCandidate - yStep) === false) {
-                                bends.push({
-                                    'x': (xCandidate - xStep),
-                                    'y': (yCandidate - yStep)
-                                });
-                                positioned = true;
-                            } else if (collides(xCandidate + xStep, yCandidate + yStep) === false) {
-                                bends.push({
-                                    'x': (xCandidate + xStep),
-                                    'y': (yCandidate + yStep)
-                                });
-                                positioned = true;
-                            }
-    
-                            if (isMoreHorizontal) {
-                                yStep += CONNECTION_OFFSET_Y_INCREMENT;
-                            } else {
-                                xStep += CONNECTION_OFFSET_X_INCREMENT;
-                            }
-                        }
-                    }
-                }
-            }
-    
-            // determine the source group id
-            var sourceGroupId = $('#connection-source-group-id').val();
-            var destinationGroupId = $('#connection-destination-group-id').val();
-    
-            // determine the source and destination types
-          var sourceType = nfCanvasUtils.getConnectableTypeForSource(source);
-          var destinationType = nfCanvasUtils.getConnectableTypeForDestination(destination);
-    
-            // get the settings
-            var connectionName = $('#connection-name').val();
-            var flowFileExpiration = $('#flow-file-expiration').val();
-            var backPressureObjectThreshold = $('#back-pressure-object-threshold').val();
-            var backPressureDataSizeThreshold = $('#back-pressure-data-size-threshold').val();
-            var prioritizers = $('#prioritizer-selected').sortable('toArray');
-    
-            if (validateSettings()) {
-                var connectionEntity = {
-                  'revision': nfClient.getRevision({
-                        'revision': {
-                            'version': 0
-                        }
-                    }),
-                    'component': {
-                        'name': connectionName,
-                        'source': {
-                            'id': sourceId,
-                            'groupId': sourceGroupId,
-                            'type': sourceType
-                        },
-                        'destination': {
-                            'id': destinationId,
-                            'groupId': destinationGroupId,
-                            'type': destinationType
-                        },
-                        'selectedRelationships': selectedRelationships,
-                        'flowFileExpiration': flowFileExpiration,
-                        'backPressureDataSizeThreshold': backPressureDataSizeThreshold,
-                        'backPressureObjectThreshold': backPressureObjectThreshold,
-                        'bends': bends,
-                        'prioritizers': prioritizers
-                    }
-                };
-    
-                // create the new connection
-                $.ajax({
-                    type: 'POST',
-                  url: config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/connections',
-                    data: JSON.stringify(connectionEntity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // add the connection
-                  nfGraph.add({
-                        'connections': [response]
-                    }, {
-                        'selectAll': true
-                    });
-    
-                    // reload the connections source/destination components
-                  nfCanvasUtils.reloadConnectionSourceAndDestination(sourceComponentId, destinationComponentId);
-    
-                    // update component visibility
-                  nfGraph.updateVisibility();
-    
-                    // update the birdseye
-                  nfBirdseye.refresh();
-                }).fail(function (xhr, status, error) {
-                    // handle the error
-                  nfErrorHandler.handleAjaxError(xhr, status, error);
-                });
-            }
-        };
-    
-        /**
-         * Updates an existing connection.
-         *
-         * @argument {array} selectedRelationships          The selected relationships
-         */
-        var updateConnection = function (selectedRelationships) {
-            // get the connection details
-            var connectionId = $('#connection-id').text();
-            var connectionUri = $('#connection-uri').val();
-    
-            // get the source details
-            var sourceComponentId = $('#connection-source-component-id').val();
-    
-            // get the destination details
-            var destinationComponentId = $('#connection-destination-component-id').val();
-            var destination = d3.select('#id-' + destinationComponentId);
-          var destinationType = nfCanvasUtils.getConnectableTypeForDestination(destination);
-    
-            // get the destination details
-            var destinationId = $('#connection-destination-id').val();
-            var destinationGroupId = $('#connection-destination-group-id').val();
-    
-            // get the settings
-            var connectionName = $('#connection-name').val();
-            var flowFileExpiration = $('#flow-file-expiration').val();
-            var backPressureObjectThreshold = $('#back-pressure-object-threshold').val();
-            var backPressureDataSizeThreshold = $('#back-pressure-data-size-threshold').val();
-            var prioritizers = $('#prioritizer-selected').sortable('toArray');
-    
-            if (validateSettings()) {
-              var d = nfConnection.get(connectionId);
-                var connectionEntity = {
-                  'revision': nfClient.getRevision(d),
-                    'component': {
-                        'id': connectionId,
-                        'name': connectionName,
-                        'destination': {
-                            'id': destinationId,
-                            'groupId': destinationGroupId,
-                            'type': destinationType
-                        },
-                        'selectedRelationships': selectedRelationships,
-                        'flowFileExpiration': flowFileExpiration,
-                        'backPressureDataSizeThreshold': backPressureDataSizeThreshold,
-                        'backPressureObjectThreshold': backPressureObjectThreshold,
-                        'prioritizers': prioritizers
-                    }
-                };
-    
-                // update the connection
-                return $.ajax({
-                    type: 'PUT',
-                    url: connectionUri,
-                    data: JSON.stringify(connectionEntity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // update this connection
-                  nfConnection.set(response);
-    
-                    // reload the connections source/destination components
-                  nfCanvasUtils.reloadConnectionSourceAndDestination(sourceComponentId, destinationComponentId);
-                }).fail(function (xhr, status, error) {
-                    if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
-                      nfDialog.showOkDialog({
-                          headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
-                          dialogContent: nfCommon.escapeHtml(xhr.responseText),
-                        });
-                    } else {
-                      nfErrorHandler.handleAjaxError(xhr, status, error);
-                    }
-                });
-            } else {
-                return $.Deferred(function (deferred) {
-                    deferred.reject();
-                }).promise();
-            }
-        };
-    
-        /**
-         * Returns an array of selected relationship names.
-         */
-        var getSelectedRelationships = function () {
-            // get all available relationships
-            var availableRelationships = $('#relationship-names');
-            var selectedRelationships = [];
-    
-            // go through each relationship to determine which are selected
-            $.each(availableRelationships.children(), function (i, relationshipElement) {
-                var relationship = $(relationshipElement);
-    
-                // get each relationship and its corresponding checkbox
-                var relationshipCheck = relationship.children('div.available-relationship');
-    
-                // see if this relationship has been selected
-                if (relationshipCheck.hasClass('checkbox-checked')) {
-                    selectedRelationships.push(relationship.children('span.relationship-name-value').text());
-                }
-            });
-    
-            return selectedRelationships;
-        };
-    
-        /**
-         * Validates the specified settings.
-         */
-        var validateSettings = function () {
-            var errors = [];
-    
-            // validate the settings
-          if (nfCommon.isBlank($('#flow-file-expiration').val())) {
-              errors.push(nf._.msg('nf-connection-configuration.flow-file-expiration'));
-            }
-            if (!$.isNumeric($('#back-pressure-object-threshold').val())) {
-              errors.push(nf._.msg('nf-connection-configuration.back-pressure-object-threshold'));
-            }
-          if (nfCommon.isBlank($('#back-pressure-data-size-threshold').val())) {
-              errors.push(nf._.msg('nf-connection-configuration.back-pressure-data-size-threshold'));
-            }
-    
-            if (errors.length > 0) {
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
-                  dialogContent: nfCommon.formatUnorderedList(errors)
-                });
-                return false;
-            } else {
-                return true;
-            }
-        };
-    
-        /**
-         * Resets the dialog.
-         */
-        var resetDialog = function () {
-            // reset the prioritizers
-            var selectedList = $('#prioritizer-selected');
-            var availableList = $('#prioritizer-available');
-            selectedList.children().detach().appendTo(availableList);
-    
-            // sort the available list
-            var listItems = availableList.children('li').get();
-            listItems.sort(function (a, b) {
-                var compA = $(a).text().toUpperCase();
-                var compB = $(b).text().toUpperCase();
-                return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
-            });
-    
-            // clear the available list and re-insert each list item
-            $.each(listItems, function () {
-                $(this).detach();
-            });
-            $.each(listItems, function () {
-                $(this).appendTo(availableList);
-            });
-    
-            // reset the fields
-            $('#connection-name').val('');
-            $('#relationship-names').css('border-width', '0').empty();
-            $('#relationship-names-container').hide();
-    
-            // clear the id field
-          nfCommon.clearField('connection-id');
-    
-            // hide all the connection source panels
-            $('#processor-source').hide();
-            $('#input-port-source').hide();
-            $('#output-port-source').hide();
-            $('#read-only-output-port-source').hide();
-            $('#funnel-source').hide();
-    
-            // hide all the connection destination panels
-            $('#processor-destination').hide();
-            $('#input-port-destination').hide();
-            $('#output-port-destination').hide();
-            $('#funnel-destination').hide();
-    
-            // clear and destination details
-            $('#connection-source-id').val('');
-            $('#connection-source-component-id').val('');
-            $('#connection-source-group-id').val('');
-    
-            // clear any destination details
-            $('#connection-destination-id').val('');
-            $('#connection-destination-component-id').val('');
-            $('#connection-destination-group-id').val('');
-    
-            // clear any ports
-            $('#output-port-options').empty();
-            $('#input-port-options').empty();
-    
-            // see if the temp edge needs to be removed
-            removeTempEdge();
-        };
-    
-      var nfConnectionConfiguration = {
-  
-          /**
-           * Initialize the connection configuration.
-           *
-           * @param nfBirdseyeRef   The nfBirdseye module.
-           * @param nfGraphRef   The nfGraph module.
-           */
-          init: function (nfBirdseyeRef, nfGraphRef) {
-              nfBirdseye = nfBirdseyeRef;
-              nfGraph = nfGraphRef;
-  
-                // initially hide the relationship names container
-                $('#relationship-names-container').hide();
-    
-                // initialize the configure connection dialog
-                $('#connection-configuration').modal({
-                    scrollableContentStyle: 'scrollable',
-                  headerText: nf._.msg('nf-connection-configuration.ConfigureConnection'),
-                    handler: {
-                        close: function () {
-                            // reset the dialog on close
-                            resetDialog();
-                        },
-                        open: function () {
-                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                        }
-                    }
-                });
-    
-                // initialize the properties tabs
-                $('#connection-configuration-tabs').tabbs({
-                    tabStyle: 'tab',
-                    selectedTabStyle: 'selected-tab',
-                    scrollableTabContentStyle: 'scrollable',
-                    tabs: [{
-                      name: nf._.msg('nf-connection-configuration.Detail'),
-                        tabContentId: 'connection-details-tab-content'
-                    }, {
-                      name: nf._.msg('nf-connection-configuration.Setting'),
-                        tabContentId: 'connection-settings-tab-content'
-                    }]
-                });
-    
-                // load the processor prioritizers
-                $.ajax({
-                    type: 'GET',
-                    url: config.urls.prioritizers,
-                    dataType: 'json'
-                }).done(function (response) {
-                    // create an element for each available prioritizer
-                    $.each(response.prioritizerTypes, function (i, documentedType) {
-                      nfConnectionConfiguration.addAvailablePrioritizer('#prioritizer-available', documentedType);
-                    });
-    
-                    // make the prioritizer containers sortable
-                    $('#prioritizer-available, #prioritizer-selected').sortable({
-                        connectWith: 'ul',
-                        placeholder: 'ui-state-highlight',
-                        scroll: true,
-                        opacity: 0.6
-                    });
-                    $('#prioritizer-available, #prioritizer-selected').disableSelection();
-              }).fail(nfErrorHandler.handleAjaxError);
-            },
-    
-            /**
-             * Adds the specified prioritizer to the specified container.
-             *
-             * @argument {string} prioritizerContainer      The dom Id of the prioritizer container
-             * @argument {object} prioritizerType           The type of prioritizer
-             */
-            addAvailablePrioritizer: function (prioritizerContainer, prioritizerType) {
-                var type = prioritizerType.type;
-              var name = nfCommon.substringAfterLast(type, '.');
-    
-                // add the prioritizers to the available list
-                var prioritizerList = $(prioritizerContainer);
-                var prioritizer = $('<li></li>').append($('<span style="float: left;"></span>').text(name)).attr('id', type).addClass('ui-state-default').appendTo(prioritizerList);
-    
-                // add the description if applicable
-              if (nfCommon.isDefinedAndNotNull(prioritizerType.description)) {
-                    $('<div class="fa fa-question-circle" style="float: right; margin-right: 5px;""></div>').appendTo(prioritizer).qtip($.extend({
-                      content: nfCommon.escapeHtml(prioritizerType.description)
-                  }, nfCommon.config.tooltipConfig));
-                }
-            },
-    
-            /**
-             * Shows the dialog for creating a new connection.
-             *
-             * @argument {string} sourceId      The source id
-             * @argument {string} destinationId The destination id
-             */
-            createConnection: function (sourceId, destinationId) {
-                // select the source and destination
-                var source = d3.select('#id-' + sourceId);
-                var destination = d3.select('#id-' + destinationId);
-    
-                if (source.empty() || destination.empty()) {
-                    return;
-                }
-    
-                // initialize the connection dialog
-                $.when(initializeSourceNewConnectionDialog(source), initializeDestinationNewConnectionDialog(destination)).done(function () {
-                    // set the default values
-                    $('#flow-file-expiration').val('0 sec');
-                    $('#back-pressure-object-threshold').val('10000');
-                    $('#back-pressure-data-size-threshold').val('1 GB');
-    
-                    // select the first tab
-                    $('#connection-configuration-tabs').find('li:first').click();
-    
-                    // configure the header and show the dialog
-                    $('#connection-configuration').modal('setHeaderText', 'Create Connection').modal('show');
-    
-                    // add the ellipsis if necessary
-                    $('#connection-configuration div.relationship-name').ellipsis();
-    
-                    // fill in the connection id
-                  nfCommon.populateField('connection-id', null);
-    
-                    // show the border if necessary
-                    var relationshipNames = $('#relationship-names');
-                  if (relationshipNames.is(':visible') && relationshipNames.get(0).scrollHeight > Math.round(relationshipNames.innerHeight())) {
-                        relationshipNames.css('border-width', '1px');
-                    }
-                }).fail(function () {
-                    // see if the temp edge needs to be removed
-                    removeTempEdge();
-                });
-            },
-    
-            /**
-             * Shows the configuration for the specified connection. If a destination is
-             * specified it will be considered a new destination.
-             *
-             * @argument {selection} selection         The connection entry
-             * @argument {selection} destination          Optional new destination
-             */
-            showConfiguration: function (selection, destination) {
-                return $.Deferred(function (deferred) {
-                    var connectionEntry = selection.datum();
-                    var connection = connectionEntry.component;
-    
-                    // identify the source component
-                  var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connectionEntry);
-                    var source = d3.select('#id-' + sourceComponentId);
-    
-                    // identify the destination component
-                  if (nfCommon.isUndefinedOrNull(destination)) {
-                      var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connectionEntry);
-                        destination = d3.select('#id-' + destinationComponentId);
-                    }
-    
-                    // initialize the connection dialog
-                    $.when(initializeSourceEditConnectionDialog(source), initializeDestinationEditConnectionDialog(destination, connection.destination)).done(function () {
-                        var availableRelationships = connection.availableRelationships;
-                        var selectedRelationships = connection.selectedRelationships;
-    
-                        // show the available relationship if applicable
-                      if (nfCommon.isDefinedAndNotNull(availableRelationships) || nfCommon.isDefinedAndNotNull(selectedRelationships)) {
-                            // populate the available connections
-                            $.each(availableRelationships, function (i, name) {
-                                createRelationshipOption(name);
-                            });
-    
-                            // ensure all selected relationships are present
-                            // (may be undefined) and selected
-                            $.each(selectedRelationships, function (i, name) {
-                                // mark undefined relationships accordingly
-                                if ($.inArray(name, availableRelationships) === -1) {
-                                    var option = createRelationshipOption(name);
-                                    $(option).children('div.relationship-name').addClass('undefined');
-                                }
-    
-                                // ensure all selected relationships are checked
-                                var relationships = $('#relationship-names').children('div');
-                                $.each(relationships, function (i, relationship) {
-                                    var relationshipName = $(relationship).children('span.relationship-name-value');
-                                    if (relationshipName.text() === name) {
-                                        $(relationship).children('div.available-relationship').removeClass('checkbox-unchecked').addClass('checkbox-checked');
-                                    }
-                                });
-                            });
-                        }
-    
-                        // if the source is a process group or remote process group, select the appropriate port if applicable
-                      if (nfCanvasUtils.isProcessGroup(source) || nfCanvasUtils.isRemoteProcessGroup(source)) {
-                            // populate the connection source details
-                            $('#connection-source-id').val(connection.source.id);
-                          $('#read-only-output-port-name').text(connection.source.name).attr('title', connection.source.name);
-                        }
-    
-                        // if the destination is a process gorup or remote process group, select the appropriate port if applicable
-                      if (nfCanvasUtils.isProcessGroup(destination) || nfCanvasUtils.isRemoteProcessGroup(destination)) {
-                            var destinationData = destination.datum();
-    
-                            // when the group ids differ, its a new destination component so we don't want to preselect any port
-                            if (connection.destination.groupId === destinationData.id) {
-                                $('#input-port-options').combo('setSelectedOption', {
-                                    value: connection.destination.id
-                                });
-                            }
-                        }
-    
-                        // set the connection settings
-                        $('#connection-name').val(connection.name);
-                        $('#flow-file-expiration').val(connection.flowFileExpiration);
-                        $('#back-pressure-object-threshold').val(connection.backPressureObjectThreshold);
-                        $('#back-pressure-data-size-threshold').val(connection.backPressureDataSizeThreshold);
-    
-                        // format the connection id
-                      nfCommon.populateField('connection-id', connection.id);
-    
-                        // handle each prioritizer
-                        $.each(connection.prioritizers, function (i, type) {
-                            $('#prioritizer-available').children('li[id="' + type + '"]').detach().appendTo('#prioritizer-selected');
-                        });
-    
-                        // store the connection details
-                        $('#connection-uri').val(connectionEntry.uri);
-    
-                        // configure the button model
-                        $('#connection-configuration').modal('setButtonModel', [{
-                          buttonText: nf._.msg('nf-connection-configuration.Apply'),
-                            color: {
-                                base: '#728E9B',
-                                hover: '#004849',
-                                text: '#ffffff'
-                            },
-                            handler: {
-                                click: function () {
-                                    // get the selected relationships
-                                    var selectedRelationships = getSelectedRelationships();
-    
-                                    // see if we're working with a processor as the source
-                                  if (nfCanvasUtils.isProcessor(source)) {
-                                        if (selectedRelationships.length > 0) {
-                                            // if there are relationships selected update
-                                            updateConnection(selectedRelationships).done(function () {
-                                                deferred.resolve();
-                                            }).fail(function () {
-                                                deferred.reject();
-                                            });
-                                        } else {
-                                            // inform users that no relationships were selected and the source is a processor
-                                          nfDialog.showOkDialog({
-                                              headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
-                                              dialogContent: nf._.msg('nf-connection-configuration.Message0')
-                                            });
-    
-                                            // reject the deferred
-                                            deferred.reject();
-                                        }
-                                    } else {
-                                        // there are no relationships, but the source wasn't a processor, so update anyway
-                                        updateConnection(undefined).done(function () {
-                                            deferred.resolve();
-                                        }).fail(function () {
-                                            deferred.reject();
-                                        });
-                                    }
-    
-                                    // close the dialog
-                                    $('#connection-configuration').modal('hide');
-                                }
-                            }
-                        },
-                            {
-                              buttonText: nf._.msg('nf-connection-configuration.Cancel'),
-                                color: {
-                                    base: '#E3E8EB',
-                                    hover: '#C7D2D7',
-                                    text: '#004849'
-                                },
-                                handler: {
-                                    click: function () {
-                                        // hide the dialog
-                                        $('#connection-configuration').modal('hide');
-    
-                                        // reject the deferred
-                                        deferred.reject();
-                                    }
-                                }
-                            }]);
-    
-                        // show the details dialog
-                        $('#connection-configuration').modal('setHeaderText', 'Configure Connection').modal('show');
-    
-                        // add the ellipsis if necessary
-                        $('#connection-configuration div.relationship-name').ellipsis();
-    
-                        // show the border if necessary
-                        var relationshipNames = $('#relationship-names');
-                      if (relationshipNames.is(':visible') && relationshipNames.get(0).scrollHeight > Math.round(relationshipNames.innerHeight())) {
-                            relationshipNames.css('border-width', '1px');
-                        }
-                    }).fail(function () {
-                        deferred.reject();
-                    });
-                }).promise();
-            }
-        };
-    
-      return nfConnectionConfiguration;
-  }));
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
deleted file mode 100644
index 67d0dc0371f4..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
+++ /dev/null
@@ -1,2185 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.ErrorHandler',
-                  'nf.Client',
-                  'nf.CanvasUtils'],
-              function ($, d3, nfCommon, nfDialog, nfErrorHandler, nfClient, nfCanvasUtils) {
-                  return (nf.Connection = factory($, d3, nfCommon, nfDialog, nfErrorHandler, nfClient, nfCanvasUtils));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.Connection =
-              factory(require('jquery'),
-                  require('d3'),
-                  require('nf.Common'),
-                  require('nf.Dialog'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Client'),
-                  require('nf.CanvasUtils')));
-      } else {
-          nf.Connection = factory(root.$,
-              root.d3,
-              root.nf.Common,
-              root.nf.Dialog,
-              root.nf.ErrorHandler,
-              root.nf.Client,
-              root.nf.CanvasUtils);
-      }
-  }(this, function ($, d3, nfCommon, nfDialog, nfErrorHandler, nfClient, nfCanvasUtils) {
-      'use strict';
-  
-      var nfSelectable;
-      var nfConnectionConfiguration;
-      var nfContextMenu;
-    
-        // the dimensions for the connection label
-        var dimensions = {
-            width: 200
-        };
-    
-      // width of a backpressure indicator - half of width, left/right padding, left/right border
-      var backpressureBarWidth = (dimensions.width / 2) - 15 - 2;
-  
-        /**
-         * Gets the position of the label for the specified connection.
-         *
-         * @param {type} connectionLabel      The connection label
-         */
-        var getLabelPosition = function (connectionLabel) {
-            var d = connectionLabel.datum();
-    
-            var x, y;
-            if (d.bends.length > 0) {
-                var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1);
-                x = d.bends[i].x;
-                y = d.bends[i].y;
-            } else {
-                x = (d.start.x + d.end.x) / 2;
-                y = (d.start.y + d.end.y) / 2;
-            }
-    
-            // offset to account for the label dimensions
-            x -= (dimensions.width / 2);
-            y -= (connectionLabel.attr('height') / 2);
-    
-            return {
-                x: x,
-                y: y
-            };
-        };
-    
-        // ----------------------------------
-        // connections currently on the graph
-        // ----------------------------------
-    
-        var connectionMap;
-    
-      // -----------------------------------------------------------
-      // cache for components that are added/removed from the canvas
-      // -----------------------------------------------------------
-  
-      var removedCache;
-      var addedCache;
-  
-        // ---------------------
-        // connection containers
-        // ---------------------
-    
-        var connectionContainer;
-    
-        // ------------------------
-        // line point drag behavior
-        // ------------------------
-    
-        var bendPointDrag;
-        var endpointDrag;
-    
-        // ------------------------------
-        // connection label drag behavior
-        // ------------------------------
-    
-        var labelDrag;
-    
-        // function for generating lines
-        var lineGenerator;
-    
-        // --------------------------
-        // privately scoped functions
-        // --------------------------
-    
-        /**
-         * Calculates the distance between the two points specified squared.
-         *
-         * @param {object} v        First point
-         * @param {object} w        Second point
-         */
-        var distanceSquared = function (v, w) {
-            return Math.pow(v.x - w.x, 2) + Math.pow(v.y - w.y, 2);
-        };
-    
-        /**
-         * Calculates the distance between the two points specified.
-         *
-         * @param {object} v        First point
-         * @param {object} w        Second point
-         */
-        var distanceBetweenPoints = function (v, w) {
-            return Math.sqrt(distanceSquared(v, w));
-        };
-    
-        /**
-         * Calculates the distance between the point and the line created by s1 and s2.
-         *
-         * @param {object} p            The point
-         * @param {object} s1           Segment start
-         * @param {object} s2           Segment end
-         */
-        var distanceToSegment = function (p, s1, s2) {
-            var l2 = distanceSquared(s1, s2);
-            if (l2 === 0) {
-                return Math.sqrt(distanceSquared(p, s1));
-            }
-    
-            var t = ((p.x - s1.x) * (s2.x - s1.x) + (p.y - s1.y) * (s2.y - s1.y)) / l2;
-            if (t < 0) {
-                return Math.sqrt(distanceSquared(p, s1));
-            }
-            if (t > 1) {
-                return Math.sqrt(distanceSquared(p, s2));
-            }
-    
-            return Math.sqrt(distanceSquared(p, {
-                'x': s1.x + t * (s2.x - s1.x),
-                'y': s1.y + t * (s2.y - s1.y)
-            }));
-        };
-    
-        /**
-         * Calculates the index of the bend point that is nearest to the specified point.
-         *
-         * @param {object} p
-         * @param {object} connectionData
-         */
-        var getNearestSegment = function (p, connectionData) {
-            if (connectionData.bends.length === 0) {
-                return 0;
-            }
-    
-            var minimumDistance;
-            var index;
-    
-            // line is comprised of start -> [bends] -> end
-            var line = [connectionData.start].concat(connectionData.bends, [connectionData.end]);
-    
-            // consider each segment
-            for (var i = 0; i < line.length; i++) {
-                if (i + 1 < line.length) {
-                    var distance = distanceToSegment(p, line[i], line[i + 1]);
-                  if (nfCommon.isUndefined(minimumDistance) || distance < minimumDistance) {
-                        minimumDistance = distance;
-                        index = i;
-                    }
-                }
-            }
-    
-            return index;
-        };
-    
-        /**
-         * Determines if the specified type is a type of input port.
-         *
-         * @argument {string} type      The port type
-         */
-        var isInputPortType = function (type) {
-            return type.indexOf('INPUT_PORT') >= 0;
-        };
-    
-        /**
-         * Determines if the specified type is a type of output port.
-         *
-         * @argument {string} type      The port type
-         */
-        var isOutputPortType = function (type) {
-            return type.indexOf('OUTPUT_PORT') >= 0;
-        };
-    
-        /**
-         * Determines whether the terminal of the connection (source|destination) is
-         * a group.
-         *
-         * @param {object} terminal
-         */
-        var isGroup = function (terminal) {
-          return terminal.groupId !== nfCanvasUtils.getGroupId() && (isInputPortType(terminal.type) || isOutputPortType(terminal.type));
-        };
-    
-        /**
-         * Determines whether expiration is configured for the specified connection.
-         *
-         * @param {object} connection
-         * @return {boolean} Whether expiration is configured
-         */
-        var isExpirationConfigured = function (connection) {
-          if (nfCommon.isDefinedAndNotNull(connection.flowFileExpiration)) {
-                var match = connection.flowFileExpiration.match(/^(\d+).*/);
-                if (match !== null && match.length > 0) {
-                    if (parseInt(match[0], 10) > 0) {
-                        return true;
-                    }
-                }
-            }
-            return false;
-        };
-    
-        /**
-         * Sorts the specified connections according to the z index.
-         *
-         * @param {type} connections
-         */
-        var sort = function (connections) {
-            connections.sort(function (a, b) {
-                return a.zIndex === b.zIndex ? 0 : a.zIndex > b.zIndex ? 1 : -1;
-            });
-        };
-    
-        /**
-         * Selects the connection elements against the current connection map.
-         */
-        var select = function () {
-            return connectionContainer.selectAll('g.connection').data(connectionMap.values(), function (d) {
-                return d.id;
-            });
-        };
-    
-        var renderConnections = function (entered, selected) {
-            if (entered.empty()) {
-                return;
-            }
-    
-            var connection = entered.append('g')
-                .attr({
-                    'id': function (d) {
-                        return 'id-' + d.id;
-                    },
-                    'class': 'connection'
-                })
-                .classed('selected', selected);
-    
-            // create a connection between the two components
-            connection.append('path')
-                .attr({
-                    'class': 'connection-path',
-                    'pointer-events': 'none'
-                });
-    
-            // path to show when selection
-            connection.append('path')
-                .attr({
-                    'class': 'connection-selection-path',
-                    'pointer-events': 'none'
-                });
-    
-            // path to make selection easier
-            connection.append('path')
-                .attr({
-                    'class': 'connection-path-selectable',
-                    'pointer-events': 'stroke'
-                })
-                .on('mousedown.selection', function () {
-                    // select the connection when clicking the selectable path
-                  nfSelectable.select(d3.select(this.parentNode));
-                })
-              .call(nfContextMenu.activate);
-        };
-    
-        // determines whether the specified connection contains an unsupported relationship
-        var hasUnavailableRelationship = function (d) {
-            var unavailable = false;
-    
-            // verify each selected relationship is still available
-          if (nfCommon.isDefinedAndNotNull(d.component.selectedRelationships) && nfCommon.isDefinedAndNotNull(d.component.availableRelationships)) {
-                $.each(d.component.selectedRelationships, function (_, selectedRelationship) {
-                    if ($.inArray(selectedRelationship, d.component.availableRelationships) === -1) {
-                        unavailable = true;
-                        return false;
-                    }
-                });
-            }
-    
-            return unavailable;
-        };
-    
-      // gets the appropriate end marker
-      var getEndMarker = function (d) {
-          var marker = 'normal';
-  
-          if (d.permissions.canRead) {
-              // if the connection has a relationship that is unavailable, mark it a ghost relationship
-              if (isFullBytes(d) || isFullCount(d)) {
-                  marker = 'full';
-              } else if (hasUnavailableRelationship(d)) {
-                  marker = 'ghost';
-              }
-          } else {
-              marker = 'unauthorized';
-          }
-  
-          return 'url(#' + marker + ')';
-      };
-  
-      // gets the appropriate drop shadow
-      var getDropShadow = function (d) {
-          if (isFullCount(d) || isFullBytes(d)) {
-              return 'url(#connection-full-drop-shadow)';
-          } else {
-              return 'url(#component-drop-shadow)';
-          }
-      };
-  
-      // determines whether the connection is full based on the object count threshold
-      var isFullCount = function (d) {
-          return d.status.aggregateSnapshot.percentUseCount === 100;
-      };
-  
-      // determines whether the connection is in warning based on the object count threshold
-      var isWarningCount = function (d) {
-          var percentUseCount = d.status.aggregateSnapshot.percentUseCount;
-          if (nfCommon.isDefinedAndNotNull(percentUseCount)) {
-              return percentUseCount >= 61 && percentUseCount <= 85;
-          }
-  
-          return false;
-      };
-  
-      // determines whether the connection is in error based on the object count threshold
-      var isErrorCount = function (d) {
-          var percentUseCount = d.status.aggregateSnapshot.percentUseCount;
-          if (nfCommon.isDefinedAndNotNull(percentUseCount)) {
-              return percentUseCount > 85;
-          }
-  
-          return false;
-      };
-  
-      // determines whether the connection is full based on the data size threshold
-      var isFullBytes = function (d) {
-          return d.status.aggregateSnapshot.percentUseBytes === 100
-      };
-  
-      // determines whether the connection is in warning based on the data size threshold
-      var isWarningBytes = function (d) {
-          var percentUseBytes = d.status.aggregateSnapshot.percentUseBytes;
-          if (nfCommon.isDefinedAndNotNull(percentUseBytes)) {
-              return percentUseBytes >= 61 && percentUseBytes <= 85;
-          }
-  
-          return false;
-      };
-  
-      // determines whether the connection is in error based on the data size threshold
-      var isErrorBytes = function (d) {
-          var percentUseBytes = d.status.aggregateSnapshot.percentUseBytes;
-          if (nfCommon.isDefinedAndNotNull(percentUseBytes)) {
-              return percentUseBytes > 85;
-          }
-  
-          return false;
-      };
-  
-        // updates the specified connections
-        var updateConnections = function (updated, options) {
-            if (updated.empty()) {
-                return;
-            }
-    
-            var updatePath = true;
-            var updateLabel = true;
-            var transition = false;
-    
-            // extract the options if specified
-          if (nfCommon.isDefinedAndNotNull(options)) {
-              updatePath = nfCommon.isDefinedAndNotNull(options.updatePath) ? options.updatePath : updatePath;
-              updateLabel = nfCommon.isDefinedAndNotNull(options.updateLabel) ? options.updateLabel : updateLabel;
-              transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-            }
-    
-            if (updatePath === true) {
-                updated
-                    .classed('grouped', function (d) {
-                        var grouped = false;
-    
-                        if (d.permissions.canRead) {
-                            // if there are more than one selected relationship, mark this as grouped
-                          if (nfCommon.isDefinedAndNotNull(d.component.selectedRelationships) && d.component.selectedRelationships.length > 1) {
-                                grouped = true;
-                            }
-                        }
-    
-                        return grouped;
-                    })
-                    .classed('ghost', function (d) {
-                        var ghost = false;
-    
-                        if (d.permissions.canRead) {
-                            // if the connection has a relationship that is unavailable, mark it a ghost relationship
-                            if (hasUnavailableRelationship(d)) {
-                                ghost = true;
-                            }
-                        }
-    
-                        return ghost;
-                    });
-    
-                // update connection path
-                updated.select('path.connection-path')
-                    .classed('unauthorized', function (d) {
-                        return d.permissions.canRead === false;
-                    });
-    
-                // update connection behavior
-                updated.select('path.connection-path-selectable')
-                    .on('dblclick', function (d) {
-                        if (d.permissions.canWrite && d.permissions.canRead) {
-                            var position = d3.mouse(this.parentNode);
-    
-                            // find where to put this bend point
-                            var bendIndex = getNearestSegment({
-                                'x': position[0],
-                                'y': position[1]
-                            }, d);
-    
-                            // copy the original to restore if necessary
-                            var bends = d.component.bends.slice();
-    
-                            // add it to the collection of points
-                            bends.splice(bendIndex, 0, {
-                                'x': position[0],
-                                'y': position[1]
-                            });
-    
-                            var connection = {
-                                id: d.id,
-                                bends: bends
-                            };
-    
-                            // update the label index if necessary
-                            var labelIndex = d.component.labelIndex;
-                            if (bends.length === 1) {
-                                connection.labelIndex = 0;
-                            } else if (bendIndex <= labelIndex) {
-                                connection.labelIndex = labelIndex + 1;
-                            }
-    
-                            // save the new state
-                            save(d, connection);
-    
-                            d3.event.stopPropagation();
-                        } else {
-                            return null;
-                        }
-                    });
-            }
-    
-            updated.each(function (d) {
-                var connection = d3.select(this);
-    
-                if (updatePath === true) {
-                    // calculate the start and end points
-                  var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(d);
-                    var sourceData = d3.select('#id-' + sourceComponentId).datum();
-                    var end;
-    
-                    // get the appropriate end anchor point
-                    var endAnchor;
-                    if (d.bends.length > 0) {
-                        endAnchor = d.bends[d.bends.length - 1];
-                    } else {
-                        endAnchor = {
-                            x: sourceData.position.x + (sourceData.dimensions.width / 2),
-                            y: sourceData.position.y + (sourceData.dimensions.height / 2)
-                        };
-                    }
-    
-                    // if we are currently dragging the endpoint to a new target, use that
-                    // position, otherwise we need to calculate it for the current target
-                  if (nfCommon.isDefinedAndNotNull(d.end) && d.end.dragging === true) {
-                        // since we're dragging, use the same object thats bound to the endpoint drag event
-                        end = d.end;
-    
-                        // if we're not over a connectable destination use the current point
-                        var newDestination = d3.select('g.hover.connectable-destination');
-                        if (!newDestination.empty()) {
-                            var newDestinationData = newDestination.datum();
-    
-                            // get the position on the new destination perimeter
-                          var newEnd = nfCanvasUtils.getPerimeterPoint(endAnchor, {
-                                'x': newDestinationData.position.x,
-                                'y': newDestinationData.position.y,
-                                'width': newDestinationData.dimensions.width,
-                                'height': newDestinationData.dimensions.height
-                            });
-    
-                            // update the coordinates with the new point
-                            end.x = newEnd.x;
-                            end.y = newEnd.y;
-                        }
-                    } else {
-                      var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(d);
-                        var destinationData = d3.select('#id-' + destinationComponentId).datum();
-    
-                        // get the position on the destination perimeter
-                      end = nfCanvasUtils.getPerimeterPoint(endAnchor, {
-                            'x': destinationData.position.x,
-                            'y': destinationData.position.y,
-                            'width': destinationData.dimensions.width,
-                            'height': destinationData.dimensions.height
-                        });
-                    }
-    
-                    // get the appropriate start anchor point
-                    var startAnchor;
-                    if (d.bends.length > 0) {
-                        startAnchor = d.bends[0];
-                    } else {
-                        startAnchor = end;
-                    }
-    
-                    // get the position on the source perimeter
-                  var start = nfCanvasUtils.getPerimeterPoint(startAnchor, {
-                        'x': sourceData.position.x,
-                        'y': sourceData.position.y,
-                        'width': sourceData.dimensions.width,
-                        'height': sourceData.dimensions.height
-                    });
-    
-                    // store the updated endpoints
-                    d.start = start;
-                    d.end = end;
-    
-                    // update the connection paths
-                  nfCanvasUtils.transition(connection.select('path.connection-path'), transition)
-                        .attr({
-                            'd': function () {
-                                var datum = [d.start].concat(d.bends, [d.end]);
-                                return lineGenerator(datum);
-                          }
-                      });
-                  nfCanvasUtils.transition(connection.select('path.connection-selection-path'), transition)
-                        .attr({
-                            'd': function () {
-                                var datum = [d.start].concat(d.bends, [d.end]);
-                                return lineGenerator(datum);
-                            }
-                        });
-                  nfCanvasUtils.transition(connection.select('path.connection-path-selectable'), transition)
-                        .attr({
-                            'd': function () {
-                                var datum = [d.start].concat(d.bends, [d.end]);
-                                return lineGenerator(datum);
-                            }
-                        });
-    
-                    // -----
-                    // bends
-                    // -----
-    
-                    var startpoints = connection.selectAll('rect.startpoint');
-                    var endpoints = connection.selectAll('rect.endpoint');
-                    var midpoints = connection.selectAll('rect.midpoint');
-    
-                    // require read and write permissions as it's required to read the connections available relationships
-                    // when connecting to a group or remote group
-                    if (d.permissions.canWrite && d.permissions.canRead) {
-    
-                        // ------------------
-                        // bends - startpoint
-                        // ------------------
-    
-                        startpoints = startpoints.data([d.start]);
-    
-                        // create a point for the start
-                        startpoints.enter().append('rect')
-                            .attr({
-                                'class': 'startpoint linepoint',
-                                'pointer-events': 'all',
-                                'width': 8,
-                                'height': 8
-                            })
-                            .on('mousedown.selection', function () {
-                                // select the connection when clicking the label
-                              nfSelectable.select(d3.select(this.parentNode));
-                            })
-                          .call(nfContextMenu.activate);
-    
-                        // update the start point
-                      nfCanvasUtils.transition(startpoints, transition)
-                            .attr('transform', function (p) {
-                                return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')';
-                            });
-    
-                        // remove old items
-                        startpoints.exit().remove();
-    
-                        // ----------------
-                        // bends - endpoint
-                        // ----------------
-    
-                        var endpoints = endpoints.data([d.end]);
-    
-                        // create a point for the end
-                        endpoints.enter().append('rect')
-                            .call(endpointDrag)
-                            .attr({
-                                'class': 'endpoint linepoint',
-                                'pointer-events': 'all',
-                                'width': 8,
-                                'height': 8
-                            })
-                            .on('mousedown.selection', function () {
-                                // select the connection when clicking the label
-                              nfSelectable.select(d3.select(this.parentNode));
-                            })
-                          .call(nfContextMenu.activate);
-    
-                        // update the end point
-                      nfCanvasUtils.transition(endpoints, transition)
-                            .attr('transform', function (p) {
-                                return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')';
-                            });
-    
-                        // remove old items
-                        endpoints.exit().remove();
-    
-                        // -----------------
-                        // bends - midpoints
-                        // -----------------
-    
-                        var midpoints = midpoints.data(d.bends);
-    
-                        // create a point for the end
-                        midpoints.enter().append('rect')
-                            .attr({
-                                'class': 'midpoint linepoint',
-                                'pointer-events': 'all',
-                                'width': 8,
-                                'height': 8
-                            })
-                            .call(bendPointDrag)
-                            .on('dblclick', function (p) {
-                                // stop even propagation
-                                d3.event.stopPropagation();
-    
-                                var connection = d3.select(this.parentNode);
-                                var connectionData = connection.datum();
-    
-                                // if this is a self loop prevent removing the last two bends
-                              var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connectionData);
-                              var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connectionData);
-                                if (sourceComponentId === destinationComponentId && d.component.bends.length <= 2) {
-                                  nfDialog.showOkDialog({
-                                      headerText: nf._.msg('nf-connection.Connection'),
-                                      dialogContent: nf._.msg('nf-connection.Message1')
-                                    });
-                                    return;
-                                }
-    
-                                var newBends = [];
-                                var bendIndex = -1;
-    
-                                // create a new array of bends without the selected one
-                                $.each(connectionData.component.bends, function (i, bend) {
-                                    if (p.x !== bend.x && p.y !== bend.y) {
-                                        newBends.push(bend);
-                                    } else {
-                                        bendIndex = i;
-                                    }
-                                });
-    
-                                if (bendIndex < 0) {
-                                    return;
-                                }
-    
-                                var connection = {
-                                    id: connectionData.id,
-                                    bends: newBends
-                                };
-    
-                                // update the label index if necessary
-                                var labelIndex = connectionData.component.labelIndex;
-                                if (newBends.length <= 1) {
-                                    connection.labelIndex = 0;
-                                } else if (bendIndex <= labelIndex) {
-                                    connection.labelIndex = Math.max(0, labelIndex - 1);
-                                }
-    
-                                // save the updated connection
-                                save(connectionData, connection);
-                            })
-                            .on('mousedown.selection', function () {
-                                // select the connection when clicking the label
-                              nfSelectable.select(d3.select(this.parentNode));
-                            })
-                          .call(nfContextMenu.activate);
-    
-                        // update the midpoints
-                      nfCanvasUtils.transition(midpoints, transition)
-                            .attr('transform', function (p) {
-                                return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')';
-                            });
-    
-                        // remove old items
-                        midpoints.exit().remove();
-                    } else {
-                        // remove the start, mid, and end points
-                        startpoints.remove();
-                        endpoints.remove();
-                        midpoints.remove();
-                    }
-                }
-    
-                if (updateLabel === true) {
-                    var connectionLabelContainer = connection.select('g.connection-label-container');
-    
-                    // update visible connections
-                    if (connection.classed('visible')) {
-    
-                        // if there is no connection label this connection is becoming
-                        // visible so we need to render it
-                        if (connectionLabelContainer.empty()) {
-                            // connection label container
-                            connectionLabelContainer = connection.insert('g', 'rect.startpoint')
-                                .attr({
-                                    'class': 'connection-label-container',
-                                    'pointer-events': 'all'
-                                })
-                                .on('mousedown.selection', function () {
-                                    // select the connection when clicking the label
-                                  nfSelectable.select(d3.select(this.parentNode));
-                                })
-                              .call(nfContextMenu.activate);
-    
-                            // connection label
-                            connectionLabelContainer.append('rect')
-                                .attr({
-                                    'class': 'body',
-                                    'width': dimensions.width,
-                                    'x': 0,
-                                  'y': 0
-                                });
-    
-                            // processor border
-                            connectionLabelContainer.append('rect')
-                                .attr({
-                                    'class': 'border',
-                                    'width': dimensions.width,
-                                    'fill': 'transparent',
-                                    'stroke': 'transparent'
-                                });
-                        }
-    
-                        var labelCount = 0;
-                        var rowHeight = 19;
-                        var backgrounds = [];
-                        var borders = [];
-    
-                        var connectionFrom = connectionLabelContainer.select('g.connection-from-container');
-                        var connectionTo = connectionLabelContainer.select('g.connection-to-container');
-                        var connectionName = connectionLabelContainer.select('g.connection-name-container');
-    
-                        if (d.permissions.canRead) {
-    
-                            // -----------------------
-                            // connection label - from
-                            // -----------------------
-    
-                            // determine if the connection require a from label
-                            if (isGroup(d.component.source)) {
-                                // see if the connection from label is already rendered
-                                if (connectionFrom.empty()) {
-                                    connectionFrom = connectionLabelContainer.append('g')
-                                        .attr({
-                                            'class': 'connection-from-container'
-                                        });
-    
-                                    // background
-                                    backgrounds.push(connectionFrom.append('rect')
-                                        .attr({
-                                            'class': 'connection-label-background',
-                                            'width': dimensions.width,
-                                            'height': rowHeight
-                                        }));
-    
-                                    // border
-                                    borders.push(connectionFrom.append('rect')
-                                        .attr({
-                                            'class': 'connection-label-border',
-                                            'width': dimensions.width,
-                                            'height': 1
-                                        }));
-    
-                                    connectionFrom.append('text')
-                                        .attr({
-                                            'class': 'stats-label',
-                                            'x': 5,
-                                            'y': 14
-                                        })
-                                      .text(nf._.msg('nf-connection.From'));
-    
-                                    connectionFrom.append('text')
-                                        .attr({
-                                            'class': 'stats-value connection-from',
-                                            'x': 43,
-                                            'y': 14,
-                                            'width': 130
-                                        });
-    
-                                    connectionFrom.append('text')
-                                        .attr({
-                                            'class': 'connection-from-run-status',
-                                            'x': 185,
-                                            'y': 14
-                                        });
-                                } else {
-                                    backgrounds.push(connectionFrom.select('rect.connection-label-background'));
-                                    borders.push(connectionFrom.select('rect.connection-label-border'));
-                                }
-    
-                                // update the connection from positioning
-                                connectionFrom.attr('transform', function () {
-                                    var y = (rowHeight * labelCount++);
-                                    return 'translate(0, ' + y + ')';
-                                });
-    
-                                // update the label text
-                                connectionFrom.select('text.connection-from')
-                                    .each(function () {
-                                        var connectionFromLabel = d3.select(this);
-    
-                                        // reset the label name to handle any previous state
-                                        connectionFromLabel.text(null).selectAll('title').remove();
-    
-                                        // apply ellipsis to the label as necessary
-                                      nfCanvasUtils.ellipsis(connectionFromLabel, d.component.source.name);
-                                    }).append('title').text(function () {
-                                    return d.component.source.name;
-                                });
-    
-                                // update the label run status
-                                connectionFrom.select('text.connection-from-run-status')
-                                    .text(function () {
-                                        if (d.component.source.exists === false) {
-                                            return '\uf071';
-                                        } else if (d.component.source.running === true) {
-                                            return '\uf04b';
-                                        } else {
-                                            return '\uf04d';
-                                        }
-                                    })
-                                  .classed('running', function () {
-                                      if (d.component.source.exists === false) {
-                                          return false;
-                                      } else {
-                                          return d.component.source.running;
-                                      }
-                                  })
-                                  .classed('stopped', function () {
-                                      if (d.component.source.exists === false) {
-                                          return false;
-                                      } else {
-                                          return !d.component.source.running;
-                                      }
-                                  })
-                                    .classed('is-missing-port', function () {
-                                        return d.component.source.exists === false;
-                                    });
-                            } else {
-                                // there is no connection from, remove the previous if necessary
-                                connectionFrom.remove();
-                            }
-    
-                            // ---------------------
-                            // connection label - to
-                            // ---------------------
-    
-                            // determine if the connection require a to label
-                            if (isGroup(d.component.destination)) {
-                                // see if the connection to label is already rendered
-                                if (connectionTo.empty()) {
-                                    connectionTo = connectionLabelContainer.append('g')
-                                        .attr({
-                                            'class': 'connection-to-container'
-                                        });
-    
-                                    // background
-                                    backgrounds.push(connectionTo.append('rect')
-                                        .attr({
-                                            'class': 'connection-label-background',
-                                            'width': dimensions.width,
-                                            'height': rowHeight
-                                        }));
-    
-                                    // border
-                                    borders.push(connectionTo.append('rect')
-                                        .attr({
-                                            'class': 'connection-label-border',
-                                            'width': dimensions.width,
-                                            'height': 1
-                                        }));
-    
-                                    connectionTo.append('text')
-                                        .attr({
-                                            'class': 'stats-label',
-                                            'x': 5,
-                                            'y': 14
-                                        })
-                                      .text(nf._.msg('nf-connection.To'));
-    
-                                    connectionTo.append('text')
-                                        .attr({
-                                            'class': 'stats-value connection-to',
-                                            'x': 25,
-                                            'y': 14,
-                                            'width': 145
-                                        });
-    
-                                    connectionTo.append('text')
-                                        .attr({
-                                            'class': 'connection-to-run-status',
-                                            'x': 185,
-                                            'y': 14
-                                        });
-                                } else {
-                                    backgrounds.push(connectionTo.select('rect.connection-label-background'));
-                                    borders.push(connectionTo.select('rect.connection-label-border'));
-                                }
-    
-                                // update the connection to positioning
-                                connectionTo.attr('transform', function () {
-                                    var y = (rowHeight * labelCount++);
-                                    return 'translate(0, ' + y + ')';
-                                });
-    
-                                // update the label text
-                                connectionTo.select('text.connection-to')
-                                    .each(function (d) {
-                                        var connectionToLabel = d3.select(this);
-    
-                                        // reset the label name to handle any previous state
-                                        connectionToLabel.text(null).selectAll('title').remove();
-    
-                                        // apply ellipsis to the label as necessary
-                                      nfCanvasUtils.ellipsis(connectionToLabel, d.component.destination.name);
-                                    }).append('title').text(function (d) {
-                                    return d.component.destination.name;
-                                });
-    
-                                // update the label run status
-                                connectionTo.select('text.connection-to-run-status')
-                                    .text(function () {
-                                        if (d.component.destination.exists === false) {
-                                            return '\uf071';
-                                        } else if (d.component.destination.running === true) {
-                                            return '\uf04b';
-                                        } else {
-                                            return '\uf04d';
-                                        }
-                                    })
-                                  .classed('running', function () {
-                                      if (d.component.destination.exists === false) {
-                                          return false;
-                                      } else {
-                                          return d.component.destination.running;
-                                      }
-                                  })
-                                  .classed('stopped', function () {
-                                      if (d.component.destination.exists === false) {
-                                          return false;
-                                      } else {
-                                          return !d.component.destination.running;
-                                      }
-                                  })
-                                    .classed('is-missing-port', function () {
-                                        return d.component.destination.exists === false;
-                                    });
-                            } else {
-                                // there is no connection to, remove the previous if necessary
-                                connectionTo.remove();
-                            }
-    
-                            // -----------------------
-                            // connection label - name
-                            // -----------------------
-    
-                            // get the connection name
-                          var connectionNameValue = nfCanvasUtils.formatConnectionName(d.component);
-    
-                            // is there a name to render
-                          if (!nfCommon.isBlank(connectionNameValue)) {
-                                // see if the connection name label is already rendered
-                                if (connectionName.empty()) {
-                                    connectionName = connectionLabelContainer.append('g')
-                                        .attr({
-                                            'class': 'connection-name-container'
-                                        });
-    
-                                    // background
-                                    backgrounds.push(connectionName.append('rect')
-                                        .attr({
-                                            'class': 'connection-label-background',
-                                            'width': dimensions.width,
-                                            'height': rowHeight
-                                        }));
-    
-                                    // border
-                                    borders.push(connectionName.append('rect')
-                                        .attr({
-                                            'class': 'connection-label-border',
-                                            'width': dimensions.width,
-                                            'height': 1
-                                        }));
-    
-                                    connectionName.append('text')
-                                        .attr({
-                                            'class': 'stats-label',
-                                            'x': 5,
-                                            'y': 14
-                                        })
-                                      .text(nf._.msg('nf-connection.Name'));
-    
-                                    connectionName.append('text')
-                                        .attr({
-                                            'class': 'stats-value connection-name',
-                                            'x': 45,
-                                            'y': 14,
-                                            'width': 142
-                                        });
-                                } else {
-                                    backgrounds.push(connectionName.select('rect.connection-label-background'));
-                                    borders.push(connectionName.select('rect.connection-label-border'));
-                                }
-    
-                                // update the connection name positioning
-                                connectionName.attr('transform', function () {
-                                    var y = (rowHeight * labelCount++);
-                                    return 'translate(0, ' + y + ')';
-                                });
-    
-                                // update the connection name
-                                connectionName.select('text.connection-name')
-                                    .each(function () {
-                                        var connectionToLabel = d3.select(this);
-    
-                                        // reset the label name to handle any previous state
-                                        connectionToLabel.text(null).selectAll('title').remove();
-    
-                                        // apply ellipsis to the label as necessary
-                                      nfCanvasUtils.ellipsis(connectionToLabel, connectionNameValue);
-                                    }).append('title').text(function () {
-                                    return connectionNameValue;
-                                });
-                            } else {
-                                // there is no connection name, remove the previous if necessary
-                                connectionName.remove();
-                            }
-                        } else {
-                            // no permissions to read to remove previous if necessary
-                            connectionFrom.remove();
-                            connectionTo.remove();
-                            connectionName.remove();
-                        }
-    
-                        // -------------------------
-                        // connection label - queued
-                        // -------------------------
-    
-                      var HEIGHT_FOR_BACKPRESSURE = 3;
-  
-                        // see if the queue label is already rendered
-                        var queued = connectionLabelContainer.select('g.queued-container');
-                        if (queued.empty()) {
-                            queued = connectionLabelContainer.append('g')
-                                .attr({
-                                    'class': 'queued-container'
-                                });
-    
-                            // background
-                            backgrounds.push(queued.append('rect')
-                                .attr({
-                                    'class': 'connection-label-background',
-                                    'width': dimensions.width,
-                                  'height': rowHeight + HEIGHT_FOR_BACKPRESSURE
-                                }));
-    
-                            // border
-                            borders.push(queued.append('rect')
-                                .attr({
-                                    'class': 'connection-label-border',
-                                    'width': dimensions.width,
-                                    'height': 1
-                                }));
-    
-                            queued.append('text')
-                                .attr({
-                                    'class': 'stats-label',
-                                    'x': 5,
-                                    'y': 14
-                                })
-                              .text(nf._.msg('nf-connection.Queued'));
-    
-                            var queuedText = queued.append('text')
-                                .attr({
-                                    'class': 'stats-value queued',
-                                    'x': 55,
-                                    'y': 14
-                                });
-    
-                            // queued count
-                            queuedText.append('tspan')
-                                .attr({
-                                    'class': 'count'
-                                });
-    
-                            // queued size
-                            queuedText.append('tspan')
-                                .attr({
-                                    'class': 'size'
-                                });
-    
-                          // expiration icon
-                            queued.append('text')
-                                .attr({
-                                    'class': 'expiration-icon',
-                                    'x': 185,
-                                    'y': 14
-                              })
-                                .text(function () {
-                                    return '\uf017';
-                                })
-                              .append('title');
-  
-                          var yBackpressureOffset = rowHeight + HEIGHT_FOR_BACKPRESSURE - 4;
-  
-                          // backpressure object threshold
-  
-                          // start
-                          queued.append('rect')
-                              .attr({
-                                  'class': 'backpressure-tick object',
-                                  'width': 1,
-                                  'height': 3,
-                                  'x': 5,
-                                  'y': yBackpressureOffset
-                              });
-  
-                          // bar
-                          var backpressureCountOffset = 6;
-                          queued.append('rect')
-                              .attr({
-                                  'class': 'backpressure-object',
-                                  'width': backpressureBarWidth,
-                                  'height': 3,
-                                  'x': backpressureCountOffset,
-                                  'y': yBackpressureOffset
-                              })
-                              .append('title');
-  
-                          // end
-                          queued.append('rect')
-                              .attr({
-                                  'class': 'backpressure-tick object',
-                                  'width': 1,
-                                  'height': 3,
-                                  'x': backpressureCountOffset + backpressureBarWidth,
-                                  'y': yBackpressureOffset
-                              });
-  
-                          // percent full
-                          queued.append('rect')
-                              .attr({
-                                  'class': 'backpressure-percent object',
-                                  'width': 0,
-                                  'height': 3,
-                                  'x': backpressureCountOffset,
-                                  'y': yBackpressureOffset
-                              });
-  
-                          // backpressure data size threshold
-  
-                          // start
-                          queued.append('rect')
-                              .attr({
-                                  'class': 'backpressure-tick data-size',
-                                  'width': 1,
-                                  'height': 3,
-                                  'x': (dimensions.width / 2) + 10,
-                                  'y': yBackpressureOffset
-                              });
-  
-                          // bar
-                          var backpressureDataSizeOffset = (dimensions.width / 2) + 10 + 1;
-                          queued.append('rect')
-                              .attr({
-                                  'class': 'backpressure-data-size',
-                                  'width': backpressureBarWidth,
-                                  'height': 3,
-                                  'x': backpressureDataSizeOffset,
-                                  'y': yBackpressureOffset
-                              })
-                              .append('title');
-  
-                          // end
-                          queued.append('rect')
-                              .attr({
-                                  'class': 'backpressure-tick data-size',
-                                  'width': 1,
-                                  'height': 3,
-                                  'x': backpressureDataSizeOffset + backpressureBarWidth,
-                                  'y': yBackpressureOffset
-                              });
-  
-                          // percent full
-                          queued.append('rect')
-                              .attr({
-                                  'class': 'backpressure-percent data-size',
-                                  'width': 0,
-                                  'height': 3,
-                                  'x': backpressureDataSizeOffset,
-                                  'y': yBackpressureOffset
-                              });
-                      } else {
-                          backgrounds.push(queued.select('rect.connection-label-background'));
-                          borders.push(queued.select('rect.connection-label-border'));
-                      }
-  
-                      // update the queued vertical positioning as necessary
-                      queued.attr('transform', function () {
-                          var y = (rowHeight * labelCount++);
-                          return 'translate(0, ' + y + ')';
-                      });
-  
-                      // update the height based on the labels being rendered
-                      connectionLabelContainer.select('rect.body')
-                          .attr('height', function () {
-                              return (rowHeight * labelCount) + HEIGHT_FOR_BACKPRESSURE;
-                          })
-                          .classed('unauthorized', function () {
-                              return d.permissions.canRead === false;
-                          });
-                      connectionLabelContainer.select('rect.border')
-                          .attr('height', function () {
-                              return (rowHeight * labelCount) + HEIGHT_FOR_BACKPRESSURE;
-                          })
-                          .classed('unauthorized', function () {
-                              return d.permissions.canRead === false;
-                          });
-  
-                      // update the coloring of the backgrounds
-                      $.each(backgrounds, function (i, background) {
-                          if (i % 2 === 0) {
-                              background.attr('fill', '#f4f6f7');
-                          } else {
-                              background.attr('fill', '#ffffff');
-                          }
-                      });
-  
-                      // update the coloring of the label borders
-                      $.each(borders, function (i, border) {
-                          if (i > 0) {
-                              border.attr('fill', '#c7d2d7');
-                          } else {
-                              border.attr('fill', 'transparent');
-                          }
-                      });
-  
-                      // determine whether or not to show the expiration icon
-                      connectionLabelContainer.select('text.expiration-icon')
-                          .classed('hidden', function () {
-                              if (d.permissions.canRead) {
-                                  return !isExpirationConfigured(d.component);
-                              } else {
-                                  return true;
-                              }
-                          })
-                          .select('title').text(function () {
-                            if (d.permissions.canRead) {
-                                  return nf._.msg('nf-connection.FlowFilesOlder') + d.component.flowFileExpiration;
-                            } else {
-                                return '';
-                            }
-                        });
-    
-                      // update backpressure object fill
-                      connectionLabelContainer.select('rect.backpressure-object')
-                          .classed('not-configured', function () {
-                              return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseCount);
-                          });
-                      connectionLabelContainer.selectAll('rect.backpressure-tick.object')
-                          .classed('not-configured', function () {
-                              return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseCount);
-                          });
-  
-                      // update backpressure data size fill
-                      connectionLabelContainer.select('rect.backpressure-data-size')
-                          .classed('not-configured', function () {
-                              return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseBytes);
-                          });
-                      connectionLabelContainer.selectAll('rect.backpressure-tick.data-size')
-                          .classed('not-configured', function () {
-                              return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseBytes);
-                          });
-  
-                        if (d.permissions.canWrite) {
-                            // only support dragging the label when appropriate
-                            connectionLabelContainer.call(labelDrag);
-                        }
-    
-                        // update the connection status
-                        connection.call(updateConnectionStatus);
-                    } else {
-                        if (!connectionLabelContainer.empty()) {
-                            connectionLabelContainer.remove();
-                        }
-                    }
-                }
-    
-                // update the position of the label if possible
-              nfCanvasUtils.transition(connection.select('g.connection-label-container'), transition)
-                    .attr('transform', function () {
-                        var label = d3.select(this).select('rect.body');
-                        var position = getLabelPosition(label);
-                        return 'translate(' + position.x + ', ' + position.y + ')';
-                    });
-            });
-        };
-    
-        /**
-         * Updates the stats of the connections in the specified selection.
-         *
-         * @param {selection} updated       The selected connections to update
-         */
-        var updateConnectionStatus = function (updated) {
-            if (updated.empty()) {
-                return;
-            }
-    
-          // update data size
-          var dataSizeDeferred = $.Deferred(function (deferred) {
-                // queued count value
-                updated.select('text.queued tspan.count')
-                    .text(function (d) {
-                      return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.queued, ' ');
-                  });
-  
-              var backpressurePercentDataSize = updated.select('rect.backpressure-percent.data-size');
-              backpressurePercentDataSize.transition()
-                  .duration(400)
-                  .attr({
-                      'width': function (d) {
-                          if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseBytes)) {
-                              return (backpressureBarWidth * d.status.aggregateSnapshot.percentUseBytes) / 100;
-                          } else {
-                              return 0;
-                          }
-                      }
-                  }).each('end', function () {
-                  backpressurePercentDataSize
-                      .classed('warning', function (d) {
-                          return isWarningBytes(d);
-                      })
-                      .classed('error', function (d) {
-                          return isErrorBytes(d);
-                      });
-  
-                  deferred.resolve();
-              });
-  
-              updated.select('rect.backpressure-data-size').select('title').text(function (d) {
-                  if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseBytes)) {
-                      return 'Queue is ' + d.status.aggregateSnapshot.percentUseBytes + '% full based on Back Pressure Data Size Threshold';
-                  } else {
-                      return 'Back Pressure Data Size Threshold is not configured';
-                  }
-              });
-          }).promise();
-  
-          // update object count
-          var objectCountDeferred = $.Deferred(function (deferred) {
-                // queued size value
-                updated.select('text.queued tspan.size')
-                    .text(function (d) {
-                      return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.queued, ' ');
-                  });
-  
-              var backpressurePercentObject = updated.select('rect.backpressure-percent.object');
-              backpressurePercentObject.transition()
-                  .duration(400)
-                  .attr({
-                      'width': function (d) {
-                          if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseCount)) {
-                              return (backpressureBarWidth * d.status.aggregateSnapshot.percentUseCount) / 100;
-                          } else {
-                              return 0;
-                          }
-                      }
-                  }).each('end', function () {
-                  backpressurePercentObject
-                      .classed('warning', function (d) {
-                          return isWarningCount(d);
-                      })
-                      .classed('error', function (d) {
-                          return isErrorCount(d);
-                      });
-  
-                  deferred.resolve();
-              });
-  
-              updated.select('rect.backpressure-object').select('title').text(function (d) {
-                  if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseCount)) {
-                      return 'Queue is ' + d.status.aggregateSnapshot.percentUseCount + '% full based on Back Pressure Object Threshold';
-                  } else {
-                      return 'Back Pressure Object Threshold is not configured';
-                  }
-              });
-          }).promise();
-  
-          // update connection once progress bars have transitioned
-          $.when(dataSizeDeferred, objectCountDeferred).done(function () {
-              // connection stroke
-              updated.select('path.connection-path')
-                  .classed('full', function (d) {
-                      return isFullCount(d) || isFullBytes(d);
-                  })
-                  .attr({
-                      'marker-end': getEndMarker
-                  });
-  
-              // border
-              updated.select('rect.border')
-                  .classed('full', function (d) {
-                      return isFullCount(d) || isFullBytes(d);
-                  });
-  
-              // drop shadow
-              updated.select('rect.body')
-                  .attr({
-                      'filter': getDropShadow
-                  });
-            });
-        };
-    
-        /**
-         * Saves the connection entry specified by d with the new configuration specified
-         * in connection.
-         *
-         * @param {type} d
-         * @param {type} connection
-         */
-        var save = function (d, connection) {
-            var entity = {
-              'revision': nfClient.getRevision(d),
-                'component': connection
-            };
-    
-            return $.ajax({
-                type: 'PUT',
-                url: d.uri,
-                data: JSON.stringify(entity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // request was successful, update the entry
-              nfConnection.set(response);
-            }).fail(function (xhr, status, error) {
-                if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
-                  nfDialog.showOkDialog({
-                      headerText: nf._.msg('nf-connection.Connection'),
-                      dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                    });
-                } else {
-                  nfErrorHandler.handleAjaxError(xhr, status, error);
-                }
-            });
-        };
-    
-        // removes the specified connections
-        var removeConnections = function (removed) {
-            // consider reloading source/destination of connection being removed
-            removed.each(function (d) {
-              nfCanvasUtils.reloadConnectionSourceAndDestination(d.sourceId, d.destinationId);
-            });
-    
-            // remove the connection
-            removed.remove();
-        };
-    
-      var nfConnection = {
-            config: {
-                selfLoopXOffset: (dimensions.width / 2) + 5,
-                selfLoopYOffset: 25
-            },
-    
-          /**
-           * Initializes the connection.
-           *
-           * @param nfSelectableRef   The nfSelectable module.
-           * @param nfContextMenuRef   The nfContextMenu module.
-           */
-          init: function (nfSelectableRef, nfContextMenuRef, nfConnectionConfigurationRef) {
-              nfSelectable = nfSelectableRef;
-              nfContextMenu = nfContextMenuRef;
-              nfConnectionConfiguration = nfConnectionConfigurationRef;
-  
-                connectionMap = d3.map();
-              removedCache = d3.map();
-              addedCache = d3.map();
-    
-                // create the connection container
-                connectionContainer = d3.select('#canvas').append('g')
-                    .attr({
-                        'pointer-events': 'stroke',
-                        'class': 'connections'
-                    });
-    
-                // define the line generator
-                lineGenerator = d3.svg.line()
-                    .x(function (d) {
-                        return d.x;
-                    })
-                    .y(function (d) {
-                        return d.y;
-                    })
-                    .interpolate('linear');
-    
-                // handle bend point drag events
-                bendPointDrag = d3.behavior.drag()
-                    .on('dragstart', function () {
-                        // stop further propagation
-                        d3.event.sourceEvent.stopPropagation();
-                    })
-                    .on('drag', function (d) {
-                        d.x = d3.event.x;
-                        d.y = d3.event.y;
-    
-                        // redraw this connection
-                        d3.select(this.parentNode).call(updateConnections, {
-                            'updatePath': true,
-                            'updateLabel': false
-                        });
-                    })
-                    .on('dragend', function () {
-                        var connection = d3.select(this.parentNode);
-                        var connectionData = connection.datum();
-                        var bends = connection.selectAll('rect.midpoint').data();
-    
-                        // ensure the bend lengths are the same
-                        if (bends.length === connectionData.component.bends.length) {
-                            // determine if the bend points have moved
-                            var different = false;
-                            for (var i = 0; i < bends.length && !different; i++) {
-                                if (bends[i].x !== connectionData.component.bends[i].x || bends[i].y !== connectionData.component.bends[i].y) {
-                                    different = true;
-                                }
-                            }
-    
-                            // only save the updated bends if necessary
-                            if (different) {
-                                save(connectionData, {
-                                    id: connectionData.id,
-                                    bends: bends
-                                }).fail(function () {
-                                    // restore the previous bend points
-                                    connectionData.bends = $.map(connectionData.component.bends, function (bend) {
-                                        return {
-                                            x: bend.x,
-                                            y: bend.y
-                                        };
-                                    });
-    
-                                    // refresh the connection
-                                    connection.call(updateConnections, {
-                                        'updatePath': true,
-                                        'updateLabel': false
-                                    });
-                                });
-                            }
-                        }
-    
-                        // stop further propagation
-                        d3.event.sourceEvent.stopPropagation();
-                    });
-    
-                // handle endpoint drag events
-                endpointDrag = d3.behavior.drag()
-                    .on('dragstart', function (d) {
-                        // indicate that dragging has begun
-                        d.dragging = true;
-    
-                        // stop further propagation
-                        d3.event.sourceEvent.stopPropagation();
-                    })
-                    .on('drag', function (d) {
-                        d.x = d3.event.x - 8;
-                        d.y = d3.event.y - 8;
-    
-                        // ensure the new destination is valid
-                        d3.select('g.hover').classed('connectable-destination', function () {
-                          return nfCanvasUtils.isValidConnectionDestination(d3.select(this));
-                        });
-    
-                        // redraw this connection
-                        d3.select(this.parentNode).call(updateConnections, {
-                            'updatePath': true,
-                            'updateLabel': false
-                        });
-                    })
-                    .on('dragend', function (d) {
-                        // indicate that dragging as stopped
-                        d.dragging = false;
-    
-                        // get the corresponding connection
-                        var connection = d3.select(this.parentNode);
-                        var connectionData = connection.datum();
-                        var previousDestinationId = connectionData.destinationId;
-    
-                        // attempt to select a new destination
-                        var destination = d3.select('g.connectable-destination');
-    
-                        // resets the connection if we're not over a new destination
-                        if (destination.empty()) {
-                            connection.call(updateConnections, {
-                                'updatePath': true,
-                                'updateLabel': false
-                            });
-                        } else {
-                            // prompt for the new port if appropriate
-                          if (nfCanvasUtils.isProcessGroup(destination) || nfCanvasUtils.isRemoteProcessGroup(destination)) {
-                                // user will select new port and updated connect details will be set accordingly
-                              nfConnectionConfiguration.showConfiguration(connection, destination).done(function () {
-                                    // reload the previous destination
-                                  nfCanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId);
-                                }).fail(function () {
-                                    // reset the connection
-                                    connection.call(updateConnections, {
-                                        'updatePath': true,
-                                        'updateLabel': false
-                                    });
-                                });
-                            } else {
-                                // get the destination details
-                                var destinationData = destination.datum();
-                              var destinationType = nfCanvasUtils.getConnectableTypeForDestination(destination);
-    
-                                var connectionEntity = {
-                                  'revision': nfClient.getRevision(connectionData),
-                                    'component': {
-                                        'id': connectionData.id,
-                                        'destination': {
-                                            'id': destinationData.id,
-                                          'groupId': nfCanvasUtils.getGroupId(),
-                                            'type': destinationType
-                                        }
-                                    }
-                                };
-    
-                                // if this is a self loop and there are less than 2 bends, add them
-                                if (connectionData.bends.length < 2 && connectionData.sourceId === destinationData.id) {
-                                    var rightCenter = {
-                                        x: destinationData.position.x + (destinationData.dimensions.width),
-                                        y: destinationData.position.y + (destinationData.dimensions.height / 2)
-                                    };
-                                  var xOffset = nfConnection.config.selfLoopXOffset;
-                                  var yOffset = nfConnection.config.selfLoopYOffset;
-    
-                                    connectionEntity.component.bends = [];
-                                    connectionEntity.component.bends.push({
-                                        'x': (rightCenter.x + xOffset),
-                                        'y': (rightCenter.y - yOffset)
-                                    });
-                                    connectionEntity.component.bends.push({
-                                        'x': (rightCenter.x + xOffset),
-                                        'y': (rightCenter.y + yOffset)
-                                    });
-                                }
-    
-                                $.ajax({
-                                    type: 'PUT',
-                                    url: connectionData.uri,
-                                    data: JSON.stringify(connectionEntity),
-                                    dataType: 'json',
-                                    contentType: 'application/json'
-                                }).done(function (response) {
-                                    var updatedConnectionData = response.component;
-    
-                                    // refresh to update the label
-                                  nfConnection.set(response);
-    
-                                    // reload the previous destination and the new source/destination
-                                  nfCanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId);
-                                  nfCanvasUtils.reloadConnectionSourceAndDestination(response.sourceId, response.destinationId);
-                                }).fail(function (xhr, status, error) {
-                                  if (xhr.status === 400 || xhr.status === 401 || xhr.status === 403 || xhr.status === 404 || xhr.status === 409) {
-                                      nfDialog.showOkDialog({
-                                          headerText: nf._.msg('nf-connection.Connection'),
-                                          dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                                        });
-    
-                                        // reset the connection
-                                        connection.call(updateConnections, {
-                                            'updatePath': true,
-                                            'updateLabel': false
-                                        });
-                                    } else {
-                                      nfErrorHandler.handleAjaxError(xhr, status, error);
-                                    }
-                                });
-                            }
-                        }
-    
-                        // stop further propagation
-                        d3.event.sourceEvent.stopPropagation();
-                    });
-    
-                // label drag behavior
-                labelDrag = d3.behavior.drag()
-                    .on('dragstart', function (d) {
-                        // stop further propagation
-                        d3.event.sourceEvent.stopPropagation();
-                    })
-                    .on('drag', function (d) {
-                        if (d.bends.length > 1) {
-                            // get the dragged component
-                            var drag = d3.select('rect.label-drag');
-    
-                            // lazily create the drag selection box
-                            if (drag.empty()) {
-                                var connectionLabel = d3.select(this).select('rect.body');
-    
-                                var position = getLabelPosition(connectionLabel);
-                                var width = dimensions.width;
-                                var height = connectionLabel.attr('height');
-    
-                                // create a selection box for the move
-                                drag = d3.select('#canvas').append('rect')
-                                    .attr('x', position.x)
-                                    .attr('y', position.y)
-                                    .attr('class', 'label-drag')
-                                    .attr('width', width)
-                                    .attr('height', height)
-                                    .attr('stroke-width', function () {
-                                      return 1 / nfCanvasUtils.scaleCanvasView();
-                                    })
-                                    .attr('stroke-dasharray', function () {
-                                      return 4 / nfCanvasUtils.scaleCanvasView();
-                                    })
-                                    .datum({
-                                        x: position.x,
-                                        y: position.y,
-                                        width: width,
-                                        height: height
-                                    });
-                            } else {
-                                // update the position of the drag selection
-                                drag.attr('x', function (d) {
-                                    d.x += d3.event.dx;
-                                    return d.x;
-                                })
-                                    .attr('y', function (d) {
-                                        d.y += d3.event.dy;
-                                        return d.y;
-                                    });
-                            }
-    
-                            // calculate the current point
-                            var datum = drag.datum();
-                            var currentPoint = {
-                                x: datum.x + (datum.width / 2),
-                                y: datum.y + (datum.height / 2)
-                            };
-    
-                            var closestBendIndex = -1;
-                            var minDistance;
-                            $.each(d.bends, function (i, bend) {
-                                var bendPoint = {
-                                    'x': bend.x,
-                                    'y': bend.y
-                                };
-    
-                                // get the distance
-                                var distance = distanceBetweenPoints(currentPoint, bendPoint);
-    
-                                // see if its the minimum
-                                if (closestBendIndex === -1 || distance < minDistance) {
-                                    closestBendIndex = i;
-                                    minDistance = distance;
-                                }
-                            });
-    
-                            // record the closest bend
-                            d.labelIndex = closestBendIndex;
-    
-                            // refresh the connection
-                            d3.select(this.parentNode).call(updateConnections, {
-                                'updatePath': true,
-                                'updateLabel': false
-                            });
-                        }
-                    })
-                    .on('dragend', function (d) {
-                        if (d.bends.length > 1) {
-                            // get the drag selection
-                            var drag = d3.select('rect.label-drag');
-    
-                            // ensure we found a drag selection
-                            if (!drag.empty()) {
-                                // remove the drag selection
-                                drag.remove();
-                            }
-    
-                            // only save if necessary
-                            if (d.labelIndex !== d.component.labelIndex) {
-                                // get the connection to refresh below
-                                var connection = d3.select(this.parentNode);
-    
-                                // save the new label index
-                                save(d, {
-                                    id: d.id,
-                                    labelIndex: d.labelIndex
-                                }).fail(function () {
-                                    // restore the previous label index
-                                    d.labelIndex = d.component.labelIndex;
-    
-                                    // refresh the connection
-                                    connection.call(updateConnections, {
-                                        'updatePath': true,
-                                        'updateLabel': false
-                                    });
-                                });
-                            }
-                        }
-    
-                        // stop further propagation
-                        d3.event.sourceEvent.stopPropagation();
-                    });
-            },
-    
-            /**
-             * Adds the specified connection entity.
-             *
-             * @param connectionEntities       The connection
-             * @param options           Configuration options
-             */
-            add: function (connectionEntities, options) {
-                var selectAll = false;
-              if (nfCommon.isDefinedAndNotNull(options)) {
-                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                }
-    
-              // get the current time
-              var now = new Date().getTime();
-    
-                var add = function (connectionEntity) {
-                  addedCache.set(connectionEntity.id, now);
-  
-                    // add the connection
-                    connectionMap.set(connectionEntity.id, $.extend({
-                        type: 'Connection'
-                    }, connectionEntity));
-                };
-    
-                // determine how to handle the specified connection
-                if ($.isArray(connectionEntities)) {
-                    $.each(connectionEntities, function (_, connectionEntity) {
-                        add(connectionEntity);
-                    });
-              } else if (nfCommon.isDefinedAndNotNull(connectionEntities)) {
-                    add(connectionEntities);
-                }
-    
-                // apply the selection and handle new connections
-                var selection = select();
-                selection.enter().call(renderConnections, selectAll);
-                selection.call(updateConnections, {
-                    'updatePath': true,
-                    'updateLabel': false
-              }).call(sort);
-          },
-  
-          /**
-           * Determines if the specified selection is disconnected from other nodes.
-           *
-           * @argument {selection} selection          The selection
-           */
-          isDisconnected: function (selection) {
-  
-              // if nothing is selected return
-              if (selection.empty()) {
-                  return false;
-              }
-              var connections = d3.map();
-              var components = d3.map();
-              var isDisconnected = true;
-  
-              // include connections
-              selection.filter(function (d) {
-                  return d.type === 'Connection';
-              }).each(function (d) {
-                  connections.set(d.id, d);
-              });
-  
-              // include components and ensure their connections are included
-              selection.filter(function (d) {
-                  return d.type !== 'Connection';
-              }).each(function (d) {
-                  components.set(d.id, d.component);
-  
-                  // check all connections of this component
-                  $.each(nfConnection.getComponentConnections(d.id), function (_, connection) {
-                      if (!connections.has(connection.id)) {
-                          isDisconnected = false;
-                          return false;
-                      }
-                  });
-              });
-              if (isDisconnected) {
-  
-                  // go through each connection to ensure its source and destination are included
-                  connections.forEach(function (id, connection) {
-                      if (isDisconnected) {
-  
-                          // determine whether this connection and its components are included within the selection
-                          isDisconnected = components.has(nfCanvasUtils.getConnectionSourceComponentId(connection)) && components.has(nfCanvasUtils.getConnectionDestinationComponentId(connection));
-                      }
-                  });
-              }
-              return isDisconnected;
-            },
-    
-            /**
-             * Populates the graph with the specified connections.
-             *
-             * @argument {object | array} connectionEntities               The connections to add
-             * @argument {object} options                Configuration options
-             */
-            set: function (connectionEntities, options) {
-                var selectAll = false;
-                var transition = false;
-              if (nfCommon.isDefinedAndNotNull(options)) {
-                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                  transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-                }
-    
-              var set = function (proposedConnectionEntity) {
-                  var currentConnectionEntity = connectionMap.get(proposedConnectionEntity.id);
-  
-                  // set the connection if appropriate due to revision and wasn't previously removed
-                  if (nfClient.isNewerRevision(currentConnectionEntity, proposedConnectionEntity) && !removedCache.has(proposedConnectionEntity.id)) {
-                      connectionMap.set(proposedConnectionEntity.id, $.extend({
-                            type: 'Connection'
-                      }, proposedConnectionEntity));
-                  }
-                };
-    
-                // determine how to handle the specified connection
-                if ($.isArray(connectionEntities)) {
-                    $.each(connectionMap.keys(), function (_, key) {
-                      var currentConnectionEntity = connectionMap.get(key);
-                      var isPresent = $.grep(connectionEntities, function (proposedConnectionEntity) {
-                          return proposedConnectionEntity.id === currentConnectionEntity.id;
-                      });
-  
-                      // if the current connection is not present and was not recently added, remove it
-                      if (isPresent.length === 0 && !addedCache.has(key)) {
-                            connectionMap.remove(key);
-                      }
-                    });
-                    $.each(connectionEntities, function (_, connectionEntity) {
-                        set(connectionEntity);
-                    });
-              } else if (nfCommon.isDefinedAndNotNull(connectionEntities)) {
-                    set(connectionEntities);
-                }
-    
-                // apply the selection and handle all new connection
-                var selection = select();
-                selection.enter().call(renderConnections, selectAll);
-                selection.call(updateConnections, {
-                    'updatePath': true,
-                    'updateLabel': true,
-                    'transition': transition
-              }).call(sort);
-                selection.exit().call(removeConnections);
-            },
-    
-            /**
-             * Refreshes the connection in the UI.
-             *
-             * @param {string} connectionId
-             */
-            refresh: function (connectionId) {
-              if (nfCommon.isDefinedAndNotNull(connectionId)) {
-                    d3.select('#id-' + connectionId).call(updateConnections, {
-                        'updatePath': true,
-                        'updateLabel': true
-                    });
-                } else {
-                    d3.selectAll('g.connection').call(updateConnections, {
-                        'updatePath': true,
-                        'updateLabel': true
-                    });
-                }
-            },
-    
-            /**
-             * Refreshes the components necessary after a pan event.
-             */
-            pan: function () {
-                d3.selectAll('g.connection.entering, g.connection.leaving').call(updateConnections, {
-                    'updatePath': false,
-                    'updateLabel': true
-                });
-            },
-    
-            /**
-             * Removes the specified connection.
-             *
-           * @param {array|string} connectionIds      The connection id
-             */
-          remove: function (connectionIds) {
-              var now = new Date().getTime();
-  
-              if ($.isArray(connectionIds)) {
-                  $.each(connectionIds, function (_, connectionId) {
-                      removedCache.set(connectionId, now);
-                      connectionMap.remove(connectionId);
-                    });
-                } else {
-                  removedCache.set(connectionIds, now);
-                  connectionMap.remove(connectionIds);
-                }
-    
-                // apply the selection and handle all removed connections
-                select().exit().call(removeConnections);
-            },
-    
-            /**
-             * Removes all processors.
-             */
-            removeAll: function () {
-              nfConnection.remove(connectionMap.keys());
-            },
-    
-            /**
-             * Reloads the connection state from the server and refreshes the UI.
-             *
-             * @param {string} id       The connection id
-             */
-            reload: function (id) {
-                if (connectionMap.has(id)) {
-                    var connectionEntity = connectionMap.get(id);
-                    return $.ajax({
-                        type: 'GET',
-                        url: connectionEntity.uri,
-                        dataType: 'json'
-                    }).done(function (response) {
-                      nfConnection.set(response);
-                  });
-              }
-          },
-  
-          /**
-           * Reloads the connection status from the server and refreshes the UI.
-           *
-           * @param {string} id       The connection id
-           */
-          reloadStatus: function (id) {
-              if (connectionMap.has(id)) {
-                  return $.ajax({
-                      type: 'GET',
-                      url: '../nifi-api/flow/connections/' + encodeURIComponent(id) + '/status',
-                      dataType: 'json'
-                  }).done(function (response) {
-                      // update the existing connection
-                      var connectionEntity = connectionMap.get(id);
-                      connectionEntity.status = response.connectionStatus;
-                      connectionMap.set(id, connectionEntity);
-  
-                      // update the UI
-                      select().call(updateConnectionStatus);
-                    });
-                }
-            },
-    
-            /**
-             * Gets the connection that have a source or destination component with the specified id.
-             *
-             * @param {string} id     component id
-             * @returns {Array}     components connections
-             */
-            getComponentConnections: function (id) {
-                var connections = [];
-                connectionMap.forEach(function (_, entry) {
-                    // see if this component is the source or destination of this connection
-                  if (nfCanvasUtils.getConnectionSourceComponentId(entry) === id || nfCanvasUtils.getConnectionDestinationComponentId(entry) === id) {
-                        connections.push(entry);
-                    }
-                });
-                return connections;
-            },
-    
-            /**
-             * If the connection id is specified it is returned. If no connection id
-             * specified, all connections are returned.
-             *
-             * @param {string} id
-             */
-            get: function (id) {
-              if (nfCommon.isUndefined(id)) {
-                    return connectionMap.values();
-                } else {
-                    return connectionMap.get(id);
-                }
-          },
-  
-          /**
-           * Expires the caches up to the specified timestamp.
-           *
-           * @param timestamp
-           */
-          expireCaches: function (timestamp) {
-              var expire = function (cache) {
-                  cache.forEach(function (id, entryTimestamp) {
-                      if (timestamp > entryTimestamp) {
-                          cache.remove(id);
-                      }
-                  });
-              };
-  
-              expire(addedCache);
-              expire(removedCache);
-          }
-      };
-  
-      return nfConnection;
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js
deleted file mode 100644
index 74993453079b..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js
+++ /dev/null
@@ -1,631 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Common',
-                'nf.CanvasUtils',
-                'nf.ng.Bridge'],
-            function ($, d3, nfCommon, nfCanvasUtils, nfNgBridge) {
-                return (nf.ContextMenu = factory($, d3, nfCommon, nfCanvasUtils, nfNgBridge));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ContextMenu =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.Common'),
-                require('nf.CanvasUtils'),
-                require('nf.ng.Bridge')));
-    } else {
-        nf.ContextMenu = factory(root.$,
-            root.d3,
-            root.nf.Common,
-            root.nf.CanvasUtils,
-            root.nf.ng.Bridge);
-    }
-}(this, function ($, d3, nfCommon, nfCanvasUtils, nfNgBridge) {
-    'use strict';
-
-    var nfActions;
-
-    /**
-     * Returns whether the current group is not the root group.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var isNotRootGroup = function (selection) {
-        return nfCanvasUtils.getParentGroupId() !== null && selection.empty();
-    };
-
-    /**
-     * Determines whether the component in the specified selection is configurable.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var isConfigurable = function (selection) {
-        return nfCanvasUtils.isConfigurable(selection);
-    };
-
-    /**
-     * Determines whether the component in the specified selection has configuration details.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var hasDetails = function (selection) {
-        return nfCanvasUtils.hasDetails(selection);
-    };
-
-    /**
-     * Determines whether the components in the specified selection are deletable.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var isDeletable = function (selection) {
-        return nfCanvasUtils.areDeletable(selection);
-    };
-
-    /**
-     * Determines whether user can create a template from the components in the specified selection.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var canCreateTemplate = function (selection) {
-        return nfCanvasUtils.canWrite() && (selection.empty() && nfCanvasUtils.canRead(selection));
-    };
-
-    /**
-     * Determines whether user can upload a template.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var canUploadTemplate = function (selection) {
-        return nfCanvasUtils.canWrite() && selection.empty();
-    };
-
-    /**
-     * Determines whether components in the specified selection are group-able.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var canGroup = function (selection) {
-        return nfCanvasUtils.getComponentByType('Connection').isDisconnected(selection) && nfCanvasUtils.canModify(selection);
-    };
-
-    /**
-     * Determines whether components in the specified selection are enable-able.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var canEnable = function (selection) {
-        return nfCanvasUtils.canEnable(selection);
-    };
-
-    /**
-     * Determines whether components in the specified selection are diable-able.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var canDisable = function (selection) {
-        return nfCanvasUtils.canDisable(selection);
-    };
-
-    /**
-     * Determines whether user can manage policies of the components in the specified selection.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var canManagePolicies = function (selection) {
-        return nfCanvasUtils.isConfigurableAuthorizer() && nfCanvasUtils.canManagePolicies(selection);
-    };
-
-    /**
-     * Determines whether the components in the specified selection are runnable.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var isRunnable = function (selection) {
-        return nfCanvasUtils.areRunnable(selection);
-    };
-
-    /**
-     * Determines whether the components in the specified selection are stoppable.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var isStoppable = function (selection) {
-        return nfCanvasUtils.areStoppable(selection);
-    };
-
-    /**
-     * Determines whether the components in the specified selection support stats.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var supportsStats = function (selection) {
-        // ensure the correct number of components are selected
-        if (selection.size() !== 1) {
-            return false;
-        }
-
-        return nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isProcessGroup(selection) || nfCanvasUtils.isRemoteProcessGroup(selection) || nfCanvasUtils.isConnection(selection);
-    };
-
-    /**
-     * Determines whether the components in the specified selection has usage documentation.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var hasUsage = function (selection) {
-        // ensure the correct number of components are selected
-        if (selection.size() !== 1) {
-            return false;
-        }
-        if (nfCanvasUtils.canRead(selection) === false) {
-            return false;
-        }
-
-        return nfCanvasUtils.isProcessor(selection);
-    };
-
-    /**
-     * Determines whether there is one component selected.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var isNotConnection = function (selection) {
-        return selection.size() === 1 && !nfCanvasUtils.isConnection(selection);
-    };
-
-    /**
-     * Determines whether the components in the specified selection are copyable.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var isCopyable = function (selection) {
-        return nfCanvasUtils.isCopyable(selection);
-    };
-
-    /**
-     * Determines whether the components in the specified selection are pastable.
-     *
-     * @param {selection} selection         The selection of currently selected components
-     */
-    var isPastable = function (selection) {
-        return nfCanvasUtils.isPastable();
-    };
-
-    /**
-     * Determines whether the specified selection is empty.
-     *
-     * @param {selection} selection         The seleciton
-     */
-    var emptySelection = function (selection) {
-        return selection.empty();
-    };
-
-    /**
-     * Determines whether the componets in the specified selection support being moved to the front.
-     *
-     * @param {selection} selection         The selection
-     */
-    var canMoveToFront = function (selection) {
-        // ensure the correct number of components are selected
-        if (selection.size() !== 1) {
-            return false;
-        }
-        if (nfCanvasUtils.canModify(selection) === false) {
-            return false;
-        }
-
-        return nfCanvasUtils.isConnection(selection);
-    };
-
-    /**
-     * Determines whether the components in the specified selection are alignable.
-     *
-     * @param {selection} selection          The selection
-     */
-    var canAlign = function (selection) {
-        return nfCanvasUtils.canAlign(selection);
-    };
-
-    /**
-     * Determines whether the components in the specified selection are colorable.
-     *
-     * @param {selection} selection          The selection
-     */
-    var isColorable = function (selection) {
-        return nfCanvasUtils.isColorable(selection);
-    };
-
-    /**
-     * Determines whether the component in the specified selection is a connection.
-     *
-     * @param {selection} selection         The selection
-     */
-    var isConnection = function (selection) {
-        // ensure the correct number of components are selected
-        if (selection.size() !== 1) {
-            return false;
-        }
-
-        return nfCanvasUtils.isConnection(selection);
-    };
-
-    /**
-     * Determines whether the component in the specified selection could possibly have downstream components.
-     *
-     * @param {selection} selection         The selection
-     */
-    var hasDownstream = function (selection) {
-        // ensure the correct number of components are selected
-        if (selection.size() !== 1) {
-            return false;
-        }
-
-        return nfCanvasUtils.isFunnel(selection) || nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isProcessGroup(selection) ||
-            nfCanvasUtils.isRemoteProcessGroup(selection) || nfCanvasUtils.isInputPort(selection) ||
-            (nfCanvasUtils.isOutputPort(selection) && nfCanvasUtils.getParentGroupId() !== null);
-    };
-
-    /**
-     * Determines whether the component in the specified selection could possibly have upstream components.
-     *
-     * @param {selection} selection         The selection
-     */
-    var hasUpstream = function (selection) {
-        // ensure the correct number of components are selected
-        if (selection.size() !== 1) {
-            return false;
-        }
-
-        return nfCanvasUtils.isFunnel(selection) || nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isProcessGroup(selection) ||
-            nfCanvasUtils.isRemoteProcessGroup(selection) || nfCanvasUtils.isOutputPort(selection) ||
-            (nfCanvasUtils.isInputPort(selection) && nfCanvasUtils.getParentGroupId() !== null);
-    };
-
-    /**
-     * Determines whether the current selection is a stateful processor.
-     *
-     * @param {selection} selection
-     */
-    var isStatefulProcessor = function (selection) {
-        // ensure the correct number of components are selected
-        if (selection.size() !== 1) {
-            return false;
-        }
-        if (nfCanvasUtils.canRead(selection) === false || nfCanvasUtils.canModify(selection) === false) {
-            return false;
-        }
-
-        if (nfCanvasUtils.isProcessor(selection)) {
-            var processorData = selection.datum();
-            return processorData.component.persistsState === true;
-        } else {
-            return false;
-        }
-    };
-
-    /**
-     * Determines whether the current selection is a process group.
-     *
-     * @param {selection} selection
-     */
-    var isProcessGroup = function (selection) {
-        // ensure the correct number of components are selected
-        if (selection.size() !== 1) {
-            return false;
-        }
-
-        return nfCanvasUtils.isProcessGroup(selection);
-    };
-
-    /**
-     * Determines whether the current selection could have provenance.
-     *
-     * @param {selection} selection
-     */
-    var canAccessProvenance = function (selection) {
-        // ensure the correct number of components are selected
-        if (selection.size() !== 1) {
-            return false;
-        }
-
-        return !nfCanvasUtils.isLabel(selection) && !nfCanvasUtils.isConnection(selection) && !nfCanvasUtils.isProcessGroup(selection)
-            && !nfCanvasUtils.isRemoteProcessGroup(selection) && nfCommon.canAccessProvenance();
-    };
-
-    /**
-     * Determines whether the current selection is a remote process group.
-     *
-     * @param {selection} selection
-     */
-    var isRemoteProcessGroup = function (selection) {
-        // ensure the correct number of components are selected
-        if (selection.size() !== 1) {
-            return false;
-        }
-        if (nfCanvasUtils.canRead(selection) === false) {
-            return false;
-        }
-
-        return nfCanvasUtils.isRemoteProcessGroup(selection);
-    };
-
-    /**
-     * Determines if the components in the specified selection support starting transmission.
-     *
-     * @param {selection} selection
-     */
-    var canStartTransmission = function (selection) {
-        if (nfCanvasUtils.canModify(selection) === false) {
-            return false;
-        }
-
-        return nfCanvasUtils.canAllStartTransmitting(selection);
-    };
-
-    /**
-     * Determines if the components in the specified selection support stopping transmission.
-     *
-     * @param {selection} selection
-     */
-    var canStopTransmission = function (selection) {
-        if (nfCanvasUtils.canModify(selection) === false) {
-            return false;
-        }
-
-        return nfCanvasUtils.canAllStopTransmitting(selection);
-    };
-
-    /**
-     * Only DFMs can empty a queue.
-     *
-     * @param {selection} selection
-     */
-    var canEmptyQueue = function (selection) {
-        return isConnection(selection);
-    };
-
-    /**
-     * Only DFMs can list a queue.
-     *
-     * @param {selection} selection
-     */
-    var canListQueue = function (selection) {
-        return isConnection(selection);
-    };
-
-    /**
-     * Determines if the components in the specified selection can be moved into a parent group.
-     *
-     * @param {type} selection
-     */
-    var canMoveToParent = function (selection) {
-        if (nfCanvasUtils.canModify(selection) === false) {
-            return false;
-        }
-
-        // TODO - also check can modify in parent
-
-        return !selection.empty() && nfCanvasUtils.getComponentByType('Connection').isDisconnected(selection) && nfCanvasUtils.getParentGroupId() !== null;
-    };
-
-    /**
-     * Adds a menu item to the context menu.
-     *
-     * {
-     *      click: refresh (function),
-     *      text: 'Start' (string),
-     *      clazz: 'fa fa-refresh'
-     * }
-     *
-     * @param {jQuery} contextMenu The context menu
-     * @param {object} item The menu item configuration
-     */
-    var addMenuItem = function (contextMenu, item) {
-        if (typeof item.click === 'function') {
-            var menuItem = $('<div class="context-menu-item"></div>').on('click', item['click']).on('contextmenu', function (evt) {
-                // invoke the desired action
-                item['click'](evt);
-
-                // stop propagation and prevent default
-                evt.preventDefault();
-                evt.stopPropagation();
-            }).on('mouseenter', function () {
-                $(this).addClass('hover');
-            }).on('mouseleave', function () {
-                $(this).removeClass('hover');
-            }).appendTo(contextMenu);
-
-            // create the img and conditionally add the style
-            var img = $('<div class="context-menu-item-img"></div>').addClass(item['clazz']).appendTo(menuItem);
-            if (nfCommon.isDefinedAndNotNull(item['imgStyle'])) {
-                img.addClass(item['imgStyle']);
-            }
-
-            $('<div class="context-menu-item-text"></div>').text(item['text']).appendTo(menuItem);
-            $('<div class="clear"></div>').appendTo(menuItem);
-        }
-    };
-
-    /**
-     * Positions and shows the context menu.
-     *
-     * @param {jQuery} contextMenu  The context menu
-     * @param {object} options      The context menu configuration
-     */
-    var positionAndShow = function (contextMenu, options) {
-        contextMenu.css({
-            'left': options.x + 'px',
-            'top': options.y + 'px'
-        }).show();
-    };
-
-    /**
-     * Executes the specified action with the optional selection.
-     *
-     * @param {string} action
-     * @param {selection} selection
-     * @param {mouse event} evt
-     */
-    var executeAction = function (action, selection, evt) {
-        // execute the action
-        nfActions[action](selection, evt);
-
-        // close the context menu
-        nfContextMenu.hide();
-    };
-
-    // defines the available actions and the conditions which they apply
-    var actions = [
-        {condition: emptySelection, menuItem: {clazz: 'fa fa-refresh', text: nf._.msg('nf-context-menu.Refresh'), action: 'reload'}},
-        {condition: isNotRootGroup, menuItem: {clazz: 'fa fa-level-up', text: nf._.msg('nf-context-menu.LeaveGroup'), action: 'leaveGroup'}},
-        {condition: isConfigurable, menuItem: {clazz: 'fa fa-gear', text: nf._.msg('nf-context-menu.Configure'), action: 'showConfiguration'}},
-        {condition: hasDetails, menuItem: {clazz: 'fa fa-gear', text: nf._.msg('nf-context-menu.ViewConfiguration'), action: 'showDetails'}},
-        {condition: isProcessGroup, menuItem: {clazz: 'fa fa-sign-in', text: nf._.msg('nf-context-menu.EnterGroup'), action: 'enterGroup'}},
-        {condition: isRunnable, menuItem: {clazz: 'fa fa-play', text: nf._.msg('nf-context-menu.Start'), action: 'start'}},
-        {condition: isStoppable, menuItem: {clazz: 'fa fa-stop', text: nf._.msg('nf-context-menu.Stop'), action: 'stop'}},
-        {condition: canEnable, menuItem: {clazz: 'fa fa-flash', text: nf._.msg('nf-context-menu.canEnable'), action: 'enable'}},
-        {condition: canDisable, menuItem: {clazz: 'icon icon-enable-false', text: nf._.msg('nf-context-menu.canDisable'), action: 'disable'}},
-        {condition: canGroup, menuItem: {clazz: 'icon icon-group', text: nf._.msg('nf-context-menu.canGroup'), action: 'group'}},
-        {condition: isRemoteProcessGroup, menuItem: {clazz: 'fa fa-cloud', text: nf._.msg('nf-context-menu.RemotePorts'), action: 'remotePorts'}},
-        {condition: canStartTransmission, menuItem: {clazz: 'fa fa-bullseye', text: nf._.msg('nf-context-menu.EnableTransmission'), action: 'enableTransmission'}},
-        {condition: canStopTransmission, menuItem: {clazz: 'icon icon-transmit-false', text: nf._.msg('nf-context-menu.DisableTransmission'), action: 'disableTransmission'}},
-        {condition: supportsStats, menuItem: {clazz: 'fa fa-area-chart', text: nf._.msg('nf-context-menu.StatsHistory'), action: 'showStats'}},
-        {condition: canAccessProvenance, menuItem: {clazz: 'icon icon-provenance', imgStyle: 'context-menu-provenance', text: nf._.msg('nf-context-menu.DataProvenance'), action: 'openProvenance'}},
-        {condition: isStatefulProcessor, menuItem: {clazz: 'fa fa-tasks', text: nf._.msg('nf-context-menu.ViewState'), action: 'viewState'}},
-        {condition: canMoveToFront, menuItem: {clazz: 'fa fa-clone', text: nf._.msg('nf-context-menu.BringFront'), action: 'toFront'}},
-        {condition: isConnection, menuItem: {clazz: 'fa fa-long-arrow-left', text: nf._.msg('nf-context-menu.GoToSource'), action: 'showSource'}},
-        {condition: isConnection, menuItem: {clazz: 'fa fa-long-arrow-right', text: nf._.msg('nf-context-menu.GoToDestination'), action: 'showDestination'}},
-        {condition: hasUpstream, menuItem: {clazz: 'icon icon-connect', text: nf._.msg('nf-context-menu.UpstreamConnections'), action: 'showUpstream'}},
-        {condition: hasDownstream, menuItem: {clazz: 'icon icon-connect', text: nf._.msg('nf-context-menu.DownstreamConnections'), action: 'showDownstream'}},
-        {condition: hasUsage, menuItem: {clazz: 'fa fa-book', text: nf._.msg('nf-context-menu.Usage'), action: 'showUsage'}},
-        {condition: isRemoteProcessGroup, menuItem: {clazz: 'fa fa-refresh', text: nf._.msg('nf-context-menu.Refresh'), action: 'refreshRemoteFlow'}},
-        {condition: isRemoteProcessGroup, menuItem: {clazz: 'fa fa-external-link', text: nf._.msg('nf-context-menu.GoTo'), action: 'openUri'}},
-        {condition: isColorable, menuItem: {clazz: 'fa fa-paint-brush', text: nf._.msg('nf-context-menu.ChangeColor'), action: 'fillColor'}},
-        {condition: isNotConnection, menuItem: {clazz: 'fa fa-crosshairs', text: nf._.msg('nf-context-menu.CenterInView'), action: 'center'}},
-        {condition: isCopyable, menuItem: {clazz: 'fa fa-copy', text: nf._.msg('nf-context-menu.Copy'), action: 'copy'}},
-        {condition: isPastable, menuItem: {clazz: 'fa fa-paste', text: nf._.msg('nf-context-menu.Paste'), action: 'paste'}},
-        {condition: canMoveToParent, menuItem: {clazz: 'fa fa-arrows', text: nf._.msg('nf-context-menu.MoveParentGroup'), action: 'moveIntoParent'}},
-        {condition: canListQueue, menuItem: {clazz: 'fa fa-list', text: nf._.msg('nf-context-menu.QueueList'), action: 'listQueue'}},
-        {condition: canEmptyQueue, menuItem: {clazz: 'fa fa-minus-circle', text: nf._.msg('nf-context-menu.EmptyQueue'), action: 'emptyQueue'}},
-        {condition: isDeletable, menuItem: {clazz: 'fa fa-trash', text: nf._.msg('nf-context-menu.Delete'), action: 'delete'}},
-        {condition: canManagePolicies, menuItem: {clazz: 'fa fa-key', text: nf._.msg('nf-context-menu.canManagePolicies'), action: 'managePolicies'}},
-        {condition: canAlign, menuItem: {clazz: 'fa fa-align-center', text: nf._.msg('nf-context-menu.canAlign1'), action: 'alignVertical'}},
-        {condition: canAlign, menuItem: { clazz: 'fa fa-align-center fa-rotate-90', text: nf._.msg('nf-context-menu.canAlign2'), action: 'alignHorizontal'}},
-        {condition: canUploadTemplate, menuItem: {clazz: 'icon icon-template-import', text: nf._.msg('nf-context-menu.canUploadTemplate'), action: 'uploadTemplate'}},
-        {condition: canCreateTemplate, menuItem: {clazz: 'icon icon-template-save', text: nf._.msg('nf-context-menu.canCreateTemplate'), action: 'template'}}
-    ];
-
-    var nfContextMenu = {
-
-        /**
-         * Initialize the context menu.
-         *
-         * @param nfActionsRef   The nfActions module.
-         */
-        init: function (nfActionsRef) {
-            nfActions = nfActionsRef;
-
-            $('#context-menu').on('contextmenu', function (evt) {
-                // stop propagation and prevent default
-                evt.preventDefault();
-                evt.stopPropagation();
-            });
-        },
-
-        /**
-         * Shows the context menu.
-         */
-        show: function () {
-            var contextMenu = $('#context-menu').empty();
-            var canvasBody = $('#canvas-body').get(0);
-            var bannerFooter = $('#banner-footer').get(0);
-            var breadCrumb = $('#breadcrumbs').get(0);
-
-            // get the current selection
-            var selection = nfCanvasUtils.getSelection();
-
-            // consider each component action for the current selection
-            $.each(actions, function (_, action) {
-                // determine if this action is application for this selection
-                if (action.condition(selection, nfCanvasUtils.getComponentByType('Connection'))) {
-                    var menuItem = action.menuItem;
-
-                    addMenuItem(contextMenu, {
-                        clazz: menuItem.clazz,
-                        imgStyle: menuItem.imgStyle,
-                        text: menuItem.text,
-                        click: function (evt) {
-                            executeAction(menuItem.action, selection, evt);
-                        }
-                    });
-                }
-            });
-
-            // get the location for the context menu
-            var position = d3.mouse(canvasBody);
-
-            // nifi 1864 make sure the context menu is not hidden by the browser boundaries
-            if (position[0] + contextMenu.width() > canvasBody.clientWidth) {
-                position[0] = canvasBody.clientWidth - contextMenu.width() - 2;
-            }
-            if (position[1] + contextMenu.height() > (canvasBody.clientHeight - breadCrumb.clientHeight - bannerFooter.clientHeight)) {
-                position[1] = canvasBody.clientHeight - breadCrumb.clientHeight - bannerFooter.clientHeight - contextMenu.height() - 3;
-            }
-
-            // show the context menu
-            positionAndShow(contextMenu, {
-                'x': position[0],
-                'y': position[1]
-            });
-
-            // inform Angular app incase we've click on the canvas
-            nfNgBridge.digest();
-        },
-
-        /**
-         * Hides the context menu.
-         */
-        hide: function () {
-            $('#context-menu').hide();
-        },
-
-        /**
-         * Activates the context menu for the components in the specified selection.
-         *
-         * @param {selection} components    The components to enable the context menu for
-         */
-        activate: function (components) {
-            components.on('contextmenu.selection', function () {
-                // get the clicked component to update selection
-                nfContextMenu.show();
-
-                // stop propagation and prevent default
-                d3.event.preventDefault();
-                d3.event.stopPropagation();
-            });
-        }
-    };
-
-    return nfContextMenu;
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
deleted file mode 100644
index 3491f55fe66f..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
+++ /dev/null
@@ -1,2167 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.ErrorHandler',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.Client',
-                  'nf.ControllerServices',
-                  'nf.Settings',
-                  'nf.UniversalCapture',
-                  'nf.CustomUi',
-                  'nf.CanvasUtils',
-                  'nf.ReportingTask',
-                  'nf.Processor'],
-              function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerServices, nfSettings, nfUniversalCapture, nfCustomUi, nfCanvasUtils, nfReportingTask, nfProcessor) {
-                  return (nf.ControllerService = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerServices, nfSettings, nfUniversalCapture, nfCustomUi, nfCanvasUtils, nfReportingTask, nfProcessor));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ControllerService =
-              factory(require('jquery'),
-                  require('d3'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Common'),
-                  require('nf.Dialog'),
-                  require('nf.Client'),
-                  require('nf.ControllerServices'),
-                  require('nf.Settings'),
-                  require('nf.UniversalCapture'),
-                  require('nf.CustomUi'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ReportingTask'),
-                  require('nf.Processor')));
-      } else {
-          nf.ControllerService = factory(root.$,
-              root.d3,
-              root.nf.ErrorHandler,
-              root.nf.Common,
-              root.nf.Dialog,
-              root.nf.Client,
-              root.nf.ControllerServices,
-              root.nf.Settings,
-              root.nf.UniversalCapture,
-              root.nf.CustomUi,
-              root.nf.CanvasUtils,
-              root.nf.ReportingTask,
-              root.nf.Processor);
-      }
-  }(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerServices, nfSettings, nfUniversalCapture, nfCustomUi, nfCanvasUtils, nfReportingTask, nfProcessor) {
-      'use strict';
-    
-        var config = {
-            edit: 'edit',
-            readOnly: 'read-only',
-            serviceOnly: 'SERVICE_ONLY',
-          serviceAndReferencingComponents: 'SERVICE_AND_REFERENCING_COMPONENTS',
-          urls: {
-              api: '../nifi-api'
-          }
-        };
-    
-        /**
-         * Handle any expected controller service configuration errors.
-         *
-         * @argument {object} xhr       The XmlHttpRequest
-         * @argument {string} status    The status of the request
-         * @argument {string} error     The error
-         */
-        var handleControllerServiceConfigurationError = function (xhr, status, error) {
-            if (xhr.status === 400) {
-                var errors = xhr.responseText.split('\n');
-    
-                var content;
-                if (errors.length === 1) {
-                    content = $('<span></span>').text(errors[0]);
-                } else {
-                  content = nfCommon.formatUnorderedList(errors);
-                }
-    
-              nfDialog.showOkDialog({
-                    dialogContent: content,
-                  headerText: nf._.msg('nf-controller-service.ControllerService')
-                });
-            } else {
-              nfErrorHandler.handleAjaxError(xhr, status, error);
-            }
-        };
-    
-        /**
-         * Determines whether the user has made any changes to the controller service configuration
-         * that needs to be saved.
-         */
-        var isSaveRequired = function () {
-            var entity = $('#controller-service-configuration').data('controllerServiceDetails');
-    
-            // determine if any controller service settings have changed
-    
-            if ($('#controller-service-name').val() !== entity.component['name']) {
-                return true;
-            }
-            if ($('#controller-service-comments').val() !== entity.component['comments']) {
-                return true;
-            }
-    
-            // defer to the properties
-            return $('#controller-service-properties').propertytable('isSaveRequired');
-        };
-    
-        /**
-         * Marshals the data that will be used to update the contr oller service's configuration.
-         */
-        var marshalDetails = function () {
-            // properties
-            var properties = $('#controller-service-properties').propertytable('marshalProperties');
-    
-            // create the controller service dto
-            var controllerServiceDto = {};
-            controllerServiceDto['id'] = $('#controller-service-id').text();
-            controllerServiceDto['name'] = $('#controller-service-name').val();
-            controllerServiceDto['comments'] = $('#controller-service-comments').val();
-    
-            // set the properties
-            if ($.isEmptyObject(properties) === false) {
-                controllerServiceDto['properties'] = properties;
-            }
-    
-            // create the controller service entity
-            var controllerServiceEntity = {};
-            controllerServiceEntity['component'] = controllerServiceDto;
-    
-            // return the marshaled details
-            return controllerServiceEntity;
-        };
-    
-        /**
-         * Validates the specified details.
-         *
-         * @argument {object} details       The details to validate
-         */
-        var validateDetails = function (details) {
-            return true;
-        };
-    
-        /**
-         * Reloads the specified controller service if we have read permissions. It's referencing and referenced
-         * components are NOT reloaded.
-         *
-         * @param {jQuery} serviceTable
-         * @param {string} id
-         */
-        var reloadControllerService = function (serviceTable, id) {
-            // get the table and update the row accordingly
-            var controllerServiceGrid = serviceTable.data('gridInstance');
-            var controllerServiceData = controllerServiceGrid.getData();
-            var controllerServiceEntity = controllerServiceData.getItemById(id);
-    
-            // this may happen if controller service A references another controller
-            // service B that has been removed. attempting to enable/disable/remove A
-            // will attempt to reload B which is no longer a known service. also ensure
-            // we have permissions to reload the service
-          if (nfCommon.isUndefined(controllerServiceEntity) || controllerServiceEntity.permissions.canRead === false) {
-                return $.Deferred(function (deferred) {
-                    deferred.reject();
-                }).promise();
-            }
-    
-            return $.ajax({
-                type: 'GET',
-                url: controllerServiceEntity.uri,
-                dataType: 'json'
-            }).done(function (response) {
-                renderControllerService(serviceTable, response);
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Renders the specified controller service.
-         *
-         * @param {object} serviceTable
-         * @param {object} controllerServiceEntity
-         */
-        var renderControllerService = function (serviceTable, controllerServiceEntity) {
-            // get the table and update the row accordingly
-            var controllerServiceGrid = serviceTable.data('gridInstance');
-            var controllerServiceData = controllerServiceGrid.getData();
-            var currentControllerServiceEntity = controllerServiceData.getItemById(controllerServiceEntity.id);
-            controllerServiceData.updateItem(controllerServiceEntity.id, $.extend({
-                bulletins: currentControllerServiceEntity.bulletins
-            }, controllerServiceEntity));
-        };
-    
-        /**
-         * Reloads the specified controller services and all of its referencing
-         * and referenced components.
-         *
-         * @param {jQuery} serviceTable
-         * @param {type} controllerService
-         */
-        var reloadControllerServiceAndReferencingComponents = function (serviceTable, controllerService) {
-            reloadControllerService(serviceTable, controllerService.id).done(function (response) {
-                reloadControllerServiceReferences(serviceTable, response.component);
-            });
-        };
-    
-        /**
-         * Reloads components that reference this controller service as well as
-         * other services that this controller service references.
-         *
-         * @param {jQuery} serviceTable
-         * @param {object} controllerService
-         */
-        var reloadControllerServiceReferences = function (serviceTable, controllerService) {
-            // reload all dependent processors if they are currently visible
-            $.each(controllerService.referencingComponents, function (_, referencingComponentEntity) {
-                // ensure we can read the referencing component prior to reloading
-                if (referencingComponentEntity.permissions.canRead === false) {
-                    return;
-                }
-    
-                var reference = referencingComponentEntity.component;
-                if (reference.referenceType === 'Processor') {
-                    // reload the processor on the canvas if appropriate
-                  if (nfCanvasUtils.getGroupId() === reference.groupId) {
-                      nfProcessor.reload(reference.id);
-                    }
-    
-                    // update the current active thread count
-                    $('div.' + reference.id + '-active-threads').text(reference.activeThreadCount);
-    
-                    // update the current state of this processor
-                    var referencingComponentState = $('div.' + reference.id + '-state');
-                    if (referencingComponentState.length) {
-                        updateReferencingSchedulableComponentState(referencingComponentState, reference);
-                    }
-                } else if (reference.referenceType === 'ReportingTask') {
-                    // reload the referencing reporting tasks
-                  nfReportingTask.reload(reference.id);
-    
-                    // update the current active thread count
-                    $('div.' + reference.id + '-active-threads').text(reference.activeThreadCount);
-    
-                    // update the current state of this reporting task
-                    var referencingComponentState = $('div.' + reference.id + '-state');
-                    if (referencingComponentState.length) {
-                        updateReferencingSchedulableComponentState(referencingComponentState, reference);
-                    }
-                } else {
-                    // reload the referencing services
-                    reloadControllerService(serviceTable, reference.id);
-    
-                    // update the current state of this service
-                    var referencingComponentState = $('div.' + reference.id + '-state');
-                    if (referencingComponentState.length) {
-                        updateReferencingServiceState(referencingComponentState, reference);
-                    }
-    
-                    // consider it's referencing components if appropriate
-                    if (reference.referenceCycle === false) {
-                        reloadControllerServiceReferences(serviceTable, reference);
-                    }
-                }
-            });
-    
-            // see if this controller service references another controller service
-            // in order to update the referenced service referencing components
-          nfControllerService.reloadReferencedServices(serviceTable, controllerService);
-        };
-    
-        /**
-         * Adds a border to the controller service referencing components if necessary.
-         *
-         * @argument {jQuery} referenceContainer
-         */
-        var updateReferencingComponentsBorder = function (referenceContainer) {
-            // determine if it is too big
-          var tooBig = referenceContainer.get(0).scrollHeight > Math.round(referenceContainer.innerHeight()) ||
-              referenceContainer.get(0).scrollWidth > Math.round(referenceContainer.innerWidth());
-    
-            // draw the border if necessary
-            if (referenceContainer.is(':visible') && tooBig) {
-                referenceContainer.css('border-width', '1px');
-            } else {
-                referenceContainer.css('border-width', '0px');
-            }
-        };
-    
-        /**
-         * Updates the specified bulletinIcon with the specified bulletins if necessary.
-         *
-         * @param {array} bulletins
-         * @param {jQuery} bulletinIcon
-         */
-        var updateBulletins = function (bulletins, bulletinIcon) {
-            var currentBulletins = bulletinIcon.data('bulletins');
-    
-            // update the bulletins if necessary
-          if (nfCommon.doBulletinsDiffer(currentBulletins, bulletins)) {
-                bulletinIcon.data('bulletins', bulletins);
-    
-                // format the new bulletins
-              var formattedBulletins = nfCommon.getFormattedBulletins(bulletins);
-    
-                // if there are bulletins update them
-                if (bulletins.length > 0) {
-                  var list = nfCommon.formatUnorderedList(formattedBulletins);
-    
-                    // update existing tooltip or initialize a new one if appropriate
-                    if (bulletinIcon.data('qtip')) {
-                        bulletinIcon.qtip('option', 'content.text', list);
-                    } else {
-                        bulletinIcon.addClass('has-bulletins').show().qtip($.extend({},
-                          nfCanvasUtils.config.systemTooltipConfig,
-                            {
-                                content: list
-                            }));
-                    }
-                } else if (bulletinIcon.data('qtip')) {
-                    bulletinIcon.removeClass('has-bulletins').removeData('bulletins').hide().qtip('api').destroy(true);
-                }
-            }
-        };
-    
-        /**
-         * Updates the referencingComponentState using the specified referencingComponent.
-         *
-         * @param {jQuery} referencingComponentState
-         * @param {object} referencingComponent
-         */
-        var updateReferencingSchedulableComponentState = function (referencingComponentState, referencingComponent) {
-            referencingComponentState.removeClass('disabled stopped running invalid').addClass(function () {
-                var icon = $(this);
-    
-                var state = referencingComponent.state.toLowerCase();
-              if (state === 'stopped' && !nfCommon.isEmpty(referencingComponent.validationErrors)) {
-                    state = 'invalid';
-    
-                    // add tooltip for the warnings
-                  var list = nfCommon.formatUnorderedList(referencingComponent.validationErrors);
-                    if (icon.data('qtip')) {
-                        icon.qtip('option', 'content.text', list);
-                    } else {
-                        icon.qtip($.extend({},
-                          nfCanvasUtils.config.systemTooltipConfig,
-                            {
-                                content: list
-                            }));
-                    }
-                } else if (icon.data('qtip')) {
-                    icon.qtip('api').destroy(true);
-                }
-                return state;
-            });
-        };
-    
-        /**
-         * Updates the referencingServiceState using the specified referencingService.
-         *
-         * @param {jQuery} referencingServiceState
-         * @param {object} referencingService
-         */
-        var updateReferencingServiceState = function (referencingServiceState, referencingService) {
-            referencingServiceState.removeClass('disabled enabled invalid').addClass(function () {
-                var icon = $(this);
-    
-                var state = referencingService.state === 'ENABLED' ? 'enabled' : 'disabled';
-              if (state === 'disabled' && !nfCommon.isEmpty(referencingService.validationErrors)) {
-                    state = 'invalid';
-    
-                    // add tooltip for the warnings
-                  var list = nfCommon.formatUnorderedList(referencingService.validationErrors);
-                    if (icon.data('qtip')) {
-                        icon.qtip('option', 'content.text', list);
-                    } else {
-                        icon.qtip($.extend({},
-                          nfCanvasUtils.config.systemTooltipConfig,
-                            {
-                                content: list
-                            }));
-                    }
-                } else if (icon.data('qtip')) {
-                    icon.qtip('api').destroy(true);
-                }
-                return state;
-            });
-        };
-    
-        /**
-         * Updates the bulletins for all referencing components.
-         *
-         * @param {array} bulletins
-         */
-        var updateReferencingComponentBulletins = function (bulletins) {
-            var bulletinsBySource = d3.nest()
-                .key(function (d) {
-                    return d.sourceId;
-                })
-                .map(bulletins, d3.map);
-    
-            bulletinsBySource.forEach(function (sourceId, sourceBulletins) {
-                $('div.' + sourceId + '-bulletins').each(function () {
-                    updateBulletins(sourceBulletins, $(this));
-                });
-            });
-        };
-    
-        /**
-         * Adds the specified reference for this controller service.
-         *
-         * @param {jQuery} serviceTable
-         * @param {jQuery} referenceContainer
-         * @param {array} referencingComponents
-         */
-        var createReferencingComponents = function (serviceTable, referenceContainer, referencingComponents) {
-          if (nfCommon.isEmpty(referencingComponents)) {
-              referenceContainer.append('<div class="unset">'+nf._.msg('nf-actions.Message19')+'</div>');
-                return;
-            }
-    
-            // toggles the visibility of a container
-            var toggle = function (twist, container) {
-                if (twist.hasClass('expanded')) {
-                    twist.removeClass('expanded').addClass('collapsed');
-                    container.hide();
-                } else {
-                    twist.removeClass('collapsed').addClass('expanded');
-                    container.show();
-                }
-            };
-    
-            var referencingComponentIds = [];
-            var processors = $('<ul class="referencing-component-listing clear"></ul>');
-            var services = $('<ul class="referencing-component-listing clear"></ul>');
-            var tasks = $('<ul class="referencing-component-listing clear"></ul>');
-            var unauthorized = $('<ul class="referencing-component-listing clear"></ul>');
-            $.each(referencingComponents, function (_, referencingComponentEntity) {
-                // check the access policy for this referencing component
-                if (referencingComponentEntity.permissions.canRead === false || referencingComponentEntity.permissions.canWrite === false) {
-                    var unauthorizedReferencingComponent = $('<div class="unset"></div>').text(referencingComponentEntity.id);
-                    unauthorized.append(unauthorizedReferencingComponent);
-                } else {
-                    var referencingComponent = referencingComponentEntity.component;
-                    referencingComponentIds.push(referencingComponent.id);
-    
-                    if (referencingComponent.referenceType === 'Processor') {
-                        var processorLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
-                            // show the component
-                          nfCanvasUtils.showComponent(referencingComponent.groupId, referencingComponent.id);
-    
-                            // close the dialog and shell
-                            referenceContainer.closest('.dialog').modal('hide');
-                            $('#shell-close-button').click();
-                        });
-    
-                        // state
-                        var processorState = $('<div class="referencing-component-state"></div>').addClass(referencingComponent.id + '-state');
-                        updateReferencingSchedulableComponentState(processorState, referencingComponent);
-    
-                        // bulletin
-                        var processorBulletins = $('<div class="referencing-component-bulletins"></div>').addClass(referencingComponent.id + '-bulletins');
-    
-                        // type
-                      var processorType = $('<span class="referencing-component-type"></span>').text(nfCommon.substringAfterLast(referencingComponent.type, '.'));
-    
-                        // active thread count
-                        var processorActiveThreadCount = $('<span class="referencing-component-active-thread-count"></span>').addClass(referencingComponent.id + '-active-threads');
-                      if (nfCommon.isDefinedAndNotNull(referencingComponent.activeThreadCount) && referencingComponent.activeThreadCount > 0) {
-                            processorActiveThreadCount.text('(' + referencingComponent.activeThreadCount + ')');
-                        }
-    
-                        // processor
-                        var processorItem = $('<li></li>').append(processorState).append(processorBulletins).append(processorLink).append(processorType).append(processorActiveThreadCount);
-                        processors.append(processorItem);
-                    } else if (referencingComponent.referenceType === 'ControllerService') {
-                        var serviceLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
-                            var controllerServiceGrid = serviceTable.data('gridInstance');
-                            var controllerServiceData = controllerServiceGrid.getData();
-    
-                            // select the selected row
-                            var row = controllerServiceData.getRowById(referencingComponent.id);
-                            controllerServiceGrid.setSelectedRows([row]);
-                            controllerServiceGrid.scrollRowIntoView(row);
-    
-                            // close the dialog and shell
-                            referenceContainer.closest('.dialog').modal('hide');
-                        });
-    
-                        // container for this service's references
-                        var referencingServiceReferencesContainer = $('<div class="referencing-component-references hidden"></div>');
-                        var serviceTwist = $('<div class="service expansion-button collapsed pointer"></div>').on('click', function () {
-                            if (serviceTwist.hasClass('collapsed')) {
-                                var controllerServiceGrid = serviceTable.data('gridInstance');
-                                var controllerServiceData = controllerServiceGrid.getData();
-                                var referencingServiceEntity = controllerServiceData.getItemById(referencingComponent.id);
-                                var referencingService = referencingServiceEntity.component;
-    
-                                // create the markup for the references
-                                createReferencingComponents(serviceTable, referencingServiceReferencesContainer, referencingService.referencingComponents);
-                            } else {
-                                referencingServiceReferencesContainer.empty();
-                            }
-    
-                            // toggle visibility
-                            toggle(serviceTwist, referencingServiceReferencesContainer);
-    
-                            // update borders as necessary
-                            updateReferencingComponentsBorder(referenceContainer);
-                        });
-    
-                        // state
-                        var serviceState = $('<div class="referencing-component-state"></div>').addClass(referencingComponent.id + '-state');
-                        updateReferencingServiceState(serviceState, referencingComponent);
-    
-                        // bulletin
-                        var serviceBulletins = $('<div class="referencing-component-bulletins"></div>').addClass(referencingComponent.id + '-bulletins');
-    
-                        // type
-                      var serviceType = $('<span class="referencing-component-type"></span>').text(nfCommon.substringAfterLast(referencingComponent.type, '.'));
-    
-                        // service
-                        var serviceItem = $('<li></li>').append(serviceTwist).append(serviceState).append(serviceBulletins).append(serviceLink).append(serviceType).append(referencingServiceReferencesContainer);
-    
-                        services.append(serviceItem);
-                    } else if (referencingComponent.referenceType === 'ReportingTask') {
-                        var reportingTaskLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
-                            var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
-                            var reportingTaskData = reportingTaskGrid.getData();
-    
-                            // select the selected row
-                            var row = reportingTaskData.getRowById(referencingComponent.id);
-                            reportingTaskGrid.setSelectedRows([row]);
-                            reportingTaskGrid.scrollRowIntoView(row);
-    
-                            // select the reporting task tab
-                            $('#settings-tabs').find('li:last').click();
-    
-                            // close the dialog and shell
-                            referenceContainer.closest('.dialog').modal('hide');
-                        });
-    
-                        // state
-                        var reportingTaskState = $('<div class="referencing-component-state"></div>').addClass(referencingComponent.id + '-state');
-                        updateReferencingSchedulableComponentState(reportingTaskState, referencingComponent);
-    
-                        // bulletins
-                        var reportingTaskBulletins = $('<div class="referencing-component-bulletins"></div>').addClass(referencingComponent.id + '-bulletins');
-    
-                        // type
-                      var reportingTaskType = $('<span class="referencing-component-type"></span>').text(nfCommon.substringAfterLast(referencingComponent.type, '.'));
-    
-                        // active thread count
-                        var reportingTaskActiveThreadCount = $('<span class="referencing-component-active-thread-count"></span>').addClass(referencingComponent.id + '-active-threads');
-                      if (nfCommon.isDefinedAndNotNull(referencingComponent.activeThreadCount) && referencingComponent.activeThreadCount > 0) {
-                            reportingTaskActiveThreadCount.text('(' + referencingComponent.activeThreadCount + ')');
-                        }
-    
-                        // reporting task
-                        var reportingTaskItem = $('<li></li>').append(reportingTaskState).append(reportingTaskBulletins).append(reportingTaskLink).append(reportingTaskType).append(reportingTaskActiveThreadCount);
-                        tasks.append(reportingTaskItem);
-                    }
-                }
-            });
-    
-            // query for the bulletins
-            queryBulletins(referencingComponentIds).done(function (response) {
-                var bulletins = response.bulletinBoard.bulletins;
-                updateReferencingComponentBulletins(bulletins);
-            });
-    
-            // create the collapsable listing for each type
-            var createReferenceBlock = function (titleText, list) {
-                if (list.is(':empty')) {
-                    list.remove();
-                    return;
-                }
-    
-                var twist = $('<div class="expansion-button expanded"></div>');
-                var title = $('<span class="referencing-component-title"></span>').text(titleText);
-                var count = $('<span class="referencing-component-count"></span>').text('(' + list.children().length + ')');
-    
-                // create the reference block
-                $('<div class="referencing-component-block pointer unselectable"></div>').on('click', function () {
-                    // toggle this block
-                    toggle(twist, list);
-    
-                    // update the border if necessary
-                    updateReferencingComponentsBorder(referenceContainer);
-                }).append(twist).append(title).append(count).appendTo(referenceContainer);
-    
-                // add the listing
-                list.appendTo(referenceContainer);
-            };
-    
-            // create blocks for each type of component
-            createReferenceBlock('Processors', processors);
-            createReferenceBlock('Reporting Tasks', tasks);
-            createReferenceBlock('Controller Services', services);
-            createReferenceBlock('Unauthorized', unauthorized);
-        };
-    
-        /**
-         * Queries for bulletins for the specified components.
-         *
-         * @param {array} componentIds
-         * @returns {deferred}
-         */
-        var queryBulletins = function (componentIds) {
-            var ids = componentIds.join('|');
-    
-            return $.ajax({
-                type: 'GET',
-                url: '../nifi-api/flow/bulletin-board',
-                data: {
-                    sourceId: ids
-                },
-                dataType: 'json'
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Sets whether the specified controller service is enabled.
-         *
-         * @param {jQuery} serviceTable
-         * @param {object} controllerServiceEntity
-         * @param {boolean} enabled
-         * @param {function} pollCondition
-         */
-        var setEnabled = function (serviceTable, controllerServiceEntity, enabled, pollCondition) {
-            // build the request entity
-            var updateControllerServiceEntity = {
-              'revision': nfClient.getRevision(controllerServiceEntity),
-                'component': {
-                    'id': controllerServiceEntity.id,
-                    'state': enabled ? 'ENABLED' : 'DISABLED'
-                }
-            };
-    
-            var updated = $.ajax({
-                type: 'PUT',
-                url: controllerServiceEntity.uri,
-                data: JSON.stringify(updateControllerServiceEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                renderControllerService(serviceTable, response);
-          }).fail(nfErrorHandler.handleAjaxError);
-    
-            // wait until the polling of each service finished
-            return $.Deferred(function (deferred) {
-                updated.done(function () {
-                    var serviceUpdated = pollService(controllerServiceEntity, function (service, bulletins) {
-                        if ($.isArray(bulletins)) {
-                            if (enabled) {
-                                updateBulletins(bulletins, $('#enable-controller-service-bulletins'));
-                            } else {
-                                updateBulletins(bulletins, $('#disable-controller-service-bulletins'));
-                            }
-                        }
-    
-                        // the condition is met once the service is (ENABLING or ENABLED)/DISABLED
-                        if (enabled) {
-                            return service.state === 'ENABLING' || service.state === 'ENABLED';
-                        } else {
-                            return service.state === 'DISABLED';
-                        }
-                    }, function (service) {
-                        return queryBulletins([service.id]);
-                    }, pollCondition);
-    
-                    // once the service has updated, resolve and render the updated service
-                    serviceUpdated.done(function () {
-                        deferred.resolve();
-                    }).fail(function () {
-                        deferred.reject();
-                    });
-                }).fail(function () {
-                    deferred.reject();
-                });
-            }).promise();
-        };
-    
-        /**
-         * Gets the id's of all controller services referencing the specified controller service.
-         *
-         * @param {object} controllerService
-         */
-        var getReferencingControllerServiceIds = function (controllerService) {
-            var ids = d3.set();
-            ids.add(controllerService.id);
-    
-            var checkReferencingServices = function (referencingComponents) {
-                $.each(referencingComponents, function (_, referencingComponentEntity) {
-                    var referencingComponent = referencingComponentEntity.component;
-                    if (referencingComponent.referenceType === 'ControllerService') {
-                        // add the id
-                        ids.add(referencingComponent.id);
-    
-                        // consider it's referencing components if appropriate
-                        if (referencingComponent.referenceCycle === false) {
-                            checkReferencingServices(referencingComponent.referencingComponents);
-                        }
-                    }
-                });
-            };
-    
-            // check the referencing servcies
-            checkReferencingServices(controllerService.referencingComponents);
-            return ids;
-        };
-    
-        /**
-         * Gathers all referencing component revisions.
-         *
-         * @param referencingComponents
-         * @param referencingComponentRevisions
-         * @param serviceOnly - true includes only services, false includes only schedulable components
-         */
-        var getReferencingComponentRevisions = function (referencingComponents, referencingComponentRevisions, serviceOnly) {
-            // include the revision of each referencing component
-            $.each(referencingComponents, function (_, referencingComponentEntity) {
-                var referencingComponent = referencingComponentEntity.component;
-    
-                if (serviceOnly) {
-                    if (referencingComponent.referenceType === 'ControllerService') {
-                      referencingComponentRevisions[referencingComponentEntity.id] = nfClient.getRevision(referencingComponentEntity);
-                    }
-                } else {
-                    if (referencingComponent.referenceType !== 'ControllerService') {
-                      referencingComponentRevisions[referencingComponentEntity.id] = nfClient.getRevision(referencingComponentEntity);
-                    }
-                }
-    
-                // recurse
-                getReferencingComponentRevisions(referencingComponent.referencingComponents, referencingComponentRevisions, serviceOnly);
-            });
-        };
-    
-        /**
-         * Updates the scheduled state of the processors/reporting tasks referencing
-         * the specified controller service.
-         *
-         * @param {jQuery} serviceTable
-         * @param {object} controllerServiceEntity
-         * @param {boolean} running
-         * @param {function} pollCondition
-         */
-        var updateReferencingSchedulableComponents = function (serviceTable, controllerServiceEntity, running, pollCondition) {
-            var referencingRevisions = {};
-            getReferencingComponentRevisions(controllerServiceEntity.component.referencingComponents, referencingRevisions, false);
-    
-            var referenceEntity = {
-                'id': controllerServiceEntity.id,
-                'state': running ? 'RUNNING' : 'STOPPED',
-                'referencingComponentRevisions': referencingRevisions
-            };
-    
-            // issue the request to update the referencing components
-            var updated = $.ajax({
-                type: 'PUT',
-                url: controllerServiceEntity.uri + '/references',
-                data: JSON.stringify(referenceEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-          }).fail(nfErrorHandler.handleAjaxError);
-    
-            // Note: updated revisions will be retrieved after updateReferencingSchedulableComponents is invoked
-    
-            // wait unil the polling of each service finished
-            return $.Deferred(function (deferred) {
-                updated.done(function (response) {
-                    // update the controller service
-                    controllerServiceEntity.component.referencingComponents = response.controllerServiceReferencingComponents;
-    
-                    // if we're just starting schedulable components we're done when the update is finished
-                    if (running) {
-                        deferred.resolve();
-                    } else {
-                        // identify all referencing services
-                        var services = getReferencingControllerServiceIds(controllerServiceEntity.component);
-    
-                        // get the controller service grid
-                        var controllerServiceGrid = serviceTable.data('gridInstance');
-                        var controllerServiceData = controllerServiceGrid.getData();
-    
-                        // start polling for each controller service
-                        var polling = [];
-                        services.forEach(function (controllerServiceId) {
-                            var referencingService = controllerServiceData.getItemById(controllerServiceId);
-                            polling.push(stopReferencingSchedulableComponents(referencingService, pollCondition));
-                        });
-    
-                        // wait until polling has finished
-                        $.when.apply(window, polling).done(function () {
-                            deferred.resolve();
-                        }).fail(function () {
-                            deferred.reject();
-                        });
-                    }
-                }).fail(function () {
-                    deferred.reject();
-                });
-            }).promise();
-        };
-    
-        /**
-         * Polls the specified services referencing components to see if the
-         * specified condition is satisfied.
-         *
-         * @param {object} controllerServiceEntity
-         * @param {function} completeCondition
-         * @param {function} bulletinDeferred
-         * @param {function} pollCondition
-         */
-        var pollService = function (controllerServiceEntity, completeCondition, bulletinDeferred, pollCondition) {
-            var controllerService = controllerServiceEntity.component;
-    
-            // we want to keep polling until the condition is met
-            return $.Deferred(function (deferred) {
-                var current = 2;
-                var getTimeout = function () {
-                    var val = current;
-    
-                    // update the current timeout for the next time
-                    current = Math.min(current * 2, 4);
-    
-                    return val * 1000;
-                };
-    
-                // polls for the current status of the referencing components
-                var poll = function () {
-                    var bulletins = bulletinDeferred(controllerService);
-                    var service = $.ajax({
-                        type: 'GET',
-                        url: controllerServiceEntity.uri,
-                        dataType: 'json'
-                    });
-    
-                    $.when(bulletins, service).done(function (bulletinResult, serviceResult) {
-                        var bulletinResponse = bulletinResult[0];
-                        var serviceResponse = serviceResult[0];
-                        conditionMet(serviceResponse.component, bulletinResponse.bulletinBoard.bulletins);
-                    }).fail(function (xhr, status, error) {
-                        deferred.reject();
-                      nfErrorHandler.handleAjaxError(xhr, status, error);
-                    });
-                };
-    
-                // tests to if the condition has been met
-                var conditionMet = function (service, bulletins) {
-                    if (completeCondition(service, bulletins)) {
-                        deferred.resolve();
-                    } else {
-                        if (typeof pollCondition === 'function' && pollCondition()) {
-                            setTimeout(poll, getTimeout());
-                        } else {
-                            deferred.reject();
-                        }
-                    }
-                };
-    
-                // poll for the status of the referencing components
-                bulletinDeferred(controllerService).done(function (response) {
-                    conditionMet(controllerService, response.bulletinBoard.bulletins);
-                }).fail(function (xhr, status, error) {
-                    deferred.reject();
-                  nfErrorHandler.handleAjaxError(xhr, status, error);
-                });
-            }).promise();
-        };
-    
-        /**
-         * Continues to poll the specified controller service until all referencing schedulable
-         * components are stopped (not scheduled and 0 active threads).
-         *
-         * @param {object} controllerService
-         * @param {function} pollCondition
-         */
-        var stopReferencingSchedulableComponents = function (controllerService, pollCondition) {
-            // continue to poll the service until all schedulable components have stopped
-            return pollService(controllerService, function (service, bulletins) {
-                var referencingComponents = service.referencingComponents;
-    
-                var stillRunning = false;
-                $.each(referencingComponents, function (_, referencingComponentEntity) {
-                    var referencingComponent = referencingComponentEntity.component;
-                    if (referencingComponent.referenceType === 'Processor' || referencingComponent.referenceType === 'ReportingTask') {
-                        if (referencingComponent.state === 'RUNNING' || referencingComponent.activeThreadCount > 0) {
-                            stillRunning = true;
-                        }
-    
-                        // update the current active thread count
-                        $('div.' + referencingComponent.id + '-active-threads').text(referencingComponent.activeThreadCount);
-    
-                        // update the current state of this component
-                        var referencingComponentState = $('div.' + referencingComponent.id + '-state');
-                        updateReferencingSchedulableComponentState(referencingComponentState, referencingComponent);
-                    }
-                });
-    
-                // query for the bulletins
-                updateReferencingComponentBulletins(bulletins);
-    
-                // condition is met once all referencing are not running
-                return stillRunning === false;
-            }, function (service) {
-                var referencingSchedulableComponents = [];
-    
-                var referencingComponents = service.referencingComponents;
-                $.each(referencingComponents, function (_, referencingComponentEntity) {
-                    var referencingComponent = referencingComponentEntity.component;
-                    if (referencingComponent.referenceType === 'Processor' || referencingComponent.referenceType === 'ReportingTask') {
-                        referencingSchedulableComponents.push(referencingComponent.id);
-                    }
-                });
-    
-                return queryBulletins(referencingSchedulableComponents);
-            }, pollCondition);
-        };
-    
-        /**
-         * Continues to poll until all referencing services are enabled.
-         *
-         * @param {object} controllerService
-         * @param {function} pollCondition
-         */
-        var enableReferencingServices = function (controllerService, pollCondition) {
-            // continue to poll the service until all referencing services are enabled
-            return pollService(controllerService, function (service, bulletins) {
-                var referencingComponents = service.referencingComponents;
-    
-                var notEnabled = false;
-                $.each(referencingComponents, function (_, referencingComponentEntity) {
-                    var referencingComponent = referencingComponentEntity.component;
-                    if (referencingComponent.referenceType === 'ControllerService') {
-                        if (referencingComponent.state !== 'ENABLING' && referencingComponent.state !== 'ENABLED') {
-                            notEnabled = true;
-                        }
-    
-                        // update the state of the referencing service
-                        var referencingServiceState = $('div.' + referencingComponent.id + '-state');
-                        updateReferencingServiceState(referencingServiceState, referencingComponent);
-                    }
-                });
-    
-                // query for the bulletins
-                updateReferencingComponentBulletins(bulletins);
-    
-                // condition is met once all referencing are not disabled
-                return notEnabled === false;
-            }, function (service) {
-                var referencingSchedulableComponents = [];
-    
-                var referencingComponents = service.referencingComponents;
-                $.each(referencingComponents, function (_, referencingComponentEntity) {
-                    var referencingComponent = referencingComponentEntity.component;
-                    if (referencingComponent.referenceType === 'ControllerService') {
-                        referencingSchedulableComponents.push(referencingComponent.id);
-                    }
-                });
-    
-                return queryBulletins(referencingSchedulableComponents);
-            }, pollCondition);
-        };
-    
-        /**
-         * Continues to poll until all referencing services are disabled.
-         *
-         * @param {object} controllerService
-         * @param {function} pollCondition
-         */
-        var disableReferencingServices = function (controllerService, pollCondition) {
-            // continue to poll the service until all referencing services are disabled
-            return pollService(controllerService, function (service, bulletins) {
-                var referencingComponents = service.referencingComponents;
-    
-                var notDisabled = false;
-                $.each(referencingComponents, function (_, referencingComponentEntity) {
-                    var referencingComponent = referencingComponentEntity.component;
-                    if (referencingComponent.referenceType === 'ControllerService') {
-                        if (referencingComponent.state !== 'DISABLED') {
-                            notDisabled = true;
-                        }
-    
-                        // update the state of the referencing service
-                        var referencingServiceState = $('div.' + referencingComponent.id + '-state');
-                        updateReferencingServiceState(referencingServiceState, referencingComponent);
-                    }
-                });
-    
-                // query for the bulletins
-                updateReferencingComponentBulletins(bulletins);
-    
-                // condition is met once all referencing are not enabled
-                return notDisabled === false;
-            }, function (service) {
-                var referencingSchedulableComponents = [];
-    
-                var referencingComponents = service.referencingComponents;
-                $.each(referencingComponents, function (_, referencingComponentEntity) {
-                    var referencingComponent = referencingComponentEntity.component;
-                    if (referencingComponent.referenceType === 'ControllerService') {
-                        referencingSchedulableComponents.push(referencingComponent.id);
-                    }
-                });
-    
-                return queryBulletins(referencingSchedulableComponents);
-            }, pollCondition);
-        };
-    
-        /**
-         * Updates the referencing services with the specified state.
-         *
-         * @param {jQuery} serviceTable
-         * @param {object} controllerServiceEntity
-         * @param {boolean} enabled
-         * @param {function} pollCondition
-         */
-        var updateReferencingServices = function (serviceTable, controllerServiceEntity, enabled, pollCondition) {
-            var referencingRevisions = {};
-            getReferencingComponentRevisions(controllerServiceEntity.component.referencingComponents, referencingRevisions, true);
-    
-            // build the reference entity
-            var referenceEntity = {
-                'id': controllerServiceEntity.id,
-                'state': enabled ? 'ENABLED' : 'DISABLED',
-                'referencingComponentRevisions': referencingRevisions
-            };
-    
-            // issue the request to update the referencing components
-            var updated = $.ajax({
-                type: 'PUT',
-                url: controllerServiceEntity.uri + '/references',
-                data: JSON.stringify(referenceEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-          }).fail(nfErrorHandler.handleAjaxError);
-    
-            // Note: updated revisions will be retrieved after updateReferencingServices is invoked
-    
-            // wait unil the polling of each service finished
-            return $.Deferred(function (deferred) {
-                updated.done(function (response) {
-                    // update the controller service
-                    controllerServiceEntity.component.referencingComponents = response.controllerServiceReferencingComponents;
-    
-                    // identify all referencing services
-                    var services = getReferencingControllerServiceIds(controllerServiceEntity.component);
-    
-                    // get the controller service grid
-                    var controllerServiceGrid = serviceTable.data('gridInstance');
-                    var controllerServiceData = controllerServiceGrid.getData();
-    
-                    // start polling for each controller service
-                    var polling = [];
-                    services.forEach(function (controllerServiceId) {
-                        var referencingService = controllerServiceData.getItemById(controllerServiceId);
-    
-                        if (enabled) {
-                            polling.push(enableReferencingServices(referencingService, pollCondition));
-                        } else {
-                            polling.push(disableReferencingServices(referencingService, pollCondition));
-                        }
-                    });
-    
-                    $.when.apply(window, polling).done(function () {
-                        deferred.resolve();
-                    }).fail(function () {
-                        deferred.reject();
-                    });
-                }).fail(function () {
-                    deferred.reject();
-                });
-            }).promise();
-        };
-    
-        /**
-         * Shows the dialog for disabling a controller service.
-         *
-         * @argument {object} controllerService The controller service to disable
-         */
-        var showDisableControllerServiceDialog = function (serviceTable, controllerService) {
-            // populate the disable controller service dialog
-            $('#disable-controller-service-id').text(controllerService.id);
-            $('#disable-controller-service-name').text(controllerService.name);
-    
-            // load the controller referencing components list
-            var referencingComponentsContainer = $('#disable-controller-service-referencing-components');
-            createReferencingComponents(serviceTable, referencingComponentsContainer, controllerService.referencingComponents);
-    
-            // build the button model
-            var buttons = [{
-              buttonText: nf._.msg('nf-controller-service.Disable'),
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
-                handler: {
-                    click: function () {
-                        disableHandler(serviceTable);
-                    }
-                }
-            }, {
-              buttonText: nf._.msg('nf-controller-service.Cancel'),
-                color: {
-                    base: '#E3E8EB',
-                    hover: '#C7D2D7',
-                    text: '#004849'
-                },
-                handler: {
-                    click: closeModal
-                }
-            }];
-    
-            // show the dialog
-            $('#disable-controller-service-dialog').modal('setButtonModel', buttons).modal('show');
-    
-            // load the bulletins
-            queryBulletins([controllerService.id]).done(function (response) {
-                updateBulletins(response.bulletinBoard.bulletins, $('#disable-controller-service-bulletins'));
-            });
-    
-            // update the border if necessary
-            updateReferencingComponentsBorder(referencingComponentsContainer);
-        };
-    
-        /**
-         * Shows the dialog for enabling a controller service.
-         *
-         * @param {object} serviceTable
-         * @param {object} controllerService
-         */
-        var showEnableControllerServiceDialog = function (serviceTable, controllerService) {
-            // populate the disable controller service dialog
-            $('#enable-controller-service-id').text(controllerService.id);
-            $('#enable-controller-service-name').text(controllerService.name);
-    
-            // load the controller referencing components list
-            var referencingComponentsContainer = $('#enable-controller-service-referencing-components');
-            createReferencingComponents(serviceTable, referencingComponentsContainer, controllerService.referencingComponents);
-    
-            // build the button model
-            var buttons = [{
-              buttonText: nf._.msg('nf-controller-service.Enable'),
-                color: {
-                    base: '#728E9B',
-                    hover: '#004849',
-                    text: '#ffffff'
-                },
-                handler: {
-                    click: function () {
-                        enableHandler(serviceTable);
-                    }
-                }
-            }, {
-              buttonText: nf._.msg('nf-controller-service.Cancel'),
-                color: {
-                    base: '#E3E8EB',
-                    hover: '#C7D2D7',
-                    text: '#004849'
-                },
-                handler: {
-                    click: closeModal
-                }
-            }];
-    
-            // show the dialog
-            $('#enable-controller-service-dialog').modal('setButtonModel', buttons).modal('show');
-    
-            // load the bulletins
-            queryBulletins([controllerService.id]).done(function (response) {
-                updateBulletins(response.bulletinBoard.bulletins, $('#enable-controller-service-bulletins'));
-            });
-    
-            // update the border if necessary
-            updateReferencingComponentsBorder(referencingComponentsContainer);
-        };
-    
-        /**
-         * Used to handle closing a modal dialog
-         */
-        var closeModal = function () {
-            $(this).modal('hide');
-        };
-    
-        /**
-         * Handles the disable action of the disable controller service dialog.
-         *
-         * @param {jQuery} serviceTable
-         */
-        var disableHandler = function (serviceTable) {
-            var disableDialog = $('#disable-controller-service-dialog');
-            var canceled = false;
-    
-            // only provide a cancel option
-            disableDialog.modal('setButtonModel', [{
-              buttonText: nf._.msg('nf-controller-service.Cancel'),
-                color: {
-                    base: '#E3E8EB',
-                    hover: '#C7D2D7',
-                    text: '#004849'
-                },
-                handler: {
-                    click: function () {
-                        canceled = true;
-                        disableDialog.modal('setButtonModel', []);
-                        $('#disable-controller-service-dialog div.controller-service-canceling').show();
-                    }
-                }
-            }]);
-    
-            // show the progress
-            $('#disable-controller-service-scope-container').hide();
-            $('#disable-controller-service-progress-container').show();
-    
-            // get the controller service
-            var controllerServiceId = $('#disable-controller-service-id').text();
-            var controllerServiceGrid = serviceTable.data('gridInstance');
-            var controllerServiceData = controllerServiceGrid.getData();
-            var controllerServiceEntity = controllerServiceData.getItemById(controllerServiceId);
-            var controllerService = controllerServiceEntity.component;
-    
-            // whether or not to continue polling
-            var continuePolling = function () {
-                return canceled === false;
-            };
-    
-            // sets the close button on the dialog
-            var setCloseButton = function () {
-                $('#disable-controller-service-dialog div.controller-service-canceling').hide();
-                disableDialog.modal('setButtonModel', [{
-                  buttonText: nf._.msg('nf-controller-service.Close'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: closeModal
-                    }
-                }]);
-            };
-    
-            // ensure we have access to all referencing components before attempting the sequence
-            if (hasUnauthorizedReferencingComponent(controllerService.referencingComponents)) {
-                setCloseButton();
-    
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-controller-service.ControllerService'),
-                  dialogContent: nf._.msg('nf-controller-service.Message14')
-                });
-                return;
-            }
-    
-            $('#disable-progress-label').text('Steps to disable ' + controllerService.name);
-            var disableReferencingSchedulable = $('#disable-referencing-schedulable').addClass('ajax-loading');
-    
-            $.Deferred(function (deferred) {
-                // stop all referencing schedulable components
-                var stopped = updateReferencingSchedulableComponents(serviceTable, controllerServiceEntity, false, continuePolling);
-    
-                // once everything has stopped
-                stopped.done(function () {
-                    disableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-complete');
-                    var disableReferencingServices = $('#disable-referencing-services').addClass('ajax-loading');
-    
-                    // disable all referencing services
-                    var disabled = updateReferencingServices(serviceTable, controllerServiceEntity, false, continuePolling);
-    
-                    // everything is disabled
-                    disabled.done(function () {
-                        disableReferencingServices.removeClass('ajax-loading').addClass('ajax-complete');
-                        var disableControllerService = $('#disable-controller-service').addClass('ajax-loading');
-    
-                        // disable this service
-                        setEnabled(serviceTable, controllerServiceEntity, false, continuePolling).done(function () {
-                            deferred.resolve();
-                            disableControllerService.removeClass('ajax-loading').addClass('ajax-complete');
-                        }).fail(function () {
-                            deferred.reject();
-                            disableControllerService.removeClass('ajax-loading').addClass('ajax-error');
-                        });
-                    }).fail(function () {
-                        deferred.reject();
-                        disableReferencingServices.removeClass('ajax-loading').addClass('ajax-error');
-                    });
-                }).fail(function () {
-                    deferred.reject();
-                    disableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-error');
-                });
-            }).always(function () {
-                reloadControllerServiceAndReferencingComponents(serviceTable, controllerService);
-                setCloseButton();
-    
-                // inform the user if the action was canceled
-                if (canceled === true && $('#nf-ok-dialog').not(':visible')) {
-                  nfDialog.showOkDialog({
-                      headerText: nf._.msg('nf-controller-service.ControllerService'),
-                      dialogContent: nf._.msg('nf-controller-service.Message5')
-                    });
-                }
-            });
-        };
-    
-        /**
-         * Determines if any of the specified referencing components are not authorized.
-         *
-         * @param referencingComponents referencing components
-         * @returns {boolean}
-         */
-        var hasUnauthorizedReferencingComponent = function (referencingComponents) {
-            var hasUnauthorized = false;
-    
-            $.each(referencingComponents, function (_, referencingComponentEntity) {
-                if (referencingComponentEntity.permissions.canRead === false || referencingComponentEntity.permissions.canWrite === false) {
-                    hasUnauthorized = true;
-                    return false;
-                }
-    
-                var referencingComponent = referencingComponentEntity.component;
-                if (hasUnauthorizedReferencingComponent(referencingComponent.referencingComponents)) {
-                    hasUnauthorized = true;
-                    return false;
-                }
-            });
-    
-            return hasUnauthorized;
-        };
-    
-        /**
-         * Handles the enable action of the enable controller service dialog.
-         *
-         * @param {jQuery} serviceTable
-         */
-        var enableHandler = function (serviceTable) {
-            var enableDialog = $('#enable-controller-service-dialog');
-            var canceled = false;
-    
-            // get the controller service
-            var controllerServiceId = $('#enable-controller-service-id').text();
-            var controllerServiceGrid = serviceTable.data('gridInstance');
-            var controllerServiceData = controllerServiceGrid.getData();
-            var controllerServiceEntity = controllerServiceData.getItemById(controllerServiceId);
-            var controllerService = controllerServiceEntity.component;
-    
-            // determine if we want to also activate referencing components
-            var scope = $('#enable-controller-service-scope').combo('getSelectedOption').value;
-    
-            // update visibility
-            if (scope === config.serviceOnly) {
-                $('#enable-controller-service-progress li.referencing-component').hide();
-            }
-    
-            // only provide a cancel option
-            enableDialog.modal('setButtonModel', [{
-              buttonText: nf._.msg('nf-controller-service.Cancel'),
-                color: {
-                    base: '#E3E8EB',
-                    hover: '#C7D2D7',
-                    text: '#004849'
-                },
-                handler: {
-                    click: function () {
-                        canceled = true;
-                        enableDialog.modal('setButtonModel', []);
-                        $('#enable-controller-service-dialog div.controller-service-canceling').show();
-                    }
-                }
-            }]);
-    
-            // show the progress
-            $('#enable-controller-service-scope-container').hide();
-            $('#enable-controller-service-progress-container').show();
-    
-    
-            // whether or not to continue polling
-            var continuePolling = function () {
-                return canceled === false;
-            };
-    
-            // sets the button to close
-            var setCloseButton = function () {
-                $('#enable-controller-service-dialog div.controller-service-canceling').hide();
-                enableDialog.modal('setButtonModel', [{
-                  buttonText: nf._.msg('nf-controller-service.Close'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: closeModal
-                    }
-                }]);
-            };
-    
-            // ensure appropriate access
-            if (scope === config.serviceAndReferencingComponents && hasUnauthorizedReferencingComponent(controllerService.referencingComponents)) {
-                setCloseButton();
-    
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-controller-service.ControllerService'),
-                  dialogContent: nf._.msg('nf-controller-service.Message15')
-                });
-                return;
-            }
-    
-            $('#enable-progress-label').text('Steps to enable ' + controllerService.name);
-            var enableControllerService = $('#enable-controller-service').addClass('ajax-loading');
-    
-            $.Deferred(function (deferred) {
-                // enable this controller service
-                var enable = setEnabled(serviceTable, controllerServiceEntity, true, continuePolling);
-    
-                if (scope === config.serviceAndReferencingComponents) {
-                    // once the service is enabled, activate all referencing components
-                    enable.done(function () {
-                        enableControllerService.removeClass('ajax-loading').addClass('ajax-complete');
-                        var enableReferencingServices = $('#enable-referencing-services').addClass('ajax-loading');
-    
-                        // enable the referencing services
-                        var servicesEnabled = updateReferencingServices(serviceTable, controllerServiceEntity, true, continuePolling);
-    
-                        // once all the referencing services are enbled
-                        servicesEnabled.done(function () {
-                            enableReferencingServices.removeClass('ajax-loading').addClass('ajax-complete');
-                            var enableReferencingSchedulable = $('#enable-referencing-schedulable').addClass('ajax-loading');
-    
-                            // start all referencing schedulable components
-                            updateReferencingSchedulableComponents(serviceTable, controllerServiceEntity, true, continuePolling).done(function () {
-                                deferred.resolve();
-                                enableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-complete');
-                            }).fail(function () {
-                                deferred.reject();
-                                enableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-error');
-                            });
-                        }).fail(function () {
-                            deferred.reject();
-                            enableReferencingServices.removeClass('ajax-loading').addClass('ajax-error');
-                        });
-                    }).fail(function () {
-                        deferred.reject();
-                        enableControllerService.removeClass('ajax-loading').addClass('ajax-error');
-                    });
-                } else {
-                    enable.done(function () {
-                        deferred.resolve();
-                        enableControllerService.removeClass('ajax-loading').addClass('ajax-complete');
-                    }).fail(function () {
-                        deferred.reject();
-                        enableControllerService.removeClass('ajax-loading').addClass('ajax-error');
-                    });
-                }
-            }).always(function () {
-                reloadControllerServiceAndReferencingComponents(serviceTable, controllerService);
-                setCloseButton();
-    
-                // inform the user if the action was canceled
-                if (canceled === true && $('#nf-ok-dialog').not(':visible')) {
-                  nfDialog.showOkDialog({
-                      headerText: nf._.msg('nf-controller-service.ControllerService'),
-                      dialogContent: nf._.msg('nf-controller-service.Message2')
-                    });
-                }
-            });
-        };
-    
-        /**
-         * Gets a property descriptor for the controller service currently being configured.
-         *
-         * @param {type} propertyName
-         */
-        var getControllerServicePropertyDescriptor = function (propertyName) {
-            var controllerServiceEntity = $('#controller-service-configuration').data('controllerServiceDetails');
-            return $.ajax({
-                type: 'GET',
-                url: controllerServiceEntity.uri + '/descriptors',
-                data: {
-                    propertyName: propertyName
-                },
-                dataType: 'json'
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Goes to a service configuration from the property table.
-         *
-         * @param {jQuery} serviceTable
-         */
-        var goToServiceFromProperty = function (serviceTable) {
-            return $.Deferred(function (deferred) {
-                // close all fields currently being edited
-                $('#controller-service-properties').propertytable('saveRow');
-    
-                // determine if changes have been made
-                if (isSaveRequired()) {
-                    // see if those changes should be saved
-                  nfDialog.showYesNoDialog({
-                      headerText: nf._.msg('nf-controller-service.Save'),
-                      dialogContent: nf._.msg('nf-controller-service.Message16'),
-                        noHandler: function () {
-                            deferred.resolve();
-                        },
-                        yesHandler: function () {
-                            var controllerServiceEntity = $('#controller-service-configuration').data('controllerServiceDetails');
-                            saveControllerService(serviceTable, controllerServiceEntity).done(function () {
-                                deferred.resolve();
-                            }).fail(function () {
-                                deferred.reject();
-                            });
-                        }
-                    });
-                } else {
-                    deferred.resolve();
-                }
-            }).promise();
-        };
-    
-        var saveControllerService = function (serviceTable, controllerServiceEntity) {
-            // marshal the settings and properties and update the controller service
-            var updatedControllerService = marshalDetails();
-    
-            // ensure details are valid as far as we can tell
-            if (validateDetails(updatedControllerService)) {
-              updatedControllerService['revision'] = nfClient.getRevision(controllerServiceEntity);
-    
-                var previouslyReferencedServiceIds = [];
-                $.each(identifyReferencedServiceDescriptors(controllerServiceEntity.component), function (_, descriptor) {
-                  var modifyingService = !nfCommon.isUndefined(updatedControllerService.component.properties) && !nfCommon.isUndefined(updatedControllerService.component.properties[descriptor.name]);
-                  var isCurrentlyConfigured = nfCommon.isDefinedAndNotNull(controllerServiceEntity.component.properties[descriptor.name]);
-    
-                    // if we are attempting to update a controller service reference
-                    if (modifyingService && isCurrentlyConfigured) {
-    
-                        // record the current value if set
-                        previouslyReferencedServiceIds.push(controllerServiceEntity.component.properties[descriptor.name]);
-                    }
-                });
-    
-                // update the selected component
-                return $.ajax({
-                    type: 'PUT',
-                    data: JSON.stringify(updatedControllerService),
-                    url: controllerServiceEntity.uri,
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // reload the controller service
-                    renderControllerService(serviceTable, response);
-    
-                    // reload all previously referenced controller services
-                    $.each(previouslyReferencedServiceIds, function (_, oldServiceReferenceId) {
-                        reloadControllerService(serviceTable, oldServiceReferenceId);
-                    });
-                }).fail(handleControllerServiceConfigurationError);
-            } else {
-                return $.Deferred(function (deferred) {
-                    deferred.reject();
-                }).promise();
-            }
-        };
-    
-        /**
-         * Identifies the descriptors that identify controller services.
-         *
-         * @param {object} component
-         */
-        var identifyReferencedServiceDescriptors = function (component) {
-            var referencedServiceDescriptors = [];
-    
-            $.each(component.descriptors, function (_, descriptor) {
-              if (nfCommon.isDefinedAndNotNull(descriptor.identifiesControllerService)) {
-                    referencedServiceDescriptors.push(descriptor);
-                }
-            });
-    
-            return referencedServiceDescriptors;
-        };
-    
-        /**
-         * Identifies descriptors that reference controller services.
-         *
-         * @param {object} component
-         */
-        var getReferencedServices = function (component) {
-            var referencedServices = [];
-    
-            $.each(identifyReferencedServiceDescriptors(component), function (_, descriptor) {
-                var referencedServiceId = component.properties[descriptor.name];
-    
-                // ensure the property is configured
-              if (nfCommon.isDefinedAndNotNull(referencedServiceId) && $.trim(referencedServiceId).length > 0) {
-                    referencedServices.push(referencedServiceId);
-                }
-            });
-    
-            return referencedServices;
-        };
-    
-      /**
-       * Track the current table
-       */
-      var currentTable;
-  
-      var nfControllerService = {
-            /**
-             * Initializes the controller service configuration dialog.
-             */
-            init: function () {
-                // initialize the configuration dialog tabs
-                $('#controller-service-configuration-tabs').tabbs({
-                    tabStyle: 'tab',
-                    selectedTabStyle: 'selected-tab',
-                    scrollableTabContentStyle: 'scrollable',
-                    tabs: [{
-                      name: nf._.msg('nf-controller-service.Settings'),
-                        tabContentId: 'controller-service-standard-settings-tab-content'
-                    }, {
-                      name: nf._.msg('nf-controller-service.Properties'),
-                        tabContentId: 'controller-service-properties-tab-content'
-                    }, {
-                      name: nf._.msg('nf-controller-service.Comments'),
-                        tabContentId: 'controller-service-comments-tab-content'
-                    }],
-                    select: function () {
-                        // remove all property detail dialogs
-                      nfUniversalCapture.removeAllPropertyDetailDialogs();
-    
-                        // update the property table size in case this is the first time its rendered
-                      if ($(this).text() === nf._.msg('nf-controller-service.Properties')) {
-                            $('#controller-service-properties').propertytable('resetTableSize');
-                        }
-    
-                        // close all fields currently being edited
-                        $('#controller-service-properties').propertytable('saveRow');
-    
-                        // show the border around the processor relationships if necessary
-                        var referenceContainer = $('#controller-service-referencing-components');
-                        updateReferencingComponentsBorder(referenceContainer);
-                    }
-                });
-    
-                // initialize the conroller service configuration dialog
-                $('#controller-service-configuration').modal({
-                  headerText: nf._.msg('nf-controller-service.Message7'),
-                    scrollableContentStyle: 'scrollable',
-                    handler: {
-                        close: function () {
-                            // empty the referencing components list
-                            var referencingComponents = $('#controller-service-referencing-components');
-                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-state');
-                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins');
-                            referencingComponents.css('border-width', '0').empty();
-    
-                            // cancel any active edits
-                            $('#controller-service-properties').propertytable('cancelEdit');
-    
-                            // clear the tables
-                            $('#controller-service-properties').propertytable('clear');
-    
-                            // clear the comments
-                          nfCommon.clearField('read-only-controller-service-comments');
-    
-                            // removed the cached controller service details
-                            $('#controller-service-configuration').removeData('controllerServiceDetails');
-                        },
-                        open: function () {
-                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                        }
-                    }
-                });
-    
-                // initialize the disable service dialog
-                $('#disable-controller-service-dialog').modal({
-                  headerText: nf._.msg('nf-controller-service.Message8'),
-                    scrollableContentStyle: 'scrollable',
-                    handler: {
-                        close: function () {
-                            var disableDialog = $(this);
-    
-                            // reset visibility
-                            $('#disable-controller-service-scope-container').show();
-                            $('#disable-controller-service-progress-container').hide();
-    
-                            // clear the dialog
-                            $('#disable-controller-service-id').text('');
-                            $('#disable-controller-service-name').text('');
-    
-                            // bulletins
-                            $('#disable-controller-service-bulletins').removeClass('has-bulletins').removeData('bulletins').hide();
-                          nfCommon.cleanUpTooltips($('#disable-controller-service-service-container'), '#disable-controller-service-bulletins');
-    
-                            // reset progress
-                            $('div.disable-referencing-components').removeClass('ajax-loading ajax-complete ajax-error');
-    
-                            // referencing components
-                            var referencingComponents = $('#disable-controller-service-referencing-components');
-                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-state');
-                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins');
-                            referencingComponents.css('border-width', '0').empty();
-                        }
-                    }
-                });
-    
-                // initialize the enable scope combo
-                $('#enable-controller-service-scope').combo({
-                    options: [{
-                      text: nf._.msg('nf-controller-service.ServiceOnle'),
-                        value: config.serviceOnly,
-                      description: nf._.msg('nf-controller-service.Message12')
-                    }, {
-                      text: nf._.msg('nf-controller-service.Message10'),
-                        value: config.serviceAndReferencingComponents,
-                      description: nf._.msg('nf-controller-service.Message11')
-                    }]
-                });
-    
-                // initialize the enable service dialog
-                $('#enable-controller-service-dialog').modal({
-                    headerText: 'Enable Controller Service',
-                    scrollableContentStyle: 'scrollable',
-                    handler: {
-                        close: function () {
-                            var enableDialog = $(this);
-    
-                            // reset visibility
-                            $('#enable-controller-service-scope-container').show();
-                            $('#enable-controller-service-progress-container').hide();
-                            $('#enable-controller-service-progress li.referencing-component').show();
-    
-                            // clear the dialog
-                            $('#enable-controller-service-id').text('');
-                            $('#enable-controller-service-name').text('');
-    
-                            // bulletins
-                            $('#enable-controller-service-bulletins').removeClass('has-bulletins').removeData('bulletins').hide();
-                          nfCommon.cleanUpTooltips($('#enable-controller-service-service-container'), '#enable-controller-service-bulletins');
-    
-                            // reset progress
-                            $('div.enable-referencing-components').removeClass('ajax-loading ajax-complete ajax-error');
-    
-                            // referencing components
-                            var referencingComponents = $('#enable-controller-service-referencing-components');
-                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-state');
-                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins');
-                            referencingComponents.css('border-width', '0').empty();
-                        }
-                    }
-                });
-            },
-    
-            /**
-             * Shows the configuration dialog for the specified controller service.
-             *
-             * @argument {jQuery} serviceTable                 The controller service table
-             * @argument {object} controllerServiceEntity      The controller service
-             */
-            showConfiguration: function (serviceTable, controllerServiceEntity) {
-              if (nfCommon.isUndefined(currentTable)) {
-                  currentTable = serviceTable;
-              }
-                var controllerServiceDialog = $('#controller-service-configuration');
-              if (controllerServiceDialog.data('mode') !== config.edit || currentTable !== serviceTable) {
-                    // update the visibility
-                    $('#controller-service-configuration .controller-service-read-only').hide();
-                    $('#controller-service-configuration .controller-service-editable').show();
-    
-                    // 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) {
-                          var controllerServicesUri;
-                          var createdControllerServicesTable;
-  
-                          // calculate the correct uri
-                          var createdControllerService = response.component;
-                          if (nfCommon.isDefinedAndNotNull(createdControllerService.parentGroupId)) {
-                              controllerServicesUri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(createdControllerService.parentGroupId) + '/controller-services';
-                          } else {
-                              controllerServicesUri = config.urls.api + '/flow/controller/controller-services';
-                          }
-  
-                          // load the controller services accordingly
-                          return nfControllerServices.loadControllerServices(controllerServicesUri, serviceTable);
-                      },
-                        goToServiceDeferred: function () {
-                            return goToServiceFromProperty(serviceTable);
-                        }
-                    });
-    
-                    // update the mode
-                    controllerServiceDialog.data('mode', config.edit);
-                }
-    
-              //track the current table
-              currentTable = serviceTable;
-  
-                // reload the service in case the property descriptors have changed
-                var reloadService = $.ajax({
-                    type: 'GET',
-                    url: controllerServiceEntity.uri,
-                    dataType: 'json'
-                });
-    
-                // get the controller service history
-                var loadHistory = $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/flow/history/components/' + encodeURIComponent(controllerServiceEntity.id),
-                    dataType: 'json'
-                });
-    
-                // once everything is loaded, show the dialog
-                $.when(reloadService, loadHistory).done(function (serviceResponse, historyResponse) {
-                    // get the updated controller service
-                    controllerServiceEntity = serviceResponse[0];
-                    var controllerService = controllerServiceEntity.component;
-    
-                    // get the controller service history
-                    var controllerServiceHistory = historyResponse[0].componentHistory;
-    
-                    // record the controller service details
-                    controllerServiceDialog.data('controllerServiceDetails', controllerServiceEntity);
-    
-                    // populate the controller service settings
-                  nfCommon.populateField('controller-service-id', controllerService['id']);
-                  nfCommon.populateField('controller-service-type', nfCommon.substringAfterLast(controllerService['type'], '.'));
-                    $('#controller-service-name').val(controllerService['name']);
-                    $('#controller-service-comments').val(controllerService['comments']);
-    
-                    // get the reference container
-                    var referenceContainer = $('#controller-service-referencing-components');
-    
-                    // load the controller referencing components list
-                    createReferencingComponents(serviceTable, referenceContainer, controllerService.referencingComponents);
-    
-                    var buttons = [{
-                      buttonText: nf._.msg('nf-controller-service.Apply'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                // close all fields currently being edited
-                                $('#controller-service-properties').propertytable('saveRow');
-    
-                                // save the controller service
-                                saveControllerService(serviceTable, controllerServiceEntity).done(function (response) {
-                                    reloadControllerServiceReferences(serviceTable, response.component);
-    
-                                    // close the details panel
-                                    controllerServiceDialog.modal('hide');
-                                });
-                            }
-                        }
-                    }, {
-                          buttonText: nf._.msg('nf-controller-service.Cancel'),
-                        color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
-                        },
-                        handler: {
-                            click: function () {
-                                controllerServiceDialog.modal('hide');
-                            }
-                        }
-                    }];
-    
-                    // determine if we should show the advanced button
-                  if (nfCommon.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') {
-                        buttons.push({
-                          buttonText: nf._.msg('nf-controller-service.Advanced'),
-                            clazz: 'fa fa-cog button-icon',
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                    var openCustomUi = function () {
-                                        // reset state and close the dialog manually to avoid hiding the faded background
-                                        controllerServiceDialog.modal('hide');
-    
-                                        // close the settings dialog since the custom ui is also opened in the shell
-                                        $('#shell-close-button').click();
-    
-                                        // show the custom ui
-                                      nfCustomUi.showCustomUi(controllerServiceEntity, controllerService.customUiUrl, true).done(function () {
-                                            // once the custom ui is closed, reload the controller service
-                                            reloadControllerServiceAndReferencingComponents(serviceTable, controllerService);
-    
-                                            // show the settings
-                                          nfSettings.showSettings();
-                                        });
-                                    };
-    
-                                    // close all fields currently being edited
-                                    $('#controller-service-properties').propertytable('saveRow');
-    
-                                    // determine if changes have been made
-                                    if (isSaveRequired()) {
-                                        // see if those changes should be saved
-                                      nfDialog.showYesNoDialog({
-                                          headerText: nf._.msg('nf-controller-service.Save'),
-                                          dialogContent: nf._.msg('nf-controller-service.Message13'),
-                                            noHandler: openCustomUi,
-                                            yesHandler: function () {
-                                                saveControllerService(serviceTable, controllerServiceEntity).done(function () {
-                                                    // open the custom ui
-                                                    openCustomUi();
-                                                });
-                                            }
-                                        });
-                                    } else {
-                                        // if there were no changes, simply open the custom ui
-                                        openCustomUi();
-                                    }
-                                }
-                            }
-                        });
-                    }
-    
-                    // set the button model
-                    controllerServiceDialog.modal('setButtonModel', buttons);
-    
-                    // load the property table
-                    $('#controller-service-properties')
-                        .propertytable('setGroupId', controllerService.parentGroupId)
-                        .propertytable('loadProperties', controllerService.properties, controllerService.descriptors, controllerServiceHistory.propertyHistory);
-    
-                    // show the details
-                    controllerServiceDialog.modal('show');
-    
-                    // show the border if necessary
-                    updateReferencingComponentsBorder(referenceContainer);
-    
-                    $('#controller-service-properties').propertytable('resetTableSize');
-              }).fail(nfErrorHandler.handleAjaxError);
-            },
-    
-            /**
-             * Shows the controller service details in a read only dialog.
-             *
-             * @param {jQuery} serviceTable
-             * @param {object} controllerServiceEntity
-             */
-            showDetails: function (serviceTable, controllerServiceEntity) {
-                var controllerServiceDialog = $('#controller-service-configuration');
-                if (controllerServiceDialog.data('mode') !== config.readOnly) {
-                    // update the visibility
-                    $('#controller-service-configuration .controller-service-read-only').show();
-                    $('#controller-service-configuration .controller-service-editable').hide();
-    
-                    // initialize the property table
-                    $('#controller-service-properties').propertytable('destroy').propertytable({
-                      supportsGoTo: true,
-                        readOnly: true
-                    });
-    
-                    // update the mode
-                    controllerServiceDialog.data('mode', config.readOnly);
-                }
-    
-                // reload the service in case the property descriptors have changed
-                var reloadService = $.ajax({
-                    type: 'GET',
-                    url: controllerServiceEntity.uri,
-                    dataType: 'json'
-                });
-    
-                // get the controller service history
-                var loadHistory = $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/flow/history/components/' + encodeURIComponent(controllerServiceEntity.id),
-                    dataType: 'json'
-                });
-    
-                // once everything is loaded, show the dialog
-                $.when(reloadService, loadHistory).done(function (serviceResponse, historyResponse) {
-                    // get the updated controller service
-                    controllerServiceEntity = serviceResponse[0];
-                    var controllerService = controllerServiceEntity.component;
-    
-                    // get the controller service history
-                    var controllerServiceHistory = historyResponse[0].componentHistory;
-    
-                    // record the controller service details
-                    controllerServiceDialog.data('controllerServiceDetails', controllerServiceEntity);
-    
-                    // populate the controller service settings
-                  nfCommon.populateField('controller-service-id', controllerService['id']);
-                  nfCommon.populateField('controller-service-type', nfCommon.substringAfterLast(controllerService['type'], '.'));
-                  nfCommon.populateField('read-only-controller-service-name', controllerService['name']);
-                  nfCommon.populateField('read-only-controller-service-comments', controllerService['comments']);
-    
-                    // get the reference container
-                    var referenceContainer = $('#controller-service-referencing-components');
-    
-                    // load the controller referencing components list
-                    createReferencingComponents(serviceTable, referenceContainer, controllerService.referencingComponents);
-    
-                    var buttons = [{
-                      buttonText: nf._.msg('nf-controller-service.Ok'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                // hide the dialog
-                                controllerServiceDialog.modal('hide');
-                            }
-                        }
-                    }];
-    
-                    // determine if we should show the advanced button
-                  if (nfCommon.isDefinedAndNotNull(nfCustomUi) && nfCommon.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') {
-                        buttons.push({
-                          buttonText: nf._.msg('nf-controller-service.Advanced'),
-                            clazz: 'fa fa-cog button-icon',
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                    // reset state and close the dialog manually to avoid hiding the faded background
-                                    controllerServiceDialog.modal('hide');
-    
-                                    // close the settings dialog since the custom ui is also opened in the shell
-                                    $('#shell-close-button').click();
-    
-                                    // show the custom ui
-                                  nfCustomUi.showCustomUi(controllerServiceEntity, controllerService.customUiUrl, false).done(function () {
-                                      nfSettings.showSettings();
-                                    });
-                                }
-                            }
-                        });
-                    }
-    
-                    // show the dialog
-                    controllerServiceDialog.modal('setButtonModel', buttons);
-    
-                    // load the property table
-                    $('#controller-service-properties').propertytable('loadProperties', controllerService.properties, controllerService.descriptors, controllerServiceHistory.propertyHistory);
-    
-                    // show the details
-                    controllerServiceDialog.modal('show');
-    
-                    // show the border if necessary
-                    updateReferencingComponentsBorder(referenceContainer);
-    
-                    $('#controller-service-properties').propertytable('resetTableSize');
-                });
-            },
-    
-            /**
-             * Enables the specified controller service.
-             *
-             * @param {jQuery} serviceTable
-             * @param {object} controllerServiceEntity
-             */
-            enable: function (serviceTable, controllerServiceEntity) {
-                showEnableControllerServiceDialog(serviceTable, controllerServiceEntity.component);
-            },
-    
-            /**
-             * Disables the specified controller service.
-             *
-             * @param {jQuery} serviceTable
-             * @param {object} controllerServiceEntity
-             */
-            disable: function (serviceTable, controllerServiceEntity) {
-                showDisableControllerServiceDialog(serviceTable, controllerServiceEntity.component);
-            },
-    
-            /**
-             * Reloads the services that the specified comonent references. This is
-             * necessary because the specified component state is reflected in the
-             * referenced service referencing components.
-             *
-             * @param {jQuery} serviceTable
-             * @param {object} component
-             */
-            reloadReferencedServices: function (serviceTable, component) {
-                $.each(getReferencedServices(component), function (_, referencedServiceId) {
-                    reloadControllerService(serviceTable, referencedServiceId);
-                });
-            },
-    
-            /**
-           * Prompts the user before attempting to delete the specified controller service.
-           *
-           * @param {jQuery} serviceTable
-           * @param {object} controllerServiceEntity
-           */
-          promptToDeleteController: function (serviceTable, controllerServiceEntity) {
-              // prompt for deletion
-              nfDialog.showYesNoDialog({
-                  headerText: 'Delete Controller Service',
-                  dialogContent: 'Delete controller service \'' + nfCommon.escapeHtml(controllerServiceEntity.component.name) + '\'?',
-                  yesHandler: function () {
-                      nfControllerService.remove(serviceTable, controllerServiceEntity);
-                  }
-              });
-          },
-  
-          /**
-             * Deletes the specified controller service.
-             *
-             * @param {jQuery} serviceTable
-             * @param {object} controllerServiceEntity
-             */
-            remove: function (serviceTable, controllerServiceEntity) {
-                // prompt for removal?
-    
-              var revision = nfClient.getRevision(controllerServiceEntity);
-                $.ajax({
-                    type: 'DELETE',
-                    url: controllerServiceEntity.uri + '?' + $.param({
-                        version: revision.version,
-                        clientId: revision.clientId
-                    }),
-                    dataType: 'json'
-                }).done(function (response) {
-                    // remove the service
-                    var controllerServiceGrid = serviceTable.data('gridInstance');
-                    var controllerServiceData = controllerServiceGrid.getData();
-                    controllerServiceData.deleteItem(controllerServiceEntity.id);
-    
-                    // reload the as necessary
-                    if (controllerServiceEntity.permissions.canRead) {
-                        reloadControllerServiceReferences(serviceTable, controllerServiceEntity.component);
-                    }
-              }).fail(nfErrorHandler.handleAjaxError);
-            }
-        };
-    
-      return nfControllerService;
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
deleted file mode 100644
index 15a658806024..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
+++ /dev/null
@@ -1,1222 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'Slick',
-                  'nf.Client',
-                  'nf.Shell',
-                  'nf.ProcessGroupConfiguration',
-                  'nf.CanvasUtils',
-                  'nf.ErrorHandler',
-                  'nf.Dialog',
-                  'nf.Common',
-                  'nf.ControllerService',
-                  'nf.ProcessGroup',
-                  'nf.PolicyManagement',
-                  'nf.ComponentState',
-                  'nf.ng.Bridge'],
-              function ($, d3, Slick, nfClient, nfShell, nfProcessGroupConfiguration, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon, nfControllerService, nfProcessGroup, nfPolicyManagement, nfComponentState, nfNgBridge) {
-                  return (nf.ControllerServices = factory($, d3, Slick, nfClient, nfShell, nfProcessGroupConfiguration, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon, nfControllerService, nfProcessGroup, nfPolicyManagement, nfComponentState, nfNgBridge));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ControllerServices =
-              factory(require('jquery'),
-                  require('d3'),
-                  require('Slick'),
-                  require('nf.Client'),
-                  require('nf.Shell'),
-                  require('nf.ProcessGroupConfiguration'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Dialog'),
-                  require('nf.Common'),
-                  require('nf.ControllerService'),
-                  require('nf.ProcessGroup'),
-                  require('nf.PolicyManagement'),
-                  require('nf.ComponentState'),
-                  require('nf.ng.Bridge')));
-      } else {
-          nf.ControllerServices = factory(root.$,
-              root.d3,
-              root.Slick,
-              root.nf.Client,
-              root.nf.Shell,
-              root.nf.ProcessGroupConfiguration,
-              root.nf.CanvasUtils,
-              root.nf.ErrorHandler,
-              root.nf.Dialog,
-              root.nf.Common,
-              root.nf.ControllerService,
-              root.nf.ProcessGroup,
-              root.nf.PolicyManagement,
-              root.nf.ComponentState,
-              root.nf.ng.Bridge);
-      }
-  }(this, function ($, d3, Slick, nfClient, nfShell, nfProcessGroupConfiguration, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon, nfControllerService, nfProcessGroup, nfPolicyManagement, nfComponentState, nfNgBridge) {
-      'use strict';
-    
-        var dblClick = null;
-        var initialized = false;
-    
-        var config = {
-            urls: {
-                api: '../nifi-api',
-                controllerServiceTypes: '../nifi-api/flow/controller-service-types'
-            }
-        };
-    
-        var gridOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-    
-        /**
-       * Whether the specified item is selectable.
-       *
-       * @param item controller service type
-       */
-      var isSelectable = function (item) {
-          return nfCommon.isBlank(item.usageRestriction) || nfCommon.canAccessRestrictedComponents();
-      };
-  
-      /**
-         * 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 getControllerServiceTypeFilterText = function () {
-            return $('#controller-service-type-filter').val();
-        };
-    
-        /**
-         * Filters the processor type table.
-         */
-        var applyControllerServiceTypeFilter = function () {
-            // get the dataview
-            var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
-    
-            // ensure the grid has been initialized
-          if (nfCommon.isDefinedAndNotNull(controllerServiceTypesGrid)) {
-                var controllerServiceTypesData = controllerServiceTypesGrid.getData();
-    
-                // update the search criteria
-                controllerServiceTypesData.setFilterArgs({
-                    searchString: getControllerServiceTypeFilterText()
-                });
-                controllerServiceTypesData.refresh();
-    
-              // update the buttons to possibly trigger the disabled state
-              $('#new-controller-service-dialog').modal('refreshButtons');
-  
-                // update the selection if possible
-                if (controllerServiceTypesData.getLength() > 0) {
-                    controllerServiceTypesGrid.setSelectedRows([0]);
-                }
-            }
-        };
-    
-        /**
-         * Hides the selected controller service.
-         */
-        var clearSelectedControllerService = function () {
-            $('#controller-service-type-description').text('');
-            $('#controller-service-type-name').text('');
-            $('#selected-controller-service-name').text('');
-            $('#selected-controller-service-type').text('');
-            $('#controller-service-description-container').hide();
-        };
-    
-        /**
-         * Clears the selected controller service type.
-         */
-        var clearControllerServiceSelection = function () {
-            // clear the selected row
-            clearSelectedControllerService();
-    
-            // clear the active cell the it can be reselected when its included
-            var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
-            controllerServiceTypesGrid.resetActiveCell();
-        };
-    
-        /**
-         * Performs the filtering.
-         *
-         * @param {object} item     The item subject to filtering
-         * @param {object} args     Filter arguments
-         * @returns {Boolean}       Whether or not to include the item
-         */
-        var filterControllerServiceTypes = function (item, args) {
-            // determine if the item matches the filter
-            var matchesFilter = matchesRegex(item, args);
-    
-            // determine if the row matches the selected tags
-            var matchesTags = true;
-            if (matchesFilter) {
-                var tagFilters = $('#controller-service-tag-cloud').tagcloud('getSelectedTags');
-                var hasSelectedTags = tagFilters.length > 0;
-                if (hasSelectedTags) {
-                    matchesTags = matchesSelectedTags(tagFilters, item['tags']);
-                }
-            }
-    
-            // determine if this row should be visible
-            var matches = matchesFilter && matchesTags;
-    
-            // if this row is currently selected and its being filtered
-            if (matches === false && $('#selected-controller-service-type').text() === item['type']) {
-                clearControllerServiceSelection();
-            }
-    
-            return matches;
-        };
-    
-        /**
-         * Determines if the item matches the filter.
-         *
-         * @param {object} item     The item to filter
-         * @param {object} args     The filter criteria
-         * @returns {boolean}       Whether the item matches the filter
-         */
-        var matchesRegex = function (item, args) {
-            if (args.searchString === '') {
-                return true;
-            }
-    
-            try {
-                // perform the row filtering
-                var filterExp = new RegExp(args.searchString, 'i');
-            } catch (e) {
-                // invalid regex
-                return false;
-            }
-    
-            // determine if the item matches the filter
-            var matchesLabel = item['label'].search(filterExp) >= 0;
-            var matchesTags = item['tags'].search(filterExp) >= 0;
-            return matchesLabel || matchesTags;
-        };
-    
-        /**
-         * Determines if the specified tags match all the tags selected by the user.
-         *
-         * @argument {string[]} tagFilters      The tag filters
-         * @argument {string} tags              The tags to test
-         */
-        var matchesSelectedTags = function (tagFilters, tags) {
-            var selectedTags = [];
-            $.each(tagFilters, function (_, filter) {
-                selectedTags.push(filter);
-            });
-    
-            // normalize the tags
-            var normalizedTags = tags.toLowerCase();
-    
-            var matches = true;
-            $.each(selectedTags, function (i, selectedTag) {
-                if (normalizedTags.indexOf(selectedTag) === -1) {
-                    matches = false;
-                    return false;
-                }
-            });
-    
-            return matches;
-        };
-    
-        /**
-         * Adds the currently selected controller service.
-         *
-         * @param {string} controllerServicesUri
-         * @param {jQuery} serviceTable
-         */
-        var addSelectedControllerService = function (controllerServicesUri, serviceTable) {
-            var selectedServiceType = $('#selected-controller-service-type').text();
-    
-            // ensure something was selected
-            if (selectedServiceType === '') {
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-controller-service.ControllerService'),
-                  dialogContent: nf._.msg('nf-controller-service.Message14')
-                });
-            } else {
-                addControllerService(controllerServicesUri, serviceTable, selectedServiceType);
-            }
-        };
-    
-        /**
-         * Adds a new controller service of the specified type.
-         *
-         * @param {string} controllerServicesUri
-         * @param {jQuery} serviceTable
-         * @param {string} controllerServiceType
-         */
-        var addControllerService = function (controllerServicesUri, serviceTable, controllerServiceType) {
-            // build the controller service entity
-            var controllerServiceEntity = {
-              'revision': nfClient.getRevision({
-                    'revision': {
-                        'version': 0
-                    }
-                }),
-                'component': {
-                    'type': controllerServiceType
-                }
-            };
-    
-            // add the new controller service
-            var addService = $.ajax({
-                type: 'POST',
-                url: controllerServicesUri,
-                data: JSON.stringify(controllerServiceEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (controllerServiceEntity) {
-                // add the item
-                var controllerServicesGrid = serviceTable.data('gridInstance');
-                var controllerServicesData = controllerServicesGrid.getData();
-                controllerServicesData.addItem(controllerServiceEntity);
-    
-                // resort
-                controllerServicesData.reSort();
-                controllerServicesGrid.invalidate();
-    
-                // select the new controller service
-                var row = controllerServicesData.getRowById(controllerServiceEntity.id);
-                controllerServicesGrid.setSelectedRows([row]);
-                controllerServicesGrid.scrollRowIntoView(row);
-          }).fail(nfErrorHandler.handleAjaxError);
-    
-            // hide the dialog
-            $('#new-controller-service-dialog').modal('hide');
-    
-            return addService;
-        };
-    
-        /**
-         * Initializes the new controller service dialog.
-         */
-        var initNewControllerServiceDialog = function () {
-            // initialize the processor type table
-            var controllerServiceTypesColumns = [
-              {
-                  id: 'type',
-                  name: nf._.msg('nf-controller-services.Type'),
-                  field: 'label',
-                  formatter: nfCommon.typeFormatter,
-                  sortable: false,
-                  resizable: true
-              },
-              {
-                  id: 'tags',
-                  name: nf._.msg('nf-controller-services.Tags'),
-                  field: 'tags',
-                  sortable: false,
-                  resizable: true
-              }
-            ];
-    
-            // initialize the dataview
-            var controllerServiceTypesData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            controllerServiceTypesData.setItems([]);
-            controllerServiceTypesData.setFilterArgs({
-                searchString: getControllerServiceTypeFilterText()
-            });
-            controllerServiceTypesData.setFilter(filterControllerServiceTypes);
-    
-            // initialize the grid
-            var controllerServiceTypesGrid = new Slick.Grid('#controller-service-types-table', controllerServiceTypesData, controllerServiceTypesColumns, gridOptions);
-            controllerServiceTypesGrid.setSelectionModel(new Slick.RowSelectionModel());
-            controllerServiceTypesGrid.registerPlugin(new Slick.AutoTooltips());
-            controllerServiceTypesGrid.setSortColumn('type', true);
-            controllerServiceTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) {
-                if ($.isArray(args.rows) && args.rows.length === 1) {
-                    var controllerServiceTypeIndex = args.rows[0];
-                    var controllerServiceType = controllerServiceTypesGrid.getDataItem(controllerServiceTypeIndex);
-    
-                    // set the controller service type description
-                  if (nfCommon.isDefinedAndNotNull(controllerServiceType)) {
-                	// show the selected controller service
-                      $('#controller-service-description-container').show();
-
-                      if (nfCommon.isBlank(controllerServiceType.description)) {
-                          $('#controller-service-type-description')
-                              .attr('title', '')
-                              .html('<span class="unset">No description specified</span>');
-                      } else {
-                          $('#controller-service-type-description')
-                              .width($('#controller-service-description-container').innerWidth() - 1)
-                              .html(controllerServiceType.description)
-                              .ellipsis();
-                      }
-  
-                      // populate the dom
-                      $('#controller-service-type-name').text(controllerServiceType.label).ellipsis();
-                      $('#selected-controller-service-name').text(controllerServiceType.label);
-                      $('#selected-controller-service-type').text(controllerServiceType.type);
-  
-                      // refresh the buttons based on the current selection
-                      $('#new-controller-service-dialog').modal('refreshButtons');
-                  }
-              }
-          });
-          controllerServiceTypesGrid.onViewportChanged.subscribe(function (e, args) {
-              nfCommon.cleanUpTooltips($('#controller-service-types-table'), 'div.view-usage-restriction');
-            });
-    
-            // wire up the dataview to the grid
-            controllerServiceTypesData.onRowCountChanged.subscribe(function (e, args) {
-                controllerServiceTypesGrid.updateRowCount();
-                controllerServiceTypesGrid.render();
-    
-                // update the total number of displayed processors
-                $('#displayed-controller-service-types').text(args.current);
-            });
-            controllerServiceTypesData.onRowsChanged.subscribe(function (e, args) {
-                controllerServiceTypesGrid.invalidateRows(args.rows);
-                controllerServiceTypesGrid.render();
-            });
-            controllerServiceTypesData.syncGridSelection(controllerServiceTypesGrid, true);
-    
-            // hold onto an instance of the grid
-          $('#controller-service-types-table').data('gridInstance', controllerServiceTypesGrid).on('mouseenter', 'div.slick-cell', function (e) {
-              var usageRestriction = $(this).find('div.view-usage-restriction');
-              if (usageRestriction.length && !usageRestriction.data('qtip')) {
-                  var rowId = $(this).find('span.row-id').text();
-  
-                  // get the status item
-                  var item = controllerServiceTypesData.getItemById(rowId);
-  
-                  // show the tooltip
-                  if (nfCommon.isDefinedAndNotNull(item.usageRestriction)) {
-                      usageRestriction.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                          content: item.usageRestriction,
-                          position: {
-                              container: $('#summary'),
-                              at: 'bottom right',
-                              my: 'top left',
-                              adjust: {
-                                  x: 4,
-                                  y: 4
-                              }
-                          }
-                      }));
-                  }
-              }
-          });
-    
-            // load the available controller services
-            $.ajax({
-                type: 'GET',
-                url: config.urls.controllerServiceTypes,
-                dataType: 'json'
-            }).done(function (response) {
-                var id = 0;
-                var tags = [];
-    
-                // begin the update
-                controllerServiceTypesData.beginUpdate();
-    
-                // go through each controller service type
-                $.each(response.controllerServiceTypes, function (i, documentedType) {
-                    // add the documented type
-                    controllerServiceTypesData.addItem({
-                        id: id++,
-                      label: nfCommon.substringAfterLast(documentedType.type, '.'),
-                        type: documentedType.type,
-                      description: nfCommon.escapeHtml(documentedType.description),
-                      usageRestriction: nfCommon.escapeHtml(documentedType.usageRestriction),
-                        tags: documentedType.tags.join(', ')
-                    });
-    
-                    // count the frequency of each tag for this type
-                    $.each(documentedType.tags, function (i, tag) {
-                        tags.push(tag.toLowerCase());
-                    });
-                });
-    
-                // end the udpate
-                controllerServiceTypesData.endUpdate();
-    
-                // set the total number of processors
-                $('#total-controller-service-types, #displayed-controller-service-types').text(response.controllerServiceTypes.length);
-    
-                // create the tag cloud
-                $('#controller-service-tag-cloud').tagcloud({
-                    tags: tags,
-                    select: applyControllerServiceTypeFilter,
-                    remove: applyControllerServiceTypeFilter
-                });
-          }).fail(nfErrorHandler.handleAjaxError);
-    
-            // initialize the controller service dialog
-            $('#new-controller-service-dialog').modal({
-              headerText: nf._.msg('nf-controller-service.AddControllerService'),
-                scrollableContentStyle: 'scrollable',
-                handler: {
-                    close: function () {
-                        // clear the selected row
-                        clearSelectedControllerService();
-    
-                        // clear any filter strings
-                        $('#controller-service-type-filter').val('');
-    
-                        // clear the tagcloud
-                        $('#controller-service-tag-cloud').tagcloud('clearSelectedTags');
-    
-                        // reset the filter
-                        applyControllerServiceTypeFilter();
-    
-                        // unselect any current selection
-                        var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
-                        controllerServiceTypesGrid.setSelectedRows([]);
-                        controllerServiceTypesGrid.resetActiveCell();
-                  },
-                  resize: function () {
-                      $('#controller-service-type-description')
-                          .width($('#controller-service-description-container').innerWidth() - 1)
-                          .text($('#controller-service-type-description').attr('title'))
-                          .ellipsis();
-                    }
-                }
-            });
-        };
-    
-        /**
-         * Formatter for the name column.
-         *
-         * @param {type} row
-         * @param {type} cell
-         * @param {type} value
-         * @param {type} columnDef
-         * @param {type} dataContext
-         * @returns {String}
-         */
-        var nameFormatter = function (row, cell, value, columnDef, dataContext) {
-            if (!dataContext.permissions.canRead) {
-                return '<span class="blank">' + dataContext.id + '</span>';
-            }
-            
-            return dataContext.component.name;
-        };
-    
-        /**
-         * Formatter for the type column.
-         *
-         * @param {type} row
-         * @param {type} cell
-         * @param {type} value
-         * @param {type} columnDef
-         * @param {type} dataContext
-         * @returns {String}
-         */
-        var typeFormatter = function (row, cell, value, columnDef, dataContext) {
-            if (!dataContext.permissions.canRead) {
-                return '';
-            }
-            
-          return nfCommon.substringAfterLast(dataContext.component.type, '.');
-        };
-    
-        /**
-         * Formatter for the name column.
-         *
-         * @param {type} row
-         * @param {type} cell
-         * @param {type} value
-         * @param {type} columnDef
-         * @param {type} dataContext
-         * @returns {String}
-         */
-        var groupIdFormatter = function (row, cell, value, columnDef, dataContext) {
-            if (!dataContext.permissions.canRead) {
-                return '';
-            }
-    
-          if (nfCommon.isDefinedAndNotNull(dataContext.component.parentGroupId)) {
-              // see if this listing is based off a selected process group
-              var selection = nfCanvasUtils.getSelection();
-              if (selection.empty() === false) {
-                  var selectedData = selection.datum();
-                  if (selectedData.id === dataContext.component.parentGroupId) {
-                      if (selectedData.permissions.canRead) {
-                          return selectedData.component.name;
-                      } else {
-                          return selectedData.id;
-                      }
-                  }
-              }
-  
-              // there's either no selection or the service is defined in an ancestor component
-              var breadcrumbs = nfNgBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs();
-  
-              var processGroupLabel = dataContext.component.parentGroupId;
-              $.each(breadcrumbs, function (_, breadcrumbEntity) {
-                  if (breadcrumbEntity.id === dataContext.component.parentGroupId) {
-                      processGroupLabel = breadcrumbEntity.label;
-                      return false;
-                  }
-              });
-  
-              return processGroupLabel;
-          } else {
-              return 'Controller';
-          }
-      };
-  
-      /**
-       * Determines if the user has write permissions for the parent of the specified controller service.
-       *
-       * @param dataContext
-       * @returns {boolean} whether the user has write permissions for the parent of the controller service
-       */
-      var canWriteControllerServiceParent = function (dataContext) {
-          // we know the process group for this controller service is part of the current breadcrumb trail
-          var canWriteProcessGroupParent = function (processGroupId) {
-              // see if this listing is based off a selected process group
-              var selection = nfCanvasUtils.getSelection();
-              if (selection.empty() === false) {
-                  var datum = selection.datum();
-                  if (datum.id === processGroupId) {
-                      return datum.permissions.canWrite;
-                  }
-              }
-  
-              // there's either no selection or the service is defined in an ancestor component
-              var breadcrumbs = nfNgBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs();
-  
-              var isAuthorized = false;
-              $.each(breadcrumbs, function (_, breadcrumbEntity) {
-                  if (breadcrumbEntity.id === processGroupId) {
-                      isAuthorized = breadcrumbEntity.permissions.canWrite;
-                      return false;
-                  }
-              });
-  
-              return isAuthorized;
-          };
-  
-          if (nfCommon.isDefinedAndNotNull(dataContext.component.parentGroupId)) {
-              return canWriteProcessGroupParent(dataContext.component.parentGroupId);
-          } else {
-              return nfCommon.canModifyController();
-            }
-        };
-    
-        /**
-         * 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 (sortDetails.columnId === 'moreDetails') {
-                        var aBulletins = 0;
-                      if (!nfCommon.isEmpty(a.bulletins)) {
-                            aBulletins = a.bulletins.length;
-                        }
-                        var bBulletins = 0;
-                      if (!nfCommon.isEmpty(b.bulletins)) {
-                            bBulletins = b.bulletins.length;
-                        }
-                        return aBulletins - bBulletins;
-                    } else if (sortDetails.columnId === 'type') {
-                      var aType = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(a.component[sortDetails.columnId], '.') : '';
-                      var bType = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(b.component[sortDetails.columnId], '.') : '';
-                        return aType === bType ? 0 : aType > bType ? 1 : -1;
-                    } else if (sortDetails.columnId === 'state') {
-                        var aState = 'Invalid';
-                      if (nfCommon.isEmpty(a.component.validationErrors)) {
-                          aState = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-                        }
-                        var bState = 'Invalid';
-                      if (nfCommon.isEmpty(b.component.validationErrors)) {
-                          bState = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
-                        }
-                        return aState === bState ? 0 : aState > bState ? 1 : -1;
-                    } else {
-                      var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-                      var bString = nfCommon.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){
-                        return 0;
-                    }
-                    if(a.permissions.canRead){
-                        return 1;
-                    } else {
-                        return -1;
-                    }
-                }
-            };
-    
-            // perform the sort
-            data.sort(comparer, sortDetails.sortAsc);
-        };
-    
-        /**
-         * Initializes the controller services tab.
-         * 
-         * @param {jQuery} serviceTable
-       * @param {function} showSettings
-         */
-      var initControllerServices = function (serviceTable, showSettings) {
-            // more details formatter
-            var moreControllerServiceDetails = function (row, cell, value, columnDef, dataContext) {
-                if (!dataContext.permissions.canRead) {
-                    return '';
-                }
-                
-              var markup = '<div class="pointer view-controller-service fa fa-info-circle" title="'+nf._.msg('nf-controller-services.viewDtails')+'" style="margin-top: 5px; margin-right: 3px;" ></div>';
-    
-                // always include a button to view the usage
-              markup += '<div title="'+nf._.msg('nf-controller-services.usage')+'" class="pointer controller-service-usage fa fa-book" style="margin-top: 5px; margin-right: 3px;" ></div>';
-    
-              var hasErrors = !nfCommon.isEmpty(dataContext.component.validationErrors);
-              var hasBulletins = !nfCommon.isEmpty(dataContext.bulletins);
-    
-                if (hasErrors) {
-                    markup += '<div class="pointer has-errors fa fa-warning" style="margin-top: 4px; margin-right: 3px; float: left;" ></div>';
-                }
-    
-                if (hasBulletins) {
-                    markup += '<div class="has-bulletins fa fa-sticky-note-o" style="margin-top: 5px; margin-right: 3px; float: left;"></div>';
-                }
-    
-                if (hasErrors || hasBulletins) {
-                  markup += '<span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
-                }
-    
-                return markup;
-            };
-    
-            var controllerServiceStateFormatter = function (row, cell, value, columnDef, dataContext) {
-                if (!dataContext.permissions.canRead) {
-                    return '';
-                }
-                
-                // determine the appropriate label
-                var icon = '', label = '';
-              if (!nfCommon.isEmpty(dataContext.component.validationErrors)) {
-                    icon = 'invalid fa fa-warning';
-                  label = nf._.msg('nf-controller-services.Invalid');
-                } else {
-                    if (dataContext.component.state === 'DISABLED') {
-                        icon = 'disabled icon icon-enable-false"';
-                      label = nf._.msg('nf-controller-services.Disabled');
-                    } else if (dataContext.component.state === 'DISABLING') {
-                        icon = 'disabled icon icon-enable-false"';
-                      label = nf._.msg('nf-controller-services.Disabling');
-                    } else if (dataContext.component.state === 'ENABLED') {
-                        icon = 'enabled fa fa-flash';
-                      label = nf._.msg('nf-controller-services.Enabled');
-                    } else if (dataContext.component.state === 'ENABLING') {
-                        icon = 'enabled fa fa-flash';
-                      label = nf._.msg('nf-controller-services.Enabling');
-                    }
-                }
-    
-                // format the markup
-                var formattedValue = '<div layout="row"><div class="' + icon + '" style="margin-top: 5px;"></div>';
-                return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + label + '</div></div>';
-            };
-    
-            var controllerServiceActionFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-    
-                if (dataContext.permissions.canRead && dataContext.permissions.canWrite) {
-                  var definedByCurrentGroup = false;
-                  if (nfCommon.isDefinedAndNotNull(dataContext.component.parentGroupId)) {
-                      // when opened in the process group context, the current group is store in #process-group-id
-                      if (dataContext.component.parentGroupId === $('#process-group-id').text()) {
-                          definedByCurrentGroup = true;
-                      }
-                  } else {
-                      // when there is no parent group, the service is defined at the controller level and should be editable
-                      definedByCurrentGroup = true;
-                  }
-  
-                  if (definedByCurrentGroup === true) {
-                        if (dataContext.component.state === 'ENABLED' || dataContext.component.state === 'ENABLING') {
-                      markup += '<div class="pointer disable-controller-service icon icon-enable-false" title="'+nf._.msg('nf-controller-services.disable')+'" style="margin-top: 2px; margin-right: 3px;" ></div>';
-                        } else if (dataContext.component.state === 'DISABLED') {
-                      markup += '<div class="pointer edit-controller-service fa fa-pencil" title="'+nf._.msg('nf-controller-services.edit')+'" style="margin-top: 2px; margin-right: 3px;" ></div>';
-    
-                            // if there are no validation errors allow enabling
-                          if (nfCommon.isEmpty(dataContext.component.validationErrors)) {
-                          markup += '<div class="pointer enable-controller-service fa fa-flash" title="'+nf._.msg('nf-controller-services.enable')+'" style="margin-top: 2px; margin-right: 3px;"></div>';
-                            }
-                        }
-    
-                        if (dataContext.component.persistsState === true) {
-                          markup += '<div title="View State" class="pointer view-state-controller-service fa fa-tasks" style="margin-top: 2px; margin-right: 3px;" ></div>';
-                        }
-    
-                      if (canWriteControllerServiceParent(dataContext)) {
-                          markup += '<div class="pointer delete-controller-service fa fa-trash" title="Remove" style="margin-top: 2px; margin-right: 3px;" ></div>';
-                      }
-                  } else {
-                      markup += '<div class="pointer go-to-controller-service fa fa-long-arrow-right" title="Go To" style="margin-top: 2px; margin-right: 3px;" ></div>';
-                  }
-                }
-    
-                // allow policy configuration conditionally
-              if (nfCanvasUtils.isConfigurableAuthorizer() && nfCommon.canAccessTenants()) {
-                  markup += '<div title="'+nf._.msg('nf-controller-services.acesspolicies')+'" class="pointer edit-access-policies fa fa-key" style="margin-top: 2px;"></div>';
-                }
-    
-                return markup;
-            };
-    
-            // define the column model for the controller services table
-            var controllerServicesColumns = [
-              {
-                  id: 'moreDetails',
-                  name: '&nbsp;',
-                  resizable: false,
-                  formatter: moreControllerServiceDetails,
-                  sortable: true,
-                  width: 90,
-                  maxWidth: 90,
-                  toolTip: 'Sorts based on presence of bulletins'
-              },
-              {
-                  id: 'name',
-                  name: nf._.msg('nf-controller-services.Name'),
-                  formatter: nameFormatter,
-                  sortable: true,
-                  resizable: true
-              },
-              {
-                  id: 'type',
-                  name: nf._.msg('nf-controller-services.Type'),
-                  formatter: typeFormatter,
-                  sortable: true,
-                  resizable: true
-              },
-              {
-                  id: 'state',
-                  name: nf._.msg('nf-controller-services.State'),
-                  formatter: controllerServiceStateFormatter,
-                  sortable: true,
-                  resizeable: true
-              },
-              {
-                  id: 'parentGroupId',
-                  name: nf._.msg('nf-controller-services.ProcessGroup'),
-                  formatter: groupIdFormatter,
-                  sortable: true,
-                  resizeable: true
-              }
-            ];
-    
-            // action column should always be last
-            controllerServicesColumns.push({id: 'actions', name: '&nbsp;', resizable: false, formatter: controllerServiceActionFormatter, sortable: false, width: 90, maxWidth: 90});
-    
-            // initialize the dataview
-            var controllerServicesData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            controllerServicesData.setItems([]);
-    
-            // initialize the sort
-            sort({
-                columnId: 'name',
-                sortAsc: true
-            }, controllerServicesData);
-    
-            // initialize the grid
-            var controllerServicesGrid = new Slick.Grid(serviceTable, controllerServicesData, controllerServicesColumns, gridOptions);
-            controllerServicesGrid.setSelectionModel(new Slick.RowSelectionModel());
-            controllerServicesGrid.registerPlugin(new Slick.AutoTooltips());
-            controllerServicesGrid.setSortColumn('name', true);
-            controllerServicesGrid.onSort.subscribe(function (e, args) {
-                sort({
-                    columnId: args.sortCol.id,
-                    sortAsc: args.sortAsc
-                }, controllerServicesData);
-            });
-    
-            // configure a click listener
-            controllerServicesGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-    
-                // get the service at this row
-                var controllerServiceEntity = controllerServicesData.getItem(args.row);
-    
-                // determine the desired action
-                if (controllerServicesGrid.getColumns()[args.cell].id === 'actions') {
-                    if (target.hasClass('edit-controller-service')) {
-                      nfControllerService.showConfiguration(serviceTable, controllerServiceEntity);
-                    } else if (target.hasClass('enable-controller-service')) {
-                      nfControllerService.enable(serviceTable, controllerServiceEntity);
-                    } else if (target.hasClass('disable-controller-service')) {
-                      nfControllerService.disable(serviceTable, controllerServiceEntity);
-                    } else if (target.hasClass('delete-controller-service')) {
-                      nfControllerService.promptToDeleteController(serviceTable, controllerServiceEntity);
-                    } else if (target.hasClass('view-state-controller-service')) {
-                      nfComponentState.showState(controllerServiceEntity, controllerServiceEntity.state === 'DISABLED');
-                    } else if (target.hasClass('edit-access-policies')) {
-                        // show the policies for this service
-                      nfPolicyManagement.showControllerServicePolicy(controllerServiceEntity);
-    
-                        // close the settings dialog
-                        $('#shell-close-button').click();
-                  } else if (target.hasClass('go-to-controller-service')) {
-                      // load the parent group of the selected service
-                      nfProcessGroup.enterGroup(controllerServiceEntity.component.parentGroupId);
-  
-                      // open/select the specific service
-                      $.Deferred(function (deferred) {
-                          if ($('#process-group-configuration').is(':visible')) {
-                              nfProcessGroupConfiguration.loadConfiguration(controllerServiceEntity.component.parentGroupId).done(function () {
-                                  deferred.resolve();
-                              });
-                          } else {
-                              nfProcessGroupConfiguration.showConfiguration(controllerServiceEntity.component.parentGroupId).done(function () {
-                                  deferred.resolve();
-                              });
-                          }
-                      }).done(function () {
-                          nfProcessGroupConfiguration.selectControllerService(controllerServiceEntity.id);
-                      });
-                    }
-                } else if (controllerServicesGrid.getColumns()[args.cell].id === 'moreDetails') {
-                    if (target.hasClass('view-controller-service')) {
-                      nfControllerService.showDetails(serviceTable, controllerServiceEntity);
-                    } else if (target.hasClass('controller-service-usage')) {
-                         // close the settings dialog
-                         $('#shell-close-button').click();
-    
-                         // open the documentation for this controller service
-                       nfShell.showPage('../nifi-docs/documentation?' + $.param({
-                           select: nfCommon.substringAfterLast(controllerServiceEntity.component.type, '.')
-                         })).done(function() {
-                           if (nfCommon.isDefinedAndNotNull(controllerServiceEntity.component.parentGroupId)) {
-                                 var groupId;
-                               var processGroup = nfProcessGroup.get(controllerServiceEntity.component.parentGroupId);
-                               if (nfCommon.isDefinedAndNotNull(processGroup)) {
-                                     groupId = processGroup.id;
-                                 } else {
-                                   groupId = nfCanvasUtils.getGroupId();
-                                 }
-    
-                                 // reload the corresponding group
-                               nfProcessGroupConfiguration.showConfiguration(groupId);
-                             } else {
-                               showSettings();
-                             }
-                         });
-                     }
-                }
-            });
-    
-            // wire up the dataview to the grid
-            controllerServicesData.onRowCountChanged.subscribe(function (e, args) {
-                controllerServicesGrid.updateRowCount();
-                controllerServicesGrid.render();
-            });
-            controllerServicesData.onRowsChanged.subscribe(function (e, args) {
-                controllerServicesGrid.invalidateRows(args.rows);
-                controllerServicesGrid.render();
-            });
-            controllerServicesData.syncGridSelection(controllerServicesGrid, true);
-    
-            // hold onto an instance of the grid
-            serviceTable.data('gridInstance', controllerServicesGrid).on('mouseenter', 'div.slick-cell', function (e) {
-                var errorIcon = $(this).find('div.has-errors');
-                if (errorIcon.length && !errorIcon.data('qtip')) {
-                    var serviceId = $(this).find('span.row-id').text();
-    
-                    // get the service item
-                    var controllerServiceEntity = controllerServicesData.getItemById(serviceId);
-    
-                    // format the errors
-                  var tooltip = nfCommon.formatUnorderedList(controllerServiceEntity.component.validationErrors);
-    
-                    // show the tooltip
-                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                        errorIcon.qtip($.extend({},
-                          nfCommon.config.tooltipConfig,
-                            {
-                                content: tooltip,
-                                position: {
-                                    target: 'mouse',
-                                  viewport: $('#shell-container'),
-                                    adjust: {
-                                        x: 8,
-                                        y: 8,
-                                        method: 'flipinvert flipinvert'
-                                    }
-                                }
-                            }));
-                    }
-                }
-    
-                var bulletinIcon = $(this).find('div.has-bulletins');
-                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                    var taskId = $(this).find('span.row-id').text();
-    
-                    // get the task item
-                    var controllerServiceEntity = controllerServicesData.getItemById(taskId);
-    
-                    // format the tooltip
-                  var bulletins = nfCommon.getFormattedBulletins(controllerServiceEntity.bulletins);
-                  var tooltip = nfCommon.formatUnorderedList(bulletins);
-    
-                    // show the tooltip
-                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                        bulletinIcon.qtip($.extend({},
-                          nfCommon.config.tooltipConfig,
-                            {
-                                content: tooltip,
-                                position: {
-                                    target: 'mouse',
-                                  viewport: $('#shell-container'),
-                                    adjust: {
-                                        x: 8,
-                                        y: 8,
-                                        method: 'flipinvert flipinvert'
-                                    }
-                                }
-                            }));
-                    }
-                }
-            });
-        };
-    
-        /**
-         * Loads the controller services.
-         *
-         * @param {string} controllerServicesUri
-         * @param {jQuery} serviceTable
-         */
-        var loadControllerServices = function (controllerServicesUri, serviceTable) {
-            return $.ajax({
-                type: 'GET',
-                url: controllerServicesUri,
-                dataType: 'json'
-            }).done(function (response) {
-                var services = [];
-                $.each(response.controllerServices, function (_, service) {
-                    services.push($.extend({
-                        bulletins: []
-                    }, service));
-                });
-    
-              nfCommon.cleanUpTooltips(serviceTable, 'div.has-errors');
-              nfCommon.cleanUpTooltips(serviceTable, 'div.has-bulletins');
-    
-                var controllerServicesGrid = serviceTable.data('gridInstance');
-                var controllerServicesData = controllerServicesGrid.getData();
-    
-                // update the controller services
-                controllerServicesData.setItems(services);
-                controllerServicesData.reSort();
-                controllerServicesGrid.invalidate();
-              controllerServicesGrid.render();
-            });
-        };
-    
-        return {
-            /**
-             * Initializes the status page.
-             *
-             * @param {jQuery} serviceTable
-           * @param {function} showSettings
-             */
-          init: function (serviceTable, showSettings) {
-                if (!initialized) {
-                    // initialize the new controller service dialog
-                    initNewControllerServiceDialog();
-    
-                    // don't run this again
-                    initialized = true;
-                }
-    
-                // initialize the controller service table
-              initControllerServices(serviceTable, showSettings);
-            },
-    
-            /**
-             * Prompts for a new controller service.
-             *
-             * @param {string} controllerServicesUri
-             * @param {jQuery} serviceTable
-             */
-            promptNewControllerService: function (controllerServicesUri, serviceTable) {
-              // get the grid reference
-              var grid = $('#controller-service-types-table').data('gridInstance');
-  
-                // update the keyhandler
-                $('#controller-service-type-filter').off('keyup').on('keyup', function (e) {
-                    var code = e.keyCode ? e.keyCode : e.which;
-                    if (code === $.ui.keyCode.ENTER) {
-                      var selected = grid.getSelectedRows();
-  
-                      if (selected.length > 0) {
-                          // grid configured with multi-select = false
-                          var item = grid.getDataItem(selected[0]);
-                          if (isSelectable(item)) {
-                                addSelectedControllerService(controllerServicesUri, serviceTable);
-                          }
-                      }
-                    } else {
-                        applyControllerServiceTypeFilter();
-                    }
-                });
-    
-                // update the button model and show the dialog
-                $('#new-controller-service-dialog').modal('setButtonModel', [{
-                  buttonText: nf._.msg('nf-controller-services.Add'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                  disabled: function () {
-                      var selected = grid.getSelectedRows();
-  
-                      if (selected.length > 0) {
-                          // grid configured with multi-select = false
-                          var item = grid.getDataItem(selected[0]);
-                          return isSelectable(item) === false;
-                      } else {
-                          return grid.getData().getLength() === 0;
-                      }
-                  },
-                    handler: {
-                        click: function () {
-                            addSelectedControllerService(controllerServicesUri, serviceTable);
-                        }
-                    }
-                }, {
-                  buttonText: nf._.msg('nf-controller-service.Cancel'),
-                    color: {
-                        base: '#E3E8EB',
-                        hover: '#C7D2D7',
-                        text: '#004849'
-                    },
-                    handler: {
-                        click: function () {
-                            $(this).modal('hide');
-                        }
-                    }
-                }]).modal('show');
-    
-                var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
-    
-                // remove previous dbl click handler
-                if (dblClick !== null) {
-                    controllerServiceTypesGrid.onDblClick.unsubscribe(dblClick);
-                }
-    
-                // update the dbl click handler and subsrcibe
-                dblClick = function(e, args) {
-                    var controllerServiceType = controllerServiceTypesGrid.getDataItem(args.row);
-    
-                  if (isSelectable(controllerServiceType)) {
-                        addControllerService(controllerServicesUri, serviceTable, controllerServiceType.type);
-                  }
-                };
-                controllerServiceTypesGrid.onDblClick.subscribe(dblClick);
-    
-                // reset the canvas size after the dialog is shown
-              if (nfCommon.isDefinedAndNotNull(controllerServiceTypesGrid)) {
-                    controllerServiceTypesGrid.setSelectedRows([0]);
-                    controllerServiceTypesGrid.resizeCanvas();
-                }
-    
-                // set the initial focus
-                $('#controller-service-type-filter').focus();
-            },
-    
-            /**
-             * Update the size of the grid based on its container's current size.
-             * 
-             * @param {jQuery} serviceTable
-             */
-            resetTableSize: function (serviceTable) {
-                var controllerServicesGrid = serviceTable.data('gridInstance');
-              if (nfCommon.isDefinedAndNotNull(controllerServicesGrid)) {
-                    controllerServicesGrid.resizeCanvas();
-                }
-            },
-    
-            /**
-             * Loads the settings.
-             *
-             * @param {string} controllerServicesUri
-             * @param {jQuery} serviceTable
-             */
-            loadControllerServices: function (controllerServicesUri, serviceTable) {
-                return loadControllerServices(controllerServicesUri, serviceTable);
-            },
-    
-            /**
-             * Sets the controller service and reporting task bulletins in their respective tables.
-             *
-             * @param {jQuery} serviceTable
-             * @param {object} controllerServiceBulletins
-             */
-            setBulletins: function(serviceTable, controllerServiceBulletins) {
-                // controller services
-                var controllerServicesGrid = serviceTable.data('gridInstance');
-                var controllerServicesData = controllerServicesGrid.getData();
-                controllerServicesData.beginUpdate();
-    
-                // if there are some bulletins process them
-              if (!nfCommon.isEmpty(controllerServiceBulletins)) {
-                    var controllerServiceBulletinsBySource = d3.nest()
-                        .key(function(d) { return d.sourceId; })
-                        .map(controllerServiceBulletins, d3.map);
-    
-                    controllerServiceBulletinsBySource.forEach(function(sourceId, sourceBulletins) {
-                        var controllerService = controllerServicesData.getItemById(sourceId);
-                      if (nfCommon.isDefinedAndNotNull(controllerService)) {
-                            controllerServicesData.updateItem(sourceId, $.extend(controllerService, {
-                                bulletins: sourceBulletins
-                            }));
-                        }
-                    });
-                } else {
-                    // if there are no bulletins clear all
-                    var controllerServices = controllerServicesData.getItems();
-                    $.each(controllerServices, function(_, controllerService) {
-                        controllerServicesData.updateItem(controllerService.id, $.extend(controllerService, {
-                            bulletins: []
-                        }));
-                    });
-                }
-                controllerServicesData.endUpdate();
-            }
-        };
-  }));
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
deleted file mode 100644
index b76319b219c2..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js
+++ /dev/null
@@ -1,88 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-              'nf.Common',
-              'nf.Shell',
-              'nf.Dialog',
-              'nf.Client'], function ($, nfCommon, nfShell, nfDialog, nfClient) {
-              return (nf.CustomUi = factory($, nfCommon, nfShell, nfDialog, nfClient));
-          });
-      } 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 ($, nfCommon, nfShell, nfDialog, nfClient) {
-      'use strict';
-  
-      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) {
-                  nfCommon.getAccessToken('../nifi-api/access/ui-extension-token').done(function (uiExtensionToken) {
-                        // record the processor id
-                        $('#shell-close-button');
-    
-                      var revision = nfClient.getRevision(entity);
-    
-                        // build the customer ui params
-                        var customUiParams = {
-                            'id': entity.id,
-                            'revision': revision.version,
-                            'clientId': revision.clientId,
-                            'editable': editable
-                        };
-    
-                        // conditionally include the ui extension token
-                      if (!nfCommon.isBlank(uiExtensionToken)) {
-                            customUiParams['access_token'] = uiExtensionToken;
-                        }
-    
-                        // show the shell
-                      nfShell.showPage('..' + uri + '?' + $.param(customUiParams), false).done(function () {
-                            deferred.resolve();
-                        });
-                    }).fail(function () {
-                      nfDialog.showOkDialog({
-                      headerText: nf._.msg('nf-custom-ui.AdvancedConfiguration'),
-                      dialogContent: nf._.msg('nf-custom-ui.Message1')
-                        });
-                        deferred.resolve();
-                    });
-                }).promise();
-            }
-      }
-  }));
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
deleted file mode 100644
index 663304fcf55e..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
+++ /dev/null
@@ -1,422 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.Connection',
-                  'nf.Birdseye',
-                  'nf.CanvasUtils',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.Client',
-                  'nf.ErrorHandler'],
-              function ($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler) {
-                  return (nf.Draggable = factory($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.Draggable =
-              factory(require('jquery'),
-                  require('d3'),
-                  require('nf.Connection'),
-                  require('nf.Birdseye'),
-                  require('nf.CanvasUtils'),
-                  require('nf.Common'),
-                  require('nf.Dialog'),
-                  require('nf.Client'),
-                  require('nf.ErrorHandler')));
-      } else {
-          nf.Draggable = factory(root.$,
-              root.d3,
-              root.nf.Connection,
-              root.nf.Birdseye,
-              root.nf.CanvasUtils,
-              root.nf.Common,
-              root.nf.Dialog,
-              root.nf.Client,
-              root.nf.ErrorHandler);
-      }
-  }(this, function ($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler) {
-      'use strict';
-  
-      var nfCanvas;
-        var drag;
-    
-        /**
-         * Updates the positioning of all selected components.
-         *
-         * @param {selection} dragSelection The current drag selection
-         */
-        var updateComponentsPosition = function (dragSelection) {
-            var updates = d3.map();
-    
-            // determine the drag delta
-            var dragData = dragSelection.datum();
-            var delta = {
-                x: dragData.x - dragData.original.x,
-                y: dragData.y - dragData.original.y
-            };
-    
-            // if the component didn't move, return
-            if (delta.x === 0 && delta.y === 0) {
-                return;
-            }
-    
-            var selectedConnections = d3.selectAll('g.connection.selected');
-            var selectedComponents = d3.selectAll('g.component.selected');
-    
-            // ensure every component is writable
-          if (nfCanvasUtils.canModify(selectedConnections) === false || nfCanvasUtils.canModify(selectedComponents) === false) {
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-draggable.ComponentPosition'),
-                  dialogContent: nf._.msg('nf-draggable.Message2')
-                });
-                return;
-            }
-    
-            // go through each selected connection
-            selectedConnections.each(function (d) {
-              var connectionUpdate = nfDraggable.updateConnectionPosition(d, delta);
-                if (connectionUpdate !== null) {
-                    updates.set(d.id, connectionUpdate);
-                }
-            });
-    
-            // go through each selected component
-            selectedComponents.each(function (d) {
-                // consider any self looping connections
-              var connections = nfConnection.getComponentConnections(d.id);
-                $.each(connections, function (_, connection) {
-                  if (!updates.has(connection.id) && nfCanvasUtils.getConnectionSourceComponentId(connection) === nfCanvasUtils.getConnectionDestinationComponentId(connection)) {
-                      var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
-                        if (connectionUpdate !== null) {
-                            updates.set(connection.id, connectionUpdate);
-                        }
-                    }
-                });
-    
-                // consider the component itself
-              updates.set(d.id, nfDraggable.updateComponentPosition(d, delta));
-          });
-  
-          nfDraggable.refreshConnections(updates);
-        };
-    
-        /**
-         * Updates the parent group of all selected components.
-       *
-       * @param {selection} the destination group
-         */
-      var updateComponentsGroup = function (group) {
-          // get the selection and deselect the components being moved
-          var selection = d3.selectAll('g.component.selected, g.connection.selected').classed('selected', false);
-    
-          if (nfCanvasUtils.canModify(selection) === false) {
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-draggable.ComponentPosition'),
-                  dialogContent: nf._.msg('nf-draggable.Message2')
-                });
-                return;
-            }
-          if (nfCanvasUtils.canModify(group) === false) {
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-draggable.ComponentPosition'),
-                  dialogContent: nf._.msg('nf-draggable.Message1')
-                });
-                return;
-            }
-    
-            // move the seleciton into the group
-          nfCanvasUtils.moveComponents(selection, group);
-        };
-    
-      var nfDraggable = {
-          init: function (canvas) {
-              nfCanvas = canvas;
-  
-                // handle component drag events
-                drag = d3.behavior.drag()
-                    .on('dragstart', function () {
-                        // stop further propagation
-                        d3.event.sourceEvent.stopPropagation();
-                    })
-                    .on('drag', function () {
-                        var dragSelection = d3.select('rect.drag-selection');
-    
-                        // lazily create the drag selection box
-                        if (dragSelection.empty()) {
-                            // get the current selection
-                            var selection = d3.selectAll('g.component.selected');
-    
-                            // determine the appropriate bounding box
-                            var minX = null, maxX = null, minY = null, maxY = null;
-                            selection.each(function (d) {
-                                if (minX === null || d.position.x < minX) {
-                                    minX = d.position.x;
-                                }
-                                if (minY === null || d.position.y < minY) {
-                                    minY = d.position.y;
-                                }
-                                var componentMaxX = d.position.x + d.dimensions.width;
-                                var componentMaxY = d.position.y + d.dimensions.height;
-                                if (maxX === null || componentMaxX > maxX) {
-                                    maxX = componentMaxX;
-                                }
-                                if (maxY === null || componentMaxY > maxY) {
-                                    maxY = componentMaxY;
-                                }
-                            });
-    
-                            // create a selection box for the move
-                            d3.select('#canvas').append('rect')
-                                .attr('rx', 6)
-                                .attr('ry', 6)
-                                .attr('x', minX)
-                                .attr('y', minY)
-                                .attr('class', 'drag-selection')
-                                .attr('pointer-events', 'none')
-                                .attr('width', maxX - minX)
-                                .attr('height', maxY - minY)
-                                .attr('stroke-width', function () {
-                                  return 1 / nfCanvasUtils.scaleCanvasView();
-                                })
-                                .attr('stroke-dasharray', function () {
-                                  return 4 / nfCanvasUtils.scaleCanvasView();
-                                })
-                                .datum({
-                                    original: {
-                                        x: minX,
-                                        y: minY
-                                    },
-                                    x: minX,
-                                    y: minY
-                                });
-                        } else {
-                            // update the position of the drag selection
-                            dragSelection.attr('x', function (d) {
-                                d.x += d3.event.dx;
-                                return d.x;
-                            })
-                                .attr('y', function (d) {
-                                    d.y += d3.event.dy;
-                                    return d.y;
-                                });
-                        }
-                    })
-                    .on('dragend', function () {
-                        // stop further propagation
-                        d3.event.sourceEvent.stopPropagation();
-    
-                        // get the drag selection
-                        var dragSelection = d3.select('rect.drag-selection');
-    
-                        // ensure we found a drag selection
-                        if (dragSelection.empty()) {
-                            return;
-                        }
-    
-                      // get the destination group if applicable... remove the drop flag if necessary to prevent
-                      // subsequent drop events from triggering prior to this move's completion
-                      var group = d3.select('g.drop').classed('drop', false);
-  
-                        // either move or update the selections group as appropriate
-                      if (group.empty()) {
-                            updateComponentsPosition(dragSelection);
-                        } else {
-                          updateComponentsGroup(group);
-                        }
-    
-                        // remove the drag selection
-                        dragSelection.remove();
-                    });
-            },
-    
-            /**
-           * Update the component's position
-           *
-           * @param d     The component
-           * @param delta The change in position
-           * @returns {*}
-           */
-          updateComponentPosition: function (d, delta) {
-              var newPosition = {
-                  'x': d.position.x + delta.x,
-                  'y': d.position.y + delta.y
-              };
-  
-              // build the entity
-              var entity = {
-                  'revision': nfClient.getRevision(d),
-                  'component': {
-                      'id': d.id,
-                      'position': newPosition
-                  }
-              };
-  
-              // update the component positioning
-              return $.Deferred(function (deferred) {
-                  $.ajax({
-                      type: 'PUT',
-                      url: d.uri,
-                      data: JSON.stringify(entity),
-                      dataType: 'json',
-                      contentType: 'application/json'
-                  }).done(function (response) {
-                      // update the component
-                      nfCanvasUtils.getComponentByType(d.type).set(response);
-  
-                      // resolve with an object so we can refresh when finished
-                      deferred.resolve({
-                          type: d.type,
-                          id: d.id
-                      });
-                  }).fail(function (xhr, status, error) {
-                      if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
-                          nfDialog.showOkDialog({
-                              headerText: 'Component Position',
-                              dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                          });
-                      } else {
-                          nfErrorHandler.handleAjaxError(xhr, status, error);
-                      }
-  
-                      deferred.reject();
-                  });
-              }).promise();
-          },
-  
-          /**
-           * Update the connection's position
-           *
-           * @param d     The connection
-           * @param delta The change in position
-           * @returns {*}
-           */
-          updateConnectionPosition: function (d, delta) {
-              // only update if necessary
-              if (d.bends.length === 0) {
-                  return null;
-              }
-  
-              // calculate the new bend points
-              var newBends = $.map(d.bends, function (bend) {
-                  return {
-                      x: bend.x + delta.x,
-                      y: bend.y + delta.y
-                  };
-              });
-  
-              var entity = {
-                  'revision': nfClient.getRevision(d),
-                  'component': {
-                      id: d.id,
-                      bends: newBends
-                  }
-              };
-  
-              // update the component positioning
-              return $.Deferred(function (deferred) {
-                  $.ajax({
-                      type: 'PUT',
-                      url: d.uri,
-                      data: JSON.stringify(entity),
-                      dataType: 'json',
-                      contentType: 'application/json'
-                  }).done(function (response) {
-                      // update the component
-                      nfConnection.set(response);
-  
-                      // resolve with an object so we can refresh when finished
-                      deferred.resolve({
-                          type: d.type,
-                          id: d.id
-                      });
-                  }).fail(function (xhr, status, error) {
-                      if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
-                          nfDialog.showOkDialog({
-                              headerText: 'Component Position',
-                              dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                          });
-                      } else {
-                          nfErrorHandler.handleAjaxError(xhr, status, error);
-                      }
-  
-                      deferred.reject();
-                  });
-              }).promise();
-          },
-  
-          /**
-           * Refresh the connections after dragging a component
-           *
-           * @param updates
-           */
-          refreshConnections: function (updates) {
-              if (updates.size() > 0) {
-                  // wait for all updates to complete
-                  $.when.apply(window, updates.values()).done(function () {
-                      var dragged = $.makeArray(arguments);
-                      var connections = d3.set();
-  
-                      // refresh this component
-                      $.each(dragged, function (_, component) {
-                          // check if the component in question is a connection
-                          if (component.type === 'Connection') {
-                              connections.add(component.id);
-                          } else {
-                              // get connections that need to be refreshed because its attached to this component
-                              var componentConnections = nfConnection.getComponentConnections(component.id);
-                              $.each(componentConnections, function (_, connection) {
-                                  connections.add(connection.id);
-                              });
-                          }
-                      });
-  
-                      // refresh the connections
-                      connections.forEach(function (connectionId) {
-                          nfConnection.refresh(connectionId);
-                      });
-                  }).always(function () {
-                      nfBirdseye.refresh();
-                  });
-              }
-          },
-  
-          /**
-             * Activates the drag behavior for the components in the specified selection.
-             *
-             * @param {selection} components
-             */
-            activate: function (components) {
-                components.classed('moveable', true).call(drag);
-            },
-    
-            /**
-             * Deactivates the drag behavior for the components in the specified selection.
-             *
-             * @param {selection} components
-             */
-            deactivate: function (components) {
-                components.classed('moveable', false).on('.drag', null);
-            }
-        };
-    
-      return nfDraggable;
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js
deleted file mode 100644
index 44ff136124b5..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js
+++ /dev/null
@@ -1,418 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Common',
-                'nf.Client',
-                'nf.CanvasUtils'],
-            function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
-                return (nf.Funnel = factory($, d3, nfCommon, nfClient, nfCanvasUtils));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Funnel =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.Common'),
-                require('nf.Client'),
-                require('nf.CanvasUtils')));
-    } else {
-        nf.Funnel = factory(root.$,
-            root.d3,
-            root.nf.Common,
-            root.nf.Client,
-            root.nf.CanvasUtils);
-    }
-}(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
-    'use strict';
-
-    var nfConnectable;
-    var nfDraggable;
-    var nfSelectable;
-    var nfContextMenu;
-
-    var dimensions = {
-        width: 48,
-        height: 48
-    };
-
-    // -----------------------------
-    // funnels currently on the graph
-    // -----------------------------
-
-    var funnelMap;
-
-    // -----------------------------------------------------------
-    // cache for components that are added/removed from the canvas
-    // -----------------------------------------------------------
-
-    var removedCache;
-    var addedCache;
-
-    // --------------------
-    // component containers
-    // --------------------
-
-    var funnelContainer;
-
-    // --------------------------
-    // privately scoped functions
-    // --------------------------
-
-    /**
-     * Selects the funnel elements against the current funnel map.
-     */
-    var select = function () {
-        return funnelContainer.selectAll('g.funnel').data(funnelMap.values(), function (d) {
-            return d.id;
-        });
-    };
-
-    /**
-     * Renders the funnels in the specified selection.
-     *
-     * @param {selection} entered           The selection of funnels to be rendered
-     * @param {boolean} selected             Whether the element should be selected
-     */
-    var renderFunnels = function (entered, selected) {
-        if (entered.empty()) {
-            return entered;
-        }
-
-        var funnel = entered.append('g')
-            .attr({
-                'id': function (d) {
-                    return 'id-' + d.id;
-                },
-                'class': 'funnel component'
-            })
-            .classed('selected', selected)
-            .call(nfCanvasUtils.position);
-
-        // funnel border
-        funnel.append('rect')
-            .attr({
-                'rx': 2,
-                'ry': 2,
-                'class': 'border',
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': function (d) {
-                    return d.dimensions.height;
-                },
-                'fill': 'transparent',
-                'stroke': 'transparent'
-            });
-
-        // funnel body
-        funnel.append('rect')
-            .attr({
-                'rx': 2,
-                'ry': 2,
-                'class': 'body',
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': function (d) {
-                    return d.dimensions.height;
-                },
-                'filter': 'url(#component-drop-shadow)',
-                'stroke-width': 0
-            });
-
-        // funnel icon
-        funnel.append('text')
-            .attr({
-                'class': 'funnel-icon',
-                'x': 9,
-                'y': 34
-            })
-            .text('\ue803');
-
-        // always support selection
-        funnel.call(nfSelectable.activate).call(nfContextMenu.activate);
-    };
-
-    /**
-     * Updates the funnels in the specified selection.
-     *
-     * @param {selection} updated               The funnels to be updated
-     */
-    var updateFunnels = function (updated) {
-        if (updated.empty()) {
-            return;
-        }
-
-        // funnel border authorization
-        updated.select('rect.border')
-            .classed('unauthorized', function (d) {
-                return d.permissions.canRead === false;
-            });
-
-        // funnel body authorization
-        updated.select('rect.body')
-            .classed('unauthorized', function (d) {
-                return d.permissions.canRead === false;
-            });
-
-        updated.each(function () {
-            var funnel = d3.select(this);
-
-            // update the component behavior as appropriate
-            nfCanvasUtils.editable(funnel, nfConnectable, nfDraggable);
-        });
-    };
-
-    /**
-     * Removes the funnels in the specified selection.
-     *
-     * @param {selection} removed               The funnels to be removed
-     */
-    var removeFunnels = function (removed) {
-        removed.remove();
-    };
-
-    var nfFunnel = {
-        /**
-         * Initializes of the Processor handler.
-         *
-         * @param nfConnectableRef   The nfConnectable module.
-         * @param nfDraggableRef   The nfDraggable module.
-         * @param nfSelectableRef   The nfSelectable module.
-         * @param nfContextMenuRef   The nfContextMenu module.
-         */
-        init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
-            nfConnectable = nfConnectableRef;
-            nfDraggable = nfDraggableRef;
-            nfSelectable = nfSelectableRef;
-            nfContextMenu = nfContextMenuRef;
-
-            funnelMap = d3.map();
-            removedCache = d3.map();
-            addedCache = d3.map();
-
-            // create the funnel container
-            funnelContainer = d3.select('#canvas').append('g')
-                .attr({
-                    'pointer-events': 'all',
-                    'class': 'funnels'
-                });
-        },
-
-        /**
-         * Adds the specified funnel entity.
-         *
-         * @param funnelEntities       The funnel
-         * @param options           Configuration options
-         */
-        add: function (funnelEntities, options) {
-            var selectAll = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-            }
-
-            // get the current time
-            var now = new Date().getTime();
-
-            var add = function (funnelEntity) {
-                addedCache.set(funnelEntity.id, now);
-
-                // add the funnel
-                funnelMap.set(funnelEntity.id, $.extend({
-                    type: 'Funnel',
-                    dimensions: dimensions
-                }, funnelEntity));
-            };
-
-            // determine how to handle the specified funnel status
-            if ($.isArray(funnelEntities)) {
-                $.each(funnelEntities, function (_, funnelEntity) {
-                    add(funnelEntity);
-                });
-            } else if (nfCommon.isDefinedAndNotNull(funnelEntities)) {
-                add(funnelEntities);
-            }
-
-            // apply the selection and handle new funnels
-            var selection = select();
-            selection.enter().call(renderFunnels, selectAll);
-            selection.call(updateFunnels);
-        },
-
-        /**
-         * Populates the graph with the specified funnels.
-         *
-         * @argument {object | array} funnelEntities                    The funnels to add
-         * @argument {object} options                Configuration options
-         */
-        set: function (funnelEntities, options) {
-            var selectAll = false;
-            var transition = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-            }
-
-            var set = function (proposedFunnelEntity) {
-                var currentFunnelEntity = funnelMap.get(proposedFunnelEntity.id);
-
-                // set the funnel if appropriate due to revision and wasn't previously removed
-                if (nfClient.isNewerRevision(currentFunnelEntity, proposedFunnelEntity) && !removedCache.has(proposedFunnelEntity.id)) {
-                    funnelMap.set(proposedFunnelEntity.id, $.extend({
-                        type: 'Funnel',
-                        dimensions: dimensions
-                    }, proposedFunnelEntity));
-                }
-            };
-
-            if ($.isArray(funnelEntities)) {
-                $.each(funnelMap.keys(), function (_, key) {
-                    var currentFunnelEntity = funnelMap.get(key);
-                    var isPresent = $.grep(funnelEntities, function (proposedFunnelEntity) {
-                        return proposedFunnelEntity.id === currentFunnelEntity.id;
-                    });
-
-                    // if the current funnel is not present and was not recently added, remove it
-                    if (isPresent.length === 0 && !addedCache.has(key)) {
-                        funnelMap.remove(key);
-                    }
-                });
-                $.each(funnelEntities, function (_, funnelEntity) {
-                    set(funnelEntity);
-                });
-            } else if (nfCommon.isDefinedAndNotNull(funnelEntities)) {
-                set(funnelEntities);
-            }
-
-            // apply the selection and handle all new processors
-            var selection = select();
-            selection.enter().call(renderFunnels, selectAll);
-            selection.call(updateFunnels).call(nfCanvasUtils.position, transition);
-            selection.exit().call(removeFunnels);
-        },
-
-        /**
-         * If the funnel id is specified it is returned. If no funnel id
-         * specified, all funnels are returned.
-         *
-         * @param {string} id
-         */
-        get: function (id) {
-            if (nfCommon.isUndefined(id)) {
-                return funnelMap.values();
-            } else {
-                return funnelMap.get(id);
-            }
-        },
-
-        /**
-         * If the funnel id is specified it is refresh according to the current
-         * state. If not funnel id is specified, all funnels are refreshed.
-         *
-         * @param {string} id      Optional
-         */
-        refresh: function (id) {
-            if (nfCommon.isDefinedAndNotNull(id)) {
-                d3.select('#id-' + id).call(updateFunnels);
-            } else {
-                d3.selectAll('g.funnel').call(updateFunnels);
-            }
-        },
-
-        /**
-         * Reloads the funnel state from the server and refreshes the UI.
-         * If the funnel is currently unknown, this function just returns.
-         *
-         * @param {string} id The funnel id
-         */
-        reload: function (id) {
-            if (funnelMap.has(id)) {
-                var funnelEntity = funnelMap.get(id);
-                return $.ajax({
-                    type: 'GET',
-                    url: funnelEntity.uri,
-                    dataType: 'json'
-                }).done(function (response) {
-                    nfFunnel.set(response);
-                });
-            }
-        },
-
-        /**
-         * Positions the component.
-         *
-         * @param {string} id   The id
-         */
-        position: function (id) {
-            d3.select('#id-' + id).call(nfCanvasUtils.position);
-        },
-
-        /**
-         * Removes the specified funnel.
-         *
-         * @param {array|string} funnelIds      The funnel id
-         */
-        remove: function (funnelIds) {
-            var now = new Date().getTime();
-
-            if ($.isArray(funnelIds)) {
-                $.each(funnelIds, function (_, funnelId) {
-                    removedCache.set(funnelId, now);
-                    funnelMap.remove(funnelId);
-                });
-            } else {
-                removedCache.set(funnelIds, now);
-                funnelMap.remove(funnelIds);
-            }
-
-            // apply the selection and handle all removed funnels
-            select().exit().call(removeFunnels);
-        },
-
-        /**
-         * Removes all processors.
-         */
-        removeAll: function () {
-            nfFunnel.remove(funnelMap.keys());
-        },
-
-        /**
-         * Expires the caches up to the specified timestamp.
-         *
-         * @param timestamp
-         */
-        expireCaches: function (timestamp) {
-            var expire = function (cache) {
-                cache.forEach(function (id, entryTimestamp) {
-                    if (timestamp > entryTimestamp) {
-                        cache.remove(id);
-                    }
-                });
-            };
-
-            expire(addedCache);
-            expire(removedCache);
-        }
-    };
-
-    return nfFunnel;
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
deleted file mode 100644
index f4ea6fb73194..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
+++ /dev/null
@@ -1,875 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-    /**
-     * Handles the upstream/downstream dialogs.
-     */
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.ErrorHandler',
-                  'nf.CanvasUtils'],
-              function ($, nfErrorHandler, nfCanvasUtils) {
-                  return (nf.GoTo = factory($, nfErrorHandler, nfCanvasUtils));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.GoTo =
-              factory(require('jquery'),
-                  require('nf.ErrorHandler'),
-                  require('nf.CanvasUtils')));
-      } else {
-          nf.GoTo = factory(root.$,
-              root.nf.ErrorHandler,
-              root.nf.CanvasUtils);
-      }
-  }(this, function ($, nfErrorHandler, nfCanvasUtils) {
-      'use strict';
-    
-        var config = {
-            urls: {
-                api: '../nifi-api',
-              processGroups: '../nifi-api/flow/process-groups/'
-            }
-        };
-        
-      var currentComponentId;
-      var currentComponentLabel;
-    
-        /**
-         * Adds a connection to the connections dialog.
-         *
-       * @param {string}  parentProcessGroupId
-       * @param {object}  connectionEntity
-       * @param {array}   processGroupEntities
-       * @param {array}   remoteProcessGroupEntities
-         */
-      var addConnection = function (parentProcessGroupId, connectionEntity, processGroupEntities, remoteProcessGroupEntities) {
-            var container = $('<div class="source-destination-connection"></div>').appendTo('#connections-container');
-    
-          if (connectionEntity.sourceType === 'OUTPUT_PORT') {
-              addSourceOutputPort(parentProcessGroupId, container, connectionEntity, processGroupEntities);
-          } else if (connectionEntity.sourceType === 'REMOTE_OUTPUT_PORT') {
-              addSourceRemoteOutputPort(parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities);
-            } else {
-              addSourceComponent(container, connectionEntity);
-            }
-    
-            var connectionEntry = $('<div class="connection-entry"></div>').appendTo(container);
-    
-            // format the connection name.. fall back to id
-          var connectionStyle = 'unset';
-          var connectionName = 'Connection';
-          if (connectionEntity.permissions.canRead === true) {
-              var formattedConnectionName = nfCanvasUtils.formatConnectionName(connectionEntity.component);
-              if (formattedConnectionName !== '') {
-                  connectionStyle = '';
-                  connectionName = formattedConnectionName;
-              }
-            }
-    
-            // connection
-          $('<div class="search-result-icon icon-connect"></div>').appendTo(connectionEntry);
-            $('<div class="connection-entry-name go-to-link"></div>').attr('title', connectionName).addClass(connectionStyle).text(connectionName).on('click', function () {
-                // go to the connection
-              nfCanvasUtils.showComponent(parentProcessGroupId, connectionEntity.id);
-    
-                // close the dialog
-                $('#connections-dialog').modal('hide');
-            }).appendTo(connectionEntry);
-    
-            // clear
-            $('<div class="clear"></div>').appendTo(connectionEntry);
-    
-          if (connectionEntity.destinationType === 'INPUT_PORT') {
-              addDestinationInputPort(parentProcessGroupId, container, connectionEntity, processGroupEntities);
-          } else if (connectionEntity.destinationType === 'REMOTE_INPUT_PORT') {
-              addDestinationRemoteInputPort(parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities);
-            } else {
-              addDestinationComponent(container, connectionEntity);
-            }
-    
-            // clear
-            $('<div class="clear"></div>').appendTo(container);
-        };
-    
-        /**
-         * Adds a destination component to the dialog.
-         *
-         * @param {jQuery} container                    The container to add to
-       * @param {object} connectionEntity             The connection to the downstream component
-         */
-      var addDestinationComponent = function (container, connectionEntity) {
-            // get the appropriate component icon
-          var smallIconClass = 'icon-funnel';
-          if (connectionEntity.destinationType === 'PROCESSOR') {
-              smallIconClass = 'icon-processor';
-          } else if (connectionEntity.destinationType === 'OUTPUT_PORT') {
-              smallIconClass = 'icon-port-out';
-          }
-  
-          // get the source name
-          var destinationName = connectionEntity.destinationId;
-          if (connectionEntity.permissions.canRead === true) {
-              destinationName = connectionEntity.component.destination.name;
-          } else if (currentComponentId === connectionEntity.destinationId) {
-              destinationName = currentComponentLabel;
-            }
-    
-            // component
-            var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
-            $('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(downstreamComponent);
-          $('<div class="destination-component-name go-to-link"></div>').attr('title', destinationName).text(destinationName).on('click', function () {
-                // go to the component
-              nfCanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
-    
-                // close the dialog
-                $('#connections-dialog').modal('hide');
-            }).appendTo(downstreamComponent);
-    
-            // clear
-            $('<div class="clear"></div>').appendTo(downstreamComponent);
-        };
-    
-        /**
-         * Adds a destination input port to the dialog.
-         *
-       * @param {string} parentProcessGroupId               The process group id
-         * @param {jQuery} container                    The container to add to
-       * @param {object} connectionEntity             The connection to the downstream input port
-       * @param {array}  processGroupEntities         The process groups
-         */
-      var addDestinationInputPort = function (parentProcessGroupId, container, connectionEntity, processGroupEntities) {
-          var processGroupEntity;
-          $.each(processGroupEntities, function (_, pge) {
-              if (connectionEntity.destinationGroupId === pge.id) {
-                  processGroupEntity = pge;
-                  return false;
-              }
-          });
-  
-          // get the group label
-          var groupLabel = getDisplayName(processGroupEntity);
-    
-            // process group
-            var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
-          $('<div class="search-result-icon icon-group"></div>').appendTo(downstreamComponent);
-          $('<div class="destination-component-name go-to-link"></div>').attr('title', groupLabel).text(groupLabel).on('click', function () {
-                // go to the remote process group
-              nfCanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
-    
-                // close the dialog
-                $('#connections-dialog').modal('hide');
-            }).appendTo(downstreamComponent);
-    
-            // clear
-            $('<div class="clear"></div>').appendTo(downstreamComponent);
-    
-          // get the port label
-          var portLabel = connectionEntity.destinationId;
-          if (connectionEntity.permissions.canRead === true) {
-              portLabel = connectionEntity.component.destination.name;
-          } else if (currentComponentId === connectionEntity.destinationId) {
-              portLabel = currentComponentLabel;
-          }
-    
-            // input port
-            var downstreamInputPort = $('<div class="destination-input-port"></div>').appendTo(downstreamComponent);
-          $('<div class="search-result-icon icon-port-in"></div>').appendTo(downstreamInputPort);
-          $('<div class="destination-input-port-name go-to-link"></div>').attr('title', portLabel).text(portLabel).on('click', function () {
-                // go to the remote process group
-              nfCanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
-    
-                // close the dialog
-                $('#connections-dialog').modal('hide');
-            }).appendTo(downstreamInputPort);
-    
-            // clear
-            $('<div class="clear"></div>').appendTo(downstreamComponent);
-        };
-    
-        /**
-         * Adds a destination remote input port to the dialog.
-         *
-       * @param {string} parentProcessGroupId               The process group id
-         * @param {jQuery} container                    The container to add to
-       * @param {object} connectionEntity             The connection to the downstream remote input port
-       * @param {array} remoteProcessGroupEntities    The remote process groups
-         */
-      var addDestinationRemoteInputPort = function (parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities) {
-          var remoteProcessGroupEntity;
-          $.each(remoteProcessGroupEntities, function (_, rpge) {
-              if (connectionEntity.destinationGroupId === rpge.id) {
-                  remoteProcessGroupEntity = rpge;
-                  return false;
-              }
-          });
-  
-          // get the group label
-          var remoteGroupLabel = getDisplayName(remoteProcessGroupEntity);
-    
-            // remote process group
-            var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
-          $('<div class="search-result-icon icon-group-remote"></div>').appendTo(downstreamComponent);
-          $('<div class="destination-component-name go-to-link"></div>').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () {
-                // go to the remote process group
-              nfCanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
-    
-                // close the dialog
-                $('#connections-dialog').modal('hide');
-            }).appendTo(downstreamComponent);
-    
-            // clear
-            $('<div class="clear"></div>').appendTo(downstreamComponent);
-    
-          // get the port label
-          var remotePortLabel = connectionEntity.destinationId;
-          if (connectionEntity.permissions.canRead === true) {
-              remotePortLabel = connectionEntity.component.destination.name;
-          } else if (currentComponentId === connectionEntity.destinationId) {
-              remotePortLabel = currentComponentLabel;
-          }
-    
-            // remote input port
-            var downstreamInputPort = $('<div class="destination-input-port"></div>').appendTo(downstreamComponent);
-          $('<div class="search-result-icon icon-port-in"></div>').appendTo(downstreamInputPort);
-          $('<div class="destination-input-port-name"></div>').attr('title', remotePortLabel).text(remotePortLabel).appendTo(downstreamInputPort);
-    
-            // clear
-            $('<div class="clear"></div>').appendTo(downstreamComponent);
-        };
-    
-        /**
-         * Adds a source component to the dialog.
-         *
-         * @param {jQuery} container                    The container to add to
-       * @param {object} connectionEntity             The connection to the upstream component
-         */
-      var addSourceComponent = function (container, connectionEntity) {
-            // get the appropriate component icon
-          var smallIconClass = 'icon-funnel';
-          if (connectionEntity.sourceType === 'PROCESSOR') {
-              smallIconClass = 'icon-processor';
-          } else if (connectionEntity.sourceType === 'INPUT_PORT') {
-              smallIconClass = 'icon-port-in';
-          }
-  
-          // get the source name
-          var sourceName = connectionEntity.sourceId;
-          if (connectionEntity.permissions.canRead === true) {
-              sourceName = connectionEntity.component.source.name;
-          } else if (currentComponentId === connectionEntity.sourceId) {
-              sourceName = currentComponentLabel;
-            }
-    
-            // component
-            var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
-            $('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(sourceComponent);
-          $('<div class="source-component-name go-to-link"></div>').attr('title', sourceName).text(sourceName).on('click', function () {
-                // go to the component
-              nfCanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
-    
-                // close the dialog
-                $('#connections-dialog').modal('hide');
-            }).appendTo(sourceComponent);
-    
-          // clear
-          $('<div class="clear"></div>').appendTo(sourceComponent);
-        };
-    
-        /**
-         * Adds a source output port to the dialog.
-         *
-       * @param {string} parentProcessGroupId               The process group id
-         * @param {jQuery} container                    The container to add to
-       * @param {object} connectionEntity             The connection
-       * @param {array} processGroupEntities          The process groups
-         */
-      var addSourceOutputPort = function (parentProcessGroupId, container, connectionEntity, processGroupEntities) {
-          var processGroupEntity;
-          $.each(processGroupEntities, function (_, pge) {
-              if (connectionEntity.sourceGroupId === pge.id) {
-                  processGroupEntity = pge;
-                  return false;
-              }
-          });
-  
-          // get the group label
-          var groupLabel = getDisplayName(processGroupEntity);
-    
-            // process group
-            var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
-          $('<div class="search-result-icon icon-group"></div>').appendTo(sourceComponent);
-          $('<div class="source-component-name go-to-link"></div>').attr('title', groupLabel).text(groupLabel).on('click', function () {
-                // go to the process group
-              nfCanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
-    
-                // close the dialog
-                $('#connections-dialog').modal('hide');
-            }).appendTo(sourceComponent);
-    
-          // clear
-            $('<div class="clear"></div>').appendTo(sourceComponent);
-    
-          // get the port label
-          var portLabel = connectionEntity.sourceId;
-          if (connectionEntity.permissions.canRead === true) {
-              portLabel = connectionEntity.component.source.name;
-          } else if (currentComponentId === connectionEntity.sourceId) {
-              portLabel = currentComponentLabel;
-          }
-  
-            var sourceOutputPort = $('<div class="source-output-port"></div>').appendTo(sourceComponent);
-          $('<div class="search-result-icon icon-port-out"></div>').appendTo(sourceOutputPort);
-          $('<div class="source-output-port-name go-to-link"></div>').attr('title', portLabel).text(portLabel).on('click', function () {
-                // go to the output port
-              nfCanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
-    
-                // close the dialog
-                $('#connections-dialog').modal('hide');
-            }).appendTo(sourceOutputPort);
-    
-          // clear
-          $('<div class="clear"></div>').appendTo(sourceComponent);
-        };
-    
-        /**
-         * Adds a source remote output port to the dialog.
-         *
-       * @param {string} parentProcessGroupId               The process group id
-         * @param {jQuery} container                    The container to add to
-       * @param {object} connectionEntity             The connection to the downstream remote output port
-       * @param {array} remoteProcessGroupEntities    The remote process groups
-       */
-      var addSourceRemoteOutputPort = function (parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities) {
-          var remoteProcessGroupEntity;
-          $.each(remoteProcessGroupEntities, function (_, rpge) {
-              if (connectionEntity.sourceGroupId === rpge.id) {
-                  remoteProcessGroupEntity = rpge;
-                  return false;
-              }
-          });
-  
-          // get the group label
-          var remoteGroupLabel = getDisplayName(remoteProcessGroupEntity);
-    
-            // remote process group
-            var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
-          $('<div class="search-result-icon icon-group-remote"></div>').appendTo(sourceComponent);
-          $('<div class="source-component-name go-to-link"></div>').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () {
-                // go to the remote process group
-              nfCanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
-    
-                // close the dialog
-                $('#connections-dialog').modal('hide');
-            }).appendTo(sourceComponent);
-    
-          // clear
-            $('<div class="clear"></div>').appendTo(sourceComponent);
-    
-          // get the port label
-          var remotePortLabel = connectionEntity.sourceId;
-          if (connectionEntity.permissions.canRead === true) {
-              remotePortLabel = connectionEntity.component.source.name;
-          } else if (connectionEntity.sourceId === currentComponentId) {
-              remotePortLabel = currentComponentLabel;
-          }
-  
-          // port markup
-            var sourceOutputPort = $('<div class="source-output-port"></div>').appendTo(sourceComponent);
-          $('<div class="search-result-icon icon-port-out"></div>').appendTo(sourceOutputPort);
-          $('<div class="source-output-port-name"></div>').attr('title', remotePortLabel).text(remotePortLabel).appendTo(sourceOutputPort);
-  
-          // clear
-          $('<div class="clear"></div>').appendTo(sourceComponent);
-      };
-  
-      /**
-       * Gets the display name for the specified entity.
-       *
-       * @param entity entity
-       * @returns display name
-       */
-      var getDisplayName = function (entity) {
-          if (entity.permissions.canRead === true) {
-              return entity.component.name;
-          } else if (currentComponentId === entity.id) {
-              return currentComponentLabel;
-          } else {
-              return entity.id;
-          }
-        };
-    
-        return {
-            /**
-             * Initializes the dialog.
-             */
-            init: function () {
-                $('#connections-dialog').modal({
-                    scrollableContentStyle: 'scrollable',
-                    buttons: [{
-                      buttonText: nf._.msg('nf-go-to.Close'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                $('#connections-dialog').modal('hide');
-                            }
-                        }
-                    }],
-                    handler: {
-                        close: function () {
-                            $('#connections-context').empty();
-                            $('#connections-container').empty();
-                        }
-                    }
-                });
-            },
-    
-            /**
-             * Shows components downstream from a processor.
-             *
-             * @param {selection} selection The processor selection
-             */
-            showDownstreamFromProcessor: function (selection) {
-              var processorEntity = selection.datum();
-              var connections = nfCanvasUtils.getComponentByType('Connection').get();
-              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-  
-              var processorLabel = getDisplayName(processorEntity);
-  
-              // record details of the current component
-              currentComponentId = processorEntity.id;
-              currentComponentLabel = processorLabel;
-    
-                // populate the downstream dialog
-                $('#connections-context')
-                  .append('<div class="search-result-icon icon-processor"></div>')
-                  .append($('<div class="connections-component-name"></div>').text(processorLabel))
-                    .append('<div class="clear"></div>');
-    
-                // add the destination for each connection
-              $.each(connections, function (_, connectionEntity) {
-                    // only show connections for which this selection is the source
-                  if (connectionEntity.sourceId === processorEntity.id) {
-                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                    }
-                });
-    
-                // ensure there are downstream components
-                if ($('#connections-container').is(':empty')) {
-                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoDownstreamComponents')+'</span>');
-                }
-    
-                // show the downstream dialog
-                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
-            },
-    
-            /**
-             * Shows components upstream from a processor.
-             *
-             * @param {selection} selection The processor selection
-             */
-            showUpstreamFromProcessor: function (selection) {
-              var processorEntity = selection.datum();
-              var connections = nfCanvasUtils.getComponentByType('Connection').get();
-              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-  
-              var processorLabel = getDisplayName(processorEntity);
-  
-              // record details of the current component
-              currentComponentId = processorEntity.id;
-              currentComponentLabel = processorLabel;
-                
-                // populate the upstream dialog
-                $('#connections-context')
-                  .append('<div class="search-result-icon icon-processor"></div>')
-                  .append($('<div class="connections-component-name"></div>').text(processorLabel))
-                    .append('<div class="clear"></div>');
-    
-                // add the source for each connection
-              $.each(connections, function (_, connectionEntity) {
-                    // only show connections for which this selection is the destination
-                  if (connectionEntity.destinationId === processorEntity.id) {
-                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                    }
-                });
-    
-                // ensure there are upstream components
-                if ($('#connections-container').is(':empty')) {
-                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
-                }
-    
-                // show the upstream dialog
-                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
-            },
-    
-            /**
-             * Shows components downstream from a process group or a remote process group.
-             *
-             * @param {selection} selection The process group or remote process group selection
-             */
-            showDownstreamFromGroup: function (selection) {
-              var groupEntity = selection.datum();
-              var connections = nfCanvasUtils.getComponentByType('Connection').get();
-              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-  
-              var iconStyle = 'icon-group';
-              if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                  iconStyle = 'icon-group-remote';
-              }
-  
-              var groupLabel = getDisplayName(groupEntity);
-  
-              // record details of the current component
-              currentComponentId = groupEntity.id;
-              currentComponentLabel = groupLabel;
-                
-                // populate the downstream dialog
-                $('#connections-context')
-                  .append($('<div class="search-result-icon"></div>').addClass(iconStyle))
-                  .append($('<div class="connections-component-name"></div>').text(groupLabel))
-                    .append('<div class="clear"></div>');
-    
-                // add the destination for each connection
-              $.each(connections, function (_, connectionEntity) {
-                    // only show connections for which this selection is the source
-                  if (connectionEntity.sourceGroupId === groupEntity.id) {
-                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                    }
-                });
-    
-                // ensure there are downstream components
-                if ($('#connections-container').is(':empty')) {
-                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoDownstreamComponents')+'</span>');
-                }
-    
-                // show the downstream dialog
-                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
-            },
-    
-            /**
-             * Shows components upstream from a process group or a remote process group.
-             *
-             * @param {selection} selection The process group or remote process group selection
-             */
-            showUpstreamFromGroup: function (selection) {
-              var groupEntity = selection.datum();
-              var connections = nfCanvasUtils.getComponentByType('Connection').get();
-              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-  
-              var iconStyle = 'icon-group';
-              if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                  iconStyle = 'icon-group-remote';
-              }
-  
-              var groupLabel = getDisplayName(groupEntity);
-  
-              // record details of the current component
-              currentComponentId = groupEntity.id;
-              currentComponentLabel = groupLabel;
-                
-                // populate the upstream dialog
-                $('#connections-context')
-                  .append($('<div class="search-result-icon"></div>').addClass(iconStyle))
-                  .append($('<div class="connections-component-name"></div>').text(groupLabel))
-                    .append('<div class="clear"></div>');
-    
-                // add the source for each connection
-              $.each(connections, function (_, connectionEntity) {
-                    // only show connections for which this selection is the destination
-                  if (connectionEntity.destinationGroupId === groupEntity.id) {
-                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                    }
-                });
-    
-                // ensure there are upstream components
-                if ($('#connections-container').is(':empty')) {
-                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
-                }
-    
-                // show the dialog
-                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
-            },
-    
-            /**
-             * Shows components downstream from an input port.
-             *
-             * @param {selection} selection The input port selection
-             */
-            showDownstreamFromInputPort: function (selection) {
-              var portEntity = selection.datum();
-              var connections = nfCanvasUtils.getComponentByType('Connection').get();
-              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-  
-              var portLabel = getDisplayName(portEntity);
-  
-              // record details of the current component
-              currentComponentId = portEntity.id;
-              currentComponentLabel = portLabel;
-                
-                // populate the downstream dialog
-                $('#connections-context')
-                  .append('<div class="search-result-icon icon-port-in"></div>')
-                  .append($('<div class="connections-component-name"></div>').text(portLabel))
-                    .append('<div class="clear"></div>');
-    
-                // add the destination for each connection
-              $.each(connections, function (_, connectionEntity) {
-                    // only show connections for which this selection is the source
-                  if (connectionEntity.sourceId === portEntity.id) {
-                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                    }
-                });
-    
-                // ensure there are downstream components
-                if ($('#connections-container').is(':empty')) {
-                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoDownstreamComponents')+'</span>');
-                }
-    
-                // show the downstream dialog
-                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
-            },
-    
-            /**
-             * Shows components upstream from an input port.
-             *
-             * @param {selection} selection The input port selection
-             */
-            showUpstreamFromInputPort: function (selection) {
-              var portEntity = selection.datum();
-    
-                $.ajax({
-                    type: 'GET',
-                  url: config.urls.processGroups + encodeURIComponent(nfCanvasUtils.getParentGroupId()),
-                    dataType: 'json'
-                }).done(function (response) {
-                  var flow = response.processGroupFlow.flow;
-                  var connections = flow.connections;
-                  var processGroups = flow.processGroups;
-                  var remoteProcessGroups = flow.remoteProcessGroups;
-  
-                  var portLabel = getDisplayName(portEntity);
-  
-                  // record details of the current component
-                  currentComponentId = portEntity.id;
-                  currentComponentLabel = portLabel;
-                    
-                    // populate the upstream dialog
-                    $('#connections-context')
-                      .append('<div class="search-result-icon icon-group"></div>')
-                      .append($('<div class="connections-component-name"></div>').text(nfCanvasUtils.getGroupName()))
-                        .append('<div class="clear"></div>')
-                      .append('<div class="search-result-icon icon-port-in" style="margin-left: 20px;"></div>')
-                      .append($('<div class="connections-component-name"></div>').text(portLabel))
-                        .append('<div class="clear"></div>');
-    
-                    // add the source for each connection
-                  $.each(connections, function (_, connectionEntity) {
-                        // only show connections for which this selection is the destination
-                      if (connectionEntity.destinationId === portEntity.id) {
-                          addConnection(nfCanvasUtils.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                        }
-                    });
-    
-                    // ensure there are upstream components
-                    if ($('#connections-container').is(':empty')) {
-                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
-                    }
-    
-                    // show the upstream dialog
-                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
-              }).fail(nfErrorHandler.handleAjaxError);
-            },
-    
-            /**
-             * Shows components downstream from an output port.
-             *
-             * @param {selection} selection The output port selection
-             */
-            showDownstreamFromOutputPort: function (selection) {
-              var portEntity = selection.datum();
-    
-                $.ajax({
-                    type: 'GET',
-                  url: config.urls.processGroups + encodeURIComponent(nfCanvasUtils.getParentGroupId()),
-                    dataType: 'json'
-                }).done(function (response) {
-                  var flow = response.processGroupFlow.flow;
-                  var connections = flow.connections;
-                  var processGroups = flow.processGroups;
-                  var remoteProcessGroups = flow.remoteProcessGroups;
-  
-                  var portLabel = getDisplayName(portEntity);
-  
-                  // record details of the current component
-                  currentComponentId = portEntity.id;
-                  currentComponentLabel = portLabel;
-                    
-                    // populate the downstream dialog
-                    $('#connections-context')
-                      .append('<div class="search-result-icon icon-group"></div>')
-                      .append($('<div class="connections-component-name"></div>').text(nfCanvasUtils.getGroupName()))
-                        .append('<div class="clear"></div>')
-                      .append('<div class="search-result-icon icon-port-out" style="margin-left: 20px;"></div>')
-                      .append($('<div class="connections-component-name"></div>').text(portLabel))
-                        .append('<div class="clear"></div>');
-    
-                    // add the destination for each connection
-                  $.each(connections, function (_, connectionEntity) {
-                        // only show connections for which this selection is the source
-                      if (connectionEntity.sourceId === portEntity.id) {
-                          addConnection(nfCanvasUtils.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                        }
-                    });
-    
-                    // ensure there are downstream components
-                    if ($('#connections-container').is(':empty')) {
-                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.DownstreamConnections')+'</span>');
-                    }
-    
-                    // show the downstream dialog
-                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
-              }).fail(nfErrorHandler.handleAjaxError);
-            },
-    
-            /**
-             * Shows components upstream from an output port.
-             *
-             * @param {selection} selection The output port selection
-             */
-            showUpstreamFromOutputPort: function (selection) {
-              var portEntity = selection.datum();
-              var connections = nfCanvasUtils.getComponentByType('Connection').get();
-              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-  
-              var portLabel = getDisplayName(portEntity);
-              
-              // record details of the current component
-              currentComponentId = portEntity.id;
-              currentComponentLabel = portLabel;
-                
-                // populate the upstream dialog
-                $('#connections-context')
-                  .append('<div class="search-result-icon icon-port-out"></div>')
-                  .append($('<div class="connections-component-name"></div>').text(portLabel))
-                    .append('<div class="clear"></div>');
-    
-                // add the source for each connection
-              $.each(connections, function (_, connectionEntity) {
-                    // only show connections for which this selection is the destination
-                  if (connectionEntity.destinationId === portEntity.id) {
-                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                    }
-                });
-    
-                // ensure there are upstream components
-                if ($('#connections-container').is(':empty')) {
-                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
-                }
-    
-                // show the upstream dialog
-                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
-            },
-    
-            /**
-             * Shows components downstream from a funnel.
-             *
-             * @param {selection} selection The funnel selection
-             */
-            showDownstreamFromFunnel: function (selection) {
-              var funnelEntity = selection.datum();
-              var connections = nfCanvasUtils.getComponentByType('Connection').get();
-              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-    
-              // record details of the current component
-              currentComponentId = funnelEntity.id;
-              currentComponentLabel = 'Funnel';
-                
-                // populate the downstream dialog
-              $('#connections-context')
-                  .append('<div class="search-result-icon icon-funnel"></div>')
-                  .append($('<div class="connections-component-name"></div>').text('Funnel'))
-                  .append('<div class="clear"></div>');
-    
-                // add the destination for each connection
-              $.each(connections, function (_, connectionEntity) {
-                    // only show connections for which this selection is the source
-                  if (connectionEntity.sourceId === funnelEntity.id) {
-                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                    }
-                });
-    
-                // ensure there are downstream components
-                if ($('#connections-container').is(':empty')) {
-                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoDownstreamComponents')+'</span>');
-                }
-    
-                // show the downstream dialog
-                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
-            },
-    
-            /**
-             * Shows components upstream from a funnel.
-             *
-             * @param {selection} selection The funnel selection
-             */
-            showUpstreamFromFunnel: function (selection) {
-              var funnelEntity = selection.datum();
-              var connections = nfCanvasUtils.getComponentByType('Connection').get();
-              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
-              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
-    
-              // record details of the current component
-              currentComponentId = funnelEntity.id;
-              currentComponentLabel = 'Funnel';
-                
-                // populate the upstream dialog
-              $('#connections-context')
-                  .append('<div class="search-result-icon icon-funnel"></div>')
-                  .append($('<div class="upstream-destination-name"></div>').text('Funnel'))
-                  .append('<div class="clear"></div>');
-    
-                // add the source for each connection
-              $.each(connections, function (_, connectionEntity) {
-                    // only show connections for which this selection is the destination
-                  if (connectionEntity.destinationId === funnelEntity.id) {
-                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
-                    }
-                });
-    
-                // ensure there are upstream components
-                if ($('#connections-container').is(':empty')) {
-                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
-                }
-    
-                // show the upstream dialog
-                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
-            }
-        };
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js
deleted file mode 100644
index 394bf42a2cbe..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js
+++ /dev/null
@@ -1,423 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Common',
-                'nf.ng.Bridge',
-                'nf.Label',
-                'nf.Funnel',
-                'nf.Port',
-                'nf.RemoteProcessGroup',
-                'nf.ProcessGroup',
-                'nf.Processor',
-                'nf.Connection',
-                'nf.ConnectionConfiguration',
-                'nf.CanvasUtils',
-                'nf.Connectable',
-                'nf.Draggable',
-                'nf.Selectable',
-                'nf.ContextMenu'],
-            function ($, d3, nfCommon, nfNgBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, nfConnectionConfiguration, nfCanvasUtils, nfConnectable, nfDraggable, nfSelectable, nfContextMenu) {
-                return (nf.Graph = factory($, d3, nfCommon, nfNgBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, nfConnectionConfiguration, nfCanvasUtils, nfConnectable, nfDraggable, nfSelectable, nfContextMenu));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Graph =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.Common'),
-                require('nf.ng.Bridge'),
-                require('nf.Label'),
-                require('nf.Funnel'),
-                require('nf.Port'),
-                require('nf.RemoteProcessGroup'),
-                require('nf.ProcessGroup'),
-                require('nf.Processor'),
-                require('nf.Connection'),
-                require('nf.ConnectionConfiguration'),
-                require('nf.CanvasUtils'),
-                require('nf.Connectable'),
-                require('nf.Draggable'),
-                require('nf.Selectable'),
-                require('nf.ContextMenu')));
-    } else {
-        nf.Graph = factory(root.$,
-            root.d3,
-            root.nf.Common,
-            root.nf.ng.Bridge,
-            root.nf.Label,
-            root.nf.Funnel,
-            root.nf.Port,
-            root.nf.RemoteProcessGroup,
-            root.nf.ProcessGroup,
-            root.nf.Processor,
-            root.nf.Connection,
-            root.nf.ConnectionConfiguration,
-            root.nf.CanvasUtils,
-            root.nf.Connectable,
-            root.nf.Draggable,
-            root.nf.Selectable,
-            root.nf.ContextMenu);
-    }
-}(this, function ($, d3, nfCommon, nfNgBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, nfConnectionConfiguration, nfCanvasUtils, nfConnectable, nfDraggable, nfSelectable, nfContextMenu) {
-    'use strict';
-
-    var combinePorts = function (contents) {
-        if (nfCommon.isDefinedAndNotNull(contents.inputPorts) && nfCommon.isDefinedAndNotNull(contents.outputPorts)) {
-            return contents.inputPorts.concat(contents.outputPorts);
-        } else if (nfCommon.isDefinedAndNotNull(contents.inputPorts)) {
-            return contents.inputPorts;
-        } else if (nfCommon.isDefinedAndNotNull(contents.outputPorts)) {
-            return contents.outputPorts;
-        } else {
-            return [];
-        }
-    };
-
-    var combinePortStatus = function (status) {
-        if (nfCommon.isDefinedAndNotNull(status.inputPortStatusSnapshots) && nfCommon.isDefinedAndNotNull(status.outputPortStatusSnapshots)) {
-            return status.inputPortStatusSnapshots.concat(status.outputPortStatusSnapshots);
-        } else if (nfCommon.isDefinedAndNotNull(status.inputPortStatusSnapshots)) {
-            return status.inputPortStatusSnapshots;
-        } else if (nfCommon.isDefinedAndNotNull(status.outputPortStatusSnapshots)) {
-            return status.outputPortStatusSnapshots;
-        } else {
-            return [];
-        }
-    };
-
-    /**
-     * Updates component visibility based on their proximity to the screen's viewport.
-     */
-    var updateComponentVisibility = function () {
-        var canvasContainer = $('#canvas-container');
-        var translate = nfCanvasUtils.translateCanvasView();
-        var scale = nfCanvasUtils.scaleCanvasView();
-
-        // scale the translation
-        translate = [translate[0] / scale, translate[1] / scale];
-
-        // get the normalized screen width and height
-        var screenWidth = canvasContainer.width() / scale;
-        var screenHeight = canvasContainer.height() / scale;
-
-        // calculate the screen bounds one screens worth in each direction
-        var screenLeft = -translate[0] - screenWidth;
-        var screenTop = -translate[1] - screenHeight;
-        var screenRight = screenLeft + (screenWidth * 3);
-        var screenBottom = screenTop + (screenHeight * 3);
-
-        // detects whether a component is visible and should be rendered
-        var isComponentVisible = function (d) {
-            if (!nfCanvasUtils.shouldRenderPerScale()) {
-                return false;
-            }
-
-            var left = d.position.x;
-            var top = d.position.y;
-            var right = left + d.dimensions.width;
-            var bottom = top + d.dimensions.height;
-
-            // determine if the component is now visible
-            return screenLeft < right && screenRight > left && screenTop < bottom && screenBottom > top;
-        };
-
-        // detects whether a connection is visible and should be rendered
-        var isConnectionVisible = function (d) {
-            if (!nfCanvasUtils.shouldRenderPerScale()) {
-                return false;
-            }
-
-            var x, y;
-            if (d.bends.length > 0) {
-                var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1);
-                x = d.bends[i].x;
-                y = d.bends[i].y;
-            } else {
-                x = (d.start.x + d.end.x) / 2;
-                y = (d.start.y + d.end.y) / 2;
-            }
-
-            return screenLeft < x && screenRight > x && screenTop < y && screenBottom > y;
-        };
-
-        // marks the specific component as visible and determines if its entering or leaving visibility
-        var updateVisibility = function (d, isVisible) {
-            var selection = d3.select('#id-' + d.id);
-            var visible = isVisible(d);
-            var wasVisible = selection.classed('visible');
-
-            // mark the selection as appropriate
-            selection.classed('visible', visible)
-                .classed('entering', function () {
-                    return visible && !wasVisible;
-                }).classed('leaving', function () {
-                return !visible && wasVisible;
-            });
-        };
-
-        // get the all components
-        var graph = nfGraph.get();
-
-        // update the visibility for each component
-        $.each(graph.processors, function (_, d) {
-            updateVisibility(d, isComponentVisible);
-        });
-        $.each(graph.ports, function (_, d) {
-            updateVisibility(d, isComponentVisible);
-        });
-        $.each(graph.processGroups, function (_, d) {
-            updateVisibility(d, isComponentVisible);
-        });
-        $.each(graph.remoteProcessGroups, function (_, d) {
-            updateVisibility(d, isComponentVisible);
-        });
-        $.each(graph.connections, function (_, d) {
-            updateVisibility(d, isConnectionVisible);
-        });
-    };
-
-    var nfGraph = {
-        init: function () {
-            // initialize the object responsible for each type of component
-            nfLabel.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
-            nfFunnel.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
-            nfPort.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
-            nfRemoteProcessGroup.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
-            nfProcessGroup.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
-            nfProcessor.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
-            nfConnection.init(nfSelectable, nfContextMenu, nfConnectionConfiguration);
-
-            // load the graph
-            return nfProcessGroup.enterGroup(nfCanvasUtils.getGroupId());
-        },
-
-        /**
-         * Populates the graph with the resources defined in the response.
-         *
-         * @argument {object} processGroupContents      The contents of the process group
-         * @argument {boolean} selectAll                Whether or not to select the new contents
-         */
-        add: function (processGroupContents, options) {
-            var selectAll = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-            }
-
-            // if we are going to select the new components, deselect the previous selection
-            if (selectAll) {
-                nfCanvasUtils.getSelection().classed('selected', false);
-            }
-
-            // merge the ports together
-            var ports = combinePorts(processGroupContents);
-
-            // add the components to the responsible object
-            nfLabel.add(processGroupContents.labels, options);
-            nfFunnel.add(processGroupContents.funnels, options);
-            nfRemoteProcessGroup.add(processGroupContents.remoteProcessGroups, options);
-            nfPort.add(ports, options);
-            nfProcessGroup.add(processGroupContents.processGroups, options);
-            nfProcessor.add(processGroupContents.processors, options);
-            nfConnection.add(processGroupContents.connections, options);
-
-            // inform Angular app if the selection is changing
-            if (selectAll) {
-                nfNgBridge.digest();
-            }
-        },
-
-        /**
-         * Populates the graph with the resources defined in the response.
-         *
-         * @argument {object} processGroupContents      The contents of the process group
-         * @argument {object} options                   Configuration options
-         */
-        set: function (processGroupContents, options) {
-            var selectAll = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-            }
-
-            // if we are going to select the new components, deselect the previous selection
-            if (selectAll) {
-                nfCanvasUtils.getSelection().classed('selected', false);
-            }
-
-            // merge the ports together
-            var ports = combinePorts(processGroupContents);
-
-            // add the components to the responsible object
-            nfLabel.set(processGroupContents.labels, options);
-            nfFunnel.set(processGroupContents.funnels, options);
-            nfRemoteProcessGroup.set(processGroupContents.remoteProcessGroups, options);
-            nfPort.set(ports, options);
-            nfProcessGroup.set(processGroupContents.processGroups, options);
-            nfProcessor.set(processGroupContents.processors, options);
-            nfConnection.set(processGroupContents.connections, options);
-
-            // inform Angular app if the selection is changing
-            if (selectAll) {
-                nfNgBridge.digest();
-            }
-        },
-
-        /**
-         * Expires any caches prior to setting updated components via .set(...) above. This is necessary
-         * if an ajax request returns out of order. The caches will ensure that added/removed components
-         * will not be removed/added due to process group refreshes. Whether or not a component is present
-         * is ambiguous whether the request is from before the component was added/removed or if another
-         * client has legitimately removed/added it. Once a request is initiated after the component is
-         * added/removed we can remove the entry from the cache.
-         *
-         * @param timestamp expire caches before
-         */
-        expireCaches: function (timestamp) {
-            nfLabel.expireCaches(timestamp);
-            nfFunnel.expireCaches(timestamp);
-            nfRemoteProcessGroup.expireCaches(timestamp);
-            nfPort.expireCaches(timestamp);
-            nfProcessGroup.expireCaches(timestamp);
-            nfProcessor.expireCaches(timestamp);
-            nfConnection.expireCaches(timestamp);
-        },
-
-        /**
-         * Gets the components currently on the canvas.
-         */
-        get: function () {
-            return {
-                labels: nfLabel.get(),
-                funnels: nfFunnel.get(),
-                ports: nfPort.get(),
-                remoteProcessGroups: nfRemoteProcessGroup.get(),
-                processGroups: nfProcessGroup.get(),
-                processors: nfProcessor.get(),
-                connections: nfConnection.get()
-            };
-        },
-
-        /**
-         * Gets a graph component `type`.
-         *
-         * @param type  The type of component.
-         */
-        getComponentByType: function (type) {
-            switch (type)
-            {
-                case "Label":
-                    return nfLabel;
-                    break;
-
-                case "Funnel":
-                    return nfFunnel;
-                    break;
-
-                case "Port":
-                    return nfPort;
-                    break;
-
-                case "RemoteProcessGroup":
-                    return nfRemoteProcessGroup;
-                    break;
-
-                case "ProcessGroup":
-                    return nfProcessGroup;
-                    break;
-
-                case "Processor":
-                    return nfProcessor;
-                    break;
-
-                case "Connection":
-                    return nfConnection;
-                    break;
-
-                default:
-                    throw new Error('Unknown component type.');
-                    break;
-            }
-        },
-
-        /**
-         * Clears all the components currently on the canvas. This function does not automatically refresh.
-         */
-        removeAll: function () {
-            // remove all the components
-            nfLabel.removeAll();
-            nfFunnel.removeAll();
-            nfPort.removeAll();
-            nfRemoteProcessGroup.removeAll();
-            nfProcessGroup.removeAll();
-            nfProcessor.removeAll();
-            nfConnection.removeAll();
-        },
-
-        /**
-         * Refreshes all components currently on the canvas.
-         */
-        pan: function () {
-            // refresh the components
-            nfPort.pan();
-            nfRemoteProcessGroup.pan();
-            nfProcessGroup.pan();
-            nfProcessor.pan();
-            nfConnection.pan();
-        },
-
-        /**
-         * Updates component visibility based on the current translation/scale.
-         */
-        updateVisibility: function () {
-            updateComponentVisibility();
-            nfGraph.pan();
-        },
-
-        /**
-         * Gets the currently selected components and connections.
-         *
-         * @returns {selection}     The currently selected components and connections
-         */
-        getSelection: function () {
-            return d3.selectAll('g.component.selected, g.connection.selected');
-        },
-
-        /**
-         * Reload the component on the canvas.
-         *
-         * @param component     The component.
-         */
-        reload: function (component) {
-            var componentData = component.datum();
-            if (componentData.permissions.canRead) {
-                if (nfCanvasUtils.isProcessor(component)) {
-                    nfProcessor.reload(componentData.id);
-                } else if (nfCanvasUtils.isInputPort(component)) {
-                    nfPort.reload(componentData.id);
-                } else if (nfCanvasUtils.isRemoteProcessGroup(component)) {
-                    nfRemoteProcessGroup.reload(componentData.id);
-                }
-            }
-        }
-    };
-
-    return nfGraph;
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
deleted file mode 100644
index dedf04fdca60..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
+++ /dev/null
@@ -1,198 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.ErrorHandler',
-                  'nf.Common',
-                  'nf.Client',
-                  'nf.CanvasUtils',
-                  'nf.ng.Bridge',
-                  'nf.Label'],
-              function ($, d3, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfLabel) {
-                  return (nf.LabelConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfLabel));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.LabelConfiguration =
-              factory(require('jquery'),
-                  require('d3'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Common'),
-                  require('nf.Client'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ng.Bridge'),
-                  require('nf.Label')));
-      } else {
-          nf.LabelConfiguration = factory(root.$,
-              root.d3,
-              root.nf.ErrorHandler,
-              root.nf.Common,
-              root.nf.Client,
-              root.nf.CanvasUtils,
-              root.nf.ng.Bridge,
-              root.nf.Label);
-      }
-  }(this, function ($, d3, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfLabel) {
-      'use strict';
-    
-        var labelId = '';
-    
-        return {
-            /**
-             * Initializes the label details dialog.
-             */
-            init: function () {
-                // make the new property dialog draggable
-                $('#label-configuration').modal({
-                    scrollableContentStyle: 'scrollable',
-                  headerText: nf._.msg('nf-label-configuration.ConfigureLabel'),
-                    buttons: [{
-                      buttonText: nf._.msg('nf-label-configuration.Apply'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                // get the label data
-                                var labelData = d3.select('#id-' + labelId).datum();
-    
-                                // get the new values
-                                var labelValue = $('#label-value').val();
-                                var fontSize = $('#label-font-size').combo('getSelectedOption');
-    
-                                // build the label entity
-                                var labelEntity = {
-                                  'revision': nfClient.getRevision(labelData),
-                                    'component': {
-                                        'id': labelId,
-                                        'label': labelValue,
-                                        'style': {
-                                            'font-size': fontSize.value
-                                        }
-                                    }
-                                };
-    
-                                // save the new label value
-                                $.ajax({
-                                    type: 'PUT',
-                                    url: labelData.uri,
-                                    data: JSON.stringify(labelEntity),
-                                    dataType: 'json',
-                                    contentType: 'application/json'
-                                }).done(function (response) {
-                                    // get the label out of the response
-                                  nfLabel.set(response);
-    
-                                    // inform Angular app values have changed
-                                  nfNgBridge.digest();
-                              }).fail(nfErrorHandler.handleAjaxError);
-    
-                                // reset and hide the dialog
-                                this.modal('hide');
-                            }
-                        }
-                    },
-                        {
-                          buttonText: nf._.msg('nf-label-configuration.Cancel'),
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                    this.modal('hide');
-                                }
-                            }
-                        }],
-                    handler: {
-                        close: function () {
-                            labelId = '';
-                        }
-                    }
-                });
-    
-                // create the available sizes
-                var sizes = [];
-                for (var i = 12; i <= 24; i += 2) {
-                    sizes.push({
-                        text: i + 'px',
-                        value: i + 'px'
-                    });
-                }
-    
-                // initialize the font size combo
-                $('#label-font-size').combo({
-                    options: sizes,
-                    selectedOption: {
-                        value: '12px'
-                    },
-                    select: function (option) {
-                        var labelValue = $('#label-value');
-    
-                        // reset the value to trigger IE to update, otherwise the
-                        // new line height wasn't being picked up
-                        labelValue.css({
-                            'font-size': option.value,
-                            'line-height': option.value
-                        }).val(labelValue.val());
-                    }
-                });
-            },
-    
-            /**
-             * Shows the configuration for the specified label.
-             *
-             * @argument {selection} selection      The selection
-             */
-            showConfiguration: function (selection) {
-              if (nfCanvasUtils.isLabel(selection)) {
-                    var selectionData = selection.datum();
-    
-                    // get the label value
-                    var labelValue = '';
-                  if (nfCommon.isDefinedAndNotNull(selectionData.component.label)) {
-                        labelValue = selectionData.component.label;
-                    }
-    
-                    // get the font size
-                    var fontSize = '12px';
-                  if (nfCommon.isDefinedAndNotNull(selectionData.component.style['font-size'])) {
-                        fontSize = selectionData.component.style['font-size'];
-                    }
-    
-                    // store the label uri
-                    labelId = selectionData.id;
-    
-                    // populate the dialog
-                    $('#label-value').val(labelValue);
-                    $('#label-font-size').combo('setSelectedOption', {
-                        value: fontSize
-                    });
-    
-                    // show the detail dialog
-                    $('#label-configuration').modal('show');
-                }
-            }
-        };
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
deleted file mode 100644
index 382b7e0bfce3..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
+++ /dev/null
@@ -1,617 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Common',
-                'nf.Client',
-                'nf.CanvasUtils'],
-            function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
-                return (nf.Label = factory($, d3, nfCommon, nfClient, nfCanvasUtils));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Label =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.Common'),
-                require('nf.Client'),
-                require('nf.CanvasUtils')));
-    } else {
-        nf.Label = factory(root.$,
-            root.d3,
-            root.nf.Common,
-            root.nf.Client,
-            root.nf.CanvasUtils);
-    }
-}(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
-    'use strict';
-
-    var nfConnectable;
-    var nfDraggable;
-    var nfSelectable;
-    var nfContextMenu;
-
-    var dimensions = {
-        width: 150,
-        height: 150
-    };
-
-    var MIN_HEIGHT = 20;
-    var MIN_WIDTH = 64;
-
-    // -----------------------------
-    // labels currently on the graph
-    // -----------------------------
-
-    var labelMap;
-
-    // -----------------------------------------------------------
-    // cache for components that are added/removed from the canvas
-    // -----------------------------------------------------------
-
-    var removedCache;
-    var addedCache;
-
-    // --------------------
-    // component containers
-    // --------------------
-
-    var labelContainer;
-
-    // ---------------------------------
-    // drag handler for the label points
-    // ---------------------------------
-
-    var labelPointDrag;
-
-    // --------------------------
-    // privately scoped functions
-    // --------------------------
-
-    /**
-     * Selects the labels elements against the current label map.
-     */
-    var select = function () {
-        return labelContainer.selectAll('g.label').data(labelMap.values(), function (d) {
-            return d.id;
-        });
-    };
-
-    /**
-     * Renders the labels in the specified selection.
-     *
-     * @param {selection} entered           The selection of labels to be rendered
-     * @param {boolean} selected            Whether the label should be selected
-     */
-    var renderLabels = function (entered, selected) {
-        if (entered.empty()) {
-            return;
-        }
-
-        var label = entered.append('g')
-            .attr({
-                'id': function (d) {
-                    return 'id-' + d.id;
-                },
-                'class': 'label component'
-            })
-            .classed('selected', selected)
-            .call(nfCanvasUtils.position);
-
-        // label border
-        label.append('rect')
-            .attr({
-                'class': 'border',
-                'fill': 'transparent',
-                'stroke': 'transparent'
-            });
-
-        // label 
-        label.append('rect')
-            .attr({
-                'class': 'body',
-                'filter': 'url(#component-drop-shadow)',
-                'stroke-width': 0
-            });
-
-        // label value
-        label.append('text')
-            .attr({
-                'xml:space': 'preserve',
-                'font-weight': 'bold',
-                'fill': 'black',
-                'class': 'label-value'
-            });
-
-        // always support selecting
-        label.call(nfSelectable.activate).call(nfContextMenu.activate);
-    };
-
-    /**
-     * Updates the labels in the specified selection.
-     *
-     * @param {selection} updated               The labels to be updated
-     */
-    var updateLabels = function (updated) {
-        if (updated.empty()) {
-            return;
-        }
-
-        // update the border using the configured color
-        updated.select('rect.border')
-            .attr({
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': function (d) {
-                    return d.dimensions.height;
-                }
-            })
-            .classed('unauthorized', function (d) {
-                return d.permissions.canRead === false;
-            });
-
-        // update the body fill using the configured color
-        updated.select('rect.body')
-            .attr({
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': function (d) {
-                    return d.dimensions.height;
-                }
-            })
-            .style('fill', function (d) {
-                if (!d.permissions.canRead) {
-                    return null;
-                }
-
-                var color = nfLabel.defaultColor();
-
-                // use the specified color if appropriate
-                if (nfCommon.isDefinedAndNotNull(d.component.style['background-color'])) {
-                    color = d.component.style['background-color'];
-                }
-
-                return color;
-            })
-            .classed('unauthorized', function (d) {
-                return d.permissions.canRead === false;
-            });
-
-        // go through each label being updated
-        updated.each(function (d) {
-            var label = d3.select(this);
-
-            // update the component behavior as appropriate
-            nfCanvasUtils.editable(label, nfConnectable, nfDraggable);
-
-            // update the label
-            var labelText = label.select('text.label-value');
-            var labelPoint = label.selectAll('rect.labelpoint');
-            if (d.permissions.canRead) {
-                // udpate the font size
-                labelText.attr('font-size', function () {
-                    var fontSize = '12px';
-
-                    // use the specified color if appropriate
-                    if (nfCommon.isDefinedAndNotNull(d.component.style['font-size'])) {
-                        fontSize = d.component.style['font-size'];
-                    }
-
-                    return fontSize;
-                });
-
-                // remove the previous label value
-                labelText.selectAll('tspan').remove();
-
-                // parse the lines in this label
-                var lines = [];
-                if (nfCommon.isDefinedAndNotNull(d.component.label)) {
-                    lines = d.component.label.split('\n');
-                } else {
-                    lines.push('');
-                }
-
-                var color = nfLabel.defaultColor();
-
-                // use the specified color if appropriate
-                if (nfCommon.isDefinedAndNotNull(d.component.style['background-color'])) {
-                    color = d.component.style['background-color'];
-                }
-
-                // add label value
-                $.each(lines, function (i, line) {
-                    labelText.append('tspan')
-                        .attr('x', '0.4em')
-                        .attr('dy', '1.2em')
-                        .text(function () {
-                            return line;
-                        })
-                        .style('fill', function (d) {
-                            return nfCommon.determineContrastColor(
-                                nfCommon.substringAfterLast(
-                                    color, '#'));
-                        });
-                });
-
-
-                // -----------
-                // labelpoints
-                // -----------
-
-                if (d.permissions.canWrite) {
-                    var pointData = [
-                        {x: d.dimensions.width, y: d.dimensions.height}
-                    ];
-                    var points = labelPoint.data(pointData);
-
-                    // create a point for the end
-                    points.enter().append('rect')
-                        .attr({
-                            'class': 'labelpoint',
-                            'width': 10,
-                            'height': 10
-                        })
-                        .call(labelPointDrag);
-
-                    // update the midpoints
-                    points.attr('transform', function (p) {
-                        return 'translate(' + (p.x - 10) + ', ' + (p.y - 10) + ')';
-                    });
-
-                    // remove old items
-                    points.exit().remove();
-                }
-            } else {
-                // remove the previous label value
-                labelText.selectAll('tspan').remove();
-
-                // remove the label points
-                labelPoint.remove()
-            }
-        });
-    };
-
-    /**
-     * Removes the labels in the specified selection.
-     *
-     * @param {selection} removed               The labels to be removed
-     */
-    var removeLabels = function (removed) {
-        removed.remove();
-    };
-
-    var nfLabel = {
-        config: {
-            width: dimensions.width,
-            height: dimensions.height
-        },
-
-        /**
-         * Initializes of the Processor handler.
-         *
-         * @param nfConnectableRef   The nfConnectable module.
-         * @param nfDraggableRef   The nfDraggable module.
-         * @param nfSelectableRef   The nfSelectable module.
-         * @param nfContextMenuRef   The nfContextMenu module.
-         */
-        init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
-            nfConnectable = nfConnectableRef;
-            nfDraggable = nfDraggableRef;
-            nfSelectable = nfSelectableRef;
-            nfContextMenu = nfContextMenuRef;
-
-            labelMap = d3.map();
-            removedCache = d3.map();
-            addedCache = d3.map();
-
-            // create the label container
-            labelContainer = d3.select('#canvas').append('g')
-                .attr({
-                    'pointer-events': 'all',
-                    'class': 'labels'
-                });
-
-            // handle bend point drag events
-            labelPointDrag = d3.behavior.drag()
-                .on('dragstart', function () {
-                    // stop further propagation
-                    d3.event.sourceEvent.stopPropagation();
-                })
-                .on('drag', function () {
-                    var label = d3.select(this.parentNode);
-                    var labelData = label.datum();
-
-                    // update the dimensions and ensure they are still within bounds
-                    labelData.dimensions.width = Math.max(MIN_WIDTH, d3.event.x);
-                    labelData.dimensions.height = Math.max(MIN_HEIGHT, d3.event.y);
-
-                    // redraw this connection
-                    updateLabels(label);
-                })
-                .on('dragend', function () {
-                    var label = d3.select(this.parentNode);
-                    var labelData = label.datum();
-
-                    // determine if the width has changed
-                    var different = false;
-                    if (nfCommon.isDefinedAndNotNull(labelData.component.width) || labelData.dimensions.width !== labelData.component.width) {
-                        different = true;
-                    }
-
-                    // determine if the height has changed
-                    if (!different && nfCommon.isDefinedAndNotNull(labelData.component.height) || labelData.dimensions.height !== labelData.component.height) {
-                        different = true;
-                    }
-
-                    // only save the updated bends if necessary
-                    if (different) {
-                        var labelEntity = {
-                            'revision': nfClient.getRevision(labelData),
-                            'component': {
-                                'id': labelData.id,
-                                'width': labelData.dimensions.width,
-                                'height': labelData.dimensions.height
-                            }
-                        }
-
-                        $.ajax({
-                            type: 'PUT',
-                            url: labelData.uri,
-                            data: JSON.stringify(labelEntity),
-                            dataType: 'json',
-                            contentType: 'application/json'
-                        }).done(function (response) {
-                            // request was successful, update the entry
-                            nfLabel.set(response);
-                        }).fail(function () {
-                            // determine the previous width
-                            var width = dimensions.width;
-                            if (nfCommon.isDefinedAndNotNull(labelData.component.width)) {
-                                width = labelData.component.width;
-                            }
-
-                            // determine the previous height
-                            var height = dimensions.height;
-                            if (nfCommon.isDefinedAndNotNull(labelData.component.height)) {
-                                height = labelData.component.height;
-                            }
-
-                            // restore the previous dimensions
-                            labelData.dimensions = {
-                                width: width,
-                                height: height
-                            };
-
-                            // refresh the label
-                            label.call(updateLabels);
-                        });
-                    }
-
-                    // stop further propagation
-                    d3.event.sourceEvent.stopPropagation();
-                });
-        },
-
-        /**
-         * Adds the specified label entity.
-         *
-         * @param labelEntities       The label
-         * @param options           Configuration options
-         */
-        add: function (labelEntities, options) {
-            var selectAll = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-            }
-
-            // get the current time
-            var now = new Date().getTime();
-
-            var add = function (labelEntity) {
-                addedCache.set(labelEntity.id, now);
-
-                // add the label
-                labelMap.set(labelEntity.id, $.extend({
-                    type: 'Label'
-                }, labelEntity));
-            };
-
-            // determine how to handle the specified label status
-            if ($.isArray(labelEntities)) {
-                $.each(labelEntities, function (_, labelEntity) {
-                    add(labelEntity);
-                });
-            } else if (nfCommon.isDefinedAndNotNull(labelEntities)) {
-                add(labelEntities);
-            }
-
-            // apply the selection and handle new labels
-            var selection = select();
-            selection.enter().call(renderLabels, selectAll);
-            selection.call(updateLabels);
-        },
-
-        /**
-         * Populates the graph with the specified labels.
-         *
-         * @argument {object | array} labelEntities     The labels to add
-         * @argument {object} options                   Configuration options
-         */
-        set: function (labelEntities, options) {
-            var selectAll = false;
-            var transition = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-            }
-
-            var set = function (proposedLabelEntity) {
-                var currentLabelEntity = labelMap.get(proposedLabelEntity.id);
-
-                // set the processor if appropriate due to revision and wasn't previously removed
-                if (nfClient.isNewerRevision(currentLabelEntity, proposedLabelEntity) && !removedCache.has(proposedLabelEntity.id)) {
-                    labelMap.set(proposedLabelEntity.id, $.extend({
-                        type: 'Label'
-                    }, proposedLabelEntity));
-                }
-            };
-
-            if ($.isArray(labelEntities)) {
-                $.each(labelMap.keys(), function (_, key) {
-                    var currentLabelEntity = labelMap.get(key);
-                    var isPresent = $.grep(labelEntities, function (proposedLabelEntity) {
-                        return proposedLabelEntity.id === currentLabelEntity.id;
-                    });
-
-                    // if the current label is not present and was not recently added, remove it
-                    if (isPresent.length === 0 && !addedCache.has(key)) {
-                        labelMap.remove(key);
-                    }
-                });
-                $.each(labelEntities, function (_, labelEntity) {
-                    set(labelEntity);
-                });
-            } else if (nfCommon.isDefinedAndNotNull(labelEntities)) {
-                set(labelEntities);
-            }
-
-            // apply the selection and handle all new labels
-            var selection = select();
-            selection.enter().call(renderLabels, selectAll);
-            selection.call(updateLabels).call(nfCanvasUtils.position, transition);
-            selection.exit().call(removeLabels);
-        },
-
-        /**
-         * If the label id is specified it is returned. If no label id
-         * specified, all labels are returned.
-         *
-         * @param {string} id
-         */
-        get: function (id) {
-            if (nfCommon.isUndefined(id)) {
-                return labelMap.values();
-            } else {
-                return labelMap.get(id);
-            }
-        },
-
-        /**
-         * If the label id is specified it is refresh according to the current
-         * state. If not label id is specified, all labels are refreshed.
-         *
-         * @param {string} id      Optional
-         */
-        refresh: function (id) {
-            if (nfCommon.isDefinedAndNotNull(id)) {
-                d3.select('#id-' + id).call(updateLabels);
-            } else {
-                d3.selectAll('g.label').call(updateLabels);
-            }
-        },
-
-        /**
-         * Reloads the label state from the server and refreshes the UI.
-         * If the label is currently unknown, this function just returns.
-         *
-         * @param {string} id The label id
-         */
-        reload: function (id) {
-            if (labelMap.has(id)) {
-                var labelEntity = labelMap.get(id);
-                return $.ajax({
-                    type: 'GET',
-                    url: labelEntity.uri,
-                    dataType: 'json'
-                }).done(function (response) {
-                    nfLabel.set(response);
-                });
-            }
-        },
-
-        /**
-         * Positions the component.
-         *
-         * @param {string} id   The id
-         */
-        position: function (id) {
-            d3.select('#id-' + id).call(nfCanvasUtils.position);
-        },
-
-        /**
-         * Removes the specified label.
-         *
-         * @param {array|string} labelIds      The label id(s)
-         */
-        remove: function (labelIds) {
-            var now = new Date().getTime();
-
-            if ($.isArray(labelIds)) {
-                $.each(labelIds, function (_, labelId) {
-                    removedCache.set(labelId, now);
-                    labelMap.remove(labelId);
-                });
-            } else {
-                removedCache.set(labelIds, now);
-                labelMap.remove(labelIds);
-            }
-
-            // apply the selection and handle all removed labels
-            select().exit().call(removeLabels);
-        },
-
-        /**
-         * Removes all label.
-         */
-        removeAll: function () {
-            nfLabel.remove(labelMap.keys());
-        },
-
-        /**
-         * Expires the caches up to the specified timestamp.
-         *
-         * @param timestamp
-         */
-        expireCaches: function (timestamp) {
-            var expire = function (cache) {
-                cache.forEach(function (id, entryTimestamp) {
-                    if (timestamp > entryTimestamp) {
-                        cache.remove(id);
-                    }
-                });
-            };
-
-            expire(addedCache);
-            expire(removedCache);
-        },
-
-        /**
-         * Returns the default color that should be used when drawing a label.
-         */
-        defaultColor: function () {
-            return '#fff7d7';
-        }
-    };
-
-    return nfLabel;
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-ng-canvas-namespace.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-ng-canvas-namespace.js
deleted file mode 100644
index 787e09e0e180..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-ng-canvas-namespace.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * 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.
- */
-// register the nf.ng.Canvas namespace
-if (!nf.ng.Canvas)
-    nf.ng.Canvas = {};
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js
deleted file mode 100644
index 2c1ebe0b6859..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js
+++ /dev/null
@@ -1,1474 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'Slick',
-                  'nf.ErrorHandler',
-                  'nf.Common',
-                  'nf.Client',
-                  'nf.CanvasUtils',
-                  'nf.ng.Bridge',
-                  'nf.Dialog',
-                  'nf.Shell'],
-              function ($, Slick, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfDialog, nfShell) {
-                  return (nf.PolicyManagement = factory($, Slick, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfDialog, nfShell));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.PolicyManagement =
-              factory(require('jquery'),
-                  require('Slick'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Common'),
-                  require('nf.Client'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ng.Bridge'),
-                  require('nf.Dialog'),
-                  require('nf.Shell')));
-      } else {
-          nf.PolicyManagement = factory(root.$,
-              root.Slick,
-              root.nf.ErrorHandler,
-              root.nf.Common,
-              root.nf.Client,
-              root.nf.CanvasUtils,
-              root.nf.ng.Bridge,
-              root.nf.Dialog,
-              root.nf.Shell);
-      }
-  }(this, function ($, Slick, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfDialog, nfShell) {
-      'use strict';
-        
-        var config = {
-            urls: {
-                api: '../nifi-api',
-                searchTenants: '../nifi-api/tenants/search-results'
-            }
-        };
-    
-        var initialized = false;
-    
-        var initAddTenantToPolicyDialog = function () {
-            $('#new-policy-user-button').on('click', function () {
-                $('#search-users-dialog').modal('show');
-                $('#search-users-field').focus();
-            });
-    
-            $('#delete-policy-button').on('click', function () {
-                promptToDeletePolicy();
-            });
-    
-            $('#search-users-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-              headerText: nf._.msg('nf-policy-management.AcessUser'),
-                buttons: [{
-                  buttonText: nf._.msg('nf-policy-management.Add'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // add to table and update policy
-                            var policyGrid = $('#policy-table').data('gridInstance');
-                            var policyData = policyGrid.getData();
-    
-                            // begin the update
-                            policyData.beginUpdate();
-    
-                          // add all users/groups
-                          $.each(getTenantsToAdd($('#allowed-users')), function (_, user) {
-                                // remove the user
-                                policyData.addItem(user);
-                          });
-                          $.each(getTenantsToAdd($('#allowed-groups')), function (_, group) {
-                              // remove the user
-                              policyData.addItem(group);
-                          });
-    
-                            // end the update
-                            policyData.endUpdate();
-    
-                            // update the policy
-                            updatePolicy();
-    
-                            // close the dialog
-                            $('#search-users-dialog').modal('hide');
-                        }
-                    }
-                },
-                    {
-                      buttonText: nf._.msg('nf-policy-management.Cancel'),
-                        color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
-                        },
-                        handler: {
-                            click: function () {
-                                // close the dialog
-                                $('#search-users-dialog').modal('hide');
-                            }
-                        }
-                    }],
-                handler: {
-                    close: function () {
-                        // reset the search fields
-                        $('#search-users-field').userSearchAutocomplete('reset').val('');
-    
-                      // clear the selected users/groups
-                      $('#allowed-users, #allowed-groups').empty();
-                  }
-              }
-          });
-  
-          // listen for removal requests
-          $(document).on('click', 'div.remove-allowed-entity', function () {
-              $(this).closest('li').remove();
-            });
-    
-            // configure the user auto complete
-            $.widget('nf.userSearchAutocomplete', $.ui.autocomplete, {
-                reset: function () {
-                    this.term = null;
-                },
-              _create: function() {
-                  this._super();
-                  this.widget().menu('option', 'items', '> :not(.search-no-matches)' );
-              },
-                _normalize: function (searchResults) {
-                    var items = [];
-                    items.push(searchResults);
-                    return items;
-                },
-                _renderMenu: function (ul, items) {
-                    // results are normalized into a single element array
-                    var searchResults = items[0];
-    
-                  var allowedGroups = getAllAllowedGroups();
-                  var allowedUsers = getAllAllowedUsers();
-  
-                  var nfUserSearchAutocomplete = this;
-                    $.each(searchResults.userGroups, function (_, tenant) {
-                      // see if this match is not already selected
-                      if ($.inArray(tenant.id, allowedGroups) === -1) {
-                          nfUserSearchAutocomplete._renderGroup(ul, $.extend({
-                              type: 'group'
-                          }, tenant));
-                      }
-                    });
-                    $.each(searchResults.users, function (_, tenant) {
-                      // see if this match is not already selected
-                      if ($.inArray(tenant.id, allowedUsers) === -1) {
-                          nfUserSearchAutocomplete._renderUser(ul, $.extend({
-                              type: 'user'
-                          }, tenant));
-                      }
-                    });
-    
-                    // ensure there were some results
-                    if (ul.children().length === 0) {
-                      ul.append('<li class="unset search-no-matches">'+nf._.msg('nf-policy-management.NoUserSearch')+'</li>');
-                    }
-                },
-                _resizeMenu: function () {
-                    var ul = this.menu.element;
-                  ul.width($('#search-users-field').outerWidth() - 2);
-                },
-                _renderUser: function (ul, match) {
-                  var userContent = $('<a></a>').text(match.component.identity);
-                    return $('<li></li>').data('ui-autocomplete-item', match).append(userContent).appendTo(ul);
-                },
-                _renderGroup: function (ul, match) {
-                  var groupLabel = $('<span></span>').text(match.component.identity);
-                    var groupContent = $('<a></a>').append('<div class="fa fa-users" style="margin-right: 5px;"></div>').append(groupLabel);
-                    return $('<li></li>').data('ui-autocomplete-item', match).append(groupContent).appendTo(ul);
-                }
-            });
-    
-            // configure the autocomplete field
-            $('#search-users-field').userSearchAutocomplete({
-                minLength: 0,
-                appendTo: '#search-users-results',
-                position: {
-                    my: 'left top',
-                    at: 'left bottom',
-                    offset: '0 1'
-                },
-                source: function (request, response) {
-                    // create the search request
-                    $.ajax({
-                        type: 'GET',
-                        data: {
-                            q: request.term
-                        },
-                        dataType: 'json',
-                        url: config.urls.searchTenants
-                    }).done(function (searchResponse) {
-                        response(searchResponse);
-                    });
-              },
-              select: function (event, ui) {
-                  addAllowedTenant(ui.item);
-  
-                  // reset the search field
-                  $(this).val('');
-  
-                  // stop event propagation
-                  return false;
-              }
-          });
-      };
-  
-      /**
-       * Gets all allowed groups including those already in the policy and those selected while searching (not yet saved).
-       *
-       * @returns {Array}
-       */
-      var getAllAllowedGroups = function () {
-          var policyGrid = $('#policy-table').data('gridInstance');
-          var policyData = policyGrid.getData();
-  
-          var userGroups = [];
-  
-          // consider existing groups in the policy table
-          var items = policyData.getItems();
-          $.each(items, function (_, item) {
-              if (item.type === 'group') {
-                  userGroups.push(item.id);
-              }
-          });
-  
-          // also consider groups already selected in the search users dialog
-          $.each(getTenantsToAdd($('#allowed-groups')), function (_, group) {
-              userGroups.push(group.id);
-          });
-  
-          return userGroups;
-      };
-  
-      /**
-       * Gets the user groups that will be added upon applying the changes.
-       *
-       * @param {jQuery} container
-       * @returns {Array}
-       */
-      var getTenantsToAdd = function (container) {
-          var tenants = [];
-  
-          // also consider groups already selected in the search users dialog
-          container.children('li').each(function (_, allowedTenant) {
-              var tenant = $(allowedTenant).data('tenant');
-              if (nfCommon.isDefinedAndNotNull(tenant)) {
-                  tenants.push(tenant);
-              }
-          });
-  
-          return tenants;
-      };
-  
-      /**
-       * Gets all allowed users including those already in the policy and those selected while searching (not yet saved).
-       *
-       * @returns {Array}
-       */
-      var getAllAllowedUsers = function () {
-          var policyGrid = $('#policy-table').data('gridInstance');
-          var policyData = policyGrid.getData();
-  
-          var users = [];
-  
-          // consider existing users in the policy table
-          var items = policyData.getItems();
-          $.each(items, function (_, item) {
-              if (item.type === 'user') {
-                  users.push(item.id);
-              }
-          });
-  
-          // also consider users already selected in the search users dialog
-          $.each(getTenantsToAdd($('#allowed-users')), function (_, user) {
-              users.push(user.id);
-          });
-  
-          return users;
-      };
-  
-      /**
-       * Added the specified tenant to the listing of users/groups which will be added when applied.
-       *
-       * @param allowedTenant user/group to add
-       */
-      var addAllowedTenant = function (allowedTenant) {
-          var allowedTenants = allowedTenant.type === 'user' ? $('#allowed-users') : $('#allowed-groups');
-  
-          // append the user
-          var tenant = $('<span></span>').addClass('allowed-entity ellipsis').text(allowedTenant.component.identity).ellipsis();
-          var tenantAction = $('<div></div>').addClass('remove-allowed-entity fa fa-trash');
-          $('<li></li>').data('tenant', allowedTenant).append(tenant).append(tenantAction).appendTo(allowedTenants);
-      };
-  
-      /**
-       * Initializes the policy table.
-       */
-        var initPolicyTable = function () {
-          $('#override-policy-dialog').modal({
-              headerText: 'Override Policy',
-              buttons: [{
-                  buttonText: 'Override',
-                  color: {
-                      base: '#728E9B',
-                      hover: '#004849',
-                      text: '#ffffff'
-                  },
-                  handler: {
-                      click: function () {
-                          // create the policy, copying if appropriate
-                          createPolicy($('#copy-policy-radio-button').is(':checked'));
-  
-                          $(this).modal('hide');
-                      }
-                  }
-              }, {
-                  buttonText: 'Cancel',
-                  color: {
-                      base: '#E3E8EB',
-                      hover: '#C7D2D7',
-                      text: '#004849'
-                  },
-                  handler: {
-                      click: function () {
-                          $(this).modal('hide');
-                      }
-                  }
-              }],
-              handler: {
-                  close: function () {
-                      // reset the radio button
-                      $('#copy-policy-radio-button').prop('checked', true);
-                  }
-              }
-          });
-  
-          // create/add a policy
-          $('#create-policy-link, #add-local-admin-link').on('click', function () {
-              createPolicy(false);
-          });
-  
-          // override a policy
-          $('#override-policy-link').on('click', function () {
-              $('#override-policy-dialog').modal('show');
-            });
-    
-            // policy type listing
-            $('#policy-type-list').combo({
-              options: [
-                  nfCommon.getPolicyTypeListing('flow'),
-                  nfCommon.getPolicyTypeListing('controller'),
-                  nfCommon.getPolicyTypeListing('provenance'),
-                  nfCommon.getPolicyTypeListing('restricted-components'),
-                  nfCommon.getPolicyTypeListing('policies'),
-                  nfCommon.getPolicyTypeListing('tenants'),
-                  nfCommon.getPolicyTypeListing('site-to-site'),
-                  nfCommon.getPolicyTypeListing('system'),
-                  nfCommon.getPolicyTypeListing('proxy'),
-                  nfCommon.getPolicyTypeListing('counters')],
-                select: function (option) {
-                    if (initialized) {
-                        // record the policy type
-                        $('#selected-policy-type').text(option.value);
-    
-                        // if the option is for a specific component
-                        if (option.value === 'controller' || option.value === 'counters' || option.value === 'policies' || option.value === 'tenants') {
-                            // update the policy target and let it relaod the policy
-                            $('#controller-policy-target').combo('setSelectedOption', {
-                                'value': 'read'
-                            }).show();
-                        } else {
-                            $('#controller-policy-target').hide();
-    
-                            // record the action
-                          if (option.value === 'proxy' || option.value === 'restricted-components') {
-                              $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
-                            } else {
-                              $('#selected-policy-action').text(nf._.msg('nf-policy-management.Read'));
-                            }
-    
-                            // reload the policy
-                            loadPolicy();
-                        }
-                    }
-                }
-            });
-    
-            // controller policy target
-            $('#controller-policy-target').combo({
-                options: [{
-                  text: nf._.msg('nf-policy-management.View'),
-                    value: 'read'
-                }, {
-                  text: nf._.msg('nf-policy-management.Modify'),
-                    value: 'write'
-                }],
-                select: function (option) {
-                    if (initialized) {
-                        // record the policy action
-                        $('#selected-policy-action').text(option.value);
-    
-                        // reload the policy
-                        loadPolicy();
-                    }
-                }
-            });
-            
-            // component policy target
-            $('#component-policy-target').combo({
-                options: [{
-                  text: nf._.msg('nf-policy-management.ViewComponent'),
-                    value: 'read-component',
-                  description: nf._.msg('nf-policy-management.Message16')
-                }, {
-                  text: nf._.msg('nf-policy-management.ModifyComponent'),
-                    value: 'write-component',
-                  description: nf._.msg('nf-policy-management.Message17')
-                }, {
-                  text: nf._.msg('nf-policy-management.ViewData'),
-                    value: 'read-data',
-                  description: nf._.msg('nf-policy-management.Message18')
-                }, {
-                  text: nf._.msg('nf-policy-management.ModifyData'),
-                    value: 'write-data',
-                  description: nf._.msg('nf-policy-management.Message19')
-                }, {
-                  text: nf._.msg('nf-policy-management.ReceiveData'),
-                    value: 'write-receive-data',
-                  description: nf._.msg('nf-policy-management.Message20'),
-                    disabled: true
-                }, {
-                  text: nf._.msg('nf-policy-management.SendData'),
-                    value: 'write-send-data',
-                  description: nf._.msg('nf-policy-management.Message21'),
-                    disabled: true
-                }, {
-                  text: nf._.msg('nf-policy-management.ViewPolicies'),
-                    value: 'read-policies',
-                  description: nf._.msg('nf-policy-management.Message22')
-                }, {
-                  text: nf._.msg('nf-policy-management.ModifyPolicies'),
-                    value: 'write-policies',
-                  description: nf._.msg('nf-policy-management.Message23')
-                }],
-                select: function (option) {
-                    if (initialized) {
-                        var resource = $('#selected-policy-component-type').text();
-    
-                        if (option.value === 'read-component') {
-                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Read'));
-                        } else if (option.value === 'write-component') {
-                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
-                        } else if (option.value === 'read-data') {
-                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Read'));
-                            resource = ('data/' + resource);
-                        } else if (option.value === 'write-data') {
-                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
-                            resource = ('data/' + resource);
-                        } else if (option.value === 'read-policies') {
-                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Read'));
-                            resource = ('policies/' + resource);
-                        } else if (option.value === 'write-policies') {
-                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
-                            resource = ('policies/' + resource);
-                        } else if (option.value === 'write-receive-data') {
-                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
-                            resource = 'data-transfer/input-ports';
-                        } else if (option.value === 'write-send-data') {
-                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
-                            resource = 'data-transfer/output-ports';
-                        }
-    
-                        // set the resource
-                        $('#selected-policy-type').text(resource);
-    
-                        // reload the policy
-                        loadPolicy();
-                    }
-                }
-            });
-    
-            // function for formatting the user identity
-            var identityFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-                if (dataContext.type === 'group') {
-                    markup += '<div class="fa fa-users" style="margin-right: 5px;"></div>';
-                }
-    
-                markup += dataContext.component.identity;
-    
-                return markup;
-            };
-    
-            // function for formatting the actions column
-            var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-    
-                // see if the user has permissions for the current policy
-                var currentEntity = $('#policy-table').data('policy');
-              var isPolicyEditable = $('#delete-policy-button').is(':disabled') === false;
-              if (currentEntity.permissions.canWrite === true && isPolicyEditable) {
-                  markup += '<div title="'+nf._.msg('nf-policy-management.Remove')+'" class="pointer delete-user fa fa-trash"></div>';
-                }
-    
-                return markup;
-            };
-    
-            // initialize the templates table
-            var usersColumns = [
-              {
-                  id: 'identity',
-                  name: 'User',
-                  sortable: true,
-                  resizable: true,
-                  formatter: identityFormatter
-              },
-              {
-                  id: 'actions',
-                  name: '&nbsp;',
-                  sortable: false,
-                  resizable: false,
-                  formatter: actionFormatter,
-                  width: 100,
-                  maxWidth: 100
-              }
-            ];
-    
-            var usersOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false
-            };
-    
-            // initialize the dataview
-            var policyData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            policyData.setItems([]);
-    
-            // initialize the sort
-            sort({
-                columnId: 'identity',
-                sortAsc: true
-            }, policyData);
-    
-            // initialize the grid
-            var policyGrid = new Slick.Grid('#policy-table', policyData, usersColumns, usersOptions);
-            policyGrid.setSelectionModel(new Slick.RowSelectionModel());
-            policyGrid.registerPlugin(new Slick.AutoTooltips());
-            policyGrid.setSortColumn('identity', true);
-            policyGrid.onSort.subscribe(function (e, args) {
-                sort({
-                    columnId: args.sortCol.id,
-                    sortAsc: args.sortAsc
-                }, policyData);
-            });
-    
-            // configure a click listener
-            policyGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-    
-                // get the node at this row
-                var item = policyData.getItem(args.row);
-    
-                // determine the desired action
-                if (policyGrid.getColumns()[args.cell].id === 'actions') {
-                    if (target.hasClass('delete-user')) {
-                        promptToRemoveUserFromPolicy(item);
-                    }
-                }
-            });
-    
-            // wire up the dataview to the grid
-            policyData.onRowCountChanged.subscribe(function (e, args) {
-                policyGrid.updateRowCount();
-                policyGrid.render();
-    
-                // update the total number of displayed policy users
-                $('#displayed-policy-users').text(args.current);
-            });
-            policyData.onRowsChanged.subscribe(function (e, args) {
-                policyGrid.invalidateRows(args.rows);
-                policyGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#policy-table').data('gridInstance', policyGrid);
-    
-            // initialize the number of displayed items
-            $('#displayed-policy-users').text('0');
-        };
-    
-        /**
-         * 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) {
-                  var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-                  var bString = nfCommon.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){
-                        return 0;
-                    }
-                    if(a.permissions.canRead){
-                        return 1;
-                    } else {
-                        return -1;
-                    }
-                }
-            };
-    
-            // perform the sort
-            data.sort(comparer, sortDetails.sortAsc);
-        };
-    
-        /**
-         * Prompts for the removal of the specified user.
-         *
-         * @param item
-         */
-        var promptToRemoveUserFromPolicy = function (item) {
-          nfDialog.showYesNoDialog({
-              headerText: nf._.msg('nf-policy-management.UpdatePolicy'),
-              dialogContent: nf._.msg('nf-policy-management.Message3') + nf.Common.escapeHtml(item.component.identity) + nf._.msg('nf-policy-management.Message4'),
-                yesHandler: function () {
-                    removeUserFromPolicy(item);
-                }
-            });
-        };
-    
-        /**
-         * Removes the specified item from the current policy.
-         *
-         * @param item
-         */
-        var removeUserFromPolicy = function (item) {
-            var policyGrid = $('#policy-table').data('gridInstance');
-            var policyData = policyGrid.getData();
-    
-            // begin the update
-            policyData.beginUpdate();
-    
-            // remove the user
-            policyData.deleteItem(item.id);
-    
-            // end the update
-            policyData.endUpdate();
-    
-            // save the configuration
-            updatePolicy();
-        };
-    
-        /**
-         * Prompts for the deletion of the selected policy.
-         */
-        var promptToDeletePolicy = function () {
-          nfDialog.showYesNoDialog({
-              headerText: nf._.msg('nf-policy-management.DeletePolicy'),
-              dialogContent: nf._.msg('nf-policy-management.Message24'),
-              yesText: 'Delete',
-              noText: 'Cancel',
-                yesHandler: function () {
-                    deletePolicy();
-                }
-            });
-        };
-    
-        /**
-         * Deletes the current policy.
-         */
-        var deletePolicy = function () {
-            var currentEntity = $('#policy-table').data('policy');
-            
-          if (nfCommon.isDefinedAndNotNull(currentEntity)) {
-                $.ajax({
-                    type: 'DELETE',
-                  url: currentEntity.uri + '?' + $.param(nfClient.getRevision(currentEntity)),
-                    dataType: 'json'
-                }).done(function () {
-                    loadPolicy();
-                }).fail(function (xhr, status, error) {
-                  nfErrorHandler.handleAjaxError(xhr, status, error);
-                    resetPolicy();
-                    loadPolicy();
-                });
-            } else {
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-policy-management.DeletePolicy'),
-                  dialogContent: nf._.msg('nf-policy-management.Message6')
-                });
-            }
-        };
-    
-        /**
-         * Gets the currently selected resource.
-         */
-        var getSelectedResourceAndAction = function () {
-            var componentId = $('#selected-policy-component-id').text();
-            var resource = $('#selected-policy-type').text();
-            if (componentId !== '') {
-                resource += ('/' + componentId);
-            }
-    
-            return {
-                'action': $('#selected-policy-action').text(),
-                'resource': '/' + resource
-            };
-        };
-    
-        /**
-         * Populates the table with the specified users and groups.
-         *
-         * @param users
-         * @param userGroups
-         */
-        var populateTable = function (users, userGroups) {
-            var policyGrid = $('#policy-table').data('gridInstance');
-            var policyData = policyGrid.getData();
-    
-            // begin the update
-            policyData.beginUpdate();
-    
-            var policyUsers = [];
-    
-            // add each user
-            $.each(users, function (_, user) {
-                policyUsers.push($.extend({
-                    type: 'user'
-                }, user));
-            });
-    
-            // add each group
-            $.each(userGroups, function (_, group) {
-                policyUsers.push($.extend({
-                    type: 'group'
-                }, group));
-            });
-    
-            // set the rows
-            policyData.setItems(policyUsers);
-    
-            // end the update
-            policyData.endUpdate();
-    
-            // re-sort and clear selection after updating
-            policyData.reSort();
-            policyGrid.invalidate();
-            policyGrid.getSelectionModel().setSelectedRows([]);
-        };
-    
-        /**
-         * Converts the specified resource into human readable form.
-         *
-         * @param resource
-         */
-      var getResourceMessage = function (resource) {
-            if (resource === '/policies') {
-              return $('<span>'+nf._.msg('nf-policy-management.AllPolicies')+'</span>');
-            } else if (resource === '/controller') {
-              return $('<span>'+nf._.msg('nf-policy-management.Controller')+'</span>');
-            } else {
-              // extract the group id
-              var processGroupId = nfCommon.substringAfterLast(resource, '/');
-              var processGroupName = processGroupId;
-  
-              // attempt to resolve the group name
-              var breadcrumbs = nfNgBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs();
-              $.each(breadcrumbs, function (_, breadcrumbEntity) {
-                  if (breadcrumbEntity.id === processGroupId) {
-                      processGroupName = breadcrumbEntity.label;
-                      return false;
-                  }
-              });
-  
-              // build the mark up
-              return $('<span>Showing effective policy inherited from Process Group </span>')
-                  .append( $('<span class="link ellipsis" style="max-width: 200px; vertical-align: top;"></span>')
-                      .text(processGroupName)
-                      .attr('title', processGroupName)
-                      .on('click', function () {
-                          // close the shell
-                          $('#shell-close-button').click();
-  
-                          // load the correct group and unselect everything if necessary
-                          nfCanvasUtils.getComponentByType('ProcessGroup').enterGroup(processGroupId).done(function () {
-                              nfCanvasUtils.getSelection().classed('selected', false);
-  
-                              // inform Angular app that values have changed
-                              nfNgBridge.digest();
-                          });
-                      })
-              ).append('<span>.</span>');
-            }
-        };
-    
-        /**
-         * Populates the specified policy.
-         *
-         * @param policyEntity
-         */
-        var populatePolicy = function (policyEntity) {
-            var policy = policyEntity.component;
-    
-            // get the currently selected policy
-            var resourceAndAction = getSelectedResourceAndAction();
-    
-            // reset of the policy message
-            resetPolicyMessage();
-    
-            // store the current policy version
-            $('#policy-table').data('policy', policyEntity);
-    
-            // see if the policy is for this resource
-            if (resourceAndAction.resource === policy.resource) {
-                // allow remove when policy is not inherited
-                $('#delete-policy-button').prop('disabled', policyEntity.permissions.canWrite === false);
-    
-              // allow modification if allowed
-              $('#new-policy-user-button').prop('disabled', policyEntity.permissions.canWrite === false);
-          } else {
-              $('#policy-message').append(getResourceMessage(policy.resource));
-    
-                // policy is inherited, we do not know if the user has permissions to modify the desired policy... show button and let server decide
-                $('#override-policy-message').show();
-    
-              // do not support policy deletion/modification
-                $('#delete-policy-button').prop('disabled', true);
-              $('#new-policy-user-button').prop('disabled', true);
-            }
-    
-            // populate the table
-            populateTable(policy.users, policy.userGroups);
-        };
-    
-        /**
-         * Loads the configuration for the specified process group.
-         */
-        var loadPolicy = function () {
-            var resourceAndAction = getSelectedResourceAndAction();
-    
-            var policyDeferred;
-            if (resourceAndAction.resource.startsWith('/policies')) {
-                $('#admin-policy-message').show();
-    
-                policyDeferred = $.Deferred(function (deferred) {
-                    $.ajax({
-                        type: 'GET',
-                        url: '../nifi-api/policies/' + resourceAndAction.action + resourceAndAction.resource,
-                        dataType: 'json'
-                    }).done(function (policyEntity) {
-                        // update the refresh timestamp
-                        $('#policy-last-refreshed').text(policyEntity.generated);
-    
-                        // ensure appropriate actions for the loaded policy
-                        if (policyEntity.permissions.canRead === true) {
-                            var policy = policyEntity.component;
-    
-                            // if the return policy is for the desired policy (not inherited, show it)
-                            if (resourceAndAction.resource === policy.resource) {
-                                // populate the policy details
-                                populatePolicy(policyEntity);
-                            } else {
-                                // reset the policy
-                                resetPolicy();
-    
-                                // show an appropriate message
-                              $('#policy-message').text(nf._.msg('nf-policy-management.Text2'));
-    
-                                // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
-                                $('#add-local-admin-message').show();
-                            }
-                        } else {
-                            // reset the policy
-                            resetPolicy();
-    
-                            // show an appropriate message
-                          $('#policy-message').text(nf._.msg('nf-policy-management.Text2'));
-    
-                            // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
-                            $('#add-local-admin-message').show();
-                        }
-    
-                        deferred.resolve();
-                    }).fail(function (xhr, status, error) {
-                        if (xhr.status === 404) {
-                            // reset the policy
-                            resetPolicy();
-    
-                            // show an appropriate message
-                          $('#policy-message').text(nf._.msg('nf-policy-management.Text2'));
-    
-                            // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
-                            $('#add-local-admin-message').show();
-    
-                            deferred.resolve();
-                        } else if (xhr.status === 403) {
-                            // reset the policy
-                            resetPolicy();
-    
-                            // show an appropriate message
-                          $('#policy-message').text(nf._.msg('nf-policy-management.Text3'));
-    
-                            deferred.resolve();
-                        } else {
-                            // reset the policy
-                            resetPolicy();
-    
-                            deferred.reject();
-                          nfErrorHandler.handleAjaxError(xhr, status, error);
-                        }
-                    });
-                }).promise();
-            } else {
-                $('#admin-policy-message').hide();
-    
-                policyDeferred = $.Deferred(function (deferred) {
-                    $.ajax({
-                        type: 'GET',
-                        url: '../nifi-api/policies/' + resourceAndAction.action + resourceAndAction.resource,
-                        dataType: 'json'
-                    }).done(function (policyEntity) {
-                        // return OK so we either have access to the policy or we don't have access to an inherited policy
-    
-                        // update the refresh timestamp
-                        $('#policy-last-refreshed').text(policyEntity.generated);
-    
-                        // ensure appropriate actions for the loaded policy
-                        if (policyEntity.permissions.canRead === true) {
-                            // populate the policy details
-                            populatePolicy(policyEntity);
-                        } else {
-                            // reset the policy
-                            resetPolicy();
-    
-                            // since we cannot read, the policy may be inherited or not... we cannot tell
-                          $('#policy-message').text(nf._.msg('nf-policy-management.Text4'));
-    
-                            // allow option to override because we don't know if it's supported or not
-                            $('#override-policy-message').show();
-                        }
-    
-                        deferred.resolve();
-                    }).fail(function (xhr, status, error) {
-                        if (xhr.status === 404) {
-                            // reset the policy
-                            resetPolicy();
-    
-                            // show an appropriate message
-                          $('#policy-message').text(nf._.msg('nf-policy-management.Text5'));
-    
-                            // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
-                            $('#new-policy-message').show();
-    
-                            deferred.resolve();
-                        } else if (xhr.status === 403) {
-                            // reset the policy
-                            resetPolicy();
-    
-                            // show an appropriate message
-                          $('#policy-message').text(nf._.msg('nf-policy-management.Text6'));
-    
-                            deferred.resolve();
-                        } else {
-                            resetPolicy();
-    
-                            deferred.reject();
-                          nfErrorHandler.handleAjaxError(xhr, status, error);
-                        }
-                    });
-                }).promise();
-            }
-    
-            return policyDeferred;
-        };
-    
-        /**
-         * Creates a new policy for the current selection.
-       *
-       * @param copyInheritedPolicy   Whether or not to copy the inherited policy
-         */
-      var createPolicy = function (copyInheritedPolicy) {
-            var resourceAndAction = getSelectedResourceAndAction();
-    
-          var users = [];
-          var userGroups = [];
-          if (copyInheritedPolicy === true) {
-              var policyGrid = $('#policy-table').data('gridInstance');
-              var policyData = policyGrid.getData();
-  
-              var items = policyData.getItems();
-              $.each(items, function (_, item) {
-                  var itemCopy = $.extend({}, item);
-  
-                  if (itemCopy.type === 'user') {
-                      users.push(itemCopy);
-                  } else {
-                      userGroups.push(itemCopy);
-                  }
-  
-                  // remove the type as it was added client side to render differently and is not part of the actual schema
-                  delete itemCopy.type;
-              });
-          }
-  
-            var entity = {
-              'revision': nfClient.getRevision({
-                    'revision': {
-                        'version': 0
-                    }
-                }),
-                'component': {
-                    'action': resourceAndAction.action,
-                  'resource': resourceAndAction.resource,
-                  'users': users,
-                  'userGroups': userGroups
-                }
-            };
-    
-            $.ajax({
-                type: 'POST',
-                url: '../nifi-api/policies',
-                data: JSON.stringify(entity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (policyEntity) {
-                // ensure appropriate actions for the loaded policy
-                if (policyEntity.permissions.canRead === true) {
-                    // populate the policy details
-                    populatePolicy(policyEntity);
-                } else {
-                    // the request succeeded but we don't have access to the policy... reset/reload the policy
-                    resetPolicy();
-                    loadPolicy();
-                }
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Updates the policy for the current selection.
-         */
-        var updatePolicy = function () {
-            var policyGrid = $('#policy-table').data('gridInstance');
-            var policyData = policyGrid.getData();
-    
-            var users = [];
-            var userGroups = [];
-    
-            var items = policyData.getItems();
-            $.each(items, function (_, item) {
-              var itemCopy = $.extend({}, item);
-  
-              if (itemCopy.type === 'user') {
-                  users.push(itemCopy);
-              } else {
-                  userGroups.push(itemCopy);
-              }
-  
-              // remove the type as it was added client side to render differently and is not part of the actual schema
-              delete itemCopy.type;
-            });
-    
-            var currentEntity = $('#policy-table').data('policy');
-          if (nfCommon.isDefinedAndNotNull(currentEntity)) {
-                var entity = {
-                  'revision': nfClient.getRevision(currentEntity),
-                    'component': {
-                        'id': currentEntity.id,
-                        'users': users,
-                        'userGroups': userGroups
-                    }
-                };
-        
-                $.ajax({
-                    type: 'PUT',
-                    url: currentEntity.uri,
-                    data: JSON.stringify(entity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (policyEntity) {
-                    // ensure appropriate actions for the loaded policy
-                    if (policyEntity.permissions.canRead === true) {
-                        // populate the policy details
-                        populatePolicy(policyEntity);
-                    } else {
-                        // the request succeeded but we don't have access to the policy... reset/reload the policy
-                        resetPolicy();
-                        loadPolicy();
-                    }
-                }).fail(function (xhr, status, error) {
-                  nfErrorHandler.handleAjaxError(xhr, status, error);
-                    resetPolicy();
-                    loadPolicy();
-                }).always(function () {
-                  nfCanvasUtils.reload({
-                        'transition': true
-                    });
-                });
-            } else {
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-policy-management.UpdatePolicy'),
-                  dialogContent: nf._.msg('nf-policy-management.Message6')
-                });
-            }
-        };
-    
-        /**
-         * Shows the process group configuration.
-         */
-        var showPolicy = function () {
-            // show the configuration dialog
-          nfShell.showContent('#policy-management').always(function () {
-                reset();
-            });
-    
-            // adjust the table size
-          nfPolicyManagement.resetTableSize();
-        };
-    
-        /**
-         * Reset the policy message.
-         */
-        var resetPolicyMessage = function () {
-          $('#policy-message').text('').empty();
-            $('#new-policy-message').hide();
-            $('#override-policy-message').hide();
-            $('#add-local-admin-message').hide();
-        };
-    
-        /**
-         * Reset the policy.
-         */
-        var resetPolicy = function () {
-            resetPolicyMessage();
-    
-            // reset button state
-            $('#delete-policy-button').prop('disabled', true);
-            $('#new-policy-user-button').prop('disabled', true);
-    
-            // reset the current policy
-            $('#policy-table').removeData('policy');
-    
-            // populate the table with no users
-            populateTable([], []);
-        }
-    
-        /**
-         * Resets the policy management dialog.
-         */
-        var reset = function () {
-            resetPolicy();
-    
-            // clear the selected policy details
-            $('#selected-policy-type').text('');
-            $('#selected-policy-action').text('');
-            $('#selected-policy-component-id').text('');
-            $('#selected-policy-component-type').text('');
-            
-            // clear the selected component details
-            $('div.policy-selected-component-container').hide();
-        };
-    
-      var nfPolicyManagement = {
-            /**
-             * Initializes the settings page.
-             */
-            init: function () {
-                initAddTenantToPolicyDialog();
-                initPolicyTable();
-    
-                $('#policy-refresh-button').on('click', function () {
-                    loadPolicy();
-                });
-    
-                // reset the policy to initialize
-                resetPolicy();
-    
-                // mark as initialized
-                initialized = true;
-            },
-    
-            /**
-             * Update the size of the grid based on its container's current size.
-             */
-            resetTableSize: function () {
-                var policyTable = $('#policy-table');
-                if (policyTable.is(':visible')) {
-                    var policyGrid = policyTable.data('gridInstance');
-                  if (nfCommon.isDefinedAndNotNull(policyGrid)) {
-                        policyGrid.resizeCanvas();
-                    }
-                }
-            },
-    
-            /**
-             * Shows the controller service policy.
-             *
-             * @param d
-             */
-            showControllerServicePolicy: function (d) {
-                // reset the policy message
-                resetPolicyMessage();
-    
-                // update the policy controls visibility
-                $('#component-policy-controls').show();
-                $('#global-policy-controls').hide();
-    
-                // update the visibility
-                if (d.permissions.canRead === true) {
-                    $('#policy-selected-controller-service-container div.policy-selected-component-name').text(d.component.name);
-                } else {
-                    $('#policy-selected-controller-service-container div.policy-selected-component-name').text(d.id);
-                }
-                $('#policy-selected-controller-service-container').show();
-    
-                // populate the initial resource
-                $('#selected-policy-component-id').text(d.id);
-                $('#selected-policy-component-type').text('controller-services');
-                $('#component-policy-target')
-                    .combo('setOptionEnabled', {
-                        value: 'write-receive-data'
-                    }, false)
-                    .combo('setOptionEnabled', {
-                        value: 'write-send-data'
-                    }, false)
-                    .combo('setOptionEnabled', {
-                        value: 'read-data'
-                    }, false)
-                    .combo('setOptionEnabled', {
-                        value: 'write-data'
-                    }, false)
-                    .combo('setSelectedOption', {
-                        value: 'read-component'
-                    });
-    
-                return loadPolicy().always(showPolicy);
-            },
-    
-            /**
-             * Shows the reporting task policy.
-             *
-             * @param d
-             */
-            showReportingTaskPolicy: function (d) {
-                // reset the policy message
-                resetPolicyMessage();
-    
-                // update the policy controls visibility
-                $('#component-policy-controls').show();
-                $('#global-policy-controls').hide();
-    
-                // update the visibility
-                if (d.permissions.canRead === true) {
-                    $('#policy-selected-reporting-task-container div.policy-selected-component-name').text(d.component.name);
-                } else {
-                    $('#policy-selected-reporting-task-container div.policy-selected-component-name').text(d.id);
-                }
-                $('#policy-selected-reporting-task-container').show();
-                
-                // populate the initial resource
-                $('#selected-policy-component-id').text(d.id);
-                $('#selected-policy-component-type').text('reporting-tasks');
-                $('#component-policy-target')
-                    .combo('setOptionEnabled', {
-                        value: 'write-receive-data'
-                    }, false)
-                    .combo('setOptionEnabled', {
-                        value: 'write-send-data'
-                    }, false)
-                    .combo('setOptionEnabled', {
-                        value: 'read-data'
-                    }, false)
-                    .combo('setOptionEnabled', {
-                        value: 'write-data'
-                    }, false)
-                    .combo('setSelectedOption', {
-                        value: 'read-component'
-                    });
-    
-                return loadPolicy().always(showPolicy);
-            },
-    
-            /**
-             * Shows the template policy.
-             *
-             * @param d
-             */
-            showTemplatePolicy: function (d) {
-                // reset the policy message
-                resetPolicyMessage();
-    
-                // update the policy controls visibility
-                $('#component-policy-controls').show();
-                $('#global-policy-controls').hide();
-    
-                // update the visibility
-                if (d.permissions.canRead === true) {
-                    $('#policy-selected-template-container div.policy-selected-component-name').text(d.template.name);
-                } else {
-                    $('#policy-selected-template-container div.policy-selected-component-name').text(d.id);
-                }
-                $('#policy-selected-template-container').show();
-    
-                // populate the initial resource
-                $('#selected-policy-component-id').text(d.id);
-                $('#selected-policy-component-type').text('templates');
-                $('#component-policy-target')
-                    .combo('setOptionEnabled', {
-                        value: 'write-receive-data'
-                    }, false)
-                    .combo('setOptionEnabled', {
-                        value: 'write-send-data'
-                    }, false)
-                    .combo('setOptionEnabled', {
-                        value: 'read-data'
-                    }, false)
-                    .combo('setOptionEnabled', {
-                        value: 'write-data'
-                    }, false)
-                    .combo('setSelectedOption', {
-                        value: 'read-component'
-                    });
-    
-                return loadPolicy().always(showPolicy);
-            },
-    
-            /**
-             * Shows the component policy dialog.
-             */
-            showComponentPolicy: function (selection) {
-                // reset the policy message
-                resetPolicyMessage();
-    
-                // update the policy controls visibility
-                $('#component-policy-controls').show();
-                $('#global-policy-controls').hide();
-    
-                // update the visibility
-                $('#policy-selected-component-container').show();
-                
-                var resource;
-                if (selection.empty()) {
-                  $('#selected-policy-component-id').text(nfCanvasUtils.getGroupId());
-                    resource = 'process-groups';
-    
-                    // disable site to site option
-                    $('#component-policy-target')
-                        .combo('setOptionEnabled', {
-                            value: 'write-receive-data'
-                        }, false)
-                        .combo('setOptionEnabled', {
-                            value: 'write-send-data'
-                        }, false)
-                        .combo('setOptionEnabled', {
-                            value: 'read-data'
-                        }, true)
-                        .combo('setOptionEnabled', {
-                            value: 'write-data'
-                        }, true);
-                } else {
-                    var d = selection.datum();
-                    $('#selected-policy-component-id').text(d.id);
-    
-                  if (nfCanvasUtils.isProcessor(selection)) {
-                        resource = 'processors';
-                  } else if (nfCanvasUtils.isProcessGroup(selection)) {
-                        resource = 'process-groups';
-                  } else if (nfCanvasUtils.isInputPort(selection)) {
-                        resource = 'input-ports';
-                  } else if (nfCanvasUtils.isOutputPort(selection)) {
-                        resource = 'output-ports';
-                  } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                        resource = 'remote-process-groups';
-                  } else if (nfCanvasUtils.isLabel(selection)) {
-                        resource = 'labels';
-                  } else if (nfCanvasUtils.isFunnel(selection)) {
-                        resource = 'funnels';
-                    }
-    
-                    // enable site to site option
-                    $('#component-policy-target')
-                        .combo('setOptionEnabled', {
-                            value: 'write-receive-data'
-                      }, nfCanvasUtils.isInputPort(selection) && nfCanvasUtils.getParentGroupId() === null)
-                        .combo('setOptionEnabled', {
-                            value: 'write-send-data'
-                      }, nfCanvasUtils.isOutputPort(selection) && nfCanvasUtils.getParentGroupId() === null)
-                        .combo('setOptionEnabled', {
-                            value: 'read-data'
-                      }, !nfCanvasUtils.isLabel(selection))
-                        .combo('setOptionEnabled', {
-                            value: 'write-data'
-                      }, !nfCanvasUtils.isLabel(selection));
-                }
-    
-                // populate the initial resource
-                $('#selected-policy-component-type').text(resource);
-                $('#component-policy-target').combo('setSelectedOption', {
-                    value: 'read-component'
-                });
-    
-                return loadPolicy().always(showPolicy);
-            },
-    
-            /**
-             * Shows the global policies dialog.
-             */
-            showGlobalPolicies: function () {
-                // reset the policy message
-                resetPolicyMessage();
-    
-                // update the policy controls visibility
-                $('#component-policy-controls').hide();
-                $('#global-policy-controls').show();
-    
-                // reload the current policies
-                var policyType = $('#policy-type-list').combo('getSelectedOption').value;
-                $('#selected-policy-type').text(policyType);
-    
-                if (policyType === 'controller') {
-                    $('#selected-policy-action').text($('#controller-policy-target').combo('getSelectedOption').value);
-              } else if (policyType === 'proxy' || policyType === 'restricted-components') {
-                    $('#selected-policy-action').text('write');
-                } else {
-                    $('#selected-policy-action').text('read');
-                }
-    
-                return loadPolicy().always(showPolicy);
-            }
-        };
-    
-      return nfPolicyManagement;
-  }));
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
deleted file mode 100644
index 09b3725c2cc1..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js
+++ /dev/null
@@ -1,215 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.ErrorHandler',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.Client',
-                  'nf.CanvasUtils',
-                  'nf.ng.Bridge',
-                  'nf.Port'],
-              function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfPort) {
-                  return (nf.PortConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfPort));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.PortConfiguration =
-              factory(require('jquery'),
-                  require('d3'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Common'),
-                  require('nf.Dialog'),
-                  require('nf.Client'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ng.Bridge'),
-                  require('nf.Port')));
-      } else {
-          nf.PortConfiguration = factory(root.$,
-              root.d3,
-              root.nf.ErrorHandler,
-              root.nf.Common,
-              root.nf.Dialog,
-              root.nf.Client,
-              root.nf.CanvasUtils,
-              root.nf.ng.Bridge,
-              root.nf.Port);
-      }
-  }(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfPort) {
-      'use strict';
-    
-        /**
-         * Initializes the port dialog.
-         */
-        var initPortConfigurationDialog = function () {
-            $('#port-configuration').modal({
-                scrollableContentStyle: 'scrollable',
-              headerText: nf._.msg('nf-port-configuration.ConfigurePort'),
-                buttons: [{
-                  buttonText: nf._.msg('nf-port-configuration.Apply'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // get the port data to reference the uri
-                            var portId = $('#port-id').text();
-                            var portData = d3.select('#id-' + portId).datum();
-    
-                            // build the updated port
-                            var port = {
-                                'id': portId,
-                                'name': $('#port-name').val(),
-                                'comments': $('#port-comments').val()
-                            };
-    
-                            // include the concurrent tasks if appropriate
-                            if ($('#port-concurrent-task-container').is(':visible')) {
-                                port['concurrentlySchedulableTaskCount'] = $('#port-concurrent-tasks').val();
-                            }
-    
-                            // mark the processor disabled if appropriate
-                            if ($('#port-enabled').hasClass('checkbox-unchecked')) {
-                                port['state'] = 'DISABLED';
-                            } else if ($('#port-enabled').hasClass('checkbox-checked')) {
-                                port['state'] = 'STOPPED';
-                            }
-    
-                            // build the port entity
-                            var portEntity = {
-                              'revision': nfClient.getRevision(portData),
-                                'component': port
-                            };
-    
-                            // update the selected component
-                            $.ajax({
-                                type: 'PUT',
-                                data: JSON.stringify(portEntity),
-                                url: portData.uri,
-                                dataType: 'json',
-                                contentType: 'application/json'
-                            }).done(function (response) {
-                                // refresh the port component
-                              nfPort.set(response);
-    
-                                // inform Angular app values have changed
-                              nfNgBridge.digest();
-    
-                                // close the details panel
-                                $('#port-configuration').modal('hide');
-                            }).fail(function (xhr, status, error) {
-                                // handle bad request locally to keep the dialog open, allowing the user
-                                // to make changes. if the request fails for another reason, the dialog
-                                // should be closed so the issue can be addressed (stale flow for instance)
-                                if (xhr.status === 400) {
-                                    var errors = xhr.responseText.split('\n');
-    
-                                    var content;
-                                    if (errors.length === 1) {
-                                        content = $('<span></span>').text(errors[0]);
-                                    } else {
-                                      content = nfCommon.formatUnorderedList(errors);
-                                    }
-    
-                                  nfDialog.showOkDialog({
-                                        dialogContent: content,
-                                      headerText: nf._.msg('nf=port-configuration.PortConfigure')
-                                    });
-                                } else {
-                                    // close the details panel
-                                    $('#port-configuration').modal('hide');
-    
-                                    // handle the error
-                                  nfErrorHandler.handleAjaxError(xhr, status, error);
-                                }
-                            });
-                        }
-                    }
-                },
-                    {
-                      buttonText: nf._.msg('nf=port-configuration.Cancel'),
-                        color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
-                        },
-                        handler: {
-                            click: function () {
-                                $('#port-configuration').modal('hide');
-                            }
-                        }
-                    }],
-                handler: {
-                    close: function () {
-                        // clear the port details
-                        $('#port-id').text('');
-                        $('#port-name').val('');
-                        $('#port-enabled').removeClass('checkbox-unchecked checkbox-checked');
-                        $('#port-concurrent-tasks').val('');
-                        $('#port-comments').val('');
-                    }
-                }
-            });
-        };
-    
-        return {
-            init: function () {
-                initPortConfigurationDialog();
-            },
-    
-            /**
-             * Shows the details for the specified selection.
-             *
-             * @argument {selection} selection      The selection
-             */
-            showConfiguration: function (selection) {
-                // if the specified component is a port, load its properties
-              if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
-                    var selectionData = selection.datum();
-    
-                    // determine if the enabled checkbox is checked or not
-                    var portEnableStyle = 'checkbox-checked';
-                    if (selectionData.component.state === 'DISABLED') {
-                        portEnableStyle = 'checkbox-unchecked';
-                    }
-    
-                    // show concurrent tasks for root groups only
-                  if (nfCanvasUtils.getParentGroupId() === null) {
-                        $('#port-concurrent-task-container').show();
-                    } else {
-                        $('#port-concurrent-task-container').hide();
-                    }
-    
-                    // populate the port settings
-                    $('#port-id').text(selectionData.id);
-                    $('#port-name').val(selectionData.component.name);
-                    $('#port-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(portEnableStyle);
-                    $('#port-concurrent-tasks').val(selectionData.component.concurrentlySchedulableTaskCount);
-                    $('#port-comments').val(selectionData.component.comments);
-    
-                    // show the details
-                    $('#port-configuration').modal('show');
-                }
-            }
-        };
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js
deleted file mode 100644
index 9c3c4523382e..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common',
-                'nf.CanvasUtils'],
-            function ($, nfCommon, nfCanvasUtils) {
-                return (nf.PortDetails = factory($, nfCommon, nfCanvasUtils));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.PortDetails =
-            factory(require('jquery'),
-                require('nf.Common'),
-                require('nf.CanvasUtils')));
-    } else {
-        nf.PortDetails = factory(root.$,
-            root.nf.Common,
-            root.nf.CanvasUtils);
-    }
-}(this, function ($, nfCommon, nfCanvasUtils) {
-    'use strict';
-
-    return {
-        init: function () {
-            // configure the processor details dialog
-            $('#port-details').modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: 'Port Details',
-                buttons: [{
-                    buttonText: 'Ok',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // hide the dialog
-                            $('#port-details').modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // clear the processor details
-                        nfCommon.clearField('read-only-port-name');
-                        nfCommon.clearField('read-only-port-id');
-                        nfCommon.clearField('read-only-port-comments');
-                    }
-                }
-            });
-        },
-
-        showDetails: function (selection) {
-            // if the specified component is a processor, load its properties
-            if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
-                var selectionData = selection.datum();
-
-                // populate the port settings
-                nfCommon.populateField('read-only-port-name', selectionData.component.name);
-                nfCommon.populateField('read-only-port-id', selectionData.id);
-                nfCommon.populateField('read-only-port-comments', selectionData.component.comments);
-
-                // show the details
-                $('#port-details').modal('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/canvas/nf-port.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js
deleted file mode 100644
index 06820bfc8f2f..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js
+++ /dev/null
@@ -1,775 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.Common',
-                'nf.Client',
-                'nf.CanvasUtils'],
-            function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
-                return (nf.Port = factory($, d3, nfCommon, nfClient, nfCanvasUtils));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Port =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.Common'),
-                require('nf.Client'),
-                require('nf.CanvasUtils')));
-    } else {
-        nf.Port = factory(root.$,
-            root.d3,
-            root.nf.Common,
-            root.nf.Client,
-            root.nf.CanvasUtils);
-    }
-}(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
-    'use strict';
-
-    var nfConnectable;
-    var nfDraggable;
-    var nfSelectable;
-    var nfContextMenu;
-
-    var PREVIEW_NAME_LENGTH = 15;
-    var OFFSET_VALUE = 25;
-
-    var portDimensions = {
-        width: 240,
-        height: 50
-    };
-    var remotePortDimensions = {
-        width: 240,
-        height: 75
-    };
-
-    // ----------------------------
-    // ports currently on the graph
-    // ----------------------------
-
-    var portMap;
-
-    // -----------------------------------------------------------
-    // cache for components that are added/removed from the canvas
-    // -----------------------------------------------------------
-
-    var removedCache;
-    var addedCache;
-
-    // --------------------
-    // component containers
-    // --------------------
-
-    var portContainer;
-
-    // --------------------------
-    // privately scoped functions
-    // --------------------------
-
-    /**
-     * Selects the port elements against the current port map.
-     */
-    var select = function () {
-        return portContainer.selectAll('g.input-port, g.output-port').data(portMap.values(), function (d) {
-            return d.id;
-        });
-    };
-
-    /**
-     * Renders the ports in the specified selection.
-     *
-     * @param {selection} entered           The selection of ports to be rendered
-     * @param {boolean} selected            Whether the port should be selected
-     */
-    var renderPorts = function (entered, selected) {
-        if (entered.empty()) {
-            return;
-        }
-
-        var port = entered.append('g')
-            .attr({
-                'id': function (d) {
-                    return 'id-' + d.id;
-                },
-                'class': function (d) {
-                    if (d.portType === 'INPUT_PORT') {
-                        return 'input-port component';
-                    } else {
-                        return 'output-port component';
-                    }
-                }
-            })
-            .classed('selected', selected)
-            .call(nfCanvasUtils.position);
-
-        // port border
-        port.append('rect')
-            .attr({
-                'class': 'border',
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': function (d) {
-                    return d.dimensions.height;
-                },
-                'fill': 'transparent',
-                'stroke': 'transparent'
-            });
-
-        // port body
-        port.append('rect')
-            .attr({
-                'class': 'body',
-                'width': function (d) {
-                    return d.dimensions.width;
-                },
-                'height': function (d) {
-                    return d.dimensions.height;
-                },
-                'filter': 'url(#component-drop-shadow)',
-                'stroke-width': 0
-            });
-
-        var offset = 0;
-
-        // conditionally render the remote banner
-        if (nfCanvasUtils.getParentGroupId() === null) {
-            offset = OFFSET_VALUE;
-
-            // port remote banner
-            port.append('rect')
-                .attr({
-                    'class': 'remote-banner',
-                    'width': function (d) {
-                        return d.dimensions.width;
-                    },
-                    'height': offset,
-                    'fill': '#e3e8eb'
-                });
-        }
-
-        // port icon
-        port.append('text')
-            .attr({
-                'class': 'port-icon',
-                'x': 10,
-                'y': 38 + offset
-            })
-            .text(function (d) {
-                if (d.portType === 'INPUT_PORT') {
-                    return '\ue832';
-                } else {
-                    return '\ue833';
-                }
-            });
-
-        // port name
-        port.append('text')
-            .attr({
-                'x': 70,
-                'y': 25 + offset,
-                'width': 95,
-                'height': 30,
-                'class': 'port-name'
-            });
-
-        // make ports selectable
-        port.call(nfSelectable.activate).call(nfContextMenu.activate);
-
-        // only activate dragging and connecting if appropriate
-        port.filter(function (d) {
-            return d.permissions.canWrite && d.permissions.canRead;
-        }).call(nfDraggable.activate).call(nfConnectable.activate);
-    };
-
-    /**
-     * Updates the ports in the specified selection.
-     *
-     * @param {selection} updated               The ports to be updated
-     */
-    var updatePorts = function (updated) {
-        if (updated.empty()) {
-            return;
-        }
-
-        // port border authorization
-        updated.select('rect.border')
-            .classed('unauthorized', function (d) {
-                return d.permissions.canRead === false;
-            });
-
-        // port body authorization
-        updated.select('rect.body')
-            .classed('unauthorized', function (d) {
-                return d.permissions.canRead === false;
-            });
-
-        updated.each(function (portData) {
-            var port = d3.select(this);
-            var details = port.select('g.port-details');
-
-            // update the component behavior as appropriate
-            nfCanvasUtils.editable(port, nfConnectable, nfDraggable);
-
-            // if this process group is visible, render everything
-            if (port.classed('visible')) {
-                if (details.empty()) {
-                    details = port.append('g').attr('class', 'port-details');
-
-                    var offset = 0;
-                    if (nfCanvasUtils.getParentGroupId() === null) {
-                        offset = OFFSET_VALUE;
-
-                        // port transmitting icon
-                        details.append('text')
-                            .attr({
-                                'class': 'port-transmission-icon',
-                                'x': 10,
-                                'y': 18
-                            });
-
-                        // bulletin background
-                        details.append('rect')
-                            .attr({
-                                'class': 'bulletin-background',
-                                'x': function (d) {
-                                    return portData.dimensions.width - offset;
-                                },
-                                'width': offset,
-                                'height': offset
-                            });
-
-                        // bulletin icon
-                        details.append('text')
-                            .attr({
-                                'class': 'bulletin-icon',
-                                'x': function (d) {
-                                    return portData.dimensions.width - 18;
-                                },
-                                'y': 18
-                            })
-                            .text('\uf24a');
-                    }
-
-                    // run status icon
-                    details.append('text')
-                        .attr({
-                            'class': 'run-status-icon',
-                            'x': 50,
-                            'y': function () {
-                                return 25 + offset;
-                            }
-                        });
-
-                    // -------------------
-                    // active thread count
-                    // -------------------
-
-                    // active thread count
-                    details.append('text')
-                        .attr({
-                            'class': 'active-thread-count-icon',
-                            'y': 43 + offset
-                        })
-                        .text('\ue83f');
-
-                    // active thread icon
-                    details.append('text')
-                        .attr({
-                            'class': 'active-thread-count',
-                            'y': 43 + offset
-                        });
-                }
-
-                if (portData.permissions.canRead) {
-                    // update the port name
-                    port.select('text.port-name')
-                        .each(function (d) {
-                            var portName = d3.select(this);
-                            var name = d.component.name;
-                            var words = name.split(/\s+/);
-
-                            // reset the port name to handle any previous state
-                            portName.text(null).selectAll('tspan, title').remove();
-
-                            // handle based on the number of tokens in the port name
-                            if (words.length === 1) {
-                                // apply ellipsis to the port name as necessary
-                                nfCanvasUtils.ellipsis(portName, name);
-                            } else {
-                                nfCanvasUtils.multilineEllipsis(portName, 2, name);
-                            }
-                        }).append('title').text(function (d) {
-                        return d.component.name;
-                    });
-                } else {
-                    // clear the port name
-                    port.select('text.port-name').text(null);
-                }
-
-                // populate the stats
-                port.call(updatePortStatus);
-            } else {
-                if (portData.permissions.canRead) {
-                    // update the port name
-                    port.select('text.port-name')
-                        .text(function (d) {
-                            var name = d.component.name;
-                            if (name.length > PREVIEW_NAME_LENGTH) {
-                                return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
-                            } else {
-                                return name;
-                            }
-                        });
-                } else {
-                    // clear the port name
-                    port.select('text.port-name').text(null);
-                }
-
-                // remove tooltips if necessary
-                port.call(removeTooltips);
-
-                // remove the details if necessary
-                if (!details.empty()) {
-                    details.remove();
-                }
-            }
-        });
-    };
-
-    /**
-     * Updates the port status.
-     *
-     * @param {selection} updated           The ports to be updated
-     */
-    var updatePortStatus = function (updated) {
-        if (updated.empty()) {
-            return;
-        }
-
-        // update the run status
-        updated.select('text.run-status-icon')
-            .attr({
-                'fill': function (d) {
-                    var fill = '#728e9b';
-
-                    if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
-                        fill = '#cf9f5d';
-                    } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
-                        fill = '#7dc7a0';
-                    } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
-                        fill = '#d18686';
-                    }
-
-                    return fill;
-                },
-                'font-family': function (d) {
-                    var family = 'FontAwesome';
-                    if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
-                        family = 'flowfont';
-                    }
-                    return family;
-                }
-            })
-            .text(function (d) {
-                var img = '';
-                if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
-                    img = '\ue802';
-                } else if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
-                    img = '\uf071';
-                } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
-                    img = '\uf04b';
-                } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
-                    img = '\uf04d';
-                }
-                return img;
-            })
-            .each(function (d) {
-                // get the tip
-                var tip = d3.select('#run-status-tip-' + d.id);
-
-                // if there are validation errors generate a tooltip
-                if (d.permissions.canRead && !nfCommon.isEmpty(d.component.validationErrors)) {
-                    // create the tip if necessary
-                    if (tip.empty()) {
-                        tip = d3.select('#port-tooltips').append('div')
-                            .attr('id', function () {
-                                return 'run-status-tip-' + d.id;
-                            })
-                            .attr('class', 'tooltip nifi-tooltip');
-                    }
-
-                    // update the tip
-                    tip.html(function () {
-                        var list = nfCommon.formatUnorderedList(d.component.validationErrors);
-                        if (list === null || list.length === 0) {
-                            return '';
-                        } else {
-                            return $('<div></div>').append(list).html();
-                        }
-                    });
-
-                    // add the tooltip
-                    nfCanvasUtils.canvasTooltip(tip, d3.select(this));
-                } else {
-                    // remove if necessary
-                    if (!tip.empty()) {
-                        tip.remove();
-                    }
-                }
-            });
-
-        updated.select('text.port-transmission-icon')
-            .attr({
-                'font-family': function (d) {
-                    if (d.status.transmitting === true) {
-                        return 'FontAwesome';
-                    } else {
-                        return 'flowfont';
-                    }
-                }
-            })
-            .text(function (d) {
-                if (d.status.transmitting === true) {
-                    return '\uf140';
-                } else {
-                    return '\ue80a';
-                }
-            })
-            .classed('transmitting', function (d) {
-                if (d.status.transmitting === true) {
-                    return true;
-                } else {
-                    return false;
-                }
-            })
-            .classed('not-transmitting', function (d) {
-                if (d.status.transmitting !== true) {
-                    return true;
-                } else {
-                    return false;
-                }
-            });
-
-        updated.each(function (d) {
-            var port = d3.select(this);
-            var offset = 0;
-
-            // -------------------
-            // active thread count
-            // -------------------
-
-            nfCanvasUtils.activeThreadCount(port, d, function (off) {
-                offset = off;
-            });
-
-            // ---------
-            // bulletins
-            // ---------
-
-            port.select('rect.bulletin-background').classed('has-bulletins', function () {
-                return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
-            });
-
-            nfCanvasUtils.bulletins(port, d, function () {
-                return d3.select('#port-tooltips');
-            }, offset);
-        });
-    };
-
-    /**
-     * Removes the ports in the specified selection.
-     *
-     * @param {selection} removed               The ports to be removed
-     */
-    var removePorts = function (removed) {
-        if (removed.empty()) {
-            return;
-        }
-
-        removed.call(removeTooltips).remove();
-    };
-
-    /**
-     * Removes the tooltips for the ports in the specified selection.
-     *
-     * @param {selection} removed
-     */
-    var removeTooltips = function (removed) {
-        removed.each(function (d) {
-            // remove any associated tooltips
-            $('#run-status-tip-' + d.id).remove();
-            $('#bulletin-tip-' + d.id).remove();
-        });
-    };
-
-    var nfPort = {
-        /**
-         * Initializes of the Port handler.
-         *
-         * @param nfConnectableRef   The nfConnectable module.
-         * @param nfDraggableRef   The nfDraggable module.
-         * @param nfSelectableRef   The nfSelectable module.
-         * @param nfContextMenuRef   The nfContextMenu module.
-         */
-        init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
-            nfConnectable = nfConnectableRef;
-            nfDraggable = nfDraggableRef;
-            nfSelectable = nfSelectableRef;
-            nfContextMenu = nfContextMenuRef;
-
-            portMap = d3.map();
-            removedCache = d3.map();
-            addedCache = d3.map();
-
-            // create the port container
-            portContainer = d3.select('#canvas').append('g')
-                .attr({
-                    'pointer-events': 'all',
-                    'class': 'ports'
-                });
-        },
-
-        /**
-         * Adds the specified port entity.
-         *
-         * @param portEntities       The port
-         * @param options           Configuration options
-         */
-        add: function (portEntities, options) {
-            var selectAll = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-            }
-
-            // determine the appropriate dimensions for this port
-            var dimensions = portDimensions;
-            if (nfCanvasUtils.getParentGroupId() === null) {
-                dimensions = remotePortDimensions;
-            }
-
-            // get the current time
-            var now = new Date().getTime();
-
-            var add = function (portEntity) {
-                addedCache.set(portEntity.id, now);
-
-                // add the port
-                portMap.set(portEntity.id, $.extend({
-                    type: 'Port',
-                    dimensions: dimensions,
-                    status: {
-                        activeThreadCount: 0
-                    }
-                }, portEntity));
-            };
-
-            // determine how to handle the specified port status
-            if ($.isArray(portEntities)) {
-                $.each(portEntities, function (_, portNode) {
-                    add(portNode);
-                });
-            } else if (nfCommon.isDefinedAndNotNull(portEntities)) {
-                add(portEntities);
-            }
-
-            // apply the selection and handle new ports
-            var selection = select();
-            selection.enter().call(renderPorts, selectAll);
-            selection.call(updatePorts);
-        },
-
-        /**
-         * Populates the graph with the specified ports.
-         *
-         * @argument {object | array} portNodes                    The ports to add
-         * @argument {object} options                Configuration options
-         */
-        set: function (portEntities, options) {
-            var selectAll = false;
-            var transition = false;
-            if (nfCommon.isDefinedAndNotNull(options)) {
-                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-            }
-
-            // determine the appropriate dimensions for this port
-            var dimensions = portDimensions;
-            if (nfCanvasUtils.getParentGroupId() === null) {
-                dimensions = remotePortDimensions;
-            }
-
-            var set = function (proposedPortEntity) {
-                var currentPortEntity = portMap.get(proposedPortEntity.id);
-
-                // set the port if appropriate due to revision and wasn't previously removed
-                if (nfClient.isNewerRevision(currentPortEntity, proposedPortEntity) && !removedCache.has(proposedPortEntity.id)) {
-                    // add the port
-                    portMap.set(proposedPortEntity.id, $.extend({
-                        type: 'Port',
-                        dimensions: dimensions,
-                        status: {
-                            activeThreadCount: 0
-                        }
-                    }, proposedPortEntity));
-                }
-            };
-
-            // determine how to handle the specified port status
-            if ($.isArray(portEntities)) {
-                $.each(portMap.keys(), function (_, key) {
-                    var currentPortEntity = portMap.get(key);
-                    var isPresent = $.grep(portEntities, function (proposedPortEntity) {
-                        return proposedPortEntity.id === currentPortEntity.id;
-                    });
-
-                    // if the current port is not present and was not recently added, remove it
-                    if (isPresent.length === 0 && !addedCache.has(key)) {
-                        portMap.remove(key);
-                    }
-                });
-                $.each(portEntities, function (_, portNode) {
-                    set(portNode);
-                });
-            } else if (nfCommon.isDefinedAndNotNull(portEntities)) {
-                set(portEntities);
-            }
-
-            // apply the selection and handle all new ports
-            var selection = select();
-            selection.enter().call(renderPorts, selectAll);
-            selection.call(updatePorts).call(nfCanvasUtils.position, transition);
-            selection.exit().call(removePorts);
-        },
-
-        /**
-         * If the port id is specified it is returned. If no port id
-         * specified, all ports are returned.
-         *
-         * @param {string} id
-         */
-        get: function (id) {
-            if (nfCommon.isUndefined(id)) {
-                return portMap.values();
-            } else {
-                return portMap.get(id);
-            }
-        },
-
-        /**
-         * If the port id is specified it is refresh according to the current
-         * state. If not port id is specified, all ports are refreshed.
-         *
-         * @param {string} id      Optional
-         */
-        refresh: function (id) {
-            if (nfCommon.isDefinedAndNotNull(id)) {
-                d3.select('#id-' + id).call(updatePorts);
-            } else {
-                d3.selectAll('g.input-port, g.output-port').call(updatePorts);
-            }
-        },
-
-        /**
-         * Refreshes the components necessary after a pan event.
-         */
-        pan: function () {
-            d3.selectAll('g.input-port.entering, g.output-port.entering, g.input-port.leaving, g.output-port.leaving').call(updatePorts);
-        },
-
-        /**
-         * Reloads the port state from the server and refreshes the UI.
-         * If the port is currently unknown, this function just returns.
-         *
-         * @param {string} id The port id
-         */
-        reload: function (id) {
-            if (portMap.has(id)) {
-                var portEntity = portMap.get(id);
-                return $.ajax({
-                    type: 'GET',
-                    url: portEntity.uri,
-                    dataType: 'json'
-                }).done(function (response) {
-                    nfPort.set(response);
-                });
-            }
-        },
-
-        /**
-         * Positions the component.
-         *
-         * @param {string} id   The id
-         */
-        position: function (id) {
-            d3.select('#id-' + id).call(nfCanvasUtils.position);
-        },
-
-        /**
-         * Removes the specified port.
-         *
-         * @param {string} portIds      The port id(s)
-         */
-        remove: function (portIds) {
-            var now = new Date().getTime();
-
-            if ($.isArray(portIds)) {
-                $.each(portIds, function (_, portId) {
-                    removedCache.set(portId, now);
-                    portMap.remove(portId);
-                });
-            } else {
-                removedCache.set(portIds, now);
-                portMap.remove(portIds);
-            }
-
-            // apply the selection and handle all removed ports
-            select().exit().call(removePorts);
-        },
-
-        /**
-         * Removes all ports..
-         */
-        removeAll: function () {
-            nfPort.remove(portMap.keys());
-        },
-
-        /**
-         * Expires the caches up to the specified timestamp.
-         *
-         * @param timestamp
-         */
-        expireCaches: function (timestamp) {
-            var expire = function (cache) {
-                cache.forEach(function (id, entryTimestamp) {
-                    if (timestamp > entryTimestamp) {
-                        cache.remove(id);
-                    }
-                });
-            };
-
-            expire(addedCache);
-            expire(removedCache);
-        }
-    };
-
-    return nfPort;
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js
deleted file mode 100644
index 00810c7fc0e9..000000000000
--- 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
+++ /dev/null
@@ -1,382 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.ErrorHandler',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.Client',
-                'nf.ProcessGroup',
-                'nf.Shell',
-                'nf.CanvasUtils'],
-            function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfProcessGroup, nfShell, nfCanvasUtils) {
-                return (nf.ProcessGroupConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfProcessGroup, nfShell, nfCanvasUtils));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ProcessGroupConfiguration =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.ErrorHandler'),
-                require('nf.Common'),
-                require('nf.Dialog'),
-                require('nf.Client'),
-                require('nf.ProcessGroup'),
-                require('nf.Shell'),
-                require('nf.CanvasUtils')));
-    } else {
-        nf.ProcessGroupConfiguration = factory(root.$,
-            root.d3,
-            root.nf.ErrorHandler,
-            root.nf.Common,
-            root.nf.Dialog,
-            root.nf.Client,
-            root.nf.ProcessGroup,
-            root.nf.Shell,
-            root.nf.CanvasUtils);
-    }
-}(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfProcessGroup, nfShell, nfCanvasUtils) {
-    'use strict';
-
-    var nfControllerServices;
-
-    var config = {
-        urls: {
-            api: '../nifi-api'
-        }
-    };
-
-    /**
-     * Initializes the general tab.
-     */
-    var initGeneral = function () {
-    };
-
-    /**
-     * Gets the controller services table.
-     *
-     * @returns {*|jQuery|HTMLElement}
-     */
-    var getControllerServicesTable = function () {
-        return $('#process-group-controller-services-table');
-    };
-
-    /**
-     * Saves the configuration for the specified group.
-     *
-     * @param version
-     * @param groupId
-     */
-    var saveConfiguration = function (version, groupId) {
-        // build the entity
-        var entity = {
-            'revision': nfClient.getRevision({
-                'revision': {
-                    'version': version
-                }
-            }),
-            'component': {
-                'id': groupId,
-                'name': $('#process-group-name').val(),
-                'comments': $('#process-group-comments').val()
-            }
-        };
-
-        // update the selected component
-        $.ajax({
-            type: 'PUT',
-            data: JSON.stringify(entity),
-            url: config.urls.api + '/process-groups/' + encodeURIComponent(groupId),
-            dataType: 'json',
-            contentType: 'application/json'
-        }).done(function (response) {
-            // refresh the process group if necessary
-            if (response.permissions.canRead && response.component.parentGroupId === nfCanvasUtils.getGroupId()) {
-                nfProcessGroup.set(response);
-            }
-
-            // show the result dialog
-            nfDialog.showOkDialog({
-                headerText: 'Process Group Configuration',
-                dialogContent: 'Process group configuration successfully saved.'
-            });
-
-            // update the click listener for the updated revision
-            $('#process-group-configuration-save').off('click').on('click', function () {
-                saveConfiguration(response.revision.version, groupId);
-            });
-
-            nfCanvasUtils.reload();
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Loads the configuration for the specified process group.
-     *
-     * @param {string} groupId
-     */
-    var loadConfiguration = function (groupId) {
-        var setUnauthorizedText = function () {
-            $('#read-only-process-group-name').addClass('unset').text('Unauthorized');
-            $('#read-only-process-group-comments').addClass('unset').text('Unauthorized');
-        };
-
-        var setEditable = function (editable) {
-            if (editable) {
-                $('#process-group-configuration div.editable').show();
-                $('#process-group-configuration div.read-only').hide();
-                $('#process-group-configuration-save').show();
-            } else {
-                $('#process-group-configuration div.editable').hide();
-                $('#process-group-configuration div.read-only').show();
-                $('#process-group-configuration-save').hide();
-            }
-        };
-
-        // record the group id
-        $('#process-group-id').text(groupId);
-
-        // update the click listener
-        $('#process-group-configuration-refresh-button').off('click').on('click', function () {
-            loadConfiguration(groupId);
-        });
-
-        // update the new controller service click listener
-        $('#add-process-group-configuration-controller-service').off('click').on('click', function () {
-            var selectedTab = $('#process-group-configuration-tabs li.selected-tab').text();
-            if (selectedTab === 'Controller Services') {
-                var controllerServicesUri = config.urls.api + '/process-groups/' + encodeURIComponent(groupId) + '/controller-services';
-                nfControllerServices.promptNewControllerService(controllerServicesUri, getControllerServicesTable());
-            }
-        });
-
-        var processGroup = $.Deferred(function (deferred) {
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/process-groups/' + encodeURIComponent(groupId),
-                dataType: 'json'
-            }).done(function (response) {
-                // store the process group
-                $('#process-group-configuration').data('process-group', response);
-
-                if (response.permissions.canWrite) {
-                    var processGroup = response.component;
-
-                    // populate the process group settings
-                    $('#process-group-name').removeClass('unset').val(processGroup.name);
-                    $('#process-group-comments').removeClass('unset').val(processGroup.comments);
-
-                    // populate the header
-                    $('#process-group-configuration-header-text').text(processGroup.name + ' Configuration');
-
-                    setEditable(true);
-
-                    // register the click listener for the save button
-                    $('#process-group-configuration-save').off('click').on('click', function () {
-                        saveConfiguration(response.revision.version, response.id);
-                    });
-                } else {
-                    if (response.permissions.canRead) {
-                        // populate the process group settings
-                        $('#read-only-process-group-name').removeClass('unset').text(response.component.name);
-                        $('#read-only-process-group-comments').removeClass('unset').text(response.component.comments);
-
-                        // populate the header
-                        $('#process-group-configuration-header-text').text(processGroup.name + ' Configuration');
-                    } else {
-                        setUnauthorizedText();
-                    }
-
-                    setEditable(false);
-                }
-                deferred.resolve();
-            }).fail(function (xhr, status, error) {
-                if (xhr.status === 403) {
-                    if (groupId === nfCanvasUtils.getGroupId()) {
-                        $('#process-group-configuration').data('process-group', {
-                            'permissions': {
-                                canRead: false,
-                                canWrite: nfCanvasUtils.canWrite()
-                            }
-                        });
-                    } else {
-                        $('#process-group-configuration').data('process-group', nfProcessGroup.get(groupId));
-                    }
-
-                    setUnauthorizedText();
-                    setEditable(false);
-                    deferred.resolve();
-                } else {
-                    deferred.reject(xhr, status, error);
-                }
-            });
-        }).promise();
-
-        // load the controller services
-        var controllerServicesUri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(groupId) + '/controller-services';
-        var controllerServices = nfControllerServices.loadControllerServices(controllerServicesUri, getControllerServicesTable());
-
-        // wait for everything to complete
-        return $.when(processGroup, controllerServices).done(function (processGroupResult, controllerServicesResult) {
-            var controllerServicesResponse = controllerServicesResult[0];
-
-            // update the current time
-            $('#process-group-configuration-last-refreshed').text(controllerServicesResponse.currentTime);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Shows the process group configuration.
-     */
-    var showConfiguration = function () {
-        // show the configuration dialog
-        nfShell.showContent('#process-group-configuration').done(function () {
-            reset();
-        });
-
-        //reset content to account for possible policy changes
-        $('#process-group-configuration-tabs').find('.selected-tab').click();
-
-        // adjust the table size
-        nfProcessGroupConfiguration.resetTableSize();
-    };
-
-    /**
-     * Resets the process group configuration dialog.
-     */
-    var reset = function () {
-        $('#process-group-configuration').removeData('process-group');
-
-        // reset button state
-        $('#process-group-configuration-save').mouseout();
-
-        // reset the fields
-        $('#process-group-id').text('');
-        $('#process-group-name').val('');
-        $('#process-group-comments').val('');
-
-        // reset the header
-        $('#process-group-configuration-header-text').text('Process Group Configuration');
-    };
-
-    var nfProcessGroupConfiguration = {
-
-        /**
-         * Initialize the process group configuration.
-         *
-         * @param nfControllerServicesRef   The nfControllerServices module.
-         */
-        init: function (nfControllerServicesRef) {
-            nfControllerServices = nfControllerServicesRef;
-
-            // initialize the process group configuration tabs
-            $('#process-group-configuration-tabs').tabbs({
-                tabStyle: 'tab',
-                selectedTabStyle: 'selected-tab',
-                scrollableTabContentStyle: 'scrollable',
-                tabs: [{
-                    name: 'General',
-                    tabContentId: 'general-process-group-configuration-tab-content'
-                }, {
-                    name: 'Controller Services',
-                    tabContentId: 'process-group-controller-services-tab-content'
-                }],
-                select: function () {
-                    var processGroup = $('#process-group-configuration').data('process-group');
-                    var canWrite = nfCommon.isDefinedAndNotNull(processGroup) ? processGroup.permissions.canWrite : false;
-
-                    var tab = $(this).text();
-                    if (tab === 'General') {
-                        $('#flow-cs-availability').hide();
-                        $('#add-process-group-configuration-controller-service').hide();
-
-                        if (canWrite) {
-                            $('#process-group-configuration-save').show();
-                        } else {
-                            $('#process-group-configuration-save').hide();
-                        }
-                    } else {
-                        $('#flow-cs-availability').show();
-                        $('#process-group-configuration-save').hide();
-
-                        if (canWrite) {
-                            $('#add-process-group-configuration-controller-service').show();
-                            $('#process-group-controller-services-tab-content').css('top', '32px');
-                        } else {
-                            $('#add-process-group-configuration-controller-service').hide();
-                            $('#process-group-controller-services-tab-content').css('top', '0');
-                        }
-
-                        // resize the table
-                        nfProcessGroupConfiguration.resetTableSize();
-                    }
-                }
-            });
-
-            // initialize each tab
-            initGeneral();
-            nfControllerServices.init(getControllerServicesTable());
-        },
-
-        /**
-         * Update the size of the grid based on its container's current size.
-         */
-        resetTableSize: function () {
-            nfControllerServices.resetTableSize(getControllerServicesTable());
-        },
-
-        /**
-         * Shows the settings dialog.
-         */
-        showConfiguration: function (groupId) {
-            return loadConfiguration(groupId).done(showConfiguration);
-        },
-
-        /**
-         * Loads the configuration for the specified process group.
-         *
-         * @param groupId
-         */
-        loadConfiguration: function (groupId) {
-            return loadConfiguration(groupId);
-        },
-
-        /**
-         * Selects the specified controller service.
-         *
-         * @param {string} controllerServiceId
-         */
-        selectControllerService: function (controllerServiceId) {
-            var controllerServiceGrid = getControllerServicesTable().data('gridInstance');
-            var controllerServiceData = controllerServiceGrid.getData();
-
-            // select the desired service
-            var row = controllerServiceData.getRowById(controllerServiceId);
-            controllerServiceGrid.setSelectedRows([row]);
-            controllerServiceGrid.scrollRowIntoView(row);
-
-            // select the controller services tab
-            $('#process-group-configuration-tabs').find('li:eq(1)').click();
-        }
-    };
-
-    return nfProcessGroupConfiguration;
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
deleted file mode 100644
index 4ca9925f6bba..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
+++ /dev/null
@@ -1,1292 +0,0 @@
-    /*
-     * 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 d3, define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.Connection',
-                  'nf.Common',
-                  'nf.Client',
-                  'nf.CanvasUtils',
-                  'nf.Dialog'],
-              function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, nfDialog) {
-                  return (nf.ProcessGroup = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, nfDialog));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ProcessGroup =
-              factory(require('jquery'),
-                  require('d3'),
-                  require('nf.Connection'),
-                  require('nf.Common'),
-                  require('nf.Client'),
-                  require('nf.CanvasUtils'),
-                  require('nf.Dialog')));
-      } else {
-          nf.ProcessGroup = factory(root.$,
-              root.d3,
-              root.nf.Connection,
-              root.nf.Common,
-              root.nf.Client,
-              root.nf.CanvasUtils,
-              root.nf.Dialog);
-      }
-  }(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, nfDialog) {
-      'use strict';
-  
-      var nfConnectable;
-      var nfDraggable;
-      var nfSelectable;
-      var nfContextMenu;
-    
-        var PREVIEW_NAME_LENGTH = 30;
-    
-        var dimensions = {
-            width: 380,
-            height: 172
-        };
-    
-        // ----------------------------
-        // process groups currently on the graph
-        // ----------------------------
-    
-        var processGroupMap;
-    
-      // -----------------------------------------------------------
-      // cache for components that are added/removed from the canvas
-      // -----------------------------------------------------------
-  
-      var removedCache;
-      var addedCache;
-  
-        // --------------------
-        // component containers
-        // --------------------
-    
-        var processGroupContainer;
-    
-        // --------------------------
-        // privately scoped functions
-        // --------------------------
-    
-        /**
-         * Gets the process group comments.
-         *
-         * @param {object} d
-         */
-        var getProcessGroupComments = function (d) {
-          if (nfCommon.isBlank(d.component.comments)) {
-              return nf._.msg('nf-process-group.Message1');
-            } else {
-                return d.component.comments;
-            }
-        };
-    
-        /**
-         * Selects the process group elements against the current process group map.
-         */
-        var select = function () {
-            return processGroupContainer.selectAll('g.process-group').data(processGroupMap.values(), function (d) {
-                return d.id;
-            });
-        };
-    
-        /**
-         * Renders the process groups in the specified selection.
-         *
-         * @param {selection} entered           The selection of process groups to be rendered
-         * @param {boolean} selected            Whether the process group should be selected
-         */
-        var renderProcessGroups = function (entered, selected) {
-            if (entered.empty()) {
-                return;
-            }
-    
-            var processGroup = entered.append('g')
-                .attr({
-                    'id': function (d) {
-                        return 'id-' + d.id;
-                    },
-                    'class': 'process-group component'
-                })
-                .classed('selected', selected)
-              .call(nfCanvasUtils.position);
-    
-            // ----
-            // body
-            // ----
-    
-            // process group border
-            processGroup.append('rect')
-                .attr({
-                    'class': 'border',
-                    'width': function (d) {
-                        return d.dimensions.width;
-                    },
-                    'height': function (d) {
-                        return d.dimensions.height;
-                    },
-                    'fill': 'transparent',
-                    'stroke': 'transparent'
-                });
-    
-            // process group body
-            processGroup.append('rect')
-                .attr({
-                    'class': 'body',
-                    'width': function (d) {
-                        return d.dimensions.width;
-                    },
-                    'height': function (d) {
-                        return d.dimensions.height;
-                    },
-                    'filter': 'url(#component-drop-shadow)',
-                    'stroke-width': 0
-                });
-    
-            // process group name background
-            processGroup.append('rect')
-                .attr({
-                    'width': function (d) {
-                        return d.dimensions.width;
-                    },
-                    'height': 32,
-                    'fill': '#b8c6cd'
-                });
-    
-            // process group name
-            processGroup.append('text')
-                .attr({
-                    'x': 10,
-                    'y': 20,
-                    'width': 316,
-                    'height': 16,
-                    'class': 'process-group-name'
-                });
-    
-            // always support selecting and navigation
-            processGroup.on('dblclick', function (d) {
-                // enter this group on double click
-              nfProcessGroup.enterGroup(d.id);
-            })
-              .call(nfSelectable.activate).call(nfContextMenu.activate);
-    
-            // only support dragging, connection, and drag and drop if appropriate
-            processGroup.filter(function (d) {
-                return d.permissions.canWrite && d.permissions.canRead;
-            })
-                .on('mouseover.drop', function (d) {
-                    // Using mouseover/out to workaround chrome issue #122746
-    
-                    // get the target and ensure its not already been marked for drop
-                    var target = d3.select(this);
-                    if (!target.classed('drop')) {
-                        var targetData = target.datum();
-    
-                        // see if there is a selection being dragged
-                        var drag = d3.select('rect.drag-selection');
-                        if (!drag.empty()) {
-                            // filter the current selection by this group
-                          var selection = nfCanvasUtils.getSelection().filter(function (d) {
-                                return targetData.id === d.id;
-                            });
-    
-                            // ensure this group isn't in the selection
-                            if (selection.empty()) {
-                                // mark that we are hovering over a drop area if appropriate
-                                target.classed('drop', function () {
-                                    // get the current selection and ensure its disconnected
-                                  return nfConnection.isDisconnected(nfCanvasUtils.getSelection());
-                                });
-                            }
-                        }
-                    }
-                })
-                .on('mouseout.drop', function (d) {
-                    // mark that we are no longer hovering over a drop area unconditionally
-                    d3.select(this).classed('drop', false);
-                })
-              .call(nfDraggable.activate)
-              .call(nfConnectable.activate);
-        };
-    
-        // attempt of space between component count and icon for process group contents
-        var CONTENTS_SPACER = 10;
-      var CONTENTS_VALUE_SPACER = 5;
-    
-        /**
-         * Updates the process groups in the specified selection.
-         *
-         * @param {selection} updated               The process groups to be updated
-         */
-        var updateProcessGroups = function (updated) {
-            if (updated.empty()) {
-                return;
-            }
-    
-            // process group border authorization
-            updated.select('rect.border')
-                .classed('unauthorized', function (d) {
-                    return d.permissions.canRead === false;
-                });
-    
-            // process group body authorization
-            updated.select('rect.body')
-                .classed('unauthorized', function (d) {
-                    return d.permissions.canRead === false;
-                });
-    
-            updated.each(function (processGroupData) {
-                var processGroup = d3.select(this);
-                var details = processGroup.select('g.process-group-details');
-    
-                // update the component behavior as appropriate
-              nfCanvasUtils.editable(processGroup, nfConnectable, nfDraggable);
-    
-                // if this processor is visible, render everything
-                if (processGroup.classed('visible')) {
-                    if (details.empty()) {
-                        details = processGroup.append('g').attr('class', 'process-group-details');
-    
-                        // -------------------
-                        // contents background
-                        // -------------------
-    
-                        details.append('rect')
-                            .attr({
-                                'x': 0,
-                                'y': 32,
-                                'width': function () {
-                                    return processGroupData.dimensions.width
-                                },
-                                'height': 24,
-                                'fill': '#e3e8eb'
-                            });
-    
-                        // --------
-                        // contents
-                        // --------
-    
-                        // transmitting icon
-                        details.append('text')
-                            .attr({
-                                'x': 10,
-                                'y': 49,
-                                'class': 'process-group-transmitting process-group-contents-icon',
-                                'font-family': 'FontAwesome'
-                            })
-                            .text('\uf140');
-    
-                        // transmitting count
-                        details.append('text')
-                            .attr({
-                                'y': 49,
-                                'class': 'process-group-transmitting-count process-group-contents-count'
-                            });
-    
-                        // not transmitting icon
-                        details.append('text')
-                            .attr({
-                                'y': 49,
-                                'class': 'process-group-not-transmitting process-group-contents-icon',
-                                'font-family': 'flowfont'
-                            })
-                            .text('\ue80a');
-    
-                        // not transmitting count
-                        details.append('text')
-                            .attr({
-                                'y': 49,
-                                'class': 'process-group-not-transmitting-count process-group-contents-count'
-                            });
-    
-                        // running icon
-                        details.append('text')
-                            .attr({
-                                'y': 49,
-                                'class': 'process-group-running process-group-contents-icon',
-                                'font-family': 'FontAwesome'
-                            })
-                            .text('\uf04b');
-    
-                        // running count
-                        details.append('text')
-                            .attr({
-                                'y': 49,
-                                'class': 'process-group-running-count process-group-contents-count'
-                            });
-    
-                        // stopped icon
-                        details.append('text')
-                            .attr({
-                                'y': 49,
-                                'class': 'process-group-stopped process-group-contents-icon',
-                                'font-family': 'FontAwesome'
-                            })
-                            .text('\uf04d');
-    
-                        // stopped count
-                        details.append('text')
-                            .attr({
-                                'y': 49,
-                                'class': 'process-group-stopped-count process-group-contents-count'
-                            });
-    
-                        // invalid icon
-                        details.append('text')
-                            .attr({
-                                'y': 49,
-                                'class': 'process-group-invalid process-group-contents-icon',
-                                'font-family': 'FontAwesome'
-                            })
-                            .text('\uf071');
-    
-                        // invalid count
-                        details.append('text')
-                            .attr({
-                                'y': 49,
-                                'class': 'process-group-invalid-count process-group-contents-count'
-                            });
-    
-                        // disabled icon
-                        details.append('text')
-                            .attr({
-                                'y': 49,
-                                'class': 'process-group-disabled process-group-contents-icon',
-                                'font-family': 'flowfont'
-                            })
-                            .text('\ue802');
-    
-                        // disabled count
-                        details.append('text')
-                            .attr({
-                                'y': 49,
-                                'class': 'process-group-disabled-count process-group-contents-count'
-                            });
-    
-                        // ----------------
-                        // stats background
-                        // ----------------
-    
-                        // queued
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processGroupData.dimensions.width;
-                                },
-                                'height': 19,
-                                'x': 0,
-                                'y': 66,
-                                'fill': '#f4f6f7'
-                            });
-    
-                        // border
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processGroupData.dimensions.width;
-                                },
-                                'height': 1,
-                                'x': 0,
-                                'y': 84,
-                                'fill': '#c7d2d7'
-                            });
-    
-                        // in
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processGroupData.dimensions.width;
-                                },
-                                'height': 19,
-                                'x': 0,
-                                'y': 85,
-                                'fill': '#ffffff'
-                            });
-    
-                        // border
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processGroupData.dimensions.width;
-                                },
-                                'height': 1,
-                                'x': 0,
-                                'y': 103,
-                                'fill': '#c7d2d7'
-                            });
-    
-                        // read/write
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processGroupData.dimensions.width;
-                                },
-                                'height': 19,
-                                'x': 0,
-                                'y': 104,
-                                'fill': '#f4f6f7'
-                            });
-    
-                        // border
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processGroupData.dimensions.width;
-                                },
-                                'height': 1,
-                                'x': 0,
-                                'y': 122,
-                                'fill': '#c7d2d7'
-                            });
-    
-                        // out
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processGroupData.dimensions.width;
-                                },
-                                'height': 19,
-                                'x': 0,
-                                'y': 123,
-                                'fill': '#ffffff'
-                            });
-    
-                        // -----
-                        // stats
-                        // -----
-    
-                        // stats label container
-                        var processGroupStatsLabel = details.append('g')
-                            .attr({
-                                'transform': 'translate(6, 75)'
-                            });
-    
-                        // queued label
-                        processGroupStatsLabel.append('text')
-                            .attr({
-                                'width': 73,
-                                'height': 10,
-                                'x': 4,
-                                'y': 5,
-                                'class': 'stats-label'
-                            })
-                          .text(nf._.msg('nf-process-group.Queued'));
-    
-                        // in label
-                        processGroupStatsLabel.append('text')
-                            .attr({
-                                'width': 73,
-                                'height': 10,
-                                'x': 4,
-                                'y': 24,
-                                'class': 'stats-label'
-                            })
-                          .text(nf._.msg('nf-process-group.In'));
-    
-                        // read/write label
-                        processGroupStatsLabel.append('text')
-                            .attr({
-                                'width': 73,
-                                'height': 10,
-                                'x': 4,
-                                'y': 42,
-                                'class': 'stats-label'
-                            })
-                          .text(nf._.msg('nf-process-group.ReadWrite'));
-    
-                        // out label
-                        processGroupStatsLabel.append('text')
-                            .attr({
-                                'width': 73,
-                                'height': 10,
-                                'x': 4,
-                                'y': 60,
-                                'class': 'stats-label'
-                            })
-                          .text(nf._.msg('nf-process-group.Out'));
-    
-                        // stats value container
-                        var processGroupStatsValue = details.append('g')
-                            .attr({
-                                'transform': 'translate(95, 75)'
-                            });
-    
-                        // queued value
-                        var queuedText = processGroupStatsValue.append('text')
-                            .attr({
-                                'width': 180,
-                                'height': 10,
-                                'x': 4,
-                                'y': 5,
-                                'class': 'process-group-queued stats-value'
-                            });
-    
-                        // queued count
-                        queuedText.append('tspan')
-                            .attr({
-                                'class': 'count'
-                            });
-    
-                        // queued size
-                        queuedText.append('tspan')
-                            .attr({
-                                'class': 'size'
-                            });
-    
-                        // in value
-                        var inText = processGroupStatsValue.append('text')
-                            .attr({
-                                'width': 180,
-                                'height': 10,
-                                'x': 4,
-                                'y': 24,
-                                'class': 'process-group-in stats-value'
-                            });
-    
-                        // in count
-                        inText.append('tspan')
-                            .attr({
-                                'class': 'count'
-                            });
-    
-                        // in size
-                        inText.append('tspan')
-                            .attr({
-                                'class': 'size'
-                            });
-    
-                        // in
-                        inText.append('tspan')
-                            .attr({
-                                'class': 'ports'
-                            });
-    
-                        // read/write value
-                        processGroupStatsValue.append('text')
-                            .attr({
-                                'width': 180,
-                                'height': 10,
-                                'x': 4,
-                                'y': 42,
-                                'class': 'process-group-read-write stats-value'
-                            });
-    
-                        // out value
-                        var outText = processGroupStatsValue.append('text')
-                            .attr({
-                                'width': 180,
-                                'height': 10,
-                                'x': 4,
-                                'y': 60,
-                                'class': 'process-group-out stats-value'
-                            });
-    
-                        // out ports
-                        outText.append('tspan')
-                            .attr({
-                                'class': 'ports'
-                            });
-    
-                        // out count
-                        outText.append('tspan')
-                            .attr({
-                                'class': 'count'
-                            });
-    
-                        // out size
-                        outText.append('tspan')
-                            .attr({
-                                'class': 'size'
-                            });
-    
-                        // stats value container
-                        var processGroupStatsInfo = details.append('g')
-                            .attr({
-                                'transform': 'translate(335, 75)'
-                            });
-    
-                        // in info
-                        processGroupStatsInfo.append('text')
-                            .attr({
-                                'width': 25,
-                                'height': 10,
-                                'x': 4,
-                                'y': 24,
-                                'class': 'stats-info'
-                            })
-                          .text(nf._.msg('nf-process-group.5min'));
-    
-                        // read/write info
-                        processGroupStatsInfo.append('text')
-                            .attr({
-                                'width': 25,
-                                'height': 10,
-                                'x': 4,
-                                'y': 42,
-                                'class': 'stats-info'
-                            })
-                          .text(nf._.msg('nf-process-group.5min'));
-    
-                        // out info
-                        processGroupStatsInfo.append('text')
-                            .attr({
-                                'width': 25,
-                                'height': 10,
-                                'x': 4,
-                                'y': 60,
-                                'class': 'stats-info'
-                            })
-                          .text(nf._.msg('nf-process-group.5min'));
-    
-                        // --------
-                        // comments
-                        // --------
-    
-                        // process group comments
-                        details.append('text')
-                            .attr({
-                                'x': 10,
-                                'y': 160,
-                                'width': 342,
-                                'height': 22,
-                                'class': 'process-group-comments'
-                            });
-    
-                        // -------------------
-                        // active thread count
-                        // -------------------
-    
-                        // active thread count
-                        details.append('text')
-                            .attr({
-                                'class': 'active-thread-count-icon',
-                                'y': 20
-                            })
-                            .text('\ue83f');
-    
-                        // active thread icon
-                        details.append('text')
-                            .attr({
-                                'class': 'active-thread-count',
-                                'y': 20
-                            });
-    
-                        // ---------
-                        // bulletins
-                        // ---------
-    
-                        // bulletin background
-                        details.append('rect')
-                            .attr({
-                                'class': 'bulletin-background',
-                                'x': function () {
-                                    return processGroupData.dimensions.width - 24;
-                                },
-                                'y': 32,
-                                'width': 24,
-                                'height': 24
-                            });
-    
-                        // bulletin icon
-                        details.append('text')
-                            .attr({
-                                'class': 'bulletin-icon',
-                                'x': function () {
-                                    return processGroupData.dimensions.width - 17;
-                                },
-                                'y': 49
-                            })
-                            .text('\uf24a');
-                    }
-    
-                    // update transmitting
-                  var transmitting = details.select('text.process-group-transmitting')
-                      .classed('transmitting', function (d) {
-                          return d.permissions.canRead && d.activeRemotePortCount > 0;
-                      })
-                      .classed('zero', function (d) {
-                          return d.permissions.canRead && d.activeRemotePortCount === 0;
-                      });
-                    var transmittingCount = details.select('text.process-group-transmitting-count')
-                      .attr('x', function () {
-                          var transmittingCountX = parseInt(transmitting.attr('x'), 10);
-                          return transmittingCountX + Math.round(transmitting.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
-                      })
-                        .text(function (d) {
-                            return d.activeRemotePortCount;
-                        });
-    
-                    // update not transmitting
-                    var notTransmitting = details.select('text.process-group-not-transmitting')
-                      .classed('not-transmitting', function (d) {
-                          return d.permissions.canRead && d.inactiveRemotePortCount > 0;
-                      })
-                      .classed('zero', function (d) {
-                          return d.permissions.canRead && d.inactiveRemotePortCount === 0;
-                      })
-                        .attr('x', function () {
-                            var transmittingX = parseInt(transmittingCount.attr('x'), 10);
-                          return transmittingX + Math.round(transmittingCount.node().getComputedTextLength()) + CONTENTS_SPACER;
-                        });
-                    var notTransmittingCount = details.select('text.process-group-not-transmitting-count')
-                        .attr('x', function () {
-                            var notTransmittingCountX = parseInt(notTransmitting.attr('x'), 10);
-                          return notTransmittingCountX + Math.round(notTransmitting.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
-                        })
-                        .text(function (d) {
-                            return d.inactiveRemotePortCount;
-                        });
-    
-                    // update running
-                    var running = details.select('text.process-group-running')
-                      .classed('running', function (d) {
-                          return d.permissions.canRead && d.component.runningCount > 0;
-                      })
-                      .classed('zero', function (d) {
-                          return d.permissions.canRead && d.component.runningCount === 0;
-                      })
-                        .attr('x', function () {
-                            var notTransmittingX = parseInt(notTransmittingCount.attr('x'), 10);
-                          return notTransmittingX + Math.round(notTransmittingCount.node().getComputedTextLength()) + CONTENTS_SPACER;
-                        });
-                    var runningCount = details.select('text.process-group-running-count')
-                        .attr('x', function () {
-                            var runningCountX = parseInt(running.attr('x'), 10);
-                          return runningCountX + Math.round(running.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
-                        })
-                        .text(function (d) {
-                            return d.runningCount;
-                        });
-    
-                    // update stopped
-                    var stopped = details.select('text.process-group-stopped')
-                      .classed('stopped', function (d) {
-                          return d.permissions.canRead && d.component.stoppedCount > 0;
-                      })
-                      .classed('zero', function (d) {
-                          return d.permissions.canRead && d.component.stoppedCount === 0;
-                      })
-                        .attr('x', function () {
-                            var runningX = parseInt(runningCount.attr('x'), 10);
-                          return runningX + Math.round(runningCount.node().getComputedTextLength()) + CONTENTS_SPACER;
-                        });
-                    var stoppedCount = details.select('text.process-group-stopped-count')
-                        .attr('x', function () {
-                            var stoppedCountX = parseInt(stopped.attr('x'), 10);
-                          return stoppedCountX + Math.round(stopped.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
-                        })
-                        .text(function (d) {
-                            return d.stoppedCount;
-                        });
-    
-                    // update invalid
-                    var invalid = details.select('text.process-group-invalid')
-                      .classed('invalid', function (d) {
-                            return d.permissions.canRead && d.component.invalidCount > 0;
-                      })
-                      .classed('zero', function (d) {
-                          return d.permissions.canRead && d.component.invalidCount === 0;
-                      })
-                      .attr('x', function () {
-                          var stoppedX = parseInt(stoppedCount.attr('x'), 10);
-                          return stoppedX + Math.round(stoppedCount.node().getComputedTextLength()) + CONTENTS_SPACER;
-                        });
-                    var invalidCount = details.select('text.process-group-invalid-count')
-                        .attr('x', function () {
-                            var invalidCountX = parseInt(invalid.attr('x'), 10);
-                          return invalidCountX + Math.round(invalid.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
-                        })
-                        .text(function (d) {
-                            return d.invalidCount;
-                        });
-    
-                    // update disabled
-                    var disabled = details.select('text.process-group-disabled')
-                      .classed('disabled', function (d) {
-                          return d.permissions.canRead && d.component.disabledCount > 0;
-                      })
-                      .classed('zero', function (d) {
-                          return d.permissions.canRead && d.component.disabledCount === 0;
-                      })
-                        .attr('x', function () {
-                            var invalidX = parseInt(invalidCount.attr('x'), 10);
-                          return invalidX + Math.round(invalidCount.node().getComputedTextLength()) + CONTENTS_SPACER;
-                        });
-                    details.select('text.process-group-disabled-count')
-                        .attr('x', function () {
-                            var disabledCountX = parseInt(disabled.attr('x'), 10);
-                          return disabledCountX + Math.round(disabled.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
-                        })
-                        .text(function (d) {
-                            return d.disabledCount;
-                        });
-    
-                    if (processGroupData.permissions.canRead) {
-                        // update the process group comments
-                        details.select('text.process-group-comments')
-                            .each(function (d) {
-                                var processGroupComments = d3.select(this);
-    
-                                // reset the process group name to handle any previous state
-                                processGroupComments.text(null).selectAll('tspan, title').remove();
-    
-                                // apply ellipsis to the port name as necessary
-                              nfCanvasUtils.ellipsis(processGroupComments, getProcessGroupComments(d));
-                            }).classed('unset', function (d) {
-                          return nfCommon.isBlank(d.component.comments);
-                        }).append('title').text(function (d) {
-                            return getProcessGroupComments(d);
-                        });
-    
-                        // update the process group name
-                        processGroup.select('text.process-group-name')
-                            .each(function (d) {
-                                var processGroupName = d3.select(this);
-    
-                                // reset the process group name to handle any previous state
-                                processGroupName.text(null).selectAll('title').remove();
-    
-                                // apply ellipsis to the process group name as necessary
-                              nfCanvasUtils.ellipsis(processGroupName, d.component.name);
-                            }).append('title').text(function (d) {
-                            return d.component.name;
-                        });
-                    } else {
-                        // clear the process group comments
-                        details.select('text.process-group-comments').text(null);
-    
-                        // clear the process group name
-                        processGroup.select('text.process-group-name').text(null);
-                    }
-    
-                    // populate the stats
-                    processGroup.call(updateProcessGroupStatus);
-                } else {
-                    if (processGroupData.permissions.canRead) {
-                        // update the process group name
-                        processGroup.select('text.process-group-name')
-                            .text(function (d) {
-                                var name = d.component.name;
-                                if (name.length > PREVIEW_NAME_LENGTH) {
-                                    return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
-                                } else {
-                                    return name;
-                                }
-                            });
-                  } else {
-                      // clear the process group name
-                      processGroup.select('text.process-group-name').text(null);
-                    }
-    
-                    // remove the tooltips
-                    processGroup.call(removeTooltips);
-    
-                    // remove the details if necessary
-                    if (!details.empty()) {
-                        details.remove();
-                    }
-                }
-            });
-        };
-    
-        /**
-         * Updates the process group status.
-         *
-         * @param {selection} updated           The process groups to be updated
-         */
-        var updateProcessGroupStatus = function (updated) {
-            if (updated.empty()) {
-                return;
-            }
-    
-            // queued count value
-            updated.select('text.process-group-queued tspan.count')
-                .text(function (d) {
-                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.queued, ' ');
-                });
-    
-            // queued size value
-            updated.select('text.process-group-queued tspan.size')
-                .text(function (d) {
-                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.queued, ' ');
-                });
-    
-            // in count value
-            updated.select('text.process-group-in tspan.count')
-                .text(function (d) {
-                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.input, ' ');
-                });
-    
-            // in size value
-            updated.select('text.process-group-in tspan.size')
-                .text(function (d) {
-                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.input, ' ');
-                });
-    
-            // in ports value
-            updated.select('text.process-group-in tspan.ports')
-                .text(function (d) {
-                    return ' ' + String.fromCharCode(8594) + ' ' + d.inputPortCount;
-                });
-    
-            // read/write value
-            updated.select('text.process-group-read-write')
-                .text(function (d) {
-                    return d.status.aggregateSnapshot.read + ' / ' + d.status.aggregateSnapshot.written;
-                });
-    
-            // out ports value
-            updated.select('text.process-group-out tspan.ports')
-                .text(function (d) {
-                    return d.outputPortCount + ' ' + String.fromCharCode(8594) + ' ';
-                });
-    
-            // out count value
-            updated.select('text.process-group-out tspan.count')
-                .text(function (d) {
-                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.output, ' ');
-                });
-    
-            // out size value
-            updated.select('text.process-group-out tspan.size')
-                .text(function (d) {
-                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.output, ' ');
-                });
-    
-            updated.each(function (d) {
-                var processGroup = d3.select(this);
-                var offset = 0;
-    
-                // -------------------
-                // active thread count
-                // -------------------
-    
-              nfCanvasUtils.activeThreadCount(processGroup, d, function (off) {
-                    offset = off;
-                });
-    
-                // ---------
-                // bulletins
-                // ---------
-    
-                processGroup.select('rect.bulletin-background').classed('has-bulletins', function () {
-                  return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
-                });
-    
-              nfCanvasUtils.bulletins(processGroup, d, function () {
-                    return d3.select('#process-group-tooltips');
-                }, offset);
-            });
-        };
-    
-        /**
-         * Removes the process groups in the specified selection.
-         *
-         * @param {selection} removed               The process groups to be removed
-         */
-        var removeProcessGroups = function (removed) {
-            if (removed.empty()) {
-                return;
-            }
-    
-            removed.call(removeTooltips).remove();
-        };
-    
-        /**
-         * Removes the tooltips for the process groups in the specified selection.
-         *
-         * @param {selection} removed
-         */
-        var removeTooltips = function (removed) {
-            removed.each(function (d) {
-                // remove any associated tooltips
-                $('#bulletin-tip-' + d.id).remove();
-            });
-        };
-    
-      var nfProcessGroup = {
-            /**
-             * Initializes of the Process Group handler.
-           *
-           * @param nfConnectableRef   The nfConnectable module.
-           * @param nfDraggableRef   The nfDraggable module.
-           * @param nfSelectableRef   The nfSelectable module.
-           * @param nfContextMenuRef   The nfContextMenu module.
-             */
-          init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
-              nfConnectable = nfConnectableRef;
-              nfDraggable = nfDraggableRef;
-              nfSelectable = nfSelectableRef;
-              nfContextMenu = nfContextMenuRef;
-  
-                processGroupMap = d3.map();
-              removedCache = d3.map();
-              addedCache = d3.map();
-    
-                // create the process group container
-                processGroupContainer = d3.select('#canvas').append('g')
-                    .attr({
-                        'pointer-events': 'all',
-                        'class': 'process-groups'
-                    });
-            },
-    
-            /**
-             * Adds the specified process group entity.
-             *
-             * @param processGroupEntities       The process group
-             * @param options           Configuration options
-             */
-            add: function (processGroupEntities, options) {
-                var selectAll = false;
-              if (nfCommon.isDefinedAndNotNull(options)) {
-                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                }
-    
-              // get the current time
-              var now = new Date().getTime();
-    
-                var add = function (processGroupEntity) {
-                  addedCache.set(processGroupEntity.id, now);
-  
-                    // add the process group
-                    processGroupMap.set(processGroupEntity.id, $.extend({
-                        type: 'ProcessGroup',
-                        dimensions: dimensions
-                    }, processGroupEntity));
-                };
-    
-                // determine how to handle the specified process groups
-                if ($.isArray(processGroupEntities)) {
-                    $.each(processGroupEntities, function (_, processGroupEntity) {
-                        add(processGroupEntity);
-                    });
-              } else if (nfCommon.isDefinedAndNotNull(processGroupEntities)) {
-                    add(processGroupEntities);
-                }
-    
-                // apply the selection and handle new process groups
-                var selection = select();
-                selection.enter().call(renderProcessGroups, selectAll);
-                selection.call(updateProcessGroups);
-            },
-    
-            /**
-             * Populates the graph with the specified process groups.
-             *
-             * @argument {object | array} processGroupEntities                    The process groups to add
-             * @argument {object} options                Configuration options
-             */
-            set: function (processGroupEntities, options) {
-                var selectAll = false;
-                var transition = false;
-              if (nfCommon.isDefinedAndNotNull(options)) {
-                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                  transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-                }
-    
-              var set = function (proposedProcessGroupEntity) {
-                  var currentProcessGroupEntity = processGroupMap.get(proposedProcessGroupEntity.id);
-  
-                  // set the process group if appropriate due to revision and wasn't previously removed
-                  if (nfClient.isNewerRevision(currentProcessGroupEntity, proposedProcessGroupEntity) && !removedCache.has(proposedProcessGroupEntity.id)) {
-                      processGroupMap.set(proposedProcessGroupEntity.id, $.extend({
-                            type: 'ProcessGroup',
-                            dimensions: dimensions
-                      }, proposedProcessGroupEntity));
-                  }
-                };
-    
-                // determine how to handle the specified process groups
-                if ($.isArray(processGroupEntities)) {
-                    $.each(processGroupMap.keys(), function (_, key) {
-                      var currentProcessGroupEntity = processGroupMap.get(key);
-                      var isPresent = $.grep(processGroupEntities, function (proposedProcessGroupEntity) {
-                          return proposedProcessGroupEntity.id === currentProcessGroupEntity.id;
-                      });
-  
-                      // if the current process group is not present and was not recently added, remove it
-                      if (isPresent.length === 0 && !addedCache.has(key)) {
-                            processGroupMap.remove(key);
-                      }
-                    });
-                    $.each(processGroupEntities, function (_, processGroupEntity) {
-                        set(processGroupEntity);
-                    });
-              } else if (nfCommon.isDefinedAndNotNull(processGroupEntities)) {
-                    set(processGroupEntities);
-                }
-    
-                // apply the selection and handle all new process group
-                var selection = select();
-                selection.enter().call(renderProcessGroups, selectAll);
-              selection.call(updateProcessGroups).call(nfCanvasUtils.position, transition);
-                selection.exit().call(removeProcessGroups);
-            },
-    
-            /**
-             * If the process group id is specified it is returned. If no process group id
-             * specified, all process groups are returned.
-             *
-             * @param {string} id
-             */
-            get: function (id) {
-              if (nfCommon.isUndefined(id)) {
-                    return processGroupMap.values();
-                } else {
-                    return processGroupMap.get(id);
-                }
-            },
-    
-            /**
-             * If the process group id is specified it is refresh according to the current
-             * state. If no process group id is specified, all process groups are refreshed.
-             *
-             * @param {string} id      Optional
-             */
-            refresh: function (id) {
-              if (nfCommon.isDefinedAndNotNull(id)) {
-                    d3.select('#id-' + id).call(updateProcessGroups);
-                } else {
-                    d3.selectAll('g.process-group').call(updateProcessGroups);
-                }
-            },
-    
-            /**
-             * Refreshes the components necessary after a pan event.
-             */
-            pan: function () {
-                d3.selectAll('g.process-group.entering, g.process-group.leaving').call(updateProcessGroups);
-            },
-    
-            /**
-             * Reloads the process group state from the server and refreshes the UI.
-             * If the process group is currently unknown, this function reloads the canvas.
-             *
-             * @param {string} id The process group id
-             */
-            reload: function (id) {
-                if (processGroupMap.has(id)) {
-                    var processGroupEntity = processGroupMap.get(id);
-                    return $.ajax({
-                        type: 'GET',
-                        url: processGroupEntity.uri,
-                        dataType: 'json'
-                    }).done(function (response) {
-                      nfProcessGroup.set(response);
-                    });
-                }
-            },
-    
-            /**
-             * Positions the component.
-             *
-             * @param {string} id   The id
-             */
-            position: function (id) {
-              d3.select('#id-' + id).call(nfCanvasUtils.position);
-            },
-    
-            /**
-             * Removes the specified process group.
-             *
-           * @param {string} processGroupIds      The process group id(s)
-             */
-          remove: function (processGroupIds) {
-              var now = new Date().getTime();
-  
-              if ($.isArray(processGroupIds)) {
-                  $.each(processGroupIds, function (_, processGroupId) {
-                      removedCache.set(processGroupId, now);
-                      processGroupMap.remove(processGroupId);
-                    });
-                } else {
-                  removedCache.set(processGroupIds, now);
-                  processGroupMap.remove(processGroupIds);
-                }
-    
-                // apply the selection and handle all removed process groups
-                select().exit().call(removeProcessGroups);
-            },
-    
-            /**
-             * Removes all process groups.
-             */
-            removeAll: function () {
-              nfProcessGroup.remove(processGroupMap.keys());
-          },
-  
-          /**
-           * Expires the caches up to the specified timestamp.
-           *
-           * @param timestamp
-           */
-          expireCaches: function (timestamp) {
-              var expire = function (cache) {
-                  cache.forEach(function (id, entryTimestamp) {
-                      if (timestamp > entryTimestamp) {
-                          cache.remove(id);
-                      }
-                  });
-              };
-  
-              expire(addedCache);
-              expire(removedCache);
-          },
-  
-          /**
-           * Enters the specified group.
-           *
-           * @param {string} groupId
-           */
-          enterGroup: function (groupId) {
-  
-              // hide the context menu
-              nfContextMenu.hide();
-  
-              // set the new group id
-              nfCanvasUtils.setGroupId(groupId);
-  
-              // reload the graph
-              return nfCanvasUtils.reload().done(function () {
-  
-                  // attempt to restore the view
-                  var viewRestored = nfCanvasUtils.restoreUserView();
-  
-                  // if the view was not restore attempt to fit
-                  if (viewRestored === false) {
-                      nfCanvasUtils.fitCanvasView();
-  
-                      // refresh the canvas
-                      nfCanvasUtils.refreshCanvasView({
-                          transition: true
-                      });
-                  }
-              }).fail(function () {
-                  nfDialog.showOkDialog({
-                      headerText: 'Process Group',
-                      dialogContent: 'Unable to enter the selected group.'
-                  });
-              });
-          }
-      };
-  
-      return nfProcessGroup;
-  }));
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
deleted file mode 100644
index d394236eb23a..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
+++ /dev/null
@@ -1,908 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.ErrorHandler',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.Client',
-                  'nf.CanvasUtils',
-                  'nf.ng.Bridge',
-                  'nf.Processor',
-                  'nf.ClusterSummary',
-                  'nf.CustomUi',
-                  'nf.UniversalCapture',
-                  'nf.Connection'],
-              function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfProcessor, nfClusterSummary, nfCustomUi, nfUniversalCapture, nfConnection) {
-                  return (nf.ProcessorConfiguration = factory($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfProcessor, nfClusterSummary, nfCustomUi, nfUniversalCapture, nfConnection));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ProcessorConfiguration =
-              factory(require('jquery'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Common'),
-                  require('nf.Dialog'),
-                  require('nf.Client'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ng.Bridge'),
-                  require('nf.Processor'),
-                  require('nf.ClusterSummary'),
-                  require('nf.CustomUi'),
-                  require('nf.UniversalCapture'),
-                  require('nf.Connection')));
-      } else {
-          nf.ProcessorConfiguration = factory(root.$,
-              root.nf.ErrorHandler,
-              root.nf.Common,
-              root.nf.Dialog,
-              root.nf.Client,
-              root.nf.CanvasUtils,
-              root.nf.ng.Bridge,
-              root.nf.Processor,
-              root.nf.ClusterSummary,
-              root.nf.CustomUi,
-              root.nf.UniversalCapture,
-              root.nf.Connection);
-      }
-  }(this, function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfProcessor, nfClusterSummary, nfCustomUi, nfUniversalCapture, nfConnection) {
-      'use strict';
-    
-        // possible values for a processor's run duration (in millis)
-        var RUN_DURATION_VALUES = [0, 25, 50, 100, 250, 500, 1000, 2000];
-    
-        /**
-         * Gets the available scheduling strategies based on the specified processor.
-         *
-       * @param {object} processor
-         * @returns {Array}
-         */
-        var getSchedulingStrategies = function (processor) {
-            var strategies = [{
-              text: 'Timer driven',
-                value: 'TIMER_DRIVEN',
-              description: nf._.msg('nf-processor-configuration.Message1')
-            }];
-    
-            // conditionally support event driven based on processor
-            if (processor.supportsEventDriven === true) {
-                strategies.push({
-                  text: nf._.msg('nf-processor-configuration.EventDriven'),
-                    value: 'EVENT_DRIVEN',
-                  description: nf._.msg('nf-processor-configuration.Message2')
-                });
-            } else if (processor.config['schedulingStrategy'] === 'EVENT_DRIVEN') {
-                // the processor was once configured for event driven but no longer supports it
-                strategies.push({
-                  text: nf._.msg('nf-processor-configuration.EventDriven'),
-                    value: 'EVENT_DRIVEN',
-                  description: nf._.msg('nf-processor-configuration.Message2'),
-                    disabled: true
-                });
-            }
-    
-            // conditionally support event driven
-          if (processor.config['schedulingStrategy'] === 'PRIMARY_NODE_ONLY') {
-                strategies.push({
-                  text: nf._.msg('nf-processor-configuration.OnPrimaryNode'),
-                    value: 'PRIMARY_NODE_ONLY',
-                  description: nf._.msg('nf-processor-configuration.Message3'),
-                    disabled: true
-                });
-            }
-    
-            // add an option for cron driven
-            strategies.push({
-              text: nf._.msg('nf-processor-configuration.CronDriven'),
-                value: 'CRON_DRIVEN',
-              description: nf._.msg('nf-processor-configuration.Message5')
-            });
-    
-            return strategies;
-        };
-    
-        /**
-       * Gets the available execution nodes based on the specified processor.
-       *
-       * @param {object} processor
-       * @returns {Array}
-       */
-      var getExecutionNodeOptions = function (processor) {
-          return [{
-              text: 'All nodes',
-              value: 'ALL',
-              description: 'Processor will be scheduled to run on all nodes'
-          }, {
-              text: 'Primary node',
-              value: 'PRIMARY',
-              description: 'Processor will be scheduled to run only on the primary node',
-              disabled: !nfClusterSummary.isClustered() && processor.config['executionNode'] === 'PRIMARY'
-          }];
-      };
-  
-      /**
-         * Handle any expected processor configuration errors.
-         *
-         * @argument {object} xhr       The XmlHttpRequest
-         * @argument {string} status    The status of the request
-         * @argument {string} error     The error
-         */
-        var handleProcessorConfigurationError = function (xhr, status, error) {
-            if (xhr.status === 400) {
-                var errors = xhr.responseText.split('\n');
-    
-                var content;
-                if (errors.length === 1) {
-                    content = $('<span></span>').text(errors[0]);
-                } else {
-                  content = nfCommon.formatUnorderedList(errors);
-                }
-    
-              nfDialog.showOkDialog({
-                    dialogContent: content,
-                  headerText: nf._.msg('nf-processor-configuration.ConfigureProcessor')
-                });
-            } else {
-              nfErrorHandler.handleAjaxError(xhr, status, error);
-            }
-        };
-    
-        /**
-         * Creates an option for the specified relationship name.
-         *
-         * @argument {object} relationship      The relationship
-         */
-        var createRelationshipOption = function (relationship) {
-          var relationshipLabel = $('<div class="relationship-name nf-checkbox-label ellipsis"></div>').text(relationship.name);
-            var relationshipValue = $('<span class="relationship-name-value hidden"></span>').text(relationship.name);
-    
-            // build the relationship checkbox element
-            var relationshipCheckbox = $('<div class="processor-relationship nf-checkbox"></div>');
-            if (relationship.autoTerminate === true) {
-                relationshipCheckbox.addClass('checkbox-checked');
-            } else {
-                relationshipCheckbox.addClass('checkbox-unchecked');
-            }
-    
-            // build the relationship container element
-            var relationshipContainerElement = $('<div class="processor-relationship-container"></div>').append(relationshipCheckbox).append(relationshipLabel).append(relationshipValue).appendTo('#auto-terminate-relationship-names');
-          if (!nfCommon.isBlank(relationship.description)) {
-                var relationshipDescription = $('<div class="relationship-description"></div>').text(relationship.description);
-                relationshipContainerElement.append(relationshipDescription);
-            }
-    
-            return relationshipContainerElement;
-        };
-    
-        /**
-         * Determines whether the user has made any changes to the processor configuration
-         * that needs to be saved.
-         */
-        var isSaveRequired = function () {
-            var details = $('#processor-configuration').data('processorDetails');
-    
-            // determine if any processor settings have changed
-    
-            // consider auto terminated relationships
-            var autoTerminatedChanged = false;
-            var autoTerminated = marshalRelationships();
-            $.each(details.relationships, function (i, relationship) {
-                if (relationship.autoTerminate === true) {
-                    // relationship was auto terminated but is no longer selected
-                    if ($.inArray(relationship.name, autoTerminated) === -1) {
-                        autoTerminatedChanged = true;
-                        return false;
-                    }
-                } else if (relationship.autoTerminate === false) {
-                    // relationship was not auto terminated but is now selected
-                    if ($.inArray(relationship.name, autoTerminated) >= 0) {
-                        autoTerminatedChanged = true;
-                        return false;
-                    }
-                }
-            });
-            if (autoTerminatedChanged) {
-                return true;
-            }
-    
-            // consider the scheduling strategy
-            var schedulingStrategy = $('#scheduling-strategy-combo').combo('getSelectedOption').value;
-            if (schedulingStrategy !== (details.config['schedulingStrategy'] + '')) {
-                return true;
-            }
-    
-            // only consider the concurrent tasks if appropriate
-            if (details.supportsParallelProcessing === true) {
-                // get the appropriate concurrent tasks field
-                var concurrentTasks;
-                if (schedulingStrategy === 'EVENT_DRIVEN') {
-                    concurrentTasks = $('#event-driven-concurrently-schedulable-tasks');
-                } else if (schedulingStrategy === 'CRON_DRIVEN') {
-                    concurrentTasks = $('#cron-driven-concurrently-schedulable-tasks');
-                } else {
-                    concurrentTasks = $('#timer-driven-concurrently-schedulable-tasks');
-                }
-    
-                // check the concurrent tasks
-                if (concurrentTasks.val() !== (details.config['concurrentlySchedulableTaskCount'] + '')) {
-                    return true;
-                }
-            }
-    
-            // get the appropriate scheduling period field
-            var schedulingPeriod;
-            if (schedulingStrategy === 'CRON_DRIVEN') {
-                schedulingPeriod = $('#cron-driven-scheduling-period');
-            } else if (schedulingStrategy !== 'EVENT_DRIVEN') {
-                schedulingPeriod = $('#timer-driven-scheduling-period');
-            }
-    
-            // check the scheduling period
-          if (nfCommon.isDefinedAndNotNull(schedulingPeriod) && schedulingPeriod.val() !== (details.config['schedulingPeriod'] + '')) {
-              return true;
-          }
-  
-          if ($('#execution-node-combo').combo('getSelectedOption').value !== (details.config['executionNode'] + '')) {
-                return true;
-            }
-            if ($('#processor-name').val() !== details['name']) {
-                return true;
-            }
-            if ($('#processor-enabled').hasClass('checkbox-checked') && details['state'] === 'DISABLED') {
-                return true;
-            } else if ($('#processor-enabled').hasClass('checkbox-unchecked') && (details['state'] === 'RUNNING' || details['state'] === 'STOPPED')) {
-                return true;
-            }
-            if ($('#penalty-duration').val() !== (details.config['penaltyDuration'] + '')) {
-                return true;
-            }
-            if ($('#yield-duration').val() !== (details.config['yieldDuration'] + '')) {
-                return true;
-            }
-            if ($('#bulletin-level-combo').combo('getSelectedOption').value !== (details.config['bulletinLevel'] + '')) {
-                return true;
-            }
-            if ($('#processor-comments').val() !== details.config['comments']) {
-                return true;
-            }
-    
-            // defer to the property and relationship grids
-            return $('#processor-properties').propertytable('isSaveRequired');
-        };
-    
-        /**
-         * Marshals the data that will be used to update the processor's configuration.
-       *
-       * @param {object} processor
-         */
-      var marshalDetails = function (processor) {
-            // create the config dto
-            var processorConfigDto = {};
-    
-            // get the scheduling strategy
-            var schedulingStrategy = $('#scheduling-strategy-combo').combo('getSelectedOption').value;
-    
-            // get the appropriate concurrent tasks field
-            var concurrentTasks;
-            if (schedulingStrategy === 'EVENT_DRIVEN') {
-                concurrentTasks = $('#event-driven-concurrently-schedulable-tasks');
-            } else if (schedulingStrategy === 'CRON_DRIVEN') {
-                concurrentTasks = $('#cron-driven-concurrently-schedulable-tasks');
-            } else {
-                concurrentTasks = $('#timer-driven-concurrently-schedulable-tasks');
-            }
-    
-            // get the concurrent tasks if appropriate
-            if (!concurrentTasks.is(':disabled')) {
-                processorConfigDto['concurrentlySchedulableTaskCount'] = concurrentTasks.val();
-            }
-    
-            // get the appropriate scheduling period field
-            var schedulingPeriod;
-            if (schedulingStrategy === 'CRON_DRIVEN') {
-                schedulingPeriod = $('#cron-driven-scheduling-period');
-            } else if (schedulingStrategy !== 'EVENT_DRIVEN') {
-                schedulingPeriod = $('#timer-driven-scheduling-period');
-            }
-    
-            // get the scheduling period if appropriate
-          if (nfCommon.isDefinedAndNotNull(schedulingPeriod)) {
-                processorConfigDto['schedulingPeriod'] = schedulingPeriod.val();
-            }
-    
-          processorConfigDto['executionNode'] = $('#execution-node-combo').combo('getSelectedOption').value;
-            processorConfigDto['penaltyDuration'] = $('#penalty-duration').val();
-            processorConfigDto['yieldDuration'] = $('#yield-duration').val();
-            processorConfigDto['bulletinLevel'] = $('#bulletin-level-combo').combo('getSelectedOption').value;
-            processorConfigDto['schedulingStrategy'] = schedulingStrategy;
-            processorConfigDto['comments'] = $('#processor-comments').val();
-    
-            // run duration
-          if (processor.supportsBatching === true) {
-                var runDurationIndex = $('#run-duration-slider').slider('value');
-                processorConfigDto['runDurationMillis'] = RUN_DURATION_VALUES[runDurationIndex];
-            }
-    
-            // relationships
-            processorConfigDto['autoTerminatedRelationships'] = marshalRelationships();
-    
-            // properties
-            var properties = $('#processor-properties').propertytable('marshalProperties');
-    
-            // set the properties
-            if ($.isEmptyObject(properties) === false) {
-                processorConfigDto['properties'] = properties;
-            }
-    
-            // create the processor dto
-            var processorDto = {};
-            processorDto['id'] = $('#processor-id').text();
-            processorDto['name'] = $('#processor-name').val();
-            processorDto['config'] = processorConfigDto;
-    
-            // mark the processor disabled if appropriate
-            if ($('#processor-enabled').hasClass('checkbox-unchecked')) {
-                processorDto['state'] = 'DISABLED';
-            } else if ($('#processor-enabled').hasClass('checkbox-checked')) {
-                processorDto['state'] = 'STOPPED';
-            }
-    
-            // create the processor entity
-            var processorEntity = {};
-            processorEntity['component'] = processorDto;
-    
-            // return the marshaled details
-            return processorEntity;
-        };
-    
-        /**
-         * Marshals the relationships that will be auto terminated.
-         **/
-        var marshalRelationships = function () {
-            // get all available relationships
-            var availableRelationships = $('#auto-terminate-relationship-names');
-            var selectedRelationships = [];
-    
-            // go through each relationship to determine which are selected
-            $.each(availableRelationships.children(), function (i, relationshipElement) {
-                var relationship = $(relationshipElement);
-    
-                // get each relationship and its corresponding checkbox
-                var relationshipCheck = relationship.children('div.processor-relationship');
-    
-                // see if this relationship has been selected
-                if (relationshipCheck.hasClass('checkbox-checked')) {
-                    selectedRelationships.push(relationship.children('span.relationship-name-value').text());
-                }
-            });
-    
-            return selectedRelationships;
-        };
-    
-        /**
-         * Validates the specified details.
-         *
-         * @argument {object} details       The details to validate
-         */
-        var validateDetails = function (details) {
-            var errors = [];
-            var processor = details['component'];
-            var config = processor['config'];
-    
-            // ensure numeric fields are specified correctly
-          if (nfCommon.isDefinedAndNotNull(config['concurrentlySchedulableTaskCount']) && !$.isNumeric(config['concurrentlySchedulableTaskCount'])) {
-              errors.push(nf._.msg('nf-processor-configuration.Error1'));
-          }
-          if (nfCommon.isDefinedAndNotNull(config['schedulingPeriod']) && nfCommon.isBlank(config['schedulingPeriod'])) {
-              errors.push(nf._.msg('nf-processor-configuration.Error2'));
-          }
-          if (nfCommon.isBlank(config['penaltyDuration'])) {
-              errors.push(nf._.msg('nf-processor-configuration.Error3'));
-          }
-          if (nfCommon.isBlank(config['yieldDuration'])) {
-              errors.push(nf._.msg('nf-processor-configuration.Error4'));
-            }
-    
-            if (errors.length > 0) {
-              nfDialog.showOkDialog({
-                  dialogContent: nfCommon.formatUnorderedList(errors),
-                  headerText: nf._.msg('nf-processor-configuration.ConfigureProcessor')
-                });
-                return false;
-            } else {
-                return true;
-            }
-        };
-    
-        /**
-         * Reloads the outgoing connections for the specified processor.
-         *
-         * @param {object} processor
-         */
-        var reloadProcessorConnections = function (processor) {
-          var connections = nfConnection.getComponentConnections(processor.id);
-            $.each(connections, function (_, connection) {
-                if (connection.permissions.canRead) {
-                    if (connection.sourceId === processor.id) {
-                      nfConnection.reload(connection.id);
-                    }
-                }
-            });
-        };
-    
-        /**
-         * Goes to a service configuration from the property table.
-         */
-        var goToServiceFromProperty = function () {
-            return $.Deferred(function (deferred) {
-                // close all fields currently being edited
-                $('#processor-properties').propertytable('saveRow');
-    
-                // determine if changes have been made
-                if (isSaveRequired()) {
-                    // see if those changes should be saved
-                  nfDialog.showYesNoDialog({
-                      headerText: nf._.msg('nf-processor-configuration.ConfigureProcessor'),
-                      dialogContent: nf._.msg('nf-processor-configuration.Message6'),
-                        noHandler: function () {
-                            deferred.resolve();
-                        },
-                        yesHandler: function () {
-                            var processor = $('#processor-configuration').data('processorDetails');
-                            saveProcessor(processor).done(function () {
-                                deferred.resolve();
-                            }).fail(function () {
-                                deferred.reject();
-                            });
-                        }
-                    });
-                } else {
-                    deferred.resolve();
-                }
-            }).promise();
-        };
-    
-        /**
-         *
-         * @param {type} processor
-         * @returns {undefined}
-         */
-        var saveProcessor = function (processor) {
-            // marshal the settings and properties and update the processor
-          var updatedProcessor = marshalDetails(processor);
-    
-            // ensure details are valid as far as we can tell
-            if (validateDetails(updatedProcessor)) {
-                // set the revision
-              var d = nfProcessor.get(processor.id);
-              updatedProcessor['revision'] = nfClient.getRevision(d);
-    
-                // update the selected component
-                return $.ajax({
-                    type: 'PUT',
-                    data: JSON.stringify(updatedProcessor),
-                    url: d.uri,
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // set the new processor state based on the response
-                  nfProcessor.set(response);
-                }).fail(handleProcessorConfigurationError);
-            } else {
-                return $.Deferred(function (deferred) {
-                    deferred.reject();
-                }).promise();
-            }
-        };
-    
-        return {
-            /**
-             * Initializes the processor properties tab.
-             */
-            init: function () {
-                // initialize the properties tabs
-                $('#processor-configuration-tabs').tabbs({
-                    tabStyle: 'tab',
-                    selectedTabStyle: 'selected-tab',
-                    scrollableTabContentStyle: 'scrollable',
-                    tabs: [{
-                      name: nf._.msg('nf-processor-configuration.Settings'),
-                        tabContentId: 'processor-standard-settings-tab-content'
-                    }, {
-                      name: nf._.msg('nf-processor-configuration.Scheduling'),
-                        tabContentId: 'processor-scheduling-tab-content'
-                    }, {
-                      name: nf._.msg('nf-processor-configuration.Properties'),
-                        tabContentId: 'processor-properties-tab-content'
-                    }, {
-                      name: nf._.msg('nf-processor-configuration.Comments'),
-                        tabContentId: 'processor-comments-tab-content'
-                    }],
-                    select: function () {
-                        // remove all property detail dialogs
-                      nfUniversalCapture.removeAllPropertyDetailDialogs();
-    
-                        // update the processor property table size in case this is the first time its rendered
-                      if ($(this).text() === nf._.msg('nf-processor-configuration.Properties')) {
-                            $('#processor-properties').propertytable('resetTableSize');
-                        }
-    
-                        // close all fields currently being edited
-                        $('#processor-properties').propertytable('saveRow');
-    
-                        // show the border around the processor relationships if necessary
-                        var processorRelationships = $('#auto-terminate-relationship-names');
-                      if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > Math.round(processorRelationships.innerHeight())) {
-                            processorRelationships.css('border-width', '1px');
-                        }
-                    }
-                });
-    
-                // initialize the processor configuration dialog
-                $('#processor-configuration').modal({
-                    scrollableContentStyle: 'scrollable',
-                  headerText: nf._.msg('nf-processor-configuration.ConfigureProcessor'),
-                    handler: {
-                        close: function () {
-                            // empty the relationship list
-                            $('#auto-terminate-relationship-names').css('border-width', '0').empty();
-    
-                            // cancel any active edits and clear the table
-                            $('#processor-properties').propertytable('cancelEdit').propertytable('clear');
-    
-                            // removed the cached processor details
-                            $('#processor-configuration').removeData('processorDetails');
-                        },
-                        open: function () {
-                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                        }
-                    }
-                });
-    
-                // initialize the bulletin combo
-                $('#bulletin-level-combo').combo({
-                    options: [{
-                      text: nf._.msg('nf-processor-configuration.Debug'),
-                        value: 'DEBUG'
-                    }, {
-                      text: nf._.msg('nf-processor-configuration.Info'),
-                        value: 'INFO'
-                    }, {
-                      text: nf._.msg('nf-processor-configuration.Warn'),
-                        value: 'WARN'
-                    }, {
-                      text: nf._.msg('nf-processor-configuration.Error'),
-                        value: 'ERROR'
-                    }]
-                });
-    
-                // initialize the run duration slider
-                $('#run-duration-slider').slider({
-                    min: 0,
-                    max: RUN_DURATION_VALUES.length - 1,
-                    change: function (event, ui) {
-                        var processor = $('#processor-configuration').data('processorDetails');
-                        if (ui.value > 0 && (processor.inputRequirement === 'INPUT_FORBIDDEN' || processor.inputRequirement === 'INPUT_ALLOWED')) {
-                            $('#run-duration-data-loss').show();
-                        } else {
-                            $('#run-duration-data-loss').hide();
-                        }
-                    }
-                });
-    
-                // 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');
-                      var d = nfProcessor.get(processor.id);
-                        return $.ajax({
-                            type: 'GET',
-                            url: d.uri + '/descriptors',
-                            data: {
-                                propertyName: propertyName
-                            },
-                            dataType: 'json'
-                      }).fail(nfErrorHandler.handleAjaxError);
-                    },
-                    goToServiceDeferred: goToServiceFromProperty
-                });
-            },
-    
-            /**
-             * Shows the configuration dialog for the specified processor.
-             *
-             * @argument {selection} selection      The selection
-             */
-            showConfiguration: function (selection) {
-              if (nfCanvasUtils.isProcessor(selection)) {
-                    var selectionData = selection.datum();
-    
-                    // get the processor details
-                    var processor = selectionData.component;
-    
-                    var requests = [];
-    
-                    // reload the processor in case an property descriptors have updated
-                  requests.push(nfProcessor.reload(processor.id));
-    
-                    // get the processor history
-                    requests.push($.ajax({
-                        type: 'GET',
-                        url: '../nifi-api/flow/history/components/' + encodeURIComponent(processor.id),
-                        dataType: 'json'
-                    }));
-    
-                    // once everything is loaded, show the dialog
-                    $.when.apply(window, requests).done(function (processorResult, historyResult) {
-                        // get the updated processor'
-                        var processorResponse = processorResult[0];
-                        processor = processorResponse.component;
-    
-                        // get the processor history
-                        var processorHistory = historyResult[0].componentHistory;
-    
-                        // record the processor details
-                        $('#processor-configuration').data('processorDetails', processor);
-    
-                        // determine if the enabled checkbox is checked or not
-                        var processorEnableStyle = 'checkbox-checked';
-                        if (processor['state'] === 'DISABLED') {
-                            processorEnableStyle = 'checkbox-unchecked';
-                        }
-    
-                        // populate the processor settings
-                        $('#processor-id').text(processor['id']);
-                      $('#processor-type').text(nfCommon.substringAfterLast(processor['type'], '.'));
-                        $('#processor-name').val(processor['name']);
-                        $('#processor-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(processorEnableStyle);
-                        $('#penalty-duration').val(processor.config['penaltyDuration']);
-                        $('#yield-duration').val(processor.config['yieldDuration']);
-                        $('#processor-comments').val(processor.config['comments']);
-    
-                        // set the run duration if applicable
-                        if (processor.supportsBatching === true) {
-                            $('#run-duration-setting-container').show();
-    
-                            // set the run duration slider value
-                            var runDuration = RUN_DURATION_VALUES.indexOf(processor.config['runDurationMillis']);
-                            $('#run-duration-slider').slider('value', runDuration);
-                        } else {
-                            $('#run-duration-setting-container').hide();
-                        }
-    
-                        // select the appropriate bulletin level
-                        $('#bulletin-level-combo').combo('setSelectedOption', {
-                            value: processor.config['bulletinLevel']
-                        });
-    
-                      var schedulingStrategy = processor.config['schedulingStrategy'];
-  
-                        // initialize the scheduling strategy
-                        $('#scheduling-strategy-combo').combo({
-                            options: getSchedulingStrategies(processor),
-                            selectedOption: {
-                              value: schedulingStrategy
-                            },
-                            select: function (selectedOption) {
-                                // show the appropriate panel
-                                if (selectedOption.value === 'EVENT_DRIVEN') {
-                                    $('#event-driven-warning').show();
-    
-                                    $('#timer-driven-options').hide();
-                                    $('#event-driven-options').show();
-                                    $('#cron-driven-options').hide();
-                                } else {
-                                    $('#event-driven-warning').hide();
-    
-                                    if (selectedOption.value === 'CRON_DRIVEN') {
-                                        $('#timer-driven-options').hide();
-                                        $('#event-driven-options').hide();
-                                        $('#cron-driven-options').show();
-                                    } else {
-                                        $('#timer-driven-options').show();
-                                        $('#event-driven-options').hide();
-                                        $('#cron-driven-options').hide();
-                                    }
-                                }
-                            }
-                        });
-    
-                      var executionNode = processor.config['executionNode'];
-  
-                      // initialize the execution node combo
-                      $('#execution-node-combo').combo({
-                          options: getExecutionNodeOptions(processor),
-                          selectedOption: {
-                              value: executionNode
-                          }
-                      });
-  
-                      // show the execution node option if we're cluster or we're currently configured to run on the primary node only
-                      if (nfClusterSummary.isClustered() || executionNode === 'PRIMARY') {
-                          $('#execution-node-options').show();
-                      } else {
-                          $('#execution-node-options').hide();
-                      }
-  
-                        // initialize the concurrentTasks
-                        var defaultConcurrentTasks = processor.config['defaultConcurrentTasks'];
-                        $('#timer-driven-concurrently-schedulable-tasks').val(defaultConcurrentTasks['TIMER_DRIVEN']);
-                        $('#event-driven-concurrently-schedulable-tasks').val(defaultConcurrentTasks['EVENT_DRIVEN']);
-                        $('#cron-driven-concurrently-schedulable-tasks').val(defaultConcurrentTasks['CRON_DRIVEN']);
-    
-                        // get the appropriate concurrent tasks field
-                        var concurrentTasks;
-                      if (schedulingStrategy === 'EVENT_DRIVEN') {
-                            concurrentTasks = $('#event-driven-concurrently-schedulable-tasks').val(processor.config['concurrentlySchedulableTaskCount']);
-                      } else if (schedulingStrategy === 'CRON_DRIVEN') {
-                            concurrentTasks = $('#cron-driven-concurrently-schedulable-tasks').val(processor.config['concurrentlySchedulableTaskCount']);
-                        } else {
-                            concurrentTasks = $('#timer-driven-concurrently-schedulable-tasks').val(processor.config['concurrentlySchedulableTaskCount']);
-                        }
-    
-                        // conditionally allow the user to specify the concurrent tasks
-                      if (nfCommon.isDefinedAndNotNull(concurrentTasks)) {
-                            if (processor.supportsParallelProcessing === true) {
-                                concurrentTasks.prop('disabled', false);
-                            } else {
-                                concurrentTasks.prop('disabled', true);
-                            }
-                        }
-    
-                        // initialize the schedulingStrategy
-                        var defaultSchedulingPeriod = processor.config['defaultSchedulingPeriod'];
-                        $('#cron-driven-scheduling-period').val(defaultSchedulingPeriod['CRON_DRIVEN']);
-                        $('#timer-driven-scheduling-period').val(defaultSchedulingPeriod['TIMER_DRIVEN']);
-    
-                        // set the scheduling period as appropriate
-                        if (processor.config['schedulingStrategy'] === 'CRON_DRIVEN') {
-                            $('#cron-driven-scheduling-period').val(processor.config['schedulingPeriod']);
-                        } else if (processor.config['schedulingStrategy'] !== 'EVENT_DRIVEN') {
-                            $('#timer-driven-scheduling-period').val(processor.config['schedulingPeriod']);
-                        }
-    
-                        // load the relationship list
-                      if (!nfCommon.isEmpty(processor.relationships)) {
-                            $.each(processor.relationships, function (i, relationship) {
-                                createRelationshipOption(relationship);
-                            });
-                        } else {
-                          $('#auto-terminate-relationship-names').append('<div class="unset">'+nf._.msg('nf-processor-configuration.ThisProcessorHasNoRelationships')+'</div>');
-                        }
-    
-                        var buttons = [{
-                          buttonText: nf._.msg('nf-processor-configuration.Apply'),
-                            color: {
-                                base: '#728E9B',
-                                hover: '#004849',
-                                text: '#ffffff'
-                            },
-                            handler: {
-                                click: function () {
-                                    // close all fields currently being edited
-                                    $('#processor-properties').propertytable('saveRow');
-    
-                                    // save the processor
-                                    saveProcessor(processor).done(function (response) {
-                                        // reload the processor's outgoing connections
-                                        reloadProcessorConnections(processor);
-    
-                                        // close the details panel
-                                        $('#processor-configuration').modal('hide');
-    
-                                        // inform Angular app values have changed
-                                      nfNgBridge.digest();
-                                    });
-                                }
-                            }
-                        },
-                            {
-                              buttonText: nf._.msg('nf-processor-configuration.Cancel'),
-                                color: {
-                                    base: '#E3E8EB',
-                                    hover: '#C7D2D7',
-                                    text: '#004849'
-                                },
-                                handler: {
-                                    click: function () {
-                                        $('#processor-configuration').modal('hide');
-                                    }
-                                }
-                            }];
-    
-                        // determine if we should show the advanced button
-                      if (nfCommon.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') {
-                            buttons.push({
-                              buttonText: nf._.msg('nf-processor-configuration.Advanced'),
-                                clazz: 'fa fa-cog button-icon',
-                                color: {
-                                    base: '#E3E8EB',
-                                    hover: '#C7D2D7',
-                                    text: '#004849'
-                                },
-                                handler: {
-                                    click: function () {
-                                        var openCustomUi = function () {
-                                            // reset state and close the dialog manually to avoid hiding the faded background
-                                            $('#processor-configuration').modal('hide');
-    
-                                            // show the custom ui
-                                          nfCustomUi.showCustomUi(processorResponse, processor.config.customUiUrl, true).done(function () {
-                                                // once the custom ui is closed, reload the processor
-                                              nfProcessor.reload(processor.id);
-    
-                                                // and reload the processor's outgoing connections
-                                                reloadProcessorConnections(processor);
-                                            });
-                                        };
-    
-                                        // close all fields currently being edited
-                                        $('#processor-properties').propertytable('saveRow');
-    
-                                        // determine if changes have been made
-                                        if (isSaveRequired()) {
-                                            // see if those changes should be saved
-                                          nfDialog.showYesNoDialog({
-                                              headerText: nf._.msg('nf-processor-configuration.Save'),
-                                              dialogContent: nf._.msg('nf-processor-configuration.Message7'),
-                                                noHandler: openCustomUi,
-                                                yesHandler: function () {
-                                                    saveProcessor(processor).done(function (deferred) {
-                                                        // open the custom ui
-                                                        openCustomUi();
-                                                    });
-                                                }
-                                            });
-                                        } else {
-                                            // if there were no changes, simply open the custom ui
-                                            openCustomUi();
-                                        }
-                                    }
-                                }
-                            });
-                        }
-    
-                        // set the button model
-                        $('#processor-configuration').modal('setButtonModel', buttons);
-    
-                        // load the property table
-                        $('#processor-properties')
-                            .propertytable('setGroupId', processor.parentGroupId)
-                            .propertytable('loadProperties', processor.config.properties, processor.config.descriptors, processorHistory.propertyHistory);
-    
-                        // show the details
-                        $('#processor-configuration').modal('show');
-    
-                        // add ellipsis if necessary
-                        $('#processor-configuration div.relationship-name').ellipsis();
-    
-                        // show the border if necessary
-                        var processorRelationships = $('#auto-terminate-relationship-names');
-                      if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > Math.round(processorRelationships.innerHeight())) {
-                            processorRelationships.css('border-width', '1px');
-                        }
-                  }).fail(nfErrorHandler.handleAjaxError);
-                }
-            }
-        };
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
deleted file mode 100644
index ccc90ba77eef..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
+++ /dev/null
@@ -1,1087 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.Common',
-                  'nf.Client',
-                  'nf.CanvasUtils'],
-              function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
-                  return (nf.Processor = factory($, d3, nfCommon, nfClient, nfCanvasUtils));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.Processor =
-              factory(require('jquery'),
-                  require('d3'),
-                  require('nf.Common'),
-                  require('nf.Client'),
-                  require('nf.CanvasUtils')));
-      } else {
-          nf.Processor = factory(root.$,
-              root.d3,
-              root.nf.Common,
-              root.nf.Client,
-              root.nf.CanvasUtils);
-      }
-  }(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
-      'use strict';
-  
-      var nfConnectable;
-      var nfDraggable;
-      var nfSelectable;
-      var nfContextMenu;
-    
-        var PREVIEW_NAME_LENGTH = 25;
-    
-        // default dimensions for each type of component
-        var dimensions = {
-            width: 350,
-            height: 130
-        };
-    
-        // ---------------------------------
-        // processors currently on the graph
-        // ---------------------------------
-    
-        var processorMap;
-    
-      // -----------------------------------------------------------
-      // cache for components that are added/removed from the canvas
-      // -----------------------------------------------------------
-  
-      var removedCache;
-      var addedCache;
-  
-        // --------------------
-        // component containers
-        // --------------------
-    
-        var processorContainer;
-    
-        // --------------------------
-        // privately scoped functions
-        // --------------------------
-    
-        /**
-         * Selects the processor elements against the current processor map.
-         */
-        var select = function () {
-            return processorContainer.selectAll('g.processor').data(processorMap.values(), function (d) {
-                return d.id;
-            });
-        };
-    
-        // renders the processors
-        var renderProcessors = function (entered, selected) {
-            if (entered.empty()) {
-                return;
-            }
-    
-            var processor = entered.append('g')
-                .attr({
-                    'id': function (d) {
-                        return 'id-' + d.id;
-                    },
-                    'class': 'processor component'
-                })
-                .classed('selected', selected)
-              .call(nfCanvasUtils.position);
-    
-            // processor border
-            processor.append('rect')
-                .attr({
-                    'class': 'border',
-                    'width': function (d) {
-                        return d.dimensions.width;
-                    },
-                    'height': function (d) {
-                        return d.dimensions.height;
-                    },
-                    'fill': 'transparent',
-                    'stroke': 'transparent'
-                });
-    
-            // processor body
-            processor.append('rect')
-                .attr({
-                    'class': 'body',
-                    'width': function (d) {
-                        return d.dimensions.width;
-                    },
-                    'height': function (d) {
-                        return d.dimensions.height;
-                    },
-                    'filter': 'url(#component-drop-shadow)',
-                    'stroke-width': 0
-                });
-    
-            // processor name
-            processor.append('text')
-                .attr({
-                  'x': 72,
-                  'y': 23,
-                  'width': 210,
-                  'height': 14,
-                    'class': 'processor-name'
-                });
-    
-          // processor icon container
-          processor.append('rect')
-              .attr({
-                  'x': 0,
-                  'y': 0,
-                  'width': 50,
-                  'height': 50,
-                  'class': 'processor-icon-container'
-              });
-  
-            // processor icon
-            processor.append('text')
-                .attr({
-                  'x': 9,
-                  'y': 35,
-                    'class': 'processor-icon'
-                })
-                .text('\ue807');
-    
-          // restricted icon background
-          processor.append('circle')
-                .attr({
-                  'r': 9,
-                  'cx': 12,
-                  'cy': 12,
-                  'class': 'restricted-background'
-                });
-    
-          // restricted icon
-          processor.append('text')
-              .attr({
-                  'x': 7.75,
-                  'y': 17,
-                  'class': 'restricted'
-              })
-              .text('\uf132');
-    
-            // make processors selectable
-          processor.call(nfSelectable.activate).call(nfContextMenu.activate);
-        };
-    
-        /**
-         * Updates the processors in the specified selection.
-         *
-         * @param {selection} updated       The processors to update
-         */
-        var updateProcessors = function (updated) {
-            if (updated.empty()) {
-                return;
-            }
-    
-            // processor border authorization
-            updated.select('rect.border')
-                .classed('unauthorized', function (d) {
-                    return d.permissions.canRead === false;
-                });
-    
-            // processor body authorization
-            updated.select('rect.body')
-                .classed('unauthorized', function (d) {
-                    return d.permissions.canRead === false;
-                });
-    
-            updated.each(function (processorData) {
-                var processor = d3.select(this);
-                var details = processor.select('g.processor-canvas-details');
-    
-                // update the component behavior as appropriate
-              nfCanvasUtils.editable(processor, nfConnectable, nfDraggable);
-    
-                // if this processor is visible, render everything
-                if (processor.classed('visible')) {
-                    if (details.empty()) {
-                        details = processor.append('g').attr('class', 'processor-canvas-details');
-    
-                        // run status icon
-                        details.append('text')
-                            .attr({
-                                'class': 'run-status-icon',
-                              'x': 55,
-                              'y': 23
-                            });
-    
-                        // processor type
-                        details.append('text')
-                            .attr({
-                                'class': 'processor-type',
-                              'x': 72,
-                              'y': 37,
-                              'width': 236,
-                              'height': 12
-                            });
-    
-                        // -----
-                        // stats
-                        // -----
-    
-                        // draw the processor statistics table
-    
-                        // in
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processorData.dimensions.width;
-                                },
-                                'height': 19,
-                                'x': 0,
-                                'y': 50,
-                                'fill': '#f4f6f7'
-                            });
-    
-                        // border
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processorData.dimensions.width;
-                                },
-                                'height': 1,
-                                'x': 0,
-                                'y': 68,
-                                'fill': '#c7d2d7'
-                            });
-    
-                        // read/write
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processorData.dimensions.width;
-                                },
-                                'height': 19,
-                                'x': 0,
-                                'y': 69,
-                                'fill': '#ffffff'
-                            });
-    
-                        // border
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processorData.dimensions.width;
-                                },
-                                'height': 1,
-                                'x': 0,
-                                'y': 87,
-                                'fill': '#c7d2d7'
-                            });
-    
-                        // out
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processorData.dimensions.width;
-                                },
-                                'height': 20,
-                                'x': 0,
-                                'y': 88,
-                                'fill': '#f4f6f7'
-                            });
-    
-                        // border
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processorData.dimensions.width;
-                                },
-                                'height': 1,
-                                'x': 0,
-                                'y': 106,
-                                'fill': '#c7d2d7'
-                            });
-    
-                        // tasks/time
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return processorData.dimensions.width;
-                                },
-                                'height': 19,
-                                'x': 0,
-                                'y': 107,
-                                'fill': '#ffffff'
-                            });
-    
-                        // stats label container
-                        var processorStatsLabel = details.append('g')
-                            .attr({
-                                'transform': 'translate(10, 55)'
-                            });
-    
-                        // in label
-                        processorStatsLabel.append('text')
-                            .attr({
-                                'width': 73,
-                                'height': 10,
-                                'y': 9,
-                                'class': 'stats-label'
-                            })
-                          .text(nf._.msg('nf-processor.In'));
-    
-                        // read/write label
-                        processorStatsLabel.append('text')
-                            .attr({
-                                'width': 73,
-                                'height': 10,
-                                'y': 27,
-                                'class': 'stats-label'
-                            })
-                          .text(nf._.msg('nf-processor.ReadWrite'));
-    
-                        // out label
-                        processorStatsLabel.append('text')
-                            .attr({
-                                'width': 73,
-                                'height': 10,
-                                'y': 46,
-                                'class': 'stats-label'
-                            })
-                          .text(nf._.msg('nf-processor.Out'));
-    
-                        // tasks/time label
-                        processorStatsLabel.append('text')
-                            .attr({
-                                'width': 73,
-                                'height': 10,
-                                'y': 65,
-                                'class': 'stats-label'
-                            })
-                          .text(nf._.msg('nf-processor.TasksTime'));
-    
-                        // stats value container
-                        var processorStatsValue = details.append('g')
-                            .attr({
-                                'transform': 'translate(85, 55)'
-                            });
-    
-                        // in value
-                        var inText = processorStatsValue.append('text')
-                            .attr({
-                                'width': 180,
-                                'height': 9,
-                                'y': 9,
-                                'class': 'processor-in stats-value'
-                            });
-    
-                        // in count
-                        inText.append('tspan')
-                            .attr({
-                                'class': 'count'
-                            });
-    
-                        // in size
-                        inText.append('tspan')
-                            .attr({
-                                'class': 'size'
-                            });
-    
-                        // read/write value
-                        processorStatsValue.append('text')
-                            .attr({
-                                'width': 180,
-                                'height': 10,
-                                'y': 27,
-                                'class': 'processor-read-write stats-value'
-                            });
-    
-                        // out value
-                        var outText = processorStatsValue.append('text')
-                            .attr({
-                                'width': 180,
-                                'height': 10,
-                                'y': 46,
-                                'class': 'processor-out stats-value'
-                            });
-    
-                        // out count
-                        outText.append('tspan')
-                            .attr({
-                                'class': 'count'
-                            });
-    
-                        // out size
-                        outText.append('tspan')
-                            .attr({
-                                'class': 'size'
-                            });
-    
-                        // tasks/time value
-                        processorStatsValue.append('text')
-                            .attr({
-                                'width': 180,
-                                'height': 10,
-                                'y': 65,
-                                'class': 'processor-tasks-time stats-value'
-                            });
-    
-                        // stats value container
-                        var processorStatsInfo = details.append('g')
-                            .attr('transform', 'translate(305, 55)');
-    
-                        // in info
-                        processorStatsInfo.append('text')
-                            .attr({
-                                'width': 25,
-                                'height': 10,
-                                'y': 9,
-                                'class': 'stats-info'
-                            })
-                          .text(nf._.msg('nf-processor.5min-1'));
-    
-                        // read/write info
-                        processorStatsInfo.append('text')
-                            .attr({
-                                'width': 25,
-                                'height': 10,
-                                'y': 27,
-                                'class': 'stats-info'
-                            })
-                          .text(nf._.msg('nf-processor.5min-1'));
-    
-                        // out info
-                        processorStatsInfo.append('text')
-                            .attr({
-                                'width': 25,
-                                'height': 10,
-                                'y': 46,
-                                'class': 'stats-info'
-                            })
-                          .text(nf._.msg('nf-processor.5min-1'));
-    
-                        // tasks/time info
-                        processorStatsInfo.append('text')
-                            .attr({
-                                'width': 25,
-                                'height': 10,
-                                'y': 65,
-                                'class': 'stats-info'
-                            })
-                          .text(nf._.msg('nf-processor.5min-1'));
-    
-                        // -------------------
-                        // active thread count
-                        // -------------------
-    
-                        // active thread count
-                        details.append('text')
-                            .attr({
-                                'class': 'active-thread-count-icon',
-                                'y': 42
-                            })
-                            .text('\ue83f');
-    
-                        // active thread background
-                        details.append('text')
-                            .attr({
-                                'class': 'active-thread-count',
-                                'y': 42
-                            });
-    
-                        // ---------
-                        // bulletins
-                        // ---------
-    
-                        // bulletin background
-                        details.append('rect')
-                            .attr({
-                                'class': 'bulletin-background',
-                                'x': function (d) {
-                                    return processorData.dimensions.width - 24;
-                                },
-                                'width': 24,
-                                'height': 24
-                            });
-    
-                        // bulletin icon
-                        details.append('text')
-                            .attr({
-                                'class': 'bulletin-icon',
-                                'x': function (d) {
-                                    return processorData.dimensions.width - 17;
-                                },
-                                'y': 17
-                            })
-                            .text('\uf24a');
-                    }
-    
-                    if (processorData.permissions.canRead) {
-                        // update the processor name
-                        processor.select('text.processor-name')
-                            .each(function (d) {
-                                var processorName = d3.select(this);
-    
-                                // reset the processor name to handle any previous state
-                                processorName.text(null).selectAll('title').remove();
-    
-                                // apply ellipsis to the processor name as necessary
-                              nfCanvasUtils.ellipsis(processorName, d.component.name);
-                            }).append('title').text(function (d) {
-                            return d.component.name;
-                        });
-    
-                        // update the processor type
-                        processor.select('text.processor-type')
-                            .each(function (d) {
-                                var processorType = d3.select(this);
-    
-                                // reset the processor type to handle any previous state
-                                processorType.text(null).selectAll('title').remove();
-    
-                                // apply ellipsis to the processor type as necessary
-                              nfCanvasUtils.ellipsis(processorType, nfCommon.substringAfterLast(d.component.type, '.'));
-                            }).append('title').text(function (d) {
-                          return nfCommon.substringAfterLast(d.component.type, '.');
-                        });
-                    } else {
-                        // clear the processor name
-                        processor.select('text.processor-name').text(null);
-    
-                        // clear the processor type
-                        processor.select('text.processor-type').text(null);
-                    }
-    
-                    // populate the stats
-                    processor.call(updateProcessorStatus);
-                } else {
-                    if (processorData.permissions.canRead) {
-                        // update the processor name
-                        processor.select('text.processor-name')
-                            .text(function (d) {
-                                var name = d.component.name;
-                                if (name.length > PREVIEW_NAME_LENGTH) {
-                                    return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
-                                } else {
-                                    return name;
-                                }
-                            });
-                  } else {
-                      // clear the processor name
-                      processor.select('text.processor-name').text(null);
-                    }
-    
-                    // remove the tooltips
-                    processor.call(removeTooltips);
-    
-                    // remove the details if necessary
-                    if (!details.empty()) {
-                        details.remove();
-                    }
-                }
-    
-                // ---------------
-                // processor color
-                // ---------------
-    
-              //update the processor icon container
-              processor.select('rect.processor-icon-container').classed('unauthorized', !processorData.permissions.canRead);
-  
-              //update the processor icon
-              processor.select('text.processor-icon').classed('unauthorized', !processorData.permissions.canRead);
-  
-              //update the processor border
-              processor.select('rect.border').classed('unauthorized', !processorData.permissions.canRead);
-  
-              // use the specified color if appropriate
-              if (processorData.permissions.canRead) {
-                  if (nfCommon.isDefinedAndNotNull(processorData.component.style['background-color'])) {
-                      var color = processorData.component.style['background-color'];
-  
-                      //update the processor icon container
-                      processor.select('rect.processor-icon-container')
-                          .style('fill', function (d) {
-                              return color;
-                          });
-  
-                      //update the processor border
-                      processor.select('rect.border')
-                          .style('stroke', function (d) {
-                              return color;
-                          });
-                  }
-              }
-  
-                // update the processor color
-              processor.select('text.processor-icon')
-                    .style('fill', function (d) {
-    
-                        // get the default color
-                      var color = nfProcessor.defaultIconColor();
-    
-                        if (!d.permissions.canRead) {
-                            return color;
-                        }
-    
-                        // use the specified color if appropriate
-                      if (nfCommon.isDefinedAndNotNull(d.component.style['background-color'])) {
-                            color = d.component.style['background-color'];
-    
-                          //special case #ffffff implies default fill
-                          if (color.toLowerCase() === '#ffffff') {
-                              color = nfProcessor.defaultIconColor();
-                          } else {
-                              color = nfCommon.determineContrastColor(
-                                  nfCommon.substringAfterLast(
-                                      color, '#'));
-                          }
-                        }
-    
-                        return color;
-                    });
-    
-              // restricted component indicator
-              processor.select('circle.restricted-background').style('visibility', showRestricted);
-              processor.select('text.restricted').style('visibility', showRestricted);
-          });
-        };
-    
-      /**
-       * Returns whether the resticted indicator should be shown for a given
-       * @param d
-       * @returns {*}
-       */
-      var showRestricted = function (d) {
-          if (!d.permissions.canRead) {
-              return 'hidden';
-          }
-  
-          return d.component.restricted ? 'visible' : 'hidden';
-      }
-    
-        /**
-         * Updates the stats for the processors in the specified selection.
-         *
-         * @param {selection} updated           The processors to update
-         */
-        var updateProcessorStatus = function (updated) {
-            if (updated.empty()) {
-                return;
-            }
-    
-            // update the run status
-            updated.select('text.run-status-icon')
-                .attr({
-                    'fill': function (d) {
-                        var fill = '#728e9b';
-    
-                        if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
-                          fill = '#cf9f5d';
-                      } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
-                          fill = '#7dc7a0';
-                      } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
-                          fill = '#d18686';
-                        }
-    
-                        return fill;
-                    },
-                    'font-family': function (d) {
-                        var family = 'FontAwesome';
-                        if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
-                            family = 'flowfont';
-                        }
-                        return family;
-                    }
-                })
-                .text(function (d) {
-                    var img = '';
-                    if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
-                        img = '\ue802';
-                    } else if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
-                        img = '\uf071';
-                    } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
-                        img = '\uf04b';
-                    } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
-                        img = '\uf04d';
-                    }
-                    return img;
-                })
-                .each(function (d) {
-                    // get the tip
-                    var tip = d3.select('#run-status-tip-' + d.id);
-    
-                    // if there are validation errors generate a tooltip
-                  if (d.permissions.canRead && !nfCommon.isEmpty(d.component.validationErrors)) {
-                        // create the tip if necessary
-                        if (tip.empty()) {
-                            tip = d3.select('#processor-tooltips').append('div')
-                                .attr('id', function () {
-                                    return 'run-status-tip-' + d.id;
-                                })
-                                .attr('class', 'tooltip nifi-tooltip');
-                        }
-    
-                        // update the tip
-                        tip.html(function () {
-                          var list = nfCommon.formatUnorderedList(d.component.validationErrors);
-                            if (list === null || list.length === 0) {
-                                return '';
-                            } else {
-                                return $('<div></div>').append(list).html();
-                            }
-                        });
-    
-                        // add the tooltip
-                      nfCanvasUtils.canvasTooltip(tip, d3.select(this));
-                    } else {
-                        // remove the tip if necessary
-                        if (!tip.empty()) {
-                            tip.remove();
-                        }
-                    }
-                });
-    
-            // in count value
-            updated.select('text.processor-in tspan.count')
-                .text(function (d) {
-                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.input, ' ');
-                });
-    
-            // in size value
-            updated.select('text.processor-in tspan.size')
-                .text(function (d) {
-                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.input, ' ');
-                });
-    
-            // read/write value
-            updated.select('text.processor-read-write')
-                .text(function (d) {
-                    return d.status.aggregateSnapshot.read + ' / ' + d.status.aggregateSnapshot.written;
-                });
-    
-            // out count value
-            updated.select('text.processor-out tspan.count')
-                .text(function (d) {
-                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.output, ' ');
-                });
-    
-            // out size value
-            updated.select('text.processor-out tspan.size')
-                .text(function (d) {
-                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.output, ' ');
-                });
-    
-            // tasks/time value
-            updated.select('text.processor-tasks-time')
-                .text(function (d) {
-                    return d.status.aggregateSnapshot.tasks + ' / ' + d.status.aggregateSnapshot.tasksDuration;
-                });
-    
-            updated.each(function (d) {
-                var processor = d3.select(this);
-    
-                // -------------------
-                // active thread count
-                // -------------------
-    
-              nfCanvasUtils.activeThreadCount(processor, d);
-    
-                // ---------
-                // bulletins
-                // ---------
-    
-                processor.select('rect.bulletin-background').classed('has-bulletins', function () {
-                  return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
-                });
-    
-              nfCanvasUtils.bulletins(processor, d, function () {
-                    return d3.select('#processor-tooltips');
-                }, 286);
-            });
-        };
-    
-        /**
-         * Removes the processors in the specified selection.
-         *
-         * @param {selection} removed
-         */
-        var removeProcessors = function (removed) {
-            if (removed.empty()) {
-                return;
-            }
-    
-            removed.call(removeTooltips).remove();
-        };
-    
-        /**
-         * Removes the tooltips for the processors in the specified selection.
-         *
-         * @param {selection} removed
-         */
-        var removeTooltips = function (removed) {
-            removed.each(function (d) {
-                // remove any associated tooltips
-                $('#run-status-tip-' + d.id).remove();
-                $('#bulletin-tip-' + d.id).remove();
-            });
-        };
-    
-      var nfProcessor = {
-            /**
-             * Initializes of the Processor handler.
-           *
-           * @param nfConnectableRef   The nfConnectable module.
-           * @param nfDraggableRef   The nfDraggable module.
-           * @param nfSelectableRef   The nfSelectable module.
-           * @param nfContextMenuRef   The nfContextMenu module.
-             */
-          init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
-              nfConnectable = nfConnectableRef;
-              nfDraggable = nfDraggableRef;
-              nfSelectable = nfSelectableRef;
-              nfContextMenu = nfContextMenuRef;
-  
-                processorMap = d3.map();
-              removedCache = d3.map();
-              addedCache = d3.map();
-    
-                // create the processor container
-                processorContainer = d3.select('#canvas').append('g')
-                    .attr({
-                        'pointer-events': 'all',
-                        'class': 'processors'
-                    });
-            },
-    
-            /**
-             * Adds the specified processor entity.
-             *
-             * @param processorEntities       The processor
-             * @param options           Configuration options
-             */
-            add: function (processorEntities, options) {
-                var selectAll = false;
-              if (nfCommon.isDefinedAndNotNull(options)) {
-                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                }
-    
-              // get the current time
-              var now = new Date().getTime();
-    
-                var add = function (processorEntity) {
-                  addedCache.set(processorEntity.id, now);
-  
-                    // add the processor
-                    processorMap.set(processorEntity.id, $.extend({
-                        type: 'Processor',
-                        dimensions: dimensions
-                    }, processorEntity));
-                };
-    
-                // determine how to handle the specified processor
-                if ($.isArray(processorEntities)) {
-                    $.each(processorEntities, function (_, processorEntity) {
-                        add(processorEntity);
-                    });
-              } else if (nfCommon.isDefinedAndNotNull(processorEntities)) {
-                    add(processorEntities);
-                }
-    
-                // apply the selection and handle new processor
-                var selection = select();
-                selection.enter().call(renderProcessors, selectAll);
-                selection.call(updateProcessors);
-            },
-    
-            /**
-             * Populates the graph with the specified processors.
-             *
-             * @argument {object | array} processorEntities                The processors to add
-             * @argument {object} options                Configuration options
-             */
-            set: function (processorEntities, options) {
-                var selectAll = false;
-                var transition = false;
-              if (nfCommon.isDefinedAndNotNull(options)) {
-                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                  transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-                }
-    
-              var set = function (proposedProcessorEntity) {
-                  var currentProcessorEntity = processorMap.get(proposedProcessorEntity.id);
-  
-                  // set the processor if appropriate due to revision and wasn't previously removed
-                  if (nfClient.isNewerRevision(currentProcessorEntity, proposedProcessorEntity) && !removedCache.has(proposedProcessorEntity.id)) {
-                      processorMap.set(proposedProcessorEntity.id, $.extend({
-                            type: 'Processor',
-                            dimensions: dimensions
-                      }, proposedProcessorEntity));
-                  }
-                };
-    
-                // determine how to handle the specified processor
-                if ($.isArray(processorEntities)) {
-                    $.each(processorMap.keys(), function (_, key) {
-                      var currentProcessorEntity = processorMap.get(key);
-                      var isPresent = $.grep(processorEntities, function (proposedProcessorEntity) {
-                          return proposedProcessorEntity.id === currentProcessorEntity.id;
-                      });
-  
-                      // if the current processor is not present and was not recently added, remove it
-                      if (isPresent.length === 0 && !addedCache.has(key)) {
-                            processorMap.remove(key);
-                      }
-                    });
-                    $.each(processorEntities, function (_, processorEntity) {
-                        set(processorEntity);
-                    });
-              } else if (nfCommon.isDefinedAndNotNull(processorEntities)) {
-                    set(processorEntities);
-                }
-    
-                // apply the selection and handle all new processors
-                var selection = select();
-                selection.enter().call(renderProcessors, selectAll);
-              selection.call(updateProcessors).call(nfCanvasUtils.position, transition);
-                selection.exit().call(removeProcessors);
-            },
-    
-            /**
-             * If the processor id is specified it is returned. If no processor id
-             * specified, all processors are returned.
-             *
-             * @param {string} id
-             */
-            get: function (id) {
-              if (nfCommon.isUndefined(id)) {
-                    return processorMap.values();
-                } else {
-                    return processorMap.get(id);
-                }
-            },
-    
-            /**
-             * If the processor id is specified it is refresh according to the current
-             * state. If not processor id is specified, all processors are refreshed.
-             *
-             * @param {string} id      Optional
-             */
-            refresh: function (id) {
-              if (nfCommon.isDefinedAndNotNull(id)) {
-                    d3.select('#id-' + id).call(updateProcessors);
-                } else {
-                    d3.selectAll('g.processor').call(updateProcessors);
-                }
-            },
-    
-            /**
-             * Positions the component.
-             *
-             * @param {string} id   The id
-             */
-            position: function (id) {
-              d3.select('#id-' + id).call(nfCanvasUtils.position);
-            },
-    
-            /**
-             * Refreshes the components necessary after a pan event.
-             */
-            pan: function () {
-                d3.selectAll('g.processor.entering, g.processor.leaving').call(updateProcessors);
-            },
-    
-            /**
-             * Reloads the processor state from the server and refreshes the UI.
-             * If the processor is currently unknown, this function just returns.
-             *
-             * @param {string} id The processor id
-             */
-            reload: function (id) {
-                if (processorMap.has(id)) {
-                    var processorEntity = processorMap.get(id);
-                    return $.ajax({
-                        type: 'GET',
-                        url: processorEntity.uri,
-                        dataType: 'json'
-                    }).done(function (response) {
-                      nfProcessor.set(response);
-                    });
-                }
-            },
-    
-            /**
-             * Removes the specified processor.
-             *
-           * @param {array|string} processorIds      The processors
-             */
-          remove: function (processorIds) {
-              var now = new Date().getTime();
-  
-              if ($.isArray(processorIds)) {
-                  $.each(processorIds, function (_, processorId) {
-                      removedCache.set(processorId, now);
-                      processorMap.remove(processorId);
-                    });
-                } else {
-                  removedCache.set(processorIds, now);
-                  processorMap.remove(processorIds);
-                }
-    
-                // apply the selection and handle all removed processors
-                select().exit().call(removeProcessors);
-            },
-    
-            /**
-             * Removes all processors.
-             */
-            removeAll: function () {
-              nfProcessor.remove(processorMap.keys());
-          },
-  
-          /**
-           * Expires the caches up to the specified timestamp.
-           *
-           * @param timestamp
-           */
-          expireCaches: function (timestamp) {
-              var expire = function (cache) {
-                  cache.forEach(function (id, entryTimestamp) {
-                      if (timestamp > entryTimestamp) {
-                          cache.remove(id);
-                      }
-                  });
-              };
-  
-              expire(addedCache);
-              expire(removedCache);
-          },
-  
-          /**
-           * Returns the default fill color that should be used when drawing a processor.
-           */
-          defaultFillColor: function () {
-              return '#FFFFFF';
-          },
-  
-          /**
-           * Returns the default icon color that should be used when drawing a processor.
-           */
-          defaultIconColor: function () {
-                return '#ad9897';
-            }
-        };
-    
-      return nfProcessor;
-  }));
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
deleted file mode 100644
index ef3ba113a720..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
+++ /dev/null
@@ -1,795 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-    /**
-     * Lists FlowFiles from a given connection.
-     */
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'Slick',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.Shell',
-                  'nf.ng.Bridge',
-                  'nf.ClusterSummary',
-                  'nf.ErrorHandler',
-                  'nf.Storage',
-                  'nf.CanvasUtils'],
-              function ($, Slick, nfCommon, nfDialog, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils) {
-                  return (nf.QueueListing = factory($, Slick, nfCommon, nfDialog, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.QueueListing =
-              factory(require('jquery'),
-                  require('Slick'),
-                  require('nf.Common'),
-                  require('nf.Dialog'),
-                  require('nf.Shell'),
-                  require('nf.ng.Bridge'),
-                  require('nf.ClusterSummary'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Storage'),
-                  require('nf.CanvasUtils')));
-      } else {
-          nf.QueueListing = factory(root.$,
-              root.Slick,
-              root.nf.Common,
-              root.nf.Dialog,
-              root.nf.Shell,
-              root.nf.ng.Bridge,
-              root.nf.ClusterSummary,
-              root.nf.ErrorHandler,
-              root.nf.Storage,
-              root.nf.CanvasUtils);
-      }
-  }(this, function ($, Slick, nfCommon, nfDialog, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils) {
-      'use strict';
-    
-        /**
-         * Configuration object used to hold a number of configuration items.
-         */
-        var config = {
-            urls: {
-                uiExtensionToken: '../nifi-api/access/ui-extension-token',
-                downloadToken: '../nifi-api/access/download-token'
-            }
-        };
-    
-        /**
-         * Initializes the listing request status dialog.
-         */
-        var initializeListingRequestStatusDialog = function () {
-            // configure the drop request status dialog
-            $('#listing-request-status-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-              headerText: nf._.msg('nf-queue-listing.QueueListing'),
-                handler: {
-                    close: function () {
-                        // clear the current button model
-                        $('#listing-request-status-dialog').modal('setButtonModel', []);
-                    }
-                }
-            });
-        };
-    
-        /**
-         * Downloads the content for the flowfile currently being viewed.
-         */
-        var downloadContent = function () {
-            var dataUri = $('#flowfile-uri').text() + '/content';
-    
-            // perform the request once we've received a token
-          nfCommon.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
-                var parameters = {};
-    
-                // conditionally include the ui extension token
-              if (!nfCommon.isBlank(downloadToken)) {
-                    parameters['access_token'] = downloadToken;
-                }
-    
-                // conditionally include the cluster node id
-                var clusterNodeId = $('#flowfile-cluster-node-id').text();
-              if (!nfCommon.isBlank(clusterNodeId)) {
-                    parameters['clusterNodeId'] = clusterNodeId;
-                }
-    
-                // open the url
-                if ($.isEmptyObject(parameters)) {
-                    window.open(dataUri);
-                } else {
-                    window.open(dataUri + '?' + $.param(parameters));
-                }
-            }).fail(function () {
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-queue-listing.QueueListing'),
-                  dialogContent: nf._.msg('nf-queue-listing.Message1')
-                });
-            });
-        };
-    
-        /**
-         * Views the content for the flowfile currently being viewed.
-         */
-        var viewContent = function () {
-            var dataUri = $('#flowfile-uri').text() + '/content';
-    
-            // generate tokens as necessary
-            var getAccessTokens = $.Deferred(function (deferred) {
-              if (nfStorage.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 () {
-                      nfDialog.showOkDialog({
-                          headerText: nf._.msg('nf-queue-listing.QueueListing'),
-                          dialogContent: nf._.msg('nf-queue-listing.Message2')
-                        });
-                        deferred.reject();
-                    });
-                } else {
-                    deferred.resolve('', '');
-                }
-            }).promise();
-    
-            // perform the request after we've received the tokens
-            getAccessTokens.done(function (uiExtensionToken, downloadToken) {
-                var dataUriParameters = {};
-    
-                // conditionally include the cluster node id
-                var clusterNodeId = $('#flowfile-cluster-node-id').text();
-              if (!nfCommon.isBlank(clusterNodeId)) {
-                    dataUriParameters['clusterNodeId'] = clusterNodeId;
-                }
-    
-                // include the download token if applicable
-              if (!nfCommon.isBlank(downloadToken)) {
-                    dataUriParameters['access_token'] = downloadToken;
-                }
-    
-                // include parameters if necessary
-                if ($.isEmptyObject(dataUriParameters) === false) {
-                    dataUri = dataUri + '?' + $.param(dataUriParameters);
-                }
-    
-                // open the content viewer
-                var contentViewerUrl = $('#nifi-content-viewer-url').text();
-    
-                // 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 += '&';
-                }
-    
-                var contentViewerParameters = {
-                    'ref': dataUri
-                };
-    
-                // include the download token if applicable
-              if (!nfCommon.isBlank(uiExtensionToken)) {
-                    contentViewerParameters['access_token'] = uiExtensionToken;
-                }
-    
-                // open the content viewer
-                window.open(contentViewerUrl + $.param(contentViewerParameters));
-            });
-        };
-    
-        /**
-         * Performs a listing on the specified connection.
-         *
-         * @param connection the connection
-         */
-        var performListing = function (connection) {
-            var MAX_DELAY = 4;
-            var cancelled = false;
-            var listingRequest = null;
-            var listingRequestTimer = null;
-    
-            return $.Deferred(function (deferred) {
-                // updates the progress bar
-                var updateProgress = function (percentComplete) {
-                    // remove existing labels
-                    var progressBar = $('#listing-request-percent-complete');
-                    progressBar.find('div.progress-label').remove();
-                    progressBar.find('md-progress-linear').remove();
-    
-                    // update the progress
-                    var label = $('<div class="progress-label"></div>').text(percentComplete + '%');
-                  (nfNgBridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + percentComplete + '" class="md-hue-2" md-mode="determinate" aria-label="Searching Queue"></md-progress-linear>'))(nfNgBridge.rootScope)).appendTo(progressBar);
-                    progressBar.append(label);
-                };
-    
-                // update the button model of the drop request status dialog
-                $('#listing-request-status-dialog').modal('setButtonModel', [{
-                  headerText: nf._.msg('nf-queue-listing.QueueListing'),
-                  buttonText: nf._.msg('nf-queue-listing.Stop'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            cancelled = true;
-    
-                            // we are waiting for the next poll attempt
-                            if (listingRequestTimer !== null) {
-                                // cancel it
-                                clearTimeout(listingRequestTimer);
-    
-                                // cancel the listing request
-                                completeListingRequest();
-                            }
-                        }
-                    }
-                }]);
-    
-                // completes the listing request by removing it
-                var completeListingRequest = function () {
-                    $('#listing-request-status-dialog').modal('hide');
-    
-                    var reject = cancelled;
-    
-                    // ensure the listing requests are present
-                  if (nfCommon.isDefinedAndNotNull(listingRequest)) {
-                        $.ajax({
-                            type: 'DELETE',
-                            url: listingRequest.uri,
-                            dataType: 'json'
-                        });
-    
-                        // use the listing request from when the listing completed
-                      if (nfCommon.isEmpty(listingRequest.flowFileSummaries)) {
-                            if (cancelled === false) {
-                                reject = true;
-    
-                                // show the dialog
-                              nfDialog.showOkDialog({
-                                  headerText: nf._.msg('nf-queue-listing.QueueListing'),
-                                  dialogContent: nf._.msg('nf-queue-listing.Message3')
-                                });
-                            }
-                        } else {
-                            // update the queue size
-                          $('#total-flowfiles-count').text(nfCommon.formatInteger(listingRequest.queueSize.objectCount));
-                          $('#total-flowfiles-size').text(nfCommon.formatDataSize(listingRequest.queueSize.byteCount));
-    
-                            // update the last updated time
-                            $('#queue-listing-last-refreshed').text(listingRequest.lastUpdated);
-    
-                            // show a message for the queue listing if necessary
-                            var queueListingTable = $('#queue-listing-table');
-                            var queueListingMessage = $('#queue-listing-message');
-                            if (listingRequest.sourceRunning === true || listingRequest.destinationRunning === true) {
-                                if (listingRequest.souceRunning === true && listingRequest.destinationRunning === true) {
-                                  queueListingMessage.text(nf._.msg('nf-queue-listing.Message4')).show();
-                                } else if (listingRequest.sourceRunning === true) {
-                                  queueListingMessage.text(nf._.msg('nf-queue-listing.Message5')).show();
-                                } else if (listingRequest.destinationRunning === true) {
-                                  queueListingMessage.text(nf._.msg('nf-queue-listing.Message6')).show();
-                                }
-                            } else {
-                                queueListingMessage.text('').hide();
-                            }
-    
-                            // get the grid to load the data
-                            var queueListingGrid = $('#queue-listing-table').data('gridInstance');
-                            var queueListingData = queueListingGrid.getData();
-    
-                            // load the flowfiles
-                            queueListingData.beginUpdate();
-                            queueListingData.setItems(listingRequest.flowFileSummaries, 'uuid');
-                            queueListingData.endUpdate();
-                        }
-                    } else {
-                        reject = true;
-                    }
-    
-                    if (reject) {
-                        deferred.reject();
-                    } else {
-                        deferred.resolve();
-                    }
-                };
-    
-                // process the listing request
-                var processListingRequest = function (delay) {
-                    // update the percent complete
-                    updateProgress(listingRequest.percentCompleted);
-    
-                    // update the status of the listing request
-                    $('#listing-request-status-message').text(listingRequest.state);
-    
-                    // close the dialog if the
-                    if (listingRequest.finished === true || cancelled === true) {
-                        completeListingRequest();
-                    } else {
-                        // wait delay to poll again
-                        listingRequestTimer = setTimeout(function () {
-                            // clear the listing request timer
-                            listingRequestTimer = null;
-    
-                            // schedule to poll the status again in nextDelay
-                            pollListingRequest(Math.min(MAX_DELAY, delay * 2));
-                        }, delay * 1000);
-                    }
-                };
-    
-                // schedule for the next poll iteration
-                var pollListingRequest = function (nextDelay) {
-                    $.ajax({
-                        type: 'GET',
-                        url: listingRequest.uri,
-                        dataType: 'json'
-                    }).done(function (response) {
-                        listingRequest = response.listingRequest;
-                        processListingRequest(nextDelay);
-                  }).fail(completeListingRequest).fail(nfErrorHandler.handleAjaxError);
-                };
-    
-                // issue the request to list the flow files
-                $.ajax({
-                    type: 'POST',
-                    url: '../nifi-api/flowfile-queues/' + connection.id + '/listing-requests',
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // initialize the progress bar value
-                    updateProgress(0);
-    
-                    // show the progress dialog
-                    $('#listing-request-status-dialog').modal('show');
-    
-                    // process the drop request
-                    listingRequest = response.listingRequest;
-                    processListingRequest(1);
-              }).fail(completeListingRequest).fail(nfErrorHandler.handleAjaxError);
-            }).promise();
-        };
-    
-        /**
-         * Shows the details for the specified flowfile.
-         *
-         * @param flowFileSummary the flowfile summary
-         */
-        var showFlowFileDetails = function (flowFileSummary) {
-            // formats an flowfile detail
-            var formatFlowFileDetail = function (label, value) {
-                $('<div class="flowfile-detail"></div>').append(
-                    $('<div class="detail-name"></div>').text(label)).append(
-                  $('<div class="detail-value">' + nfCommon.formatValue(value) + '</div>').ellipsis()).append(
-                    $('<div class="clear"></div>')).appendTo('#additional-flowfile-details');
-            };
-    
-            // formats the content value
-            var formatContentValue = function (element, value) {
-              if (nfCommon.isDefinedAndNotNull(value)) {
-                    element.removeClass('unset').text(value);
-                } else {
-                  element.addClass('unset').text(nf._.msg('nf-queue-listing.NoValueSet'));
-                }
-            };
-    
-            var params = {};
-          if (nfCommon.isDefinedAndNotNull(flowFileSummary.clusterNodeId)) {
-                params['clusterNodeId'] = flowFileSummary.clusterNodeId;
-            }
-    
-            $.ajax({
-                type: 'GET',
-                url: flowFileSummary.uri,
-                data: params,
-                dataType: 'json'
-            }).done(function (response) {
-                var flowFile = response.flowFile;
-    
-                // show the URI to this flowfile
-                $('#flowfile-uri').text(flowFile.uri);
-    
-                // show the flowfile details dialog
-              $('#flowfile-uuid').html(nfCommon.formatValue(flowFile.uuid));
-              $('#flowfile-filename').html(nfCommon.formatValue(flowFile.filename));
-              $('#flowfile-queue-position').html(nfCommon.formatValue(flowFile.position));
-              $('#flowfile-file-size').html(nfCommon.formatValue(flowFile.contentClaimFileSize));
-              $('#flowfile-queued-duration').text(nfCommon.formatDuration(flowFile.queuedDuration));
-              $('#flowfile-lineage-duration').text(nfCommon.formatDuration(flowFile.lineageDuration));
-              $('#flowfile-penalized').text(flowFile.penalized === true ? 'Yes' : 'No');
-    
-                // conditionally show the cluster node identifier
-              if (nfCommon.isDefinedAndNotNull(flowFileSummary.clusterNodeId)) {
-                    // save the cluster node id
-                    $('#flowfile-cluster-node-id').text(flowFileSummary.clusterNodeId);
-    
-                    // render the cluster node address
-                    formatFlowFileDetail('Node Address', flowFileSummary.clusterNodeAddress);
-                }
-    
-              if (nfCommon.isDefinedAndNotNull(flowFile.contentClaimContainer)) {
-                    // content claim
-                    formatContentValue($('#content-container'), flowFile.contentClaimContainer);
-                    formatContentValue($('#content-section'), flowFile.contentClaimSection);
-                    formatContentValue($('#content-identifier'), flowFile.contentClaimIdentifier);
-                    formatContentValue($('#content-offset'), flowFile.contentClaimOffset);
-                    formatContentValue($('#content-bytes'), flowFile.contentClaimFileSizeBytes);
-    
-                    // input content file size
-                    var contentSize = $('#content-size');
-                    formatContentValue(contentSize, flowFile.contentClaimFileSize);
-                  if (nfCommon.isDefinedAndNotNull(flowFile.contentClaimFileSize)) {
-                        // over the default tooltip with the actual byte count
-                      contentSize.attr('title', nfCommon.formatInteger(flowFile.contentClaimFileSizeBytes) + nf._.msg('nf-queue-listing.Bytes'));
-                    }
-    
-                    // show the content details
-                    $('#flowfile-content-details').show();
-                } else {
-                    $('#flowfile-content-details').hide();
-                }
-    
-                // attributes
-                var attributesContainer = $('#flowfile-attributes-container');
-    
-                // get any action details
-                $.each(flowFile.attributes, function (attributeName, attributeValue) {
-                    // create the attribute record
-                    var attributeRecord = $('<div class="attribute-detail"></div>')
-                      .append($('<div class="attribute-name">' + nfCommon.formatValue(attributeName) + '</div>').ellipsis())
-                        .appendTo(attributesContainer);
-    
-                    // add the current value
-                    attributeRecord
-                      .append($('<div class="attribute-value">' + nfCommon.formatValue(attributeValue) + '</div>').ellipsis())
-                        .append('<div class="clear"></div>');
-                });
-    
-                // show the dialog
-                $('#flowfile-details-dialog').modal('show');
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-      var nfQueueListing = {
-            init: function () {
-                initializeListingRequestStatusDialog();
-    
-                // define mouse over event for the refresh button
-                $('#queue-listing-refresh-button').click(function () {
-                    var connection = $('#queue-listing-table').data('connection');
-                    performListing(connection);
-                });
-    
-                // define a custom formatter for showing more processor details
-                var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
-                  return '<div class="pointer show-flowfile-details fa fa-info-circle" title="'+nf._.msg('nf-processor-configuration.ViewDetails')+'" style="margin-top: 5px; float: left;"></div>';
-                };
-    
-                // function for formatting data sizes
-                var dataSizeFormatter = function (row, cell, value, columnDef, dataContext) {
-                  return nfCommon.formatDataSize(value);
-                };
-    
-                // function for formatting durations
-                var durationFormatter = function (row, cell, value, columnDef, dataContext) {
-                  return nfCommon.formatDuration(value);
-                };
-    
-                // function for formatting penalization
-                var penalizedFormatter = function (row, cell, value, columnDef, dataContext) {
-                    var markup = '';
-    
-                    if (value === true) {
-                        markup += 'Yes';
-                    }
-    
-                    return markup;
-                };
-    
-                // initialize the queue listing table
-                var queueListingColumns = [
-                    {
-                        id: 'moreDetails',
-                        field: 'moreDetails',
-                        name: '&nbsp;',
-                        sortable: false,
-                        resizable: false,
-                        formatter: moreDetailsFormatter,
-                        width: 50,
-                        maxWidth: 50
-                    },
-                    {
-                        id: 'position',
-                      name: nf._.msg('nf-queue-listing.Position'),
-                        field: 'position',
-                        sortable: false,
-                        resizable: false,
-                        width: 75,
-                        maxWidth: 75
-                    },
-                  {
-                      id: 'uuid',
-                      name: 'UUID',
-                      field: 'uuid',
-                      sortable: false,
-                      resizable: true
-                  },
-                  {
-                      id: 'filename',
-                      name: nf._.msg('nf-queue-listing.FileName'),
-                      field: 'filename',
-                      sortable: false,
-                      resizable: true
-                  },
-                    {
-                        id: 'size',
-                      name: nf._.msg('nf-queue-listing.FileSize'),
-                        field: 'size',
-                        sortable: false,
-                        resizable: true,
-                        defaultSortAsc: false,
-                        formatter: dataSizeFormatter
-                    },
-                    {
-                        id: 'queuedDuration',
-                      name: nf._.msg('nf-queue-listing.queuedDuration'),
-                        field: 'queuedDuration',
-                        sortable: false,
-                        resizable: true,
-                        formatter: durationFormatter
-                    },
-                    {
-                        id: 'lineageDuration',
-                      name: nf._.msg('nf-queue-listing.lineageDuration'),
-                        field: 'lineageDuration',
-                        sortable: false,
-                        resizable: true,
-                        formatter: durationFormatter
-                    },
-                    {
-                        id: 'penalized',
-                      name: nf._.msg('nf-queue-listing.penalized'),
-                        field: 'penalized',
-                        sortable: false,
-                        resizable: false,
-                        width: 100,
-                        maxWidth: 100,
-                        formatter: penalizedFormatter
-                    }
-                ];
-    
-                // conditionally show the cluster node identifier
-              if (nfClusterSummary.isClustered()) {
-                    queueListingColumns.push({
-                        id: 'clusterNodeAddress',
-                      name: nf._.msg('nf-queue-listing.node'),
-                        field: 'clusterNodeAddress',
-                        sortable: false,
-                        resizable: true
-                    });
-                }
-    
-                // add an actions column when the user can access provenance
-              if (nfCommon.canAccessProvenance()) {
-                    // function for formatting actions
-                    var actionsFormatter = function () {
-                      return '<div title="'+nf._.msg('nf-processor-configuration.Provenance')+'" class="pointer icon icon-provenance view-provenance"></div>';
-                    };
-    
-                    queueListingColumns.push({
-                        id: 'actions',
-                        name: '&nbsp;',
-                        resizable: false,
-                        formatter: actionsFormatter,
-                        sortable: false,
-                        width: 50,
-                        maxWidth: 50
-                    });
-                }
-    
-                var queueListingOptions = {
-                    forceFitColumns: true,
-                    enableTextSelectionOnCells: true,
-                    enableCellNavigation: false,
-                    enableColumnReorder: false,
-                    autoEdit: false,
-                    rowHeight: 24
-                };
-    
-                // initialize the dataview
-                var queueListingData = new Slick.Data.DataView({
-                    inlineFilters: false
-                });
-                queueListingData.setItems([]);
-    
-                // initialize the grid
-                var queueListingGrid = new Slick.Grid('#queue-listing-table', queueListingData, queueListingColumns, queueListingOptions);
-                queueListingGrid.setSelectionModel(new Slick.RowSelectionModel());
-                queueListingGrid.registerPlugin(new Slick.AutoTooltips());
-    
-                // configure a click listener
-                queueListingGrid.onClick.subscribe(function (e, args) {
-                    var target = $(e.target);
-    
-                    // get the node at this row
-                    var item = queueListingData.getItem(args.row);
-    
-                    // determine the desired action
-                    if (queueListingGrid.getColumns()[args.cell].id === 'moreDetails') {
-                        if (target.hasClass('show-flowfile-details')) {
-                            showFlowFileDetails(item);
-                        }
-                    } else if (queueListingGrid.getColumns()[args.cell].id === 'actions') {
-                        if (target.hasClass('view-provenance')) {
-                            // close the settings dialog
-                            $('#shell-close-button').click();
-    
-                            // open the provenance page with the specified component
-                          nfShell.showPage('provenance?' + $.param({
-                                    flowFileUuid: item.uuid
-                                }));
-                        }
-                    }
-                });
-    
-                // wire up the dataview to the grid
-                queueListingData.onRowCountChanged.subscribe(function (e, args) {
-                    queueListingGrid.updateRowCount();
-                    queueListingGrid.render();
-    
-                    // update the total number of displayed flowfiles
-                    $('#displayed-flowfiles').text(args.current);
-                });
-                queueListingData.onRowsChanged.subscribe(function (e, args) {
-                    queueListingGrid.invalidateRows(args.rows);
-                    queueListingGrid.render();
-                });
-    
-                // hold onto an instance of the grid
-                $('#queue-listing-table').data('gridInstance', queueListingGrid);
-    
-                // initialize the number of display items
-                $('#displayed-flowfiles').text('0');
-            },
-    
-            /**
-             * Initializes the flowfile details dialog.
-             */
-            initFlowFileDetailsDialog: function () {
-                $('#content-download').on('click', downloadContent);
-    
-                // only show if content viewer is configured
-              if (nfCommon.isContentViewConfigured()) {
-                    $('#content-view').show();
-                    $('#content-view').on('click', viewContent);
-                }
-    
-                $('#flowfile-details-tabs').tabbs({
-                    tabStyle: 'tab',
-                    selectedTabStyle: 'selected-tab',
-                    scrollableTabContentStyle: 'scrollable',
-                    tabs: [{
-                        name: 'Details',
-                        tabContentId: 'flowfile-details-tab-content'
-                    }, {
-                        name: 'Attributes',
-                        tabContentId: 'flowfile-attributes-tab-content'
-                    }]
-                });
-    
-                $('#flowfile-details-dialog').modal({
-                    scrollableContentStyle: 'scrollable',
-                  headerText: nf._.msg('nf-queue-listing.FlowFile'),
-                    buttons: [{
-                      buttonText: nf._.msg('nf-queue-listing.Ok'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                $('#flowfile-details-dialog').modal('hide');
-                            }
-                        }
-                    }],
-                    handler: {
-                        close: function () {
-                            // clear the details
-                            $('#flowfile-attributes-container').empty();
-                            $('#flowfile-cluster-node-id').text('');
-                            $('#additional-flowfile-details').empty();
-                        },
-                        open: function () {
-                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                        }
-                    }
-                });
-            },
-    
-            /**
-             * Update the size of the grid based on its container's current size.
-             */
-            resetTableSize: function () {
-                var queueListingGrid = $('#queue-listing-table').data('gridInstance');
-              if (nfCommon.isDefinedAndNotNull(queueListingGrid)) {
-                    queueListingGrid.resizeCanvas();
-                }
-            },
-    
-            /**
-             * Shows the listing of the FlowFiles from a given connection.
-             *
-             * @param   {object}    The connection
-             */
-            listQueue: function (connection) {
-                // perform the initial listing
-                performListing(connection).done(function () {
-                    // update the connection name
-                    var connectionName = '';
-                    if (connection.permissions.canRead) {
-                      connectionName = nfCanvasUtils.formatConnectionName(connection.component);
-                    }
-                    if (connectionName === '') {
-                        connectionName = 'Connection';
-                    }
-                    $('#queue-listing-header-text').text(connectionName);
-    
-                    // show the listing container
-                  nfShell.showContent('#queue-listing-container').done(function () {
-                        $('#queue-listing-table').removeData('connection');
-    
-                        // clear the table
-                        var queueListingGrid = $('#queue-listing-table').data('gridInstance');
-                        var queueListingData = queueListingGrid.getData();
-    
-                        // clear the flowfiles
-                        queueListingData.beginUpdate();
-                        queueListingData.setItems([], 'uuid');
-                        queueListingData.endUpdate();
-    
-                        // reset stats
-                        $('#displayed-flowfiles, #total-flowfiles-count').text('0');
-                      $('#total-flowfiles-size').text(nfCommon.formatDataSize(0));
-                    });
-    
-                    // adjust the table size
-                  nfQueueListing.resetTableSize();
-    
-                    // store the connection for access later
-                    $('#queue-listing-table').data('connection', connection);
-                });
-            }
-        };
-    
-      return nfQueueListing;
-  }));
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
deleted file mode 100644
index 271271319774..000000000000
--- 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
+++ /dev/null
@@ -1,208 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.ErrorHandler',
-                'nf.Common',
-                'nf.Dialog',
-                'nf.Client',
-                'nf.CanvasUtils',
-                'nf.ng.Bridge',
-                'nf.RemoteProcessGroup'],
-            function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup) {
-                return (nf.RemoteProcessGroupConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.RemoteProcessGroupConfiguration =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.ErrorHandler'),
-                require('nf.Common'),
-                require('nf.Dialog'),
-                require('nf.Client'),
-                require('nf.CanvasUtils'),
-                require('nf.ng.Bridge'),
-                require('nf.RemoteProcessGroup')));
-    } else {
-        nf.RemoteProcessGroupConfiguration = factory(root.$,
-            root.d3,
-            root.nf.ErrorHandler,
-            root.nf.Common,
-            root.nf.Dialog,
-            root.nf.Client,
-            root.nf.CanvasUtils,
-            root.nf.ng.Bridge,
-            root.nf.RemoteProcessGroup);
-    }
-}(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup) {
-    'use strict';
-
-    return {
-        init: function () {
-            $('#remote-process-group-configuration').modal({
-                headerText: 'Configure Remote Process Group',
-                scrollableContentStyle: 'scrollable',
-                buttons: [{
-                    buttonText: 'Apply',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            var remoteProcessGroupId = $('#remote-process-group-id').text();
-                            var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum();
-
-                            // create the remote process group details
-                            var remoteProcessGroupEntity = {
-                                'revision': nfClient.getRevision(remoteProcessGroupData),
-                                'component': {
-                                    id: remoteProcessGroupId,
-                                    communicationsTimeout: $('#remote-process-group-timeout').val(),
-                                    yieldDuration: $('#remote-process-group-yield-duration').val(),
-                                    transportProtocol: $('#remote-process-group-transport-protocol-combo').combo('getSelectedOption').value,
-                                    proxyHost: $('#remote-process-group-proxy-host').val(),
-                                    proxyPort: $('#remote-process-group-proxy-port').val(),
-                                    proxyUser: $('#remote-process-group-proxy-user').val(),
-                                    proxyPassword: $('#remote-process-group-proxy-password').val(),
-                                    localNetworkInterface: $('#remote-process-group-local-network-interface').val()
-                                }
-                            };
-
-                            // update the selected component
-                            $.ajax({
-                                type: 'PUT',
-                                data: JSON.stringify(remoteProcessGroupEntity),
-                                url: remoteProcessGroupData.uri,
-                                dataType: 'json',
-                                contentType: 'application/json'
-                            }).done(function (response) {
-                                // refresh the remote process group component
-                                nfRemoteProcessGroup.set(response);
-
-                                // inform Angular app values have changed
-                                nfNgBridge.digest();
-
-                                // close the details panel
-                                $('#remote-process-group-configuration').modal('hide');
-                            }).fail(function (xhr, status, error) {
-                                if (xhr.status === 400) {
-                                    var errors = xhr.responseText.split('\n');
-
-                                    var content;
-                                    if (errors.length === 1) {
-                                        content = $('<span></span>').text(errors[0]);
-                                    } else {
-                                        content = nfCommon.formatUnorderedList(errors);
-                                    }
-
-                                    nfDialog.showOkDialog({
-                                        dialogContent: content,
-                                        headerText: 'Remote Process Group Configuration'
-                                    });
-                                } else {
-                                    nfErrorHandler.handleAjaxError(xhr, status, error);
-                                }
-                            });
-                        }
-                    }
-                },
-                    {
-                        buttonText: 'Cancel',
-                        color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
-                        },
-                        handler: {
-                            click: function () {
-                                $('#remote-process-group-configuration').modal('hide');
-                            }
-                        }
-                    }],
-                handler: {
-                    close: function () {
-                        // clear the remote process group details
-                        $('#remote-process-group-id').text('');
-                        $('#remote-process-group-name').text('');
-                        $('#remote-process-group-urls').text('');
-                        $('#remote-process-group-timeout').val('');
-                        $('#remote-process-group-yield-duration').val('');
-                        $('#remote-process-group-transport-protocol-combo').combo('setSelectedOption', {
-                            value: 'RAW'
-                        });
-                        $('#remote-process-group-local-network-interface').val('');
-                        $('#remote-process-group-proxy-host').val('');
-                        $('#remote-process-group-proxy-port').val('');
-                        $('#remote-process-group-proxy-user').val('');
-                        $('#remote-process-group-proxy-password').val('');
-                    }
-                }
-            });
-            // initialize the transport protocol combo
-            $('#remote-process-group-transport-protocol-combo').combo({
-                options: [{
-                    text: 'RAW',
-                    value: 'RAW'
-                }, {
-                    text: 'HTTP',
-                    value: 'HTTP'
-                }]
-            });
-        },
-
-        /**
-         * Shows the details for the remote process group in the specified selection.
-         *
-         * @argument {selection} selection      The selection
-         */
-        showConfiguration: function (selection) {
-            // if the specified component is a remote process group, load its properties
-            if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                var selectionData = selection.datum();
-
-                // populate the port settings
-                $('#remote-process-group-id').text(selectionData.id);
-                $('#remote-process-group-name').text(selectionData.component.name);
-                $('#remote-process-group-urls').text(selectionData.component.targetUris);
-
-                // populate the text fields
-                $('#remote-process-group-timeout').val(selectionData.component.communicationsTimeout);
-                $('#remote-process-group-yield-duration').val(selectionData.component.yieldDuration);
-                $('#remote-process-group-proxy-host').val(selectionData.component.proxyHost);
-                $('#remote-process-group-proxy-port').val(selectionData.component.proxyPort);
-                $('#remote-process-group-proxy-user').val(selectionData.component.proxyUser);
-                $('#remote-process-group-proxy-password').val(selectionData.component.proxyPassword);
-                $('#remote-process-group-local-network-interface').val(selectionData.component.localNetworkInterface);
-
-                // select the appropriate transport-protocol
-                $('#remote-process-group-transport-protocol-combo').combo('setSelectedOption', {
-                    value: selectionData.component.transportProtocol
-                });
-
-                // show the details
-                $('#remote-process-group-configuration').modal('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/canvas/nf-remote-process-group-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
deleted file mode 100644
index dca53d9e56e6..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
+++ /dev/null
@@ -1,106 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Common',
-                  'nf.CanvasUtils'],
-              function ($, nfCommon, nfCanvasUtils) {
-                  return (nf.RemoteProcessGroupDetails = factory($, nfCommon, nfCanvasUtils));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.RemoteProcessGroupDetails =
-              factory(require('jquery'),
-                  require('nf.Common'),
-                  require('nf.CanvasUtils')));
-      } else {
-          nf.RemoteProcessGroupDetails = factory(root.$,
-              root.nf.Common,
-              root.nf.CanvasUtils);
-      }
-  }(this, function ($, nfCommon, nfCanvasUtils) {
-      'use strict';
-  
-        return {
-            init: function () {
-                $('#remote-process-group-details').modal({
-                  headerText: nf._.msg('nf-remote-process-group-details.RemoteProcessGroupDetails'),
-                    scrollableContentStyle: 'scrollable',
-                    buttons: [{
-                      buttonText: nf._.msg('nf-remote-process-group-details.Ok'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                $('#remote-process-group-details').modal('hide');
-                            }
-                        }
-                    }],
-                    handler: {
-                        close: function () {
-                            // clear the remote process group details
-                          nfCommon.clearField('read-only-remote-process-group-id');
-                          nfCommon.clearField('read-only-remote-process-group-name');
-                          nfCommon.clearField('read-only-remote-process-group-urls');
-                          nfCommon.clearField('read-only-remote-process-group-timeout');
-                          nfCommon.clearField('read-only-remote-process-group-yield-duration');
-                          nfCommon.clearField('read-only-remote-process-group-transport-protocol');
-                          nfCommon.clearField('read-only-remote-process-group-local-network-interface');
-                          nfCommon.clearField('read-only-remote-process-group-proxy-host');
-                          nfCommon.clearField('read-only-remote-process-group-proxy-port');
-                          nfCommon.clearField('read-only-remote-process-group-proxy-user');
-                          nfCommon.clearField('read-only-remote-process-group-proxy-password');
-                        }
-                    }
-                });
-            },
-    
-            /**
-             * Shows the details for the remote process group in the specified selection.
-             *
-             * @argument {selection} selection      The selection
-             */
-            showDetails: function (selection) {
-                // if the specified component is a remote process group, load its properties
-              if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                    var selectionData = selection.datum();
-    
-                    // populate the port settings
-                  nfCommon.populateField('read-only-remote-process-group-id', selectionData.id);
-                  nfCommon.populateField('read-only-remote-process-group-name', selectionData.component.name);
-                  nfCommon.populateField('read-only-remote-process-group-urls', selectionData.component.targetUris);
-                  nfCommon.populateField('read-only-remote-process-group-timeout', selectionData.component.communicationsTimeout);
-                  nfCommon.populateField('read-only-remote-process-group-yield-duration', selectionData.component.yieldDuration);
-                  nfCommon.populateField('read-only-remote-process-group-transport-protocol', selectionData.component.transportProtocol);
-                  nfCommon.populateField('read-only-remote-process-group-local-network-interface', selectionData.component.localNetworkInterface);
-                  nfCommon.populateField('read-only-remote-process-group-proxy-host', selectionData.component.proxyHost);
-                  nfCommon.populateField('read-only-remote-process-group-proxy-port', selectionData.component.proxyPort);
-                  nfCommon.populateField('read-only-remote-process-group-proxy-user', selectionData.component.proxyUser);
-                  nfCommon.populateField('read-only-remote-process-group-proxy-password', selectionData.component.proxyPassword);
-    
-                    // show the details
-                    $('#remote-process-group-details').modal('show');
-                }
-            }
-        };
-  }));
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
deleted file mode 100644
index 2fb18bc3eab9..000000000000
--- 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
+++ /dev/null
@@ -1,592 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.ErrorHandler',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.Client',
-                  'nf.CanvasUtils',
-                  'nf.ng.Bridge',
-                  'nf.RemoteProcessGroup'],
-              function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup) {
-                  return (nf.RemoteProcessGroupPorts = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.RemoteProcessGroupPorts =
-              factory(require('jquery'),
-                  require('d3'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Common'),
-                  require('nf.Dialog'),
-                  require('nf.Client'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ng.Bridge'),
-                  require('nf.RemoteProcessGroup')));
-      } else {
-          nf.RemoteProcessGroupPorts = factory(root.$,
-              root.d3,
-              root.nf.ErrorHandler,
-              root.nf.Common,
-              root.nf.Dialog,
-              root.nf.Client,
-              root.nf.CanvasUtils,
-              root.nf.ng.Bridge,
-              root.nf.RemoteProcessGroup);
-      }
-  }(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup) {
-      'use strict';
-    
-        /**
-         * Initializes the remote port configuration dialog.
-         */
-        var initRemotePortConfigurationDialog = function () {
-            $('#remote-port-configuration').modal({
-              headerText: nf._.msg('nf-remote-process-group-ports.ConfigureRemotePort'),
-                scrollableContentStyle: 'scrollable',
-                buttons: [{
-                  buttonText: nf._.msg('nf-remote-process-group-ports.Apply'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            var remotePortConcurrentTasks = $('#remote-port-concurrent-tasks').val();
-    
-                            // ensure the property name and value is specified
-                            if ($.isNumeric(remotePortConcurrentTasks)) {
-                                var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
-                                var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum();
-                                var remotePortId = $('#remote-port-id').text();
-    
-                                // create the remote process group details
-                                var remoteProcessGroupPortEntity = {
-                                  'revision': nfClient.getRevision(remoteProcessGroupData),
-                                    'remoteProcessGroupPort': {
-                                        id: remotePortId,
-                                        groupId: remoteProcessGroupId,
-                                        useCompression: $('#remote-port-use-compression').hasClass('checkbox-checked'),
-                                        concurrentlySchedulableTaskCount: remotePortConcurrentTasks
-                                    }
-                                };
-    
-                                // determine the type of port this is
-                                var portContextPath = '/output-ports/';
-                                if ($('#remote-port-type').text() === 'input') {
-                                    portContextPath = '/input-ports/';
-                                }
-    
-                                // update the selected component
-                                $.ajax({
-                                    type: 'PUT',
-                                    data: JSON.stringify(remoteProcessGroupPortEntity),
-                                    url: remoteProcessGroupData.uri + portContextPath + encodeURIComponent(remotePortId),
-                                    dataType: 'json',
-                                    contentType: 'application/json'
-                                }).done(function (response) {
-                                  // Update the RemoteProcessGroup revision.
-                                  // RemotePorts share revision with parent RemoteProcessGroup.
-                                  remoteProcessGroupData.revision = response.revision;
-    
-                                    // get the response
-                                    var remotePort = response.remoteProcessGroupPort;
-    
-                                    // determine the compression label
-                                    var compressionLabel = 'No';
-                                    if (remotePort.useCompression === true) {
-                                        compressionLabel = 'Yes';
-                                    }
-    
-                                    // set the new values
-                                    $('#' + remotePortId + '-concurrent-tasks').text(remotePort.concurrentlySchedulableTaskCount);
-                                    $('#' + remotePortId + '-compression').text(compressionLabel);
-                                }).fail(function (xhr, status, error) {
-                                    if (xhr.status === 400) {
-                                        var errors = xhr.responseText.split('\n');
-    
-                                        var content;
-                                        if (errors.length === 1) {
-                                            content = $('<span></span>').text(errors[0]);
-                                        } else {
-                                          content = nfCommon.formatUnorderedList(errors);
-                                        }
-    
-                                      nfDialog.showOkDialog({
-                                            dialogContent: content,
-                                          headerText: nf._.msg('nf-remote-process-group-ports.RemoteProcessGroupPorts')
-                                        });
-                                    } else {
-                                      nfErrorHandler.handleAjaxError(xhr, status, error);
-                                    }
-                                }).always(function () {
-                                    // close the dialog
-                                    $('#remote-port-configuration').modal('hide');
-                                });
-                            } else {
-                              nfDialog.showOkDialog({
-                                  headerText: nf._.msg('nf-remote-process-group-ports.RemoteProcessGroupPorts'),
-                                  dialogContent: nf._.msg('nf-remote-process-group-ports.Message1')
-                                });
-    
-                                // close the dialog
-                                $('#remote-port-configuration').modal('hide');
-                            }
-                        }
-                    }
-                },
-                    {
-                      buttonText: nf._.msg('nf-remote-process-group-ports.Cancel'),
-                        color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
-                        },
-                        handler: {
-                            click: function () {
-                                $('#remote-port-configuration').modal('hide');
-                            }
-                        }
-                    }],
-                handler: {
-                    close: function () {
-                        // clear the name/value textfields
-                        $('#remote-port-id').text('');
-                        $('#remote-port-name').text('');
-                        $('#remote-port-concurrent-tasks').val('');
-                        $('#remote-port-use-compression').removeClass('checkbox-checked checkbox-unchecked');
-                    }
-                }
-            });
-        };
-    
-        /**
-         * Initializes the remote process group configuration dialog.
-         */
-        var initRemoteProcessGroupConfigurationDialog = function () {
-            $('#remote-process-group-ports').modal({
-                scrollableContentStyle: 'scrollable',
-              headerText: nf._.msg('nf-remote-process-group-ports.RemoteProcessGroupPorts'),
-                buttons: [{
-                  buttonText: nf._.msg('nf-remote-process-group-ports.Close'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // get the component in question
-                            var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
-                            var remoteProcessGroup = d3.select('#id-' + remoteProcessGroupId);
-                            var remoteProcessGroupData = remoteProcessGroup.datum();
-    
-                            // if can modify, the over status of this node may have changed
-                          if (nfCanvasUtils.canModify(remoteProcessGroup)) {
-                                // reload the remote process group
-                              nfRemoteProcessGroup.reload(remoteProcessGroupData.id);
-                            }
-    
-                            // hide the dialog
-                            $('#remote-process-group-ports').modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // clear the remote process group details
-                        $('#remote-process-group-ports-id').text('');
-                        $('#remote-process-group-ports-name').text('');
-                      $('#remote-process-group-ports-urls').text('');
-    
-                        // clear any tooltips
-                        var dialog = $('#remote-process-group-ports');
-                      nfCommon.cleanUpTooltips(dialog, 'div.remote-port-removed');
-                      nfCommon.cleanUpTooltips(dialog, 'div.concurrent-tasks-info');
-    
-                        // clear the input and output ports
-                        $('#remote-process-group-input-ports-container').empty();
-                        $('#remote-process-group-output-ports-container').empty();
-                    }
-                }
-            });
-        };
-    
-        /**
-         * Creates the markup for configuration concurrent tasks for a port.
-         *
-         * @argument {jQuery} container         The container
-         * @argument {object} port              The port
-         * @argument {string} portType          The type of port
-         */
-        var createPortOption = function (container, port, portType) {
-          var portId = nfCommon.escapeHtml(port.id);
-            var portContainer = $('<div class="remote-port-container"></div>').appendTo(container);
-            var portContainerEditContainer = $('<div class="remote-port-edit-container"></div>').appendTo(portContainer);
-            var portContainerDetailsContainer = $('<div class="remote-port-details-container"></div>').appendTo(portContainer);
-    
-            // get the component in question
-            var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
-            var remoteProcessGroup = d3.select('#id-' + remoteProcessGroupId);
-    
-            // if can modify, support updating the remote group port
-          if (nfCanvasUtils.canModify(remoteProcessGroup)) {
-                // show the enabled transmission switch
-                var transmissionSwitch;
-                if (port.connected === true) {
-                    if (port.transmitting === true) {
-                      transmissionSwitch = (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary enabled-active-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
-                        transmissionSwitch.click();
-                    } else {
-                        if (port.exists === true) {
-                          transmissionSwitch = (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary enabled-inactive-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
-                        } else {
-                          (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
-                        }
-                    }
-                } else {
-                    if (port.transmitting === true) {
-                      (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-active-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
-                    } else {
-                      (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
-                    }
-                }
-    
-                // only support configuration when the remote port exists
-                if (port.exists === true && port.connected === true) {
-                    // create the button for editing the ports configuration
-                    var editRemotePort = $('<button class="button edit-remote-port fa fa-pencil"></button>').click(function () {
-                        var portName = $('#' + portId + '-name').text();
-                        var portConcurrentTasks = $('#' + portId + '-concurrent-tasks').text();
-                        var portCompression = $('#' + portId + '-compression').text() === 'Yes';
-    
-                        // show the configuration dialog
-                        configureRemotePort(port.id, portName, portConcurrentTasks, portCompression, portType);
-                    }).appendTo(portContainerEditContainer);
-    
-                    // show/hide the edit button as appropriate
-                    if (port.transmitting === true) {
-                        editRemotePort.hide();
-                    } else {
-                        editRemotePort.show();
-                    }
-                } else if (port.exists === false) {
-                    $('<div class="remote-port-removed"/>').appendTo(portContainerEditContainer).qtip($.extend({},
-                      nfCommon.config.tooltipConfig,
-                        {
-                          content: nf._.msg('nf-remote-process-group-ports.Message3')
-                        }));
-                }
-    
-                // only allow modifications to transmission when the swtich is defined
-              if (nfCommon.isDefinedAndNotNull(transmissionSwitch)) {
-                    // create toggle for changing transmission state
-                    transmissionSwitch.click(function () {
-                        // get the component being edited
-                        var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
-                        var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum();
-    
-                        // determine the new transmission status
-                        var isTransmitting = false;
-                        if (transmissionSwitch.hasClass('enabled-inactive-transmission')) {
-                            isTransmitting = true;
-                        }
-    
-                        // create the remote process group details
-                        var remoteProcessGroupPortEntity = {
-                          'revision': nfClient.getRevision(remoteProcessGroupData),
-                            'remoteProcessGroupPort': {
-                                id: port.id,
-                                groupId: remoteProcessGroupId,
-                                transmitting: isTransmitting
-                            }
-                        };
-    
-                        // determine the type of port this is
-                        var portContextPath = '/output-ports/';
-                        if (portType === 'input') {
-                            portContextPath = '/input-ports/';
-                        }
-    
-                        // update the selected component
-                        $.ajax({
-                            type: 'PUT',
-                            data: JSON.stringify(remoteProcessGroupPortEntity),
-                            url: remoteProcessGroupData.uri + portContextPath + encodeURIComponent(port.id),
-                            dataType: 'json',
-                            contentType: 'application/json'
-                        }).done(function (response) {
-                          // Update the RemoteProcessGroup revision.
-                          // RemotePorts share revision with parent RemoteProcessGroup.
-                          remoteProcessGroupData.revision = response.revision;
-    
-                            // get the response
-                            var remotePort = response.remoteProcessGroupPort;
-    
-                            // if the remote port no long exists, disable the switch
-                            if (remotePort.exists === false) {
-                                // make the transmission switch disabled
-                                transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('disabled-inactive-transmission').off('click');
-    
-                                // hide the edit button
-                              if (nfCommon.isDefinedAndNotNull(editRemotePort)) {
-                                    editRemotePort.hide();
-                                }
-                            } else {
-                                // update the transmission status accordingly
-                                if (remotePort.transmitting === true) {
-                                    // mark the status as transmitting
-                                    transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('enabled-active-transmission');
-    
-                                    // hide the edit button
-                                  if (nfCommon.isDefinedAndNotNull(editRemotePort)) {
-                                        editRemotePort.hide();
-                                    }
-                                } else {
-                                    // mark the status as not transmitting
-                                    transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('enabled-inactive-transmission');
-    
-                                    // show the edit button
-                                  if (nfCommon.isDefinedAndNotNull(editRemotePort)) {
-                                        editRemotePort.show();
-                                    }
-                                }
-                            }
-                        }).fail(function (xhr, status, error) {
-                            if (xhr.status === 400) {
-                                var errors = xhr.responseText.split('\n');
-    
-                                var content;
-                                if (errors.length === 1) {
-                                    content = $('<span></span>').text(errors[0]);
-                                } else {
-                                  content = nfCommon.formatUnorderedList(errors);
-                                }
-    
-                              nfDialog.showOkDialog({
-                                  headerText: nf._.msg('nf-remote-process-group-ports.RemoteProcessGroupPorts'),
-                                    dialogContent: content
-                                });
-                            } else {
-                              nfErrorHandler.handleAjaxError(xhr, status, error);
-                            }
-                        });
-                    });
-                }
-            } else {
-                // show the disabled transmission switch
-                if (port.transmitting === true) {
-                  (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-active-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
-                } else {
-                  (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
-                }
-            }
-    
-            // add the port id and name
-            $('<div id="' + portId + '-id" class="remote-port-id hidden"></div>').text(port.id).appendTo(portContainerDetailsContainer);
-            $('<div id="' + portId + '-name" class="remote-port-name ellipsis"></div>').text(port.name).appendTo(portContainerDetailsContainer);
-    
-            // clear
-            $('<div class="clear"></div>').appendTo(portContainerDetailsContainer);
-    
-            // add the comments for this port
-          if (nfCommon.isBlank(port.comments)) {
-              $('<div class="remote-port-description unset">'+nf._.msg('nf-remote-process-group-ports.description')+'</div>').appendTo(portContainerDetailsContainer);
-            } else {
-                $('<div class="remote-port-description"></div>').text(port.comments).appendTo(portContainerDetailsContainer);
-            }
-    
-            // clear
-            $('<div class="clear"></div>').appendTo(portContainerDetailsContainer);
-    
-            var concurrentTasksContainer = $('<div class="concurrent-task-container"></div>').appendTo(portContainerDetailsContainer);
-    
-            // concurrent tasks
-          var concurrentTasks = $('<div class="setting-field"></div>').append($('<div id="' + portId + '-concurrent-tasks"></div>').text(port.concurrentlySchedulableTaskCount));
-    
-            // add this ports concurrent tasks
-            $('<div>' +
-                '<div class="setting-name">' +
-                'Concurrent tasks' +
-                '<div class="processor-setting concurrent-tasks-info fa fa-question-circle"></div>' +
-                '</div>' +
-                '</div>').append(concurrentTasks).appendTo(concurrentTasksContainer).find('div.concurrent-tasks-info').qtip($.extend({},
-              nfCommon.config.tooltipConfig,
-                {
-                  content: nf._.msg('nf-remote-process-group-ports.Message4')
-                }));
-    
-            var compressionContainer = $('<div class="compression-container"></div>').appendTo(portContainerDetailsContainer);
-    
-            // determine the compression label
-            var compressionLabel = 'No';
-            if (port.useCompression === true) {
-                compressionLabel = 'Yes';
-            }
-    
-            // add this ports compression config
-            $('<div>' +
-                '<div class="setting-name">' +
-                'Compressed' +
-                '</div>' +
-              '<div class="setting-field">' +
-                '<div id="' + portId + '-compression">' + compressionLabel + '</div>' +
-                '</div>' +
-                '</div>').appendTo(compressionContainer);
-    
-            // clear
-            $('<div class="clear"></div>').appendTo(portContainer);
-    
-            // apply ellipsis where appropriate
-            portContainer.find('.ellipsis').ellipsis();
-    
-          // inform Angular app values have changed
-          nfNgBridge.digest();
-        };
-    
-        /**
-         * Configures the specified remote port.
-         *
-         * @argument {string} portId            The port id
-         * @argument {string} portName          The port name
-         * @argument {int} portConcurrentTasks  The number of concurrent tasks for the port
-         * @argument {boolean} portCompression  The compression flag for the port
-         * @argument {string} portType          The type of port this is
-         */
-        var configureRemotePort = function (portId, portName, portConcurrentTasks, portCompression, portType) {
-            // set port identifiers
-            $('#remote-port-id').text(portId);
-            $('#remote-port-type').text(portType);
-    
-            // set port configuration
-            var checkState = 'checkbox-unchecked';
-            if (portCompression === true) {
-                checkState = 'checkbox-checked';
-            }
-            $('#remote-port-use-compression').addClass(checkState);
-            $('#remote-port-concurrent-tasks').val(portConcurrentTasks);
-    
-            // set the port name
-            $('#remote-port-name').text(portName).ellipsis();
-    
-            // show the dialog
-            $('#remote-port-configuration').modal('show');
-        };
-    
-        return {
-            init: function () {
-                initRemotePortConfigurationDialog();
-                initRemoteProcessGroupConfigurationDialog();
-            },
-    
-            /**
-             * Shows the details for the remote process group in the specified selection.
-             *
-             * @argument {selection} selection      The selection
-             */
-            showPorts: function (selection) {
-                // if the specified component is a remote process group, load its properties
-              if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
-                    var selectionData = selection.datum();
-    
-                    // load the properties for the specified component
-                    $.ajax({
-                        type: 'GET',
-                        url: selectionData.uri,
-                        dataType: 'json'
-                    }).done(function (response) {
-                        var remoteProcessGroup = response.component;
-    
-                        // set the model locally
-                      nfRemoteProcessGroup.set(response);
-    
-                        // populate the port settings
-                        $('#remote-process-group-ports-id').text(remoteProcessGroup.id);
-                        $('#remote-process-group-ports-name').text(remoteProcessGroup.name);
-                      $('#remote-process-group-ports-urls').text(remoteProcessGroup.targetUris);
-    
-                        // get the contents
-                        var remoteProcessGroupContents = remoteProcessGroup.contents;
-                      if (nfCommon.isDefinedAndNotNull(remoteProcessGroupContents)) {
-                            var connectedInputPorts = [];
-                            var disconnectedInputPorts = [];
-    
-                            // show connected ports first
-                            var inputPortContainer = $('#remote-process-group-input-ports-container');
-                            $.each(remoteProcessGroupContents.inputPorts, function (_, inputPort) {
-                                if (inputPort.connected === true) {
-                                    connectedInputPorts.push(inputPort);
-                                } else {
-                                    disconnectedInputPorts.push(inputPort);
-                                }
-                            });
-    
-                            // add all connected input ports
-                            $.each(connectedInputPorts, function (_, inputPort) {
-                                createPortOption(inputPortContainer, inputPort, 'input');
-                            });
-    
-                            // add all disconnected input ports
-                            $.each(disconnectedInputPorts, function (_, inputPort) {
-                                createPortOption(inputPortContainer, inputPort, 'input');
-                            });
-    
-                          if (nfCommon.isEmpty(connectedInputPorts) && nfCommon.isEmpty(disconnectedInputPorts)) {
-                              $('<div class="unset"></div>').text("No ports to display").appendTo(inputPortContainer);
-                          }
-  
-                            var connectedOutputPorts = [];
-                            var disconnectedOutputPorts = [];
-    
-                            // process all the output ports
-                            var outputPortContainer = $('#remote-process-group-output-ports-container');
-                            $.each(remoteProcessGroupContents.outputPorts, function (i, outputPort) {
-                                if (outputPort.connected === true) {
-                                    connectedOutputPorts.push(outputPort);
-                                } else {
-                                    disconnectedOutputPorts.push(outputPort);
-                                }
-                            });
-    
-                          // add all connected output ports
-                            $.each(connectedOutputPorts, function (_, outputPort) {
-                                createPortOption(outputPortContainer, outputPort, 'output');
-                            });
-    
-                          // add all disconnected output ports
-                            $.each(disconnectedOutputPorts, function (_, outputPort) {
-                                createPortOption(outputPortContainer, outputPort, 'output');
-                            });
-    
-                          if (nfCommon.isEmpty(connectedOutputPorts) && nfCommon.isEmpty(disconnectedOutputPorts)) {
-                              $('<div class="unset"></div>').text("No ports to display").appendTo(outputPortContainer);
-                          }
-                        }
-    
-                        // show the details
-                        $('#remote-process-group-ports').modal('show');
-                  }).fail(nfErrorHandler.handleAjaxError);
-                }
-            }
-        };
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
deleted file mode 100644
index 832cdfd0515f..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
+++ /dev/null
@@ -1,1098 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.Connection',
-                  'nf.Common',
-                  'nf.Client',
-                  'nf.CanvasUtils'],
-              function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
-                  return (nf.RemoteProcessGroup = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.RemoteProcessGroup =
-              factory(require('jquery'),
-                  require('d3'),
-                  require('nf.Connection'),
-                  require('nf.Common'),
-                  require('nf.Client'),
-                  require('nf.CanvasUtils')));
-      } else {
-          nf.RemoteProcessGroup = factory(root.$,
-              root.d3,
-              root.nf.Connection,
-              root.nf.Common,
-              root.nf.Client,
-              root.nf.CanvasUtils);
-      }
-  }(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
-      'use strict';
-  
-      var nfConnectable;
-      var nfDraggable;
-      var nfSelectable;
-      var nfContextMenu;
-    
-        var PREVIEW_NAME_LENGTH = 30;
-    
-        var dimensions = {
-            width: 380,
-            height: 158
-        };
-    
-        // --------------------------------------------
-        // remote process groups currently on the graph
-        // --------------------------------------------
-    
-        var remoteProcessGroupMap;
-    
-      // -----------------------------------------------------------
-      // cache for components that are added/removed from the canvas
-      // -----------------------------------------------------------
-  
-      var removedCache;
-      var addedCache;
-  
-        // --------------------
-        // component containers
-        // --------------------
-    
-        var remoteProcessGroupContainer;
-    
-        // --------------------------
-        // privately scoped functions
-        // --------------------------
-    
-        /**
-         * Gets the process group comments.
-         *
-         * @param {object} d
-         */
-        var getProcessGroupComments = function (d) {
-          if (nfCommon.isBlank(d.component.comments)) {
-                return 'No comments specified';
-            } else {
-                return d.component.comments;
-            }
-        };
-    
-        /**
-         * Selects the remote process group elements against the current remote process group map.
-         */
-        var select = function () {
-            return remoteProcessGroupContainer.selectAll('g.remote-process-group').data(remoteProcessGroupMap.values(), function (d) {
-                return d.id;
-            });
-        };
-    
-        /**
-         * Renders the remote process groups in the specified selection.
-         *
-         * @param {selection} entered           The selection of remote process groups to be rendered
-         * @param {boolean} selected            Whether the remote process group is selected
-         */
-        var renderRemoteProcessGroups = function (entered, selected) {
-            if (entered.empty()) {
-                return;
-            }
-    
-            var remoteProcessGroup = entered.append('g')
-                .attr({
-                    'id': function (d) {
-                        return 'id-' + d.id;
-                    },
-                    'class': 'remote-process-group component'
-                })
-                .classed('selected', selected)
-              .call(nfCanvasUtils.position);
-    
-            // ----
-            // body
-            // ----
-    
-            // remote process group border
-            remoteProcessGroup.append('rect')
-                .attr({
-                    'class': 'border',
-                    'width': function (d) {
-                        return d.dimensions.width;
-                    },
-                    'height': function (d) {
-                        return d.dimensions.height;
-                    },
-                    'fill': 'transparent',
-                    'stroke': 'transparent'
-                });
-    
-            // remote process group body
-            remoteProcessGroup.append('rect')
-                .attr({
-                    'class': 'body',
-                    'width': function (d) {
-                        return d.dimensions.width;
-                    },
-                    'height': function (d) {
-                        return d.dimensions.height;
-                    },
-                    'filter': 'url(#component-drop-shadow)',
-                    'stroke-width': 0
-                });
-    
-            // remote process group name background
-            remoteProcessGroup.append('rect')
-                .attr({
-                    'width': function (d) {
-                        return d.dimensions.width;
-                    },
-                    'height': 32,
-                    'fill': '#b8c6cd'
-                });
-    
-            // remote process group name
-            remoteProcessGroup.append('text')
-                .attr({
-                    'x': 30,
-                    'y': 20,
-                    'width': 305,
-                    'height': 16,
-                    'class': 'remote-process-group-name'
-                });
-    
-            // always support selection
-          remoteProcessGroup.call(nfSelectable.activate).call(nfContextMenu.activate);
-        };
-    
-        // attempt of space between component count and icon for process group contents
-        var CONTENTS_SPACER = 5;
-    
-        /**
-         * Updates the process groups in the specified selection.
-         *
-         * @param {selection} updated               The process groups to be updated
-         */
-        var updateRemoteProcessGroups = function (updated) {
-            if (updated.empty()) {
-                return;
-            }
-    
-            // remote process group border authorization
-            updated.select('rect.border')
-                .classed('unauthorized', function (d) {
-                    return d.permissions.canRead === false;
-                });
-    
-            // remote process group body authorization
-            updated.select('rect.body')
-                .classed('unauthorized', function (d) {
-                    return d.permissions.canRead === false;
-                });
-    
-            updated.each(function (remoteProcessGroupData) {
-                var remoteProcessGroup = d3.select(this);
-                var details = remoteProcessGroup.select('g.remote-process-group-details');
-    
-                // update the component behavior as appropriate
-              nfCanvasUtils.editable(remoteProcessGroup, nfConnectable, nfDraggable);
-    
-                // if this processor is visible, render everything
-                if (remoteProcessGroup.classed('visible')) {
-                    if (details.empty()) {
-                        details = remoteProcessGroup.append('g').attr('class', 'remote-process-group-details');
-    
-                        // remote process group transmission status
-                        details.append('text')
-                            .attr({
-                                'class': 'remote-process-group-transmission-status',
-                                'x': 10,
-                                'y': 20
-                            });
-    
-                        // ------------------
-                        // details background
-                        // ------------------
-    
-                        details.append('rect')
-                            .attr({
-                                'x': 0,
-                                'y': 32,
-                                'width': function () {
-                                    return remoteProcessGroupData.dimensions.width
-                                },
-                                'height': 24,
-                                'fill': '#e3e8eb'
-                            });
-    
-                        // -------
-                        // details
-                        // -------
-    
-                        // remote process group secure transfer
-                        details.append('text')
-                            .attr({
-                                'class': 'remote-process-group-transmission-secure',
-                                'x': 10,
-                                'y': 48
-                            });
-    
-                        // remote process group uri
-                        details.append('text')
-                            .attr({
-                                'x': 30,
-                                'y': 48,
-                                'width': 305,
-                                'height': 12,
-                                'class': 'remote-process-group-uri'
-                            });
-    
-                        // ----------------
-                        // stats background
-                        // ----------------
-    
-                        // sent
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return remoteProcessGroupData.dimensions.width;
-                                },
-                                'height': 19,
-                                'x': 0,
-                                'y': 66,
-                                'fill': '#f4f6f7'
-                            });
-    
-                        // border
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return remoteProcessGroupData.dimensions.width;
-                                },
-                                'height': 1,
-                                'x': 0,
-                                'y': 84,
-                                'fill': '#c7d2d7'
-                            });
-    
-                        // received
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return remoteProcessGroupData.dimensions.width;
-                                },
-                                'height': 19,
-                                'x': 0,
-                                'y': 85,
-                                'fill': '#ffffff'
-                            });
-    
-                        // border
-                        details.append('rect')
-                            .attr({
-                                'width': function () {
-                                    return remoteProcessGroupData.dimensions.width;
-                                },
-                                'height': 1,
-                                'x': 0,
-                                'y': 103,
-                                'fill': '#c7d2d7'
-                            });
-    
-                        // -----
-                        // stats
-                        // -----
-    
-                        // stats label container
-                        var remoteProcessGroupStatsLabel = details.append('g')
-                            .attr({
-                                'transform': 'translate(6, 75)'
-                            });
-    
-                        // sent label
-                        remoteProcessGroupStatsLabel.append('text')
-                            .attr({
-                                'width': 73,
-                                'height': 10,
-                                'x': 4,
-                                'y': 5,
-                                'class': 'stats-label'
-                            })
-                          .text(nf._.msg('nf-canvas.Sent'));
-    
-                        // received label
-                        remoteProcessGroupStatsLabel.append('text')
-                            .attr({
-                                'width': 73,
-                                'height': 10,
-                                'x': 4,
-                                'y': 23,
-                                'class': 'stats-label'
-                            })
-                          .text(nf._.msg('nf-canvas.Received'));
-    
-                        // stats value container
-                        var remoteProcessGroupStatsValue = details.append('g')
-                            .attr({
-                                'transform': 'translate(95, 75)'
-                            });
-    
-                        // sent value
-                        var sentText = remoteProcessGroupStatsValue.append('text')
-                            .attr({
-                                'width': 180,
-                                'height': 10,
-                                'x': 4,
-                                'y': 5,
-                                'class': 'remote-process-group-sent stats-value'
-                            });
-    
-                        // sent count
-                        sentText.append('tspan')
-                            .attr({
-                                'class': 'count'
-                            });
-    
-                        // sent size
-                        sentText.append('tspan')
-                            .attr({
-                                'class': 'size'
-                            });
-    
-                        // sent ports
-                        sentText.append('tspan')
-                            .attr({
-                                'class': 'ports'
-                            });
-    
-                        // received value
-                        var receivedText = remoteProcessGroupStatsValue.append('text')
-                            .attr({
-                                'width': 180,
-                                'height': 10,
-                                'x': 4,
-                                'y': 23,
-                                'class': 'remote-process-group-received stats-value'
-                            });
-    
-                        // received ports
-                        receivedText.append('tspan')
-                            .attr({
-                                'class': 'ports'
-                            });
-    
-                        // received count
-                        receivedText.append('tspan')
-                            .attr({
-                                'class': 'count'
-                            });
-    
-                        // received size
-                        receivedText.append('tspan')
-                            .attr({
-                                'class': 'size'
-                            });
-    
-                        // stats value container
-                        var processGroupStatsInfo = details.append('g')
-                            .attr({
-                                'transform': 'translate(335, 75)'
-                            });
-    
-                        // sent info
-                        processGroupStatsInfo.append('text')
-                            .attr({
-                                'width': 25,
-                                'height': 10,
-                                'x': 4,
-                                'y': 5,
-                                'class': 'stats-info'
-                            })
-                          .text(nf._.msg('nf-canvas.5min'));
-    
-                        // received info
-                        processGroupStatsInfo.append('text')
-                            .attr({
-                                'width': 25,
-                                'height': 10,
-                                'x': 4,
-                                'y': 23,
-                                'class': 'stats-info'
-                            })
-                          .text(nf._.msg('nf-canvas.5min'));
-    
-                        // --------
-                        // comments
-                        // --------
-    
-                        // process group comments
-                        details.append('text')
-                            .attr({
-                                'x': 10,
-                                'y': 121,
-                                'width': 342,
-                                'height': 22,
-                                'class': 'remote-process-group-comments'
-                            });
-    
-                        // -------------------
-                        // last refreshed time
-                        // -------------------
-    
-                        details.append('rect')
-                            .attr({
-                                'x': 0,
-                                'y': function () {
-                                    return remoteProcessGroupData.dimensions.height - 24;
-                                },
-                                'width': function () {
-                                    return remoteProcessGroupData.dimensions.width;
-                                },
-                                'height': 24,
-                                'fill': '#e3e8eb'
-                            });
-    
-                        details.append('text')
-                            .attr({
-                                'x': 370,
-                                'y': 150,
-                                'class': 'remote-process-group-last-refresh'
-                            });
-    
-                        // -------------------
-                        // active thread count
-                        // -------------------
-    
-                        // active thread count
-                        details.append('text')
-                            .attr({
-                                'class': 'active-thread-count-icon',
-                                'y': 20
-                            })
-                            .text('\ue83f');
-    
-                        // active thread icon
-                        details.append('text')
-                            .attr({
-                                'class': 'active-thread-count',
-                                'y': 20
-                            });
-    
-                        // ---------
-                        // bulletins
-                        // ---------
-    
-                        // bulletin background
-                        details.append('rect')
-                            .attr({
-                                'class': 'bulletin-background',
-                                'x': function () {
-                                    return remoteProcessGroupData.dimensions.width - 24;
-                                },
-                                'y': 32,
-                                'width': 24,
-                                'height': 24
-                            });
-    
-                        // bulletin icon
-                        details.append('text')
-                            .attr({
-                                'class': 'bulletin-icon',
-                                'x': function () {
-                                    return remoteProcessGroupData.dimensions.width - 17;
-                                },
-                                'y': 50
-                            })
-                            .text('\uf24a');
-                    }
-    
-                    if (remoteProcessGroupData.permissions.canRead) {
-                        // remote process group uri
-                        details.select('text.remote-process-group-uri')
-                            .each(function (d) {
-                                var remoteProcessGroupUri = d3.select(this);
-    
-                                // reset the remote process group name to handle any previous state
-                                remoteProcessGroupUri.text(null).selectAll('title').remove();
-    
-                                // apply ellipsis to the remote process group name as necessary
-                              nfCanvasUtils.ellipsis(remoteProcessGroupUri, d.component.targetUris);
-                            }).append('title').text(function (d) {
-                            return d.component.name;
-                        });
-    
-                        // update the process groups transmission status
-                        details.select('text.remote-process-group-transmission-secure')
-                            .text(function (d) {
-                                var icon = '';
-                                if (d.component.targetSecure === true) {
-                                    icon = '\uf023';
-                                } else {
-                                    icon = '\uf09c';
-                                }
-                                return icon;
-                            })
-                            .each(function (d) {
-                                // get the tip
-                                var tip = d3.select('#transmission-secure-' + d.id);
-    
-                                // remove the tip if necessary
-                                if (tip.empty()) {
-                                    tip = d3.select('#remote-process-group-tooltips').append('div')
-                                        .attr('id', function () {
-                                            return 'transmission-secure-' + d.id;
-                                        })
-                                        .attr('class', 'tooltip nifi-tooltip');
-                                }
-    
-                                // update the tip
-                                tip.text(function () {
-                                    if (d.component.targetSecure === true) {
-                                        return 'Site-to-Site is secure.';
-                                    } else {
-                                        return 'Site-to-Site is NOT secure.';
-                                    }
-                                });
-    
-                                // add the tooltip
-                              nfCanvasUtils.canvasTooltip(tip, d3.select(this));
-                            });
-    
-                        // ---------------
-                        // update comments
-                        // ---------------
-    
-                        // update the process group comments
-                        details.select('text.remote-process-group-comments')
-                            .each(function (d) {
-                                var remoteProcessGroupComments = d3.select(this);
-    
-                                // reset the processor name to handle any previous state
-                                remoteProcessGroupComments.text(null).selectAll('tspan, title').remove();
-    
-                                // apply ellipsis to the port name as necessary
-                              nfCanvasUtils.ellipsis(remoteProcessGroupComments, getProcessGroupComments(d));
-                            }).classed('unset', function (d) {
-                          return nfCommon.isBlank(d.component.comments);
-                        }).append('title').text(function (d) {
-                            return getProcessGroupComments(d);
-                        });
-    
-                        // --------------
-                        // last refreshed
-                        // --------------
-    
-                        details.select('text.remote-process-group-last-refresh')
-                            .text(function (d) {
-                              if (nfCommon.isDefinedAndNotNull(d.component.flowRefreshed)) {
-                                    return d.component.flowRefreshed;
-                                } else {
-                                    return 'Remote flow not current';
-                                }
-                            });
-    
-                        // update the process group name
-                        remoteProcessGroup.select('text.remote-process-group-name')
-                            .each(function (d) {
-                                var remoteProcessGroupName = d3.select(this);
-    
-                                // reset the remote process group name to handle any previous state
-                                remoteProcessGroupName.text(null).selectAll('title').remove();
-    
-                                // apply ellipsis to the remote process group name as necessary
-                              nfCanvasUtils.ellipsis(remoteProcessGroupName, d.component.name);
-                            }).append('title').text(function (d) {
-                            return d.component.name;
-                        });
-                    } else {
-                        // clear the target uri
-                        details.select('text.remote-process-group-uri').text(null);
-    
-                        // clear the transmission secure icon
-                        details.select('text.remote-process-group-transmission-secure').text(null);
-    
-                        // clear the process group comments
-                        details.select('text.remote-process-group-comments').text(null);
-    
-                        // clear the last refresh
-                        details.select('text.remote-process-group-last-refresh').text(null);
-    
-                        // clear the name
-                        remoteProcessGroup.select('text.remote-process-group-name').text(null);
-                    }
-    
-                    // populate the stats
-                    remoteProcessGroup.call(updateProcessGroupStatus);
-                } else {
-                    if (remoteProcessGroupData.permissions.canRead) {
-                        // update the process group name
-                        remoteProcessGroup.select('text.remote-process-group-name')
-                            .text(function (d) {
-                                var name = d.component.name;
-                                if (name.length > PREVIEW_NAME_LENGTH) {
-                                    return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
-                                } else {
-                                    return name;
-                                }
-                            });
-                  } else {
-                      // clear the name
-                      remoteProcessGroup.select('text.remote-process-group-name').text(null);
-                    }
-    
-                    // remove the tooltips
-                    remoteProcessGroup.call(removeTooltips);
-    
-                    // remove the details if necessary
-                    if (!details.empty()) {
-                        details.remove();
-                    }
-                }
-            });
-        };
-    
-      var hasIssues = function (d) {
-          return !nfCommon.isEmpty(d.component.authorizationIssues) || !nfCommon.isEmpty(d.component.validationErrors);
-      };
-  
-      var getIssues = function (d) {
-          var issues = [];
-          if (!nfCommon.isEmpty(d.component.authorizationIssues)) {
-              issues = issues.concat(d.component.authorizationIssues);
-          }
-          if (!nfCommon.isEmpty(d.component.validationErrors)) {
-              issues = issues.concat(d.component.validationErrors);
-          }
-          return issues;
-      };
-  
-        /**
-         * Updates the process group status.
-         *
-         * @param {selection} updated           The process groups to be updated
-         */
-        var updateProcessGroupStatus = function (updated) {
-            if (updated.empty()) {
-                return;
-            }
-    
-            // sent count value
-            updated.select('text.remote-process-group-sent tspan.count')
-                .text(function (d) {
-                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.sent, ' ');
-                });
-    
-            // sent size value
-            updated.select('text.remote-process-group-sent tspan.size')
-                .text(function (d) {
-                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.sent, ' ');
-                });
-    
-            // sent ports value
-            updated.select('text.remote-process-group-sent tspan.ports')
-                .text(function (d) {
-                    return ' ' + String.fromCharCode(8594) + ' ' + d.inputPortCount;
-                });
-    
-            // received ports value
-            updated.select('text.remote-process-group-received tspan.ports')
-                .text(function (d) {
-                    return d.outputPortCount + ' ' + String.fromCharCode(8594) + ' ';
-                });
-    
-            // received count value
-            updated.select('text.remote-process-group-received tspan.count')
-                .text(function (d) {
-                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.received, ' ');
-                });
-    
-            // received size value
-            updated.select('text.remote-process-group-received tspan.size')
-                .text(function (d) {
-                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.received, ' ');
-                });
-    
-            // --------------------
-            // authorization issues
-            // --------------------
-    
-            // TODO - only consider state from the status
-            // update the process groups transmission status
-            updated.select('text.remote-process-group-transmission-status')
-                .text(function (d) {
-                    var icon = '';
-                    if (d.permissions.canRead) {
-                      if (hasIssues(d)) {
-                            icon = '\uf071';
-                        } else if (d.component.transmitting === true) {
-                            icon = '\uf140';
-                        } else {
-                            icon = '\ue80a';
-                        }
-                    }
-                    return icon;
-                })
-                .attr('font-family', function (d) {
-                    var family = '';
-                    if (d.permissions.canRead) {
-                      if (hasIssues(d) || d.component.transmitting) {
-                            family = 'FontAwesome';
-                        } else {
-                            family = 'flowfont';
-                        }
-                    }
-                    return family;
-                })
-              .classed('invalid', function (d) {
-                  return d.permissions.canRead && hasIssues(d);
-              })
-              .classed('transmitting', function (d) {
-                  return d.permissions.canRead && !hasIssues(d) && d.component.transmitting === true;
-              })
-              .classed('not-transmitting', function (d) {
-                  return d.permissions.canRead && !hasIssues(d) && d.component.transmitting === false;
-                })
-                .each(function (d) {
-                    // get the tip
-                    var tip = d3.select('#authorization-issues-' + d.id);
-    
-                    // if there are validation errors generate a tooltip
-                  if (d.permissions.canRead && hasIssues(d)) {
-                        // create the tip if necessary
-                        if (tip.empty()) {
-                            tip = d3.select('#remote-process-group-tooltips').append('div')
-                                .attr('id', function () {
-                                    return 'authorization-issues-' + d.id;
-                                })
-                                .attr('class', 'tooltip nifi-tooltip');
-                        }
-    
-                        // update the tip
-                        tip.html(function () {
-                          var list = nfCommon.formatUnorderedList(getIssues(d));
-                            if (list === null || list.length === 0) {
-                                return '';
-                            } else {
-                                return $('<div></div>').append(list).html();
-                            }
-                        });
-    
-                        // add the tooltip
-                      nfCanvasUtils.canvasTooltip(tip, d3.select(this));
-                    } else {
-                        if (!tip.empty()) {
-                            tip.remove();
-                        }
-                    }
-                });
-    
-            updated.each(function (d) {
-                var remoteProcessGroup = d3.select(this);
-                var offset = 0;
-    
-                // -------------------
-                // active thread count
-                // -------------------            
-    
-              nfCanvasUtils.activeThreadCount(remoteProcessGroup, d, function (off) {
-                    offset = off;
-                });
-    
-                // ---------
-                // bulletins
-                // ---------
-    
-                remoteProcessGroup.select('rect.bulletin-background').classed('has-bulletins', function () {
-                  return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
-                });
-    
-              nfCanvasUtils.bulletins(remoteProcessGroup, d, function () {
-                    return d3.select('#remote-process-group-tooltips');
-                }, offset);
-            });
-        };
-    
-        /**
-         * Removes the remote process groups in the specified selection.
-         *
-         * @param {selection} removed               The process groups to be removed
-         */
-        var removeRemoteProcessGroups = function (removed) {
-            if (removed.empty()) {
-                return;
-            }
-    
-            removed.call(removeTooltips).remove();
-        };
-    
-        /**
-         * Removes the tooltips for the remote process groups in the specified selection.
-         *
-         * @param {type} removed
-         */
-        var removeTooltips = function (removed) {
-            removed.each(function (d) {
-                // remove any associated tooltips
-                $('#bulletin-tip-' + d.id).remove();
-                $('#authorization-issues-' + d.id).remove();
-                $('#transmission-secure-' + d.id).remove();
-            });
-        };
-    
-      var nfRemoteProcessGroup = {
-            /**
-             * Initializes of the Process Group handler.
-           *
-           * @param nfConnectableRef   The nfConnectable module.
-           * @param nfDraggableRef   The nfDraggable module.
-           * @param nfSelectableRef   The nfSelectable module.
-           * @param nfContextMenuRef   The nfContextMenu module.
-             */
-          init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
-              nfConnectable = nfConnectableRef;
-              nfDraggable = nfDraggableRef;
-              nfSelectable = nfSelectableRef;
-              nfContextMenu = nfContextMenuRef;
-  
-                remoteProcessGroupMap = d3.map();
-              removedCache = d3.map();
-              addedCache = d3.map();
-    
-                // create the process group container
-                remoteProcessGroupContainer = d3.select('#canvas').append('g')
-                    .attr({
-                        'pointer-events': 'all',
-                        'class': 'remote-process-groups'
-                    });
-            },
-    
-            /**
-             * Adds the specified remote process group entity.
-             *
-             * @param remoteProcessGroupEntities       The remote process group
-             * @param options           Configuration options
-             */
-            add: function (remoteProcessGroupEntities, options) {
-                var selectAll = false;
-              if (nfCommon.isDefinedAndNotNull(options)) {
-                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                }
-    
-              // get the current time
-              var now = new Date().getTime();
-    
-                var add = function (remoteProcessGroupEntity) {
-                  addedCache.set(remoteProcessGroupEntity.id, now);
-  
-                    // add the remote process group
-                    remoteProcessGroupMap.set(remoteProcessGroupEntity.id, $.extend({
-                        type: 'RemoteProcessGroup',
-                        dimensions: dimensions
-                    }, remoteProcessGroupEntity));
-                };
-    
-                // determine how to handle the specified remote process groups
-                if ($.isArray(remoteProcessGroupEntities)) {
-                    $.each(remoteProcessGroupEntities, function (_, remoteProcessGroupEntity) {
-                        add(remoteProcessGroupEntity);
-                    });
-              } else if (nfCommon.isDefinedAndNotNull(remoteProcessGroupEntities)) {
-                    add(remoteProcessGroupEntities);
-                }
-    
-                // apply the selection and handle new remote process groups
-                var selection = select();
-                selection.enter().call(renderRemoteProcessGroups, selectAll);
-                selection.call(updateRemoteProcessGroups);
-            },
-    
-            /**
-             * Populates the graph with the specified remote process groups.
-             *
-             * @argument {object | array} remoteProcessGroupEntities                   The remote process groups to add
-             * @argument {object} options                                    Configuration options
-             */
-            set: function (remoteProcessGroupEntities, options) {
-                var selectAll = false;
-                var transition = false;
-              if (nfCommon.isDefinedAndNotNull(options)) {
-                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                  transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-                }
-    
-              var set = function (proposedRemoteProcessGroupEntity) {
-                  var currentRemoteProcessGroupEntity = remoteProcessGroupMap.get(proposedRemoteProcessGroupEntity.id);
-  
-                  // set the remote process group if appropriate due to revision and wasn't previously removed
-                  if (nfClient.isNewerRevision(currentRemoteProcessGroupEntity, proposedRemoteProcessGroupEntity) && !removedCache.has(proposedRemoteProcessGroupEntity.id)) {
-                      remoteProcessGroupMap.set(proposedRemoteProcessGroupEntity.id, $.extend({
-                            type: 'RemoteProcessGroup',
-                            dimensions: dimensions
-                      }, proposedRemoteProcessGroupEntity));
-                  }
-                };
-    
-                // determine how to handle the specified remote process groups
-                if ($.isArray(remoteProcessGroupEntities)) {
-                    $.each(remoteProcessGroupMap.keys(), function (_, key) {
-                      var currentRemoteProcessGroupEntity = remoteProcessGroupMap.get(key);
-                      var isPresent = $.grep(remoteProcessGroupEntities, function (proposedRemoteProcessGroupEntity) {
-                          return proposedRemoteProcessGroupEntity.id === currentRemoteProcessGroupEntity.id;
-                      });
-  
-                      // if the current remote process group is not present and was not recently added, remove it
-                      if (isPresent.length === 0 && !addedCache.has(key)) {
-                            remoteProcessGroupMap.remove(key);
-                      }
-                    });
-                    $.each(remoteProcessGroupEntities, function (_, remoteProcessGroupEntity) {
-                        set(remoteProcessGroupEntity);
-                    });
-              } else if (nfCommon.isDefinedAndNotNull(remoteProcessGroupEntities)) {
-                    set(remoteProcessGroupEntities);
-                }
-    
-                // apply the selection and handle all new remote process groups
-                var selection = select();
-                selection.enter().call(renderRemoteProcessGroups, selectAll);
-              selection.call(updateRemoteProcessGroups).call(nfCanvasUtils.position, transition);
-                selection.exit().call(removeRemoteProcessGroups);
-            },
-    
-            /**
-             * If the remote process group id is specified it is returned. If no remote process
-             * group id specified, all remote process groups are returned.
-             *
-             * @param {string} id
-             */
-            get: function (id) {
-              if (nfCommon.isUndefined(id)) {
-                    return remoteProcessGroupMap.values();
-                } else {
-                    return remoteProcessGroupMap.get(id);
-                }
-            },
-    
-            /**
-             * If the remote process group id is specified it is refresh according to the current
-             * state. If no remote process group id is specified, all remote process groups are refreshed.
-             *
-             * @param {string} id      Optional
-             */
-            refresh: function (id) {
-              if (nfCommon.isDefinedAndNotNull(id)) {
-                    d3.select('#id-' + id).call(updateRemoteProcessGroups);
-                } else {
-                    d3.selectAll('g.remote-process-group').call(updateRemoteProcessGroups);
-                }
-            },
-    
-            /**
-             * Refreshes the components necessary after a pan event.
-             */
-            pan: function () {
-                d3.selectAll('g.remote-process-group.entering, g.remote-process-group.leaving').call(updateRemoteProcessGroups);
-            },
-    
-            /**
-             * Reloads the remote process group state from the server and refreshes the UI.
-             * If the remote process group is currently unknown, this function just returns.
-             *
-             * @param {string} id       The remote process group id
-             */
-            reload: function (id) {
-                if (remoteProcessGroupMap.has(id)) {
-                    var remoteProcessGroupEntity = remoteProcessGroupMap.get(id);
-                    return $.ajax({
-                        type: 'GET',
-                        url: remoteProcessGroupEntity.uri,
-                        dataType: 'json'
-                    }).done(function (response) {
-                      nfRemoteProcessGroup.set(response);
-    
-                        // reload the group's connections
-                      var connections = nfConnection.getComponentConnections(id);
-                        $.each(connections, function (_, connection) {
-                            if (connection.permissions.canRead) {
-                              nfConnection.reload(connection.id);
-                            }
-                        });
-                    });
-                }
-            },
-    
-            /**
-             * Positions the component.
-             *
-             * @param {string} id   The id
-             */
-            position: function (id) {
-              d3.select('#id-' + id).call(nfCanvasUtils.position);
-            },
-    
-            /**
-             * Removes the specified process group.
-             *
-           * @param {array|string} remoteProcessGroupIds      The remote process group id(s)
-             */
-          remove: function (remoteProcessGroupIds) {
-              var now = new Date().getTime();
-  
-              if ($.isArray(remoteProcessGroupIds)) {
-                  $.each(remoteProcessGroupIds, function (_, remoteProcessGroupId) {
-                      removedCache.set(remoteProcessGroupId, now);
-                      remoteProcessGroupMap.remove(remoteProcessGroupId);
-                    });
-                } else {
-                  removedCache.set(remoteProcessGroupIds, now);
-                  remoteProcessGroupMap.remove(remoteProcessGroupIds);
-                }
-    
-                // apply the selection and handle all removed remote process groups
-                select().exit().call(removeRemoteProcessGroups);
-            },
-    
-            /**
-             * Removes all remote process groups.
-             */
-            removeAll: function () {
-              nfRemoteProcessGroup.remove(remoteProcessGroupMap.keys());
-          },
-  
-          /**
-           * Expires the caches up to the specified timestamp.
-           *
-           * @param timestamp
-           */
-          expireCaches: function (timestamp) {
-              var expire = function (cache) {
-                  cache.forEach(function (id, entryTimestamp) {
-                      if (timestamp > entryTimestamp) {
-                          cache.remove(id);
-                      }
-                  });
-              };
-  
-              expire(addedCache);
-              expire(removedCache);
-          }
-      };
-  
-      return nfRemoteProcessGroup;
-  }));
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
deleted file mode 100644
index 28effc6d04cc..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
+++ /dev/null
@@ -1,827 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.ErrorHandler',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.Client',
-                  'nf.ControllerService',
-                  'nf.ControllerServices',
-                  'nf.UniversalCapture',
-                  'nf.CustomUi'],
-              function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerService, nfControllerServices, nfUniversalCapture, nfCustomUi) {
-                  return (nf.ReportingTask = factory($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerService, nfControllerServices, nfUniversalCapture, nfCustomUi));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.ReportingTask =
-              factory(require('jquery'),
-                  require('nf.ErrorHandler'),
-                  require('nf.Common'),
-                  require('nf.Dialog'),
-                  require('nf.Client'),
-                  require('nf.ControllerService'),
-                  require('nf.ControllerServices'),
-                  require('nf.UniversalCapture'),
-                  require('nf.CustomUi')));
-      } else {
-          nf.ReportingTask = factory(root.$,
-              root.nf.ErrorHandler,
-              root.nf.Common,
-              root.nf.Dialog,
-              root.nf.Client,
-              root.nf.ControllerService,
-              root.nf.ControllerServices,
-              root.nf.UniversalCapture,
-              root.nf.CustomUi);
-      }
-  }(this, function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerService, nfControllerServices, nfUniversalCapture, nfCustomUi) {
-      'use strict';
-  
-      var nfSettings;
-    
-        var config = {
-            edit: 'edit',
-          readOnly: 'read-only',
-          urls: {
-              api: '../nifi-api'
-          }
-        };
-    
-      // load the controller services
-      var controllerServicesUri = config.urls.api + '/flow/controller/controller-services';
-    
-        /**
-         * Gets the controller services table.
-         *
-         * @returns {*|jQuery|HTMLElement}
-         */
-        var getControllerServicesTable = function () {
-            return $('#controller-services-table');
-        };
-    
-        /**
-         * Handle any expected reporting task configuration errors.
-         *
-         * @argument {object} xhr       The XmlHttpRequest
-         * @argument {string} status    The status of the request
-         * @argument {string} error     The error
-         */
-        var handleReportingTaskConfigurationError = function (xhr, status, error) {
-            if (xhr.status === 400) {
-                var errors = xhr.responseText.split('\n');
-    
-                var content;
-                if (errors.length === 1) {
-                    content = $('<span></span>').text(errors[0]);
-                } else {
-                  content = nfCommon.formatUnorderedList(errors);
-                }
-    
-              nfDialog.showOkDialog({
-                    dialogContent: content,
-                  headerText: nf._.msg('nf-reporting-task.ReportingTask')
-                });
-            } else {
-              nfErrorHandler.handleAjaxError(xhr, status, error);
-            }
-        };
-    
-        /**
-         * Determines whether the user has made any changes to the reporting task configuration
-         * that needs to be saved.
-         */
-        var isSaveRequired = function () {
-            var entity = $('#reporting-task-configuration').data('reportingTaskDetails');
-    
-            // determine if any reporting task settings have changed
-    
-            if ($('#reporting-task-name').val() !== entity.component['name']) {
-                return true;
-            }
-            if ($('#reporting-task-comments').val() !== entity.component['comments']) {
-                return true;
-            }
-            if ($('#reporting-task-enabled').hasClass('checkbox-checked') && entity.component['state'] === 'DISABLED') {
-                return true;
-            } else if ($('#reporting-task-enabled').hasClass('checkbox-unchecked') && (entity.component['state'] === 'RUNNING' || entity.component['state'] === 'STOPPED')) {
-                return true;
-            }
-    
-            // consider the scheduling strategy
-            var schedulingStrategy = $('#reporting-task-scheduling-strategy-combo').combo('getSelectedOption').value;
-            if (schedulingStrategy !== (entity.component['schedulingStrategy'] + '')) {
-                return true;
-            }
-    
-            // get the appropriate scheduling period field
-            var schedulingPeriod;
-            if (schedulingStrategy === 'CRON_DRIVEN') {
-                schedulingPeriod = $('#reporting-task-cron-driven-scheduling-period');
-            } else {
-                schedulingPeriod = $('#reporting-task-timer-driven-scheduling-period');
-            }
-    
-            // check the scheduling period
-          if (nfCommon.isDefinedAndNotNull(schedulingPeriod) && schedulingPeriod.val() !== (entity.component['schedulingPeriod'] + '')) {
-                return true;
-            }
-    
-            // defer to the properties
-            return $('#reporting-task-properties').propertytable('isSaveRequired');
-        };
-    
-        /**
-         * Marshals the data that will be used to update the reporting task's configuration.
-         */
-        var marshalDetails = function () {
-            // properties
-            var properties = $('#reporting-task-properties').propertytable('marshalProperties');
-    
-            // get the scheduling strategy
-            var schedulingStrategy = $('#reporting-task-scheduling-strategy-combo').combo('getSelectedOption').value;
-    
-            // get the appropriate scheduling period field
-            var schedulingPeriod;
-            if (schedulingStrategy === 'CRON_DRIVEN') {
-                schedulingPeriod = $('#reporting-task-cron-driven-scheduling-period');
-            } else {
-                schedulingPeriod = $('#reporting-task-timer-driven-scheduling-period');
-            }
-    
-            // create the reporting task dto
-            var reportingTaskDto = {};
-            reportingTaskDto['id'] = $('#reporting-task-id').text();
-            reportingTaskDto['name'] = $('#reporting-task-name').val();
-            reportingTaskDto['schedulingStrategy'] = schedulingStrategy;
-            reportingTaskDto['schedulingPeriod'] = schedulingPeriod.val();
-            reportingTaskDto['comments'] = $('#reporting-task-comments').val();
-    
-            // mark the processor disabled if appropriate
-            if ($('#reporting-task-enabled').hasClass('checkbox-unchecked')) {
-                reportingTaskDto['state'] = 'DISABLED';
-            } else if ($('#reporting-task-enabled').hasClass('checkbox-checked')) {
-                reportingTaskDto['state'] = 'STOPPED';
-            }
-    
-            // set the properties
-            if ($.isEmptyObject(properties) === false) {
-                reportingTaskDto['properties'] = properties;
-            }
-    
-            // create the reporting task entity
-            var reportingTaskEntity = {};
-            reportingTaskEntity['component'] = reportingTaskDto;
-    
-            // return the marshaled details
-            return reportingTaskEntity;
-        };
-    
-        /**
-         * Validates the specified details.
-         *
-         * @argument {object} details       The details to validate
-         */
-        var validateDetails = function (details) {
-            var errors = [];
-            var reportingTask = details['component'];
-    
-          if (nfCommon.isBlank(reportingTask['schedulingPeriod'])) {
-              errors.push(nf._.msg('nf-reporting-task.RunScheduleMustBeSpecified'));
-            }
-    
-            if (errors.length > 0) {
-              nfDialog.showOkDialog({
-                  dialogContent: nfCommon.formatUnorderedList(errors),
-                  headerText: nf._.msg('nf-reporting-task.ReportingTask')
-                });
-                return false;
-            } else {
-                return true;
-            }
-        };
-    
-        /**
-         * Renders the specified reporting task.
-         *
-         * @param {object} reportingTask
-         */
-        var renderReportingTask = function (reportingTaskEntity) {
-            // get the table and update the row accordingly
-            var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
-            var reportingTaskData = reportingTaskGrid.getData();
-            var currentReportingTask = reportingTaskData.getItemById(reportingTaskEntity.id);
-            reportingTaskData.updateItem(reportingTaskEntity.id, $.extend({
-                bulletins: currentReportingTask.bulletins
-            }, reportingTaskEntity));
-        };
-    
-        /**
-         *
-         * @param {object} reportingTaskEntity
-         * @param {boolean} running
-         */
-        var setRunning = function (reportingTaskEntity, running) {
-            var entity = {
-              'revision': nfClient.getRevision(reportingTaskEntity),
-                'component': {
-                    'id': reportingTaskEntity.id,
-                    'state': running === true ? 'RUNNING' : 'STOPPED'
-                }
-            };
-    
-            return $.ajax({
-                type: 'PUT',
-                url: reportingTaskEntity.uri,
-                data: JSON.stringify(entity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // update the task
-                renderReportingTask(response);
-              nfControllerService.reloadReferencedServices(getControllerServicesTable(), response.component);
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Goes to a service configuration from the property table.
-         */
-        var goToServiceFromProperty = function () {
-            return $.Deferred(function (deferred) {
-                // close all fields currently being edited
-                $('#reporting-task-properties').propertytable('saveRow');
-    
-                // determine if changes have been made
-                if (isSaveRequired()) {
-                    // see if those changes should be saved
-                  nfDialog.showYesNoDialog({
-                      headerText: nf._.msg('nf-reporting-task.Save'),
-                      dialogContent: nf._.msg('nf-reporting-task.Message1'),
-                        noHandler: function () {
-                            deferred.resolve();
-                        },
-                        yesHandler: function () {
-                            var reportingTask = $('#reporting-task-configuration').data('reportingTaskDetails');
-                            saveReportingTask(reportingTask).done(function () {
-                                deferred.resolve();
-                            }).fail(function () {
-                                deferred.reject();
-                            });
-                        }
-                    });
-                } else {
-                    deferred.resolve();
-                }
-            }).promise();
-        };
-    
-        /**
-         * Saves the specified reporting task.
-         *
-         * @param {type} reportingTask
-         */
-        var saveReportingTask = function (reportingTaskEntity) {
-            // marshal the settings and properties and update the reporting task
-            var updatedReportingTask = marshalDetails();
-    
-            // ensure details are valid as far as we can tell
-            if (validateDetails(updatedReportingTask)) {
-              updatedReportingTask['revision'] = nfClient.getRevision(reportingTaskEntity);
-    
-                // update the selected component
-                return $.ajax({
-                    type: 'PUT',
-                    data: JSON.stringify(updatedReportingTask),
-                    url: reportingTaskEntity.uri,
-                    dataType: 'json',
-                    contentType: 'application/json'
-                }).done(function (response) {
-                    // update the reporting task
-                    renderReportingTask(response);
-                }).fail(handleReportingTaskConfigurationError);
-            } else {
-                return $.Deferred(function (deferred) {
-                    deferred.reject();
-                }).promise();
-            }
-        };
-    
-        /**
-         * Gets a property descriptor for the controller service currently being configured.
-         *
-         * @param {type} propertyName
-         */
-        var getReportingTaskPropertyDescriptor = function (propertyName) {
-            var details = $('#reporting-task-configuration').data('reportingTaskDetails');
-            return $.ajax({
-                type: 'GET',
-                url: details.uri + '/descriptors',
-                data: {
-                    propertyName: propertyName
-                },
-                dataType: 'json'
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-      var nfReportingTask = {
-            /**
-             * Initializes the reporting task configuration dialog.
-           *
-           * @param nfSettingsRef   The nfSettings module.
-             */
-          init: function (nfSettingsRef) {
-              nfSettings = nfSettingsRef;
-  
-                // initialize the configuration dialog tabs
-                $('#reporting-task-configuration-tabs').tabbs({
-                    tabStyle: 'tab',
-                    selectedTabStyle: 'selected-tab',
-                    scrollableTabContentStyle: 'scrollable',
-                    tabs: [{
-                      name: nf._.msg('nf-reporting-task.Settings'),
-                        tabContentId: 'reporting-task-standard-settings-tab-content'
-                    }, {
-                      name: nf._.msg('nf-reporting-task.Properties'),
-                        tabContentId: 'reporting-task-properties-tab-content'
-                    }, {
-                      name: nf._.msg('nf-reporting-task.Comments'),
-                        tabContentId: 'reporting-task-comments-tab-content'
-                    }],
-                    select: function () {
-                        // remove all property detail dialogs
-                      nfUniversalCapture.removeAllPropertyDetailDialogs();
-    
-                        // update the property table size in case this is the first time its rendered
-                        if ($(this).text() === 'Properties') {
-                            $('#reporting-task-properties').propertytable('resetTableSize');
-                        }
-    
-                        // close all fields currently being edited
-                        $('#reporting-task-properties').propertytable('saveRow');
-                    }
-                });
-    
-                // initialize the reporting task configuration dialog
-                $('#reporting-task-configuration').data('mode', config.edit).modal({
-                    scrollableContentStyle: 'scrollable',
-                  headerText: nf._.msg('nf-reporting-task.ConfigureReportingTask'),
-                    handler: {
-                        close: function () {
-                            // cancel any active edits
-                            $('#reporting-task-properties').propertytable('cancelEdit');
-    
-                            // clear the tables
-                            $('#reporting-task-properties').propertytable('clear');
-    
-                            // clear the comments
-                          nfCommon.clearField('read-only-reporting-task-comments');
-    
-                            // removed the cached reporting task details
-                            $('#reporting-task-configuration').removeData('reportingTaskDetails');
-                        },
-                        open: function () {
-                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                        }
-                    }
-                });
-    
-                // initialize the property table
-                $('#reporting-task-properties').propertytable({
-                    readOnly: false,
-                  supportsGoTo: true,
-                    dialogContainer: '#new-reporting-task-property-container',
-                    descriptorDeferred: getReportingTaskPropertyDescriptor,
-                  controllerServiceCreatedDeferred: function (response) {
-                      return nfControllerServices.loadControllerServices(controllerServicesUri, $('#controller-services-table'));
-                  },
-                    goToServiceDeferred: goToServiceFromProperty
-                });
-            },
-    
-            /**
-             * Shows the configuration dialog for the specified reporting task.
-             *
-             * @argument {reportingTask} reportingTaskEntity      The reporting task
-             */
-            showConfiguration: function (reportingTaskEntity) {
-                var reportingTaskDialog = $('#reporting-task-configuration');
-                if (reportingTaskDialog.data('mode') === config.readOnly) {
-                    // update the visibility
-                    $('#reporting-task-configuration .reporting-task-read-only').hide();
-                    $('#reporting-task-configuration .reporting-task-editable').show();
-    
-                    // 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) {
-                          return nfControllerServices.loadControllerServices(controllerServicesUri, $('#controller-services-table'));
-                      },
-                        goToServiceDeferred: goToServiceFromProperty
-                    });
-    
-                    // update the mode
-                    reportingTaskDialog.data('mode', config.edit);
-                }
-    
-                // reload the task in case the property descriptors have changed
-                var reloadTask = $.ajax({
-                    type: 'GET',
-                    url: reportingTaskEntity.uri,
-                    dataType: 'json'
-                });
-    
-                // get the reporting task history
-                var loadHistory = $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/flow/history/components/' + encodeURIComponent(reportingTaskEntity.id),
-                    dataType: 'json'
-                });
-    
-                // once everything is loaded, show the dialog
-                $.when(reloadTask, loadHistory).done(function (taskResponse, historyResponse) {
-                    // get the updated reporting task
-                    reportingTaskEntity = taskResponse[0];
-                    var reportingTask = reportingTaskEntity.component;
-    
-                    // get the reporting task history
-                    var reportingTaskHistory = historyResponse[0].componentHistory;
-    
-                    // record the reporting task details
-                    $('#reporting-task-configuration').data('reportingTaskDetails', reportingTaskEntity);
-    
-                    // determine if the enabled checkbox is checked or not
-                    var reportingTaskEnableStyle = 'checkbox-checked';
-                    if (reportingTask['state'] === 'DISABLED') {
-                        reportingTaskEnableStyle = 'checkbox-unchecked';
-                    }
-    
-                    // populate the reporting task settings
-                  nfCommon.populateField('reporting-task-id', reportingTask['id']);
-                  nfCommon.populateField('reporting-task-type', nfCommon.substringAfterLast(reportingTask['type'], '.'));
-                    $('#reporting-task-name').val(reportingTask['name']);
-                    $('#reporting-task-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(reportingTaskEnableStyle);
-                    $('#reporting-task-comments').val(reportingTask['comments']);
-    
-                    // get the default schedule period
-                    var defaultSchedulingPeriod = reportingTask['defaultSchedulingPeriod'];
-                    var cronSchedulingPeriod = $('#reporting-task-cron-driven-scheduling-period').val(defaultSchedulingPeriod['CRON_DRIVEN']);
-                    var timerSchedulingPeriod = $('#reporting-task-timer-driven-scheduling-period').val(defaultSchedulingPeriod['TIMER_DRIVEN']);
-    
-                    // set the scheduling period as appropriate
-                    if (reportingTask['schedulingStrategy'] === 'CRON_DRIVEN') {
-                        cronSchedulingPeriod.val(reportingTask['schedulingPeriod']);
-                    } else {
-                        timerSchedulingPeriod.val(reportingTask['schedulingPeriod']);
-                    }
-    
-                    // initialize the scheduling strategy
-                    $('#reporting-task-scheduling-strategy-combo').combo({
-                        options: [{
-                          text: nf._.msg('nf-reporting-task.TimerDriven'),
-                            value: 'TIMER_DRIVEN',
-                          description: nf._.msg('nf-reporting-task.Message2')
-                        }, {
-                          text: nf._.msg('nf-reporting-task.CRONDriven'),
-                            value: 'CRON_DRIVEN',
-                          description: nf._.msg('nf-reporting-task.Message3')
-                        }],
-                        selectedOption: {
-                            value: reportingTask['schedulingStrategy']
-                        },
-                        select: function (selectedOption) {
-                            if (selectedOption.value === 'CRON_DRIVEN') {
-                                timerSchedulingPeriod.hide();
-                                cronSchedulingPeriod.show();
-                            } else {
-                                timerSchedulingPeriod.show();
-                                cronSchedulingPeriod.hide();
-                            }
-                        }
-                    });
-    
-                    var buttons = [{
-                      buttonText: nf._.msg('nf-reporting-task.Apply'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                // close all fields currently being edited
-                                $('#reporting-task-properties').propertytable('saveRow');
-    
-                                // save the reporting task
-                                saveReportingTask(reportingTaskEntity).done(function (response) {
-                                    // reload the reporting task
-                                  nfControllerService.reloadReferencedServices(getControllerServicesTable(), response.component);
-    
-                                    // close the details panel
-                                    $('#reporting-task-configuration').modal('hide');
-                                });
-                            }
-                        }
-                    },
-                        {
-                          buttonText: nf._.msg('nf-reporting-task.Cancel'),
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                    $('#reporting-task-configuration').modal('hide');
-                                }
-                            }
-                        }];
-    
-                    // determine if we should show the advanced button
-                  if (nfCommon.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') {
-                        buttons.push({
-                          buttonText: nf._.msg('nf-reporting-task.Advanced'),
-                            clazz: 'fa fa-cog button-icon',
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                    var openCustomUi = function () {
-                                        // reset state and close the dialog manually to avoid hiding the faded background
-                                        $('#reporting-task-configuration').modal('hide');
-    
-                                        // close the settings dialog since the custom ui is also opened in the shell
-                                        $('#shell-close-button').click();
-    
-                                        // show the custom ui
-                                      nfCustomUi.showCustomUi(reportingTaskEntity, reportingTask.customUiUrl, true).done(function () {
-                                            // once the custom ui is closed, reload the reporting task
-                                          nfReportingTask.reload(reportingTaskEntity.id).done(function (response) {
-                                              nfControllerService.reloadReferencedServices(getControllerServicesTable(), response.reportingTask);
-                                            });
-    
-                                            // show the settings
-                                          nfSettings.showSettings();
-                                        });
-                                    };
-    
-                                    // close all fields currently being edited
-                                    $('#reporting-task-properties').propertytable('saveRow');
-    
-                                    // determine if changes have been made
-                                    if (isSaveRequired()) {
-                                        // see if those changes should be saved
-                                      nfDialog.showYesNoDialog({
-                                          headerText: nf._.msg('nf-reporting-task.Save'),
-                                          dialogContent: nf._.msg('nf-reporting-task.Message4'),
-                                            noHandler: openCustomUi,
-                                            yesHandler: function () {
-                                                saveReportingTask(reportingTaskEntity).done(function () {
-                                                    // open the custom ui
-                                                    openCustomUi();
-                                                });
-                                            }
-                                        });
-                                    } else {
-                                        // if there were no changes, simply open the custom ui
-                                        openCustomUi();
-                                    }
-                                }
-                            }
-                        });
-                    }
-    
-                    // set the button model
-                    $('#reporting-task-configuration').modal('setButtonModel', buttons);
-    
-                    // load the property table
-                    $('#reporting-task-properties')
-                        .propertytable('setGroupId', reportingTask.parentGroupId)
-                        .propertytable('loadProperties', reportingTask.properties, reportingTask.descriptors, reportingTaskHistory.propertyHistory);
-    
-                    // show the details
-                    $('#reporting-task-configuration').modal('show');
-    
-                    $('#reporting-task-properties').propertytable('resetTableSize');
-              }).fail(nfErrorHandler.handleAjaxError);
-            },
-    
-            /**
-             * Shows the reporting task details in a read only dialog.
-             *
-             * @param {object} reportingTaskEntity
-             */
-            showDetails: function (reportingTaskEntity) {
-                var reportingTaskDialog = $('#reporting-task-configuration');
-                if (reportingTaskDialog.data('mode') === config.edit) {
-                    // update the visibility
-                    $('#reporting-task-configuration .reporting-task-read-only').show();
-                    $('#reporting-task-configuration .reporting-task-editable').hide();
-    
-                    // initialize the property table
-                    $('#reporting-task-properties').propertytable('destroy').propertytable({
-                      supportsGoTo: true,
-                        readOnly: true
-                    });
-    
-                    // update the mode
-                    reportingTaskDialog.data('mode', config.readOnly);
-                }
-    
-                // reload the task in case the property descriptors have changed
-                var reloadTask = $.ajax({
-                    type: 'GET',
-                    url: reportingTaskEntity.uri,
-                    dataType: 'json'
-                });
-    
-                // get the reporting task history
-                var loadHistory = $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/flow/history/components/' + encodeURIComponent(reportingTaskEntity.id),
-                    dataType: 'json'
-                });
-    
-                // once everything is loaded, show the dialog
-                $.when(reloadTask, loadHistory).done(function (taskResponse, historyResponse) {
-                    // get the updated reporting task
-                    reportingTaskEntity = taskResponse[0];
-                    var reportingTask = reportingTaskEntity.component;
-    
-                    // get the reporting task history
-                    var reportingTaskHistory = historyResponse[0].componentHistory;
-    
-                    // populate the reporting task settings
-                  nfCommon.populateField('reporting-task-id', reportingTask['id']);
-                  nfCommon.populateField('reporting-task-type', nfCommon.substringAfterLast(reportingTask['type'], '.'));
-                  nfCommon.populateField('read-only-reporting-task-name', reportingTask['name']);
-                  nfCommon.populateField('read-only-reporting-task-comments', reportingTask['comments']);
-    
-                    // make the scheduling strategy human readable
-                    var schedulingStrategy = reportingTask['schedulingStrategy'];
-                    if (schedulingStrategy === 'CRON_DRIVEN') {
-                        schedulingStrategy = 'CRON driven';
-                    } else {
-                        schedulingStrategy = "Timer driven";
-                    }
-                  nfCommon.populateField('read-only-reporting-task-scheduling-strategy', schedulingStrategy);
-                  nfCommon.populateField('read-only-reporting-task-scheduling-period', reportingTask['schedulingPeriod']);
-    
-                    var buttons = [{
-                      buttonText: nf._.msg('nf-reporting-task.Ok'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                // hide the dialog
-                                reportingTaskDialog.modal('hide');
-                            }
-                        }
-                    }];
-    
-                    // determine if we should show the advanced button
-                  if (nfCommon.isDefinedAndNotNull(nfCustomUi) && nfCommon.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') {
-                        buttons.push({
-                          buttonText: nf._.msg('nf-reporting-task.Advanced'),
-                            clazz: 'fa fa-cog button-icon',
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                    // reset state and close the dialog manually to avoid hiding the faded background
-                                    reportingTaskDialog.modal('hide');
-    
-                                    // close the settings dialog since the custom ui is also opened in the shell
-                                    $('#shell-close-button').click();
-    
-                                    // show the custom ui
-                                  nfCustomUi.showCustomUi(reportingTaskEntity, reportingTask.customUiUrl, false).done(function () {
-                                      nfSettings.showSettings();
-                                    });
-                                }
-                            }
-                        });
-                    }
-    
-                    // show the dialog
-                    reportingTaskDialog.modal('setButtonModel', buttons).modal('show');
-    
-                    // load the property table
-                    $('#reporting-task-properties').propertytable('loadProperties', reportingTask.properties, reportingTask.descriptors, reportingTaskHistory.propertyHistory);
-    
-                    // show the details
-                    reportingTaskDialog.modal('show');
-    
-                    $('#reporting-task-properties').propertytable('resetTableSize');
-                });
-            },
-    
-            /**
-             * Starts the specified reporting task.
-             *
-             * @param {object} reportingTaskEntity
-             */
-            start: function (reportingTaskEntity) {
-                setRunning(reportingTaskEntity, true);
-            },
-    
-            /**
-             * Stops the specified reporting task.
-             *
-             * @param {object} reportingTaskEntity
-             */
-            stop: function (reportingTaskEntity) {
-                setRunning(reportingTaskEntity, false);
-            },
-    
-            /**
-             * Reloads the specified reporting task.
-             *
-             * @param {string} id
-             */
-            reload: function (id) {
-                var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
-                var reportingTaskData = reportingTaskGrid.getData();
-                var reportingTaskEntity = reportingTaskData.getItemById(id);
-    
-                return $.ajax({
-                    type: 'GET',
-                    url: reportingTaskEntity.uri,
-                    dataType: 'json'
-                }).done(function (response) {
-                    renderReportingTask(response);
-              }).fail(nfErrorHandler.handleAjaxError);
-          },
-  
-          /**
-           * Prompts the user before attempting to delete the specified reporting task.
-           *
-           * @param {object} reportingTaskEntity
-           */
-          promptToDeleteReportingTask: function (reportingTaskEntity) {
-              // prompt for deletion
-              nfDialog.showYesNoDialog({
-                  headerText: 'Delete Reporting Task',
-                  dialogContent: 'Delete reporting task \'' + nfCommon.escapeHtml(reportingTaskEntity.component.name) + '\'?',
-                  yesHandler: function () {
-                      nfReportingTask.remove(reportingTaskEntity);
-                  }
-              });
-            },
-    
-            /**
-             * Deletes the specified reporting task.
-             *
-             * @param {object} reportingTaskEntity
-             */
-            remove: function (reportingTaskEntity) {
-                // prompt for removal?
-    
-              var revision = nfClient.getRevision(reportingTaskEntity);
-                $.ajax({
-                    type: 'DELETE',
-                    url: reportingTaskEntity.uri + '?' + $.param({
-                        version: revision.version,
-                        clientId: revision.clientId
-                    }),
-                    dataType: 'json'
-                }).done(function (response) {
-                    // remove the task
-                    var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
-                    var reportingTaskData = reportingTaskGrid.getData();
-                    reportingTaskData.deleteItem(reportingTaskEntity.id);
-              }).fail(nfErrorHandler.handleAjaxError);
-            }
-        };
-    
-      return nfReportingTask;
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-selectable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-selectable.js
deleted file mode 100644
index c8b51792b395..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-selectable.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['d3',
-                'nf.ng.Bridge',
-                'nf.ContextMenu'],
-            function (d3, nfNgBridge, nfContextMenu) {
-                return (nf.Selectable = factory(d3, nfNgBridge, nfContextMenu));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Selectable =
-            factory(require('d3'),
-                require('nf.ng.Bridge'),
-                require('nf.ContextMenu')));
-    } else {
-        nf.Selectable = factory(root.d3,
-            root.nf.ng.Bridge,
-            root.nf.ContextMenu);
-    }
-}(this, function (d3, nfNgBridge, nfContextMenu) {
-    'use strict';
-
-    var nfSelectable = {
-
-        select: function (g) {
-            // hide any context menus as necessary
-            nfContextMenu.hide();
-
-            // only need to update selection if necessary
-            if (!g.classed('selected')) {
-                // since we're not appending, deselect everything else
-                if (!d3.event.shiftKey) {
-                    d3.selectAll('g.selected').classed('selected', false);
-                }
-
-                // update the selection
-                g.classed('selected', true);
-            } else {
-                // we are currently selected, if shift key the deselect
-                if (d3.event.shiftKey) {
-                    g.classed('selected', false);
-                }
-            }
-
-            // inform Angular app that values have changed since the
-            // enabled operate palette buttons are based off of the selection
-            nfNgBridge.digest();
-
-            // stop propagation
-            d3.event.stopPropagation();
-        },
-
-        /**
-         * Activates the select behavior for the components in the specified selection.
-         *
-         * @param {selection} components
-         */
-        activate: function (components) {
-            components.on('mousedown.selection', function () {
-                // get the clicked component to update selection
-                nfSelectable.select(d3.select(this));
-            });
-        }
-    };
-
-    return nfSelectable;
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
deleted file mode 100644
index 1ba91ebbe88e..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
+++ /dev/null
@@ -1,1312 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'Slick',
-                  'd3',
-                  'nf.Client',
-                  'nf.Dialog',
-                  'nf.Common',
-                  'nf.CanvasUtils',
-                  'nf.ControllerServices',
-                  'nf.ErrorHandler',
-                  'nf.ReportingTask',
-                  'nf.Shell',
-                  'nf.ComponentState',
-                  'nf.PolicyManagement'],
-              function ($, Slick, d3, nfClient, nfDialog, nfCommon, nfCanvasUtils, nfControllerServices, nfErrorHandler, nfReportingTask, nfShell, nfComponentState, nfPolicyManagement) {
-                  return (nf.Settings = factory($, Slick, d3, nfClient, nfDialog, nfCommon, nfCanvasUtils, nfControllerServices, nfErrorHandler, nfReportingTask, nfShell, nfComponentState, nfPolicyManagement));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.Settings =
-              factory(require('jquery'),
-                  require('Slick'),
-                  require('d3'),
-                  require('nf.Client'),
-                  require('nf.Dialog'),
-                  require('nf.Common'),
-                  require('nf.CanvasUtils'),
-                  require('nf.ControllerServices'),
-                  require('nf.ErrorHandler'),
-                  require('nf.ReportingTask'),
-                  require('nf.Shell'),
-                  require('nf.ComponentState'),
-                  require('nf.PolicyManagement')));
-      } else {
-          nf.Settings = factory(root.$,
-              root.Slick,
-              root.d3,
-              root.nf.Client,
-              root.nf.Dialog,
-              root.nf.Common,
-              root.nf.CanvasUtils,
-              root.nf.ControllerServices,
-              root.nf.ErrorHandler,
-              root.nf.ReportingTask,
-              root.nf.Shell,
-              root.nf.ComponentState,
-              root.nf.PolicyManagement);
-      }
-  }(this, function ($, Slick, d3, nfClient, nfDialog, nfCommon, nfCanvasUtils, nfControllerServices, nfErrorHandler, nfReportingTask, nfShell, nfComponentState, nfPolicyManagement) {
-      'use strict';
-  
-    
-        var config = {
-            urls: {
-                api: '../nifi-api',
-                controllerConfig: '../nifi-api/controller/config',
-                reportingTaskTypes: '../nifi-api/flow/reporting-task-types',
-                createReportingTask: '../nifi-api/controller/reporting-tasks',
-                reportingTasks: '../nifi-api/flow/reporting-tasks'
-            }
-        };
-    
-        var gridOptions = {
-            forceFitColumns: true,
-            enableTextSelectionOnCells: true,
-            enableCellNavigation: true,
-            enableColumnReorder: false,
-            autoEdit: false,
-            multiSelect: false,
-            rowHeight: 24
-        };
-    
-        /**
-         * Gets the controller services table.
-         *
-         * @returns {*|jQuery|HTMLElement}
-         */
-        var getControllerServicesTable = function () {
-            return $('#controller-services-table');
-        };
-    
-        /**
-         * Saves the settings for the controller.
-         *
-         * @param version
-         */
-        var saveSettings = function (version) {
-            // marshal the configuration details
-            var configuration = marshalConfiguration();
-            var entity = {
-              'revision': nfClient.getRevision({
-                    'revision': {
-                        'version': version
-                    }
-                }),
-                'component': configuration
-            };
-    
-            // save the new configuration details
-            $.ajax({
-                type: 'PUT',
-                url: config.urls.controllerConfig,
-                data: JSON.stringify(entity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (response) {
-                // close the settings dialog
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-settings.Settings'),
-                  dialogContent: nf._.msg('nf-settings.Message2')
-                });
-    
-                // register the click listener for the save button
-                $('#settings-save').off('click').on('click', function () {
-                    saveSettings(response.revision.version);
-                });
-          }).fail(nfErrorHandler.handleAjaxError);
-        }
-    
-        /**
-         * Initializes the general tab.
-         */
-        var initGeneral = function () {
-        };
-    
-        /**
-         * Marshals the details to include in the configuration request.
-         */
-        var marshalConfiguration = function () {
-            // create the configuration
-            var configuration = {};
-            configuration['maxTimerDrivenThreadCount'] = $('#maximum-timer-driven-thread-count-field').val();
-            configuration['maxEventDrivenThreadCount'] = $('#maximum-event-driven-thread-count-field').val();
-            return configuration;
-        };
-    
-        /**
-         * Determines if the item matches the filter.
-         *
-         * @param {object} item     The item to filter
-         * @param {object} args     The filter criteria
-         * @returns {boolean}       Whether the item matches the filter
-         */
-        var matchesRegex = function (item, args) {
-            if (args.searchString === '') {
-                return true;
-            }
-    
-            try {
-                // perform the row filtering
-                var filterExp = new RegExp(args.searchString, 'i');
-            } catch (e) {
-                // invalid regex
-                return false;
-            }
-    
-            // determine if the item matches the filter
-            var matchesLabel = item['label'].search(filterExp) >= 0;
-            var matchesTags = item['tags'].search(filterExp) >= 0;
-            return matchesLabel || matchesTags;
-        };
-    
-        /**
-         * Determines if the specified tags match all the tags selected by the user.
-         *
-         * @argument {string[]} tagFilters      The tag filters
-         * @argument {string} tags              The tags to test
-         */
-        var matchesSelectedTags = function (tagFilters, tags) {
-            var selectedTags = [];
-            $.each(tagFilters, function (_, filter) {
-                selectedTags.push(filter);
-            });
-    
-            // normalize the tags
-            var normalizedTags = tags.toLowerCase();
-    
-            var matches = true;
-            $.each(selectedTags, function (i, selectedTag) {
-                if (normalizedTags.indexOf(selectedTag) === -1) {
-                    matches = false;
-                    return false;
-                }
-            });
-    
-            return matches;
-        };
-    
-        /**
-       * Whether the specified item is selectable.
-       *
-       * @param item reporting task type
-       */
-      var isSelectable = function (item) {
-          return nfCommon.isBlank(item.usageRestriction) || nfCommon.canAccessRestrictedComponents();
-      };
-  
-      /**
-         * Formatter for the name column.
-         *
-         * @param {type} row
-         * @param {type} cell
-         * @param {type} value
-         * @param {type} columnDef
-         * @param {type} dataContext
-         * @returns {String}
-         */
-        var nameFormatter = function (row, cell, value, columnDef, dataContext) {
-            if (!dataContext.permissions.canRead) {
-                return '<span class="blank">' + dataContext.id + '</span>';
-            }
-    
-            return dataContext.component.name;
-        };
-    
-        /**
-         * Formatter for the type column.
-         *
-         * @param {type} row
-         * @param {type} cell
-         * @param {type} value
-         * @param {type} columnDef
-         * @param {type} dataContext
-         * @returns {String}
-         */
-        var typeFormatter = function (row, cell, value, columnDef, dataContext) {
-            if (!dataContext.permissions.canRead) {
-                return '';
-            }
-    
-          return nfCommon.substringAfterLast(dataContext.component.type, '.');
-        };
-    
-        /**
-         * 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 (sortDetails.columnId === 'moreDetails') {
-                        var aBulletins = 0;
-                      if (!nfCommon.isEmpty(a.bulletins)) {
-                            aBulletins = a.bulletins.length;
-                        }
-                        var bBulletins = 0;
-                      if (!nfCommon.isEmpty(b.bulletins)) {
-                            bBulletins = b.bulletins.length;
-                        }
-                        return aBulletins - bBulletins;
-                    } else if (sortDetails.columnId === 'type') {
-                      var aType = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(a.component[sortDetails.columnId], '.') : '';
-                      var bType = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(b.component[sortDetails.columnId], '.') : '';
-                        return aType === bType ? 0 : aType > bType ? 1 : -1;
-                    } else if (sortDetails.columnId === 'state') {
-                        var aState = 'Invalid';
-                      if (nfCommon.isEmpty(a.component.validationErrors)) {
-                          aState = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-                        }
-                        var bState = 'Invalid';
-                      if (nfCommon.isEmpty(b.component.validationErrors)) {
-                          bState = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
-                        }
-                        return aState === bState ? 0 : aState > bState ? 1 : -1;
-                    } else {
-                      var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-                      var bString = nfCommon.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) {
-                        return 0;
-                    }
-                    if (a.permissions.canRead) {
-                        return 1;
-                    } else {
-                        return -1;
-                    }
-                }
-            };
-    
-            // perform the sort
-            data.sort(comparer, sortDetails.sortAsc);
-        };
-    
-        /**
-         * Get the text out of the filter field. If the filter field doesn't
-         * have any text it will contain the text 'filter list' so this method
-         * accounts for that.
-         */
-        var getReportingTaskTypeFilterText = function () {
-            return $('#reporting-task-type-filter').val();
-        };
-    
-        /**
-         * Filters the reporting task type table.
-         */
-        var applyReportingTaskTypeFilter = function () {
-            // get the dataview
-            var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
-    
-            // ensure the grid has been initialized
-          if (nfCommon.isDefinedAndNotNull(reportingTaskTypesGrid)) {
-                var reportingTaskTypesData = reportingTaskTypesGrid.getData();
-    
-                // update the search criteria
-                reportingTaskTypesData.setFilterArgs({
-                    searchString: getReportingTaskTypeFilterText()
-                });
-                reportingTaskTypesData.refresh();
-    
-              // update the buttons to possibly trigger the disabled state
-              $('#new-reporting-task-dialog').modal('refreshButtons');
-  
-                // update the selection if possible
-                if (reportingTaskTypesData.getLength() > 0) {
-                    reportingTaskTypesGrid.setSelectedRows([0]);
-                }
-            }
-        };
-    
-        /**
-         * Hides the selected reporting task.
-         */
-        var clearSelectedReportingTask = function () {
-            $('#reporting-task-type-description').text('');
-            $('#reporting-task-type-name').text('');
-            $('#selected-reporting-task-name').text('');
-            $('#selected-reporting-task-type').text('');
-            $('#reporting-task-description-container').hide();
-        };
-    
-        /**
-         * Clears the selected reporting task type.
-         */
-        var clearReportingTaskSelection = function () {
-            // clear the selected row
-            clearSelectedReportingTask();
-    
-            // clear the active cell the it can be reselected when its included
-            var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
-            reportingTaskTypesGrid.resetActiveCell();
-        };
-    
-        /**
-         * Performs the filtering.
-         *
-         * @param {object} item     The item subject to filtering
-         * @param {object} args     Filter arguments
-         * @returns {Boolean}       Whether or not to include the item
-         */
-        var filterReportingTaskTypes = function (item, args) {
-            // determine if the item matches the filter
-            var matchesFilter = matchesRegex(item, args);
-    
-            // determine if the row matches the selected tags
-            var matchesTags = true;
-            if (matchesFilter) {
-                var tagFilters = $('#reporting-task-tag-cloud').tagcloud('getSelectedTags');
-                var hasSelectedTags = tagFilters.length > 0;
-                if (hasSelectedTags) {
-                    matchesTags = matchesSelectedTags(tagFilters, item['tags']);
-                }
-            }
-    
-            // determine if this row should be visible
-            var matches = matchesFilter && matchesTags;
-    
-            // if this row is currently selected and its being filtered
-            if (matches === false && $('#selected-reporting-task-type').text() === item['type']) {
-                clearReportingTaskSelection();
-            }
-    
-            return matches;
-        };
-    
-        /**
-         * Adds the currently selected reporting task.
-         */
-        var addSelectedReportingTask = function () {
-            var selectedTaskType = $('#selected-reporting-task-type').text();
-    
-            // ensure something was selected
-            if (selectedTaskType === '') {
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-settings.Settings'),
-                  dialogContent: nf._.msg('nf-settings.Message3')
-                });
-            } else {
-                addReportingTask(selectedTaskType);
-            }
-        };
-    
-        /**
-         * Adds a new reporting task of the specified type.
-         *
-         * @param {string} reportingTaskType
-         */
-        var addReportingTask = function (reportingTaskType) {
-            // build the reporting task entity
-            var reportingTaskEntity = {
-              'revision': nfClient.getRevision({
-                    'revision': {
-                        'version': 0
-                    }
-                }),
-                'component': {
-                    'type': reportingTaskType
-                }
-            };
-    
-            // add the new reporting task
-            var addTask = $.ajax({
-                type: 'POST',
-                url: config.urls.createReportingTask,
-                data: JSON.stringify(reportingTaskEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (reportingTaskEntity) {
-                // add the item
-                var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
-                var reportingTaskData = reportingTaskGrid.getData();
-                reportingTaskData.addItem(reportingTaskEntity);
-    
-                // resort
-                reportingTaskData.reSort();
-                reportingTaskGrid.invalidate();
-    
-                // select the new reporting task
-                var row = reportingTaskData.getRowById(reportingTaskEntity.id);
-                reportingTaskGrid.setSelectedRows([row]);
-                reportingTaskGrid.scrollRowIntoView(row);
-          }).fail(nfErrorHandler.handleAjaxError);
-    
-            // hide the dialog
-            $('#new-reporting-task-dialog').modal('hide');
-    
-            return addTask;
-        };
-    
-        /**
-         * Initializes the new reporting task dialog.
-         */
-        var initNewReportingTaskDialog = function () {
-            // define the function for filtering the list
-            $('#reporting-task-type-filter').on('keyup', function (e) {
-                var code = e.keyCode ? e.keyCode : e.which;
-                if (code === $.ui.keyCode.ENTER) {
-                  // get the grid reference
-                  var grid = $('#reporting-task-types-table').data('gridInstance');
-                  var selected = grid.getSelectedRows();
-  
-                  if (selected.length > 0) {
-                      // grid configured with multi-select = false
-                      var item = grid.getDataItem(selected[0]);
-                      if (isSelectable(item)) {
-                            addSelectedReportingTask();
-                      }
-                  }
-                } else {
-                    applyReportingTaskTypeFilter();
-                }
-            });
-    
-            // initialize the processor type table
-            var reportingTaskTypesColumns = [
-              {
-                  id: 'type',
-                  name: nf._.msg('nf-settings.Type'),
-                  field: 'label',
-                  formatter: nfCommon.typeFormatter,
-                  sortable: false,
-                  resizable: true
-              },
-              {
-                  id: 'tags',
-                  name: nf._.msg('nf-settings.Tags'),
-                  field: 'tags',
-                  sortable: false,
-                  resizable: true
-              }
-            ];
-    
-            // initialize the dataview
-            var reportingTaskTypesData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            reportingTaskTypesData.setItems([]);
-            reportingTaskTypesData.setFilterArgs({
-                searchString: getReportingTaskTypeFilterText()
-            });
-            reportingTaskTypesData.setFilter(filterReportingTaskTypes);
-    
-            // initialize the grid
-            var reportingTaskTypesGrid = new Slick.Grid('#reporting-task-types-table', reportingTaskTypesData, reportingTaskTypesColumns, gridOptions);
-            reportingTaskTypesGrid.setSelectionModel(new Slick.RowSelectionModel());
-            reportingTaskTypesGrid.registerPlugin(new Slick.AutoTooltips());
-            reportingTaskTypesGrid.setSortColumn('type', true);
-            reportingTaskTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) {
-                if ($.isArray(args.rows) && args.rows.length === 1) {
-                    var reportingTaskTypeIndex = args.rows[0];
-                    var reportingTaskType = reportingTaskTypesGrid.getDataItem(reportingTaskTypeIndex);
-    
-                    // set the reporting task type description
-                  if (nfCommon.isDefinedAndNotNull(reportingTaskType)) {
-                        // show the selected reporting task
-                        $('#reporting-task-description-container').show();
-    
-                      if (nfCommon.isBlank(reportingTaskType.description)) {
-                          $('#reporting-task-type-description')
-                              .attr('title', '')
-                              .html('<span class="unset">No description specified</span>');
-                      } else {
-                          $('#reporting-task-type-description')
-                              .width($('#reporting-task-description-container').innerWidth() - 1)
-                              .html(reportingTaskType.description)
-                              .ellipsis();
-                      }
-  
-                      // populate the dom
-                      $('#reporting-task-type-name').text(reportingTaskType.label).ellipsis();
-                      $('#selected-reporting-task-name').text(reportingTaskType.label);
-                      $('#selected-reporting-task-type').text(reportingTaskType.type);
-  
-                      // refresh the buttons based on the current selection
-                      $('#new-reporting-task-dialog').modal('refreshButtons');
-                    }
-                }
-            });
-            reportingTaskTypesGrid.onDblClick.subscribe(function (e, args) {
-                var reportingTaskType = reportingTaskTypesGrid.getDataItem(args.row);
-    
-              if (isSelectable(reportingTaskType)) {
-                    addReportingTask(reportingTaskType.type);
-              }
-          });
-          reportingTaskTypesGrid.onViewportChanged.subscribe(function (e, args) {
-              nfCommon.cleanUpTooltips($('#reporting-task-types-table'), 'div.view-usage-restriction');
-            });
-    
-            // wire up the dataview to the grid
-            reportingTaskTypesData.onRowCountChanged.subscribe(function (e, args) {
-                reportingTaskTypesGrid.updateRowCount();
-                reportingTaskTypesGrid.render();
-    
-                // update the total number of displayed processors
-                $('#displayed-reporting-task-types').text(args.current);
-            });
-            reportingTaskTypesData.onRowsChanged.subscribe(function (e, args) {
-                reportingTaskTypesGrid.invalidateRows(args.rows);
-                reportingTaskTypesGrid.render();
-            });
-            reportingTaskTypesData.syncGridSelection(reportingTaskTypesGrid, true);
-    
-            // hold onto an instance of the grid
-          $('#reporting-task-types-table').data('gridInstance', reportingTaskTypesGrid).on('mouseenter', 'div.slick-cell', function (e) {
-              var usageRestriction = $(this).find('div.view-usage-restriction');
-              if (usageRestriction.length && !usageRestriction.data('qtip')) {
-                  var rowId = $(this).find('span.row-id').text();
-  
-                  // get the status item
-                  var item = reportingTaskTypesData.getItemById(rowId);
-  
-                  // show the tooltip
-                  if (nfCommon.isDefinedAndNotNull(item.usageRestriction)) {
-                      usageRestriction.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                          content: item.usageRestriction,
-                          position: {
-                              container: $('#summary'),
-                              at: 'bottom right',
-                              my: 'top left',
-                              adjust: {
-                                  x: 4,
-                                  y: 4
-                              }
-                          }
-                      }));
-                  }
-              }
-          });
-    
-            // load the available reporting tasks
-            $.ajax({
-                type: 'GET',
-                url: config.urls.reportingTaskTypes,
-                dataType: 'json'
-            }).done(function (response) {
-                var id = 0;
-                var tags = [];
-    
-                // begin the update
-                reportingTaskTypesData.beginUpdate();
-    
-                // go through each reporting task type
-                $.each(response.reportingTaskTypes, function (i, documentedType) {
-                    // add the documented type
-                    reportingTaskTypesData.addItem({
-                        id: id++,
-                      label: nfCommon.substringAfterLast(documentedType.type, '.'),
-                        type: documentedType.type,
-                      description: nfCommon.escapeHtml(documentedType.description),
-                      usageRestriction: nfCommon.escapeHtml(documentedType.usageRestriction),
-                        tags: documentedType.tags.join(', ')
-                    });
-    
-                    // count the frequency of each tag for this type
-                    $.each(documentedType.tags, function (i, tag) {
-                        tags.push(tag.toLowerCase());
-                    });
-                });
-    
-                // end the udpate
-                reportingTaskTypesData.endUpdate();
-    
-                // set the total number of processors
-                $('#total-reporting-task-types, #displayed-reporting-task-types').text(response.reportingTaskTypes.length);
-    
-                // create the tag cloud
-                $('#reporting-task-tag-cloud').tagcloud({
-                    tags: tags,
-                    select: applyReportingTaskTypeFilter,
-                    remove: applyReportingTaskTypeFilter
-                });
-          }).fail(nfErrorHandler.handleAjaxError);
-    
-            // initialize the reporting task dialog
-            $('#new-reporting-task-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-              headerText: nf._.msg('nf-settings.Message11'),
-                buttons: [{
-                      buttonText: nf._.msg('nf-settings.Add'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                  disabled: function () {
-                      var selected = reportingTaskTypesGrid.getSelectedRows();
-  
-                      if (selected.length > 0) {
-                          // grid configured with multi-select = false
-                          var item = reportingTaskTypesGrid.getDataItem(selected[0]);
-                          return isSelectable(item) === false;
-                      } else {
-                          return reportingTaskTypesGrid.getData().getLength() === 0;
-                      }
-                  },
-                    handler: {
-                        click: function () {
-                            addSelectedReportingTask();
-                        }
-                    }
-                },
-                    {
-                      buttonText: nf._.msg('nf-settings.Cancel'),
-                        color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
-                        },
-                        handler: {
-                            click: function () {
-                                $(this).modal('hide');
-                            }
-                        }
-                    }],
-                handler: {
-                    close: function () {
-                        // clear the selected row
-                        clearSelectedReportingTask();
-    
-                        // clear any filter strings
-                        $('#reporting-task-type-filter').val('');
-    
-                        // clear the tagcloud
-                        $('#reporting-task-tag-cloud').tagcloud('clearSelectedTags');
-    
-                        // reset the filter
-                        applyReportingTaskTypeFilter();
-    
-                        // unselect any current selection
-                        var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
-                        reportingTaskTypesGrid.setSelectedRows([]);
-                        reportingTaskTypesGrid.resetActiveCell();
-                  },
-                  resize: function () {
-                      $('#reporting-task-type-description')
-                          .width($('#reporting-task-description-container').innerWidth() - 1)
-                          .text($('#reporting-task-type-description').attr('title'))
-                          .ellipsis();
-                    }
-                }
-            });
-        };
-    
-        /**
-         * Initializes the reporting tasks tab.
-         */
-        var initReportingTasks = function () {
-            // initialize the new reporting task dialog
-            initNewReportingTaskDialog();
-    
-            var moreReportingTaskDetails = function (row, cell, value, columnDef, dataContext) {
-                if (!dataContext.permissions.canRead) {
-                    return '';
-                }
-    
-              var markup = '<div title="'+nf._.msg('nf-settings.ViewDetails')+'" class="pointer view-reporting-task fa fa-info-circle"></div>';
-    
-                // always include a button to view the usage
-              markup += '<div title="'+nf._.msg('nf-settings.Usage')+'" class="pointer reporting-task-usage fa fa-book"></div>';
-    
-              var hasErrors = !nfCommon.isEmpty(dataContext.component.validationErrors);
-              var hasBulletins = !nfCommon.isEmpty(dataContext.bulletins);
-    
-                if (hasErrors) {
-                  markup += '<div class="pointer has-errors fa fa-warning" ></div>';
-                }
-    
-                if (hasBulletins) {
-                  markup += '<div class="has-bulletins fa fa-sticky-note-o"></div>';
-                }
-    
-                if (hasErrors || hasBulletins) {
-                  markup += '<span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.component.id) + '</span>';
-                }
-    
-                return markup;
-            };
-    
-            var reportingTaskRunStatusFormatter = function (row, cell, value, columnDef, dataContext) {
-                if (!dataContext.permissions.canRead) {
-                    return '';
-                }
-    
-                // determine the appropriate label
-                var icon = '', label = '';
-              if (!nfCommon.isEmpty(dataContext.component.validationErrors)) {
-                  label = nf._.msg('nf-settings.Invalid');
-                    icon = 'invalid fa fa-warning';
-                } else {
-                    if (dataContext.component.state === 'STOPPED') {
-                      label = nf._.msg('nf-settings.Stopped');
-                      icon = 'fa fa-stop stopped';
-                    } else if (dataContext.component.state === 'RUNNING') {
-                      label = nf._.msg('nf-settings.Running');
-                      icon = 'fa fa-play running';
-                    } else {
-                      label = nf._.msg('nf-settings.Disabled');
-                      icon = 'icon icon-enable-false disabled';
-                    }
-                }
-    
-                // include the active thread count if appropriate
-                var activeThreadCount = '';
-              if (nfCommon.isDefinedAndNotNull(dataContext.component.activeThreadCount) && dataContext.component.activeThreadCount > 0) {
-                    activeThreadCount = '(' + dataContext.component.activeThreadCount + ')';
-                }
-    
-                // format the markup
-                var formattedValue = '<div layout="row"><div class="' + icon + '" style="margin-top: 3px;"></div>';
-              return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + nfCommon.escapeHtml(label) + '</div><div style="float: left; margin-left: 4px;">' + nfCommon.escapeHtml(activeThreadCount) + '</div></div>';
-            };
-    
-            var reportingTaskActionFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-    
-                if (dataContext.permissions.canRead && dataContext.permissions.canWrite) {
-                    if (dataContext.component.state === 'RUNNING') {
-                      markup += '<div title="'+nf._.msg('nf-settings.Stop')+'" class="pointer stop-reporting-task fa fa-stop" style="margin-top: 2px; margin-right: 3px;" ></div>';
-                    } else if (dataContext.component.state === 'STOPPED' || dataContext.component.state === 'DISABLED') {
-                      markup += '<div title="'+nf._.msg('nf-settings.Edit')+'" class="pointer edit-reporting-task fa fa-pencil" style="margin-top: 2px; margin-right: 3px;" ></div>';
-    
-                        // support starting when stopped and no validation errors
-                      if (dataContext.component.state === 'STOPPED' && nfCommon.isEmpty(dataContext.component.validationErrors)) {
-                          markup += '<div title="'+nf._.msg('nf-settings.Start')+'" class="pointer start-reporting-task fa fa-play" style="margin-top: 2px; margin-right: 3px;"></div>';
-                        }
-                    }
-    
-                    if (dataContext.component.persistsState === true) {
-                      markup += '<div title="'+nf._.msg('nf-settings.ViewState')+'" class="pointer view-state-reporting-task fa fa-tasks" style="margin-top: 2px; margin-right: 3px;" ></div>';
-                    }
-                }
-    
-              if (dataContext.permissions.canWrite && nfCommon.canModifyController()) {
-                  markup += '<div title="'+nf._.msg('nf-settings.Remove')+'" class="pointer delete-reporting-task fa fa-trash" style="margin-top: 2px; margin-right: 3px;" ></div>';
-                }
-    
-                // allow policy configuration conditionally
-              if (nfCanvasUtils.isConfigurableAuthorizer() && nfCommon.canAccessTenants()) {
-                  markup += '<div title="'+nf._.msg('nf-settings.AccessPolicies')+'" class="pointer edit-access-policies fa fa-key" style="margin-top: 2px;"></div>';
-                }
-    
-                return markup;
-            };
-    
-            // define the column model for the reporting tasks table
-            var reportingTasksColumnModel = [
-              {
-                  id: 'moreDetails',
-                  name: '&nbsp;',
-                  resizable: false,
-                  formatter: moreReportingTaskDetails,
-                  sortable: true,
-                  width: 90,
-                  maxWidth: 90,
-                  toolTip: 'Sorts based on presence of bulletins'
-              },
-              {id: 'name', name: nf._.msg('nf-settings.Name'), sortable: true, resizable: true, formatter: nameFormatter},
-              {id: 'type', name: nf._.msg('nf-settings.Type'), sortable: true, resizable: true, formatter: typeFormatter},
-              {
-                  id: 'state',
-                  name: nf._.msg('nf-settings.RunStatus'),
-                  sortable: true,
-                  resizeable: true,
-                  formatter: reportingTaskRunStatusFormatter
-              }
-            ];
-    
-            // action column should always be last
-          reportingTasksColumnModel.push({
-              id: 'actions',
-              name: '&nbsp;',
-              resizable: false,
-              formatter: reportingTaskActionFormatter,
-              sortable: false,
-              width: 90,
-              maxWidth: 90
-          });
-    
-            // initialize the dataview
-            var reportingTasksData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            reportingTasksData.setItems([]);
-    
-            // initialize the sort
-            sort({
-                columnId: 'name',
-                sortAsc: true
-            }, reportingTasksData);
-    
-            // initialize the grid
-            var reportingTasksGrid = new Slick.Grid('#reporting-tasks-table', reportingTasksData, reportingTasksColumnModel, gridOptions);
-            reportingTasksGrid.setSelectionModel(new Slick.RowSelectionModel());
-            reportingTasksGrid.registerPlugin(new Slick.AutoTooltips());
-            reportingTasksGrid.setSortColumn('name', true);
-            reportingTasksGrid.onSort.subscribe(function (e, args) {
-                sort({
-                    columnId: args.sortCol.id,
-                    sortAsc: args.sortAsc
-                }, reportingTasksData);
-            });
-    
-            // configure a click listener
-            reportingTasksGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-    
-                // get the service at this row
-                var reportingTaskEntity = reportingTasksData.getItem(args.row);
-    
-                // determine the desired action
-                if (reportingTasksGrid.getColumns()[args.cell].id === 'actions') {
-                    if (target.hasClass('edit-reporting-task')) {
-                      nfReportingTask.showConfiguration(reportingTaskEntity);
-                    } else if (target.hasClass('start-reporting-task')) {
-                      nfReportingTask.start(reportingTaskEntity);
-                    } else if (target.hasClass('stop-reporting-task')) {
-                      nfReportingTask.stop(reportingTaskEntity);
-                    } else if (target.hasClass('delete-reporting-task')) {
-                      nfReportingTask.promptToDeleteReportingTask(reportingTaskEntity);
-                    } else if (target.hasClass('view-state-reporting-task')) {
-                        var canClear = reportingTaskEntity.component.state === 'STOPPED' && reportingTaskEntity.component.activeThreadCount === 0;
-                      nfComponentState.showState(reportingTaskEntity, canClear);
-                    } else if (target.hasClass('edit-access-policies')) {
-                        // show the policies for this service
-                      nfPolicyManagement.showReportingTaskPolicy(reportingTaskEntity);
-    
-                        // close the settings dialog
-                        $('#shell-close-button').click();
-                    }
-                } else if (reportingTasksGrid.getColumns()[args.cell].id === 'moreDetails') {
-                    if (target.hasClass('view-reporting-task')) {
-                      nfReportingTask.showDetails(reportingTaskEntity);
-                    } else if (target.hasClass('reporting-task-usage')) {
-                        // close the settings dialog
-                        $('#shell-close-button').click();
-    
-                        // open the documentation for this reporting task
-                      nfShell.showPage('../nifi-docs/documentation?' + $.param({
-                              select: nfCommon.substringAfterLast(reportingTaskEntity.component.type, '.')
-                            })).done(function () {
-                          nfSettings.showSettings();
-                        });
-                    }
-                }
-            });
-    
-            // wire up the dataview to the grid
-            reportingTasksData.onRowCountChanged.subscribe(function (e, args) {
-                reportingTasksGrid.updateRowCount();
-                reportingTasksGrid.render();
-            });
-            reportingTasksData.onRowsChanged.subscribe(function (e, args) {
-                reportingTasksGrid.invalidateRows(args.rows);
-                reportingTasksGrid.render();
-            });
-            reportingTasksData.syncGridSelection(reportingTasksGrid, true);
-    
-            // hold onto an instance of the grid
-            $('#reporting-tasks-table').data('gridInstance', reportingTasksGrid).on('mouseenter', 'div.slick-cell', function (e) {
-                var errorIcon = $(this).find('div.has-errors');
-                if (errorIcon.length && !errorIcon.data('qtip')) {
-                    var taskId = $(this).find('span.row-id').text();
-    
-                    // get the task item
-                    var reportingTaskEntity = reportingTasksData.getItemById(taskId);
-    
-                    // format the errors
-                  var tooltip = nfCommon.formatUnorderedList(reportingTaskEntity.component.validationErrors);
-    
-                    // show the tooltip
-                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                        errorIcon.qtip($.extend({},
-                          nfCommon.config.tooltipConfig,
-                            {
-                                content: tooltip,
-                                position: {
-                                    target: 'mouse',
-                                  viewport: $('#shell-container'),
-                                    adjust: {
-                                        x: 8,
-                                        y: 8,
-                                        method: 'flipinvert flipinvert'
-                                    }
-                                }
-                            }));
-                    }
-                }
-    
-                var bulletinIcon = $(this).find('div.has-bulletins');
-                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                    var taskId = $(this).find('span.row-id').text();
-    
-                    // get the task item
-                    var reportingTaskEntity = reportingTasksData.getItemById(taskId);
-    
-                    // format the tooltip
-                  var bulletins = nfCommon.getFormattedBulletins(reportingTaskEntity.bulletins);
-                  var tooltip = nfCommon.formatUnorderedList(bulletins);
-    
-                    // show the tooltip
-                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                        bulletinIcon.qtip($.extend({},
-                          nfCommon.config.tooltipConfig,
-                            {
-                                content: tooltip,
-                                position: {
-                                    target: 'mouse',
-                                  viewport: $('#shell-container'),
-                                    adjust: {
-                                        x: 8,
-                                        y: 8,
-                                        method: 'flipinvert flipinvert'
-                                    }
-                                }
-                            }));
-                    }
-                }
-            });
-        };
-    
-        /**
-         * Loads the settings.
-         */
-        var loadSettings = function () {
-            var setUnauthorizedText = function () {
-                $('#read-only-maximum-timer-driven-thread-count-field').addClass('unset').text('Unauthorized');
-                $('#read-only-maximum-event-driven-thread-count-field').addClass('unset').text('Unauthorized');
-            };
-    
-            var setEditable = function (editable) {
-                if (editable) {
-                    $('#general-settings div.editable').show();
-                    $('#general-settings div.read-only').hide();
-                    $('#settings-save').show();
-                } else {
-                    $('#general-settings div.editable').hide();
-                    $('#general-settings div.read-only').show();
-                    $('#settings-save').hide();
-                }
-            };
-    
-            var settings = $.Deferred(function (deferred) {
-                $.ajax({
-                    type: 'GET',
-                    url: config.urls.controllerConfig,
-                    dataType: 'json'
-                }).done(function (response) {
-                    if (response.permissions.canWrite) {
-                        // populate the settings
-                        $('#maximum-timer-driven-thread-count-field').removeClass('unset').val(response.component.maxTimerDrivenThreadCount);
-                        $('#maximum-event-driven-thread-count-field').removeClass('unset').val(response.component.maxEventDrivenThreadCount);
-    
-                        setEditable(true);
-    
-                        // register the click listener for the save button
-                        $('#settings-save').off('click').on('click', function () {
-                            saveSettings(response.revision.version);
-                        });
-                    } else {
-                        if (response.permissions.canRead) {
-                            // populate the settings
-                            $('#read-only-maximum-timer-driven-thread-count-field').removeClass('unset').text(response.component.maxTimerDrivenThreadCount);
-                            $('#read-only-maximum-event-driven-thread-count-field').removeClass('unset').text(response.component.maxEventDrivenThreadCount);
-                        } else {
-                            setUnauthorizedText();
-                        }
-    
-                        setEditable(false);
-                    }
-                    deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    if (xhr.status === 403) {
-                        setUnauthorizedText();
-                        setEditable(false);
-                        deferred.resolve();
-                    } else {
-                        deferred.reject(xhr, status, error);
-                    }
-                });
-            }).promise();
-    
-            // load the controller services
-            var controllerServicesUri = config.urls.api + '/flow/controller/controller-services';
-          var controllerServicesXhr = nfControllerServices.loadControllerServices(controllerServicesUri, getControllerServicesTable());
-    
-            // load the reporting tasks
-            var reportingTasks = loadReportingTasks();
-    
-            // return a deferred for all parts of the settings
-          return $.when(settings, controllerServicesXhr, reportingTasks).done(function (settingsResult, controllerServicesResult) {
-                var controllerServicesResponse = controllerServicesResult[0];
-    
-                // update the current time
-                $('#settings-last-refreshed').text(controllerServicesResponse.currentTime);
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Loads the reporting tasks.
-         */
-        var loadReportingTasks = function () {
-            return $.ajax({
-                type: 'GET',
-                url: config.urls.reportingTasks,
-                dataType: 'json'
-            }).done(function (response) {
-                var tasks = [];
-                $.each(response.reportingTasks, function (_, task) {
-                    tasks.push($.extend({
-                        bulletins: []
-                    }, task));
-                });
-    
-                var reportingTasksElement = $('#reporting-tasks-table');
-              nfCommon.cleanUpTooltips(reportingTasksElement, 'div.has-errors');
-              nfCommon.cleanUpTooltips(reportingTasksElement, 'div.has-bulletins');
-    
-                var reportingTasksGrid = reportingTasksElement.data('gridInstance');
-                var reportingTasksData = reportingTasksGrid.getData();
-    
-                // update the reporting tasks
-                reportingTasksData.setItems(tasks);
-                reportingTasksData.reSort();
-                reportingTasksGrid.invalidate();
-            });
-        };
-    
-        /**
-         * Shows the process group configuration.
-         */
-        var showSettings = function () {
-            // show the settings dialog
-          nfShell.showContent('#settings').done(function () {
-                reset();
-            });
-    
-            //reset content to account for possible policy changes
-            $('#settings-tabs').find('.selected-tab').click();
-    
-            // adjust the table size
-          nfSettings.resetTableSize();
-        };
-    
-        /**
-         * Reset state of this dialog.
-         */
-        var reset = function () {
-            // reset button state
-            $('#settings-save').mouseout();
-        };
-    
-      var nfSettings = {
-            /**
-             * Initializes the settings page.
-             */
-            init: function () {
-                // initialize the settings tabs
-                $('#settings-tabs').tabbs({
-                    tabStyle: 'tab',
-                    selectedTabStyle: 'selected-tab',
-                    scrollableTabContentStyle: 'scrollable',
-                    tabs: [{
-                      name: nf._.msg('nf-settings.General'),
-                        tabContentId: 'general-settings-tab-content'
-                    }, {
-                      name: nf._.msg('nf-settings.ControllerServices'),
-                        tabContentId: 'controller-services-tab-content'
-                    }, {
-                      name: nf._.msg('nf-settings.ReportingTasks'),
-                        tabContentId: 'reporting-tasks-tab-content'
-                    }],
-                    select: function () {
-                        var tab = $(this).text();
-                      if (tab === nf._.msg('nf-settings.General')) {
-                          $('#controller-cs-availability').hide();
-                            $('#new-service-or-task').hide();
-                            $('#settings-save').show();
-                        } else {
-                            var canModifyController = false;
-                          if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                                // only consider write permissions for creating new controller services/reporting tasks
-                              canModifyController = nfCommon.currentUser.controllerPermissions.canWrite === true;
-                            }
-    
-                            if (canModifyController) {
-                                $('#new-service-or-task').show();
-                                $('div.controller-settings-table').css('top', '32px');
-    
-                                // update the tooltip on the button
-                                $('#new-service-or-task').attr('title', function () {
-                                  if (tab === nf._.msg('nf-settings.ControllerServices')) {
-                                        $('#settings-save').hide();
-                                      return nf._.msg('nf-settings.Message12');
-                                  } else if (tab === nf._.msg('nf-settings.ReportingTasks')) {
-                                        $('#settings-save').hide();
-                                      return nf._.msg('nf-settings.Message13');
-                                    }
-                                });
-                            } else {
-                                $('#new-service-or-task').hide();
-                                $('div.controller-settings-table').css('top', '0');
-                            }
-    
-                          if (tab === nf._.msg('nf-settings.ControllerServices')) {
-                              $('#controller-cs-availability').show();
-                          } else if (tab === nf._.msg('nf-settings.ReportingTasks')) {
-                              $('#controller-cs-availability').hide();
-                          }
-  
-                            // resize the table
-                          nfSettings.resetTableSize();
-                        }
-                    }
-                });
-    
-                // settings refresh button
-                $('#settings-refresh-button').click(function () {
-                    loadSettings();
-                });
-    
-                // create a new controller service or reporting task
-                $('#new-service-or-task').on('click', function () {
-                    var selectedTab = $('#settings-tabs li.selected-tab').text();
-                  if (selectedTab === nf._.msg('nf-settings.ControllerServices')) {
-                        var controllerServicesUri = config.urls.api + '/controller/controller-services';
-                      nfControllerServices.promptNewControllerService(controllerServicesUri, getControllerServicesTable());
-                  } else if (selectedTab === nf._.msg('nf-settings.ReportingTasks')) {
-                        $('#new-reporting-task-dialog').modal('show');
-    
-                        // reset the canvas size after the dialog is shown
-                        var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
-                      if (nfCommon.isDefinedAndNotNull(reportingTaskTypesGrid)) {
-                            reportingTaskTypesGrid.setSelectedRows([0]);
-                            reportingTaskTypesGrid.resizeCanvas();
-                        }
-    
-                        // set the initial focus
-                        $('#reporting-task-type-filter').focus();
-                    }
-                });
-    
-                // initialize each tab
-                initGeneral();
-              nfControllerServices.init(getControllerServicesTable(), nfSettings.showSettings);
-                initReportingTasks();
-            },
-    
-            /**
-             * Update the size of the grid based on its container's current size.
-             */
-            resetTableSize: function () {
-              nfControllerServices.resetTableSize(getControllerServicesTable());
-    
-                var reportingTasksGrid = $('#reporting-tasks-table').data('gridInstance');
-              if (nfCommon.isDefinedAndNotNull(reportingTasksGrid)) {
-                    reportingTasksGrid.resizeCanvas();
-                }
-            },
-    
-            /**
-             * Shows the settings dialog.
-             */
-            showSettings: function () {
-                return loadSettings().done(showSettings);
-            },
-    
-            /**
-             * Loads the settings dialogs.
-             */
-            loadSettings: function () {
-                return loadSettings();
-            },
-    
-            /**
-             * Selects the specified controller service.
-             *
-             * @param {string} controllerServiceId
-             */
-            selectControllerService: function (controllerServiceId) {
-                var controllerServiceGrid = getControllerServicesTable().data('gridInstance');
-                var controllerServiceData = controllerServiceGrid.getData();
-    
-                // select the desired service
-                var row = controllerServiceData.getRowById(controllerServiceId);
-                controllerServiceGrid.setSelectedRows([row]);
-                controllerServiceGrid.scrollRowIntoView(row);
-    
-                // select the controller services tab
-                $('#settings-tabs').find('li:eq(1)').click();
-            },
-    
-            /**
-             * Sets the controller service and reporting task bulletins in their respective tables.
-             *
-             * @param {object} controllerServiceBulletins
-             * @param {object} reportingTaskBulletins
-             */
-            setBulletins: function (controllerServiceBulletins, reportingTaskBulletins) {
-                if ($('#controller-services-table').data('gridInstance')) {
-                  nfControllerServices.setBulletins(getControllerServicesTable(), controllerServiceBulletins);
-                }
-    
-                // reporting tasks
-                var reportingTasksGrid = $('#reporting-tasks-table').data('gridInstance');
-                var reportingTasksData = reportingTasksGrid.getData();
-                reportingTasksData.beginUpdate();
-    
-                // if there are some bulletins process them
-              if (!nfCommon.isEmpty(reportingTaskBulletins)) {
-                    var reportingTaskBulletinsBySource = d3.nest()
-                        .key(function (d) {
-                            return d.sourceId;
-                        })
-                        .map(reportingTaskBulletins, d3.map);
-    
-                    reportingTaskBulletinsBySource.forEach(function (sourceId, sourceBulletins) {
-                        var reportingTask = reportingTasksData.getItemById(sourceId);
-                      if (nfCommon.isDefinedAndNotNull(reportingTask)) {
-                            reportingTasksData.updateItem(sourceId, $.extend(reportingTask, {
-                                bulletins: sourceBulletins
-                            }));
-                        }
-                    });
-                } else {
-                    // if there are no bulletins clear all
-                    var reportingTasks = reportingTasksData.getItems();
-                    $.each(reportingTasks, function (_, reportingTask) {
-                        reportingTasksData.updateItem(reportingTask.id, $.extend(reportingTask, {
-                            bulletins: []
-                        }));
-                    });
-                }
-                reportingTasksData.endUpdate();
-            }
-        };
-    
-      return nfSettings;
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-snippet.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-snippet.js
deleted file mode 100644
index e5c36587b23d..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-snippet.js
+++ /dev/null
@@ -1,175 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'd3',
-                'nf.CanvasUtils',
-                'nf.Client'],
-            function ($, d3, nfCanvasUtils, nfClient) {
-                return (nf.Snippet = factory($, d3, nfCanvasUtils, nfClient));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Snippet =
-            factory(require('jquery'),
-                require('d3'),
-                require('nf.CanvasUtils'),
-                require('nf.Client')));
-    } else {
-        nf.Snippet = factory(root.$,
-            root.d3,
-            root.nf.CanvasUtils,
-            root.nf.Client);
-    }
-}(this, function ($, d3, nfCanvasUtils, nfClient) {
-    'use strict';
-
-    var config = {
-        urls: {
-            snippets: '../nifi-api/snippets',
-            processGroups: '../nifi-api/process-groups'
-        }
-    };
-
-    return {
-
-        /**
-         * Marshals snippet from the specified selection.
-         *
-         * @argument {selection} selection      The selection to marshal
-         * @argument {string} parentGroupId     The parent group id
-         */
-        marshal: function (selection, parentGroupId) {
-            var snippet = {
-                parentGroupId: parentGroupId,
-                processors: {},
-                funnels: {},
-                inputPorts: {},
-                outputPorts: {},
-                remoteProcessGroups: {},
-                processGroups: {},
-                connections: {},
-                labels: {}
-            };
-
-            // go through each component and identify its type
-            selection.each(function (d) {
-                var selected = d3.select(this);
-
-                if (nfCanvasUtils.isProcessor(selected)) {
-                    snippet.processors[d.id] = nfClient.getRevision(selected.datum());
-                } else if (nfCanvasUtils.isFunnel(selected)) {
-                    snippet.funnels[d.id] = nfClient.getRevision(selected.datum());
-                } else if (nfCanvasUtils.isLabel(selected)) {
-                    snippet.labels[d.id] = nfClient.getRevision(selected.datum());
-                } else if (nfCanvasUtils.isInputPort(selected)) {
-                    snippet.inputPorts[d.id] = nfClient.getRevision(selected.datum());
-                } else if (nfCanvasUtils.isOutputPort(selected)) {
-                    snippet.outputPorts[d.id] = nfClient.getRevision(selected.datum());
-                } else if (nfCanvasUtils.isProcessGroup(selected)) {
-                    snippet.processGroups[d.id] = nfClient.getRevision(selected.datum());
-                } else if (nfCanvasUtils.isRemoteProcessGroup(selected)) {
-                    snippet.remoteProcessGroups[d.id] = nfClient.getRevision(selected.datum());
-                } else if (nfCanvasUtils.isConnection(selected)) {
-                    snippet.connections[d.id] = nfClient.getRevision(selected.datum());
-                }
-            });
-
-            return snippet;
-        },
-
-        /**
-         * Creates a snippet.
-         *
-         * @argument {object} snippet       The snippet
-         */
-        create: function (snippet) {
-            var snippetEntity = {
-                'snippet': snippet
-            };
-
-            return $.ajax({
-                type: 'POST',
-                url: config.urls.snippets,
-                data: JSON.stringify(snippetEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            });
-        },
-
-        /**
-         * Copies the snippet to the specified group and origin.
-         *
-         * @argument {string} snippetId         The snippet id
-         * @argument {object} origin            The origin
-         * @argument {string} destinationGroupId    The destination group id
-         */
-        copy: function (snippetId, origin, destinationGroupId) {
-            var copySnippetRequestEntity = {
-                'snippetId': snippetId,
-                'originX': origin.x,
-                'originY': origin.y
-            };
-
-            return $.ajax({
-                type: 'POST',
-                url: config.urls.processGroups + '/' + encodeURIComponent(destinationGroupId) + '/snippet-instance',
-                data: JSON.stringify(copySnippetRequestEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            });
-        },
-
-        /**
-         * Removes the specified snippet.
-         *
-         * @argument {string} snippetId         The snippet id
-         */
-        remove: function (snippetId) {
-            return $.ajax({
-                type: 'DELETE',
-                url: config.urls.snippets + '/' + encodeURIComponent(snippetId)
-            });
-        },
-
-        /**
-         * Moves the snippet into the specified group.
-         *
-         * @argument {string} snippetId         The snippet id
-         * @argument {string} newGroupId        The new group id
-         */
-        move: function (snippetId, newGroupId) {
-            var moveSnippetEntity = {
-                'snippet': {
-                    'id': snippetId,
-                    'parentGroupId': newGroupId
-                }
-            };
-
-            return $.ajax({
-                type: 'PUT',
-                url: config.urls.snippets + '/' + encodeURIComponent(snippetId),
-                data: JSON.stringify(moveSnippetEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            });
-        }
-    };
-}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js
deleted file mode 100644
index 9858e78e19ca..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js
+++ /dev/null
@@ -1,1365 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'Slick',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.ErrorHandler'],
-              function ($, Slick, nfCommon, nfDialog, nfErrorHandler) {
-                  return (nf.ClusterTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler));
-              });
-      } 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, nfCommon, nfDialog, nfErrorHandler) {
-      'use strict';
-    
-        /**
-         * Configuration object used to hold a number of configuration items.
-         */
-        var config = {
-            primaryNode: 'Primary Node',
-          clusterCoordinator: 'Cluster Coordinator',
-            urls: {
-                cluster: '../nifi-api/controller/cluster',
-              nodes: '../nifi-api/controller/cluster/nodes',
-              systemDiagnostics: '../nifi-api/system-diagnostics'
-          },
-          data: [{
-              name: 'cluster',
-              update: refreshClusterData,
-              isAuthorized: nfCommon.canAccessController
-          }, {
-              name: 'systemDiagnostics',
-              update: refreshSystemDiagnosticsData,
-              isAuthorized: nfCommon.canAccessSystem
-          }
-          ]
-      };
-  
-      var commonTableOptions = {
-          forceFitColumns: true,
-          enableTextSelectionOnCells: true,
-          enableCellNavigation: false,
-          enableColumnReorder: false,
-          autoEdit: false,
-          rowHeight: 24
-      };
-  
-      var nodesTab = {
-          name: 'Nodes',
-          data: {
-              dataSet: 'cluster',
-              update: updateNodesTableData
-          },
-          tabContentId: 'cluster-nodes-tab-content',
-          tableId: 'cluster-nodes-table',
-          tableColumnModel: createNodeTableColumnModel,
-          tableIdColumn: 'nodeId',
-          tableOptions: commonTableOptions,
-          tableOnClick: nodesTableOnClick,
-          init: commonTableInit,
-          onSort: sort,
-          onTabSelected: onSelectTab,
-          filterOptions: [{
-              text: 'by address',
-                value: 'address'
-            }, {
-                text: nf._.msg('nf-cluster-table.ByStatus'),
-                value: 'status'
-          }]
-      };
-  
-      var jvmTab = {
-          name: 'JVM',
-          data: {
-              dataSet: 'systemDiagnostics',
-              update: updateJvmTableData
-          },
-          tabContentId: 'cluster-jvm-tab-content',
-          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: 'uptime',
-                  field: 'uptime',
-                  name: 'Uptime',
-                  sortable: true,
-                  resizable: true,
-                  cssClass: 'cell-right',
-                  headerCssClass: 'header-right'
-              }
-          ],
-          tableIdColumn: 'id',
-          tableOptions: commonTableOptions,
-          tableOnClick: null,
-          init: commonTableInit,
-          onSort: sort,
-          onTabSelected: onSelectTab,
-          filterOptions: [{
-              text: 'by address',
-              value: 'node'
-          }]
-      };
-  
-      var systemTab = {
-          name: 'System',
-          data: {
-              dataSet: 'systemDiagnostics',
-              update: updateSystemTableData
-          },
-          tabContentId: 'cluster-system-tab-content',
-          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'
-              }
-          ],
-          tableIdColumn: 'id',
-          tableOptions: commonTableOptions,
-          tableOnClick: null,
-          init: commonTableInit,
-          onSort: sort,
-          onTabSelected: onSelectTab,
-          filterOptions: [{
-              text: 'by address',
-              value: 'node'
-          }]
-      };
-  
-      var flowFileTab = {
-          name: 'FlowFile Storage',
-          data: {
-              dataSet: 'systemDiagnostics',
-              update: updateFlowFileTableData
-          },
-          tabContentId: 'cluster-flowfile-tab-content',
-          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'
-              }
-          ],
-          tableIdColumn: 'id',
-          tableOptions: commonTableOptions,
-          tableOnClick: null,
-          init: commonTableInit,
-          onSort: sort,
-          onTabSelected: onSelectTab,
-          filterOptions: [{
-              text: 'by address',
-              value: 'node'
-          }]
-      };
-  
-      var contentTab = {
-          name: 'Content Storage',
-          data: {
-              dataSet: 'systemDiagnostics',
-              update: updateContentTableData
-          },
-          tabContentId: 'cluster-content-tab-content',
-          tableId: 'cluster-content-table',
-          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'
-              }
-          ],
-          tableIdColumn: 'id',
-          tableOptions: commonTableOptions,
-          tableOnClick: null,
-          init: commonTableInit,
-          onSort: sort,
-          onTabSelected: onSelectTab,
-          filterOptions: [{
-              text: 'by address',
-              value: 'node'
-          }, {
-              text: 'by repository',
-              value: 'contentRepoId'
-          }]
-      };
-  
-      var versionTab = {
-          name: 'Versions',
-          data: {
-              dataSet: 'systemDiagnostics',
-              update: updateVersionTableData
-          },
-          tabContentId: 'cluster-version-tab-content',
-          tableId: 'cluster-version-table',
-          tableColumnModel: [
-              {id: 'node', field: 'node', name: 'Node Address', sortable: true, resizable: true},
-              {id: 'version', field: 'version', name: 'NiFi Version', sortable: true, resizable: true},
-              {id: 'javavendor', field: 'javaVendor', name: 'Java Vendor', sortable: true, resizable: true},
-              {id: 'javaversion', field: 'javaVersion', name: 'Java Version', sortable: true, resizable: true},
-              {id: 'osname', field: 'osName', name: 'OS Name', sortable: true, resizable: true},
-              {id: 'osversion', field: 'osVersion', name: 'OS Version', sortable: true, resizable: true},
-              {id: 'osarch', field: 'osArchitecture', name: 'OS Architecture', sortable: true, resizable: true}
-          ],
-          tableIdColumn: 'id',
-          tableOptions: commonTableOptions,
-          tableOnClick: null,
-          init: commonTableInit,
-          onSort: sort,
-          onTabSelected: onSelectTab,
-          filterOptions: [{
-              text: 'by address',
-              value: 'address'
-          }]
-      };
-  
-      var clusterTabs = [nodesTab, systemTab, jvmTab, flowFileTab, contentTab, versionTab];
-      var tabsByName = {};
-      var dataSetHandlers = {};
-  
-      /**
-       * Click handler for the Nodes table options.
-       */
-      function nodesTableOnClick(e, args, target, item) {
-          if (nodesTab.grid.getColumns()[args.cell].id === 'actions') {
-              if (target.hasClass('prompt-for-connect')) {
-                  promptForConnect(item);
-              } else if (target.hasClass('prompt-for-removal')) {
-                  promptForRemoval(item);
-              } else if (target.hasClass('prompt-for-disconnect')) {
-                  promptForDisconnect(item);
-              }
-          } else if (nodesTab.grid.getColumns()[args.cell].id === 'moreDetails') {
-              if (target.hasClass('show-node-details')) {
-                  showNodeDetails(item);
-              }
-          }
-      }
-  
-      /**
-       * Creates the Slick Grid column model for the Nodes table.
-       */
-      function createNodeTableColumnModel() {
-            var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
-                return '<div title="'+nf._.msg('nf-cluster-table.ViewDetails')+'" class="pointer show-node-details fa fa-info-circle" style="margin-top: 2px;"></div>';
-            };
-    
-            // define a custom formatter for the run status column
-            var nodeFormatter = function (row, cell, value, columnDef, dataContext) {
-                return formatNodeAddress(dataContext);
-            };
-    
-            // function for formatting the last accessed time
-            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-              return nfCommon.formatValue(value);
-            };
-    
-            // define a custom formatter for the status column
-            var statusFormatter = function (row, cell, value, columnDef, dataContext) {
-              return formatNodeStatus(dataContext);
-            };
-    
-            var columnModel = [
-              {
-                  id: 'moreDetails',
-                  name: '&nbsp;',
-                  sortable: false,
-                  resizable: false,
-                  formatter: moreDetailsFormatter,
-                  width: 50,
-                  maxWidth: 50
-              },
-              {
-                  id: 'formattedNodeAddress',
-                  field: 'formattedNodeAddress',
-                  name: nf._.msg('nf-cluster-table.Node Address'),
-                  formatter: nodeFormatter,
-                  resizable: true,
-                  sortable: true
-              },
-              {
-                  id: 'activeThreadCount',
-                  field: 'activeThreadCount',
-                  name: nf._.msg('nf-cluster-table.ActiveThreadCount'),
-                  resizable: true,
-                  sortable: true,
-                  defaultSortAsc: false
-              },
-              {
-                  id: 'queued',
-                  field: 'queued',
-                  name: '<span class="queued-title">'+nf._.msg('nf-cluster-table.Queue')+'</span>&nbsp;/&nbsp;<span class="queued-size-title">Size</span>',
-                  resizable: true,
-                  sortable: true,
-                  defaultSortAsc: false
-              },
-              {
-                  id: 'status',
-                  field: 'status',
-                  name: nf._.msg('nf-cluster-table.Status'),
-                  formatter: statusFormatter,
-                  resizable: true,
-                  sortable: true
-              },
-              {
-                  id: 'uptime',
-                  field: 'nodeStartTime',
-                  name: nf._.msg('nf-cluster-table.Uptime'),
-                  formatter: valueFormatter,
-                  resizable: true,
-                  sortable: true,
-                  defaultSortAsc: false
-              },
-              {
-                  id: 'heartbeat',
-                  field: 'heartbeat',
-                  name: nf._.msg('nf-cluster-table.LastHeartbeat'),
-                  formatter: valueFormatter,
-                  resizable: true,
-                  sortable: true,
-                  defaultSortAsc: false
-              }
-            ];
-    
-            // only allow the admin to modify the cluster
-          if (nfCommon.canModifyController()) {
-                var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-                    var canDisconnect = false;
-                    var canConnect = false;
-    
-                    // determine the current status
-                    if (dataContext.status === 'CONNECTED' || dataContext.status === 'CONNECTING') {
-                        canDisconnect = true;
-                    } else if (dataContext.status === 'DISCONNECTED') {
-                        canConnect = true;
-                    }
-    
-                    // return the appropriate markup
-                    if (canConnect) {
-                        return '<div title="'+nf._.msg('nf-cluster-table.Connect')+'" class="pointer prompt-for-connect fa fa-plug" style="margin-top: 2px;"></div>&nbsp;<div title="'+nf._.msg('nf-cluster-table.Delete')+'" class="pointer prompt-for-removal fa fa-trash" style="margin-top: 2px;"></div>';
-                    } else if (canDisconnect) {
-                    	return '<div title="'+nf._.msg('nf-cluster-table.Disconnect')+'" class="pointer prompt-for-disconnect fa fa-power-off" style="margin-top: 2px;"></div>';
-                    } else {
-                        return '<div style="width: 16px; height: 16px;">&nbsp;</div>';
-                    }
-                };
-    
-              columnModel.push({
-                  id: 'actions',
-                  label: '&nbsp;',
-                  formatter: actionFormatter,
-                  resizable: false,
-                  sortable: false,
-                  width: 80,
-                  maxWidth: 80
-              });
-          }
-  
-          return columnModel;
-      }
-  
-      var prevColumn, count;
-  
-      /**
-       * Sorts the specified data using the specified sort details.
-       *
-       * @param {object} sortDetails
-       * @param {object} data
-       */
-      function sort(sortDetails, dataView, tab) {
-          // defines a function for sorting
-          var comparer = function (a, b) {
-              if (sortDetails.columnId === 'heartbeat' || sortDetails.columnId === 'uptime') {
-                  var aDate = nfCommon.parseDateTime(a[sortDetails.columnId]);
-                  var bDate = nfCommon.parseDateTime(b[sortDetails.columnId]);
-                  return aDate.getTime() - bDate.getTime();
-              } else if (sortDetails.columnId === 'queued') {
-                  var aSplit = a[sortDetails.columnId].split(/ \/ /);
-                  var bSplit = b[sortDetails.columnId].split(/ \/ /);
-                  var mod = count % 4;
-                  if (mod < 2) {
-                      $('#cluster-nodes-table span.queued-title').addClass('sorted');
-                      var aCount = nfCommon.parseCount(aSplit[0]);
-                      var bCount = nfCommon.parseCount(bSplit[0]);
-                      return aCount - bCount;
-                  } else {
-                      $('#cluster-nodes-table span.queued-size-title').addClass('sorted');
-                      var aSize = nfCommon.parseSize(aSplit[1]);
-                      var bSize = nfCommon.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 = nfCommon.parseSize(a[sortDetails.columnId]);
-                  var bSize = nfCommon.parseSize(b[sortDetails.columnId]);
-                  return aSize - bSize;
-              } else if (sortDetails.columnId === 'totalThreads' || sortDetails.columnId === 'daemonThreads'
-                  || sortDetails.columnId === 'processors') {
-                  var aCount = nfCommon.parseCount(a[sortDetails.columnId]);
-                  var bCount = nfCommon.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 = nfCommon.parseCount(aSplit[0]);
-                  var bCount = nfCommon.parseCount(bSplit[0]);
-                  return aCount - bCount;
-              } else if (sortDetails.columnId === 'status') {
-                  var aStatus = formatNodeStatus(a);
-                  var bStatus = formatNodeStatus(b);
-                  return aStatus === bStatus ? 0 : aStatus > bStatus ? 1 : -1;
-              } else if (sortDetails.columnId === 'formattedNodeAddress') {
-                  var aNode = formatNodeAddress(a);
-                  var bNode = formatNodeAddress(b);
-                  return aNode === bNode ? 0 : aNode > bNode ? 1 : -1;
-              } else {
-                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                  return aString === bString ? 0 : aString > bString ? 1 : -1;
-              }
-          };
-  
-          // remove previous sort indicators
-          $('#cluster-nodes-table span.queued-title').removeClass('sorted');
-          $('#cluster-nodes-table span.queued-size-title').removeClass('sorted');
-  
-          // update/reset the count as appropriate
-          if (prevColumn !== sortDetails.columnId) {
-              count = 0;
-          } else {
-              count++;
-          }
-  
-          // perform the sort
-          dataView.sort(comparer, sortDetails.sortAsc);
-  
-          // record the previous table and sorted column
-          prevColumn = sortDetails.columnId;
-      };
-  
-      /**
-       * Formats the address for the specified node.
-       *
-       * @param {object} node
-       * @returns {string}
-       */
-      var formatNodeAddress = function (node) {
-          return nfCommon.escapeHtml(node.address) + ':' + nfCommon.escapeHtml(node.apiPort);
-      };
-  
-      /**
-       * Formats the status for the specified node.
-       *
-       * @param {object} node
-       * @returns {string}
-       */
-      var formatNodeStatus = function (node) {
-          var markup = node.status;
-          if (node.roles.includes(config.primaryNode)) {
-              markup += ', PRIMARY';
-          }
-          if (node.roles.includes(config.clusterCoordinator)) {
-              markup += ', COORDINATOR';
-          }
-          return markup;
-      }
-  
-      /**
-       * Prompts to verify node connection.
-       *
-       * @argument {object} node     The node
-       */
-      var promptForConnect = function (node) {
-          // prompt to connect
-          nfDialog.showYesNoDialog({
-              headerText: 'Connect Node',
-              dialogContent: 'Connect \'' + formatNodeAddress(node) + '\' to this cluster?',
-              yesHandler: function () {
-                  connect(node.nodeId);
-              }
-          });
-      };
-  
-      /**
-       * Connects the node in the specified row.
-       *
-       * @argument {string} nodeId     The node id
-       */
-      var connect = function (nodeId) {
-          var entity = {
-              'node': {
-                  'nodeId': nodeId,
-                  'status': 'CONNECTING'
-              }
-          };
-          $.ajax({
-              type: 'PUT',
-              url: config.urls.nodes + '/' + encodeURIComponent(nodeId),
-              data: JSON.stringify(entity),
-              dataType: 'json',
-              contentType: 'application/json'
-          }).done(function (response) {
-              var node = response.node;
-  
-              // update the node in the table
-              var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
-              var clusterData = clusterGrid.getData();
-              clusterData.updateItem(node.nodeId, node);
-          }).fail(nfErrorHandler.handleAjaxError);
-      };
-  
-      /**
-       * Prompts to verify node disconnection.
-       *
-       * @argument {object} node     The node
-       */
-      var promptForDisconnect = function (node) {
-          // prompt for disconnect
-          nfDialog.showYesNoDialog({
-              headerText: 'Disconnect Node',
-              dialogContent: 'Disconnect \'' + formatNodeAddress(node) + '\' from the cluster?',
-              yesHandler: function () {
-                  disconnect(node.nodeId);
-              }
-          });
-      };
-  
-      /**
-       * Disconnects the node in the specified row.
-       *
-       * @argument {string} nodeId     The node id
-       */
-      var disconnect = function (nodeId) {
-          var entity = {
-              'node': {
-                  'nodeId': nodeId,
-                  'status': 'DISCONNECTING'
-              }
-          };
-  
-          $.ajax({
-              type: 'PUT',
-              url: config.urls.nodes + '/' + encodeURIComponent(nodeId),
-              data: JSON.stringify(entity),
-              dataType: 'json',
-              contentType: 'application/json'
-          }).done(function (response) {
-              var node = response.node;
-  
-              // update the node in the table
-              var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
-              var clusterData = clusterGrid.getData();
-              clusterData.updateItem(node.nodeId, node);
-          }).fail(nfErrorHandler.handleAjaxError);
-      };
-  
-      /**
-       * Prompts to verify node disconnection.
-       *
-       * @argument {object} node     The node
-       */
-      var promptForRemoval = function (node) {
-          // prompt for disconnect
-          nfDialog.showYesNoDialog({
-              headerText: 'Remove Node',
-              dialogContent: 'Remove \'' + formatNodeAddress(node) + '\' from the cluster?',
-              yesHandler: function () {
-                  remove(node.nodeId);
-              }
-          });
-      };
-  
-      /**
-       * Disconnects the node in the specified row.
-       *
-       * @argument {string} nodeId     The node id
-       */
-      var remove = function (nodeId) {
-          $.ajax({
-              type: 'DELETE',
-              url: config.urls.nodes + '/' + encodeURIComponent(nodeId),
-              dataType: 'json'
-          }).done(function () {
-              // get the table and update the row accordingly
-              var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
-              var clusterData = clusterGrid.getData();
-              clusterData.deleteItem(nodeId);
-          }).fail(nfErrorHandler.handleAjaxError);
-      };
-  
-      /**
-       * 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 $('#cluster-filter').val();
-      };
-  
-      /**
-       * Applies the filter found in the filter expression text field.
-       */
-      var applyFilter = function () {
-          var visibleTab = getSelectedTab();
-          if (!visibleTab) {
-              return;
-          }
-  
-          var grid = visibleTab.grid;
-  
-          // ensure the grid has been initialized
-          if (nfCommon.isDefinedAndNotNull(grid)) {
-              var gridData = grid.getData();
-  
-              // update the search criteria
-              gridData.setFilterArgs({
-                  searchString: getFilterText(),
-                  property: $('#cluster-filter-type').combo('getSelectedOption').value
-              });
-              gridData.refresh();
-          }
-      };
-  
-      var getSelectedTab = function () {
-          var selectedTab = null;
-          clusterTabs.forEach(function (tab) {
-              if ($('#' + tab.tableId).is(':visible')) {
-                  selectedTab = tab;
-              }
-          });
-          return selectedTab;
-      }
-  
-      /**
-       * Performs the filtering.
-       *
-       * @param {object} item     The item subject to filtering
-       * @param {object} args     Filter arguments
-       * @returns {Boolean}       Whether or not to include the item
-       */
-      var filter = function (item, args) {
-          if (args.searchString === '') {
-              return true;
-          }
-  
-          try {
-              // perform the row filtering
-              var filterExp = new RegExp(args.searchString, 'i');
-          } catch (e) {
-              // invalid regex
-              return false;
-          }
-  
-          var searchText = item[args.property];
-          if (args.property === 'address') {
-              searchText = formatNodeAddress(item);
-          } else if (args.property === 'status') {
-              searchText = formatNodeStatus(item);
-          }
-  
-          // perform the filter
-          return searchText.search(filterExp) >= 0;
-      };
-  
-      /**
-       * Updates count of displayed and total rows.
-       */
-      function updateFilterStats(selectedTab) {
-          if (!selectedTab) {
-              selectedTab = getSelectedTab();
-          }
-          if (selectedTab.dataView) {
-              var displayedRows = selectedTab.dataView.getLength();
-              var totalRows = selectedTab.rowCount;
-              $('#displayed-rows').text(displayedRows);
-              $('#total-rows').text(totalRows);
-          }
-      }
-  
-      /**
-       * Clears any existing table filter.
-       */
-      var clearFilter = function () {
-          $('#cluster-filter').val('');
-          applyFilter();
-      }
-  
-      /**
-       * Show the node details.
-       *
-       * @argument {object} item     The item
-       */
-      var showNodeDetails = function (item) {
-          $.ajax({
-              type: 'GET',
-              url: config.urls.nodes + '/' + encodeURIComponent(item.nodeId),
-              dataType: 'json'
-          }).done(function (response) {
-              var node = response.node;
-  
-              // update the dialog fields
-              $('#node-id').text(node.nodeId);
-              $('#node-address').text(formatNodeAddress(node));
-  
-              // format the events
-              var events = $('#node-events');
-              if ($.isArray(node.events) && node.events.length > 0) {
-                  var eventMessages = [];
-                  $.each(node.events, function (i, event) {
-                      eventMessages.push(event.timestamp + ": " + event.message);
-                  });
-                  $('<div></div>').append(nfCommon.formatUnorderedList(eventMessages)).appendTo(events);
-              } else {
-                  events.append('<div><span class="unset">None</span></div>');
-              }
-  
-              // show the dialog
-              $('#node-details-dialog').modal('show');
-          }).fail(nfErrorHandler.handleAjaxError);
-      };
-  
-      /**
-       * Applies system diagnostics data to the JVM tab.
-       */
-      function updateJvmTableData(systemDiagnosticsResponse) {
-          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
-  
-              var jvmTableRows = [];
-              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
-                  var snapshot = nodeSnapshot.snapshot;
-  
-                  // sort the garbage collection
-                  var garbageCollection = snapshot.garbageCollection.sort(function (a, b) {
-                      return a.name === b.name ? 0 : a.name > b.name ? 1 : -1;
-                  });
-  
-                  // add the node jvm details
-                  jvmTableRows.push({
-                      id: nodeSnapshot.nodeId,
-                      node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                      address: nodeSnapshot.address,
-                      maxHeap: snapshot.maxHeap,
-                      totalHeap: snapshot.totalHeap,
-                      usedHeap: snapshot.usedHeap,
-                      heapUtilization: snapshot.heapUtilization,
-                      maxNonHeap: snapshot.maxNonHeap,
-                      totalNonHeap: snapshot.totalNonHeap,
-                      usedNonHeap: snapshot.usedNonHeap,
-                      gcOldGen: garbageCollection[0].collectionCount + ' times (' +
-                      garbageCollection[0].collectionTime + ')',
-                      gcNewGen: garbageCollection[1].collectionCount + ' times (' +
-                      garbageCollection[1].collectionTime + ')',
-                      uptime: snapshot.uptime
-                  });
-              });
-              jvmTab.rowCount = jvmTableRows.length;
-              jvmTab.dataView.setItems(jvmTableRows);
-              jvmTab.dataView.reSort();
-              jvmTab.grid.invalidate();
-          } else {
-              jvmTab.rowCount = 0;
-          }
-      }
-  
-      /**
-       * Applies system diagnostics data to the System tab.
-       */
-      function updateSystemTableData(systemDiagnosticsResponse) {
-          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
-  
-              var systemTableRows = [];
-              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
-                  var snapshot = nodeSnapshot.snapshot;
-                  systemTableRows.push({
-                      id: nodeSnapshot.nodeId,
-                      node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                      address: nodeSnapshot.address,
-                      processors: snapshot.availableProcessors,
-                      processorLoadAverage: snapshot.processorLoadAverage,
-                      totalThreads: snapshot.totalThreads,
-                      daemonThreads: snapshot.daemonThreads
-                  });
-              });
-              systemTab.rowCount = systemTableRows.length;
-              systemTab.dataView.setItems(systemTableRows);
-              systemTab.dataView.reSort();
-              systemTab.grid.invalidate();
-          } else {
-              systemTab.rowCount = 0;
-          }
-      }
-  
-      /**
-       * Applies system diagnostics data to the FlowFile Storage tab.
-       */
-      function updateFlowFileTableData(systemDiagnosticsResponse) {
-          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
-  
-              var flowFileTableRows = [];
-              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
-                  var snapshot = nodeSnapshot.snapshot;
-                  flowFileTableRows.push({
-                      id: nodeSnapshot.nodeId,
-                      node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                      address: nodeSnapshot.address,
-                      ffRepoTotal: snapshot.flowFileRepositoryStorageUsage.totalSpace,
-                      ffRepoUsed: snapshot.flowFileRepositoryStorageUsage.usedSpace,
-                      ffRepoFree: snapshot.flowFileRepositoryStorageUsage.freeSpace,
-                      ffRepoUtil: snapshot.flowFileRepositoryStorageUsage.utilization
-                  });
-              });
-              flowFileTab.rowCount = flowFileTableRows.length;
-              flowFileTab.dataView.setItems(flowFileTableRows);
-              flowFileTab.dataView.reSort();
-              flowFileTab.grid.invalidate();
-          } else {
-              flowFileTab.rowCount = 0;
-          }
-      }
-  
-      /**
-       * Applies system diagnostics data to the Content Storage tab.
-       */
-      function updateContentTableData(systemDiagnosticsResponse) {
-          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
-  
-              var contentStorageTableRows = [];
-              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
-                  var snapshot = nodeSnapshot.snapshot;
-                  snapshot.contentRepositoryStorageUsage.forEach(function (contentRepoUsage) {
-                      contentStorageTableRows.push({
-                          id: nodeSnapshot.nodeId + ':' + contentRepoUsage.identifier,
-                          address: nodeSnapshot.address,
-                          node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                          contentRepoId: contentRepoUsage.identifier,
-                          contentRepoTotal: contentRepoUsage.totalSpace,
-                          contentRepoUsed: contentRepoUsage.usedSpace,
-                          contentRepoFree: contentRepoUsage.freeSpace,
-                          contentRepoUtil: contentRepoUsage.utilization
-                      });
-                  });
-              });
-  
-              contentTab.rowCount = contentStorageTableRows.length;
-              contentTab.dataView.setItems(contentStorageTableRows);
-              contentTab.dataView.reSort();
-              contentTab.grid.invalidate();
-          } else {
-              contentTab.rowCount = 0;
-          }
-      }
-  
-      /**
-       * Applies system diagnostics data to the Versions tab.
-       */
-      function updateVersionTableData(systemDiagnosticsResponse) {
-          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
-              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
-  
-              var versionTableRows = [];
-              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
-                  var snapshot = nodeSnapshot.snapshot;
-                  versionTableRows.push({
-                      id: nodeSnapshot.nodeId,
-                      address: nodeSnapshot.address,
-                      node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                      version: snapshot.versionInfo.niFiVersion,
-                      javaVendor: snapshot.versionInfo.javaVendor,
-                      javaVersion: snapshot.versionInfo.javaVersion,
-                      osName: snapshot.versionInfo.osName,
-                      osVersion: snapshot.versionInfo.osVersion,
-                      osArchitecture: snapshot.versionInfo.osArchitecture
-                  });
-              });
-  
-              versionTab.dataView.setItems(versionTableRows);
-              versionTab.dataView.reSort();
-              versionTab.grid.invalidate();
-          }
-      }
-  
-      /**
-       * Loads system diagnostics data for the cluster.
-       */
-      function refreshSystemDiagnosticsData() {
-          var systemDiagnosticsUri = config.urls.systemDiagnostics
-          var loadPromise = $.ajax({
-              type: 'GET',
-              url: systemDiagnosticsUri,
-              data: {
-                  nodewise: true
-              },
-              dataType: 'json'
-          }).done(function (systemDiagnosticsResponse) {
-              var handlers = dataSetHandlers['systemDiagnostics'];
-              handlers.forEach(function (handler) {
-                  handler(systemDiagnosticsResponse);
-              });
-          }).fail(nfErrorHandler.handleAjaxError);
-          return loadPromise;
-      };
-  
-      /**
-       * Generic initialization for Slick Grid tables
-       */
-      function commonTableInit(tab) {
-          var dataView = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-          dataView.setItems([], tab.tableIdColumn);
-  
-          dataView.setFilterArgs({
-                searchString: getFilterText(),
-                property: $('#cluster-filter-type').combo('getSelectedOption').value
-            });
-          dataView.setFilter(filter);
-    
-            // initialize the sort
-          tab.onSort({
-              columnId: tab.tableIdColumn,
-                sortAsc: true
-          }, dataView);
-    
-            // initialize the grid
-          var columnModel = tab.tableColumnModel;
-          if (typeof columnModel === 'function') {
-              columnModel = columnModel();
-          }
-          var grid = new Slick.Grid('#' + tab.tableId, dataView, columnModel, tab.tableOptions);
-          grid.setSelectionModel(new Slick.RowSelectionModel());
-          grid.setSortColumn(tab.tableIdColumn, true);
-          grid.onSort.subscribe(function (e, args) {
-              tab.onSort({
-                  columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-              }, dataView, tab);
-          });
-  
-          // wire up the dataview to the grid
-          dataView.onRowCountChanged.subscribe(function (e, args) {
-              grid.updateRowCount();
-              grid.render();
-              updateFilterStats(tab);
-          });
-          dataView.onRowsChanged.subscribe(function (e, args) {
-              grid.invalidateRows(args.rows);
-              grid.render();
-          });
-  
-          // click events
-          if (tab.tableOnClick) {
-              grid.onClick.subscribe(function (e, args) {
-                    var target = $(e.target);
-                  var item = dataView.getItem(args.row);
-                  tab.tableOnClick(e, args, target, item);
-              });
-          }
-    
-            // hold onto an instance of the grid
-          $('#' + tab.tableId).data('gridInstance', grid);
-          tab.dataView = dataView;
-          tab.grid = grid;
-      };
-  
-      /**
-       * Apply the cluster nodes data set to the table.
-       */
-      function updateNodesTableData(clusterResponse) {
-          var cluster = clusterResponse.cluster;
-    
-            // ensure there are groups specified
-          if (nfCommon.isDefinedAndNotNull(cluster.nodes)) {
-              var clusterGrid = nodesTab.grid;
-                var clusterData = clusterGrid.getData();
-    
-                // set the items
-              nodesTab.rowCount = cluster.nodes.length;
-                clusterData.setItems(cluster.nodes);
-                clusterData.reSort();
-                clusterGrid.invalidate();
-    
-                // update the stats last refreshed timestamp
-                $('#cluster-last-refreshed').text(cluster.generated);
-            } else {
-                $('#total-nodes').text('0');
-            }
-      }
-  
-      /**
-       * Refreshes cluster data sets from the server.
-       */
-      function refreshClusterData() {
-          var clusterNodesDataPromise = $.ajax({
-              type: 'GET',
-              url: config.urls.cluster,
-              dataType: 'json'
-          }).done(function (response) {
-              var handlers = dataSetHandlers['cluster'];
-              handlers.forEach(function (handler) {
-                  handler(response);
-              });
-          }).fail(nfErrorHandler.handleAjaxError);
-          return clusterNodesDataPromise;
-      }
-  
-      /**
-       * Event handler triggered when the user switches tabs.
-       */
-      function onSelectTab(tab) {
-          // Resize table
-          var tabGrid = tab.grid;
-          if (nfCommon.isDefinedAndNotNull(tabGrid)) {
-              tabGrid.resizeCanvas();
-          }
-  
-          // Clear filter text
-          clearFilter();
-  
-          // Reset filter options
-          $('#cluster-filter-type').combo({
-              options: tab.filterOptions,
-              select: function (option) {
-                  applyFilter();
-              }
-          });
-  
-          updateFilterStats(tab);
-      }
-  
-      var nfClusterTable = {
-          /**
-           * Initializes the cluster list.
-           */
-          init: function () {
-              // initialize the user details dialog
-              $('#node-details-dialog').modal({
-                  scrollableContentStyle: 'scrollable',
-                  headerText: 'Node Details',
-                  buttons: [{
-                      buttonText: 'Ok',
-                      color: {
-                          base: '#728E9B',
-                          hover: '#004849',
-                          text: '#ffffff'
-                      },
-                      handler: {
-                          click: function () {
-                              $('#node-details-dialog').modal('hide');
-                          }
-                      }
-                  }],
-                  handler: {
-                      close: function () {
-                          // clear the details
-                          $('#node-address').text('');
-                          $('#node-id').text('');
-                          $('#node-events').empty();
-                      }
-                  }
-              });
-  
-              // define the function for filtering the list
-              $('#cluster-filter').keyup(function () {
-                  applyFilter();
-              });
-  
-              // Authorize data sets
-              var dataSetAuthorized = {};
-              config.data = config.data.filter(function (dataSetConfig) {
-                  dataSetConfig.authorized = dataSetConfig.isAuthorized();
-                  dataSetAuthorized[dataSetConfig.name] = dataSetConfig.authorized;
-                  if (dataSetConfig.authorized) {
-                      return true;
-                  } else {
-                      return false;
-                  }
-              });
-  
-              // Filter tabs to authorized data sets
-              clusterTabs = clusterTabs.filter(function (tab) {
-                  var tabDataSet = tab.data.dataSet;
-                  if (dataSetAuthorized[tabDataSet]) {
-                      return true;
-                  } else {
-                      return false;
-                  }
-              });
-              clusterTabs.forEach(function (tab) {
-                  tabsByName[tab.name] = tab;
-                  var dataSetHandlerList = dataSetHandlers[tab.data.dataSet];
-                  if (dataSetHandlerList) {
-                      dataSetHandlers[tab.data.dataSet] = dataSetHandlerList.concat([tab.data.update]);
-                  } else {
-                      dataSetHandlers[tab.data.dataSet] = [tab.data.update];
-                  }
-              });
-  
-              // Initialize tab set
-              $('#cluster-tabs').tabbs({
-                  tabStyle: 'tab',
-                  selectedTabStyle: 'selected-tab',
-                  scrollableTabContentStyle: 'scrollable',
-                  tabs: clusterTabs,
-                  select: function () {
-                      var tab = $(this).text();
-                      var selectedTab = tabsByName[tab];
-                      if (selectedTab) {
-                          selectedTab.onTabSelected(selectedTab);
-                      } else {
-                          console.error('Failed to match tab: ', tab, tabsByName);
-                      }
-                  }
-              });
-  
-              // listen for browser resize events to update the page size
-              $(window).resize(function () {
-                  nfClusterTable.resetTableSize();
-              });
-  
-              // initialize tabs
-              clusterTabs.forEach(function (tab) {
-                  try {
-                      tab.init(tab);
-                  } catch (ex) {
-                      console.error('Failed to initialize tab', tab, ex);
-                  }
-              });
-          },
-  
-          /**
-           * Update the size of the grid based on its container's current size.
-           */
-          resetTableSize: function () {
-              clusterTabs.forEach(function (tab) {
-                  if (tab && tab.grid) {
-                      tab.grid.resizeCanvas();
-                  }
-              });
-          },
-  
-          /**
-           * Load the processor cluster table.
-           */
-          loadClusterTable: function () {
-              var updateDataDeferreds = config.data.map(function (dataSetSpec) {
-                  var dataSetDeferred = dataSetSpec.update();
-                  return dataSetDeferred;
-              });
-              var aggregateDeferred = $.when.apply($, updateDataDeferreds);
-              aggregateDeferred = aggregateDeferred.done(function (aggregateResult) {
-                  updateFilterStats(nodesTab);
-              });
-              return aggregateDeferred;
-          }
-      };
-  
-      return nfClusterTable;
-  }));
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
deleted file mode 100644
index 69e0d3ef2554..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js
+++ /dev/null
@@ -1,227 +0,0 @@
-/*
- * 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 top, define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common',
-                'nf.ClusterTable',
-                'nf.ErrorHandler',
-                'nf.Storage'],
-            function ($, nfCommon, nfClusterTable, nfErrorHandler, nfStorage) {
-                return (nf.Cluster = factory($, nfCommon, nfClusterTable, nfErrorHandler, nfStorage));
-            });
-    } 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 ($, nfCommon, nfClusterTable, nfErrorHandler, nfStorage) {
-    'use strict';
-
-    $(document).ready(function () {
-        // initialize the counters page
-        nfCluster.init();
-    });
-
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        urls: {
-            banners: '../nifi-api/flow/banners',
-            about: '../nifi-api/flow/about',
-            currentUser: '../nifi-api/flow/current-user'
-        }
-    };
-
-    /**
-     * Loads the current user.
-     */
-    var loadCurrentUser = function () {
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.currentUser,
-            dataType: 'json'
-        }).done(function (currentUser) {
-            nfCommon.setCurrentUser(currentUser);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Initializes the cluster page.
-     */
-    var initializeClusterPage = function () {
-        // define mouse over event for the refresh button
-        $('#refresh-button').click(function () {
-            nfClusterTable.loadClusterTable();
-        });
-
-        // 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 (bannerResponse) {
-                    // ensure the banners response is specified
-                    if (nfCommon.isDefinedAndNotNull(bannerResponse.banners)) {
-                        if (nfCommon.isDefinedAndNotNull(bannerResponse.banners.headerText) && bannerResponse.banners.headerText !== '') {
-                            // update the header text
-                            var bannerHeader = $('#banner-header').text(bannerResponse.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('counters');
-                        }
-
-                        if (nfCommon.isDefinedAndNotNull(bannerResponse.banners.footerText) && bannerResponse.banners.footerText !== '') {
-                            // update the footer text and show it
-                            var bannerFooter = $('#banner-footer').text(bannerResponse.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('counters');
-                        }
-                    }
-
-                    deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    nfErrorHandler.handleAjaxError(xhr, status, error);
-                    deferred.reject();
-                });
-            } else {
-                deferred.resolve();
-            }
-        }).promise();
-    };
-
-    var nfCluster = {
-        /**
-         * Initializes the counters page.
-         */
-        init: function () {
-            nfStorage.init();
-
-            // load the current user
-            loadCurrentUser().done(function () {
-                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'
-                        });
-
-                        $('#cluster').css('margin', 40);
-                        $('#cluster-table').css('bottom', 127);
-                        $('#cluster-refresh-container').css('margin', 40);
-                    }
-                };
-
-                // set the initial size
-                setBodySize();
-
-                // create the cluster table
-                nfClusterTable.init();
-
-                // resize to fit
-                nfClusterTable.resetTableSize();
-
-                // load the table
-                nfClusterTable.loadClusterTable().done(function () {
-                    // once the table is initialized, finish initializing the page
-                    initializeClusterPage().done(function () {
-
-                        // get the about details
-                        $.ajax({
-                            type: 'GET',
-                            url: config.urls.about,
-                            dataType: 'json'
-                        }).done(function (response) {
-                            var aboutDetails = response.about;
-                            var countersTitle = aboutDetails.title + ' Cluster';
-
-                            // set the document title and the about title
-                            document.title = countersTitle;
-                            $('#counters-header-text').text(countersTitle);
-                        }).fail(nfErrorHandler.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) {
-                                        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) {
-                                nfCommon.toggleScrollable(tabsContent.get(0));
-                            });
-                        });
-                    });
-                });
-            });
-        }
-    };
-
-    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
deleted file mode 100644
index 621d6806a8a9..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js
+++ /dev/null
@@ -1,335 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'Slick',
-                  'nf.Common',
-                  'nf.ErrorHandler'],
-              function ($, Slick, nfCommon, nfErrorHandler) {
-                  return (nf.CountersTable = factory($, Slick, nfCommon, nfErrorHandler));
-              });
-      } 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, nfCommon, nfErrorHandler) {
-      'use strict';
-    
-        /**
-         * Configuration object used to hold a number of configuration items.
-         */
-        var config = {
-            urls: {
-                counters: '../nifi-api/counters'
-            }
-        };
-    
-        /**
-         * 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 (sortDetails.columnId === 'value') {
-                  var aCount = nfCommon.parseCount(a[sortDetails.columnId]);
-                  var bCount = nfCommon.parseCount(b[sortDetails.columnId]);
-                    return aCount - bCount;
-                } else {
-                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                    return aString === bString ? 0 : aString > bString ? 1 : -1;
-                }
-            };
-    
-            // perform the sort
-            data.sort(comparer, sortDetails.sortAsc);
-        };
-    
-        /**
-         * Get the text out of the filter field. If the filter field doesn't
-         * have any text it will contain the text 'filter list' so this method
-         * accounts for that.
-         */
-        var getFilterText = function () {
-            return $('#counters-filter').val();
-        };
-    
-        /**
-         * Applies the filter found in the filter expression text field.
-         */
-        var applyFilter = function () {
-            // get the dataview
-            var countersGrid = $('#counters-table').data('gridInstance');
-    
-            // ensure the grid has been initialized
-          if (nfCommon.isDefinedAndNotNull(countersGrid)) {
-                var countersData = countersGrid.getData();
-    
-                // update the search criteria
-                countersData.setFilterArgs({
-                    searchString: getFilterText(),
-                    property: $('#counters-filter-type').combo('getSelectedOption').value
-                });
-                countersData.refresh();
-            }
-        };
-    
-        /**
-         * Performs the filtering.
-         *
-         * @param {object} item     The item subject to filtering
-         * @param {object} args     Filter arguments
-         * @returns {Boolean}       Whether or not to include the item
-         */
-        var filter = function (item, args) {
-            if (args.searchString === '') {
-                return true;
-            }
-    
-            try {
-                // perform the row filtering
-                var filterExp = new RegExp(args.searchString, 'i');
-            } catch (e) {
-                // invalid regex
-                return false;
-            }
-    
-            // perform the filter
-            return item[args.property].search(filterExp) >= 0;
-        };
-    
-        /**
-         * Resets the specified counter.
-         *
-         * @argument {object} item     The counter item
-         */
-        var resetCounter = function (item) {
-            $.ajax({
-                type: 'PUT',
-                url: config.urls.counters + '/' + encodeURIComponent(item.id),
-                dataType: 'json'
-            }).done(function (response) {
-                var counter = response.counter;
-    
-                // get the table and update the row accordingly
-                var countersGrid = $('#counters-table').data('gridInstance');
-                var countersData = countersGrid.getData();
-                countersData.updateItem(counter.id, counter);
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        return {
-            /**
-             * Initializes the counters list.
-             */
-            init: function () {
-                // define the function for filtering the list
-                $('#counters-filter').keyup(function () {
-                    applyFilter();
-                });
-    
-                // filter type
-                $('#counters-filter-type').combo({
-                    options: [{
-                        text: nf._.msg('nf-counters-table.ByName'),
-                        value: 'name'
-                    }, {
-                        text: nf._.msg('nf-counters-table.ByContext'),
-                        value: 'context'
-                    }],
-                    select: function (option) {
-                        applyFilter();
-                    }
-                });
-    
-                // initialize the templates table
-                var countersColumns = [
-                  {
-                      id: 'context',
-                      name: nf._.msg('nf-counters-table.Context'),
-                      field: 'context',
-                      sortable: true,
-                      resizable: true
-                  },
-                  {
-                      id: 'name',
-                      name: nf._.msg('nf-counters-table.Name'),
-                      field: 'name',
-                      sortable: true,
-                      resizable: true
-                  },
-                  {
-                      id: 'value',
-                      name: nf._.msg('nf-counters-table.Value'),
-                      field: 'value',
-                      sortable: true,
-                      resizable: true,
-                      defaultSortAsc: false
-                  }
-                ];
-    
-                // only allow dfm's to reset counters
-              if (nfCommon.canModifyCounters()) {
-                    // function for formatting the actions column
-                    var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-                        return '<div title="'+nf._.msg('nf-counters-table.Connect')+'" class="pointer reset-counter fa fa-undo" style="margin-top: 2px;"></div>';
-                    };
-    
-                    // add the action column
-                  countersColumns.push({
-                      id: 'actions',
-                      name: '&nbsp;',
-                      sortable: false,
-                      resizable: false,
-                      formatter: actionFormatter,
-                      width: 100,
-                      maxWidth: 100
-                  });
-                }
-    
-                var countersOptions = {
-                    forceFitColumns: true,
-                    enableTextSelectionOnCells: true,
-                    enableCellNavigation: false,
-                    enableColumnReorder: false,
-                    autoEdit: false,
-                    rowHeight: 24
-                };
-    
-                // initialize the dataview
-                var countersData = new Slick.Data.DataView({
-                    inlineFilters: false
-                });
-                countersData.setItems([]);
-                countersData.setFilterArgs({
-                    searchString: getFilterText(),
-                    property: $('#counters-filter-type').combo('getSelectedOption').value
-                });
-                countersData.setFilter(filter);
-    
-                // initialize the sort
-                sort({
-                    columnId: 'context',
-                    sortAsc: true
-                }, countersData);
-    
-                // initialize the grid
-                var countersGrid = new Slick.Grid('#counters-table', countersData, countersColumns, countersOptions);
-                countersGrid.setSelectionModel(new Slick.RowSelectionModel());
-                countersGrid.registerPlugin(new Slick.AutoTooltips());
-                countersGrid.setSortColumn('context', true);
-                countersGrid.onSort.subscribe(function (e, args) {
-                    sort({
-                        columnId: args.sortCol.field,
-                        sortAsc: args.sortAsc
-                    }, countersData);
-                });
-    
-                // configure a click listener
-                countersGrid.onClick.subscribe(function (e, args) {
-                    var target = $(e.target);
-    
-                    // get the node at this row
-                    var item = countersData.getItem(args.row);
-    
-                    // determine the desired action
-                    if (countersGrid.getColumns()[args.cell].id === 'actions') {
-                        if (target.hasClass('reset-counter')) {
-                            resetCounter(item);
-                        }
-                    }
-                });
-    
-                // wire up the dataview to the grid
-                countersData.onRowCountChanged.subscribe(function (e, args) {
-                    countersGrid.updateRowCount();
-                    countersGrid.render();
-    
-                    // update the total number of displayed processors
-                    $('#displayed-counters').text(args.current);
-                });
-                countersData.onRowsChanged.subscribe(function (e, args) {
-                    countersGrid.invalidateRows(args.rows);
-                    countersGrid.render();
-                });
-    
-                // hold onto an instance of the grid
-                $('#counters-table').data('gridInstance', countersGrid);
-    
-                // 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 (nfCommon.isDefinedAndNotNull(countersGrid)) {
-                    countersGrid.resizeCanvas();
-                }
-            },
-    
-            /**
-             * Load the processor counters table.
-             */
-            loadCountersTable: function () {
-                return $.ajax({
-                    type: 'GET',
-                    url: config.urls.counters,
-                    dataType: 'json'
-                }).done(function (response) {
-                    var report = response.counters;
-                    var aggregateSnapshot = report.aggregateSnapshot;
-    
-                    // ensure there are groups specified
-                  if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.counters)) {
-                        var countersGrid = $('#counters-table').data('gridInstance');
-                        var countersData = countersGrid.getData();
-    
-                        // set the items
-                        countersData.setItems(aggregateSnapshot.counters);
-                        countersData.reSort();
-                        countersGrid.invalidate();
-    
-                        // update the stats last refreshed timestamp
-                        $('#counters-last-refreshed').text(aggregateSnapshot.generated);
-    
-                        // update the total number of processors
-                        $('#total-counters').text(aggregateSnapshot.counters.length);
-                    } else {
-                        $('#total-counters').text('0');
-                    }
-              }).fail(nfErrorHandler.handleAjaxError);
-            }
-        };
-  }));
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
deleted file mode 100644
index a0279af6d168..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js
+++ /dev/null
@@ -1,227 +0,0 @@
-    /*
-     * 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 top, define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Common',
-                  'nf.CountersTable',
-                  'nf.ErrorHandler',
-                  'nf.Storage'],
-              function ($, nfCommon, nfCountersTable, nfErrorHandler, nfStorage) {
-                  return (nf.Counters = factory($, nfCommon, nfCountersTable, nfErrorHandler, nfStorage));
-              });
-      } 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 ($, nfCommon, nfCountersTable, nfErrorHandler, nfStorage) {
-      'use strict';
-    
-        $(document).ready(function () {
-            // initialize the counters page
-          nfCounters.init();
-        });
-    
-        /**
-         * Configuration object used to hold a number of configuration items.
-         */
-        var config = {
-            urls: {
-                banners: '../nifi-api/flow/banners',
-                about: '../nifi-api/flow/about',
-                currentUser: '../nifi-api/flow/current-user'
-            }
-        };
-    
-        /**
-         * Loads the current user.
-         */
-        var loadCurrentUser = function () {
-            return $.ajax({
-                type: 'GET',
-                url: config.urls.currentUser,
-                dataType: 'json'
-            }).done(function (currentUser) {
-              nfCommon.setCurrentUser(currentUser);
-    
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Initializes the counters page.
-         */
-        var initializeCountersPage = function () {
-            // define mouse over event for the refresh button
-            $('#refresh-button').click(function () {
-              nfCountersTable.loadCountersTable();
-            });
-    
-            // 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 (nfCommon.isDefinedAndNotNull(response.banners)) {
-                          if (nfCommon.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('counters');
-                            }
-    
-                          if (nfCommon.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('counters');
-                            }
-                        }
-    
-                        deferred.resolve();
-                    }).fail(function (xhr, status, error) {
-                      nfErrorHandler.handleAjaxError(xhr, status, error);
-                        deferred.reject();
-                    });
-                } else {
-                    deferred.resolve();
-                }
-            }).promise();
-        };
-    
-      var nfCounters = {
-            /**
-             * Initializes the counters page.
-             */
-            init: function () {
-              nfStorage.init();
-    
-                // load the current user
-                loadCurrentUser().done(function () {
-                    // create the counters table
-                  nfCountersTable.init();
-    
-                    // load the table
-                  nfCountersTable.loadCountersTable().done(function () {
-                        // once the table is initialized, finish initializing the page
-                        initializeCountersPage().done(function () {
-                            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'
-                                    });
-    
-                                    $('#counters').css('margin', 40);
-                                    $('#counters-table').css('bottom', 127);
-                                    $('#counters-refresh-container').css('margin', 40);
-                                }
-    
-                                // configure the initial grid height
-                              nfCountersTable.resetTableSize();
-                            };
-    
-                            // get the about details
-                            $.ajax({
-                                type: 'GET',
-                                url: config.urls.about,
-                                dataType: 'json'
-                            }).done(function (response) {
-                                var aboutDetails = response.about;
-                                var countersTitle = nf._.msg('nf-about')+ nf._.msg('nf-counters.Counters');
-    
-                                // set the document title and the about title
-                                document.title = countersTitle;
-                                $('#counters-header-text').text(countersTitle);
-    
-                                // set the initial size
-                                setBodySize();
-                          }).fail(nfErrorHandler.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) {
-                                            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) {
-                                  nfCommon.toggleScrollable(tabsContent.get(0));
-                                });
-                            });
-                        });
-                    });
-                });
-            }
-        };
-    
-      return nfCounters;
-  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
deleted file mode 100644
index 33019c747be2..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
+++ /dev/null
@@ -1,1884 +0,0 @@
-
-nf._ = (function () {
-    var locale = "cn";
-    var cn = {
-    		"nf-actions.UpdateResource": "更新来源",
-            "nf-actions.Refreshing": "正在刷新",
-            "nf-actions.RemoteGroupProcess": "远程处理组",
-            "nf-actions.NoTargetURIDefined": "目标URI未定义.",
-            "nf-actions.Header1": "激活组件",
-            "nf-actions.Message1": "未选定合格的组件，请选择合格组件进行激活并保证组件当前未被运行.",
-            "nf-actions.Header2": "下线组件",
-            "nf-actions.Message2": "未选定合格的组件，请选择合格组件进行下线并保证组件当前未被运行.",
-            "nf-actions.Header3": "启动组件",
-            "nf-actions.Message3": "未选定合格的组件，请选择合格组件启动并组件当前未被运行.",
-            "nf-actions.Header4": "停止组件",
-            "nf-actions.Message4": "未选定合格的组件，请选择要停止的组件.",
-            "nf-actions.Header5": "重新加载",
-            "nf-actions.Message5": "未选定合格的组件，请选择要删除的组件.",
-            "nf-actions.Header6": "粘贴错误",
-            "nf-actions.EmptyQueue": "清空队列",
-            "nf-actions.Message6": "是否确定要清空队列？所有流文件将被移除.",
-            "nf-actions.Cancel": "取消",
-            "nf-actions.Empty": "空",
-            "nf-actions.Stop": "停止",
-            "nf-actions.Message7": " 被从队列里移除.",
-            "nf-actions.Message8": "没有流文件被移除.",
-            "nf-actions.Message9": "当前选择不能创建模版.",
-            "nf-actions.CreateTemplate": "创建模板",
-            "nf-actions.Create": "创建",
-            "nf-actions.Template": "模版 '",
-            "nf-actions.Message11": "' 成功创建.",
-            "nf-actions.Message12": "试图复制粘贴时发生错误.",
-            "nf-actions.Message13": "模板名称不能为空.",
-            "nf-actions.Message14": "删除请求百分比完成",
-            "nf-actions.Message15": "流文件",
-            "nf-actions.Message16": "在",
-            "nf-actions.Message17": "之外",
-            "nf-actions.Message18": "从队列中移除.",
-            "nf-actions.Message19": "没有引用组件.",
-            "nf-canvas-graph-controls-controller.ProcessGroup": "处理器组",
-            "nf-canvas-graph-controls-controller.Processor": "处理器",
-            "nf-canvas-graph-controls-controller.InputPort": "输入端口",
-            "nf-canvas-graph-controls-controller.OutputPort": "输出端口",
-            "nf-canvas-graph-controls-controller.RemoteProcessGroup": "远程进程组",
-            "nf-canvas-graph-controls-controller.Funnel": "漏斗",
-            "nf-canvas-graph-controls-controller.Label": "标签",
-            "nf-canvas-graph-controls-controller.Connection": "连接",
-            "nf-canvas-graph-controls-controller.MultipleSelected": "已选择多个",
-    		"nf-canvas-global-menu-controller.About": "关于数据流",
-    		"nf-canvas-global-menu-controller.OK": "确认",
-    		"nf-canvas-operate-controller.SUCCESS": "成功",
-    		"nf-canvas-operate-controller.SuccessContent": "模板成功导入.",
-    		"nf-canvas-operate-controller.Upload": "上传模板",
-    		"nf-canvas-operate-controller.ButtonUpload": "上传模板",
-    		"nf-canvas-operate-controller.UploadTemplate": "没有选定模板.请在浏览器中选择一个模板.",
-    		"nf-canvas-operate-controller.Cancel": "取消",
-    		"nf-canvas-operate-controller.ChangeColor": "改变颜色",
-    		"nf-canvas-operate-controller.Apply": "应用",
-    		"nf-canvas-operate-controller.Error": "错误",
-    		"nf-canvas-operate-controller.CreateTemplate": "创建模板",
-    		"nf-canvas-operate-controller.Message1": "无法导入模板. 请检查日志中的错误.",
-            "nf-canvas-flow-status.Processors": "处理器",
-            "nf-canvas-flow-status.ProcessGroups": "处理组",
-            "nf-canvas-flow-status-controller.Processors": "处理器",
-            "nf-canvas-flow-status-controller.ProcessGroups": "处理组",
-            "nf-canvas-flow-status-controller.RemoteProcessGroups": "远程处理组",
-            "nf-canvas-flow-status-controller.Connection": "连接",
-            "nf-canvas-flow-status-controller.InputPorts": "输入端口",
-            "nf-canvas-flow-status-controller.OutputPorts": "输出端口",
-            "nf-canvas-flow-status-controller.Funnel": "漏斗",
-            "nf-canvas-flow-status-controller.no-matches": "没有符合查询要求的结果",
-            "nf-canvas-toobbar.Start": "启动",
-            "nf-canvas-toobbar.Stop": "停止",
-            "nf-canvas-toobbar.Copy": "复制",
-            "nf-canvas-toobbar.Paste": "粘贴",
-            "nf-canvas-toobbar.Group": "组",
-            "nf-canvas-toobbar.Enable": "有效",
-            "nf-canvas-toobbar.Disable": "无效",
-            "nf-canvas-toobbar.CreateTemplate": "创建模版",
-            "nf-canvas-toobbar.ChangeColor": "改变颜色",
-            "nf-canvas-toobbar.Delete": "删除",        
-            "nf-canvas-header.OK": "确定",
-            "nf-canvas-header.CreateTemplate": "创建模版",
-            "nf-canvas-header.Fill": "填写",
-            "nf-canvas-header.Apply": "适用",
-            "nf-canvas-header.Cancel": "取消",
-    		"nf-group-component.AddProcessGroup": "添加处理组",
-    		"nf-group-component.Add": "添加",
-    		"nf-group-component.Cancel": "取消",
-    		"nf-input-port-component.AddPort": "添加端口",
-    		"nf-input-port-component.Add": "添加",
-    		"nf-input-port-component.Cancel": "取消",
-    		"nf-input-port-component.new-port-type": "输入",
-    		"nf-output-port-component.Add": "添加",
-    		"nf-output-port-component.Cancel": "取消",
-    		"nf-output-port-component.new-port-type": "输出",
-    		"nf-processor-component.AddProcessor": "添加处理器",
-    		"nf-processor-component.AddProcessorContent": "创建该类型的处理器必须被选择.",
-    		"nf-processor-component.Add": "添加",
-    		"nf-processor-component.Cancel": "取消",
-    		"nf-processor-component.Type": "类型",
-    		"nf-processor-component.Tags": "标签",
-    		"nf-processor-component.NoDescriptionSpecified": "未指定说明",
-    		"nf-remote-process-group-component.ConfigurationError": "配置错误",
-    		"nf-remote-process-group-component.AddRemoteProcessGroup": "添加远程处理组",
-    		"nf-remote-process-group-component.Add": "添加",
-    		"nf-remote-process-group-component.Cancel": "取消",
-    		"nf-template-component.AddTemplate": "添加模板",
-    		"nf-template-component.Add": "添加",
-    		"nf-template-component.Cancel": "取消",
-    		"nf-template-component.InstantiateTemplate": "实例化模板",
-    		"nf-template-component.InstantiateTemplateContent": "数据流中没有被加载的模板.",
-            "nf-canvas-header.Message": "不能刷新当前组.",
-            "nf-canvas-header.components.AddGroup": "添加处理组",
-            "nf-canvas-header.components.AddButton": "添加",
-            "nf-canvas-header.components.CancelButton": "取消",
-            "nf-canvas-toolbox.Input": "输入",
-            "nf-canvas-toolbox.OutPut": "输出",        
-            "nf-canvas-toolbox.Filter": "过滤器",
-            "nf-canvas-toolbox.Processor": "处理器",
-            "nf-canvas-toolbox.InputPort": "输入端口",
-            "nf-canvas-toolbox.OutputPort": "输出端口",
-            "nf-canvas-toolbox.ProcessGroup": "处理组",
-            "nf-canvas-toolbox.RemoteProcessGroup": "远程处理组",
-            "nf-canvas-toolbox.Connection": "连接",
-            "nf-canvas-toolbox.Funnel": "漏斗",
-            "nf-canvas-toolbox.Template": "模版",
-            "nf-canvas-toolbox.Label": "标签",
-            "nf-canvas-toolbox.Add": "添加",
-            "nf-canvas-toolbox.Cancel": "取消",
-            "nf-canvas-toolbox.Instantiate Template": "实例化模版",
-            "nf-canvas-toolbox.Message": "模版尚未加载进入数据流系统.",
-            "nf-canvas-toolbox.Type": "类型",
-            "nf-canvas-toolbox.Tags": "标签",
-            "nf-canvas-toolbox.Message1": "没有指定描述",
-            "nf-canvas-toolbox.AddProcessor": "添加处理器",
-            "nf-canvas-toolbox.AddPort": "添加端口",
-            "nf-canvas-toolbox.AddProcessGroup": "添加处理过程组",
-            "nf-canvas-toolbox.AddRemoteProcessGroup": "添加远程处理过程组",
-            "nf-canvas-utils.Header1": "处理组",
-            "nf-canvas-utils.Message1": "无法加载特定组件的组.",
-            "nf-canvas-utils.Message2": "无法找到特定组件.",
-            "nf-canvas-utils.Message3": "无法进入选定组.",
-            "nf-canvas-utils.Message4": "不能把端口移出根组",
-            "nf-canvas-utils.Message5": "这些端口当前与组外有连接: <b>",
-            "nf-canvas-utils.Message6": "这些端口在目标处理过程组里已经存在: <b>",
-            "nf-canvas-utils.Message7": "组件已经在最顶层组",
-            "nf-canvas.Browser": "不支持的浏览器",
-            "nf-canvas.Message1": "流程图需要用SVG显示.请选择支持SVG的浏览器.",
-            "nf-canvas.ClusterConn": "集群连接",
-            "nf-canvas.Message2": "此节点当前未连接到集群.对此处对数据流进行的任何修改都不会在群集中复制.",
-            "nf-canvas.Message3": "此节点刚刚加入群集.对此处对数据流的任何修改都将在群集中进行复制.",
-            "nf-component-state.Header1": "组件状态",
-            "nf-component-state.Button1": "关闭",
-            "nf-component-state.Content1": "该组件没有需要清除的状态",
-    		"nf-component-state.Message1": "组件状态只能在组件没有活动运行时清除",
-    		"nf-component-state.Key": "键",
-    		"nf-component-state.Value": "值",
-    		"nf-component-state.Scope": "范围",
-    		"nf-connection-configuration.ConnectionConfiguration": "连接配置",
-            "nf-connection-configuration.Add": "添加",
-            "nf-connection-configuration.Message0": "连接必须至少选择一个关联.",
-            "nf-connection-configuration.Cancel": "取消",
-            "nf-connection-configuration.Message1": "\\' 不支持任何关联.",
-            "nf-connection-configuration.Message2": "\\' 无任何输出端口.",
-            "nf-connection-configuration.Message4": "\\' 无任何输入端口.",
-    		"nf-connection-configuration.Message5": "未授权任何输出端口 \\'",
-            "nf-connection-configuration.Message6": "配置错误",
-            "nf-connection-configuration.ConfigureConnection": "配制连接",
-            "nf-connection-configuration.Detail": "详情",
-            "nf-connection-configuration.Setting": "设置",
-            "nf-connection-configuration.CreateConnection": "创建连接",
-            "nf-connection-configuration.Apply": "应用",
-            "nf-connection-configuration.Message7": "连接至少要选择一个关联.",
-    		"nf-connection.Connection": "连接",
-            "nf-connection.Message1": "循环连接要至少有两个拐点.",
-            "nf-connection.From": "从",
-            "nf-connection.To": "到",
-            "nf-connection.Name": "名称",
-            "nf-connection.Queued": "排队",
-            "nf-connection.FlowFilesOlder": "使流文件超过",
-            "nf-context-menu.RefreshStatus": "刷新状态",
-            "nf-context-menu.LeaveGroup": "离开组",
-            "nf-context-menu.Configure": "配置",
-            "nf-context-menu.ViewConfiguration": "查看配置",
-            "nf-context-menu.EnterGroup": "进入组",
-            "nf-context-menu.Start": "开始",
-            "nf-context-menu.Stop": "停止",
-            "nf-context-menu.canEnable": "开启",
-            "nf-context-menu.canDisable": "禁用",
-            "nf-context-menu.canGroup": "组",
-            "nf-context-menu.canManagePolicies": "访问策略",
-            "nf-context-menu.canAlign1": "垂直对齐",
-            "nf-context-menu.canAlign2": "水平对齐",
-            "nf-context-menu.canUploadTemplate": "上传模板",
-            "nf-context-menu.canCreateTemplate": "创建模板",
-            "nf-context-menu.RemotePorts": "远程端口",
-            "nf-context-menu.EnableTransmission": "使转换有效",
-            "nf-context-menu.DisableTransmission": "使转换无效",
-    		"nf-context-menu.StatsHistory": "历史状态",
-    		"nf-context-menu.ViewState": "查看状态",
-            "nf-context-menu.Stats": "状态",
-            "nf-context-menu.DataProvenance": "数据来源",
-            "nf-context-menu.BringFront": "带到前端",
-            "nf-context-menu.GoToSource": "进入源",
-            "nf-context-menu.GoToDestination": "进入目标",
-            "nf-context-menu.UpstreamConnections": "上游连接",
-            "nf-context-menu.DownstreamConnections": "下游连接",
-            "nf-context-menu.Usage": "用途",
-            "nf-context-menu.Refresh": "刷新",
-            "nf-context-menu.GoTo": "进入",
-            "nf-context-menu.ChangeColor": "变换颜色",
-            "nf-context-menu.CenterInView": "视图居中",
-            "nf-context-menu.Copy": "复制",
-            "nf-context-menu.Paste": "粘贴",
-            "nf-context-menu.MoveParentGroup": "移动到父亲组",
-    		"nf-context-menu.QueueList": "队列列表",
-            "nf-context-menu.EmptyQueue": "清空队列",
-            "nf-context-menu.Delete": "删除",
-            "nf-controller-service.ConfigurationError": "配置错误",
-            "nf-controller-service.Cancel": "取消",
-            "nf-controller-service.Close": "关闭",
-            "nf-controller-service.Message1": "使无效的步骤",
-            "nf-controller-service.ActionCanceled": "动作取消",
-            "nf-controller-service.Message2": "请求有效的动作被取消，但是部分请求可能已经被执行. 请验证服务关联的所有组件.",
-            "nf-controller-service.Message3": "有效步骤 ",
-            "nf-controller-service.Message4": "动作取消",
-            "nf-controller-service.Message5": "请求无效的动作被取消，但是部分请求可能已经被执行. 请验证服务关联的所有组件..",
-            "nf-controller-service.Message6": "保存设置?",
-            "nf-controller-service.Settings": "配置",
-            "nf-controller-service.Properties": "属性",
-            "nf-controller-service.Comments": "评论",
-            "nf-controller-service.Message7": "配置控制器服务",
-            "nf-controller-service.Message8": "使控制器服务无效",
-            "nf-controller-service.Disable": "无效",
-            "nf-controller-service.ServiceOnle": "仅服务",
-            "nf-controller-service.Message9": "仅有效当前控制器服务",
-            "nf-controller-service.Message10": "服务和相关组件",
-            "nf-controller-service.Message11": "使控制器服务有效，并使关联组件有效/启动",
-            "nf-controller-service.Message12": "使控制服务器有效",
-            "nf-controller-service.Enable": "有效",
-            "nf-controller-service.Apply": "应用",
-            "nf-controller-service.Advanced": "高级",
-            "nf-controller-service.Message13": "在进入高级设置前保存变更?",
-            "nf-controller-service.Ok": "确定",
-    		"nf-controller-service.ControllerService": "控制器服务",
-    		"nf-controller-service.Message14": "由于未授权的引用组件，无法禁用.",
-    		"nf-controller-service.Message15": "由于未授权的引用组件，无法启用.",
-    		"nf-controller-service.Save": "保存",
-    		"nf-controller-service.Message16": "在进入控制器服务前保存变更?",
-            "nf-controller-services.Add": "添加",
-    		"nf-controller-services.ControllerService": "控制器服务",
-    		"nf-controller-services.Message14": "必须选择要创建的控制器服务类型.",
-    		"nf-controller-services.AddControllerService": "添加控制器服务",
-    		"nf-controller-services.Invalid": "失效",
-    		"nf-controller-services.Disabled": "已禁用",
-    		"nf-controller-services.Disabling": "禁用中",
-    		"nf-controller-services.Enabled": "已启用",
-    		"nf-controller-services.Enabling": "启用中",
-    		"nf-controller-services.toolTip": "基于存在的公告进行排序",
-    		"nf-controller-services.Name": "名称",
-    		"nf-controller-services.Type": "类型",
-    		"nf-controller-services.Tags": "标签",
-    		"nf-controller-services.State": "状态",
-    		"nf-controller-services.ProcessGroup": "处理组",
-    		"nf-controller-services.type-description": "未指定说明",
-    		"nf-controller-services.viewDtails": "查看详情",
-    		"nf-controller-services.usage": "用法",
-    		"nf-controller-services.disable": "禁用",
-    		"nf-controller-services.edit": "编辑",
-    		"nf-controller-services.enable": "启用",
-    		"nf-controller-services.viewstate": "查看状态",
-    		"nf-controller-services.remove": "移除",
-    		"nf-controller-services.acesspolicies": "访问策略",
-    		"nf-custom-ui.AdvancedConfiguration": "高级配置",
-    		"nf-custom-ui.Message1": "无法生成访问高级访问配置对话框的访问令牌.",
-    		"nf-draggable.ComponentPosition": "组件位置",
-    		"nf-draggable.Message1": "未授权修改目的地组.",
-    		"nf-draggable.Message2": "选择修改的每个组件都必须被授权.",
-            "nf-go-to.Close": "关闭",
-            "nf-go-to.NoDownstreamComponents": "无下游组件",
-            "nf-go-to.NoUpstreamComponents": "无上游组件",
-            "nf-go-to.DownstreamConnections": "下游连接",
-            "nf-go-to.UpstreamConnections": "上游连接",
-            "nf-go-to.Message1": "无上游连接",
-            "nf-go-to.Message2": "无下游连接", 
-            "nf-go-to.Funnel": "漏斗",
-            "nf-label-configuration.ConfigureLabel": "配置标签",
-    		"nf-label-configuration.Apply": "应用",
-    		"nf-label-configuration.Cancel": "取消",
-    		"nf-policy-management.ViewUserInterface": "查看用户接口",
-    		"nf-policy-management.AcessController": "访问控制器",
-    		"nf-policy-management.QueryProvenance": "查询来源",
-    		"nf-policy-management.AcessPolicies": "访问所有策略",
-    		"nf-policy-management.AcessUser": "访问用户/用户组",
-    		"nf-policy-management.retrieve": "检索站点到站点的详情信息",
-    		"nf-policy-management.diagnostics": "查看系统分析",
-    		"nf-policy-management.proxy": "代理用户请求",
-    		"nf-policy-management.counters": "访问计数器",
-    		"nf-policy-management.ViewComponent": "查看组件",
-    		"nf-policy-management.ModifyComponent": "修改组件",
-    		"nf-policy-management.ViewData": "查看数据",
-    		"nf-policy-management.ModifyData": "修改数据",
-    		"nf-policy-management.ReceiveData": "通过站点到站点接收数据",
-    		"nf-policy-management.SendData": "通过站点到站点发送数据",
-    		"nf-policy-management.ViewPolicies": "查看策略",
-    		"nf-policy-management.ModifyPolicies": "修改策略",
-    		"nf-policy-management.Searchusers": "搜索用户",
-    		"nf-policy-management.Ok": "确定",
-    		"nf-policy-management.Add": "添加",
-    		"nf-policy-management.UserSearch": "用户搜索",
-    		"nf-policy-management.Message1": "没有匹配的用户\\'",
-    		"nf-policy-management.Message2": "多个用户匹配\\'",
-    		"nf-policy-management.Cancel": "取消",
-    		"nf-policy-management.UpdatePolicy": "更新策略",
-    		"nf-policy-management.DeletePolicy": "删除策略",
-    		"nf-policy-management.Message3": "删除\\'",
-    		"nf-policy-management.Message4": "\\'从这个策略？",
-    		"nf-policy-management.Message5": "确实要删除此策略吗?",
-    		"nf-policy-management.Message6": "没有选择策略",
-    		"nf-policy-management.Message7": "允许用户查看用户接口",
-    		"nf-policy-management.Message8": "允许用户查看/修改控制器，包括集群中的报告任务，控制器服务和节点",
-    		"nf-policy-management.Message9": "允许用户提交来源搜索并请求事件继承",
-    		"nf-policy-management.Message10": "允许用户查看/修改所有组件的策略",
-    		"nf-policy-management.Message11": "允许用户查看/修改用户组",
-    		"nf-policy-management.Message12": "允许其他NiFi实例检索此数据流的“站点到站点”详情信息",
-    		"nf-policy-management.Message13": "允许用户查看系统分析",
-    		"nf-policy-management.Message14": "允许代理计算机代表他人发送请求",
-    		"nf-policy-management.Message15": "允许用户查看/修改计数器",
-    		"nf-policy-management.Message16": "允许用户查看组件配置详情信息",
-    		"nf-policy-management.Message17": "允许用户修改组件配置详情信息",
-    		"nf-policy-management.Message18": "允许用户通过出站连接中的源数据和流文件队列查看此组件的元数据和内容",
-    		"nf-policy-management.Message19": "允许用户在出站连接中清空流文件队列并提交重放",
-    		"nf-policy-management.Message20": "允许此端口从这些数据流实例接收数据",
-    		"nf-policy-management.Message21": "允许此端口向这些数据流实例发送数据",
-    		"nf-policy-management.Message22": "允许用户查看可以查看/修改此组件的用户列表",
-    		"nf-policy-management.Message23": "允许用户修改可以查看/修改此组件的用户列表",
-    		"nf-policy-management.Message24": "通过删除此策略，此组件的权限将恢复为继承的策略（如果适用）.",
-    		"nf-policy-management.Text1": "显示从中继承的有效策略",
-    		"nf-policy-management.Text2": "没有组件特定的管理员.",
-    		"nf-policy-management.Text3": "未授权访问指定资源的策略.",
-    		"nf-policy-management.Text4": "未授权查看该策略.",
-    		"nf-policy-management.Text5": "没有指定资源的策略.",
-    		"nf-policy-management.Text6": "未授权访问指定资源的策略.",
-    		"nf-policy-management.Write": "写",
-    		"nf-policy-management.Read": "读",
-    		"nf-policy-management.View": "查看",
-    		"nf-policy-management.Modify": "修改",
-    		"nf-policy-management.AllPolicies": "所有策略",
-    		"nf-policy-management.Controller": "这个控制器",
-    		"nf-policy-management.ProcessorGroup": "处理组",
-    		"nf-policy-management.reporting-tasks": "报告任务",
-    		"nf-policy-management.NoUserSearch": "没有匹配的用户",
-    		"nf-policy-management.Remove": "移除",
-            "nf-port-configuration.ConfigurePort": "配置端口",
-            "nf-port-configuration.Apply": "应用",
-            "nf-port-configuration.ConfigurationError": "配置错误",
-            "nf-port-configuration.Cancel": "取消",
-            "nf-port-details.PortDetails": "端口详情",
-            "nf-port-details.OK": "确定",
-            "nf-process-group-configuration.ConfigureProcessGroup": "配置处理组",
-            "nf-process-group-configuration.Apply": "应用",
-            "nf-process-group-configuration.Cancel": "取消",
-            "nf-process-group-configuration.General": "通用",
-            "nf-process-group-configuration.ControllerService": "控制器服务",
-            "nf-process-group-details.ProcessGroupDetails": "处理组详情",
-            "nf-process-group-details.Ok": "应用",
-            "nf-process-group.Message1": "无评价内容",
-            "nf-process-group.Queued": "队列中",
-            "nf-process-group.In": "输入",
-            "nf-process-group.ReadWrite": "读/写",
-            "nf-process-group.Out": "输出",
-            "nf-process-group.5min": "(5 分钟)",
-            "nf-process-group.Message1": "没有指定的评论",
-            "nf-processor-configuration.TimerDriven": "时间驱动",
-            "nf-processor-configuration.Message1": "处理器将按照计划任务时间间隔执行.",
-            "nf-processor-configuration.EventDriven": "事件驱动",
-            "nf-processor-configuration.Message2": "处理器将按照事件驱动执行 (例如 流文件进入一个队列). 计划任务策略是试探性的.",
-            "nf-processor-configuration.OnPrimaryNode": "在主节点",
-            "nf-processor-configuration.Message3": "处理器将在主节点按照设置间隔时间被执行.",
-            "nf-processor-configuration.CronDriven": "CRON驱动",
-            "nf-processor-configuration.Message5": "处理器将按照CRON格式指定的时间被执行.",
-    		"nf-processor-configuration.Error1": "并发任务必须是整数值",
-    		"nf-processor-configuration.Error2": "必须指定运行计划",
-    		"nf-processor-configuration.Error3": "必须指定处罚持续时间",
-    		"nf-processor-configuration.Error4": "必须指定产量持续时间",
-            "nf-processor-configuration.ConfigurationError": "配置错误",
-            "nf-processor-configuration.Message6": "保存变更在进入控制器服务之前?",
-            "nf-processor-configuration.Settings": "设置",
-            "nf-processor-configuration.Scheduling": "执行计划",
-            "nf-processor-configuration.Properties": "属性",
-            "nf-processor-configuration.Comments": "评论",
-            "nf-processor-configuration.ConfigureProcessor": "配置处理器",
-            "nf-processor-configuration.Debug": "调试",
-            "nf-processor-configuration.Info": "信息",
-            "nf-processor-configuration.Warn": "警告",
-            "nf-processor-configuration.Error": "错误",
-            "nf-processor-configuration.Apply": "应用",
-            "nf-processor-configuration.Cancel": "取消",
-            "nf-processor-configuration.Advanced": "高级",
-            "nf-processor-configuration.Message7": "保存变更在进入高级设置?",
-            "nf-processor-configuration.ThisProcessorHasNoRelationships": "这个处理器没有关系.",
-            "nf-processor-configuration.ViewDetails": "查看详情",
-            "nf-processor-configuration.Provenance": "来源",
-            "nf-processor.In": "输入",
-            "nf-processor.ReadWrite": "读/写",
-            "nf-processor.Out": "输出",
-            "nf-processor.TasksTime": "任务/时间",
-            "nf-processor.5min-1": "5 分钟",
-            "nf-processor.5min": "(5 分钟)",
-            "nf-registration.Thanks": "谢谢",
-            "nf-registration.Message1": "您的请求将被快速执行.",
-            "nf-queue-listing.QueueListing": "队列列表",
-    		"nf-queue-listing.Message1": "无法生成用于下载内容的访问令牌.",
-    		"nf-queue-listing.Message2": "无法生成用于查看内容的访问令牌.",
-    		"nf-queue-listing.Stop": "停止",
-    		"nf-queue-listing.Message3": "队列没有流文件.",
-    		"nf-queue-listing.FlowFile": "流文件",
-    		"nf-queue-listing.Ok": "确定",
-    		"nf-queue-listing.Message4": "此队列的源和目标当前正在运行. 这个列表可能不再准确.",
-    		"nf-queue-listing.Message5": "此队列的源当前正在运行. 此商家信息可能不再准确无误.",
-    		"nf-queue-listing.Message6": "此队列的目标正在运行. 此商家信息可能不再准确无误.",
-    		"nf-queue-listing.NoValueSet": "未设置值",
-    		"nf-queue-listing.Yes": "是",
-    		"nf-queue-listing.No": "否",
-    		"nf-queue-listing.Position": "位置",
-    		"nf-queue-listing.FileName": "文件名",
-    		"nf-queue-listing.FileSize": "文件大小",
-    		"nf-queue-listing.queuedDuration": "排队持续时间",
-    		"nf-queue-listing.lineageDuration": "继承时间",
-    		"nf-queue-listing.penalized": "处罚",
-    		"nf-queue-listing.node": "节点",
-    		"nf-queue-listing.Bytes": " 字节",
-    		"nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "配置远程处理组",
-            "nf-remote-process-group-configuration.Apply": "应用",
-            "nf-remote-process-group-configuration.ConfigurationError": "配置错误",
-            "nf-remote-process-group-configuration.Cancel": "取消",
-    		"nf-remote-process-group-configuration.Message5": "远程进程组配置",
-            "nf-remote-process-group-details.RemoteProcessGroupDetails": "远程处理组详情",
-            "nf-remote-process-group-details.Ok": "确定",
-            "nf-remote-process-group-ports.ConfigureRemotePort": "配置远程端口",
-            "nf-remote-process-group-ports.Apply": "应用",
-            "nf-remote-process-group-ports.ConfigurationError": "配置错误",
-            "nf-remote-process-group-ports.Message1": "当前任务要求整数值.",
-            "nf-remote-process-group-ports.Cancel": "取消",
-            "nf-remote-process-group-ports.RemoteProcessGroupPorts": "远程处理组端口",
-            "nf-remote-process-group-ports.Close": "关闭",
-            "nf-remote-process-group-ports.Message2": "没有描述.",
-    		"nf-remote-process-group-ports.Message3": "此端口已删除.",
-    		"nf-remote-process-group-ports.Message4": "应同时为此端口计划的任务数.",
-    		"nf-remote-process-group-ports.transmissionSwitch": "切换端口传输",
-    		"nf-remote-process-group-ports.description": "未指定说明.",
-            "nf-remote-process-group.Message1": "没有评论",
-            "nf-remote-process-group.Sent": "发送",
-            "nf-remote-process-group.Received": "接收",
-            "nf-remote-process-group.5min": "(5 分钟)",
-            "nf-remote-process-group.Message2": "Site-to-Site 是安全的.",
-            "nf-remote-process-group.Message3": "Site-to-Site 是非安全的.",
-            "nf-remote-process-group.Message4": "远程流不在当前运行",
-            "nf-reporting-task.ReportingTask": "报告任务",
-    		"nf-reporting-task.Save": "保存",
-            "nf-reporting-task.ConfigurationError": "配置错误",
-            "nf-reporting-task.Message1": "进入控制器服务前保存设置?",
-            "nf-reporting-task.Settings": "设置",
-            "nf-reporting-task.Properties": "属性",
-            "nf-reporting-task.Comments": "评论",
-            "nf-reporting-task.ConfigureReportingTask": "配置报告任务",
-            "nf-reporting-task.Node": "节点",
-            "nf-reporting-task.ClusterManager": "集群管理者",
-            "nf-reporting-task.TimerDriven": "时间驱动",
-            "nf-reporting-task.Message2": "报告任务将按照指定时间间隔执行.",
-            "nf-reporting-task.CRONDriven": "CRON驱动",
-            "nf-reporting-task.Message3": "报告任务将按照CRON配置执行.",
-            "nf-reporting-task.Apply": "应用",
-            "nf-reporting-task.Cancel": "取消",
-            "nf-reporting-task.Advanced": "高级",
-            "nf-reporting-task.Message4": "在进入高级设置前保存变更?",
-    		"nf-reporting-task.Ok": "确定",
-            "nf-search.Search": "检索",
-            "nf-secure-port-configuration": "设置",
-            "nf-secure-port-configuration.AccessControl": "权限控制",
-            "nf-secure-port-configuration.ConfigureSecurePort": "配置安全端口",
-            "nf-secure-port-configuration.Apply": "应用",
-            "nf-secure-port-configuration.Cancel": "取消",
-            "nf-secure-port-configuration.InputPort": "输入端口",
-            "nf-secure-port-configuration.OutputPort": "输出端口",
-            "nf-secure-port-details.Settings": "设置",
-            "nf-secure-port-details.AccessControl": "权限控制",
-            "nf-secure-port-details.SecurePortDetails": "安全端口详情",
-            "nf-secure-port-details.Ok": "确定",
-            "nf-settings.Filter": "过滤器",
-            "nf-settings.Message1": "一个流压缩包被成功创建.",
-            "nf-settings.Message2": "设置被成功适用.",
-            "nf-settings.Message3": "控制器服务的类型必须被选定.",
-            "nf-settings.Text": "节点",
-            "nf-settings.ClusterManager": "集群管理员",
-            "nf-settings.Message4": "控制器服务在节点可使用.",
-            "nf-settings.Message5": "控制器服务在集群管理员可使用.",
-            "nf-settings.Message6": "无描述信息",
-            "nf-settings.Message7": "添加控制器服务",
-            "nf-settings.Add": "添加",
-            "nf-settings.Cancel": "取消",
-            "nf-settings.Node": "节点",
-            "nf-settings": "集群管理员",
-            "nf-settings.ViewDetail": "查看详情",
-            "nf-settings.Disable": "无效",
-            "nf-settings.Enable": "有效",
-            "nf-settings.Remove": "移除",
-            "nf-settings.Usage": "用法",
-            "nf-settings.Name": "名称",
-            "nf-settings.State": "状态",
-            "nf-settings.Availability": "可以获得",
-            "nf-settings.Message8": "报告任务仅节点可获得.",
-            "nf-settings.Message9": "报告任务集群管理者有权取得.",
-            "nf-settings.Type": "类型",
-            "nf-settings.Tags": "标签",
-            "nf-settings.Message10": "无指定的描述",
-            "nf-settings.Message11": "添加报告任务",
-            "nf-settings.ViewDetails": "查看详情",
-            "nf-settings.Stop": "停止",
-            "nf-settings.Edit": "编辑",
-            "nf-settings.Start": "开始",
-            "nf-settings.RunStatus": "运行状态",
-            "nf-settings.General": "通用",
-            "nf-settings.ControllerServices": "控制器服务",
-            "nf-settings.ReportingTasks": "报告任务",
-            "nf-settings.Message12": "创建一个新的控制器服务",
-            "nf-settings.Message13": "创建一个新的报告任务",
-            "nf-settings.Settings": " 设置",
-            "nf-settings.ViewState": "查看状态",
-            "nf-settings.AccessPolicies": "访问策略",
-            "nf-settings.Invalid": "无效",
-            "nf-settings.Stopped": "已停止",
-            "nf-settings.Running": "运行中",
-            "nf-settings.Disabled": "禁用",
-            "nf-about": "数据流",
-            "nf-bulletin-board.defaultFilterText": "过滤",
-            "nf-bulletin-board.ByMessage": "通过信息过滤",
-            "nf-bulletin-board.ByName": "通过名字过滤",
-            "nf-bulletin-board.ById": "通过识别符过滤",
-            "nf-bulletin-board.ByGroupId": "通过组识别符过滤",
-            "nf-bulletin-board.Message1": "过滤 ",
-            "nf-bulletin-board.Message2": " 匹配 \\\\'",
-            "nf-bulletin-board.Message3": "自动刷新开始",
-            "nf-bulletin-board.Message4": "自动刷新停止", 
-            "nf-bulletin-board.Message5": "移除过滤器",
-            "nf-bulletin-board.BulletinBoard": "公告板",
-            "nf-cluster.Cluster": " 集群",
-            "nf-cluster-table.Filter": "用过滤器",
-            "nf-cluster-table.Message1": "连接 \\'",
-            "nf-cluster-table.Message2": "\\' 到这个集群?",
-            "nf-cluster-table.Message3": "断开 \\'",
-            "nf-cluster-table.Message4": "\\' 从这个集群?",
-            "nf-cluster-table.Message5": "移除 \\'",
-            "nf-cluster-table.Message6": "\\' 从这个集群?",
-            "nf-cluster-table.NodeDetails": "节点详情",
-            "nf-cluster-table.Ok": "确定",
-            "nf-cluster-table.ByAddress": "通过地址过滤",
-            "nf-cluster-table.ByStatus": "通过状态过滤",
-            "nf-cluster-table.ViewDetails": "查看详情",
-            "nf-cluster-table.Node Address": "节点地址",
-            "nf-cluster-table.ActiveThreadCount": "运行的线程数",
-            "nf-cluster-table.Size": "大小",
-            "nf-cluster-table.Queue": "排队",                
-            "nf-cluster-table.Status": "状态",
-            "nf-cluster-table.Uptime": "运行时间",
-            "nf-cluster-table.LastHeartbeat": "最后心跳",
-            "nf-cluster-table.Connect": "连接",
-            "nf-cluster-table.Remove": "移除",
-            "nf-cluster-table.Disconnect": "断开",
-            "nf-cluster-table.MakePrimary": "作为首选",
-            "nf-cluster-table.None": "无",
-            "nf-counters-table.Filter": "过滤器",
-            "nf-counters-table.ByName": "通过名称过滤",
-            "nf-counters-table.ByContext": "通过上下文过滤",
-            "nf-counters-table.Context": "上下文",
-            "nf-counters-table.Name": "名称",
-            "nf-counters-table.Value": "值",
-            "nf-counters-table.Reset": "重置",
-            "nf-counters-table.Delete": "删除",
-            "nf-counters-table.Connect": "连接",
-            "nf-counters.Counters": "计数器",
-            "nf-history.History": "历史",
-            "nf-history-table.Filter": "过滤器",
-            "nf-history-table.ActionDetail": "动作详情",
-            "nf-history-table.Ok": "确定",
-            "nf-history-table.ById": "用标识过滤",
-            "nf-history-table.Message1": "过滤器基于组件标识的过滤器被更新了",
-            "nf-history-table.ByUser": "用用户过滤",
-            "nf-history-table.Message2": "基于运行任务的用户的过滤器",
-            "nf-history-table.FilterHistory": "过滤器历史",
-            "nf-history-table.Cancel": "取消",
-            "nf-history-table.PurgeHistory": "清除历史",
-            "nf-history-table.Purge": "清除",
-    		"nf-history-table.History": "历史",
-            "nf-history-table.Message3": "是否确定删除历史 '",
-            "nf-history-table.Message3.1": "\\'\\?",
-            "nf-history-table.Message4": "结束日期必须被指定.",
-            "nf-history-table.ViewDetails": "查看详情",
-            "nf-history-table.DateTime": "日期/时间",
-            "nf-history-table.Name": "名称",
-            "nf-history-table.Type": "类型",
-            "nf-history-table.Operation": "操作",
-            "nf-history-table.User": "用户",
-            "nf-history-table.Value": "值",
-            "nf-history-table.PreviousValue": "之前的值",
-            "nf-history-table.SourceId": "源标识",
-            "nf-history-table.SourceName": "源名称",
-            "nf-history-table.SourceType": "源类型",
-            "nf-history-table.Relationship": "关联",
-            "nf-history-table.DestinationId": "目的标识",
-            "nf-history-table.DestinationName": "目的名称",
-            "nf-history-table.DestinationType": "目的类型",
-            "nf-history-table.Group": "组",
-            "nf-history-table.GroupId": "组标识",
-            "nf-history-table.PreviousGroup": "前面的组",
-            "nf-history-table.PreviousGroupId": "前面组标识",
-            "nf-history-table.EndDate": "结束日期",
-            "nf-history-table.History": "历史",
-    		"nf-history-table.Message5": "基于被修改的组件的id的过滤器",
-    		"nf-history-table.Message6": "基于执行操作的用户的过滤器",
-    		"nf-history-table.NotAuthorized": "无权限",
-    		"nf-history-table.Uri": "统一资源标识符",
-    		"nf-history-table.EndTime": "结束时间",
-    		"nf-login.Login": "登录",
-    		"nf-login.Logining": "登入中...",
-    		"nf-login.SUCCESS": "成功",
-    		"nf-login.Denied": "登录被拒绝",
-    		"nf-login.Message1": "不能登入",
-    		"nf-login.Message2": "不能核对访问状态",
-    		"nf-login.Message3": "当前数据流没有配置账号/密码登录.",
-    		"nf-common.History": "<b>历史:</b><ul class=\"property-info\">",
-    		"nf-common.DefaultValue": "<b>默认值:</b> ",
-    		"nf-common.SupportsExpressionLanguage": "<b>支持表达式语言:</b> ",
-            "nf-common.sensitiveText": "敏感值设置",
-            "nf-common.Message1": "异常发生",
-            "nf-common.Message2": "请查看日志.",
-            "nf-common.Message3": "无法链接数据流系统",
-            "nf-common.Message4": "未授权",
-            "nf-common.Message5": "需要使用数据流系统的授权.",
-            "nf-common.Message6": "禁止",
-            "nf-common.Message7": "无法授权使用当前数据流系统.",
-            "nf-common.Message9": "与应用内核通信失败，在重启之前请查看日志并修正配置错误.",
-            "nf-common.ParseError": "分析错误",
-            "nf-common.Message10": "无法拦截来自数据流的返回.",
-            "nf-common.Message11": ": 异常返回",
-            "nf-common.Message12": "异常发生，请查看日志.",
-            "nf-common.Message13": "无值设置",
-            "nf-common.Message14": "空字符串设置",
-            "nf-common.Message15": "您的会话马上要过期. 请再登录以避免自动登出.",
-            "nf-common.Message16": "您的权限目前有限. 登录有权账户或者向管理申请一个有权账户.",
-            "nf-common.Message17": "您的会话已经过期. 请重新加载再登录.",
-            "nf-common.Message18": "您的会话已经过期. 请点击确认，再登录.",
-            "nf-common.Message19": "请确认应用正在运行并且检查日志.",
-            "nf-common.Message20": "请求超时，请确认应用是否在运行并检查日志.",
-            "nf-common.Message21": "请求被终止.",
-            "nf-common.Message22": "请求传输机制失败. 请确认应用正在运行并且有权访问.",
-    		"nf-common.Message23": "请确保应用程序正在运行，并检查日志中是否存在任何错误.",
-    		"nf-common.Message24": "无法与数据流通信",
-    		"nf-common.Unauthorized": "无权限",
-    		"nf-common.Message25": "使用此数据流需要进行身份验证.",
-    		"nf-common.Message26": "发生意外的错误",
-            "nf-common.SessionExpired": "请求超时",
-            "nf-common.AccessDenied": "拒绝访问",
-    		"nf-common.Error": "错误",
-            "nf-common.DefaultValue": "缺省值:",   
-            "nf-common.SupportsExpressionLanuage":"支持的表达语言:", 	
-            "nf-common.Message27": "空字符串之前设置",
-            "nf-common.Message28": "没有之前设置的值",
-            "nf-common.Bytes": " 字节",
-            "nf-connection-details.FromProcessor": "从处理器",
-    		"nf-connection-details.Processor": "处理器",
-            "nf-connection-details.FromFunnel": "从漏斗",
-            "nf-connection-details.FromOutPut": "从输出",
-            "nf-connection-details.FromInput": "从输入",
-            "nf-connection-details.ToProcessor": "从处理器",
-            "nf-connection-details.ToFunnel": "到漏斗",
-            "nf-connection-details.ToInput": "到输入",
-            "nf-connection-details.ToOutput": "到输出",
-            "nf-connection-details.Details": "详情",
-            "nf-connection-details.Settings": "设置",
-            "nf-connection-details.ConnectionDetails": "连接详情",
-            "nf-connection-details.Ok": "确定",
-            "nf-connection-details.NoValueSet": "确定",
-            "nf-dialog.Ok": "确定",
-            "nf-dialog.Yes": "是",
-            "nf-dialog.No": "否",
-            "nf-processor-details.Settings": "设置",
-            "nf-processor-details.Scheduling": "计划调度中",
-            "nf-processor-details.Properties": "属性",
-            "nf-processor-details.Comments": "评论",
-            "nf-processor-details.ProcessorDetails": "处理器详情",
-            "nf-processor-details.Ok": "确定",
-            "nf-processor-details.Advanced": "高级",
-    		"nf-processor-details.Error": "错误",
-    		"nf-processor-details.ThisProcessorHasNoRelationships": "该处理器没有关系",
-            "nf-status-history.StatusHistory":"历史状态信息",        
-            "nf-status-history.Processor": "处理器",
-            "nf-status-history.InputPort": "输入端口",
-            "nf-status-history.OutputPort": "输出端口",
-            "nf-status-history.ProcessGroup": "处理组",
-            "nf-status-history.RemoteProcessGroup": "远程处理组",
-            "nf-status-history.Connection": "连接",
-            "nf-status-history.Funnel": "漏斗",
-            "nf-status-history.Template": "模版",
-            "nf-status-history.Label": "标签",
-            "nf-status-history.Message":"没有足够的历史信息, 请稍后再试.",
-    		"nf-status-history.Close": "关闭",
-    		"nf-status-history.Start": "开始",
-    		"nf-status-history.End": "结束",
-    		"nf-status-history.Min_Max_Mean": "最小/最大/平均",
-    		"nf-status-history.NiFi": "数据流",
-            "nf-provenance.DataProvenance": "来源",
-            "nf-provenance-lineage.Message1": "计算流文件关系...",
-            "nf-provenance-lineage.ViewDetails": "查看详情",
-            "nf-provenance-lineage.Message2": "继承关系查找完成，但是没有结果. 事件可能过期.",
-            "nf-provenance-lineage.Find parents": "查找父亲",
-            "nf-provenance-lineage.Expand": "扩展",
-            "nf-provenance-lineage.Collapse": "崩溃",
-            "nf-provenance-lineage.Cancel": "取消",
-    		"nf-provenance-lineage.Lineage Results": "谱系结果",
-    		"nf-provenance-lineage.Process Lineage": "过程继承",
-            "nf-provenance-table.Filter": "过滤器",
-            "nf-provenance-table.Message": "显示最近 ",
-            "nf-provenance-table.Of": " 中 ",
-            "nf-provenance-table.Events": " 事件. ",
-            "nf-provenance-table.Message4": " 事件, 请修改检索条件.",
-            "nf-provenance-table.Showing": "显示",
-            "nf-provenance-table.Message5": "符合检索条件的事件, 请修改检索条件. ",
-            "nf-provenance-table.Message6": "符合检索条件的事件. ",
-            "nf-provenance-table.Details": "详情",
-            "nf-provenance-table.Attributes": "属性",
-            "nf-provenance-table.Content": "内容",
-            "nf-provenance-table.ProvenanceEvent": "数据源事件",
-            "nf-provenance-table.Ok": "确定",
-            "nf-provenance-table.Message1": "回放请求提交成功.",
-            "nf-provenance-table.Message2": "检索事件",
-            "nf-provenance-table.Search": "检索",
-            "nf-provenance-table.Message3": "检索数据源事件...",
-            "nf-provenance-table.ByComponentName": "通过组件名过滤",
-            "nf-provenance-table.ByComponentType": "通过组件类型过滤",
-            "nf-provenance-table.ByType": "通过类型过滤",
-            "nf-provenance-table.ByNode": "通过节点过滤",
-            "nf-provenance-table.Cluster": "集群",
-            "nf-provenance-table.ViewDetail": "查看详情",
-            "nf-provenance-table.ShowLineage": "显示继承关系",
-            "nf-provenance-table.GoTo": "进入",
-            "nf-provenance-table.DateTime": "日期/时间",
-            "nf-provenance-table.Type": "类型",
-            "nf-provenance-table.FlowFileUuid": "流文件 Uuid",
-            "nf-provenance-table.Size": "大小",
-            "nf-provenance-table.ComponentName": "组件名称",
-            "nf-provenance-table.ComponentType": "组件类型",
-            "nf-provenance-table.Node": "节点",
-            "nf-provenance-table.Cancel": "取消",
-            "nf-provenance-table.NoValueSet": "没有值",
-            "nf-provenance-table.Claim": "断言",
-            "nf-provenance-table.InputClaim": "输入声明",
-    		"nf-provenance-table.Provenance": "出处",
-    		"nf-provenance-table.Message7": "无法生成用于查看内容的访问令牌.",
-    		"nf-provenance-table.Message8": "无法生成用于下载内容的访问令牌.",
-    		"nf-provenance-table.Message9": "没有先前设置的值",
-    		"nf-provenance-table.Message10": "正在搜索原因事件...",
-    		"nf-provenance-table.Process": "进展",
-    		"nf-provenance-table.NoValueSet": "未设置值",
-    		"nf-provenance-table.NoChildren": "没有孩子",
-    		"nf-provenance-table.NoParent": "没有父母",
-    		"nf-provenance-table.Bytes": " 字节",
-    		"nf-cluster-search.Summary": "总结",
-            "nf-cluster-search.SelectNode": "选择节点",
-            "nf-cluster-search.Ok": "确定",
-    		"nf-cluster-search.ClusterSearch": "集群搜索",
-            "nf-cluster-search.Message1": "无节点匹配 \\'",
-            "nf-cluster-search.Message2": "多于一个节点匹配 \\'",
-            "nf-cluster-search.Cancel": "取消",
-            "nf-cluster-search.NiFiSumary": "数据流总结",
-            "nf-cluster-search.Message3": "没有与搜索项匹配的节点",
-            "nf-summary-table.Filter": "过滤器",
-            "nf-summary-table.Processors": "处理器",
-            "nf-summary-table.Connections": "连接",
-            "nf-summary-table.InputPorts": "输入端口",
-            "nf-summary-table.OutputPorts": "输出端口",
-            "nf-summary-table.RemoteProcessGroups": "远程处理组",
-            "nf-summary-table.ProcessGroups": "处理组",
-            "nf-summary-table.ByName": "通过名字过滤",
-            "nf-summary-table.ByType": "通过类型过滤",
-            "nf-summary-table.BySource": "通过源过滤",
-            "nf-summary-table.ByDestination": "通过目标过滤",
-            "nf-summary-table.ByUri": "通过uri过滤",
-            "nf-summary-table.ViewDetail": "查看详情",
-            "nf-summary-table.SourceName": "源名称",
-            "nf-summary-table.Name": "名称",
-            "nf-summary-table.RunStatus": "运行状态",
-            "nf-summary-table.In": "输入",
-            "nf-summary-table.Size": "大小",
-            "nf-summary-table.Message": "最后5分钟数量 / 数据大小",
-            "nf-summary-table.Read": "读",
-            "nf-summary-table.Write": "写",
-            "nf-summary-table.5min": "5分钟",
-            "nf-summary-table.Message1": "最后5分钟数据量",
-            "nf-summary-table.Out": "输出",
-            "nf-summary-table.Tasks": "任务",
-            "nf-summary-table.Time": "时间",
-            "nf-summary-table.Message2": "最后5分钟数量 / 延续期",
-            "nf-summary-table.Type": "类型",
-            "nf-summary-table.GoTo": "进入",
-            "nf-summary-table.ShowHistory": "显示历史",
-            "nf-summary-table.ShowDetail": "显示详情",
-            "nf-summary-table.ClusterProcessorSummary": "集群处理器一览",
-            "nf-summary-table.Node": "节点",
-            "nf-summary-table.Queue": "队列",
-            "nf-summary-table.SourceName": "源名称",
-            "nf-summary-table.DestinationName": "目标名称",
-            "nf-summary-table.ClusterConnectionSummary": "集群连接一览",
-            "nf-summary-table.Close": "关闭",
-            "nf-summary-table.Transferred": "传输结束",
-            "nf-summary-table.Message3": "最后5分钟从连接器传输的数量 / 数据大小",
-            "nf-summary-table.Sent": "发送",
-            "nf-summary-table.Received": "接收",
-            "nf-summary-table.ClusterProcessGroupSummary": "集群处理组一览",
-            "nf-summary-table.ClusterInputPortSummary": "集群输入端口一览",
-            "nf-summary-table.ClusterOutPutPortSummary": "集群输出端口一览",
-            "nf-summary-table.Transmitting": "转换中",
-            "nf-summary-table.Target URI": "目标 URI",
-            "nf-summary-table.ClusterRemoteProcessGroupSummary": "集群远程处理组一览",
-            "nf-summary-table.JVM": "Java虚拟机",
-            "nf-summary-table.System": "系统",
-            "nf-summary-table.SystemDiagnostics": "系统分析",
-            "nf-summary-table.Summary": " 总结",
-    		"nf-summary-table.Message4": "基于公告的存在进行排序",
-    		"nf-summary-table.times": "次",
-    		"nf-summary-table.UsageFor": "用法",
-    		"nf-summary-table.GoToProcessor": "转向处理器",
-    		"nf-summary-table.ViewStatus": "查看状态历史",
-    		"nf-summary-table.ViewProcessor": "查看处理器详情",
-    		"nf-summary-table.ViewConnect": "查看连接详情",
-    		"nf-summary-table.GoToConnect": "转向连接",
-    		"nf-summary-table.GoToProcessorGroup": "转向处理组",
-    		"nf-summary-table.ViewProcessorGroup": "查看处理组详情",
-    		"nf-summary-table.GoToInputPort": "转向输入端口",
-    		"nf-summary-table.ViewInputPort": "查看输入端口详情",
-    		"nf-summary-table.GoToOutputPort": "转向输出端口",
-    		"nf-summary-table.ViewOutputPort": "查看输出端口详情",
-    		"nf-summary-table.ViewRemoteProcessorGroup": "查看远程处理组详情",
-    		"nf-summary-table.aria1": "数据流存储库存储使用",
-            "nf-summary.Summary": "总结",
-            "nf-templates-table.Templates": " 模版",
-            "nf-templates-table.Message": "选择模版导入",
-            "nf-templates-table.Filter": "过滤",
-    		"nf-templates-table.DeleteTemplate": "删除模板",
-            "nf-templates-table.Message1": "删除模版 \"",
-    		"nf-templates-table.DownloadTemplate": "下载模板",
-    		"nf-templates-table.Message2": "无法生成用于下载内容的访问令牌.",
-            "nf-templates-table.ByName": "用名称过滤",
-            "nf-templates-table.ByDescription": "用描述过滤",
-            "nf-templates-table.RemovieTemplate": "移除模版",
-            "nf-templates-table.DateTime": "日期/时间",
-            "nf-templates-table.Name": "名称",
-            "nf-templates-table.Description": "描述",
-            "nf-templates-table.GroupId": "处理组标识",
-            "nf-templates-table.Download": "下载",
-            "nf-templates-table.AccessPolicies": "访问策略",
-            "nf-templates.Templates": "模板",
-            "nf-users.Users": "用户",
-            "nf-users-table.Filter": "过滤",
-            "nf-users-table.UserDetails": "用户详情",
-            "nf-users-table.Ok": "确定",
-            "nf-users-table.UserRoles": "用户角色",
-            "nf-users-table.Apply": "应用",
-            "nf-users-table.Cancel": "取消",
-            "nf-users-table.GroupRoles": "组角色",
-            "nf-users-table.DeleteUser": "删除用户",
-            "nf-users-table.Delete": "删除",
-            "nf-users-table.RevokeAccess": "重新启用权限",
-            "nf-users-table.Revoke": "重新启用",
-            "nf-users-table.SetUserGroup": "设置用户组",
-            "nf-users-table.Group": "组",
-            "nf-users-table.Message": "组名不能为空.",
-            "nf-users-table.ByUser": "通过用户过滤",
-            "nf-users-table.ByGroup": "通过组过滤",
-            "nf-users-table.ByRole": "通过角色过滤",
-            "nf-users-table.AuthorizationPending": "授权处理中",
-            "nf-users-table.AccessRevoked": "权限已被重新启用",
-            "nf-users-table.NoRolesSet": "没有角色被设置",
-            "nf-users-table.Message1": "多个用户权限不同",
-            "nf-users-table.Message2": "多个用户状态不同",
-            "nf-users-table.Message3": "状态未被设置",
-            "nf-users-table.EditAccess": "编辑权限",
-            "nf-users-table.RevokeAccess.Ungroup": "脱离组",
-            "nf-users-table.DeleteAccount": "删除帐号",
-            "nf-users-table.User": "用户",
-            "nf-users-table.Roles": "角色",
-            "nf-users-table.LastAccessed": "最后访问",
-            "nf-users-table.Status": "状态",
-            "nf-users-table.GroupUsers": "组内用户",
-            "nf-users-table.Message4": "选择一个或多个用户.",
-            "nf-users-table.Message5": "移除所有用户从组 \\'",
-            "nf-users-table.Message6": "删除 \\'",
-            "nf-users-table.Message7": "\\' 从组 \\'",
-    		"nf-users-table.UserGroup": "用户/组",
-    		"nf-users-table.Edit": "编辑",
-    		"nf-users-table.Remove": "移除",
-    		"jquery-propertytable.SensitiveValueSet": "敏感值",
-            "jquery-propertytable.EmptyStringSet": "空字符串",
-            "jquery-propertytable.NoValueSet": "无值",
-            "jquery-propertytable.RequiredField": "必填属性",
-            "jquery-propertytable.Property": "属性",
-            "jquery-propertytable.Value": "值",        
-            "jquery-propertytable.PropertyName": "属性名称",
-            "jquery-propertytable.NewProperty": "新增属性",        
-            "jquery-propertytable.Ok": "确认",
-            "jquery-propertytable.Delete": "删除",
-            "jquery-propertytable.GoTo": "去",
-            "jquery-propertytable.Cancel": "取消",
-            "jquery-propertytable.Empty": "空值",
-            "jquery-propertytable.SetEmptyString": "设置空字符串",
-            "jquery-propertytable.ControllerService" : "控制器服务",
-            "jquery-propertytable.Tags" : "标签",
-            "jquery-propertytable.Create" : "创建",
-            "jquery-propertytable.Description" : "描述",
-            "jquery-propertytable.AddControllerService" : "添加控制器服务",
-            "jquery-propertytable.AddProperty": "添加属性",
-            "jquery-propertytable.PropertyExists": "属性存在",
-            "jquery-propertytable.Message0": "具有此名称的属性已存在。",
-            "jquery-propertytable.Message": "属性已经存在.",
-            "jquery-propertytable.Message1": "必须指定属性名.",
-            "jquery-propertytable.Message3": "创建新服务...",
-            "jquery-propertytable.Message2": "该属性没有控制器服务与其对应.",
-            "slick.editors.Message1": "请输入有效的整数",
-            "slick.editors.Message2": "请输入有效的正数",
-            "slick.grid.Message1": "Slickgrid需要一个有效的容器，",
-            "slick.grid.Message2": "不存在于DOM中",
-            "slick.grid.Message3": "找不到样式表。",
-            "slick.grid.Message4": "添加单元格Css样式：单元格CSS哈希的键'",
-            "slick.grid.Message5": "'已经存在。",
-            "slick.grid.Message6": "从节点获取单元：无法获取单元 -",
-            "slick.grid.Message7": "Grid : 使活动单元格可编辑 : options.editable为false时,应该永远不会调用",
-            "slick.grid.Message8": "未设置选择模型",
-            "jquery-tagcloud.NoTagsSpecified": "未指定标签"       
-        };
-    var en = {
-    		"nf-actions.UpdateResource": "Update Resource",
-    		"nf-actions.Refreshing": "Refreshing",
-    		"nf-actions.RemoteGroupProcess": "Remote Group Process",
-    		"nf-actions.NoTargetURIDefined": "No target URI defined.",
-    		"nf-actions.Header1": "Enable components",
-    		"nf-actions.Message1": "No eligible components are selected. Please select the components to be enabled and ensure they are no longer running.",
-    		"nf-actions.Header2": "Disable components",
-    		"nf-actions.Message2": "No eligible components are selected. Please select the components to be disabled and ensure they are no longer running.",
-    		"nf-actions.Header3": "Start components",
-    		"nf-actions.Message3": "No eligible components are selected. Please select the components to be started and ensure they are no longer running.",
-    		"nf-actions.Header4": "Stop components",
-    		"nf-actions.Message4": "No eligible components are selected. Please select the components to be stopped.",
-    		"nf-actions.Header5": "Reload",
-    		"nf-actions.Message5": "No eligible components are selected. Please select the components to be deleted.",
-    		"nf-actions.Header6": "Paste error",
-    		"nf-actions.EmptyQueue": "Empty Queue",
-    		"nf-actions.Message6": "Are you sure you want to empty this queue? All FlowFiles waiting at the time of the request will be removed.",
-    		"nf-actions.Cancel": "Cancel",
-    		"nf-actions.Empty": "Empty",
-    		"nf-actions.Stop": "Stop",
-    		"nf-actions.Message7": " were removed from the queue.",
-    		"nf-actions.Message8": "No FlowFiles were removed.",
-    		"nf-actions.Message9": "The current selection is not valid to create a template.",
-    		"nf-actions.CreateTemplate": "Create Template",
-    		"nf-actions.Create": "Create",
-    		"nf-actions.Template": "Template '",
-    		"nf-actions.Message11": "' was successfully created.",
-    		"nf-actions.Message12": "An error occurred while attempting to copy and paste.",
-    		"nf-actions.Message13": "The template name can not be empty.",
-    		"nf-actions.Message14": "Delete the request percentage to complete",
-    		"nf-actions.Message15": "Flow files",
-    		"nf-actions.Message16": "In",
-    		"nf-actions.Message17": "Outside",
-    		"nf-actions.Message18": "Remove from the queue.",
-    		"nf-actions.Message19": "No reference to the component.",
-    		"nf-canvas-graph-controls-controller.ProcessGroup": "Process Group",
-    		"nf-canvas-graph-controls-controller.Processor": "Processor",
-    		"nf-canvas-graph-controls-controller.InputPort": "Input Port",
-    		"nf-canvas-graph-controls-controller.OutputPort": "Output Port",
-    		"nf-canvas-graph-controls-controller.RemoteProcessGroup": "Remote Process Group",
-    		"nf-canvas-graph-controls-controller.Funnel": "Funnel",
-    		"nf-canvas-graph-controls-controller.Label": "Label",
-    		"nf-canvas-graph-controls-controller.Connection": "Connection",
-    		"nf-canvas-graph-controls-controller.MultipleSelected": "Multiple Selected",
-    		"nf-canvas-global-menu-controller.About": "About Flow Files",
-    		"nf-canvas-global-menu-controller.OK": "OK",
-    		"nf-canvas-operate-controller.SUCCESS": "SUCCESS",
-    		"nf-canvas-operate-controller.SuccessContent": "The template was successfully imported.",
-    		"nf-canvas-operate-controller.Upload": "Upload template",
-    		"nf-canvas-operate-controller.ButtonUpload": "Upload template",
-    		"nf-canvas-operate-controller.UploadTemplate": "No template is selected. Please select a template in the browser.",
-    		"nf-canvas-operate-controller.Cancel": "Cancel",
-    		"nf-canvas-operate-controller.ChangeColor": "Change Color",
-    		"nf-canvas-operate-controller.Apply": "Apply",
-    		"nf-canvas-operate-controller.Error": "Error",
-    		"nf-canvas-operate-controller.CreateTemplate": "Create Template",
-    		"nf-canvas-operate-controller.Message1": "The template can not be imported. Please check the errors in the log.",
-    		"nf-canvas-flow-status.Processors": "Processors",
-    		"nf-canvas-flow-status.ProcessGroups": "Process Groups",
-    		"nf-canvas-flow-status-controller.Processors": "Processors",
-    		"nf-canvas-flow-status-controller.ProcessGroups": "Process Groups",
-    		"nf-canvas-flow-status-controller.RemoteProcessGroups": "Remote Process Groups",
-    		"nf-canvas-flow-status-controller.Connection": "Connection",
-    		"nf-canvas-flow-status-controller.InputPorts": "InputPorts",
-    		"nf-canvas-flow-status-controller.OutputPorts": "OutputPorts",
-    		"nf-canvas-flow-status-controller.Funnel": "Funnel",
-    		"nf-canvas-flow-status-controller.no-matches": "Did not meet the results of the query request",
-    		"nf-canvas-toobbar.Start": "Start",
-    		"nf-canvas-toobbar.Stop": "Stop",
-    		"nf-canvas-toobbar.Copy": "Copy",
-    		"nf-canvas-toobbar.Paste": "Paste",
-    		"nf-canvas-toobbar.Group": "Group",
-    		"nf-canvas-toobbar.Enable": "Enable",
-    		"nf-canvas-toobbar.Disable": "Disable",
-    		"nf-canvas-toobbar.CreateTemplate": "Create Template",
-    		"nf-canvas-toobbar.ChangeColor": "Change Color",
-    		"nf-canvas-toobbar.Delete": "Delete",
-    		"nf-canvas-header.OK": "Ok",
-    		"nf-canvas-header.CreateTemplate": "Create Template",
-    		"nf-canvas-header.Fill": "Fill",
-    		"nf-canvas-header.Apply": "Apply",
-    		"nf-canvas-header.Cancel": "Cancel",
-    		"nf-group-component.AddProcessGroup": "Add Process Group",
-    		"nf-group-component.Add": "Add",
-    		"nf-group-component.Cancel": "Cancel",
-    		"nf-input-port-component.AddPort": "Add Port",
-    		"nf-input-port-component.Add": "Add",
-    		"nf-input-port-component.Cancel": "Cancel",
-    		"nf-input-port-component.new-port-type": "Enter",
-    		"nf-output-port-component.Add": "Add",
-    		"nf-output-port-component.Cancel": "Cancel",
-    		"nf-output-port-component.new-port-type": "Output",
-    		"nf-processor-component.AddProcessor": "Add Processor",
-    		"nf-processor-component.AddProcessorContent": "The processor that created this type must be selected.",
-    		"nf-processor-component.Add": "Add",
-    		"nf-processor-component.Cancel": "Cancel",
-    		"nf-processor-component.Type": "Type",
-    		"nf-processor-component.Tags": "Tags",
-    		"nf-processor-component.NoDescriptionSpecified": "No Description Specified",
-    		"nf-remote-process-group-component.ConfigurationError": "Configuration Error",
-    		"nf-remote-process-group-component.AddRemoteProcessGroup": "Add Remote Process Group",
-    		"nf-remote-process-group-component.Add": "Add",
-    		"nf-remote-process-group-component.Cancel": "Cancel",
-    		"nf-template-component.AddTemplate": "Add Template",
-    		"nf-template-component.Add": "Add",
-    		"nf-template-component.Cancel": "Cancel",
-    		"nf-template-component.InstantiateTemplate": "Instantiate Template",
-    		"nf-template-component.InstantiateTemplateContent": "There is no template to load in the flow files.",
-    		"nf-canvas-header.Message": "Unable to refresh the current group.",
-    		"nf-canvas-header.components.AddGroup": "Add Group",
-    		"nf-canvas-header.components.AddButton": "Add",
-    		"nf-canvas-header.components.CancelButton": "Cancel",
-    		"nf-canvas-toolbox.Input": "Input",
-    		"nf-canvas-toolbox.OutPut": "Output",
-    		"nf-canvas-toolbox.Filter": "Filter",
-    		"nf-canvas-toolbox.Processor": "Processor",
-    		"nf-canvas-toolbox.InputPort": "Input Port",
-    		"nf-canvas-toolbox.OutputPort": "Output Port",
-    		"nf-canvas-toolbox.ProcessGroup": "Process Group",
-    		"nf-canvas-toolbox.RemoteProcessGroup": "Remote Process Group",
-    		"nf-canvas-toolbox.Connection": "Connection",
-    		"nf-canvas-toolbox.Funnel": "Funnel",
-    		"nf-canvas-toolbox.Template": "Template",
-    		"nf-canvas-toolbox.Label": "Label",
-    		"nf-canvas-toolbox.Add": "Add",
-    		"nf-canvas-toolbox.Cancel": "Cancel",
-    		"nf-canvas-toolbox.Instantiate Template": "Instantiate Template",
-    		"nf-canvas-toolbox.Message": "No templates have been loaded into this NiFi.",
-    		"nf-canvas-toolbox.Type": "Type",
-    		"nf-canvas-toolbox.Tags": "Tags",
-    		"nf-canvas-toolbox.Message1": "No description specified",
-    		"nf-canvas-toolbox.AddProcessor": "Add Processor",
-    		"nf-canvas-toolbox.AddPort": "Add Port",
-    		"nf-canvas-toolbox.AddProcessGroup": "Add Process Group",
-    		"nf-canvas-toolbox.AddRemoteProcessGroup": "Add Remote Process Group",
-    		"nf-canvas-utils.Header1": "Process Group",
-    		"nf-canvas-utils.Message1": "Unable to load the group for the specified component.",
-    		"nf-canvas-utils.Message2": "Unable to find the specified component.",
-    		"nf-canvas-utils.Message3": "Unable to enter the selected group.",
-    		"nf-canvas-utils.Message4": "Cannot move Ports out of the root group",
-    		"nf-canvas-utils.Message5": "The following ports are currently connected outside of this group: <b>",
-    		"nf-canvas-utils.Message6": "The following ports already exist in the target process group: <b>",
-    		"nf-canvas-utils.Message7": "Components are already in the topmost group",
-    		"nf-canvas.Browser": "Unsupported Browser",
-    		"nf-canvas.Message1": "Flow graphs are shown using SVG. Please use a browser that supports rendering SVG.",
-    		"nf-canvas.ClusterConn": "Cluster Connection",
-    		"nf-canvas.Message2": "This node is not currently connected to the cluster. Any changes made to the data stream here are not replicated in the cluster.",
-    		"nf-canvas.Message3": "This node has just been added to the cluster. Any changes to the data stream here will be replicated in the cluster.",
-    		"nf-component-state.Header1": "Component status",
-    		"nf-component-state.Button1": "Close",
-    		"nf-component-state.Content1": "The component does not need to be cleared",
-    		"nf-component-state.Message1": "The component status can only be cleared when the component is not active",
-    		"nf-component-state.Key": "Key",
-    		"nf-component-state.Value": "Value",
-    		"nf-component-state.Scope": "Scope",
-    		"nf-connection-configuration.ConnectionConfiguration": "Connection Configuration",
-    		"nf-connection-configuration.Add": "Add",
-    		"nf-connection-configuration.Message0": "The connection must have at least one relationship selected.",
-    		"nf-connection-configuration.Cancel": "Cancel",
-    		"nf-connection-configuration.Message1": "\\' does not support any relationships.",
-    		"nf-connection-configuration.Message2": "\\' does not have any output ports.",
-    		"nf-connection-configuration.Message4": "\\' does not have any input ports.",
-    		"nf-connection-configuration.Message5": "未授权任何输出端口 \\'",
-    		"nf-connection-configuration.Message6": "Configuration Error",
-    		"nf-connection-configuration.ConfigureConnection": "Configure Connection",
-    		"nf-connection-configuration.Detail": "Details",
-    		"nf-connection-configuration.Setting": "Settings",
-    		"nf-connection-configuration.CreateConnection": "Create Connection",
-    		"nf-connection-configuration.Apply": "Apply",
-    		"nf-connection-configuration.Message7": "The connection must have at least one relationship selected.",
-    		"nf-connection.Connection": "Connection",
-    		"nf-connection.Message1": "Looping connections must have at least two bend points.",
-    		"nf-connection.From": "From",
-    		"nf-connection.To": "To",
-    		"nf-connection.Name": "Name",
-    		"nf-connection.Queued": "Queued",
-    		"nf-connection.FlowFilesOlder": "Flow Files Older",
-    		"nf-context-menu.RefreshStatus": "Refresh status",
-    		"nf-context-menu.LeaveGroup": "Leave group",
-    		"nf-context-menu.Configure": "Configure",
-    		"nf-context-menu.ViewConfiguration": "View configuration",
-    		"nf-context-menu.EnterGroup": "Enter group",
-    		"nf-context-menu.Start": "Start",
-    		"nf-context-menu.Stop": "Stop",
-    		"nf-context-menu.canEnable": "Enable",
-    		"nf-context-menu.canDisable": "Disable",
-    		"nf-context-menu.canGroup": "Group",
-    		"nf-context-menu.canManagePolicies": "Access Policies",
-    		"nf-context-menu.canAlign1": "Vertical alignment",
-    		"nf-context-menu.canAlign2": "Horizontal alignment",
-    		"nf-context-menu.canUploadTemplate": "Upload Template",
-    		"nf-context-menu.canCreateTemplate": "Create Template",
-    		"nf-context-menu.RemotePorts": "Remote ports",
-    		"nf-context-menu.EnableTransmission": "Enable transmission",
-    		"nf-context-menu.DisableTransmission": "Disable transmission",
-    		"nf-context-menu.StatsHistory": "Stats History",
-    		"nf-context-menu.ViewState": "View State",
-    		"nf-context-menu.Stats": "Stats",
-    		"nf-context-menu.DataProvenance": "Data provenance",
-    		"nf-context-menu.BringFront": "Bring to front",
-    		"nf-context-menu.GoToSource": "Go to source",
-    		"nf-context-menu.GoToDestination": "Go to destination",
-    		"nf-context-menu.UpstreamConnections": "Upstream connections",
-    		"nf-context-menu.DownstreamConnections": "Downstream connections",
-    		"nf-context-menu.Usage": "Usage",
-    		"nf-context-menu.Refresh": "Refresh",
-    		"nf-context-menu.GoTo": "Go to",
-    		"nf-context-menu.ChangeColor": "Change color",
-    		"nf-context-menu.CenterInView": "Center in view",
-    		"nf-context-menu.Copy": "Copy",
-    		"nf-context-menu.Paste": "Paste",
-    		"nf-context-menu.MoveParentGroup": "Move to parent group",
-    		"nf-context-menu.QueueList": "Queue List",
-    		"nf-context-menu.EmptyQueue": "Empty queue",
-    		"nf-context-menu.Delete": "Delete",
-    		"nf-controller-service.ConfigurationError": "Configuration Error",
-    		"nf-controller-service.Cancel": "Cancel",
-    		"nf-controller-service.Close": "Close",
-    		"nf-controller-service.Message1": "Steps to disable",
-    		"nf-controller-service.ActionCanceled": "Action Canceled",
-    		"nf-controller-service.Message2": "The request to disable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
-    		"nf-controller-service.Message3": "Steps to enable ",
-    		"nf-controller-service.Message4": "Action Canceled",
-    		"nf-controller-service.Message5": "The request to enable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
-    		"nf-controller-service.Message6": "Save changes before going to this Controller Service?",
-    		"nf-controller-service.Settings": "Settings",
-    		"nf-controller-service.Properties": "Properties",
-    		"nf-controller-service.Comments": "Comments",
-    		"nf-controller-service.Message7": "Configure Controller Service",
-    		"nf-controller-service.Message8": "Disable Controller Service",
-    		"nf-controller-service.Disable": "Disable",
-    		"nf-controller-service.ServiceOnle": "Service only",
-    		"nf-controller-service.Message9": "Enable only this controller service",
-    		"nf-controller-service.Message10": "Service and referencing components",
-    		"nf-controller-service.Message11": "Enable this controller service and enable/start all referencing components",
-    		"nf-controller-service.Message12": "Enable Controller Service",
-    		"nf-controller-service.Enable": "Enable",
-    		"nf-controller-service.Apply": "Apply",
-    		"nf-controller-service.Advanced": "Advanced",
-    		"nf-controller-service.Message13": "Save changes before opening the advanced configuration?",
-    		"nf-controller-service.Ok": "Ok",
-    		"nf-controller-service.ControllerService": "Controller Service",
-    		"nf-controller-service.Message14": "The unauthorized component can not be disabled due to unauthorized use.",
-    		"nf-controller-service.Message15": "Unable to invoke component due to unauthorized use.",
-    		"nf-controller-service.Save": "Save",
-    		"nf-controller-service.Message16": "Save the changes before entering the controller service?",
-    		"nf-controller-services.Add": "Add",
-    		"nf-controller-services.ControllerService": "Controller Service",
-    		"nf-controller-services.Message14": "You must select the type of controller service you want to create.",
-    		"nf-controller-services.AddControllerService": "Add Controller Service",
-    		"nf-controller-services.Invalid": "Invalid",
-    		"nf-controller-services.Disabled": "Disabled",
-    		"nf-controller-services.Disabling": "Disabling",
-    		"nf-controller-services.Enabled": "Enabled",
-    		"nf-controller-services.Enabling": "Enabling",
-    		"nf-controller-services.toolTip": "Based on the presence of the announcement",
-    		"nf-controller-services.Name": "Name",
-    		"nf-controller-services.Type": "Type",
-    		"nf-controller-services.Tags": "Tags",
-    		"nf-controller-services.State": "State",
-    		"nf-controller-services.ProcessGroup": "Process Group",
-    		"nf-controller-services.type-description": "Not specified",
-    		"nf-controller-services.viewDtails": "View Dtails",
-    		"nf-controller-services.usage": "Usage",
-    		"nf-controller-services.disable": "Disable",
-    		"nf-controller-services.edit": "Edit",
-    		"nf-controller-services.enable": "Enable",
-    		"nf-controller-services.viewstate": "View State",
-    		"nf-controller-services.remove": "Remove",
-    		"nf-controller-services.acesspolicies": "Access Policies",
-    		"nf-custom-ui.AdvancedConfiguration": "Advanced Configuration",
-    		"nf-custom-ui.Message1": "Unable to generate an access token to access the Advanced Access Configuration dialog box.",
-    		"nf-draggable.ComponentPosition": "Component Position",
-    		"nf-draggable.Message1": "Unauthorized modification of destination group.",
-    		"nf-draggable.Message2": "Each component that chooses to modify must be authorized.",
-    		"nf-go-to.Close": "Close",
-    		"nf-go-to.NoDownstreamComponents": "No Downstream Components",
-    		"nf-go-to.NoUpstreamComponents": "No Upstream Components",
-    		"nf-go-to.DownstreamConnections": "Downstream Connections",
-    		"nf-go-to.UpstreamConnections": "Upstream Connections",
-    		"nf-go-to.Message1": "No upstream components",
-    		"nf-go-to.Message2": "No downstream components",
-    		"nf-go-to.Funnel": "Funnel",
-    		"nf-label-configuration.ConfigureLabel": "Configure Label",
-    		"nf-label-configuration.Apply": "Apply",
-    		"nf-label-configuration.Cancel": "Cancel",
-    		"nf-policy-management.ViewUserInterface": "View User Interface",
-    		"nf-policy-management.AcessController": "Acess Controller",
-    		"nf-policy-management.QueryProvenance": "Query Provenance",
-    		"nf-policy-management.AcessPolicies": "Acess Policies",
-    		"nf-policy-management.AcessUser": "Acess User/Group",
-    		"nf-policy-management.retrieve": "Retrieve site-to-site details",
-    		"nf-policy-management.diagnostics": "View system analysis",
-    		"nf-policy-management.proxy": "Proxy user request",
-    		"nf-policy-management.counters": "Access counters",
-    		"nf-policy-management.ViewComponent": "View Component",
-    		"nf-policy-management.ModifyComponent": "Modify Component",
-    		"nf-policy-management.ViewData": "View Data",
-    		"nf-policy-management.ModifyData": "Modify Data",
-    		"nf-policy-management.ReceiveData": "Through the site to the site to receive data",
-    		"nf-policy-management.SendData": "Send Data",
-    		"nf-policy-management.ViewPolicies": "View Policies",
-    		"nf-policy-management.ModifyPolicies": "Modify Policies",
-    		"nf-policy-management.Searchusers": "Search users",
-    		"nf-policy-management.Ok": "Ok",
-    		"nf-policy-management.Add": "Add",
-    		"nf-policy-management.UserSearch": "User Search",
-    		"nf-policy-management.Message1": "There is no matching user\\'",
-    		"nf-policy-management.Message2": "Multiple users match\\'",
-    		"nf-policy-management.Cancel": "Cancel",
-    		"nf-policy-management.UpdatePolicy": "Update Policy",
-    		"nf-policy-management.DeletePolicy": "Delete Policy",
-    		"nf-policy-management.Message3": "Delete\\'",
-    		"nf-policy-management.Message4": "\\'From this strategy?",
-    		"nf-policy-management.Message5": "Are you sure you want to delete this policy?",
-    		"nf-policy-management.Message6": "No choice strategy",
-    		"nf-policy-management.Message7": "Allows the user to view the user interface",
-    		"nf-policy-management.Message8": "Allows the user to view / modify the controller, including reporting tasks in the cluster, controller services, and nodes",
-    		"nf-policy-management.Message9": "Allows users to submit source searches and request event inheritance",
-    		"nf-policy-management.Message10": "Allows users to view / modify policies for all components",
-    		"nf-policy-management.Message11": "Allows users to view / modify user groups",
-    		"nf-policy-management.Message12": "Allows other instances of NiFi to retrieve the Site-to-Site details for this data stream",
-    		"nf-policy-management.Message13": "Allow users to view system analysis",
-    		"nf-policy-management.Message14": "Allows the proxy computer to send requests on behalf of others",
-    		"nf-policy-management.Message15": "Allows the user to view / modify the counter",
-    		"nf-policy-management.Message16": "Allows users to view component configuration details",
-    		"nf-policy-management.Message17": "Allows the user to modify the component configuration details",
-    		"nf-policy-management.Message18": "Allows the user to view the metadata and content of this component through the source data and stream file queues in the outbound connection",
-    		"nf-policy-management.Message19": "Allows the user to empty the stream file queue in the outbound connection and submit the replay",
-    		"nf-policy-management.Message20": "Allows this port to receive data from these data stream instances",
-    		"nf-policy-management.Message21": "Allows this port to send data to these data stream instances",
-    		"nf-policy-management.Message22": "Allows users to view a list of users who can view / modify this component",
-    		"nf-policy-management.Message23": "Allows users to modify the list of users who can view / modify this component",
-    		"nf-policy-management.Message24": "By removing this policy, the permissions for this component will revert to inherited policies, if applicable.",
-    		"nf-policy-management.Text1": "Shows the valid policies inherited from",
-    		"nf-policy-management.Text2": "No component specific administrator.",
-    		"nf-policy-management.Text3": "Unauthorized access to the specified resource policy.",
-    		"nf-policy-management.Text4": "Unauthorized view of the policy.",
-    		"nf-policy-management.Text5": "There is no policy for specifying resources.",
-    		"nf-policy-management.Text6": "Unauthorized access to the specified resource policy.",
-    		"nf-policy-management.Write": "Write",
-    		"nf-policy-management.Read": "Read",
-    		"nf-policy-management.View": "View",
-    		"nf-policy-management.Modify": "Modify",
-    		"nf-policy-management.AllPolicies": "All Policies",
-    		"nf-policy-management.Controller": "Controller",
-    		"nf-policy-management.ProcessorGroup": "Processor Group",
-    		"nf-policy-management.reporting-tasks": "Reporting Tasks",
-    		"nf-policy-management.NoUserSearch": "No User Search",
-    		"nf-policy-management.Remove": "Remove",
-    		"nf-port-configuration.ConfigurePort": "Configure Port",
-    		"nf-port-configuration.Apply": "Apply",
-    		"nf-port-configuration.ConfigurationError": "Configuration Error",
-    		"nf-port-configuration.Cancel": "Cancel",
-    		"nf-port-details.PortDetails": "Port Details",
-    		"nf-port-details.OK": "Ok",
-    		"nf-process-group-configuration.ConfigureProcessGroup": "Configure Process Group",
-    		"nf-process-group-configuration.Apply": "Apply",
-    		"nf-process-group-configuration.Cancel": "Cancel",
-    		"nf-process-group-configuration.General": "General",
-    		"nf-process-group-configuration.ControllerService": "Controller Service",
-    		"nf-process-group-details.ProcessGroupDetails": "Process Group Details",
-    		"nf-process-group-details.Ok": "Ok",
-    		"nf-process-group.Message1": "No comments specified",
-    		"nf-process-group.Queued": "Queued",
-    		"nf-process-group.In": "In",
-    		"nf-process-group.ReadWrite": "Read/Write",
-    		"nf-process-group.Out": "Out",
-    		"nf-process-group.5min": "(5 min)",
-    		"nf-processor-configuration.TimerDriven": "Timer driven",
-    		"nf-processor-configuration.Message1": "Processor will be scheduled to run on an interval defined by the run schedule.",
-    		"nf-processor-configuration.EventDriven": "Event driven",
-    		"nf-processor-configuration.Message2": "Processor will be scheduled to run when triggered by an event (e.g. a FlowFile enters an incoming queue). This scheduling strategy is experimental.",
-    		"nf-processor-configuration.OnPrimaryNode": "On primary node",
-    		"nf-processor-configuration.Message3": "Processor will be scheduled on the primary node on an interval defined by the run schedule.",
-    		"nf-processor-configuration.CronDriven": "CRON驱动",
-    		"nf-processor-configuration.Message5": "Processor will be scheduled to run on at specific times based on the specified CRON string.",
-    		"nf-processor-configuration.Error1": "Concurrent tasks must be integer values",
-    		"nf-processor-configuration.Error2": "Must specify an operational plan",
-    		"nf-processor-configuration.Error3": "The duration of the penalty must be specified",
-    		"nf-processor-configuration.Error4": "Must specify the duration of the production",
-    		"nf-processor-configuration.ConfigurationError": "Configuration Error",
-    		"nf-processor-configuration.Message6": "Save changes before going to this Controller Service?",
-    		"nf-processor-configuration.Settings": "Settings",
-    		"nf-processor-configuration.Scheduling": "Scheduling",
-    		"nf-processor-configuration.Properties": "Properties",
-    		"nf-processor-configuration.Comments": "Comments",
-    		"nf-processor-configuration.ConfigureProcessor": "Configure Processor",
-    		"nf-processor-configuration.Debug": "DEBUG",
-    		"nf-processor-configuration.Info": "INFO",
-    		"nf-processor-configuration.Warn": "WARN",
-    		"nf-processor-configuration.Error": "ERROR",
-    		"nf-processor-configuration.Apply": "Apply",
-    		"nf-processor-configuration.Cancel": "Cancel",
-    		"nf-processor-configuration.Advanced": "Advanced",
-    		"nf-processor-configuration.Message7": "Save changes before opening the advanced configuration?",
-    		"nf-processor-configuration.ThisProcessorHasNoRelationships": "This processor does not matter.",
-    		"nf-processor-configuration.ViewDetails": "View Details",
-    		"nf-processor-configuration.Provenance": "Provenance",
-    		"nf-processor.In": "In",
-    		"nf-processor.ReadWrite": "Read/Write",
-    		"nf-processor.Out": "Out",
-    		"nf-processor.TasksTime": "Tasks/Time",
-    		"nf-processor.5min-1": "5 分钟",
-    		"nf-processor.5min": "(5 min)",
-    		"nf-registration.Thanks": "Thanks",
-    		"nf-registration.Message1": "Your request will be processed shortly.",
-    		"nf-queue-listing.QueueListing": "队列列表",
-    		"nf-queue-listing.Message1": "Unable to generate an access token for downloading content.",
-    		"nf-queue-listing.Message2": "Unable to generate access token for viewing content.",
-    		"nf-queue-listing.Stop": "Stop",
-    		"nf-queue-listing.Message3": "Queue has no stream file.",
-    		"nf-queue-listing.FlowFile": "Flow File",
-    		"nf-queue-listing.Ok": "Ok",
-    		"nf-queue-listing.Message4": "The source and destination of this queue are currently running. This list may no longer be accurate.",
-    		"nf-queue-listing.Message5": "The source of this queue is currently running. This listing may no longer be accurate.",
-    		"nf-queue-listing.Message6": "The goal of this queue is running. This listing may no longer be accurate.",
-    		"nf-queue-listing.NoValueSet": "No Value Set",
-    		"nf-queue-listing.Yes": "Yes",
-    		"nf-queue-listing.No": "No",
-    		"nf-queue-listing.Position": "Position",
-    		"nf-queue-listing.FileName": "File Name",
-    		"nf-queue-listing.FileSize": "File Size",
-    		"nf-queue-listing.queuedDuration": "Queued Duration",
-    		"nf-queue-listing.lineageDuration": "Lineage Duration",
-    		"nf-queue-listing.penalized": "Penalized",
-    		"nf-queue-listing.node": "Node",
-    		"nf-queue-listing.Bytes": "Bytes",
-    		"nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "Configure Remote Process Group",
-    		"nf-remote-process-group-configuration.Apply": "Apply",
-    		"nf-remote-process-group-configuration.ConfigurationError": "Configuration Error",
-    		"nf-remote-process-group-configuration.Cancel": "Cancel",
-    		"nf-remote-process-group-configuration.Message5": "Remote process group configuration",
-    		"nf-remote-process-group-details.RemoteProcessGroupDetails": "Remote Process Group Details",
-    		"nf-remote-process-group-details.Ok": "Ok",
-    		"nf-remote-process-group-ports.ConfigureRemotePort": "Configure Remote Port",
-    		"nf-remote-process-group-ports.Apply": "Apply",
-    		"nf-remote-process-group-ports.ConfigurationError": "Configuration Error",
-    		"nf-remote-process-group-ports.Message1": "Concurrent tasks must be an integer value.",
-    		"nf-remote-process-group-ports.Cancel": "Cancel",
-    		"nf-remote-process-group-ports.RemoteProcessGroupPorts": "Remote Process Group Ports",
-    		"nf-remote-process-group-ports.Close": "Close",
-    		"nf-remote-process-group-ports.Message2": "No description specified.",
-    		"nf-remote-process-group-ports.Message3": "This port has been deleted.",
-    		"nf-remote-process-group-ports.Message4": "The number of tasks that should be scheduled for this port at the same time.",
-    		"nf-remote-process-group-ports.transmissionSwitch": "Switch port transfer",
-    		"nf-remote-process-group-ports.description": "Not specified.",
-    		"nf-remote-process-group.Message1": "No comments specified",
-    		"nf-remote-process-group.Sent": "Sent",
-    		"nf-remote-process-group.Received": "Received",
-    		"nf-remote-process-group.5min": "(5 min)",
-    		"nf-remote-process-group.Message2": "Site-to-Site is secure.",
-    		"nf-remote-process-group.Message3": "Site-to-Site is NOT secure.",
-    		"nf-remote-process-group.Message4": "Remote flow not current",
-    		"nf-reporting-task.ReportingTask": "Reporting Task",
-    		"nf-reporting-task.Save": "Save",
-    		"nf-reporting-task.ConfigurationError": "Configuration Error",
-    		"nf-reporting-task.Message1": "Save changes before going to this Controller Service?",
-    		"nf-reporting-task.Settings": "Settings",
-    		"nf-reporting-task.Properties": "Properties",
-    		"nf-reporting-task.Comments": "Comments",
-    		"nf-reporting-task.ConfigureReportingTask": "Configure Reporting Task",
-    		"nf-reporting-task.Node": "Node",
-    		"nf-reporting-task.ClusterManager": "Cluster Manager",
-    		"nf-reporting-task.TimerDriven": "Timer driven",
-    		"nf-reporting-task.Message2": "Reporting task will be scheduled to run on an interval defined by the run schedule.",
-    		"nf-reporting-task.CRONDriven": "CRON driven",
-    		"nf-reporting-task.Message3": "Reporting task will be scheduled to run on at specific times based on the specified CRON string.",
-    		"nf-reporting-task.Apply": "Apply",
-    		"nf-reporting-task.Cancel": "Cancel",
-    		"nf-reporting-task.Advanced": "Advanced",
-    		"nf-reporting-task.Message4": "Save changes before opening the advanced configuration?",
-    		"nf-reporting-task.Ok": "Ok",
-    		"nf-search.Search": "Search",
-    		"nf-secure-port-configuration": "Settings",
-    		"nf-secure-port-configuration.AccessControl": "Access Control",
-    		"nf-secure-port-configuration.ConfigureSecurePort": "Configure Secure Port",
-    		"nf-secure-port-configuration.Apply": "Apply",
-    		"nf-secure-port-configuration.Cancel": "Cancel",
-    		"nf-secure-port-configuration.InputPort": "InputPort",
-    		"nf-secure-port-configuration.OutputPort": "OutputPort",
-    		"nf-secure-port-details.Settings": "Settings",
-    		"nf-secure-port-details.AccessControl": "Access Control",
-    		"nf-secure-port-details.SecurePortDetails": "Secure Port Details",
-    		"nf-secure-port-details.Ok": "Ok",
-    		"nf-settings.Filter": "Filter",
-    		"nf-settings.Message1": "A new flow archive was successfully created.",
-    		"nf-settings.Message2": "Settings successfully applied.",
-    		"nf-settings.Message3": "The type of controller service to create must be selected.",
-    		"nf-settings.Text": "Node",
-    		"nf-settings.ClusterManager": "Cluster Manager",
-    		"nf-settings.Message4": "This controller service will be available on the nodes only.",
-    		"nf-settings.Message5": "This controller service will be available on the cluster manager only.",
-    		"nf-settings.Message6": "No description specified",
-    		"nf-settings.Message7": "Add Controller Service",
-    		"nf-settings.Add": "Add",
-    		"nf-settings.Cancel": "Cancel",
-    		"nf-settings.Node": "Node",
-    		"nf-settings": "Cluster Manager",
-    		"nf-settings.ViewDetail": "View Details",
-    		"nf-settings.Disable": "Disable",
-    		"nf-settings.Enable": "Enable",
-    		"nf-settings.Remove": "Remove",
-    		"nf-settings.Usage": "Usage",
-    		"nf-settings.Name": "Name",
-    		"nf-settings.State": "State",
-    		"nf-settings.Availability": "Availability",
-    		"nf-settings.Message8": "This reporting task will be available on the nodes only.",
-    		"nf-settings.Message9": "This reporting task will be available on the cluster manager only.",
-    		"nf-settings.Type": "Type",
-    		"nf-settings.Tags": "Tags",
-    		"nf-settings.Message10": "No description specified",
-    		"nf-settings.Message11": "Add Reporting Task",
-    		"nf-settings.ViewDetails": "View Details",
-    		"nf-settings.Stop": "Stop",
-    		"nf-settings.Edit": "Edit",
-    		"nf-settings.Start": "Start",
-    		"nf-settings.RunStatus": "Run Status",
-    		"nf-settings.General": "General",
-    		"nf-settings.ControllerServices": "Controller Services",
-    		"nf-settings.ReportingTasks": "Reporting Tasks",
-    		"nf-settings.Message12": "Create a new controller service",
-    		"nf-settings.Message13": "Create a new reporting task",
-    		"nf-settings.Settings": " Settings",
-    		"nf-settings.ViewState": "ViewState",
-    		"nf-settings.AccessPolicies": "Access Policies",
-    		"nf-settings.Invalid": "Invalid",
-    		"nf-settings.Stopped": "Stopped",
-    		"nf-settings.Running": "Running",
-    		"nf-settings.Disabled": "Disabled",
-    		"nf-about": "NiFi Flow",
-    		"nf-bulletin-board.defaultFilterText": "Filter",
-    		"nf-bulletin-board.ByMessage": "by message",
-    		"nf-bulletin-board.ByName": "by name",
-    		"nf-bulletin-board.ById": "by id",
-    		"nf-bulletin-board.ByGroupId": "by group id",
-    		"nf-bulletin-board.Message1": "Filter ",
-    		"nf-bulletin-board.Message2": " matching \\\\'",
-    		"nf-bulletin-board.Message3": "Auto refresh started",
-    		"nf-bulletin-board.Message4": "Auto refresh stopped",
-    		"nf-bulletin-board.Message5": "Remove the filter",
-    		"nf-bulletin-board.BulletinBoard": " Bulletin Board",
-    		"nf-cluster.Cluster": " Cluster",
-    		"nf-cluster-table.Filter": "Filter",
-    		"nf-cluster-table.Message1": "Connect \\'",
-    		"nf-cluster-table.Message2": "\\' to this cluster?",
-    		"nf-cluster-table.Message3": "Disconnect \\'",
-    		"nf-cluster-table.Message4": "\\' from the cluster?",
-    		"nf-cluster-table.Message5": "Remove \\'",
-    		"nf-cluster-table.Message6": "\\' from the cluster?",
-    		"nf-cluster-table.NodeDetails": "Node Details",
-    		"nf-cluster-table.Ok": "Ok",
-    		"nf-cluster-table.ByAddress": "by address",
-    		"nf-cluster-table.ByStatus": "by status",
-    		"nf-cluster-table.ViewDetails": "View Details",
-    		"nf-cluster-table.Node Address": "Node Address",
-    		"nf-cluster-table.ActiveThreadCount": "Active Thread Count",
-    		"nf-cluster-table.Size": "Size",
-    		"nf-cluster-table.Queue": "Queue",
-    		"nf-cluster-table.Status": "Status",
-    		"nf-cluster-table.Uptime": "Uptime",
-    		"nf-cluster-table.LastHeartbeat": "Last Heartbeat",
-    		"nf-cluster-table.Connect": "Connect",
-    		"nf-cluster-table.Remove": "Remove",
-    		"nf-cluster-table.Disconnect": "Disconnect",
-    		"nf-cluster-table.MakePrimary": "Make Primary",
-    		"nf-cluster-table.None": "无",
-    		"nf-counters-table.Filter": "Filter",
-    		"nf-counters-table.ByName": "by name",
-    		"nf-counters-table.ByContext": "by context",
-    		"nf-counters-table.Context": "Context",
-    		"nf-counters-table.Name": "Name",
-    		"nf-counters-table.Value": "Value",
-    		"nf-counters-table.Reset": "Reset",
-    		"nf-counters-table.Delete": "Delete",
-    		"nf-counters-table.Connect": "Connect",
-    		"nf-counters.Counters": " Counters",
-    		"nf-history.History": "历史",
-    		"nf-history-table.Filter": "Filter",
-    		"nf-history-table.ActionDetail": "Action Details",
-    		"nf-history-table.Ok": "Ok",
-    		"nf-history-table.ById": "by id",
-    		"nf-history-table.Message1": "Filters based on the id of the component that was modified",
-    		"nf-history-table.ByUser": "by user",
-    		"nf-history-table.Message2": "Filters based on the user that performed the action",
-    		"nf-history-table.FilterHistory": "Filter History",
-    		"nf-history-table.Cancel": "Cancel",
-    		"nf-history-table.PurgeHistory": "Purge History",
-    		"nf-history-table.Purge": "Purge",
-    		"nf-history-table.History": " History",
-    		"nf-history-table.Message3": "Are you sure you want to delete all history before '",
-    		"nf-history-table.Message3.1": "\\'?",
-    		"nf-history-table.Message4": "The end date must be specified.",
-    		"nf-history-table.ViewDetails": "View Details",
-    		"nf-history-table.DateTime": "Date/Time",
-    		"nf-history-table.Name": "Name",
-    		"nf-history-table.Type": "Type",
-    		"nf-history-table.Operation": "Operation",
-    		"nf-history-table.User": "User",
-    		"nf-history-table.Value": "Value",
-    		"nf-history-table.PreviousValue": "Previous Value",
-    		"nf-history-table.SourceId": "Source Id",
-    		"nf-history-table.SourceName": "Source Name",
-    		"nf-history-table.SourceType": "Source Type",
-    		"nf-history-table.Relationship": "Relationship(s)",
-    		"nf-history-table.DestinationId": "Destination Id",
-    		"nf-history-table.DestinationName": "Destination Name",
-    		"nf-history-table.DestinationType": "Destination Type",
-    		"nf-history-table.Group": "Group",
-    		"nf-history-table.GroupId": "GroupId",
-    		"nf-history-table.PreviousGroup": "Previous Group",
-    		"nf-history-table.PreviousGroupId": "Previous Group Id",
-    		"nf-history-table.EndDate": "End Date",
-    		"nf-history-table.Message5": "A filter based on the id of the modified component",
-    		"nf-history-table.Message6": "A filter based on the user performing the operation",
-    		"nf-history-table.NotAuthorized": "No Authorized",
-    		"nf-history-table.Uri": "Uri",
-    		"nf-history-table.EndTime": "End Time",
-    		"nf-login.Login": "Login",
-    		"nf-login.Logining": "Logining...",
-    		"nf-login.SUCCESS": "SUCCESS",
-    		"nf-login.Denied": "Denied",
-    		"nf-login.Message1": "Can not log in",
-    		"nf-login.Message2": "Can not check access status",
-    		"nf-login.Message3": "The current data stream is not configured with account / password login.",
-    		"nf-common.History": "<b>History:</b><ul class=\"property-info\">",
-    		"nf-common.DefaultValue": "<b>Default Value:</b> ",
-    		"nf-common.SupportsExpressionLanguage": "<b>Supports Expression Language:</b> ",
-    		"nf-common.sensitiveText": "Sensitive value set",
-    		"nf-common.Message1": "An unexpected error has occurred",
-    		"nf-common.Message2": "Please check the logs.",
-    		"nf-common.Message3": "Unable to communicate with NiFi",
-    		"nf-common.Message4": "Unauthorized",
-    		"nf-common.Message5": "Authorization is required to use this NiFi.",
-    		"nf-common.Message6": "Forbidden",
-    		"nf-common.Message7": "Unable to authorize you to use this NiFi.",
-    		"nf-common.Message9": "An error occurred communicating with the application core. Please check the logs and fix any configuration issues before restarting.",
-    		"nf-common.ParseError": "Parse Error",
-    		"nf-common.Message10": "Unable to interpret response from NiFi.",
-    		"nf-common.Message11": ": Unexpected Response",
-    		"nf-common.Message12": "An unexpected error has occurred. Please check the logs.",
-    		"nf-common.Message13": "No value set",
-    		"nf-common.Message14": "Empty string set",
-    		"nf-common.Message15": "Your session will expire soon. Please log in again to avoid being automatically logged out.",
-    		"nf-common.Message16": "You are accessing with limited authority. Log in or request an account to access with additional authority granted to you by an administrator.",
-    		"nf-common.Message17": "Your session has expired. Please reload to log in again.",
-    		"nf-common.Message18": "Your session has expired. Please press Ok to log in again.",
-    		"nf-common.Message19": "Please ensure the application is running and check the logs for any errors.",
-    		"nf-common.Message20": "Request has timed out. Please ensure the application is running and check the logs for any errors.",
-    		"nf-common.Message21": "Request has been aborted.",
-    		"nf-common.Message22": "Request transport mechanism failed. Please ensure the host where the application is running is accessible.",
-    		"nf-common.Message23": "Make sure that the application is running and check if there are any errors in the log.",
-    		"nf-common.Message24": "Can not communicate with data stream",
-    		"nf-common.Unauthorized": "Unauthorized",
-    		"nf-common.Message25": "Use this data stream for authentication.",
-    		"nf-common.Message26": "An unexpected error occurred",
-    		"nf-common.SessionExpired": "Session Expired",
-    		"nf-common.AccessDenied": "Access Denied",
-    		"nf-common.Error": "Error",
-    		"nf-common.SupportsExpressionLanuage":"Supports expression language:",
-    		"nf-common.Message27": "Empty string before setting",
-    		"nf-common.Message28": "No value previously set",
-    		"nf-common.Bytes": " Bytes",
-    		"nf-connection-details.FromProcessor": "From processor",
-    		"nf-connection-details.Processor": "Processor",
-    		"nf-connection-details.FromFunnel": "From Funnel",
-    		"nf-connection-details.FromOutPut": "From output",
-    		"nf-connection-details.FromInput": "From input",
-    		"nf-connection-details.ToProcessor": "To processor",
-    		"nf-connection-details.ToFunnel": "To funnel",
-    		"nf-connection-details.ToInput": "To input",
-    		"nf-connection-details.ToOutput": "To output",
-    		"nf-connection-details.Details": "Details",
-    		"nf-connection-details.Settings": "Settings",
-    		"nf-connection-details.ConnectionDetails": "Connection Details",
-    		"nf-connection-details.Ok": "Ok",
-    		"nf-connection-details.NoValueSet": "No Value Set",
-    		"nf-dialog.Ok": "Ok",
-    		"nf-dialog.Yes": "Yes",
-    		"nf-dialog.No": "No",
-    		"nf-processor-details.Settings": "Settings",
-    		"nf-processor-details.Scheduling": "Scheduling",
-    		"nf-processor-details.Properties": "Properties",
-    		"nf-processor-details.Comments": "Comments",
-    		"nf-processor-details.ProcessorDetails": "Processor Details",
-    		"nf-processor-details.Ok": "Ok",
-    		"nf-processor-details.Advanced": "Advanced",
-    		"nf-processor-details.Error": "错误",
-    		"nf-processor-details.ThisProcessorHasNoRelationships": "This Processor Has No Relationships",
-    		"nf-status-history.StatusHistory":"Status History",
-    		"nf-status-history.Processor": "Processor",
-    		"nf-status-history.InputPort": "Input Port",
-    		"nf-status-history.OutputPort": "Output Port",
-    		"nf-status-history.ProcessGroup": "Process Group",
-    		"nf-status-history.RemoteProcessGroup": "Remote Process Group",
-    		"nf-status-history.Connection": "Connection",
-    		"nf-status-history.Funnel": "Funnel",
-    		"nf-status-history.Template": "Template",
-    		"nf-status-history.Label": "Label",
-    		"nf-status-history.Message":"Insufficient history, please try again later.",
-    		"nf-status-history.Close": "Close",
-    		"nf-status-history.Start": "Start",
-    		"nf-status-history.End": "End",
-    		"nf-status-history.Min_Max_Mean": "Min/Max/Mean",
-    		"nf-status-history.NiFi": "NiFi",
-    		"nf-provenance.DataProvenance": " Data Provenance",
-    		"nf-provenance-lineage.Message1": "Computing FlowFile lineage...",
-    		"nf-provenance-lineage.ViewDetails": "View details",
-    		"nf-provenance-lineage.Message2": "The lineage search has completed successfully but there no results were found. The events may have aged off.",
-    		"nf-provenance-lineage.Find parents": "Find parents",
-    		"nf-provenance-lineage.Expand": "Expand",
-    		"nf-provenance-lineage.Collapse": "Collapse",
-    		"nf-provenance-lineage.Cancel": "Cancel",
-    		"nf-provenance-lineage.Lineage Results": "Pedigree results",
-    		"nf-provenance-lineage.Process Lineage": "Process Lineage",
-    		"nf-provenance-table.Filter": "Filter",
-    		"nf-provenance-table.Message": "Showing the most recent ",
-    		"nf-provenance-table.Of": " of ",
-    		"nf-provenance-table.Events": "events.",
-    		"nf-provenance-table.Message4": " events, please refine the search.",
-    		"nf-provenance-table.Showing": "Showing ",
-    		"nf-provenance-table.Message5": " events that match the specified query, please refine the search.",
-    		"nf-provenance-table.Message6": "the events that match the specified query.",
-    		"nf-provenance-table.Details": "Details",
-    		"nf-provenance-table.Attributes": "Attributes",
-    		"nf-provenance-table.Content": "Content",
-    		"nf-provenance-table.ProvenanceEvent": "Provenance Event",
-    		"nf-provenance-table.Ok": "Ok",
-    		"nf-provenance-table.Message1": "Successfully submitted replay request.",
-    		"nf-provenance-table.Message2": "Search Events",
-    		"nf-provenance-table.Search": "Search",
-    		"nf-provenance-table.Message3": "Searching provenance events...",
-    		"nf-provenance-table.ByComponentName": "by component name",
-    		"nf-provenance-table.ByComponentType": "by component type",
-    		"nf-provenance-table.ByType": "by type",
-    		"nf-provenance-table.ByNode": "by node",
-    		"nf-provenance-table.Cluster": "cluster",
-    		"nf-provenance-table.ViewDetail": "View Details",
-    		"nf-provenance-table.ShowLineage": "Show Lineage",
-    		"nf-provenance-table.GoTo": "Go To",
-    		"nf-provenance-table.DateTime": "Date/Time",
-    		"nf-provenance-table.Type": "Type",
-    		"nf-provenance-table.FlowFileUuid": "FlowFile Uuid",
-    		"nf-provenance-table.Size": "Size",
-    		"nf-provenance-table.ComponentName": "Component Name",
-    		"nf-provenance-table.ComponentType": "Component Type",
-    		"nf-provenance-table.Node": "Node",
-    		"nf-provenance-table.Cancel": "Cancel",
-    		"nf-provenance-table.NoValueSet": "No value set",
-    		"nf-provenance-table.Claim": "Claim",
-    		"nf-provenance-table.InputClaim": "Input Claim",
-    		"nf-provenance-table.Provenance": "Provenance",
-    		"nf-provenance-table.Message7": "Unable to generate access token for viewing content.",
-    		"nf-provenance-table.Message8": "Unable to generate an access token for downloading content.",
-    		"nf-provenance-table.Message9": "No previously set value",
-    		"nf-provenance-table.Message10": "Searching for cause event...",
-    		"nf-provenance-table.Process": "Process",
-    		"nf-provenance-table.NoChildren": "No Children",
-    		"nf-provenance-table.NoParent": "No Parent",
-    		"nf-provenance-table.Bytes": " Bytes",
-    		"nf-cluster-search.Summary": "Summary",
-    		"nf-cluster-search.SelectNode": "Select node",
-    		"nf-cluster-search.Ok": "Ok",
-    		"nf-cluster-search.ClusterSearch": "Cluster Search",
-    		"nf-cluster-search.Message1": "No nodes match \\'",
-    		"nf-cluster-search.Message2": "More than one node matches \\'",
-    		"nf-cluster-search.Cancel": "Cancel",
-    		"nf-cluster-search.NiFiSumary": "NiFi Summary",
-    		"nf-cluster-search.Message3": "No node matching the search term",
-    		"nf-summary-table.Filter": "Filter",
-    		"nf-summary-table.Processors": "Processors",
-    		"nf-summary-table.Connections": "Connections",
-    		"nf-summary-table.InputPorts": "Input Ports",
-    		"nf-summary-table.OutputPorts": "Output Ports",
-    		"nf-summary-table.RemoteProcessGroups": "Remote Process Groups",
-    		"nf-summary-table.ProcessGroups": "Process Groups",
-    		"nf-summary-table.ByName": "by name",
-    		"nf-summary-table.ByType": "by type",
-    		"nf-summary-table.BySource": "by source",
-    		"nf-summary-table.ByDestination": "by destination",
-    		"nf-summary-table.ByUri": "by uri",
-    		"nf-summary-table.ViewDetail": "View Details",
-    		"nf-summary-table.SourceName": "SourceName",
-    		"nf-summary-table.Name": "Name",
-    		"nf-summary-table.RunStatus": "Run Status",
-    		"nf-summary-table.In": "In",
-    		"nf-summary-table.Size": "Size",
-    		"nf-summary-table.Message": "Count / data size in the last 5 min",
-    		"nf-summary-table.Read": "Read",
-    		"nf-summary-table.Write": "Write",
-    		"nf-summary-table.5min": "5 min",
-    		"nf-summary-table.Message1": "Data size in the last 5 min",
-    		"nf-summary-table.Out": "Out",
-    		"nf-summary-table.Tasks": "Tasks",
-    		"nf-summary-table.Time": "Time",
-    		"nf-summary-table.Message2": "Count / duration in the last 5 min",
-    		"nf-summary-table.Type": "Type",
-    		"nf-summary-table.GoTo": "Go To",
-    		"nf-summary-table.ShowHistory": "Show History",
-    		"nf-summary-table.ShowDetail": "Show Details",
-    		"nf-summary-table.ClusterProcessorSummary": "Cluster Processor Summary",
-    		"nf-summary-table.Node": "Node",
-    		"nf-summary-table.Queue": "Queue",
-    		"nf-summary-table.DestinationName": "Destination Name",
-    		"nf-summary-table.ClusterConnectionSummary": "Cluster Connection Summary",
-    		"nf-summary-table.Close": "Close",
-    		"nf-summary-table.Transferred": "Transferred",
-    		"nf-summary-table.Message3": "Count / data size transferred to and from connections in the last 5 min",
-    		"nf-summary-table.Sent": "Sent",
-    		"nf-summary-table.Received": "Received",
-    		"nf-summary-table.ClusterProcessGroupSummary": "Cluster Process Group Summary",
-    		"nf-summary-table.ClusterInputPortSummary": "Cluster Input Port Summary",
-    		"nf-summary-table.ClusterOutPutPortSummary": "Cluster Output Port Summary",
-    		"nf-summary-table.Transmitting": "Transmitting",
-    		"nf-summary-table.Target URI": "Target URI",
-    		"nf-summary-table.ClusterRemoteProcessGroupSummary": "Cluster Remote Process Group Summary",
-    		"nf-summary-table.JVM": "JVM",
-    		"nf-summary-table.System": "System",
-    		"nf-summary-table.SystemDiagnostics": "System Diagnostics",
-    		"nf-summary-table.Summary": " Summary",
-    		"nf-summary-table.Message4": "Based on the presence of announcements",
-    		"nf-summary-table.times": "times",
-    		"nf-summary-table.UsageFor": "Usage For",
-    		"nf-summary-table.GoToProcessor": "Go To Processor",
-    		"nf-summary-table.ViewStatus": "View Status",
-    		"nf-summary-table.ViewProcessor": "View Processor",
-    		"nf-summary-table.ViewConnect": "View Connect",
-    		"nf-summary-table.GoToConnect": "Go To Connect",
-    		"nf-summary-table.GoToProcessorGroup": "Go To Processor Group",
-    		"nf-summary-table.ViewProcessorGroup": "View Processor Group",
-    		"nf-summary-table.GoToInputPort": "Go To Input Port",
-    		"nf-summary-table.ViewInputPort": "View Input Port",
-    		"nf-summary-table.GoToOutputPort": "Go To Output Port",
-    		"nf-summary-table.ViewOutputPort": "View Output Port",
-    		"nf-summary-table.ViewRemoteProcessorGroup": "View Remote Processor Group",
-    		"nf-summary-table.aria1": "The data stream is stored using the repository",
-    		"nf-summary.Summary": "Summary",
-    		"nf-templates-table.Templates": " Templates",
-    		"nf-templates-table.Message": " Select template to import",
-    		"nf-templates-table.Filter": "Filter",
-    		"nf-templates-table.DeleteTemplate": "Delete Template",
-    		"nf-templates-table.Message1": "Delete template \'",
-    		"nf-templates-table.DownloadTemplate": "Download Template",
-    		"nf-templates-table.Message2": "Unable to generate an access token for downloading content.",
-    		"nf-templates-table.ByName": "by name",
-    		"nf-templates-table.ByDescription": "by description",
-    		"nf-templates-table.RemovieTemplate": "Remove Template",
-    		"nf-templates-table.DateTime": "Date/Time",
-    		"nf-templates-table.Name": "Name",
-    		"nf-templates-table.Description": "Description",
-    		"nf-templates-table.GroupId": "Process group Id",
-    		"nf-templates-table.Download": "Download",
-    		"nf-templates-table.AccessPolicies": "Access Policies",
-    		"nf-templates.Templates": "Templates",
-    		"nf-users.Users": "Users",
-    		"nf-users-table.Filter": "Filter",
-    		"nf-users-table.UserDetails": "User Details",
-    		"nf-users-table.Ok": "Ok",
-    		"nf-users-table.UserRoles": "User Roles",
-    		"nf-users-table.Apply": "Apply",
-    		"nf-users-table.Cancel": "Cancel",
-    		"nf-users-table.GroupRoles": "Group Roles",
-    		"nf-users-table.DeleteUser": "Delete User",
-    		"nf-users-table.Delete": "Delete",
-    		"nf-users-table.RevokeAccess": "Revoke Access",
-    		"nf-users-table.Revoke": "Revoke",
-    		"nf-users-table.SetUserGroup": "Set Users Group",
-    		"nf-users-table.Group": "Group",
-    		"nf-users-table.Message": "Group name cannot be blank.",
-    		"nf-users-table.ByUser": "by user",
-    		"nf-users-table.ByGroup": "by group",
-    		"nf-users-table.ByRole": "by role",
-    		"nf-users-table.AuthorizationPending": "Authorization Pending",
-    		"nf-users-table.AccessRevoked": "Access Revoked",
-    		"nf-users-table.NoRolesSet": "No roles set",
-    		"nf-users-table.Message1": "Multiple users with different roles",
-    		"nf-users-table.Message2": "Multiple users with different status",
-    		"nf-users-table.Message3": "No status set",
-    		"nf-users-table.EditAccess": "Edit Access",
-    		"nf-users-table.RevokeAccess.Ungroup": "Ungroup",
-    		"nf-users-table.DeleteAccount": "Delete Account",
-    		"nf-users-table.User": "User",
-    		"nf-users-table.Roles": "Roles",
-    		"nf-users-table.LastAccessed": "Last Accessed",
-    		"nf-users-table.Status": "Status",
-    		"nf-users-table.GroupUsers": "Group Users",
-    		"nf-users-table.Message4": "Select one or more users to group.",
-    		"nf-users-table.Message5": "Remove all users from group \\'",
-    		"nf-users-table.Message6": "Remove user \\'",
-    		"nf-users-table.Message7": "\\' from group \\'",
-    		"nf-users-table.UserGroup": "User/Group",
-    		"nf-users-table.Edit": "Edit",
-    		"nf-users-table.Remove": "Remove",
-    		"jquery-propertytable.SensitiveValueSet": "Sensitive value set",
-    		"jquery-propertytable.EmptyStringSet": "Empty string set",
-    		"jquery-propertytable.NoValueSet": "no value set",
-    		"jquery-propertytable.RequiredField": "Required field",
-    		"jquery-propertytable.Property": "Property",
-    		"jquery-propertytable.Value": "Value",
-    		"jquery-propertytable.PropertyName": "Property Name",
-    		"jquery-propertytable.NewProperty": "New property",
-    		"jquery-propertytable.Ok": "Ok",
-    		"jquery-propertytable.Delete": "Delete",
-    		"jquery-propertytable.GoTo": "Go To",
-    		"jquery-propertytable.Cancel": "Cancel",   
-    		"jquery-propertytable.Empty": "Empty",
-    		"jquery-propertytable.SetEmptyString": "Set Empty String",
-    		"jquery-propertytable.ControllerService" : "Controller Service",
-    		"jquery-propertytable.Tags" : "Tags",
-    		"jquery-propertytable.Create" : "Create",
-    		"jquery-propertytable.Description" : "Description",
-    		"jquery-propertytable.AddControllerService" : "Add Controller Service",
-    		"jquery-propertytable.AddProperty": "Add Property",
-    		"jquery-propertytable.PropertyExists": "Property Exists",
-    		"jquery-propertytable.Message0": "A property with this name already exists。",
-    		"jquery-propertytable.Message": "A property with this name already exists.",
-    		"jquery-propertytable.Message1": "Property name must be specified.",
-    		"jquery-propertytable.Message3": "Create new service ...",
-    		"jquery-propertytable.Message2": "No controller service types found that are applicable for this property.",
-    		"slick.editors.Message1": "Please enter a valid integer",
-    		"slick.editors.Message2": "Please enter a valid positive number",
-    		"slick.grid.Message1": "Slickgrid requires a valid container，",
-    		"slick.grid.Message2": "Does not exist in the DOM",
-    		"slick.grid.Message3": "Style table not found.",
-    		"slick.grid.Message4": "Add cell Css style: cell CSS hash key'",
-    		"slick.grid.Message5": "'already exists.",
-    		"slick.grid.Message6": "From node acquisition unit: Unable to get unit -",
-    		"slick.grid.Message7": "Grid : Make the active cell editable: options.editable to false when it should never be called",
-    		"slick.grid.Message8": "The selection model is not set",
-    		"jquery-tagcloud.NoTagsSpecified": "Unspecified label" 
-
-    };
-    return {
-        msg: function (key) {
-            if (locale === "en") {
-                return en[key];
-            }
-            if ((locale === "cn")) {
-                return cn[key];
-            }
-        }
-    };
-})();
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js
deleted file mode 100644
index 769046e9eec9..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js
+++ /dev/null
@@ -1,1522 +0,0 @@
-
-nf._ = (function () {
-    var locale = "jp";
-    var jp = {
-        "nf-about": "データフロー",
-        "nf-bulletin-board.defaultFilterText": "フィルタリング",
-        "nf-bulletin-board.ByMessage": "情報でフィルタリングします。",
-        "nf-bulletin-board.ByName": "名前でフィルタリングします。",
-        "nf-bulletin-board.ById": "識別子でフィルタリングします。",
-        "nf-bulletin-board.ByGroupId": "グループ識別子でフィルタリングします。",
-        "nf-bulletin-board.Message1": "フィルタリング ",
-        "nf-bulletin-board.Message2": " マッチング \\\\'",
-        "nf-bulletin-board.Message3": "自動リフレッシュ開始",
-        "nf-bulletin-board.Message4": "自動リフレッシュ終了",
-		"nf-bulletin-board.Message5": "削除フィルター",
-        "nf-bulletin-board.BulletinBoard": " 掲示板",
-		"nf-actions.UpdateResource": "更新のソース",
-        "nf-actions.Refreshing": "更新中",
-        "nf-actions.RemoteGroupProcess": "リモート処理グループ",
-        "nf-actions.NoTargetURIDefined": "ターゲットURIが定義されていません。",
-        "nf-actions.Message1": "該当するコンポーネントを選択していません。該当するコンポーネントを選択して活性化し、且つ、現在コンポーネントが実行されていないことを保証します。",
-        "nf-actions.Message2": "該当するコンポーネントを選択していません。該当するコンポーネントを選択してオフラインさせ、現在コンポーネントが実行されていないことを保証します。",
-        "nf-actions.Message3": "該当するコンポーネントを選択していません。該当するコンポーネントを選択して起動し、現在コンポーネントが実行されていません。",
-        "nf-actions.Message4": "該当するコンポーネントを選択していません。終了するコンポーネントを選択してください。",
-        "nf-actions.Message5": "該当するコンポーネントを選択していません。削除するコンポーネントを選択してください",
-        "nf-actions.EmptyQueue": "空きのキュー",
-        "nf-actions.Message6": "キューをクリアしてよろしいですか。すべてのフローファイルはクリアされます。",
-        "nf-actions.Cancel": "キャンセル",
-        "nf-actions.Empty": "空き",
-        "nf-actions.Stop": "終了",
-        "nf-actions.Message7": " キューからクリアされます。",
-        "nf-actions.Message8": "クリアされるフローファイルがありません。",
-        "nf-actions.Message9": "現在の選択では、テンプレートを作成できません。",
-        "nf-actions.Create": "作成",
-        "nf-actions.Template": "テンプレート '",
-        "nf-actions.Message11": "' 正しく作成しました。",
-        "nf-actions.Message12": "コピーペーストする時、エラーが発生しました。",
-        "nf-canvas-toobbar.Start": "起動",
-        "nf-canvas-toobbar.Stop": "終了",
-        "nf-canvas-toobbar.Copy": "コピー",
-        "nf-canvas-toobbar.Paste": "ペースト",
-        "nf-canvas-toobbar.Group": "グループ",
-        "nf-canvas-toobbar.Enable": "イネーブル",
-        "nf-canvas-toobbar.Disable": "ディセーブル",
-        "nf-canvas-toobbar.CreateTemplate": "テンプレート作成",
-        "nf-canvas-toobbar.ChangeColor": "色変更",
-        "nf-canvas-toobbar.Delete": "削除",        
-        "nf-canvas-header.OK": "はい",
-        "nf-canvas-header.CreateTemplate": "テンプレート作成",
-        "nf-canvas-header.Fill": "記入",
-        "nf-canvas-header.Apply": "適用",
-        "nf-canvas-header.Cancel": "キャンセル",
-        "nf-canvas-header.Message": "現在のグループをリフレッシュできません。",
-        "nf-canvas-toolbox.Input": "入力",
-        "nf-canvas-toolbox.OutPut": "出力",        
-        "nf-canvas-toolbox.Filter": "フィルター",
-        "nf-canvas-toolbox.Processor": "プロセッサー",
-        "nf-canvas-toolbox.InputPort": "インプットポート",
-        "nf-canvas-toolbox.OutputPort": "アウトプットポート",
-        "nf-canvas-toolbox.ProcessGroup": "プロセスグループ",
-        "nf-canvas-toolbox.RemoteProcessGroup": "リモートプロセスグループ",
-        "nf-canvas-toolbox.Connection": "接続",
-        "nf-canvas-toolbox.Funnel": "じょうご",
-        "nf-canvas-toolbox.Template": "テンプレート",
-        "nf-canvas-toolbox.Label": "ラベル",
-        "nf-canvas-toolbox.Add": "追加",
-        "nf-canvas-toolbox.Cancel": "キャンセル",
-        "nf-canvas-toolbox.Instantiate Template": "インスタンス化したテンプレート",
-        "nf-canvas-toolbox.Message": "テンプレートはデータフローシステムにロードされていません。",
-        "nf-canvas-toolbox.Type": "タイプ",
-        "nf-canvas-toolbox.Tags": "ラベル",
-        "nf-canvas-toolbox.Message1": "説明を指定していません。",
-        "nf-canvas-toolbox.AddProcessor": "プロセッサー追加",
-        "nf-canvas-toolbox.AddPort": "ポート追加",
-        "nf-canvas-toolbox.AddProcessGroup": "プロセスグループ追加",
-        "nf-canvas-toolbox.AddRemoteProcessGroup": "リモートプロセスグループ追加",
-        "nf-canvas-utils.Message1": "特定のコンポーネントグループをロードできません.",
-        "nf-canvas-utils.Message2": "特定のコンポーネントが見つかりませんでした。",
-        "nf-canvas-utils.Message3": "選択したグループに入れません。",
-        "nf-canvas-utils.Message4": "ポートをルートグループから移動できません。",
-        "nf-canvas-utils.Message5": "これらのポートは現在グループ外部に接続しています: <b>",
-        "nf-canvas-utils.Message6": "これらのポートはターゲットプロセスグループにあります: <b>",
-        "nf-canvas.Browser": "対応しないブラウザです。",
-        "nf-canvas.Message1": "フローチャートはSVGで表示すべきです。SVGに対応するブラウザを選択してください。",
-        "nf-connection-configuration.Add": "追加",
-        "nf-connection-configuration.Message0": "接続は、少なくとも１つのリレーションシップを選択すべきです。",
-        "nf-connection-configuration.Cancel": "キャンセル",
-        "nf-connection-configuration.Message1": "\\' いずれのリレーションシップにも対応しません。",
-        "nf-connection-configuration.Message2": "\\' いずれのアウトプットポートもありません。",
-        "nf-connection-configuration.Message4": "\\' いずれのインプットポートもありません。",
-        "nf-connection-configuration.Message6": "コンフィギュレーションエラー",
-        "nf-connection-configuration.ConfigureConnection": "接続コンフィギュレーショ",
-        "nf-connection-configuration.Detail": "詳細",
-        "nf-connection-configuration.Setting": "設定",
-        "nf-connection-configuration.CreateConnection": "接続作成",
-        "nf-connection-configuration.Apply": "アプリー",
-        "nf-connection-configuration.Message7": "接続は、少なくとも１つのリレーションシップを選択すべきです。",
-        "nf-connection-configuration.Message8": "接続コンフィギュレーション",
-        "nf-connection.Message1": "ループ接続には少なくとも２つの反曲点が必要です。",
-        "nf-connection.From": "から",
-        "nf-connection.To": "まで",
-        "nf-connection.Name": "名称",
-        "nf-connection.Queued": "キューイング",
-        "nf-context-menu.RefreshStatus": "リフレッシュ状態",
-        "nf-context-menu.LeaveGroup": "グループと離れます。",
-        "nf-context-menu.Configure": "コンフィギュレーション",
-        "nf-context-menu.ViewConfiguration": "コンフィギュレーションをビューします。",
-        "nf-context-menu.EnterGroup": "グループに入ります。",
-        "nf-context-menu.Start": "開始",
-        "nf-context-menu.Stop": "終了",
-        "nf-context-menu.RemotePorts": "リモートポート",
-        "nf-context-menu.EnableTransmission": "イネーブルに変換させます。",
-        "nf-context-menu.DisableTransmission": "ディセーブルに変換させます。",
-        "nf-context-menu.Stats": "ステータス",
-        "nf-context-menu.DataProvenance": "データ出所",
-        "nf-context-menu.BringFront": "フロントに持ってきます",
-        "nf-context-menu.GoToSource": "ソースに入ります。",
-        "nf-context-menu.GoToDestination": "ターゲットに入ります。",
-        "nf-context-menu.UpstreamConnections": "上流接続",
-        "nf-context-menu.DownstreamConnections": "下流接続",
-        "nf-context-menu.Usage": "用途",
-        "nf-context-menu.Refresh": "リフレッシュ",
-        "nf-context-menu.GoTo": "エントリー",
-        "nf-context-menu.ChangeColor": "色変更",
-        "nf-context-menu.CenterInView": "ビュー中央合わせ",
-        "nf-context-menu.Copy": "コピー",
-        "nf-context-menu.Paste": "ペースト",
-        "nf-context-menu.MoveParentGroup": "親グループに移動します。",
-        "nf-context-menu.EmptyQueue": "空きのキュー",
-        "nf-context-menu.Delete": "削除",
-        "nf-controller-service.ConfigurationError": "コンフィギュレーションエラー",
-        "nf-controller-service.Cancel": "キャンセル",
-        "nf-controller-service.Close": "閉じる",
-        "nf-controller-service.Message1": "ディセーブルにする手順",
-        "nf-controller-service.ActionCanceled": "動作キャンセル",
-        "nf-controller-service.Message2": "イネーブルリクエストの動作はキャンセルされましたが、一部のリクエストは実行たかもしれません。 サービスリレーションシップのすべてのコンポーネントを検証してください。",
-        "nf-controller-service.Message3": "イネーブル手順 ",
-        "nf-controller-service.Message4": "動作キャンセル",
-        "nf-controller-service.Message5": "ディセーブルリクエストの動作はキャンセルされましたが、、一部のリクエストは実行たかもしれません。 サービスリレーションシップのすべてのコンポーネントを検証してください。",
-        "nf-controller-service.Message6": "設定を保存しますか?",
-        "nf-controller-service.Settings": "コンフィギュレーション",
-        "nf-controller-service.Properties": "プロパティ",
-        "nf-controller-service.Comments": "コメント",
-        "nf-controller-service.Message7": "コンフィギュレーションコントローラーサービス",
-        "nf-controller-service.Message8": "そのサービスディセーブルをコントロールします。",
-        "nf-controller-service.Disable": "ディセーブル",
-        "nf-controller-service.ServiceOnle": "サービスのみ",
-        "nf-controller-service.Message9": "現在のコントローラーサービスだけをイネーブルにします。",
-        "nf-controller-service.Message10": "サービスと関連关コンポーネント",
-        "nf-controller-service.Message11": "コントローラーサービスをイネーブルにします。リレーションシップコンポーネントをイネーブル/起動させます。",
-        "nf-controller-service.Message12": "コントロールサーバーをイネーブルにします。",
-        "nf-controller-service.Enable": "イネーブル",
-        "nf-controller-service.Apply": "アプリー",
-        "nf-controller-service.Advanced": "アドバンスド",
-        "nf-controller-service.Message13": "アドバンスド設定前、変更を保存しますか?",
-        "nf-controller-service.Ok": "はい",
-        "nf-go-to.Close": "閉じる",
-        "nf-go-to.DownstreamConnections": "下流接続",
-        "nf-go-to.UpstreamConnections": "上流接続",
-        "nf-go-to.Message1": "上流接続がありません。",
-        "nf-go-to.Message2": "下流接続がありません。",        
-        "nf-port-configuration.ConfigurePort": "コンフィギュレーションポート",
-        "nf-port-configuration.Apply": "アプリー",
-        "nf-port-configuration.ConfigurationError": "コンフィギュレーションエラー",
-        "nf-port-configuration.Cancel": "キャンセル",
-        "nf-port-details.PortDetails": "ポート詳細",
-        "nf-port-details.OK": "はい",
-        "nf-process-group-configuration.ConfigureProcessGroup": "コンフィギュレーションプロセスグループ",
-        "nf-process-group-configuration.Apply": "アプリー",
-        "nf-process-group-configuration.Cancel": "キャンセル",
-        "nf-process-group-details.ProcessGroupDetails": "プロセスグループ詳細",
-        "nf-process-group-details.Ok": "アプリー",
-        "nf-process-group.Message1": "コメントがありません",
-        "nf-process-group.Queued": "キューイング",
-        "nf-process-group.In": "入力",
-        "nf-process-group.ReadWrite": "リード/ライト",
-        "nf-process-group.Out": "出力",
-        "nf-process-group.5min": "(5 分間)",
-        "nf-processor-configuration.TimerDriven": "時間ドライブ",
-        "nf-processor-configuration.Message1": "プロセッサーは計画時間どおり実行されます。",
-        "nf-processor-configuration.EventDriven": "イベントドライブ",
-        "nf-processor-configuration.Message2": "プロセッサーはイベントドライブどおりに実行します(例、フローファイルがキューに入る)。計画タスクポリシーは打診的です。",
-        "nf-processor-configuration.OnPrimaryNode": "メインノードにあります。",
-        "nf-processor-configuration.Message3": "プロセッサーはメインノードで指定時間間隔どおりに次を実行されます。Processor will be scheduled on the primary node on an interval defined by the run schedule.",
-        "nf-processor-configuration.CronDriven": "CRONドライブ",
-        "nf-processor-configuration.Message5": "プロセッサーはCRON形式の指定時間で実行されます。",
-        "nf-processor-configuration.ConfigurationError": "コンフィギュレーションエラー",
-        "nf-processor-configuration.Message6": "コントローラーサービスに入る前、変更を保存しますか?",
-        "nf-processor-configuration.Settings": "設定",
-        "nf-processor-configuration.Scheduling": "計画実行中",
-        "nf-processor-configuration.Properties": "プロパティ",
-        "nf-processor-configuration.Comments": "コメント",
-        "nf-processor-configuration.ConfigureProcessor": "コンフィギュレーションプロセッサー",
-        "nf-processor-configuration.Debug": "デバッグ",
-        "nf-processor-configuration.Info": "情報",
-        "nf-processor-configuration.Warn": "警告",
-        "nf-processor-configuration.Error": "エラー",
-        "nf-processor-configuration.Apply": "アプリー",
-        "nf-processor-configuration.Cancel": "キャンセル",
-        "nf-processor-configuration.Advanced": "アドバンスド",
-        "nf-processor-configuration.Message7": "アドバンスド設定に入る前に、変更を保存しますか?",
-        "nf-processor.In": "入力",
-        "nf-processor.ReadWrite": "リード/ライト",
-        "nf-processor.Out": "出力",
-        "nf-processor.TasksTime": "タスク/時間",
-        "nf-processor.5min": "(5 分間)",
-        "nf-registration.Thanks": "ありがとうございました。",
-        "nf-registration.Message1": "您的リクエスト将被快速执行.",
-        "nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "コンフィギュレーションリモートプロセスグループ",
-        "nf-remote-process-group-configuration.Apply": "アプリー",
-        "nf-remote-process-group-configuration.ConfigurationError": "コンフィギュレーションエラー",
-        "nf-remote-process-group-configuration.Cancel": "キャンセル",
-        "nf-remote-process-group-details.RemoteProcessGroupDetails": "リモートプロセスグループ詳細",
-        "nf-remote-process-group-details.Ok": "はい",
-        "nf-remote-process-group-ports.ConfigureRemotePort": "コンフィギュレーションリモートポート",
-        "nf-remote-process-group-ports.Apply": "アプリー",
-        "nf-remote-process-group-ports.ConfigurationError": "コンフィギュレーションエラー",
-        "nf-remote-process-group-ports.Message1": "現在タスク要求整数值.",
-        "nf-remote-process-group-ports.Cancel": "キャンセル",
-        "nf-remote-process-group-ports.RemoteProcessGroupPorts": "リモートプロセスグループポート",
-        "nf-remote-process-group-ports.Close": "閉じる",
-        "nf-remote-process-group-ports.Message2": "説明がありません。",
-        "nf-remote-process-group.Message1": "コメントがありません。",
-        "nf-remote-process-group.Sent": "送信",
-        "nf-remote-process-group.Received": "受信",
-        "nf-remote-process-group.5min": "(5 分間)",
-        "nf-remote-process-group.Message2": "Site-to-Site は安全です。",
-        "nf-remote-process-group.Message3": "Site-to-Site は安全ではありません。",
-        "nf-remote-process-group.Message4": "現在、リモートフローは実行されていません。",
-        "nf-reporting-task.ConfigurationError": "コンフィギュレーションエラー",
-        "nf-reporting-task.Message1": "コントローラーサービスに入る前に、設定を保存しますか。?",
-        "nf-reporting-task.Settings": "設定",
-        "nf-reporting-task.Properties": "プロパティ",
-        "nf-reporting-task.Comments": "コメント",
-        "nf-reporting-task.ConfigureReportingTask": "レポートタスクを設定します。",
-        "nf-reporting-task.Node": "ノード",
-        "nf-reporting-task.ClusterManager": "クラスターマネージャー",
-        "nf-reporting-task.TimerDriven": "時間ドライブ",
-        "nf-reporting-task.Message2": "レポートタスクは指定時間間隔で実行されます。",
-        "nf-reporting-task.CRONDriven": "CRONドライブ",
-        "nf-reporting-task.Message3": "レポートタスクはCRONコンフィギュレーションで実行されます。",
-        "nf-reporting-task.Apply": "アプリー",
-        "nf-reporting-task.Cancel": "キャンセル",
-        "nf-reporting-task.Advanced": "アドバンスド",
-        "nf-reporting-task.Message4": "アドバンスド設定に入る前に、変更を保存しますか?",
-        "nf-search.Search": "検索",
-        "nf-secure-port-configuration": "設定",
-        "nf-secure-port-configuration.AccessControl": "権限制御",
-        "nf-secure-port-configuration.ConfigureSecurePort": "コンフィギュレーションセキュリティポート",
-        "nf-secure-port-configuration.Apply": "アプリー",
-        "nf-secure-port-configuration.Cancel": "キャンセル",
-        "nf-secure-port-configuration.InputPort": "インプットポート",
-        "nf-secure-port-configuration.OutputPort": "アウトプットポート",
-        "nf-secure-port-details.Settings": "設定",
-        "nf-secure-port-details.AccessControl": "権限制御",
-        "nf-secure-port-details.SecurePortDetails": "セキュリティポート詳細",
-        "nf-secure-port-details.Ok": "はい",
-        "nf-settings.Filter": "フィルター",
-        "nf-settings.Message1": "スチームパッケージは正しく作成されました。",
-        "nf-settings.Message2": "設定は正しく適用されました。",
-        "nf-settings.Message3": "コントローラーサービスのタイプを選択すべきです。",
-        "nf-settings.Text": "ノード",
-        "nf-settings.ClusterManager": "クラスターマネージャー",
-        "nf-settings.Message4": "コントローラーサービスはノードで利用できます。",
-        "nf-settings.Message5": "コントローラーサービスはクラスターマネージャーで利用できます。",
-        "nf-settings.Message6": "説明情報がありません。",
-        "nf-settings.Message7": "コントローラーサービスを追加します。",
-        "nf-settings.Add": "追加",
-        "nf-settings.Cancel": "キャンセル",
-        "nf-settings.Node": "ノード",
-        "nf-settings": "クラスターマネージャー",
-        "nf-settings.ViewDetail": "詳細を確認します。",
-        "nf-settings.Disable": "ディセーブル",
-        "nf-settings.Enable": "イネーブル",
-        "nf-settings.Remove": "リムーブ",
-        "nf-settings.Usage": "用途",
-        "nf-settings.Name": "名称",
-        "nf-settings.State": "ステータス",
-        "nf-settings.Availability": "取得できます。",
-        "nf-settings.Message8": "レポートタスク仅ノードは取得できます。",
-        "nf-settings.Message9": "レポートタスククラスターマネージャーを取得する権限があります。",
-        "nf-settings.Type": "タイプ",
-        "nf-settings.Tags": "ラベル",
-        "nf-settings.Message10": "指定した説明がありません",
-        "nf-settings.Message11": "レポートタスクを追加します。",
-        "nf-settings.ViewDetails": "詳細を確認します。",
-        "nf-settings.Stop": "終了",
-        "nf-settings.Edit": "編集",
-        "nf-settings.Start": "開始",
-        "nf-settings.RunStatus": "実行ステータス",
-        "nf-settings.General": "共通",
-        "nf-settings.ControllerServices": "コントローラーサービス",
-        "nf-settings.ReportingTasks": "レポートタスク",
-        "nf-settings.Message12": "新しいコントローラーサービスを作成します",
-        "nf-settings.Message13": "新しいレポートタスクを作成します。",
-        "nf-settings.Settings": " 設定",
-        "nf-cluster.Cluster": " クラスター",
-        "nf-cluster-table.Filter": "フィルターを使います。",
-        "nf-cluster-table.Message1": "接続 \\'",
-        "nf-cluster-table.Message2": "\\' 当該クラスターにしますか?",
-        "nf-cluster-table.Message3": "切断 \\'",
-        "nf-cluster-table.Message4": "\\' 当該クラスターから　しますか?",
-        "nf-cluster-table.Message5": "リムーブ \\'",
-        "nf-cluster-table.Message6": "\\' 当該クラスターから　しますか?",
-        "nf-cluster-table.NodeDetails": "ノード詳細",
-        "nf-cluster-table.Ok": "はい",
-        "nf-cluster-table.ByAddress": "アドレスでフィルタリングします。",
-        "nf-cluster-table.ByStatus": "用ステータスフィルタリング",
-        "nf-cluster-table.ViewDetails": "詳細を確認します",
-        "nf-cluster-table.Node Address": "ノードアドレス",
-        "nf-cluster-table.ActiveThreadCount": "実行するスレッドの数",
-        "nf-cluster-table.Size": "サイズ",
-        "nf-cluster-table.Queue": "キューイング",                
-        "nf-cluster-table.Status": "ステータス",
-        "nf-cluster-table.Uptime": "実行時間",
-        "nf-cluster-table.LastHeartbeat": "最後のハートビート",
-        "nf-cluster-table.Connect": "接続",
-        "nf-cluster-table.Remove": "リムーブ",
-        "nf-cluster-table.Disconnect": "切断",
-        "nf-cluster-table.MakePrimary": "プライマリーにします。",
-        "nf-counters-table.Filter": "フィルター",
-        "nf-counters-table.ByName": "名称でフィルタリングします",
-        "nf-counters-table.ByContext": "コンテキストでフィルタリングします。",
-        "nf-counters-table.Context": "コンテキスト",
-        "nf-counters-table.Name": "名称",
-        "nf-counters-table.Value": "値",
-        "nf-counters-table.Reset": "リセット",
-        "nf-counters.Counters": " カウンター",
-        "nf-history-table.Filter": "フィルター",
-        "nf-history-table.ActionDetail": "動作詳細",
-        "nf-history-table.Ok": "はい",
-        "nf-history-table.ById": "IDでフィルタリングします。",
-        "nf-history-table.Message1": "コンポーネントIDに基づくフィルターは更新されました。",
-        "nf-history-table.ByUser": "ユーザーでフィルタリングします。",
-        "nf-history-table.Message2": "実行タスクに基づくユーザーのフィルター",
-        "nf-history-table.FilterHistory": "フィルター履歴",
-        "nf-history-table.Cancel": "キャンセル",
-        "nf-history-table.PurgeHistory": "履歴をクリアします。",
-        "nf-history-table.Purge": "クリア",
-        "nf-history-table.Message3": "履歴を削除してよろしいですか。 '",
-        "nf-history-table.Message3.1": "\\'\\?",
-        "nf-history-table.Message4": "終了日付は指定必須です。",
-        "nf-history-table.ViewDetails": "詳細を確認します",
-        "nf-history-table.DateTime": "日付/時間",
-        "nf-history-table.Name": "名称",
-        "nf-history-table.Type": "タイプ",
-        "nf-history-table.Operation": "操作",
-        "nf-history-table.User": "ユーザー",
-        "nf-history-table.Value": "値",
-        "nf-history-table.PreviousValue": "前の値",
-        "nf-history-table.SourceId": "ソースID",
-        "nf-history-table.SourceName": "ソース名称",
-        "nf-history-table.SourceType": "ソースタイプ",
-        "nf-history-table.Relationship": "リレーションシップ",
-        "nf-history-table.DestinationId": "デスティネーションID",
-        "nf-history-table.DestinationName": "デスティネーション名称",
-        "nf-history-table.DestinationType": "デスティネーションタイプ",
-        "nf-history-table.Group": "グループ",
-        "nf-history-table.GroupId": "グループID",
-        "nf-history-table.PreviousGroup": "前のグループ",
-        "nf-history-table.PreviousGroupId": "前グループID",
-        "nf-history-table.EndDate": "終了日付",
-        "nf-history-table.History": " 履歴",
-        "nf-common.sensitiveText": "敏感値の設定",
-        "nf-common.Message1": "異常が発生しました。",
-        "nf-common.Message2": "ログを確認してください。",
-        "nf-common.Message3": "データフローシステムにリンクできません。",
-        "nf-common.Message4": "ライセンスがありません。",
-        "nf-common.Message5": "データフローシステムのライセンスが必要です。",
-        "nf-common.Message6": "禁止",
-        "nf-common.Message7": "現在のデータフローシステムにライセンスを授与できません。",
-        "nf-common.Message9": "応用カーネルに通信できませんでした。再起動の前、ログを確認し、コンフィギュレーションエラーを修正してください。",
-        "nf-common.ParseError": "エラー分析",
-        "nf-common.Message10": "データフローからの返却を遮断できません。",
-        "nf-common.Message11": ": 異常で戻ります。",
-        "nf-common.Message12": "異常が発生しました。ログを確認してください。",
-        "nf-common.Message13": "値の設定がありません",
-        "nf-common.Message14": "文字列の設定は空きです。",
-        "nf-common.Message15": "ご利用のセッションはもうすぐに利用期限になります。自動ログオフされないように、再度ログインしてください。",
-        "nf-common.Message16": "現在ご利用の権限は限られています。権限のあるアカウントでログインしますか、あるいは権限のあるアカウントを申請してください。",
-        "nf-common.Message17": "ご利用のセッションは利用期限になっています。再度ロードし、新たにログインしてください。",
-        "nf-common.Message18": "ご利用のセッションは利用期限になっています。「はい」をクリックして、再度ログインしてください。",
-        "nf-common.Message19": "アプリーが実行されていることを確認し、ログを検査してください。",
-        "nf-common.Message20": "リクエストがタイムアウトになり、アプリーが実行されているかを確認し、ログを検査してください。",
-        "nf-common.Message21": "リクエストは終了されました。",
-        "nf-common.Message22": "リクエスト転送仕組みは失敗しました。アプリーが実行されており、アクセス権限を持つことを確認してください。",
-        "nf-common.SessionExpired": "リクエストがライムアウトです。",
-        "nf-common.AccessDenied": "権限を拒否します。",
-        "nf-common.DefaultValue": "デフォルト値:",   
-        "nf-common.SupportsExpressionLanuage":"対応する表現言語:",        
-        "nf-connection-details.FromProcessor": "プロセッサー",
-        "nf-connection-details.FromOutPut": "アウトプットから",
-        "nf-connection-details.FromInput": "インプットから",
-        "nf-connection-details.ToProcessor": "プロセッサーから",
-        "nf-connection-details.ToFunnel": "じょうごまで",
-        "nf-connection-details.ToInput": "インプットまで",
-        "nf-connection-details.ToOutput": "アウトプットまで",
-        "nf-connection-details.Details": "詳細",
-        "nf-connection-details.Settings": "設定",
-        "nf-connection-details.ConnectionDetails": "接続詳細",
-        "nf-connection-details.Ok": "はい",
-        "nf-dialog.Ok": "はい",
-        "nf-dialog.Yes": "はい",
-        "nf-dialog.No": "いいえ",
-        "nf-processor-details.Settings": "設定",
-        "nf-processor-details.Scheduling": "計画をスケジューリングしています。",
-        "nf-processor-details.Properties": "プロパティ",
-        "nf-processor-details.Comments": "コメント",
-        "nf-processor-details.ProcessorDetails": "プロセッサー詳細",
-        "nf-processor-details.Ok": "はい",
-        "nf-processor-details.Advanced": "アドバンスド",
-        "nf-status-history.StatusHistory":"ステータス履歴情報",        
-        "nf-status-history.Processor": "プロセッサー",
-        "nf-status-history.InputPort": "インプットポート",
-        "nf-status-history.OutputPort": "アウトプットポート",
-        "nf-status-history.ProcessGroup": "プロセスグループ",
-        "nf-status-history.RemoteProcessGroup": "リモートプロセスグループ",
-        "nf-status-history.Connection": "接続",
-        "nf-status-history.Funnel": "じょうご",
-        "nf-status-history.Template": "テンプレート",
-        "nf-status-history.Label": "ラベル",
-        "nf-status-history.Message":"十分の履歴情報がありません。後で試してください。",        
-        "nf-provenance.DataProvenance": " データソース",
-        "nf-provenance-lineage.Message1": "フローファイル関係を計算します...",
-        "nf-provenance-lineage.ViewDetails": "詳細を確認します",
-        "nf-provenance-lineage.Message2": "継承関係の検索は終わりましたが、結果が見つかりませんでした。イベントは期限になっている可能性があります。",
-        "nf-provenance-lineage.Find parents": "親を検索します",
-        "nf-provenance-lineage.Expand": "拡張",
-        "nf-provenance-lineage.Collapse": "崩溃",
-        "nf-provenance-lineage.Cancel": "キャンセル",
-        "nf-provenance-table.Filter": "フィルター",
-        "nf-provenance-table.Message": "最近の表示 ",
-        "nf-provenance-table.Of": " 中 ",
-        "nf-provenance-table.Events": " イベント. ",
-        "nf-provenance-table.Message4": " イベント、検索条件を修正してください。",
-        "nf-provenance-table.Showing": "表示 ",
-        "nf-provenance-table.Message5": " 検索条件に合致するイベント。検索条件を修正してください。 ",
-        "nf-provenance-table.Message6": "検索条件に合致するイベントです。 ",
-        "nf-provenance-table.Details": "詳細",
-        "nf-provenance-table.Attributes": "プロパティ",
-        "nf-provenance-table.Content": "コンテンツ",
-        "nf-provenance-table.ProvenanceEvent": "データソースイベント",
-        "nf-provenance-table.Ok": "はい",
-        "nf-provenance-table.Message1": "再生リクエストを正しくサミットしました。",
-        "nf-provenance-table.Message2": "検索イベント",
-        "nf-provenance-table.Search": "検索",
-        "nf-provenance-table.Message3": "データソースイベントを検索します...",
-        "nf-provenance-table.ByComponentName": "コンポーネント名でフィルタリングします",
-        "nf-provenance-table.ByComponentType": "コンポーネントタイプでフィルタリングします。",
-        "nf-provenance-table.ByType": "タイプフィルタリングで",
-        "nf-provenance-table.ByNode": "ノードフィルタリングで",
-        "nf-provenance-table.Cluster": "クラスター",
-        "nf-provenance-table.ViewDetail": "詳細を確認します",
-        "nf-provenance-table.ShowLineage": "継承関係を検査します。",
-        "nf-provenance-table.GoTo": "エントリー",
-        "nf-provenance-table.DateTime": "日付/時間",
-        "nf-provenance-table.Type": "タイプ",
-        "nf-provenance-table.FlowFileUuid": "フローファイル Uuid",
-        "nf-provenance-table.Size": "サイズ",
-        "nf-provenance-table.ComponentName": "コンポーネント名称",
-        "nf-provenance-table.ComponentType": "コンポーネントタイプ",
-        "nf-provenance-table.Node": "ノード",
-        "nf-provenance-table.Cancel": "キャンセル",
-        "nf-provenance-table.NoValueSet": "値がありません",
-        "nf-provenance-table.Claim": "アサーション",
-        "nf-provenance-table.InputClain": "インプットアサーション",
-        "nf-cluster-search.SelectNode": "ノード選択",
-        "nf-cluster-search.Ok": "はい",
-        "nf-cluster-search.Message1": "マッチングするノードがありません。 \\'",
-        "nf-cluster-search.Message2": "２つ以上のノードがマッチングします。 \\'",
-        "nf-cluster-search.Cancel": "キャンセル",
-        "nf-cluster-search.NiFiSumary": "データフローサマリー",
-        "nf-summary-table.Filter": "フィルター",
-        "nf-summary-table.Processors": "プロセッサー",
-        "nf-summary-table.Connections": "接続",
-        "nf-summary-table.InputPorts": "インプットポート",
-        "nf-summary-table.OutputPorts": "アウトプットポート",
-        "nf-summary-table.RemoteProcessGroups": "リモートプロセスグループ",
-        "nf-summary-table.ProcessGroups": "プロセスグループ",
-        "nf-summary-table.ByName": "名前でフィルタリングします",
-        "nf-summary-table.ByType": "タイプでフィルタリングします",
-        "nf-summary-table.BySource": "ソースでフィルタリングします",
-        "nf-summary-table.ByDestination": "ターゲットでフィルタリングします",
-        "nf-summary-table.ByUri": "uriでフィルタリングします",
-        "nf-summary-table.ViewDetail": "詳細を確認します",
-        "nf-summary-table.SourceName": "ソース名称",
-        "nf-summary-table.Name": "名称",
-        "nf-summary-table.RunStatus": "実行ステータス",
-        "nf-summary-table.In": "入力",
-        "nf-summary-table.Size": "サイズ",
-        "nf-summary-table.Message": "最後5分間の数 / データサイズ",
-        "nf-summary-table.Read": "リード",
-        "nf-summary-table.Write": "ライト",
-        "nf-summary-table.5min": "5分間",
-        "nf-summary-table.Message1": "最後5分間のデータ量",
-        "nf-summary-table.Out": "出力",
-        "nf-summary-table.Tasks": "タスク",
-        "nf-summary-table.Time": "時間",
-        "nf-summary-table.Message2": "最後5分間の数 / 延長期",
-        "nf-summary-table.Type": "タイプ",
-        "nf-summary-table.GoTo": "エントリー",
-        "nf-summary-table.ShowHistory": "履歴表示",
-        "nf-summary-table.ShowDetail": "詳細表示",
-        "nf-summary-table.ClusterProcessorSummary": "クラスタープロセッサーの一覧",
-        "nf-summary-table.Node": "ノード",
-        "nf-summary-table.Queue": "キュー",
-        "nf-summary-table.SourceName": "ソース名称",
-        "nf-summary-table.DestinationName": "ターゲット名称",
-        "nf-summary-table.ClusterConnectionSummary": "クラスター接続一覧",
-        "nf-summary-table.Close": "閉じる",
-        "nf-summary-table.Transferred": "転送終了",
-        "nf-summary-table.Message3": "最後5分間コネクターから送信する数 / データサイズ",
-        "nf-summary-table.Sent": "送信する",
-        "nf-summary-table.Received": "受信する",
-        "nf-summary-table.ClusterProcessGroupSummary": "クラスタープロセスグループ一覧",
-        "nf-summary-table.ClusterInputPortSummary": "クラスターインプットポート一覧",
-        "nf-summary-table.ClusterOutPutPortSummary": "クラスターアウトプットポート一覧",
-        "nf-summary-table.Transmitting": "変換中",
-        "nf-summary-table.Target URI": "ターゲット URI",
-        "nf-summary-table.ClusterRemoteProcessGroupSummary": "クラスターリモートプロセスグループ一覧",
-        "nf-summary-table.JVM": "Javaバーチャルマシン",
-        "nf-summary-table.System": "システム",
-        "nf-summary-table.SystemDiagnostics": "システム診断",
-        "nf-summary-table.Summary": " サマリー",
-        "nf-templates-table.Templates": " テンプレート",
-        "nf-templates-table.Message": "テンプレートを選択し、インポートします",
-        "nf-templates-table.Filter": "フィルタリング",
-        "nf-templates-table.Message1": "テンプレート削除 \"",
-        "nf-templates-table.ByName": "名称でフィルタリングします",
-        "nf-templates-table.ByDescription": "説明でフィルタリングします",
-        "nf-templates-table.RemovieTemplate": "テンプレートリムーブ",
-        "nf-templates-table.DateTime": "日付/時間",
-        "nf-templates-table.Name": "名称",
-        "nf-templates-table.Description": "説明",
-        "nf-users-table.Filter": "フィルタリング",
-        "nf-users-table.UserDetails": "ユーザー詳細",
-        "nf-users-table.Ok": "はい",
-        "nf-users-table.UserRoles": "ユーザーオール",
-        "nf-users-table.Apply": "アプリー",
-        "nf-users-table.Cancel": "キャンセル",
-        "nf-users-table.GroupRoles": "グループロール",
-        "nf-users-table.DeleteUser": "ユーザー削除",
-        "nf-users-table.Delete": "削除",
-        "nf-users-table.RevokeAccess": "権限を再度有効化します。",
-        "nf-users-table.Revoke": "再度有効化",
-        "nf-users-table.SetUserGroup": "ユーザーグループを設定します。",
-        "nf-users-table.Group": "グループ",
-        "nf-users-table.Message": "グループ名が空きになっていはいけません。",
-        "nf-users-table.ByUser": "ユーザーでフィルタリングします。",
-        "nf-users-table.ByGroup": "グループでフィルタリングします。",
-        "nf-users-table.ByRole": "ロールでフィルタリングします。",
-        "nf-users-table.AuthorizationPending": "ライセンスを授与しています。",
-        "nf-users-table.AccessRevoked": "権限は再度有効化されました。",
-        "nf-users-table.NoRolesSet": "設定されたロールがありません。",
-        "nf-users-table.Message1": "複数のユーザーの権限が異なります。",
-        "nf-users-table.Message2": "複数のユーザーのステータスが異なります。",
-        "nf-users-table.Message3": "ステータスが設定されていません。",
-        "nf-users-table.EditAccess": "権限編集",
-        "nf-users-table.RevokeAccess.Ungroup": "グループ離脱",
-        "nf-users-table.DeleteAccount": "アカウント削除",
-        "nf-users-table.User": "ユーザー",
-        "nf-users-table.Roles": "ロール",
-        "nf-users-table.LastAccessed": "最後アクセス",
-        "nf-users-table.Status": "ステータス",
-        "nf-users-table.GroupUsers": "グループ内のユーザー",
-        "nf-users-table.Message4": "１つあるいは複数のユーザーを選択します。",
-        "nf-users-table.Message5": "すべてのユーザーをグループからリムーブします。 \\'",
-        "nf-users-table.Message6": "削除 \\'",
-        "nf-users-table.Message7": "\\' グループから \\'",
-        "jquery-propertytable.SensitiveValueSet": "敏感値",
-        "jquery-propertytable.EmptyStringSet": "文字列は空きです。",
-        "jquery-propertytable.NoValueSet": "値がありません",
-        "jquery-propertytable.RequiredField": "必須のプロパティ",
-        "jquery-propertytable.Property": "プロパティ",
-        "jquery-propertytable.Value": "値",        
-        "jquery-propertytable.PropertyName": "プロパティ名称",
-        "jquery-propertytable.NewProperty": "プロパティ新規追加",        
-        "jquery-propertytable.Ok": "確認",        
-        "jquery-propertytable.Cancel": "キャンセル",
-        "jquery-propertytable.Empty": "空きの値",
-        "jquery-propertytable.ControllerService": "コントローラーサービス",
-        "jquery-propertytable.Tags": "ラベル",
-        "jquery-propertytable.Create": "作成",
-        "jquery-propertytable.Description": "説明",
-        "jquery-propertytable.Message": "プロパティがあります。",
-        "jquery-propertytable.Message1": "プロパティ名を指定しなければなりません。",
-        "jquery-propertytable.Message2": "当該プロパティに対応するコントローラーサービスがありません。",
-        "nf-actions.Header1": "アクティベーションコンポーネント",
-        "nf-actions.Header2": "オフラインコンポーネント",
-        "nf-actions.Header3": "コンポーネントの開始",
-        "nf-actions.Header4": "停止するコンポーネント",
-        "nf-actions.Header5": "リロード",
-        "nf-actions.Header6": "貼り付けエラー",
-        "nf-actions.CreateTemplate": "テンプレートを作成します。",
-        "nf-actions.Message13": "テンプレート名は空にすることはできません。",
-        "nf-actions.Message14": "パーセント完全な削除要求",
-        "nf-actions.Message15": "ストリーム・ファイル",
-        "nf-actions.Message16": "で",
-        "nf-actions.Message17": "外",
-        "nf-actions.Message18": "キューから削除しました。",
-        "nf-actions.Message19": "コンポーネントへの参照はありません。",
-        "nf-canvas-graph-controls-controller.ProcessGroup": "プロセッサ群",
-        "nf-canvas-graph-controls-controller.Processor": "プロセッサ",
-        "nf-canvas-graph-controls-controller.InputPort": "入力ポート",
-        "nf-canvas-graph-controls-controller.OutputPort": "出力ポート",
-        "nf-canvas-graph-controls-controller.RemoteProcessGroup": "リモートプロセスグループ",
-        "nf-canvas-graph-controls-controller.Funnel": "漏斗",
-        "nf-canvas-graph-controls-controller.Label": "ラベル",
-        "nf-canvas-graph-controls-controller.Connection": "接続",
-        "nf-canvas-graph-controls-controller.MultipleSelected": "選択した複数の",
-		"nf-canvas-global-menu-controller.About": "データストリームについて",
-		"nf-canvas-global-menu-controller.OK": "確認します",
-		"nf-canvas-operate-controller.SUCCESS": "サクセス",
-		"nf-canvas-operate-controller.SuccessContent": "テンプレートが正常にインポート。",
-		"nf-canvas-operate-controller.Upload": "アップロードテンプレート",
-		"nf-canvas-operate-controller.ButtonUpload": "アップロードテンプレート",
-		"nf-canvas-operate-controller.UploadTemplate": "テンプレートを選択していない。ブラウザでテンプレートを選択してください。",
-		"nf-canvas-operate-controller.Cancel": "キャンセル",
-		"nf-canvas-operate-controller.ChangeColor": "変色します",
-		"nf-canvas-operate-controller.Apply": "アプリケーション",
-		"nf-canvas-operate-controller.Error": "エラー",
-		"nf-canvas-operate-controller.CreateTemplate": "テンプレートを作成します。",
-		"nf-canvas-operate-controller.Message1": "テンプレートをインポートすることはできません。エラーのログを確認してください。",
-        "nf-canvas-flow-status.Processors": "プロセッサ",
-        "nf-canvas-flow-status.ProcessGroups": "治療群",
-        "nf-canvas-flow-status-controller.Processors": "プロセッサ",
-        "nf-canvas-flow-status-controller.ProcessGroups": "治療群",
-        "nf-canvas-flow-status-controller.RemoteProcessGroups": "リモート処理群",
-        "nf-canvas-flow-status-controller.Connection": "接続",
-        "nf-canvas-flow-status-controller.InputPorts": "入力ポート",
-        "nf-canvas-flow-status-controller.OutputPorts": "出力ポート",
-        "nf-canvas-flow-status-controller.Funnel": "漏斗",
-        "nf-canvas-flow-status-controller.no-matches": "結果は、クエリの要件を満たしていませんでした",
-		"nf-group-component.AddProcessGroup": "治療群を追加すること",
-		"nf-group-component.Add": "加えます",
-		"nf-group-component.Cancel": "キャンセル",
-		"nf-input-port-component.AddPort": "ポートを追加します。",
-		"nf-input-port-component.Add": "加えます",
-		"nf-input-port-component.Cancel": "キャンセル",
-		"nf-input-port-component.new-port-type": "エントリー",
-		"nf-output-port-component.Add": "加えます",
-		"nf-output-port-component.Cancel": "キャンセル",
-		"nf-output-port-component.new-port-type": "輸出",
-		"nf-processor-component.AddProcessor": "プロセッサを追加",
-		"nf-processor-component.AddProcessorContent": "このタイプの作成選択されているプロセッサを持っています。",
-		"nf-processor-component.Add": "加えます",
-		"nf-processor-component.Cancel": "キャンセル",
-		"nf-processor-component.Type": "タイプ",
-		"nf-processor-component.Tags": "标签",
-		"nf-processor-component.NoDescriptionSpecified": "説明が指定されていません",
-		"nf-remote-process-group-component.ConfigurationError": "設定エラー",
-		"nf-remote-process-group-component.AddRemoteProcessGroup": "リモートグループを追加します。",
-		"nf-remote-process-group-component.Add": "加えます",
-		"nf-remote-process-group-component.Cancel": "キャンセル",
-		"nf-template-component.AddTemplate": "テンプレートの追加",
-		"nf-template-component.Add": "加えます",
-		"nf-template-component.Cancel": "キャンセル",
-		"nf-template-component.InstantiateTemplate": "テンプレートのインスタンス化",
-		"nf-template-component.InstantiateTemplateContent": "いいえデータ・フロー・テンプレートがロードされません。",
-        "nf-canvas-header.components.AddGroup": "治療群を追加すること",
-        "nf-canvas-header.components.AddButton": "加えます",
-        "nf-canvas-header.components.CancelButton": "キャンセル",
-        "nf-canvas-utils.Header1": "治療群",
-        "nf-canvas-utils.Message7": "コンポーネントグループは、トップレベルでした",
-        "nf-canvas.ClusterConn": "クラスタ接続",
-        "nf-canvas.Message2": "このノードは、現在クラスタに接続されていません。ここでは、データストリームの任意の変更は、クラスタ内で複製されません。",
-        "nf-canvas.Message3": "これはただのクラスタノードに追加しました。ここでは、データストリームの任意の変更がクラスタ内で複製されます。",
-        "nf-component-state.Header1": "コンポーネントステータス",
-        "nf-component-state.Button1": "クローズ",
-        "nf-component-state.Content1": "コンポーネントは状態をクリアする必要はありません。",
-		"nf-component-state.Message1": "コンポーネントが活動を実行していないときは、コンポーネントのステータスはクリアのみ可能",
-		"nf-component-state.Key": "ボンド",
-		"nf-component-state.Value": "値",
-		"nf-component-state.Scope": "スコープ",
-		"nf-connection-configuration.ConnectionConfiguration": "接続形態",
-		"nf-connection-configuration.Message5": "許可されていない任意の出力ポート \\'",
-		"nf-connection.Connection": "接続",
-        "nf-connection.FlowFilesOlder": "ファイルには、流れを超えて",
-		"nf-context-menu.StatsHistory": "履歴状態",
-		"nf-context-menu.ViewState": "ビューステータス",
-		"nf-context-menu.QueueList": "キューリスト",
-		"nf-controller-service.ControllerService": "コントローラのサービス",
-		"nf-controller-service.Message14": "不正なコンポーネントを参照するため、無効にすることはできません。",
-		"nf-controller-service.Message15": "不正なコンポーネントを参照するため、有効にすることはできません。",
-		"nf-controller-service.Save": "保存",
-		"nf-controller-service.Message16": "変更を保存するには、サービスコントローラーに入る前に？",
-        "nf-controller-services.Add": "加えます",
-		"nf-controller-services.ControllerService": "コントローラのサービス",
-		"nf-controller-services.Message14": "あなたが作成するサービスコントローラーのタイプを選択する必要があります。",
-		"nf-controller-services.AddControllerService": "コントローラサービスを追加",
-		"nf-controller-services.Invalid": "失敗します",
-		"nf-controller-services.Disabled": "使用禁止",
-		"nf-controller-services.Disabling": "で無効に",
-		"nf-controller-services.Enabled": "使用可能",
-		"nf-controller-services.Enabling": "で有効に",
-		"nf-controller-services.toolTip": "発表の存在に基づいて並べ替え",
-		"nf-controller-services.Name": "名前",
-		"nf-controller-services.Type": "タイプ",
-		"nf-controller-services.Tags": "ラベル",
-		"nf-controller-services.State": "状態",
-		"nf-controller-services.ProcessGroup": "治療群",
-		"nf-controller-services.type-description": "説明が指定されていません",
-		"nf-controller-services.viewDtails": "詳細を参照してください。",
-		"nf-controller-services.usage": "使用法",
-		"nf-controller-services.disable": "無効にします",
-		"nf-controller-services.edit": "編集",
-		"nf-controller-services.enable": "有効にします",
-		"nf-controller-services.viewstate": "ビューステータス",
-		"nf-controller-services.remove": "削除します",
-		"nf-controller-services.acesspolicies": "アクセスポリシー",
-		"nf-custom-ui.AdvancedConfiguration": "高度な設定",
-		"nf-custom-ui.Message1": "設定ダイアログに高度なアクセスをアクセスするためのアクセストークンを生成することができません。",
-		"nf-draggable.ComponentPosition": "コンポーネント場所",
-		"nf-draggable.Message1": "無許可の変更先グループ。",
-		"nf-draggable.Message2": "各コンポーネントが承認される必要があり、変更を選択します。",
-        "nf-go-to.NoDownstreamComponents": "いいえ下流成分はありません",
-        "nf-go-to.NoUpstreamComponents": "いいえ、上流コンポーネントはありません",
-        "nf-go-to.Funnel": "漏斗",
-        "nf-label-configuration.ConfigureLabel": "[設定]タブ",
-		"nf-label-configuration.Apply": "アプリケーション",
-		"nf-label-configuration.Cancel": "キャンセル",
-		"nf-policy-management.ViewUserInterface": "ビューのユーザーインターフェイス",
-		"nf-policy-management.AcessController": "アクセスコントローラ",
-		"nf-policy-management.QueryProvenance": "発見源",
-		"nf-policy-management.AcessPolicies": "すべてのポリシーにアクセス",
-		"nf-policy-management.AcessUser": "アクセスユーザー/ユーザーグループ",
-		"nf-policy-management.retrieve": "詳しくは、情報検索サイト間",
-		"nf-policy-management.diagnostics": "ビューシステム解析",
-		"nf-policy-management.proxy": "プロキシユーザ要求",
-		"nf-policy-management.counters": "アクセスカウンター",
-		"nf-policy-management.ViewComponent": "ビューコンポーネント",
-		"nf-policy-management.ModifyComponent": "コンポーネントを変更",
-		"nf-policy-management.ViewData": "データを表示",
-		"nf-policy-management.ModifyData": "データを変更します",
-		"nf-policy-management.ReceiveData": "サイトにサイトを介してデータを受け取ります",
-		"nf-policy-management.SendData": "データを送信することによって、サイトへのサイト",
-		"nf-policy-management.ViewPolicies": "ビュー・ポリシー",
-		"nf-policy-management.ModifyPolicies": "ポリシーを変更",
-		"nf-policy-management.Searchusers": "検索ユーザー",
-		"nf-policy-management.Ok": "決定します",
-		"nf-policy-management.UserSearch": "ユーザーの検索します",
-		"nf-policy-management.Message1": "一致するユーザーません\\'",
-		"nf-policy-management.Message2": "複数のユーザーが一致します\\'",
-		"nf-policy-management.Cancel": "キャンセル",
-		"nf-policy-management.UpdatePolicy": "ポリシーを更新",
-		"nf-policy-management.Message3": "削除\\'",
-		"nf-policy-management.Message4": "\\'この戦略から？",
-		"nf-policy-management.Message5": "実際にこの戦略を削除したいですか？",
-		"nf-policy-management.Message6": "いいえ選択ポリシーはありません",
-		"nf-policy-management.Message7": "これにより、ユーザーはユーザーインターフェイスを表示することができ",
-		"nf-policy-management.Message8": "これにより、ユーザーは、クラスタ・レポート作成作業を含む/編集コントローラ、およびノードコントローラサービスを表示することができます",
-		"nf-policy-management.Message9": "ソースとユーザーがイベントを継承した検索要求を提出することができます",
-		"nf-policy-management.Message10": "ユーザーが表示することができます/すべてのコンポーネントのポリシーを変更",
-		"nf-policy-management.Message11": "これにより、ユーザーはユーザーグループを変更/表示することができます",
-		"nf-policy-management.Message12": "許可する他のデータを詳細にインスタンスが「サイトへのサイト」は、このデータストリームを取得するストリーム",
-		"nf-policy-management.Message13": "これにより、ユーザーは、システムの分析を表示することができます",
-		"nf-policy-management.Message14": "エージェントコンピュータが他人に代わって要求を送信する許可",
-		"nf-policy-management.Message15": "これにより、ユーザーは/編集カウンタを表示することができます",
-		"nf-policy-management.Message16": "ユーザーがコンポーネントの構成情報の詳細を表示することができます",
-		"nf-policy-management.Message17": "これは、ユーザがコンポーネントの設定情報の詳細を変更することができ",
-		"nf-policy-management.Message18": "これは、データソースとストリームファイルキュー内のアウトバウンド接続に、ユーザーがこのコンポーネントのメタデータとコンテンツを表示することができます",
-		"nf-policy-management.Message19": "これは、ユーザーがストリームファイルキューのアウトバウンド接続をクリアし、リプレイを提出することができます",
-		"nf-policy-management.Message20": "このポートは、データ・ストリーム・インスタンスからのデータを受信することを可能にします",
-		"nf-policy-management.Message21": "このポートは、データ・ストリーム・インスタンスにデータを送信することを可能にします",
-		"nf-policy-management.Message22": "これは、このコンポーネントのユーザーの見ることができます/編集するには、リストのユーザーが表示することができます",
-		"nf-policy-management.Message23": "ユーザーが表示することができます変更することができます/このコンポーネントのユーザーのリストを編集",
-		"nf-policy-management.Text1": "ディスプレイは、効果的な戦略を継承します",
-		"nf-policy-management.Text2": "いいえコンポーネント固有の管理者はありません。",
-		"nf-policy-management.Text3": "指定されたリソースポリシーへの不正なアクセス。",
-		"nf-policy-management.Text4": "ポリシーを表示する権限がありません。",
-		"nf-policy-management.Text5": "いいえ指定されたリソースポリシーはありません。",
-		"nf-policy-management.Text6": "指定されたリソースポリシーへの不正なアクセス。",
-		"nf-policy-management.Write": "書きます",
-		"nf-policy-management.Read": "読みます",
-		"nf-policy-management.View": "ビュー",
-		"nf-policy-management.Modify": "修正します",
-		"nf-policy-management.AllPolicies": "すべてのポリシー",
-		"nf-policy-management.Controller": "このコントローラ",
-		"nf-policy-management.ProcessorGroup": "治療群",
-		"nf-policy-management.reporting-tasks": "タスクを報告",
-		"nf-policy-management.NoUserSearch": "一致するユーザーません",
-		"nf-policy-management.Remove": "削除します",
-        "nf-process-group-configuration.General": "一般的な",
-        "nf-process-group-configuration.ControllerService": "コントローラのサービス",
-		"nf-processor-configuration.Error1": "同時タスクは整数値でなければなりません",
-		"nf-processor-configuration.Error2": "あなたは、事業計画を指定する必要があります。",
-		"nf-processor-configuration.Error3": "あなたは罰の期間を指定する必要があります",
-		"nf-processor-configuration.Error4": "あなたは、生産の継続時間を指定する必要があります",
-        "nf-processor-configuration.ThisProcessorHasNoRelationships": "このプロセッサは、重要ではありません。",
-        "nf-processor-configuration.ViewDetails": "詳細を参照してください。",
-        "nf-processor-configuration.Provenance": "ソース",
-        "nf-processor.5min-1": "5分",
-        "nf-queue-listing.QueueListing": "キューリスト",
-		"nf-queue-listing.Message1": "ダウンロード可能なコンテンツのアクセストークンを生成することができません。",
-		"nf-queue-listing.Message2": "アクセストークンを表示するためのコンテンツを生成することができません。",
-		"nf-queue-listing.Stop": "停止",
-		"nf-queue-listing.Message3": "キューは、ファイルをストリーミングしません.",
-		"nf-queue-listing.FlowFile": "ストリーム・ファイル",
-		"nf-queue-listing.Ok": "決定します",
-		"nf-queue-listing.Message4": "このキューのソースとターゲットは、現在実行されています。このリストは、もはや正確ではないかもしれません。",
-		"nf-queue-listing.Message5": "現在実行されているこのキューのソースは。このリストは、もはや正確ではないかもしれません。",
-		"nf-queue-listing.Message6": "このキューの目標は、この一覧は、もはや正確なものとすることができる。実行されていません。",
-		"nf-queue-listing.NoValueSet": "値が設定されていません",
-		"nf-queue-listing.Yes": "それは",
-		"nf-queue-listing.No": "いいえ",
-		"nf-queue-listing.Position": "場所",
-		"nf-queue-listing.FileName": "ファイル名",
-		"nf-queue-listing.FileSize": "ファイルサイズ",
-		"nf-queue-listing.queuedDuration": "待ち行列の長さ",
-		"nf-queue-listing.lineageDuration": "継承タイム",
-		"nf-queue-listing.penalized": "罰します",
-		"nf-queue-listing.node": "ノード",
-		"nf-queue-listing.Bytes": " バイト",
-		"nf-remote-process-group-configuration.Message5": "リモートプロセスグループの設定",
-		"nf-remote-process-group-ports.Message3": "このポートは削除されました。",
-		"nf-remote-process-group-ports.Message4": "同時タスクの数は、このポートのために計画する必要があります。",
-		"nf-remote-process-group-ports.transmissionSwitch": "スイッチポートの送信",
-		"nf-remote-process-group-ports.description": "指示に指定されていません。",
-        "nf-reporting-task.ReportingTask": "タスクを報告",
-		"nf-reporting-task.Save": "保存",
-		"nf-reporting-task.Ok": "決定します",
-        "nf-settings.ViewState": "ビューステータス",
-        "nf-settings.AccessPolicies": "アクセスポリシー",
-        "nf-settings.Invalid": "無効",
-        "nf-settings.Stopped": "停止",
-        "nf-settings.Running": "操作",
-        "nf-settings.Disabled": "無効にします",
-        "nf-cluster-table.None": "いいえ",
-        "nf-counters-table.Delete": "削除",
-        "nf-counters-table.Connect": "接続",
-        "nf-history.History": "歴史",
-		"nf-history-table.Message5": "IDベースのフィルタ修正コンポーネント",
-		"nf-history-table.Message6": "ユーザーのフィルタに基づいてアクションを実行",
-		"nf-history-table.NotAuthorized": "権限がありません",
-		"nf-history-table.Uri": "統一資源識別子",
-		"nf-history-table.EndTime": "終了時間",
-		"nf-login.Login": "ログイン",
-		"nf-login.Logining": "にログインしています...",
-		"nf-login.SUCCESS": "サクセス",
-		"nf-login.Denied": "ログインは拒否されました",
-		"nf-login.Message1": "サインインできません。",
-		"nf-login.Message2": "あなたがアクセス状態を確認することはできません",
-		"nf-login.Message3": "現在のデータ・ストリームは、ユーザー名/パスワードが設定されていません。",
-		"nf-common.History": "歴史",
-		"nf-common.SupportsExpressionLanguage": "式言語のサポート：",
-		"nf-common.Message23": "アプリケーションが実行されていることを確認し、ログにエラーがないかどうか確認してください。",
-		"nf-common.Message24": "データストリームと通信できません。",
-		"nf-common.Unauthorized": "権限がありません",
-		"nf-common.Message25": "このデータストリームを使用して認証を必要とします。",
-		"nf-common.Message26": "予期しないエラーが発生しました",
-		"nf-common.Error": "エラー",
-        "nf-common.Message27": "空の文字列を設定する前に",
-        "nf-common.Message28": "値は、前に設定されていません",
-        "nf-common.Bytes": " バイト",
-		"nf-connection-details.Processor": "プロセッサ",
-        "nf-connection-details.FromFunnel": "ホッパーから",
-        "nf-connection-details.NoValueSet": "決定します",
-		"nf-processor-details.Error": "エラー",
-		"nf-processor-details.ThisProcessorHasNoRelationships": "プロセッサは問題ではありません。",
-		"nf-status-history.Close": "クローズ",
-		"nf-status-history.Start": "始めます",
-		"nf-status-history.End": "終了",
-		"nf-status-history.Min_Max_Mean": "最低/最大/平均",
-		"nf-status-history.NiFi": "データ流",
-		"nf-provenance-lineage.Lineage Results": "血統結果",
-		"nf-provenance-lineage.Process Lineage": "連続プロセス",
-        "nf-provenance-table.InputClaim": "入力ステートメント",
-		"nf-provenance-table.Provenance": "ソース",
-		"nf-provenance-table.Message7": "アクセストークンを表示するためのコンテンツを生成することができません。",
-		"nf-provenance-table.Message8": "ダウンロード可能なコンテンツのアクセストークンを生成することができません。",
-		"nf-provenance-table.Message9": "いいえ値は以前に設定されていません",
-		"nf-provenance-table.Message10": "原因イベントを検索...",
-		"nf-provenance-table.Process": "進捗",
-		"nf-provenance-table.NoChildren": "子供なし",
-		"nf-provenance-table.NoParent": "いいえ両親はありません",
-		"nf-provenance-table.Bytes": " バイト",
-		"nf-cluster-search.Summary": "サマリー",
-		"nf-cluster-search.ClusterSearch": "クラスタ検索",
-        "nf-cluster-search.Message3": "検索用語に一致するノードなし",
-		"nf-summary-table.Message4": "アナウンスを選別の存在に基づいて",
-		"nf-summary-table.times": "回数",
-		"nf-summary-table.UsageFor": "使用法",
-		"nf-summary-table.GoToProcessor": "ステアリングプロセッサ",
-		"nf-summary-table.ViewStatus": "ビューステートの歴史",
-		"nf-summary-table.ViewProcessor": "ビュープロセッサの詳細",
-		"nf-summary-table.ViewConnect": "ビューの接続の詳細",
-		"nf-summary-table.GoToConnect": "ステアリング接続",
-		"nf-summary-table.GoToProcessorGroup": "ステアリングトリートメント",
-		"nf-summary-table.ViewProcessorGroup": "ビューは、詳細を扱わ",
-		"nf-summary-table.GoToInputPort": "ステアリング入力ポート",
-		"nf-summary-table.ViewInputPort": "入力ポートの詳細を見ます",
-		"nf-summary-table.GoToOutputPort": "ステアリング出力ポート",
-		"nf-summary-table.ViewOutputPort": "詳しくは、出力ポートを表示します",
-		"nf-summary-table.ViewRemoteProcessorGroup": "グループの詳細をリモーティングを参照してください。",
-		"nf-summary-table.aria1": "店が使用するデータ・フロー・リポジトリ",
-        "nf-summary.Summary": "サマリー",
-		"nf-templates-table.DeleteTemplate": "テンプレートを削除します",
-		"nf-templates-table.DownloadTemplate": "テンプレートのダウンロード",
-		"nf-templates-table.Message2": "ダウンロード可能なコンテンツのアクセストークンを生成することができません。",
-        "nf-templates-table.GroupId": "プロセスグループID",
-        "nf-templates-table.Download": "ダウンロード",
-        "nf-templates-table.AccessPolicies": "アクセスポリシー",
-        "nf-templates.Templates": "テンプレート",
-        "nf-users.Users": "ユーザー",
-		"nf-users-table.UserGroup": "ユーザ/グループ",
-		"nf-users-table.Edit": "編集",
-		"nf-users-table.Remove": "削除します",
-        "jquery-propertytable.Delete": "削除",
-        "jquery-propertytable.GoTo": "行きます",
-        "jquery-propertytable.SetEmptyString": "空の文字列を設定します",
-        "jquery-propertytable.AddControllerService": "コントローラサービスを追加",
-        "jquery-propertytable.AddProperty": "プロパティの追加",
-        "jquery-propertytable.PropertyExists": "プロパティが存在します",
-        "jquery-propertytable.Message0": "この名前のプロパティが既に存在しています。",
-        "jquery-propertytable.Message3": "新しいサービスを作成します...",
-        "slick.editors.Message1": "有効な整数を入力してください",
-        "slick.editors.Message2": "有効な正の数を入力してください。",
-        "slick.grid.Message1": "Slickgridは、有効なコンテナを必要とし、",
-        "slick.grid.Message2": "これは、DOMに存在しません",
-        "slick.grid.Message3": "スタイルシートを見つけることができません。",
-        "slick.grid.Message4": "細胞CSSスタイルを追加します：細胞CSSのハッシュキー'",
-        "slick.grid.Message5": "'すでに存在しています。",
-        "slick.grid.Message6": "ノードから取得部：ユニットを取得できません -",
-        "slick.grid.Message7": "Grid : アクティブセルが編集可能になります : options.editableへfalse時,あなたが呼ばれることはありません",
-        "slick.grid.Message8": "選択モデルが設定されていません",
-        "jquery-tagcloud.NoTagsSpecified": "タグ指定なし"
-    };
-    var en = {
-        "nf-about": "NiFi Flow",
-        "nf-bulletin-board.defaultFilterText": "Filter",
-        "nf-bulletin-board.ByMessage": "by message",
-        "nf-bulletin-board.ByName": "by name",
-        "nf-bulletin-board.ById": "by id",
-        "nf-bulletin-board.ByGroupId": "by group id",
-        "nf-bulletin-board.Message1": "Filter ",
-        "nf-bulletin-board.Message2": " matching \\\\'",
-        "nf-bulletin-board.Message3": "Auto refresh started",
-        "nf-bulletin-board.Message4": "Auto refresh stopped",
-        "nf-bulletin-board.BulletinBoard": " Bulletin Board",
-        "nf-actions.NoTargetURIDefined": "No target URI defined.",
-        "nf-actions.Message1": "No eligible components are selected. Please select the components to be enabled and ensure they are no longer running.",
-        "nf-actions.Message2": "No eligible components are selected. Please select the components to be disabled and ensure they are no longer running.",
-        "nf-actions.Message3": "No eligible components are selected. Please select the components to be started and ensure they are no longer running.",
-        "nf-actions.Message4": "No eligible components are selected. Please select the components to be stopped.",
-        "nf-actions.Message5": "No eligible components are selected. Please select the components to be deleted.",
-        "nf-actions.EmptyQueue": "Empty Queue",
-        "nf-actions.Message6": "Are you sure you want to empty this queue? All FlowFiles waiting at the time of the request will be removed.",
-        "nf-actions.Cancel": "Cancel",
-        "nf-actions.Empty": "Empty",
-        "nf-actions.Stop": "Stop",
-        "nf-actions.Message7": " were removed from the queue.",
-        "nf-actions.Message8": "No FlowFiles were removed.",
-        "nf-actions.Message9": "The current selection is not valid to create a template.",
-        "nf-actions.Create": "Create",
-        "nf-actions.Template": "Template '",
-        "nf-actions.Message11": "' was successfully created.",
-        "nf-actions.Message12": "An error occurred while attempting to copy and paste.",
-        "nf-canvas-toobbar.Start": "Start",
-        "nf-canvas-toobbar.Stop": "Stop",
-        "nf-canvas-toobbar.Copy": "Copy",
-        "nf-canvas-toobbar.Paste": "Paste",
-        "nf-canvas-toobbar.Group": "Group",
-        "nf-canvas-toobbar.Enable": "Enable",
-        "nf-canvas-toobbar.Disable": "Disable",
-        "nf-canvas-toobbar.CreateTemplate": "Create Template",
-        "nf-canvas-toobbar.ChangeColor": "Change Color",
-        "nf-canvas-toobbar.Delete": "Delete",
-        "nf-canvas-header.OK": "Ok",
-        "nf-canvas-header.CreateTemplate": "Create Template",
-        "nf-canvas-header.Fill": "Fill",
-        "nf-canvas-header.Apply": "Apply",
-        "nf-canvas-header.Cancel": "Cancel",
-        "nf-canvas-header.Message": "Unable to refresh the current group.",
-        "nf-canvas-toolbox.Input": "Input",
-        "nf-canvas-toolbox.OutPut": "Output",
-        "nf-canvas-toolbox.Filter": "Filter",
-        "nf-canvas-toolbox.Processor": "Processor",
-        "nf-canvas-toolbox.InputPort": "Input Port",
-        "nf-canvas-toolbox.OutputPort": "Output Port",
-        "nf-canvas-toolbox.ProcessGroup": "Process Group",
-        "nf-canvas-toolbox.RemoteProcessGroup": "Remote Process Group",
-        "nf-canvas-toolbox.Connection": "Connection",
-        "nf-canvas-toolbox.Funnel": "Funnel",
-        "nf-canvas-toolbox.Template": "Template",
-        "nf-canvas-toolbox.Label": "Label",
-        "nf-canvas-toolbox.Add": "Add",
-        "nf-canvas-toolbox.Cancel": "Cancel",
-        "nf-canvas-toolbox.Instantiate Template": "Instantiate Template",
-        "nf-canvas-toolbox.Message": "No templates have been loaded into this NiFi.",
-        "nf-canvas-toolbox.Type": "Type",
-        "nf-canvas-toolbox.Tags": "Tags",
-        "nf-canvas-toolbox.Message1": "No description specified",
-        "nf-canvas-toolbox.AddProcessor": "Add Processor",
-        "nf-canvas-toolbox.AddPort": "Add Port",
-        "nf-canvas-toolbox.AddProcessGroup": "Add Process Group",
-        "nf-canvas-toolbox.AddRemoteProcessGroup": "Add Remote Process Group",
-        "nf-canvas-utils.Message1": "Unable to load the group for the specified component.",
-        "nf-canvas-utils.Message2": "Unable to find the specified component.",
-        "nf-canvas-utils.Message3": "Unable to enter the selected group.",
-        "nf-canvas-utils.Message4": "Cannot move Ports out of the root group",
-        "nf-canvas-utils.Message5": "The following ports are currently connected outside of this group: <b>",
-        "nf-canvas-utils.Message6": "The following ports already exist in the target process group: <b>",
-        "nf-canvas.Browser": "Unsupported Browser",
-        "nf-canvas.Message1": "Flow graphs are shown using SVG. Please use a browser that supports rendering SVG.",
-        "nf-connection-configuration.Add": "Add",
-        "nf-connection-configuration.Message0": "The connection must have at least one relationship selected.",
-        "nf-connection-configuration.Cancel": "Cancel",
-        "nf-connection-configuration.Message1": "\\' does not support any relationships.",
-        "nf-connection-configuration.Message2": "\\' does not have any output ports.",
-        "nf-connection-configuration.Message4": "\\' does not have any input ports.",
-        "nf-connection-configuration.Message6": "Configuration Error",
-        "nf-connection-configuration.ConfigureConnection": "Configure Connection",
-        "nf-connection-configuration.Detail": "Details",
-        "nf-connection-configuration.Setting": "Settings",
-        "nf-connection-configuration.CreateConnection": "Create Connection",
-        "nf-connection-configuration.Apply": "Apply",
-        "nf-connection-configuration.Message7": "The connection must have at least one relationship selected.",
-        "nf-connection-configuration.Message8": "Configure Connection",
-        "nf-connection.Message1": "Looping connections must have at least two bend points.",
-        "nf-connection.From": "From",
-        "nf-connection.To": "To",
-        "nf-connection.Name": "Name",
-        "nf-connection.Queued": "Queued",
-        "nf-context-menu.RefreshStatus": "Refresh status",
-        "nf-context-menu.LeaveGroup": "Leave group",
-        "nf-context-menu.Configure": "Configure",
-        "nf-context-menu.ViewConfiguration": "View configuration",
-        "nf-context-menu.EnterGroup": "Enter group",
-        "nf-context-menu.Start": "Start",
-        "nf-context-menu.Stop": "Stop",
-        "nf-context-menu.RemotePorts": "Remote ports",
-        "nf-context-menu.EnableTransmission": "Enable transmission",
-        "nf-context-menu.DisableTransmission": "Disable transmission",
-        "nf-context-menu.Stats": "Stats",
-        "nf-context-menu.DataProvenance": "Data provenance",
-        "nf-context-menu.BringFront": "Bring to front",
-        "nf-context-menu.GoToSource": "Go to source",
-        "nf-context-menu.GoToDestination": "Go to destination",
-        "nf-context-menu.UpstreamConnections": "Upstream connections",
-        "nf-context-menu.DownstreamConnections": "Downstream connections",
-        "nf-context-menu.Usage": "Usage",
-        "nf-context-menu.Refresh": "Refresh",
-        "nf-context-menu.GoTo": "Go to",
-        "nf-context-menu.ChangeColor": "Change color",
-        "nf-context-menu.CenterInView": "Center in view",
-        "nf-context-menu.Copy": "Copy",
-        "nf-context-menu.Paste": "Paste",
-        "nf-context-menu.MoveParentGroup": "Move to parent group",
-        "nf-context-menu.EmptyQueue": "Empty queue",
-        "nf-context-menu.Delete": "Delete",
-        "nf-controller-service.ConfigurationError": "Configuration Error",
-        "nf-controller-service.Cancel": "Cancel",
-        "nf-controller-service.Close": "Close",
-        "nf-controller-service.Message1": "Steps to disable",
-        "nf-controller-service.ActionCanceled": "Action Canceled",
-        "nf-controller-service.Message2": "The request to disable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
-        "nf-controller-service.Message3": "Steps to enable ",
-        "nf-controller-service.Message4": "Action Canceled",
-        "nf-controller-service.Message5": "The request to enable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
-        "nf-controller-service.Message6": "Save changes before going to this Controller Service?",
-        "nf-controller-service.Settings": "Settings",
-        "nf-controller-service.Properties": "Properties",
-        "nf-controller-service.Comments": "Comments",
-        "nf-controller-service.Message7": "Configure Controller Service",
-        "nf-controller-service.Message8": "Disable Controller Service",
-        "nf-controller-service.Disable": "Disable",
-        "nf-controller-service.ServiceOnle": "Service only",
-        "nf-controller-service.Message9": "Enable only this controller service",
-        "nf-controller-service.Message10": "Service and referencing components",
-        "nf-controller-service.Message11": "Enable this controller service and enable/start all referencing components",
-        "nf-controller-service.Message12": "Enable Controller Service",
-        "nf-controller-service.Enable": "Enable",
-        "nf-controller-service.Apply": "Apply",
-        "nf-controller-service.Advanced": "Advanced",
-        "nf-controller-service.Message13": "Save changes before opening the advanced configuration?",
-        "nf-controller-service.Ok": "Ok",
-        "nf-go-to.Close": "Close",
-        "nf-go-to.DownstreamConnections": "Downstream Connections",
-        "nf-go-to.UpstreamConnections": "Upstream Connections",
-        "nf-go-to.Message1": "No upstream components",
-        "nf-go-to.Message2": "No downstream components",
-        "nf-port-configuration.ConfigurePort": "Configure Port",
-        "nf-port-configuration.Apply": "Apply",
-        "nf-port-configuration.ConfigurationError": "Configuration Error",
-        "nf-port-configuration.Cancel": "Cancel",
-        "nf-port-details.PortDetails": "Port Details",
-        "nf-port-details.OK": "Ok",
-        "nf-process-group-configuration.ConfigureProcessGroup": "Configure Process Group",
-        "nf-process-group-configuration.Apply": "Apply",
-        "nf-process-group-configuration.Cancel": "Cancel",
-        "nf-process-group-details.ProcessGroupDetails": "Process Group Details",
-        "nf-process-group-details.Ok": "Ok",
-        "nf-process-group.Message1": "No comments specified",
-        "nf-process-group.Queued": "Queued",
-        "nf-process-group.In": "In",
-        "nf-process-group.ReadWrite": "Read/Write",
-        "nf-process-group.Out": "Out",
-        "nf-process-group.5min": "(5 min)",
-        "nf-processor-configuration.TimerDriven": "Timer driven",
-        "nf-processor-configuration.Message1": "Processor will be scheduled to run on an interval defined by the run schedule.",
-        "nf-processor-configuration.EventDriven": "Event driven",
-        "nf-processor-configuration.Message2": "Processor will be scheduled to run when triggered by an event (e.g. a FlowFile enters an incoming queue). This scheduling strategy is experimental.",
-        "nf-processor-configuration.OnPrimaryNode": "On primary node",
-        "nf-processor-configuration.Message3": "Processor will be scheduled on the primary node on an interval defined by the run schedule.", "nf-processor-configuration.CronDriven": "CRON driven",
-        "nf-processor-configuration.Message5": "Processor will be scheduled to run on at specific times based on the specified CRON string.",
-        "nf-processor-configuration.ConfigurationError": "Configuration Error",
-        "nf-processor-configuration.Message6": "Save changes before going to this Controller Service?",
-        "nf-processor-configuration.Settings": "Settings",
-        "nf-processor-configuration.Scheduling": "Scheduling",
-        "nf-processor-configuration.Properties": "Properties",
-        "nf-processor-configuration.Comments": "Comments",
-        "nf-processor-configuration.ConfigureProcessor": "Configure Processor",
-        "nf-processor-configuration.Debug": "DEBUG",
-        "nf-processor-configuration.Info": "INFO",
-        "nf-processor-configuration.Warn": "WARN",
-        "nf-processor-configuration.Error": "ERROR",
-        "nf-processor-configuration.Apply": "Apply",
-        "nf-processor-configuration.Cancel": "Cancel",
-        "nf-processor-configuration.Advanced": "Advanced",
-        "nf-processor-configuration.Message7": "Save changes before opening the advanced configuration?",
-        "nf-processor.In": "In",
-        "nf-processor.ReadWrite": "Read/Write",
-        "nf-processor.Out": "Out",
-        "nf-processor.TasksTime": "Tasks/Time",
-        "nf-processor.5min": "(5 min)",
-        "nf-registration.Thanks": "Thanks",
-        "nf-registration.Message1": "Your request will be processed shortly.",
-        "nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "Configure Remote Process Group",
-        "nf-remote-process-group-configuration.Apply": "Apply",
-        "nf-remote-process-group-configuration.ConfigurationError": "Configuration Error",
-        "nf-remote-process-group-configuration.Cancel": "Cancel",
-        "nf-remote-process-group-details.RemoteProcessGroupDetails": "Remote Process Group Details",
-        "nf-remote-process-group-details.Ok": "Ok",
-        "nf-remote-process-group-ports.ConfigureRemotePort": "Configure Remote Port",
-        "nf-remote-process-group-ports.Apply": "Apply",
-        "nf-remote-process-group-ports.ConfigurationError": "Configuration Error",
-        "nf-remote-process-group-ports.Message1": "Concurrent tasks must be an integer value.",
-        "nf-remote-process-group-ports.Cancel": "Cancel",
-        "nf-remote-process-group-ports.RemoteProcessGroupPorts": "Remote Process Group Ports",
-        "nf-remote-process-group-ports.Close": "Close",
-        "nf-remote-process-group-ports.Message2": "No description specified.",
-        "nf-remote-process-group.Message1": "No comments specified",
-        "nf-remote-process-group.Sent": "Sent",
-        "nf-remote-process-group.Received": "Received",
-        "nf-remote-process-group.5min": "(5 min)",
-        "nf-remote-process-group.Message2": "Site-to-Site is secure.",
-        "nf-remote-process-group.Message3": "Site-to-Site is NOT secure.",
-        "nf-remote-process-group.Message4": "Remote flow not current",
-        "nf-reporting-task.ConfigurationError": "Configuration Error",
-        "nf-reporting-task.Message1": "Save changes before going to this Controller Service?",
-        "nf-reporting-task.Settings": "Settings",
-        "nf-reporting-task.Properties": "Properties",
-        "nf-reporting-task.Comments": "Comments",
-        "nf-reporting-task.ConfigureReportingTask": "Configure Reporting Task",
-        "nf-reporting-task.Node": "Node",
-        "nf-reporting-task.ClusterManager": "Cluster Manager",
-        "nf-reporting-task.TimerDriven": "Timer driven",
-        "nf-reporting-task.Message2": "Reporting task will be scheduled to run on an interval defined by the run schedule.",
-        "nf-reporting-task.CRONDriven": "CRON driven",
-        "nf-reporting-task.Message3": "Reporting task will be scheduled to run on at specific times based on the specified CRON string.",
-        "nf-reporting-task.Apply": "Apply",
-        "nf-reporting-task.Cancel": "Cancel",
-        "nf-reporting-task.Advanced": "Advanced",
-        "nf-reporting-task.Message4": "Save changes before opening the advanced configuration?",
-        "nf-search.Search": "Search",
-        "nf-secure-port-configuration": "Settings",
-        "nf-secure-port-configuration.AccessControl": "Access Control",
-        "nf-secure-port-configuration.ConfigureSecurePort": "Configure Secure Port",
-        "nf-secure-port-configuration.Apply": "Apply",
-        "nf-secure-port-configuration.Cancel": "Cancel",
-        "nf-secure-port-configuration.InputPort": "InputPort",
-        "nf-secure-port-configuration.OutputPort": "OutputPort",
-        "nf-secure-port-details.Settings": "Settings",
-        "nf-secure-port-details.AccessControl": "Access Control",
-        "nf-secure-port-details.SecurePortDetails": "Secure Port Details",
-        "nf-secure-port-details.Ok": "Ok",
-        "nf-settings.Filter": "Filter",
-        "nf-settings.Message1": "A new flow archive was successfully created.",
-        "nf-settings.Message2": "Settings successfully applied.",
-        "nf-settings.Message3": "The type of controller service to create must be selected.",
-        "nf-settings.Text": "Node",
-        "nf-settings.ClusterManager": "Cluster Manager",
-        "nf-settings.Message4": "This controller service will be available on the nodes only.",
-        "nf-settings.Message5": "This controller service will be available on the cluster manager only.",
-        "nf-settings.Message6": "No description specified",
-        "nf-settings.Message7": "Add Controller Service",
-        "nf-settings.Add": "Add",
-        "nf-settings.Cancel": "Cancel",
-        "nf-settings.Node": "Node",
-        "nf-settings": "Cluster Manager",
-        "nf-settings.ViewDetail": "View Details",
-        "nf-settings.Disable": "Disable",
-        "nf-settings.Enable": "Enable",
-        "nf-settings.Remove": "Remove",
-        "nf-settings.Usage": "Usage",
-        "nf-settings.Name": "Name",
-        "nf-settings.State": "State",
-        "nf-settings.Availability": "Availability",
-        "nf-settings.Message8": "This reporting task will be available on the nodes only.",
-        "nf-settings.Message9": "This reporting task will be available on the cluster manager only.",
-        "nf-settings.Type": "Type",
-        "nf-settings.Tags": "Tags",
-        "nf-settings.Message10": "No description specified",
-        "nf-settings.Message11": "Add Reporting Task",
-        "nf-settings.ViewDetails": "View Details",
-        "nf-settings.Stop": "Stop",
-        "nf-settings.Edit": "Edit",
-        "nf-settings.Start": "Start",
-        "nf-settings.RunStatus": "Run Status",
-        "nf-settings.General": "General",
-        "nf-settings.ControllerServices": "Controller Services",
-        "nf-settings.ReportingTasks": "Reporting Tasks",
-        "nf-settings.Message12": "Create a new controller service",
-        "nf-settings.Message13": "Create a new reporting task",
-        "nf-settings.Settings": " Settings",
-        "nf-cluster-table.Filter": "Filter",
-        "nf-cluster-table.Message1": "Connect \\'",
-        "nf-cluster-table.Message2": "\\' to this cluster?",
-        "nf-cluster-table.Message3": "Disconnect \\'",
-        "nf-cluster-table.Message4": "\\' from the cluster?",
-        "nf-cluster-table.Message5": "Remove \\'",
-        "nf-cluster-table.Message6": "\\' from the cluster?",
-        "nf-cluster-table.NodeDetails": "Node Details",
-        "nf-cluster-table.Ok": "Ok",
-        "nf-cluster-table.ByAddress": "by address",
-        "nf-cluster-table.ByStatus": "by status",
-        "nf-cluster-table.ViewDetails": "View Details",
-        "nf-cluster-table.Node Address": "Node Address",
-        "nf-cluster-table.ActiveThreadCount": "Active Thread Count",
-        "nf-cluster-table.Size": "Size",
-        "nf-cluster-table.Queue": "Queue",        
-        "nf-cluster-table.Status": "Status",
-        "nf-cluster-table.Uptime": "Uptime",
-        "nf-cluster-table.LastHeartbeat": "Last Heartbeat",
-        "nf-cluster-table.Connect": "Connect",
-        "nf-cluster-table.Remove": "Remove",
-        "nf-cluster-table.Disconnect": "Disconnect",
-        "nf-cluster-table.MakePrimary": "Make Primary",
-        "nf-counters-table.Filter": "Filter",
-        "nf-counters-table.ByName": "by name",
-        "nf-counters-table.ByContext": "by context",
-        "nf-counters-table.Context": "Context",
-        "nf-counters-table.Name": "Name",
-        "nf-counters-table.Value": "Value",
-        "nf-counters-table.Reset": "Reset",
-        "nf-counters.Counters": " Counters",
-        "nf-history-table.Filter": "Filter",
-        "nf-history-table.ActionDetail": "Action Details",
-        "nf-history-table.Ok": "Ok",
-        "nf-history-table.ById": "by id",
-        "nf-history-table.Message1": "Filters based on the id of the component that was modified",
-        "nf-history-table.ByUser": "by user",
-        "nf-history-table.Message2": "Filters based on the user that performed the action",
-        "nf-history-table.FilterHistory": "Filter History",
-        "nf-history-table.Cancel": "Cancel",
-        "nf-history-table.PurgeHistory": "Purge History",
-        "nf-history-table.Purge": "Purge",
-        "nf-history-table.Message3": "Are you sure you want to delete all history before '",
-        "nf-history-table.Message3.1": "\\'?",
-        "nf-history-table.Message4": "The end date must be specified.",
-        "nf-history-table.ViewDetails": "View Details",
-        "nf-history-table.DateTime": "Date/Time",
-        "nf-history-table.Name": "Name",
-        "nf-history-table.Type": "Type",
-        "nf-history-table.Operation": "Operation",
-        "nf-history-table.User": "User",
-        "nf-history-table.Value": "Value",
-        "nf-history-table.PreviousValue": "Previous Value",
-        "nf-history-table.SourceId": "Source Id",
-        "nf-history-table.SourceName": "Source Name",
-        "nf-history-table.SourceType": "Source Type",
-        "nf-history-table.Relationship": "Relationship(s)",
-        "nf-history-table.DestinationId": "Destination Id",
-        "nf-history-table.DestinationName": "Destination Name",
-        "nf-history-table.DestinationType": "Destination Type",
-        "nf-history-table.Group": "Group",
-        "nf-history-table.GroupId": "GroupId",
-        "nf-history-table.PreviousGroup": "Previous Group",
-        "nf-history-table.PreviousGroupId": "Previous Group Id",
-        "nf-history-table.EndDate": "End Date",
-        "nf-history-table.History": " History",
-        "nf-common.sensitiveText": "Sensitive value set",
-        "nf-common.Message1": "An unexpected error has occurred",
-        "nf-common.Message2": "Please check the logs.",
-        "nf-common.Message3": "Unable to communicate with NiFi",
-        "nf-common.Message4": "Unauthorized",
-        "nf-common.Message5": "Authorization is required to use this NiFi.",
-        "nf-common.Message6": "Forbidden",
-        "nf-common.Message7": "Unable to authorize you to use this NiFi.",
-        "nf-common.Message9": "An error occurred communicating with the application core. Please check the logs and fix any configuration issues before restarting.",
-        "nf-common.ParseError": "Parse Error",
-        "nf-common.Message10": "Unable to interpret response from NiFi.",
-        "nf-common.Message11": ": Unexpected Response",
-        "nf-common.Message12": "An unexpected error has occurred. Please check the logs.",
-        "nf-common.Message13": "No value set",
-        "nf-common.Message14": "Empty string set",
-        "nf-common.Message15": "Your session will expire soon. Please log in again to avoid being automatically logged out.",
-        "nf-common.Message16": "You are accessing with limited authority. Log in or request an account to access with additional authority granted to you by an administrator.",
-        "nf-common.Message17": "Your session has expired. Please reload to log in again.",
-        "nf-common.Message18": "Your session has expired. Please press Ok to log in again.",
-        "nf-common.Message19": "Please ensure the application is running and check the logs for any errors.",
-        "nf-common.Message20": "Request has timed out. Please ensure the application is running and check the logs for any errors.",
-        "nf-common.Message21": "Request has been aborted.",
-        "nf-common.Message22": "Request transport mechanism failed. Please ensure the host where the application is running is accessible.",
-        "nf-common.SessionExpired": "Session Expired",
-        "nf-common.AccessDenied": "Access Denied",
-        "nf-common.DefaultValue": "Default value:",
-        "nf-common.SupportsExpressionLanuage":"Supports expression language:",
-        "nf-connection-details.FromProcessor": "From processor",
-        "nf-connection-details.FromOutPut": "From output",
-        "nf-connection-details.FromInput": "From input",
-        "nf-connection-details.ToProcessor": "To processor",
-        "nf-connection-details.ToFunnel": "To funnel",
-        "nf-connection-details.ToInput": "To input",
-        "nf-connection-details.ToOutput": "To output",
-        "nf-connection-details.Details": "Details",
-        "nf-connection-details.Settings": "Settings",
-        "nf-connection-details.ConnectionDetails": "Connection Details",
-        "nf-connection-details.Ok": "Ok",
-        "nf-dialog.Ok": "Ok",
-        "nf-dialog.Yes": "Yes",
-        "nf-dialog.No": "No",
-        "nf-processor-details.Settings": "Settings",
-        "nf-processor-details.Scheduling": "Scheduling",
-        "nf-processor-details.Properties": "Properties",
-        "nf-processor-details.Comments": "Comments",
-        "nf-processor-details.ProcessorDetails": "Processor Details",
-        "nf-processor-details.Ok": "Ok",
-        "nf-processor-details.Advanced": "Advanced",
-        "nf-status-history.StatusHistory":"Status History",
-        "nf-status-history.Processor": "Processor",
-        "nf-status-history.InputPort": "Input Port",
-        "nf-status-history.OutputPort": "Output Port",
-        "nf-status-history.ProcessGroup": "Process Group",
-        "nf-status-history.RemoteProcessGroup": "Remote Process Group",
-        "nf-status-history.Connection": "Connection",
-        "nf-status-history.Funnel": "Funnel",
-        "nf-status-history.Template": "Template",
-        "nf-status-history.Label": "Label",
-        "nf-status-history.Message":"Insufficient history, please try again later.",
-        "nf-provenance.DataProvenance": " Data Provenance",
-        "nf-provenance-lineage.Message1": "Computing FlowFile lineage...",
-        "nf-provenance-lineage.ViewDetails": "View details",
-        "nf-provenance-lineage.Message2": "The lineage search has completed successfully but there no results were found. The events may have aged off.",
-        "nf-provenance-lineage.Find parents": "Find parents",
-        "nf-provenance-lineage.Expand": "Expand",
-        "nf-provenance-lineage.Collapse": "Collapse",
-        "nf-provenance-lineage.Cancel": "Cancel",
-        "nf-provenance-table.Filter": "Filter",
-        "nf-provenance-table.Message": "Showing the most recent ",
-        "nf-provenance-table.Of": " of ",
-        "nf-provenance-table.Events": "events.",
-        "nf-provenance-table.Message4": " events, please refine the search.",
-        "nf-provenance-table.Showing": "Showing ",
-        "nf-provenance-table.Message5": " events that match the specified query, please refine the search.",
-        "nf-provenance-table.Message6": "the events that match the specified query.",
-        "nf-provenance-table.Details": "Details",
-        "nf-provenance-table.Attributes": "Attributes",
-        "nf-provenance-table.Content": "Content",
-        "nf-provenance-table.ProvenanceEvent": "Provenance Event",
-        "nf-provenance-table.Ok": "Ok",
-        "nf-provenance-table.Message1": "Successfully submitted replay request.",
-        "nf-provenance-table.Message2": "Search Events",
-        "nf-provenance-table.Search": "Search",
-        "nf-provenance-table.Message3": "Searching provenance events...",
-        "nf-provenance-table.ByComponentName": "by component name",
-        "nf-provenance-table.ByComponentType": "by component type",
-        "nf-provenance-table.ByType": "by type",
-        "nf-provenance-table.ByNode": "by node",
-        "nf-provenance-table.Cluster": "cluster",
-        "nf-provenance-table.ViewDetail": "View Details",
-        "nf-provenance-table.ShowLineage": "Show Lineage",
-        "nf-provenance-table.GoTo": "Go To",
-        "nf-provenance-table.DateTime": "Date/Time",
-        "nf-provenance-table.Type": "Type",
-        "nf-provenance-table.FlowFileUuid": "FlowFile Uuid",
-        "nf-provenance-table.Size": "Size",
-        "nf-provenance-table.ComponentName": "Component Name",
-        "nf-provenance-table.ComponentType": "Component Type",
-        "nf-provenance-table.Node": "Node",
-        "nf-provenance-table.Cancel": "Cancel",
-        "nf-provenance-table.NoValueSet": "No value set",
-        "nf-provenance-table.Claim": "Claim",
-        "nf-provenance-table.InputClain": "Input Claim",
-        "nf-cluster-search.SelectNode": "Select node",
-        "nf-cluster-search.Ok": "Ok",
-        "nf-cluster-search.Message1": "No nodes match \\'",
-        "nf-cluster-search.Message2": "More than one node matches \\'",
-        "nf-cluster-search.Cancel": "Cancel",
-        "nf-cluster-search.NiFiSumary": "NiFi Summary",
-        "nf-summary-table.Filter": "Filter",
-        "nf-summary-table.Processors": "Processors",
-        "nf-summary-table.Connections": "Connections",
-        "nf-summary-table.InputPorts": "Input Ports",
-        "nf-summary-table.OutputPorts": "Output Ports",
-        "nf-summary-table.RemoteProcessGroups": "Remote Process Groups",
-        "nf-summary-table.ProcessGroups": "Process Groups",
-        "nf-summary-table.ByName": "by name",
-        "nf-summary-table.ByType": "by type",
-        "nf-summary-table.BySource": "by source",
-        "nf-summary-table.ByDestination": "by destination",
-        "nf-summary-table.ByUri": "by uri",
-        "nf-summary-table.ViewDetail": "View Details",
-        "nf-summary-table.SourceName": "Source Name",
-        "nf-summary-table.Name": "Name",
-        "nf-summary-table.RunStatus": "Run Status",
-        "nf-summary-table.In": "In",
-        "nf-summary-table.Size": "Size",
-        "nf-summary-table.Message": "Count / data size in the last 5 min",
-        "nf-summary-table.Read": "Read",
-        "nf-summary-table.Write": "Write",
-        "nf-summary-table.5min": "5 min",
-        "nf-summary-table.Message1": "Data size in the last 5 min",
-        "nf-summary-table.Out": "Out",
-        "nf-summary-table.Tasks": "Tasks",
-        "nf-summary-table.Time": "Time",
-        "nf-summary-table.Message2": "Count / duration in the last 5 min",
-        "nf-summary-table.Type": "Type",
-        "nf-summary-table.GoTo": "Go To",
-        "nf-summary-table.ShowHistory": "Show History",
-        "nf-summary-table.ShowDetail": "Show Details",
-        "nf-summary-table.ClusterProcessorSummary": "Cluster Processor Summary",
-        "nf-summary-table.Node": "Node",
-        "nf-summary-table.Queue": "Queue",
-        "nf-summary-table.SourceName": "SourceName",
-        "nf-summary-table.DestinationName": "Destination Name",
-        "nf-summary-table.ClusterConnectionSummary": "Cluster Connection Summary",
-        "nf-summary-table.Close": "Close",
-        "nf-summary-table.Transferred": "Transferred",
-        "nf-summary-table.Message3": "Count / data size transferred to and from connections in the last 5 min",
-        "nf-summary-table.Sent": "Sent",
-        "nf-summary-table.Received": "Received",
-        "nf-summary-table.ClusterProcessGroupSummary": "Cluster Process Group Summary",
-        "nf-summary-table.ClusterInputPortSummary": "Cluster Input Port Summary",
-        "nf-summary-table.ClusterOutPutPortSummary": "Cluster Output Port Summary",
-        "nf-summary-table.Transmitting": "Transmitting",
-        "nf-summary-table.Target URI": "Target URI",
-        "nf-summary-table.ClusterRemoteProcessGroupSummary": "Cluster Remote Process Group Summary",
-        "nf-summary-table.JVM": "JVM",
-        "nf-summary-table.System": "System",
-        "nf-summary-table.SystemDiagnostics": "System Diagnostics",
-        "nf-summary-table.Summary": " Summary",
-        "nf-templates-table.Templates": " Templates",
-        "nf-templates-table.Message": " Select template to import",
-        "nf-templates-table.Filter": "Filter",
-        "nf-templates-table.Message1": "Delete template \'",
-        "nf-templates-table.ByName": "by name",
-        "nf-templates-table.ByDescription": "by description",
-        "nf-templates-table.RemovieTemplate": "Remove Template",
-        "nf-templates-table.DateTime": "Date/Time",
-        "nf-templates-table.Name": "Name",
-        "nf-templates-table.Description": "Description",
-        "nf-users-table.Users.Title": " Users",
-        "nf-users-table.Filter": "Filter",
-        "nf-users-table.UserDetails": "User Details",
-        "nf-users-table.Ok": "Ok",
-        "nf-users-table.UserRoles": "User Roles",
-        "nf-users-table.Apply": "Apply",
-        "nf-users-table.Cancel": "Cancel",
-        "nf-users-table.GroupRoles": "Group Roles",
-        "nf-users-table.DeleteUser": "Delete User",
-        "nf-users-table.Delete": "Delete",
-        "nf-users-table.RevokeAccess": "Revoke Access",
-        "nf-users-table.Revoke": "Revoke",
-        "nf-users-table.SetUserGroup": "Set Users Group",
-        "nf-users-table.Group": "Group",
-        "nf-users-table.Message": "Group name cannot be blank.",
-        "nf-users-table.ByUser": "by user",
-        "nf-users-table.ByGroup": "by group",
-        "nf-users-table.ByRole": "by role",
-        "nf-users-table.AuthorizationPending": "Authorization Pending",
-        "nf-users-table.AccessRevoked": "Access Revoked",
-        "nf-users-table.NoRolesSet": "No roles set",
-        "nf-users-table.Message1": "Multiple users with different roles",
-        "nf-users-table.Message2": "Multiple users with different status",
-        "nf-users-table.Message3": "No status set",
-        "nf-users-table.EditAccess": "Edit Access",
-        "nf-users-table.RevokeAccess.Ungroup": "Ungroup",
-        "nf-users-table.DeleteAccount": "Delete Account",
-        "nf-users-table.User": "User",
-        "nf-users-table.Roles": "Roles",
-        "nf-users-table.LastAccessed": "Last Accessed",
-        "nf-users-table.Status": "Status",
-        "nf-users-table.GroupUsers": "Group Users",
-        "nf-users-table.Message4": "Select one or more users to group.",
-        "nf-users-table.Message5": "Remove all users from group \\'",
-        "nf-users-table.Message6": "Remove user \\'",
-        "nf-users-table.Message7": "\\' from group \\'",
-        "jquery-propertytable.SensitiveValueSet": "Sensitive value set",
-        "jquery-propertytable.EmptyStringSet": "Empty string set",
-        "jquery-propertytable.NoValueSet": "no value set",
-        "jquery-propertytable.RequiredField": "Required field",
-        "jquery-propertytable.Property": "Property",
-        "jquery-propertytable.Value": "Value",
-        "jquery-propertytable.Ok": "Ok",        
-        "jquery-propertytable.Cancel": "Cancel",   
-        "jquery-propertytable.Empty": "Empty",        
-        "jquery-propertytable.NewProperty": "New property",
-        "jquery-propertytable.ControllerService" : "Controller Service",
-        "jquery-propertytable.Tags" : "Tags",
-        "jquery-propertytable.Create" : "Create",
-        "jquery-propertytable.Description" : "Description",
-        "jquery-propertytable.Message": "A property with this name already exists.",
-        "jquery-propertytable.Message1": "Property name must be specified.",
-        "jquery-propertytable.Message2": "No controller service types found that are applicable for this property."
-    };
-
-    return {
-        msg: function (key) {
-            if (locale === "en") {
-                return en[key];
-            }
-            if ((locale === "cn")) {
-                return cn[key];
-            }
-            if ((locale === "jp")) {
-                return jp[key];
-            }
-        }
-    };
-})();
-
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
deleted file mode 100644
index 43613fd1a30d..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js
+++ /dev/null
@@ -1,239 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'Slick',
-                'nf.Common',
-                'nf.ErrorHandler'],
-            function ($, Slick, nfCommon, nfErrorHandler) {
-                return (nf.HistoryModel = factory($, Slick, nfCommon, nfErrorHandler));
-            });
-    } 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, nfCommon, nfErrorHandler) {
-    'use strict';
-
-    // private
-    var PAGESIZE = 50;
-
-    var data = {
-        length: 0
-    };
-
-    var filter = {};
-    var sortcol = null;
-    var sortdir = 1;
-
-    var h_request = null;
-    var xhr = null; // ajax request
-
-    // events
-    var onDataLoading = new Slick.Event();
-    var onDataLoaded = new Slick.Event();
-
-    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'
-            }
-
-            // notify that loading is about to occur
-            onDataLoading.notify({
-                from: from,
-                to: to
-            });
-
-            // perform query...
-            var xhr = $.ajax({
-                type: 'GET',
-                url: '../nifi-api/flow/history',
-                data: query,
-                dataType: 'json'
-            }).done(function (response) {
-                var history = response.history;
-
-                // calculate the indices
-                var from = fromPage * PAGESIZE;
-                var to = from + history.actions.length;
-
-                // update the data length
-                data.length = history.total;
-
-                // 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;
-                }
-
-                // update the stats last refreshed timestamp
-                $('#history-last-refreshed').text(history.lastRefreshed);
-
-                // set the timezone for the start and end time
-                $('.timezone').text(nfCommon.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(nfErrorHandler.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;
-    };
-
-    function HistoryModel() {
-    }
-
-    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
deleted file mode 100644
index cb7381f2b199..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js
+++ /dev/null
@@ -1,552 +0,0 @@
-    /*
-     * 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 top, define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'Slick',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.ErrorHandler',
-                  'nf.HistoryModel'],
-              function ($, Slick, nfCommon, nfDialog, nfErrorHandler, nfHistoryModel) {
-                  return (nf.HistoryTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler, nfHistoryModel));
-              });
-      } 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, nfCommon, nfDialog, nfErrorHandler, nfHistoryModel) {
-      'use strict';
-    
-        /**
-         * Configuration object used to hold a number of configuration items.
-         */
-        var config = {
-            defaultStartTime: '00:00:00',
-            defaultEndTime: '23:59:59',
-            styles: {
-                hidden: 'hidden'
-            },
-            urls: {
-                history: '../nifi-api/controller/history'
-            }
-        };
-    
-        /**
-         * Initializes the details dialog.
-         */
-        var initDetailsDialog = function () {
-            $('#action-details-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: nf._.msg('nf-history-table.ActionDetail'),
-                buttons: [{
-                    buttonText: nf._.msg('nf-history-table.Ok'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            $('#action-details-dialog').modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // clear the details
-                        $('#action-details').empty();
-                    }
-                }
-            });
-        };
-    
-        /**
-         * Initializes the filter dialog.
-         */
-        var initFilterDialog = function () {
-            // clear the filter field
-            $('#history-filter').val('');
-    
-            // filter type
-            $('#history-filter-type').combo({
-                options: [{
-                    text: nf._.msg('nf-history-table.ById'),
-                    value: 'by id',
-                    description: nf._.msg('nf-history-table.Message5')
-                }, {
-                    text: nf._.msg('nf-history-table.ByUser'),
-                    value: 'by user',
-                    description: nf._.msg('nf-history-table.Message6')
-                }]
-            });
-    
-            // configure the start and end date picker
-            $('#history-filter-start-date, #history-filter-end-date').datepicker({
-                showAnim: '',
-                showOtherMonths: true,
-                selectOtherMonths: true
-            });
-            $('#history-filter-start-date').datepicker('setDate', '-14d');
-            $('#history-filter-end-date').datepicker('setDate', '+0d');
-    
-            // initialize the start and end time
-            $('#history-filter-start-time').val(config.defaultStartTime);
-            $('#history-filter-end-time').val(config.defaultEndTime);
-    
-            // configure the filter dialog
-            $('#history-filter-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: nf._.msg('nf-history-table.FilterHistory'),
-                buttons: [{
-                    buttonText: nf._.msg('nf-history-table.Filter'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            $('#history-filter-dialog').modal('hide');
-    
-                            var filter = {};
-    
-                            // extract the filter text
-                            var filterText = $('#history-filter').val();
-                            if (filterText !== '') {
-                                var filterType = $('#history-filter-type').combo('getSelectedOption').text;
-                                if (filterType === 'by id') {
-                                    filter['sourceId'] = filterText;
-                                } else if (filterType === 'by user') {
-                                    filter['userIdentity'] = filterText;
-                                }
-                            }
-    
-                            // extract the start date time
-                            var startDate = $.trim($('#history-filter-start-date').val());
-                            var startTime = $.trim($('#history-filter-start-time').val());
-                            if (startDate !== '') {
-                                if (startTime === '') {
-                                    startTime = config.defaultStartTime;
-                                    $('#history-filter-start-time').val(startTime);
-                                }
-                                filter['startDate'] = startDate + ' ' + startTime;
-                            }
-    
-                            // extract the end date time
-                            var endDate = $.trim($('#history-filter-end-date').val());
-                            var endTime = $.trim($('#history-filter-end-time').val());
-                            if (endDate !== '') {
-                                if (endTime === '') {
-                                    endTime = config.defaultEndTime;
-                                    $('#history-filter-end-time').val(endTime);
-                                }
-                                filter['endDate'] = endDate + ' ' + endTime;
-                            }
-    
-                            // set the filter
-                            var historyGrid = $('#history-table').data('gridInstance');
-                            var historyModel = historyGrid.getData();
-                            historyModel.setFilterArgs(filter);
-    
-                            // reload the table
-                          nfHistoryTable.loadHistoryTable();
-                        }
-                    }
-                },
-                    {
-                        buttonText: nf._.msg('nf-history-table.Cancel'),
-                        color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
-                        },
-                        handler: {
-                            click: function () {
-                                $('#history-filter-dialog').modal('hide');
-                            }
-                        }
-                    }]
-            });
-        };
-    
-        /**
-         * Initializes the purge dialog.
-         */
-        var initPurgeDialog = function () {
-            // configure the start and end date picker
-            $('#history-purge-end-date').datepicker({
-                showAnim: '',
-                showOtherMonths: true,
-                selectOtherMonths: true
-            });
-            $('#history-purge-end-date').datepicker('setDate', '-1m');
-    
-            // initialize the start and end time
-            $('#history-purge-end-time').val(config.defaultStartTime);
-    
-            // configure the filter dialog
-            $('#history-purge-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-                headerText: nf._.msg('nf-history-table.PurgeHistory'),
-                buttons: [{
-                    buttonText: nf._.msg('nf-history-table.Purge'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // hide the dialog
-                            $('#history-purge-dialog').modal('hide');
-    
-                            // get the purge end date
-                            var endDate = $.trim($('#history-purge-end-date').val());
-                            var endTime = $.trim($('#history-purge-end-time').val());
-                            if (endDate !== '') {
-                                if (endTime === '') {
-                                    endTime = config.defaultStartTime;
-                                    $('#history-purge-end-time').val(endTime);
-                                }
-                                var endDateTime = endDate + ' ' + endTime;
-                                var timezone = $('.timezone:first').text();
-                              nfDialog.showYesNoDialog({
-                                    headerText: nf._.msg('nf-history-table.History'),
-                                    dialogContent: nf._.msg('nf-history-table.Message3') + nfCommon.escapeHtml(endDateTime) + " " + nfCommon.escapeHtml(timezone) + nf._.msg('nf-history-table.Message3.1'),
-                                    yesHandler: function () {
-                                        purgeHistory(endDateTime);
-                                    }
-                                });
-                            } else {
-                              nfDialog.showOkDialog({
-                                    headerText: nf._.msg('nf-history-table.History'),
-                                    dialogContent: nf._.msg('nf-history-table.Message4')
-                                });
-                            }
-                        }
-                    }
-                },
-                    {
-                        buttonText: nf._.msg('nf-history-table.Cancel'),
-                        color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
-                        },
-                        handler: {
-                            click: function () {
-                                $('#history-purge-dialog').modal('hide');
-                            }
-                        }
-                    }]
-            });
-        };
-    
-        /**
-         * Initializes the history table.
-         */
-        var initHistoryTable = function () {
-            // clear the current filter
-            $('#clear-history-filter').click(function () {
-                // clear the filter dialog
-                $('#history-filter').val('');
-    
-                // hide the overview
-                $('#history-filter-overview').css('visibility', 'hidden');
-    
-                // clear the filter
-                var historyGrid = $('#history-table').data('gridInstance');
-                var historyModel = historyGrid.getData();
-                historyModel.setFilterArgs({});
-    
-                // refresh the table
-              nfHistoryTable.loadHistoryTable();
-            });
-    
-            // add hover effect and click handler for opening the dialog
-            $('#history-filter-button').click(function () {
-                $('#history-filter-dialog').modal('show');
-            });
-    
-            // define a custom formatter for the more details column
-            var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
-              if (dataContext.canRead === true) {
-                  return '<div title="' + nf._.msg('nf-history-table.ViewDetails') + '" class="pointer show-action-details fa fa-info-circle" style="margin-top: 4px;"></div>';
-              }
-              return "";
-            };
-    
-            // define how general values are formatted
-            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-                if (dataContext.canRead !== true) {
-                    return '<span class="unset" style="font-size: 13px; padding-top: 2px;">' + nf._.msg('nf-history-table.NotAuthorized') + '</span>';
-                }
-              return nfCommon.formatValue(dataContext.action[columnDef.field]);
-            };
-    
-            // initialize the templates table
-            var historyColumns = [
-                {
-                    id: 'moreDetails',
-                    name: '&nbsp;',
-                    sortable: false,
-                    resizable: false,
-                    formatter: moreDetailsFormatter,
-                    width: 50,
-                    maxWidth: 50
-                },
-              {
-                  id: 'timestamp',
-                  name: nf._.msg('nf-history-table.DateTime'),
-                  field: 'timestamp',
-                  sortable: true,
-                  resizable: true,
-                  formatter: valueFormatter
-              },
-              {
-                  id: 'sourceName',
-                  name: nf._.msg('nf-history-table.Name'),
-                  field: 'sourceName',
-                  sortable: true,
-                  resizable: true,
-                  formatter: valueFormatter
-              },
-              {
-                  id: 'sourceType',
-                  name: nf._.msg('nf-history-table.Type'),
-                  field: 'sourceType',
-                  sortable: true,
-                  resizable: true,
-                  formatter: valueFormatter
-              },
-              {
-                  id: 'operation',
-                  name: nf._.msg('nf-history-table.Operation'),
-                  field: 'operation',
-                  sortable: true,
-                  resizable: true,
-                  formatter: valueFormatter
-              },
-              {
-                  id: 'userIdentity',
-                  name: nf._.msg('nf-history-table.User'),
-                  field: 'userIdentity',
-                  sortable: true,
-                  resizable: true,
-                  formatter: valueFormatter
-              }
-            ];
-    
-            var historyOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: false,
-                enableColumnReorder: false,
-                autoEdit: false,
-                rowHeight: 24
-            };
-    
-            // create the remote model
-          var historyModel = new nfHistoryModel();
-    
-            // initialize the grid
-            var historyGrid = new Slick.Grid('#history-table', historyModel, historyColumns, historyOptions);
-            historyGrid.setSelectionModel(new Slick.RowSelectionModel());
-            historyGrid.registerPlugin(new Slick.AutoTooltips());
-    
-            // initialize the grid sorting
-            historyGrid.onSort.subscribe(function (e, args) {
-                // set the sort criteria on the model
-                historyModel.setSort(args.sortCol.field, args.sortAsc ? 1 : -1);
-    
-                // reload the grid
-                var vp = historyGrid.getViewport();
-                historyModel.ensureData(vp.top, vp.bottom);
-            });
-            historyGrid.setSortColumn('timestamp', false);
-    
-            // configure a click listener
-            historyGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-    
-                // get the node at this row
-                var item = historyModel.getItem(args.row);
-    
-                // determine the desired action
-                if (historyGrid.getColumns()[args.cell].id === 'moreDetails') {
-                    if (target.hasClass('show-action-details')) {
-                      showActionDetails(item.action);
-                    }
-                }
-            });
-    
-            // listen for when the viewport changes so we can fetch the appropriate records
-            historyGrid.onViewportChanged.subscribe(function (e, args) {
-                var vp = historyGrid.getViewport();
-                historyModel.ensureData(vp.top, vp.bottom);
-            });
-    
-            // listen for when new data has been loaded
-            historyModel.onDataLoaded.subscribe(function (e, args) {
-                for (var i = args.from; i <= args.to; i++) {
-                    historyGrid.invalidateRow(i);
-                }
-                historyGrid.updateRowCount();
-                historyGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#history-table').data('gridInstance', historyGrid);
-    
-            // add the purge button if appropriate
-          if (nfCommon.canModifyController()) {
-                $('#history-purge-button').on('click', function () {
-                    $('#history-purge-dialog').modal('show');
-                }).show();
-            }
-        };
-    
-        /**
-         * Purges the history up to the specified end date.
-         *
-         * @argument {string} endDateTime       The end date time
-         */
-        var purgeHistory = function (endDateTime) {
-            $.ajax({
-                type: 'DELETE',
-                url: config.urls.history + '?' + $.param({
-                    endDate: endDateTime
-                }),
-                dataType: 'json'
-            }).done(function () {
-              nfHistoryTable.loadHistoryTable();
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Shows the details for the specified action.
-         *
-         * @param {object} action
-         */
-        var showActionDetails = function (action) {
-            // create the markup for the dialog
-            var detailsMarkup = $('<div></div>').append(
-              $('<div class="action-detail"><div class="history-details-name">Id</div>' + nfCommon.escapeHtml(action.sourceId) + '</div>'));
-    
-            // get any component details
-            var componentDetails = action.componentDetails;
-    
-            // inspect the operation to determine if there are any component details
-          if (nfCommon.isDefinedAndNotNull(componentDetails)) {
-                if (action.sourceType === 'Processor' || action.sourceType === 'ControllerService' || action.sourceType === 'ReportingTask') {
-                    detailsMarkup.append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Type') + '</div>' + nfCommon.escapeHtml(componentDetails.type) + '</div>'));
-                } else if (action.sourceType === 'RemoteProcessGroup') {
-                    detailsMarkup.append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Uri') + '</div>' + nfCommon.formatValue(componentDetails.uri) + '</div>'));
-                }
-            }
-    
-            // get any action details
-            var actionDetails = action.actionDetails;
-    
-            // inspect the operation to determine if there are any action details
-          if (nfCommon.isDefinedAndNotNull(actionDetails)) {
-                if (action.operation === 'Configure') {
-                    detailsMarkup.append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Name') + '</div>' + nfCommon.formatValue(actionDetails.name) + '</div>')).append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Value') + '</div>' + nfCommon.formatValue(actionDetails.value) + '</div>')).append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.PreviousValue') + '</div>' + nfCommon.formatValue(actionDetails.previousValue) + '</div>'));
-                } else if (action.operation === 'Connect' || action.operation === 'Disconnect') {
-                    detailsMarkup.append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.SourceId') + '</div>' + nfCommon.escapeHtml(actionDetails.sourceId) + '</div>')).append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.SourceName') + '</div>' + nfCommon.formatValue(actionDetails.sourceName) + '</div>')).append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.SourceType') + '</div>' + nfCommon.escapeHtml(actionDetails.sourceType) + '</div>')).append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Relationship') + '</div>' + nfCommon.formatValue(actionDetails.relationship) + '</div>')).append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.DestinationId') + '</div>' + nfCommon.escapeHtml(actionDetails.destinationId) + '</div>')).append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.DestinationName') + '</div>' + nfCommon.formatValue(actionDetails.destinationName) + '</div>')).append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.DestinationType') + '</div>' + nfCommon.escapeHtml(actionDetails.destinationType) + '</div>'));
-                } else if (action.operation === 'Move') {
-                    detailsMarkup.append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Group') + '</div>' + nfCommon.formatValue(actionDetails.group) + '</div>')).append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.GroupId') + '</div>' + nfCommon.escapeHtml(actionDetails.groupId) + '</div>')).append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.PreviousGroup') + '</div>' + nfCommon.formatValue(actionDetails.previousGroup) + '</div>')).append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.PreviousGroupId') + '</div>' + nfCommon.escapeHtml(actionDetails.previousGroupId) + '</div>'));
-                } else if (action.operation === 'Purge') {
-                    detailsMarkup.append(
-                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.EndTime') + '</div>' + nfCommon.escapeHtml(actionDetails.endDate) + '</div>'));
-                }
-            }
-    
-            // populate the dialog
-            $('#action-details').append(detailsMarkup);
-    
-            // show the dialog
-            $('#action-details-dialog').modal('show');
-        };
-    
-      var nfHistoryTable = {
-            init: function () {
-                initDetailsDialog();
-                initFilterDialog();
-                initPurgeDialog();
-                initHistoryTable();
-            },
-    
-            /**
-             * Update the size of the grid based on its container's current size.
-             */
-            resetTableSize: function () {
-                var historyGrid = $('#history-table').data('gridInstance');
-              if (nfCommon.isDefinedAndNotNull(historyGrid)) {
-                    historyGrid.resizeCanvas();
-                }
-            },
-    
-            /**
-             * Load the processor status table.
-             */
-            loadHistoryTable: function () {
-                var historyGrid = $('#history-table').data('gridInstance');
-    
-                // clear the history model
-                var historyModel = historyGrid.getData();
-                historyModel.clear();
-    
-                // request refresh of the current 'page'
-                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
deleted file mode 100644
index 3fd6e8842354..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js
+++ /dev/null
@@ -1,236 +0,0 @@
-    /*
-     * 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 top, define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Common',
-                  'nf.HistoryTable',
-                  'nf.ErrorHandler',
-                  'nf.Storage',
-                  'nf.ClusterSummary'],
-              function ($, nfCommon, nfHistoryTable, nfErrorHandler, nfStorage, nfClusterSummary) {
-                  return (nf.History = factory($, nfCommon, nfHistoryTable, nfErrorHandler, nfStorage, nfClusterSummary));
-              });
-      } 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 ($, nfCommon, nfHistoryTable, nfErrorHandler, nfStorage, nfClusterSummary) {
-      'use strict';
-    
-        $(document).ready(function () {
-            // initialize the status page
-          nfHistory.init();
-        });
-    
-        /**
-         * Configuration object used to hold a number of configuration items.
-         */
-        var config = {
-            urls: {
-                banners: '../nifi-api/flow/banners',
-                about: '../nifi-api/flow/about',
-              currentUser: '../nifi-api/flow/current-user'
-            }
-        };
-    
-        /**
-         * Loads the current user.
-         */
-        var loadCurrentUser = function () {
-            return $.ajax({
-                type: 'GET',
-                url: config.urls.currentUser,
-                dataType: 'json'
-            }).done(function (currentUser) {
-              nfCommon.setCurrentUser(currentUser);
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Initializes the history page.
-         */
-        var initializeHistoryPage = function () {
-            // define mouse over event for the refresh button
-            $('#refresh-button').click(function () {
-              nfHistoryTable.loadHistoryTable();
-            });
-    
-            // 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 (nfCommon.isDefinedAndNotNull(response.banners)) {
-                          if (nfCommon.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('history');
-                            }
-    
-                          if (nfCommon.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('history');
-                            }
-                        }
-    
-                        deferred.resolve();
-                    }).fail(function (xhr, status, error) {
-                      nfErrorHandler.handleAjaxError(xhr, status, error);
-                        deferred.reject();
-                    });
-                } else {
-                    deferred.resolve();
-                }
-            }).promise();
-        };
-    
-      var nfHistory = {
-            /**
-             * Initializes the status page.
-             */
-            init: function () {
-                // load the current user
-              var currentUser = loadCurrentUser()
-  
-              nfStorage.init();
-  
-              // ensure the config requests are loaded
-              $.when(currentUser).done(function (currentUserResult) {
-                  // if clustered, show message to indicate location of actions
-                  if (nfClusterSummary.isClustered() === true) {
-                      $('#cluster-history-message').show();
-                  }
-    
-                    // create the history table
-                  nfHistoryTable.init();
-    
-                    // load the history table
-                  nfHistoryTable.loadHistoryTable();
-    
-                    // once the table is initialized, finish initializing the page
-                    initializeHistoryPage().done(function () {
-                        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'
-                                });
-    
-                                $('#history').css('margin', 40);
-                                $('#history-refresh-container').css('margin', 40);
-                            }
-    
-                            // configure the initial grid height
-                          nfHistoryTable.resetTableSize();
-                        };
-    
-                        // get the about details
-                        $.ajax({
-                            type: 'GET',
-                            url: config.urls.about,
-                            dataType: 'json'
-                        }).done(function (response) {
-                            var aboutDetails = response.about;
-                            var historyTitle = nf._.msg('nf-about')+ nf._.msg('nf-history-table.History');
-    
-                            // set the document title and the about title
-                            document.title = historyTitle;
-                            $('#history-header-text').text(historyTitle);
-    
-                            // set the initial size
-                            setBodySize();
-                      }).fail(nfErrorHandler.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) {
-                                        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) {
-                              nfCommon.toggleScrollable(tabsContent.get(0));
-                            });
-                        });
-                    });
-                });
-            }
-        };
-    
-      return nfHistory;
-  }));
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
deleted file mode 100644
index cff96d354316..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js
+++ /dev/null
@@ -1,241 +0,0 @@
-    /*
-     * 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 top, define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.Storage'],
-              function ($, nfCommon, nfDialog, nfStorage) {
-                  return (nf.Login = factory($, nfCommon, nfDialog, nfStorage));
-              });
-      } 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 ($, nfCommon, nfDialog, nfStorage) {
-      'use strict';
-    
-        $(document).ready(function () {
-          nfLogin.init();
-        });
-    
-        var config = {
-            urls: {
-                token: '../nifi-api/access/token',
-                accessStatus: '../nifi-api/access',
-                accessConfig: '../nifi-api/access/config'
-            }
-        };
-    
-        var initializeMessage = function () {
-            $('#login-message-container').show();
-        };
-    
-        var showLogin = function () {
-            // reset the forms
-            $('#username').val('');
-            $('#password').val('');
-            $('#login-submission-button').text(nf._.msg('nf-login.Login'));
-    
-            // update the form visibility
-            $('#login-container').show();
-            $('#nifi-registration-container').hide();
-    
-            // set the focus
-            $('#username').focus();
-        };
-    
-        var initializeSubmission = function () {
-            $('#login-submission-button').on('click', function () {
-                if ($('#login-container').is(':visible')) {
-                    login();
-                }
-            });
-    
-            $('#login-submission-container').show();
-        };
-    
-        var login = function () {
-            // remove focus
-            $('#username, #password').blur();
-    
-            // show the logging message...
-            $('#login-progress-label').text(nf._.msg('nf-login.Logining'));
-            $('#login-progress-container').show();
-            $('#login-submission-container').hide();
-    
-            // login submit
-            $.ajax({
-                type: 'POST',
-                url: config.urls.token,
-                data: {
-                    'username': $('#username').val(),
-                    'password': $('#password').val()
-                }
-            }).done(function (jwt) {
-                // get the payload and store the token with the appropirate expiration
-              var token = nfCommon.getJwtPayload(jwt);
-              var expiration = parseInt(token['exp'], 10) * nfCommon.MILLIS_PER_SECOND;
-              nfStorage.setItem('jwt', jwt, expiration);
-    
-                // check to see if they actually have access now
-                $.ajax({
-                    type: 'GET',
-                    url: config.urls.accessStatus,
-                    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
-                        if (top !== window) {
-                            parent.window.location = '/nifi';
-                        } else {
-                            window.location = '/nifi';
-                        }
-                    } else {
-                        $('#login-message-title').text(nf._.msg('nf-login.Message1'));
-                        $('#login-message').text(accessStatus.message);
-    
-                        // update visibility
-                        $('#login-container').hide();
-                        $('#login-submission-container').hide();
-                        $('#login-progress-container').hide();
-                        $('#login-message-container').show();
-                    }
-                }).fail(function (xhr, status, error) {
-                    $('#login-message-title').text(nf._.msg('nf-login.Message1'));
-                    $('#login-message').text(xhr.responseText);
-    
-                    // update visibility
-                    $('#login-container').hide();
-                    $('#login-submission-container').hide();
-                    $('#login-progress-container').hide();
-                    $('#login-message-container').show();
-                });
-            }).fail(function (xhr, status, error) {
-              nfDialog.showOkDialog({
-                    headerText: nf._.msg('nf-login.Login'),
-                    dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                });
-    
-                // update the form visibility
-                $('#login-submission-container').show();
-                $('#login-progress-container').hide();
-            });
-        };
-    
-        var showLogoutLink = function () {
-          nfCommon.showLogoutLink();
-        };
-    
-      var nfLogin = {
-            /**
-             * Initializes the login page.
-             */
-            init: function () {
-              nfStorage.init();
-    
-              if (nfStorage.getItem('jwt') !== null) {
-                    showLogoutLink();
-                }
-    
-                // supporting logging in via enter press
-                $('#username, #password').on('keyup', function (e) {
-                    var code = e.keyCode ? e.keyCode : e.which;
-                    if (code === $.ui.keyCode.ENTER) {
-                        login();
-                    }
-                });
-    
-                // access status
-                var accessStatus = $.ajax({
-                    type: 'GET',
-                    url: config.urls.accessStatus,
-                    dataType: 'json'
-                }).fail(function (xhr, status, error) {
-                    $('#login-message-title').text(nf._.msg('nf-login.Message2'));
-                    $('#login-message').text(xhr.responseText);
-                    initializeMessage();
-                });
-    
-                // access config
-                var accessConfigXhr = $.ajax({
-                    type: 'GET',
-                    url: config.urls.accessConfig,
-                    dataType: 'json'
-                });
-    
-                $.when(accessStatus, accessConfigXhr).done(function (accessStatusResult, accessConfigResult) {
-                    var accessStatusResponse = accessStatusResult[0];
-                    var accessStatus = accessStatusResponse.accessStatus;
-    
-                    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(nf._.msg('nf-login.SUCCESS'));
-                        $('#login-message').text(accessStatus.message);
-                    }
-    
-                    // if login is required, verify its supported
-                    if (accessConfig.supportsLogin === false && needsLogin === true) {
-                        $('#login-message-title').text(nf._.msg('nf-login.Denied'));
-                        $('#login-message').text(nf._.msg('nf-login.Message3'));
-                        showMessage = true;
-                        needsLogin = false;
-                    }
-    
-                    // initialize the page as appropriate
-                    if (showMessage === true) {
-                        initializeMessage();
-                    } else if (needsLogin === true) {
-                        showLogin();
-                        initializeSubmission();
-                    }
-                });
-            }
-        };
-    
-      return nfLogin;
-  }));
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
deleted file mode 100644
index ac5bc1c2df7c..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ajax-setup.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Storage'],
-            function ($, nfStorage) {
-                return (nf.AjaxSetup = factory($, nfStorage));
-            });
-    } 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 ($, nfStorage) {
-    /**
-     * Performs ajax setup for use within NiFi.
-     */
-    $(document).ready(function ($) {
-        // include jwt when possible
-        $.ajaxSetup({
-            'beforeSend': function (xhr) {
-                var hadToken = nfStorage.hasItem('jwt');
-
-                // get the token to include in all requests
-                var token = nfStorage.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
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
deleted file mode 100644
index cd6521d2edbb..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-client.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common'],
-            function ($, nfCommon) {
-                return (nf.Client = factory($, nfCommon));
-            });
-    } 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 ($, nfCommon) {
-    'use strict';
-
-    var clientId = null;
-
-    return {
-        /**
-         * Initializes the client.
-         *
-         * @returns deferred
-         */
-        init: function () {
-            return $.ajax({
-                type: 'GET',
-                url: '../nifi-api/flow/client-id',
-            }).done(function (cid) {
-                clientId = cid;
-            });
-        },
-
-        /**
-         * Builds the revision fof the specified component
-         * @param d The component
-         * @returns The revision
-         */
-        getRevision: function (d) {
-            return {
-                'clientId': clientId,
-                'version': d.revision.version
-            };
-        },
-
-        /**
-         * Determines whether the proposedData is not older than the currentData.
-         *
-         * @param currentData Maybe be null, if the proposedData is new to this canvas
-         * @param proposedData Maybe not be null
-         * @return {boolean} whether proposedData is newer than currentData
-         */
-        isNewerRevision: function (currentData, proposedData) {
-            if (nfCommon.isDefinedAndNotNull(currentData)) {
-                var currentRevision = currentData.revision;
-                var proposedRevision = proposedData.revision;
-
-                // return whether the proposed revision is not less
-                return proposedRevision.version >= currentRevision.version;
-            } else {
-                return 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-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
deleted file mode 100644
index a06b7711f2a2..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-cluster-summary.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery'], 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
deleted file mode 100644
index e4b02145ff86..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
+++ /dev/null
@@ -1,1266 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports, parseFloat */
-  
-  // Define a common utility class used across the entire application.
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.Storage'],
-              function ($, d3, nfStorage) {
-                  return (nf.Common = factory($, d3, nfStorage));
-              });
-      } else if (typeof exports === 'object' && typeof module === 'object') {
-          module.exports = (nf.Common = factory(require('jquery'),
-              require('d3'),
-              require('nf.Storage')));
-      } else {
-          nf.Common = factory(root.$,
-              root.d3,
-              root.nf.Storage);
-      }
-  }(this, function ($, d3, nfStorage) {
-      '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';
-            $('<img/>').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');
-                }
-            });
-    
-          // setup click areas for custom checkboxes
-          $(document).on('click', '.nf-checkbox-label', function (e) {
-              $(e.target).parent().find('.nf-checkbox').click();
-          });
-  
-            // 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 (nfStorage.getItem('jwt') !== null) {
-                $('#user-logout-container').css('display', 'block');
-              nfCommon.scheduleTokenRefresh();
-            }
-    
-            // handle logout
-            $('#user-logout').on('click', function () {
-              nfStorage.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;
-    
-      var policyTypeListing = [{
-          text: 'view the user interface',
-          value: 'flow',
-          description: 'Allows users to view the user interface'
-      }, {
-          text: 'access the controller',
-          value: 'controller',
-          description: 'Allows users to view/modify the controller including Reporting Tasks, Controller Services, and Nodes in the Cluster'
-      }, {
-          text: 'query provenance',
-          value: 'provenance',
-          description: 'Allows users to submit a Provenance Search and request Event Lineage'
-      }, {
-          text: 'access restricted components',
-          value: 'restricted-components',
-          description: 'Allows users to create/modify restricted components assuming otherwise sufficient permissions'
-      }, {
-          text: 'access all policies',
-          value: 'policies',
-          description: 'Allows users to view/modify the policies for all components'
-      }, {
-          text: 'access users/user groups',
-          value: 'tenants',
-          description: 'Allows users to view/modify the users and user groups'
-      }, {
-          text: 'retrieve site-to-site details',
-          value: 'site-to-site',
-          description: 'Allows other NiFi instances to retrieve Site-To-Site details of this NiFi'
-      }, {
-          text: 'view system diagnostics',
-          value: 'system',
-          description: 'Allows users to view System Diagnostics'
-      }, {
-          text: 'proxy user requests',
-          value: 'proxy',
-          description: 'Allows proxy machines to send requests on the behalf of others'
-      }, {
-          text: 'access counters',
-          value: 'counters',
-          description: 'Allows users to view/modify Counters'
-      }];
-  
-      var nfCommon = {
-            ANONYMOUS_USER_TEXT: 'Anonymous user',
-    
-            config: {
-                sensitiveText: 'Sensitive value set',
-                tooltipConfig: {
-                    style: {
-                        classes: 'nifi-tooltip'
-                    },
-                    show: {
-                        solo: true,
-                        effect: function (offset) {
-                            $(this).slideDown(100);
-                        }
-                    },
-                    hide: {
-                        effect: function (offset) {
-                            $(this).slideUp(100);
-                        }
-                    },
-                    position: {
-                        at: 'bottom center',
-                        my: 'top center',
-                        adjust: {
-                            y: 5
-                        }
-                    }
-                }
-            },
-    
-            /**
-             * Determines if the current broswer supports SVG.
-             */
-            SUPPORTS_SVG: !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect,
-    
-            /**
-             * The current user.
-             */
-            currentUser: undefined,
-    
-            /**
-           * Formats type of a component for a new instance dialog.
-           *
-           * @param row
-           * @param cell
-           * @param value
-           * @param columnDef
-           * @param dataContext
-           * @returns {string}
-           */
-          typeFormatter: function (row, cell, value, columnDef, dataContext) {
-              var markup = '';
-  
-              // restriction
-              if (nfCommon.isBlank(dataContext.usageRestriction) === false) {
-                  markup += '<div class="view-usage-restriction fa fa-shield"></div><span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
-              } else {
-                  markup += '<div class="fa"></div>';
-              }
-  
-              // type
-              markup += value;
-  
-              return markup;
-          },
-  
-          /**
-             * Sets the current user.
-             *
-             * @param currentUser
-             */
-            setCurrentUser: function (currentUser) {
-              nfCommon.currentUser = currentUser;
-            },
-    
-            /**
-             * Automatically refresh tokens by checking once an hour if its going to expire soon.
-             */
-            scheduleTokenRefresh: function () {
-                // if we are currently polling for token refresh, cancel it
-                if (tokenRefreshInterval !== null) {
-                    clearInterval(tokenRefreshInterval);
-                }
-    
-                // set the interval to one hour
-              var interval = nfCommon.MILLIS_PER_MINUTE;
-    
-                var checkExpiration = function () {
-                  var expiration = nfStorage.getItemExpiration('jwt');
-    
-                    // ensure there is an expiration and token present
-                    if (expiration !== null) {
-                        var expirationDate = new Date(expiration);
-                        var now = new Date();
-    
-                        // get the time remainging plus a little bonus time to reload the token
-                      var timeRemaining = expirationDate.valueOf() - now.valueOf() - (30 * nfCommon.MILLIS_PER_SECOND);
-                        if (timeRemaining < interval) {
-                          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({}, nfCommon.config.tooltipConfig, {
-                                    content: nf._.msg('nf-common.Message15'),
-                                    position: {
-                                        my: 'top right',
-                                        at: 'bottom left'
-                                    }
-                                }));
-                            }
-                        }
-                    }
-                };
-    
-                // perform initial check
-                checkExpiration();
-    
-                // schedule subsequent checks
-                tokenRefreshInterval = setInterval(checkExpiration, interval);
-            },
-    
-            /**
-             * Sets the anonymous user label.
-             */
-            setAnonymousUserLabel: function () {
-                var anonymousUserAlert = $('#anonymous-user-alert');
-                if (anonymousUserAlert.data('qtip')) {
-                    anonymousUserAlert.qtip('api').destroy(true);
-                }
-    
-                // alert user's of anonymous access
-              anonymousUserAlert.show().qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                    content: nf._.msg('nf-common.Message16'),
-                    position: {
-                        my: 'top right',
-                        at: 'bottom left'
-                    }
-                }));
-    
-                // render the anonymous user text
-              $('#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 (nfCommon.isDefinedAndNotNull(jwt)) {
-                    var segments = jwt.split(/\./);
-                    if (segments.length !== 3) {
-                        return '';
-                    }
-    
-                    var rawPayload = $.base64.atob(segments[1]);
-                    var payload = JSON.parse(rawPayload);
-    
-                  if (nfCommon.isDefinedAndNotNull(payload)) {
-                        return payload;
-                    } else {
-                        return null;
-                    }
-                }
-    
-                return null;
-            },
-    
-            /**
-             * Determines whether the current user can access provenance.
-             *
-             * @returns {boolean}
-             */
-            canAccessProvenance: function () {
-              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                  return nfCommon.currentUser.provenancePermissions.canRead === true;
-              } else {
-                  return false;
-              }
-          },
-  
-          /**
-           * Determines whether the current user can access restricted comopnents.
-           *
-           * @returns {boolean}
-           */
-          canAccessRestrictedComponents: function () {
-              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                  return nfCommon.currentUser.restrictedComponentsPermissions.canWrite === true;
-                } else {
-                    return false;
-                }
-            },
-    
-            /**
-             * Determines whether the current user can access counters.
-             *
-             * @returns {boolean}
-             */
-            canAccessCounters: function () {
-              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                  return nfCommon.currentUser.countersPermissions.canRead === true;
-                } else {
-                    return false;
-                }
-            },
-    
-            /**
-             * Determines whether the current user can modify counters.
-             *
-             * @returns {boolean}
-             */
-            canModifyCounters: function () {
-              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                  return nfCommon.currentUser.countersPermissions.canRead === true && nfCommon.currentUser.countersPermissions.canWrite === true;
-                } else {
-                    return false;
-                }
-            },
-    
-            /**
-             * Determines whether the current user can access tenants.
-             *
-             * @returns {boolean}
-             */
-            canAccessTenants: function () {
-              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                  return nfCommon.currentUser.tenantsPermissions.canRead === true;
-                } else {
-                    return false;
-                }
-            },
-    
-            /**
-             * Determines whether the current user can modify tenants.
-             *
-             * @returns {boolean}
-             */
-            canModifyTenants: function () {
-              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                  return nfCommon.currentUser.tenantsPermissions.canRead === true && nfCommon.currentUser.tenantsPermissions.canWrite === true;
-                } else {
-                    return false;
-                }
-            },
-    
-            /**
-             * Determines whether the current user can access counters.
-             *
-             * @returns {boolean}
-             */
-            canAccessPolicies: function () {
-              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                  return nfCommon.currentUser.policiesPermissions.canRead === true;
-                } else {
-                    return false;
-                }
-            },
-    
-            /**
-             * Determines whether the current user can modify counters.
-             *
-             * @returns {boolean}
-             */
-            canModifyPolicies: function () {
-              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                  return nfCommon.currentUser.policiesPermissions.canRead === true && nfCommon.currentUser.policiesPermissions.canWrite === true;
-                } else {
-                    return false;
-                }
-            },
-    
-            /**
-             * Determines whether the current user can access the controller.
-             *
-             * @returns {boolean}
-             */
-            canAccessController: function () {
-              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                  return nfCommon.currentUser.controllerPermissions.canRead === true;
-                } else {
-                    return false;
-                }
-            },
-    
-            /**
-             * Determines whether the current user can modify the controller.
-             *
-             * @returns {boolean}
-             */
-            canModifyController: function () {
-              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                  return nfCommon.currentUser.controllerPermissions.canRead === true && nfCommon.currentUser.controllerPermissions.canWrite === true;
-              } else {
-                  return false;
-              }
-          },
-  
-          /**
-           * Determines whether the current user can access system diagnostics.
-           *
-           * @returns {boolean}
-           */
-          canAccessSystem: function () {
-              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
-                  return nfCommon.currentUser.systemPermissions.canRead === true;
-                } else {
-                    return false;
-                }
-            },
-    
-            /**
-             * 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
-             */
-            addHoverEffect: function (selector, normalStyle, overStyle) {
-                $(document).on('mouseenter', selector, function () {
-                    $(this).removeClass(normalStyle).addClass(overStyle);
-                }).on('mouseleave', selector, function () {
-                    $(this).removeClass(overStyle).addClass(normalStyle);
-                });
-                return $(selector).addClass(normalStyle);
-            },
-    
-            /**
-             * Determine if an `element` has content overflow and adds the `.scrollable` class if it does.
-             *
-             * @param {HTMLElement} element The DOM element to toggle .scrollable upon.
-             */
-            toggleScrollable: function (element) {
-                if ($(element).is(':visible')) {
-                    if (element.offsetHeight < element.scrollHeight ||
-                        element.offsetWidth < element.scrollWidth) {
-                        // your element has overflow
-                        $(element).addClass('scrollable');
-                    } else {
-                        $(element).removeClass('scrollable');
-                    }
-                }
-            },
-    
-            /**
-           * Determines the contrast color of a given hex color.
-             *
-           * @param {string} hex  The hex color to test.
-           * @returns {string} The contrasting color string.
-           */
-          determineContrastColor: function (hex) {
-              if (parseInt(hex, 16) > 0xffffff / 1.5) {
-                  return '#000000';
-              }
-              return '#ffffff';
-            },
-    
-            /**
-             * Shows the logout link if appropriate.
-             */
-            showLogoutLink: function () {
-              if (nfStorage.getItem('jwt') === null) {
-                    $('#user-logout-container').css('display', 'none');
-                } else {
-                    $('#user-logout-container').css('display', 'block');
-                }
-            },
-    
-            /**
-             * Returns whether a content viewer has been configured.
-             *
-             * @returns {boolean}
-             */
-            isContentViewConfigured: function () {
-                var contentViewerUrl = $('#nifi-content-viewer-url').text();
-              return !nfCommon.isBlank(contentViewerUrl);
-            },
-    
-            /**
-             * 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 (nfCommon.isUndefined(value) || nfCommon.isNull(value)) {
-                    return $('#' + target).addClass('unset').text(nf._.msg('nf-common.Message13'));
-                } else if (value === '') {
-                    return $('#' + target).addClass('blank').text(nf._.msg('nf-common.Message14'));
-                } else {
-                    return $('#' + target).text(value);
-                }
-            },
-    
-            /**
-             * 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) {
-                return $('#' + target).removeClass('unset blank').text('');
-            },
-    
-            /**
-             * Cleans up any tooltips that have been created for the specified container.
-             *
-             * @param {jQuery} container
-             * @param {string} tooltipTarget
-             */
-            cleanUpTooltips: function (container, tooltipTarget) {
-                container.find(tooltipTarget).each(function () {
-                    var tip = $(this);
-                    if (tip.data('qtip')) {
-                        var api = tip.qtip('api');
-                        api.destroy(true);
-                    }
-                });
-            },
-    
-            /**
-             * Formats the tooltip for the specified property.
-             *
-             * @param {object} propertyDescriptor      The property descriptor
-             * @param {object} propertyHistory         The property history
-             * @returns {string}
-             */
-            formatPropertyTooltip: function (propertyDescriptor, propertyHistory) {
-                var tipContent = [];
-    
-                // show the property description if applicable
-              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                  if (!nfCommon.isBlank(propertyDescriptor.description)) {
-                      tipContent.push(nfCommon.escapeHtml(propertyDescriptor.description));
-                  }
-                  if (!nfCommon.isBlank(propertyDescriptor.defaultValue)) {
-                      tipContent.push('<b>'+nf._.msg('nf-summary-table.DefaultValue')+':</b> ' + nfCommon.escapeHtml(propertyDescriptor.defaultValue));
-                  }
-                  if (!nfCommon.isBlank(propertyDescriptor.supportsEl)) {
-                      tipContent.push('<b>'+nf._.msg('nf-summary-table.SupportsExpressionLanguage')+':</b> ' + nfCommon.escapeHtml(propertyDescriptor.supportsEl));
-                    }
-                }
-    
-              if (nfCommon.isDefinedAndNotNull(propertyHistory)) {
-                  if (!nfCommon.isEmpty(propertyHistory.previousValues)) {
-                        var history = [];
-                        $.each(propertyHistory.previousValues, function (_, previousValue) {
-                          history.push('<li>' + nfCommon.escapeHtml(previousValue.previousValue) + ' - ' + nfCommon.escapeHtml(previousValue.timestamp) + ' (' + nfCommon.escapeHtml(previousValue.userIdentity) + ')</li>');
-                        });
-                      tipContent.push('<b>'+nf._.msg('nf-summary-table.History')+':</b><ul class="property-info">' + history.join('') + '</ul>');
-                    }
-                }
-    
-                if (tipContent.length > 0) {
-                    return tipContent.join('<br/><br/>');
-                } else {
-                    return null;
-                }
-            },
-    
-            /**
-             * 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 '<div><span class="label">' + nfCommon.formatValue(name) + ': </span>' + nfCommon.formatValue(value) + '</div>';
-            },
-    
-            /**
-             * Formats the specified value accordingly.
-             *
-             * @argument {string} value     The value of the property
-             */
-            formatValue: function (value) {
-              if (nfCommon.isDefinedAndNotNull(value)) {
-                    if (value === '') {
-                        return '<span class="blank" style="font-size: 13px; padding-top: 2px;">'+nf._.msg('nf-common.Message27')+'</span>';
-                    } else {
-                      return nfCommon.escapeHtml(value);
-                    }
-                } else {
-                    return '<span class="unset" style="font-size: 13px; padding-top: 2px;">'+nf._.msg('nf-common.Message28')+'</span>';
-                }
-            },
-    
-            /**
-             * HTML escapes the specified string. If the string is null
-             * or undefined, an empty string is returned.
-             *
-             * @returns {string}
-             */
-            escapeHtml: (function () {
-                var entityMap = {
-                    '&': '&amp;',
-                    '<': '&lt;',
-                    '>': '&gt;',
-                    '"': '&quot;',
-                    "'": '&#39;',
-                    '/': '&#x2f;'
-                };
-    
-                return function (string) {
-                  if (nfCommon.isDefinedAndNotNull(string)) {
-                        return String(string).replace(/[&<>"'\/]/g, function (s) {
-                            return entityMap[s];
-                        });
-                    } else {
-                        return '';
-                    }
-                };
-            }()),
-    
-            /**
-             * Determines if the specified property is sensitive.
-             *
-             * @argument {object} propertyDescriptor        The property descriptor
-             */
-            isSensitiveProperty: function (propertyDescriptor) {
-              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                    return propertyDescriptor.sensitive === true;
-                } else {
-                    return false;
-                }
-            },
-    
-            /**
-             * Determines if the specified property is required.
-             *
-             * @param {object} propertyDescriptor           The property descriptor
-             */
-            isRequiredProperty: function (propertyDescriptor) {
-              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                    return propertyDescriptor.required === true;
-                } else {
-                    return false;
-                }
-            },
-    
-            /**
-             * Determines if the specified property is required.
-             *
-             * @param {object} propertyDescriptor           The property descriptor
-             */
-            isDynamicProperty: function (propertyDescriptor) {
-              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                    return propertyDescriptor.dynamic === true;
-                } else {
-                    return false;
-                }
-            },
-    
-            /**
-             * Gets the allowable values for the specified property.
-             *
-             * @argument {object} propertyDescriptor        The property descriptor
-             */
-            getAllowableValues: function (propertyDescriptor) {
-              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                    return propertyDescriptor.allowableValues;
-                } else {
-                    return null;
-                }
-            },
-    
-            /**
-             * Returns whether the specified property supports EL.
-             *
-             * @param {object} propertyDescriptor           The property descriptor
-             */
-            supportsEl: function (propertyDescriptor) {
-              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
-                    return propertyDescriptor.supportsEl === true;
-                } else {
-                    return false;
-                }
-            },
-    
-            /**
-             * 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) {
-                if ($.isArray(array)) {
-                    var ul = $('<ul class="result"></ul>');
-                    $.each(array, function (_, item) {
-                        var li = $('<li></li>').appendTo(ul);
-                        if (item instanceof jQuery) {
-                            li.append(item);
-                        } else {
-                            li.text(item);
-                        }
-                    });
-                    return ul;
-                } else {
-                    return null;
-                }
-            },
-    
-            /**
-             * 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
-             */
-            substringAfterLast: function (str, strToFind) {
-                var result = '';
-                var indexOfStrToFind = str.lastIndexOf(strToFind);
-                if (indexOfStrToFind >= 0) {
-                    var indexAfterStrToFind = indexOfStrToFind + strToFind.length;
-                    if (indexAfterStrToFind < str.length) {
-                        result = str.substr(indexAfterStrToFind);
-                    }
-                }
-                return result;
-            },
-    
-            /**
-             * 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
-             */
-            substringAfterFirst: function (str, strToFind) {
-                var result = '';
-                var indexOfStrToFind = str.indexOf(strToFind);
-                if (indexOfStrToFind >= 0) {
-                    var indexAfterStrToFind = indexOfStrToFind + strToFind.length;
-                    if (indexAfterStrToFind < str.length) {
-                        result = str.substr(indexAfterStrToFind);
-                    }
-                }
-                return result;
-            },
-    
-            /**
-             * Extracts the contents of the specified str before the strToFind. If the
-             * strToFind is not found or the first part of the str, an empty string is
-             * returned.
-             *
-             * @argument {string} str       The full string
-             * @argument {string} strToFind The substring to find
-             */
-            substringBeforeFirst: function (str, strToFind) {
-                var result = '';
-                var indexOfStrToFind = str.indexOf(strToFind);
-                if (indexOfStrToFind >= 0) {
-                    result = str.substr(0, indexOfStrToFind);
-                }
-                return result
-            },
-    
-            /**
-             * 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
-             */
-            setCursor: function (domId, isMouseOver) {
-                if (isMouseOver) {
-                    $('#' + domId).addClass('pointer');
-                } else {
-                    $('#' + domId).removeClass('pointer');
-                }
-            },
-    
-            /**
-             * Gets an access token from the specified url.
-             *
-             * @param accessTokenUrl    The access token
-             * @returns the access token as a deferred
-             */
-            getAccessToken: function (accessTokenUrl) {
-                return $.Deferred(function (deferred) {
-                  if (nfStorage.hasItem('jwt')) {
-                        $.ajax({
-                            type: 'POST',
-                            url: accessTokenUrl
-                        }).done(function (token) {
-                            deferred.resolve(token);
-                        }).fail(function () {
-                            deferred.reject();
-                        })
-                    } else {
-                        deferred.resolve('');
-                    }
-                }).promise();
-            },
-    
-            /**
-             * Constants for time duration formatting.
-             */
-            MILLIS_PER_DAY: 86400000,
-            MILLIS_PER_HOUR: 3600000,
-            MILLIS_PER_MINUTE: 60000,
-            MILLIS_PER_SECOND: 1000,
-    
-            /**
-             * Formats the specified duration.
-             *
-             * @param {integer} duration in millis
-             */
-            formatDuration: function (duration) {
-                // don't support sub millisecond resolution
-                duration = duration < 1 ? 0 : duration;
-    
-                // determine the number of days in the specified duration
-              var days = duration / nfCommon.MILLIS_PER_DAY;
-                days = days >= 1 ? parseInt(days, 10) : 0;
-              duration %= nfCommon.MILLIS_PER_DAY;
-    
-                // remaining duration should be less than 1 day, get number of hours
-              var hours = duration / nfCommon.MILLIS_PER_HOUR;
-                hours = hours >= 1 ? parseInt(hours, 10) : 0;
-              duration %= nfCommon.MILLIS_PER_HOUR;
-    
-                // remaining duration should be less than 1 hour, get number of minutes
-              var minutes = duration / nfCommon.MILLIS_PER_MINUTE;
-                minutes = minutes >= 1 ? parseInt(minutes, 10) : 0;
-              duration %= nfCommon.MILLIS_PER_MINUTE;
-    
-                // remaining duration should be less than 1 minute, get number of seconds
-              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 % nfCommon.MILLIS_PER_SECOND);
-    
-                // format the time
-              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) {
-                    return days + ' days and ' + time;
-                } else {
-                    return time;
-                }
-            },
-    
-            /**
-             * Constants for formatting data size.
-             */
-            BYTES_IN_KILOBYTE: 1024,
-            BYTES_IN_MEGABYTE: 1048576,
-            BYTES_IN_GIGABYTE: 1073741824,
-            BYTES_IN_TERABYTE: 1099511627776,
-    
-            /**
-             * 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 / nfCommon.BYTES_IN_TERABYTE);
-                if (dataSizeToFormat > 1) {
-                    return dataSizeToFormat.toFixed(2) + " TB";
-                }
-    
-                // check gigabytes
-              dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_GIGABYTE);
-                if (dataSizeToFormat > 1) {
-                    return dataSizeToFormat.toFixed(2) + " GB";
-                }
-    
-                // check megabytes
-              dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_MEGABYTE);
-                if (dataSizeToFormat > 1) {
-                    return dataSizeToFormat.toFixed(2) + " MB";
-                }
-    
-                // check kilobytes
-              dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_KILOBYTE);
-                if (dataSizeToFormat > 1) {
-                    return dataSizeToFormat.toFixed(2) + " KB";
-                }
-    
-                // default to bytes
-                return parseFloat(dataSize).toFixed(2) + nf._.msg('nf-common.Bytes');
-            },
-    
-            /**
-             * 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) {
-                var string = integer + '';
-                var regex = /(\d+)(\d{3})/;
-                while (regex.test(string)) {
-                    string = string.replace(regex, '$1' + ',' + '$2');
-                }
-                return string;
-            },
-    
-            /**
-             * Formats the specified float using two demical places.
-             *
-             * @param {float} f
-             */
-            formatFloat: function (f) {
-              if (nfCommon.isUndefinedOrNull(f)) {
-                    return 0.00 + '';
-                }
-                return f.toFixed(2) + '';
-            },
-    
-            /**
-             * 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
-             * @returns {string}
-             */
-            pad: function (value, width, character) {
-                var s = value + '';
-    
-                // pad until wide enough
-                while (s.length < width) {
-                    s = character + s;
-                }
-    
-                return s;
-            },
-    
-            /**
-             * Formats the specified DateTime.
-             *
-             * @param {Date} date
-             * @returns {String}
-             */
-            formatDateTime: function (date) {
-              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 (!nfCommon.isDefinedAndNotNull(rawDateTime)) {
-                    return new Date();
-                }
-              if (rawDateTime === 'No value set') {
-                    return new Date();
-                }
-              if (rawDateTime === 'Empty string set') {
-                    return new Date();
-                }
-    
-                // parse the date time
-                var dateTime = rawDateTime.split(/ /);
-    
-                // ensure the correct number of tokens
-                if (dateTime.length !== 3) {
-                    return new Date();
-                }
-    
-                // get the date and time
-                var date = dateTime[0].split(/\//);
-                var time = dateTime[1].split(/:/);
-    
-                // ensure the correct number of tokens
-                if (date.length !== 3 || time.length !== 3) {
-                    return new Date();
-                }
-              var year = parseInt(date[2], 10);
-              var month = parseInt(date[0], 10) - 1; // new Date() accepts months 0 - 11
-              var day = parseInt(date[1], 10);
-              var hours = parseInt(time[0], 10);
-              var minutes = parseInt(time[1], 10);
-    
-                // detect if there is millis
-              var secondsSpec = time[2].split(/\./);
-              var seconds = parseInt(secondsSpec[0], 10);
-              var milliseconds = 0;
-              if (secondsSpec.length === 2) {
-                  milliseconds = parseInt(secondsSpec[1], 10);
-                }
-              return new Date(year, month, day, hours, minutes, seconds, milliseconds);
-            },
-    
-            /**
-             * Parses the specified duration and returns the total number of millis.
-             *
-             * @param {string} rawDuration
-             * @returns {number}        The number of millis
-             */
-            parseDuration: function (rawDuration) {
-                var duration = rawDuration.split(/:/);
-    
-                // ensure the appropriate number of tokens
-                if (duration.length !== 3) {
-                    return 0;
-                }
-    
-                // detect if there is millis
-                var seconds = duration[2].split(/\./);
-                if (seconds.length === 2) {
-                    return new Date(1970, 0, 1, parseInt(duration[0], 10), parseInt(duration[1], 10), parseInt(seconds[0], 10), parseInt(seconds[1], 10)).getTime();
-                } else {
-                    return new Date(1970, 0, 1, parseInt(duration[0], 10), parseInt(duration[1], 10), parseInt(duration[2], 10), 0).getTime();
-                }
-            },
-    
-            /**
-             * Parses the specified size.
-             *
-             * @param {string} rawSize
-             * @returns {int}
-             */
-            parseSize: function (rawSize) {
-                var tokens = rawSize.split(/ /);
-                var size = parseFloat(tokens[0].replace(/,/g, ''));
-                var units = tokens[1];
-    
-                if (units === 'KB') {
-                    return size * 1024;
-                } else if (units === 'MB') {
-                    return size * 1024 * 1024;
-                } else if (units === 'GB') {
-                    return size * 1024 * 1024 * 1024;
-                } else if (units === 'TB') {
-                    return size * 1024 * 1024 * 1024 * 1024;
-                } else {
-                    return size;
-                }
-            },
-    
-            /**
-             * Parses the specified count.
-             *
-             * @param {string} rawCount
-             * @returns {int}
-             */
-            parseCount: function (rawCount) {
-                // extract the count
-                var count = rawCount.split(/ /, 1);
-    
-                // ensure the string was split successfully
-                if (count.length !== 1) {
-                    return 0;
-                }
-    
-                // convert the count to an integer
-                var intCount = parseInt(count[0].replace(/,/g, ''), 10);
-    
-                // ensure it was parsable as an integer
-                if (isNaN(intCount)) {
-                    return 0;
-                }
-                return intCount;
-            },
-    
-            /**
-             * Determines if the specified object is defined and not null.
-             *
-             * @argument {object} obj   The object to test
-             */
-            isDefinedAndNotNull: function (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 nfCommon.isUndefined(obj) || nfCommon.isNull(obj);
-            },
-    
-            /**
-             * Determines if the specified object is undefined.
-             *
-             * @argument {object} obj   The object to test
-             */
-            isUndefined: function (obj) {
-                return typeof obj === 'undefined';
-            },
-    
-            /**
-             * Determines whether the specified string is blank (or null or undefined).
-             *
-             * @argument {string} str   The string to test
-             */
-            isBlank: function (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) {
-                return obj === null;
-            },
-    
-            /**
-             * 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) {
-                return $.isArray(arr) ? arr.length === 0 : true;
-            },
-    
-            /**
-             * Determines if these are the same bulletins. If both arguments are not
-             * arrays, false is returned.
-             *
-             * @param {array} bulletins
-             * @param {array} otherBulletins
-             * @returns {boolean}
-             */
-            doBulletinsDiffer: function (bulletins, otherBulletins) {
-                if ($.isArray(bulletins) && $.isArray(otherBulletins)) {
-                    if (bulletins.length === otherBulletins.length) {
-                        for (var i = 0; i < bulletins.length; i++) {
-                            if (bulletins[i].id !== otherBulletins[i].id || bulletins[i].canRead !== otherBulletins[i].canRead) {
-                                return true;
-                            }
-                        }
-                    } else {
-                        return true;
-                    }
-                } else if ($.isArray(bulletins) || $.isArray(otherBulletins)) {
-                    return true;
-                }
-                return false;
-            },
-    
-            /**
-             * Formats the specified bulletin list.
-             *
-             * @argument {array} bulletins      The bulletins
-             * @return {array}                  The jQuery objects
-             */
-            getFormattedBulletins: function (bulletinEntities) {
-                var formattedBulletinEntities = [];
-                $.each(bulletinEntities, function (j, bulletinEntity) {
-                    if (bulletinEntity.canRead === true) {
-                        var bulletin = bulletinEntity.bulletin;
-    
-                        // format the node address
-                        var nodeAddress = '';
-                      if (nfCommon.isDefinedAndNotNull(bulletin.nodeAddress)) {
-                          nodeAddress = '-&nbsp;' + nfCommon.escapeHtml(bulletin.nodeAddress) + '&nbsp;-&nbsp;';
-                        }
-    
-                        // set the bulletin message (treat as text)
-                        var bulletinMessage = $('<pre></pre>').css({
-                            'white-space': 'pre-wrap'
-                        }).text(bulletin.message);
-    
-                        // create the bulletin message
-                        var formattedBulletin = $('<div>' +
-                          nfCommon.escapeHtml(bulletin.timestamp) + '&nbsp;' +
-                            nodeAddress + '&nbsp;' +
-                          '<b>' + nfCommon.escapeHtml(bulletin.level) + '</b>&nbsp;' +
-                            '</div>').append(bulletinMessage);
-    
-                        formattedBulletinEntities.push(formattedBulletin);
-                    }
-                });
-                return formattedBulletinEntities;
-          },
-  
-          getPolicyTypeListing: function (value) {
-              var nest = d3.nest()
-                  .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
deleted file mode 100644
index b847a0cc21a6..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
+++ /dev/null
@@ -1,553 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Common',
-                  'nf.ErrorHandler'],
-              function ($, nfCommon, nfErrorHandler) {
-                  return (nf.ConnectionDetails = factory($, nfCommon, nfErrorHandler));
-              });
-      } 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 ($, nfCommon, nfErrorHandler) {
-      'use strict';
-    
-        /**
-         * Initialize the details for the source of the connection.
-         *
-         * @argument {string} groupId               The id of the current group
-         * @argument {string} groupName             The name of the current group
-         * @argument {object} source        The source of the connection
-         */
-        var initializeConnectionSource = function (groupId, groupName, source) {
-            if (source.type === 'PROCESSOR') {
-                return initializeSourceProcessor(groupId, groupName, source);
-            } else if (source.type === 'FUNNEL') {
-                return initializeSourceFunnel(groupId, groupName, source);
-            } else if (source.type === 'REMOTE_OUTPUT_PORT') {
-                return initializeRemoteSourcePort(groupId, groupName, source);
-            } else {
-                return initializeLocalSourcePort(groupId, groupName, source);
-            }
-        };
-    
-        /**
-         * Initialize the details for the source processor.
-         *
-         * @argument {string} groupId               The id of the current group
-         * @argument {string} groupName             The name of the current group
-         * @argument {object} source            The source of the connection
-         */
-        var initializeSourceProcessor = function (groupId, groupName, source) {
-            return $.Deferred(function (deferred) {
-                $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/processors/' + encodeURIComponent(source.id),
-                    dataType: 'json'
-                }).done(function (response) {
-                    var processor = response.component;
-                  var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name);
-                  var processorType = $('<div></div>').text(nfCommon.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nfCommon.substringAfterLast(processor.type, '.'));
-    
-                    // populate source processor details
-                    $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromProcessor'));
-                    $('#read-only-connection-source').append(processorName).append(processorType);
-                    $('#read-only-connection-source-group-name').text(groupName);
-    
-                    deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    if (xhr.status === 403) {
-                      var processorName = $('<div class="label"></div>').text(source.name).addClass('ellipsis').attr('title', source.name);
-                      var processorType = $('<div></div>').text(nf._.msg('nf-connection-details.Processor')).addClass('ellipsis').attr('title', 'Processor');
-    
-                        // populate source processor details
-                        $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromProcessor'));
-                        $('#read-only-connection-source').append(processorName).append(processorType);
-                        $('#read-only-connection-source-group-name').text(groupName);
-    
-                        deferred.resolve();
-                    } else {
-                        deferred.reject(xhr, status, error);
-                    }
-                });
-            }).promise();
-        };
-    
-        /**
-         * Initialize the details for the source funnel.
-         *
-         * @argument {string} groupId               The id of the current group
-         * @argument {string} groupName             The name of the current group
-         * @argument {object} source            The source of the connection
-         */
-        var initializeSourceFunnel = function (groupId, groupName, source) {
-            return $.Deferred(function (deferred) {
-                $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromFunnel'));
-              $('#read-only-connection-source').text('funnel').attr('title', 'funnel');
-                $('#read-only-connection-source-group-name').text(groupName);
-                deferred.resolve();
-            }).promise();
-        };
-    
-        /**
-         * Initialize the details for the remote source port.
-         *
-         * @argument {string} groupId               The id of the current group
-         * @argument {string} groupName             The name of the current group
-         * @argument {object} source            The source of the connection
-         */
-        var initializeRemoteSourcePort = function (groupId, groupName, source) {
-            return $.Deferred(function (deferred) {
-                $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/remote-process-groups/' + encodeURIComponent(source.groupId),
-                    dataType: 'json'
-                }).done(function (response) {
-                    var remoteProcessGroup = response.component;
-    
-                    // populate source port details
-                    $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromOutPut'));
-                  $('#read-only-connection-source').text(source.name).attr('title', source.name);
-                    $('#read-only-connection-source-group-name').text(remoteProcessGroup.name);
-    
-                  deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    if (xhr.status === 403) {
-                        // populate source processor details
-                        $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromOutPut'));
-                      $('#read-only-connection-source').text(source.name).attr('title', source.name);
-                        $('#read-only-connection-source-group-name').text(source.groupId);
-    
-                        deferred.resolve();
-                    } else {
-                        deferred.reject(xhr, status, error);
-                    }
-                });
-            }).promise();
-        };
-    
-        /**
-         * Initialize the details for the source port.
-         *
-         * @argument {string} groupId               The id of the current group
-         * @argument {string} groupName             The name of the current group
-         * @argument {object} source            The source of the connection
-         */
-        var initializeLocalSourcePort = function (groupId, groupName, source) {
-            return $.Deferred(function (deferred) {
-                if (groupId === source.groupId) {
-                    // populate source port details
-                    $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromInput'));
-                  $('#read-only-connection-source').text(source.name).attr('title', source.name);
-                    $('#read-only-connection-source-group-name').text(groupName);
-    
-                    deferred.resolve();
-                } else {
-                    $.ajax({
-                        type: 'GET',
-                        url: '../nifi-api/process-groups/' + encodeURIComponent(source.groupId),
-                        dataType: 'json'
-                    }).done(function (response) {
-                        var processGroup = response.component;
-    
-                        // populate source port details
-                        $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromOutPut'));
-                      $('#read-only-connection-source').text(source.name).attr('title', source.name);
-                        $('#read-only-connection-source-group-name').text(processGroup.name);
-    
-                        deferred.resolve();
-                    }).fail(function (xhr, status, error) {
-                        if (xhr.status === 403) {
-                            // populate source processor details
-                          $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromOutPut'));
-                          $('#read-only-connection-source').text(source.name).attr('title', source.name);
-                            $('#read-only-connection-source-group-name').text(source.groupId);
-    
-                            deferred.resolve();
-                        } else {
-                            deferred.reject(xhr, status, error);
-                        }
-                    });
-                }
-            }).promise();
-        };
-    
-        /**
-         * Initialize the details for the destination of the connection.
-         *
-         * @argument {string} groupId               The id of the current group
-         * @argument {string} groupName             The name of the current group
-         * @argument {object} destination            The destination of the connection
-         */
-        var initializeConnectionDestination = function (groupId, groupName, destination) {
-            if (destination.type === 'PROCESSOR') {
-                return initializeDestinationProcessor(groupId, groupName, destination);
-            } else if (destination.type === 'FUNNEL') {
-                return initializeDestinationFunnel(groupId, groupName, destination);
-            } else if (destination.type === 'REMOTE_INPUT_PORT') {
-                return initializeDestinationRemotePort(groupId, groupName, destination);
-            } else {
-                return initializeDestinationLocalPort(groupId, groupName, destination);
-            }
-        };
-    
-        /**
-         * Initialize the details for the destination processor.
-         *
-         * @argument {string} groupId               The id of the current group
-         * @argument {string} groupName             The name of the current group
-         * @argument {object} destination            The destination of the connection
-         */
-        var initializeDestinationProcessor = function (groupId, groupName, destination) {
-            return $.Deferred(function (deferred) {
-                $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/processors/' + encodeURIComponent(destination.id),
-                    dataType: 'json'
-                }).done(function (response) {
-                    var processor = response.component;
-                  var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name);
-                  var processorType = $('<div></div>').text(nfCommon.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nfCommon.substringAfterLast(processor.type, '.'));
-    
-                    // populate destination processor details
-                    $('#read-only-connection-target-label').text('To processor');
-                    $('#read-only-connection-target').append(processorName).append(processorType);
-                    $('#read-only-connection-target-group-name').text(groupName);
-    
-                    deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    if (xhr.status === 403) {
-                      var processorName = $('<div class="label"></div>').text(destination.name).addClass('ellipsis').attr('title', destination.name);
-                      var processorType = $('<div></div>').text(nf._.msg('nf-connection-details.Processor')).addClass('ellipsis').attr('title', 'Processor');
-    
-                        // populate destination processor details
-                      $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToProcessor'));
-                        $('#read-only-connection-target').append(processorName).append(processorType);
-                        $('#read-only-connection-target-group-name').text(groupName);
-    
-                        deferred.resolve();
-                    } else {
-                        deferred.reject(xhr, status, error);
-                    }
-                });
-            }).promise();
-        };
-    
-        /**
-         * Initialize the details for the source funnel.
-         *
-         * @argument {string} groupId               The id of the current group
-         * @argument {string} groupName             The name of the current group
-         * @argument {object} destination            The destination of the connection
-         */
-        var initializeDestinationFunnel = function (groupId, groupName, destination) {
-            return $.Deferred(function (deferred) {
-                $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToFunnel'));
-              $('#read-only-connection-target').text('funnel').attr('title', 'funnel');
-                $('#read-only-connection-target-group-name').text(groupName);
-                deferred.resolve();
-            }).promise();
-        };
-    
-        /**
-         * Initialize the details for the remote source port.
-         *
-         * @argument {string} groupId               The id of the current group
-         * @argument {string} groupName             The name of the current group
-         * @argument {object} destination            The destination of the connection
-         */
-        var initializeDestinationRemotePort = function (groupId, groupName, destination) {
-            return $.Deferred(function (deferred) {
-                $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/remote-process-groups/' + encodeURIComponent(destination.groupId),
-                    dataType: 'json'
-                }).done(function (response) {
-                    var remoteProcessGroup = response.component;
-    
-                    // populate source port details
-                    $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToInput'));
-                  $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
-                    $('#read-only-connection-target-group-name').text(remoteProcessGroup.name);
-    
-                    deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    if (xhr.status === 403) {
-                        // populate source port details
-                        $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToInput'));
-                      $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
-                        $('#read-only-connection-target-group-name').text(destination.groupId);
-    
-                        deferred.resolve();
-                    } else {
-                        deferred.reject(xhr, status, error);
-                    }
-                });
-            }).promise();
-        };
-    
-        /**
-         * Initialize the details for the destination port.
-         *
-         * @argument {string} groupId               The id of the current group
-         * @argument {string} groupName             The name of the current group
-         * @argument {object} destination            The destination of the connection
-         */
-        var initializeDestinationLocalPort = function (groupId, groupName, destination) {
-            return $.Deferred(function (deferred) {
-                if (groupId === destination.groupId) {
-                    // populate destination port details
-                    $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToOutput'));
-                  $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
-                    $('#read-only-connection-target-group-name').text(groupName);
-    
-                    deferred.resolve();
-                } else {
-                    $.ajax({
-                        type: 'GET',
-                        url: '../nifi-api/process-groups/' + encodeURIComponent(destination.groupId),
-                        dataType: 'json'
-                    }).done(function (response) {
-                        var processGroup = response.component;
-    
-                        // populate destination port details
-                      $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToInput'));
-                      $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
-                        $('#read-only-connection-target-group-name').text(processGroup.name);
-    
-                        deferred.resolve();
-                    }).fail(function (xhr, status, error) {
-                        if (xhr.status === 403) {
-                            // populate source port details
-                            $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToInput'));
-                          $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
-                            $('#read-only-connection-target-group-name').text(destination.groupId);
-    
-                            deferred.resolve();
-                        } else {
-                            deferred.reject(xhr, status, error);
-                        }
-                    });
-                }
-            }).promise();
-        };
-    
-    
-        /**
-         * Creates the relationship option for the specified relationship.
-         *
-         * @argument {string} name      The relationship name
-         */
-        var createRelationshipOption = function (name) {
-            $('<div class="available-relationship-container"></div>').append(
-                $('<div class="relationship-name"></div>').text(name)).appendTo('#read-only-relationship-names');
-        };
-    
-        return {
-            /**
-             * Initializes the connection details dialog.
-             */
-            init: function () {
-                // initialize the details tabs
-                $('#connection-details-tabs').tabbs({
-                    tabStyle: 'tab',
-                    selectedTabStyle: 'selected-tab',
-                    scrollableTabContentStyle: 'scrollable',
-                    tabs: [{
-                        name: nf._.msg('nf-connection-details.Details'),
-                        tabContentId: 'read-only-connection-details-tab-content'
-                    }, {
-                        name: nf._.msg('nf-connection-details.Settings'),
-                        tabContentId: 'read-only-connection-settings-tab-content'
-                    }]
-                });
-    
-                // configure the connection details dialog
-                $('#connection-details').modal({
-                    headerText: nf._.msg('nf-connection-details.ConnectionDetails'),
-                    scrollableContentStyle: 'scrollable',
-                    buttons: [{
-                        buttonText: nf._.msg('nf-connection-details.Ok'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                $('#connection-details').modal('hide');
-                            }
-                        }
-                    }],
-                    handler: {
-                        close: function () {
-                            // clear the relationship names
-                            $('#read-only-relationship-names').empty();
-    
-                            // clear the connection details
-                          nfCommon.clearField('read-only-connection-name');
-                          nfCommon.clearField('read-only-connection-id');
-    
-                            // clear the connection source details
-                            $('#read-only-connection-source-label').text('');
-                            $('#read-only-connection-source').empty();
-                            $('#read-only-connection-source-group-name').text('');
-    
-                            // clear the connection target details
-                            $('#read-only-connection-target-label').text('');
-                            $('#read-only-connection-target').empty();
-                            $('#read-only-connection-target-group-name').text('');
-    
-                            // clear the relationship details
-                            $('#read-only-relationship-names').css('border-width', '0').empty();
-    
-                            // clear the connection settings
-                            $('#read-only-flow-file-expiration').text('');
-                            $('#read-only-back-pressure-object-threshold').text('');
-                            $('#read-only-back-pressure-data-size-threshold').text('');
-                            $('#read-only-prioritizers').empty();
-                        },
-                        open: function () {
-                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                        }
-                    }
-                });
-            },
-    
-            /**
-             * Shows the details for the specified edge.
-             *
-             * @argument {string} groupId           The group id
-             * @argument {string} connectionId      The connection id
-             */
-            showDetails: function (groupId, connectionId) {
-                // get the group details
-                var groupXhr = $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/flow/process-groups/' + encodeURIComponent(groupId),
-                    dataType: 'json'
-                });
-    
-                // get the connection details
-                var connectionXhr = $.ajax({
-                    type: 'GET',
-                    url: '../nifi-api/connections/' + encodeURIComponent(connectionId),
-                    dataType: 'json'
-                });
-    
-                // populate the dialog once get have all necessary details
-                $.when(groupXhr, connectionXhr).done(function (groupResult, connectionResult) {
-                    var groupResponse = groupResult[0];
-                    var connectionResponse = connectionResult[0];
-    
-                    // ensure we can read this connection.. though should never fail as the request returned successfully
-                    if (connectionResponse.permissions.canRead) {
-                        var connection = connectionResponse.component;
-                        var groupName = groupResponse.permissions.canRead ? groupResponse.processGroupFlow.breadcrumb.breadcrumb.name : groupResponse.processGroupFlow.id;
-    
-                        // process the source
-                        var connectionSource = initializeConnectionSource(groupResponse.id, groupName, connection.source);
-    
-                        // process the destination
-                        var connectionDestination = initializeConnectionDestination(groupResponse.id, groupName, connection.destination);
-    
-                        // finish populating the dialog once the source and destination have been loaded
-                        $.when(connectionSource, connectionDestination).done(function () {
-                            // process the relationships
-                            var availableRelationships = connection.availableRelationships;
-                            var selectedRelationships = connection.selectedRelationships;
-    
-                            // show the available relationship if applicable
-                          if (nfCommon.isDefinedAndNotNull(availableRelationships) || nfCommon.isDefinedAndNotNull(selectedRelationships)) {
-                                // populate the available connections
-                                $.each(availableRelationships, function (i, name) {
-                                    createRelationshipOption(name);
-                                });
-    
-                                // ensure all selected relationships are present
-                                // (may be undefined) and selected
-                                $.each(selectedRelationships, function (i, name) {
-                                    // mark undefined relationships accordingly
-                                    if ($.inArray(name, availableRelationships) === -1) {
-                                        var option = createRelationshipOption(name);
-                                        $(option).children('div.relationship-name').addClass('undefined');
-                                    }
-    
-                                    // ensure all selected relationships are bold
-                                    var relationships = $('#read-only-relationship-names').children('div');
-                                    $.each(relationships.children('div.relationship-name'), function (i, relationshipNameElement) {
-                                        var relationshipName = $(relationshipNameElement);
-                                        if (relationshipName.text() === name) {
-                                            relationshipName.css('font-weight', 'bold');
-                                        }
-                                    });
-                                });
-    
-                                $('#selected-relationship-text').show();
-                                $('#read-only-relationship-names-container').show();
-                            } else {
-                                $('#selected-relationship-text').hide();
-                                $('#read-only-relationship-names-container').hide();
-                            }
-    
-                            // set the connection details
-                          nfCommon.populateField('read-only-connection-name', connection.name);
-                          nfCommon.populateField('read-only-connection-id', connection.id);
-                          nfCommon.populateField('read-only-flow-file-expiration', connection.flowFileExpiration);
-                          nfCommon.populateField('read-only-back-pressure-object-threshold', connection.backPressureObjectThreshold);
-                          nfCommon.populateField('read-only-back-pressure-data-size-threshold', connection.backPressureDataSizeThreshold);
-    
-                            // prioritizers
-                          if (nfCommon.isDefinedAndNotNull(connection.prioritizers) && connection.prioritizers.length > 0) {
-                                var prioritizerList = $('<ol></ol>').css('list-style', 'decimal inside none');
-                                $.each(connection.prioritizers, function (i, type) {
-                                  prioritizerList.append($('<li></li>').text(nfCommon.substringAfterLast(type, '.')));
-                                });
-                                $('#read-only-prioritizers').append(prioritizerList);
-                            } else {
-                                var noValueSet = $('<span class="unset">'+nf._.msg('nf-connection-details.NoValueSet')+'</span>');
-                                $('#read-only-prioritizers').append(noValueSet);
-                            }
-    
-                            // select the first tab
-                            $('#connection-details-tabs').find('li:first').click();
-    
-                            // show the dialog
-                            $('#connection-details').modal('show');
-    
-                            // show the border if necessary
-                            var relationshipNames = $('#read-only-relationship-names');
-                          if (relationshipNames.is(':visible') && relationshipNames.get(0).scrollHeight > Math.round(relationshipNames.innerHeight())) {
-                                relationshipNames.css('border-width', '1px');
-                            }
-                      }).fail(nfErrorHandler.handleAjaxError);
-                    }
-              }).fail(nfErrorHandler.handleAjaxError);
-            }
-        };
-  }));
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
deleted file mode 100644
index 884c74ed67b7..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js
+++ /dev/null
@@ -1,178 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery'], 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', []);
-                    }
-                }
-            });
-        });
-    
-      var nfDialog = {
-            /**
-             * Shows an general dialog with an Okay button populated with the
-             * specified dialog content.
-             *
-             * @argument {object} options       Dialog options
-             */
-            showOkDialog: function (options) {
-                options = $.extend({
-                    headerText: '',
-                    dialogContent: ''
-                }, options);
-    
-                // regardless of whether the dialog is already visible, the new content will be appended
-                var content = $('<p></p>').append(options.dialogContent);
-                $('#nf-ok-dialog-content').append(content);
-    
-                // update the button model
-                $('#nf-ok-dialog').modal('setButtonModel', [{
-                    buttonText: nf._.msg('nf-dialog.Ok'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // close the dialog
-                            $('#nf-ok-dialog').modal('hide');
-                            if (typeof options.okHandler === 'function') {
-                                options.okHandler.call(this);
-                            }
-                        }
-                    }
-                }]);
-    
-                // show the dialog
-                $('#nf-ok-dialog').modal('setHeaderText', options.headerText).modal('show');
-            },
-    
-            /**
-             * Shows an general dialog with Yes and No buttons populated with the
-             * specified dialog content.
-             *
-             * @argument {object} options       Dialog options
-             */
-            showYesNoDialog: function (options) {
-                options = $.extend({
-                    headerText: '',
-                    dialogContent: '',
-                    yesText: 'Yes',
-                    noText: 'No'
-                }, options);
-    
-                // add the content to the prompt
-                var content = $('<p></p>').append(options.dialogContent);
-                $('#nf-yes-no-dialog-content').append(content);
-    
-                // update the button model
-                $('#nf-yes-no-dialog').modal('setButtonModel', [{
-                    buttonText: options.yesText,
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // close the dialog
-                            $('#nf-yes-no-dialog').modal('hide');
-                            if (typeof options.yesHandler === 'function') {
-                                options.yesHandler.call(this);
-                            }
-                        }
-                    }
-                },
-                    {
-                        buttonText: options.noText,
-                        color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
-                        },
-                        handler: {
-                            click: function () {
-                                // close the dialog
-                                $('#nf-yes-no-dialog').modal('hide');
-                                if (typeof options.noHandler === 'function') {
-                                    options.noHandler.call(this);
-                                }
-                            }
-                        }
-                    }]);
-    
-                // 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.'
-              });
-            }
-        };
-    
-      return nfDialog;
-  }));
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
deleted file mode 100644
index f7a538fc5d33..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-error-handler.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Dialog',
-                'nf.Common'],
-            function ($, nfDialog, nfCommon) {
-                return (nf.ErrorHandler = factory($, nfDialog, nfCommon));
-            });
-    } 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 ($, nfDialog, nfCommon) {
-    '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 {
-                    nfDialog.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 nfCommon errors.
-            if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409 || xhr.status === 503) {
-                nfDialog.showOkDialog({
-                    headerText: 'Error',
-                    dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                });
-            } else if (xhr.status === 403) {
-                nfDialog.showOkDialog({
-                    headerText: 'Insufficient Permissions',
-                    dialogContent: nfCommon.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 (nfCommon.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-namespace.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-namespace.js
deleted file mode 100644
index 7301e37f122b..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-namespace.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * 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.
- */
-// register the nf namespace
-var nf;
-if (!nf)
-    nf = {};
\ 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
deleted file mode 100644
index 7ffc56021cbc..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define([], 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
deleted file mode 100644
index 5e7b267a84c7..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['nf.ng.Bridge',
-                'nf.Common',
-                'nf.CanvasUtils',
-                'nf.ClusterSummary',
-                'nf.Actions'],
-            function (nfNgBridge, nfCanvasUtils, nfCommon, nfClusterSummary, nfActions) {
-                return (nf.ng.AppCtrl = factory(nfNgBridge, nfCanvasUtils, nfCommon, nfClusterSummary, nfActions));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.ng.AppCtrl =
-            factory(require('nf.ng.Bridge'),
-                require('nf.CanvasUtils'),
-                require('nf.Common'),
-                require('nf.ClusterSummary'),
-                require('nf.Actions')));
-    } else {
-        nf.ng.AppCtrl = factory(root.nf.ng.Bridge,
-            root.nf.CanvasUtils,
-            root.nf.Common,
-            root.nf.ClusterSummary,
-            root.nf.Actions);
-    }
-}(this, function (nfNgBridge, nfCanvasUtils, nfCommon, nfClusterSummary, nfActions) {
-    'use strict';
-
-    return function ($scope, serviceProvider) {
-        'use strict';
-
-        function AppCtrl(serviceProvider) {
-            //add essential modules to the scope for availability throughout the angular container
-            this.nf = {
-                "Common": nfCommon,
-                "ClusterSummary": nfClusterSummary,
-                "Actions": nfActions,
-                "CanvasUtils": nfCanvasUtils,
-            };
-
-            //any registered angular service is available through the serviceProvider
-            this.serviceProvider = serviceProvider;
-        }
-
-        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
-        nfNgBridge.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
deleted file mode 100644
index 8d50f6443530..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['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() {
-        this.rootScope;
-        this.injector;
-    };
-    AngularBridge.prototype = {
-        constructor: AngularBridge,
-
-        /**
-         * Inspects the root scope of the bridged angular application to look up
-         * objects (to be provided as the `this` context) and invoke methods.
-         *
-         * @param {string} thisArg          The value of `this` provided for the call to `fun`.
-         *                                  Note that this may not be the actual value seen
-         *                                  by the method: if the method is a function in
-         *                                  non-strict mode code, null and undefined will be
-         *                                  replaced with the global object, and primitive
-         *                                  values will be boxed.
-         * @param {string} fun              The function to call.
-         * @param [, arg1[, arg2[, ...]]]   Arguments for the `fun`
-         * @returns {*}                     The value of the `fun` if `fun` returns a value.
-         *
-         */
-        call: function (thisArg, fun) {
-            var objArray = thisArg.split(".");
-            var obj = this.rootScope;
-            angular.forEach(objArray, function (value) {
-                obj = obj[value];
-            });
-            var funArray = fun.split(".");
-            fun = this.rootScope;
-            angular.forEach(funArray, function (value) {
-                fun = fun[value];
-            });
-
-            var args = Array.prototype.slice.call(arguments, 2);
-            var result = fun.apply(obj, args);
-
-            if (result) {
-                return result;
-            }
-        },
-
-        /**
-         * Inspects the root scope of the bridged angular application to look up
-         * and return object.
-         *
-         * @param {string} name     The (dot notation) name of the object to lookup.
-         * @returns {Object|*}
-         */
-        get: function (name) {
-            var objArray = name.split(".");
-            var obj = this.rootScope;
-            angular.forEach(objArray, function (value) {
-                obj = obj[value];
-            });
-
-            return obj;
-        },
-
-        digest: function () {
-            this.rootScope.$digest();
-        }
-    };
-
-    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-namespace.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-namespace.js
deleted file mode 100644
index 87b790a7f95d..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-namespace.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * 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.
- */
-// register the nf.ng namespace
-if (!nf.ng)
-    nf.ng = {};
\ 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
deleted file mode 100644
index 958360267e01..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-service-provider.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define([], 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';
-
-    return function () {
-        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) {
-                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
deleted file mode 100644
index 1b6b28a36351..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
+++ /dev/null
@@ -1,325 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common',
-                'nf.UniversalCapture',
-                'nf.Dialog',
-                'nf.ErrorHandler',
-                'nf.CustomUi',
-                'nf.ClusterSummary'],
-            function ($, nfCommon, nfUniversalCapture, nfDialog, nfErrorHandler, nfCustomUi, nfClusterSummary) {
-                return (nf.ProcessorDetails = factory($, nfCommon, nfUniversalCapture, nfDialog, nfErrorHandler, nfCustomUi, nfClusterSummary));
-            });
-    } 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 ($, nfCommon, nfUniversalCapture, nfDialog, nfErrorHandler, nfCustomUi, nfClusterSummary) {
-    'use strict';
-
-    /**
-     * Creates an option for the specified relationship name.
-     *
-     * @argument {object} relationship      The relationship
-     */
-    var createRelationshipOption = function (relationship) {
-        var relationshipLabel = $('<div class="relationship-name ellipsis"></div>').text(relationship.name);
-
-        // build the relationship checkbox element
-        if (relationship.autoTerminate === true) {
-            relationshipLabel.css('font-weight', 'bold');
-        }
-
-        // build the relationship container element
-        var relationshipContainerElement = $('<div class="processor-relationship-container"></div>').append(relationshipLabel).appendTo('#read-only-auto-terminate-relationship-names');
-        if (!nfCommon.isBlank(relationship.description)) {
-            var relationshipDescription = $('<div class="relationship-description"></div>').text(relationship.description);
-            relationshipContainerElement.append(relationshipDescription);
-        }
-
-        return relationshipContainerElement;
-    };
-
-    return {
-        /**
-         * Initializes the processor details dialog.
-         */
-        init: function (supportsGoTo) {
-
-            // initialize the properties tabs
-            $('#processor-details-tabs').tabbs({
-                tabStyle: 'tab',
-                selectedTabStyle: 'selected-tab',
-                scrollableTabContentStyle: 'scrollable',
-                tabs: [{
-                    name: 'Settings',
-                    tabContentId: 'details-standard-settings-tab-content'
-                }, {
-                    name: 'Scheduling',
-                    tabContentId: 'details-scheduling-tab-content'
-                }, {
-                    name: 'Properties',
-                    tabContentId: 'details-processor-properties-tab-content'
-                }, {
-                    name: 'Comments',
-                    tabContentId: 'details-processor-comments-tab-content'
-                }],
-                select: function () {
-                    // remove all property detail dialogs
-                    nfUniversalCapture.removeAllPropertyDetailDialogs();
-
-                    // resize the property grid in case this is the first time its rendered
-                    if ($(this).text() === 'Properties') {
-                        $('#read-only-processor-properties').propertytable('resetTableSize');
-                    }
-
-                    // show the border if processor relationship names if necessary
-                    var processorRelationships = $('#read-only-auto-terminate-relationship-names');
-                    if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > Math.round(processorRelationships.innerHeight())) {
-                        processorRelationships.css('border-width', '1px');
-                    }
-                }
-            });
-
-            // configure the processor details dialog
-            $('#processor-details').modal({
-                headerText: 'Processor Details',
-                scrollableContentStyle: 'scrollable',
-                handler: {
-                    close: function () {
-                        // empty the relationship list
-                        $('#read-only-auto-terminate-relationship-names').css('border-width', '0').empty();
-
-                        // clear the property grid
-                        $('#read-only-processor-properties').propertytable('clear');
-
-                        // clear the processor details
-                        nfCommon.clearField('read-only-processor-id');
-                        nfCommon.clearField('read-only-processor-type');
-                        nfCommon.clearField('read-only-processor-name');
-                        nfCommon.clearField('read-only-concurrently-schedulable-tasks');
-                        nfCommon.clearField('read-only-scheduling-period');
-                        nfCommon.clearField('read-only-penalty-duration');
-                        nfCommon.clearField('read-only-yield-duration');
-                        nfCommon.clearField('read-only-run-duration');
-                        nfCommon.clearField('read-only-bulletin-level');
-                        nfCommon.clearField('read-only-execution-node');
-                        nfCommon.clearField('read-only-execution-status');
-                        nfCommon.clearField('read-only-processor-comments');
-
-                        // removed the cached processor details
-                        $('#processor-details').removeData('processorDetails');
-                        $('#processor-details').removeData('processorHistory');
-                    },
-                    open: function () {
-                        nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                    }
-                }
-            });
-
-            // initialize the properties
-            $('#read-only-processor-properties').propertytable({
-                supportsGoTo: supportsGoTo,
-                readOnly: true
-            });
-        },
-
-        /**
-         * Shows the details for the specified processor.
-         *
-         * @argument {string} groupId       The group id
-         * @argument {string} processorId   The processor id
-         */
-        showDetails: function (groupId, processorId) {
-            // load the properties for the specified processor
-            var getProcessor = $.ajax({
-                type: 'GET',
-                url: '../nifi-api/processors/' + encodeURIComponent(processorId),
-                dataType: 'json'
-            }).done(function (response) {
-                if (nfCommon.isDefinedAndNotNull(response.component)) {
-                    // get the processor details
-                    var details = response.component;
-
-                    // record the processor details
-                    $('#processor-details').data('processorDetails', details);
-
-                    // populate the processor settings
-                    nfCommon.populateField('read-only-processor-id', details['id']);
-                    nfCommon.populateField('read-only-processor-type', nfCommon.substringAfterLast(details['type'], '.'));
-                    nfCommon.populateField('read-only-processor-name', details['name']);
-                    nfCommon.populateField('read-only-concurrently-schedulable-tasks', details.config['concurrentlySchedulableTaskCount']);
-                    nfCommon.populateField('read-only-scheduling-period', details.config['schedulingPeriod']);
-                    nfCommon.populateField('read-only-penalty-duration', details.config['penaltyDuration']);
-                    nfCommon.populateField('read-only-yield-duration', details.config['yieldDuration']);
-                    nfCommon.populateField('read-only-run-duration', nfCommon.formatDuration(details.config['runDurationMillis']));
-                    nfCommon.populateField('read-only-bulletin-level', details.config['bulletinLevel']);
-                    nfCommon.populateField('read-only-processor-comments', details.config['comments']);
-
-                    var showRunSchedule = true;
-
-                    var schedulingStrategy = details.config['schedulingStrategy'];
-
-                    // make the scheduling strategy human readable
-                    if (schedulingStrategy === 'EVENT_DRIVEN') {
-                        showRunSchedule = false;
-                        schedulingStrategy = 'Event driven';
-                    } else if (schedulingStrategy === 'CRON_DRIVEN') {
-                        schedulingStrategy = 'CRON driven';
-                    } else if (schedulingStrategy === 'TIMER_DRIVEN') {
-                        schedulingStrategy = "Timer driven";
-                    } else {
-                        schedulingStrategy = "On primary node";
-                    }
-                    nfCommon.populateField('read-only-scheduling-strategy', schedulingStrategy);
-
-                    // only show the run schedule when applicable
-                    if (showRunSchedule === true) {
-                        $('#read-only-run-schedule').show();
-                    } else {
-                        $('#read-only-run-schedule').hide();
-                    }
-
-                    var executionNode = details.config['executionNode'];
-
-                    // only show the execution-node when applicable
-                    if (nfClusterSummary.isClustered() || executionNode === 'PRIMARY') {
-                        if (executionNode === 'ALL') {
-                            executionNode = "All nodes";
-                        } else if (executionNode === 'PRIMARY') {
-                            executionNode = "Primary node only";
-                        }
-                        nfCommon.populateField('read-only-execution-node', executionNode);
-
-                        $('#read-only-execution-node-options').show();
-                    } else {
-                        $('#read-only-execution-node-options').hide();
-                    }
-
-                    // load the relationship list
-                    if (!nfCommon.isEmpty(details.relationships)) {
-                        $.each(details.relationships, function (i, relationship) {
-                            createRelationshipOption(relationship);
-                        });
-                    } else {
-                        $('#read-only-auto-terminate-relationship-names').append('<div class="unset">This processor has no relationships.</div>');
-                    }
-                }
-            });
-
-            // get the processor history
-            var getProcessorHistory = $.ajax({
-                type: 'GET',
-                url: '../nifi-api/flow/history/components/' + encodeURIComponent(processorId),
-                dataType: 'json'
-            }).done(function (response) {
-                var processorHistory = response.componentHistory;
-
-                // record the processor history
-                $('#processor-details').data('processorHistory', processorHistory);
-            });
-
-            // show the dialog once we have the processor and its history
-            $.when(getProcessor, getProcessorHistory).done(function (processorResult, historyResult) {
-                var processorResponse = processorResult[0];
-                var processor = processorResponse.component;
-                var historyResponse = historyResult[0];
-                var history = historyResponse.componentHistory;
-
-                // load the properties
-                $('#read-only-processor-properties').propertytable('loadProperties', processor.config.properties, processor.config.descriptors, history.propertyHistory);
-
-                var buttons = [{
-                    buttonText: 'Ok',
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // hide the dialog
-                            $('#processor-details').modal('hide');
-                        }
-                    }
-                }];
-
-                // determine if we should show the advanced button
-                if (top === window && nfCommon.isDefinedAndNotNull(nfCustomUi) && nfCommon.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') {
-                    buttons.push({
-                        buttonText: 'Advanced',
-                        clazz: 'fa fa-cog button-icon',
-                        color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
-                        },
-                        handler: {
-                            click: function () {
-                                // reset state and close the dialog manually to avoid hiding the faded background
-                                $('#processor-details').modal('hide');
-
-                                // show the custom ui
-                                nfCustomUi.showCustomUi(processorResponse, processor.config.customUiUrl, false);
-                            }
-                        }
-                    });
-                }
-
-                // show the dialog
-                $('#processor-details').modal('setButtonModel', buttons).modal('show');
-
-                // add ellipsis if necessary
-                $('#processor-details div.relationship-name').ellipsis();
-
-                // show the border if necessary
-                var processorRelationships = $('#read-only-auto-terminate-relationship-names');
-                if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > Math.round(processorRelationships.innerHeight())) {
-                    processorRelationships.css('border-width', '1px');
-                }
-            }).fail(function (xhr, status, error) {
-                if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
-                    nfDialog.showOkDialog({
-                        headerText: 'Error',
-                        dialogContent: nfCommon.escapeHtml(xhr.responseText)
-                    });
-                } else {
-                    nfErrorHandler.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
deleted file mode 100644
index 9296f217b402..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
+++ /dev/null
@@ -1,214 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common'],
-            function ($, nfCommon) {
-                return (nf.Shell = factory($, nfCommon));
-            });
-    } else if (typeof exports === 'object' && typeof module === 'object') {
-        module.exports = (nf.Shell = factory(require('jquery'),
-            require('nf.Common')));
-    } else {
-        nf.Shell = factory(root.$,
-            root.nf.Common);
-    }
-}(this, function ($, nfCommon) {
-    'use strict';
-
-    $(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');
-        });
-
-        // register a listener when the frame is undocked
-        $('#shell-undock-button').click(function () {
-            var uri = $('#shell-iframe').attr('src');
-            if (!nfCommon.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;
-    var nfContextMenu = null;
-
-    return {
-
-        /**
-         * Initialize the shell.
-         *
-         * @param nfContextMenuRef    The nfContextMenu module.
-         */
-        init: function (nfContextMenuRef) {
-            nfContextMenu = nfContextMenuRef;
-        },
-
-        resizeContent: function (shell) {
-            var contentContainer = shell.find('.shell-content-container');
-            contentContainer.css({
-                width: shell.width(),
-                height: shell.height() - 28 - 40 //subtract shell-close-container and padding
-            });
-            shell.trigger("shell:content:resize");
-        },
-
-        // handle resize
-        resizeIframe: function (shell) {
-            var shellIframe = shell.find('#shell-iframe');
-            shellIframe.css({
-                width: shell.width(),
-                height: shell.height() - 28 - 40 //subtract shell-close-container and padding
-            });
-            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 (nfCommon.isDefinedAndNotNull(nfContextMenu)) {
-                nfContextMenu.hide();
-            }
-
-            return $.Deferred(function (deferred) {
-                var shell = $('#shell');
-
-                // default undockable to true
-                if (nfCommon.isNull(canUndock) || nfCommon.isUndefined(canUndock)) {
-                    canUndock = true;
-                }
-
-                // register a new close handler
-                $('#shell-dialog').modal('setCloseHandler', function () {
-                    // remove the previous contents of the shell
-                    shell.empty();
-                    deferred.resolve();
-                });
-
-                // register a new open handler
-                $('#shell-dialog').modal('setOpenHandler', function () {
-                    nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                });
-
-                // show the custom processor ui
-                $('#shell-dialog').modal('show');
-
-                // conditionally show the undock button
-                if (canUndock) {
-                    $('#shell-undock-button').show();
-                } else {
-                    $('#shell-undock-button').hide();
-                }
-
-                // create an iframe to hold the custom ui
-                var shellIframe = $('<iframe/>', {
-                    id: 'shell-iframe',
-                    frameBorder: '0',
-                    src: uri
-                }).css({
-                    width: shell.width(),
-                    height: shell.height() - 28 //subtract shell-close-container
-                }).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 (nfCommon.isDefinedAndNotNull(nfContextMenu)) {
-                nfContextMenu.hide();
-            }
-
-            return $.Deferred(function (deferred) {
-                var content = $(domId);
-                if (content.length) {
-                    var shell = $('#shell');
-
-                    // get the parent of the content and detach it
-                    var parent = content.parent();
-                    content.detach();
-
-                    // register a new close handler
-                    $('#shell-dialog').modal('setCloseHandler', function () {
-                        // close any open combos
-                        var combos = $('.combo');
-                        for (var i = 0, len = combos.length; i < len; i++) {
-                            if ($(combos[i]).is(':visible')) {
-                                $(combos[i]).combo('close');
-                            }
-                        }
-
-                        deferred.resolve();
-
-                        // detach the content and add it back to the parent
-                        content.hide().detach().appendTo(parent);
-
-                        // remove the previous contents of the shell
-                        shell.empty();
-                    });
-
-                    // hide the undock button
-                    $('#shell-undock-button').hide();
-
-                    // open the shell dialog
-                    $('#shell-dialog').modal('show');
-
-                    // create the content container
-                    var contentContainer = $('<div>').addClass('shell-content-container').css({
-                        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
deleted file mode 100644
index 8ddf99e6ccc2..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
+++ /dev/null
@@ -1,1188 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-              'd3',
-              'nf.Common',
-              'nf.Dialog',
-              'nf.ErrorHandler'],
-              function ($, d3, nfCommon, nfDialog, nfErrorHandler) {
-              return (nf.StatusHistory = factory($, d3, nfCommon, nfDialog, nfErrorHandler));
-          });
-      } 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, nfCommon, nfDialog, nfErrorHandler) {
-        var config = {
-            nifiInstanceId: 'nifi-instance-id',
-            nifiInstanceLabel: nf._.msg('nf-status-history.NiFi'),
-            type: {
-                processor: 'Processor',
-                inputPort: 'Input Port',
-                outputPort: 'Output Port',
-                processGroup: 'Process Group',
-                remoteProcessGroup: 'Remote Process Group',
-                connection: 'Connection',
-                funnel: 'Funnel',
-                template: 'Template',
-                label: 'Label'
-            },
-            urls: {
-                api: '../nifi-api'
-            }
-        };
-    
-        /**
-         * Mapping of formatters to use for the chart's y axis.
-         */
-        var formatters = {
-            'DURATION': function (d) {
-              return nfCommon.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 nfCommon.formatInteger(d);
-                } else {
-                  return nfCommon.formatFloat(d);
-                }
-            },
-            'DATA_SIZE': function (d) {
-              return nfCommon.formatDataSize(d);
-            }
-        };
-    
-        /**
-         * The time offset of the server.
-         */
-        var serverTimeOffset = null;
-    
-        /**
-         * The current extent of the brush.
-         */
-        var brushExtent = null;
-    
-        /**
-         * The currently selected descriptor.
-         */
-        var descriptor = null;
-    
-        /**
-         * The instances and whether they are visible or not
-         */
-        var instances = null;
-    
-        /**
-         * Handles the status history response.
-         *
-         * @param {string} groupId
-         * @param {string} id
-         * @param {object} componentStatusHistory
-         * @param {string} componentType
-         * @param {object} selectedDescriptor
-         */
-        var handleStatusHistoryResponse = function (groupId, id, componentStatusHistory, componentType, selectedDescriptor) {
-            // update the last refreshed
-            $('#status-history-last-refreshed').text(componentStatusHistory.generated);
-    
-            // initialize the status history
-            var statusHistory = {
-                groupId: groupId,
-                id: id,
-                type: componentType,
-                instances: []
-            };
-    
-            // get the descriptors
-            var descriptors = componentStatusHistory.fieldDescriptors;
-            statusHistory.details = componentStatusHistory.componentDetails;
-          statusHistory.selectedDescriptor = nfCommon.isUndefined(selectedDescriptor) ? descriptors[0] : selectedDescriptor;
-    
-            // ensure enough status snapshots
-          if (nfCommon.isDefinedAndNotNull(componentStatusHistory.aggregateSnapshots) && componentStatusHistory.aggregateSnapshots.length > 1) {
-                statusHistory.instances.push({
-                    id: config.nifiInstanceId,
-                    label: config.nifiInstanceLabel,
-                    snapshots: componentStatusHistory.aggregateSnapshots
-                });
-            } else {
-                insufficientHistory();
-                return;
-            }
-    
-            // get the status for each node in the cluster if applicable
-            $.each(componentStatusHistory.nodeSnapshots, function (_, nodeSnapshots) {
-                // ensure enough status snapshots
-              if (nfCommon.isDefinedAndNotNull(nodeSnapshots.statusSnapshots) && nodeSnapshots.statusSnapshots.length > 1) {
-                    statusHistory.instances.push({
-                        id: nodeSnapshots.nodeId,
-                        label: nodeSnapshots.address + ':' + nodeSnapshots.apiPort,
-                        snapshots: nodeSnapshots.statusSnapshots
-                    });
-                }
-            });
-    
-            // ensure we found eligible status history
-            if (statusHistory.instances.length > 0) {
-                // store the status history
-                $('#status-history-dialog').data('status-history', statusHistory);
-    
-                // chart the status history
-                chart(statusHistory, descriptors);
-            } else {
-                insufficientHistory();
-            }
-        };
-    
-        /**
-         * Shows an error message stating there is insufficient history available.
-         */
-        var insufficientHistory = function () {
-            // notify the user
-          nfDialog.showOkDialog({
-                headerText: nf._.msg('nf-status-history.StatusHistory'),
-                dialogContent: nf._.msg('nf-status-history.Message')
-            });
-        };
-    
-        /**
-         * Builds the chart using the statusHistory and the available fields.
-         *
-         * @param {type} statusHistory
-         * @param {type} descriptors
-         */
-        var chart = function (statusHistory, descriptors) {
-            if (instances === null) {
-                instances = {};
-            }
-    
-            // go through each instance of this status history
-            $.each(statusHistory.instances, function (_, instance) {
-                // and convert each timestamp accordingly
-                instance.snapshots.forEach(function (d) {
-                    // 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
-                    d.timestamp = new Date(d.timestamp + userTimeOffset + serverTimeOffset);
-                });
-            });
-    
-            // this will trigger the chart to be updated
-            setAvailableFields(descriptors, statusHistory.selectedDescriptor);
-        };
-    
-        /**
-         * Sets the available fields.
-         *
-         * @param {type} descriptors
-         * @param {type} selected
-         */
-        var setAvailableFields = function (descriptors, selected) {
-            var options = [];
-            $.each(descriptors, function (_, d) {
-                options.push({
-                    text: d.label,
-                    value: d.field,
-                  description: nfCommon.escapeHtml(d.description)
-                });
-            });
-    
-            // build the combo with the available fields
-            $('#status-history-metric-combo').combo({
-                selectedOption: {
-                    value: selected.field
-                },
-                options: options,
-                select: function (selectedOption) {
-                    // find the corresponding descriptor
-                    var selectedDescriptor = null;
-                    $.each(descriptors, function (_, d) {
-                        if (selectedOption.value === d.field) {
-                            selectedDescriptor = d;
-                            return false;
-                        }
-                    });
-    
-                    // ensure the descriptor was found
-                    if (selectedDescriptor !== null) {
-                        // clear the current extent if this is a newly selected descriptor
-                        if (descriptor === null || descriptor.field !== selectedDescriptor.field) {
-                            brushExtent = null;
-                        }
-    
-                        // record the currently selected descriptor
-                        descriptor = selectedDescriptor;
-    
-                        // update the selected chart
-                        var statusHistory = $('#status-history-dialog').data('status-history');
-                        statusHistory.selectedDescriptor = selectedDescriptor;
-                        $('#status-history-dialog').data('status-history', statusHistory);
-    
-                        // update the chart
-                        updateChart();
-                    }
-                }
-            });
-    
-            $('#status-history-dialog').modal('show');
-        };
-    
-        var getChartMinHeight = function () {
-            return $('#status-history-chart-container').parent().outerHeight() - $('#status-history-chart-control-container').outerHeight() -
-                parseInt($('#status-history-chart-control-container').css('margin-top'), 10);
-        };
-    
-        var getChartMaxHeight = function () {
-            return $('body').height() - $('#status-history-chart-control-container').outerHeight() -
-                $('#status-history-refresh-container').outerHeight() -
-                parseInt($('#status-history-chart-control-container').css('margin-top'), 10) -
-                parseInt($('.dialog-content').css('top')) - parseInt($('.dialog-content').css('bottom'));
-        };
-    
-        var getChartMaxWidth = function () {
-            return $('body').width() - $('#status-history-details').innerWidth() -
-                parseInt($('#status-history-dialog').css('left'), 10) -
-                parseInt($('.dialog-content').css('left')) - parseInt($('.dialog-content').css('right'));
-        };
-    
-        /**
-         * Updates the chart with the specified status history and the selected field.
-         */
-        var updateChart = function () {
-    
-            var statusHistoryDialog = $('#status-history-dialog');
-    
-            if (statusHistoryDialog.is(':visible')) {
-                var statusHistory = statusHistoryDialog.data('status-history');
-    
-                // get the selected descriptor
-                var selectedDescriptor = statusHistory.selectedDescriptor;
-    
-                // remove current details
-                $('#status-history-details').empty();
-    
-                // add status history details
-                var detailsContainer = buildDetailsContainer(nf._.msg('nf-status-history.StatusHistory'));
-                d3.map(statusHistory.details).forEach(function (label, value) {
-                    addDetailItem(detailsContainer, label, value);
-                });
-    
-                var margin = {
-                    top: 15,
-                    right: 20,
-                    bottom: 25,
-                    left: 75
-                };
-    
-                // -------------
-                // prep the data
-                // -------------
-    
-                // available colors
-                var color = d3.scale.category10();
-    
-                // determine the available instances
-                var instanceLabels = [];
-                $.each(statusHistory.instances, function (_, instance) {
-                    instanceLabels.push(instance.label);
-                });
-    
-                // specify the domain based on the detected instances
-                color.domain(instanceLabels);
-    
-                // data for the chart
-                var statusData = [];
-    
-                // 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 (nfCommon.isUndefinedOrNull(instances[instance.id])) {
-                        instances[instance.id] = true;
-                    }
-    
-                    // and convert the model
-                    statusData.push({
-                        id: instance.id,
-                        label: instance.label,
-                        values: $.map(instance.snapshots, function (d) {
-                            return {
-                                timestamp: d.timestamp,
-                                value: d.statusMetrics[selectedDescriptor.field]
-                            };
-                        }),
-                        visible: instances[instance.id] === true
-                    });
-                });
-    
-                // --------------------------
-                // custom time axis formatter
-                // --------------------------
-    
-                var customTimeFormat = d3.time.format.multi([
-                    [':%S.%L', function (d) {
-                        return d.getMilliseconds();
-                    }],
-                    [':%S', function (d) {
-                        return d.getSeconds();
-                    }],
-                    ['%H:%M', function (d) {
-                        return d.getMinutes();
-                    }],
-                    ['%H:%M', function (d) {
-                        return d.getHours();
-                    }],
-                    ['%a %d', function (d) {
-                        return d.getDay() && d.getDate() !== 1;
-                    }],
-                    ['%b %d', function (d) {
-                        return d.getDate() !== 1;
-                    }],
-                    ['%B', function (d) {
-                        return d.getMonth();
-                    }],
-                    ['%Y', function () {
-                        return true;
-                    }]
-                ]);
-    
-                // ----------
-                // main chart
-                // ----------
-    
-                // the container for the main chart
-                var chartContainer = $('#status-history-chart-container').empty();
-                if (chartContainer.hasClass('ui-resizable')) {
-                    chartContainer.resizable('destroy');
-                    chartContainer.removeAttr("style");
-                }
-    
-                // calculate the dimensions
-                chartContainer.height(getChartMinHeight());
-    
-                // determine the new width/height
-                var width = chartContainer.outerWidth() - margin.left - margin.right;
-                var height = chartContainer.outerHeight() - margin.top - margin.bottom;
-    
-                maxWidth = $('#status-history-container').width();
-                if (width > maxWidth) {
-                    width = maxWidth;
-                }
-    
-                maxHeight = getChartMaxHeight();
-                if (height > maxHeight) {
-                    height = maxHeight;
-                }
-    
-                // define the x axis for the main chart
-                var x = d3.time.scale()
-                    .range([0, width]);
-    
-                var xAxis = d3.svg.axis()
-                    .scale(x)
-                    .ticks(5)
-                    .tickFormat(customTimeFormat)
-                    .orient('bottom');
-    
-                // define the y axis
-                var y = d3.scale.linear()
-                    .range([height, 0]);
-    
-                var yAxis = d3.svg.axis()
-                    .scale(y)
-                    .tickFormat(formatters[selectedDescriptor.formatter])
-                    .orient('left');
-    
-    
-                // status line
-                var line = d3.svg.line()
-                    .interpolate('monotone')
-                    .x(function (d) {
-                        return x(d.timestamp);
-                    })
-                    .y(function (d) {
-                        return y(d.value);
-                    });
-    
-                // build the chart svg
-                var chartSvg = d3.select('#status-history-chart-container').append('svg')
-                    .attr('style', 'pointer-events: none;')
-                    .attr('width', chartContainer.parent().width())
-                    .attr('height', chartContainer.innerHeight());
-                // define a clip the path
-                var clipPath = chartSvg.append('defs').append('clipPath')
-                    .attr('id', 'clip')
-                    .append('rect')
-                    .attr('width', width)
-                    .attr('height', height);
-    
-                // build the chart
-                var chart = chartSvg.append('g')
-                    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
-    
-                // determine the min/max date
-                var minDate = d3.min(statusData, function (d) {
-                    return d3.min(d.values, function (s) {
-                        return s.timestamp;
-                    });
-                });
-                var maxDate = d3.max(statusData, function (d) {
-                    return d3.max(d.values, function (s) {
-                        return s.timestamp;
-                    });
-                });
-                addDetailItem(detailsContainer, nf._.msg('nf-status-history.Start'), nf.Common.formatDateTime(minDate));
-                addDetailItem(detailsContainer, nf._.msg('nf-status-history.End'), nf.Common.formatDateTime(maxDate));
-    
-                // determine the x axis range
-                x.domain([minDate, maxDate]);
-    
-                // determine the y axis range
-                y.domain([getMinValue(statusData), getMaxValue(statusData)]);
-    
-                // build the x axis
-                chart.append('g')
-                    .attr('class', 'x axis')
-                    .attr('transform', 'translate(0, ' + height + ')')
-                    .call(xAxis);
-    
-                // build the y axis
-                chart.append('g')
-                    .attr('class', 'y axis')
-                    .call(yAxis)
-                    .append('text')
-                    .attr('transform', 'rotate(-90)')
-                    .attr('y', 6)
-                    .attr('dy', '.71em')
-                    .attr('text-anchor', 'end')
-                    .text(selectedDescriptor.label);
-    
-                // build the chart
-                var status = chart.selectAll('.status')
-                    .data(statusData)
-                    .enter()
-                    .append('g')
-                    .attr('clip-path', 'url(#clip)')
-                    .attr('class', 'status');
-    
-                // draw the lines
-                status.append('path')
-                    .attr('class', function (d) {
-                        return 'chart-line chart-line-' + d.id;
-                    })
-                    .attr('d', function (d) {
-                        return line(d.values);
-                    })
-                    .attr('stroke', function (d) {
-                        return color(d.label);
-                    })
-                    .classed('hidden', function (d) {
-                        return d.visible === false;
-                    })
-                    .append('title')
-                    .text(function (d) {
-                        return d.label;
-                    });
-    
-                // draw the control points for each line
-                status.each(function (d) {
-                    // create a group for the control points
-                    var markGroup = d3.select(this).append('g')
-                        .attr('class', function () {
-                            return 'mark-group mark-group-' + d.id;
-                        })
-                        .classed('hidden', function (d) {
-                            return d.visible === false;
-                        });
-    
-                    // draw the control points
-                    markGroup.selectAll('circle.mark')
-                        .data(d.values)
-                        .enter()
-                        .append('circle')
-                        .attr('style', 'pointer-events: all;')
-                        .attr('class', 'mark')
-                        .attr('cx', function (v) {
-                            return x(v.timestamp);
-                        })
-                        .attr('cy', function (v) {
-                            return y(v.value);
-                        })
-                        .attr('fill', function () {
-                            return color(d.label);
-                        })
-                        .attr('r', 1.5)
-                        .append('title')
-                        .text(function (v) {
-                            return d.label + ' -- ' + formatters[selectedDescriptor.formatter](v.value);
-                        });
-                });
-    
-                // update the size of the chart
-                chartSvg.attr('width', chartContainer.parent().width())
-                    .attr('height', chartContainer.innerHeight());
-    
-                // update the size of the clipper
-                clipPath.attr('width', width)
-                    .attr('height', height);
-    
-                // update the position of the x axis
-                chart.select('.x.axis').attr('transform', 'translate(0, ' + height + ')');
-    
-                // -------------
-                // control chart
-                // -------------
-    
-                // the container for the main chart control
-                var chartControlContainer = $('#status-history-chart-control-container').empty();
-                var controlHeight = chartControlContainer.innerHeight() - margin.top - margin.bottom;
-    
-                var xControl = d3.time.scale()
-                    .range([0, width]);
-    
-                var xControlAxis = d3.svg.axis()
-                    .scale(xControl)
-                    .ticks(5)
-                    .tickFormat(customTimeFormat)
-                    .orient('bottom');
-    
-                var yControl = d3.scale.linear()
-                    .range([controlHeight, 0]);
-    
-                var yControlAxis = d3.svg.axis()
-                    .scale(yControl)
-                    .tickValues(y.domain())
-                    .tickFormat(formatters[selectedDescriptor.formatter])
-                    .orient('left');
-    
-                // status line
-                var controlLine = d3.svg.line()
-                    .interpolate('monotone')
-                    .x(function (d) {
-                        return xControl(d.timestamp);
-                    })
-                    .y(function (d) {
-                        return yControl(d.value);
-                    });
-    
-                // build the svg
-                var controlChartSvg = d3.select('#status-history-chart-control-container').append('svg')
-                    .attr('width', chartContainer.parent().width())
-                    .attr('height', controlHeight + margin.top + margin.bottom);
-    
-                // build the control chart
-                var control = controlChartSvg.append('g')
-                    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
-    
-                // increase the y domain slightly
-                var yControlDomain = y.domain();
-                yControlDomain[1] *= 1.04;
-    
-                // define the domain for the control chart
-                xControl.domain(x.domain());
-                yControl.domain(yControlDomain);
-    
-                // build the control x axis
-                control.append('g')
-                    .attr('class', 'x axis')
-                    .attr('transform', 'translate(0, ' + controlHeight + ')')
-                    .call(xControlAxis);
-    
-                // build the control y axis
-                control.append('g')
-                    .attr('class', 'y axis')
-                    .call(yControlAxis);
-    
-                // build the control chart
-                var controlStatus = control.selectAll('.status')
-                    .data(statusData)
-                    .enter()
-                    .append('g')
-                    .attr('class', 'status');
-    
-                // draw the lines
-                controlStatus.append('path')
-                    .attr('class', function (d) {
-                        return 'chart-line chart-line-' + d.id;
-                    })
-                    .attr('d', function (d) {
-                        return controlLine(d.values);
-                    })
-                    .attr('stroke', function (d) {
-                        return color(d.label);
-                    })
-                    .classed('hidden', function (d) {
-                        return instances[d.id] === false;
-                    })
-                    .append('title')
-                    .text(function (d) {
-                        return d.label;
-                    });
-    
-                // -------------------
-                // configure the brush
-                // -------------------
-    
-                /**
-                 * Updates the axis for the main chart.
-                 *
-                 * @param {array} xDomain   The new domain for the x axis
-                 * @param {array} yDomain   The new domain for the y axis
-                 */
-                var updateAxes = function (xDomain, yDomain) {
-                    // update the domain of the main chart
-                    x.domain(xDomain);
-                    y.domain(yDomain);
-    
-                    // update the chart lines
-                    status.selectAll('.chart-line')
-                        .attr('d', function (d) {
-                            return line(d.values);
-                        });
-                    status.selectAll('circle.mark')
-                        .attr('cx', function (v) {
-                            return x(v.timestamp);
-                        })
-                        .attr('cy', function (v) {
-                            return y(v.value);
-                        })
-                        .attr('r', function () {
-                            return brush.empty() ? 1.5 : 4;
-                        });
-    
-                    // update the x axis
-                    chart.select('.x.axis').call(xAxis);
-                    chart.select('.y.axis').call(yAxis);
-                };
-    
-                /**
-                 * Handles brush events by updating the main chart according to the context window
-                 * or the control domain if there is no context window.
-                 */
-                var brushed = function () {
-                    // determine the new x and y domains
-                    var xContextDomain, yContextDomain;
-                    if (brush.empty()) {
-                        // get the all visible instances
-                        var visibleInstances = $.grep(statusData, function (d) {
-                            return d.visible;
-                        });
-    
-                        // determine the appropriate y domain
-                        if (visibleInstances.length === 0) {
-                            yContextDomain = yControl.domain();
-                        } else {
-                            yContextDomain = [
-                                d3.min(visibleInstances, function (d) {
-                                    return d3.min(d.values, function (s) {
-                                        return s.value;
-                                    });
-                                }),
-                                d3.max(visibleInstances, function (d) {
-                                    return d3.max(d.values, function (s) {
-                                        return s.value;
-                                    });
-                                })
-                            ];
-                        }
-                        xContextDomain = xControl.domain();
-    
-                        // clear the current extent
-                        brushExtent = null;
-                    } else {
-                        var extent = brush.extent();
-                        xContextDomain = [extent[0][0], extent[1][0]];
-                        yContextDomain = [extent[0][1], extent[1][1]];
-    
-                        // hold onto the current brush
-                        brushExtent = extent;
-                    }
-    
-                    // update the axes accordingly
-                    updateAxes(xContextDomain, yContextDomain);
-    
-                    // update the aggregate statistics according to the new domain
-                    updateAggregateStatistics();
-                };
-    
-                // build the brush
-                var brush = d3.svg.brush()
-                    .x(xControl)
-                    .y(yControl)
-                    .on('brush', brushed);
-    
-                // conditionally set the brush extent
-              if (nfCommon.isDefinedAndNotNull(brushExtent)) {
-                    brush = brush.extent(brushExtent);
-                }
-    
-                // context area
-                control.append('g')
-                    .attr('class', 'brush')
-                    .call(brush);
-    
-                // add expansion to the extent
-                control.select('rect.extent')
-                    .attr('style', 'pointer-events: all;')
-                    .on('dblclick', function () {
-                        if (!brush.empty()) {
-                            // get the current extent to get the x range
-                            var extent = brush.extent();
-    
-                            // get the y range (this value does not change from the original y domain)
-                            var yRange = yControl.domain();
-    
-                            // expand the extent vertically
-                            brush.extent([[extent[0][0], yRange[0]], [extent[1][0], yRange[1]]]);
-    
-                            // update the brush control
-                            control.select('.brush').call(brush);
-    
-                            // run the brush to update the axes of the main chart
-                            brushed();
-                        }
-                    });
-    
-                // --------------------
-                // aggregate statistics
-                // --------------------
-    
-                var updateAggregateStatistics = function () {
-                    // locate the instances that have data points within the current brush
-                    var withinBrush = $.map(statusData, function (d) {
-                        var xDomain = x.domain();
-                        var yDomain = y.domain();
-    
-                        // copy to avoid modifying the original
-                        var copy = $.extend({}, d);
-    
-                        // update the copy to only include values within the brush
-                        return $.extend(copy, {
-                            values: $.grep(d.values, function (s) {
-                                return s.timestamp.getTime() >= xDomain[0].getTime() && s.timestamp.getTime() <= xDomain[1].getTime() && s.value >= yDomain[0] && s.value <= yDomain[1];
-                            })
-                        });
-                    });
-    
-                    // consider visible nodes with data in the brush
-                    var nodes = $.grep(withinBrush, function (d) {
-                        return d.id !== config.nifiInstanceId && d.visible && d.values.length > 0;
-                    });
-    
-                    var nodeMinValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMinValue(nodes));
-                    var nodeMeanValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMeanValue(nodes));
-                    var nodeMaxValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMaxValue(nodes));
-    
-                    // update the currently displayed min/max/mean
-                    $('#node-aggregate-statistics').text(nodeMinValue + ' / ' + nodeMaxValue + ' / ' + nodeMeanValue);
-    
-                    // only consider the cluster with data in the brush
-                    var cluster = $.grep(withinBrush, function (d) {
-                        return d.id === config.nifiInstanceId && d.visible && d.values.length > 0;
-                    });
-    
-                    // determine the cluster values
-                    var clusterMinValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMinValue(cluster));
-                    var clusterMeanValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMeanValue(cluster));
-                    var clusterMaxValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMaxValue(cluster));
-    
-                    // update the cluster min/max/mean
-                    $('#cluster-aggregate-statistics').text(clusterMinValue + ' / ' + clusterMaxValue + ' / ' + clusterMeanValue);
-                };
-    
-                // ----------------
-                // build the legend
-                // ----------------
-    
-                // identify all nodes and sort
-                var nodes = $.grep(statusData, function (status) {
-                    return status.id !== config.nifiInstanceId;
-                }).sort(function (a, b) {
-                    return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
-                });
-    
-                // adds a legend entry for the specified instance
-                var addLegendEntry = function (legend, instance) {
-                    // create the label and the checkbox
-                  var instanceLabelElement = $('<div></div>').addClass('legend-label nf-checkbox-label').css('color', color(instance.label)).text(instance.label).ellipsis();
-                    var instanceCheckboxElement = $('<div class="nf-checkbox"></div>').on('click', function () {
-                        // get the line and the control points for this instance (select all for the line to update control and main charts)
-                        var chartLine = d3.selectAll('path.chart-line-' + instance.id);
-                        var markGroup = d3.select('g.mark-group-' + instance.id);
-    
-                        // determine if it was hidden
-                        var isHidden = markGroup.classed('hidden');
-    
-                        // toggle the visibility
-                        chartLine.classed('hidden', function () {
-                            return !isHidden;
-                        });
-                        markGroup.classed('hidden', function () {
-                            return !isHidden;
-                        });
-    
-                        // update whether its visible
-                        instance.visible = isHidden;
-    
-                        // record the current status so it persists across refreshes
-                        instances[instance.id] = instance.visible;
-    
-                        // update the brush
-                        brushed();
-                    }).addClass(instance.visible ? 'checkbox-checked' : 'checkbox-unchecked');
-    
-                    // add the legend entry
-                    $('<div class="legend-entry"></div>').append(instanceCheckboxElement).append(instanceLabelElement).on('mouseenter', function () {
-                        d3.selectAll('path.chart-line-' + instance.id).classed('over', true);
-                    }).on('mouseleave', function () {
-                        d3.selectAll('path.chart-line-' + instance.id).classed('over', false);
-                    }).appendTo(legend);
-                };
-    
-                // get the cluster instance
-                var cluster = $.grep(statusData, function (status) {
-                    return status.id === config.nifiInstanceId;
-                });
-    
-                // build the cluster container
-                var clusterDetailsContainer = buildDetailsContainer(nf._.msg('nf-status-history.NiFi'));
-    
-                // add the total cluster values
-                addDetailItem(clusterDetailsContainer, nf._.msg('nf-status-history.Min_Max_Mean'), '', 'cluster-aggregate-statistics');
-    
-                // build the cluster legend
-                addLegendEntry(clusterDetailsContainer, cluster[0]);
-    
-                // if there are entries to render
-                if (nodes.length > 0) {
-                    // build the cluster container
-                    var nodeDetailsContainer = buildDetailsContainer('Nodes');
-    
-                    // add the total cluster values
-                    addDetailItem(nodeDetailsContainer, nf._.msg('nf-status-history.Min_Max_Mean'), '', 'node-aggregate-statistics');
-    
-                    // add each legend entry
-                    $.each(nodes, function (_, instance) {
-                        addLegendEntry(nodeDetailsContainer, instance);
-                    });
-                }
-    
-                // update the brush
-                brushed();
-    
-                // ---------------
-                // handle resizing
-                // ---------------
-    
-                var maxWidth, maxHeight, minHeight, resizeExtent, dialog;
-                chartContainer.append('<div class="ui-resizable-handle ui-resizable-se"></div>').resizable({
-                    minWidth: 425,
-                    minHeight: 150,
-                    handles: {
-                        'se': '.ui-resizable-se'
-                    },
-                    start: function (e, ui) {
-                        // record the current extent so it can be reset on stop
-                        if (!brush.empty()) {
-                            resizeExtent = brush.extent();
-                        }
-                    },
-                    resize: function (e, ui) {
-                        // -----------
-                        // containment
-                        // -----------
-                        dialog = $('#status-history-dialog');
-                      var nfDialogData = {};
-                      if (nfCommon.isDefinedAndNotNull(dialog.data('nf-dialog'))) {
-                          nfDialogData = dialog.data('nf-dialog');
-                        }
-                      nfDialogData['min-width'] = (dialog.width() / $(window).width()) * 100 + '%';
-                      nfDialogData['min-height'] = (dialog.height() / $(window).height()) * 100 + '%';
-                      nfDialogData.responsive['fullscreen-width'] = dialog.outerWidth() + 'px';
-                      nfDialogData.responsive['fullscreen-height'] = dialog.outerHeight() + 'px';
-    
-                        maxWidth = getChartMaxWidth();
-                        if (ui.helper.width() > maxWidth) {
-                            ui.helper.width(maxWidth);
-    
-                          nfDialogData.responsive['fullscreen-width'] = $(window).width() + 'px';
-                          nfDialogData['min-width'] = '100%';
-                        }
-    
-                        maxHeight = getChartMaxHeight();
-                        if (ui.helper.height() > maxHeight) {
-                            ui.helper.height(maxHeight);
-    
-                          nfDialogData.responsive['fullscreen-height'] = $(window).height() + 'px';
-                          nfDialogData['min-height'] = '100%';
-                        }
-    
-                        minHeight = getChartMinHeight();
-                        if (ui.helper.height() < minHeight) {
-                            ui.helper.height(minHeight);
-                        }
-    
-                      nfDialogData['min-width'] = (parseInt(nfDialogData['min-width'], 10) >= 100) ? '100%' : nfDialogData['min-width'];
-                      nfDialogData['min-height'] = (parseInt(nfDialogData['min-height'], 10) >= 100) ? '100%' : nfDialogData['min-height'];
-    
-                        //persist data attribute
-                      dialog.data('nfDialog', nfDialogData);
-    
-                        // ----------------------
-                        // status history dialog
-                        // ----------------------
-    
-                        dialog.css('min-width', (chartContainer.outerWidth() + $('#status-history-details').outerWidth() + 40));
-                        dialog.css('min-height', (chartContainer.outerHeight() +
-                        $('#status-history-refresh-container').outerHeight() + $('#status-history-chart-control-container').outerHeight() +
-                        $('.dialog-buttons').outerHeight() + $('.dialog-header').outerHeight() + 40 + 5));
-    
-                        dialog.center();
-                    },
-                    stop: updateChart
-                });
-            }
-        };
-    
-        /**
-         * Gets the minimum value from the specified instances.
-         *
-         * @param {type} nodeInstances
-         */
-        var getMinValue = function (nodeInstances) {
-            return d3.min(nodeInstances, function (d) {
-                return d3.min(d.values, function (s) {
-                    return s.value;
-                });
-            });
-        };
-    
-        /**
-         * Gets the maximum value from the specified instances.
-         *
-         * @param {type} nodeInstances
-         */
-        var getMaxValue = function (nodeInstances) {
-            return d3.max(nodeInstances, function (d) {
-                return d3.max(d.values, function (s) {
-                    return s.value;
-                });
-            });
-        };
-    
-        /**
-         * Gets the mean value from the specified instances.
-         *
-         * @param {type} nodeInstances
-         */
-        var getMeanValue = function (nodeInstances) {
-            var snapshotCount = 0;
-            var totalValue = d3.sum(nodeInstances, function (d) {
-                snapshotCount += d.values.length;
-                return d3.sum(d.values, function (s) {
-                    return s.value;
-                });
-            });
-            return totalValue / snapshotCount;
-        };
-    
-        /**
-         * Builds a details container.
-         *
-         * @param {type} label
-         */
-        var buildDetailsContainer = function (label) {
-            var detailContainer = $('<div class="status-history-detail"></div>').appendTo('#status-history-details');
-            $('<div class="detail-container-label"></div>').text(label).appendTo(detailContainer);
-            return $('<div></div>').appendTo(detailContainer);
-        };
-    
-        /**
-         * Adds a detail item and specified container.
-         *
-         * @param {type} container
-         * @param {type} label
-         * @param {type} value
-         * @param {type} valueElementId
-         */
-        var addDetailItem = function (container, label, value, valueElementId) {
-            var detailContainer = $('<div class="detail-item"></div>').appendTo(container);
-            $('<div class="setting-name"></div>').text(label).appendTo(detailContainer);
-            var detailElement = $('<div class="setting-field"></div>').text(value).appendTo(detailContainer);
-    
-          if (nfCommon.isDefinedAndNotNull(valueElementId)) {
-                detailElement.attr('id', valueElementId);
-            }
-        };
-    
-      var nfStatusHistory = {
-            /**
-             * Initializes the lineage graph.
-             *
-             * @param {integer} timeOffset The time offset of the server
-             */
-            init: function (timeOffset) {
-                serverTimeOffset = timeOffset;
-    
-                $('#status-history-refresh-button').click(function () {
-                    var statusHistory = $('#status-history-dialog').data('status-history');
-                    if (statusHistory !== null) {
-                        if (statusHistory.type === config.type.processor) {
-                          nfStatusHistory.showProcessorChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
-                        } else if (statusHistory.type === config.type.processGroup) {
-                          nfStatusHistory.showProcessGroupChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
-                        } else if (statusHistory.type === config.type.remoteProcessGroup) {
-                          nfStatusHistory.showRemoteProcessGroupChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
-                        } else {
-                          nfStatusHistory.showConnectionChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
-                        }
-                    }
-                });
-    
-                // configure the dialog and make it draggable
-                $('#status-history-dialog').modal({
-                    scrollableContentStyle: 'scrollable',
-                    headerText: nf._.msg('nf-status-history.StatusHistory'),
-                    buttons: [{
-                        buttonText: nf._.msg('nf-status-history.Close'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                this.modal('hide');
-                            }
-                        }
-                    }],
-                    handler: {
-                        close: function () {
-                            // remove the current status history
-                            $('#status-history-dialog').removeData('status-history');
-    
-                            // reset the dom
-                            $('#status-history-chart-container').empty();
-                            $('#status-history-chart-control-container').empty();
-                            $('#status-history-details').empty();
-    
-                            // clear the extent and selected descriptor
-                            brushExtent = null;
-                            descriptor = null;
-                            instances = null;
-                        },
-                        open: updateChart
-                    }
-                });
-    
-                $(window).on('resize', function (e) {
-                    if (e.target === window) {
-                        updateChart();
-                    }
-                  nfCommon.toggleScrollable($('#status-history-details').get(0));
-                })
-            },
-    
-            /**
-             * Shows the status history for the specified connection in this instance.
-             *
-             * @param {type} groupId
-             * @param {type} connectionId
-             * @param {type} selectedDescriptor
-             */
-            showConnectionChart: function (groupId, connectionId, selectedDescriptor) {
-                $.ajax({
-                    type: 'GET',
-                    url: config.urls.api + '/flow/connections/' + encodeURIComponent(connectionId) + '/status/history',
-                    dataType: 'json'
-                }).done(function (response) {
-                    handleStatusHistoryResponse(groupId, connectionId, response.statusHistory, config.type.connection, selectedDescriptor);
-              }).fail(nfErrorHandler.handleAjaxError);
-            },
-    
-            /**
-             * Shows the status history for the specified processor in this instance.
-             *
-             * @param {type} groupId
-             * @param {type} processorId
-             * @param {type} selectedDescriptor
-             */
-            showProcessorChart: function (groupId, processorId, selectedDescriptor) {
-                $.ajax({
-                    type: 'GET',
-                    url: config.urls.api + '/flow/processors/' + encodeURIComponent(processorId) + '/status/history',
-                    dataType: 'json'
-                }).done(function (response) {
-                    handleStatusHistoryResponse(groupId, processorId, response.statusHistory, config.type.processor, selectedDescriptor);
-              }).fail(nfErrorHandler.handleAjaxError);
-            },
-    
-            /**
-             * Shows the status history for the specified process group in this instance.
-             *
-             * @param {type} groupId
-             * @param {type} processGroupId
-             * @param {type} selectedDescriptor
-             */
-            showProcessGroupChart: function (groupId, processGroupId, selectedDescriptor) {
-                $.ajax({
-                    type: 'GET',
-                    url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupId) + '/status/history',
-                    dataType: 'json'
-                }).done(function (response) {
-                    handleStatusHistoryResponse(groupId, processGroupId, response.statusHistory, config.type.processGroup, selectedDescriptor);
-              }).fail(nfErrorHandler.handleAjaxError);
-            },
-    
-            /**
-             * Shows the status history for the specified remote process group in this instance.
-             *
-             * @param {type} groupId
-             * @param {type} remoteProcessGroupId
-             * @param {type} selectedDescriptor
-             */
-            showRemoteProcessGroupChart: function (groupId, remoteProcessGroupId, selectedDescriptor) {
-                $.ajax({
-                    type: 'GET',
-                    url: config.urls.api + '/flow/remote-process-groups/' + encodeURIComponent(remoteProcessGroupId) + '/status/history',
-                    dataType: 'json'
-                }).done(function (response) {
-                    handleStatusHistoryResponse(groupId, remoteProcessGroupId, response.statusHistory, config.type.remoteProcessGroup, selectedDescriptor);
-              }).fail(nfErrorHandler.handleAjaxError);
-            }
-        };
-    
-      return nfStatusHistory;
-  }));
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
deleted file mode 100644
index 56785f30d72e..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-storage.js
+++ /dev/null
@@ -1,195 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define([], 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;
-    var TWO_DAYS = MILLIS_PER_DAY * 2;
-
-    var isUndefined = function (obj) {
-        return typeof obj === 'undefined';
-    };
-
-    var isNull = function (obj) {
-        return obj === null;
-    };
-
-    var isDefinedAndNotNull = function (obj) {
-        return !isUndefined(obj) && !isNull(obj);
-    };
-
-    /**
-     * Checks the expiration for the specified entry.
-     *
-     * @param {object} entry
-     * @returns {boolean}
-     */
-    var checkExpiration = function (entry) {
-        if (isDefinedAndNotNull(entry.expires)) {
-            // get the expiration
-            var expires = new Date(entry.expires);
-            var now = new Date();
-
-            // return whether the expiration date has passed
-            return expires.valueOf() < now.valueOf();
-        } else {
-            return false;
-        }
-    };
-
-    /**
-     * Gets an enty for the key. The entry expiration is not checked.
-     *
-     * @param {string} key
-     */
-    var getEntry = function (key) {
-        try {
-            // parse the entry
-            var entry = JSON.parse(localStorage.getItem(key));
-
-            // ensure the entry and item are present
-            if (isDefinedAndNotNull(entry)) {
-                return entry;
-            } else {
-                return null;
-            }
-        } catch (e) {
-            return null;
-        }
-    };
-
-    return {
-        /**
-         * Initializes the storage. Items will be persisted for two days. Once the scripts runs
-         * thereafter, all eligible items will be removed. This strategy does not support persistence.
-         */
-        init: function () {
-            for (var i = 0; i < localStorage.length; i++) {
-                try {
-                    // get the next item
-                    var key = localStorage.key(i);
-
-                    // attempt to get the item which will expire if necessary
-                    this.getItem(key);
-                } catch (e) {
-                }
-            }
-        },
-
-        /**
-         * Stores the specified item.
-         *
-         * @param {string} key
-         * @param {object} item
-         * @param {integer} expires
-         */
-        setItem: function (key, item, expires) {
-            // calculate the expiration
-            expires = isDefinedAndNotNull(expires) ? expires : new Date().valueOf() + TWO_DAYS;
-
-            // create the entry
-            var entry = {
-                expires: expires,
-                item: item
-            };
-
-            // 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) {
-            var entry = getEntry(key);
-            if (entry === null) {
-                return null;
-            }
-
-            // if the entry is expired, drop it and return null
-            if (checkExpiration(entry)) {
-                this.removeItem(key);
-                return null;
-            }
-
-            // if the entry has the specified field return its value
-            if (isDefinedAndNotNull(entry['item'])) {
-                return entry['item'];
-            } else {
-                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}
-         */
-        getItemExpiration: function (key) {
-            var entry = getEntry(key);
-            if (entry === null) {
-                return null;
-            }
-
-            // if the entry has the specified field return its value
-            if (isDefinedAndNotNull(entry['expires'])) {
-                return entry['expires'];
-            } else {
-                return null;
-            }
-        },
-
-        /**
-         * Removes the item with the specified key.
-         *
-         * @param {type} key
-         */
-        removeItem: function (key) {
-            localStorage.removeItem(key);
-        }
-    };
-}));
\ 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
deleted file mode 100644
index 4406918712ba..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-universal-capture.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery'], 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';
-
-    /**
-     * 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 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;
-                }
-
-                // consider property detail dialogs
-                if ($('div.property-detail').is(':visible')) {
-                    nfUniversalDialog.removeAllPropertyDetailDialogs();
-
-                    // 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;
-                            }
-                        }
-
-                        // 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();
-                    }
-                }
-            }
-        });
-    });
-
-    var nfUniversalDialog = {
-        /**
-         * Removes all read only property detail dialogs.
-         */
-        removeAllPropertyDetailDialogs: function () {
-            var propertyDetails = $('body').find('div.property-detail');
-            propertyDetails.find('div.nfel-editor').nfeditor('destroy'); // look for any nfel editors
-            propertyDetails.find('div.value-combo').combo('destroy'); // look for any combos
-            propertyDetails.hide().remove();
-        }
-    };
-
-    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
deleted file mode 100644
index 22e82eeec159..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
+++ /dev/null
@@ -1,1423 +0,0 @@
-    /*
-     * 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 top, define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'd3',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.ErrorHandler'],
-              function ($, d3, nfCommon, nfDialog, nfErrorHandler) {
-                  return (nf.ng.ProvenanceLineage = factory($, d3, nfCommon, nfDialog, nfErrorHandler));
-              });
-      } 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, nfCommon, nfDialog, nfErrorHandler) {
-      'use strict';
-  
-      var mySelf = function () {
-            'use strict';
-    
-            /**
-             * Configuration object used to hold a number of configuration items.
-             */
-            var config = {
-                sliderTickCount: 75,
-                urls: {
-                  lineage: '../nifi-api/provenance/lineage'
-  
-                }
-            };
-    
-            /**
-             * Initializes the lineage query dialog.
-             */
-            var initLineageQueryDialog = function () {
-                // initialize the dialog
-                $('#lineage-query-dialog').modal({
-                    scrollableContentStyle: 'scrollable',
-                    headerText: nf._.msg('nf-provenance-lineage.Message1')
-                });
-          };
-  
-          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 {
-                  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 = $('<div class="context-menu-item"></div>').on('click', item.click).on('mouseenter', function () {
-                            $(this).addClass('hover');
-                        }).on('mouseleave', function () {
-                            $(this).removeClass('hover');
-                        }).appendTo(contextMenu);
-    
-                        // add the img and the text
-                        $('<div class="context-menu-item-img"></div>').addClass(item['class']).appendTo(menuItem);
-                        $('<div class="context-menu-item-text"></div>').text(item['text']).appendTo(menuItem);
-                        $('<div class="clear"></div>').appendTo(menuItem);
-                    }
-                });
-            };
-    
-            /**
-             * Submits the specified lineage request.
-             *
-             * @param {type} lineageRequest
-             * @returns {deferred}
-             */
-            var submitLineage = function (lineageRequest) {
-                var lineageEntity = {
-                    'lineage': {
-                        'request': lineageRequest
-                    }
-                };
-    
-                return $.ajax({
-                    type: 'POST',
-                    url: config.urls.lineage,
-                    data: JSON.stringify(lineageEntity),
-                    dataType: 'json',
-                    contentType: 'application/json'
-              }).fail(nfErrorHandler.handleAjaxError);
-            };
-    
-            /**
-             * Gets the specified lineage.
-             *
-             * @param {type} lineage
-             * @returns {deferred}
-             */
-            var getLineage = function (lineage) {
-                var url = lineage.uri;
-              if (nfCommon.isDefinedAndNotNull(lineage.request.clusterNodeId)) {
-                    url += '?' + $.param({
-                            clusterNodeId: lineage.request.clusterNodeId
-                        });
-                }
-    
-                return $.ajax({
-                    type: 'GET',
-                    url: url,
-                    dataType: 'json'
-              }).fail(nfErrorHandler.handleAjaxError);
-            };
-    
-            /**
-             * Cancels the specified lineage.
-             *
-             * @param {type} lineage
-             * @returns {deferred}
-             */
-            var cancelLineage = function (lineage) {
-                var url = lineage.uri;
-              if (nfCommon.isDefinedAndNotNull(lineage.request.clusterNodeId)) {
-                    url += '?' + $.param({
-                            clusterNodeId: lineage.request.clusterNodeId
-                        });
-                }
-    
-                return $.ajax({
-                    type: 'DELETE',
-                    url: url,
-                    dataType: 'json'
-              }).fail(nfErrorHandler.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 (nfCommon.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;
-                    }
-    
-                    // 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);
-                    });
-    
-                    // 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;
-                    });
-    
-                    // 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;
-    
-                        if (difference < DEFAULT_NODE_SPACING) {
-                            second.x += (DEFAULT_NODE_SPACING - difference);
-                        }
-                    }
-    
-                    // if there are children to position
-                    if (children.length > 0) {
-                        var childLevelDifference = DEFAULT_LEVEL_DIFFERENCE / 3;
-    
-                        // 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;
-                        $.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 (nfCommon.isUndefined(minMillis) || minMillis > node.millis) {
-                            minMillis = node.millis;
-                            minTimestamp = node.timestamp;
-                        }
-                      if (nfCommon.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 > 0 ? step : 1).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 nfCommon.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();
-    
-                      // prevents browser from using text cursor
-                      d3.event.preventDefault();
-                    })
-                    .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({
-                    change: slide,
-                    slide: slide
-                });
-    
-                // renders flowfile nodes
-                var renderFlowFile = function (flowfiles) {
-                  flowfiles
-                      .classed('flowfile', true)
-                      .on('mousedown', function (d) {
-                          d3.event.stopPropagation();
-                      });
-    
-                    // node
-                    flowfiles.append('circle')
-                        .attr({
-                            'r': 16,
-                            'fill': '#fff',
-                            'stroke': '#000',
-                            'stroke-width': 1.0
-                        })
-                        .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('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';
-                      });
-              };
-  
-              var showContextMenu = function (d, provenanceTableCtrl) {
-                    // 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: nf._.msg('nf-provenance-lineage.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 (nfCommon.isDefinedAndNotNull(lineage)) {
-                                    cancelLineage(lineage);
-                                }
-    
-                                // close the dialog
-                                $('#lineage-query-dialog').modal('hide');
-                            };
-    
-                            // 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 (!nfCommon.isEmpty(lineage.results.errors)) {
-                                    var errors = lineage.results.errors;
-                                  nfDialog.showOkDialog({
-                                         headerText: nf._.msg('nf-provenance-lineage.Process Lineage'),
-                                         dialogContent: nfCommon.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
-                                      nfDialog.showOkDialog({
-                                             headerText: nf._.msg('nf-provenance-lineage.Lineage Results'),
-                                             dialogContent: nf._.msg('nf-provenance-lineage.Message2')
-                                        });
-                                    }
-    
-                                    // 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, if its not done computing wait 1 second before checking again
-                                processLineage(1);
-                            }).fail(closeDialog);
-                        };
-    
-                        // handles updating the lineage graph
-                        var renderEventLineage = function (lineageResults) {
-                            addLineage(lineageResults.nodes, lineageResults.links, provenanceTableCtrl);
-                        };
-    
-                        // 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);
-    
-                                // 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;
-                                    }
-                                };
-    
-                                // 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;
-                                    }
-                                };
-    
-                                // the event is fan in if the flowfile uuid is in the children
-                                var fanIn = $.inArray(eventUuid, provenanceEvent.childUuids) >= 0;
-    
-                                // collapses the specified uuids
-                                var collapse = function (uuids) {
-                                    var newUuids = false;
-    
-                                    // 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);
-                                                    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': nf._.msg('nf-provenance-lineage.Find parents'),
-                            'click': function () {
-                                expandLineage({
-                                    lineageRequestType: 'PARENTS',
-                                    eventId: d.id,
-                                    clusterNodeId: clusterNodeId
-                                });
-                            }
-                        }, {
-                            'class': 'lineage-view-children',
-                            'text': nf._.msg('nf-provenance-lineage.Expand'),
-                            'click': function () {
-                                expandLineage({
-                                    lineageRequestType: 'CHILDREN',
-                                    eventId: d.id,
-                                    clusterNodeId: clusterNodeId
-                                });
-                            }
-                        }, {
-                            'class': 'lineage-collapse-children',
-                            'text': nf._.msg('nf-provenance-lineage.Collapse'),
-                            'click': function () {
-                                // collapse the children lineage
-                                collapseLineage(d.id, provenanceTableCtrl);
-                            }
-                        });
-                    }
-    
-                    // show the context menu for an event
-                    addContextMenuItems(menuItems);
-              };
-  
-              // renders event nodes
-              var renderEvent = function (events, provenanceTableCtrl) {
-                  events
-                      .on('contextmenu', function (d) {
-                          // select the current node for a visible cue
-                          d3.select('#event-node-' + d.id).classed('context', true);
-  
-                          // show the context menu
-                          showContextMenu(d, provenanceTableCtrl);
-                      })
-                      .on('mousedown', function (d) {
-                          d3.event.stopPropagation();
-                      });
-  
-                  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;
-                          }
-                        });
-    
-                    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(/<path([^>]*?)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 '<path' + before + 'd="M' + moveX + ',' + moveY + 'L' + lineX + ',' + lineY + '"' + after + '>';
-                      });
-  
-                      // adjust node positioning based on the offset of the bounding box
-                      svg = svg.replace(/<g([^>]*?)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 '<g' + before + 'transform="translate(' + x + ',' + y + ')"' + after + '>';
-                      });
-  
-                      // namespaces
-                      svg = svg.replace(/<svg ([^>]*)/, 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 = '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\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: nf._.msg('nf-provenance-lineage.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 (nfCommon.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 (!nfCommon.isEmpty(lineage.results.errors)) {
-                            var errors = lineage.results.errors;
-                          nfDialog.showOkDialog({
-                            headerText: nf._.msg('nf-provenance-lineage.Process Lineage'),
-                            dialogContent: nfCommon.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;
-  }));
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
deleted file mode 100644
index 371be34540ef..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
+++ /dev/null
@@ -1,1514 +0,0 @@
-    /*
-     * 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 top, define, module, require, exports */
-  
-  (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, nfCommon, nfDialog, nfErrorHandler, nfStorage, nfNgBridge) {
-                  return (nf.ng.ProvenanceTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler, nfStorage, nfNgBridge));
-              });
-      } 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, nfCommon, nfDialog, nfErrorHandler, nfStorage, nfNgBridge) {
-      'use strict';
-  
-      var nfProvenanceTable = function (provenanceLineageCtrl) {
-            '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'
-                }
-            };
-    
-            /**
-             * 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
-              nfCommon.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
-                    var parameters = {};
-    
-                    // conditionally include the ui extension token
-                  if (!nfCommon.isBlank(downloadToken)) {
-                        parameters['access_token'] = downloadToken;
-                    }
-    
-                    // conditionally include the cluster node id
-                    var clusterNodeId = $('#provenance-event-cluster-node-id').text();
-                  if (!nfCommon.isBlank(clusterNodeId)) {
-                        parameters['clusterNodeId'] = clusterNodeId;
-                    }
-    
-                    // open the url
-                    if ($.isEmptyObject(parameters)) {
-                        window.open(dataUri);
-                    } else {
-                        window.open(dataUri + '?' + $.param(parameters));
-                    }
-                }).fail(function () {
-                  nfDialog.showOkDialog({
-                    headerText: nf._.msg('nf-provenance-table.Provenance'),
-                    dialogContent: nf._.msg('nf-provenance-table.Message8')
-                    });
-                });
-            };
-    
-            /**
-             * 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);
-    
-                // generate tokens as necessary
-                var getAccessTokens = $.Deferred(function (deferred) {
-                  if (nfStorage.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 () {
-                          nfDialog.showOkDialog({
-                            headerText: nf._.msg('nf-provenance-table.Provenance'),
-                            dialogContent: nf._.msg('nf-provenance-table.Message7')
-                            });
-                            deferred.reject();
-                        });
-                    } else {
-                        deferred.resolve('', '');
-                    }
-                }).promise();
-    
-                // perform the request after we've received the tokens
-                getAccessTokens.done(function (uiExtensionToken, downloadToken) {
-                    var dataUriParameters = {};
-    
-                    // conditionally include the cluster node id
-                    var clusterNodeId = $('#provenance-event-cluster-node-id').text();
-                  if (!nfCommon.isBlank(clusterNodeId)) {
-                        dataUriParameters['clusterNodeId'] = clusterNodeId;
-                    }
-    
-                    // include the download token if applicable
-                  if (!nfCommon.isBlank(downloadToken)) {
-                        dataUriParameters['access_token'] = downloadToken;
-                    }
-    
-                    // include parameters if necessary
-                    if ($.isEmptyObject(dataUriParameters) === false) {
-                        dataUri = dataUri + '?' + $.param(dataUriParameters);
-                    }
-    
-                    // open the content viewer
-                    var contentViewerUrl = $('#nifi-content-viewer-url').text();
-    
-                    // 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 += '&';
-                    }
-    
-                    var contentViewerParameters = {
-                        'ref': dataUri
-                    };
-    
-                    // include the download token if applicable
-                  if (!nfCommon.isBlank(uiExtensionToken)) {
-                        contentViewerParameters['access_token'] = uiExtensionToken;
-                    }
-    
-                    // open the content viewer
-                    window.open(contentViewerUrl + $.param(contentViewerParameters));
-                });
-            };
-    
-            /**
-             * Initializes the details dialog.
-             */
-            var initDetailsDialog = function () {
-                // initialize the properties tabs
-                $('#event-details-tabs').tabbs({
-                    tabStyle: 'tab',
-                    selectedTabStyle: 'selected-tab',
-                    scrollableTabContentStyle: 'scrollable',
-                    tabs: [{
-                        name: nf._.msg('nf-provenance-table.Details'),
-                        tabContentId: 'event-details-tab-content'
-                    }, {
-                        name: nf._.msg('nf-provenance-table.Attributes'),
-                        tabContentId: 'attributes-tab-content'
-                    }, {
-                        name: nf._.msg('nf-provenance-table.Content'),
-                        tabContentId: 'content-tab-content'
-                    }]
-                });
-    
-                $('#event-details-dialog').modal({
-                    scrollableContentStyle: 'scrollable',
-                    headerText: nf._.msg('nf-provenance-table.ProvenanceEvent'),
-                    buttons: [{
-                        buttonText: nf._.msg('nf-provenance-table.Ok'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                $('#event-details-dialog').modal('hide');
-                            }
-                        }
-                    }],
-                    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 () {
-                          nfCommon.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();
-                    }
-                });
-    
-                // 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 (nfCommon.isContentViewConfigured()) {
-                    // input view
-                    $('#input-content-view').on('click', function () {
-                        viewContent('input');
-                    });
-    
-                    // output view
-                    $('#output-content-view').on('click', function () {
-                        viewContent('output');
-                    });
-                }
-    
-                // handle the replay and downloading
-                $('#replay-content').on('click', function () {
-                    var replayEntity = {
-                        'eventId': $('#provenance-event-id').text()
-                    };
-    
-                    // conditionally include the cluster node id
-                    var clusterNodeId = $('#provenance-event-cluster-node-id').text();
-                  if (!nfCommon.isBlank(clusterNodeId)) {
-                        replayEntity['clusterNodeId'] = clusterNodeId;
-                    }
-    
-                    $.ajax({
-                        type: 'POST',
-                        url: config.urls.replays,
-                        data: JSON.stringify(replayEntity),
-                        dataType: 'json',
-                        contentType: 'application/json'
-                    }).done(function (response) {
-                      nfDialog.showOkDialog({
-                        headerText: nf._.msg('nf-provenance-table.Provenance'),
-                        dialogContent: nf._.msg('nf-provenance-table.Message1')
-                        });
-                  }).fail(nfErrorHandler.handleAjaxError);
-    
-                    $('#event-details-dialog').modal('hide');
-                });
-    
-                // show the replay panel
-                $('#replay-details').show();
-            };
-    
-            /**
-             * 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(nfErrorHandler.handleAjaxError);
-    
-                    // show the node search combo
-                    $('#provenance-search-location-container').show();
-                }
-    
-                // configure the search dialog
-                $('#provenance-search-dialog').modal({
-                    scrollableContentStyle: 'scrollable',
-                    headerText: nf._.msg('nf-provenance-table.Message2'),
-                    buttons: [{
-                        buttonText: nf._.msg('nf-provenance-table.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: nf._.msg('nf-provenance-table.Cancel'),
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                    $('#provenance-search-dialog').modal('hide');
-                                }
-                            }
-                        }]
-                });
-    
-                return $.ajax({
-                    type: 'GET',
-                    url: config.urls.searchOptions,
-                    dataType: 'json'
-                }).done(function (response) {
-                    var provenanceOptions = response.provenanceOptions;
-    
-                    // 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: nf._.msg('nf-provenance-table.Message10')
-                });
-            };
-    
-            /**
-             * Appends the specified searchable field to the search dialog.
-             *
-             * @param {type} field      The searchable field
-             */
-            var appendSearchableField = function (field) {
-                var searchableField = $('<div class="searchable-field"></div>').appendTo('#searchable-fields-container');
-                $('<span class="searchable-field-id hidden"></span>').text(field.id).appendTo(searchableField);
-                $('<div class="searchable-field-name"></div>').text(field.label).appendTo(searchableField);
-                $('<div class="searchable-field-value"><input type="text" class="searchable-field-input"/></div>').appendTo(searchableField);
-                $('<div class="clear"></div>').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 (!nfCommon.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: nf._.msg('nf-provenance-table.ByComponentName'),
-                    value: 'componentName'
-                }, {
-                    text: nf._.msg('nf-provenance-table.ByComponentType'),
-                    value: 'componentType'
-                }, {
-                    text: nf._.msg('nf-provenance-table.ByType'),
-                    value: 'eventType'
-                }];
-    
-                // if clustered, allowing filtering by node id
-                if (isClustered) {
-                    filterOptions.push({
-                        text: nf._.msg('nf-provenance-table.ByNode'),
-                        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: nf._.msg('nf-provenance-table.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');
-                });
-    
-                // define a custom formatter for the more details column
-                var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
-                    return '<div title="'+nf._.msg('nf-provenance-table.ViewDetail')+'" class="pointer show-event-details fa fa-info-circle"></div>';
-                };
-    
-                // define how general values are formatted
-                var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-                  return nfCommon.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 (nfCommon.SUPPORTS_SVG) {
-                        markup += '<div title="'+nf._.msg('nf-provenance-table.ShowLineage')+'" class="pointer show-lineage icon icon-lineage" style="margin-right: 3px;"></div>';
-                    }
-    
-                    // conditionally support going to the component
-                  var isRemotePort = dataContext.componentType === 'Remote Input Port' || dataContext.componentType === 'Remote Output Port';
-                  if (isInShell && nfCommon.isDefinedAndNotNull(dataContext.groupId) && isRemotePort === false) {
-                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-provenance-table.GoTo')+'"></div>';
-                    }
-    
-                    return markup;
-                };
-    
-                // initialize the provenance table
-                var provenanceColumns = [
-                    {
-                        id: 'moreDetails',
-                        name: '&nbsp;',
-                        sortable: false,
-                        resizable: false,
-                        formatter: moreDetailsFormatter,
-                        width: 50,
-                        maxWidth: 50
-                    },
-                    {
-                        id: 'eventTime',
-                        name: nf._.msg('nf-provenance-table.DateTime'),
-                        field: 'eventTime',
-                        sortable: true,
-                        defaultSortAsc: false,
-                        resizable: true
-                    },
-                  {
-                      id: 'eventType',
-                      name: nf._.msg('nf-provenance-table.Type'),
-                      field: 'eventType',
-                      sortable: true,
-                      resizable: true
-                  },
-                  {
-                      id: 'flowFileUuid',
-                      name: nf._.msg('nf-provenance-table.FlowFileUuid'),
-                      field: 'flowFileUuid',
-                      sortable: true,
-                      resizable: true
-                  },
-                  {
-                      id: 'fileSize',
-                      name: nf._.msg('nf-provenance-table.Size'),
-                      field: 'fileSize',
-                      sortable: true,
-                      defaultSortAsc: false,
-                      resizable: true
-                  },
-                    {
-                        id: 'componentName',
-                        name: nf._.msg('nf-provenance-table.ComponentName'),
-                        field: 'componentName',
-                        sortable: true,
-                        resizable: true,
-                        formatter: valueFormatter
-                    },
-                  {
-                      id: 'componentType',
-                      name: nf._.msg('nf-provenance-table.ComponentType'),
-                      field: 'componentType',
-                      sortable: true,
-                      resizable: true
-                  }
-                ];
-    
-                // conditionally show the cluster node identifier
-                if (isClustered) {
-                    provenanceColumns.push({
-                        id: 'clusterNodeAddress',
-                        name: nf._.msg('nf-provenance-table.Node'),
-                        field: 'clusterNodeAddress',
-                        sortable: true,
-                        resizable: true
-                    });
-                }
-    
-                // conditionally show the action column
-              if (nfCommon.SUPPORTS_SVG || isInShell) {
-                    provenanceColumns.push({
-                        id: 'actions',
-                        name: '&nbsp;',
-                        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(nfCommon.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 (nfCommon.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 = nfCommon.parseDateTime(a[sortDetails.columnId]).getTime();
-                      var bTime = nfCommon.parseDateTime(b[sortDetails.columnId]).getTime();
-                        if (aTime === bTime) {
-                            return a['id'] - b['id'];
-                        } else {
-                            return aTime - bTime;
-                        }
-                    } else if (sortDetails.columnId === 'fileSize') {
-                      var aSize = nfCommon.parseSize(a[sortDetails.columnId]);
-                      var bSize = nfCommon.parseSize(b[sortDetails.columnId]);
-                        if (aSize === bSize) {
-                            return a['id'] - b['id'];
-                        } else {
-                            return aSize - bSize;
-                        }
-                    } else {
-                      var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                      var bString = nfCommon.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(nfErrorHandler.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 (nfCommon.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(nfErrorHandler.handleAjaxError);
-            };
-    
-            /**
-             * Cancels the specified provenance query.
-             *
-             * @param {object} provenance
-             * @return {deferred}
-             */
-            var cancelProvenance = function (provenance) {
-                var url = provenance.uri;
-              if (nfCommon.isDefinedAndNotNull(provenance.request.clusterNodeId)) {
-                    url += '?' + $.param({
-                            clusterNodeId: provenance.request.clusterNodeId
-                        });
-                }
-    
-                return $.ajax({
-                    type: 'DELETE',
-                    url: url,
-                    dataType: 'json'
-              }).fail(nfErrorHandler.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 (nfCommon.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(nfCommon.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 nfCommon.isUndefinedOrNull(query.startDate) && nfCommon.isUndefinedOrNull(query.endDate) && $.isEmptyObject(query.searchTerms);
-                    };
-    
-                    // update the filter message based on the request
-                    if (isBlankQuery(provenanceRequest)) {
-                        var message = nf._.msg('nf-provenance-table.Message');
-                        if (provenanceResults.totalCount >= config.maxResults) {
-                            message += (nfCommon.formatInteger(config.maxResults) + nf._.msg('nf-provenance-table.Of') + provenanceResults.total + nf._.msg('nf-provenance-table.Message4'));
-                        } else {
-                            message += (nf._.msg('nf-provenance-table.Events'));
-                        }
-                        $('#provenance-query-message').text(message);
-                        $('#clear-provenance-search').hide();
-                    } else {
-                        var message = nf._.msg('nf-provenance-table.Showing');
-                        if (provenanceResults.totalCount >= config.maxResults) {
-                            message += (nfCommon.formatInteger(config.maxResults) + nf._.msg('nf-provenance-table.Of') + provenanceResults.total + nf._.msg('nf-provenance-table.Message5'));
-                        } else {
-                            message += (nf._.msg('nf-provenance-table.Message6'));
-                        }
-                        $('#provenance-query-message').text(message);
-                        $('#clear-provenance-search').show();
-                    }
-    
-                    // update the total number of events
-                  $('#total-events').text(nfCommon.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 (nfCommon.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 (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && nfCommon.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();
-                          nfErrorHandler.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 (nfCommon.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 = $('<div class="progress-label"></div>').text(value + '%');
-                    (nfNgBridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + value + '" class="md-hue-2" md-mode="determinate" aria-label="'+nf._.msg('nf-provenance-table.Process')+'"></md-progress-linear>'))(nfNgBridge.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: nf._.msg('nf-provenance-table.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();
-                                }
-                            }
-                        }
-                    }]).modal('show');
-    
-                    // -----------------------------
-                    // determine the provenance query
-                    // -----------------------------
-    
-                    // handle the specified query appropriately
-                  if (nfCommon.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 = {};
-                    }
-    
-                    // 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 (nfCommon.isDefinedAndNotNull(provenance)) {
-                            cancelProvenance(provenance);
-                        }
-    
-                        // close the dialog
-                        $('#provenance-query-dialog').modal('hide');
-                    };
-    
-                  // polls the server for the status of the provenance
-                  var pollProvenance = function () {
-                        getProvenance(provenance).done(function (response) {
-                            // update the provenance
-                            provenance = response.provenance;
-    
-                            // process the provenance
-                          processProvenanceResponse();
-                        }).fail(closeDialog);
-                    };
-    
-                  // processes the provenance
-                  var processProvenanceResponse = function () {
-                        // if the request was cancelled just ignore the current response
-                        if (cancelled === true) {
-                            closeDialog();
-                            return;
-                        }
-    
-                        // update the percent complete
-                      provenanceTableCtrl.updateProgress(provenanceProgress, provenance.percentCompleted);
-    
-                        // process the results if they are finished
-                        if (provenance.finished === true) {
-                            // show any errors when the query finishes
-                          if (!nfCommon.isEmpty(provenance.results.errors)) {
-                                var errors = provenance.results.errors;
-                              nfDialog.showOkDialog({
-                                    headerText: nf._.msg('nf-provenance-table.Provenance'),
-                                    dialogContent: nfCommon.formatUnorderedList(errors),
-                                });
-                            }
-    
-                            // process the results
-                          loadProvenanceResults(provenance, provenanceTableCtrl);
-    
-                            // hide the dialog
-                            closeDialog();
-                        } else {
-                            // start the wait to poll again
-                            provenanceTimer = setTimeout(function () {
-                                // clear the timer since we've been invoked
-                                provenanceTimer = null;
-    
-                                // 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 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 (nfCommon.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(nfErrorHandler.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(nfCommon.formatValue(event.eventTime)).ellipsis();
-                      $('#provenance-event-type').html(nfCommon.formatValue(event.eventType)).ellipsis();
-                      $('#provenance-event-flowfile-uuid').html(nfCommon.formatValue(event.flowFileUuid)).ellipsis();
-                      $('#provenance-event-component-id').html(nfCommon.formatValue(event.componentId)).ellipsis();
-                      $('#provenance-event-component-name').html(nfCommon.formatValue(event.componentName)).ellipsis();
-                      $('#provenance-event-component-type').html(nfCommon.formatValue(event.componentType)).ellipsis();
-                      $('#provenance-event-details').html(nfCommon.formatValue(event.details)).ellipsis();
-    
-                        // over the default tooltip with the actual byte count
-                      var fileSize = $('#provenance-event-file-size').html(nfCommon.formatValue(event.fileSize)).ellipsis();
-                        fileSize.attr('title', nfCommon.formatInteger(event.fileSizeBytes) + nf._.msg('nf-provenance-table.Bytes'));
-    
-                        // sets an duration
-                        var setDuration = function (field, value) {
-                          if (nfCommon.isDefinedAndNotNull(value)) {
-                                if (value === 0) {
-                                    field.text('< 1ms');
-                                } else {
-                                  field.text(nfCommon.formatDuration(value));
-                                }
-                            } else {
-                              field.html('<span class="unset">'+nf._.msg('nf-provenance-table.NoValueSet')+'</span>');
-                            }
-                        };
-    
-                        // handle durations
-                        setDuration($('#provenance-event-duration'), event.eventDuration);
-                        setDuration($('#provenance-lineage-duration'), event.lineageDuration);
-    
-                        // formats an event detail
-                        var formatEventDetail = function (label, value) {
-                            $('<div class="event-detail"></div>').append(
-                                $('<div class="detail-name"></div>').text(label)).append(
-                              $('<div class="detail-value">' + nfCommon.formatValue(value) + '</div>').ellipsis()).append(
-                                $('<div class="clear"></div>')).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 (nfCommon.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 (nfCommon.isEmpty(event.parentUuids)) {
-                            $('#parent-flowfile-count').text(0);
-                            parentUuids.append('<span class="unset">'+nf._.msg('nf-provenance-table.NoParent')+'</span>');
-                        } else {
-                            $('#parent-flowfile-count').text(event.parentUuids.length);
-                            $.each(event.parentUuids, function (_, uuid) {
-                                $('<div></div>').text(uuid).appendTo(parentUuids);
-                            });
-                        }
-    
-                        // handle child flowfiles
-                      if (nfCommon.isEmpty(event.childUuids)) {
-                            $('#child-flowfile-count').text(0);
-                            childUuids.append('<span class="unset">'+nf._.msg('nf-provenance-table.NoChildren')+'</span>');
-                        } else {
-                            $('#child-flowfile-count').text(event.childUuids.length);
-                            $.each(event.childUuids, function (_, uuid) {
-                                $('<div></div>').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 = $('<div class="attribute-detail"></div>')
-                              .append($('<div class="attribute-name">' + nfCommon.formatValue(attribute.name) + '</div>').ellipsis())
-                                .appendTo(attributesContainer);
-    
-                            // add the current value
-                            attributeRecord
-                              .append($('<div class="attribute-value">' + nfCommon.formatValue(attribute.value) + '</div>').ellipsis())
-                                .append('<div class="clear"></div>');
-    
-                            // show the previous value if the property has changed
-                            if (attribute.value !== attribute.previousValue) {
-                              if (nfCommon.isDefinedAndNotNull(attribute.previousValue)) {
-                                    attributeRecord
-                                      .append($('<div class="modified-attribute-value">' + nfCommon.formatValue(attribute.previousValue) + '<span class="unset"> (previous)</span></div>').ellipsis())
-                                        .append('<div class="clear"></div>');
-                                } else {
-                                    attributeRecord
-                                      .append($('<div class="unset" style="font-size: 13px; padding-top: 2px;">' + nfCommon.formatValue(attribute.previousValue) + '</div>').ellipsis())
-                                        .append('<div class="clear"></div>');
-                                }
-                            } else {
-                                // mark this attribute as not modified
-                                attributeRecord.addClass('attribute-unmodified');
-                            }
-                        });
-    
-                        var formatContentValue = function (element, value) {
-                          if (nfCommon.isDefinedAndNotNull(value)) {
-                                element.removeClass('unset').text(value);
-                            } else {
-                                element.addClass('unset').text(nf._.msg('nf-provenance-table.Message9'));
-                            }
-                        };
-    
-                        // content
-                        $('#input-content-header').text(nf._.msg('nf-provenance-table.InputClaim'));
-                        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 (nfCommon.isDefinedAndNotNull(event.inputContentClaimFileSize)) {
-                            // over the default tooltip with the actual byte count
-                          inputContentSize.attr('title', nfCommon.formatInteger(event.inputContentClaimFileSizeBytes) + nf._.msg('nf-provenance-table.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 (nfCommon.isDefinedAndNotNull(event.outputContentClaimFileSize)) {
-                            // over the default tooltip with the actual byte count
-                          outputContentSize.attr('title', nfCommon.formatInteger(event.outputContentClaimFileSizeBytes) + nf._.msg('nf-provenance-table.Bytes'));
-                        }
-    
-                        if (event.inputContentAvailable === true) {
-                            $('#input-content-download').show();
-    
-                          if (nfCommon.isContentViewConfigured()) {
-                                $('#input-content-view').show();
-                            } else {
-                                $('#input-content-view').hide();
-                            }
-                        } else {
-                            $('#input-content-download').hide();
-                            $('#input-content-view').hide();
-                        }
-    
-                        if (event.outputContentAvailable === true) {
-                            $('#output-content-download').show();
-    
-                          if (nfCommon.isContentViewConfigured()) {
-                                $('#output-content-view').show();
-                            } else {
-                                $('#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();
-                        }
-    
-                        // show the dialog
-                        $('#event-details-dialog').modal('show');
-                  });
-                }
-            }
-    
-            var provenanceTableCtrl = new ProvenanceTableCtrl();
-            return provenanceTableCtrl;
-        };
-    
-      return nfProvenanceTable;
-  }));
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
deleted file mode 100644
index 5dc2a2d8d876..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js
+++ /dev/null
@@ -1,362 +0,0 @@
-/*
- * 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 top, define, module, require, exports */
-
-(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,
-                      nfCommon,
-                      appConfig,
-                      appCtrl,
-                      provenanceLineage,
-                      provenanceTable,
-                      nfNgBridge,
-                      nfErrorHandler,
-                      nfStorage) {
-                return (nf.ng.Provenance =
-                    factory($,
-                        angular,
-                        nfCommon,
-                        appConfig,
-                        appCtrl,
-                        provenanceLineage,
-                        provenanceTable,
-                        nfNgBridge,
-                        nfErrorHandler,
-                        nfStorage));
-            });
-    } 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, nfCommon, appConfig, appCtrl, provenanceLineage, provenanceTable, nfNgBridge, nfErrorHandler, nfStorage) {
-    'use strict';
-
-    $(document).ready(function () {
-        //Create Angular App
-        var app = angular.module('ngProvenanceApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
-
-        //Define Dependency Injection Annotations
-        appConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
-        appCtrl.$inject = ['$scope'];
-        nfProvenance.$inject = ['provenanceTableCtrl'];
-        provenanceLineage.$inject = [];
-        provenanceTable.$inject = ['provenanceLineageCtrl'];
-
-        //Configure Angular App
-        app.config(appConfig);
-
-        //Define Angular App Controllers
-        app.controller('ngProvenanceAppCtrl', appCtrl);
-
-        //Define Angular App Services
-        app.service('provenanceCtrl', nfProvenance);
-        app.service('provenanceLineageCtrl', provenanceLineage);
-        app.service('provenanceTableCtrl', provenanceTable);
-
-        //Manually Boostrap Angular App
-        nfNgBridge.injector = angular.bootstrap($('body'), ['ngProvenanceApp'], {strictDi: true});
-
-        // initialize the status page
-        nfNgBridge.injector.get('provenanceCtrl').init();
-    });
-
-    var nfProvenance = function (provenanceTableCtrl) {
-
-        /**
-         * 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'
-            }
-        };
-
-        /**
-         * Whether or not this NiFi is clustered.
-         */
-        var isClustered = null;
-
-        /**
-         * 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(nfErrorHandler.handleAjaxError);
-        };
-
-        /**
-         * 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';
-
-                // store the controller name
-                $('#nifi-controller-uri').text(aboutDetails.uri);
-
-                // set the timezone for the start and end time
-                $('.timezone').text(aboutDetails.timezone);
-
-                // store the content viewer url if available
-                if (!nfCommon.isBlank(aboutDetails.contentViewerUrl)) {
-                    $('#nifi-content-viewer-url').text(aboutDetails.contentViewerUrl);
-                }
-
-                // set the document title and the about title
-                document.title = provenanceTitle;
-                $('#provenance-header-text').text(provenanceTitle);
-            }).fail(nfErrorHandler.handleAjaxError);
-        };
-
-        /**
-         * Loads the current user.
-         */
-        var loadCurrentUser = function () {
-            return $.ajax({
-                type: 'GET',
-                url: config.urls.currentUser,
-                dataType: 'json'
-            }).done(function (currentUser) {
-                nfCommon.setCurrentUser(currentUser);
-            }).fail(nfErrorHandler.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 (nfCommon.isDefinedAndNotNull(response.banners)) {
-                            if (nfCommon.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 (nfCommon.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) {
-                        nfErrorHandler.handleAjaxError(xhr, status, error);
-                        deferred.reject();
-                    });
-                } else {
-                    deferred.resolve();
-                }
-            }).promise();
-        };
-
-        function ProvenanceCtrl() {
-        }
-
-        ProvenanceCtrl.prototype = {
-            constructor: ProvenanceCtrl,
-
-            /**
-             * Initializes the status page.
-             */
-            init: function () {
-                nfStorage.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;
-                        }
-
-                        // 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;
-                        }
-
-                        // load the provenance table
-                        if ($.isEmptyObject(searchTerms)) {
-                            // load the provenance table
-                            provenanceTableCtrl.loadProvenanceTable();
-                        } else {
-                            // load the provenance table
-                            provenanceTableCtrl.loadProvenanceTable({
-                                'searchTerms': searchTerms
-                            });
-                        }
-
-                        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) {
-                                nfCommon.toggleScrollable(tabsContent.get(0));
-                            });
-                        });
-                    });
-                });
-            }
-        }
-
-        var provenanceCtrl = new ProvenanceCtrl();
-        return provenanceCtrl;
-    }
-
-    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
deleted file mode 100644
index e4823b14f326..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js
+++ /dev/null
@@ -1,248 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-  
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.SummaryTable'],
-              function ($, nfCommon, nfDialog, nfSummaryTable) {
-                  return (nf.ClusterSearch = factory($, nfCommon, nfDialog, nfSummaryTable));
-              });
-      } 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 ($, nfCommon, nfDialog, nfSummaryTable) {
-      'use strict';
-  
-        /**
-         * Configuration object used to hold a number of configuration items.
-         */
-        var config = {
-            search: 'Search nodes',
-            urls: {
-                clusterSearch: '../nifi-api/flow/cluster/search-results'
-            }
-        };
-    
-        return {
-            /**
-             * Initialize the header by register all required listeners.
-             */
-            init: function () {
-                // configure the view single node dialog
-                $('#view-single-node-dialog').modal({
-                    scrollableContentStyle: 'scrollable',
-                    headerText: nf._.msg('nf-cluster-search.SelectNode'),
-                    buttons: [{
-                        buttonText: nf._.msg('nf-cluster-search.Ok'),
-                        color: {
-                            base: '#728E9B',
-                            hover: '#004849',
-                            text: '#ffffff'
-                        },
-                        handler: {
-                            click: function () {
-                                var clusterSearchTerm = $('#cluster-search-field').val();
-    
-                                // create the search request
-                                $.ajax({
-                                    type: 'GET',
-                                    data: {
-                                        q: clusterSearchTerm
-                                    },
-                                    dataType: 'json',
-                                    url: config.urls.clusterSearch
-                                }).done(function (response) {
-                                    var searchResults = response.nodeResults;
-    
-                                    // selects the specified node
-                                    var selectNode = function (node) {
-                                        // update the urls to point to this specific node of the cluster
-                                      nfSummaryTable.setClusterNodeId(node.id);
-    
-                                        // load the summary for the selected node
-                                      nfSummaryTable.loadSummaryTable();
-    
-                                        // update the header
-                                        $('#summary-header-text').text(node.address + nf._.msg('nf-cluster-search.Summary'));
-                                    };
-    
-                                    // ensure the search found some results
-                                    if (!$.isArray(searchResults) || searchResults.length === 0) {
-                                      nfDialog.showOkDialog({
-                                            headerText: nf._.msg('nf-cluster-search.ClusterSearch'),
-                                            dialogContent: nf._.msg('nf-cluster-search.Message1') + nf.Common.escapeHtml(clusterSearchTerm) + '\'.'
-                                        });
-                                    } else if (searchResults.length > 1) {
-                                        var exactMatch = false;
-    
-                                        // look for an exact match
-                                        $.each(searchResults, function (_, result) {
-                                            if (result.address === clusterSearchTerm) {
-                                                selectNode(result);
-                                                exactMatch = true;
-                                                return false;
-                                            }
-                                        });
-    
-                                        // if there is an exact match, use it
-                                        if (exactMatch) {
-                                            // close the dialog
-                                            $('#view-single-node-dialog').modal('hide');
-                                        } else {
-                                          nfDialog.showOkDialog({
-                                                headerText: nf._.msg('nf-cluster-search.ClusterSearch'),
-                                                dialogContent: nf._.msg('nf-cluster-search.Message2') + nf.Common.escapeHtml(clusterSearchTerm) + '\'.'
-                                            });
-                                        }
-                                    } else if (searchResults.length === 1) {
-                                        selectNode(searchResults[0]);
-    
-                                        // close the dialog
-                                        $('#view-single-node-dialog').modal('hide');
-                                    }
-                                });
-                            }
-                        }
-                    },
-                        {
-                            buttonText: nf._.msg('nf-cluster-search.Cancel'),
-                            color: {
-                                base: '#E3E8EB',
-                                hover: '#C7D2D7',
-                                text: '#004849'
-                            },
-                            handler: {
-                                click: function () {
-                                    // close the dialog
-                                    this.modal('hide');
-                                }
-                            }
-                        }],
-                    handler: {
-                        close: function () {
-                            // reset the search field
-                            $('#cluster-search-field').val(config.search).addClass('search-nodes').clusterSearchAutocomplete('reset');
-                        }
-                    }
-                });
-    
-                // configure the cluster auto complete
-                $.widget('nf.clusterSearchAutocomplete', $.ui.autocomplete, {
-                    reset: function () {
-                        this.term = null;
-                    },
-                  _create: function() {
-                      this._super();
-                      this.widget().menu('option', 'items', '> :not(.search-no-matches)' );
-                  },
-                    _normalize: function (searchResults) {
-                        var items = [];
-                        items.push(searchResults);
-                        return items;
-                    },
-                    _renderMenu: function (ul, items) {
-                        // results are normalized into a single element array
-                        var searchResults = items[0];
-    
-                      var nfClusterSearchAutocomplete = this;
-                        $.each(searchResults.nodeResults, function (_, node) {
-                          nfClusterSearchAutocomplete._renderItem(ul, {
-                                label: node.address,
-                                value: node.address
-                            });
-                        });
-    
-                        // ensure there were some results
-                        if (ul.children().length === 0) {
-                            ul.append('<li class="unset search-no-matches">'+nf._.msg('nf-cluster-search.Message3')+'</li>');
-                        }
-                    },
-                    _resizeMenu: function () {
-                        var ul = this.menu.element;
-                      ul.width($('#cluster-search-field').outerWidth() - 2);
-                  },
-                  _renderItem: function (ul, match) {
-                      var itemContent = $('<a></a>').text(match.label);
-                      return $('<li></li>').data('ui-autocomplete-item', match).append(itemContent).appendTo(ul);
-                    }
-                });
-    
-                // configure the autocomplete field
-                $('#cluster-search-field').clusterSearchAutocomplete({
-                    minLength: 0,
-                    appendTo: '#search-cluster-results',
-                    position: {
-                        my: 'left top',
-                        at: 'left bottom',
-                        offset: '0 1'
-                    },
-                    source: function (request, response) {
-                        // create the search request
-                        $.ajax({
-                            type: 'GET',
-                            data: {
-                                q: request.term
-                            },
-                            dataType: 'json',
-                            url: config.urls.clusterSearch
-                        }).done(function (searchResponse) {
-                            response(searchResponse);
-                        });
-                    }
-                }).focus(function () {
-                    // conditionally clear the text for the user to type
-                    if ($(this).val() === config.search) {
-                        $(this).val('').removeClass('search-nodes');
-                    }
-                }).val(config.search).addClass('search-nodes');
-    
-                // handle the view single node click event
-                $('#view-single-node-link').click(function () {
-                    // hold the search nodes dialog
-                    $('#view-single-node-dialog').modal('show');
-                    $('#cluster-search-field').focus();
-                });
-    
-                // handle the view cluster click event
-                $('#view-cluster-link').click(function () {
-                    // reset the urls and refresh the table
-                  nfSummaryTable.setClusterNodeId(null);
-                  nfSummaryTable.loadSummaryTable();
-    
-                    // update the header
-                    $('#summary-header-text').text(nf._.msg('nf-cluster-search.NiFiSumary'));
-                });
-    
-                // show the view links
-                $('#view-options-container').show();
-            }
-        };
-  }));
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
deleted file mode 100644
index 1c1583d77e15..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
+++ /dev/null
@@ -1,3052 +0,0 @@
-    /*
-     * 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 top, define, module, require, exports */
-    
-  (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, nfCommon, nfErrorHandler, nfStatusHistory, nfProcessorDetails, nfConnectionDetails, nfNgBridge) {
-                  return (nf.SummaryTable = factory($, Slick, nfCommon, nfErrorHandler, nfStatusHistory, nfProcessorDetails, nfConnectionDetails, nfNgBridge));
-              });
-      } 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, nfCommon, nfErrorHandler, nfStatusHistory, nfProcessorDetails, nfConnectionDetails, nfNgBridge) {
-      'use strict';
-    
-        /**
-         * Configuration object used to hold a number of configuration items.
-         */
-        var config = {
-            urls: {
-                api: '../nifi-api',
-                status: '../nifi-api/flow/process-groups/root/status',
-                systemDiagnostics: '../nifi-api/system-diagnostics',
-                flowConfig: '../nifi-api/flow/config'
-            }
-        };
-    
-        /**
-         * Goes to the specified component if possible.
-         *
-         * @argument {string} groupId       The id of the group
-         * @argument {string} componentId   The id of the component
-         */
-        var goTo = function (groupId, componentId) {
-            // only attempt this if we're within a frame
-            if (top !== window) {
-                // and our parent has canvas utils and shell defined
-              if (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
-                    parent.nf.CanvasUtils.showComponent(groupId, componentId);
-                    parent.$('#shell-close-button').click();
-                }
-            }
-        };
-    
-        /**
-         * Initializes the summary table.
-         *
-         * @param {type} isClustered
-         */
-        var initSummaryTable = function (isClustered) {
-            // define the function for filtering the list
-            $('#summary-filter').keyup(function () {
-                applyFilter();
-            });
-    
-            // initialize the summary tabs
-            $('#summary-tabs').tabbs({
-                tabStyle: 'tab',
-                selectedTabStyle: 'selected-tab',
-                scrollableTabContentStyle: 'scrollable',
-                tabs: [{
-                  name: nf._.msg('nf-summary-table.Processors'),
-                    tabContentId: 'processor-summary-tab-content'
-                }, {
-                  name: nf._.msg('nf-summary-table.InputPorts'),
-                    tabContentId: 'input-port-summary-tab-content'
-                }, {
-                  name: nf._.msg('nf-summary-table.OutputPorts'),
-                    tabContentId: 'output-port-summary-tab-content'
-                }, {
-                  name: nf._.msg('nf-summary-table.RemoteProcessGroups'),
-                    tabContentId: 'remote-process-group-summary-tab-content'
-                }, {
-                  name: nf._.msg('nf-summary-table.Connections'),
-                    tabContentId: 'connection-summary-tab-content'
-                }, {
-                  name: nf._.msg('nf-summary-table.ProcessGroups'),
-                    tabContentId: 'process-group-summary-tab-content'
-                }],
-                select: function () {
-                    var tab = $(this).text();
-                  if (tab === nf._.msg('nf-summary-table.Processors')) {
-                        // ensure the processor table is sized properly
-                        var processorsGrid = $('#processor-summary-table').data('gridInstance');
-                      if (nfCommon.isDefinedAndNotNull(processorsGrid)) {
-                            processorsGrid.resizeCanvas();
-    
-                            // update the total number of processors
-                          $('#displayed-items').text(nfCommon.formatInteger(processorsGrid.getData().getLength()));
-                          $('#total-items').text(nfCommon.formatInteger(processorsGrid.getData().getLength()));
-                        }
-    
-                        // update the combo for processors
-                        $('#summary-filter-type').combo({
-                            options: [{
-                              text: nf._.msg('nf-summary-table.ByName'),
-                                value: 'name'
-                            }, {
-                              text: nf._.msg('nf-summary-table.ByType'),
-                                value: 'type'
-                            }],
-                            select: function (option) {
-                                applyFilter();
-                            }
-                        });
-                  } else if (tab === nf._.msg('nf-summary-table.Connections')) {
-                        // ensure the connection table is size properly
-                        var connectionsGrid = $('#connection-summary-table').data('gridInstance');
-                      if (nf.Common.isDefinedAndNotNull(connectionsGrid)) {
-                            connectionsGrid.resizeCanvas();
-    
-                            // update the total number of connections
-                          $('#displayed-items').text(nfCommon.formatInteger(connectionsGrid.getData().getLength()));
-                          $('#total-items').text(nfCommon.formatInteger(connectionsGrid.getData().getLength()));
-                        }
-    
-                        // update the combo for connections
-                        $('#summary-filter-type').combo({
-                            options: [{
-                              text: nf._.msg('nf-summary-table.BySource'),
-                                value: 'sourceName'
-                            }, {
-                              text: nf._.msg('nf-summary-table.ByName'),
-                                value: 'name'
-                            }, {
-                              text: nf._.msg('nf-summary-table.ByDestination'),
-                                value: 'destinationName'
-                            }],
-                            select: function (option) {
-                                applyFilter();
-                            }
-                        });
-                  } else if (tab === nf._.msg('nf-summary-table.InputPorts')) {
-                        // ensure the connection table is size properly
-                        var inputPortsGrid = $('#input-port-summary-table').data('gridInstance');
-                      if (nfCommon.isDefinedAndNotNull(inputPortsGrid)) {
-                            inputPortsGrid.resizeCanvas();
-    
-                            // update the total number of input ports
-                          $('#displayed-items').text(nfCommon.formatInteger(inputPortsGrid.getData().getLength()));
-                          $('#total-items').text(nfCommon.formatInteger(inputPortsGrid.getData().getLength()));
-                        }
-    
-                        // update the combo for input ports
-                        $('#summary-filter-type').combo({
-                            options: [{
-                              text: nf._.msg('nf-summary-table.ByName'),
-                                value: 'name'
-                            }],
-                            select: function (option) {
-                                applyFilter();
-                            }
-                        });
-                  } else if (tab === nf._.msg('nf-summary-table.OutputPorts')) {
-                        // ensure the connection table is size properly
-                        var outputPortsGrid = $('#output-port-summary-table').data('gridInstance');
-                      if (nfCommon.isDefinedAndNotNull(outputPortsGrid)) {
-                            outputPortsGrid.resizeCanvas();
-    
-                            // update the total number of output ports
-                          $('#displayed-items').text(nfCommon.formatInteger(outputPortsGrid.getData().getLength()));
-                          $('#total-items').text(nfCommon.formatInteger(outputPortsGrid.getData().getLength()));
-                        }
-    
-                        // update the combo for output ports
-                        $('#summary-filter-type').combo({
-                            options: [{
-                              text: nf._.msg('nf-summary-table.ByName'),
-                                value: 'name'
-                            }],
-                            select: function (option) {
-                                applyFilter();
-                            }
-                        });
-                  } else if (tab === nf._.msg('nf-summary-table.RemoteProcessGroups')) {
-                        // ensure the connection table is size properly
-                        var remoteProcessGroupsGrid = $('#remote-process-group-summary-table').data('gridInstance');
-                      if (nfCommon.isDefinedAndNotNull(remoteProcessGroupsGrid)) {
-                            remoteProcessGroupsGrid.resizeCanvas();
-    
-                            // update the total number of remote process groups
-                          $('#displayed-items').text(nfCommon.formatInteger(remoteProcessGroupsGrid.getData().getLength()));
-                          $('#total-items').text(nfCommon.formatInteger(remoteProcessGroupsGrid.getData().getLength()));
-                        }
-    
-                        // update the combo for remote process groups
-                        $('#summary-filter-type').combo({
-                            options: [{
-                              text: nf._.msg('nf-summary-table.ByName'),
-                                value: 'name'
-                            }, {
-                              text: nf._.msg('nf-summary-table.ByUri'),
-                                value: 'targetUri'
-                            }],
-                            select: function (option) {
-                                applyFilter();
-                            }
-                        });
-                    } else {
-                        // ensure the connection table is size properly
-                        var processGroupGrid = $('#process-group-summary-table').data('gridInstance');
-                      if (nfCommon.isDefinedAndNotNull(processGroupGrid)) {
-                            processGroupGrid.resizeCanvas();
-    
-                            // update the total number of process groups
-                          $('#displayed-items').text(nfCommon.formatInteger(processGroupGrid.getData().getLength()));
-                          $('#total-items').text(nfCommon.formatInteger(processGroupGrid.getData().getLength()));
-                        }
-    
-                        // update the combo for process groups
-                        $('#summary-filter-type').combo({
-                            options: [{
-                              text: nf._.msg('nf-summary-table.ByName'),
-                                value: 'name'
-                            }],
-                            select: function (option) {
-                                applyFilter();
-                            }
-                        });
-                    }
-    
-                    // reset the filter
-                    $('#summary-filter').val('');
-                    applyFilter();
-                }
-            });
-    
-            // define a custom formatter for showing more processor details
-            var moreProcessorDetails = function (row, cell, value, columnDef, dataContext) {
-              var markup = '<div title="'+nf._.msg('nf-summary-table.ViewProcessor')+'" class="pointer show-processor-details fa fa-info-circle" style="margin-right: 3px;"></div>';
-    
-                // if there are bulletins, render them on the graph
-              if (!nfCommon.isEmpty(dataContext.bulletins)) {
-                  markup += '<div class="has-bulletins fa fa-sticky-note-o"></div><span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
-                }
-    
-                return markup;
-            };
-    
-            // formatter for io
-            var ioFormatter = function (row, cell, value, columnDef, dataContext) {
-                return dataContext.read + ' / ' + dataContext.written;
-            };
-    
-            // formatter for tasks
-            var taskTimeFormatter = function (row, cell, value, columnDef, dataContext) {
-              return nfCommon.formatInteger(dataContext.tasks) + ' / ' + dataContext.tasksDuration;
-            };
-    
-            // function for formatting the last accessed time
-            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
-              return nfCommon.formatValue(value);
-            };
-    
-            // define a custom formatter for the run status column
-            var runStatusFormatter = function (row, cell, value, columnDef, dataContext) {
-                var activeThreadCount = '';
-              if (nfCommon.isDefinedAndNotNull(dataContext.activeThreadCount) && dataContext.activeThreadCount > 0) {
-                    activeThreadCount = '(' + dataContext.activeThreadCount + ')';
-                }
-              var classes = nfCommon.escapeHtml(value.toLowerCase());
-              switch (nfCommon.escapeHtml(value.toLowerCase())) {
-                    case 'running':
-                      classes += ' fa fa-play running';
-                        break;
-                    case 'stopped':
-                      classes += ' fa fa-stop stopped';
-                        break;
-                    case 'enabled':
-                      classes += ' fa fa-flash enabled';
-                        break;
-                    case 'disabled':
-                      classes += ' icon icon-enable-false disabled';
-                        break;
-                    case 'invalid':
-                      classes += ' fa fa-warning invalid';
-                        break;
-                    default:
-                        classes += '';
-                }
-                var formattedValue = '<div layout="row"><div class="' + classes + '"></div>';
-              return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + nfCommon.escapeHtml(value) + '</div><div style="float: left; margin-left: 4px;">' + nfCommon.escapeHtml(activeThreadCount) + '</div></div>';
-            };
-    
-            // define the input, read, written, and output columns (reused between both tables)
-          var nameColumn = {id: 'name', field: 'name', name: nf._.msg('nf-summary-table.Name'), sortable: true, resizable: true};
-            var runStatusColumn = {
-                id: 'runStatus',
-                field: 'runStatus',
-              name: nf._.msg('nf-summary-table.RunStatus'),
-                formatter: runStatusFormatter,
-                sortable: true
-            };
-            var inputColumn = {
-                id: 'input',
-                field: 'input',
-              name: '<span class="input-title">'+nf._.msg('nf-summary-table.In')+'</span>&nbsp;/&nbsp;<span class="input-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
-              toolTip:nf._.msg('nf-summary-table.Message'),
-                sortable: true,
-                defaultSortAsc: false,
-                resizable: true
-            };
-            var ioColumn = {
-                id: 'io',
-                field: 'io',
-              name: '<span class="read-title">'+nf._.msg('nf-summary-table.Read')+'</span>&nbsp;/&nbsp;<span class="written-title">'+nf._.msg('nf-summary-table.Write')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
-              toolTip: nf._.msg('nf-summary-table.Message1'),
-                formatter: ioFormatter,
-                sortable: true,
-                defaultSortAsc: false,
-                resizable: true
-            };
-            var outputColumn = {
-                id: 'output',
-                field: 'output',
-              name: '<span class="output-title">'+nf._.msg('nf-summary-table.Out')+'</span>&nbsp;/&nbsp;<span class="output-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
-              toolTip: nf._.msg('nf-summary-table.Message'),
-                sortable: true,
-                defaultSortAsc: false,
-                resizable: true
-            };
-            var tasksTimeColumn = {
-                id: 'tasks',
-                field: 'tasks',
-              name: '<span class="tasks-title">'+nf._.msg('nf-summary-table.Tasks')+'</span>&nbsp;/&nbsp;<span class="time-title">'+nf._.msg('nf-summary-table.Time')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
-              toolTip: nf._.msg('nf-summary-table.Message2'),
-                formatter: taskTimeFormatter,
-                sortable: true,
-                defaultSortAsc: false,
-                resizable: true
-            };
-    
-            // define the column model for the processor summary table
-            var processorsColumnModel = [
-                {
-                    id: 'moreDetails',
-                    field: 'moreDetails',
-                    name: '&nbsp;',
-                    resizable: false,
-                    formatter: moreProcessorDetails,
-                    sortable: true,
-                    width: 50,
-                    maxWidth: 50,
-                  toolTip: nf._.msg('nf-summary-table.Message4')
-                },
-                nameColumn,
-              {id: 'type', field: 'type', name: nf._.msg('nf-summary-table.Type'), sortable: true, resizable: true},
-                runStatusColumn,
-                inputColumn,
-                ioColumn,
-                outputColumn,
-                tasksTimeColumn
-            ];
-    
-            // determine if the this page is in the shell
-            var isInShell = (top !== window);
-    
-            // add an action column if appropriate
-          if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
-                // define how the column is formatted
-                var processorActionFormatter = function (row, cell, value, columnDef, dataContext) {
-                    var markup = '';
-    
-                    if (isInShell) {
-                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToProcessor')+'" style="margin-right: 3px;"></div>';
-                    }
-    
-                  if (nfCommon.SUPPORTS_SVG) {
-                      markup += '<div class="pointer show-processor-status-history fa fa-area-chart" title="'+nf._.msg('nf-summary-table.ViewStatus')+'" style="margin-right: 3px;"></div>';
-                    }
-    
-                    if (isClustered) {
-                      markup += '<div class="pointer show-cluster-processor-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewProcessor')+'"></div>';
-                    }
-    
-                    return markup;
-                };
-    
-                // define the action column for clusters and within the shell
-                processorsColumnModel.push({
-                    id: 'actions',
-                    name: '&nbsp;',
-                    formatter: processorActionFormatter,
-                    resizable: false,
-                    sortable: false,
-                    width: 75,
-                    maxWidth: 75
-                });
-            }
-    
-            // initialize the templates table
-            var processorsOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false,
-                multiSelect: false,
-                rowHeight: 24
-            };
-    
-            // initialize the dataview
-            var processorsData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            processorsData.setItems([]);
-            processorsData.setFilterArgs({
-                searchString: '',
-                property: 'name'
-            });
-            processorsData.setFilter(filter);
-    
-            // initialize the sort
-            sort('processor-summary-table', {
-                columnId: 'name',
-                sortAsc: true
-            }, processorsData);
-    
-            // initialize the grid
-            var processorsGrid = new Slick.Grid('#processor-summary-table', processorsData, processorsColumnModel, processorsOptions);
-            processorsGrid.setSelectionModel(new Slick.RowSelectionModel());
-            processorsGrid.registerPlugin(new Slick.AutoTooltips());
-            processorsGrid.setSortColumn('name', true);
-            processorsGrid.onSort.subscribe(function (e, args) {
-                sort('processor-summary-table', {
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, processorsData);
-            });
-    
-            // configure a click listener
-            processorsGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-    
-                // get the node at this row
-                var item = processorsData.getItem(args.row);
-    
-                // determine the desired action
-                if (processorsGrid.getColumns()[args.cell].id === 'actions') {
-                    if (target.hasClass('go-to')) {
-                        goTo(item.groupId, item.id);
-                    } else if (target.hasClass('show-processor-status-history')) {
-                      nfStatusHistory.showProcessorChart(item.groupId, item.id);
-                    } else if (target.hasClass('show-cluster-processor-summary')) {
-                        // load the cluster processor summary
-                        loadClusterProcessorSummary(item.groupId, item.id);
-    
-                        // hide the summary loading indicator
-                        $('#summary-loading-container').hide();
-    
-                        // show the dialog
-                        $('#cluster-processor-summary-dialog').modal('show');
-    
-                        // resize after opening
-                        clusterProcessorsGrid.resizeCanvas();
-                    }
-                } else if (processorsGrid.getColumns()[args.cell].id === 'moreDetails') {
-                    if (target.hasClass('show-processor-details')) {
-                      nfProcessorDetails.showDetails(item.groupId, item.id);
-                    }
-                }
-            });
-    
-            // wire up the dataview to the grid
-            processorsData.onRowCountChanged.subscribe(function (e, args) {
-                processorsGrid.updateRowCount();
-                processorsGrid.render();
-    
-                // update the total number of displayed processors if necessary
-                if ($('#processor-summary-table').is(':visible')) {
-                  $('#displayed-items').text(nfCommon.formatInteger(args.current));
-                }
-            });
-            processorsData.onRowsChanged.subscribe(function (e, args) {
-                processorsGrid.invalidateRows(args.rows);
-                processorsGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#processor-summary-table').data('gridInstance', processorsGrid).on('mouseenter', 'div.slick-cell', function (e) {
-                var bulletinIcon = $(this).find('div.has-bulletins');
-                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                    var processorId = $(this).find('span.row-id').text();
-    
-                    // get the status item
-                    var item = processorsData.getItemById(processorId);
-    
-                    // format the tooltip
-                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
-                  var tooltip = nfCommon.formatUnorderedList(bulletins);
-    
-                    // show the tooltip
-                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                            content: tooltip,
-                            position: {
-                                container: $('#summary'),
-                                at: 'bottom right',
-                                my: 'top left',
-                                adjust: {
-                                    x: 4,
-                                    y: 4
-                                }
-                            }
-                        }));
-                    }
-                }
-            });
-    
-            // initialize the cluster processor summary dialog
-            $('#cluster-processor-summary-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-              headerText: nf._.msg('nf-summary-table.ClusterProcessorSummary'),
-                buttons: [{
-                  buttonText: nf._.msg('nf-summary-table.Close'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // clear the cluster processor summary dialog
-                            $('#cluster-processor-id').text('');
-                            $('#cluster-processor-name').text('');
-    
-                            // close the dialog
-                            this.modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // show the summary loading container
-                        $('#summary-loading-container').show();
-                    }
-                }
-            });
-    
-            // cluster processor refresh
-            $('#cluster-processor-refresh-button').click(function () {
-                loadClusterProcessorSummary($('#cluster-processor-group-id').text(), $('#cluster-processor-id').text());
-            });
-    
-            // initialize the cluster processor column model
-            var clusterProcessorsColumnModel = [
-              {id: 'node', field: 'node', name: nf._.msg('Node'), sortable: true, resizable: true},
-                runStatusColumn,
-                inputColumn,
-                ioColumn,
-                outputColumn,
-                tasksTimeColumn
-            ];
-    
-            // initialize the options for the cluster processors table
-            var clusterProcessorsOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false,
-                multiSelect: false,
-                rowHeight: 24
-            };
-    
-            // initialize the dataview
-            var clusterProcessorsData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            clusterProcessorsData.setItems([]);
-    
-            // initialize the sort
-            sort('cluster-processor-summary-table', {
-                columnId: 'node',
-                sortAsc: true
-            }, clusterProcessorsData);
-    
-            // initialize the grid
-            var clusterProcessorsGrid = new Slick.Grid('#cluster-processor-summary-table', clusterProcessorsData, clusterProcessorsColumnModel, clusterProcessorsOptions);
-            clusterProcessorsGrid.setSelectionModel(new Slick.RowSelectionModel());
-            clusterProcessorsGrid.registerPlugin(new Slick.AutoTooltips());
-            clusterProcessorsGrid.setSortColumn('node', true);
-            clusterProcessorsGrid.onSort.subscribe(function (e, args) {
-                sort('cluster-processor-summary-table', {
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, clusterProcessorsData);
-            });
-    
-            // wire up the dataview to the grid
-            clusterProcessorsData.onRowCountChanged.subscribe(function (e, args) {
-                clusterProcessorsGrid.updateRowCount();
-                clusterProcessorsGrid.render();
-            });
-            clusterProcessorsData.onRowsChanged.subscribe(function (e, args) {
-                clusterProcessorsGrid.invalidateRows(args.rows);
-                clusterProcessorsGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#cluster-processor-summary-table').data('gridInstance', clusterProcessorsGrid);
-    
-            // define a custom formatter for showing more processor details
-            var moreConnectionDetails = function (row, cell, value, columnDef, dataContext) {
-              return '<div class="pointer show-connection-details fa fa-info-circle" title="'+nf._.msg('nf-summary-table.ViewConnect')+'" style="margin-top: 5px;"></div>';
-          };
-  
-          var backpressureFormatter = function (row, cell, value, columnDef, dataContext) {
-              var percentUseCount = 'NA';
-              if (nfCommon.isDefinedAndNotNull(dataContext.percentUseCount)) {
-                  percentUseCount = dataContext.percentUseCount + '%';
-              }
-              var percentUseBytes = 'NA';
-              if (nfCommon.isDefinedAndNotNull(dataContext.percentUseBytes)) {
-                  percentUseBytes = dataContext.percentUseBytes + '%';
-              }
-              return percentUseCount + ' / ' + percentUseBytes;
-            };
-    
-            // define the input, read, written, and output columns (reused between both tables)
-            var queueColumn = {
-                id: 'queued',
-                field: 'queued',
-              name: '<span class="queued-title">'+nf._.msg('nf-summary-table.Queue')+'</span>&nbsp;/&nbsp;<span class="queued-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>',
-                sortable: true,
-                defaultSortAsc: false,
-              resize: true
-          };
-  
-          // define the backpressure column (reused between both tables)
-          var backpressureColumn = {
-              id: 'backpressure',
-              field: 'backpressure',
-              name: '<span class="backpressure-object-title">Queue</span>&nbsp;/&nbsp;<span class="backpressure-data-size-title">Size</span> Threshold',
-              sortable: true,
-              defaultSortAsc: false,
-              formatter: backpressureFormatter,
-                resize: true
-            };
-    
-            // define the column model for the summary table
-            var connectionsColumnModel = [
-                {
-                    id: 'moreDetails',
-                    name: '&nbsp;',
-                    sortable: false,
-                    resizable: false,
-                    formatter: moreConnectionDetails,
-                    width: 50,
-                    maxWidth: 50
-                },
-              {id: 'sourceName', field: 'sourceName', name: nf._.msg('nf-summary-table.SourceName'), sortable: true, resizable: true},
-              {id: 'name', field: 'name', name: nf._.msg('nf-summary-table.Name'), sortable: true, resizable: true, formatter: valueFormatter},
-                {
-                    id: 'destinationName',
-                    field: 'destinationName',
-                  name: nf._.msg('nf-summary-table.DestinationName'),
-                    sortable: true,
-                    resizable: true
-                },
-                inputColumn,
-                queueColumn,
-              backpressureColumn,
-                outputColumn
-            ];
-    
-            // add an action column if appropriate
-          if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
-                // define how the column is formatted
-                var connectionActionFormatter = function (row, cell, value, columnDef, dataContext) {
-                    var markup = '';
-    
-                    if (isInShell) {
-                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToConnect')+'" style="margin-right: 3px;"></div>';
-                    }
-    
-                  if (nfCommon.SUPPORTS_SVG) {
-                      markup += '<div class="pointer show-connection-status-history fa fa-area-chart" title="'+nf._.msg('nf-summary-table.ViewStatus')+'" style="margin-right: 3px;"></div>';
-                    }
-    
-                    if (isClustered) {
-                      markup += '<div class="pointer show-cluster-connection-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewConnect')+'"></div>';
-                    }
-    
-                    return markup;
-                };
-    
-                // define the action column for clusters and within the shell
-                connectionsColumnModel.push({
-                    id: 'actions',
-                    name: '&nbsp;',
-                    formatter: connectionActionFormatter,
-                    resizable: false,
-                    sortable: false,
-                    width: 75,
-                    maxWidth: 75
-                });
-            }
-    
-            // initialize the templates table
-            var connectionsOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false,
-                multiSelect: false,
-                rowHeight: 24
-            };
-    
-            // initialize the dataview
-            var connectionsData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            connectionsData.setItems([]);
-            connectionsData.setFilterArgs({
-                searchString: '',
-                property: 'sourceName'
-            });
-            connectionsData.setFilter(filter);
-    
-            // initialize the sort
-            sort('connection-summary-table', {
-                columnId: 'sourceName',
-                sortAsc: true
-            }, connectionsData);
-    
-            // initialize the grid
-            var connectionsGrid = new Slick.Grid('#connection-summary-table', connectionsData, connectionsColumnModel, connectionsOptions);
-            connectionsGrid.setSelectionModel(new Slick.RowSelectionModel());
-            connectionsGrid.registerPlugin(new Slick.AutoTooltips());
-            connectionsGrid.setSortColumn('sourceName', true);
-            connectionsGrid.onSort.subscribe(function (e, args) {
-                sort('connection-summary-table', {
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, connectionsData);
-            });
-    
-            // configure a click listener
-            connectionsGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-    
-                // get the node at this row
-                var item = connectionsData.getItem(args.row);
-    
-                // determine the desired action
-                if (connectionsGrid.getColumns()[args.cell].id === 'actions') {
-                    if (target.hasClass('go-to')) {
-                        goTo(item.groupId, item.id);
-                    } else if (target.hasClass('show-connection-status-history')) {
-                      nfStatusHistory.showConnectionChart(item.groupId, item.id);
-                    } else if (target.hasClass('show-cluster-connection-summary')) {
-                        // load the cluster processor summary
-                        loadClusterConnectionSummary(item.groupId, item.id);
-    
-                        // hide the summary loading indicator
-                        $('#summary-loading-container').hide();
-    
-                        // show the dialog
-                        $('#cluster-connection-summary-dialog').modal('show');
-    
-                        // resize after opening
-                        clusterConnectionsGrid.resizeCanvas();
-                    }
-                } else if (connectionsGrid.getColumns()[args.cell].id === 'moreDetails') {
-                    if (target.hasClass('show-connection-details')) {
-                      nfConnectionDetails.showDetails(item.groupId, item.id);
-                    }
-                }
-            });
-    
-            // wire up the dataview to the grid
-            connectionsData.onRowCountChanged.subscribe(function (e, args) {
-                connectionsGrid.updateRowCount();
-                connectionsGrid.render();
-    
-                // update the total number of displayed processors, if necessary
-                if ($('#connection-summary-table').is(':visible')) {
-                  $('#displayed-items').text(nfCommon.formatInteger(args.current));
-                }
-            });
-            connectionsData.onRowsChanged.subscribe(function (e, args) {
-                connectionsGrid.invalidateRows(args.rows);
-                connectionsGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#connection-summary-table').data('gridInstance', connectionsGrid);
-    
-            // initialize the cluster connection summary dialog
-            $('#cluster-connection-summary-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-              headerText: nf._.msg('nf-summary-table.ClusterConnectionSummary'),
-                buttons: [{
-                  buttonText: nf._.msg('nf-summary-table.Close'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // clear the cluster connection summary dialog
-                            $('#cluster-connection-id').text('');
-                            $('#cluster-connection-name').text('');
-    
-                            // close the dialog
-                            this.modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // show the summary loading container
-                        $('#summary-loading-container').show();
-                    }
-                }
-            });
-    
-            // cluster connection refresh
-            $('#cluster-connection-refresh-button').click(function () {
-                loadClusterConnectionSummary($('#cluster-connection-group-id').text(), $('#cluster-connection-id').text());
-            });
-    
-            // initialize the cluster processor column model
-            var clusterConnectionsColumnModel = [
-              {id: 'node', field: 'node', name: nf._.msg('nf-summary-table.Node'), sortable: true, resizable: true},
-                inputColumn,
-                queueColumn,
-              backpressureColumn,
-                outputColumn
-            ];
-    
-            // initialize the options for the cluster processors table
-            var clusterConnectionsOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false,
-                multiSelect: false,
-                rowHeight: 24
-            };
-    
-            // initialize the dataview
-            var clusterConnectionsData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            clusterConnectionsData.setItems([]);
-    
-            // initialize the sort
-            sort('cluster-connection-summary-table', {
-                columnId: 'node',
-                sortAsc: true
-            }, clusterConnectionsData);
-    
-            // initialize the grid
-            var clusterConnectionsGrid = new Slick.Grid('#cluster-connection-summary-table', clusterConnectionsData, clusterConnectionsColumnModel, clusterConnectionsOptions);
-            clusterConnectionsGrid.setSelectionModel(new Slick.RowSelectionModel());
-            clusterConnectionsGrid.registerPlugin(new Slick.AutoTooltips());
-            clusterConnectionsGrid.setSortColumn('node', true);
-            clusterConnectionsGrid.onSort.subscribe(function (e, args) {
-                sort('cluster-connection-summary-table', {
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, clusterConnectionsData);
-            });
-    
-            // wire up the dataview to the grid
-            clusterConnectionsData.onRowCountChanged.subscribe(function (e, args) {
-                clusterConnectionsGrid.updateRowCount();
-                clusterConnectionsGrid.render();
-            });
-            clusterConnectionsData.onRowsChanged.subscribe(function (e, args) {
-                clusterConnectionsGrid.invalidateRows(args.rows);
-                clusterConnectionsGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#cluster-connection-summary-table').data('gridInstance', clusterConnectionsGrid);
-    
-            // define a custom formatter for showing more port/group details
-            var moreDetails = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-    
-                // if there are bulletins, render them on the graph
-              if (!nfCommon.isEmpty(dataContext.bulletins)) {
-                  markup += '<div class="has-bulletins fa fa-sticky-note-o" style="margin-top: 5px; margin-left: 5px; float: left;"></div><span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
-                }
-    
-                return markup;
-            };
-    
-            var moreDetailsColumn = {
-                id: 'moreDetails',
-                field: 'moreDetails',
-                name: '&nbsp;',
-                resizable: false,
-                formatter: moreDetails,
-                sortable: true,
-                width: 50,
-                maxWidth: 50,
-              toolTip: nf._.msg('nf-summary-table.Message4')
-            };
-            var transferredColumn = {
-                id: 'transferred',
-                field: 'transferred',
-              name: '<span class="transferred-title">'+nf._.msg('nf-summary-table.Transferred')+'</span>&nbsp;/&nbsp;<span class="transferred-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
-              toolTip: nf._.msg('nf-summary-table.Message3'),
-                resizable: true,
-                defaultSortAsc: false,
-                sortable: true
-            };
-            var sentColumn = {
-                id: 'sent',
-                field: 'sent',
-              name: '<span class="sent-title">'+nf._.msg('nf-summary-table.Sent')+'</span>&nbsp;/&nbsp;<span class="sent-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
-              toolTip: nf._.msg('nf-summary-table.Message'),
-                sortable: true,
-                defaultSortAsc: false,
-                resizable: true
-            };
-            var receivedColumn = {
-                id: 'received',
-                field: 'received',
-              name: '<span class="received-title">'+nf._.msg('nf-summary-table.Received')+'</span>&nbsp;/&nbsp;<span class="received-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
-              toolTip: nf._.msg('nf-summary-table.Message'),
-                sortable: true,
-                defaultSortAsc: false,
-                resizable: true
-            };
-    
-            // define the column model for the summary table
-            var processGroupsColumnModel = [
-                moreDetailsColumn,
-              {id: 'name', field: 'name', name: nf._.msg('nf-summary-table.Name'), sortable: true, resizable: true, formatter: valueFormatter},
-                transferredColumn,
-                inputColumn,
-                ioColumn,
-                outputColumn,
-                sentColumn,
-                receivedColumn
-            ];
-    
-            // add an action column if appropriate
-          if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
-                // define how the column is formatted
-                var processGroupActionFormatter = function (row, cell, value, columnDef, dataContext) {
-                    var markup = '';
-    
-                    if (isInShell && dataContext.groupId !== null) {
-                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToProcessor')+'" style="margin-right: 3px;"></div>';
-                    }
-    
-                  if (nfCommon.SUPPORTS_SVG) {
-                      markup += '<div class="pointer show-process-group-status-history fa fa-area-chart" title="'+nf._.msg('nf-summary-table.ViewStatus')+'" style="margin-right: 3px;"></div>';
-                    }
-    
-                    if (isClustered) {
-                      markup += '<div class="pointer show-cluster-process-group-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewProcessorGroup')+'"></div>';
-                    }
-    
-                    return markup;
-                };
-    
-                // define the action column for clusters and within the shell
-                processGroupsColumnModel.push({
-                    id: 'actions',
-                    name: '&nbsp;',
-                    formatter: processGroupActionFormatter,
-                    resizable: false,
-                    sortable: false,
-                    width: 75,
-                    maxWidth: 75
-                });
-            }
-    
-            // initialize the templates table
-            var processGroupsOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false,
-                multiSelect: false,
-                rowHeight: 24
-            };
-    
-            // initialize the dataview
-            var processGroupsData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            processGroupsData.setItems([]);
-            processGroupsData.setFilterArgs({
-                searchString: '',
-                property: 'name'
-            });
-            processGroupsData.setFilter(filter);
-    
-            // initialize the sort
-            sort('process-group-summary-table', {
-                columnId: 'name',
-                sortAsc: true
-            }, processGroupsData);
-    
-            // initialize the grid
-            var processGroupsGrid = new Slick.Grid('#process-group-summary-table', processGroupsData, processGroupsColumnModel, processGroupsOptions);
-            processGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
-            processGroupsGrid.registerPlugin(new Slick.AutoTooltips());
-            processGroupsGrid.setSortColumn('name', true);
-            processGroupsGrid.onSort.subscribe(function (e, args) {
-                sort('process-group-summary-table', {
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, processGroupsData);
-            });
-    
-            // configure a click listener
-            processGroupsGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-    
-                // get the node at this row
-                var item = processGroupsData.getItem(args.row);
-    
-                // determine the desired action
-                if (processGroupsGrid.getColumns()[args.cell].id === 'actions') {
-                    if (target.hasClass('go-to')) {
-                      if (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.ProcessGroup) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
-                          parent.nf.ProcessGroup.enterGroup(item.id);
-                            parent.$('#shell-close-button').click();
-                        }
-                    } else if (target.hasClass('show-process-group-status-history')) {
-                      nfStatusHistory.showProcessGroupChart(item.groupId, item.id);
-                    } else if (target.hasClass('show-cluster-process-group-summary')) {
-                        // load the cluster processor summary
-                        loadClusterProcessGroupSummary(item.id);
-    
-                        // hide the summary loading indicator
-                        $('#summary-loading-container').hide();
-    
-                        // show the dialog
-                        $('#cluster-process-group-summary-dialog').modal('show');
-    
-                        // resize after opening
-                        clusterProcessGroupsGrid.resizeCanvas();
-                    }
-                }
-            });
-    
-            // wire up the dataview to the grid
-            processGroupsData.onRowCountChanged.subscribe(function (e, args) {
-                processGroupsGrid.updateRowCount();
-                processGroupsGrid.render();
-    
-                // update the total number of displayed process groups if necessary
-                if ($('#process-group-summary-table').is(':visible')) {
-                  $('#displayed-items').text(nfCommon.formatInteger(args.current));
-                }
-            });
-            processGroupsData.onRowsChanged.subscribe(function (e, args) {
-                processGroupsGrid.invalidateRows(args.rows);
-                processGroupsGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#process-group-summary-table').data('gridInstance', processGroupsGrid).on('mouseenter', 'div.slick-cell', function (e) {
-                var bulletinIcon = $(this).find('div.has-bulletins');
-                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                    var processGroupId = $(this).find('span.row-id').text();
-    
-                    // get the status item
-                    var item = processGroupsData.getItemById(processGroupId);
-    
-                    // format the tooltip
-                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
-                  var tooltip = nfCommon.formatUnorderedList(bulletins);
-    
-                    // show the tooltip
-                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                            content: tooltip,
-                            position: {
-                                container: $('#summary'),
-                                at: 'bottom right',
-                                my: 'top left',
-                                adjust: {
-                                    x: 4,
-                                    y: 4
-                                }
-                            }
-                        }));
-                    }
-                }
-            });
-    
-            // initialize the cluster process group summary dialog
-            $('#cluster-process-group-summary-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-              headerText: nf._.msg('nf-summary-table.ClusterProcessGroupSummary'),
-                buttons: [{
-                  buttonText: nf._.msg('nf-summary-table.Close'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // clear the cluster processor summary dialog
-                            $('#cluster-process-group-id').text('');
-                            $('#cluster-process-group-name').text('');
-    
-                            // close the dialog
-                            this.modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // show the summary loading container
-                        $('#summary-loading-container').show();
-                    }
-                }
-            });
-    
-            // cluster process group refresh
-            $('#cluster-process-group-refresh-button').click(function () {
-                loadClusterProcessGroupSummary($('#cluster-process-group-id').text());
-            });
-    
-            // initialize the cluster process groups column model
-            var clusterProcessGroupsColumnModel = [
-                {id: 'node', field: 'node', name: 'Node', sortable: true, resizable: true},
-                transferredColumn,
-                inputColumn,
-                ioColumn,
-                outputColumn,
-                sentColumn,
-                receivedColumn
-            ];
-    
-            // initialize the options for the cluster processors table
-            var clusterProcessGroupsOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false,
-                multiSelect: false,
-                rowHeight: 24
-            };
-    
-            // initialize the dataview
-            var clusterProcessGroupsData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            clusterProcessGroupsData.setItems([]);
-    
-            // initialize the sort
-            sort('cluster-processor-summary-table', {
-                columnId: 'node',
-                sortAsc: true
-            }, clusterProcessGroupsData);
-    
-            // initialize the grid
-            var clusterProcessGroupsGrid = new Slick.Grid('#cluster-process-group-summary-table', clusterProcessGroupsData, clusterProcessGroupsColumnModel, clusterProcessGroupsOptions);
-            clusterProcessGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
-            clusterProcessGroupsGrid.registerPlugin(new Slick.AutoTooltips());
-            clusterProcessGroupsGrid.setSortColumn('node', true);
-            clusterProcessGroupsGrid.onSort.subscribe(function (e, args) {
-                sort('cluster-process-group-summary-table', {
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, clusterProcessGroupsData);
-            });
-    
-            // wire up the dataview to the grid
-            clusterProcessGroupsData.onRowCountChanged.subscribe(function (e, args) {
-                clusterProcessGroupsGrid.updateRowCount();
-                clusterProcessGroupsGrid.render();
-            });
-            clusterProcessGroupsData.onRowsChanged.subscribe(function (e, args) {
-                clusterProcessGroupsGrid.invalidateRows(args.rows);
-                clusterProcessGroupsGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#cluster-process-group-summary-table').data('gridInstance', clusterProcessGroupsGrid);
-    
-            // define the column model for the summary table
-            var inputPortsColumnModel = [
-                moreDetailsColumn,
-                nameColumn,
-                runStatusColumn,
-                outputColumn
-            ];
-    
-            // add an action column if appropriate
-            if (isClustered || isInShell) {
-                // define how the column is formatted
-                var inputPortActionFormatter = function (row, cell, value, columnDef, dataContext) {
-                    var markup = '';
-    
-                    if (isInShell) {
-                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToInputPort')+'" style="margin-right: 3px;"></div>';
-                    }
-    
-                    if (isClustered) {
-                      markup += '<div class="pointer show-cluster-input-port-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewInputPort')+'"></div>';
-                    }
-    
-                    return markup;
-                };
-    
-                // define the action column for clusters and within the shell
-                inputPortsColumnModel.push({
-                    id: 'actions',
-                    name: '&nbsp;',
-                    formatter: inputPortActionFormatter,
-                    resizable: false,
-                    sortable: false,
-                    width: 75,
-                    maxWidth: 75
-                });
-            }
-    
-            // initialize the input ports table
-            var inputPortsOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false,
-                multiSelect: false,
-                rowHeight: 24
-            };
-    
-            // initialize the dataview
-            var inputPortsData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            inputPortsData.setItems([]);
-            inputPortsData.setFilterArgs({
-                searchString: '',
-                property: 'name'
-            });
-            inputPortsData.setFilter(filter);
-    
-            // initialize the sort
-            sort('input-port-summary-table', {
-                columnId: 'name',
-                sortAsc: true
-            }, inputPortsData);
-    
-            // initialize the grid
-            var inputPortsGrid = new Slick.Grid('#input-port-summary-table', inputPortsData, inputPortsColumnModel, inputPortsOptions);
-            inputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
-            inputPortsGrid.registerPlugin(new Slick.AutoTooltips());
-            inputPortsGrid.setSortColumn('name', true);
-            inputPortsGrid.onSort.subscribe(function (e, args) {
-                sort('input-port-summary-table', {
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, inputPortsData);
-            });
-    
-            // configure a click listener
-            inputPortsGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-    
-                // get the node at this row
-                var item = inputPortsData.getItem(args.row);
-    
-                // determine the desired action
-                if (inputPortsGrid.getColumns()[args.cell].id === 'actions') {
-                    if (target.hasClass('go-to')) {
-                        goTo(item.groupId, item.id);
-                    } else if (target.hasClass('show-cluster-input-port-summary')) {
-                        // load the cluster processor summary
-                        loadClusterInputPortSummary(item.groupId, item.id);
-    
-                        // hide the summary loading indicator
-                        $('#summary-loading-container').hide();
-    
-                        // show the dialog
-                        $('#cluster-input-port-summary-dialog').modal('show');
-    
-                        // resize after opening
-                        clusterInputPortsGrid.resizeCanvas();
-                    }
-                }
-            });
-    
-            // wire up the dataview to the grid
-            inputPortsData.onRowCountChanged.subscribe(function (e, args) {
-                inputPortsGrid.updateRowCount();
-                inputPortsGrid.render();
-    
-                // update the total number of displayed processors, if necessary
-                if ($('#input-port-summary-table').is(':visible')) {
-                  $('#display-items').text(nfCommon.formatInteger(args.current));
-                }
-            });
-            inputPortsData.onRowsChanged.subscribe(function (e, args) {
-                inputPortsGrid.invalidateRows(args.rows);
-                inputPortsGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#input-port-summary-table').data('gridInstance', inputPortsGrid).on('mouseenter', 'div.slick-cell', function (e) {
-                var bulletinIcon = $(this).find('div.has-bulletins');
-                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                    var portId = $(this).find('span.row-id').text();
-    
-                    // get the status item
-                    var item = inputPortsData.getItemById(portId);
-    
-                    // format the tooltip
-                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
-                  var tooltip = nfCommon.formatUnorderedList(bulletins);
-    
-                    // show the tooltip
-                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                            content: tooltip,
-                            position: {
-                                container: $('#summary'),
-                                at: 'bottom right',
-                                my: 'top left',
-                                adjust: {
-                                    x: 4,
-                                    y: 4
-                                }
-                            }
-                        }));
-                    }
-                }
-            });
-    
-            // initialize the cluster input port summary dialog
-            $('#cluster-input-port-summary-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-              headerText: nf._.msg('nf-summary-table.ClusterInputPortSummary'),
-                buttons: [{
-                  buttonText: nf._.msg('nf-summary-table.Close'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // clear the cluster processor summary dialog
-                            $('#cluster-input-port-id').text('');
-                            $('#cluster-input-port-name').text('');
-    
-                            // close the dialog
-                            this.modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // show the summary loading container
-                        $('#summary-loading-container').show();
-                    }
-                }
-            });
-    
-            // cluster input port refresh
-            $('#cluster-input-port-refresh-button').click(function () {
-                loadClusterInputPortSummary($('#cluster-input-port-group-id').text(), $('#cluster-input-port-id').text());
-            });
-    
-            // initialize the cluster input port column model
-            var clusterInputPortsColumnModel = [
-              {id: 'node', field: 'node', name: nf._.msg('nf-summary-table.Node'), sortable: true, resizable: true},
-                runStatusColumn,
-                outputColumn
-            ];
-    
-            // initialize the options for the cluster input port table
-            var clusterInputPortsOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false,
-                multiSelect: false,
-                rowHeight: 24
-            };
-    
-            // initialize the dataview
-            var clusterInputPortsData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            clusterInputPortsData.setItems([]);
-    
-            // initialize the sort
-            sort('cluster-input-port-summary-table', {
-                columnId: 'node',
-                sortAsc: true
-            }, clusterInputPortsData);
-    
-            // initialize the grid
-            var clusterInputPortsGrid = new Slick.Grid('#cluster-input-port-summary-table', clusterInputPortsData, clusterInputPortsColumnModel, clusterInputPortsOptions);
-            clusterInputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
-            clusterInputPortsGrid.registerPlugin(new Slick.AutoTooltips());
-            clusterInputPortsGrid.setSortColumn('node', true);
-            clusterInputPortsGrid.onSort.subscribe(function (e, args) {
-                sort('cluster-input-port-summary-table', {
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, clusterInputPortsData);
-            });
-    
-            // wire up the dataview to the grid
-            clusterInputPortsData.onRowCountChanged.subscribe(function (e, args) {
-                clusterInputPortsGrid.updateRowCount();
-                clusterInputPortsGrid.render();
-            });
-            clusterInputPortsData.onRowsChanged.subscribe(function (e, args) {
-                clusterInputPortsGrid.invalidateRows(args.rows);
-                clusterInputPortsGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#cluster-input-port-summary-table').data('gridInstance', clusterInputPortsGrid);
-    
-            // define the column model for the summary table
-            var outputPortsColumnModel = [
-                moreDetailsColumn,
-                nameColumn,
-                runStatusColumn,
-                inputColumn
-            ];
-    
-            // add an action column if appropriate
-            if (isClustered || isInShell) {
-                // define how the column is formatted
-                var outputPortActionFormatter = function (row, cell, value, columnDef, dataContext) {
-                    var markup = '';
-    
-                    if (isInShell) {
-                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToOutputPort')+'" style="margin-right: 3px;"></div>';
-                    }
-    
-                    if (isClustered) {
-                      markup += '<div class="pointer show-cluster-output-port-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewOutputPort')+'"></div>';
-                    }
-    
-                    return markup;
-                };
-    
-                // define the action column for clusters and within the shell
-                outputPortsColumnModel.push({
-                    id: 'actions',
-                    name: '&nbsp;',
-                    formatter: outputPortActionFormatter,
-                    resizable: false,
-                    sortable: false,
-                    width: 75,
-                    maxWidth: 75
-                });
-            }
-    
-            // initialize the input ports table
-            var outputPortsOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false,
-                multiSelect: false,
-                rowHeight: 24
-            };
-    
-            // initialize the dataview
-            var outputPortsData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            outputPortsData.setItems([]);
-            outputPortsData.setFilterArgs({
-                searchString: '',
-                property: 'name'
-            });
-            outputPortsData.setFilter(filter);
-    
-            // initialize the sort
-            sort('output-port-summary-table', {
-                columnId: 'name',
-                sortAsc: true
-            }, outputPortsData);
-    
-            // initialize the grid
-            var outputPortsGrid = new Slick.Grid('#output-port-summary-table', outputPortsData, outputPortsColumnModel, outputPortsOptions);
-            outputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
-            outputPortsGrid.registerPlugin(new Slick.AutoTooltips());
-            outputPortsGrid.setSortColumn('name', true);
-            outputPortsGrid.onSort.subscribe(function (e, args) {
-                sort('output-port-summary-table', {
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, outputPortsData);
-            });
-    
-            // configure a click listener
-            outputPortsGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-    
-                // get the node at this row
-                var item = outputPortsData.getItem(args.row);
-    
-                // determine the desired action
-                if (outputPortsGrid.getColumns()[args.cell].id === 'actions') {
-                    if (target.hasClass('go-to')) {
-                        goTo(item.groupId, item.id);
-                    } else if (target.hasClass('show-cluster-output-port-summary')) {
-                        // load the cluster processor summary
-                        loadClusterOutputPortSummary(item.groupId, item.id);
-    
-                        // hide the summary loading indicator
-                        $('#summary-loading-container').hide();
-    
-                        // show the dialog
-                        $('#cluster-output-port-summary-dialog').modal('show');
-    
-                        // resize after opening
-                        clusterOutputPortsGrid.resizeCanvas();
-                    }
-                }
-            });
-    
-            // wire up the dataview to the grid
-            outputPortsData.onRowCountChanged.subscribe(function (e, args) {
-                outputPortsGrid.updateRowCount();
-                outputPortsGrid.render();
-    
-                // update the total number of displayed processors, if necessary
-                if ($('#output-port-summary-table').is(':visible')) {
-                  $('#display-items').text(nfCommon.formatInteger(args.current));
-                }
-            });
-            outputPortsData.onRowsChanged.subscribe(function (e, args) {
-                outputPortsGrid.invalidateRows(args.rows);
-                outputPortsGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#output-port-summary-table').data('gridInstance', outputPortsGrid).on('mouseenter', 'div.slick-cell', function (e) {
-                var bulletinIcon = $(this).find('div.has-bulletins');
-                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                    var portId = $(this).find('span.row-id').text();
-    
-                    // get the status item
-                    var item = outputPortsData.getItemById(portId);
-    
-                    // format the tooltip
-                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
-                  var tooltip = nfCommon.formatUnorderedList(bulletins);
-    
-                    // show the tooltip
-                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                            content: tooltip,
-                            position: {
-                                container: $('#summary'),
-                                at: 'bottom right',
-                                my: 'top left',
-                                adjust: {
-                                    x: 4,
-                                    y: 4
-                                }
-                            }
-                        }));
-                    }
-                }
-            });
-    
-            // initialize the cluster output port summary dialog
-            $('#cluster-output-port-summary-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-              headerText: nf._.msg('nf-summary-table.ClusterOutPutPortSummary'),
-                buttons: [{
-                  buttonText: nf._.msg('nf-summary-table.Close'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // clear the cluster processor summary dialog
-                            $('#cluster-output-port-id').text('');
-                            $('#cluster-output-port-name').text('');
-    
-                            // close the dialog
-                            this.modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // show the summary loading container
-                        $('#summary-loading-container').show();
-                    }
-                }
-            });
-    
-            // cluster output port refresh
-            $('#cluster-output-port-refresh-button').click(function () {
-                loadClusterOutputPortSummary($('#cluster-output-port-group-id').text(), $('#cluster-output-port-id').text());
-            });
-    
-            // initialize the cluster output port column model
-            var clusterOutputPortsColumnModel = [
-              {id: 'node', field: 'node', name: nf._.msg('nf-summary-table.Node'), sortable: true, resizable: true},
-                runStatusColumn,
-                inputColumn
-            ];
-    
-            // initialize the options for the cluster output port table
-            var clusterOutputPortsOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false,
-                multiSelect: false,
-                rowHeight: 24
-            };
-    
-            // initialize the dataview
-            var clusterOutputPortsData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            clusterOutputPortsData.setItems([]);
-    
-            // initialize the sort
-            sort('cluster-output-port-summary-table', {
-                columnId: 'node',
-                sortAsc: true
-            }, clusterOutputPortsData);
-    
-            // initialize the grid
-            var clusterOutputPortsGrid = new Slick.Grid('#cluster-output-port-summary-table', clusterOutputPortsData, clusterOutputPortsColumnModel, clusterOutputPortsOptions);
-            clusterOutputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
-            clusterOutputPortsGrid.registerPlugin(new Slick.AutoTooltips());
-            clusterOutputPortsGrid.setSortColumn('node', true);
-            clusterOutputPortsGrid.onSort.subscribe(function (e, args) {
-                sort('cluster-output-port-summary-table', {
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, clusterOutputPortsData);
-            });
-    
-            // wire up the dataview to the grid
-            clusterOutputPortsData.onRowCountChanged.subscribe(function (e, args) {
-                clusterOutputPortsGrid.updateRowCount();
-                clusterOutputPortsGrid.render();
-            });
-            clusterOutputPortsData.onRowsChanged.subscribe(function (e, args) {
-                clusterOutputPortsGrid.invalidateRows(args.rows);
-                clusterOutputPortsGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#cluster-output-port-summary-table').data('gridInstance', clusterOutputPortsGrid);
-    
-            // define a custom formatter for the run status column
-            var transmissionStatusFormatter = function (row, cell, value, columnDef, dataContext) {
-                var activeThreadCount = '';
-              if (nfCommon.isDefinedAndNotNull(dataContext.activeThreadCount) && dataContext.activeThreadCount > 0) {
-                    activeThreadCount = '(' + dataContext.activeThreadCount + ')';
-                }
-    
-                // determine what to put in the mark up
-                var transmissionClass = 'invalid fa fa-warning';
-                var transmissionLabel = 'Invalid';
-                if (value === 'Transmitting') {
-                    transmissionClass = 'transmitting fa fa-bullseye';
-                    transmissionLabel = value;
-                } else {
-                    transmissionClass = 'not-transmitting icon icon-transmit-false';
-                    transmissionLabel = 'Not Transmitting';
-                }
-    
-                // generate the mark up
-              var formattedValue = '<div layout="row"><div class="' + transmissionClass + '"></div>';
-              return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + transmissionLabel + '</div><div style="float: left; margin-left: 4px;">' + nfCommon.escapeHtml(activeThreadCount) + '</div></div>';
-            };
-    
-            var transmissionStatusColumn = {
-                id: 'transmissionStatus',
-                field: 'transmissionStatus',
-              name: nf._.msg('nf-summary-table.Transmitting'),
-                formatter: transmissionStatusFormatter,
-                sortable: true,
-                resizable: true
-            };
-            var targetUriColumn = {
-                id: 'targetUri',
-                field: 'targetUri',
-              name: nf._.msg('nf-summary-table.Target URI'),
-                sortable: true,
-                resizable: true
-            };
-    
-            // define the column model for the summary table
-            var remoteProcessGroupsColumnModel = [
-                {
-                    id: 'moreDetails',
-                    field: 'moreDetails',
-                    name: '&nbsp;',
-                    resizable: false,
-                    formatter: moreDetails,
-                    sortable: true,
-                    width: 50,
-                    maxWidth: 50,
-                  toolTip: nf._.msg('nf-summary-table.Message4')
-                },
-                nameColumn,
-                targetUriColumn,
-                transmissionStatusColumn,
-                sentColumn,
-                receivedColumn
-            ];
-    
-            // add an action column if appropriate
-          if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
-                // define how the column is formatted
-                var remoteProcessGroupActionFormatter = function (row, cell, value, columnDef, dataContext) {
-                    var markup = '';
-    
-                    if (isInShell) {
-                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToProcessorGroup')+'" style="margin-right: 3px;"></div>';
-                    }
-    
-                  if (nfCommon.SUPPORTS_SVG) {
-                      markup += '<div class="pointer show-remote-process-group-status-history fa fa-area-chart" title="'+nf._.msg('nf-summary-table.ViewStatus')+'" style="margin-right: 3px;"></div>';
-                    }
-    
-                    if (isClustered) {
-                      markup += '<div class="pointer show-cluster-remote-process-group-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewRemoteProcessorGroup')+'"></div>';
-                    }
-    
-                    return markup;
-                };
-    
-                // define the action column for clusters and within the shell
-                remoteProcessGroupsColumnModel.push({
-                    id: 'actions',
-                    name: '&nbsp;',
-                    formatter: remoteProcessGroupActionFormatter,
-                    resizable: false,
-                    sortable: false,
-                    width: 75,
-                    maxWidth: 75
-                });
-            }
-    
-            // initialize the remote process groups table
-            var remoteProcessGroupsOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false,
-                multiSelect: false,
-                rowHeight: 24
-            };
-    
-            // initialize the dataview
-            var remoteProcessGroupsData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            remoteProcessGroupsData.setItems([]);
-            remoteProcessGroupsData.setFilterArgs({
-                searchString: '',
-                property: 'name'
-            });
-            remoteProcessGroupsData.setFilter(filter);
-    
-            // initialize the sort
-            sort('remote-process-group-summary-table', {
-                columnId: 'name',
-                sortAsc: true
-            }, remoteProcessGroupsData);
-    
-            // initialize the grid
-            var remoteProcessGroupsGrid = new Slick.Grid('#remote-process-group-summary-table', remoteProcessGroupsData, remoteProcessGroupsColumnModel, remoteProcessGroupsOptions);
-            remoteProcessGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
-            remoteProcessGroupsGrid.registerPlugin(new Slick.AutoTooltips());
-            remoteProcessGroupsGrid.setSortColumn('name', true);
-            remoteProcessGroupsGrid.onSort.subscribe(function (e, args) {
-                sort('remote-process-group-summary-table', {
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, remoteProcessGroupsData);
-            });
-    
-            // configure a click listener
-            remoteProcessGroupsGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-    
-                // get the node at this row
-                var item = remoteProcessGroupsData.getItem(args.row);
-    
-                // determine the desired action
-                if (remoteProcessGroupsGrid.getColumns()[args.cell].id === 'actions') {
-                    if (target.hasClass('go-to')) {
-                        goTo(item.groupId, item.id);
-                    } else if (target.hasClass('show-remote-process-group-status-history')) {
-                      nfStatusHistory.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);
-    
-                        // hide the summary loading indicator
-                        $('#summary-loading-container').hide();
-    
-                        // show the dialog
-                        $('#cluster-remote-process-group-summary-dialog').modal('show');
-    
-                        // resize after opening
-                        clusterRemoteProcessGroupsGrid.resizeCanvas();
-                    }
-                }
-            });
-    
-            // wire up the dataview to the grid
-            remoteProcessGroupsData.onRowCountChanged.subscribe(function (e, args) {
-                remoteProcessGroupsGrid.updateRowCount();
-                remoteProcessGroupsGrid.render();
-    
-                // update the total number of displayed processors, if necessary
-                if ($('#remote-process-group-summary-table').is(':visible')) {
-                  $('#displayed-items').text(nfCommon.formatInteger(args.current));
-                }
-            });
-            remoteProcessGroupsData.onRowsChanged.subscribe(function (e, args) {
-                remoteProcessGroupsGrid.invalidateRows(args.rows);
-                remoteProcessGroupsGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#remote-process-group-summary-table').data('gridInstance', remoteProcessGroupsGrid).on('mouseenter', 'div.slick-cell', function (e) {
-                var bulletinIcon = $(this).find('div.has-bulletins');
-                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
-                    var remoteProcessGroupId = $(this).find('span.row-id').text();
-    
-                    // get the status item
-                    var item = remoteProcessGroupsData.getItemById(remoteProcessGroupId);
-    
-                    // format the tooltip
-                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
-                  var tooltip = nfCommon.formatUnorderedList(bulletins);
-    
-                    // show the tooltip
-                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
-                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
-                            content: tooltip,
-                            position: {
-                                container: $('#summary'),
-                                at: 'bottom right',
-                                my: 'top left',
-                                adjust: {
-                                    x: 4,
-                                    y: 4
-                                }
-                            }
-                        }));
-                    }
-                }
-            });
-    
-            // initialize the cluster remote process group summary dialog
-            $('#cluster-remote-process-group-summary-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-              headerText: nf._.msg('nf-summary-table.ClusterRemoteProcessGroupSummary'),
-                buttons: [{
-                  buttonText: nf._.msg('nf-summary-table.Close'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            // clear the cluster processor summary dialog
-                            $('#cluster-remote-process-group-id').text('');
-                            $('#cluster-remote-process-group-name').text('');
-    
-                            // close the dialog
-                            this.modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // show the summary loading container
-                        $('#summary-loading-container').show();
-                    }
-                }
-            });
-    
-            // cluster remote process group refresh
-            $('#cluster-remote-process-group-refresh-button').click(function () {
-                loadClusterRemoteProcessGroupSummary($('#cluster-remote-process-group-group-id').text(), $('#cluster-remote-process-group-id').text());
-            });
-    
-            // initialize the cluster remote process group column model
-            var clusterRemoteProcessGroupsColumnModel = [
-              {id: 'node', field: 'node', name: nf._.msg('nf-summary-table.Node'), sortable: true, resizable: true},
-                targetUriColumn,
-                transmissionStatusColumn,
-                sentColumn,
-                receivedColumn
-            ];
-    
-            // initialize the options for the cluster remote process group table
-            var clusterRemoteProcessGroupsOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: false,
-                enableColumnReorder: false,
-                autoEdit: false,
-                rowHeight: 24
-            };
-    
-            // initialize the dataview
-            var clusterRemoteProcessGroupsData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            clusterRemoteProcessGroupsData.setItems([]);
-    
-            // initialize the sort
-            sort('cluster-remote-process-group-summary-table', {
-                columnId: 'node',
-                sortAsc: true
-            }, clusterRemoteProcessGroupsData);
-    
-            // initialize the grid
-            var clusterRemoteProcessGroupsGrid = new Slick.Grid('#cluster-remote-process-group-summary-table', clusterRemoteProcessGroupsData, clusterRemoteProcessGroupsColumnModel, clusterRemoteProcessGroupsOptions);
-            clusterRemoteProcessGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
-            clusterRemoteProcessGroupsGrid.registerPlugin(new Slick.AutoTooltips());
-            clusterRemoteProcessGroupsGrid.setSortColumn('node', true);
-            clusterRemoteProcessGroupsGrid.onSort.subscribe(function (e, args) {
-                sort('cluster-remote-process-group-summary-table', {
-                    columnId: args.sortCol.field,
-                    sortAsc: args.sortAsc
-                }, clusterRemoteProcessGroupsData);
-            });
-    
-            // wire up the dataview to the grid
-            clusterRemoteProcessGroupsData.onRowCountChanged.subscribe(function (e, args) {
-                clusterRemoteProcessGroupsGrid.updateRowCount();
-                clusterRemoteProcessGroupsGrid.render();
-            });
-            clusterRemoteProcessGroupsData.onRowsChanged.subscribe(function (e, args) {
-                clusterRemoteProcessGroupsGrid.invalidateRows(args.rows);
-                clusterRemoteProcessGroupsGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#cluster-remote-process-group-summary-table').data('gridInstance', clusterRemoteProcessGroupsGrid);
-    
-            // show the dialog when clicked
-            $('#system-diagnostics-link').click(function () {
-                refreshSystemDiagnostics().done(function () {
-                    // hide the summary loading container
-                    $('#summary-loading-container').hide();
-    
-                    // show the dialog
-                    $('#system-diagnostics-dialog').modal('show');
-                });
-            });
-    
-            // initialize the summary tabs
-            $('#system-diagnostics-tabs').tabbs({
-                tabStyle: 'tab',
-                selectedTabStyle: 'selected-tab',
-                scrollableTabContentStyle: 'scrollable',
-                tabs: [{
-                  name: nf._.msg('nf-summary-table.JVM'),
-                    tabContentId: 'jvm-tab-content'
-                }, {
-                  name: nf._.msg('nf-summary-table.System'),
-                    tabContentId: 'system-tab-content'
-              }, {
-                  name: 'Version',
-                  tabContentId: 'version-tab-content'
-                }]
-            });
-    
-            // initialize the system diagnostics dialog
-            $('#system-diagnostics-dialog').modal({
-                scrollableContentStyle: 'scrollable',
-              headerText: nf._.msg('nf-summary-table.SystemDiagnostics'),
-                buttons: [{
-                  buttonText: nf._.msg('nf-summary-table.Close'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            this.modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // show the summary loading container
-                        $('#summary-loading-container').show();
-                    },
-                    open: function () {
-                      nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                    }
-                }
-            });
-    
-            // refresh the system diagnostics when clicked
-            $('#system-diagnostics-refresh-button').click(function () {
-                refreshSystemDiagnostics();
-            });
-    
-            // initialize the total number of processors
-            $('#total-items').text('0');
-        };
-    
-        var sortState = {};
-    
-        /**
-         * Sorts the specified data using the specified sort details.
-         *
-         * @param {string} tableId
-         * @param {object} sortDetails
-         * @param {object} data
-         */
-        var sort = function (tableId, sortDetails, data) {
-            // ensure there is a state object for this table
-          if (nfCommon.isUndefined(sortState[tableId])) {
-                sortState[tableId] = {};
-            }
-    
-            // defines a function for sorting
-            var comparer = function (a, b) {
-                if (sortDetails.columnId === 'moreDetails') {
-                    var aBulletins = 0;
-                  if (!nfCommon.isEmpty(a.bulletins)) {
-                        aBulletins = a.bulletins.length;
-                    }
-                    var bBulletins = 0;
-                  if (!nfCommon.isEmpty(b.bulletins)) {
-                        bBulletins = b.bulletins.length;
-                    }
-                    return aBulletins - bBulletins;
-                } else if (sortDetails.columnId === 'runStatus' || sortDetails.columnId === 'transmissionStatus') {
-                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                    if (aString === bString) {
-                        return a.activeThreadCount - b.activeThreadCount;
-                    } else {
-                        return aString === bString ? 0 : aString > bString ? 1 : -1;
-                    }
-                } else if (sortDetails.columnId === 'queued') {
-                    var mod = sortState[tableId].count % 4;
-                    if (mod < 2) {
-                        $('#' + tableId + ' span.queued-title').addClass('sorted');
-                      var aQueueCount = nfCommon.parseCount(a['queuedCount']);
-                      var bQueueCount = nfCommon.parseCount(b['queuedCount']);
-                        return aQueueCount - bQueueCount;
-                    } else {
-                        $('#' + tableId + ' span.queued-size-title').addClass('sorted');
-                      var aQueueSize = nfCommon.parseSize(a['queuedSize']);
-                      var bQueueSize = nfCommon.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 = nfCommon.isDefinedAndNotNull(a['percentUseCount']) ? a['percentUseCount'] : -1;
-                      var bPercentUseObject = nfCommon.isDefinedAndNotNull(b['percentUseCount']) ? b['percentUseCount'] : -1;
-                      return aPercentUseObject - bPercentUseObject;
-                  } else {
-                      $('#' + tableId + ' span.backpressure-data-size-title').addClass('sorted');
-                      var aPercentUseDataSize = nfCommon.isDefinedAndNotNull(a['percentUseBytes']) ? a['percentUseBytes'] : -1;
-                      var bPercentUseDataSize = nfCommon.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') {
-                  var aSplit = a[sortDetails.columnId].split(/\(([^)]+)\)/);
-                  var bSplit = b[sortDetails.columnId].split(/\(([^)]+)\)/);
-                    var mod = sortState[tableId].count % 4;
-                    if (mod < 2) {
-                        $('#' + tableId + ' span.' + sortDetails.columnId + '-title').addClass('sorted');
-                      var aCount = nfCommon.parseCount(aSplit[0]);
-                      var bCount = nfCommon.parseCount(bSplit[0]);
-                        return aCount - bCount;
-                    } else {
-                        $('#' + tableId + ' span.' + sortDetails.columnId + '-size-title').addClass('sorted');
-                      var aSize = nfCommon.parseSize(aSplit[1]);
-                      var bSize = nfCommon.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 = nfCommon.parseSize(a['read']);
-                      var bReadSize = nfCommon.parseSize(b['read']);
-                        return aReadSize - bReadSize;
-                    } else {
-                        $('#' + tableId + ' span.written-title').addClass('sorted');
-                      var aWriteSize = nfCommon.parseSize(a['written']);
-                      var bWriteSize = nfCommon.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 = nfCommon.parseCount(a['tasks']);
-                      var bTasks = nfCommon.parseCount(b['tasks']);
-                        return aTasks - bTasks;
-                    } else {
-                        $('#' + tableId + ' span.time-title').addClass('sorted');
-                      var aDuration = nfCommon.parseDuration(a['tasksDuration']);
-                      var bDuration = nfCommon.parseDuration(b['tasksDuration']);
-                        return aDuration - bDuration;
-                    }
-                } else {
-                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                    return aString === bString ? 0 : aString > bString ? 1 : -1;
-                }
-            };
-    
-            // remove previous sort indicators
-            $('#' + tableId + ' span.queued-title').removeClass('sorted');
-            $('#' + tableId + ' span.queued-size-title').removeClass('sorted');
-          $('#' + tableId + ' span.backpressure-object-title').removeClass('sorted');
-          $('#' + tableId + ' span.backpressure-data-size-title').removeClass('sorted');
-            $('#' + tableId + ' span.input-title').removeClass('sorted');
-            $('#' + tableId + ' span.input-size-title').removeClass('sorted');
-            $('#' + tableId + ' span.output-title').removeClass('sorted');
-            $('#' + tableId + ' span.output-size-title').removeClass('sorted');
-            $('#' + tableId + ' span.read-title').removeClass('sorted');
-            $('#' + tableId + ' span.written-title').removeClass('sorted');
-            $('#' + tableId + ' span.time-title').removeClass('sorted');
-            $('#' + tableId + ' span.tasks-title').removeClass('sorted');
-            $('#' + tableId + ' span.sent-title').removeClass('sorted');
-            $('#' + tableId + ' span.sent-size-title').removeClass('sorted');
-            $('#' + tableId + ' span.received-title').removeClass('sorted');
-            $('#' + tableId + ' span.received-size-title').removeClass('sorted');
-            $('#' + tableId + ' span.transferred-title').removeClass('sorted');
-            $('#' + tableId + ' span.transferred-size-title').removeClass('sorted');
-    
-            // update/reset the count as appropriate
-            if (sortState[tableId].prevColumn !== sortDetails.columnId) {
-                sortState[tableId].count = 0;
-            } else {
-                sortState[tableId].count++;
-            }
-    
-            // perform the sort
-            data.sort(comparer, sortDetails.sortAsc);
-    
-            // record the previous table and sorted column
-            sortState[tableId].prevColumn = sortDetails.columnId;
-        };
-    
-        /**
-         * Performs the processor 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;
-        };
-    
-        /**
-         * Refreshes the system diagnostics.
-         */
-        var refreshSystemDiagnostics = function () {
-            var systemDiagnosticsUri = config.urls.systemDiagnostics;
-    
-            // add the parameter if appropriate
-            var parameters = {};
-          if (!nfCommon.isNull(clusterNodeId)) {
-                parameters['clusterNodeId'] = clusterNodeId;
-            }
-    
-            // update the status uri if appropriate
-            if (!$.isEmptyObject(parameters)) {
-                systemDiagnosticsUri += '?' + $.param(parameters);
-            }
-    
-            return $.ajax({
-                type: 'GET',
-                url: systemDiagnosticsUri,
-                dataType: 'json'
-            }).done(function (response) {
-                var systemDiagnostics = response.systemDiagnostics;
-                var aggregateSnapshot = systemDiagnostics.aggregateSnapshot;
-    
-                // heap
-                $('#max-heap').text(aggregateSnapshot.maxHeap);
-                $('#total-heap').text(aggregateSnapshot.totalHeap);
-                $('#used-heap').text(aggregateSnapshot.usedHeap);
-                $('#free-heap').text(aggregateSnapshot.freeHeap);
-    
-                // ensure the heap utilization could be calculated
-              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.heapUtilization)) {
-                    $('#utilization-heap').text('(' + aggregateSnapshot.heapUtilization + ')');
-                } else {
-                    $('#utilization-heap').text('');
-                }
-    
-                // non heap
-                $('#max-non-heap').text(aggregateSnapshot.maxNonHeap);
-                $('#total-non-heap').text(aggregateSnapshot.totalNonHeap);
-                $('#used-non-heap').text(aggregateSnapshot.usedNonHeap);
-                $('#free-non-heap').text(aggregateSnapshot.freeNonHeap);
-    
-                // enure the non heap utilization could be calculated
-              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.nonHeapUtilization)) {
-                    $('#utilization-non-heap').text('(' + aggregateSnapshot.nonHeapUtilization + ')');
-                } else {
-                    $('#utilization-non-heap').text('');
-                }
-    
-                // garbage collection
-                var garbageCollectionContainer = $('#garbage-collection-table tbody').empty();
-              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.garbageCollection)) {
-                  // sort the garbage collections
-                  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
-                  $.each(sortedGarbageCollection, function (_, garbageCollection) {
-                        addGarbageCollection(garbageCollectionContainer, garbageCollection);
-                    });
-              }
-              
-              // uptime
-              $('#uptime').text(aggregateSnapshot.uptime);
-    
-                // available processors
-                $('#available-processors').text(aggregateSnapshot.availableProcessors);
-    
-                // load
-              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.processorLoadAverage)) {
-                  $('#processor-load-average').text(nfCommon.formatFloat(aggregateSnapshot.processorLoadAverage));
-                } else {
-                  $('#processor-load-average').html(nfCommon.formatValue(aggregateSnapshot.processorLoadAverage));
-                }
-    
-              // flow file storage usage
-                var flowFileRepositoryStorageUsageContainer = $('#flow-file-repository-storage-usage-container').empty();
-                addStorageUsage(flowFileRepositoryStorageUsageContainer, aggregateSnapshot.flowFileRepositoryStorageUsage);
-    
-              // content repo storage usage
-                var contentRepositoryUsageContainer = $('#content-repository-storage-usage-container').empty();
-              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.contentRepositoryStorageUsage)) {
-                  // sort the content repos
-                  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
-                  $.each(sortedContentRepositoryStorageUsage, function (_, contentRepository) {
-                        addStorageUsage(contentRepositoryUsageContainer, contentRepository);
-                    });
-              }
-  
-              // Version
-              var versionSpanSelectorToFieldMap = {
-                  '#version-nifi': aggregateSnapshot.versionInfo.niFiVersion,
-                  '#version-build-tag': aggregateSnapshot.versionInfo.buildTag,
-                  '#version-build-timestamp': aggregateSnapshot.versionInfo.buildTimestamp,
-                  '#version-build-branch': aggregateSnapshot.versionInfo.buildBranch,
-                  '#version-build-revision': aggregateSnapshot.versionInfo.buildRevision,
-                  '#version-java-version': aggregateSnapshot.versionInfo.javaVersion,
-                  '#version-java-vendor': aggregateSnapshot.versionInfo.javaVendor,
-                  '#version-os-name': aggregateSnapshot.versionInfo.osName,
-                  '#version-os-version': aggregateSnapshot.versionInfo.osVersion,
-                  '#version-os-arch': aggregateSnapshot.versionInfo.osArchitecture
-              };
-              for (var versionSpanSelector in versionSpanSelectorToFieldMap) {
-                  var dataField = versionSpanSelectorToFieldMap[versionSpanSelector];
-                  if (dataField) {
-                      $(versionSpanSelector).text(dataField);
-                  } else {
-                      $(versionSpanSelector).text('(not available)').addClass('unset');
-                  }
-              }
-    
-                // update the stats last refreshed timestamp
-                $('#system-diagnostics-last-refreshed').text(aggregateSnapshot.statsLastRefreshed);
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Adds a new garbage collection to the dialog
-         * @param {type} container
-         * @param {type} garbageCollection
-         */
-        var addGarbageCollection = function (container, garbageCollection) {
-            var nameTr = $('<tr></tr>').appendTo(container);
-          $('<td class="setting-name"></td>').text(garbageCollection.name + ':').appendTo(nameTr);
-            var valTr = $('<tr></tr>').appendTo(container);
-          $('<td></td>').append($('<b></b>').text(garbageCollection.collectionCount + nf._.msg('nf-summary-table.times') + '(' + garbageCollection.collectionTime + ')')).appendTo(valTr);
-            $('<tr></tr>').text(' ').appendTo(container);
-        };
-    
-        /**
-         * Adds a new storage usage process bar to the dialog.
-         *
-         * @argument {jQuery} container     The container to add the storage usage to.
-         * @argument {object} storageUsage     The storage usage.
-         */
-        var addStorageUsage = function (container, storageUsage) {
-            var total = parseInt(storageUsage.totalSpaceBytes, 10);
-            var used = parseInt(storageUsage.usedSpaceBytes, 10);
-            var storageUsageContainer = $('<div class="storage-usage"></div>').appendTo(container);
-    
-            var storage = $('<div class="storage-identifier setting-name"></div>');
-            storage.text('Usage:');
-          if (nfCommon.isDefinedAndNotNull(storageUsage.identifier)) {
-              storage.text(nf._.msg('nf-summary-table.UsageFor') + storageUsage.identifier + ':');
-            }
-            storage.appendTo(storageUsageContainer);
-    
-          (nfNgBridge.injector.get('$compile')($('<md-progress-linear class="md-hue-2" md-mode="determinate" value="' + (used / total) * 100 + '" aria-label="FlowFile Repository Storage Usage"></md-progress-linear>'))(nfNgBridge.rootScope)).appendTo(storageUsageContainer);
-    
-            var usageDetails = $('<div class="storage-usage-details"></div>').text(' (' + storageUsage.usedSpace + ' of ' + storageUsage.totalSpace + ')').prepend($('<b></b>').text(Math.round((used / total) * 100) + '%'));
-            $('<div class="storage-usage-header"></div>').append(usageDetails).append('<div class="clear"></div>').appendTo(storageUsageContainer);
-        };
-    
-        /**
-         * 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 $('#summary-filter').val();
-        };
-    
-        /**
-         * Poplates the processor summary table using the specified process group.
-         *
-         * @argument {array} processorItems                 The processor data
-         * @argument {array} connectionItems                The connection data
-         * @argument {array} processGroupItems              The process group data
-         * @argument {array} inputPortItems                 The input port data
-         * @argument {array} outputPortItems                The input port data
-         * @argument {array} remoteProcessGroupItems        The remote process group data
-         * @argument {object} aggregateSnapshot            The process group status
-         */
-        var populateProcessGroupStatus = function (processorItems, connectionItems, processGroupItems, inputPortItems, outputPortItems, remoteProcessGroupItems, aggregateSnapshot) {
-            // add the processors to the summary grid
-            $.each(aggregateSnapshot.processorStatusSnapshots, function (i, procStatusEntity) {
-                processorItems.push(procStatusEntity.processorStatusSnapshot);
-            });
-    
-            // add the processors to the summary grid
-            $.each(aggregateSnapshot.connectionStatusSnapshots, function (i, connStatusEntity) {
-                connectionItems.push(connStatusEntity.connectionStatusSnapshot);
-            });
-    
-            // add the input ports to the summary grid
-            $.each(aggregateSnapshot.inputPortStatusSnapshots, function (i, portStatusEntity) {
-                inputPortItems.push(portStatusEntity.portStatusSnapshot);
-            });
-    
-            // add the input ports to the summary grid
-            $.each(aggregateSnapshot.outputPortStatusSnapshots, function (i, portStatusEntity) {
-                outputPortItems.push(portStatusEntity.portStatusSnapshot);
-            });
-    
-            // add the input ports to the summary grid
-            $.each(aggregateSnapshot.remoteProcessGroupStatusSnapshots, function (i, rpgStatusEntity) {
-                remoteProcessGroupItems.push(rpgStatusEntity.remoteProcessGroupStatusSnapshot);
-            });
-    
-            // add the process group status as well
-            processGroupItems.push(aggregateSnapshot);
-    
-            // add any child group's status
-            $.each(aggregateSnapshot.processGroupStatusSnapshots, function (i, childProcessGroupEntity) {
-                populateProcessGroupStatus(processorItems, connectionItems, processGroupItems, inputPortItems, outputPortItems, remoteProcessGroupItems, childProcessGroupEntity.processGroupStatusSnapshot);
-            });
-        };
-    
-        /**
-         * Applies the filter found in the filter expression text field.
-         */
-        var applyFilter = function () {
-            var grid;
-            if ($('#processor-summary-table').is(':visible')) {
-                grid = $('#processor-summary-table').data('gridInstance');
-            } else if ($('#connection-summary-table').is(':visible')) {
-                grid = $('#connection-summary-table').data('gridInstance');
-            } else if ($('#input-port-summary-table').is(':visible')) {
-                grid = $('#input-port-summary-table').data('gridInstance');
-            } else if ($('#output-port-summary-table').is(':visible')) {
-                grid = $('#output-port-summary-table').data('gridInstance');
-            } else if ($('#process-group-summary-table').is(':visible')) {
-                grid = $('#process-group-summary-table').data('gridInstance');
-            } else if ($('#remote-process-group-summary-table').is(':visible')) {
-                grid = $('#remote-process-group-summary-table').data('gridInstance');
-            }
-    
-            // ensure the grid has been initialized
-          if (nfCommon.isDefinedAndNotNull(grid)) {
-                var data = grid.getData();
-    
-                // update the search criteria
-                data.setFilterArgs({
-                    searchString: getFilterText(),
-                    property: $('#summary-filter-type').combo('getSelectedOption').value
-                });
-                data.refresh();
-            }
-        };
-    
-        /**
-         * Loads  the cluster processor details dialog for the specified processor.
-         *
-         * @argument {string} groupId         The group id
-         * @argument {string} processorId     The processor id
-         */
-        var loadClusterProcessorSummary = function (groupId, processorId) {
-            // get the summary
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/flow/processors/' + encodeURIComponent(processorId) + '/status',
-                data: {
-                    nodewise: true
-                },
-                dataType: 'json'
-            }).done(function (response) {
-              if (nfCommon.isDefinedAndNotNull(response.processorStatus)) {
-                    var processorStatus = response.processorStatus;
-    
-                    var clusterProcessorsGrid = $('#cluster-processor-summary-table').data('gridInstance');
-                    var clusterProcessorsData = clusterProcessorsGrid.getData();
-    
-                    var clusterProcessors = [];
-    
-                    // populate the table
-                    $.each(processorStatus.nodeSnapshots, function (i, nodeSnapshot) {
-                        var snapshot = nodeSnapshot.statusSnapshot;
-                        clusterProcessors.push({
-                            id: nodeSnapshot.nodeId,
-                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                            runStatus: snapshot.runStatus,
-                            activeThreadCount: snapshot.activeThreadCount,
-                            input: snapshot.input,
-                            read: snapshot.read,
-                            written: snapshot.written,
-                            output: snapshot.output,
-                            tasks: snapshot.tasks,
-                            tasksDuration: snapshot.tasksDuration
-                        });
-                    });
-    
-                    // update the processors
-                    clusterProcessorsData.setItems(clusterProcessors);
-                    clusterProcessorsData.reSort();
-                    clusterProcessorsGrid.invalidate();
-    
-                    // populate the processor details
-                    $('#cluster-processor-name').text(processorStatus.name).ellipsis();
-                  $('#cluster-processor-type').text(processorStatus.aggregateSnapshot.type).ellipsis();
-                    $('#cluster-processor-id').text(processorStatus.id);
-                    $('#cluster-processor-group-id').text(processorStatus.groupId);
-    
-                    // update the stats last refreshed timestamp
-                    $('#cluster-processor-summary-last-refreshed').text(processorStatus.statsLastRefreshed);
-                }
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Loads the cluster connection details dialog for the specified processor.
-         *
-         * @argument {string} groupId   The group id
-         * @argument {string} connectionId     The connection id
-         */
-        var loadClusterConnectionSummary = function (groupId, connectionId) {
-            // get the summary
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/flow/connections/' + encodeURIComponent(connectionId) + '/status',
-                data: {
-                    nodewise: true
-                },
-                dataType: 'json'
-            }).done(function (response) {
-              if (nfCommon.isDefinedAndNotNull(response.connectionStatus)) {
-                    var connectionStatus = response.connectionStatus;
-    
-                    var clusterConnectionsGrid = $('#cluster-connection-summary-table').data('gridInstance');
-                    var clusterConnectionsData = clusterConnectionsGrid.getData();
-    
-                    var clusterConnections = [];
-    
-                    // populate the table
-                    $.each(connectionStatus.nodeSnapshots, function (i, nodeSnapshot) {
-                        var snapshot = nodeSnapshot.statusSnapshot;
-                        clusterConnections.push({
-                            id: nodeSnapshot.nodeId,
-                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                            input: snapshot.input,
-                            queued: snapshot.queued,
-                            queuedCount: snapshot.queuedCount,
-                            queuedSize: snapshot.queuedSize,
-                          percentUseCount: snapshot.percentUseCount,
-                          percentUseBytes: snapshot.percentUseBytes,
-                            output: snapshot.output
-                        });
-                    });
-    
-                    // update the processors
-                    clusterConnectionsData.setItems(clusterConnections);
-                    clusterConnectionsData.reSort();
-                    clusterConnectionsGrid.invalidate();
-    
-                    // populate the processor details
-                    $('#cluster-connection-name').text(connectionStatus.name).ellipsis();
-                  $('#cluster-connection-type').text('Connection').ellipsis();
-                    $('#cluster-connection-id').text(connectionStatus.id);
-                    $('#cluster-connection-group-id').text(connectionStatus.groupId);
-    
-                    // update the stats last refreshed timestamp
-                    $('#cluster-connection-summary-last-refreshed').text(connectionStatus.statsLastRefreshed);
-                }
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Loads the cluster input port details dialog for the specified processor.
-         *
-         * @argument {string} processGroupId     The process group id
-         */
-        var loadClusterProcessGroupSummary = function (processGroupId) {
-            // get the summary
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupId) + '/status',
-                data: {
-                    nodewise: true,
-                    recursive: false
-                },
-                dataType: 'json'
-            }).done(function (response) {
-              if (nfCommon.isDefinedAndNotNull(response.processGroupStatus)) {
-                    var processGroupStatus = response.processGroupStatus;
-    
-                    var clusterProcessGroupsGrid = $('#cluster-process-group-summary-table').data('gridInstance');
-                    var clusterProcessGroupsData = clusterProcessGroupsGrid.getData();
-    
-                    var clusterProcessGroups = [];
-    
-                    // populate the table
-                    $.each(processGroupStatus.nodeSnapshots, function (i, nodeSnapshot) {
-                        var snapshot = nodeSnapshot.statusSnapshot;
-                        clusterProcessGroups.push({
-                            id: nodeSnapshot.nodeId,
-                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                            activeThreadCount: snapshot.activeThreadCount,
-                            transferred: snapshot.transferred,
-                            input: snapshot.input,
-                            queued: snapshot.queued,
-                            queuedCount: snapshot.queuedCount,
-                            queuedSize: snapshot.queuedSize,
-                            output: snapshot.output,
-                            read: snapshot.read,
-                            written: snapshot.written,
-                            sent: snapshot.sent,
-                            received: snapshot.received
-                        });
-                    });
-    
-                    // update the input ports
-                    clusterProcessGroupsData.setItems(clusterProcessGroups);
-                    clusterProcessGroupsData.reSort();
-                    clusterProcessGroupsGrid.invalidate();
-    
-                    // populate the input port details
-                    $('#cluster-process-group-name').text(processGroupStatus.name).ellipsis();
-                  $('#cluster-process-group-type').text('Process Group').ellipsis();
-                    $('#cluster-process-group-id').text(processGroupStatus.id);
-    
-                    // update the stats last refreshed timestamp
-                    $('#cluster-process-group-summary-last-refreshed').text(processGroupStatus.statsLastRefreshed);
-                }
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Loads the cluster input port details dialog for the specified processor.
-         *
-         * @argument {string} groupId         The group id
-         * @argument {string} inputPortId     The input port id
-         */
-        var loadClusterInputPortSummary = function (groupId, inputPortId) {
-            // get the summary
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/flow/input-ports/' + encodeURIComponent(inputPortId) + '/status',
-                data: {
-                    nodewise: true
-                },
-                dataType: 'json'
-            }).done(function (response) {
-              if (nfCommon.isDefinedAndNotNull(response.portStatus)) {
-                    var inputPortStatus = response.portStatus;
-    
-                    var clusterInputPortsGrid = $('#cluster-input-port-summary-table').data('gridInstance');
-                    var clusterInputPortsData = clusterInputPortsGrid.getData();
-    
-                    var clusterInputPorts = [];
-    
-                    // populate the table
-                    $.each(inputPortStatus.nodeSnapshots, function (i, nodeSnapshot) {
-                        var snapshot = nodeSnapshot.statusSnapshot;
-                        clusterInputPorts.push({
-                            id: nodeSnapshot.nodeId,
-                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                            runStatus: snapshot.runStatus,
-                            activeThreadCount: snapshot.activeThreadCount,
-                            output: snapshot.output
-                        });
-                    });
-    
-                    // update the input ports
-                    clusterInputPortsData.setItems(clusterInputPorts);
-                    clusterInputPortsData.reSort();
-                    clusterInputPortsGrid.invalidate();
-    
-                    // populate the input port details
-                    $('#cluster-input-port-name').text(inputPortStatus.name).ellipsis();
-                  $('#cluster-input-port-type').text('Input Port').ellipsis();
-                    $('#cluster-input-port-id').text(inputPortStatus.id);
-                    $('#cluster-input-port-group-id').text(inputPortStatus.groupId);
-    
-                    // update the stats last refreshed timestamp
-                    $('#cluster-input-port-summary-last-refreshed').text(inputPortStatus.statsLastRefreshed);
-                }
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Loads the cluster output port details dialog for the specified processor.
-         *
-         * @argument {string} groupId          The group id
-         * @argument {string} outputPortId     The row id
-         */
-        var loadClusterOutputPortSummary = function (groupId, outputPortId) {
-            // get the summary
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/flow/output-ports/' + encodeURIComponent(outputPortId) + '/status',
-                data: {
-                    nodewise: true
-                },
-                dataType: 'json'
-            }).done(function (response) {
-              if (nfCommon.isDefinedAndNotNull(response.portStatus)) {
-                    var outputPortStatus = response.portStatus;
-    
-                    var clusterOutputPortsGrid = $('#cluster-output-port-summary-table').data('gridInstance');
-                    var clusterOutputPortsData = clusterOutputPortsGrid.getData();
-    
-                    var clusterOutputPorts = [];
-    
-                    // populate the table
-                    $.each(outputPortStatus.nodeSnapshots, function (i, nodeSnapshot) {
-                        var snapshot = nodeSnapshot.statusSnapshot;
-                        clusterOutputPorts.push({
-                            id: nodeSnapshot.nodeId,
-                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                            runStatus: snapshot.runStatus,
-                            activeThreadCount: snapshot.activeThreadCount,
-                            input: snapshot.input
-                        });
-                    });
-    
-                    // update the output ports
-                    clusterOutputPortsData.setItems(clusterOutputPorts);
-                    clusterOutputPortsData.reSort();
-                    clusterOutputPortsGrid.invalidate();
-    
-                    // populate the output port details
-                    $('#cluster-output-port-name').text(outputPortStatus.name).ellipsis();
-                  $('#cluster-output-port-type').text('Output Port').ellipsis();
-                    $('#cluster-output-port-id').text(outputPortStatus.id);
-                    $('#cluster-output-port-group-id').text(outputPortStatus.groupId);
-    
-                    // update the stats last refreshed timestamp
-                    $('#cluster-output-port-summary-last-refreshed').text(outputPortStatus.statsLastRefreshed);
-                }
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Loads the cluster remote process group details dialog for the specified processor.
-         *
-         * @argument {string} groupId   The group id
-         * @argument {string} remoteProcessGroupId     The remote process group id
-         */
-        var loadClusterRemoteProcessGroupSummary = function (groupId, remoteProcessGroupId) {
-            // get the summary
-            $.ajax({
-                type: 'GET',
-                url: config.urls.api + '/flow/remote-process-groups/' + encodeURIComponent(remoteProcessGroupId) + '/status',
-                data: {
-                    nodewise: true
-                },
-                dataType: 'json'
-            }).done(function (response) {
-              if (nfCommon.isDefinedAndNotNull(response.remoteProcessGroupStatus)) {
-                    var remoteProcessGroupStatus = response.remoteProcessGroupStatus;
-    
-                    var clusterRemoteProcessGroupsGrid = $('#cluster-remote-process-group-summary-table').data('gridInstance');
-                    var clusterRemoteProcessGroupsData = clusterRemoteProcessGroupsGrid.getData();
-    
-                    var clusterRemoteProcessGroups = [];
-    
-                    // populate the table
-                    $.each(remoteProcessGroupStatus.nodeSnapshots, function (i, nodeSnapshot) {
-                        var snapshot = nodeSnapshot.statusSnapshot;
-                        clusterRemoteProcessGroups.push({
-                            id: nodeSnapshot.nodeId,
-                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
-                            targetUri: snapshot.targetUri,
-                            transmissionStatus: snapshot.transmissionStatus,
-                            sent: snapshot.sent,
-                            received: snapshot.received,
-                            activeThreadCount: snapshot.activeThreadCount
-                        });
-                    });
-    
-                    // update the remote process groups
-                    clusterRemoteProcessGroupsData.setItems(clusterRemoteProcessGroups);
-                    clusterRemoteProcessGroupsData.reSort();
-                    clusterRemoteProcessGroupsGrid.invalidate();
-    
-                    // populate the remote process group details
-                    $('#cluster-remote-process-group-name').text(remoteProcessGroupStatus.name).ellipsis();
-                  $('#cluster-remote-process-group-type').text('Remote Process Group').ellipsis();
-                    $('#cluster-remote-process-group-id').text(remoteProcessGroupStatus.id);
-                    $('#cluster-remote-process-group-group-id').text(remoteProcessGroupStatus.groupId);
-    
-                    // update the stats last refreshed timestamp
-                    $('#cluster-remote-process-group-summary-last-refreshed').text(remoteProcessGroupStatus.statsLastRefreshed);
-                }
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        var clusterNodeId = null;
-    
-        return {
-    
-            /**
-             * Initializes the status table.
-             *
-             * @argument {boolean} isClustered Whether or not this NiFi is clustered.
-             */
-            init: function (isClustered) {
-                return $.Deferred(function (deferred) {
-                    // get the controller config to get the server offset
-                    var configRequest = $.ajax({
-                        type: 'GET',
-                        url: config.urls.flowConfig,
-                        dataType: 'json'
-                    }).done(function (configResponse) {
-                        var configDetails = configResponse.flowConfiguration;
-    
-                        // initialize the chart
-                      nfStatusHistory.init(configDetails.timeOffset);
-    
-                        // initialize the processor/connection details dialog
-                      nfProcessorDetails.init(false);
-                      nfConnectionDetails.init();
-                        initSummaryTable(isClustered);
-    
-                        deferred.resolve();
-                    }).fail(function () {
-                        deferred.reject();
-                    });
-                }).promise();
-            },
-    
-            /**
-             * Sets the cluster node id which will only show status from this node on subsequent reloads.
-             *
-             * @param nodeId
-             */
-            setClusterNodeId: function (nodeId) {
-                clusterNodeId = nodeId;
-            },
-    
-            /**
-             * Update the size of the grid based on its container's current size.
-             */
-            resetTableSize: function () {
-                var processorsTable = $('#processor-summary-table');
-                if (processorsTable.is(':visible')) {
-                    var processorsGrid = processorsTable.data('gridInstance');
-                  if (nfCommon.isDefinedAndNotNull(processorsGrid)) {
-                        processorsGrid.resizeCanvas();
-                    }
-                }
-    
-                var connectionsTable = $('#connection-summary-table');
-                if (connectionsTable.is(':visible')) {
-                    var connectionsGrid = connectionsTable.data('gridInstance');
-                  if (nfCommon.isDefinedAndNotNull(connectionsGrid)) {
-                        connectionsGrid.resizeCanvas();
-                    }
-                }
-    
-                var processGroupsTable = $('#process-group-summary-table');
-                if (processGroupsTable.is(':visible')) {
-                    var processGroupsGrid = processGroupsTable.data('gridInstance');
-                  if (nfCommon.isDefinedAndNotNull(processGroupsGrid)) {
-                        processGroupsGrid.resizeCanvas();
-                    }
-                }
-    
-                var inputPortsTable = $('#input-port-summary-table');
-                if (inputPortsTable.is(':visible')) {
-                    var inputPortGrid = inputPortsTable.data('gridInstance');
-                  if (nfCommon.isDefinedAndNotNull(inputPortGrid)) {
-                        inputPortGrid.resizeCanvas();
-                    }
-                }
-    
-                var outputPortsTable = $('#output-port-summary-table');
-                if (outputPortsTable.is(':visible')) {
-                    var outputPortGrid = outputPortsTable.data('gridInstance');
-                  if (nfCommon.isDefinedAndNotNull(outputPortGrid)) {
-                        outputPortGrid.resizeCanvas();
-                    }
-                }
-    
-                var remoteProcessGroupsTable = $('#remote-process-group-summary-table');
-                if (remoteProcessGroupsTable.is(':visible')) {
-                    var remoteProcessGroupGrid = remoteProcessGroupsTable.data('gridInstance');
-                  if (nfCommon.isDefinedAndNotNull(remoteProcessGroupGrid)) {
-                        remoteProcessGroupGrid.resizeCanvas();
-                    }
-                }
-            },
-    
-            /**
-             * Load the summary table.
-             */
-            loadSummaryTable: function () {
-                var statusUri = config.urls.status;
-    
-                // add the parameter if appropriate
-                var parameters = {};
-              if (!nfCommon.isNull(clusterNodeId)) {
-                    parameters['clusterNodeId'] = clusterNodeId;
-                }
-    
-                // update the status uri if appropriate
-                if (!$.isEmptyObject(parameters)) {
-                    statusUri += '?' + $.param(parameters);
-                }
-    
-                return $.ajax({
-                    type: 'GET',
-                    url: statusUri,
-                    data: {
-                        recursive: true
-                    },
-                    dataType: 'json'
-                }).done(function (response) {
-                    var processGroupStatus = response.processGroupStatus;
-                    var aggregateSnapshot = processGroupStatus.aggregateSnapshot;
-    
-                  if (nfCommon.isDefinedAndNotNull(aggregateSnapshot)) {
-                        // remove any tooltips from the processor table
-                        var processorsGridElement = $('#processor-summary-table');
-                      nfCommon.cleanUpTooltips(processorsGridElement, 'div.has-bulletins');
-    
-                        // get the processor grid/data
-                        var processorsGrid = processorsGridElement.data('gridInstance');
-                        var processorsData = processorsGrid.getData();
-    
-                        // get the connections grid/data (do not render bulletins)
-                        var connectionsGrid = $('#connection-summary-table').data('gridInstance');
-                        var connectionsData = connectionsGrid.getData();
-    
-                        // remove any tooltips from the process group table
-                        var processGroupGridElement = $('#process-group-summary-table');
-                      nfCommon.cleanUpTooltips(processGroupGridElement, 'div.has-bulletins');
-    
-                        // get the process group grid/data
-                        var processGroupGrid = processGroupGridElement.data('gridInstance');
-                        var processGroupData = processGroupGrid.getData();
-    
-                        // remove any tooltips from the input port table
-                        var inputPortsGridElement = $('#input-port-summary-table');
-                      nfCommon.cleanUpTooltips(inputPortsGridElement, 'div.has-bulletins');
-    
-                        // get the input ports grid/data
-                        var inputPortsGrid = inputPortsGridElement.data('gridInstance');
-                        var inputPortsData = inputPortsGrid.getData();
-    
-                        // remove any tooltips from the output port table
-                        var outputPortsGridElement = $('#output-port-summary-table');
-                      nfCommon.cleanUpTooltips(outputPortsGridElement, 'div.has-bulletins');
-    
-                        // get the output ports grid/data
-                        var outputPortsGrid = outputPortsGridElement.data('gridInstance');
-                        var outputPortsData = outputPortsGrid.getData();
-    
-                        // remove any tooltips from the remote process group table
-                        var remoteProcessGroupsGridElement = $('#remote-process-group-summary-table');
-                      nfCommon.cleanUpTooltips(remoteProcessGroupsGridElement, 'div.has-bulletins');
-    
-                        // get the remote process groups grid
-                        var remoteProcessGroupsGrid = remoteProcessGroupsGridElement.data('gridInstance');
-                        var remoteProcessGroupsData = remoteProcessGroupsGrid.getData();
-    
-                        var processorItems = [];
-                        var connectionItems = [];
-                        var processGroupItems = [];
-                        var inputPortItems = [];
-                        var outputPortItems = [];
-                        var remoteProcessGroupItems = [];
-    
-                        // populate the tables
-                        populateProcessGroupStatus(processorItems, connectionItems, processGroupItems, inputPortItems, outputPortItems, remoteProcessGroupItems, aggregateSnapshot);
-    
-                        // update the processors
-                        processorsData.setItems(processorItems);
-                        processorsData.reSort();
-                        processorsGrid.invalidate();
-    
-                        // update the connections
-                        connectionsData.setItems(connectionItems);
-                        connectionsData.reSort();
-                        connectionsGrid.invalidate();
-    
-                        // update the process groups
-                        processGroupData.setItems(processGroupItems);
-                        processGroupData.reSort();
-                        processGroupGrid.invalidate();
-    
-                        // update the input ports
-                        inputPortsData.setItems(inputPortItems);
-                        inputPortsData.reSort();
-                        inputPortsGrid.invalidate();
-    
-                        // update the output ports
-                        outputPortsData.setItems(outputPortItems);
-                        outputPortsData.reSort();
-                        outputPortsGrid.invalidate();
-    
-                        // update the remote process groups
-                        remoteProcessGroupsData.setItems(remoteProcessGroupItems);
-                        remoteProcessGroupsData.reSort();
-                        remoteProcessGroupsGrid.invalidate();
-    
-                        // update the stats last refreshed timestamp
-                        $('#summary-last-refreshed').text(processGroupStatus.statsLastRefreshed);
-    
-                        // update the total number of processors
-                        if ($('#processor-summary-table').is(':visible')) {
-                          $('#total-items').text(nfCommon.formatInteger(processorItems.length));
-                        } else if ($('#connection-summary-table').is(':visible')) {
-                          $('#total-items').text(nfCommon.formatInteger(connectionItems.length));
-                        } else if ($('#input-port-summary-table').is(':visible')) {
-                          $('#total-items').text(nfCommon.formatInteger(inputPortItems.length));
-                        } else if ($('#output-port-summary-table').is(':visible')) {
-                          $('#total-items').text(nfCommon.formatInteger(outputPortItems.length));
-                      } else if ($('#process-group-summary-table').is(':visible')) {
-                          $('#total-items').text(nfCommon.formatInteger(processGroupItems.length));
-                        } else {
-                          $('#total-items').text(nfCommon.formatInteger(remoteProcessGroupItems.length));
-                        }
-                    } else {
-                        $('#total-items').text('0');
-                    }
-              }).fail(nfErrorHandler.handleAjaxError);
-            }
-        };
-  }));
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
deleted file mode 100644
index 1726f2127f97..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js
+++ /dev/null
@@ -1,305 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* global define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'angular',
-                'nf.Common',
-                'nf.ClusterSummary',
-                'nf.ClusterSearch',
-                'nf.ng.AppConfig',
-                'nf.ng.AppCtrl',
-                'nf.ng.ServiceProvider',
-                'nf.ng.Bridge',
-                'nf.ErrorHandler',
-                'nf.Storage',
-                'nf.SummaryTable'],
-            function ($,
-                      angular,
-                      nfCommon,
-                      nfClusterSummary,
-                      nfClusterSearch,
-                      appConfig,
-                      appCtrl,
-                      serviceProvider,
-                      provenanceTable,
-                      nfNgBridge,
-                      nfErrorHandler,
-                      nfStorage,
-                      nfSummaryTable) {
-                return (nf.Summary =
-                    factory($,
-                        angular,
-                        nfCommon,
-                        nfClusterSummary,
-                        nfClusterSearch,
-                        appConfig,
-                        appCtrl,
-                        serviceProvider,
-                        nfNgBridge,
-                        nfErrorHandler,
-                        nfStorage,
-                        nfSummaryTable));
-            });
-    } 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, nfCommon, nfClusterSummary, nfClusterSearch, appConfig, appCtrl, serviceProvider, nfNgBridge, nfErrorHandler, nfStorage, nfSummaryTable) {
-    'use strict';
-
-    $(document).ready(function () {
-        //Create Angular App
-        var app = angular.module('ngSummaryApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
-
-        //Define Dependency Injection Annotations
-        appConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
-        appCtrl.$inject = ['$scope', 'serviceProvider'];
-        serviceProvider.$inject = [];
-
-        //Configure Angular App
-        app.config(appConfig);
-
-        //Define Angular App Controllers
-        app.controller('ngSummaryAppCtrl', appCtrl);
-
-        //Define Angular App Services
-        app.service('serviceProvider', serviceProvider);
-
-        //Manually Boostrap Angular App
-        nfNgBridge.injector = angular.bootstrap($('body'), ['ngSummaryApp'], {strictDi: true});
-
-        // initialize the summary page
-        nfClusterSummary.loadClusterSummary().done(function () {
-            nfSummary.init();
-        });
-    });
-
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        urls: {
-            banners: '../nifi-api/flow/banners',
-            about: '../nifi-api/flow/about',
-            clusterSummary: '../nifi-api/flow/cluster/summary'
-        }
-    };
-
-    /**
-     * Initializes the summary table. Must first determine if we are running clustered.
-     */
-    var initializeSummaryTable = function () {
-        return $.Deferred(function (deferred) {
-            $.ajax({
-                type: 'GET',
-                url: config.urls.clusterSummary
-            }).done(function (response) {
-                nfSummaryTable.init(response.clusterSummary.connectedToCluster).done(function () {
-                    // initialize the search field if applicable
-                    if (response.clusterSummary.connectedToCluster) {
-                        nfClusterSearch.init();
-                    }
-                    deferred.resolve();
-                }).fail(function () {
-                    deferred.reject();
-                });
-            }).fail(nfErrorHandler.handleAjaxError);
-        }).promise();
-    };
-
-    /**
-     * Initializes the summary page.
-     */
-    var initializeSummaryPage = function () {
-        // define mouse over event for the refresh buttons
-        $('#refresh-button').click(function () {
-            nfClusterSummary.loadClusterSummary().done(function () {
-                nfSummaryTable.loadSummaryTable();
-            });
-        });
-
-        // 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 (nfCommon.isDefinedAndNotNull(response.banners)) {
-                        if (nfCommon.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('summary');
-                        }
-
-                        if (nfCommon.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('summary');
-                        }
-                    }
-
-                    deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    nfErrorHandler.handleAjaxError(xhr, status, error);
-                    deferred.reject();
-                });
-            } else {
-                deferred.resolve();
-            }
-        }).promise();
-    };
-
-    var nfSummary = {
-        /**
-         * Initializes the status page.
-         */
-        init: function () {
-            nfStorage.init();
-
-            // intialize the summary table
-            initializeSummaryTable().done(function () {
-                // load the table
-                nfSummaryTable.loadSummaryTable().done(function () {
-                    // once the table is initialized, finish initializing the page
-                    initializeSummaryPage().done(function () {
-
-                        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'
-                                });
-
-                                $('#summary').css('margin', 40);
-                                $('div.summary-table').css('bottom', 127);
-                                $('#flow-summary-refresh-container').css({
-                                    "position": "absolute",
-                                    "bottom": "0px",
-                                    "margin": "40px"
-                                });
-                            }
-
-                            nfSummaryTable.resetTableSize();
-                        };
-
-                        // get the about details
-                        $.ajax({
-                            type: 'GET',
-                            url: config.urls.about,
-                            dataType: 'json'
-                        }).done(function (response) {
-                            var aboutDetails = response.about;
-                            var statusTitle = aboutDetails.title + ' Summary';
-
-                            // set the document title and the about title
-                            document.title = statusTitle;
-                            $('#status-header-text').text(statusTitle);
-
-                            // set the initial size
-                            setBodySize();
-                        }).fail(nfErrorHandler.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) {
-                                        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) {
-                                nfCommon.toggleScrollable(tabsContent.get(0));
-                            });
-                        });
-                    });
-                });
-            });
-        }
-    };
-
-    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
deleted file mode 100644
index 0f930cd17b33..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js
+++ /dev/null
@@ -1,465 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'Slick',
-                  'nf.Common',
-                  'nf.Dialog',
-                  'nf.ErrorHandler'],
-              function ($, Slick, nfCommon, nfDialog, nfErrorHandler) {
-                  return (nf.TemplatesTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler));
-              });
-      } 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, nfCommon, nfDialog, nfErrorHandler) {
-      'use strict';
-    
-        /**
-         * Configuration object used to hold a number of configuration items.
-         */
-        var config = {
-            urls: {
-                templates: '../nifi-api/flow/templates',
-                downloadToken: '../nifi-api/access/download-token'
-            }
-        };
-    
-        /**
-         * 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 (sortDetails.columnId === 'timestamp') {
-                      var aDate = nfCommon.parseDateTime(a.template[sortDetails.columnId]);
-                      var bDate = nfCommon.parseDateTime(b.template[sortDetails.columnId]);
-                        return aDate.getTime() - bDate.getTime();
-                    } else {
-                      var aString = nfCommon.isDefinedAndNotNull(a.template[sortDetails.columnId]) ? a.template[sortDetails.columnId] : '';
-                      var bString = nfCommon.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) {
-                        return 0;
-                    }
-                    if (a.permissions.canRead) {
-                        return 1;
-                    } else {
-                        return -1;
-                    }
-                }
-            };
-    
-            // perform the sort
-            data.sort(comparer, sortDetails.sortAsc);
-        };
-    
-        /**
-         * Prompts the user before attempting to delete the specified template.
-         *
-         * @argument {object} templateEntity     The template
-         */
-        var promptToDeleteTemplate = function (templateEntity) {
-            // prompt for deletion
-          nfDialog.showYesNoDialog({
-              headerText: nf._.msg('nf-templates-table.DeleteTemplate'),
-              dialogContent: nf._.msg('nf-templates-table.Message1') + nfCommon.escapeHtml(templateEntity.template.name) + '\'?',
-                yesHandler: function () {
-                    deleteTemplate(templateEntity);
-                }
-            });
-        };
-    
-        /**
-         * 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 (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.PolicyManagement) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
-                    parent.nf.PolicyManagement.showTemplatePolicy(templateEntity);
-                    parent.$('#shell-close-button').click();
-                }
-            }
-        };
-    
-        /**
-         * Deletes the template with the specified id.
-         *
-         * @argument {string} templateEntity     The template
-         */
-        var deleteTemplate = function (templateEntity) {
-            $.ajax({
-                type: 'DELETE',
-                url: templateEntity.template.uri,
-                dataType: 'json'
-            }).done(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(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * 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 $('#templates-filter').val();
-        };
-    
-        /**
-         * Applies the filter found in the filter expression text field.
-         */
-        var applyFilter = function () {
-            // get the dataview
-            var templatesGrid = $('#templates-table').data('gridInstance');
-    
-            // ensure the grid has been initialized
-          if (nfCommon.isDefinedAndNotNull(templatesGrid)) {
-                var templatesData = templatesGrid.getData();
-    
-                // update the search criteria
-                templatesData.setFilterArgs({
-                    searchString: getFilterText(),
-                    property: $('#templates-filter-type').combo('getSelectedOption').value
-                });
-                templatesData.refresh();
-            }
-        };
-    
-        /**
-         * Performs the filtering.
-         *
-         * @param {object} item     The item subject to filtering
-         * @param {object} args     Filter arguments
-         * @returns {Boolean}       Whether or not to include the item
-         */
-        var filter = function (item, args) {
-            if (args.searchString === '') {
-                return true;
-            }
-    
-            try {
-                // perform the row filtering
-                var filterExp = new RegExp(args.searchString, 'i');
-            } catch (e) {
-                // invalid regex
-                return false;
-            }
-    
-            // perform the filter
-            return item.template[args.property].search(filterExp) >= 0;
-        };
-    
-        /**
-         * Downloads the specified template.
-         *
-         * @param {object} templateEntity     The template
-         */
-        var downloadTemplate = function (templateEntity) {
-          nfCommon.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
-                var parameters = {};
-    
-                // conditionally include the download token
-              if (!nfCommon.isBlank(downloadToken)) {
-                    parameters['access_token'] = downloadToken;
-                }
-    
-                // open the url
-                if ($.isEmptyObject(parameters)) {
-                    window.open(templateEntity.template.uri + '/download');
-                } else {
-                    window.open(templateEntity.template.uri + '/download' + '?' + $.param(parameters));
-                }
-            }).fail(function () {
-              nfDialog.showOkDialog({
-                  headerText: nf._.msg('nf-templates-table.DownloadTemplate'),
-                  dialogContent: nf._.msg('nf-templates-table.Message2')
-                });
-            });
-        };
-    
-        return {
-            /**
-             * Initializes the templates list.
-             */
-            init: function () {
-                // define the function for filtering the list
-                $('#templates-filter').keyup(function () {
-                    applyFilter();
-                });
-    
-                // filter type
-                $('#templates-filter-type').combo({
-                    options: [{
-                      text: nf._.msg('nf-templates-table.ByName'),
-                        value: 'name'
-                    }, {
-                      text: nf._.msg('nf-templates-table.ByDescription'),
-                        value: 'description'
-                    }],
-                    select: function (option) {
-                        applyFilter();
-                    }
-                });
-    
-                var timestampFormatter = function (row, cell, value, columnDef, dataContext) {
-                    if (!dataContext.permissions.canRead) {
-                        return '';
-                    }
-    
-                    return dataContext.template.timestamp;
-                };
-    
-                var nameFormatter = function (row, cell, value, columnDef, dataContext) {
-                    if (!dataContext.permissions.canRead) {
-                        return '<span class="blank">' + dataContext.id + '</span>';
-                    }
-    
-                    return dataContext.template.name;
-                };
-    
-                var descriptionFormatter = function (row, cell, value, columnDef, dataContext) {
-                    if (!dataContext.permissions.canRead) {
-                        return '';
-                    }
-    
-                  return nfCommon.formatValue(dataContext.template.description);
-                };
-    
-                var groupIdFormatter = function (row, cell, value, columnDef, dataContext) {
-                    if (!dataContext.permissions.canRead) {
-                        return '';
-                    }
-    
-                    return dataContext.template.groupId;
-                };
-    
-                // function for formatting the actions column
-                var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-                    var markup = '';
-    
-                    if (dataContext.permissions.canRead === true) {
-                      markup += '<div title="'+nf._.msg('nf-summary-table.Download')+'" class="pointer export-template icon icon-template-save" style="margin-top: 2px; margin-right: 3px;"></div>';
-                    }
-    
-                    // all DFMs to remove templates
-                    if (dataContext.permissions.canWrite === true) {
-                      markup += '<div title="'+nf._.msg('nf-summary-table.RemovieTemplate')+'" class="pointer prompt-to-delete-template fa fa-trash" style="margin-top: 2px; margin-right: 3px;"></div>';
-                    }
-    
-                  // allow policy configuration conditionally if embedded in
-                  if (top !== window && nfCommon.canAccessTenants()) {
-                      if (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && parent.nf.CanvasUtils.isConfigurableAuthorizer()) {
-                          markup += '<div title="'+nf._.msg('nf-summary-table.AccessPolicies')+'" class="pointer edit-access-policies fa fa-key" style="margin-top: 2px;"></div>';
-                        }
-                    }
-    
-                    return markup;
-                };
-    
-                // initialize the templates table
-                var templatesColumns = [
-                  {
-                      id: 'timestamp',
-                      name: nf._.msg('nf-templates-table.DateTime'),
-                      sortable: true,
-                      defaultSortAsc: false,
-                      resizable: false,
-                      formatter: timestampFormatter,
-                      width: 225,
-                      maxWidth: 225
-                  },
-                  {
-                      id: 'name',
-                      name: nf._.msg('nf-templates-table.Name'),
-                      sortable: true,
-                      resizable: true,
-                      formatter: nameFormatter
-                  },
-                  {
-                      id: 'description',
-                      name: nf._.msg('nf-templates-table.Description'),
-                      sortable: true,
-                      resizable: true,
-                      formatter: descriptionFormatter
-                  },
-                  {
-                      id: 'groupId',
-                      name: nf._.msg('nf-templates-table.GroupId'),
-                      sortable: true,
-                      resizable: true,
-                      formatter: groupIdFormatter
-                  },
-                  {
-                      id: 'actions',
-                      name: '&nbsp;',
-                      sortable: false,
-                      resizable: false,
-                      formatter: actionFormatter,
-                      width: 100,
-                      maxWidth: 100
-                  }
-                ];
-    
-                var templatesOptions = {
-                    forceFitColumns: true,
-                    enableTextSelectionOnCells: true,
-                    enableCellNavigation: false,
-                    enableColumnReorder: false,
-                    autoEdit: false,
-                    rowHeight: 24
-                };
-    
-                // initialize the dataview
-                var templatesData = new Slick.Data.DataView({
-                    inlineFilters: false
-                });
-                templatesData.setItems([]);
-                templatesData.setFilterArgs({
-                    searchString: getFilterText(),
-                    property: $('#templates-filter-type').combo('getSelectedOption').value
-                });
-                templatesData.setFilter(filter);
-    
-                // initialize the sort
-                sort({
-                    columnId: 'timestamp',
-                    sortAsc: false
-                }, templatesData);
-    
-                // initialize the grid
-                var templatesGrid = new Slick.Grid('#templates-table', templatesData, templatesColumns, templatesOptions);
-                templatesGrid.setSelectionModel(new Slick.RowSelectionModel());
-                templatesGrid.registerPlugin(new Slick.AutoTooltips());
-                templatesGrid.setSortColumn('timestamp', false);
-                templatesGrid.onSort.subscribe(function (e, args) {
-                    sort({
-                        columnId: args.sortCol.id,
-                        sortAsc: args.sortAsc
-                    }, templatesData);
-                });
-    
-                // configure a click listener
-                templatesGrid.onClick.subscribe(function (e, args) {
-                    var target = $(e.target);
-    
-                    // get the node at this row
-                    var item = templatesData.getItem(args.row);
-    
-                    // determine the desired action
-                    if (templatesGrid.getColumns()[args.cell].id === 'actions') {
-                        if (target.hasClass('export-template')) {
-                            downloadTemplate(item);
-                        } else if (target.hasClass('prompt-to-delete-template')) {
-                            promptToDeleteTemplate(item);
-                        } else if (target.hasClass('edit-access-policies')) {
-                            openAccessPolicies(item);
-                        }
-                    }
-                });
-    
-                // wire up the dataview to the grid
-                templatesData.onRowCountChanged.subscribe(function (e, args) {
-                    templatesGrid.updateRowCount();
-                    templatesGrid.render();
-    
-                    // update the total number of displayed processors
-                    $('#displayed-templates').text(args.current);
-                });
-                templatesData.onRowsChanged.subscribe(function (e, args) {
-                    templatesGrid.invalidateRows(args.rows);
-                    templatesGrid.render();
-                });
-    
-                // hold onto an instance of the grid
-                $('#templates-table').data('gridInstance', templatesGrid);
-    
-                // 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 (nfCommon.isDefinedAndNotNull(templateGrid)) {
-                    templateGrid.resizeCanvas();
-                }
-            },
-    
-            /**
-             * Load the processor templates table.
-             */
-            loadTemplatesTable: function () {
-                return $.ajax({
-                    type: 'GET',
-                    url: config.urls.templates,
-                    dataType: 'json'
-                }).done(function (response) {
-                    // ensure there are groups specified
-                  if (nfCommon.isDefinedAndNotNull(response.templates)) {
-                        var templatesGrid = $('#templates-table').data('gridInstance');
-                        var templatesData = templatesGrid.getData();
-    
-                        // set the items
-                        templatesData.setItems(response.templates);
-                        templatesData.reSort();
-                        templatesGrid.invalidate();
-    
-                        // update the stats last refreshed timestamp
-                        $('#templates-last-refreshed').text(response.generated);
-    
-                        // update the total number of processors
-                        $('#total-templates').text(response.templates.length);
-                    } else {
-                        $('#total-templates').text('0');
-                    }
-              }).fail(nfErrorHandler.handleAjaxError);
-            }
-        };
-  }));
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
deleted file mode 100644
index 59f9a7d42678..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js
+++ /dev/null
@@ -1,226 +0,0 @@
-/*
- * 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 top, define, module, require, exports */
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery',
-                'nf.Common',
-                'nf.TemplatesTable',
-                'nf.ErrorHandler',
-                'nf.Storage'],
-            function ($, nfCommon, nfTemplatesTable, nfErrorHandler, nfStorage) {
-                return (nf.Templates = factory($, nfCommon, nfTemplatesTable, nfErrorHandler, nfStorage));
-            });
-    } 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 ($, nfCommon, nfTemplatesTable, nfErrorHandler, nfStorage) {
-    'use strict';
-
-    $(document).ready(function () {
-        // initialize the templates page
-        nfTemplates.init();
-    });
-
-    /**
-     * Configuration object used to hold a number of configuration items.
-     */
-    var config = {
-        urls: {
-            banners: '../nifi-api/flow/banners',
-            about: '../nifi-api/flow/about',
-            currentUser: '../nifi-api/flow/current-user'
-        }
-    };
-
-    /**
-     * Loads the current users.
-     */
-    var loadCurrentUser = function () {
-        return $.ajax({
-            type: 'GET',
-            url: config.urls.currentUser,
-            dataType: 'json'
-        }).done(function (currentUser) {
-            nfCommon.setCurrentUser(currentUser);
-        }).fail(nfErrorHandler.handleAjaxError);
-    };
-
-    /**
-     * Initializes the templates table.
-     */
-    var initializeTemplatesPage = function () {
-        // define mouse over event for the refresh button
-        $('#refresh-button').click(function () {
-            nfTemplatesTable.loadTemplatesTable();
-        });
-
-        // get the banners if we're not in the shell
-        return $.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 (nfCommon.isDefinedAndNotNull(response.banners)) {
-                        if (nfCommon.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('templates');
-                        }
-
-                        if (nfCommon.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('templates');
-                        }
-                    }
-
-                    deferred.resolve();
-                }).fail(function (xhr, status, error) {
-                    nfErrorHandler.handleAjaxError(xhr, status, error);
-                    deferred.reject();
-                });
-            } else {
-                deferred.resolve();
-            }
-        }).promise();
-    };
-
-    var nfTemplates = {
-        /**
-         * Initializes the templates page.
-         */
-        init: function () {
-            nfStorage.init();
-
-            // load the current user
-            loadCurrentUser().done(function () {
-
-                // create the templates table
-                nfTemplatesTable.init();
-
-                // load the table
-                nfTemplatesTable.loadTemplatesTable().done(function () {
-                    // once the table is initialized, finish initializing the page
-                    initializeTemplatesPage().done(function () {
-                        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'
-                                });
-
-                                $('#templates').css('margin', 40);
-                                $('#templates-table').css('bottom', 127);
-                                $('#templates-refresh-container').css('margin', 40);
-                            }
-
-                            // configure the initial grid height
-                            nfTemplatesTable.resetTableSize();
-                        };
-
-                        // get the about details
-                        $.ajax({
-                            type: 'GET',
-                            url: config.urls.about,
-                            dataType: 'json'
-                        }).done(function (response) {
-                            var aboutDetails = response.about;
-                            var templatesTitle = aboutDetails.title + ' Templates';
-
-                            // set the document title and the about title
-                            document.title = templatesTitle;
-                            $('#templates-header-text').text(templatesTitle);
-
-                            // set the initial size
-                            setBodySize();
-                        }).fail(nfErrorHandler.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) {
-                                        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) {
-                                nfCommon.toggleScrollable(tabsContent.get(0));
-                            });
-                        });
-                    });
-                });
-            });
-        }
-    };
-
-    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
deleted file mode 100644
index 2c4f93c6bbd0..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js
+++ /dev/null
@@ -1,1318 +0,0 @@
-    /*
-     * Licensed to the Apache Software Foundation (ASF) under one or more
-     * contributor license agreements.  See the NOTICE file distributed with
-     * this work for additional information regarding copyright ownership.
-     * The ASF licenses this file to You under the Apache License, Version 2.0
-     * (the "License"); you may not use this file except in compliance with
-     * the License.  You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    
-  /* global define, module, require, exports */
-    
-  (function (root, factory) {
-      if (typeof define === 'function' && define.amd) {
-          define(['jquery',
-                  'Slick',
-                  'nf.Common',
-                  'nf.Client',
-                  'nf.ErrorHandler'],
-              function ($, Slick, nfCommon, nfClient, nfErrorHandler) {
-                  return (nf.UsersTable = factory($, Slick, nfCommon, nfClient, nfErrorHandler));
-              });
-      } 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, nfCommon, nfClient, nfErrorHandler) {
-      'use strict';
-    
-        /**
-         * Configuration object used to hold a number of configuration items.
-         */
-        var config = {
-            urls: {
-                users: '../nifi-api/tenants/users',
-                userGroups: '../nifi-api/tenants/user-groups'
-            }
-        };
-    
-        var initUserDeleteDialog = function () {
-            $('#user-delete-dialog').modal({
-              headerText: nf._.msg('nf-users-table.DeleteAccount'),
-                buttons: [{
-                  buttonText: nf._.msg('nf-users-table.Delete'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            var userId = $('#user-id-delete-dialog').val();
-    
-                            // get the user
-                            var usersGrid = $('#users-table').data('gridInstance');
-                            var usersData = usersGrid.getData();
-                            var user = usersData.getItemById(userId);
-    
-                            // update the user
-                            $.ajax({
-                                type: 'DELETE',
-                              url: user.uri + '?' + $.param(nfClient.getRevision(user)),
-                                dataType: 'json'
-                            }).done(function () {
-                              nfUsersTable.loadUsersTable();
-                          }).fail(nfErrorHandler.handleAjaxError);
-    
-                            // hide the dialog
-                            $('#user-delete-dialog').modal('hide');
-                        }
-                    }
-                }, {
-                  buttonText: nf._.msg('nf-users-table.Cancel'),
-                    color: {
-                        base: '#E3E8EB',
-                        hover: '#C7D2D7',
-                        text: '#004849'
-                    },
-                    handler: {
-                        click: function () {
-                            $('#user-delete-dialog').modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // clear the current user
-                        $('#user-id-delete-dialog').val('');
-                        $('#user-name-delete-dialog').text('');
-                    }
-                }
-            });
-        };
-    
-        /**
-         * Gets the currently selected groups.
-         *
-         * @returns {Array} groups
-         */
-        var getSelectedGroups = function () {
-            var selectedGroups = [];
-            $('#available-groups div.group-check').filter(function () {
-                return $(this).hasClass('checkbox-checked');
-            }).each(function () {
-                var id = $(this).next('span.group-id').text();
-                selectedGroups.push({
-                    'id': id
-                });
-            });
-            return selectedGroups;
-        };
-    
-        /**
-         * Gets the currently selected users.
-         *
-         * @returns {Array} users
-         */
-        var getSelectedUsers = function () {
-            var selectedUsers = [];
-            $('#available-users div.user-check').filter(function () {
-                return $(this).hasClass('checkbox-checked');
-            }).each(function () {
-                var id = $(this).next('span.user-id').text();
-                selectedUsers.push({
-                    'id': id
-                });
-            });
-            return selectedUsers;
-        };
-    
-        /**
-         * Adds the specified user to the specified group.
-         *
-         * @param groupEntity
-         * @param userEntity
-         * @returns xhr
-         */
-        var addUserToGroup = function (groupEntity, userEntity) {
-            var groupMembers = [];
-    
-            // get all the current users
-            $.each(groupEntity.component.users, function (_, member) {
-                groupMembers.push({
-                    'id': member.id
-                });
-            });
-    
-            // add the new user
-            groupMembers.push({
-                'id': userEntity.id
-            });
-    
-            // build the request entity
-            var updatedGroupEntity = {
-              'revision': nfClient.getRevision(groupEntity),
-                'component': $.extend({}, groupEntity.component, {
-                    'users': groupMembers
-                })
-            };
-    
-            // update the group
-            return $.ajax({
-                type: 'PUT',
-                url: groupEntity.uri,
-                data: JSON.stringify(updatedGroupEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            });
-        };
-    
-        /**
-         * Adds the specified user to the specified group.
-         *
-         * @param groupEntity
-         * @param userEntity
-         * @returns xhr
-         */
-        var removeUserFromGroup = function (groupEntity, userEntity) {
-            var groupMembers = [];
-    
-            // get all the current users
-            $.each(groupEntity.component.users, function (_, member) {
-                // do not include the specified user
-                if (member.id !== userEntity.id) {
-                    groupMembers.push({
-                        'id': member.id
-                    });
-                }
-            });
-    
-            // build the request entity
-            var updatedGroupEntity = {
-              'revision': nfClient.getRevision(groupEntity),
-                'component': $.extend({}, groupEntity.component, {
-                    'users': groupMembers
-                })
-            };
-    
-            // update the group
-            return $.ajax({
-                type: 'PUT',
-                url: groupEntity.uri,
-                data: JSON.stringify(updatedGroupEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            });
-        };
-    
-        /**
-         * Creates the specified user.
-         *
-         * @param newUserEntity
-         * @param selectedGroups
-         */
-        var createUser = function (newUserEntity, selectedGroups) {
-            // get the grid and data
-            var usersGrid = $('#users-table').data('gridInstance');
-            var usersData = usersGrid.getData();
-    
-            // create the user
-            var userXhr = $.ajax({
-                type: 'POST',
-                url: config.urls.users,
-                data: JSON.stringify(newUserEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            });
-    
-            // if the user was successfully created
-            userXhr.done(function (userEntity) {
-                var xhrs = [];
-                $.each(selectedGroups, function (_, selectedGroup) {
-                    var groupEntity = usersData.getItemById(selectedGroup.id)
-                    xhrs.push(addUserToGroup(groupEntity, userEntity));
-                });
-    
-                $.when.apply(window, xhrs).always(function () {
-                  nfUsersTable.loadUsersTable().done(function () {
-                        // select the new user
-                        var row = usersData.getRowById(userEntity.id);
-                        usersGrid.setSelectedRows([row]);
-                        usersGrid.scrollRowIntoView(row);
-                    });
-              }).fail(nfErrorHandler.handleAjaxError);
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Updates the specified user.
-         *
-         * @param userId
-         * @param userIdentity
-         * @param selectedGroups
-         */
-        var updateUser = function (userId, userIdentity, selectedGroups) {
-            // get the grid and data
-            var usersGrid = $('#users-table').data('gridInstance');
-            var usersData = usersGrid.getData();
-            var userEntity = usersData.getItemById(userId);
-    
-            var updatedUserEntity = {
-              'revision': nfClient.getRevision(userEntity),
-                'component': {
-                    'id': userId,
-                    'identity': userIdentity
-                }
-            };
-    
-            // update the user
-            var userXhr = $.ajax({
-                type: 'PUT',
-                url: userEntity.uri,
-                data: JSON.stringify(updatedUserEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            });
-    
-            userXhr.done(function (updatedUserEntity) {
-    
-                // determine what to add/remove
-                var groupsAdded = [];
-                var groupsRemoved = [];
-                $.each(updatedUserEntity.component.userGroups, function (_, currentGroup) {
-                    var isSelected = $.grep(selectedGroups, function (group) {
-                        return group.id === currentGroup.id;
-                    });
-    
-                    // if the current group is not selected, mark it for removed
-                    if (isSelected.length === 0) {
-                        groupsRemoved.push(currentGroup);
-                    }
-                });
-                $.each(selectedGroups, function (_, selectedGroup) {
-                    var isSelected = $.grep(updatedUserEntity.component.userGroups, function (group) {
-                        return group.id === selectedGroup.id;
-                    });
-    
-                    // if the selected group is not current, mark it for addition
-                    if (isSelected.length === 0) {
-                        groupsAdded.push(selectedGroup);
-                    }
-                });
-    
-                // update each group
-                var xhrs = [];
-                $.each(groupsAdded, function (_, group) {
-                    var groupEntity = usersData.getItemById(group.id);
-                    xhrs.push(addUserToGroup(groupEntity, updatedUserEntity))
-                });
-                $.each(groupsRemoved, function (_, group) {
-                    var groupEntity = usersData.getItemById(group.id);
-                    xhrs.push(removeUserFromGroup(groupEntity, updatedUserEntity));
-                });
-    
-                $.when.apply(window, xhrs).always(function () {
-                  nfUsersTable.loadUsersTable();
-              }).fail(nfErrorHandler.handleAjaxError);
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Creates the specified group.
-         *
-         * @param newGroupEntity
-         */
-        var createGroup = function (newGroupEntity) {
-            // create the group
-            $.ajax({
-                type: 'POST',
-                url: config.urls.userGroups,
-                data: JSON.stringify(newGroupEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (groupEntity) {
-              nfUsersTable.loadUsersTable().done(function () {
-                    // add the user
-                    var usersGrid = $('#users-table').data('gridInstance');
-                    var usersData = usersGrid.getData();
-    
-                    // select the new user
-                    var row = usersData.getRowById(groupEntity.id);
-                    usersGrid.setSelectedRows([row]);
-                    usersGrid.scrollRowIntoView(row);
-                });
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        var updateGroup = function (groupId, groupIdentity, selectedUsers) {
-            // get the grid and data
-            var usersGrid = $('#users-table').data('gridInstance');
-            var usersData = usersGrid.getData();
-            var groupEntity = usersData.getItemById(groupId);
-    
-            var updatedGroupoEntity = {
-              'revision': nfClient.getRevision(groupEntity),
-                'component': {
-                    'id': groupId,
-                    'identity': groupIdentity,
-                    'users': selectedUsers
-                }
-            };
-    
-            // update the user
-            $.ajax({
-                type: 'PUT',
-                url: groupEntity.uri,
-                data: JSON.stringify(updatedGroupoEntity),
-                dataType: 'json',
-                contentType: 'application/json'
-            }).done(function (groupEntity) {
-              nfUsersTable.loadUsersTable();
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        /**
-         * Initializes the user table.
-         */
-        var initUserDialog = function () {
-            $('#user-dialog').modal({
-              headerText: nf._.msg('nf-users-table.UserGroup'),
-                buttons: [{
-                  buttonText: nf._.msg('nf-users-table.Ok'),
-                    color: {
-                        base: '#728E9B',
-                        hover: '#004849',
-                        text: '#ffffff'
-                    },
-                    handler: {
-                        click: function () {
-                            var userId = $('#user-id-edit-dialog').text();
-                            var userIdentity = $('#user-identity-edit-dialog').val();
-    
-                            // see if we should create or update this user
-                            if ($.trim(userId) === '') {
-                                var tenantEntity = {
-                                  'revision': nfClient.getRevision({
-                                        'revision': {
-                                            'version': 0
-                                        }
-                                    })
-                                };
-    
-                                // handle whether it's a user or a group
-                                if ($('#individual-radio-button').is(':checked')) {
-                                    // record the user groups
-                                    tenantEntity['component'] = {
-                                        'identity': userIdentity
-                                    };
-    
-                                    createUser(tenantEntity, getSelectedGroups());
-                                } else {
-                                    // record the users
-                                    tenantEntity['component'] = {
-                                        'identity': userIdentity,
-                                        'users': getSelectedUsers()
-                                    };
-    
-                                    createGroup(tenantEntity);
-                                }
-    
-                                // update any selected policies
-                            } else {
-                                // handle whether it's a user or a group
-                                if ($('#individual-radio-button').is(':checked')) {
-                                    updateUser(userId, userIdentity, getSelectedGroups());
-    
-                                    // update any selected policies
-                                } else {
-                                    updateGroup(userId, userIdentity, getSelectedUsers());
-    
-                                    // update any selected policies
-                                }
-                            }
-    
-                            $('#user-dialog').modal('hide');
-                        }
-                    }
-                }, {
-                  buttonText: nf._.msg('nf-users-table.Cancel'),
-                    color: {
-                        base: '#E3E8EB',
-                        hover: '#C7D2D7',
-                        text: '#004849'
-                    },
-                    handler: {
-                        click: function () {
-                            $('#user-dialog').modal('hide');
-                        }
-                    }
-                }],
-                handler: {
-                    close: function () {
-                        // reset the radio button
-                        $('#user-dialog input[name="userOrGroup"]').attr('disabled', false);
-                        $('#individual-radio-button').prop('checked', true);
-                        $('#user-groups').show();
-                        $('#group-members').hide();
-    
-                        // clear the fields
-                        $('#user-id-edit-dialog').text('');
-                        $('#user-identity-edit-dialog').val('');
-                        $('#available-users').empty()
-                        $('#available-groups').empty()
-                    }
-                }
-            });
-    
-            // listen for changes to the user/group radio
-            $('#user-dialog input[name="userOrGroup"]').on('change', function () {
-                if ($(this).val() === 'individual') {
-                    $('#user-groups').show();
-                    $('#group-members').hide();
-                } else {
-                    $('#user-groups').hide();
-                    $('#group-members').show();
-                }
-            });
-        };
-    
-        /**
-       * Initializes the user policies dialog.
-       */
-      var initUserPoliciesDialog = function () {
-          $('#user-policies-dialog').modal({
-              headerText: 'User Policies',
-              buttons: [{
-                  buttonText: 'Close',
-                  color: {
-                      base: '#728E9B',
-                      hover: '#004849',
-                      text: '#ffffff'
-                  },
-                  handler: {
-                      click: function () {
-                          $('#user-policies-dialog').modal('hide');
-                      }
-                  }
-              }]
-          });
-      };
-  
-      /**
-       * Generates a human readable global policy strung.
-       *
-       * @param dataContext
-       * @returns {string}
-       */
-      var globalResourceParser = function (dataContext) {
-          return 'Global policy to ' +
-              nfCommon.getPolicyTypeListing(nfCommon.substringAfterFirst(dataContext.component.resource, '/')).text;
-      };
-  
-      /**
-       * Generates a human readable component policy string.
-       *
-       * @param dataContext
-       * @returns {string}
-       */
-      var componentResourceParser = function (dataContext) {
-          var resource = dataContext.component.resource;
-          var policyLabel = '';
-  
-          //determine policy type
-          if (resource.startsWith('/policies')) {
-              resource = nfCommon.substringAfterFirst(resource, '/policies');
-              policyLabel += 'Admin policy for ';
-          } else if (resource.startsWith('/data-transfer')) {
-              resource = nfCommon.substringAfterFirst(resource, '/data-transfer');
-              policyLabel += 'Site to site policy for ';
-          } else if (resource.startsWith('/data')) {
-              resource = nfCommon.substringAfterFirst(resource, '/data');
-              policyLabel += 'Data policy for ';
-          } else {
-              policyLabel += 'Component policy for ';
-          }
-  
-          if (resource.startsWith('/processors')) {
-              policyLabel += 'processor ';
-          } else if (resource.startsWith('/controller-services')) {
-              policyLabel += 'controller service ';
-          } else if (resource.startsWith('/funnels')) {
-              policyLabel += 'funnel ';
-          } else if (resource.startsWith('/input-ports')) {
-              policyLabel += 'input port ';
-          } else if (resource.startsWith('/labels')) {
-              policyLabel += 'label ';
-          } else if (resource.startsWith('/output-ports')) {
-              policyLabel += 'output port ';
-          } else if (resource.startsWith('/process-groups')) {
-              policyLabel += 'process group ';
-          } else if (resource.startsWith('/remote-process-groups')) {
-              policyLabel += 'remote process group ';
-          } else if (resource.startsWith('/reporting-tasks')) {
-              policyLabel += 'reporting task ';
-          } else if (resource.startsWith('/templates')) {
-              policyLabel += 'template ';
-          }
-  
-          if (dataContext.component.componentReference.permissions.canRead === true) {
-              policyLabel += '<span style="font-weight: 500">' + dataContext.component.componentReference.component.name + '</span>';
-          } else {
-              policyLabel += '<span class="unset">' + dataContext.component.componentReference.id + '</span>'
-          }
-  
-          return policyLabel;
-      };
-  
-      /**
-       * Initializes the user policies table.
-       */
-      var initUserPoliciesTable = function () {
-  
-          // function for formatting the human readable name of the policy
-          var policyDisplayNameFormatter = function (row, cell, value, columnDef, dataContext) {
-              // if the user has permission to the policy
-              if (dataContext.permissions.canRead === true) {
-                  // check if Global policy
-                  if (nfCommon.isUndefinedOrNull(dataContext.component.componentReference)) {
-                      return globalResourceParser(dataContext);
-                  }
-                  // not a global policy... check if user has access to the component reference
-                  return componentResourceParser(dataContext);
-              } else {
-                  return '<span class="unset">' + dataContext.id + '</span>';
-              }
-          };
-  
-          // function for formatting the actions column
-          var actionsFormatter = function (row, cell, value, columnDef, dataContext) {
-              var markup = '';
-  
-              if (dataContext.permissions.canRead === true) {
-                  if (nfCommon.isDefinedAndNotNull(dataContext.component.componentReference)) {
-                      if (dataContext.component.resource.indexOf('/processors') >= 0) {
-                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
-                      } else if (dataContext.component.resource.indexOf('/controller-services') >= 0) {
-                          //TODO: implement go to for CS
-                      } else if (dataContext.component.resource.indexOf('/funnels') >= 0) {
-                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
-                      } else if (dataContext.component.resource.indexOf('/input-ports') >= 0) {
-                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
-                      } else if (dataContext.component.resource.indexOf('/labels') >= 0) {
-                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
-                      } else if (dataContext.component.resource.indexOf('/output-ports') >= 0) {
-                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
-                      } else if (dataContext.component.resource.indexOf('/process-groups') >= 0) {
-                          markup += '<div title="Go To" class="pointer go-to-process-group fa fa-long-arrow-right" style="float: left;"></div>';
-                      } else if (dataContext.component.resource.indexOf('/remote-process-groups') >= 0) {
-                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
-                      } else if (dataContext.component.resource.indexOf('/reporting-tasks') >= 0) {
-                          //TODO: implement go to for RT
-                      } else if (dataContext.component.resource.indexOf('/templates') >= 0) {
-                          //TODO: implement go to for Templates
-                      }
-                  }
-              }
-  
-              return markup;
-          };
-  
-          // function for formatting the action column
-          var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-              var markup = '';
-  
-              if (dataContext.permissions.canRead === true) {
-                  markup += dataContext.component.action;
-              }
-  
-              return markup;
-          };
-  
-          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
-              }
-          ];
-  
-          // add the actions if we're in the shell
-          if (top !== window) {
-              userPoliciesColumns.push({
-                  id: 'actions',
-                  name: '&nbsp;',
-                  sortable: false,
-                  resizable: false,
-                  formatter: actionsFormatter,
-                  width: 25
-              });
-          }
-  
-          var userPoliciesOptions = {
-              forceFitColumns: true,
-              enableTextSelectionOnCells: true,
-              enableCellNavigation: true,
-              enableColumnReorder: false,
-              autoEdit: false
-          };
-  
-          // initialize the dataview
-          var userPoliciesData = new Slick.Data.DataView({
-              inlineFilters: false
-          });
-          userPoliciesData.setItems([]);
-  
-          // initialize the sort
-          userPolicySort({
-              columnId: 'policy',
-              sortAsc: true
-          }, userPoliciesData);
-  
-          // initialize the grid
-          var userPoliciesGrid = new Slick.Grid('#user-policies-table', userPoliciesData, userPoliciesColumns, userPoliciesOptions);
-          userPoliciesGrid.setSelectionModel(new Slick.RowSelectionModel());
-          userPoliciesGrid.registerPlugin(new Slick.AutoTooltips());
-          userPoliciesGrid.setSortColumn('policy', true);
-          userPoliciesGrid.onSort.subscribe(function (e, args) {
-              userPolicySort({
-                  columnId: args.sortCol.id,
-                  sortAsc: args.sortAsc
-              }, userPoliciesData);
-          });
-  
-          // configure a click listener
-          userPoliciesGrid.onClick.subscribe(function (e, args) {
-              var target = $(e.target);
-  
-              // get the node at this row
-              var item = userPoliciesData.getItem(args.row);
-  
-              // determine the desired action
-              if (userPoliciesGrid.getColumns()[args.cell].id === 'actions') {
-                  if (target.hasClass('go-to-component')) {
-                      parent.$('body').trigger('GoTo:Component', {
-                          id: item.component.componentReference.id,
-                          parentGroupId: item.component.componentReference.parentGroupId
-                      });
-                      parent.$('#shell-close-button').click();
-                  } else if (target.hasClass('go-to-process-group')) {
-                      parent.$('body').trigger('GoTo:ProcessGroup', {
-                          id: item.component.componentReference.id
-                      });
-                      parent.$('#shell-close-button').click();
-                  }
-              }
-          });
-  
-          // wire up the dataview to the grid
-          userPoliciesData.onRowCountChanged.subscribe(function (e, args) {
-              userPoliciesGrid.updateRowCount();
-              userPoliciesGrid.render();
-          });
-          userPoliciesData.onRowsChanged.subscribe(function (e, args) {
-              userPoliciesGrid.invalidateRows(args.rows);
-              userPoliciesGrid.render();
-          });
-  
-          // hold onto an instance of the grid
-          $('#user-policies-table').data('gridInstance', userPoliciesGrid);
-      };
-  
-      /**
-         * Initializes the processor list.
-         */
-        var initUsersTable = function () {
-            // define the function for filtering the list
-            $('#users-filter').keyup(function () {
-                applyFilter();
-            });
-    
-            // filter type
-            $('#users-filter-type').combo({
-                options: [{
-                  text: nf._.msg('nf-users-table.ByUser'),
-                    value: 'identity'
-                }],
-                select: function (option) {
-                    applyFilter();
-                }
-            });
-    
-            // function for formatting the user identity
-            var identityFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-                if (dataContext.type === 'group') {
-                    markup += '<div class="fa fa-users" style="margin-right: 5px;"></div>';
-                }
-    
-                markup += dataContext.component.identity;
-    
-                return markup;
-            };
-    
-            // function for formatting the members/groups
-            var membersGroupsFormatter = function (row, cell, value, columnDef, dataContext) {
-                if (dataContext.type === 'group') {
-                    return 'Members: <b>' + dataContext.component.users.map(function (user) {
-                            return user.component.identity;
-                        }).join('</b>, <b>') + '</b>';
-                } else {
-                    return 'Member of: <b>' + dataContext.component.userGroups.map(function (group) {
-                            return group.component.identity;
-                        }).join('</b>, <b>') + '</b>';
-                }
-            };
-    
-            // function for formatting the actions column
-            var actionFormatter = function (row, cell, value, columnDef, dataContext) {
-                var markup = '';
-    
-                // ensure user can modify the user
-              if (nfCommon.canModifyTenants()) {
-                  markup += '<div title="'+nf._.msg('nf-users-table.Edit')+'" class="pointer edit-user fa fa-pencil" style="margin-right: 3px;"></div>';
-                  markup += '<div title="'+nf._.msg('nf-users-table.Remove')+'" class="pointer delete-user fa fa-trash"></div>';
-              }
-  
-              if (!nfCommon.isEmpty(dataContext.component.accessPolicies)) {
-                  markup += '<div title="View User Policies" class="pointer view-user-policies fa fa-key" style="margin-left: 3px;"></div>';
-                }
-    
-                return markup;
-            };
-    
-            // initialize the templates table
-            var usersColumns = [
-              {
-                  id: 'identity',
-                  name: nf._.msg('nf-users-table.User'),
-                  sortable: true,
-                  resizable: true,
-                  formatter: identityFormatter
-              },
-              {
-                  id: 'membersGroups',
-                  name: '&nbsp;',
-                  sortable: true,
-                  defaultSortAsc: false,
-                  resizable: true,
-                  formatter: membersGroupsFormatter
-              },
-              {
-                  id: 'actions',
-                  name: '&nbsp;',
-                  sortable: false,
-                  resizable: false,
-                  formatter: actionFormatter,
-                  width: 100,
-                  maxWidth: 100
-              }
-            ];
-    
-            var usersOptions = {
-                forceFitColumns: true,
-                enableTextSelectionOnCells: true,
-                enableCellNavigation: true,
-                enableColumnReorder: false,
-                autoEdit: false
-            };
-    
-            // initialize the dataview
-            var usersData = new Slick.Data.DataView({
-                inlineFilters: false
-            });
-            usersData.setItems([]);
-            usersData.setFilterArgs({
-                searchString: getFilterText(),
-                property: $('#users-filter-type').combo('getSelectedOption').value
-            });
-            usersData.setFilter(filter);
-    
-            // initialize the sort
-          userSort({
-                columnId: 'identity',
-                sortAsc: true
-            }, usersData);
-    
-            // initialize the grid
-            var usersGrid = new Slick.Grid('#users-table', usersData, usersColumns, usersOptions);
-            usersGrid.setSelectionModel(new Slick.RowSelectionModel());
-            usersGrid.registerPlugin(new Slick.AutoTooltips());
-            usersGrid.setSortColumn('identity', true);
-            usersGrid.onSort.subscribe(function (e, args) {
-              userSort({
-                    columnId: args.sortCol.id,
-                    sortAsc: args.sortAsc
-                }, usersData);
-            });
-    
-            // configure a click listener
-            usersGrid.onClick.subscribe(function (e, args) {
-                var target = $(e.target);
-    
-                // get the node at this row
-                var item = usersData.getItem(args.row);
-    
-                // determine the desired action
-                if (usersGrid.getColumns()[args.cell].id === 'actions') {
-                    if (target.hasClass('edit-user')) {
-                        editUser(item);
-                  } else if (target.hasClass('view-user-policies')) {
-                      viewUserPolicies(item);
-                    } else if (target.hasClass('delete-user')) {
-                        deleteUser(item);
-                    }
-                }
-            });
-    
-            // wire up the dataview to the grid
-            usersData.onRowCountChanged.subscribe(function (e, args) {
-                usersGrid.updateRowCount();
-                usersGrid.render();
-    
-                // update the total number of displayed processors
-                $('#displayed-users').text(args.current);
-            });
-            usersData.onRowsChanged.subscribe(function (e, args) {
-                usersGrid.invalidateRows(args.rows);
-                usersGrid.render();
-            });
-    
-            // hold onto an instance of the grid
-            $('#users-table').data('gridInstance', usersGrid);
-    
-            // initialize the number of displayed items
-            $('#displayed-users').text('0');
-        };
-    
-        /**
-         * Sorts the specified data using the specified sort details.
-         *
-         * @param {object} sortDetails
-         * @param {object} data
-         */
-      var userSort = function (sortDetails, data) {
-            // defines a function for sorting
-            var comparer = function (a, b) {
-                if (a.permissions.canRead && b.permissions.canRead) {
-                  var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-                  var bString = nfCommon.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) {
-                      return 0;
-                  }
-                  if (a.permissions.canRead) {
-                      return 1;
-                  } else {
-                      return -1;
-                  }
-              }
-          };
-  
-          // perform the sort
-          data.sort(comparer, sortDetails.sortAsc);
-      };
-  
-      /**
-       * Sorts the specified data using the specified sort details.
-       *
-       * @param {object} sortDetails
-       * @param {object} data
-       */
-      var userPolicySort = function (sortDetails, data) {
-          // defines a function for sorting
-          var comparer = function (a, b) {
-              if (a.permissions.canRead && b.permissions.canRead) {
-                  if (sortDetails.columnId === 'action') {
-                      var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-                      var bString = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
-                      return aString === bString ? 0 : aString > bString ? 1 : -1;
-                  } else if (sortDetails.columnId === 'policy') {
-                      var aString = '';
-                      var bString = '';
-  
-                      // if the user has permission to the policy
-                      if (a.permissions.canRead === true) {
-                          // check if Global policy
-                          if (nfCommon.isUndefinedOrNull(a.component.componentReference)) {
-                              aString = globalResourceParser(a);
-                          } else {
-                              // not a global policy... check if user has access to the component reference
-                              aString = componentResourceParser(a);
-                          }
-                      } else {
-                          aString = a.id;
-                      }
-  
-                      // if the user has permission to the policy
-                      if (b.permissions.canRead === true) {
-                          // check if Global policy
-                          if (nfCommon.isUndefinedOrNull(b.component.componentReference)) {
-                              bString = globalResourceParser(b);
-                          } else {
-                              // not a global policy... check if user has access to the component reference
-                              bString = componentResourceParser(b);
-                          }
-                      } else {
-                          bString = b.id;
-                      }
-  
-                      return aString === bString ? 0 : aString > bString ? 1 : -1;
-                  }
-                } else {
-                    if (!a.permissions.canRead && !b.permissions.canRead) {
-                        return 0;
-                    }
-                    if (a.permissions.canRead) {
-                        return 1;
-                    } else {
-                        return -1;
-                    }
-                }
-            };
-    
-            // perform the sort
-            data.sort(comparer, sortDetails.sortAsc);
-        };
-    
-        /**
-         * Get the text out of the filter field. If the filter field doesn't
-         * have any text it will contain the text 'filter list' so this method
-         * accounts for that.
-         */
-        var getFilterText = function () {
-            return $('#users-filter').val();
-        };
-    
-        /**
-         * Applies the filter found in the filter expression text field.
-         */
-        var applyFilter = function () {
-            // get the dataview
-            var usersGrid = $('#users-table').data('gridInstance');
-    
-            // ensure the grid has been initialized
-          if (nfCommon.isDefinedAndNotNull(usersGrid)) {
-                var usersData = usersGrid.getData();
-    
-                // update the search criteria
-                usersData.setFilterArgs({
-                    searchString: getFilterText(),
-                    property: $('#users-filter-type').combo('getSelectedOption').value
-                });
-                usersData.refresh();
-            }
-        };
-    
-        /**
-         * Performs the filtering.
-         *
-         * @param {object} item     The item subject to filtering
-         * @param {object} args     Filter arguments
-         * @returns {Boolean}       Whether or not to include the item
-         */
-        var filter = function (item, args) {
-            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.component[args.property].search(filterExp) >= 0;
-        };
-    
-        /**
-         * Builds a listing a users.
-         */
-        var buildUsersList = function () {
-            var usersGrid = $('#users-table').data('gridInstance');
-            var usersData = usersGrid.getData();
-            var usersList = $('#available-users');
-    
-            // add a row for each user
-            var count = 0;
-            $.each(usersData.getItems(), function (_, user) {
-                if (user.type === 'user') {
-                    // checkbox
-                    var checkbox = $('<div class="user-check nf-checkbox checkbox-unchecked"></div>').addClass('group-user-' + user.id);
-    
-                    // user id
-                    var userId = $('<span class="user-id hidden"></span>').text(user.id);
-    
-                    // identity
-                  var identity = $('<div class="available-identities nf-checkbox-label"></div>').text(user.component.identity);
-    
-                    // clear
-                    var clear = $('<div class="clear"></div>');
-    
-                    // list item
-                    var li = $('<li></li>').append(checkbox).append(userId).append(identity).append(clear).appendTo(usersList);
-                    if (count++ % 2 === 0) {
-                        li.addClass('even');
-                    }
-                }
-            });
-        };
-    
-        /**
-         * Builds a listing a users.
-         */
-        var buildGroupsList = function () {
-            var usersGrid = $('#users-table').data('gridInstance');
-            var usersData = usersGrid.getData();
-            var groupsList = $('#available-groups');
-    
-            // add a row for each user
-            var count = 0;
-            $.each(usersData.getItems(), function (_, group) {
-                if (group.type === 'group') {
-                    // checkbox
-                    var checkbox = $('<div class="group-check nf-checkbox checkbox-unchecked"></div>').addClass('user-group-' + group.id);
-    
-                    // group id
-                    var groupId = $('<span class="group-id hidden"></span>').text(group.id);
-    
-                    // icon
-                  var groupIcon = $('<div class="fa fa-users nf-checkbox-label" style="margin-top: 6px;"></div>');
-    
-                    // identity
-                  var identity = $('<div class="available-identities nf-checkbox-label"></div>').text(group.component.identity);
-    
-                    // clear
-                    var clear = $('<div class="clear"></div>');
-    
-                    // list item
-                    var li = $('<li></li>').append(checkbox).append(groupId).append(groupIcon).append(identity).append(clear).appendTo(groupsList);
-                    if (count++ % 2 === 0) {
-                        li.addClass('even');
-                    }
-                }
-            });
-        };
-    
-        /**
-         * Edit's the specified user's account.
-         *
-         * @argument {object} user        The user item
-         */
-        var editUser = function (user) {
-            // populate the users info
-            $('#user-id-edit-dialog').text(user.id);
-            $('#user-identity-edit-dialog').val(user.component.identity);
-    
-            if (user.type === 'user') {
-                $('#individual-radio-button').prop('checked', true);
-                $('#user-groups').show();
-                $('#group-members').hide();
-    
-                // list all the groups currently in the table
-                buildGroupsList();
-    
-                // select each group this user belongs to
-                $.each(user.component.userGroups, function (_, userGroup) {
-                    $('div.group-check.user-group-' + userGroup.id).removeClass('checkbox-unchecked').addClass('checkbox-checked');
-                });
-            } else {
-                $('#group-radio-button').prop('checked', true);
-                $('#user-groups').hide();
-                $('#group-members').show();
-    
-                // list all the users currently in the table
-                buildUsersList();
-    
-                // select each user that belongs to this group
-                $.each(user.component.users, function (_, member) {
-                    $('div.user-check.group-user-' + member.id).removeClass('checkbox-unchecked').addClass('checkbox-checked');
-                });
-            }
-    
-            // disable the type radio
-            $('#user-dialog input[name="userOrGroup"]').attr('disabled', true);
-    
-            // show the dialog
-            $('#user-dialog').modal('show');
-        };
-    
-        /**
-         * Delete's the specified user's account.
-         *
-         * @argument {object} user        The user item
-         */
-        var deleteUser = function (user) {
-            // populate the users info
-            $('#user-id-delete-dialog').val(user.id);
-            $('#user-identity-delete-dialog').text(user.component.identity);
-    
-            // show the dialog
-            $('#user-delete-dialog').modal('show');
-        };
-    
-      /**
-       * Open's a view of the specified user's policies.
-       *
-       * @argument {object} user        The user item
-       */
-      var viewUserPolicies = function (user) {
-          var userPoliciesGrid = $('#user-policies-table').data('gridInstance');
-          var userPoliciesData = userPoliciesGrid.getData();
-  
-          // begin the update
-          userPoliciesData.beginUpdate();
-  
-          // set the rows
-          if (nfCommon.isDefinedAndNotNull(user.component.accessPolicies)) {
-              userPoliciesData.setItems(user.component.accessPolicies);
-          }
-  
-          $('#policies-dialog-user-name').text(user.component.identity);
-  
-          // end the update
-          userPoliciesData.endUpdate();
-  
-          // re-sort and clear selection after updating
-          userPoliciesData.reSort();
-          userPoliciesGrid.invalidate();
-          userPoliciesGrid.getSelectionModel().setSelectedRows([]);
-  
-          // show the dialog
-          $('#user-policies-dialog').modal('show');
-          userPoliciesGrid.resizeCanvas();
-      };
-  
-      var nfUsersTable = {
-            init: function () {
-                initUserDialog();
-              initUserPoliciesDialog();
-              initUserPoliciesTable();
-                initUserDeleteDialog();
-                initUsersTable();
-    
-              if (nfCommon.canModifyTenants()) {
-                    $('#new-user-button').on('click', function () {
-                        buildUsersList();
-                        buildGroupsList();
-    
-                      // show the dialog
-                        $('#user-dialog').modal('show');
-    
-                      // set the focus automatically, only when adding a new user
-                      $('#user-identity-edit-dialog').focus();
-                    });
-    
-                    $('#new-user-button').prop('disabled', false);
-                } else {
-                    $('#new-user-button').prop('disabled', true);
-                }
-            },
-    
-            /**
-             * Update the size of the grid based on its container's current size.
-             */
-            resetTableSize: function () {
-                var usersTable = $('#users-table');
-                if (usersTable.is(':visible')) {
-                    var grid = usersTable.data('gridInstance');
-                  if (nfCommon.isDefinedAndNotNull(grid)) {
-                        grid.resizeCanvas();
-                    }
-                }
-            },
-    
-            /**
-           * Load the users table.
-             */
-            loadUsersTable: function () {
-                var users = $.ajax({
-                    type: 'GET',
-                    url: config.urls.users,
-                    dataType: 'json'
-                });
-    
-                var groups = $.ajax({
-                    type: 'GET',
-                    url: config.urls.userGroups,
-                    dataType: 'json'
-                });
-    
-                return $.when(users, groups).done(function (usersResults, groupsResults) {
-                    var usersResponse = usersResults[0];
-                    var groupsResponse = groupsResults[0];
-    
-                    // update the refresh timestamp
-                    $('#users-last-refreshed').text(usersResponse.generated);
-    
-                    var usersGrid = $('#users-table').data('gridInstance');
-                    var usersData = usersGrid.getData();
-    
-                    // begin the update
-                    usersData.beginUpdate();
-    
-                    var users = [];
-    
-                    // add each user
-                    $.each(usersResponse.users, function (_, user) {
-                        users.push($.extend({
-                            type: 'user'
-                        }, user));
-                    });
-    
-                    // add each group
-                    $.each(groupsResponse.userGroups, function (_, group) {
-                        users.push($.extend({
-                            type: 'group'
-                        }, group));
-                    });
-    
-                    // set the rows
-                    usersData.setItems(users);
-    
-                    // end the update
-                    usersData.endUpdate();
-    
-                    // re-sort and clear selection after updating
-                    usersData.reSort();
-                    usersGrid.invalidate();
-                    usersGrid.getSelectionModel().setSelectedRows([]);
-    
-                    $('#total-users').text(usersData.getLength());
-              }).fail(nfErrorHandler.handleAjaxError);
-            }
-        };
-    
-      return nfUsersTable;
-  }));
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
deleted file mode 100644
index 125e95f035b7..000000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users.js
+++ /dev/null
@@ -1,208 +0,0 @@
-    /*
-     * 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 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 ($, nfCommon, nfUsersTable, nfErrorHandler, nfStorage, nfClient) {
-                  return (nf.Users = factory($, nfCommon, nfUsersTable, nfErrorHandler, nfStorage, nfClient));
-              });
-      } 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 ($, nfCommon, nfUsersTable, nfErrorHandler, nfStorage, nfClient) {
-      'use strict';
-  
-        $(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.
-         */
-        var config = {
-            urls: {
-                banners: '../nifi-api/flow/banners',
-                controllerAbout: '../nifi-api/flow/about',
-                currentUser: '../nifi-api/flow/current-user'
-            }
-        };
-    
-        /**
-         * Loads the current users authorities.
-         */
-        var ensureAccess = function () {
-            return $.ajax({
-                type: 'GET',
-                url: config.urls.currentUser,
-                dataType: 'json'
-            }).done(function (currentUser) {
-              nfCommon.setCurrentUser(currentUser);
-          }).fail(nfErrorHandler.handleAjaxError);
-        };
-    
-        var initializeUsersPage = function () {
-            // define mouse over event for the refresh button
-          nfCommon.addHoverEffect('#user-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () {
-              nfUsersTable.loadUsersTable();
-            });
-    
-            // get the banners if we're not in the shell
-            return $.Deferred(function (deferred) {
-                if (top === window) {
-                    $.ajax({
-                        type: 'GET',
-                        url: config.urls.banners,
-                        dataType: 'json'
-                    }).done(function (bannerResponse) {
-                        // ensure the banners response is specified
-                      if (nfCommon.isDefinedAndNotNull(bannerResponse.banners)) {
-                          if (nfCommon.isDefinedAndNotNull(bannerResponse.banners.headerText) && bannerResponse.banners.headerText !== '') {
-                                // update the header text
-                                var bannerHeader = $('#banner-header').text(bannerResponse.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('users');
-                            }
-    
-                          if (nfCommon.isDefinedAndNotNull(bannerResponse.banners.footerText) && bannerResponse.banners.footerText !== '') {
-                                // update the footer text and show it
-                                var bannerFooter = $('#banner-footer').text(bannerResponse.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('users');
-                            }
-                        }
-    
-                        deferred.resolve();
-                    }).fail(function (xhr, status, error) {
-                      nfErrorHandler.handleAjaxError(xhr, status, error);
-                        deferred.reject();
-                    });
-                } else {
-                    deferred.resolve();
-                }
-            });
-        };
-    
-      var nfUsers = {
-            /**
-             * Initializes the counters page.
-             */
-            init: function () {
-              nfStorage.init();
-    
-                // initialize the client
-              nfClient.init();
-    
-                // load the users authorities
-                ensureAccess().done(function () {
-                    // create the counters table
-                  nfUsersTable.init();
-    
-                    // load the users table
-                  nfUsersTable.loadUsersTable().done(function () {
-                        // finish initializing users page
-                        initializeUsersPage().done(function () {
-                            // listen for browser resize events to update the page size
-                          $(window).resize(nfUsersTable.resetTableSize);
-    
-                            // configure the initial grid height
-                          nfUsersTable.resetTableSize();
-    
-                            // get the about details
-                            $.ajax({
-                                type: 'GET',
-                                url: config.urls.controllerAbout,
-                                dataType: 'json'
-                            }).done(function (response) {
-                                var aboutDetails = response.about;
-                              var countersTitle = nf._.msg('nf-about')+ nf._.msg('nf-users.Users');
-  
-                                // set the document title and the about title
-                                document.title = countersTitle;
-                                $('#users-header-text').text(countersTitle);
-                          }).fail(nfErrorHandler.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) {
-                                      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]));
-                              }
-                          }
-                        });
-                    });
-                });
-            }
-        };
-    
-      return nfUsers;
-  }));

From 5d1c68b7bde3c7601b3f4d411c14a00253bc0b05 Mon Sep 17 00:00:00 2001
From: WangJian <1925432244@qq.com>
Date: Sun, 19 Mar 2017 10:38:36 +0800
Subject: [PATCH 08/13] NIFI-3603: Updated js directory to add *.js localized
 changes and add gloabalization directory

---
 .../src/main/webapp/js/codemirror/LICENSE     |   19 +
 .../js/codemirror/addon/fold/foldgutter.css   |   20 +
 .../js/codemirror/addon/hint/show-hint.css    |   38 +
 .../js/codemirror/addon/lint/json-lint.js     |   31 +
 .../webapp/js/codemirror/addon/lint/lint.css  |   73 +
 .../webapp/js/codemirror/addon/lint/lint.js   |  239 ++
 .../codemirror/lib/codemirror-compressed.js   |   26 +
 .../webapp/js/codemirror/lib/codemirror.css   |  318 ++
 .../webapp/js/jquery/combo/jquery.combo.css   |  117 +
 .../webapp/js/jquery/combo/jquery.combo.js    |  363 ++
 .../main/webapp/js/jquery/combo/menuArrow.png |  Bin 0 -> 251 bytes
 .../webapp/js/jquery/combo/menuArrowSmall.png |  Bin 0 -> 233 bytes
 .../main/webapp/js/jquery/jquery.base64.js    |  123 +
 .../main/webapp/js/jquery/jquery.center.js    |   35 +
 .../src/main/webapp/js/jquery/jquery.count.js |   99 +
 .../src/main/webapp/js/jquery/jquery.each.js  |   31 +
 .../main/webapp/js/jquery/jquery.ellipsis.js  |  165 +
 .../src/main/webapp/js/jquery/jquery.tab.js   |   69 +
 .../webapp/js/jquery/modal/jquery.modal.css   |   94 +
 .../webapp/js/jquery/modal/jquery.modal.js    |  578 ++++
 .../js/jquery/nfeditor/jquery.nfeditor.css    |   75 +
 .../js/jquery/nfeditor/jquery.nfeditor.js     |  335 ++
 .../js/jquery/nfeditor/languages/nfel.css     |   51 +
 .../js/jquery/nfeditor/languages/nfel.js      |  874 +++++
 .../propertytable/buttonNewProperty.png       |  Bin 0 -> 590 bytes
 .../propertytable/jquery.propertytable.css    |  122 +
 .../propertytable/jquery.propertytable.js     | 1928 +++++++++++
 .../webapp/js/jquery/tabbs/jquery.tabbs.css   |   91 +
 .../webapp/js/jquery/tabbs/jquery.tabbs.js    |  107 +
 .../js/jquery/tagcloud/jquery.tagcloud.css    |   70 +
 .../js/jquery/tagcloud/jquery.tagcloud.js     |  225 ++
 .../js/nf/bulletin-board/nf-bulletin-board.js |  494 +++
 .../nf-ng-breadcrumbs-controller.js           |  192 ++
 .../nf-ng-canvas-flow-status-controller.js    |  520 +++
 .../nf-ng-canvas-global-menu-controller.js    |  440 +++
 .../nf-ng-canvas-graph-controls-controller.js |  351 ++
 .../nf-ng-canvas-header-controller.js         |  155 +
 .../nf-ng-canvas-navigate-controller.js       |  111 +
 .../nf-ng-canvas-operate-controller.js        |  510 +++
 .../nf-ng-canvas-toolbox-controller.js        |  168 +
 .../directives/nf-ng-breadcrumbs-directive.js |   50 +
 .../directives/nf-ng-draggable-directive.js   |   43 +
 .../components/nf-ng-funnel-component.js      |  148 +
 .../components/nf-ng-group-component.js       |  274 ++
 .../components/nf-ng-input-port-component.js  |  267 ++
 .../components/nf-ng-label-component.js       |  153 +
 .../components/nf-ng-output-port-component.js |  258 ++
 .../components/nf-ng-processor-component.js   |  710 ++++
 .../nf-ng-remote-process-group-component.js   |  321 ++
 .../components/nf-ng-template-component.js    |  287 ++
 .../main/webapp/js/nf/canvas/nf-actions.js    | 1724 ++++++++++
 .../main/webapp/js/nf/canvas/nf-birdseye.js   |  372 ++
 .../js/nf/canvas/nf-canvas-bootstrap.js       |  400 +++
 .../js/nf/canvas/nf-canvas-error-handler.js   |   72 +
 .../webapp/js/nf/canvas/nf-canvas-utils.js    | 1685 +++++++++
 .../src/main/webapp/js/nf/canvas/nf-canvas.js | 1330 +++++++
 .../main/webapp/js/nf/canvas/nf-clipboard.js  |  115 +
 .../webapp/js/nf/canvas/nf-component-state.js |  424 +++
 .../webapp/js/nf/canvas/nf-connectable.js     |  289 ++
 .../nf/canvas/nf-connection-configuration.js  | 1472 ++++++++
 .../main/webapp/js/nf/canvas/nf-connection.js | 2185 ++++++++++++
 .../webapp/js/nf/canvas/nf-context-menu.js    |  631 ++++
 .../js/nf/canvas/nf-controller-service.js     | 2167 ++++++++++++
 .../js/nf/canvas/nf-controller-services.js    | 1222 +++++++
 .../main/webapp/js/nf/canvas/nf-custom-ui.js  |   88 +
 .../main/webapp/js/nf/canvas/nf-draggable.js  |  422 +++
 .../src/main/webapp/js/nf/canvas/nf-funnel.js |  418 +++
 .../src/main/webapp/js/nf/canvas/nf-go-to.js  |  875 +++++
 .../src/main/webapp/js/nf/canvas/nf-graph.js  |  423 +++
 .../js/nf/canvas/nf-label-configuration.js    |  198 ++
 .../src/main/webapp/js/nf/canvas/nf-label.js  |  617 ++++
 .../js/nf/canvas/nf-ng-canvas-namespace.js    |   19 +
 .../js/nf/canvas/nf-policy-management.js      | 1474 ++++++++
 .../js/nf/canvas/nf-port-configuration.js     |  215 ++
 .../webapp/js/nf/canvas/nf-port-details.js    |   87 +
 .../src/main/webapp/js/nf/canvas/nf-port.js   |  775 +++++
 .../canvas/nf-process-group-configuration.js  |  382 +++
 .../webapp/js/nf/canvas/nf-process-group.js   | 1292 +++++++
 .../nf/canvas/nf-processor-configuration.js   |  908 +++++
 .../main/webapp/js/nf/canvas/nf-processor.js  | 1087 ++++++
 .../webapp/js/nf/canvas/nf-queue-listing.js   |  795 +++++
 .../nf-remote-process-group-configuration.js  |  208 ++
 .../canvas/nf-remote-process-group-details.js |  106 +
 .../canvas/nf-remote-process-group-ports.js   |  592 ++++
 .../js/nf/canvas/nf-remote-process-group.js   | 1098 ++++++
 .../webapp/js/nf/canvas/nf-reporting-task.js  |  827 +++++
 .../main/webapp/js/nf/canvas/nf-selectable.js |   85 +
 .../main/webapp/js/nf/canvas/nf-settings.js   | 1312 +++++++
 .../main/webapp/js/nf/canvas/nf-snippet.js    |  175 +
 .../webapp/js/nf/cluster/nf-cluster-table.js  | 1365 ++++++++
 .../main/webapp/js/nf/cluster/nf-cluster.js   |  227 ++
 .../js/nf/counters/nf-counters-table.js       |  335 ++
 .../main/webapp/js/nf/counters/nf-counters.js |  227 ++
 .../webapp/js/nf/globalization/resources.js   | 1884 ++++++++++
 .../js/nf/globalization/resources_jp.js       | 1522 ++++++++
 .../webapp/js/nf/history/nf-history-model.js  |  239 ++
 .../webapp/js/nf/history/nf-history-table.js  |  552 +++
 .../main/webapp/js/nf/history/nf-history.js   |  236 ++
 .../src/main/webapp/js/nf/login/nf-login.js   |  241 ++
 .../src/main/webapp/js/nf/nf-ajax-setup.js    |   57 +
 .../src/main/webapp/js/nf/nf-client.js        |   87 +
 .../main/webapp/js/nf/nf-cluster-summary.js   |   81 +
 .../src/main/webapp/js/nf/nf-common.js        | 1266 +++++++
 .../webapp/js/nf/nf-connection-details.js     |  553 +++
 .../src/main/webapp/js/nf/nf-dialog.js        |  178 +
 .../src/main/webapp/js/nf/nf-error-handler.js |  147 +
 .../src/main/webapp/js/nf/nf-namespace.js     |   20 +
 .../src/main/webapp/js/nf/nf-ng-app-config.js |  109 +
 .../main/webapp/js/nf/nf-ng-app-controller.js |   74 +
 .../src/main/webapp/js/nf/nf-ng-bridge.js     |   98 +
 .../src/main/webapp/js/nf/nf-ng-namespace.js  |   19 +
 .../webapp/js/nf/nf-ng-service-provider.js    |   62 +
 .../main/webapp/js/nf/nf-processor-details.js |  325 ++
 .../src/main/webapp/js/nf/nf-shell.js         |  214 ++
 .../main/webapp/js/nf/nf-status-history.js    | 1188 +++++++
 .../src/main/webapp/js/nf/nf-storage.js       |  195 ++
 .../main/webapp/js/nf/nf-universal-capture.js |  146 +
 .../js/nf/provenance/nf-provenance-lineage.js | 1423 ++++++++
 .../js/nf/provenance/nf-provenance-table.js   | 1514 ++++++++
 .../webapp/js/nf/provenance/nf-provenance.js  |  362 ++
 .../webapp/js/nf/summary/nf-cluster-search.js |  248 ++
 .../webapp/js/nf/summary/nf-summary-table.js  | 3052 +++++++++++++++++
 .../main/webapp/js/nf/summary/nf-summary.js   |  305 ++
 .../js/nf/templates/nf-templates-table.js     |  465 +++
 .../webapp/js/nf/templates/nf-templates.js    |  226 ++
 .../main/webapp/js/nf/users/nf-users-table.js | 1318 +++++++
 .../src/main/webapp/js/nf/users/nf-users.js   |  208 ++
 127 files changed, 61102 insertions(+)
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/LICENSE
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/fold/foldgutter.css
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/hint/show-hint.css
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/json-lint.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.css
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror-compressed.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror.css
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.css
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/menuArrow.png
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/menuArrowSmall.png
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.base64.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.center.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.count.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.each.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.ellipsis.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.tab.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.css
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.css
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/buttonNewProperty.png
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.css
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/bulletin-board/nf-bulletin-board.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js
 create mode 100644 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
 create mode 100644 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
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js
 create mode 100644 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
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js
 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/canvas/nf-canvas-utils.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-clipboard.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-ng-canvas-namespace.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
 create mode 100644 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
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
 create mode 100644 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
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-selectable.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-snippet.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ajax-setup.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-client.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-common.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.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
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-namespace.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-namespace.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-service-provider.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-storage.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-universal-capture.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js
 create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users.js

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/LICENSE b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/LICENSE
new file mode 100644
index 000000000000..d21bbea5a633
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/LICENSE
@@ -0,0 +1,19 @@
+Copyright (C) 2014 by Marijn Haverbeke <marijnh@gmail.com> and others
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/fold/foldgutter.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/fold/foldgutter.css
new file mode 100644
index 000000000000..ad19ae2d3ee1
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/fold/foldgutter.css
@@ -0,0 +1,20 @@
+.CodeMirror-foldmarker {
+  color: blue;
+  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+  font-family: arial;
+  line-height: .3;
+  cursor: pointer;
+}
+.CodeMirror-foldgutter {
+  width: .7em;
+}
+.CodeMirror-foldgutter-open,
+.CodeMirror-foldgutter-folded {
+  cursor: pointer;
+}
+.CodeMirror-foldgutter-open:after {
+  content: "\25BE";
+}
+.CodeMirror-foldgutter-folded:after {
+  content: "\25B8";
+}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/hint/show-hint.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/hint/show-hint.css
new file mode 100644
index 000000000000..924e638f7f7b
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/hint/show-hint.css
@@ -0,0 +1,38 @@
+.CodeMirror-hints {
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+  list-style: none;
+
+  margin: 0;
+  padding: 2px;
+
+  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  border-radius: 3px;
+  border: 1px solid silver;
+
+  background: white;
+  font-size: 90%;
+  font-family: monospace;
+
+  max-height: 20em;
+  overflow-y: auto;
+}
+
+.CodeMirror-hint {
+  margin: 0;
+  padding: 0 4px;
+  border-radius: 2px;
+  max-width: 19em;
+  overflow: hidden;
+  white-space: pre;
+  color: black;
+  cursor: pointer;
+}
+
+li.CodeMirror-hint-active {
+  background: #08f;
+  color: white;
+}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/json-lint.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/json-lint.js
new file mode 100644
index 000000000000..9dbb616b3b44
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/json-lint.js
@@ -0,0 +1,31 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+// Depends on jsonlint.js from https://github.com/zaach/jsonlint
+
+// declare global: jsonlint
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
+CodeMirror.registerHelper("lint", "json", function(text) {
+  var found = [];
+  jsonlint.parseError = function(str, hash) {
+    var loc = hash.loc;
+    found.push({from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
+                to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
+                message: str});
+  };
+  try { jsonlint.parse(text); }
+  catch(e) {}
+  return found;
+});
+
+});
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.css
new file mode 100644
index 000000000000..414a9a0e0666
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.css
@@ -0,0 +1,73 @@
+/* The lint marker gutter */
+.CodeMirror-lint-markers {
+  width: 16px;
+}
+
+.CodeMirror-lint-tooltip {
+  background-color: infobackground;
+  border: 1px solid black;
+  border-radius: 4px 4px 4px 4px;
+  color: infotext;
+  font-family: monospace;
+  font-size: 10pt;
+  overflow: hidden;
+  padding: 2px 5px;
+  position: fixed;
+  white-space: pre;
+  white-space: pre-wrap;
+  z-index: 100;
+  max-width: 600px;
+  opacity: 0;
+  transition: opacity .4s;
+  -moz-transition: opacity .4s;
+  -webkit-transition: opacity .4s;
+  -o-transition: opacity .4s;
+  -ms-transition: opacity .4s;
+}
+
+.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning {
+  background-position: left bottom;
+  background-repeat: repeat-x;
+}
+
+.CodeMirror-lint-mark-error {
+  background-image:
+  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==")
+  ;
+}
+
+.CodeMirror-lint-mark-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning {
+  background-position: center center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  vertical-align: middle;
+  position: relative;
+}
+
+.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning {
+  padding-left: 18px;
+  background-position: top left;
+  background-repeat: no-repeat;
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-multiple {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  width: 100%; height: 100%;
+}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.js
new file mode 100644
index 000000000000..e3a452766d31
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/addon/lint/lint.js
@@ -0,0 +1,239 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  "use strict";
+  var GUTTER_ID = "CodeMirror-lint-markers";
+
+  function showTooltip(e, content) {
+    var tt = document.createElement("div");
+    tt.className = "CodeMirror-lint-tooltip";
+    tt.appendChild(content.cloneNode(true));
+    document.body.appendChild(tt);
+
+    function position(e) {
+      if (!tt.parentNode) return CodeMirror.off(document, "mousemove", position);
+      tt.style.top = Math.max(0, e.clientY - tt.offsetHeight - 5) + "px";
+      tt.style.left = (e.clientX + 5) + "px";
+    }
+    CodeMirror.on(document, "mousemove", position);
+    position(e);
+    if (tt.style.opacity != null) tt.style.opacity = 1;
+    return tt;
+  }
+  function rm(elt) {
+    if (elt.parentNode) elt.parentNode.removeChild(elt);
+  }
+  function hideTooltip(tt) {
+    if (!tt.parentNode) return;
+    if (tt.style.opacity == null) rm(tt);
+    tt.style.opacity = 0;
+    setTimeout(function() { rm(tt); }, 600);
+  }
+
+  function showTooltipFor(e, content, node) {
+    var tooltip = showTooltip(e, content);
+    function hide() {
+      CodeMirror.off(node, "mouseout", hide);
+      if (tooltip) { hideTooltip(tooltip); tooltip = null; }
+    }
+    var poll = setInterval(function() {
+      if (tooltip) for (var n = node;; n = n.parentNode) {
+        if (n && n.nodeType == 11) n = n.host;
+        if (n == document.body) return;
+        if (!n) { hide(); break; }
+      }
+      if (!tooltip) return clearInterval(poll);
+    }, 400);
+    CodeMirror.on(node, "mouseout", hide);
+  }
+
+  function LintState(cm, options, hasGutter) {
+    this.marked = [];
+    this.options = options;
+    this.timeout = null;
+    this.hasGutter = hasGutter;
+    this.onMouseOver = function(e) { onMouseOver(cm, e); };
+    this.waitingFor = 0
+  }
+
+  function parseOptions(_cm, options) {
+    if (options instanceof Function) return {getAnnotations: options};
+    if (!options || options === true) options = {};
+    return options;
+  }
+
+  function clearMarks(cm) {
+    var state = cm.state.lint;
+    if (state.hasGutter) cm.clearGutter(GUTTER_ID);
+    for (var i = 0; i < state.marked.length; ++i)
+      state.marked[i].clear();
+    state.marked.length = 0;
+  }
+
+  function makeMarker(labels, severity, multiple, tooltips) {
+    var marker = document.createElement("div"), inner = marker;
+    marker.className = "CodeMirror-lint-marker-" + severity;
+    if (multiple) {
+      inner = marker.appendChild(document.createElement("div"));
+      inner.className = "CodeMirror-lint-marker-multiple";
+    }
+
+    if (tooltips != false) CodeMirror.on(inner, "mouseover", function(e) {
+      showTooltipFor(e, labels, inner);
+    });
+
+    return marker;
+  }
+
+  function getMaxSeverity(a, b) {
+    if (a == "error") return a;
+    else return b;
+  }
+
+  function groupByLine(annotations) {
+    var lines = [];
+    for (var i = 0; i < annotations.length; ++i) {
+      var ann = annotations[i], line = ann.from.line;
+      (lines[line] || (lines[line] = [])).push(ann);
+    }
+    return lines;
+  }
+
+  function annotationTooltip(ann) {
+    var severity = ann.severity;
+    if (!severity) severity = "error";
+    var tip = document.createElement("div");
+    tip.className = "CodeMirror-lint-message-" + severity;
+    tip.appendChild(document.createTextNode(ann.message));
+    return tip;
+  }
+
+  function lintAsync(cm, getAnnotations, passOptions) {
+    var state = cm.state.lint
+    var id = ++state.waitingFor
+    function abort() {
+      id = -1
+      cm.off("change", abort)
+    }
+    cm.on("change", abort)
+    getAnnotations(cm.getValue(), function(annotations, arg2) {
+      cm.off("change", abort)
+      if (state.waitingFor != id) return
+      if (arg2 && annotations instanceof CodeMirror) annotations = arg2
+      updateLinting(cm, annotations)
+    }, passOptions, cm);
+  }
+
+  function startLinting(cm) {
+    var state = cm.state.lint, options = state.options;
+    var passOptions = options.options || options; // Support deprecated passing of `options` property in options
+    var getAnnotations = options.getAnnotations || cm.getHelper(CodeMirror.Pos(0, 0), "lint");
+    if (!getAnnotations) return;
+    if (options.async || getAnnotations.async) {
+      lintAsync(cm, getAnnotations, passOptions)
+    } else {
+      updateLinting(cm, getAnnotations(cm.getValue(), passOptions, cm));
+    }
+  }
+
+  function updateLinting(cm, annotationsNotSorted) {
+    clearMarks(cm);
+    var state = cm.state.lint, options = state.options;
+
+    var annotations = groupByLine(annotationsNotSorted);
+
+    for (var line = 0; line < annotations.length; ++line) {
+      var anns = annotations[line];
+      if (!anns) continue;
+
+      var maxSeverity = null;
+      var tipLabel = state.hasGutter && document.createDocumentFragment();
+
+      for (var i = 0; i < anns.length; ++i) {
+        var ann = anns[i];
+        var severity = ann.severity;
+        if (!severity) severity = "error";
+        maxSeverity = getMaxSeverity(maxSeverity, severity);
+
+        if (options.formatAnnotation) ann = options.formatAnnotation(ann);
+        if (state.hasGutter) tipLabel.appendChild(annotationTooltip(ann));
+
+        if (ann.to) state.marked.push(cm.markText(ann.from, ann.to, {
+          className: "CodeMirror-lint-mark-" + severity,
+          __annotation: ann
+        }));
+      }
+
+      if (state.hasGutter)
+        cm.setGutterMarker(line, GUTTER_ID, makeMarker(tipLabel, maxSeverity, anns.length > 1,
+                                                       state.options.tooltips));
+    }
+    if (options.onUpdateLinting) options.onUpdateLinting(annotationsNotSorted, annotations, cm);
+  }
+
+  function onChange(cm) {
+    var state = cm.state.lint;
+    if (!state) return;
+    clearTimeout(state.timeout);
+    state.timeout = setTimeout(function(){startLinting(cm);}, state.options.delay || 500);
+  }
+
+  function popupTooltips(annotations, e) {
+    var target = e.target || e.srcElement;
+    var tooltip = document.createDocumentFragment();
+    for (var i = 0; i < annotations.length; i++) {
+      var ann = annotations[i];
+      tooltip.appendChild(annotationTooltip(ann));
+    }
+    showTooltipFor(e, tooltip, target);
+  }
+
+  function onMouseOver(cm, e) {
+    var target = e.target || e.srcElement;
+    if (!/\bCodeMirror-lint-mark-/.test(target.className)) return;
+    var box = target.getBoundingClientRect(), x = (box.left + box.right) / 2, y = (box.top + box.bottom) / 2;
+    var spans = cm.findMarksAt(cm.coordsChar({left: x, top: y}, "client"));
+
+    var annotations = [];
+    for (var i = 0; i < spans.length; ++i) {
+      var ann = spans[i].__annotation;
+      if (ann) annotations.push(ann);
+    }
+    if (annotations.length) popupTooltips(annotations, e);
+  }
+
+  CodeMirror.defineOption("lint", false, function(cm, val, old) {
+    if (old && old != CodeMirror.Init) {
+      clearMarks(cm);
+      if (cm.state.lint.options.lintOnChange !== false)
+        cm.off("change", onChange);
+      CodeMirror.off(cm.getWrapperElement(), "mouseover", cm.state.lint.onMouseOver);
+      clearTimeout(cm.state.lint.timeout);
+      delete cm.state.lint;
+    }
+
+    if (val) {
+      var gutters = cm.getOption("gutters"), hasLintGutter = false;
+      for (var i = 0; i < gutters.length; ++i) if (gutters[i] == GUTTER_ID) hasLintGutter = true;
+      var state = cm.state.lint = new LintState(cm, parseOptions(cm, val), hasLintGutter);
+      if (state.options.lintOnChange !== false)
+        cm.on("change", onChange);
+      if (state.options.tooltips != false)
+        CodeMirror.on(cm.getWrapperElement(), "mouseover", state.onMouseOver);
+
+      startLinting(cm);
+    }
+  });
+
+  CodeMirror.defineExtension("performLint", function() {
+    if (this.state.lint) startLinting(this);
+  });
+});
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror-compressed.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror-compressed.js
new file mode 100644
index 000000000000..262fea7a8513
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror-compressed.js
@@ -0,0 +1,26 @@
+/* CodeMirror - Minified & Bundled
+   Generated on 2/22/2015 with http://codemirror.net/doc/compress.html
+   Version: 4.8
+
+   CodeMirror Library:
+   - codemirror.js
+   Modes:
+   - javascript.js
+   - xml.js
+   Add-ons:
+   - brace-fold.js
+   - comment-fold.js
+   - foldcode.js
+   - foldgutter.js
+   - markdown-fold.js
+   - matchbrackets.js
+   - show-hint.js
+   - xml-fold.js
+ */
+
+!function(a){if("object"==typeof exports&&"object"==typeof module)module.exports=a();else{if("function"==typeof define&&define.amd)return define([],a);this.CodeMirror=a()}}(function(){"use strict";function w(a,b){if(!(this instanceof w))return new w(a,b);this.options=b=b?Qg(b):{},Qg(ie,b,!1),J(b);var c=b.value;"string"==typeof c&&(c=new Lf(c,b.mode)),this.doc=c;var f=this.display=new x(a,c);f.wrapper.CodeMirror=this,F(this),D(this),b.lineWrapping&&(this.display.wrapper.className+=" CodeMirror-wrap"),b.autofocus&&!o&&_c(this),this.state={keyMaps:[],overlays:[],modeGen:0,overwrite:!1,focused:!1,suppressEdits:!1,pasteIncoming:!1,cutIncoming:!1,draggingText:!1,highlight:new Gg,keySeq:null},d&&11>e&&setTimeout(Rg($c,this,!0),20),cd(this),ih(),Ac(this),this.curOp.forceUpdate=!0,Pf(this,c),b.autofocus&&!o||bh()==f.input?setTimeout(Rg(Hd,this),20):Id(this);for(var g in je)je.hasOwnProperty(g)&&je[g](this,b[g],le);P(this);for(var h=0;h<pe.length;++h)pe[h](this);Cc(this)}function x(a,b){var c=this,g=c.input=Yg("textarea",null,null,"position: absolute; padding: 0; width: 1px; height: 1em; outline: none");f?g.style.width="1000px":g.setAttribute("wrap","off"),n&&(g.style.border="1px solid black"),g.setAttribute("autocorrect","off"),g.setAttribute("autocapitalize","off"),g.setAttribute("spellcheck","false"),c.inputDiv=Yg("div",[g],null,"overflow: hidden; position: relative; width: 3px; height: 0px;"),c.scrollbarH=Yg("div",[Yg("div",null,null,"height: 100%; min-height: 1px")],"CodeMirror-hscrollbar"),c.scrollbarV=Yg("div",[Yg("div",null,null,"min-width: 1px")],"CodeMirror-vscrollbar"),c.scrollbarFiller=Yg("div",null,"CodeMirror-scrollbar-filler"),c.gutterFiller=Yg("div",null,"CodeMirror-gutter-filler"),c.lineDiv=Yg("div",null,"CodeMirror-code"),c.selectionDiv=Yg("div",null,null,"position: relative; z-index: 1"),c.cursorDiv=Yg("div",null,"CodeMirror-cursors"),c.measure=Yg("div",null,"CodeMirror-measure"),c.lineMeasure=Yg("div",null,"CodeMirror-measure"),c.lineSpace=Yg("div",[c.measure,c.lineMeasure,c.selectionDiv,c.cursorDiv,c.lineDiv],null,"position: relative; outline: none"),c.mover=Yg("div",[Yg("div",[c.lineSpace],"CodeMirror-lines")],null,"position: relative"),c.sizer=Yg("div",[c.mover],"CodeMirror-sizer"),c.heightForcer=Yg("div",null,null,"position: absolute; height: "+Bg+"px; width: 1px;"),c.gutters=Yg("div",null,"CodeMirror-gutters"),c.lineGutter=null,c.scroller=Yg("div",[c.sizer,c.heightForcer,c.gutters],"CodeMirror-scroll"),c.scroller.setAttribute("tabIndex","-1"),c.wrapper=Yg("div",[c.inputDiv,c.scrollbarH,c.scrollbarV,c.scrollbarFiller,c.gutterFiller,c.scroller],"CodeMirror"),d&&8>e&&(c.gutters.style.zIndex=-1,c.scroller.style.paddingRight=0),n&&(g.style.width="0px"),f||(c.scroller.draggable=!0),k&&(c.inputDiv.style.height="1px",c.inputDiv.style.position="absolute"),d&&8>e&&(c.scrollbarH.style.minHeight=c.scrollbarV.style.minWidth="18px"),a&&(a.appendChild?a.appendChild(c.wrapper):a(c.wrapper)),c.viewFrom=c.viewTo=b.first,c.view=[],c.externalMeasured=null,c.viewOffset=0,c.lastWrapHeight=c.lastWrapWidth=0,c.updateLineNumbers=null,c.lineNumWidth=c.lineNumInnerWidth=c.lineNumChars=null,c.prevInput="",c.alignWidgets=!1,c.pollingFast=!1,c.poll=new Gg,c.cachedCharWidth=c.cachedTextHeight=c.cachedPaddingH=null,c.inaccurateSelection=!1,c.maxLine=null,c.maxLineLength=0,c.maxLineChanged=!1,c.wheelDX=c.wheelDY=c.wheelStartX=c.wheelStartY=null,c.shift=!1,c.selForContextMenu=null}function y(a){a.doc.mode=w.getMode(a.options,a.doc.modeOption),z(a)}function z(a){a.doc.iter(function(a){a.stateAfter&&(a.stateAfter=null),a.styles&&(a.styles=null)}),a.doc.frontier=a.doc.first,Tb(a,100),a.state.modeGen++,a.curOp&&Pc(a)}function A(a){a.options.lineWrapping?(eh(a.display.wrapper,"CodeMirror-wrap"),a.display.sizer.style.minWidth=""):(dh(a.display.wrapper,"CodeMirror-wrap"),I(a)),C(a),Pc(a),kc(a),setTimeout(function(){M(a)},100)}function B(a){var b=wc(a.display),c=a.options.lineWrapping,d=c&&Math.max(5,a.display.scroller.clientWidth/xc(a.display)-3);return function(e){if(ef(a.doc,e))return 0;var f=0;if(e.widgets)for(var g=0;g<e.widgets.length;g++)e.widgets[g].height&&(f+=e.widgets[g].height);return c?f+(Math.ceil(e.text.length/d)||1)*b:f+b}}function C(a){var b=a.doc,c=B(a);b.iter(function(a){var b=c(a);b!=a.height&&Tf(a,b)})}function D(a){a.display.wrapper.className=a.display.wrapper.className.replace(/\s*cm-s-\S+/g,"")+a.options.theme.replace(/(^|\s)\s*/g," cm-s-"),kc(a)}function E(a){F(a),Pc(a),setTimeout(function(){O(a)},20)}function F(a){var b=a.display.gutters,c=a.options.gutters;$g(b);for(var d=0;d<c.length;++d){var e=c[d],f=b.appendChild(Yg("div",null,"CodeMirror-gutter "+e));"CodeMirror-linenumbers"==e&&(a.display.lineGutter=f,f.style.width=(a.display.lineNumWidth||1)+"px")}b.style.display=d?"":"none",G(a)}function G(a){var b=a.display.gutters.offsetWidth;a.display.sizer.style.marginLeft=b+"px",a.display.scrollbarH.style.left=a.options.fixedGutter?b+"px":0}function H(a){if(0==a.height)return 0;for(var c,b=a.text.length,d=a;c=Ze(d);){var e=c.find(0,!0);d=e.from.line,b+=e.from.ch-e.to.ch}for(d=a;c=$e(d);){var e=c.find(0,!0);b-=d.text.length-e.from.ch,d=e.to.line,b+=d.text.length-e.to.ch}return b}function I(a){var b=a.display,c=a.doc;b.maxLine=Qf(c,c.first),b.maxLineLength=H(b.maxLine),b.maxLineChanged=!0,c.iter(function(a){var c=H(a);c>b.maxLineLength&&(b.maxLineLength=c,b.maxLine=a)})}function J(a){var b=Ng(a.gutters,"CodeMirror-linenumbers");-1==b&&a.lineNumbers?a.gutters=a.gutters.concat(["CodeMirror-linenumbers"]):b>-1&&!a.lineNumbers&&(a.gutters=a.gutters.slice(0),a.gutters.splice(b,1))}function K(a){return a.display.scroller.clientHeight-a.display.wrapper.clientHeight<Bg-3}function L(a){var b=a.display.scroller;return{clientHeight:b.clientHeight,barHeight:a.display.scrollbarV.clientHeight,scrollWidth:b.scrollWidth,clientWidth:b.clientWidth,hScrollbarTakesSpace:K(a),barWidth:a.display.scrollbarH.clientWidth,docHeight:Math.round(a.doc.height+Yb(a.display))}}function M(a,b){b||(b=L(a));var c=a.display,d=mh(c.measure),e=b.docHeight+Bg,f=b.scrollWidth>b.clientWidth;f&&b.scrollWidth<=b.clientWidth+1&&d>0&&!b.hScrollbarTakesSpace&&(f=!1);var g=e>b.clientHeight;if(g?(c.scrollbarV.style.display="block",c.scrollbarV.style.bottom=f?d+"px":"0",c.scrollbarV.firstChild.style.height=Math.max(0,e-b.clientHeight+(b.barHeight||c.scrollbarV.clientHeight))+"px"):(c.scrollbarV.style.display="",c.scrollbarV.firstChild.style.height="0"),f?(c.scrollbarH.style.display="block",c.scrollbarH.style.right=g?d+"px":"0",c.scrollbarH.firstChild.style.width=b.scrollWidth-b.clientWidth+(b.barWidth||c.scrollbarH.clientWidth)+"px"):(c.scrollbarH.style.display="",c.scrollbarH.firstChild.style.width="0"),f&&g?(c.scrollbarFiller.style.display="block",c.scrollbarFiller.style.height=c.scrollbarFiller.style.width=d+"px"):c.scrollbarFiller.style.display="",f&&a.options.coverGutterNextToScrollbar&&a.options.fixedGutter?(c.gutterFiller.style.display="block",c.gutterFiller.style.height=d+"px",c.gutterFiller.style.width=c.gutters.offsetWidth+"px"):c.gutterFiller.style.display="",!a.state.checkedOverlayScrollbar&&b.clientHeight>0){if(0===d){var h=p&&!l?"12px":"18px";c.scrollbarV.style.minWidth=c.scrollbarH.style.minHeight=h;var i=function(b){pg(b)!=c.scrollbarV&&pg(b)!=c.scrollbarH&&Kc(a,gd)(b)};rg(c.scrollbarV,"mousedown",i),rg(c.scrollbarH,"mousedown",i)}a.state.checkedOverlayScrollbar=!0}}function N(a,b,c){var d=c&&null!=c.top?Math.max(0,c.top):a.scroller.scrollTop;d=Math.floor(d-Xb(a));var e=c&&null!=c.bottom?c.bottom:d+a.wrapper.clientHeight,f=Vf(b,d),g=Vf(b,e);if(c&&c.ensure){var h=c.ensure.from.line,i=c.ensure.to.line;if(f>h)return{from:h,to:Vf(b,Wf(Qf(b,h))+a.wrapper.clientHeight)};if(Math.min(i,b.lastLine())>=g)return{from:Vf(b,Wf(Qf(b,i))-a.wrapper.clientHeight),to:i}}return{from:f,to:Math.max(g,f+1)}}function O(a){var b=a.display,c=b.view;if(b.alignWidgets||b.gutters.firstChild&&a.options.fixedGutter){for(var d=R(b)-b.scroller.scrollLeft+a.doc.scrollLeft,e=b.gutters.offsetWidth,f=d+"px",g=0;g<c.length;g++)if(!c[g].hidden){a.options.fixedGutter&&c[g].gutter&&(c[g].gutter.style.left=f);var h=c[g].alignable;if(h)for(var i=0;i<h.length;i++)h[i].style.left=f}a.options.fixedGutter&&(b.gutters.style.left=d+e+"px")}}function P(a){if(!a.options.lineNumbers)return!1;var b=a.doc,c=Q(a.options,b.first+b.size-1),d=a.display;if(c.length!=d.lineNumChars){var e=d.measure.appendChild(Yg("div",[Yg("div",c)],"CodeMirror-linenumber CodeMirror-gutter-elt")),f=e.firstChild.offsetWidth,g=e.offsetWidth-f;return d.lineGutter.style.width="",d.lineNumInnerWidth=Math.max(f,d.lineGutter.offsetWidth-g),d.lineNumWidth=d.lineNumInnerWidth+g,d.lineNumChars=d.lineNumInnerWidth?c.length:-1,d.lineGutter.style.width=d.lineNumWidth+"px",G(a),!0}return!1}function Q(a,b){return String(a.lineNumberFormatter(b+a.firstLineNumber))}function R(a){return a.scroller.getBoundingClientRect().left-a.sizer.getBoundingClientRect().left}function S(a,b,c){var d=a.display;this.viewport=b,this.visible=N(d,a.doc,b),this.editorIsHidden=!d.wrapper.offsetWidth,this.wrapperHeight=d.wrapper.clientHeight,this.wrapperWidth=d.wrapper.clientWidth,this.oldViewFrom=d.viewFrom,this.oldViewTo=d.viewTo,this.oldScrollerWidth=d.scroller.clientWidth,this.force=c,this.dims=$(a)}function T(a,b){var c=a.display,d=a.doc;if(b.editorIsHidden)return Rc(a),!1;if(!b.force&&b.visible.from>=c.viewFrom&&b.visible.to<=c.viewTo&&(null==c.updateLineNumbers||c.updateLineNumbers>=c.viewTo)&&0==Vc(a))return!1;P(a)&&(Rc(a),b.dims=$(a));var e=d.first+d.size,f=Math.max(b.visible.from-a.options.viewportMargin,d.first),g=Math.min(e,b.visible.to+a.options.viewportMargin);c.viewFrom<f&&f-c.viewFrom<20&&(f=Math.max(d.first,c.viewFrom)),c.viewTo>g&&c.viewTo-g<20&&(g=Math.min(e,c.viewTo)),v&&(f=cf(a.doc,f),g=df(a.doc,g));var h=f!=c.viewFrom||g!=c.viewTo||c.lastWrapHeight!=b.wrapperHeight||c.lastWrapWidth!=b.wrapperWidth;Uc(a,f,g),c.viewOffset=Wf(Qf(a.doc,c.viewFrom)),a.display.mover.style.top=c.viewOffset+"px";var i=Vc(a);if(!h&&0==i&&!b.force&&(null==c.updateLineNumbers||c.updateLineNumbers>=c.viewTo))return!1;var j=bh();return i>4&&(c.lineDiv.style.display="none"),_(a,c.updateLineNumbers,b.dims),i>4&&(c.lineDiv.style.display=""),j&&bh()!=j&&j.offsetHeight&&j.focus(),$g(c.cursorDiv),$g(c.selectionDiv),h&&(c.lastWrapHeight=b.wrapperHeight,c.lastWrapWidth=b.wrapperWidth,Tb(a,400)),c.updateLineNumbers=null,!0}function U(a,b){for(var c=b.force,d=b.viewport,e=!0;;e=!1){if(e&&a.options.lineWrapping&&b.oldScrollerWidth!=a.display.scroller.clientWidth)c=!0;else if(c=!1,d&&null!=d.top&&(d={top:Math.min(a.doc.height+Yb(a.display)-Bg-a.display.scroller.clientHeight,d.top)}),b.visible=N(a.display,a.doc,d),b.visible.from>=a.display.viewFrom&&b.visible.to<=a.display.viewTo)break;if(!T(a,b))break;Y(a);var f=L(a);Pb(a),W(a,f),M(a,f)}vg(a,"update",a),(a.display.viewFrom!=b.oldViewFrom||a.display.viewTo!=b.oldViewTo)&&vg(a,"viewportChange",a,a.display.viewFrom,a.display.viewTo)}function V(a,b){var c=new S(a,b);if(T(a,c)){Y(a),U(a,c);var d=L(a);Pb(a),W(a,d),M(a,d)}}function W(a,b){a.display.sizer.style.minHeight=a.display.heightForcer.style.top=b.docHeight+"px",a.display.gutters.style.height=Math.max(b.docHeight,b.clientHeight-Bg)+"px"}function X(a,b){a.display.sizer.offsetWidth+a.display.gutters.offsetWidth<a.display.scroller.clientWidth-1&&(a.display.sizer.style.minHeight=a.display.heightForcer.style.top="0px",a.display.gutters.style.height=b.docHeight+"px")}function Y(a){for(var b=a.display,c=b.lineDiv.offsetTop,f=0;f<b.view.length;f++){var h,g=b.view[f];if(!g.hidden){if(d&&8>e){var i=g.node.offsetTop+g.node.offsetHeight;h=i-c,c=i}else{var j=g.node.getBoundingClientRect();h=j.bottom-j.top}var k=g.line.height-h;if(2>h&&(h=wc(b)),(k>.001||-.001>k)&&(Tf(g.line,h),Z(g.line),g.rest))for(var l=0;l<g.rest.length;l++)Z(g.rest[l])}}}function Z(a){if(a.widgets)for(var b=0;b<a.widgets.length;++b)a.widgets[b].height=a.widgets[b].node.offsetHeight}function $(a){for(var b=a.display,c={},d={},e=b.gutters.clientLeft,f=b.gutters.firstChild,g=0;f;f=f.nextSibling,++g)c[a.options.gutters[g]]=f.offsetLeft+f.clientLeft+e,d[a.options.gutters[g]]=f.clientWidth;return{fixedPos:R(b),gutterTotalWidth:b.gutters.offsetWidth,gutterLeft:c,gutterWidth:d,wrapperWidth:b.wrapper.clientWidth}}function _(a,b,c){function i(b){var c=b.nextSibling;return f&&p&&a.display.currentWheelTarget==b?b.style.display="none":b.parentNode.removeChild(b),c}for(var d=a.display,e=a.options.lineNumbers,g=d.lineDiv,h=g.firstChild,j=d.view,k=d.viewFrom,l=0;l<j.length;l++){var m=j[l];if(m.hidden);else if(m.node){for(;h!=m.node;)h=i(h);var o=e&&null!=b&&k>=b&&m.lineNumber;m.changes&&(Ng(m.changes,"gutter")>-1&&(o=!1),ab(a,m,k,c)),o&&($g(m.lineNumber),m.lineNumber.appendChild(document.createTextNode(Q(a.options,k)))),h=m.node.nextSibling}else{var n=ib(a,m,k,c);g.insertBefore(n,h)}k+=m.size}for(;h;)h=i(h)}function ab(a,b,c,d){for(var e=0;e<b.changes.length;e++){var f=b.changes[e];"text"==f?eb(a,b):"gutter"==f?gb(a,b,c,d):"class"==f?fb(b):"widget"==f&&hb(b,d)}b.changes=null}function bb(a){return a.node==a.text&&(a.node=Yg("div",null,null,"position: relative"),a.text.parentNode&&a.text.parentNode.replaceChild(a.node,a.text),a.node.appendChild(a.text),d&&8>e&&(a.node.style.zIndex=2)),a.node}function cb(a){var b=a.bgClass?a.bgClass+" "+(a.line.bgClass||""):a.line.bgClass;if(b&&(b+=" CodeMirror-linebackground"),a.background)b?a.background.className=b:(a.background.parentNode.removeChild(a.background),a.background=null);else if(b){var c=bb(a);a.background=c.insertBefore(Yg("div",null,b),c.firstChild)}}function db(a,b){var c=a.display.externalMeasured;return c&&c.line==b.line?(a.display.externalMeasured=null,b.measure=c.measure,c.built):zf(a,b)}function eb(a,b){var c=b.text.className,d=db(a,b);b.text==b.node&&(b.node=d.pre),b.text.parentNode.replaceChild(d.pre,b.text),b.text=d.pre,d.bgClass!=b.bgClass||d.textClass!=b.textClass?(b.bgClass=d.bgClass,b.textClass=d.textClass,fb(b)):c&&(b.text.className=c)}function fb(a){cb(a),a.line.wrapClass?bb(a).className=a.line.wrapClass:a.node!=a.text&&(a.node.className="");var b=a.textClass?a.textClass+" "+(a.line.textClass||""):a.line.textClass;a.text.className=b||""}function gb(a,b,c,d){b.gutter&&(b.node.removeChild(b.gutter),b.gutter=null);var e=b.line.gutterMarkers;if(a.options.lineNumbers||e){var f=bb(b),g=b.gutter=f.insertBefore(Yg("div",null,"CodeMirror-gutter-wrapper","left: "+(a.options.fixedGutter?d.fixedPos:-d.gutterTotalWidth)+"px; width: "+d.gutterTotalWidth+"px"),b.text);if(b.line.gutterClass&&(g.className+=" "+b.line.gutterClass),!a.options.lineNumbers||e&&e["CodeMirror-linenumbers"]||(b.lineNumber=g.appendChild(Yg("div",Q(a.options,c),"CodeMirror-linenumber CodeMirror-gutter-elt","left: "+d.gutterLeft["CodeMirror-linenumbers"]+"px; width: "+a.display.lineNumInnerWidth+"px"))),e)for(var h=0;h<a.options.gutters.length;++h){var i=a.options.gutters[h],j=e.hasOwnProperty(i)&&e[i];j&&g.appendChild(Yg("div",[j],"CodeMirror-gutter-elt","left: "+d.gutterLeft[i]+"px; width: "+d.gutterWidth[i]+"px"))}}}function hb(a,b){a.alignable&&(a.alignable=null);for(var d,c=a.node.firstChild;c;c=d){var d=c.nextSibling;"CodeMirror-linewidget"==c.className&&a.node.removeChild(c)}jb(a,b)}function ib(a,b,c,d){var e=db(a,b);return b.text=b.node=e.pre,e.bgClass&&(b.bgClass=e.bgClass),e.textClass&&(b.textClass=e.textClass),fb(b),gb(a,b,c,d),jb(b,d),b.node}function jb(a,b){if(kb(a.line,a,b,!0),a.rest)for(var c=0;c<a.rest.length;c++)kb(a.rest[c],a,b,!1)}function kb(a,b,c,d){if(a.widgets)for(var e=bb(b),f=0,g=a.widgets;f<g.length;++f){var h=g[f],i=Yg("div",[h.node],"CodeMirror-linewidget");h.handleMouseEvents||(i.ignoreEvents=!0),lb(h,i,b,c),d&&h.above?e.insertBefore(i,b.gutter||b.text):e.appendChild(i),vg(h,"redraw")}}function lb(a,b,c,d){if(a.noHScroll){(c.alignable||(c.alignable=[])).push(b);var e=d.wrapperWidth;b.style.left=d.fixedPos+"px",a.coverGutter||(e-=d.gutterTotalWidth,b.style.paddingLeft=d.gutterTotalWidth+"px"),b.style.width=e+"px"}a.coverGutter&&(b.style.zIndex=5,b.style.position="relative",a.noHScroll||(b.style.marginLeft=-d.gutterTotalWidth+"px"))}function ob(a){return mb(a.line,a.ch)}function pb(a,b){return nb(a,b)<0?b:a}function qb(a,b){return nb(a,b)<0?a:b}function rb(a,b){this.ranges=a,this.primIndex=b}function sb(a,b){this.anchor=a,this.head=b}function tb(a,b){var c=a[b];a.sort(function(a,b){return nb(a.from(),b.from())}),b=Ng(a,c);for(var d=1;d<a.length;d++){var e=a[d],f=a[d-1];if(nb(f.to(),e.from())>=0){var g=qb(f.from(),e.from()),h=pb(f.to(),e.to()),i=f.empty()?e.from()==e.head:f.from()==f.head;b>=d&&--b,a.splice(--d,2,new sb(i?h:g,i?g:h))}}return new rb(a,b)}function ub(a,b){return new rb([new sb(a,b||a)],0)}function vb(a,b){return Math.max(a.first,Math.min(b,a.first+a.size-1))}function wb(a,b){if(b.line<a.first)return mb(a.first,0);var c=a.first+a.size-1;return b.line>c?mb(c,Qf(a,c).text.length):xb(b,Qf(a,b.line).text.length)}function xb(a,b){var c=a.ch;return null==c||c>b?mb(a.line,b):0>c?mb(a.line,0):a}function yb(a,b){return b>=a.first&&b<a.first+a.size}function zb(a,b){for(var c=[],d=0;d<b.length;d++)c[d]=wb(a,b[d]);return c}function Ab(a,b,c,d){if(a.cm&&a.cm.display.shift||a.extend){var e=b.anchor;if(d){var f=nb(c,e)<0;f!=nb(d,e)<0?(e=c,c=d):f!=nb(c,d)<0&&(c=d)}return new sb(e,c)}return new sb(d||c,c)}function Bb(a,b,c,d){Hb(a,new rb([Ab(a,a.sel.primary(),b,c)],0),d)}function Cb(a,b,c){for(var d=[],e=0;e<a.sel.ranges.length;e++)d[e]=Ab(a,a.sel.ranges[e],b[e],null);var f=tb(d,a.sel.primIndex);Hb(a,f,c)}function Db(a,b,c,d){var e=a.sel.ranges.slice(0);e[b]=c,Hb(a,tb(e,a.sel.primIndex),d)}function Eb(a,b,c,d){Hb(a,ub(b,c),d)}function Fb(a,b){var c={ranges:b.ranges,update:function(b){this.ranges=[];for(var c=0;c<b.length;c++)this.ranges[c]=new sb(wb(a,b[c].anchor),wb(a,b[c].head))}};return tg(a,"beforeSelectionChange",a,c),a.cm&&tg(a.cm,"beforeSelectionChange",a.cm,c),c.ranges!=b.ranges?tb(c.ranges,c.ranges.length-1):b}function Gb(a,b,c){var d=a.history.done,e=Lg(d);e&&e.ranges?(d[d.length-1]=b,Ib(a,b,c)):Hb(a,b,c)}function Hb(a,b,c){Ib(a,b,c),cg(a,a.sel,a.cm?a.cm.curOp.id:0/0,c)}function Ib(a,b,c){(zg(a,"beforeSelectionChange")||a.cm&&zg(a.cm,"beforeSelectionChange"))&&(b=Fb(a,b));var d=c&&c.bias||(nb(b.primary().head,a.sel.primary().head)<0?-1:1);Jb(a,Lb(a,b,d,!0)),c&&c.scroll===!1||!a.cm||be(a.cm)}function Jb(a,b){b.equals(a.sel)||(a.sel=b,a.cm&&(a.cm.curOp.updateInput=a.cm.curOp.selectionChanged=!0,yg(a.cm)),vg(a,"cursorActivity",a))}function Kb(a){Jb(a,Lb(a,a.sel,null,!1),Dg)}function Lb(a,b,c,d){for(var e,f=0;f<b.ranges.length;f++){var g=b.ranges[f],h=Mb(a,g.anchor,c,d),i=Mb(a,g.head,c,d);(e||h!=g.anchor||i!=g.head)&&(e||(e=b.ranges.slice(0,f)),e[f]=new sb(h,i))}return e?tb(e,b.primIndex):b}function Mb(a,b,c,d){var e=!1,f=b,g=c||1;a.cantEdit=!1;a:for(;;){var h=Qf(a,f.line);if(h.markedSpans)for(var i=0;i<h.markedSpans.length;++i){var j=h.markedSpans[i],k=j.marker;if((null==j.from||(k.inclusiveLeft?j.from<=f.ch:j.from<f.ch))&&(null==j.to||(k.inclusiveRight?j.to>=f.ch:j.to>f.ch))){if(d&&(tg(k,"beforeCursorEnter"),k.explicitlyCleared)){if(h.markedSpans){--i;continue}break}if(!k.atomic)continue;var l=k.find(0>g?-1:1);if(0==nb(l,f)&&(l.ch+=g,l.ch<0?l=l.line>a.first?wb(a,mb(l.line-1)):null:l.ch>h.text.length&&(l=l.line<a.first+a.size-1?mb(l.line+1,0):null),!l)){if(e)return d?(a.cantEdit=!0,mb(a.first,0)):Mb(a,b,c,!0);e=!0,l=b,g=-g}f=l;continue a}}return f}}function Nb(a){for(var b=a.display,c=a.doc,d={},e=d.cursors=document.createDocumentFragment(),f=d.selection=document.createDocumentFragment(),g=0;g<c.sel.ranges.length;g++){var h=c.sel.ranges[g],i=h.empty();(i||a.options.showCursorWhenSelecting)&&Qb(a,h,e),i||Rb(a,h,f)}if(a.options.moveInputWithCursor){var j=qc(a,c.sel.primary().head,"div"),k=b.wrapper.getBoundingClientRect(),l=b.lineDiv.getBoundingClientRect();d.teTop=Math.max(0,Math.min(b.wrapper.clientHeight-10,j.top+l.top-k.top)),d.teLeft=Math.max(0,Math.min(b.wrapper.clientWidth-10,j.left+l.left-k.left))}return d}function Ob(a,b){_g(a.display.cursorDiv,b.cursors),_g(a.display.selectionDiv,b.selection),null!=b.teTop&&(a.display.inputDiv.style.top=b.teTop+"px",a.display.inputDiv.style.left=b.teLeft+"px")}function Pb(a){Ob(a,Nb(a))}function Qb(a,b,c){var d=qc(a,b.head,"div",null,null,!a.options.singleCursorHeightPerLine),e=c.appendChild(Yg("div","\xa0","CodeMirror-cursor"));if(e.style.left=d.left+"px",e.style.top=d.top+"px",e.style.height=Math.max(0,d.bottom-d.top)*a.options.cursorHeight+"px",d.other){var f=c.appendChild(Yg("div","\xa0","CodeMirror-cursor CodeMirror-secondarycursor"));f.style.display="",f.style.left=d.other.left+"px",f.style.top=d.other.top+"px",f.style.height=.85*(d.other.bottom-d.other.top)+"px"}}function Rb(a,b,c){function j(a,b,c,d){0>b&&(b=0),b=Math.round(b),d=Math.round(d),f.appendChild(Yg("div",null,"CodeMirror-selected","position: absolute; left: "+a+"px; top: "+b+"px; width: "+(null==c?i-a:c)+"px; height: "+(d-b)+"px"))}function k(b,c,d){function m(c,d){return pc(a,mb(b,c),"div",f,d)}var k,l,f=Qf(e,b),g=f.text.length;return xh(Xf(f),c||0,null==d?g:d,function(a,b,e){var n,o,p,f=m(a,"left");if(a==b)n=f,o=p=f.left;else{if(n=m(b-1,"right"),"rtl"==e){var q=f;f=n,n=q}o=f.left,p=n.right}null==c&&0==a&&(o=h),n.top-f.top>3&&(j(o,f.top,null,f.bottom),o=h,f.bottom<n.top&&j(o,f.bottom,null,n.top)),null==d&&b==g&&(p=i),(!k||f.top<k.top||f.top==k.top&&f.left<k.left)&&(k=f),(!l||n.bottom>l.bottom||n.bottom==l.bottom&&n.right>l.right)&&(l=n),h+1>o&&(o=h),j(o,n.top,p-o,n.bottom)}),{start:k,end:l}}var d=a.display,e=a.doc,f=document.createDocumentFragment(),g=Zb(a.display),h=g.left,i=d.lineSpace.offsetWidth-g.right,l=b.from(),m=b.to();if(l.line==m.line)k(l.line,l.ch,m.ch);else{var n=Qf(e,l.line),o=Qf(e,m.line),p=af(n)==af(o),q=k(l.line,l.ch,p?n.text.length+1:null).end,r=k(m.line,p?0:null,m.ch).start;p&&(q.top<r.top-2?(j(q.right,q.top,null,q.bottom),j(h,r.top,r.left,r.bottom)):j(q.right,q.top,r.left-q.right,q.bottom)),q.bottom<r.top&&j(h,q.bottom,null,r.top)}c.appendChild(f)}function Sb(a){if(a.state.focused){var b=a.display;clearInterval(b.blinker);var c=!0;b.cursorDiv.style.visibility="",a.options.cursorBlinkRate>0?b.blinker=setInterval(function(){b.cursorDiv.style.visibility=(c=!c)?"":"hidden"},a.options.cursorBlinkRate):a.options.cursorBlinkRate<0&&(b.cursorDiv.style.visibility="hidden")}}function Tb(a,b){a.doc.mode.startState&&a.doc.frontier<a.display.viewTo&&a.state.highlight.set(b,Rg(Ub,a))}function Ub(a){var b=a.doc;if(b.frontier<b.first&&(b.frontier=b.first),!(b.frontier>=a.display.viewTo)){var c=+new Date+a.options.workTime,d=re(b.mode,Wb(a,b.frontier)),e=[];b.iter(b.frontier,Math.min(b.first+b.size,a.display.viewTo+500),function(f){if(b.frontier>=a.display.viewFrom){var g=f.styles,h=tf(a,f,d,!0);f.styles=h.styles;var i=f.styleClasses,j=h.classes;j?f.styleClasses=j:i&&(f.styleClasses=null);for(var k=!g||g.length!=f.styles.length||i!=j&&(!i||!j||i.bgClass!=j.bgClass||i.textClass!=j.textClass),l=0;!k&&l<g.length;++l)k=g[l]!=f.styles[l];k&&e.push(b.frontier),f.stateAfter=re(b.mode,d)}else vf(a,f.text,d),f.stateAfter=0==b.frontier%5?re(b.mode,d):null;return++b.frontier,+new Date>c?(Tb(a,a.options.workDelay),!0):void 0}),e.length&&Jc(a,function(){for(var b=0;b<e.length;b++)Qc(a,e[b],"text")})}}function Vb(a,b,c){for(var d,e,f=a.doc,g=c?-1:b-(a.doc.mode.innerMode?1e3:100),h=b;h>g;--h){if(h<=f.first)return f.first;var i=Qf(f,h-1);if(i.stateAfter&&(!c||h<=f.frontier))return h;var j=Hg(i.text,null,a.options.tabSize);(null==e||d>j)&&(e=h-1,d=j)}return e}function Wb(a,b,c){var d=a.doc,e=a.display;if(!d.mode.startState)return!0;var f=Vb(a,b,c),g=f>d.first&&Qf(d,f-1).stateAfter;return g=g?re(d.mode,g):se(d.mode),d.iter(f,b,function(c){vf(a,c.text,g);var h=f==b-1||0==f%5||f>=e.viewFrom&&f<e.viewTo;c.stateAfter=h?re(d.mode,g):null,++f}),c&&(d.frontier=f),g}function Xb(a){return a.lineSpace.offsetTop}function Yb(a){return a.mover.offsetHeight-a.lineSpace.offsetHeight}function Zb(a){if(a.cachedPaddingH)return a.cachedPaddingH;var b=_g(a.measure,Yg("pre","x")),c=window.getComputedStyle?window.getComputedStyle(b):b.currentStyle,d={left:parseInt(c.paddingLeft),right:parseInt(c.paddingRight)};return isNaN(d.left)||isNaN(d.right)||(a.cachedPaddingH=d),d}function $b(a,b,c){var d=a.options.lineWrapping,e=d&&a.display.scroller.clientWidth;if(!b.measure.heights||d&&b.measure.width!=e){var f=b.measure.heights=[];if(d){b.measure.width=e;for(var g=b.text.firstChild.getClientRects(),h=0;h<g.length-1;h++){var i=g[h],j=g[h+1];Math.abs(i.bottom-j.bottom)>2&&f.push((i.bottom+j.top)/2-c.top)}}f.push(c.bottom-c.top)}}function _b(a,b,c){if(a.line==b)return{map:a.measure.map,cache:a.measure.cache};for(var d=0;d<a.rest.length;d++)if(a.rest[d]==b)return{map:a.measure.maps[d],cache:a.measure.caches[d]};for(var d=0;d<a.rest.length;d++)if(Uf(a.rest[d])>c)return{map:a.measure.maps[d],cache:a.measure.caches[d],before:!0}}function ac(a,b){b=af(b);var c=Uf(b),d=a.display.externalMeasured=new Nc(a.doc,b,c);d.lineN=c;var e=d.built=zf(a,d);return d.text=e.pre,_g(a.display.lineMeasure,e.pre),d}function bc(a,b,c,d){return ec(a,dc(a,b),c,d)}function cc(a,b){if(b>=a.display.viewFrom&&b<a.display.viewTo)return a.display.view[Sc(a,b)];var c=a.display.externalMeasured;return c&&b>=c.lineN&&b<c.lineN+c.size?c:void 0}function dc(a,b){var c=Uf(b),d=cc(a,c);d&&!d.text?d=null:d&&d.changes&&ab(a,d,c,$(a)),d||(d=ac(a,b));var e=_b(d,b,c);return{line:b,view:d,rect:null,map:e.map,cache:e.cache,before:e.before,hasHeights:!1}}function ec(a,b,c,d,e){b.before&&(c=-1);var g,f=c+(d||"");return b.cache.hasOwnProperty(f)?g=b.cache[f]:(b.rect||(b.rect=b.view.text.getBoundingClientRect()),b.hasHeights||($b(a,b.view,b.rect),b.hasHeights=!0),g=gc(a,b,c,d),g.bogus||(b.cache[f]=g)),{left:g.left,right:g.right,top:e?g.rtop:g.top,bottom:e?g.rbottom:g.bottom}}function gc(a,b,c,f){for(var h,i,j,k,g=b.map,l=0;l<g.length;l+=3){var m=g[l],n=g[l+1];if(m>c?(i=0,j=1,k="left"):n>c?(i=c-m,j=i+1):(l==g.length-3||c==n&&g[l+3]>c)&&(j=n-m,i=j-1,c>=n&&(k="right")),null!=i){if(h=g[l+2],m==n&&f==(h.insertLeft?"left":"right")&&(k=f),"left"==f&&0==i)for(;l&&g[l-2]==g[l-3]&&g[l-1].insertLeft;)h=g[(l-=3)+2],k="left";if("right"==f&&i==n-m)for(;l<g.length-3&&g[l+3]==g[l+4]&&!g[l+5].insertLeft;)h=g[(l+=3)+2],k="right";break}}var o;if(3==h.nodeType){for(var l=0;4>l;l++){for(;i&&Xg(b.line.text.charAt(m+i));)--i;for(;n>m+j&&Xg(b.line.text.charAt(m+j));)++j;if(d&&9>e&&0==i&&j==n-m)o=h.parentNode.getBoundingClientRect();else if(d&&a.options.lineWrapping){var p=Zg(h,i,j).getClientRects();o=p.length?p["right"==f?p.length-1:0]:fc}else o=Zg(h,i,j).getBoundingClientRect()||fc;if(o.left||o.right||0==i)break;j=i,i-=1,k="right"}d&&11>e&&(o=hc(a.display.measure,o))}else{i>0&&(k=f="right");var p;o=a.options.lineWrapping&&(p=h.getClientRects()).length>1?p["right"==f?p.length-1:0]:h.getBoundingClientRect()}if(d&&9>e&&!i&&(!o||!o.left&&!o.right)){var q=h.parentNode.getClientRects()[0];o=q?{left:q.left,right:q.left+xc(a.display),top:q.top,bottom:q.bottom}:fc}for(var r=o.top-b.rect.top,s=o.bottom-b.rect.top,t=(r+s)/2,u=b.view.measure.heights,l=0;l<u.length-1&&!(t<u[l]);l++);var v=l?u[l-1]:0,w=u[l],x={left:("right"==k?o.right:o.left)-b.rect.left,right:("left"==k?o.left:o.right)-b.rect.left,top:v,bottom:w};return o.left||o.right||(x.bogus=!0),a.options.singleCursorHeightPerLine||(x.rtop=r,x.rbottom=s),x}function hc(a,b){if(!window.screen||null==screen.logicalXDPI||screen.logicalXDPI==screen.deviceXDPI||!vh(a))return b;var c=screen.logicalXDPI/screen.deviceXDPI,d=screen.logicalYDPI/screen.deviceYDPI;return{left:b.left*c,right:b.right*c,top:b.top*d,bottom:b.bottom*d}}function ic(a){if(a.measure&&(a.measure.cache={},a.measure.heights=null,a.rest))for(var b=0;b<a.rest.length;b++)a.measure.caches[b]={}}function jc(a){a.display.externalMeasure=null,$g(a.display.lineMeasure);for(var b=0;b<a.display.view.length;b++)ic(a.display.view[b])}function kc(a){jc(a),a.display.cachedCharWidth=a.display.cachedTextHeight=a.display.cachedPaddingH=null,a.options.lineWrapping||(a.display.maxLineChanged=!0),a.display.lineNumChars=null}function lc(){return window.pageXOffset||(document.documentElement||document.body).scrollLeft}function mc(){return window.pageYOffset||(document.documentElement||document.body).scrollTop}function nc(a,b,c,d){if(b.widgets)for(var e=0;e<b.widgets.length;++e)if(b.widgets[e].above){var f=jf(b.widgets[e]);c.top+=f,c.bottom+=f}if("line"==d)return c;d||(d="local");var g=Wf(b);if("local"==d?g+=Xb(a.display):g-=a.display.viewOffset,"page"==d||"window"==d){var h=a.display.lineSpace.getBoundingClientRect();g+=h.top+("window"==d?0:mc());var i=h.left+("window"==d?0:lc());c.left+=i,c.right+=i}return c.top+=g,c.bottom+=g,c}function oc(a,b,c){if("div"==c)return b;var d=b.left,e=b.top;if("page"==c)d-=lc(),e-=mc();else if("local"==c||!c){var f=a.display.sizer.getBoundingClientRect();d+=f.left,e+=f.top}var g=a.display.lineSpace.getBoundingClientRect();return{left:d-g.left,top:e-g.top}}function pc(a,b,c,d,e){return d||(d=Qf(a.doc,b.line)),nc(a,d,bc(a,d,b.ch,e),c)}function qc(a,b,c,d,e,f){function g(b,g){var h=ec(a,e,b,g?"right":"left",f);return g?h.left=h.right:h.right=h.left,nc(a,d,h,c)}function h(a,b){var c=i[b],d=c.level%2;return a==yh(c)&&b&&c.level<i[b-1].level?(c=i[--b],a=zh(c)-(c.level%2?0:1),d=!0):a==zh(c)&&b<i.length-1&&c.level<i[b+1].level&&(c=i[++b],a=yh(c)-c.level%2,d=!1),d&&a==c.to&&a>c.from?g(a-1):g(a,d)}d=d||Qf(a.doc,b.line),e||(e=dc(a,d));var i=Xf(d),j=b.ch;if(!i)return g(j);var k=Hh(i,j),l=h(j,k);return null!=Gh&&(l.other=h(j,Gh)),l}function rc(a,b){var c=0,b=wb(a.doc,b);a.options.lineWrapping||(c=xc(a.display)*b.ch);var d=Qf(a.doc,b.line),e=Wf(d)+Xb(a.display);return{left:c,right:c,top:e,bottom:e+d.height}}function sc(a,b,c,d){var e=mb(a,b);return e.xRel=d,c&&(e.outside=!0),e}function tc(a,b,c){var d=a.doc;if(c+=a.display.viewOffset,0>c)return sc(d.first,0,!0,-1);var e=Vf(d,c),f=d.first+d.size-1;if(e>f)return sc(d.first+d.size-1,Qf(d,f).text.length,!0,1);0>b&&(b=0);for(var g=Qf(d,e);;){var h=uc(a,g,e,b,c),i=$e(g),j=i&&i.find(0,!0);if(!i||!(h.ch>j.from.ch||h.ch==j.from.ch&&h.xRel>0))return h;e=Uf(g=j.to.line)}}function uc(a,b,c,d,e){function j(d){var e=qc(a,mb(c,d),"line",b,i);return g=!0,f>e.bottom?e.left-h:f<e.top?e.left+h:(g=!1,e.left)}var f=e-Wf(b),g=!1,h=2*a.display.wrapper.clientWidth,i=dc(a,b),k=Xf(b),l=b.text.length,m=Ah(b),n=Bh(b),o=j(m),p=g,q=j(n),r=g;if(d>q)return sc(c,n,r,1);for(;;){if(k?n==m||n==Jh(b,m,1):1>=n-m){for(var s=o>d||q-d>=d-o?m:n,t=d-(s==m?o:q);Xg(b.text.charAt(s));)++s;var u=sc(c,s,s==m?p:r,-1>t?-1:t>1?1:0);return u}var v=Math.ceil(l/2),w=m+v;if(k){w=m;for(var x=0;v>x;++x)w=Jh(b,w,1)}var y=j(w);y>d?(n=w,q=y,(r=g)&&(q+=1e3),l=v):(m=w,o=y,p=g,l-=v)}}function wc(a){if(null!=a.cachedTextHeight)return a.cachedTextHeight;if(null==vc){vc=Yg("pre");for(var b=0;49>b;++b)vc.appendChild(document.createTextNode("x")),vc.appendChild(Yg("br"));vc.appendChild(document.createTextNode("x"))}_g(a.measure,vc);var c=vc.offsetHeight/50;return c>3&&(a.cachedTextHeight=c),$g(a.measure),c||1}function xc(a){if(null!=a.cachedCharWidth)return a.cachedCharWidth;var b=Yg("span","xxxxxxxxxx"),c=Yg("pre",[b]);_g(a.measure,c);var d=b.getBoundingClientRect(),e=(d.right-d.left)/10;return e>2&&(a.cachedCharWidth=e),e||10}function Ac(a){a.curOp={cm:a,viewChanged:!1,startHeight:a.doc.height,forceUpdate:!1,updateInput:null,typing:!1,changeObjs:null,cursorActivityHandlers:null,cursorActivityCalled:0,selectionChanged:!1,updateMaxLine:!1,scrollLeft:null,scrollTop:null,scrollToPos:null,id:++zc},yc?yc.ops.push(a.curOp):a.curOp.ownsGroup=yc={ops:[a.curOp],delayedCallbacks:[]}}function Bc(a){var b=a.delayedCallbacks,c=0;do{for(;c<b.length;c++)b[c]();for(var d=0;d<a.ops.length;d++){var e=a.ops[d];if(e.cursorActivityHandlers)for(;e.cursorActivityCalled<e.cursorActivityHandlers.length;)e.cursorActivityHandlers[e.cursorActivityCalled++](e.cm)}}while(c<b.length)}function Cc(a){var b=a.curOp,c=b.ownsGroup;if(c)try{Bc(c)}finally{yc=null;for(var d=0;d<c.ops.length;d++)c.ops[d].cm.curOp=null;Dc(c)}}function Dc(a){for(var b=a.ops,c=0;c<b.length;c++)Ec(b[c]);for(var c=0;c<b.length;c++)Fc(b[c]);for(var c=0;c<b.length;c++)Gc(b[c]);
+for(var c=0;c<b.length;c++)Hc(b[c]);for(var c=0;c<b.length;c++)Ic(b[c])}function Ec(a){var b=a.cm,c=b.display;a.updateMaxLine&&I(b),a.mustUpdate=a.viewChanged||a.forceUpdate||null!=a.scrollTop||a.scrollToPos&&(a.scrollToPos.from.line<c.viewFrom||a.scrollToPos.to.line>=c.viewTo)||c.maxLineChanged&&b.options.lineWrapping,a.update=a.mustUpdate&&new S(b,a.mustUpdate&&{top:a.scrollTop,ensure:a.scrollToPos},a.forceUpdate)}function Fc(a){a.updatedDisplay=a.mustUpdate&&T(a.cm,a.update)}function Gc(a){var b=a.cm,c=b.display;a.updatedDisplay&&Y(b),a.barMeasure=L(b),c.maxLineChanged&&!b.options.lineWrapping&&(a.adjustWidthTo=bc(b,c.maxLine,c.maxLine.text.length).left+3,a.maxScrollLeft=Math.max(0,c.sizer.offsetLeft+a.adjustWidthTo+Bg-c.scroller.clientWidth)),(a.updatedDisplay||a.selectionChanged)&&(a.newSelectionNodes=Nb(b))}function Hc(a){var b=a.cm;null!=a.adjustWidthTo&&(b.display.sizer.style.minWidth=a.adjustWidthTo+"px",a.maxScrollLeft<b.doc.scrollLeft&&sd(b,Math.min(b.display.scroller.scrollLeft,a.maxScrollLeft),!0),b.display.maxLineChanged=!1),a.newSelectionNodes&&Ob(b,a.newSelectionNodes),a.updatedDisplay&&W(b,a.barMeasure),(a.updatedDisplay||a.startHeight!=b.doc.height)&&M(b,a.barMeasure),a.selectionChanged&&Sb(b),b.state.focused&&a.updateInput&&$c(b,a.typing)}function Ic(a){var b=a.cm,c=b.display,d=b.doc;if(null!=a.adjustWidthTo&&Math.abs(a.barMeasure.scrollWidth-b.display.scroller.scrollWidth)>1&&M(b),a.updatedDisplay&&U(b,a.update),null==c.wheelStartX||null==a.scrollTop&&null==a.scrollLeft&&!a.scrollToPos||(c.wheelStartX=c.wheelStartY=null),null!=a.scrollTop&&(c.scroller.scrollTop!=a.scrollTop||a.forceScroll)){var e=Math.max(0,Math.min(c.scroller.scrollHeight-c.scroller.clientHeight,a.scrollTop));c.scroller.scrollTop=c.scrollbarV.scrollTop=d.scrollTop=e}if(null!=a.scrollLeft&&(c.scroller.scrollLeft!=a.scrollLeft||a.forceScroll)){var g=Math.max(0,Math.min(c.scroller.scrollWidth-c.scroller.clientWidth,a.scrollLeft));c.scroller.scrollLeft=c.scrollbarH.scrollLeft=d.scrollLeft=g,O(b)}if(a.scrollToPos){var h=Zd(b,wb(d,a.scrollToPos.from),wb(d,a.scrollToPos.to),a.scrollToPos.margin);a.scrollToPos.isCursor&&b.state.focused&&Yd(b,h)}var i=a.maybeHiddenMarkers,j=a.maybeUnhiddenMarkers;if(i)for(var k=0;k<i.length;++k)i[k].lines.length||tg(i[k],"hide");if(j)for(var k=0;k<j.length;++k)j[k].lines.length&&tg(j[k],"unhide");c.wrapper.offsetHeight&&(d.scrollTop=b.display.scroller.scrollTop),a.updatedDisplay&&f&&(b.options.lineWrapping&&X(b,a.barMeasure),a.barMeasure.scrollWidth>a.barMeasure.clientWidth&&a.barMeasure.scrollWidth<a.barMeasure.clientWidth+1&&!K(b)&&M(b)),a.changeObjs&&tg(b,"changes",b,a.changeObjs)}function Jc(a,b){if(a.curOp)return b();Ac(a);try{return b()}finally{Cc(a)}}function Kc(a,b){return function(){if(a.curOp)return b.apply(a,arguments);Ac(a);try{return b.apply(a,arguments)}finally{Cc(a)}}}function Lc(a){return function(){if(this.curOp)return a.apply(this,arguments);Ac(this);try{return a.apply(this,arguments)}finally{Cc(this)}}}function Mc(a){return function(){var b=this.cm;if(!b||b.curOp)return a.apply(this,arguments);Ac(b);try{return a.apply(this,arguments)}finally{Cc(b)}}}function Nc(a,b,c){this.line=b,this.rest=bf(b),this.size=this.rest?Uf(Lg(this.rest))-c+1:1,this.node=this.text=null,this.hidden=ef(a,b)}function Oc(a,b,c){for(var e,d=[],f=b;c>f;f=e){var g=new Nc(a.doc,Qf(a.doc,f),f);e=f+g.size,d.push(g)}return d}function Pc(a,b,c,d){null==b&&(b=a.doc.first),null==c&&(c=a.doc.first+a.doc.size),d||(d=0);var e=a.display;if(d&&c<e.viewTo&&(null==e.updateLineNumbers||e.updateLineNumbers>b)&&(e.updateLineNumbers=b),a.curOp.viewChanged=!0,b>=e.viewTo)v&&cf(a.doc,b)<e.viewTo&&Rc(a);else if(c<=e.viewFrom)v&&df(a.doc,c+d)>e.viewFrom?Rc(a):(e.viewFrom+=d,e.viewTo+=d);else if(b<=e.viewFrom&&c>=e.viewTo)Rc(a);else if(b<=e.viewFrom){var f=Tc(a,c,c+d,1);f?(e.view=e.view.slice(f.index),e.viewFrom=f.lineN,e.viewTo+=d):Rc(a)}else if(c>=e.viewTo){var f=Tc(a,b,b,-1);f?(e.view=e.view.slice(0,f.index),e.viewTo=f.lineN):Rc(a)}else{var g=Tc(a,b,b,-1),h=Tc(a,c,c+d,1);g&&h?(e.view=e.view.slice(0,g.index).concat(Oc(a,g.lineN,h.lineN)).concat(e.view.slice(h.index)),e.viewTo+=d):Rc(a)}var i=e.externalMeasured;i&&(c<i.lineN?i.lineN+=d:b<i.lineN+i.size&&(e.externalMeasured=null))}function Qc(a,b,c){a.curOp.viewChanged=!0;var d=a.display,e=a.display.externalMeasured;if(e&&b>=e.lineN&&b<e.lineN+e.size&&(d.externalMeasured=null),!(b<d.viewFrom||b>=d.viewTo)){var f=d.view[Sc(a,b)];if(null!=f.node){var g=f.changes||(f.changes=[]);-1==Ng(g,c)&&g.push(c)}}}function Rc(a){a.display.viewFrom=a.display.viewTo=a.doc.first,a.display.view=[],a.display.viewOffset=0}function Sc(a,b){if(b>=a.display.viewTo)return null;if(b-=a.display.viewFrom,0>b)return null;for(var c=a.display.view,d=0;d<c.length;d++)if(b-=c[d].size,0>b)return d}function Tc(a,b,c,d){var f,e=Sc(a,b),g=a.display.view;if(!v||c==a.doc.first+a.doc.size)return{index:e,lineN:c};for(var h=0,i=a.display.viewFrom;e>h;h++)i+=g[h].size;if(i!=b){if(d>0){if(e==g.length-1)return null;f=i+g[e].size-b,e++}else f=i-b;b+=f,c+=f}for(;cf(a.doc,c)!=c;){if(e==(0>d?0:g.length-1))return null;c+=d*g[e-(0>d?1:0)].size,e+=d}return{index:e,lineN:c}}function Uc(a,b,c){var d=a.display,e=d.view;0==e.length||b>=d.viewTo||c<=d.viewFrom?(d.view=Oc(a,b,c),d.viewFrom=b):(d.viewFrom>b?d.view=Oc(a,b,d.viewFrom).concat(d.view):d.viewFrom<b&&(d.view=d.view.slice(Sc(a,b))),d.viewFrom=b,d.viewTo<c?d.view=d.view.concat(Oc(a,d.viewTo,c)):d.viewTo>c&&(d.view=d.view.slice(0,Sc(a,c)))),d.viewTo=c}function Vc(a){for(var b=a.display.view,c=0,d=0;d<b.length;d++){var e=b[d];e.hidden||e.node&&!e.changes||++c}return c}function Wc(a){a.display.pollingFast||a.display.poll.set(a.options.pollInterval,function(){Zc(a),a.state.focused&&Wc(a)})}function Xc(a){function c(){var d=Zc(a);d||b?(a.display.pollingFast=!1,Wc(a)):(b=!0,a.display.poll.set(60,c))}var b=!1;a.display.pollingFast=!0,a.display.poll.set(20,c)}function Zc(a){var b=a.display.input,c=a.display.prevInput,f=a.doc;if(!a.state.focused||sh(b)&&!c||bd(a)||a.options.disableInput||a.state.keySeq)return!1;a.state.pasteIncoming&&a.state.fakedLastChar&&(b.value=b.value.substring(0,b.value.length-1),a.state.fakedLastChar=!1);var g=b.value;if(g==c&&!a.somethingSelected())return!1;if(d&&e>=9&&a.display.inputHasSelection===g||p&&/[\uf700-\uf7ff]/.test(g))return $c(a),!1;var h=!a.curOp;h&&Ac(a),a.display.shift=!1,8203!=g.charCodeAt(0)||f.sel!=a.display.selForContextMenu||c||(c="\u200b");for(var i=0,j=Math.min(c.length,g.length);j>i&&c.charCodeAt(i)==g.charCodeAt(i);)++i;var k=g.slice(i),l=rh(k),m=null;a.state.pasteIncoming&&f.sel.ranges.length>1&&(Yc&&Yc.join("\n")==k?m=0==f.sel.ranges.length%Yc.length&&Og(Yc,rh):l.length==f.sel.ranges.length&&(m=Og(l,function(a){return[a]})));for(var n=f.sel.ranges.length-1;n>=0;n--){var o=f.sel.ranges[n],q=o.from(),r=o.to();i<c.length?q=mb(q.line,q.ch-(c.length-i)):a.state.overwrite&&o.empty()&&!a.state.pasteIncoming&&(r=mb(r.line,Math.min(Qf(f,r.line).text.length,r.ch+Lg(l).length)));var s=a.curOp.updateInput,t={from:q,to:r,text:m?m[n%m.length]:l,origin:a.state.pasteIncoming?"paste":a.state.cutIncoming?"cut":"+input"};if(Rd(a.doc,t),vg(a,"inputRead",a,t),k&&!a.state.pasteIncoming&&a.options.electricChars&&a.options.smartIndent&&o.head.ch<100&&(!n||f.sel.ranges[n-1].head.line!=o.head.line)){var u=a.getModeAt(o.head),v=Ld(t);if(u.electricChars){for(var w=0;w<u.electricChars.length;w++)if(k.indexOf(u.electricChars.charAt(w))>-1){de(a,v.line,"smart");break}}else u.electricInput&&u.electricInput.test(Qf(f,v.line).text.slice(0,v.ch))&&de(a,v.line,"smart")}}return be(a),a.curOp.updateInput=s,a.curOp.typing=!0,g.length>1e3||g.indexOf("\n")>-1?b.value=a.display.prevInput="":a.display.prevInput=g,h&&Cc(a),a.state.pasteIncoming=a.state.cutIncoming=!1,!0}function $c(a,b){var c,f,g=a.doc;if(a.somethingSelected()){a.display.prevInput="";var h=g.sel.primary();c=th&&(h.to().line-h.from().line>100||(f=a.getSelection()).length>1e3);var i=c?"-":f||a.getSelection();a.display.input.value=i,a.state.focused&&Mg(a.display.input),d&&e>=9&&(a.display.inputHasSelection=i)}else b||(a.display.prevInput=a.display.input.value="",d&&e>=9&&(a.display.inputHasSelection=null));a.display.inaccurateSelection=c}function _c(a){"nocursor"==a.options.readOnly||o&&bh()==a.display.input||a.display.input.focus()}function ad(a){a.state.focused||(_c(a),Hd(a))}function bd(a){return a.options.readOnly||a.doc.cantEdit}function cd(a){function c(){a.state.focused&&setTimeout(Rg(_c,a),0)}function g(b){xg(a,b)||og(b)}function h(c){if(a.somethingSelected())Yc=a.getSelections(),b.inaccurateSelection&&(b.prevInput="",b.inaccurateSelection=!1,b.input.value=Yc.join("\n"),Mg(b.input));else{for(var d=[],e=[],f=0;f<a.doc.sel.ranges.length;f++){var g=a.doc.sel.ranges[f].head.line,h={anchor:mb(g,0),head:mb(g+1,0)};e.push(h),d.push(a.getRange(h.anchor,h.head))}"cut"==c.type?a.setSelections(e,null,Dg):(b.prevInput="",b.input.value=d.join("\n"),Mg(b.input)),Yc=d}"cut"==c.type&&(a.state.cutIncoming=!0)}var b=a.display;rg(b.scroller,"mousedown",Kc(a,gd)),d&&11>e?rg(b.scroller,"dblclick",Kc(a,function(b){if(!xg(a,b)){var c=fd(a,b);if(c&&!nd(a,b)&&!ed(a.display,b)){lg(b);var d=a.findWordAt(c);Bb(a.doc,d.anchor,d.head)}}})):rg(b.scroller,"dblclick",function(b){xg(a,b)||lg(b)}),rg(b.lineSpace,"selectstart",function(a){ed(b,a)||lg(a)}),t||rg(b.scroller,"contextmenu",function(b){Jd(a,b)}),rg(b.scroller,"scroll",function(){b.scroller.clientHeight&&(rd(a,b.scroller.scrollTop),sd(a,b.scroller.scrollLeft,!0),tg(a,"scroll",a))}),rg(b.scrollbarV,"scroll",function(){b.scroller.clientHeight&&rd(a,b.scrollbarV.scrollTop)}),rg(b.scrollbarH,"scroll",function(){b.scroller.clientHeight&&sd(a,b.scrollbarH.scrollLeft)}),rg(b.scroller,"mousewheel",function(b){vd(a,b)}),rg(b.scroller,"DOMMouseScroll",function(b){vd(a,b)}),rg(b.scrollbarH,"mousedown",c),rg(b.scrollbarV,"mousedown",c),rg(b.wrapper,"scroll",function(){b.wrapper.scrollTop=b.wrapper.scrollLeft=0}),rg(b.input,"keyup",function(b){Fd.call(a,b)}),rg(b.input,"input",function(){d&&e>=9&&a.display.inputHasSelection&&(a.display.inputHasSelection=null),Xc(a)}),rg(b.input,"keydown",Kc(a,Dd)),rg(b.input,"keypress",Kc(a,Gd)),rg(b.input,"focus",Rg(Hd,a)),rg(b.input,"blur",Rg(Id,a)),a.options.dragDrop&&(rg(b.scroller,"dragstart",function(b){qd(a,b)}),rg(b.scroller,"dragenter",g),rg(b.scroller,"dragover",g),rg(b.scroller,"drop",Kc(a,pd))),rg(b.scroller,"paste",function(c){ed(b,c)||(a.state.pasteIncoming=!0,_c(a),Xc(a))}),rg(b.input,"paste",function(){if(f&&!a.state.fakedLastChar&&!(new Date-a.state.lastMiddleDown<200)){var c=b.input.selectionStart,d=b.input.selectionEnd;b.input.value+="$",b.input.selectionEnd=d,b.input.selectionStart=c,a.state.fakedLastChar=!0}a.state.pasteIncoming=!0,Xc(a)}),rg(b.input,"cut",h),rg(b.input,"copy",h),k&&rg(b.sizer,"mouseup",function(){bh()==b.input&&b.input.blur(),_c(a)})}function dd(a){var b=a.display;(b.lastWrapHeight!=b.wrapper.clientHeight||b.lastWrapWidth!=b.wrapper.clientWidth)&&(b.cachedCharWidth=b.cachedTextHeight=b.cachedPaddingH=null,a.setSize())}function ed(a,b){for(var c=pg(b);c!=a.wrapper;c=c.parentNode)if(!c||c.ignoreEvents||c.parentNode==a.sizer&&c!=a.mover)return!0}function fd(a,b,c,d){var e=a.display;if(!c){var f=pg(b);if(f==e.scrollbarH||f==e.scrollbarV||f==e.scrollbarFiller||f==e.gutterFiller)return null}var g,h,i=e.lineSpace.getBoundingClientRect();try{g=b.clientX-i.left,h=b.clientY-i.top}catch(b){return null}var k,j=tc(a,g,h);if(d&&1==j.xRel&&(k=Qf(a.doc,j.line).text).length==j.ch){var l=Hg(k,k.length,a.options.tabSize)-k.length;j=mb(j.line,Math.max(0,Math.round((g-Zb(a.display).left)/xc(a.display))-l))}return j}function gd(a){if(!xg(this,a)){var b=this,c=b.display;if(c.shift=a.shiftKey,ed(c,a))return f||(c.scroller.draggable=!1,setTimeout(function(){c.scroller.draggable=!0},100)),void 0;if(!nd(b,a)){var d=fd(b,a);switch(window.focus(),qg(a)){case 1:d?jd(b,a,d):pg(a)==c.scroller&&lg(a);break;case 2:f&&(b.state.lastMiddleDown=+new Date),d&&Bb(b.doc,d),setTimeout(Rg(_c,b),20),lg(a);break;case 3:t&&Jd(b,a)}}}}function jd(a,b,c){setTimeout(Rg(ad,a),0);var e,d=+new Date;id&&id.time>d-400&&0==nb(id.pos,c)?e="triple":hd&&hd.time>d-400&&0==nb(hd.pos,c)?(e="double",id={time:d,pos:c}):(e="single",hd={time:d,pos:c});var f=a.doc.sel,g=p?b.metaKey:b.ctrlKey;a.options.dragDrop&&kh&&!bd(a)&&"single"==e&&f.contains(c)>-1&&f.somethingSelected()?kd(a,b,c,g):ld(a,b,c,e,g)}function kd(a,b,c,g){var h=a.display,i=Kc(a,function(j){f&&(h.scroller.draggable=!1),a.state.draggingText=!1,sg(document,"mouseup",i),sg(h.scroller,"drop",i),Math.abs(b.clientX-j.clientX)+Math.abs(b.clientY-j.clientY)<10&&(lg(j),g||Bb(a.doc,c),_c(a),d&&9==e&&setTimeout(function(){document.body.focus(),_c(a)},20))});f&&(h.scroller.draggable=!0),a.state.draggingText=i,h.scroller.dragDrop&&h.scroller.dragDrop(),rg(document,"mouseup",i),rg(h.scroller,"drop",i)}function ld(a,b,c,d,e){function n(b){if(0!=nb(m,b))if(m=b,"rect"==d){for(var e=[],f=a.options.tabSize,k=Hg(Qf(g,c.line).text,c.ch,f),l=Hg(Qf(g,b.line).text,b.ch,f),n=Math.min(k,l),o=Math.max(k,l),p=Math.min(c.line,b.line),q=Math.min(a.lastLine(),Math.max(c.line,b.line));q>=p;p++){var r=Qf(g,p).text,s=Ig(r,n,f);n==o?e.push(new sb(mb(p,s),mb(p,s))):r.length>s&&e.push(new sb(mb(p,s),mb(p,Ig(r,o,f))))}e.length||e.push(new sb(c,c)),Hb(g,tb(j.ranges.slice(0,i).concat(e),i),{origin:"*mouse",scroll:!1}),a.scrollIntoView(b)}else{var t=h,u=t.anchor,v=b;if("single"!=d){if("double"==d)var w=a.findWordAt(b);else var w=new sb(mb(b.line,0),wb(g,mb(b.line+1,0)));nb(w.anchor,u)>0?(v=w.head,u=qb(t.from(),w.anchor)):(v=w.anchor,u=pb(t.to(),w.head))}var e=j.ranges.slice(0);e[i]=new sb(wb(g,u),v),Hb(g,tb(e,i),Eg)}}function q(b){var c=++p,e=fd(a,b,!0,"rect"==d);if(e)if(0!=nb(e,m)){ad(a),n(e);var h=N(f,g);(e.line>=h.to||e.line<h.from)&&setTimeout(Kc(a,function(){p==c&&q(b)}),150)}else{var i=b.clientY<o.top?-20:b.clientY>o.bottom?20:0;i&&setTimeout(Kc(a,function(){p==c&&(f.scroller.scrollTop+=i,q(b))}),50)}}function r(b){p=1/0,lg(b),_c(a),sg(document,"mousemove",s),sg(document,"mouseup",t),g.history.lastSelOrigin=null}var f=a.display,g=a.doc;lg(b);var h,i,j=g.sel;if(e&&!b.shiftKey?(i=g.sel.contains(c),h=i>-1?g.sel.ranges[i]:new sb(c,c)):h=g.sel.primary(),b.altKey)d="rect",e||(h=new sb(c,c)),c=fd(a,b,!0,!0),i=-1;else if("double"==d){var k=a.findWordAt(c);h=a.display.shift||g.extend?Ab(g,h,k.anchor,k.head):k}else if("triple"==d){var l=new sb(mb(c.line,0),wb(g,mb(c.line+1,0)));h=a.display.shift||g.extend?Ab(g,h,l.anchor,l.head):l}else h=Ab(g,h,c);e?i>-1?Db(g,i,h,Eg):(i=g.sel.ranges.length,Hb(g,tb(g.sel.ranges.concat([h]),i),{scroll:!1,origin:"*mouse"})):(i=0,Hb(g,new rb([h],0),Eg),j=g.sel);var m=c,o=f.wrapper.getBoundingClientRect(),p=0,s=Kc(a,function(a){qg(a)?q(a):r(a)}),t=Kc(a,r);rg(document,"mousemove",s),rg(document,"mouseup",t)}function md(a,b,c,d,e){try{var f=b.clientX,g=b.clientY}catch(b){return!1}if(f>=Math.floor(a.display.gutters.getBoundingClientRect().right))return!1;d&&lg(b);var h=a.display,i=h.lineDiv.getBoundingClientRect();if(g>i.bottom||!zg(a,c))return ng(b);g-=i.top-h.viewOffset;for(var j=0;j<a.options.gutters.length;++j){var k=h.gutters.childNodes[j];if(k&&k.getBoundingClientRect().right>=f){var l=Vf(a.doc,g),m=a.options.gutters[j];return e(a,c,a,l,m,b),ng(b)}}}function nd(a,b){return md(a,b,"gutterClick",!0,vg)}function pd(a){var b=this;if(!xg(b,a)&&!ed(b.display,a)){lg(a),d&&(od=+new Date);var c=fd(b,a,!0),e=a.dataTransfer.files;if(c&&!bd(b))if(e&&e.length&&window.FileReader&&window.File)for(var f=e.length,g=Array(f),h=0,i=function(a,d){var e=new FileReader;e.onload=Kc(b,function(){if(g[d]=e.result,++h==f){c=wb(b.doc,c);var a={from:c,to:c,text:rh(g.join("\n")),origin:"paste"};Rd(b.doc,a),Gb(b.doc,ub(c,Ld(a)))}}),e.readAsText(a)},j=0;f>j;++j)i(e[j],j);else{if(b.state.draggingText&&b.doc.sel.contains(c)>-1)return b.state.draggingText(a),setTimeout(Rg(_c,b),20),void 0;try{var g=a.dataTransfer.getData("Text");if(g){if(b.state.draggingText&&!(p?a.metaKey:a.ctrlKey))var k=b.listSelections();if(Ib(b.doc,ub(c,c)),k)for(var j=0;j<k.length;++j)Xd(b.doc,"",k[j].anchor,k[j].head,"drag");b.replaceSelection(g,"around","paste"),_c(b)}}catch(a){}}}}function qd(a,b){if(d&&(!a.state.draggingText||+new Date-od<100))return og(b),void 0;if(!xg(a,b)&&!ed(a.display,b)&&(b.dataTransfer.setData("Text",a.getSelection()),b.dataTransfer.setDragImage&&!j)){var c=Yg("img",null,null,"position: fixed; left: 0; top: 0;");c.src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",i&&(c.width=c.height=1,a.display.wrapper.appendChild(c),c._top=c.offsetTop),b.dataTransfer.setDragImage(c,0,0),i&&c.parentNode.removeChild(c)}}function rd(b,c){Math.abs(b.doc.scrollTop-c)<2||(b.doc.scrollTop=c,a||V(b,{top:c}),b.display.scroller.scrollTop!=c&&(b.display.scroller.scrollTop=c),b.display.scrollbarV.scrollTop!=c&&(b.display.scrollbarV.scrollTop=c),a&&V(b),Tb(b,100))}function sd(a,b,c){(c?b==a.doc.scrollLeft:Math.abs(a.doc.scrollLeft-b)<2)||(b=Math.min(b,a.display.scroller.scrollWidth-a.display.scroller.clientWidth),a.doc.scrollLeft=b,O(a),a.display.scroller.scrollLeft!=b&&(a.display.scroller.scrollLeft=b),a.display.scrollbarH.scrollLeft!=b&&(a.display.scrollbarH.scrollLeft=b))}function vd(b,c){var d=c.wheelDeltaX,e=c.wheelDeltaY;null==d&&c.detail&&c.axis==c.HORIZONTAL_AXIS&&(d=c.detail),null==e&&c.detail&&c.axis==c.VERTICAL_AXIS?e=c.detail:null==e&&(e=c.wheelDelta);var g=b.display,h=g.scroller;if(d&&h.scrollWidth>h.clientWidth||e&&h.scrollHeight>h.clientHeight){if(e&&p&&f)a:for(var j=c.target,k=g.view;j!=h;j=j.parentNode)for(var l=0;l<k.length;l++)if(k[l].node==j){b.display.currentWheelTarget=j;break a}if(d&&!a&&!i&&null!=ud)return e&&rd(b,Math.max(0,Math.min(h.scrollTop+e*ud,h.scrollHeight-h.clientHeight))),sd(b,Math.max(0,Math.min(h.scrollLeft+d*ud,h.scrollWidth-h.clientWidth))),lg(c),g.wheelStartX=null,void 0;if(e&&null!=ud){var m=e*ud,n=b.doc.scrollTop,o=n+g.wrapper.clientHeight;0>m?n=Math.max(0,n+m-50):o=Math.min(b.doc.height,o+m+50),V(b,{top:n,bottom:o})}20>td&&(null==g.wheelStartX?(g.wheelStartX=h.scrollLeft,g.wheelStartY=h.scrollTop,g.wheelDX=d,g.wheelDY=e,setTimeout(function(){if(null!=g.wheelStartX){var a=h.scrollLeft-g.wheelStartX,b=h.scrollTop-g.wheelStartY,c=b&&g.wheelDY&&b/g.wheelDY||a&&g.wheelDX&&a/g.wheelDX;g.wheelStartX=g.wheelStartY=null,c&&(ud=(ud*td+c)/(td+1),++td)}},200)):(g.wheelDX+=d,g.wheelDY+=e))}}function wd(a,b,c){if("string"==typeof b&&(b=te[b],!b))return!1;a.display.pollingFast&&Zc(a)&&(a.display.pollingFast=!1);var d=a.display.shift,e=!1;try{bd(a)&&(a.state.suppressEdits=!0),c&&(a.display.shift=!1),e=b(a)!=Cg}finally{a.display.shift=d,a.state.suppressEdits=!1}return e}function xd(a,b,c){for(var d=0;d<a.state.keyMaps.length;d++){var e=we(b,a.state.keyMaps[d],c);if(e)return e}return a.options.extraKeys&&we(b,a.options.extraKeys,c)||we(b,a.options.keyMap,c)}function zd(a,b,c,d){var e=a.state.keySeq;if(e){if(xe(b))return"handled";yd.set(50,function(){a.state.keySeq==e&&(a.state.keySeq=null,$c(a))}),b=e+" "+b}var f=xd(a,b,d);return"multi"==f&&(a.state.keySeq=b),"handled"==f&&vg(a,"keyHandled",a,b,c),("handled"==f||"multi"==f)&&(lg(c),Sb(a)),e&&!f&&/\'$/.test(b)?(lg(c),!0):!!f}function Ad(a,b){var c=ye(b,!0);return c?b.shiftKey&&!a.state.keySeq?zd(a,"Shift-"+c,b,function(b){return wd(a,b,!0)})||zd(a,c,b,function(b){return("string"==typeof b?/^go[A-Z]/.test(b):b.motion)?wd(a,b):void 0}):zd(a,c,b,function(b){return wd(a,b)}):!1}function Bd(a,b,c){return zd(a,"'"+c+"'",b,function(b){return wd(a,b,!0)})}function Dd(a){var b=this;if(ad(b),!xg(b,a)){d&&11>e&&27==a.keyCode&&(a.returnValue=!1);var c=a.keyCode;b.display.shift=16==c||a.shiftKey;var f=Ad(b,a);i&&(Cd=f?c:null,!f&&88==c&&!th&&(p?a.metaKey:a.ctrlKey)&&b.replaceSelection("",null,"cut")),18!=c||/\bCodeMirror-crosshair\b/.test(b.display.lineDiv.className)||Ed(b)}}function Ed(a){function c(a){18!=a.keyCode&&a.altKey||(dh(b,"CodeMirror-crosshair"),sg(document,"keyup",c),sg(document,"mouseover",c))}var b=a.display.lineDiv;eh(b,"CodeMirror-crosshair"),rg(document,"keyup",c),rg(document,"mouseover",c)}function Fd(a){16==a.keyCode&&(this.doc.sel.shift=!1),xg(this,a)}function Gd(a){var b=this;if(!(xg(b,a)||a.ctrlKey&&!a.altKey||p&&a.metaKey)){var c=a.keyCode,f=a.charCode;if(i&&c==Cd)return Cd=null,lg(a),void 0;if(!(i&&(!a.which||a.which<10)||k)||!Ad(b,a)){var g=String.fromCharCode(null==f?c:f);Bd(b,a,g)||(d&&e>=9&&(b.display.inputHasSelection=null),Xc(b))}}}function Hd(a){"nocursor"!=a.options.readOnly&&(a.state.focused||(tg(a,"focus",a),a.state.focused=!0,eh(a.display.wrapper,"CodeMirror-focused"),a.curOp||a.display.selForContextMenu==a.doc.sel||($c(a),f&&setTimeout(Rg($c,a,!0),0))),Wc(a),Sb(a))}function Id(a){a.state.focused&&(tg(a,"blur",a),a.state.focused=!1,dh(a.display.wrapper,"CodeMirror-focused")),clearInterval(a.display.blinker),setTimeout(function(){a.state.focused||(a.display.shift=!1)},150)}function Jd(a,b){function m(){if(null!=c.input.selectionStart){var b=a.somethingSelected(),d=c.input.value="\u200b"+(b?c.input.value:"");c.prevInput=b?"":"\u200b",c.input.selectionStart=1,c.input.selectionEnd=d.length,c.selForContextMenu=a.doc.sel}}function n(){if(c.inputDiv.style.position="relative",c.input.style.cssText=k,d&&9>e&&(c.scrollbarV.scrollTop=c.scroller.scrollTop=h),Wc(a),null!=c.input.selectionStart){(!d||d&&9>e)&&m();var b=0,f=function(){c.selForContextMenu==a.doc.sel&&0==c.input.selectionStart?Kc(a,te.selectAll)(a):b++<10?c.detectingSelectAll=setTimeout(f,500):$c(a)};c.detectingSelectAll=setTimeout(f,200)}}if(!xg(a,b,"contextmenu")){var c=a.display;if(!ed(c,b)&&!Kd(a,b)){var g=fd(a,b),h=c.scroller.scrollTop;if(g&&!i){var j=a.options.resetSelectionOnContextMenu;j&&-1==a.doc.sel.contains(g)&&Kc(a,Hb)(a.doc,ub(g),Dg);var k=c.input.style.cssText;if(c.inputDiv.style.position="absolute",c.input.style.cssText="position: fixed; width: 30px; height: 30px; top: "+(b.clientY-5)+"px; left: "+(b.clientX-5)+"px; z-index: 1000; background: "+(d?"rgba(255, 255, 255, .05)":"transparent")+"; outline: none; border-width: 0; outline: none; overflow: hidden; opacity: .05; filter: alpha(opacity=5);",f)var l=window.scrollY;if(_c(a),f&&window.scrollTo(null,l),$c(a),a.somethingSelected()||(c.input.value=c.prevInput=" "),c.selForContextMenu=a.doc.sel,clearTimeout(c.detectingSelectAll),d&&e>=9&&m(),t){og(b);var o=function(){sg(window,"mouseup",o),setTimeout(n,20)};rg(window,"mouseup",o)}else setTimeout(n,50)}}}}function Kd(a,b){return zg(a,"gutterContextMenu")?md(a,b,"gutterContextMenu",!1,tg):!1}function Md(a,b){if(nb(a,b.from)<0)return a;if(nb(a,b.to)<=0)return Ld(b);var c=a.line+b.text.length-(b.to.line-b.from.line)-1,d=a.ch;return a.line==b.to.line&&(d+=Ld(b).ch-b.to.ch),mb(c,d)}function Nd(a,b){for(var c=[],d=0;d<a.sel.ranges.length;d++){var e=a.sel.ranges[d];c.push(new sb(Md(e.anchor,b),Md(e.head,b)))}return tb(c,a.sel.primIndex)}function Od(a,b,c){return a.line==b.line?mb(c.line,a.ch-b.ch+c.ch):mb(c.line+(a.line-b.line),a.ch)}function Pd(a,b,c){for(var d=[],e=mb(a.first,0),f=e,g=0;g<b.length;g++){var h=b[g],i=Od(h.from,e,f),j=Od(Ld(h),e,f);if(e=h.to,f=j,"around"==c){var k=a.sel.ranges[g],l=nb(k.head,k.anchor)<0;d[g]=new sb(l?j:i,l?i:j)}else d[g]=new sb(i,i)}return new rb(d,a.sel.primIndex)}function Qd(a,b,c){var d={canceled:!1,from:b.from,to:b.to,text:b.text,origin:b.origin,cancel:function(){this.canceled=!0}};return c&&(d.update=function(b,c,d,e){b&&(this.from=wb(a,b)),c&&(this.to=wb(a,c)),d&&(this.text=d),void 0!==e&&(this.origin=e)}),tg(a,"beforeChange",a,d),a.cm&&tg(a.cm,"beforeChange",a.cm,d),d.canceled?null:{from:d.from,to:d.to,text:d.text,origin:d.origin}}function Rd(a,b,c){if(a.cm){if(!a.cm.curOp)return Kc(a.cm,Rd)(a,b,c);if(a.cm.state.suppressEdits)return}if(!(zg(a,"beforeChange")||a.cm&&zg(a.cm,"beforeChange"))||(b=Qd(a,b,!0))){var d=u&&!c&&Se(a,b.from,b.to);if(d)for(var e=d.length-1;e>=0;--e)Sd(a,{from:d[e].from,to:d[e].to,text:e?[""]:b.text});else Sd(a,b)}}function Sd(a,b){if(1!=b.text.length||""!=b.text[0]||0!=nb(b.from,b.to)){var c=Nd(a,b);ag(a,b,c,a.cm?a.cm.curOp.id:0/0),Vd(a,b,c,Pe(a,b));var d=[];Of(a,function(a,c){c||-1!=Ng(d,a.history)||(kg(a.history,b),d.push(a.history)),Vd(a,b,null,Pe(a,b))})}}function Td(a,b,c){if(!a.cm||!a.cm.state.suppressEdits){for(var e,d=a.history,f=a.sel,g="undo"==b?d.done:d.undone,h="undo"==b?d.undone:d.done,i=0;i<g.length&&(e=g[i],c?!e.ranges||e.equals(a.sel):e.ranges);i++);if(i!=g.length){for(d.lastOrigin=d.lastSelOrigin=null;e=g.pop(),e.ranges;){if(dg(e,h),c&&!e.equals(a.sel))return Hb(a,e,{clearRedo:!1}),void 0;f=e}var j=[];dg(f,h),h.push({changes:j,generation:d.generation}),d.generation=e.generation||++d.maxGeneration;for(var k=zg(a,"beforeChange")||a.cm&&zg(a.cm,"beforeChange"),i=e.changes.length-1;i>=0;--i){var l=e.changes[i];if(l.origin=b,k&&!Qd(a,l,!1))return g.length=0,void 0;j.push(Zf(a,l));var m=i?Nd(a,l):Lg(g);Vd(a,l,m,Re(a,l)),!i&&a.cm&&a.cm.scrollIntoView({from:l.from,to:Ld(l)});var n=[];Of(a,function(a,b){b||-1!=Ng(n,a.history)||(kg(a.history,l),n.push(a.history)),Vd(a,l,null,Re(a,l))})}}}}function Ud(a,b){if(0!=b&&(a.first+=b,a.sel=new rb(Og(a.sel.ranges,function(a){return new sb(mb(a.anchor.line+b,a.anchor.ch),mb(a.head.line+b,a.head.ch))}),a.sel.primIndex),a.cm)){Pc(a.cm,a.first,a.first-b,b);for(var c=a.cm.display,d=c.viewFrom;d<c.viewTo;d++)Qc(a.cm,d,"gutter")}}function Vd(a,b,c,d){if(a.cm&&!a.cm.curOp)return Kc(a.cm,Vd)(a,b,c,d);if(b.to.line<a.first)return Ud(a,b.text.length-1-(b.to.line-b.from.line)),void 0;if(!(b.from.line>a.lastLine())){if(b.from.line<a.first){var e=b.text.length-1-(a.first-b.from.line);Ud(a,e),b={from:mb(a.first,0),to:mb(b.to.line+e,b.to.ch),text:[Lg(b.text)],origin:b.origin}}var f=a.lastLine();b.to.line>f&&(b={from:b.from,to:mb(f,Qf(a,f).text.length),text:[b.text[0]],origin:b.origin}),b.removed=Rf(a,b.from,b.to),c||(c=Nd(a,b)),a.cm?Wd(a.cm,b,d):Hf(a,b,d),Ib(a,c,Dg)}}function Wd(a,b,c){var d=a.doc,e=a.display,f=b.from,g=b.to,h=!1,i=f.line;a.options.lineWrapping||(i=Uf(af(Qf(d,f.line))),d.iter(i,g.line+1,function(a){return a==e.maxLine?(h=!0,!0):void 0})),d.sel.contains(b.from,b.to)>-1&&yg(a),Hf(d,b,c,B(a)),a.options.lineWrapping||(d.iter(i,f.line+b.text.length,function(a){var b=H(a);b>e.maxLineLength&&(e.maxLine=a,e.maxLineLength=b,e.maxLineChanged=!0,h=!1)}),h&&(a.curOp.updateMaxLine=!0)),d.frontier=Math.min(d.frontier,f.line),Tb(a,400);var j=b.text.length-(g.line-f.line)-1;f.line!=g.line||1!=b.text.length||Gf(a.doc,b)?Pc(a,f.line,g.line+1,j):Qc(a,f.line,"text");var k=zg(a,"changes"),l=zg(a,"change");if(l||k){var m={from:f,to:g,text:b.text,removed:b.removed,origin:b.origin};l&&vg(a,"change",a,m),k&&(a.curOp.changeObjs||(a.curOp.changeObjs=[])).push(m)}a.display.selForContextMenu=null}function Xd(a,b,c,d,e){if(d||(d=c),nb(d,c)<0){var f=d;d=c,c=f}"string"==typeof b&&(b=rh(b)),Rd(a,{from:c,to:d,text:b,origin:e})}function Yd(a,b){if(!xg(a,"scrollCursorIntoView")){var c=a.display,d=c.sizer.getBoundingClientRect(),e=null;if(b.top+d.top<0?e=!0:b.bottom+d.top>(window.innerHeight||document.documentElement.clientHeight)&&(e=!1),null!=e&&!m){var f=Yg("div","\u200b",null,"position: absolute; top: "+(b.top-c.viewOffset-Xb(a.display))+"px; height: "+(b.bottom-b.top+Bg)+"px; left: "+b.left+"px; width: 2px;");a.display.lineSpace.appendChild(f),f.scrollIntoView(e),a.display.lineSpace.removeChild(f)}}}function Zd(a,b,c,d){null==d&&(d=0);for(var e=0;5>e;e++){var f=!1,g=qc(a,b),h=c&&c!=b?qc(a,c):g,i=_d(a,Math.min(g.left,h.left),Math.min(g.top,h.top)-d,Math.max(g.left,h.left),Math.max(g.bottom,h.bottom)+d),j=a.doc.scrollTop,k=a.doc.scrollLeft;if(null!=i.scrollTop&&(rd(a,i.scrollTop),Math.abs(a.doc.scrollTop-j)>1&&(f=!0)),null!=i.scrollLeft&&(sd(a,i.scrollLeft),Math.abs(a.doc.scrollLeft-k)>1&&(f=!0)),!f)return g}}function $d(a,b,c,d,e){var f=_d(a,b,c,d,e);null!=f.scrollTop&&rd(a,f.scrollTop),null!=f.scrollLeft&&sd(a,f.scrollLeft)}function _d(a,b,c,d,e){var f=a.display,g=wc(a.display);0>c&&(c=0);var h=a.curOp&&null!=a.curOp.scrollTop?a.curOp.scrollTop:f.scroller.scrollTop,i=f.scroller.clientHeight-Bg,j={};e-c>i&&(e=c+i);var k=a.doc.height+Yb(f),l=g>c,m=e>k-g;if(h>c)j.scrollTop=l?0:c;else if(e>h+i){var n=Math.min(c,(m?k:e)-i);n!=h&&(j.scrollTop=n)}var o=a.curOp&&null!=a.curOp.scrollLeft?a.curOp.scrollLeft:f.scroller.scrollLeft,p=f.scroller.clientWidth-Bg-f.gutters.offsetWidth,q=d-b>p;return q&&(d=b+p),10>b?j.scrollLeft=0:o>b?j.scrollLeft=Math.max(0,b-(q?0:10)):d>p+o-3&&(j.scrollLeft=d+(q?0:10)-p),j}function ae(a,b,c){(null!=b||null!=c)&&ce(a),null!=b&&(a.curOp.scrollLeft=(null==a.curOp.scrollLeft?a.doc.scrollLeft:a.curOp.scrollLeft)+b),null!=c&&(a.curOp.scrollTop=(null==a.curOp.scrollTop?a.doc.scrollTop:a.curOp.scrollTop)+c)}function be(a){ce(a);var b=a.getCursor(),c=b,d=b;a.options.lineWrapping||(c=b.ch?mb(b.line,b.ch-1):b,d=mb(b.line,b.ch+1)),a.curOp.scrollToPos={from:c,to:d,margin:a.options.cursorScrollMargin,isCursor:!0}}function ce(a){var b=a.curOp.scrollToPos;if(b){a.curOp.scrollToPos=null;var c=rc(a,b.from),d=rc(a,b.to),e=_d(a,Math.min(c.left,d.left),Math.min(c.top,d.top)-b.margin,Math.max(c.right,d.right),Math.max(c.bottom,d.bottom)+b.margin);a.scrollTo(e.scrollLeft,e.scrollTop)}}function de(a,b,c,d){var f,e=a.doc;null==c&&(c="add"),"smart"==c&&(e.mode.indent?f=Wb(a,b):c="prev");var g=a.options.tabSize,h=Qf(e,b),i=Hg(h.text,null,g);h.stateAfter&&(h.stateAfter=null);var k,j=h.text.match(/^\s*/)[0];if(d||/\S/.test(h.text)){if("smart"==c&&(k=e.mode.indent(f,h.text.slice(j.length),h.text),k==Cg||k>150)){if(!d)return;c="prev"}}else k=0,c="not";"prev"==c?k=b>e.first?Hg(Qf(e,b-1).text,null,g):0:"add"==c?k=i+a.options.indentUnit:"subtract"==c?k=i-a.options.indentUnit:"number"==typeof c&&(k=i+c),k=Math.max(0,k);var l="",m=0;if(a.options.indentWithTabs)for(var n=Math.floor(k/g);n;--n)m+=g,l+="	";if(k>m&&(l+=Kg(k-m)),l!=j)Xd(e,l,mb(b,0),mb(b,j.length),"+input");else for(var n=0;n<e.sel.ranges.length;n++){var o=e.sel.ranges[n];if(o.head.line==b&&o.head.ch<j.length){var m=mb(b,j.length);Db(e,n,new sb(m,m));break}}h.stateAfter=null}function ee(a,b,c,d){var e=b,f=b;return"number"==typeof b?f=Qf(a,vb(a,b)):e=Uf(b),null==e?null:(d(f,e)&&a.cm&&Qc(a.cm,e,c),f)}function fe(a,b){for(var c=a.doc.sel.ranges,d=[],e=0;e<c.length;e++){for(var f=b(c[e]);d.length&&nb(f.from,Lg(d).to)<=0;){var g=d.pop();if(nb(g.from,f.from)<0){f.from=g.from;break}}d.push(f)}Jc(a,function(){for(var b=d.length-1;b>=0;b--)Xd(a.doc,"",d[b].from,d[b].to,"+delete");be(a)})}function ge(a,b,c,d,e){function k(){var b=f+c;return b<a.first||b>=a.first+a.size?j=!1:(f=b,i=Qf(a,b))}function l(a){var b=(e?Jh:Kh)(i,g,c,!0);if(null==b){if(a||!k())return j=!1;g=e?(0>c?Bh:Ah)(i):0>c?i.text.length:0}else g=b;return!0}var f=b.line,g=b.ch,h=c,i=Qf(a,f),j=!0;if("char"==d)l();else if("column"==d)l(!0);else if("word"==d||"group"==d)for(var m=null,n="group"==d,o=a.cm&&a.cm.getHelper(b,"wordChars"),p=!0;!(0>c)||l(!p);p=!1){var q=i.text.charAt(g)||"\n",r=Ug(q,o)?"w":n&&"\n"==q?"n":!n||/\s/.test(q)?null:"p";if(!n||p||r||(r="s"),m&&m!=r){0>c&&(c=1,l());break}if(r&&(m=r),c>0&&!l(!p))break}var s=Mb(a,mb(f,g),h,!0);return j||(s.hitSide=!0),s}function he(a,b,c,d){var g,e=a.doc,f=b.left;if("page"==d){var h=Math.min(a.display.wrapper.clientHeight,window.innerHeight||document.documentElement.clientHeight);g=b.top+c*(h-(0>c?1.5:.5)*wc(a.display))}else"line"==d&&(g=c>0?b.bottom+3:b.top-3);for(;;){var i=tc(a,f,g);if(!i.outside)break;if(0>c?0>=g:g>=e.height){i.hitSide=!0;break}g+=5*c}return i}function ke(a,b,c,d){w.defaults[a]=b,c&&(je[a]=d?function(a,b,d){d!=le&&c(a,b,d)}:c)}function ve(a){for(var c,d,e,f,b=a.split(/-(?!$)/),a=b[b.length-1],g=0;g<b.length-1;g++){var h=b[g];if(/^(cmd|meta|m)$/i.test(h))f=!0;else if(/^a(lt)?$/i.test(h))c=!0;else if(/^(c|ctrl|control)$/i.test(h))d=!0;else{if(!/^s(hift)$/i.test(h))throw new Error("Unrecognized modifier name: "+h);e=!0}}return c&&(a="Alt-"+a),d&&(a="Ctrl-"+a),f&&(a="Cmd-"+a),e&&(a="Shift-"+a),a}function ze(a){return"string"==typeof a?ue[a]:a}function De(a,b,c,d,e){if(d&&d.shared)return Fe(a,b,c,d,e);if(a.cm&&!a.cm.curOp)return Kc(a.cm,De)(a,b,c,d,e);var f=new Be(a,e),g=nb(b,c);if(d&&Qg(d,f,!1),g>0||0==g&&f.clearWhenEmpty!==!1)return f;if(f.replacedWith&&(f.collapsed=!0,f.widgetNode=Yg("span",[f.replacedWith],"CodeMirror-widget"),d.handleMouseEvents||(f.widgetNode.ignoreEvents=!0),d.insertLeft&&(f.widgetNode.insertLeft=!0)),f.collapsed){if(_e(a,b.line,b,c,f)||b.line!=c.line&&_e(a,c.line,b,c,f))throw new Error("Inserting collapsed marker partially overlapping an existing one");
+v=!0}f.addToHistory&&ag(a,{from:b,to:c,origin:"markText"},a.sel,0/0);var j,h=b.line,i=a.cm;if(a.iter(h,c.line+1,function(a){i&&f.collapsed&&!i.options.lineWrapping&&af(a)==i.display.maxLine&&(j=!0),f.collapsed&&h!=b.line&&Tf(a,0),Me(a,new Je(f,h==b.line?b.ch:null,h==c.line?c.ch:null)),++h}),f.collapsed&&a.iter(b.line,c.line+1,function(b){ef(a,b)&&Tf(b,0)}),f.clearOnEnter&&rg(f,"beforeCursorEnter",function(){f.clear()}),f.readOnly&&(u=!0,(a.history.done.length||a.history.undone.length)&&a.clearHistory()),f.collapsed&&(f.id=++Ce,f.atomic=!0),i){if(j&&(i.curOp.updateMaxLine=!0),f.collapsed)Pc(i,b.line,c.line+1);else if(f.className||f.title||f.startStyle||f.endStyle)for(var k=b.line;k<=c.line;k++)Qc(i,k,"text");f.atomic&&Kb(i.doc),vg(i,"markerAdded",i,f)}return f}function Fe(a,b,c,d,e){d=Qg(d),d.shared=!1;var f=[De(a,b,c,d,e)],g=f[0],h=d.widgetNode;return Of(a,function(a){h&&(d.widgetNode=h.cloneNode(!0)),f.push(De(a,wb(a,b),wb(a,c),d,e));for(var i=0;i<a.linked.length;++i)if(a.linked[i].isParent)return;g=Lg(f)}),new Ee(f,g)}function Ge(a){return a.findMarks(mb(a.first,0),a.clipPos(mb(a.lastLine())),function(a){return a.parent})}function He(a,b){for(var c=0;c<b.length;c++){var d=b[c],e=d.find(),f=a.clipPos(e.from),g=a.clipPos(e.to);if(nb(f,g)){var h=De(a,f,g,d.primary,d.primary.type);d.markers.push(h),h.parent=d}}}function Ie(a){for(var b=0;b<a.length;b++){var c=a[b],d=[c.primary.doc];Of(c.primary.doc,function(a){d.push(a)});for(var e=0;e<c.markers.length;e++){var f=c.markers[e];-1==Ng(d,f.doc)&&(f.parent=null,c.markers.splice(e--,1))}}}function Je(a,b,c){this.marker=a,this.from=b,this.to=c}function Ke(a,b){if(a)for(var c=0;c<a.length;++c){var d=a[c];if(d.marker==b)return d}}function Le(a,b){for(var c,d=0;d<a.length;++d)a[d]!=b&&(c||(c=[])).push(a[d]);return c}function Me(a,b){a.markedSpans=a.markedSpans?a.markedSpans.concat([b]):[b],b.marker.attachLine(a)}function Ne(a,b,c){if(a)for(var e,d=0;d<a.length;++d){var f=a[d],g=f.marker,h=null==f.from||(g.inclusiveLeft?f.from<=b:f.from<b);if(h||f.from==b&&"bookmark"==g.type&&(!c||!f.marker.insertLeft)){var i=null==f.to||(g.inclusiveRight?f.to>=b:f.to>b);(e||(e=[])).push(new Je(g,f.from,i?null:f.to))}}return e}function Oe(a,b,c){if(a)for(var e,d=0;d<a.length;++d){var f=a[d],g=f.marker,h=null==f.to||(g.inclusiveRight?f.to>=b:f.to>b);if(h||f.from==b&&"bookmark"==g.type&&(!c||f.marker.insertLeft)){var i=null==f.from||(g.inclusiveLeft?f.from<=b:f.from<b);(e||(e=[])).push(new Je(g,i?null:f.from-b,null==f.to?null:f.to-b))}}return e}function Pe(a,b){var c=yb(a,b.from.line)&&Qf(a,b.from.line).markedSpans,d=yb(a,b.to.line)&&Qf(a,b.to.line).markedSpans;if(!c&&!d)return null;var e=b.from.ch,f=b.to.ch,g=0==nb(b.from,b.to),h=Ne(c,e,g),i=Oe(d,f,g),j=1==b.text.length,k=Lg(b.text).length+(j?e:0);if(h)for(var l=0;l<h.length;++l){var m=h[l];if(null==m.to){var n=Ke(i,m.marker);n?j&&(m.to=null==n.to?null:n.to+k):m.to=e}}if(i)for(var l=0;l<i.length;++l){var m=i[l];if(null!=m.to&&(m.to+=k),null==m.from){var n=Ke(h,m.marker);n||(m.from=k,j&&(h||(h=[])).push(m))}else m.from+=k,j&&(h||(h=[])).push(m)}h&&(h=Qe(h)),i&&i!=h&&(i=Qe(i));var o=[h];if(!j){var q,p=b.text.length-2;if(p>0&&h)for(var l=0;l<h.length;++l)null==h[l].to&&(q||(q=[])).push(new Je(h[l].marker,null,null));for(var l=0;p>l;++l)o.push(q);o.push(i)}return o}function Qe(a){for(var b=0;b<a.length;++b){var c=a[b];null!=c.from&&c.from==c.to&&c.marker.clearWhenEmpty!==!1&&a.splice(b--,1)}return a.length?a:null}function Re(a,b){var c=gg(a,b),d=Pe(a,b);if(!c)return d;if(!d)return c;for(var e=0;e<c.length;++e){var f=c[e],g=d[e];if(f&&g)a:for(var h=0;h<g.length;++h){for(var i=g[h],j=0;j<f.length;++j)if(f[j].marker==i.marker)continue a;f.push(i)}else g&&(c[e]=g)}return c}function Se(a,b,c){var d=null;if(a.iter(b.line,c.line+1,function(a){if(a.markedSpans)for(var b=0;b<a.markedSpans.length;++b){var c=a.markedSpans[b].marker;!c.readOnly||d&&-1!=Ng(d,c)||(d||(d=[])).push(c)}}),!d)return null;for(var e=[{from:b,to:c}],f=0;f<d.length;++f)for(var g=d[f],h=g.find(0),i=0;i<e.length;++i){var j=e[i];if(!(nb(j.to,h.from)<0||nb(j.from,h.to)>0)){var k=[i,1],l=nb(j.from,h.from),m=nb(j.to,h.to);(0>l||!g.inclusiveLeft&&!l)&&k.push({from:j.from,to:h.from}),(m>0||!g.inclusiveRight&&!m)&&k.push({from:h.to,to:j.to}),e.splice.apply(e,k),i+=k.length-1}}return e}function Te(a){var b=a.markedSpans;if(b){for(var c=0;c<b.length;++c)b[c].marker.detachLine(a);a.markedSpans=null}}function Ue(a,b){if(b){for(var c=0;c<b.length;++c)b[c].marker.attachLine(a);a.markedSpans=b}}function Ve(a){return a.inclusiveLeft?-1:0}function We(a){return a.inclusiveRight?1:0}function Xe(a,b){var c=a.lines.length-b.lines.length;if(0!=c)return c;var d=a.find(),e=b.find(),f=nb(d.from,e.from)||Ve(a)-Ve(b);if(f)return-f;var g=nb(d.to,e.to)||We(a)-We(b);return g?g:b.id-a.id}function Ye(a,b){var d,c=v&&a.markedSpans;if(c)for(var e,f=0;f<c.length;++f)e=c[f],e.marker.collapsed&&null==(b?e.from:e.to)&&(!d||Xe(d,e.marker)<0)&&(d=e.marker);return d}function Ze(a){return Ye(a,!0)}function $e(a){return Ye(a,!1)}function _e(a,b,c,d,e){var f=Qf(a,b),g=v&&f.markedSpans;if(g)for(var h=0;h<g.length;++h){var i=g[h];if(i.marker.collapsed){var j=i.marker.find(0),k=nb(j.from,c)||Ve(i.marker)-Ve(e),l=nb(j.to,d)||We(i.marker)-We(e);if(!(k>=0&&0>=l||0>=k&&l>=0)&&(0>=k&&(nb(j.to,c)>0||i.marker.inclusiveRight&&e.inclusiveLeft)||k>=0&&(nb(j.from,d)<0||i.marker.inclusiveLeft&&e.inclusiveRight)))return!0}}}function af(a){for(var b;b=Ze(a);)a=b.find(-1,!0).line;return a}function bf(a){for(var b,c;b=$e(a);)a=b.find(1,!0).line,(c||(c=[])).push(a);return c}function cf(a,b){var c=Qf(a,b),d=af(c);return c==d?b:Uf(d)}function df(a,b){if(b>a.lastLine())return b;var d,c=Qf(a,b);if(!ef(a,c))return b;for(;d=$e(c);)c=d.find(1,!0).line;return Uf(c)+1}function ef(a,b){var c=v&&b.markedSpans;if(c)for(var d,e=0;e<c.length;++e)if(d=c[e],d.marker.collapsed){if(null==d.from)return!0;if(!d.marker.widgetNode&&0==d.from&&d.marker.inclusiveLeft&&ff(a,b,d))return!0}}function ff(a,b,c){if(null==c.to){var d=c.marker.find(1,!0);return ff(a,d.line,Ke(d.line.markedSpans,c.marker))}if(c.marker.inclusiveRight&&c.to==b.text.length)return!0;for(var e,f=0;f<b.markedSpans.length;++f)if(e=b.markedSpans[f],e.marker.collapsed&&!e.marker.widgetNode&&e.from==c.to&&(null==e.to||e.to!=c.from)&&(e.marker.inclusiveLeft||c.marker.inclusiveRight)&&ff(a,b,e))return!0}function hf(a,b,c){Wf(b)<(a.curOp&&a.curOp.scrollTop||a.doc.scrollTop)&&ae(a,null,c)}function jf(a){if(null!=a.height)return a.height;if(!ah(document.body,a.node)){var b="position: relative;";a.coverGutter&&(b+="margin-left: -"+a.cm.getGutterElement().offsetWidth+"px;"),_g(a.cm.display.measure,Yg("div",[a.node],null,b))}return a.height=a.node.offsetHeight}function kf(a,b,c,d){var e=new gf(a,c,d);return e.noHScroll&&(a.display.alignWidgets=!0),ee(a.doc,b,"widget",function(b){var c=b.widgets||(b.widgets=[]);if(null==e.insertAt?c.push(e):c.splice(Math.min(c.length-1,Math.max(0,e.insertAt)),0,e),e.line=b,!ef(a.doc,b)){var d=Wf(b)<a.doc.scrollTop;Tf(b,b.height+jf(e)),d&&ae(a,null,e.height),a.curOp.forceUpdate=!0}return!0}),e}function mf(a,b,c,d){a.text=b,a.stateAfter&&(a.stateAfter=null),a.styles&&(a.styles=null),null!=a.order&&(a.order=null),Te(a),Ue(a,c);var e=d?d(a):1;e!=a.height&&Tf(a,e)}function nf(a){a.parent=null,Te(a)}function of(a,b){if(a)for(;;){var c=a.match(/(?:^|\s+)line-(background-)?(\S+)/);if(!c)break;a=a.slice(0,c.index)+a.slice(c.index+c[0].length);var d=c[1]?"bgClass":"textClass";null==b[d]?b[d]=c[2]:new RegExp("(?:^|s)"+c[2]+"(?:$|s)").test(b[d])||(b[d]+=" "+c[2])}return a}function pf(a,b){if(a.blankLine)return a.blankLine(b);if(a.innerMode){var c=w.innerMode(a,b);return c.mode.blankLine?c.mode.blankLine(c.state):void 0}}function qf(a,b,c,d){for(var e=0;10>e;e++){d&&(d[0]=w.innerMode(a,c).mode);var f=a.token(b,c);if(b.pos>b.start)return f}throw new Error("Mode "+a.name+" failed to advance stream.")}function rf(a,b,c,d){function e(a){return{start:k.start,end:k.pos,string:k.current(),type:h||null,state:a?re(f.mode,j):j}}var h,f=a.doc,g=f.mode;b=wb(f,b);var l,i=Qf(f,b.line),j=Wb(a,b.line,c),k=new Ae(i.text,a.options.tabSize);for(d&&(l=[]);(d||k.pos<b.ch)&&!k.eol();)k.start=k.pos,h=qf(g,k,j),d&&l.push(e(!0));return d?l:e()}function sf(a,b,c,d,e,f,g){var h=c.flattenSpans;null==h&&(h=a.options.flattenSpans);var l,i=0,j=null,k=new Ae(b,a.options.tabSize),m=a.options.addModeClass&&[null];for(""==b&&of(pf(c,d),f);!k.eol();){if(k.pos>a.options.maxHighlightLength?(h=!1,g&&vf(a,b,d,k.pos),k.pos=b.length,l=null):l=of(qf(c,k,d,m),f),m){var n=m[0].name;n&&(l="m-"+(l?n+" "+l:n))}h&&j==l||(i<k.start&&e(k.start,j),i=k.start,j=l),k.start=k.pos}for(;i<k.pos;){var o=Math.min(k.pos,i+5e4);e(o,j),i=o}}function tf(a,b,c,d){var e=[a.state.modeGen],f={};sf(a,b.text,a.doc.mode,c,function(a,b){e.push(a,b)},f,d);for(var g=0;g<a.state.overlays.length;++g){var h=a.state.overlays[g],i=1,j=0;sf(a,b.text,h.mode,!0,function(a,b){for(var c=i;a>j;){var d=e[i];d>a&&e.splice(i,1,a,e[i+1],d),i+=2,j=Math.min(a,d)}if(b)if(h.opaque)e.splice(c,i-c,a,"cm-overlay "+b),i=c+2;else for(;i>c;c+=2){var f=e[c+1];e[c+1]=(f?f+" ":"")+"cm-overlay "+b}},f)}return{styles:e,classes:f.bgClass||f.textClass?f:null}}function uf(a,b,c){if(!b.styles||b.styles[0]!=a.state.modeGen){var d=tf(a,b,b.stateAfter=Wb(a,Uf(b)));b.styles=d.styles,d.classes?b.styleClasses=d.classes:b.styleClasses&&(b.styleClasses=null),c===a.doc.frontier&&a.doc.frontier++}return b.styles}function vf(a,b,c,d){var e=a.doc.mode,f=new Ae(b,a.options.tabSize);for(f.start=f.pos=d||0,""==b&&pf(e,c);!f.eol()&&f.pos<=a.options.maxHighlightLength;)qf(e,f,c),f.start=f.pos}function yf(a,b){if(!a||/^\s*$/.test(a))return null;var c=b.addModeClass?xf:wf;return c[a]||(c[a]=a.replace(/\S+/g,"cm-$&"))}function zf(a,b){var c=Yg("span",null,null,f?"padding-right: .1px":null),e={pre:Yg("pre",[c]),content:c,col:0,pos:0,cm:a};b.measure={};for(var g=0;g<=(b.rest?b.rest.length:0);g++){var i,h=g?b.rest[g-1]:b.line;e.pos=0,e.addToken=Bf,(d||f)&&a.getOption("lineWrapping")&&(e.addToken=Cf(e.addToken)),qh(a.display.measure)&&(i=Xf(h))&&(e.addToken=Df(e.addToken,i)),e.map=[];var j=b!=a.display.externalMeasured&&Uf(h);Ff(h,e,uf(a,h,j)),h.styleClasses&&(h.styleClasses.bgClass&&(e.bgClass=fh(h.styleClasses.bgClass,e.bgClass||"")),h.styleClasses.textClass&&(e.textClass=fh(h.styleClasses.textClass,e.textClass||""))),0==e.map.length&&e.map.push(0,0,e.content.appendChild(oh(a.display.measure))),0==g?(b.measure.map=e.map,b.measure.cache={}):((b.measure.maps||(b.measure.maps=[])).push(e.map),(b.measure.caches||(b.measure.caches=[])).push({}))}return f&&/\bcm-tab\b/.test(e.content.lastChild.className)&&(e.content.className="cm-tab-wrap-hack"),tg(a,"renderLine",a,b.line,e.pre),e.pre.className&&(e.textClass=fh(e.pre.className,e.textClass||"")),e}function Af(a){var b=Yg("span","\u2022","cm-invalidchar");return b.title="\\u"+a.charCodeAt(0).toString(16),b}function Bf(a,b,c,f,g,h){if(b){var i=a.cm.options.specialChars,j=!1;if(i.test(b))for(var k=document.createDocumentFragment(),l=0;;){i.lastIndex=l;var m=i.exec(b),n=m?m.index-l:b.length-l;if(n){var o=document.createTextNode(b.slice(l,l+n));d&&9>e?k.appendChild(Yg("span",[o])):k.appendChild(o),a.map.push(a.pos,a.pos+n,o),a.col+=n,a.pos+=n}if(!m)break;if(l+=n+1,"	"==m[0]){var p=a.cm.options.tabSize,q=p-a.col%p,o=k.appendChild(Yg("span",Kg(q),"cm-tab"));a.col+=q}else{var o=a.cm.options.specialCharPlaceholder(m[0]);d&&9>e?k.appendChild(Yg("span",[o])):k.appendChild(o),a.col+=1}a.map.push(a.pos,a.pos+1,o),a.pos++}else{a.col+=b.length;var k=document.createTextNode(b);a.map.push(a.pos,a.pos+b.length,k),d&&9>e&&(j=!0),a.pos+=b.length}if(c||f||g||j){var r=c||"";f&&(r+=f),g&&(r+=g);var s=Yg("span",[k],r);return h&&(s.title=h),a.content.appendChild(s)}a.content.appendChild(k)}}function Cf(a){function b(a){for(var b=" ",c=0;c<a.length-2;++c)b+=c%2?" ":"\xa0";return b+=" "}return function(c,d,e,f,g,h){a(c,d.replace(/ {3,}/g,b),e,f,g,h)}}function Df(a,b){return function(c,d,e,f,g,h){e=e?e+" cm-force-border":"cm-force-border";for(var i=c.pos,j=i+d.length;;){for(var k=0;k<b.length;k++){var l=b[k];if(l.to>i&&l.from<=i)break}if(l.to>=j)return a(c,d,e,f,g,h);a(c,d.slice(0,l.to-i),e,f,null,h),f=null,d=d.slice(l.to-i),i=l.to}}}function Ef(a,b,c,d){var e=!d&&c.widgetNode;e&&(a.map.push(a.pos,a.pos+b,e),a.content.appendChild(e)),a.pos+=b}function Ff(a,b,c){var d=a.markedSpans,e=a.text,f=0;if(d)for(var k,m,n,o,p,q,h=e.length,i=0,g=1,j="",l=0;;){if(l==i){m=n=o=p="",q=null,l=1/0;for(var r=[],s=0;s<d.length;++s){var t=d[s],u=t.marker;t.from<=i&&(null==t.to||t.to>i)?(null!=t.to&&l>t.to&&(l=t.to,n=""),u.className&&(m+=" "+u.className),u.startStyle&&t.from==i&&(o+=" "+u.startStyle),u.endStyle&&t.to==l&&(n+=" "+u.endStyle),u.title&&!p&&(p=u.title),u.collapsed&&(!q||Xe(q.marker,u)<0)&&(q=t)):t.from>i&&l>t.from&&(l=t.from),"bookmark"==u.type&&t.from==i&&u.widgetNode&&r.push(u)}if(q&&(q.from||0)==i&&(Ef(b,(null==q.to?h+1:q.to)-i,q.marker,null==q.from),null==q.to))return;if(!q&&r.length)for(var s=0;s<r.length;++s)Ef(b,0,r[s])}if(i>=h)break;for(var v=Math.min(h,l);;){if(j){var w=i+j.length;if(!q){var x=w>v?j.slice(0,v-i):j;b.addToken(b,x,k?k+m:m,o,i+x.length==l?n:"",p)}if(w>=v){j=j.slice(v-i),i=v;break}i=w,o=""}j=e.slice(f,f=c[g++]),k=yf(c[g++],b.cm.options)}}else for(var g=1;g<c.length;g+=2)b.addToken(b,e.slice(f,f=c[g]),yf(c[g+1],b.cm.options))}function Gf(a,b){return 0==b.from.ch&&0==b.to.ch&&""==Lg(b.text)&&(!a.cm||a.cm.options.wholeLineUpdateBefore)}function Hf(a,b,c,d){function e(a){return c?c[a]:null}function f(a,c,e){mf(a,c,e,d),vg(a,"change",a,b)}var g=b.from,h=b.to,i=b.text,j=Qf(a,g.line),k=Qf(a,h.line),l=Lg(i),m=e(i.length-1),n=h.line-g.line;if(Gf(a,b)){for(var o=0,p=[];o<i.length-1;++o)p.push(new lf(i[o],e(o),d));f(k,k.text,m),n&&a.remove(g.line,n),p.length&&a.insert(g.line,p)}else if(j==k)if(1==i.length)f(j,j.text.slice(0,g.ch)+l+j.text.slice(h.ch),m);else{for(var p=[],o=1;o<i.length-1;++o)p.push(new lf(i[o],e(o),d));p.push(new lf(l+j.text.slice(h.ch),m,d)),f(j,j.text.slice(0,g.ch)+i[0],e(0)),a.insert(g.line+1,p)}else if(1==i.length)f(j,j.text.slice(0,g.ch)+i[0]+k.text.slice(h.ch),e(0)),a.remove(g.line+1,n);else{f(j,j.text.slice(0,g.ch)+i[0],e(0)),f(k,l+k.text.slice(h.ch),m);for(var o=1,p=[];o<i.length-1;++o)p.push(new lf(i[o],e(o),d));n>1&&a.remove(g.line+1,n-1),a.insert(g.line+1,p)}vg(a,"change",a,b)}function If(a){this.lines=a,this.parent=null;for(var b=0,c=0;b<a.length;++b)a[b].parent=this,c+=a[b].height;this.height=c}function Jf(a){this.children=a;for(var b=0,c=0,d=0;d<a.length;++d){var e=a[d];b+=e.chunkSize(),c+=e.height,e.parent=this}this.size=b,this.height=c,this.parent=null}function Of(a,b,c){function d(a,e,f){if(a.linked)for(var g=0;g<a.linked.length;++g){var h=a.linked[g];if(h.doc!=e){var i=f&&h.sharedHist;(!c||i)&&(b(h.doc,i),d(h.doc,a,i))}}}d(a,null,!0)}function Pf(a,b){if(b.cm)throw new Error("This document is already in use.");a.doc=b,b.cm=a,C(a),y(a),a.options.lineWrapping||I(a),a.options.mode=b.modeOption,Pc(a)}function Qf(a,b){if(b-=a.first,0>b||b>=a.size)throw new Error("There is no line "+(b+a.first)+" in the document.");for(var c=a;!c.lines;)for(var d=0;;++d){var e=c.children[d],f=e.chunkSize();if(f>b){c=e;break}b-=f}return c.lines[b]}function Rf(a,b,c){var d=[],e=b.line;return a.iter(b.line,c.line+1,function(a){var f=a.text;e==c.line&&(f=f.slice(0,c.ch)),e==b.line&&(f=f.slice(b.ch)),d.push(f),++e}),d}function Sf(a,b,c){var d=[];return a.iter(b,c,function(a){d.push(a.text)}),d}function Tf(a,b){var c=b-a.height;if(c)for(var d=a;d;d=d.parent)d.height+=c}function Uf(a){if(null==a.parent)return null;for(var b=a.parent,c=Ng(b.lines,a),d=b.parent;d;b=d,d=d.parent)for(var e=0;d.children[e]!=b;++e)c+=d.children[e].chunkSize();return c+b.first}function Vf(a,b){var c=a.first;a:do{for(var d=0;d<a.children.length;++d){var e=a.children[d],f=e.height;if(f>b){a=e;continue a}b-=f,c+=e.chunkSize()}return c}while(!a.lines);for(var d=0;d<a.lines.length;++d){var g=a.lines[d],h=g.height;if(h>b)break;b-=h}return c+d}function Wf(a){a=af(a);for(var b=0,c=a.parent,d=0;d<c.lines.length;++d){var e=c.lines[d];if(e==a)break;b+=e.height}for(var f=c.parent;f;c=f,f=c.parent)for(var d=0;d<f.children.length;++d){var g=f.children[d];if(g==c)break;b+=g.height}return b}function Xf(a){var b=a.order;return null==b&&(b=a.order=Lh(a.text)),b}function Yf(a){this.done=[],this.undone=[],this.undoDepth=1/0,this.lastModTime=this.lastSelTime=0,this.lastOp=this.lastSelOp=null,this.lastOrigin=this.lastSelOrigin=null,this.generation=this.maxGeneration=a||1}function Zf(a,b){var c={from:ob(b.from),to:Ld(b),text:Rf(a,b.from,b.to)};return eg(a,c,b.from.line,b.to.line+1),Of(a,function(a){eg(a,c,b.from.line,b.to.line+1)},!0),c}function $f(a){for(;a.length;){var b=Lg(a);if(!b.ranges)break;a.pop()}}function _f(a,b){return b?($f(a.done),Lg(a.done)):a.done.length&&!Lg(a.done).ranges?Lg(a.done):a.done.length>1&&!a.done[a.done.length-2].ranges?(a.done.pop(),Lg(a.done)):void 0}function ag(a,b,c,d){var e=a.history;e.undone.length=0;var g,f=+new Date;if((e.lastOp==d||e.lastOrigin==b.origin&&b.origin&&("+"==b.origin.charAt(0)&&a.cm&&e.lastModTime>f-a.cm.options.historyEventDelay||"*"==b.origin.charAt(0)))&&(g=_f(e,e.lastOp==d))){var h=Lg(g.changes);0==nb(b.from,b.to)&&0==nb(b.from,h.to)?h.to=Ld(b):g.changes.push(Zf(a,b))}else{var i=Lg(e.done);for(i&&i.ranges||dg(a.sel,e.done),g={changes:[Zf(a,b)],generation:e.generation},e.done.push(g);e.done.length>e.undoDepth;)e.done.shift(),e.done[0].ranges||e.done.shift()}e.done.push(c),e.generation=++e.maxGeneration,e.lastModTime=e.lastSelTime=f,e.lastOp=e.lastSelOp=d,e.lastOrigin=e.lastSelOrigin=b.origin,h||tg(a,"historyAdded")}function bg(a,b,c,d){var e=b.charAt(0);return"*"==e||"+"==e&&c.ranges.length==d.ranges.length&&c.somethingSelected()==d.somethingSelected()&&new Date-a.history.lastSelTime<=(a.cm?a.cm.options.historyEventDelay:500)}function cg(a,b,c,d){var e=a.history,f=d&&d.origin;c==e.lastSelOp||f&&e.lastSelOrigin==f&&(e.lastModTime==e.lastSelTime&&e.lastOrigin==f||bg(a,f,Lg(e.done),b))?e.done[e.done.length-1]=b:dg(b,e.done),e.lastSelTime=+new Date,e.lastSelOrigin=f,e.lastSelOp=c,d&&d.clearRedo!==!1&&$f(e.undone)}function dg(a,b){var c=Lg(b);c&&c.ranges&&c.equals(a)||b.push(a)}function eg(a,b,c,d){var e=b["spans_"+a.id],f=0;a.iter(Math.max(a.first,c),Math.min(a.first+a.size,d),function(c){c.markedSpans&&((e||(e=b["spans_"+a.id]={}))[f]=c.markedSpans),++f})}function fg(a){if(!a)return null;for(var c,b=0;b<a.length;++b)a[b].marker.explicitlyCleared?c||(c=a.slice(0,b)):c&&c.push(a[b]);return c?c.length?c:null:a}function gg(a,b){var c=b["spans_"+a.id];if(!c)return null;for(var d=0,e=[];d<b.text.length;++d)e.push(fg(c[d]));return e}function hg(a,b,c){for(var d=0,e=[];d<a.length;++d){var f=a[d];if(f.ranges)e.push(c?rb.prototype.deepCopy.call(f):f);else{var g=f.changes,h=[];e.push({changes:h});for(var i=0;i<g.length;++i){var k,j=g[i];if(h.push({from:j.from,to:j.to,text:j.text}),b)for(var l in j)(k=l.match(/^spans_(\d+)$/))&&Ng(b,Number(k[1]))>-1&&(Lg(h)[l]=j[l],delete j[l])}}}return e}function ig(a,b,c,d){c<a.line?a.line+=d:b<a.line&&(a.line=b,a.ch=0)}function jg(a,b,c,d){for(var e=0;e<a.length;++e){var f=a[e],g=!0;if(f.ranges){f.copied||(f=a[e]=f.deepCopy(),f.copied=!0);for(var h=0;h<f.ranges.length;h++)ig(f.ranges[h].anchor,b,c,d),ig(f.ranges[h].head,b,c,d)}else{for(var h=0;h<f.changes.length;++h){var i=f.changes[h];if(c<i.from.line)i.from=mb(i.from.line+d,i.from.ch),i.to=mb(i.to.line+d,i.to.ch);else if(b<=i.to.line){g=!1;break}}g||(a.splice(0,e+1),e=0)}}}function kg(a,b){var c=b.from.line,d=b.to.line,e=b.text.length-(d-c)-1;jg(a.done,c,d,e),jg(a.undone,c,d,e)}function ng(a){return null!=a.defaultPrevented?a.defaultPrevented:0==a.returnValue}function pg(a){return a.target||a.srcElement}function qg(a){var b=a.which;return null==b&&(1&a.button?b=1:2&a.button?b=3:4&a.button&&(b=2)),p&&a.ctrlKey&&1==b&&(b=3),b}function vg(a,b){function f(a){return function(){a.apply(null,d)}}var c=a._handlers&&a._handlers[b];if(c){var e,d=Array.prototype.slice.call(arguments,2);yc?e=yc.delayedCallbacks:ug?e=ug:(e=ug=[],setTimeout(wg,0));for(var g=0;g<c.length;++g)e.push(f(c[g]))}}function wg(){var a=ug;ug=null;for(var b=0;b<a.length;++b)a[b]()}function xg(a,b,c){return"string"==typeof b&&(b={type:b,preventDefault:function(){this.defaultPrevented=!0}}),tg(a,c||b.type,a,b),ng(b)||b.codemirrorIgnore}function yg(a){var b=a._handlers&&a._handlers.cursorActivity;if(b)for(var c=a.curOp.cursorActivityHandlers||(a.curOp.cursorActivityHandlers=[]),d=0;d<b.length;++d)-1==Ng(c,b[d])&&c.push(b[d])}function zg(a,b){var c=a._handlers&&a._handlers[b];return c&&c.length>0}function Ag(a){a.prototype.on=function(a,b){rg(this,a,b)},a.prototype.off=function(a,b){sg(this,a,b)}}function Gg(){this.id=null}function Ig(a,b,c){for(var d=0,e=0;;){var f=a.indexOf("	",d);-1==f&&(f=a.length);var g=f-d;if(f==a.length||e+g>=b)return d+Math.min(g,b-e);if(e+=f-d,e+=c-e%c,d=f+1,e>=b)return d}}function Kg(a){for(;Jg.length<=a;)Jg.push(Lg(Jg)+" ");return Jg[a]}function Lg(a){return a[a.length-1]}function Ng(a,b){for(var c=0;c<a.length;++c)if(a[c]==b)return c;return-1}function Og(a,b){for(var c=[],d=0;d<a.length;d++)c[d]=b(a[d],d);return c}function Pg(a,b){var c;if(Object.create)c=Object.create(a);else{var d=function(){};d.prototype=a,c=new d}return b&&Qg(b,c),c}function Qg(a,b,c){b||(b={});for(var d in a)!a.hasOwnProperty(d)||c===!1&&b.hasOwnProperty(d)||(b[d]=a[d]);return b}function Rg(a){var b=Array.prototype.slice.call(arguments,1);return function(){return a.apply(null,b)}}function Ug(a,b){return b?b.source.indexOf("\\w")>-1&&Tg(a)?!0:b.test(a):Tg(a)}function Vg(a){for(var b in a)if(a.hasOwnProperty(b)&&a[b])return!1;return!0}function Xg(a){return a.charCodeAt(0)>=768&&Wg.test(a)}function Yg(a,b,c,d){var e=document.createElement(a);if(c&&(e.className=c),d&&(e.style.cssText=d),"string"==typeof b)e.appendChild(document.createTextNode(b));else if(b)for(var f=0;f<b.length;++f)e.appendChild(b[f]);return e}function $g(a){for(var b=a.childNodes.length;b>0;--b)a.removeChild(a.firstChild);return a}function _g(a,b){return $g(a).appendChild(b)}function ah(a,b){if(a.contains)return a.contains(b);for(;b=b.parentNode;)if(b==a)return!0}function bh(){return document.activeElement}function ch(a){return new RegExp("(^|\\s)"+a+"(?:$|\\s)\\s*")}function fh(a,b){for(var c=a.split(" "),d=0;d<c.length;d++)c[d]&&!ch(c[d]).test(b)&&(b+=" "+c[d]);return b}function gh(a){if(document.body.getElementsByClassName)for(var b=document.body.getElementsByClassName("CodeMirror"),c=0;c<b.length;c++){var d=b[c].CodeMirror;d&&a(d)}}function ih(){hh||(jh(),hh=!0)}function jh(){var a;rg(window,"resize",function(){null==a&&(a=setTimeout(function(){a=null,lh=null,gh(dd)},100))}),rg(window,"blur",function(){gh(Id)})}function mh(a){if(null!=lh)return lh;var b=Yg("div",null,null,"width: 50px; height: 50px; overflow-x: scroll");return _g(a,b),b.offsetWidth&&(lh=b.offsetHeight-b.clientHeight),lh||0}function oh(a){if(null==nh){var b=Yg("span","\u200b");_g(a,Yg("span",[b,document.createTextNode("x")])),0!=a.firstChild.offsetHeight&&(nh=b.offsetWidth<=1&&b.offsetHeight>2&&!(d&&8>e))}return nh?Yg("span","\u200b"):Yg("span","\xa0",null,"display: inline-block; width: 1px; margin-right: -1px")}function qh(a){if(null!=ph)return ph;var b=_g(a,document.createTextNode("A\u062eA")),c=Zg(b,0,1).getBoundingClientRect();if(!c||c.left==c.right)return!1;var d=Zg(b,1,2).getBoundingClientRect();return ph=d.right-c.right<3}function vh(a){if(null!=uh)return uh;var b=_g(a,Yg("span","x")),c=b.getBoundingClientRect(),d=Zg(b,0,1).getBoundingClientRect();return uh=Math.abs(c.left-d.left)>1}function xh(a,b,c,d){if(!a)return d(b,c,"ltr");for(var e=!1,f=0;f<a.length;++f){var g=a[f];(g.from<c&&g.to>b||b==c&&g.to==b)&&(d(Math.max(g.from,b),Math.min(g.to,c),1==g.level?"rtl":"ltr"),e=!0)}e||d(b,c,"ltr")}function yh(a){return a.level%2?a.to:a.from}function zh(a){return a.level%2?a.from:a.to}function Ah(a){var b=Xf(a);return b?yh(b[0]):0}function Bh(a){var b=Xf(a);return b?zh(Lg(b)):a.text.length}function Ch(a,b){var c=Qf(a.doc,b),d=af(c);d!=c&&(b=Uf(d));var e=Xf(d),f=e?e[0].level%2?Bh(d):Ah(d):0;return mb(b,f)}function Dh(a,b){for(var c,d=Qf(a.doc,b);c=$e(d);)d=c.find(1,!0).line,b=null;var e=Xf(d),f=e?e[0].level%2?Ah(d):Bh(d):d.text.length;return mb(null==b?Uf(d):b,f)}function Eh(a,b){var c=Ch(a,b.line),d=Qf(a.doc,c.line),e=Xf(d);if(!e||0==e[0].level){var f=Math.max(0,d.text.search(/\S/)),g=b.line==c.line&&b.ch<=f&&b.ch;return mb(c.line,g?0:f)}return c}function Fh(a,b,c){var d=a[0].level;return b==d?!0:c==d?!1:c>b}function Hh(a,b){Gh=null;for(var d,c=0;c<a.length;++c){var e=a[c];if(e.from<b&&e.to>b)return c;if(e.from==b||e.to==b){if(null!=d)return Fh(a,e.level,a[d].level)?(e.from!=e.to&&(Gh=d),c):(e.from!=e.to&&(Gh=c),d);d=c}}return d}function Ih(a,b,c,d){if(!d)return b+c;do b+=c;while(b>0&&Xg(a.text.charAt(b)));return b}function Jh(a,b,c,d){var e=Xf(a);if(!e)return Kh(a,b,c,d);for(var f=Hh(e,b),g=e[f],h=Ih(a,b,g.level%2?-c:c,d);;){if(h>g.from&&h<g.to)return h;if(h==g.from||h==g.to)return Hh(e,h)==f?h:(g=e[f+=c],c>0==g.level%2?g.to:g.from);if(g=e[f+=c],!g)return null;h=c>0==g.level%2?Ih(a,g.to,-1,d):Ih(a,g.from,1,d)}}function Kh(a,b,c,d){var e=b+c;if(d)for(;e>0&&Xg(a.text.charAt(e));)e+=c;return 0>e||e>a.text.length?null:e}var a=/gecko\/\d/i.test(navigator.userAgent),b=/MSIE \d/.test(navigator.userAgent),c=/Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent),d=b||c,e=d&&(b?document.documentMode||6:c[1]),f=/WebKit\//.test(navigator.userAgent),g=f&&/Qt\/\d+\.\d+/.test(navigator.userAgent),h=/Chrome\//.test(navigator.userAgent),i=/Opera\//.test(navigator.userAgent),j=/Apple Computer/.test(navigator.vendor),k=/KHTML\//.test(navigator.userAgent),l=/Mac OS X 1\d\D([8-9]|\d\d)\D/.test(navigator.userAgent),m=/PhantomJS/.test(navigator.userAgent),n=/AppleWebKit/.test(navigator.userAgent)&&/Mobile\/\w+/.test(navigator.userAgent),o=n||/Android|webOS|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(navigator.userAgent),p=n||/Mac/.test(navigator.platform),q=/win/i.test(navigator.platform),r=i&&navigator.userAgent.match(/Version\/(\d*\.\d*)/);r&&(r=Number(r[1])),r&&r>=15&&(i=!1,f=!0);var s=p&&(g||i&&(null==r||12.11>r)),t=a||d&&e>=9,u=!1,v=!1,mb=w.Pos=function(a,b){return this instanceof mb?(this.line=a,this.ch=b,void 0):new mb(a,b)},nb=w.cmpPos=function(a,b){return a.line-b.line||a.ch-b.ch};rb.prototype={primary:function(){return this.ranges[this.primIndex]},equals:function(a){if(a==this)return!0;if(a.primIndex!=this.primIndex||a.ranges.length!=this.ranges.length)return!1;for(var b=0;b<this.ranges.length;b++){var c=this.ranges[b],d=a.ranges[b];if(0!=nb(c.anchor,d.anchor)||0!=nb(c.head,d.head))return!1}return!0},deepCopy:function(){for(var a=[],b=0;b<this.ranges.length;b++)a[b]=new sb(ob(this.ranges[b].anchor),ob(this.ranges[b].head));return new rb(a,this.primIndex)},somethingSelected:function(){for(var a=0;a<this.ranges.length;a++)if(!this.ranges[a].empty())return!0;return!1},contains:function(a,b){b||(b=a);for(var c=0;c<this.ranges.length;c++){var d=this.ranges[c];if(nb(b,d.from())>=0&&nb(a,d.to())<=0)return c}return-1}},sb.prototype={from:function(){return qb(this.anchor,this.head)},to:function(){return pb(this.anchor,this.head)},empty:function(){return this.head.line==this.anchor.line&&this.head.ch==this.anchor.ch}};var vc,hd,id,fc={left:0,right:0,top:0,bottom:0},yc=null,zc=0,Yc=null,od=0,td=0,ud=null;d?ud=-.53:a?ud=15:h?ud=-.7:j&&(ud=-1/3);var yd=new Gg,Cd=null,Ld=w.changeEnd=function(a){return a.text?mb(a.from.line+a.text.length-1,Lg(a.text).length+(1==a.text.length?a.from.ch:0)):a.to};w.prototype={constructor:w,focus:function(){window.focus(),_c(this),Xc(this)},setOption:function(a,b){var c=this.options,d=c[a];(c[a]!=b||"mode"==a)&&(c[a]=b,je.hasOwnProperty(a)&&Kc(this,je[a])(this,b,d))},getOption:function(a){return this.options[a]},getDoc:function(){return this.doc},addKeyMap:function(a,b){this.state.keyMaps[b?"push":"unshift"](ze(a))},removeKeyMap:function(a){for(var b=this.state.keyMaps,c=0;c<b.length;++c)if(b[c]==a||b[c].name==a)return b.splice(c,1),!0},addOverlay:Lc(function(a,b){var c=a.token?a:w.getMode(this.options,a);if(c.startState)throw new Error("Overlays may not be stateful.");this.state.overlays.push({mode:c,modeSpec:a,opaque:b&&b.opaque}),this.state.modeGen++,Pc(this)}),removeOverlay:Lc(function(a){for(var b=this.state.overlays,c=0;c<b.length;++c){var d=b[c].modeSpec;if(d==a||"string"==typeof a&&d.name==a)return b.splice(c,1),this.state.modeGen++,Pc(this),void 0}}),indentLine:Lc(function(a,b,c){"string"!=typeof b&&"number"!=typeof b&&(b=null==b?this.options.smartIndent?"smart":"prev":b?"add":"subtract"),yb(this.doc,a)&&de(this,a,b,c)}),indentSelection:Lc(function(a){for(var b=this.doc.sel.ranges,c=-1,d=0;d<b.length;d++){var e=b[d];if(e.empty())e.head.line>c&&(de(this,e.head.line,a,!0),c=e.head.line,d==this.doc.sel.primIndex&&be(this));else{var f=e.from(),g=e.to(),h=Math.max(c,f.line);c=Math.min(this.lastLine(),g.line-(g.ch?0:1))+1;for(var i=h;c>i;++i)de(this,i,a);var j=this.doc.sel.ranges;0==f.ch&&b.length==j.length&&j[d].from().ch>0&&Db(this.doc,d,new sb(f,j[d].to()),Dg)}}}),getTokenAt:function(a,b){return rf(this,a,b)},getLineTokens:function(a,b){return rf(this,mb(a),b,!0)},getTokenTypeAt:function(a){a=wb(this.doc,a);var f,b=uf(this,Qf(this.doc,a.line)),c=0,d=(b.length-1)/2,e=a.ch;if(0==e)f=b[2];else for(;;){var g=c+d>>1;if((g?b[2*g-1]:0)>=e)d=g;else{if(!(b[2*g+1]<e)){f=b[2*g+2];break}c=g+1}}var h=f?f.indexOf("cm-overlay "):-1;return 0>h?f:0==h?null:f.slice(0,h-1)},getModeAt:function(a){var b=this.doc.mode;return b.innerMode?w.innerMode(b,this.getTokenAt(a).state).mode:b},getHelper:function(a,b){return this.getHelpers(a,b)[0]},getHelpers:function(a,b){var c=[];if(!qe.hasOwnProperty(b))return qe;var d=qe[b],e=this.getModeAt(a);if("string"==typeof e[b])d[e[b]]&&c.push(d[e[b]]);else if(e[b])for(var f=0;f<e[b].length;f++){var g=d[e[b][f]];g&&c.push(g)}else e.helperType&&d[e.helperType]?c.push(d[e.helperType]):d[e.name]&&c.push(d[e.name]);for(var f=0;f<d._global.length;f++){var h=d._global[f];h.pred(e,this)&&-1==Ng(c,h.val)&&c.push(h.val)}return c},getStateAfter:function(a,b){var c=this.doc;return a=vb(c,null==a?c.first+c.size-1:a),Wb(this,a+1,b)},cursorCoords:function(a,b){var c,d=this.doc.sel.primary();return c=null==a?d.head:"object"==typeof a?wb(this.doc,a):a?d.from():d.to(),qc(this,c,b||"page")},charCoords:function(a,b){return pc(this,wb(this.doc,a),b||"page")},coordsChar:function(a,b){return a=oc(this,a,b||"page"),tc(this,a.left,a.top)},lineAtHeight:function(a,b){return a=oc(this,{top:a,left:0},b||"page").top,Vf(this.doc,a+this.display.viewOffset)},heightAtLine:function(a,b){var c=!1,d=this.doc.first+this.doc.size-1;a<this.doc.first?a=this.doc.first:a>d&&(a=d,c=!0);var e=Qf(this.doc,a);return nc(this,e,{top:0,left:0},b||"page").top+(c?this.doc.height-Wf(e):0)},defaultTextHeight:function(){return wc(this.display)},defaultCharWidth:function(){return xc(this.display)},setGutterMarker:Lc(function(a,b,c){return ee(this.doc,a,"gutter",function(a){var d=a.gutterMarkers||(a.gutterMarkers={});return d[b]=c,!c&&Vg(d)&&(a.gutterMarkers=null),!0})}),clearGutter:Lc(function(a){var b=this,c=b.doc,d=c.first;c.iter(function(c){c.gutterMarkers&&c.gutterMarkers[a]&&(c.gutterMarkers[a]=null,Qc(b,d,"gutter"),Vg(c.gutterMarkers)&&(c.gutterMarkers=null)),++d})}),addLineWidget:Lc(function(a,b,c){return kf(this,a,b,c)}),removeLineWidget:function(a){a.clear()},lineInfo:function(a){if("number"==typeof a){if(!yb(this.doc,a))return null;var b=a;if(a=Qf(this.doc,a),!a)return null}else{var b=Uf(a);if(null==b)return null}return{line:b,handle:a,text:a.text,gutterMarkers:a.gutterMarkers,textClass:a.textClass,bgClass:a.bgClass,wrapClass:a.wrapClass,widgets:a.widgets}},getViewport:function(){return{from:this.display.viewFrom,to:this.display.viewTo}},addWidget:function(a,b,c,d,e){var f=this.display;a=qc(this,wb(this.doc,a));var g=a.bottom,h=a.left;if(b.style.position="absolute",f.sizer.appendChild(b),"over"==d)g=a.top;else if("above"==d||"near"==d){var i=Math.max(f.wrapper.clientHeight,this.doc.height),j=Math.max(f.sizer.clientWidth,f.lineSpace.clientWidth);
+("above"==d||a.bottom+b.offsetHeight>i)&&a.top>b.offsetHeight?g=a.top-b.offsetHeight:a.bottom+b.offsetHeight<=i&&(g=a.bottom),h+b.offsetWidth>j&&(h=j-b.offsetWidth)}b.style.top=g+"px",b.style.left=b.style.right="","right"==e?(h=f.sizer.clientWidth-b.offsetWidth,b.style.right="0px"):("left"==e?h=0:"middle"==e&&(h=(f.sizer.clientWidth-b.offsetWidth)/2),b.style.left=h+"px"),c&&$d(this,h,g,h+b.offsetWidth,g+b.offsetHeight)},triggerOnKeyDown:Lc(Dd),triggerOnKeyPress:Lc(Gd),triggerOnKeyUp:Fd,execCommand:function(a){return te.hasOwnProperty(a)?te[a](this):void 0},findPosH:function(a,b,c,d){var e=1;0>b&&(e=-1,b=-b);for(var f=0,g=wb(this.doc,a);b>f&&(g=ge(this.doc,g,e,c,d),!g.hitSide);++f);return g},moveH:Lc(function(a,b){var c=this;c.extendSelectionsBy(function(d){return c.display.shift||c.doc.extend||d.empty()?ge(c.doc,d.head,a,b,c.options.rtlMoveVisually):0>a?d.from():d.to()},Fg)}),deleteH:Lc(function(a,b){var c=this.doc.sel,d=this.doc;c.somethingSelected()?d.replaceSelection("",null,"+delete"):fe(this,function(c){var e=ge(d,c.head,a,b,!1);return 0>a?{from:e,to:c.head}:{from:c.head,to:e}})}),findPosV:function(a,b,c,d){var e=1,f=d;0>b&&(e=-1,b=-b);for(var g=0,h=wb(this.doc,a);b>g;++g){var i=qc(this,h,"div");if(null==f?f=i.left:i.left=f,h=he(this,i,e,c),h.hitSide)break}return h},moveV:Lc(function(a,b){var c=this,d=this.doc,e=[],f=!c.display.shift&&!d.extend&&d.sel.somethingSelected();if(d.extendSelectionsBy(function(g){if(f)return 0>a?g.from():g.to();var h=qc(c,g.head,"div");null!=g.goalColumn&&(h.left=g.goalColumn),e.push(h.left);var i=he(c,h,a,b);return"page"==b&&g==d.sel.primary()&&ae(c,null,pc(c,i,"div").top-h.top),i},Fg),e.length)for(var g=0;g<d.sel.ranges.length;g++)d.sel.ranges[g].goalColumn=e[g]}),findWordAt:function(a){var b=this.doc,c=Qf(b,a.line).text,d=a.ch,e=a.ch;if(c){var f=this.getHelper(a,"wordChars");(a.xRel<0||e==c.length)&&d?--d:++e;for(var g=c.charAt(d),h=Ug(g,f)?function(a){return Ug(a,f)}:/\s/.test(g)?function(a){return/\s/.test(a)}:function(a){return!/\s/.test(a)&&!Ug(a)};d>0&&h(c.charAt(d-1));)--d;for(;e<c.length&&h(c.charAt(e));)++e}return new sb(mb(a.line,d),mb(a.line,e))},toggleOverwrite:function(a){(null==a||a!=this.state.overwrite)&&((this.state.overwrite=!this.state.overwrite)?eh(this.display.cursorDiv,"CodeMirror-overwrite"):dh(this.display.cursorDiv,"CodeMirror-overwrite"),tg(this,"overwriteToggle",this,this.state.overwrite))},hasFocus:function(){return bh()==this.display.input},scrollTo:Lc(function(a,b){(null!=a||null!=b)&&ce(this),null!=a&&(this.curOp.scrollLeft=a),null!=b&&(this.curOp.scrollTop=b)}),getScrollInfo:function(){var a=this.display.scroller,b=Bg;return{left:a.scrollLeft,top:a.scrollTop,height:a.scrollHeight-b,width:a.scrollWidth-b,clientHeight:a.clientHeight-b,clientWidth:a.clientWidth-b}},scrollIntoView:Lc(function(a,b){if(null==a?(a={from:this.doc.sel.primary().head,to:null},null==b&&(b=this.options.cursorScrollMargin)):"number"==typeof a?a={from:mb(a,0),to:null}:null==a.from&&(a={from:a,to:null}),a.to||(a.to=a.from),a.margin=b||0,null!=a.from.line)ce(this),this.curOp.scrollToPos=a;else{var c=_d(this,Math.min(a.from.left,a.to.left),Math.min(a.from.top,a.to.top)-a.margin,Math.max(a.from.right,a.to.right),Math.max(a.from.bottom,a.to.bottom)+a.margin);this.scrollTo(c.scrollLeft,c.scrollTop)}}),setSize:Lc(function(a,b){function d(a){return"number"==typeof a||/^\d+$/.test(String(a))?a+"px":a}var c=this;null!=a&&(c.display.wrapper.style.width=d(a)),null!=b&&(c.display.wrapper.style.height=d(b)),c.options.lineWrapping&&jc(this);var e=c.display.viewFrom;c.doc.iter(e,c.display.viewTo,function(a){if(a.widgets)for(var b=0;b<a.widgets.length;b++)if(a.widgets[b].noHScroll){Qc(c,e,"widget");break}++e}),c.curOp.forceUpdate=!0,tg(c,"refresh",this)}),operation:function(a){return Jc(this,a)},refresh:Lc(function(){var a=this.display.cachedTextHeight;Pc(this),this.curOp.forceUpdate=!0,kc(this),this.scrollTo(this.doc.scrollLeft,this.doc.scrollTop),G(this),(null==a||Math.abs(a-wc(this.display))>.5)&&C(this),tg(this,"refresh",this)}),swapDoc:Lc(function(a){var b=this.doc;return b.cm=null,Pf(this,a),kc(this),$c(this),this.scrollTo(a.scrollLeft,a.scrollTop),this.curOp.forceScroll=!0,vg(this,"swapDoc",this,b),b}),getInputField:function(){return this.display.input},getWrapperElement:function(){return this.display.wrapper},getScrollerElement:function(){return this.display.scroller},getGutterElement:function(){return this.display.gutters}},Ag(w);var ie=w.defaults={},je=w.optionHandlers={},le=w.Init={toString:function(){return"CodeMirror.Init"}};ke("value","",function(a,b){a.setValue(b)},!0),ke("mode",null,function(a,b){a.doc.modeOption=b,y(a)},!0),ke("indentUnit",2,y,!0),ke("indentWithTabs",!1),ke("smartIndent",!0),ke("tabSize",4,function(a){z(a),kc(a),Pc(a)},!0),ke("specialChars",/[\t\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/g,function(a,b){a.options.specialChars=new RegExp(b.source+(b.test("	")?"":"|	"),"g"),a.refresh()},!0),ke("specialCharPlaceholder",Af,function(a){a.refresh()},!0),ke("electricChars",!0),ke("rtlMoveVisually",!q),ke("wholeLineUpdateBefore",!0),ke("theme","default",function(a){D(a),E(a)},!0),ke("keyMap","default",function(a,b,c){var d=ze(b),e=c!=w.Init&&ze(c);e&&e.detach&&e.detach(a,d),d.attach&&d.attach(a,e||null)}),ke("extraKeys",null),ke("lineWrapping",!1,A,!0),ke("gutters",[],function(a){J(a.options),E(a)},!0),ke("fixedGutter",!0,function(a,b){a.display.gutters.style.left=b?R(a.display)+"px":"0",a.refresh()},!0),ke("coverGutterNextToScrollbar",!1,M,!0),ke("lineNumbers",!1,function(a){J(a.options),E(a)},!0),ke("firstLineNumber",1,E,!0),ke("lineNumberFormatter",function(a){return a},E,!0),ke("showCursorWhenSelecting",!1,Pb,!0),ke("resetSelectionOnContextMenu",!0),ke("readOnly",!1,function(a,b){"nocursor"==b?(Id(a),a.display.input.blur(),a.display.disabled=!0):(a.display.disabled=!1,b||$c(a))}),ke("disableInput",!1,function(a,b){b||$c(a)},!0),ke("dragDrop",!0),ke("cursorBlinkRate",530),ke("cursorScrollMargin",0),ke("cursorHeight",1,Pb,!0),ke("singleCursorHeightPerLine",!0,Pb,!0),ke("workTime",100),ke("workDelay",100),ke("flattenSpans",!0,z,!0),ke("addModeClass",!1,z,!0),ke("pollInterval",100),ke("undoDepth",200,function(a,b){a.doc.history.undoDepth=b}),ke("historyEventDelay",1250),ke("viewportMargin",10,function(a){a.refresh()},!0),ke("maxHighlightLength",1e4,z,!0),ke("moveInputWithCursor",!0,function(a,b){b||(a.display.inputDiv.style.top=a.display.inputDiv.style.left=0)}),ke("tabindex",null,function(a,b){a.display.input.tabIndex=b||""}),ke("autofocus",null);var me=w.modes={},ne=w.mimeModes={};w.defineMode=function(a,b){w.defaults.mode||"null"==a||(w.defaults.mode=a),arguments.length>2&&(b.dependencies=Array.prototype.slice.call(arguments,2)),me[a]=b},w.defineMIME=function(a,b){ne[a]=b},w.resolveMode=function(a){if("string"==typeof a&&ne.hasOwnProperty(a))a=ne[a];else if(a&&"string"==typeof a.name&&ne.hasOwnProperty(a.name)){var b=ne[a.name];"string"==typeof b&&(b={name:b}),a=Pg(b,a),a.name=b.name}else if("string"==typeof a&&/^[\w\-]+\/[\w\-]+\+xml$/.test(a))return w.resolveMode("application/xml");return"string"==typeof a?{name:a}:a||{name:"null"}},w.getMode=function(a,b){var b=w.resolveMode(b),c=me[b.name];if(!c)return w.getMode(a,"text/plain");var d=c(a,b);if(oe.hasOwnProperty(b.name)){var e=oe[b.name];for(var f in e)e.hasOwnProperty(f)&&(d.hasOwnProperty(f)&&(d["_"+f]=d[f]),d[f]=e[f])}if(d.name=b.name,b.helperType&&(d.helperType=b.helperType),b.modeProps)for(var f in b.modeProps)d[f]=b.modeProps[f];return d},w.defineMode("null",function(){return{token:function(a){a.skipToEnd()}}}),w.defineMIME("text/plain","null");var oe=w.modeExtensions={};w.extendMode=function(a,b){var c=oe.hasOwnProperty(a)?oe[a]:oe[a]={};Qg(b,c)},w.defineExtension=function(a,b){w.prototype[a]=b},w.defineDocExtension=function(a,b){Lf.prototype[a]=b},w.defineOption=ke;var pe=[];w.defineInitHook=function(a){pe.push(a)};var qe=w.helpers={};w.registerHelper=function(a,b,c){qe.hasOwnProperty(a)||(qe[a]=w[a]={_global:[]}),qe[a][b]=c},w.registerGlobalHelper=function(a,b,c,d){w.registerHelper(a,b,d),qe[a]._global.push({pred:c,val:d})};var re=w.copyState=function(a,b){if(b===!0)return b;if(a.copyState)return a.copyState(b);var c={};for(var d in b){var e=b[d];e instanceof Array&&(e=e.concat([])),c[d]=e}return c},se=w.startState=function(a,b,c){return a.startState?a.startState(b,c):!0};w.innerMode=function(a,b){for(;a.innerMode;){var c=a.innerMode(b);if(!c||c.mode==a)break;b=c.state,a=c.mode}return c||{mode:a,state:b}};var te=w.commands={selectAll:function(a){a.setSelection(mb(a.firstLine(),0),mb(a.lastLine()),Dg)},singleSelection:function(a){a.setSelection(a.getCursor("anchor"),a.getCursor("head"),Dg)},killLine:function(a){fe(a,function(b){if(b.empty()){var c=Qf(a.doc,b.head.line).text.length;return b.head.ch==c&&b.head.line<a.lastLine()?{from:b.head,to:mb(b.head.line+1,0)}:{from:b.head,to:mb(b.head.line,c)}}return{from:b.from(),to:b.to()}})},deleteLine:function(a){fe(a,function(b){return{from:mb(b.from().line,0),to:wb(a.doc,mb(b.to().line+1,0))}})},delLineLeft:function(a){fe(a,function(a){return{from:mb(a.from().line,0),to:a.from()}})},delWrappedLineLeft:function(a){fe(a,function(b){var c=a.charCoords(b.head,"div").top+5,d=a.coordsChar({left:0,top:c},"div");return{from:d,to:b.from()}})},delWrappedLineRight:function(a){fe(a,function(b){var c=a.charCoords(b.head,"div").top+5,d=a.coordsChar({left:a.display.lineDiv.offsetWidth+100,top:c},"div");return{from:b.from(),to:d}})},undo:function(a){a.undo()},redo:function(a){a.redo()},undoSelection:function(a){a.undoSelection()},redoSelection:function(a){a.redoSelection()},goDocStart:function(a){a.extendSelection(mb(a.firstLine(),0))},goDocEnd:function(a){a.extendSelection(mb(a.lastLine()))},goLineStart:function(a){a.extendSelectionsBy(function(b){return Ch(a,b.head.line)},{origin:"+move",bias:1})},goLineStartSmart:function(a){a.extendSelectionsBy(function(b){return Eh(a,b.head)},{origin:"+move",bias:1})},goLineEnd:function(a){a.extendSelectionsBy(function(b){return Dh(a,b.head.line)},{origin:"+move",bias:-1})},goLineRight:function(a){a.extendSelectionsBy(function(b){var c=a.charCoords(b.head,"div").top+5;return a.coordsChar({left:a.display.lineDiv.offsetWidth+100,top:c},"div")},Fg)},goLineLeft:function(a){a.extendSelectionsBy(function(b){var c=a.charCoords(b.head,"div").top+5;return a.coordsChar({left:0,top:c},"div")},Fg)},goLineLeftSmart:function(a){a.extendSelectionsBy(function(b){var c=a.charCoords(b.head,"div").top+5,d=a.coordsChar({left:0,top:c},"div");return d.ch<a.getLine(d.line).search(/\S/)?Eh(a,b.head):d},Fg)},goLineUp:function(a){a.moveV(-1,"line")},goLineDown:function(a){a.moveV(1,"line")},goPageUp:function(a){a.moveV(-1,"page")},goPageDown:function(a){a.moveV(1,"page")},goCharLeft:function(a){a.moveH(-1,"char")},goCharRight:function(a){a.moveH(1,"char")},goColumnLeft:function(a){a.moveH(-1,"column")},goColumnRight:function(a){a.moveH(1,"column")},goWordLeft:function(a){a.moveH(-1,"word")},goGroupRight:function(a){a.moveH(1,"group")},goGroupLeft:function(a){a.moveH(-1,"group")},goWordRight:function(a){a.moveH(1,"word")},delCharBefore:function(a){a.deleteH(-1,"char")},delCharAfter:function(a){a.deleteH(1,"char")},delWordBefore:function(a){a.deleteH(-1,"word")},delWordAfter:function(a){a.deleteH(1,"word")},delGroupBefore:function(a){a.deleteH(-1,"group")},delGroupAfter:function(a){a.deleteH(1,"group")},indentAuto:function(a){a.indentSelection("smart")},indentMore:function(a){a.indentSelection("add")},indentLess:function(a){a.indentSelection("subtract")},insertTab:function(a){a.replaceSelection("	")},insertSoftTab:function(a){for(var b=[],c=a.listSelections(),d=a.options.tabSize,e=0;e<c.length;e++){var f=c[e].from(),g=Hg(a.getLine(f.line),f.ch,d);b.push(new Array(d-g%d+1).join(" "))}a.replaceSelections(b)},defaultTab:function(a){a.somethingSelected()?a.indentSelection("add"):a.execCommand("insertTab")},transposeChars:function(a){Jc(a,function(){for(var b=a.listSelections(),c=[],d=0;d<b.length;d++){var e=b[d].head,f=Qf(a.doc,e.line).text;if(f)if(e.ch==f.length&&(e=new mb(e.line,e.ch-1)),e.ch>0)e=new mb(e.line,e.ch+1),a.replaceRange(f.charAt(e.ch-1)+f.charAt(e.ch-2),mb(e.line,e.ch-2),e,"+transpose");else if(e.line>a.doc.first){var g=Qf(a.doc,e.line-1).text;g&&a.replaceRange(f.charAt(0)+"\n"+g.charAt(g.length-1),mb(e.line-1,g.length-1),mb(e.line,1),"+transpose")}c.push(new sb(e,e))}a.setSelections(c)})},newlineAndIndent:function(a){Jc(a,function(){for(var b=a.listSelections().length,c=0;b>c;c++){var d=a.listSelections()[c];a.replaceRange("\n",d.anchor,d.head,"+input"),a.indentLine(d.from().line+1,null,!0),be(a)}})},toggleOverwrite:function(a){a.toggleOverwrite()}},ue=w.keyMap={};ue.basic={Left:"goCharLeft",Right:"goCharRight",Up:"goLineUp",Down:"goLineDown",End:"goLineEnd",Home:"goLineStartSmart",PageUp:"goPageUp",PageDown:"goPageDown",Delete:"delCharAfter",Backspace:"delCharBefore","Shift-Backspace":"delCharBefore",Tab:"defaultTab","Shift-Tab":"indentAuto",Enter:"newlineAndIndent",Insert:"toggleOverwrite",Esc:"singleSelection"},ue.pcDefault={"Ctrl-A":"selectAll","Ctrl-D":"deleteLine","Ctrl-Z":"undo","Shift-Ctrl-Z":"redo","Ctrl-Y":"redo","Ctrl-Home":"goDocStart","Ctrl-End":"goDocEnd","Ctrl-Up":"goLineUp","Ctrl-Down":"goLineDown","Ctrl-Left":"goGroupLeft","Ctrl-Right":"goGroupRight","Alt-Left":"goLineStart","Alt-Right":"goLineEnd","Ctrl-Backspace":"delGroupBefore","Ctrl-Delete":"delGroupAfter","Ctrl-S":"save","Ctrl-F":"find","Ctrl-G":"findNext","Shift-Ctrl-G":"findPrev","Shift-Ctrl-F":"replace","Shift-Ctrl-R":"replaceAll","Ctrl-[":"indentLess","Ctrl-]":"indentMore","Ctrl-U":"undoSelection","Shift-Ctrl-U":"redoSelection","Alt-U":"redoSelection",fallthrough:"basic"},ue.emacsy={"Ctrl-F":"goCharRight","Ctrl-B":"goCharLeft","Ctrl-P":"goLineUp","Ctrl-N":"goLineDown","Alt-F":"goWordRight","Alt-B":"goWordLeft","Ctrl-A":"goLineStart","Ctrl-E":"goLineEnd","Ctrl-V":"goPageDown","Shift-Ctrl-V":"goPageUp","Ctrl-D":"delCharAfter","Ctrl-H":"delCharBefore","Alt-D":"delWordAfter","Alt-Backspace":"delWordBefore","Ctrl-K":"killLine","Ctrl-T":"transposeChars"},ue.macDefault={"Cmd-A":"selectAll","Cmd-D":"deleteLine","Cmd-Z":"undo","Shift-Cmd-Z":"redo","Cmd-Y":"redo","Cmd-Home":"goDocStart","Cmd-Up":"goDocStart","Cmd-End":"goDocEnd","Cmd-Down":"goDocEnd","Alt-Left":"goGroupLeft","Alt-Right":"goGroupRight","Cmd-Left":"goLineLeft","Cmd-Right":"goLineRight","Alt-Backspace":"delGroupBefore","Ctrl-Alt-Backspace":"delGroupAfter","Alt-Delete":"delGroupAfter","Cmd-S":"save","Cmd-F":"find","Cmd-G":"findNext","Shift-Cmd-G":"findPrev","Cmd-Alt-F":"replace","Shift-Cmd-Alt-F":"replaceAll","Cmd-[":"indentLess","Cmd-]":"indentMore","Cmd-Backspace":"delWrappedLineLeft","Cmd-Delete":"delWrappedLineRight","Cmd-U":"undoSelection","Shift-Cmd-U":"redoSelection","Ctrl-Up":"goDocStart","Ctrl-Down":"goDocEnd",fallthrough:["basic","emacsy"]},ue["default"]=p?ue.macDefault:ue.pcDefault,w.normalizeKeyMap=function(a){var b={};for(var c in a)if(a.hasOwnProperty(c)){var d=a[c];if(/^(name|fallthrough|(de|at)tach)$/.test(c))continue;if("..."==d){delete a[c];continue}for(var e=Og(c.split(" "),ve),f=0;f<e.length;f++){var g,h;f==e.length-1?(h=c,g=d):(h=e.slice(0,f+1).join(" "),g="...");var i=b[h];if(i){if(i!=g)throw new Error("Inconsistent bindings for "+h)}else b[h]=g}delete a[c]}for(var j in b)a[j]=b[j];return a};var we=w.lookupKey=function(a,b,c){b=ze(b);var d=b.call?b.call(a):b[a];if(d===!1)return"nothing";if("..."===d)return"multi";if(null!=d&&c(d))return"handled";if(b.fallthrough){if("[object Array]"!=Object.prototype.toString.call(b.fallthrough))return we(a,b.fallthrough,c);for(var e=0;e<b.fallthrough.length;e++){var f=we(a,b.fallthrough[e],c);if(f)return f}}},xe=w.isModifierKey=function(a){var b="string"==typeof a?a:wh[a.keyCode];return"Ctrl"==b||"Alt"==b||"Shift"==b||"Mod"==b},ye=w.keyName=function(a,b){if(i&&34==a.keyCode&&a["char"])return!1;var c=wh[a.keyCode],d=c;return null==d||a.altGraphKey?!1:(a.altKey&&"Alt"!=c&&(d="Alt-"+d),(s?a.metaKey:a.ctrlKey)&&"Ctrl"!=c&&(d="Ctrl-"+d),(s?a.ctrlKey:a.metaKey)&&"Cmd"!=c&&(d="Cmd-"+d),!b&&a.shiftKey&&"Shift"!=c&&(d="Shift-"+d),d)};w.fromTextArea=function(a,b){function d(){a.value=i.getValue()}if(b||(b={}),b.value=a.value,!b.tabindex&&a.tabindex&&(b.tabindex=a.tabindex),!b.placeholder&&a.placeholder&&(b.placeholder=a.placeholder),null==b.autofocus){var c=bh();b.autofocus=c==a||null!=a.getAttribute("autofocus")&&c==document.body}if(a.form&&(rg(a.form,"submit",d),!b.leaveSubmitMethodAlone)){var e=a.form,f=e.submit;try{var g=e.submit=function(){d(),e.submit=f,e.submit(),e.submit=g}}catch(h){}}a.style.display="none";var i=w(function(b){a.parentNode.insertBefore(b,a.nextSibling)},b);return i.save=d,i.getTextArea=function(){return a},i.toTextArea=function(){i.toTextArea=isNaN,d(),a.parentNode.removeChild(i.getWrapperElement()),a.style.display="",a.form&&(sg(a.form,"submit",d),"function"==typeof a.form.submit&&(a.form.submit=f))},i};var Ae=w.StringStream=function(a,b){this.pos=this.start=0,this.string=a,this.tabSize=b||8,this.lastColumnPos=this.lastColumnValue=0,this.lineStart=0};Ae.prototype={eol:function(){return this.pos>=this.string.length},sol:function(){return this.pos==this.lineStart},peek:function(){return this.string.charAt(this.pos)||void 0},next:function(){return this.pos<this.string.length?this.string.charAt(this.pos++):void 0},eat:function(a){var b=this.string.charAt(this.pos);if("string"==typeof a)var c=b==a;else var c=b&&(a.test?a.test(b):a(b));return c?(++this.pos,b):void 0},eatWhile:function(a){for(var b=this.pos;this.eat(a););return this.pos>b},eatSpace:function(){for(var a=this.pos;/[\s\u00a0]/.test(this.string.charAt(this.pos));)++this.pos;return this.pos>a},skipToEnd:function(){this.pos=this.string.length},skipTo:function(a){var b=this.string.indexOf(a,this.pos);return b>-1?(this.pos=b,!0):void 0},backUp:function(a){this.pos-=a},column:function(){return this.lastColumnPos<this.start&&(this.lastColumnValue=Hg(this.string,this.start,this.tabSize,this.lastColumnPos,this.lastColumnValue),this.lastColumnPos=this.start),this.lastColumnValue-(this.lineStart?Hg(this.string,this.lineStart,this.tabSize):0)},indentation:function(){return Hg(this.string,null,this.tabSize)-(this.lineStart?Hg(this.string,this.lineStart,this.tabSize):0)},match:function(a,b,c){if("string"!=typeof a){var f=this.string.slice(this.pos).match(a);return f&&f.index>0?null:(f&&b!==!1&&(this.pos+=f[0].length),f)}var d=function(a){return c?a.toLowerCase():a},e=this.string.substr(this.pos,a.length);return d(e)==d(a)?(b!==!1&&(this.pos+=a.length),!0):void 0},current:function(){return this.string.slice(this.start,this.pos)},hideFirstChars:function(a,b){this.lineStart+=a;try{return b()}finally{this.lineStart-=a}}};var Be=w.TextMarker=function(a,b){this.lines=[],this.type=b,this.doc=a};Ag(Be),Be.prototype.clear=function(){if(!this.explicitlyCleared){var a=this.doc.cm,b=a&&!a.curOp;if(b&&Ac(a),zg(this,"clear")){var c=this.find();c&&vg(this,"clear",c.from,c.to)}for(var d=null,e=null,f=0;f<this.lines.length;++f){var g=this.lines[f],h=Ke(g.markedSpans,this);a&&!this.collapsed?Qc(a,Uf(g),"text"):a&&(null!=h.to&&(e=Uf(g)),null!=h.from&&(d=Uf(g))),g.markedSpans=Le(g.markedSpans,h),null==h.from&&this.collapsed&&!ef(this.doc,g)&&a&&Tf(g,wc(a.display))}if(a&&this.collapsed&&!a.options.lineWrapping)for(var f=0;f<this.lines.length;++f){var i=af(this.lines[f]),j=H(i);j>a.display.maxLineLength&&(a.display.maxLine=i,a.display.maxLineLength=j,a.display.maxLineChanged=!0)}null!=d&&a&&this.collapsed&&Pc(a,d,e+1),this.lines.length=0,this.explicitlyCleared=!0,this.atomic&&this.doc.cantEdit&&(this.doc.cantEdit=!1,a&&Kb(a.doc)),a&&vg(a,"markerCleared",a,this),b&&Cc(a),this.parent&&this.parent.clear()}},Be.prototype.find=function(a,b){null==a&&"bookmark"==this.type&&(a=1);for(var c,d,e=0;e<this.lines.length;++e){var f=this.lines[e],g=Ke(f.markedSpans,this);if(null!=g.from&&(c=mb(b?f:Uf(f),g.from),-1==a))return c;if(null!=g.to&&(d=mb(b?f:Uf(f),g.to),1==a))return d}return c&&{from:c,to:d}},Be.prototype.changed=function(){var a=this.find(-1,!0),b=this,c=this.doc.cm;a&&c&&Jc(c,function(){var d=a.line,e=Uf(a.line),f=cc(c,e);if(f&&(ic(f),c.curOp.selectionChanged=c.curOp.forceUpdate=!0),c.curOp.updateMaxLine=!0,!ef(b.doc,d)&&null!=b.height){var g=b.height;b.height=null;var h=jf(b)-g;h&&Tf(d,d.height+h)}})},Be.prototype.attachLine=function(a){if(!this.lines.length&&this.doc.cm){var b=this.doc.cm.curOp;b.maybeHiddenMarkers&&-1!=Ng(b.maybeHiddenMarkers,this)||(b.maybeUnhiddenMarkers||(b.maybeUnhiddenMarkers=[])).push(this)}this.lines.push(a)},Be.prototype.detachLine=function(a){if(this.lines.splice(Ng(this.lines,a),1),!this.lines.length&&this.doc.cm){var b=this.doc.cm.curOp;(b.maybeHiddenMarkers||(b.maybeHiddenMarkers=[])).push(this)}};var Ce=0,Ee=w.SharedTextMarker=function(a,b){this.markers=a,this.primary=b;for(var c=0;c<a.length;++c)a[c].parent=this};Ag(Ee),Ee.prototype.clear=function(){if(!this.explicitlyCleared){this.explicitlyCleared=!0;for(var a=0;a<this.markers.length;++a)this.markers[a].clear();vg(this,"clear")}},Ee.prototype.find=function(a,b){return this.primary.find(a,b)};var gf=w.LineWidget=function(a,b,c){if(c)for(var d in c)c.hasOwnProperty(d)&&(this[d]=c[d]);this.cm=a,this.node=b};Ag(gf),gf.prototype.clear=function(){var a=this.cm,b=this.line.widgets,c=this.line,d=Uf(c);if(null!=d&&b){for(var e=0;e<b.length;++e)b[e]==this&&b.splice(e--,1);b.length||(c.widgets=null);var f=jf(this);Jc(a,function(){hf(a,c,-f),Qc(a,d,"widget"),Tf(c,Math.max(0,c.height-f))})}},gf.prototype.changed=function(){var a=this.height,b=this.cm,c=this.line;this.height=null;var d=jf(this)-a;d&&Jc(b,function(){b.curOp.forceUpdate=!0,hf(b,c,d),Tf(c,c.height+d)})};var lf=w.Line=function(a,b,c){this.text=a,Ue(this,b),this.height=c?c(this):1};Ag(lf),lf.prototype.lineNo=function(){return Uf(this)};var wf={},xf={};If.prototype={chunkSize:function(){return this.lines.length},removeInner:function(a,b){for(var c=a,d=a+b;d>c;++c){var e=this.lines[c];this.height-=e.height,nf(e),vg(e,"delete")}this.lines.splice(a,b)},collapse:function(a){a.push.apply(a,this.lines)},insertInner:function(a,b,c){this.height+=c,this.lines=this.lines.slice(0,a).concat(b).concat(this.lines.slice(a));for(var d=0;d<b.length;++d)b[d].parent=this},iterN:function(a,b,c){for(var d=a+b;d>a;++a)if(c(this.lines[a]))return!0}},Jf.prototype={chunkSize:function(){return this.size},removeInner:function(a,b){this.size-=b;for(var c=0;c<this.children.length;++c){var d=this.children[c],e=d.chunkSize();if(e>a){var f=Math.min(b,e-a),g=d.height;if(d.removeInner(a,f),this.height-=g-d.height,e==f&&(this.children.splice(c--,1),d.parent=null),0==(b-=f))break;a=0}else a-=e}if(this.size-b<25&&(this.children.length>1||!(this.children[0]instanceof If))){var h=[];this.collapse(h),this.children=[new If(h)],this.children[0].parent=this}},collapse:function(a){for(var b=0;b<this.children.length;++b)this.children[b].collapse(a)},insertInner:function(a,b,c){this.size+=b.length,this.height+=c;for(var d=0;d<this.children.length;++d){var e=this.children[d],f=e.chunkSize();if(f>=a){if(e.insertInner(a,b,c),e.lines&&e.lines.length>50){for(;e.lines.length>50;){var g=e.lines.splice(e.lines.length-25,25),h=new If(g);e.height-=h.height,this.children.splice(d+1,0,h),h.parent=this}this.maybeSpill()}break}a-=f}},maybeSpill:function(){if(!(this.children.length<=10)){var a=this;do{var b=a.children.splice(a.children.length-5,5),c=new Jf(b);if(a.parent){a.size-=c.size,a.height-=c.height;var e=Ng(a.parent.children,a);a.parent.children.splice(e+1,0,c)}else{var d=new Jf(a.children);d.parent=a,a.children=[d,c],a=d}c.parent=a.parent}while(a.children.length>10);a.parent.maybeSpill()}},iterN:function(a,b,c){for(var d=0;d<this.children.length;++d){var e=this.children[d],f=e.chunkSize();if(f>a){var g=Math.min(b,f-a);if(e.iterN(a,g,c))return!0;if(0==(b-=g))break;a=0}else a-=f}}};var Kf=0,Lf=w.Doc=function(a,b,c){if(!(this instanceof Lf))return new Lf(a,b,c);null==c&&(c=0),Jf.call(this,[new If([new lf("",null)])]),this.first=c,this.scrollTop=this.scrollLeft=0,this.cantEdit=!1,this.cleanGeneration=1,this.frontier=c;var d=mb(c,0);this.sel=ub(d),this.history=new Yf(null),this.id=++Kf,this.modeOption=b,"string"==typeof a&&(a=rh(a)),Hf(this,{from:d,to:d,text:a}),Hb(this,ub(d),Dg)};Lf.prototype=Pg(Jf.prototype,{constructor:Lf,iter:function(a,b,c){c?this.iterN(a-this.first,b-a,c):this.iterN(this.first,this.first+this.size,a)},insert:function(a,b){for(var c=0,d=0;d<b.length;++d)c+=b[d].height;this.insertInner(a-this.first,b,c)},remove:function(a,b){this.removeInner(a-this.first,b)},getValue:function(a){var b=Sf(this,this.first,this.first+this.size);return a===!1?b:b.join(a||"\n")},setValue:Mc(function(a){var b=mb(this.first,0),c=this.first+this.size-1;Rd(this,{from:b,to:mb(c,Qf(this,c).text.length),text:rh(a),origin:"setValue"},!0),Hb(this,ub(b))}),replaceRange:function(a,b,c,d){b=wb(this,b),c=c?wb(this,c):b,Xd(this,a,b,c,d)},getRange:function(a,b,c){var d=Rf(this,wb(this,a),wb(this,b));return c===!1?d:d.join(c||"\n")},getLine:function(a){var b=this.getLineHandle(a);return b&&b.text},getLineHandle:function(a){return yb(this,a)?Qf(this,a):void 0},getLineNumber:function(a){return Uf(a)},getLineHandleVisualStart:function(a){return"number"==typeof a&&(a=Qf(this,a)),af(a)},lineCount:function(){return this.size},firstLine:function(){return this.first},lastLine:function(){return this.first+this.size-1},clipPos:function(a){return wb(this,a)},getCursor:function(a){var c,b=this.sel.primary();return c=null==a||"head"==a?b.head:"anchor"==a?b.anchor:"end"==a||"to"==a||a===!1?b.to():b.from()},listSelections:function(){return this.sel.ranges},somethingSelected:function(){return this.sel.somethingSelected()},setCursor:Mc(function(a,b,c){Eb(this,wb(this,"number"==typeof a?mb(a,b||0):a),null,c)}),setSelection:Mc(function(a,b,c){Eb(this,wb(this,a),wb(this,b||a),c)}),extendSelection:Mc(function(a,b,c){Bb(this,wb(this,a),b&&wb(this,b),c)}),extendSelections:Mc(function(a,b){Cb(this,zb(this,a,b))}),extendSelectionsBy:Mc(function(a,b){Cb(this,Og(this.sel.ranges,a),b)}),setSelections:Mc(function(a,b,c){if(a.length){for(var d=0,e=[];d<a.length;d++)e[d]=new sb(wb(this,a[d].anchor),wb(this,a[d].head));null==b&&(b=Math.min(a.length-1,this.sel.primIndex)),Hb(this,tb(e,b),c)}}),addSelection:Mc(function(a,b,c){var d=this.sel.ranges.slice(0);d.push(new sb(wb(this,a),wb(this,b||a))),Hb(this,tb(d,d.length-1),c)}),getSelection:function(a){for(var c,b=this.sel.ranges,d=0;d<b.length;d++){var e=Rf(this,b[d].from(),b[d].to());c=c?c.concat(e):e}return a===!1?c:c.join(a||"\n")},getSelections:function(a){for(var b=[],c=this.sel.ranges,d=0;d<c.length;d++){var e=Rf(this,c[d].from(),c[d].to());a!==!1&&(e=e.join(a||"\n")),b[d]=e}return b},replaceSelection:function(a,b,c){for(var d=[],e=0;e<this.sel.ranges.length;e++)d[e]=a;this.replaceSelections(d,b,c||"+input")},replaceSelections:Mc(function(a,b,c){for(var d=[],e=this.sel,f=0;f<e.ranges.length;f++){var g=e.ranges[f];d[f]={from:g.from(),to:g.to(),text:rh(a[f]),origin:c}}for(var h=b&&"end"!=b&&Pd(this,d,b),f=d.length-1;f>=0;f--)Rd(this,d[f]);h?Gb(this,h):this.cm&&be(this.cm)}),undo:Mc(function(){Td(this,"undo")}),redo:Mc(function(){Td(this,"redo")}),undoSelection:Mc(function(){Td(this,"undo",!0)}),redoSelection:Mc(function(){Td(this,"redo",!0)}),setExtending:function(a){this.extend=a},getExtending:function(){return this.extend},historySize:function(){for(var a=this.history,b=0,c=0,d=0;d<a.done.length;d++)a.done[d].ranges||++b;for(var d=0;d<a.undone.length;d++)a.undone[d].ranges||++c;return{undo:b,redo:c}},clearHistory:function(){this.history=new Yf(this.history.maxGeneration)},markClean:function(){this.cleanGeneration=this.changeGeneration(!0)},changeGeneration:function(a){return a&&(this.history.lastOp=this.history.lastSelOp=this.history.lastOrigin=null),this.history.generation},isClean:function(a){return this.history.generation==(a||this.cleanGeneration)},getHistory:function(){return{done:hg(this.history.done),undone:hg(this.history.undone)}},setHistory:function(a){var b=this.history=new Yf(this.history.maxGeneration);b.done=hg(a.done.slice(0),null,!0),b.undone=hg(a.undone.slice(0),null,!0)},addLineClass:Mc(function(a,b,c){return ee(this,a,"gutter"==b?"gutter":"class",function(a){var d="text"==b?"textClass":"background"==b?"bgClass":"gutter"==b?"gutterClass":"wrapClass";if(a[d]){if(ch(c).test(a[d]))return!1;a[d]+=" "+c}else a[d]=c;return!0})}),removeLineClass:Mc(function(a,b,c){return ee(this,a,"class",function(a){var d="text"==b?"textClass":"background"==b?"bgClass":"gutter"==b?"gutterClass":"wrapClass",e=a[d];if(!e)return!1;if(null==c)a[d]=null;else{var f=e.match(ch(c));if(!f)return!1;var g=f.index+f[0].length;a[d]=e.slice(0,f.index)+(f.index&&g!=e.length?" ":"")+e.slice(g)||null}return!0})}),markText:function(a,b,c){return De(this,wb(this,a),wb(this,b),c,"range")},setBookmark:function(a,b){var c={replacedWith:b&&(null==b.nodeType?b.widget:b),insertLeft:b&&b.insertLeft,clearWhenEmpty:!1,shared:b&&b.shared};return a=wb(this,a),De(this,a,a,c,"bookmark")},findMarksAt:function(a){a=wb(this,a);var b=[],c=Qf(this,a.line).markedSpans;if(c)for(var d=0;d<c.length;++d){var e=c[d];(null==e.from||e.from<=a.ch)&&(null==e.to||e.to>=a.ch)&&b.push(e.marker.parent||e.marker)}return b},findMarks:function(a,b,c){a=wb(this,a),b=wb(this,b);var d=[],e=a.line;return this.iter(a.line,b.line+1,function(f){var g=f.markedSpans;if(g)for(var h=0;h<g.length;h++){var i=g[h];e==a.line&&a.ch>i.to||null==i.from&&e!=a.line||e==b.line&&i.from>b.ch||c&&!c(i.marker)||d.push(i.marker.parent||i.marker)}++e}),d},getAllMarks:function(){var a=[];return this.iter(function(b){var c=b.markedSpans;if(c)for(var d=0;d<c.length;++d)null!=c[d].from&&a.push(c[d].marker)}),a},posFromIndex:function(a){var b,c=this.first;return this.iter(function(d){var e=d.text.length+1;return e>a?(b=a,!0):(a-=e,++c,void 0)}),wb(this,mb(c,b))},indexFromPos:function(a){a=wb(this,a);var b=a.ch;return a.line<this.first||a.ch<0?0:(this.iter(this.first,a.line,function(a){b+=a.text.length+1}),b)},copy:function(a){var b=new Lf(Sf(this,this.first,this.first+this.size),this.modeOption,this.first);return b.scrollTop=this.scrollTop,b.scrollLeft=this.scrollLeft,b.sel=this.sel,b.extend=!1,a&&(b.history.undoDepth=this.history.undoDepth,b.setHistory(this.getHistory())),b},linkedDoc:function(a){a||(a={});var b=this.first,c=this.first+this.size;null!=a.from&&a.from>b&&(b=a.from),null!=a.to&&a.to<c&&(c=a.to);var d=new Lf(Sf(this,b,c),a.mode||this.modeOption,b);return a.sharedHist&&(d.history=this.history),(this.linked||(this.linked=[])).push({doc:d,sharedHist:a.sharedHist}),d.linked=[{doc:this,isParent:!0,sharedHist:a.sharedHist}],He(d,Ge(this)),d},unlinkDoc:function(a){if(a instanceof w&&(a=a.doc),this.linked)for(var b=0;b<this.linked.length;++b){var c=this.linked[b];if(c.doc==a){this.linked.splice(b,1),a.unlinkDoc(this),Ie(Ge(this));break}}if(a.history==this.history){var d=[a.id];Of(a,function(a){d.push(a.id)},!0),a.history=new Yf(null),a.history.done=hg(this.history.done,d),a.history.undone=hg(this.history.undone,d)}},iterLinkedDocs:function(a){Of(this,a)},getMode:function(){return this.mode},getEditor:function(){return this.cm}}),Lf.prototype.eachLine=Lf.prototype.iter;var Mf="iter insert remove copy getEditor".split(" ");for(var Nf in Lf.prototype)Lf.prototype.hasOwnProperty(Nf)&&Ng(Mf,Nf)<0&&(w.prototype[Nf]=function(a){return function(){return a.apply(this.doc,arguments)}}(Lf.prototype[Nf]));Ag(Lf);var lg=w.e_preventDefault=function(a){a.preventDefault?a.preventDefault():a.returnValue=!1},mg=w.e_stopPropagation=function(a){a.stopPropagation?a.stopPropagation():a.cancelBubble=!0},og=w.e_stop=function(a){lg(a),mg(a)},rg=w.on=function(a,b,c){if(a.addEventListener)a.addEventListener(b,c,!1);else if(a.attachEvent)a.attachEvent("on"+b,c);else{var d=a._handlers||(a._handlers={}),e=d[b]||(d[b]=[]);e.push(c)}},sg=w.off=function(a,b,c){if(a.removeEventListener)a.removeEventListener(b,c,!1);else if(a.detachEvent)a.detachEvent("on"+b,c);else{var d=a._handlers&&a._handlers[b];if(!d)return;for(var e=0;e<d.length;++e)if(d[e]==c){d.splice(e,1);
+break}}},tg=w.signal=function(a,b){var c=a._handlers&&a._handlers[b];if(c)for(var d=Array.prototype.slice.call(arguments,2),e=0;e<c.length;++e)c[e].apply(null,d)},ug=null,Bg=30,Cg=w.Pass={toString:function(){return"CodeMirror.Pass"}},Dg={scroll:!1},Eg={origin:"*mouse"},Fg={origin:"+move"};Gg.prototype.set=function(a,b){clearTimeout(this.id),this.id=setTimeout(b,a)};var Hg=w.countColumn=function(a,b,c,d,e){null==b&&(b=a.search(/[^\s\u00a0]/),-1==b&&(b=a.length));for(var f=d||0,g=e||0;;){var h=a.indexOf("	",f);if(0>h||h>=b)return g+(b-f);g+=h-f,g+=c-g%c,f=h+1}},Jg=[""],Mg=function(a){a.select()};n?Mg=function(a){a.selectionStart=0,a.selectionEnd=a.value.length}:d&&(Mg=function(a){try{a.select()}catch(b){}}),[].indexOf&&(Ng=function(a,b){return a.indexOf(b)}),[].map&&(Og=function(a,b){return a.map(b)});var Zg,Sg=/[\u00df\u0590-\u05f4\u0600-\u06ff\u3040-\u309f\u30a0-\u30ff\u3400-\u4db5\u4e00-\u9fcc\uac00-\ud7af]/,Tg=w.isWordChar=function(a){return/\w/.test(a)||a>"\x80"&&(a.toUpperCase()!=a.toLowerCase()||Sg.test(a))},Wg=/[\u0300-\u036f\u0483-\u0489\u0591-\u05bd\u05bf\u05c1\u05c2\u05c4\u05c5\u05c7\u0610-\u061a\u064b-\u065e\u0670\u06d6-\u06dc\u06de-\u06e4\u06e7\u06e8\u06ea-\u06ed\u0711\u0730-\u074a\u07a6-\u07b0\u07eb-\u07f3\u0816-\u0819\u081b-\u0823\u0825-\u0827\u0829-\u082d\u0900-\u0902\u093c\u0941-\u0948\u094d\u0951-\u0955\u0962\u0963\u0981\u09bc\u09be\u09c1-\u09c4\u09cd\u09d7\u09e2\u09e3\u0a01\u0a02\u0a3c\u0a41\u0a42\u0a47\u0a48\u0a4b-\u0a4d\u0a51\u0a70\u0a71\u0a75\u0a81\u0a82\u0abc\u0ac1-\u0ac5\u0ac7\u0ac8\u0acd\u0ae2\u0ae3\u0b01\u0b3c\u0b3e\u0b3f\u0b41-\u0b44\u0b4d\u0b56\u0b57\u0b62\u0b63\u0b82\u0bbe\u0bc0\u0bcd\u0bd7\u0c3e-\u0c40\u0c46-\u0c48\u0c4a-\u0c4d\u0c55\u0c56\u0c62\u0c63\u0cbc\u0cbf\u0cc2\u0cc6\u0ccc\u0ccd\u0cd5\u0cd6\u0ce2\u0ce3\u0d3e\u0d41-\u0d44\u0d4d\u0d57\u0d62\u0d63\u0dca\u0dcf\u0dd2-\u0dd4\u0dd6\u0ddf\u0e31\u0e34-\u0e3a\u0e47-\u0e4e\u0eb1\u0eb4-\u0eb9\u0ebb\u0ebc\u0ec8-\u0ecd\u0f18\u0f19\u0f35\u0f37\u0f39\u0f71-\u0f7e\u0f80-\u0f84\u0f86\u0f87\u0f90-\u0f97\u0f99-\u0fbc\u0fc6\u102d-\u1030\u1032-\u1037\u1039\u103a\u103d\u103e\u1058\u1059\u105e-\u1060\u1071-\u1074\u1082\u1085\u1086\u108d\u109d\u135f\u1712-\u1714\u1732-\u1734\u1752\u1753\u1772\u1773\u17b7-\u17bd\u17c6\u17c9-\u17d3\u17dd\u180b-\u180d\u18a9\u1920-\u1922\u1927\u1928\u1932\u1939-\u193b\u1a17\u1a18\u1a56\u1a58-\u1a5e\u1a60\u1a62\u1a65-\u1a6c\u1a73-\u1a7c\u1a7f\u1b00-\u1b03\u1b34\u1b36-\u1b3a\u1b3c\u1b42\u1b6b-\u1b73\u1b80\u1b81\u1ba2-\u1ba5\u1ba8\u1ba9\u1c2c-\u1c33\u1c36\u1c37\u1cd0-\u1cd2\u1cd4-\u1ce0\u1ce2-\u1ce8\u1ced\u1dc0-\u1de6\u1dfd-\u1dff\u200c\u200d\u20d0-\u20f0\u2cef-\u2cf1\u2de0-\u2dff\u302a-\u302f\u3099\u309a\ua66f-\ua672\ua67c\ua67d\ua6f0\ua6f1\ua802\ua806\ua80b\ua825\ua826\ua8c4\ua8e0-\ua8f1\ua926-\ua92d\ua947-\ua951\ua980-\ua982\ua9b3\ua9b6-\ua9b9\ua9bc\uaa29-\uaa2e\uaa31\uaa32\uaa35\uaa36\uaa43\uaa4c\uaab0\uaab2-\uaab4\uaab7\uaab8\uaabe\uaabf\uaac1\uabe5\uabe8\uabed\udc00-\udfff\ufb1e\ufe00-\ufe0f\ufe20-\ufe26\uff9e\uff9f]/;Zg=document.createRange?function(a,b,c){var d=document.createRange();return d.setEnd(a,c),d.setStart(a,b),d}:function(a,b,c){var d=document.body.createTextRange();try{d.moveToElementText(a.parentNode)}catch(e){return d}return d.collapse(!0),d.moveEnd("character",c),d.moveStart("character",b),d},d&&11>e&&(bh=function(){try{return document.activeElement}catch(a){return document.body}});var lh,nh,ph,dh=w.rmClass=function(a,b){var c=a.className,d=ch(b).exec(c);if(d){var e=c.slice(d.index+d[0].length);a.className=c.slice(0,d.index)+(e?d[1]+e:"")}},eh=w.addClass=function(a,b){var c=a.className;ch(b).test(c)||(a.className+=(c?" ":"")+b)},hh=!1,kh=function(){if(d&&9>e)return!1;var a=Yg("div");return"draggable"in a||"dragDrop"in a}(),rh=w.splitLines=3!="\n\nb".split(/\n/).length?function(a){for(var b=0,c=[],d=a.length;d>=b;){var e=a.indexOf("\n",b);-1==e&&(e=a.length);var f=a.slice(b,"\r"==a.charAt(e-1)?e-1:e),g=f.indexOf("\r");-1!=g?(c.push(f.slice(0,g)),b+=g+1):(c.push(f),b=e+1)}return c}:function(a){return a.split(/\r\n?|\n/)},sh=window.getSelection?function(a){try{return a.selectionStart!=a.selectionEnd}catch(b){return!1}}:function(a){try{var b=a.ownerDocument.selection.createRange()}catch(c){}return b&&b.parentElement()==a?0!=b.compareEndPoints("StartToEnd",b):!1},th=function(){var a=Yg("div");return"oncopy"in a?!0:(a.setAttribute("oncopy","return;"),"function"==typeof a.oncopy)}(),uh=null,wh={3:"Enter",8:"Backspace",9:"Tab",13:"Enter",16:"Shift",17:"Ctrl",18:"Alt",19:"Pause",20:"CapsLock",27:"Esc",32:"Space",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"Left",38:"Up",39:"Right",40:"Down",44:"PrintScrn",45:"Insert",46:"Delete",59:";",61:"=",91:"Mod",92:"Mod",93:"Mod",107:"=",109:"-",127:"Delete",173:"-",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'",63232:"Up",63233:"Down",63234:"Left",63235:"Right",63272:"Delete",63273:"Home",63275:"End",63276:"PageUp",63277:"PageDown",63302:"Insert"};w.keyNames=wh,function(){for(var a=0;10>a;a++)wh[a+48]=wh[a+96]=String(a);for(var a=65;90>=a;a++)wh[a]=String.fromCharCode(a);for(var a=1;12>=a;a++)wh[a+111]=wh[a+63235]="F"+a}();var Gh,Lh=function(){function c(c){return 247>=c?a.charAt(c):c>=1424&&1524>=c?"R":c>=1536&&1773>=c?b.charAt(c-1536):c>=1774&&2220>=c?"r":c>=8192&&8203>=c?"w":8204==c?"b":"L"}function j(a,b,c){this.level=a,this.from=b,this.to=c}var a="bbbbbbbbbtstwsbbbbbbbbbbbbbbssstwNN%%%NNNNNN,N,N1111111111NNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNbbbbbbsbbbbbbbbbbbbbbbbbbbbbbbbbb,N%%%%NNNNLNNNNN%%11NLNNN1LNNNNNLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLN",b="rrrrrrrrrrrr,rNNmmmmmmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmrrrrrrrnnnnnnnnnn%nnrrrmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmmmmmmNmmmm",d=/[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/,e=/[stwN]/,f=/[LRr]/,g=/[Lb1n]/,h=/[1n]/,i="L";return function(a){if(!d.test(a))return!1;for(var m,b=a.length,k=[],l=0;b>l;++l)k.push(m=c(a.charCodeAt(l)));for(var l=0,n=i;b>l;++l){var m=k[l];"m"==m?k[l]=n:n=m}for(var l=0,o=i;b>l;++l){var m=k[l];"1"==m&&"r"==o?k[l]="n":f.test(m)&&(o=m,"r"==m&&(k[l]="R"))}for(var l=1,n=k[0];b-1>l;++l){var m=k[l];"+"==m&&"1"==n&&"1"==k[l+1]?k[l]="1":","!=m||n!=k[l+1]||"1"!=n&&"n"!=n||(k[l]=n),n=m}for(var l=0;b>l;++l){var m=k[l];if(","==m)k[l]="N";else if("%"==m){for(var p=l+1;b>p&&"%"==k[p];++p);for(var q=l&&"!"==k[l-1]||b>p&&"1"==k[p]?"1":"N",r=l;p>r;++r)k[r]=q;l=p-1}}for(var l=0,o=i;b>l;++l){var m=k[l];"L"==o&&"1"==m?k[l]="L":f.test(m)&&(o=m)}for(var l=0;b>l;++l)if(e.test(k[l])){for(var p=l+1;b>p&&e.test(k[p]);++p);for(var s="L"==(l?k[l-1]:i),t="L"==(b>p?k[p]:i),q=s||t?"L":"R",r=l;p>r;++r)k[r]=q;l=p-1}for(var v,u=[],l=0;b>l;)if(g.test(k[l])){var w=l;for(++l;b>l&&g.test(k[l]);++l);u.push(new j(0,w,l))}else{var x=l,y=u.length;for(++l;b>l&&"L"!=k[l];++l);for(var r=x;l>r;)if(h.test(k[r])){r>x&&u.splice(y,0,new j(1,x,r));var z=r;for(++r;l>r&&h.test(k[r]);++r);u.splice(y,0,new j(2,z,r)),x=r}else++r;l>x&&u.splice(y,0,new j(1,x,l))}return 1==u[0].level&&(v=a.match(/^\s+/))&&(u[0].from=v[0].length,u.unshift(new j(0,0,v[0].length))),1==Lg(u).level&&(v=a.match(/\s+$/))&&(Lg(u).to-=v[0].length,u.push(new j(0,b-v[0].length,b))),u[0].level!=Lg(u).level&&u.push(new j(u[0].level,b,b)),u}}();return w.version="4.8.0",w}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";a.defineMode("javascript",function(b,c){function m(a){for(var c,b=!1,d=!1;null!=(c=a.next());){if(!b){if("/"==c&&!d)return;"["==c?d=!0:d&&"]"==c&&(d=!1)}b=!b&&"\\"==c}}function p(a,b,c){return n=a,o=c,b}function q(a,b){var c=a.next();if('"'==c||"'"==c)return b.tokenize=r(c),b.tokenize(a,b);if("."==c&&a.match(/^\d+(?:[eE][+\-]?\d+)?/))return p("number","number");if("."==c&&a.match(".."))return p("spread","meta");if(/[\[\]{}\(\),;\:\.]/.test(c))return p(c);if("="==c&&a.eat(">"))return p("=>","operator");if("0"==c&&a.eat(/x/i))return a.eatWhile(/[\da-f]/i),p("number","number");if(/\d/.test(c))return a.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/),p("number","number");if("/"==c)return a.eat("*")?(b.tokenize=s,s(a,b)):a.eat("/")?(a.skipToEnd(),p("comment","comment")):"operator"==b.lastType||"keyword c"==b.lastType||"sof"==b.lastType||/^[\[{}\(,;:]$/.test(b.lastType)?(m(a),a.eatWhile(/[gimy]/),p("regexp","string-2")):(a.eatWhile(k),p("operator","operator",a.current()));if("`"==c)return b.tokenize=t,t(a,b);if("#"==c)return a.skipToEnd(),p("error","error");if(k.test(c))return a.eatWhile(k),p("operator","operator",a.current());if(i.test(c)){a.eatWhile(i);var d=a.current(),e=j.propertyIsEnumerable(d)&&j[d];return e&&"."!=b.lastType?p(e.type,e.style,d):p("variable","variable",d)}}function r(a){return function(b,c){var e,d=!1;if(f&&"@"==b.peek()&&b.match(l))return c.tokenize=q,p("jsonld-keyword","meta");for(;null!=(e=b.next())&&(e!=a||d);)d=!d&&"\\"==e;return d||(c.tokenize=q),p("string","string")}}function s(a,b){for(var d,c=!1;d=a.next();){if("/"==d&&c){b.tokenize=q;break}c="*"==d}return p("comment","comment")}function t(a,b){for(var d,c=!1;null!=(d=a.next());){if(!c&&("`"==d||"$"==d&&a.eat("{"))){b.tokenize=q;break}c=!c&&"\\"==d}return p("quasi","string-2",a.current())}function v(a,b){b.fatArrowAt&&(b.fatArrowAt=null);var c=a.string.indexOf("=>",a.start);if(!(0>c)){for(var d=0,e=!1,f=c-1;f>=0;--f){var g=a.string.charAt(f),h=u.indexOf(g);if(h>=0&&3>h){if(!d){++f;break}if(0==--d)break}else if(h>=3&&6>h)++d;else if(i.test(g))e=!0;else if(e&&!d){++f;break}}e&&!d&&(b.fatArrowAt=f)}}function x(a,b,c,d,e,f){this.indented=a,this.column=b,this.type=c,this.prev=e,this.info=f,null!=d&&(this.align=d)}function y(a,b){for(var c=a.localVars;c;c=c.next)if(c.name==b)return!0;for(var d=a.context;d;d=d.prev)for(var c=d.vars;c;c=c.next)if(c.name==b)return!0}function z(a,b,c,d,e){var f=a.cc;for(A.state=a,A.stream=e,A.marked=null,A.cc=f,A.style=b,a.lexical.hasOwnProperty("align")||(a.lexical.align=!0);;){var h=f.length?f.pop():g?L:K;if(h(c,d)){for(;f.length&&f[f.length-1].lex;)f.pop()();return A.marked?A.marked:"variable"==c&&y(a,d)?"variable-2":b}}}function B(){for(var a=arguments.length-1;a>=0;a--)A.cc.push(arguments[a])}function C(){return B.apply(null,arguments),!0}function D(a){function b(b){for(var c=b;c;c=c.next)if(c.name==a)return!0;return!1}var d=A.state;if(d.context){if(A.marked="def",b(d.localVars))return;d.localVars={name:a,next:d.localVars}}else{if(b(d.globalVars))return;c.globalVars&&(d.globalVars={name:a,next:d.globalVars})}}function F(){A.state.context={prev:A.state.context,vars:A.state.localVars},A.state.localVars=E}function G(){A.state.localVars=A.state.context.vars,A.state.context=A.state.context.prev}function H(a,b){var c=function(){var c=A.state,d=c.indented;if("stat"==c.lexical.type)d=c.lexical.indented;else for(var e=c.lexical;e&&")"==e.type&&e.align;e=e.prev)d=e.indented;c.lexical=new x(d,A.stream.column(),a,null,c.lexical,b)};return c.lex=!0,c}function I(){var a=A.state;a.lexical.prev&&(")"==a.lexical.type&&(a.indented=a.lexical.indented),a.lexical=a.lexical.prev)}function J(a){function b(c){return c==a?C():";"==a?B():C(b)}return b}function K(a,b){return"var"==a?C(H("vardef",b.length),eb,J(";"),I):"keyword a"==a?C(H("form"),L,K,I):"keyword b"==a?C(H("form"),K,I):"{"==a?C(H("}"),bb,I):";"==a?C():"if"==a?("else"==A.state.lexical.info&&A.state.cc[A.state.cc.length-1]==I&&A.state.cc.pop()(),C(H("form"),L,K,I,jb)):"function"==a?C(pb):"for"==a?C(H("form"),kb,K,I):"variable"==a?C(H("stat"),W):"switch"==a?C(H("form"),L,H("}","switch"),J("{"),bb,I,I):"case"==a?C(L,J(":")):"default"==a?C(J(":")):"catch"==a?C(H("form"),F,J("("),qb,J(")"),K,I,G):"module"==a?C(H("form"),F,vb,G,I):"class"==a?C(H("form"),rb,I):"export"==a?C(H("form"),wb,I):"import"==a?C(H("form"),xb,I):B(H("stat"),L,J(";"),I)}function L(a){return N(a,!1)}function M(a){return N(a,!0)}function N(a,b){if(A.state.fatArrowAt==A.stream.start){var c=b?V:U;if("("==a)return C(F,H(")"),_(fb,")"),I,J("=>"),c,G);if("variable"==a)return B(F,fb,J("=>"),c,G)}var d=b?R:Q;return w.hasOwnProperty(a)?C(d):"function"==a?C(pb,d):"keyword c"==a?C(b?P:O):"("==a?C(H(")"),O,Cb,J(")"),I,d):"operator"==a||"spread"==a?C(b?M:L):"["==a?C(H("]"),Ab,I,d):"{"==a?ab(Y,"}",null,d):"quasi"==a?B(S,d):C()}function O(a){return a.match(/[;\}\)\],]/)?B():B(L)}function P(a){return a.match(/[;\}\)\],]/)?B():B(M)}function Q(a,b){return","==a?C(L):R(a,b,!1)}function R(a,b,c){var d=0==c?Q:R,e=0==c?L:M;return"=>"==a?C(F,c?V:U,G):"operator"==a?/\+\+|--/.test(b)?C(d):"?"==b?C(L,J(":"),e):C(e):"quasi"==a?B(S,d):";"!=a?"("==a?ab(M,")","call",d):"."==a?C(X,d):"["==a?C(H("]"),O,J("]"),I,d):void 0:void 0}function S(a,b){return"quasi"!=a?B():"${"!=b.slice(b.length-2)?C(S):C(L,T)}function T(a){return"}"==a?(A.marked="string-2",A.state.tokenize=t,C(S)):void 0}function U(a){return v(A.stream,A.state),B("{"==a?K:L)}function V(a){return v(A.stream,A.state),B("{"==a?K:M)}function W(a){return":"==a?C(I,K):B(Q,J(";"),I)}function X(a){return"variable"==a?(A.marked="property",C()):void 0}function Y(a,b){return"variable"==a||"keyword"==A.style?(A.marked="property","get"==b||"set"==b?C(Z):C($)):"number"==a||"string"==a?(A.marked=f?"property":A.style+" property",C($)):"jsonld-keyword"==a?C($):"["==a?C(L,J("]"),$):void 0}function Z(a){return"variable"!=a?B($):(A.marked="property",C(pb))}function $(a){return":"==a?C(M):"("==a?B(pb):void 0}function _(a,b){function c(d){if(","==d){var e=A.state.lexical;return"call"==e.info&&(e.pos=(e.pos||0)+1),C(a,c)}return d==b?C():C(J(b))}return function(d){return d==b?C():B(a,c)}}function ab(a,b,c){for(var d=3;d<arguments.length;d++)A.cc.push(arguments[d]);return C(H(b,c),_(a,b),I)}function bb(a){return"}"==a?C():B(K,bb)}function cb(a){return h&&":"==a?C(db):void 0}function db(a){return"variable"==a?(A.marked="variable-3",C()):void 0}function eb(){return B(fb,cb,hb,ib)}function fb(a,b){return"variable"==a?(D(b),C()):"["==a?ab(fb,"]"):"{"==a?ab(gb,"}"):void 0}function gb(a,b){return"variable"!=a||A.stream.match(/^\s*:/,!1)?("variable"==a&&(A.marked="property"),C(J(":"),fb,hb)):(D(b),C(hb))}function hb(a,b){return"="==b?C(M):void 0}function ib(a){return","==a?C(eb):void 0}function jb(a,b){return"keyword b"==a&&"else"==b?C(H("form","else"),K,I):void 0}function kb(a){return"("==a?C(H(")"),lb,J(")"),I):void 0}function lb(a){return"var"==a?C(eb,J(";"),nb):";"==a?C(nb):"variable"==a?C(mb):B(L,J(";"),nb)}function mb(a,b){return"in"==b||"of"==b?(A.marked="keyword",C(L)):C(Q,nb)}function nb(a,b){return";"==a?C(ob):"in"==b||"of"==b?(A.marked="keyword",C(L)):B(L,J(";"),ob)}function ob(a){")"!=a&&C(L)}function pb(a,b){return"*"==b?(A.marked="keyword",C(pb)):"variable"==a?(D(b),C(pb)):"("==a?C(F,H(")"),_(qb,")"),I,K,G):void 0}function qb(a){return"spread"==a?C(qb):B(fb,cb)}function rb(a,b){return"variable"==a?(D(b),C(sb)):void 0}function sb(a,b){return"extends"==b?C(L,sb):"{"==a?C(H("}"),tb,I):void 0}function tb(a,b){return"variable"==a||"keyword"==A.style?(A.marked="property","get"==b||"set"==b?C(ub,pb,tb):C(pb,tb)):"*"==b?(A.marked="keyword",C(tb)):";"==a?C(tb):"}"==a?C():void 0}function ub(a){return"variable"!=a?B():(A.marked="property",C())}function vb(a,b){return"string"==a?C(K):"variable"==a?(D(b),C(zb)):void 0}function wb(a,b){return"*"==b?(A.marked="keyword",C(zb,J(";"))):"default"==b?(A.marked="keyword",C(L,J(";"))):B(K)}function xb(a){return"string"==a?C():B(yb,zb)}function yb(a,b){return"{"==a?ab(yb,"}"):("variable"==a&&D(b),C())}function zb(a,b){return"from"==b?(A.marked="keyword",C(L)):void 0}function Ab(a){return"]"==a?C():B(M,Bb)}function Bb(a){return"for"==a?B(Cb,J("]")):","==a?C(_(P,"]")):B(_(M,"]"))}function Cb(a){return"for"==a?C(kb,Cb):"if"==a?C(L,Cb):void 0}var n,o,d=b.indentUnit,e=c.statementIndent,f=c.jsonld,g=c.json||f,h=c.typescript,i=c.wordCharacters||/[\w$\xa1-\uffff]/,j=function(){function a(a){return{type:a,style:"keyword"}}var b=a("keyword a"),c=a("keyword b"),d=a("keyword c"),e=a("operator"),f={type:"atom",style:"atom"},g={"if":a("if"),"while":b,"with":b,"else":c,"do":c,"try":c,"finally":c,"return":d,"break":d,"continue":d,"new":d,"delete":d,"throw":d,"debugger":d,"var":a("var"),"const":a("var"),let:a("var"),"function":a("function"),"catch":a("catch"),"for":a("for"),"switch":a("switch"),"case":a("case"),"default":a("default"),"in":e,"typeof":e,"instanceof":e,"true":f,"false":f,"null":f,undefined:f,NaN:f,Infinity:f,"this":a("this"),module:a("module"),"class":a("class"),"super":a("atom"),yield:d,"export":a("export"),"import":a("import"),"extends":d};if(h){var i={type:"variable",style:"variable-3"},j={"interface":a("interface"),"extends":a("extends"),constructor:a("constructor"),"public":a("public"),"private":a("private"),"protected":a("protected"),"static":a("static"),string:i,number:i,bool:i,any:i};for(var k in j)g[k]=j[k]}return g}(),k=/[+\-*&%=<>!?|~^]/,l=/^@(context|id|value|language|type|container|list|set|reverse|index|base|vocab|graph)"/,u="([{}])",w={atom:!0,number:!0,variable:!0,string:!0,regexp:!0,"this":!0,"jsonld-keyword":!0},A={state:null,column:null,marked:null,cc:null},E={name:"this",next:{name:"arguments"}};return I.lex=!0,{startState:function(a){var b={tokenize:q,lastType:"sof",cc:[],lexical:new x((a||0)-d,0,"block",!1),localVars:c.localVars,context:c.localVars&&{vars:c.localVars},indented:0};return c.globalVars&&"object"==typeof c.globalVars&&(b.globalVars=c.globalVars),b},token:function(a,b){if(a.sol()&&(b.lexical.hasOwnProperty("align")||(b.lexical.align=!1),b.indented=a.indentation(),v(a,b)),b.tokenize!=s&&a.eatSpace())return null;var c=b.tokenize(a,b);return"comment"==n?c:(b.lastType="operator"!=n||"++"!=o&&"--"!=o?n:"incdec",z(b,c,n,o,a))},indent:function(b,f){if(b.tokenize==s)return a.Pass;if(b.tokenize!=q)return 0;var g=f&&f.charAt(0),h=b.lexical;if(!/^\s*else\b/.test(f))for(var i=b.cc.length-1;i>=0;--i){var j=b.cc[i];if(j==I)h=h.prev;else if(j!=jb)break}"stat"==h.type&&"}"==g&&(h=h.prev),e&&")"==h.type&&"stat"==h.prev.type&&(h=h.prev);var k=h.type,l=g==k;return"vardef"==k?h.indented+("operator"==b.lastType||","==b.lastType?h.info+1:0):"form"==k&&"{"==g?h.indented:"form"==k?h.indented+d:"stat"==k?h.indented+("operator"==b.lastType||","==b.lastType?e||d:0):"switch"!=h.info||l||0==c.doubleIndentSwitch?h.align?h.column+(l?0:1):h.indented+(l?0:d):h.indented+(/^(?:case|default)\b/.test(f)?d:2*d)},electricInput:/^\s*(?:case .*?:|default:|\{|\})$/,blockCommentStart:g?null:"/*",blockCommentEnd:g?null:"*/",lineComment:g?null:"//",fold:"brace",helperType:g?"json":"javascript",jsonldMode:f,jsonMode:g}}),a.registerHelper("wordChars","javascript",/[\w$]/),a.defineMIME("text/javascript","javascript"),a.defineMIME("text/ecmascript","javascript"),a.defineMIME("application/javascript","javascript"),a.defineMIME("application/x-javascript","javascript"),a.defineMIME("application/ecmascript","javascript"),a.defineMIME("application/json",{name:"javascript",json:!0}),a.defineMIME("application/x-json",{name:"javascript",json:!0}),a.defineMIME("application/ld+json",{name:"javascript",jsonld:!0}),a.defineMIME("text/typescript",{name:"javascript",typescript:!0}),a.defineMIME("application/typescript",{name:"javascript",typescript:!0})}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";a.defineMode("xml",function(b,c){function k(a,b){function c(c){return b.tokenize=c,c(a,b)}var d=a.next();if("<"==d)return a.eat("!")?a.eat("[")?a.match("CDATA[")?c(n("atom","]]>")):null:a.match("--")?c(n("comment","-->")):a.match("DOCTYPE",!0,!0)?(a.eatWhile(/[\w\._\-]/),c(o(1))):null:a.eat("?")?(a.eatWhile(/[\w\._\-]/),b.tokenize=n("meta","?>"),"meta"):(i=a.eat("/")?"closeTag":"openTag",b.tokenize=l,"tag bracket");if("&"==d){var e;return e=a.eat("#")?a.eat("x")?a.eatWhile(/[a-fA-F\d]/)&&a.eat(";"):a.eatWhile(/[\d]/)&&a.eat(";"):a.eatWhile(/[\w\.\-:]/)&&a.eat(";"),e?"atom":"error"}return a.eatWhile(/[^&<]/),null}function l(a,b){var c=a.next();if(">"==c||"/"==c&&a.eat(">"))return b.tokenize=k,i=">"==c?"endTag":"selfcloseTag","tag bracket";if("="==c)return i="equals",null;if("<"==c){b.tokenize=k,b.state=s,b.tagName=b.tagStart=null;var d=b.tokenize(a,b);return d?d+" tag error":"tag error"}return/[\'\"]/.test(c)?(b.tokenize=m(c),b.stringStartCol=a.column(),b.tokenize(a,b)):(a.match(/^[^\s\u00a0=<>\"\']*[^\s\u00a0=<>\"\'\/]/),"word")}function m(a){var b=function(b,c){for(;!b.eol();)if(b.next()==a){c.tokenize=l;break}return"string"};return b.isInAttribute=!0,b}function n(a,b){return function(c,d){for(;!c.eol();){if(c.match(b)){d.tokenize=k;break}c.next()}return a}}function o(a){return function(b,c){for(var d;null!=(d=b.next());){if("<"==d)return c.tokenize=o(a+1),c.tokenize(b,c);if(">"==d){if(1==a){c.tokenize=k;break}return c.tokenize=o(a-1),c.tokenize(b,c)}}return"meta"}}function p(a,b,c){this.prev=a.context,this.tagName=b,this.indent=a.indented,this.startOfLine=c,(g.doNotIndent.hasOwnProperty(b)||a.context&&a.context.noIndent)&&(this.noIndent=!0)}function q(a){a.context&&(a.context=a.context.prev)}function r(a,b){for(var c;;){if(!a.context)return;if(c=a.context.tagName,!g.contextGrabbers.hasOwnProperty(c)||!g.contextGrabbers[c].hasOwnProperty(b))return;q(a)}}function s(a,b,c){return"openTag"==a?(c.tagStart=b.column(),t):"closeTag"==a?u:s}function t(a,b,c){return"word"==a?(c.tagName=b.current(),j="tag",x):(j="error",t)}function u(a,b,c){if("word"==a){var d=b.current();return c.context&&c.context.tagName!=d&&g.implicitlyClosed.hasOwnProperty(c.context.tagName)&&q(c),c.context&&c.context.tagName==d?(j="tag",v):(j="tag error",w)}return j="error",w}function v(a,b,c){return"endTag"!=a?(j="error",v):(q(c),s)}function w(a,b,c){return j="error",v(a,b,c)}function x(a,b,c){if("word"==a)return j="attribute",y;if("endTag"==a||"selfcloseTag"==a){var d=c.tagName,e=c.tagStart;return c.tagName=c.tagStart=null,"selfcloseTag"==a||g.autoSelfClosers.hasOwnProperty(d)?r(c,d):(r(c,d),c.context=new p(c,d,e==c.indented)),s}return j="error",x}function y(a,b,c){return"equals"==a?z:(g.allowMissing||(j="error"),x(a,b,c))}function z(a,b,c){return"string"==a?A:"word"==a&&g.allowUnquoted?(j="string",x):(j="error",x(a,b,c))}function A(a,b,c){return"string"==a?A:x(a,b,c)}var d=b.indentUnit,e=c.multilineTagIndentFactor||1,f=c.multilineTagIndentPastTag;null==f&&(f=!0);var i,j,g=c.htmlMode?{autoSelfClosers:{area:!0,base:!0,br:!0,col:!0,command:!0,embed:!0,frame:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0,menuitem:!0},implicitlyClosed:{dd:!0,li:!0,optgroup:!0,option:!0,p:!0,rp:!0,rt:!0,tbody:!0,td:!0,tfoot:!0,th:!0,tr:!0},contextGrabbers:{dd:{dd:!0,dt:!0},dt:{dd:!0,dt:!0},li:{li:!0},option:{option:!0,optgroup:!0},optgroup:{optgroup:!0},p:{address:!0,article:!0,aside:!0,blockquote:!0,dir:!0,div:!0,dl:!0,fieldset:!0,footer:!0,form:!0,h1:!0,h2:!0,h3:!0,h4:!0,h5:!0,h6:!0,header:!0,hgroup:!0,hr:!0,menu:!0,nav:!0,ol:!0,p:!0,pre:!0,section:!0,table:!0,ul:!0},rp:{rp:!0,rt:!0},rt:{rp:!0,rt:!0},tbody:{tbody:!0,tfoot:!0},td:{td:!0,th:!0},tfoot:{tbody:!0},th:{td:!0,th:!0},thead:{tbody:!0,tfoot:!0},tr:{tr:!0}},doNotIndent:{pre:!0},allowUnquoted:!0,allowMissing:!0,caseFold:!0}:{autoSelfClosers:{},implicitlyClosed:{},contextGrabbers:{},doNotIndent:{},allowUnquoted:!1,allowMissing:!1,caseFold:!1},h=c.alignCDATA;return{startState:function(){return{tokenize:k,state:s,indented:0,tagName:null,tagStart:null,context:null}},token:function(a,b){if(!b.tagName&&a.sol()&&(b.indented=a.indentation()),a.eatSpace())return null;i=null;var c=b.tokenize(a,b);return(c||i)&&"comment"!=c&&(j=null,b.state=b.state(i||c,a,b),j&&(c="error"==j?c+" error":j)),c},indent:function(b,c,i){var j=b.context;if(b.tokenize.isInAttribute)return b.tagStart==b.indented?b.stringStartCol+1:b.indented+d;if(j&&j.noIndent)return a.Pass;if(b.tokenize!=l&&b.tokenize!=k)return i?i.match(/^(\s*)/)[0].length:0;if(b.tagName)return f?b.tagStart+b.tagName.length+2:b.tagStart+d*e;if(h&&/<!\[CDATA\[/.test(c))return 0;var m=c&&/^<(\/)?([\w_:\.-]*)/.exec(c);if(m&&m[1])for(;j;){if(j.tagName==m[2]){j=j.prev;break}if(!g.implicitlyClosed.hasOwnProperty(j.tagName))break;j=j.prev}else if(m)for(;j;){var n=g.contextGrabbers[j.tagName];if(!n||!n.hasOwnProperty(m[2]))break;j=j.prev}for(;j&&!j.startOfLine;)j=j.prev;return j?j.indent+d:0},electricInput:/<\/[\s\w:]+>$/,blockCommentStart:"<!--",blockCommentEnd:"-->",configuration:c.htmlMode?"html":"xml",helperType:c.htmlMode?"html":"xml"}}),a.defineMIME("text/xml","xml"),a.defineMIME("application/xml","xml"),a.mimeModes.hasOwnProperty("text/html")||a.defineMIME("text/html",{name:"xml",htmlMode:!0})}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";a.registerHelper("fold","brace",function(b,c){function h(f){for(var h=c.ch,i=0;;){var j=0>=h?-1:e.lastIndexOf(f,h-1);if(-1!=j){if(1==i&&j<c.ch)break;if(g=b.getTokenTypeAt(a.Pos(d,j+1)),!/^(comment|string)/.test(g))return j+1;h=j-1}else{if(1==i)break;i=1,h=e.length}}}var f,g,d=c.line,e=b.getLine(d),i="{",j="}",f=h("{");if(null==f&&(i="[",j="]",f=h("[")),null!=f){var m,n,k=1,l=b.lastLine();a:for(var o=d;l>=o;++o)for(var p=b.getLine(o),q=o==d?f:0;;){var r=p.indexOf(i,q),s=p.indexOf(j,q);if(0>r&&(r=p.length),0>s&&(s=p.length),q=Math.min(r,s),q==p.length)break;if(b.getTokenTypeAt(a.Pos(o,q+1))==g)if(q==r)++k;else if(!--k){m=o,n=q;break a}++q}if(null!=m&&(d!=m||n!=f))return{from:a.Pos(d,f),to:a.Pos(m,n)}}}),a.registerHelper("fold","import",function(b,c){function d(c){if(c<b.firstLine()||c>b.lastLine())return null;var d=b.getTokenAt(a.Pos(c,1));if(/\S/.test(d.string)||(d=b.getTokenAt(a.Pos(c,d.end+1))),"keyword"!=d.type||"import"!=d.string)return null;for(var e=c,f=Math.min(b.lastLine(),c+10);f>=e;++e){var g=b.getLine(e),h=g.indexOf(";");if(-1!=h)return{startCh:d.end,end:a.Pos(e,h)}}}var f,c=c.line,e=d(c);if(!e||d(c-1)||(f=d(c-2))&&f.end.line==c-1)return null;for(var g=e.end;;){var h=d(g.line+1);if(null==h)break;g=h.end}return{from:b.clipPos(a.Pos(c,e.startCh+1)),to:g}}),a.registerHelper("fold","include",function(b,c){function d(c){if(c<b.firstLine()||c>b.lastLine())return null;var d=b.getTokenAt(a.Pos(c,1));return/\S/.test(d.string)||(d=b.getTokenAt(a.Pos(c,d.end+1))),"meta"==d.type&&"#include"==d.string.slice(0,8)?d.start+8:void 0}var c=c.line,e=d(c);if(null==e||null!=d(c-1))return null;for(var f=c;;){var g=d(f+1);if(null==g)break;++f}return{from:a.Pos(c,e+1),to:b.clipPos(a.Pos(f))}})}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";a.registerGlobalHelper("fold","comment",function(a){return a.blockCommentStart&&a.blockCommentEnd},function(b,c){var d=b.getModeAt(c),e=d.blockCommentStart,f=d.blockCommentEnd;if(e&&f){for(var i,g=c.line,h=b.getLine(g),j=c.ch,k=0;;){var l=0>=j?-1:h.lastIndexOf(e,j-1);if(-1!=l){if(1==k&&l<c.ch)return;if(/comment/.test(b.getTokenTypeAt(a.Pos(g,l+1)))){i=l+e.length;break}j=l-1}else{if(1==k)return;k=1,j=h.length}}var o,p,m=1,n=b.lastLine();a:for(var q=g;n>=q;++q)for(var r=b.getLine(q),s=q==g?i:0;;){var t=r.indexOf(e,s),u=r.indexOf(f,s);if(0>t&&(t=r.length),0>u&&(u=r.length),s=Math.min(t,u),s==r.length)break;if(s==t)++m;else if(!--m){o=q,p=s;break a}++s}if(null!=o&&(g!=o||p!=i))return{from:a.Pos(g,i),to:a.Pos(o,p)}}})}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";function b(b,d,f,g){function j(a){var c=h(b,d);if(!c||c.to.line-c.from.line<i)return null;for(var e=b.findMarksAt(c.from),f=0;f<e.length;++f)if(e[f].__isFold&&"fold"!==g){if(!a)return null;c.cleared=!0,e[f].clear()}return c}if(f&&f.call){var h=f;f=null}else var h=e(b,f,"rangeFinder");"number"==typeof d&&(d=a.Pos(d,0));var i=e(b,f,"minFoldSize"),k=j(!0);if(e(b,f,"scanUp"))for(;!k&&d.line>b.firstLine();)d=a.Pos(d.line-1,0),k=j(!1);if(k&&!k.cleared&&"unfold"!==g){var l=c(b,f);a.on(l,"mousedown",function(b){m.clear(),a.e_preventDefault(b)});var m=b.markText(k.from,k.to,{replacedWith:l,clearOnEnter:!0,__isFold:!0});m.on("clear",function(c,d){a.signal(b,"unfold",b,c,d)}),a.signal(b,"fold",b,k.from,k.to)}}function c(a,b){var c=e(a,b,"widget");if("string"==typeof c){var d=document.createTextNode(c);c=document.createElement("span"),c.appendChild(d),c.className="CodeMirror-foldmarker"}return c}function e(a,b,c){if(b&&void 0!==b[c])return b[c];var e=a.options.foldOptions;return e&&void 0!==e[c]?e[c]:d[c]}a.newFoldFunction=function(a,c){return function(d,e){b(d,e,{rangeFinder:a,widget:c})}},a.defineExtension("foldCode",function(a,c,d){b(this,a,c,d)}),a.defineExtension("isFolded",function(a){for(var b=this.findMarksAt(a),c=0;c<b.length;++c)if(b[c].__isFold)return!0}),a.commands.toggleFold=function(a){a.foldCode(a.getCursor())},a.commands.fold=function(a){a.foldCode(a.getCursor(),null,"fold")},a.commands.unfold=function(a){a.foldCode(a.getCursor(),null,"unfold")},a.commands.foldAll=function(b){b.operation(function(){for(var c=b.firstLine(),d=b.lastLine();d>=c;c++)b.foldCode(a.Pos(c,0),null,"fold")})},a.commands.unfoldAll=function(b){b.operation(function(){for(var c=b.firstLine(),d=b.lastLine();d>=c;c++)b.foldCode(a.Pos(c,0),null,"unfold")})},a.registerHelper("fold","combine",function(){var a=Array.prototype.slice.call(arguments,0);return function(b,c){for(var d=0;d<a.length;++d){var e=a[d](b,c);if(e)return e}}}),a.registerHelper("fold","auto",function(a,b){for(var c=a.getHelpers(b,"fold"),d=0;d<c.length;d++){var e=c[d](a,b);if(e)return e}});var d={rangeFinder:a.fold.auto,widget:"\u2194",minFoldSize:0,scanUp:!1};a.defineOption("foldOptions",null)}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror"),require("./foldcode")):"function"==typeof define&&define.amd?define(["../../lib/codemirror","./foldcode"],a):a(CodeMirror)}(function(a){"use strict";function c(a){this.options=a,this.from=this.to=0}function d(a){return a===!0&&(a={}),null==a.gutter&&(a.gutter="CodeMirror-foldgutter"),null==a.indicatorOpen&&(a.indicatorOpen="CodeMirror-foldgutter-open"),null==a.indicatorFolded&&(a.indicatorFolded="CodeMirror-foldgutter-folded"),a}function e(a,c){for(var d=a.findMarksAt(b(c)),e=0;e<d.length;++e)if(d[e].__isFold&&d[e].find().from.line==c)return!0}function f(a){if("string"==typeof a){var b=document.createElement("div");return b.className=a+" CodeMirror-guttermarker-subtle",b}return a.cloneNode(!0)}function g(c,d,g){var h=c.state.foldGutter.options,i=d;c.eachLine(d,g,function(d){var g=null;if(e(c,i))g=f(h.indicatorFolded);else{var j=b(i,0),k=h.rangeFinder||a.fold.auto,l=k&&k(c,j);l&&l.from.line+1<l.to.line&&(g=f(h.indicatorOpen))}c.setGutterMarker(d,h.gutter,g),++i})}function h(a){var b=a.getViewport(),c=a.state.foldGutter;c&&(a.operation(function(){g(a,b.from,b.to)}),c.from=b.from,c.to=b.to)}function i(a,c,d){var e=a.state.foldGutter.options;d==e.gutter&&a.foldCode(b(c,0),e.rangeFinder)}function j(a){var b=a.state.foldGutter,c=a.state.foldGutter.options;b.from=b.to=0,clearTimeout(b.changeUpdate),b.changeUpdate=setTimeout(function(){h(a)},c.foldOnChangeTimeSpan||600)}function k(a){var b=a.state.foldGutter,c=a.state.foldGutter.options;clearTimeout(b.changeUpdate),b.changeUpdate=setTimeout(function(){var c=a.getViewport();b.from==b.to||c.from-b.to>20||b.from-c.to>20?h(a):a.operation(function(){c.from<b.from&&(g(a,c.from,b.from),b.from=c.from),c.to>b.to&&(g(a,b.to,c.to),b.to=c.to)})},c.updateViewportTimeSpan||400)}function l(a,b){var c=a.state.foldGutter,d=b.line;d>=c.from&&d<c.to&&g(a,d,d+1)}a.defineOption("foldGutter",!1,function(b,e,f){f&&f!=a.Init&&(b.clearGutter(b.state.foldGutter.options.gutter),b.state.foldGutter=null,b.off("gutterClick",i),b.off("change",j),b.off("viewportChange",k),b.off("fold",l),b.off("unfold",l),b.off("swapDoc",h)),e&&(b.state.foldGutter=new c(d(e)),h(b),b.on("gutterClick",i),b.on("change",j),b.on("viewportChange",k),b.on("fold",l),b.on("unfold",l),b.on("swapDoc",h))
+});var b=a.Pos}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";a.registerHelper("fold","markdown",function(b,c){function e(c){var d=b.getTokenTypeAt(a.Pos(c,0));return d&&/\bheader\b/.test(d)}function f(a,b,c){var f=b&&b.match(/^#+/);return f&&e(a)?f[0].length:(f=c&&c.match(/^[=\-]+\s*$/),f&&e(a+1)?"="==c[0]?1:2:d)}var d=100,g=b.getLine(c.line),h=b.getLine(c.line+1),i=f(c.line,g,h);if(i===d)return void 0;for(var j=b.lastLine(),k=c.line,l=b.getLine(k+2);j>k&&!(f(k+1,h,l)<=i);)++k,h=l,l=b.getLine(k+2);return{from:a.Pos(c.line,g.length),to:a.Pos(k,b.getLine(k).length)}})}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){function e(a,b,e,g){var h=a.getLineHandle(b.line),i=b.ch-1,j=i>=0&&d[h.text.charAt(i)]||d[h.text.charAt(++i)];if(!j)return null;var k=">"==j.charAt(1)?1:-1;if(e&&k>0!=(i==b.ch))return null;var l=a.getTokenTypeAt(c(b.line,i+1)),m=f(a,c(b.line,i+(k>0?1:0)),k,l||null,g);return null==m?null:{from:c(b.line,i),to:m&&m.pos,match:m&&m.ch==j.charAt(0),forward:k>0}}function f(a,b,e,f,g){for(var h=g&&g.maxScanLineLength||1e4,i=g&&g.maxScanLines||1e3,j=[],k=g&&g.bracketRegex?g.bracketRegex:/[(){}[\]]/,l=e>0?Math.min(b.line+i,a.lastLine()+1):Math.max(a.firstLine()-1,b.line-i),m=b.line;m!=l;m+=e){var n=a.getLine(m);if(n){var o=e>0?0:n.length-1,p=e>0?n.length:-1;if(!(n.length>h))for(m==b.line&&(o=b.ch-(0>e?1:0));o!=p;o+=e){var q=n.charAt(o);if(k.test(q)&&(void 0===f||a.getTokenTypeAt(c(m,o+1))==f)){var r=d[q];if(">"==r.charAt(1)==e>0)j.push(q);else{if(!j.length)return{pos:c(m,o),ch:q};j.pop()}}}}}return m-e==(e>0?a.lastLine():a.firstLine())?!1:null}function g(a,d,f){for(var g=a.state.matchBrackets.maxHighlightLineLength||1e3,h=[],i=a.listSelections(),j=0;j<i.length;j++){var k=i[j].empty()&&e(a,i[j].head,!1,f);if(k&&a.getLine(k.from.line).length<=g){var l=k.match?"CodeMirror-matchingbracket":"CodeMirror-nonmatchingbracket";h.push(a.markText(k.from,c(k.from.line,k.from.ch+1),{className:l})),k.to&&a.getLine(k.to.line).length<=g&&h.push(a.markText(k.to,c(k.to.line,k.to.ch+1),{className:l}))}}if(h.length){b&&a.state.focused&&a.display.input.focus();var m=function(){a.operation(function(){for(var a=0;a<h.length;a++)h[a].clear()})};if(!d)return m;setTimeout(m,800)}}function i(a){a.operation(function(){h&&(h(),h=null),h=g(a,!1,a.state.matchBrackets)})}var b=/MSIE \d/.test(navigator.userAgent)&&(null==document.documentMode||document.documentMode<8),c=a.Pos,d={"(":")>",")":"(<","[":"]>","]":"[<","{":"}>","}":"{<"},h=null;a.defineOption("matchBrackets",!1,function(b,c,d){d&&d!=a.Init&&b.off("cursorActivity",i),c&&(b.state.matchBrackets="object"==typeof c?c:{},b.on("cursorActivity",i))}),a.defineExtension("matchBrackets",function(){g(this,!0)}),a.defineExtension("findMatchingBracket",function(a,b,c){return e(this,a,b,c)}),a.defineExtension("scanForBracket",function(a,b,c,d){return f(this,a,b,c,d)})}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";function d(a,b){this.cm=a,this.options=this.buildOptions(b),this.widget=this.onClose=null}function e(a){return"string"==typeof a?a:a.text}function f(a,b){function f(a,d){var f;f="string"!=typeof d?function(a){return d(a,b)}:c.hasOwnProperty(d)?c[d]:d,e[a]=f}var c={Up:function(){b.moveFocus(-1)},Down:function(){b.moveFocus(1)},PageUp:function(){b.moveFocus(-b.menuSize()+1,!0)},PageDown:function(){b.moveFocus(b.menuSize()-1,!0)},Home:function(){b.setFocus(0)},End:function(){b.setFocus(b.length-1)},Enter:b.pick,Tab:b.pick,Esc:b.close},d=a.options.customKeys,e=d?{}:c;if(d)for(var g in d)d.hasOwnProperty(g)&&f(g,d[g]);var h=a.options.extraKeys;if(h)for(var g in h)h.hasOwnProperty(g)&&f(g,h[g]);return e}function g(a,b){for(;b&&b!=a;){if("LI"===b.nodeName.toUpperCase()&&b.parentNode==a)return b;b=b.parentNode}}function h(d,h){this.completion=d,this.data=h;var i=this,j=d.cm,k=this.hints=document.createElement("ul");k.className="CodeMirror-hints",this.selectedHint=h.selectedHint||0;for(var l=h.list,m=0;m<l.length;++m){var n=k.appendChild(document.createElement("li")),o=l[m],p=b+(m!=this.selectedHint?"":" "+c);null!=o.className&&(p=o.className+" "+p),n.className=p,o.render?o.render(n,h,o):n.appendChild(document.createTextNode(o.displayText||e(o))),n.hintId=m}var q=j.cursorCoords(d.options.alignWithWord?h.from:null),r=q.left,s=q.bottom,t=!0;k.style.left=r+"px",k.style.top=s+"px";var u=window.innerWidth||Math.max(document.body.offsetWidth,document.documentElement.offsetWidth),v=window.innerHeight||Math.max(document.body.offsetHeight,document.documentElement.offsetHeight);(d.options.container||document.body).appendChild(k);var w=k.getBoundingClientRect(),x=w.bottom-v;if(x>0){var y=w.bottom-w.top,z=q.top-(q.bottom-w.top);if(z-y>0)k.style.top=(s=q.top-y)+"px",t=!1;else if(y>v){k.style.height=v-5+"px",k.style.top=(s=q.bottom-w.top)+"px";var A=j.getCursor();h.from.ch!=A.ch&&(q=j.cursorCoords(A),k.style.left=(r=q.left)+"px",w=k.getBoundingClientRect())}}var B=w.left-u;if(B>0&&(w.right-w.left>u&&(k.style.width=u-5+"px",B-=w.right-w.left-u),k.style.left=(r=q.left-B)+"px"),j.addKeyMap(this.keyMap=f(d,{moveFocus:function(a,b){i.changeActive(i.selectedHint+a,b)},setFocus:function(a){i.changeActive(a)},menuSize:function(){return i.screenAmount()},length:l.length,close:function(){d.close()},pick:function(){i.pick()},data:h})),d.options.closeOnUnfocus){var C;j.on("blur",this.onBlur=function(){C=setTimeout(function(){d.close()},100)}),j.on("focus",this.onFocus=function(){clearTimeout(C)})}var D=j.getScrollInfo();return j.on("scroll",this.onScroll=function(){var a=j.getScrollInfo(),b=j.getWrapperElement().getBoundingClientRect(),c=s+D.top-a.top,e=c-(window.pageYOffset||(document.documentElement||document.body).scrollTop);return t||(e+=k.offsetHeight),e<=b.top||e>=b.bottom?d.close():(k.style.top=c+"px",k.style.left=r+D.left-a.left+"px",void 0)}),a.on(k,"dblclick",function(a){var b=g(k,a.target||a.srcElement);b&&null!=b.hintId&&(i.changeActive(b.hintId),i.pick())}),a.on(k,"click",function(a){var b=g(k,a.target||a.srcElement);b&&null!=b.hintId&&(i.changeActive(b.hintId),d.options.completeOnSingleClick&&i.pick())}),a.on(k,"mousedown",function(){setTimeout(function(){j.focus()},20)}),a.signal(h,"select",l[0],k.firstChild),!0}var b="CodeMirror-hint",c="CodeMirror-hint-active";a.showHint=function(a,b,c){if(!b)return a.showHint(c);c&&c.async&&(b.async=!0);var d={hint:b};if(c)for(var e in c)d[e]=c[e];return a.showHint(d)},a.defineExtension("showHint",function(b){if(!(this.listSelections().length>1||this.somethingSelected())){this.state.completionActive&&this.state.completionActive.close();var c=this.state.completionActive=new d(this,b),e=c.options.hint;if(e)return a.signal(this,"startCompletion",this),e.async?(e(this,function(a){c.showHints(a)},c.options),void 0):c.showHints(e(this,c.options))}}),d.prototype={close:function(){this.active()&&(this.cm.state.completionActive=null,this.widget&&this.widget.close(),this.onClose&&this.onClose(),a.signal(this.cm,"endCompletion",this.cm))},active:function(){return this.cm.state.completionActive==this},pick:function(b,c){var d=b.list[c];d.hint?d.hint(this.cm,b,d):this.cm.replaceRange(e(d),d.from||b.from,d.to||b.to,"complete"),a.signal(b,"pick",d),this.close()},showHints:function(a){return a&&a.list.length&&this.active()?(this.options.completeSingle&&1==a.list.length?this.pick(a,0):this.showWidget(a),void 0):this.close()},showWidget:function(b){function l(){e||(e=!0,d.close(),d.cm.off("cursorActivity",p),b&&a.signal(b,"close"))}function m(){if(!e){a.signal(b,"update");var c=d.options.hint;c.async?c(d.cm,n,d.options):n(c(d.cm,d.options))}}function n(a){if(b=a,!e){if(!b||!b.list.length)return l();d.widget&&d.widget.close(),d.widget=new h(d,b)}}function o(){c&&(k(c),c=0)}function p(){o();var a=d.cm.getCursor(),b=d.cm.getLine(a.line);a.line!=g.line||b.length-a.ch!=i-g.ch||a.ch<g.ch||d.cm.somethingSelected()||a.ch&&f.test(b.charAt(a.ch-1))?d.close():(c=j(m),d.widget&&d.widget.close())}this.widget=new h(this,b),a.signal(b,"shown");var e,c=0,d=this,f=this.options.closeCharacters,g=this.cm.getCursor(),i=this.cm.getLine(g.line).length,j=window.requestAnimationFrame||function(a){return setTimeout(a,1e3/60)},k=window.cancelAnimationFrame||clearTimeout;this.cm.on("cursorActivity",p),this.onClose=l},buildOptions:function(a){var b=this.cm.options.hintOptions,c={};for(var d in i)c[d]=i[d];if(b)for(var d in b)void 0!==b[d]&&(c[d]=b[d]);if(a)for(var d in a)void 0!==a[d]&&(c[d]=a[d]);return c}},h.prototype={close:function(){if(this.completion.widget==this){this.completion.widget=null,this.hints.parentNode.removeChild(this.hints),this.completion.cm.removeKeyMap(this.keyMap);var a=this.completion.cm;this.completion.options.closeOnUnfocus&&(a.off("blur",this.onBlur),a.off("focus",this.onFocus)),a.off("scroll",this.onScroll)}},pick:function(){this.completion.pick(this.data,this.selectedHint)},changeActive:function(b,d){if(b>=this.data.list.length?b=d?this.data.list.length-1:0:0>b&&(b=d?0:this.data.list.length-1),this.selectedHint!=b){var e=this.hints.childNodes[this.selectedHint];e.className=e.className.replace(" "+c,""),e=this.hints.childNodes[this.selectedHint=b],e.className+=" "+c,e.offsetTop<this.hints.scrollTop?this.hints.scrollTop=e.offsetTop-3:e.offsetTop+e.offsetHeight>this.hints.scrollTop+this.hints.clientHeight&&(this.hints.scrollTop=e.offsetTop+e.offsetHeight-this.hints.clientHeight+3),a.signal(this.data,"select",this.data.list[this.selectedHint],e)}},screenAmount:function(){return Math.floor(this.hints.clientHeight/this.hints.firstChild.offsetHeight)||1}},a.registerHelper("hint","auto",function(b,c){var e,d=b.getHelpers(b.getCursor(),"hint");if(d.length)for(var f=0;f<d.length;f++){var g=d[f](b,c);if(g&&g.list.length)return g}else if(e=b.getHelper(b.getCursor(),"hintWords")){if(e)return a.hint.fromList(b,{words:e})}else if(a.hint.anyword)return a.hint.anyword(b,c)}),a.registerHelper("hint","fromList",function(b,c){for(var d=b.getCursor(),e=b.getTokenAt(d),f=[],g=0;g<c.words.length;g++){var h=c.words[g];h.slice(0,e.string.length)==e.string&&f.push(h)}return f.length?{list:f,from:a.Pos(d.line,e.start),to:a.Pos(d.line,e.end)}:void 0}),a.commands.autocomplete=a.showHint;var i={hint:a.hint.auto,completeSingle:!0,alignWithWord:!0,closeCharacters:/[\s()\[\]{};:>,]/,closeOnUnfocus:!0,completeOnSingleClick:!1,container:null,customKeys:null,extraKeys:null};a.defineOption("hintOptions",null)}),function(a){"object"==typeof exports&&"object"==typeof module?a(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],a):a(CodeMirror)}(function(a){"use strict";function c(a,b){return a.line-b.line||a.ch-b.ch}function g(a,b,c,d){this.line=b,this.ch=c,this.cm=a,this.text=a.getLine(b),this.min=d?d.from:a.firstLine(),this.max=d?d.to-1:a.lastLine()}function h(a,c){var d=a.cm.getTokenTypeAt(b(a.line,c));return d&&/\btag\b/.test(d)}function i(a){return a.line>=a.max?void 0:(a.ch=0,a.text=a.cm.getLine(++a.line),!0)}function j(a){return a.line<=a.min?void 0:(a.text=a.cm.getLine(--a.line),a.ch=a.text.length,!0)}function k(a){for(;;){var b=a.text.indexOf(">",a.ch);if(-1==b){if(i(a))continue;return}{if(h(a,b+1)){var c=a.text.lastIndexOf("/",b),d=c>-1&&!/\S/.test(a.text.slice(c+1,b));return a.ch=b+1,d?"selfClose":"regular"}a.ch=b+1}}}function l(a){for(;;){var b=a.ch?a.text.lastIndexOf("<",a.ch-1):-1;if(-1==b){if(j(a))continue;return}if(h(a,b+1)){f.lastIndex=b,a.ch=b;var c=f.exec(a.text);if(c&&c.index==b)return c}else a.ch=b}}function m(a){for(;;){f.lastIndex=a.ch;var b=f.exec(a.text);if(!b){if(i(a))continue;return}{if(h(a,b.index+1))return a.ch=b.index+b[0].length,b;a.ch=b.index+1}}}function n(a){for(;;){var b=a.ch?a.text.lastIndexOf(">",a.ch-1):-1;if(-1==b){if(j(a))continue;return}{if(h(a,b+1)){var c=a.text.lastIndexOf("/",b),d=c>-1&&!/\S/.test(a.text.slice(c+1,b));return a.ch=b+1,d?"selfClose":"regular"}a.ch=b}}}function o(a,c){for(var d=[];;){var f,e=m(a),g=a.line,h=a.ch-(e?e[0].length:0);if(!e||!(f=k(a)))return;if("selfClose"!=f)if(e[1]){for(var i=d.length-1;i>=0;--i)if(d[i]==e[2]){d.length=i;break}if(0>i&&(!c||c==e[2]))return{tag:e[2],from:b(g,h),to:b(a.line,a.ch)}}else d.push(e[2])}}function p(a,c){for(var d=[];;){var e=n(a);if(!e)return;if("selfClose"!=e){var f=a.line,g=a.ch,h=l(a);if(!h)return;if(h[1])d.push(h[2]);else{for(var i=d.length-1;i>=0;--i)if(d[i]==h[2]){d.length=i;break}if(0>i&&(!c||c==h[2]))return{tag:h[2],from:b(a.line,a.ch),to:b(f,g)}}}else l(a)}}var b=a.Pos,d="A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD",e=d+"-:.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040",f=new RegExp("<(/?)(["+d+"]["+e+"]*)","g");a.registerHelper("fold","xml",function(a,c){for(var d=new g(a,c.line,0);;){var f,e=m(d);if(!e||d.line!=c.line||!(f=k(d)))return;if(!e[1]&&"selfClose"!=f){var c=b(d.line,d.ch),h=o(d,e[2]);return h&&{from:c,to:h.from}}}}),a.findMatchingTag=function(a,d,e){var f=new g(a,d.line,d.ch,e);if(-1!=f.text.indexOf(">")||-1!=f.text.indexOf("<")){var h=k(f),i=h&&b(f.line,f.ch),j=h&&l(f);if(h&&j&&!(c(f,d)>0)){var m={from:b(f.line,f.ch),to:i,tag:j[2]};return"selfClose"==h?{open:m,close:null,at:"open"}:j[1]?{open:p(f,j[2]),close:m,at:"close"}:(f=new g(a,i.line,i.ch,e),{open:m,close:o(f,j[2]),at:"open"})}}},a.findEnclosingTag=function(a,b,c){for(var d=new g(a,b.line,b.ch,c);;){var e=p(d);if(!e)break;var f=new g(a,b.line,b.ch,c),h=o(f,e.tag);if(h)return{open:e,close:h}}},a.scanForClosingTag=function(a,b,c,d){var e=new g(a,b.line,b.ch,d?{from:0,to:d}:null);return o(e,c)}});
\ 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/codemirror/lib/codemirror.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror.css
new file mode 100644
index 000000000000..e2d4ec2048c4
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/codemirror/lib/codemirror.css
@@ -0,0 +1,318 @@
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+}
+.CodeMirror-scroll {
+  /* Set scrolling behaviour here */
+  overflow: auto;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror div.CodeMirror-cursor {
+  border-left: 1px solid black;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.CodeMirror.cm-fat-cursor div.CodeMirror-cursor {
+  width: auto;
+  border: 0;
+  background: #7e7;
+}
+.CodeMirror.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+}
+@-moz-keyframes blink {
+  0% { background: #7e7; }
+  50% { background: none; }
+  100% { background: #7e7; }
+}
+@-webkit-keyframes blink {
+  0% { background: #7e7; }
+  50% { background: none; }
+  100% { background: #7e7; }
+}
+@keyframes blink {
+  0% { background: #7e7; }
+  50% { background: none; }
+  100% { background: #7e7; }
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+div.CodeMirror-overwrite div.CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  line-height: 1;
+  position: relative;
+  overflow: hidden;
+  background: white;
+  color: black;
+}
+
+.CodeMirror-scroll {
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actuall scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  padding-bottom: 30px;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  padding-bottom: 30px;
+  margin-bottom: -32px;
+  display: inline-block;
+  /* Hack to make IE7 behave */
+  *zoom:1;
+  *display:inline;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  height: 100%;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  overflow: auto;
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-wrap .CodeMirror-scroll {
+  overflow-x: hidden;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+.CodeMirror-measure pre { position: static; }
+
+.CodeMirror div.CodeMirror-cursor {
+  position: absolute;
+  border-right: none;
+  width: 0;
+}
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+
+.cm-searching {
+  background: #ffa;
+  background: rgba(255, 255, 0, .4);
+}
+
+/* IE7 hack to prevent it from returning funny offsetTops on the spans */
+.CodeMirror span { *vertical-align: text-bottom; }
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.css
new file mode 100644
index 000000000000..6ab472d69d1f
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.css
@@ -0,0 +1,117 @@
+/*
+ * 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.
+ */
+/*
+    Styles for the Nifi combo box.
+*/
+
+.combo {
+    color: #262626;
+    font-family: Roboto, sans-serif;
+    font-size: 13px;
+    padding:0 10px;
+    height: 30px;
+    line-height: 30px;
+    border: 1px solid #eaeef0;
+}
+
+.combo-options {
+    background: #fefefe;
+    color: #262626;
+    list-style: none;
+    border: 1px solid #004849;
+    box-shadow:0 3px 6px rgba(0,0,0,0.3);
+    z-index: 2000;
+    border-top: none;
+    font-size: 13px;
+}
+
+.combo-options .fa {
+    color: #004849;
+}
+
+.combo-open {
+    background: #fff !important;
+    border: 1px solid #004849 !important;
+    border-bottom: 1px solid #fff !important;
+    font-weight: bold;
+    color: #262626;
+    box-shadow:0 3px 6px rgba(0,0,0,0.3);
+}
+
+.combo-arrow {
+    float: right;
+    width: 10px;
+    margin-top: 8px;
+}
+
+.combo-text {
+    float: left;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 80%;
+    font-weight: normal;
+}
+
+div.selected-disabled-option {
+    font-style: italic;
+    color: #828282;
+}
+
+.combo-options ul > li {
+    height: 32px;
+    padding: 0px 10px;
+}
+
+.combo-options ul > li.disabled-option {
+    font-style: italic;
+}
+
+.combo-option-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    float: left;
+    height: 32px;
+    font-weight: normal;
+    line-height: 32px;
+}
+
+.combo-glass-pane {
+    position: absolute;
+    background: #E3E8EB;
+    opacity: 0.0;
+    left: 0px;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    z-index: 1999;
+}
+
+div.combo-nifi-tooltip {
+    border: 1px solid #454545;
+    background-color: #FFFFA3;
+    color: #454545;
+}
+
+div.combo-button-normal {
+    background-color: #eaeef0;
+}
+
+span.combo-option-text {
+    max-width: 227px;
+}
\ 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/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
new file mode 100644
index 000000000000..b6d324b400be
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js
@@ -0,0 +1,363 @@
+/*
+ * 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.
+ */
+
+/* requires qtip plugin to be loaded first*/
+
+/**
+ * Create a new combo box. The options are specified in the following
+ * format:
+ *
+ * {
+ *   selectedOption: {
+ *      value: 'option 2'
+ *   },
+ *   options: [{
+ *      text: 'option 1',
+ *      value: 'option 1',
+ *      disabled: true,
+ *      description: 'Option description...'
+ *   }, {
+ *      text: 'option 2',
+ *      value: 'option 2',
+ *      optionClass: 'my-style'
+ *   }],
+ *   maxHeight: 300,
+ *   select: selectHandler
+ * }
+ *
+ * Options have a label (specified as the text property that is rendered
+ * to users) and a value which is not. Additionally, options can be marked
+ * as disabled. A disabled option cannot be selected by a user but may be
+ * programmatically selected (supporting the restoration of options that have
+ * become invalid). It is up to the developer to ensure that the selected
+ * option is not disabled.
+ *
+ * The optionClass option supports specifying a class to apply to the
+ * option element.
+ */
+
+/**
+ * jQuery plugin for a NiFi style combo box.
+ *
+ * @param {type} $
+ * @returns {undefined}
+ */
+(function ($) {
+
+    var isUndefined = function (obj) {
+        return typeof obj === 'undefined';
+    };
+
+    var isNull = function (obj) {
+        return obj === null;
+    };
+
+    var isDefinedAndNotNull = function (obj) {
+        return !isUndefined(obj) && !isNull(obj);
+    };
+
+    var isBlank = function (str) {
+        return isUndefined(str) || isNull(str) || str === '';
+    };
+
+    var selectOption = function (combo, text, value) {
+        var config = combo.data('options');
+        var comboText = combo.children('div.combo-text');
+        var selectedOption;
+
+        // attempt to match on value first
+        if (isDefinedAndNotNull(value)) {
+            $.each(config.options, function (i, option) {
+                if (value === option.value) {
+                    selectedOption = option;
+                }
+            });
+        }
+
+        // if no option values matched, try the text
+        if (isUndefined(selectedOption)) {
+            $.each(config.options, function (i, option) {
+                if (isUndefined(selectedOption)) {
+                    selectedOption = option;
+                }
+
+                if (text === option.text) {
+                    selectedOption = option;
+                }
+            });
+        }
+
+        // ensure we found the selected option
+        if (isDefinedAndNotNull(selectedOption)) {
+            comboText.removeClass('selected-disabled-option').attr('title', selectedOption.text).text(selectedOption.text).data('text', selectedOption.text);
+
+            // if the selected option is disabled show it
+            if (selectedOption.disabled === true) {
+                comboText.addClass('selected-disabled-option');
+            }
+
+            // store the selected option
+            combo.data('selected-option', selectedOption);
+
+            // fire a select event if applicable
+            if (isDefinedAndNotNull(config.select)) {
+                config.select.call(combo, selectedOption);
+            }
+        }
+
+    };
+
+    var methods = {
+
+        /**
+         * Initializes the combo box.
+         *
+         * @argument {object} options The options for the combo box
+         */
+        init: function (options) {
+            return this.each(function () {
+                // ensure the options have been properly specified
+                if (isDefinedAndNotNull(options) &&
+                    isDefinedAndNotNull(options.options)) {
+
+                    // get the combo 
+                    var combo = $(this);
+
+                    // clear any current contents, remote events, and store options
+                    combo.empty().unbind().data('options', options);
+
+                    // add a div to hold the text
+                    $('<div class="combo-text"></div>').appendTo(combo);
+
+                    // add hover effect and handle a combo click
+                    combo.addClass('combo-button-normal pointer combo').hover(function () {
+                        combo.removeClass('button-normal').addClass('combo-button-over');
+                    }, function () {
+                        combo.removeClass('button-over').addClass('combo-button-normal');
+                    }).click(function (event) {
+                        var comboConfigOptions = combo.data('options');
+                        
+                        //add active styles
+                        $(this).addClass('combo-open');
+
+                        // determine the position of the element in question
+                        var position = combo.offset();
+
+                        // create the combo box options beneath it
+                        var comboOptions = $('<div></div>').addClass('combo-options').css({
+                            'position': 'absolute',
+                            'left': position.left + 'px',
+                            'top': (position.top + combo.outerHeight() - 1) + 'px',
+                            'width': (combo.outerWidth() - 2) + 'px',
+                            'overflow-y': 'auto'
+                        });
+
+                        // keep track of the overall height
+                        var actualHeight = 0;
+
+                        // set the max height if necessary
+                        var maxHeight = -1;
+                        if (isDefinedAndNotNull(comboConfigOptions.maxHeight)) {
+                            maxHeight = parseInt(comboConfigOptions.maxHeight);
+                            if (maxHeight > 0) {
+                                comboOptions.css('max-height', maxHeight + 'px');
+                            }
+                        }
+
+                        // create the list that will contain the options
+                        var optionList = $('<ul></ul>').appendTo(comboOptions);
+
+                        // process the options
+                        $.each(comboConfigOptions.options, function (i, option) {
+                            var optionText = $('<span class="combo-option-text"></span>').attr('title', option.text).text(option.text);
+                            var optionValue = $('<span class="hidden"></span>').text(option.value);
+
+                            // create each option
+                            var optionElement = $('<li></li>').addClass(option.optionClass).append(optionText).append(optionValue).appendTo(optionList);
+
+                            // this is option is enabled register appropriate listeners
+                            if (option.disabled === true) {
+                                optionElement.addClass('unset disabled-option');
+                            } else {
+                                optionElement.click(function () {
+                                    //remove active styles
+                                    $('.combo').removeClass('combo-open');
+
+                                    // select the option
+                                    selectOption(combo, option.text, option.value);
+
+                                    // click the glass pane which will hide the options
+                                    $('.combo-glass-pane').click();
+                                }).hover(function () {
+                                    $(this).addClass('pointer').css('background', '#eaeef0');
+                                }, function () {
+                                    $(this).removeClass('pointer').css('background', '#ffffff');
+                                });
+                            }
+
+                            if (!isBlank(option.description)) {
+                                $('<div style="float: right; line-height: 32px;" class="fa fa-question-circle"></div>').appendTo(optionElement).qtip($.extend({},
+                                    {
+                                        style: {
+                                            classes: 'nifi-tooltip'
+                                        },
+                                        show: {
+                                            solo: true,
+                                            effect: function(offset) {
+                                                $(this).slideDown(100);
+                                            }
+                                        },
+                                        hide: {
+                                            effect: function(offset) {
+                                                $(this).slideUp(100);
+                                            }
+                                        },
+                                        position: {
+                                            at: 'bottom center',
+                                            my: 'top center',
+                                            adjust: {
+                                                y: 5
+                                            }
+                                        }
+                                    },
+                                    {
+                                        content: option.description,
+                                        position: {
+                                            at: 'top right',
+                                            my: 'bottom left'
+                                        }
+                                    }
+                                ));
+                            }
+
+                            actualHeight += 16;
+                        });
+
+                        // show the glass pane to catch the click events
+                        var comboGlassPane = $('<div class="combo-glass-pane"></div>').one('click', function () {
+                            if (comboOptions.length !== 0) {
+                                // clean up tooltips
+                                comboOptions.find('.fa').each(function () {
+                                    var tip = $(this);
+                                    if (tip.data('qtip')) {
+                                        var api = tip.qtip('api');
+                                        api.destroy(true);
+                                    }
+                                });
+                                // remove the options
+                                comboOptions.remove();
+
+                                //remove active styles
+                                $('.combo').removeClass('combo-open');
+                            }
+
+                            // remove the glass pane
+                            $(this).remove();
+                        });
+
+                        // add the combo to the dom
+                        $('body').append(comboOptions).append(comboGlassPane);
+
+                        // stop the event propagation so the body click event isn't fired
+                        event.stopPropagation();
+                    });
+
+                    // add the drop down arrow
+                    $('<div class="combo-arrow fa fa-chevron-down"></div>').appendTo(combo);
+
+                    // set the selection
+                    if (isDefinedAndNotNull(options.selectedOption)) {
+                        selectOption(combo, options.selectedOption.text, options.selectedOption.value);
+                    } else {
+                        selectOption(combo);
+                    }
+                }
+            });
+        },
+
+        /**
+         * Returns the selected option of the first matching element.
+         */
+        getSelectedOption: function () {
+            var value;
+
+            this.each(function () {
+                value = $(this).data('selected-option');
+                return false;
+            });
+
+            return value;
+        },
+
+        /**
+         * Sets the selected option.
+         *
+         * @argument {object} option The option to select
+         */
+        setSelectedOption: function (option) {
+            return this.each(function () {
+                selectOption($(this), option.text, option.value);
+            });
+        },
+
+        /**
+         * Sets whether the specified option is enabled or disabled.
+         * 
+         * @param option
+         * @param enabled
+         */
+        setOptionEnabled: function (option, enabled) {
+            return this.each(function () {
+                var combo = $(this);
+                var comboConfigOptions = combo.data('options');
+
+                $.each(comboConfigOptions.options, function (i, configOption) {
+                     if (configOption.value === option.value) {
+                        configOption.disabled = !enabled;   
+                     }
+                });
+            });
+        },
+
+        /**
+         * Destroys the combo.
+         */
+        destroy: function () {
+            return this.each(function () {
+                $(this).empty().unbind().removeData();
+
+                // remove the options if open
+                $('div.combo-glass-pane').click();
+            });
+        },
+
+        /**
+         * Closes the combo.
+         */
+        close: function () {
+            $('div.combo-glass-pane').click();
+        }
+    };
+
+    $.fn.combo = function (method) {
+        if (methods[method]) {
+            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+        } else {
+            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/combo/menuArrow.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/menuArrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..48c4d20fa98e0e023078b0d1bef94fceb8a63e32
GIT binary patch
literal 251
zcmeAS@N?(olHy`uVBq!ia0vp^AT}!p8<4C?sm%aVEX7WqAsj$Z!;#Vf<Z~8yL>4nJ
za0`Jj<E6WGe}IBAC9V-A!TD(=<%vb942~)JNvR5MnMJAP`9;~q3eLeMY@04G0ICxM
zsdFw$O)SaG&r=A=%uQu5Fx3YlLqkz@OC_L+U{4pv5RRG2CdS6U&pWUr2#Si9rX(cX
z@OPN2{P_R>|B^z&!m=MU%I4VD|6@G%|G%PHdP+({@EeQdV?E3~Kv2*MB9|^*dZJ5q
f_wL>N2c9s*8cQpFj@Z2yXgq_btDnm{r-UW|fe%ZO

literal 0
HcmV?d00001

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/menuArrowSmall.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/menuArrowSmall.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee380931b21506f0e7c5e9a6737fa4a9df6608cd
GIT binary patch
literal 233
zcmeAS@N?(olHy`uVBq!ia0vp^96-#%!3HEZpRM}<;uJf1hHwBu4M$1`kk47*5n0T@
zz%2yAjF;}#{Q(Nfl(<He1m~xflqVLYGB~E>C#5R5WfrBD=NDxcD>w(6ux+}$0H{t3
zq|Ui0HL)Z!KTjbfGdGpNz*HZI3=KuqEtP;O96eneLpWw8n;0AaKHtE;p`)wI%E-Xr
z&2h!|Cw~0@U*C4*hzq+;m(26?^XnTv{;%)gm6Vh`(Iu09W=3H{V`C#D!}LU9<u`w>
Rm;w!B@O1TaS?83{1OP;~N(=x1

literal 0
HcmV?d00001

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.base64.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.base64.js
new file mode 100644
index 000000000000..32ceab073fef
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.base64.js
@@ -0,0 +1,123 @@
+/*!
+ * jquery.base64.js 0.0.3 - https://github.com/yckart/jquery.base64.js
+ * Makes Base64 en & -decoding simpler as it is.
+ *
+ * Based upon: https://gist.github.com/Yaffle/1284012
+ *
+ * Copyright (c) 2012 Yannick Albert (http://yckart.com)
+ * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
+ * 2013/02/10
+ **/
+;(function($) {
+
+    var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",
+        a256 = '',
+        r64 = [256],
+        r256 = [256],
+        i = 0;
+
+    var UTF8 = {
+
+        /**
+         * Encode multi-byte Unicode string into utf-8 multiple single-byte characters
+         * (BMP / basic multilingual plane only)
+         *
+         * Chars in range U+0080 - U+07FF are encoded in 2 chars, U+0800 - U+FFFF in 3 chars
+         *
+         * @param {String} strUni Unicode string to be encoded as UTF-8
+         * @returns {String} encoded string
+         */
+        encode: function(strUni) {
+            // use regular expressions & String.replace callback function for better efficiency
+            // than procedural approaches
+            var strUtf = strUni.replace(/[\u0080-\u07ff]/g, // U+0080 - U+07FF => 2 bytes 110yyyyy, 10zzzzzz
+            function(c) {
+                var cc = c.charCodeAt(0);
+                return String.fromCharCode(0xc0 | cc >> 6, 0x80 | cc & 0x3f);
+            })
+            .replace(/[\u0800-\uffff]/g, // U+0800 - U+FFFF => 3 bytes 1110xxxx, 10yyyyyy, 10zzzzzz
+            function(c) {
+                var cc = c.charCodeAt(0);
+                return String.fromCharCode(0xe0 | cc >> 12, 0x80 | cc >> 6 & 0x3F, 0x80 | cc & 0x3f);
+            });
+            return strUtf;
+        },
+
+        /**
+         * Decode utf-8 encoded string back into multi-byte Unicode characters
+         *
+         * @param {String} strUtf UTF-8 string to be decoded back to Unicode
+         * @returns {String} decoded string
+         */
+        decode: function(strUtf) {
+            // note: decode 3-byte chars first as decoded 2-byte strings could appear to be 3-byte char!
+            var strUni = strUtf.replace(/[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g, // 3-byte chars
+            function(c) { // (note parentheses for precence)
+                var cc = ((c.charCodeAt(0) & 0x0f) << 12) | ((c.charCodeAt(1) & 0x3f) << 6) | (c.charCodeAt(2) & 0x3f);
+                return String.fromCharCode(cc);
+            })
+            .replace(/[\u00c0-\u00df][\u0080-\u00bf]/g, // 2-byte chars
+            function(c) { // (note parentheses for precence)
+                var cc = (c.charCodeAt(0) & 0x1f) << 6 | c.charCodeAt(1) & 0x3f;
+                return String.fromCharCode(cc);
+            });
+            return strUni;
+        }
+    };
+
+    while(i < 256) {
+        var c = String.fromCharCode(i);
+        a256 += c;
+        r256[i] = i;
+        r64[i] = b64.indexOf(c);
+        ++i;
+    }
+
+    function code(s, discard, alpha, beta, w1, w2) {
+        s = String(s);
+        var buffer = 0,
+            i = 0,
+            length = s.length,
+            result = '',
+            bitsInBuffer = 0;
+
+        while(i < length) {
+            var c = s.charCodeAt(i);
+            c = c < 256 ? alpha[c] : -1;
+
+            buffer = (buffer << w1) + c;
+            bitsInBuffer += w1;
+
+            while(bitsInBuffer >= w2) {
+                bitsInBuffer -= w2;
+                var tmp = buffer >> bitsInBuffer;
+                result += beta.charAt(tmp);
+                buffer ^= tmp << bitsInBuffer;
+            }
+            ++i;
+        }
+        if(!discard && bitsInBuffer > 0) result += beta.charAt(buffer << (w2 - bitsInBuffer));
+        return result;
+    }
+
+    var Plugin = $.base64 = function(dir, input, encode) {
+            return input ? Plugin[dir](input, encode) : dir ? null : this;
+        };
+
+    Plugin.btoa = Plugin.encode = function(plain, utf8encode) {
+        plain = Plugin.raw === false || Plugin.utf8encode || utf8encode ? UTF8.encode(plain) : plain;
+        plain = code(plain, false, r256, b64, 8, 6);
+        return plain + '===='.slice((plain.length % 4) || 4);
+    };
+
+    Plugin.atob = Plugin.decode = function(coded, utf8decode) {
+        coded = coded.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+        coded = String(coded).split('=');
+        var i = coded.length;
+        do {--i;
+            coded[i] = code(coded[i], true, r64, a256, 6, 8);
+        } while (i > 0);
+        coded = coded.join('');
+        return Plugin.raw === false || Plugin.utf8decode || utf8decode ? UTF8.decode(coded) : coded;
+    };
+}(jQuery));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.center.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.center.js
new file mode 100644
index 000000000000..407bd47e1e09
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.center.js
@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+/**
+ * Simple jQuery plugin to center any matched elements. Implementation
+ * specifics suggested on StackOverflow.
+ * 
+ * @param {type} $
+ * @returns {undefined}
+ */
+(function ($) {
+    $.fn.center = function () {
+        return this.each(function () {
+            $(this).css({
+                'position': 'absolute',
+                'top': ($(window).height() - $(this).outerHeight()) / 2 + $(window).scrollTop() + 'px',
+                'left': ($(window).width() - $(this).outerWidth()) / 2 + $(window).scrollLeft() + 'px'
+            });
+        });
+    };
+})(jQuery);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.count.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.count.js
new file mode 100644
index 000000000000..e61d932a4390
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.count.js
@@ -0,0 +1,99 @@
+/*
+ * 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.
+ */
+
+/**
+ * Adds a simple character counter functionality to the matched elements. The 
+ * options are specified in the following format:
+ * 
+ * {
+ *   charCountField: element or dom id for displaying the remaining characters (must support .text())
+ *   maxLength: maxlength in case the matched element does not have a max length set
+ * }
+ * 
+ * Implementation specifics suggested on StackOverflow.
+ * 
+ * @param {type} $
+ * @returns {undefined}
+ */
+(function ($) {
+
+    var isUndefined = function (obj) {
+        return typeof obj === 'undefined';
+    };
+
+    var isNull = function (obj) {
+        return obj === null;
+    };
+
+    var isDefinedAndNotNull = function (obj) {
+        return !isUndefined(obj) && !isNull(obj);
+    };
+
+    var methods = {
+        
+        /**
+         * Initializes the count widget.
+         * 
+         * @param {type} options
+         */
+        init: function (options) {
+            return this.each(function () {
+                // ensure the options have been properly specified
+                if (isDefinedAndNotNull(options) && isDefinedAndNotNull(options.charCountField)) {
+
+                    // get the field
+                    var field = $(this);
+
+                    // determine the appropriate max length
+                    var maxLength = $(field).attr('maxlength');
+                    if (isUndefined(maxLength) || isNull(maxLength)) {
+                        maxLength = options.maxLength;
+                    }
+
+                    // ensure we found a max length
+                    if (isDefinedAndNotNull(maxLength)) {
+                        // listen for keyup and blur events
+                        $(field).bind('keyup blur', function () {
+                            // get the current value
+                            var value = $(field).val();
+
+                            // determine if the length is too long
+                            if (value.length > maxLength) {
+                                // update the value accordingly
+                                $(field).val(value.slice(0, maxLength));
+
+                                // update the count field
+                                $(options.charCountField).text(0);
+                            } else {
+                                // update the count field
+                                $(options.charCountField).text(maxLength - value.length);
+                            }
+                        }).keyup();
+                    }
+                }
+            });
+        }
+    };
+
+    $.fn.count = function (method) {
+        if (methods[method]) {
+            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+        } else {
+            return methods.init.apply(this, arguments);
+        }
+    };
+})(jQuery);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.each.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.each.js
new file mode 100644
index 000000000000..90f76b880f72
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.each.js
@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+(function ($) {
+    // get a reference to the original each method
+    var origEach = $.each;
+
+    // override the jQuery each method (not $.fn.each as
+    // we are not calling with a jQuery 'instance', $.fn.each
+    // defers to this function with 'this' as the object param)
+    $.each = function (object, callback, args) {
+        // ensure the object specified is not undefined or null
+        if (typeof object !== 'undefined' && object !== null) {
+            return origEach.call(this, object, callback, args);
+        }
+        return object;
+    };
+})(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/jquery.ellipsis.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.ellipsis.js
new file mode 100644
index 000000000000..ceb95dfa8e21
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.ellipsis.js
@@ -0,0 +1,165 @@
+/*
+ * 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.
+ */
+
+/**
+ * Plugin to provide support for generating ellipsis. This plugin comprises
+ * a number of suggested techniques found on StackOverflow.
+ * 
+ * @param {type} $
+ * @returns {undefined}
+ */
+(function ($) {
+
+    var entityMap = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#39;',
+        '/': '&#x2f;'
+    };
+
+    var escapeHtml = function (string) {
+        return String(string).replace(/[&<>"'\/]/g, function (s) {
+            return entityMap[s];
+        });
+    };
+
+    /**
+     * Inserts ellipsis in elements where the contents exceed the width. The
+     * original text is preserved in the title attribute of the element. The
+     * element should have the following css properties:
+     * 
+     * overflow: hidden;
+     * white-space: nowrap;
+     * width: 50px (value must be set in 'px')
+     * 
+     * If multiline is desired, add a 'multiline' class to the element.
+     * 
+     * @param {type} addTooltip
+     */
+    $.fn.ellipsis = function (addTooltip) {
+        addTooltip = (typeof addTooltip === 'undefined' || addTooltip === null) ? true : addTooltip;
+
+        // function for determining if the browser supports ellipsis via css
+        function supportsOverflowProperty() {
+            var s = document.documentElement.style;
+            return ('textOverflow' in s || 'OTextOverflow' in s);
+        }
+
+        function binarySearch(length, funct) {
+            var low = 0;
+            var high = length - 1;
+            var best = -1;
+            var mid;
+
+            while (low <= high) {
+                mid = ~~((low + high) / 2);
+                var result = funct(mid);
+                if (result < 0) {
+                    high = mid - 1;
+                } else if (result > 0) {
+                    low = mid + 1;
+                } else {
+                    best = mid;
+                    low = mid + 1;
+                }
+            }
+
+            return best;
+        }
+
+        // chain and process each matched element
+        return this.each(function () {
+            var element = $(this);
+
+            // preserve the original text in the title attribute
+            var text = element.text();
+            if (addTooltip) {
+                element.attr('title', text);
+            }
+
+            // determine if this is a multiline element
+            var multiline = element.hasClass('multiline');
+
+            // if its not multiline and the browser supports ellipsis via css, use it
+            if (!multiline && supportsOverflowProperty()) {
+                element.css({
+                    'text-overflow': 'ellipsis',
+                    'o-text-overflow': 'ellipsis'
+                });
+            } else {
+                // clone the element and add to the body - this addresses issues where
+                // the element may not have been added to the dom (causing its size and 
+                // styles to be incorrect)
+                var cloneElement = $(this.cloneNode(true)).hide().appendTo('body');
+
+                // make a scratch element to adjusting the text size
+                var scratchElement = $(this.cloneNode(true)).hide().css({
+                    'position': 'absolute',
+                    'overflow': 'visible'
+                }).width(multiline ? cloneElement.width() : 'auto').height(multiline ? 'auto' : cloneElement.height()).appendTo('body');
+
+                // function for determining if the scratch element is too tall
+                var isTooTall = function () {
+                    return scratchElement.height() >= cloneElement.height();
+                };
+
+                // function for determining if the scratch element is too wide
+                var isTooWide = function () {
+                    return scratchElement.width() >= cloneElement.width();
+                };
+
+                // determine the appropriate function to use
+                var isTooBig = multiline ? isTooTall : isTooWide;
+
+                // if the text is too big, adjust it accordingly
+                if (isTooBig()) {
+                    var originalText = escapeHtml(text);
+
+                    // function for creating the text within the scratch element
+                    var createContent = function (i) {
+                        var t = originalText.substr(0, i);
+                        scratchElement.html(t + '&#8230;');
+                    };
+
+                    // function for performing the search
+                    var search = function (i) {
+                        createContent(i);
+                        if (isTooBig()) {
+                            return -1;
+                        }
+                        return 0;
+                    };
+
+                    // determine the appropriate length
+                    var length = binarySearch(originalText.length - 1, search);
+
+                    // create the content at the appropriate length
+                    createContent(length);
+                }
+
+                // update the actual elements value
+                element.html(scratchElement.html());
+
+                // remove the cloned and scratch elements
+                cloneElement.remove();
+                scratchElement.remove();
+            }
+        });
+    };
+})(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/jquery.tab.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.tab.js
new file mode 100644
index 000000000000..5155153e7c68
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/jquery.tab.js
@@ -0,0 +1,69 @@
+/*
+ * 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.
+ */
+/**
+ * Plugin to support entering tab characters into textarea's or textfield's. 
+ * Code heavily borrowed from stackoverflow post by user tim-down
+ * (http://stackoverflow.com/questions/4379535/tab-within-a-text-area-without-changing-focus-jquery/4380032#4380032)
+ */
+(function ($) {
+    /**
+     * Adds key listeners for capturing tab keys.
+     */
+    function allowTabChar(element) {
+        $(element).keydown(function (e) {
+            if (e.which == 9) {
+                if (e.shiftKey == false && e.ctrlKey == false) {
+                    insertText(this, '\t');
+                }
+                return false;
+            }
+        }).keypress(function (e) {
+            if (e.which == 9) {
+                return false;
+            }
+        });
+    }
+
+    /**
+     * Inserts the specified text into the specified element.
+     */
+    function insertText(element, text) {
+        element.focus();
+        if (typeof element.selectionStart == 'number') {
+            var value = element.value;
+            var selectionStart = element.selectionStart;
+            element.value = value.slice(0, selectionStart) + text + value.slice(element.selectionEnd);
+            element.selectionEnd = element.selectionStart = selectionStart + text.length;
+        } else if (typeof document.selection != 'undefined') {
+            var textRange = document.selection.createRange();
+            textRange.text = text;
+            textRange.collapse(false);
+            textRange.select();
+        }
+    }
+
+    $.fn.tab = function () {
+        return this.each(function () {
+            if (this.nodeType == 1) {
+                var nodeName = this.nodeName.toLowerCase();
+                if (nodeName == 'textarea' || (nodeName == 'input' && this.type == 'text')) {
+                    allowTabChar(this);
+                }
+            }
+        });
+    }
+})(jQuery);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
new file mode 100644
index 000000000000..d998436a189b
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
@@ -0,0 +1,94 @@
+/*
+ * 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.
+ */
+/*
+    Styles for the Nifi dialog.
+*/
+
+.dialog {
+    background-color: #ffffff;
+    box-shadow: 0 5px 8px rgba(0,0,0,0.30);
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+.small-dialog {
+    max-height: 32%;
+    max-width: 23%;
+    min-height: 250px;
+    min-width: 320px;
+    font-size: 13px;
+    line-height: 1.3;
+}
+
+.medium-dialog {
+    max-height: 55%;
+    max-width: 34%;
+    min-height: 420px;
+    min-width: 470px;
+}
+
+.large-dialog {
+    max-height: 72%;
+    max-width: 55%;
+    min-height: 560px;
+    min-width: 760px;
+}
+
+.modal-glass {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    opacity: 0.65;
+}
+
+.dialog-header {
+    height: 56px;
+    background-color: #728E9B;
+    overflow: hidden;
+}
+
+.dialog-header-text {
+    color: #fff;
+    font-size: 18px;
+    font-family: 'Roboto Slab';
+    font-style: normal;
+    font-weight: bold;
+    line-height: 56px;
+    padding-left: 20px;
+    text-overflow: ellipsis;
+}
+
+.dialog-content {
+    position: absolute;
+    top: 76px;
+    bottom: 52px;
+    left: 20px;
+    right: 20px;
+    overflow-y: auto;
+    word-wrap: break-word;
+}
+
+.dialog-buttons {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 32px;
+}
\ 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/modal/jquery.modal.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
new file mode 100644
index 000000000000..25fe57ff74e4
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
@@ -0,0 +1,578 @@
+/*
+ * 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.
+ */
+
+/**
+ * Create a new dialog.
+ *
+ * If the height, width, and fullscreen breakpoints options are not set this plugin will look for (and use)
+ * any CSS defined styles for height, min/max-height, width, min/max-width. If no CSS styles are defined then the
+ * plugin will attempt to calculate these values when the dialog is first opened (based on screen size).
+ *
+ * The options are specified in the following format:
+ *
+ * {
+ *   header: true,
+ *   footer: true,
+ *   headerText: 'Dialog Header',
+ *   scrollableContentStyle: 'scrollable',
+ *   buttons: [{
+ *      buttonText: 'Cancel',
+ *          color: {
+ *              base: '#728E9B',
+ *              hover: '#004849',
+ *              text: '#ffffff'
+ *          },
+ *          disabled: isDisabledFunction,
+ *      handler: {
+ *          click: cancelHandler
+ *      }
+ *   }, {
+ *      buttonText: 'Apply',
+ *          color: {
+ *              base: '#E3E8EB',
+ *              hover: '#C7D2D7',
+ *              text: '#004849'
+ *          },
+ *          disabled: isDisabledFunction,
+ *      handler: {
+ *          click: applyHandler
+ *      }
+ *   }],
+ *   handler: {
+ *      close: closeHandler,
+ *      open: openHandler,
+ *      resize: resizeHandler
+ *   },
+ *   height: "55%", //optional. Property can also be set with css (accepts 'px' or '%' values)
+ *   width: "34%", //optional. Property can also be set with css (accepts 'px' or '%' values)
+ *   min-height: "420px", //optional, defaults to 'height'. Property  can also be set with css (accepts 'px' values)
+ *   min-width: "470px" //optional, defaults to 'width'. Property can also be set with css (accepts 'px' values)
+ *   responsive: {
+ *       x: "true", //optional, default true
+ *       y: "true", //optional, default true
+ *       fullscreen-height: "420px", //optional, default is original dialog height (accepts 'px' values)
+ *       fullscreen-width: "470px", //optional, default is original dialog width (accepts 'px' values)
+ *      },
+ *      glasspane: "#728E9B" //optional, sets the color of modal glasspane...default if unset is the dialog header color
+ * }
+ *
+ * The content of the dialog MUST be contained in an element with the class `dialog-content`
+ * directly under the dialog element.
+ *
+ * <div id="dialogId">
+ *  <div class="dialog-content">
+ *      //Dialog Content....
+ *  </div>
+ * </div>
+ *
+ * @argument {jQuery} $
+ */
+(function ($) {
+
+    var isUndefined = function (obj) {
+        return typeof obj === 'undefined';
+    };
+
+    var isNull = function (obj) {
+        return obj === null;
+    };
+
+    var isDefinedAndNotNull = function (obj) {
+        return !isUndefined(obj) && !isNull(obj);
+    };
+
+    var isBlank = function (str) {
+        return isUndefined(str) || isNull(str) || str === '';
+    };
+
+    // private function for adding buttons
+    var addButtons = function (dialog, buttonModel) {
+        if (isDefinedAndNotNull(buttonModel)) {
+            var buttonWrapper = $('<div class="dialog-buttons"></div>');
+            $.each(buttonModel, function (i, buttonConfig) {
+                var isDisabled = function () {
+                    return typeof buttonConfig.disabled === 'function' && buttonConfig.disabled.call() === true;
+                };
+
+                // create the button
+                var button = $('<div class="button"></div>').append($('<span></span>').text(buttonConfig.buttonText));
+
+                // add the class if specified
+                if (isDefinedAndNotNull(buttonConfig.clazz)) {
+                    button.addClass(buttonConfig.clazz);
+                }
+
+                // set the color if specified
+                if (isDefinedAndNotNull(buttonConfig.color)) {
+                    button.css({
+                        'background': buttonConfig.color.base,
+                        'color': buttonConfig.color.text
+                    });
+                }
+
+                // check if the button should be disabled
+                if (isDisabled()) {
+                    button.addClass('disabled-button');
+                } else {
+                    // enable custom hover if specified
+                    if (isDefinedAndNotNull(buttonConfig.color)) {
+                        button.hover(function () {
+                            $(this).css("background-color", buttonConfig.color.hover);
+                        }, function () {
+                            $(this).css("background-color", buttonConfig.color.base);
+                        });
+                    }
+
+                    button.click(function () {
+                        var handler = $(this).data('handler');
+                        if (isDefinedAndNotNull(handler) && typeof handler.click === 'function') {
+                            handler.click.call(dialog);
+                        }
+                    });
+                }
+
+                // add the button to the wrapper
+                button.data('handler', buttonConfig.handler).appendTo(buttonWrapper);
+            });
+
+            // store the button model to refresh later
+            dialog.append(buttonWrapper).data('buttonModel', buttonModel);
+        }
+    };
+
+    var methods = {
+
+        /**
+         * Initializes the dialog.
+         *
+         * @argument {object} options The options for the plugin
+         */
+        init: function (options) {
+            return this.each(function () {
+                // get the combo
+                var dialog = $(this).addClass('dialog cancellable modal');
+                dialog.css('display', 'none');
+
+                var nfDialogData = {};
+                if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                    nfDialogData = dialog.data('nf-dialog');
+                }
+
+                // ensure the options have been properly specified
+                if (isDefinedAndNotNull(options)) {
+
+                    $.extend(nfDialogData, options);
+
+                    //persist data attribute
+                    dialog.data('nfDialog', nfDialogData);
+                }
+
+                // determine if dialog needs a header
+                if (!isDefinedAndNotNull(nfDialogData.header) || nfDialogData.header) {
+                    var dialogHeaderText = $('<span class="dialog-header-text"></span>');
+                    var dialogHeader = $('<div class="dialog-header"></div>').prepend(dialogHeaderText);
+
+                    // determine if the specified header text is null
+                    if (!isBlank(nfDialogData.headerText)) {
+                        dialogHeaderText.text(nfDialogData.headerText);
+                    }
+
+                    dialog.prepend(dialogHeader);
+                }
+
+                // determine if dialog needs footer/buttons
+                if (!isDefinedAndNotNull(nfDialogData.footer) || nfDialogData.footer) {
+                    // add the buttons
+                    addButtons(dialog, nfDialogData.buttons);
+                }
+            });
+        },
+
+        /**
+         * Sets the handler that is used when the dialog is closed.
+         *
+         * @argument {function} handler The function to call when hiding the dialog
+         */
+        setCloseHandler: function (handler) {
+            return this.each(function (index, dialog) {
+
+                var nfDialogData = {};
+                if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
+                    nfDialogData = $(dialog).data('nf-dialog');
+                }
+                if (!isDefinedAndNotNull(nfDialogData.handler)){
+                    nfDialogData.handler = {};
+                }
+                nfDialogData.handler.close = handler;
+
+                //persist data attribute
+                $(dialog).data('nfDialog', nfDialogData);
+            });
+        },
+
+        /**
+         * Sets the handler that is used when the dialog is opened.
+         *
+         * @argument {function} handler The function to call when showing the dialog
+         */
+        setOpenHandler: function (handler) {
+            return this.each(function (index, dialog) {
+
+                var nfDialogData = {};
+                if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
+                    nfDialogData = $(dialog).data('nf-dialog');
+                }
+                if (!isDefinedAndNotNull(nfDialogData.handler)){
+                    nfDialogData.handler = {};
+                }
+                nfDialogData.handler.open = handler;
+
+                //persist data attribute
+                $(dialog).data('nfDialog', nfDialogData);
+            });
+        },
+
+        /**
+         * Sets the handler that is used when the dialog is resized.
+         *
+         * @argument {function} handler The function to call when resizing the dialog
+         */
+        setResizeHandler: function (handler) {
+            return this.each(function (index, dialog) {
+
+                var nfDialogData = {};
+                if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
+                    nfDialogData = $(dialog).data('nf-dialog');
+                }
+                if (!isDefinedAndNotNull(nfDialogData.handler)){
+                    nfDialogData.handler = {};
+                }
+                nfDialogData.handler.resize = handler;
+
+                //persist data attribute
+                $(dialog).data('nfDialog', nfDialogData);
+            });
+        },
+
+        /**
+         * Updates the button model for the selected dialog.
+         *
+         * @argument {array} buttons The new button model
+         */
+        setButtonModel: function (buttons) {
+            return this.each(function () {
+                if (isDefinedAndNotNull(buttons)) {
+                    var dialog = $(this);
+
+                    // remove the current buttons
+                    dialog.children('.dialog-buttons').remove();
+
+                    // add the new buttons
+                    addButtons(dialog, buttons);
+                }
+            });
+        },
+
+        /**
+         * Refreshes the buttons with the existing model.
+         */
+        refreshButtons: function () {
+            return this.each(function () {
+                var dialog = $(this);
+                var buttons = dialog.data('buttonModel');
+
+                // remove the current buttons
+                dialog.children('.dialog-buttons').remove();
+
+                // add the new buttons
+                addButtons(dialog, buttons);
+            });
+        },
+
+        /**
+         * Sets the header text of the dialog.
+         *
+         * @argument {string} text Text to use a as a header
+         */
+        setHeaderText: function (text) {
+            return this.each(function () {
+                $(this).find('span.dialog-header-text').text(text);
+            });
+        },
+
+        resize: function () {
+            var dialog = $(this);
+            var dialogContent = dialog.find('.dialog-content');
+
+            var nfDialogData = {};
+            if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                nfDialogData = dialog.data('nf-dialog');
+            }
+
+            //initialize responsive properties
+            if (!isDefinedAndNotNull(nfDialogData.responsive)) {
+                nfDialogData.responsive = {};
+
+                if (!isDefinedAndNotNull(nfDialogData.responsive.x)) {
+                    nfDialogData.responsive.x = true;
+                }
+
+                if (!isDefinedAndNotNull(nfDialogData.responsive.y)) {
+                    nfDialogData.responsive.y = true;
+                }
+            } else {
+                if (!isDefinedAndNotNull(nfDialogData.responsive.x)) {
+                    nfDialogData.responsive.x = true;
+                } else {
+                    nfDialogData.responsive.x = (nfDialogData.responsive.x == "true" || nfDialogData.responsive.x == true) ? true : false;
+                }
+
+                if (!isDefinedAndNotNull(nfDialogData.responsive.y)) {
+                    nfDialogData.responsive.y = true;
+                } else {
+                    nfDialogData.responsive.y = (nfDialogData.responsive.y == "true" || nfDialogData.responsive.y == true) ? true : false;
+                }
+            }
+
+            if (nfDialogData.responsive.y || nfDialogData.responsive.x) {
+
+                var fullscreenHeight;
+                var fullscreenWidth;
+
+                if (isDefinedAndNotNull(nfDialogData.responsive['fullscreen-height'])) {
+                    fullscreenHeight = parseInt(nfDialogData.responsive['fullscreen-height'], 10);
+                } else {
+                    nfDialogData.responsive['fullscreen-height'] = dialog.height() + 'px';
+
+                    fullscreenHeight = parseInt(nfDialogData.responsive['fullscreen-height'], 10);
+                }
+
+                if (isDefinedAndNotNull(nfDialogData.responsive['fullscreen-width'])) {
+                    fullscreenWidth = parseInt(nfDialogData.responsive['fullscreen-width'], 10);
+                } else {
+                    nfDialogData.responsive['fullscreen-width'] = dialog.width() + 'px';
+
+                    fullscreenWidth = parseInt(nfDialogData.responsive['fullscreen-width'], 10);
+                }
+
+                if (!isDefinedAndNotNull(nfDialogData.width)) {
+                    nfDialogData.width = dialog.css('width');
+                }
+
+                if (!isDefinedAndNotNull(nfDialogData['min-width'])) {
+                    if (parseInt(dialog.css('min-width'), 10) > 0) {
+                        nfDialogData['min-width'] = dialog.css('min-width');
+                    } else {
+                        nfDialogData['min-width'] = nfDialogData.width;
+                    }
+                }
+
+                //min-width should always be set in terms of px
+                if (nfDialogData['min-width'].indexOf("%") > 0) {
+                    nfDialogData['min-width'] = ($(window).width() * (parseInt(nfDialogData['min-width'], 10) / 100)) + 'px';
+                }
+
+                if (!isDefinedAndNotNull(nfDialogData.height)) {
+                    nfDialogData.height = dialog.css('height');
+                }
+
+                if (!isDefinedAndNotNull(nfDialogData['min-height'])) {
+                    if (parseInt(dialog.css('min-height'), 10) > 0) {
+                        nfDialogData['min-height'] = dialog.css('min-height');
+                    } else {
+                        nfDialogData['min-height'] = nfDialogData.height;
+                    }
+                }
+
+                //min-height should always be set in terms of px
+                if (nfDialogData['min-height'].indexOf("%") > 0) {
+                    nfDialogData['min-height'] = ($(window).height() * (parseInt(nfDialogData['min-height'], 10) / 100)) + 'px';
+                }
+
+                //resize dialog
+                if ($(window).height() < fullscreenHeight) {
+                    if (nfDialogData.responsive.y) {
+                        dialog.css('height', '100%');
+                        dialog.css('min-height', '100%');
+                    }
+                } else {
+                    //set the dialog min-height
+                    dialog.css('min-height', nfDialogData['min-height']);
+                    if (nfDialogData.responsive.y) {
+                        //make sure nfDialogData.height is in terms of %
+                        if (nfDialogData.height.indexOf("px") > 0) {
+                            nfDialogData.height = (parseInt(nfDialogData.height, 10) / $(window).height() * 100) + '%';
+                        }
+                        dialog.css('height', nfDialogData.height);
+                    }
+                }
+
+                if ($(window).width() < fullscreenWidth) {
+                    if (nfDialogData.responsive.x) {
+                        dialog.css('width', '100%');
+                        dialog.css('min-width', '100%');
+                    }
+                } else {
+                    //set the dialog width
+                    dialog.css('min-width', nfDialogData['min-width']);
+                    if (nfDialogData.responsive.x) {
+                        //make sure nfDialogData.width is in terms of %
+                        if (nfDialogData.width.indexOf("px") > 0) {
+                            nfDialogData.width = (parseInt(nfDialogData.width, 10) / $(window).width() * 100) + '%';
+                        }
+                        dialog.css('width', nfDialogData.width);
+                    }
+                }
+
+                dialog.center();
+
+                //persist data attribute
+                dialog.data('nfDialog', nfDialogData);
+            }
+
+            //apply scrollable style if applicable
+            if (dialogContent[0].offsetHeight < dialogContent[0].scrollHeight) {
+                // your element has overflow
+                if (isDefinedAndNotNull(nfDialogData.scrollableContentStyle)) {
+                    dialogContent.addClass(nfDialogData.scrollableContentStyle);
+                }
+            } else {
+                // your element doesn't have overflow
+                if (isDefinedAndNotNull(nfDialogData.scrollableContentStyle)) {
+                    dialogContent.removeClass(nfDialogData.scrollableContentStyle);
+                }
+            }
+
+            if (isDefinedAndNotNull(nfDialogData.handler)) {
+                var handler = nfDialogData.handler.resize;
+                if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
+                    // invoke the handler
+                    handler.call(dialog);
+                }
+            }
+        },
+
+        /**
+         * Shows the dialog.
+         */
+        show: function () {
+            var dialog = $(this);
+
+            var zIndex = dialog.css('z-index');
+            if (zIndex === 'auto') {
+                if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                    zIndex = (isDefinedAndNotNull(dialog.data('nf-dialog')['z-index'])) ?
+                        dialog.data('nf-dialog')['z-index'] : 1301;
+                } else {
+                    zIndex = 1301;
+                }
+            }
+            var openDialogs = $.makeArray($('.dialog:visible'));
+            if (openDialogs.length >= 1){
+                var zVals = openDialogs.map(function(openDialog){
+                    var index;
+                    return isNaN(index = parseInt($(openDialog).css("z-index"), 10)) ? 0 : index;
+                });
+                //Add 2 so that we have room for the glass pane overlay of the new dialog
+                zIndex = Math.max.apply(null, zVals) + 2;
+            }
+            dialog.css('z-index', zIndex);
+
+            var nfDialogData = {};
+            if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                nfDialogData = dialog.data('nf-dialog');
+            }
+
+            var glasspane;
+            if (isDefinedAndNotNull(nfDialogData.glasspane)) {
+                glasspane = nfDialogData.glasspane;
+            } else {
+                nfDialogData.glasspane = glasspane = dialog.find('.dialog-header').css('background-color'); //default to header color
+            }
+
+            if(top !== window || !isDefinedAndNotNull(nfDialogData.glasspane)) {
+                nfDialogData.glasspane = glasspane = 'transparent';
+            }
+
+            if (!$('body').find("[data-nf-dialog-parent='" + dialog.attr('id') + "']").is(':visible')) {
+                //create glass pane overlay
+                $('<div></div>').attr('data-nf-dialog-parent', dialog.attr('id')).addClass("modal-glass").css({
+                    "background-color": glasspane,
+                    "z-index": zIndex - 1
+                }).appendTo($('body'));
+            }
+
+            //persist data attribute
+            dialog.data('nfDialog', nfDialogData);
+
+            return this.each(function () {
+                // show the dialog
+                if (!dialog.is(':visible')) {
+                    dialog.show();
+                    dialog.modal('resize');
+                    dialog.center();
+
+                    if (isDefinedAndNotNull(nfDialogData.handler)) {
+                        var handler = nfDialogData.handler.open;
+                        if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
+                            // invoke the handler
+                            handler.call(dialog);
+                        }
+                    }
+                }
+            });
+        },
+
+        /**
+         * Hides the dialog.
+         */
+        hide: function () {
+            return this.each(function () {
+                var dialog = $(this);
+
+                var nfDialogData = {};
+                if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                    nfDialogData = dialog.data('nf-dialog');
+                }
+
+                if (isDefinedAndNotNull(nfDialogData.handler)) {
+                    var handler = nfDialogData.handler.close;
+                    if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
+                        // invoke the handler
+                        handler.call(dialog);
+                    }
+                }
+
+                // remove the modal glass pane overlay
+                $('body').find("[data-nf-dialog-parent='" + dialog.attr('id') + "']").remove();
+
+                if (dialog.is(':visible')) {
+                    // hide the dialog
+                    dialog.hide();
+                }
+            });
+        }
+    };
+
+    $.fn.modal = function (method) {
+        if (methods[method]) {
+            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+        } else {
+            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/nfeditor/jquery.nfeditor.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.css
new file mode 100644
index 000000000000..dcf1457a80e6
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.css
@@ -0,0 +1,75 @@
+/*
+ * 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.
+ */
+/*
+    CodeMirror styles
+*/
+
+.nfel-editor .CodeMirror {
+    height: 100px;
+    border: 1px solid #aaa;
+    font-family: monospace;
+    background-color: #fff;
+    cursor: default;
+    line-height: normal;
+    min-width: 210px;
+}
+
+.nfel-editor .CodeMirror-scroll {
+    overflow-x: auto;
+    overflow-y: auto;
+}
+
+.nfel-editor .ui-resizable-se {
+    width: 16px;
+    height: 16px;
+    background-image: url(../../../images/iconResize.png);
+    background-color: #fff;
+    z-index: 6;
+}
+
+/*
+    Override some defaults...
+*/
+
+.CodeMirror-hints {
+    font-size: 13px !important;
+    z-index: 100001 !important;
+}
+
+.cm-s-default {
+    font-size: 13px;
+    font-family: monospace;
+}
+
+.cm-s-default .CodeMirror-matchingbracket {
+    color: #000 !important;
+    background-color: #aaa;
+    opacity: 0.5;
+    filter: alpha(opacity=50);
+}
+
+/*
+    Override some defaults for this instance...
+*/
+
+.nfel-editor .CodeMirror-vscrollbar {
+    bottom: 18px !important;
+}
+
+.nfel-editor .CodeMirror-hscrollbar {
+    right: 18px !important;
+}
\ 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/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
new file mode 100644
index 000000000000..8a00257cb950
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.js
@@ -0,0 +1,335 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'CodeMirror',
+                'nf'],
+            function ($, CodeMirror, nf) {
+                factory($, CodeMirror, nf);
+            });
+    } 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';
+    };
+
+    var isNull = function (obj) {
+        return obj === null;
+    };
+
+    var isDefinedAndNotNull = function (obj) {
+        return !isUndefined(obj) && !isNull(obj);
+    };
+
+    var isBlank = function (str) {
+        return isUndefined(str) || isNull(str) || str === '';
+    };
+
+    var isFunction = function (funct) {
+        return typeof funct === 'function';
+    };
+
+    var methods = {
+
+        /**
+         * 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) {
+            return this.each(function () {
+                if (isUndefined(options) || isNull(options)) {
+                    return false;
+                }
+
+                var languageId = options.languageId;
+                var languageAssist = nf[languageId];
+
+                if (isUndefined(languageAssist) || isNull(languageAssist)) {
+                    return false;
+                }
+
+                // should support resizing
+                var resizable = options.resizable === true;
+
+                // is the property sensitive
+                var sensitive = options.sensitive === true;
+
+                var content = isDefinedAndNotNull(options.content) ? options.content : '';
+                var field = $('<textarea></textarea>').text(content).appendTo($(this));
+
+                // define a mode for NiFi expression language
+                if (isFunction(languageAssist.color)) {
+                    CodeMirror.commands.autocomplete = function (cm) {
+                        if (isFunction(languageAssist.suggest)) {
+                            CodeMirror.showHint(cm, nf[languageId].suggest);
+                        }
+                    };
+
+                    CodeMirror.defineMode(languageId, nf[languageId].color);
+
+                    // is the editor read only
+                    var readOnly = options.readOnly === true;
+
+                    var editor = CodeMirror.fromTextArea(field.get(0), {
+                        mode: languageId,
+                        lineNumbers: true,
+                        matchBrackets: true,
+                        readOnly: readOnly,
+                        extraKeys: {
+                            'Ctrl-Space': 'autocomplete',
+                            'Esc': function (cm) {
+                                if (isFunction(options.escape)) {
+                                    options.escape();
+                                }
+                            },
+                            'Enter': function (cm) {
+                                if (isFunction(options.enter)) {
+                                    options.enter();
+                                }
+                            }
+                        }
+                    });
+
+                    // set the size
+                    var width = null;
+                    if (isDefinedAndNotNull(options.width)) {
+                        width = options.width;
+                    }
+                    var height = null;
+                    if (isDefinedAndNotNull(options.height)) {
+                        height = options.height;
+                    }
+                    editor.setSize(width, height);
+
+                    // store the editor instance for later
+                    $(this).data('editorInstance', editor);
+
+                    // get a reference to the codemirror
+                    var codeMirror = $(this).find('.CodeMirror');
+
+                    // reference the code portion
+                    var code = codeMirror.find('.CodeMirror-code');
+
+                    // make this resizable if specified
+                    if (resizable) {
+                        codeMirror.append('<div class="ui-resizable-handle ui-resizable-se"></div>').resizable({
+                            handles: {
+                                'se': '.ui-resizable-se'
+                            },
+                            resize: function () {
+                                editor.setSize($(this).width(), $(this).height());
+                                editor.refresh();
+                            }
+                        });
+                    }
+
+                    // handle keydown to signify the content has changed
+                    editor.on('change', function (cm, event) {
+                        codeMirror.addClass('modified');
+                    });
+
+                    // handle keyHandled to stop event propagation/default as necessary
+                    editor.on('keyHandled', function (cm, name, evt) {
+                        if (name === 'Esc') {
+                            // stop propagation of the escape event
+                            evt.stopImmediatePropagation();
+                            evt.preventDefault();
+                        }
+                    });
+
+                    // handle sensitive values differently
+                    if (sensitive) {
+                        code.addClass('sensitive');
+
+                        var handleSensitive = function (cm, event) {
+                            if (code.hasClass('sensitive')) {
+                                code.removeClass('sensitive');
+                                editor.setValue('');
+                            }
+                        };
+
+                        // remove the sensitive style if necessary
+                        editor.on('mousedown', handleSensitive);
+                        editor.on('keydown', handleSensitive);
+                    }
+
+                    // set the min width/height
+                    if (isDefinedAndNotNull(options.minWidth)) {
+                        codeMirror.resizable('option', 'minWidth', options.minWidth);
+                    }
+                    if (isDefinedAndNotNull(options.minHeight)) {
+                        codeMirror.resizable('option', 'minHeight', options.minHeight);
+                    }
+                }
+            });
+        },
+
+        /**
+         * Refreshes the editor.
+         */
+        refresh: function () {
+            return this.each(function () {
+                var editor = $(this).data('editorInstance');
+
+                // ensure the editor was initialized
+                if (isDefinedAndNotNull(editor)) {
+                    editor.refresh();
+                }
+            });
+        },
+
+        /**
+         * Sets the size of the editor.
+         *
+         * @param {integer} width
+         * @param {integer} height
+         */
+        setSize: function (width, height) {
+            return this.each(function () {
+                var editor = $(this).data('editorInstance');
+
+                // ensure the editor was initialized
+                if (isDefinedAndNotNull(editor)) {
+                    editor.setSize(width, height);
+                }
+            });
+        },
+
+        /**
+         * Gets the value of the editor in the first matching selector.
+         */
+        getValue: function () {
+            var value;
+
+            this.each(function () {
+                var editor = $(this).data('editorInstance');
+
+                // ensure the editor was initialized
+                if (isDefinedAndNotNull(editor)) {
+                    value = editor.getValue();
+                }
+
+                return false;
+            });
+
+            return value;
+        },
+
+        /**
+         * Sets the value of the editor.
+         *
+         * @param {string} value
+         */
+        setValue: function (value) {
+            return this.each(function () {
+                var editor = $(this).data('editorInstance');
+
+                // ensure the editor was initialized
+                if (isDefinedAndNotNull(editor)) {
+                    editor.setValue(value);
+
+                    // remove the modified marking since the value was reset
+                    $(this).find('.CodeMirror').removeClass('modified');
+                }
+            });
+        },
+
+        /**
+         * Sets the focus.
+         */
+        focus: function () {
+            return this.each(function () {
+                var editor = $(this).data('editorInstance');
+
+                // ensure the editor was initialized
+                if (isDefinedAndNotNull(editor)) {
+                    editor.focus();
+                }
+            });
+        },
+
+        /**
+         * Sets the focus.
+         */
+        selectAll: function () {
+            return this.each(function () {
+                var editor = $(this).data('editorInstance');
+
+                // ensure the editor was initialized
+                if (isDefinedAndNotNull(editor)) {
+                    editor.execCommand('selectAll');
+                }
+            });
+        },
+
+        /**
+         * Gets whether the value of the editor in the first matching selector has been modified.
+         */
+        isModified: function () {
+            var modified;
+
+            this.each(function () {
+                modified = $(this).find('.CodeMirror').hasClass('modified');
+                return false;
+            });
+
+            return modified;
+        },
+
+        /**
+         * Destroys the editor.
+         */
+        destroy: function () {
+            return this.removeData('editorInstance').find('.CodeMirror').removeClass('modified');
+        }
+    };
+
+    $.fn.nfeditor = function (method) {
+        if (methods[method]) {
+            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+        } else {
+            return methods.init.apply(this, arguments);
+        }
+    };
+}));
\ 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.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.css
new file mode 100644
index 000000000000..ac4478df5f32
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.css
@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+
+ul.CodeMirror-hints {
+    overflow-y: scroll;
+}
+
+div.el-section {
+    margin: 5px 0;
+}
+
+div.el-name {
+    font-weight: bold;
+    font-family: monospace;
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+div.el-header {
+    float: left;
+    width: 75px;
+    font-weight: bold;
+}
+
+ul.el-arguments {
+    margin-top: 5px;
+    list-style-type: disc;
+    list-style-position: inside;
+}
+
+span.el-argument-name {
+    font-family: monospace;
+}
+
+div.nfel-tooltip {
+    max-width: 350px;
+}
\ 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
new file mode 100644
index 000000000000..44f4b0345ed1
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/languages/nfel.js
@@ -0,0 +1,874 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+/* 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.
+     * 
+     * @param {type} args
+     * @returns {String}
+     */
+    var formatArguments = function(args) {
+        if ($.isEmptyObject(args)) {
+            return '<span class="unset">None</span>';
+        } else {
+            var formatted = '<div class="clear"></div><ul class="el-arguments">';
+            $.each(args, function(key, value) {
+                formatted += (
+                    '<li>' +
+                        '<span class="el-argument-name">' + key + '</span> - ' +
+                        value +
+                    '</li>'
+                );
+            });
+            formatted += '</ul>';
+            return formatted;
+        }
+    };
+    
+    var subjectlessFunctions = [];
+    var functions = [];
+    
+    var subjectlessFunctionRegex = new RegExp('^$');
+    var functionRegex = new RegExp('^$');
+    
+    var functionDetails = {};
+    
+    $.ajax({
+        type: 'GET',
+        url: '../nifi-docs/html/expression-language-guide.html',
+        dataType: 'html'
+    }).done(function(response) {
+        $(response).find('div.function').each(function() {
+            var elFunction = $(this);
+            
+            var name = elFunction.find('h3').text();
+            var description = elFunction.find('span.description').text();
+            var returnType = elFunction.find('span.returnType').text();
+            
+            var subject;
+            var subjectSpan = subject = elFunction.find('span.subject');
+            var subjectless = elFunction.find('span.subjectless');
+            
+            // Determine if this function supports running subjectless
+            if (subjectless.length) {
+                subjectlessFunctions.push(name);
+                subject = '<span class="unset">None</span>';
+            }
+
+            // Determine if this function supports running with a subject
+            if (subjectSpan.length) {
+                functions.push(name);
+                subject = elFunction.find('span.subject').text();
+            }
+
+            // find the arguments
+            var args = {};
+            elFunction.find('span.argName').each(function() {
+                var argName = $(this);
+                var argDescription = argName.next('span.argDesc');
+                args[argName.text()] = argDescription.text(); 
+            });
+            
+            // format the function tooltip
+            functionDetails[name] = 
+                '<div>' + 
+                    '<div class="el-name el-section">' + name + '</div>' +
+                    '<div class="el-section">' + description + '</div>' +
+                    '<div class="el-section">' + 
+                        '<div class="el-header">Arguments</div>' +
+                        formatArguments(args) + 
+                    '</div>' +
+                    '<div class="el-section">' + 
+                        '<div class="el-header">Subject</div>' +
+                        '<p>' + subject + '</p>' + 
+                        '<div class="clear"></div>' +
+                    '</div>' +
+                    '<div class="el-section">' + 
+                        '<div class="el-header">Returns</div>' +
+                        '<p>' + returnType + '</p>' +
+                        '<div class="clear"></div>' +
+                    '</div>' +
+                '</div>';
+        });
+    }).always(function() {
+        // build the regex for all functions discovered
+        subjectlessFunctionRegex = new RegExp('^((' + subjectlessFunctions.join(')|(') + '))$');
+        functionRegex = new RegExp('^((' + functions.join(')|(') + '))$');
+    });
+    
+    // valid context states
+    var SUBJECT = 'subject';
+    var FUNCTION = 'function';
+    var SUBJECT_OR_FUNCTION = 'subject-or-function';
+    var EXPRESSION = 'expression';
+    var ARGUMENTS = 'arguments';
+    var ARGUMENT = 'argument';
+    var INVALID = 'invalid';
+    
+    /**
+     * Handles dollars identifies on the stream.
+     * 
+     * @param {object} stream   The character stream
+     * @param {object} states    The states
+     */
+    var handleDollar = function (stream, states) {
+        // determine the number of sequential dollars
+        var dollarCount = 0;
+        stream.eatWhile(function (ch) {
+            if (ch === '$') {
+                dollarCount++;
+                return true;
+            }
+            return false;
+        });
+
+        // if there is an even number of consecutive dollars this expression is escaped
+        if (dollarCount % 2 === 0) {
+            // do not style an escaped expression
+            return null;
+        }
+
+        // if there was an odd number of consecutive dollars and there was more than 1
+        if (dollarCount > 1) {
+            // back up one char so we can process the start sequence next iteration
+            stream.backUp(1);
+
+            // do not style the preceeding dollars
+            return null;
+        }
+
+        // if the next character isn't the start of an expression
+        if (stream.peek() === '{') {
+            // consume the open curly
+            stream.next();
+
+            // new expression start
+            states.push({
+                context: EXPRESSION
+            });
+
+            // consume any addition whitespace
+            stream.eatSpace();
+
+            return 'bracket';
+        } else {
+            // not a valid start sequence
+            return null;
+        }
+    };
+
+    /**
+     * Handles dollars identifies on the stream.
+     * 
+     * @param {object} stream   The character stream
+     * @param {object} state    The current state
+     */
+    var handleStringLiteral = function (stream, state) {
+        var current = stream.next();
+        var foundTrailing = false;
+        var foundEscapeChar = false;
+
+        // locate a closing string delimitor
+        var foundStringLiteral = stream.eatWhile(function (ch) {
+            // we've just found the trailing delimitor, stop
+            if (foundTrailing === true) {
+                return false;
+            }
+
+            // if this is the trailing delimitor, only consume
+            // if we did not see the escape character on the 
+            // previous iteration
+            if (ch === current) {
+                foundTrailing = foundEscapeChar === false;
+            }
+
+            // reset the escape character flag
+            foundEscapeChar = false;
+
+            // if this is the escape character, set the flag
+            if (ch === '\\') {
+                foundEscapeChar = true;
+            }
+
+            // consume this character
+            return true;
+        });
+
+        // if we found the trailing delimitor
+        if (foundStringLiteral) {
+            return 'string';
+        }
+
+        // there is no trailing delimitor... clear the current context
+        state.context = INVALID;
+        stream.skipToEnd();
+        return null;
+    };
+    
+    // the api for the currently selected completion
+    var currentApi = null;
+    
+    // the identifier to cancel showing the tip for the next completion
+    var showTip = null;
+    
+    // the apis of every completion rendered
+    var apis = [];
+    
+    /**
+     * Listens for select event on the auto complete.
+     * 
+     * @param {type} completion
+     * @param {type} element
+     * @returns {undefined}
+     */
+    var select = function(completion, element) {
+        hide();
+
+        currentApi = $(element).qtip('api');
+        showTip = setTimeout(function() {
+            currentApi.show();
+        }, 500);
+    };
+    
+    /**
+     * Cancels the next tip to show, if applicable. Hides the currently
+     * visible tip, if applicable.
+     * 
+     * @returns {undefined}
+     */
+    var hide = function() {
+        if (showTip !== null) {
+            clearInterval(showTip);
+            showTip = null;
+        }
+        
+        if (currentApi !== null) {
+            currentApi.hide();  
+        }
+    };
+
+    /**
+     * Listens for close events for the auto complete.
+     * 
+     * @returns {undefined}
+     */
+    var close = function() {
+        if (showTip !== null) {
+            clearInterval(showTip);
+            showTip = null;
+        }
+        
+        // clear the current api (since its in the apis array)
+        currentApi = null;
+        
+        // destroy the tip from every applicable function
+        $.each(apis, function(_, api) {
+            api.destroy(true);
+        });
+        
+        // reset the apis
+        apis = [];
+    };
+
+    /**
+     * Renders an auto complete item.
+     * 
+     * @param {type} element
+     * @param {type} self
+     * @param {type} data
+     * @returns {undefined}
+     */
+    var renderer = function(element, self, data) {
+        var item = $('<div></div>').text(data.text);
+        var li = $(element).qtip({
+            content: functionDetails[data.text],
+            style: {
+                classes: 'nifi-tooltip nfel-tooltip',
+                tip: false,
+                width: 350
+            },
+            show: {
+                event: false,
+                effect: false
+            },
+            hide: {
+                event: false,
+                effect: false
+            },
+            position: {
+                at: 'bottom right',
+                my: 'bottom left',
+                adjust: {
+                    x: 20
+                }
+            }
+        }).append(item);
+        
+        // record the api for destruction later
+        apis.push(li.qtip('api'));
+    };
+    
+    return {
+
+        /**
+         * Returns an object that provides syntax highlighting for NiFi expression language.
+         */
+        color: function () {
+            // builds the states based off the specified initial value
+            var buildStates = function (initialStates) {
+                // each state has a context
+                var states = initialStates;
+
+                return {
+                    copy: function () {
+                        var copy = [];
+                        for (var i = 0; i < states.length; i++) {
+                            copy.push({
+                                context: states[i].context
+                            });
+                        }
+                        return copy;
+                    },
+                    get: function () {
+                        if (states.length === 0) {
+                            return {
+                                context: null
+                            };
+                        } else {
+                            return states[states.length - 1];
+                        }
+                    },
+                    push: function (state) {
+                        return states.push(state);
+                    },
+                    pop: function () {
+                        return states.pop();
+                    }
+                };
+            };
+
+            return {
+                startState: function () {
+                    // build states with an empty array
+                    return buildStates([]);
+                },
+
+                copyState: function (state) {
+                    // build states with 
+                    return buildStates(state.copy());
+                },
+
+                token: function (stream, states) {
+                    // consume any whitespace
+                    if (stream.eatSpace()) {
+                        return null;
+                    }
+
+                    // if we've hit the end of the line
+                    if (stream.eol()) {
+                        return null;
+                    }
+
+                    // get the current character
+                    var current = stream.peek();
+
+                    // if we've hit some comments... will consume the remainder of the line
+                    if (current === '#') {
+                        stream.skipToEnd();
+                        return 'comment';
+                    }
+
+                    // get the current state
+                    var state = states.get();
+
+                    // the current input is invalid
+                    if (state.context === INVALID) {
+                        stream.skipToEnd();
+                        return null;
+                    }
+
+                    // within an expression
+                    if (state.context === EXPRESSION) {
+                        var attributeOrSubjectlessFunctionExpression = /^[^'"#${}()[\],:;\/*\\\s\t\r\n0-9][^'"#${}()[\],:;\/*\\\s\t\r\n]*/;
+
+                        // attempt to extract a function name
+                        var attributeOrSubjectlessFunctionName = stream.match(attributeOrSubjectlessFunctionExpression, false);
+
+                        // if the result returned a match
+                        if (attributeOrSubjectlessFunctionName !== null && attributeOrSubjectlessFunctionName.length === 1) {
+                            // consume the entire token to better support suggest below
+                            stream.match(attributeOrSubjectlessFunctionExpression);
+
+                            // if the result returned a match and is followed by a (
+                            if (subjectlessFunctionRegex.test(attributeOrSubjectlessFunctionName) && stream.peek() === '(') {
+                                // --------------------
+                                // subjectless function
+                                // --------------------
+
+                                // context change to function
+                                state.context = ARGUMENTS;
+
+                                // style for function
+                                return 'builtin';
+                            } else {
+                                // ---------------------
+                                // attribute or function
+                                // ---------------------
+
+                                // context change to function or subject... not sure yet
+                                state.context = SUBJECT_OR_FUNCTION;
+
+                                // this could be an attribute or a partial function name... style as attribute until we know
+                                return 'variable-2';
+                            }
+                        } else if (current === '\'' || current === '"') {
+                            // --------------
+                            // string literal
+                            // --------------
+
+                            // handle the string literal
+                            var expressionStringResult = handleStringLiteral(stream, state);
+
+                            // considered a quoted variable
+                            if (expressionStringResult !== null) {
+                                // context change to function
+                                state.context = SUBJECT;
+                            }
+
+                            return expressionStringResult;
+                        } else if (current === '$') {
+                            // -----------------
+                            // nested expression
+                            // -----------------
+
+                            var expressionDollarResult = handleDollar(stream, states);
+
+                            // if we've found an embedded expression we need to...
+                            if (expressionDollarResult !== null) {
+                                // transition back to subject when this expression completes
+                                state.context = SUBJECT;
+                            }
+
+                            return expressionDollarResult;
+                        } else if (current === '}') {
+                            // -----------------
+                            // end of expression
+                            // -----------------
+
+                            // consume the close
+                            stream.next();
+
+                            // signifies the end of an expression
+                            if (typeof states.pop() === 'undefined') {
+                                return null;
+                            } else {
+                                // style as expression
+                                return 'bracket';
+                            }
+                        } else {
+                            // ----------
+                            // unexpected
+                            // ----------
+
+                            // consume to move along
+                            stream.skipToEnd();
+                            state.context = INVALID;
+
+                            // unexpected...
+                            return null;
+                        }
+                    }
+
+                    // within a subject
+                    if (state.context === SUBJECT || state.context === SUBJECT_OR_FUNCTION) {
+                        // if the next character indicates the start of a function call
+                        if (current === ':') {
+                            // -------------------------
+                            // trigger for function name
+                            // -------------------------
+
+                            // consume the colon and update the context
+                            stream.next();
+                            state.context = FUNCTION;
+
+                            // consume any addition whitespace
+                            stream.eatSpace();
+
+                            // don't style
+                            return null;
+                        } else if (current === '}') {
+                            // -----------------
+                            // end of expression
+                            // -----------------
+
+                            // consume the close
+                            stream.next();
+
+                            // signifies the end of an expression
+                            if (typeof states.pop() === 'undefined') {
+                                return null;
+                            } else {
+                                // style as expression
+                                return 'bracket';
+                            }
+                        } else {
+                            // ----------
+                            // unexpected
+                            // ----------
+
+                            // consume to move along
+                            stream.skipToEnd();
+                            state.context = INVALID;
+
+                            // unexpected...
+                            return null;
+                        }
+                    }
+
+                    // within a function
+                    if (state.context === FUNCTION) {
+                        // attempt to extract a function name
+                        var functionName = stream.match(/^[a-zA-Z]+/, false);
+
+                        // if the result returned a match
+                        if (functionName !== null && functionName.length === 1) {
+                            // consume the entire token to ensure the whole function
+                            // name is matched. this is an issue with functions like
+                            // substring and substringAfter since 'substringA' would
+                            // match the former and when we really want to autocomplete
+                            // against the latter.
+                            stream.match(/^[a-zA-Z]+/);
+
+                            // see if this matches a known function and is followed by (
+                            if (functionRegex.test(functionName) && stream.peek() === '(') {
+                                // --------
+                                // function
+                                // --------
+
+                                // change context to arugments
+                                state.context = ARGUMENTS;
+
+                                // style for function
+                                return 'builtin';
+                            } else {
+                                // ------------------------------
+                                // maybe function... not sure yet
+                                // ------------------------------
+
+                                // not sure yet... 
+                                return null;
+                            }
+                        } else {
+                            // ----------
+                            // unexpected
+                            // ----------
+
+                            // consume and move along
+                            stream.skipToEnd();
+                            state.context = INVALID;
+
+                            // unexpected...
+                            return null;
+                        }
+                    }
+
+                    // within arguments
+                    if (state.context === ARGUMENTS) {
+                        if (current === '(') {
+                            // --------------
+                            // argument start
+                            // --------------
+
+                            // consume the open paranthesis
+                            stream.next();
+
+                            // change context to handle an argument
+                            state.context = ARGUMENT;
+
+                            // start of arguments
+                            return null;
+                        } else if (current === ')') {
+                            // --------------
+                            // argument close
+                            // --------------
+
+                            // consume the close paranthesis
+                            stream.next();
+
+                            // change context to subject for potential chaining
+                            state.context = SUBJECT;
+
+                            // end of arguments
+                            return null;
+                        } else if (current === ',') {
+                            // ------------------
+                            // argument separator
+                            // ------------------
+
+                            // consume the comma
+                            stream.next();
+
+                            // change context back to argument
+                            state.context = ARGUMENT;
+
+                            // argument separator
+                            return null;
+                        } else {
+                            // ----------
+                            // unexpected
+                            // ----------
+
+                            // consume and move along
+                            stream.skipToEnd();
+                            state.context = INVALID;
+
+                            // unexpected...
+                            return null;
+                        }
+                    }
+
+                    // within a specific argument
+                    if (state.context === ARGUMENT) {
+                        if (current === '\'' || current === '"') {
+                            // --------------
+                            // string literal
+                            // --------------
+
+                            // handle the string literal
+                            var argumentStringResult = handleStringLiteral(stream, state);
+
+                            // successfully processed a string literal... 
+                            if (argumentStringResult !== null) {
+                                // change context back to arguments
+                                state.context = ARGUMENTS;
+                            }
+
+                            return argumentStringResult;
+                        } else if (stream.match(/^[-\+]?((([0-9]+\.[0-9]*)([eE][+-]?([0-9])+)?)|((\.[0-9]+)([eE][+-]?([0-9])+)?)|(([0-9]+)([eE][+-]?([0-9])+)))/)) {
+                            // -------------
+                            // Decimal value
+                            // -------------
+                            // This matches the following ANTLR spec for deciamls
+                            //
+                            // DECIMAL :     OP? ('0'..'9')+ '.' ('0'..'9')* EXP?    ^([0-9]+\.[0-9]*)([eE][+-]?([0-9])+)?
+                            //             | OP? '.' ('0'..'9')+ EXP?
+                            //             | OP? ('0'..'9')+ EXP;
+                            //
+                            // fragment OP: ('+'|'-');
+                            // fragment EXP : ('e'|'E') ('+'|'-')? ('0'..'9')+ ;
+
+                            // change context back to arguments
+                            state.context = ARGUMENTS;
+
+                            // style for decimal (use same as number)
+                            return 'number';
+                        } else if (stream.match(/^[-\+]?[0-9]+/)) {
+                            // -------------
+                            // integer value
+                            // -------------
+
+                            // change context back to arguments
+                            state.context = ARGUMENTS;
+
+                            // style for integers
+                            return 'number';
+                        } else if (stream.match(/^((true)|(false))/)) {
+                            // -------------
+                            // boolean value
+                            // -------------
+
+                            // change context back to arguments
+                            state.context = ARGUMENTS;
+
+                            // style for boolean (use same as number)
+                            return 'number';
+                        } else if (current === ')') {
+                            // ----------------------------------
+                            // argument close (zero arg function)
+                            // ----------------------------------
+
+                            // consume the close paranthesis
+                            stream.next();
+
+                            // change context to subject for potential chaining
+                            state.context = SUBJECT;
+
+                            // end of arguments
+                            return null;
+                        } else if (current === '$') {
+                            // -----------------
+                            // nested expression
+                            // -----------------
+
+                            // handle the nested expression
+                            var argumentDollarResult = handleDollar(stream, states);
+
+                            // if we've found an embedded expression we need to...
+                            if (argumentDollarResult !== null) {
+                                // transition back to arguments when then expression completes
+                                state.context = ARGUMENTS;
+                            }
+
+                            return argumentDollarResult;
+                        } else {
+                            // ----------
+                            // unexpected
+                            // ----------
+
+                            // consume and move along
+                            stream.skipToEnd();
+                            state.context = INVALID;
+
+                            // unexpected...
+                            return null;
+                        }
+                    }
+
+                    // signifies the potential start of an expression
+                    if (current === '$') {
+                        return handleDollar(stream, states);
+                    }
+
+                    // signifies the end of an expression
+                    if (current === '}') {
+                        stream.next();
+                        if (typeof states.pop() === 'undefined') {
+                            return null;
+                        } else {
+                            return 'bracket';
+                        }
+                    }
+
+                    // ----------------------------------------------------------
+                    // extra characters that are around expression[s] end up here
+                    // ----------------------------------------------------------
+
+                    // consume the character to keep things moving along
+                    stream.next();
+                    return;
+                }
+            };
+        },
+
+        /**
+         * Returns the suggestions for the content at the current cursor.
+         * 
+         * @param {type} editor
+         */
+        suggest: function (editor) {
+            // Find the token at the cursor
+            var cursor = editor.getCursor();
+            var token = editor.getTokenAt(cursor);
+            var includeAll = false;
+            var state = token.state.get();
+
+            // whether or not the current context is within a function
+            var isFunction = function (context) {
+                // attempting to match a function name or already successfully matched a function name
+                return context === FUNCTION || context === ARGUMENTS;
+            };
+
+            // whether or not the current context is within a subject-less funciton
+            var isSubjectlessFunction = function (context) {
+                // within an expression when no characters are found or when the string may be an attribute or a function
+                return context === EXPRESSION || context === SUBJECT_OR_FUNCTION;
+            };
+
+            // only support suggestion in certain cases
+            var context = state.context;
+            if (!isSubjectlessFunction(context) && !isFunction(context)) {
+                return null;
+            }
+
+            // lower case for case insensitive comparison
+            var value = token.string.toLowerCase();
+
+            // trim to ignore extra whitespace
+            var trimmed = $.trim(value);
+
+            // identify potential patterns and increment the start location appropriately
+            if (trimmed === '${' || trimmed === ':') {
+                includeAll = true;
+                token.start += value.length;
+            }
+
+            var getCompletions = function(functions) {
+                var found = [];
+
+                $.each(functions, function (i, funct) {
+                    if ($.inArray(funct, found) === -1) {
+                        if (includeAll || funct.toLowerCase().indexOf(value) === 0) {
+                            found.push({
+                                text: funct,
+                                render: renderer
+                            });
+                        }
+                    }
+                });
+
+                return found;
+            };
+
+            // get the suggestions for the current context
+            var completionList = getCompletions(isSubjectlessFunction(context) ? subjectlessFunctions : functions);
+            completionList = completionList.sort(function (a, b) {
+                var aLower = a.text.toLowerCase();
+                var bLower = b.text.toLowerCase();
+                return aLower === bLower ? 0 : aLower > bLower ? 1 : -1;
+            });
+
+            var completions = {
+                list: completionList,
+                from: {
+                    line: cursor.line,
+                    ch: token.start
+                },
+                to: {
+                    line: cursor.line,
+                    ch: token.end
+                }
+            };
+
+            CodeMirror.on(completions, 'select', select);
+            CodeMirror.on(completions, 'close', close);
+
+            return completions;
+        }
+    };
+}));
\ 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/buttonNewProperty.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/buttonNewProperty.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e51a153069813db95ba0c298d59af8504a73122
GIT binary patch
literal 590
zcmV-U0<ryxP)<h;3K|Lk000e1NJLTq001Tc000vR1^@s6{EC0D00004b3#c}2nYxW
zd<bNS00009a7bBm000W`000W`0Ya=am;e9(9CSrkbW?9;ba!ELWdK2BZ(?O2Mrm?o
zcW-iQb09-gGzPNMpa1{>7IZ~ebVG7wVRUJ4ZXi@?ZDjy3H7_wSFEKFCBDYfj00E{+
zL_t(YiOrV3PQx$|#?Nu5Ed7(b07DlRRt5$JIuL|}gb*-*#7lr!C`=Vk!N39oT@YE|
z0a&wSWp0(anW`d!&6MDaW4Bd3^d{fk=U=`!P8<?NkpN5Kx~?r0)Z#dXAPANQg<%M;
z>sn*g0021WOT+T8#i{`S2qD069HluLjg*?_c}6ojR+1!2&G&sRt5`8gsUjkTKp1@$
zd9bktgb<@K6YJ$OF7m_8bt9`VR&|$-<G^J4jq)m8*_aL1>Kmh!Dtn4j3X|y+<!PEC
zjpuoaF@WklC9|qDzVEBX^5{LkD?nZE`nZG4l*f0EZ(3Hl*FD=q^NY7K4|%!g4SBvT
zR<UA(!2lRz3&DoNA!J#GYMgUOl4M~PV+`f!Q3@g8@?Z-IZl6B>$0s|eCxlQwsCmvg
zhwf<y^{yUXi}C%%zA{f{A!GG=9f`-|G5ln|XmYdJtTa;28;u64GsYBFtJTu7j7L({
zMQ0s3wpgoeOn#H(5JJGs(KgC;T3Ms3_s)0cW*Jwkyyr~XS^e^!o5fn~-=2QIzci@b
cZi7wMAK*1zbtJYD761SM07*qoM6N<$f+sZg#{d8T

literal 0
HcmV?d00001

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
new file mode 100644
index 000000000000..560ba2e64713
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
@@ -0,0 +1,122 @@
+/*
+ * 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.
+ */
+
+/*
+    Styles for the property table.
+*/
+
+div.required-property-note {
+    font-weight: bold;
+    font-size: 12px;
+    float: left;
+    height: 28px;
+    line-height: 28px;
+    margin-left: 6px;
+}
+
+div.add-property {
+    float: right;
+    margin-bottom: 4px;
+    font-size: 16px;
+    text-transform: uppercase;
+}
+
+div.add-property-text {
+    float: left;
+    margin-left: 5px;
+    height: 19px;
+    line-height: 19px;
+    color: #262626;
+}
+
+div.property-table {
+    position: absolute;
+    top: 42px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    min-height: 150px;
+}
+
+.property-table .fa {
+    float: right;
+    color: #004849;
+    line-height: 18px;
+}
+
+/*
+    New property dialog
+*/
+
+div.new-property-button-container {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
+/*
+    Styles for the property editor.
+*/
+
+div.slickgrid-nfel-editor .nfel-editor, div.property-detail .nfel-editor {
+    margin-bottom: 5px;
+    margin-top: 10px;
+}
+
+div.edit-property-value {
+    height: 20px;
+    padding-right: 60px;
+}
+
+textarea.value-field {
+    float: left;
+    width: 95%;
+    height: 26px;
+    font-size: 11px !important;
+    resize: vertical;
+    overflow-y: auto;
+
+}
+
+div.string-check-container {
+    line-height: 20px;
+}
+
+div.string-check {
+    width: 12px;
+    height: 12px;
+    margin-top: 3px;
+}
+
+span.string-check-label {
+    font-size: 13px;
+    font-weight: normal;
+    color: #262626;
+}
+
+div.value pre {
+    overflow: hidden;
+}
+
+/*
+    Table styles
+*/
+
+td.right-border {
+    border-right: 1px solid #aaa;
+}
\ 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
new file mode 100644
index 000000000000..7cac90d0e00d
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
@@ -0,0 +1,1928 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  /* 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,
+                        nfCommon,
+                        nfUniversalCapture,
+                        nfDialog,
+                        nfClient,
+                        nfErrorHandler,
+                        nfProcessGroupConfiguration,
+                        nfSettings) {
+                  factory($,
+                      Slick,
+                      nfCommon,
+                      nfUniversalCapture,
+                      nfDialog,
+                      nfClient,
+                      nfErrorHandler,
+                      nfProcessGroupConfiguration,
+                      nfSettings);
+              });
+      } 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,
+                    nfCommon,
+                    nfUniversalCapture,
+                    nfDialog,
+                    nfClient,
+                    nfErrorHandler,
+                    nfProcessGroupConfiguration,
+                    nfSettings) {
+  
+        var languageId = 'nfel';
+        var editorClass = languageId + '-editor';
+        var groupId = null;
+    
+        // text editor
+        var textEditor = function (args) {
+            var scope = this;
+            var initialValue = '';
+            var previousValue;
+            var propertyDescriptor;
+            var wrapper;
+            var isEmpty;
+            var input;
+    
+            this.init = function () {
+                var container = $('body');
+    
+                // get the property descriptor
+                var gridContainer = $(args.grid.getContainerNode());
+                var descriptors = gridContainer.data('descriptors');
+                propertyDescriptor = descriptors[args.item.property];
+    
+                // record the previous value
+                previousValue = args.item[args.column.field];
+    
+                // create the wrapper
+                wrapper = $('<div></div>').addClass('slickgrid-editor').css({
+                    'z-index': 100000,
+                    'position': 'absolute',
+                    'border-radius': '2px',
+                    'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
+                    'background-color': 'rgb(255, 255, 255)',
+                    'overflow': 'hidden',
+                    'padding': '10px 20px',
+                  'cursor': 'move',
+                  'transform': 'translate3d(0px, 0px, 0px)'
+                }).appendTo(container);
+    
+                // create the input field
+                input = $('<textarea hidefocus rows="5"/>').css({
+                    'height': '80px',
+                    'width': args.position.width + 'px',
+                    'min-width': '212px',
+                    'margin-bottom': '5px',
+                  'margin-top': '10px',
+                  'white-space': 'pre'
+                }).tab().on('keydown', scope.handleKeyDown).appendTo(wrapper);
+    
+                wrapper.draggable({
+                    cancel: '.button, textarea, .nf-checkbox',
+                    containment: 'parent'
+                });
+    
+                // create the button panel
+                var stringCheckPanel = $('<div class="string-check-container">');
+                stringCheckPanel.appendTo(wrapper);
+    
+                // build the custom checkbox
+                isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel);
+              $('<span class="string-check-label nf-checkbox-label">&nbsp;' + nf._.msg('jquery-propertytable.SetEmptyString') + '</span>').appendTo(stringCheckPanel);
+    
+                var ok = $('<div class="button">Ok</div>').css({
+                    'color': '#fff',
+                    'background': '#728E9B'
+                }).hover(
+                    function () {
+                        $(this).css('background', '#004849');
+                    }, function () {
+                        $(this).css('background', '#728E9B');
+                    }).on('click', scope.save);
+              var cancel = $('<div class="secondary-button">' + nf._.msg('jquery-propertytable.Cancel') + '</div>').css({
+                    'color': '#004849',
+                    'background': '#E3E8EB'
+                }).hover(
+                    function () {
+                        $(this).css('background', '#C7D2D7');
+                    }, function () {
+                        $(this).css('background', '#E3E8EB');
+                    }).on('click', scope.cancel);
+                $('<div></div>').css({
+                    'position': 'relative',
+                    'top': '10px',
+                    'left': '20px',
+                    'width': '212px',
+                    'clear': 'both',
+                    'float': 'right'
+                }).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
+    
+                // position and focus
+                scope.position(args.position);
+                input.focus().select();
+            };
+    
+            this.handleKeyDown = function (e) {
+                if (e.which === $.ui.keyCode.ENTER && !e.shiftKey) {
+                    scope.save();
+                } else if (e.which === $.ui.keyCode.ESCAPE) {
+                    scope.cancel();
+    
+                    // prevent further propagation or escape press and prevent default behavior
+                    e.stopImmediatePropagation();
+                    e.preventDefault();
+                }
+            };
+    
+            this.save = function () {
+                args.commitChanges();
+            };
+    
+            this.cancel = function () {
+                input.val(initialValue);
+                args.cancelChanges();
+            };
+    
+            this.hide = function () {
+                wrapper.hide();
+            };
+    
+            this.show = function () {
+                wrapper.show();
+            };
+    
+            this.position = function (position) {
+                wrapper.css({
+                    'top': position.top - 27,
+                    'left': position.left - 20
+                });
+            };
+    
+            this.destroy = function () {
+                wrapper.remove();
+            };
+    
+            this.focus = function () {
+                input.focus();
+            };
+    
+            this.loadValue = function (item) {
+                // determine if this is a sensitive property
+                var isEmptyChecked = false;
+              var sensitive = nfCommon.isSensitiveProperty(propertyDescriptor);
+    
+                // determine the value to use when populating the text field
+              if (nfCommon.isDefinedAndNotNull(item[args.column.field])) {
+                    if (sensitive) {
+                      initialValue = nfCommon.config.sensitiveText;
+                    } else {
+                        initialValue = item[args.column.field];
+                        isEmptyChecked = initialValue === '';
+                    }
+                }
+    
+                // determine if its an empty string
+                var checkboxStyle = isEmptyChecked ? 'checkbox-checked' : 'checkbox-unchecked';
+                isEmpty.addClass(checkboxStyle);
+    
+                // style sensitive properties differently
+                if (sensitive) {
+                    input.addClass('sensitive').keydown(function () {
+                        var sensitiveInput = $(this);
+                        if (sensitiveInput.hasClass('sensitive')) {
+                            sensitiveInput.removeClass('sensitive');
+                          if (sensitiveInput.val() === nfCommon.config.sensitiveText) {
+                                sensitiveInput.val('');
+                            }
+                        }
+                    });
+                }
+    
+                input.val(initialValue);
+                input.select();
+            };
+    
+            this.serializeValue = function () {
+                // if the field has been cleared, set the value accordingly
+                if (input.val() === '') {
+                    // if the user has checked the empty string checkbox, use emtpy string
+                    if (isEmpty.hasClass('checkbox-checked')) {
+                        return '';
+                    } else {
+                        // otherwise if the property is required
+                      if (nfCommon.isRequiredProperty(propertyDescriptor)) {
+                          if (nfCommon.isBlank(propertyDescriptor.defaultValue)) {
+                                return previousValue;
+                            } else {
+                                return propertyDescriptor.defaultValue;
+                            }
+                        } else {
+                            // if the property is not required, clear the value
+                            return null;
+                        }
+                    }
+                } else {
+                    // if the field still has the sensitive class it means a property
+                    // was edited but never modified so we should restore the previous
+                    // value instead of setting it to the 'sensitive value set' string
+                    if (input.hasClass('sensitive')) {
+                        return previousValue;
+                    } else {
+                        // if there is text specified, use that value
+                        return input.val();
+                    }
+                }
+            };
+    
+            this.applyValue = function (item, state) {
+                item[args.column.field] = state;
+            };
+    
+            this.isValueChanged = function () {
+                return scope.serializeValue() !== previousValue;
+            };
+    
+            this.validate = function () {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+    
+            // initialize the custom long text editor
+            this.init();
+        };
+    
+        // nfel editor
+        var nfelEditor = function (args) {
+            var scope = this;
+            var initialValue = '';
+            var previousValue;
+            var propertyDescriptor;
+            var isEmpty;
+            var wrapper;
+            var editor;
+    
+            this.init = function () {
+                var container = $('body');
+    
+                // get the property descriptor
+                var gridContainer = $(args.grid.getContainerNode());
+                var descriptors = gridContainer.data('descriptors');
+                propertyDescriptor = descriptors[args.item.property];
+    
+                // determine if this is a sensitive property
+              var sensitive = nfCommon.isSensitiveProperty(propertyDescriptor);
+    
+                // record the previous value
+                previousValue = args.item[args.column.field];
+    
+                var languageId = 'nfel';
+                var editorClass = languageId + '-editor';
+    
+                // create the wrapper
+                wrapper = $('<div></div>').addClass('slickgrid-nfel-editor').css({
+                    'z-index': 14000,
+                    'position': 'absolute',
+                    'padding': '10px 20px',
+                    'overflow': 'hidden',
+                    'border-radius': '2px',
+                    'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
+                    'background-color': 'rgb(255, 255, 255)',
+                  'cursor': 'move',
+                  'transform': 'translate3d(0px, 0px, 0px)'
+                }).draggable({
+                    cancel: 'input, textarea, pre, .nf-checkbox, .button, .' + editorClass,
+                    containment: 'parent'
+                }).appendTo(container);
+    
+                // create the editor
+                editor = $('<div></div>').addClass(editorClass).appendTo(wrapper).nfeditor({
+                    languageId: languageId,
+                    width: (args.position.width < 212) ? 212 : args.position.width,
+                    minWidth: 212,
+                    minHeight: 100,
+                    resizable: true,
+                    sensitive: sensitive,
+                    escape: function () {
+                        scope.cancel();
+                    },
+                    enter: function () {
+                        scope.save();
+                    }
+                });
+    
+                // create the button panel
+                var stringCheckPanel = $('<div class="string-check-container">');
+                stringCheckPanel.appendTo(wrapper);
+    
+                // build the custom checkbox
+                isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel);
+              $('<span class="string-check-label nf-checkbox-label">&nbsp;' + nf._.msg('jquery-propertytable.SetEmptyString') + '</span>').appendTo(stringCheckPanel);
+    
+              var ok = $('<div class="button">' + nf._.msg('jquery-propertytable.Ok') + '</div>').css({
+                    'color': '#fff',
+                    'background': '#728E9B'
+                }).hover(
+                    function () {
+                        $(this).css('background', '#004849');
+                    }, function () {
+                        $(this).css('background', '#728E9B');
+                    }).on('click', scope.save);
+              var cancel = $('<div class="secondary-button">' + nf._.msg('jquery-propertytable.Cancel') + '</div>').css({
+                    'color': '#004849',
+                    'background': '#E3E8EB'
+                }).hover(
+                    function () {
+                        $(this).css('background', '#C7D2D7');
+                    }, function () {
+                        $(this).css('background', '#E3E8EB');
+                    }).on('click', scope.cancel);
+                $('<div></div>').css({
+                    'position': 'relative',
+                    'top': '10px',
+                    'left': '20px',
+                    'width': '212px',
+                    'clear': 'both',
+                    'float': 'right'
+                }).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
+    
+                // position and focus
+                scope.position(args.position);
+                editor.nfeditor('focus').nfeditor('selectAll');
+            };
+    
+            this.save = function () {
+                args.commitChanges();
+            };
+    
+            this.cancel = function () {
+                editor.nfeditor('setValue', initialValue);
+                args.cancelChanges();
+            };
+    
+            this.hide = function () {
+                wrapper.hide();
+            };
+    
+            this.show = function () {
+                wrapper.show();
+                editor.nfeditor('refresh');
+            };
+    
+            this.position = function (position) {
+                wrapper.css({
+                  'top': position.top - 21,
+                  'left': position.left - 43
+                });
+            };
+    
+            this.destroy = function () {
+                editor.nfeditor('destroy');
+                wrapper.remove();
+            };
+    
+            this.focus = function () {
+                editor.nfeditor('focus');
+            };
+    
+            this.loadValue = function (item) {
+                // determine if this is a sensitive property
+                var isEmptyChecked = false;
+              var sensitive = nfCommon.isSensitiveProperty(propertyDescriptor);
+    
+                // determine the value to use when populating the text field
+              if (nfCommon.isDefinedAndNotNull(item[args.column.field])) {
+                    if (sensitive) {
+                      initialValue = nfCommon.config.sensitiveText;
+                    } else {
+                        initialValue = item[args.column.field];
+                        isEmptyChecked = initialValue === '';
+                    }
+                }
+    
+                // determine if its an empty string
+                var checkboxStyle = isEmptyChecked ? 'checkbox-checked' : 'checkbox-unchecked';
+                isEmpty.addClass(checkboxStyle);
+    
+                editor.nfeditor('setValue', initialValue).nfeditor('selectAll');
+            };
+    
+            this.serializeValue = function () {
+                var value = editor.nfeditor('getValue');
+    
+                // if the field has been cleared, set the value accordingly
+                if (value === '') {
+                    // if the user has checked the empty string checkbox, use emtpy string
+                    if (isEmpty.hasClass('checkbox-checked')) {
+                        return '';
+                    } else {
+                        // otherwise if the property is required
+                      if (nfCommon.isRequiredProperty(propertyDescriptor)) {
+                          if (nfCommon.isBlank(propertyDescriptor.defaultValue)) {
+                                return previousValue;
+                            } else {
+                                return propertyDescriptor.defaultValue;
+                            }
+                        } else {
+                            // if the property is not required, clear the value
+                            return null;
+                        }
+                    }
+                } else {
+                    // if the field still has the sensitive class it means a property
+                    // was edited but never modified so we should restore the previous
+                    // value instead of setting it to the 'sensitive value set' string
+    
+                    // if the field hasn't been modified return the previous value... this
+                    // is important because sensitive properties contain the text 'sensitive
+                    // value set' which is cleared when the value is edited. we do not
+                    // want to actually use this value
+                    if (editor.nfeditor('isModified') === false) {
+                        return previousValue;
+                    } else {
+                        // if there is text specified, use that value
+                        return value;
+                    }
+                }
+            };
+    
+            this.applyValue = function (item, state) {
+                item[args.column.field] = state;
+            };
+    
+            this.isValueChanged = function () {
+                return scope.serializeValue() !== previousValue;
+            };
+    
+            this.validate = function () {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+    
+            // initialize the custom long nfel editor
+            this.init();
+        };
+    
+        // combo editor
+        var comboEditor = function (args) {
+            var scope = this;
+            var initialValue = null;
+            var wrapper;
+            var combo;
+            var propertyDescriptor;
+    
+            this.init = function () {
+                var container = $('body');
+    
+                // get the property descriptor
+                var gridContainer = $(args.grid.getContainerNode());
+                var descriptors = gridContainer.data('descriptors');
+                propertyDescriptor = descriptors[args.item.property];
+    
+                // get the options
+                var propertyContainer = gridContainer.closest('.property-container');
+                var configurationOptions = propertyContainer.data('options');
+    
+                // create the wrapper
+                wrapper = $('<div class="combo-editor"></div>').css({
+                    'z-index': 1999,
+                    'position': 'absolute',
+                    'padding': '10px 20px',
+                    'overflow': 'hidden',
+                    'border-radius': '2px',
+                    'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
+                    'background-color': 'rgb(255, 255, 255)',
+                  'cursor': 'move',
+                  'transform': 'translate3d(0px, 0px, 0px)'
+                }).draggable({
+                    cancel: '.button, .combo',
+                    containment: 'parent'
+                }).appendTo(container);
+    
+                // check for allowable values which will drive which editor to use
+              var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
+    
+                // show the output port options
+                var options = [];
+                if (propertyDescriptor.required === false) {
+                    options.push({
+                      text: nf._.msg('jquery-propertytable.NoValueSet'),
+                        value: null,
+                        optionClass: 'unset'
+                    });
+                }
+                if ($.isArray(allowableValues)) {
+                    $.each(allowableValues, function (i, allowableValueEntity) {
+                        var allowableValue = allowableValueEntity.allowableValue;
+                        options.push({
+                            text: allowableValue.displayName,
+                            value: allowableValue.value,
+                            disabled: allowableValueEntity.canRead === false && allowableValue.value !== args.item['previousValue'],
+                          description: nfCommon.escapeHtml(allowableValue.description)
+                        });
+                    });
+                }
+    
+                // ensure the options there is at least one option
+                if (options.length === 0) {
+                    options.push({
+                      text: nf._.msg('jquery-propertytable.NoValueSet'),
+                        value: null,
+                        optionClass: 'unset',
+                        disabled: true
+                    });
+                }
+    
+                // if this descriptor identifies a controller service, provide a way to create one
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService)) {
+                    options.push({
+                      text: nf._.msg('jquery-propertytable.Message3'),
+                        value: undefined,
+                        optionClass: 'unset'
+                    });
+                }
+    
+                // determine the max height
+                var position = args.position;
+                var windowHeight = $(window).height();
+                var maxHeight = windowHeight - position.bottom - 16;
+    
+                // build the combo field
+                combo = $('<div class="value-combo combo"></div>').combo({
+                    options: options,
+                    maxHeight: maxHeight,
+                    select: function (option) {
+                        if (typeof option.value === 'undefined') {
+                            // cancel the current edit
+                            scope.cancel();
+    
+                            // prompt for the new service type
+                            promptForNewControllerService(gridContainer, args.grid, args.item, propertyDescriptor.identifiesControllerService, configurationOptions);
+                        }
+                    }
+                }).css({
+                    'margin-top': '10px',
+                    'margin-bottom': '10px',
+                  'width': ((position.width - 16) < 212) ? 212 : (position.width - 16) + 'px'
+              }).appendTo(wrapper);
+    
+                // add buttons for handling user input
+              var cancel = $('<div class="secondary-button">'+nf._.msg('jquery-propertytable.Cancel')+'</div>').css({
+                    'color': '#004849',
+                    'background': '#E3E8EB'
+                }).hover(
+                    function () {
+                        $(this).css('background', '#C7D2D7');
+                    }, function () {
+                        $(this).css('background', '#E3E8EB');
+                    }).on('click', scope.cancel);
+              var ok = $('<div class="button">' + nf._.msg('jquery-propertytable.Ok') + '</div>').css({
+                    'color': '#fff',
+                    'background': '#728E9B'
+                }).hover(
+                    function () {
+                        $(this).css('background', '#004849');
+                    }, function () {
+                        $(this).css('background', '#728E9B');
+                    }).on('click', scope.save);
+    
+                $('<div></div>').css({
+                    'position': 'relative',
+                    'top': '10px',
+                    'left': '20px',
+                    'width': '212px',
+                    'clear': 'both',
+                    'float': 'right'
+                }).append(ok).append(cancel).appendTo(wrapper);
+    
+                // position and focus
+                scope.position(position);
+            };
+    
+            this.save = function () {
+                args.commitChanges();
+            };
+    
+            this.cancel = function () {
+                args.cancelChanges();
+            };
+    
+            this.hide = function () {
+                wrapper.hide();
+            };
+    
+            this.show = function () {
+                wrapper.show();
+            };
+    
+            this.position = function (position) {
+                wrapper.css({
+                    'top': position.top - 24,
+                    'left': position.left - 20
+                });
+            };
+    
+            this.destroy = function () {
+                combo.combo('destroy');
+                wrapper.remove();
+            };
+    
+            this.focus = function () {
+            };
+    
+            this.loadValue = function (item) {
+                // select as appropriate
+              if (!nfCommon.isUndefined(item.value)) {
+                    initialValue = item.value;
+    
+                    combo.combo('setSelectedOption', {
+                        value: item.value
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(propertyDescriptor.defaultValue)) {
+                    initialValue = propertyDescriptor.defaultValue;
+    
+                    combo.combo('setSelectedOption', {
+                        value: propertyDescriptor.defaultValue
+                    });
+                }
+            };
+    
+            this.serializeValue = function () {
+                var selectedOption = combo.combo('getSelectedOption');
+                return selectedOption.value;
+            };
+    
+            this.applyValue = function (item, state) {
+                item[args.column.field] = state;
+            };
+    
+            this.isValueChanged = function () {
+                var selectedOption = combo.combo('getSelectedOption');
+                return (!(selectedOption.value === "" && initialValue === null)) && (selectedOption.value !== initialValue);
+            };
+    
+            this.validate = function () {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+    
+            // initialize the custom long text editor
+            this.init();
+        };
+    
+        /**
+         * Shows the property value for the specified row and cell.
+         *
+         * @param {type} propertyGrid
+         * @param {type} descriptors
+         * @param {type} row
+         * @param {type} cell
+         */
+        var showPropertyValue = function (propertyGrid, descriptors, row, cell) {
+            // remove any currently open detail dialogs
+          nfUniversalCapture.removeAllPropertyDetailDialogs();
+    
+            // get the property in question
+            var propertyData = propertyGrid.getData();
+            var property = propertyData.getItem(row);
+    
+            // ensure there is a value
+          if (nfCommon.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 (!nfCommon.isSensitiveProperty(propertyDescriptor)) {
+    
+                    // get details about the location of the cell
+                    var cellNode = $(propertyGrid.getCellNode(row, cell));
+                    var offset = cellNode.offset();
+    
+                    // create the wrapper
+                    var wrapper = $('<div class="property-detail"></div>').css({
+                        'z-index': 1999,
+                        'position': 'absolute',
+                      'padding': '10px 20px',
+                        'overflow': 'hidden',
+                        'border-radius': '2px',
+                        'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
+                        'background-color': 'rgb(255, 255, 255)',
+                        'cursor': 'move',
+                      'transform': 'translate3d(0px, 0px, 0px)',
+                      'top': offset.top - 24,
+                      'left': offset.left - 20
+                    }).appendTo('body');
+    
+                  var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
+                    if ($.isArray(allowableValues)) {
+                        // prevent dragging over the combo
+                        wrapper.draggable({
+                            cancel: '.button, .combo',
+                            containment: 'parent'
+                        });
+    
+                        // create the read only options
+                        var options = [];
+                        $.each(allowableValues, function (i, allowableValueEntity) {
+                            var allowableValue = allowableValueEntity.allowableValue;
+                            options.push({
+                                text: allowableValue.displayName,
+                                value: allowableValue.value,
+                              description: nfCommon.escapeHtml(allowableValue.description),
+                                disabled: true
+                            });
+                        });
+    
+                        // ensure the options there is at least one option
+                        if (options.length === 0) {
+                            options.push({
+                              text: nf._.msg('jquery-propertytable.NoValueSet'),
+                                value: null,
+                                optionClass: 'unset',
+                                disabled: true
+                            });
+                        }
+    
+                        // determine the max height
+                        var windowHeight = $(window).height();
+                        var maxHeight = windowHeight - (offset.top + cellNode.height()) - 16;
+                        var width = cellNode.width() - 16;
+    
+                        // build the combo field
+                      $('<div class="value-combo combo"></div>').css({
+                          'width': width,
+                          'margin-top': '10px',
+                          'margin-bottom': '10px'
+                      }).combo({
+                            options: options,
+                            maxHeight: maxHeight,
+                            selectedOption: {
+                                value: property.value
+                            }
+                        }).appendTo(wrapper);
+    
+                      $('<div class="button">Ok</div>').css({
+                          'position': 'relative',
+                          'top': '10px',
+                          'left': '20px'
+                        }).hover(
+                            function () {
+                                $(this).css('background', '#004849');
+                            }, function () {
+                                $(this).css('background', '#728E9B');
+                            }).on('click', function () {
+                            wrapper.hide().remove();
+                        }).appendTo(wrapper);
+                    } else {
+                        var editor = null;
+    
+                        // so the nfel editor is appropriate
+                      if (nfCommon.supportsEl(propertyDescriptor)) {
+                            var languageId = 'nfel';
+                            var editorClass = languageId + '-editor';
+    
+                            // prevent dragging over the nf editor
+                          wrapper.css({
+                              'z-index': 1999,
+                              'position': 'absolute',
+                              'padding': '10px 20px',
+                              'overflow': 'hidden',
+                              'border-radius': '2px',
+                              'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
+                              'background-color': 'rgb(255, 255, 255)',
+                              'cursor': 'move',
+                              'transform': 'translate3d(0px, 0px, 0px)',
+                              'top': offset.top - 22,
+                              'left': offset.left - 43
+                          }).draggable({
+                                cancel: 'input, textarea, pre, .button, .' + editorClass,
+                                containment: 'parent'
+                            });
+    
+                            // create the editor
+                            editor = $('<div></div>').addClass(editorClass).appendTo(wrapper).nfeditor({
+                                languageId: languageId,
+                                width: cellNode.width(),
+                                content: property.value,
+                                minWidth: 175,
+                                minHeight: 100,
+                                readOnly: true,
+                                resizable: true,
+                                escape: function () {
+                                    cleanUp();
+                                }
+                            });
+                        } else {
+                          wrapper.css({
+                              'z-index': 1999,
+                              'position': 'absolute',
+                              'padding': '10px 20px',
+                              'overflow': 'hidden',
+                              'border-radius': '2px',
+                              'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
+                              'background-color': 'rgb(255, 255, 255)',
+                              'cursor': 'move',
+                              'transform': 'translate3d(0px, 0px, 0px)',
+                              'top': offset.top - 26,
+                              'left': offset.left - 20
+                          });
+    
+                            // create the input field
+                            $('<textarea hidefocus rows="5" readonly="readonly"/>').css({
+                                'height': '80px',
+                              'resize': 'both',
+                                'width': cellNode.width() + 'px',
+                              'margin': '10px 0px',
+                              'white-space': 'pre'
+                            }).text(property.value).on('keydown', function (evt) {
+                                if (evt.which === $.ui.keyCode.ESCAPE) {
+                                    cleanUp();
+    
+                                    evt.stopImmediatePropagation();
+                                    evt.preventDefault();
+                                }
+                            }).appendTo(wrapper);
+    
+                            // prevent dragging over standard components
+                            wrapper.draggable({
+                                containment: 'parent'
+                            });
+                        }
+    
+                        var cleanUp = function () {
+                            // clean up the editor
+                            if (editor !== null) {
+                                editor.nfeditor('destroy');
+                            }
+    
+                            // clean up the rest
+                            wrapper.hide().remove();
+                        };
+    
+                        // add an ok button that will remove the entire pop up
+                      var ok = $('<div class="button">' + nf._.msg('jquery-propertytable.Ok') + '</div>').css({
+                          'position': 'relative',
+                          'top': '10px',
+                          'left': '20px'
+                        }).hover(
+                            function () {
+                                $(this).css('background', '#004849');
+                            }, function () {
+                                $(this).css('background', '#728E9B');
+                            }).on('click', function () {
+                            cleanUp();
+                        });
+    
+                        $('<div></div>').append(ok).append('<div class="clear"></div>').appendTo(wrapper);
+                    }
+                }
+            }
+        };
+    
+        /**
+         * Gets the available controller services that implement the specified type and
+         * prompts the user to create one.
+         *
+         * @param {jQuery} gridContainer The grid container
+         * @param {slickgrid} grid The grid
+         * @param {object} item The item
+         * @param {type} serviceType The type of service to create
+         * @param {object} configurationOptions The configuration options
+         */
+        var promptForNewControllerService = function (gridContainer, grid, item, serviceType, configurationOptions) {
+            $.ajax({
+                type: 'GET',
+                url: '../nifi-api/flow/controller-service-types',
+                data: {
+                    serviceType: serviceType
+                },
+                dataType: 'json'
+            }).done(function (response) {
+                var options = [];
+                $.each(response.controllerServiceTypes, function (i, controllerServiceType) {
+                    options.push({
+                      text: nfCommon.substringAfterLast(controllerServiceType.type, '.'),
+                        value: controllerServiceType.type,
+                      description: nfCommon.escapeHtml(controllerServiceType.description)
+                    });
+                });
+    
+                // ensure there are some applicable controller services
+                if (options.length === 0) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('jquery-propertytable.ControllerService'),
+                      dialogContent: nf._.msg('jquery-propertytable.Message2')
+                    });
+                } else {
+                    var newControllerServiceDialogMarkup =
+                        '<div id="new-inline-controller-service-dialog" class="hidden dialog medium-dialog cancellable">' +
+                        '<div class="dialog-content">' +
+                        '<div>' +
+                        '<div class="setting-name">Controller Service</div>' +
+                        '<div class="setting-field">' +
+                        '<div class="new-inline-controller-service-combo"></div>' +
+                        '</div>' +
+                        '</div>' +
+                        '<div>' +
+                                  '<div class="setting-name">' + nf._.msg('jquery-propertytable.Tags') + '</div>' +
+                        '<div class="setting-field">' +
+                        '<div class="new-inline-controller-service-tags"></div>' +
+                        '</div>' +
+                        '</div>' +
+                        '<div>' +
+                                  '<div class="setting-name">' + nf._.msg('jquery-propertytable.Description') + '</div>' +
+                        '<div class="setting-field">' +
+                        '<div class="new-inline-controller-service-description"></div>' +
+                        '</div>' +
+                        '</div>' +
+                        '</div>' +
+                        '</div>';
+    
+                    var newControllerServiceDialog = $(newControllerServiceDialogMarkup).appendTo(configurationOptions.dialogContainer);
+                    var newControllerServiceCombo = newControllerServiceDialog.find('div.new-inline-controller-service-combo');
+                    var newControllerServiceTags = newControllerServiceDialog.find('div.new-inline-controller-service-tags');
+                    var newControllerServiceDescription = newControllerServiceDialog.find('div.new-inline-controller-service-description');
+    
+                    // build the combo field
+                    newControllerServiceCombo.combo({
+                        options: options,
+                        select: function (option) {
+                            var service;
+                            $.each(response.controllerServiceTypes, function (i, controllerServiceType) {
+                                if (controllerServiceType.type === option.value) {
+                                    service = controllerServiceType;
+                                    return false;
+                                }
+                            });
+    
+                            // set the service details
+                            newControllerServiceTags.text(service.tags.join(', ')).ellipsis();
+                            newControllerServiceDescription.text(service.description);
+                        }
+                    });
+    
+                    newControllerServiceDialog.modal({
+                      headerText: nf._.msg('jquery-propertytable.AddControllerService'),
+                        scrollableContentStyle: 'scrollable',
+                        buttons: [{
+                          buttonText: nf._.msg('jquery-propertytable.Create'),
+                            color: {
+                                base: '#728E9B',
+                                hover: '#004849',
+                                text: '#ffffff'
+                            },
+                            handler: {
+                                click: function () {
+                                    create();
+                                }
+                            }
+                        },
+                            {
+                              buttonText: nf._.msg('jquery-propertytable.Cancel'),
+                                color: {
+                                    base: '#E3E8EB',
+                                    hover: '#C7D2D7',
+                                    text: '#004849'
+                                },
+                                handler: {
+                                    click: function () {
+                                        cancel();
+                                    }
+                                }
+                            }]
+                    });
+    
+                    var create = function () {
+                        var newControllerServiceType = newControllerServiceCombo.combo('getSelectedOption').value;
+    
+                        // build the controller service entity
+                        var controllerServiceEntity = {
+                          'revision': nfClient.getRevision({
+                                'revision': {
+                                    'version': 0,
+                                }
+                            }),
+                            'component': {
+                                'type': newControllerServiceType
+                            }
+                        };
+    
+                        // determine the appropriate uri for creating the controller service
+                        var uri = '../nifi-api/controller/controller-services';
+                      if (nfCommon.isDefinedAndNotNull(groupId)) {
+                            uri = '../nifi-api/process-groups/' + encodeURIComponent(groupId) + '/controller-services';
+                        }
+    
+                        // add the new controller service
+                        $.ajax({
+                            type: 'POST',
+                            url: uri,
+                            data: JSON.stringify(controllerServiceEntity),
+                            dataType: 'json',
+                            contentType: 'application/json'
+                        }).done(function (response) {
+                            // load the descriptor and update the property
+                            configurationOptions.descriptorDeferred(item.property).done(function (descriptorResponse) {
+                                var descriptor = descriptorResponse.propertyDescriptor;
+    
+                                // store the descriptor for use later
+                                var descriptors = gridContainer.data('descriptors');
+                              if (!nfCommon.isUndefined(descriptors)) {
+                                    descriptors[descriptor.name] = descriptor;
+                                }
+    
+                                // add a row for the new property
+                                var data = grid.getData();
+                                data.updateItem(item.id, $.extend(item, {
+                                    value: response.component.id
+                                }));
+    
+                                // close the dialog
+                                newControllerServiceDialog.modal('hide');
+                            });
+    
+                          // invoke callback if necessary
+                          if (typeof configurationOptions.controllerServiceCreatedDeferred === 'function') {
+                              configurationOptions.controllerServiceCreatedDeferred(response);
+                          }
+                      }).fail(nfErrorHandler.handleAjaxError);
+                    };
+    
+                    var cancel = function () {
+                        newControllerServiceDialog.modal('hide');
+                    };
+    
+                    newControllerServiceDialog.modal('show');
+                }
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        var initPropertiesTable = function (table, options) {
+            // function for formatting the property name
+            var nameFormatter = function (row, cell, value, columnDef, dataContext) {
+                var nameWidthOffset = 30;
+                var cellContent = $('<div></div>');
+    
+                // format the contents
+                var formattedValue = $('<span/>').addClass('table-cell').text(value).appendTo(cellContent);
+                if (dataContext.type === 'required') {
+                    formattedValue.addClass('required');
+                }
+    
+                // get the property descriptor
+                var descriptors = table.data('descriptors');
+                var propertyDescriptor = descriptors[dataContext.property];
+    
+                // show the property description if applicable
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                  if (!nfCommon.isBlank(propertyDescriptor.description) || !nfCommon.isBlank(propertyDescriptor.defaultValue) || !nfCommon.isBlank(propertyDescriptor.supportsEl)) {
+                        $('<div class="fa fa-question-circle" alt="Info" style="float: right; margin-right: 6px; margin-top: 4px;"></div>').appendTo(cellContent);
+                        $('<span class="hidden property-descriptor-name"></span>').text(dataContext.property).appendTo(cellContent);
+                        nameWidthOffset = 46; // 10 + icon width (10) + icon margin (6) + padding (20)
+                    }
+                }
+    
+                // adjust the width accordingly
+                formattedValue.width(columnDef.width - nameWidthOffset).ellipsis();
+    
+                // return the cell content
+                return cellContent.html();
+            };
+    
+            // function for formatting the property value
+            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
+                var valueMarkup;
+              if (nfCommon.isDefinedAndNotNull(value)) {
+                    // get the property descriptor
+                    var descriptors = table.data('descriptors');
+                    var propertyDescriptor = descriptors[dataContext.property];
+    
+                    // determine if the property is sensitive
+                  if (nfCommon.isSensitiveProperty(propertyDescriptor)) {
+                      valueMarkup = '<span class="table-cell sensitive">' + nf._.msg('jquery-propertytable.SensitiveValueSet') + '</span>';
+                    } else {
+                        // if there are allowable values, attempt to swap out for the display name
+                      var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
+                        if ($.isArray(allowableValues)) {
+                            $.each(allowableValues, function (_, allowableValueEntity) {
+                                var allowableValue = allowableValueEntity.allowableValue;
+                                if (value === allowableValue.value) {
+                                    value = allowableValue.displayName;
+                                    return false;
+                                }
+                            });
+                        }
+    
+                        if (value === '') {
+                          valueMarkup = '<span class="table-cell blank">' + nf._.msg('jquery-propertytable.EmptyStringSet') + '</span>';
+                      } else {
+                          valueMarkup = '<div class="table-cell value"><pre class="ellipsis">' + nfCommon.escapeHtml(value) + '</pre></div>';
+                      }
+                  }
+              } else {
+                  valueMarkup = '<span class="unset">' + nf._.msg('jquery-propertytable.NoValueSet') + '</span>';
+                }
+    
+                // format the contents
+                var content = $(valueMarkup);
+                if (dataContext.type === 'required') {
+                    content.addClass('required');
+                }
+                content.find('.ellipsis').width(columnDef.width - 10).ellipsis();
+    
+                // return the appropriate markup
+                return $('<div/>').append(content).html();
+            };
+    
+            var propertyColumns = [
+                {
+                    id: 'property',
+                    field: 'displayName',
+                  name: nf._.msg('jquery-propertytable.Property'),
+                    sortable: false,
+                    resizable: true,
+                    rerenderOnResize: true,
+                    formatter: nameFormatter
+                },
+                {
+                    id: 'value',
+                    field: 'value',
+                  name: nf._.msg('jquery-propertytable.Value'),
+                    sortable: false,
+                    resizable: true,
+                    cssClass: 'pointer',
+                    rerenderOnResize: true,
+                    formatter: valueFormatter
+                }
+            ];
+    
+            // custom formatter for the actions column
+            var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+    
+                // get the property descriptor
+                var descriptors = table.data('descriptors');
+                var propertyDescriptor = descriptors[dataContext.property];
+    
+              var identifiesControllerService = nfCommon.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService);
+              var isConfigured = nfCommon.isDefinedAndNotNull(dataContext.value);
+    
+                // check to see if we should provide a button for going to a controller service
+              if (identifiesControllerService && isConfigured && (options.supportsGoTo === true)) {
+                    // ensure the configured value is referencing a valid service
+                    $.each(propertyDescriptor.allowableValues, function (_, allowableValueEntity) {
+                        var allowableValue = allowableValueEntity.allowableValue;
+                        if (allowableValue.value === dataContext.value) {
+                          markup += '<div class="pointer go-to-service fa fa-long-arrow-right" title="' + nf._.msg('jquery-propertytable.GoTo') + '" style="margin-top: 2px" ></div>';
+                            return false;
+                        }
+                    });
+                }
+    
+                // allow user defined properties to be removed
+                if (options.readOnly !== true && dataContext.type === 'userDefined') {
+                  markup += '<div title="' + nf._.msg('jquery-propertytable.Delete') + '" class="delete-property pointer fa fa-trash" style="margin-top: 2px" ></div>';
+                }
+    
+                return markup;
+            };
+            propertyColumns.push({id: "actions", name: "&nbsp;", minWidth: 20, width: 20, formatter: actionFormatter});
+    
+            var propertyConfigurationOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                editable: options.readOnly !== true,
+                enableAddRow: false,
+                autoEdit: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var propertyData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            propertyData.setItems([]);
+            propertyData.setFilterArgs({
+                searchString: '',
+                property: 'hidden'
+            });
+            propertyData.setFilter(filter);
+            propertyData.getItemMetadata = function (index) {
+                var item = propertyData.getItem(index);
+    
+                // get the property descriptor
+                var descriptors = table.data('descriptors');
+                var propertyDescriptor = descriptors[item.property];
+    
+                // support el if specified or unsure yet (likely a dynamic property)
+              if (nfCommon.isUndefinedOrNull(propertyDescriptor) || nfCommon.supportsEl(propertyDescriptor)) {
+                    return {
+                        columns: {
+                            value: {
+                                editor: nfelEditor
+                            }
+                        }
+                    };
+                } else {
+                    // check for allowable values which will drive which editor to use
+                  var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
+                    if ($.isArray(allowableValues)) {
+                        return {
+                            columns: {
+                                value: {
+                                    editor: comboEditor
+                                }
+                            }
+                        };
+                    } else {
+                        return {
+                            columns: {
+                                value: {
+                                    editor: textEditor
+                                }
+                            }
+                        };
+                    }
+                }
+            };
+    
+            var goToControllerService = function (property) {
+                $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/controller-services/' + encodeURIComponent(property.value),
+                    dataType: 'json'
+                }).done(function (controllerServiceEntity) {
+                    // close the dialog
+                    var dialog = table.closest('.dialog');
+                    if (dialog.hasClass('modal')) {
+                        dialog.modal('hide');
+                    } else {
+                        dialog.hide();
+                    }
+    
+                    var controllerService = controllerServiceEntity.component;
+                    $.Deferred(function (deferred) {
+                      if (nfCommon.isDefinedAndNotNull(controllerService.parentGroupId)) {
+                            if ($('#process-group-configuration').is(':visible')) {
+                              nfProcessGroupConfiguration.loadConfiguration(controllerService.parentGroupId).done(function () {
+                                    deferred.resolve();
+                                });
+                            } else {
+                              nfProcessGroupConfiguration.showConfiguration(controllerService.parentGroupId).done(function () {
+                                    deferred.resolve();
+                                });
+                            }
+                        } else {
+                            if ($('#settings').is(':visible')) {
+                                // reload the settings
+                              nfSettings.loadSettings().done(function () {
+                                    deferred.resolve();
+                                });
+                            } else {
+                                // reload the settings and show
+                              nfSettings.showSettings().done(function () {
+                                    deferred.resolve();
+                                });
+                            }
+                        }
+                    }).done(function () {
+                      if (nfCommon.isDefinedAndNotNull(controllerService.parentGroupId)) {
+                          nfProcessGroupConfiguration.selectControllerService(property.value);
+                        } else {
+                          nfSettings.selectControllerService(property.value);
+                        }
+                    });
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            // initialize the grid
+            var propertyGrid = new Slick.Grid(table, propertyData, propertyColumns, propertyConfigurationOptions);
+            propertyGrid.setSelectionModel(new Slick.RowSelectionModel());
+            propertyGrid.onClick.subscribe(function (e, args) {
+                if (propertyGrid.getColumns()[args.cell].id === 'value') {
+                    if (options.readOnly === true) {
+                        var descriptors = table.data('descriptors');
+                        showPropertyValue(propertyGrid, descriptors, args.row, args.cell);
+                    } else {
+                        // edits the clicked cell
+                        propertyGrid.gotoCell(args.row, args.cell, true);
+                    }
+    
+                    // prevents standard edit logic
+                    e.stopImmediatePropagation();
+                } else if (propertyGrid.getColumns()[args.cell].id === 'actions') {
+                    var property = propertyData.getItem(args.row);
+    
+                    var target = $(e.target);
+                    if (target.hasClass('delete-property')) {
+                        // mark the property in question for removal and refresh the table
+                        propertyData.updateItem(property.id, $.extend(property, {
+                            hidden: true
+                        }));
+    
+                        // prevents standard edit logic
+                        e.stopImmediatePropagation();
+                    } else if (target.hasClass('go-to-service')) {
+                        if (options.readOnly === true) {
+                            goToControllerService(property);
+                        } else {
+                            // load the property descriptor if possible
+                            if (typeof options.goToServiceDeferred === 'function') {
+                                options.goToServiceDeferred().done(function () {
+                                    goToControllerService(property);
+                                });
+                            }
+                        }
+                    }
+                }
+            });
+            propertyGrid.onKeyDown.subscribe(function (e, args) {
+                if (e.which === $.ui.keyCode.ESCAPE) {
+                    var editorLock = propertyGrid.getEditorLock();
+                    if (editorLock.isActive()) {
+                        editorLock.cancelCurrentEdit();
+    
+                        // prevents standard cancel logic - standard logic does
+                        // not stop propagation when escape is pressed
+                        e.stopImmediatePropagation();
+                        e.preventDefault();
+                    }
+                }
+            });
+    
+            // wire up the dataview to the grid
+            propertyData.onRowCountChanged.subscribe(function (e, args) {
+                propertyGrid.updateRowCount();
+                propertyGrid.render();
+            });
+            propertyData.onRowsChanged.subscribe(function (e, args) {
+                propertyGrid.invalidateRows(args.rows);
+                propertyGrid.render();
+            });
+    
+            // hold onto an instance of the grid and listen for mouse events to add tooltips where appropriate
+            table.data('gridInstance', propertyGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var infoIcon = $(this).find('div.fa-question-circle');
+                if (infoIcon.length && !infoIcon.data('qtip')) {
+                    var property = $(this).find('span.property-descriptor-name').text();
+    
+                    // get the property descriptor
+                    var descriptors = table.data('descriptors');
+                    var propertyDescriptor = descriptors[property];
+    
+                    // get the history
+                    var history = table.data('history');
+                    var propertyHistory = history[property];
+    
+                    // format the tooltip
+                  var tooltip = nfCommon.formatPropertyTooltip(propertyDescriptor, propertyHistory);
+    
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                        infoIcon.qtip($.extend({},
+                          nfCommon.config.tooltipConfig,
+                            {
+                                content: tooltip
+                            }));
+                    }
+                }
+            });
+        };
+    
+        var saveRow = function (table) {
+            // get the property grid to commit the current edit
+            var propertyGrid = table.data('gridInstance');
+          if (nfCommon.isDefinedAndNotNull(propertyGrid)) {
+                var editController = propertyGrid.getEditController();
+                editController.commitCurrentEdit();
+            }
+        };
+    
+        /**
+         * Performs the filtering.
+         *
+         * @param {object} item     The item subject to filtering
+         * @param {object} args     Filter arguments
+         * @returns {Boolean}       Whether or not to include the item
+         */
+        var filter = function (item, args) {
+            return item.hidden === false;
+        };
+    
+        /**
+         * Loads the specified properties.
+         *
+         * @param {type} table
+         * @param {type} properties
+         * @param {type} descriptors
+         * @param {type} history
+         */
+        var loadProperties = function (table, properties, descriptors, history) {
+            // save the descriptors and history
+            table.data({
+                'descriptors': descriptors,
+                'history': history
+            });
+    
+            // get the grid
+            var propertyGrid = table.data('gridInstance');
+            var propertyData = propertyGrid.getData();
+    
+            // generate the properties
+          if (nfCommon.isDefinedAndNotNull(properties)) {
+                propertyData.beginUpdate();
+    
+                var i = 0;
+                $.each(properties, function (name, value) {
+                    // get the property descriptor
+                    var descriptor = descriptors[name];
+    
+                    // determine the property type
+                    var type = 'userDefined';
+                    var displayName = name;
+                  if (nfCommon.isDefinedAndNotNull(descriptor)) {
+                      if (nfCommon.isRequiredProperty(descriptor)) {
+                            type = 'required';
+                      } else if (nfCommon.isDynamicProperty(descriptor)) {
+                            type = 'userDefined';
+                        } else {
+                            type = 'optional';
+                        }
+    
+                        // use the display name if possible
+                        displayName = descriptor.displayName;
+    
+                        // determine the value
+                      if (nfCommon.isNull(value) && nfCommon.isDefinedAndNotNull(descriptor.defaultValue)) {
+                            value = descriptor.defaultValue;
+                        }
+                    }
+    
+                    // add the row
+                    propertyData.addItem({
+                        id: i++,
+                        hidden: false,
+                        property: name,
+                        displayName: displayName,
+                        previousValue: value,
+                        value: value,
+                        type: type
+                    });
+                });
+    
+                propertyData.endUpdate();
+            }
+        };
+    
+        /**
+         * Clears the property table container.
+         *
+         * @param {jQuery} propertyTableContainer
+         */
+        var clear = function (propertyTableContainer) {
+            var options = propertyTableContainer.data('options');
+            if (options.readOnly === true) {
+              nfUniversalCapture.removeAllPropertyDetailDialogs();
+            } else {
+                // clear any existing new property dialogs
+              if (nfCommon.isDefinedAndNotNull(options.dialogContainer)) {
+                    $('#new-property-dialog').modal("hide");
+                }
+            }
+    
+            // clean up data
+            var table = propertyTableContainer.find('div.property-table');
+            table.removeData('descriptors history');
+    
+            // clean up any tooltips that may have been generated
+          nfCommon.cleanUpTooltips(table, 'div.fa-question-circle');
+    
+            // clear the data in the grid
+            var propertyGrid = table.data('gridInstance');
+            var propertyData = propertyGrid.getData();
+            propertyData.setItems([]);
+        };
+    
+        var methods = {
+          /**
+           * 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 (nfCommon.isDefinedAndNotNull(options)) {
+                        // get the tag cloud
+                        var propertyTableContainer = $(this);
+    
+                        // clear any current contents, remote events, and store options
+                        propertyTableContainer.empty().unbind().addClass('property-container').data('options', options);
+    
+                        // build the component
+                        var header = $('<div class="properties-header"></div>').appendTo(propertyTableContainer);
+                      $('<div class="required-property-note">' + nf._.msg('jquery-propertytable.RequiredField') + '</div>').appendTo(header);
+    
+                        // build the table
+                        var table = $('<div class="property-table"></div>').appendTo(propertyTableContainer);
+    
+                        // optionally add a add new property button
+                      if (options.readOnly !== true && nfCommon.isDefinedAndNotNull(options.dialogContainer)) {
+                            // build the new property dialog
+                            var newPropertyDialogMarkup =
+                                '<div id="new-property-dialog" class="dialog cancellable small-dialog hidden">' +
+                                '<div class="dialog-content">' +
+                                '<div>' +
+                                          '<div class="setting-name">' + nf._.msg('jquery-propertytable.PropertyName') + '</div>' +
+                                '<div class="setting-field new-property-name-container">' +
+                                '<input class="new-property-name" type="text"/>' +
+                                '</div>' +
+                                '</div>' +
+                                '</div>' +
+                                '</div>';
+    
+                            var newPropertyDialog = $(newPropertyDialogMarkup).appendTo(options.dialogContainer);
+                            var newPropertyNameField = newPropertyDialog.find('input.new-property-name');
+    
+                            newPropertyDialog.modal({
+                              headerText: nf._.msg('jquery-propertytable.AddProperty'),
+                                scrollableContentStyle: 'scrollable',
+                                buttons: [{
+                                  buttonText: nf._.msg('jquery-propertytable.Ok'),
+                                    color: {
+                                        base: '#728E9B',
+                                        hover: '#004849',
+                                        text: '#ffffff'
+                                    },
+                                    handler: {
+                                        click: function () {
+                                            add();
+                                        }
+                                    }
+                                },
+                                    {
+                                      buttonText: nf._.msg('jquery-propertytable.Cancel'),
+                                        color: {
+                                            base: '#E3E8EB',
+                                            hover: '#C7D2D7',
+                                            text: '#004849'
+                                        },
+                                        handler: {
+                                            click: function () {
+                                                cancel();
+                                            }
+                                        }
+                                    }]
+                            });
+    
+                            var add = function () {
+                                var propertyName = $.trim(newPropertyNameField.val());
+    
+                                // ensure the property name is specified
+                                if (propertyName !== '') {
+                                    var propertyGrid = table.data('gridInstance');
+                                    var propertyData = propertyGrid.getData();
+    
+                                    // ensure the property name is unique
+                                    var existingItem = null;
+                                    $.each(propertyData.getItems(), function (_, item) {
+                                        if (propertyName === item.property) {
+                                            existingItem = item;
+                                            return false;
+                                        }
+                                    });
+    
+                                    if (existingItem === null) {
+                                        // load the descriptor and add the property
+                                        options.descriptorDeferred(propertyName).done(function (response) {
+                                            var descriptor = response.propertyDescriptor;
+    
+                                            // store the descriptor for use later
+                                            var descriptors = table.data('descriptors');
+                                          if (!nfCommon.isUndefined(descriptors)) {
+                                                descriptors[descriptor.name] = descriptor;
+                                            }
+    
+                                            // add a row for the new property
+                                            var id = propertyData.getLength();
+                                            propertyData.addItem({
+                                                id: id,
+                                                hidden: false,
+                                                property: propertyName,
+                                                displayName: propertyName,
+                                                previousValue: null,
+                                                value: null,
+                                                type: 'userDefined'
+                                            });
+    
+                                            // select the new properties row
+                                            var row = propertyData.getRowById(id);
+                                            propertyGrid.setActiveCell(row, propertyGrid.getColumnIndex('value'));
+                                            propertyGrid.editActiveCell();
+                                        });
+                                    } else {
+                                        // if this row is currently hidden, clear the value and show it
+                                        if (existingItem.hidden === true) {
+                                            propertyData.updateItem(existingItem.id, $.extend(existingItem, {
+                                                hidden: false,
+                                                previousValue: null,
+                                                value: null
+                                            }));
+    
+                                            // select the new properties row
+                                            var row = propertyData.getRowById(existingItem.id);
+                                            propertyGrid.setActiveCell(row, propertyGrid.getColumnIndex('value'));
+                                            propertyGrid.editActiveCell();
+                                        } else {
+                                          nfDialog.showOkDialog({
+                                              headerText: nf._.msg('jquery-propertytable.PropertyExists'),
+                                              dialogContent: nf._.msg('jquery-propertytable.Message0')
+                                            });
+    
+                                            // select the existing properties row
+                                            var row = propertyData.getRowById(existingItem.id);
+                                            propertyGrid.setSelectedRows([row]);
+                                            propertyGrid.scrollRowIntoView(row);
+                                        }
+                                    }
+                                } else {
+                                  nfDialog.showOkDialog({
+                                      headerText: nf._.msg('jquery-propertytable.PropertyName'),
+                                      dialogContent: nf._.msg('jquery-propertytable.Message1')
+                                    });
+                                }
+    
+                                // close the dialog
+                                newPropertyDialog.modal('hide');
+                            };
+    
+                            var cancel = function () {
+                                newPropertyDialog.modal('hide');
+                            };
+    
+                            // enable enter to add
+                            newPropertyNameField.on('keydown', function (e) {
+                                var code = e.keyCode ? e.keyCode : e.which;
+                                if (code === $.ui.keyCode.ENTER) {
+                                    add();
+    
+                                    // prevents the enter from propagating into the field for editing the new property value
+                                    e.stopImmediatePropagation();
+                                    e.preventDefault();
+                                }
+                            });
+    
+                          newPropertyDialog.on('click', 'div.new-property-ok', add).on('click', 'div.new-property-cancel', cancel);
+    
+                            // build the control to open the new property dialog
+                            var addProperty = $('<div class="add-property"></div>').appendTo(header);
+                            $('<button class="button fa fa-plus"></button>').on('click', function () {
+                                // close all fields currently being edited
+                                saveRow(table);
+    
+                                // clear the dialog
+                                newPropertyNameField.val('');
+    
+                                // open the new property dialog
+                                newPropertyDialog.modal('show');
+    
+                                // set the initial focus
+                                newPropertyNameField.focus();
+                            }).appendTo(addProperty);
+                        }
+                        $('<div class="clear"></div>').appendTo(header);
+    
+                        // initializes the properties table
+                        initPropertiesTable(table, options);
+                    }
+                });
+            },
+    
+            /**
+             * Loads the specified properties.
+             *
+             * @argument {object} properties        The properties
+             * @argument {map} descriptors          The property descriptors (property name  property descriptor)
+             * @argument {map} history
+             */
+            loadProperties: function (properties, descriptors, history) {
+                return this.each(function () {
+                    var table = $(this).find('div.property-table');
+                    loadProperties(table, properties, descriptors, history);
+                });
+            },
+    
+            /**
+             * Saves the last edited row in the specified grid.
+             */
+            saveRow: function () {
+                return this.each(function () {
+                    var table = $(this).find('div.property-table');
+                    saveRow(table);
+                });
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+                return this.each(function () {
+                    var table = $(this).find('div.property-table');
+                    var propertyGrid = table.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(propertyGrid)) {
+                        propertyGrid.resizeCanvas();
+                    }
+                });
+            },
+    
+            /**
+             * Cancels the edit in the specified row.
+             */
+            cancelEdit: function () {
+                return this.each(function () {
+                    var table = $(this).find('div.property-table');
+                    var propertyGrid = table.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(propertyGrid)) {
+                        var editController = propertyGrid.getEditController();
+                        editController.cancelCurrentEdit();
+                    }
+                });
+            },
+    
+            /**
+             * Destroys the property table.
+             */
+            destroy: function () {
+                return this.each(function () {
+                    var propertyTableContainer = $(this);
+                    var options = propertyTableContainer.data('options');
+    
+                  if (nfCommon.isDefinedAndNotNull(options)) {
+                        // clear the property table container
+                        clear(propertyTableContainer);
+    
+                        // clear any existing new property dialogs
+                      if (nfCommon.isDefinedAndNotNull(options.dialogContainer)) {
+                            $('#new-property-dialog').modal("hide");
+                            $(options.dialogContainer).children('div.new-inline-controller-service-dialog').remove();
+                        }
+                    }
+                });
+            },
+    
+            /**
+             * Clears the property table.
+             */
+            clear: function () {
+                return this.each(function () {
+                    clear($(this));
+                });
+            },
+    
+            /**
+             * Determines if a save is required for the first matching element.
+             */
+            isSaveRequired: function () {
+                var isSaveRequired = false;
+    
+                this.each(function () {
+                    // get the property grid
+                    var table = $(this).find('div.property-table');
+                    var propertyGrid = table.data('gridInstance');
+                    var propertyData = propertyGrid.getData();
+    
+                    // determine if any of the properties have changed
+                    $.each(propertyData.getItems(), function () {
+                        if (this.value !== this.previousValue) {
+                            isSaveRequired = true;
+                            return false;
+                        }
+                    });
+    
+                    return false;
+                });
+    
+                return isSaveRequired;
+            },
+    
+            /**
+             * Marshalls the properties for the first matching element.
+             */
+            marshalProperties: function () {
+                // properties
+                var properties = {};
+    
+                this.each(function () {
+                    // get the property grid data
+                    var table = $(this).find('div.property-table');
+                    var propertyGrid = table.data('gridInstance');
+                    var propertyData = propertyGrid.getData();
+                    $.each(propertyData.getItems(), function () {
+                        if (this.hidden === true) {
+                            // hidden properties were removed by the user, clear the value
+                            properties[this.property] = null;
+                        } else if (this.value !== this.previousValue) {
+                            // the value has changed
+                            properties[this.property] = this.value;
+                        }
+                    });
+    
+                    return false;
+                });
+    
+                return properties;
+            },
+    
+            /**
+             * Sets the current group id.
+             */
+            setGroupId: function (currentGroupId) {
+                return this.each(function () {
+                    groupId = currentGroupId;
+                });
+            }
+        };
+    
+        $.fn.propertytable = function (method) {
+            if (methods[method]) {
+                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+            } else {
+                return methods.init.apply(this, arguments);
+            }
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
new file mode 100644
index 000000000000..9e5ac333542c
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
@@ -0,0 +1,91 @@
+/*
+ * 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.
+ */
+/*
+    Styles for the Nifi tabs.
+*/
+
+ul.tab-pane {
+    display: block;
+}
+
+.tab {
+    float: left;
+    background-color: #eaeef0;
+    margin-right: 2px;
+    text-align: center;
+    cursor: pointer;
+    line-height: 32px;
+    font-weight: 500;
+    height: 31px;
+    min-width: 88px;
+    padding: 0 10px;
+    border: 1px solid #CCDADB;
+    text-transform: uppercase;
+    color: #004849;
+    border-bottom: 0px;
+}
+
+.tab:hover {
+    border: 1px solid #004849;
+}
+
+.selected-tab {
+    background-color: #fff;
+    border: 1px solid #004849;
+    border-bottom-color: #fff;
+    color: #262626;
+    border-bottom: 1px solid #fff !important;
+}
+
+.tab-container {
+    background-color: transparent;
+    height: 32px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #004849;
+    width: 100%;
+}
+
+div.configuration-tab {
+    display: none;
+}
+
+div[id$=-tabs-content] {
+    overflow: auto;
+    position: absolute;
+    top: 33px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+}
+
+div[id$=-tab-content] {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    left: 0px;
+    bottom: 0px;
+    padding-top: 10px;
+}
+
+div[id$=-properties] {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    left: 0px;
+    bottom: 0px;
+    padding-top: 10px;
+}
\ 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/tabbs/jquery.tabbs.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
new file mode 100644
index 000000000000..fdd59d47b901
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
@@ -0,0 +1,107 @@
+/*
+ * 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.
+ */
+(function ($) {
+
+    var isUndefined = function (obj) {
+        return typeof obj === 'undefined';
+    };
+
+    var isNull = function (obj) {
+        return obj === null;
+    };
+
+    var isDefinedAndNotNull = function (obj) {
+        return !isUndefined(obj) && !isNull(obj);
+    };
+
+    /**
+     * Create a new tabbed pane. The options are specified in the following
+     * format:
+     *
+     * {
+     *   tabStyle: 'tabStyle',
+     *   selectedTabStyle: 'selectedTabStyle',
+     *   tabs: [{
+     *      name: 'tab 1',
+     *      tabContentId: 'tab1ContentId'
+     *   }, {
+     *      name: 'tab 2',
+     *      tabContentId: 'tab2ContentId'
+     *   }],
+     *   select: selectHandler
+     * }
+     *
+     * @argument {object} options
+     */
+    $.fn.tabbs = function (options) {
+        return this.each(function () {
+            var tabPane = $(this);
+
+            // create the unorder list
+            var tabList = $('<ul/>').addClass('tab-pane');
+            var shownTab = false;
+
+            // create each tab
+            $.each(options.tabs, function () {
+                // generate the tab content style
+                var tabContentStyle = tabPane.attr('id') + '-content';
+                var tabDefinition = this;
+
+                // mark the tab content
+                $('#' + tabDefinition.tabContentId).addClass(tabContentStyle).hide();
+
+                // prep the tab itself
+                var tab = $('<li></li>').text(tabDefinition.name).addClass(options.tabStyle).click(function () {
+                    // hide all tab content
+                    $('.' + tabContentStyle).hide();
+
+                    // show the desired tab
+                    var tabContent = $('#' + tabDefinition.tabContentId).show();
+
+                    // check if content has overflow
+                    var tabContentContainer = tabContent.parent();
+                    if (tabContentContainer.get(0).offsetHeight < tabContentContainer.get(0).scrollHeight ||
+                        tabContentContainer.get(0).offsetWidth < tabContentContainer.get(0).scrollWidth) {
+                        tabContentContainer.addClass(options.scrollableTabContentStyle);
+                    } else {
+                        tabContentContainer.removeClass(options.scrollableTabContentStyle);
+                    }
+
+                    // unselect the previously selected tab
+                    tabList.children('.' + options.tabStyle).removeClass(options.selectedTabStyle);
+
+                    // mark the tab as selected
+                    $(this).addClass(options.selectedTabStyle);
+
+                    // fire a select event if applicable
+                    if (isDefinedAndNotNull(options.select)) {
+                        options.select.call(this);
+                    }
+                }).appendTo(tabList);
+
+                // always show the first tab
+                if (!shownTab) {
+                    tab.click();
+                    shownTab = true;
+                }
+            });
+
+            // add the tab list
+            tabList.appendTo(tabPane);
+        });
+    };
+})(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.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.css
new file mode 100644
index 000000000000..d1210ddc19fd
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.css
@@ -0,0 +1,70 @@
+/*
+ * 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.
+ */
+
+/*
+    Styles for the Nifi tag cloud.
+*/
+
+ul.tag-cloud {
+    font-size: 90%;
+    padding: 2px;
+    margin-left: -5px;
+    overflow: hidden;
+}
+
+ul.tag-cloud li {
+    float: left;
+    list-style-type: none;
+    margin: 2px 2px;
+    height: 20px;
+    white-space: nowrap;
+    line-height: 20px;
+    max-width: 180px;
+}
+
+ul.tag-filter {
+    overflow: hidden;
+    margin-top: 10px;
+}
+
+ul.tag-filter li {
+    height: 18px;
+    line-height: 18px;
+    padding: 2px;
+}
+
+div.selected-tag-text {
+    float: left;
+}
+
+img.remove-selected-tag {
+    float: right;
+    margin-top: 1px;
+}
+
+ul.tag-filter li {
+    background: #004849;
+    border-radius: 2px;
+    line-height: 15px;
+    padding: 5px 10px;
+    color: #ffffff;
+    margin: 5px;
+}
+
+.tag-filter .fa {
+    color: #fff !important;
+}
\ 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
new file mode 100644
index 000000000000..26e33585c503
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.js
@@ -0,0 +1,225 @@
+    /*
+     * 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 */
+    
+    /**
+     * jQuery plugin for a NiFi style tag cloud. The options are specified in the following
+     * format:
+     *
+     * {
+     *   tags: ['attributes', 'copy', 'regex', 'xml', 'copy', 'xml', 'attributes'],
+     *   select: selectHandler,
+     *   remove: removeHandler
+     * }
+     *
+     * @param {type} $
+     * @returns {undefined}
+     */
+    (function ($) {
+    
+        var isUndefined = function (obj) {
+            return typeof obj === 'undefined';
+        };
+    
+        var isNull = function (obj) {
+            return obj === null;
+        };
+    
+        var isDefinedAndNotNull = function (obj) {
+            return !isUndefined(obj) && !isNull(obj);
+        };
+    
+        var isBlank = function (str) {
+            return isUndefined(str) || isNull(str) || str === '';
+        };
+    
+        var config = {
+            maxTags: 25,
+            maxTagFontSize: 2,
+            minTagFontSize: 1,
+            minWidth: 20
+        };
+    
+        /**
+         * Adds the specified tag filter.
+         *
+         * @argument {jQuery} cloudContainer    The tag cloud container
+         * @argument {string} tag               The tag to add
+         */
+        var addTagFilter = function (cloudContainer, tag) {
+            var config = cloudContainer.data('options');
+            var tagFilter = cloudContainer.find('ul.tag-filter');
+    
+            // ensure this tag hasn't already been added
+            var tagFilterExists = false;
+            tagFilter.find('li div.selected-tag-text').each(function () {
+                if (tag === $(this).text()) {
+                    tagFilterExists = true;
+                    return false;
+                }
+            });
+    
+            // add this tag filter if applicable
+            if (!tagFilterExists) {
+                // create the list item content
+                var tagText = $('<div class="selected-tag-text"></div>').text(tag);
+                var removeTagIcon = $('<div class="fa fa-close remove-selected-tag pointer"></div>').click(function () {
+                    // remove this tag
+                    $(this).closest('li').remove();
+    
+                    // fire a remove event if applicable
+                    if (isDefinedAndNotNull(config.remove)) {
+                        config.remove.call(cloudContainer, tag);
+                    }
+                });
+                var selectedTagItem = $('<div layout="row" layout-align="space-between center"></div>').append(tagText).append(removeTagIcon);
+    
+                // create the list item and update the tag filter list
+                $('<li></li>').append(selectedTagItem).appendTo(tagFilter);
+    
+                // fire a select event if applicable
+                if (isDefinedAndNotNull(config.select)) {
+                    config.select.call(cloudContainer, tag);
+                }
+            }
+        };
+    
+        var methods = {
+    
+            /**
+             * Initializes the tag cloud.
+             *
+             * @argument {object} options The options for the tag cloud
+             */
+            init: function (options) {
+                return this.each(function () {
+                    // ensure the options have been properly specified
+                    if (isDefinedAndNotNull(options) && isDefinedAndNotNull(options.tags)) {
+                        // get the tag cloud
+                        var cloudContainer = $(this);
+    
+                        // clear any current contents, remote events, and store options
+                        cloudContainer.empty().unbind().data('options', options);
+    
+                        // build the component
+                        var cloud = $('<ul class="tag-cloud"></ul>').appendTo(cloudContainer);
+                        var filter = $('<ul class="tag-filter"></ul>').appendTo(cloudContainer);
+    
+                        var tagCloud = {};
+                        var tags = [];
+    
+                        // count the frequency of each tag for this type
+                        $.each(options.tags, function (i, tag) {
+                            var normalizedTagName = tag.toLowerCase();
+    
+                          if (isDefinedAndNotNull(tagCloud[normalizedTagName])) {
+                                tagCloud[normalizedTagName].count = tagCloud[normalizedTagName].count + 1;
+                            } else {
+                                var tagCloudEntry = {
+                                    term: normalizedTagName,
+                                    count: 1
+                                };
+                                tags.push(tagCloudEntry);
+                                tagCloud[normalizedTagName] = tagCloudEntry;
+                            }
+                        });
+    
+                        // handle the case when no tags are present
+                        if (tags.length > 0) {
+                            // sort the tags by frequency to limit the less frequent tags
+                            tags.sort(function (a, b) {
+                                return b.count - a.count;
+                            });
+    
+                            // limit to the most frequest tags
+                            if (tags.length > config.maxTags) {
+                                tags = tags.slice(0, config.maxTags);
+                            }
+    
+                            // determine the max frequency
+                            var maxFrequency = tags[0].count;
+    
+                            // sort the tags alphabetically
+                            tags.sort(function (a, b) {
+                                var compA = a.term.toUpperCase();
+                                var compB = b.term.toUpperCase();
+                                return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
+                            });
+    
+                            // set the tag content
+                            $.each(tags, function (i, tag) {
+                                // determine the appropriate font size
+                                var fontSize = Math.log(tag.count) / Math.log(maxFrequency) * (config.maxTagFontSize - config.minTagFontSize) + config.minTagFontSize;
+                                var minWidth = config.minWidth * fontSize;
+    
+                                // create the tag cloud entry
+                                $('<li></li>').append($('<span class="link"></span>').text(tag.term).css({
+                                    'font-size': fontSize + 'em'
+                                })).css({
+                                    'min-width': minWidth + 'px'
+                                }).click(function () {
+                                    // ensure we don't exceed 5 selected
+                                    if (filter.children('li').length < 5) {
+                                        var tagText = $(this).children('span').text();
+                                        addTagFilter(cloudContainer, tagText);
+                                    }
+                                }).appendTo(cloud).ellipsis();
+                            });
+                        } else {
+                            // indicate when no tags are found
+                          $('<li><span class="unset">' + nf._.msg('jquery-tagcloud.NoTagsSpecified') + '</span></li>').appendTo(cloud);
+                        }
+                    }
+                });
+            },
+    
+            /**
+             * Resets the selected tags from the tag cloud.
+             */
+            clearSelectedTags: function () {
+                return this.each(function () {
+                    var cloudContainer = $(this);
+                    cloudContainer.find('div.remove-selected-tag').trigger('click');
+                });
+            },
+    
+            /**
+             * Returns the selected tags of the first matching element.
+             */
+            getSelectedTags: function () {
+                var tags = [];
+    
+                this.each(function () {
+                    var cloudContainer = $(this);
+                    cloudContainer.find('div.selected-tag-text').each(function () {
+                        tags.push($(this).text());
+                    });
+                });
+    
+                return tags;
+            }
+        };
+    
+        $.fn.tagcloud = function (method) {
+            if (methods[method]) {
+                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+            } else {
+                return methods.init.apply(this, arguments);
+            }
+        };
+    })(jQuery);
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
new file mode 100644
index 000000000000..97503ee2f613
--- /dev/null
+++ 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
@@ -0,0 +1,494 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'angular',
+                  'nf.Common',
+                  'nf.ng.AppConfig',
+                  'nf.ng.AppCtrl',
+                  'nf.ng.ServiceProvider',
+                  'nf.ng.Bridge',
+                  'nf.ErrorHandler',
+                  'nf.Storage'],
+              function ($,
+                        angular,
+                        nfCommon,
+                        appConfig,
+                        appCtrl,
+                        serviceProvider,
+                        nfNgBridge,
+                        nfErrorHandler,
+                        nfStorage) {
+                  return (nf.ng.BulletinBoardCtrl =
+                      factory($,
+                          angular,
+                          nfCommon,
+                          appConfig,
+                          appCtrl,
+                          serviceProvider,
+                          nfNgBridge,
+                          nfErrorHandler,
+                          nfStorage));
+              });
+      } 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, nfCommon, appConfig, appCtrl, serviceProvider, nfNgBridge, nfErrorHandler, nfStorage) {
+       'use strict';
+    
+        $(document).ready(function () {
+    
+            //Create Angular App
+            var app = angular.module('ngBulletinBoardApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
+    
+            //Define Dependency Injection Annotations
+          appConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
+          appCtrl.$inject = ['$scope', 'serviceProvider', 'bulletinBoardCtrl'];
+          nfBulletinBoard.$inject = ['serviceProvider'];
+          serviceProvider.$inject = [];
+    
+            //Configure Angular App
+          app.config(appConfig);
+    
+            //Define Angular App Controllers
+          app.controller('ngBulletinBoardAppCtrl', appCtrl);
+    
+            //Define Angular App Services
+          app.service('serviceProvider', serviceProvider);
+          app.service('bulletinBoardCtrl', nfBulletinBoard);
+    
+            //Manually Boostrap Angular App
+          nfNgBridge.injector = angular.bootstrap($('body'), ['ngBulletinBoardApp'], {strictDi: true});
+    
+            // initialize the bulletin board
+          nfNgBridge.injector.get('bulletinBoardCtrl').init();
+      });
+  
+      var nfBulletinBoard = function (serviceProvider) {
+    
+            /**
+             * 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'
+                }
+            };
+    
+            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();
+                });
+    
+                // filter type
+                $('#bulletin-board-filter-type').combo({
+                    options: [{
+                        text: nf._.msg('nf-bulletin-board.ByMessage'),
+                        value: 'message'
+                    }, {
+                        text: nf._.msg('nf-bulletin-board.ByName'),
+                        value: 'sourceName'
+                    }, {
+                        text: nf._.msg('nf-bulletin-board.ById'),
+                        value: 'sourceId'
+                    }, {
+                        text: nf._.msg('nf-bulletin-board.ByGroupId'),
+                        value: 'groupId'
+                    }]
+                });
+    
+                // get the about details
+                var getTitle = $.ajax({
+                    type: 'GET',
+                    url: config.urls.about,
+                    dataType: 'json'
+                }).done(function (response) {
+                    var aboutDetails = response.about;
+                    var bulletinBoardTitle = nf._.msg('nf-about')+ nf._.msg('nf-bulletin-board.BulletinBoard');
+    
+                    // set the document title and the about title
+                    document.title = bulletinBoardTitle;
+                    $('#bulletin-board-header-text').text(bulletinBoardTitle);
+              }).fail(nfErrorHandler.handleAjaxError);
+    
+                // 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 (nfCommon.isDefinedAndNotNull(response.banners)) {
+                              if (nfCommon.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('bulletin-board');
+                                }
+    
+                              if (nfCommon.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) {
+                          nfErrorHandler.handleAjaxError(xhr, status, error);
+                            deferred.reject();
+                        });
+                    } else {
+                        deferred.resolve();
+                    }
+                });
+    
+                return $.Deferred(function (deferred) {
+                    $.when(getTitle, loadBanners).done(function () {
+                        deferred.resolve();
+                    }).fail(function () {
+                        deferred.reject();
+                    });
+                }).promise();
+            };
+    
+            /**
+             * Starts polling for new bulletins.
+             */
+            var start = function () {
+                var refreshButton = $('#refresh-button');
+                var bulletinContainer = $('#bulletin-board-container');
+    
+                appendAndScroll(bulletinContainer, '<div class="bulletin-action">'+nf._.msg('nf-bulletin-board.Message3')+'</div>');
+    
+                // 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, '<div class="bulletin-action">'+nf._.msg('nf-bulletin-board.Message4')+'</div>');
+    
+                // 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 (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && nfCommon.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"
+                        });
+                    }
+    
+                  nfStorage.init();
+    
+                    initializePage().done(function () {
+                        start();
+                    });
+                },
+    
+                /**
+                 * Loads the bulletins since the last refresh.
+                 */
+                loadBulletins: function () {
+                    var data = {};
+    
+                    // include the timestamp if appropriate
+                  if (nfCommon.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 = $('<div class="bulletin-action"></div>').text(nf._.msg('nf-bulletin-board.Message1') + filterOption.text + nf._.msg('nf-bulletin-board.Message2') + filter + '\'');
+                            appendAndScroll(bulletinContainer, filterContent.get(0));
+                            filterText = filter;
+                            filterType = filterOption.text;
+                        }
+                    } else if (filterText !== null) {
+                        appendAndScroll(bulletinContainer, '<div class="bulletin-action">'+nf._.msg('nf-bulletin-board.Message5')+'</div>');
+                        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 (nfCommon.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 (nfCommon.isDefinedAndNotNull(bulletin.sourceId) && nfCommon.isDefinedAndNotNull(bulletin.groupId) && top !== window) {
+                                        source = $('<div class="bulletin-source bulletin-link"></div>').text(bulletin.sourceId).on('click', function () {
+                                            goToSource(bulletin.groupId, bulletin.sourceId);
+                                        });
+                                    } else {
+                                        var sourceId = bulletin.sourceId;
+                                      if (nfCommon.isUndefined(sourceId) || nfCommon.isNull(sourceId)) {
+                                            sourceId = '';
+                                        }
+                                        source = $('<div class="bulletin-source"></div>').text(sourceId);
+                                    }
+    
+                                    // build the markup for this bulletin
+                                    var bulletinMarkup = $('<div class="bulletin"></div>');
+    
+                                    // build the markup for this bulletins info
+                                    var bulletinInfoMarkup = $('<div class="bulletin-info"></div>').appendTo(bulletinMarkup);
+                                    $('<div class="bulletin-timestamp"></div>').text(bulletin.timestamp).appendTo(bulletinInfoMarkup);
+                                    $('<div class="bulletin-severity"></div>').addClass(severityStyle).text(bulletin.level).appendTo(bulletinInfoMarkup);
+                                    source.appendTo(bulletinInfoMarkup);
+                                    $('<div class="clear"></div>').appendTo(bulletinInfoMarkup);
+    
+                                    // format the node address if applicable
+                                  if (nfCommon.isDefinedAndNotNull(bulletin.nodeAddress)) {
+                                        $('<div class="bulletin-node"></div>').text(bulletin.nodeAddress).appendTo(bulletinMarkup);
+                                    }
+    
+                                    // add the bulletin message (treat as text)
+                                    $('<pre class="bulletin-message"></pre>').text(bulletin.message).appendTo(bulletinMarkup);
+                                    $('<div class="clear"></div>').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('<div class="bulletin-action">&#8230;</div>');
+                            }
+                        }
+                    }).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 {
+                          nfErrorHandler.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;
+        };
+    
+      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-breadcrumbs-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js
new file mode 100644
index 000000000000..72cd57ba0f74
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js
@@ -0,0 +1,192 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common'],
+            function ($, nfCommon) {
+                return (nf.ng.BreadcrumbsCtrl = factory($, nfCommon));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.BreadcrumbsCtrl =
+            factory(require('jquery'),
+                require('nf.Common')));
+    } else {
+        nf.ng.BreadcrumbsCtrl = factory(root.$,
+            root.nf.Common);
+    }
+}(this, function ($, nfCommon) {
+    'use strict';
+
+    return function (serviceProvider) {
+        'use strict';
+
+        function BreadcrumbsCtrl() {
+            this.breadcrumbs = [];
+        }
+
+        BreadcrumbsCtrl.prototype = {
+            constructor: BreadcrumbsCtrl,
+
+            /**
+             *  Register the breadcrumbs controller.
+             */
+            register: function () {
+                if (serviceProvider.breadcrumbsCtrl === undefined) {
+                    serviceProvider.register('breadcrumbsCtrl', breadcrumbsCtrl);
+                }
+            },
+
+            /**
+             * Generate the breadcrumbs.
+             *
+             * @param {object} breadcrumbEntity  The breadcrumb
+             */
+            generateBreadcrumbs: function (breadcrumbEntity) {
+                var label = breadcrumbEntity.id;
+                if (breadcrumbEntity.permissions.canRead) {
+                    label = breadcrumbEntity.breadcrumb.name;
+                }
+
+                this.breadcrumbs.unshift($.extend({
+                    'label': label
+                }, breadcrumbEntity));
+
+                if (nfCommon.isDefinedAndNotNull(breadcrumbEntity.parentBreadcrumb)) {
+                    this.generateBreadcrumbs(breadcrumbEntity.parentBreadcrumb);
+                }
+            },
+
+            /**
+             * Reset the breadcrumbs.
+             */
+            resetBreadcrumbs: function () {
+                this.breadcrumbs = [];
+            },
+
+            /**
+             * Get the breadcrumbs.
+             */
+            getBreadcrumbs: function () {
+                return this.breadcrumbs;
+            },
+
+            /**
+             * Update the breadcrumbs css.
+             *
+             * @param {object} style  The style to be applied.
+             */
+            updateBreadcrumbsCss: function (style) {
+                $('#breadcrumbs').css(style);
+            },
+
+            /**
+             * Reset initial scroll position.
+             */
+            resetScrollPosition: function () {
+                var title = $('#data-flow-title-container');
+                var titlePosition = title.position();
+                var titleWidth = title.outerWidth();
+                var titleRight = titlePosition.left + titleWidth;
+
+                var padding = $('#breadcrumbs-right-border').width();
+                var viewport = $('#data-flow-title-viewport');
+                var viewportWidth = viewport.width();
+                var viewportRight = viewportWidth - padding;
+
+                // if the title's right is past the viewport's right, shift accordingly
+                if (titleRight > viewportRight) {
+                    // adjust the position
+                    title.css('left', (titlePosition.left - (titleRight - viewportRight)) + 'px');
+                } else {
+                    title.css('left', '10px');
+                }
+            },
+
+            /**
+             * Registers a scroll event on the `element`
+             *
+             * @param {object} element    The element event listener will be registered upon.
+             */
+            registerMouseWheelEvent: function (element) {
+                // mousewheel -> IE, Chrome
+                // DOMMouseScroll -> FF
+                // wheel -> FF, IE
+
+                // still having issues with this in IE :/
+                element.on('DOMMouseScroll mousewheel', function (evt, d) {
+                    if (nfCommon.isUndefinedOrNull(evt.originalEvent)) {
+                        return;
+                    }
+
+                    var title = $('#data-flow-title-container');
+                    var titlePosition = title.position();
+                    var titleWidth = title.outerWidth();
+                    var titleRight = titlePosition.left + titleWidth;
+
+                    var padding = $('#breadcrumbs-right-border').width();
+                    var viewport = $('#data-flow-title-viewport');
+                    var viewportWidth = viewport.width();
+                    var viewportRight = viewportWidth - padding;
+
+                    // if the width of the title is larger than the viewport
+                    if (titleWidth > viewportWidth) {
+                        var adjust = false;
+
+                        var delta = 0;
+
+                        //Chrome and Safari both have evt.originalEvent.detail defined but
+                        //evt.originalEvent.wheelDelta holds the correct value so we must
+                        //check for evt.originalEvent.wheelDelta first!
+                        if (nfCommon.isDefinedAndNotNull(evt.originalEvent.wheelDelta)) {
+                            delta = evt.originalEvent.wheelDelta;
+                        } else if (nfCommon.isDefinedAndNotNull(evt.originalEvent.detail)) {
+                            delta = -evt.originalEvent.detail;
+                        }
+
+                        // determine the increment
+                        if (delta > 0 && titleRight > viewportRight) {
+                            var increment = -25;
+                            adjust = true;
+                        } else if (delta < 0 && (titlePosition.left - padding) < 0) {
+                            increment = 25;
+
+                            // don't shift too far
+                            if (titlePosition.left + increment > padding) {
+                                increment = padding - titlePosition.left;
+                            }
+
+                            adjust = true;
+                        }
+
+                        if (adjust) {
+                            // adjust the position
+                            title.css('left', (titlePosition.left + increment) + 'px');
+                        }
+                    }
+                });
+            }
+        }
+
+        var breadcrumbsCtrl = new BreadcrumbsCtrl();
+        breadcrumbsCtrl.register();
+        return breadcrumbsCtrl;
+    }
+}));
\ No newline at end of file
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
new file mode 100644
index 000000000000..b4acd58bacc9
--- /dev/null
+++ 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
@@ -0,0 +1,520 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.CanvasUtils',
+                  'nf.ContextMenu',
+                  'nf.ClusterSummary',
+                  'nf.ErrorHandler',
+                  'nf.Settings'],
+              function ($, nfCommon, nfDialog, nfCanvasUtils, nfContextMenu, nfClusterSummary, nfErrorHandler, nfSettings) {
+                  return (nf.ng.Canvas.FlowStatusCtrl = factory($, nfCommon, nfDialog, nfCanvasUtils, nfContextMenu, nfClusterSummary, nfErrorHandler, nfSettings));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.Canvas.FlowStatusCtrl =
+              factory(require('jquery'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ContextMenu'),
+                  require('nf.ClusterSummary'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Settings')));
+      } else {
+          nf.ng.Canvas.FlowStatusCtrl = factory(root.$,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.CanvasUtils,
+              root.nf.ContextMenu,
+              root.nf.ClusterSummary,
+              root.nf.ErrorHandler,
+              root.nf.Settings);
+      }
+  }(this, function ($, nfCommon, nfDialog, nfCanvasUtils, nfContextMenu, nfClusterSummary, nfErrorHandler, nfSettings) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
+            var config = {
+                search: 'Search',
+                urls: {
+                    search: '../nifi-api/flow/search-results',
+                    status: '../nifi-api/flow/status'
+                }
+            };
+    
+            function FlowStatusCtrl() {
+                this.connectedNodesCount = "-";
+                this.activeThreadCount = "-";
+                this.totalQueued = "-";
+                this.controllerTransmittingCount = "-";
+                this.controllerNotTransmittingCount = "-";
+                this.controllerRunningCount = "-";
+                this.controllerStoppedCount = "-";
+                this.controllerInvalidCount = "-";
+                this.controllerDisabledCount = "-";
+                this.statsLastRefreshed = "-";
+    
+                /**
+                 * The search controller.
+                 */
+                this.search = {
+    
+                    /**
+                     * Get the search input element.
+                     */
+                    getInputElement: function () {
+                        return $('#search-field');
+                    },
+    
+                    /**
+                     * Get the search button element.
+                     */
+                    getButtonElement: function () {
+                        return $('#search-button');
+                    },
+    
+                    /**
+                     * Get the search container element.
+                     */
+                    getSearchContainerElement: function () {
+                        return $('#search-container');
+                    },
+    
+                    /**
+                     * Initialize the search controller.
+                     */
+                    init: function () {
+    
+                      var searchCtrl = this;
+    
+                        // Create new jQuery UI widget
+                        $.widget('nf.searchAutocomplete', $.ui.autocomplete, {
+                            reset: function () {
+                                this.term = null;
+                            },
+                          _create: function () {
+                              this._super();
+                              this.widget().menu('option', 'items', '> :not(.search-header, .search-no-matches)');
+                          },
+                            _resizeMenu: function () {
+                                var ul = this.menu.element;
+                              ul.width(400);
+                            },
+                            _normalize: function (searchResults) {
+                                var items = [];
+                                items.push(searchResults);
+                                return items;
+                            },
+                            _renderMenu: function (ul, items) {
+                              var nfSearchAutocomplete = this;
+    
+                                // the object that holds the search results is normalized into a single element array
+                                var searchResults = items[0];
+    
+                                // show all processors
+                              if (!nfCommon.isEmpty(searchResults.processorResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-processor"></div>'+nf._.msg('nf-canvas-flow-status-controller.Processors')+'</li>');
+                                    $.each(searchResults.processorResults, function (i, processorMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, processorMatch);
+                                    });
+                                }
+    
+                                // show all process groups
+                              if (!nfCommon.isEmpty(searchResults.processGroupResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-group"></div>'+nf._.msg('nf-canvas-flow-status-controller.ProcessGroups')+'</li>');
+                                    $.each(searchResults.processGroupResults, function (i, processGroupMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, processGroupMatch);
+                                    });
+                                }
+    
+                                // show all remote process groups
+                              if (!nfCommon.isEmpty(searchResults.remoteProcessGroupResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-group-remote"></div>'+nf._.msg('nf-canvas-flow-status-controller.RemoteProcessGroups')+'</li>');
+                                    $.each(searchResults.remoteProcessGroupResults, function (i, remoteProcessGroupMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, remoteProcessGroupMatch);
+                                    });
+                                }
+    
+                                // show all connections
+                              if (!nfCommon.isEmpty(searchResults.connectionResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-connect"></div>'+nf._.msg('nf-canvas-flow-status-controller.Connection')+'</li>');
+                                    $.each(searchResults.connectionResults, function (i, connectionMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, connectionMatch);
+                                    });
+                                }
+    
+                                // show all input ports
+                              if (!nfCommon.isEmpty(searchResults.inputPortResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-port-in"></div>'+nf._.msg('nf-canvas-flow-status-controller.InputPorts')+'</li>');
+                                    $.each(searchResults.inputPortResults, function (i, inputPortMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, inputPortMatch);
+                                    });
+                                }
+    
+                                // show all output ports
+                              if (!nfCommon.isEmpty(searchResults.outputPortResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-port-out"></div>'+nf._.msg('nf-canvas-flow-status-controller.OutputPorts')+'</li>');
+                                    $.each(searchResults.outputPortResults, function (i, outputPortMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, outputPortMatch);
+                                    });
+                                }
+    
+                                // show all funnels
+                              if (!nfCommon.isEmpty(searchResults.funnelResults)) {
+                              ul.append('<li class="search-header"><div class="search-result-icon icon icon-funnel"></div>'+nf._.msg('nf-canvas-flow-status-controller.Funnel')+'</li>');
+                                    $.each(searchResults.funnelResults, function (i, funnelMatch) {
+                                      nfSearchAutocomplete._renderItem(ul, funnelMatch);
+                                    });
+                                }
+    
+                                // ensure there were some results
+                                if (ul.children().length === 0) {
+                              ul.append('<li class="unset search-no-matches">'+nf._.msg('nf-canvas-flow-status-controller.no-matches')+'</li>');
+                                }
+                            },
+                            _renderItem: function (ul, match) {
+                                var itemContent = $('<a></a>').append($('<div class="search-match-header"></div>').text(match.name));
+                                $.each(match.matches, function (i, match) {
+                                    itemContent.append($('<div class="search-match"></div>').text(match));
+                                });
+                                return $('<li></li>').data('ui-autocomplete-item', match).append(itemContent).appendTo(ul);
+                            }
+                      });
+    
+                        // configure the new searchAutocomplete jQuery UI widget
+                        this.getInputElement().searchAutocomplete({
+                            appendTo: '#search-flow-results',
+                            position: {
+                                my: 'right top',
+                                at: 'right bottom',
+                                offset: '1 1'
+                            },
+                            source: function (request, response) {
+                                // create the search request
+                                $.ajax({
+                                    type: 'GET',
+                                    data: {
+                                        q: request.term
+                                    },
+                                    dataType: 'json',
+                                    url: config.urls.search
+                                }).done(function (searchResponse) {
+                                    response(searchResponse.searchResultsDTO);
+                                });
+                            },
+                            select: function (event, ui) {
+                                var item = ui.item;
+    
+                                // show the selected component
+                              nfCanvasUtils.showComponent(item.groupId, item.id);
+    
+                              searchCtrl.getInputElement().val('').blur();
+    
+                                // stop event propagation
+                                return false;
+                            },
+                            open: function (event, ui) {
+                                // show the glass pane
+                                var searchField = $(this);
+                                $('<div class="search-glass-pane"></div>').one('click', function () {
+                                }).appendTo('body');
+                            },
+                            close: function (event, ui) {
+                                // set the input text to '' and reset the cached term
+                                $(this).searchAutocomplete('reset');
+                              searchCtrl.getInputElement().val('');
+    
+                                // remove the glass pane
+                                $('div.search-glass-pane').remove();
+                            }
+                        });
+    
+                        // hide the search input
+                      searchCtrl.toggleSearchField();
+                    },
+    
+                    /**
+                     * Toggle/Slide the search field open/closed.
+                     */
+                    toggleSearchField: function () {
+                      var searchCtrl = this;
+    
+                        // hide the context menu if necessary
+                      nfContextMenu.hide();
+    
+                      var isVisible = searchCtrl.getInputElement().is(':visible');
+                        var display = 'none';
+                        var class1 = 'search-container-opened';
+                        var class2 = 'search-container-closed';
+                        if (!isVisible) {
+                          searchCtrl.getButtonElement().css('background-color', '#FFFFFF');
+                            display = 'inline-block';
+                            class1 = 'search-container-closed';
+                            class2 = 'search-container-opened';
+                        } else {
+                          searchCtrl.getInputElement().css('display', display);
+                        }
+    
+                        this.getSearchContainerElement().switchClass(class1, class2, 500, function () {
+                          searchCtrl.getInputElement().css('display', display);
+                            if (!isVisible) {
+                              searchCtrl.getButtonElement().css('background-color', '#FFFFFF');
+                              searchCtrl.getInputElement().focus();
+                            } else {
+                              searchCtrl.getButtonElement().css('background-color', '#E3E8EB');
+                            }
+                        });
+                    }
+                }
+    
+                /**
+                 * The bulletins controller.
+                 */
+                this.bulletins = {
+    
+                    /**
+                     * Update the bulletins.
+                     *
+                     * @param response  The controller bulletins returned from the `../nifi-api/controller/bulletins` endpoint.
+                     */
+                    update: function (response) {
+    
+                        // icon for system bulletins
+                        var bulletinIcon = $('#bulletin-button');
+                        var currentBulletins = bulletinIcon.data('bulletins');
+    
+                        // update the bulletins if necessary
+                      if (nfCommon.doBulletinsDiffer(currentBulletins, response.bulletins)) {
+                            bulletinIcon.data('bulletins', response.bulletins);
+    
+                            // get the formatted the bulletins
+                          var bulletins = nfCommon.getFormattedBulletins(response.bulletins);
+    
+                            // bulletins for this processor are now gone
+                            if (bulletins.length === 0) {
+                                if (bulletinIcon.data('qtip')) {
+                                    bulletinIcon.removeClass('has-bulletins').qtip('api').destroy(true);
+                                }
+                            } else {
+                              var newBulletins = nfCommon.formatUnorderedList(bulletins);
+    
+                                // different bulletins, refresh
+                                if (bulletinIcon.data('qtip')) {
+                                    bulletinIcon.qtip('option', 'content.text', newBulletins);
+                                } else {
+                                    // no bulletins before, show icon and tips
+                                    bulletinIcon.addClass('has-bulletins').qtip($.extend({},
+                                      nfCanvasUtils.config.systemTooltipConfig,
+                                        {
+                                            content: newBulletins,
+                                            position: {
+                                                at: 'bottom left',
+                                                my: 'top right',
+                                                adjust: {
+                                                    x: 4
+                                                }
+                                            }
+                                        }
+                                    ));
+                                }
+                            }
+                        }
+    
+                        // update controller service and reporting task bulletins
+                      nfSettings.setBulletins(response.controllerServiceBulletins, response.reportingTaskBulletins);
+                    }
+    
+                }
+            }
+    
+            FlowStatusCtrl.prototype = {
+                constructor: FlowStatusCtrl,
+    
+                /**
+                 * Initialize the flow status controller.
+                 */
+                init: function () {
+                    this.search.init();
+                },
+    
+                /**
+                 * Reloads the current status of the flow.
+                 */
+                reloadFlowStatus: function () {
+                  var flowStatusCtrl = this;
+    
+                    return $.ajax({
+                        type: 'GET',
+                        url: config.urls.status,
+                        dataType: 'json'
+                    }).done(function (response) {
+                        // report the updated status
+                      if (nfCommon.isDefinedAndNotNull(response.controllerStatus)) {
+                          flowStatusCtrl.update(response.controllerStatus);
+                        }
+                  }).fail(nfErrorHandler.handleAjaxError);
+                },
+    
+                /**
+                 * Updates the cluster summary.
+                 *
+               * @param summary
+                 */
+              updateClusterSummary: function (summary) {
+                    // see if this node has been (dis)connected
+                  if (nfClusterSummary.isConnectedToCluster() !== summary.connectedToCluster) {
+                      if (summary.connectedToCluster) {
+                          nfDialog.showConnectedToClusterMessage();
+                        } else {
+                          nfDialog.showDisconnectedFromClusterMessage();
+                        }
+                    }
+    
+                    var color = '#728E9B';
+    
+                    // update the connection state
+                  if (summary.connectedToCluster) {
+                      if (nfCommon.isDefinedAndNotNull(summary.connectedNodes)) {
+                          var connectedNodes = summary.connectedNodes.split(' / ');
+                            if (connectedNodes.length === 2 && connectedNodes[0] !== connectedNodes[1]) {
+                                this.clusterConnectionWarning = true;
+                                color = '#BA554A';
+                            }
+                        }
+                        this.connectedNodesCount =
+                          nfCommon.isDefinedAndNotNull(summary.connectedNodes) ? summary.connectedNodes : '-';
+                    } else {
+                        this.connectedNodesCount = 'Disconnected';
+                        color = '#BA554A';
+                    }
+    
+                    // update the color
+                    $('#connected-nodes-count').closest('div.fa-cubes').css('color', color);
+                },
+    
+                /**
+                 * Update the flow status counts.
+                 *
+                 * @param status  The controller status returned from the `../nifi-api/flow/status` endpoint.
+                 */
+                update: function (status) {
+                  var controllerInvalidCount = (nfCommon.isDefinedAndNotNull(status.invalidCount)) ? status.invalidCount : 0;
+  
+                  if (this.controllerInvalidCount > 0) {
+                      $('#controller-invalid-count').parent().removeClass('zero').addClass('invalid');
+                  } else {
+                      $('#controller-invalid-count').parent().removeClass('invalid').addClass('zero');
+                  }
+    
+                    // update the report values
+                    this.activeThreadCount = status.activeThreadCount;
+    
+                  if (this.activeThreadCount > 0) {
+                      $('#flow-status-container').find('.icon-threads').removeClass('zero');
+                  } else {
+                      $('#flow-status-container').find('.icon-threads').addClass('zero');
+                  }
+  
+                    this.totalQueued = status.queued;
+    
+                  if (this.totalQueued.indexOf('0 / 0') >= 0) {
+                      $('#flow-status-container').find('.fa-list').addClass('zero');
+                  } else {
+                      $('#flow-status-container').find('.fa-list').removeClass('zero');
+                  }
+  
+                    // update the component counts
+                    this.controllerTransmittingCount =
+                      nfCommon.isDefinedAndNotNull(status.activeRemotePortCount) ?
+                            status.activeRemotePortCount : '-';
+    
+                  if (this.controllerTransmittingCount > 0) {
+                      $('#flow-status-container').find('.fa-bullseye').removeClass('zero').addClass('transmitting');
+                  } else {
+                      $('#flow-status-container').find('.fa-bullseye').removeClass('transmitting').addClass('zero');
+                  }
+  
+                    this.controllerNotTransmittingCount =
+                      nfCommon.isDefinedAndNotNull(status.inactiveRemotePortCount) ?
+                            status.inactiveRemotePortCount : '-';
+    
+                  if (this.controllerNotTransmittingCount > 0) {
+                      $('#flow-status-container').find('.icon-transmit-false').removeClass('zero').addClass('not-transmitting');
+                  } else {
+                      $('#flow-status-container').find('.icon-transmit-false').removeClass('not-transmitting').addClass('zero');
+                  }
+  
+                    this.controllerRunningCount =
+                      nfCommon.isDefinedAndNotNull(status.runningCount) ? status.runningCount : '-';
+  
+                  if (this.controllerRunningCount > 0) {
+                      $('#flow-status-container').find('.fa-play').removeClass('zero').addClass('running');
+                  } else {
+                      $('#flow-status-container').find('.fa-play').removeClass('running').addClass('zero');
+                  }
+    
+                    this.controllerStoppedCount =
+                      nfCommon.isDefinedAndNotNull(status.stoppedCount) ? status.stoppedCount : '-';
+  
+                  if (this.controllerStoppedCount > 0) {
+                      $('#flow-status-container').find('.fa-stop').removeClass('zero').addClass('stopped');
+                  } else {
+                      $('#flow-status-container').find('.fa-stop').removeClass('stopped').addClass('zero');
+                  }
+    
+                    this.controllerInvalidCount =
+                      nfCommon.isDefinedAndNotNull(status.invalidCount) ? status.invalidCount : '-';
+  
+                  if (this.controllerInvalidCount > 0) {
+                      $('#flow-status-container').find('.fa-warning').removeClass('zero').addClass('invalid');
+                  } else {
+                      $('#flow-status-container').find('.fa-warning').removeClass('invalid').addClass('zero');
+                  }
+    
+                    this.controllerDisabledCount =
+                      nfCommon.isDefinedAndNotNull(status.disabledCount) ? status.disabledCount : '-';
+  
+                  if (this.controllerDisabledCount > 0) {
+                      $('#flow-status-container').find('.icon-enable-false').removeClass('zero').addClass('disabled');
+                  } else {
+                      $('#flow-status-container').find('.icon-enable-false').removeClass('disabled').addClass('zero');
+                  }
+    
+                },
+    
+                /**
+                 * Updates the controller level bulletins
+                 *
+                 * @param response
+                 */
+                updateBulletins: function (response) {
+                    this.bulletins.update(response);
+                }
+            }
+    
+            var flowStatusCtrl = new FlowStatusCtrl();
+            return flowStatusCtrl;
+        };
+  }));
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
new file mode 100644
index 000000000000..ef06518a7944
--- /dev/null
+++ 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
@@ -0,0 +1,440 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.QueueListing',
+                  'nf.Shell',
+                  'nf.PolicyManagement',
+                  'nf.ClusterSummary',
+                  'nf.ErrorHandler',
+                  'nf.Settings',
+                  'nf.CanvasUtils'],
+              function ($, nfCommon, nfQueueListing, nfShell, nfPolicyManagement, nfClusterSummary, nfErrorHandler, nfSettings, nfCanvasUtils) {
+                  return (nf.ng.Canvas.GlobalMenuCtrl = factory($, nfCommon, nfQueueListing, nfShell, nfPolicyManagement, nfClusterSummary, nfErrorHandler, nfSettings, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.Canvas.GlobalMenuCtrl =
+              factory(require('jquery'),
+                  require('nf.Common'),
+                  require('nf.QueueListing'),
+                  require('nf.Shell'),
+                  require('nf.PolicyManagement'),
+                  require('nf.ClusterSummary'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Settings'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.ng.Canvas.GlobalMenuCtrl = factory(root.$,
+              root.nf.Common,
+              root.nf.QueueListing,
+              root.nf.Shell,
+              root.nf.PolicyManagement,
+              root.nf.ClusterSummary,
+              root.nf.ErrorHandler,
+              root.nf.Settings,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, nfCommon, nfQueueListing, nfShell, nfPolicyManagement, nfClusterSummary, nfErrorHandler, nfSettings, nfCanvasUtils) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
+            var config = {
+                urls: {
+                    helpDocument: '../nifi-docs/documentation',
+                    controllerAbout: '../nifi-api/flow/about'
+                }
+            };
+    
+            function GlobalMenuCtrl(serviceProvider) {
+    
+                /**
+                 * The summary menu item controller.
+                 */
+                this.summary = {
+    
+                    /**
+                     * The summary menu item's shell controller.
+                     */
+                    shell: {
+    
+                        /**
+                         * Launch the summary shell.
+                         */
+                        launch: function () {
+                          nfShell.showPage('summary');
+                        }
+                    }
+                };
+    
+                /**
+                 * The counters menu item controller.
+                 */
+                this.counters = {
+    
+                    /**
+                     * The counters menu item's shell controller.
+                     */
+                    shell: {
+    
+                        /**
+                         * Launch the counters shell.
+                         */
+                        launch: function () {
+                          if (nfCommon.canAccessCounters()) {
+                              nfShell.showPage('counters');
+                            }
+                        }
+                    }
+                };
+    
+                /**
+                 * The bulletin board menu item controller.
+                 */
+                this.bulletinBoard = {
+    
+                    /**
+                     * The bulletin board menu item's shell controller.
+                     */
+                    shell: {
+    
+                        /**
+                         * Launch the bulletin board shell.
+                         */
+                        launch: function () {
+                          nfShell.showPage('bulletin-board');
+                        }
+                    }
+                };
+    
+                /**
+                 * The data provenance menu item controller.
+                 */
+                this.dataProvenance = {
+    
+                    /**
+                     * The data provenance menu item's shell controller.
+                     */
+                    shell: {
+    
+                        /**
+                         * Launch the data provenance shell.
+                         */
+                        launch: function () {
+                          if (nfCommon.canAccessProvenance()) {
+                              nfShell.showPage('provenance');
+                            }
+                        }
+                    }
+                };
+    
+                /**
+                 * The controller settings menu item controller.
+                 */
+                this.controllerSettings = {
+    
+                    /**
+                     * The controller settings menu item's shell controller.
+                     */
+                    shell: {
+    
+                        /**
+                         * Launch the settings shell.
+                         */
+                        launch: function () {
+                          nfSettings.showSettings();
+                        }
+                    }
+                };
+    
+                /**
+                 * The cluster menu item controller.
+                 */
+                this.cluster = {
+    
+                    /**
+                     * Determines if the cluster menu item is enabled.
+                     *
+                     * @returns {*|boolean}
+                     */
+                    visible: function () {
+                      return nfClusterSummary.isConnectedToCluster();
+                    },
+    
+                    /**
+                     * The cluster menu item's shell controller.
+                     */
+                    shell: {
+    
+                        /**
+                         * Launch the cluster shell.
+                         */
+                        launch: function () {
+                          if (nfCommon.canAccessController()) {
+                              nfShell.showPage('cluster');
+                            }
+                        }
+                    }
+                };
+    
+                /**
+                 * The flow config history menu item controller.
+                 */
+                this.flowConfigHistory = {
+    
+                    /**
+                     * The flow config history menu item's shell controller.
+                     */
+                    shell: {
+    
+                        /**
+                         * Launch the history shell.
+                         */
+                        launch: function () {
+                          nfShell.showPage('history');
+                        }
+                    }
+                };
+    
+                /**
+                 * The users menu item controller.
+                 */
+                this.users = {
+    
+                    /**
+                     * The users menu item's shell controller.
+                     */
+                    shell: {
+    
+                        /**
+                         * Launch the users shell.
+                         */
+                        launch: function () {
+                          if (nfCommon.canAccessTenants()) {
+                              nfShell.showPage('users');
+                            }
+                        }
+                    }
+                };
+    
+                /**
+                 * The policies menu item controller.
+                 */
+                this.policies = {
+    
+                    /**
+                     * The policies menu item's shell controller.
+                     */
+                    shell: {
+    
+                        /**
+                         * Launch the policies shell.
+                         */
+                        launch: function () {
+                          if (nfCommon.canModifyPolicies() && nfCommon.canAccessTenants()) {
+                              nfPolicyManagement.showGlobalPolicies();
+                            }
+                        }
+                    }
+                };
+    
+                /**
+                 * The templates menu item controller.
+                 */
+                this.templates = {
+    
+                    /**
+                     * The templates menu item's shell controller.
+                     */
+                    shell: {
+    
+                        /**
+                         * Launch the templates shell.
+                         */
+                        launch: function () {
+                          nfShell.showPage('templates?' + $.param({
+                                  groupId: nfCanvasUtils.getGroupId()
+                                }));
+                        }
+                    }
+                };
+    
+                /**
+                 * The help menu item controller.
+                 */
+                this.help = {
+    
+                    /**
+                     * The help menu item's shell controller.
+                     */
+                    shell: {
+    
+                        /**
+                         * Launch the help documentation shell.
+                         */
+                        launch: function () {
+                          nfShell.showPage(config.urls.helpDocument);
+                        }
+                    }
+                };
+    
+                /**
+                 * The about menu item controller.
+                 */
+                this.about = {
+    
+                    /**
+                     * Initialize the about details.
+                     */
+                    init: function () {
+                        // get the about details
+                        $.ajax({
+                            type: 'GET',
+                            url: config.urls.controllerAbout,
+                            dataType: 'json'
+                        }).done(function (response) {
+                            var aboutDetails = response.about;
+                            // set the document title and the about title
+                      document.title = nf._.msg('nf-about');
+                            $('#nf-version').text(aboutDetails.version);
+                          var showVersionDetail = false;
+                          if (aboutDetails.buildTag && aboutDetails.buildTag !== 'HEAD') {
+                              $('#nf-about-build-tag').text(aboutDetails.buildTag);
+                              $('#nf-version-detail-tag').show();
+                              showVersionDetail = true;
+                          }
+                          if (aboutDetails.buildRevision) {
+                              $('#nf-about-build-revision').text(aboutDetails.buildRevision);
+                              $('#nf-about-build-branch').text(aboutDetails.buildBranch);
+                              $('#nf-version-detail-commit').show();
+                              showVersionDetail = true
+                          }
+                          if (aboutDetails.buildTimestamp) {
+                              $('#nf-about-build-timestamp').text(aboutDetails.buildTimestamp);
+                              $('#nf-version-detail-timestamp').show();
+                              showVersionDetail = true;
+                          }
+                          if (showVersionDetail) {
+                              $('#nf-version-detail').show();
+                          }
+    
+                            // store the content viewer url if available
+                          if (!nfCommon.isBlank(aboutDetails.contentViewerUrl)) {
+                                $('#nifi-content-viewer-url').text(aboutDetails.contentViewerUrl);
+                              nfQueueListing.initFlowFileDetailsDialog();
+                            }
+                      }).fail(nfErrorHandler.handleAjaxError);
+    
+                        this.modal.init();
+                    },
+    
+                    /**
+                     * The about menu item's modal controller.
+                     */
+                    modal: {
+    
+                        /**
+                         * Gets the modal element.
+                         *
+                         * @returns {*|jQuery|HTMLElement}
+                         */
+                        getElement: function () {
+                            return $('#nf-about');
+                        },
+    
+                        /**
+                         * Initialize the modal.
+                         */
+                        init: function () {
+                          var aboutModal = this;
+    
+                            var resizeAbout = function () {
+                                var dialog = $(this);
+                                var top = $('#nf-about-pic-container').height() + $('.dialog-header').height() + 10; //10 for padding-top
+                                dialog.find('.dialog-content').css('top', top);
+                            };
+    
+                            this.getElement().modal({
+                                scrollableContentStyle: 'scrollable',
+                          headerText: nf._.msg('nf-canvas-global-menu-controller.About'),
+                                handler: {
+                                    resize: resizeAbout
+                                },
+                                buttons: [{
+                              buttonText: nf._.msg('nf-canvas-global-menu-controller.OK'),
+                                    color: {
+                                        base: '#728E9B',
+                                        hover: '#004849',
+                                        text: '#ffffff'
+                                    },
+                                    handler: {
+                                        click: function () {
+                                          aboutModal.hide();
+                                        }
+                                    }
+                                }]
+                            });
+                        },
+    
+                        /**
+                         * Updates the modal config.
+                         *
+                         * @param {string} name             The name of the property to update.
+                         * @param {object|array} config     The config for the `name`.
+                         */
+                        update: function (name, config) {
+                            this.getElement().modal(name, config);
+                        },
+    
+                        /**
+                         * Show the modal
+                         */
+                        show: function () {
+                            this.getElement().modal('show');
+                        },
+    
+                        /**
+                         * Hide the modal
+                         */
+                        hide: function () {
+                            this.getElement().modal('hide');
+                        }
+                    }
+                }
+            }
+    
+            GlobalMenuCtrl.prototype = {
+                constructor: GlobalMenuCtrl,
+    
+                /**
+                 * Initialize the global menu controls.
+                 */
+                init: function () {
+                    this.about.init();
+                }
+            }
+    
+            var globalMenuCtrl = new GlobalMenuCtrl();
+            return globalMenuCtrl;
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js
new file mode 100644
index 000000000000..88c5844d69a8
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js
@@ -0,0 +1,351 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Actions',
+                  'nf.Birdseye',
+                  'nf.Storage',
+                  'nf.CanvasUtils',
+                  'nf.ProcessGroupConfiguration'],
+              function ($, nfActions, nfBirdseye, nfStorage, nfCanvasUtils, nfProcessGroupConfiguration) {
+                  return (nf.ng.Canvas.GraphControlsCtrl = factory($, nfActions, nfBirdseye, nfStorage, nfCanvasUtils, nfProcessGroupConfiguration));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.Canvas.GraphControlsCtrl =
+              factory(require('jquery'),
+                  require('nf.Actions'),
+                  require('nf.Birdseye'),
+                  require('nf.Storage'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ProcessGroupConfiguration')));
+      } else {
+          nf.ng.Canvas.GraphControlsCtrl = factory(root.$,
+              root.nf.Actions,
+              root.nf.Birdseye,
+              root.nf.Storage,
+              root.nf.CanvasUtils,
+              root.nf.ProcessGroupConfiguration);
+      }
+  }(this, function ($, nfActions, nfBirdseye, nfStorage, nfCanvasUtils, nfProcessGroupConfiguration) {
+      'use strict';
+  
+      return function (serviceProvider, navigateCtrl, operateCtrl) {
+            'use strict';
+    
+            /**
+             * Opens the specified graph control.
+             *
+             * @param {jQuery} graphControl
+             */
+            var openGraphControl = function (graphControl) {
+                // undock if necessary
+                if ($('div.graph-control-content').is(':visible') === false) {
+                    $('#graph-controls div.graph-control-docked').hide();
+                    $('#graph-controls div.graph-control-header-container').show();
+                    $('.graph-control').removeClass('docked');
+                }
+    
+                // show the content of the specified graph control
+                graphControl.children('div.graph-control-content').show();
+                graphControl.find('div.graph-control-expansion').removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
+    
+                // handle specific actions as necessary
+                if (graphControl.attr('id') === 'navigation-control') {
+                  nfBirdseye.updateBirdseyeVisibility(true);
+                }
+    
+                // get the current visibility
+              var graphControlVisibility = nfStorage.getItem('graph-control-visibility');
+                if (graphControlVisibility === null) {
+                    graphControlVisibility = {};
+                }
+    
+                // update the visibility for this graph control
+                var graphControlId = graphControl.attr('id');
+                graphControlVisibility[graphControlId] = true;
+              nfStorage.setItem('graph-control-visibility', graphControlVisibility);
+            };
+    
+            /**
+             * Hides the specified graph control.
+             *
+             * @param {jQuery} graphControl
+             */
+            var hideGraphControl = function (graphControl) {
+                // hide the content of the specified graph control
+                graphControl.children('div.graph-control-content').hide();
+                graphControl.find('div.graph-control-expansion').removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
+    
+                // dock if necessary
+                if ($('div.graph-control-content').is(':visible') === false) {
+                    $('#graph-controls div.graph-control-header-container').hide();
+                    $('#graph-controls div.graph-control-docked').show();
+                    $('.graph-control').addClass('docked');
+                }
+    
+                // handle specific actions as necessary
+                if (graphControl.attr('id') === 'navigation-control') {
+                  nfBirdseye.updateBirdseyeVisibility(false);
+                }
+    
+                // get the current visibility
+              var graphControlVisibility = nfStorage.getItem('graph-control-visibility');
+                if (graphControlVisibility === null) {
+                    graphControlVisibility = {};
+                }
+    
+                // update the visibility for this graph control
+                var graphControlId = graphControl.attr('id');
+                graphControlVisibility[graphControlId] = false;
+              nfStorage.setItem('graph-control-visibility', graphControlVisibility);
+            };
+    
+            function GraphControlsCtrl(navigateCtrl, operateCtrl) {
+                this.navigateCtrl = navigateCtrl;
+                this.operateCtrl = operateCtrl;
+            }
+    
+            GraphControlsCtrl.prototype = {
+                constructor: GraphControlsCtrl,
+    
+                /**
+                 *  Register the header controller.
+                 */
+                register: function () {
+                    if (serviceProvider.graphControlsCtrl === undefined) {
+                        serviceProvider.register('graphControlsCtrl', graphControlsCtrl);
+                    }
+                },
+    
+                /**
+                 * Initialize the graph controls.
+                 */
+                init: function () {
+                    this.operateCtrl.init();
+                    // initial the graph control visibility
+                  var graphControlVisibility = nfStorage.getItem('graph-control-visibility');
+                    if (graphControlVisibility !== null) {
+                        $.each(graphControlVisibility, function (id, isVisible) {
+                            var graphControl = $('#' + id);
+                            if (graphControl) {
+                                if (isVisible) {
+                                    openGraphControl(graphControl);
+                                } else {
+                                    hideGraphControl(graphControl);
+                                }
+                            }
+                        });
+                    } else {
+                        openGraphControl($('#navigation-control'));
+                        openGraphControl($('#operation-control'));
+                    }
+                },
+    
+                /**
+                 * Undock the graph control.
+                 * @param {jQuery} $event
+                 */
+                undock: function ($event) {
+                    openGraphControl($($event.target).parent());
+                },
+    
+                /**
+                 * Expand the graph control.
+                 * @param {jQuery} $event
+                 */
+                expand: function ($event) {
+                    var icon = $($event.target);
+                    if (icon.find('.fa-plus-square-o').length > 0 || icon.hasClass('fa-plus-square-o') || icon.parent().children().find('.fa-plus-square-o').length > 0) {
+                        openGraphControl(icon.closest('div.graph-control'));
+                    } else {
+                        hideGraphControl(icon.closest('div.graph-control'));
+                    }
+                },
+    
+                /**
+                 * Gets the icon to show for the selection context.
+                 */
+                getContextIcon: function () {
+                  var selection = nfCanvasUtils.getSelection();
+    
+                    if (selection.empty()) {
+                      if (nfCanvasUtils.getParentGroupId() === null) {
+                            return 'icon-drop';
+                        } else {
+                            return 'icon-group';
+                        }
+                    } else {
+                        if (selection.size() === 1) {
+                          if (nfCanvasUtils.isProcessor(selection)) {
+                                return 'icon-processor';
+                          } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                                return 'icon-group';
+                          } else if (nfCanvasUtils.isInputPort(selection)) {
+                                return 'icon-port-in';
+                          } else if (nfCanvasUtils.isOutputPort(selection)) {
+                                return 'icon-port-out';
+                          } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                                return 'icon-group-remote';
+                          } else if (nfCanvasUtils.isFunnel(selection)) {
+                                return 'icon-funnel';
+                          } else if (nfCanvasUtils.isLabel(selection)) {
+                                return 'icon-label';
+                          } else if (nfCanvasUtils.isConnection(selection)) {
+                                return 'icon-connect';
+                            }
+                        } else {
+                            return 'icon-drop';
+                        }
+                    }
+                },
+    
+                /**
+                 * Will hide target when appropriate.
+                 */
+                hide: function () {
+                  var selection = nfCanvasUtils.getSelection();
+                    if (selection.size() > 1) {
+                        return 'invisible'
+                    } else {
+                        return '';
+                    }
+                },
+    
+                /**
+                 * Gets the name to show for the selection context.
+                 */
+                getContextName: function () {
+                  var selection = nfCanvasUtils.getSelection();
+                  var canRead = nfCanvasUtils.canReadFromGroup();
+    
+                    if (selection.empty()) {
+                        if (canRead) {
+                          return nfCanvasUtils.getGroupName();
+                        } else {
+                          return nfCanvasUtils.getGroupId();
+                        }
+                    } else {
+                        if (selection.size() === 1) {
+                            var d = selection.datum();
+                            if (d.permissions.canRead) {
+                              if (nfCanvasUtils.isLabel(selection)) {
+                                    if ($.trim(d.component.label) !== '') {
+                                        return d.component.label;
+                                    } else {
+                                        return '';
+                                    }
+                              } else if (nfCanvasUtils.isConnection(selection)) {
+                                  return nfCanvasUtils.formatConnectionName(d.component);
+                                } else {
+                                    return d.component.name;
+                                }
+                            } else {
+                                return d.id;
+                            }
+                        } else {
+                            return 'Multiple components selected';
+                        }
+                    }
+                },
+    
+                /**
+                 * Gets the type to show for the selection context.
+                 */
+                getContextType: function () {
+                  var selection = nfCanvasUtils.getSelection();
+    
+                    if (selection.empty()) {
+                  return nf._.msg('nf-canvas-graph-controls-controller.ProcessGroup');
+                    } else {
+                        if (selection.size() === 1) {
+                          if (nfCanvasUtils.isProcessor(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.Processor');
+                      } else if (nf.CanvasUtils.isProcessGroup(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.ProcessGroup');
+                      } else if (nf.CanvasUtils.isInputPort(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.InputPort');
+                      } else if (nf.CanvasUtils.isOutputPort(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.OutputPort');
+                      } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.RemoteProcessGroup');
+                      } else if (nf.CanvasUtils.isFunnel(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.Funnel');
+                      } else if (nf.CanvasUtils.isLabel(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.Label');
+                      } else if (nf.CanvasUtils.isConnection(selection)) {
+                          return nf._.msg('nf-canvas-graph-controls-controller.Connection');
+                      }  
+                        } else {
+                      return nf._.msg('nf-canvas-graph-controls-controller.MultipleSelected');
+                        }
+                    }
+                },
+    
+                /**
+                 * Gets the id to show for the selection context.
+                 */
+                getContextId: function () {
+                  var selection = nfCanvasUtils.getSelection();
+    
+                    if (selection.empty()) {
+                      return nfCanvasUtils.getGroupId();
+                    } else {
+                        if (selection.size() === 1) {
+                            var d = selection.datum();
+                            return d.id;
+                        } else {
+                          return nf._.msg('nf-canvas-graph-controls-controller.MultipleSelected');
+                        }
+                    }
+                },
+    
+                /**
+                 * Determines whether the user can configure or open the details dialog.
+                 */
+                canConfigureOrOpenDetails: function () {
+                  var selection = nfCanvasUtils.getSelection();
+    
+                    if (selection.empty()) {
+                        return true;
+                    }
+    
+                  return nfCanvasUtils.isConfigurable(selection) || nfCanvasUtils.hasDetails(selection);
+                },
+    
+                /**
+                 * Opens either the configuration or details view based on the current state.
+                 */
+                openConfigureOrDetailsView: function () {
+                  var selection = nfCanvasUtils.getSelection();
+  
+                  if (nfCanvasUtils.isConfigurable(selection)) {
+                      nfActions.showConfiguration(selection);
+                  } else if (nfCanvasUtils.hasDetails(selection)) {
+                      nfActions.showDetails(selection);
+                  }
+                }
+            }
+    
+            var graphControlsCtrl = new GraphControlsCtrl(navigateCtrl, operateCtrl);
+            graphControlsCtrl.register();
+            return graphControlsCtrl;
+        };
+  }));
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
new file mode 100644
index 000000000000..6e4a30bf79b9
--- /dev/null
+++ 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
@@ -0,0 +1,155 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.Storage',
+                'nf.Shell',
+                'nf.ErrorHandler'],
+            function ($, nfCommon, nfStorage, nfShell, nfErrorHandler) {
+                return (nf.ng.Canvas.HeaderCtrl = factory($, nfCommon, nfStorage, nfShell, nfErrorHandler));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.Canvas.HeaderCtrl =
+            factory(require('jquery'),
+                require('nf.Common'),
+                require('nf.Storage'),
+                require('nf.Shell'),
+                require('nf.ErrorHandler')));
+    } else {
+        nf.ng.Canvas.HeaderCtrl = factory(root.$,
+            root.nf.Common,
+            root.nf.Storage,
+            root.nf.Shell,
+            root.nf.ErrorHandler);
+    }
+}(this, function ($, nfCommon, nfStorage, nfShell, nfErrorHandler) {
+    'use strict';
+
+    return function (serviceProvider, toolboxCtrl, globalMenuCtrl, flowStatusCtrl) {
+        'use strict';
+
+        var MIN_TOOLBAR_WIDTH = 640;
+
+        var config = {
+            urls: {
+                accessConfig: '../nifi-api/access/config'
+            }
+        };
+
+        function HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl) {
+            this.toolboxCtrl = toolboxCtrl;
+            this.globalMenuCtrl = globalMenuCtrl;
+            this.flowStatusCtrl = flowStatusCtrl;
+
+            /**
+             * The login controller.
+             */
+            this.loginCtrl = {
+
+                /**
+                 * Initialize the login controller.
+                 */
+                init: function () {
+                    var loginCtrl = this;
+
+                    // if the user is not anonymous or accessing via http
+                    if ($('#current-user').text() !== nfCommon.ANONYMOUS_USER_TEXT || location.protocol === 'http:') {
+                        $('#login-link-container').css('display', 'none');
+                    }
+
+                    // if accessing via http, don't show the current user
+                    if (location.protocol === 'http:') {
+                        $('#current-user-container').css('display', 'none');
+                    }
+
+                    // get the login config
+                    var loginXhr = $.ajax({
+                        type: 'GET',
+                        url: config.urls.accessConfig,
+                        dataType: 'json'
+                    });
+
+                    $.when(loginXhr).done(function (loginResult) {
+                        loginCtrl.supportsLogin = loginResult.config.supportsLogin;
+                    }).fail(nfErrorHandler.handleAjaxError);
+                },
+
+                /**
+                 * Boolean describing whether or not the NiFi instance supports login.
+                 */
+                supportsLogin: undefined,
+
+                /**
+                 * The login shell controller.
+                 */
+                shell: {
+
+                    /**
+                     * Launch the login shell.
+                     */
+                    launch: function () {
+                        nfShell.showPage('login', false);
+                    }
+                }
+            };
+
+            /**
+             * The logout controller.
+             */
+            this.logoutCtrl = {
+                logout: function () {
+                    nfStorage.removeItem("jwt");
+                    window.location = '/nifi';
+                }
+            };
+        }
+
+        HeaderCtrl.prototype = {
+            constructor: HeaderCtrl,
+
+            /**
+             *  Register the header controller.
+             */
+            register: function () {
+                if (serviceProvider.headerCtrl === undefined) {
+                    serviceProvider.register('headerCtrl', headerCtrl);
+                }
+            },
+
+            /**
+             * Initialize the canvas header.
+             *
+             * @argument {boolean} supportsLogin    Whether login is supported.
+             */
+            init: function () {
+                this.toolboxCtrl.init();
+                this.globalMenuCtrl.init();
+                this.flowStatusCtrl.init();
+                this.loginCtrl.init();
+            }
+        }
+
+        var headerCtrl = new HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl);
+        headerCtrl.register();
+        return headerCtrl;
+    };
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js
new file mode 100644
index 000000000000..46dc70fafb18
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js
@@ -0,0 +1,111 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['nf.CanvasUtils',
+                'nf.ContextMenu'],
+            function (nfCanvasUtils, nfContextMenu) {
+                return (nf.ng.Canvas.NavigateCtrl = factory(nfCanvasUtils, nfContextMenu));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.Canvas.NavigateCtrl =
+            factory(require('nf.CanvasUtils'),
+                require('nf.ContextMenu')));
+    } else {
+        nf.ng.Canvas.NavigateCtrl = factory(root.nf.CanvasUtils,
+            root.nf.ContextMenu);
+    }
+}(this, function (nfCanvasUtils, nfContextMenu) {
+    'use strict';
+
+    return function () {
+        'use strict';
+
+        function NavigateCtrl() {
+
+            /**
+             * Zoom in on the canvas.
+             */
+            this.zoomIn = function () {
+                nfCanvasUtils.zoomCanvasViewIn();
+
+                // hide the context menu
+                nfContextMenu.hide();
+
+                // refresh the canvas
+                nfCanvasUtils.refreshCanvasView({
+                    transition: true
+                });
+            };
+
+            /**
+             * Zoom out on the canvas.
+             */
+            this.zoomOut = function () {
+                nfCanvasUtils.zoomCanvasViewOut();
+
+                // hide the context menu
+                nfContextMenu.hide();
+
+                // refresh the canvas
+                nfCanvasUtils.refreshCanvasView({
+                    transition: true
+                });
+            };
+
+            /**
+             * Zoom fit on the canvas.
+             */
+            this.zoomFit = function () {
+                nfCanvasUtils.fitCanvasView();
+
+                // hide the context menu
+                nfContextMenu.hide();
+
+                // refresh the canvas
+                nfCanvasUtils.refreshCanvasView({
+                    transition: true
+                });
+            };
+
+            /**
+             * Zoom actual size on the canvas.
+             */
+            this.zoomActualSize = function () {
+                nfCanvasUtils.actualSizeCanvasView();
+
+                // hide the context menu
+                nfContextMenu.hide();
+
+                // refresh the canvas
+                nfCanvasUtils.refreshCanvasView({
+                    transition: true
+                });
+            };
+        }
+
+        NavigateCtrl.prototype = {
+            constructor: NavigateCtrl
+        }
+
+        var navigateCtrl = new NavigateCtrl();
+        return navigateCtrl;
+    };
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
new file mode 100644
index 000000000000..27326fff6918
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
@@ -0,0 +1,510 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Dialog',
+                  'nf.Birdseye',
+                  'nf.CanvasUtils',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.Processor'],
+              function ($, d3, nfDialog, nfBirdseye, nfCanvasUtils, nfCommon, nfClient, nfProcessor) {
+                  return (nf.ng.Canvas.OperateCtrl = factory($, d3, nfDialog, nfBirdseye, nfCanvasUtils, nfCommon, nfClient, nfProcessor));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.Canvas.OperateCtrl =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.Dialog'),
+                  require('nf.Birdseye'),
+                  require('nf.CanvasUtils'),
+                  require('nf.Common'),
+                  require('nf.Client'),
+                  require('nf.Processor')));
+      } else {
+          nf.ng.Canvas.OperateCtrl = factory(root.$,
+              root.d3,
+              root.nf.Dialog,
+              root.nf.Birdseye,
+              root.nf.CanvasUtils,
+              root.nf.Common,
+              root.nf.Client,
+              root.nf.Processor);
+      }
+  }(this, function ($, d3, nfDialog, nfBirdseye, nfCanvasUtils, nfCommon, nfClient, nfProcessor) {
+      'use strict';
+  
+      return function () {
+            'use strict';
+    
+            // updates the color if its a valid hex color string
+            var updateColor = function () {
+                var hex = $('#fill-color-value').val();
+    
+                // only update the fill color when its a valid hex color string
+                // #[six hex characters|three hex characters] case insensitive
+                if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)) {
+                    $('#fill-color').minicolors('value', hex);
+                }
+            };
+    
+            function OperateCtrl() {
+    
+                /**
+                 * The canvas operator's create template component.
+                 */
+                this.template = {
+    
+                    /**
+                     * The canvas operator's create template component's modal.
+                     */
+                    modal: {
+    
+                        /**
+                         * Gets the modal element.
+                         *
+                         * @returns {*|jQuery|HTMLElement}
+                         */
+                        getElement: function () {
+                            return $('#new-template-dialog');
+                        },
+    
+                        /**
+                         * Initialize the modal.
+                         */
+                        init: function () {
+                            // configure the create template dialog
+                            this.getElement().modal({
+                                scrollableContentStyle: 'scrollable',
+                          headerText: nf._.msg('nf-canvas-operate-controller.CreateTemplate')
+                            });
+                        },
+    
+                        /**
+                         * Updates the modal config.
+                         *
+                         * @param {string} name             The name of the property to update.
+                         * @param {object|array} config     The config for the `name`.
+                         */
+                        update: function (name, config) {
+                            this.getElement().modal(name, config);
+                        },
+    
+                        /**
+                         * Show the modal.
+                         */
+                        show: function () {
+                            this.getElement().modal('show');
+                        },
+    
+                        /**
+                         * Hide the modal.
+                         */
+                        hide: function () {
+                            this.getElement().modal('hide');
+                        }
+                    }
+                };
+    
+                /**
+                 * The canvas operator's create template component.
+                 */
+                this.templateUpload = {
+    
+                    /**
+                     * The canvas operator's create template component's modal.
+                     */
+                    modal: {
+    
+                        /**
+                         * Gets the modal element.
+                         *
+                         * @returns {*|jQuery|HTMLElement}
+                         */
+                        getElement: function () {
+                            return $('#upload-template-dialog');
+                        },
+    
+                        /**
+                         * Initialize the modal.
+                         */
+                        init: function () {
+                            // initialize the form
+                            var templateForm = $('#template-upload-form').ajaxForm({
+                              url: '../nifi-api/process-groups/',
+                                dataType: 'xml',
+                              beforeSubmit: function (formData, $form, options) {
+                                  // ensure uploading to the current process group
+                                  options.url += (encodeURIComponent(nfCanvasUtils.getGroupId()) + '/templates/upload');
+                              },
+                                success: function (response, statusText, xhr, form) {
+                                  // see if the import was successful and inform the user
+                                    if (response.documentElement.tagName === 'templateEntity') {
+                                      nfDialog.showOkDialog({
+                                      headerText: nf._.msg('nf-canvas-operate-controller.SUCCESS'),
+                                      dialogContent: nf._.msg('nf-canvas-operate-controller.SuccessContent')
+                                        });
+                                    } else {
+                                        // import failed
+                                      var statusText = nf._.msg('nf-canvas-operate-controller.Message1');
+                                        if (response.documentElement.tagName === 'errorResponse') {
+                                            // if a more specific error was given, use it
+                                            var errorMessage = response.documentElement.getAttribute('statusText');
+                                          if (!nfCommon.isBlank(errorMessage)) {
+                                              statusText = errorMessage;
+                                          }
+                                      }
+  
+                                      // show reason
+                                      nfDialog.showOkDialog({
+                                          headerText: 'Unable to Upload',
+                                          dialogContent: nfCommon.escapeHtml(statusText)
+                                      });
+                                    }
+                                },
+                                error: function (xhr, statusText, error) {
+                                  // request failed
+                                  nfDialog.showOkDialog({
+                                      headerText: 'Unable to Upload',
+                                      dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                                  });
+                                }
+                            });
+    
+                            // configure the upload template dialog
+                            this.getElement().modal({
+                          headerText: nf._.msg('nf-canvas-operate-controller.Upload'),
+                                buttons: [{
+                              buttonText: nf._.msg('nf-canvas-operate-controller.ButtonUpload'),
+                                    color: {
+                                        base: '#728E9B',
+                                        hover: '#004849',
+                                        text: '#ffffff'
+                                    },
+                                    handler: {
+                                        click: function () {
+                                            var selectedTemplate = $('#selected-template-name').text();
+    
+                                            // submit the template if necessary
+                                          if (nfCommon.isBlank(selectedTemplate)) {
+                                          $('#upload-template-status').text(nf._.msg('nf-canvas-operate-controller.UploadTemplate'));
+                                            } else {
+                                                templateForm.submit();
+    
+                                              // hide the dialog
+                                              $('#upload-template-dialog').modal('hide');
+                                            }
+                                        }
+                                    }
+                                }, {
+                              buttonText: nf._.msg('nf-canvas-operate-controller.Cancel'),
+                                    color: {
+                                        base: '#E3E8EB',
+                                        hover: '#C7D2D7',
+                                        text: '#004849'
+                                    },
+                                    handler: {
+                                        click: function () {
+                                            // hide the dialog
+                                            $('#upload-template-dialog').modal('hide');
+                                        }
+                                    }
+                                }],
+                                handler: {
+                                    close: function () {
+                                        // set the filename
+                                        $('#selected-template-name').text('');
+                                        $('#upload-template-status').text('');
+    
+                                        // reset the form to ensure that the change fire will fire
+                                        templateForm.resetForm();
+                                    }
+                                }
+                            });
+    
+                          $('#template-file-field-button').on('click', function (e) {
+                              $('#template-file-field').click();
+                          });
+  
+                            // add a handler for the change file input chain event
+                            $('#template-file-field').on('change', function (e) {
+                                var filename = $(this).val();
+                              if (!nfCommon.isBlank(filename)) {
+                                    filename = filename.replace(/^.*[\\\/]/, '');
+                                }
+    
+                                // set the filename and clear any status
+                                $('#selected-template-name').text(filename);
+                                $('#upload-template-status').text('');
+                            });
+                        },
+    
+                        /**
+                         * Updates the modal config.
+                         *
+                         * @param {string} name             The name of the property to update.
+                         * @param {object|array} config     The config for the `name`.
+                         */
+                        update: function (name, config) {
+                            this.getElement().modal(name, config);
+                        },
+    
+                        /**
+                         * Show the modal.
+                         */
+                        show: function () {
+                            this.getElement().modal('show');
+                        },
+    
+                        /**
+                         * Hide the modal.
+                         */
+                        hide: function () {
+                            this.getElement().modal('hide');
+                        }
+                    }
+                };
+    
+                /**
+                 * The canvas operator's fillcolor component.
+                 */
+                this.fillcolor = {
+    
+                    /**
+                     * The canvas operator's fillcolor component's modal.
+                     */
+                    modal: {
+    
+                        /**
+                         * Gets the modal element.
+                         *
+                         * @returns {*|jQuery|HTMLElement}
+                         */
+                        getElement: function () {
+                            return $('#fill-color-dialog');
+                        },
+    
+                        /**
+                         * Initialize the modal.
+                         */
+                        init: function () {
+                            // configure the create fillcolor dialog
+                            this.getElement().modal({
+                                scrollableContentStyle: 'scrollable',
+                          headerText: nf._.msg('nf-canvas-operate-controller.ChangeColor'),
+                                buttons: [{
+                              buttonText: nf._.msg('nf-canvas-operate-controller.Apply'),
+                                    color: {
+                                        base: '#728E9B',
+                                        hover: '#004849',
+                                        text: '#ffffff'
+                                    },
+                                    handler: {
+                                        click: function () {
+                                          var selection = nfCanvasUtils.getSelection();
+    
+                                            // color the selected components
+                                            selection.each(function (d) {
+                                                var selected = d3.select(this);
+                                                var selectedData = selected.datum();
+    
+                                                // get the color and update the styles
+                                                var color = $('#fill-color').minicolors('value');
+    
+                                                // ensure the color actually changed
+                                                if (color !== selectedData.component.style['background-color']) {
+                                                    // build the request entity
+                                                    var entity = {
+                                                      'revision': nfClient.getRevision(selectedData),
+                                                        'component': {
+                                                            'id': selectedData.id,
+                                                            'style': {
+                                                                'background-color': color
+                                                            }
+                                                        }
+                                                    };
+    
+                                                    // update the style for the specified component
+                                                    $.ajax({
+                                                        type: 'PUT',
+                                                        url: selectedData.uri,
+                                                        data: JSON.stringify(entity),
+                                                        dataType: 'json',
+                                                        contentType: 'application/json'
+                                                    }).done(function (response) {
+                                                        // update the component
+                                                      nfCanvasUtils.getComponentByType(selectedData.type).set(response);
+                                                    }).fail(function (xhr, status, error) {
+                                                        if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
+                                                          nfDialog.showOkDialog({
+                                                          headerText: nf._.msg('nf-canvas-operate-controller.Error'),
+                                                              dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                                                            });
+                                                        }
+                                                    }).always(function () {
+                                                      nfBirdseye.refresh();
+                                                    });
+                                                }
+                                            });
+    
+                                            // close the dialog
+                                            $('#fill-color-dialog').modal('hide');
+                                        }
+                                    }
+                                },
+                                    {
+                                  buttonText: nf._.msg('nf-canvas-operate-controller.Cancel'),
+                                        color: {
+                                            base: '#E3E8EB',
+                                            hover: '#C7D2D7',
+                                            text: '#004849'
+                                        },
+                                        handler: {
+                                            click: function () {
+                                                // close the dialog
+                                                $('#fill-color-dialog').modal('hide');
+                                            }
+                                        }
+                                    }],
+                                handler: {
+                                    close: function () {
+                                        // clear the current color
+                                        $('#fill-color-value').val('');
+                                        $('#fill-color').minicolors('value', '');
+                                    }
+                                }
+                            });
+                        },
+    
+                        /**
+                         * Updates the modal config.
+                         *
+                         * @param {string} name             The name of the property to update.
+                         * @param {object|array} config     The config for the `name`.
+                         */
+                        update: function (name, config) {
+                            this.getElement().modal(name, config);
+                        },
+    
+                        /**
+                         * Show the modal.
+                         */
+                        show: function () {
+                            this.getElement().modal('show');
+                        },
+    
+                        /**
+                         * Hide the modal.
+                         */
+                        hide: function () {
+                            this.getElement().modal('hide');
+                        },
+    
+                        /**
+                         * The canvas operator's fillcolor component modal's minicolors.
+                         */
+                        minicolors: {
+    
+                            /**
+                             * Gets the minicolors element.
+                             *
+                             * @returns {*|jQuery|HTMLElement}
+                             */
+                            getElement: function () {
+                                return $('#fill-color');
+                            },
+    
+                            /**
+                             * Initialize the minicolors.
+                             */
+                            init: function () {
+                                // configure the minicolors
+                                this.getElement().minicolors({
+                                    inline: true,
+                                    change: function (hex, opacity) {
+                                        // update the value
+                                        $('#fill-color-value').val(hex);
+    
+                                        // always update the preview
+                                      if (hex.toLowerCase() === '#ffffff') {
+                                          //special case #ffffff implies default fill
+                                          $('#fill-color-processor-preview-icon').css({
+                                              'color': nfProcessor.defaultIconColor(),
+                                              'background-color': hex
+                                          });
+                                      } else {
+                                          $('#fill-color-processor-preview-icon').css({
+                                              'color': nfCommon.determineContrastColor(
+                                                  nfCommon.substringAfterLast(
+                                                      hex, '#')),
+                                              'background-color': hex
+                                          });
+                                      }
+  
+                                      var borderColor = hex;
+                                      if (borderColor.toLowerCase() === '#ffffff') {
+                                          borderColor = 'rgba(0,0,0,0.25)';
+                                      }
+                                      $('#fill-color-processor-preview').css({
+                                          'border-color': borderColor
+                                      });
+  
+                                        $('#fill-color-label-preview').css({
+                                          'background': hex
+                                        });
+                                      $('#fill-color-label-preview-value').css('color',
+                                          nfCommon.determineContrastColor(nfCommon.substringAfterLast(hex, '#'))
+                                      );
+                                    }
+                                });
+    
+                                // apply fill color from field on blur and enter press
+                                $('#fill-color-value').on('blur', updateColor).on('keyup', function (e) {
+                                    var code = e.keyCode ? e.keyCode : e.which;
+                                    if (code === $.ui.keyCode.ENTER) {
+                                        updateColor();
+                                    }
+                                });
+                            }
+                        }
+                    }
+                };
+            }
+    
+            OperateCtrl.prototype = {
+                constructor: OperateCtrl,
+    
+                /**
+                 * Initializes the canvas operate controller.
+                 */
+                init: function () {
+                    this.template.modal.init();
+                    this.templateUpload.modal.init();
+                    this.fillcolor.modal.init();
+                    this.fillcolor.modal.minicolors.init();
+                }
+            }
+    
+            var operateCtrl = new OperateCtrl();
+            return operateCtrl;
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js
new file mode 100644
index 000000000000..23dcaa11b476
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js
@@ -0,0 +1,168 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['nf.CanvasUtils',
+                  'nf.ContextMenu'],
+              function (nfCanvasUtils, nfContextMenu) {
+                  return (nf.ng.Canvas.ToolboxCtrl = factory(nfCanvasUtils, nfContextMenu));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.Canvas.ToolboxCtrl =
+              factory(require('nf.CanvasUtils'),
+                  require('nf.ContextMenu')));
+      } else {
+          nf.ng.Canvas.ToolboxCtrl = factory(root.nf.CanvasUtils,
+              root.nf.ContextMenu);
+      }
+  }(this, function (nfCanvasUtils, nfContextMenu) {
+      'use strict';
+  
+      return function (processorComponent,
+                         inputPortComponent,
+                         outputPortComponent,
+                         groupComponent,
+                         remoteGroupComponent,
+                         funnelComponent,
+                         templateComponent,
+                         labelComponent) {
+            'use strict';
+    
+            function ToolboxCtrl(processorComponent,
+                                 inputPortComponent,
+                                 outputPortComponent,
+                                 groupComponent,
+                                 remoteGroupComponent,
+                                 funnelComponent,
+                                 templateComponent,
+                                 labelComponent) {
+                this.processorComponent = processorComponent;
+                this.inputPortComponent = inputPortComponent;
+                this.outputPortComponent = outputPortComponent;
+                this.groupComponent = groupComponent;
+                this.remoteGroupComponent = remoteGroupComponent;
+                this.funnelComponent = funnelComponent;
+                this.templateComponent = templateComponent;
+                this.labelComponent = labelComponent;
+    
+                /**
+                 * Config for the toolbox
+                 */
+                this.config = {
+                    type: {
+                  processor: nf._.msg('nf-canvas-toolbox.Processor'),
+                  inputPort: nf._.msg('nf-canvas-toolbox.InputPort'),
+                  outputPort: nf._.msg('nf-canvas-toolbox.OutputPort'),
+                  processGroup: nf._.msg('nf-canvas-toolbox.ProcessGroup'),
+                  remoteProcessGroup: nf._.msg('nf-canvas-toolbox.RemoteProcessGroup'),
+                  connection: nf._.msg('nf-canvas-toolbox.Connection'),
+                  funnel: nf._.msg('nf-canvas-toolbox.Funnel'),
+                  template: nf._.msg('nf-canvas-toolbox.Template'),
+                  label: nf._.msg('nf-canvas-toolbox.Label')
+                    },
+                    urls: {
+                        api: '../nifi-api',
+                        controller: '../nifi-api/controller',
+                        processorTypes: '../nifi-api/flow/processor-types'
+                    }
+                };
+            }
+    
+            ToolboxCtrl.prototype = {
+                constructor: ToolboxCtrl,
+    
+                /**
+                 * Initialize the toolbox controller.
+                 */
+                init: function () {
+                    // initialize modal dialogs
+                    processorComponent.modal.init();
+                    inputPortComponent.modal.init();
+                    outputPortComponent.modal.init();
+                    groupComponent.modal.init();
+                    remoteGroupComponent.modal.init();
+                    templateComponent.modal.init();
+                },
+    
+                /**
+                 * Gets the draggable configuration for a toolbox component.
+                 *
+                 * @param {object} component        The component responsible for handling the stop event.
+                 * @returns {object}                The draggable configuration.
+                 *
+                 * NOTE: The `component` must implement a dropHandler.
+                 */
+                draggableComponentConfig: function (component) {
+    
+                    //add hover effect
+                    component.getElement().hover(function () {
+                        component.getElement().removeClass(component.icon).addClass(component.hoverIcon);
+                    }, function () {
+                        component.getElement().removeClass(component.hoverIcon).addClass(component.icon);
+                    })
+    
+                    return {
+                        zIndex: 1011,
+                        revert: true,
+                        revertDuration: 0,
+                        cancel: false,
+                        containment: 'body',
+                        cursor: '-webkit-grabbing',
+                        start: function (e, ui) {
+                            // hide the context menu if necessary
+                          nfContextMenu.hide();
+                        },
+                        stop: function (e, ui) {
+                          var translate = nfCanvasUtils.translateCanvasView();
+                          var scale = nfCanvasUtils.scaleCanvasView();
+    
+                            var mouseX = e.originalEvent.pageX;
+                          var mouseY = e.originalEvent.pageY - nfCanvasUtils.getCanvasOffset();
+    
+                            // invoke the drop handler if we're over the canvas
+                            if (mouseX >= 0 && mouseY >= 0) {
+                                // adjust the x and y coordinates accordingly
+                                var x = (mouseX / scale) - (translate[0] / scale);
+                                var y = (mouseY / scale) - (translate[1] / scale);
+    
+                                //each component must implement a dropHandler function
+                                component.dropHandler.apply(component, [{
+                                    x: x,
+                                    y: y
+                                }]);
+                            }
+                        },
+                        helper: component.dragIcon
+                    }
+                }
+            }
+    
+            var toolboxCtrl =
+                new ToolboxCtrl(processorComponent,
+                    inputPortComponent,
+                    outputPortComponent,
+                    groupComponent,
+                    remoteGroupComponent,
+                    funnelComponent,
+                    templateComponent,
+                    labelComponent);
+            return toolboxCtrl;
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js
new file mode 100644
index 000000000000..cb8a8b21e9b2
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js
@@ -0,0 +1,50 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([],
+            function () {
+                return (nf.ng.BreadcrumbsDirective = factory());
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.BreadcrumbsDirective =
+            factory());
+    } else {
+        nf.ng.BreadcrumbsDirective = factory();
+    }
+}(this, function () {
+    'use strict';
+
+    return function (breadcrumbsCtrl) {
+        return {
+            restrict: 'E',
+            templateUrl: 'views/nf-ng-breadcrumbs-directive-view.html',
+            scope: {
+                'breadcrumbs': '=',
+                'clickFunc': '=',
+                'highlightCrumbId': '=',
+                'separatorFunc': '='
+            },
+            link: function (scope, element, attrs) {
+                breadcrumbsCtrl.registerMouseWheelEvent(element);
+            }
+        };
+    };
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js
new file mode 100644
index 000000000000..93afc5f549d1
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js
@@ -0,0 +1,43 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([],
+            function () {
+                return (nf.ng.DraggableDirective = factory());
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.DraggableDirective =
+            factory());
+    } else {
+        nf.ng.DraggableDirective = factory();
+    }
+}(this, function () {
+    'use strict';
+
+    return function () {
+        return {
+            restrict: 'AE',
+            link: function (scope, element, attrs) {
+                element.draggable(scope.$eval(attrs.nfDraggable));
+            }
+        };
+    };
+}));
\ No newline at end of file
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
new file mode 100644
index 000000000000..94db750e4be9
--- /dev/null
+++ 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
@@ -0,0 +1,148 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Client',
+                'nf.Birdseye',
+                'nf.Graph',
+                'nf.CanvasUtils',
+                'nf.ErrorHandler'],
+            function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+                return (nf.ng.FunnelComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.FunnelComponent =
+            factory(require('jquery'),
+                require('nf.Client'),
+                require('nf.Birdseye'),
+                require('nf.Graph'),
+                require('nf.CanvasUtils'),
+                require('nf.ErrorHandler')));
+    } else {
+        nf.ng.FunnelComponent = factory(root.$,
+            root.nf.Client,
+            root.nf.Birdseye,
+            root.nf.Graph,
+            root.nf.CanvasUtils,
+            root.nf.ErrorHandler);
+    }
+}(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+    'use strict';
+
+    return function (serviceProvider) {
+        'use strict';
+
+        function FunnelComponent() {
+            this.icon = 'icon icon-funnel';
+
+            this.hoverIcon = 'icon icon-funnel-add';
+        }
+
+        FunnelComponent.prototype = {
+            constructor: FunnelComponent,
+
+            /**
+             * Gets the component.
+             *
+             * @returns {*|jQuery|HTMLElement}
+             */
+            getElement: function () {
+                return $('#funnel-component');
+            },
+
+            /**
+             * Enable the component.
+             */
+            enabled: function () {
+                this.getElement().attr('disabled', false);
+            },
+
+            /**
+             * Disable the component.
+             */
+            disabled: function () {
+                this.getElement().attr('disabled', true);
+            },
+
+            /**
+             * Handler function for when component is dropped on the canvas.
+             *
+             * @argument {object} pt        The point that the component was dropped.
+             */
+            dropHandler: function (pt) {
+                this.createFunnel(pt);
+            },
+
+            /**
+             * The drag icon for the toolbox component.
+             *
+             * @param event
+             * @returns {*|jQuery|HTMLElement}
+             */
+            dragIcon: function (event) {
+                return $('<div class="icon icon-funnel-add"></div>');
+            },
+
+            /**
+             * Creates a new funnel at the specified point.
+             *
+             * @argument {object} pt        The point that the funnel was dropped.
+             */
+            createFunnel: function (pt) {
+                var outputPortEntity = {
+                    'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                        'position': {
+                            'x': pt.x,
+                            'y': pt.y
+                        }
+                    }
+                };
+
+                // create a new funnel
+                $.ajax({
+                    type: 'POST',
+                    url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/funnels',
+                    data: JSON.stringify(outputPortEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the funnel to the graph
+                    nfGraph.add({
+                        'funnels': [response]
+                    }, {
+                        'selectAll': true
+                    });
+
+                    // update the birdseye
+                    nfBirdseye.refresh();
+                }).fail(nfErrorHandler.handleAjaxError);
+            }
+        }
+
+        var funnelComponent = new FunnelComponent();
+        return funnelComponent;
+    };
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js
new file mode 100644
index 000000000000..eccbf977f659
--- /dev/null
+++ 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
@@ -0,0 +1,274 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Client',
+                  'nf.Birdseye',
+                  'nf.Graph',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler'],
+              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+                  return (nf.ng.GroupComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.GroupComponent =
+              factory(require('jquery'),
+                  require('nf.Client'),
+                  require('nf.Birdseye'),
+                  require('nf.Graph'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler')));
+      } else {
+          nf.ng.GroupComponent = factory(root.$,
+              root.nf.Client,
+              root.nf.Birdseye,
+              root.nf.Graph,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler);
+      }
+  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
+            /**
+             * Create the group and add to the graph.
+             *
+             * @argument {string} groupName The name of the group.
+             * @argument {object} pt        The point that the group was dropped.
+             */
+            var createGroup = function (groupName, pt) {
+                var processGroupEntity = {
+                  'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                        'name': groupName,
+                        'position': {
+                            'x': pt.x,
+                            'y': pt.y
+                        }
+                    }
+                };
+    
+                // create a new processor of the defined type
+                return $.ajax({
+                    type: 'POST',
+                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/process-groups',
+                    data: JSON.stringify(processGroupEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the process group to the graph
+                  nfGraph.add({
+                        'processGroups': [response]
+                    }, {
+                        'selectAll': true
+                    });
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            function GroupComponent() {
+    
+                this.icon = 'icon icon-group';
+    
+                this.hoverIcon = 'icon icon-group-add';
+    
+                /**
+                 * The group component's modal.
+                 */
+                this.modal = {
+    
+                    /**
+                     * Gets the modal element.
+                     *
+                     * @returns {*|jQuery|HTMLElement}
+                     */
+                    getElement: function () {
+                        return $('#new-process-group-dialog');
+                    },
+    
+                    /**
+                     * Initialize the modal.
+                     */
+                    init: function () {
+                        // configure the new process group dialog
+                        this.getElement().modal({
+                            scrollableContentStyle: 'scrollable',
+                      headerText: nf._.msg('nf-group-component.AddProcessGroup'),
+                            handler: {
+                                close: function () {
+                                    $('#new-process-group-name').val('');
+                                }
+                            }
+                        });
+                    },
+    
+                    /**
+                     * Updates the modal config.
+                     *
+                     * @param {string} name             The name of the property to update.
+                     * @param {object|array} config     The config for the `name`.
+                     */
+                    update: function (name, config) {
+                        this.getElement().modal(name, config);
+                    },
+    
+                    /**
+                     * Show the modal.
+                     */
+                    show: function () {
+                        this.getElement().modal('show');
+                    },
+    
+                    /**
+                     * Hide the modal.
+                     */
+                    hide: function () {
+                        this.getElement().modal('hide');
+                    }
+                };
+            }
+    
+            GroupComponent.prototype = {
+                constructor: GroupComponent,
+    
+                /**
+                 * Gets the component.
+                 *
+                 * @returns {*|jQuery|HTMLElement}
+                 */
+                getElement: function () {
+                    return $('#group-component');
+                },
+    
+                /**
+                 * Enable the component.
+                 */
+                enabled: function () {
+                    this.getElement().attr('disabled', false);
+                },
+    
+                /**
+                 * Disable the component.
+                 */
+                disabled: function () {
+                    this.getElement().attr('disabled', true);
+                },
+    
+                /**
+                 * Handler function for when component is dropped on the canvas.
+                 *
+                 * @argument {object} pt        The point that the component was dropped.
+                 */
+                dropHandler: function (pt) {
+                    this.promptForGroupName(pt);
+                },
+    
+                /**
+                 * The drag icon for the toolbox component.
+                 *
+                 * @param event
+                 * @returns {*|jQuery|HTMLElement}
+                 */
+                dragIcon: function (event) {
+                    return $('<div class="icon icon-group-add"></div>');
+                },
+    
+                /**
+                 * Prompts the user to enter the name for the group.
+                 *
+                 * @argument {object} pt        The point that the group was dropped.
+                 */
+                promptForGroupName: function (pt) {
+                  var groupComponent = this;
+                    return $.Deferred(function (deferred) {
+                        var addGroup = function () {
+                            // get the name of the group and clear the textfield
+                            var groupName = $('#new-process-group-name').val();
+    
+                            // hide the dialog
+                          groupComponent.modal.hide();
+    
+                            // create the group and resolve the deferred accordingly
+                            createGroup(groupName, pt).done(function (response) {
+                                deferred.resolve(response.component);
+                            }).fail(function () {
+                                deferred.reject();
+                            });
+                        };
+    
+                      groupComponent.modal.update('setButtonModel', [{
+                      buttonText: nf._.msg('nf-group-component.Add'),
+                            color: {
+                                base: '#728E9B',
+                                hover: '#004849',
+                                text: '#ffffff'
+                            },
+                            handler: {
+                                click: addGroup
+                            }
+                        },
+                            {
+                          buttonText: nf._.msg('nf-group-component.Cancel'),
+                                color: {
+                                    base: '#E3E8EB',
+                                    hover: '#C7D2D7',
+                                    text: '#004849'
+                                },
+                                handler: {
+                                    click: function () {
+                                        // reject the deferred
+                                        deferred.reject();
+    
+                                        // close the dialog
+                                      groupComponent.modal.hide();
+                                    }
+                                }
+                            }]);
+    
+                        // show the dialog
+                      groupComponent.modal.show();
+    
+                        // set up the focus and key handlers
+                        $('#new-process-group-name').focus().off('keyup').on('keyup', function (e) {
+                            var code = e.keyCode ? e.keyCode : e.which;
+                            if (code === $.ui.keyCode.ENTER) {
+                                addGroup();
+                            }
+                        });
+                    }).promise();
+                }
+            }
+    
+            var groupComponent = new GroupComponent();
+            return groupComponent;
+        };
+  }));
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
new file mode 100644
index 000000000000..392fecbc7cc9
--- /dev/null
+++ 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
@@ -0,0 +1,267 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Client',
+                  'nf.Birdseye',
+                  'nf.Graph',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler'],
+              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+                  return (nf.ng.InputPortComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.InputPortComponent =
+              factory(require('jquery'),
+                  require('nf.Client'),
+                  require('nf.Birdseye'),
+                  require('nf.Graph'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler')));
+      } else {
+          nf.ng.InputPortComponent = factory(root.$,
+              root.nf.Client,
+              root.nf.Birdseye,
+              root.nf.Graph,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler);
+      }
+  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
+            /**
+             * Create the input port and add to the graph.
+             *
+             * @argument {string} portName          The input port name.
+             * @argument {object} pt                The point that the input port was dropped.
+             */
+            var createInputPort = function (portName, pt) {
+                var inputPortEntity = {
+                  'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                        'name': portName,
+                        'position': {
+                            'x': pt.x,
+                            'y': pt.y
+                        }
+                    }
+                };
+    
+                // create a new processor of the defined type
+                $.ajax({
+                    type: 'POST',
+                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/input-ports',
+                    data: JSON.stringify(inputPortEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the port to the graph
+                  nfGraph.add({
+                        'inputPorts': [response]
+                    }, {
+                        'selectAll': true
+                    });
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            function InputPortComponent() {
+    
+                this.icon = 'icon icon-port-in';
+    
+                this.hoverIcon = 'icon icon-port-in-add';
+    
+                /**
+                 * The input port component's modal.
+                 */
+                this.modal = {
+    
+                    /**
+                     * Gets the modal element.
+                     *
+                     * @returns {*|jQuery|HTMLElement}
+                     */
+                    getElement: function () {
+                        return $('#new-port-dialog');
+                    },
+    
+                    /**
+                     * Initialize the modal.
+                     */
+                    init: function () {
+                        // configure the new port dialog
+                        this.getElement().modal({
+                            scrollableContentStyle: 'scrollable',
+                      headerText: nf._.msg('nf-input-port-component.AddPort'),
+                            handler: {
+                                close: function () {
+                                    $('#new-port-name').val('');
+                                }
+                            }
+                        });
+                    },
+    
+                    /**
+                     * Updates the modal config.
+                     *
+                     * @param {string} name             The name of the property to update.
+                     * @param {object|array} config     The config for the `name`.
+                     */
+                    update: function (name, config) {
+                        this.getElement().modal(name, config);
+                    },
+    
+                    /**
+                     * Show the modal.
+                     */
+                    show: function () {
+                        this.getElement().modal('show');
+                    },
+    
+                    /**
+                     * Hide the modal.
+                     */
+                    hide: function () {
+                        this.getElement().modal('hide');
+                    }
+                };
+            }
+    
+            InputPortComponent.prototype = {
+                constructor: InputPortComponent,
+    
+                /**
+                 * Gets the component.
+                 *
+                 * @returns {*|jQuery|HTMLElement}
+                 */
+                getElement: function () {
+                    return $('#port-in-component');
+                },
+    
+                /**
+                 * Enable the component.
+                 */
+                enabled: function () {
+                    this.getElement().attr('disabled', false);
+                },
+    
+                /**
+                 * Disable the component.
+                 */
+                disabled: function () {
+                    this.getElement().attr('disabled', true);
+                },
+    
+                /**
+                 * Handler function for when component is dropped on the canvas.
+                 *
+                 * @argument {object} pt        The point that the component was dropped.
+                 */
+                dropHandler: function (pt) {
+                    this.promptForInputPortName(pt);
+                },
+    
+                /**
+                 * The drag icon for the toolbox component.
+                 *
+                 * @param event
+                 * @returns {*|jQuery|HTMLElement}
+                 */
+                dragIcon: function (event) {
+                    return $('<div class="icon icon-port-in-add"></div>');
+                },
+    
+                /**
+                 * Prompts the user to enter the name for the input port.
+                 *
+                 * @argument {object} pt        The point that the input port was dropped.
+                 */
+                promptForInputPortName: function (pt) {
+                  var inputPortComponent = this;
+                    var addInputPort = function () {
+                        // get the name of the input port and clear the textfield
+                        var portName = $('#new-port-name').val();
+    
+                        // hide the dialog
+                      inputPortComponent.modal.hide();
+    
+                        // create the input port
+                        createInputPort(portName, pt);
+                    };
+    
+                    this.modal.update('setButtonModel', [{
+                  buttonText: nf._.msg('nf-input-port-component.Add'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: addInputPort
+                        }
+                    },
+                        {
+                      buttonText: nf._.msg('nf-input-port-component.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                  inputPortComponent.modal.hide();
+                                }
+                            }
+                        }]);
+    
+                    // update the port type
+              $('#new-port-type').text(nf._.msg('nf-input-port-component.new-port-type'));
+    
+                    // show the dialog
+                    this.modal.show();
+    
+                    // set up the focus and key handlers
+                    $('#new-port-name').focus().off('keyup').on('keyup', function (e) {
+                        var code = e.keyCode ? e.keyCode : e.which;
+                        if (code === $.ui.keyCode.ENTER) {
+                            addInputPort();
+                        }
+                    });
+                }
+            }
+    
+            var inputPortComponent = new InputPortComponent();
+            return inputPortComponent;
+        };
+  }));
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
new file mode 100644
index 000000000000..95621094075d
--- /dev/null
+++ 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
@@ -0,0 +1,153 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Client',
+                'nf.Birdseye',
+                'nf.Graph',
+                'nf.CanvasUtils',
+                'nf.ErrorHandler',
+                'nf.Label'],
+            function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfLabel) {
+                return (nf.ng.LabelComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfLabel));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.LabelComponent =
+            factory(require('jquery'),
+                require('nf.Client'),
+                require('nf.Birdseye'),
+                require('nf.Graph'),
+                require('nf.CanvasUtils'),
+                require('nf.ErrorHandler'),
+                require('nf.Label')));
+    } else {
+        nf.ng.LabelComponent = factory(root.$,
+            root.nf.Client,
+            root.nf.Birdseye,
+            root.nf.Graph,
+            root.nf.CanvasUtils,
+            root.nf.ErrorHandler,
+            root.nf.Label);
+    }
+}(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfLabel) {
+    'use strict';
+
+    return function (serviceProvider) {
+        'use strict';
+
+        function LabelComponent() {
+            this.icon = 'icon icon-label';
+
+            this.hoverIcon = 'icon icon-label-add';
+        }
+
+        LabelComponent.prototype = {
+            constructor: LabelComponent,
+
+            /**
+             * Gets the component.
+             *
+             * @returns {*|jQuery|HTMLElement}
+             */
+            getElement: function () {
+                return $('#label-component');
+            },
+
+            /**
+             * Enable the component.
+             */
+            enabled: function () {
+                this.getElement().attr('disabled', false);
+            },
+
+            /**
+             * Disable the component.
+             */
+            disabled: function () {
+                this.getElement().attr('disabled', true);
+            },
+
+            /**
+             * Handler function for when component is dropped on the canvas.
+             *
+             * @argument {object} pt        The point that the component was dropped.
+             */
+            dropHandler: function (pt) {
+                this.createLabel(pt);
+            },
+
+            /**
+             * The drag icon for the toolbox component.
+             *
+             * @param event
+             * @returns {*|jQuery|HTMLElement}
+             */
+            dragIcon: function (event) {
+                return $('<div class="icon icon-label-add"></div>');
+            },
+
+            /**
+             * Create the label and add to the graph.
+             *
+             * @argument {object} pt        The point that the label was dropped.
+             */
+            createLabel: function (pt) {
+                var labelEntity = {
+                    'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                        'width': nfLabel.config.width,
+                        'height': nfLabel.config.height,
+                        'position': {
+                            'x': pt.x,
+                            'y': pt.y
+                        }
+                    }
+                };
+
+                // create a new label
+                $.ajax({
+                    type: 'POST',
+                    url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/labels',
+                    data: JSON.stringify(labelEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the label to the graph
+                    nfGraph.add({
+                        'labels': [response]
+                    }, {
+                        'selectAll': true
+                    });
+
+                    // update the birdseye
+                    nfBirdseye.refresh();
+                }).fail(nfErrorHandler.handleAjaxError);
+            }
+        }
+
+        var labelComponent = new LabelComponent();
+        return labelComponent;
+    };
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js
new file mode 100644
index 000000000000..f27ec59cea9f
--- /dev/null
+++ 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
@@ -0,0 +1,258 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Client',
+                  'nf.Birdseye',
+                  'nf.Graph',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler'],
+              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+                  return (nf.ng.OutputPortComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.OutputPortComponent =
+              factory(require('jquery'),
+                  require('nf.Client'),
+                  require('nf.Birdseye'),
+                  require('nf.Graph'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler')));
+      } else {
+          nf.ng.OutputPortComponent = factory(root.$,
+              root.nf.Client,
+              root.nf.Birdseye,
+              root.nf.Graph,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler);
+      }
+  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
+            /**
+             * Create the input port and add to the graph.
+             *
+             * @argument {string} portName          The output port name.
+             * @argument {object} pt                The point that the output port was dropped.
+             */
+            var createOutputPort = function (portName, pt) {
+                var outputPortEntity = {
+                  'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                        'name': portName,
+                        'position': {
+                            'x': pt.x,
+                            'y': pt.y
+                        }
+                    }
+                };
+    
+                // create a new processor of the defined type
+                $.ajax({
+                    type: 'POST',
+                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/output-ports',
+                    data: JSON.stringify(outputPortEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the port to the graph
+                  nfGraph.add({
+                        'outputPorts': [response]
+                    }, {
+                        'selectAll': true
+                    });
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            function OutputPortComponent() {
+    
+                this.icon = 'icon icon-port-out';
+    
+                this.hoverIcon = 'icon icon-port-out-add';
+    
+                /**
+                 * The output port component's modal.
+                 */
+                this.modal = {
+    
+                    /**
+                     * Gets the modal element.
+                     *
+                     * @returns {*|jQuery|HTMLElement}
+                     */
+                    getElement: function () {
+                        return $('#new-port-dialog'); //Reuse the input port dialog....
+                    },
+    
+                    /**
+                     * Initialize the modal.
+                     */
+                    init: function () {
+                        //Reuse the input port dialog....
+                    },
+    
+                    /**
+                     * Updates the modal config.
+                     *
+                     * @param {string} name             The name of the property to update.
+                     * @param {object|array} config     The config for the `name`.
+                     */
+                    update: function (name, config) {
+                        this.getElement().modal(name, config);
+                    },
+    
+                    /**
+                     * Show the modal.
+                     */
+                    show: function () {
+                        this.getElement().modal('show');
+                    },
+    
+                    /**
+                     * Hide the modal.
+                     */
+                    hide: function () {
+                        this.getElement().modal('hide');
+                    }
+                };
+            }
+    
+            OutputPortComponent.prototype = {
+                constructor: OutputPortComponent,
+    
+                /**
+                 * Gets the component.
+                 *
+                 * @returns {*|jQuery|HTMLElement}
+                 */
+                getElement: function () {
+                    return $('#port-out-component');
+                },
+    
+                /**
+                 * Enable the component.
+                 */
+                enabled: function () {
+                    this.getElement().attr('disabled', false);
+                },
+    
+                /**
+                 * Disable the component.
+                 */
+                disabled: function () {
+                    this.getElement().attr('disabled', true);
+                },
+    
+                /**
+                 * Handler function for when component is dropped on the canvas.
+                 *
+                 * @argument {object} pt        The point that the component was dropped.
+                 */
+                dropHandler: function (pt) {
+                    this.promptForOutputPortName(pt);
+                },
+    
+                /**
+                 * The drag icon for the toolbox component.
+                 *
+                 * @param event
+                 * @returns {*|jQuery|HTMLElement}
+                 */
+                dragIcon: function (event) {
+                    return $('<div class="icon icon-port-out-add"></div>');
+                },
+    
+                /**
+                 * Prompts the user to enter the name for the output port.
+                 *
+                 * @argument {object} pt        The point that the output port was dropped.
+                 */
+                promptForOutputPortName: function (pt) {
+                  var outputPortComponent = this;
+                    var addOutputPort = function () {
+                        // get the name of the output port and clear the textfield
+                        var portName = $('#new-port-name').val();
+    
+                        // hide the dialog
+                      outputPortComponent.modal.hide();
+    
+                        // create the output port
+                        createOutputPort(portName, pt);
+                    };
+    
+                    this.modal.update('setButtonModel', [{
+                  buttonText: nf._.msg('nf-output-port-component.Add'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: addOutputPort
+                        }
+                    },
+                        {
+                      buttonText: nf._.msg('nf-output-port-component.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                  outputPortComponent.modal.hide();
+                                }
+                            }
+                        }]);
+    
+                    // update the port type
+              $('#new-port-type').text(nf._.msg('nf-output-port-component.new-port-type'));
+    
+                    // set the focus and show the dialog
+                    this.modal.show();
+    
+                    // set up the focus and key handlers
+                    $('#new-port-name').focus().off('keyup').on('keyup', function (e) {
+                        var code = e.keyCode ? e.keyCode : e.which;
+                        if (code === $.ui.keyCode.ENTER) {
+                            addOutputPort();
+                        }
+                    });
+                }
+            }
+    
+            var outputPortComponent = new OutputPortComponent();
+            return outputPortComponent;
+        };
+  }));
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
new file mode 100644
index 000000000000..0d5249621ec1
--- /dev/null
+++ 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
@@ -0,0 +1,710 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Client',
+                  'nf.Birdseye',
+                  'nf.Graph',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler',
+                  'nf.Dialog',
+                  'nf.Common'],
+              function ($, Slick, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
+                  return (nf.ng.ProcessorComponent = factory($, Slick, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.ProcessorComponent =
+              factory(require('jquery'),
+                  require('Slick'),
+                  require('nf.Client'),
+                  require('nf.Birdseye'),
+                  require('nf.Graph'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Dialog'),
+                  require('nf.Common')));
+      } else {
+          nf.ng.ProcessorComponent = factory(root.$,
+              root.Slick,
+              root.nf.Client,
+              root.nf.Birdseye,
+              root.nf.Graph,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler,
+              root.nf.Dialog,
+              root.nf.Common);
+      }
+  }(this, function ($, Slick, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
+            /**
+             * Filters the processor type table.
+             */
+            var applyFilter = function () {
+                // get the dataview
+                var processorTypesGrid = $('#processor-types-table').data('gridInstance');
+    
+                // ensure the grid has been initialized
+              if (nfCommon.isDefinedAndNotNull(processorTypesGrid)) {
+                    var processorTypesData = processorTypesGrid.getData();
+    
+                    // update the search criteria
+                    processorTypesData.setFilterArgs({
+                        searchString: getFilterText()
+                    });
+                    processorTypesData.refresh();
+    
+                  // update the buttons to possibly trigger the disabled state
+                  $('#new-processor-dialog').modal('refreshButtons');
+  
+                    // update the selection if possible
+                    if (processorTypesData.getLength() > 0) {
+                        processorTypesGrid.setSelectedRows([0]);
+                    }
+                }
+            };
+    
+            /**
+             * Determines if the item matches the filter.
+             *
+             * @param {object} item     The item to filter.
+             * @param {object} args     The filter criteria.
+             * @returns {boolean}       Whether the item matches the filter.
+             */
+            var matchesRegex = function (item, args) {
+                if (args.searchString === '') {
+                    return true;
+                }
+    
+                try {
+                    // perform the row filtering
+                    var filterExp = new RegExp(args.searchString, 'i');
+                } catch (e) {
+                    // invalid regex
+                    return false;
+                }
+    
+                // determine if the item matches the filter
+                var matchesLabel = item['label'].search(filterExp) >= 0;
+                var matchesTags = item['tags'].search(filterExp) >= 0;
+                return matchesLabel || matchesTags;
+            };
+    
+            /**
+             * Performs the filtering.
+             *
+             * @param {object} item     The item subject to filtering.
+             * @param {object} args     Filter arguments.
+             * @returns {Boolean}       Whether or not to include the item.
+             */
+            var filter = function (item, args) {
+                // determine if the item matches the filter
+                var matchesFilter = matchesRegex(item, args);
+    
+                // determine if the row matches the selected tags
+                var matchesTags = true;
+                if (matchesFilter) {
+                    var tagFilters = $('#processor-tag-cloud').tagcloud('getSelectedTags');
+                    var hasSelectedTags = tagFilters.length > 0;
+                    if (hasSelectedTags) {
+                        matchesTags = matchesSelectedTags(tagFilters, item['tags']);
+                    }
+                }
+    
+                // determine if this row should be visible
+                var matches = matchesFilter && matchesTags;
+    
+                // if this row is currently selected and its being filtered
+                if (matches === false && $('#selected-processor-type').text() === item['type']) {
+                    // clear the selected row
+                    $('#processor-type-description').text('');
+                    $('#processor-type-name').text('');
+                    $('#selected-processor-name').text('');
+                    $('#selected-processor-type').text('');
+    
+                    // clear the active cell the it can be reselected when its included
+                    var processTypesGrid = $('#processor-types-table').data('gridInstance');
+                    processTypesGrid.resetActiveCell();
+                }
+    
+                return matches;
+            };
+    
+            /**
+             * Determines if the specified tags match all the tags selected by the user.
+             *
+             * @argument {string[]} tagFilters      The tag filters.
+             * @argument {string} tags              The tags to test.
+             */
+            var matchesSelectedTags = function (tagFilters, tags) {
+                var selectedTags = [];
+                $.each(tagFilters, function (_, filter) {
+                    selectedTags.push(filter);
+                });
+    
+                // normalize the tags
+                var normalizedTags = tags.toLowerCase();
+    
+                var matches = true;
+                $.each(selectedTags, function (i, selectedTag) {
+                    if (normalizedTags.indexOf(selectedTag) === -1) {
+                        matches = false;
+                        return false;
+                    }
+                });
+    
+                return matches;
+            };
+    
+            /**
+             * Sorts the specified data using the specified sort details.
+             *
+             * @param {object} sortDetails
+             * @param {object} data
+             */
+            var sort = function (sortDetails, data) {
+                // defines a function for sorting
+                var comparer = function (a, b) {
+                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                    return aString === bString ? 0 : aString > bString ? 1 : -1;
+                };
+    
+                // perform the sort
+                data.sort(comparer, sortDetails.sortAsc);
+            };
+    
+            /**
+             * Get the text out of the filter field. If the filter field doesn't
+             * have any text it will contain the text 'filter list' so this method
+             * accounts for that.
+             */
+            var getFilterText = function () {
+                return $('#processor-type-filter').val();
+            };
+    
+            /**
+             * Resets the filtered processor types.
+             */
+            var resetProcessorDialog = function () {
+                // clear the selected tag cloud
+                $('#processor-tag-cloud').tagcloud('clearSelectedTags');
+    
+                // clear any filter strings
+                $('#processor-type-filter').val('');
+    
+                // reapply the filter
+                applyFilter();
+    
+                // clear the selected row
+                $('#processor-type-description').text('');
+                $('#processor-type-name').text('');
+                $('#selected-processor-name').text('');
+                $('#selected-processor-type').text('');
+    
+                // unselect any current selection
+                var processTypesGrid = $('#processor-types-table').data('gridInstance');
+                processTypesGrid.setSelectedRows([]);
+                processTypesGrid.resetActiveCell();
+            };
+    
+            /**
+             * Create the processor and add to the graph.
+             *
+             * @argument {string} name              The processor name.
+             * @argument {string} processorType     The processor type.
+             * @argument {object} pt                The point that the processor was dropped.
+             */
+            var createProcessor = function (name, processorType, pt) {
+                var processorEntity = {
+                  'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                        'type': processorType,
+                        'name': name,
+                        'position': {
+                            'x': pt.x,
+                            'y': pt.y
+                        }
+                    }
+                };
+    
+                // create a new processor of the defined type
+                $.ajax({
+                    type: 'POST',
+                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/processors',
+                    data: JSON.stringify(processorEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the processor to the graph
+                  nfGraph.add({
+                        'processors': [response]
+                    }, {
+                        'selectAll': true
+                    });
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+              }).fail(nfErrorHandler.handleAjaxError);
+          };
+  
+          /**
+           * Whether the specified item is selectable.
+           *
+           * @param item process type
+           */
+          var isSelectable = function (item) {
+              return nfCommon.isBlank(item.usageRestriction) || nfCommon.canAccessRestrictedComponents();
+            };
+    
+            function ProcessorComponent() {
+    
+                this.icon = 'icon icon-processor';
+    
+                this.hoverIcon = 'icon icon-processor-add';
+    
+                /**
+                 * The processor component's modal.
+                 */
+                this.modal = {
+    
+                    /**
+                     * The processor component modal's filter.
+                     */
+                    filter: {
+    
+                        /**
+                         * Initialize the filter.
+                         */
+                        init: function () {
+                            // initialize the processor type table
+                            var processorTypesColumns = [
+                              {
+                                  id: 'type',
+                                  name: nf._.msg('nf-processor-component.Type'),
+                                  field: 'label',
+                                  formatter: nfCommon.typeFormatter,
+                                  sortable: true,
+                                  resizable: true
+                              },
+                              {
+                                  id: 'tags',
+                                  name: nf._.msg('nf-processor-component.Tags'),
+                                  field: 'tags',
+                                  sortable: true,
+                                  resizable: true
+                              }
+                            ];
+    
+                            var processorTypesOptions = {
+                                forceFitColumns: true,
+                                enableTextSelectionOnCells: true,
+                                enableCellNavigation: true,
+                                enableColumnReorder: false,
+                                autoEdit: false,
+                                multiSelect: false,
+                                rowHeight: 24
+                            };
+    
+                            // initialize the dataview
+                            var processorTypesData = new Slick.Data.DataView({
+                                inlineFilters: false
+                            });
+                            processorTypesData.setItems([]);
+                            processorTypesData.setFilterArgs({
+                                searchString: getFilterText()
+                            });
+                            processorTypesData.setFilter(filter);
+    
+                            // initialize the sort
+                            sort({
+                                columnId: 'type',
+                                sortAsc: true
+                            }, processorTypesData);
+    
+                            // initialize the grid
+                            var processorTypesGrid = new Slick.Grid('#processor-types-table', processorTypesData, processorTypesColumns, processorTypesOptions);
+                            processorTypesGrid.setSelectionModel(new Slick.RowSelectionModel());
+                            processorTypesGrid.registerPlugin(new Slick.AutoTooltips());
+                            processorTypesGrid.setSortColumn('type', true);
+                            processorTypesGrid.onSort.subscribe(function (e, args) {
+                                sort({
+                                    columnId: args.sortCol.field,
+                                    sortAsc: args.sortAsc
+                                }, processorTypesData);
+                            });
+                            processorTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) {
+                                if ($.isArray(args.rows) && args.rows.length === 1) {
+                                    var processorTypeIndex = args.rows[0];
+                                    var processorType = processorTypesGrid.getDataItem(processorTypeIndex);
+    
+                                    // set the processor type description
+                                  if (nfCommon.isDefinedAndNotNull(processorType)) {
+                                      if (nfCommon.isBlank(processorType.description)) {
+                                          $('#processor-type-description')
+                                              .attr('title', '')
+                                              .html('<span class="unset">No description specified</span>');
+                                        } else {
+                                          $('#processor-type-description')
+                                              .width($('#processor-description-container').innerWidth() - 1)
+                                              .html(processorType.description)
+                                              .ellipsis();
+                                        }
+    
+                                        // populate the dom
+                                        $('#processor-type-name').text(processorType.label).ellipsis();
+                                        $('#selected-processor-name').text(processorType.label);
+                                        $('#selected-processor-type').text(processorType.type);
+    
+                                      // refresh the buttons based on the current selection
+                                      $('#new-processor-dialog').modal('refreshButtons');
+                                  }
+                              }
+                          });
+                          processorTypesGrid.onViewportChanged.subscribe(function (e, args) {
+                              nfCommon.cleanUpTooltips($('#processor-types-table'), 'div.view-usage-restriction');
+                            });
+    
+                            // wire up the dataview to the grid
+                            processorTypesData.onRowCountChanged.subscribe(function (e, args) {
+                                processorTypesGrid.updateRowCount();
+                                processorTypesGrid.render();
+    
+                                // update the total number of displayed processors
+                                $('#displayed-processor-types').text(args.current);
+                            });
+                            processorTypesData.onRowsChanged.subscribe(function (e, args) {
+                                processorTypesGrid.invalidateRows(args.rows);
+                                processorTypesGrid.render();
+                            });
+                            processorTypesData.syncGridSelection(processorTypesGrid, false);
+    
+                            // hold onto an instance of the grid
+                          $('#processor-types-table').data('gridInstance', processorTypesGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                              var usageRestriction = $(this).find('div.view-usage-restriction');
+                              if (usageRestriction.length && !usageRestriction.data('qtip')) {
+                                  var rowId = $(this).find('span.row-id').text();
+  
+                                  // get the status item
+                                  var item = processorTypesData.getItemById(rowId);
+  
+                                  // show the tooltip
+                                  if (nfCommon.isDefinedAndNotNull(item.usageRestriction)) {
+                                      usageRestriction.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                                          content: item.usageRestriction,
+                                          position: {
+                                              container: $('#summary'),
+                                              at: 'bottom right',
+                                              my: 'top left',
+                                              adjust: {
+                                                  x: 4,
+                                                  y: 4
+                                              }
+                                          }
+                                      }));
+                                  }
+                              }
+                          });
+    
+                            // load the available processor types, this select is shown in the
+                            // new processor dialog when a processor is dragged onto the screen
+                            $.ajax({
+                                type: 'GET',
+                                url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.processorTypes,
+                                dataType: 'json'
+                            }).done(function (response) {
+                                var tags = [];
+    
+                                // begin the update
+                                processorTypesData.beginUpdate();
+    
+                                // go through each processor type
+                                $.each(response.processorTypes, function (i, documentedType) {
+                                    var type = documentedType.type;
+    
+                                    // create the row for the processor type
+                                    processorTypesData.addItem({
+                                        id: i,
+                                      label: nfCommon.substringAfterLast(type, '.'),
+                                        type: type,
+                                      description: nfCommon.escapeHtml(documentedType.description),
+                                      usageRestriction: nfCommon.escapeHtml(documentedType.usageRestriction),
+                                        tags: documentedType.tags.join(', ')
+                                    });
+    
+                                    // count the frequency of each tag for this type
+                                    $.each(documentedType.tags, function (i, tag) {
+                                        tags.push(tag.toLowerCase());
+                                    });
+                                });
+    
+                                // end the udpate
+                                processorTypesData.endUpdate();
+    
+                                // set the total number of processors
+                                $('#total-processor-types, #displayed-processor-types').text(response.processorTypes.length);
+    
+                                // create the tag cloud
+                                $('#processor-tag-cloud').tagcloud({
+                                    tags: tags,
+                                    select: applyFilter,
+                                    remove: applyFilter
+                                });
+                          }).fail(nfErrorHandler.handleAjaxError);
+                        }
+                    },
+    
+                    /**
+                     * Gets the modal element.
+                     *
+                     * @returns {*|jQuery|HTMLElement}
+                     */
+                    getElement: function () {
+                        return $('#new-processor-dialog');
+                    },
+    
+                    /**
+                     * Initialize the modal.
+                     */
+                    init: function () {
+                        this.filter.init();
+    
+                        // configure the new processor dialog
+                        this.getElement().modal({
+                            scrollableContentStyle: 'scrollable',
+                      headerText: nf._.msg('nf-processor-component.AddProcessor'),
+                          handler: {
+                              resize: function () {
+                                  $('#processor-type-description')
+                                      .width($('#processor-description-container').innerWidth() - 1)
+                                      .text($('#processor-type-description').attr('title'))
+                                      .ellipsis();
+                              }
+                          }
+                        });
+                    },
+    
+                    /**
+                     * Updates the modal config.
+                     *
+                     * @param {string} name             The name of the property to update.
+                     * @param {object|array} config     The config for the `name`.
+                     */
+                    update: function (name, config) {
+                        this.getElement().modal(name, config);
+                    },
+    
+                    /**
+                     * Show the modal
+                     */
+                    show: function () {
+                        this.getElement().modal('show');
+                    },
+    
+                    /**
+                     * Hide the modal
+                     */
+                    hide: function () {
+                        this.getElement().modal('hide');
+                    }
+                };
+            }
+    
+            ProcessorComponent.prototype = {
+                constructor: ProcessorComponent,
+    
+                /**
+                 * Gets the component.
+                 *
+                 * @returns {*|jQuery|HTMLElement}
+                 */
+                getElement: function () {
+                    return $('#processor-component');
+                },
+    
+                /**
+                 * Enable the component.
+                 */
+                enabled: function () {
+                    this.getElement().attr('disabled', false);
+                },
+    
+                /**
+                 * Disable the component.
+                 */
+                disabled: function () {
+                    this.getElement().attr('disabled', true);
+                },
+    
+                /**
+                 * Handler function for when component is dropped on the canvas.
+                 *
+                 * @argument {object} pt        The point that the component was dropped
+                 */
+                dropHandler: function (pt) {
+                    this.promptForProcessorType(pt);
+                },
+    
+                /**
+                 * The drag icon for the toolbox component.
+                 *
+                 * @param event
+                 * @returns {*|jQuery|HTMLElement}
+                 */
+                dragIcon: function (event) {
+                    return $('<div class="icon icon-processor-add"></div>');
+                },
+    
+                /**
+                 * Prompts the user to select the type of new processor to create.
+                 *
+                 * @argument {object} pt        The point that the processor was dropped
+                 */
+                promptForProcessorType: function (pt) {
+                  var processorComponent = this;
+  
+                    // handles adding the selected processor at the specified point
+                    var addProcessor = function () {
+                        // get the type of processor currently selected
+                        var name = $('#selected-processor-name').text();
+                        var processorType = $('#selected-processor-type').text();
+    
+                        // ensure something was selected
+                        if (name === '' || processorType === '') {
+                          nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-processor-component.AddProcessor'),
+                          dialogContent: nf._.msg('nf-processor-component.AddProcessorContent')
+                            });
+                        } else {
+                            // create the new processor
+                            createProcessor(name, processorType, pt);
+                        }
+    
+                        // hide the dialog
+                      processorComponent.modal.hide();
+                    };
+    
+                    // get the grid reference
+                    var grid = $('#processor-types-table').data('gridInstance');
+    
+                    // add the processor when its double clicked in the table
+                    var gridDoubleClick = function (e, args) {
+                        var processorType = grid.getDataItem(args.row);
+    
+                      if (isSelectable(processorType)) {
+                            $('#selected-processor-name').text(processorType.label);
+                            $('#selected-processor-type').text(processorType.type);
+    
+                            addProcessor();
+                      }
+                    };
+    
+                    // register a handler for double click events
+                    grid.onDblClick.subscribe(gridDoubleClick);
+    
+                    // update the button model
+                    this.modal.update('setButtonModel', [{
+                  buttonText: nf._.msg('nf-processor-component.Add'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                      disabled: function () {
+                          var selected = grid.getSelectedRows();
+  
+                          if (selected.length > 0) {
+                              // grid configured with multi-select = false
+                              var item = grid.getDataItem(selected[0]);
+                              return isSelectable(item) === false;
+                          } else {
+                              return grid.getData().getLength() === 0;
+                          }
+                      },
+                        handler: {
+                            click: addProcessor
+                        }
+                    },
+                        {
+                      buttonText: nf._.msg('nf-processor-component.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    $('#new-processor-dialog').modal('hide');
+                                }
+                            }
+                        }]);
+    
+                    // set a new handler for closing the the dialog
+                    this.modal.update('setCloseHandler', function () {
+                        // remove the handler
+                        grid.onDblClick.unsubscribe(gridDoubleClick);
+    
+                        // clear the current filters
+                        resetProcessorDialog();
+                    });
+    
+                    // show the dialog
+                    this.modal.show();
+    
+                    // setup the filter
+                    $('#processor-type-filter').focus().off('keyup').on('keyup', function (e) {
+                        var code = e.keyCode ? e.keyCode : e.which;
+                        if (code === $.ui.keyCode.ENTER) {
+                          var selected = grid.getSelectedRows();
+  
+                          if (selected.length > 0) {
+                              // grid configured with multi-select = false
+                              var item = grid.getDataItem(selected[0]);
+                              if (isSelectable(item)) {
+                                    addProcessor();
+                              }
+                          }
+                        } else {
+                            applyFilter();
+                        }
+                    });
+    
+                    // adjust the grid canvas now that its been rendered
+                    grid.resizeCanvas();
+                    grid.setSelectedRows([0]);
+                }
+            }
+    
+            var processorComponent = new ProcessorComponent();
+            return processorComponent;
+        };
+  }));
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
new file mode 100644
index 000000000000..86b0dec44ac0
--- /dev/null
+++ 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
@@ -0,0 +1,321 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Client',
+                  'nf.Birdseye',
+                  'nf.Graph',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler',
+                  'nf.Dialog',
+                  'nf.Common'],
+              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
+                  return (nf.ng.RemoteProcessGroupComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.RemoteProcessGroupComponent =
+              factory(require('jquery'),
+                  require('nf.Client'),
+                  require('nf.Birdseye'),
+                  require('nf.Graph'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Dialog'),
+                  require('nf.Common')));
+      } else {
+          nf.ng.RemoteProcessGroupComponent = factory(root.$,
+              root.nf.Client,
+              root.nf.Birdseye,
+              root.nf.Graph,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler,
+              root.nf.Dialog,
+              root.nf.Common);
+      }
+  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
+            /**
+             * Create the controller and add to the graph.
+             *
+             * @argument {object} pt                            The point that the remote group was dropped.
+             */
+            var createRemoteProcessGroup = function (pt) {
+    
+                var remoteProcessGroupEntity = {
+                  'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                      'targetUris': $('#new-remote-process-group-uris').val(),
+                        'position': {
+                            'x': pt.x,
+                            'y': pt.y
+                        },
+                        'communicationsTimeout': $('#new-remote-process-group-timeout').val(),
+                        'yieldDuration': $('#new-remote-process-group-yield-duration').val(),
+                        'transportProtocol': $('#new-remote-process-group-transport-protocol-combo').combo('getSelectedOption').value,
+                      'localNetworkInterface': $('#new-remote-process-group-local-network-interface').val(),
+                        'proxyHost': $('#new-remote-process-group-proxy-host').val(),
+                        'proxyPort': $('#new-remote-process-group-proxy-port').val(),
+                        'proxyUser': $('#new-remote-process-group-proxy-user').val(),
+                        'proxyPassword': $('#new-remote-process-group-proxy-password').val()
+                    }
+                };
+    
+                // create a new processor of the defined type
+                $.ajax({
+                    type: 'POST',
+                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/remote-process-groups',
+                    data: JSON.stringify(remoteProcessGroupEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the processor to the graph
+                  nfGraph.add({
+                        'remoteProcessGroups': [response]
+                    }, {
+                        'selectAll': true
+                    });
+    
+                    // hide the dialog
+                    $('#new-remote-process-group-dialog').modal('hide');
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+                }).fail(function (xhr, status, error) {
+                    if (xhr.status === 400) {
+                        var errors = xhr.responseText.split('\n');
+    
+                        var content;
+                        if (errors.length === 1) {
+                            content = $('<span></span>').text(errors[0]);
+                        } else {
+                          content = nfCommon.formatUnorderedList(errors);
+                        }
+    
+                      nfDialog.showOkDialog({
+                            dialogContent: content,
+                      headerText: nf._.msg('nf-remote-process-group-component.ConfigurationError')
+                        });
+                    } else {
+                      nfErrorHandler.handleAjaxError(xhr, status, error);
+                    }
+                });
+            };
+    
+            function RemoteProcessGroupComponent() {
+    
+                this.icon = 'icon icon-group-remote';
+    
+                this.hoverIcon = 'icon icon-group-remote-add';
+    
+                /**
+                 * The remote group component's modal.
+                 */
+                this.modal = {
+    
+                    /**
+                     * Gets the modal element.
+                     *
+                     * @returns {*|jQuery|HTMLElement}
+                     */
+                    getElement: function () {
+                        return $('#new-remote-process-group-dialog');
+                    },
+    
+                    /**
+                     * Initialize the modal.
+                     */
+                    init: function () {
+                        var defaultTimeout = "30 sec";
+                        var defaultYieldDuration = "10 sec";
+    
+                        // configure the new remote process group dialog
+                        this.getElement().modal({
+                            scrollableContentStyle: 'scrollable',
+                      headerText: nf._.msg('nf-remote-process-group-component.AddRemoteProcessGroup'),
+                            handler: {
+                                close: function () {
+                                  $('#new-remote-process-group-uris').val('');
+                                    $('#new-remote-process-group-timeout').val(defaultTimeout);
+                                    $('#new-remote-process-group-yield-duration').val(defaultYieldDuration);
+                                    $('#new-remote-process-group-transport-protocol-combo').combo('setSelectedOption', {
+                                        value: 'RAW'
+                                    });
+                                  $('#new-remote-process-group-local-network-interface').val('');
+                                    $('#new-remote-process-group-proxy-host').val('');
+                                    $('#new-remote-process-group-proxy-port').val('');
+                                    $('#new-remote-process-group-proxy-user').val('');
+                                    $('#new-remote-process-group-proxy-password').val('');
+                                }
+                            }
+                        });
+    
+                        // set default values
+                        $('#new-remote-process-group-timeout').val(defaultTimeout);
+                        $('#new-remote-process-group-yield-duration').val(defaultYieldDuration);
+    
+                        // initialize the transport protocol combo
+                        $('#new-remote-process-group-transport-protocol-combo').combo({
+                            options: [{
+                                text: 'RAW',
+                                value: 'RAW'
+                            }, {
+                                text: 'HTTP',
+                                value: 'HTTP'
+                            }]
+                        });
+                    },
+    
+                    /**
+                     * Updates the modal config.
+                     *
+                     * @param {string} name             The name of the property to update.
+                     * @param {object|array} config     The config for the `name`.
+                     */
+                    update: function (name, config) {
+                        this.getElement().modal(name, config);
+                    },
+    
+                    /**
+                     * Show the modal.
+                     */
+                    show: function () {
+                        this.getElement().modal('show');
+                    },
+    
+                    /**
+                     * Hide the modal.
+                     */
+                    hide: function () {
+                        this.getElement().modal('hide');
+                    }
+                };
+            }
+    
+            RemoteProcessGroupComponent.prototype = {
+                constructor: RemoteProcessGroupComponent,
+    
+                /**
+                 * Gets the component.
+                 *
+                 * @returns {*|jQuery|HTMLElement}
+                 */
+                getElement: function () {
+                    return $('#group-remote-component');
+                },
+    
+                /**
+                 * Enable the component.
+                 */
+                enabled: function () {
+                    this.getElement().attr('disabled', false);
+                },
+    
+                /**
+                 * Disable the component.
+                 */
+                disabled: function () {
+                    this.getElement().attr('disabled', true);
+                },
+    
+                /**
+                 * Handler function for when component is dropped on the canvas.
+                 *
+                 * @argument {object} pt        The point that the component was dropped.
+                 */
+                dropHandler: function (pt) {
+                    this.promptForRemoteProcessGroupUri(pt);
+                },
+    
+                /**
+                 * The drag icon for the toolbox component.
+                 *
+                 * @param event
+                 * @returns {*|jQuery|HTMLElement}
+                 */
+                dragIcon: function (event) {
+                    return $('<div class="icon icon-group-remote-add"></div>');
+                },
+    
+                /**
+                 * Prompts the user to enter the URI for the remote process group.
+                 *
+                 * @argument {object} pt        The point that the remote group was dropped.
+                 */
+                promptForRemoteProcessGroupUri: function (pt) {
+                  var remoteProcessGroupComponent = this;
+                    var addRemoteProcessGroup = function () {
+                        // create the remote process group
+                        createRemoteProcessGroup(pt);
+                    };
+    
+                    this.modal.update('setButtonModel', [{
+                  buttonText: nf._.msg('nf-remote-process-group-component.Add'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: addRemoteProcessGroup
+                        }
+                    },
+                        {
+                      buttonText: nf._.msg('nf-remote-process-group-component.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                  remoteProcessGroupComponent.modal.hide();
+                                }
+                            }
+                        }]);
+    
+                    // show the dialog
+                    this.modal.show();
+    
+                    // set the focus and key handlers
+                  $('#new-remote-process-group-uris').focus().off('keyup').on('keyup', function (e) {
+                        var code = e.keyCode ? e.keyCode : e.which;
+                        if (code === $.ui.keyCode.ENTER) {
+                            addRemoteProcessGroup();
+                        }
+                    });
+                }
+            }
+    
+            var remoteProcessGroupComponent = new RemoteProcessGroupComponent();
+            return remoteProcessGroupComponent;
+        };
+  }));
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
new file mode 100644
index 000000000000..664010f90830
--- /dev/null
+++ 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
@@ -0,0 +1,287 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Client',
+                  'nf.Birdseye',
+                  'nf.Graph',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler',
+                  'nf.Dialog',
+                  'nf.Common'],
+              function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
+                  return (nf.ng.TemplateComponent = factory($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ng.TemplateComponent =
+              factory(require('jquery'),
+                  require('nf.Client'),
+                  require('nf.Birdseye'),
+                  require('nf.Graph'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Dialog'),
+                  require('nf.Common')));
+      } else {
+          nf.ng.TemplateComponent = factory(root.$,
+              root.nf.Client,
+              root.nf.Birdseye,
+              root.nf.Graph,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler,
+              root.nf.Dialog,
+              root.nf.Common);
+      }
+  }(this, function ($, nfClient, nfBirdseye, nfGraph, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon) {
+      'use strict';
+  
+      return function (serviceProvider) {
+            'use strict';
+    
+            /**
+             * Instantiates the specified template.
+             *
+             * @argument {string} templateId        The template id.
+             * @argument {object} pt                The point that the template was dropped.
+             */
+            var createTemplate = function (templateId, pt) {
+                var instantiateTemplateInstance = {
+                    'templateId': templateId,
+                    'originX': pt.x,
+                    'originY': pt.y
+                };
+    
+                // create a new instance of the new template
+                $.ajax({
+                    type: 'POST',
+                  url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/template-instance',
+                    data: JSON.stringify(instantiateTemplateInstance),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // populate the graph accordingly
+                  nfGraph.add(response.flow, {
+                        'selectAll': true
+                    });
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            function TemplateComponent() {
+    
+                this.icon = 'icon icon-template';
+    
+                this.hoverIcon = 'icon icon-template-add';
+    
+                /**
+                 * The template component's modal.
+                 */
+                this.modal = {
+    
+                    /**
+                     * Gets the modal element.
+                     *
+                     * @returns {*|jQuery|HTMLElement}
+                     */
+                    getElement: function () {
+                        return $('#instantiate-template-dialog');
+                    },
+    
+                    /**
+                     * Initialize the modal.
+                     */
+                    init: function () {
+                        // configure the instantiate template dialog
+                        this.getElement().modal({
+                            scrollableContentStyle: 'scrollable',
+                          headerText: nf._.msg('nf-template-component.AddTemplate')
+                        });
+                    },
+    
+                    /**
+                     * Updates the modal config.
+                     *
+                     * @param {string} name             The name of the property to update.
+                     * @param {object|array} config     The config for the `name`.
+                     */
+                    update: function (name, config) {
+                        this.getElement().modal(name, config);
+                    },
+    
+                    /**
+                     * Show the modal.
+                     */
+                    show: function () {
+                        this.getElement().modal('show');
+                    },
+    
+                    /**
+                     * Hide the modal.
+                     */
+                    hide: function () {
+                        this.getElement().modal('hide');
+                    }
+                };
+            }
+    
+            TemplateComponent.prototype = {
+                constructor: TemplateComponent,
+    
+                /**
+                 * Gets the component.
+                 *
+                 * @returns {*|jQuery|HTMLElement}
+                 */
+                getElement: function () {
+                    return $('#template-component');
+                },
+    
+                /**
+                 * Enable the component.
+                 */
+                enabled: function () {
+                    this.getElement().attr('disabled', false);
+                },
+    
+                /**
+                 * Disable the component.
+                 */
+                disabled: function () {
+                    this.getElement().attr('disabled', true);
+                },
+    
+                /**
+                 * Handler function for when component is dropped on the canvas.
+                 *
+                 * @argument {object} pt        The point that the component was dropped.
+                 */
+                dropHandler: function (pt) {
+                    this.promptForTemplate(pt);
+                },
+    
+                /**
+                 * The drag icon for the toolbox component.
+                 *
+                 * @param event
+                 * @returns {*|jQuery|HTMLElement}
+                 */
+                dragIcon: function (event) {
+                    return $('<div class="icon icon-template-add"></div>');
+                },
+    
+                /**
+                 * Prompts the user to select a template.
+                 *
+                 * @argument {object} pt        The point that the template was dropped.
+                 */
+                promptForTemplate: function (pt) {
+                  var templateComponent = this;
+                    $.ajax({
+                        type: 'GET',
+                        url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/flow/templates',
+                        dataType: 'json'
+                    }).done(function (response) {
+                        var templates = response.templates;
+                      if (nfCommon.isDefinedAndNotNull(templates) && templates.length > 0) {
+                          // sort the templates
+                          templates = templates.sort(function (one, two) {
+                              var oneDate = nfCommon.parseDateTime(one.template.timestamp);
+                              var twoDate = nfCommon.parseDateTime(two.template.timestamp);
+  
+                              // newest templates first
+                              return twoDate.getTime() - oneDate.getTime();
+                          });
+  
+                            var options = [];
+                            $.each(templates, function (_, templateEntity) {
+                                if (templateEntity.permissions.canRead === true) {
+                                    options.push({
+                                        text: templateEntity.template.name,
+                                        value: templateEntity.id,
+                                      description: nfCommon.escapeHtml(templateEntity.template.description)
+                                    });
+                                }
+                            });
+    
+                            // configure the templates combo
+                            $('#available-templates').combo({
+                                maxHeight: 300,
+                                options: options
+                            });
+    
+                            // update the button model
+                          templateComponent.modal.update('setButtonModel', [{
+                          buttonText: nf._.msg('nf-template-component.Add'),
+                                color: {
+                                    base: '#728E9B',
+                                    hover: '#004849',
+                                    text: '#ffffff'
+                                },
+                                handler: {
+                                    click: function () {
+                                        // get the type of processor currently selected
+                                        var selectedOption = $('#available-templates').combo('getSelectedOption');
+                                        var templateId = selectedOption.value;
+    
+                                        // hide the dialog
+                                      templateComponent.modal.hide();
+    
+                                        // instantiate the specified template
+                                        createTemplate(templateId, pt);
+                                    }
+                                }
+                            },
+                                {
+                              buttonText: nf._.msg('nf-template-component.Cancel'),
+                                    color: {
+                                        base: '#E3E8EB',
+                                        hover: '#C7D2D7',
+                                        text: '#004849'
+                                    },
+                                    handler: {
+                                        click: function () {
+                                          templateComponent.modal.hide();
+                                        }
+                                    }
+                                }]);
+    
+                            // show the dialog
+                          templateComponent.modal.show();
+                        } else {
+                          nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-template-component.InstantiateTemplate'),
+                          dialogContent: nf._.msg('nf-template-component.InstantiateTemplateContent')
+                            });
+                        }
+    
+                  }).fail(nfErrorHandler.handleAjaxError);
+                }
+            }
+    
+            var templateComponent = new TemplateComponent();
+            return templateComponent;
+        };
+  }));
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
new file mode 100644
index 000000000000..078af95d4198
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
@@ -0,0 +1,1724 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.CanvasUtils',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.ErrorHandler',
+                  'nf.Clipboard',
+                  'nf.Snippet',
+                  'nf.GoTo',
+                  'nf.ng.Bridge',
+                  'nf.Shell',
+                  'nf.ComponentState',
+                  'nf.Draggable',
+                  'nf.Birdseye',
+                  'nf.Connection',
+                  'nf.Graph',
+                  'nf.ProcessGroupConfiguration',
+                  'nf.ProcessorConfiguration',
+                  'nf.ProcessorDetails',
+                  'nf.LabelConfiguration',
+                  'nf.RemoteProcessGroupConfiguration',
+                  'nf.RemoteProcessGroupDetails',
+                  'nf.PortConfiguration',
+                  'nf.PortDetails',
+                  'nf.ConnectionConfiguration',
+                  'nf.ConnectionDetails',
+                  'nf.PolicyManagement',
+                  'nf.RemoteProcessGroup',
+                  'nf.Label',
+                  'nf.Processor',
+                  'nf.RemoteProcessGroupPorts',
+                  'nf.QueueListing',
+                  'nf.StatusHistory'],
+              function ($, d3, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler, nfClipboard, nfSnippet, nfGoto, nfNgBridge, nfShell, nfComponentState, nfDraggable, nfBirdseye, nfConnection, nfGraph, nfProcessGroupConfiguration, nfProcessorConfiguration, nfProcessorDetails, nfLabelConfiguration, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupDetails, nfPortConfiguration, nfPortDetails, nfConnectionConfiguration, nfConnectionDetails, nfPolicyManagement, nfRemoteProcessGroup, nfLabel, nfProcessor, nfRemoteProcessGroupPorts, nfQueueListing, nfStatusHistory) {
+                  return (nf.Actions = factory($, d3, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler, nfClipboard, nfSnippet, nfGoto, nfNgBridge, nfShell, nfComponentState, nfDraggable, nfBirdseye, nfConnection, nfGraph, nfProcessGroupConfiguration, nfProcessorConfiguration, nfProcessorDetails, nfLabelConfiguration, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupDetails, nfPortConfiguration, nfPortDetails, nfConnectionConfiguration, nfConnectionDetails, nfPolicyManagement, nfRemoteProcessGroup, nfLabel, nfProcessor, nfRemoteProcessGroupPorts, nfQueueListing, nfStatusHistory));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.Actions =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.CanvasUtils'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Clipboard'),
+                  require('nf.Snippet'),
+                  require('nf.GoTo'),
+                  require('nf.ng.Bridge'),
+                  require('nf.Shell'),
+                  require('nf.ComponentState'),
+                  require('nf.Draggable'),
+                  require('nf.Birdseye'),
+                  require('nf.Connection'),
+                  require('nf.Graph'),
+                  require('nf.ProcessGroupConfiguration'),
+                  require('nf.ProcessorConfiguration'),
+                  require('nf.ProcessorDetails'),
+                  require('nf.LabelConfiguration'),
+                  require('nf.RemoteProcessGroupConfiguration'),
+                  require('nf.RemoteProcessGroupDetails'),
+                  require('nf.PortConfiguration'),
+                  require('nf.PortDetails'),
+                  require('nf.ConnectionConfiguration'),
+                  require('nf.ConnectionDetails'),
+                  require('nf.PolicyManagement'),
+                  require('nf.RemoteProcessGroup'),
+                  require('nf.Label'),
+                  require('nf.Processor'),
+                  require('nf.RemoteProcessGroupPorts'),
+                  require('nf.QueueListing'),
+                  require('nf.StatusHistory')));
+      } else {
+          nf.Actions = factory(root.$,
+              root.d3,
+              root.nf.CanvasUtils,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.ErrorHandler,
+              root.nf.Clipboard,
+              root.nf.Snippet,
+              root.nf.GoTo,
+              root.nf.ng.Bridge,
+              root.nf.Shell,
+              root.nf.ComponentState,
+              root.nf.Draggable,
+              root.nf.Birdseye,
+              root.nf.Connection,
+              root.nf.Graph,
+              root.nf.ProcessGroupConfiguration,
+              root.nf.ProcessorConfiguration,
+              root.nf.ProcessorDetails,
+              root.nf.LabelConfiguration,
+              root.nf.RemoteProcessGroupConfiguration,
+              root.nf.RemoteProcessGroupDetails,
+              root.nf.PortConfiguration,
+              root.nf.PortDetails,
+              root.nf.ConnectionConfiguration,
+              root.nf.ConnectionDetails,
+              root.nf.PolicyManagement,
+              root.nf.RemoteProcessGroup,
+              root.nf.Label,
+              root.nf.Processor,
+              root.nf.RemoteProcessGroupPorts,
+              root.nf.QueueListing,
+              root.nf.StatusHistory);
+      }
+  }(this, function ($, d3, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler, nfClipboard, nfSnippet, nfGoto, nfNgBridge, nfShell, nfComponentState, nfDraggable, nfBirdseye, nfConnection, nfGraph, nfProcessGroupConfiguration, nfProcessorConfiguration, nfProcessorDetails, nfLabelConfiguration, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupDetails, nfPortConfiguration, nfPortDetails, nfConnectionConfiguration, nfConnectionDetails, nfPolicyManagement, nfRemoteProcessGroup, nfLabel, nfProcessor, nfRemoteProcessGroupPorts, nfQueueListing, nfStatusHistory) {
+      'use strict';
+    
+        var config = {
+            urls: {
+                api: '../nifi-api',
+                controller: '../nifi-api/controller'
+            }
+        };
+    
+        /**
+         * Initializes the drop request status dialog.
+         */
+        var initializeDropRequestStatusDialog = function () {
+            // configure the drop request status dialog
+            $('#drop-request-status-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+                handler: {
+                    close: function () {
+                        // clear the current button model
+                        $('#drop-request-status-dialog').modal('setButtonModel', []);
+                    }
+                }
+            });
+        };
+    
+    
+        /**
+         * Updates the resource with the specified entity.
+         *
+         * @param {string} uri
+         * @param {object} entity
+         */
+        var updateResource = function (uri, entity) {
+            return $.ajax({
+                type: 'PUT',
+                url: uri,
+                data: JSON.stringify(entity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).fail(function (xhr, status, error) {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-actions.UpdateResource'),
+                  dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                });
+            });
+        };
+    
+        // create a method for updating process groups and processors
+        var updateProcessGroup = function (response) {
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(response.id),
+                dataType: 'json'
+            }).done(function (response) {
+              nfGraph.set(response.processGroupFlow.flow);
+            });
+        };
+    
+      // determine if the source of this connection is part of the selection
+      var isSourceSelected = function (connection, selection) {
+          return selection.filter(function (d) {
+                  return nfCanvasUtils.getConnectionSourceComponentId(connection) === d.id;
+              }).size() > 0;
+      };
+  
+      var nfActions = {
+            /**
+             * Initializes the actions.
+             */
+            init: function () {
+                initializeDropRequestStatusDialog();
+            },
+    
+            /**
+             * Enters the specified process group.
+             *
+             * @param {selection} selection     The the currently selected component
+             */
+            enterGroup: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isProcessGroup(selection)) {
+                    var selectionData = selection.datum();
+                  nfCanvasUtils.getComponentByType('ProcessGroup').enterGroup(selectionData.id);
+                }
+            },
+    
+            /**
+             * Exits the current process group but entering the parent group.
+             */
+            leaveGroup: function () {
+              nfCanvasUtils.getComponentByType('ProcessGroup').enterGroup(nfCanvasUtils.getParentGroupId());
+            },
+    
+            /**
+             * Refresh the flow of the remote process group in the specified selection.
+             *
+             * @param {selection} selection
+             */
+            refreshRemoteFlow: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                    var d = selection.datum();
+                    var refreshTimestamp = d.component.flowRefreshed;
+    
+                    var setLastRefreshed = function (lastRefreshed) {
+                        // set the new value in case the component is redrawn during the refresh
+                        d.component.flowRefreshed = lastRefreshed;
+    
+                        // update the UI to show last refreshed if appropriate
+                        if (selection.classed('visible')) {
+                            selection.select('text.remote-process-group-last-refresh')
+                                .text(function () {
+                                    return lastRefreshed;
+                                });
+                        }
+                    };
+    
+                    var poll = function (nextDelay) {
+                        $.ajax({
+                            type: 'GET',
+                            url: d.uri,
+                            dataType: 'json'
+                        }).done(function (response) {
+                            var remoteProcessGroup = response.component;
+    
+                            // the timestamp has not updated yet, poll again
+                            if (refreshTimestamp === remoteProcessGroup.flowRefreshed) {
+                                schedule(nextDelay);
+                            } else {
+                              nfRemoteProcessGroup.set(response);
+    
+                                // reload the group's connections
+                              var connections = nfConnection.getComponentConnections(remoteProcessGroup.id);
+                                $.each(connections, function (_, connection) {
+                                    if (connection.permissions.canRead) {
+                                      nfConnection.reload(connection.id);
+                                    }
+                                });
+                            }
+                        });
+                    };
+    
+                    var schedule = function (delay) {
+                        if (delay <= 32) {
+                            setTimeout(function () {
+                                poll(delay * 2);
+                            }, delay * 1000);
+                        } else {
+                            // reset to the previous value since the contents could not be updated (set to null?)
+                            setLastRefreshed(refreshTimestamp);
+                        }
+                    };
+    
+                  setLastRefreshed(nf._.msg('nf-actions.Refreshing'));
+                    poll(1);
+                }
+            },
+    
+            /**
+             * Opens the remote process group in the specified selection.
+             *
+             * @param {selection} selection         The selection
+             */
+            openUri: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                    var selectionData = selection.datum();
+                    var uri = selectionData.component.targetUri;
+    
+                  if (!nfCommon.isBlank(uri)) {
+                        window.open(encodeURI(uri));
+                    } else {
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-actions.RemoteGroupProcess'),
+                          dialogContent: nf._.msg('nf-actions.NoTargetURIDefined')
+                        });
+                    }
+                }
+            },
+    
+            /**
+             * Shows and selects the source of the connection in the specified selection.
+             *
+             * @param {selection} selection     The selection
+             */
+            showSource: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isConnection(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // the source is in the current group
+                  if (selectionData.sourceGroupId === nfCanvasUtils.getGroupId()) {
+                        var source = d3.select('#id-' + selectionData.sourceId);
+                      nfActions.show(source);
+                    } else if (selectionData.sourceType === 'REMOTE_OUTPUT_PORT') {
+                        // if the source is remote
+                        var remoteSource = d3.select('#id-' + selectionData.sourceGroupId);
+                      nfActions.show(remoteSource);
+                    } else {
+                        // if the source is local but in a sub group
+                      nfCanvasUtils.showComponent(selectionData.sourceGroupId, selectionData.sourceId);
+                    }
+                }
+            },
+    
+            /**
+             * Shows and selects the destination of the connection in the specified selection.
+             *
+             * @param {selection} selection     The selection
+             */
+            showDestination: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isConnection(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // the destination is in the current group or its remote
+                  if (selectionData.destinationGroupId === nfCanvasUtils.getGroupId()) {
+                        var destination = d3.select('#id-' + selectionData.destinationId);
+                      nfActions.show(destination);
+                    } else if (selectionData.destinationType === 'REMOTE_INPUT_PORT') {
+                        // if the destination is remote
+                        var remoteDestination = d3.select('#id-' + selectionData.destinationGroupId);
+                      nfActions.show(remoteDestination);
+                    } else {
+                        // if the destination is local but in a sub group
+                      nfCanvasUtils.showComponent(selectionData.destinationGroupId, selectionData.destinationId);
+                    }
+                }
+            },
+    
+            /**
+             * Shows the downstream components from the specified selection.
+             *
+             * @param {selection} selection     The selection
+             */
+            showDownstream: function (selection) {
+              if (selection.size() === 1 && !nfCanvasUtils.isConnection(selection)) {
+    
+                    // open the downstream dialog according to the selection
+                  if (nfCanvasUtils.isProcessor(selection)) {
+                      nfGoto.showDownstreamFromProcessor(selection);
+                  } else if (nfCanvasUtils.isFunnel(selection)) {
+                      nfGoto.showDownstreamFromFunnel(selection);
+                  } else if (nfCanvasUtils.isInputPort(selection)) {
+                      nfGoto.showDownstreamFromInputPort(selection);
+                  } else if (nfCanvasUtils.isOutputPort(selection)) {
+                      nfGoto.showDownstreamFromOutputPort(selection);
+                  } else if (nfCanvasUtils.isProcessGroup(selection) || nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                      nfGoto.showDownstreamFromGroup(selection);
+                    }
+                }
+            },
+    
+            /**
+             * Shows the upstream components from the specified selection.
+             *
+             * @param {selection} selection     The selection
+             */
+            showUpstream: function (selection) {
+              if (selection.size() === 1 && !nfCanvasUtils.isConnection(selection)) {
+    
+                    // open the downstream dialog according to the selection
+                  if (nfCanvasUtils.isProcessor(selection)) {
+                      nfGoto.showUpstreamFromProcessor(selection);
+                  } else if (nfCanvasUtils.isFunnel(selection)) {
+                      nfGoto.showUpstreamFromFunnel(selection);
+                  } else if (nfCanvasUtils.isInputPort(selection)) {
+                      nfGoto.showUpstreamFromInputPort(selection);
+                  } else if (nfCanvasUtils.isOutputPort(selection)) {
+                      nfGoto.showUpstreamFromOutputPort(selection);
+                  } else if (nfCanvasUtils.isProcessGroup(selection) || nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                      nfGoto.showUpstreamFromGroup(selection);
+                    }
+                }
+            },
+    
+            /**
+             * Shows and selects the component in the specified selection.
+             *
+             * @param {selection} selection     The selection
+             */
+            show: function (selection) {
+                if (selection.size() === 1) {
+                    // deselect the current selection
+                  var currentlySelected = nfCanvasUtils.getSelection();
+                    currentlySelected.classed('selected', false);
+    
+                    // select only the component/connection in question
+                    selection.classed('selected', true);
+                  nfActions.center(selection);
+  
+                  // inform Angular app that values have changed
+                  nfNgBridge.digest();
+                }
+            },
+    
+            /**
+             * Selects all components in the specified selection.
+             *
+             * @param {selection} selection     Selection of components to select
+             */
+            select: function (selection) {
+                selection.classed('selected', true);
+            },
+    
+            /**
+             * Selects all components.
+             */
+            selectAll: function () {
+              nfActions.select(d3.selectAll('g.component, g.connection'));
+            },
+    
+            /**
+             * Centers the component in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            center: function (selection) {
+                if (selection.size() === 1) {
+                    var box;
+                  if (nfCanvasUtils.isConnection(selection)) {
+                        var x, y;
+                        var d = selection.datum();
+    
+                        // get the position of the connection label
+                        if (d.bends.length > 0) {
+                            var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1);
+                            x = d.bends[i].x;
+                            y = d.bends[i].y;
+                        } else {
+                            x = (d.start.x + d.end.x) / 2;
+                            y = (d.start.y + d.end.y) / 2;
+                        }
+    
+                        box = {
+                            x: x,
+                            y: y,
+                            width: 1,
+                            height: 1
+                        };
+                    } else {
+                        var selectionData = selection.datum();
+                        var selectionPosition = selectionData.position;
+    
+                        box = {
+                            x: selectionPosition.x,
+                            y: selectionPosition.y,
+                            width: selectionData.dimensions.width,
+                            height: selectionData.dimensions.height
+                        };
+                    }
+    
+                    // center on the component
+                  nfCanvasUtils.centerBoundingBox(box);
+    
+                    // refresh the canvas
+                  nfCanvasUtils.refreshCanvasView({
+                        transition: true
+                    });
+                }
+            },
+    
+            /**
+             * Enables all eligible selected components.
+             *
+             * @argument {selection} selection      The selection
+             */
+            enable: function (selection) {
+              var componentsToEnable = nfCanvasUtils.filterEnable(selection);
+    
+                if (componentsToEnable.empty()) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-actions.Header1'),
+                      dialogContent: nf._.msg('nf-actions.Message1')
+                    });
+                } else {
+                    var enableRequests = [];
+    
+                    // enable the selected processors
+                    componentsToEnable.each(function (d) {
+                        var selected = d3.select(this);
+    
+                        // build the entity
+                        var entity = {
+                          'revision': nfClient.getRevision(d),
+                            'component': {
+                                'id': d.id,
+                                'state': 'STOPPED'
+                            }
+                        };
+    
+                        enableRequests.push(updateResource(d.uri, entity).done(function (response) {
+                          nfCanvasUtils.getComponentByType(d.type).set(response);
+                        }));
+                    });
+    
+                    // inform Angular app once the updates have completed
+                    if (enableRequests.length > 0) {
+                        $.when.apply(window, enableRequests).always(function () {
+                          nfNgBridge.digest();
+                        });
+                    }
+                }
+            },
+    
+            /**
+             * Disables all eligible selected components.
+             *
+             * @argument {selection} selection      The selection
+             */
+            disable: function (selection) {
+              var componentsToDisable = nfCanvasUtils.filterDisable(selection);
+    
+                if (componentsToDisable.empty()) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-actions.Header2'),
+                      dialogContent: nf._.msg('nf-actions.Message2')
+                    });
+                } else {
+                    var disableRequests = [];
+    
+                    // disable the selected components
+                    componentsToDisable.each(function (d) {
+                        var selected = d3.select(this);
+    
+                        // build the entity
+                        var entity = {
+                          'revision': nfClient.getRevision(d),
+                            'component': {
+                                'id': d.id,
+                                'state': 'DISABLED'
+                            }
+                        };
+    
+                        disableRequests.push(updateResource(d.uri, entity).done(function (response) {
+                          nfCanvasUtils.getComponentByType(d.type).set(response);
+                        }));
+                    });
+    
+                    // inform Angular app once the updates have completed
+                    if (disableRequests.length > 0) {
+                        $.when.apply(window, disableRequests).always(function () {
+                          nfNgBridge.digest();
+                        });
+                    }
+                }
+            },
+    
+            /**
+             * Opens provenance with the component in the specified selection.
+             *
+             * @argument {selection} selection The selection
+             */
+            openProvenance: function (selection) {
+                if (selection.size() === 1) {
+                    var selectionData = selection.datum();
+    
+                    // open the provenance page with the specified component
+                  nfShell.showPage('provenance?' + $.param({
+                            componentId: selectionData.id
+                        }));
+                }
+            },
+    
+            /**
+             * Starts the components in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            start: function (selection) {
+                if (selection.empty()) {
+                    // build the entity
+                    var entity = {
+                      'id': nfCanvasUtils.getGroupId(),
+                        'state': 'RUNNING'
+                    };
+    
+                  updateResource(config.urls.api + '/flow/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()), entity).done(updateProcessGroup);
+                } else {
+                    var componentsToStart = selection.filter(function (d) {
+                      return nfCanvasUtils.isRunnable(d3.select(this));
+                    });
+    
+                    // ensure there are startable components selected
+                    if (componentsToStart.empty()) {
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-actions.Header3'),
+                          dialogContent: nf._.msg('nf-actions.Message3')
+                        });
+                    } else {
+                        var startRequests = [];
+    
+                        // start each selected component
+                        componentsToStart.each(function (d) {
+                            var selected = d3.select(this);
+    
+                            // prepare the request
+                            var uri, entity;
+                          if (nfCanvasUtils.isProcessGroup(selected)) {
+                                uri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(d.id);
+                                entity = {
+                                    'id': d.id,
+                                    'state': 'RUNNING'
+                                }
+                            } else {
+                                uri = d.uri;
+                                entity = {
+                                  'revision': nfClient.getRevision(d),
+                                    'component': {
+                                        'id': d.id,
+                                        'state': 'RUNNING'
+                                    }
+                                };
+                            }
+    
+                            startRequests.push(updateResource(uri, entity).done(function (response) {
+                              if (nfCanvasUtils.isProcessGroup(selected)) {
+                                  nfCanvasUtils.getComponentByType('ProcessGroup').reload(d.id);
+                                } else {
+                                  nfCanvasUtils.getComponentByType(d.type).set(response);
+                                }
+                            }));
+                        });
+    
+                        // inform Angular app once the updates have completed
+                        if (startRequests.length > 0) {
+                            $.when.apply(window, startRequests).always(function () {
+                              nfNgBridge.digest();
+                            });
+                        }
+                    }
+                }
+            },
+    
+            /**
+             * Stops the components in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            stop: function (selection) {
+                if (selection.empty()) {
+                    // build the entity
+                    var entity = {
+                      'id': nfCanvasUtils.getGroupId(),
+                        'state': 'STOPPED'
+                    };
+    
+                  updateResource(config.urls.api + '/flow/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()), entity).done(updateProcessGroup);
+                } else {
+                    var componentsToStop = selection.filter(function (d) {
+                      return nfCanvasUtils.isStoppable(d3.select(this));
+                    });
+    
+                    // ensure there are some component to stop
+                    if (componentsToStop.empty()) {
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-actions.Header4'),
+                          dialogContent: nf._.msg('nf-actions.Message4')
+                        });
+                    } else {
+                        var stopRequests = [];
+    
+                        // stop each selected component
+                        componentsToStop.each(function (d) {
+                            var selected = d3.select(this);
+    
+                            // prepare the request
+                            var uri, entity;
+                          if (nfCanvasUtils.isProcessGroup(selected)) {
+                                uri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(d.id);
+                                entity = {
+                                    'id': d.id,
+                                    'state': 'STOPPED'
+                                };
+                            } else {
+                                uri = d.uri;
+                                entity = {
+                                  'revision': nfClient.getRevision(d),
+                                    'component': {
+                                        'id': d.id,
+                                        'state': 'STOPPED'
+                                    }
+                                };
+                            }
+    
+                            stopRequests.push(updateResource(uri, entity).done(function (response) {
+                              if (nfCanvasUtils.isProcessGroup(selected)) {
+                                  nfCanvasUtils.getComponentByType('ProcessGroup').reload(d.id);
+                                } else {
+                                  nfCanvasUtils.getComponentByType(d.type).set(response);
+                                }
+                            }));
+                        });
+    
+                        // inform Angular app once the updates have completed
+                        if (stopRequests.length > 0) {
+                            $.when.apply(window, stopRequests).always(function () {
+                              nfNgBridge.digest();
+                            });
+                        }
+                    }
+                }
+            },
+    
+            /**
+             * Enables transmission for the components in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            enableTransmission: function (selection) {
+                var componentsToEnable = selection.filter(function (d) {
+                  return nfCanvasUtils.canStartTransmitting(d3.select(this));
+                });
+    
+                // start each selected component
+                componentsToEnable.each(function (d) {
+                    // build the entity
+                    var entity = {
+                      'revision': nfClient.getRevision(d),
+                        'component': {
+                            'id': d.id,
+                            'transmitting': true
+                        }
+                    };
+    
+                    // start transmitting
+                    updateResource(d.uri, entity).done(function (response) {
+                      nfRemoteProcessGroup.set(response);
+                    });
+                });
+            },
+    
+            /**
+             * Disables transmission for the components in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            disableTransmission: function (selection) {
+                var componentsToDisable = selection.filter(function (d) {
+                  return nfCanvasUtils.canStopTransmitting(d3.select(this));
+                });
+    
+                // stop each selected component
+                componentsToDisable.each(function (d) {
+                    // build the entity
+                    var entity = {
+                      'revision': nfClient.getRevision(d),
+                        'component': {
+                            'id': d.id,
+                            'transmitting': false
+                        }
+                    };
+    
+                    updateResource(d.uri, entity).done(function (response) {
+                      nfRemoteProcessGroup.set(response);
+                    });
+                });
+            },
+    
+            /**
+             * Shows the configuration dialog for the specified selection.
+             *
+             * @param {selection} selection     Selection of the component to be configured
+             */
+            showConfiguration: function (selection) {
+                if (selection.empty()) {
+                  nfProcessGroupConfiguration.showConfiguration(nfCanvasUtils.getGroupId());
+                } else if (selection.size() === 1) {
+                    var selectionData = selection.datum();
+                  if (nfCanvasUtils.isProcessor(selection)) {
+                      nfProcessorConfiguration.showConfiguration(selection);
+                  } else if (nfCanvasUtils.isLabel(selection)) {
+                      nfLabelConfiguration.showConfiguration(selection);
+                  } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                      nfProcessGroupConfiguration.showConfiguration(selectionData.id);
+                  } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                      nfRemoteProcessGroupConfiguration.showConfiguration(selection);
+                  } else if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
+                      nfPortConfiguration.showConfiguration(selection);
+                  } else if (nfCanvasUtils.isConnection(selection)) {
+                      nfConnectionConfiguration.showConfiguration(selection);
+                    }
+                }
+            },
+    
+            /**
+             * Opens the policy management page for the selected component.
+             *
+             * @param selection
+             */
+            managePolicies: function(selection) {
+                if (selection.size() <= 1) {
+                  nfPolicyManagement.showComponentPolicy(selection);
+                }
+            },
+    
+            // Defines an action for showing component details (like configuration but read only).
+            showDetails: function (selection) {
+                if (selection.empty()) {
+                  nfProcessGroupConfiguration.showConfiguration(nfCanvasUtils.getGroupId());
+                } else if (selection.size() === 1) {
+                    var selectionData = selection.datum();
+                  if (nfCanvasUtils.isProcessor(selection)) {
+                      nfProcessorDetails.showDetails(nfCanvasUtils.getGroupId(), selectionData.id);
+                  } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                      nfProcessGroupConfiguration.showConfiguration(selectionData.id);
+                  } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                      nfRemoteProcessGroupDetails.showDetails(selection);
+                  } else if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
+                      nfPortDetails.showDetails(selection);
+                  } else if (nfCanvasUtils.isConnection(selection)) {
+                      nfConnectionDetails.showDetails(nfCanvasUtils.getGroupId(), selectionData.id);
+                    }
+                }
+            },
+    
+            /**
+             * Shows the usage documentation for the component in the specified selection.
+             *
+             * @param {selection} selection     The selection
+             */
+            showUsage: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isProcessor(selection)) {
+                    var selectionData = selection.datum();
+                  nfShell.showPage('../nifi-docs/documentation?' + $.param({
+                          select: nfCommon.substringAfterLast(selectionData.component.type, '.')
+                        }));
+                }
+            },
+    
+            /**
+             * Shows the stats for the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            showStats: function (selection) {
+                if (selection.size() === 1) {
+                    var selectionData = selection.datum();
+                  if (nfCanvasUtils.isProcessor(selection)) {
+                      nfStatusHistory.showProcessorChart(nfCanvasUtils.getGroupId(), selectionData.id);
+                  } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                      nfStatusHistory.showProcessGroupChart(nfCanvasUtils.getGroupId(), selectionData.id);
+                  } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                      nfStatusHistory.showRemoteProcessGroupChart(nfCanvasUtils.getGroupId(), selectionData.id);
+                  } else if (nfCanvasUtils.isConnection(selection)) {
+                      nfStatusHistory.showConnectionChart(nfCanvasUtils.getGroupId(), selectionData.id);
+                    }
+                }
+            },
+    
+            /**
+             * Opens the remote ports dialog for the remote process group in the specified selection.
+             *
+             * @param {selection} selection         The selection
+             */
+            remotePorts: function (selection) {
+              if (selection.size() === 1 && nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                  nfRemoteProcessGroupPorts.showPorts(selection);
+                }
+            },
+    
+            /**
+             * Reloads the status for the entire canvas (components and flow.)
+             */
+            reload: function () {
+              nfCanvasUtils.reload({
+                    'transition': true
+                });
+            },
+    
+            /**
+             * Deletes the component in the specified selection.
+             *
+             * @param {selection} selection     The selection containing the component to be removed
+             */
+            'delete': function (selection) {
+              if (nfCommon.isUndefined(selection) || selection.empty()) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-actions.Header5'),
+                      dialogContent: nf._.msg('nf-actions.Message5')
+                    });
+                } else {
+                    if (selection.size() === 1) {
+                        var selectionData = selection.datum();
+                      var revision = nfClient.getRevision(selectionData);
+    
+                        $.ajax({
+                            type: 'DELETE',
+                            url: selectionData.uri + '?' + $.param({
+                                version: revision.version,
+                                clientId: revision.clientId
+                            }),
+                            dataType: 'json'
+                        }).done(function (response) {
+                            // remove the component/connection in question
+                          nfCanvasUtils.getComponentByType(selectionData.type).remove(selectionData.id);
+    
+                            // if the selection is a connection, reload the source and destination accordingly
+                          if (nfCanvasUtils.isConnection(selection) === false) {
+                              var connections = nfConnection.getComponentConnections(selectionData.id);
+                                if (connections.length > 0) {
+                                    var ids = [];
+                                    $.each(connections, function (_, connection) {
+                                        ids.push(connection.id);
+                                    });
+    
+                                    // remove the corresponding connections
+                                  nfConnection.remove(ids);
+                                }
+                            }
+    
+                            // refresh the birdseye
+                          nfBirdseye.refresh();
+                            // inform Angular app values have changed
+                          nfNgBridge.digest();
+                      }).fail(nfErrorHandler.handleAjaxError);
+                    } else {
+                      var parentGroupId = nfCanvasUtils.getGroupId();
+  
+                        // create a snippet for the specified component and link to the data flow
+                      var snippet = nfSnippet.marshal(selection, parentGroupId);
+                      nfSnippet.create(snippet).done(function (response) {
+                            // remove the snippet, effectively removing the components
+                          nfSnippet.remove(response.snippet.id).done(function () {
+                                var components = d3.map();
+    
+                                // add the id to the type's array
+                                var addComponent = function (type, id) {
+                                    if (!components.has(type)) {
+                                        components.set(type, []);
+                                    }
+                                    components.get(type).push(id);
+                                };
+    
+                                // go through each component being removed
+                                selection.each(function (d) {
+                                    // remove the corresponding entry
+                                    addComponent(d.type, d.id);
+    
+                                    // if this is not a connection, see if it has any connections that need to be removed
+                                    if (d.type !== 'Connection') {
+                                      var connections = nfConnection.getComponentConnections(d.id);
+                                        if (connections.length > 0) {
+                                            $.each(connections, function (_, connection) {
+                                                addComponent('Connection', connection.id);
+                                            });
+                                        }
+                                    }
+                                });
+    
+                                // remove all the non connections in the snippet first
+                                components.forEach(function (type, ids) {
+                                    if (type !== 'Connection') {
+                                      nfCanvasUtils.getComponentByType(type).remove(ids);
+                                    }
+                                });
+    
+                                // then remove all the connections
+                                if (components.has('Connection')) {
+                                  nfConnection.remove(components.get('Connection'));
+                                }
+    
+                                // refresh the birdseye
+                              nfBirdseye.refresh();
+    
+                                // inform Angular app values have changed
+                              nfNgBridge.digest();
+                          }).fail(nfErrorHandler.handleAjaxError);
+                      }).fail(nfErrorHandler.handleAjaxError);
+                    }
+                }
+            },
+    
+            /**
+             * Deletes the flow files in the specified connection.
+             *
+             * @param {type} selection
+             */
+            emptyQueue: function (selection) {
+              if (selection.size() !== 1 || !nfCanvasUtils.isConnection(selection)) {
+                    return;
+                }
+    
+                // prompt the user before emptying the queue
+              nfDialog.showYesNoDialog({
+                  headerText: nf._.msg('nf-actions.EmptyQueue'),
+                  dialogContent: nf._.msg('nf-actions.Message6'),
+                  noText: nf._.msg('nf-actions.Cancel'),
+                  yesText: nf._.msg('nf-actions.Empty'),
+                    yesHandler: function () {
+                        // get the connection data
+                        var connection = selection.datum();
+    
+                        var MAX_DELAY = 4;
+                        var cancelled = false;
+                        var dropRequest = null;
+                        var dropRequestTimer = null;
+    
+                        // updates the progress bar
+                        var updateProgress = function (percentComplete) {
+                            // remove existing labels
+                            var progressBar = $('#drop-request-percent-complete');
+                            progressBar.find('div.progress-label').remove();
+                            progressBar.find('md-progress-linear').remove();
+    
+                            // update the progress bar
+                            var label = $('<div class="progress-label"></div>').text(percentComplete + '%');
+                          (nfNgBridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + percentComplete + '" class="md-hue-2" md-mode="determinate" aria-label="Drop request percent complete"></md-progress-linear>'))(nfNgBridge.rootScope)).appendTo(progressBar);
+                            progressBar.append(label);
+                        };
+    
+                        // update the button model of the drop request status dialog
+                        $('#drop-request-status-dialog').modal('setButtonModel', [{
+                          buttonText: nf._.msg('nf-actions.Stop'),
+                            color: {
+                                base: '#728E9B',
+                                hover: '#004849',
+                                text: '#ffffff'
+                            },
+                            handler: {
+                                click: function () {
+                                    cancelled = true;
+    
+                                    // we are waiting for the next poll attempt
+                                    if (dropRequestTimer !== null) {
+                                        // cancel it
+                                        clearTimeout(dropRequestTimer);
+    
+                                        // cancel the drop request
+                                        completeDropRequest();
+                                    }
+                                }
+                            }
+                        }]);
+    
+                        // completes the drop request by removing it and showing how many flowfiles were deleted
+                        var completeDropRequest = function () {
+                          // reload the connection status
+                          nfConnection.reloadStatus(connection.id);
+  
+                          // clean up as appropriate
+                          if (nfCommon.isDefinedAndNotNull(dropRequest)) {
+                                $.ajax({
+                                    type: 'DELETE',
+                                    url: dropRequest.uri,
+                                    dataType: 'json'
+                                }).done(function (response) {
+                                    // report the results of this drop request
+                                    dropRequest = response.dropRequest;
+    
+                                    // build the results
+                                    var droppedTokens = dropRequest.dropped.split(/ \/ /);
+                                    var results = $('<div></div>');
+                                    $('<span class="label"></span>').text(droppedTokens[0]).appendTo(results);
+                                  $('<span></span>').text(nf._.msg('nf-actions.Message15')+' (' + droppedTokens[1] + ')').appendTo(results);
+    
+                                    // if the request did not complete, include the original
+                                    if (dropRequest.percentCompleted < 100) {
+                                        var originalTokens = dropRequest.original.split(/ \/ /);
+                                      $('<span class="label"></span>').text(nf._.msg('nf-actions.Message16') + originalTokens[0]).appendTo(results) + nf._.msg('nf-actions.Message17');
+                                        $('<span></span>').text(' (' + originalTokens[1] + ')').appendTo(results);
+                                    }
+                                  $('<span></span>').text(nf._.msg('nf-actions.Message18')).appendTo(results);
+    
+                                    // if this request failed so the error
+                                  if (nfCommon.isDefinedAndNotNull(dropRequest.failureReason)) {
+                                        $('<br/><br/><span></span>').text(dropRequest.failureReason).appendTo(results);
+                                    }
+    
+                                    // display the results
+                                  nfDialog.showOkDialog({
+                                      headerText: nf._.msg('nf-actions.EmptyQueue'),
+                                        dialogContent: results
+                                    });
+                                }).always(function () {
+                                    $('#drop-request-status-dialog').modal('hide');
+                                });
+                            } else {
+                                // nothing was removed
+                              nfDialog.showOkDialog({
+                                  headerText: nf._.msg('nf-actions.EmptyQueue'),
+                                  dialogContent: nf._.msg('nf-actions.Message8')
+                                });
+    
+                                // close the dialog
+                                $('#drop-request-status-dialog').modal('hide');
+                            }
+                        };
+    
+                        // process the drop request
+                        var processDropRequest = function (delay) {
+                            // update the percent complete
+                            updateProgress(dropRequest.percentCompleted);
+    
+                            // update the status of the drop request
+                            $('#drop-request-status-message').text(dropRequest.state);
+    
+                            // close the dialog if the
+                            if (dropRequest.finished === true || cancelled === true) {
+                                completeDropRequest();
+                            } else {
+                                // wait delay to poll again
+                                dropRequestTimer = setTimeout(function () {
+                                    // clear the drop request timer
+                                    dropRequestTimer = null;
+    
+                                    // schedule to poll the status again in nextDelay
+                                    pollDropRequest(Math.min(MAX_DELAY, delay * 2));
+                                }, delay * 1000);
+                            }
+                        };
+    
+                        // schedule for the next poll iteration
+                        var pollDropRequest = function (nextDelay) {
+                            $.ajax({
+                                type: 'GET',
+                                url: dropRequest.uri,
+                                dataType: 'json'
+                            }).done(function (response) {
+                                dropRequest = response.dropRequest;
+                                processDropRequest(nextDelay);
+                            }).fail(function (xhr, status, error) {
+                                if (xhr.status === 403) {
+                                  nfErrorHandler.handleAjaxError(xhr, status, error);
+                                } else {
+                                    completeDropRequest()
+                                }
+                            });
+                        };
+    
+                        // issue the request to delete the flow files
+                        $.ajax({
+                            type: 'POST',
+                            url: '../nifi-api/flowfile-queues/' + encodeURIComponent(connection.id) + '/drop-requests',
+                            dataType: 'json',
+                            contentType: 'application/json'
+                        }).done(function (response) {
+                            // initialize the progress bar value
+                            updateProgress(0);
+    
+                            // show the progress dialog
+                            $('#drop-request-status-dialog').modal('show');
+    
+                            // process the drop request
+                            dropRequest = response.dropRequest;
+                            processDropRequest(1);
+                        }).fail(function (xhr, status, error) {
+                            if (xhr.status === 403) {
+                              nfErrorHandler.handleAjaxError(xhr, status, error);
+                            } else {
+                                completeDropRequest()
+                            }
+                        });
+                    }
+                });
+            },
+    
+            /**
+             * Lists the flow files in the specified connection.
+             *
+             * @param {selection} selection
+             */
+            listQueue: function (selection) {
+              if (selection.size() !== 1 || !nfCanvasUtils.isConnection(selection)) {
+                    return;
+                }
+    
+                // get the connection data
+                var connection = selection.datum();
+    
+                // list the flow files in the specified connection
+              nfQueueListing.listQueue(connection);
+            },
+    
+            /**
+             * Views the state for the specified processor.
+             *
+             * @param {selection} selection
+             */
+            viewState: function (selection) {
+              if (selection.size() !== 1 || !nfCanvasUtils.isProcessor(selection)) {
+                    return;
+                }
+    
+                // get the processor data
+                var processor = selection.datum();
+    
+                // view the state for the selected processor
+              nfComponentState.showState(processor, nfCanvasUtils.isConfigurable(selection));
+          },
+  
+          /**
+           * Aligns the components in the specified selection vertically along the center of the components.
+           *
+           * @param {array} selection      The selection
+           */
+          alignVertical: function (selection) {
+              var updates = d3.map();
+              // ensure every component is writable
+              if (nfCanvasUtils.canModify(selection) === false) {
+                  nfDialog.showOkDialog({
+                      headerText: 'Component Position',
+                      dialogContent: 'Must be authorized to modify every component selected.'
+                  });
+                  return;
+              }
+              // determine the extent
+              var minX = null, maxX = null;
+              selection.each(function (d) {
+                  if (d.type !== "Connection") {
+                      if (minX === null || d.position.x < minX) {
+                          minX = d.position.x;
+                      }
+                      var componentMaxX = d.position.x + d.dimensions.width;
+                      if (maxX === null || componentMaxX > maxX) {
+                          maxX = componentMaxX;
+                      }
+                  }
+              });
+              var center = (minX + maxX) / 2;
+  
+              // align all components left
+              selection.each(function(d) {
+                  if (d.type !== "Connection") {
+                      var delta = {
+                          x: center - (d.position.x + d.dimensions.width / 2),
+                          y: 0
+                      };
+                      // if this component is already centered, no need to updated it
+                      if (delta.x !== 0) {
+                          // consider any connections
+                          var connections = nfConnection.getComponentConnections(d.id);
+                          $.each(connections, function(_, connection) {
+                              var connectionSelection = d3.select('#id-' + connection.id);
+  
+                              if (!updates.has(connection.id) && nfCanvasUtils.getConnectionSourceComponentId(connection) === nfCanvasUtils.getConnectionDestinationComponentId(connection)) {
+                                  // this connection is self looping and hasn't been updated by the delta yet
+                                  var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
+                                  if (connectionUpdate !== null) {
+                                      updates.set(connection.id, connectionUpdate);
+                                  }
+                              } else if (!updates.has(connection.id) && connectionSelection.classed('selected') && nfCanvasUtils.canModify(connectionSelection)) {
+                                  // this is a selected connection that hasn't been updated by the delta yet
+                                  if (nfCanvasUtils.getConnectionSourceComponentId(connection) === d.id || !isSourceSelected(connection, selection)) {
+                                      // the connection is either outgoing or incoming when the source of the connection is not part of the selection
+                                      var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
+                                      if (connectionUpdate !== null) {
+                                          updates.set(connection.id, connectionUpdate);
+                                      }
+                                  }
+                              }
+                          });
+                          updates.set(d.id, nfDraggable.updateComponentPosition(d, delta));
+                      }
+                  }
+              });
+              nfDraggable.refreshConnections(updates);
+          },
+  
+          /**
+           * Aligns the components in the specified selection horizontally along the center of the components.
+           *
+           * @param {array} selection      The selection
+           */
+          alignHorizontal: function (selection) {
+              var updates = d3.map();
+              // ensure every component is writable
+              if (nfCanvasUtils.canModify(selection) === false) {
+                  nfDialog.showOkDialog({
+                      headerText: 'Component Position',
+                      dialogContent: 'Must be authorized to modify every component selected.'
+                  });
+                  return;
+              }
+  
+              // determine the extent
+              var minY = null, maxY = null;
+              selection.each(function (d) {
+                  if (d.type !== "Connection") {
+                      if (minY === null || d.position.y < minY) {
+                          minY = d.position.y;
+                      }
+                      var componentMaxY = d.position.y + d.dimensions.height;
+                      if (maxY === null || componentMaxY > maxY) {
+                          maxY = componentMaxY;
+                      }
+                  }
+              });
+              var center = (minY + maxY) / 2;
+  
+              // align all components with top most component
+              selection.each(function(d) {
+                  if (d.type !== "Connection") {
+                      var delta = {
+                          x: 0,
+                          y: center - (d.position.y + d.dimensions.height / 2)
+                      };
+  
+                      // if this component is already centered, no need to updated it
+                      if (delta.y !== 0) {
+                          // consider any connections
+                          var connections = nfConnection.getComponentConnections(d.id);
+                          $.each(connections, function(_, connection) {
+                              var connectionSelection = d3.select('#id-' + connection.id);
+  
+                              if (!updates.has(connection.id) && nfCanvasUtils.getConnectionSourceComponentId(connection) === nfCanvasUtils.getConnectionDestinationComponentId(connection)) {
+                                  // this connection is self looping and hasn't been updated by the delta yet
+                                  var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
+                                  if (connectionUpdate !== null) {
+                                      updates.set(connection.id, connectionUpdate);
+                                  }
+                              } else if (!updates.has(connection.id) && connectionSelection.classed('selected') && nfCanvasUtils.canModify(connectionSelection)) {
+                                  // this is a selected connection that hasn't been updated by the delta yet
+                                  if (nfCanvasUtils.getConnectionSourceComponentId(connection) === d.id || !isSourceSelected(connection, selection)) {
+                                      // the connection is either outgoing or incoming when the source of the connection is not part of the selection
+                                      var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
+                                      if (connectionUpdate !== null) {
+                                          updates.set(connection.id, connectionUpdate);
+                                      }
+                                  }
+                              }
+                          });
+                          updates.set(d.id, nfDraggable.updateComponentPosition(d, delta));
+                      }
+                  }
+              });
+  
+              nfDraggable.refreshConnections(updates);
+            },
+    
+            /**
+             * Opens the fill color dialog for the component in the specified selection.
+             *
+             * @param {type} selection      The selection
+             */
+            fillColor: function (selection) {
+              if (nfCanvasUtils.isColorable(selection)) {
+                    // we know that the entire selection is processors or labels... this
+                    // checks if the first item is a processor... if true, all processors
+                  var allProcessors = nfCanvasUtils.isProcessor(selection);
+    
+                    var color;
+                    if (allProcessors) {
+                      color = nfProcessor.defaultFillColor();
+                    } else {
+                      color = nfLabel.defaultColor();
+                    }
+    
+                    // if there is only one component selected, get its color otherwise use default
+                    if (selection.size() === 1) {
+                        var selectionData = selection.datum();
+    
+                        // use the specified color if appropriate
+                      if (nfCommon.isDefinedAndNotNull(selectionData.component.style['background-color'])) {
+                            color = selectionData.component.style['background-color'];
+                        }
+                    }
+    
+                    // set the color
+                    $('#fill-color').minicolors('value', color);
+    
+                    // update the preview visibility
+                    if (allProcessors) {
+                        $('#fill-color-processor-preview').show();
+                        $('#fill-color-label-preview').hide();
+                    } else {
+                        $('#fill-color-processor-preview').hide();
+                        $('#fill-color-label-preview').show();
+                    }
+    
+                    // show the dialog
+                    $('#fill-color-dialog').modal('show');
+                }
+            },
+    
+            /**
+             * Groups the currently selected components into a new group.
+             */
+            group: function () {
+              var selection = nfCanvasUtils.getSelection();
+    
+                // ensure that components have been specified
+                if (selection.empty()) {
+                    return;
+                }
+    
+                // determine the origin of the bounding box for the selected components
+              var origin = nfCanvasUtils.getOrigin(selection);
+    
+                var pt = {'x': origin.x, 'y': origin.y};
+              $.when(nfNgBridge.injector.get('groupComponent').promptForGroupName(pt)).done(function (processGroup) {
+                    var group = d3.select('#id-' + processGroup.id);
+                  nfCanvasUtils.moveComponents(selection, group);
+                });
+            },
+    
+            /**
+             * Moves the currently selected component into the current parent group.
+             */
+            moveIntoParent: function () {
+              var selection = nfCanvasUtils.getSelection();
+    
+                // ensure that components have been specified
+                if (selection.empty()) {
+                    return;
+                }
+    
+                // move the current selection into the parent group
+              nfCanvasUtils.moveComponentsToParent(selection);
+            },
+    
+            /**
+             * Uploads a new template.
+             */
+            uploadTemplate: function () {
+                $('#upload-template-dialog').modal('show');
+            },
+    
+            /**
+             * Creates a new template based off the currently selected components. If no components
+             * are selected, a template of the entire canvas is made.
+             */
+            template: function () {
+              var selection = nfCanvasUtils.getSelection();
+    
+                // if no components are selected, use the entire graph
+                if (selection.empty()) {
+                    selection = d3.selectAll('g.component, g.connection');
+                }
+    
+                // ensure that components have been specified
+                if (selection.empty()) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-actions.CreateTemplate'),
+                      dialogContent: nf._.msg('nf-actions.Message9')
+                    });
+                    return;
+                }
+    
+                // remove dangling edges (where only the source or destination is also selected)
+              selection = nfCanvasUtils.trimDanglingEdges(selection);
+    
+                // ensure that components specified are valid
+                if (selection.empty()) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-actions.CreateTemplate'),
+                      dialogContent: nf._.msg('nf-actions.Message9')
+                    });
+                    return;
+                }
+    
+                // prompt for the template name
+                $('#new-template-dialog').modal('setButtonModel', [{
+                  buttonText: nf._.msg('nf-actions.Create'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // get the template details
+                            var templateName = $('#new-template-name').val();
+    
+                            // ensure the template name is not blank
+                          if (nfCommon.isBlank(templateName)) {
+                              nfDialog.showOkDialog({
+                                  headerText: nf._.msg('nf-actions.CreateTemplate'),
+                                  dialogContent: nf._.msg('nf-actions.Message13')
+                                });
+                                return;
+                            }
+    
+                            // hide the dialog
+                            $('#new-template-dialog').modal('hide');
+    
+                            // get the description
+                            var templateDescription = $('#new-template-description').val();
+    
+                            // create a snippet
+                          var parentGroupId = nfCanvasUtils.getGroupId();
+                          var snippet = nfSnippet.marshal(selection, parentGroupId);
+    
+                            // create the snippet
+                          nfSnippet.create(snippet).done(function (response) {
+                                var createSnippetEntity = {
+                                    'name': templateName,
+                                    'description': templateDescription,
+                                    'snippetId': response.snippet.id
+                                };
+    
+                                // create the template
+                                $.ajax({
+                                    type: 'POST',
+                                  url: config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/templates',
+                                    data: JSON.stringify(createSnippetEntity),
+                                    dataType: 'json',
+                                    contentType: 'application/json'
+                                }).done(function () {
+                                    // show the confirmation dialog
+                                  nfDialog.showOkDialog({
+                                      headerText: nf._.msg('nf-actions.CreateTemplate'),
+                                      dialogContent: nf._.msg('nf-actions.Template')+"'" + nfCommon.escapeHtml(templateName) + "'"+nf._.msg('nf-actions.Message11')
+                                    });
+                                }).always(function () {
+                                    // clear the template dialog fields
+                                    $('#new-template-name').val('');
+                                    $('#new-template-description').val('');
+                              }).fail(nfErrorHandler.handleAjaxError);
+                          }).fail(nfErrorHandler.handleAjaxError);
+                        }
+                    }
+                }, {
+                  buttonText: nf._.msg('nf-actions.Cancel'),
+                    color: {
+                        base: '#E3E8EB',
+                        hover: '#C7D2D7',
+                        text: '#004849'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the template dialog fields
+                            $('#new-template-name').val('');
+                            $('#new-template-description').val('');
+    
+                            $('#new-template-dialog').modal('hide');
+                        }
+                    }
+                }]).modal('show');
+    
+                // auto focus on the template name
+                $('#new-template-name').focus();
+            },
+    
+            /**
+             * Copies the component in the specified selection.
+             *
+             * @param {selection} selection     The selection containing the component to be copied
+             */
+            copy: function (selection) {
+                if (selection.empty()) {
+                    return;
+                }
+    
+                // determine the origin of the bounding box of the selection
+              var origin = nfCanvasUtils.getOrigin(selection);
+    
+                // copy the snippet details
+              var parentGroupId = nfCanvasUtils.getGroupId();
+              nfClipboard.copy({
+                  snippet: nfSnippet.marshal(selection, parentGroupId),
+                    origin: origin
+                });
+            },
+    
+            /**
+             * Pastes the currently copied selection.
+             *
+             * @param {selection} selection     The selection containing the component to be copied
+             * @param {obj} evt                 The mouse event
+             */
+            paste: function (selection, evt) {
+              if (nfCommon.isDefinedAndNotNull(evt)) {
+                    // get the current scale and translation
+                  var scale = nfCanvasUtils.scaleCanvasView();
+                  var translate = nfCanvasUtils.translateCanvasView();
+    
+                    var mouseX = evt.pageX;
+                  var mouseY = evt.pageY - nfCanvasUtils.getCanvasOffset();
+    
+                    // adjust the x and y coordinates accordingly
+                    var x = (mouseX / scale) - (translate[0] / scale);
+                    var y = (mouseY / scale) - (translate[1] / scale);
+    
+                    // record the paste origin
+                    var pasteLocation = {
+                        x: x,
+                        y: y
+                    };
+                }
+    
+                // perform the paste
+              nfClipboard.paste().done(function (data) {
+                    var copySnippet = $.Deferred(function (deferred) {
+                        var reject = function (xhr, status, error) {
+                            deferred.reject(xhr.responseText);
+                        };
+    
+                      var destinationProcessGroupId = nfCanvasUtils.getGroupId();
+  
+                        // create a snippet from the details
+                      nfSnippet.create(data['snippet']).done(function (createResponse) {
+                            // determine the origin of the bounding box of the copy
+                            var origin = pasteLocation;
+                            var snippetOrigin = data['origin'];
+    
+                            // determine the appropriate origin
+                          if (!nfCommon.isDefinedAndNotNull(origin)) {
+                                snippetOrigin.x += 25;
+                                snippetOrigin.y += 25;
+                                origin = snippetOrigin;
+                            }
+    
+                            // copy the snippet to the new location
+                          nfSnippet.copy(createResponse.snippet.id, origin, destinationProcessGroupId).done(function (copyResponse) {
+                                var snippetFlow = copyResponse.flow;
+    
+                                // update the graph accordingly
+                              nfGraph.add(snippetFlow, {
+                                    'selectAll': true
+                                });
+    
+                                // update component visibility
+                              nfGraph.updateVisibility();
+    
+                                // refresh the birdseye/toolbar
+                              nfBirdseye.refresh();
+                            }).fail(function () {
+                                // an error occured while performing the copy operation, reload the
+                                // graph in case it was a partial success
+                              nfCanvasUtils.reload().done(function () {
+                                    // update component visibility
+                                  nfGraph.updateVisibility();
+    
+                                    // refresh the birdseye/toolbar
+                                  nfBirdseye.refresh();
+                                });
+                            }).fail(reject);
+                        }).fail(reject);
+                    }).promise();
+    
+                    // show the appropriate message is the copy fails
+                    copySnippet.fail(function (responseText) {
+                        // look for a message
+                      var message = nf._.msg('nf-actions.Message12');
+                        if ($.trim(responseText) !== '') {
+                            message = responseText;
+                        }
+    
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-actions.Header6'),
+                          dialogContent: nfCommon.escapeHtml(message)
+                        });
+                    });
+                });
+            },
+    
+            /**
+             * Moves the connection in the specified selection to the front.
+             *
+             * @param {selection} selection
+             */
+            toFront: function (selection) {
+              if (selection.size() !== 1 || !nfCanvasUtils.isConnection(selection)) {
+                    return;
+                }
+    
+                // get the connection data
+                var connection = selection.datum();
+    
+                // determine the current max zIndex
+                var maxZIndex = -1;
+              $.each(nfConnection.get(), function (_, otherConnection) {
+                    if (connection.id !== otherConnection.id && otherConnection.zIndex > maxZIndex) {
+                        maxZIndex = otherConnection.zIndex;
+                    }
+                });
+    
+                // ensure the edge wasn't already in front
+                if (maxZIndex >= 0) {
+                    // use one higher
+                    var zIndex = maxZIndex + 1;
+    
+                    // build the connection entity
+                    var connectionEntity = {
+                      'revision': nfClient.getRevision(connection),
+                        'component': {
+                            'id': connection.id,
+                            'zIndex': zIndex
+                        }
+                    };
+    
+                    // update the edge in question
+                    $.ajax({
+                        type: 'PUT',
+                        url: connection.uri,
+                        data: JSON.stringify(connectionEntity),
+                        dataType: 'json',
+                        contentType: 'application/json'
+                    }).done(function (response) {
+                      nfConnection.set(response);
+                    });
+                }
+            }
+        };
+    
+      return nfActions;
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js
new file mode 100644
index 000000000000..4355e05a7b72
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js
@@ -0,0 +1,372 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'd3',
+                'nf.Common',
+                'nf.CanvasUtils',
+                'nf.ContextMenu',
+                'nf.Label'],
+            function ($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel) {
+                return (nf.Birdseye = factory($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Birdseye =
+            factory(require('jquery'),
+                require('d3'),
+                require('nf.Common'),
+                require('nf.CanvasUtils'),
+                require('nf.ContextMenu'),
+                require('nf.Label')));
+    } else {
+        nf.Birdseye = factory(root.$,
+            root.d3,
+            root.nf.Common,
+            root.nf.CanvasUtils,
+            root.nf.ContextMenu,
+            root.nf.Label);
+    }
+}(this, function ($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel) {
+    'use strict';
+
+    var nfGraph;
+    var birdseyeGroup;
+    var componentGroup;
+
+    // refreshes the birdseye
+    var refresh = function (components) {
+        var translate = nfCanvasUtils.translateCanvasView();
+        var scale = nfCanvasUtils.scaleCanvasView();
+
+        // scale the translation
+        translate = [translate[0] / scale, translate[1] / scale];
+
+        // get the bounding box for the graph and convert into canvas space
+        var graphBox = d3.select('#canvas').node().getBoundingClientRect();
+        var graphLeft = (graphBox.left / scale) - translate[0];
+        var graphTop = ((graphBox.top - nfCanvasUtils.getCanvasOffset()) / scale) - translate[1];
+        var graphRight = (graphBox.right / scale) - translate[0];
+        var graphBottom = (graphBox.bottom / scale) - translate[1];
+
+        // get the screen bounding box and convert into canvas space
+        var canvasContainer = $('#canvas-container');
+        var screenWidth = canvasContainer.width() / scale;
+        var screenHeight = canvasContainer.height() / scale;
+        var screenLeft = -translate[0];
+        var screenTop = -translate[1];
+        var screenRight = screenLeft + screenWidth;
+        var screenBottom = screenTop + screenHeight;
+
+        // determine the maximum size of the canvas given the graph and the visible portion on the screen
+        var canvasLeft = Math.min(graphLeft, screenLeft);
+        var canvasTop = Math.min(graphTop, screenTop);
+        var canvasRight = Math.max(graphRight, screenRight);
+        var canvasBottom = Math.max(graphBottom, screenBottom);
+        var canvasWidth = canvasRight - canvasLeft;
+        var canvasHeight = canvasBottom - canvasTop;
+
+        // get the width/height we have to work with
+        var birdseye = $('#birdseye');
+        var birdseyeWidth = birdseye.width();
+        var birdseyeHeight = birdseye.height();
+
+        // determine the appropriate scale for the birdseye (min scale to accomodate total width and height)
+        var birdseyeWidthScale = birdseyeWidth / canvasWidth;
+        var birdseyeHeightScale = birdseyeHeight / canvasHeight;
+        var birdseyeScale = Math.min(birdseyeWidthScale, birdseyeHeightScale);
+
+        // calculate the translation for the birdseye and the brush
+        var birdseyeTranslate = [0, 0];
+        var brushTranslate = [0, 0];
+        if (translate[0] < 0 && translate[1] < 0) {
+            birdseyeTranslate = [0, 0];
+            brushTranslate = [-translate[0], -translate[1]];
+        } else if (translate[0] >= 0 && translate[1] < 0) {
+            birdseyeTranslate = [translate[0], 0];
+            brushTranslate = [0, -translate[1]];
+        } else if (translate[0] < 0 && translate[1] >= 0) {
+            birdseyeTranslate = [0, translate[1]];
+            brushTranslate = [-translate[0], 0];
+        } else {
+            birdseyeTranslate = [translate[0], translate[1]];
+            brushTranslate = [0, 0];
+        }
+
+        // offset in case the graph has positive/negative coordinates and panning appropriately
+        var offsetX = 0;
+        var left = -graphLeft;
+        if (translate[0] < 0) {
+            if (translate[0] < left) {
+                offsetX = left;
+            } else {
+                offsetX = left - (left - translate[0]);
+            }
+        } else {
+            if (translate[0] < left) {
+                offsetX = left - translate[0];
+            }
+        }
+        var offsetY = 0;
+        var top = -graphTop;
+        if (translate[1] < 0) {
+            if (translate[1] < top) {
+                offsetY = top;
+            } else {
+                offsetY = top - (top - translate[1]);
+            }
+        } else {
+            if (translate[1] < top) {
+                offsetY = top - translate[1];
+            }
+        }
+
+        // adjust the translations of the birdseye and brush to account for the offset
+        birdseyeTranslate = [birdseyeTranslate[0] + offsetX, birdseyeTranslate[1] + offsetY];
+        brushTranslate = [brushTranslate[0] + offsetX, brushTranslate[1] + offsetY];
+
+        // update the birdseye
+        birdseyeGroup.attr('transform', 'scale(' + birdseyeScale + ')');
+        componentGroup.attr('transform', 'translate(' + birdseyeTranslate + ')');
+
+        // update the brush
+        d3.select('rect.birdseye-brush')
+            .attr({
+                'width': screenWidth,
+                'height': screenHeight,
+                'stroke-width': (2 / birdseyeScale),
+                'transform': function (d) {
+                    d.x = brushTranslate[0];
+                    d.y = brushTranslate[1];
+
+                    return 'translate(' + brushTranslate + ')';
+                }
+            });
+
+        // redraw the canvas
+        var canvasElement = d3.select('#birdseye-canvas').node();
+        var context = canvasElement.getContext('2d');
+        context.save();
+
+        // clear the current canvas
+        context.setTransform(1, 0, 0, 1, 0, 0);
+        context.clearRect(0, 0, canvasElement.width, canvasElement.height);
+
+        context.restore();
+        context.save();
+
+        // apply the current transformation
+        context.translate(birdseyeTranslate[0] * birdseyeScale, birdseyeTranslate[1] * birdseyeScale);
+        context.scale(birdseyeScale, birdseyeScale);
+
+        // labels
+        $.each(components.labels, function (_, d) {
+            var color = nfLabel.defaultColor();
+
+            if (d.permissions.canRead) {
+                // use the specified color if appropriate
+                if (nfCommon.isDefinedAndNotNull(d.component.style['background-color'])) {
+                    color = d.component.style['background-color'];
+                }
+            }
+
+            context.fillStyle = color;
+            context.fillRect(d.position.x, d.position.y, d.dimensions.width, d.dimensions.height);
+        });
+
+        // funnels
+        context.fillStyle = '#ad9897';
+        $.each(components.funnels, function (_, d) {
+            context.fillRect(d.position.x, d.position.y, d.dimensions.width, d.dimensions.height);
+        });
+
+        // ports
+        context.fillStyle = '#bbdcde';
+        $.each(components.ports, function (_, d) {
+            context.fillRect(d.position.x, d.position.y, d.dimensions.width, d.dimensions.height);
+        });
+
+        // remote process groups
+        context.fillStyle = '#728e9b';
+        $.each(components.remoteProcessGroups, function (_, d) {
+            context.fillRect(d.position.x, d.position.y, d.dimensions.width, d.dimensions.height);
+        });
+
+        // process groups
+        $.each(components.processGroups, function (_, d) {
+            context.fillRect(d.position.x, d.position.y, d.dimensions.width, d.dimensions.height);
+        });
+
+        // processors
+        $.each(components.processors, function (_, d) {
+            //default color
+            var color = '#dde4eb';
+
+            if (d.permissions.canRead) {
+                // use the specified color if appropriate
+                if (nfCommon.isDefinedAndNotNull(d.component.style['background-color'])) {
+                    color = d.component.style['background-color'];
+
+                    //if the background color is #ffffff use the default instead
+                    if (color === '#ffffff') {
+                        color = '#dde4eb';
+                    }
+                }
+            }
+
+            context.fillStyle = color;
+            context.fillRect(d.position.x, d.position.y, d.dimensions.width, d.dimensions.height);
+        });
+
+        context.restore();
+    };
+
+    // whether or not the birdseye is open, don't adjust unless necessary
+    var visible = true;
+
+    var nfBirdseye = {
+
+        /**
+         * Initializes of the graph controller.
+         *
+         * @param nfGraphRef   The nfConnectable module.
+         */
+        init: function (nfGraphRef) {
+            nfGraph = nfGraphRef;
+
+            var birdseye = $('#birdseye');
+
+            d3.select('#birdseye').append('canvas')
+                .attr('id', 'birdseye-canvas')
+                .attr('width', birdseye.width())
+                .attr('height', birdseye.height());
+
+            // build the birdseye svg
+            var svg = d3.select('#birdseye').append('svg')
+                .attr('width', birdseye.width())
+                .attr('height', birdseye.height());
+
+            // group birdseye components together
+            birdseyeGroup = svg.append('g')
+                .attr('class', 'birdseye');
+
+            // processor in the birdseye
+            componentGroup = birdseyeGroup.append('g')
+                .attr('pointer-events', 'none');
+
+            // define the brush drag behavior
+            var brush = d3.behavior.drag()
+                .origin(function (d) {
+                    return {
+                        x: d.x,
+                        y: d.y
+                    };
+                })
+                .on('dragstart', function () {
+                    // hide the context menu
+                    nfContextMenu.hide();
+                })
+                .on('drag', function (d) {
+                    d.x += d3.event.dx;
+                    d.y += d3.event.dy;
+
+                    // update the location of the brush
+                    d3.select(this).attr('transform', function () {
+                        return 'translate(' + d.x + ', ' + d.y + ')';
+                    });
+                    // get the current transformation
+                    var scale = nfCanvasUtils.scaleCanvasView();
+                    var translate = nfCanvasUtils.translateCanvasView();
+
+                    // update the translation according to the delta
+                    translate = [(-d3.event.dx * scale) + translate[0], (-d3.event.dy * scale) + translate[1]];
+
+                    // record the current transforms
+                    nfCanvasUtils.translateCanvasView(translate);
+
+                    // refresh the canvas
+                    nfCanvasUtils.refreshCanvasView({
+                        persist: false,
+                        transition: false,
+                        refreshComponents: false,
+                        refreshBirdseye: false
+                    });
+                })
+                .on('dragend', function () {
+                    // update component visibility
+                    nfGraph.updateVisibility();
+
+                    // persist the users view
+                    nfCanvasUtils.persistUserView();
+
+                    // refresh the birdseye
+                    nfBirdseye.refresh();
+                });
+
+            // context area
+            birdseyeGroup.append('g')
+                .attr({
+                    'pointer-events': 'all',
+                    'class': 'birdseye-brush-container'
+                })
+                .append('rect')
+                .attr('class', 'birdseye-brush moveable')
+                .datum({
+                    x: 0,
+                    y: 0
+                })
+                .call(brush);
+        },
+
+        /**
+         * Handles rendering of the birdseye tool.
+         */
+        refresh: function () {
+            if (visible) {
+                refresh(nfGraph.get());
+            }
+        },
+
+        /**
+         * Function that needs to be call when the birdseye visibility changes.
+         *
+         * @param {boolean} isVisible
+         */
+        updateBirdseyeVisibility: function (isVisible) {
+            var birdseye = $('#birdseye');
+
+            // update the outline collapse icon
+            if (isVisible) {
+                // show the outline
+                birdseye.show();
+                visible = true;
+
+                // refresh the birdseye as it may have changed
+                refresh(nfGraph.get());
+            } else {
+                // hide the outline
+                birdseye.hide();
+                visible = false;
+            }
+        }
+    };
+
+    return nfBirdseye;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js
new file mode 100644
index 000000000000..2d98e08ef44b
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js
@@ -0,0 +1,400 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'angular',
+                'nf.Common',
+                'nf.CanvasUtils',
+                'nf.ErrorHandler',
+                'nf.Client',
+                'nf.ClusterSummary',
+                'nf.Dialog',
+                'nf.Storage',
+                'nf.Canvas',
+                'nf.Graph',
+                'nf.ContextMenu',
+                'nf.Shell',
+                'nf.Settings',
+                'nf.Snippet',
+                'nf.Actions',
+                'nf.QueueListing',
+                'nf.ComponentState',
+                'nf.Draggable',
+                'nf.Connectable',
+                'nf.StatusHistory',
+                'nf.Birdseye',
+                'nf.ConnectionConfiguration',
+                'nf.ControllerService',
+                'nf.ReportingTask',
+                'nf.PolicyManagement',
+                'nf.ProcessorConfiguration',
+                'nf.ProcessGroupConfiguration',
+                'nf.ControllerServices',
+                'nf.RemoteProcessGroupConfiguration',
+                'nf.RemoteProcessGroupPorts',
+                'nf.PortConfiguration',
+                'nf.LabelConfiguration',
+                'nf.ProcessorDetails',
+                'nf.PortDetails',
+                'nf.ConnectionDetails',
+                'nf.RemoteProcessGroupDetails',
+                'nf.GoTo',
+                'nf.ng.Bridge',
+                'nf.ng.AppCtrl',
+                'nf.ng.AppConfig',
+                'nf.ng.ServiceProvider',
+                'nf.ng.BreadcrumbsCtrl',
+                'nf.ng.Canvas.HeaderCtrl',
+                'nf.ng.Canvas.FlowStatusCtrl',
+                'nf.ng.Canvas.GlobalMenuCtrl',
+                'nf.ng.Canvas.ToolboxCtrl',
+                'nf.ng.ProcessorComponent',
+                'nf.ng.InputPortComponent',
+                'nf.ng.OutputPortComponent',
+                'nf.ng.GroupComponent',
+                'nf.ng.RemoteProcessGroupComponent',
+                'nf.ng.FunnelComponent',
+                'nf.ng.TemplateComponent',
+                'nf.ng.LabelComponent',
+                'nf.ng.Canvas.GraphControlsCtrl',
+                'nf.ng.Canvas.NavigateCtrl',
+                'nf.ng.Canvas.OperateCtrl',
+                'nf.ng.BreadcrumbsDirective',
+                'nf.ng.DraggableDirective'],
+            function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) {
+                return factory($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective);
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = factory(require('jquery'),
+            require('angular'),
+            require('nf.Common'),
+            require('nf.CanvasUtils'),
+            require('nf.ErrorHandler'),
+            require('nf.Client'),
+            require('nf.ClusterSummary'),
+            require('nf.Dialog'),
+            require('f.Storage'),
+            require('nf.Canvas'),
+            require('nf.Graph'),
+            require('nf.ContextMenu'),
+            require('nf.Shell'),
+            require('nf.Settings'),
+            require('nf.Actions'),
+            require('nf.Snippet'),
+            require('nf.QueueListing'),
+            require('nf.ComponentState'),
+            require('nf.Draggable'),
+            require('nf.Connectable'),
+            require('nf.StatusHistory'),
+            require('nf.Birdseye'),
+            require('nf.ConnectionConfiguration'),
+            require('nf.ControllerService'),
+            require('nf.ReportingTask'),
+            require('nf.PolicyManagement'),
+            require('nf.ProcessorConfiguration'),
+            require('nf.ProcessGroupConfiguration'),
+            require('nf.ControllerServices'),
+            require('nf.RemoteProcessGroupConfiguration'),
+            require('nf.RemoteProcessGroupPorts'),
+            require('nf.PortConfiguration'),
+            require('nf.LabelConfiguration'),
+            require('nf.ProcessorDetails'),
+            require('nf.PortDetails'),
+            require('nf.ConnectionDetails'),
+            require('nf.RemoteProcessGroupDetails'),
+            require('nf.GoTo'),
+            require('nf.ng.Bridge'),
+            require('nf.ng.AppCtrl'),
+            require('nf.ng.AppConfig'),
+            require('nf.ng.ServiceProvider'),
+            require('nf.ng.BreadcrumbsCtrl'),
+            require('nf.ng.Canvas.HeaderCtrl'),
+            require('nf.ng.Canvas.FlowStatusCtrl'),
+            require('nf.ng.Canvas.GlobalMenuCtrl'),
+            require('nf.ng.Canvas.ToolboxCtrl'),
+            require('nf.ng.ProcessorComponent'),
+            require('nf.ng.InputPortComponent'),
+            require('nf.ng.OutputPortComponent'),
+            require('nf.ng.GroupComponent'),
+            require('nf.ng.RemoteProcessGroupComponent'),
+            require('nf.ng.FunnelComponent'),
+            require('nf.ng.TemplateComponent'),
+            require('nf.ng.LabelComponent'),
+            require('nf.ng.Canvas.GraphControlsCtrl'),
+            require('nf.ng.Canvas.NavigateCtrl'),
+            require('nf.ng.Canvas.OperateCtrl'),
+            require('nf.ng.BreadcrumbsDirective'),
+            require('nf.ng.DraggableDirective'));
+    } else {
+        factory(root.$,
+            root.angular,
+            root.nf.Common,
+            root.nf.CanvasUtils,
+            root.nf.ErrorHandler,
+            root.nf.Client,
+            root.nf.ClusterSummary,
+            root.nf.Dialog,
+            root.nf.Storage,
+            root.nf.Canvas,
+            root.nf.Graph,
+            root.nf.ContextMenu,
+            root.nf.Shell,
+            root.nf.Settings,
+            root.nf.Actions,
+            root.nf.Snippet,
+            root.nf.QueueListing,
+            root.nf.ComponentState,
+            root.nf.Draggable,
+            root.nf.Connectable,
+            root.nf.StatusHistory,
+            root.nf.Birdseye,
+            root.nf.ConnectionConfiguration,
+            root.nf.ControllerService,
+            root.nf.ReportingTask,
+            root.nf.PolicyManagement,
+            root.nf.ProcessorConfiguration,
+            root.nf.ProcessGroupConfiguration,
+            root.nf.ControllerServices,
+            root.nf.RemoteProcessGroupConfiguration,
+            root.nf.RemoteProcessGroupPorts,
+            root.nf.PortConfiguration,
+            root.nf.LabelConfiguration,
+            root.nf.ProcessorDetails,
+            root.nf.PortDetails,
+            root.nf.ConnectionDetails,
+            root.nf.RemoteProcessGroupDetails,
+            root.nf.GoTo,
+            root.nf.ng.Bridge,
+            root.nf.ng.AppCtrl,
+            root.nf.ng.AppConfig,
+            root.nf.ng.ServiceProvider,
+            root.nf.ng.BreadcrumbsCtrl,
+            root.nf.ng.Canvas.HeaderCtrl,
+            root.nf.ng.Canvas.FlowStatusCtrl,
+            root.nf.ng.Canvas.GlobalMenuCtrl,
+            root.nf.ng.Canvas.ToolboxCtrl,
+            root.nf.ng.ProcessorComponent,
+            root.nf.ng.InputPortComponent,
+            root.nf.ng.OutputPortComponent,
+            root.nf.ng.GroupComponent,
+            root.nf.ng.RemoteProcessGroupComponent,
+            root.nf.ng.FunnelComponent,
+            root.nf.ng.TemplateComponent,
+            root.nf.ng.LabelComponent,
+            root.nf.ng.Canvas.GraphControlsCtrl,
+            root.nf.ng.Canvas.NavigateCtrl,
+            root.nf.ng.Canvas.OperateCtrl,
+            root.nf.ng.BreadcrumbsDirective,
+            root.nf.ng.DraggableDirective);
+    }
+}(this, function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) {
+
+    var config = {
+        urls: {
+            flowConfig: '../nifi-api/flow/config'
+        }
+    };
+
+    /**
+     * Bootstrap the canvas application.
+     */
+    $(document).ready(function () {
+        if (nfCanvas.SUPPORTS_SVG) {
+
+            //Create Angular App
+            var app = angular.module('ngCanvasApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
+
+            //Define Dependency Injection Annotations
+            appConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
+            appCtrl.$inject = ['$scope', 'serviceProvider', '$compile', 'headerCtrl', 'graphControlsCtrl'];
+            serviceProvider.$inject = [];
+            breadcrumbsCtrl.$inject = ['serviceProvider'];
+            headerCtrl.$inject = ['serviceProvider', 'toolboxCtrl', 'globalMenuCtrl', 'flowStatusCtrl'];
+            flowStatusCtrl.$inject = ['serviceProvider'];
+            globalMenuCtrl.$inject = ['serviceProvider'];
+            toolboxCtrl.$inject = ['processorComponent',
+                'inputPortComponent',
+                'outputPortComponent',
+                'groupComponent',
+                'remoteGroupComponent',
+                'funnelComponent',
+                'templateComponent',
+                'labelComponent'];
+            processorComponent.$inject = ['serviceProvider'];
+            inputPortComponent.$inject = ['serviceProvider'];
+            outputPortComponent.$inject = ['serviceProvider'];
+            processGroupComponent.$inject = ['serviceProvider'];
+            remoteProcessGroupComponent.$inject = ['serviceProvider'];
+            funnelComponent.$inject = ['serviceProvider'];
+            templateComponent.$inject = ['serviceProvider'];
+            labelComponent.$inject = ['serviceProvider'];
+            graphControlsCtrl.$inject = ['serviceProvider', 'navigateCtrl', 'operateCtrl'];
+            navigateCtrl.$inject = [];
+            operateCtrl.$inject = [];
+            breadcrumbsDirective.$inject = ['breadcrumbsCtrl'];
+            draggableDirective.$inject = [];
+
+            //Configure Angular App
+            app.config(appConfig);
+
+            //Define Angular App Controllers
+            app.controller('ngCanvasAppCtrl', appCtrl);
+
+            //Define Angular App Services
+            app.service('serviceProvider', serviceProvider);
+            app.service('breadcrumbsCtrl', breadcrumbsCtrl);
+            app.service('headerCtrl', headerCtrl);
+            app.service('flowStatusCtrl', flowStatusCtrl);
+            app.service('globalMenuCtrl', globalMenuCtrl);
+            app.service('toolboxCtrl', toolboxCtrl);
+            app.service('processorComponent', processorComponent);
+            app.service('inputPortComponent', inputPortComponent);
+            app.service('outputPortComponent', outputPortComponent);
+            app.service('groupComponent', processGroupComponent);
+            app.service('remoteGroupComponent', remoteProcessGroupComponent);
+            app.service('funnelComponent', funnelComponent);
+            app.service('templateComponent', templateComponent);
+            app.service('labelComponent', labelComponent);
+            app.service('graphControlsCtrl', graphControlsCtrl);
+            app.service('navigateCtrl', navigateCtrl);
+            app.service('operateCtrl', operateCtrl);
+
+            //Define Angular App Directives
+            app.directive('nfBreadcrumbs', breadcrumbsDirective);
+            app.directive('nfDraggable', draggableDirective);
+
+            // initialize the canvas utils and invert control of the canvas,
+            // actions, snippet, birdseye, and graph
+            nfCanvasUtils.init(nfCanvas, nfActions, nfSnippet, nfBirdseye, nfGraph);
+
+            //Manually Boostrap Angular App
+            nfNgBridge.injector = angular.bootstrap($('body'), ['ngCanvasApp'], {strictDi: true});
+
+            // initialize the NiFi
+            var userXhr = nfCanvas.init();
+
+            userXhr.done(function () {
+                // load the client id
+                var clientXhr = nfClient.init();
+
+                // get the controller config to register the status poller
+                var configXhr = $.ajax({
+                    type: 'GET',
+                    url: config.urls.flowConfig,
+                    dataType: 'json'
+                });
+
+                // ensure the config requests are loaded
+                $.when(configXhr, nfClusterSummary.loadClusterSummary(), userXhr, clientXhr).done(function (configResult) {
+                    var configResponse = configResult[0];
+
+                    // calculate the canvas offset
+                    var canvasContainer = $('#canvas-container');
+                    nfCanvas.CANVAS_OFFSET = canvasContainer.offset().top;
+
+                    // get the config details
+                    var configDetails = configResponse.flowConfiguration;
+
+                    // show disconnected message on load if necessary
+                    if (nfClusterSummary.isClustered() && !nfClusterSummary.isConnectedToCluster()) {
+                        nfDialog.showDisconnectedFromClusterMessage();
+                    }
+
+                    // get the auto refresh interval
+                    var autoRefreshIntervalSeconds = parseInt(configDetails.autoRefreshIntervalSeconds, 10);
+
+                    // record whether we can configure the authorizer
+                    nfCanvas.setConfigurableAuthorizer(configDetails.supportsConfigurableAuthorizer);
+
+                    // init nfStorage
+                    nfStorage.init();
+
+                    // initialize the application
+                    nfCanvas.initCanvas();
+                    nfCanvas.View.init();
+                    // initialize the context menu and invert control of the actions
+                    nfContextMenu.init(nfActions);
+                    // initialize the shell and invert control of the context menu
+                    nfShell.init(nfContextMenu);
+                    nfNgBridge.injector.get('headerCtrl').init();
+                    nfSettings.init();
+                    nfActions.init();
+                    nfQueueListing.init();
+                    nfComponentState.init();
+
+                    // initialize the component behaviors
+                    nfDraggable.init();
+                    nfConnectable.init();
+
+                    // initialize the chart
+                    nfStatusHistory.init(configDetails.timeOffset);
+
+                    // initialize the birdseye
+                    nfBirdseye.init(nfGraph);
+
+                    // initialize the connection config and invert control of the birdseye and graph
+                    nfConnectionConfiguration.init(nfBirdseye, nfGraph);
+                    nfControllerService.init();
+                    nfReportingTask.init(nfSettings);
+                    nfPolicyManagement.init();
+                    nfProcessorConfiguration.init();
+                    // initialize the PG config and invert control of the controllerServices
+                    nfProcessGroupConfiguration.init(nfControllerServices);
+                    nfRemoteProcessGroupConfiguration.init();
+                    nfRemoteProcessGroupPorts.init();
+                    nfPortConfiguration.init();
+                    nfLabelConfiguration.init();
+                    nfProcessorDetails.init(true);
+                    nfPortDetails.init();
+                    nfConnectionDetails.init();
+                    nfRemoteProcessGroupDetails.init();
+                    nfGoto.init();
+                    nfGraph.init().done(function () {
+                        nfNgBridge.injector.get('graphControlsCtrl').init();
+
+                        // determine the split between the polling
+                        var pollingSplit = autoRefreshIntervalSeconds / 2;
+
+                        // register the polling
+                        setTimeout(function () {
+                            nfCanvas.startPolling(autoRefreshIntervalSeconds);
+                        }, pollingSplit * 1000);
+
+                        // hide the splash screen
+                        nfCanvas.hideSplash();
+                    }).fail(nfErrorHandler.handleAjaxError);
+                }).fail(nfErrorHandler.handleAjaxError);
+            }).fail(nfErrorHandler.handleAjaxError);
+
+            //initialize toolbox components tooltips
+            $('.component-button').qtip($.extend({}, nfCommon.config.tooltipConfig));
+        } else {
+            $('#message-title').text('Unsupported Browser');
+            $('#message-content').text('Flow graphs are shown using SVG. Please use a browser that supports rendering SVG.');
+
+            // show the error pane
+            $('#message-pane').show();
+
+            // hide the splash screen
+            nfCanvas.hideSplash();
+        }
+    });
+}));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-error-handler.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-error-handler.js
new file mode 100644
index 000000000000..05519a320a95
--- /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,72 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['nf.ErrorHandler',
+                'nf.Common',
+                'nf.Canvas',
+                'nf.ContextMenu'],
+            function (ajaxErrorHandler, nfCommon, nfCanvas, nfContextMenu) {
+                return (nf.ErrorHandler = factory(ajaxErrorHandler, nfCommon, nfCanvas, nfContextMenu));
+            });
+    } 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, nfCommon, nfCanvas, nfContextMenu) {
+    '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);
+            nfCommon.showLogoutLink();
+
+            // hide the splash screen if required
+            if ($('#splash').is(':visible')) {
+                nfCanvas.hideSplash();
+            }
+
+            // hide the context menu
+            nfContextMenu.hide();
+
+            // shut off the auto refresh
+            nfCanvas.stopPolling();
+
+            // allow page refresh with ctrl-r
+            nfCanvas.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-utils.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
new file mode 100644
index 000000000000..055157fd770c
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
@@ -0,0 +1,1685 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['d3',
+                'jquery',
+                'nf.Common',
+                'nf.ErrorHandler',
+                'nf.Dialog',
+                'nf.Clipboard',
+                'nf.Storage'],
+            function (d3, $, nfCommon, nfErrorHandler, nfDialog, nfClipboard, nfStorage) {
+                return (nf.CanvasUtils = factory(d3, $, nfCommon, nfErrorHandler, nfDialog, nfClipboard, nfStorage));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.CanvasUtils = factory(
+            require('d3'),
+            require('jquery'),
+            require('nf.Common'),
+            require('nf.ErrorHandler'),
+            require('nf.Dialog'),
+            require('nf.Clipboard'),
+            require('nf.Storage')));
+    } else {
+        nf.CanvasUtils = factory(
+            root.d3,
+            root.$,
+            root.nf.Common,
+            root.nf.ErrorHandler,
+            root.nf.Dialog,
+            root.nf.Clipboard,
+            root.nf.Storage);
+    }
+}(this, function (d3, $, nfCommon, nfErrorHandler, nfDialog, nfClipboard, nfStorage) {
+    'use strict';
+
+    var nfCanvas;
+    var nfActions;
+    var nfSnippet;
+    var nfBirdseye;
+    var nfGraph;
+
+    var config = {
+        storage: {
+            namePrefix: 'nifi-view-'
+        },
+        urls: {
+            controller: '../nifi-api/controller'
+        }
+    };
+
+    var TWO_PI = 2 * Math.PI;
+
+    var binarySearch = function (length, comparator) {
+        var low = 0;
+        var high = length - 1;
+        var mid;
+
+        var result = 0;
+        while (low <= high) {
+            mid = ~~((low + high) / 2);
+            result = comparator(mid);
+            if (result < 0) {
+                high = mid - 1;
+            } else if (result > 0) {
+                low = mid + 1;
+            } else {
+                break;
+            }
+        }
+
+        return mid;
+    };
+
+    var moveComponents = function (components, groupId) {
+        return $.Deferred(function (deferred) {
+            var parentGroupId = nfCanvasUtils.getGroupId();
+
+            // create a snippet for the specified components
+            var snippet = nfSnippet.marshal(components, parentGroupId);
+            nfSnippet.create(snippet).done(function (response) {
+                // move the snippet into the target
+                nfSnippet.move(response.snippet.id, groupId).done(function () {
+                    var componentMap = d3.map();
+
+                    // add the id to the type's array
+                    var addComponent = function (type, id) {
+                        if (!componentMap.has(type)) {
+                            componentMap.set(type, []);
+                        }
+                        componentMap.get(type).push(id);
+                    };
+
+                    // go through each component being removed
+                    components.each(function (d) {
+                        addComponent(d.type, d.id);
+                    });
+
+                    // refresh all component types as necessary (handle components that have been removed)
+                    componentMap.forEach(function (type, ids) {
+                        nfCanvasUtils.getComponentByType(type).remove(ids);
+                    });
+
+                    // refresh the birdseye
+                    nfBirdseye.refresh();
+
+                    deferred.resolve();
+                }).fail(nfErrorHandler.handleAjaxError).fail(function () {
+                    deferred.reject();
+                });
+            }).fail(nfErrorHandler.handleAjaxError).fail(function () {
+                deferred.reject();
+            });
+        }).promise();
+    };
+
+    var nfCanvasUtils = {
+
+        /**
+         * Initialize the canvas utils.
+         *
+         * @param nfCanvasRef   The nfCanvas module.
+         * @param nfActionsRef   The nfActions module.
+         * @param nfSnippetRef   The nfSnippet module.
+         * @param nfBirdseyeRef   The nfBirdseye module.
+         * @param nfGraphRef   The nfGraph module.
+         */
+        init: function(nfCanvasRef, nfActionsRef, nfSnippetRef, nfBirdseyeRef, nfGraphRef){
+            nfCanvas = nfCanvasRef;
+            nfActions = nfActionsRef;
+            nfSnippet = nfSnippetRef;
+            nfBirdseye = nfBirdseyeRef;
+            nfGraph = nfGraphRef;
+        },
+
+        config: {
+            systemTooltipConfig: {
+                style: {
+                    classes: 'nifi-tooltip'
+                },
+                show: {
+                    solo: true,
+                    effect: false
+                },
+                hide: {
+                    effect: false
+                },
+                position: {
+                    at: 'bottom right',
+                    my: 'top left'
+                }
+            }
+        },
+
+        /**
+         * Gets a graph component `type`.
+         *
+         * @param type  The type of component.
+         */
+        getComponentByType: function (type) {
+            return nfGraph.getComponentByType(type);
+        },
+
+        /**
+         * Calculates the point on the specified bounding box that is closest to the
+         * specified point.
+         *
+         * @param {object} p            The point
+         * @param {object} bBox         The bounding box
+         */
+        getPerimeterPoint: function (p, bBox) {
+            // calculate theta
+            var theta = Math.atan2(bBox.height, bBox.width);
+
+            // get the rectangle radius
+            var xRadius = bBox.width / 2;
+            var yRadius = bBox.height / 2;
+
+            // get the center point
+            var cx = bBox.x + xRadius;
+            var cy = bBox.y + yRadius;
+
+            // calculate alpha
+            var dx = p.x - cx;
+            var dy = p.y - cy;
+            var alpha = Math.atan2(dy, dx);
+
+            // normalize aphla into 0 <= alpha < 2 PI
+            alpha = alpha % TWO_PI;
+            if (alpha < 0) {
+                alpha += TWO_PI;
+            }
+
+            // calculate beta
+            var beta = (Math.PI / 2) - alpha;
+
+            // detect the appropriate quadrant and return the point on the perimeter
+            if ((alpha >= 0 && alpha < theta) || (alpha >= (TWO_PI - theta) && alpha < TWO_PI)) {
+                // right quadrant
+                return {
+                    'x': bBox.x + bBox.width,
+                    'y': cy + Math.tan(alpha) * xRadius
+                };
+            } else if (alpha >= theta && alpha < (Math.PI - theta)) {
+                // bottom quadrant
+                return {
+                    'x': cx + Math.tan(beta) * yRadius,
+                    'y': bBox.y + bBox.height
+                };
+            } else if (alpha >= (Math.PI - theta) && alpha < (Math.PI + theta)) {
+                // left quadrant
+                return {
+                    'x': bBox.x,
+                    'y': cy - Math.tan(alpha) * xRadius
+                };
+            } else {
+                // top quadrant
+                return {
+                    'x': cx - Math.tan(beta) * yRadius,
+                    'y': bBox.y
+                };
+            }
+        },
+
+        /**
+         * Shows the specified component in the specified group.
+         *
+         * @argument {string} groupId       The id of the group
+         * @argument {string} componentId   The id of the component
+         */
+        showComponent: function (groupId, componentId) {
+            // ensure the group id is specified
+            if (nfCommon.isDefinedAndNotNull(groupId)) {
+                // initiate a graph refresh
+                var refreshGraph = $.Deferred(function (deferred) {
+                    // load a different group if necessary
+                    if (groupId !== nfCanvas.getGroupId()) {
+                        // set the new group id
+                        nfCanvas.setGroupId(groupId);
+
+                        // reload
+                        nfCanvas.reload().done(function () {
+                            deferred.resolve();
+                        }).fail(function () {
+                            nfDialog.showOkDialog({
+                                headerText: 'Process Group',
+                                dialogContent: 'Unable to load the group for the specified component.'
+                            });
+                            deferred.reject();
+                        });
+                    } else {
+                        deferred.resolve();
+                    }
+                }).promise();
+
+                // when the refresh has completed, select the match
+                refreshGraph.done(function () {
+                    // attempt to locate the corresponding component
+                    var component = d3.select('#id-' + componentId);
+                    if (!component.empty()) {
+                        nfActions.show(component);
+                    } else {
+                        nfDialog.showOkDialog({
+                            headerText: 'Process Group',
+                            dialogContent: 'Unable to find the specified component.'
+                        });
+                    }
+                });
+            }
+        },
+
+        /**
+         * Gets the currently selected components and connections.
+         *
+         * @returns {selection}     The currently selected components and connections
+         */
+        getSelection: function () {
+            return d3.selectAll('g.component.selected, g.connection.selected');
+        },
+
+        /**
+         * Centers the specified bounding box.
+         *
+         * @param {type} boundingBox
+         */
+        centerBoundingBox: function (boundingBox) {
+            var scale = nfCanvas.View.scale();
+
+            // get the canvas normalized width and height
+            var canvasContainer = $('#canvas-container');
+            var screenWidth = canvasContainer.width() / scale;
+            var screenHeight = canvasContainer.height() / scale;
+
+            // determine the center location for this component in canvas space
+            var center = [(screenWidth / 2) - (boundingBox.width / 2), (screenHeight / 2) - (boundingBox.height / 2)];
+
+            // calculate the difference between the center point and the position of this component and convert to screen space
+            nfCanvas.View.translate([(center[0] - boundingBox.x) * scale, (center[1] - boundingBox.y) * scale]);
+        },
+
+        /**
+         * Enables/disables the editable behavior for the specified selection based on their access policies.
+         *
+         * @param selection     selection
+         * @param nfConnectableRef   The nfConnectable module.
+         * @param nfDraggableRef   The nfDraggable module.
+         */
+        editable: function (selection, nfConnectableRef, nfDraggableRef) {
+            if (nfCanvasUtils.canModify(selection)) {
+                if (!selection.classed('connectable')) {
+                    selection.call(nfConnectableRef.activate);
+                }
+                if (!selection.classed('moveable')) {
+                    selection.call(nfDraggableRef.activate);
+                }
+            } else {
+                if (selection.classed('connectable')) {
+                    selection.call(nfConnectableRef.deactivate);
+                }
+                if (selection.classed('moveable')) {
+                    selection.call(nfDraggableRef.deactivate);
+                }
+            }
+        },
+
+        /**
+         * Conditionally apply the transition.
+         *
+         * @param selection     selection
+         * @param transition    transition
+         */
+        transition: function (selection, transition) {
+            if (transition && !selection.empty()) {
+                return selection.transition().duration(400);
+            } else {
+                return selection;
+            }
+        },
+
+        /**
+         * Position the component accordingly.
+         *
+         * @param {selection} updated
+         */
+        position: function (updated, transition) {
+            if (updated.empty()) {
+                return;
+            }
+
+            return nfCanvasUtils.transition(updated, transition)
+                .attr('transform', function (d) {
+                    return 'translate(' + d.position.x + ', ' + d.position.y + ')';
+                });
+        },
+
+        /**
+         * Applies single line ellipsis to the component in the specified selection if necessary.
+         *
+         * @param {selection} selection
+         * @param {string} text
+         */
+        ellipsis: function (selection, text) {
+            var width = parseInt(selection.attr('width'), 10);
+            var node = selection.node();
+
+            // set the element text
+            selection.text(text);
+
+            // see if the field is too big for the field
+            if (text.length > 0 && node.getSubStringLength(0, text.length - 1) > width) {
+                // make some room for the ellipsis
+                width -= 5;
+
+                // determine the appropriate index
+                var i = binarySearch(text.length, function (x) {
+                    var length = node.getSubStringLength(0, x);
+                    if (length > width) {
+                        // length is too long, try the lower half
+                        return -1;
+                    } else if (length < width) {
+                        // length is too short, try the upper half
+                        return 1;
+                    }
+                    return 0;
+                });
+
+                // trim at the appropriate length and add ellipsis
+                selection.text(text.substring(0, i) + String.fromCharCode(8230));
+            }
+        },
+
+        /**
+         * Applies multiline ellipsis to the component in the specified seleciton. Text will
+         * wrap for the specified number of lines. The last line will be ellipsis if necessary.
+         *
+         * @param {selection} selection
+         * @param {integer} lineCount
+         * @param {string} text
+         */
+        multilineEllipsis: function (selection, lineCount, text) {
+            var i = 1;
+            var words = text.split(/\s+/).reverse();
+
+            // get the appropriate position
+            var x = parseInt(selection.attr('x'), 10);
+            var y = parseInt(selection.attr('y'), 10);
+            var width = parseInt(selection.attr('width'), 10);
+
+            var line = [];
+            var tspan = selection.append('tspan')
+                .attr({
+                    'x': x,
+                    'y': y,
+                    'width': width
+                });
+
+            // go through each word
+            var word = words.pop();
+            while (nfCommon.isDefinedAndNotNull(word)) {
+                // add the current word
+                line.push(word);
+
+                // update the label text
+                tspan.text(line.join(' '));
+
+                // if this word caused us to go too far
+                if (tspan.node().getComputedTextLength() > width) {
+                    // remove the current word
+                    line.pop();
+
+                    // update the label text
+                    tspan.text(line.join(' '));
+
+                    // create the tspan for the next line
+                    tspan = selection.append('tspan')
+                        .attr({
+                            'x': x,
+                            'dy': '1.2em',
+                            'width': width
+                        });
+
+                    // if we've reached the last line, use single line ellipsis
+                    if (++i >= lineCount) {
+                        // get the remainder using the current word and
+                        // reversing whats left
+                        var remainder = [word].concat(words.reverse());
+
+                        // apply ellipsis to the last line
+                        nfCanvasUtils.ellipsis(tspan, remainder.join(' '));
+
+                        // we've reached the line count
+                        break;
+                    } else {
+                        tspan.text(word);
+
+                        // prep the line for the next iteration
+                        line = [word];
+                    }
+                }
+
+                // get the next word
+                word = words.pop();
+            }
+        },
+
+        /**
+         * Updates the active thread count on the specified selection.
+         *
+         * @param {selection} selection         The selection
+         * @param {object} d                    The data
+         * @param {function} setOffset          Optional function to handle the width of the active thread count component
+         * @return
+         */
+        activeThreadCount: function (selection, d, setOffset) {
+            // if there is active threads show the count, otherwise hide
+            if (d.status.aggregateSnapshot.activeThreadCount > 0) {
+                // update the active thread count
+                var activeThreadCount = selection.select('text.active-thread-count')
+                    .text(function () {
+                        return d.status.aggregateSnapshot.activeThreadCount;
+                    })
+                    .style('display', 'block')
+                    .each(function () {
+                        var bBox = this.getBBox();
+                        d3.select(this).attr('x', function () {
+                            return d.dimensions.width - bBox.width - 15;
+                        });
+                    });
+
+                // update the background width
+                selection.select('text.active-thread-count-icon')
+                    .attr('x', function () {
+                        var bBox = activeThreadCount.node().getBBox();
+
+                        // update the offset
+                        if (typeof setOffset === 'function') {
+                            setOffset(bBox.width + 6);
+                        }
+
+                        return d.dimensions.width - bBox.width - 20;
+                    })
+                    .style('display', 'block');
+            } else {
+                selection.selectAll('text.active-thread-count, text.active-thread-count-icon').style('display', 'none');
+            }
+        },
+
+        /**
+         * Disables the default browser behavior of following image href when control clicking.
+         *
+         * @param {selection} selection                 The image
+         */
+        disableImageHref: function (selection) {
+            selection.on('click.disableImageHref', function () {
+                if (d3.event.ctrlKey || d3.event.shiftKey) {
+                    d3.event.preventDefault();
+                }
+            });
+        },
+
+        /**
+         * Handles component bulletins.
+         *
+         * @param {selection} selection                    The component
+         * @param {object} d                                The data
+         * @param {function} getTooltipContainer            Function to get the tooltip container
+         * @param {function} offset                         Optional offset
+         */
+        bulletins: function (selection, d, getTooltipContainer, offset) {
+            offset = nfCommon.isDefinedAndNotNull(offset) ? offset : 0;
+
+            // get the tip
+            var tip = d3.select('#bulletin-tip-' + d.id);
+
+            var hasBulletins = false;
+            if (!nfCommon.isEmpty(d.bulletins)) {
+                // format the bulletins
+                var bulletins = nfCommon.getFormattedBulletins(d.bulletins);
+                hasBulletins = bulletins.length > 0;
+
+                if (hasBulletins) {
+                    // create the unordered list based off the formatted bulletins
+                    var list = nfCommon.formatUnorderedList(bulletins);
+                }
+            }
+
+            // if there are bulletins show them, otherwise hide
+            if (hasBulletins) {
+                // update the tooltip
+                selection.select('text.bulletin-icon')
+                    .each(function () {
+                        // create the tip if necessary
+                        if (tip.empty()) {
+                            tip = getTooltipContainer().append('div')
+                                .attr('id', function () {
+                                    return 'bulletin-tip-' + d.id;
+                                })
+                                .attr('class', 'tooltip nifi-tooltip');
+                        }
+
+                        // add the tooltip
+                        tip.html(function () {
+                            return $('<div></div>').append(list).html();
+                        });
+
+                        nfCanvasUtils.canvasTooltip(tip, d3.select(this));
+                    });
+
+                // update the tooltip background
+                selection.select('text.bulletin-icon').style("visibility", "visible");
+                selection.select('rect.bulletin-background').style("visibility", "visible");
+            } else {
+                // clean up if necessary
+                if (!tip.empty()) {
+                    tip.remove();
+                }
+
+                // update the tooltip background
+                selection.select('text.bulletin-icon').style("visibility", "hidden");
+                selection.select('rect.bulletin-background').style("visibility", "hidden");
+            }
+        },
+
+        /**
+         * Adds the specified tooltip to the specified target.
+         *
+         * @param {selection} tip           The tooltip
+         * @param {selection} target        The target of the tooltip
+         */
+        canvasTooltip: function (tip, target) {
+            target.on('mouseenter', function () {
+                tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px').style('display', 'block');
+            })
+                .on('mousemove', function () {
+                    tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px');
+                })
+                .on('mouseleave', function () {
+                    tip.style('display', 'none');
+                });
+        },
+
+        /**
+         * Determines if the specified selection is alignable (in a single action).
+         *
+         * @param {selection} selection     The selection
+         * @returns {boolean}
+         */
+        canAlign: function(selection) {
+            var canAlign = true;
+
+            // determine if the current selection is entirely connections
+            var selectedConnections = selection.filter(function(d) {
+                var connection = d3.select(this);
+                return nfCanvasUtils.isConnection(connection);
+            });
+
+            // require multiple selections besides connections
+            if (selection.size() - selectedConnections.size() < 2) {
+                canAlign = false;
+            }
+
+            // require write permissions
+            if (nfCanvasUtils.canModify(selection) === false) {
+                canAlign = false;
+            }
+
+            return canAlign;
+        },
+
+        /**
+         * Determines if the specified selection is colorable (in a single action).
+         *
+         * @param {selection} selection     The selection
+         * @returns {boolean}
+         */
+        isColorable: function(selection) {
+            if (selection.empty()) {
+                return false;
+            }
+
+            // require read and write permissions
+            if (nfCanvasUtils.canRead(selection) === false || nfCanvasUtils.canModify(selection) === false) {
+                return false;
+            }
+
+            // determine if the current selection is entirely processors or labels
+            var selectedProcessors = selection.filter(function(d) {
+                var processor = d3.select(this);
+                return nfCanvasUtils.isProcessor(processor) && nfCanvasUtils.canModify(processor);
+            });
+            var selectedLabels = selection.filter(function(d) {
+                var label = d3.select(this);
+                return nfCanvasUtils.isLabel(label) && nfCanvasUtils.canModify(label);
+            });
+
+            var allProcessors = selectedProcessors.size() === selection.size();
+            var allLabels = selectedLabels.size() === selection.size();
+
+            return allProcessors || allLabels;
+        },
+
+        /**
+         * Determines if the specified selection is a connection.
+         *
+         * @argument {selection} selection      The selection
+         */
+        isConnection: function (selection) {
+            return selection.classed('connection');
+        },
+
+        /**
+         * Determines if the specified selection is a remote process group.
+         *
+         * @argument {selection} selection      The selection
+         */
+        isRemoteProcessGroup: function (selection) {
+            return selection.classed('remote-process-group');
+        },
+
+        /**
+         * Determines if the specified selection is a processor.
+         *
+         * @argument {selection} selection      The selection
+         */
+        isProcessor: function (selection) {
+            return selection.classed('processor');
+        },
+
+        /**
+         * Determines if the specified selection is a label.
+         *
+         * @argument {selection} selection      The selection
+         */
+        isLabel: function (selection) {
+            return selection.classed('label');
+        },
+
+        /**
+         * Determines if the specified selection is an input port.
+         *
+         * @argument {selection} selection      The selection
+         */
+        isInputPort: function (selection) {
+            return selection.classed('input-port');
+        },
+
+        /**
+         * Determines if the specified selection is an output port.
+         *
+         * @argument {selection} selection      The selection
+         */
+        isOutputPort: function (selection) {
+            return selection.classed('output-port');
+        },
+
+        /**
+         * Determines if the specified selection is a process group.
+         *
+         * @argument {selection} selection      The selection
+         */
+        isProcessGroup: function (selection) {
+            return selection.classed('process-group');
+        },
+
+        /**
+         * Determines if the specified selection is a funnel.
+         *
+         * @argument {selection} selection      The selection
+         */
+        isFunnel: function (selection) {
+            return selection.classed('funnel');
+        },
+
+        /**
+         * Determines if the components in the specified selection are runnable.
+         *
+         * @argument {selection} selection      The selection
+         * @return {boolean}                    Whether the selection is runnable
+         */
+        areRunnable: function (selection) {
+            if (selection.empty()) {
+                return true;
+            }
+
+            var runnable = true;
+            selection.each(function () {
+                if (!nfCanvasUtils.isRunnable(d3.select(this))) {
+                    runnable = false;
+                    return false;
+                }
+            });
+
+            return runnable;
+        },
+
+        /**
+         * Determines if the component in the specified selection is runnable.
+         *
+         * @argument {selection} selection      The selection
+         * @return {boolean}                    Whether the selection is runnable
+         */
+        isRunnable: function (selection) {
+            if (selection.size() !== 1) {
+                return false;
+            }
+
+            if (nfCanvasUtils.isProcessGroup(selection)) {
+                return true;
+            }
+
+            if (nfCanvasUtils.canModify(selection) === false) {
+                return false;
+            }
+
+            var runnable = false;
+            var selectionData = selection.datum();
+            if (nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
+                runnable = nfCanvasUtils.supportsModification(selection) && selectionData.status.aggregateSnapshot.runStatus === 'Stopped';
+            }
+
+            return runnable;
+        },
+
+        /**
+         * Determines if the components in the specified selection are stoppable.
+         *
+         * @argument {selection} selection      The selection
+         * @return {boolean}                    Whether the selection is stoppable
+         */
+        areStoppable: function (selection) {
+            if (selection.empty()) {
+                return true;
+            }
+
+            var stoppable = true;
+            selection.each(function () {
+                if (!nfCanvasUtils.isStoppable(d3.select(this))) {
+                    stoppable = false;
+                    return false;
+                }
+            });
+
+            return stoppable;
+        },
+
+        /**
+         * Determines if the component in the specified selection is runnable.
+         *
+         * @argument {selection} selection      The selection
+         * @return {boolean}                    Whether the selection is runnable
+         */
+        isStoppable: function (selection) {
+            if (selection.size() !== 1) {
+                return false;
+            }
+
+            if (nfCanvasUtils.isProcessGroup(selection)) {
+                return true;
+            }
+
+            if (nfCanvasUtils.canModify(selection) === false) {
+                return false;
+            }
+
+            var stoppable = false;
+            var selectionData = selection.datum();
+            if (nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
+                stoppable = selectionData.status.aggregateSnapshot.runStatus === 'Running';
+            }
+
+            return stoppable;
+        },
+
+        /**
+         * Filters the specified selection for any components that supports enable.
+         *
+         * @argument {selection} selection      The selection
+         */
+        filterEnable: function (selection) {
+            return selection.filter(function (d) {
+                var selected = d3.select(this);
+                var selectedData = selected.datum();
+
+                // ensure its a processor, input port, or output port and supports modification and is disabled (can enable)
+                return ((nfCanvasUtils.isProcessor(selected) || nfCanvasUtils.isInputPort(selected) || nfCanvasUtils.isOutputPort(selected)) &&
+                nfCanvasUtils.supportsModification(selected) &&
+                selectedData.status.aggregateSnapshot.runStatus === 'Disabled');
+            });
+        },
+
+        /**
+         * Determines if the specified selection contains any components that supports enable.
+         *
+         * @argument {selection} selection      The selection
+         */
+        canEnable: function (selection) {
+            if (selection.empty()) {
+                return false;
+            }
+
+            if (nfCanvasUtils.canModify(selection) === false) {
+                return false;
+            }
+
+            return nfCanvasUtils.filterEnable(selection).size() === selection.size();
+        },
+
+        /**
+         * Filters the specified selection for any components that supports disable.
+         *
+         * @argument {selection} selection      The selection
+         */
+        filterDisable: function (selection) {
+            return selection.filter(function (d) {
+                var selected = d3.select(this);
+                var selectedData = selected.datum();
+
+                // ensure its a processor, input port, or output port and supports modification and is stopped (can disable)
+                return ((nfCanvasUtils.isProcessor(selected) || nfCanvasUtils.isInputPort(selected) || nfCanvasUtils.isOutputPort(selected)) &&
+                nfCanvasUtils.supportsModification(selected) &&
+                (selectedData.status.aggregateSnapshot.runStatus === 'Stopped' ||
+                selectedData.status.aggregateSnapshot.runStatus === 'Invalid'));
+            });
+        },
+
+        /**
+         * Determines if the specified selection contains any components that supports disable.
+         *
+         * @argument {selection} selection      The selection
+         */
+        canDisable: function (selection) {
+            if (selection.empty()) {
+                return false;
+            }
+
+            if (nfCanvasUtils.canModify(selection) === false) {
+                return false;
+            }
+
+            return nfCanvasUtils.filterDisable(selection).size() === selection.size();
+        },
+
+
+        /**
+         * Determines if the specified selection can all start transmitting.
+         *
+         * @argument {selection} selection      The selection
+         * @return {boolean}                    Whether the selection can start transmitting
+         */
+        canAllStartTransmitting: function (selection) {
+            if (selection.empty()) {
+                return false;
+            }
+
+            var canStartTransmitting = true;
+            selection.each(function () {
+                if (!nfCanvasUtils.canStartTransmitting(d3.select(this))) {
+                    canStartTransmitting = false;
+                }
+            });
+            return canStartTransmitting;
+        },
+
+        /**
+         * Determines if the specified selection supports starting transmission.
+         *
+         * @argument {selection} selection      The selection
+         */
+        canStartTransmitting: function (selection) {
+            if (selection.size() !== 1) {
+                return false;
+            }
+
+            if (nfCanvasUtils.canModify(selection) === false || nfCanvasUtils.canRead(selection) === false) {
+                return false;
+            }
+
+            return nfCanvasUtils.isRemoteProcessGroup(selection);
+        },
+
+        /**
+         * Determines if the specified selection can all stop transmitting.
+         *
+         * @argument {selection} selection      The selection
+         * @return {boolean}                    Whether the selection can stop transmitting
+         */
+        canAllStopTransmitting: function (selection) {
+            if (selection.empty()) {
+                return false;
+            }
+
+            var canStopTransmitting = true;
+            selection.each(function () {
+                if (!nfCanvasUtils.canStopTransmitting(d3.select(this))) {
+                    canStopTransmitting = false;
+                }
+            });
+            return canStopTransmitting;
+        },
+
+        /**
+         * Determines if the specified selection can stop transmission.
+         *
+         * @argument {selection} selection      The selection
+         */
+        canStopTransmitting: function (selection) {
+            if (selection.size() !== 1) {
+                return false;
+            }
+
+            if (nfCanvasUtils.canModify(selection) === false || nfCanvasUtils.canRead(selection) === false) {
+                return false;
+            }
+
+            return nfCanvasUtils.isRemoteProcessGroup(selection);
+        },
+
+        /**
+         * Determines whether the components in the specified selection are deletable.
+         *
+         * @argument {selection} selection      The selection
+         * @return {boolean}            Whether the selection is deletable
+         */
+        areDeletable: function (selection) {
+            if (selection.empty()) {
+                return false;
+            }
+
+            var isDeletable = true;
+            selection.each(function () {
+                if (!nfCanvasUtils.isDeletable(d3.select(this))) {
+                    isDeletable = false;
+                }
+            });
+            return isDeletable;
+        },
+
+        /**
+         * Determines whether the component in the specified selection is deletable.
+         *
+         * @argument {selection} selection      The selection
+         * @return {boolean}            Whether the selection is deletable
+         */
+        isDeletable: function (selection) {
+            if (selection.size() !== 1) {
+                return false;
+            }
+
+            // ensure the user has write permissions to the current process group
+            if (nfCanvas.canWrite() === false) {
+                return false;
+            }
+
+            if (nfCanvasUtils.canModify(selection) === false) {
+                return false;
+            }
+
+            return nfCanvasUtils.supportsModification(selection);
+        },
+
+        /**
+         * Determines whether the specified selection is configurable.
+         *
+         * @param selection
+         */
+        isConfigurable: function (selection) {
+            // ensure the correct number of components are selected
+            if (selection.size() !== 1) {
+                if (selection.empty()) {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
+
+            if (nfCanvasUtils.isProcessGroup(selection)) {
+                return true;
+            }
+            if (nfCanvasUtils.canRead(selection) === false || nfCanvasUtils.canModify(selection) === false) {
+                return false;
+            }
+            if (nfCanvasUtils.isFunnel(selection)) {
+                return false;
+            }
+
+            return nfCanvasUtils.supportsModification(selection);
+        },
+
+        /**
+         * Determines whether the specified selection has details.
+         *
+         * @param selection
+         */
+        hasDetails: function (selection) {
+            // ensure the correct number of components are selected
+            if (selection.size() !== 1) {
+                return false;
+            }
+
+            if (nfCanvasUtils.canRead(selection) === false) {
+                return false;
+            }
+            if (nfCanvasUtils.canModify(selection)) {
+                if (nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection) || nfCanvasUtils.isRemoteProcessGroup(selection) || nfCanvasUtils.isConnection(selection)) {
+                    return !nfCanvasUtils.isConfigurable(selection);
+                }
+            } else {
+                return nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isConnection(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection) || nfCanvasUtils.isRemoteProcessGroup(selection);
+            }
+
+            return false;
+        },
+
+        /**
+         * Determines whether the user can configure or open the policy management page.
+         */
+        canManagePolicies: function () {
+            var selection = nfCanvasUtils.getSelection();
+
+            // ensure 0 or 1 components selected
+            if (selection.size() <= 1) {
+                // if something is selected, ensure it's not a connection
+                if (!selection.empty() && nfCanvasUtils.isConnection(selection)) {
+                    return false;
+                }
+
+                // ensure access to read tenants
+                return nfCommon.canAccessTenants();
+            }
+
+            return false;
+        },
+
+        /**
+         * Determines whether the components in the specified selection are writable.
+         *
+         * @argument {selection} selection      The selection
+         * @return {boolean}            Whether the selection is writable
+         */
+        canModify: function (selection) {
+            var selectionSize = selection.size();
+            var writableSize = selection.filter(function (d) {
+                return d.permissions.canWrite;
+            }).size();
+
+            return selectionSize === writableSize;
+        },
+
+        /**
+         * Determines whether the components in the specified selection are readable.
+         *
+         * @argument {selection} selection      The selection
+         * @return {boolean}            Whether the selection is readable
+         */
+        canRead: function (selection) {
+            var selectionSize = selection.size();
+            var readableSize = selection.filter(function (d) {
+                return d.permissions.canRead;
+            }).size();
+
+            return selectionSize === readableSize;
+        },
+
+        /**
+         * Determines whether the specified selection is in a state to support modification.
+         *
+         * @argument {selection} selection      The selection
+         */
+        supportsModification: function (selection) {
+            if (selection.size() !== 1) {
+                return false;
+            }
+
+            // get the selection data
+            var selectionData = selection.datum();
+
+            var supportsModification = false;
+            if (nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
+                supportsModification = !(selectionData.status.aggregateSnapshot.runStatus === 'Running' || selectionData.status.aggregateSnapshot.activeThreadCount > 0);
+            } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                supportsModification = !(selectionData.status.transmissionStatus === 'Transmitting' || selectionData.status.aggregateSnapshot.activeThreadCount > 0);
+            } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                supportsModification = true;
+            } else if (nfCanvasUtils.isFunnel(selection)) {
+                supportsModification = true;
+            } else if (nfCanvasUtils.isLabel(selection)) {
+                supportsModification = true;
+            } else if (nfCanvasUtils.isConnection(selection)) {
+                var isSourceConfigurable = false;
+                var isDestinationConfigurable = false;
+
+                var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(selectionData);
+                var source = d3.select('#id-' + sourceComponentId);
+                if (!source.empty()) {
+                    if (nfCanvasUtils.isRemoteProcessGroup(source) || nfCanvasUtils.isProcessGroup(source)) {
+                        isSourceConfigurable = true;
+                    } else {
+                        isSourceConfigurable = nfCanvasUtils.supportsModification(source);
+                    }
+                }
+
+                var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(selectionData);
+                var destination = d3.select('#id-' + destinationComponentId);
+                if (!destination.empty()) {
+                    if (nfCanvasUtils.isRemoteProcessGroup(destination) || nfCanvasUtils.isProcessGroup(destination)) {
+                        isDestinationConfigurable = true;
+                    } else {
+                        isDestinationConfigurable = nfCanvasUtils.supportsModification(destination);
+                    }
+                }
+
+                supportsModification = isSourceConfigurable && isDestinationConfigurable;
+            }
+            return supportsModification;
+        },
+
+        /**
+         * Determines the connectable type for the specified source selection.
+         *
+         * @argument {selection} selection      The selection
+         */
+        getConnectableTypeForSource: function (selection) {
+            var type;
+            if (nfCanvasUtils.isProcessor(selection)) {
+                type = 'PROCESSOR';
+            } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                type = 'REMOTE_OUTPUT_PORT';
+            } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                type = 'OUTPUT_PORT';
+            } else if (nfCanvasUtils.isInputPort(selection)) {
+                type = 'INPUT_PORT';
+            } else if (nfCanvasUtils.isFunnel(selection)) {
+                type = 'FUNNEL';
+            }
+            return type;
+        },
+
+        /**
+         * Determines the connectable type for the specified destination selection.
+         *
+         * @argument {selection} selection      The selection
+         */
+        getConnectableTypeForDestination: function (selection) {
+            var type;
+            if (nfCanvasUtils.isProcessor(selection)) {
+                type = 'PROCESSOR';
+            } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                type = 'REMOTE_INPUT_PORT';
+            } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                type = 'INPUT_PORT';
+            } else if (nfCanvasUtils.isOutputPort(selection)) {
+                type = 'OUTPUT_PORT';
+            } else if (nfCanvasUtils.isFunnel(selection)) {
+                type = 'FUNNEL';
+            }
+            return type;
+        },
+
+        /**
+         * Determines if the graph is currently in a state to copy.
+         *
+         * @argument {selection} selection    The selection
+         */
+        isCopyable: function (selection) {
+            // if nothing is selected return
+            if (selection.empty()) {
+                return false;
+            }
+
+            if (nfCanvasUtils.canRead(selection) === false) {
+                return false;
+            }
+
+            // determine how many copyable components are selected
+            var copyable = selection.filter(function (d) {
+                var selected = d3.select(this);
+                if (nfCanvasUtils.isConnection(selected)) {
+                    var sourceIncluded = !selection.filter(function (source) {
+                        var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(d);
+                        return sourceComponentId === source.id;
+                    }).empty();
+                    var destinationIncluded = !selection.filter(function (destination) {
+                        var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(d);
+                        return destinationComponentId === destination.id;
+                    }).empty();
+                    return sourceIncluded && destinationIncluded;
+                } else {
+                    return nfCanvasUtils.isProcessor(selected) || nfCanvasUtils.isFunnel(selected) || nfCanvasUtils.isLabel(selected) || nfCanvasUtils.isProcessGroup(selected) || nfCanvasUtils.isRemoteProcessGroup(selected) || nfCanvasUtils.isInputPort(selected) || nfCanvasUtils.isOutputPort(selected);
+                }
+            });
+
+            // ensure everything selected is copyable
+            return selection.size() === copyable.size();
+        },
+
+        /**
+         * Determines if something is currently pastable.
+         */
+        isPastable: function () {
+            return nfCanvas.canWrite() && nfClipboard.isCopied();
+        },
+
+        /**
+         * Persists the current user view.
+         */
+        persistUserView: function () {
+            var name = config.storage.namePrefix + nfCanvas.getGroupId();
+
+            // create the item to store
+            var translate = nfCanvas.View.translate();
+            var item = {
+                scale: nfCanvas.View.scale(),
+                translateX: translate[0],
+                translateY: translate[1]
+            };
+
+            // store the item
+            nfStorage.setItem(name, item);
+        },
+
+        /**
+         * Gets the name for this connection.
+         *
+         * @param {object} connection
+         */
+        formatConnectionName: function (connection) {
+            if (!nfCommon.isBlank(connection.name)) {
+                return connection.name;
+            } else if (nfCommon.isDefinedAndNotNull(connection.selectedRelationships)) {
+                return connection.selectedRelationships.join(', ');
+            }
+            return '';
+        },
+
+        /**
+         * Reloads a connection's source and destination.
+         *
+         * @param {string} sourceComponentId          The connection source id
+         * @param {string} destinationComponentId     The connection destination id
+         */
+        reloadConnectionSourceAndDestination: function (sourceComponentId, destinationComponentId) {
+            if (nfCommon.isBlank(sourceComponentId) === false) {
+                var source = d3.select('#id-' + sourceComponentId);
+                if (source.empty() === false) {
+                    nfGraph.reload(source);
+                }
+            }
+            if (nfCommon.isBlank(destinationComponentId) === false) {
+                var destination = d3.select('#id-' + destinationComponentId);
+                if (destination.empty() === false) {
+                    nfGraph.reload(destination);
+                }
+            }
+        },
+
+        /**
+         * Returns the component id of the source of this processor. If the connection is attached
+         * to a port in a [sub|remote] group, the component id will be that of the group. Otherwise
+         * it is the component itself.
+         *
+         * @param {object} connection   The connection in question
+         */
+        getConnectionSourceComponentId: function (connection) {
+            var sourceId = connection.sourceId;
+            if (connection.sourceGroupId !== nfCanvas.getGroupId()) {
+                sourceId = connection.sourceGroupId;
+            }
+            return sourceId;
+        },
+
+        /**
+         * Returns the component id of the source of this processor. If the connection is attached
+         * to a port in a [sub|remote] group, the component id will be that of the group. Otherwise
+         * it is the component itself.
+         *
+         * @param {object} connection   The connection in question
+         */
+        getConnectionDestinationComponentId: function (connection) {
+            var destinationId = connection.destinationId;
+            if (connection.destinationGroupId !== nfCanvas.getGroupId()) {
+                destinationId = connection.destinationGroupId;
+            }
+            return destinationId;
+        },
+
+        /**
+         * Attempts to restore a persisted view. Returns a flag that indicates if the
+         * view was restored.
+         */
+        restoreUserView: function () {
+            var viewRestored = false;
+
+            try {
+                // see if we can restore the view position from storage
+                var name = config.storage.namePrefix + nfCanvas.getGroupId();
+                var item = nfStorage.getItem(name);
+
+                // ensure the item is valid
+                if (nfCommon.isDefinedAndNotNull(item)) {
+                    if (isFinite(item.scale) && isFinite(item.translateX) && isFinite(item.translateY)) {
+                        // restore previous view
+                        nfCanvas.View.translate([item.translateX, item.translateY]);
+                        nfCanvas.View.scale(item.scale);
+
+                        // refresh the canvas
+                        nfCanvas.View.refresh({
+                            transition: true
+                        });
+
+                        // mark the view was restore
+                        viewRestored = true;
+                    }
+                }
+            } catch (e) {
+                // likely could not parse item.. ignoring
+            }
+
+            return viewRestored;
+        },
+
+        /**
+         * Gets the origin of the bounding box for the specified selection.
+         *
+         * @argument {selection} selection      The selection
+         */
+        getOrigin: function (selection) {
+            var origin = {};
+
+            selection.each(function (d) {
+                var selected = d3.select(this);
+                if (!nfCanvasUtils.isConnection(selected)) {
+                    if (nfCommon.isUndefined(origin.x) || d.position.x < origin.x) {
+                        origin.x = d.position.x;
+                    }
+                    if (nfCommon.isUndefined(origin.y) || d.position.y < origin.y) {
+                        origin.y = d.position.y;
+                    }
+                }
+            });
+
+            return origin;
+        },
+
+        /**
+         * Moves the specified components into the current parent group.
+         *
+         * @param {selection} components
+         */
+        moveComponentsToParent: function (components) {
+            var groupId = nfCanvas.getParentGroupId();
+
+            // if the group id is null, we're already in the top most group
+            if (groupId === null) {
+                nfDialog.showOkDialog({
+                    headerText: 'Process Group',
+                    dialogContent: 'Components are already in the topmost group.'
+                });
+            } else {
+                moveComponents(components, groupId);
+            }
+        },
+
+        /**
+         * Moves the specified components into the specified group.
+         *
+         * @param {selection} components    The components to move
+         * @param {selection} group         The destination group
+         */
+        moveComponents: function (components, group) {
+            var groupData = group.datum();
+
+            // move the components into the destination and...
+            moveComponents(components, groupData.id).done(function () {
+                // reload the target group
+                nfCanvasUtils.getComponentByType('ProcessGroup').reload(groupData.id);
+            });
+        },
+
+        /**
+         * Removes any dangling edges. All components are retained as well as any
+         * edges whose source and destination are also retained.
+         *
+         * @param {selection} selection
+         * @returns {array}
+         */
+        trimDanglingEdges: function (selection) {
+            // returns whether the source and destination of the specified connection are present in the specified selection
+            var keepConnection = function (connection) {
+                var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connection);
+                var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connection);
+
+                // determine if both source and destination are selected
+                var includesSource = false;
+                var includesDestination = false;
+                selection.each(function (d) {
+                    if (d.id === sourceComponentId) {
+                        includesSource = true;
+                    }
+                    if (d.id === destinationComponentId) {
+                        includesDestination = true;
+                    }
+                });
+
+                return includesSource && includesDestination;
+            };
+
+            // include all components and connections whose source/destination are also selected
+            return selection.filter(function (d) {
+                if (d.type === 'Connection') {
+                    return keepConnection(d);
+                } else {
+                    return true;
+                }
+            });
+        },
+
+        /**
+         * Determines if the component in the specified selection is a valid connection source.
+         *
+         * @param {selection} selection         The selection
+         * @return {boolean} Whether the selection is a valid connection source
+         */
+        isValidConnectionSource: function (selection) {
+            if (selection.size() !== 1) {
+                return false;
+            }
+
+            // always allow connections from process groups
+            if (nfCanvasUtils.isProcessGroup(selection)) {
+                return true;
+            }
+
+            // require read and write for a connection source since we'll need to read the source to obtain valid relationships, etc
+            if (nfCanvasUtils.canRead(selection) === false || nfCanvasUtils.canModify(selection) === false) {
+                return false;
+            }
+
+            return nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isRemoteProcessGroup(selection) ||
+                nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isFunnel(selection);
+        },
+
+        /**
+         * Determines if the component in the specified selection is a valid connection destination.
+         *
+         * @param {selection} selection         The selection
+         * @return {boolean} Whether the selection is a valid connection destination
+         */
+        isValidConnectionDestination: function (selection) {
+            if (selection.size() !== 1) {
+                return false;
+            }
+
+            if (nfCanvasUtils.isProcessGroup(selection)) {
+                return true;
+            }
+
+            // require write for a connection destination
+            if (nfCanvasUtils.canModify(selection) === false) {
+                return false;
+            }
+
+            if (nfCanvasUtils.isRemoteProcessGroup(selection) || nfCanvasUtils.isOutputPort(selection) || nfCanvasUtils.isFunnel(selection)) {
+                return true;
+            }
+
+            // if processor, ensure it supports input
+            if (nfCanvasUtils.isProcessor(selection)) {
+                var destinationData = selection.datum();
+                return destinationData.inputRequirement !== 'INPUT_FORBIDDEN';
+            }
+        },
+
+        /**
+         * Returns whether the authorizer is configurable.
+         */
+        isConfigurableAuthorizer: function () {
+            return nfCanvas.isConfigurableAuthorizer();
+        },
+
+        /**
+         * Set the group id.
+         *
+         * @argument {string} gi       The group id
+         */
+        setGroupId: function (gi) {
+            return nfCanvas.setGroupId(gi);
+        },
+
+        /**
+         * Get the group id.
+         */
+        getGroupId: function () {
+            return nfCanvas.getGroupId();
+        },
+
+        /**
+         * Get the group name.
+         */
+        getGroupName: function () {
+            return nfCanvas.getGroupName();
+        },
+
+        /**
+         * Get the parent group id.
+         */
+        getParentGroupId: function () {
+            return nfCanvas.getParentGroupId();
+        },
+
+        /**
+         * Reloads the status for the entire canvas (components and flow.)
+         */
+        reload: function () {
+            return nfCanvas.reload({
+                'transition': true
+            });
+        },
+
+        /**
+         * Whether the current user can read from this group.
+         *
+         * @returns {boolean}   can write
+         */
+        canReadFromGroup: function () {
+            return nfCanvas.canRead();
+        },
+
+        /**
+         * Whether the current user can write in this group.
+         *
+         * @returns {boolean}   can write
+         */
+        canWrite: function () {
+            return nfCanvas.canWrite();
+        },
+
+        /**
+         * Refreshes the view based on the configured translation and scale.
+         *
+         * @param {object} options Options for the refresh operation
+         */
+        refreshCanvasView: function (options) {
+            return nfCanvas.View.refresh(options);
+        },
+
+        /**
+         * Sets/gets the current scale.
+         *
+         * @param {number} scale        The new scale
+         */
+        scaleCanvasView: function (scale) {
+            return nfCanvas.View.scale(scale);
+        },
+
+        /**
+         * Sets/gets the current translation.
+         *
+         * @param {array} translate     [x, y]
+         */
+        translateCanvasView: function (translate) {
+            return nfCanvas.View.translate(translate);
+        },
+
+        /**
+         * Zooms to fit the entire graph on the canvas.
+         */
+        fitCanvasView: function () {
+            return nfCanvas.View.fit();
+        },
+
+        /**
+         * Zooms in a single zoom increment.
+         */
+        zoomCanvasViewIn: function () {
+            return nfCanvas.View.zoomIn();
+        },
+
+        /**
+         * Zooms out a single zoom increment.
+         */
+        zoomCanvasViewOut: function () {
+            return nfCanvas.View.zoomOut();
+        },
+
+        /**
+         * Zooms to the actual size (1 to 1).
+         */
+        actualSizeCanvasView: function () {
+            return nfCanvas.View.actualSize();
+        },
+
+        /**
+         * Whether or not a component should be rendered based solely on the current scale.
+         *
+         * @returns {Boolean}
+         */
+        shouldRenderPerScale: function () {
+            return nfCanvas.View.shouldRenderPerScale();
+        },
+
+        /**
+         * Gets the canvas offset.
+         */
+        getCanvasOffset: function () {
+            return nfCanvas.CANVAS_OFFSET;
+        }
+    };
+    return nfCanvasUtils;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
new file mode 100644
index 000000000000..74b43d860719
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
@@ -0,0 +1,1330 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'd3',
+                'nf.Common',
+                'nf.Graph',
+                'nf.Shell',
+                'nf.ng.Bridge',
+                'nf.ClusterSummary',
+                'nf.ErrorHandler',
+                'nf.Storage',
+                'nf.CanvasUtils',
+                'nf.Birdseye',
+                'nf.ContextMenu',
+                'nf.Actions',
+                'nf.ProcessGroup'],
+            function ($, d3, nfCommon, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup) {
+                return (nf.Canvas = factory($, d3, nfCommon, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Canvas =
+            factory(require('jquery'),
+                require('d3'),
+                require('nf.Common'),
+                require('nf.Graph'),
+                require('nf.Shell'),
+                require('nf.ng.Bridge'),
+                require('nf.ClusterSummary'),
+                require('nf.ErrorHandler'),
+                require('nf.Storage'),
+                require('nf.CanvasUtils'),
+                require('nf.Birdseye'),
+                require('nf.ContextMenu'),
+                require('nf.Actions'),
+                require('nf.ProcessGroup')));
+    } else {
+        nf.Canvas = factory(root.$,
+            root.d3,
+            root.nf.Common,
+            root.nf.Graph,
+            root.nf.Shell,
+            root.nf.ng.Bridge,
+            root.nf.ClusterSummary,
+            root.nf.ErrorHandler,
+            root.nf.Storage,
+            root.nf.CanvasUtils,
+            root.nf.Birdseye,
+            root.nf.ContextMenu,
+            root.nf.Actions,
+            root.nf.ProcessGroup);
+    }
+}(this, function ($, d3, nfCommon, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup) {
+    'use strict';
+
+    var SCALE = 1;
+    var TRANSLATE = [0, 0];
+    var INCREMENT = 1.2;
+    var MAX_SCALE = 8;
+    var MIN_SCALE = 0.2;
+    var MIN_SCALE_TO_RENDER = 0.6;
+
+    var polling = false;
+    var allowPageRefresh = false;
+    var groupId = 'root';
+    var groupName = null;
+    var permissions = null;
+    var parentGroupId = null;
+    var configurableAuthorizer = false;
+    var svg = null;
+    var canvas = null;
+
+    var canvasClicked = false;
+    var panning = false;
+
+    var config = {
+        urls: {
+            api: '../nifi-api',
+            currentUser: '../nifi-api/flow/current-user',
+            controllerBulletins: '../nifi-api/flow/controller/bulletins',
+            kerberos: '../nifi-api/access/kerberos',
+            revision: '../nifi-api/flow/revision',
+            banners: '../nifi-api/flow/banners'
+        }
+    };
+
+    /**
+     * Register the poller.
+     *
+     * @argument {int} autoRefreshInterval      The auto refresh interval
+     */
+    var poll = function (autoRefreshInterval) {
+        // ensure we're suppose to poll
+        if (polling) {
+            // reload the status
+            nfCanvas.reload({
+                'transition': true
+            }).done(function () {
+                // start the wait to poll again
+                setTimeout(function () {
+                    poll(autoRefreshInterval);
+                }, autoRefreshInterval * 1000);
+            });
+        }
+    };
+
+    /**
+     * Refreshes the graph.
+     *
+     * @argument {string} processGroupId        The process group id
+     * @argument {object} options               Configuration options
+     */
+    var reloadProcessGroup = function (processGroupId, options) {
+        var now = new Date().getTime();
+
+        // load the controller
+        return $.ajax({
+            type: 'GET',
+            url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupId),
+            dataType: 'json'
+        }).done(function (flowResponse) {
+            // get the controller and its contents
+            var processGroupFlow = flowResponse.processGroupFlow;
+
+            // set the group details
+            nfCanvas.setGroupId(processGroupFlow.id);
+
+            // get the current group name from the breadcrumb
+            var breadcrumb = processGroupFlow.breadcrumb;
+            if (breadcrumb.permissions.canRead) {
+                nfCanvas.setGroupName(breadcrumb.breadcrumb.name);
+            } else {
+                nfCanvas.setGroupName(breadcrumb.id);
+            }
+
+            // update the access policies
+            permissions = flowResponse.permissions;
+
+            // update the breadcrumbs
+            nfNgBridge.injector.get('breadcrumbsCtrl').resetBreadcrumbs();
+            // inform Angular app values have changed
+            nfNgBridge.digest();
+            nfNgBridge.injector.get('breadcrumbsCtrl').generateBreadcrumbs(breadcrumb);
+            nfNgBridge.injector.get('breadcrumbsCtrl').resetScrollPosition();
+
+            // update the timestamp
+            $('#stats-last-refreshed').text(processGroupFlow.lastRefreshed);
+
+            // set the parent id if applicable
+            if (nfCommon.isDefinedAndNotNull(processGroupFlow.parentGroupId)) {
+                nfCanvas.setParentGroupId(processGroupFlow.parentGroupId);
+            } else {
+                nfCanvas.setParentGroupId(null);
+            }
+
+            // refresh the graph
+            nfGraph.expireCaches(now);
+            nfGraph.set(processGroupFlow.flow, $.extend({
+                'selectAll': false
+            }, options));
+
+            // update component visibility
+            nfCanvas.View.updateVisibility();
+
+            // update the birdseye
+            nfBirdseye.refresh();
+        }).fail(nfErrorHandler.handleAjaxError);
+    };
+
+    /**
+     * Loads the current user and updates the current user locally.
+     *
+     * @returns xhr
+     */
+    var loadCurrentUser = function () {
+        // get the current user
+        return $.ajax({
+            type: 'GET',
+            url: config.urls.currentUser,
+            dataType: 'json'
+        }).done(function (currentUser) {
+            // set the current user
+            nfCommon.setCurrentUser(currentUser);
+        });
+    };
+
+    var nfCanvas = {
+        CANVAS_OFFSET: 0,
+
+        /**
+         * Determines if the current broswer supports SVG.
+         */
+        SUPPORTS_SVG: !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect,
+
+        /**
+         * Hides the splash that is displayed while the application is loading.
+         */
+        hideSplash: function () {
+            $('#splash').fadeOut();
+        },
+
+        /**
+         * Remove the status poller.
+         */
+        stopPolling: function () {
+            // set polling flag
+            polling = false;
+        },
+
+        /**
+         * Disable the canvas refresh hot key.
+         */
+        disableRefreshHotKey: function () {
+            allowPageRefresh = true;
+        },
+
+        /**
+         * Reloads the flow from the server based on the currently specified group id.
+         * To load another group, update nfCanvas.setGroupId, clear the canvas, and call nfCanvas.reload.
+         */
+        reload: function (options) {
+            return $.Deferred(function (deferred) {
+                // issue the requests
+                var processGroupXhr = reloadProcessGroup(nfCanvas.getGroupId(), options);
+                var statusXhr = nfNgBridge.injector.get('flowStatusCtrl').reloadFlowStatus();
+                var currentUserXhr = loadCurrentUser();
+                var controllerBulletins = $.ajax({
+                    type: 'GET',
+                    url: config.urls.controllerBulletins,
+                    dataType: 'json'
+                }).done(function (response) {
+                    nfNgBridge.injector.get('flowStatusCtrl').updateBulletins(response);
+                });
+                var clusterSummary = nfClusterSummary.loadClusterSummary().done(function (response) {
+                    var clusterSummary = response.clusterSummary;
+
+                    // update the cluster summary
+                    nfNgBridge.injector.get('flowStatusCtrl').updateClusterSummary(clusterSummary);
+                });
+
+                // wait for all requests to complete
+                $.when(processGroupXhr, statusXhr, currentUserXhr, controllerBulletins, clusterSummary).done(function (processGroupResult) {
+                    // inform Angular app values have changed
+                    nfNgBridge.digest();
+
+                    // resolve the deferred
+                    deferred.resolve(processGroupResult);
+                }).fail(function (xhr, status, error) {
+                    deferred.reject(xhr, status, error);
+                });
+            }).promise();
+        },
+
+        /**
+         * Initializes the canvas.
+         */
+        initCanvas: function () {
+            var canvasContainer = $('#canvas-container');
+
+            // create the canvas
+            svg = d3.select('#canvas-container').append('svg')
+                .on('contextmenu', function () {
+                    // reset the canvas click flag
+                    canvasClicked = false;
+
+                    // since the context menu event propagated back to the canvas, clear the selection
+                    nfCanvasUtils.getSelection().classed('selected', false);
+
+                    // show the context menu on the canvas
+                    nfContextMenu.show();
+
+                    // prevent default browser behavior
+                    d3.event.preventDefault();
+                });
+
+            // create the definitions element
+            var defs = svg.append('defs');
+
+            // create arrow definitions for the various line types
+            defs.selectAll('marker')
+                .data(['normal', 'ghost', 'unauthorized', 'full'])
+                .enter().append('marker')
+                .attr({
+                    'id': function (d) {
+                        return d;
+                    },
+                    'viewBox': '0 0 6 6',
+                    'refX': 5,
+                    'refY': 3,
+                    'markerWidth': 6,
+                    'markerHeight': 6,
+                    'orient': 'auto',
+                    'fill': function (d) {
+                        if (d === 'ghost') {
+                            return '#aaaaaa';
+                        } else if (d === 'unauthorized') {
+                            return '#ba554a';
+                        } else if (d === 'full') {
+                            return '#ba554a';
+                        } else {
+                            return '#000000';
+                        }
+                    }
+                })
+                .append('path')
+                .attr('d', 'M2,3 L0,6 L6,3 L0,0 z');
+
+            // filter for drop shadow
+            var componentDropShadowFilter = defs.append('filter')
+                .attr({
+                    'id': 'component-drop-shadow',
+                    'height': '140%',
+                    'y': '-20%'
+                });
+
+            // blur
+            componentDropShadowFilter.append('feGaussianBlur')
+                .attr({
+                    'in': 'SourceAlpha',
+                    'stdDeviation': 3,
+                    'result': 'blur'
+                });
+
+            // offset
+            componentDropShadowFilter.append('feOffset')
+                .attr({
+                    'in': 'blur',
+                    'dx': 0,
+                    'dy': 1,
+                    'result': 'offsetBlur'
+                });
+
+            // color/opacity
+            componentDropShadowFilter.append('feFlood')
+                .attr({
+                    'flood-color': '#000000',
+                    'flood-opacity': 0.4,
+                    'result': 'offsetColor'
+                });
+
+            // combine
+            componentDropShadowFilter.append('feComposite')
+                .attr({
+                    'in': 'offsetColor',
+                    'in2': 'offsetBlur',
+                    'operator': 'in',
+                    'result': 'offsetColorBlur'
+                });
+
+            // stack the effect under the source graph
+            var componentDropShadowFeMerge = componentDropShadowFilter.append('feMerge');
+            componentDropShadowFeMerge.append('feMergeNode')
+                .attr('in', 'offsetColorBlur');
+            componentDropShadowFeMerge.append('feMergeNode')
+                .attr('in', 'SourceGraphic');
+
+            // filter for drop shadow
+            var connectionFullDropShadowFilter = defs.append('filter')
+                .attr({
+                    'id': 'connection-full-drop-shadow',
+                    'height': '140%',
+                    'y': '-20%'
+                });
+
+            // blur
+            connectionFullDropShadowFilter.append('feGaussianBlur')
+                .attr({
+                    'in': 'SourceAlpha',
+                    'stdDeviation': 3,
+                    'result': 'blur'
+                });
+
+            // offset
+            connectionFullDropShadowFilter.append('feOffset')
+                .attr({
+                    'in': 'blur',
+                    'dx': 0,
+                    'dy': 1,
+                    'result': 'offsetBlur'
+                });
+
+            // color/opacity
+            connectionFullDropShadowFilter.append('feFlood')
+                .attr({
+                    'flood-color': '#ba554a',
+                    'flood-opacity': 1,
+                    'result': 'offsetColor'
+                });
+
+            // combine
+            connectionFullDropShadowFilter.append('feComposite')
+                .attr({
+                    'in': 'offsetColor',
+                    'in2': 'offsetBlur',
+                    'operator': 'in',
+                    'result': 'offsetColorBlur'
+                });
+
+            // stack the effect under the source graph
+            var connectionFullFeMerge = connectionFullDropShadowFilter.append('feMerge');
+            connectionFullFeMerge.append('feMergeNode')
+                .attr('in', 'offsetColorBlur');
+            connectionFullFeMerge.append('feMergeNode')
+                .attr('in', 'SourceGraphic');
+
+            // create the canvas element
+            canvas = svg.append('g')
+                .attr({
+                    'transform': 'translate(' + TRANSLATE + ') scale(' + SCALE + ')',
+                    'pointer-events': 'all',
+                    'id': 'canvas'
+                });
+
+            // handle canvas events
+            svg.on('mousedown.selection', function () {
+                canvasClicked = true;
+
+                if (d3.event.button !== 0) {
+                    // prevent further propagation (to parents and others handlers
+                    // on the same element to prevent zoom behavior)
+                    d3.event.stopImmediatePropagation();
+                    return;
+                }
+
+                // show selection box if shift is held down
+                if (d3.event.shiftKey) {
+                    var position = d3.mouse(canvas.node());
+                    canvas.append('rect')
+                        .attr('rx', 6)
+                        .attr('ry', 6)
+                        .attr('x', position[0])
+                        .attr('y', position[1])
+                        .attr('class', 'selection')
+                        .attr('width', 0)
+                        .attr('height', 0)
+                        .attr('stroke-width', function () {
+                            return 1 / nfCanvas.View.scale();
+                        })
+                        .attr('stroke-dasharray', function () {
+                            return 4 / nfCanvas.View.scale();
+                        })
+                        .datum(position);
+
+                    // prevent further propagation (to parents and others handlers
+                    // on the same element to prevent zoom behavior)
+                    d3.event.stopImmediatePropagation();
+
+                    // prevents the browser from changing to a text selection cursor
+                    d3.event.preventDefault();
+                }
+            })
+                .on('mousemove.selection', function () {
+                    // update selection box if shift is held down
+                    if (d3.event.shiftKey) {
+                        // get the selection box
+                        var selectionBox = d3.select('rect.selection');
+                        if (!selectionBox.empty()) {
+                            // get the original position
+                            var originalPosition = selectionBox.datum();
+                            var position = d3.mouse(canvas.node());
+
+                            var d = {};
+                            if (originalPosition[0] < position[0]) {
+                                d.x = originalPosition[0];
+                                d.width = position[0] - originalPosition[0];
+                            } else {
+                                d.x = position[0];
+                                d.width = originalPosition[0] - position[0];
+                            }
+
+                            if (originalPosition[1] < position[1]) {
+                                d.y = originalPosition[1];
+                                d.height = position[1] - originalPosition[1];
+                            } else {
+                                d.y = position[1];
+                                d.height = originalPosition[1] - position[1];
+                            }
+
+                            // update the selection box
+                            selectionBox.attr(d);
+
+                            // prevent further propagation (to parents)
+                            d3.event.stopPropagation();
+                        }
+                    }
+                })
+                .on('mouseup.selection', function () {
+                    // ensure this originated from clicking the canvas, not a component.
+                    // when clicking on a component, the event propagation is stopped so
+                    // it never reaches the canvas. we cannot do this however on up events
+                    // since the drag events break down
+                    if (canvasClicked === false) {
+                        return;
+                    }
+
+                    // reset the canvas click flag
+                    canvasClicked = false;
+
+                    // get the selection box
+                    var selectionBox = d3.select('rect.selection');
+                    if (!selectionBox.empty()) {
+                        var selectionBoundingBox = {
+                            x: parseInt(selectionBox.attr('x'), 10),
+                            y: parseInt(selectionBox.attr('y'), 10),
+                            width: parseInt(selectionBox.attr('width'), 10),
+                            height: parseInt(selectionBox.attr('height'), 10)
+                        };
+
+                        // see if a component should be selected or not
+                        d3.selectAll('g.component').classed('selected', function (d) {
+                            // consider it selected if its already selected or enclosed in the bounding box
+                            return d3.select(this).classed('selected') ||
+                                d.position.x >= selectionBoundingBox.x && (d.position.x + d.dimensions.width) <= (selectionBoundingBox.x + selectionBoundingBox.width) &&
+                                d.position.y >= selectionBoundingBox.y && (d.position.y + d.dimensions.height) <= (selectionBoundingBox.y + selectionBoundingBox.height);
+                        });
+
+                        // see if a connection should be selected or not
+                        d3.selectAll('g.connection').classed('selected', function (d) {
+                            // consider all points
+                            var points = [d.start].concat(d.bends, [d.end]);
+
+                            // determine the bounding box
+                            var x = d3.extent(points, function (pt) {
+                                return pt.x;
+                            });
+                            var y = d3.extent(points, function (pt) {
+                                return pt.y;
+                            });
+
+                            // consider it selected if its already selected or enclosed in the bounding box
+                            return d3.select(this).classed('selected') ||
+                                x[0] >= selectionBoundingBox.x && x[1] <= (selectionBoundingBox.x + selectionBoundingBox.width) &&
+                                y[0] >= selectionBoundingBox.y && y[1] <= (selectionBoundingBox.y + selectionBoundingBox.height);
+                        });
+
+                        // remove the selection box
+                        selectionBox.remove();
+                    } else if (panning === false) {
+                        // deselect as necessary if we are not panning
+                        nfCanvasUtils.getSelection().classed('selected', false);
+                    }
+
+                    // inform Angular app values have changed
+                    nfNgBridge.digest();
+                });
+
+            // define a function for update the graph dimensions
+            var updateGraphSize = function () {
+                // get the location of the bottom of the graph
+                var footer = $('#banner-footer');
+                var bottom = 0;
+                if (footer.is(':visible')) {
+                    bottom = footer.height();
+                }
+
+                // calculate size
+                var top = parseInt(canvasContainer.css('top'), 10);
+                var windowHeight = $(window).height();
+                var canvasHeight = (windowHeight - (bottom + top));
+
+                // canvas/svg
+                canvasContainer.css({
+                    'height': canvasHeight + 'px',
+                    'bottom': bottom + 'px'
+                });
+                svg.attr({
+                    'height': canvasContainer.height(),
+                    'width': $(window).width()
+                });
+
+                //breadcrumbs
+                nfNgBridge.injector.get('breadcrumbsCtrl').updateBreadcrumbsCss({'bottom': bottom + 'px'});
+
+                // body
+                $('#canvas-body').css({
+                    'height': windowHeight + 'px',
+                    'width': $(window).width() + 'px'
+                });
+            };
+
+            // define a function for update the flow status dimensions
+            var updateFlowStatusContainerSize = function () {
+                $('#flow-status-container').css({
+                    'width': ((($('#nifi-logo').width() + $('#component-container').width())/$(window).width())*100)*2 + '%'
+                });
+            };
+            updateFlowStatusContainerSize();
+
+            // listen for events to go to components
+            $('body').on('GoTo:Component', function (e, item) {
+                nfCanvasUtils.showComponent(item.parentGroupId, item.id);
+            });
+
+            // listen for events to go to process groups
+            $('body').on('GoTo:ProcessGroup', function (e, item) {
+                nfProcessGroup.enterGroup(item.id).done(function () {
+                    nfCanvasUtils.getSelection().classed('selected', false);
+
+                    // inform Angular app that values have changed
+                    nfNgBridge.digest();
+                });
+            });
+
+            // listen for browser resize events to reset the graph size
+            $(window).on('resize', function (e) {
+                if (e.target === window) {
+                    // close the hamburger menu if open
+                    if($('.md-menu-backdrop').is(':visible') === true){
+                        $('.md-menu-backdrop').click();
+                    }
+
+                    updateGraphSize();
+                    updateFlowStatusContainerSize();
+
+                    // resize shell when appropriate
+                    var shell = $('#shell-dialog');
+                    if (shell.is(':visible')){
+                        setTimeout(function(shell){
+                            nfShell.resizeContent(shell);
+                            if(shell.find('#shell-iframe').is(':visible')) {
+                                nfShell.resizeIframe(shell);
+                            }
+                        }, 50, shell);
+                    }
+
+                    // resize dialogs when appropriate
+                    var dialogs = $('.dialog');
+                    for (var i = 0, len = dialogs.length; i < len; i++) {
+                        if ($(dialogs[i]).is(':visible')){
+                            setTimeout(function(dialog){
+                                dialog.modal('resize');
+                            }, 50, $(dialogs[i]));
+                        }
+                    }
+
+                    // resize grids when appropriate
+                    var gridElements = $('*[class*="slickgrid_"]');
+                    for (var j = 0, len = gridElements.length; j < len; j++) {
+                        if ($(gridElements[j]).is(':visible')){
+                            setTimeout(function(gridElement){
+                                gridElement.data('gridInstance').resizeCanvas();
+                            }, 50, $(gridElements[j]));
+                        }
+                    }
+
+                    // toggle tabs .scrollable when appropriate
+                    var tabsContainers = $('.tab-container');
+                    var tabsContents = [];
+                    for (var k = 0, len = tabsContainers.length; k < len; k++) {
+                        if ($(tabsContainers[k]).is(':visible')){
+                            tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
+                        }
+                    }
+                    $.each(tabsContents, function (index, tabsContent) {
+                        nfCommon.toggleScrollable(tabsContent.get(0));
+                    });
+                }
+            }).on('keydown', function (evt) {
+                // if a dialog is open, disable canvas shortcuts
+                if ($('.dialog').is(':visible') || $('#search-field').is(':focus')) {
+                    return;
+                }
+
+                // get the current selection
+                var selection = nfCanvasUtils.getSelection();
+
+                // handle shortcuts
+                var isCtrl = evt.ctrlKey || evt.metaKey;
+                if (isCtrl) {
+                    if (evt.keyCode === 82) {
+                        if (allowPageRefresh === true) {
+                            location.reload();
+                            return;
+                        }
+                        // ctrl-r
+                        nfActions.reload();
+
+                        // default prevented in nf-universal-capture.js
+                    } else if (evt.keyCode === 65) {
+                        // ctrl-a
+                        nfActions.selectAll();
+                        nfNgBridge.digest();
+
+                        // only want to prevent default if the action was performed, otherwise default select all would be overridden
+                        evt.preventDefault();
+                    } else if (evt.keyCode === 67) {
+                        // ctrl-c
+                        if (nfCanvas.canWrite() && nfCanvasUtils.isCopyable(selection)) {
+                            nfActions.copy(selection);
+                        }
+                    } else if (evt.keyCode === 86) {
+                        // ctrl-v
+                        if (nfCanvas.canWrite() && nfCanvasUtils.isPastable()) {
+                            nfActions.paste(selection);
+
+                            // only want to prevent default if the action was performed, otherwise default paste would be overridden
+                            evt.preventDefault();
+                        }
+                    }
+                } else {
+                    if (evt.keyCode === 8 || evt.keyCode === 46) {
+                        // backspace or delete
+                        if (nfCanvas.canWrite() && nfCanvasUtils.areDeletable(selection)) {
+                            nfActions['delete'](selection);
+                        }
+
+                        // default prevented in nf-universal-capture.js
+                    }
+                }
+            });
+
+            // get the banners and update the page accordingly
+            $.ajax({
+                type: 'GET',
+                url: config.urls.banners,
+                dataType: 'json'
+            }).done(function (response) {
+                // ensure the banners response is specified
+                if (nfCommon.isDefinedAndNotNull(response.banners)) {
+                    if (nfCommon.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') {
+                        // update the header text and show it
+                        $('#banner-header').addClass('banner-header-background').text(response.banners.headerText).show();
+                        $('#canvas-container').css('top', '98px');
+                    }
+
+                    if (nfCommon.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') {
+                        // update the footer text and show it
+                        var bannerFooter = $('#banner-footer').text(response.banners.footerText).show();
+
+                        var updateBottom = function (elementId) {
+                            var element = $('#' + elementId);
+                            element.css('bottom', parseInt(bannerFooter.css('height'), 10) + 'px');
+                        };
+
+                        // update the position of elements affected by bottom banners
+                        updateBottom('graph');
+                    }
+                }
+
+                // update the graph dimensions
+                updateGraphSize();
+            }).fail(nfErrorHandler.handleAjaxError);
+        },
+
+        /**
+         * Initialize NiFi.
+         */
+        init: function () {
+            // attempt kerberos authentication
+            var ticketExchange = $.Deferred(function (deferred) {
+                if (nfStorage.hasItem('jwt')) {
+                    deferred.resolve();
+                } else {
+                    $.ajax({
+                        type: 'POST',
+                        url: config.urls.kerberos,
+                        dataType: 'text'
+                    }).done(function (jwt) {
+                        // get the payload and store the token with the appropriate expiration
+                        var token = nfCommon.getJwtPayload(jwt);
+                        var expiration = parseInt(token['exp'], 10) * nfCommon.MILLIS_PER_SECOND;
+                        nfStorage.setItem('jwt', jwt, expiration);
+                        deferred.resolve();
+                    }).fail(function () {
+                        deferred.reject();
+                    });
+                }
+            }).promise();
+
+            // load the current user
+            return $.Deferred(function (deferred) {
+                ticketExchange.always(function () {
+                    loadCurrentUser().done(function (currentUser) {
+                        // if the user is logged, we want to determine if they were logged in using a certificate
+                        if (currentUser.anonymous === false) {
+                            // render the users name
+                            $('#current-user').text(currentUser.identity).show();
+
+                            // render the logout button if there is a token locally
+                            if (nfStorage.getItem('jwt') !== null) {
+                                $('#logout-link-container').show();
+                            }
+                        } else {
+                            // set the anonymous user label
+                            nfCommon.setAnonymousUserLabel();
+                        }
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                        // there is no anonymous access and we don't know this user - open the login page which handles login/registration/etc
+                        if (xhr.status === 401) {
+                            window.location = '/nifi/login';
+                        } else {
+                            deferred.reject(xhr, status, error);
+                        }
+                    });
+                });
+            }).promise();
+        },
+
+        /**
+         * Set the group id.
+         *
+         * @argument {string} gi       The group id
+         */
+        setGroupId: function (gi) {
+            groupId = gi;
+        },
+
+        /**
+         * Get the group id.
+         */
+        getGroupId: function () {
+            return groupId;
+        },
+
+        /**
+         * Set the group name.
+         *
+         * @argument {string} gn     The group name
+         */
+        setGroupName: function (gn) {
+            groupName = gn;
+        },
+
+        /**
+         * Get the group name.
+         */
+        getGroupName: function () {
+            return groupName;
+        },
+
+        /**
+         * Set the parent group id.
+         *
+         * @argument {string} pgi     The id of the parent group
+         */
+        setParentGroupId: function (pgi) {
+            parentGroupId = pgi;
+        },
+
+        /**
+         * Get the parent group id.
+         */
+        getParentGroupId: function () {
+            return parentGroupId;
+        },
+
+        /**
+         * Set whether the authorizer is configurable.
+         *
+         * @param bool The boolean value representing whether the authorizer is configurable.
+         */
+        setConfigurableAuthorizer: function(bool){
+            configurableAuthorizer = bool;
+        },
+
+        /**
+         * Returns whether the authorizer is configurable.
+         */
+        isConfigurableAuthorizer: function () {
+            return configurableAuthorizer;
+        },
+
+        /**
+         * Whether the current user can read from this group.
+         *
+         * @returns {boolean}   can write
+         */
+        canRead: function () {
+            if (permissions === null) {
+                return false;
+            } else {
+                return permissions.canRead === true;
+            }
+        },
+
+        /**
+         * Whether the current user can write in this group.
+         *
+         * @returns {boolean}   can write
+         */
+        canWrite: function () {
+            if (permissions === null) {
+                return false;
+            } else {
+                return permissions.canWrite === true;
+            }
+        },
+
+        /**
+         * Starts polling.
+         *
+         * @argument {int} autoRefreshInterval      The auto refresh interval
+         */
+        startPolling: function (autoRefreshInterval) {
+            // set polling flag
+            polling = true;
+            poll(autoRefreshInterval);
+        },
+
+        View: (function () {
+
+            /**
+             * Updates component visibility based on their proximity to the screen's viewport.
+             */
+            var updateComponentVisibility = function () {
+                var canvasContainer = $('#canvas-container');
+                var translate = nfCanvas.View.translate();
+                var scale = nfCanvas.View.scale();
+
+                // scale the translation
+                translate = [translate[0] / scale, translate[1] / scale];
+
+                // get the normalized screen width and height
+                var screenWidth = canvasContainer.width() / scale;
+                var screenHeight = canvasContainer.height() / scale;
+
+                // calculate the screen bounds one screens worth in each direction
+                var screenLeft = -translate[0] - screenWidth;
+                var screenTop = -translate[1] - screenHeight;
+                var screenRight = screenLeft + (screenWidth * 3);
+                var screenBottom = screenTop + (screenHeight * 3);
+
+                // detects whether a component is visible and should be rendered
+                var isComponentVisible = function (d) {
+                    if (!nfCanvas.View.shouldRenderPerScale()) {
+                        return false;
+                    }
+
+                    var left = d.position.x;
+                    var top = d.position.y;
+                    var right = left + d.dimensions.width;
+                    var bottom = top + d.dimensions.height;
+
+                    // determine if the component is now visible
+                    return screenLeft < right && screenRight > left && screenTop < bottom && screenBottom > top;
+                };
+
+                // detects whether a connection is visible and should be rendered
+                var isConnectionVisible = function (d) {
+                    if (!nfCanvas.View.shouldRenderPerScale()) {
+                        return false;
+                    }
+
+                    var x, y;
+                    if (d.bends.length > 0) {
+                        var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1);
+                        x = d.bends[i].x;
+                        y = d.bends[i].y;
+                    } else {
+                        x = (d.start.x + d.end.x) / 2;
+                        y = (d.start.y + d.end.y) / 2;
+                    }
+
+                    return screenLeft < x && screenRight > x && screenTop < y && screenBottom > y;
+                };
+
+                // marks the specific component as visible and determines if its entering or leaving visibility
+                var updateVisibility = function (d, isVisible) {
+                    var selection = d3.select('#id-' + d.id);
+                    var visible = isVisible(d);
+                    var wasVisible = selection.classed('visible');
+
+                    // mark the selection as appropriate
+                    selection.classed('visible', visible)
+                        .classed('entering', function () {
+                            return visible && !wasVisible;
+                        }).classed('leaving', function () {
+                        return !visible && wasVisible;
+                    });
+                };
+
+                // get the all components
+                var graph = nfGraph.get();
+
+                // update the visibility for each component
+                $.each(graph.processors, function (_, d) {
+                    updateVisibility(d, isComponentVisible);
+                });
+                $.each(graph.ports, function (_, d) {
+                    updateVisibility(d, isComponentVisible);
+                });
+                $.each(graph.processGroups, function (_, d) {
+                    updateVisibility(d, isComponentVisible);
+                });
+                $.each(graph.remoteProcessGroups, function (_, d) {
+                    updateVisibility(d, isComponentVisible);
+                });
+                $.each(graph.connections, function (_, d) {
+                    updateVisibility(d, isConnectionVisible);
+                });
+            };
+
+            // initialize the zoom behavior
+            var behavior;
+
+            return {
+                init: function () {
+                    var refreshed;
+                    var zoomed = false;
+
+                    // define the behavior
+                    behavior = d3.behavior.zoom()
+                        .scaleExtent([MIN_SCALE, MAX_SCALE])
+                        .translate(TRANSLATE)
+                        .scale(SCALE)
+                        .on('zoomstart', function () {
+                            // hide the context menu
+                            nfContextMenu.hide();
+                        })
+                        .on('zoom', function () {
+                            // if we have zoomed, indicate that we are panning
+                            // to prevent deselection elsewhere
+                            if (zoomed) {
+                                panning = true;
+                            } else {
+                                zoomed = true;
+                            }
+
+                            // see if the scale has changed during this zoom event,
+                            // we want to only transition when zooming in/out as running
+                            // the transitions during pan events is
+                            var transition = d3.event.sourceEvent.type === 'wheel' || d3.event.sourceEvent.type === 'mousewheel';
+
+                            // refresh the canvas
+                            refreshed = nfCanvas.View.refresh({
+                                persist: false,
+                                transition: transition,
+                                refreshComponents: false,
+                                refreshBirdseye: false
+                            });
+                        })
+                        .on('zoomend', function () {
+                            // ensure the canvas was actually refreshed
+                            if (nfCommon.isDefinedAndNotNull(refreshed)) {
+                                nfCanvas.View.updateVisibility();
+
+                                // refresh the birdseye
+                                refreshed.done(function () {
+                                    nfBirdseye.refresh();
+                                });
+
+                                // persist the users view
+                                nfCanvasUtils.persistUserView();
+
+                                // reset the refreshed deferred
+                                refreshed = null;
+                            }
+
+                            panning = false;
+                            zoomed = false;
+                        });
+
+                    // add the behavior to the canvas and disable dbl click zoom
+                    svg.call(behavior).on('dblclick.zoom', null);
+                },
+
+                /**
+                 * Whether or not a component should be rendered based solely on the current scale.
+                 *
+                 * @returns {Boolean}
+                 */
+                shouldRenderPerScale: function () {
+                    return nfCanvas.View.scale() >= MIN_SCALE_TO_RENDER;
+                },
+
+                /**
+                 * Updates component visibility based on the current translation/scale.
+                 */
+                updateVisibility: function () {
+                    updateComponentVisibility();
+                    nfGraph.pan();
+                },
+
+                /**
+                 * Sets/gets the current translation.
+                 *
+                 * @param {array} translate     [x, y]
+                 */
+                translate: function (translate) {
+                    if (nfCommon.isUndefined(translate)) {
+                        return behavior.translate();
+                    } else {
+                        behavior.translate(translate);
+                    }
+                },
+
+                /**
+                 * Sets/gets the current scale.
+                 *
+                 * @param {number} scale        The new scale
+                 */
+                scale: function (scale) {
+                    if (nfCommon.isUndefined(scale)) {
+                        return behavior.scale();
+                    } else {
+                        behavior.scale(scale);
+                    }
+                },
+
+                /**
+                 * Zooms in a single zoom increment.
+                 */
+                zoomIn: function () {
+                    var translate = nfCanvas.View.translate();
+                    var scale = nfCanvas.View.scale();
+                    var newScale = Math.min(scale * INCREMENT, MAX_SCALE);
+
+                    // get the canvas normalized width and height
+                    var canvasContainer = $('#canvas-container');
+                    var screenWidth = canvasContainer.width() / scale;
+                    var screenHeight = canvasContainer.height() / scale;
+
+                    // adjust the scale
+                    nfCanvas.View.scale(newScale);
+
+                    // center around the center of the screen accounting for the translation accordingly
+                    nfCanvasUtils.centerBoundingBox({
+                        x: (screenWidth / 2) - (translate[0] / scale),
+                        y: (screenHeight / 2) - (translate[1] / scale),
+                        width: 1,
+                        height: 1
+                    });
+                },
+
+                /**
+                 * Zooms out a single zoom increment.
+                 */
+                zoomOut: function () {
+                    var translate = nfCanvas.View.translate();
+                    var scale = nfCanvas.View.scale();
+                    var newScale = Math.max(scale / INCREMENT, MIN_SCALE);
+
+                    // get the canvas normalized width and height
+                    var canvasContainer = $('#canvas-container');
+                    var screenWidth = canvasContainer.width() / scale;
+                    var screenHeight = canvasContainer.height() / scale;
+
+                    // adjust the scale
+                    nfCanvas.View.scale(newScale);
+
+                    // center around the center of the screen accounting for the translation accordingly
+                    nfCanvasUtils.centerBoundingBox({
+                        x: (screenWidth / 2) - (translate[0] / scale),
+                        y: (screenHeight / 2) - (translate[1] / scale),
+                        width: 1,
+                        height: 1
+                    });
+                },
+
+                /**
+                 * Zooms to fit the entire graph on the canvas.
+                 */
+                fit: function () {
+                    var translate = nfCanvas.View.translate();
+                    var scale = nfCanvas.View.scale();
+                    var newScale;
+
+                    // get the canvas normalized width and height
+                    var canvasContainer = $('#canvas-container');
+                    var canvasWidth = canvasContainer.width();
+                    var canvasHeight = canvasContainer.height();
+
+                    // get the bounding box for the graph
+                    var graphBox = d3.select('#canvas').node().getBoundingClientRect();
+                    var graphWidth = graphBox.width / scale;
+                    var graphHeight = graphBox.height / scale;
+                    var graphLeft = graphBox.left / scale;
+                    var graphTop = (graphBox.top - nfCanvas.CANVAS_OFFSET) / scale;
+
+
+                    // adjust the scale to ensure the entire graph is visible
+                    if (graphWidth > canvasWidth || graphHeight > canvasHeight) {
+                        newScale = Math.min(canvasWidth / graphWidth, canvasHeight / graphHeight);
+
+                        // ensure the scale is within bounds
+                        newScale = Math.min(Math.max(newScale, MIN_SCALE), MAX_SCALE);
+                    } else {
+                        newScale = 1;
+
+                        // since the entire graph will fit on the canvas, offset origin appropriately
+                        graphLeft -= 100;
+                        graphTop -= 50;
+                    }
+
+                    // set the new scale
+                    nfCanvas.View.scale(newScale);
+
+                    // center as appropriate
+                    nfCanvasUtils.centerBoundingBox({
+                        x: graphLeft - (translate[0] / scale),
+                        y: graphTop - (translate[1] / scale),
+                        width: canvasWidth / newScale,
+                        height: canvasHeight / newScale
+                    });
+                },
+
+                /**
+                 * Zooms to the actual size (1 to 1).
+                 */
+                actualSize: function () {
+                    var translate = nfCanvas.View.translate();
+                    var scale = nfCanvas.View.scale();
+
+                    // get the first selected component
+                    var selection = nfCanvasUtils.getSelection();
+
+                    // set the updated scale
+                    nfCanvas.View.scale(1);
+
+                    // box to zoom towards
+                    var box;
+
+                    // if components have been selected position the view accordingly
+                    if (!selection.empty()) {
+                        // gets the data for the first component
+                        var selectionBox = selection.node().getBoundingClientRect();
+
+                        // get the bounding box for the selected components
+                        box = {
+                            x: (selectionBox.left / scale) - (translate[0] / scale),
+                            y: ((selectionBox.top - nfCanvas.CANVAS_OFFSET) / scale) - (translate[1] / scale),
+                            width: selectionBox.width / scale,
+                            height: selectionBox.height / scale
+                        };
+                    } else {
+                        // get the offset
+                        var canvasContainer = $('#canvas-container');
+
+                        // get the canvas normalized width and height
+                        var screenWidth = canvasContainer.width() / scale;
+                        var screenHeight = canvasContainer.height() / scale;
+
+                        // center around the center of the screen accounting for the translation accordingly
+                        box = {
+                            x: (screenWidth / 2) - (translate[0] / scale),
+                            y: (screenHeight / 2) - (translate[1] / scale),
+                            width: 1,
+                            height: 1
+                        };
+                    }
+
+                    // center as appropriate
+                    nfCanvasUtils.centerBoundingBox(box);
+                },
+
+                /**
+                 * Refreshes the view based on the configured translation and scale.
+                 *
+                 * @param {object} options Options for the refresh operation
+                 */
+                refresh: function (options) {
+                    return $.Deferred(function (deferred) {
+
+                        var persist = true;
+                        var transition = false;
+                        var refreshComponents = true;
+                        var refreshBirdseye = true;
+
+                        // extract the options if specified
+                        if (nfCommon.isDefinedAndNotNull(options)) {
+                            persist = nfCommon.isDefinedAndNotNull(options.persist) ? options.persist : persist;
+                            transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+                            refreshComponents = nfCommon.isDefinedAndNotNull(options.refreshComponents) ? options.refreshComponents : refreshComponents;
+                            refreshBirdseye = nfCommon.isDefinedAndNotNull(options.refreshBirdseye) ? options.refreshBirdseye : refreshBirdseye;
+                        }
+
+                        // update component visibility
+                        if (refreshComponents) {
+                            nfCanvas.View.updateVisibility();
+                        }
+
+                        // persist if appropriate
+                        if (persist === true) {
+                            nfCanvasUtils.persistUserView();
+                        }
+
+                        // update the canvas
+                        if (transition === true) {
+                            canvas.transition()
+                                .duration(500)
+                                .attr('transform', function () {
+                                    return 'translate(' + behavior.translate() + ') scale(' + behavior.scale() + ')';
+                                })
+                                .each('end', function () {
+                                    // refresh birdseye if appropriate
+                                    if (refreshBirdseye === true) {
+                                        nfBirdseye.refresh();
+                                    }
+
+                                    deferred.resolve();
+                                });
+                        } else {
+                            canvas.attr('transform', function () {
+                                return 'translate(' + behavior.translate() + ') scale(' + behavior.scale() + ')';
+                            });
+
+                            // refresh birdseye if appropriate
+                            if (refreshBirdseye === true) {
+                                nfBirdseye.refresh();
+                            }
+
+                            deferred.resolve();
+                        }
+                    }).promise();
+                }
+            };
+        }())
+    };
+
+    return nfCanvas;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-clipboard.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-clipboard.js
new file mode 100644
index 000000000000..c6fdadc78464
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-clipboard.js
@@ -0,0 +1,115 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+/**
+ * Clipboard used for copying and pasting content.
+ */
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common'],
+            function ($, nfCommon) {
+                return (nf.Clipboard = factory($, nfCommon));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Clipboard =
+            factory(require('jquery'),
+                require('nf.Common')));
+    } else {
+        nf.Clipboard = factory(root.$,
+            root.nf.Common);
+    }
+}(this, function ($, nfCommon) {
+    'use strict';
+
+    var COPY = 'copy';
+    var PASTE = 'paste';
+    var data = null;
+    var listeners = {};
+
+    return {
+        /**
+         * Add a listener to receive copy and paste events.
+         *
+         * @argument {object} listener      A clipboard listener
+         * @argument {function} funct       Callback when clipboard events occur
+         */
+        addListener: function (listener, funct) {
+            listeners[listener] = funct;
+        },
+
+        /**
+         * Remove the specified listener.
+         *
+         * @argument {object} listener      A clipboard listener
+         */
+        removeListener: function (listener) {
+            if (nfCommon.isDefinedAndNotNull(listeners[listener])) {
+                delete listeners[listener];
+            }
+        },
+
+        /**
+         * Copy the specified data.
+         *
+         * @argument {object} d      The data to copy to the clipboard
+         */
+        copy: function (d) {
+            data = d;
+
+            // inform the listeners
+            for (var listener in listeners) {
+                listeners[listener].call(listener, COPY, data);
+            }
+        },
+
+        /**
+         * Checks to see if any data has been copied.
+         */
+        isCopied: function () {
+            return nfCommon.isDefinedAndNotNull(data);
+        },
+
+        /**
+         * Gets the most recent data thats copied. This operation
+         * will remove the corresponding data from the clipboard.
+         */
+        paste: function () {
+            return $.Deferred(function (deferred) {
+                // ensure there was data
+                if (nfCommon.isDefinedAndNotNull(data)) {
+                    var clipboardData = data;
+
+                    // resolve the deferred
+                    deferred.resolve(clipboardData);
+
+                    // clear the clipboard
+                    data = null;
+
+                    // inform the listeners
+                    for (var listener in listeners) {
+                        listeners[listener].call(listener, PASTE, clipboardData);
+                    }
+                } else {
+                    deferred.reject();
+                }
+            }).promise();
+        }
+    };
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
new file mode 100644
index 000000000000..50e47bc94cbd
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
@@ -0,0 +1,424 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+    /**
+     * Views state for a given component.
+     */
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.ClusterSummary',
+                  'nf.ErrorHandler',
+                  'nf.Dialog',
+                  'nf.Common'],
+              function ($, Slick, nfClusterSummary, nfErrorHandler, nfDialog, nfCommon) {
+                  return (nf.ComponentState = factory($, Slick, nfClusterSummary, nfErrorHandler, nfDialog, nfCommon));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ComponentState =
+              factory(require('jquery'),
+                  require('Slick'),
+                  require('nf.ClusterSummary'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Dialog'),
+                  require('nf.Common')));
+      } else {
+          nf.ComponentState = factory(root.$,
+              root.Slick,
+              root.nf.ClusterSummary,
+              root.nf.ErrorHandler,
+              root.nf.Dialog,
+              root.nf.Common);
+      }
+  }(this, function ($, Slick, nfClusterSummary, nfErrorHandler, nfDialog, nfCommon) {
+      'use strict';
+    
+        /**
+         * Filters the component state table.
+         */
+        var applyFilter = function () {
+            // get the dataview
+            var componentStateTable = $('#component-state-table').data('gridInstance');
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(componentStateTable)) {
+                var componentStateData = componentStateTable.getData();
+    
+                // update the search criteria
+                componentStateData.setFilterArgs({
+                    searchString: getFilterText()
+                });
+                componentStateData.refresh();
+            }
+        };
+    
+        /**
+         * Determines if the item matches the filter.
+         *
+         * @param {object} item     The item to filter
+         * @param {object} args     The filter criteria
+         * @returns {boolean}       Whether the item matches the filter
+         */
+        var 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;
+            }
+    
+            // determine if the item matches the filter
+            var matchesKey = item['key'].search(filterExp) >= 0;
+            var matchesValue = item['value'].search(filterExp) >= 0;
+    
+            // conditionally consider the scope
+            var matchesScope = false;
+          if (nfCommon.isDefinedAndNotNull(item['scope'])) {
+                matchesScope = item['scope'].search(filterExp) >= 0;
+            }
+    
+            return matchesKey || matchesValue || matchesScope;
+        };
+    
+        /**
+         * Sorts the specified data using the specified sort details.
+         *
+         * @param {object} sortDetails
+         * @param {object} data
+         */
+        var sort = function (sortDetails, data) {
+            // defines a function for sorting
+            var comparer = function (a, b) {
+              var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+              var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                return aString === bString ? 0 : aString > bString ? 1 : -1;
+            };
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+        };
+    
+        /**
+         * Get the text out of the filter field. If the filter field doesn't
+         * have any text it will contain the text 'filter list' so this method
+         * accounts for that.
+         */
+        var getFilterText = function () {
+            return $('#component-state-filter').val();
+        };
+    
+        /**
+         * Clears the component state table.
+         */
+        var clearTable = function () {
+            var componentStateGrid = $('#component-state-table').data('gridInstance');
+            var componentStateData = componentStateGrid.getData();
+            componentStateData.setItems([]);
+    
+            // hide the partial results details message
+            $('#component-state-partial-results-container').hide();
+    
+            // clear the total number entries
+            $('#displayed-component-state-entries').text('0');
+            $('#total-component-state-entries').text('0');
+        };
+    
+        /**
+         * Loads the table with the component state.
+         *
+         * @param {object} componentState
+         */
+        var loadComponentState = function (localState, clusterState) {
+            var count = 0;
+            var totalEntries = 0;
+            var showPartialDetails = false;
+    
+            var componentStateGrid = $('#component-state-table').data('gridInstance');
+            var componentStateData = componentStateGrid.getData();
+    
+            // begin the update
+            componentStateData.beginUpdate();
+    
+            // local state
+          if (nfCommon.isDefinedAndNotNull(localState)) {
+                $.each(localState.state, function (i, stateEntry) {
+                    componentStateData.addItem($.extend({
+                        id: count++,
+                        scope: stateEntry.clusterNodeAddress
+                    }, stateEntry));
+                });
+                totalEntries += localState.totalEntryCount;
+    
+              if (nfCommon.isDefinedAndNotNull(localState.state) && localState.totalEntryCount !== localState.state.length) {
+                    showPartialDetails = true;
+                }
+            }
+    
+          if (nfCommon.isDefinedAndNotNull(clusterState)) {
+                $.each(clusterState.state, function (i, stateEntry) {
+                    componentStateData.addItem($.extend({
+                        id: count++,
+                        scope: 'Cluster'
+                    }, stateEntry));
+                });
+                totalEntries += clusterState.totalEntryCount;
+    
+              if (nfCommon.isDefinedAndNotNull(clusterState.state) && clusterState.totalEntryCount !== clusterState.state.length) {
+                    showPartialDetails = true;
+                }
+            }
+    
+            // complete the update
+            componentStateData.endUpdate();
+            componentStateData.reSort();
+    
+            if (showPartialDetails) {
+                $('#component-state-partial-results-container').show();
+            }
+    
+            // update the total number of state entries
+          $('#total-component-state-entries').text(nfCommon.formatInteger(totalEntries));
+        };
+    
+        /**
+         * Reset the dialog.
+         */
+        var resetDialog = function () {
+            // clear the fields
+            $('#component-state-name').text('');
+            $('#component-state-description').text('');
+    
+            // clear any filter strings
+            $('#component-state-filter').val('');
+    
+            // reset clear link
+            $('#clear-link').removeClass('disabled').attr('title', '');
+    
+            // clear the table
+            clearTable();
+    
+            // clear the component
+            $('#component-state-table').removeData('component');
+        };
+    
+        return {
+            init: function () {
+                // intialize the component state filter
+                $('#component-state-filter').on('keyup', function () {
+                    applyFilter();
+                });
+    
+                // initialize the processor configuration dialog
+                $('#component-state-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                  headerText: nf._.msg('nf-component-state.Header1'),
+                    buttons: [{
+                      buttonText: nf._.msg('nf-component-state.Button1'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                $(this).modal('hide');
+                            }
+                        }
+                    }],
+                    handler: {
+                        close: function () {
+                            resetDialog();
+                      },
+                      resize: function () {
+                          $('#component-state-description')
+                              .width($('#component-state-dialog').find('.dialog-content').innerWidth() - 1)
+                              .text($('#component-state-description').attr('title'))
+                              .ellipsis();
+                        }
+                    }
+                });
+    
+                // clear state link
+                $('#clear-link').on('click', function () {
+                    if ($(this).hasClass('disabled') === false) {
+                        var componentStateTable = $('#component-state-table');
+    
+                        // ensure there is state to clear
+                        var componentStateGrid = componentStateTable.data('gridInstance');
+                        var stateEntryCount = componentStateGrid.getDataLength();
+    
+                        if (stateEntryCount > 0) {
+                            var componentEntity = componentStateTable.data('component');
+                            $.ajax({
+                                type: 'POST',
+                                url: componentEntity.uri + '/state/clear-requests',
+                                dataType: 'json'
+                            }).done(function (response) {
+                                // clear the table
+                                clearTable();
+    
+                                // reload the table with no state
+                                loadComponentState()
+                          }).fail(nfErrorHandler.handleAjaxError);
+                        } else {
+                          nfDialog.showOkDialog({
+                              headerText: nf._.msg('nf-component-state.Header1'),
+                              dialogContent: nf._.msg('nf-component-state.Content1')
+                            });
+                        }
+                    }
+                });
+    
+                // initialize the queue listing table
+                var componentStateColumns = [
+                  {
+                      id: 'key',
+                      field: 'key',
+                      name: nf._.msg('nf-component-state.Key'),
+                      sortable: true,
+                      resizable: true
+                  },
+                  {
+                      id: 'value',
+                      field: 'value',
+                      name: nf._.msg('nf-component-state.Value'),
+                      sortable: true,
+                      resizable: true
+                  }
+                ];
+    
+                // conditionally show the cluster node identifier
+              if (nfClusterSummary.isClustered()) {
+                    componentStateColumns.push({
+                        id: 'scope',
+                        field: 'scope',
+                      name: nf._.msg('nf-component-state.Scope'),
+                        sortable: true,
+                        resizable: true
+                    });
+                }
+    
+                var componentStateOptions = {
+                    forceFitColumns: true,
+                    enableTextSelectionOnCells: true,
+                    enableCellNavigation: false,
+                    enableColumnReorder: false,
+                    autoEdit: false,
+                    rowHeight: 24
+                };
+    
+                // initialize the dataview
+                var componentStateData = new Slick.Data.DataView({
+                    inlineFilters: false
+                });
+                componentStateData.setItems([]);
+                componentStateData.setFilterArgs({
+                    searchString: '',
+                    property: 'key'
+                });
+                componentStateData.setFilter(filter);
+    
+                // initialize the sort
+                sort({
+                    columnId: 'key',
+                    sortAsc: true
+                }, componentStateData);
+    
+                // initialize the grid
+                var componentStateGrid = new Slick.Grid('#component-state-table', componentStateData, componentStateColumns, componentStateOptions);
+                componentStateGrid.setSelectionModel(new Slick.RowSelectionModel());
+                componentStateGrid.registerPlugin(new Slick.AutoTooltips());
+                componentStateGrid.setSortColumn('key', true);
+                componentStateGrid.onSort.subscribe(function (e, args) {
+                    sort({
+                        columnId: args.sortCol.field,
+                        sortAsc: args.sortAsc
+                    }, componentStateData);
+                });
+    
+                // wire up the dataview to the grid
+                componentStateData.onRowCountChanged.subscribe(function (e, args) {
+                    componentStateGrid.updateRowCount();
+                    componentStateGrid.render();
+    
+                    // update the total number of displayed items
+                    $('#displayed-component-state-entries').text(args.current);
+                });
+                componentStateData.onRowsChanged.subscribe(function (e, args) {
+                    componentStateGrid.invalidateRows(args.rows);
+                    componentStateGrid.render();
+                });
+    
+                // hold onto an instance of the grid
+                $('#component-state-table').data('gridInstance', componentStateGrid);
+    
+                // initialize the number of display items
+                $('#displayed-component-state-entries').text('0');
+                $('#total-component-state-entries').text('0');
+            },
+    
+            /**
+             * Shows the state for a given component.
+             *
+             * @param {object} componentEntity
+             * @param {boolean} canClear
+             */
+            showState: function (componentEntity, canClear) {
+                return $.ajax({
+                    type: 'GET',
+                    url: componentEntity.uri + '/state',
+                    dataType: 'json'
+                }).done(function (response) {
+                    var componentState = response.componentState;
+                    var componentStateTable = $('#component-state-table');
+    
+                    // load the table
+                    loadComponentState(componentState.localState, componentState.clusterState);
+    
+                  // show the dialog
+                  $('#component-state-dialog').modal('show');
+  
+                    // populate the name/description
+                    $('#component-state-name').text(componentEntity.component.name);
+                  $('#component-state-description')
+                      .width($('#component-state-dialog').find('.dialog-content').innerWidth() - 1)
+                      .text(componentState.stateDescription)
+                      .ellipsis();
+    
+                    // store the component
+                    componentStateTable.data('component', componentEntity);
+    
+                    // only activate the link when appropriate
+                    if (canClear === false) {
+                      $('#clear-link').addClass('disabled').attr('title', nf._.msg('nf-component-state.Message1'));
+                    }
+    
+                    // reset the grid size
+                    var componentStateGrid = componentStateTable.data('gridInstance');
+                    componentStateGrid.resizeCanvas();
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
new file mode 100644
index 000000000000..91d29f612cdc
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
@@ -0,0 +1,289 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['d3',
+                'nf.Connection',
+                'nf.ConnectionConfiguration',
+                'nf.CanvasUtils'],
+            function (d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils) {
+                return (nf.Connectable = factory(d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Connectable =
+            factory(require('d3'),
+                require('nf.Connection'),
+                require('nf.ConnectionConfiguration'),
+                require('nf.CanvasUtils')));
+    } else {
+        nf.Connectable = factory(root.d3,
+            root.nf.Connection,
+            root.nf.ConnectionConfiguration,
+            root.nf.CanvasUtils);
+    }
+}(this, function (d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils) {
+    'use strict';
+
+    var connect;
+    var canvas;
+    var origin;
+
+    /**
+     * Determines if we want to allow adding connections in the current state:
+     *
+     * 1) When shift is down, we could be adding components to the current selection.
+     * 2) When the selection box is visible, we are in the process of moving all the
+     * components currently selected.
+     * 3) When the drag selection box is visible, we are in the process or selecting components
+     * using the selection box.
+     *
+     * @returns {boolean}
+     */
+    var allowConnection = function () {
+        return !d3.event.shiftKey && d3.select('rect.drag-selection').empty() && d3.select('rect.selection').empty();
+    };
+
+    return {
+        init: function () {
+            canvas = d3.select('#canvas');
+
+            // dragging behavior for the connector
+            connect = d3.behavior.drag()
+                .origin(function (d) {
+                    origin = d3.mouse(canvas.node());
+                    return {
+                        x: origin[0],
+                        y: origin[1]
+                    };
+                })
+                .on('dragstart', function (d) {
+                    // stop further propagation
+                    d3.event.sourceEvent.stopPropagation();
+
+                    // unselect the previous components
+                    nfCanvasUtils.getSelection().classed('selected', false);
+
+                    // mark the source component has selected
+                    var source = d3.select(this.parentNode).classed('selected', true);
+
+                    // mark this component as dragging and selected
+                    d3.select(this).classed('dragging', true);
+
+                    // mark the source of the drag
+                    var sourceData = source.datum();
+
+                    // start the drag line and insert it first to keep it on the bottom
+                    var position = d3.mouse(canvas.node());
+                    canvas.insert('path', ':first-child')
+                        .datum({
+                            'sourceId': sourceData.id,
+                            'sourceWidth': sourceData.dimensions.width,
+                            'x': position[0],
+                            'y': position[1]
+                        })
+                        .attr({
+                            'class': 'connector',
+                            'd': function (pathDatum) {
+                                return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + pathDatum.x + ' ' + pathDatum.y;
+                            }
+                        });
+
+                    // updates the location of the connection img
+                    d3.select(this).attr('transform', function () {
+                        return 'translate(' + position[0] + ', ' + (position[1] + 20) + ')';
+                    });
+
+                    // re-append the image to keep it on top
+                    canvas.node().appendChild(this);
+                })
+                .on('drag', function (d) {
+                    // updates the location of the connection img
+                    d3.select(this).attr('transform', function () {
+                        return 'translate(' + d3.event.x + ', ' + (d3.event.y + 50) + ')';
+                    });
+
+                    // mark node's connectable if supported
+                    var destination = d3.select('g.hover').classed('connectable-destination', function () {
+                        // ensure the mouse has moved at least 10px in any direction, it seems that
+                        // when the drag event is trigger is not consistent between browsers. as a result
+                        // some browser would trigger when the mouse hadn't moved yet which caused
+                        // click and contextmenu events to appear like an attempt to connection the
+                        // component to itself. requiring the mouse to have actually moved before
+                        // checking the eligiblity of the destination addresses the issue
+                        return (Math.abs(origin[0] - d3.event.x) > 10 || Math.abs(origin[1] - d3.event.y) > 10) &&
+                            nfCanvasUtils.isValidConnectionDestination(d3.select(this));
+                    });
+
+                    // update the drag line
+                    d3.select('path.connector').classed('connectable', function () {
+                        if (destination.empty()) {
+                            return false;
+                        }
+
+                        // if there is a potential destination, see if its connectable
+                        return destination.classed('connectable-destination');
+                    }).attr('d', function (pathDatum) {
+                        if (!destination.empty() && destination.classed('connectable-destination')) {
+                            var destinationData = destination.datum();
+
+                            // show the line preview as appropriate
+                            if (pathDatum.sourceId === destinationData.id) {
+                                var x = pathDatum.x;
+                                var y = pathDatum.y;
+                                var componentOffset = pathDatum.sourceWidth / 2;
+                                var xOffset = nfConnection.config.selfLoopXOffset;
+                                var yOffset = nfConnection.config.selfLoopYOffset;
+                                return 'M' + x + ' ' + y + 'L' + (x + componentOffset + xOffset) + ' ' + (y - yOffset) + 'L' + (x + componentOffset + xOffset) + ' ' + (y + yOffset) + 'Z';
+                            } else {
+                                // get the position on the destination perimeter
+                                var end = nfCanvasUtils.getPerimeterPoint(pathDatum, {
+                                    'x': destinationData.position.x,
+                                    'y': destinationData.position.y,
+                                    'width': destinationData.dimensions.width,
+                                    'height': destinationData.dimensions.height
+                                });
+
+                                // direct line between components to provide a 'snap feel'
+                                return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + end.x + ' ' + end.y;
+                            }
+                        } else {
+                            return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + d3.event.x + ' ' + d3.event.y;
+                        }
+                    });
+                })
+                .on('dragend', function (d) {
+                    // stop further propagation
+                    d3.event.sourceEvent.stopPropagation();
+
+                    // get the add connect img
+                    var addConnect = d3.select(this);
+
+                    // get the connector, if it the current point is not over a new destination
+                    // the connector will be removed. otherwise it will be removed after the
+                    // connection has been configured/cancelled
+                    var connector = d3.select('path.connector');
+                    var connectorData = connector.datum();
+
+                    // get the destination
+                    var destination = d3.select('g.connectable-destination');
+
+                    // we are not over a new destination
+                    if (destination.empty()) {
+                        // get the source to determine if we are still over it
+                        var source = d3.select('#id-' + connectorData.sourceId);
+                        var sourceData = source.datum();
+
+                        // get the mouse position relative to the source
+                        var position = d3.mouse(source.node());
+
+                        // if the position is outside the component, remove the add connect img
+                        if (position[0] < 0 || position[0] > sourceData.dimensions.width || position[1] < 0 || position[1] > sourceData.dimensions.height) {
+                            addConnect.remove();
+                        } else {
+                            // reset the add connect img by restoring the position and place in the DOM
+                            addConnect.classed('dragging', false).attr('transform', function () {
+                                return 'translate(' + d.origX + ', ' + d.origY + ')';
+                            });
+                            source.node().appendChild(this);
+                        }
+
+                        // remove the connector
+                        connector.remove();
+                    } else {
+                        // remove the add connect img
+                        addConnect.remove();
+
+                        // create the connection
+                        var destinationData = destination.datum();
+                        nfConnectionConfiguration.createConnection(connectorData.sourceId, destinationData.id);
+                    }
+                });
+        },
+
+        /**
+         * Activates the connect behavior for the components in the specified selection.
+         *
+         * @param {selection} components
+         */
+        activate: function (components) {
+            components
+                .classed('connectable', true)
+                .on('mouseenter.connectable', function (d) {
+                    if (allowConnection()) {
+                        var selection = d3.select(this);
+
+                        // ensure the current component supports connection source
+                        if (nfCanvasUtils.isValidConnectionSource(selection)) {
+                            // see if theres already a connector rendered
+                            var addConnect = d3.select('text.add-connect');
+                            if (addConnect.empty()) {
+                                var x = (d.dimensions.width / 2) - 14;
+                                var y = (d.dimensions.height / 2) + 14;
+
+                                selection.append('text')
+                                    .datum({
+                                        origX: x,
+                                        origY: y
+                                    })
+                                    .call(connect)
+                                    .attr({
+                                        'class': 'add-connect',
+                                        'transform': 'translate(' + x + ', ' + y + ')'
+                                    })
+                                    .text('\ue834');
+                            }
+                        }
+                    }
+                })
+                .on('mouseleave.connectable', function () {
+                    // conditionally remove the connector
+                    var addConnect = d3.select(this).select('text.add-connect');
+                    if (!addConnect.empty() && !addConnect.classed('dragging')) {
+                        addConnect.remove();
+                    }
+                })
+                // Using mouseover/out to workaround chrome issue #122746
+                .on('mouseover.connectable', function () {
+                    // mark that we are hovering when appropriate
+                    d3.select(this).classed('hover', function () {
+                        return allowConnection();
+                    });
+                })
+                .on('mouseout.connection', function () {
+                    // remove all hover related classes
+                    d3.select(this).classed('hover connectable-destination', false);
+                });
+        },
+
+        /**
+         * Deactivates the connect behavior for the components in the specified selection.
+         *
+         * @param {selection} components
+         */
+        deactivate: function (components) {
+            components
+                .classed('connectable', false)
+                .on('mouseenter.connectable', null)
+                .on('mouseleave.connectable', null)
+                .on('mouseover.connectable', null)
+                .on('mouseout.connectable', null);
+        }
+    };
+}));
\ 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
new file mode 100644
index 000000000000..148290a9a16b
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
@@ -0,0 +1,1472 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.Connection'],
+              function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfConnection) {
+                  return (nf.ConnectionConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfConnection));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ConnectionConfiguration =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.Connection')));
+      } else {
+          nf.ConnectionConfiguration = factory(root.$,
+              root.d3,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.Connection);
+      }
+  }(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfConnection) {
+      'use strict';
+  
+      var nfBirdseye;
+      var nfGraph;
+    
+        var CONNECTION_OFFSET_Y_INCREMENT = 75;
+        var CONNECTION_OFFSET_X_INCREMENT = 200;
+    
+        var config = {
+            urls: {
+                api: '../nifi-api',
+                prioritizers: '../nifi-api/flow/prioritizers'
+            }
+        };
+    
+        /**
+         * Removes the temporary if necessary.
+         */
+        var removeTempEdge = function () {
+            d3.select('path.connector').remove();
+        };
+    
+        /**
+         * Initializes the source in the new connection dialog.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceNewConnectionDialog = function (source) {
+            // handle the selected source
+          if (nfCanvasUtils.isProcessor(source)) {
+                return $.Deferred(function (deferred) {
+                    // initialize the source processor
+                    initializeSourceProcessor(source).done(function (processor) {
+                      if (!nfCommon.isEmpty(processor.relationships)) {
+                            // populate the available connections
+                            $.each(processor.relationships, function (i, relationship) {
+                                createRelationshipOption(relationship.name);
+                            });
+    
+                            // if there is a single relationship auto select
+                            var relationships = $('#relationship-names').children('div');
+                            if (relationships.length === 1) {
+                                relationships.children('div.available-relationship').removeClass('checkbox-unchecked').addClass('checkbox-checked');
+                            }
+    
+                            // configure the button model
+                            $('#connection-configuration').modal('setButtonModel', [{
+                              buttonText: nf._.msg('nf-connection-configuration.Add'),
+                                color: {
+                                    base: '#728E9B',
+                                    hover: '#004849',
+                                    text: '#ffffff'
+                                },
+                                handler: {
+                                    click: function () {
+                                        // get the selected relationships
+                                        var selectedRelationships = getSelectedRelationships();
+    
+                                        // ensure some relationships were selected
+                                        if (selectedRelationships.length > 0) {
+                                            addConnection(selectedRelationships);
+                                        } else {
+                                            // inform users that no relationships were selected
+                                          nfDialog.showOkDialog({
+                                              headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                                              dialogContent: nf._.msg('nf-connection-configuration.Message0')
+                                            });
+                                        }
+    
+                                        // close the dialog
+                                        $('#connection-configuration').modal('hide');
+                                    }
+                                }
+                            },
+                                {
+                                  buttonText: nf._.msg('nf-connection-configuration.Cancel'),
+                                    color: {
+                                        base: '#E3E8EB',
+                                        hover: '#C7D2D7',
+                                        text: '#004849'
+                                    },
+                                    handler: {
+                                        click: function () {
+                                            $('#connection-configuration').modal('hide');
+                                        }
+                                    }
+                                }]);
+    
+                            // resolve the deferred
+                            deferred.resolve();
+                        } else {
+                            // there are no relationships for this processor
+                          nfDialog.showOkDialog({
+                              headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                              dialogContent: '\'' + nfCommon.escapeHtml(processor.name) + nf._.msg('nf-connection-configuration.Message1')
+                            });
+    
+                            // reset the dialog
+                            resetDialog();
+    
+                            deferred.reject();
+                        }
+                    }).fail(function () {
+                        deferred.reject();
+                    });
+                }).promise();
+            } else {
+                return $.Deferred(function (deferred) {
+                    // determine how to initialize the source
+                    var connectionSourceDeferred;
+                  if (nfCanvasUtils.isInputPort(source)) {
+                        connectionSourceDeferred = initializeSourceInputPort(source);
+                  } else if (nfCanvasUtils.isRemoteProcessGroup(source)) {
+                        connectionSourceDeferred = initializeSourceRemoteProcessGroup(source);
+                  } else if (nfCanvasUtils.isProcessGroup(source)) {
+                        connectionSourceDeferred = initializeSourceProcessGroup(source);
+                    } else {
+                        connectionSourceDeferred = initializeSourceFunnel(source);
+                    }
+    
+                    // finish initialization when appropriate
+                    connectionSourceDeferred.done(function () {
+                        // configure the button model
+                        $('#connection-configuration').modal('setButtonModel', [{
+                          buttonText: nf._.msg('nf-connection-configuration.Add'),
+                            color: {
+                                base: '#728E9B',
+                                hover: '#004849',
+                                text: '#ffffff'
+                            },
+                            handler: {
+                                click: function () {
+                                    // add the connection
+                                    addConnection();
+    
+                                    // close the dialog
+                                    $('#connection-configuration').modal('hide');
+                                }
+                            }
+                        },
+                            {
+                              buttonText: nf._.msg('nf-connection-configuration.Cancel'),
+                                color: {
+                                    base: '#E3E8EB',
+                                    hover: '#C7D2D7',
+                                    text: '#004849'
+                                },
+                                handler: {
+                                    click: function () {
+                                        $('#connection-configuration').modal('hide');
+                                    }
+                                }
+                            }]);
+    
+                        deferred.resolve();
+                    }).fail(function () {
+                        deferred.reject();
+                    });
+                }).promise();
+            }
+        };
+    
+        /**
+         * Initializes the source when the source is an input port.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceInputPort = function (source) {
+            return $.Deferred(function (deferred) {
+                // get the input port data
+                var inputPortData = source.datum();
+                var inputPortName = inputPortData.permissions.canRead ? inputPortData.component.name : inputPortData.id;
+    
+                // populate the port information
+                $('#input-port-source').show();
+              $('#input-port-source-name').text(inputPortName).attr('title', inputPortName);
+    
+                // populate the connection source details
+                $('#connection-source-id').val(inputPortData.id);
+                $('#connection-source-component-id').val(inputPortData.id);
+    
+                // populate the group details
+              $('#connection-source-group-id').val(nfCanvasUtils.getGroupId());
+              $('#connection-source-group-name').text(nfCanvasUtils.getGroupName());
+    
+                // resolve the deferred
+                deferred.resolve();
+            }).promise();
+        };
+    
+        /**
+         * Initializes the source when the source is an input port.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceFunnel = function (source) {
+            return $.Deferred(function (deferred) {
+                // get the funnel data
+                var funnelData = source.datum();
+    
+                // populate the port information
+                $('#funnel-source').show();
+    
+                // populate the connection source details
+                $('#connection-source-id').val(funnelData.id);
+                $('#connection-source-component-id').val(funnelData.id);
+    
+                // populate the group details
+              $('#connection-source-group-id').val(nfCanvasUtils.getGroupId());
+              $('#connection-source-group-name').text(nfCanvasUtils.getGroupName());
+    
+                // resolve the deferred
+                deferred.resolve();
+            }).promise();
+        };
+    
+        /**
+         * Initializes the source when the source is a processor.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceProcessor = function (source) {
+            return $.Deferred(function (deferred) {
+                // get the processor data
+                var processorData = source.datum();
+                var processorName = processorData.permissions.canRead ? processorData.component.name : processorData.id;
+              var processorType = processorData.permissions.canRead ? nfCommon.substringAfterLast(processorData.component.type, '.') : 'Processor';
+    
+                // populate the source processor information
+                $('#processor-source').show();
+              $('#processor-source-name').text(processorName).attr('title', processorName);
+              $('#processor-source-type').text(processorType).attr('title', processorType);
+    
+                // populate the connection source details
+                $('#connection-source-id').val(processorData.id);
+                $('#connection-source-component-id').val(processorData.id);
+    
+                // populate the group details
+              $('#connection-source-group-id').val(nfCanvasUtils.getGroupId());
+              $('#connection-source-group-name').text(nfCanvasUtils.getGroupName());
+    
+                // show the available relationships
+                $('#relationship-names-container').show();
+    
+                deferred.resolve(processorData.component);
+            });
+        };
+    
+        /**
+         * Initializes the source when the source is a process group.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceProcessGroup = function (source) {
+            return $.Deferred(function (deferred) {
+                // get the process group data
+                var processGroupData = source.datum();
+    
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupData.id),
+                    dataType: 'json'
+                }).done(function (response) {
+                    var processGroup = response.processGroupFlow;
+                    var processGroupName = response.permissions.canRead ? processGroup.breadcrumb.breadcrumb.name : processGroup.id;
+                    var processGroupContents = processGroup.flow;
+    
+                    // show the output port options
+                    var options = [];
+                    $.each(processGroupContents.outputPorts, function (i, outputPort) {
+                        // require explicit access to the output port as it's the source of the connection
+                        if (outputPort.permissions.canRead && outputPort.permissions.canWrite) {
+                            var component = outputPort.component;
+                            options.push({
+                                text: component.name,
+                                value: component.id,
+                              description: nfCommon.escapeHtml(component.comments)
+                            });
+                        }
+                    });
+    
+                    // only proceed if there are output ports
+                  if (!nfCommon.isEmpty(options)) {
+                        $('#output-port-source').show();
+    
+                        // sort the options
+                        options.sort(function (a, b) {
+                            return a.text.localeCompare(b.text);
+                        });
+    
+                        // create the combo
+                        $('#output-port-options').combo({
+                            options: options,
+                            maxHeight: 300,
+                            select: function (option) {
+                                $('#connection-source-id').val(option.value);
+                            }
+                        });
+    
+                        // populate the connection details
+                        $('#connection-source-component-id').val(processGroup.id);
+    
+                        // populate the group details
+                        $('#connection-source-group-id').val(processGroup.id);
+                        $('#connection-source-group-name').text(processGroupName);
+    
+                        deferred.resolve();
+                    } else {
+                      var message = '\'' + nfCommon.escapeHtml(processGroupName) + nf._.msg('nf-connection-configuration.Message2');
+                      if (nfCommon.isEmpty(processGroupContents.outputPorts) === false) {
+                          message = nf._.msg('nf-connection-configuration.Message5') + nf.Common.escapeHtml(processGroupName) + '\'.';
+                        }
+    
+                        // there are no output ports for this process group
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                            dialogContent: message
+                        });
+    
+                        // reset the dialog
+                        resetDialog();
+    
+                        deferred.reject();
+                    }
+                }).fail(function (xhr, status, error) {
+                    // handle the error
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+    
+                    deferred.reject();
+                });
+            }).promise();
+        };
+    
+        /**
+         * Initializes the source when the source is a remote process group.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceRemoteProcessGroup = function (source) {
+            return $.Deferred(function (deferred) {
+                // get the remote process group data
+                var remoteProcessGroupData = source.datum();
+    
+                $.ajax({
+                    type: 'GET',
+                    url: remoteProcessGroupData.uri,
+                    dataType: 'json'
+                }).done(function (response) {
+                    var remoteProcessGroup = response.component;
+                    var remoteProcessGroupContents = remoteProcessGroup.contents;
+    
+                    // only proceed if there are output ports
+                  if (!nfCommon.isEmpty(remoteProcessGroupContents.outputPorts)) {
+                        $('#output-port-source').show();
+    
+                        // show the output port options
+                        var options = [];
+                        $.each(remoteProcessGroupContents.outputPorts, function (i, outputPort) {
+                            options.push({
+                                text: outputPort.name,
+                                value: outputPort.id,
+                                disabled: outputPort.exists === false,
+                              description: nfCommon.escapeHtml(outputPort.comments)
+                            });
+                        });
+    
+                        // sort the options
+                        options.sort(function (a, b) {
+                            return a.text.localeCompare(b.text);
+                        });
+    
+                        // create the combo
+                        $('#output-port-options').combo({
+                            options: options,
+                            maxHeight: 300,
+                            select: function (option) {
+                                $('#connection-source-id').val(option.value);
+                            }
+                        });
+    
+                        // populate the connection details
+                        $('#connection-source-component-id').val(remoteProcessGroup.id);
+    
+                        // populate the group details
+                        $('#connection-source-group-id').val(remoteProcessGroup.id);
+                        $('#connection-source-group-name').text(remoteProcessGroup.name);
+    
+                        deferred.resolve();
+                    } else {
+                        // there are no relationships for this processor
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                          dialogContent: '\'' + nfCommon.escapeHtml(remoteProcessGroup.name) + nf._.msg('nf-connection-configuration.Message2')
+                        });
+    
+                        // reset the dialog
+                        resetDialog();
+    
+                        deferred.reject();
+                    }
+                }).fail(function (xhr, status, error) {
+                    // handle the error
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+    
+                    deferred.reject();
+                });
+            }).promise();
+        };
+    
+        var initializeDestinationNewConnectionDialog = function (destination) {
+          if (nfCanvasUtils.isOutputPort(destination)) {
+                return initializeDestinationOutputPort(destination);
+          } else if (nfCanvasUtils.isProcessor(destination)) {
+                return initializeDestinationProcessor(destination);
+          } else if (nfCanvasUtils.isRemoteProcessGroup(destination)) {
+                return initializeDestinationRemoteProcessGroup(destination);
+          } else if (nfCanvasUtils.isFunnel(destination)) {
+                return initializeDestinationFunnel(destination);
+            } else {
+                return initializeDestinationProcessGroup(destination);
+            }
+        };
+    
+        var initializeDestinationOutputPort = function (destination) {
+            return $.Deferred(function (deferred) {
+                var outputPortData = destination.datum();
+                var outputPortName = outputPortData.permissions.canRead ? outputPortData.component.name : outputPortData.id;
+    
+                $('#output-port-destination').show();
+              $('#output-port-destination-name').text(outputPortName).attr('title', outputPortName);
+    
+                // populate the connection destination details
+                $('#connection-destination-id').val(outputPortData.id);
+                $('#connection-destination-component-id').val(outputPortData.id);
+    
+                // populate the group details
+              $('#connection-destination-group-id').val(nfCanvasUtils.getGroupId());
+              $('#connection-destination-group-name').text(nfCanvasUtils.getGroupName());
+    
+                deferred.resolve();
+            }).promise();
+        };
+    
+        var initializeDestinationFunnel = function (destination) {
+            return $.Deferred(function (deferred) {
+                var funnelData = destination.datum();
+    
+                $('#funnel-destination').show();
+    
+                // populate the connection destination details
+                $('#connection-destination-id').val(funnelData.id);
+                $('#connection-destination-component-id').val(funnelData.id);
+    
+                // populate the group details
+              $('#connection-destination-group-id').val(nfCanvasUtils.getGroupId());
+              $('#connection-destination-group-name').text(nfCanvasUtils.getGroupName());
+    
+                deferred.resolve();
+            }).promise();
+        };
+    
+        var initializeDestinationProcessor = function (destination) {
+            return $.Deferred(function (deferred) {
+                var processorData = destination.datum();
+                var processorName = processorData.permissions.canRead ? processorData.component.name : processorData.id;
+              var processorType = processorData.permissions.canRead ? nfCommon.substringAfterLast(processorData.component.type, '.') : 'Processor';
+    
+                $('#processor-destination').show();
+              $('#processor-destination-name').text(processorName).attr('title', processorName);
+              $('#processor-destination-type').text(processorType).attr('title', processorType);
+    
+                // populate the connection destination details
+                $('#connection-destination-id').val(processorData.id);
+                $('#connection-destination-component-id').val(processorData.id);
+    
+                // populate the group details
+              $('#connection-destination-group-id').val(nfCanvasUtils.getGroupId());
+              $('#connection-destination-group-name').text(nfCanvasUtils.getGroupName());
+    
+                deferred.resolve();
+            }).promise();
+        };
+    
+        /**
+         * Initializes the destination when the destination is a process group.
+         *
+         * @argument {selection} destination        The destination
+         */
+        var initializeDestinationProcessGroup = function (destination) {
+            return $.Deferred(function (deferred) {
+                var processGroupData = destination.datum();
+    
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupData.id),
+                    dataType: 'json'
+                }).done(function (response) {
+                    var processGroup = response.processGroupFlow;
+                    var processGroupName = response.permissions.canRead ? processGroup.breadcrumb.breadcrumb.name : processGroup.id;
+                    var processGroupContents = processGroup.flow;
+    
+                    // show the input port options
+                    var options = [];
+                    $.each(processGroupContents.inputPorts, function (i, inputPort) {
+                        options.push({
+                            text: inputPort.permissions.canRead ? inputPort.component.name : inputPort.id,
+                            value: inputPort.id,
+                          description: inputPort.permissions.canRead ? nfCommon.escapeHtml(inputPort.component.comments) : null
+                        });
+                    });
+    
+                    // only proceed if there are output ports
+                  if (!nfCommon.isEmpty(options)) {
+                        $('#input-port-destination').show();
+    
+                        // sort the options
+                        options.sort(function (a, b) {
+                            return a.text.localeCompare(b.text);
+                        });
+    
+                        // create the combo
+                        $('#input-port-options').combo({
+                            options: options,
+                            maxHeight: 300,
+                            select: function (option) {
+                                $('#connection-destination-id').val(option.value);
+                            }
+                        });
+    
+                        // populate the connection details
+                        $('#connection-destination-component-id').val(processGroup.id);
+    
+                        // populate the group details
+                        $('#connection-destination-group-id').val(processGroup.id);
+                        $('#connection-destination-group-name').text(processGroupName);
+    
+                        deferred.resolve();
+                    } else {
+                        // there are no relationships for this processor
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                          dialogContent: '\'' + nfCommon.escapeHtml(processGroupName) + nf._.msg('nf-connection-configuration.Message4')
+                        });
+    
+                        // reset the dialog
+                        resetDialog();
+    
+                        deferred.reject();
+                    }
+                }).fail(function (xhr, status, error) {
+                    // handle the error
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+    
+                    deferred.reject();
+                });
+            }).promise();
+        };
+    
+        /**
+         * Initializes the source when the source is a remote process group.
+         *
+         * @argument {selection} destination        The destination
+         * @argument {object} connectionDestination The connection destination object
+         */
+        var initializeDestinationRemoteProcessGroup = function (destination, connectionDestination) {
+            return $.Deferred(function (deferred) {
+                var remoteProcessGroupData = destination.datum();
+    
+                $.ajax({
+                    type: 'GET',
+                    url: remoteProcessGroupData.uri,
+                    dataType: 'json'
+                }).done(function (response) {
+                    var remoteProcessGroup = response.component;
+                    var remoteProcessGroupContents = remoteProcessGroup.contents;
+    
+                    // only proceed if there are output ports
+                  if (!nfCommon.isEmpty(remoteProcessGroupContents.inputPorts)) {
+                        $('#input-port-destination').show();
+    
+                        // show the input port options
+                        var options = [];
+                        $.each(remoteProcessGroupContents.inputPorts, function (i, inputPort) {
+                            options.push({
+                                text: inputPort.name,
+                                value: inputPort.id,
+                                disabled: inputPort.exists === false,
+                              description: nfCommon.escapeHtml(inputPort.comments)
+                            });
+                        });
+    
+                        // sort the options
+                        options.sort(function (a, b) {
+                            return a.text.localeCompare(b.text);
+                        });
+    
+                        // create the combo
+                        $('#input-port-options').combo({
+                            options: options,
+                            maxHeight: 300,
+                            select: function (option) {
+                                $('#connection-destination-id').val(option.value);
+                            }
+                        });
+    
+                        // populate the connection details
+                        $('#connection-destination-component-id').val(remoteProcessGroup.id);
+    
+                        // populate the group details
+                        $('#connection-destination-group-id').val(remoteProcessGroup.id);
+                        $('#connection-destination-group-name').text(remoteProcessGroup.name);
+    
+                        deferred.resolve();
+                    } else {
+                        // there are no relationships for this processor
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-connection-configuration.ConfigureConnection'),
+                          dialogContent: '\'' + nfCommon.escapeHtml(remoteProcessGroup.name) + nf._.msg('nf-connection-configuration.Message4')
+                        });
+    
+                        // reset the dialog
+                        resetDialog();
+    
+                        deferred.reject();
+                    }
+                }).fail(function (xhr, status, error) {
+                    // handle the error
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+    
+                    deferred.reject();
+                });
+            }).promise();
+        };
+    
+        /**
+         * Initializes the source panel for groups.
+         *
+         * @argument {selection} source    The source of the connection
+         */
+        var initializeSourceReadOnlyGroup = function (source) {
+            return $.Deferred(function (deferred) {
+                var sourceData = source.datum();
+                var sourceName = sourceData.permissions.canRead ? sourceData.component.name : sourceData.id;
+    
+                // populate the port information
+                $('#read-only-output-port-source').show();
+    
+                // populate the component information
+                $('#connection-source-component-id').val(sourceData.id);
+    
+                // populate the group details
+                $('#connection-source-group-id').val(sourceData.id);
+                $('#connection-source-group-name').text(sourceName);
+    
+                // resolve the deferred
+                deferred.resolve();
+            }).promise();
+        };
+    
+        /**
+         * Initializes the source in the existing connection dialog.
+         *
+         * @argument {selection} source        The source
+         */
+        var initializeSourceEditConnectionDialog = function (source) {
+          if (nfCanvasUtils.isProcessor(source)) {
+                return initializeSourceProcessor(source);
+          } else if (nfCanvasUtils.isInputPort(source)) {
+                return initializeSourceInputPort(source);
+          } else if (nfCanvasUtils.isFunnel(source)) {
+                return initializeSourceFunnel(source);
+            } else {
+                return initializeSourceReadOnlyGroup(source);
+            }
+        };
+    
+        /**
+         * Initializes the destination in the existing connection dialog.
+         *
+         * @argument {selection} destination        The destination
+         * @argument {object} connectionDestination The connection destination object
+         */
+        var initializeDestinationEditConnectionDialog = function (destination, connectionDestination) {
+          if (nfCanvasUtils.isProcessor(destination)) {
+                return initializeDestinationProcessor(destination);
+          } else if (nfCanvasUtils.isOutputPort(destination)) {
+                return initializeDestinationOutputPort(destination);
+          } else if (nfCanvasUtils.isRemoteProcessGroup(destination)) {
+                return initializeDestinationRemoteProcessGroup(destination, connectionDestination);
+          } else if (nfCanvasUtils.isFunnel(destination)) {
+                return initializeDestinationFunnel(destination);
+            } else {
+                return initializeDestinationProcessGroup(destination);
+            }
+        };
+    
+        /**
+         * Creates an option for the specified relationship name.
+         *
+         * @argument {string} name      The relationship name
+         */
+        var createRelationshipOption = function (name) {
+          var relationshipLabel = $('<div class="relationship-name nf-checkbox-label ellipsis"></div>').text(name);
+            var relationshipValue = $('<span class="relationship-name-value hidden"></span>').text(name);
+            return $('<div class="available-relationship-container"><div class="available-relationship nf-checkbox checkbox-unchecked"></div>' +
+                '</div>').append(relationshipLabel).append(relationshipValue).appendTo('#relationship-names');
+        };
+    
+        /**
+         * Adds a new connection.
+         *
+         * @argument {array} selectedRelationships      The selected relationships
+         */
+        var addConnection = function (selectedRelationships) {
+            // get the connection details
+            var sourceId = $('#connection-source-id').val();
+            var destinationId = $('#connection-destination-id').val();
+    
+            // get the selection components
+            var sourceComponentId = $('#connection-source-component-id').val();
+            var source = d3.select('#id-' + sourceComponentId);
+            var destinationComponentId = $('#connection-destination-component-id').val();
+            var destination = d3.select('#id-' + destinationComponentId);
+    
+            // get the source/destination data
+            var sourceData = source.datum();
+            var destinationData = destination.datum();
+    
+            // add bend points if we're dealing with a self loop
+            var bends = [];
+            if (sourceComponentId === destinationComponentId) {
+                var rightCenter = {
+                    x: sourceData.position.x + (sourceData.dimensions.width),
+                    y: sourceData.position.y + (sourceData.dimensions.height / 2)
+                };
+    
+              var xOffset = nfConnection.config.selfLoopXOffset;
+              var yOffset = nfConnection.config.selfLoopYOffset;
+                bends.push({
+                    'x': (rightCenter.x + xOffset),
+                    'y': (rightCenter.y - yOffset)
+                });
+                bends.push({
+                    'x': (rightCenter.x + xOffset),
+                    'y': (rightCenter.y + yOffset)
+                });
+            } else {
+                var existingConnections = [];
+    
+                // get all connections for the source component
+              var connectionsForSourceComponent = nfConnection.getComponentConnections(sourceComponentId);
+                $.each(connectionsForSourceComponent, function (_, connectionForSourceComponent) {
+                    // get the id for the source/destination component
+                  var connectionSourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connectionForSourceComponent);
+                  var connectionDestinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connectionForSourceComponent);
+    
+                    // if the connection is between these same components, consider it for collisions
+                    if ((connectionSourceComponentId === sourceComponentId && connectionDestinationComponentId === destinationComponentId) ||
+                        (connectionDestinationComponentId === sourceComponentId && connectionSourceComponentId === destinationComponentId)) {
+    
+                        // record all connections between these two components in question
+                        existingConnections.push(connectionForSourceComponent);
+                    }
+                });
+    
+                // if there are existing connections between these components, ensure the new connection won't collide
+                if (existingConnections.length > 0) {
+                    var avoidCollision = false;
+                    $.each(existingConnections, function (_, existingConnection) {
+                        // only consider multiple connections with no bend points a collision, the existance of 
+                        // bend points suggests that the user has placed the connection into a desired location
+                      if (nfCommon.isEmpty(existingConnection.bends)) {
+                            avoidCollision = true;
+                            return false;
+                        }
+                    });
+    
+                    // if we need to avoid a collision
+                    if (avoidCollision === true) {
+                        // determine the middle of the source/destination components
+                        var sourceMiddle = [sourceData.position.x + (sourceData.dimensions.width / 2), sourceData.position.y + (sourceData.dimensions.height / 2)];
+                        var destinationMiddle = [destinationData.position.x + (destinationData.dimensions.width / 2), destinationData.position.y + (destinationData.dimensions.height / 2)];
+    
+                        // detect if the line is more horizontal or vertical
+                        var slope = ((sourceMiddle[1] - destinationMiddle[1]) / (sourceMiddle[0] - destinationMiddle[0]));
+                        var isMoreHorizontal = slope <= 1 && slope >= -1;
+    
+                        // determines if the specified coordinate collides with another connection
+                        var collides = function (x, y) {
+                            var collides = false;
+                            $.each(existingConnections, function (_, existingConnection) {
+                              if (!nfCommon.isEmpty(existingConnection.bends)) {
+                                    if (isMoreHorizontal) {
+                                        // horizontal lines are adjusted in the y space
+                                        if (existingConnection.bends[0].y === y) {
+                                            collides = true;
+                                            return false;
+                                        }
+                                    } else {
+                                        // vertical lines are adjusted in the x space
+                                        if (existingConnection.bends[0].x === x) {
+                                            collides = true;
+                                            return false;
+                                        }
+                                    }
+                                }
+                            });
+                            return collides;
+                        };
+    
+                        // find the mid point on the connection
+                        var xCandidate = (sourceMiddle[0] + destinationMiddle[0]) / 2;
+                        var yCandidate = (sourceMiddle[1] + destinationMiddle[1]) / 2;
+    
+                        // attempt to position this connection so it doesn't collide
+                        var xStep = isMoreHorizontal ? 0 : CONNECTION_OFFSET_X_INCREMENT;
+                        var yStep = isMoreHorizontal ? CONNECTION_OFFSET_Y_INCREMENT : 0;
+                        var positioned = false;
+                        while (positioned === false) {
+                            // consider above and below, then increment and try again (if necessary)
+                            if (collides(xCandidate - xStep, yCandidate - yStep) === false) {
+                                bends.push({
+                                    'x': (xCandidate - xStep),
+                                    'y': (yCandidate - yStep)
+                                });
+                                positioned = true;
+                            } else if (collides(xCandidate + xStep, yCandidate + yStep) === false) {
+                                bends.push({
+                                    'x': (xCandidate + xStep),
+                                    'y': (yCandidate + yStep)
+                                });
+                                positioned = true;
+                            }
+    
+                            if (isMoreHorizontal) {
+                                yStep += CONNECTION_OFFSET_Y_INCREMENT;
+                            } else {
+                                xStep += CONNECTION_OFFSET_X_INCREMENT;
+                            }
+                        }
+                    }
+                }
+            }
+    
+            // determine the source group id
+            var sourceGroupId = $('#connection-source-group-id').val();
+            var destinationGroupId = $('#connection-destination-group-id').val();
+    
+            // determine the source and destination types
+          var sourceType = nfCanvasUtils.getConnectableTypeForSource(source);
+          var destinationType = nfCanvasUtils.getConnectableTypeForDestination(destination);
+    
+            // get the settings
+            var connectionName = $('#connection-name').val();
+            var flowFileExpiration = $('#flow-file-expiration').val();
+            var backPressureObjectThreshold = $('#back-pressure-object-threshold').val();
+            var backPressureDataSizeThreshold = $('#back-pressure-data-size-threshold').val();
+            var prioritizers = $('#prioritizer-selected').sortable('toArray');
+    
+            if (validateSettings()) {
+                var connectionEntity = {
+                  'revision': nfClient.getRevision({
+                        'revision': {
+                            'version': 0
+                        }
+                    }),
+                    'component': {
+                        'name': connectionName,
+                        'source': {
+                            'id': sourceId,
+                            'groupId': sourceGroupId,
+                            'type': sourceType
+                        },
+                        'destination': {
+                            'id': destinationId,
+                            'groupId': destinationGroupId,
+                            'type': destinationType
+                        },
+                        'selectedRelationships': selectedRelationships,
+                        'flowFileExpiration': flowFileExpiration,
+                        'backPressureDataSizeThreshold': backPressureDataSizeThreshold,
+                        'backPressureObjectThreshold': backPressureObjectThreshold,
+                        'bends': bends,
+                        'prioritizers': prioritizers
+                    }
+                };
+    
+                // create the new connection
+                $.ajax({
+                    type: 'POST',
+                  url: config.urls.api + '/process-groups/' + encodeURIComponent(nfCanvasUtils.getGroupId()) + '/connections',
+                    data: JSON.stringify(connectionEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // add the connection
+                  nfGraph.add({
+                        'connections': [response]
+                    }, {
+                        'selectAll': true
+                    });
+    
+                    // reload the connections source/destination components
+                  nfCanvasUtils.reloadConnectionSourceAndDestination(sourceComponentId, destinationComponentId);
+    
+                    // update component visibility
+                  nfGraph.updateVisibility();
+    
+                    // update the birdseye
+                  nfBirdseye.refresh();
+                }).fail(function (xhr, status, error) {
+                    // handle the error
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+                });
+            }
+        };
+    
+        /**
+         * Updates an existing connection.
+         *
+         * @argument {array} selectedRelationships          The selected relationships
+         */
+        var updateConnection = function (selectedRelationships) {
+            // get the connection details
+            var connectionId = $('#connection-id').text();
+            var connectionUri = $('#connection-uri').val();
+    
+            // get the source details
+            var sourceComponentId = $('#connection-source-component-id').val();
+    
+            // get the destination details
+            var destinationComponentId = $('#connection-destination-component-id').val();
+            var destination = d3.select('#id-' + destinationComponentId);
+          var destinationType = nfCanvasUtils.getConnectableTypeForDestination(destination);
+    
+            // get the destination details
+            var destinationId = $('#connection-destination-id').val();
+            var destinationGroupId = $('#connection-destination-group-id').val();
+    
+            // get the settings
+            var connectionName = $('#connection-name').val();
+            var flowFileExpiration = $('#flow-file-expiration').val();
+            var backPressureObjectThreshold = $('#back-pressure-object-threshold').val();
+            var backPressureDataSizeThreshold = $('#back-pressure-data-size-threshold').val();
+            var prioritizers = $('#prioritizer-selected').sortable('toArray');
+    
+            if (validateSettings()) {
+              var d = nfConnection.get(connectionId);
+                var connectionEntity = {
+                  'revision': nfClient.getRevision(d),
+                    'component': {
+                        'id': connectionId,
+                        'name': connectionName,
+                        'destination': {
+                            'id': destinationId,
+                            'groupId': destinationGroupId,
+                            'type': destinationType
+                        },
+                        'selectedRelationships': selectedRelationships,
+                        'flowFileExpiration': flowFileExpiration,
+                        'backPressureDataSizeThreshold': backPressureDataSizeThreshold,
+                        'backPressureObjectThreshold': backPressureObjectThreshold,
+                        'prioritizers': prioritizers
+                    }
+                };
+    
+                // update the connection
+                return $.ajax({
+                    type: 'PUT',
+                    url: connectionUri,
+                    data: JSON.stringify(connectionEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // update this connection
+                  nfConnection.set(response);
+    
+                    // reload the connections source/destination components
+                  nfCanvasUtils.reloadConnectionSourceAndDestination(sourceComponentId, destinationComponentId);
+                }).fail(function (xhr, status, error) {
+                    if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                          dialogContent: nfCommon.escapeHtml(xhr.responseText),
+                        });
+                    } else {
+                      nfErrorHandler.handleAjaxError(xhr, status, error);
+                    }
+                });
+            } else {
+                return $.Deferred(function (deferred) {
+                    deferred.reject();
+                }).promise();
+            }
+        };
+    
+        /**
+         * Returns an array of selected relationship names.
+         */
+        var getSelectedRelationships = function () {
+            // get all available relationships
+            var availableRelationships = $('#relationship-names');
+            var selectedRelationships = [];
+    
+            // go through each relationship to determine which are selected
+            $.each(availableRelationships.children(), function (i, relationshipElement) {
+                var relationship = $(relationshipElement);
+    
+                // get each relationship and its corresponding checkbox
+                var relationshipCheck = relationship.children('div.available-relationship');
+    
+                // see if this relationship has been selected
+                if (relationshipCheck.hasClass('checkbox-checked')) {
+                    selectedRelationships.push(relationship.children('span.relationship-name-value').text());
+                }
+            });
+    
+            return selectedRelationships;
+        };
+    
+        /**
+         * Validates the specified settings.
+         */
+        var validateSettings = function () {
+            var errors = [];
+    
+            // validate the settings
+          if (nfCommon.isBlank($('#flow-file-expiration').val())) {
+              errors.push(nf._.msg('nf-connection-configuration.flow-file-expiration'));
+            }
+            if (!$.isNumeric($('#back-pressure-object-threshold').val())) {
+              errors.push(nf._.msg('nf-connection-configuration.back-pressure-object-threshold'));
+            }
+          if (nfCommon.isBlank($('#back-pressure-data-size-threshold').val())) {
+              errors.push(nf._.msg('nf-connection-configuration.back-pressure-data-size-threshold'));
+            }
+    
+            if (errors.length > 0) {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                  dialogContent: nfCommon.formatUnorderedList(errors)
+                });
+                return false;
+            } else {
+                return true;
+            }
+        };
+    
+        /**
+         * Resets the dialog.
+         */
+        var resetDialog = function () {
+            // reset the prioritizers
+            var selectedList = $('#prioritizer-selected');
+            var availableList = $('#prioritizer-available');
+            selectedList.children().detach().appendTo(availableList);
+    
+            // sort the available list
+            var listItems = availableList.children('li').get();
+            listItems.sort(function (a, b) {
+                var compA = $(a).text().toUpperCase();
+                var compB = $(b).text().toUpperCase();
+                return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
+            });
+    
+            // clear the available list and re-insert each list item
+            $.each(listItems, function () {
+                $(this).detach();
+            });
+            $.each(listItems, function () {
+                $(this).appendTo(availableList);
+            });
+    
+            // reset the fields
+            $('#connection-name').val('');
+            $('#relationship-names').css('border-width', '0').empty();
+            $('#relationship-names-container').hide();
+    
+            // clear the id field
+          nfCommon.clearField('connection-id');
+    
+            // hide all the connection source panels
+            $('#processor-source').hide();
+            $('#input-port-source').hide();
+            $('#output-port-source').hide();
+            $('#read-only-output-port-source').hide();
+            $('#funnel-source').hide();
+    
+            // hide all the connection destination panels
+            $('#processor-destination').hide();
+            $('#input-port-destination').hide();
+            $('#output-port-destination').hide();
+            $('#funnel-destination').hide();
+    
+            // clear and destination details
+            $('#connection-source-id').val('');
+            $('#connection-source-component-id').val('');
+            $('#connection-source-group-id').val('');
+    
+            // clear any destination details
+            $('#connection-destination-id').val('');
+            $('#connection-destination-component-id').val('');
+            $('#connection-destination-group-id').val('');
+    
+            // clear any ports
+            $('#output-port-options').empty();
+            $('#input-port-options').empty();
+    
+            // see if the temp edge needs to be removed
+            removeTempEdge();
+        };
+    
+      var nfConnectionConfiguration = {
+  
+          /**
+           * Initialize the connection configuration.
+           *
+           * @param nfBirdseyeRef   The nfBirdseye module.
+           * @param nfGraphRef   The nfGraph module.
+           */
+          init: function (nfBirdseyeRef, nfGraphRef) {
+              nfBirdseye = nfBirdseyeRef;
+              nfGraph = nfGraphRef;
+  
+                // initially hide the relationship names container
+                $('#relationship-names-container').hide();
+    
+                // initialize the configure connection dialog
+                $('#connection-configuration').modal({
+                    scrollableContentStyle: 'scrollable',
+                  headerText: nf._.msg('nf-connection-configuration.ConfigureConnection'),
+                    handler: {
+                        close: function () {
+                            // reset the dialog on close
+                            resetDialog();
+                        },
+                        open: function () {
+                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                        }
+                    }
+                });
+    
+                // initialize the properties tabs
+                $('#connection-configuration-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                      name: nf._.msg('nf-connection-configuration.Detail'),
+                        tabContentId: 'connection-details-tab-content'
+                    }, {
+                      name: nf._.msg('nf-connection-configuration.Setting'),
+                        tabContentId: 'connection-settings-tab-content'
+                    }]
+                });
+    
+                // load the processor prioritizers
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.prioritizers,
+                    dataType: 'json'
+                }).done(function (response) {
+                    // create an element for each available prioritizer
+                    $.each(response.prioritizerTypes, function (i, documentedType) {
+                      nfConnectionConfiguration.addAvailablePrioritizer('#prioritizer-available', documentedType);
+                    });
+    
+                    // make the prioritizer containers sortable
+                    $('#prioritizer-available, #prioritizer-selected').sortable({
+                        connectWith: 'ul',
+                        placeholder: 'ui-state-highlight',
+                        scroll: true,
+                        opacity: 0.6
+                    });
+                    $('#prioritizer-available, #prioritizer-selected').disableSelection();
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Adds the specified prioritizer to the specified container.
+             *
+             * @argument {string} prioritizerContainer      The dom Id of the prioritizer container
+             * @argument {object} prioritizerType           The type of prioritizer
+             */
+            addAvailablePrioritizer: function (prioritizerContainer, prioritizerType) {
+                var type = prioritizerType.type;
+              var name = nfCommon.substringAfterLast(type, '.');
+    
+                // add the prioritizers to the available list
+                var prioritizerList = $(prioritizerContainer);
+                var prioritizer = $('<li></li>').append($('<span style="float: left;"></span>').text(name)).attr('id', type).addClass('ui-state-default').appendTo(prioritizerList);
+    
+                // add the description if applicable
+              if (nfCommon.isDefinedAndNotNull(prioritizerType.description)) {
+                    $('<div class="fa fa-question-circle" style="float: right; margin-right: 5px;""></div>').appendTo(prioritizer).qtip($.extend({
+                      content: nfCommon.escapeHtml(prioritizerType.description)
+                  }, nfCommon.config.tooltipConfig));
+                }
+            },
+    
+            /**
+             * Shows the dialog for creating a new connection.
+             *
+             * @argument {string} sourceId      The source id
+             * @argument {string} destinationId The destination id
+             */
+            createConnection: function (sourceId, destinationId) {
+                // select the source and destination
+                var source = d3.select('#id-' + sourceId);
+                var destination = d3.select('#id-' + destinationId);
+    
+                if (source.empty() || destination.empty()) {
+                    return;
+                }
+    
+                // initialize the connection dialog
+                $.when(initializeSourceNewConnectionDialog(source), initializeDestinationNewConnectionDialog(destination)).done(function () {
+                    // set the default values
+                    $('#flow-file-expiration').val('0 sec');
+                    $('#back-pressure-object-threshold').val('10000');
+                    $('#back-pressure-data-size-threshold').val('1 GB');
+    
+                    // select the first tab
+                    $('#connection-configuration-tabs').find('li:first').click();
+    
+                    // configure the header and show the dialog
+                    $('#connection-configuration').modal('setHeaderText', 'Create Connection').modal('show');
+    
+                    // add the ellipsis if necessary
+                    $('#connection-configuration div.relationship-name').ellipsis();
+    
+                    // fill in the connection id
+                  nfCommon.populateField('connection-id', null);
+    
+                    // show the border if necessary
+                    var relationshipNames = $('#relationship-names');
+                  if (relationshipNames.is(':visible') && relationshipNames.get(0).scrollHeight > Math.round(relationshipNames.innerHeight())) {
+                        relationshipNames.css('border-width', '1px');
+                    }
+                }).fail(function () {
+                    // see if the temp edge needs to be removed
+                    removeTempEdge();
+                });
+            },
+    
+            /**
+             * Shows the configuration for the specified connection. If a destination is
+             * specified it will be considered a new destination.
+             *
+             * @argument {selection} selection         The connection entry
+             * @argument {selection} destination          Optional new destination
+             */
+            showConfiguration: function (selection, destination) {
+                return $.Deferred(function (deferred) {
+                    var connectionEntry = selection.datum();
+                    var connection = connectionEntry.component;
+    
+                    // identify the source component
+                  var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connectionEntry);
+                    var source = d3.select('#id-' + sourceComponentId);
+    
+                    // identify the destination component
+                  if (nfCommon.isUndefinedOrNull(destination)) {
+                      var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connectionEntry);
+                        destination = d3.select('#id-' + destinationComponentId);
+                    }
+    
+                    // initialize the connection dialog
+                    $.when(initializeSourceEditConnectionDialog(source), initializeDestinationEditConnectionDialog(destination, connection.destination)).done(function () {
+                        var availableRelationships = connection.availableRelationships;
+                        var selectedRelationships = connection.selectedRelationships;
+    
+                        // show the available relationship if applicable
+                      if (nfCommon.isDefinedAndNotNull(availableRelationships) || nfCommon.isDefinedAndNotNull(selectedRelationships)) {
+                            // populate the available connections
+                            $.each(availableRelationships, function (i, name) {
+                                createRelationshipOption(name);
+                            });
+    
+                            // ensure all selected relationships are present
+                            // (may be undefined) and selected
+                            $.each(selectedRelationships, function (i, name) {
+                                // mark undefined relationships accordingly
+                                if ($.inArray(name, availableRelationships) === -1) {
+                                    var option = createRelationshipOption(name);
+                                    $(option).children('div.relationship-name').addClass('undefined');
+                                }
+    
+                                // ensure all selected relationships are checked
+                                var relationships = $('#relationship-names').children('div');
+                                $.each(relationships, function (i, relationship) {
+                                    var relationshipName = $(relationship).children('span.relationship-name-value');
+                                    if (relationshipName.text() === name) {
+                                        $(relationship).children('div.available-relationship').removeClass('checkbox-unchecked').addClass('checkbox-checked');
+                                    }
+                                });
+                            });
+                        }
+    
+                        // if the source is a process group or remote process group, select the appropriate port if applicable
+                      if (nfCanvasUtils.isProcessGroup(source) || nfCanvasUtils.isRemoteProcessGroup(source)) {
+                            // populate the connection source details
+                            $('#connection-source-id').val(connection.source.id);
+                          $('#read-only-output-port-name').text(connection.source.name).attr('title', connection.source.name);
+                        }
+    
+                        // if the destination is a process gorup or remote process group, select the appropriate port if applicable
+                      if (nfCanvasUtils.isProcessGroup(destination) || nfCanvasUtils.isRemoteProcessGroup(destination)) {
+                            var destinationData = destination.datum();
+    
+                            // when the group ids differ, its a new destination component so we don't want to preselect any port
+                            if (connection.destination.groupId === destinationData.id) {
+                                $('#input-port-options').combo('setSelectedOption', {
+                                    value: connection.destination.id
+                                });
+                            }
+                        }
+    
+                        // set the connection settings
+                        $('#connection-name').val(connection.name);
+                        $('#flow-file-expiration').val(connection.flowFileExpiration);
+                        $('#back-pressure-object-threshold').val(connection.backPressureObjectThreshold);
+                        $('#back-pressure-data-size-threshold').val(connection.backPressureDataSizeThreshold);
+    
+                        // format the connection id
+                      nfCommon.populateField('connection-id', connection.id);
+    
+                        // handle each prioritizer
+                        $.each(connection.prioritizers, function (i, type) {
+                            $('#prioritizer-available').children('li[id="' + type + '"]').detach().appendTo('#prioritizer-selected');
+                        });
+    
+                        // store the connection details
+                        $('#connection-uri').val(connectionEntry.uri);
+    
+                        // configure the button model
+                        $('#connection-configuration').modal('setButtonModel', [{
+                          buttonText: nf._.msg('nf-connection-configuration.Apply'),
+                            color: {
+                                base: '#728E9B',
+                                hover: '#004849',
+                                text: '#ffffff'
+                            },
+                            handler: {
+                                click: function () {
+                                    // get the selected relationships
+                                    var selectedRelationships = getSelectedRelationships();
+    
+                                    // see if we're working with a processor as the source
+                                  if (nfCanvasUtils.isProcessor(source)) {
+                                        if (selectedRelationships.length > 0) {
+                                            // if there are relationships selected update
+                                            updateConnection(selectedRelationships).done(function () {
+                                                deferred.resolve();
+                                            }).fail(function () {
+                                                deferred.reject();
+                                            });
+                                        } else {
+                                            // inform users that no relationships were selected and the source is a processor
+                                          nfDialog.showOkDialog({
+                                              headerText: nf._.msg('nf-connection-configuration.ConnectionConfiguration'),
+                                              dialogContent: nf._.msg('nf-connection-configuration.Message0')
+                                            });
+    
+                                            // reject the deferred
+                                            deferred.reject();
+                                        }
+                                    } else {
+                                        // there are no relationships, but the source wasn't a processor, so update anyway
+                                        updateConnection(undefined).done(function () {
+                                            deferred.resolve();
+                                        }).fail(function () {
+                                            deferred.reject();
+                                        });
+                                    }
+    
+                                    // close the dialog
+                                    $('#connection-configuration').modal('hide');
+                                }
+                            }
+                        },
+                            {
+                              buttonText: nf._.msg('nf-connection-configuration.Cancel'),
+                                color: {
+                                    base: '#E3E8EB',
+                                    hover: '#C7D2D7',
+                                    text: '#004849'
+                                },
+                                handler: {
+                                    click: function () {
+                                        // hide the dialog
+                                        $('#connection-configuration').modal('hide');
+    
+                                        // reject the deferred
+                                        deferred.reject();
+                                    }
+                                }
+                            }]);
+    
+                        // show the details dialog
+                        $('#connection-configuration').modal('setHeaderText', 'Configure Connection').modal('show');
+    
+                        // add the ellipsis if necessary
+                        $('#connection-configuration div.relationship-name').ellipsis();
+    
+                        // show the border if necessary
+                        var relationshipNames = $('#relationship-names');
+                      if (relationshipNames.is(':visible') && relationshipNames.get(0).scrollHeight > Math.round(relationshipNames.innerHeight())) {
+                            relationshipNames.css('border-width', '1px');
+                        }
+                    }).fail(function () {
+                        deferred.reject();
+                    });
+                }).promise();
+            }
+        };
+    
+      return nfConnectionConfiguration;
+  }));
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
new file mode 100644
index 000000000000..67d0dc0371f4
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
@@ -0,0 +1,2185 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.ErrorHandler',
+                  'nf.Client',
+                  'nf.CanvasUtils'],
+              function ($, d3, nfCommon, nfDialog, nfErrorHandler, nfClient, nfCanvasUtils) {
+                  return (nf.Connection = factory($, d3, nfCommon, nfDialog, nfErrorHandler, nfClient, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.Connection =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.Connection = factory(root.$,
+              root.d3,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.ErrorHandler,
+              root.nf.Client,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, d3, nfCommon, nfDialog, nfErrorHandler, nfClient, nfCanvasUtils) {
+      'use strict';
+  
+      var nfSelectable;
+      var nfConnectionConfiguration;
+      var nfContextMenu;
+    
+        // the dimensions for the connection label
+        var dimensions = {
+            width: 200
+        };
+    
+      // width of a backpressure indicator - half of width, left/right padding, left/right border
+      var backpressureBarWidth = (dimensions.width / 2) - 15 - 2;
+  
+        /**
+         * Gets the position of the label for the specified connection.
+         *
+         * @param {type} connectionLabel      The connection label
+         */
+        var getLabelPosition = function (connectionLabel) {
+            var d = connectionLabel.datum();
+    
+            var x, y;
+            if (d.bends.length > 0) {
+                var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1);
+                x = d.bends[i].x;
+                y = d.bends[i].y;
+            } else {
+                x = (d.start.x + d.end.x) / 2;
+                y = (d.start.y + d.end.y) / 2;
+            }
+    
+            // offset to account for the label dimensions
+            x -= (dimensions.width / 2);
+            y -= (connectionLabel.attr('height') / 2);
+    
+            return {
+                x: x,
+                y: y
+            };
+        };
+    
+        // ----------------------------------
+        // connections currently on the graph
+        // ----------------------------------
+    
+        var connectionMap;
+    
+      // -----------------------------------------------------------
+      // cache for components that are added/removed from the canvas
+      // -----------------------------------------------------------
+  
+      var removedCache;
+      var addedCache;
+  
+        // ---------------------
+        // connection containers
+        // ---------------------
+    
+        var connectionContainer;
+    
+        // ------------------------
+        // line point drag behavior
+        // ------------------------
+    
+        var bendPointDrag;
+        var endpointDrag;
+    
+        // ------------------------------
+        // connection label drag behavior
+        // ------------------------------
+    
+        var labelDrag;
+    
+        // function for generating lines
+        var lineGenerator;
+    
+        // --------------------------
+        // privately scoped functions
+        // --------------------------
+    
+        /**
+         * Calculates the distance between the two points specified squared.
+         *
+         * @param {object} v        First point
+         * @param {object} w        Second point
+         */
+        var distanceSquared = function (v, w) {
+            return Math.pow(v.x - w.x, 2) + Math.pow(v.y - w.y, 2);
+        };
+    
+        /**
+         * Calculates the distance between the two points specified.
+         *
+         * @param {object} v        First point
+         * @param {object} w        Second point
+         */
+        var distanceBetweenPoints = function (v, w) {
+            return Math.sqrt(distanceSquared(v, w));
+        };
+    
+        /**
+         * Calculates the distance between the point and the line created by s1 and s2.
+         *
+         * @param {object} p            The point
+         * @param {object} s1           Segment start
+         * @param {object} s2           Segment end
+         */
+        var distanceToSegment = function (p, s1, s2) {
+            var l2 = distanceSquared(s1, s2);
+            if (l2 === 0) {
+                return Math.sqrt(distanceSquared(p, s1));
+            }
+    
+            var t = ((p.x - s1.x) * (s2.x - s1.x) + (p.y - s1.y) * (s2.y - s1.y)) / l2;
+            if (t < 0) {
+                return Math.sqrt(distanceSquared(p, s1));
+            }
+            if (t > 1) {
+                return Math.sqrt(distanceSquared(p, s2));
+            }
+    
+            return Math.sqrt(distanceSquared(p, {
+                'x': s1.x + t * (s2.x - s1.x),
+                'y': s1.y + t * (s2.y - s1.y)
+            }));
+        };
+    
+        /**
+         * Calculates the index of the bend point that is nearest to the specified point.
+         *
+         * @param {object} p
+         * @param {object} connectionData
+         */
+        var getNearestSegment = function (p, connectionData) {
+            if (connectionData.bends.length === 0) {
+                return 0;
+            }
+    
+            var minimumDistance;
+            var index;
+    
+            // line is comprised of start -> [bends] -> end
+            var line = [connectionData.start].concat(connectionData.bends, [connectionData.end]);
+    
+            // consider each segment
+            for (var i = 0; i < line.length; i++) {
+                if (i + 1 < line.length) {
+                    var distance = distanceToSegment(p, line[i], line[i + 1]);
+                  if (nfCommon.isUndefined(minimumDistance) || distance < minimumDistance) {
+                        minimumDistance = distance;
+                        index = i;
+                    }
+                }
+            }
+    
+            return index;
+        };
+    
+        /**
+         * Determines if the specified type is a type of input port.
+         *
+         * @argument {string} type      The port type
+         */
+        var isInputPortType = function (type) {
+            return type.indexOf('INPUT_PORT') >= 0;
+        };
+    
+        /**
+         * Determines if the specified type is a type of output port.
+         *
+         * @argument {string} type      The port type
+         */
+        var isOutputPortType = function (type) {
+            return type.indexOf('OUTPUT_PORT') >= 0;
+        };
+    
+        /**
+         * Determines whether the terminal of the connection (source|destination) is
+         * a group.
+         *
+         * @param {object} terminal
+         */
+        var isGroup = function (terminal) {
+          return terminal.groupId !== nfCanvasUtils.getGroupId() && (isInputPortType(terminal.type) || isOutputPortType(terminal.type));
+        };
+    
+        /**
+         * Determines whether expiration is configured for the specified connection.
+         *
+         * @param {object} connection
+         * @return {boolean} Whether expiration is configured
+         */
+        var isExpirationConfigured = function (connection) {
+          if (nfCommon.isDefinedAndNotNull(connection.flowFileExpiration)) {
+                var match = connection.flowFileExpiration.match(/^(\d+).*/);
+                if (match !== null && match.length > 0) {
+                    if (parseInt(match[0], 10) > 0) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+    
+        /**
+         * Sorts the specified connections according to the z index.
+         *
+         * @param {type} connections
+         */
+        var sort = function (connections) {
+            connections.sort(function (a, b) {
+                return a.zIndex === b.zIndex ? 0 : a.zIndex > b.zIndex ? 1 : -1;
+            });
+        };
+    
+        /**
+         * Selects the connection elements against the current connection map.
+         */
+        var select = function () {
+            return connectionContainer.selectAll('g.connection').data(connectionMap.values(), function (d) {
+                return d.id;
+            });
+        };
+    
+        var renderConnections = function (entered, selected) {
+            if (entered.empty()) {
+                return;
+            }
+    
+            var connection = entered.append('g')
+                .attr({
+                    'id': function (d) {
+                        return 'id-' + d.id;
+                    },
+                    'class': 'connection'
+                })
+                .classed('selected', selected);
+    
+            // create a connection between the two components
+            connection.append('path')
+                .attr({
+                    'class': 'connection-path',
+                    'pointer-events': 'none'
+                });
+    
+            // path to show when selection
+            connection.append('path')
+                .attr({
+                    'class': 'connection-selection-path',
+                    'pointer-events': 'none'
+                });
+    
+            // path to make selection easier
+            connection.append('path')
+                .attr({
+                    'class': 'connection-path-selectable',
+                    'pointer-events': 'stroke'
+                })
+                .on('mousedown.selection', function () {
+                    // select the connection when clicking the selectable path
+                  nfSelectable.select(d3.select(this.parentNode));
+                })
+              .call(nfContextMenu.activate);
+        };
+    
+        // determines whether the specified connection contains an unsupported relationship
+        var hasUnavailableRelationship = function (d) {
+            var unavailable = false;
+    
+            // verify each selected relationship is still available
+          if (nfCommon.isDefinedAndNotNull(d.component.selectedRelationships) && nfCommon.isDefinedAndNotNull(d.component.availableRelationships)) {
+                $.each(d.component.selectedRelationships, function (_, selectedRelationship) {
+                    if ($.inArray(selectedRelationship, d.component.availableRelationships) === -1) {
+                        unavailable = true;
+                        return false;
+                    }
+                });
+            }
+    
+            return unavailable;
+        };
+    
+      // gets the appropriate end marker
+      var getEndMarker = function (d) {
+          var marker = 'normal';
+  
+          if (d.permissions.canRead) {
+              // if the connection has a relationship that is unavailable, mark it a ghost relationship
+              if (isFullBytes(d) || isFullCount(d)) {
+                  marker = 'full';
+              } else if (hasUnavailableRelationship(d)) {
+                  marker = 'ghost';
+              }
+          } else {
+              marker = 'unauthorized';
+          }
+  
+          return 'url(#' + marker + ')';
+      };
+  
+      // gets the appropriate drop shadow
+      var getDropShadow = function (d) {
+          if (isFullCount(d) || isFullBytes(d)) {
+              return 'url(#connection-full-drop-shadow)';
+          } else {
+              return 'url(#component-drop-shadow)';
+          }
+      };
+  
+      // determines whether the connection is full based on the object count threshold
+      var isFullCount = function (d) {
+          return d.status.aggregateSnapshot.percentUseCount === 100;
+      };
+  
+      // determines whether the connection is in warning based on the object count threshold
+      var isWarningCount = function (d) {
+          var percentUseCount = d.status.aggregateSnapshot.percentUseCount;
+          if (nfCommon.isDefinedAndNotNull(percentUseCount)) {
+              return percentUseCount >= 61 && percentUseCount <= 85;
+          }
+  
+          return false;
+      };
+  
+      // determines whether the connection is in error based on the object count threshold
+      var isErrorCount = function (d) {
+          var percentUseCount = d.status.aggregateSnapshot.percentUseCount;
+          if (nfCommon.isDefinedAndNotNull(percentUseCount)) {
+              return percentUseCount > 85;
+          }
+  
+          return false;
+      };
+  
+      // determines whether the connection is full based on the data size threshold
+      var isFullBytes = function (d) {
+          return d.status.aggregateSnapshot.percentUseBytes === 100
+      };
+  
+      // determines whether the connection is in warning based on the data size threshold
+      var isWarningBytes = function (d) {
+          var percentUseBytes = d.status.aggregateSnapshot.percentUseBytes;
+          if (nfCommon.isDefinedAndNotNull(percentUseBytes)) {
+              return percentUseBytes >= 61 && percentUseBytes <= 85;
+          }
+  
+          return false;
+      };
+  
+      // determines whether the connection is in error based on the data size threshold
+      var isErrorBytes = function (d) {
+          var percentUseBytes = d.status.aggregateSnapshot.percentUseBytes;
+          if (nfCommon.isDefinedAndNotNull(percentUseBytes)) {
+              return percentUseBytes > 85;
+          }
+  
+          return false;
+      };
+  
+        // updates the specified connections
+        var updateConnections = function (updated, options) {
+            if (updated.empty()) {
+                return;
+            }
+    
+            var updatePath = true;
+            var updateLabel = true;
+            var transition = false;
+    
+            // extract the options if specified
+          if (nfCommon.isDefinedAndNotNull(options)) {
+              updatePath = nfCommon.isDefinedAndNotNull(options.updatePath) ? options.updatePath : updatePath;
+              updateLabel = nfCommon.isDefinedAndNotNull(options.updateLabel) ? options.updateLabel : updateLabel;
+              transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+            }
+    
+            if (updatePath === true) {
+                updated
+                    .classed('grouped', function (d) {
+                        var grouped = false;
+    
+                        if (d.permissions.canRead) {
+                            // if there are more than one selected relationship, mark this as grouped
+                          if (nfCommon.isDefinedAndNotNull(d.component.selectedRelationships) && d.component.selectedRelationships.length > 1) {
+                                grouped = true;
+                            }
+                        }
+    
+                        return grouped;
+                    })
+                    .classed('ghost', function (d) {
+                        var ghost = false;
+    
+                        if (d.permissions.canRead) {
+                            // if the connection has a relationship that is unavailable, mark it a ghost relationship
+                            if (hasUnavailableRelationship(d)) {
+                                ghost = true;
+                            }
+                        }
+    
+                        return ghost;
+                    });
+    
+                // update connection path
+                updated.select('path.connection-path')
+                    .classed('unauthorized', function (d) {
+                        return d.permissions.canRead === false;
+                    });
+    
+                // update connection behavior
+                updated.select('path.connection-path-selectable')
+                    .on('dblclick', function (d) {
+                        if (d.permissions.canWrite && d.permissions.canRead) {
+                            var position = d3.mouse(this.parentNode);
+    
+                            // find where to put this bend point
+                            var bendIndex = getNearestSegment({
+                                'x': position[0],
+                                'y': position[1]
+                            }, d);
+    
+                            // copy the original to restore if necessary
+                            var bends = d.component.bends.slice();
+    
+                            // add it to the collection of points
+                            bends.splice(bendIndex, 0, {
+                                'x': position[0],
+                                'y': position[1]
+                            });
+    
+                            var connection = {
+                                id: d.id,
+                                bends: bends
+                            };
+    
+                            // update the label index if necessary
+                            var labelIndex = d.component.labelIndex;
+                            if (bends.length === 1) {
+                                connection.labelIndex = 0;
+                            } else if (bendIndex <= labelIndex) {
+                                connection.labelIndex = labelIndex + 1;
+                            }
+    
+                            // save the new state
+                            save(d, connection);
+    
+                            d3.event.stopPropagation();
+                        } else {
+                            return null;
+                        }
+                    });
+            }
+    
+            updated.each(function (d) {
+                var connection = d3.select(this);
+    
+                if (updatePath === true) {
+                    // calculate the start and end points
+                  var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(d);
+                    var sourceData = d3.select('#id-' + sourceComponentId).datum();
+                    var end;
+    
+                    // get the appropriate end anchor point
+                    var endAnchor;
+                    if (d.bends.length > 0) {
+                        endAnchor = d.bends[d.bends.length - 1];
+                    } else {
+                        endAnchor = {
+                            x: sourceData.position.x + (sourceData.dimensions.width / 2),
+                            y: sourceData.position.y + (sourceData.dimensions.height / 2)
+                        };
+                    }
+    
+                    // if we are currently dragging the endpoint to a new target, use that
+                    // position, otherwise we need to calculate it for the current target
+                  if (nfCommon.isDefinedAndNotNull(d.end) && d.end.dragging === true) {
+                        // since we're dragging, use the same object thats bound to the endpoint drag event
+                        end = d.end;
+    
+                        // if we're not over a connectable destination use the current point
+                        var newDestination = d3.select('g.hover.connectable-destination');
+                        if (!newDestination.empty()) {
+                            var newDestinationData = newDestination.datum();
+    
+                            // get the position on the new destination perimeter
+                          var newEnd = nfCanvasUtils.getPerimeterPoint(endAnchor, {
+                                'x': newDestinationData.position.x,
+                                'y': newDestinationData.position.y,
+                                'width': newDestinationData.dimensions.width,
+                                'height': newDestinationData.dimensions.height
+                            });
+    
+                            // update the coordinates with the new point
+                            end.x = newEnd.x;
+                            end.y = newEnd.y;
+                        }
+                    } else {
+                      var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(d);
+                        var destinationData = d3.select('#id-' + destinationComponentId).datum();
+    
+                        // get the position on the destination perimeter
+                      end = nfCanvasUtils.getPerimeterPoint(endAnchor, {
+                            'x': destinationData.position.x,
+                            'y': destinationData.position.y,
+                            'width': destinationData.dimensions.width,
+                            'height': destinationData.dimensions.height
+                        });
+                    }
+    
+                    // get the appropriate start anchor point
+                    var startAnchor;
+                    if (d.bends.length > 0) {
+                        startAnchor = d.bends[0];
+                    } else {
+                        startAnchor = end;
+                    }
+    
+                    // get the position on the source perimeter
+                  var start = nfCanvasUtils.getPerimeterPoint(startAnchor, {
+                        'x': sourceData.position.x,
+                        'y': sourceData.position.y,
+                        'width': sourceData.dimensions.width,
+                        'height': sourceData.dimensions.height
+                    });
+    
+                    // store the updated endpoints
+                    d.start = start;
+                    d.end = end;
+    
+                    // update the connection paths
+                  nfCanvasUtils.transition(connection.select('path.connection-path'), transition)
+                        .attr({
+                            'd': function () {
+                                var datum = [d.start].concat(d.bends, [d.end]);
+                                return lineGenerator(datum);
+                          }
+                      });
+                  nfCanvasUtils.transition(connection.select('path.connection-selection-path'), transition)
+                        .attr({
+                            'd': function () {
+                                var datum = [d.start].concat(d.bends, [d.end]);
+                                return lineGenerator(datum);
+                            }
+                        });
+                  nfCanvasUtils.transition(connection.select('path.connection-path-selectable'), transition)
+                        .attr({
+                            'd': function () {
+                                var datum = [d.start].concat(d.bends, [d.end]);
+                                return lineGenerator(datum);
+                            }
+                        });
+    
+                    // -----
+                    // bends
+                    // -----
+    
+                    var startpoints = connection.selectAll('rect.startpoint');
+                    var endpoints = connection.selectAll('rect.endpoint');
+                    var midpoints = connection.selectAll('rect.midpoint');
+    
+                    // require read and write permissions as it's required to read the connections available relationships
+                    // when connecting to a group or remote group
+                    if (d.permissions.canWrite && d.permissions.canRead) {
+    
+                        // ------------------
+                        // bends - startpoint
+                        // ------------------
+    
+                        startpoints = startpoints.data([d.start]);
+    
+                        // create a point for the start
+                        startpoints.enter().append('rect')
+                            .attr({
+                                'class': 'startpoint linepoint',
+                                'pointer-events': 'all',
+                                'width': 8,
+                                'height': 8
+                            })
+                            .on('mousedown.selection', function () {
+                                // select the connection when clicking the label
+                              nfSelectable.select(d3.select(this.parentNode));
+                            })
+                          .call(nfContextMenu.activate);
+    
+                        // update the start point
+                      nfCanvasUtils.transition(startpoints, transition)
+                            .attr('transform', function (p) {
+                                return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')';
+                            });
+    
+                        // remove old items
+                        startpoints.exit().remove();
+    
+                        // ----------------
+                        // bends - endpoint
+                        // ----------------
+    
+                        var endpoints = endpoints.data([d.end]);
+    
+                        // create a point for the end
+                        endpoints.enter().append('rect')
+                            .call(endpointDrag)
+                            .attr({
+                                'class': 'endpoint linepoint',
+                                'pointer-events': 'all',
+                                'width': 8,
+                                'height': 8
+                            })
+                            .on('mousedown.selection', function () {
+                                // select the connection when clicking the label
+                              nfSelectable.select(d3.select(this.parentNode));
+                            })
+                          .call(nfContextMenu.activate);
+    
+                        // update the end point
+                      nfCanvasUtils.transition(endpoints, transition)
+                            .attr('transform', function (p) {
+                                return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')';
+                            });
+    
+                        // remove old items
+                        endpoints.exit().remove();
+    
+                        // -----------------
+                        // bends - midpoints
+                        // -----------------
+    
+                        var midpoints = midpoints.data(d.bends);
+    
+                        // create a point for the end
+                        midpoints.enter().append('rect')
+                            .attr({
+                                'class': 'midpoint linepoint',
+                                'pointer-events': 'all',
+                                'width': 8,
+                                'height': 8
+                            })
+                            .call(bendPointDrag)
+                            .on('dblclick', function (p) {
+                                // stop even propagation
+                                d3.event.stopPropagation();
+    
+                                var connection = d3.select(this.parentNode);
+                                var connectionData = connection.datum();
+    
+                                // if this is a self loop prevent removing the last two bends
+                              var sourceComponentId = nfCanvasUtils.getConnectionSourceComponentId(connectionData);
+                              var destinationComponentId = nfCanvasUtils.getConnectionDestinationComponentId(connectionData);
+                                if (sourceComponentId === destinationComponentId && d.component.bends.length <= 2) {
+                                  nfDialog.showOkDialog({
+                                      headerText: nf._.msg('nf-connection.Connection'),
+                                      dialogContent: nf._.msg('nf-connection.Message1')
+                                    });
+                                    return;
+                                }
+    
+                                var newBends = [];
+                                var bendIndex = -1;
+    
+                                // create a new array of bends without the selected one
+                                $.each(connectionData.component.bends, function (i, bend) {
+                                    if (p.x !== bend.x && p.y !== bend.y) {
+                                        newBends.push(bend);
+                                    } else {
+                                        bendIndex = i;
+                                    }
+                                });
+    
+                                if (bendIndex < 0) {
+                                    return;
+                                }
+    
+                                var connection = {
+                                    id: connectionData.id,
+                                    bends: newBends
+                                };
+    
+                                // update the label index if necessary
+                                var labelIndex = connectionData.component.labelIndex;
+                                if (newBends.length <= 1) {
+                                    connection.labelIndex = 0;
+                                } else if (bendIndex <= labelIndex) {
+                                    connection.labelIndex = Math.max(0, labelIndex - 1);
+                                }
+    
+                                // save the updated connection
+                                save(connectionData, connection);
+                            })
+                            .on('mousedown.selection', function () {
+                                // select the connection when clicking the label
+                              nfSelectable.select(d3.select(this.parentNode));
+                            })
+                          .call(nfContextMenu.activate);
+    
+                        // update the midpoints
+                      nfCanvasUtils.transition(midpoints, transition)
+                            .attr('transform', function (p) {
+                                return 'translate(' + (p.x - 4) + ', ' + (p.y - 4) + ')';
+                            });
+    
+                        // remove old items
+                        midpoints.exit().remove();
+                    } else {
+                        // remove the start, mid, and end points
+                        startpoints.remove();
+                        endpoints.remove();
+                        midpoints.remove();
+                    }
+                }
+    
+                if (updateLabel === true) {
+                    var connectionLabelContainer = connection.select('g.connection-label-container');
+    
+                    // update visible connections
+                    if (connection.classed('visible')) {
+    
+                        // if there is no connection label this connection is becoming
+                        // visible so we need to render it
+                        if (connectionLabelContainer.empty()) {
+                            // connection label container
+                            connectionLabelContainer = connection.insert('g', 'rect.startpoint')
+                                .attr({
+                                    'class': 'connection-label-container',
+                                    'pointer-events': 'all'
+                                })
+                                .on('mousedown.selection', function () {
+                                    // select the connection when clicking the label
+                                  nfSelectable.select(d3.select(this.parentNode));
+                                })
+                              .call(nfContextMenu.activate);
+    
+                            // connection label
+                            connectionLabelContainer.append('rect')
+                                .attr({
+                                    'class': 'body',
+                                    'width': dimensions.width,
+                                    'x': 0,
+                                  'y': 0
+                                });
+    
+                            // processor border
+                            connectionLabelContainer.append('rect')
+                                .attr({
+                                    'class': 'border',
+                                    'width': dimensions.width,
+                                    'fill': 'transparent',
+                                    'stroke': 'transparent'
+                                });
+                        }
+    
+                        var labelCount = 0;
+                        var rowHeight = 19;
+                        var backgrounds = [];
+                        var borders = [];
+    
+                        var connectionFrom = connectionLabelContainer.select('g.connection-from-container');
+                        var connectionTo = connectionLabelContainer.select('g.connection-to-container');
+                        var connectionName = connectionLabelContainer.select('g.connection-name-container');
+    
+                        if (d.permissions.canRead) {
+    
+                            // -----------------------
+                            // connection label - from
+                            // -----------------------
+    
+                            // determine if the connection require a from label
+                            if (isGroup(d.component.source)) {
+                                // see if the connection from label is already rendered
+                                if (connectionFrom.empty()) {
+                                    connectionFrom = connectionLabelContainer.append('g')
+                                        .attr({
+                                            'class': 'connection-from-container'
+                                        });
+    
+                                    // background
+                                    backgrounds.push(connectionFrom.append('rect')
+                                        .attr({
+                                            'class': 'connection-label-background',
+                                            'width': dimensions.width,
+                                            'height': rowHeight
+                                        }));
+    
+                                    // border
+                                    borders.push(connectionFrom.append('rect')
+                                        .attr({
+                                            'class': 'connection-label-border',
+                                            'width': dimensions.width,
+                                            'height': 1
+                                        }));
+    
+                                    connectionFrom.append('text')
+                                        .attr({
+                                            'class': 'stats-label',
+                                            'x': 5,
+                                            'y': 14
+                                        })
+                                      .text(nf._.msg('nf-connection.From'));
+    
+                                    connectionFrom.append('text')
+                                        .attr({
+                                            'class': 'stats-value connection-from',
+                                            'x': 43,
+                                            'y': 14,
+                                            'width': 130
+                                        });
+    
+                                    connectionFrom.append('text')
+                                        .attr({
+                                            'class': 'connection-from-run-status',
+                                            'x': 185,
+                                            'y': 14
+                                        });
+                                } else {
+                                    backgrounds.push(connectionFrom.select('rect.connection-label-background'));
+                                    borders.push(connectionFrom.select('rect.connection-label-border'));
+                                }
+    
+                                // update the connection from positioning
+                                connectionFrom.attr('transform', function () {
+                                    var y = (rowHeight * labelCount++);
+                                    return 'translate(0, ' + y + ')';
+                                });
+    
+                                // update the label text
+                                connectionFrom.select('text.connection-from')
+                                    .each(function () {
+                                        var connectionFromLabel = d3.select(this);
+    
+                                        // reset the label name to handle any previous state
+                                        connectionFromLabel.text(null).selectAll('title').remove();
+    
+                                        // apply ellipsis to the label as necessary
+                                      nfCanvasUtils.ellipsis(connectionFromLabel, d.component.source.name);
+                                    }).append('title').text(function () {
+                                    return d.component.source.name;
+                                });
+    
+                                // update the label run status
+                                connectionFrom.select('text.connection-from-run-status')
+                                    .text(function () {
+                                        if (d.component.source.exists === false) {
+                                            return '\uf071';
+                                        } else if (d.component.source.running === true) {
+                                            return '\uf04b';
+                                        } else {
+                                            return '\uf04d';
+                                        }
+                                    })
+                                  .classed('running', function () {
+                                      if (d.component.source.exists === false) {
+                                          return false;
+                                      } else {
+                                          return d.component.source.running;
+                                      }
+                                  })
+                                  .classed('stopped', function () {
+                                      if (d.component.source.exists === false) {
+                                          return false;
+                                      } else {
+                                          return !d.component.source.running;
+                                      }
+                                  })
+                                    .classed('is-missing-port', function () {
+                                        return d.component.source.exists === false;
+                                    });
+                            } else {
+                                // there is no connection from, remove the previous if necessary
+                                connectionFrom.remove();
+                            }
+    
+                            // ---------------------
+                            // connection label - to
+                            // ---------------------
+    
+                            // determine if the connection require a to label
+                            if (isGroup(d.component.destination)) {
+                                // see if the connection to label is already rendered
+                                if (connectionTo.empty()) {
+                                    connectionTo = connectionLabelContainer.append('g')
+                                        .attr({
+                                            'class': 'connection-to-container'
+                                        });
+    
+                                    // background
+                                    backgrounds.push(connectionTo.append('rect')
+                                        .attr({
+                                            'class': 'connection-label-background',
+                                            'width': dimensions.width,
+                                            'height': rowHeight
+                                        }));
+    
+                                    // border
+                                    borders.push(connectionTo.append('rect')
+                                        .attr({
+                                            'class': 'connection-label-border',
+                                            'width': dimensions.width,
+                                            'height': 1
+                                        }));
+    
+                                    connectionTo.append('text')
+                                        .attr({
+                                            'class': 'stats-label',
+                                            'x': 5,
+                                            'y': 14
+                                        })
+                                      .text(nf._.msg('nf-connection.To'));
+    
+                                    connectionTo.append('text')
+                                        .attr({
+                                            'class': 'stats-value connection-to',
+                                            'x': 25,
+                                            'y': 14,
+                                            'width': 145
+                                        });
+    
+                                    connectionTo.append('text')
+                                        .attr({
+                                            'class': 'connection-to-run-status',
+                                            'x': 185,
+                                            'y': 14
+                                        });
+                                } else {
+                                    backgrounds.push(connectionTo.select('rect.connection-label-background'));
+                                    borders.push(connectionTo.select('rect.connection-label-border'));
+                                }
+    
+                                // update the connection to positioning
+                                connectionTo.attr('transform', function () {
+                                    var y = (rowHeight * labelCount++);
+                                    return 'translate(0, ' + y + ')';
+                                });
+    
+                                // update the label text
+                                connectionTo.select('text.connection-to')
+                                    .each(function (d) {
+                                        var connectionToLabel = d3.select(this);
+    
+                                        // reset the label name to handle any previous state
+                                        connectionToLabel.text(null).selectAll('title').remove();
+    
+                                        // apply ellipsis to the label as necessary
+                                      nfCanvasUtils.ellipsis(connectionToLabel, d.component.destination.name);
+                                    }).append('title').text(function (d) {
+                                    return d.component.destination.name;
+                                });
+    
+                                // update the label run status
+                                connectionTo.select('text.connection-to-run-status')
+                                    .text(function () {
+                                        if (d.component.destination.exists === false) {
+                                            return '\uf071';
+                                        } else if (d.component.destination.running === true) {
+                                            return '\uf04b';
+                                        } else {
+                                            return '\uf04d';
+                                        }
+                                    })
+                                  .classed('running', function () {
+                                      if (d.component.destination.exists === false) {
+                                          return false;
+                                      } else {
+                                          return d.component.destination.running;
+                                      }
+                                  })
+                                  .classed('stopped', function () {
+                                      if (d.component.destination.exists === false) {
+                                          return false;
+                                      } else {
+                                          return !d.component.destination.running;
+                                      }
+                                  })
+                                    .classed('is-missing-port', function () {
+                                        return d.component.destination.exists === false;
+                                    });
+                            } else {
+                                // there is no connection to, remove the previous if necessary
+                                connectionTo.remove();
+                            }
+    
+                            // -----------------------
+                            // connection label - name
+                            // -----------------------
+    
+                            // get the connection name
+                          var connectionNameValue = nfCanvasUtils.formatConnectionName(d.component);
+    
+                            // is there a name to render
+                          if (!nfCommon.isBlank(connectionNameValue)) {
+                                // see if the connection name label is already rendered
+                                if (connectionName.empty()) {
+                                    connectionName = connectionLabelContainer.append('g')
+                                        .attr({
+                                            'class': 'connection-name-container'
+                                        });
+    
+                                    // background
+                                    backgrounds.push(connectionName.append('rect')
+                                        .attr({
+                                            'class': 'connection-label-background',
+                                            'width': dimensions.width,
+                                            'height': rowHeight
+                                        }));
+    
+                                    // border
+                                    borders.push(connectionName.append('rect')
+                                        .attr({
+                                            'class': 'connection-label-border',
+                                            'width': dimensions.width,
+                                            'height': 1
+                                        }));
+    
+                                    connectionName.append('text')
+                                        .attr({
+                                            'class': 'stats-label',
+                                            'x': 5,
+                                            'y': 14
+                                        })
+                                      .text(nf._.msg('nf-connection.Name'));
+    
+                                    connectionName.append('text')
+                                        .attr({
+                                            'class': 'stats-value connection-name',
+                                            'x': 45,
+                                            'y': 14,
+                                            'width': 142
+                                        });
+                                } else {
+                                    backgrounds.push(connectionName.select('rect.connection-label-background'));
+                                    borders.push(connectionName.select('rect.connection-label-border'));
+                                }
+    
+                                // update the connection name positioning
+                                connectionName.attr('transform', function () {
+                                    var y = (rowHeight * labelCount++);
+                                    return 'translate(0, ' + y + ')';
+                                });
+    
+                                // update the connection name
+                                connectionName.select('text.connection-name')
+                                    .each(function () {
+                                        var connectionToLabel = d3.select(this);
+    
+                                        // reset the label name to handle any previous state
+                                        connectionToLabel.text(null).selectAll('title').remove();
+    
+                                        // apply ellipsis to the label as necessary
+                                      nfCanvasUtils.ellipsis(connectionToLabel, connectionNameValue);
+                                    }).append('title').text(function () {
+                                    return connectionNameValue;
+                                });
+                            } else {
+                                // there is no connection name, remove the previous if necessary
+                                connectionName.remove();
+                            }
+                        } else {
+                            // no permissions to read to remove previous if necessary
+                            connectionFrom.remove();
+                            connectionTo.remove();
+                            connectionName.remove();
+                        }
+    
+                        // -------------------------
+                        // connection label - queued
+                        // -------------------------
+    
+                      var HEIGHT_FOR_BACKPRESSURE = 3;
+  
+                        // see if the queue label is already rendered
+                        var queued = connectionLabelContainer.select('g.queued-container');
+                        if (queued.empty()) {
+                            queued = connectionLabelContainer.append('g')
+                                .attr({
+                                    'class': 'queued-container'
+                                });
+    
+                            // background
+                            backgrounds.push(queued.append('rect')
+                                .attr({
+                                    'class': 'connection-label-background',
+                                    'width': dimensions.width,
+                                  'height': rowHeight + HEIGHT_FOR_BACKPRESSURE
+                                }));
+    
+                            // border
+                            borders.push(queued.append('rect')
+                                .attr({
+                                    'class': 'connection-label-border',
+                                    'width': dimensions.width,
+                                    'height': 1
+                                }));
+    
+                            queued.append('text')
+                                .attr({
+                                    'class': 'stats-label',
+                                    'x': 5,
+                                    'y': 14
+                                })
+                              .text(nf._.msg('nf-connection.Queued'));
+    
+                            var queuedText = queued.append('text')
+                                .attr({
+                                    'class': 'stats-value queued',
+                                    'x': 55,
+                                    'y': 14
+                                });
+    
+                            // queued count
+                            queuedText.append('tspan')
+                                .attr({
+                                    'class': 'count'
+                                });
+    
+                            // queued size
+                            queuedText.append('tspan')
+                                .attr({
+                                    'class': 'size'
+                                });
+    
+                          // expiration icon
+                            queued.append('text')
+                                .attr({
+                                    'class': 'expiration-icon',
+                                    'x': 185,
+                                    'y': 14
+                              })
+                                .text(function () {
+                                    return '\uf017';
+                                })
+                              .append('title');
+  
+                          var yBackpressureOffset = rowHeight + HEIGHT_FOR_BACKPRESSURE - 4;
+  
+                          // backpressure object threshold
+  
+                          // start
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-tick object',
+                                  'width': 1,
+                                  'height': 3,
+                                  'x': 5,
+                                  'y': yBackpressureOffset
+                              });
+  
+                          // bar
+                          var backpressureCountOffset = 6;
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-object',
+                                  'width': backpressureBarWidth,
+                                  'height': 3,
+                                  'x': backpressureCountOffset,
+                                  'y': yBackpressureOffset
+                              })
+                              .append('title');
+  
+                          // end
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-tick object',
+                                  'width': 1,
+                                  'height': 3,
+                                  'x': backpressureCountOffset + backpressureBarWidth,
+                                  'y': yBackpressureOffset
+                              });
+  
+                          // percent full
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-percent object',
+                                  'width': 0,
+                                  'height': 3,
+                                  'x': backpressureCountOffset,
+                                  'y': yBackpressureOffset
+                              });
+  
+                          // backpressure data size threshold
+  
+                          // start
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-tick data-size',
+                                  'width': 1,
+                                  'height': 3,
+                                  'x': (dimensions.width / 2) + 10,
+                                  'y': yBackpressureOffset
+                              });
+  
+                          // bar
+                          var backpressureDataSizeOffset = (dimensions.width / 2) + 10 + 1;
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-data-size',
+                                  'width': backpressureBarWidth,
+                                  'height': 3,
+                                  'x': backpressureDataSizeOffset,
+                                  'y': yBackpressureOffset
+                              })
+                              .append('title');
+  
+                          // end
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-tick data-size',
+                                  'width': 1,
+                                  'height': 3,
+                                  'x': backpressureDataSizeOffset + backpressureBarWidth,
+                                  'y': yBackpressureOffset
+                              });
+  
+                          // percent full
+                          queued.append('rect')
+                              .attr({
+                                  'class': 'backpressure-percent data-size',
+                                  'width': 0,
+                                  'height': 3,
+                                  'x': backpressureDataSizeOffset,
+                                  'y': yBackpressureOffset
+                              });
+                      } else {
+                          backgrounds.push(queued.select('rect.connection-label-background'));
+                          borders.push(queued.select('rect.connection-label-border'));
+                      }
+  
+                      // update the queued vertical positioning as necessary
+                      queued.attr('transform', function () {
+                          var y = (rowHeight * labelCount++);
+                          return 'translate(0, ' + y + ')';
+                      });
+  
+                      // update the height based on the labels being rendered
+                      connectionLabelContainer.select('rect.body')
+                          .attr('height', function () {
+                              return (rowHeight * labelCount) + HEIGHT_FOR_BACKPRESSURE;
+                          })
+                          .classed('unauthorized', function () {
+                              return d.permissions.canRead === false;
+                          });
+                      connectionLabelContainer.select('rect.border')
+                          .attr('height', function () {
+                              return (rowHeight * labelCount) + HEIGHT_FOR_BACKPRESSURE;
+                          })
+                          .classed('unauthorized', function () {
+                              return d.permissions.canRead === false;
+                          });
+  
+                      // update the coloring of the backgrounds
+                      $.each(backgrounds, function (i, background) {
+                          if (i % 2 === 0) {
+                              background.attr('fill', '#f4f6f7');
+                          } else {
+                              background.attr('fill', '#ffffff');
+                          }
+                      });
+  
+                      // update the coloring of the label borders
+                      $.each(borders, function (i, border) {
+                          if (i > 0) {
+                              border.attr('fill', '#c7d2d7');
+                          } else {
+                              border.attr('fill', 'transparent');
+                          }
+                      });
+  
+                      // determine whether or not to show the expiration icon
+                      connectionLabelContainer.select('text.expiration-icon')
+                          .classed('hidden', function () {
+                              if (d.permissions.canRead) {
+                                  return !isExpirationConfigured(d.component);
+                              } else {
+                                  return true;
+                              }
+                          })
+                          .select('title').text(function () {
+                            if (d.permissions.canRead) {
+                                  return nf._.msg('nf-connection.FlowFilesOlder') + d.component.flowFileExpiration;
+                            } else {
+                                return '';
+                            }
+                        });
+    
+                      // update backpressure object fill
+                      connectionLabelContainer.select('rect.backpressure-object')
+                          .classed('not-configured', function () {
+                              return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseCount);
+                          });
+                      connectionLabelContainer.selectAll('rect.backpressure-tick.object')
+                          .classed('not-configured', function () {
+                              return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseCount);
+                          });
+  
+                      // update backpressure data size fill
+                      connectionLabelContainer.select('rect.backpressure-data-size')
+                          .classed('not-configured', function () {
+                              return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseBytes);
+                          });
+                      connectionLabelContainer.selectAll('rect.backpressure-tick.data-size')
+                          .classed('not-configured', function () {
+                              return nfCommon.isUndefinedOrNull(d.status.aggregateSnapshot.percentUseBytes);
+                          });
+  
+                        if (d.permissions.canWrite) {
+                            // only support dragging the label when appropriate
+                            connectionLabelContainer.call(labelDrag);
+                        }
+    
+                        // update the connection status
+                        connection.call(updateConnectionStatus);
+                    } else {
+                        if (!connectionLabelContainer.empty()) {
+                            connectionLabelContainer.remove();
+                        }
+                    }
+                }
+    
+                // update the position of the label if possible
+              nfCanvasUtils.transition(connection.select('g.connection-label-container'), transition)
+                    .attr('transform', function () {
+                        var label = d3.select(this).select('rect.body');
+                        var position = getLabelPosition(label);
+                        return 'translate(' + position.x + ', ' + position.y + ')';
+                    });
+            });
+        };
+    
+        /**
+         * Updates the stats of the connections in the specified selection.
+         *
+         * @param {selection} updated       The selected connections to update
+         */
+        var updateConnectionStatus = function (updated) {
+            if (updated.empty()) {
+                return;
+            }
+    
+          // update data size
+          var dataSizeDeferred = $.Deferred(function (deferred) {
+                // queued count value
+                updated.select('text.queued tspan.count')
+                    .text(function (d) {
+                      return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.queued, ' ');
+                  });
+  
+              var backpressurePercentDataSize = updated.select('rect.backpressure-percent.data-size');
+              backpressurePercentDataSize.transition()
+                  .duration(400)
+                  .attr({
+                      'width': function (d) {
+                          if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseBytes)) {
+                              return (backpressureBarWidth * d.status.aggregateSnapshot.percentUseBytes) / 100;
+                          } else {
+                              return 0;
+                          }
+                      }
+                  }).each('end', function () {
+                  backpressurePercentDataSize
+                      .classed('warning', function (d) {
+                          return isWarningBytes(d);
+                      })
+                      .classed('error', function (d) {
+                          return isErrorBytes(d);
+                      });
+  
+                  deferred.resolve();
+              });
+  
+              updated.select('rect.backpressure-data-size').select('title').text(function (d) {
+                  if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseBytes)) {
+                      return 'Queue is ' + d.status.aggregateSnapshot.percentUseBytes + '% full based on Back Pressure Data Size Threshold';
+                  } else {
+                      return 'Back Pressure Data Size Threshold is not configured';
+                  }
+              });
+          }).promise();
+  
+          // update object count
+          var objectCountDeferred = $.Deferred(function (deferred) {
+                // queued size value
+                updated.select('text.queued tspan.size')
+                    .text(function (d) {
+                      return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.queued, ' ');
+                  });
+  
+              var backpressurePercentObject = updated.select('rect.backpressure-percent.object');
+              backpressurePercentObject.transition()
+                  .duration(400)
+                  .attr({
+                      'width': function (d) {
+                          if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseCount)) {
+                              return (backpressureBarWidth * d.status.aggregateSnapshot.percentUseCount) / 100;
+                          } else {
+                              return 0;
+                          }
+                      }
+                  }).each('end', function () {
+                  backpressurePercentObject
+                      .classed('warning', function (d) {
+                          return isWarningCount(d);
+                      })
+                      .classed('error', function (d) {
+                          return isErrorCount(d);
+                      });
+  
+                  deferred.resolve();
+              });
+  
+              updated.select('rect.backpressure-object').select('title').text(function (d) {
+                  if (nfCommon.isDefinedAndNotNull(d.status.aggregateSnapshot.percentUseCount)) {
+                      return 'Queue is ' + d.status.aggregateSnapshot.percentUseCount + '% full based on Back Pressure Object Threshold';
+                  } else {
+                      return 'Back Pressure Object Threshold is not configured';
+                  }
+              });
+          }).promise();
+  
+          // update connection once progress bars have transitioned
+          $.when(dataSizeDeferred, objectCountDeferred).done(function () {
+              // connection stroke
+              updated.select('path.connection-path')
+                  .classed('full', function (d) {
+                      return isFullCount(d) || isFullBytes(d);
+                  })
+                  .attr({
+                      'marker-end': getEndMarker
+                  });
+  
+              // border
+              updated.select('rect.border')
+                  .classed('full', function (d) {
+                      return isFullCount(d) || isFullBytes(d);
+                  });
+  
+              // drop shadow
+              updated.select('rect.body')
+                  .attr({
+                      'filter': getDropShadow
+                  });
+            });
+        };
+    
+        /**
+         * Saves the connection entry specified by d with the new configuration specified
+         * in connection.
+         *
+         * @param {type} d
+         * @param {type} connection
+         */
+        var save = function (d, connection) {
+            var entity = {
+              'revision': nfClient.getRevision(d),
+                'component': connection
+            };
+    
+            return $.ajax({
+                type: 'PUT',
+                url: d.uri,
+                data: JSON.stringify(entity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (response) {
+                // request was successful, update the entry
+              nfConnection.set(response);
+            }).fail(function (xhr, status, error) {
+                if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-connection.Connection'),
+                      dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                    });
+                } else {
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+                }
+            });
+        };
+    
+        // removes the specified connections
+        var removeConnections = function (removed) {
+            // consider reloading source/destination of connection being removed
+            removed.each(function (d) {
+              nfCanvasUtils.reloadConnectionSourceAndDestination(d.sourceId, d.destinationId);
+            });
+    
+            // remove the connection
+            removed.remove();
+        };
+    
+      var nfConnection = {
+            config: {
+                selfLoopXOffset: (dimensions.width / 2) + 5,
+                selfLoopYOffset: 25
+            },
+    
+          /**
+           * Initializes the connection.
+           *
+           * @param nfSelectableRef   The nfSelectable module.
+           * @param nfContextMenuRef   The nfContextMenu module.
+           */
+          init: function (nfSelectableRef, nfContextMenuRef, nfConnectionConfigurationRef) {
+              nfSelectable = nfSelectableRef;
+              nfContextMenu = nfContextMenuRef;
+              nfConnectionConfiguration = nfConnectionConfigurationRef;
+  
+                connectionMap = d3.map();
+              removedCache = d3.map();
+              addedCache = d3.map();
+    
+                // create the connection container
+                connectionContainer = d3.select('#canvas').append('g')
+                    .attr({
+                        'pointer-events': 'stroke',
+                        'class': 'connections'
+                    });
+    
+                // define the line generator
+                lineGenerator = d3.svg.line()
+                    .x(function (d) {
+                        return d.x;
+                    })
+                    .y(function (d) {
+                        return d.y;
+                    })
+                    .interpolate('linear');
+    
+                // handle bend point drag events
+                bendPointDrag = d3.behavior.drag()
+                    .on('dragstart', function () {
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+                    })
+                    .on('drag', function (d) {
+                        d.x = d3.event.x;
+                        d.y = d3.event.y;
+    
+                        // redraw this connection
+                        d3.select(this.parentNode).call(updateConnections, {
+                            'updatePath': true,
+                            'updateLabel': false
+                        });
+                    })
+                    .on('dragend', function () {
+                        var connection = d3.select(this.parentNode);
+                        var connectionData = connection.datum();
+                        var bends = connection.selectAll('rect.midpoint').data();
+    
+                        // ensure the bend lengths are the same
+                        if (bends.length === connectionData.component.bends.length) {
+                            // determine if the bend points have moved
+                            var different = false;
+                            for (var i = 0; i < bends.length && !different; i++) {
+                                if (bends[i].x !== connectionData.component.bends[i].x || bends[i].y !== connectionData.component.bends[i].y) {
+                                    different = true;
+                                }
+                            }
+    
+                            // only save the updated bends if necessary
+                            if (different) {
+                                save(connectionData, {
+                                    id: connectionData.id,
+                                    bends: bends
+                                }).fail(function () {
+                                    // restore the previous bend points
+                                    connectionData.bends = $.map(connectionData.component.bends, function (bend) {
+                                        return {
+                                            x: bend.x,
+                                            y: bend.y
+                                        };
+                                    });
+    
+                                    // refresh the connection
+                                    connection.call(updateConnections, {
+                                        'updatePath': true,
+                                        'updateLabel': false
+                                    });
+                                });
+                            }
+                        }
+    
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+                    });
+    
+                // handle endpoint drag events
+                endpointDrag = d3.behavior.drag()
+                    .on('dragstart', function (d) {
+                        // indicate that dragging has begun
+                        d.dragging = true;
+    
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+                    })
+                    .on('drag', function (d) {
+                        d.x = d3.event.x - 8;
+                        d.y = d3.event.y - 8;
+    
+                        // ensure the new destination is valid
+                        d3.select('g.hover').classed('connectable-destination', function () {
+                          return nfCanvasUtils.isValidConnectionDestination(d3.select(this));
+                        });
+    
+                        // redraw this connection
+                        d3.select(this.parentNode).call(updateConnections, {
+                            'updatePath': true,
+                            'updateLabel': false
+                        });
+                    })
+                    .on('dragend', function (d) {
+                        // indicate that dragging as stopped
+                        d.dragging = false;
+    
+                        // get the corresponding connection
+                        var connection = d3.select(this.parentNode);
+                        var connectionData = connection.datum();
+                        var previousDestinationId = connectionData.destinationId;
+    
+                        // attempt to select a new destination
+                        var destination = d3.select('g.connectable-destination');
+    
+                        // resets the connection if we're not over a new destination
+                        if (destination.empty()) {
+                            connection.call(updateConnections, {
+                                'updatePath': true,
+                                'updateLabel': false
+                            });
+                        } else {
+                            // prompt for the new port if appropriate
+                          if (nfCanvasUtils.isProcessGroup(destination) || nfCanvasUtils.isRemoteProcessGroup(destination)) {
+                                // user will select new port and updated connect details will be set accordingly
+                              nfConnectionConfiguration.showConfiguration(connection, destination).done(function () {
+                                    // reload the previous destination
+                                  nfCanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId);
+                                }).fail(function () {
+                                    // reset the connection
+                                    connection.call(updateConnections, {
+                                        'updatePath': true,
+                                        'updateLabel': false
+                                    });
+                                });
+                            } else {
+                                // get the destination details
+                                var destinationData = destination.datum();
+                              var destinationType = nfCanvasUtils.getConnectableTypeForDestination(destination);
+    
+                                var connectionEntity = {
+                                  'revision': nfClient.getRevision(connectionData),
+                                    'component': {
+                                        'id': connectionData.id,
+                                        'destination': {
+                                            'id': destinationData.id,
+                                          'groupId': nfCanvasUtils.getGroupId(),
+                                            'type': destinationType
+                                        }
+                                    }
+                                };
+    
+                                // if this is a self loop and there are less than 2 bends, add them
+                                if (connectionData.bends.length < 2 && connectionData.sourceId === destinationData.id) {
+                                    var rightCenter = {
+                                        x: destinationData.position.x + (destinationData.dimensions.width),
+                                        y: destinationData.position.y + (destinationData.dimensions.height / 2)
+                                    };
+                                  var xOffset = nfConnection.config.selfLoopXOffset;
+                                  var yOffset = nfConnection.config.selfLoopYOffset;
+    
+                                    connectionEntity.component.bends = [];
+                                    connectionEntity.component.bends.push({
+                                        'x': (rightCenter.x + xOffset),
+                                        'y': (rightCenter.y - yOffset)
+                                    });
+                                    connectionEntity.component.bends.push({
+                                        'x': (rightCenter.x + xOffset),
+                                        'y': (rightCenter.y + yOffset)
+                                    });
+                                }
+    
+                                $.ajax({
+                                    type: 'PUT',
+                                    url: connectionData.uri,
+                                    data: JSON.stringify(connectionEntity),
+                                    dataType: 'json',
+                                    contentType: 'application/json'
+                                }).done(function (response) {
+                                    var updatedConnectionData = response.component;
+    
+                                    // refresh to update the label
+                                  nfConnection.set(response);
+    
+                                    // reload the previous destination and the new source/destination
+                                  nfCanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId);
+                                  nfCanvasUtils.reloadConnectionSourceAndDestination(response.sourceId, response.destinationId);
+                                }).fail(function (xhr, status, error) {
+                                  if (xhr.status === 400 || xhr.status === 401 || xhr.status === 403 || xhr.status === 404 || xhr.status === 409) {
+                                      nfDialog.showOkDialog({
+                                          headerText: nf._.msg('nf-connection.Connection'),
+                                          dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                                        });
+    
+                                        // reset the connection
+                                        connection.call(updateConnections, {
+                                            'updatePath': true,
+                                            'updateLabel': false
+                                        });
+                                    } else {
+                                      nfErrorHandler.handleAjaxError(xhr, status, error);
+                                    }
+                                });
+                            }
+                        }
+    
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+                    });
+    
+                // label drag behavior
+                labelDrag = d3.behavior.drag()
+                    .on('dragstart', function (d) {
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+                    })
+                    .on('drag', function (d) {
+                        if (d.bends.length > 1) {
+                            // get the dragged component
+                            var drag = d3.select('rect.label-drag');
+    
+                            // lazily create the drag selection box
+                            if (drag.empty()) {
+                                var connectionLabel = d3.select(this).select('rect.body');
+    
+                                var position = getLabelPosition(connectionLabel);
+                                var width = dimensions.width;
+                                var height = connectionLabel.attr('height');
+    
+                                // create a selection box for the move
+                                drag = d3.select('#canvas').append('rect')
+                                    .attr('x', position.x)
+                                    .attr('y', position.y)
+                                    .attr('class', 'label-drag')
+                                    .attr('width', width)
+                                    .attr('height', height)
+                                    .attr('stroke-width', function () {
+                                      return 1 / nfCanvasUtils.scaleCanvasView();
+                                    })
+                                    .attr('stroke-dasharray', function () {
+                                      return 4 / nfCanvasUtils.scaleCanvasView();
+                                    })
+                                    .datum({
+                                        x: position.x,
+                                        y: position.y,
+                                        width: width,
+                                        height: height
+                                    });
+                            } else {
+                                // update the position of the drag selection
+                                drag.attr('x', function (d) {
+                                    d.x += d3.event.dx;
+                                    return d.x;
+                                })
+                                    .attr('y', function (d) {
+                                        d.y += d3.event.dy;
+                                        return d.y;
+                                    });
+                            }
+    
+                            // calculate the current point
+                            var datum = drag.datum();
+                            var currentPoint = {
+                                x: datum.x + (datum.width / 2),
+                                y: datum.y + (datum.height / 2)
+                            };
+    
+                            var closestBendIndex = -1;
+                            var minDistance;
+                            $.each(d.bends, function (i, bend) {
+                                var bendPoint = {
+                                    'x': bend.x,
+                                    'y': bend.y
+                                };
+    
+                                // get the distance
+                                var distance = distanceBetweenPoints(currentPoint, bendPoint);
+    
+                                // see if its the minimum
+                                if (closestBendIndex === -1 || distance < minDistance) {
+                                    closestBendIndex = i;
+                                    minDistance = distance;
+                                }
+                            });
+    
+                            // record the closest bend
+                            d.labelIndex = closestBendIndex;
+    
+                            // refresh the connection
+                            d3.select(this.parentNode).call(updateConnections, {
+                                'updatePath': true,
+                                'updateLabel': false
+                            });
+                        }
+                    })
+                    .on('dragend', function (d) {
+                        if (d.bends.length > 1) {
+                            // get the drag selection
+                            var drag = d3.select('rect.label-drag');
+    
+                            // ensure we found a drag selection
+                            if (!drag.empty()) {
+                                // remove the drag selection
+                                drag.remove();
+                            }
+    
+                            // only save if necessary
+                            if (d.labelIndex !== d.component.labelIndex) {
+                                // get the connection to refresh below
+                                var connection = d3.select(this.parentNode);
+    
+                                // save the new label index
+                                save(d, {
+                                    id: d.id,
+                                    labelIndex: d.labelIndex
+                                }).fail(function () {
+                                    // restore the previous label index
+                                    d.labelIndex = d.component.labelIndex;
+    
+                                    // refresh the connection
+                                    connection.call(updateConnections, {
+                                        'updatePath': true,
+                                        'updateLabel': false
+                                    });
+                                });
+                            }
+                        }
+    
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+                    });
+            },
+    
+            /**
+             * Adds the specified connection entity.
+             *
+             * @param connectionEntities       The connection
+             * @param options           Configuration options
+             */
+            add: function (connectionEntities, options) {
+                var selectAll = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                }
+    
+              // get the current time
+              var now = new Date().getTime();
+    
+                var add = function (connectionEntity) {
+                  addedCache.set(connectionEntity.id, now);
+  
+                    // add the connection
+                    connectionMap.set(connectionEntity.id, $.extend({
+                        type: 'Connection'
+                    }, connectionEntity));
+                };
+    
+                // determine how to handle the specified connection
+                if ($.isArray(connectionEntities)) {
+                    $.each(connectionEntities, function (_, connectionEntity) {
+                        add(connectionEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(connectionEntities)) {
+                    add(connectionEntities);
+                }
+    
+                // apply the selection and handle new connections
+                var selection = select();
+                selection.enter().call(renderConnections, selectAll);
+                selection.call(updateConnections, {
+                    'updatePath': true,
+                    'updateLabel': false
+              }).call(sort);
+          },
+  
+          /**
+           * Determines if the specified selection is disconnected from other nodes.
+           *
+           * @argument {selection} selection          The selection
+           */
+          isDisconnected: function (selection) {
+  
+              // if nothing is selected return
+              if (selection.empty()) {
+                  return false;
+              }
+              var connections = d3.map();
+              var components = d3.map();
+              var isDisconnected = true;
+  
+              // include connections
+              selection.filter(function (d) {
+                  return d.type === 'Connection';
+              }).each(function (d) {
+                  connections.set(d.id, d);
+              });
+  
+              // include components and ensure their connections are included
+              selection.filter(function (d) {
+                  return d.type !== 'Connection';
+              }).each(function (d) {
+                  components.set(d.id, d.component);
+  
+                  // check all connections of this component
+                  $.each(nfConnection.getComponentConnections(d.id), function (_, connection) {
+                      if (!connections.has(connection.id)) {
+                          isDisconnected = false;
+                          return false;
+                      }
+                  });
+              });
+              if (isDisconnected) {
+  
+                  // go through each connection to ensure its source and destination are included
+                  connections.forEach(function (id, connection) {
+                      if (isDisconnected) {
+  
+                          // determine whether this connection and its components are included within the selection
+                          isDisconnected = components.has(nfCanvasUtils.getConnectionSourceComponentId(connection)) && components.has(nfCanvasUtils.getConnectionDestinationComponentId(connection));
+                      }
+                  });
+              }
+              return isDisconnected;
+            },
+    
+            /**
+             * Populates the graph with the specified connections.
+             *
+             * @argument {object | array} connectionEntities               The connections to add
+             * @argument {object} options                Configuration options
+             */
+            set: function (connectionEntities, options) {
+                var selectAll = false;
+                var transition = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                  transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+                }
+    
+              var set = function (proposedConnectionEntity) {
+                  var currentConnectionEntity = connectionMap.get(proposedConnectionEntity.id);
+  
+                  // set the connection if appropriate due to revision and wasn't previously removed
+                  if (nfClient.isNewerRevision(currentConnectionEntity, proposedConnectionEntity) && !removedCache.has(proposedConnectionEntity.id)) {
+                      connectionMap.set(proposedConnectionEntity.id, $.extend({
+                            type: 'Connection'
+                      }, proposedConnectionEntity));
+                  }
+                };
+    
+                // determine how to handle the specified connection
+                if ($.isArray(connectionEntities)) {
+                    $.each(connectionMap.keys(), function (_, key) {
+                      var currentConnectionEntity = connectionMap.get(key);
+                      var isPresent = $.grep(connectionEntities, function (proposedConnectionEntity) {
+                          return proposedConnectionEntity.id === currentConnectionEntity.id;
+                      });
+  
+                      // if the current connection is not present and was not recently added, remove it
+                      if (isPresent.length === 0 && !addedCache.has(key)) {
+                            connectionMap.remove(key);
+                      }
+                    });
+                    $.each(connectionEntities, function (_, connectionEntity) {
+                        set(connectionEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(connectionEntities)) {
+                    set(connectionEntities);
+                }
+    
+                // apply the selection and handle all new connection
+                var selection = select();
+                selection.enter().call(renderConnections, selectAll);
+                selection.call(updateConnections, {
+                    'updatePath': true,
+                    'updateLabel': true,
+                    'transition': transition
+              }).call(sort);
+                selection.exit().call(removeConnections);
+            },
+    
+            /**
+             * Refreshes the connection in the UI.
+             *
+             * @param {string} connectionId
+             */
+            refresh: function (connectionId) {
+              if (nfCommon.isDefinedAndNotNull(connectionId)) {
+                    d3.select('#id-' + connectionId).call(updateConnections, {
+                        'updatePath': true,
+                        'updateLabel': true
+                    });
+                } else {
+                    d3.selectAll('g.connection').call(updateConnections, {
+                        'updatePath': true,
+                        'updateLabel': true
+                    });
+                }
+            },
+    
+            /**
+             * Refreshes the components necessary after a pan event.
+             */
+            pan: function () {
+                d3.selectAll('g.connection.entering, g.connection.leaving').call(updateConnections, {
+                    'updatePath': false,
+                    'updateLabel': true
+                });
+            },
+    
+            /**
+             * Removes the specified connection.
+             *
+           * @param {array|string} connectionIds      The connection id
+             */
+          remove: function (connectionIds) {
+              var now = new Date().getTime();
+  
+              if ($.isArray(connectionIds)) {
+                  $.each(connectionIds, function (_, connectionId) {
+                      removedCache.set(connectionId, now);
+                      connectionMap.remove(connectionId);
+                    });
+                } else {
+                  removedCache.set(connectionIds, now);
+                  connectionMap.remove(connectionIds);
+                }
+    
+                // apply the selection and handle all removed connections
+                select().exit().call(removeConnections);
+            },
+    
+            /**
+             * Removes all processors.
+             */
+            removeAll: function () {
+              nfConnection.remove(connectionMap.keys());
+            },
+    
+            /**
+             * Reloads the connection state from the server and refreshes the UI.
+             *
+             * @param {string} id       The connection id
+             */
+            reload: function (id) {
+                if (connectionMap.has(id)) {
+                    var connectionEntity = connectionMap.get(id);
+                    return $.ajax({
+                        type: 'GET',
+                        url: connectionEntity.uri,
+                        dataType: 'json'
+                    }).done(function (response) {
+                      nfConnection.set(response);
+                  });
+              }
+          },
+  
+          /**
+           * Reloads the connection status from the server and refreshes the UI.
+           *
+           * @param {string} id       The connection id
+           */
+          reloadStatus: function (id) {
+              if (connectionMap.has(id)) {
+                  return $.ajax({
+                      type: 'GET',
+                      url: '../nifi-api/flow/connections/' + encodeURIComponent(id) + '/status',
+                      dataType: 'json'
+                  }).done(function (response) {
+                      // update the existing connection
+                      var connectionEntity = connectionMap.get(id);
+                      connectionEntity.status = response.connectionStatus;
+                      connectionMap.set(id, connectionEntity);
+  
+                      // update the UI
+                      select().call(updateConnectionStatus);
+                    });
+                }
+            },
+    
+            /**
+             * Gets the connection that have a source or destination component with the specified id.
+             *
+             * @param {string} id     component id
+             * @returns {Array}     components connections
+             */
+            getComponentConnections: function (id) {
+                var connections = [];
+                connectionMap.forEach(function (_, entry) {
+                    // see if this component is the source or destination of this connection
+                  if (nfCanvasUtils.getConnectionSourceComponentId(entry) === id || nfCanvasUtils.getConnectionDestinationComponentId(entry) === id) {
+                        connections.push(entry);
+                    }
+                });
+                return connections;
+            },
+    
+            /**
+             * If the connection id is specified it is returned. If no connection id
+             * specified, all connections are returned.
+             *
+             * @param {string} id
+             */
+            get: function (id) {
+              if (nfCommon.isUndefined(id)) {
+                    return connectionMap.values();
+                } else {
+                    return connectionMap.get(id);
+                }
+          },
+  
+          /**
+           * Expires the caches up to the specified timestamp.
+           *
+           * @param timestamp
+           */
+          expireCaches: function (timestamp) {
+              var expire = function (cache) {
+                  cache.forEach(function (id, entryTimestamp) {
+                      if (timestamp > entryTimestamp) {
+                          cache.remove(id);
+                      }
+                  });
+              };
+  
+              expire(addedCache);
+              expire(removedCache);
+          }
+      };
+  
+      return nfConnection;
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js
new file mode 100644
index 000000000000..74993453079b
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js
@@ -0,0 +1,631 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'd3',
+                'nf.Common',
+                'nf.CanvasUtils',
+                'nf.ng.Bridge'],
+            function ($, d3, nfCommon, nfCanvasUtils, nfNgBridge) {
+                return (nf.ContextMenu = factory($, d3, nfCommon, nfCanvasUtils, nfNgBridge));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ContextMenu =
+            factory(require('jquery'),
+                require('d3'),
+                require('nf.Common'),
+                require('nf.CanvasUtils'),
+                require('nf.ng.Bridge')));
+    } else {
+        nf.ContextMenu = factory(root.$,
+            root.d3,
+            root.nf.Common,
+            root.nf.CanvasUtils,
+            root.nf.ng.Bridge);
+    }
+}(this, function ($, d3, nfCommon, nfCanvasUtils, nfNgBridge) {
+    'use strict';
+
+    var nfActions;
+
+    /**
+     * Returns whether the current group is not the root group.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var isNotRootGroup = function (selection) {
+        return nfCanvasUtils.getParentGroupId() !== null && selection.empty();
+    };
+
+    /**
+     * Determines whether the component in the specified selection is configurable.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var isConfigurable = function (selection) {
+        return nfCanvasUtils.isConfigurable(selection);
+    };
+
+    /**
+     * Determines whether the component in the specified selection has configuration details.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var hasDetails = function (selection) {
+        return nfCanvasUtils.hasDetails(selection);
+    };
+
+    /**
+     * Determines whether the components in the specified selection are deletable.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var isDeletable = function (selection) {
+        return nfCanvasUtils.areDeletable(selection);
+    };
+
+    /**
+     * Determines whether user can create a template from the components in the specified selection.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var canCreateTemplate = function (selection) {
+        return nfCanvasUtils.canWrite() && (selection.empty() && nfCanvasUtils.canRead(selection));
+    };
+
+    /**
+     * Determines whether user can upload a template.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var canUploadTemplate = function (selection) {
+        return nfCanvasUtils.canWrite() && selection.empty();
+    };
+
+    /**
+     * Determines whether components in the specified selection are group-able.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var canGroup = function (selection) {
+        return nfCanvasUtils.getComponentByType('Connection').isDisconnected(selection) && nfCanvasUtils.canModify(selection);
+    };
+
+    /**
+     * Determines whether components in the specified selection are enable-able.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var canEnable = function (selection) {
+        return nfCanvasUtils.canEnable(selection);
+    };
+
+    /**
+     * Determines whether components in the specified selection are diable-able.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var canDisable = function (selection) {
+        return nfCanvasUtils.canDisable(selection);
+    };
+
+    /**
+     * Determines whether user can manage policies of the components in the specified selection.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var canManagePolicies = function (selection) {
+        return nfCanvasUtils.isConfigurableAuthorizer() && nfCanvasUtils.canManagePolicies(selection);
+    };
+
+    /**
+     * Determines whether the components in the specified selection are runnable.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var isRunnable = function (selection) {
+        return nfCanvasUtils.areRunnable(selection);
+    };
+
+    /**
+     * Determines whether the components in the specified selection are stoppable.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var isStoppable = function (selection) {
+        return nfCanvasUtils.areStoppable(selection);
+    };
+
+    /**
+     * Determines whether the components in the specified selection support stats.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var supportsStats = function (selection) {
+        // ensure the correct number of components are selected
+        if (selection.size() !== 1) {
+            return false;
+        }
+
+        return nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isProcessGroup(selection) || nfCanvasUtils.isRemoteProcessGroup(selection) || nfCanvasUtils.isConnection(selection);
+    };
+
+    /**
+     * Determines whether the components in the specified selection has usage documentation.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var hasUsage = function (selection) {
+        // ensure the correct number of components are selected
+        if (selection.size() !== 1) {
+            return false;
+        }
+        if (nfCanvasUtils.canRead(selection) === false) {
+            return false;
+        }
+
+        return nfCanvasUtils.isProcessor(selection);
+    };
+
+    /**
+     * Determines whether there is one component selected.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var isNotConnection = function (selection) {
+        return selection.size() === 1 && !nfCanvasUtils.isConnection(selection);
+    };
+
+    /**
+     * Determines whether the components in the specified selection are copyable.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var isCopyable = function (selection) {
+        return nfCanvasUtils.isCopyable(selection);
+    };
+
+    /**
+     * Determines whether the components in the specified selection are pastable.
+     *
+     * @param {selection} selection         The selection of currently selected components
+     */
+    var isPastable = function (selection) {
+        return nfCanvasUtils.isPastable();
+    };
+
+    /**
+     * Determines whether the specified selection is empty.
+     *
+     * @param {selection} selection         The seleciton
+     */
+    var emptySelection = function (selection) {
+        return selection.empty();
+    };
+
+    /**
+     * Determines whether the componets in the specified selection support being moved to the front.
+     *
+     * @param {selection} selection         The selection
+     */
+    var canMoveToFront = function (selection) {
+        // ensure the correct number of components are selected
+        if (selection.size() !== 1) {
+            return false;
+        }
+        if (nfCanvasUtils.canModify(selection) === false) {
+            return false;
+        }
+
+        return nfCanvasUtils.isConnection(selection);
+    };
+
+    /**
+     * Determines whether the components in the specified selection are alignable.
+     *
+     * @param {selection} selection          The selection
+     */
+    var canAlign = function (selection) {
+        return nfCanvasUtils.canAlign(selection);
+    };
+
+    /**
+     * Determines whether the components in the specified selection are colorable.
+     *
+     * @param {selection} selection          The selection
+     */
+    var isColorable = function (selection) {
+        return nfCanvasUtils.isColorable(selection);
+    };
+
+    /**
+     * Determines whether the component in the specified selection is a connection.
+     *
+     * @param {selection} selection         The selection
+     */
+    var isConnection = function (selection) {
+        // ensure the correct number of components are selected
+        if (selection.size() !== 1) {
+            return false;
+        }
+
+        return nfCanvasUtils.isConnection(selection);
+    };
+
+    /**
+     * Determines whether the component in the specified selection could possibly have downstream components.
+     *
+     * @param {selection} selection         The selection
+     */
+    var hasDownstream = function (selection) {
+        // ensure the correct number of components are selected
+        if (selection.size() !== 1) {
+            return false;
+        }
+
+        return nfCanvasUtils.isFunnel(selection) || nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isProcessGroup(selection) ||
+            nfCanvasUtils.isRemoteProcessGroup(selection) || nfCanvasUtils.isInputPort(selection) ||
+            (nfCanvasUtils.isOutputPort(selection) && nfCanvasUtils.getParentGroupId() !== null);
+    };
+
+    /**
+     * Determines whether the component in the specified selection could possibly have upstream components.
+     *
+     * @param {selection} selection         The selection
+     */
+    var hasUpstream = function (selection) {
+        // ensure the correct number of components are selected
+        if (selection.size() !== 1) {
+            return false;
+        }
+
+        return nfCanvasUtils.isFunnel(selection) || nfCanvasUtils.isProcessor(selection) || nfCanvasUtils.isProcessGroup(selection) ||
+            nfCanvasUtils.isRemoteProcessGroup(selection) || nfCanvasUtils.isOutputPort(selection) ||
+            (nfCanvasUtils.isInputPort(selection) && nfCanvasUtils.getParentGroupId() !== null);
+    };
+
+    /**
+     * Determines whether the current selection is a stateful processor.
+     *
+     * @param {selection} selection
+     */
+    var isStatefulProcessor = function (selection) {
+        // ensure the correct number of components are selected
+        if (selection.size() !== 1) {
+            return false;
+        }
+        if (nfCanvasUtils.canRead(selection) === false || nfCanvasUtils.canModify(selection) === false) {
+            return false;
+        }
+
+        if (nfCanvasUtils.isProcessor(selection)) {
+            var processorData = selection.datum();
+            return processorData.component.persistsState === true;
+        } else {
+            return false;
+        }
+    };
+
+    /**
+     * Determines whether the current selection is a process group.
+     *
+     * @param {selection} selection
+     */
+    var isProcessGroup = function (selection) {
+        // ensure the correct number of components are selected
+        if (selection.size() !== 1) {
+            return false;
+        }
+
+        return nfCanvasUtils.isProcessGroup(selection);
+    };
+
+    /**
+     * Determines whether the current selection could have provenance.
+     *
+     * @param {selection} selection
+     */
+    var canAccessProvenance = function (selection) {
+        // ensure the correct number of components are selected
+        if (selection.size() !== 1) {
+            return false;
+        }
+
+        return !nfCanvasUtils.isLabel(selection) && !nfCanvasUtils.isConnection(selection) && !nfCanvasUtils.isProcessGroup(selection)
+            && !nfCanvasUtils.isRemoteProcessGroup(selection) && nfCommon.canAccessProvenance();
+    };
+
+    /**
+     * Determines whether the current selection is a remote process group.
+     *
+     * @param {selection} selection
+     */
+    var isRemoteProcessGroup = function (selection) {
+        // ensure the correct number of components are selected
+        if (selection.size() !== 1) {
+            return false;
+        }
+        if (nfCanvasUtils.canRead(selection) === false) {
+            return false;
+        }
+
+        return nfCanvasUtils.isRemoteProcessGroup(selection);
+    };
+
+    /**
+     * Determines if the components in the specified selection support starting transmission.
+     *
+     * @param {selection} selection
+     */
+    var canStartTransmission = function (selection) {
+        if (nfCanvasUtils.canModify(selection) === false) {
+            return false;
+        }
+
+        return nfCanvasUtils.canAllStartTransmitting(selection);
+    };
+
+    /**
+     * Determines if the components in the specified selection support stopping transmission.
+     *
+     * @param {selection} selection
+     */
+    var canStopTransmission = function (selection) {
+        if (nfCanvasUtils.canModify(selection) === false) {
+            return false;
+        }
+
+        return nfCanvasUtils.canAllStopTransmitting(selection);
+    };
+
+    /**
+     * Only DFMs can empty a queue.
+     *
+     * @param {selection} selection
+     */
+    var canEmptyQueue = function (selection) {
+        return isConnection(selection);
+    };
+
+    /**
+     * Only DFMs can list a queue.
+     *
+     * @param {selection} selection
+     */
+    var canListQueue = function (selection) {
+        return isConnection(selection);
+    };
+
+    /**
+     * Determines if the components in the specified selection can be moved into a parent group.
+     *
+     * @param {type} selection
+     */
+    var canMoveToParent = function (selection) {
+        if (nfCanvasUtils.canModify(selection) === false) {
+            return false;
+        }
+
+        // TODO - also check can modify in parent
+
+        return !selection.empty() && nfCanvasUtils.getComponentByType('Connection').isDisconnected(selection) && nfCanvasUtils.getParentGroupId() !== null;
+    };
+
+    /**
+     * Adds a menu item to the context menu.
+     *
+     * {
+     *      click: refresh (function),
+     *      text: 'Start' (string),
+     *      clazz: 'fa fa-refresh'
+     * }
+     *
+     * @param {jQuery} contextMenu The context menu
+     * @param {object} item The menu item configuration
+     */
+    var addMenuItem = function (contextMenu, item) {
+        if (typeof item.click === 'function') {
+            var menuItem = $('<div class="context-menu-item"></div>').on('click', item['click']).on('contextmenu', function (evt) {
+                // invoke the desired action
+                item['click'](evt);
+
+                // stop propagation and prevent default
+                evt.preventDefault();
+                evt.stopPropagation();
+            }).on('mouseenter', function () {
+                $(this).addClass('hover');
+            }).on('mouseleave', function () {
+                $(this).removeClass('hover');
+            }).appendTo(contextMenu);
+
+            // create the img and conditionally add the style
+            var img = $('<div class="context-menu-item-img"></div>').addClass(item['clazz']).appendTo(menuItem);
+            if (nfCommon.isDefinedAndNotNull(item['imgStyle'])) {
+                img.addClass(item['imgStyle']);
+            }
+
+            $('<div class="context-menu-item-text"></div>').text(item['text']).appendTo(menuItem);
+            $('<div class="clear"></div>').appendTo(menuItem);
+        }
+    };
+
+    /**
+     * Positions and shows the context menu.
+     *
+     * @param {jQuery} contextMenu  The context menu
+     * @param {object} options      The context menu configuration
+     */
+    var positionAndShow = function (contextMenu, options) {
+        contextMenu.css({
+            'left': options.x + 'px',
+            'top': options.y + 'px'
+        }).show();
+    };
+
+    /**
+     * Executes the specified action with the optional selection.
+     *
+     * @param {string} action
+     * @param {selection} selection
+     * @param {mouse event} evt
+     */
+    var executeAction = function (action, selection, evt) {
+        // execute the action
+        nfActions[action](selection, evt);
+
+        // close the context menu
+        nfContextMenu.hide();
+    };
+
+    // defines the available actions and the conditions which they apply
+    var actions = [
+        {condition: emptySelection, menuItem: {clazz: 'fa fa-refresh', text: nf._.msg('nf-context-menu.Refresh'), action: 'reload'}},
+        {condition: isNotRootGroup, menuItem: {clazz: 'fa fa-level-up', text: nf._.msg('nf-context-menu.LeaveGroup'), action: 'leaveGroup'}},
+        {condition: isConfigurable, menuItem: {clazz: 'fa fa-gear', text: nf._.msg('nf-context-menu.Configure'), action: 'showConfiguration'}},
+        {condition: hasDetails, menuItem: {clazz: 'fa fa-gear', text: nf._.msg('nf-context-menu.ViewConfiguration'), action: 'showDetails'}},
+        {condition: isProcessGroup, menuItem: {clazz: 'fa fa-sign-in', text: nf._.msg('nf-context-menu.EnterGroup'), action: 'enterGroup'}},
+        {condition: isRunnable, menuItem: {clazz: 'fa fa-play', text: nf._.msg('nf-context-menu.Start'), action: 'start'}},
+        {condition: isStoppable, menuItem: {clazz: 'fa fa-stop', text: nf._.msg('nf-context-menu.Stop'), action: 'stop'}},
+        {condition: canEnable, menuItem: {clazz: 'fa fa-flash', text: nf._.msg('nf-context-menu.canEnable'), action: 'enable'}},
+        {condition: canDisable, menuItem: {clazz: 'icon icon-enable-false', text: nf._.msg('nf-context-menu.canDisable'), action: 'disable'}},
+        {condition: canGroup, menuItem: {clazz: 'icon icon-group', text: nf._.msg('nf-context-menu.canGroup'), action: 'group'}},
+        {condition: isRemoteProcessGroup, menuItem: {clazz: 'fa fa-cloud', text: nf._.msg('nf-context-menu.RemotePorts'), action: 'remotePorts'}},
+        {condition: canStartTransmission, menuItem: {clazz: 'fa fa-bullseye', text: nf._.msg('nf-context-menu.EnableTransmission'), action: 'enableTransmission'}},
+        {condition: canStopTransmission, menuItem: {clazz: 'icon icon-transmit-false', text: nf._.msg('nf-context-menu.DisableTransmission'), action: 'disableTransmission'}},
+        {condition: supportsStats, menuItem: {clazz: 'fa fa-area-chart', text: nf._.msg('nf-context-menu.StatsHistory'), action: 'showStats'}},
+        {condition: canAccessProvenance, menuItem: {clazz: 'icon icon-provenance', imgStyle: 'context-menu-provenance', text: nf._.msg('nf-context-menu.DataProvenance'), action: 'openProvenance'}},
+        {condition: isStatefulProcessor, menuItem: {clazz: 'fa fa-tasks', text: nf._.msg('nf-context-menu.ViewState'), action: 'viewState'}},
+        {condition: canMoveToFront, menuItem: {clazz: 'fa fa-clone', text: nf._.msg('nf-context-menu.BringFront'), action: 'toFront'}},
+        {condition: isConnection, menuItem: {clazz: 'fa fa-long-arrow-left', text: nf._.msg('nf-context-menu.GoToSource'), action: 'showSource'}},
+        {condition: isConnection, menuItem: {clazz: 'fa fa-long-arrow-right', text: nf._.msg('nf-context-menu.GoToDestination'), action: 'showDestination'}},
+        {condition: hasUpstream, menuItem: {clazz: 'icon icon-connect', text: nf._.msg('nf-context-menu.UpstreamConnections'), action: 'showUpstream'}},
+        {condition: hasDownstream, menuItem: {clazz: 'icon icon-connect', text: nf._.msg('nf-context-menu.DownstreamConnections'), action: 'showDownstream'}},
+        {condition: hasUsage, menuItem: {clazz: 'fa fa-book', text: nf._.msg('nf-context-menu.Usage'), action: 'showUsage'}},
+        {condition: isRemoteProcessGroup, menuItem: {clazz: 'fa fa-refresh', text: nf._.msg('nf-context-menu.Refresh'), action: 'refreshRemoteFlow'}},
+        {condition: isRemoteProcessGroup, menuItem: {clazz: 'fa fa-external-link', text: nf._.msg('nf-context-menu.GoTo'), action: 'openUri'}},
+        {condition: isColorable, menuItem: {clazz: 'fa fa-paint-brush', text: nf._.msg('nf-context-menu.ChangeColor'), action: 'fillColor'}},
+        {condition: isNotConnection, menuItem: {clazz: 'fa fa-crosshairs', text: nf._.msg('nf-context-menu.CenterInView'), action: 'center'}},
+        {condition: isCopyable, menuItem: {clazz: 'fa fa-copy', text: nf._.msg('nf-context-menu.Copy'), action: 'copy'}},
+        {condition: isPastable, menuItem: {clazz: 'fa fa-paste', text: nf._.msg('nf-context-menu.Paste'), action: 'paste'}},
+        {condition: canMoveToParent, menuItem: {clazz: 'fa fa-arrows', text: nf._.msg('nf-context-menu.MoveParentGroup'), action: 'moveIntoParent'}},
+        {condition: canListQueue, menuItem: {clazz: 'fa fa-list', text: nf._.msg('nf-context-menu.QueueList'), action: 'listQueue'}},
+        {condition: canEmptyQueue, menuItem: {clazz: 'fa fa-minus-circle', text: nf._.msg('nf-context-menu.EmptyQueue'), action: 'emptyQueue'}},
+        {condition: isDeletable, menuItem: {clazz: 'fa fa-trash', text: nf._.msg('nf-context-menu.Delete'), action: 'delete'}},
+        {condition: canManagePolicies, menuItem: {clazz: 'fa fa-key', text: nf._.msg('nf-context-menu.canManagePolicies'), action: 'managePolicies'}},
+        {condition: canAlign, menuItem: {clazz: 'fa fa-align-center', text: nf._.msg('nf-context-menu.canAlign1'), action: 'alignVertical'}},
+        {condition: canAlign, menuItem: { clazz: 'fa fa-align-center fa-rotate-90', text: nf._.msg('nf-context-menu.canAlign2'), action: 'alignHorizontal'}},
+        {condition: canUploadTemplate, menuItem: {clazz: 'icon icon-template-import', text: nf._.msg('nf-context-menu.canUploadTemplate'), action: 'uploadTemplate'}},
+        {condition: canCreateTemplate, menuItem: {clazz: 'icon icon-template-save', text: nf._.msg('nf-context-menu.canCreateTemplate'), action: 'template'}}
+    ];
+
+    var nfContextMenu = {
+
+        /**
+         * Initialize the context menu.
+         *
+         * @param nfActionsRef   The nfActions module.
+         */
+        init: function (nfActionsRef) {
+            nfActions = nfActionsRef;
+
+            $('#context-menu').on('contextmenu', function (evt) {
+                // stop propagation and prevent default
+                evt.preventDefault();
+                evt.stopPropagation();
+            });
+        },
+
+        /**
+         * Shows the context menu.
+         */
+        show: function () {
+            var contextMenu = $('#context-menu').empty();
+            var canvasBody = $('#canvas-body').get(0);
+            var bannerFooter = $('#banner-footer').get(0);
+            var breadCrumb = $('#breadcrumbs').get(0);
+
+            // get the current selection
+            var selection = nfCanvasUtils.getSelection();
+
+            // consider each component action for the current selection
+            $.each(actions, function (_, action) {
+                // determine if this action is application for this selection
+                if (action.condition(selection, nfCanvasUtils.getComponentByType('Connection'))) {
+                    var menuItem = action.menuItem;
+
+                    addMenuItem(contextMenu, {
+                        clazz: menuItem.clazz,
+                        imgStyle: menuItem.imgStyle,
+                        text: menuItem.text,
+                        click: function (evt) {
+                            executeAction(menuItem.action, selection, evt);
+                        }
+                    });
+                }
+            });
+
+            // get the location for the context menu
+            var position = d3.mouse(canvasBody);
+
+            // nifi 1864 make sure the context menu is not hidden by the browser boundaries
+            if (position[0] + contextMenu.width() > canvasBody.clientWidth) {
+                position[0] = canvasBody.clientWidth - contextMenu.width() - 2;
+            }
+            if (position[1] + contextMenu.height() > (canvasBody.clientHeight - breadCrumb.clientHeight - bannerFooter.clientHeight)) {
+                position[1] = canvasBody.clientHeight - breadCrumb.clientHeight - bannerFooter.clientHeight - contextMenu.height() - 3;
+            }
+
+            // show the context menu
+            positionAndShow(contextMenu, {
+                'x': position[0],
+                'y': position[1]
+            });
+
+            // inform Angular app incase we've click on the canvas
+            nfNgBridge.digest();
+        },
+
+        /**
+         * Hides the context menu.
+         */
+        hide: function () {
+            $('#context-menu').hide();
+        },
+
+        /**
+         * Activates the context menu for the components in the specified selection.
+         *
+         * @param {selection} components    The components to enable the context menu for
+         */
+        activate: function (components) {
+            components.on('contextmenu.selection', function () {
+                // get the clicked component to update selection
+                nfContextMenu.show();
+
+                // stop propagation and prevent default
+                d3.event.preventDefault();
+                d3.event.stopPropagation();
+            });
+        }
+    };
+
+    return nfContextMenu;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
new file mode 100644
index 000000000000..3491f55fe66f
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
@@ -0,0 +1,2167 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.ControllerServices',
+                  'nf.Settings',
+                  'nf.UniversalCapture',
+                  'nf.CustomUi',
+                  'nf.CanvasUtils',
+                  'nf.ReportingTask',
+                  'nf.Processor'],
+              function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerServices, nfSettings, nfUniversalCapture, nfCustomUi, nfCanvasUtils, nfReportingTask, nfProcessor) {
+                  return (nf.ControllerService = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerServices, nfSettings, nfUniversalCapture, nfCustomUi, nfCanvasUtils, nfReportingTask, nfProcessor));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ControllerService =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.ControllerServices'),
+                  require('nf.Settings'),
+                  require('nf.UniversalCapture'),
+                  require('nf.CustomUi'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ReportingTask'),
+                  require('nf.Processor')));
+      } else {
+          nf.ControllerService = factory(root.$,
+              root.d3,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.ControllerServices,
+              root.nf.Settings,
+              root.nf.UniversalCapture,
+              root.nf.CustomUi,
+              root.nf.CanvasUtils,
+              root.nf.ReportingTask,
+              root.nf.Processor);
+      }
+  }(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerServices, nfSettings, nfUniversalCapture, nfCustomUi, nfCanvasUtils, nfReportingTask, nfProcessor) {
+      'use strict';
+    
+        var config = {
+            edit: 'edit',
+            readOnly: 'read-only',
+            serviceOnly: 'SERVICE_ONLY',
+          serviceAndReferencingComponents: 'SERVICE_AND_REFERENCING_COMPONENTS',
+          urls: {
+              api: '../nifi-api'
+          }
+        };
+    
+        /**
+         * Handle any expected controller service configuration errors.
+         *
+         * @argument {object} xhr       The XmlHttpRequest
+         * @argument {string} status    The status of the request
+         * @argument {string} error     The error
+         */
+        var handleControllerServiceConfigurationError = function (xhr, status, error) {
+            if (xhr.status === 400) {
+                var errors = xhr.responseText.split('\n');
+    
+                var content;
+                if (errors.length === 1) {
+                    content = $('<span></span>').text(errors[0]);
+                } else {
+                  content = nfCommon.formatUnorderedList(errors);
+                }
+    
+              nfDialog.showOkDialog({
+                    dialogContent: content,
+                  headerText: nf._.msg('nf-controller-service.ControllerService')
+                });
+            } else {
+              nfErrorHandler.handleAjaxError(xhr, status, error);
+            }
+        };
+    
+        /**
+         * Determines whether the user has made any changes to the controller service configuration
+         * that needs to be saved.
+         */
+        var isSaveRequired = function () {
+            var entity = $('#controller-service-configuration').data('controllerServiceDetails');
+    
+            // determine if any controller service settings have changed
+    
+            if ($('#controller-service-name').val() !== entity.component['name']) {
+                return true;
+            }
+            if ($('#controller-service-comments').val() !== entity.component['comments']) {
+                return true;
+            }
+    
+            // defer to the properties
+            return $('#controller-service-properties').propertytable('isSaveRequired');
+        };
+    
+        /**
+         * Marshals the data that will be used to update the contr oller service's configuration.
+         */
+        var marshalDetails = function () {
+            // properties
+            var properties = $('#controller-service-properties').propertytable('marshalProperties');
+    
+            // create the controller service dto
+            var controllerServiceDto = {};
+            controllerServiceDto['id'] = $('#controller-service-id').text();
+            controllerServiceDto['name'] = $('#controller-service-name').val();
+            controllerServiceDto['comments'] = $('#controller-service-comments').val();
+    
+            // set the properties
+            if ($.isEmptyObject(properties) === false) {
+                controllerServiceDto['properties'] = properties;
+            }
+    
+            // create the controller service entity
+            var controllerServiceEntity = {};
+            controllerServiceEntity['component'] = controllerServiceDto;
+    
+            // return the marshaled details
+            return controllerServiceEntity;
+        };
+    
+        /**
+         * Validates the specified details.
+         *
+         * @argument {object} details       The details to validate
+         */
+        var validateDetails = function (details) {
+            return true;
+        };
+    
+        /**
+         * Reloads the specified controller service if we have read permissions. It's referencing and referenced
+         * components are NOT reloaded.
+         *
+         * @param {jQuery} serviceTable
+         * @param {string} id
+         */
+        var reloadControllerService = function (serviceTable, id) {
+            // get the table and update the row accordingly
+            var controllerServiceGrid = serviceTable.data('gridInstance');
+            var controllerServiceData = controllerServiceGrid.getData();
+            var controllerServiceEntity = controllerServiceData.getItemById(id);
+    
+            // this may happen if controller service A references another controller
+            // service B that has been removed. attempting to enable/disable/remove A
+            // will attempt to reload B which is no longer a known service. also ensure
+            // we have permissions to reload the service
+          if (nfCommon.isUndefined(controllerServiceEntity) || controllerServiceEntity.permissions.canRead === false) {
+                return $.Deferred(function (deferred) {
+                    deferred.reject();
+                }).promise();
+            }
+    
+            return $.ajax({
+                type: 'GET',
+                url: controllerServiceEntity.uri,
+                dataType: 'json'
+            }).done(function (response) {
+                renderControllerService(serviceTable, response);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Renders the specified controller service.
+         *
+         * @param {object} serviceTable
+         * @param {object} controllerServiceEntity
+         */
+        var renderControllerService = function (serviceTable, controllerServiceEntity) {
+            // get the table and update the row accordingly
+            var controllerServiceGrid = serviceTable.data('gridInstance');
+            var controllerServiceData = controllerServiceGrid.getData();
+            var currentControllerServiceEntity = controllerServiceData.getItemById(controllerServiceEntity.id);
+            controllerServiceData.updateItem(controllerServiceEntity.id, $.extend({
+                bulletins: currentControllerServiceEntity.bulletins
+            }, controllerServiceEntity));
+        };
+    
+        /**
+         * Reloads the specified controller services and all of its referencing
+         * and referenced components.
+         *
+         * @param {jQuery} serviceTable
+         * @param {type} controllerService
+         */
+        var reloadControllerServiceAndReferencingComponents = function (serviceTable, controllerService) {
+            reloadControllerService(serviceTable, controllerService.id).done(function (response) {
+                reloadControllerServiceReferences(serviceTable, response.component);
+            });
+        };
+    
+        /**
+         * Reloads components that reference this controller service as well as
+         * other services that this controller service references.
+         *
+         * @param {jQuery} serviceTable
+         * @param {object} controllerService
+         */
+        var reloadControllerServiceReferences = function (serviceTable, controllerService) {
+            // reload all dependent processors if they are currently visible
+            $.each(controllerService.referencingComponents, function (_, referencingComponentEntity) {
+                // ensure we can read the referencing component prior to reloading
+                if (referencingComponentEntity.permissions.canRead === false) {
+                    return;
+                }
+    
+                var reference = referencingComponentEntity.component;
+                if (reference.referenceType === 'Processor') {
+                    // reload the processor on the canvas if appropriate
+                  if (nfCanvasUtils.getGroupId() === reference.groupId) {
+                      nfProcessor.reload(reference.id);
+                    }
+    
+                    // update the current active thread count
+                    $('div.' + reference.id + '-active-threads').text(reference.activeThreadCount);
+    
+                    // update the current state of this processor
+                    var referencingComponentState = $('div.' + reference.id + '-state');
+                    if (referencingComponentState.length) {
+                        updateReferencingSchedulableComponentState(referencingComponentState, reference);
+                    }
+                } else if (reference.referenceType === 'ReportingTask') {
+                    // reload the referencing reporting tasks
+                  nfReportingTask.reload(reference.id);
+    
+                    // update the current active thread count
+                    $('div.' + reference.id + '-active-threads').text(reference.activeThreadCount);
+    
+                    // update the current state of this reporting task
+                    var referencingComponentState = $('div.' + reference.id + '-state');
+                    if (referencingComponentState.length) {
+                        updateReferencingSchedulableComponentState(referencingComponentState, reference);
+                    }
+                } else {
+                    // reload the referencing services
+                    reloadControllerService(serviceTable, reference.id);
+    
+                    // update the current state of this service
+                    var referencingComponentState = $('div.' + reference.id + '-state');
+                    if (referencingComponentState.length) {
+                        updateReferencingServiceState(referencingComponentState, reference);
+                    }
+    
+                    // consider it's referencing components if appropriate
+                    if (reference.referenceCycle === false) {
+                        reloadControllerServiceReferences(serviceTable, reference);
+                    }
+                }
+            });
+    
+            // see if this controller service references another controller service
+            // in order to update the referenced service referencing components
+          nfControllerService.reloadReferencedServices(serviceTable, controllerService);
+        };
+    
+        /**
+         * Adds a border to the controller service referencing components if necessary.
+         *
+         * @argument {jQuery} referenceContainer
+         */
+        var updateReferencingComponentsBorder = function (referenceContainer) {
+            // determine if it is too big
+          var tooBig = referenceContainer.get(0).scrollHeight > Math.round(referenceContainer.innerHeight()) ||
+              referenceContainer.get(0).scrollWidth > Math.round(referenceContainer.innerWidth());
+    
+            // draw the border if necessary
+            if (referenceContainer.is(':visible') && tooBig) {
+                referenceContainer.css('border-width', '1px');
+            } else {
+                referenceContainer.css('border-width', '0px');
+            }
+        };
+    
+        /**
+         * Updates the specified bulletinIcon with the specified bulletins if necessary.
+         *
+         * @param {array} bulletins
+         * @param {jQuery} bulletinIcon
+         */
+        var updateBulletins = function (bulletins, bulletinIcon) {
+            var currentBulletins = bulletinIcon.data('bulletins');
+    
+            // update the bulletins if necessary
+          if (nfCommon.doBulletinsDiffer(currentBulletins, bulletins)) {
+                bulletinIcon.data('bulletins', bulletins);
+    
+                // format the new bulletins
+              var formattedBulletins = nfCommon.getFormattedBulletins(bulletins);
+    
+                // if there are bulletins update them
+                if (bulletins.length > 0) {
+                  var list = nfCommon.formatUnorderedList(formattedBulletins);
+    
+                    // update existing tooltip or initialize a new one if appropriate
+                    if (bulletinIcon.data('qtip')) {
+                        bulletinIcon.qtip('option', 'content.text', list);
+                    } else {
+                        bulletinIcon.addClass('has-bulletins').show().qtip($.extend({},
+                          nfCanvasUtils.config.systemTooltipConfig,
+                            {
+                                content: list
+                            }));
+                    }
+                } else if (bulletinIcon.data('qtip')) {
+                    bulletinIcon.removeClass('has-bulletins').removeData('bulletins').hide().qtip('api').destroy(true);
+                }
+            }
+        };
+    
+        /**
+         * Updates the referencingComponentState using the specified referencingComponent.
+         *
+         * @param {jQuery} referencingComponentState
+         * @param {object} referencingComponent
+         */
+        var updateReferencingSchedulableComponentState = function (referencingComponentState, referencingComponent) {
+            referencingComponentState.removeClass('disabled stopped running invalid').addClass(function () {
+                var icon = $(this);
+    
+                var state = referencingComponent.state.toLowerCase();
+              if (state === 'stopped' && !nfCommon.isEmpty(referencingComponent.validationErrors)) {
+                    state = 'invalid';
+    
+                    // add tooltip for the warnings
+                  var list = nfCommon.formatUnorderedList(referencingComponent.validationErrors);
+                    if (icon.data('qtip')) {
+                        icon.qtip('option', 'content.text', list);
+                    } else {
+                        icon.qtip($.extend({},
+                          nfCanvasUtils.config.systemTooltipConfig,
+                            {
+                                content: list
+                            }));
+                    }
+                } else if (icon.data('qtip')) {
+                    icon.qtip('api').destroy(true);
+                }
+                return state;
+            });
+        };
+    
+        /**
+         * Updates the referencingServiceState using the specified referencingService.
+         *
+         * @param {jQuery} referencingServiceState
+         * @param {object} referencingService
+         */
+        var updateReferencingServiceState = function (referencingServiceState, referencingService) {
+            referencingServiceState.removeClass('disabled enabled invalid').addClass(function () {
+                var icon = $(this);
+    
+                var state = referencingService.state === 'ENABLED' ? 'enabled' : 'disabled';
+              if (state === 'disabled' && !nfCommon.isEmpty(referencingService.validationErrors)) {
+                    state = 'invalid';
+    
+                    // add tooltip for the warnings
+                  var list = nfCommon.formatUnorderedList(referencingService.validationErrors);
+                    if (icon.data('qtip')) {
+                        icon.qtip('option', 'content.text', list);
+                    } else {
+                        icon.qtip($.extend({},
+                          nfCanvasUtils.config.systemTooltipConfig,
+                            {
+                                content: list
+                            }));
+                    }
+                } else if (icon.data('qtip')) {
+                    icon.qtip('api').destroy(true);
+                }
+                return state;
+            });
+        };
+    
+        /**
+         * Updates the bulletins for all referencing components.
+         *
+         * @param {array} bulletins
+         */
+        var updateReferencingComponentBulletins = function (bulletins) {
+            var bulletinsBySource = d3.nest()
+                .key(function (d) {
+                    return d.sourceId;
+                })
+                .map(bulletins, d3.map);
+    
+            bulletinsBySource.forEach(function (sourceId, sourceBulletins) {
+                $('div.' + sourceId + '-bulletins').each(function () {
+                    updateBulletins(sourceBulletins, $(this));
+                });
+            });
+        };
+    
+        /**
+         * Adds the specified reference for this controller service.
+         *
+         * @param {jQuery} serviceTable
+         * @param {jQuery} referenceContainer
+         * @param {array} referencingComponents
+         */
+        var createReferencingComponents = function (serviceTable, referenceContainer, referencingComponents) {
+          if (nfCommon.isEmpty(referencingComponents)) {
+              referenceContainer.append('<div class="unset">'+nf._.msg('nf-actions.Message19')+'</div>');
+                return;
+            }
+    
+            // toggles the visibility of a container
+            var toggle = function (twist, container) {
+                if (twist.hasClass('expanded')) {
+                    twist.removeClass('expanded').addClass('collapsed');
+                    container.hide();
+                } else {
+                    twist.removeClass('collapsed').addClass('expanded');
+                    container.show();
+                }
+            };
+    
+            var referencingComponentIds = [];
+            var processors = $('<ul class="referencing-component-listing clear"></ul>');
+            var services = $('<ul class="referencing-component-listing clear"></ul>');
+            var tasks = $('<ul class="referencing-component-listing clear"></ul>');
+            var unauthorized = $('<ul class="referencing-component-listing clear"></ul>');
+            $.each(referencingComponents, function (_, referencingComponentEntity) {
+                // check the access policy for this referencing component
+                if (referencingComponentEntity.permissions.canRead === false || referencingComponentEntity.permissions.canWrite === false) {
+                    var unauthorizedReferencingComponent = $('<div class="unset"></div>').text(referencingComponentEntity.id);
+                    unauthorized.append(unauthorizedReferencingComponent);
+                } else {
+                    var referencingComponent = referencingComponentEntity.component;
+                    referencingComponentIds.push(referencingComponent.id);
+    
+                    if (referencingComponent.referenceType === 'Processor') {
+                        var processorLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
+                            // show the component
+                          nfCanvasUtils.showComponent(referencingComponent.groupId, referencingComponent.id);
+    
+                            // close the dialog and shell
+                            referenceContainer.closest('.dialog').modal('hide');
+                            $('#shell-close-button').click();
+                        });
+    
+                        // state
+                        var processorState = $('<div class="referencing-component-state"></div>').addClass(referencingComponent.id + '-state');
+                        updateReferencingSchedulableComponentState(processorState, referencingComponent);
+    
+                        // bulletin
+                        var processorBulletins = $('<div class="referencing-component-bulletins"></div>').addClass(referencingComponent.id + '-bulletins');
+    
+                        // type
+                      var processorType = $('<span class="referencing-component-type"></span>').text(nfCommon.substringAfterLast(referencingComponent.type, '.'));
+    
+                        // active thread count
+                        var processorActiveThreadCount = $('<span class="referencing-component-active-thread-count"></span>').addClass(referencingComponent.id + '-active-threads');
+                      if (nfCommon.isDefinedAndNotNull(referencingComponent.activeThreadCount) && referencingComponent.activeThreadCount > 0) {
+                            processorActiveThreadCount.text('(' + referencingComponent.activeThreadCount + ')');
+                        }
+    
+                        // processor
+                        var processorItem = $('<li></li>').append(processorState).append(processorBulletins).append(processorLink).append(processorType).append(processorActiveThreadCount);
+                        processors.append(processorItem);
+                    } else if (referencingComponent.referenceType === 'ControllerService') {
+                        var serviceLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
+                            var controllerServiceGrid = serviceTable.data('gridInstance');
+                            var controllerServiceData = controllerServiceGrid.getData();
+    
+                            // select the selected row
+                            var row = controllerServiceData.getRowById(referencingComponent.id);
+                            controllerServiceGrid.setSelectedRows([row]);
+                            controllerServiceGrid.scrollRowIntoView(row);
+    
+                            // close the dialog and shell
+                            referenceContainer.closest('.dialog').modal('hide');
+                        });
+    
+                        // container for this service's references
+                        var referencingServiceReferencesContainer = $('<div class="referencing-component-references hidden"></div>');
+                        var serviceTwist = $('<div class="service expansion-button collapsed pointer"></div>').on('click', function () {
+                            if (serviceTwist.hasClass('collapsed')) {
+                                var controllerServiceGrid = serviceTable.data('gridInstance');
+                                var controllerServiceData = controllerServiceGrid.getData();
+                                var referencingServiceEntity = controllerServiceData.getItemById(referencingComponent.id);
+                                var referencingService = referencingServiceEntity.component;
+    
+                                // create the markup for the references
+                                createReferencingComponents(serviceTable, referencingServiceReferencesContainer, referencingService.referencingComponents);
+                            } else {
+                                referencingServiceReferencesContainer.empty();
+                            }
+    
+                            // toggle visibility
+                            toggle(serviceTwist, referencingServiceReferencesContainer);
+    
+                            // update borders as necessary
+                            updateReferencingComponentsBorder(referenceContainer);
+                        });
+    
+                        // state
+                        var serviceState = $('<div class="referencing-component-state"></div>').addClass(referencingComponent.id + '-state');
+                        updateReferencingServiceState(serviceState, referencingComponent);
+    
+                        // bulletin
+                        var serviceBulletins = $('<div class="referencing-component-bulletins"></div>').addClass(referencingComponent.id + '-bulletins');
+    
+                        // type
+                      var serviceType = $('<span class="referencing-component-type"></span>').text(nfCommon.substringAfterLast(referencingComponent.type, '.'));
+    
+                        // service
+                        var serviceItem = $('<li></li>').append(serviceTwist).append(serviceState).append(serviceBulletins).append(serviceLink).append(serviceType).append(referencingServiceReferencesContainer);
+    
+                        services.append(serviceItem);
+                    } else if (referencingComponent.referenceType === 'ReportingTask') {
+                        var reportingTaskLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
+                            var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
+                            var reportingTaskData = reportingTaskGrid.getData();
+    
+                            // select the selected row
+                            var row = reportingTaskData.getRowById(referencingComponent.id);
+                            reportingTaskGrid.setSelectedRows([row]);
+                            reportingTaskGrid.scrollRowIntoView(row);
+    
+                            // select the reporting task tab
+                            $('#settings-tabs').find('li:last').click();
+    
+                            // close the dialog and shell
+                            referenceContainer.closest('.dialog').modal('hide');
+                        });
+    
+                        // state
+                        var reportingTaskState = $('<div class="referencing-component-state"></div>').addClass(referencingComponent.id + '-state');
+                        updateReferencingSchedulableComponentState(reportingTaskState, referencingComponent);
+    
+                        // bulletins
+                        var reportingTaskBulletins = $('<div class="referencing-component-bulletins"></div>').addClass(referencingComponent.id + '-bulletins');
+    
+                        // type
+                      var reportingTaskType = $('<span class="referencing-component-type"></span>').text(nfCommon.substringAfterLast(referencingComponent.type, '.'));
+    
+                        // active thread count
+                        var reportingTaskActiveThreadCount = $('<span class="referencing-component-active-thread-count"></span>').addClass(referencingComponent.id + '-active-threads');
+                      if (nfCommon.isDefinedAndNotNull(referencingComponent.activeThreadCount) && referencingComponent.activeThreadCount > 0) {
+                            reportingTaskActiveThreadCount.text('(' + referencingComponent.activeThreadCount + ')');
+                        }
+    
+                        // reporting task
+                        var reportingTaskItem = $('<li></li>').append(reportingTaskState).append(reportingTaskBulletins).append(reportingTaskLink).append(reportingTaskType).append(reportingTaskActiveThreadCount);
+                        tasks.append(reportingTaskItem);
+                    }
+                }
+            });
+    
+            // query for the bulletins
+            queryBulletins(referencingComponentIds).done(function (response) {
+                var bulletins = response.bulletinBoard.bulletins;
+                updateReferencingComponentBulletins(bulletins);
+            });
+    
+            // create the collapsable listing for each type
+            var createReferenceBlock = function (titleText, list) {
+                if (list.is(':empty')) {
+                    list.remove();
+                    return;
+                }
+    
+                var twist = $('<div class="expansion-button expanded"></div>');
+                var title = $('<span class="referencing-component-title"></span>').text(titleText);
+                var count = $('<span class="referencing-component-count"></span>').text('(' + list.children().length + ')');
+    
+                // create the reference block
+                $('<div class="referencing-component-block pointer unselectable"></div>').on('click', function () {
+                    // toggle this block
+                    toggle(twist, list);
+    
+                    // update the border if necessary
+                    updateReferencingComponentsBorder(referenceContainer);
+                }).append(twist).append(title).append(count).appendTo(referenceContainer);
+    
+                // add the listing
+                list.appendTo(referenceContainer);
+            };
+    
+            // create blocks for each type of component
+            createReferenceBlock('Processors', processors);
+            createReferenceBlock('Reporting Tasks', tasks);
+            createReferenceBlock('Controller Services', services);
+            createReferenceBlock('Unauthorized', unauthorized);
+        };
+    
+        /**
+         * Queries for bulletins for the specified components.
+         *
+         * @param {array} componentIds
+         * @returns {deferred}
+         */
+        var queryBulletins = function (componentIds) {
+            var ids = componentIds.join('|');
+    
+            return $.ajax({
+                type: 'GET',
+                url: '../nifi-api/flow/bulletin-board',
+                data: {
+                    sourceId: ids
+                },
+                dataType: 'json'
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Sets whether the specified controller service is enabled.
+         *
+         * @param {jQuery} serviceTable
+         * @param {object} controllerServiceEntity
+         * @param {boolean} enabled
+         * @param {function} pollCondition
+         */
+        var setEnabled = function (serviceTable, controllerServiceEntity, enabled, pollCondition) {
+            // build the request entity
+            var updateControllerServiceEntity = {
+              'revision': nfClient.getRevision(controllerServiceEntity),
+                'component': {
+                    'id': controllerServiceEntity.id,
+                    'state': enabled ? 'ENABLED' : 'DISABLED'
+                }
+            };
+    
+            var updated = $.ajax({
+                type: 'PUT',
+                url: controllerServiceEntity.uri,
+                data: JSON.stringify(updateControllerServiceEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (response) {
+                renderControllerService(serviceTable, response);
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // wait until the polling of each service finished
+            return $.Deferred(function (deferred) {
+                updated.done(function () {
+                    var serviceUpdated = pollService(controllerServiceEntity, function (service, bulletins) {
+                        if ($.isArray(bulletins)) {
+                            if (enabled) {
+                                updateBulletins(bulletins, $('#enable-controller-service-bulletins'));
+                            } else {
+                                updateBulletins(bulletins, $('#disable-controller-service-bulletins'));
+                            }
+                        }
+    
+                        // the condition is met once the service is (ENABLING or ENABLED)/DISABLED
+                        if (enabled) {
+                            return service.state === 'ENABLING' || service.state === 'ENABLED';
+                        } else {
+                            return service.state === 'DISABLED';
+                        }
+                    }, function (service) {
+                        return queryBulletins([service.id]);
+                    }, pollCondition);
+    
+                    // once the service has updated, resolve and render the updated service
+                    serviceUpdated.done(function () {
+                        deferred.resolve();
+                    }).fail(function () {
+                        deferred.reject();
+                    });
+                }).fail(function () {
+                    deferred.reject();
+                });
+            }).promise();
+        };
+    
+        /**
+         * Gets the id's of all controller services referencing the specified controller service.
+         *
+         * @param {object} controllerService
+         */
+        var getReferencingControllerServiceIds = function (controllerService) {
+            var ids = d3.set();
+            ids.add(controllerService.id);
+    
+            var checkReferencingServices = function (referencingComponents) {
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'ControllerService') {
+                        // add the id
+                        ids.add(referencingComponent.id);
+    
+                        // consider it's referencing components if appropriate
+                        if (referencingComponent.referenceCycle === false) {
+                            checkReferencingServices(referencingComponent.referencingComponents);
+                        }
+                    }
+                });
+            };
+    
+            // check the referencing servcies
+            checkReferencingServices(controllerService.referencingComponents);
+            return ids;
+        };
+    
+        /**
+         * Gathers all referencing component revisions.
+         *
+         * @param referencingComponents
+         * @param referencingComponentRevisions
+         * @param serviceOnly - true includes only services, false includes only schedulable components
+         */
+        var getReferencingComponentRevisions = function (referencingComponents, referencingComponentRevisions, serviceOnly) {
+            // include the revision of each referencing component
+            $.each(referencingComponents, function (_, referencingComponentEntity) {
+                var referencingComponent = referencingComponentEntity.component;
+    
+                if (serviceOnly) {
+                    if (referencingComponent.referenceType === 'ControllerService') {
+                      referencingComponentRevisions[referencingComponentEntity.id] = nfClient.getRevision(referencingComponentEntity);
+                    }
+                } else {
+                    if (referencingComponent.referenceType !== 'ControllerService') {
+                      referencingComponentRevisions[referencingComponentEntity.id] = nfClient.getRevision(referencingComponentEntity);
+                    }
+                }
+    
+                // recurse
+                getReferencingComponentRevisions(referencingComponent.referencingComponents, referencingComponentRevisions, serviceOnly);
+            });
+        };
+    
+        /**
+         * Updates the scheduled state of the processors/reporting tasks referencing
+         * the specified controller service.
+         *
+         * @param {jQuery} serviceTable
+         * @param {object} controllerServiceEntity
+         * @param {boolean} running
+         * @param {function} pollCondition
+         */
+        var updateReferencingSchedulableComponents = function (serviceTable, controllerServiceEntity, running, pollCondition) {
+            var referencingRevisions = {};
+            getReferencingComponentRevisions(controllerServiceEntity.component.referencingComponents, referencingRevisions, false);
+    
+            var referenceEntity = {
+                'id': controllerServiceEntity.id,
+                'state': running ? 'RUNNING' : 'STOPPED',
+                'referencingComponentRevisions': referencingRevisions
+            };
+    
+            // issue the request to update the referencing components
+            var updated = $.ajax({
+                type: 'PUT',
+                url: controllerServiceEntity.uri + '/references',
+                data: JSON.stringify(referenceEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // Note: updated revisions will be retrieved after updateReferencingSchedulableComponents is invoked
+    
+            // wait unil the polling of each service finished
+            return $.Deferred(function (deferred) {
+                updated.done(function (response) {
+                    // update the controller service
+                    controllerServiceEntity.component.referencingComponents = response.controllerServiceReferencingComponents;
+    
+                    // if we're just starting schedulable components we're done when the update is finished
+                    if (running) {
+                        deferred.resolve();
+                    } else {
+                        // identify all referencing services
+                        var services = getReferencingControllerServiceIds(controllerServiceEntity.component);
+    
+                        // get the controller service grid
+                        var controllerServiceGrid = serviceTable.data('gridInstance');
+                        var controllerServiceData = controllerServiceGrid.getData();
+    
+                        // start polling for each controller service
+                        var polling = [];
+                        services.forEach(function (controllerServiceId) {
+                            var referencingService = controllerServiceData.getItemById(controllerServiceId);
+                            polling.push(stopReferencingSchedulableComponents(referencingService, pollCondition));
+                        });
+    
+                        // wait until polling has finished
+                        $.when.apply(window, polling).done(function () {
+                            deferred.resolve();
+                        }).fail(function () {
+                            deferred.reject();
+                        });
+                    }
+                }).fail(function () {
+                    deferred.reject();
+                });
+            }).promise();
+        };
+    
+        /**
+         * Polls the specified services referencing components to see if the
+         * specified condition is satisfied.
+         *
+         * @param {object} controllerServiceEntity
+         * @param {function} completeCondition
+         * @param {function} bulletinDeferred
+         * @param {function} pollCondition
+         */
+        var pollService = function (controllerServiceEntity, completeCondition, bulletinDeferred, pollCondition) {
+            var controllerService = controllerServiceEntity.component;
+    
+            // we want to keep polling until the condition is met
+            return $.Deferred(function (deferred) {
+                var current = 2;
+                var getTimeout = function () {
+                    var val = current;
+    
+                    // update the current timeout for the next time
+                    current = Math.min(current * 2, 4);
+    
+                    return val * 1000;
+                };
+    
+                // polls for the current status of the referencing components
+                var poll = function () {
+                    var bulletins = bulletinDeferred(controllerService);
+                    var service = $.ajax({
+                        type: 'GET',
+                        url: controllerServiceEntity.uri,
+                        dataType: 'json'
+                    });
+    
+                    $.when(bulletins, service).done(function (bulletinResult, serviceResult) {
+                        var bulletinResponse = bulletinResult[0];
+                        var serviceResponse = serviceResult[0];
+                        conditionMet(serviceResponse.component, bulletinResponse.bulletinBoard.bulletins);
+                    }).fail(function (xhr, status, error) {
+                        deferred.reject();
+                      nfErrorHandler.handleAjaxError(xhr, status, error);
+                    });
+                };
+    
+                // tests to if the condition has been met
+                var conditionMet = function (service, bulletins) {
+                    if (completeCondition(service, bulletins)) {
+                        deferred.resolve();
+                    } else {
+                        if (typeof pollCondition === 'function' && pollCondition()) {
+                            setTimeout(poll, getTimeout());
+                        } else {
+                            deferred.reject();
+                        }
+                    }
+                };
+    
+                // poll for the status of the referencing components
+                bulletinDeferred(controllerService).done(function (response) {
+                    conditionMet(controllerService, response.bulletinBoard.bulletins);
+                }).fail(function (xhr, status, error) {
+                    deferred.reject();
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+                });
+            }).promise();
+        };
+    
+        /**
+         * Continues to poll the specified controller service until all referencing schedulable
+         * components are stopped (not scheduled and 0 active threads).
+         *
+         * @param {object} controllerService
+         * @param {function} pollCondition
+         */
+        var stopReferencingSchedulableComponents = function (controllerService, pollCondition) {
+            // continue to poll the service until all schedulable components have stopped
+            return pollService(controllerService, function (service, bulletins) {
+                var referencingComponents = service.referencingComponents;
+    
+                var stillRunning = false;
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'Processor' || referencingComponent.referenceType === 'ReportingTask') {
+                        if (referencingComponent.state === 'RUNNING' || referencingComponent.activeThreadCount > 0) {
+                            stillRunning = true;
+                        }
+    
+                        // update the current active thread count
+                        $('div.' + referencingComponent.id + '-active-threads').text(referencingComponent.activeThreadCount);
+    
+                        // update the current state of this component
+                        var referencingComponentState = $('div.' + referencingComponent.id + '-state');
+                        updateReferencingSchedulableComponentState(referencingComponentState, referencingComponent);
+                    }
+                });
+    
+                // query for the bulletins
+                updateReferencingComponentBulletins(bulletins);
+    
+                // condition is met once all referencing are not running
+                return stillRunning === false;
+            }, function (service) {
+                var referencingSchedulableComponents = [];
+    
+                var referencingComponents = service.referencingComponents;
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'Processor' || referencingComponent.referenceType === 'ReportingTask') {
+                        referencingSchedulableComponents.push(referencingComponent.id);
+                    }
+                });
+    
+                return queryBulletins(referencingSchedulableComponents);
+            }, pollCondition);
+        };
+    
+        /**
+         * Continues to poll until all referencing services are enabled.
+         *
+         * @param {object} controllerService
+         * @param {function} pollCondition
+         */
+        var enableReferencingServices = function (controllerService, pollCondition) {
+            // continue to poll the service until all referencing services are enabled
+            return pollService(controllerService, function (service, bulletins) {
+                var referencingComponents = service.referencingComponents;
+    
+                var notEnabled = false;
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'ControllerService') {
+                        if (referencingComponent.state !== 'ENABLING' && referencingComponent.state !== 'ENABLED') {
+                            notEnabled = true;
+                        }
+    
+                        // update the state of the referencing service
+                        var referencingServiceState = $('div.' + referencingComponent.id + '-state');
+                        updateReferencingServiceState(referencingServiceState, referencingComponent);
+                    }
+                });
+    
+                // query for the bulletins
+                updateReferencingComponentBulletins(bulletins);
+    
+                // condition is met once all referencing are not disabled
+                return notEnabled === false;
+            }, function (service) {
+                var referencingSchedulableComponents = [];
+    
+                var referencingComponents = service.referencingComponents;
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'ControllerService') {
+                        referencingSchedulableComponents.push(referencingComponent.id);
+                    }
+                });
+    
+                return queryBulletins(referencingSchedulableComponents);
+            }, pollCondition);
+        };
+    
+        /**
+         * Continues to poll until all referencing services are disabled.
+         *
+         * @param {object} controllerService
+         * @param {function} pollCondition
+         */
+        var disableReferencingServices = function (controllerService, pollCondition) {
+            // continue to poll the service until all referencing services are disabled
+            return pollService(controllerService, function (service, bulletins) {
+                var referencingComponents = service.referencingComponents;
+    
+                var notDisabled = false;
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'ControllerService') {
+                        if (referencingComponent.state !== 'DISABLED') {
+                            notDisabled = true;
+                        }
+    
+                        // update the state of the referencing service
+                        var referencingServiceState = $('div.' + referencingComponent.id + '-state');
+                        updateReferencingServiceState(referencingServiceState, referencingComponent);
+                    }
+                });
+    
+                // query for the bulletins
+                updateReferencingComponentBulletins(bulletins);
+    
+                // condition is met once all referencing are not enabled
+                return notDisabled === false;
+            }, function (service) {
+                var referencingSchedulableComponents = [];
+    
+                var referencingComponents = service.referencingComponents;
+                $.each(referencingComponents, function (_, referencingComponentEntity) {
+                    var referencingComponent = referencingComponentEntity.component;
+                    if (referencingComponent.referenceType === 'ControllerService') {
+                        referencingSchedulableComponents.push(referencingComponent.id);
+                    }
+                });
+    
+                return queryBulletins(referencingSchedulableComponents);
+            }, pollCondition);
+        };
+    
+        /**
+         * Updates the referencing services with the specified state.
+         *
+         * @param {jQuery} serviceTable
+         * @param {object} controllerServiceEntity
+         * @param {boolean} enabled
+         * @param {function} pollCondition
+         */
+        var updateReferencingServices = function (serviceTable, controllerServiceEntity, enabled, pollCondition) {
+            var referencingRevisions = {};
+            getReferencingComponentRevisions(controllerServiceEntity.component.referencingComponents, referencingRevisions, true);
+    
+            // build the reference entity
+            var referenceEntity = {
+                'id': controllerServiceEntity.id,
+                'state': enabled ? 'ENABLED' : 'DISABLED',
+                'referencingComponentRevisions': referencingRevisions
+            };
+    
+            // issue the request to update the referencing components
+            var updated = $.ajax({
+                type: 'PUT',
+                url: controllerServiceEntity.uri + '/references',
+                data: JSON.stringify(referenceEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // Note: updated revisions will be retrieved after updateReferencingServices is invoked
+    
+            // wait unil the polling of each service finished
+            return $.Deferred(function (deferred) {
+                updated.done(function (response) {
+                    // update the controller service
+                    controllerServiceEntity.component.referencingComponents = response.controllerServiceReferencingComponents;
+    
+                    // identify all referencing services
+                    var services = getReferencingControllerServiceIds(controllerServiceEntity.component);
+    
+                    // get the controller service grid
+                    var controllerServiceGrid = serviceTable.data('gridInstance');
+                    var controllerServiceData = controllerServiceGrid.getData();
+    
+                    // start polling for each controller service
+                    var polling = [];
+                    services.forEach(function (controllerServiceId) {
+                        var referencingService = controllerServiceData.getItemById(controllerServiceId);
+    
+                        if (enabled) {
+                            polling.push(enableReferencingServices(referencingService, pollCondition));
+                        } else {
+                            polling.push(disableReferencingServices(referencingService, pollCondition));
+                        }
+                    });
+    
+                    $.when.apply(window, polling).done(function () {
+                        deferred.resolve();
+                    }).fail(function () {
+                        deferred.reject();
+                    });
+                }).fail(function () {
+                    deferred.reject();
+                });
+            }).promise();
+        };
+    
+        /**
+         * Shows the dialog for disabling a controller service.
+         *
+         * @argument {object} controllerService The controller service to disable
+         */
+        var showDisableControllerServiceDialog = function (serviceTable, controllerService) {
+            // populate the disable controller service dialog
+            $('#disable-controller-service-id').text(controllerService.id);
+            $('#disable-controller-service-name').text(controllerService.name);
+    
+            // load the controller referencing components list
+            var referencingComponentsContainer = $('#disable-controller-service-referencing-components');
+            createReferencingComponents(serviceTable, referencingComponentsContainer, controllerService.referencingComponents);
+    
+            // build the button model
+            var buttons = [{
+              buttonText: nf._.msg('nf-controller-service.Disable'),
+                color: {
+                    base: '#728E9B',
+                    hover: '#004849',
+                    text: '#ffffff'
+                },
+                handler: {
+                    click: function () {
+                        disableHandler(serviceTable);
+                    }
+                }
+            }, {
+              buttonText: nf._.msg('nf-controller-service.Cancel'),
+                color: {
+                    base: '#E3E8EB',
+                    hover: '#C7D2D7',
+                    text: '#004849'
+                },
+                handler: {
+                    click: closeModal
+                }
+            }];
+    
+            // show the dialog
+            $('#disable-controller-service-dialog').modal('setButtonModel', buttons).modal('show');
+    
+            // load the bulletins
+            queryBulletins([controllerService.id]).done(function (response) {
+                updateBulletins(response.bulletinBoard.bulletins, $('#disable-controller-service-bulletins'));
+            });
+    
+            // update the border if necessary
+            updateReferencingComponentsBorder(referencingComponentsContainer);
+        };
+    
+        /**
+         * Shows the dialog for enabling a controller service.
+         *
+         * @param {object} serviceTable
+         * @param {object} controllerService
+         */
+        var showEnableControllerServiceDialog = function (serviceTable, controllerService) {
+            // populate the disable controller service dialog
+            $('#enable-controller-service-id').text(controllerService.id);
+            $('#enable-controller-service-name').text(controllerService.name);
+    
+            // load the controller referencing components list
+            var referencingComponentsContainer = $('#enable-controller-service-referencing-components');
+            createReferencingComponents(serviceTable, referencingComponentsContainer, controllerService.referencingComponents);
+    
+            // build the button model
+            var buttons = [{
+              buttonText: nf._.msg('nf-controller-service.Enable'),
+                color: {
+                    base: '#728E9B',
+                    hover: '#004849',
+                    text: '#ffffff'
+                },
+                handler: {
+                    click: function () {
+                        enableHandler(serviceTable);
+                    }
+                }
+            }, {
+              buttonText: nf._.msg('nf-controller-service.Cancel'),
+                color: {
+                    base: '#E3E8EB',
+                    hover: '#C7D2D7',
+                    text: '#004849'
+                },
+                handler: {
+                    click: closeModal
+                }
+            }];
+    
+            // show the dialog
+            $('#enable-controller-service-dialog').modal('setButtonModel', buttons).modal('show');
+    
+            // load the bulletins
+            queryBulletins([controllerService.id]).done(function (response) {
+                updateBulletins(response.bulletinBoard.bulletins, $('#enable-controller-service-bulletins'));
+            });
+    
+            // update the border if necessary
+            updateReferencingComponentsBorder(referencingComponentsContainer);
+        };
+    
+        /**
+         * Used to handle closing a modal dialog
+         */
+        var closeModal = function () {
+            $(this).modal('hide');
+        };
+    
+        /**
+         * Handles the disable action of the disable controller service dialog.
+         *
+         * @param {jQuery} serviceTable
+         */
+        var disableHandler = function (serviceTable) {
+            var disableDialog = $('#disable-controller-service-dialog');
+            var canceled = false;
+    
+            // only provide a cancel option
+            disableDialog.modal('setButtonModel', [{
+              buttonText: nf._.msg('nf-controller-service.Cancel'),
+                color: {
+                    base: '#E3E8EB',
+                    hover: '#C7D2D7',
+                    text: '#004849'
+                },
+                handler: {
+                    click: function () {
+                        canceled = true;
+                        disableDialog.modal('setButtonModel', []);
+                        $('#disable-controller-service-dialog div.controller-service-canceling').show();
+                    }
+                }
+            }]);
+    
+            // show the progress
+            $('#disable-controller-service-scope-container').hide();
+            $('#disable-controller-service-progress-container').show();
+    
+            // get the controller service
+            var controllerServiceId = $('#disable-controller-service-id').text();
+            var controllerServiceGrid = serviceTable.data('gridInstance');
+            var controllerServiceData = controllerServiceGrid.getData();
+            var controllerServiceEntity = controllerServiceData.getItemById(controllerServiceId);
+            var controllerService = controllerServiceEntity.component;
+    
+            // whether or not to continue polling
+            var continuePolling = function () {
+                return canceled === false;
+            };
+    
+            // sets the close button on the dialog
+            var setCloseButton = function () {
+                $('#disable-controller-service-dialog div.controller-service-canceling').hide();
+                disableDialog.modal('setButtonModel', [{
+                  buttonText: nf._.msg('nf-controller-service.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: closeModal
+                    }
+                }]);
+            };
+    
+            // ensure we have access to all referencing components before attempting the sequence
+            if (hasUnauthorizedReferencingComponent(controllerService.referencingComponents)) {
+                setCloseButton();
+    
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-controller-service.ControllerService'),
+                  dialogContent: nf._.msg('nf-controller-service.Message14')
+                });
+                return;
+            }
+    
+            $('#disable-progress-label').text('Steps to disable ' + controllerService.name);
+            var disableReferencingSchedulable = $('#disable-referencing-schedulable').addClass('ajax-loading');
+    
+            $.Deferred(function (deferred) {
+                // stop all referencing schedulable components
+                var stopped = updateReferencingSchedulableComponents(serviceTable, controllerServiceEntity, false, continuePolling);
+    
+                // once everything has stopped
+                stopped.done(function () {
+                    disableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-complete');
+                    var disableReferencingServices = $('#disable-referencing-services').addClass('ajax-loading');
+    
+                    // disable all referencing services
+                    var disabled = updateReferencingServices(serviceTable, controllerServiceEntity, false, continuePolling);
+    
+                    // everything is disabled
+                    disabled.done(function () {
+                        disableReferencingServices.removeClass('ajax-loading').addClass('ajax-complete');
+                        var disableControllerService = $('#disable-controller-service').addClass('ajax-loading');
+    
+                        // disable this service
+                        setEnabled(serviceTable, controllerServiceEntity, false, continuePolling).done(function () {
+                            deferred.resolve();
+                            disableControllerService.removeClass('ajax-loading').addClass('ajax-complete');
+                        }).fail(function () {
+                            deferred.reject();
+                            disableControllerService.removeClass('ajax-loading').addClass('ajax-error');
+                        });
+                    }).fail(function () {
+                        deferred.reject();
+                        disableReferencingServices.removeClass('ajax-loading').addClass('ajax-error');
+                    });
+                }).fail(function () {
+                    deferred.reject();
+                    disableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-error');
+                });
+            }).always(function () {
+                reloadControllerServiceAndReferencingComponents(serviceTable, controllerService);
+                setCloseButton();
+    
+                // inform the user if the action was canceled
+                if (canceled === true && $('#nf-ok-dialog').not(':visible')) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-controller-service.ControllerService'),
+                      dialogContent: nf._.msg('nf-controller-service.Message5')
+                    });
+                }
+            });
+        };
+    
+        /**
+         * Determines if any of the specified referencing components are not authorized.
+         *
+         * @param referencingComponents referencing components
+         * @returns {boolean}
+         */
+        var hasUnauthorizedReferencingComponent = function (referencingComponents) {
+            var hasUnauthorized = false;
+    
+            $.each(referencingComponents, function (_, referencingComponentEntity) {
+                if (referencingComponentEntity.permissions.canRead === false || referencingComponentEntity.permissions.canWrite === false) {
+                    hasUnauthorized = true;
+                    return false;
+                }
+    
+                var referencingComponent = referencingComponentEntity.component;
+                if (hasUnauthorizedReferencingComponent(referencingComponent.referencingComponents)) {
+                    hasUnauthorized = true;
+                    return false;
+                }
+            });
+    
+            return hasUnauthorized;
+        };
+    
+        /**
+         * Handles the enable action of the enable controller service dialog.
+         *
+         * @param {jQuery} serviceTable
+         */
+        var enableHandler = function (serviceTable) {
+            var enableDialog = $('#enable-controller-service-dialog');
+            var canceled = false;
+    
+            // get the controller service
+            var controllerServiceId = $('#enable-controller-service-id').text();
+            var controllerServiceGrid = serviceTable.data('gridInstance');
+            var controllerServiceData = controllerServiceGrid.getData();
+            var controllerServiceEntity = controllerServiceData.getItemById(controllerServiceId);
+            var controllerService = controllerServiceEntity.component;
+    
+            // determine if we want to also activate referencing components
+            var scope = $('#enable-controller-service-scope').combo('getSelectedOption').value;
+    
+            // update visibility
+            if (scope === config.serviceOnly) {
+                $('#enable-controller-service-progress li.referencing-component').hide();
+            }
+    
+            // only provide a cancel option
+            enableDialog.modal('setButtonModel', [{
+              buttonText: nf._.msg('nf-controller-service.Cancel'),
+                color: {
+                    base: '#E3E8EB',
+                    hover: '#C7D2D7',
+                    text: '#004849'
+                },
+                handler: {
+                    click: function () {
+                        canceled = true;
+                        enableDialog.modal('setButtonModel', []);
+                        $('#enable-controller-service-dialog div.controller-service-canceling').show();
+                    }
+                }
+            }]);
+    
+            // show the progress
+            $('#enable-controller-service-scope-container').hide();
+            $('#enable-controller-service-progress-container').show();
+    
+    
+            // whether or not to continue polling
+            var continuePolling = function () {
+                return canceled === false;
+            };
+    
+            // sets the button to close
+            var setCloseButton = function () {
+                $('#enable-controller-service-dialog div.controller-service-canceling').hide();
+                enableDialog.modal('setButtonModel', [{
+                  buttonText: nf._.msg('nf-controller-service.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: closeModal
+                    }
+                }]);
+            };
+    
+            // ensure appropriate access
+            if (scope === config.serviceAndReferencingComponents && hasUnauthorizedReferencingComponent(controllerService.referencingComponents)) {
+                setCloseButton();
+    
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-controller-service.ControllerService'),
+                  dialogContent: nf._.msg('nf-controller-service.Message15')
+                });
+                return;
+            }
+    
+            $('#enable-progress-label').text('Steps to enable ' + controllerService.name);
+            var enableControllerService = $('#enable-controller-service').addClass('ajax-loading');
+    
+            $.Deferred(function (deferred) {
+                // enable this controller service
+                var enable = setEnabled(serviceTable, controllerServiceEntity, true, continuePolling);
+    
+                if (scope === config.serviceAndReferencingComponents) {
+                    // once the service is enabled, activate all referencing components
+                    enable.done(function () {
+                        enableControllerService.removeClass('ajax-loading').addClass('ajax-complete');
+                        var enableReferencingServices = $('#enable-referencing-services').addClass('ajax-loading');
+    
+                        // enable the referencing services
+                        var servicesEnabled = updateReferencingServices(serviceTable, controllerServiceEntity, true, continuePolling);
+    
+                        // once all the referencing services are enbled
+                        servicesEnabled.done(function () {
+                            enableReferencingServices.removeClass('ajax-loading').addClass('ajax-complete');
+                            var enableReferencingSchedulable = $('#enable-referencing-schedulable').addClass('ajax-loading');
+    
+                            // start all referencing schedulable components
+                            updateReferencingSchedulableComponents(serviceTable, controllerServiceEntity, true, continuePolling).done(function () {
+                                deferred.resolve();
+                                enableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-complete');
+                            }).fail(function () {
+                                deferred.reject();
+                                enableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-error');
+                            });
+                        }).fail(function () {
+                            deferred.reject();
+                            enableReferencingServices.removeClass('ajax-loading').addClass('ajax-error');
+                        });
+                    }).fail(function () {
+                        deferred.reject();
+                        enableControllerService.removeClass('ajax-loading').addClass('ajax-error');
+                    });
+                } else {
+                    enable.done(function () {
+                        deferred.resolve();
+                        enableControllerService.removeClass('ajax-loading').addClass('ajax-complete');
+                    }).fail(function () {
+                        deferred.reject();
+                        enableControllerService.removeClass('ajax-loading').addClass('ajax-error');
+                    });
+                }
+            }).always(function () {
+                reloadControllerServiceAndReferencingComponents(serviceTable, controllerService);
+                setCloseButton();
+    
+                // inform the user if the action was canceled
+                if (canceled === true && $('#nf-ok-dialog').not(':visible')) {
+                  nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-controller-service.ControllerService'),
+                      dialogContent: nf._.msg('nf-controller-service.Message2')
+                    });
+                }
+            });
+        };
+    
+        /**
+         * Gets a property descriptor for the controller service currently being configured.
+         *
+         * @param {type} propertyName
+         */
+        var getControllerServicePropertyDescriptor = function (propertyName) {
+            var controllerServiceEntity = $('#controller-service-configuration').data('controllerServiceDetails');
+            return $.ajax({
+                type: 'GET',
+                url: controllerServiceEntity.uri + '/descriptors',
+                data: {
+                    propertyName: propertyName
+                },
+                dataType: 'json'
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Goes to a service configuration from the property table.
+         *
+         * @param {jQuery} serviceTable
+         */
+        var goToServiceFromProperty = function (serviceTable) {
+            return $.Deferred(function (deferred) {
+                // close all fields currently being edited
+                $('#controller-service-properties').propertytable('saveRow');
+    
+                // determine if changes have been made
+                if (isSaveRequired()) {
+                    // see if those changes should be saved
+                  nfDialog.showYesNoDialog({
+                      headerText: nf._.msg('nf-controller-service.Save'),
+                      dialogContent: nf._.msg('nf-controller-service.Message16'),
+                        noHandler: function () {
+                            deferred.resolve();
+                        },
+                        yesHandler: function () {
+                            var controllerServiceEntity = $('#controller-service-configuration').data('controllerServiceDetails');
+                            saveControllerService(serviceTable, controllerServiceEntity).done(function () {
+                                deferred.resolve();
+                            }).fail(function () {
+                                deferred.reject();
+                            });
+                        }
+                    });
+                } else {
+                    deferred.resolve();
+                }
+            }).promise();
+        };
+    
+        var saveControllerService = function (serviceTable, controllerServiceEntity) {
+            // marshal the settings and properties and update the controller service
+            var updatedControllerService = marshalDetails();
+    
+            // ensure details are valid as far as we can tell
+            if (validateDetails(updatedControllerService)) {
+              updatedControllerService['revision'] = nfClient.getRevision(controllerServiceEntity);
+    
+                var previouslyReferencedServiceIds = [];
+                $.each(identifyReferencedServiceDescriptors(controllerServiceEntity.component), function (_, descriptor) {
+                  var modifyingService = !nfCommon.isUndefined(updatedControllerService.component.properties) && !nfCommon.isUndefined(updatedControllerService.component.properties[descriptor.name]);
+                  var isCurrentlyConfigured = nfCommon.isDefinedAndNotNull(controllerServiceEntity.component.properties[descriptor.name]);
+    
+                    // if we are attempting to update a controller service reference
+                    if (modifyingService && isCurrentlyConfigured) {
+    
+                        // record the current value if set
+                        previouslyReferencedServiceIds.push(controllerServiceEntity.component.properties[descriptor.name]);
+                    }
+                });
+    
+                // update the selected component
+                return $.ajax({
+                    type: 'PUT',
+                    data: JSON.stringify(updatedControllerService),
+                    url: controllerServiceEntity.uri,
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // reload the controller service
+                    renderControllerService(serviceTable, response);
+    
+                    // reload all previously referenced controller services
+                    $.each(previouslyReferencedServiceIds, function (_, oldServiceReferenceId) {
+                        reloadControllerService(serviceTable, oldServiceReferenceId);
+                    });
+                }).fail(handleControllerServiceConfigurationError);
+            } else {
+                return $.Deferred(function (deferred) {
+                    deferred.reject();
+                }).promise();
+            }
+        };
+    
+        /**
+         * Identifies the descriptors that identify controller services.
+         *
+         * @param {object} component
+         */
+        var identifyReferencedServiceDescriptors = function (component) {
+            var referencedServiceDescriptors = [];
+    
+            $.each(component.descriptors, function (_, descriptor) {
+              if (nfCommon.isDefinedAndNotNull(descriptor.identifiesControllerService)) {
+                    referencedServiceDescriptors.push(descriptor);
+                }
+            });
+    
+            return referencedServiceDescriptors;
+        };
+    
+        /**
+         * Identifies descriptors that reference controller services.
+         *
+         * @param {object} component
+         */
+        var getReferencedServices = function (component) {
+            var referencedServices = [];
+    
+            $.each(identifyReferencedServiceDescriptors(component), function (_, descriptor) {
+                var referencedServiceId = component.properties[descriptor.name];
+    
+                // ensure the property is configured
+              if (nfCommon.isDefinedAndNotNull(referencedServiceId) && $.trim(referencedServiceId).length > 0) {
+                    referencedServices.push(referencedServiceId);
+                }
+            });
+    
+            return referencedServices;
+        };
+    
+      /**
+       * Track the current table
+       */
+      var currentTable;
+  
+      var nfControllerService = {
+            /**
+             * Initializes the controller service configuration dialog.
+             */
+            init: function () {
+                // initialize the configuration dialog tabs
+                $('#controller-service-configuration-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                      name: nf._.msg('nf-controller-service.Settings'),
+                        tabContentId: 'controller-service-standard-settings-tab-content'
+                    }, {
+                      name: nf._.msg('nf-controller-service.Properties'),
+                        tabContentId: 'controller-service-properties-tab-content'
+                    }, {
+                      name: nf._.msg('nf-controller-service.Comments'),
+                        tabContentId: 'controller-service-comments-tab-content'
+                    }],
+                    select: function () {
+                        // remove all property detail dialogs
+                      nfUniversalCapture.removeAllPropertyDetailDialogs();
+    
+                        // update the property table size in case this is the first time its rendered
+                      if ($(this).text() === nf._.msg('nf-controller-service.Properties')) {
+                            $('#controller-service-properties').propertytable('resetTableSize');
+                        }
+    
+                        // close all fields currently being edited
+                        $('#controller-service-properties').propertytable('saveRow');
+    
+                        // show the border around the processor relationships if necessary
+                        var referenceContainer = $('#controller-service-referencing-components');
+                        updateReferencingComponentsBorder(referenceContainer);
+                    }
+                });
+    
+                // initialize the conroller service configuration dialog
+                $('#controller-service-configuration').modal({
+                  headerText: nf._.msg('nf-controller-service.Message7'),
+                    scrollableContentStyle: 'scrollable',
+                    handler: {
+                        close: function () {
+                            // empty the referencing components list
+                            var referencingComponents = $('#controller-service-referencing-components');
+                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-state');
+                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins');
+                            referencingComponents.css('border-width', '0').empty();
+    
+                            // cancel any active edits
+                            $('#controller-service-properties').propertytable('cancelEdit');
+    
+                            // clear the tables
+                            $('#controller-service-properties').propertytable('clear');
+    
+                            // clear the comments
+                          nfCommon.clearField('read-only-controller-service-comments');
+    
+                            // removed the cached controller service details
+                            $('#controller-service-configuration').removeData('controllerServiceDetails');
+                        },
+                        open: function () {
+                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                        }
+                    }
+                });
+    
+                // initialize the disable service dialog
+                $('#disable-controller-service-dialog').modal({
+                  headerText: nf._.msg('nf-controller-service.Message8'),
+                    scrollableContentStyle: 'scrollable',
+                    handler: {
+                        close: function () {
+                            var disableDialog = $(this);
+    
+                            // reset visibility
+                            $('#disable-controller-service-scope-container').show();
+                            $('#disable-controller-service-progress-container').hide();
+    
+                            // clear the dialog
+                            $('#disable-controller-service-id').text('');
+                            $('#disable-controller-service-name').text('');
+    
+                            // bulletins
+                            $('#disable-controller-service-bulletins').removeClass('has-bulletins').removeData('bulletins').hide();
+                          nfCommon.cleanUpTooltips($('#disable-controller-service-service-container'), '#disable-controller-service-bulletins');
+    
+                            // reset progress
+                            $('div.disable-referencing-components').removeClass('ajax-loading ajax-complete ajax-error');
+    
+                            // referencing components
+                            var referencingComponents = $('#disable-controller-service-referencing-components');
+                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-state');
+                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins');
+                            referencingComponents.css('border-width', '0').empty();
+                        }
+                    }
+                });
+    
+                // initialize the enable scope combo
+                $('#enable-controller-service-scope').combo({
+                    options: [{
+                      text: nf._.msg('nf-controller-service.ServiceOnle'),
+                        value: config.serviceOnly,
+                      description: nf._.msg('nf-controller-service.Message12')
+                    }, {
+                      text: nf._.msg('nf-controller-service.Message10'),
+                        value: config.serviceAndReferencingComponents,
+                      description: nf._.msg('nf-controller-service.Message11')
+                    }]
+                });
+    
+                // initialize the enable service dialog
+                $('#enable-controller-service-dialog').modal({
+                    headerText: 'Enable Controller Service',
+                    scrollableContentStyle: 'scrollable',
+                    handler: {
+                        close: function () {
+                            var enableDialog = $(this);
+    
+                            // reset visibility
+                            $('#enable-controller-service-scope-container').show();
+                            $('#enable-controller-service-progress-container').hide();
+                            $('#enable-controller-service-progress li.referencing-component').show();
+    
+                            // clear the dialog
+                            $('#enable-controller-service-id').text('');
+                            $('#enable-controller-service-name').text('');
+    
+                            // bulletins
+                            $('#enable-controller-service-bulletins').removeClass('has-bulletins').removeData('bulletins').hide();
+                          nfCommon.cleanUpTooltips($('#enable-controller-service-service-container'), '#enable-controller-service-bulletins');
+    
+                            // reset progress
+                            $('div.enable-referencing-components').removeClass('ajax-loading ajax-complete ajax-error');
+    
+                            // referencing components
+                            var referencingComponents = $('#enable-controller-service-referencing-components');
+                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-state');
+                          nfCommon.cleanUpTooltips(referencingComponents, 'div.referencing-component-bulletins');
+                            referencingComponents.css('border-width', '0').empty();
+                        }
+                    }
+                });
+            },
+    
+            /**
+             * Shows the configuration dialog for the specified controller service.
+             *
+             * @argument {jQuery} serviceTable                 The controller service table
+             * @argument {object} controllerServiceEntity      The controller service
+             */
+            showConfiguration: function (serviceTable, controllerServiceEntity) {
+              if (nfCommon.isUndefined(currentTable)) {
+                  currentTable = serviceTable;
+              }
+                var controllerServiceDialog = $('#controller-service-configuration');
+              if (controllerServiceDialog.data('mode') !== config.edit || currentTable !== serviceTable) {
+                    // update the visibility
+                    $('#controller-service-configuration .controller-service-read-only').hide();
+                    $('#controller-service-configuration .controller-service-editable').show();
+    
+                    // 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) {
+                          var controllerServicesUri;
+                          var createdControllerServicesTable;
+  
+                          // calculate the correct uri
+                          var createdControllerService = response.component;
+                          if (nfCommon.isDefinedAndNotNull(createdControllerService.parentGroupId)) {
+                              controllerServicesUri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(createdControllerService.parentGroupId) + '/controller-services';
+                          } else {
+                              controllerServicesUri = config.urls.api + '/flow/controller/controller-services';
+                          }
+  
+                          // load the controller services accordingly
+                          return nfControllerServices.loadControllerServices(controllerServicesUri, serviceTable);
+                      },
+                        goToServiceDeferred: function () {
+                            return goToServiceFromProperty(serviceTable);
+                        }
+                    });
+    
+                    // update the mode
+                    controllerServiceDialog.data('mode', config.edit);
+                }
+    
+              //track the current table
+              currentTable = serviceTable;
+  
+                // reload the service in case the property descriptors have changed
+                var reloadService = $.ajax({
+                    type: 'GET',
+                    url: controllerServiceEntity.uri,
+                    dataType: 'json'
+                });
+    
+                // get the controller service history
+                var loadHistory = $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/flow/history/components/' + encodeURIComponent(controllerServiceEntity.id),
+                    dataType: 'json'
+                });
+    
+                // once everything is loaded, show the dialog
+                $.when(reloadService, loadHistory).done(function (serviceResponse, historyResponse) {
+                    // get the updated controller service
+                    controllerServiceEntity = serviceResponse[0];
+                    var controllerService = controllerServiceEntity.component;
+    
+                    // get the controller service history
+                    var controllerServiceHistory = historyResponse[0].componentHistory;
+    
+                    // record the controller service details
+                    controllerServiceDialog.data('controllerServiceDetails', controllerServiceEntity);
+    
+                    // populate the controller service settings
+                  nfCommon.populateField('controller-service-id', controllerService['id']);
+                  nfCommon.populateField('controller-service-type', nfCommon.substringAfterLast(controllerService['type'], '.'));
+                    $('#controller-service-name').val(controllerService['name']);
+                    $('#controller-service-comments').val(controllerService['comments']);
+    
+                    // get the reference container
+                    var referenceContainer = $('#controller-service-referencing-components');
+    
+                    // load the controller referencing components list
+                    createReferencingComponents(serviceTable, referenceContainer, controllerService.referencingComponents);
+    
+                    var buttons = [{
+                      buttonText: nf._.msg('nf-controller-service.Apply'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                // close all fields currently being edited
+                                $('#controller-service-properties').propertytable('saveRow');
+    
+                                // save the controller service
+                                saveControllerService(serviceTable, controllerServiceEntity).done(function (response) {
+                                    reloadControllerServiceReferences(serviceTable, response.component);
+    
+                                    // close the details panel
+                                    controllerServiceDialog.modal('hide');
+                                });
+                            }
+                        }
+                    }, {
+                          buttonText: nf._.msg('nf-controller-service.Cancel'),
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                controllerServiceDialog.modal('hide');
+                            }
+                        }
+                    }];
+    
+                    // determine if we should show the advanced button
+                  if (nfCommon.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') {
+                        buttons.push({
+                          buttonText: nf._.msg('nf-controller-service.Advanced'),
+                            clazz: 'fa fa-cog button-icon',
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    var openCustomUi = function () {
+                                        // reset state and close the dialog manually to avoid hiding the faded background
+                                        controllerServiceDialog.modal('hide');
+    
+                                        // close the settings dialog since the custom ui is also opened in the shell
+                                        $('#shell-close-button').click();
+    
+                                        // show the custom ui
+                                      nfCustomUi.showCustomUi(controllerServiceEntity, controllerService.customUiUrl, true).done(function () {
+                                            // once the custom ui is closed, reload the controller service
+                                            reloadControllerServiceAndReferencingComponents(serviceTable, controllerService);
+    
+                                            // show the settings
+                                          nfSettings.showSettings();
+                                        });
+                                    };
+    
+                                    // close all fields currently being edited
+                                    $('#controller-service-properties').propertytable('saveRow');
+    
+                                    // determine if changes have been made
+                                    if (isSaveRequired()) {
+                                        // see if those changes should be saved
+                                      nfDialog.showYesNoDialog({
+                                          headerText: nf._.msg('nf-controller-service.Save'),
+                                          dialogContent: nf._.msg('nf-controller-service.Message13'),
+                                            noHandler: openCustomUi,
+                                            yesHandler: function () {
+                                                saveControllerService(serviceTable, controllerServiceEntity).done(function () {
+                                                    // open the custom ui
+                                                    openCustomUi();
+                                                });
+                                            }
+                                        });
+                                    } else {
+                                        // if there were no changes, simply open the custom ui
+                                        openCustomUi();
+                                    }
+                                }
+                            }
+                        });
+                    }
+    
+                    // set the button model
+                    controllerServiceDialog.modal('setButtonModel', buttons);
+    
+                    // load the property table
+                    $('#controller-service-properties')
+                        .propertytable('setGroupId', controllerService.parentGroupId)
+                        .propertytable('loadProperties', controllerService.properties, controllerService.descriptors, controllerServiceHistory.propertyHistory);
+    
+                    // show the details
+                    controllerServiceDialog.modal('show');
+    
+                    // show the border if necessary
+                    updateReferencingComponentsBorder(referenceContainer);
+    
+                    $('#controller-service-properties').propertytable('resetTableSize');
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows the controller service details in a read only dialog.
+             *
+             * @param {jQuery} serviceTable
+             * @param {object} controllerServiceEntity
+             */
+            showDetails: function (serviceTable, controllerServiceEntity) {
+                var controllerServiceDialog = $('#controller-service-configuration');
+                if (controllerServiceDialog.data('mode') !== config.readOnly) {
+                    // update the visibility
+                    $('#controller-service-configuration .controller-service-read-only').show();
+                    $('#controller-service-configuration .controller-service-editable').hide();
+    
+                    // initialize the property table
+                    $('#controller-service-properties').propertytable('destroy').propertytable({
+                      supportsGoTo: true,
+                        readOnly: true
+                    });
+    
+                    // update the mode
+                    controllerServiceDialog.data('mode', config.readOnly);
+                }
+    
+                // reload the service in case the property descriptors have changed
+                var reloadService = $.ajax({
+                    type: 'GET',
+                    url: controllerServiceEntity.uri,
+                    dataType: 'json'
+                });
+    
+                // get the controller service history
+                var loadHistory = $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/flow/history/components/' + encodeURIComponent(controllerServiceEntity.id),
+                    dataType: 'json'
+                });
+    
+                // once everything is loaded, show the dialog
+                $.when(reloadService, loadHistory).done(function (serviceResponse, historyResponse) {
+                    // get the updated controller service
+                    controllerServiceEntity = serviceResponse[0];
+                    var controllerService = controllerServiceEntity.component;
+    
+                    // get the controller service history
+                    var controllerServiceHistory = historyResponse[0].componentHistory;
+    
+                    // record the controller service details
+                    controllerServiceDialog.data('controllerServiceDetails', controllerServiceEntity);
+    
+                    // populate the controller service settings
+                  nfCommon.populateField('controller-service-id', controllerService['id']);
+                  nfCommon.populateField('controller-service-type', nfCommon.substringAfterLast(controllerService['type'], '.'));
+                  nfCommon.populateField('read-only-controller-service-name', controllerService['name']);
+                  nfCommon.populateField('read-only-controller-service-comments', controllerService['comments']);
+    
+                    // get the reference container
+                    var referenceContainer = $('#controller-service-referencing-components');
+    
+                    // load the controller referencing components list
+                    createReferencingComponents(serviceTable, referenceContainer, controllerService.referencingComponents);
+    
+                    var buttons = [{
+                      buttonText: nf._.msg('nf-controller-service.Ok'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                // hide the dialog
+                                controllerServiceDialog.modal('hide');
+                            }
+                        }
+                    }];
+    
+                    // determine if we should show the advanced button
+                  if (nfCommon.isDefinedAndNotNull(nfCustomUi) && nfCommon.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') {
+                        buttons.push({
+                          buttonText: nf._.msg('nf-controller-service.Advanced'),
+                            clazz: 'fa fa-cog button-icon',
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    // reset state and close the dialog manually to avoid hiding the faded background
+                                    controllerServiceDialog.modal('hide');
+    
+                                    // close the settings dialog since the custom ui is also opened in the shell
+                                    $('#shell-close-button').click();
+    
+                                    // show the custom ui
+                                  nfCustomUi.showCustomUi(controllerServiceEntity, controllerService.customUiUrl, false).done(function () {
+                                      nfSettings.showSettings();
+                                    });
+                                }
+                            }
+                        });
+                    }
+    
+                    // show the dialog
+                    controllerServiceDialog.modal('setButtonModel', buttons);
+    
+                    // load the property table
+                    $('#controller-service-properties').propertytable('loadProperties', controllerService.properties, controllerService.descriptors, controllerServiceHistory.propertyHistory);
+    
+                    // show the details
+                    controllerServiceDialog.modal('show');
+    
+                    // show the border if necessary
+                    updateReferencingComponentsBorder(referenceContainer);
+    
+                    $('#controller-service-properties').propertytable('resetTableSize');
+                });
+            },
+    
+            /**
+             * Enables the specified controller service.
+             *
+             * @param {jQuery} serviceTable
+             * @param {object} controllerServiceEntity
+             */
+            enable: function (serviceTable, controllerServiceEntity) {
+                showEnableControllerServiceDialog(serviceTable, controllerServiceEntity.component);
+            },
+    
+            /**
+             * Disables the specified controller service.
+             *
+             * @param {jQuery} serviceTable
+             * @param {object} controllerServiceEntity
+             */
+            disable: function (serviceTable, controllerServiceEntity) {
+                showDisableControllerServiceDialog(serviceTable, controllerServiceEntity.component);
+            },
+    
+            /**
+             * Reloads the services that the specified comonent references. This is
+             * necessary because the specified component state is reflected in the
+             * referenced service referencing components.
+             *
+             * @param {jQuery} serviceTable
+             * @param {object} component
+             */
+            reloadReferencedServices: function (serviceTable, component) {
+                $.each(getReferencedServices(component), function (_, referencedServiceId) {
+                    reloadControllerService(serviceTable, referencedServiceId);
+                });
+            },
+    
+            /**
+           * Prompts the user before attempting to delete the specified controller service.
+           *
+           * @param {jQuery} serviceTable
+           * @param {object} controllerServiceEntity
+           */
+          promptToDeleteController: function (serviceTable, controllerServiceEntity) {
+              // prompt for deletion
+              nfDialog.showYesNoDialog({
+                  headerText: 'Delete Controller Service',
+                  dialogContent: 'Delete controller service \'' + nfCommon.escapeHtml(controllerServiceEntity.component.name) + '\'?',
+                  yesHandler: function () {
+                      nfControllerService.remove(serviceTable, controllerServiceEntity);
+                  }
+              });
+          },
+  
+          /**
+             * Deletes the specified controller service.
+             *
+             * @param {jQuery} serviceTable
+             * @param {object} controllerServiceEntity
+             */
+            remove: function (serviceTable, controllerServiceEntity) {
+                // prompt for removal?
+    
+              var revision = nfClient.getRevision(controllerServiceEntity);
+                $.ajax({
+                    type: 'DELETE',
+                    url: controllerServiceEntity.uri + '?' + $.param({
+                        version: revision.version,
+                        clientId: revision.clientId
+                    }),
+                    dataType: 'json'
+                }).done(function (response) {
+                    // remove the service
+                    var controllerServiceGrid = serviceTable.data('gridInstance');
+                    var controllerServiceData = controllerServiceGrid.getData();
+                    controllerServiceData.deleteItem(controllerServiceEntity.id);
+    
+                    // reload the as necessary
+                    if (controllerServiceEntity.permissions.canRead) {
+                        reloadControllerServiceReferences(serviceTable, controllerServiceEntity.component);
+                    }
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+    
+      return nfControllerService;
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
new file mode 100644
index 000000000000..15a658806024
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
@@ -0,0 +1,1222 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'Slick',
+                  'nf.Client',
+                  'nf.Shell',
+                  'nf.ProcessGroupConfiguration',
+                  'nf.CanvasUtils',
+                  'nf.ErrorHandler',
+                  'nf.Dialog',
+                  'nf.Common',
+                  'nf.ControllerService',
+                  'nf.ProcessGroup',
+                  'nf.PolicyManagement',
+                  'nf.ComponentState',
+                  'nf.ng.Bridge'],
+              function ($, d3, Slick, nfClient, nfShell, nfProcessGroupConfiguration, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon, nfControllerService, nfProcessGroup, nfPolicyManagement, nfComponentState, nfNgBridge) {
+                  return (nf.ControllerServices = factory($, d3, Slick, nfClient, nfShell, nfProcessGroupConfiguration, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon, nfControllerService, nfProcessGroup, nfPolicyManagement, nfComponentState, nfNgBridge));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ControllerServices =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('Slick'),
+                  require('nf.Client'),
+                  require('nf.Shell'),
+                  require('nf.ProcessGroupConfiguration'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Dialog'),
+                  require('nf.Common'),
+                  require('nf.ControllerService'),
+                  require('nf.ProcessGroup'),
+                  require('nf.PolicyManagement'),
+                  require('nf.ComponentState'),
+                  require('nf.ng.Bridge')));
+      } else {
+          nf.ControllerServices = factory(root.$,
+              root.d3,
+              root.Slick,
+              root.nf.Client,
+              root.nf.Shell,
+              root.nf.ProcessGroupConfiguration,
+              root.nf.CanvasUtils,
+              root.nf.ErrorHandler,
+              root.nf.Dialog,
+              root.nf.Common,
+              root.nf.ControllerService,
+              root.nf.ProcessGroup,
+              root.nf.PolicyManagement,
+              root.nf.ComponentState,
+              root.nf.ng.Bridge);
+      }
+  }(this, function ($, d3, Slick, nfClient, nfShell, nfProcessGroupConfiguration, nfCanvasUtils, nfErrorHandler, nfDialog, nfCommon, nfControllerService, nfProcessGroup, nfPolicyManagement, nfComponentState, nfNgBridge) {
+      'use strict';
+    
+        var dblClick = null;
+        var initialized = false;
+    
+        var config = {
+            urls: {
+                api: '../nifi-api',
+                controllerServiceTypes: '../nifi-api/flow/controller-service-types'
+            }
+        };
+    
+        var gridOptions = {
+            forceFitColumns: true,
+            enableTextSelectionOnCells: true,
+            enableCellNavigation: true,
+            enableColumnReorder: false,
+            autoEdit: false,
+            multiSelect: false,
+            rowHeight: 24
+        };
+    
+        /**
+       * Whether the specified item is selectable.
+       *
+       * @param item controller service type
+       */
+      var isSelectable = function (item) {
+          return nfCommon.isBlank(item.usageRestriction) || nfCommon.canAccessRestrictedComponents();
+      };
+  
+      /**
+         * 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 getControllerServiceTypeFilterText = function () {
+            return $('#controller-service-type-filter').val();
+        };
+    
+        /**
+         * Filters the processor type table.
+         */
+        var applyControllerServiceTypeFilter = function () {
+            // get the dataview
+            var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(controllerServiceTypesGrid)) {
+                var controllerServiceTypesData = controllerServiceTypesGrid.getData();
+    
+                // update the search criteria
+                controllerServiceTypesData.setFilterArgs({
+                    searchString: getControllerServiceTypeFilterText()
+                });
+                controllerServiceTypesData.refresh();
+    
+              // update the buttons to possibly trigger the disabled state
+              $('#new-controller-service-dialog').modal('refreshButtons');
+  
+                // update the selection if possible
+                if (controllerServiceTypesData.getLength() > 0) {
+                    controllerServiceTypesGrid.setSelectedRows([0]);
+                }
+            }
+        };
+    
+        /**
+         * Hides the selected controller service.
+         */
+        var clearSelectedControllerService = function () {
+            $('#controller-service-type-description').text('');
+            $('#controller-service-type-name').text('');
+            $('#selected-controller-service-name').text('');
+            $('#selected-controller-service-type').text('');
+            $('#controller-service-description-container').hide();
+        };
+    
+        /**
+         * Clears the selected controller service type.
+         */
+        var clearControllerServiceSelection = function () {
+            // clear the selected row
+            clearSelectedControllerService();
+    
+            // clear the active cell the it can be reselected when its included
+            var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
+            controllerServiceTypesGrid.resetActiveCell();
+        };
+    
+        /**
+         * Performs the filtering.
+         *
+         * @param {object} item     The item subject to filtering
+         * @param {object} args     Filter arguments
+         * @returns {Boolean}       Whether or not to include the item
+         */
+        var filterControllerServiceTypes = function (item, args) {
+            // determine if the item matches the filter
+            var matchesFilter = matchesRegex(item, args);
+    
+            // determine if the row matches the selected tags
+            var matchesTags = true;
+            if (matchesFilter) {
+                var tagFilters = $('#controller-service-tag-cloud').tagcloud('getSelectedTags');
+                var hasSelectedTags = tagFilters.length > 0;
+                if (hasSelectedTags) {
+                    matchesTags = matchesSelectedTags(tagFilters, item['tags']);
+                }
+            }
+    
+            // determine if this row should be visible
+            var matches = matchesFilter && matchesTags;
+    
+            // if this row is currently selected and its being filtered
+            if (matches === false && $('#selected-controller-service-type').text() === item['type']) {
+                clearControllerServiceSelection();
+            }
+    
+            return matches;
+        };
+    
+        /**
+         * Determines if the item matches the filter.
+         *
+         * @param {object} item     The item to filter
+         * @param {object} args     The filter criteria
+         * @returns {boolean}       Whether the item matches the filter
+         */
+        var matchesRegex = function (item, args) {
+            if (args.searchString === '') {
+                return true;
+            }
+    
+            try {
+                // perform the row filtering
+                var filterExp = new RegExp(args.searchString, 'i');
+            } catch (e) {
+                // invalid regex
+                return false;
+            }
+    
+            // determine if the item matches the filter
+            var matchesLabel = item['label'].search(filterExp) >= 0;
+            var matchesTags = item['tags'].search(filterExp) >= 0;
+            return matchesLabel || matchesTags;
+        };
+    
+        /**
+         * Determines if the specified tags match all the tags selected by the user.
+         *
+         * @argument {string[]} tagFilters      The tag filters
+         * @argument {string} tags              The tags to test
+         */
+        var matchesSelectedTags = function (tagFilters, tags) {
+            var selectedTags = [];
+            $.each(tagFilters, function (_, filter) {
+                selectedTags.push(filter);
+            });
+    
+            // normalize the tags
+            var normalizedTags = tags.toLowerCase();
+    
+            var matches = true;
+            $.each(selectedTags, function (i, selectedTag) {
+                if (normalizedTags.indexOf(selectedTag) === -1) {
+                    matches = false;
+                    return false;
+                }
+            });
+    
+            return matches;
+        };
+    
+        /**
+         * Adds the currently selected controller service.
+         *
+         * @param {string} controllerServicesUri
+         * @param {jQuery} serviceTable
+         */
+        var addSelectedControllerService = function (controllerServicesUri, serviceTable) {
+            var selectedServiceType = $('#selected-controller-service-type').text();
+    
+            // ensure something was selected
+            if (selectedServiceType === '') {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-controller-service.ControllerService'),
+                  dialogContent: nf._.msg('nf-controller-service.Message14')
+                });
+            } else {
+                addControllerService(controllerServicesUri, serviceTable, selectedServiceType);
+            }
+        };
+    
+        /**
+         * Adds a new controller service of the specified type.
+         *
+         * @param {string} controllerServicesUri
+         * @param {jQuery} serviceTable
+         * @param {string} controllerServiceType
+         */
+        var addControllerService = function (controllerServicesUri, serviceTable, controllerServiceType) {
+            // build the controller service entity
+            var controllerServiceEntity = {
+              'revision': nfClient.getRevision({
+                    'revision': {
+                        'version': 0
+                    }
+                }),
+                'component': {
+                    'type': controllerServiceType
+                }
+            };
+    
+            // add the new controller service
+            var addService = $.ajax({
+                type: 'POST',
+                url: controllerServicesUri,
+                data: JSON.stringify(controllerServiceEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (controllerServiceEntity) {
+                // add the item
+                var controllerServicesGrid = serviceTable.data('gridInstance');
+                var controllerServicesData = controllerServicesGrid.getData();
+                controllerServicesData.addItem(controllerServiceEntity);
+    
+                // resort
+                controllerServicesData.reSort();
+                controllerServicesGrid.invalidate();
+    
+                // select the new controller service
+                var row = controllerServicesData.getRowById(controllerServiceEntity.id);
+                controllerServicesGrid.setSelectedRows([row]);
+                controllerServicesGrid.scrollRowIntoView(row);
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // hide the dialog
+            $('#new-controller-service-dialog').modal('hide');
+    
+            return addService;
+        };
+    
+        /**
+         * Initializes the new controller service dialog.
+         */
+        var initNewControllerServiceDialog = function () {
+            // initialize the processor type table
+            var controllerServiceTypesColumns = [
+              {
+                  id: 'type',
+                  name: nf._.msg('nf-controller-services.Type'),
+                  field: 'label',
+                  formatter: nfCommon.typeFormatter,
+                  sortable: false,
+                  resizable: true
+              },
+              {
+                  id: 'tags',
+                  name: nf._.msg('nf-controller-services.Tags'),
+                  field: 'tags',
+                  sortable: false,
+                  resizable: true
+              }
+            ];
+    
+            // initialize the dataview
+            var controllerServiceTypesData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            controllerServiceTypesData.setItems([]);
+            controllerServiceTypesData.setFilterArgs({
+                searchString: getControllerServiceTypeFilterText()
+            });
+            controllerServiceTypesData.setFilter(filterControllerServiceTypes);
+    
+            // initialize the grid
+            var controllerServiceTypesGrid = new Slick.Grid('#controller-service-types-table', controllerServiceTypesData, controllerServiceTypesColumns, gridOptions);
+            controllerServiceTypesGrid.setSelectionModel(new Slick.RowSelectionModel());
+            controllerServiceTypesGrid.registerPlugin(new Slick.AutoTooltips());
+            controllerServiceTypesGrid.setSortColumn('type', true);
+            controllerServiceTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) {
+                if ($.isArray(args.rows) && args.rows.length === 1) {
+                    var controllerServiceTypeIndex = args.rows[0];
+                    var controllerServiceType = controllerServiceTypesGrid.getDataItem(controllerServiceTypeIndex);
+    
+                    // set the controller service type description
+                  if (nfCommon.isDefinedAndNotNull(controllerServiceType)) {
+                	// show the selected controller service
+                      $('#controller-service-description-container').show();
+
+                      if (nfCommon.isBlank(controllerServiceType.description)) {
+                          $('#controller-service-type-description')
+                              .attr('title', '')
+                              .html('<span class="unset">No description specified</span>');
+                      } else {
+                          $('#controller-service-type-description')
+                              .width($('#controller-service-description-container').innerWidth() - 1)
+                              .html(controllerServiceType.description)
+                              .ellipsis();
+                      }
+  
+                      // populate the dom
+                      $('#controller-service-type-name').text(controllerServiceType.label).ellipsis();
+                      $('#selected-controller-service-name').text(controllerServiceType.label);
+                      $('#selected-controller-service-type').text(controllerServiceType.type);
+  
+                      // refresh the buttons based on the current selection
+                      $('#new-controller-service-dialog').modal('refreshButtons');
+                  }
+              }
+          });
+          controllerServiceTypesGrid.onViewportChanged.subscribe(function (e, args) {
+              nfCommon.cleanUpTooltips($('#controller-service-types-table'), 'div.view-usage-restriction');
+            });
+    
+            // wire up the dataview to the grid
+            controllerServiceTypesData.onRowCountChanged.subscribe(function (e, args) {
+                controllerServiceTypesGrid.updateRowCount();
+                controllerServiceTypesGrid.render();
+    
+                // update the total number of displayed processors
+                $('#displayed-controller-service-types').text(args.current);
+            });
+            controllerServiceTypesData.onRowsChanged.subscribe(function (e, args) {
+                controllerServiceTypesGrid.invalidateRows(args.rows);
+                controllerServiceTypesGrid.render();
+            });
+            controllerServiceTypesData.syncGridSelection(controllerServiceTypesGrid, true);
+    
+            // hold onto an instance of the grid
+          $('#controller-service-types-table').data('gridInstance', controllerServiceTypesGrid).on('mouseenter', 'div.slick-cell', function (e) {
+              var usageRestriction = $(this).find('div.view-usage-restriction');
+              if (usageRestriction.length && !usageRestriction.data('qtip')) {
+                  var rowId = $(this).find('span.row-id').text();
+  
+                  // get the status item
+                  var item = controllerServiceTypesData.getItemById(rowId);
+  
+                  // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(item.usageRestriction)) {
+                      usageRestriction.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                          content: item.usageRestriction,
+                          position: {
+                              container: $('#summary'),
+                              at: 'bottom right',
+                              my: 'top left',
+                              adjust: {
+                                  x: 4,
+                                  y: 4
+                              }
+                          }
+                      }));
+                  }
+              }
+          });
+    
+            // load the available controller services
+            $.ajax({
+                type: 'GET',
+                url: config.urls.controllerServiceTypes,
+                dataType: 'json'
+            }).done(function (response) {
+                var id = 0;
+                var tags = [];
+    
+                // begin the update
+                controllerServiceTypesData.beginUpdate();
+    
+                // go through each controller service type
+                $.each(response.controllerServiceTypes, function (i, documentedType) {
+                    // add the documented type
+                    controllerServiceTypesData.addItem({
+                        id: id++,
+                      label: nfCommon.substringAfterLast(documentedType.type, '.'),
+                        type: documentedType.type,
+                      description: nfCommon.escapeHtml(documentedType.description),
+                      usageRestriction: nfCommon.escapeHtml(documentedType.usageRestriction),
+                        tags: documentedType.tags.join(', ')
+                    });
+    
+                    // count the frequency of each tag for this type
+                    $.each(documentedType.tags, function (i, tag) {
+                        tags.push(tag.toLowerCase());
+                    });
+                });
+    
+                // end the udpate
+                controllerServiceTypesData.endUpdate();
+    
+                // set the total number of processors
+                $('#total-controller-service-types, #displayed-controller-service-types').text(response.controllerServiceTypes.length);
+    
+                // create the tag cloud
+                $('#controller-service-tag-cloud').tagcloud({
+                    tags: tags,
+                    select: applyControllerServiceTypeFilter,
+                    remove: applyControllerServiceTypeFilter
+                });
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // initialize the controller service dialog
+            $('#new-controller-service-dialog').modal({
+              headerText: nf._.msg('nf-controller-service.AddControllerService'),
+                scrollableContentStyle: 'scrollable',
+                handler: {
+                    close: function () {
+                        // clear the selected row
+                        clearSelectedControllerService();
+    
+                        // clear any filter strings
+                        $('#controller-service-type-filter').val('');
+    
+                        // clear the tagcloud
+                        $('#controller-service-tag-cloud').tagcloud('clearSelectedTags');
+    
+                        // reset the filter
+                        applyControllerServiceTypeFilter();
+    
+                        // unselect any current selection
+                        var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
+                        controllerServiceTypesGrid.setSelectedRows([]);
+                        controllerServiceTypesGrid.resetActiveCell();
+                  },
+                  resize: function () {
+                      $('#controller-service-type-description')
+                          .width($('#controller-service-description-container').innerWidth() - 1)
+                          .text($('#controller-service-type-description').attr('title'))
+                          .ellipsis();
+                    }
+                }
+            });
+        };
+    
+        /**
+         * Formatter for the name column.
+         *
+         * @param {type} row
+         * @param {type} cell
+         * @param {type} value
+         * @param {type} columnDef
+         * @param {type} dataContext
+         * @returns {String}
+         */
+        var nameFormatter = function (row, cell, value, columnDef, dataContext) {
+            if (!dataContext.permissions.canRead) {
+                return '<span class="blank">' + dataContext.id + '</span>';
+            }
+            
+            return dataContext.component.name;
+        };
+    
+        /**
+         * Formatter for the type column.
+         *
+         * @param {type} row
+         * @param {type} cell
+         * @param {type} value
+         * @param {type} columnDef
+         * @param {type} dataContext
+         * @returns {String}
+         */
+        var typeFormatter = function (row, cell, value, columnDef, dataContext) {
+            if (!dataContext.permissions.canRead) {
+                return '';
+            }
+            
+          return nfCommon.substringAfterLast(dataContext.component.type, '.');
+        };
+    
+        /**
+         * Formatter for the name column.
+         *
+         * @param {type} row
+         * @param {type} cell
+         * @param {type} value
+         * @param {type} columnDef
+         * @param {type} dataContext
+         * @returns {String}
+         */
+        var groupIdFormatter = function (row, cell, value, columnDef, dataContext) {
+            if (!dataContext.permissions.canRead) {
+                return '';
+            }
+    
+          if (nfCommon.isDefinedAndNotNull(dataContext.component.parentGroupId)) {
+              // see if this listing is based off a selected process group
+              var selection = nfCanvasUtils.getSelection();
+              if (selection.empty() === false) {
+                  var selectedData = selection.datum();
+                  if (selectedData.id === dataContext.component.parentGroupId) {
+                      if (selectedData.permissions.canRead) {
+                          return selectedData.component.name;
+                      } else {
+                          return selectedData.id;
+                      }
+                  }
+              }
+  
+              // there's either no selection or the service is defined in an ancestor component
+              var breadcrumbs = nfNgBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs();
+  
+              var processGroupLabel = dataContext.component.parentGroupId;
+              $.each(breadcrumbs, function (_, breadcrumbEntity) {
+                  if (breadcrumbEntity.id === dataContext.component.parentGroupId) {
+                      processGroupLabel = breadcrumbEntity.label;
+                      return false;
+                  }
+              });
+  
+              return processGroupLabel;
+          } else {
+              return 'Controller';
+          }
+      };
+  
+      /**
+       * Determines if the user has write permissions for the parent of the specified controller service.
+       *
+       * @param dataContext
+       * @returns {boolean} whether the user has write permissions for the parent of the controller service
+       */
+      var canWriteControllerServiceParent = function (dataContext) {
+          // we know the process group for this controller service is part of the current breadcrumb trail
+          var canWriteProcessGroupParent = function (processGroupId) {
+              // see if this listing is based off a selected process group
+              var selection = nfCanvasUtils.getSelection();
+              if (selection.empty() === false) {
+                  var datum = selection.datum();
+                  if (datum.id === processGroupId) {
+                      return datum.permissions.canWrite;
+                  }
+              }
+  
+              // there's either no selection or the service is defined in an ancestor component
+              var breadcrumbs = nfNgBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs();
+  
+              var isAuthorized = false;
+              $.each(breadcrumbs, function (_, breadcrumbEntity) {
+                  if (breadcrumbEntity.id === processGroupId) {
+                      isAuthorized = breadcrumbEntity.permissions.canWrite;
+                      return false;
+                  }
+              });
+  
+              return isAuthorized;
+          };
+  
+          if (nfCommon.isDefinedAndNotNull(dataContext.component.parentGroupId)) {
+              return canWriteProcessGroupParent(dataContext.component.parentGroupId);
+          } else {
+              return nfCommon.canModifyController();
+            }
+        };
+    
+        /**
+         * 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 (sortDetails.columnId === 'moreDetails') {
+                        var aBulletins = 0;
+                      if (!nfCommon.isEmpty(a.bulletins)) {
+                            aBulletins = a.bulletins.length;
+                        }
+                        var bBulletins = 0;
+                      if (!nfCommon.isEmpty(b.bulletins)) {
+                            bBulletins = b.bulletins.length;
+                        }
+                        return aBulletins - bBulletins;
+                    } else if (sortDetails.columnId === 'type') {
+                      var aType = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(a.component[sortDetails.columnId], '.') : '';
+                      var bType = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(b.component[sortDetails.columnId], '.') : '';
+                        return aType === bType ? 0 : aType > bType ? 1 : -1;
+                    } else if (sortDetails.columnId === 'state') {
+                        var aState = 'Invalid';
+                      if (nfCommon.isEmpty(a.component.validationErrors)) {
+                          aState = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                        }
+                        var bState = 'Invalid';
+                      if (nfCommon.isEmpty(b.component.validationErrors)) {
+                          bState = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                        }
+                        return aState === bState ? 0 : aState > bState ? 1 : -1;
+                    } else {
+                      var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                      var bString = nfCommon.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){
+                        return 0;
+                    }
+                    if(a.permissions.canRead){
+                        return 1;
+                    } else {
+                        return -1;
+                    }
+                }
+            };
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+        };
+    
+        /**
+         * Initializes the controller services tab.
+         * 
+         * @param {jQuery} serviceTable
+       * @param {function} showSettings
+         */
+      var initControllerServices = function (serviceTable, showSettings) {
+            // more details formatter
+            var moreControllerServiceDetails = function (row, cell, value, columnDef, dataContext) {
+                if (!dataContext.permissions.canRead) {
+                    return '';
+                }
+                
+              var markup = '<div class="pointer view-controller-service fa fa-info-circle" title="'+nf._.msg('nf-controller-services.viewDtails')+'" style="margin-top: 5px; margin-right: 3px;" ></div>';
+    
+                // always include a button to view the usage
+              markup += '<div title="'+nf._.msg('nf-controller-services.usage')+'" class="pointer controller-service-usage fa fa-book" style="margin-top: 5px; margin-right: 3px;" ></div>';
+    
+              var hasErrors = !nfCommon.isEmpty(dataContext.component.validationErrors);
+              var hasBulletins = !nfCommon.isEmpty(dataContext.bulletins);
+    
+                if (hasErrors) {
+                    markup += '<div class="pointer has-errors fa fa-warning" style="margin-top: 4px; margin-right: 3px; float: left;" ></div>';
+                }
+    
+                if (hasBulletins) {
+                    markup += '<div class="has-bulletins fa fa-sticky-note-o" style="margin-top: 5px; margin-right: 3px; float: left;"></div>';
+                }
+    
+                if (hasErrors || hasBulletins) {
+                  markup += '<span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
+                }
+    
+                return markup;
+            };
+    
+            var controllerServiceStateFormatter = function (row, cell, value, columnDef, dataContext) {
+                if (!dataContext.permissions.canRead) {
+                    return '';
+                }
+                
+                // determine the appropriate label
+                var icon = '', label = '';
+              if (!nfCommon.isEmpty(dataContext.component.validationErrors)) {
+                    icon = 'invalid fa fa-warning';
+                  label = nf._.msg('nf-controller-services.Invalid');
+                } else {
+                    if (dataContext.component.state === 'DISABLED') {
+                        icon = 'disabled icon icon-enable-false"';
+                      label = nf._.msg('nf-controller-services.Disabled');
+                    } else if (dataContext.component.state === 'DISABLING') {
+                        icon = 'disabled icon icon-enable-false"';
+                      label = nf._.msg('nf-controller-services.Disabling');
+                    } else if (dataContext.component.state === 'ENABLED') {
+                        icon = 'enabled fa fa-flash';
+                      label = nf._.msg('nf-controller-services.Enabled');
+                    } else if (dataContext.component.state === 'ENABLING') {
+                        icon = 'enabled fa fa-flash';
+                      label = nf._.msg('nf-controller-services.Enabling');
+                    }
+                }
+    
+                // format the markup
+                var formattedValue = '<div layout="row"><div class="' + icon + '" style="margin-top: 5px;"></div>';
+                return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + label + '</div></div>';
+            };
+    
+            var controllerServiceActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+    
+                if (dataContext.permissions.canRead && dataContext.permissions.canWrite) {
+                  var definedByCurrentGroup = false;
+                  if (nfCommon.isDefinedAndNotNull(dataContext.component.parentGroupId)) {
+                      // when opened in the process group context, the current group is store in #process-group-id
+                      if (dataContext.component.parentGroupId === $('#process-group-id').text()) {
+                          definedByCurrentGroup = true;
+                      }
+                  } else {
+                      // when there is no parent group, the service is defined at the controller level and should be editable
+                      definedByCurrentGroup = true;
+                  }
+  
+                  if (definedByCurrentGroup === true) {
+                        if (dataContext.component.state === 'ENABLED' || dataContext.component.state === 'ENABLING') {
+                      markup += '<div class="pointer disable-controller-service icon icon-enable-false" title="'+nf._.msg('nf-controller-services.disable')+'" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                        } else if (dataContext.component.state === 'DISABLED') {
+                      markup += '<div class="pointer edit-controller-service fa fa-pencil" title="'+nf._.msg('nf-controller-services.edit')+'" style="margin-top: 2px; margin-right: 3px;" ></div>';
+    
+                            // if there are no validation errors allow enabling
+                          if (nfCommon.isEmpty(dataContext.component.validationErrors)) {
+                          markup += '<div class="pointer enable-controller-service fa fa-flash" title="'+nf._.msg('nf-controller-services.enable')+'" style="margin-top: 2px; margin-right: 3px;"></div>';
+                            }
+                        }
+    
+                        if (dataContext.component.persistsState === true) {
+                          markup += '<div title="View State" class="pointer view-state-controller-service fa fa-tasks" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                        }
+    
+                      if (canWriteControllerServiceParent(dataContext)) {
+                          markup += '<div class="pointer delete-controller-service fa fa-trash" title="Remove" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                      }
+                  } else {
+                      markup += '<div class="pointer go-to-controller-service fa fa-long-arrow-right" title="Go To" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                  }
+                }
+    
+                // allow policy configuration conditionally
+              if (nfCanvasUtils.isConfigurableAuthorizer() && nfCommon.canAccessTenants()) {
+                  markup += '<div title="'+nf._.msg('nf-controller-services.acesspolicies')+'" class="pointer edit-access-policies fa fa-key" style="margin-top: 2px;"></div>';
+                }
+    
+                return markup;
+            };
+    
+            // define the column model for the controller services table
+            var controllerServicesColumns = [
+              {
+                  id: 'moreDetails',
+                  name: '&nbsp;',
+                  resizable: false,
+                  formatter: moreControllerServiceDetails,
+                  sortable: true,
+                  width: 90,
+                  maxWidth: 90,
+                  toolTip: 'Sorts based on presence of bulletins'
+              },
+              {
+                  id: 'name',
+                  name: nf._.msg('nf-controller-services.Name'),
+                  formatter: nameFormatter,
+                  sortable: true,
+                  resizable: true
+              },
+              {
+                  id: 'type',
+                  name: nf._.msg('nf-controller-services.Type'),
+                  formatter: typeFormatter,
+                  sortable: true,
+                  resizable: true
+              },
+              {
+                  id: 'state',
+                  name: nf._.msg('nf-controller-services.State'),
+                  formatter: controllerServiceStateFormatter,
+                  sortable: true,
+                  resizeable: true
+              },
+              {
+                  id: 'parentGroupId',
+                  name: nf._.msg('nf-controller-services.ProcessGroup'),
+                  formatter: groupIdFormatter,
+                  sortable: true,
+                  resizeable: true
+              }
+            ];
+    
+            // action column should always be last
+            controllerServicesColumns.push({id: 'actions', name: '&nbsp;', resizable: false, formatter: controllerServiceActionFormatter, sortable: false, width: 90, maxWidth: 90});
+    
+            // initialize the dataview
+            var controllerServicesData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            controllerServicesData.setItems([]);
+    
+            // initialize the sort
+            sort({
+                columnId: 'name',
+                sortAsc: true
+            }, controllerServicesData);
+    
+            // initialize the grid
+            var controllerServicesGrid = new Slick.Grid(serviceTable, controllerServicesData, controllerServicesColumns, gridOptions);
+            controllerServicesGrid.setSelectionModel(new Slick.RowSelectionModel());
+            controllerServicesGrid.registerPlugin(new Slick.AutoTooltips());
+            controllerServicesGrid.setSortColumn('name', true);
+            controllerServicesGrid.onSort.subscribe(function (e, args) {
+                sort({
+                    columnId: args.sortCol.id,
+                    sortAsc: args.sortAsc
+                }, controllerServicesData);
+            });
+    
+            // configure a click listener
+            controllerServicesGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the service at this row
+                var controllerServiceEntity = controllerServicesData.getItem(args.row);
+    
+                // determine the desired action
+                if (controllerServicesGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('edit-controller-service')) {
+                      nfControllerService.showConfiguration(serviceTable, controllerServiceEntity);
+                    } else if (target.hasClass('enable-controller-service')) {
+                      nfControllerService.enable(serviceTable, controllerServiceEntity);
+                    } else if (target.hasClass('disable-controller-service')) {
+                      nfControllerService.disable(serviceTable, controllerServiceEntity);
+                    } else if (target.hasClass('delete-controller-service')) {
+                      nfControllerService.promptToDeleteController(serviceTable, controllerServiceEntity);
+                    } else if (target.hasClass('view-state-controller-service')) {
+                      nfComponentState.showState(controllerServiceEntity, controllerServiceEntity.state === 'DISABLED');
+                    } else if (target.hasClass('edit-access-policies')) {
+                        // show the policies for this service
+                      nfPolicyManagement.showControllerServicePolicy(controllerServiceEntity);
+    
+                        // close the settings dialog
+                        $('#shell-close-button').click();
+                  } else if (target.hasClass('go-to-controller-service')) {
+                      // load the parent group of the selected service
+                      nfProcessGroup.enterGroup(controllerServiceEntity.component.parentGroupId);
+  
+                      // open/select the specific service
+                      $.Deferred(function (deferred) {
+                          if ($('#process-group-configuration').is(':visible')) {
+                              nfProcessGroupConfiguration.loadConfiguration(controllerServiceEntity.component.parentGroupId).done(function () {
+                                  deferred.resolve();
+                              });
+                          } else {
+                              nfProcessGroupConfiguration.showConfiguration(controllerServiceEntity.component.parentGroupId).done(function () {
+                                  deferred.resolve();
+                              });
+                          }
+                      }).done(function () {
+                          nfProcessGroupConfiguration.selectControllerService(controllerServiceEntity.id);
+                      });
+                    }
+                } else if (controllerServicesGrid.getColumns()[args.cell].id === 'moreDetails') {
+                    if (target.hasClass('view-controller-service')) {
+                      nfControllerService.showDetails(serviceTable, controllerServiceEntity);
+                    } else if (target.hasClass('controller-service-usage')) {
+                         // close the settings dialog
+                         $('#shell-close-button').click();
+    
+                         // open the documentation for this controller service
+                       nfShell.showPage('../nifi-docs/documentation?' + $.param({
+                           select: nfCommon.substringAfterLast(controllerServiceEntity.component.type, '.')
+                         })).done(function() {
+                           if (nfCommon.isDefinedAndNotNull(controllerServiceEntity.component.parentGroupId)) {
+                                 var groupId;
+                               var processGroup = nfProcessGroup.get(controllerServiceEntity.component.parentGroupId);
+                               if (nfCommon.isDefinedAndNotNull(processGroup)) {
+                                     groupId = processGroup.id;
+                                 } else {
+                                   groupId = nfCanvasUtils.getGroupId();
+                                 }
+    
+                                 // reload the corresponding group
+                               nfProcessGroupConfiguration.showConfiguration(groupId);
+                             } else {
+                               showSettings();
+                             }
+                         });
+                     }
+                }
+            });
+    
+            // wire up the dataview to the grid
+            controllerServicesData.onRowCountChanged.subscribe(function (e, args) {
+                controllerServicesGrid.updateRowCount();
+                controllerServicesGrid.render();
+            });
+            controllerServicesData.onRowsChanged.subscribe(function (e, args) {
+                controllerServicesGrid.invalidateRows(args.rows);
+                controllerServicesGrid.render();
+            });
+            controllerServicesData.syncGridSelection(controllerServicesGrid, true);
+    
+            // hold onto an instance of the grid
+            serviceTable.data('gridInstance', controllerServicesGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var errorIcon = $(this).find('div.has-errors');
+                if (errorIcon.length && !errorIcon.data('qtip')) {
+                    var serviceId = $(this).find('span.row-id').text();
+    
+                    // get the service item
+                    var controllerServiceEntity = controllerServicesData.getItemById(serviceId);
+    
+                    // format the errors
+                  var tooltip = nfCommon.formatUnorderedList(controllerServiceEntity.component.validationErrors);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                        errorIcon.qtip($.extend({},
+                          nfCommon.config.tooltipConfig,
+                            {
+                                content: tooltip,
+                                position: {
+                                    target: 'mouse',
+                                  viewport: $('#shell-container'),
+                                    adjust: {
+                                        x: 8,
+                                        y: 8,
+                                        method: 'flipinvert flipinvert'
+                                    }
+                                }
+                            }));
+                    }
+                }
+    
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var taskId = $(this).find('span.row-id').text();
+    
+                    // get the task item
+                    var controllerServiceEntity = controllerServicesData.getItemById(taskId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(controllerServiceEntity.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                        bulletinIcon.qtip($.extend({},
+                          nfCommon.config.tooltipConfig,
+                            {
+                                content: tooltip,
+                                position: {
+                                    target: 'mouse',
+                                  viewport: $('#shell-container'),
+                                    adjust: {
+                                        x: 8,
+                                        y: 8,
+                                        method: 'flipinvert flipinvert'
+                                    }
+                                }
+                            }));
+                    }
+                }
+            });
+        };
+    
+        /**
+         * Loads the controller services.
+         *
+         * @param {string} controllerServicesUri
+         * @param {jQuery} serviceTable
+         */
+        var loadControllerServices = function (controllerServicesUri, serviceTable) {
+            return $.ajax({
+                type: 'GET',
+                url: controllerServicesUri,
+                dataType: 'json'
+            }).done(function (response) {
+                var services = [];
+                $.each(response.controllerServices, function (_, service) {
+                    services.push($.extend({
+                        bulletins: []
+                    }, service));
+                });
+    
+              nfCommon.cleanUpTooltips(serviceTable, 'div.has-errors');
+              nfCommon.cleanUpTooltips(serviceTable, 'div.has-bulletins');
+    
+                var controllerServicesGrid = serviceTable.data('gridInstance');
+                var controllerServicesData = controllerServicesGrid.getData();
+    
+                // update the controller services
+                controllerServicesData.setItems(services);
+                controllerServicesData.reSort();
+                controllerServicesGrid.invalidate();
+              controllerServicesGrid.render();
+            });
+        };
+    
+        return {
+            /**
+             * Initializes the status page.
+             *
+             * @param {jQuery} serviceTable
+           * @param {function} showSettings
+             */
+          init: function (serviceTable, showSettings) {
+                if (!initialized) {
+                    // initialize the new controller service dialog
+                    initNewControllerServiceDialog();
+    
+                    // don't run this again
+                    initialized = true;
+                }
+    
+                // initialize the controller service table
+              initControllerServices(serviceTable, showSettings);
+            },
+    
+            /**
+             * Prompts for a new controller service.
+             *
+             * @param {string} controllerServicesUri
+             * @param {jQuery} serviceTable
+             */
+            promptNewControllerService: function (controllerServicesUri, serviceTable) {
+              // get the grid reference
+              var grid = $('#controller-service-types-table').data('gridInstance');
+  
+                // update the keyhandler
+                $('#controller-service-type-filter').off('keyup').on('keyup', function (e) {
+                    var code = e.keyCode ? e.keyCode : e.which;
+                    if (code === $.ui.keyCode.ENTER) {
+                      var selected = grid.getSelectedRows();
+  
+                      if (selected.length > 0) {
+                          // grid configured with multi-select = false
+                          var item = grid.getDataItem(selected[0]);
+                          if (isSelectable(item)) {
+                                addSelectedControllerService(controllerServicesUri, serviceTable);
+                          }
+                      }
+                    } else {
+                        applyControllerServiceTypeFilter();
+                    }
+                });
+    
+                // update the button model and show the dialog
+                $('#new-controller-service-dialog').modal('setButtonModel', [{
+                  buttonText: nf._.msg('nf-controller-services.Add'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                  disabled: function () {
+                      var selected = grid.getSelectedRows();
+  
+                      if (selected.length > 0) {
+                          // grid configured with multi-select = false
+                          var item = grid.getDataItem(selected[0]);
+                          return isSelectable(item) === false;
+                      } else {
+                          return grid.getData().getLength() === 0;
+                      }
+                  },
+                    handler: {
+                        click: function () {
+                            addSelectedControllerService(controllerServicesUri, serviceTable);
+                        }
+                    }
+                }, {
+                  buttonText: nf._.msg('nf-controller-service.Cancel'),
+                    color: {
+                        base: '#E3E8EB',
+                        hover: '#C7D2D7',
+                        text: '#004849'
+                    },
+                    handler: {
+                        click: function () {
+                            $(this).modal('hide');
+                        }
+                    }
+                }]).modal('show');
+    
+                var controllerServiceTypesGrid = $('#controller-service-types-table').data('gridInstance');
+    
+                // remove previous dbl click handler
+                if (dblClick !== null) {
+                    controllerServiceTypesGrid.onDblClick.unsubscribe(dblClick);
+                }
+    
+                // update the dbl click handler and subsrcibe
+                dblClick = function(e, args) {
+                    var controllerServiceType = controllerServiceTypesGrid.getDataItem(args.row);
+    
+                  if (isSelectable(controllerServiceType)) {
+                        addControllerService(controllerServicesUri, serviceTable, controllerServiceType.type);
+                  }
+                };
+                controllerServiceTypesGrid.onDblClick.subscribe(dblClick);
+    
+                // reset the canvas size after the dialog is shown
+              if (nfCommon.isDefinedAndNotNull(controllerServiceTypesGrid)) {
+                    controllerServiceTypesGrid.setSelectedRows([0]);
+                    controllerServiceTypesGrid.resizeCanvas();
+                }
+    
+                // set the initial focus
+                $('#controller-service-type-filter').focus();
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             * 
+             * @param {jQuery} serviceTable
+             */
+            resetTableSize: function (serviceTable) {
+                var controllerServicesGrid = serviceTable.data('gridInstance');
+              if (nfCommon.isDefinedAndNotNull(controllerServicesGrid)) {
+                    controllerServicesGrid.resizeCanvas();
+                }
+            },
+    
+            /**
+             * Loads the settings.
+             *
+             * @param {string} controllerServicesUri
+             * @param {jQuery} serviceTable
+             */
+            loadControllerServices: function (controllerServicesUri, serviceTable) {
+                return loadControllerServices(controllerServicesUri, serviceTable);
+            },
+    
+            /**
+             * Sets the controller service and reporting task bulletins in their respective tables.
+             *
+             * @param {jQuery} serviceTable
+             * @param {object} controllerServiceBulletins
+             */
+            setBulletins: function(serviceTable, controllerServiceBulletins) {
+                // controller services
+                var controllerServicesGrid = serviceTable.data('gridInstance');
+                var controllerServicesData = controllerServicesGrid.getData();
+                controllerServicesData.beginUpdate();
+    
+                // if there are some bulletins process them
+              if (!nfCommon.isEmpty(controllerServiceBulletins)) {
+                    var controllerServiceBulletinsBySource = d3.nest()
+                        .key(function(d) { return d.sourceId; })
+                        .map(controllerServiceBulletins, d3.map);
+    
+                    controllerServiceBulletinsBySource.forEach(function(sourceId, sourceBulletins) {
+                        var controllerService = controllerServicesData.getItemById(sourceId);
+                      if (nfCommon.isDefinedAndNotNull(controllerService)) {
+                            controllerServicesData.updateItem(sourceId, $.extend(controllerService, {
+                                bulletins: sourceBulletins
+                            }));
+                        }
+                    });
+                } else {
+                    // if there are no bulletins clear all
+                    var controllerServices = controllerServicesData.getItems();
+                    $.each(controllerServices, function(_, controllerService) {
+                        controllerServicesData.updateItem(controllerService.id, $.extend(controllerService, {
+                            bulletins: []
+                        }));
+                    });
+                }
+                controllerServicesData.endUpdate();
+            }
+        };
+  }));
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
new file mode 100644
index 000000000000..b76319b219c2
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-custom-ui.js
@@ -0,0 +1,88 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+              'nf.Common',
+              'nf.Shell',
+              'nf.Dialog',
+              'nf.Client'], function ($, nfCommon, nfShell, nfDialog, nfClient) {
+              return (nf.CustomUi = factory($, nfCommon, nfShell, nfDialog, nfClient));
+          });
+      } 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 ($, nfCommon, nfShell, nfDialog, nfClient) {
+      'use strict';
+  
+      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) {
+                  nfCommon.getAccessToken('../nifi-api/access/ui-extension-token').done(function (uiExtensionToken) {
+                        // record the processor id
+                        $('#shell-close-button');
+    
+                      var revision = nfClient.getRevision(entity);
+    
+                        // build the customer ui params
+                        var customUiParams = {
+                            'id': entity.id,
+                            'revision': revision.version,
+                            'clientId': revision.clientId,
+                            'editable': editable
+                        };
+    
+                        // conditionally include the ui extension token
+                      if (!nfCommon.isBlank(uiExtensionToken)) {
+                            customUiParams['access_token'] = uiExtensionToken;
+                        }
+    
+                        // show the shell
+                      nfShell.showPage('..' + uri + '?' + $.param(customUiParams), false).done(function () {
+                            deferred.resolve();
+                        });
+                    }).fail(function () {
+                      nfDialog.showOkDialog({
+                      headerText: nf._.msg('nf-custom-ui.AdvancedConfiguration'),
+                      dialogContent: nf._.msg('nf-custom-ui.Message1')
+                        });
+                        deferred.resolve();
+                    });
+                }).promise();
+            }
+      }
+  }));
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
new file mode 100644
index 000000000000..663304fcf55e
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
@@ -0,0 +1,422 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Connection',
+                  'nf.Birdseye',
+                  'nf.CanvasUtils',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.ErrorHandler'],
+              function ($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler) {
+                  return (nf.Draggable = factory($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.Draggable =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.Connection'),
+                  require('nf.Birdseye'),
+                  require('nf.CanvasUtils'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.ErrorHandler')));
+      } else {
+          nf.Draggable = factory(root.$,
+              root.d3,
+              root.nf.Connection,
+              root.nf.Birdseye,
+              root.nf.CanvasUtils,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.ErrorHandler);
+      }
+  }(this, function ($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon, nfDialog, nfClient, nfErrorHandler) {
+      'use strict';
+  
+      var nfCanvas;
+        var drag;
+    
+        /**
+         * Updates the positioning of all selected components.
+         *
+         * @param {selection} dragSelection The current drag selection
+         */
+        var updateComponentsPosition = function (dragSelection) {
+            var updates = d3.map();
+    
+            // determine the drag delta
+            var dragData = dragSelection.datum();
+            var delta = {
+                x: dragData.x - dragData.original.x,
+                y: dragData.y - dragData.original.y
+            };
+    
+            // if the component didn't move, return
+            if (delta.x === 0 && delta.y === 0) {
+                return;
+            }
+    
+            var selectedConnections = d3.selectAll('g.connection.selected');
+            var selectedComponents = d3.selectAll('g.component.selected');
+    
+            // ensure every component is writable
+          if (nfCanvasUtils.canModify(selectedConnections) === false || nfCanvasUtils.canModify(selectedComponents) === false) {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-draggable.ComponentPosition'),
+                  dialogContent: nf._.msg('nf-draggable.Message2')
+                });
+                return;
+            }
+    
+            // go through each selected connection
+            selectedConnections.each(function (d) {
+              var connectionUpdate = nfDraggable.updateConnectionPosition(d, delta);
+                if (connectionUpdate !== null) {
+                    updates.set(d.id, connectionUpdate);
+                }
+            });
+    
+            // go through each selected component
+            selectedComponents.each(function (d) {
+                // consider any self looping connections
+              var connections = nfConnection.getComponentConnections(d.id);
+                $.each(connections, function (_, connection) {
+                  if (!updates.has(connection.id) && nfCanvasUtils.getConnectionSourceComponentId(connection) === nfCanvasUtils.getConnectionDestinationComponentId(connection)) {
+                      var connectionUpdate = nfDraggable.updateConnectionPosition(nfConnection.get(connection.id), delta);
+                        if (connectionUpdate !== null) {
+                            updates.set(connection.id, connectionUpdate);
+                        }
+                    }
+                });
+    
+                // consider the component itself
+              updates.set(d.id, nfDraggable.updateComponentPosition(d, delta));
+          });
+  
+          nfDraggable.refreshConnections(updates);
+        };
+    
+        /**
+         * Updates the parent group of all selected components.
+       *
+       * @param {selection} the destination group
+         */
+      var updateComponentsGroup = function (group) {
+          // get the selection and deselect the components being moved
+          var selection = d3.selectAll('g.component.selected, g.connection.selected').classed('selected', false);
+    
+          if (nfCanvasUtils.canModify(selection) === false) {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-draggable.ComponentPosition'),
+                  dialogContent: nf._.msg('nf-draggable.Message2')
+                });
+                return;
+            }
+          if (nfCanvasUtils.canModify(group) === false) {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-draggable.ComponentPosition'),
+                  dialogContent: nf._.msg('nf-draggable.Message1')
+                });
+                return;
+            }
+    
+            // move the seleciton into the group
+          nfCanvasUtils.moveComponents(selection, group);
+        };
+    
+      var nfDraggable = {
+          init: function (canvas) {
+              nfCanvas = canvas;
+  
+                // handle component drag events
+                drag = d3.behavior.drag()
+                    .on('dragstart', function () {
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+                    })
+                    .on('drag', function () {
+                        var dragSelection = d3.select('rect.drag-selection');
+    
+                        // lazily create the drag selection box
+                        if (dragSelection.empty()) {
+                            // get the current selection
+                            var selection = d3.selectAll('g.component.selected');
+    
+                            // determine the appropriate bounding box
+                            var minX = null, maxX = null, minY = null, maxY = null;
+                            selection.each(function (d) {
+                                if (minX === null || d.position.x < minX) {
+                                    minX = d.position.x;
+                                }
+                                if (minY === null || d.position.y < minY) {
+                                    minY = d.position.y;
+                                }
+                                var componentMaxX = d.position.x + d.dimensions.width;
+                                var componentMaxY = d.position.y + d.dimensions.height;
+                                if (maxX === null || componentMaxX > maxX) {
+                                    maxX = componentMaxX;
+                                }
+                                if (maxY === null || componentMaxY > maxY) {
+                                    maxY = componentMaxY;
+                                }
+                            });
+    
+                            // create a selection box for the move
+                            d3.select('#canvas').append('rect')
+                                .attr('rx', 6)
+                                .attr('ry', 6)
+                                .attr('x', minX)
+                                .attr('y', minY)
+                                .attr('class', 'drag-selection')
+                                .attr('pointer-events', 'none')
+                                .attr('width', maxX - minX)
+                                .attr('height', maxY - minY)
+                                .attr('stroke-width', function () {
+                                  return 1 / nfCanvasUtils.scaleCanvasView();
+                                })
+                                .attr('stroke-dasharray', function () {
+                                  return 4 / nfCanvasUtils.scaleCanvasView();
+                                })
+                                .datum({
+                                    original: {
+                                        x: minX,
+                                        y: minY
+                                    },
+                                    x: minX,
+                                    y: minY
+                                });
+                        } else {
+                            // update the position of the drag selection
+                            dragSelection.attr('x', function (d) {
+                                d.x += d3.event.dx;
+                                return d.x;
+                            })
+                                .attr('y', function (d) {
+                                    d.y += d3.event.dy;
+                                    return d.y;
+                                });
+                        }
+                    })
+                    .on('dragend', function () {
+                        // stop further propagation
+                        d3.event.sourceEvent.stopPropagation();
+    
+                        // get the drag selection
+                        var dragSelection = d3.select('rect.drag-selection');
+    
+                        // ensure we found a drag selection
+                        if (dragSelection.empty()) {
+                            return;
+                        }
+    
+                      // get the destination group if applicable... remove the drop flag if necessary to prevent
+                      // subsequent drop events from triggering prior to this move's completion
+                      var group = d3.select('g.drop').classed('drop', false);
+  
+                        // either move or update the selections group as appropriate
+                      if (group.empty()) {
+                            updateComponentsPosition(dragSelection);
+                        } else {
+                          updateComponentsGroup(group);
+                        }
+    
+                        // remove the drag selection
+                        dragSelection.remove();
+                    });
+            },
+    
+            /**
+           * Update the component's position
+           *
+           * @param d     The component
+           * @param delta The change in position
+           * @returns {*}
+           */
+          updateComponentPosition: function (d, delta) {
+              var newPosition = {
+                  'x': d.position.x + delta.x,
+                  'y': d.position.y + delta.y
+              };
+  
+              // build the entity
+              var entity = {
+                  'revision': nfClient.getRevision(d),
+                  'component': {
+                      'id': d.id,
+                      'position': newPosition
+                  }
+              };
+  
+              // update the component positioning
+              return $.Deferred(function (deferred) {
+                  $.ajax({
+                      type: 'PUT',
+                      url: d.uri,
+                      data: JSON.stringify(entity),
+                      dataType: 'json',
+                      contentType: 'application/json'
+                  }).done(function (response) {
+                      // update the component
+                      nfCanvasUtils.getComponentByType(d.type).set(response);
+  
+                      // resolve with an object so we can refresh when finished
+                      deferred.resolve({
+                          type: d.type,
+                          id: d.id
+                      });
+                  }).fail(function (xhr, status, error) {
+                      if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
+                          nfDialog.showOkDialog({
+                              headerText: 'Component Position',
+                              dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                          });
+                      } else {
+                          nfErrorHandler.handleAjaxError(xhr, status, error);
+                      }
+  
+                      deferred.reject();
+                  });
+              }).promise();
+          },
+  
+          /**
+           * Update the connection's position
+           *
+           * @param d     The connection
+           * @param delta The change in position
+           * @returns {*}
+           */
+          updateConnectionPosition: function (d, delta) {
+              // only update if necessary
+              if (d.bends.length === 0) {
+                  return null;
+              }
+  
+              // calculate the new bend points
+              var newBends = $.map(d.bends, function (bend) {
+                  return {
+                      x: bend.x + delta.x,
+                      y: bend.y + delta.y
+                  };
+              });
+  
+              var entity = {
+                  'revision': nfClient.getRevision(d),
+                  'component': {
+                      id: d.id,
+                      bends: newBends
+                  }
+              };
+  
+              // update the component positioning
+              return $.Deferred(function (deferred) {
+                  $.ajax({
+                      type: 'PUT',
+                      url: d.uri,
+                      data: JSON.stringify(entity),
+                      dataType: 'json',
+                      contentType: 'application/json'
+                  }).done(function (response) {
+                      // update the component
+                      nfConnection.set(response);
+  
+                      // resolve with an object so we can refresh when finished
+                      deferred.resolve({
+                          type: d.type,
+                          id: d.id
+                      });
+                  }).fail(function (xhr, status, error) {
+                      if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
+                          nfDialog.showOkDialog({
+                              headerText: 'Component Position',
+                              dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                          });
+                      } else {
+                          nfErrorHandler.handleAjaxError(xhr, status, error);
+                      }
+  
+                      deferred.reject();
+                  });
+              }).promise();
+          },
+  
+          /**
+           * Refresh the connections after dragging a component
+           *
+           * @param updates
+           */
+          refreshConnections: function (updates) {
+              if (updates.size() > 0) {
+                  // wait for all updates to complete
+                  $.when.apply(window, updates.values()).done(function () {
+                      var dragged = $.makeArray(arguments);
+                      var connections = d3.set();
+  
+                      // refresh this component
+                      $.each(dragged, function (_, component) {
+                          // check if the component in question is a connection
+                          if (component.type === 'Connection') {
+                              connections.add(component.id);
+                          } else {
+                              // get connections that need to be refreshed because its attached to this component
+                              var componentConnections = nfConnection.getComponentConnections(component.id);
+                              $.each(componentConnections, function (_, connection) {
+                                  connections.add(connection.id);
+                              });
+                          }
+                      });
+  
+                      // refresh the connections
+                      connections.forEach(function (connectionId) {
+                          nfConnection.refresh(connectionId);
+                      });
+                  }).always(function () {
+                      nfBirdseye.refresh();
+                  });
+              }
+          },
+  
+          /**
+             * Activates the drag behavior for the components in the specified selection.
+             *
+             * @param {selection} components
+             */
+            activate: function (components) {
+                components.classed('moveable', true).call(drag);
+            },
+    
+            /**
+             * Deactivates the drag behavior for the components in the specified selection.
+             *
+             * @param {selection} components
+             */
+            deactivate: function (components) {
+                components.classed('moveable', false).on('.drag', null);
+            }
+        };
+    
+      return nfDraggable;
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js
new file mode 100644
index 000000000000..44ff136124b5
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js
@@ -0,0 +1,418 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'd3',
+                'nf.Common',
+                'nf.Client',
+                'nf.CanvasUtils'],
+            function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
+                return (nf.Funnel = factory($, d3, nfCommon, nfClient, nfCanvasUtils));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Funnel =
+            factory(require('jquery'),
+                require('d3'),
+                require('nf.Common'),
+                require('nf.Client'),
+                require('nf.CanvasUtils')));
+    } else {
+        nf.Funnel = factory(root.$,
+            root.d3,
+            root.nf.Common,
+            root.nf.Client,
+            root.nf.CanvasUtils);
+    }
+}(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
+    'use strict';
+
+    var nfConnectable;
+    var nfDraggable;
+    var nfSelectable;
+    var nfContextMenu;
+
+    var dimensions = {
+        width: 48,
+        height: 48
+    };
+
+    // -----------------------------
+    // funnels currently on the graph
+    // -----------------------------
+
+    var funnelMap;
+
+    // -----------------------------------------------------------
+    // cache for components that are added/removed from the canvas
+    // -----------------------------------------------------------
+
+    var removedCache;
+    var addedCache;
+
+    // --------------------
+    // component containers
+    // --------------------
+
+    var funnelContainer;
+
+    // --------------------------
+    // privately scoped functions
+    // --------------------------
+
+    /**
+     * Selects the funnel elements against the current funnel map.
+     */
+    var select = function () {
+        return funnelContainer.selectAll('g.funnel').data(funnelMap.values(), function (d) {
+            return d.id;
+        });
+    };
+
+    /**
+     * Renders the funnels in the specified selection.
+     *
+     * @param {selection} entered           The selection of funnels to be rendered
+     * @param {boolean} selected             Whether the element should be selected
+     */
+    var renderFunnels = function (entered, selected) {
+        if (entered.empty()) {
+            return entered;
+        }
+
+        var funnel = entered.append('g')
+            .attr({
+                'id': function (d) {
+                    return 'id-' + d.id;
+                },
+                'class': 'funnel component'
+            })
+            .classed('selected', selected)
+            .call(nfCanvasUtils.position);
+
+        // funnel border
+        funnel.append('rect')
+            .attr({
+                'rx': 2,
+                'ry': 2,
+                'class': 'border',
+                'width': function (d) {
+                    return d.dimensions.width;
+                },
+                'height': function (d) {
+                    return d.dimensions.height;
+                },
+                'fill': 'transparent',
+                'stroke': 'transparent'
+            });
+
+        // funnel body
+        funnel.append('rect')
+            .attr({
+                'rx': 2,
+                'ry': 2,
+                'class': 'body',
+                'width': function (d) {
+                    return d.dimensions.width;
+                },
+                'height': function (d) {
+                    return d.dimensions.height;
+                },
+                'filter': 'url(#component-drop-shadow)',
+                'stroke-width': 0
+            });
+
+        // funnel icon
+        funnel.append('text')
+            .attr({
+                'class': 'funnel-icon',
+                'x': 9,
+                'y': 34
+            })
+            .text('\ue803');
+
+        // always support selection
+        funnel.call(nfSelectable.activate).call(nfContextMenu.activate);
+    };
+
+    /**
+     * Updates the funnels in the specified selection.
+     *
+     * @param {selection} updated               The funnels to be updated
+     */
+    var updateFunnels = function (updated) {
+        if (updated.empty()) {
+            return;
+        }
+
+        // funnel border authorization
+        updated.select('rect.border')
+            .classed('unauthorized', function (d) {
+                return d.permissions.canRead === false;
+            });
+
+        // funnel body authorization
+        updated.select('rect.body')
+            .classed('unauthorized', function (d) {
+                return d.permissions.canRead === false;
+            });
+
+        updated.each(function () {
+            var funnel = d3.select(this);
+
+            // update the component behavior as appropriate
+            nfCanvasUtils.editable(funnel, nfConnectable, nfDraggable);
+        });
+    };
+
+    /**
+     * Removes the funnels in the specified selection.
+     *
+     * @param {selection} removed               The funnels to be removed
+     */
+    var removeFunnels = function (removed) {
+        removed.remove();
+    };
+
+    var nfFunnel = {
+        /**
+         * Initializes of the Processor handler.
+         *
+         * @param nfConnectableRef   The nfConnectable module.
+         * @param nfDraggableRef   The nfDraggable module.
+         * @param nfSelectableRef   The nfSelectable module.
+         * @param nfContextMenuRef   The nfContextMenu module.
+         */
+        init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
+            nfConnectable = nfConnectableRef;
+            nfDraggable = nfDraggableRef;
+            nfSelectable = nfSelectableRef;
+            nfContextMenu = nfContextMenuRef;
+
+            funnelMap = d3.map();
+            removedCache = d3.map();
+            addedCache = d3.map();
+
+            // create the funnel container
+            funnelContainer = d3.select('#canvas').append('g')
+                .attr({
+                    'pointer-events': 'all',
+                    'class': 'funnels'
+                });
+        },
+
+        /**
+         * Adds the specified funnel entity.
+         *
+         * @param funnelEntities       The funnel
+         * @param options           Configuration options
+         */
+        add: function (funnelEntities, options) {
+            var selectAll = false;
+            if (nfCommon.isDefinedAndNotNull(options)) {
+                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+            }
+
+            // get the current time
+            var now = new Date().getTime();
+
+            var add = function (funnelEntity) {
+                addedCache.set(funnelEntity.id, now);
+
+                // add the funnel
+                funnelMap.set(funnelEntity.id, $.extend({
+                    type: 'Funnel',
+                    dimensions: dimensions
+                }, funnelEntity));
+            };
+
+            // determine how to handle the specified funnel status
+            if ($.isArray(funnelEntities)) {
+                $.each(funnelEntities, function (_, funnelEntity) {
+                    add(funnelEntity);
+                });
+            } else if (nfCommon.isDefinedAndNotNull(funnelEntities)) {
+                add(funnelEntities);
+            }
+
+            // apply the selection and handle new funnels
+            var selection = select();
+            selection.enter().call(renderFunnels, selectAll);
+            selection.call(updateFunnels);
+        },
+
+        /**
+         * Populates the graph with the specified funnels.
+         *
+         * @argument {object | array} funnelEntities                    The funnels to add
+         * @argument {object} options                Configuration options
+         */
+        set: function (funnelEntities, options) {
+            var selectAll = false;
+            var transition = false;
+            if (nfCommon.isDefinedAndNotNull(options)) {
+                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+            }
+
+            var set = function (proposedFunnelEntity) {
+                var currentFunnelEntity = funnelMap.get(proposedFunnelEntity.id);
+
+                // set the funnel if appropriate due to revision and wasn't previously removed
+                if (nfClient.isNewerRevision(currentFunnelEntity, proposedFunnelEntity) && !removedCache.has(proposedFunnelEntity.id)) {
+                    funnelMap.set(proposedFunnelEntity.id, $.extend({
+                        type: 'Funnel',
+                        dimensions: dimensions
+                    }, proposedFunnelEntity));
+                }
+            };
+
+            if ($.isArray(funnelEntities)) {
+                $.each(funnelMap.keys(), function (_, key) {
+                    var currentFunnelEntity = funnelMap.get(key);
+                    var isPresent = $.grep(funnelEntities, function (proposedFunnelEntity) {
+                        return proposedFunnelEntity.id === currentFunnelEntity.id;
+                    });
+
+                    // if the current funnel is not present and was not recently added, remove it
+                    if (isPresent.length === 0 && !addedCache.has(key)) {
+                        funnelMap.remove(key);
+                    }
+                });
+                $.each(funnelEntities, function (_, funnelEntity) {
+                    set(funnelEntity);
+                });
+            } else if (nfCommon.isDefinedAndNotNull(funnelEntities)) {
+                set(funnelEntities);
+            }
+
+            // apply the selection and handle all new processors
+            var selection = select();
+            selection.enter().call(renderFunnels, selectAll);
+            selection.call(updateFunnels).call(nfCanvasUtils.position, transition);
+            selection.exit().call(removeFunnels);
+        },
+
+        /**
+         * If the funnel id is specified it is returned. If no funnel id
+         * specified, all funnels are returned.
+         *
+         * @param {string} id
+         */
+        get: function (id) {
+            if (nfCommon.isUndefined(id)) {
+                return funnelMap.values();
+            } else {
+                return funnelMap.get(id);
+            }
+        },
+
+        /**
+         * If the funnel id is specified it is refresh according to the current
+         * state. If not funnel id is specified, all funnels are refreshed.
+         *
+         * @param {string} id      Optional
+         */
+        refresh: function (id) {
+            if (nfCommon.isDefinedAndNotNull(id)) {
+                d3.select('#id-' + id).call(updateFunnels);
+            } else {
+                d3.selectAll('g.funnel').call(updateFunnels);
+            }
+        },
+
+        /**
+         * Reloads the funnel state from the server and refreshes the UI.
+         * If the funnel is currently unknown, this function just returns.
+         *
+         * @param {string} id The funnel id
+         */
+        reload: function (id) {
+            if (funnelMap.has(id)) {
+                var funnelEntity = funnelMap.get(id);
+                return $.ajax({
+                    type: 'GET',
+                    url: funnelEntity.uri,
+                    dataType: 'json'
+                }).done(function (response) {
+                    nfFunnel.set(response);
+                });
+            }
+        },
+
+        /**
+         * Positions the component.
+         *
+         * @param {string} id   The id
+         */
+        position: function (id) {
+            d3.select('#id-' + id).call(nfCanvasUtils.position);
+        },
+
+        /**
+         * Removes the specified funnel.
+         *
+         * @param {array|string} funnelIds      The funnel id
+         */
+        remove: function (funnelIds) {
+            var now = new Date().getTime();
+
+            if ($.isArray(funnelIds)) {
+                $.each(funnelIds, function (_, funnelId) {
+                    removedCache.set(funnelId, now);
+                    funnelMap.remove(funnelId);
+                });
+            } else {
+                removedCache.set(funnelIds, now);
+                funnelMap.remove(funnelIds);
+            }
+
+            // apply the selection and handle all removed funnels
+            select().exit().call(removeFunnels);
+        },
+
+        /**
+         * Removes all processors.
+         */
+        removeAll: function () {
+            nfFunnel.remove(funnelMap.keys());
+        },
+
+        /**
+         * Expires the caches up to the specified timestamp.
+         *
+         * @param timestamp
+         */
+        expireCaches: function (timestamp) {
+            var expire = function (cache) {
+                cache.forEach(function (id, entryTimestamp) {
+                    if (timestamp > entryTimestamp) {
+                        cache.remove(id);
+                    }
+                });
+            };
+
+            expire(addedCache);
+            expire(removedCache);
+        }
+    };
+
+    return nfFunnel;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
new file mode 100644
index 000000000000..f4ea6fb73194
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
@@ -0,0 +1,875 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+    /**
+     * Handles the upstream/downstream dialogs.
+     */
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.ErrorHandler',
+                  'nf.CanvasUtils'],
+              function ($, nfErrorHandler, nfCanvasUtils) {
+                  return (nf.GoTo = factory($, nfErrorHandler, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.GoTo =
+              factory(require('jquery'),
+                  require('nf.ErrorHandler'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.GoTo = factory(root.$,
+              root.nf.ErrorHandler,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, nfErrorHandler, nfCanvasUtils) {
+      'use strict';
+    
+        var config = {
+            urls: {
+                api: '../nifi-api',
+              processGroups: '../nifi-api/flow/process-groups/'
+            }
+        };
+        
+      var currentComponentId;
+      var currentComponentLabel;
+    
+        /**
+         * Adds a connection to the connections dialog.
+         *
+       * @param {string}  parentProcessGroupId
+       * @param {object}  connectionEntity
+       * @param {array}   processGroupEntities
+       * @param {array}   remoteProcessGroupEntities
+         */
+      var addConnection = function (parentProcessGroupId, connectionEntity, processGroupEntities, remoteProcessGroupEntities) {
+            var container = $('<div class="source-destination-connection"></div>').appendTo('#connections-container');
+    
+          if (connectionEntity.sourceType === 'OUTPUT_PORT') {
+              addSourceOutputPort(parentProcessGroupId, container, connectionEntity, processGroupEntities);
+          } else if (connectionEntity.sourceType === 'REMOTE_OUTPUT_PORT') {
+              addSourceRemoteOutputPort(parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities);
+            } else {
+              addSourceComponent(container, connectionEntity);
+            }
+    
+            var connectionEntry = $('<div class="connection-entry"></div>').appendTo(container);
+    
+            // format the connection name.. fall back to id
+          var connectionStyle = 'unset';
+          var connectionName = 'Connection';
+          if (connectionEntity.permissions.canRead === true) {
+              var formattedConnectionName = nfCanvasUtils.formatConnectionName(connectionEntity.component);
+              if (formattedConnectionName !== '') {
+                  connectionStyle = '';
+                  connectionName = formattedConnectionName;
+              }
+            }
+    
+            // connection
+          $('<div class="search-result-icon icon-connect"></div>').appendTo(connectionEntry);
+            $('<div class="connection-entry-name go-to-link"></div>').attr('title', connectionName).addClass(connectionStyle).text(connectionName).on('click', function () {
+                // go to the connection
+              nfCanvasUtils.showComponent(parentProcessGroupId, connectionEntity.id);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(connectionEntry);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(connectionEntry);
+    
+          if (connectionEntity.destinationType === 'INPUT_PORT') {
+              addDestinationInputPort(parentProcessGroupId, container, connectionEntity, processGroupEntities);
+          } else if (connectionEntity.destinationType === 'REMOTE_INPUT_PORT') {
+              addDestinationRemoteInputPort(parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities);
+            } else {
+              addDestinationComponent(container, connectionEntity);
+            }
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(container);
+        };
+    
+        /**
+         * Adds a destination component to the dialog.
+         *
+         * @param {jQuery} container                    The container to add to
+       * @param {object} connectionEntity             The connection to the downstream component
+         */
+      var addDestinationComponent = function (container, connectionEntity) {
+            // get the appropriate component icon
+          var smallIconClass = 'icon-funnel';
+          if (connectionEntity.destinationType === 'PROCESSOR') {
+              smallIconClass = 'icon-processor';
+          } else if (connectionEntity.destinationType === 'OUTPUT_PORT') {
+              smallIconClass = 'icon-port-out';
+          }
+  
+          // get the source name
+          var destinationName = connectionEntity.destinationId;
+          if (connectionEntity.permissions.canRead === true) {
+              destinationName = connectionEntity.component.destination.name;
+          } else if (currentComponentId === connectionEntity.destinationId) {
+              destinationName = currentComponentLabel;
+            }
+    
+            // component
+            var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
+            $('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(downstreamComponent);
+          $('<div class="destination-component-name go-to-link"></div>').attr('title', destinationName).text(destinationName).on('click', function () {
+                // go to the component
+              nfCanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(downstreamComponent);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(downstreamComponent);
+        };
+    
+        /**
+         * Adds a destination input port to the dialog.
+         *
+       * @param {string} parentProcessGroupId               The process group id
+         * @param {jQuery} container                    The container to add to
+       * @param {object} connectionEntity             The connection to the downstream input port
+       * @param {array}  processGroupEntities         The process groups
+         */
+      var addDestinationInputPort = function (parentProcessGroupId, container, connectionEntity, processGroupEntities) {
+          var processGroupEntity;
+          $.each(processGroupEntities, function (_, pge) {
+              if (connectionEntity.destinationGroupId === pge.id) {
+                  processGroupEntity = pge;
+                  return false;
+              }
+          });
+  
+          // get the group label
+          var groupLabel = getDisplayName(processGroupEntity);
+    
+            // process group
+            var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
+          $('<div class="search-result-icon icon-group"></div>').appendTo(downstreamComponent);
+          $('<div class="destination-component-name go-to-link"></div>').attr('title', groupLabel).text(groupLabel).on('click', function () {
+                // go to the remote process group
+              nfCanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(downstreamComponent);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(downstreamComponent);
+    
+          // get the port label
+          var portLabel = connectionEntity.destinationId;
+          if (connectionEntity.permissions.canRead === true) {
+              portLabel = connectionEntity.component.destination.name;
+          } else if (currentComponentId === connectionEntity.destinationId) {
+              portLabel = currentComponentLabel;
+          }
+    
+            // input port
+            var downstreamInputPort = $('<div class="destination-input-port"></div>').appendTo(downstreamComponent);
+          $('<div class="search-result-icon icon-port-in"></div>').appendTo(downstreamInputPort);
+          $('<div class="destination-input-port-name go-to-link"></div>').attr('title', portLabel).text(portLabel).on('click', function () {
+                // go to the remote process group
+              nfCanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(downstreamInputPort);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(downstreamComponent);
+        };
+    
+        /**
+         * Adds a destination remote input port to the dialog.
+         *
+       * @param {string} parentProcessGroupId               The process group id
+         * @param {jQuery} container                    The container to add to
+       * @param {object} connectionEntity             The connection to the downstream remote input port
+       * @param {array} remoteProcessGroupEntities    The remote process groups
+         */
+      var addDestinationRemoteInputPort = function (parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities) {
+          var remoteProcessGroupEntity;
+          $.each(remoteProcessGroupEntities, function (_, rpge) {
+              if (connectionEntity.destinationGroupId === rpge.id) {
+                  remoteProcessGroupEntity = rpge;
+                  return false;
+              }
+          });
+  
+          // get the group label
+          var remoteGroupLabel = getDisplayName(remoteProcessGroupEntity);
+    
+            // remote process group
+            var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
+          $('<div class="search-result-icon icon-group-remote"></div>').appendTo(downstreamComponent);
+          $('<div class="destination-component-name go-to-link"></div>').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () {
+                // go to the remote process group
+              nfCanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(downstreamComponent);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(downstreamComponent);
+    
+          // get the port label
+          var remotePortLabel = connectionEntity.destinationId;
+          if (connectionEntity.permissions.canRead === true) {
+              remotePortLabel = connectionEntity.component.destination.name;
+          } else if (currentComponentId === connectionEntity.destinationId) {
+              remotePortLabel = currentComponentLabel;
+          }
+    
+            // remote input port
+            var downstreamInputPort = $('<div class="destination-input-port"></div>').appendTo(downstreamComponent);
+          $('<div class="search-result-icon icon-port-in"></div>').appendTo(downstreamInputPort);
+          $('<div class="destination-input-port-name"></div>').attr('title', remotePortLabel).text(remotePortLabel).appendTo(downstreamInputPort);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(downstreamComponent);
+        };
+    
+        /**
+         * Adds a source component to the dialog.
+         *
+         * @param {jQuery} container                    The container to add to
+       * @param {object} connectionEntity             The connection to the upstream component
+         */
+      var addSourceComponent = function (container, connectionEntity) {
+            // get the appropriate component icon
+          var smallIconClass = 'icon-funnel';
+          if (connectionEntity.sourceType === 'PROCESSOR') {
+              smallIconClass = 'icon-processor';
+          } else if (connectionEntity.sourceType === 'INPUT_PORT') {
+              smallIconClass = 'icon-port-in';
+          }
+  
+          // get the source name
+          var sourceName = connectionEntity.sourceId;
+          if (connectionEntity.permissions.canRead === true) {
+              sourceName = connectionEntity.component.source.name;
+          } else if (currentComponentId === connectionEntity.sourceId) {
+              sourceName = currentComponentLabel;
+            }
+    
+            // component
+            var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
+            $('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(sourceComponent);
+          $('<div class="source-component-name go-to-link"></div>').attr('title', sourceName).text(sourceName).on('click', function () {
+                // go to the component
+              nfCanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(sourceComponent);
+    
+          // clear
+          $('<div class="clear"></div>').appendTo(sourceComponent);
+        };
+    
+        /**
+         * Adds a source output port to the dialog.
+         *
+       * @param {string} parentProcessGroupId               The process group id
+         * @param {jQuery} container                    The container to add to
+       * @param {object} connectionEntity             The connection
+       * @param {array} processGroupEntities          The process groups
+         */
+      var addSourceOutputPort = function (parentProcessGroupId, container, connectionEntity, processGroupEntities) {
+          var processGroupEntity;
+          $.each(processGroupEntities, function (_, pge) {
+              if (connectionEntity.sourceGroupId === pge.id) {
+                  processGroupEntity = pge;
+                  return false;
+              }
+          });
+  
+          // get the group label
+          var groupLabel = getDisplayName(processGroupEntity);
+    
+            // process group
+            var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
+          $('<div class="search-result-icon icon-group"></div>').appendTo(sourceComponent);
+          $('<div class="source-component-name go-to-link"></div>').attr('title', groupLabel).text(groupLabel).on('click', function () {
+                // go to the process group
+              nfCanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(sourceComponent);
+    
+          // clear
+            $('<div class="clear"></div>').appendTo(sourceComponent);
+    
+          // get the port label
+          var portLabel = connectionEntity.sourceId;
+          if (connectionEntity.permissions.canRead === true) {
+              portLabel = connectionEntity.component.source.name;
+          } else if (currentComponentId === connectionEntity.sourceId) {
+              portLabel = currentComponentLabel;
+          }
+  
+            var sourceOutputPort = $('<div class="source-output-port"></div>').appendTo(sourceComponent);
+          $('<div class="search-result-icon icon-port-out"></div>').appendTo(sourceOutputPort);
+          $('<div class="source-output-port-name go-to-link"></div>').attr('title', portLabel).text(portLabel).on('click', function () {
+                // go to the output port
+              nfCanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(sourceOutputPort);
+    
+          // clear
+          $('<div class="clear"></div>').appendTo(sourceComponent);
+        };
+    
+        /**
+         * Adds a source remote output port to the dialog.
+         *
+       * @param {string} parentProcessGroupId               The process group id
+         * @param {jQuery} container                    The container to add to
+       * @param {object} connectionEntity             The connection to the downstream remote output port
+       * @param {array} remoteProcessGroupEntities    The remote process groups
+       */
+      var addSourceRemoteOutputPort = function (parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities) {
+          var remoteProcessGroupEntity;
+          $.each(remoteProcessGroupEntities, function (_, rpge) {
+              if (connectionEntity.sourceGroupId === rpge.id) {
+                  remoteProcessGroupEntity = rpge;
+                  return false;
+              }
+          });
+  
+          // get the group label
+          var remoteGroupLabel = getDisplayName(remoteProcessGroupEntity);
+    
+            // remote process group
+            var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
+          $('<div class="search-result-icon icon-group-remote"></div>').appendTo(sourceComponent);
+          $('<div class="source-component-name go-to-link"></div>').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () {
+                // go to the remote process group
+              nfCanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
+    
+                // close the dialog
+                $('#connections-dialog').modal('hide');
+            }).appendTo(sourceComponent);
+    
+          // clear
+            $('<div class="clear"></div>').appendTo(sourceComponent);
+    
+          // get the port label
+          var remotePortLabel = connectionEntity.sourceId;
+          if (connectionEntity.permissions.canRead === true) {
+              remotePortLabel = connectionEntity.component.source.name;
+          } else if (connectionEntity.sourceId === currentComponentId) {
+              remotePortLabel = currentComponentLabel;
+          }
+  
+          // port markup
+            var sourceOutputPort = $('<div class="source-output-port"></div>').appendTo(sourceComponent);
+          $('<div class="search-result-icon icon-port-out"></div>').appendTo(sourceOutputPort);
+          $('<div class="source-output-port-name"></div>').attr('title', remotePortLabel).text(remotePortLabel).appendTo(sourceOutputPort);
+  
+          // clear
+          $('<div class="clear"></div>').appendTo(sourceComponent);
+      };
+  
+      /**
+       * Gets the display name for the specified entity.
+       *
+       * @param entity entity
+       * @returns display name
+       */
+      var getDisplayName = function (entity) {
+          if (entity.permissions.canRead === true) {
+              return entity.component.name;
+          } else if (currentComponentId === entity.id) {
+              return currentComponentLabel;
+          } else {
+              return entity.id;
+          }
+        };
+    
+        return {
+            /**
+             * Initializes the dialog.
+             */
+            init: function () {
+                $('#connections-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                    buttons: [{
+                      buttonText: nf._.msg('nf-go-to.Close'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#connections-dialog').modal('hide');
+                            }
+                        }
+                    }],
+                    handler: {
+                        close: function () {
+                            $('#connections-context').empty();
+                            $('#connections-container').empty();
+                        }
+                    }
+                });
+            },
+    
+            /**
+             * Shows components downstream from a processor.
+             *
+             * @param {selection} selection The processor selection
+             */
+            showDownstreamFromProcessor: function (selection) {
+              var processorEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+  
+              var processorLabel = getDisplayName(processorEntity);
+  
+              // record details of the current component
+              currentComponentId = processorEntity.id;
+              currentComponentLabel = processorLabel;
+    
+                // populate the downstream dialog
+                $('#connections-context')
+                  .append('<div class="search-result-icon icon-processor"></div>')
+                  .append($('<div class="connections-component-name"></div>').text(processorLabel))
+                    .append('<div class="clear"></div>');
+    
+                // add the destination for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the source
+                  if (connectionEntity.sourceId === processorEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are downstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoDownstreamComponents')+'</span>');
+                }
+    
+                // show the downstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components upstream from a processor.
+             *
+             * @param {selection} selection The processor selection
+             */
+            showUpstreamFromProcessor: function (selection) {
+              var processorEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+  
+              var processorLabel = getDisplayName(processorEntity);
+  
+              // record details of the current component
+              currentComponentId = processorEntity.id;
+              currentComponentLabel = processorLabel;
+                
+                // populate the upstream dialog
+                $('#connections-context')
+                  .append('<div class="search-result-icon icon-processor"></div>')
+                  .append($('<div class="connections-component-name"></div>').text(processorLabel))
+                    .append('<div class="clear"></div>');
+    
+                // add the source for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the destination
+                  if (connectionEntity.destinationId === processorEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are upstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
+                }
+    
+                // show the upstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components downstream from a process group or a remote process group.
+             *
+             * @param {selection} selection The process group or remote process group selection
+             */
+            showDownstreamFromGroup: function (selection) {
+              var groupEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+  
+              var iconStyle = 'icon-group';
+              if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                  iconStyle = 'icon-group-remote';
+              }
+  
+              var groupLabel = getDisplayName(groupEntity);
+  
+              // record details of the current component
+              currentComponentId = groupEntity.id;
+              currentComponentLabel = groupLabel;
+                
+                // populate the downstream dialog
+                $('#connections-context')
+                  .append($('<div class="search-result-icon"></div>').addClass(iconStyle))
+                  .append($('<div class="connections-component-name"></div>').text(groupLabel))
+                    .append('<div class="clear"></div>');
+    
+                // add the destination for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the source
+                  if (connectionEntity.sourceGroupId === groupEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are downstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoDownstreamComponents')+'</span>');
+                }
+    
+                // show the downstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components upstream from a process group or a remote process group.
+             *
+             * @param {selection} selection The process group or remote process group selection
+             */
+            showUpstreamFromGroup: function (selection) {
+              var groupEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+  
+              var iconStyle = 'icon-group';
+              if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                  iconStyle = 'icon-group-remote';
+              }
+  
+              var groupLabel = getDisplayName(groupEntity);
+  
+              // record details of the current component
+              currentComponentId = groupEntity.id;
+              currentComponentLabel = groupLabel;
+                
+                // populate the upstream dialog
+                $('#connections-context')
+                  .append($('<div class="search-result-icon"></div>').addClass(iconStyle))
+                  .append($('<div class="connections-component-name"></div>').text(groupLabel))
+                    .append('<div class="clear"></div>');
+    
+                // add the source for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the destination
+                  if (connectionEntity.destinationGroupId === groupEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are upstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
+                }
+    
+                // show the dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components downstream from an input port.
+             *
+             * @param {selection} selection The input port selection
+             */
+            showDownstreamFromInputPort: function (selection) {
+              var portEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+  
+              var portLabel = getDisplayName(portEntity);
+  
+              // record details of the current component
+              currentComponentId = portEntity.id;
+              currentComponentLabel = portLabel;
+                
+                // populate the downstream dialog
+                $('#connections-context')
+                  .append('<div class="search-result-icon icon-port-in"></div>')
+                  .append($('<div class="connections-component-name"></div>').text(portLabel))
+                    .append('<div class="clear"></div>');
+    
+                // add the destination for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the source
+                  if (connectionEntity.sourceId === portEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are downstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoDownstreamComponents')+'</span>');
+                }
+    
+                // show the downstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components upstream from an input port.
+             *
+             * @param {selection} selection The input port selection
+             */
+            showUpstreamFromInputPort: function (selection) {
+              var portEntity = selection.datum();
+    
+                $.ajax({
+                    type: 'GET',
+                  url: config.urls.processGroups + encodeURIComponent(nfCanvasUtils.getParentGroupId()),
+                    dataType: 'json'
+                }).done(function (response) {
+                  var flow = response.processGroupFlow.flow;
+                  var connections = flow.connections;
+                  var processGroups = flow.processGroups;
+                  var remoteProcessGroups = flow.remoteProcessGroups;
+  
+                  var portLabel = getDisplayName(portEntity);
+  
+                  // record details of the current component
+                  currentComponentId = portEntity.id;
+                  currentComponentLabel = portLabel;
+                    
+                    // populate the upstream dialog
+                    $('#connections-context')
+                      .append('<div class="search-result-icon icon-group"></div>')
+                      .append($('<div class="connections-component-name"></div>').text(nfCanvasUtils.getGroupName()))
+                        .append('<div class="clear"></div>')
+                      .append('<div class="search-result-icon icon-port-in" style="margin-left: 20px;"></div>')
+                      .append($('<div class="connections-component-name"></div>').text(portLabel))
+                        .append('<div class="clear"></div>');
+    
+                    // add the source for each connection
+                  $.each(connections, function (_, connectionEntity) {
+                        // only show connections for which this selection is the destination
+                      if (connectionEntity.destinationId === portEntity.id) {
+                          addConnection(nfCanvasUtils.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                        }
+                    });
+    
+                    // ensure there are upstream components
+                    if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
+                    }
+    
+                    // show the upstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows components downstream from an output port.
+             *
+             * @param {selection} selection The output port selection
+             */
+            showDownstreamFromOutputPort: function (selection) {
+              var portEntity = selection.datum();
+    
+                $.ajax({
+                    type: 'GET',
+                  url: config.urls.processGroups + encodeURIComponent(nfCanvasUtils.getParentGroupId()),
+                    dataType: 'json'
+                }).done(function (response) {
+                  var flow = response.processGroupFlow.flow;
+                  var connections = flow.connections;
+                  var processGroups = flow.processGroups;
+                  var remoteProcessGroups = flow.remoteProcessGroups;
+  
+                  var portLabel = getDisplayName(portEntity);
+  
+                  // record details of the current component
+                  currentComponentId = portEntity.id;
+                  currentComponentLabel = portLabel;
+                    
+                    // populate the downstream dialog
+                    $('#connections-context')
+                      .append('<div class="search-result-icon icon-group"></div>')
+                      .append($('<div class="connections-component-name"></div>').text(nfCanvasUtils.getGroupName()))
+                        .append('<div class="clear"></div>')
+                      .append('<div class="search-result-icon icon-port-out" style="margin-left: 20px;"></div>')
+                      .append($('<div class="connections-component-name"></div>').text(portLabel))
+                        .append('<div class="clear"></div>');
+    
+                    // add the destination for each connection
+                  $.each(connections, function (_, connectionEntity) {
+                        // only show connections for which this selection is the source
+                      if (connectionEntity.sourceId === portEntity.id) {
+                          addConnection(nfCanvasUtils.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                        }
+                    });
+    
+                    // ensure there are downstream components
+                    if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.DownstreamConnections')+'</span>');
+                    }
+    
+                    // show the downstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows components upstream from an output port.
+             *
+             * @param {selection} selection The output port selection
+             */
+            showUpstreamFromOutputPort: function (selection) {
+              var portEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+  
+              var portLabel = getDisplayName(portEntity);
+              
+              // record details of the current component
+              currentComponentId = portEntity.id;
+              currentComponentLabel = portLabel;
+                
+                // populate the upstream dialog
+                $('#connections-context')
+                  .append('<div class="search-result-icon icon-port-out"></div>')
+                  .append($('<div class="connections-component-name"></div>').text(portLabel))
+                    .append('<div class="clear"></div>');
+    
+                // add the source for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the destination
+                  if (connectionEntity.destinationId === portEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are upstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
+                }
+    
+                // show the upstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components downstream from a funnel.
+             *
+             * @param {selection} selection The funnel selection
+             */
+            showDownstreamFromFunnel: function (selection) {
+              var funnelEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+    
+              // record details of the current component
+              currentComponentId = funnelEntity.id;
+              currentComponentLabel = 'Funnel';
+                
+                // populate the downstream dialog
+              $('#connections-context')
+                  .append('<div class="search-result-icon icon-funnel"></div>')
+                  .append($('<div class="connections-component-name"></div>').text('Funnel'))
+                  .append('<div class="clear"></div>');
+    
+                // add the destination for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the source
+                  if (connectionEntity.sourceId === funnelEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are downstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoDownstreamComponents')+'</span>');
+                }
+    
+                // show the downstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.DownstreamConnections')).modal('show');
+            },
+    
+            /**
+             * Shows components upstream from a funnel.
+             *
+             * @param {selection} selection The funnel selection
+             */
+            showUpstreamFromFunnel: function (selection) {
+              var funnelEntity = selection.datum();
+              var connections = nfCanvasUtils.getComponentByType('Connection').get();
+              var processGroups = nfCanvasUtils.getComponentByType('ProcessGroup').get();
+              var remoteProcessGroups = nfCanvasUtils.getComponentByType('RemoteProcessGroup').get();
+    
+              // record details of the current component
+              currentComponentId = funnelEntity.id;
+              currentComponentLabel = 'Funnel';
+                
+                // populate the upstream dialog
+              $('#connections-context')
+                  .append('<div class="search-result-icon icon-funnel"></div>')
+                  .append($('<div class="upstream-destination-name"></div>').text('Funnel'))
+                  .append('<div class="clear"></div>');
+    
+                // add the source for each connection
+              $.each(connections, function (_, connectionEntity) {
+                    // only show connections for which this selection is the destination
+                  if (connectionEntity.destinationId === funnelEntity.id) {
+                      addConnection(nfCanvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+                    }
+                });
+    
+                // ensure there are upstream components
+                if ($('#connections-container').is(':empty')) {
+                      $('#connections-container').html('<span class="unset">'+nf._.msg('nf-go-to.NoUpstreamComponents')+'</span>');
+                }
+    
+                // show the upstream dialog
+                  $('#connections-dialog').modal('setHeaderText', nf._.msg('nf-go-to.UpstreamConnections')).modal('show');
+            }
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js
new file mode 100644
index 000000000000..394bf42a2cbe
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js
@@ -0,0 +1,423 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'd3',
+                'nf.Common',
+                'nf.ng.Bridge',
+                'nf.Label',
+                'nf.Funnel',
+                'nf.Port',
+                'nf.RemoteProcessGroup',
+                'nf.ProcessGroup',
+                'nf.Processor',
+                'nf.Connection',
+                'nf.ConnectionConfiguration',
+                'nf.CanvasUtils',
+                'nf.Connectable',
+                'nf.Draggable',
+                'nf.Selectable',
+                'nf.ContextMenu'],
+            function ($, d3, nfCommon, nfNgBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, nfConnectionConfiguration, nfCanvasUtils, nfConnectable, nfDraggable, nfSelectable, nfContextMenu) {
+                return (nf.Graph = factory($, d3, nfCommon, nfNgBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, nfConnectionConfiguration, nfCanvasUtils, nfConnectable, nfDraggable, nfSelectable, nfContextMenu));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Graph =
+            factory(require('jquery'),
+                require('d3'),
+                require('nf.Common'),
+                require('nf.ng.Bridge'),
+                require('nf.Label'),
+                require('nf.Funnel'),
+                require('nf.Port'),
+                require('nf.RemoteProcessGroup'),
+                require('nf.ProcessGroup'),
+                require('nf.Processor'),
+                require('nf.Connection'),
+                require('nf.ConnectionConfiguration'),
+                require('nf.CanvasUtils'),
+                require('nf.Connectable'),
+                require('nf.Draggable'),
+                require('nf.Selectable'),
+                require('nf.ContextMenu')));
+    } else {
+        nf.Graph = factory(root.$,
+            root.d3,
+            root.nf.Common,
+            root.nf.ng.Bridge,
+            root.nf.Label,
+            root.nf.Funnel,
+            root.nf.Port,
+            root.nf.RemoteProcessGroup,
+            root.nf.ProcessGroup,
+            root.nf.Processor,
+            root.nf.Connection,
+            root.nf.ConnectionConfiguration,
+            root.nf.CanvasUtils,
+            root.nf.Connectable,
+            root.nf.Draggable,
+            root.nf.Selectable,
+            root.nf.ContextMenu);
+    }
+}(this, function ($, d3, nfCommon, nfNgBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, nfConnectionConfiguration, nfCanvasUtils, nfConnectable, nfDraggable, nfSelectable, nfContextMenu) {
+    'use strict';
+
+    var combinePorts = function (contents) {
+        if (nfCommon.isDefinedAndNotNull(contents.inputPorts) && nfCommon.isDefinedAndNotNull(contents.outputPorts)) {
+            return contents.inputPorts.concat(contents.outputPorts);
+        } else if (nfCommon.isDefinedAndNotNull(contents.inputPorts)) {
+            return contents.inputPorts;
+        } else if (nfCommon.isDefinedAndNotNull(contents.outputPorts)) {
+            return contents.outputPorts;
+        } else {
+            return [];
+        }
+    };
+
+    var combinePortStatus = function (status) {
+        if (nfCommon.isDefinedAndNotNull(status.inputPortStatusSnapshots) && nfCommon.isDefinedAndNotNull(status.outputPortStatusSnapshots)) {
+            return status.inputPortStatusSnapshots.concat(status.outputPortStatusSnapshots);
+        } else if (nfCommon.isDefinedAndNotNull(status.inputPortStatusSnapshots)) {
+            return status.inputPortStatusSnapshots;
+        } else if (nfCommon.isDefinedAndNotNull(status.outputPortStatusSnapshots)) {
+            return status.outputPortStatusSnapshots;
+        } else {
+            return [];
+        }
+    };
+
+    /**
+     * Updates component visibility based on their proximity to the screen's viewport.
+     */
+    var updateComponentVisibility = function () {
+        var canvasContainer = $('#canvas-container');
+        var translate = nfCanvasUtils.translateCanvasView();
+        var scale = nfCanvasUtils.scaleCanvasView();
+
+        // scale the translation
+        translate = [translate[0] / scale, translate[1] / scale];
+
+        // get the normalized screen width and height
+        var screenWidth = canvasContainer.width() / scale;
+        var screenHeight = canvasContainer.height() / scale;
+
+        // calculate the screen bounds one screens worth in each direction
+        var screenLeft = -translate[0] - screenWidth;
+        var screenTop = -translate[1] - screenHeight;
+        var screenRight = screenLeft + (screenWidth * 3);
+        var screenBottom = screenTop + (screenHeight * 3);
+
+        // detects whether a component is visible and should be rendered
+        var isComponentVisible = function (d) {
+            if (!nfCanvasUtils.shouldRenderPerScale()) {
+                return false;
+            }
+
+            var left = d.position.x;
+            var top = d.position.y;
+            var right = left + d.dimensions.width;
+            var bottom = top + d.dimensions.height;
+
+            // determine if the component is now visible
+            return screenLeft < right && screenRight > left && screenTop < bottom && screenBottom > top;
+        };
+
+        // detects whether a connection is visible and should be rendered
+        var isConnectionVisible = function (d) {
+            if (!nfCanvasUtils.shouldRenderPerScale()) {
+                return false;
+            }
+
+            var x, y;
+            if (d.bends.length > 0) {
+                var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1);
+                x = d.bends[i].x;
+                y = d.bends[i].y;
+            } else {
+                x = (d.start.x + d.end.x) / 2;
+                y = (d.start.y + d.end.y) / 2;
+            }
+
+            return screenLeft < x && screenRight > x && screenTop < y && screenBottom > y;
+        };
+
+        // marks the specific component as visible and determines if its entering or leaving visibility
+        var updateVisibility = function (d, isVisible) {
+            var selection = d3.select('#id-' + d.id);
+            var visible = isVisible(d);
+            var wasVisible = selection.classed('visible');
+
+            // mark the selection as appropriate
+            selection.classed('visible', visible)
+                .classed('entering', function () {
+                    return visible && !wasVisible;
+                }).classed('leaving', function () {
+                return !visible && wasVisible;
+            });
+        };
+
+        // get the all components
+        var graph = nfGraph.get();
+
+        // update the visibility for each component
+        $.each(graph.processors, function (_, d) {
+            updateVisibility(d, isComponentVisible);
+        });
+        $.each(graph.ports, function (_, d) {
+            updateVisibility(d, isComponentVisible);
+        });
+        $.each(graph.processGroups, function (_, d) {
+            updateVisibility(d, isComponentVisible);
+        });
+        $.each(graph.remoteProcessGroups, function (_, d) {
+            updateVisibility(d, isComponentVisible);
+        });
+        $.each(graph.connections, function (_, d) {
+            updateVisibility(d, isConnectionVisible);
+        });
+    };
+
+    var nfGraph = {
+        init: function () {
+            // initialize the object responsible for each type of component
+            nfLabel.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
+            nfFunnel.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
+            nfPort.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
+            nfRemoteProcessGroup.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
+            nfProcessGroup.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
+            nfProcessor.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
+            nfConnection.init(nfSelectable, nfContextMenu, nfConnectionConfiguration);
+
+            // load the graph
+            return nfProcessGroup.enterGroup(nfCanvasUtils.getGroupId());
+        },
+
+        /**
+         * Populates the graph with the resources defined in the response.
+         *
+         * @argument {object} processGroupContents      The contents of the process group
+         * @argument {boolean} selectAll                Whether or not to select the new contents
+         */
+        add: function (processGroupContents, options) {
+            var selectAll = false;
+            if (nfCommon.isDefinedAndNotNull(options)) {
+                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+            }
+
+            // if we are going to select the new components, deselect the previous selection
+            if (selectAll) {
+                nfCanvasUtils.getSelection().classed('selected', false);
+            }
+
+            // merge the ports together
+            var ports = combinePorts(processGroupContents);
+
+            // add the components to the responsible object
+            nfLabel.add(processGroupContents.labels, options);
+            nfFunnel.add(processGroupContents.funnels, options);
+            nfRemoteProcessGroup.add(processGroupContents.remoteProcessGroups, options);
+            nfPort.add(ports, options);
+            nfProcessGroup.add(processGroupContents.processGroups, options);
+            nfProcessor.add(processGroupContents.processors, options);
+            nfConnection.add(processGroupContents.connections, options);
+
+            // inform Angular app if the selection is changing
+            if (selectAll) {
+                nfNgBridge.digest();
+            }
+        },
+
+        /**
+         * Populates the graph with the resources defined in the response.
+         *
+         * @argument {object} processGroupContents      The contents of the process group
+         * @argument {object} options                   Configuration options
+         */
+        set: function (processGroupContents, options) {
+            var selectAll = false;
+            if (nfCommon.isDefinedAndNotNull(options)) {
+                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+            }
+
+            // if we are going to select the new components, deselect the previous selection
+            if (selectAll) {
+                nfCanvasUtils.getSelection().classed('selected', false);
+            }
+
+            // merge the ports together
+            var ports = combinePorts(processGroupContents);
+
+            // add the components to the responsible object
+            nfLabel.set(processGroupContents.labels, options);
+            nfFunnel.set(processGroupContents.funnels, options);
+            nfRemoteProcessGroup.set(processGroupContents.remoteProcessGroups, options);
+            nfPort.set(ports, options);
+            nfProcessGroup.set(processGroupContents.processGroups, options);
+            nfProcessor.set(processGroupContents.processors, options);
+            nfConnection.set(processGroupContents.connections, options);
+
+            // inform Angular app if the selection is changing
+            if (selectAll) {
+                nfNgBridge.digest();
+            }
+        },
+
+        /**
+         * Expires any caches prior to setting updated components via .set(...) above. This is necessary
+         * if an ajax request returns out of order. The caches will ensure that added/removed components
+         * will not be removed/added due to process group refreshes. Whether or not a component is present
+         * is ambiguous whether the request is from before the component was added/removed or if another
+         * client has legitimately removed/added it. Once a request is initiated after the component is
+         * added/removed we can remove the entry from the cache.
+         *
+         * @param timestamp expire caches before
+         */
+        expireCaches: function (timestamp) {
+            nfLabel.expireCaches(timestamp);
+            nfFunnel.expireCaches(timestamp);
+            nfRemoteProcessGroup.expireCaches(timestamp);
+            nfPort.expireCaches(timestamp);
+            nfProcessGroup.expireCaches(timestamp);
+            nfProcessor.expireCaches(timestamp);
+            nfConnection.expireCaches(timestamp);
+        },
+
+        /**
+         * Gets the components currently on the canvas.
+         */
+        get: function () {
+            return {
+                labels: nfLabel.get(),
+                funnels: nfFunnel.get(),
+                ports: nfPort.get(),
+                remoteProcessGroups: nfRemoteProcessGroup.get(),
+                processGroups: nfProcessGroup.get(),
+                processors: nfProcessor.get(),
+                connections: nfConnection.get()
+            };
+        },
+
+        /**
+         * Gets a graph component `type`.
+         *
+         * @param type  The type of component.
+         */
+        getComponentByType: function (type) {
+            switch (type)
+            {
+                case "Label":
+                    return nfLabel;
+                    break;
+
+                case "Funnel":
+                    return nfFunnel;
+                    break;
+
+                case "Port":
+                    return nfPort;
+                    break;
+
+                case "RemoteProcessGroup":
+                    return nfRemoteProcessGroup;
+                    break;
+
+                case "ProcessGroup":
+                    return nfProcessGroup;
+                    break;
+
+                case "Processor":
+                    return nfProcessor;
+                    break;
+
+                case "Connection":
+                    return nfConnection;
+                    break;
+
+                default:
+                    throw new Error('Unknown component type.');
+                    break;
+            }
+        },
+
+        /**
+         * Clears all the components currently on the canvas. This function does not automatically refresh.
+         */
+        removeAll: function () {
+            // remove all the components
+            nfLabel.removeAll();
+            nfFunnel.removeAll();
+            nfPort.removeAll();
+            nfRemoteProcessGroup.removeAll();
+            nfProcessGroup.removeAll();
+            nfProcessor.removeAll();
+            nfConnection.removeAll();
+        },
+
+        /**
+         * Refreshes all components currently on the canvas.
+         */
+        pan: function () {
+            // refresh the components
+            nfPort.pan();
+            nfRemoteProcessGroup.pan();
+            nfProcessGroup.pan();
+            nfProcessor.pan();
+            nfConnection.pan();
+        },
+
+        /**
+         * Updates component visibility based on the current translation/scale.
+         */
+        updateVisibility: function () {
+            updateComponentVisibility();
+            nfGraph.pan();
+        },
+
+        /**
+         * Gets the currently selected components and connections.
+         *
+         * @returns {selection}     The currently selected components and connections
+         */
+        getSelection: function () {
+            return d3.selectAll('g.component.selected, g.connection.selected');
+        },
+
+        /**
+         * Reload the component on the canvas.
+         *
+         * @param component     The component.
+         */
+        reload: function (component) {
+            var componentData = component.datum();
+            if (componentData.permissions.canRead) {
+                if (nfCanvasUtils.isProcessor(component)) {
+                    nfProcessor.reload(componentData.id);
+                } else if (nfCanvasUtils.isInputPort(component)) {
+                    nfPort.reload(componentData.id);
+                } else if (nfCanvasUtils.isRemoteProcessGroup(component)) {
+                    nfRemoteProcessGroup.reload(componentData.id);
+                }
+            }
+        }
+    };
+
+    return nfGraph;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
new file mode 100644
index 000000000000..dedf04fdca60
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
@@ -0,0 +1,198 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.ng.Bridge',
+                  'nf.Label'],
+              function ($, d3, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfLabel) {
+                  return (nf.LabelConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfLabel));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.LabelConfiguration =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ng.Bridge'),
+                  require('nf.Label')));
+      } else {
+          nf.LabelConfiguration = factory(root.$,
+              root.d3,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.ng.Bridge,
+              root.nf.Label);
+      }
+  }(this, function ($, d3, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfLabel) {
+      'use strict';
+    
+        var labelId = '';
+    
+        return {
+            /**
+             * Initializes the label details dialog.
+             */
+            init: function () {
+                // make the new property dialog draggable
+                $('#label-configuration').modal({
+                    scrollableContentStyle: 'scrollable',
+                  headerText: nf._.msg('nf-label-configuration.ConfigureLabel'),
+                    buttons: [{
+                      buttonText: nf._.msg('nf-label-configuration.Apply'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                // get the label data
+                                var labelData = d3.select('#id-' + labelId).datum();
+    
+                                // get the new values
+                                var labelValue = $('#label-value').val();
+                                var fontSize = $('#label-font-size').combo('getSelectedOption');
+    
+                                // build the label entity
+                                var labelEntity = {
+                                  'revision': nfClient.getRevision(labelData),
+                                    'component': {
+                                        'id': labelId,
+                                        'label': labelValue,
+                                        'style': {
+                                            'font-size': fontSize.value
+                                        }
+                                    }
+                                };
+    
+                                // save the new label value
+                                $.ajax({
+                                    type: 'PUT',
+                                    url: labelData.uri,
+                                    data: JSON.stringify(labelEntity),
+                                    dataType: 'json',
+                                    contentType: 'application/json'
+                                }).done(function (response) {
+                                    // get the label out of the response
+                                  nfLabel.set(response);
+    
+                                    // inform Angular app values have changed
+                                  nfNgBridge.digest();
+                              }).fail(nfErrorHandler.handleAjaxError);
+    
+                                // reset and hide the dialog
+                                this.modal('hide');
+                            }
+                        }
+                    },
+                        {
+                          buttonText: nf._.msg('nf-label-configuration.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    this.modal('hide');
+                                }
+                            }
+                        }],
+                    handler: {
+                        close: function () {
+                            labelId = '';
+                        }
+                    }
+                });
+    
+                // create the available sizes
+                var sizes = [];
+                for (var i = 12; i <= 24; i += 2) {
+                    sizes.push({
+                        text: i + 'px',
+                        value: i + 'px'
+                    });
+                }
+    
+                // initialize the font size combo
+                $('#label-font-size').combo({
+                    options: sizes,
+                    selectedOption: {
+                        value: '12px'
+                    },
+                    select: function (option) {
+                        var labelValue = $('#label-value');
+    
+                        // reset the value to trigger IE to update, otherwise the
+                        // new line height wasn't being picked up
+                        labelValue.css({
+                            'font-size': option.value,
+                            'line-height': option.value
+                        }).val(labelValue.val());
+                    }
+                });
+            },
+    
+            /**
+             * Shows the configuration for the specified label.
+             *
+             * @argument {selection} selection      The selection
+             */
+            showConfiguration: function (selection) {
+              if (nfCanvasUtils.isLabel(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // get the label value
+                    var labelValue = '';
+                  if (nfCommon.isDefinedAndNotNull(selectionData.component.label)) {
+                        labelValue = selectionData.component.label;
+                    }
+    
+                    // get the font size
+                    var fontSize = '12px';
+                  if (nfCommon.isDefinedAndNotNull(selectionData.component.style['font-size'])) {
+                        fontSize = selectionData.component.style['font-size'];
+                    }
+    
+                    // store the label uri
+                    labelId = selectionData.id;
+    
+                    // populate the dialog
+                    $('#label-value').val(labelValue);
+                    $('#label-font-size').combo('setSelectedOption', {
+                        value: fontSize
+                    });
+    
+                    // show the detail dialog
+                    $('#label-configuration').modal('show');
+                }
+            }
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
new file mode 100644
index 000000000000..382b7e0bfce3
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
@@ -0,0 +1,617 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'd3',
+                'nf.Common',
+                'nf.Client',
+                'nf.CanvasUtils'],
+            function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
+                return (nf.Label = factory($, d3, nfCommon, nfClient, nfCanvasUtils));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Label =
+            factory(require('jquery'),
+                require('d3'),
+                require('nf.Common'),
+                require('nf.Client'),
+                require('nf.CanvasUtils')));
+    } else {
+        nf.Label = factory(root.$,
+            root.d3,
+            root.nf.Common,
+            root.nf.Client,
+            root.nf.CanvasUtils);
+    }
+}(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
+    'use strict';
+
+    var nfConnectable;
+    var nfDraggable;
+    var nfSelectable;
+    var nfContextMenu;
+
+    var dimensions = {
+        width: 150,
+        height: 150
+    };
+
+    var MIN_HEIGHT = 20;
+    var MIN_WIDTH = 64;
+
+    // -----------------------------
+    // labels currently on the graph
+    // -----------------------------
+
+    var labelMap;
+
+    // -----------------------------------------------------------
+    // cache for components that are added/removed from the canvas
+    // -----------------------------------------------------------
+
+    var removedCache;
+    var addedCache;
+
+    // --------------------
+    // component containers
+    // --------------------
+
+    var labelContainer;
+
+    // ---------------------------------
+    // drag handler for the label points
+    // ---------------------------------
+
+    var labelPointDrag;
+
+    // --------------------------
+    // privately scoped functions
+    // --------------------------
+
+    /**
+     * Selects the labels elements against the current label map.
+     */
+    var select = function () {
+        return labelContainer.selectAll('g.label').data(labelMap.values(), function (d) {
+            return d.id;
+        });
+    };
+
+    /**
+     * Renders the labels in the specified selection.
+     *
+     * @param {selection} entered           The selection of labels to be rendered
+     * @param {boolean} selected            Whether the label should be selected
+     */
+    var renderLabels = function (entered, selected) {
+        if (entered.empty()) {
+            return;
+        }
+
+        var label = entered.append('g')
+            .attr({
+                'id': function (d) {
+                    return 'id-' + d.id;
+                },
+                'class': 'label component'
+            })
+            .classed('selected', selected)
+            .call(nfCanvasUtils.position);
+
+        // label border
+        label.append('rect')
+            .attr({
+                'class': 'border',
+                'fill': 'transparent',
+                'stroke': 'transparent'
+            });
+
+        // label 
+        label.append('rect')
+            .attr({
+                'class': 'body',
+                'filter': 'url(#component-drop-shadow)',
+                'stroke-width': 0
+            });
+
+        // label value
+        label.append('text')
+            .attr({
+                'xml:space': 'preserve',
+                'font-weight': 'bold',
+                'fill': 'black',
+                'class': 'label-value'
+            });
+
+        // always support selecting
+        label.call(nfSelectable.activate).call(nfContextMenu.activate);
+    };
+
+    /**
+     * Updates the labels in the specified selection.
+     *
+     * @param {selection} updated               The labels to be updated
+     */
+    var updateLabels = function (updated) {
+        if (updated.empty()) {
+            return;
+        }
+
+        // update the border using the configured color
+        updated.select('rect.border')
+            .attr({
+                'width': function (d) {
+                    return d.dimensions.width;
+                },
+                'height': function (d) {
+                    return d.dimensions.height;
+                }
+            })
+            .classed('unauthorized', function (d) {
+                return d.permissions.canRead === false;
+            });
+
+        // update the body fill using the configured color
+        updated.select('rect.body')
+            .attr({
+                'width': function (d) {
+                    return d.dimensions.width;
+                },
+                'height': function (d) {
+                    return d.dimensions.height;
+                }
+            })
+            .style('fill', function (d) {
+                if (!d.permissions.canRead) {
+                    return null;
+                }
+
+                var color = nfLabel.defaultColor();
+
+                // use the specified color if appropriate
+                if (nfCommon.isDefinedAndNotNull(d.component.style['background-color'])) {
+                    color = d.component.style['background-color'];
+                }
+
+                return color;
+            })
+            .classed('unauthorized', function (d) {
+                return d.permissions.canRead === false;
+            });
+
+        // go through each label being updated
+        updated.each(function (d) {
+            var label = d3.select(this);
+
+            // update the component behavior as appropriate
+            nfCanvasUtils.editable(label, nfConnectable, nfDraggable);
+
+            // update the label
+            var labelText = label.select('text.label-value');
+            var labelPoint = label.selectAll('rect.labelpoint');
+            if (d.permissions.canRead) {
+                // udpate the font size
+                labelText.attr('font-size', function () {
+                    var fontSize = '12px';
+
+                    // use the specified color if appropriate
+                    if (nfCommon.isDefinedAndNotNull(d.component.style['font-size'])) {
+                        fontSize = d.component.style['font-size'];
+                    }
+
+                    return fontSize;
+                });
+
+                // remove the previous label value
+                labelText.selectAll('tspan').remove();
+
+                // parse the lines in this label
+                var lines = [];
+                if (nfCommon.isDefinedAndNotNull(d.component.label)) {
+                    lines = d.component.label.split('\n');
+                } else {
+                    lines.push('');
+                }
+
+                var color = nfLabel.defaultColor();
+
+                // use the specified color if appropriate
+                if (nfCommon.isDefinedAndNotNull(d.component.style['background-color'])) {
+                    color = d.component.style['background-color'];
+                }
+
+                // add label value
+                $.each(lines, function (i, line) {
+                    labelText.append('tspan')
+                        .attr('x', '0.4em')
+                        .attr('dy', '1.2em')
+                        .text(function () {
+                            return line;
+                        })
+                        .style('fill', function (d) {
+                            return nfCommon.determineContrastColor(
+                                nfCommon.substringAfterLast(
+                                    color, '#'));
+                        });
+                });
+
+
+                // -----------
+                // labelpoints
+                // -----------
+
+                if (d.permissions.canWrite) {
+                    var pointData = [
+                        {x: d.dimensions.width, y: d.dimensions.height}
+                    ];
+                    var points = labelPoint.data(pointData);
+
+                    // create a point for the end
+                    points.enter().append('rect')
+                        .attr({
+                            'class': 'labelpoint',
+                            'width': 10,
+                            'height': 10
+                        })
+                        .call(labelPointDrag);
+
+                    // update the midpoints
+                    points.attr('transform', function (p) {
+                        return 'translate(' + (p.x - 10) + ', ' + (p.y - 10) + ')';
+                    });
+
+                    // remove old items
+                    points.exit().remove();
+                }
+            } else {
+                // remove the previous label value
+                labelText.selectAll('tspan').remove();
+
+                // remove the label points
+                labelPoint.remove()
+            }
+        });
+    };
+
+    /**
+     * Removes the labels in the specified selection.
+     *
+     * @param {selection} removed               The labels to be removed
+     */
+    var removeLabels = function (removed) {
+        removed.remove();
+    };
+
+    var nfLabel = {
+        config: {
+            width: dimensions.width,
+            height: dimensions.height
+        },
+
+        /**
+         * Initializes of the Processor handler.
+         *
+         * @param nfConnectableRef   The nfConnectable module.
+         * @param nfDraggableRef   The nfDraggable module.
+         * @param nfSelectableRef   The nfSelectable module.
+         * @param nfContextMenuRef   The nfContextMenu module.
+         */
+        init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
+            nfConnectable = nfConnectableRef;
+            nfDraggable = nfDraggableRef;
+            nfSelectable = nfSelectableRef;
+            nfContextMenu = nfContextMenuRef;
+
+            labelMap = d3.map();
+            removedCache = d3.map();
+            addedCache = d3.map();
+
+            // create the label container
+            labelContainer = d3.select('#canvas').append('g')
+                .attr({
+                    'pointer-events': 'all',
+                    'class': 'labels'
+                });
+
+            // handle bend point drag events
+            labelPointDrag = d3.behavior.drag()
+                .on('dragstart', function () {
+                    // stop further propagation
+                    d3.event.sourceEvent.stopPropagation();
+                })
+                .on('drag', function () {
+                    var label = d3.select(this.parentNode);
+                    var labelData = label.datum();
+
+                    // update the dimensions and ensure they are still within bounds
+                    labelData.dimensions.width = Math.max(MIN_WIDTH, d3.event.x);
+                    labelData.dimensions.height = Math.max(MIN_HEIGHT, d3.event.y);
+
+                    // redraw this connection
+                    updateLabels(label);
+                })
+                .on('dragend', function () {
+                    var label = d3.select(this.parentNode);
+                    var labelData = label.datum();
+
+                    // determine if the width has changed
+                    var different = false;
+                    if (nfCommon.isDefinedAndNotNull(labelData.component.width) || labelData.dimensions.width !== labelData.component.width) {
+                        different = true;
+                    }
+
+                    // determine if the height has changed
+                    if (!different && nfCommon.isDefinedAndNotNull(labelData.component.height) || labelData.dimensions.height !== labelData.component.height) {
+                        different = true;
+                    }
+
+                    // only save the updated bends if necessary
+                    if (different) {
+                        var labelEntity = {
+                            'revision': nfClient.getRevision(labelData),
+                            'component': {
+                                'id': labelData.id,
+                                'width': labelData.dimensions.width,
+                                'height': labelData.dimensions.height
+                            }
+                        }
+
+                        $.ajax({
+                            type: 'PUT',
+                            url: labelData.uri,
+                            data: JSON.stringify(labelEntity),
+                            dataType: 'json',
+                            contentType: 'application/json'
+                        }).done(function (response) {
+                            // request was successful, update the entry
+                            nfLabel.set(response);
+                        }).fail(function () {
+                            // determine the previous width
+                            var width = dimensions.width;
+                            if (nfCommon.isDefinedAndNotNull(labelData.component.width)) {
+                                width = labelData.component.width;
+                            }
+
+                            // determine the previous height
+                            var height = dimensions.height;
+                            if (nfCommon.isDefinedAndNotNull(labelData.component.height)) {
+                                height = labelData.component.height;
+                            }
+
+                            // restore the previous dimensions
+                            labelData.dimensions = {
+                                width: width,
+                                height: height
+                            };
+
+                            // refresh the label
+                            label.call(updateLabels);
+                        });
+                    }
+
+                    // stop further propagation
+                    d3.event.sourceEvent.stopPropagation();
+                });
+        },
+
+        /**
+         * Adds the specified label entity.
+         *
+         * @param labelEntities       The label
+         * @param options           Configuration options
+         */
+        add: function (labelEntities, options) {
+            var selectAll = false;
+            if (nfCommon.isDefinedAndNotNull(options)) {
+                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+            }
+
+            // get the current time
+            var now = new Date().getTime();
+
+            var add = function (labelEntity) {
+                addedCache.set(labelEntity.id, now);
+
+                // add the label
+                labelMap.set(labelEntity.id, $.extend({
+                    type: 'Label'
+                }, labelEntity));
+            };
+
+            // determine how to handle the specified label status
+            if ($.isArray(labelEntities)) {
+                $.each(labelEntities, function (_, labelEntity) {
+                    add(labelEntity);
+                });
+            } else if (nfCommon.isDefinedAndNotNull(labelEntities)) {
+                add(labelEntities);
+            }
+
+            // apply the selection and handle new labels
+            var selection = select();
+            selection.enter().call(renderLabels, selectAll);
+            selection.call(updateLabels);
+        },
+
+        /**
+         * Populates the graph with the specified labels.
+         *
+         * @argument {object | array} labelEntities     The labels to add
+         * @argument {object} options                   Configuration options
+         */
+        set: function (labelEntities, options) {
+            var selectAll = false;
+            var transition = false;
+            if (nfCommon.isDefinedAndNotNull(options)) {
+                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+            }
+
+            var set = function (proposedLabelEntity) {
+                var currentLabelEntity = labelMap.get(proposedLabelEntity.id);
+
+                // set the processor if appropriate due to revision and wasn't previously removed
+                if (nfClient.isNewerRevision(currentLabelEntity, proposedLabelEntity) && !removedCache.has(proposedLabelEntity.id)) {
+                    labelMap.set(proposedLabelEntity.id, $.extend({
+                        type: 'Label'
+                    }, proposedLabelEntity));
+                }
+            };
+
+            if ($.isArray(labelEntities)) {
+                $.each(labelMap.keys(), function (_, key) {
+                    var currentLabelEntity = labelMap.get(key);
+                    var isPresent = $.grep(labelEntities, function (proposedLabelEntity) {
+                        return proposedLabelEntity.id === currentLabelEntity.id;
+                    });
+
+                    // if the current label is not present and was not recently added, remove it
+                    if (isPresent.length === 0 && !addedCache.has(key)) {
+                        labelMap.remove(key);
+                    }
+                });
+                $.each(labelEntities, function (_, labelEntity) {
+                    set(labelEntity);
+                });
+            } else if (nfCommon.isDefinedAndNotNull(labelEntities)) {
+                set(labelEntities);
+            }
+
+            // apply the selection and handle all new labels
+            var selection = select();
+            selection.enter().call(renderLabels, selectAll);
+            selection.call(updateLabels).call(nfCanvasUtils.position, transition);
+            selection.exit().call(removeLabels);
+        },
+
+        /**
+         * If the label id is specified it is returned. If no label id
+         * specified, all labels are returned.
+         *
+         * @param {string} id
+         */
+        get: function (id) {
+            if (nfCommon.isUndefined(id)) {
+                return labelMap.values();
+            } else {
+                return labelMap.get(id);
+            }
+        },
+
+        /**
+         * If the label id is specified it is refresh according to the current
+         * state. If not label id is specified, all labels are refreshed.
+         *
+         * @param {string} id      Optional
+         */
+        refresh: function (id) {
+            if (nfCommon.isDefinedAndNotNull(id)) {
+                d3.select('#id-' + id).call(updateLabels);
+            } else {
+                d3.selectAll('g.label').call(updateLabels);
+            }
+        },
+
+        /**
+         * Reloads the label state from the server and refreshes the UI.
+         * If the label is currently unknown, this function just returns.
+         *
+         * @param {string} id The label id
+         */
+        reload: function (id) {
+            if (labelMap.has(id)) {
+                var labelEntity = labelMap.get(id);
+                return $.ajax({
+                    type: 'GET',
+                    url: labelEntity.uri,
+                    dataType: 'json'
+                }).done(function (response) {
+                    nfLabel.set(response);
+                });
+            }
+        },
+
+        /**
+         * Positions the component.
+         *
+         * @param {string} id   The id
+         */
+        position: function (id) {
+            d3.select('#id-' + id).call(nfCanvasUtils.position);
+        },
+
+        /**
+         * Removes the specified label.
+         *
+         * @param {array|string} labelIds      The label id(s)
+         */
+        remove: function (labelIds) {
+            var now = new Date().getTime();
+
+            if ($.isArray(labelIds)) {
+                $.each(labelIds, function (_, labelId) {
+                    removedCache.set(labelId, now);
+                    labelMap.remove(labelId);
+                });
+            } else {
+                removedCache.set(labelIds, now);
+                labelMap.remove(labelIds);
+            }
+
+            // apply the selection and handle all removed labels
+            select().exit().call(removeLabels);
+        },
+
+        /**
+         * Removes all label.
+         */
+        removeAll: function () {
+            nfLabel.remove(labelMap.keys());
+        },
+
+        /**
+         * Expires the caches up to the specified timestamp.
+         *
+         * @param timestamp
+         */
+        expireCaches: function (timestamp) {
+            var expire = function (cache) {
+                cache.forEach(function (id, entryTimestamp) {
+                    if (timestamp > entryTimestamp) {
+                        cache.remove(id);
+                    }
+                });
+            };
+
+            expire(addedCache);
+            expire(removedCache);
+        },
+
+        /**
+         * Returns the default color that should be used when drawing a label.
+         */
+        defaultColor: function () {
+            return '#fff7d7';
+        }
+    };
+
+    return nfLabel;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-ng-canvas-namespace.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-ng-canvas-namespace.js
new file mode 100644
index 000000000000..787e09e0e180
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-ng-canvas-namespace.js
@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+// register the nf.ng.Canvas namespace
+if (!nf.ng.Canvas)
+    nf.ng.Canvas = {};
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js
new file mode 100644
index 000000000000..2c1ebe0b6859
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js
@@ -0,0 +1,1474 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.ng.Bridge',
+                  'nf.Dialog',
+                  'nf.Shell'],
+              function ($, Slick, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfDialog, nfShell) {
+                  return (nf.PolicyManagement = factory($, Slick, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfDialog, nfShell));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.PolicyManagement =
+              factory(require('jquery'),
+                  require('Slick'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ng.Bridge'),
+                  require('nf.Dialog'),
+                  require('nf.Shell')));
+      } else {
+          nf.PolicyManagement = factory(root.$,
+              root.Slick,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.ng.Bridge,
+              root.nf.Dialog,
+              root.nf.Shell);
+      }
+  }(this, function ($, Slick, nfErrorHandler, nfCommon, nfClient, nfCanvasUtils, nfNgBridge, nfDialog, nfShell) {
+      'use strict';
+        
+        var config = {
+            urls: {
+                api: '../nifi-api',
+                searchTenants: '../nifi-api/tenants/search-results'
+            }
+        };
+    
+        var initialized = false;
+    
+        var initAddTenantToPolicyDialog = function () {
+            $('#new-policy-user-button').on('click', function () {
+                $('#search-users-dialog').modal('show');
+                $('#search-users-field').focus();
+            });
+    
+            $('#delete-policy-button').on('click', function () {
+                promptToDeletePolicy();
+            });
+    
+            $('#search-users-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-policy-management.AcessUser'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-policy-management.Add'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // add to table and update policy
+                            var policyGrid = $('#policy-table').data('gridInstance');
+                            var policyData = policyGrid.getData();
+    
+                            // begin the update
+                            policyData.beginUpdate();
+    
+                          // add all users/groups
+                          $.each(getTenantsToAdd($('#allowed-users')), function (_, user) {
+                                // remove the user
+                                policyData.addItem(user);
+                          });
+                          $.each(getTenantsToAdd($('#allowed-groups')), function (_, group) {
+                              // remove the user
+                              policyData.addItem(group);
+                          });
+    
+                            // end the update
+                            policyData.endUpdate();
+    
+                            // update the policy
+                            updatePolicy();
+    
+                            // close the dialog
+                            $('#search-users-dialog').modal('hide');
+                        }
+                    }
+                },
+                    {
+                      buttonText: nf._.msg('nf-policy-management.Cancel'),
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                // close the dialog
+                                $('#search-users-dialog').modal('hide');
+                            }
+                        }
+                    }],
+                handler: {
+                    close: function () {
+                        // reset the search fields
+                        $('#search-users-field').userSearchAutocomplete('reset').val('');
+    
+                      // clear the selected users/groups
+                      $('#allowed-users, #allowed-groups').empty();
+                  }
+              }
+          });
+  
+          // listen for removal requests
+          $(document).on('click', 'div.remove-allowed-entity', function () {
+              $(this).closest('li').remove();
+            });
+    
+            // configure the user auto complete
+            $.widget('nf.userSearchAutocomplete', $.ui.autocomplete, {
+                reset: function () {
+                    this.term = null;
+                },
+              _create: function() {
+                  this._super();
+                  this.widget().menu('option', 'items', '> :not(.search-no-matches)' );
+              },
+                _normalize: function (searchResults) {
+                    var items = [];
+                    items.push(searchResults);
+                    return items;
+                },
+                _renderMenu: function (ul, items) {
+                    // results are normalized into a single element array
+                    var searchResults = items[0];
+    
+                  var allowedGroups = getAllAllowedGroups();
+                  var allowedUsers = getAllAllowedUsers();
+  
+                  var nfUserSearchAutocomplete = this;
+                    $.each(searchResults.userGroups, function (_, tenant) {
+                      // see if this match is not already selected
+                      if ($.inArray(tenant.id, allowedGroups) === -1) {
+                          nfUserSearchAutocomplete._renderGroup(ul, $.extend({
+                              type: 'group'
+                          }, tenant));
+                      }
+                    });
+                    $.each(searchResults.users, function (_, tenant) {
+                      // see if this match is not already selected
+                      if ($.inArray(tenant.id, allowedUsers) === -1) {
+                          nfUserSearchAutocomplete._renderUser(ul, $.extend({
+                              type: 'user'
+                          }, tenant));
+                      }
+                    });
+    
+                    // ensure there were some results
+                    if (ul.children().length === 0) {
+                      ul.append('<li class="unset search-no-matches">'+nf._.msg('nf-policy-management.NoUserSearch')+'</li>');
+                    }
+                },
+                _resizeMenu: function () {
+                    var ul = this.menu.element;
+                  ul.width($('#search-users-field').outerWidth() - 2);
+                },
+                _renderUser: function (ul, match) {
+                  var userContent = $('<a></a>').text(match.component.identity);
+                    return $('<li></li>').data('ui-autocomplete-item', match).append(userContent).appendTo(ul);
+                },
+                _renderGroup: function (ul, match) {
+                  var groupLabel = $('<span></span>').text(match.component.identity);
+                    var groupContent = $('<a></a>').append('<div class="fa fa-users" style="margin-right: 5px;"></div>').append(groupLabel);
+                    return $('<li></li>').data('ui-autocomplete-item', match).append(groupContent).appendTo(ul);
+                }
+            });
+    
+            // configure the autocomplete field
+            $('#search-users-field').userSearchAutocomplete({
+                minLength: 0,
+                appendTo: '#search-users-results',
+                position: {
+                    my: 'left top',
+                    at: 'left bottom',
+                    offset: '0 1'
+                },
+                source: function (request, response) {
+                    // create the search request
+                    $.ajax({
+                        type: 'GET',
+                        data: {
+                            q: request.term
+                        },
+                        dataType: 'json',
+                        url: config.urls.searchTenants
+                    }).done(function (searchResponse) {
+                        response(searchResponse);
+                    });
+              },
+              select: function (event, ui) {
+                  addAllowedTenant(ui.item);
+  
+                  // reset the search field
+                  $(this).val('');
+  
+                  // stop event propagation
+                  return false;
+              }
+          });
+      };
+  
+      /**
+       * Gets all allowed groups including those already in the policy and those selected while searching (not yet saved).
+       *
+       * @returns {Array}
+       */
+      var getAllAllowedGroups = function () {
+          var policyGrid = $('#policy-table').data('gridInstance');
+          var policyData = policyGrid.getData();
+  
+          var userGroups = [];
+  
+          // consider existing groups in the policy table
+          var items = policyData.getItems();
+          $.each(items, function (_, item) {
+              if (item.type === 'group') {
+                  userGroups.push(item.id);
+              }
+          });
+  
+          // also consider groups already selected in the search users dialog
+          $.each(getTenantsToAdd($('#allowed-groups')), function (_, group) {
+              userGroups.push(group.id);
+          });
+  
+          return userGroups;
+      };
+  
+      /**
+       * Gets the user groups that will be added upon applying the changes.
+       *
+       * @param {jQuery} container
+       * @returns {Array}
+       */
+      var getTenantsToAdd = function (container) {
+          var tenants = [];
+  
+          // also consider groups already selected in the search users dialog
+          container.children('li').each(function (_, allowedTenant) {
+              var tenant = $(allowedTenant).data('tenant');
+              if (nfCommon.isDefinedAndNotNull(tenant)) {
+                  tenants.push(tenant);
+              }
+          });
+  
+          return tenants;
+      };
+  
+      /**
+       * Gets all allowed users including those already in the policy and those selected while searching (not yet saved).
+       *
+       * @returns {Array}
+       */
+      var getAllAllowedUsers = function () {
+          var policyGrid = $('#policy-table').data('gridInstance');
+          var policyData = policyGrid.getData();
+  
+          var users = [];
+  
+          // consider existing users in the policy table
+          var items = policyData.getItems();
+          $.each(items, function (_, item) {
+              if (item.type === 'user') {
+                  users.push(item.id);
+              }
+          });
+  
+          // also consider users already selected in the search users dialog
+          $.each(getTenantsToAdd($('#allowed-users')), function (_, user) {
+              users.push(user.id);
+          });
+  
+          return users;
+      };
+  
+      /**
+       * Added the specified tenant to the listing of users/groups which will be added when applied.
+       *
+       * @param allowedTenant user/group to add
+       */
+      var addAllowedTenant = function (allowedTenant) {
+          var allowedTenants = allowedTenant.type === 'user' ? $('#allowed-users') : $('#allowed-groups');
+  
+          // append the user
+          var tenant = $('<span></span>').addClass('allowed-entity ellipsis').text(allowedTenant.component.identity).ellipsis();
+          var tenantAction = $('<div></div>').addClass('remove-allowed-entity fa fa-trash');
+          $('<li></li>').data('tenant', allowedTenant).append(tenant).append(tenantAction).appendTo(allowedTenants);
+      };
+  
+      /**
+       * Initializes the policy table.
+       */
+        var initPolicyTable = function () {
+          $('#override-policy-dialog').modal({
+              headerText: 'Override Policy',
+              buttons: [{
+                  buttonText: 'Override',
+                  color: {
+                      base: '#728E9B',
+                      hover: '#004849',
+                      text: '#ffffff'
+                  },
+                  handler: {
+                      click: function () {
+                          // create the policy, copying if appropriate
+                          createPolicy($('#copy-policy-radio-button').is(':checked'));
+  
+                          $(this).modal('hide');
+                      }
+                  }
+              }, {
+                  buttonText: 'Cancel',
+                  color: {
+                      base: '#E3E8EB',
+                      hover: '#C7D2D7',
+                      text: '#004849'
+                  },
+                  handler: {
+                      click: function () {
+                          $(this).modal('hide');
+                      }
+                  }
+              }],
+              handler: {
+                  close: function () {
+                      // reset the radio button
+                      $('#copy-policy-radio-button').prop('checked', true);
+                  }
+              }
+          });
+  
+          // create/add a policy
+          $('#create-policy-link, #add-local-admin-link').on('click', function () {
+              createPolicy(false);
+          });
+  
+          // override a policy
+          $('#override-policy-link').on('click', function () {
+              $('#override-policy-dialog').modal('show');
+            });
+    
+            // policy type listing
+            $('#policy-type-list').combo({
+              options: [
+                  nfCommon.getPolicyTypeListing('flow'),
+                  nfCommon.getPolicyTypeListing('controller'),
+                  nfCommon.getPolicyTypeListing('provenance'),
+                  nfCommon.getPolicyTypeListing('restricted-components'),
+                  nfCommon.getPolicyTypeListing('policies'),
+                  nfCommon.getPolicyTypeListing('tenants'),
+                  nfCommon.getPolicyTypeListing('site-to-site'),
+                  nfCommon.getPolicyTypeListing('system'),
+                  nfCommon.getPolicyTypeListing('proxy'),
+                  nfCommon.getPolicyTypeListing('counters')],
+                select: function (option) {
+                    if (initialized) {
+                        // record the policy type
+                        $('#selected-policy-type').text(option.value);
+    
+                        // if the option is for a specific component
+                        if (option.value === 'controller' || option.value === 'counters' || option.value === 'policies' || option.value === 'tenants') {
+                            // update the policy target and let it relaod the policy
+                            $('#controller-policy-target').combo('setSelectedOption', {
+                                'value': 'read'
+                            }).show();
+                        } else {
+                            $('#controller-policy-target').hide();
+    
+                            // record the action
+                          if (option.value === 'proxy' || option.value === 'restricted-components') {
+                              $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
+                            } else {
+                              $('#selected-policy-action').text(nf._.msg('nf-policy-management.Read'));
+                            }
+    
+                            // reload the policy
+                            loadPolicy();
+                        }
+                    }
+                }
+            });
+    
+            // controller policy target
+            $('#controller-policy-target').combo({
+                options: [{
+                  text: nf._.msg('nf-policy-management.View'),
+                    value: 'read'
+                }, {
+                  text: nf._.msg('nf-policy-management.Modify'),
+                    value: 'write'
+                }],
+                select: function (option) {
+                    if (initialized) {
+                        // record the policy action
+                        $('#selected-policy-action').text(option.value);
+    
+                        // reload the policy
+                        loadPolicy();
+                    }
+                }
+            });
+            
+            // component policy target
+            $('#component-policy-target').combo({
+                options: [{
+                  text: nf._.msg('nf-policy-management.ViewComponent'),
+                    value: 'read-component',
+                  description: nf._.msg('nf-policy-management.Message16')
+                }, {
+                  text: nf._.msg('nf-policy-management.ModifyComponent'),
+                    value: 'write-component',
+                  description: nf._.msg('nf-policy-management.Message17')
+                }, {
+                  text: nf._.msg('nf-policy-management.ViewData'),
+                    value: 'read-data',
+                  description: nf._.msg('nf-policy-management.Message18')
+                }, {
+                  text: nf._.msg('nf-policy-management.ModifyData'),
+                    value: 'write-data',
+                  description: nf._.msg('nf-policy-management.Message19')
+                }, {
+                  text: nf._.msg('nf-policy-management.ReceiveData'),
+                    value: 'write-receive-data',
+                  description: nf._.msg('nf-policy-management.Message20'),
+                    disabled: true
+                }, {
+                  text: nf._.msg('nf-policy-management.SendData'),
+                    value: 'write-send-data',
+                  description: nf._.msg('nf-policy-management.Message21'),
+                    disabled: true
+                }, {
+                  text: nf._.msg('nf-policy-management.ViewPolicies'),
+                    value: 'read-policies',
+                  description: nf._.msg('nf-policy-management.Message22')
+                }, {
+                  text: nf._.msg('nf-policy-management.ModifyPolicies'),
+                    value: 'write-policies',
+                  description: nf._.msg('nf-policy-management.Message23')
+                }],
+                select: function (option) {
+                    if (initialized) {
+                        var resource = $('#selected-policy-component-type').text();
+    
+                        if (option.value === 'read-component') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Read'));
+                        } else if (option.value === 'write-component') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
+                        } else if (option.value === 'read-data') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Read'));
+                            resource = ('data/' + resource);
+                        } else if (option.value === 'write-data') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
+                            resource = ('data/' + resource);
+                        } else if (option.value === 'read-policies') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Read'));
+                            resource = ('policies/' + resource);
+                        } else if (option.value === 'write-policies') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
+                            resource = ('policies/' + resource);
+                        } else if (option.value === 'write-receive-data') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
+                            resource = 'data-transfer/input-ports';
+                        } else if (option.value === 'write-send-data') {
+                          $('#selected-policy-action').text(nf._.msg('nf-policy-management.Write'));
+                            resource = 'data-transfer/output-ports';
+                        }
+    
+                        // set the resource
+                        $('#selected-policy-type').text(resource);
+    
+                        // reload the policy
+                        loadPolicy();
+                    }
+                }
+            });
+    
+            // function for formatting the user identity
+            var identityFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+                if (dataContext.type === 'group') {
+                    markup += '<div class="fa fa-users" style="margin-right: 5px;"></div>';
+                }
+    
+                markup += dataContext.component.identity;
+    
+                return markup;
+            };
+    
+            // function for formatting the actions column
+            var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+    
+                // see if the user has permissions for the current policy
+                var currentEntity = $('#policy-table').data('policy');
+              var isPolicyEditable = $('#delete-policy-button').is(':disabled') === false;
+              if (currentEntity.permissions.canWrite === true && isPolicyEditable) {
+                  markup += '<div title="'+nf._.msg('nf-policy-management.Remove')+'" class="pointer delete-user fa fa-trash"></div>';
+                }
+    
+                return markup;
+            };
+    
+            // initialize the templates table
+            var usersColumns = [
+              {
+                  id: 'identity',
+                  name: 'User',
+                  sortable: true,
+                  resizable: true,
+                  formatter: identityFormatter
+              },
+              {
+                  id: 'actions',
+                  name: '&nbsp;',
+                  sortable: false,
+                  resizable: false,
+                  formatter: actionFormatter,
+                  width: 100,
+                  maxWidth: 100
+              }
+            ];
+    
+            var usersOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false
+            };
+    
+            // initialize the dataview
+            var policyData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            policyData.setItems([]);
+    
+            // initialize the sort
+            sort({
+                columnId: 'identity',
+                sortAsc: true
+            }, policyData);
+    
+            // initialize the grid
+            var policyGrid = new Slick.Grid('#policy-table', policyData, usersColumns, usersOptions);
+            policyGrid.setSelectionModel(new Slick.RowSelectionModel());
+            policyGrid.registerPlugin(new Slick.AutoTooltips());
+            policyGrid.setSortColumn('identity', true);
+            policyGrid.onSort.subscribe(function (e, args) {
+                sort({
+                    columnId: args.sortCol.id,
+                    sortAsc: args.sortAsc
+                }, policyData);
+            });
+    
+            // configure a click listener
+            policyGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = policyData.getItem(args.row);
+    
+                // determine the desired action
+                if (policyGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('delete-user')) {
+                        promptToRemoveUserFromPolicy(item);
+                    }
+                }
+            });
+    
+            // wire up the dataview to the grid
+            policyData.onRowCountChanged.subscribe(function (e, args) {
+                policyGrid.updateRowCount();
+                policyGrid.render();
+    
+                // update the total number of displayed policy users
+                $('#displayed-policy-users').text(args.current);
+            });
+            policyData.onRowsChanged.subscribe(function (e, args) {
+                policyGrid.invalidateRows(args.rows);
+                policyGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#policy-table').data('gridInstance', policyGrid);
+    
+            // initialize the number of displayed items
+            $('#displayed-policy-users').text('0');
+        };
+    
+        /**
+         * 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) {
+                  var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                  var bString = nfCommon.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){
+                        return 0;
+                    }
+                    if(a.permissions.canRead){
+                        return 1;
+                    } else {
+                        return -1;
+                    }
+                }
+            };
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+        };
+    
+        /**
+         * Prompts for the removal of the specified user.
+         *
+         * @param item
+         */
+        var promptToRemoveUserFromPolicy = function (item) {
+          nfDialog.showYesNoDialog({
+              headerText: nf._.msg('nf-policy-management.UpdatePolicy'),
+              dialogContent: nf._.msg('nf-policy-management.Message3') + nf.Common.escapeHtml(item.component.identity) + nf._.msg('nf-policy-management.Message4'),
+                yesHandler: function () {
+                    removeUserFromPolicy(item);
+                }
+            });
+        };
+    
+        /**
+         * Removes the specified item from the current policy.
+         *
+         * @param item
+         */
+        var removeUserFromPolicy = function (item) {
+            var policyGrid = $('#policy-table').data('gridInstance');
+            var policyData = policyGrid.getData();
+    
+            // begin the update
+            policyData.beginUpdate();
+    
+            // remove the user
+            policyData.deleteItem(item.id);
+    
+            // end the update
+            policyData.endUpdate();
+    
+            // save the configuration
+            updatePolicy();
+        };
+    
+        /**
+         * Prompts for the deletion of the selected policy.
+         */
+        var promptToDeletePolicy = function () {
+          nfDialog.showYesNoDialog({
+              headerText: nf._.msg('nf-policy-management.DeletePolicy'),
+              dialogContent: nf._.msg('nf-policy-management.Message24'),
+              yesText: 'Delete',
+              noText: 'Cancel',
+                yesHandler: function () {
+                    deletePolicy();
+                }
+            });
+        };
+    
+        /**
+         * Deletes the current policy.
+         */
+        var deletePolicy = function () {
+            var currentEntity = $('#policy-table').data('policy');
+            
+          if (nfCommon.isDefinedAndNotNull(currentEntity)) {
+                $.ajax({
+                    type: 'DELETE',
+                  url: currentEntity.uri + '?' + $.param(nfClient.getRevision(currentEntity)),
+                    dataType: 'json'
+                }).done(function () {
+                    loadPolicy();
+                }).fail(function (xhr, status, error) {
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+                    resetPolicy();
+                    loadPolicy();
+                });
+            } else {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-policy-management.DeletePolicy'),
+                  dialogContent: nf._.msg('nf-policy-management.Message6')
+                });
+            }
+        };
+    
+        /**
+         * Gets the currently selected resource.
+         */
+        var getSelectedResourceAndAction = function () {
+            var componentId = $('#selected-policy-component-id').text();
+            var resource = $('#selected-policy-type').text();
+            if (componentId !== '') {
+                resource += ('/' + componentId);
+            }
+    
+            return {
+                'action': $('#selected-policy-action').text(),
+                'resource': '/' + resource
+            };
+        };
+    
+        /**
+         * Populates the table with the specified users and groups.
+         *
+         * @param users
+         * @param userGroups
+         */
+        var populateTable = function (users, userGroups) {
+            var policyGrid = $('#policy-table').data('gridInstance');
+            var policyData = policyGrid.getData();
+    
+            // begin the update
+            policyData.beginUpdate();
+    
+            var policyUsers = [];
+    
+            // add each user
+            $.each(users, function (_, user) {
+                policyUsers.push($.extend({
+                    type: 'user'
+                }, user));
+            });
+    
+            // add each group
+            $.each(userGroups, function (_, group) {
+                policyUsers.push($.extend({
+                    type: 'group'
+                }, group));
+            });
+    
+            // set the rows
+            policyData.setItems(policyUsers);
+    
+            // end the update
+            policyData.endUpdate();
+    
+            // re-sort and clear selection after updating
+            policyData.reSort();
+            policyGrid.invalidate();
+            policyGrid.getSelectionModel().setSelectedRows([]);
+        };
+    
+        /**
+         * Converts the specified resource into human readable form.
+         *
+         * @param resource
+         */
+      var getResourceMessage = function (resource) {
+            if (resource === '/policies') {
+              return $('<span>'+nf._.msg('nf-policy-management.AllPolicies')+'</span>');
+            } else if (resource === '/controller') {
+              return $('<span>'+nf._.msg('nf-policy-management.Controller')+'</span>');
+            } else {
+              // extract the group id
+              var processGroupId = nfCommon.substringAfterLast(resource, '/');
+              var processGroupName = processGroupId;
+  
+              // attempt to resolve the group name
+              var breadcrumbs = nfNgBridge.injector.get('breadcrumbsCtrl').getBreadcrumbs();
+              $.each(breadcrumbs, function (_, breadcrumbEntity) {
+                  if (breadcrumbEntity.id === processGroupId) {
+                      processGroupName = breadcrumbEntity.label;
+                      return false;
+                  }
+              });
+  
+              // build the mark up
+              return $('<span>Showing effective policy inherited from Process Group </span>')
+                  .append( $('<span class="link ellipsis" style="max-width: 200px; vertical-align: top;"></span>')
+                      .text(processGroupName)
+                      .attr('title', processGroupName)
+                      .on('click', function () {
+                          // close the shell
+                          $('#shell-close-button').click();
+  
+                          // load the correct group and unselect everything if necessary
+                          nfCanvasUtils.getComponentByType('ProcessGroup').enterGroup(processGroupId).done(function () {
+                              nfCanvasUtils.getSelection().classed('selected', false);
+  
+                              // inform Angular app that values have changed
+                              nfNgBridge.digest();
+                          });
+                      })
+              ).append('<span>.</span>');
+            }
+        };
+    
+        /**
+         * Populates the specified policy.
+         *
+         * @param policyEntity
+         */
+        var populatePolicy = function (policyEntity) {
+            var policy = policyEntity.component;
+    
+            // get the currently selected policy
+            var resourceAndAction = getSelectedResourceAndAction();
+    
+            // reset of the policy message
+            resetPolicyMessage();
+    
+            // store the current policy version
+            $('#policy-table').data('policy', policyEntity);
+    
+            // see if the policy is for this resource
+            if (resourceAndAction.resource === policy.resource) {
+                // allow remove when policy is not inherited
+                $('#delete-policy-button').prop('disabled', policyEntity.permissions.canWrite === false);
+    
+              // allow modification if allowed
+              $('#new-policy-user-button').prop('disabled', policyEntity.permissions.canWrite === false);
+          } else {
+              $('#policy-message').append(getResourceMessage(policy.resource));
+    
+                // policy is inherited, we do not know if the user has permissions to modify the desired policy... show button and let server decide
+                $('#override-policy-message').show();
+    
+              // do not support policy deletion/modification
+                $('#delete-policy-button').prop('disabled', true);
+              $('#new-policy-user-button').prop('disabled', true);
+            }
+    
+            // populate the table
+            populateTable(policy.users, policy.userGroups);
+        };
+    
+        /**
+         * Loads the configuration for the specified process group.
+         */
+        var loadPolicy = function () {
+            var resourceAndAction = getSelectedResourceAndAction();
+    
+            var policyDeferred;
+            if (resourceAndAction.resource.startsWith('/policies')) {
+                $('#admin-policy-message').show();
+    
+                policyDeferred = $.Deferred(function (deferred) {
+                    $.ajax({
+                        type: 'GET',
+                        url: '../nifi-api/policies/' + resourceAndAction.action + resourceAndAction.resource,
+                        dataType: 'json'
+                    }).done(function (policyEntity) {
+                        // update the refresh timestamp
+                        $('#policy-last-refreshed').text(policyEntity.generated);
+    
+                        // ensure appropriate actions for the loaded policy
+                        if (policyEntity.permissions.canRead === true) {
+                            var policy = policyEntity.component;
+    
+                            // if the return policy is for the desired policy (not inherited, show it)
+                            if (resourceAndAction.resource === policy.resource) {
+                                // populate the policy details
+                                populatePolicy(policyEntity);
+                            } else {
+                                // reset the policy
+                                resetPolicy();
+    
+                                // show an appropriate message
+                              $('#policy-message').text(nf._.msg('nf-policy-management.Text2'));
+    
+                                // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
+                                $('#add-local-admin-message').show();
+                            }
+                        } else {
+                            // reset the policy
+                            resetPolicy();
+    
+                            // show an appropriate message
+                          $('#policy-message').text(nf._.msg('nf-policy-management.Text2'));
+    
+                            // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
+                            $('#add-local-admin-message').show();
+                        }
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                        if (xhr.status === 404) {
+                            // reset the policy
+                            resetPolicy();
+    
+                            // show an appropriate message
+                          $('#policy-message').text(nf._.msg('nf-policy-management.Text2'));
+    
+                            // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
+                            $('#add-local-admin-message').show();
+    
+                            deferred.resolve();
+                        } else if (xhr.status === 403) {
+                            // reset the policy
+                            resetPolicy();
+    
+                            // show an appropriate message
+                          $('#policy-message').text(nf._.msg('nf-policy-management.Text3'));
+    
+                            deferred.resolve();
+                        } else {
+                            // reset the policy
+                            resetPolicy();
+    
+                            deferred.reject();
+                          nfErrorHandler.handleAjaxError(xhr, status, error);
+                        }
+                    });
+                }).promise();
+            } else {
+                $('#admin-policy-message').hide();
+    
+                policyDeferred = $.Deferred(function (deferred) {
+                    $.ajax({
+                        type: 'GET',
+                        url: '../nifi-api/policies/' + resourceAndAction.action + resourceAndAction.resource,
+                        dataType: 'json'
+                    }).done(function (policyEntity) {
+                        // return OK so we either have access to the policy or we don't have access to an inherited policy
+    
+                        // update the refresh timestamp
+                        $('#policy-last-refreshed').text(policyEntity.generated);
+    
+                        // ensure appropriate actions for the loaded policy
+                        if (policyEntity.permissions.canRead === true) {
+                            // populate the policy details
+                            populatePolicy(policyEntity);
+                        } else {
+                            // reset the policy
+                            resetPolicy();
+    
+                            // since we cannot read, the policy may be inherited or not... we cannot tell
+                          $('#policy-message').text(nf._.msg('nf-policy-management.Text4'));
+    
+                            // allow option to override because we don't know if it's supported or not
+                            $('#override-policy-message').show();
+                        }
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                        if (xhr.status === 404) {
+                            // reset the policy
+                            resetPolicy();
+    
+                            // show an appropriate message
+                          $('#policy-message').text(nf._.msg('nf-policy-management.Text5'));
+    
+                            // we don't know if the user has permissions to the desired policy... show create button and allow the server to decide
+                            $('#new-policy-message').show();
+    
+                            deferred.resolve();
+                        } else if (xhr.status === 403) {
+                            // reset the policy
+                            resetPolicy();
+    
+                            // show an appropriate message
+                          $('#policy-message').text(nf._.msg('nf-policy-management.Text6'));
+    
+                            deferred.resolve();
+                        } else {
+                            resetPolicy();
+    
+                            deferred.reject();
+                          nfErrorHandler.handleAjaxError(xhr, status, error);
+                        }
+                    });
+                }).promise();
+            }
+    
+            return policyDeferred;
+        };
+    
+        /**
+         * Creates a new policy for the current selection.
+       *
+       * @param copyInheritedPolicy   Whether or not to copy the inherited policy
+         */
+      var createPolicy = function (copyInheritedPolicy) {
+            var resourceAndAction = getSelectedResourceAndAction();
+    
+          var users = [];
+          var userGroups = [];
+          if (copyInheritedPolicy === true) {
+              var policyGrid = $('#policy-table').data('gridInstance');
+              var policyData = policyGrid.getData();
+  
+              var items = policyData.getItems();
+              $.each(items, function (_, item) {
+                  var itemCopy = $.extend({}, item);
+  
+                  if (itemCopy.type === 'user') {
+                      users.push(itemCopy);
+                  } else {
+                      userGroups.push(itemCopy);
+                  }
+  
+                  // remove the type as it was added client side to render differently and is not part of the actual schema
+                  delete itemCopy.type;
+              });
+          }
+  
+            var entity = {
+              'revision': nfClient.getRevision({
+                    'revision': {
+                        'version': 0
+                    }
+                }),
+                'component': {
+                    'action': resourceAndAction.action,
+                  'resource': resourceAndAction.resource,
+                  'users': users,
+                  'userGroups': userGroups
+                }
+            };
+    
+            $.ajax({
+                type: 'POST',
+                url: '../nifi-api/policies',
+                data: JSON.stringify(entity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (policyEntity) {
+                // ensure appropriate actions for the loaded policy
+                if (policyEntity.permissions.canRead === true) {
+                    // populate the policy details
+                    populatePolicy(policyEntity);
+                } else {
+                    // the request succeeded but we don't have access to the policy... reset/reload the policy
+                    resetPolicy();
+                    loadPolicy();
+                }
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Updates the policy for the current selection.
+         */
+        var updatePolicy = function () {
+            var policyGrid = $('#policy-table').data('gridInstance');
+            var policyData = policyGrid.getData();
+    
+            var users = [];
+            var userGroups = [];
+    
+            var items = policyData.getItems();
+            $.each(items, function (_, item) {
+              var itemCopy = $.extend({}, item);
+  
+              if (itemCopy.type === 'user') {
+                  users.push(itemCopy);
+              } else {
+                  userGroups.push(itemCopy);
+              }
+  
+              // remove the type as it was added client side to render differently and is not part of the actual schema
+              delete itemCopy.type;
+            });
+    
+            var currentEntity = $('#policy-table').data('policy');
+          if (nfCommon.isDefinedAndNotNull(currentEntity)) {
+                var entity = {
+                  'revision': nfClient.getRevision(currentEntity),
+                    'component': {
+                        'id': currentEntity.id,
+                        'users': users,
+                        'userGroups': userGroups
+                    }
+                };
+        
+                $.ajax({
+                    type: 'PUT',
+                    url: currentEntity.uri,
+                    data: JSON.stringify(entity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (policyEntity) {
+                    // ensure appropriate actions for the loaded policy
+                    if (policyEntity.permissions.canRead === true) {
+                        // populate the policy details
+                        populatePolicy(policyEntity);
+                    } else {
+                        // the request succeeded but we don't have access to the policy... reset/reload the policy
+                        resetPolicy();
+                        loadPolicy();
+                    }
+                }).fail(function (xhr, status, error) {
+                  nfErrorHandler.handleAjaxError(xhr, status, error);
+                    resetPolicy();
+                    loadPolicy();
+                }).always(function () {
+                  nfCanvasUtils.reload({
+                        'transition': true
+                    });
+                });
+            } else {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-policy-management.UpdatePolicy'),
+                  dialogContent: nf._.msg('nf-policy-management.Message6')
+                });
+            }
+        };
+    
+        /**
+         * Shows the process group configuration.
+         */
+        var showPolicy = function () {
+            // show the configuration dialog
+          nfShell.showContent('#policy-management').always(function () {
+                reset();
+            });
+    
+            // adjust the table size
+          nfPolicyManagement.resetTableSize();
+        };
+    
+        /**
+         * Reset the policy message.
+         */
+        var resetPolicyMessage = function () {
+          $('#policy-message').text('').empty();
+            $('#new-policy-message').hide();
+            $('#override-policy-message').hide();
+            $('#add-local-admin-message').hide();
+        };
+    
+        /**
+         * Reset the policy.
+         */
+        var resetPolicy = function () {
+            resetPolicyMessage();
+    
+            // reset button state
+            $('#delete-policy-button').prop('disabled', true);
+            $('#new-policy-user-button').prop('disabled', true);
+    
+            // reset the current policy
+            $('#policy-table').removeData('policy');
+    
+            // populate the table with no users
+            populateTable([], []);
+        }
+    
+        /**
+         * Resets the policy management dialog.
+         */
+        var reset = function () {
+            resetPolicy();
+    
+            // clear the selected policy details
+            $('#selected-policy-type').text('');
+            $('#selected-policy-action').text('');
+            $('#selected-policy-component-id').text('');
+            $('#selected-policy-component-type').text('');
+            
+            // clear the selected component details
+            $('div.policy-selected-component-container').hide();
+        };
+    
+      var nfPolicyManagement = {
+            /**
+             * Initializes the settings page.
+             */
+            init: function () {
+                initAddTenantToPolicyDialog();
+                initPolicyTable();
+    
+                $('#policy-refresh-button').on('click', function () {
+                    loadPolicy();
+                });
+    
+                // reset the policy to initialize
+                resetPolicy();
+    
+                // mark as initialized
+                initialized = true;
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+                var policyTable = $('#policy-table');
+                if (policyTable.is(':visible')) {
+                    var policyGrid = policyTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(policyGrid)) {
+                        policyGrid.resizeCanvas();
+                    }
+                }
+            },
+    
+            /**
+             * Shows the controller service policy.
+             *
+             * @param d
+             */
+            showControllerServicePolicy: function (d) {
+                // reset the policy message
+                resetPolicyMessage();
+    
+                // update the policy controls visibility
+                $('#component-policy-controls').show();
+                $('#global-policy-controls').hide();
+    
+                // update the visibility
+                if (d.permissions.canRead === true) {
+                    $('#policy-selected-controller-service-container div.policy-selected-component-name').text(d.component.name);
+                } else {
+                    $('#policy-selected-controller-service-container div.policy-selected-component-name').text(d.id);
+                }
+                $('#policy-selected-controller-service-container').show();
+    
+                // populate the initial resource
+                $('#selected-policy-component-id').text(d.id);
+                $('#selected-policy-component-type').text('controller-services');
+                $('#component-policy-target')
+                    .combo('setOptionEnabled', {
+                        value: 'write-receive-data'
+                    }, false)
+                    .combo('setOptionEnabled', {
+                        value: 'write-send-data'
+                    }, false)
+                    .combo('setOptionEnabled', {
+                        value: 'read-data'
+                    }, false)
+                    .combo('setOptionEnabled', {
+                        value: 'write-data'
+                    }, false)
+                    .combo('setSelectedOption', {
+                        value: 'read-component'
+                    });
+    
+                return loadPolicy().always(showPolicy);
+            },
+    
+            /**
+             * Shows the reporting task policy.
+             *
+             * @param d
+             */
+            showReportingTaskPolicy: function (d) {
+                // reset the policy message
+                resetPolicyMessage();
+    
+                // update the policy controls visibility
+                $('#component-policy-controls').show();
+                $('#global-policy-controls').hide();
+    
+                // update the visibility
+                if (d.permissions.canRead === true) {
+                    $('#policy-selected-reporting-task-container div.policy-selected-component-name').text(d.component.name);
+                } else {
+                    $('#policy-selected-reporting-task-container div.policy-selected-component-name').text(d.id);
+                }
+                $('#policy-selected-reporting-task-container').show();
+                
+                // populate the initial resource
+                $('#selected-policy-component-id').text(d.id);
+                $('#selected-policy-component-type').text('reporting-tasks');
+                $('#component-policy-target')
+                    .combo('setOptionEnabled', {
+                        value: 'write-receive-data'
+                    }, false)
+                    .combo('setOptionEnabled', {
+                        value: 'write-send-data'
+                    }, false)
+                    .combo('setOptionEnabled', {
+                        value: 'read-data'
+                    }, false)
+                    .combo('setOptionEnabled', {
+                        value: 'write-data'
+                    }, false)
+                    .combo('setSelectedOption', {
+                        value: 'read-component'
+                    });
+    
+                return loadPolicy().always(showPolicy);
+            },
+    
+            /**
+             * Shows the template policy.
+             *
+             * @param d
+             */
+            showTemplatePolicy: function (d) {
+                // reset the policy message
+                resetPolicyMessage();
+    
+                // update the policy controls visibility
+                $('#component-policy-controls').show();
+                $('#global-policy-controls').hide();
+    
+                // update the visibility
+                if (d.permissions.canRead === true) {
+                    $('#policy-selected-template-container div.policy-selected-component-name').text(d.template.name);
+                } else {
+                    $('#policy-selected-template-container div.policy-selected-component-name').text(d.id);
+                }
+                $('#policy-selected-template-container').show();
+    
+                // populate the initial resource
+                $('#selected-policy-component-id').text(d.id);
+                $('#selected-policy-component-type').text('templates');
+                $('#component-policy-target')
+                    .combo('setOptionEnabled', {
+                        value: 'write-receive-data'
+                    }, false)
+                    .combo('setOptionEnabled', {
+                        value: 'write-send-data'
+                    }, false)
+                    .combo('setOptionEnabled', {
+                        value: 'read-data'
+                    }, false)
+                    .combo('setOptionEnabled', {
+                        value: 'write-data'
+                    }, false)
+                    .combo('setSelectedOption', {
+                        value: 'read-component'
+                    });
+    
+                return loadPolicy().always(showPolicy);
+            },
+    
+            /**
+             * Shows the component policy dialog.
+             */
+            showComponentPolicy: function (selection) {
+                // reset the policy message
+                resetPolicyMessage();
+    
+                // update the policy controls visibility
+                $('#component-policy-controls').show();
+                $('#global-policy-controls').hide();
+    
+                // update the visibility
+                $('#policy-selected-component-container').show();
+                
+                var resource;
+                if (selection.empty()) {
+                  $('#selected-policy-component-id').text(nfCanvasUtils.getGroupId());
+                    resource = 'process-groups';
+    
+                    // disable site to site option
+                    $('#component-policy-target')
+                        .combo('setOptionEnabled', {
+                            value: 'write-receive-data'
+                        }, false)
+                        .combo('setOptionEnabled', {
+                            value: 'write-send-data'
+                        }, false)
+                        .combo('setOptionEnabled', {
+                            value: 'read-data'
+                        }, true)
+                        .combo('setOptionEnabled', {
+                            value: 'write-data'
+                        }, true);
+                } else {
+                    var d = selection.datum();
+                    $('#selected-policy-component-id').text(d.id);
+    
+                  if (nfCanvasUtils.isProcessor(selection)) {
+                        resource = 'processors';
+                  } else if (nfCanvasUtils.isProcessGroup(selection)) {
+                        resource = 'process-groups';
+                  } else if (nfCanvasUtils.isInputPort(selection)) {
+                        resource = 'input-ports';
+                  } else if (nfCanvasUtils.isOutputPort(selection)) {
+                        resource = 'output-ports';
+                  } else if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                        resource = 'remote-process-groups';
+                  } else if (nfCanvasUtils.isLabel(selection)) {
+                        resource = 'labels';
+                  } else if (nfCanvasUtils.isFunnel(selection)) {
+                        resource = 'funnels';
+                    }
+    
+                    // enable site to site option
+                    $('#component-policy-target')
+                        .combo('setOptionEnabled', {
+                            value: 'write-receive-data'
+                      }, nfCanvasUtils.isInputPort(selection) && nfCanvasUtils.getParentGroupId() === null)
+                        .combo('setOptionEnabled', {
+                            value: 'write-send-data'
+                      }, nfCanvasUtils.isOutputPort(selection) && nfCanvasUtils.getParentGroupId() === null)
+                        .combo('setOptionEnabled', {
+                            value: 'read-data'
+                      }, !nfCanvasUtils.isLabel(selection))
+                        .combo('setOptionEnabled', {
+                            value: 'write-data'
+                      }, !nfCanvasUtils.isLabel(selection));
+                }
+    
+                // populate the initial resource
+                $('#selected-policy-component-type').text(resource);
+                $('#component-policy-target').combo('setSelectedOption', {
+                    value: 'read-component'
+                });
+    
+                return loadPolicy().always(showPolicy);
+            },
+    
+            /**
+             * Shows the global policies dialog.
+             */
+            showGlobalPolicies: function () {
+                // reset the policy message
+                resetPolicyMessage();
+    
+                // update the policy controls visibility
+                $('#component-policy-controls').hide();
+                $('#global-policy-controls').show();
+    
+                // reload the current policies
+                var policyType = $('#policy-type-list').combo('getSelectedOption').value;
+                $('#selected-policy-type').text(policyType);
+    
+                if (policyType === 'controller') {
+                    $('#selected-policy-action').text($('#controller-policy-target').combo('getSelectedOption').value);
+              } else if (policyType === 'proxy' || policyType === 'restricted-components') {
+                    $('#selected-policy-action').text('write');
+                } else {
+                    $('#selected-policy-action').text('read');
+                }
+    
+                return loadPolicy().always(showPolicy);
+            }
+        };
+    
+      return nfPolicyManagement;
+  }));
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
new file mode 100644
index 000000000000..09b3725c2cc1
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js
@@ -0,0 +1,215 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.ng.Bridge',
+                  'nf.Port'],
+              function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfPort) {
+                  return (nf.PortConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfPort));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.PortConfiguration =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ng.Bridge'),
+                  require('nf.Port')));
+      } else {
+          nf.PortConfiguration = factory(root.$,
+              root.d3,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.ng.Bridge,
+              root.nf.Port);
+      }
+  }(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfPort) {
+      'use strict';
+    
+        /**
+         * Initializes the port dialog.
+         */
+        var initPortConfigurationDialog = function () {
+            $('#port-configuration').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-port-configuration.ConfigurePort'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-port-configuration.Apply'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // get the port data to reference the uri
+                            var portId = $('#port-id').text();
+                            var portData = d3.select('#id-' + portId).datum();
+    
+                            // build the updated port
+                            var port = {
+                                'id': portId,
+                                'name': $('#port-name').val(),
+                                'comments': $('#port-comments').val()
+                            };
+    
+                            // include the concurrent tasks if appropriate
+                            if ($('#port-concurrent-task-container').is(':visible')) {
+                                port['concurrentlySchedulableTaskCount'] = $('#port-concurrent-tasks').val();
+                            }
+    
+                            // mark the processor disabled if appropriate
+                            if ($('#port-enabled').hasClass('checkbox-unchecked')) {
+                                port['state'] = 'DISABLED';
+                            } else if ($('#port-enabled').hasClass('checkbox-checked')) {
+                                port['state'] = 'STOPPED';
+                            }
+    
+                            // build the port entity
+                            var portEntity = {
+                              'revision': nfClient.getRevision(portData),
+                                'component': port
+                            };
+    
+                            // update the selected component
+                            $.ajax({
+                                type: 'PUT',
+                                data: JSON.stringify(portEntity),
+                                url: portData.uri,
+                                dataType: 'json',
+                                contentType: 'application/json'
+                            }).done(function (response) {
+                                // refresh the port component
+                              nfPort.set(response);
+    
+                                // inform Angular app values have changed
+                              nfNgBridge.digest();
+    
+                                // close the details panel
+                                $('#port-configuration').modal('hide');
+                            }).fail(function (xhr, status, error) {
+                                // handle bad request locally to keep the dialog open, allowing the user
+                                // to make changes. if the request fails for another reason, the dialog
+                                // should be closed so the issue can be addressed (stale flow for instance)
+                                if (xhr.status === 400) {
+                                    var errors = xhr.responseText.split('\n');
+    
+                                    var content;
+                                    if (errors.length === 1) {
+                                        content = $('<span></span>').text(errors[0]);
+                                    } else {
+                                      content = nfCommon.formatUnorderedList(errors);
+                                    }
+    
+                                  nfDialog.showOkDialog({
+                                        dialogContent: content,
+                                      headerText: nf._.msg('nf=port-configuration.PortConfigure')
+                                    });
+                                } else {
+                                    // close the details panel
+                                    $('#port-configuration').modal('hide');
+    
+                                    // handle the error
+                                  nfErrorHandler.handleAjaxError(xhr, status, error);
+                                }
+                            });
+                        }
+                    }
+                },
+                    {
+                      buttonText: nf._.msg('nf=port-configuration.Cancel'),
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#port-configuration').modal('hide');
+                            }
+                        }
+                    }],
+                handler: {
+                    close: function () {
+                        // clear the port details
+                        $('#port-id').text('');
+                        $('#port-name').val('');
+                        $('#port-enabled').removeClass('checkbox-unchecked checkbox-checked');
+                        $('#port-concurrent-tasks').val('');
+                        $('#port-comments').val('');
+                    }
+                }
+            });
+        };
+    
+        return {
+            init: function () {
+                initPortConfigurationDialog();
+            },
+    
+            /**
+             * Shows the details for the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            showConfiguration: function (selection) {
+                // if the specified component is a port, load its properties
+              if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // determine if the enabled checkbox is checked or not
+                    var portEnableStyle = 'checkbox-checked';
+                    if (selectionData.component.state === 'DISABLED') {
+                        portEnableStyle = 'checkbox-unchecked';
+                    }
+    
+                    // show concurrent tasks for root groups only
+                  if (nfCanvasUtils.getParentGroupId() === null) {
+                        $('#port-concurrent-task-container').show();
+                    } else {
+                        $('#port-concurrent-task-container').hide();
+                    }
+    
+                    // populate the port settings
+                    $('#port-id').text(selectionData.id);
+                    $('#port-name').val(selectionData.component.name);
+                    $('#port-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(portEnableStyle);
+                    $('#port-concurrent-tasks').val(selectionData.component.concurrentlySchedulableTaskCount);
+                    $('#port-comments').val(selectionData.component.comments);
+    
+                    // show the details
+                    $('#port-configuration').modal('show');
+                }
+            }
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js
new file mode 100644
index 000000000000..9c3c4523382e
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js
@@ -0,0 +1,87 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.CanvasUtils'],
+            function ($, nfCommon, nfCanvasUtils) {
+                return (nf.PortDetails = factory($, nfCommon, nfCanvasUtils));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.PortDetails =
+            factory(require('jquery'),
+                require('nf.Common'),
+                require('nf.CanvasUtils')));
+    } else {
+        nf.PortDetails = factory(root.$,
+            root.nf.Common,
+            root.nf.CanvasUtils);
+    }
+}(this, function ($, nfCommon, nfCanvasUtils) {
+    'use strict';
+
+    return {
+        init: function () {
+            // configure the processor details dialog
+            $('#port-details').modal({
+                scrollableContentStyle: 'scrollable',
+                headerText: 'Port Details',
+                buttons: [{
+                    buttonText: 'Ok',
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // hide the dialog
+                            $('#port-details').modal('hide');
+                        }
+                    }
+                }],
+                handler: {
+                    close: function () {
+                        // clear the processor details
+                        nfCommon.clearField('read-only-port-name');
+                        nfCommon.clearField('read-only-port-id');
+                        nfCommon.clearField('read-only-port-comments');
+                    }
+                }
+            });
+        },
+
+        showDetails: function (selection) {
+            // if the specified component is a processor, load its properties
+            if (nfCanvasUtils.isInputPort(selection) || nfCanvasUtils.isOutputPort(selection)) {
+                var selectionData = selection.datum();
+
+                // populate the port settings
+                nfCommon.populateField('read-only-port-name', selectionData.component.name);
+                nfCommon.populateField('read-only-port-id', selectionData.id);
+                nfCommon.populateField('read-only-port-comments', selectionData.component.comments);
+
+                // show the details
+                $('#port-details').modal('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/canvas/nf-port.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js
new file mode 100644
index 000000000000..06820bfc8f2f
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js
@@ -0,0 +1,775 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'd3',
+                'nf.Common',
+                'nf.Client',
+                'nf.CanvasUtils'],
+            function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
+                return (nf.Port = factory($, d3, nfCommon, nfClient, nfCanvasUtils));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Port =
+            factory(require('jquery'),
+                require('d3'),
+                require('nf.Common'),
+                require('nf.Client'),
+                require('nf.CanvasUtils')));
+    } else {
+        nf.Port = factory(root.$,
+            root.d3,
+            root.nf.Common,
+            root.nf.Client,
+            root.nf.CanvasUtils);
+    }
+}(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
+    'use strict';
+
+    var nfConnectable;
+    var nfDraggable;
+    var nfSelectable;
+    var nfContextMenu;
+
+    var PREVIEW_NAME_LENGTH = 15;
+    var OFFSET_VALUE = 25;
+
+    var portDimensions = {
+        width: 240,
+        height: 50
+    };
+    var remotePortDimensions = {
+        width: 240,
+        height: 75
+    };
+
+    // ----------------------------
+    // ports currently on the graph
+    // ----------------------------
+
+    var portMap;
+
+    // -----------------------------------------------------------
+    // cache for components that are added/removed from the canvas
+    // -----------------------------------------------------------
+
+    var removedCache;
+    var addedCache;
+
+    // --------------------
+    // component containers
+    // --------------------
+
+    var portContainer;
+
+    // --------------------------
+    // privately scoped functions
+    // --------------------------
+
+    /**
+     * Selects the port elements against the current port map.
+     */
+    var select = function () {
+        return portContainer.selectAll('g.input-port, g.output-port').data(portMap.values(), function (d) {
+            return d.id;
+        });
+    };
+
+    /**
+     * Renders the ports in the specified selection.
+     *
+     * @param {selection} entered           The selection of ports to be rendered
+     * @param {boolean} selected            Whether the port should be selected
+     */
+    var renderPorts = function (entered, selected) {
+        if (entered.empty()) {
+            return;
+        }
+
+        var port = entered.append('g')
+            .attr({
+                'id': function (d) {
+                    return 'id-' + d.id;
+                },
+                'class': function (d) {
+                    if (d.portType === 'INPUT_PORT') {
+                        return 'input-port component';
+                    } else {
+                        return 'output-port component';
+                    }
+                }
+            })
+            .classed('selected', selected)
+            .call(nfCanvasUtils.position);
+
+        // port border
+        port.append('rect')
+            .attr({
+                'class': 'border',
+                'width': function (d) {
+                    return d.dimensions.width;
+                },
+                'height': function (d) {
+                    return d.dimensions.height;
+                },
+                'fill': 'transparent',
+                'stroke': 'transparent'
+            });
+
+        // port body
+        port.append('rect')
+            .attr({
+                'class': 'body',
+                'width': function (d) {
+                    return d.dimensions.width;
+                },
+                'height': function (d) {
+                    return d.dimensions.height;
+                },
+                'filter': 'url(#component-drop-shadow)',
+                'stroke-width': 0
+            });
+
+        var offset = 0;
+
+        // conditionally render the remote banner
+        if (nfCanvasUtils.getParentGroupId() === null) {
+            offset = OFFSET_VALUE;
+
+            // port remote banner
+            port.append('rect')
+                .attr({
+                    'class': 'remote-banner',
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': offset,
+                    'fill': '#e3e8eb'
+                });
+        }
+
+        // port icon
+        port.append('text')
+            .attr({
+                'class': 'port-icon',
+                'x': 10,
+                'y': 38 + offset
+            })
+            .text(function (d) {
+                if (d.portType === 'INPUT_PORT') {
+                    return '\ue832';
+                } else {
+                    return '\ue833';
+                }
+            });
+
+        // port name
+        port.append('text')
+            .attr({
+                'x': 70,
+                'y': 25 + offset,
+                'width': 95,
+                'height': 30,
+                'class': 'port-name'
+            });
+
+        // make ports selectable
+        port.call(nfSelectable.activate).call(nfContextMenu.activate);
+
+        // only activate dragging and connecting if appropriate
+        port.filter(function (d) {
+            return d.permissions.canWrite && d.permissions.canRead;
+        }).call(nfDraggable.activate).call(nfConnectable.activate);
+    };
+
+    /**
+     * Updates the ports in the specified selection.
+     *
+     * @param {selection} updated               The ports to be updated
+     */
+    var updatePorts = function (updated) {
+        if (updated.empty()) {
+            return;
+        }
+
+        // port border authorization
+        updated.select('rect.border')
+            .classed('unauthorized', function (d) {
+                return d.permissions.canRead === false;
+            });
+
+        // port body authorization
+        updated.select('rect.body')
+            .classed('unauthorized', function (d) {
+                return d.permissions.canRead === false;
+            });
+
+        updated.each(function (portData) {
+            var port = d3.select(this);
+            var details = port.select('g.port-details');
+
+            // update the component behavior as appropriate
+            nfCanvasUtils.editable(port, nfConnectable, nfDraggable);
+
+            // if this process group is visible, render everything
+            if (port.classed('visible')) {
+                if (details.empty()) {
+                    details = port.append('g').attr('class', 'port-details');
+
+                    var offset = 0;
+                    if (nfCanvasUtils.getParentGroupId() === null) {
+                        offset = OFFSET_VALUE;
+
+                        // port transmitting icon
+                        details.append('text')
+                            .attr({
+                                'class': 'port-transmission-icon',
+                                'x': 10,
+                                'y': 18
+                            });
+
+                        // bulletin background
+                        details.append('rect')
+                            .attr({
+                                'class': 'bulletin-background',
+                                'x': function (d) {
+                                    return portData.dimensions.width - offset;
+                                },
+                                'width': offset,
+                                'height': offset
+                            });
+
+                        // bulletin icon
+                        details.append('text')
+                            .attr({
+                                'class': 'bulletin-icon',
+                                'x': function (d) {
+                                    return portData.dimensions.width - 18;
+                                },
+                                'y': 18
+                            })
+                            .text('\uf24a');
+                    }
+
+                    // run status icon
+                    details.append('text')
+                        .attr({
+                            'class': 'run-status-icon',
+                            'x': 50,
+                            'y': function () {
+                                return 25 + offset;
+                            }
+                        });
+
+                    // -------------------
+                    // active thread count
+                    // -------------------
+
+                    // active thread count
+                    details.append('text')
+                        .attr({
+                            'class': 'active-thread-count-icon',
+                            'y': 43 + offset
+                        })
+                        .text('\ue83f');
+
+                    // active thread icon
+                    details.append('text')
+                        .attr({
+                            'class': 'active-thread-count',
+                            'y': 43 + offset
+                        });
+                }
+
+                if (portData.permissions.canRead) {
+                    // update the port name
+                    port.select('text.port-name')
+                        .each(function (d) {
+                            var portName = d3.select(this);
+                            var name = d.component.name;
+                            var words = name.split(/\s+/);
+
+                            // reset the port name to handle any previous state
+                            portName.text(null).selectAll('tspan, title').remove();
+
+                            // handle based on the number of tokens in the port name
+                            if (words.length === 1) {
+                                // apply ellipsis to the port name as necessary
+                                nfCanvasUtils.ellipsis(portName, name);
+                            } else {
+                                nfCanvasUtils.multilineEllipsis(portName, 2, name);
+                            }
+                        }).append('title').text(function (d) {
+                        return d.component.name;
+                    });
+                } else {
+                    // clear the port name
+                    port.select('text.port-name').text(null);
+                }
+
+                // populate the stats
+                port.call(updatePortStatus);
+            } else {
+                if (portData.permissions.canRead) {
+                    // update the port name
+                    port.select('text.port-name')
+                        .text(function (d) {
+                            var name = d.component.name;
+                            if (name.length > PREVIEW_NAME_LENGTH) {
+                                return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
+                            } else {
+                                return name;
+                            }
+                        });
+                } else {
+                    // clear the port name
+                    port.select('text.port-name').text(null);
+                }
+
+                // remove tooltips if necessary
+                port.call(removeTooltips);
+
+                // remove the details if necessary
+                if (!details.empty()) {
+                    details.remove();
+                }
+            }
+        });
+    };
+
+    /**
+     * Updates the port status.
+     *
+     * @param {selection} updated           The ports to be updated
+     */
+    var updatePortStatus = function (updated) {
+        if (updated.empty()) {
+            return;
+        }
+
+        // update the run status
+        updated.select('text.run-status-icon')
+            .attr({
+                'fill': function (d) {
+                    var fill = '#728e9b';
+
+                    if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
+                        fill = '#cf9f5d';
+                    } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
+                        fill = '#7dc7a0';
+                    } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
+                        fill = '#d18686';
+                    }
+
+                    return fill;
+                },
+                'font-family': function (d) {
+                    var family = 'FontAwesome';
+                    if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
+                        family = 'flowfont';
+                    }
+                    return family;
+                }
+            })
+            .text(function (d) {
+                var img = '';
+                if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
+                    img = '\ue802';
+                } else if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
+                    img = '\uf071';
+                } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
+                    img = '\uf04b';
+                } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
+                    img = '\uf04d';
+                }
+                return img;
+            })
+            .each(function (d) {
+                // get the tip
+                var tip = d3.select('#run-status-tip-' + d.id);
+
+                // if there are validation errors generate a tooltip
+                if (d.permissions.canRead && !nfCommon.isEmpty(d.component.validationErrors)) {
+                    // create the tip if necessary
+                    if (tip.empty()) {
+                        tip = d3.select('#port-tooltips').append('div')
+                            .attr('id', function () {
+                                return 'run-status-tip-' + d.id;
+                            })
+                            .attr('class', 'tooltip nifi-tooltip');
+                    }
+
+                    // update the tip
+                    tip.html(function () {
+                        var list = nfCommon.formatUnorderedList(d.component.validationErrors);
+                        if (list === null || list.length === 0) {
+                            return '';
+                        } else {
+                            return $('<div></div>').append(list).html();
+                        }
+                    });
+
+                    // add the tooltip
+                    nfCanvasUtils.canvasTooltip(tip, d3.select(this));
+                } else {
+                    // remove if necessary
+                    if (!tip.empty()) {
+                        tip.remove();
+                    }
+                }
+            });
+
+        updated.select('text.port-transmission-icon')
+            .attr({
+                'font-family': function (d) {
+                    if (d.status.transmitting === true) {
+                        return 'FontAwesome';
+                    } else {
+                        return 'flowfont';
+                    }
+                }
+            })
+            .text(function (d) {
+                if (d.status.transmitting === true) {
+                    return '\uf140';
+                } else {
+                    return '\ue80a';
+                }
+            })
+            .classed('transmitting', function (d) {
+                if (d.status.transmitting === true) {
+                    return true;
+                } else {
+                    return false;
+                }
+            })
+            .classed('not-transmitting', function (d) {
+                if (d.status.transmitting !== true) {
+                    return true;
+                } else {
+                    return false;
+                }
+            });
+
+        updated.each(function (d) {
+            var port = d3.select(this);
+            var offset = 0;
+
+            // -------------------
+            // active thread count
+            // -------------------
+
+            nfCanvasUtils.activeThreadCount(port, d, function (off) {
+                offset = off;
+            });
+
+            // ---------
+            // bulletins
+            // ---------
+
+            port.select('rect.bulletin-background').classed('has-bulletins', function () {
+                return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
+            });
+
+            nfCanvasUtils.bulletins(port, d, function () {
+                return d3.select('#port-tooltips');
+            }, offset);
+        });
+    };
+
+    /**
+     * Removes the ports in the specified selection.
+     *
+     * @param {selection} removed               The ports to be removed
+     */
+    var removePorts = function (removed) {
+        if (removed.empty()) {
+            return;
+        }
+
+        removed.call(removeTooltips).remove();
+    };
+
+    /**
+     * Removes the tooltips for the ports in the specified selection.
+     *
+     * @param {selection} removed
+     */
+    var removeTooltips = function (removed) {
+        removed.each(function (d) {
+            // remove any associated tooltips
+            $('#run-status-tip-' + d.id).remove();
+            $('#bulletin-tip-' + d.id).remove();
+        });
+    };
+
+    var nfPort = {
+        /**
+         * Initializes of the Port handler.
+         *
+         * @param nfConnectableRef   The nfConnectable module.
+         * @param nfDraggableRef   The nfDraggable module.
+         * @param nfSelectableRef   The nfSelectable module.
+         * @param nfContextMenuRef   The nfContextMenu module.
+         */
+        init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
+            nfConnectable = nfConnectableRef;
+            nfDraggable = nfDraggableRef;
+            nfSelectable = nfSelectableRef;
+            nfContextMenu = nfContextMenuRef;
+
+            portMap = d3.map();
+            removedCache = d3.map();
+            addedCache = d3.map();
+
+            // create the port container
+            portContainer = d3.select('#canvas').append('g')
+                .attr({
+                    'pointer-events': 'all',
+                    'class': 'ports'
+                });
+        },
+
+        /**
+         * Adds the specified port entity.
+         *
+         * @param portEntities       The port
+         * @param options           Configuration options
+         */
+        add: function (portEntities, options) {
+            var selectAll = false;
+            if (nfCommon.isDefinedAndNotNull(options)) {
+                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+            }
+
+            // determine the appropriate dimensions for this port
+            var dimensions = portDimensions;
+            if (nfCanvasUtils.getParentGroupId() === null) {
+                dimensions = remotePortDimensions;
+            }
+
+            // get the current time
+            var now = new Date().getTime();
+
+            var add = function (portEntity) {
+                addedCache.set(portEntity.id, now);
+
+                // add the port
+                portMap.set(portEntity.id, $.extend({
+                    type: 'Port',
+                    dimensions: dimensions,
+                    status: {
+                        activeThreadCount: 0
+                    }
+                }, portEntity));
+            };
+
+            // determine how to handle the specified port status
+            if ($.isArray(portEntities)) {
+                $.each(portEntities, function (_, portNode) {
+                    add(portNode);
+                });
+            } else if (nfCommon.isDefinedAndNotNull(portEntities)) {
+                add(portEntities);
+            }
+
+            // apply the selection and handle new ports
+            var selection = select();
+            selection.enter().call(renderPorts, selectAll);
+            selection.call(updatePorts);
+        },
+
+        /**
+         * Populates the graph with the specified ports.
+         *
+         * @argument {object | array} portNodes                    The ports to add
+         * @argument {object} options                Configuration options
+         */
+        set: function (portEntities, options) {
+            var selectAll = false;
+            var transition = false;
+            if (nfCommon.isDefinedAndNotNull(options)) {
+                selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+            }
+
+            // determine the appropriate dimensions for this port
+            var dimensions = portDimensions;
+            if (nfCanvasUtils.getParentGroupId() === null) {
+                dimensions = remotePortDimensions;
+            }
+
+            var set = function (proposedPortEntity) {
+                var currentPortEntity = portMap.get(proposedPortEntity.id);
+
+                // set the port if appropriate due to revision and wasn't previously removed
+                if (nfClient.isNewerRevision(currentPortEntity, proposedPortEntity) && !removedCache.has(proposedPortEntity.id)) {
+                    // add the port
+                    portMap.set(proposedPortEntity.id, $.extend({
+                        type: 'Port',
+                        dimensions: dimensions,
+                        status: {
+                            activeThreadCount: 0
+                        }
+                    }, proposedPortEntity));
+                }
+            };
+
+            // determine how to handle the specified port status
+            if ($.isArray(portEntities)) {
+                $.each(portMap.keys(), function (_, key) {
+                    var currentPortEntity = portMap.get(key);
+                    var isPresent = $.grep(portEntities, function (proposedPortEntity) {
+                        return proposedPortEntity.id === currentPortEntity.id;
+                    });
+
+                    // if the current port is not present and was not recently added, remove it
+                    if (isPresent.length === 0 && !addedCache.has(key)) {
+                        portMap.remove(key);
+                    }
+                });
+                $.each(portEntities, function (_, portNode) {
+                    set(portNode);
+                });
+            } else if (nfCommon.isDefinedAndNotNull(portEntities)) {
+                set(portEntities);
+            }
+
+            // apply the selection and handle all new ports
+            var selection = select();
+            selection.enter().call(renderPorts, selectAll);
+            selection.call(updatePorts).call(nfCanvasUtils.position, transition);
+            selection.exit().call(removePorts);
+        },
+
+        /**
+         * If the port id is specified it is returned. If no port id
+         * specified, all ports are returned.
+         *
+         * @param {string} id
+         */
+        get: function (id) {
+            if (nfCommon.isUndefined(id)) {
+                return portMap.values();
+            } else {
+                return portMap.get(id);
+            }
+        },
+
+        /**
+         * If the port id is specified it is refresh according to the current
+         * state. If not port id is specified, all ports are refreshed.
+         *
+         * @param {string} id      Optional
+         */
+        refresh: function (id) {
+            if (nfCommon.isDefinedAndNotNull(id)) {
+                d3.select('#id-' + id).call(updatePorts);
+            } else {
+                d3.selectAll('g.input-port, g.output-port').call(updatePorts);
+            }
+        },
+
+        /**
+         * Refreshes the components necessary after a pan event.
+         */
+        pan: function () {
+            d3.selectAll('g.input-port.entering, g.output-port.entering, g.input-port.leaving, g.output-port.leaving').call(updatePorts);
+        },
+
+        /**
+         * Reloads the port state from the server and refreshes the UI.
+         * If the port is currently unknown, this function just returns.
+         *
+         * @param {string} id The port id
+         */
+        reload: function (id) {
+            if (portMap.has(id)) {
+                var portEntity = portMap.get(id);
+                return $.ajax({
+                    type: 'GET',
+                    url: portEntity.uri,
+                    dataType: 'json'
+                }).done(function (response) {
+                    nfPort.set(response);
+                });
+            }
+        },
+
+        /**
+         * Positions the component.
+         *
+         * @param {string} id   The id
+         */
+        position: function (id) {
+            d3.select('#id-' + id).call(nfCanvasUtils.position);
+        },
+
+        /**
+         * Removes the specified port.
+         *
+         * @param {string} portIds      The port id(s)
+         */
+        remove: function (portIds) {
+            var now = new Date().getTime();
+
+            if ($.isArray(portIds)) {
+                $.each(portIds, function (_, portId) {
+                    removedCache.set(portId, now);
+                    portMap.remove(portId);
+                });
+            } else {
+                removedCache.set(portIds, now);
+                portMap.remove(portIds);
+            }
+
+            // apply the selection and handle all removed ports
+            select().exit().call(removePorts);
+        },
+
+        /**
+         * Removes all ports..
+         */
+        removeAll: function () {
+            nfPort.remove(portMap.keys());
+        },
+
+        /**
+         * Expires the caches up to the specified timestamp.
+         *
+         * @param timestamp
+         */
+        expireCaches: function (timestamp) {
+            var expire = function (cache) {
+                cache.forEach(function (id, entryTimestamp) {
+                    if (timestamp > entryTimestamp) {
+                        cache.remove(id);
+                    }
+                });
+            };
+
+            expire(addedCache);
+            expire(removedCache);
+        }
+    };
+
+    return nfPort;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js
new file mode 100644
index 000000000000..00810c7fc0e9
--- /dev/null
+++ 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
@@ -0,0 +1,382 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'd3',
+                'nf.ErrorHandler',
+                'nf.Common',
+                'nf.Dialog',
+                'nf.Client',
+                'nf.ProcessGroup',
+                'nf.Shell',
+                'nf.CanvasUtils'],
+            function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfProcessGroup, nfShell, nfCanvasUtils) {
+                return (nf.ProcessGroupConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfProcessGroup, nfShell, nfCanvasUtils));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ProcessGroupConfiguration =
+            factory(require('jquery'),
+                require('d3'),
+                require('nf.ErrorHandler'),
+                require('nf.Common'),
+                require('nf.Dialog'),
+                require('nf.Client'),
+                require('nf.ProcessGroup'),
+                require('nf.Shell'),
+                require('nf.CanvasUtils')));
+    } else {
+        nf.ProcessGroupConfiguration = factory(root.$,
+            root.d3,
+            root.nf.ErrorHandler,
+            root.nf.Common,
+            root.nf.Dialog,
+            root.nf.Client,
+            root.nf.ProcessGroup,
+            root.nf.Shell,
+            root.nf.CanvasUtils);
+    }
+}(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfProcessGroup, nfShell, nfCanvasUtils) {
+    'use strict';
+
+    var nfControllerServices;
+
+    var config = {
+        urls: {
+            api: '../nifi-api'
+        }
+    };
+
+    /**
+     * Initializes the general tab.
+     */
+    var initGeneral = function () {
+    };
+
+    /**
+     * Gets the controller services table.
+     *
+     * @returns {*|jQuery|HTMLElement}
+     */
+    var getControllerServicesTable = function () {
+        return $('#process-group-controller-services-table');
+    };
+
+    /**
+     * Saves the configuration for the specified group.
+     *
+     * @param version
+     * @param groupId
+     */
+    var saveConfiguration = function (version, groupId) {
+        // build the entity
+        var entity = {
+            'revision': nfClient.getRevision({
+                'revision': {
+                    'version': version
+                }
+            }),
+            'component': {
+                'id': groupId,
+                'name': $('#process-group-name').val(),
+                'comments': $('#process-group-comments').val()
+            }
+        };
+
+        // update the selected component
+        $.ajax({
+            type: 'PUT',
+            data: JSON.stringify(entity),
+            url: config.urls.api + '/process-groups/' + encodeURIComponent(groupId),
+            dataType: 'json',
+            contentType: 'application/json'
+        }).done(function (response) {
+            // refresh the process group if necessary
+            if (response.permissions.canRead && response.component.parentGroupId === nfCanvasUtils.getGroupId()) {
+                nfProcessGroup.set(response);
+            }
+
+            // show the result dialog
+            nfDialog.showOkDialog({
+                headerText: 'Process Group Configuration',
+                dialogContent: 'Process group configuration successfully saved.'
+            });
+
+            // update the click listener for the updated revision
+            $('#process-group-configuration-save').off('click').on('click', function () {
+                saveConfiguration(response.revision.version, groupId);
+            });
+
+            nfCanvasUtils.reload();
+        }).fail(nfErrorHandler.handleAjaxError);
+    };
+
+    /**
+     * Loads the configuration for the specified process group.
+     *
+     * @param {string} groupId
+     */
+    var loadConfiguration = function (groupId) {
+        var setUnauthorizedText = function () {
+            $('#read-only-process-group-name').addClass('unset').text('Unauthorized');
+            $('#read-only-process-group-comments').addClass('unset').text('Unauthorized');
+        };
+
+        var setEditable = function (editable) {
+            if (editable) {
+                $('#process-group-configuration div.editable').show();
+                $('#process-group-configuration div.read-only').hide();
+                $('#process-group-configuration-save').show();
+            } else {
+                $('#process-group-configuration div.editable').hide();
+                $('#process-group-configuration div.read-only').show();
+                $('#process-group-configuration-save').hide();
+            }
+        };
+
+        // record the group id
+        $('#process-group-id').text(groupId);
+
+        // update the click listener
+        $('#process-group-configuration-refresh-button').off('click').on('click', function () {
+            loadConfiguration(groupId);
+        });
+
+        // update the new controller service click listener
+        $('#add-process-group-configuration-controller-service').off('click').on('click', function () {
+            var selectedTab = $('#process-group-configuration-tabs li.selected-tab').text();
+            if (selectedTab === 'Controller Services') {
+                var controllerServicesUri = config.urls.api + '/process-groups/' + encodeURIComponent(groupId) + '/controller-services';
+                nfControllerServices.promptNewControllerService(controllerServicesUri, getControllerServicesTable());
+            }
+        });
+
+        var processGroup = $.Deferred(function (deferred) {
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/process-groups/' + encodeURIComponent(groupId),
+                dataType: 'json'
+            }).done(function (response) {
+                // store the process group
+                $('#process-group-configuration').data('process-group', response);
+
+                if (response.permissions.canWrite) {
+                    var processGroup = response.component;
+
+                    // populate the process group settings
+                    $('#process-group-name').removeClass('unset').val(processGroup.name);
+                    $('#process-group-comments').removeClass('unset').val(processGroup.comments);
+
+                    // populate the header
+                    $('#process-group-configuration-header-text').text(processGroup.name + ' Configuration');
+
+                    setEditable(true);
+
+                    // register the click listener for the save button
+                    $('#process-group-configuration-save').off('click').on('click', function () {
+                        saveConfiguration(response.revision.version, response.id);
+                    });
+                } else {
+                    if (response.permissions.canRead) {
+                        // populate the process group settings
+                        $('#read-only-process-group-name').removeClass('unset').text(response.component.name);
+                        $('#read-only-process-group-comments').removeClass('unset').text(response.component.comments);
+
+                        // populate the header
+                        $('#process-group-configuration-header-text').text(processGroup.name + ' Configuration');
+                    } else {
+                        setUnauthorizedText();
+                    }
+
+                    setEditable(false);
+                }
+                deferred.resolve();
+            }).fail(function (xhr, status, error) {
+                if (xhr.status === 403) {
+                    if (groupId === nfCanvasUtils.getGroupId()) {
+                        $('#process-group-configuration').data('process-group', {
+                            'permissions': {
+                                canRead: false,
+                                canWrite: nfCanvasUtils.canWrite()
+                            }
+                        });
+                    } else {
+                        $('#process-group-configuration').data('process-group', nfProcessGroup.get(groupId));
+                    }
+
+                    setUnauthorizedText();
+                    setEditable(false);
+                    deferred.resolve();
+                } else {
+                    deferred.reject(xhr, status, error);
+                }
+            });
+        }).promise();
+
+        // load the controller services
+        var controllerServicesUri = config.urls.api + '/flow/process-groups/' + encodeURIComponent(groupId) + '/controller-services';
+        var controllerServices = nfControllerServices.loadControllerServices(controllerServicesUri, getControllerServicesTable());
+
+        // wait for everything to complete
+        return $.when(processGroup, controllerServices).done(function (processGroupResult, controllerServicesResult) {
+            var controllerServicesResponse = controllerServicesResult[0];
+
+            // update the current time
+            $('#process-group-configuration-last-refreshed').text(controllerServicesResponse.currentTime);
+        }).fail(nfErrorHandler.handleAjaxError);
+    };
+
+    /**
+     * Shows the process group configuration.
+     */
+    var showConfiguration = function () {
+        // show the configuration dialog
+        nfShell.showContent('#process-group-configuration').done(function () {
+            reset();
+        });
+
+        //reset content to account for possible policy changes
+        $('#process-group-configuration-tabs').find('.selected-tab').click();
+
+        // adjust the table size
+        nfProcessGroupConfiguration.resetTableSize();
+    };
+
+    /**
+     * Resets the process group configuration dialog.
+     */
+    var reset = function () {
+        $('#process-group-configuration').removeData('process-group');
+
+        // reset button state
+        $('#process-group-configuration-save').mouseout();
+
+        // reset the fields
+        $('#process-group-id').text('');
+        $('#process-group-name').val('');
+        $('#process-group-comments').val('');
+
+        // reset the header
+        $('#process-group-configuration-header-text').text('Process Group Configuration');
+    };
+
+    var nfProcessGroupConfiguration = {
+
+        /**
+         * Initialize the process group configuration.
+         *
+         * @param nfControllerServicesRef   The nfControllerServices module.
+         */
+        init: function (nfControllerServicesRef) {
+            nfControllerServices = nfControllerServicesRef;
+
+            // initialize the process group configuration tabs
+            $('#process-group-configuration-tabs').tabbs({
+                tabStyle: 'tab',
+                selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
+                tabs: [{
+                    name: 'General',
+                    tabContentId: 'general-process-group-configuration-tab-content'
+                }, {
+                    name: 'Controller Services',
+                    tabContentId: 'process-group-controller-services-tab-content'
+                }],
+                select: function () {
+                    var processGroup = $('#process-group-configuration').data('process-group');
+                    var canWrite = nfCommon.isDefinedAndNotNull(processGroup) ? processGroup.permissions.canWrite : false;
+
+                    var tab = $(this).text();
+                    if (tab === 'General') {
+                        $('#flow-cs-availability').hide();
+                        $('#add-process-group-configuration-controller-service').hide();
+
+                        if (canWrite) {
+                            $('#process-group-configuration-save').show();
+                        } else {
+                            $('#process-group-configuration-save').hide();
+                        }
+                    } else {
+                        $('#flow-cs-availability').show();
+                        $('#process-group-configuration-save').hide();
+
+                        if (canWrite) {
+                            $('#add-process-group-configuration-controller-service').show();
+                            $('#process-group-controller-services-tab-content').css('top', '32px');
+                        } else {
+                            $('#add-process-group-configuration-controller-service').hide();
+                            $('#process-group-controller-services-tab-content').css('top', '0');
+                        }
+
+                        // resize the table
+                        nfProcessGroupConfiguration.resetTableSize();
+                    }
+                }
+            });
+
+            // initialize each tab
+            initGeneral();
+            nfControllerServices.init(getControllerServicesTable());
+        },
+
+        /**
+         * Update the size of the grid based on its container's current size.
+         */
+        resetTableSize: function () {
+            nfControllerServices.resetTableSize(getControllerServicesTable());
+        },
+
+        /**
+         * Shows the settings dialog.
+         */
+        showConfiguration: function (groupId) {
+            return loadConfiguration(groupId).done(showConfiguration);
+        },
+
+        /**
+         * Loads the configuration for the specified process group.
+         *
+         * @param groupId
+         */
+        loadConfiguration: function (groupId) {
+            return loadConfiguration(groupId);
+        },
+
+        /**
+         * Selects the specified controller service.
+         *
+         * @param {string} controllerServiceId
+         */
+        selectControllerService: function (controllerServiceId) {
+            var controllerServiceGrid = getControllerServicesTable().data('gridInstance');
+            var controllerServiceData = controllerServiceGrid.getData();
+
+            // select the desired service
+            var row = controllerServiceData.getRowById(controllerServiceId);
+            controllerServiceGrid.setSelectedRows([row]);
+            controllerServiceGrid.scrollRowIntoView(row);
+
+            // select the controller services tab
+            $('#process-group-configuration-tabs').find('li:eq(1)').click();
+        }
+    };
+
+    return nfProcessGroupConfiguration;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
new file mode 100644
index 000000000000..4ca9925f6bba
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
@@ -0,0 +1,1292 @@
+    /*
+     * 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 d3, define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Connection',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.Dialog'],
+              function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, nfDialog) {
+                  return (nf.ProcessGroup = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, nfDialog));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ProcessGroup =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.Connection'),
+                  require('nf.Common'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.Dialog')));
+      } else {
+          nf.ProcessGroup = factory(root.$,
+              root.d3,
+              root.nf.Connection,
+              root.nf.Common,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.Dialog);
+      }
+  }(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, nfDialog) {
+      'use strict';
+  
+      var nfConnectable;
+      var nfDraggable;
+      var nfSelectable;
+      var nfContextMenu;
+    
+        var PREVIEW_NAME_LENGTH = 30;
+    
+        var dimensions = {
+            width: 380,
+            height: 172
+        };
+    
+        // ----------------------------
+        // process groups currently on the graph
+        // ----------------------------
+    
+        var processGroupMap;
+    
+      // -----------------------------------------------------------
+      // cache for components that are added/removed from the canvas
+      // -----------------------------------------------------------
+  
+      var removedCache;
+      var addedCache;
+  
+        // --------------------
+        // component containers
+        // --------------------
+    
+        var processGroupContainer;
+    
+        // --------------------------
+        // privately scoped functions
+        // --------------------------
+    
+        /**
+         * Gets the process group comments.
+         *
+         * @param {object} d
+         */
+        var getProcessGroupComments = function (d) {
+          if (nfCommon.isBlank(d.component.comments)) {
+              return nf._.msg('nf-process-group.Message1');
+            } else {
+                return d.component.comments;
+            }
+        };
+    
+        /**
+         * Selects the process group elements against the current process group map.
+         */
+        var select = function () {
+            return processGroupContainer.selectAll('g.process-group').data(processGroupMap.values(), function (d) {
+                return d.id;
+            });
+        };
+    
+        /**
+         * Renders the process groups in the specified selection.
+         *
+         * @param {selection} entered           The selection of process groups to be rendered
+         * @param {boolean} selected            Whether the process group should be selected
+         */
+        var renderProcessGroups = function (entered, selected) {
+            if (entered.empty()) {
+                return;
+            }
+    
+            var processGroup = entered.append('g')
+                .attr({
+                    'id': function (d) {
+                        return 'id-' + d.id;
+                    },
+                    'class': 'process-group component'
+                })
+                .classed('selected', selected)
+              .call(nfCanvasUtils.position);
+    
+            // ----
+            // body
+            // ----
+    
+            // process group border
+            processGroup.append('rect')
+                .attr({
+                    'class': 'border',
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': function (d) {
+                        return d.dimensions.height;
+                    },
+                    'fill': 'transparent',
+                    'stroke': 'transparent'
+                });
+    
+            // process group body
+            processGroup.append('rect')
+                .attr({
+                    'class': 'body',
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': function (d) {
+                        return d.dimensions.height;
+                    },
+                    'filter': 'url(#component-drop-shadow)',
+                    'stroke-width': 0
+                });
+    
+            // process group name background
+            processGroup.append('rect')
+                .attr({
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': 32,
+                    'fill': '#b8c6cd'
+                });
+    
+            // process group name
+            processGroup.append('text')
+                .attr({
+                    'x': 10,
+                    'y': 20,
+                    'width': 316,
+                    'height': 16,
+                    'class': 'process-group-name'
+                });
+    
+            // always support selecting and navigation
+            processGroup.on('dblclick', function (d) {
+                // enter this group on double click
+              nfProcessGroup.enterGroup(d.id);
+            })
+              .call(nfSelectable.activate).call(nfContextMenu.activate);
+    
+            // only support dragging, connection, and drag and drop if appropriate
+            processGroup.filter(function (d) {
+                return d.permissions.canWrite && d.permissions.canRead;
+            })
+                .on('mouseover.drop', function (d) {
+                    // Using mouseover/out to workaround chrome issue #122746
+    
+                    // get the target and ensure its not already been marked for drop
+                    var target = d3.select(this);
+                    if (!target.classed('drop')) {
+                        var targetData = target.datum();
+    
+                        // see if there is a selection being dragged
+                        var drag = d3.select('rect.drag-selection');
+                        if (!drag.empty()) {
+                            // filter the current selection by this group
+                          var selection = nfCanvasUtils.getSelection().filter(function (d) {
+                                return targetData.id === d.id;
+                            });
+    
+                            // ensure this group isn't in the selection
+                            if (selection.empty()) {
+                                // mark that we are hovering over a drop area if appropriate
+                                target.classed('drop', function () {
+                                    // get the current selection and ensure its disconnected
+                                  return nfConnection.isDisconnected(nfCanvasUtils.getSelection());
+                                });
+                            }
+                        }
+                    }
+                })
+                .on('mouseout.drop', function (d) {
+                    // mark that we are no longer hovering over a drop area unconditionally
+                    d3.select(this).classed('drop', false);
+                })
+              .call(nfDraggable.activate)
+              .call(nfConnectable.activate);
+        };
+    
+        // attempt of space between component count and icon for process group contents
+        var CONTENTS_SPACER = 10;
+      var CONTENTS_VALUE_SPACER = 5;
+    
+        /**
+         * Updates the process groups in the specified selection.
+         *
+         * @param {selection} updated               The process groups to be updated
+         */
+        var updateProcessGroups = function (updated) {
+            if (updated.empty()) {
+                return;
+            }
+    
+            // process group border authorization
+            updated.select('rect.border')
+                .classed('unauthorized', function (d) {
+                    return d.permissions.canRead === false;
+                });
+    
+            // process group body authorization
+            updated.select('rect.body')
+                .classed('unauthorized', function (d) {
+                    return d.permissions.canRead === false;
+                });
+    
+            updated.each(function (processGroupData) {
+                var processGroup = d3.select(this);
+                var details = processGroup.select('g.process-group-details');
+    
+                // update the component behavior as appropriate
+              nfCanvasUtils.editable(processGroup, nfConnectable, nfDraggable);
+    
+                // if this processor is visible, render everything
+                if (processGroup.classed('visible')) {
+                    if (details.empty()) {
+                        details = processGroup.append('g').attr('class', 'process-group-details');
+    
+                        // -------------------
+                        // contents background
+                        // -------------------
+    
+                        details.append('rect')
+                            .attr({
+                                'x': 0,
+                                'y': 32,
+                                'width': function () {
+                                    return processGroupData.dimensions.width
+                                },
+                                'height': 24,
+                                'fill': '#e3e8eb'
+                            });
+    
+                        // --------
+                        // contents
+                        // --------
+    
+                        // transmitting icon
+                        details.append('text')
+                            .attr({
+                                'x': 10,
+                                'y': 49,
+                                'class': 'process-group-transmitting process-group-contents-icon',
+                                'font-family': 'FontAwesome'
+                            })
+                            .text('\uf140');
+    
+                        // transmitting count
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-transmitting-count process-group-contents-count'
+                            });
+    
+                        // not transmitting icon
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-not-transmitting process-group-contents-icon',
+                                'font-family': 'flowfont'
+                            })
+                            .text('\ue80a');
+    
+                        // not transmitting count
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-not-transmitting-count process-group-contents-count'
+                            });
+    
+                        // running icon
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-running process-group-contents-icon',
+                                'font-family': 'FontAwesome'
+                            })
+                            .text('\uf04b');
+    
+                        // running count
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-running-count process-group-contents-count'
+                            });
+    
+                        // stopped icon
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-stopped process-group-contents-icon',
+                                'font-family': 'FontAwesome'
+                            })
+                            .text('\uf04d');
+    
+                        // stopped count
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-stopped-count process-group-contents-count'
+                            });
+    
+                        // invalid icon
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-invalid process-group-contents-icon',
+                                'font-family': 'FontAwesome'
+                            })
+                            .text('\uf071');
+    
+                        // invalid count
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-invalid-count process-group-contents-count'
+                            });
+    
+                        // disabled icon
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-disabled process-group-contents-icon',
+                                'font-family': 'flowfont'
+                            })
+                            .text('\ue802');
+    
+                        // disabled count
+                        details.append('text')
+                            .attr({
+                                'y': 49,
+                                'class': 'process-group-disabled-count process-group-contents-count'
+                            });
+    
+                        // ----------------
+                        // stats background
+                        // ----------------
+    
+                        // queued
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 66,
+                                'fill': '#f4f6f7'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 84,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // in
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 85,
+                                'fill': '#ffffff'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 103,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // read/write
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 104,
+                                'fill': '#f4f6f7'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 122,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // out
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processGroupData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 123,
+                                'fill': '#ffffff'
+                            });
+    
+                        // -----
+                        // stats
+                        // -----
+    
+                        // stats label container
+                        var processGroupStatsLabel = details.append('g')
+                            .attr({
+                                'transform': 'translate(6, 75)'
+                            });
+    
+                        // queued label
+                        processGroupStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'x': 4,
+                                'y': 5,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-process-group.Queued'));
+    
+                        // in label
+                        processGroupStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'x': 4,
+                                'y': 24,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-process-group.In'));
+    
+                        // read/write label
+                        processGroupStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'x': 4,
+                                'y': 42,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-process-group.ReadWrite'));
+    
+                        // out label
+                        processGroupStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'x': 4,
+                                'y': 60,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-process-group.Out'));
+    
+                        // stats value container
+                        var processGroupStatsValue = details.append('g')
+                            .attr({
+                                'transform': 'translate(95, 75)'
+                            });
+    
+                        // queued value
+                        var queuedText = processGroupStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'x': 4,
+                                'y': 5,
+                                'class': 'process-group-queued stats-value'
+                            });
+    
+                        // queued count
+                        queuedText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // queued size
+                        queuedText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // in value
+                        var inText = processGroupStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'x': 4,
+                                'y': 24,
+                                'class': 'process-group-in stats-value'
+                            });
+    
+                        // in count
+                        inText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // in size
+                        inText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // in
+                        inText.append('tspan')
+                            .attr({
+                                'class': 'ports'
+                            });
+    
+                        // read/write value
+                        processGroupStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'x': 4,
+                                'y': 42,
+                                'class': 'process-group-read-write stats-value'
+                            });
+    
+                        // out value
+                        var outText = processGroupStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'x': 4,
+                                'y': 60,
+                                'class': 'process-group-out stats-value'
+                            });
+    
+                        // out ports
+                        outText.append('tspan')
+                            .attr({
+                                'class': 'ports'
+                            });
+    
+                        // out count
+                        outText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // out size
+                        outText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // stats value container
+                        var processGroupStatsInfo = details.append('g')
+                            .attr({
+                                'transform': 'translate(335, 75)'
+                            });
+    
+                        // in info
+                        processGroupStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'x': 4,
+                                'y': 24,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-process-group.5min'));
+    
+                        // read/write info
+                        processGroupStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'x': 4,
+                                'y': 42,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-process-group.5min'));
+    
+                        // out info
+                        processGroupStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'x': 4,
+                                'y': 60,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-process-group.5min'));
+    
+                        // --------
+                        // comments
+                        // --------
+    
+                        // process group comments
+                        details.append('text')
+                            .attr({
+                                'x': 10,
+                                'y': 160,
+                                'width': 342,
+                                'height': 22,
+                                'class': 'process-group-comments'
+                            });
+    
+                        // -------------------
+                        // active thread count
+                        // -------------------
+    
+                        // active thread count
+                        details.append('text')
+                            .attr({
+                                'class': 'active-thread-count-icon',
+                                'y': 20
+                            })
+                            .text('\ue83f');
+    
+                        // active thread icon
+                        details.append('text')
+                            .attr({
+                                'class': 'active-thread-count',
+                                'y': 20
+                            });
+    
+                        // ---------
+                        // bulletins
+                        // ---------
+    
+                        // bulletin background
+                        details.append('rect')
+                            .attr({
+                                'class': 'bulletin-background',
+                                'x': function () {
+                                    return processGroupData.dimensions.width - 24;
+                                },
+                                'y': 32,
+                                'width': 24,
+                                'height': 24
+                            });
+    
+                        // bulletin icon
+                        details.append('text')
+                            .attr({
+                                'class': 'bulletin-icon',
+                                'x': function () {
+                                    return processGroupData.dimensions.width - 17;
+                                },
+                                'y': 49
+                            })
+                            .text('\uf24a');
+                    }
+    
+                    // update transmitting
+                  var transmitting = details.select('text.process-group-transmitting')
+                      .classed('transmitting', function (d) {
+                          return d.permissions.canRead && d.activeRemotePortCount > 0;
+                      })
+                      .classed('zero', function (d) {
+                          return d.permissions.canRead && d.activeRemotePortCount === 0;
+                      });
+                    var transmittingCount = details.select('text.process-group-transmitting-count')
+                      .attr('x', function () {
+                          var transmittingCountX = parseInt(transmitting.attr('x'), 10);
+                          return transmittingCountX + Math.round(transmitting.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
+                      })
+                        .text(function (d) {
+                            return d.activeRemotePortCount;
+                        });
+    
+                    // update not transmitting
+                    var notTransmitting = details.select('text.process-group-not-transmitting')
+                      .classed('not-transmitting', function (d) {
+                          return d.permissions.canRead && d.inactiveRemotePortCount > 0;
+                      })
+                      .classed('zero', function (d) {
+                          return d.permissions.canRead && d.inactiveRemotePortCount === 0;
+                      })
+                        .attr('x', function () {
+                            var transmittingX = parseInt(transmittingCount.attr('x'), 10);
+                          return transmittingX + Math.round(transmittingCount.node().getComputedTextLength()) + CONTENTS_SPACER;
+                        });
+                    var notTransmittingCount = details.select('text.process-group-not-transmitting-count')
+                        .attr('x', function () {
+                            var notTransmittingCountX = parseInt(notTransmitting.attr('x'), 10);
+                          return notTransmittingCountX + Math.round(notTransmitting.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
+                        })
+                        .text(function (d) {
+                            return d.inactiveRemotePortCount;
+                        });
+    
+                    // update running
+                    var running = details.select('text.process-group-running')
+                      .classed('running', function (d) {
+                          return d.permissions.canRead && d.component.runningCount > 0;
+                      })
+                      .classed('zero', function (d) {
+                          return d.permissions.canRead && d.component.runningCount === 0;
+                      })
+                        .attr('x', function () {
+                            var notTransmittingX = parseInt(notTransmittingCount.attr('x'), 10);
+                          return notTransmittingX + Math.round(notTransmittingCount.node().getComputedTextLength()) + CONTENTS_SPACER;
+                        });
+                    var runningCount = details.select('text.process-group-running-count')
+                        .attr('x', function () {
+                            var runningCountX = parseInt(running.attr('x'), 10);
+                          return runningCountX + Math.round(running.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
+                        })
+                        .text(function (d) {
+                            return d.runningCount;
+                        });
+    
+                    // update stopped
+                    var stopped = details.select('text.process-group-stopped')
+                      .classed('stopped', function (d) {
+                          return d.permissions.canRead && d.component.stoppedCount > 0;
+                      })
+                      .classed('zero', function (d) {
+                          return d.permissions.canRead && d.component.stoppedCount === 0;
+                      })
+                        .attr('x', function () {
+                            var runningX = parseInt(runningCount.attr('x'), 10);
+                          return runningX + Math.round(runningCount.node().getComputedTextLength()) + CONTENTS_SPACER;
+                        });
+                    var stoppedCount = details.select('text.process-group-stopped-count')
+                        .attr('x', function () {
+                            var stoppedCountX = parseInt(stopped.attr('x'), 10);
+                          return stoppedCountX + Math.round(stopped.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
+                        })
+                        .text(function (d) {
+                            return d.stoppedCount;
+                        });
+    
+                    // update invalid
+                    var invalid = details.select('text.process-group-invalid')
+                      .classed('invalid', function (d) {
+                            return d.permissions.canRead && d.component.invalidCount > 0;
+                      })
+                      .classed('zero', function (d) {
+                          return d.permissions.canRead && d.component.invalidCount === 0;
+                      })
+                      .attr('x', function () {
+                          var stoppedX = parseInt(stoppedCount.attr('x'), 10);
+                          return stoppedX + Math.round(stoppedCount.node().getComputedTextLength()) + CONTENTS_SPACER;
+                        });
+                    var invalidCount = details.select('text.process-group-invalid-count')
+                        .attr('x', function () {
+                            var invalidCountX = parseInt(invalid.attr('x'), 10);
+                          return invalidCountX + Math.round(invalid.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
+                        })
+                        .text(function (d) {
+                            return d.invalidCount;
+                        });
+    
+                    // update disabled
+                    var disabled = details.select('text.process-group-disabled')
+                      .classed('disabled', function (d) {
+                          return d.permissions.canRead && d.component.disabledCount > 0;
+                      })
+                      .classed('zero', function (d) {
+                          return d.permissions.canRead && d.component.disabledCount === 0;
+                      })
+                        .attr('x', function () {
+                            var invalidX = parseInt(invalidCount.attr('x'), 10);
+                          return invalidX + Math.round(invalidCount.node().getComputedTextLength()) + CONTENTS_SPACER;
+                        });
+                    details.select('text.process-group-disabled-count')
+                        .attr('x', function () {
+                            var disabledCountX = parseInt(disabled.attr('x'), 10);
+                          return disabledCountX + Math.round(disabled.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
+                        })
+                        .text(function (d) {
+                            return d.disabledCount;
+                        });
+    
+                    if (processGroupData.permissions.canRead) {
+                        // update the process group comments
+                        details.select('text.process-group-comments')
+                            .each(function (d) {
+                                var processGroupComments = d3.select(this);
+    
+                                // reset the process group name to handle any previous state
+                                processGroupComments.text(null).selectAll('tspan, title').remove();
+    
+                                // apply ellipsis to the port name as necessary
+                              nfCanvasUtils.ellipsis(processGroupComments, getProcessGroupComments(d));
+                            }).classed('unset', function (d) {
+                          return nfCommon.isBlank(d.component.comments);
+                        }).append('title').text(function (d) {
+                            return getProcessGroupComments(d);
+                        });
+    
+                        // update the process group name
+                        processGroup.select('text.process-group-name')
+                            .each(function (d) {
+                                var processGroupName = d3.select(this);
+    
+                                // reset the process group name to handle any previous state
+                                processGroupName.text(null).selectAll('title').remove();
+    
+                                // apply ellipsis to the process group name as necessary
+                              nfCanvasUtils.ellipsis(processGroupName, d.component.name);
+                            }).append('title').text(function (d) {
+                            return d.component.name;
+                        });
+                    } else {
+                        // clear the process group comments
+                        details.select('text.process-group-comments').text(null);
+    
+                        // clear the process group name
+                        processGroup.select('text.process-group-name').text(null);
+                    }
+    
+                    // populate the stats
+                    processGroup.call(updateProcessGroupStatus);
+                } else {
+                    if (processGroupData.permissions.canRead) {
+                        // update the process group name
+                        processGroup.select('text.process-group-name')
+                            .text(function (d) {
+                                var name = d.component.name;
+                                if (name.length > PREVIEW_NAME_LENGTH) {
+                                    return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
+                                } else {
+                                    return name;
+                                }
+                            });
+                  } else {
+                      // clear the process group name
+                      processGroup.select('text.process-group-name').text(null);
+                    }
+    
+                    // remove the tooltips
+                    processGroup.call(removeTooltips);
+    
+                    // remove the details if necessary
+                    if (!details.empty()) {
+                        details.remove();
+                    }
+                }
+            });
+        };
+    
+        /**
+         * Updates the process group status.
+         *
+         * @param {selection} updated           The process groups to be updated
+         */
+        var updateProcessGroupStatus = function (updated) {
+            if (updated.empty()) {
+                return;
+            }
+    
+            // queued count value
+            updated.select('text.process-group-queued tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.queued, ' ');
+                });
+    
+            // queued size value
+            updated.select('text.process-group-queued tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.queued, ' ');
+                });
+    
+            // in count value
+            updated.select('text.process-group-in tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.input, ' ');
+                });
+    
+            // in size value
+            updated.select('text.process-group-in tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.input, ' ');
+                });
+    
+            // in ports value
+            updated.select('text.process-group-in tspan.ports')
+                .text(function (d) {
+                    return ' ' + String.fromCharCode(8594) + ' ' + d.inputPortCount;
+                });
+    
+            // read/write value
+            updated.select('text.process-group-read-write')
+                .text(function (d) {
+                    return d.status.aggregateSnapshot.read + ' / ' + d.status.aggregateSnapshot.written;
+                });
+    
+            // out ports value
+            updated.select('text.process-group-out tspan.ports')
+                .text(function (d) {
+                    return d.outputPortCount + ' ' + String.fromCharCode(8594) + ' ';
+                });
+    
+            // out count value
+            updated.select('text.process-group-out tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.output, ' ');
+                });
+    
+            // out size value
+            updated.select('text.process-group-out tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.output, ' ');
+                });
+    
+            updated.each(function (d) {
+                var processGroup = d3.select(this);
+                var offset = 0;
+    
+                // -------------------
+                // active thread count
+                // -------------------
+    
+              nfCanvasUtils.activeThreadCount(processGroup, d, function (off) {
+                    offset = off;
+                });
+    
+                // ---------
+                // bulletins
+                // ---------
+    
+                processGroup.select('rect.bulletin-background').classed('has-bulletins', function () {
+                  return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
+                });
+    
+              nfCanvasUtils.bulletins(processGroup, d, function () {
+                    return d3.select('#process-group-tooltips');
+                }, offset);
+            });
+        };
+    
+        /**
+         * Removes the process groups in the specified selection.
+         *
+         * @param {selection} removed               The process groups to be removed
+         */
+        var removeProcessGroups = function (removed) {
+            if (removed.empty()) {
+                return;
+            }
+    
+            removed.call(removeTooltips).remove();
+        };
+    
+        /**
+         * Removes the tooltips for the process groups in the specified selection.
+         *
+         * @param {selection} removed
+         */
+        var removeTooltips = function (removed) {
+            removed.each(function (d) {
+                // remove any associated tooltips
+                $('#bulletin-tip-' + d.id).remove();
+            });
+        };
+    
+      var nfProcessGroup = {
+            /**
+             * Initializes of the Process Group handler.
+           *
+           * @param nfConnectableRef   The nfConnectable module.
+           * @param nfDraggableRef   The nfDraggable module.
+           * @param nfSelectableRef   The nfSelectable module.
+           * @param nfContextMenuRef   The nfContextMenu module.
+             */
+          init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
+              nfConnectable = nfConnectableRef;
+              nfDraggable = nfDraggableRef;
+              nfSelectable = nfSelectableRef;
+              nfContextMenu = nfContextMenuRef;
+  
+                processGroupMap = d3.map();
+              removedCache = d3.map();
+              addedCache = d3.map();
+    
+                // create the process group container
+                processGroupContainer = d3.select('#canvas').append('g')
+                    .attr({
+                        'pointer-events': 'all',
+                        'class': 'process-groups'
+                    });
+            },
+    
+            /**
+             * Adds the specified process group entity.
+             *
+             * @param processGroupEntities       The process group
+             * @param options           Configuration options
+             */
+            add: function (processGroupEntities, options) {
+                var selectAll = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                }
+    
+              // get the current time
+              var now = new Date().getTime();
+    
+                var add = function (processGroupEntity) {
+                  addedCache.set(processGroupEntity.id, now);
+  
+                    // add the process group
+                    processGroupMap.set(processGroupEntity.id, $.extend({
+                        type: 'ProcessGroup',
+                        dimensions: dimensions
+                    }, processGroupEntity));
+                };
+    
+                // determine how to handle the specified process groups
+                if ($.isArray(processGroupEntities)) {
+                    $.each(processGroupEntities, function (_, processGroupEntity) {
+                        add(processGroupEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(processGroupEntities)) {
+                    add(processGroupEntities);
+                }
+    
+                // apply the selection and handle new process groups
+                var selection = select();
+                selection.enter().call(renderProcessGroups, selectAll);
+                selection.call(updateProcessGroups);
+            },
+    
+            /**
+             * Populates the graph with the specified process groups.
+             *
+             * @argument {object | array} processGroupEntities                    The process groups to add
+             * @argument {object} options                Configuration options
+             */
+            set: function (processGroupEntities, options) {
+                var selectAll = false;
+                var transition = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                  transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+                }
+    
+              var set = function (proposedProcessGroupEntity) {
+                  var currentProcessGroupEntity = processGroupMap.get(proposedProcessGroupEntity.id);
+  
+                  // set the process group if appropriate due to revision and wasn't previously removed
+                  if (nfClient.isNewerRevision(currentProcessGroupEntity, proposedProcessGroupEntity) && !removedCache.has(proposedProcessGroupEntity.id)) {
+                      processGroupMap.set(proposedProcessGroupEntity.id, $.extend({
+                            type: 'ProcessGroup',
+                            dimensions: dimensions
+                      }, proposedProcessGroupEntity));
+                  }
+                };
+    
+                // determine how to handle the specified process groups
+                if ($.isArray(processGroupEntities)) {
+                    $.each(processGroupMap.keys(), function (_, key) {
+                      var currentProcessGroupEntity = processGroupMap.get(key);
+                      var isPresent = $.grep(processGroupEntities, function (proposedProcessGroupEntity) {
+                          return proposedProcessGroupEntity.id === currentProcessGroupEntity.id;
+                      });
+  
+                      // if the current process group is not present and was not recently added, remove it
+                      if (isPresent.length === 0 && !addedCache.has(key)) {
+                            processGroupMap.remove(key);
+                      }
+                    });
+                    $.each(processGroupEntities, function (_, processGroupEntity) {
+                        set(processGroupEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(processGroupEntities)) {
+                    set(processGroupEntities);
+                }
+    
+                // apply the selection and handle all new process group
+                var selection = select();
+                selection.enter().call(renderProcessGroups, selectAll);
+              selection.call(updateProcessGroups).call(nfCanvasUtils.position, transition);
+                selection.exit().call(removeProcessGroups);
+            },
+    
+            /**
+             * If the process group id is specified it is returned. If no process group id
+             * specified, all process groups are returned.
+             *
+             * @param {string} id
+             */
+            get: function (id) {
+              if (nfCommon.isUndefined(id)) {
+                    return processGroupMap.values();
+                } else {
+                    return processGroupMap.get(id);
+                }
+            },
+    
+            /**
+             * If the process group id is specified it is refresh according to the current
+             * state. If no process group id is specified, all process groups are refreshed.
+             *
+             * @param {string} id      Optional
+             */
+            refresh: function (id) {
+              if (nfCommon.isDefinedAndNotNull(id)) {
+                    d3.select('#id-' + id).call(updateProcessGroups);
+                } else {
+                    d3.selectAll('g.process-group').call(updateProcessGroups);
+                }
+            },
+    
+            /**
+             * Refreshes the components necessary after a pan event.
+             */
+            pan: function () {
+                d3.selectAll('g.process-group.entering, g.process-group.leaving').call(updateProcessGroups);
+            },
+    
+            /**
+             * Reloads the process group state from the server and refreshes the UI.
+             * If the process group is currently unknown, this function reloads the canvas.
+             *
+             * @param {string} id The process group id
+             */
+            reload: function (id) {
+                if (processGroupMap.has(id)) {
+                    var processGroupEntity = processGroupMap.get(id);
+                    return $.ajax({
+                        type: 'GET',
+                        url: processGroupEntity.uri,
+                        dataType: 'json'
+                    }).done(function (response) {
+                      nfProcessGroup.set(response);
+                    });
+                }
+            },
+    
+            /**
+             * Positions the component.
+             *
+             * @param {string} id   The id
+             */
+            position: function (id) {
+              d3.select('#id-' + id).call(nfCanvasUtils.position);
+            },
+    
+            /**
+             * Removes the specified process group.
+             *
+           * @param {string} processGroupIds      The process group id(s)
+             */
+          remove: function (processGroupIds) {
+              var now = new Date().getTime();
+  
+              if ($.isArray(processGroupIds)) {
+                  $.each(processGroupIds, function (_, processGroupId) {
+                      removedCache.set(processGroupId, now);
+                      processGroupMap.remove(processGroupId);
+                    });
+                } else {
+                  removedCache.set(processGroupIds, now);
+                  processGroupMap.remove(processGroupIds);
+                }
+    
+                // apply the selection and handle all removed process groups
+                select().exit().call(removeProcessGroups);
+            },
+    
+            /**
+             * Removes all process groups.
+             */
+            removeAll: function () {
+              nfProcessGroup.remove(processGroupMap.keys());
+          },
+  
+          /**
+           * Expires the caches up to the specified timestamp.
+           *
+           * @param timestamp
+           */
+          expireCaches: function (timestamp) {
+              var expire = function (cache) {
+                  cache.forEach(function (id, entryTimestamp) {
+                      if (timestamp > entryTimestamp) {
+                          cache.remove(id);
+                      }
+                  });
+              };
+  
+              expire(addedCache);
+              expire(removedCache);
+          },
+  
+          /**
+           * Enters the specified group.
+           *
+           * @param {string} groupId
+           */
+          enterGroup: function (groupId) {
+  
+              // hide the context menu
+              nfContextMenu.hide();
+  
+              // set the new group id
+              nfCanvasUtils.setGroupId(groupId);
+  
+              // reload the graph
+              return nfCanvasUtils.reload().done(function () {
+  
+                  // attempt to restore the view
+                  var viewRestored = nfCanvasUtils.restoreUserView();
+  
+                  // if the view was not restore attempt to fit
+                  if (viewRestored === false) {
+                      nfCanvasUtils.fitCanvasView();
+  
+                      // refresh the canvas
+                      nfCanvasUtils.refreshCanvasView({
+                          transition: true
+                      });
+                  }
+              }).fail(function () {
+                  nfDialog.showOkDialog({
+                      headerText: 'Process Group',
+                      dialogContent: 'Unable to enter the selected group.'
+                  });
+              });
+          }
+      };
+  
+      return nfProcessGroup;
+  }));
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
new file mode 100644
index 000000000000..d394236eb23a
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
@@ -0,0 +1,908 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.ng.Bridge',
+                  'nf.Processor',
+                  'nf.ClusterSummary',
+                  'nf.CustomUi',
+                  'nf.UniversalCapture',
+                  'nf.Connection'],
+              function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfProcessor, nfClusterSummary, nfCustomUi, nfUniversalCapture, nfConnection) {
+                  return (nf.ProcessorConfiguration = factory($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfProcessor, nfClusterSummary, nfCustomUi, nfUniversalCapture, nfConnection));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ProcessorConfiguration =
+              factory(require('jquery'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ng.Bridge'),
+                  require('nf.Processor'),
+                  require('nf.ClusterSummary'),
+                  require('nf.CustomUi'),
+                  require('nf.UniversalCapture'),
+                  require('nf.Connection')));
+      } else {
+          nf.ProcessorConfiguration = factory(root.$,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.ng.Bridge,
+              root.nf.Processor,
+              root.nf.ClusterSummary,
+              root.nf.CustomUi,
+              root.nf.UniversalCapture,
+              root.nf.Connection);
+      }
+  }(this, function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfProcessor, nfClusterSummary, nfCustomUi, nfUniversalCapture, nfConnection) {
+      'use strict';
+    
+        // possible values for a processor's run duration (in millis)
+        var RUN_DURATION_VALUES = [0, 25, 50, 100, 250, 500, 1000, 2000];
+    
+        /**
+         * Gets the available scheduling strategies based on the specified processor.
+         *
+       * @param {object} processor
+         * @returns {Array}
+         */
+        var getSchedulingStrategies = function (processor) {
+            var strategies = [{
+              text: 'Timer driven',
+                value: 'TIMER_DRIVEN',
+              description: nf._.msg('nf-processor-configuration.Message1')
+            }];
+    
+            // conditionally support event driven based on processor
+            if (processor.supportsEventDriven === true) {
+                strategies.push({
+                  text: nf._.msg('nf-processor-configuration.EventDriven'),
+                    value: 'EVENT_DRIVEN',
+                  description: nf._.msg('nf-processor-configuration.Message2')
+                });
+            } else if (processor.config['schedulingStrategy'] === 'EVENT_DRIVEN') {
+                // the processor was once configured for event driven but no longer supports it
+                strategies.push({
+                  text: nf._.msg('nf-processor-configuration.EventDriven'),
+                    value: 'EVENT_DRIVEN',
+                  description: nf._.msg('nf-processor-configuration.Message2'),
+                    disabled: true
+                });
+            }
+    
+            // conditionally support event driven
+          if (processor.config['schedulingStrategy'] === 'PRIMARY_NODE_ONLY') {
+                strategies.push({
+                  text: nf._.msg('nf-processor-configuration.OnPrimaryNode'),
+                    value: 'PRIMARY_NODE_ONLY',
+                  description: nf._.msg('nf-processor-configuration.Message3'),
+                    disabled: true
+                });
+            }
+    
+            // add an option for cron driven
+            strategies.push({
+              text: nf._.msg('nf-processor-configuration.CronDriven'),
+                value: 'CRON_DRIVEN',
+              description: nf._.msg('nf-processor-configuration.Message5')
+            });
+    
+            return strategies;
+        };
+    
+        /**
+       * Gets the available execution nodes based on the specified processor.
+       *
+       * @param {object} processor
+       * @returns {Array}
+       */
+      var getExecutionNodeOptions = function (processor) {
+          return [{
+              text: 'All nodes',
+              value: 'ALL',
+              description: 'Processor will be scheduled to run on all nodes'
+          }, {
+              text: 'Primary node',
+              value: 'PRIMARY',
+              description: 'Processor will be scheduled to run only on the primary node',
+              disabled: !nfClusterSummary.isClustered() && processor.config['executionNode'] === 'PRIMARY'
+          }];
+      };
+  
+      /**
+         * Handle any expected processor configuration errors.
+         *
+         * @argument {object} xhr       The XmlHttpRequest
+         * @argument {string} status    The status of the request
+         * @argument {string} error     The error
+         */
+        var handleProcessorConfigurationError = function (xhr, status, error) {
+            if (xhr.status === 400) {
+                var errors = xhr.responseText.split('\n');
+    
+                var content;
+                if (errors.length === 1) {
+                    content = $('<span></span>').text(errors[0]);
+                } else {
+                  content = nfCommon.formatUnorderedList(errors);
+                }
+    
+              nfDialog.showOkDialog({
+                    dialogContent: content,
+                  headerText: nf._.msg('nf-processor-configuration.ConfigureProcessor')
+                });
+            } else {
+              nfErrorHandler.handleAjaxError(xhr, status, error);
+            }
+        };
+    
+        /**
+         * Creates an option for the specified relationship name.
+         *
+         * @argument {object} relationship      The relationship
+         */
+        var createRelationshipOption = function (relationship) {
+          var relationshipLabel = $('<div class="relationship-name nf-checkbox-label ellipsis"></div>').text(relationship.name);
+            var relationshipValue = $('<span class="relationship-name-value hidden"></span>').text(relationship.name);
+    
+            // build the relationship checkbox element
+            var relationshipCheckbox = $('<div class="processor-relationship nf-checkbox"></div>');
+            if (relationship.autoTerminate === true) {
+                relationshipCheckbox.addClass('checkbox-checked');
+            } else {
+                relationshipCheckbox.addClass('checkbox-unchecked');
+            }
+    
+            // build the relationship container element
+            var relationshipContainerElement = $('<div class="processor-relationship-container"></div>').append(relationshipCheckbox).append(relationshipLabel).append(relationshipValue).appendTo('#auto-terminate-relationship-names');
+          if (!nfCommon.isBlank(relationship.description)) {
+                var relationshipDescription = $('<div class="relationship-description"></div>').text(relationship.description);
+                relationshipContainerElement.append(relationshipDescription);
+            }
+    
+            return relationshipContainerElement;
+        };
+    
+        /**
+         * Determines whether the user has made any changes to the processor configuration
+         * that needs to be saved.
+         */
+        var isSaveRequired = function () {
+            var details = $('#processor-configuration').data('processorDetails');
+    
+            // determine if any processor settings have changed
+    
+            // consider auto terminated relationships
+            var autoTerminatedChanged = false;
+            var autoTerminated = marshalRelationships();
+            $.each(details.relationships, function (i, relationship) {
+                if (relationship.autoTerminate === true) {
+                    // relationship was auto terminated but is no longer selected
+                    if ($.inArray(relationship.name, autoTerminated) === -1) {
+                        autoTerminatedChanged = true;
+                        return false;
+                    }
+                } else if (relationship.autoTerminate === false) {
+                    // relationship was not auto terminated but is now selected
+                    if ($.inArray(relationship.name, autoTerminated) >= 0) {
+                        autoTerminatedChanged = true;
+                        return false;
+                    }
+                }
+            });
+            if (autoTerminatedChanged) {
+                return true;
+            }
+    
+            // consider the scheduling strategy
+            var schedulingStrategy = $('#scheduling-strategy-combo').combo('getSelectedOption').value;
+            if (schedulingStrategy !== (details.config['schedulingStrategy'] + '')) {
+                return true;
+            }
+    
+            // only consider the concurrent tasks if appropriate
+            if (details.supportsParallelProcessing === true) {
+                // get the appropriate concurrent tasks field
+                var concurrentTasks;
+                if (schedulingStrategy === 'EVENT_DRIVEN') {
+                    concurrentTasks = $('#event-driven-concurrently-schedulable-tasks');
+                } else if (schedulingStrategy === 'CRON_DRIVEN') {
+                    concurrentTasks = $('#cron-driven-concurrently-schedulable-tasks');
+                } else {
+                    concurrentTasks = $('#timer-driven-concurrently-schedulable-tasks');
+                }
+    
+                // check the concurrent tasks
+                if (concurrentTasks.val() !== (details.config['concurrentlySchedulableTaskCount'] + '')) {
+                    return true;
+                }
+            }
+    
+            // get the appropriate scheduling period field
+            var schedulingPeriod;
+            if (schedulingStrategy === 'CRON_DRIVEN') {
+                schedulingPeriod = $('#cron-driven-scheduling-period');
+            } else if (schedulingStrategy !== 'EVENT_DRIVEN') {
+                schedulingPeriod = $('#timer-driven-scheduling-period');
+            }
+    
+            // check the scheduling period
+          if (nfCommon.isDefinedAndNotNull(schedulingPeriod) && schedulingPeriod.val() !== (details.config['schedulingPeriod'] + '')) {
+              return true;
+          }
+  
+          if ($('#execution-node-combo').combo('getSelectedOption').value !== (details.config['executionNode'] + '')) {
+                return true;
+            }
+            if ($('#processor-name').val() !== details['name']) {
+                return true;
+            }
+            if ($('#processor-enabled').hasClass('checkbox-checked') && details['state'] === 'DISABLED') {
+                return true;
+            } else if ($('#processor-enabled').hasClass('checkbox-unchecked') && (details['state'] === 'RUNNING' || details['state'] === 'STOPPED')) {
+                return true;
+            }
+            if ($('#penalty-duration').val() !== (details.config['penaltyDuration'] + '')) {
+                return true;
+            }
+            if ($('#yield-duration').val() !== (details.config['yieldDuration'] + '')) {
+                return true;
+            }
+            if ($('#bulletin-level-combo').combo('getSelectedOption').value !== (details.config['bulletinLevel'] + '')) {
+                return true;
+            }
+            if ($('#processor-comments').val() !== details.config['comments']) {
+                return true;
+            }
+    
+            // defer to the property and relationship grids
+            return $('#processor-properties').propertytable('isSaveRequired');
+        };
+    
+        /**
+         * Marshals the data that will be used to update the processor's configuration.
+       *
+       * @param {object} processor
+         */
+      var marshalDetails = function (processor) {
+            // create the config dto
+            var processorConfigDto = {};
+    
+            // get the scheduling strategy
+            var schedulingStrategy = $('#scheduling-strategy-combo').combo('getSelectedOption').value;
+    
+            // get the appropriate concurrent tasks field
+            var concurrentTasks;
+            if (schedulingStrategy === 'EVENT_DRIVEN') {
+                concurrentTasks = $('#event-driven-concurrently-schedulable-tasks');
+            } else if (schedulingStrategy === 'CRON_DRIVEN') {
+                concurrentTasks = $('#cron-driven-concurrently-schedulable-tasks');
+            } else {
+                concurrentTasks = $('#timer-driven-concurrently-schedulable-tasks');
+            }
+    
+            // get the concurrent tasks if appropriate
+            if (!concurrentTasks.is(':disabled')) {
+                processorConfigDto['concurrentlySchedulableTaskCount'] = concurrentTasks.val();
+            }
+    
+            // get the appropriate scheduling period field
+            var schedulingPeriod;
+            if (schedulingStrategy === 'CRON_DRIVEN') {
+                schedulingPeriod = $('#cron-driven-scheduling-period');
+            } else if (schedulingStrategy !== 'EVENT_DRIVEN') {
+                schedulingPeriod = $('#timer-driven-scheduling-period');
+            }
+    
+            // get the scheduling period if appropriate
+          if (nfCommon.isDefinedAndNotNull(schedulingPeriod)) {
+                processorConfigDto['schedulingPeriod'] = schedulingPeriod.val();
+            }
+    
+          processorConfigDto['executionNode'] = $('#execution-node-combo').combo('getSelectedOption').value;
+            processorConfigDto['penaltyDuration'] = $('#penalty-duration').val();
+            processorConfigDto['yieldDuration'] = $('#yield-duration').val();
+            processorConfigDto['bulletinLevel'] = $('#bulletin-level-combo').combo('getSelectedOption').value;
+            processorConfigDto['schedulingStrategy'] = schedulingStrategy;
+            processorConfigDto['comments'] = $('#processor-comments').val();
+    
+            // run duration
+          if (processor.supportsBatching === true) {
+                var runDurationIndex = $('#run-duration-slider').slider('value');
+                processorConfigDto['runDurationMillis'] = RUN_DURATION_VALUES[runDurationIndex];
+            }
+    
+            // relationships
+            processorConfigDto['autoTerminatedRelationships'] = marshalRelationships();
+    
+            // properties
+            var properties = $('#processor-properties').propertytable('marshalProperties');
+    
+            // set the properties
+            if ($.isEmptyObject(properties) === false) {
+                processorConfigDto['properties'] = properties;
+            }
+    
+            // create the processor dto
+            var processorDto = {};
+            processorDto['id'] = $('#processor-id').text();
+            processorDto['name'] = $('#processor-name').val();
+            processorDto['config'] = processorConfigDto;
+    
+            // mark the processor disabled if appropriate
+            if ($('#processor-enabled').hasClass('checkbox-unchecked')) {
+                processorDto['state'] = 'DISABLED';
+            } else if ($('#processor-enabled').hasClass('checkbox-checked')) {
+                processorDto['state'] = 'STOPPED';
+            }
+    
+            // create the processor entity
+            var processorEntity = {};
+            processorEntity['component'] = processorDto;
+    
+            // return the marshaled details
+            return processorEntity;
+        };
+    
+        /**
+         * Marshals the relationships that will be auto terminated.
+         **/
+        var marshalRelationships = function () {
+            // get all available relationships
+            var availableRelationships = $('#auto-terminate-relationship-names');
+            var selectedRelationships = [];
+    
+            // go through each relationship to determine which are selected
+            $.each(availableRelationships.children(), function (i, relationshipElement) {
+                var relationship = $(relationshipElement);
+    
+                // get each relationship and its corresponding checkbox
+                var relationshipCheck = relationship.children('div.processor-relationship');
+    
+                // see if this relationship has been selected
+                if (relationshipCheck.hasClass('checkbox-checked')) {
+                    selectedRelationships.push(relationship.children('span.relationship-name-value').text());
+                }
+            });
+    
+            return selectedRelationships;
+        };
+    
+        /**
+         * Validates the specified details.
+         *
+         * @argument {object} details       The details to validate
+         */
+        var validateDetails = function (details) {
+            var errors = [];
+            var processor = details['component'];
+            var config = processor['config'];
+    
+            // ensure numeric fields are specified correctly
+          if (nfCommon.isDefinedAndNotNull(config['concurrentlySchedulableTaskCount']) && !$.isNumeric(config['concurrentlySchedulableTaskCount'])) {
+              errors.push(nf._.msg('nf-processor-configuration.Error1'));
+          }
+          if (nfCommon.isDefinedAndNotNull(config['schedulingPeriod']) && nfCommon.isBlank(config['schedulingPeriod'])) {
+              errors.push(nf._.msg('nf-processor-configuration.Error2'));
+          }
+          if (nfCommon.isBlank(config['penaltyDuration'])) {
+              errors.push(nf._.msg('nf-processor-configuration.Error3'));
+          }
+          if (nfCommon.isBlank(config['yieldDuration'])) {
+              errors.push(nf._.msg('nf-processor-configuration.Error4'));
+            }
+    
+            if (errors.length > 0) {
+              nfDialog.showOkDialog({
+                  dialogContent: nfCommon.formatUnorderedList(errors),
+                  headerText: nf._.msg('nf-processor-configuration.ConfigureProcessor')
+                });
+                return false;
+            } else {
+                return true;
+            }
+        };
+    
+        /**
+         * Reloads the outgoing connections for the specified processor.
+         *
+         * @param {object} processor
+         */
+        var reloadProcessorConnections = function (processor) {
+          var connections = nfConnection.getComponentConnections(processor.id);
+            $.each(connections, function (_, connection) {
+                if (connection.permissions.canRead) {
+                    if (connection.sourceId === processor.id) {
+                      nfConnection.reload(connection.id);
+                    }
+                }
+            });
+        };
+    
+        /**
+         * Goes to a service configuration from the property table.
+         */
+        var goToServiceFromProperty = function () {
+            return $.Deferred(function (deferred) {
+                // close all fields currently being edited
+                $('#processor-properties').propertytable('saveRow');
+    
+                // determine if changes have been made
+                if (isSaveRequired()) {
+                    // see if those changes should be saved
+                  nfDialog.showYesNoDialog({
+                      headerText: nf._.msg('nf-processor-configuration.ConfigureProcessor'),
+                      dialogContent: nf._.msg('nf-processor-configuration.Message6'),
+                        noHandler: function () {
+                            deferred.resolve();
+                        },
+                        yesHandler: function () {
+                            var processor = $('#processor-configuration').data('processorDetails');
+                            saveProcessor(processor).done(function () {
+                                deferred.resolve();
+                            }).fail(function () {
+                                deferred.reject();
+                            });
+                        }
+                    });
+                } else {
+                    deferred.resolve();
+                }
+            }).promise();
+        };
+    
+        /**
+         *
+         * @param {type} processor
+         * @returns {undefined}
+         */
+        var saveProcessor = function (processor) {
+            // marshal the settings and properties and update the processor
+          var updatedProcessor = marshalDetails(processor);
+    
+            // ensure details are valid as far as we can tell
+            if (validateDetails(updatedProcessor)) {
+                // set the revision
+              var d = nfProcessor.get(processor.id);
+              updatedProcessor['revision'] = nfClient.getRevision(d);
+    
+                // update the selected component
+                return $.ajax({
+                    type: 'PUT',
+                    data: JSON.stringify(updatedProcessor),
+                    url: d.uri,
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // set the new processor state based on the response
+                  nfProcessor.set(response);
+                }).fail(handleProcessorConfigurationError);
+            } else {
+                return $.Deferred(function (deferred) {
+                    deferred.reject();
+                }).promise();
+            }
+        };
+    
+        return {
+            /**
+             * Initializes the processor properties tab.
+             */
+            init: function () {
+                // initialize the properties tabs
+                $('#processor-configuration-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                      name: nf._.msg('nf-processor-configuration.Settings'),
+                        tabContentId: 'processor-standard-settings-tab-content'
+                    }, {
+                      name: nf._.msg('nf-processor-configuration.Scheduling'),
+                        tabContentId: 'processor-scheduling-tab-content'
+                    }, {
+                      name: nf._.msg('nf-processor-configuration.Properties'),
+                        tabContentId: 'processor-properties-tab-content'
+                    }, {
+                      name: nf._.msg('nf-processor-configuration.Comments'),
+                        tabContentId: 'processor-comments-tab-content'
+                    }],
+                    select: function () {
+                        // remove all property detail dialogs
+                      nfUniversalCapture.removeAllPropertyDetailDialogs();
+    
+                        // update the processor property table size in case this is the first time its rendered
+                      if ($(this).text() === nf._.msg('nf-processor-configuration.Properties')) {
+                            $('#processor-properties').propertytable('resetTableSize');
+                        }
+    
+                        // close all fields currently being edited
+                        $('#processor-properties').propertytable('saveRow');
+    
+                        // show the border around the processor relationships if necessary
+                        var processorRelationships = $('#auto-terminate-relationship-names');
+                      if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > Math.round(processorRelationships.innerHeight())) {
+                            processorRelationships.css('border-width', '1px');
+                        }
+                    }
+                });
+    
+                // initialize the processor configuration dialog
+                $('#processor-configuration').modal({
+                    scrollableContentStyle: 'scrollable',
+                  headerText: nf._.msg('nf-processor-configuration.ConfigureProcessor'),
+                    handler: {
+                        close: function () {
+                            // empty the relationship list
+                            $('#auto-terminate-relationship-names').css('border-width', '0').empty();
+    
+                            // cancel any active edits and clear the table
+                            $('#processor-properties').propertytable('cancelEdit').propertytable('clear');
+    
+                            // removed the cached processor details
+                            $('#processor-configuration').removeData('processorDetails');
+                        },
+                        open: function () {
+                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                        }
+                    }
+                });
+    
+                // initialize the bulletin combo
+                $('#bulletin-level-combo').combo({
+                    options: [{
+                      text: nf._.msg('nf-processor-configuration.Debug'),
+                        value: 'DEBUG'
+                    }, {
+                      text: nf._.msg('nf-processor-configuration.Info'),
+                        value: 'INFO'
+                    }, {
+                      text: nf._.msg('nf-processor-configuration.Warn'),
+                        value: 'WARN'
+                    }, {
+                      text: nf._.msg('nf-processor-configuration.Error'),
+                        value: 'ERROR'
+                    }]
+                });
+    
+                // initialize the run duration slider
+                $('#run-duration-slider').slider({
+                    min: 0,
+                    max: RUN_DURATION_VALUES.length - 1,
+                    change: function (event, ui) {
+                        var processor = $('#processor-configuration').data('processorDetails');
+                        if (ui.value > 0 && (processor.inputRequirement === 'INPUT_FORBIDDEN' || processor.inputRequirement === 'INPUT_ALLOWED')) {
+                            $('#run-duration-data-loss').show();
+                        } else {
+                            $('#run-duration-data-loss').hide();
+                        }
+                    }
+                });
+    
+                // 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');
+                      var d = nfProcessor.get(processor.id);
+                        return $.ajax({
+                            type: 'GET',
+                            url: d.uri + '/descriptors',
+                            data: {
+                                propertyName: propertyName
+                            },
+                            dataType: 'json'
+                      }).fail(nfErrorHandler.handleAjaxError);
+                    },
+                    goToServiceDeferred: goToServiceFromProperty
+                });
+            },
+    
+            /**
+             * Shows the configuration dialog for the specified processor.
+             *
+             * @argument {selection} selection      The selection
+             */
+            showConfiguration: function (selection) {
+              if (nfCanvasUtils.isProcessor(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // get the processor details
+                    var processor = selectionData.component;
+    
+                    var requests = [];
+    
+                    // reload the processor in case an property descriptors have updated
+                  requests.push(nfProcessor.reload(processor.id));
+    
+                    // get the processor history
+                    requests.push($.ajax({
+                        type: 'GET',
+                        url: '../nifi-api/flow/history/components/' + encodeURIComponent(processor.id),
+                        dataType: 'json'
+                    }));
+    
+                    // once everything is loaded, show the dialog
+                    $.when.apply(window, requests).done(function (processorResult, historyResult) {
+                        // get the updated processor'
+                        var processorResponse = processorResult[0];
+                        processor = processorResponse.component;
+    
+                        // get the processor history
+                        var processorHistory = historyResult[0].componentHistory;
+    
+                        // record the processor details
+                        $('#processor-configuration').data('processorDetails', processor);
+    
+                        // determine if the enabled checkbox is checked or not
+                        var processorEnableStyle = 'checkbox-checked';
+                        if (processor['state'] === 'DISABLED') {
+                            processorEnableStyle = 'checkbox-unchecked';
+                        }
+    
+                        // populate the processor settings
+                        $('#processor-id').text(processor['id']);
+                      $('#processor-type').text(nfCommon.substringAfterLast(processor['type'], '.'));
+                        $('#processor-name').val(processor['name']);
+                        $('#processor-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(processorEnableStyle);
+                        $('#penalty-duration').val(processor.config['penaltyDuration']);
+                        $('#yield-duration').val(processor.config['yieldDuration']);
+                        $('#processor-comments').val(processor.config['comments']);
+    
+                        // set the run duration if applicable
+                        if (processor.supportsBatching === true) {
+                            $('#run-duration-setting-container').show();
+    
+                            // set the run duration slider value
+                            var runDuration = RUN_DURATION_VALUES.indexOf(processor.config['runDurationMillis']);
+                            $('#run-duration-slider').slider('value', runDuration);
+                        } else {
+                            $('#run-duration-setting-container').hide();
+                        }
+    
+                        // select the appropriate bulletin level
+                        $('#bulletin-level-combo').combo('setSelectedOption', {
+                            value: processor.config['bulletinLevel']
+                        });
+    
+                      var schedulingStrategy = processor.config['schedulingStrategy'];
+  
+                        // initialize the scheduling strategy
+                        $('#scheduling-strategy-combo').combo({
+                            options: getSchedulingStrategies(processor),
+                            selectedOption: {
+                              value: schedulingStrategy
+                            },
+                            select: function (selectedOption) {
+                                // show the appropriate panel
+                                if (selectedOption.value === 'EVENT_DRIVEN') {
+                                    $('#event-driven-warning').show();
+    
+                                    $('#timer-driven-options').hide();
+                                    $('#event-driven-options').show();
+                                    $('#cron-driven-options').hide();
+                                } else {
+                                    $('#event-driven-warning').hide();
+    
+                                    if (selectedOption.value === 'CRON_DRIVEN') {
+                                        $('#timer-driven-options').hide();
+                                        $('#event-driven-options').hide();
+                                        $('#cron-driven-options').show();
+                                    } else {
+                                        $('#timer-driven-options').show();
+                                        $('#event-driven-options').hide();
+                                        $('#cron-driven-options').hide();
+                                    }
+                                }
+                            }
+                        });
+    
+                      var executionNode = processor.config['executionNode'];
+  
+                      // initialize the execution node combo
+                      $('#execution-node-combo').combo({
+                          options: getExecutionNodeOptions(processor),
+                          selectedOption: {
+                              value: executionNode
+                          }
+                      });
+  
+                      // show the execution node option if we're cluster or we're currently configured to run on the primary node only
+                      if (nfClusterSummary.isClustered() || executionNode === 'PRIMARY') {
+                          $('#execution-node-options').show();
+                      } else {
+                          $('#execution-node-options').hide();
+                      }
+  
+                        // initialize the concurrentTasks
+                        var defaultConcurrentTasks = processor.config['defaultConcurrentTasks'];
+                        $('#timer-driven-concurrently-schedulable-tasks').val(defaultConcurrentTasks['TIMER_DRIVEN']);
+                        $('#event-driven-concurrently-schedulable-tasks').val(defaultConcurrentTasks['EVENT_DRIVEN']);
+                        $('#cron-driven-concurrently-schedulable-tasks').val(defaultConcurrentTasks['CRON_DRIVEN']);
+    
+                        // get the appropriate concurrent tasks field
+                        var concurrentTasks;
+                      if (schedulingStrategy === 'EVENT_DRIVEN') {
+                            concurrentTasks = $('#event-driven-concurrently-schedulable-tasks').val(processor.config['concurrentlySchedulableTaskCount']);
+                      } else if (schedulingStrategy === 'CRON_DRIVEN') {
+                            concurrentTasks = $('#cron-driven-concurrently-schedulable-tasks').val(processor.config['concurrentlySchedulableTaskCount']);
+                        } else {
+                            concurrentTasks = $('#timer-driven-concurrently-schedulable-tasks').val(processor.config['concurrentlySchedulableTaskCount']);
+                        }
+    
+                        // conditionally allow the user to specify the concurrent tasks
+                      if (nfCommon.isDefinedAndNotNull(concurrentTasks)) {
+                            if (processor.supportsParallelProcessing === true) {
+                                concurrentTasks.prop('disabled', false);
+                            } else {
+                                concurrentTasks.prop('disabled', true);
+                            }
+                        }
+    
+                        // initialize the schedulingStrategy
+                        var defaultSchedulingPeriod = processor.config['defaultSchedulingPeriod'];
+                        $('#cron-driven-scheduling-period').val(defaultSchedulingPeriod['CRON_DRIVEN']);
+                        $('#timer-driven-scheduling-period').val(defaultSchedulingPeriod['TIMER_DRIVEN']);
+    
+                        // set the scheduling period as appropriate
+                        if (processor.config['schedulingStrategy'] === 'CRON_DRIVEN') {
+                            $('#cron-driven-scheduling-period').val(processor.config['schedulingPeriod']);
+                        } else if (processor.config['schedulingStrategy'] !== 'EVENT_DRIVEN') {
+                            $('#timer-driven-scheduling-period').val(processor.config['schedulingPeriod']);
+                        }
+    
+                        // load the relationship list
+                      if (!nfCommon.isEmpty(processor.relationships)) {
+                            $.each(processor.relationships, function (i, relationship) {
+                                createRelationshipOption(relationship);
+                            });
+                        } else {
+                          $('#auto-terminate-relationship-names').append('<div class="unset">'+nf._.msg('nf-processor-configuration.ThisProcessorHasNoRelationships')+'</div>');
+                        }
+    
+                        var buttons = [{
+                          buttonText: nf._.msg('nf-processor-configuration.Apply'),
+                            color: {
+                                base: '#728E9B',
+                                hover: '#004849',
+                                text: '#ffffff'
+                            },
+                            handler: {
+                                click: function () {
+                                    // close all fields currently being edited
+                                    $('#processor-properties').propertytable('saveRow');
+    
+                                    // save the processor
+                                    saveProcessor(processor).done(function (response) {
+                                        // reload the processor's outgoing connections
+                                        reloadProcessorConnections(processor);
+    
+                                        // close the details panel
+                                        $('#processor-configuration').modal('hide');
+    
+                                        // inform Angular app values have changed
+                                      nfNgBridge.digest();
+                                    });
+                                }
+                            }
+                        },
+                            {
+                              buttonText: nf._.msg('nf-processor-configuration.Cancel'),
+                                color: {
+                                    base: '#E3E8EB',
+                                    hover: '#C7D2D7',
+                                    text: '#004849'
+                                },
+                                handler: {
+                                    click: function () {
+                                        $('#processor-configuration').modal('hide');
+                                    }
+                                }
+                            }];
+    
+                        // determine if we should show the advanced button
+                      if (nfCommon.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') {
+                            buttons.push({
+                              buttonText: nf._.msg('nf-processor-configuration.Advanced'),
+                                clazz: 'fa fa-cog button-icon',
+                                color: {
+                                    base: '#E3E8EB',
+                                    hover: '#C7D2D7',
+                                    text: '#004849'
+                                },
+                                handler: {
+                                    click: function () {
+                                        var openCustomUi = function () {
+                                            // reset state and close the dialog manually to avoid hiding the faded background
+                                            $('#processor-configuration').modal('hide');
+    
+                                            // show the custom ui
+                                          nfCustomUi.showCustomUi(processorResponse, processor.config.customUiUrl, true).done(function () {
+                                                // once the custom ui is closed, reload the processor
+                                              nfProcessor.reload(processor.id);
+    
+                                                // and reload the processor's outgoing connections
+                                                reloadProcessorConnections(processor);
+                                            });
+                                        };
+    
+                                        // close all fields currently being edited
+                                        $('#processor-properties').propertytable('saveRow');
+    
+                                        // determine if changes have been made
+                                        if (isSaveRequired()) {
+                                            // see if those changes should be saved
+                                          nfDialog.showYesNoDialog({
+                                              headerText: nf._.msg('nf-processor-configuration.Save'),
+                                              dialogContent: nf._.msg('nf-processor-configuration.Message7'),
+                                                noHandler: openCustomUi,
+                                                yesHandler: function () {
+                                                    saveProcessor(processor).done(function (deferred) {
+                                                        // open the custom ui
+                                                        openCustomUi();
+                                                    });
+                                                }
+                                            });
+                                        } else {
+                                            // if there were no changes, simply open the custom ui
+                                            openCustomUi();
+                                        }
+                                    }
+                                }
+                            });
+                        }
+    
+                        // set the button model
+                        $('#processor-configuration').modal('setButtonModel', buttons);
+    
+                        // load the property table
+                        $('#processor-properties')
+                            .propertytable('setGroupId', processor.parentGroupId)
+                            .propertytable('loadProperties', processor.config.properties, processor.config.descriptors, processorHistory.propertyHistory);
+    
+                        // show the details
+                        $('#processor-configuration').modal('show');
+    
+                        // add ellipsis if necessary
+                        $('#processor-configuration div.relationship-name').ellipsis();
+    
+                        // show the border if necessary
+                        var processorRelationships = $('#auto-terminate-relationship-names');
+                      if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > Math.round(processorRelationships.innerHeight())) {
+                            processorRelationships.css('border-width', '1px');
+                        }
+                  }).fail(nfErrorHandler.handleAjaxError);
+                }
+            }
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
new file mode 100644
index 000000000000..ccc90ba77eef
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
@@ -0,0 +1,1087 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.CanvasUtils'],
+              function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
+                  return (nf.Processor = factory($, d3, nfCommon, nfClient, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.Processor =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.Common'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.Processor = factory(root.$,
+              root.d3,
+              root.nf.Common,
+              root.nf.Client,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
+      'use strict';
+  
+      var nfConnectable;
+      var nfDraggable;
+      var nfSelectable;
+      var nfContextMenu;
+    
+        var PREVIEW_NAME_LENGTH = 25;
+    
+        // default dimensions for each type of component
+        var dimensions = {
+            width: 350,
+            height: 130
+        };
+    
+        // ---------------------------------
+        // processors currently on the graph
+        // ---------------------------------
+    
+        var processorMap;
+    
+      // -----------------------------------------------------------
+      // cache for components that are added/removed from the canvas
+      // -----------------------------------------------------------
+  
+      var removedCache;
+      var addedCache;
+  
+        // --------------------
+        // component containers
+        // --------------------
+    
+        var processorContainer;
+    
+        // --------------------------
+        // privately scoped functions
+        // --------------------------
+    
+        /**
+         * Selects the processor elements against the current processor map.
+         */
+        var select = function () {
+            return processorContainer.selectAll('g.processor').data(processorMap.values(), function (d) {
+                return d.id;
+            });
+        };
+    
+        // renders the processors
+        var renderProcessors = function (entered, selected) {
+            if (entered.empty()) {
+                return;
+            }
+    
+            var processor = entered.append('g')
+                .attr({
+                    'id': function (d) {
+                        return 'id-' + d.id;
+                    },
+                    'class': 'processor component'
+                })
+                .classed('selected', selected)
+              .call(nfCanvasUtils.position);
+    
+            // processor border
+            processor.append('rect')
+                .attr({
+                    'class': 'border',
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': function (d) {
+                        return d.dimensions.height;
+                    },
+                    'fill': 'transparent',
+                    'stroke': 'transparent'
+                });
+    
+            // processor body
+            processor.append('rect')
+                .attr({
+                    'class': 'body',
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': function (d) {
+                        return d.dimensions.height;
+                    },
+                    'filter': 'url(#component-drop-shadow)',
+                    'stroke-width': 0
+                });
+    
+            // processor name
+            processor.append('text')
+                .attr({
+                  'x': 72,
+                  'y': 23,
+                  'width': 210,
+                  'height': 14,
+                    'class': 'processor-name'
+                });
+    
+          // processor icon container
+          processor.append('rect')
+              .attr({
+                  'x': 0,
+                  'y': 0,
+                  'width': 50,
+                  'height': 50,
+                  'class': 'processor-icon-container'
+              });
+  
+            // processor icon
+            processor.append('text')
+                .attr({
+                  'x': 9,
+                  'y': 35,
+                    'class': 'processor-icon'
+                })
+                .text('\ue807');
+    
+          // restricted icon background
+          processor.append('circle')
+                .attr({
+                  'r': 9,
+                  'cx': 12,
+                  'cy': 12,
+                  'class': 'restricted-background'
+                });
+    
+          // restricted icon
+          processor.append('text')
+              .attr({
+                  'x': 7.75,
+                  'y': 17,
+                  'class': 'restricted'
+              })
+              .text('\uf132');
+    
+            // make processors selectable
+          processor.call(nfSelectable.activate).call(nfContextMenu.activate);
+        };
+    
+        /**
+         * Updates the processors in the specified selection.
+         *
+         * @param {selection} updated       The processors to update
+         */
+        var updateProcessors = function (updated) {
+            if (updated.empty()) {
+                return;
+            }
+    
+            // processor border authorization
+            updated.select('rect.border')
+                .classed('unauthorized', function (d) {
+                    return d.permissions.canRead === false;
+                });
+    
+            // processor body authorization
+            updated.select('rect.body')
+                .classed('unauthorized', function (d) {
+                    return d.permissions.canRead === false;
+                });
+    
+            updated.each(function (processorData) {
+                var processor = d3.select(this);
+                var details = processor.select('g.processor-canvas-details');
+    
+                // update the component behavior as appropriate
+              nfCanvasUtils.editable(processor, nfConnectable, nfDraggable);
+    
+                // if this processor is visible, render everything
+                if (processor.classed('visible')) {
+                    if (details.empty()) {
+                        details = processor.append('g').attr('class', 'processor-canvas-details');
+    
+                        // run status icon
+                        details.append('text')
+                            .attr({
+                                'class': 'run-status-icon',
+                              'x': 55,
+                              'y': 23
+                            });
+    
+                        // processor type
+                        details.append('text')
+                            .attr({
+                                'class': 'processor-type',
+                              'x': 72,
+                              'y': 37,
+                              'width': 236,
+                              'height': 12
+                            });
+    
+                        // -----
+                        // stats
+                        // -----
+    
+                        // draw the processor statistics table
+    
+                        // in
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 50,
+                                'fill': '#f4f6f7'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 68,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // read/write
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 69,
+                                'fill': '#ffffff'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 87,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // out
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 20,
+                                'x': 0,
+                                'y': 88,
+                                'fill': '#f4f6f7'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 106,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // tasks/time
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return processorData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 107,
+                                'fill': '#ffffff'
+                            });
+    
+                        // stats label container
+                        var processorStatsLabel = details.append('g')
+                            .attr({
+                                'transform': 'translate(10, 55)'
+                            });
+    
+                        // in label
+                        processorStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'y': 9,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-processor.In'));
+    
+                        // read/write label
+                        processorStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'y': 27,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-processor.ReadWrite'));
+    
+                        // out label
+                        processorStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'y': 46,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-processor.Out'));
+    
+                        // tasks/time label
+                        processorStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'y': 65,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-processor.TasksTime'));
+    
+                        // stats value container
+                        var processorStatsValue = details.append('g')
+                            .attr({
+                                'transform': 'translate(85, 55)'
+                            });
+    
+                        // in value
+                        var inText = processorStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 9,
+                                'y': 9,
+                                'class': 'processor-in stats-value'
+                            });
+    
+                        // in count
+                        inText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // in size
+                        inText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // read/write value
+                        processorStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'y': 27,
+                                'class': 'processor-read-write stats-value'
+                            });
+    
+                        // out value
+                        var outText = processorStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'y': 46,
+                                'class': 'processor-out stats-value'
+                            });
+    
+                        // out count
+                        outText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // out size
+                        outText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // tasks/time value
+                        processorStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'y': 65,
+                                'class': 'processor-tasks-time stats-value'
+                            });
+    
+                        // stats value container
+                        var processorStatsInfo = details.append('g')
+                            .attr('transform', 'translate(305, 55)');
+    
+                        // in info
+                        processorStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'y': 9,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-processor.5min-1'));
+    
+                        // read/write info
+                        processorStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'y': 27,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-processor.5min-1'));
+    
+                        // out info
+                        processorStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'y': 46,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-processor.5min-1'));
+    
+                        // tasks/time info
+                        processorStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'y': 65,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-processor.5min-1'));
+    
+                        // -------------------
+                        // active thread count
+                        // -------------------
+    
+                        // active thread count
+                        details.append('text')
+                            .attr({
+                                'class': 'active-thread-count-icon',
+                                'y': 42
+                            })
+                            .text('\ue83f');
+    
+                        // active thread background
+                        details.append('text')
+                            .attr({
+                                'class': 'active-thread-count',
+                                'y': 42
+                            });
+    
+                        // ---------
+                        // bulletins
+                        // ---------
+    
+                        // bulletin background
+                        details.append('rect')
+                            .attr({
+                                'class': 'bulletin-background',
+                                'x': function (d) {
+                                    return processorData.dimensions.width - 24;
+                                },
+                                'width': 24,
+                                'height': 24
+                            });
+    
+                        // bulletin icon
+                        details.append('text')
+                            .attr({
+                                'class': 'bulletin-icon',
+                                'x': function (d) {
+                                    return processorData.dimensions.width - 17;
+                                },
+                                'y': 17
+                            })
+                            .text('\uf24a');
+                    }
+    
+                    if (processorData.permissions.canRead) {
+                        // update the processor name
+                        processor.select('text.processor-name')
+                            .each(function (d) {
+                                var processorName = d3.select(this);
+    
+                                // reset the processor name to handle any previous state
+                                processorName.text(null).selectAll('title').remove();
+    
+                                // apply ellipsis to the processor name as necessary
+                              nfCanvasUtils.ellipsis(processorName, d.component.name);
+                            }).append('title').text(function (d) {
+                            return d.component.name;
+                        });
+    
+                        // update the processor type
+                        processor.select('text.processor-type')
+                            .each(function (d) {
+                                var processorType = d3.select(this);
+    
+                                // reset the processor type to handle any previous state
+                                processorType.text(null).selectAll('title').remove();
+    
+                                // apply ellipsis to the processor type as necessary
+                              nfCanvasUtils.ellipsis(processorType, nfCommon.substringAfterLast(d.component.type, '.'));
+                            }).append('title').text(function (d) {
+                          return nfCommon.substringAfterLast(d.component.type, '.');
+                        });
+                    } else {
+                        // clear the processor name
+                        processor.select('text.processor-name').text(null);
+    
+                        // clear the processor type
+                        processor.select('text.processor-type').text(null);
+                    }
+    
+                    // populate the stats
+                    processor.call(updateProcessorStatus);
+                } else {
+                    if (processorData.permissions.canRead) {
+                        // update the processor name
+                        processor.select('text.processor-name')
+                            .text(function (d) {
+                                var name = d.component.name;
+                                if (name.length > PREVIEW_NAME_LENGTH) {
+                                    return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
+                                } else {
+                                    return name;
+                                }
+                            });
+                  } else {
+                      // clear the processor name
+                      processor.select('text.processor-name').text(null);
+                    }
+    
+                    // remove the tooltips
+                    processor.call(removeTooltips);
+    
+                    // remove the details if necessary
+                    if (!details.empty()) {
+                        details.remove();
+                    }
+                }
+    
+                // ---------------
+                // processor color
+                // ---------------
+    
+              //update the processor icon container
+              processor.select('rect.processor-icon-container').classed('unauthorized', !processorData.permissions.canRead);
+  
+              //update the processor icon
+              processor.select('text.processor-icon').classed('unauthorized', !processorData.permissions.canRead);
+  
+              //update the processor border
+              processor.select('rect.border').classed('unauthorized', !processorData.permissions.canRead);
+  
+              // use the specified color if appropriate
+              if (processorData.permissions.canRead) {
+                  if (nfCommon.isDefinedAndNotNull(processorData.component.style['background-color'])) {
+                      var color = processorData.component.style['background-color'];
+  
+                      //update the processor icon container
+                      processor.select('rect.processor-icon-container')
+                          .style('fill', function (d) {
+                              return color;
+                          });
+  
+                      //update the processor border
+                      processor.select('rect.border')
+                          .style('stroke', function (d) {
+                              return color;
+                          });
+                  }
+              }
+  
+                // update the processor color
+              processor.select('text.processor-icon')
+                    .style('fill', function (d) {
+    
+                        // get the default color
+                      var color = nfProcessor.defaultIconColor();
+    
+                        if (!d.permissions.canRead) {
+                            return color;
+                        }
+    
+                        // use the specified color if appropriate
+                      if (nfCommon.isDefinedAndNotNull(d.component.style['background-color'])) {
+                            color = d.component.style['background-color'];
+    
+                          //special case #ffffff implies default fill
+                          if (color.toLowerCase() === '#ffffff') {
+                              color = nfProcessor.defaultIconColor();
+                          } else {
+                              color = nfCommon.determineContrastColor(
+                                  nfCommon.substringAfterLast(
+                                      color, '#'));
+                          }
+                        }
+    
+                        return color;
+                    });
+    
+              // restricted component indicator
+              processor.select('circle.restricted-background').style('visibility', showRestricted);
+              processor.select('text.restricted').style('visibility', showRestricted);
+          });
+        };
+    
+      /**
+       * Returns whether the resticted indicator should be shown for a given
+       * @param d
+       * @returns {*}
+       */
+      var showRestricted = function (d) {
+          if (!d.permissions.canRead) {
+              return 'hidden';
+          }
+  
+          return d.component.restricted ? 'visible' : 'hidden';
+      }
+    
+        /**
+         * Updates the stats for the processors in the specified selection.
+         *
+         * @param {selection} updated           The processors to update
+         */
+        var updateProcessorStatus = function (updated) {
+            if (updated.empty()) {
+                return;
+            }
+    
+            // update the run status
+            updated.select('text.run-status-icon')
+                .attr({
+                    'fill': function (d) {
+                        var fill = '#728e9b';
+    
+                        if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
+                          fill = '#cf9f5d';
+                      } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
+                          fill = '#7dc7a0';
+                      } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
+                          fill = '#d18686';
+                        }
+    
+                        return fill;
+                    },
+                    'font-family': function (d) {
+                        var family = 'FontAwesome';
+                        if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
+                            family = 'flowfont';
+                        }
+                        return family;
+                    }
+                })
+                .text(function (d) {
+                    var img = '';
+                    if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
+                        img = '\ue802';
+                    } else if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
+                        img = '\uf071';
+                    } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
+                        img = '\uf04b';
+                    } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
+                        img = '\uf04d';
+                    }
+                    return img;
+                })
+                .each(function (d) {
+                    // get the tip
+                    var tip = d3.select('#run-status-tip-' + d.id);
+    
+                    // if there are validation errors generate a tooltip
+                  if (d.permissions.canRead && !nfCommon.isEmpty(d.component.validationErrors)) {
+                        // create the tip if necessary
+                        if (tip.empty()) {
+                            tip = d3.select('#processor-tooltips').append('div')
+                                .attr('id', function () {
+                                    return 'run-status-tip-' + d.id;
+                                })
+                                .attr('class', 'tooltip nifi-tooltip');
+                        }
+    
+                        // update the tip
+                        tip.html(function () {
+                          var list = nfCommon.formatUnorderedList(d.component.validationErrors);
+                            if (list === null || list.length === 0) {
+                                return '';
+                            } else {
+                                return $('<div></div>').append(list).html();
+                            }
+                        });
+    
+                        // add the tooltip
+                      nfCanvasUtils.canvasTooltip(tip, d3.select(this));
+                    } else {
+                        // remove the tip if necessary
+                        if (!tip.empty()) {
+                            tip.remove();
+                        }
+                    }
+                });
+    
+            // in count value
+            updated.select('text.processor-in tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.input, ' ');
+                });
+    
+            // in size value
+            updated.select('text.processor-in tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.input, ' ');
+                });
+    
+            // read/write value
+            updated.select('text.processor-read-write')
+                .text(function (d) {
+                    return d.status.aggregateSnapshot.read + ' / ' + d.status.aggregateSnapshot.written;
+                });
+    
+            // out count value
+            updated.select('text.processor-out tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.output, ' ');
+                });
+    
+            // out size value
+            updated.select('text.processor-out tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.output, ' ');
+                });
+    
+            // tasks/time value
+            updated.select('text.processor-tasks-time')
+                .text(function (d) {
+                    return d.status.aggregateSnapshot.tasks + ' / ' + d.status.aggregateSnapshot.tasksDuration;
+                });
+    
+            updated.each(function (d) {
+                var processor = d3.select(this);
+    
+                // -------------------
+                // active thread count
+                // -------------------
+    
+              nfCanvasUtils.activeThreadCount(processor, d);
+    
+                // ---------
+                // bulletins
+                // ---------
+    
+                processor.select('rect.bulletin-background').classed('has-bulletins', function () {
+                  return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
+                });
+    
+              nfCanvasUtils.bulletins(processor, d, function () {
+                    return d3.select('#processor-tooltips');
+                }, 286);
+            });
+        };
+    
+        /**
+         * Removes the processors in the specified selection.
+         *
+         * @param {selection} removed
+         */
+        var removeProcessors = function (removed) {
+            if (removed.empty()) {
+                return;
+            }
+    
+            removed.call(removeTooltips).remove();
+        };
+    
+        /**
+         * Removes the tooltips for the processors in the specified selection.
+         *
+         * @param {selection} removed
+         */
+        var removeTooltips = function (removed) {
+            removed.each(function (d) {
+                // remove any associated tooltips
+                $('#run-status-tip-' + d.id).remove();
+                $('#bulletin-tip-' + d.id).remove();
+            });
+        };
+    
+      var nfProcessor = {
+            /**
+             * Initializes of the Processor handler.
+           *
+           * @param nfConnectableRef   The nfConnectable module.
+           * @param nfDraggableRef   The nfDraggable module.
+           * @param nfSelectableRef   The nfSelectable module.
+           * @param nfContextMenuRef   The nfContextMenu module.
+             */
+          init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
+              nfConnectable = nfConnectableRef;
+              nfDraggable = nfDraggableRef;
+              nfSelectable = nfSelectableRef;
+              nfContextMenu = nfContextMenuRef;
+  
+                processorMap = d3.map();
+              removedCache = d3.map();
+              addedCache = d3.map();
+    
+                // create the processor container
+                processorContainer = d3.select('#canvas').append('g')
+                    .attr({
+                        'pointer-events': 'all',
+                        'class': 'processors'
+                    });
+            },
+    
+            /**
+             * Adds the specified processor entity.
+             *
+             * @param processorEntities       The processor
+             * @param options           Configuration options
+             */
+            add: function (processorEntities, options) {
+                var selectAll = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                }
+    
+              // get the current time
+              var now = new Date().getTime();
+    
+                var add = function (processorEntity) {
+                  addedCache.set(processorEntity.id, now);
+  
+                    // add the processor
+                    processorMap.set(processorEntity.id, $.extend({
+                        type: 'Processor',
+                        dimensions: dimensions
+                    }, processorEntity));
+                };
+    
+                // determine how to handle the specified processor
+                if ($.isArray(processorEntities)) {
+                    $.each(processorEntities, function (_, processorEntity) {
+                        add(processorEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(processorEntities)) {
+                    add(processorEntities);
+                }
+    
+                // apply the selection and handle new processor
+                var selection = select();
+                selection.enter().call(renderProcessors, selectAll);
+                selection.call(updateProcessors);
+            },
+    
+            /**
+             * Populates the graph with the specified processors.
+             *
+             * @argument {object | array} processorEntities                The processors to add
+             * @argument {object} options                Configuration options
+             */
+            set: function (processorEntities, options) {
+                var selectAll = false;
+                var transition = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                  transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+                }
+    
+              var set = function (proposedProcessorEntity) {
+                  var currentProcessorEntity = processorMap.get(proposedProcessorEntity.id);
+  
+                  // set the processor if appropriate due to revision and wasn't previously removed
+                  if (nfClient.isNewerRevision(currentProcessorEntity, proposedProcessorEntity) && !removedCache.has(proposedProcessorEntity.id)) {
+                      processorMap.set(proposedProcessorEntity.id, $.extend({
+                            type: 'Processor',
+                            dimensions: dimensions
+                      }, proposedProcessorEntity));
+                  }
+                };
+    
+                // determine how to handle the specified processor
+                if ($.isArray(processorEntities)) {
+                    $.each(processorMap.keys(), function (_, key) {
+                      var currentProcessorEntity = processorMap.get(key);
+                      var isPresent = $.grep(processorEntities, function (proposedProcessorEntity) {
+                          return proposedProcessorEntity.id === currentProcessorEntity.id;
+                      });
+  
+                      // if the current processor is not present and was not recently added, remove it
+                      if (isPresent.length === 0 && !addedCache.has(key)) {
+                            processorMap.remove(key);
+                      }
+                    });
+                    $.each(processorEntities, function (_, processorEntity) {
+                        set(processorEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(processorEntities)) {
+                    set(processorEntities);
+                }
+    
+                // apply the selection and handle all new processors
+                var selection = select();
+                selection.enter().call(renderProcessors, selectAll);
+              selection.call(updateProcessors).call(nfCanvasUtils.position, transition);
+                selection.exit().call(removeProcessors);
+            },
+    
+            /**
+             * If the processor id is specified it is returned. If no processor id
+             * specified, all processors are returned.
+             *
+             * @param {string} id
+             */
+            get: function (id) {
+              if (nfCommon.isUndefined(id)) {
+                    return processorMap.values();
+                } else {
+                    return processorMap.get(id);
+                }
+            },
+    
+            /**
+             * If the processor id is specified it is refresh according to the current
+             * state. If not processor id is specified, all processors are refreshed.
+             *
+             * @param {string} id      Optional
+             */
+            refresh: function (id) {
+              if (nfCommon.isDefinedAndNotNull(id)) {
+                    d3.select('#id-' + id).call(updateProcessors);
+                } else {
+                    d3.selectAll('g.processor').call(updateProcessors);
+                }
+            },
+    
+            /**
+             * Positions the component.
+             *
+             * @param {string} id   The id
+             */
+            position: function (id) {
+              d3.select('#id-' + id).call(nfCanvasUtils.position);
+            },
+    
+            /**
+             * Refreshes the components necessary after a pan event.
+             */
+            pan: function () {
+                d3.selectAll('g.processor.entering, g.processor.leaving').call(updateProcessors);
+            },
+    
+            /**
+             * Reloads the processor state from the server and refreshes the UI.
+             * If the processor is currently unknown, this function just returns.
+             *
+             * @param {string} id The processor id
+             */
+            reload: function (id) {
+                if (processorMap.has(id)) {
+                    var processorEntity = processorMap.get(id);
+                    return $.ajax({
+                        type: 'GET',
+                        url: processorEntity.uri,
+                        dataType: 'json'
+                    }).done(function (response) {
+                      nfProcessor.set(response);
+                    });
+                }
+            },
+    
+            /**
+             * Removes the specified processor.
+             *
+           * @param {array|string} processorIds      The processors
+             */
+          remove: function (processorIds) {
+              var now = new Date().getTime();
+  
+              if ($.isArray(processorIds)) {
+                  $.each(processorIds, function (_, processorId) {
+                      removedCache.set(processorId, now);
+                      processorMap.remove(processorId);
+                    });
+                } else {
+                  removedCache.set(processorIds, now);
+                  processorMap.remove(processorIds);
+                }
+    
+                // apply the selection and handle all removed processors
+                select().exit().call(removeProcessors);
+            },
+    
+            /**
+             * Removes all processors.
+             */
+            removeAll: function () {
+              nfProcessor.remove(processorMap.keys());
+          },
+  
+          /**
+           * Expires the caches up to the specified timestamp.
+           *
+           * @param timestamp
+           */
+          expireCaches: function (timestamp) {
+              var expire = function (cache) {
+                  cache.forEach(function (id, entryTimestamp) {
+                      if (timestamp > entryTimestamp) {
+                          cache.remove(id);
+                      }
+                  });
+              };
+  
+              expire(addedCache);
+              expire(removedCache);
+          },
+  
+          /**
+           * Returns the default fill color that should be used when drawing a processor.
+           */
+          defaultFillColor: function () {
+              return '#FFFFFF';
+          },
+  
+          /**
+           * Returns the default icon color that should be used when drawing a processor.
+           */
+          defaultIconColor: function () {
+                return '#ad9897';
+            }
+        };
+    
+      return nfProcessor;
+  }));
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
new file mode 100644
index 000000000000..ef3ba113a720
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
@@ -0,0 +1,795 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+    /**
+     * Lists FlowFiles from a given connection.
+     */
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Shell',
+                  'nf.ng.Bridge',
+                  'nf.ClusterSummary',
+                  'nf.ErrorHandler',
+                  'nf.Storage',
+                  'nf.CanvasUtils'],
+              function ($, Slick, nfCommon, nfDialog, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils) {
+                  return (nf.QueueListing = factory($, Slick, nfCommon, nfDialog, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.QueueListing =
+              factory(require('jquery'),
+                  require('Slick'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Shell'),
+                  require('nf.ng.Bridge'),
+                  require('nf.ClusterSummary'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Storage'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.QueueListing = factory(root.$,
+              root.Slick,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Shell,
+              root.nf.ng.Bridge,
+              root.nf.ClusterSummary,
+              root.nf.ErrorHandler,
+              root.nf.Storage,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, Slick, nfCommon, nfDialog, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfStorage, nfCanvasUtils) {
+      'use strict';
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                uiExtensionToken: '../nifi-api/access/ui-extension-token',
+                downloadToken: '../nifi-api/access/download-token'
+            }
+        };
+    
+        /**
+         * Initializes the listing request status dialog.
+         */
+        var initializeListingRequestStatusDialog = function () {
+            // configure the drop request status dialog
+            $('#listing-request-status-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-queue-listing.QueueListing'),
+                handler: {
+                    close: function () {
+                        // clear the current button model
+                        $('#listing-request-status-dialog').modal('setButtonModel', []);
+                    }
+                }
+            });
+        };
+    
+        /**
+         * Downloads the content for the flowfile currently being viewed.
+         */
+        var downloadContent = function () {
+            var dataUri = $('#flowfile-uri').text() + '/content';
+    
+            // perform the request once we've received a token
+          nfCommon.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
+                var parameters = {};
+    
+                // conditionally include the ui extension token
+              if (!nfCommon.isBlank(downloadToken)) {
+                    parameters['access_token'] = downloadToken;
+                }
+    
+                // conditionally include the cluster node id
+                var clusterNodeId = $('#flowfile-cluster-node-id').text();
+              if (!nfCommon.isBlank(clusterNodeId)) {
+                    parameters['clusterNodeId'] = clusterNodeId;
+                }
+    
+                // open the url
+                if ($.isEmptyObject(parameters)) {
+                    window.open(dataUri);
+                } else {
+                    window.open(dataUri + '?' + $.param(parameters));
+                }
+            }).fail(function () {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-queue-listing.QueueListing'),
+                  dialogContent: nf._.msg('nf-queue-listing.Message1')
+                });
+            });
+        };
+    
+        /**
+         * Views the content for the flowfile currently being viewed.
+         */
+        var viewContent = function () {
+            var dataUri = $('#flowfile-uri').text() + '/content';
+    
+            // generate tokens as necessary
+            var getAccessTokens = $.Deferred(function (deferred) {
+              if (nfStorage.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 () {
+                      nfDialog.showOkDialog({
+                          headerText: nf._.msg('nf-queue-listing.QueueListing'),
+                          dialogContent: nf._.msg('nf-queue-listing.Message2')
+                        });
+                        deferred.reject();
+                    });
+                } else {
+                    deferred.resolve('', '');
+                }
+            }).promise();
+    
+            // perform the request after we've received the tokens
+            getAccessTokens.done(function (uiExtensionToken, downloadToken) {
+                var dataUriParameters = {};
+    
+                // conditionally include the cluster node id
+                var clusterNodeId = $('#flowfile-cluster-node-id').text();
+              if (!nfCommon.isBlank(clusterNodeId)) {
+                    dataUriParameters['clusterNodeId'] = clusterNodeId;
+                }
+    
+                // include the download token if applicable
+              if (!nfCommon.isBlank(downloadToken)) {
+                    dataUriParameters['access_token'] = downloadToken;
+                }
+    
+                // include parameters if necessary
+                if ($.isEmptyObject(dataUriParameters) === false) {
+                    dataUri = dataUri + '?' + $.param(dataUriParameters);
+                }
+    
+                // open the content viewer
+                var contentViewerUrl = $('#nifi-content-viewer-url').text();
+    
+                // 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 += '&';
+                }
+    
+                var contentViewerParameters = {
+                    'ref': dataUri
+                };
+    
+                // include the download token if applicable
+              if (!nfCommon.isBlank(uiExtensionToken)) {
+                    contentViewerParameters['access_token'] = uiExtensionToken;
+                }
+    
+                // open the content viewer
+                window.open(contentViewerUrl + $.param(contentViewerParameters));
+            });
+        };
+    
+        /**
+         * Performs a listing on the specified connection.
+         *
+         * @param connection the connection
+         */
+        var performListing = function (connection) {
+            var MAX_DELAY = 4;
+            var cancelled = false;
+            var listingRequest = null;
+            var listingRequestTimer = null;
+    
+            return $.Deferred(function (deferred) {
+                // updates the progress bar
+                var updateProgress = function (percentComplete) {
+                    // remove existing labels
+                    var progressBar = $('#listing-request-percent-complete');
+                    progressBar.find('div.progress-label').remove();
+                    progressBar.find('md-progress-linear').remove();
+    
+                    // update the progress
+                    var label = $('<div class="progress-label"></div>').text(percentComplete + '%');
+                  (nfNgBridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + percentComplete + '" class="md-hue-2" md-mode="determinate" aria-label="Searching Queue"></md-progress-linear>'))(nfNgBridge.rootScope)).appendTo(progressBar);
+                    progressBar.append(label);
+                };
+    
+                // update the button model of the drop request status dialog
+                $('#listing-request-status-dialog').modal('setButtonModel', [{
+                  headerText: nf._.msg('nf-queue-listing.QueueListing'),
+                  buttonText: nf._.msg('nf-queue-listing.Stop'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            cancelled = true;
+    
+                            // we are waiting for the next poll attempt
+                            if (listingRequestTimer !== null) {
+                                // cancel it
+                                clearTimeout(listingRequestTimer);
+    
+                                // cancel the listing request
+                                completeListingRequest();
+                            }
+                        }
+                    }
+                }]);
+    
+                // completes the listing request by removing it
+                var completeListingRequest = function () {
+                    $('#listing-request-status-dialog').modal('hide');
+    
+                    var reject = cancelled;
+    
+                    // ensure the listing requests are present
+                  if (nfCommon.isDefinedAndNotNull(listingRequest)) {
+                        $.ajax({
+                            type: 'DELETE',
+                            url: listingRequest.uri,
+                            dataType: 'json'
+                        });
+    
+                        // use the listing request from when the listing completed
+                      if (nfCommon.isEmpty(listingRequest.flowFileSummaries)) {
+                            if (cancelled === false) {
+                                reject = true;
+    
+                                // show the dialog
+                              nfDialog.showOkDialog({
+                                  headerText: nf._.msg('nf-queue-listing.QueueListing'),
+                                  dialogContent: nf._.msg('nf-queue-listing.Message3')
+                                });
+                            }
+                        } else {
+                            // update the queue size
+                          $('#total-flowfiles-count').text(nfCommon.formatInteger(listingRequest.queueSize.objectCount));
+                          $('#total-flowfiles-size').text(nfCommon.formatDataSize(listingRequest.queueSize.byteCount));
+    
+                            // update the last updated time
+                            $('#queue-listing-last-refreshed').text(listingRequest.lastUpdated);
+    
+                            // show a message for the queue listing if necessary
+                            var queueListingTable = $('#queue-listing-table');
+                            var queueListingMessage = $('#queue-listing-message');
+                            if (listingRequest.sourceRunning === true || listingRequest.destinationRunning === true) {
+                                if (listingRequest.souceRunning === true && listingRequest.destinationRunning === true) {
+                                  queueListingMessage.text(nf._.msg('nf-queue-listing.Message4')).show();
+                                } else if (listingRequest.sourceRunning === true) {
+                                  queueListingMessage.text(nf._.msg('nf-queue-listing.Message5')).show();
+                                } else if (listingRequest.destinationRunning === true) {
+                                  queueListingMessage.text(nf._.msg('nf-queue-listing.Message6')).show();
+                                }
+                            } else {
+                                queueListingMessage.text('').hide();
+                            }
+    
+                            // get the grid to load the data
+                            var queueListingGrid = $('#queue-listing-table').data('gridInstance');
+                            var queueListingData = queueListingGrid.getData();
+    
+                            // load the flowfiles
+                            queueListingData.beginUpdate();
+                            queueListingData.setItems(listingRequest.flowFileSummaries, 'uuid');
+                            queueListingData.endUpdate();
+                        }
+                    } else {
+                        reject = true;
+                    }
+    
+                    if (reject) {
+                        deferred.reject();
+                    } else {
+                        deferred.resolve();
+                    }
+                };
+    
+                // process the listing request
+                var processListingRequest = function (delay) {
+                    // update the percent complete
+                    updateProgress(listingRequest.percentCompleted);
+    
+                    // update the status of the listing request
+                    $('#listing-request-status-message').text(listingRequest.state);
+    
+                    // close the dialog if the
+                    if (listingRequest.finished === true || cancelled === true) {
+                        completeListingRequest();
+                    } else {
+                        // wait delay to poll again
+                        listingRequestTimer = setTimeout(function () {
+                            // clear the listing request timer
+                            listingRequestTimer = null;
+    
+                            // schedule to poll the status again in nextDelay
+                            pollListingRequest(Math.min(MAX_DELAY, delay * 2));
+                        }, delay * 1000);
+                    }
+                };
+    
+                // schedule for the next poll iteration
+                var pollListingRequest = function (nextDelay) {
+                    $.ajax({
+                        type: 'GET',
+                        url: listingRequest.uri,
+                        dataType: 'json'
+                    }).done(function (response) {
+                        listingRequest = response.listingRequest;
+                        processListingRequest(nextDelay);
+                  }).fail(completeListingRequest).fail(nfErrorHandler.handleAjaxError);
+                };
+    
+                // issue the request to list the flow files
+                $.ajax({
+                    type: 'POST',
+                    url: '../nifi-api/flowfile-queues/' + connection.id + '/listing-requests',
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // initialize the progress bar value
+                    updateProgress(0);
+    
+                    // show the progress dialog
+                    $('#listing-request-status-dialog').modal('show');
+    
+                    // process the drop request
+                    listingRequest = response.listingRequest;
+                    processListingRequest(1);
+              }).fail(completeListingRequest).fail(nfErrorHandler.handleAjaxError);
+            }).promise();
+        };
+    
+        /**
+         * Shows the details for the specified flowfile.
+         *
+         * @param flowFileSummary the flowfile summary
+         */
+        var showFlowFileDetails = function (flowFileSummary) {
+            // formats an flowfile detail
+            var formatFlowFileDetail = function (label, value) {
+                $('<div class="flowfile-detail"></div>').append(
+                    $('<div class="detail-name"></div>').text(label)).append(
+                  $('<div class="detail-value">' + nfCommon.formatValue(value) + '</div>').ellipsis()).append(
+                    $('<div class="clear"></div>')).appendTo('#additional-flowfile-details');
+            };
+    
+            // formats the content value
+            var formatContentValue = function (element, value) {
+              if (nfCommon.isDefinedAndNotNull(value)) {
+                    element.removeClass('unset').text(value);
+                } else {
+                  element.addClass('unset').text(nf._.msg('nf-queue-listing.NoValueSet'));
+                }
+            };
+    
+            var params = {};
+          if (nfCommon.isDefinedAndNotNull(flowFileSummary.clusterNodeId)) {
+                params['clusterNodeId'] = flowFileSummary.clusterNodeId;
+            }
+    
+            $.ajax({
+                type: 'GET',
+                url: flowFileSummary.uri,
+                data: params,
+                dataType: 'json'
+            }).done(function (response) {
+                var flowFile = response.flowFile;
+    
+                // show the URI to this flowfile
+                $('#flowfile-uri').text(flowFile.uri);
+    
+                // show the flowfile details dialog
+              $('#flowfile-uuid').html(nfCommon.formatValue(flowFile.uuid));
+              $('#flowfile-filename').html(nfCommon.formatValue(flowFile.filename));
+              $('#flowfile-queue-position').html(nfCommon.formatValue(flowFile.position));
+              $('#flowfile-file-size').html(nfCommon.formatValue(flowFile.contentClaimFileSize));
+              $('#flowfile-queued-duration').text(nfCommon.formatDuration(flowFile.queuedDuration));
+              $('#flowfile-lineage-duration').text(nfCommon.formatDuration(flowFile.lineageDuration));
+              $('#flowfile-penalized').text(flowFile.penalized === true ? 'Yes' : 'No');
+    
+                // conditionally show the cluster node identifier
+              if (nfCommon.isDefinedAndNotNull(flowFileSummary.clusterNodeId)) {
+                    // save the cluster node id
+                    $('#flowfile-cluster-node-id').text(flowFileSummary.clusterNodeId);
+    
+                    // render the cluster node address
+                    formatFlowFileDetail('Node Address', flowFileSummary.clusterNodeAddress);
+                }
+    
+              if (nfCommon.isDefinedAndNotNull(flowFile.contentClaimContainer)) {
+                    // content claim
+                    formatContentValue($('#content-container'), flowFile.contentClaimContainer);
+                    formatContentValue($('#content-section'), flowFile.contentClaimSection);
+                    formatContentValue($('#content-identifier'), flowFile.contentClaimIdentifier);
+                    formatContentValue($('#content-offset'), flowFile.contentClaimOffset);
+                    formatContentValue($('#content-bytes'), flowFile.contentClaimFileSizeBytes);
+    
+                    // input content file size
+                    var contentSize = $('#content-size');
+                    formatContentValue(contentSize, flowFile.contentClaimFileSize);
+                  if (nfCommon.isDefinedAndNotNull(flowFile.contentClaimFileSize)) {
+                        // over the default tooltip with the actual byte count
+                      contentSize.attr('title', nfCommon.formatInteger(flowFile.contentClaimFileSizeBytes) + nf._.msg('nf-queue-listing.Bytes'));
+                    }
+    
+                    // show the content details
+                    $('#flowfile-content-details').show();
+                } else {
+                    $('#flowfile-content-details').hide();
+                }
+    
+                // attributes
+                var attributesContainer = $('#flowfile-attributes-container');
+    
+                // get any action details
+                $.each(flowFile.attributes, function (attributeName, attributeValue) {
+                    // create the attribute record
+                    var attributeRecord = $('<div class="attribute-detail"></div>')
+                      .append($('<div class="attribute-name">' + nfCommon.formatValue(attributeName) + '</div>').ellipsis())
+                        .appendTo(attributesContainer);
+    
+                    // add the current value
+                    attributeRecord
+                      .append($('<div class="attribute-value">' + nfCommon.formatValue(attributeValue) + '</div>').ellipsis())
+                        .append('<div class="clear"></div>');
+                });
+    
+                // show the dialog
+                $('#flowfile-details-dialog').modal('show');
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+      var nfQueueListing = {
+            init: function () {
+                initializeListingRequestStatusDialog();
+    
+                // define mouse over event for the refresh button
+                $('#queue-listing-refresh-button').click(function () {
+                    var connection = $('#queue-listing-table').data('connection');
+                    performListing(connection);
+                });
+    
+                // define a custom formatter for showing more processor details
+                var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
+                  return '<div class="pointer show-flowfile-details fa fa-info-circle" title="'+nf._.msg('nf-processor-configuration.ViewDetails')+'" style="margin-top: 5px; float: left;"></div>';
+                };
+    
+                // function for formatting data sizes
+                var dataSizeFormatter = function (row, cell, value, columnDef, dataContext) {
+                  return nfCommon.formatDataSize(value);
+                };
+    
+                // function for formatting durations
+                var durationFormatter = function (row, cell, value, columnDef, dataContext) {
+                  return nfCommon.formatDuration(value);
+                };
+    
+                // function for formatting penalization
+                var penalizedFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (value === true) {
+                        markup += 'Yes';
+                    }
+    
+                    return markup;
+                };
+    
+                // initialize the queue listing table
+                var queueListingColumns = [
+                    {
+                        id: 'moreDetails',
+                        field: 'moreDetails',
+                        name: '&nbsp;',
+                        sortable: false,
+                        resizable: false,
+                        formatter: moreDetailsFormatter,
+                        width: 50,
+                        maxWidth: 50
+                    },
+                    {
+                        id: 'position',
+                      name: nf._.msg('nf-queue-listing.Position'),
+                        field: 'position',
+                        sortable: false,
+                        resizable: false,
+                        width: 75,
+                        maxWidth: 75
+                    },
+                  {
+                      id: 'uuid',
+                      name: 'UUID',
+                      field: 'uuid',
+                      sortable: false,
+                      resizable: true
+                  },
+                  {
+                      id: 'filename',
+                      name: nf._.msg('nf-queue-listing.FileName'),
+                      field: 'filename',
+                      sortable: false,
+                      resizable: true
+                  },
+                    {
+                        id: 'size',
+                      name: nf._.msg('nf-queue-listing.FileSize'),
+                        field: 'size',
+                        sortable: false,
+                        resizable: true,
+                        defaultSortAsc: false,
+                        formatter: dataSizeFormatter
+                    },
+                    {
+                        id: 'queuedDuration',
+                      name: nf._.msg('nf-queue-listing.queuedDuration'),
+                        field: 'queuedDuration',
+                        sortable: false,
+                        resizable: true,
+                        formatter: durationFormatter
+                    },
+                    {
+                        id: 'lineageDuration',
+                      name: nf._.msg('nf-queue-listing.lineageDuration'),
+                        field: 'lineageDuration',
+                        sortable: false,
+                        resizable: true,
+                        formatter: durationFormatter
+                    },
+                    {
+                        id: 'penalized',
+                      name: nf._.msg('nf-queue-listing.penalized'),
+                        field: 'penalized',
+                        sortable: false,
+                        resizable: false,
+                        width: 100,
+                        maxWidth: 100,
+                        formatter: penalizedFormatter
+                    }
+                ];
+    
+                // conditionally show the cluster node identifier
+              if (nfClusterSummary.isClustered()) {
+                    queueListingColumns.push({
+                        id: 'clusterNodeAddress',
+                      name: nf._.msg('nf-queue-listing.node'),
+                        field: 'clusterNodeAddress',
+                        sortable: false,
+                        resizable: true
+                    });
+                }
+    
+                // add an actions column when the user can access provenance
+              if (nfCommon.canAccessProvenance()) {
+                    // function for formatting actions
+                    var actionsFormatter = function () {
+                      return '<div title="'+nf._.msg('nf-processor-configuration.Provenance')+'" class="pointer icon icon-provenance view-provenance"></div>';
+                    };
+    
+                    queueListingColumns.push({
+                        id: 'actions',
+                        name: '&nbsp;',
+                        resizable: false,
+                        formatter: actionsFormatter,
+                        sortable: false,
+                        width: 50,
+                        maxWidth: 50
+                    });
+                }
+    
+                var queueListingOptions = {
+                    forceFitColumns: true,
+                    enableTextSelectionOnCells: true,
+                    enableCellNavigation: false,
+                    enableColumnReorder: false,
+                    autoEdit: false,
+                    rowHeight: 24
+                };
+    
+                // initialize the dataview
+                var queueListingData = new Slick.Data.DataView({
+                    inlineFilters: false
+                });
+                queueListingData.setItems([]);
+    
+                // initialize the grid
+                var queueListingGrid = new Slick.Grid('#queue-listing-table', queueListingData, queueListingColumns, queueListingOptions);
+                queueListingGrid.setSelectionModel(new Slick.RowSelectionModel());
+                queueListingGrid.registerPlugin(new Slick.AutoTooltips());
+    
+                // configure a click listener
+                queueListingGrid.onClick.subscribe(function (e, args) {
+                    var target = $(e.target);
+    
+                    // get the node at this row
+                    var item = queueListingData.getItem(args.row);
+    
+                    // determine the desired action
+                    if (queueListingGrid.getColumns()[args.cell].id === 'moreDetails') {
+                        if (target.hasClass('show-flowfile-details')) {
+                            showFlowFileDetails(item);
+                        }
+                    } else if (queueListingGrid.getColumns()[args.cell].id === 'actions') {
+                        if (target.hasClass('view-provenance')) {
+                            // close the settings dialog
+                            $('#shell-close-button').click();
+    
+                            // open the provenance page with the specified component
+                          nfShell.showPage('provenance?' + $.param({
+                                    flowFileUuid: item.uuid
+                                }));
+                        }
+                    }
+                });
+    
+                // wire up the dataview to the grid
+                queueListingData.onRowCountChanged.subscribe(function (e, args) {
+                    queueListingGrid.updateRowCount();
+                    queueListingGrid.render();
+    
+                    // update the total number of displayed flowfiles
+                    $('#displayed-flowfiles').text(args.current);
+                });
+                queueListingData.onRowsChanged.subscribe(function (e, args) {
+                    queueListingGrid.invalidateRows(args.rows);
+                    queueListingGrid.render();
+                });
+    
+                // hold onto an instance of the grid
+                $('#queue-listing-table').data('gridInstance', queueListingGrid);
+    
+                // initialize the number of display items
+                $('#displayed-flowfiles').text('0');
+            },
+    
+            /**
+             * Initializes the flowfile details dialog.
+             */
+            initFlowFileDetailsDialog: function () {
+                $('#content-download').on('click', downloadContent);
+    
+                // only show if content viewer is configured
+              if (nfCommon.isContentViewConfigured()) {
+                    $('#content-view').show();
+                    $('#content-view').on('click', viewContent);
+                }
+    
+                $('#flowfile-details-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                        name: 'Details',
+                        tabContentId: 'flowfile-details-tab-content'
+                    }, {
+                        name: 'Attributes',
+                        tabContentId: 'flowfile-attributes-tab-content'
+                    }]
+                });
+    
+                $('#flowfile-details-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                  headerText: nf._.msg('nf-queue-listing.FlowFile'),
+                    buttons: [{
+                      buttonText: nf._.msg('nf-queue-listing.Ok'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#flowfile-details-dialog').modal('hide');
+                            }
+                        }
+                    }],
+                    handler: {
+                        close: function () {
+                            // clear the details
+                            $('#flowfile-attributes-container').empty();
+                            $('#flowfile-cluster-node-id').text('');
+                            $('#additional-flowfile-details').empty();
+                        },
+                        open: function () {
+                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                        }
+                    }
+                });
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+                var queueListingGrid = $('#queue-listing-table').data('gridInstance');
+              if (nfCommon.isDefinedAndNotNull(queueListingGrid)) {
+                    queueListingGrid.resizeCanvas();
+                }
+            },
+    
+            /**
+             * Shows the listing of the FlowFiles from a given connection.
+             *
+             * @param   {object}    The connection
+             */
+            listQueue: function (connection) {
+                // perform the initial listing
+                performListing(connection).done(function () {
+                    // update the connection name
+                    var connectionName = '';
+                    if (connection.permissions.canRead) {
+                      connectionName = nfCanvasUtils.formatConnectionName(connection.component);
+                    }
+                    if (connectionName === '') {
+                        connectionName = 'Connection';
+                    }
+                    $('#queue-listing-header-text').text(connectionName);
+    
+                    // show the listing container
+                  nfShell.showContent('#queue-listing-container').done(function () {
+                        $('#queue-listing-table').removeData('connection');
+    
+                        // clear the table
+                        var queueListingGrid = $('#queue-listing-table').data('gridInstance');
+                        var queueListingData = queueListingGrid.getData();
+    
+                        // clear the flowfiles
+                        queueListingData.beginUpdate();
+                        queueListingData.setItems([], 'uuid');
+                        queueListingData.endUpdate();
+    
+                        // reset stats
+                        $('#displayed-flowfiles, #total-flowfiles-count').text('0');
+                      $('#total-flowfiles-size').text(nfCommon.formatDataSize(0));
+                    });
+    
+                    // adjust the table size
+                  nfQueueListing.resetTableSize();
+    
+                    // store the connection for access later
+                    $('#queue-listing-table').data('connection', connection);
+                });
+            }
+        };
+    
+      return nfQueueListing;
+  }));
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
new file mode 100644
index 000000000000..271271319774
--- /dev/null
+++ 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
@@ -0,0 +1,208 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'd3',
+                'nf.ErrorHandler',
+                'nf.Common',
+                'nf.Dialog',
+                'nf.Client',
+                'nf.CanvasUtils',
+                'nf.ng.Bridge',
+                'nf.RemoteProcessGroup'],
+            function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup) {
+                return (nf.RemoteProcessGroupConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.RemoteProcessGroupConfiguration =
+            factory(require('jquery'),
+                require('d3'),
+                require('nf.ErrorHandler'),
+                require('nf.Common'),
+                require('nf.Dialog'),
+                require('nf.Client'),
+                require('nf.CanvasUtils'),
+                require('nf.ng.Bridge'),
+                require('nf.RemoteProcessGroup')));
+    } else {
+        nf.RemoteProcessGroupConfiguration = factory(root.$,
+            root.d3,
+            root.nf.ErrorHandler,
+            root.nf.Common,
+            root.nf.Dialog,
+            root.nf.Client,
+            root.nf.CanvasUtils,
+            root.nf.ng.Bridge,
+            root.nf.RemoteProcessGroup);
+    }
+}(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup) {
+    'use strict';
+
+    return {
+        init: function () {
+            $('#remote-process-group-configuration').modal({
+                headerText: 'Configure Remote Process Group',
+                scrollableContentStyle: 'scrollable',
+                buttons: [{
+                    buttonText: 'Apply',
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            var remoteProcessGroupId = $('#remote-process-group-id').text();
+                            var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum();
+
+                            // create the remote process group details
+                            var remoteProcessGroupEntity = {
+                                'revision': nfClient.getRevision(remoteProcessGroupData),
+                                'component': {
+                                    id: remoteProcessGroupId,
+                                    communicationsTimeout: $('#remote-process-group-timeout').val(),
+                                    yieldDuration: $('#remote-process-group-yield-duration').val(),
+                                    transportProtocol: $('#remote-process-group-transport-protocol-combo').combo('getSelectedOption').value,
+                                    proxyHost: $('#remote-process-group-proxy-host').val(),
+                                    proxyPort: $('#remote-process-group-proxy-port').val(),
+                                    proxyUser: $('#remote-process-group-proxy-user').val(),
+                                    proxyPassword: $('#remote-process-group-proxy-password').val(),
+                                    localNetworkInterface: $('#remote-process-group-local-network-interface').val()
+                                }
+                            };
+
+                            // update the selected component
+                            $.ajax({
+                                type: 'PUT',
+                                data: JSON.stringify(remoteProcessGroupEntity),
+                                url: remoteProcessGroupData.uri,
+                                dataType: 'json',
+                                contentType: 'application/json'
+                            }).done(function (response) {
+                                // refresh the remote process group component
+                                nfRemoteProcessGroup.set(response);
+
+                                // inform Angular app values have changed
+                                nfNgBridge.digest();
+
+                                // close the details panel
+                                $('#remote-process-group-configuration').modal('hide');
+                            }).fail(function (xhr, status, error) {
+                                if (xhr.status === 400) {
+                                    var errors = xhr.responseText.split('\n');
+
+                                    var content;
+                                    if (errors.length === 1) {
+                                        content = $('<span></span>').text(errors[0]);
+                                    } else {
+                                        content = nfCommon.formatUnorderedList(errors);
+                                    }
+
+                                    nfDialog.showOkDialog({
+                                        dialogContent: content,
+                                        headerText: 'Remote Process Group Configuration'
+                                    });
+                                } else {
+                                    nfErrorHandler.handleAjaxError(xhr, status, error);
+                                }
+                            });
+                        }
+                    }
+                },
+                    {
+                        buttonText: 'Cancel',
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#remote-process-group-configuration').modal('hide');
+                            }
+                        }
+                    }],
+                handler: {
+                    close: function () {
+                        // clear the remote process group details
+                        $('#remote-process-group-id').text('');
+                        $('#remote-process-group-name').text('');
+                        $('#remote-process-group-urls').text('');
+                        $('#remote-process-group-timeout').val('');
+                        $('#remote-process-group-yield-duration').val('');
+                        $('#remote-process-group-transport-protocol-combo').combo('setSelectedOption', {
+                            value: 'RAW'
+                        });
+                        $('#remote-process-group-local-network-interface').val('');
+                        $('#remote-process-group-proxy-host').val('');
+                        $('#remote-process-group-proxy-port').val('');
+                        $('#remote-process-group-proxy-user').val('');
+                        $('#remote-process-group-proxy-password').val('');
+                    }
+                }
+            });
+            // initialize the transport protocol combo
+            $('#remote-process-group-transport-protocol-combo').combo({
+                options: [{
+                    text: 'RAW',
+                    value: 'RAW'
+                }, {
+                    text: 'HTTP',
+                    value: 'HTTP'
+                }]
+            });
+        },
+
+        /**
+         * Shows the details for the remote process group in the specified selection.
+         *
+         * @argument {selection} selection      The selection
+         */
+        showConfiguration: function (selection) {
+            // if the specified component is a remote process group, load its properties
+            if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                var selectionData = selection.datum();
+
+                // populate the port settings
+                $('#remote-process-group-id').text(selectionData.id);
+                $('#remote-process-group-name').text(selectionData.component.name);
+                $('#remote-process-group-urls').text(selectionData.component.targetUris);
+
+                // populate the text fields
+                $('#remote-process-group-timeout').val(selectionData.component.communicationsTimeout);
+                $('#remote-process-group-yield-duration').val(selectionData.component.yieldDuration);
+                $('#remote-process-group-proxy-host').val(selectionData.component.proxyHost);
+                $('#remote-process-group-proxy-port').val(selectionData.component.proxyPort);
+                $('#remote-process-group-proxy-user').val(selectionData.component.proxyUser);
+                $('#remote-process-group-proxy-password').val(selectionData.component.proxyPassword);
+                $('#remote-process-group-local-network-interface').val(selectionData.component.localNetworkInterface);
+
+                // select the appropriate transport-protocol
+                $('#remote-process-group-transport-protocol-combo').combo('setSelectedOption', {
+                    value: selectionData.component.transportProtocol
+                });
+
+                // show the details
+                $('#remote-process-group-configuration').modal('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/canvas/nf-remote-process-group-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
new file mode 100644
index 000000000000..dca53d9e56e6
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
@@ -0,0 +1,106 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.CanvasUtils'],
+              function ($, nfCommon, nfCanvasUtils) {
+                  return (nf.RemoteProcessGroupDetails = factory($, nfCommon, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.RemoteProcessGroupDetails =
+              factory(require('jquery'),
+                  require('nf.Common'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.RemoteProcessGroupDetails = factory(root.$,
+              root.nf.Common,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, nfCommon, nfCanvasUtils) {
+      'use strict';
+  
+        return {
+            init: function () {
+                $('#remote-process-group-details').modal({
+                  headerText: nf._.msg('nf-remote-process-group-details.RemoteProcessGroupDetails'),
+                    scrollableContentStyle: 'scrollable',
+                    buttons: [{
+                      buttonText: nf._.msg('nf-remote-process-group-details.Ok'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#remote-process-group-details').modal('hide');
+                            }
+                        }
+                    }],
+                    handler: {
+                        close: function () {
+                            // clear the remote process group details
+                          nfCommon.clearField('read-only-remote-process-group-id');
+                          nfCommon.clearField('read-only-remote-process-group-name');
+                          nfCommon.clearField('read-only-remote-process-group-urls');
+                          nfCommon.clearField('read-only-remote-process-group-timeout');
+                          nfCommon.clearField('read-only-remote-process-group-yield-duration');
+                          nfCommon.clearField('read-only-remote-process-group-transport-protocol');
+                          nfCommon.clearField('read-only-remote-process-group-local-network-interface');
+                          nfCommon.clearField('read-only-remote-process-group-proxy-host');
+                          nfCommon.clearField('read-only-remote-process-group-proxy-port');
+                          nfCommon.clearField('read-only-remote-process-group-proxy-user');
+                          nfCommon.clearField('read-only-remote-process-group-proxy-password');
+                        }
+                    }
+                });
+            },
+    
+            /**
+             * Shows the details for the remote process group in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            showDetails: function (selection) {
+                // if the specified component is a remote process group, load its properties
+              if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // populate the port settings
+                  nfCommon.populateField('read-only-remote-process-group-id', selectionData.id);
+                  nfCommon.populateField('read-only-remote-process-group-name', selectionData.component.name);
+                  nfCommon.populateField('read-only-remote-process-group-urls', selectionData.component.targetUris);
+                  nfCommon.populateField('read-only-remote-process-group-timeout', selectionData.component.communicationsTimeout);
+                  nfCommon.populateField('read-only-remote-process-group-yield-duration', selectionData.component.yieldDuration);
+                  nfCommon.populateField('read-only-remote-process-group-transport-protocol', selectionData.component.transportProtocol);
+                  nfCommon.populateField('read-only-remote-process-group-local-network-interface', selectionData.component.localNetworkInterface);
+                  nfCommon.populateField('read-only-remote-process-group-proxy-host', selectionData.component.proxyHost);
+                  nfCommon.populateField('read-only-remote-process-group-proxy-port', selectionData.component.proxyPort);
+                  nfCommon.populateField('read-only-remote-process-group-proxy-user', selectionData.component.proxyUser);
+                  nfCommon.populateField('read-only-remote-process-group-proxy-password', selectionData.component.proxyPassword);
+    
+                    // show the details
+                    $('#remote-process-group-details').modal('show');
+                }
+            }
+        };
+  }));
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
new file mode 100644
index 000000000000..2fb18bc3eab9
--- /dev/null
+++ 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
@@ -0,0 +1,592 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.CanvasUtils',
+                  'nf.ng.Bridge',
+                  'nf.RemoteProcessGroup'],
+              function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup) {
+                  return (nf.RemoteProcessGroupPorts = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.RemoteProcessGroupPorts =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ng.Bridge'),
+                  require('nf.RemoteProcessGroup')));
+      } else {
+          nf.RemoteProcessGroupPorts = factory(root.$,
+              root.d3,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.CanvasUtils,
+              root.nf.ng.Bridge,
+              root.nf.RemoteProcessGroup);
+      }
+  }(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfClient, nfCanvasUtils, nfNgBridge, nfRemoteProcessGroup) {
+      'use strict';
+    
+        /**
+         * Initializes the remote port configuration dialog.
+         */
+        var initRemotePortConfigurationDialog = function () {
+            $('#remote-port-configuration').modal({
+              headerText: nf._.msg('nf-remote-process-group-ports.ConfigureRemotePort'),
+                scrollableContentStyle: 'scrollable',
+                buttons: [{
+                  buttonText: nf._.msg('nf-remote-process-group-ports.Apply'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            var remotePortConcurrentTasks = $('#remote-port-concurrent-tasks').val();
+    
+                            // ensure the property name and value is specified
+                            if ($.isNumeric(remotePortConcurrentTasks)) {
+                                var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
+                                var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum();
+                                var remotePortId = $('#remote-port-id').text();
+    
+                                // create the remote process group details
+                                var remoteProcessGroupPortEntity = {
+                                  'revision': nfClient.getRevision(remoteProcessGroupData),
+                                    'remoteProcessGroupPort': {
+                                        id: remotePortId,
+                                        groupId: remoteProcessGroupId,
+                                        useCompression: $('#remote-port-use-compression').hasClass('checkbox-checked'),
+                                        concurrentlySchedulableTaskCount: remotePortConcurrentTasks
+                                    }
+                                };
+    
+                                // determine the type of port this is
+                                var portContextPath = '/output-ports/';
+                                if ($('#remote-port-type').text() === 'input') {
+                                    portContextPath = '/input-ports/';
+                                }
+    
+                                // update the selected component
+                                $.ajax({
+                                    type: 'PUT',
+                                    data: JSON.stringify(remoteProcessGroupPortEntity),
+                                    url: remoteProcessGroupData.uri + portContextPath + encodeURIComponent(remotePortId),
+                                    dataType: 'json',
+                                    contentType: 'application/json'
+                                }).done(function (response) {
+                                  // Update the RemoteProcessGroup revision.
+                                  // RemotePorts share revision with parent RemoteProcessGroup.
+                                  remoteProcessGroupData.revision = response.revision;
+    
+                                    // get the response
+                                    var remotePort = response.remoteProcessGroupPort;
+    
+                                    // determine the compression label
+                                    var compressionLabel = 'No';
+                                    if (remotePort.useCompression === true) {
+                                        compressionLabel = 'Yes';
+                                    }
+    
+                                    // set the new values
+                                    $('#' + remotePortId + '-concurrent-tasks').text(remotePort.concurrentlySchedulableTaskCount);
+                                    $('#' + remotePortId + '-compression').text(compressionLabel);
+                                }).fail(function (xhr, status, error) {
+                                    if (xhr.status === 400) {
+                                        var errors = xhr.responseText.split('\n');
+    
+                                        var content;
+                                        if (errors.length === 1) {
+                                            content = $('<span></span>').text(errors[0]);
+                                        } else {
+                                          content = nfCommon.formatUnorderedList(errors);
+                                        }
+    
+                                      nfDialog.showOkDialog({
+                                            dialogContent: content,
+                                          headerText: nf._.msg('nf-remote-process-group-ports.RemoteProcessGroupPorts')
+                                        });
+                                    } else {
+                                      nfErrorHandler.handleAjaxError(xhr, status, error);
+                                    }
+                                }).always(function () {
+                                    // close the dialog
+                                    $('#remote-port-configuration').modal('hide');
+                                });
+                            } else {
+                              nfDialog.showOkDialog({
+                                  headerText: nf._.msg('nf-remote-process-group-ports.RemoteProcessGroupPorts'),
+                                  dialogContent: nf._.msg('nf-remote-process-group-ports.Message1')
+                                });
+    
+                                // close the dialog
+                                $('#remote-port-configuration').modal('hide');
+                            }
+                        }
+                    }
+                },
+                    {
+                      buttonText: nf._.msg('nf-remote-process-group-ports.Cancel'),
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#remote-port-configuration').modal('hide');
+                            }
+                        }
+                    }],
+                handler: {
+                    close: function () {
+                        // clear the name/value textfields
+                        $('#remote-port-id').text('');
+                        $('#remote-port-name').text('');
+                        $('#remote-port-concurrent-tasks').val('');
+                        $('#remote-port-use-compression').removeClass('checkbox-checked checkbox-unchecked');
+                    }
+                }
+            });
+        };
+    
+        /**
+         * Initializes the remote process group configuration dialog.
+         */
+        var initRemoteProcessGroupConfigurationDialog = function () {
+            $('#remote-process-group-ports').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-remote-process-group-ports.RemoteProcessGroupPorts'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-remote-process-group-ports.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // get the component in question
+                            var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
+                            var remoteProcessGroup = d3.select('#id-' + remoteProcessGroupId);
+                            var remoteProcessGroupData = remoteProcessGroup.datum();
+    
+                            // if can modify, the over status of this node may have changed
+                          if (nfCanvasUtils.canModify(remoteProcessGroup)) {
+                                // reload the remote process group
+                              nfRemoteProcessGroup.reload(remoteProcessGroupData.id);
+                            }
+    
+                            // hide the dialog
+                            $('#remote-process-group-ports').modal('hide');
+                        }
+                    }
+                }],
+                handler: {
+                    close: function () {
+                        // clear the remote process group details
+                        $('#remote-process-group-ports-id').text('');
+                        $('#remote-process-group-ports-name').text('');
+                      $('#remote-process-group-ports-urls').text('');
+    
+                        // clear any tooltips
+                        var dialog = $('#remote-process-group-ports');
+                      nfCommon.cleanUpTooltips(dialog, 'div.remote-port-removed');
+                      nfCommon.cleanUpTooltips(dialog, 'div.concurrent-tasks-info');
+    
+                        // clear the input and output ports
+                        $('#remote-process-group-input-ports-container').empty();
+                        $('#remote-process-group-output-ports-container').empty();
+                    }
+                }
+            });
+        };
+    
+        /**
+         * Creates the markup for configuration concurrent tasks for a port.
+         *
+         * @argument {jQuery} container         The container
+         * @argument {object} port              The port
+         * @argument {string} portType          The type of port
+         */
+        var createPortOption = function (container, port, portType) {
+          var portId = nfCommon.escapeHtml(port.id);
+            var portContainer = $('<div class="remote-port-container"></div>').appendTo(container);
+            var portContainerEditContainer = $('<div class="remote-port-edit-container"></div>').appendTo(portContainer);
+            var portContainerDetailsContainer = $('<div class="remote-port-details-container"></div>').appendTo(portContainer);
+    
+            // get the component in question
+            var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
+            var remoteProcessGroup = d3.select('#id-' + remoteProcessGroupId);
+    
+            // if can modify, support updating the remote group port
+          if (nfCanvasUtils.canModify(remoteProcessGroup)) {
+                // show the enabled transmission switch
+                var transmissionSwitch;
+                if (port.connected === true) {
+                    if (port.transmitting === true) {
+                      transmissionSwitch = (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary enabled-active-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                        transmissionSwitch.click();
+                    } else {
+                        if (port.exists === true) {
+                          transmissionSwitch = (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary enabled-inactive-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                        } else {
+                          (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                        }
+                    }
+                } else {
+                    if (port.transmitting === true) {
+                      (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-active-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                    } else {
+                      (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                    }
+                }
+    
+                // only support configuration when the remote port exists
+                if (port.exists === true && port.connected === true) {
+                    // create the button for editing the ports configuration
+                    var editRemotePort = $('<button class="button edit-remote-port fa fa-pencil"></button>').click(function () {
+                        var portName = $('#' + portId + '-name').text();
+                        var portConcurrentTasks = $('#' + portId + '-concurrent-tasks').text();
+                        var portCompression = $('#' + portId + '-compression').text() === 'Yes';
+    
+                        // show the configuration dialog
+                        configureRemotePort(port.id, portName, portConcurrentTasks, portCompression, portType);
+                    }).appendTo(portContainerEditContainer);
+    
+                    // show/hide the edit button as appropriate
+                    if (port.transmitting === true) {
+                        editRemotePort.hide();
+                    } else {
+                        editRemotePort.show();
+                    }
+                } else if (port.exists === false) {
+                    $('<div class="remote-port-removed"/>').appendTo(portContainerEditContainer).qtip($.extend({},
+                      nfCommon.config.tooltipConfig,
+                        {
+                          content: nf._.msg('nf-remote-process-group-ports.Message3')
+                        }));
+                }
+    
+                // only allow modifications to transmission when the swtich is defined
+              if (nfCommon.isDefinedAndNotNull(transmissionSwitch)) {
+                    // create toggle for changing transmission state
+                    transmissionSwitch.click(function () {
+                        // get the component being edited
+                        var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
+                        var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum();
+    
+                        // determine the new transmission status
+                        var isTransmitting = false;
+                        if (transmissionSwitch.hasClass('enabled-inactive-transmission')) {
+                            isTransmitting = true;
+                        }
+    
+                        // create the remote process group details
+                        var remoteProcessGroupPortEntity = {
+                          'revision': nfClient.getRevision(remoteProcessGroupData),
+                            'remoteProcessGroupPort': {
+                                id: port.id,
+                                groupId: remoteProcessGroupId,
+                                transmitting: isTransmitting
+                            }
+                        };
+    
+                        // determine the type of port this is
+                        var portContextPath = '/output-ports/';
+                        if (portType === 'input') {
+                            portContextPath = '/input-ports/';
+                        }
+    
+                        // update the selected component
+                        $.ajax({
+                            type: 'PUT',
+                            data: JSON.stringify(remoteProcessGroupPortEntity),
+                            url: remoteProcessGroupData.uri + portContextPath + encodeURIComponent(port.id),
+                            dataType: 'json',
+                            contentType: 'application/json'
+                        }).done(function (response) {
+                          // Update the RemoteProcessGroup revision.
+                          // RemotePorts share revision with parent RemoteProcessGroup.
+                          remoteProcessGroupData.revision = response.revision;
+    
+                            // get the response
+                            var remotePort = response.remoteProcessGroupPort;
+    
+                            // if the remote port no long exists, disable the switch
+                            if (remotePort.exists === false) {
+                                // make the transmission switch disabled
+                                transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('disabled-inactive-transmission').off('click');
+    
+                                // hide the edit button
+                              if (nfCommon.isDefinedAndNotNull(editRemotePort)) {
+                                    editRemotePort.hide();
+                                }
+                            } else {
+                                // update the transmission status accordingly
+                                if (remotePort.transmitting === true) {
+                                    // mark the status as transmitting
+                                    transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('enabled-active-transmission');
+    
+                                    // hide the edit button
+                                  if (nfCommon.isDefinedAndNotNull(editRemotePort)) {
+                                        editRemotePort.hide();
+                                    }
+                                } else {
+                                    // mark the status as not transmitting
+                                    transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('enabled-inactive-transmission');
+    
+                                    // show the edit button
+                                  if (nfCommon.isDefinedAndNotNull(editRemotePort)) {
+                                        editRemotePort.show();
+                                    }
+                                }
+                            }
+                        }).fail(function (xhr, status, error) {
+                            if (xhr.status === 400) {
+                                var errors = xhr.responseText.split('\n');
+    
+                                var content;
+                                if (errors.length === 1) {
+                                    content = $('<span></span>').text(errors[0]);
+                                } else {
+                                  content = nfCommon.formatUnorderedList(errors);
+                                }
+    
+                              nfDialog.showOkDialog({
+                                  headerText: nf._.msg('nf-remote-process-group-ports.RemoteProcessGroupPorts'),
+                                    dialogContent: content
+                                });
+                            } else {
+                              nfErrorHandler.handleAjaxError(xhr, status, error);
+                            }
+                        });
+                    });
+                }
+            } else {
+                // show the disabled transmission switch
+                if (port.transmitting === true) {
+                  (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-active-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                } else {
+                  (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+                }
+            }
+    
+            // add the port id and name
+            $('<div id="' + portId + '-id" class="remote-port-id hidden"></div>').text(port.id).appendTo(portContainerDetailsContainer);
+            $('<div id="' + portId + '-name" class="remote-port-name ellipsis"></div>').text(port.name).appendTo(portContainerDetailsContainer);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(portContainerDetailsContainer);
+    
+            // add the comments for this port
+          if (nfCommon.isBlank(port.comments)) {
+              $('<div class="remote-port-description unset">'+nf._.msg('nf-remote-process-group-ports.description')+'</div>').appendTo(portContainerDetailsContainer);
+            } else {
+                $('<div class="remote-port-description"></div>').text(port.comments).appendTo(portContainerDetailsContainer);
+            }
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(portContainerDetailsContainer);
+    
+            var concurrentTasksContainer = $('<div class="concurrent-task-container"></div>').appendTo(portContainerDetailsContainer);
+    
+            // concurrent tasks
+          var concurrentTasks = $('<div class="setting-field"></div>').append($('<div id="' + portId + '-concurrent-tasks"></div>').text(port.concurrentlySchedulableTaskCount));
+    
+            // add this ports concurrent tasks
+            $('<div>' +
+                '<div class="setting-name">' +
+                'Concurrent tasks' +
+                '<div class="processor-setting concurrent-tasks-info fa fa-question-circle"></div>' +
+                '</div>' +
+                '</div>').append(concurrentTasks).appendTo(concurrentTasksContainer).find('div.concurrent-tasks-info').qtip($.extend({},
+              nfCommon.config.tooltipConfig,
+                {
+                  content: nf._.msg('nf-remote-process-group-ports.Message4')
+                }));
+    
+            var compressionContainer = $('<div class="compression-container"></div>').appendTo(portContainerDetailsContainer);
+    
+            // determine the compression label
+            var compressionLabel = 'No';
+            if (port.useCompression === true) {
+                compressionLabel = 'Yes';
+            }
+    
+            // add this ports compression config
+            $('<div>' +
+                '<div class="setting-name">' +
+                'Compressed' +
+                '</div>' +
+              '<div class="setting-field">' +
+                '<div id="' + portId + '-compression">' + compressionLabel + '</div>' +
+                '</div>' +
+                '</div>').appendTo(compressionContainer);
+    
+            // clear
+            $('<div class="clear"></div>').appendTo(portContainer);
+    
+            // apply ellipsis where appropriate
+            portContainer.find('.ellipsis').ellipsis();
+    
+          // inform Angular app values have changed
+          nfNgBridge.digest();
+        };
+    
+        /**
+         * Configures the specified remote port.
+         *
+         * @argument {string} portId            The port id
+         * @argument {string} portName          The port name
+         * @argument {int} portConcurrentTasks  The number of concurrent tasks for the port
+         * @argument {boolean} portCompression  The compression flag for the port
+         * @argument {string} portType          The type of port this is
+         */
+        var configureRemotePort = function (portId, portName, portConcurrentTasks, portCompression, portType) {
+            // set port identifiers
+            $('#remote-port-id').text(portId);
+            $('#remote-port-type').text(portType);
+    
+            // set port configuration
+            var checkState = 'checkbox-unchecked';
+            if (portCompression === true) {
+                checkState = 'checkbox-checked';
+            }
+            $('#remote-port-use-compression').addClass(checkState);
+            $('#remote-port-concurrent-tasks').val(portConcurrentTasks);
+    
+            // set the port name
+            $('#remote-port-name').text(portName).ellipsis();
+    
+            // show the dialog
+            $('#remote-port-configuration').modal('show');
+        };
+    
+        return {
+            init: function () {
+                initRemotePortConfigurationDialog();
+                initRemoteProcessGroupConfigurationDialog();
+            },
+    
+            /**
+             * Shows the details for the remote process group in the specified selection.
+             *
+             * @argument {selection} selection      The selection
+             */
+            showPorts: function (selection) {
+                // if the specified component is a remote process group, load its properties
+              if (nfCanvasUtils.isRemoteProcessGroup(selection)) {
+                    var selectionData = selection.datum();
+    
+                    // load the properties for the specified component
+                    $.ajax({
+                        type: 'GET',
+                        url: selectionData.uri,
+                        dataType: 'json'
+                    }).done(function (response) {
+                        var remoteProcessGroup = response.component;
+    
+                        // set the model locally
+                      nfRemoteProcessGroup.set(response);
+    
+                        // populate the port settings
+                        $('#remote-process-group-ports-id').text(remoteProcessGroup.id);
+                        $('#remote-process-group-ports-name').text(remoteProcessGroup.name);
+                      $('#remote-process-group-ports-urls').text(remoteProcessGroup.targetUris);
+    
+                        // get the contents
+                        var remoteProcessGroupContents = remoteProcessGroup.contents;
+                      if (nfCommon.isDefinedAndNotNull(remoteProcessGroupContents)) {
+                            var connectedInputPorts = [];
+                            var disconnectedInputPorts = [];
+    
+                            // show connected ports first
+                            var inputPortContainer = $('#remote-process-group-input-ports-container');
+                            $.each(remoteProcessGroupContents.inputPorts, function (_, inputPort) {
+                                if (inputPort.connected === true) {
+                                    connectedInputPorts.push(inputPort);
+                                } else {
+                                    disconnectedInputPorts.push(inputPort);
+                                }
+                            });
+    
+                            // add all connected input ports
+                            $.each(connectedInputPorts, function (_, inputPort) {
+                                createPortOption(inputPortContainer, inputPort, 'input');
+                            });
+    
+                            // add all disconnected input ports
+                            $.each(disconnectedInputPorts, function (_, inputPort) {
+                                createPortOption(inputPortContainer, inputPort, 'input');
+                            });
+    
+                          if (nfCommon.isEmpty(connectedInputPorts) && nfCommon.isEmpty(disconnectedInputPorts)) {
+                              $('<div class="unset"></div>').text("No ports to display").appendTo(inputPortContainer);
+                          }
+  
+                            var connectedOutputPorts = [];
+                            var disconnectedOutputPorts = [];
+    
+                            // process all the output ports
+                            var outputPortContainer = $('#remote-process-group-output-ports-container');
+                            $.each(remoteProcessGroupContents.outputPorts, function (i, outputPort) {
+                                if (outputPort.connected === true) {
+                                    connectedOutputPorts.push(outputPort);
+                                } else {
+                                    disconnectedOutputPorts.push(outputPort);
+                                }
+                            });
+    
+                          // add all connected output ports
+                            $.each(connectedOutputPorts, function (_, outputPort) {
+                                createPortOption(outputPortContainer, outputPort, 'output');
+                            });
+    
+                          // add all disconnected output ports
+                            $.each(disconnectedOutputPorts, function (_, outputPort) {
+                                createPortOption(outputPortContainer, outputPort, 'output');
+                            });
+    
+                          if (nfCommon.isEmpty(connectedOutputPorts) && nfCommon.isEmpty(disconnectedOutputPorts)) {
+                              $('<div class="unset"></div>').text("No ports to display").appendTo(outputPortContainer);
+                          }
+                        }
+    
+                        // show the details
+                        $('#remote-process-group-ports').modal('show');
+                  }).fail(nfErrorHandler.handleAjaxError);
+                }
+            }
+        };
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
new file mode 100644
index 000000000000..832cdfd0515f
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
@@ -0,0 +1,1098 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Connection',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.CanvasUtils'],
+              function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
+                  return (nf.RemoteProcessGroup = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.RemoteProcessGroup =
+              factory(require('jquery'),
+                  require('d3'),
+                  require('nf.Connection'),
+                  require('nf.Common'),
+                  require('nf.Client'),
+                  require('nf.CanvasUtils')));
+      } else {
+          nf.RemoteProcessGroup = factory(root.$,
+              root.d3,
+              root.nf.Connection,
+              root.nf.Common,
+              root.nf.Client,
+              root.nf.CanvasUtils);
+      }
+  }(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
+      'use strict';
+  
+      var nfConnectable;
+      var nfDraggable;
+      var nfSelectable;
+      var nfContextMenu;
+    
+        var PREVIEW_NAME_LENGTH = 30;
+    
+        var dimensions = {
+            width: 380,
+            height: 158
+        };
+    
+        // --------------------------------------------
+        // remote process groups currently on the graph
+        // --------------------------------------------
+    
+        var remoteProcessGroupMap;
+    
+      // -----------------------------------------------------------
+      // cache for components that are added/removed from the canvas
+      // -----------------------------------------------------------
+  
+      var removedCache;
+      var addedCache;
+  
+        // --------------------
+        // component containers
+        // --------------------
+    
+        var remoteProcessGroupContainer;
+    
+        // --------------------------
+        // privately scoped functions
+        // --------------------------
+    
+        /**
+         * Gets the process group comments.
+         *
+         * @param {object} d
+         */
+        var getProcessGroupComments = function (d) {
+          if (nfCommon.isBlank(d.component.comments)) {
+                return 'No comments specified';
+            } else {
+                return d.component.comments;
+            }
+        };
+    
+        /**
+         * Selects the remote process group elements against the current remote process group map.
+         */
+        var select = function () {
+            return remoteProcessGroupContainer.selectAll('g.remote-process-group').data(remoteProcessGroupMap.values(), function (d) {
+                return d.id;
+            });
+        };
+    
+        /**
+         * Renders the remote process groups in the specified selection.
+         *
+         * @param {selection} entered           The selection of remote process groups to be rendered
+         * @param {boolean} selected            Whether the remote process group is selected
+         */
+        var renderRemoteProcessGroups = function (entered, selected) {
+            if (entered.empty()) {
+                return;
+            }
+    
+            var remoteProcessGroup = entered.append('g')
+                .attr({
+                    'id': function (d) {
+                        return 'id-' + d.id;
+                    },
+                    'class': 'remote-process-group component'
+                })
+                .classed('selected', selected)
+              .call(nfCanvasUtils.position);
+    
+            // ----
+            // body
+            // ----
+    
+            // remote process group border
+            remoteProcessGroup.append('rect')
+                .attr({
+                    'class': 'border',
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': function (d) {
+                        return d.dimensions.height;
+                    },
+                    'fill': 'transparent',
+                    'stroke': 'transparent'
+                });
+    
+            // remote process group body
+            remoteProcessGroup.append('rect')
+                .attr({
+                    'class': 'body',
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': function (d) {
+                        return d.dimensions.height;
+                    },
+                    'filter': 'url(#component-drop-shadow)',
+                    'stroke-width': 0
+                });
+    
+            // remote process group name background
+            remoteProcessGroup.append('rect')
+                .attr({
+                    'width': function (d) {
+                        return d.dimensions.width;
+                    },
+                    'height': 32,
+                    'fill': '#b8c6cd'
+                });
+    
+            // remote process group name
+            remoteProcessGroup.append('text')
+                .attr({
+                    'x': 30,
+                    'y': 20,
+                    'width': 305,
+                    'height': 16,
+                    'class': 'remote-process-group-name'
+                });
+    
+            // always support selection
+          remoteProcessGroup.call(nfSelectable.activate).call(nfContextMenu.activate);
+        };
+    
+        // attempt of space between component count and icon for process group contents
+        var CONTENTS_SPACER = 5;
+    
+        /**
+         * Updates the process groups in the specified selection.
+         *
+         * @param {selection} updated               The process groups to be updated
+         */
+        var updateRemoteProcessGroups = function (updated) {
+            if (updated.empty()) {
+                return;
+            }
+    
+            // remote process group border authorization
+            updated.select('rect.border')
+                .classed('unauthorized', function (d) {
+                    return d.permissions.canRead === false;
+                });
+    
+            // remote process group body authorization
+            updated.select('rect.body')
+                .classed('unauthorized', function (d) {
+                    return d.permissions.canRead === false;
+                });
+    
+            updated.each(function (remoteProcessGroupData) {
+                var remoteProcessGroup = d3.select(this);
+                var details = remoteProcessGroup.select('g.remote-process-group-details');
+    
+                // update the component behavior as appropriate
+              nfCanvasUtils.editable(remoteProcessGroup, nfConnectable, nfDraggable);
+    
+                // if this processor is visible, render everything
+                if (remoteProcessGroup.classed('visible')) {
+                    if (details.empty()) {
+                        details = remoteProcessGroup.append('g').attr('class', 'remote-process-group-details');
+    
+                        // remote process group transmission status
+                        details.append('text')
+                            .attr({
+                                'class': 'remote-process-group-transmission-status',
+                                'x': 10,
+                                'y': 20
+                            });
+    
+                        // ------------------
+                        // details background
+                        // ------------------
+    
+                        details.append('rect')
+                            .attr({
+                                'x': 0,
+                                'y': 32,
+                                'width': function () {
+                                    return remoteProcessGroupData.dimensions.width
+                                },
+                                'height': 24,
+                                'fill': '#e3e8eb'
+                            });
+    
+                        // -------
+                        // details
+                        // -------
+    
+                        // remote process group secure transfer
+                        details.append('text')
+                            .attr({
+                                'class': 'remote-process-group-transmission-secure',
+                                'x': 10,
+                                'y': 48
+                            });
+    
+                        // remote process group uri
+                        details.append('text')
+                            .attr({
+                                'x': 30,
+                                'y': 48,
+                                'width': 305,
+                                'height': 12,
+                                'class': 'remote-process-group-uri'
+                            });
+    
+                        // ----------------
+                        // stats background
+                        // ----------------
+    
+                        // sent
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return remoteProcessGroupData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 66,
+                                'fill': '#f4f6f7'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return remoteProcessGroupData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 84,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // received
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return remoteProcessGroupData.dimensions.width;
+                                },
+                                'height': 19,
+                                'x': 0,
+                                'y': 85,
+                                'fill': '#ffffff'
+                            });
+    
+                        // border
+                        details.append('rect')
+                            .attr({
+                                'width': function () {
+                                    return remoteProcessGroupData.dimensions.width;
+                                },
+                                'height': 1,
+                                'x': 0,
+                                'y': 103,
+                                'fill': '#c7d2d7'
+                            });
+    
+                        // -----
+                        // stats
+                        // -----
+    
+                        // stats label container
+                        var remoteProcessGroupStatsLabel = details.append('g')
+                            .attr({
+                                'transform': 'translate(6, 75)'
+                            });
+    
+                        // sent label
+                        remoteProcessGroupStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'x': 4,
+                                'y': 5,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-canvas.Sent'));
+    
+                        // received label
+                        remoteProcessGroupStatsLabel.append('text')
+                            .attr({
+                                'width': 73,
+                                'height': 10,
+                                'x': 4,
+                                'y': 23,
+                                'class': 'stats-label'
+                            })
+                          .text(nf._.msg('nf-canvas.Received'));
+    
+                        // stats value container
+                        var remoteProcessGroupStatsValue = details.append('g')
+                            .attr({
+                                'transform': 'translate(95, 75)'
+                            });
+    
+                        // sent value
+                        var sentText = remoteProcessGroupStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'x': 4,
+                                'y': 5,
+                                'class': 'remote-process-group-sent stats-value'
+                            });
+    
+                        // sent count
+                        sentText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // sent size
+                        sentText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // sent ports
+                        sentText.append('tspan')
+                            .attr({
+                                'class': 'ports'
+                            });
+    
+                        // received value
+                        var receivedText = remoteProcessGroupStatsValue.append('text')
+                            .attr({
+                                'width': 180,
+                                'height': 10,
+                                'x': 4,
+                                'y': 23,
+                                'class': 'remote-process-group-received stats-value'
+                            });
+    
+                        // received ports
+                        receivedText.append('tspan')
+                            .attr({
+                                'class': 'ports'
+                            });
+    
+                        // received count
+                        receivedText.append('tspan')
+                            .attr({
+                                'class': 'count'
+                            });
+    
+                        // received size
+                        receivedText.append('tspan')
+                            .attr({
+                                'class': 'size'
+                            });
+    
+                        // stats value container
+                        var processGroupStatsInfo = details.append('g')
+                            .attr({
+                                'transform': 'translate(335, 75)'
+                            });
+    
+                        // sent info
+                        processGroupStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'x': 4,
+                                'y': 5,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-canvas.5min'));
+    
+                        // received info
+                        processGroupStatsInfo.append('text')
+                            .attr({
+                                'width': 25,
+                                'height': 10,
+                                'x': 4,
+                                'y': 23,
+                                'class': 'stats-info'
+                            })
+                          .text(nf._.msg('nf-canvas.5min'));
+    
+                        // --------
+                        // comments
+                        // --------
+    
+                        // process group comments
+                        details.append('text')
+                            .attr({
+                                'x': 10,
+                                'y': 121,
+                                'width': 342,
+                                'height': 22,
+                                'class': 'remote-process-group-comments'
+                            });
+    
+                        // -------------------
+                        // last refreshed time
+                        // -------------------
+    
+                        details.append('rect')
+                            .attr({
+                                'x': 0,
+                                'y': function () {
+                                    return remoteProcessGroupData.dimensions.height - 24;
+                                },
+                                'width': function () {
+                                    return remoteProcessGroupData.dimensions.width;
+                                },
+                                'height': 24,
+                                'fill': '#e3e8eb'
+                            });
+    
+                        details.append('text')
+                            .attr({
+                                'x': 370,
+                                'y': 150,
+                                'class': 'remote-process-group-last-refresh'
+                            });
+    
+                        // -------------------
+                        // active thread count
+                        // -------------------
+    
+                        // active thread count
+                        details.append('text')
+                            .attr({
+                                'class': 'active-thread-count-icon',
+                                'y': 20
+                            })
+                            .text('\ue83f');
+    
+                        // active thread icon
+                        details.append('text')
+                            .attr({
+                                'class': 'active-thread-count',
+                                'y': 20
+                            });
+    
+                        // ---------
+                        // bulletins
+                        // ---------
+    
+                        // bulletin background
+                        details.append('rect')
+                            .attr({
+                                'class': 'bulletin-background',
+                                'x': function () {
+                                    return remoteProcessGroupData.dimensions.width - 24;
+                                },
+                                'y': 32,
+                                'width': 24,
+                                'height': 24
+                            });
+    
+                        // bulletin icon
+                        details.append('text')
+                            .attr({
+                                'class': 'bulletin-icon',
+                                'x': function () {
+                                    return remoteProcessGroupData.dimensions.width - 17;
+                                },
+                                'y': 50
+                            })
+                            .text('\uf24a');
+                    }
+    
+                    if (remoteProcessGroupData.permissions.canRead) {
+                        // remote process group uri
+                        details.select('text.remote-process-group-uri')
+                            .each(function (d) {
+                                var remoteProcessGroupUri = d3.select(this);
+    
+                                // reset the remote process group name to handle any previous state
+                                remoteProcessGroupUri.text(null).selectAll('title').remove();
+    
+                                // apply ellipsis to the remote process group name as necessary
+                              nfCanvasUtils.ellipsis(remoteProcessGroupUri, d.component.targetUris);
+                            }).append('title').text(function (d) {
+                            return d.component.name;
+                        });
+    
+                        // update the process groups transmission status
+                        details.select('text.remote-process-group-transmission-secure')
+                            .text(function (d) {
+                                var icon = '';
+                                if (d.component.targetSecure === true) {
+                                    icon = '\uf023';
+                                } else {
+                                    icon = '\uf09c';
+                                }
+                                return icon;
+                            })
+                            .each(function (d) {
+                                // get the tip
+                                var tip = d3.select('#transmission-secure-' + d.id);
+    
+                                // remove the tip if necessary
+                                if (tip.empty()) {
+                                    tip = d3.select('#remote-process-group-tooltips').append('div')
+                                        .attr('id', function () {
+                                            return 'transmission-secure-' + d.id;
+                                        })
+                                        .attr('class', 'tooltip nifi-tooltip');
+                                }
+    
+                                // update the tip
+                                tip.text(function () {
+                                    if (d.component.targetSecure === true) {
+                                        return 'Site-to-Site is secure.';
+                                    } else {
+                                        return 'Site-to-Site is NOT secure.';
+                                    }
+                                });
+    
+                                // add the tooltip
+                              nfCanvasUtils.canvasTooltip(tip, d3.select(this));
+                            });
+    
+                        // ---------------
+                        // update comments
+                        // ---------------
+    
+                        // update the process group comments
+                        details.select('text.remote-process-group-comments')
+                            .each(function (d) {
+                                var remoteProcessGroupComments = d3.select(this);
+    
+                                // reset the processor name to handle any previous state
+                                remoteProcessGroupComments.text(null).selectAll('tspan, title').remove();
+    
+                                // apply ellipsis to the port name as necessary
+                              nfCanvasUtils.ellipsis(remoteProcessGroupComments, getProcessGroupComments(d));
+                            }).classed('unset', function (d) {
+                          return nfCommon.isBlank(d.component.comments);
+                        }).append('title').text(function (d) {
+                            return getProcessGroupComments(d);
+                        });
+    
+                        // --------------
+                        // last refreshed
+                        // --------------
+    
+                        details.select('text.remote-process-group-last-refresh')
+                            .text(function (d) {
+                              if (nfCommon.isDefinedAndNotNull(d.component.flowRefreshed)) {
+                                    return d.component.flowRefreshed;
+                                } else {
+                                    return 'Remote flow not current';
+                                }
+                            });
+    
+                        // update the process group name
+                        remoteProcessGroup.select('text.remote-process-group-name')
+                            .each(function (d) {
+                                var remoteProcessGroupName = d3.select(this);
+    
+                                // reset the remote process group name to handle any previous state
+                                remoteProcessGroupName.text(null).selectAll('title').remove();
+    
+                                // apply ellipsis to the remote process group name as necessary
+                              nfCanvasUtils.ellipsis(remoteProcessGroupName, d.component.name);
+                            }).append('title').text(function (d) {
+                            return d.component.name;
+                        });
+                    } else {
+                        // clear the target uri
+                        details.select('text.remote-process-group-uri').text(null);
+    
+                        // clear the transmission secure icon
+                        details.select('text.remote-process-group-transmission-secure').text(null);
+    
+                        // clear the process group comments
+                        details.select('text.remote-process-group-comments').text(null);
+    
+                        // clear the last refresh
+                        details.select('text.remote-process-group-last-refresh').text(null);
+    
+                        // clear the name
+                        remoteProcessGroup.select('text.remote-process-group-name').text(null);
+                    }
+    
+                    // populate the stats
+                    remoteProcessGroup.call(updateProcessGroupStatus);
+                } else {
+                    if (remoteProcessGroupData.permissions.canRead) {
+                        // update the process group name
+                        remoteProcessGroup.select('text.remote-process-group-name')
+                            .text(function (d) {
+                                var name = d.component.name;
+                                if (name.length > PREVIEW_NAME_LENGTH) {
+                                    return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
+                                } else {
+                                    return name;
+                                }
+                            });
+                  } else {
+                      // clear the name
+                      remoteProcessGroup.select('text.remote-process-group-name').text(null);
+                    }
+    
+                    // remove the tooltips
+                    remoteProcessGroup.call(removeTooltips);
+    
+                    // remove the details if necessary
+                    if (!details.empty()) {
+                        details.remove();
+                    }
+                }
+            });
+        };
+    
+      var hasIssues = function (d) {
+          return !nfCommon.isEmpty(d.component.authorizationIssues) || !nfCommon.isEmpty(d.component.validationErrors);
+      };
+  
+      var getIssues = function (d) {
+          var issues = [];
+          if (!nfCommon.isEmpty(d.component.authorizationIssues)) {
+              issues = issues.concat(d.component.authorizationIssues);
+          }
+          if (!nfCommon.isEmpty(d.component.validationErrors)) {
+              issues = issues.concat(d.component.validationErrors);
+          }
+          return issues;
+      };
+  
+        /**
+         * Updates the process group status.
+         *
+         * @param {selection} updated           The process groups to be updated
+         */
+        var updateProcessGroupStatus = function (updated) {
+            if (updated.empty()) {
+                return;
+            }
+    
+            // sent count value
+            updated.select('text.remote-process-group-sent tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.sent, ' ');
+                });
+    
+            // sent size value
+            updated.select('text.remote-process-group-sent tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.sent, ' ');
+                });
+    
+            // sent ports value
+            updated.select('text.remote-process-group-sent tspan.ports')
+                .text(function (d) {
+                    return ' ' + String.fromCharCode(8594) + ' ' + d.inputPortCount;
+                });
+    
+            // received ports value
+            updated.select('text.remote-process-group-received tspan.ports')
+                .text(function (d) {
+                    return d.outputPortCount + ' ' + String.fromCharCode(8594) + ' ';
+                });
+    
+            // received count value
+            updated.select('text.remote-process-group-received tspan.count')
+                .text(function (d) {
+                  return nfCommon.substringBeforeFirst(d.status.aggregateSnapshot.received, ' ');
+                });
+    
+            // received size value
+            updated.select('text.remote-process-group-received tspan.size')
+                .text(function (d) {
+                  return ' ' + nfCommon.substringAfterFirst(d.status.aggregateSnapshot.received, ' ');
+                });
+    
+            // --------------------
+            // authorization issues
+            // --------------------
+    
+            // TODO - only consider state from the status
+            // update the process groups transmission status
+            updated.select('text.remote-process-group-transmission-status')
+                .text(function (d) {
+                    var icon = '';
+                    if (d.permissions.canRead) {
+                      if (hasIssues(d)) {
+                            icon = '\uf071';
+                        } else if (d.component.transmitting === true) {
+                            icon = '\uf140';
+                        } else {
+                            icon = '\ue80a';
+                        }
+                    }
+                    return icon;
+                })
+                .attr('font-family', function (d) {
+                    var family = '';
+                    if (d.permissions.canRead) {
+                      if (hasIssues(d) || d.component.transmitting) {
+                            family = 'FontAwesome';
+                        } else {
+                            family = 'flowfont';
+                        }
+                    }
+                    return family;
+                })
+              .classed('invalid', function (d) {
+                  return d.permissions.canRead && hasIssues(d);
+              })
+              .classed('transmitting', function (d) {
+                  return d.permissions.canRead && !hasIssues(d) && d.component.transmitting === true;
+              })
+              .classed('not-transmitting', function (d) {
+                  return d.permissions.canRead && !hasIssues(d) && d.component.transmitting === false;
+                })
+                .each(function (d) {
+                    // get the tip
+                    var tip = d3.select('#authorization-issues-' + d.id);
+    
+                    // if there are validation errors generate a tooltip
+                  if (d.permissions.canRead && hasIssues(d)) {
+                        // create the tip if necessary
+                        if (tip.empty()) {
+                            tip = d3.select('#remote-process-group-tooltips').append('div')
+                                .attr('id', function () {
+                                    return 'authorization-issues-' + d.id;
+                                })
+                                .attr('class', 'tooltip nifi-tooltip');
+                        }
+    
+                        // update the tip
+                        tip.html(function () {
+                          var list = nfCommon.formatUnorderedList(getIssues(d));
+                            if (list === null || list.length === 0) {
+                                return '';
+                            } else {
+                                return $('<div></div>').append(list).html();
+                            }
+                        });
+    
+                        // add the tooltip
+                      nfCanvasUtils.canvasTooltip(tip, d3.select(this));
+                    } else {
+                        if (!tip.empty()) {
+                            tip.remove();
+                        }
+                    }
+                });
+    
+            updated.each(function (d) {
+                var remoteProcessGroup = d3.select(this);
+                var offset = 0;
+    
+                // -------------------
+                // active thread count
+                // -------------------            
+    
+              nfCanvasUtils.activeThreadCount(remoteProcessGroup, d, function (off) {
+                    offset = off;
+                });
+    
+                // ---------
+                // bulletins
+                // ---------
+    
+                remoteProcessGroup.select('rect.bulletin-background').classed('has-bulletins', function () {
+                  return !nfCommon.isEmpty(d.status.aggregateSnapshot.bulletins);
+                });
+    
+              nfCanvasUtils.bulletins(remoteProcessGroup, d, function () {
+                    return d3.select('#remote-process-group-tooltips');
+                }, offset);
+            });
+        };
+    
+        /**
+         * Removes the remote process groups in the specified selection.
+         *
+         * @param {selection} removed               The process groups to be removed
+         */
+        var removeRemoteProcessGroups = function (removed) {
+            if (removed.empty()) {
+                return;
+            }
+    
+            removed.call(removeTooltips).remove();
+        };
+    
+        /**
+         * Removes the tooltips for the remote process groups in the specified selection.
+         *
+         * @param {type} removed
+         */
+        var removeTooltips = function (removed) {
+            removed.each(function (d) {
+                // remove any associated tooltips
+                $('#bulletin-tip-' + d.id).remove();
+                $('#authorization-issues-' + d.id).remove();
+                $('#transmission-secure-' + d.id).remove();
+            });
+        };
+    
+      var nfRemoteProcessGroup = {
+            /**
+             * Initializes of the Process Group handler.
+           *
+           * @param nfConnectableRef   The nfConnectable module.
+           * @param nfDraggableRef   The nfDraggable module.
+           * @param nfSelectableRef   The nfSelectable module.
+           * @param nfContextMenuRef   The nfContextMenu module.
+             */
+          init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
+              nfConnectable = nfConnectableRef;
+              nfDraggable = nfDraggableRef;
+              nfSelectable = nfSelectableRef;
+              nfContextMenu = nfContextMenuRef;
+  
+                remoteProcessGroupMap = d3.map();
+              removedCache = d3.map();
+              addedCache = d3.map();
+    
+                // create the process group container
+                remoteProcessGroupContainer = d3.select('#canvas').append('g')
+                    .attr({
+                        'pointer-events': 'all',
+                        'class': 'remote-process-groups'
+                    });
+            },
+    
+            /**
+             * Adds the specified remote process group entity.
+             *
+             * @param remoteProcessGroupEntities       The remote process group
+             * @param options           Configuration options
+             */
+            add: function (remoteProcessGroupEntities, options) {
+                var selectAll = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                }
+    
+              // get the current time
+              var now = new Date().getTime();
+    
+                var add = function (remoteProcessGroupEntity) {
+                  addedCache.set(remoteProcessGroupEntity.id, now);
+  
+                    // add the remote process group
+                    remoteProcessGroupMap.set(remoteProcessGroupEntity.id, $.extend({
+                        type: 'RemoteProcessGroup',
+                        dimensions: dimensions
+                    }, remoteProcessGroupEntity));
+                };
+    
+                // determine how to handle the specified remote process groups
+                if ($.isArray(remoteProcessGroupEntities)) {
+                    $.each(remoteProcessGroupEntities, function (_, remoteProcessGroupEntity) {
+                        add(remoteProcessGroupEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(remoteProcessGroupEntities)) {
+                    add(remoteProcessGroupEntities);
+                }
+    
+                // apply the selection and handle new remote process groups
+                var selection = select();
+                selection.enter().call(renderRemoteProcessGroups, selectAll);
+                selection.call(updateRemoteProcessGroups);
+            },
+    
+            /**
+             * Populates the graph with the specified remote process groups.
+             *
+             * @argument {object | array} remoteProcessGroupEntities                   The remote process groups to add
+             * @argument {object} options                                    Configuration options
+             */
+            set: function (remoteProcessGroupEntities, options) {
+                var selectAll = false;
+                var transition = false;
+              if (nfCommon.isDefinedAndNotNull(options)) {
+                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+                  transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+                }
+    
+              var set = function (proposedRemoteProcessGroupEntity) {
+                  var currentRemoteProcessGroupEntity = remoteProcessGroupMap.get(proposedRemoteProcessGroupEntity.id);
+  
+                  // set the remote process group if appropriate due to revision and wasn't previously removed
+                  if (nfClient.isNewerRevision(currentRemoteProcessGroupEntity, proposedRemoteProcessGroupEntity) && !removedCache.has(proposedRemoteProcessGroupEntity.id)) {
+                      remoteProcessGroupMap.set(proposedRemoteProcessGroupEntity.id, $.extend({
+                            type: 'RemoteProcessGroup',
+                            dimensions: dimensions
+                      }, proposedRemoteProcessGroupEntity));
+                  }
+                };
+    
+                // determine how to handle the specified remote process groups
+                if ($.isArray(remoteProcessGroupEntities)) {
+                    $.each(remoteProcessGroupMap.keys(), function (_, key) {
+                      var currentRemoteProcessGroupEntity = remoteProcessGroupMap.get(key);
+                      var isPresent = $.grep(remoteProcessGroupEntities, function (proposedRemoteProcessGroupEntity) {
+                          return proposedRemoteProcessGroupEntity.id === currentRemoteProcessGroupEntity.id;
+                      });
+  
+                      // if the current remote process group is not present and was not recently added, remove it
+                      if (isPresent.length === 0 && !addedCache.has(key)) {
+                            remoteProcessGroupMap.remove(key);
+                      }
+                    });
+                    $.each(remoteProcessGroupEntities, function (_, remoteProcessGroupEntity) {
+                        set(remoteProcessGroupEntity);
+                    });
+              } else if (nfCommon.isDefinedAndNotNull(remoteProcessGroupEntities)) {
+                    set(remoteProcessGroupEntities);
+                }
+    
+                // apply the selection and handle all new remote process groups
+                var selection = select();
+                selection.enter().call(renderRemoteProcessGroups, selectAll);
+              selection.call(updateRemoteProcessGroups).call(nfCanvasUtils.position, transition);
+                selection.exit().call(removeRemoteProcessGroups);
+            },
+    
+            /**
+             * If the remote process group id is specified it is returned. If no remote process
+             * group id specified, all remote process groups are returned.
+             *
+             * @param {string} id
+             */
+            get: function (id) {
+              if (nfCommon.isUndefined(id)) {
+                    return remoteProcessGroupMap.values();
+                } else {
+                    return remoteProcessGroupMap.get(id);
+                }
+            },
+    
+            /**
+             * If the remote process group id is specified it is refresh according to the current
+             * state. If no remote process group id is specified, all remote process groups are refreshed.
+             *
+             * @param {string} id      Optional
+             */
+            refresh: function (id) {
+              if (nfCommon.isDefinedAndNotNull(id)) {
+                    d3.select('#id-' + id).call(updateRemoteProcessGroups);
+                } else {
+                    d3.selectAll('g.remote-process-group').call(updateRemoteProcessGroups);
+                }
+            },
+    
+            /**
+             * Refreshes the components necessary after a pan event.
+             */
+            pan: function () {
+                d3.selectAll('g.remote-process-group.entering, g.remote-process-group.leaving').call(updateRemoteProcessGroups);
+            },
+    
+            /**
+             * Reloads the remote process group state from the server and refreshes the UI.
+             * If the remote process group is currently unknown, this function just returns.
+             *
+             * @param {string} id       The remote process group id
+             */
+            reload: function (id) {
+                if (remoteProcessGroupMap.has(id)) {
+                    var remoteProcessGroupEntity = remoteProcessGroupMap.get(id);
+                    return $.ajax({
+                        type: 'GET',
+                        url: remoteProcessGroupEntity.uri,
+                        dataType: 'json'
+                    }).done(function (response) {
+                      nfRemoteProcessGroup.set(response);
+    
+                        // reload the group's connections
+                      var connections = nfConnection.getComponentConnections(id);
+                        $.each(connections, function (_, connection) {
+                            if (connection.permissions.canRead) {
+                              nfConnection.reload(connection.id);
+                            }
+                        });
+                    });
+                }
+            },
+    
+            /**
+             * Positions the component.
+             *
+             * @param {string} id   The id
+             */
+            position: function (id) {
+              d3.select('#id-' + id).call(nfCanvasUtils.position);
+            },
+    
+            /**
+             * Removes the specified process group.
+             *
+           * @param {array|string} remoteProcessGroupIds      The remote process group id(s)
+             */
+          remove: function (remoteProcessGroupIds) {
+              var now = new Date().getTime();
+  
+              if ($.isArray(remoteProcessGroupIds)) {
+                  $.each(remoteProcessGroupIds, function (_, remoteProcessGroupId) {
+                      removedCache.set(remoteProcessGroupId, now);
+                      remoteProcessGroupMap.remove(remoteProcessGroupId);
+                    });
+                } else {
+                  removedCache.set(remoteProcessGroupIds, now);
+                  remoteProcessGroupMap.remove(remoteProcessGroupIds);
+                }
+    
+                // apply the selection and handle all removed remote process groups
+                select().exit().call(removeRemoteProcessGroups);
+            },
+    
+            /**
+             * Removes all remote process groups.
+             */
+            removeAll: function () {
+              nfRemoteProcessGroup.remove(remoteProcessGroupMap.keys());
+          },
+  
+          /**
+           * Expires the caches up to the specified timestamp.
+           *
+           * @param timestamp
+           */
+          expireCaches: function (timestamp) {
+              var expire = function (cache) {
+                  cache.forEach(function (id, entryTimestamp) {
+                      if (timestamp > entryTimestamp) {
+                          cache.remove(id);
+                      }
+                  });
+              };
+  
+              expire(addedCache);
+              expire(removedCache);
+          }
+      };
+  
+      return nfRemoteProcessGroup;
+  }));
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
new file mode 100644
index 000000000000..28effc6d04cc
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
@@ -0,0 +1,827 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.ErrorHandler',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Client',
+                  'nf.ControllerService',
+                  'nf.ControllerServices',
+                  'nf.UniversalCapture',
+                  'nf.CustomUi'],
+              function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerService, nfControllerServices, nfUniversalCapture, nfCustomUi) {
+                  return (nf.ReportingTask = factory($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerService, nfControllerServices, nfUniversalCapture, nfCustomUi));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.ReportingTask =
+              factory(require('jquery'),
+                  require('nf.ErrorHandler'),
+                  require('nf.Common'),
+                  require('nf.Dialog'),
+                  require('nf.Client'),
+                  require('nf.ControllerService'),
+                  require('nf.ControllerServices'),
+                  require('nf.UniversalCapture'),
+                  require('nf.CustomUi')));
+      } else {
+          nf.ReportingTask = factory(root.$,
+              root.nf.ErrorHandler,
+              root.nf.Common,
+              root.nf.Dialog,
+              root.nf.Client,
+              root.nf.ControllerService,
+              root.nf.ControllerServices,
+              root.nf.UniversalCapture,
+              root.nf.CustomUi);
+      }
+  }(this, function ($, nfErrorHandler, nfCommon, nfDialog, nfClient, nfControllerService, nfControllerServices, nfUniversalCapture, nfCustomUi) {
+      'use strict';
+  
+      var nfSettings;
+    
+        var config = {
+            edit: 'edit',
+          readOnly: 'read-only',
+          urls: {
+              api: '../nifi-api'
+          }
+        };
+    
+      // load the controller services
+      var controllerServicesUri = config.urls.api + '/flow/controller/controller-services';
+    
+        /**
+         * Gets the controller services table.
+         *
+         * @returns {*|jQuery|HTMLElement}
+         */
+        var getControllerServicesTable = function () {
+            return $('#controller-services-table');
+        };
+    
+        /**
+         * Handle any expected reporting task configuration errors.
+         *
+         * @argument {object} xhr       The XmlHttpRequest
+         * @argument {string} status    The status of the request
+         * @argument {string} error     The error
+         */
+        var handleReportingTaskConfigurationError = function (xhr, status, error) {
+            if (xhr.status === 400) {
+                var errors = xhr.responseText.split('\n');
+    
+                var content;
+                if (errors.length === 1) {
+                    content = $('<span></span>').text(errors[0]);
+                } else {
+                  content = nfCommon.formatUnorderedList(errors);
+                }
+    
+              nfDialog.showOkDialog({
+                    dialogContent: content,
+                  headerText: nf._.msg('nf-reporting-task.ReportingTask')
+                });
+            } else {
+              nfErrorHandler.handleAjaxError(xhr, status, error);
+            }
+        };
+    
+        /**
+         * Determines whether the user has made any changes to the reporting task configuration
+         * that needs to be saved.
+         */
+        var isSaveRequired = function () {
+            var entity = $('#reporting-task-configuration').data('reportingTaskDetails');
+    
+            // determine if any reporting task settings have changed
+    
+            if ($('#reporting-task-name').val() !== entity.component['name']) {
+                return true;
+            }
+            if ($('#reporting-task-comments').val() !== entity.component['comments']) {
+                return true;
+            }
+            if ($('#reporting-task-enabled').hasClass('checkbox-checked') && entity.component['state'] === 'DISABLED') {
+                return true;
+            } else if ($('#reporting-task-enabled').hasClass('checkbox-unchecked') && (entity.component['state'] === 'RUNNING' || entity.component['state'] === 'STOPPED')) {
+                return true;
+            }
+    
+            // consider the scheduling strategy
+            var schedulingStrategy = $('#reporting-task-scheduling-strategy-combo').combo('getSelectedOption').value;
+            if (schedulingStrategy !== (entity.component['schedulingStrategy'] + '')) {
+                return true;
+            }
+    
+            // get the appropriate scheduling period field
+            var schedulingPeriod;
+            if (schedulingStrategy === 'CRON_DRIVEN') {
+                schedulingPeriod = $('#reporting-task-cron-driven-scheduling-period');
+            } else {
+                schedulingPeriod = $('#reporting-task-timer-driven-scheduling-period');
+            }
+    
+            // check the scheduling period
+          if (nfCommon.isDefinedAndNotNull(schedulingPeriod) && schedulingPeriod.val() !== (entity.component['schedulingPeriod'] + '')) {
+                return true;
+            }
+    
+            // defer to the properties
+            return $('#reporting-task-properties').propertytable('isSaveRequired');
+        };
+    
+        /**
+         * Marshals the data that will be used to update the reporting task's configuration.
+         */
+        var marshalDetails = function () {
+            // properties
+            var properties = $('#reporting-task-properties').propertytable('marshalProperties');
+    
+            // get the scheduling strategy
+            var schedulingStrategy = $('#reporting-task-scheduling-strategy-combo').combo('getSelectedOption').value;
+    
+            // get the appropriate scheduling period field
+            var schedulingPeriod;
+            if (schedulingStrategy === 'CRON_DRIVEN') {
+                schedulingPeriod = $('#reporting-task-cron-driven-scheduling-period');
+            } else {
+                schedulingPeriod = $('#reporting-task-timer-driven-scheduling-period');
+            }
+    
+            // create the reporting task dto
+            var reportingTaskDto = {};
+            reportingTaskDto['id'] = $('#reporting-task-id').text();
+            reportingTaskDto['name'] = $('#reporting-task-name').val();
+            reportingTaskDto['schedulingStrategy'] = schedulingStrategy;
+            reportingTaskDto['schedulingPeriod'] = schedulingPeriod.val();
+            reportingTaskDto['comments'] = $('#reporting-task-comments').val();
+    
+            // mark the processor disabled if appropriate
+            if ($('#reporting-task-enabled').hasClass('checkbox-unchecked')) {
+                reportingTaskDto['state'] = 'DISABLED';
+            } else if ($('#reporting-task-enabled').hasClass('checkbox-checked')) {
+                reportingTaskDto['state'] = 'STOPPED';
+            }
+    
+            // set the properties
+            if ($.isEmptyObject(properties) === false) {
+                reportingTaskDto['properties'] = properties;
+            }
+    
+            // create the reporting task entity
+            var reportingTaskEntity = {};
+            reportingTaskEntity['component'] = reportingTaskDto;
+    
+            // return the marshaled details
+            return reportingTaskEntity;
+        };
+    
+        /**
+         * Validates the specified details.
+         *
+         * @argument {object} details       The details to validate
+         */
+        var validateDetails = function (details) {
+            var errors = [];
+            var reportingTask = details['component'];
+    
+          if (nfCommon.isBlank(reportingTask['schedulingPeriod'])) {
+              errors.push(nf._.msg('nf-reporting-task.RunScheduleMustBeSpecified'));
+            }
+    
+            if (errors.length > 0) {
+              nfDialog.showOkDialog({
+                  dialogContent: nfCommon.formatUnorderedList(errors),
+                  headerText: nf._.msg('nf-reporting-task.ReportingTask')
+                });
+                return false;
+            } else {
+                return true;
+            }
+        };
+    
+        /**
+         * Renders the specified reporting task.
+         *
+         * @param {object} reportingTask
+         */
+        var renderReportingTask = function (reportingTaskEntity) {
+            // get the table and update the row accordingly
+            var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
+            var reportingTaskData = reportingTaskGrid.getData();
+            var currentReportingTask = reportingTaskData.getItemById(reportingTaskEntity.id);
+            reportingTaskData.updateItem(reportingTaskEntity.id, $.extend({
+                bulletins: currentReportingTask.bulletins
+            }, reportingTaskEntity));
+        };
+    
+        /**
+         *
+         * @param {object} reportingTaskEntity
+         * @param {boolean} running
+         */
+        var setRunning = function (reportingTaskEntity, running) {
+            var entity = {
+              'revision': nfClient.getRevision(reportingTaskEntity),
+                'component': {
+                    'id': reportingTaskEntity.id,
+                    'state': running === true ? 'RUNNING' : 'STOPPED'
+                }
+            };
+    
+            return $.ajax({
+                type: 'PUT',
+                url: reportingTaskEntity.uri,
+                data: JSON.stringify(entity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (response) {
+                // update the task
+                renderReportingTask(response);
+              nfControllerService.reloadReferencedServices(getControllerServicesTable(), response.component);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Goes to a service configuration from the property table.
+         */
+        var goToServiceFromProperty = function () {
+            return $.Deferred(function (deferred) {
+                // close all fields currently being edited
+                $('#reporting-task-properties').propertytable('saveRow');
+    
+                // determine if changes have been made
+                if (isSaveRequired()) {
+                    // see if those changes should be saved
+                  nfDialog.showYesNoDialog({
+                      headerText: nf._.msg('nf-reporting-task.Save'),
+                      dialogContent: nf._.msg('nf-reporting-task.Message1'),
+                        noHandler: function () {
+                            deferred.resolve();
+                        },
+                        yesHandler: function () {
+                            var reportingTask = $('#reporting-task-configuration').data('reportingTaskDetails');
+                            saveReportingTask(reportingTask).done(function () {
+                                deferred.resolve();
+                            }).fail(function () {
+                                deferred.reject();
+                            });
+                        }
+                    });
+                } else {
+                    deferred.resolve();
+                }
+            }).promise();
+        };
+    
+        /**
+         * Saves the specified reporting task.
+         *
+         * @param {type} reportingTask
+         */
+        var saveReportingTask = function (reportingTaskEntity) {
+            // marshal the settings and properties and update the reporting task
+            var updatedReportingTask = marshalDetails();
+    
+            // ensure details are valid as far as we can tell
+            if (validateDetails(updatedReportingTask)) {
+              updatedReportingTask['revision'] = nfClient.getRevision(reportingTaskEntity);
+    
+                // update the selected component
+                return $.ajax({
+                    type: 'PUT',
+                    data: JSON.stringify(updatedReportingTask),
+                    url: reportingTaskEntity.uri,
+                    dataType: 'json',
+                    contentType: 'application/json'
+                }).done(function (response) {
+                    // update the reporting task
+                    renderReportingTask(response);
+                }).fail(handleReportingTaskConfigurationError);
+            } else {
+                return $.Deferred(function (deferred) {
+                    deferred.reject();
+                }).promise();
+            }
+        };
+    
+        /**
+         * Gets a property descriptor for the controller service currently being configured.
+         *
+         * @param {type} propertyName
+         */
+        var getReportingTaskPropertyDescriptor = function (propertyName) {
+            var details = $('#reporting-task-configuration').data('reportingTaskDetails');
+            return $.ajax({
+                type: 'GET',
+                url: details.uri + '/descriptors',
+                data: {
+                    propertyName: propertyName
+                },
+                dataType: 'json'
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+      var nfReportingTask = {
+            /**
+             * Initializes the reporting task configuration dialog.
+           *
+           * @param nfSettingsRef   The nfSettings module.
+             */
+          init: function (nfSettingsRef) {
+              nfSettings = nfSettingsRef;
+  
+                // initialize the configuration dialog tabs
+                $('#reporting-task-configuration-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                      name: nf._.msg('nf-reporting-task.Settings'),
+                        tabContentId: 'reporting-task-standard-settings-tab-content'
+                    }, {
+                      name: nf._.msg('nf-reporting-task.Properties'),
+                        tabContentId: 'reporting-task-properties-tab-content'
+                    }, {
+                      name: nf._.msg('nf-reporting-task.Comments'),
+                        tabContentId: 'reporting-task-comments-tab-content'
+                    }],
+                    select: function () {
+                        // remove all property detail dialogs
+                      nfUniversalCapture.removeAllPropertyDetailDialogs();
+    
+                        // update the property table size in case this is the first time its rendered
+                        if ($(this).text() === 'Properties') {
+                            $('#reporting-task-properties').propertytable('resetTableSize');
+                        }
+    
+                        // close all fields currently being edited
+                        $('#reporting-task-properties').propertytable('saveRow');
+                    }
+                });
+    
+                // initialize the reporting task configuration dialog
+                $('#reporting-task-configuration').data('mode', config.edit).modal({
+                    scrollableContentStyle: 'scrollable',
+                  headerText: nf._.msg('nf-reporting-task.ConfigureReportingTask'),
+                    handler: {
+                        close: function () {
+                            // cancel any active edits
+                            $('#reporting-task-properties').propertytable('cancelEdit');
+    
+                            // clear the tables
+                            $('#reporting-task-properties').propertytable('clear');
+    
+                            // clear the comments
+                          nfCommon.clearField('read-only-reporting-task-comments');
+    
+                            // removed the cached reporting task details
+                            $('#reporting-task-configuration').removeData('reportingTaskDetails');
+                        },
+                        open: function () {
+                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                        }
+                    }
+                });
+    
+                // initialize the property table
+                $('#reporting-task-properties').propertytable({
+                    readOnly: false,
+                  supportsGoTo: true,
+                    dialogContainer: '#new-reporting-task-property-container',
+                    descriptorDeferred: getReportingTaskPropertyDescriptor,
+                  controllerServiceCreatedDeferred: function (response) {
+                      return nfControllerServices.loadControllerServices(controllerServicesUri, $('#controller-services-table'));
+                  },
+                    goToServiceDeferred: goToServiceFromProperty
+                });
+            },
+    
+            /**
+             * Shows the configuration dialog for the specified reporting task.
+             *
+             * @argument {reportingTask} reportingTaskEntity      The reporting task
+             */
+            showConfiguration: function (reportingTaskEntity) {
+                var reportingTaskDialog = $('#reporting-task-configuration');
+                if (reportingTaskDialog.data('mode') === config.readOnly) {
+                    // update the visibility
+                    $('#reporting-task-configuration .reporting-task-read-only').hide();
+                    $('#reporting-task-configuration .reporting-task-editable').show();
+    
+                    // 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) {
+                          return nfControllerServices.loadControllerServices(controllerServicesUri, $('#controller-services-table'));
+                      },
+                        goToServiceDeferred: goToServiceFromProperty
+                    });
+    
+                    // update the mode
+                    reportingTaskDialog.data('mode', config.edit);
+                }
+    
+                // reload the task in case the property descriptors have changed
+                var reloadTask = $.ajax({
+                    type: 'GET',
+                    url: reportingTaskEntity.uri,
+                    dataType: 'json'
+                });
+    
+                // get the reporting task history
+                var loadHistory = $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/flow/history/components/' + encodeURIComponent(reportingTaskEntity.id),
+                    dataType: 'json'
+                });
+    
+                // once everything is loaded, show the dialog
+                $.when(reloadTask, loadHistory).done(function (taskResponse, historyResponse) {
+                    // get the updated reporting task
+                    reportingTaskEntity = taskResponse[0];
+                    var reportingTask = reportingTaskEntity.component;
+    
+                    // get the reporting task history
+                    var reportingTaskHistory = historyResponse[0].componentHistory;
+    
+                    // record the reporting task details
+                    $('#reporting-task-configuration').data('reportingTaskDetails', reportingTaskEntity);
+    
+                    // determine if the enabled checkbox is checked or not
+                    var reportingTaskEnableStyle = 'checkbox-checked';
+                    if (reportingTask['state'] === 'DISABLED') {
+                        reportingTaskEnableStyle = 'checkbox-unchecked';
+                    }
+    
+                    // populate the reporting task settings
+                  nfCommon.populateField('reporting-task-id', reportingTask['id']);
+                  nfCommon.populateField('reporting-task-type', nfCommon.substringAfterLast(reportingTask['type'], '.'));
+                    $('#reporting-task-name').val(reportingTask['name']);
+                    $('#reporting-task-enabled').removeClass('checkbox-unchecked checkbox-checked').addClass(reportingTaskEnableStyle);
+                    $('#reporting-task-comments').val(reportingTask['comments']);
+    
+                    // get the default schedule period
+                    var defaultSchedulingPeriod = reportingTask['defaultSchedulingPeriod'];
+                    var cronSchedulingPeriod = $('#reporting-task-cron-driven-scheduling-period').val(defaultSchedulingPeriod['CRON_DRIVEN']);
+                    var timerSchedulingPeriod = $('#reporting-task-timer-driven-scheduling-period').val(defaultSchedulingPeriod['TIMER_DRIVEN']);
+    
+                    // set the scheduling period as appropriate
+                    if (reportingTask['schedulingStrategy'] === 'CRON_DRIVEN') {
+                        cronSchedulingPeriod.val(reportingTask['schedulingPeriod']);
+                    } else {
+                        timerSchedulingPeriod.val(reportingTask['schedulingPeriod']);
+                    }
+    
+                    // initialize the scheduling strategy
+                    $('#reporting-task-scheduling-strategy-combo').combo({
+                        options: [{
+                          text: nf._.msg('nf-reporting-task.TimerDriven'),
+                            value: 'TIMER_DRIVEN',
+                          description: nf._.msg('nf-reporting-task.Message2')
+                        }, {
+                          text: nf._.msg('nf-reporting-task.CRONDriven'),
+                            value: 'CRON_DRIVEN',
+                          description: nf._.msg('nf-reporting-task.Message3')
+                        }],
+                        selectedOption: {
+                            value: reportingTask['schedulingStrategy']
+                        },
+                        select: function (selectedOption) {
+                            if (selectedOption.value === 'CRON_DRIVEN') {
+                                timerSchedulingPeriod.hide();
+                                cronSchedulingPeriod.show();
+                            } else {
+                                timerSchedulingPeriod.show();
+                                cronSchedulingPeriod.hide();
+                            }
+                        }
+                    });
+    
+                    var buttons = [{
+                      buttonText: nf._.msg('nf-reporting-task.Apply'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                // close all fields currently being edited
+                                $('#reporting-task-properties').propertytable('saveRow');
+    
+                                // save the reporting task
+                                saveReportingTask(reportingTaskEntity).done(function (response) {
+                                    // reload the reporting task
+                                  nfControllerService.reloadReferencedServices(getControllerServicesTable(), response.component);
+    
+                                    // close the details panel
+                                    $('#reporting-task-configuration').modal('hide');
+                                });
+                            }
+                        }
+                    },
+                        {
+                          buttonText: nf._.msg('nf-reporting-task.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    $('#reporting-task-configuration').modal('hide');
+                                }
+                            }
+                        }];
+    
+                    // determine if we should show the advanced button
+                  if (nfCommon.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') {
+                        buttons.push({
+                          buttonText: nf._.msg('nf-reporting-task.Advanced'),
+                            clazz: 'fa fa-cog button-icon',
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    var openCustomUi = function () {
+                                        // reset state and close the dialog manually to avoid hiding the faded background
+                                        $('#reporting-task-configuration').modal('hide');
+    
+                                        // close the settings dialog since the custom ui is also opened in the shell
+                                        $('#shell-close-button').click();
+    
+                                        // show the custom ui
+                                      nfCustomUi.showCustomUi(reportingTaskEntity, reportingTask.customUiUrl, true).done(function () {
+                                            // once the custom ui is closed, reload the reporting task
+                                          nfReportingTask.reload(reportingTaskEntity.id).done(function (response) {
+                                              nfControllerService.reloadReferencedServices(getControllerServicesTable(), response.reportingTask);
+                                            });
+    
+                                            // show the settings
+                                          nfSettings.showSettings();
+                                        });
+                                    };
+    
+                                    // close all fields currently being edited
+                                    $('#reporting-task-properties').propertytable('saveRow');
+    
+                                    // determine if changes have been made
+                                    if (isSaveRequired()) {
+                                        // see if those changes should be saved
+                                      nfDialog.showYesNoDialog({
+                                          headerText: nf._.msg('nf-reporting-task.Save'),
+                                          dialogContent: nf._.msg('nf-reporting-task.Message4'),
+                                            noHandler: openCustomUi,
+                                            yesHandler: function () {
+                                                saveReportingTask(reportingTaskEntity).done(function () {
+                                                    // open the custom ui
+                                                    openCustomUi();
+                                                });
+                                            }
+                                        });
+                                    } else {
+                                        // if there were no changes, simply open the custom ui
+                                        openCustomUi();
+                                    }
+                                }
+                            }
+                        });
+                    }
+    
+                    // set the button model
+                    $('#reporting-task-configuration').modal('setButtonModel', buttons);
+    
+                    // load the property table
+                    $('#reporting-task-properties')
+                        .propertytable('setGroupId', reportingTask.parentGroupId)
+                        .propertytable('loadProperties', reportingTask.properties, reportingTask.descriptors, reportingTaskHistory.propertyHistory);
+    
+                    // show the details
+                    $('#reporting-task-configuration').modal('show');
+    
+                    $('#reporting-task-properties').propertytable('resetTableSize');
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows the reporting task details in a read only dialog.
+             *
+             * @param {object} reportingTaskEntity
+             */
+            showDetails: function (reportingTaskEntity) {
+                var reportingTaskDialog = $('#reporting-task-configuration');
+                if (reportingTaskDialog.data('mode') === config.edit) {
+                    // update the visibility
+                    $('#reporting-task-configuration .reporting-task-read-only').show();
+                    $('#reporting-task-configuration .reporting-task-editable').hide();
+    
+                    // initialize the property table
+                    $('#reporting-task-properties').propertytable('destroy').propertytable({
+                      supportsGoTo: true,
+                        readOnly: true
+                    });
+    
+                    // update the mode
+                    reportingTaskDialog.data('mode', config.readOnly);
+                }
+    
+                // reload the task in case the property descriptors have changed
+                var reloadTask = $.ajax({
+                    type: 'GET',
+                    url: reportingTaskEntity.uri,
+                    dataType: 'json'
+                });
+    
+                // get the reporting task history
+                var loadHistory = $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/flow/history/components/' + encodeURIComponent(reportingTaskEntity.id),
+                    dataType: 'json'
+                });
+    
+                // once everything is loaded, show the dialog
+                $.when(reloadTask, loadHistory).done(function (taskResponse, historyResponse) {
+                    // get the updated reporting task
+                    reportingTaskEntity = taskResponse[0];
+                    var reportingTask = reportingTaskEntity.component;
+    
+                    // get the reporting task history
+                    var reportingTaskHistory = historyResponse[0].componentHistory;
+    
+                    // populate the reporting task settings
+                  nfCommon.populateField('reporting-task-id', reportingTask['id']);
+                  nfCommon.populateField('reporting-task-type', nfCommon.substringAfterLast(reportingTask['type'], '.'));
+                  nfCommon.populateField('read-only-reporting-task-name', reportingTask['name']);
+                  nfCommon.populateField('read-only-reporting-task-comments', reportingTask['comments']);
+    
+                    // make the scheduling strategy human readable
+                    var schedulingStrategy = reportingTask['schedulingStrategy'];
+                    if (schedulingStrategy === 'CRON_DRIVEN') {
+                        schedulingStrategy = 'CRON driven';
+                    } else {
+                        schedulingStrategy = "Timer driven";
+                    }
+                  nfCommon.populateField('read-only-reporting-task-scheduling-strategy', schedulingStrategy);
+                  nfCommon.populateField('read-only-reporting-task-scheduling-period', reportingTask['schedulingPeriod']);
+    
+                    var buttons = [{
+                      buttonText: nf._.msg('nf-reporting-task.Ok'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                // hide the dialog
+                                reportingTaskDialog.modal('hide');
+                            }
+                        }
+                    }];
+    
+                    // determine if we should show the advanced button
+                  if (nfCommon.isDefinedAndNotNull(nfCustomUi) && nfCommon.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') {
+                        buttons.push({
+                          buttonText: nf._.msg('nf-reporting-task.Advanced'),
+                            clazz: 'fa fa-cog button-icon',
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    // reset state and close the dialog manually to avoid hiding the faded background
+                                    reportingTaskDialog.modal('hide');
+    
+                                    // close the settings dialog since the custom ui is also opened in the shell
+                                    $('#shell-close-button').click();
+    
+                                    // show the custom ui
+                                  nfCustomUi.showCustomUi(reportingTaskEntity, reportingTask.customUiUrl, false).done(function () {
+                                      nfSettings.showSettings();
+                                    });
+                                }
+                            }
+                        });
+                    }
+    
+                    // show the dialog
+                    reportingTaskDialog.modal('setButtonModel', buttons).modal('show');
+    
+                    // load the property table
+                    $('#reporting-task-properties').propertytable('loadProperties', reportingTask.properties, reportingTask.descriptors, reportingTaskHistory.propertyHistory);
+    
+                    // show the details
+                    reportingTaskDialog.modal('show');
+    
+                    $('#reporting-task-properties').propertytable('resetTableSize');
+                });
+            },
+    
+            /**
+             * Starts the specified reporting task.
+             *
+             * @param {object} reportingTaskEntity
+             */
+            start: function (reportingTaskEntity) {
+                setRunning(reportingTaskEntity, true);
+            },
+    
+            /**
+             * Stops the specified reporting task.
+             *
+             * @param {object} reportingTaskEntity
+             */
+            stop: function (reportingTaskEntity) {
+                setRunning(reportingTaskEntity, false);
+            },
+    
+            /**
+             * Reloads the specified reporting task.
+             *
+             * @param {string} id
+             */
+            reload: function (id) {
+                var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
+                var reportingTaskData = reportingTaskGrid.getData();
+                var reportingTaskEntity = reportingTaskData.getItemById(id);
+    
+                return $.ajax({
+                    type: 'GET',
+                    url: reportingTaskEntity.uri,
+                    dataType: 'json'
+                }).done(function (response) {
+                    renderReportingTask(response);
+              }).fail(nfErrorHandler.handleAjaxError);
+          },
+  
+          /**
+           * Prompts the user before attempting to delete the specified reporting task.
+           *
+           * @param {object} reportingTaskEntity
+           */
+          promptToDeleteReportingTask: function (reportingTaskEntity) {
+              // prompt for deletion
+              nfDialog.showYesNoDialog({
+                  headerText: 'Delete Reporting Task',
+                  dialogContent: 'Delete reporting task \'' + nfCommon.escapeHtml(reportingTaskEntity.component.name) + '\'?',
+                  yesHandler: function () {
+                      nfReportingTask.remove(reportingTaskEntity);
+                  }
+              });
+            },
+    
+            /**
+             * Deletes the specified reporting task.
+             *
+             * @param {object} reportingTaskEntity
+             */
+            remove: function (reportingTaskEntity) {
+                // prompt for removal?
+    
+              var revision = nfClient.getRevision(reportingTaskEntity);
+                $.ajax({
+                    type: 'DELETE',
+                    url: reportingTaskEntity.uri + '?' + $.param({
+                        version: revision.version,
+                        clientId: revision.clientId
+                    }),
+                    dataType: 'json'
+                }).done(function (response) {
+                    // remove the task
+                    var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
+                    var reportingTaskData = reportingTaskGrid.getData();
+                    reportingTaskData.deleteItem(reportingTaskEntity.id);
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+    
+      return nfReportingTask;
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-selectable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-selectable.js
new file mode 100644
index 000000000000..c8b51792b395
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-selectable.js
@@ -0,0 +1,85 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['d3',
+                'nf.ng.Bridge',
+                'nf.ContextMenu'],
+            function (d3, nfNgBridge, nfContextMenu) {
+                return (nf.Selectable = factory(d3, nfNgBridge, nfContextMenu));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Selectable =
+            factory(require('d3'),
+                require('nf.ng.Bridge'),
+                require('nf.ContextMenu')));
+    } else {
+        nf.Selectable = factory(root.d3,
+            root.nf.ng.Bridge,
+            root.nf.ContextMenu);
+    }
+}(this, function (d3, nfNgBridge, nfContextMenu) {
+    'use strict';
+
+    var nfSelectable = {
+
+        select: function (g) {
+            // hide any context menus as necessary
+            nfContextMenu.hide();
+
+            // only need to update selection if necessary
+            if (!g.classed('selected')) {
+                // since we're not appending, deselect everything else
+                if (!d3.event.shiftKey) {
+                    d3.selectAll('g.selected').classed('selected', false);
+                }
+
+                // update the selection
+                g.classed('selected', true);
+            } else {
+                // we are currently selected, if shift key the deselect
+                if (d3.event.shiftKey) {
+                    g.classed('selected', false);
+                }
+            }
+
+            // inform Angular app that values have changed since the
+            // enabled operate palette buttons are based off of the selection
+            nfNgBridge.digest();
+
+            // stop propagation
+            d3.event.stopPropagation();
+        },
+
+        /**
+         * Activates the select behavior for the components in the specified selection.
+         *
+         * @param {selection} components
+         */
+        activate: function (components) {
+            components.on('mousedown.selection', function () {
+                // get the clicked component to update selection
+                nfSelectable.select(d3.select(this));
+            });
+        }
+    };
+
+    return nfSelectable;
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
new file mode 100644
index 000000000000..1ba91ebbe88e
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
@@ -0,0 +1,1312 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'd3',
+                  'nf.Client',
+                  'nf.Dialog',
+                  'nf.Common',
+                  'nf.CanvasUtils',
+                  'nf.ControllerServices',
+                  'nf.ErrorHandler',
+                  'nf.ReportingTask',
+                  'nf.Shell',
+                  'nf.ComponentState',
+                  'nf.PolicyManagement'],
+              function ($, Slick, d3, nfClient, nfDialog, nfCommon, nfCanvasUtils, nfControllerServices, nfErrorHandler, nfReportingTask, nfShell, nfComponentState, nfPolicyManagement) {
+                  return (nf.Settings = factory($, Slick, d3, nfClient, nfDialog, nfCommon, nfCanvasUtils, nfControllerServices, nfErrorHandler, nfReportingTask, nfShell, nfComponentState, nfPolicyManagement));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.Settings =
+              factory(require('jquery'),
+                  require('Slick'),
+                  require('d3'),
+                  require('nf.Client'),
+                  require('nf.Dialog'),
+                  require('nf.Common'),
+                  require('nf.CanvasUtils'),
+                  require('nf.ControllerServices'),
+                  require('nf.ErrorHandler'),
+                  require('nf.ReportingTask'),
+                  require('nf.Shell'),
+                  require('nf.ComponentState'),
+                  require('nf.PolicyManagement')));
+      } else {
+          nf.Settings = factory(root.$,
+              root.Slick,
+              root.d3,
+              root.nf.Client,
+              root.nf.Dialog,
+              root.nf.Common,
+              root.nf.CanvasUtils,
+              root.nf.ControllerServices,
+              root.nf.ErrorHandler,
+              root.nf.ReportingTask,
+              root.nf.Shell,
+              root.nf.ComponentState,
+              root.nf.PolicyManagement);
+      }
+  }(this, function ($, Slick, d3, nfClient, nfDialog, nfCommon, nfCanvasUtils, nfControllerServices, nfErrorHandler, nfReportingTask, nfShell, nfComponentState, nfPolicyManagement) {
+      'use strict';
+  
+    
+        var config = {
+            urls: {
+                api: '../nifi-api',
+                controllerConfig: '../nifi-api/controller/config',
+                reportingTaskTypes: '../nifi-api/flow/reporting-task-types',
+                createReportingTask: '../nifi-api/controller/reporting-tasks',
+                reportingTasks: '../nifi-api/flow/reporting-tasks'
+            }
+        };
+    
+        var gridOptions = {
+            forceFitColumns: true,
+            enableTextSelectionOnCells: true,
+            enableCellNavigation: true,
+            enableColumnReorder: false,
+            autoEdit: false,
+            multiSelect: false,
+            rowHeight: 24
+        };
+    
+        /**
+         * Gets the controller services table.
+         *
+         * @returns {*|jQuery|HTMLElement}
+         */
+        var getControllerServicesTable = function () {
+            return $('#controller-services-table');
+        };
+    
+        /**
+         * Saves the settings for the controller.
+         *
+         * @param version
+         */
+        var saveSettings = function (version) {
+            // marshal the configuration details
+            var configuration = marshalConfiguration();
+            var entity = {
+              'revision': nfClient.getRevision({
+                    'revision': {
+                        'version': version
+                    }
+                }),
+                'component': configuration
+            };
+    
+            // save the new configuration details
+            $.ajax({
+                type: 'PUT',
+                url: config.urls.controllerConfig,
+                data: JSON.stringify(entity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (response) {
+                // close the settings dialog
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-settings.Settings'),
+                  dialogContent: nf._.msg('nf-settings.Message2')
+                });
+    
+                // register the click listener for the save button
+                $('#settings-save').off('click').on('click', function () {
+                    saveSettings(response.revision.version);
+                });
+          }).fail(nfErrorHandler.handleAjaxError);
+        }
+    
+        /**
+         * Initializes the general tab.
+         */
+        var initGeneral = function () {
+        };
+    
+        /**
+         * Marshals the details to include in the configuration request.
+         */
+        var marshalConfiguration = function () {
+            // create the configuration
+            var configuration = {};
+            configuration['maxTimerDrivenThreadCount'] = $('#maximum-timer-driven-thread-count-field').val();
+            configuration['maxEventDrivenThreadCount'] = $('#maximum-event-driven-thread-count-field').val();
+            return configuration;
+        };
+    
+        /**
+         * Determines if the item matches the filter.
+         *
+         * @param {object} item     The item to filter
+         * @param {object} args     The filter criteria
+         * @returns {boolean}       Whether the item matches the filter
+         */
+        var matchesRegex = function (item, args) {
+            if (args.searchString === '') {
+                return true;
+            }
+    
+            try {
+                // perform the row filtering
+                var filterExp = new RegExp(args.searchString, 'i');
+            } catch (e) {
+                // invalid regex
+                return false;
+            }
+    
+            // determine if the item matches the filter
+            var matchesLabel = item['label'].search(filterExp) >= 0;
+            var matchesTags = item['tags'].search(filterExp) >= 0;
+            return matchesLabel || matchesTags;
+        };
+    
+        /**
+         * Determines if the specified tags match all the tags selected by the user.
+         *
+         * @argument {string[]} tagFilters      The tag filters
+         * @argument {string} tags              The tags to test
+         */
+        var matchesSelectedTags = function (tagFilters, tags) {
+            var selectedTags = [];
+            $.each(tagFilters, function (_, filter) {
+                selectedTags.push(filter);
+            });
+    
+            // normalize the tags
+            var normalizedTags = tags.toLowerCase();
+    
+            var matches = true;
+            $.each(selectedTags, function (i, selectedTag) {
+                if (normalizedTags.indexOf(selectedTag) === -1) {
+                    matches = false;
+                    return false;
+                }
+            });
+    
+            return matches;
+        };
+    
+        /**
+       * Whether the specified item is selectable.
+       *
+       * @param item reporting task type
+       */
+      var isSelectable = function (item) {
+          return nfCommon.isBlank(item.usageRestriction) || nfCommon.canAccessRestrictedComponents();
+      };
+  
+      /**
+         * Formatter for the name column.
+         *
+         * @param {type} row
+         * @param {type} cell
+         * @param {type} value
+         * @param {type} columnDef
+         * @param {type} dataContext
+         * @returns {String}
+         */
+        var nameFormatter = function (row, cell, value, columnDef, dataContext) {
+            if (!dataContext.permissions.canRead) {
+                return '<span class="blank">' + dataContext.id + '</span>';
+            }
+    
+            return dataContext.component.name;
+        };
+    
+        /**
+         * Formatter for the type column.
+         *
+         * @param {type} row
+         * @param {type} cell
+         * @param {type} value
+         * @param {type} columnDef
+         * @param {type} dataContext
+         * @returns {String}
+         */
+        var typeFormatter = function (row, cell, value, columnDef, dataContext) {
+            if (!dataContext.permissions.canRead) {
+                return '';
+            }
+    
+          return nfCommon.substringAfterLast(dataContext.component.type, '.');
+        };
+    
+        /**
+         * 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 (sortDetails.columnId === 'moreDetails') {
+                        var aBulletins = 0;
+                      if (!nfCommon.isEmpty(a.bulletins)) {
+                            aBulletins = a.bulletins.length;
+                        }
+                        var bBulletins = 0;
+                      if (!nfCommon.isEmpty(b.bulletins)) {
+                            bBulletins = b.bulletins.length;
+                        }
+                        return aBulletins - bBulletins;
+                    } else if (sortDetails.columnId === 'type') {
+                      var aType = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(a.component[sortDetails.columnId], '.') : '';
+                      var bType = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? nfCommon.substringAfterLast(b.component[sortDetails.columnId], '.') : '';
+                        return aType === bType ? 0 : aType > bType ? 1 : -1;
+                    } else if (sortDetails.columnId === 'state') {
+                        var aState = 'Invalid';
+                      if (nfCommon.isEmpty(a.component.validationErrors)) {
+                          aState = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                        }
+                        var bState = 'Invalid';
+                      if (nfCommon.isEmpty(b.component.validationErrors)) {
+                          bState = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                        }
+                        return aState === bState ? 0 : aState > bState ? 1 : -1;
+                    } else {
+                      var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                      var bString = nfCommon.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) {
+                        return 0;
+                    }
+                    if (a.permissions.canRead) {
+                        return 1;
+                    } else {
+                        return -1;
+                    }
+                }
+            };
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+        };
+    
+        /**
+         * Get the text out of the filter field. If the filter field doesn't
+         * have any text it will contain the text 'filter list' so this method
+         * accounts for that.
+         */
+        var getReportingTaskTypeFilterText = function () {
+            return $('#reporting-task-type-filter').val();
+        };
+    
+        /**
+         * Filters the reporting task type table.
+         */
+        var applyReportingTaskTypeFilter = function () {
+            // get the dataview
+            var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(reportingTaskTypesGrid)) {
+                var reportingTaskTypesData = reportingTaskTypesGrid.getData();
+    
+                // update the search criteria
+                reportingTaskTypesData.setFilterArgs({
+                    searchString: getReportingTaskTypeFilterText()
+                });
+                reportingTaskTypesData.refresh();
+    
+              // update the buttons to possibly trigger the disabled state
+              $('#new-reporting-task-dialog').modal('refreshButtons');
+  
+                // update the selection if possible
+                if (reportingTaskTypesData.getLength() > 0) {
+                    reportingTaskTypesGrid.setSelectedRows([0]);
+                }
+            }
+        };
+    
+        /**
+         * Hides the selected reporting task.
+         */
+        var clearSelectedReportingTask = function () {
+            $('#reporting-task-type-description').text('');
+            $('#reporting-task-type-name').text('');
+            $('#selected-reporting-task-name').text('');
+            $('#selected-reporting-task-type').text('');
+            $('#reporting-task-description-container').hide();
+        };
+    
+        /**
+         * Clears the selected reporting task type.
+         */
+        var clearReportingTaskSelection = function () {
+            // clear the selected row
+            clearSelectedReportingTask();
+    
+            // clear the active cell the it can be reselected when its included
+            var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
+            reportingTaskTypesGrid.resetActiveCell();
+        };
+    
+        /**
+         * Performs the filtering.
+         *
+         * @param {object} item     The item subject to filtering
+         * @param {object} args     Filter arguments
+         * @returns {Boolean}       Whether or not to include the item
+         */
+        var filterReportingTaskTypes = function (item, args) {
+            // determine if the item matches the filter
+            var matchesFilter = matchesRegex(item, args);
+    
+            // determine if the row matches the selected tags
+            var matchesTags = true;
+            if (matchesFilter) {
+                var tagFilters = $('#reporting-task-tag-cloud').tagcloud('getSelectedTags');
+                var hasSelectedTags = tagFilters.length > 0;
+                if (hasSelectedTags) {
+                    matchesTags = matchesSelectedTags(tagFilters, item['tags']);
+                }
+            }
+    
+            // determine if this row should be visible
+            var matches = matchesFilter && matchesTags;
+    
+            // if this row is currently selected and its being filtered
+            if (matches === false && $('#selected-reporting-task-type').text() === item['type']) {
+                clearReportingTaskSelection();
+            }
+    
+            return matches;
+        };
+    
+        /**
+         * Adds the currently selected reporting task.
+         */
+        var addSelectedReportingTask = function () {
+            var selectedTaskType = $('#selected-reporting-task-type').text();
+    
+            // ensure something was selected
+            if (selectedTaskType === '') {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-settings.Settings'),
+                  dialogContent: nf._.msg('nf-settings.Message3')
+                });
+            } else {
+                addReportingTask(selectedTaskType);
+            }
+        };
+    
+        /**
+         * Adds a new reporting task of the specified type.
+         *
+         * @param {string} reportingTaskType
+         */
+        var addReportingTask = function (reportingTaskType) {
+            // build the reporting task entity
+            var reportingTaskEntity = {
+              'revision': nfClient.getRevision({
+                    'revision': {
+                        'version': 0
+                    }
+                }),
+                'component': {
+                    'type': reportingTaskType
+                }
+            };
+    
+            // add the new reporting task
+            var addTask = $.ajax({
+                type: 'POST',
+                url: config.urls.createReportingTask,
+                data: JSON.stringify(reportingTaskEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (reportingTaskEntity) {
+                // add the item
+                var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance');
+                var reportingTaskData = reportingTaskGrid.getData();
+                reportingTaskData.addItem(reportingTaskEntity);
+    
+                // resort
+                reportingTaskData.reSort();
+                reportingTaskGrid.invalidate();
+    
+                // select the new reporting task
+                var row = reportingTaskData.getRowById(reportingTaskEntity.id);
+                reportingTaskGrid.setSelectedRows([row]);
+                reportingTaskGrid.scrollRowIntoView(row);
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // hide the dialog
+            $('#new-reporting-task-dialog').modal('hide');
+    
+            return addTask;
+        };
+    
+        /**
+         * Initializes the new reporting task dialog.
+         */
+        var initNewReportingTaskDialog = function () {
+            // define the function for filtering the list
+            $('#reporting-task-type-filter').on('keyup', function (e) {
+                var code = e.keyCode ? e.keyCode : e.which;
+                if (code === $.ui.keyCode.ENTER) {
+                  // get the grid reference
+                  var grid = $('#reporting-task-types-table').data('gridInstance');
+                  var selected = grid.getSelectedRows();
+  
+                  if (selected.length > 0) {
+                      // grid configured with multi-select = false
+                      var item = grid.getDataItem(selected[0]);
+                      if (isSelectable(item)) {
+                            addSelectedReportingTask();
+                      }
+                  }
+                } else {
+                    applyReportingTaskTypeFilter();
+                }
+            });
+    
+            // initialize the processor type table
+            var reportingTaskTypesColumns = [
+              {
+                  id: 'type',
+                  name: nf._.msg('nf-settings.Type'),
+                  field: 'label',
+                  formatter: nfCommon.typeFormatter,
+                  sortable: false,
+                  resizable: true
+              },
+              {
+                  id: 'tags',
+                  name: nf._.msg('nf-settings.Tags'),
+                  field: 'tags',
+                  sortable: false,
+                  resizable: true
+              }
+            ];
+    
+            // initialize the dataview
+            var reportingTaskTypesData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            reportingTaskTypesData.setItems([]);
+            reportingTaskTypesData.setFilterArgs({
+                searchString: getReportingTaskTypeFilterText()
+            });
+            reportingTaskTypesData.setFilter(filterReportingTaskTypes);
+    
+            // initialize the grid
+            var reportingTaskTypesGrid = new Slick.Grid('#reporting-task-types-table', reportingTaskTypesData, reportingTaskTypesColumns, gridOptions);
+            reportingTaskTypesGrid.setSelectionModel(new Slick.RowSelectionModel());
+            reportingTaskTypesGrid.registerPlugin(new Slick.AutoTooltips());
+            reportingTaskTypesGrid.setSortColumn('type', true);
+            reportingTaskTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) {
+                if ($.isArray(args.rows) && args.rows.length === 1) {
+                    var reportingTaskTypeIndex = args.rows[0];
+                    var reportingTaskType = reportingTaskTypesGrid.getDataItem(reportingTaskTypeIndex);
+    
+                    // set the reporting task type description
+                  if (nfCommon.isDefinedAndNotNull(reportingTaskType)) {
+                        // show the selected reporting task
+                        $('#reporting-task-description-container').show();
+    
+                      if (nfCommon.isBlank(reportingTaskType.description)) {
+                          $('#reporting-task-type-description')
+                              .attr('title', '')
+                              .html('<span class="unset">No description specified</span>');
+                      } else {
+                          $('#reporting-task-type-description')
+                              .width($('#reporting-task-description-container').innerWidth() - 1)
+                              .html(reportingTaskType.description)
+                              .ellipsis();
+                      }
+  
+                      // populate the dom
+                      $('#reporting-task-type-name').text(reportingTaskType.label).ellipsis();
+                      $('#selected-reporting-task-name').text(reportingTaskType.label);
+                      $('#selected-reporting-task-type').text(reportingTaskType.type);
+  
+                      // refresh the buttons based on the current selection
+                      $('#new-reporting-task-dialog').modal('refreshButtons');
+                    }
+                }
+            });
+            reportingTaskTypesGrid.onDblClick.subscribe(function (e, args) {
+                var reportingTaskType = reportingTaskTypesGrid.getDataItem(args.row);
+    
+              if (isSelectable(reportingTaskType)) {
+                    addReportingTask(reportingTaskType.type);
+              }
+          });
+          reportingTaskTypesGrid.onViewportChanged.subscribe(function (e, args) {
+              nfCommon.cleanUpTooltips($('#reporting-task-types-table'), 'div.view-usage-restriction');
+            });
+    
+            // wire up the dataview to the grid
+            reportingTaskTypesData.onRowCountChanged.subscribe(function (e, args) {
+                reportingTaskTypesGrid.updateRowCount();
+                reportingTaskTypesGrid.render();
+    
+                // update the total number of displayed processors
+                $('#displayed-reporting-task-types').text(args.current);
+            });
+            reportingTaskTypesData.onRowsChanged.subscribe(function (e, args) {
+                reportingTaskTypesGrid.invalidateRows(args.rows);
+                reportingTaskTypesGrid.render();
+            });
+            reportingTaskTypesData.syncGridSelection(reportingTaskTypesGrid, true);
+    
+            // hold onto an instance of the grid
+          $('#reporting-task-types-table').data('gridInstance', reportingTaskTypesGrid).on('mouseenter', 'div.slick-cell', function (e) {
+              var usageRestriction = $(this).find('div.view-usage-restriction');
+              if (usageRestriction.length && !usageRestriction.data('qtip')) {
+                  var rowId = $(this).find('span.row-id').text();
+  
+                  // get the status item
+                  var item = reportingTaskTypesData.getItemById(rowId);
+  
+                  // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(item.usageRestriction)) {
+                      usageRestriction.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                          content: item.usageRestriction,
+                          position: {
+                              container: $('#summary'),
+                              at: 'bottom right',
+                              my: 'top left',
+                              adjust: {
+                                  x: 4,
+                                  y: 4
+                              }
+                          }
+                      }));
+                  }
+              }
+          });
+    
+            // load the available reporting tasks
+            $.ajax({
+                type: 'GET',
+                url: config.urls.reportingTaskTypes,
+                dataType: 'json'
+            }).done(function (response) {
+                var id = 0;
+                var tags = [];
+    
+                // begin the update
+                reportingTaskTypesData.beginUpdate();
+    
+                // go through each reporting task type
+                $.each(response.reportingTaskTypes, function (i, documentedType) {
+                    // add the documented type
+                    reportingTaskTypesData.addItem({
+                        id: id++,
+                      label: nfCommon.substringAfterLast(documentedType.type, '.'),
+                        type: documentedType.type,
+                      description: nfCommon.escapeHtml(documentedType.description),
+                      usageRestriction: nfCommon.escapeHtml(documentedType.usageRestriction),
+                        tags: documentedType.tags.join(', ')
+                    });
+    
+                    // count the frequency of each tag for this type
+                    $.each(documentedType.tags, function (i, tag) {
+                        tags.push(tag.toLowerCase());
+                    });
+                });
+    
+                // end the udpate
+                reportingTaskTypesData.endUpdate();
+    
+                // set the total number of processors
+                $('#total-reporting-task-types, #displayed-reporting-task-types').text(response.reportingTaskTypes.length);
+    
+                // create the tag cloud
+                $('#reporting-task-tag-cloud').tagcloud({
+                    tags: tags,
+                    select: applyReportingTaskTypeFilter,
+                    remove: applyReportingTaskTypeFilter
+                });
+          }).fail(nfErrorHandler.handleAjaxError);
+    
+            // initialize the reporting task dialog
+            $('#new-reporting-task-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-settings.Message11'),
+                buttons: [{
+                      buttonText: nf._.msg('nf-settings.Add'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                  disabled: function () {
+                      var selected = reportingTaskTypesGrid.getSelectedRows();
+  
+                      if (selected.length > 0) {
+                          // grid configured with multi-select = false
+                          var item = reportingTaskTypesGrid.getDataItem(selected[0]);
+                          return isSelectable(item) === false;
+                      } else {
+                          return reportingTaskTypesGrid.getData().getLength() === 0;
+                      }
+                  },
+                    handler: {
+                        click: function () {
+                            addSelectedReportingTask();
+                        }
+                    }
+                },
+                    {
+                      buttonText: nf._.msg('nf-settings.Cancel'),
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                $(this).modal('hide');
+                            }
+                        }
+                    }],
+                handler: {
+                    close: function () {
+                        // clear the selected row
+                        clearSelectedReportingTask();
+    
+                        // clear any filter strings
+                        $('#reporting-task-type-filter').val('');
+    
+                        // clear the tagcloud
+                        $('#reporting-task-tag-cloud').tagcloud('clearSelectedTags');
+    
+                        // reset the filter
+                        applyReportingTaskTypeFilter();
+    
+                        // unselect any current selection
+                        var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
+                        reportingTaskTypesGrid.setSelectedRows([]);
+                        reportingTaskTypesGrid.resetActiveCell();
+                  },
+                  resize: function () {
+                      $('#reporting-task-type-description')
+                          .width($('#reporting-task-description-container').innerWidth() - 1)
+                          .text($('#reporting-task-type-description').attr('title'))
+                          .ellipsis();
+                    }
+                }
+            });
+        };
+    
+        /**
+         * Initializes the reporting tasks tab.
+         */
+        var initReportingTasks = function () {
+            // initialize the new reporting task dialog
+            initNewReportingTaskDialog();
+    
+            var moreReportingTaskDetails = function (row, cell, value, columnDef, dataContext) {
+                if (!dataContext.permissions.canRead) {
+                    return '';
+                }
+    
+              var markup = '<div title="'+nf._.msg('nf-settings.ViewDetails')+'" class="pointer view-reporting-task fa fa-info-circle"></div>';
+    
+                // always include a button to view the usage
+              markup += '<div title="'+nf._.msg('nf-settings.Usage')+'" class="pointer reporting-task-usage fa fa-book"></div>';
+    
+              var hasErrors = !nfCommon.isEmpty(dataContext.component.validationErrors);
+              var hasBulletins = !nfCommon.isEmpty(dataContext.bulletins);
+    
+                if (hasErrors) {
+                  markup += '<div class="pointer has-errors fa fa-warning" ></div>';
+                }
+    
+                if (hasBulletins) {
+                  markup += '<div class="has-bulletins fa fa-sticky-note-o"></div>';
+                }
+    
+                if (hasErrors || hasBulletins) {
+                  markup += '<span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.component.id) + '</span>';
+                }
+    
+                return markup;
+            };
+    
+            var reportingTaskRunStatusFormatter = function (row, cell, value, columnDef, dataContext) {
+                if (!dataContext.permissions.canRead) {
+                    return '';
+                }
+    
+                // determine the appropriate label
+                var icon = '', label = '';
+              if (!nfCommon.isEmpty(dataContext.component.validationErrors)) {
+                  label = nf._.msg('nf-settings.Invalid');
+                    icon = 'invalid fa fa-warning';
+                } else {
+                    if (dataContext.component.state === 'STOPPED') {
+                      label = nf._.msg('nf-settings.Stopped');
+                      icon = 'fa fa-stop stopped';
+                    } else if (dataContext.component.state === 'RUNNING') {
+                      label = nf._.msg('nf-settings.Running');
+                      icon = 'fa fa-play running';
+                    } else {
+                      label = nf._.msg('nf-settings.Disabled');
+                      icon = 'icon icon-enable-false disabled';
+                    }
+                }
+    
+                // include the active thread count if appropriate
+                var activeThreadCount = '';
+              if (nfCommon.isDefinedAndNotNull(dataContext.component.activeThreadCount) && dataContext.component.activeThreadCount > 0) {
+                    activeThreadCount = '(' + dataContext.component.activeThreadCount + ')';
+                }
+    
+                // format the markup
+                var formattedValue = '<div layout="row"><div class="' + icon + '" style="margin-top: 3px;"></div>';
+              return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + nfCommon.escapeHtml(label) + '</div><div style="float: left; margin-left: 4px;">' + nfCommon.escapeHtml(activeThreadCount) + '</div></div>';
+            };
+    
+            var reportingTaskActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+    
+                if (dataContext.permissions.canRead && dataContext.permissions.canWrite) {
+                    if (dataContext.component.state === 'RUNNING') {
+                      markup += '<div title="'+nf._.msg('nf-settings.Stop')+'" class="pointer stop-reporting-task fa fa-stop" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                    } else if (dataContext.component.state === 'STOPPED' || dataContext.component.state === 'DISABLED') {
+                      markup += '<div title="'+nf._.msg('nf-settings.Edit')+'" class="pointer edit-reporting-task fa fa-pencil" style="margin-top: 2px; margin-right: 3px;" ></div>';
+    
+                        // support starting when stopped and no validation errors
+                      if (dataContext.component.state === 'STOPPED' && nfCommon.isEmpty(dataContext.component.validationErrors)) {
+                          markup += '<div title="'+nf._.msg('nf-settings.Start')+'" class="pointer start-reporting-task fa fa-play" style="margin-top: 2px; margin-right: 3px;"></div>';
+                        }
+                    }
+    
+                    if (dataContext.component.persistsState === true) {
+                      markup += '<div title="'+nf._.msg('nf-settings.ViewState')+'" class="pointer view-state-reporting-task fa fa-tasks" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                    }
+                }
+    
+              if (dataContext.permissions.canWrite && nfCommon.canModifyController()) {
+                  markup += '<div title="'+nf._.msg('nf-settings.Remove')+'" class="pointer delete-reporting-task fa fa-trash" style="margin-top: 2px; margin-right: 3px;" ></div>';
+                }
+    
+                // allow policy configuration conditionally
+              if (nfCanvasUtils.isConfigurableAuthorizer() && nfCommon.canAccessTenants()) {
+                  markup += '<div title="'+nf._.msg('nf-settings.AccessPolicies')+'" class="pointer edit-access-policies fa fa-key" style="margin-top: 2px;"></div>';
+                }
+    
+                return markup;
+            };
+    
+            // define the column model for the reporting tasks table
+            var reportingTasksColumnModel = [
+              {
+                  id: 'moreDetails',
+                  name: '&nbsp;',
+                  resizable: false,
+                  formatter: moreReportingTaskDetails,
+                  sortable: true,
+                  width: 90,
+                  maxWidth: 90,
+                  toolTip: 'Sorts based on presence of bulletins'
+              },
+              {id: 'name', name: nf._.msg('nf-settings.Name'), sortable: true, resizable: true, formatter: nameFormatter},
+              {id: 'type', name: nf._.msg('nf-settings.Type'), sortable: true, resizable: true, formatter: typeFormatter},
+              {
+                  id: 'state',
+                  name: nf._.msg('nf-settings.RunStatus'),
+                  sortable: true,
+                  resizeable: true,
+                  formatter: reportingTaskRunStatusFormatter
+              }
+            ];
+    
+            // action column should always be last
+          reportingTasksColumnModel.push({
+              id: 'actions',
+              name: '&nbsp;',
+              resizable: false,
+              formatter: reportingTaskActionFormatter,
+              sortable: false,
+              width: 90,
+              maxWidth: 90
+          });
+    
+            // initialize the dataview
+            var reportingTasksData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            reportingTasksData.setItems([]);
+    
+            // initialize the sort
+            sort({
+                columnId: 'name',
+                sortAsc: true
+            }, reportingTasksData);
+    
+            // initialize the grid
+            var reportingTasksGrid = new Slick.Grid('#reporting-tasks-table', reportingTasksData, reportingTasksColumnModel, gridOptions);
+            reportingTasksGrid.setSelectionModel(new Slick.RowSelectionModel());
+            reportingTasksGrid.registerPlugin(new Slick.AutoTooltips());
+            reportingTasksGrid.setSortColumn('name', true);
+            reportingTasksGrid.onSort.subscribe(function (e, args) {
+                sort({
+                    columnId: args.sortCol.id,
+                    sortAsc: args.sortAsc
+                }, reportingTasksData);
+            });
+    
+            // configure a click listener
+            reportingTasksGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the service at this row
+                var reportingTaskEntity = reportingTasksData.getItem(args.row);
+    
+                // determine the desired action
+                if (reportingTasksGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('edit-reporting-task')) {
+                      nfReportingTask.showConfiguration(reportingTaskEntity);
+                    } else if (target.hasClass('start-reporting-task')) {
+                      nfReportingTask.start(reportingTaskEntity);
+                    } else if (target.hasClass('stop-reporting-task')) {
+                      nfReportingTask.stop(reportingTaskEntity);
+                    } else if (target.hasClass('delete-reporting-task')) {
+                      nfReportingTask.promptToDeleteReportingTask(reportingTaskEntity);
+                    } else if (target.hasClass('view-state-reporting-task')) {
+                        var canClear = reportingTaskEntity.component.state === 'STOPPED' && reportingTaskEntity.component.activeThreadCount === 0;
+                      nfComponentState.showState(reportingTaskEntity, canClear);
+                    } else if (target.hasClass('edit-access-policies')) {
+                        // show the policies for this service
+                      nfPolicyManagement.showReportingTaskPolicy(reportingTaskEntity);
+    
+                        // close the settings dialog
+                        $('#shell-close-button').click();
+                    }
+                } else if (reportingTasksGrid.getColumns()[args.cell].id === 'moreDetails') {
+                    if (target.hasClass('view-reporting-task')) {
+                      nfReportingTask.showDetails(reportingTaskEntity);
+                    } else if (target.hasClass('reporting-task-usage')) {
+                        // close the settings dialog
+                        $('#shell-close-button').click();
+    
+                        // open the documentation for this reporting task
+                      nfShell.showPage('../nifi-docs/documentation?' + $.param({
+                              select: nfCommon.substringAfterLast(reportingTaskEntity.component.type, '.')
+                            })).done(function () {
+                          nfSettings.showSettings();
+                        });
+                    }
+                }
+            });
+    
+            // wire up the dataview to the grid
+            reportingTasksData.onRowCountChanged.subscribe(function (e, args) {
+                reportingTasksGrid.updateRowCount();
+                reportingTasksGrid.render();
+            });
+            reportingTasksData.onRowsChanged.subscribe(function (e, args) {
+                reportingTasksGrid.invalidateRows(args.rows);
+                reportingTasksGrid.render();
+            });
+            reportingTasksData.syncGridSelection(reportingTasksGrid, true);
+    
+            // hold onto an instance of the grid
+            $('#reporting-tasks-table').data('gridInstance', reportingTasksGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var errorIcon = $(this).find('div.has-errors');
+                if (errorIcon.length && !errorIcon.data('qtip')) {
+                    var taskId = $(this).find('span.row-id').text();
+    
+                    // get the task item
+                    var reportingTaskEntity = reportingTasksData.getItemById(taskId);
+    
+                    // format the errors
+                  var tooltip = nfCommon.formatUnorderedList(reportingTaskEntity.component.validationErrors);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                        errorIcon.qtip($.extend({},
+                          nfCommon.config.tooltipConfig,
+                            {
+                                content: tooltip,
+                                position: {
+                                    target: 'mouse',
+                                  viewport: $('#shell-container'),
+                                    adjust: {
+                                        x: 8,
+                                        y: 8,
+                                        method: 'flipinvert flipinvert'
+                                    }
+                                }
+                            }));
+                    }
+                }
+    
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var taskId = $(this).find('span.row-id').text();
+    
+                    // get the task item
+                    var reportingTaskEntity = reportingTasksData.getItemById(taskId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(reportingTaskEntity.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                        bulletinIcon.qtip($.extend({},
+                          nfCommon.config.tooltipConfig,
+                            {
+                                content: tooltip,
+                                position: {
+                                    target: 'mouse',
+                                  viewport: $('#shell-container'),
+                                    adjust: {
+                                        x: 8,
+                                        y: 8,
+                                        method: 'flipinvert flipinvert'
+                                    }
+                                }
+                            }));
+                    }
+                }
+            });
+        };
+    
+        /**
+         * Loads the settings.
+         */
+        var loadSettings = function () {
+            var setUnauthorizedText = function () {
+                $('#read-only-maximum-timer-driven-thread-count-field').addClass('unset').text('Unauthorized');
+                $('#read-only-maximum-event-driven-thread-count-field').addClass('unset').text('Unauthorized');
+            };
+    
+            var setEditable = function (editable) {
+                if (editable) {
+                    $('#general-settings div.editable').show();
+                    $('#general-settings div.read-only').hide();
+                    $('#settings-save').show();
+                } else {
+                    $('#general-settings div.editable').hide();
+                    $('#general-settings div.read-only').show();
+                    $('#settings-save').hide();
+                }
+            };
+    
+            var settings = $.Deferred(function (deferred) {
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.controllerConfig,
+                    dataType: 'json'
+                }).done(function (response) {
+                    if (response.permissions.canWrite) {
+                        // populate the settings
+                        $('#maximum-timer-driven-thread-count-field').removeClass('unset').val(response.component.maxTimerDrivenThreadCount);
+                        $('#maximum-event-driven-thread-count-field').removeClass('unset').val(response.component.maxEventDrivenThreadCount);
+    
+                        setEditable(true);
+    
+                        // register the click listener for the save button
+                        $('#settings-save').off('click').on('click', function () {
+                            saveSettings(response.revision.version);
+                        });
+                    } else {
+                        if (response.permissions.canRead) {
+                            // populate the settings
+                            $('#read-only-maximum-timer-driven-thread-count-field').removeClass('unset').text(response.component.maxTimerDrivenThreadCount);
+                            $('#read-only-maximum-event-driven-thread-count-field').removeClass('unset').text(response.component.maxEventDrivenThreadCount);
+                        } else {
+                            setUnauthorizedText();
+                        }
+    
+                        setEditable(false);
+                    }
+                    deferred.resolve();
+                }).fail(function (xhr, status, error) {
+                    if (xhr.status === 403) {
+                        setUnauthorizedText();
+                        setEditable(false);
+                        deferred.resolve();
+                    } else {
+                        deferred.reject(xhr, status, error);
+                    }
+                });
+            }).promise();
+    
+            // load the controller services
+            var controllerServicesUri = config.urls.api + '/flow/controller/controller-services';
+          var controllerServicesXhr = nfControllerServices.loadControllerServices(controllerServicesUri, getControllerServicesTable());
+    
+            // load the reporting tasks
+            var reportingTasks = loadReportingTasks();
+    
+            // return a deferred for all parts of the settings
+          return $.when(settings, controllerServicesXhr, reportingTasks).done(function (settingsResult, controllerServicesResult) {
+                var controllerServicesResponse = controllerServicesResult[0];
+    
+                // update the current time
+                $('#settings-last-refreshed').text(controllerServicesResponse.currentTime);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Loads the reporting tasks.
+         */
+        var loadReportingTasks = function () {
+            return $.ajax({
+                type: 'GET',
+                url: config.urls.reportingTasks,
+                dataType: 'json'
+            }).done(function (response) {
+                var tasks = [];
+                $.each(response.reportingTasks, function (_, task) {
+                    tasks.push($.extend({
+                        bulletins: []
+                    }, task));
+                });
+    
+                var reportingTasksElement = $('#reporting-tasks-table');
+              nfCommon.cleanUpTooltips(reportingTasksElement, 'div.has-errors');
+              nfCommon.cleanUpTooltips(reportingTasksElement, 'div.has-bulletins');
+    
+                var reportingTasksGrid = reportingTasksElement.data('gridInstance');
+                var reportingTasksData = reportingTasksGrid.getData();
+    
+                // update the reporting tasks
+                reportingTasksData.setItems(tasks);
+                reportingTasksData.reSort();
+                reportingTasksGrid.invalidate();
+            });
+        };
+    
+        /**
+         * Shows the process group configuration.
+         */
+        var showSettings = function () {
+            // show the settings dialog
+          nfShell.showContent('#settings').done(function () {
+                reset();
+            });
+    
+            //reset content to account for possible policy changes
+            $('#settings-tabs').find('.selected-tab').click();
+    
+            // adjust the table size
+          nfSettings.resetTableSize();
+        };
+    
+        /**
+         * Reset state of this dialog.
+         */
+        var reset = function () {
+            // reset button state
+            $('#settings-save').mouseout();
+        };
+    
+      var nfSettings = {
+            /**
+             * Initializes the settings page.
+             */
+            init: function () {
+                // initialize the settings tabs
+                $('#settings-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                      name: nf._.msg('nf-settings.General'),
+                        tabContentId: 'general-settings-tab-content'
+                    }, {
+                      name: nf._.msg('nf-settings.ControllerServices'),
+                        tabContentId: 'controller-services-tab-content'
+                    }, {
+                      name: nf._.msg('nf-settings.ReportingTasks'),
+                        tabContentId: 'reporting-tasks-tab-content'
+                    }],
+                    select: function () {
+                        var tab = $(this).text();
+                      if (tab === nf._.msg('nf-settings.General')) {
+                          $('#controller-cs-availability').hide();
+                            $('#new-service-or-task').hide();
+                            $('#settings-save').show();
+                        } else {
+                            var canModifyController = false;
+                          if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                                // only consider write permissions for creating new controller services/reporting tasks
+                              canModifyController = nfCommon.currentUser.controllerPermissions.canWrite === true;
+                            }
+    
+                            if (canModifyController) {
+                                $('#new-service-or-task').show();
+                                $('div.controller-settings-table').css('top', '32px');
+    
+                                // update the tooltip on the button
+                                $('#new-service-or-task').attr('title', function () {
+                                  if (tab === nf._.msg('nf-settings.ControllerServices')) {
+                                        $('#settings-save').hide();
+                                      return nf._.msg('nf-settings.Message12');
+                                  } else if (tab === nf._.msg('nf-settings.ReportingTasks')) {
+                                        $('#settings-save').hide();
+                                      return nf._.msg('nf-settings.Message13');
+                                    }
+                                });
+                            } else {
+                                $('#new-service-or-task').hide();
+                                $('div.controller-settings-table').css('top', '0');
+                            }
+    
+                          if (tab === nf._.msg('nf-settings.ControllerServices')) {
+                              $('#controller-cs-availability').show();
+                          } else if (tab === nf._.msg('nf-settings.ReportingTasks')) {
+                              $('#controller-cs-availability').hide();
+                          }
+  
+                            // resize the table
+                          nfSettings.resetTableSize();
+                        }
+                    }
+                });
+    
+                // settings refresh button
+                $('#settings-refresh-button').click(function () {
+                    loadSettings();
+                });
+    
+                // create a new controller service or reporting task
+                $('#new-service-or-task').on('click', function () {
+                    var selectedTab = $('#settings-tabs li.selected-tab').text();
+                  if (selectedTab === nf._.msg('nf-settings.ControllerServices')) {
+                        var controllerServicesUri = config.urls.api + '/controller/controller-services';
+                      nfControllerServices.promptNewControllerService(controllerServicesUri, getControllerServicesTable());
+                  } else if (selectedTab === nf._.msg('nf-settings.ReportingTasks')) {
+                        $('#new-reporting-task-dialog').modal('show');
+    
+                        // reset the canvas size after the dialog is shown
+                        var reportingTaskTypesGrid = $('#reporting-task-types-table').data('gridInstance');
+                      if (nfCommon.isDefinedAndNotNull(reportingTaskTypesGrid)) {
+                            reportingTaskTypesGrid.setSelectedRows([0]);
+                            reportingTaskTypesGrid.resizeCanvas();
+                        }
+    
+                        // set the initial focus
+                        $('#reporting-task-type-filter').focus();
+                    }
+                });
+    
+                // initialize each tab
+                initGeneral();
+              nfControllerServices.init(getControllerServicesTable(), nfSettings.showSettings);
+                initReportingTasks();
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+              nfControllerServices.resetTableSize(getControllerServicesTable());
+    
+                var reportingTasksGrid = $('#reporting-tasks-table').data('gridInstance');
+              if (nfCommon.isDefinedAndNotNull(reportingTasksGrid)) {
+                    reportingTasksGrid.resizeCanvas();
+                }
+            },
+    
+            /**
+             * Shows the settings dialog.
+             */
+            showSettings: function () {
+                return loadSettings().done(showSettings);
+            },
+    
+            /**
+             * Loads the settings dialogs.
+             */
+            loadSettings: function () {
+                return loadSettings();
+            },
+    
+            /**
+             * Selects the specified controller service.
+             *
+             * @param {string} controllerServiceId
+             */
+            selectControllerService: function (controllerServiceId) {
+                var controllerServiceGrid = getControllerServicesTable().data('gridInstance');
+                var controllerServiceData = controllerServiceGrid.getData();
+    
+                // select the desired service
+                var row = controllerServiceData.getRowById(controllerServiceId);
+                controllerServiceGrid.setSelectedRows([row]);
+                controllerServiceGrid.scrollRowIntoView(row);
+    
+                // select the controller services tab
+                $('#settings-tabs').find('li:eq(1)').click();
+            },
+    
+            /**
+             * Sets the controller service and reporting task bulletins in their respective tables.
+             *
+             * @param {object} controllerServiceBulletins
+             * @param {object} reportingTaskBulletins
+             */
+            setBulletins: function (controllerServiceBulletins, reportingTaskBulletins) {
+                if ($('#controller-services-table').data('gridInstance')) {
+                  nfControllerServices.setBulletins(getControllerServicesTable(), controllerServiceBulletins);
+                }
+    
+                // reporting tasks
+                var reportingTasksGrid = $('#reporting-tasks-table').data('gridInstance');
+                var reportingTasksData = reportingTasksGrid.getData();
+                reportingTasksData.beginUpdate();
+    
+                // if there are some bulletins process them
+              if (!nfCommon.isEmpty(reportingTaskBulletins)) {
+                    var reportingTaskBulletinsBySource = d3.nest()
+                        .key(function (d) {
+                            return d.sourceId;
+                        })
+                        .map(reportingTaskBulletins, d3.map);
+    
+                    reportingTaskBulletinsBySource.forEach(function (sourceId, sourceBulletins) {
+                        var reportingTask = reportingTasksData.getItemById(sourceId);
+                      if (nfCommon.isDefinedAndNotNull(reportingTask)) {
+                            reportingTasksData.updateItem(sourceId, $.extend(reportingTask, {
+                                bulletins: sourceBulletins
+                            }));
+                        }
+                    });
+                } else {
+                    // if there are no bulletins clear all
+                    var reportingTasks = reportingTasksData.getItems();
+                    $.each(reportingTasks, function (_, reportingTask) {
+                        reportingTasksData.updateItem(reportingTask.id, $.extend(reportingTask, {
+                            bulletins: []
+                        }));
+                    });
+                }
+                reportingTasksData.endUpdate();
+            }
+        };
+    
+      return nfSettings;
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-snippet.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-snippet.js
new file mode 100644
index 000000000000..e5c36587b23d
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-snippet.js
@@ -0,0 +1,175 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'd3',
+                'nf.CanvasUtils',
+                'nf.Client'],
+            function ($, d3, nfCanvasUtils, nfClient) {
+                return (nf.Snippet = factory($, d3, nfCanvasUtils, nfClient));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Snippet =
+            factory(require('jquery'),
+                require('d3'),
+                require('nf.CanvasUtils'),
+                require('nf.Client')));
+    } else {
+        nf.Snippet = factory(root.$,
+            root.d3,
+            root.nf.CanvasUtils,
+            root.nf.Client);
+    }
+}(this, function ($, d3, nfCanvasUtils, nfClient) {
+    'use strict';
+
+    var config = {
+        urls: {
+            snippets: '../nifi-api/snippets',
+            processGroups: '../nifi-api/process-groups'
+        }
+    };
+
+    return {
+
+        /**
+         * Marshals snippet from the specified selection.
+         *
+         * @argument {selection} selection      The selection to marshal
+         * @argument {string} parentGroupId     The parent group id
+         */
+        marshal: function (selection, parentGroupId) {
+            var snippet = {
+                parentGroupId: parentGroupId,
+                processors: {},
+                funnels: {},
+                inputPorts: {},
+                outputPorts: {},
+                remoteProcessGroups: {},
+                processGroups: {},
+                connections: {},
+                labels: {}
+            };
+
+            // go through each component and identify its type
+            selection.each(function (d) {
+                var selected = d3.select(this);
+
+                if (nfCanvasUtils.isProcessor(selected)) {
+                    snippet.processors[d.id] = nfClient.getRevision(selected.datum());
+                } else if (nfCanvasUtils.isFunnel(selected)) {
+                    snippet.funnels[d.id] = nfClient.getRevision(selected.datum());
+                } else if (nfCanvasUtils.isLabel(selected)) {
+                    snippet.labels[d.id] = nfClient.getRevision(selected.datum());
+                } else if (nfCanvasUtils.isInputPort(selected)) {
+                    snippet.inputPorts[d.id] = nfClient.getRevision(selected.datum());
+                } else if (nfCanvasUtils.isOutputPort(selected)) {
+                    snippet.outputPorts[d.id] = nfClient.getRevision(selected.datum());
+                } else if (nfCanvasUtils.isProcessGroup(selected)) {
+                    snippet.processGroups[d.id] = nfClient.getRevision(selected.datum());
+                } else if (nfCanvasUtils.isRemoteProcessGroup(selected)) {
+                    snippet.remoteProcessGroups[d.id] = nfClient.getRevision(selected.datum());
+                } else if (nfCanvasUtils.isConnection(selected)) {
+                    snippet.connections[d.id] = nfClient.getRevision(selected.datum());
+                }
+            });
+
+            return snippet;
+        },
+
+        /**
+         * Creates a snippet.
+         *
+         * @argument {object} snippet       The snippet
+         */
+        create: function (snippet) {
+            var snippetEntity = {
+                'snippet': snippet
+            };
+
+            return $.ajax({
+                type: 'POST',
+                url: config.urls.snippets,
+                data: JSON.stringify(snippetEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            });
+        },
+
+        /**
+         * Copies the snippet to the specified group and origin.
+         *
+         * @argument {string} snippetId         The snippet id
+         * @argument {object} origin            The origin
+         * @argument {string} destinationGroupId    The destination group id
+         */
+        copy: function (snippetId, origin, destinationGroupId) {
+            var copySnippetRequestEntity = {
+                'snippetId': snippetId,
+                'originX': origin.x,
+                'originY': origin.y
+            };
+
+            return $.ajax({
+                type: 'POST',
+                url: config.urls.processGroups + '/' + encodeURIComponent(destinationGroupId) + '/snippet-instance',
+                data: JSON.stringify(copySnippetRequestEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            });
+        },
+
+        /**
+         * Removes the specified snippet.
+         *
+         * @argument {string} snippetId         The snippet id
+         */
+        remove: function (snippetId) {
+            return $.ajax({
+                type: 'DELETE',
+                url: config.urls.snippets + '/' + encodeURIComponent(snippetId)
+            });
+        },
+
+        /**
+         * Moves the snippet into the specified group.
+         *
+         * @argument {string} snippetId         The snippet id
+         * @argument {string} newGroupId        The new group id
+         */
+        move: function (snippetId, newGroupId) {
+            var moveSnippetEntity = {
+                'snippet': {
+                    'id': snippetId,
+                    'parentGroupId': newGroupId
+                }
+            };
+
+            return $.ajax({
+                type: 'PUT',
+                url: config.urls.snippets + '/' + encodeURIComponent(snippetId),
+                data: JSON.stringify(moveSnippetEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            });
+        }
+    };
+}));
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js
new file mode 100644
index 000000000000..9858e78e19ca
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js
@@ -0,0 +1,1365 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.ErrorHandler'],
+              function ($, Slick, nfCommon, nfDialog, nfErrorHandler) {
+                  return (nf.ClusterTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler));
+              });
+      } 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, nfCommon, nfDialog, nfErrorHandler) {
+      'use strict';
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            primaryNode: 'Primary Node',
+          clusterCoordinator: 'Cluster Coordinator',
+            urls: {
+                cluster: '../nifi-api/controller/cluster',
+              nodes: '../nifi-api/controller/cluster/nodes',
+              systemDiagnostics: '../nifi-api/system-diagnostics'
+          },
+          data: [{
+              name: 'cluster',
+              update: refreshClusterData,
+              isAuthorized: nfCommon.canAccessController
+          }, {
+              name: 'systemDiagnostics',
+              update: refreshSystemDiagnosticsData,
+              isAuthorized: nfCommon.canAccessSystem
+          }
+          ]
+      };
+  
+      var commonTableOptions = {
+          forceFitColumns: true,
+          enableTextSelectionOnCells: true,
+          enableCellNavigation: false,
+          enableColumnReorder: false,
+          autoEdit: false,
+          rowHeight: 24
+      };
+  
+      var nodesTab = {
+          name: 'Nodes',
+          data: {
+              dataSet: 'cluster',
+              update: updateNodesTableData
+          },
+          tabContentId: 'cluster-nodes-tab-content',
+          tableId: 'cluster-nodes-table',
+          tableColumnModel: createNodeTableColumnModel,
+          tableIdColumn: 'nodeId',
+          tableOptions: commonTableOptions,
+          tableOnClick: nodesTableOnClick,
+          init: commonTableInit,
+          onSort: sort,
+          onTabSelected: onSelectTab,
+          filterOptions: [{
+              text: 'by address',
+                value: 'address'
+            }, {
+                text: nf._.msg('nf-cluster-table.ByStatus'),
+                value: 'status'
+          }]
+      };
+  
+      var jvmTab = {
+          name: 'JVM',
+          data: {
+              dataSet: 'systemDiagnostics',
+              update: updateJvmTableData
+          },
+          tabContentId: 'cluster-jvm-tab-content',
+          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: 'uptime',
+                  field: 'uptime',
+                  name: 'Uptime',
+                  sortable: true,
+                  resizable: true,
+                  cssClass: 'cell-right',
+                  headerCssClass: 'header-right'
+              }
+          ],
+          tableIdColumn: 'id',
+          tableOptions: commonTableOptions,
+          tableOnClick: null,
+          init: commonTableInit,
+          onSort: sort,
+          onTabSelected: onSelectTab,
+          filterOptions: [{
+              text: 'by address',
+              value: 'node'
+          }]
+      };
+  
+      var systemTab = {
+          name: 'System',
+          data: {
+              dataSet: 'systemDiagnostics',
+              update: updateSystemTableData
+          },
+          tabContentId: 'cluster-system-tab-content',
+          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'
+              }
+          ],
+          tableIdColumn: 'id',
+          tableOptions: commonTableOptions,
+          tableOnClick: null,
+          init: commonTableInit,
+          onSort: sort,
+          onTabSelected: onSelectTab,
+          filterOptions: [{
+              text: 'by address',
+              value: 'node'
+          }]
+      };
+  
+      var flowFileTab = {
+          name: 'FlowFile Storage',
+          data: {
+              dataSet: 'systemDiagnostics',
+              update: updateFlowFileTableData
+          },
+          tabContentId: 'cluster-flowfile-tab-content',
+          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'
+              }
+          ],
+          tableIdColumn: 'id',
+          tableOptions: commonTableOptions,
+          tableOnClick: null,
+          init: commonTableInit,
+          onSort: sort,
+          onTabSelected: onSelectTab,
+          filterOptions: [{
+              text: 'by address',
+              value: 'node'
+          }]
+      };
+  
+      var contentTab = {
+          name: 'Content Storage',
+          data: {
+              dataSet: 'systemDiagnostics',
+              update: updateContentTableData
+          },
+          tabContentId: 'cluster-content-tab-content',
+          tableId: 'cluster-content-table',
+          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'
+              }
+          ],
+          tableIdColumn: 'id',
+          tableOptions: commonTableOptions,
+          tableOnClick: null,
+          init: commonTableInit,
+          onSort: sort,
+          onTabSelected: onSelectTab,
+          filterOptions: [{
+              text: 'by address',
+              value: 'node'
+          }, {
+              text: 'by repository',
+              value: 'contentRepoId'
+          }]
+      };
+  
+      var versionTab = {
+          name: 'Versions',
+          data: {
+              dataSet: 'systemDiagnostics',
+              update: updateVersionTableData
+          },
+          tabContentId: 'cluster-version-tab-content',
+          tableId: 'cluster-version-table',
+          tableColumnModel: [
+              {id: 'node', field: 'node', name: 'Node Address', sortable: true, resizable: true},
+              {id: 'version', field: 'version', name: 'NiFi Version', sortable: true, resizable: true},
+              {id: 'javavendor', field: 'javaVendor', name: 'Java Vendor', sortable: true, resizable: true},
+              {id: 'javaversion', field: 'javaVersion', name: 'Java Version', sortable: true, resizable: true},
+              {id: 'osname', field: 'osName', name: 'OS Name', sortable: true, resizable: true},
+              {id: 'osversion', field: 'osVersion', name: 'OS Version', sortable: true, resizable: true},
+              {id: 'osarch', field: 'osArchitecture', name: 'OS Architecture', sortable: true, resizable: true}
+          ],
+          tableIdColumn: 'id',
+          tableOptions: commonTableOptions,
+          tableOnClick: null,
+          init: commonTableInit,
+          onSort: sort,
+          onTabSelected: onSelectTab,
+          filterOptions: [{
+              text: 'by address',
+              value: 'address'
+          }]
+      };
+  
+      var clusterTabs = [nodesTab, systemTab, jvmTab, flowFileTab, contentTab, versionTab];
+      var tabsByName = {};
+      var dataSetHandlers = {};
+  
+      /**
+       * Click handler for the Nodes table options.
+       */
+      function nodesTableOnClick(e, args, target, item) {
+          if (nodesTab.grid.getColumns()[args.cell].id === 'actions') {
+              if (target.hasClass('prompt-for-connect')) {
+                  promptForConnect(item);
+              } else if (target.hasClass('prompt-for-removal')) {
+                  promptForRemoval(item);
+              } else if (target.hasClass('prompt-for-disconnect')) {
+                  promptForDisconnect(item);
+              }
+          } else if (nodesTab.grid.getColumns()[args.cell].id === 'moreDetails') {
+              if (target.hasClass('show-node-details')) {
+                  showNodeDetails(item);
+              }
+          }
+      }
+  
+      /**
+       * Creates the Slick Grid column model for the Nodes table.
+       */
+      function createNodeTableColumnModel() {
+            var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
+                return '<div title="'+nf._.msg('nf-cluster-table.ViewDetails')+'" class="pointer show-node-details fa fa-info-circle" style="margin-top: 2px;"></div>';
+            };
+    
+            // define a custom formatter for the run status column
+            var nodeFormatter = function (row, cell, value, columnDef, dataContext) {
+                return formatNodeAddress(dataContext);
+            };
+    
+            // function for formatting the last accessed time
+            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
+              return nfCommon.formatValue(value);
+            };
+    
+            // define a custom formatter for the status column
+            var statusFormatter = function (row, cell, value, columnDef, dataContext) {
+              return formatNodeStatus(dataContext);
+            };
+    
+            var columnModel = [
+              {
+                  id: 'moreDetails',
+                  name: '&nbsp;',
+                  sortable: false,
+                  resizable: false,
+                  formatter: moreDetailsFormatter,
+                  width: 50,
+                  maxWidth: 50
+              },
+              {
+                  id: 'formattedNodeAddress',
+                  field: 'formattedNodeAddress',
+                  name: nf._.msg('nf-cluster-table.Node Address'),
+                  formatter: nodeFormatter,
+                  resizable: true,
+                  sortable: true
+              },
+              {
+                  id: 'activeThreadCount',
+                  field: 'activeThreadCount',
+                  name: nf._.msg('nf-cluster-table.ActiveThreadCount'),
+                  resizable: true,
+                  sortable: true,
+                  defaultSortAsc: false
+              },
+              {
+                  id: 'queued',
+                  field: 'queued',
+                  name: '<span class="queued-title">'+nf._.msg('nf-cluster-table.Queue')+'</span>&nbsp;/&nbsp;<span class="queued-size-title">Size</span>',
+                  resizable: true,
+                  sortable: true,
+                  defaultSortAsc: false
+              },
+              {
+                  id: 'status',
+                  field: 'status',
+                  name: nf._.msg('nf-cluster-table.Status'),
+                  formatter: statusFormatter,
+                  resizable: true,
+                  sortable: true
+              },
+              {
+                  id: 'uptime',
+                  field: 'nodeStartTime',
+                  name: nf._.msg('nf-cluster-table.Uptime'),
+                  formatter: valueFormatter,
+                  resizable: true,
+                  sortable: true,
+                  defaultSortAsc: false
+              },
+              {
+                  id: 'heartbeat',
+                  field: 'heartbeat',
+                  name: nf._.msg('nf-cluster-table.LastHeartbeat'),
+                  formatter: valueFormatter,
+                  resizable: true,
+                  sortable: true,
+                  defaultSortAsc: false
+              }
+            ];
+    
+            // only allow the admin to modify the cluster
+          if (nfCommon.canModifyController()) {
+                var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var canDisconnect = false;
+                    var canConnect = false;
+    
+                    // determine the current status
+                    if (dataContext.status === 'CONNECTED' || dataContext.status === 'CONNECTING') {
+                        canDisconnect = true;
+                    } else if (dataContext.status === 'DISCONNECTED') {
+                        canConnect = true;
+                    }
+    
+                    // return the appropriate markup
+                    if (canConnect) {
+                        return '<div title="'+nf._.msg('nf-cluster-table.Connect')+'" class="pointer prompt-for-connect fa fa-plug" style="margin-top: 2px;"></div>&nbsp;<div title="'+nf._.msg('nf-cluster-table.Delete')+'" class="pointer prompt-for-removal fa fa-trash" style="margin-top: 2px;"></div>';
+                    } else if (canDisconnect) {
+                    	return '<div title="'+nf._.msg('nf-cluster-table.Disconnect')+'" class="pointer prompt-for-disconnect fa fa-power-off" style="margin-top: 2px;"></div>';
+                    } else {
+                        return '<div style="width: 16px; height: 16px;">&nbsp;</div>';
+                    }
+                };
+    
+              columnModel.push({
+                  id: 'actions',
+                  label: '&nbsp;',
+                  formatter: actionFormatter,
+                  resizable: false,
+                  sortable: false,
+                  width: 80,
+                  maxWidth: 80
+              });
+          }
+  
+          return columnModel;
+      }
+  
+      var prevColumn, count;
+  
+      /**
+       * Sorts the specified data using the specified sort details.
+       *
+       * @param {object} sortDetails
+       * @param {object} data
+       */
+      function sort(sortDetails, dataView, tab) {
+          // defines a function for sorting
+          var comparer = function (a, b) {
+              if (sortDetails.columnId === 'heartbeat' || sortDetails.columnId === 'uptime') {
+                  var aDate = nfCommon.parseDateTime(a[sortDetails.columnId]);
+                  var bDate = nfCommon.parseDateTime(b[sortDetails.columnId]);
+                  return aDate.getTime() - bDate.getTime();
+              } else if (sortDetails.columnId === 'queued') {
+                  var aSplit = a[sortDetails.columnId].split(/ \/ /);
+                  var bSplit = b[sortDetails.columnId].split(/ \/ /);
+                  var mod = count % 4;
+                  if (mod < 2) {
+                      $('#cluster-nodes-table span.queued-title').addClass('sorted');
+                      var aCount = nfCommon.parseCount(aSplit[0]);
+                      var bCount = nfCommon.parseCount(bSplit[0]);
+                      return aCount - bCount;
+                  } else {
+                      $('#cluster-nodes-table span.queued-size-title').addClass('sorted');
+                      var aSize = nfCommon.parseSize(aSplit[1]);
+                      var bSize = nfCommon.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 = nfCommon.parseSize(a[sortDetails.columnId]);
+                  var bSize = nfCommon.parseSize(b[sortDetails.columnId]);
+                  return aSize - bSize;
+              } else if (sortDetails.columnId === 'totalThreads' || sortDetails.columnId === 'daemonThreads'
+                  || sortDetails.columnId === 'processors') {
+                  var aCount = nfCommon.parseCount(a[sortDetails.columnId]);
+                  var bCount = nfCommon.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 = nfCommon.parseCount(aSplit[0]);
+                  var bCount = nfCommon.parseCount(bSplit[0]);
+                  return aCount - bCount;
+              } else if (sortDetails.columnId === 'status') {
+                  var aStatus = formatNodeStatus(a);
+                  var bStatus = formatNodeStatus(b);
+                  return aStatus === bStatus ? 0 : aStatus > bStatus ? 1 : -1;
+              } else if (sortDetails.columnId === 'formattedNodeAddress') {
+                  var aNode = formatNodeAddress(a);
+                  var bNode = formatNodeAddress(b);
+                  return aNode === bNode ? 0 : aNode > bNode ? 1 : -1;
+              } else {
+                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                  return aString === bString ? 0 : aString > bString ? 1 : -1;
+              }
+          };
+  
+          // remove previous sort indicators
+          $('#cluster-nodes-table span.queued-title').removeClass('sorted');
+          $('#cluster-nodes-table span.queued-size-title').removeClass('sorted');
+  
+          // update/reset the count as appropriate
+          if (prevColumn !== sortDetails.columnId) {
+              count = 0;
+          } else {
+              count++;
+          }
+  
+          // perform the sort
+          dataView.sort(comparer, sortDetails.sortAsc);
+  
+          // record the previous table and sorted column
+          prevColumn = sortDetails.columnId;
+      };
+  
+      /**
+       * Formats the address for the specified node.
+       *
+       * @param {object} node
+       * @returns {string}
+       */
+      var formatNodeAddress = function (node) {
+          return nfCommon.escapeHtml(node.address) + ':' + nfCommon.escapeHtml(node.apiPort);
+      };
+  
+      /**
+       * Formats the status for the specified node.
+       *
+       * @param {object} node
+       * @returns {string}
+       */
+      var formatNodeStatus = function (node) {
+          var markup = node.status;
+          if (node.roles.includes(config.primaryNode)) {
+              markup += ', PRIMARY';
+          }
+          if (node.roles.includes(config.clusterCoordinator)) {
+              markup += ', COORDINATOR';
+          }
+          return markup;
+      }
+  
+      /**
+       * Prompts to verify node connection.
+       *
+       * @argument {object} node     The node
+       */
+      var promptForConnect = function (node) {
+          // prompt to connect
+          nfDialog.showYesNoDialog({
+              headerText: 'Connect Node',
+              dialogContent: 'Connect \'' + formatNodeAddress(node) + '\' to this cluster?',
+              yesHandler: function () {
+                  connect(node.nodeId);
+              }
+          });
+      };
+  
+      /**
+       * Connects the node in the specified row.
+       *
+       * @argument {string} nodeId     The node id
+       */
+      var connect = function (nodeId) {
+          var entity = {
+              'node': {
+                  'nodeId': nodeId,
+                  'status': 'CONNECTING'
+              }
+          };
+          $.ajax({
+              type: 'PUT',
+              url: config.urls.nodes + '/' + encodeURIComponent(nodeId),
+              data: JSON.stringify(entity),
+              dataType: 'json',
+              contentType: 'application/json'
+          }).done(function (response) {
+              var node = response.node;
+  
+              // update the node in the table
+              var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
+              var clusterData = clusterGrid.getData();
+              clusterData.updateItem(node.nodeId, node);
+          }).fail(nfErrorHandler.handleAjaxError);
+      };
+  
+      /**
+       * Prompts to verify node disconnection.
+       *
+       * @argument {object} node     The node
+       */
+      var promptForDisconnect = function (node) {
+          // prompt for disconnect
+          nfDialog.showYesNoDialog({
+              headerText: 'Disconnect Node',
+              dialogContent: 'Disconnect \'' + formatNodeAddress(node) + '\' from the cluster?',
+              yesHandler: function () {
+                  disconnect(node.nodeId);
+              }
+          });
+      };
+  
+      /**
+       * Disconnects the node in the specified row.
+       *
+       * @argument {string} nodeId     The node id
+       */
+      var disconnect = function (nodeId) {
+          var entity = {
+              'node': {
+                  'nodeId': nodeId,
+                  'status': 'DISCONNECTING'
+              }
+          };
+  
+          $.ajax({
+              type: 'PUT',
+              url: config.urls.nodes + '/' + encodeURIComponent(nodeId),
+              data: JSON.stringify(entity),
+              dataType: 'json',
+              contentType: 'application/json'
+          }).done(function (response) {
+              var node = response.node;
+  
+              // update the node in the table
+              var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
+              var clusterData = clusterGrid.getData();
+              clusterData.updateItem(node.nodeId, node);
+          }).fail(nfErrorHandler.handleAjaxError);
+      };
+  
+      /**
+       * Prompts to verify node disconnection.
+       *
+       * @argument {object} node     The node
+       */
+      var promptForRemoval = function (node) {
+          // prompt for disconnect
+          nfDialog.showYesNoDialog({
+              headerText: 'Remove Node',
+              dialogContent: 'Remove \'' + formatNodeAddress(node) + '\' from the cluster?',
+              yesHandler: function () {
+                  remove(node.nodeId);
+              }
+          });
+      };
+  
+      /**
+       * Disconnects the node in the specified row.
+       *
+       * @argument {string} nodeId     The node id
+       */
+      var remove = function (nodeId) {
+          $.ajax({
+              type: 'DELETE',
+              url: config.urls.nodes + '/' + encodeURIComponent(nodeId),
+              dataType: 'json'
+          }).done(function () {
+              // get the table and update the row accordingly
+              var clusterGrid = $('#cluster-nodes-table').data('gridInstance');
+              var clusterData = clusterGrid.getData();
+              clusterData.deleteItem(nodeId);
+          }).fail(nfErrorHandler.handleAjaxError);
+      };
+  
+      /**
+       * 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 $('#cluster-filter').val();
+      };
+  
+      /**
+       * Applies the filter found in the filter expression text field.
+       */
+      var applyFilter = function () {
+          var visibleTab = getSelectedTab();
+          if (!visibleTab) {
+              return;
+          }
+  
+          var grid = visibleTab.grid;
+  
+          // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(grid)) {
+              var gridData = grid.getData();
+  
+              // update the search criteria
+              gridData.setFilterArgs({
+                  searchString: getFilterText(),
+                  property: $('#cluster-filter-type').combo('getSelectedOption').value
+              });
+              gridData.refresh();
+          }
+      };
+  
+      var getSelectedTab = function () {
+          var selectedTab = null;
+          clusterTabs.forEach(function (tab) {
+              if ($('#' + tab.tableId).is(':visible')) {
+                  selectedTab = tab;
+              }
+          });
+          return selectedTab;
+      }
+  
+      /**
+       * Performs the filtering.
+       *
+       * @param {object} item     The item subject to filtering
+       * @param {object} args     Filter arguments
+       * @returns {Boolean}       Whether or not to include the item
+       */
+      var filter = function (item, args) {
+          if (args.searchString === '') {
+              return true;
+          }
+  
+          try {
+              // perform the row filtering
+              var filterExp = new RegExp(args.searchString, 'i');
+          } catch (e) {
+              // invalid regex
+              return false;
+          }
+  
+          var searchText = item[args.property];
+          if (args.property === 'address') {
+              searchText = formatNodeAddress(item);
+          } else if (args.property === 'status') {
+              searchText = formatNodeStatus(item);
+          }
+  
+          // perform the filter
+          return searchText.search(filterExp) >= 0;
+      };
+  
+      /**
+       * Updates count of displayed and total rows.
+       */
+      function updateFilterStats(selectedTab) {
+          if (!selectedTab) {
+              selectedTab = getSelectedTab();
+          }
+          if (selectedTab.dataView) {
+              var displayedRows = selectedTab.dataView.getLength();
+              var totalRows = selectedTab.rowCount;
+              $('#displayed-rows').text(displayedRows);
+              $('#total-rows').text(totalRows);
+          }
+      }
+  
+      /**
+       * Clears any existing table filter.
+       */
+      var clearFilter = function () {
+          $('#cluster-filter').val('');
+          applyFilter();
+      }
+  
+      /**
+       * Show the node details.
+       *
+       * @argument {object} item     The item
+       */
+      var showNodeDetails = function (item) {
+          $.ajax({
+              type: 'GET',
+              url: config.urls.nodes + '/' + encodeURIComponent(item.nodeId),
+              dataType: 'json'
+          }).done(function (response) {
+              var node = response.node;
+  
+              // update the dialog fields
+              $('#node-id').text(node.nodeId);
+              $('#node-address').text(formatNodeAddress(node));
+  
+              // format the events
+              var events = $('#node-events');
+              if ($.isArray(node.events) && node.events.length > 0) {
+                  var eventMessages = [];
+                  $.each(node.events, function (i, event) {
+                      eventMessages.push(event.timestamp + ": " + event.message);
+                  });
+                  $('<div></div>').append(nfCommon.formatUnorderedList(eventMessages)).appendTo(events);
+              } else {
+                  events.append('<div><span class="unset">None</span></div>');
+              }
+  
+              // show the dialog
+              $('#node-details-dialog').modal('show');
+          }).fail(nfErrorHandler.handleAjaxError);
+      };
+  
+      /**
+       * Applies system diagnostics data to the JVM tab.
+       */
+      function updateJvmTableData(systemDiagnosticsResponse) {
+          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+  
+              var jvmTableRows = [];
+              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
+                  var snapshot = nodeSnapshot.snapshot;
+  
+                  // sort the garbage collection
+                  var garbageCollection = snapshot.garbageCollection.sort(function (a, b) {
+                      return a.name === b.name ? 0 : a.name > b.name ? 1 : -1;
+                  });
+  
+                  // add the node jvm details
+                  jvmTableRows.push({
+                      id: nodeSnapshot.nodeId,
+                      node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                      address: nodeSnapshot.address,
+                      maxHeap: snapshot.maxHeap,
+                      totalHeap: snapshot.totalHeap,
+                      usedHeap: snapshot.usedHeap,
+                      heapUtilization: snapshot.heapUtilization,
+                      maxNonHeap: snapshot.maxNonHeap,
+                      totalNonHeap: snapshot.totalNonHeap,
+                      usedNonHeap: snapshot.usedNonHeap,
+                      gcOldGen: garbageCollection[0].collectionCount + ' times (' +
+                      garbageCollection[0].collectionTime + ')',
+                      gcNewGen: garbageCollection[1].collectionCount + ' times (' +
+                      garbageCollection[1].collectionTime + ')',
+                      uptime: snapshot.uptime
+                  });
+              });
+              jvmTab.rowCount = jvmTableRows.length;
+              jvmTab.dataView.setItems(jvmTableRows);
+              jvmTab.dataView.reSort();
+              jvmTab.grid.invalidate();
+          } else {
+              jvmTab.rowCount = 0;
+          }
+      }
+  
+      /**
+       * Applies system diagnostics data to the System tab.
+       */
+      function updateSystemTableData(systemDiagnosticsResponse) {
+          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+  
+              var systemTableRows = [];
+              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
+                  var snapshot = nodeSnapshot.snapshot;
+                  systemTableRows.push({
+                      id: nodeSnapshot.nodeId,
+                      node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                      address: nodeSnapshot.address,
+                      processors: snapshot.availableProcessors,
+                      processorLoadAverage: snapshot.processorLoadAverage,
+                      totalThreads: snapshot.totalThreads,
+                      daemonThreads: snapshot.daemonThreads
+                  });
+              });
+              systemTab.rowCount = systemTableRows.length;
+              systemTab.dataView.setItems(systemTableRows);
+              systemTab.dataView.reSort();
+              systemTab.grid.invalidate();
+          } else {
+              systemTab.rowCount = 0;
+          }
+      }
+  
+      /**
+       * Applies system diagnostics data to the FlowFile Storage tab.
+       */
+      function updateFlowFileTableData(systemDiagnosticsResponse) {
+          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+  
+              var flowFileTableRows = [];
+              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
+                  var snapshot = nodeSnapshot.snapshot;
+                  flowFileTableRows.push({
+                      id: nodeSnapshot.nodeId,
+                      node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                      address: nodeSnapshot.address,
+                      ffRepoTotal: snapshot.flowFileRepositoryStorageUsage.totalSpace,
+                      ffRepoUsed: snapshot.flowFileRepositoryStorageUsage.usedSpace,
+                      ffRepoFree: snapshot.flowFileRepositoryStorageUsage.freeSpace,
+                      ffRepoUtil: snapshot.flowFileRepositoryStorageUsage.utilization
+                  });
+              });
+              flowFileTab.rowCount = flowFileTableRows.length;
+              flowFileTab.dataView.setItems(flowFileTableRows);
+              flowFileTab.dataView.reSort();
+              flowFileTab.grid.invalidate();
+          } else {
+              flowFileTab.rowCount = 0;
+          }
+      }
+  
+      /**
+       * Applies system diagnostics data to the Content Storage tab.
+       */
+      function updateContentTableData(systemDiagnosticsResponse) {
+          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+  
+              var contentStorageTableRows = [];
+              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
+                  var snapshot = nodeSnapshot.snapshot;
+                  snapshot.contentRepositoryStorageUsage.forEach(function (contentRepoUsage) {
+                      contentStorageTableRows.push({
+                          id: nodeSnapshot.nodeId + ':' + contentRepoUsage.identifier,
+                          address: nodeSnapshot.address,
+                          node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                          contentRepoId: contentRepoUsage.identifier,
+                          contentRepoTotal: contentRepoUsage.totalSpace,
+                          contentRepoUsed: contentRepoUsage.usedSpace,
+                          contentRepoFree: contentRepoUsage.freeSpace,
+                          contentRepoUtil: contentRepoUsage.utilization
+                      });
+                  });
+              });
+  
+              contentTab.rowCount = contentStorageTableRows.length;
+              contentTab.dataView.setItems(contentStorageTableRows);
+              contentTab.dataView.reSort();
+              contentTab.grid.invalidate();
+          } else {
+              contentTab.rowCount = 0;
+          }
+      }
+  
+      /**
+       * Applies system diagnostics data to the Versions tab.
+       */
+      function updateVersionTableData(systemDiagnosticsResponse) {
+          if (nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics)
+              && nfCommon.isDefinedAndNotNull(systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots)) {
+  
+              var versionTableRows = [];
+              systemDiagnosticsResponse.systemDiagnostics.nodeSnapshots.forEach(function (nodeSnapshot) {
+                  var snapshot = nodeSnapshot.snapshot;
+                  versionTableRows.push({
+                      id: nodeSnapshot.nodeId,
+                      address: nodeSnapshot.address,
+                      node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                      version: snapshot.versionInfo.niFiVersion,
+                      javaVendor: snapshot.versionInfo.javaVendor,
+                      javaVersion: snapshot.versionInfo.javaVersion,
+                      osName: snapshot.versionInfo.osName,
+                      osVersion: snapshot.versionInfo.osVersion,
+                      osArchitecture: snapshot.versionInfo.osArchitecture
+                  });
+              });
+  
+              versionTab.dataView.setItems(versionTableRows);
+              versionTab.dataView.reSort();
+              versionTab.grid.invalidate();
+          }
+      }
+  
+      /**
+       * Loads system diagnostics data for the cluster.
+       */
+      function refreshSystemDiagnosticsData() {
+          var systemDiagnosticsUri = config.urls.systemDiagnostics
+          var loadPromise = $.ajax({
+              type: 'GET',
+              url: systemDiagnosticsUri,
+              data: {
+                  nodewise: true
+              },
+              dataType: 'json'
+          }).done(function (systemDiagnosticsResponse) {
+              var handlers = dataSetHandlers['systemDiagnostics'];
+              handlers.forEach(function (handler) {
+                  handler(systemDiagnosticsResponse);
+              });
+          }).fail(nfErrorHandler.handleAjaxError);
+          return loadPromise;
+      };
+  
+      /**
+       * Generic initialization for Slick Grid tables
+       */
+      function commonTableInit(tab) {
+          var dataView = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+          dataView.setItems([], tab.tableIdColumn);
+  
+          dataView.setFilterArgs({
+                searchString: getFilterText(),
+                property: $('#cluster-filter-type').combo('getSelectedOption').value
+            });
+          dataView.setFilter(filter);
+    
+            // initialize the sort
+          tab.onSort({
+              columnId: tab.tableIdColumn,
+                sortAsc: true
+          }, dataView);
+    
+            // initialize the grid
+          var columnModel = tab.tableColumnModel;
+          if (typeof columnModel === 'function') {
+              columnModel = columnModel();
+          }
+          var grid = new Slick.Grid('#' + tab.tableId, dataView, columnModel, tab.tableOptions);
+          grid.setSelectionModel(new Slick.RowSelectionModel());
+          grid.setSortColumn(tab.tableIdColumn, true);
+          grid.onSort.subscribe(function (e, args) {
+              tab.onSort({
+                  columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+              }, dataView, tab);
+          });
+  
+          // wire up the dataview to the grid
+          dataView.onRowCountChanged.subscribe(function (e, args) {
+              grid.updateRowCount();
+              grid.render();
+              updateFilterStats(tab);
+          });
+          dataView.onRowsChanged.subscribe(function (e, args) {
+              grid.invalidateRows(args.rows);
+              grid.render();
+          });
+  
+          // click events
+          if (tab.tableOnClick) {
+              grid.onClick.subscribe(function (e, args) {
+                    var target = $(e.target);
+                  var item = dataView.getItem(args.row);
+                  tab.tableOnClick(e, args, target, item);
+              });
+          }
+    
+            // hold onto an instance of the grid
+          $('#' + tab.tableId).data('gridInstance', grid);
+          tab.dataView = dataView;
+          tab.grid = grid;
+      };
+  
+      /**
+       * Apply the cluster nodes data set to the table.
+       */
+      function updateNodesTableData(clusterResponse) {
+          var cluster = clusterResponse.cluster;
+    
+            // ensure there are groups specified
+          if (nfCommon.isDefinedAndNotNull(cluster.nodes)) {
+              var clusterGrid = nodesTab.grid;
+                var clusterData = clusterGrid.getData();
+    
+                // set the items
+              nodesTab.rowCount = cluster.nodes.length;
+                clusterData.setItems(cluster.nodes);
+                clusterData.reSort();
+                clusterGrid.invalidate();
+    
+                // update the stats last refreshed timestamp
+                $('#cluster-last-refreshed').text(cluster.generated);
+            } else {
+                $('#total-nodes').text('0');
+            }
+      }
+  
+      /**
+       * Refreshes cluster data sets from the server.
+       */
+      function refreshClusterData() {
+          var clusterNodesDataPromise = $.ajax({
+              type: 'GET',
+              url: config.urls.cluster,
+              dataType: 'json'
+          }).done(function (response) {
+              var handlers = dataSetHandlers['cluster'];
+              handlers.forEach(function (handler) {
+                  handler(response);
+              });
+          }).fail(nfErrorHandler.handleAjaxError);
+          return clusterNodesDataPromise;
+      }
+  
+      /**
+       * Event handler triggered when the user switches tabs.
+       */
+      function onSelectTab(tab) {
+          // Resize table
+          var tabGrid = tab.grid;
+          if (nfCommon.isDefinedAndNotNull(tabGrid)) {
+              tabGrid.resizeCanvas();
+          }
+  
+          // Clear filter text
+          clearFilter();
+  
+          // Reset filter options
+          $('#cluster-filter-type').combo({
+              options: tab.filterOptions,
+              select: function (option) {
+                  applyFilter();
+              }
+          });
+  
+          updateFilterStats(tab);
+      }
+  
+      var nfClusterTable = {
+          /**
+           * Initializes the cluster list.
+           */
+          init: function () {
+              // initialize the user details dialog
+              $('#node-details-dialog').modal({
+                  scrollableContentStyle: 'scrollable',
+                  headerText: 'Node Details',
+                  buttons: [{
+                      buttonText: 'Ok',
+                      color: {
+                          base: '#728E9B',
+                          hover: '#004849',
+                          text: '#ffffff'
+                      },
+                      handler: {
+                          click: function () {
+                              $('#node-details-dialog').modal('hide');
+                          }
+                      }
+                  }],
+                  handler: {
+                      close: function () {
+                          // clear the details
+                          $('#node-address').text('');
+                          $('#node-id').text('');
+                          $('#node-events').empty();
+                      }
+                  }
+              });
+  
+              // define the function for filtering the list
+              $('#cluster-filter').keyup(function () {
+                  applyFilter();
+              });
+  
+              // Authorize data sets
+              var dataSetAuthorized = {};
+              config.data = config.data.filter(function (dataSetConfig) {
+                  dataSetConfig.authorized = dataSetConfig.isAuthorized();
+                  dataSetAuthorized[dataSetConfig.name] = dataSetConfig.authorized;
+                  if (dataSetConfig.authorized) {
+                      return true;
+                  } else {
+                      return false;
+                  }
+              });
+  
+              // Filter tabs to authorized data sets
+              clusterTabs = clusterTabs.filter(function (tab) {
+                  var tabDataSet = tab.data.dataSet;
+                  if (dataSetAuthorized[tabDataSet]) {
+                      return true;
+                  } else {
+                      return false;
+                  }
+              });
+              clusterTabs.forEach(function (tab) {
+                  tabsByName[tab.name] = tab;
+                  var dataSetHandlerList = dataSetHandlers[tab.data.dataSet];
+                  if (dataSetHandlerList) {
+                      dataSetHandlers[tab.data.dataSet] = dataSetHandlerList.concat([tab.data.update]);
+                  } else {
+                      dataSetHandlers[tab.data.dataSet] = [tab.data.update];
+                  }
+              });
+  
+              // Initialize tab set
+              $('#cluster-tabs').tabbs({
+                  tabStyle: 'tab',
+                  selectedTabStyle: 'selected-tab',
+                  scrollableTabContentStyle: 'scrollable',
+                  tabs: clusterTabs,
+                  select: function () {
+                      var tab = $(this).text();
+                      var selectedTab = tabsByName[tab];
+                      if (selectedTab) {
+                          selectedTab.onTabSelected(selectedTab);
+                      } else {
+                          console.error('Failed to match tab: ', tab, tabsByName);
+                      }
+                  }
+              });
+  
+              // listen for browser resize events to update the page size
+              $(window).resize(function () {
+                  nfClusterTable.resetTableSize();
+              });
+  
+              // initialize tabs
+              clusterTabs.forEach(function (tab) {
+                  try {
+                      tab.init(tab);
+                  } catch (ex) {
+                      console.error('Failed to initialize tab', tab, ex);
+                  }
+              });
+          },
+  
+          /**
+           * Update the size of the grid based on its container's current size.
+           */
+          resetTableSize: function () {
+              clusterTabs.forEach(function (tab) {
+                  if (tab && tab.grid) {
+                      tab.grid.resizeCanvas();
+                  }
+              });
+          },
+  
+          /**
+           * Load the processor cluster table.
+           */
+          loadClusterTable: function () {
+              var updateDataDeferreds = config.data.map(function (dataSetSpec) {
+                  var dataSetDeferred = dataSetSpec.update();
+                  return dataSetDeferred;
+              });
+              var aggregateDeferred = $.when.apply($, updateDataDeferreds);
+              aggregateDeferred = aggregateDeferred.done(function (aggregateResult) {
+                  updateFilterStats(nodesTab);
+              });
+              return aggregateDeferred;
+          }
+      };
+  
+      return nfClusterTable;
+  }));
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
new file mode 100644
index 000000000000..69e0d3ef2554
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js
@@ -0,0 +1,227 @@
+/*
+ * 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 top, define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.ClusterTable',
+                'nf.ErrorHandler',
+                'nf.Storage'],
+            function ($, nfCommon, nfClusterTable, nfErrorHandler, nfStorage) {
+                return (nf.Cluster = factory($, nfCommon, nfClusterTable, nfErrorHandler, nfStorage));
+            });
+    } 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 ($, nfCommon, nfClusterTable, nfErrorHandler, nfStorage) {
+    'use strict';
+
+    $(document).ready(function () {
+        // initialize the counters page
+        nfCluster.init();
+    });
+
+    /**
+     * Configuration object used to hold a number of configuration items.
+     */
+    var config = {
+        urls: {
+            banners: '../nifi-api/flow/banners',
+            about: '../nifi-api/flow/about',
+            currentUser: '../nifi-api/flow/current-user'
+        }
+    };
+
+    /**
+     * Loads the current user.
+     */
+    var loadCurrentUser = function () {
+        return $.ajax({
+            type: 'GET',
+            url: config.urls.currentUser,
+            dataType: 'json'
+        }).done(function (currentUser) {
+            nfCommon.setCurrentUser(currentUser);
+        }).fail(nfErrorHandler.handleAjaxError);
+    };
+
+    /**
+     * Initializes the cluster page.
+     */
+    var initializeClusterPage = function () {
+        // define mouse over event for the refresh button
+        $('#refresh-button').click(function () {
+            nfClusterTable.loadClusterTable();
+        });
+
+        // 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 (bannerResponse) {
+                    // ensure the banners response is specified
+                    if (nfCommon.isDefinedAndNotNull(bannerResponse.banners)) {
+                        if (nfCommon.isDefinedAndNotNull(bannerResponse.banners.headerText) && bannerResponse.banners.headerText !== '') {
+                            // update the header text
+                            var bannerHeader = $('#banner-header').text(bannerResponse.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('counters');
+                        }
+
+                        if (nfCommon.isDefinedAndNotNull(bannerResponse.banners.footerText) && bannerResponse.banners.footerText !== '') {
+                            // update the footer text and show it
+                            var bannerFooter = $('#banner-footer').text(bannerResponse.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('counters');
+                        }
+                    }
+
+                    deferred.resolve();
+                }).fail(function (xhr, status, error) {
+                    nfErrorHandler.handleAjaxError(xhr, status, error);
+                    deferred.reject();
+                });
+            } else {
+                deferred.resolve();
+            }
+        }).promise();
+    };
+
+    var nfCluster = {
+        /**
+         * Initializes the counters page.
+         */
+        init: function () {
+            nfStorage.init();
+
+            // load the current user
+            loadCurrentUser().done(function () {
+                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'
+                        });
+
+                        $('#cluster').css('margin', 40);
+                        $('#cluster-table').css('bottom', 127);
+                        $('#cluster-refresh-container').css('margin', 40);
+                    }
+                };
+
+                // set the initial size
+                setBodySize();
+
+                // create the cluster table
+                nfClusterTable.init();
+
+                // resize to fit
+                nfClusterTable.resetTableSize();
+
+                // load the table
+                nfClusterTable.loadClusterTable().done(function () {
+                    // once the table is initialized, finish initializing the page
+                    initializeClusterPage().done(function () {
+
+                        // get the about details
+                        $.ajax({
+                            type: 'GET',
+                            url: config.urls.about,
+                            dataType: 'json'
+                        }).done(function (response) {
+                            var aboutDetails = response.about;
+                            var countersTitle = aboutDetails.title + ' Cluster';
+
+                            // set the document title and the about title
+                            document.title = countersTitle;
+                            $('#counters-header-text').text(countersTitle);
+                        }).fail(nfErrorHandler.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) {
+                                        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) {
+                                nfCommon.toggleScrollable(tabsContent.get(0));
+                            });
+                        });
+                    });
+                });
+            });
+        }
+    };
+
+    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
new file mode 100644
index 000000000000..621d6806a8a9
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js
@@ -0,0 +1,335 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Common',
+                  'nf.ErrorHandler'],
+              function ($, Slick, nfCommon, nfErrorHandler) {
+                  return (nf.CountersTable = factory($, Slick, nfCommon, nfErrorHandler));
+              });
+      } 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, nfCommon, nfErrorHandler) {
+      'use strict';
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                counters: '../nifi-api/counters'
+            }
+        };
+    
+        /**
+         * 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 (sortDetails.columnId === 'value') {
+                  var aCount = nfCommon.parseCount(a[sortDetails.columnId]);
+                  var bCount = nfCommon.parseCount(b[sortDetails.columnId]);
+                    return aCount - bCount;
+                } else {
+                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                    return aString === bString ? 0 : aString > bString ? 1 : -1;
+                }
+            };
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+        };
+    
+        /**
+         * Get the text out of the filter field. If the filter field doesn't
+         * have any text it will contain the text 'filter list' so this method
+         * accounts for that.
+         */
+        var getFilterText = function () {
+            return $('#counters-filter').val();
+        };
+    
+        /**
+         * Applies the filter found in the filter expression text field.
+         */
+        var applyFilter = function () {
+            // get the dataview
+            var countersGrid = $('#counters-table').data('gridInstance');
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(countersGrid)) {
+                var countersData = countersGrid.getData();
+    
+                // update the search criteria
+                countersData.setFilterArgs({
+                    searchString: getFilterText(),
+                    property: $('#counters-filter-type').combo('getSelectedOption').value
+                });
+                countersData.refresh();
+            }
+        };
+    
+        /**
+         * Performs the filtering.
+         *
+         * @param {object} item     The item subject to filtering
+         * @param {object} args     Filter arguments
+         * @returns {Boolean}       Whether or not to include the item
+         */
+        var filter = function (item, args) {
+            if (args.searchString === '') {
+                return true;
+            }
+    
+            try {
+                // perform the row filtering
+                var filterExp = new RegExp(args.searchString, 'i');
+            } catch (e) {
+                // invalid regex
+                return false;
+            }
+    
+            // perform the filter
+            return item[args.property].search(filterExp) >= 0;
+        };
+    
+        /**
+         * Resets the specified counter.
+         *
+         * @argument {object} item     The counter item
+         */
+        var resetCounter = function (item) {
+            $.ajax({
+                type: 'PUT',
+                url: config.urls.counters + '/' + encodeURIComponent(item.id),
+                dataType: 'json'
+            }).done(function (response) {
+                var counter = response.counter;
+    
+                // get the table and update the row accordingly
+                var countersGrid = $('#counters-table').data('gridInstance');
+                var countersData = countersGrid.getData();
+                countersData.updateItem(counter.id, counter);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        return {
+            /**
+             * Initializes the counters list.
+             */
+            init: function () {
+                // define the function for filtering the list
+                $('#counters-filter').keyup(function () {
+                    applyFilter();
+                });
+    
+                // filter type
+                $('#counters-filter-type').combo({
+                    options: [{
+                        text: nf._.msg('nf-counters-table.ByName'),
+                        value: 'name'
+                    }, {
+                        text: nf._.msg('nf-counters-table.ByContext'),
+                        value: 'context'
+                    }],
+                    select: function (option) {
+                        applyFilter();
+                    }
+                });
+    
+                // initialize the templates table
+                var countersColumns = [
+                  {
+                      id: 'context',
+                      name: nf._.msg('nf-counters-table.Context'),
+                      field: 'context',
+                      sortable: true,
+                      resizable: true
+                  },
+                  {
+                      id: 'name',
+                      name: nf._.msg('nf-counters-table.Name'),
+                      field: 'name',
+                      sortable: true,
+                      resizable: true
+                  },
+                  {
+                      id: 'value',
+                      name: nf._.msg('nf-counters-table.Value'),
+                      field: 'value',
+                      sortable: true,
+                      resizable: true,
+                      defaultSortAsc: false
+                  }
+                ];
+    
+                // only allow dfm's to reset counters
+              if (nfCommon.canModifyCounters()) {
+                    // function for formatting the actions column
+                    var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+                        return '<div title="'+nf._.msg('nf-counters-table.Connect')+'" class="pointer reset-counter fa fa-undo" style="margin-top: 2px;"></div>';
+                    };
+    
+                    // add the action column
+                  countersColumns.push({
+                      id: 'actions',
+                      name: '&nbsp;',
+                      sortable: false,
+                      resizable: false,
+                      formatter: actionFormatter,
+                      width: 100,
+                      maxWidth: 100
+                  });
+                }
+    
+                var countersOptions = {
+                    forceFitColumns: true,
+                    enableTextSelectionOnCells: true,
+                    enableCellNavigation: false,
+                    enableColumnReorder: false,
+                    autoEdit: false,
+                    rowHeight: 24
+                };
+    
+                // initialize the dataview
+                var countersData = new Slick.Data.DataView({
+                    inlineFilters: false
+                });
+                countersData.setItems([]);
+                countersData.setFilterArgs({
+                    searchString: getFilterText(),
+                    property: $('#counters-filter-type').combo('getSelectedOption').value
+                });
+                countersData.setFilter(filter);
+    
+                // initialize the sort
+                sort({
+                    columnId: 'context',
+                    sortAsc: true
+                }, countersData);
+    
+                // initialize the grid
+                var countersGrid = new Slick.Grid('#counters-table', countersData, countersColumns, countersOptions);
+                countersGrid.setSelectionModel(new Slick.RowSelectionModel());
+                countersGrid.registerPlugin(new Slick.AutoTooltips());
+                countersGrid.setSortColumn('context', true);
+                countersGrid.onSort.subscribe(function (e, args) {
+                    sort({
+                        columnId: args.sortCol.field,
+                        sortAsc: args.sortAsc
+                    }, countersData);
+                });
+    
+                // configure a click listener
+                countersGrid.onClick.subscribe(function (e, args) {
+                    var target = $(e.target);
+    
+                    // get the node at this row
+                    var item = countersData.getItem(args.row);
+    
+                    // determine the desired action
+                    if (countersGrid.getColumns()[args.cell].id === 'actions') {
+                        if (target.hasClass('reset-counter')) {
+                            resetCounter(item);
+                        }
+                    }
+                });
+    
+                // wire up the dataview to the grid
+                countersData.onRowCountChanged.subscribe(function (e, args) {
+                    countersGrid.updateRowCount();
+                    countersGrid.render();
+    
+                    // update the total number of displayed processors
+                    $('#displayed-counters').text(args.current);
+                });
+                countersData.onRowsChanged.subscribe(function (e, args) {
+                    countersGrid.invalidateRows(args.rows);
+                    countersGrid.render();
+                });
+    
+                // hold onto an instance of the grid
+                $('#counters-table').data('gridInstance', countersGrid);
+    
+                // 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 (nfCommon.isDefinedAndNotNull(countersGrid)) {
+                    countersGrid.resizeCanvas();
+                }
+            },
+    
+            /**
+             * Load the processor counters table.
+             */
+            loadCountersTable: function () {
+                return $.ajax({
+                    type: 'GET',
+                    url: config.urls.counters,
+                    dataType: 'json'
+                }).done(function (response) {
+                    var report = response.counters;
+                    var aggregateSnapshot = report.aggregateSnapshot;
+    
+                    // ensure there are groups specified
+                  if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.counters)) {
+                        var countersGrid = $('#counters-table').data('gridInstance');
+                        var countersData = countersGrid.getData();
+    
+                        // set the items
+                        countersData.setItems(aggregateSnapshot.counters);
+                        countersData.reSort();
+                        countersGrid.invalidate();
+    
+                        // update the stats last refreshed timestamp
+                        $('#counters-last-refreshed').text(aggregateSnapshot.generated);
+    
+                        // update the total number of processors
+                        $('#total-counters').text(aggregateSnapshot.counters.length);
+                    } else {
+                        $('#total-counters').text('0');
+                    }
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+  }));
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
new file mode 100644
index 000000000000..a0279af6d168
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js
@@ -0,0 +1,227 @@
+    /*
+     * 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 top, define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.CountersTable',
+                  'nf.ErrorHandler',
+                  'nf.Storage'],
+              function ($, nfCommon, nfCountersTable, nfErrorHandler, nfStorage) {
+                  return (nf.Counters = factory($, nfCommon, nfCountersTable, nfErrorHandler, nfStorage));
+              });
+      } 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 ($, nfCommon, nfCountersTable, nfErrorHandler, nfStorage) {
+      'use strict';
+    
+        $(document).ready(function () {
+            // initialize the counters page
+          nfCounters.init();
+        });
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                banners: '../nifi-api/flow/banners',
+                about: '../nifi-api/flow/about',
+                currentUser: '../nifi-api/flow/current-user'
+            }
+        };
+    
+        /**
+         * Loads the current user.
+         */
+        var loadCurrentUser = function () {
+            return $.ajax({
+                type: 'GET',
+                url: config.urls.currentUser,
+                dataType: 'json'
+            }).done(function (currentUser) {
+              nfCommon.setCurrentUser(currentUser);
+    
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Initializes the counters page.
+         */
+        var initializeCountersPage = function () {
+            // define mouse over event for the refresh button
+            $('#refresh-button').click(function () {
+              nfCountersTable.loadCountersTable();
+            });
+    
+            // 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 (nfCommon.isDefinedAndNotNull(response.banners)) {
+                          if (nfCommon.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('counters');
+                            }
+    
+                          if (nfCommon.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('counters');
+                            }
+                        }
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                      nfErrorHandler.handleAjaxError(xhr, status, error);
+                        deferred.reject();
+                    });
+                } else {
+                    deferred.resolve();
+                }
+            }).promise();
+        };
+    
+      var nfCounters = {
+            /**
+             * Initializes the counters page.
+             */
+            init: function () {
+              nfStorage.init();
+    
+                // load the current user
+                loadCurrentUser().done(function () {
+                    // create the counters table
+                  nfCountersTable.init();
+    
+                    // load the table
+                  nfCountersTable.loadCountersTable().done(function () {
+                        // once the table is initialized, finish initializing the page
+                        initializeCountersPage().done(function () {
+                            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'
+                                    });
+    
+                                    $('#counters').css('margin', 40);
+                                    $('#counters-table').css('bottom', 127);
+                                    $('#counters-refresh-container').css('margin', 40);
+                                }
+    
+                                // configure the initial grid height
+                              nfCountersTable.resetTableSize();
+                            };
+    
+                            // get the about details
+                            $.ajax({
+                                type: 'GET',
+                                url: config.urls.about,
+                                dataType: 'json'
+                            }).done(function (response) {
+                                var aboutDetails = response.about;
+                                var countersTitle = nf._.msg('nf-about')+ nf._.msg('nf-counters.Counters');
+    
+                                // set the document title and the about title
+                                document.title = countersTitle;
+                                $('#counters-header-text').text(countersTitle);
+    
+                                // set the initial size
+                                setBodySize();
+                          }).fail(nfErrorHandler.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) {
+                                            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) {
+                                  nfCommon.toggleScrollable(tabsContent.get(0));
+                                });
+                            });
+                        });
+                    });
+                });
+            }
+        };
+    
+      return nfCounters;
+  }));
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
new file mode 100644
index 000000000000..33019c747be2
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
@@ -0,0 +1,1884 @@
+
+nf._ = (function () {
+    var locale = "cn";
+    var cn = {
+    		"nf-actions.UpdateResource": "更新来源",
+            "nf-actions.Refreshing": "正在刷新",
+            "nf-actions.RemoteGroupProcess": "远程处理组",
+            "nf-actions.NoTargetURIDefined": "目标URI未定义.",
+            "nf-actions.Header1": "激活组件",
+            "nf-actions.Message1": "未选定合格的组件，请选择合格组件进行激活并保证组件当前未被运行.",
+            "nf-actions.Header2": "下线组件",
+            "nf-actions.Message2": "未选定合格的组件，请选择合格组件进行下线并保证组件当前未被运行.",
+            "nf-actions.Header3": "启动组件",
+            "nf-actions.Message3": "未选定合格的组件，请选择合格组件启动并组件当前未被运行.",
+            "nf-actions.Header4": "停止组件",
+            "nf-actions.Message4": "未选定合格的组件，请选择要停止的组件.",
+            "nf-actions.Header5": "重新加载",
+            "nf-actions.Message5": "未选定合格的组件，请选择要删除的组件.",
+            "nf-actions.Header6": "粘贴错误",
+            "nf-actions.EmptyQueue": "清空队列",
+            "nf-actions.Message6": "是否确定要清空队列？所有流文件将被移除.",
+            "nf-actions.Cancel": "取消",
+            "nf-actions.Empty": "空",
+            "nf-actions.Stop": "停止",
+            "nf-actions.Message7": " 被从队列里移除.",
+            "nf-actions.Message8": "没有流文件被移除.",
+            "nf-actions.Message9": "当前选择不能创建模版.",
+            "nf-actions.CreateTemplate": "创建模板",
+            "nf-actions.Create": "创建",
+            "nf-actions.Template": "模版 '",
+            "nf-actions.Message11": "' 成功创建.",
+            "nf-actions.Message12": "试图复制粘贴时发生错误.",
+            "nf-actions.Message13": "模板名称不能为空.",
+            "nf-actions.Message14": "删除请求百分比完成",
+            "nf-actions.Message15": "流文件",
+            "nf-actions.Message16": "在",
+            "nf-actions.Message17": "之外",
+            "nf-actions.Message18": "从队列中移除.",
+            "nf-actions.Message19": "没有引用组件.",
+            "nf-canvas-graph-controls-controller.ProcessGroup": "处理器组",
+            "nf-canvas-graph-controls-controller.Processor": "处理器",
+            "nf-canvas-graph-controls-controller.InputPort": "输入端口",
+            "nf-canvas-graph-controls-controller.OutputPort": "输出端口",
+            "nf-canvas-graph-controls-controller.RemoteProcessGroup": "远程进程组",
+            "nf-canvas-graph-controls-controller.Funnel": "漏斗",
+            "nf-canvas-graph-controls-controller.Label": "标签",
+            "nf-canvas-graph-controls-controller.Connection": "连接",
+            "nf-canvas-graph-controls-controller.MultipleSelected": "已选择多个",
+    		"nf-canvas-global-menu-controller.About": "关于数据流",
+    		"nf-canvas-global-menu-controller.OK": "确认",
+    		"nf-canvas-operate-controller.SUCCESS": "成功",
+    		"nf-canvas-operate-controller.SuccessContent": "模板成功导入.",
+    		"nf-canvas-operate-controller.Upload": "上传模板",
+    		"nf-canvas-operate-controller.ButtonUpload": "上传模板",
+    		"nf-canvas-operate-controller.UploadTemplate": "没有选定模板.请在浏览器中选择一个模板.",
+    		"nf-canvas-operate-controller.Cancel": "取消",
+    		"nf-canvas-operate-controller.ChangeColor": "改变颜色",
+    		"nf-canvas-operate-controller.Apply": "应用",
+    		"nf-canvas-operate-controller.Error": "错误",
+    		"nf-canvas-operate-controller.CreateTemplate": "创建模板",
+    		"nf-canvas-operate-controller.Message1": "无法导入模板. 请检查日志中的错误.",
+            "nf-canvas-flow-status.Processors": "处理器",
+            "nf-canvas-flow-status.ProcessGroups": "处理组",
+            "nf-canvas-flow-status-controller.Processors": "处理器",
+            "nf-canvas-flow-status-controller.ProcessGroups": "处理组",
+            "nf-canvas-flow-status-controller.RemoteProcessGroups": "远程处理组",
+            "nf-canvas-flow-status-controller.Connection": "连接",
+            "nf-canvas-flow-status-controller.InputPorts": "输入端口",
+            "nf-canvas-flow-status-controller.OutputPorts": "输出端口",
+            "nf-canvas-flow-status-controller.Funnel": "漏斗",
+            "nf-canvas-flow-status-controller.no-matches": "没有符合查询要求的结果",
+            "nf-canvas-toobbar.Start": "启动",
+            "nf-canvas-toobbar.Stop": "停止",
+            "nf-canvas-toobbar.Copy": "复制",
+            "nf-canvas-toobbar.Paste": "粘贴",
+            "nf-canvas-toobbar.Group": "组",
+            "nf-canvas-toobbar.Enable": "有效",
+            "nf-canvas-toobbar.Disable": "无效",
+            "nf-canvas-toobbar.CreateTemplate": "创建模版",
+            "nf-canvas-toobbar.ChangeColor": "改变颜色",
+            "nf-canvas-toobbar.Delete": "删除",        
+            "nf-canvas-header.OK": "确定",
+            "nf-canvas-header.CreateTemplate": "创建模版",
+            "nf-canvas-header.Fill": "填写",
+            "nf-canvas-header.Apply": "适用",
+            "nf-canvas-header.Cancel": "取消",
+    		"nf-group-component.AddProcessGroup": "添加处理组",
+    		"nf-group-component.Add": "添加",
+    		"nf-group-component.Cancel": "取消",
+    		"nf-input-port-component.AddPort": "添加端口",
+    		"nf-input-port-component.Add": "添加",
+    		"nf-input-port-component.Cancel": "取消",
+    		"nf-input-port-component.new-port-type": "输入",
+    		"nf-output-port-component.Add": "添加",
+    		"nf-output-port-component.Cancel": "取消",
+    		"nf-output-port-component.new-port-type": "输出",
+    		"nf-processor-component.AddProcessor": "添加处理器",
+    		"nf-processor-component.AddProcessorContent": "创建该类型的处理器必须被选择.",
+    		"nf-processor-component.Add": "添加",
+    		"nf-processor-component.Cancel": "取消",
+    		"nf-processor-component.Type": "类型",
+    		"nf-processor-component.Tags": "标签",
+    		"nf-processor-component.NoDescriptionSpecified": "未指定说明",
+    		"nf-remote-process-group-component.ConfigurationError": "配置错误",
+    		"nf-remote-process-group-component.AddRemoteProcessGroup": "添加远程处理组",
+    		"nf-remote-process-group-component.Add": "添加",
+    		"nf-remote-process-group-component.Cancel": "取消",
+    		"nf-template-component.AddTemplate": "添加模板",
+    		"nf-template-component.Add": "添加",
+    		"nf-template-component.Cancel": "取消",
+    		"nf-template-component.InstantiateTemplate": "实例化模板",
+    		"nf-template-component.InstantiateTemplateContent": "数据流中没有被加载的模板.",
+            "nf-canvas-header.Message": "不能刷新当前组.",
+            "nf-canvas-header.components.AddGroup": "添加处理组",
+            "nf-canvas-header.components.AddButton": "添加",
+            "nf-canvas-header.components.CancelButton": "取消",
+            "nf-canvas-toolbox.Input": "输入",
+            "nf-canvas-toolbox.OutPut": "输出",        
+            "nf-canvas-toolbox.Filter": "过滤器",
+            "nf-canvas-toolbox.Processor": "处理器",
+            "nf-canvas-toolbox.InputPort": "输入端口",
+            "nf-canvas-toolbox.OutputPort": "输出端口",
+            "nf-canvas-toolbox.ProcessGroup": "处理组",
+            "nf-canvas-toolbox.RemoteProcessGroup": "远程处理组",
+            "nf-canvas-toolbox.Connection": "连接",
+            "nf-canvas-toolbox.Funnel": "漏斗",
+            "nf-canvas-toolbox.Template": "模版",
+            "nf-canvas-toolbox.Label": "标签",
+            "nf-canvas-toolbox.Add": "添加",
+            "nf-canvas-toolbox.Cancel": "取消",
+            "nf-canvas-toolbox.Instantiate Template": "实例化模版",
+            "nf-canvas-toolbox.Message": "模版尚未加载进入数据流系统.",
+            "nf-canvas-toolbox.Type": "类型",
+            "nf-canvas-toolbox.Tags": "标签",
+            "nf-canvas-toolbox.Message1": "没有指定描述",
+            "nf-canvas-toolbox.AddProcessor": "添加处理器",
+            "nf-canvas-toolbox.AddPort": "添加端口",
+            "nf-canvas-toolbox.AddProcessGroup": "添加处理过程组",
+            "nf-canvas-toolbox.AddRemoteProcessGroup": "添加远程处理过程组",
+            "nf-canvas-utils.Header1": "处理组",
+            "nf-canvas-utils.Message1": "无法加载特定组件的组.",
+            "nf-canvas-utils.Message2": "无法找到特定组件.",
+            "nf-canvas-utils.Message3": "无法进入选定组.",
+            "nf-canvas-utils.Message4": "不能把端口移出根组",
+            "nf-canvas-utils.Message5": "这些端口当前与组外有连接: <b>",
+            "nf-canvas-utils.Message6": "这些端口在目标处理过程组里已经存在: <b>",
+            "nf-canvas-utils.Message7": "组件已经在最顶层组",
+            "nf-canvas.Browser": "不支持的浏览器",
+            "nf-canvas.Message1": "流程图需要用SVG显示.请选择支持SVG的浏览器.",
+            "nf-canvas.ClusterConn": "集群连接",
+            "nf-canvas.Message2": "此节点当前未连接到集群.对此处对数据流进行的任何修改都不会在群集中复制.",
+            "nf-canvas.Message3": "此节点刚刚加入群集.对此处对数据流的任何修改都将在群集中进行复制.",
+            "nf-component-state.Header1": "组件状态",
+            "nf-component-state.Button1": "关闭",
+            "nf-component-state.Content1": "该组件没有需要清除的状态",
+    		"nf-component-state.Message1": "组件状态只能在组件没有活动运行时清除",
+    		"nf-component-state.Key": "键",
+    		"nf-component-state.Value": "值",
+    		"nf-component-state.Scope": "范围",
+    		"nf-connection-configuration.ConnectionConfiguration": "连接配置",
+            "nf-connection-configuration.Add": "添加",
+            "nf-connection-configuration.Message0": "连接必须至少选择一个关联.",
+            "nf-connection-configuration.Cancel": "取消",
+            "nf-connection-configuration.Message1": "\\' 不支持任何关联.",
+            "nf-connection-configuration.Message2": "\\' 无任何输出端口.",
+            "nf-connection-configuration.Message4": "\\' 无任何输入端口.",
+    		"nf-connection-configuration.Message5": "未授权任何输出端口 \\'",
+            "nf-connection-configuration.Message6": "配置错误",
+            "nf-connection-configuration.ConfigureConnection": "配制连接",
+            "nf-connection-configuration.Detail": "详情",
+            "nf-connection-configuration.Setting": "设置",
+            "nf-connection-configuration.CreateConnection": "创建连接",
+            "nf-connection-configuration.Apply": "应用",
+            "nf-connection-configuration.Message7": "连接至少要选择一个关联.",
+    		"nf-connection.Connection": "连接",
+            "nf-connection.Message1": "循环连接要至少有两个拐点.",
+            "nf-connection.From": "从",
+            "nf-connection.To": "到",
+            "nf-connection.Name": "名称",
+            "nf-connection.Queued": "排队",
+            "nf-connection.FlowFilesOlder": "使流文件超过",
+            "nf-context-menu.RefreshStatus": "刷新状态",
+            "nf-context-menu.LeaveGroup": "离开组",
+            "nf-context-menu.Configure": "配置",
+            "nf-context-menu.ViewConfiguration": "查看配置",
+            "nf-context-menu.EnterGroup": "进入组",
+            "nf-context-menu.Start": "开始",
+            "nf-context-menu.Stop": "停止",
+            "nf-context-menu.canEnable": "开启",
+            "nf-context-menu.canDisable": "禁用",
+            "nf-context-menu.canGroup": "组",
+            "nf-context-menu.canManagePolicies": "访问策略",
+            "nf-context-menu.canAlign1": "垂直对齐",
+            "nf-context-menu.canAlign2": "水平对齐",
+            "nf-context-menu.canUploadTemplate": "上传模板",
+            "nf-context-menu.canCreateTemplate": "创建模板",
+            "nf-context-menu.RemotePorts": "远程端口",
+            "nf-context-menu.EnableTransmission": "使转换有效",
+            "nf-context-menu.DisableTransmission": "使转换无效",
+    		"nf-context-menu.StatsHistory": "历史状态",
+    		"nf-context-menu.ViewState": "查看状态",
+            "nf-context-menu.Stats": "状态",
+            "nf-context-menu.DataProvenance": "数据来源",
+            "nf-context-menu.BringFront": "带到前端",
+            "nf-context-menu.GoToSource": "进入源",
+            "nf-context-menu.GoToDestination": "进入目标",
+            "nf-context-menu.UpstreamConnections": "上游连接",
+            "nf-context-menu.DownstreamConnections": "下游连接",
+            "nf-context-menu.Usage": "用途",
+            "nf-context-menu.Refresh": "刷新",
+            "nf-context-menu.GoTo": "进入",
+            "nf-context-menu.ChangeColor": "变换颜色",
+            "nf-context-menu.CenterInView": "视图居中",
+            "nf-context-menu.Copy": "复制",
+            "nf-context-menu.Paste": "粘贴",
+            "nf-context-menu.MoveParentGroup": "移动到父亲组",
+    		"nf-context-menu.QueueList": "队列列表",
+            "nf-context-menu.EmptyQueue": "清空队列",
+            "nf-context-menu.Delete": "删除",
+            "nf-controller-service.ConfigurationError": "配置错误",
+            "nf-controller-service.Cancel": "取消",
+            "nf-controller-service.Close": "关闭",
+            "nf-controller-service.Message1": "使无效的步骤",
+            "nf-controller-service.ActionCanceled": "动作取消",
+            "nf-controller-service.Message2": "请求有效的动作被取消，但是部分请求可能已经被执行. 请验证服务关联的所有组件.",
+            "nf-controller-service.Message3": "有效步骤 ",
+            "nf-controller-service.Message4": "动作取消",
+            "nf-controller-service.Message5": "请求无效的动作被取消，但是部分请求可能已经被执行. 请验证服务关联的所有组件..",
+            "nf-controller-service.Message6": "保存设置?",
+            "nf-controller-service.Settings": "配置",
+            "nf-controller-service.Properties": "属性",
+            "nf-controller-service.Comments": "评论",
+            "nf-controller-service.Message7": "配置控制器服务",
+            "nf-controller-service.Message8": "使控制器服务无效",
+            "nf-controller-service.Disable": "无效",
+            "nf-controller-service.ServiceOnle": "仅服务",
+            "nf-controller-service.Message9": "仅有效当前控制器服务",
+            "nf-controller-service.Message10": "服务和相关组件",
+            "nf-controller-service.Message11": "使控制器服务有效，并使关联组件有效/启动",
+            "nf-controller-service.Message12": "使控制服务器有效",
+            "nf-controller-service.Enable": "有效",
+            "nf-controller-service.Apply": "应用",
+            "nf-controller-service.Advanced": "高级",
+            "nf-controller-service.Message13": "在进入高级设置前保存变更?",
+            "nf-controller-service.Ok": "确定",
+    		"nf-controller-service.ControllerService": "控制器服务",
+    		"nf-controller-service.Message14": "由于未授权的引用组件，无法禁用.",
+    		"nf-controller-service.Message15": "由于未授权的引用组件，无法启用.",
+    		"nf-controller-service.Save": "保存",
+    		"nf-controller-service.Message16": "在进入控制器服务前保存变更?",
+            "nf-controller-services.Add": "添加",
+    		"nf-controller-services.ControllerService": "控制器服务",
+    		"nf-controller-services.Message14": "必须选择要创建的控制器服务类型.",
+    		"nf-controller-services.AddControllerService": "添加控制器服务",
+    		"nf-controller-services.Invalid": "失效",
+    		"nf-controller-services.Disabled": "已禁用",
+    		"nf-controller-services.Disabling": "禁用中",
+    		"nf-controller-services.Enabled": "已启用",
+    		"nf-controller-services.Enabling": "启用中",
+    		"nf-controller-services.toolTip": "基于存在的公告进行排序",
+    		"nf-controller-services.Name": "名称",
+    		"nf-controller-services.Type": "类型",
+    		"nf-controller-services.Tags": "标签",
+    		"nf-controller-services.State": "状态",
+    		"nf-controller-services.ProcessGroup": "处理组",
+    		"nf-controller-services.type-description": "未指定说明",
+    		"nf-controller-services.viewDtails": "查看详情",
+    		"nf-controller-services.usage": "用法",
+    		"nf-controller-services.disable": "禁用",
+    		"nf-controller-services.edit": "编辑",
+    		"nf-controller-services.enable": "启用",
+    		"nf-controller-services.viewstate": "查看状态",
+    		"nf-controller-services.remove": "移除",
+    		"nf-controller-services.acesspolicies": "访问策略",
+    		"nf-custom-ui.AdvancedConfiguration": "高级配置",
+    		"nf-custom-ui.Message1": "无法生成访问高级访问配置对话框的访问令牌.",
+    		"nf-draggable.ComponentPosition": "组件位置",
+    		"nf-draggable.Message1": "未授权修改目的地组.",
+    		"nf-draggable.Message2": "选择修改的每个组件都必须被授权.",
+            "nf-go-to.Close": "关闭",
+            "nf-go-to.NoDownstreamComponents": "无下游组件",
+            "nf-go-to.NoUpstreamComponents": "无上游组件",
+            "nf-go-to.DownstreamConnections": "下游连接",
+            "nf-go-to.UpstreamConnections": "上游连接",
+            "nf-go-to.Message1": "无上游连接",
+            "nf-go-to.Message2": "无下游连接", 
+            "nf-go-to.Funnel": "漏斗",
+            "nf-label-configuration.ConfigureLabel": "配置标签",
+    		"nf-label-configuration.Apply": "应用",
+    		"nf-label-configuration.Cancel": "取消",
+    		"nf-policy-management.ViewUserInterface": "查看用户接口",
+    		"nf-policy-management.AcessController": "访问控制器",
+    		"nf-policy-management.QueryProvenance": "查询来源",
+    		"nf-policy-management.AcessPolicies": "访问所有策略",
+    		"nf-policy-management.AcessUser": "访问用户/用户组",
+    		"nf-policy-management.retrieve": "检索站点到站点的详情信息",
+    		"nf-policy-management.diagnostics": "查看系统分析",
+    		"nf-policy-management.proxy": "代理用户请求",
+    		"nf-policy-management.counters": "访问计数器",
+    		"nf-policy-management.ViewComponent": "查看组件",
+    		"nf-policy-management.ModifyComponent": "修改组件",
+    		"nf-policy-management.ViewData": "查看数据",
+    		"nf-policy-management.ModifyData": "修改数据",
+    		"nf-policy-management.ReceiveData": "通过站点到站点接收数据",
+    		"nf-policy-management.SendData": "通过站点到站点发送数据",
+    		"nf-policy-management.ViewPolicies": "查看策略",
+    		"nf-policy-management.ModifyPolicies": "修改策略",
+    		"nf-policy-management.Searchusers": "搜索用户",
+    		"nf-policy-management.Ok": "确定",
+    		"nf-policy-management.Add": "添加",
+    		"nf-policy-management.UserSearch": "用户搜索",
+    		"nf-policy-management.Message1": "没有匹配的用户\\'",
+    		"nf-policy-management.Message2": "多个用户匹配\\'",
+    		"nf-policy-management.Cancel": "取消",
+    		"nf-policy-management.UpdatePolicy": "更新策略",
+    		"nf-policy-management.DeletePolicy": "删除策略",
+    		"nf-policy-management.Message3": "删除\\'",
+    		"nf-policy-management.Message4": "\\'从这个策略？",
+    		"nf-policy-management.Message5": "确实要删除此策略吗?",
+    		"nf-policy-management.Message6": "没有选择策略",
+    		"nf-policy-management.Message7": "允许用户查看用户接口",
+    		"nf-policy-management.Message8": "允许用户查看/修改控制器，包括集群中的报告任务，控制器服务和节点",
+    		"nf-policy-management.Message9": "允许用户提交来源搜索并请求事件继承",
+    		"nf-policy-management.Message10": "允许用户查看/修改所有组件的策略",
+    		"nf-policy-management.Message11": "允许用户查看/修改用户组",
+    		"nf-policy-management.Message12": "允许其他NiFi实例检索此数据流的“站点到站点”详情信息",
+    		"nf-policy-management.Message13": "允许用户查看系统分析",
+    		"nf-policy-management.Message14": "允许代理计算机代表他人发送请求",
+    		"nf-policy-management.Message15": "允许用户查看/修改计数器",
+    		"nf-policy-management.Message16": "允许用户查看组件配置详情信息",
+    		"nf-policy-management.Message17": "允许用户修改组件配置详情信息",
+    		"nf-policy-management.Message18": "允许用户通过出站连接中的源数据和流文件队列查看此组件的元数据和内容",
+    		"nf-policy-management.Message19": "允许用户在出站连接中清空流文件队列并提交重放",
+    		"nf-policy-management.Message20": "允许此端口从这些数据流实例接收数据",
+    		"nf-policy-management.Message21": "允许此端口向这些数据流实例发送数据",
+    		"nf-policy-management.Message22": "允许用户查看可以查看/修改此组件的用户列表",
+    		"nf-policy-management.Message23": "允许用户修改可以查看/修改此组件的用户列表",
+    		"nf-policy-management.Message24": "通过删除此策略，此组件的权限将恢复为继承的策略（如果适用）.",
+    		"nf-policy-management.Text1": "显示从中继承的有效策略",
+    		"nf-policy-management.Text2": "没有组件特定的管理员.",
+    		"nf-policy-management.Text3": "未授权访问指定资源的策略.",
+    		"nf-policy-management.Text4": "未授权查看该策略.",
+    		"nf-policy-management.Text5": "没有指定资源的策略.",
+    		"nf-policy-management.Text6": "未授权访问指定资源的策略.",
+    		"nf-policy-management.Write": "写",
+    		"nf-policy-management.Read": "读",
+    		"nf-policy-management.View": "查看",
+    		"nf-policy-management.Modify": "修改",
+    		"nf-policy-management.AllPolicies": "所有策略",
+    		"nf-policy-management.Controller": "这个控制器",
+    		"nf-policy-management.ProcessorGroup": "处理组",
+    		"nf-policy-management.reporting-tasks": "报告任务",
+    		"nf-policy-management.NoUserSearch": "没有匹配的用户",
+    		"nf-policy-management.Remove": "移除",
+            "nf-port-configuration.ConfigurePort": "配置端口",
+            "nf-port-configuration.Apply": "应用",
+            "nf-port-configuration.ConfigurationError": "配置错误",
+            "nf-port-configuration.Cancel": "取消",
+            "nf-port-details.PortDetails": "端口详情",
+            "nf-port-details.OK": "确定",
+            "nf-process-group-configuration.ConfigureProcessGroup": "配置处理组",
+            "nf-process-group-configuration.Apply": "应用",
+            "nf-process-group-configuration.Cancel": "取消",
+            "nf-process-group-configuration.General": "通用",
+            "nf-process-group-configuration.ControllerService": "控制器服务",
+            "nf-process-group-details.ProcessGroupDetails": "处理组详情",
+            "nf-process-group-details.Ok": "应用",
+            "nf-process-group.Message1": "无评价内容",
+            "nf-process-group.Queued": "队列中",
+            "nf-process-group.In": "输入",
+            "nf-process-group.ReadWrite": "读/写",
+            "nf-process-group.Out": "输出",
+            "nf-process-group.5min": "(5 分钟)",
+            "nf-process-group.Message1": "没有指定的评论",
+            "nf-processor-configuration.TimerDriven": "时间驱动",
+            "nf-processor-configuration.Message1": "处理器将按照计划任务时间间隔执行.",
+            "nf-processor-configuration.EventDriven": "事件驱动",
+            "nf-processor-configuration.Message2": "处理器将按照事件驱动执行 (例如 流文件进入一个队列). 计划任务策略是试探性的.",
+            "nf-processor-configuration.OnPrimaryNode": "在主节点",
+            "nf-processor-configuration.Message3": "处理器将在主节点按照设置间隔时间被执行.",
+            "nf-processor-configuration.CronDriven": "CRON驱动",
+            "nf-processor-configuration.Message5": "处理器将按照CRON格式指定的时间被执行.",
+    		"nf-processor-configuration.Error1": "并发任务必须是整数值",
+    		"nf-processor-configuration.Error2": "必须指定运行计划",
+    		"nf-processor-configuration.Error3": "必须指定处罚持续时间",
+    		"nf-processor-configuration.Error4": "必须指定产量持续时间",
+            "nf-processor-configuration.ConfigurationError": "配置错误",
+            "nf-processor-configuration.Message6": "保存变更在进入控制器服务之前?",
+            "nf-processor-configuration.Settings": "设置",
+            "nf-processor-configuration.Scheduling": "执行计划",
+            "nf-processor-configuration.Properties": "属性",
+            "nf-processor-configuration.Comments": "评论",
+            "nf-processor-configuration.ConfigureProcessor": "配置处理器",
+            "nf-processor-configuration.Debug": "调试",
+            "nf-processor-configuration.Info": "信息",
+            "nf-processor-configuration.Warn": "警告",
+            "nf-processor-configuration.Error": "错误",
+            "nf-processor-configuration.Apply": "应用",
+            "nf-processor-configuration.Cancel": "取消",
+            "nf-processor-configuration.Advanced": "高级",
+            "nf-processor-configuration.Message7": "保存变更在进入高级设置?",
+            "nf-processor-configuration.ThisProcessorHasNoRelationships": "这个处理器没有关系.",
+            "nf-processor-configuration.ViewDetails": "查看详情",
+            "nf-processor-configuration.Provenance": "来源",
+            "nf-processor.In": "输入",
+            "nf-processor.ReadWrite": "读/写",
+            "nf-processor.Out": "输出",
+            "nf-processor.TasksTime": "任务/时间",
+            "nf-processor.5min-1": "5 分钟",
+            "nf-processor.5min": "(5 分钟)",
+            "nf-registration.Thanks": "谢谢",
+            "nf-registration.Message1": "您的请求将被快速执行.",
+            "nf-queue-listing.QueueListing": "队列列表",
+    		"nf-queue-listing.Message1": "无法生成用于下载内容的访问令牌.",
+    		"nf-queue-listing.Message2": "无法生成用于查看内容的访问令牌.",
+    		"nf-queue-listing.Stop": "停止",
+    		"nf-queue-listing.Message3": "队列没有流文件.",
+    		"nf-queue-listing.FlowFile": "流文件",
+    		"nf-queue-listing.Ok": "确定",
+    		"nf-queue-listing.Message4": "此队列的源和目标当前正在运行. 这个列表可能不再准确.",
+    		"nf-queue-listing.Message5": "此队列的源当前正在运行. 此商家信息可能不再准确无误.",
+    		"nf-queue-listing.Message6": "此队列的目标正在运行. 此商家信息可能不再准确无误.",
+    		"nf-queue-listing.NoValueSet": "未设置值",
+    		"nf-queue-listing.Yes": "是",
+    		"nf-queue-listing.No": "否",
+    		"nf-queue-listing.Position": "位置",
+    		"nf-queue-listing.FileName": "文件名",
+    		"nf-queue-listing.FileSize": "文件大小",
+    		"nf-queue-listing.queuedDuration": "排队持续时间",
+    		"nf-queue-listing.lineageDuration": "继承时间",
+    		"nf-queue-listing.penalized": "处罚",
+    		"nf-queue-listing.node": "节点",
+    		"nf-queue-listing.Bytes": " 字节",
+    		"nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "配置远程处理组",
+            "nf-remote-process-group-configuration.Apply": "应用",
+            "nf-remote-process-group-configuration.ConfigurationError": "配置错误",
+            "nf-remote-process-group-configuration.Cancel": "取消",
+    		"nf-remote-process-group-configuration.Message5": "远程进程组配置",
+            "nf-remote-process-group-details.RemoteProcessGroupDetails": "远程处理组详情",
+            "nf-remote-process-group-details.Ok": "确定",
+            "nf-remote-process-group-ports.ConfigureRemotePort": "配置远程端口",
+            "nf-remote-process-group-ports.Apply": "应用",
+            "nf-remote-process-group-ports.ConfigurationError": "配置错误",
+            "nf-remote-process-group-ports.Message1": "当前任务要求整数值.",
+            "nf-remote-process-group-ports.Cancel": "取消",
+            "nf-remote-process-group-ports.RemoteProcessGroupPorts": "远程处理组端口",
+            "nf-remote-process-group-ports.Close": "关闭",
+            "nf-remote-process-group-ports.Message2": "没有描述.",
+    		"nf-remote-process-group-ports.Message3": "此端口已删除.",
+    		"nf-remote-process-group-ports.Message4": "应同时为此端口计划的任务数.",
+    		"nf-remote-process-group-ports.transmissionSwitch": "切换端口传输",
+    		"nf-remote-process-group-ports.description": "未指定说明.",
+            "nf-remote-process-group.Message1": "没有评论",
+            "nf-remote-process-group.Sent": "发送",
+            "nf-remote-process-group.Received": "接收",
+            "nf-remote-process-group.5min": "(5 分钟)",
+            "nf-remote-process-group.Message2": "Site-to-Site 是安全的.",
+            "nf-remote-process-group.Message3": "Site-to-Site 是非安全的.",
+            "nf-remote-process-group.Message4": "远程流不在当前运行",
+            "nf-reporting-task.ReportingTask": "报告任务",
+    		"nf-reporting-task.Save": "保存",
+            "nf-reporting-task.ConfigurationError": "配置错误",
+            "nf-reporting-task.Message1": "进入控制器服务前保存设置?",
+            "nf-reporting-task.Settings": "设置",
+            "nf-reporting-task.Properties": "属性",
+            "nf-reporting-task.Comments": "评论",
+            "nf-reporting-task.ConfigureReportingTask": "配置报告任务",
+            "nf-reporting-task.Node": "节点",
+            "nf-reporting-task.ClusterManager": "集群管理者",
+            "nf-reporting-task.TimerDriven": "时间驱动",
+            "nf-reporting-task.Message2": "报告任务将按照指定时间间隔执行.",
+            "nf-reporting-task.CRONDriven": "CRON驱动",
+            "nf-reporting-task.Message3": "报告任务将按照CRON配置执行.",
+            "nf-reporting-task.Apply": "应用",
+            "nf-reporting-task.Cancel": "取消",
+            "nf-reporting-task.Advanced": "高级",
+            "nf-reporting-task.Message4": "在进入高级设置前保存变更?",
+    		"nf-reporting-task.Ok": "确定",
+            "nf-search.Search": "检索",
+            "nf-secure-port-configuration": "设置",
+            "nf-secure-port-configuration.AccessControl": "权限控制",
+            "nf-secure-port-configuration.ConfigureSecurePort": "配置安全端口",
+            "nf-secure-port-configuration.Apply": "应用",
+            "nf-secure-port-configuration.Cancel": "取消",
+            "nf-secure-port-configuration.InputPort": "输入端口",
+            "nf-secure-port-configuration.OutputPort": "输出端口",
+            "nf-secure-port-details.Settings": "设置",
+            "nf-secure-port-details.AccessControl": "权限控制",
+            "nf-secure-port-details.SecurePortDetails": "安全端口详情",
+            "nf-secure-port-details.Ok": "确定",
+            "nf-settings.Filter": "过滤器",
+            "nf-settings.Message1": "一个流压缩包被成功创建.",
+            "nf-settings.Message2": "设置被成功适用.",
+            "nf-settings.Message3": "控制器服务的类型必须被选定.",
+            "nf-settings.Text": "节点",
+            "nf-settings.ClusterManager": "集群管理员",
+            "nf-settings.Message4": "控制器服务在节点可使用.",
+            "nf-settings.Message5": "控制器服务在集群管理员可使用.",
+            "nf-settings.Message6": "无描述信息",
+            "nf-settings.Message7": "添加控制器服务",
+            "nf-settings.Add": "添加",
+            "nf-settings.Cancel": "取消",
+            "nf-settings.Node": "节点",
+            "nf-settings": "集群管理员",
+            "nf-settings.ViewDetail": "查看详情",
+            "nf-settings.Disable": "无效",
+            "nf-settings.Enable": "有效",
+            "nf-settings.Remove": "移除",
+            "nf-settings.Usage": "用法",
+            "nf-settings.Name": "名称",
+            "nf-settings.State": "状态",
+            "nf-settings.Availability": "可以获得",
+            "nf-settings.Message8": "报告任务仅节点可获得.",
+            "nf-settings.Message9": "报告任务集群管理者有权取得.",
+            "nf-settings.Type": "类型",
+            "nf-settings.Tags": "标签",
+            "nf-settings.Message10": "无指定的描述",
+            "nf-settings.Message11": "添加报告任务",
+            "nf-settings.ViewDetails": "查看详情",
+            "nf-settings.Stop": "停止",
+            "nf-settings.Edit": "编辑",
+            "nf-settings.Start": "开始",
+            "nf-settings.RunStatus": "运行状态",
+            "nf-settings.General": "通用",
+            "nf-settings.ControllerServices": "控制器服务",
+            "nf-settings.ReportingTasks": "报告任务",
+            "nf-settings.Message12": "创建一个新的控制器服务",
+            "nf-settings.Message13": "创建一个新的报告任务",
+            "nf-settings.Settings": " 设置",
+            "nf-settings.ViewState": "查看状态",
+            "nf-settings.AccessPolicies": "访问策略",
+            "nf-settings.Invalid": "无效",
+            "nf-settings.Stopped": "已停止",
+            "nf-settings.Running": "运行中",
+            "nf-settings.Disabled": "禁用",
+            "nf-about": "数据流",
+            "nf-bulletin-board.defaultFilterText": "过滤",
+            "nf-bulletin-board.ByMessage": "通过信息过滤",
+            "nf-bulletin-board.ByName": "通过名字过滤",
+            "nf-bulletin-board.ById": "通过识别符过滤",
+            "nf-bulletin-board.ByGroupId": "通过组识别符过滤",
+            "nf-bulletin-board.Message1": "过滤 ",
+            "nf-bulletin-board.Message2": " 匹配 \\\\'",
+            "nf-bulletin-board.Message3": "自动刷新开始",
+            "nf-bulletin-board.Message4": "自动刷新停止", 
+            "nf-bulletin-board.Message5": "移除过滤器",
+            "nf-bulletin-board.BulletinBoard": "公告板",
+            "nf-cluster.Cluster": " 集群",
+            "nf-cluster-table.Filter": "用过滤器",
+            "nf-cluster-table.Message1": "连接 \\'",
+            "nf-cluster-table.Message2": "\\' 到这个集群?",
+            "nf-cluster-table.Message3": "断开 \\'",
+            "nf-cluster-table.Message4": "\\' 从这个集群?",
+            "nf-cluster-table.Message5": "移除 \\'",
+            "nf-cluster-table.Message6": "\\' 从这个集群?",
+            "nf-cluster-table.NodeDetails": "节点详情",
+            "nf-cluster-table.Ok": "确定",
+            "nf-cluster-table.ByAddress": "通过地址过滤",
+            "nf-cluster-table.ByStatus": "通过状态过滤",
+            "nf-cluster-table.ViewDetails": "查看详情",
+            "nf-cluster-table.Node Address": "节点地址",
+            "nf-cluster-table.ActiveThreadCount": "运行的线程数",
+            "nf-cluster-table.Size": "大小",
+            "nf-cluster-table.Queue": "排队",                
+            "nf-cluster-table.Status": "状态",
+            "nf-cluster-table.Uptime": "运行时间",
+            "nf-cluster-table.LastHeartbeat": "最后心跳",
+            "nf-cluster-table.Connect": "连接",
+            "nf-cluster-table.Remove": "移除",
+            "nf-cluster-table.Disconnect": "断开",
+            "nf-cluster-table.MakePrimary": "作为首选",
+            "nf-cluster-table.None": "无",
+            "nf-counters-table.Filter": "过滤器",
+            "nf-counters-table.ByName": "通过名称过滤",
+            "nf-counters-table.ByContext": "通过上下文过滤",
+            "nf-counters-table.Context": "上下文",
+            "nf-counters-table.Name": "名称",
+            "nf-counters-table.Value": "值",
+            "nf-counters-table.Reset": "重置",
+            "nf-counters-table.Delete": "删除",
+            "nf-counters-table.Connect": "连接",
+            "nf-counters.Counters": "计数器",
+            "nf-history.History": "历史",
+            "nf-history-table.Filter": "过滤器",
+            "nf-history-table.ActionDetail": "动作详情",
+            "nf-history-table.Ok": "确定",
+            "nf-history-table.ById": "用标识过滤",
+            "nf-history-table.Message1": "过滤器基于组件标识的过滤器被更新了",
+            "nf-history-table.ByUser": "用用户过滤",
+            "nf-history-table.Message2": "基于运行任务的用户的过滤器",
+            "nf-history-table.FilterHistory": "过滤器历史",
+            "nf-history-table.Cancel": "取消",
+            "nf-history-table.PurgeHistory": "清除历史",
+            "nf-history-table.Purge": "清除",
+    		"nf-history-table.History": "历史",
+            "nf-history-table.Message3": "是否确定删除历史 '",
+            "nf-history-table.Message3.1": "\\'\\?",
+            "nf-history-table.Message4": "结束日期必须被指定.",
+            "nf-history-table.ViewDetails": "查看详情",
+            "nf-history-table.DateTime": "日期/时间",
+            "nf-history-table.Name": "名称",
+            "nf-history-table.Type": "类型",
+            "nf-history-table.Operation": "操作",
+            "nf-history-table.User": "用户",
+            "nf-history-table.Value": "值",
+            "nf-history-table.PreviousValue": "之前的值",
+            "nf-history-table.SourceId": "源标识",
+            "nf-history-table.SourceName": "源名称",
+            "nf-history-table.SourceType": "源类型",
+            "nf-history-table.Relationship": "关联",
+            "nf-history-table.DestinationId": "目的标识",
+            "nf-history-table.DestinationName": "目的名称",
+            "nf-history-table.DestinationType": "目的类型",
+            "nf-history-table.Group": "组",
+            "nf-history-table.GroupId": "组标识",
+            "nf-history-table.PreviousGroup": "前面的组",
+            "nf-history-table.PreviousGroupId": "前面组标识",
+            "nf-history-table.EndDate": "结束日期",
+            "nf-history-table.History": "历史",
+    		"nf-history-table.Message5": "基于被修改的组件的id的过滤器",
+    		"nf-history-table.Message6": "基于执行操作的用户的过滤器",
+    		"nf-history-table.NotAuthorized": "无权限",
+    		"nf-history-table.Uri": "统一资源标识符",
+    		"nf-history-table.EndTime": "结束时间",
+    		"nf-login.Login": "登录",
+    		"nf-login.Logining": "登入中...",
+    		"nf-login.SUCCESS": "成功",
+    		"nf-login.Denied": "登录被拒绝",
+    		"nf-login.Message1": "不能登入",
+    		"nf-login.Message2": "不能核对访问状态",
+    		"nf-login.Message3": "当前数据流没有配置账号/密码登录.",
+    		"nf-common.History": "<b>历史:</b><ul class=\"property-info\">",
+    		"nf-common.DefaultValue": "<b>默认值:</b> ",
+    		"nf-common.SupportsExpressionLanguage": "<b>支持表达式语言:</b> ",
+            "nf-common.sensitiveText": "敏感值设置",
+            "nf-common.Message1": "异常发生",
+            "nf-common.Message2": "请查看日志.",
+            "nf-common.Message3": "无法链接数据流系统",
+            "nf-common.Message4": "未授权",
+            "nf-common.Message5": "需要使用数据流系统的授权.",
+            "nf-common.Message6": "禁止",
+            "nf-common.Message7": "无法授权使用当前数据流系统.",
+            "nf-common.Message9": "与应用内核通信失败，在重启之前请查看日志并修正配置错误.",
+            "nf-common.ParseError": "分析错误",
+            "nf-common.Message10": "无法拦截来自数据流的返回.",
+            "nf-common.Message11": ": 异常返回",
+            "nf-common.Message12": "异常发生，请查看日志.",
+            "nf-common.Message13": "无值设置",
+            "nf-common.Message14": "空字符串设置",
+            "nf-common.Message15": "您的会话马上要过期. 请再登录以避免自动登出.",
+            "nf-common.Message16": "您的权限目前有限. 登录有权账户或者向管理申请一个有权账户.",
+            "nf-common.Message17": "您的会话已经过期. 请重新加载再登录.",
+            "nf-common.Message18": "您的会话已经过期. 请点击确认，再登录.",
+            "nf-common.Message19": "请确认应用正在运行并且检查日志.",
+            "nf-common.Message20": "请求超时，请确认应用是否在运行并检查日志.",
+            "nf-common.Message21": "请求被终止.",
+            "nf-common.Message22": "请求传输机制失败. 请确认应用正在运行并且有权访问.",
+    		"nf-common.Message23": "请确保应用程序正在运行，并检查日志中是否存在任何错误.",
+    		"nf-common.Message24": "无法与数据流通信",
+    		"nf-common.Unauthorized": "无权限",
+    		"nf-common.Message25": "使用此数据流需要进行身份验证.",
+    		"nf-common.Message26": "发生意外的错误",
+            "nf-common.SessionExpired": "请求超时",
+            "nf-common.AccessDenied": "拒绝访问",
+    		"nf-common.Error": "错误",
+            "nf-common.DefaultValue": "缺省值:",   
+            "nf-common.SupportsExpressionLanuage":"支持的表达语言:", 	
+            "nf-common.Message27": "空字符串之前设置",
+            "nf-common.Message28": "没有之前设置的值",
+            "nf-common.Bytes": " 字节",
+            "nf-connection-details.FromProcessor": "从处理器",
+    		"nf-connection-details.Processor": "处理器",
+            "nf-connection-details.FromFunnel": "从漏斗",
+            "nf-connection-details.FromOutPut": "从输出",
+            "nf-connection-details.FromInput": "从输入",
+            "nf-connection-details.ToProcessor": "从处理器",
+            "nf-connection-details.ToFunnel": "到漏斗",
+            "nf-connection-details.ToInput": "到输入",
+            "nf-connection-details.ToOutput": "到输出",
+            "nf-connection-details.Details": "详情",
+            "nf-connection-details.Settings": "设置",
+            "nf-connection-details.ConnectionDetails": "连接详情",
+            "nf-connection-details.Ok": "确定",
+            "nf-connection-details.NoValueSet": "确定",
+            "nf-dialog.Ok": "确定",
+            "nf-dialog.Yes": "是",
+            "nf-dialog.No": "否",
+            "nf-processor-details.Settings": "设置",
+            "nf-processor-details.Scheduling": "计划调度中",
+            "nf-processor-details.Properties": "属性",
+            "nf-processor-details.Comments": "评论",
+            "nf-processor-details.ProcessorDetails": "处理器详情",
+            "nf-processor-details.Ok": "确定",
+            "nf-processor-details.Advanced": "高级",
+    		"nf-processor-details.Error": "错误",
+    		"nf-processor-details.ThisProcessorHasNoRelationships": "该处理器没有关系",
+            "nf-status-history.StatusHistory":"历史状态信息",        
+            "nf-status-history.Processor": "处理器",
+            "nf-status-history.InputPort": "输入端口",
+            "nf-status-history.OutputPort": "输出端口",
+            "nf-status-history.ProcessGroup": "处理组",
+            "nf-status-history.RemoteProcessGroup": "远程处理组",
+            "nf-status-history.Connection": "连接",
+            "nf-status-history.Funnel": "漏斗",
+            "nf-status-history.Template": "模版",
+            "nf-status-history.Label": "标签",
+            "nf-status-history.Message":"没有足够的历史信息, 请稍后再试.",
+    		"nf-status-history.Close": "关闭",
+    		"nf-status-history.Start": "开始",
+    		"nf-status-history.End": "结束",
+    		"nf-status-history.Min_Max_Mean": "最小/最大/平均",
+    		"nf-status-history.NiFi": "数据流",
+            "nf-provenance.DataProvenance": "来源",
+            "nf-provenance-lineage.Message1": "计算流文件关系...",
+            "nf-provenance-lineage.ViewDetails": "查看详情",
+            "nf-provenance-lineage.Message2": "继承关系查找完成，但是没有结果. 事件可能过期.",
+            "nf-provenance-lineage.Find parents": "查找父亲",
+            "nf-provenance-lineage.Expand": "扩展",
+            "nf-provenance-lineage.Collapse": "崩溃",
+            "nf-provenance-lineage.Cancel": "取消",
+    		"nf-provenance-lineage.Lineage Results": "谱系结果",
+    		"nf-provenance-lineage.Process Lineage": "过程继承",
+            "nf-provenance-table.Filter": "过滤器",
+            "nf-provenance-table.Message": "显示最近 ",
+            "nf-provenance-table.Of": " 中 ",
+            "nf-provenance-table.Events": " 事件. ",
+            "nf-provenance-table.Message4": " 事件, 请修改检索条件.",
+            "nf-provenance-table.Showing": "显示",
+            "nf-provenance-table.Message5": "符合检索条件的事件, 请修改检索条件. ",
+            "nf-provenance-table.Message6": "符合检索条件的事件. ",
+            "nf-provenance-table.Details": "详情",
+            "nf-provenance-table.Attributes": "属性",
+            "nf-provenance-table.Content": "内容",
+            "nf-provenance-table.ProvenanceEvent": "数据源事件",
+            "nf-provenance-table.Ok": "确定",
+            "nf-provenance-table.Message1": "回放请求提交成功.",
+            "nf-provenance-table.Message2": "检索事件",
+            "nf-provenance-table.Search": "检索",
+            "nf-provenance-table.Message3": "检索数据源事件...",
+            "nf-provenance-table.ByComponentName": "通过组件名过滤",
+            "nf-provenance-table.ByComponentType": "通过组件类型过滤",
+            "nf-provenance-table.ByType": "通过类型过滤",
+            "nf-provenance-table.ByNode": "通过节点过滤",
+            "nf-provenance-table.Cluster": "集群",
+            "nf-provenance-table.ViewDetail": "查看详情",
+            "nf-provenance-table.ShowLineage": "显示继承关系",
+            "nf-provenance-table.GoTo": "进入",
+            "nf-provenance-table.DateTime": "日期/时间",
+            "nf-provenance-table.Type": "类型",
+            "nf-provenance-table.FlowFileUuid": "流文件 Uuid",
+            "nf-provenance-table.Size": "大小",
+            "nf-provenance-table.ComponentName": "组件名称",
+            "nf-provenance-table.ComponentType": "组件类型",
+            "nf-provenance-table.Node": "节点",
+            "nf-provenance-table.Cancel": "取消",
+            "nf-provenance-table.NoValueSet": "没有值",
+            "nf-provenance-table.Claim": "断言",
+            "nf-provenance-table.InputClaim": "输入声明",
+    		"nf-provenance-table.Provenance": "出处",
+    		"nf-provenance-table.Message7": "无法生成用于查看内容的访问令牌.",
+    		"nf-provenance-table.Message8": "无法生成用于下载内容的访问令牌.",
+    		"nf-provenance-table.Message9": "没有先前设置的值",
+    		"nf-provenance-table.Message10": "正在搜索原因事件...",
+    		"nf-provenance-table.Process": "进展",
+    		"nf-provenance-table.NoValueSet": "未设置值",
+    		"nf-provenance-table.NoChildren": "没有孩子",
+    		"nf-provenance-table.NoParent": "没有父母",
+    		"nf-provenance-table.Bytes": " 字节",
+    		"nf-cluster-search.Summary": "总结",
+            "nf-cluster-search.SelectNode": "选择节点",
+            "nf-cluster-search.Ok": "确定",
+    		"nf-cluster-search.ClusterSearch": "集群搜索",
+            "nf-cluster-search.Message1": "无节点匹配 \\'",
+            "nf-cluster-search.Message2": "多于一个节点匹配 \\'",
+            "nf-cluster-search.Cancel": "取消",
+            "nf-cluster-search.NiFiSumary": "数据流总结",
+            "nf-cluster-search.Message3": "没有与搜索项匹配的节点",
+            "nf-summary-table.Filter": "过滤器",
+            "nf-summary-table.Processors": "处理器",
+            "nf-summary-table.Connections": "连接",
+            "nf-summary-table.InputPorts": "输入端口",
+            "nf-summary-table.OutputPorts": "输出端口",
+            "nf-summary-table.RemoteProcessGroups": "远程处理组",
+            "nf-summary-table.ProcessGroups": "处理组",
+            "nf-summary-table.ByName": "通过名字过滤",
+            "nf-summary-table.ByType": "通过类型过滤",
+            "nf-summary-table.BySource": "通过源过滤",
+            "nf-summary-table.ByDestination": "通过目标过滤",
+            "nf-summary-table.ByUri": "通过uri过滤",
+            "nf-summary-table.ViewDetail": "查看详情",
+            "nf-summary-table.SourceName": "源名称",
+            "nf-summary-table.Name": "名称",
+            "nf-summary-table.RunStatus": "运行状态",
+            "nf-summary-table.In": "输入",
+            "nf-summary-table.Size": "大小",
+            "nf-summary-table.Message": "最后5分钟数量 / 数据大小",
+            "nf-summary-table.Read": "读",
+            "nf-summary-table.Write": "写",
+            "nf-summary-table.5min": "5分钟",
+            "nf-summary-table.Message1": "最后5分钟数据量",
+            "nf-summary-table.Out": "输出",
+            "nf-summary-table.Tasks": "任务",
+            "nf-summary-table.Time": "时间",
+            "nf-summary-table.Message2": "最后5分钟数量 / 延续期",
+            "nf-summary-table.Type": "类型",
+            "nf-summary-table.GoTo": "进入",
+            "nf-summary-table.ShowHistory": "显示历史",
+            "nf-summary-table.ShowDetail": "显示详情",
+            "nf-summary-table.ClusterProcessorSummary": "集群处理器一览",
+            "nf-summary-table.Node": "节点",
+            "nf-summary-table.Queue": "队列",
+            "nf-summary-table.SourceName": "源名称",
+            "nf-summary-table.DestinationName": "目标名称",
+            "nf-summary-table.ClusterConnectionSummary": "集群连接一览",
+            "nf-summary-table.Close": "关闭",
+            "nf-summary-table.Transferred": "传输结束",
+            "nf-summary-table.Message3": "最后5分钟从连接器传输的数量 / 数据大小",
+            "nf-summary-table.Sent": "发送",
+            "nf-summary-table.Received": "接收",
+            "nf-summary-table.ClusterProcessGroupSummary": "集群处理组一览",
+            "nf-summary-table.ClusterInputPortSummary": "集群输入端口一览",
+            "nf-summary-table.ClusterOutPutPortSummary": "集群输出端口一览",
+            "nf-summary-table.Transmitting": "转换中",
+            "nf-summary-table.Target URI": "目标 URI",
+            "nf-summary-table.ClusterRemoteProcessGroupSummary": "集群远程处理组一览",
+            "nf-summary-table.JVM": "Java虚拟机",
+            "nf-summary-table.System": "系统",
+            "nf-summary-table.SystemDiagnostics": "系统分析",
+            "nf-summary-table.Summary": " 总结",
+    		"nf-summary-table.Message4": "基于公告的存在进行排序",
+    		"nf-summary-table.times": "次",
+    		"nf-summary-table.UsageFor": "用法",
+    		"nf-summary-table.GoToProcessor": "转向处理器",
+    		"nf-summary-table.ViewStatus": "查看状态历史",
+    		"nf-summary-table.ViewProcessor": "查看处理器详情",
+    		"nf-summary-table.ViewConnect": "查看连接详情",
+    		"nf-summary-table.GoToConnect": "转向连接",
+    		"nf-summary-table.GoToProcessorGroup": "转向处理组",
+    		"nf-summary-table.ViewProcessorGroup": "查看处理组详情",
+    		"nf-summary-table.GoToInputPort": "转向输入端口",
+    		"nf-summary-table.ViewInputPort": "查看输入端口详情",
+    		"nf-summary-table.GoToOutputPort": "转向输出端口",
+    		"nf-summary-table.ViewOutputPort": "查看输出端口详情",
+    		"nf-summary-table.ViewRemoteProcessorGroup": "查看远程处理组详情",
+    		"nf-summary-table.aria1": "数据流存储库存储使用",
+            "nf-summary.Summary": "总结",
+            "nf-templates-table.Templates": " 模版",
+            "nf-templates-table.Message": "选择模版导入",
+            "nf-templates-table.Filter": "过滤",
+    		"nf-templates-table.DeleteTemplate": "删除模板",
+            "nf-templates-table.Message1": "删除模版 \"",
+    		"nf-templates-table.DownloadTemplate": "下载模板",
+    		"nf-templates-table.Message2": "无法生成用于下载内容的访问令牌.",
+            "nf-templates-table.ByName": "用名称过滤",
+            "nf-templates-table.ByDescription": "用描述过滤",
+            "nf-templates-table.RemovieTemplate": "移除模版",
+            "nf-templates-table.DateTime": "日期/时间",
+            "nf-templates-table.Name": "名称",
+            "nf-templates-table.Description": "描述",
+            "nf-templates-table.GroupId": "处理组标识",
+            "nf-templates-table.Download": "下载",
+            "nf-templates-table.AccessPolicies": "访问策略",
+            "nf-templates.Templates": "模板",
+            "nf-users.Users": "用户",
+            "nf-users-table.Filter": "过滤",
+            "nf-users-table.UserDetails": "用户详情",
+            "nf-users-table.Ok": "确定",
+            "nf-users-table.UserRoles": "用户角色",
+            "nf-users-table.Apply": "应用",
+            "nf-users-table.Cancel": "取消",
+            "nf-users-table.GroupRoles": "组角色",
+            "nf-users-table.DeleteUser": "删除用户",
+            "nf-users-table.Delete": "删除",
+            "nf-users-table.RevokeAccess": "重新启用权限",
+            "nf-users-table.Revoke": "重新启用",
+            "nf-users-table.SetUserGroup": "设置用户组",
+            "nf-users-table.Group": "组",
+            "nf-users-table.Message": "组名不能为空.",
+            "nf-users-table.ByUser": "通过用户过滤",
+            "nf-users-table.ByGroup": "通过组过滤",
+            "nf-users-table.ByRole": "通过角色过滤",
+            "nf-users-table.AuthorizationPending": "授权处理中",
+            "nf-users-table.AccessRevoked": "权限已被重新启用",
+            "nf-users-table.NoRolesSet": "没有角色被设置",
+            "nf-users-table.Message1": "多个用户权限不同",
+            "nf-users-table.Message2": "多个用户状态不同",
+            "nf-users-table.Message3": "状态未被设置",
+            "nf-users-table.EditAccess": "编辑权限",
+            "nf-users-table.RevokeAccess.Ungroup": "脱离组",
+            "nf-users-table.DeleteAccount": "删除帐号",
+            "nf-users-table.User": "用户",
+            "nf-users-table.Roles": "角色",
+            "nf-users-table.LastAccessed": "最后访问",
+            "nf-users-table.Status": "状态",
+            "nf-users-table.GroupUsers": "组内用户",
+            "nf-users-table.Message4": "选择一个或多个用户.",
+            "nf-users-table.Message5": "移除所有用户从组 \\'",
+            "nf-users-table.Message6": "删除 \\'",
+            "nf-users-table.Message7": "\\' 从组 \\'",
+    		"nf-users-table.UserGroup": "用户/组",
+    		"nf-users-table.Edit": "编辑",
+    		"nf-users-table.Remove": "移除",
+    		"jquery-propertytable.SensitiveValueSet": "敏感值",
+            "jquery-propertytable.EmptyStringSet": "空字符串",
+            "jquery-propertytable.NoValueSet": "无值",
+            "jquery-propertytable.RequiredField": "必填属性",
+            "jquery-propertytable.Property": "属性",
+            "jquery-propertytable.Value": "值",        
+            "jquery-propertytable.PropertyName": "属性名称",
+            "jquery-propertytable.NewProperty": "新增属性",        
+            "jquery-propertytable.Ok": "确认",
+            "jquery-propertytable.Delete": "删除",
+            "jquery-propertytable.GoTo": "去",
+            "jquery-propertytable.Cancel": "取消",
+            "jquery-propertytable.Empty": "空值",
+            "jquery-propertytable.SetEmptyString": "设置空字符串",
+            "jquery-propertytable.ControllerService" : "控制器服务",
+            "jquery-propertytable.Tags" : "标签",
+            "jquery-propertytable.Create" : "创建",
+            "jquery-propertytable.Description" : "描述",
+            "jquery-propertytable.AddControllerService" : "添加控制器服务",
+            "jquery-propertytable.AddProperty": "添加属性",
+            "jquery-propertytable.PropertyExists": "属性存在",
+            "jquery-propertytable.Message0": "具有此名称的属性已存在。",
+            "jquery-propertytable.Message": "属性已经存在.",
+            "jquery-propertytable.Message1": "必须指定属性名.",
+            "jquery-propertytable.Message3": "创建新服务...",
+            "jquery-propertytable.Message2": "该属性没有控制器服务与其对应.",
+            "slick.editors.Message1": "请输入有效的整数",
+            "slick.editors.Message2": "请输入有效的正数",
+            "slick.grid.Message1": "Slickgrid需要一个有效的容器，",
+            "slick.grid.Message2": "不存在于DOM中",
+            "slick.grid.Message3": "找不到样式表。",
+            "slick.grid.Message4": "添加单元格Css样式：单元格CSS哈希的键'",
+            "slick.grid.Message5": "'已经存在。",
+            "slick.grid.Message6": "从节点获取单元：无法获取单元 -",
+            "slick.grid.Message7": "Grid : 使活动单元格可编辑 : options.editable为false时,应该永远不会调用",
+            "slick.grid.Message8": "未设置选择模型",
+            "jquery-tagcloud.NoTagsSpecified": "未指定标签"       
+        };
+    var en = {
+    		"nf-actions.UpdateResource": "Update Resource",
+    		"nf-actions.Refreshing": "Refreshing",
+    		"nf-actions.RemoteGroupProcess": "Remote Group Process",
+    		"nf-actions.NoTargetURIDefined": "No target URI defined.",
+    		"nf-actions.Header1": "Enable components",
+    		"nf-actions.Message1": "No eligible components are selected. Please select the components to be enabled and ensure they are no longer running.",
+    		"nf-actions.Header2": "Disable components",
+    		"nf-actions.Message2": "No eligible components are selected. Please select the components to be disabled and ensure they are no longer running.",
+    		"nf-actions.Header3": "Start components",
+    		"nf-actions.Message3": "No eligible components are selected. Please select the components to be started and ensure they are no longer running.",
+    		"nf-actions.Header4": "Stop components",
+    		"nf-actions.Message4": "No eligible components are selected. Please select the components to be stopped.",
+    		"nf-actions.Header5": "Reload",
+    		"nf-actions.Message5": "No eligible components are selected. Please select the components to be deleted.",
+    		"nf-actions.Header6": "Paste error",
+    		"nf-actions.EmptyQueue": "Empty Queue",
+    		"nf-actions.Message6": "Are you sure you want to empty this queue? All FlowFiles waiting at the time of the request will be removed.",
+    		"nf-actions.Cancel": "Cancel",
+    		"nf-actions.Empty": "Empty",
+    		"nf-actions.Stop": "Stop",
+    		"nf-actions.Message7": " were removed from the queue.",
+    		"nf-actions.Message8": "No FlowFiles were removed.",
+    		"nf-actions.Message9": "The current selection is not valid to create a template.",
+    		"nf-actions.CreateTemplate": "Create Template",
+    		"nf-actions.Create": "Create",
+    		"nf-actions.Template": "Template '",
+    		"nf-actions.Message11": "' was successfully created.",
+    		"nf-actions.Message12": "An error occurred while attempting to copy and paste.",
+    		"nf-actions.Message13": "The template name can not be empty.",
+    		"nf-actions.Message14": "Delete the request percentage to complete",
+    		"nf-actions.Message15": "Flow files",
+    		"nf-actions.Message16": "In",
+    		"nf-actions.Message17": "Outside",
+    		"nf-actions.Message18": "Remove from the queue.",
+    		"nf-actions.Message19": "No reference to the component.",
+    		"nf-canvas-graph-controls-controller.ProcessGroup": "Process Group",
+    		"nf-canvas-graph-controls-controller.Processor": "Processor",
+    		"nf-canvas-graph-controls-controller.InputPort": "Input Port",
+    		"nf-canvas-graph-controls-controller.OutputPort": "Output Port",
+    		"nf-canvas-graph-controls-controller.RemoteProcessGroup": "Remote Process Group",
+    		"nf-canvas-graph-controls-controller.Funnel": "Funnel",
+    		"nf-canvas-graph-controls-controller.Label": "Label",
+    		"nf-canvas-graph-controls-controller.Connection": "Connection",
+    		"nf-canvas-graph-controls-controller.MultipleSelected": "Multiple Selected",
+    		"nf-canvas-global-menu-controller.About": "About Flow Files",
+    		"nf-canvas-global-menu-controller.OK": "OK",
+    		"nf-canvas-operate-controller.SUCCESS": "SUCCESS",
+    		"nf-canvas-operate-controller.SuccessContent": "The template was successfully imported.",
+    		"nf-canvas-operate-controller.Upload": "Upload template",
+    		"nf-canvas-operate-controller.ButtonUpload": "Upload template",
+    		"nf-canvas-operate-controller.UploadTemplate": "No template is selected. Please select a template in the browser.",
+    		"nf-canvas-operate-controller.Cancel": "Cancel",
+    		"nf-canvas-operate-controller.ChangeColor": "Change Color",
+    		"nf-canvas-operate-controller.Apply": "Apply",
+    		"nf-canvas-operate-controller.Error": "Error",
+    		"nf-canvas-operate-controller.CreateTemplate": "Create Template",
+    		"nf-canvas-operate-controller.Message1": "The template can not be imported. Please check the errors in the log.",
+    		"nf-canvas-flow-status.Processors": "Processors",
+    		"nf-canvas-flow-status.ProcessGroups": "Process Groups",
+    		"nf-canvas-flow-status-controller.Processors": "Processors",
+    		"nf-canvas-flow-status-controller.ProcessGroups": "Process Groups",
+    		"nf-canvas-flow-status-controller.RemoteProcessGroups": "Remote Process Groups",
+    		"nf-canvas-flow-status-controller.Connection": "Connection",
+    		"nf-canvas-flow-status-controller.InputPorts": "InputPorts",
+    		"nf-canvas-flow-status-controller.OutputPorts": "OutputPorts",
+    		"nf-canvas-flow-status-controller.Funnel": "Funnel",
+    		"nf-canvas-flow-status-controller.no-matches": "Did not meet the results of the query request",
+    		"nf-canvas-toobbar.Start": "Start",
+    		"nf-canvas-toobbar.Stop": "Stop",
+    		"nf-canvas-toobbar.Copy": "Copy",
+    		"nf-canvas-toobbar.Paste": "Paste",
+    		"nf-canvas-toobbar.Group": "Group",
+    		"nf-canvas-toobbar.Enable": "Enable",
+    		"nf-canvas-toobbar.Disable": "Disable",
+    		"nf-canvas-toobbar.CreateTemplate": "Create Template",
+    		"nf-canvas-toobbar.ChangeColor": "Change Color",
+    		"nf-canvas-toobbar.Delete": "Delete",
+    		"nf-canvas-header.OK": "Ok",
+    		"nf-canvas-header.CreateTemplate": "Create Template",
+    		"nf-canvas-header.Fill": "Fill",
+    		"nf-canvas-header.Apply": "Apply",
+    		"nf-canvas-header.Cancel": "Cancel",
+    		"nf-group-component.AddProcessGroup": "Add Process Group",
+    		"nf-group-component.Add": "Add",
+    		"nf-group-component.Cancel": "Cancel",
+    		"nf-input-port-component.AddPort": "Add Port",
+    		"nf-input-port-component.Add": "Add",
+    		"nf-input-port-component.Cancel": "Cancel",
+    		"nf-input-port-component.new-port-type": "Enter",
+    		"nf-output-port-component.Add": "Add",
+    		"nf-output-port-component.Cancel": "Cancel",
+    		"nf-output-port-component.new-port-type": "Output",
+    		"nf-processor-component.AddProcessor": "Add Processor",
+    		"nf-processor-component.AddProcessorContent": "The processor that created this type must be selected.",
+    		"nf-processor-component.Add": "Add",
+    		"nf-processor-component.Cancel": "Cancel",
+    		"nf-processor-component.Type": "Type",
+    		"nf-processor-component.Tags": "Tags",
+    		"nf-processor-component.NoDescriptionSpecified": "No Description Specified",
+    		"nf-remote-process-group-component.ConfigurationError": "Configuration Error",
+    		"nf-remote-process-group-component.AddRemoteProcessGroup": "Add Remote Process Group",
+    		"nf-remote-process-group-component.Add": "Add",
+    		"nf-remote-process-group-component.Cancel": "Cancel",
+    		"nf-template-component.AddTemplate": "Add Template",
+    		"nf-template-component.Add": "Add",
+    		"nf-template-component.Cancel": "Cancel",
+    		"nf-template-component.InstantiateTemplate": "Instantiate Template",
+    		"nf-template-component.InstantiateTemplateContent": "There is no template to load in the flow files.",
+    		"nf-canvas-header.Message": "Unable to refresh the current group.",
+    		"nf-canvas-header.components.AddGroup": "Add Group",
+    		"nf-canvas-header.components.AddButton": "Add",
+    		"nf-canvas-header.components.CancelButton": "Cancel",
+    		"nf-canvas-toolbox.Input": "Input",
+    		"nf-canvas-toolbox.OutPut": "Output",
+    		"nf-canvas-toolbox.Filter": "Filter",
+    		"nf-canvas-toolbox.Processor": "Processor",
+    		"nf-canvas-toolbox.InputPort": "Input Port",
+    		"nf-canvas-toolbox.OutputPort": "Output Port",
+    		"nf-canvas-toolbox.ProcessGroup": "Process Group",
+    		"nf-canvas-toolbox.RemoteProcessGroup": "Remote Process Group",
+    		"nf-canvas-toolbox.Connection": "Connection",
+    		"nf-canvas-toolbox.Funnel": "Funnel",
+    		"nf-canvas-toolbox.Template": "Template",
+    		"nf-canvas-toolbox.Label": "Label",
+    		"nf-canvas-toolbox.Add": "Add",
+    		"nf-canvas-toolbox.Cancel": "Cancel",
+    		"nf-canvas-toolbox.Instantiate Template": "Instantiate Template",
+    		"nf-canvas-toolbox.Message": "No templates have been loaded into this NiFi.",
+    		"nf-canvas-toolbox.Type": "Type",
+    		"nf-canvas-toolbox.Tags": "Tags",
+    		"nf-canvas-toolbox.Message1": "No description specified",
+    		"nf-canvas-toolbox.AddProcessor": "Add Processor",
+    		"nf-canvas-toolbox.AddPort": "Add Port",
+    		"nf-canvas-toolbox.AddProcessGroup": "Add Process Group",
+    		"nf-canvas-toolbox.AddRemoteProcessGroup": "Add Remote Process Group",
+    		"nf-canvas-utils.Header1": "Process Group",
+    		"nf-canvas-utils.Message1": "Unable to load the group for the specified component.",
+    		"nf-canvas-utils.Message2": "Unable to find the specified component.",
+    		"nf-canvas-utils.Message3": "Unable to enter the selected group.",
+    		"nf-canvas-utils.Message4": "Cannot move Ports out of the root group",
+    		"nf-canvas-utils.Message5": "The following ports are currently connected outside of this group: <b>",
+    		"nf-canvas-utils.Message6": "The following ports already exist in the target process group: <b>",
+    		"nf-canvas-utils.Message7": "Components are already in the topmost group",
+    		"nf-canvas.Browser": "Unsupported Browser",
+    		"nf-canvas.Message1": "Flow graphs are shown using SVG. Please use a browser that supports rendering SVG.",
+    		"nf-canvas.ClusterConn": "Cluster Connection",
+    		"nf-canvas.Message2": "This node is not currently connected to the cluster. Any changes made to the data stream here are not replicated in the cluster.",
+    		"nf-canvas.Message3": "This node has just been added to the cluster. Any changes to the data stream here will be replicated in the cluster.",
+    		"nf-component-state.Header1": "Component status",
+    		"nf-component-state.Button1": "Close",
+    		"nf-component-state.Content1": "The component does not need to be cleared",
+    		"nf-component-state.Message1": "The component status can only be cleared when the component is not active",
+    		"nf-component-state.Key": "Key",
+    		"nf-component-state.Value": "Value",
+    		"nf-component-state.Scope": "Scope",
+    		"nf-connection-configuration.ConnectionConfiguration": "Connection Configuration",
+    		"nf-connection-configuration.Add": "Add",
+    		"nf-connection-configuration.Message0": "The connection must have at least one relationship selected.",
+    		"nf-connection-configuration.Cancel": "Cancel",
+    		"nf-connection-configuration.Message1": "\\' does not support any relationships.",
+    		"nf-connection-configuration.Message2": "\\' does not have any output ports.",
+    		"nf-connection-configuration.Message4": "\\' does not have any input ports.",
+    		"nf-connection-configuration.Message5": "未授权任何输出端口 \\'",
+    		"nf-connection-configuration.Message6": "Configuration Error",
+    		"nf-connection-configuration.ConfigureConnection": "Configure Connection",
+    		"nf-connection-configuration.Detail": "Details",
+    		"nf-connection-configuration.Setting": "Settings",
+    		"nf-connection-configuration.CreateConnection": "Create Connection",
+    		"nf-connection-configuration.Apply": "Apply",
+    		"nf-connection-configuration.Message7": "The connection must have at least one relationship selected.",
+    		"nf-connection.Connection": "Connection",
+    		"nf-connection.Message1": "Looping connections must have at least two bend points.",
+    		"nf-connection.From": "From",
+    		"nf-connection.To": "To",
+    		"nf-connection.Name": "Name",
+    		"nf-connection.Queued": "Queued",
+    		"nf-connection.FlowFilesOlder": "Flow Files Older",
+    		"nf-context-menu.RefreshStatus": "Refresh status",
+    		"nf-context-menu.LeaveGroup": "Leave group",
+    		"nf-context-menu.Configure": "Configure",
+    		"nf-context-menu.ViewConfiguration": "View configuration",
+    		"nf-context-menu.EnterGroup": "Enter group",
+    		"nf-context-menu.Start": "Start",
+    		"nf-context-menu.Stop": "Stop",
+    		"nf-context-menu.canEnable": "Enable",
+    		"nf-context-menu.canDisable": "Disable",
+    		"nf-context-menu.canGroup": "Group",
+    		"nf-context-menu.canManagePolicies": "Access Policies",
+    		"nf-context-menu.canAlign1": "Vertical alignment",
+    		"nf-context-menu.canAlign2": "Horizontal alignment",
+    		"nf-context-menu.canUploadTemplate": "Upload Template",
+    		"nf-context-menu.canCreateTemplate": "Create Template",
+    		"nf-context-menu.RemotePorts": "Remote ports",
+    		"nf-context-menu.EnableTransmission": "Enable transmission",
+    		"nf-context-menu.DisableTransmission": "Disable transmission",
+    		"nf-context-menu.StatsHistory": "Stats History",
+    		"nf-context-menu.ViewState": "View State",
+    		"nf-context-menu.Stats": "Stats",
+    		"nf-context-menu.DataProvenance": "Data provenance",
+    		"nf-context-menu.BringFront": "Bring to front",
+    		"nf-context-menu.GoToSource": "Go to source",
+    		"nf-context-menu.GoToDestination": "Go to destination",
+    		"nf-context-menu.UpstreamConnections": "Upstream connections",
+    		"nf-context-menu.DownstreamConnections": "Downstream connections",
+    		"nf-context-menu.Usage": "Usage",
+    		"nf-context-menu.Refresh": "Refresh",
+    		"nf-context-menu.GoTo": "Go to",
+    		"nf-context-menu.ChangeColor": "Change color",
+    		"nf-context-menu.CenterInView": "Center in view",
+    		"nf-context-menu.Copy": "Copy",
+    		"nf-context-menu.Paste": "Paste",
+    		"nf-context-menu.MoveParentGroup": "Move to parent group",
+    		"nf-context-menu.QueueList": "Queue List",
+    		"nf-context-menu.EmptyQueue": "Empty queue",
+    		"nf-context-menu.Delete": "Delete",
+    		"nf-controller-service.ConfigurationError": "Configuration Error",
+    		"nf-controller-service.Cancel": "Cancel",
+    		"nf-controller-service.Close": "Close",
+    		"nf-controller-service.Message1": "Steps to disable",
+    		"nf-controller-service.ActionCanceled": "Action Canceled",
+    		"nf-controller-service.Message2": "The request to disable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
+    		"nf-controller-service.Message3": "Steps to enable ",
+    		"nf-controller-service.Message4": "Action Canceled",
+    		"nf-controller-service.Message5": "The request to enable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
+    		"nf-controller-service.Message6": "Save changes before going to this Controller Service?",
+    		"nf-controller-service.Settings": "Settings",
+    		"nf-controller-service.Properties": "Properties",
+    		"nf-controller-service.Comments": "Comments",
+    		"nf-controller-service.Message7": "Configure Controller Service",
+    		"nf-controller-service.Message8": "Disable Controller Service",
+    		"nf-controller-service.Disable": "Disable",
+    		"nf-controller-service.ServiceOnle": "Service only",
+    		"nf-controller-service.Message9": "Enable only this controller service",
+    		"nf-controller-service.Message10": "Service and referencing components",
+    		"nf-controller-service.Message11": "Enable this controller service and enable/start all referencing components",
+    		"nf-controller-service.Message12": "Enable Controller Service",
+    		"nf-controller-service.Enable": "Enable",
+    		"nf-controller-service.Apply": "Apply",
+    		"nf-controller-service.Advanced": "Advanced",
+    		"nf-controller-service.Message13": "Save changes before opening the advanced configuration?",
+    		"nf-controller-service.Ok": "Ok",
+    		"nf-controller-service.ControllerService": "Controller Service",
+    		"nf-controller-service.Message14": "The unauthorized component can not be disabled due to unauthorized use.",
+    		"nf-controller-service.Message15": "Unable to invoke component due to unauthorized use.",
+    		"nf-controller-service.Save": "Save",
+    		"nf-controller-service.Message16": "Save the changes before entering the controller service?",
+    		"nf-controller-services.Add": "Add",
+    		"nf-controller-services.ControllerService": "Controller Service",
+    		"nf-controller-services.Message14": "You must select the type of controller service you want to create.",
+    		"nf-controller-services.AddControllerService": "Add Controller Service",
+    		"nf-controller-services.Invalid": "Invalid",
+    		"nf-controller-services.Disabled": "Disabled",
+    		"nf-controller-services.Disabling": "Disabling",
+    		"nf-controller-services.Enabled": "Enabled",
+    		"nf-controller-services.Enabling": "Enabling",
+    		"nf-controller-services.toolTip": "Based on the presence of the announcement",
+    		"nf-controller-services.Name": "Name",
+    		"nf-controller-services.Type": "Type",
+    		"nf-controller-services.Tags": "Tags",
+    		"nf-controller-services.State": "State",
+    		"nf-controller-services.ProcessGroup": "Process Group",
+    		"nf-controller-services.type-description": "Not specified",
+    		"nf-controller-services.viewDtails": "View Dtails",
+    		"nf-controller-services.usage": "Usage",
+    		"nf-controller-services.disable": "Disable",
+    		"nf-controller-services.edit": "Edit",
+    		"nf-controller-services.enable": "Enable",
+    		"nf-controller-services.viewstate": "View State",
+    		"nf-controller-services.remove": "Remove",
+    		"nf-controller-services.acesspolicies": "Access Policies",
+    		"nf-custom-ui.AdvancedConfiguration": "Advanced Configuration",
+    		"nf-custom-ui.Message1": "Unable to generate an access token to access the Advanced Access Configuration dialog box.",
+    		"nf-draggable.ComponentPosition": "Component Position",
+    		"nf-draggable.Message1": "Unauthorized modification of destination group.",
+    		"nf-draggable.Message2": "Each component that chooses to modify must be authorized.",
+    		"nf-go-to.Close": "Close",
+    		"nf-go-to.NoDownstreamComponents": "No Downstream Components",
+    		"nf-go-to.NoUpstreamComponents": "No Upstream Components",
+    		"nf-go-to.DownstreamConnections": "Downstream Connections",
+    		"nf-go-to.UpstreamConnections": "Upstream Connections",
+    		"nf-go-to.Message1": "No upstream components",
+    		"nf-go-to.Message2": "No downstream components",
+    		"nf-go-to.Funnel": "Funnel",
+    		"nf-label-configuration.ConfigureLabel": "Configure Label",
+    		"nf-label-configuration.Apply": "Apply",
+    		"nf-label-configuration.Cancel": "Cancel",
+    		"nf-policy-management.ViewUserInterface": "View User Interface",
+    		"nf-policy-management.AcessController": "Acess Controller",
+    		"nf-policy-management.QueryProvenance": "Query Provenance",
+    		"nf-policy-management.AcessPolicies": "Acess Policies",
+    		"nf-policy-management.AcessUser": "Acess User/Group",
+    		"nf-policy-management.retrieve": "Retrieve site-to-site details",
+    		"nf-policy-management.diagnostics": "View system analysis",
+    		"nf-policy-management.proxy": "Proxy user request",
+    		"nf-policy-management.counters": "Access counters",
+    		"nf-policy-management.ViewComponent": "View Component",
+    		"nf-policy-management.ModifyComponent": "Modify Component",
+    		"nf-policy-management.ViewData": "View Data",
+    		"nf-policy-management.ModifyData": "Modify Data",
+    		"nf-policy-management.ReceiveData": "Through the site to the site to receive data",
+    		"nf-policy-management.SendData": "Send Data",
+    		"nf-policy-management.ViewPolicies": "View Policies",
+    		"nf-policy-management.ModifyPolicies": "Modify Policies",
+    		"nf-policy-management.Searchusers": "Search users",
+    		"nf-policy-management.Ok": "Ok",
+    		"nf-policy-management.Add": "Add",
+    		"nf-policy-management.UserSearch": "User Search",
+    		"nf-policy-management.Message1": "There is no matching user\\'",
+    		"nf-policy-management.Message2": "Multiple users match\\'",
+    		"nf-policy-management.Cancel": "Cancel",
+    		"nf-policy-management.UpdatePolicy": "Update Policy",
+    		"nf-policy-management.DeletePolicy": "Delete Policy",
+    		"nf-policy-management.Message3": "Delete\\'",
+    		"nf-policy-management.Message4": "\\'From this strategy?",
+    		"nf-policy-management.Message5": "Are you sure you want to delete this policy?",
+    		"nf-policy-management.Message6": "No choice strategy",
+    		"nf-policy-management.Message7": "Allows the user to view the user interface",
+    		"nf-policy-management.Message8": "Allows the user to view / modify the controller, including reporting tasks in the cluster, controller services, and nodes",
+    		"nf-policy-management.Message9": "Allows users to submit source searches and request event inheritance",
+    		"nf-policy-management.Message10": "Allows users to view / modify policies for all components",
+    		"nf-policy-management.Message11": "Allows users to view / modify user groups",
+    		"nf-policy-management.Message12": "Allows other instances of NiFi to retrieve the Site-to-Site details for this data stream",
+    		"nf-policy-management.Message13": "Allow users to view system analysis",
+    		"nf-policy-management.Message14": "Allows the proxy computer to send requests on behalf of others",
+    		"nf-policy-management.Message15": "Allows the user to view / modify the counter",
+    		"nf-policy-management.Message16": "Allows users to view component configuration details",
+    		"nf-policy-management.Message17": "Allows the user to modify the component configuration details",
+    		"nf-policy-management.Message18": "Allows the user to view the metadata and content of this component through the source data and stream file queues in the outbound connection",
+    		"nf-policy-management.Message19": "Allows the user to empty the stream file queue in the outbound connection and submit the replay",
+    		"nf-policy-management.Message20": "Allows this port to receive data from these data stream instances",
+    		"nf-policy-management.Message21": "Allows this port to send data to these data stream instances",
+    		"nf-policy-management.Message22": "Allows users to view a list of users who can view / modify this component",
+    		"nf-policy-management.Message23": "Allows users to modify the list of users who can view / modify this component",
+    		"nf-policy-management.Message24": "By removing this policy, the permissions for this component will revert to inherited policies, if applicable.",
+    		"nf-policy-management.Text1": "Shows the valid policies inherited from",
+    		"nf-policy-management.Text2": "No component specific administrator.",
+    		"nf-policy-management.Text3": "Unauthorized access to the specified resource policy.",
+    		"nf-policy-management.Text4": "Unauthorized view of the policy.",
+    		"nf-policy-management.Text5": "There is no policy for specifying resources.",
+    		"nf-policy-management.Text6": "Unauthorized access to the specified resource policy.",
+    		"nf-policy-management.Write": "Write",
+    		"nf-policy-management.Read": "Read",
+    		"nf-policy-management.View": "View",
+    		"nf-policy-management.Modify": "Modify",
+    		"nf-policy-management.AllPolicies": "All Policies",
+    		"nf-policy-management.Controller": "Controller",
+    		"nf-policy-management.ProcessorGroup": "Processor Group",
+    		"nf-policy-management.reporting-tasks": "Reporting Tasks",
+    		"nf-policy-management.NoUserSearch": "No User Search",
+    		"nf-policy-management.Remove": "Remove",
+    		"nf-port-configuration.ConfigurePort": "Configure Port",
+    		"nf-port-configuration.Apply": "Apply",
+    		"nf-port-configuration.ConfigurationError": "Configuration Error",
+    		"nf-port-configuration.Cancel": "Cancel",
+    		"nf-port-details.PortDetails": "Port Details",
+    		"nf-port-details.OK": "Ok",
+    		"nf-process-group-configuration.ConfigureProcessGroup": "Configure Process Group",
+    		"nf-process-group-configuration.Apply": "Apply",
+    		"nf-process-group-configuration.Cancel": "Cancel",
+    		"nf-process-group-configuration.General": "General",
+    		"nf-process-group-configuration.ControllerService": "Controller Service",
+    		"nf-process-group-details.ProcessGroupDetails": "Process Group Details",
+    		"nf-process-group-details.Ok": "Ok",
+    		"nf-process-group.Message1": "No comments specified",
+    		"nf-process-group.Queued": "Queued",
+    		"nf-process-group.In": "In",
+    		"nf-process-group.ReadWrite": "Read/Write",
+    		"nf-process-group.Out": "Out",
+    		"nf-process-group.5min": "(5 min)",
+    		"nf-processor-configuration.TimerDriven": "Timer driven",
+    		"nf-processor-configuration.Message1": "Processor will be scheduled to run on an interval defined by the run schedule.",
+    		"nf-processor-configuration.EventDriven": "Event driven",
+    		"nf-processor-configuration.Message2": "Processor will be scheduled to run when triggered by an event (e.g. a FlowFile enters an incoming queue). This scheduling strategy is experimental.",
+    		"nf-processor-configuration.OnPrimaryNode": "On primary node",
+    		"nf-processor-configuration.Message3": "Processor will be scheduled on the primary node on an interval defined by the run schedule.",
+    		"nf-processor-configuration.CronDriven": "CRON驱动",
+    		"nf-processor-configuration.Message5": "Processor will be scheduled to run on at specific times based on the specified CRON string.",
+    		"nf-processor-configuration.Error1": "Concurrent tasks must be integer values",
+    		"nf-processor-configuration.Error2": "Must specify an operational plan",
+    		"nf-processor-configuration.Error3": "The duration of the penalty must be specified",
+    		"nf-processor-configuration.Error4": "Must specify the duration of the production",
+    		"nf-processor-configuration.ConfigurationError": "Configuration Error",
+    		"nf-processor-configuration.Message6": "Save changes before going to this Controller Service?",
+    		"nf-processor-configuration.Settings": "Settings",
+    		"nf-processor-configuration.Scheduling": "Scheduling",
+    		"nf-processor-configuration.Properties": "Properties",
+    		"nf-processor-configuration.Comments": "Comments",
+    		"nf-processor-configuration.ConfigureProcessor": "Configure Processor",
+    		"nf-processor-configuration.Debug": "DEBUG",
+    		"nf-processor-configuration.Info": "INFO",
+    		"nf-processor-configuration.Warn": "WARN",
+    		"nf-processor-configuration.Error": "ERROR",
+    		"nf-processor-configuration.Apply": "Apply",
+    		"nf-processor-configuration.Cancel": "Cancel",
+    		"nf-processor-configuration.Advanced": "Advanced",
+    		"nf-processor-configuration.Message7": "Save changes before opening the advanced configuration?",
+    		"nf-processor-configuration.ThisProcessorHasNoRelationships": "This processor does not matter.",
+    		"nf-processor-configuration.ViewDetails": "View Details",
+    		"nf-processor-configuration.Provenance": "Provenance",
+    		"nf-processor.In": "In",
+    		"nf-processor.ReadWrite": "Read/Write",
+    		"nf-processor.Out": "Out",
+    		"nf-processor.TasksTime": "Tasks/Time",
+    		"nf-processor.5min-1": "5 分钟",
+    		"nf-processor.5min": "(5 min)",
+    		"nf-registration.Thanks": "Thanks",
+    		"nf-registration.Message1": "Your request will be processed shortly.",
+    		"nf-queue-listing.QueueListing": "队列列表",
+    		"nf-queue-listing.Message1": "Unable to generate an access token for downloading content.",
+    		"nf-queue-listing.Message2": "Unable to generate access token for viewing content.",
+    		"nf-queue-listing.Stop": "Stop",
+    		"nf-queue-listing.Message3": "Queue has no stream file.",
+    		"nf-queue-listing.FlowFile": "Flow File",
+    		"nf-queue-listing.Ok": "Ok",
+    		"nf-queue-listing.Message4": "The source and destination of this queue are currently running. This list may no longer be accurate.",
+    		"nf-queue-listing.Message5": "The source of this queue is currently running. This listing may no longer be accurate.",
+    		"nf-queue-listing.Message6": "The goal of this queue is running. This listing may no longer be accurate.",
+    		"nf-queue-listing.NoValueSet": "No Value Set",
+    		"nf-queue-listing.Yes": "Yes",
+    		"nf-queue-listing.No": "No",
+    		"nf-queue-listing.Position": "Position",
+    		"nf-queue-listing.FileName": "File Name",
+    		"nf-queue-listing.FileSize": "File Size",
+    		"nf-queue-listing.queuedDuration": "Queued Duration",
+    		"nf-queue-listing.lineageDuration": "Lineage Duration",
+    		"nf-queue-listing.penalized": "Penalized",
+    		"nf-queue-listing.node": "Node",
+    		"nf-queue-listing.Bytes": "Bytes",
+    		"nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "Configure Remote Process Group",
+    		"nf-remote-process-group-configuration.Apply": "Apply",
+    		"nf-remote-process-group-configuration.ConfigurationError": "Configuration Error",
+    		"nf-remote-process-group-configuration.Cancel": "Cancel",
+    		"nf-remote-process-group-configuration.Message5": "Remote process group configuration",
+    		"nf-remote-process-group-details.RemoteProcessGroupDetails": "Remote Process Group Details",
+    		"nf-remote-process-group-details.Ok": "Ok",
+    		"nf-remote-process-group-ports.ConfigureRemotePort": "Configure Remote Port",
+    		"nf-remote-process-group-ports.Apply": "Apply",
+    		"nf-remote-process-group-ports.ConfigurationError": "Configuration Error",
+    		"nf-remote-process-group-ports.Message1": "Concurrent tasks must be an integer value.",
+    		"nf-remote-process-group-ports.Cancel": "Cancel",
+    		"nf-remote-process-group-ports.RemoteProcessGroupPorts": "Remote Process Group Ports",
+    		"nf-remote-process-group-ports.Close": "Close",
+    		"nf-remote-process-group-ports.Message2": "No description specified.",
+    		"nf-remote-process-group-ports.Message3": "This port has been deleted.",
+    		"nf-remote-process-group-ports.Message4": "The number of tasks that should be scheduled for this port at the same time.",
+    		"nf-remote-process-group-ports.transmissionSwitch": "Switch port transfer",
+    		"nf-remote-process-group-ports.description": "Not specified.",
+    		"nf-remote-process-group.Message1": "No comments specified",
+    		"nf-remote-process-group.Sent": "Sent",
+    		"nf-remote-process-group.Received": "Received",
+    		"nf-remote-process-group.5min": "(5 min)",
+    		"nf-remote-process-group.Message2": "Site-to-Site is secure.",
+    		"nf-remote-process-group.Message3": "Site-to-Site is NOT secure.",
+    		"nf-remote-process-group.Message4": "Remote flow not current",
+    		"nf-reporting-task.ReportingTask": "Reporting Task",
+    		"nf-reporting-task.Save": "Save",
+    		"nf-reporting-task.ConfigurationError": "Configuration Error",
+    		"nf-reporting-task.Message1": "Save changes before going to this Controller Service?",
+    		"nf-reporting-task.Settings": "Settings",
+    		"nf-reporting-task.Properties": "Properties",
+    		"nf-reporting-task.Comments": "Comments",
+    		"nf-reporting-task.ConfigureReportingTask": "Configure Reporting Task",
+    		"nf-reporting-task.Node": "Node",
+    		"nf-reporting-task.ClusterManager": "Cluster Manager",
+    		"nf-reporting-task.TimerDriven": "Timer driven",
+    		"nf-reporting-task.Message2": "Reporting task will be scheduled to run on an interval defined by the run schedule.",
+    		"nf-reporting-task.CRONDriven": "CRON driven",
+    		"nf-reporting-task.Message3": "Reporting task will be scheduled to run on at specific times based on the specified CRON string.",
+    		"nf-reporting-task.Apply": "Apply",
+    		"nf-reporting-task.Cancel": "Cancel",
+    		"nf-reporting-task.Advanced": "Advanced",
+    		"nf-reporting-task.Message4": "Save changes before opening the advanced configuration?",
+    		"nf-reporting-task.Ok": "Ok",
+    		"nf-search.Search": "Search",
+    		"nf-secure-port-configuration": "Settings",
+    		"nf-secure-port-configuration.AccessControl": "Access Control",
+    		"nf-secure-port-configuration.ConfigureSecurePort": "Configure Secure Port",
+    		"nf-secure-port-configuration.Apply": "Apply",
+    		"nf-secure-port-configuration.Cancel": "Cancel",
+    		"nf-secure-port-configuration.InputPort": "InputPort",
+    		"nf-secure-port-configuration.OutputPort": "OutputPort",
+    		"nf-secure-port-details.Settings": "Settings",
+    		"nf-secure-port-details.AccessControl": "Access Control",
+    		"nf-secure-port-details.SecurePortDetails": "Secure Port Details",
+    		"nf-secure-port-details.Ok": "Ok",
+    		"nf-settings.Filter": "Filter",
+    		"nf-settings.Message1": "A new flow archive was successfully created.",
+    		"nf-settings.Message2": "Settings successfully applied.",
+    		"nf-settings.Message3": "The type of controller service to create must be selected.",
+    		"nf-settings.Text": "Node",
+    		"nf-settings.ClusterManager": "Cluster Manager",
+    		"nf-settings.Message4": "This controller service will be available on the nodes only.",
+    		"nf-settings.Message5": "This controller service will be available on the cluster manager only.",
+    		"nf-settings.Message6": "No description specified",
+    		"nf-settings.Message7": "Add Controller Service",
+    		"nf-settings.Add": "Add",
+    		"nf-settings.Cancel": "Cancel",
+    		"nf-settings.Node": "Node",
+    		"nf-settings": "Cluster Manager",
+    		"nf-settings.ViewDetail": "View Details",
+    		"nf-settings.Disable": "Disable",
+    		"nf-settings.Enable": "Enable",
+    		"nf-settings.Remove": "Remove",
+    		"nf-settings.Usage": "Usage",
+    		"nf-settings.Name": "Name",
+    		"nf-settings.State": "State",
+    		"nf-settings.Availability": "Availability",
+    		"nf-settings.Message8": "This reporting task will be available on the nodes only.",
+    		"nf-settings.Message9": "This reporting task will be available on the cluster manager only.",
+    		"nf-settings.Type": "Type",
+    		"nf-settings.Tags": "Tags",
+    		"nf-settings.Message10": "No description specified",
+    		"nf-settings.Message11": "Add Reporting Task",
+    		"nf-settings.ViewDetails": "View Details",
+    		"nf-settings.Stop": "Stop",
+    		"nf-settings.Edit": "Edit",
+    		"nf-settings.Start": "Start",
+    		"nf-settings.RunStatus": "Run Status",
+    		"nf-settings.General": "General",
+    		"nf-settings.ControllerServices": "Controller Services",
+    		"nf-settings.ReportingTasks": "Reporting Tasks",
+    		"nf-settings.Message12": "Create a new controller service",
+    		"nf-settings.Message13": "Create a new reporting task",
+    		"nf-settings.Settings": " Settings",
+    		"nf-settings.ViewState": "ViewState",
+    		"nf-settings.AccessPolicies": "Access Policies",
+    		"nf-settings.Invalid": "Invalid",
+    		"nf-settings.Stopped": "Stopped",
+    		"nf-settings.Running": "Running",
+    		"nf-settings.Disabled": "Disabled",
+    		"nf-about": "NiFi Flow",
+    		"nf-bulletin-board.defaultFilterText": "Filter",
+    		"nf-bulletin-board.ByMessage": "by message",
+    		"nf-bulletin-board.ByName": "by name",
+    		"nf-bulletin-board.ById": "by id",
+    		"nf-bulletin-board.ByGroupId": "by group id",
+    		"nf-bulletin-board.Message1": "Filter ",
+    		"nf-bulletin-board.Message2": " matching \\\\'",
+    		"nf-bulletin-board.Message3": "Auto refresh started",
+    		"nf-bulletin-board.Message4": "Auto refresh stopped",
+    		"nf-bulletin-board.Message5": "Remove the filter",
+    		"nf-bulletin-board.BulletinBoard": " Bulletin Board",
+    		"nf-cluster.Cluster": " Cluster",
+    		"nf-cluster-table.Filter": "Filter",
+    		"nf-cluster-table.Message1": "Connect \\'",
+    		"nf-cluster-table.Message2": "\\' to this cluster?",
+    		"nf-cluster-table.Message3": "Disconnect \\'",
+    		"nf-cluster-table.Message4": "\\' from the cluster?",
+    		"nf-cluster-table.Message5": "Remove \\'",
+    		"nf-cluster-table.Message6": "\\' from the cluster?",
+    		"nf-cluster-table.NodeDetails": "Node Details",
+    		"nf-cluster-table.Ok": "Ok",
+    		"nf-cluster-table.ByAddress": "by address",
+    		"nf-cluster-table.ByStatus": "by status",
+    		"nf-cluster-table.ViewDetails": "View Details",
+    		"nf-cluster-table.Node Address": "Node Address",
+    		"nf-cluster-table.ActiveThreadCount": "Active Thread Count",
+    		"nf-cluster-table.Size": "Size",
+    		"nf-cluster-table.Queue": "Queue",
+    		"nf-cluster-table.Status": "Status",
+    		"nf-cluster-table.Uptime": "Uptime",
+    		"nf-cluster-table.LastHeartbeat": "Last Heartbeat",
+    		"nf-cluster-table.Connect": "Connect",
+    		"nf-cluster-table.Remove": "Remove",
+    		"nf-cluster-table.Disconnect": "Disconnect",
+    		"nf-cluster-table.MakePrimary": "Make Primary",
+    		"nf-cluster-table.None": "无",
+    		"nf-counters-table.Filter": "Filter",
+    		"nf-counters-table.ByName": "by name",
+    		"nf-counters-table.ByContext": "by context",
+    		"nf-counters-table.Context": "Context",
+    		"nf-counters-table.Name": "Name",
+    		"nf-counters-table.Value": "Value",
+    		"nf-counters-table.Reset": "Reset",
+    		"nf-counters-table.Delete": "Delete",
+    		"nf-counters-table.Connect": "Connect",
+    		"nf-counters.Counters": " Counters",
+    		"nf-history.History": "历史",
+    		"nf-history-table.Filter": "Filter",
+    		"nf-history-table.ActionDetail": "Action Details",
+    		"nf-history-table.Ok": "Ok",
+    		"nf-history-table.ById": "by id",
+    		"nf-history-table.Message1": "Filters based on the id of the component that was modified",
+    		"nf-history-table.ByUser": "by user",
+    		"nf-history-table.Message2": "Filters based on the user that performed the action",
+    		"nf-history-table.FilterHistory": "Filter History",
+    		"nf-history-table.Cancel": "Cancel",
+    		"nf-history-table.PurgeHistory": "Purge History",
+    		"nf-history-table.Purge": "Purge",
+    		"nf-history-table.History": " History",
+    		"nf-history-table.Message3": "Are you sure you want to delete all history before '",
+    		"nf-history-table.Message3.1": "\\'?",
+    		"nf-history-table.Message4": "The end date must be specified.",
+    		"nf-history-table.ViewDetails": "View Details",
+    		"nf-history-table.DateTime": "Date/Time",
+    		"nf-history-table.Name": "Name",
+    		"nf-history-table.Type": "Type",
+    		"nf-history-table.Operation": "Operation",
+    		"nf-history-table.User": "User",
+    		"nf-history-table.Value": "Value",
+    		"nf-history-table.PreviousValue": "Previous Value",
+    		"nf-history-table.SourceId": "Source Id",
+    		"nf-history-table.SourceName": "Source Name",
+    		"nf-history-table.SourceType": "Source Type",
+    		"nf-history-table.Relationship": "Relationship(s)",
+    		"nf-history-table.DestinationId": "Destination Id",
+    		"nf-history-table.DestinationName": "Destination Name",
+    		"nf-history-table.DestinationType": "Destination Type",
+    		"nf-history-table.Group": "Group",
+    		"nf-history-table.GroupId": "GroupId",
+    		"nf-history-table.PreviousGroup": "Previous Group",
+    		"nf-history-table.PreviousGroupId": "Previous Group Id",
+    		"nf-history-table.EndDate": "End Date",
+    		"nf-history-table.Message5": "A filter based on the id of the modified component",
+    		"nf-history-table.Message6": "A filter based on the user performing the operation",
+    		"nf-history-table.NotAuthorized": "No Authorized",
+    		"nf-history-table.Uri": "Uri",
+    		"nf-history-table.EndTime": "End Time",
+    		"nf-login.Login": "Login",
+    		"nf-login.Logining": "Logining...",
+    		"nf-login.SUCCESS": "SUCCESS",
+    		"nf-login.Denied": "Denied",
+    		"nf-login.Message1": "Can not log in",
+    		"nf-login.Message2": "Can not check access status",
+    		"nf-login.Message3": "The current data stream is not configured with account / password login.",
+    		"nf-common.History": "<b>History:</b><ul class=\"property-info\">",
+    		"nf-common.DefaultValue": "<b>Default Value:</b> ",
+    		"nf-common.SupportsExpressionLanguage": "<b>Supports Expression Language:</b> ",
+    		"nf-common.sensitiveText": "Sensitive value set",
+    		"nf-common.Message1": "An unexpected error has occurred",
+    		"nf-common.Message2": "Please check the logs.",
+    		"nf-common.Message3": "Unable to communicate with NiFi",
+    		"nf-common.Message4": "Unauthorized",
+    		"nf-common.Message5": "Authorization is required to use this NiFi.",
+    		"nf-common.Message6": "Forbidden",
+    		"nf-common.Message7": "Unable to authorize you to use this NiFi.",
+    		"nf-common.Message9": "An error occurred communicating with the application core. Please check the logs and fix any configuration issues before restarting.",
+    		"nf-common.ParseError": "Parse Error",
+    		"nf-common.Message10": "Unable to interpret response from NiFi.",
+    		"nf-common.Message11": ": Unexpected Response",
+    		"nf-common.Message12": "An unexpected error has occurred. Please check the logs.",
+    		"nf-common.Message13": "No value set",
+    		"nf-common.Message14": "Empty string set",
+    		"nf-common.Message15": "Your session will expire soon. Please log in again to avoid being automatically logged out.",
+    		"nf-common.Message16": "You are accessing with limited authority. Log in or request an account to access with additional authority granted to you by an administrator.",
+    		"nf-common.Message17": "Your session has expired. Please reload to log in again.",
+    		"nf-common.Message18": "Your session has expired. Please press Ok to log in again.",
+    		"nf-common.Message19": "Please ensure the application is running and check the logs for any errors.",
+    		"nf-common.Message20": "Request has timed out. Please ensure the application is running and check the logs for any errors.",
+    		"nf-common.Message21": "Request has been aborted.",
+    		"nf-common.Message22": "Request transport mechanism failed. Please ensure the host where the application is running is accessible.",
+    		"nf-common.Message23": "Make sure that the application is running and check if there are any errors in the log.",
+    		"nf-common.Message24": "Can not communicate with data stream",
+    		"nf-common.Unauthorized": "Unauthorized",
+    		"nf-common.Message25": "Use this data stream for authentication.",
+    		"nf-common.Message26": "An unexpected error occurred",
+    		"nf-common.SessionExpired": "Session Expired",
+    		"nf-common.AccessDenied": "Access Denied",
+    		"nf-common.Error": "Error",
+    		"nf-common.SupportsExpressionLanuage":"Supports expression language:",
+    		"nf-common.Message27": "Empty string before setting",
+    		"nf-common.Message28": "No value previously set",
+    		"nf-common.Bytes": " Bytes",
+    		"nf-connection-details.FromProcessor": "From processor",
+    		"nf-connection-details.Processor": "Processor",
+    		"nf-connection-details.FromFunnel": "From Funnel",
+    		"nf-connection-details.FromOutPut": "From output",
+    		"nf-connection-details.FromInput": "From input",
+    		"nf-connection-details.ToProcessor": "To processor",
+    		"nf-connection-details.ToFunnel": "To funnel",
+    		"nf-connection-details.ToInput": "To input",
+    		"nf-connection-details.ToOutput": "To output",
+    		"nf-connection-details.Details": "Details",
+    		"nf-connection-details.Settings": "Settings",
+    		"nf-connection-details.ConnectionDetails": "Connection Details",
+    		"nf-connection-details.Ok": "Ok",
+    		"nf-connection-details.NoValueSet": "No Value Set",
+    		"nf-dialog.Ok": "Ok",
+    		"nf-dialog.Yes": "Yes",
+    		"nf-dialog.No": "No",
+    		"nf-processor-details.Settings": "Settings",
+    		"nf-processor-details.Scheduling": "Scheduling",
+    		"nf-processor-details.Properties": "Properties",
+    		"nf-processor-details.Comments": "Comments",
+    		"nf-processor-details.ProcessorDetails": "Processor Details",
+    		"nf-processor-details.Ok": "Ok",
+    		"nf-processor-details.Advanced": "Advanced",
+    		"nf-processor-details.Error": "错误",
+    		"nf-processor-details.ThisProcessorHasNoRelationships": "This Processor Has No Relationships",
+    		"nf-status-history.StatusHistory":"Status History",
+    		"nf-status-history.Processor": "Processor",
+    		"nf-status-history.InputPort": "Input Port",
+    		"nf-status-history.OutputPort": "Output Port",
+    		"nf-status-history.ProcessGroup": "Process Group",
+    		"nf-status-history.RemoteProcessGroup": "Remote Process Group",
+    		"nf-status-history.Connection": "Connection",
+    		"nf-status-history.Funnel": "Funnel",
+    		"nf-status-history.Template": "Template",
+    		"nf-status-history.Label": "Label",
+    		"nf-status-history.Message":"Insufficient history, please try again later.",
+    		"nf-status-history.Close": "Close",
+    		"nf-status-history.Start": "Start",
+    		"nf-status-history.End": "End",
+    		"nf-status-history.Min_Max_Mean": "Min/Max/Mean",
+    		"nf-status-history.NiFi": "NiFi",
+    		"nf-provenance.DataProvenance": " Data Provenance",
+    		"nf-provenance-lineage.Message1": "Computing FlowFile lineage...",
+    		"nf-provenance-lineage.ViewDetails": "View details",
+    		"nf-provenance-lineage.Message2": "The lineage search has completed successfully but there no results were found. The events may have aged off.",
+    		"nf-provenance-lineage.Find parents": "Find parents",
+    		"nf-provenance-lineage.Expand": "Expand",
+    		"nf-provenance-lineage.Collapse": "Collapse",
+    		"nf-provenance-lineage.Cancel": "Cancel",
+    		"nf-provenance-lineage.Lineage Results": "Pedigree results",
+    		"nf-provenance-lineage.Process Lineage": "Process Lineage",
+    		"nf-provenance-table.Filter": "Filter",
+    		"nf-provenance-table.Message": "Showing the most recent ",
+    		"nf-provenance-table.Of": " of ",
+    		"nf-provenance-table.Events": "events.",
+    		"nf-provenance-table.Message4": " events, please refine the search.",
+    		"nf-provenance-table.Showing": "Showing ",
+    		"nf-provenance-table.Message5": " events that match the specified query, please refine the search.",
+    		"nf-provenance-table.Message6": "the events that match the specified query.",
+    		"nf-provenance-table.Details": "Details",
+    		"nf-provenance-table.Attributes": "Attributes",
+    		"nf-provenance-table.Content": "Content",
+    		"nf-provenance-table.ProvenanceEvent": "Provenance Event",
+    		"nf-provenance-table.Ok": "Ok",
+    		"nf-provenance-table.Message1": "Successfully submitted replay request.",
+    		"nf-provenance-table.Message2": "Search Events",
+    		"nf-provenance-table.Search": "Search",
+    		"nf-provenance-table.Message3": "Searching provenance events...",
+    		"nf-provenance-table.ByComponentName": "by component name",
+    		"nf-provenance-table.ByComponentType": "by component type",
+    		"nf-provenance-table.ByType": "by type",
+    		"nf-provenance-table.ByNode": "by node",
+    		"nf-provenance-table.Cluster": "cluster",
+    		"nf-provenance-table.ViewDetail": "View Details",
+    		"nf-provenance-table.ShowLineage": "Show Lineage",
+    		"nf-provenance-table.GoTo": "Go To",
+    		"nf-provenance-table.DateTime": "Date/Time",
+    		"nf-provenance-table.Type": "Type",
+    		"nf-provenance-table.FlowFileUuid": "FlowFile Uuid",
+    		"nf-provenance-table.Size": "Size",
+    		"nf-provenance-table.ComponentName": "Component Name",
+    		"nf-provenance-table.ComponentType": "Component Type",
+    		"nf-provenance-table.Node": "Node",
+    		"nf-provenance-table.Cancel": "Cancel",
+    		"nf-provenance-table.NoValueSet": "No value set",
+    		"nf-provenance-table.Claim": "Claim",
+    		"nf-provenance-table.InputClaim": "Input Claim",
+    		"nf-provenance-table.Provenance": "Provenance",
+    		"nf-provenance-table.Message7": "Unable to generate access token for viewing content.",
+    		"nf-provenance-table.Message8": "Unable to generate an access token for downloading content.",
+    		"nf-provenance-table.Message9": "No previously set value",
+    		"nf-provenance-table.Message10": "Searching for cause event...",
+    		"nf-provenance-table.Process": "Process",
+    		"nf-provenance-table.NoChildren": "No Children",
+    		"nf-provenance-table.NoParent": "No Parent",
+    		"nf-provenance-table.Bytes": " Bytes",
+    		"nf-cluster-search.Summary": "Summary",
+    		"nf-cluster-search.SelectNode": "Select node",
+    		"nf-cluster-search.Ok": "Ok",
+    		"nf-cluster-search.ClusterSearch": "Cluster Search",
+    		"nf-cluster-search.Message1": "No nodes match \\'",
+    		"nf-cluster-search.Message2": "More than one node matches \\'",
+    		"nf-cluster-search.Cancel": "Cancel",
+    		"nf-cluster-search.NiFiSumary": "NiFi Summary",
+    		"nf-cluster-search.Message3": "No node matching the search term",
+    		"nf-summary-table.Filter": "Filter",
+    		"nf-summary-table.Processors": "Processors",
+    		"nf-summary-table.Connections": "Connections",
+    		"nf-summary-table.InputPorts": "Input Ports",
+    		"nf-summary-table.OutputPorts": "Output Ports",
+    		"nf-summary-table.RemoteProcessGroups": "Remote Process Groups",
+    		"nf-summary-table.ProcessGroups": "Process Groups",
+    		"nf-summary-table.ByName": "by name",
+    		"nf-summary-table.ByType": "by type",
+    		"nf-summary-table.BySource": "by source",
+    		"nf-summary-table.ByDestination": "by destination",
+    		"nf-summary-table.ByUri": "by uri",
+    		"nf-summary-table.ViewDetail": "View Details",
+    		"nf-summary-table.SourceName": "SourceName",
+    		"nf-summary-table.Name": "Name",
+    		"nf-summary-table.RunStatus": "Run Status",
+    		"nf-summary-table.In": "In",
+    		"nf-summary-table.Size": "Size",
+    		"nf-summary-table.Message": "Count / data size in the last 5 min",
+    		"nf-summary-table.Read": "Read",
+    		"nf-summary-table.Write": "Write",
+    		"nf-summary-table.5min": "5 min",
+    		"nf-summary-table.Message1": "Data size in the last 5 min",
+    		"nf-summary-table.Out": "Out",
+    		"nf-summary-table.Tasks": "Tasks",
+    		"nf-summary-table.Time": "Time",
+    		"nf-summary-table.Message2": "Count / duration in the last 5 min",
+    		"nf-summary-table.Type": "Type",
+    		"nf-summary-table.GoTo": "Go To",
+    		"nf-summary-table.ShowHistory": "Show History",
+    		"nf-summary-table.ShowDetail": "Show Details",
+    		"nf-summary-table.ClusterProcessorSummary": "Cluster Processor Summary",
+    		"nf-summary-table.Node": "Node",
+    		"nf-summary-table.Queue": "Queue",
+    		"nf-summary-table.DestinationName": "Destination Name",
+    		"nf-summary-table.ClusterConnectionSummary": "Cluster Connection Summary",
+    		"nf-summary-table.Close": "Close",
+    		"nf-summary-table.Transferred": "Transferred",
+    		"nf-summary-table.Message3": "Count / data size transferred to and from connections in the last 5 min",
+    		"nf-summary-table.Sent": "Sent",
+    		"nf-summary-table.Received": "Received",
+    		"nf-summary-table.ClusterProcessGroupSummary": "Cluster Process Group Summary",
+    		"nf-summary-table.ClusterInputPortSummary": "Cluster Input Port Summary",
+    		"nf-summary-table.ClusterOutPutPortSummary": "Cluster Output Port Summary",
+    		"nf-summary-table.Transmitting": "Transmitting",
+    		"nf-summary-table.Target URI": "Target URI",
+    		"nf-summary-table.ClusterRemoteProcessGroupSummary": "Cluster Remote Process Group Summary",
+    		"nf-summary-table.JVM": "JVM",
+    		"nf-summary-table.System": "System",
+    		"nf-summary-table.SystemDiagnostics": "System Diagnostics",
+    		"nf-summary-table.Summary": " Summary",
+    		"nf-summary-table.Message4": "Based on the presence of announcements",
+    		"nf-summary-table.times": "times",
+    		"nf-summary-table.UsageFor": "Usage For",
+    		"nf-summary-table.GoToProcessor": "Go To Processor",
+    		"nf-summary-table.ViewStatus": "View Status",
+    		"nf-summary-table.ViewProcessor": "View Processor",
+    		"nf-summary-table.ViewConnect": "View Connect",
+    		"nf-summary-table.GoToConnect": "Go To Connect",
+    		"nf-summary-table.GoToProcessorGroup": "Go To Processor Group",
+    		"nf-summary-table.ViewProcessorGroup": "View Processor Group",
+    		"nf-summary-table.GoToInputPort": "Go To Input Port",
+    		"nf-summary-table.ViewInputPort": "View Input Port",
+    		"nf-summary-table.GoToOutputPort": "Go To Output Port",
+    		"nf-summary-table.ViewOutputPort": "View Output Port",
+    		"nf-summary-table.ViewRemoteProcessorGroup": "View Remote Processor Group",
+    		"nf-summary-table.aria1": "The data stream is stored using the repository",
+    		"nf-summary.Summary": "Summary",
+    		"nf-templates-table.Templates": " Templates",
+    		"nf-templates-table.Message": " Select template to import",
+    		"nf-templates-table.Filter": "Filter",
+    		"nf-templates-table.DeleteTemplate": "Delete Template",
+    		"nf-templates-table.Message1": "Delete template \'",
+    		"nf-templates-table.DownloadTemplate": "Download Template",
+    		"nf-templates-table.Message2": "Unable to generate an access token for downloading content.",
+    		"nf-templates-table.ByName": "by name",
+    		"nf-templates-table.ByDescription": "by description",
+    		"nf-templates-table.RemovieTemplate": "Remove Template",
+    		"nf-templates-table.DateTime": "Date/Time",
+    		"nf-templates-table.Name": "Name",
+    		"nf-templates-table.Description": "Description",
+    		"nf-templates-table.GroupId": "Process group Id",
+    		"nf-templates-table.Download": "Download",
+    		"nf-templates-table.AccessPolicies": "Access Policies",
+    		"nf-templates.Templates": "Templates",
+    		"nf-users.Users": "Users",
+    		"nf-users-table.Filter": "Filter",
+    		"nf-users-table.UserDetails": "User Details",
+    		"nf-users-table.Ok": "Ok",
+    		"nf-users-table.UserRoles": "User Roles",
+    		"nf-users-table.Apply": "Apply",
+    		"nf-users-table.Cancel": "Cancel",
+    		"nf-users-table.GroupRoles": "Group Roles",
+    		"nf-users-table.DeleteUser": "Delete User",
+    		"nf-users-table.Delete": "Delete",
+    		"nf-users-table.RevokeAccess": "Revoke Access",
+    		"nf-users-table.Revoke": "Revoke",
+    		"nf-users-table.SetUserGroup": "Set Users Group",
+    		"nf-users-table.Group": "Group",
+    		"nf-users-table.Message": "Group name cannot be blank.",
+    		"nf-users-table.ByUser": "by user",
+    		"nf-users-table.ByGroup": "by group",
+    		"nf-users-table.ByRole": "by role",
+    		"nf-users-table.AuthorizationPending": "Authorization Pending",
+    		"nf-users-table.AccessRevoked": "Access Revoked",
+    		"nf-users-table.NoRolesSet": "No roles set",
+    		"nf-users-table.Message1": "Multiple users with different roles",
+    		"nf-users-table.Message2": "Multiple users with different status",
+    		"nf-users-table.Message3": "No status set",
+    		"nf-users-table.EditAccess": "Edit Access",
+    		"nf-users-table.RevokeAccess.Ungroup": "Ungroup",
+    		"nf-users-table.DeleteAccount": "Delete Account",
+    		"nf-users-table.User": "User",
+    		"nf-users-table.Roles": "Roles",
+    		"nf-users-table.LastAccessed": "Last Accessed",
+    		"nf-users-table.Status": "Status",
+    		"nf-users-table.GroupUsers": "Group Users",
+    		"nf-users-table.Message4": "Select one or more users to group.",
+    		"nf-users-table.Message5": "Remove all users from group \\'",
+    		"nf-users-table.Message6": "Remove user \\'",
+    		"nf-users-table.Message7": "\\' from group \\'",
+    		"nf-users-table.UserGroup": "User/Group",
+    		"nf-users-table.Edit": "Edit",
+    		"nf-users-table.Remove": "Remove",
+    		"jquery-propertytable.SensitiveValueSet": "Sensitive value set",
+    		"jquery-propertytable.EmptyStringSet": "Empty string set",
+    		"jquery-propertytable.NoValueSet": "no value set",
+    		"jquery-propertytable.RequiredField": "Required field",
+    		"jquery-propertytable.Property": "Property",
+    		"jquery-propertytable.Value": "Value",
+    		"jquery-propertytable.PropertyName": "Property Name",
+    		"jquery-propertytable.NewProperty": "New property",
+    		"jquery-propertytable.Ok": "Ok",
+    		"jquery-propertytable.Delete": "Delete",
+    		"jquery-propertytable.GoTo": "Go To",
+    		"jquery-propertytable.Cancel": "Cancel",   
+    		"jquery-propertytable.Empty": "Empty",
+    		"jquery-propertytable.SetEmptyString": "Set Empty String",
+    		"jquery-propertytable.ControllerService" : "Controller Service",
+    		"jquery-propertytable.Tags" : "Tags",
+    		"jquery-propertytable.Create" : "Create",
+    		"jquery-propertytable.Description" : "Description",
+    		"jquery-propertytable.AddControllerService" : "Add Controller Service",
+    		"jquery-propertytable.AddProperty": "Add Property",
+    		"jquery-propertytable.PropertyExists": "Property Exists",
+    		"jquery-propertytable.Message0": "A property with this name already exists。",
+    		"jquery-propertytable.Message": "A property with this name already exists.",
+    		"jquery-propertytable.Message1": "Property name must be specified.",
+    		"jquery-propertytable.Message3": "Create new service ...",
+    		"jquery-propertytable.Message2": "No controller service types found that are applicable for this property.",
+    		"slick.editors.Message1": "Please enter a valid integer",
+    		"slick.editors.Message2": "Please enter a valid positive number",
+    		"slick.grid.Message1": "Slickgrid requires a valid container，",
+    		"slick.grid.Message2": "Does not exist in the DOM",
+    		"slick.grid.Message3": "Style table not found.",
+    		"slick.grid.Message4": "Add cell Css style: cell CSS hash key'",
+    		"slick.grid.Message5": "'already exists.",
+    		"slick.grid.Message6": "From node acquisition unit: Unable to get unit -",
+    		"slick.grid.Message7": "Grid : Make the active cell editable: options.editable to false when it should never be called",
+    		"slick.grid.Message8": "The selection model is not set",
+    		"jquery-tagcloud.NoTagsSpecified": "Unspecified label" 
+
+    };
+    return {
+        msg: function (key) {
+            if (locale === "en") {
+                return en[key];
+            }
+            if ((locale === "cn")) {
+                return cn[key];
+            }
+        }
+    };
+})();
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js
new file mode 100644
index 000000000000..769046e9eec9
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js
@@ -0,0 +1,1522 @@
+
+nf._ = (function () {
+    var locale = "jp";
+    var jp = {
+        "nf-about": "データフロー",
+        "nf-bulletin-board.defaultFilterText": "フィルタリング",
+        "nf-bulletin-board.ByMessage": "情報でフィルタリングします。",
+        "nf-bulletin-board.ByName": "名前でフィルタリングします。",
+        "nf-bulletin-board.ById": "識別子でフィルタリングします。",
+        "nf-bulletin-board.ByGroupId": "グループ識別子でフィルタリングします。",
+        "nf-bulletin-board.Message1": "フィルタリング ",
+        "nf-bulletin-board.Message2": " マッチング \\\\'",
+        "nf-bulletin-board.Message3": "自動リフレッシュ開始",
+        "nf-bulletin-board.Message4": "自動リフレッシュ終了",
+		"nf-bulletin-board.Message5": "削除フィルター",
+        "nf-bulletin-board.BulletinBoard": " 掲示板",
+		"nf-actions.UpdateResource": "更新のソース",
+        "nf-actions.Refreshing": "更新中",
+        "nf-actions.RemoteGroupProcess": "リモート処理グループ",
+        "nf-actions.NoTargetURIDefined": "ターゲットURIが定義されていません。",
+        "nf-actions.Message1": "該当するコンポーネントを選択していません。該当するコンポーネントを選択して活性化し、且つ、現在コンポーネントが実行されていないことを保証します。",
+        "nf-actions.Message2": "該当するコンポーネントを選択していません。該当するコンポーネントを選択してオフラインさせ、現在コンポーネントが実行されていないことを保証します。",
+        "nf-actions.Message3": "該当するコンポーネントを選択していません。該当するコンポーネントを選択して起動し、現在コンポーネントが実行されていません。",
+        "nf-actions.Message4": "該当するコンポーネントを選択していません。終了するコンポーネントを選択してください。",
+        "nf-actions.Message5": "該当するコンポーネントを選択していません。削除するコンポーネントを選択してください",
+        "nf-actions.EmptyQueue": "空きのキュー",
+        "nf-actions.Message6": "キューをクリアしてよろしいですか。すべてのフローファイルはクリアされます。",
+        "nf-actions.Cancel": "キャンセル",
+        "nf-actions.Empty": "空き",
+        "nf-actions.Stop": "終了",
+        "nf-actions.Message7": " キューからクリアされます。",
+        "nf-actions.Message8": "クリアされるフローファイルがありません。",
+        "nf-actions.Message9": "現在の選択では、テンプレートを作成できません。",
+        "nf-actions.Create": "作成",
+        "nf-actions.Template": "テンプレート '",
+        "nf-actions.Message11": "' 正しく作成しました。",
+        "nf-actions.Message12": "コピーペーストする時、エラーが発生しました。",
+        "nf-canvas-toobbar.Start": "起動",
+        "nf-canvas-toobbar.Stop": "終了",
+        "nf-canvas-toobbar.Copy": "コピー",
+        "nf-canvas-toobbar.Paste": "ペースト",
+        "nf-canvas-toobbar.Group": "グループ",
+        "nf-canvas-toobbar.Enable": "イネーブル",
+        "nf-canvas-toobbar.Disable": "ディセーブル",
+        "nf-canvas-toobbar.CreateTemplate": "テンプレート作成",
+        "nf-canvas-toobbar.ChangeColor": "色変更",
+        "nf-canvas-toobbar.Delete": "削除",        
+        "nf-canvas-header.OK": "はい",
+        "nf-canvas-header.CreateTemplate": "テンプレート作成",
+        "nf-canvas-header.Fill": "記入",
+        "nf-canvas-header.Apply": "適用",
+        "nf-canvas-header.Cancel": "キャンセル",
+        "nf-canvas-header.Message": "現在のグループをリフレッシュできません。",
+        "nf-canvas-toolbox.Input": "入力",
+        "nf-canvas-toolbox.OutPut": "出力",        
+        "nf-canvas-toolbox.Filter": "フィルター",
+        "nf-canvas-toolbox.Processor": "プロセッサー",
+        "nf-canvas-toolbox.InputPort": "インプットポート",
+        "nf-canvas-toolbox.OutputPort": "アウトプットポート",
+        "nf-canvas-toolbox.ProcessGroup": "プロセスグループ",
+        "nf-canvas-toolbox.RemoteProcessGroup": "リモートプロセスグループ",
+        "nf-canvas-toolbox.Connection": "接続",
+        "nf-canvas-toolbox.Funnel": "じょうご",
+        "nf-canvas-toolbox.Template": "テンプレート",
+        "nf-canvas-toolbox.Label": "ラベル",
+        "nf-canvas-toolbox.Add": "追加",
+        "nf-canvas-toolbox.Cancel": "キャンセル",
+        "nf-canvas-toolbox.Instantiate Template": "インスタンス化したテンプレート",
+        "nf-canvas-toolbox.Message": "テンプレートはデータフローシステムにロードされていません。",
+        "nf-canvas-toolbox.Type": "タイプ",
+        "nf-canvas-toolbox.Tags": "ラベル",
+        "nf-canvas-toolbox.Message1": "説明を指定していません。",
+        "nf-canvas-toolbox.AddProcessor": "プロセッサー追加",
+        "nf-canvas-toolbox.AddPort": "ポート追加",
+        "nf-canvas-toolbox.AddProcessGroup": "プロセスグループ追加",
+        "nf-canvas-toolbox.AddRemoteProcessGroup": "リモートプロセスグループ追加",
+        "nf-canvas-utils.Message1": "特定のコンポーネントグループをロードできません.",
+        "nf-canvas-utils.Message2": "特定のコンポーネントが見つかりませんでした。",
+        "nf-canvas-utils.Message3": "選択したグループに入れません。",
+        "nf-canvas-utils.Message4": "ポートをルートグループから移動できません。",
+        "nf-canvas-utils.Message5": "これらのポートは現在グループ外部に接続しています: <b>",
+        "nf-canvas-utils.Message6": "これらのポートはターゲットプロセスグループにあります: <b>",
+        "nf-canvas.Browser": "対応しないブラウザです。",
+        "nf-canvas.Message1": "フローチャートはSVGで表示すべきです。SVGに対応するブラウザを選択してください。",
+        "nf-connection-configuration.Add": "追加",
+        "nf-connection-configuration.Message0": "接続は、少なくとも１つのリレーションシップを選択すべきです。",
+        "nf-connection-configuration.Cancel": "キャンセル",
+        "nf-connection-configuration.Message1": "\\' いずれのリレーションシップにも対応しません。",
+        "nf-connection-configuration.Message2": "\\' いずれのアウトプットポートもありません。",
+        "nf-connection-configuration.Message4": "\\' いずれのインプットポートもありません。",
+        "nf-connection-configuration.Message6": "コンフィギュレーションエラー",
+        "nf-connection-configuration.ConfigureConnection": "接続コンフィギュレーショ",
+        "nf-connection-configuration.Detail": "詳細",
+        "nf-connection-configuration.Setting": "設定",
+        "nf-connection-configuration.CreateConnection": "接続作成",
+        "nf-connection-configuration.Apply": "アプリー",
+        "nf-connection-configuration.Message7": "接続は、少なくとも１つのリレーションシップを選択すべきです。",
+        "nf-connection-configuration.Message8": "接続コンフィギュレーション",
+        "nf-connection.Message1": "ループ接続には少なくとも２つの反曲点が必要です。",
+        "nf-connection.From": "から",
+        "nf-connection.To": "まで",
+        "nf-connection.Name": "名称",
+        "nf-connection.Queued": "キューイング",
+        "nf-context-menu.RefreshStatus": "リフレッシュ状態",
+        "nf-context-menu.LeaveGroup": "グループと離れます。",
+        "nf-context-menu.Configure": "コンフィギュレーション",
+        "nf-context-menu.ViewConfiguration": "コンフィギュレーションをビューします。",
+        "nf-context-menu.EnterGroup": "グループに入ります。",
+        "nf-context-menu.Start": "開始",
+        "nf-context-menu.Stop": "終了",
+        "nf-context-menu.RemotePorts": "リモートポート",
+        "nf-context-menu.EnableTransmission": "イネーブルに変換させます。",
+        "nf-context-menu.DisableTransmission": "ディセーブルに変換させます。",
+        "nf-context-menu.Stats": "ステータス",
+        "nf-context-menu.DataProvenance": "データ出所",
+        "nf-context-menu.BringFront": "フロントに持ってきます",
+        "nf-context-menu.GoToSource": "ソースに入ります。",
+        "nf-context-menu.GoToDestination": "ターゲットに入ります。",
+        "nf-context-menu.UpstreamConnections": "上流接続",
+        "nf-context-menu.DownstreamConnections": "下流接続",
+        "nf-context-menu.Usage": "用途",
+        "nf-context-menu.Refresh": "リフレッシュ",
+        "nf-context-menu.GoTo": "エントリー",
+        "nf-context-menu.ChangeColor": "色変更",
+        "nf-context-menu.CenterInView": "ビュー中央合わせ",
+        "nf-context-menu.Copy": "コピー",
+        "nf-context-menu.Paste": "ペースト",
+        "nf-context-menu.MoveParentGroup": "親グループに移動します。",
+        "nf-context-menu.EmptyQueue": "空きのキュー",
+        "nf-context-menu.Delete": "削除",
+        "nf-controller-service.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-controller-service.Cancel": "キャンセル",
+        "nf-controller-service.Close": "閉じる",
+        "nf-controller-service.Message1": "ディセーブルにする手順",
+        "nf-controller-service.ActionCanceled": "動作キャンセル",
+        "nf-controller-service.Message2": "イネーブルリクエストの動作はキャンセルされましたが、一部のリクエストは実行たかもしれません。 サービスリレーションシップのすべてのコンポーネントを検証してください。",
+        "nf-controller-service.Message3": "イネーブル手順 ",
+        "nf-controller-service.Message4": "動作キャンセル",
+        "nf-controller-service.Message5": "ディセーブルリクエストの動作はキャンセルされましたが、、一部のリクエストは実行たかもしれません。 サービスリレーションシップのすべてのコンポーネントを検証してください。",
+        "nf-controller-service.Message6": "設定を保存しますか?",
+        "nf-controller-service.Settings": "コンフィギュレーション",
+        "nf-controller-service.Properties": "プロパティ",
+        "nf-controller-service.Comments": "コメント",
+        "nf-controller-service.Message7": "コンフィギュレーションコントローラーサービス",
+        "nf-controller-service.Message8": "そのサービスディセーブルをコントロールします。",
+        "nf-controller-service.Disable": "ディセーブル",
+        "nf-controller-service.ServiceOnle": "サービスのみ",
+        "nf-controller-service.Message9": "現在のコントローラーサービスだけをイネーブルにします。",
+        "nf-controller-service.Message10": "サービスと関連关コンポーネント",
+        "nf-controller-service.Message11": "コントローラーサービスをイネーブルにします。リレーションシップコンポーネントをイネーブル/起動させます。",
+        "nf-controller-service.Message12": "コントロールサーバーをイネーブルにします。",
+        "nf-controller-service.Enable": "イネーブル",
+        "nf-controller-service.Apply": "アプリー",
+        "nf-controller-service.Advanced": "アドバンスド",
+        "nf-controller-service.Message13": "アドバンスド設定前、変更を保存しますか?",
+        "nf-controller-service.Ok": "はい",
+        "nf-go-to.Close": "閉じる",
+        "nf-go-to.DownstreamConnections": "下流接続",
+        "nf-go-to.UpstreamConnections": "上流接続",
+        "nf-go-to.Message1": "上流接続がありません。",
+        "nf-go-to.Message2": "下流接続がありません。",        
+        "nf-port-configuration.ConfigurePort": "コンフィギュレーションポート",
+        "nf-port-configuration.Apply": "アプリー",
+        "nf-port-configuration.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-port-configuration.Cancel": "キャンセル",
+        "nf-port-details.PortDetails": "ポート詳細",
+        "nf-port-details.OK": "はい",
+        "nf-process-group-configuration.ConfigureProcessGroup": "コンフィギュレーションプロセスグループ",
+        "nf-process-group-configuration.Apply": "アプリー",
+        "nf-process-group-configuration.Cancel": "キャンセル",
+        "nf-process-group-details.ProcessGroupDetails": "プロセスグループ詳細",
+        "nf-process-group-details.Ok": "アプリー",
+        "nf-process-group.Message1": "コメントがありません",
+        "nf-process-group.Queued": "キューイング",
+        "nf-process-group.In": "入力",
+        "nf-process-group.ReadWrite": "リード/ライト",
+        "nf-process-group.Out": "出力",
+        "nf-process-group.5min": "(5 分間)",
+        "nf-processor-configuration.TimerDriven": "時間ドライブ",
+        "nf-processor-configuration.Message1": "プロセッサーは計画時間どおり実行されます。",
+        "nf-processor-configuration.EventDriven": "イベントドライブ",
+        "nf-processor-configuration.Message2": "プロセッサーはイベントドライブどおりに実行します(例、フローファイルがキューに入る)。計画タスクポリシーは打診的です。",
+        "nf-processor-configuration.OnPrimaryNode": "メインノードにあります。",
+        "nf-processor-configuration.Message3": "プロセッサーはメインノードで指定時間間隔どおりに次を実行されます。Processor will be scheduled on the primary node on an interval defined by the run schedule.",
+        "nf-processor-configuration.CronDriven": "CRONドライブ",
+        "nf-processor-configuration.Message5": "プロセッサーはCRON形式の指定時間で実行されます。",
+        "nf-processor-configuration.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-processor-configuration.Message6": "コントローラーサービスに入る前、変更を保存しますか?",
+        "nf-processor-configuration.Settings": "設定",
+        "nf-processor-configuration.Scheduling": "計画実行中",
+        "nf-processor-configuration.Properties": "プロパティ",
+        "nf-processor-configuration.Comments": "コメント",
+        "nf-processor-configuration.ConfigureProcessor": "コンフィギュレーションプロセッサー",
+        "nf-processor-configuration.Debug": "デバッグ",
+        "nf-processor-configuration.Info": "情報",
+        "nf-processor-configuration.Warn": "警告",
+        "nf-processor-configuration.Error": "エラー",
+        "nf-processor-configuration.Apply": "アプリー",
+        "nf-processor-configuration.Cancel": "キャンセル",
+        "nf-processor-configuration.Advanced": "アドバンスド",
+        "nf-processor-configuration.Message7": "アドバンスド設定に入る前に、変更を保存しますか?",
+        "nf-processor.In": "入力",
+        "nf-processor.ReadWrite": "リード/ライト",
+        "nf-processor.Out": "出力",
+        "nf-processor.TasksTime": "タスク/時間",
+        "nf-processor.5min": "(5 分間)",
+        "nf-registration.Thanks": "ありがとうございました。",
+        "nf-registration.Message1": "您的リクエスト将被快速执行.",
+        "nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "コンフィギュレーションリモートプロセスグループ",
+        "nf-remote-process-group-configuration.Apply": "アプリー",
+        "nf-remote-process-group-configuration.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-remote-process-group-configuration.Cancel": "キャンセル",
+        "nf-remote-process-group-details.RemoteProcessGroupDetails": "リモートプロセスグループ詳細",
+        "nf-remote-process-group-details.Ok": "はい",
+        "nf-remote-process-group-ports.ConfigureRemotePort": "コンフィギュレーションリモートポート",
+        "nf-remote-process-group-ports.Apply": "アプリー",
+        "nf-remote-process-group-ports.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-remote-process-group-ports.Message1": "現在タスク要求整数值.",
+        "nf-remote-process-group-ports.Cancel": "キャンセル",
+        "nf-remote-process-group-ports.RemoteProcessGroupPorts": "リモートプロセスグループポート",
+        "nf-remote-process-group-ports.Close": "閉じる",
+        "nf-remote-process-group-ports.Message2": "説明がありません。",
+        "nf-remote-process-group.Message1": "コメントがありません。",
+        "nf-remote-process-group.Sent": "送信",
+        "nf-remote-process-group.Received": "受信",
+        "nf-remote-process-group.5min": "(5 分間)",
+        "nf-remote-process-group.Message2": "Site-to-Site は安全です。",
+        "nf-remote-process-group.Message3": "Site-to-Site は安全ではありません。",
+        "nf-remote-process-group.Message4": "現在、リモートフローは実行されていません。",
+        "nf-reporting-task.ConfigurationError": "コンフィギュレーションエラー",
+        "nf-reporting-task.Message1": "コントローラーサービスに入る前に、設定を保存しますか。?",
+        "nf-reporting-task.Settings": "設定",
+        "nf-reporting-task.Properties": "プロパティ",
+        "nf-reporting-task.Comments": "コメント",
+        "nf-reporting-task.ConfigureReportingTask": "レポートタスクを設定します。",
+        "nf-reporting-task.Node": "ノード",
+        "nf-reporting-task.ClusterManager": "クラスターマネージャー",
+        "nf-reporting-task.TimerDriven": "時間ドライブ",
+        "nf-reporting-task.Message2": "レポートタスクは指定時間間隔で実行されます。",
+        "nf-reporting-task.CRONDriven": "CRONドライブ",
+        "nf-reporting-task.Message3": "レポートタスクはCRONコンフィギュレーションで実行されます。",
+        "nf-reporting-task.Apply": "アプリー",
+        "nf-reporting-task.Cancel": "キャンセル",
+        "nf-reporting-task.Advanced": "アドバンスド",
+        "nf-reporting-task.Message4": "アドバンスド設定に入る前に、変更を保存しますか?",
+        "nf-search.Search": "検索",
+        "nf-secure-port-configuration": "設定",
+        "nf-secure-port-configuration.AccessControl": "権限制御",
+        "nf-secure-port-configuration.ConfigureSecurePort": "コンフィギュレーションセキュリティポート",
+        "nf-secure-port-configuration.Apply": "アプリー",
+        "nf-secure-port-configuration.Cancel": "キャンセル",
+        "nf-secure-port-configuration.InputPort": "インプットポート",
+        "nf-secure-port-configuration.OutputPort": "アウトプットポート",
+        "nf-secure-port-details.Settings": "設定",
+        "nf-secure-port-details.AccessControl": "権限制御",
+        "nf-secure-port-details.SecurePortDetails": "セキュリティポート詳細",
+        "nf-secure-port-details.Ok": "はい",
+        "nf-settings.Filter": "フィルター",
+        "nf-settings.Message1": "スチームパッケージは正しく作成されました。",
+        "nf-settings.Message2": "設定は正しく適用されました。",
+        "nf-settings.Message3": "コントローラーサービスのタイプを選択すべきです。",
+        "nf-settings.Text": "ノード",
+        "nf-settings.ClusterManager": "クラスターマネージャー",
+        "nf-settings.Message4": "コントローラーサービスはノードで利用できます。",
+        "nf-settings.Message5": "コントローラーサービスはクラスターマネージャーで利用できます。",
+        "nf-settings.Message6": "説明情報がありません。",
+        "nf-settings.Message7": "コントローラーサービスを追加します。",
+        "nf-settings.Add": "追加",
+        "nf-settings.Cancel": "キャンセル",
+        "nf-settings.Node": "ノード",
+        "nf-settings": "クラスターマネージャー",
+        "nf-settings.ViewDetail": "詳細を確認します。",
+        "nf-settings.Disable": "ディセーブル",
+        "nf-settings.Enable": "イネーブル",
+        "nf-settings.Remove": "リムーブ",
+        "nf-settings.Usage": "用途",
+        "nf-settings.Name": "名称",
+        "nf-settings.State": "ステータス",
+        "nf-settings.Availability": "取得できます。",
+        "nf-settings.Message8": "レポートタスク仅ノードは取得できます。",
+        "nf-settings.Message9": "レポートタスククラスターマネージャーを取得する権限があります。",
+        "nf-settings.Type": "タイプ",
+        "nf-settings.Tags": "ラベル",
+        "nf-settings.Message10": "指定した説明がありません",
+        "nf-settings.Message11": "レポートタスクを追加します。",
+        "nf-settings.ViewDetails": "詳細を確認します。",
+        "nf-settings.Stop": "終了",
+        "nf-settings.Edit": "編集",
+        "nf-settings.Start": "開始",
+        "nf-settings.RunStatus": "実行ステータス",
+        "nf-settings.General": "共通",
+        "nf-settings.ControllerServices": "コントローラーサービス",
+        "nf-settings.ReportingTasks": "レポートタスク",
+        "nf-settings.Message12": "新しいコントローラーサービスを作成します",
+        "nf-settings.Message13": "新しいレポートタスクを作成します。",
+        "nf-settings.Settings": " 設定",
+        "nf-cluster.Cluster": " クラスター",
+        "nf-cluster-table.Filter": "フィルターを使います。",
+        "nf-cluster-table.Message1": "接続 \\'",
+        "nf-cluster-table.Message2": "\\' 当該クラスターにしますか?",
+        "nf-cluster-table.Message3": "切断 \\'",
+        "nf-cluster-table.Message4": "\\' 当該クラスターから　しますか?",
+        "nf-cluster-table.Message5": "リムーブ \\'",
+        "nf-cluster-table.Message6": "\\' 当該クラスターから　しますか?",
+        "nf-cluster-table.NodeDetails": "ノード詳細",
+        "nf-cluster-table.Ok": "はい",
+        "nf-cluster-table.ByAddress": "アドレスでフィルタリングします。",
+        "nf-cluster-table.ByStatus": "用ステータスフィルタリング",
+        "nf-cluster-table.ViewDetails": "詳細を確認します",
+        "nf-cluster-table.Node Address": "ノードアドレス",
+        "nf-cluster-table.ActiveThreadCount": "実行するスレッドの数",
+        "nf-cluster-table.Size": "サイズ",
+        "nf-cluster-table.Queue": "キューイング",                
+        "nf-cluster-table.Status": "ステータス",
+        "nf-cluster-table.Uptime": "実行時間",
+        "nf-cluster-table.LastHeartbeat": "最後のハートビート",
+        "nf-cluster-table.Connect": "接続",
+        "nf-cluster-table.Remove": "リムーブ",
+        "nf-cluster-table.Disconnect": "切断",
+        "nf-cluster-table.MakePrimary": "プライマリーにします。",
+        "nf-counters-table.Filter": "フィルター",
+        "nf-counters-table.ByName": "名称でフィルタリングします",
+        "nf-counters-table.ByContext": "コンテキストでフィルタリングします。",
+        "nf-counters-table.Context": "コンテキスト",
+        "nf-counters-table.Name": "名称",
+        "nf-counters-table.Value": "値",
+        "nf-counters-table.Reset": "リセット",
+        "nf-counters.Counters": " カウンター",
+        "nf-history-table.Filter": "フィルター",
+        "nf-history-table.ActionDetail": "動作詳細",
+        "nf-history-table.Ok": "はい",
+        "nf-history-table.ById": "IDでフィルタリングします。",
+        "nf-history-table.Message1": "コンポーネントIDに基づくフィルターは更新されました。",
+        "nf-history-table.ByUser": "ユーザーでフィルタリングします。",
+        "nf-history-table.Message2": "実行タスクに基づくユーザーのフィルター",
+        "nf-history-table.FilterHistory": "フィルター履歴",
+        "nf-history-table.Cancel": "キャンセル",
+        "nf-history-table.PurgeHistory": "履歴をクリアします。",
+        "nf-history-table.Purge": "クリア",
+        "nf-history-table.Message3": "履歴を削除してよろしいですか。 '",
+        "nf-history-table.Message3.1": "\\'\\?",
+        "nf-history-table.Message4": "終了日付は指定必須です。",
+        "nf-history-table.ViewDetails": "詳細を確認します",
+        "nf-history-table.DateTime": "日付/時間",
+        "nf-history-table.Name": "名称",
+        "nf-history-table.Type": "タイプ",
+        "nf-history-table.Operation": "操作",
+        "nf-history-table.User": "ユーザー",
+        "nf-history-table.Value": "値",
+        "nf-history-table.PreviousValue": "前の値",
+        "nf-history-table.SourceId": "ソースID",
+        "nf-history-table.SourceName": "ソース名称",
+        "nf-history-table.SourceType": "ソースタイプ",
+        "nf-history-table.Relationship": "リレーションシップ",
+        "nf-history-table.DestinationId": "デスティネーションID",
+        "nf-history-table.DestinationName": "デスティネーション名称",
+        "nf-history-table.DestinationType": "デスティネーションタイプ",
+        "nf-history-table.Group": "グループ",
+        "nf-history-table.GroupId": "グループID",
+        "nf-history-table.PreviousGroup": "前のグループ",
+        "nf-history-table.PreviousGroupId": "前グループID",
+        "nf-history-table.EndDate": "終了日付",
+        "nf-history-table.History": " 履歴",
+        "nf-common.sensitiveText": "敏感値の設定",
+        "nf-common.Message1": "異常が発生しました。",
+        "nf-common.Message2": "ログを確認してください。",
+        "nf-common.Message3": "データフローシステムにリンクできません。",
+        "nf-common.Message4": "ライセンスがありません。",
+        "nf-common.Message5": "データフローシステムのライセンスが必要です。",
+        "nf-common.Message6": "禁止",
+        "nf-common.Message7": "現在のデータフローシステムにライセンスを授与できません。",
+        "nf-common.Message9": "応用カーネルに通信できませんでした。再起動の前、ログを確認し、コンフィギュレーションエラーを修正してください。",
+        "nf-common.ParseError": "エラー分析",
+        "nf-common.Message10": "データフローからの返却を遮断できません。",
+        "nf-common.Message11": ": 異常で戻ります。",
+        "nf-common.Message12": "異常が発生しました。ログを確認してください。",
+        "nf-common.Message13": "値の設定がありません",
+        "nf-common.Message14": "文字列の設定は空きです。",
+        "nf-common.Message15": "ご利用のセッションはもうすぐに利用期限になります。自動ログオフされないように、再度ログインしてください。",
+        "nf-common.Message16": "現在ご利用の権限は限られています。権限のあるアカウントでログインしますか、あるいは権限のあるアカウントを申請してください。",
+        "nf-common.Message17": "ご利用のセッションは利用期限になっています。再度ロードし、新たにログインしてください。",
+        "nf-common.Message18": "ご利用のセッションは利用期限になっています。「はい」をクリックして、再度ログインしてください。",
+        "nf-common.Message19": "アプリーが実行されていることを確認し、ログを検査してください。",
+        "nf-common.Message20": "リクエストがタイムアウトになり、アプリーが実行されているかを確認し、ログを検査してください。",
+        "nf-common.Message21": "リクエストは終了されました。",
+        "nf-common.Message22": "リクエスト転送仕組みは失敗しました。アプリーが実行されており、アクセス権限を持つことを確認してください。",
+        "nf-common.SessionExpired": "リクエストがライムアウトです。",
+        "nf-common.AccessDenied": "権限を拒否します。",
+        "nf-common.DefaultValue": "デフォルト値:",   
+        "nf-common.SupportsExpressionLanuage":"対応する表現言語:",        
+        "nf-connection-details.FromProcessor": "プロセッサー",
+        "nf-connection-details.FromOutPut": "アウトプットから",
+        "nf-connection-details.FromInput": "インプットから",
+        "nf-connection-details.ToProcessor": "プロセッサーから",
+        "nf-connection-details.ToFunnel": "じょうごまで",
+        "nf-connection-details.ToInput": "インプットまで",
+        "nf-connection-details.ToOutput": "アウトプットまで",
+        "nf-connection-details.Details": "詳細",
+        "nf-connection-details.Settings": "設定",
+        "nf-connection-details.ConnectionDetails": "接続詳細",
+        "nf-connection-details.Ok": "はい",
+        "nf-dialog.Ok": "はい",
+        "nf-dialog.Yes": "はい",
+        "nf-dialog.No": "いいえ",
+        "nf-processor-details.Settings": "設定",
+        "nf-processor-details.Scheduling": "計画をスケジューリングしています。",
+        "nf-processor-details.Properties": "プロパティ",
+        "nf-processor-details.Comments": "コメント",
+        "nf-processor-details.ProcessorDetails": "プロセッサー詳細",
+        "nf-processor-details.Ok": "はい",
+        "nf-processor-details.Advanced": "アドバンスド",
+        "nf-status-history.StatusHistory":"ステータス履歴情報",        
+        "nf-status-history.Processor": "プロセッサー",
+        "nf-status-history.InputPort": "インプットポート",
+        "nf-status-history.OutputPort": "アウトプットポート",
+        "nf-status-history.ProcessGroup": "プロセスグループ",
+        "nf-status-history.RemoteProcessGroup": "リモートプロセスグループ",
+        "nf-status-history.Connection": "接続",
+        "nf-status-history.Funnel": "じょうご",
+        "nf-status-history.Template": "テンプレート",
+        "nf-status-history.Label": "ラベル",
+        "nf-status-history.Message":"十分の履歴情報がありません。後で試してください。",        
+        "nf-provenance.DataProvenance": " データソース",
+        "nf-provenance-lineage.Message1": "フローファイル関係を計算します...",
+        "nf-provenance-lineage.ViewDetails": "詳細を確認します",
+        "nf-provenance-lineage.Message2": "継承関係の検索は終わりましたが、結果が見つかりませんでした。イベントは期限になっている可能性があります。",
+        "nf-provenance-lineage.Find parents": "親を検索します",
+        "nf-provenance-lineage.Expand": "拡張",
+        "nf-provenance-lineage.Collapse": "崩溃",
+        "nf-provenance-lineage.Cancel": "キャンセル",
+        "nf-provenance-table.Filter": "フィルター",
+        "nf-provenance-table.Message": "最近の表示 ",
+        "nf-provenance-table.Of": " 中 ",
+        "nf-provenance-table.Events": " イベント. ",
+        "nf-provenance-table.Message4": " イベント、検索条件を修正してください。",
+        "nf-provenance-table.Showing": "表示 ",
+        "nf-provenance-table.Message5": " 検索条件に合致するイベント。検索条件を修正してください。 ",
+        "nf-provenance-table.Message6": "検索条件に合致するイベントです。 ",
+        "nf-provenance-table.Details": "詳細",
+        "nf-provenance-table.Attributes": "プロパティ",
+        "nf-provenance-table.Content": "コンテンツ",
+        "nf-provenance-table.ProvenanceEvent": "データソースイベント",
+        "nf-provenance-table.Ok": "はい",
+        "nf-provenance-table.Message1": "再生リクエストを正しくサミットしました。",
+        "nf-provenance-table.Message2": "検索イベント",
+        "nf-provenance-table.Search": "検索",
+        "nf-provenance-table.Message3": "データソースイベントを検索します...",
+        "nf-provenance-table.ByComponentName": "コンポーネント名でフィルタリングします",
+        "nf-provenance-table.ByComponentType": "コンポーネントタイプでフィルタリングします。",
+        "nf-provenance-table.ByType": "タイプフィルタリングで",
+        "nf-provenance-table.ByNode": "ノードフィルタリングで",
+        "nf-provenance-table.Cluster": "クラスター",
+        "nf-provenance-table.ViewDetail": "詳細を確認します",
+        "nf-provenance-table.ShowLineage": "継承関係を検査します。",
+        "nf-provenance-table.GoTo": "エントリー",
+        "nf-provenance-table.DateTime": "日付/時間",
+        "nf-provenance-table.Type": "タイプ",
+        "nf-provenance-table.FlowFileUuid": "フローファイル Uuid",
+        "nf-provenance-table.Size": "サイズ",
+        "nf-provenance-table.ComponentName": "コンポーネント名称",
+        "nf-provenance-table.ComponentType": "コンポーネントタイプ",
+        "nf-provenance-table.Node": "ノード",
+        "nf-provenance-table.Cancel": "キャンセル",
+        "nf-provenance-table.NoValueSet": "値がありません",
+        "nf-provenance-table.Claim": "アサーション",
+        "nf-provenance-table.InputClain": "インプットアサーション",
+        "nf-cluster-search.SelectNode": "ノード選択",
+        "nf-cluster-search.Ok": "はい",
+        "nf-cluster-search.Message1": "マッチングするノードがありません。 \\'",
+        "nf-cluster-search.Message2": "２つ以上のノードがマッチングします。 \\'",
+        "nf-cluster-search.Cancel": "キャンセル",
+        "nf-cluster-search.NiFiSumary": "データフローサマリー",
+        "nf-summary-table.Filter": "フィルター",
+        "nf-summary-table.Processors": "プロセッサー",
+        "nf-summary-table.Connections": "接続",
+        "nf-summary-table.InputPorts": "インプットポート",
+        "nf-summary-table.OutputPorts": "アウトプットポート",
+        "nf-summary-table.RemoteProcessGroups": "リモートプロセスグループ",
+        "nf-summary-table.ProcessGroups": "プロセスグループ",
+        "nf-summary-table.ByName": "名前でフィルタリングします",
+        "nf-summary-table.ByType": "タイプでフィルタリングします",
+        "nf-summary-table.BySource": "ソースでフィルタリングします",
+        "nf-summary-table.ByDestination": "ターゲットでフィルタリングします",
+        "nf-summary-table.ByUri": "uriでフィルタリングします",
+        "nf-summary-table.ViewDetail": "詳細を確認します",
+        "nf-summary-table.SourceName": "ソース名称",
+        "nf-summary-table.Name": "名称",
+        "nf-summary-table.RunStatus": "実行ステータス",
+        "nf-summary-table.In": "入力",
+        "nf-summary-table.Size": "サイズ",
+        "nf-summary-table.Message": "最後5分間の数 / データサイズ",
+        "nf-summary-table.Read": "リード",
+        "nf-summary-table.Write": "ライト",
+        "nf-summary-table.5min": "5分間",
+        "nf-summary-table.Message1": "最後5分間のデータ量",
+        "nf-summary-table.Out": "出力",
+        "nf-summary-table.Tasks": "タスク",
+        "nf-summary-table.Time": "時間",
+        "nf-summary-table.Message2": "最後5分間の数 / 延長期",
+        "nf-summary-table.Type": "タイプ",
+        "nf-summary-table.GoTo": "エントリー",
+        "nf-summary-table.ShowHistory": "履歴表示",
+        "nf-summary-table.ShowDetail": "詳細表示",
+        "nf-summary-table.ClusterProcessorSummary": "クラスタープロセッサーの一覧",
+        "nf-summary-table.Node": "ノード",
+        "nf-summary-table.Queue": "キュー",
+        "nf-summary-table.SourceName": "ソース名称",
+        "nf-summary-table.DestinationName": "ターゲット名称",
+        "nf-summary-table.ClusterConnectionSummary": "クラスター接続一覧",
+        "nf-summary-table.Close": "閉じる",
+        "nf-summary-table.Transferred": "転送終了",
+        "nf-summary-table.Message3": "最後5分間コネクターから送信する数 / データサイズ",
+        "nf-summary-table.Sent": "送信する",
+        "nf-summary-table.Received": "受信する",
+        "nf-summary-table.ClusterProcessGroupSummary": "クラスタープロセスグループ一覧",
+        "nf-summary-table.ClusterInputPortSummary": "クラスターインプットポート一覧",
+        "nf-summary-table.ClusterOutPutPortSummary": "クラスターアウトプットポート一覧",
+        "nf-summary-table.Transmitting": "変換中",
+        "nf-summary-table.Target URI": "ターゲット URI",
+        "nf-summary-table.ClusterRemoteProcessGroupSummary": "クラスターリモートプロセスグループ一覧",
+        "nf-summary-table.JVM": "Javaバーチャルマシン",
+        "nf-summary-table.System": "システム",
+        "nf-summary-table.SystemDiagnostics": "システム診断",
+        "nf-summary-table.Summary": " サマリー",
+        "nf-templates-table.Templates": " テンプレート",
+        "nf-templates-table.Message": "テンプレートを選択し、インポートします",
+        "nf-templates-table.Filter": "フィルタリング",
+        "nf-templates-table.Message1": "テンプレート削除 \"",
+        "nf-templates-table.ByName": "名称でフィルタリングします",
+        "nf-templates-table.ByDescription": "説明でフィルタリングします",
+        "nf-templates-table.RemovieTemplate": "テンプレートリムーブ",
+        "nf-templates-table.DateTime": "日付/時間",
+        "nf-templates-table.Name": "名称",
+        "nf-templates-table.Description": "説明",
+        "nf-users-table.Filter": "フィルタリング",
+        "nf-users-table.UserDetails": "ユーザー詳細",
+        "nf-users-table.Ok": "はい",
+        "nf-users-table.UserRoles": "ユーザーオール",
+        "nf-users-table.Apply": "アプリー",
+        "nf-users-table.Cancel": "キャンセル",
+        "nf-users-table.GroupRoles": "グループロール",
+        "nf-users-table.DeleteUser": "ユーザー削除",
+        "nf-users-table.Delete": "削除",
+        "nf-users-table.RevokeAccess": "権限を再度有効化します。",
+        "nf-users-table.Revoke": "再度有効化",
+        "nf-users-table.SetUserGroup": "ユーザーグループを設定します。",
+        "nf-users-table.Group": "グループ",
+        "nf-users-table.Message": "グループ名が空きになっていはいけません。",
+        "nf-users-table.ByUser": "ユーザーでフィルタリングします。",
+        "nf-users-table.ByGroup": "グループでフィルタリングします。",
+        "nf-users-table.ByRole": "ロールでフィルタリングします。",
+        "nf-users-table.AuthorizationPending": "ライセンスを授与しています。",
+        "nf-users-table.AccessRevoked": "権限は再度有効化されました。",
+        "nf-users-table.NoRolesSet": "設定されたロールがありません。",
+        "nf-users-table.Message1": "複数のユーザーの権限が異なります。",
+        "nf-users-table.Message2": "複数のユーザーのステータスが異なります。",
+        "nf-users-table.Message3": "ステータスが設定されていません。",
+        "nf-users-table.EditAccess": "権限編集",
+        "nf-users-table.RevokeAccess.Ungroup": "グループ離脱",
+        "nf-users-table.DeleteAccount": "アカウント削除",
+        "nf-users-table.User": "ユーザー",
+        "nf-users-table.Roles": "ロール",
+        "nf-users-table.LastAccessed": "最後アクセス",
+        "nf-users-table.Status": "ステータス",
+        "nf-users-table.GroupUsers": "グループ内のユーザー",
+        "nf-users-table.Message4": "１つあるいは複数のユーザーを選択します。",
+        "nf-users-table.Message5": "すべてのユーザーをグループからリムーブします。 \\'",
+        "nf-users-table.Message6": "削除 \\'",
+        "nf-users-table.Message7": "\\' グループから \\'",
+        "jquery-propertytable.SensitiveValueSet": "敏感値",
+        "jquery-propertytable.EmptyStringSet": "文字列は空きです。",
+        "jquery-propertytable.NoValueSet": "値がありません",
+        "jquery-propertytable.RequiredField": "必須のプロパティ",
+        "jquery-propertytable.Property": "プロパティ",
+        "jquery-propertytable.Value": "値",        
+        "jquery-propertytable.PropertyName": "プロパティ名称",
+        "jquery-propertytable.NewProperty": "プロパティ新規追加",        
+        "jquery-propertytable.Ok": "確認",        
+        "jquery-propertytable.Cancel": "キャンセル",
+        "jquery-propertytable.Empty": "空きの値",
+        "jquery-propertytable.ControllerService": "コントローラーサービス",
+        "jquery-propertytable.Tags": "ラベル",
+        "jquery-propertytable.Create": "作成",
+        "jquery-propertytable.Description": "説明",
+        "jquery-propertytable.Message": "プロパティがあります。",
+        "jquery-propertytable.Message1": "プロパティ名を指定しなければなりません。",
+        "jquery-propertytable.Message2": "当該プロパティに対応するコントローラーサービスがありません。",
+        "nf-actions.Header1": "アクティベーションコンポーネント",
+        "nf-actions.Header2": "オフラインコンポーネント",
+        "nf-actions.Header3": "コンポーネントの開始",
+        "nf-actions.Header4": "停止するコンポーネント",
+        "nf-actions.Header5": "リロード",
+        "nf-actions.Header6": "貼り付けエラー",
+        "nf-actions.CreateTemplate": "テンプレートを作成します。",
+        "nf-actions.Message13": "テンプレート名は空にすることはできません。",
+        "nf-actions.Message14": "パーセント完全な削除要求",
+        "nf-actions.Message15": "ストリーム・ファイル",
+        "nf-actions.Message16": "で",
+        "nf-actions.Message17": "外",
+        "nf-actions.Message18": "キューから削除しました。",
+        "nf-actions.Message19": "コンポーネントへの参照はありません。",
+        "nf-canvas-graph-controls-controller.ProcessGroup": "プロセッサ群",
+        "nf-canvas-graph-controls-controller.Processor": "プロセッサ",
+        "nf-canvas-graph-controls-controller.InputPort": "入力ポート",
+        "nf-canvas-graph-controls-controller.OutputPort": "出力ポート",
+        "nf-canvas-graph-controls-controller.RemoteProcessGroup": "リモートプロセスグループ",
+        "nf-canvas-graph-controls-controller.Funnel": "漏斗",
+        "nf-canvas-graph-controls-controller.Label": "ラベル",
+        "nf-canvas-graph-controls-controller.Connection": "接続",
+        "nf-canvas-graph-controls-controller.MultipleSelected": "選択した複数の",
+		"nf-canvas-global-menu-controller.About": "データストリームについて",
+		"nf-canvas-global-menu-controller.OK": "確認します",
+		"nf-canvas-operate-controller.SUCCESS": "サクセス",
+		"nf-canvas-operate-controller.SuccessContent": "テンプレートが正常にインポート。",
+		"nf-canvas-operate-controller.Upload": "アップロードテンプレート",
+		"nf-canvas-operate-controller.ButtonUpload": "アップロードテンプレート",
+		"nf-canvas-operate-controller.UploadTemplate": "テンプレートを選択していない。ブラウザでテンプレートを選択してください。",
+		"nf-canvas-operate-controller.Cancel": "キャンセル",
+		"nf-canvas-operate-controller.ChangeColor": "変色します",
+		"nf-canvas-operate-controller.Apply": "アプリケーション",
+		"nf-canvas-operate-controller.Error": "エラー",
+		"nf-canvas-operate-controller.CreateTemplate": "テンプレートを作成します。",
+		"nf-canvas-operate-controller.Message1": "テンプレートをインポートすることはできません。エラーのログを確認してください。",
+        "nf-canvas-flow-status.Processors": "プロセッサ",
+        "nf-canvas-flow-status.ProcessGroups": "治療群",
+        "nf-canvas-flow-status-controller.Processors": "プロセッサ",
+        "nf-canvas-flow-status-controller.ProcessGroups": "治療群",
+        "nf-canvas-flow-status-controller.RemoteProcessGroups": "リモート処理群",
+        "nf-canvas-flow-status-controller.Connection": "接続",
+        "nf-canvas-flow-status-controller.InputPorts": "入力ポート",
+        "nf-canvas-flow-status-controller.OutputPorts": "出力ポート",
+        "nf-canvas-flow-status-controller.Funnel": "漏斗",
+        "nf-canvas-flow-status-controller.no-matches": "結果は、クエリの要件を満たしていませんでした",
+		"nf-group-component.AddProcessGroup": "治療群を追加すること",
+		"nf-group-component.Add": "加えます",
+		"nf-group-component.Cancel": "キャンセル",
+		"nf-input-port-component.AddPort": "ポートを追加します。",
+		"nf-input-port-component.Add": "加えます",
+		"nf-input-port-component.Cancel": "キャンセル",
+		"nf-input-port-component.new-port-type": "エントリー",
+		"nf-output-port-component.Add": "加えます",
+		"nf-output-port-component.Cancel": "キャンセル",
+		"nf-output-port-component.new-port-type": "輸出",
+		"nf-processor-component.AddProcessor": "プロセッサを追加",
+		"nf-processor-component.AddProcessorContent": "このタイプの作成選択されているプロセッサを持っています。",
+		"nf-processor-component.Add": "加えます",
+		"nf-processor-component.Cancel": "キャンセル",
+		"nf-processor-component.Type": "タイプ",
+		"nf-processor-component.Tags": "标签",
+		"nf-processor-component.NoDescriptionSpecified": "説明が指定されていません",
+		"nf-remote-process-group-component.ConfigurationError": "設定エラー",
+		"nf-remote-process-group-component.AddRemoteProcessGroup": "リモートグループを追加します。",
+		"nf-remote-process-group-component.Add": "加えます",
+		"nf-remote-process-group-component.Cancel": "キャンセル",
+		"nf-template-component.AddTemplate": "テンプレートの追加",
+		"nf-template-component.Add": "加えます",
+		"nf-template-component.Cancel": "キャンセル",
+		"nf-template-component.InstantiateTemplate": "テンプレートのインスタンス化",
+		"nf-template-component.InstantiateTemplateContent": "いいえデータ・フロー・テンプレートがロードされません。",
+        "nf-canvas-header.components.AddGroup": "治療群を追加すること",
+        "nf-canvas-header.components.AddButton": "加えます",
+        "nf-canvas-header.components.CancelButton": "キャンセル",
+        "nf-canvas-utils.Header1": "治療群",
+        "nf-canvas-utils.Message7": "コンポーネントグループは、トップレベルでした",
+        "nf-canvas.ClusterConn": "クラスタ接続",
+        "nf-canvas.Message2": "このノードは、現在クラスタに接続されていません。ここでは、データストリームの任意の変更は、クラスタ内で複製されません。",
+        "nf-canvas.Message3": "これはただのクラスタノードに追加しました。ここでは、データストリームの任意の変更がクラスタ内で複製されます。",
+        "nf-component-state.Header1": "コンポーネントステータス",
+        "nf-component-state.Button1": "クローズ",
+        "nf-component-state.Content1": "コンポーネントは状態をクリアする必要はありません。",
+		"nf-component-state.Message1": "コンポーネントが活動を実行していないときは、コンポーネントのステータスはクリアのみ可能",
+		"nf-component-state.Key": "ボンド",
+		"nf-component-state.Value": "値",
+		"nf-component-state.Scope": "スコープ",
+		"nf-connection-configuration.ConnectionConfiguration": "接続形態",
+		"nf-connection-configuration.Message5": "許可されていない任意の出力ポート \\'",
+		"nf-connection.Connection": "接続",
+        "nf-connection.FlowFilesOlder": "ファイルには、流れを超えて",
+		"nf-context-menu.StatsHistory": "履歴状態",
+		"nf-context-menu.ViewState": "ビューステータス",
+		"nf-context-menu.QueueList": "キューリスト",
+		"nf-controller-service.ControllerService": "コントローラのサービス",
+		"nf-controller-service.Message14": "不正なコンポーネントを参照するため、無効にすることはできません。",
+		"nf-controller-service.Message15": "不正なコンポーネントを参照するため、有効にすることはできません。",
+		"nf-controller-service.Save": "保存",
+		"nf-controller-service.Message16": "変更を保存するには、サービスコントローラーに入る前に？",
+        "nf-controller-services.Add": "加えます",
+		"nf-controller-services.ControllerService": "コントローラのサービス",
+		"nf-controller-services.Message14": "あなたが作成するサービスコントローラーのタイプを選択する必要があります。",
+		"nf-controller-services.AddControllerService": "コントローラサービスを追加",
+		"nf-controller-services.Invalid": "失敗します",
+		"nf-controller-services.Disabled": "使用禁止",
+		"nf-controller-services.Disabling": "で無効に",
+		"nf-controller-services.Enabled": "使用可能",
+		"nf-controller-services.Enabling": "で有効に",
+		"nf-controller-services.toolTip": "発表の存在に基づいて並べ替え",
+		"nf-controller-services.Name": "名前",
+		"nf-controller-services.Type": "タイプ",
+		"nf-controller-services.Tags": "ラベル",
+		"nf-controller-services.State": "状態",
+		"nf-controller-services.ProcessGroup": "治療群",
+		"nf-controller-services.type-description": "説明が指定されていません",
+		"nf-controller-services.viewDtails": "詳細を参照してください。",
+		"nf-controller-services.usage": "使用法",
+		"nf-controller-services.disable": "無効にします",
+		"nf-controller-services.edit": "編集",
+		"nf-controller-services.enable": "有効にします",
+		"nf-controller-services.viewstate": "ビューステータス",
+		"nf-controller-services.remove": "削除します",
+		"nf-controller-services.acesspolicies": "アクセスポリシー",
+		"nf-custom-ui.AdvancedConfiguration": "高度な設定",
+		"nf-custom-ui.Message1": "設定ダイアログに高度なアクセスをアクセスするためのアクセストークンを生成することができません。",
+		"nf-draggable.ComponentPosition": "コンポーネント場所",
+		"nf-draggable.Message1": "無許可の変更先グループ。",
+		"nf-draggable.Message2": "各コンポーネントが承認される必要があり、変更を選択します。",
+        "nf-go-to.NoDownstreamComponents": "いいえ下流成分はありません",
+        "nf-go-to.NoUpstreamComponents": "いいえ、上流コンポーネントはありません",
+        "nf-go-to.Funnel": "漏斗",
+        "nf-label-configuration.ConfigureLabel": "[設定]タブ",
+		"nf-label-configuration.Apply": "アプリケーション",
+		"nf-label-configuration.Cancel": "キャンセル",
+		"nf-policy-management.ViewUserInterface": "ビューのユーザーインターフェイス",
+		"nf-policy-management.AcessController": "アクセスコントローラ",
+		"nf-policy-management.QueryProvenance": "発見源",
+		"nf-policy-management.AcessPolicies": "すべてのポリシーにアクセス",
+		"nf-policy-management.AcessUser": "アクセスユーザー/ユーザーグループ",
+		"nf-policy-management.retrieve": "詳しくは、情報検索サイト間",
+		"nf-policy-management.diagnostics": "ビューシステム解析",
+		"nf-policy-management.proxy": "プロキシユーザ要求",
+		"nf-policy-management.counters": "アクセスカウンター",
+		"nf-policy-management.ViewComponent": "ビューコンポーネント",
+		"nf-policy-management.ModifyComponent": "コンポーネントを変更",
+		"nf-policy-management.ViewData": "データを表示",
+		"nf-policy-management.ModifyData": "データを変更します",
+		"nf-policy-management.ReceiveData": "サイトにサイトを介してデータを受け取ります",
+		"nf-policy-management.SendData": "データを送信することによって、サイトへのサイト",
+		"nf-policy-management.ViewPolicies": "ビュー・ポリシー",
+		"nf-policy-management.ModifyPolicies": "ポリシーを変更",
+		"nf-policy-management.Searchusers": "検索ユーザー",
+		"nf-policy-management.Ok": "決定します",
+		"nf-policy-management.UserSearch": "ユーザーの検索します",
+		"nf-policy-management.Message1": "一致するユーザーません\\'",
+		"nf-policy-management.Message2": "複数のユーザーが一致します\\'",
+		"nf-policy-management.Cancel": "キャンセル",
+		"nf-policy-management.UpdatePolicy": "ポリシーを更新",
+		"nf-policy-management.Message3": "削除\\'",
+		"nf-policy-management.Message4": "\\'この戦略から？",
+		"nf-policy-management.Message5": "実際にこの戦略を削除したいですか？",
+		"nf-policy-management.Message6": "いいえ選択ポリシーはありません",
+		"nf-policy-management.Message7": "これにより、ユーザーはユーザーインターフェイスを表示することができ",
+		"nf-policy-management.Message8": "これにより、ユーザーは、クラスタ・レポート作成作業を含む/編集コントローラ、およびノードコントローラサービスを表示することができます",
+		"nf-policy-management.Message9": "ソースとユーザーがイベントを継承した検索要求を提出することができます",
+		"nf-policy-management.Message10": "ユーザーが表示することができます/すべてのコンポーネントのポリシーを変更",
+		"nf-policy-management.Message11": "これにより、ユーザーはユーザーグループを変更/表示することができます",
+		"nf-policy-management.Message12": "許可する他のデータを詳細にインスタンスが「サイトへのサイト」は、このデータストリームを取得するストリーム",
+		"nf-policy-management.Message13": "これにより、ユーザーは、システムの分析を表示することができます",
+		"nf-policy-management.Message14": "エージェントコンピュータが他人に代わって要求を送信する許可",
+		"nf-policy-management.Message15": "これにより、ユーザーは/編集カウンタを表示することができます",
+		"nf-policy-management.Message16": "ユーザーがコンポーネントの構成情報の詳細を表示することができます",
+		"nf-policy-management.Message17": "これは、ユーザがコンポーネントの設定情報の詳細を変更することができ",
+		"nf-policy-management.Message18": "これは、データソースとストリームファイルキュー内のアウトバウンド接続に、ユーザーがこのコンポーネントのメタデータとコンテンツを表示することができます",
+		"nf-policy-management.Message19": "これは、ユーザーがストリームファイルキューのアウトバウンド接続をクリアし、リプレイを提出することができます",
+		"nf-policy-management.Message20": "このポートは、データ・ストリーム・インスタンスからのデータを受信することを可能にします",
+		"nf-policy-management.Message21": "このポートは、データ・ストリーム・インスタンスにデータを送信することを可能にします",
+		"nf-policy-management.Message22": "これは、このコンポーネントのユーザーの見ることができます/編集するには、リストのユーザーが表示することができます",
+		"nf-policy-management.Message23": "ユーザーが表示することができます変更することができます/このコンポーネントのユーザーのリストを編集",
+		"nf-policy-management.Text1": "ディスプレイは、効果的な戦略を継承します",
+		"nf-policy-management.Text2": "いいえコンポーネント固有の管理者はありません。",
+		"nf-policy-management.Text3": "指定されたリソースポリシーへの不正なアクセス。",
+		"nf-policy-management.Text4": "ポリシーを表示する権限がありません。",
+		"nf-policy-management.Text5": "いいえ指定されたリソースポリシーはありません。",
+		"nf-policy-management.Text6": "指定されたリソースポリシーへの不正なアクセス。",
+		"nf-policy-management.Write": "書きます",
+		"nf-policy-management.Read": "読みます",
+		"nf-policy-management.View": "ビュー",
+		"nf-policy-management.Modify": "修正します",
+		"nf-policy-management.AllPolicies": "すべてのポリシー",
+		"nf-policy-management.Controller": "このコントローラ",
+		"nf-policy-management.ProcessorGroup": "治療群",
+		"nf-policy-management.reporting-tasks": "タスクを報告",
+		"nf-policy-management.NoUserSearch": "一致するユーザーません",
+		"nf-policy-management.Remove": "削除します",
+        "nf-process-group-configuration.General": "一般的な",
+        "nf-process-group-configuration.ControllerService": "コントローラのサービス",
+		"nf-processor-configuration.Error1": "同時タスクは整数値でなければなりません",
+		"nf-processor-configuration.Error2": "あなたは、事業計画を指定する必要があります。",
+		"nf-processor-configuration.Error3": "あなたは罰の期間を指定する必要があります",
+		"nf-processor-configuration.Error4": "あなたは、生産の継続時間を指定する必要があります",
+        "nf-processor-configuration.ThisProcessorHasNoRelationships": "このプロセッサは、重要ではありません。",
+        "nf-processor-configuration.ViewDetails": "詳細を参照してください。",
+        "nf-processor-configuration.Provenance": "ソース",
+        "nf-processor.5min-1": "5分",
+        "nf-queue-listing.QueueListing": "キューリスト",
+		"nf-queue-listing.Message1": "ダウンロード可能なコンテンツのアクセストークンを生成することができません。",
+		"nf-queue-listing.Message2": "アクセストークンを表示するためのコンテンツを生成することができません。",
+		"nf-queue-listing.Stop": "停止",
+		"nf-queue-listing.Message3": "キューは、ファイルをストリーミングしません.",
+		"nf-queue-listing.FlowFile": "ストリーム・ファイル",
+		"nf-queue-listing.Ok": "決定します",
+		"nf-queue-listing.Message4": "このキューのソースとターゲットは、現在実行されています。このリストは、もはや正確ではないかもしれません。",
+		"nf-queue-listing.Message5": "現在実行されているこのキューのソースは。このリストは、もはや正確ではないかもしれません。",
+		"nf-queue-listing.Message6": "このキューの目標は、この一覧は、もはや正確なものとすることができる。実行されていません。",
+		"nf-queue-listing.NoValueSet": "値が設定されていません",
+		"nf-queue-listing.Yes": "それは",
+		"nf-queue-listing.No": "いいえ",
+		"nf-queue-listing.Position": "場所",
+		"nf-queue-listing.FileName": "ファイル名",
+		"nf-queue-listing.FileSize": "ファイルサイズ",
+		"nf-queue-listing.queuedDuration": "待ち行列の長さ",
+		"nf-queue-listing.lineageDuration": "継承タイム",
+		"nf-queue-listing.penalized": "罰します",
+		"nf-queue-listing.node": "ノード",
+		"nf-queue-listing.Bytes": " バイト",
+		"nf-remote-process-group-configuration.Message5": "リモートプロセスグループの設定",
+		"nf-remote-process-group-ports.Message3": "このポートは削除されました。",
+		"nf-remote-process-group-ports.Message4": "同時タスクの数は、このポートのために計画する必要があります。",
+		"nf-remote-process-group-ports.transmissionSwitch": "スイッチポートの送信",
+		"nf-remote-process-group-ports.description": "指示に指定されていません。",
+        "nf-reporting-task.ReportingTask": "タスクを報告",
+		"nf-reporting-task.Save": "保存",
+		"nf-reporting-task.Ok": "決定します",
+        "nf-settings.ViewState": "ビューステータス",
+        "nf-settings.AccessPolicies": "アクセスポリシー",
+        "nf-settings.Invalid": "無効",
+        "nf-settings.Stopped": "停止",
+        "nf-settings.Running": "操作",
+        "nf-settings.Disabled": "無効にします",
+        "nf-cluster-table.None": "いいえ",
+        "nf-counters-table.Delete": "削除",
+        "nf-counters-table.Connect": "接続",
+        "nf-history.History": "歴史",
+		"nf-history-table.Message5": "IDベースのフィルタ修正コンポーネント",
+		"nf-history-table.Message6": "ユーザーのフィルタに基づいてアクションを実行",
+		"nf-history-table.NotAuthorized": "権限がありません",
+		"nf-history-table.Uri": "統一資源識別子",
+		"nf-history-table.EndTime": "終了時間",
+		"nf-login.Login": "ログイン",
+		"nf-login.Logining": "にログインしています...",
+		"nf-login.SUCCESS": "サクセス",
+		"nf-login.Denied": "ログインは拒否されました",
+		"nf-login.Message1": "サインインできません。",
+		"nf-login.Message2": "あなたがアクセス状態を確認することはできません",
+		"nf-login.Message3": "現在のデータ・ストリームは、ユーザー名/パスワードが設定されていません。",
+		"nf-common.History": "歴史",
+		"nf-common.SupportsExpressionLanguage": "式言語のサポート：",
+		"nf-common.Message23": "アプリケーションが実行されていることを確認し、ログにエラーがないかどうか確認してください。",
+		"nf-common.Message24": "データストリームと通信できません。",
+		"nf-common.Unauthorized": "権限がありません",
+		"nf-common.Message25": "このデータストリームを使用して認証を必要とします。",
+		"nf-common.Message26": "予期しないエラーが発生しました",
+		"nf-common.Error": "エラー",
+        "nf-common.Message27": "空の文字列を設定する前に",
+        "nf-common.Message28": "値は、前に設定されていません",
+        "nf-common.Bytes": " バイト",
+		"nf-connection-details.Processor": "プロセッサ",
+        "nf-connection-details.FromFunnel": "ホッパーから",
+        "nf-connection-details.NoValueSet": "決定します",
+		"nf-processor-details.Error": "エラー",
+		"nf-processor-details.ThisProcessorHasNoRelationships": "プロセッサは問題ではありません。",
+		"nf-status-history.Close": "クローズ",
+		"nf-status-history.Start": "始めます",
+		"nf-status-history.End": "終了",
+		"nf-status-history.Min_Max_Mean": "最低/最大/平均",
+		"nf-status-history.NiFi": "データ流",
+		"nf-provenance-lineage.Lineage Results": "血統結果",
+		"nf-provenance-lineage.Process Lineage": "連続プロセス",
+        "nf-provenance-table.InputClaim": "入力ステートメント",
+		"nf-provenance-table.Provenance": "ソース",
+		"nf-provenance-table.Message7": "アクセストークンを表示するためのコンテンツを生成することができません。",
+		"nf-provenance-table.Message8": "ダウンロード可能なコンテンツのアクセストークンを生成することができません。",
+		"nf-provenance-table.Message9": "いいえ値は以前に設定されていません",
+		"nf-provenance-table.Message10": "原因イベントを検索...",
+		"nf-provenance-table.Process": "進捗",
+		"nf-provenance-table.NoChildren": "子供なし",
+		"nf-provenance-table.NoParent": "いいえ両親はありません",
+		"nf-provenance-table.Bytes": " バイト",
+		"nf-cluster-search.Summary": "サマリー",
+		"nf-cluster-search.ClusterSearch": "クラスタ検索",
+        "nf-cluster-search.Message3": "検索用語に一致するノードなし",
+		"nf-summary-table.Message4": "アナウンスを選別の存在に基づいて",
+		"nf-summary-table.times": "回数",
+		"nf-summary-table.UsageFor": "使用法",
+		"nf-summary-table.GoToProcessor": "ステアリングプロセッサ",
+		"nf-summary-table.ViewStatus": "ビューステートの歴史",
+		"nf-summary-table.ViewProcessor": "ビュープロセッサの詳細",
+		"nf-summary-table.ViewConnect": "ビューの接続の詳細",
+		"nf-summary-table.GoToConnect": "ステアリング接続",
+		"nf-summary-table.GoToProcessorGroup": "ステアリングトリートメント",
+		"nf-summary-table.ViewProcessorGroup": "ビューは、詳細を扱わ",
+		"nf-summary-table.GoToInputPort": "ステアリング入力ポート",
+		"nf-summary-table.ViewInputPort": "入力ポートの詳細を見ます",
+		"nf-summary-table.GoToOutputPort": "ステアリング出力ポート",
+		"nf-summary-table.ViewOutputPort": "詳しくは、出力ポートを表示します",
+		"nf-summary-table.ViewRemoteProcessorGroup": "グループの詳細をリモーティングを参照してください。",
+		"nf-summary-table.aria1": "店が使用するデータ・フロー・リポジトリ",
+        "nf-summary.Summary": "サマリー",
+		"nf-templates-table.DeleteTemplate": "テンプレートを削除します",
+		"nf-templates-table.DownloadTemplate": "テンプレートのダウンロード",
+		"nf-templates-table.Message2": "ダウンロード可能なコンテンツのアクセストークンを生成することができません。",
+        "nf-templates-table.GroupId": "プロセスグループID",
+        "nf-templates-table.Download": "ダウンロード",
+        "nf-templates-table.AccessPolicies": "アクセスポリシー",
+        "nf-templates.Templates": "テンプレート",
+        "nf-users.Users": "ユーザー",
+		"nf-users-table.UserGroup": "ユーザ/グループ",
+		"nf-users-table.Edit": "編集",
+		"nf-users-table.Remove": "削除します",
+        "jquery-propertytable.Delete": "削除",
+        "jquery-propertytable.GoTo": "行きます",
+        "jquery-propertytable.SetEmptyString": "空の文字列を設定します",
+        "jquery-propertytable.AddControllerService": "コントローラサービスを追加",
+        "jquery-propertytable.AddProperty": "プロパティの追加",
+        "jquery-propertytable.PropertyExists": "プロパティが存在します",
+        "jquery-propertytable.Message0": "この名前のプロパティが既に存在しています。",
+        "jquery-propertytable.Message3": "新しいサービスを作成します...",
+        "slick.editors.Message1": "有効な整数を入力してください",
+        "slick.editors.Message2": "有効な正の数を入力してください。",
+        "slick.grid.Message1": "Slickgridは、有効なコンテナを必要とし、",
+        "slick.grid.Message2": "これは、DOMに存在しません",
+        "slick.grid.Message3": "スタイルシートを見つけることができません。",
+        "slick.grid.Message4": "細胞CSSスタイルを追加します：細胞CSSのハッシュキー'",
+        "slick.grid.Message5": "'すでに存在しています。",
+        "slick.grid.Message6": "ノードから取得部：ユニットを取得できません -",
+        "slick.grid.Message7": "Grid : アクティブセルが編集可能になります : options.editableへfalse時,あなたが呼ばれることはありません",
+        "slick.grid.Message8": "選択モデルが設定されていません",
+        "jquery-tagcloud.NoTagsSpecified": "タグ指定なし"
+    };
+    var en = {
+        "nf-about": "NiFi Flow",
+        "nf-bulletin-board.defaultFilterText": "Filter",
+        "nf-bulletin-board.ByMessage": "by message",
+        "nf-bulletin-board.ByName": "by name",
+        "nf-bulletin-board.ById": "by id",
+        "nf-bulletin-board.ByGroupId": "by group id",
+        "nf-bulletin-board.Message1": "Filter ",
+        "nf-bulletin-board.Message2": " matching \\\\'",
+        "nf-bulletin-board.Message3": "Auto refresh started",
+        "nf-bulletin-board.Message4": "Auto refresh stopped",
+        "nf-bulletin-board.BulletinBoard": " Bulletin Board",
+        "nf-actions.NoTargetURIDefined": "No target URI defined.",
+        "nf-actions.Message1": "No eligible components are selected. Please select the components to be enabled and ensure they are no longer running.",
+        "nf-actions.Message2": "No eligible components are selected. Please select the components to be disabled and ensure they are no longer running.",
+        "nf-actions.Message3": "No eligible components are selected. Please select the components to be started and ensure they are no longer running.",
+        "nf-actions.Message4": "No eligible components are selected. Please select the components to be stopped.",
+        "nf-actions.Message5": "No eligible components are selected. Please select the components to be deleted.",
+        "nf-actions.EmptyQueue": "Empty Queue",
+        "nf-actions.Message6": "Are you sure you want to empty this queue? All FlowFiles waiting at the time of the request will be removed.",
+        "nf-actions.Cancel": "Cancel",
+        "nf-actions.Empty": "Empty",
+        "nf-actions.Stop": "Stop",
+        "nf-actions.Message7": " were removed from the queue.",
+        "nf-actions.Message8": "No FlowFiles were removed.",
+        "nf-actions.Message9": "The current selection is not valid to create a template.",
+        "nf-actions.Create": "Create",
+        "nf-actions.Template": "Template '",
+        "nf-actions.Message11": "' was successfully created.",
+        "nf-actions.Message12": "An error occurred while attempting to copy and paste.",
+        "nf-canvas-toobbar.Start": "Start",
+        "nf-canvas-toobbar.Stop": "Stop",
+        "nf-canvas-toobbar.Copy": "Copy",
+        "nf-canvas-toobbar.Paste": "Paste",
+        "nf-canvas-toobbar.Group": "Group",
+        "nf-canvas-toobbar.Enable": "Enable",
+        "nf-canvas-toobbar.Disable": "Disable",
+        "nf-canvas-toobbar.CreateTemplate": "Create Template",
+        "nf-canvas-toobbar.ChangeColor": "Change Color",
+        "nf-canvas-toobbar.Delete": "Delete",
+        "nf-canvas-header.OK": "Ok",
+        "nf-canvas-header.CreateTemplate": "Create Template",
+        "nf-canvas-header.Fill": "Fill",
+        "nf-canvas-header.Apply": "Apply",
+        "nf-canvas-header.Cancel": "Cancel",
+        "nf-canvas-header.Message": "Unable to refresh the current group.",
+        "nf-canvas-toolbox.Input": "Input",
+        "nf-canvas-toolbox.OutPut": "Output",
+        "nf-canvas-toolbox.Filter": "Filter",
+        "nf-canvas-toolbox.Processor": "Processor",
+        "nf-canvas-toolbox.InputPort": "Input Port",
+        "nf-canvas-toolbox.OutputPort": "Output Port",
+        "nf-canvas-toolbox.ProcessGroup": "Process Group",
+        "nf-canvas-toolbox.RemoteProcessGroup": "Remote Process Group",
+        "nf-canvas-toolbox.Connection": "Connection",
+        "nf-canvas-toolbox.Funnel": "Funnel",
+        "nf-canvas-toolbox.Template": "Template",
+        "nf-canvas-toolbox.Label": "Label",
+        "nf-canvas-toolbox.Add": "Add",
+        "nf-canvas-toolbox.Cancel": "Cancel",
+        "nf-canvas-toolbox.Instantiate Template": "Instantiate Template",
+        "nf-canvas-toolbox.Message": "No templates have been loaded into this NiFi.",
+        "nf-canvas-toolbox.Type": "Type",
+        "nf-canvas-toolbox.Tags": "Tags",
+        "nf-canvas-toolbox.Message1": "No description specified",
+        "nf-canvas-toolbox.AddProcessor": "Add Processor",
+        "nf-canvas-toolbox.AddPort": "Add Port",
+        "nf-canvas-toolbox.AddProcessGroup": "Add Process Group",
+        "nf-canvas-toolbox.AddRemoteProcessGroup": "Add Remote Process Group",
+        "nf-canvas-utils.Message1": "Unable to load the group for the specified component.",
+        "nf-canvas-utils.Message2": "Unable to find the specified component.",
+        "nf-canvas-utils.Message3": "Unable to enter the selected group.",
+        "nf-canvas-utils.Message4": "Cannot move Ports out of the root group",
+        "nf-canvas-utils.Message5": "The following ports are currently connected outside of this group: <b>",
+        "nf-canvas-utils.Message6": "The following ports already exist in the target process group: <b>",
+        "nf-canvas.Browser": "Unsupported Browser",
+        "nf-canvas.Message1": "Flow graphs are shown using SVG. Please use a browser that supports rendering SVG.",
+        "nf-connection-configuration.Add": "Add",
+        "nf-connection-configuration.Message0": "The connection must have at least one relationship selected.",
+        "nf-connection-configuration.Cancel": "Cancel",
+        "nf-connection-configuration.Message1": "\\' does not support any relationships.",
+        "nf-connection-configuration.Message2": "\\' does not have any output ports.",
+        "nf-connection-configuration.Message4": "\\' does not have any input ports.",
+        "nf-connection-configuration.Message6": "Configuration Error",
+        "nf-connection-configuration.ConfigureConnection": "Configure Connection",
+        "nf-connection-configuration.Detail": "Details",
+        "nf-connection-configuration.Setting": "Settings",
+        "nf-connection-configuration.CreateConnection": "Create Connection",
+        "nf-connection-configuration.Apply": "Apply",
+        "nf-connection-configuration.Message7": "The connection must have at least one relationship selected.",
+        "nf-connection-configuration.Message8": "Configure Connection",
+        "nf-connection.Message1": "Looping connections must have at least two bend points.",
+        "nf-connection.From": "From",
+        "nf-connection.To": "To",
+        "nf-connection.Name": "Name",
+        "nf-connection.Queued": "Queued",
+        "nf-context-menu.RefreshStatus": "Refresh status",
+        "nf-context-menu.LeaveGroup": "Leave group",
+        "nf-context-menu.Configure": "Configure",
+        "nf-context-menu.ViewConfiguration": "View configuration",
+        "nf-context-menu.EnterGroup": "Enter group",
+        "nf-context-menu.Start": "Start",
+        "nf-context-menu.Stop": "Stop",
+        "nf-context-menu.RemotePorts": "Remote ports",
+        "nf-context-menu.EnableTransmission": "Enable transmission",
+        "nf-context-menu.DisableTransmission": "Disable transmission",
+        "nf-context-menu.Stats": "Stats",
+        "nf-context-menu.DataProvenance": "Data provenance",
+        "nf-context-menu.BringFront": "Bring to front",
+        "nf-context-menu.GoToSource": "Go to source",
+        "nf-context-menu.GoToDestination": "Go to destination",
+        "nf-context-menu.UpstreamConnections": "Upstream connections",
+        "nf-context-menu.DownstreamConnections": "Downstream connections",
+        "nf-context-menu.Usage": "Usage",
+        "nf-context-menu.Refresh": "Refresh",
+        "nf-context-menu.GoTo": "Go to",
+        "nf-context-menu.ChangeColor": "Change color",
+        "nf-context-menu.CenterInView": "Center in view",
+        "nf-context-menu.Copy": "Copy",
+        "nf-context-menu.Paste": "Paste",
+        "nf-context-menu.MoveParentGroup": "Move to parent group",
+        "nf-context-menu.EmptyQueue": "Empty queue",
+        "nf-context-menu.Delete": "Delete",
+        "nf-controller-service.ConfigurationError": "Configuration Error",
+        "nf-controller-service.Cancel": "Cancel",
+        "nf-controller-service.Close": "Close",
+        "nf-controller-service.Message1": "Steps to disable",
+        "nf-controller-service.ActionCanceled": "Action Canceled",
+        "nf-controller-service.Message2": "The request to disable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
+        "nf-controller-service.Message3": "Steps to enable ",
+        "nf-controller-service.Message4": "Action Canceled",
+        "nf-controller-service.Message5": "The request to enable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.",
+        "nf-controller-service.Message6": "Save changes before going to this Controller Service?",
+        "nf-controller-service.Settings": "Settings",
+        "nf-controller-service.Properties": "Properties",
+        "nf-controller-service.Comments": "Comments",
+        "nf-controller-service.Message7": "Configure Controller Service",
+        "nf-controller-service.Message8": "Disable Controller Service",
+        "nf-controller-service.Disable": "Disable",
+        "nf-controller-service.ServiceOnle": "Service only",
+        "nf-controller-service.Message9": "Enable only this controller service",
+        "nf-controller-service.Message10": "Service and referencing components",
+        "nf-controller-service.Message11": "Enable this controller service and enable/start all referencing components",
+        "nf-controller-service.Message12": "Enable Controller Service",
+        "nf-controller-service.Enable": "Enable",
+        "nf-controller-service.Apply": "Apply",
+        "nf-controller-service.Advanced": "Advanced",
+        "nf-controller-service.Message13": "Save changes before opening the advanced configuration?",
+        "nf-controller-service.Ok": "Ok",
+        "nf-go-to.Close": "Close",
+        "nf-go-to.DownstreamConnections": "Downstream Connections",
+        "nf-go-to.UpstreamConnections": "Upstream Connections",
+        "nf-go-to.Message1": "No upstream components",
+        "nf-go-to.Message2": "No downstream components",
+        "nf-port-configuration.ConfigurePort": "Configure Port",
+        "nf-port-configuration.Apply": "Apply",
+        "nf-port-configuration.ConfigurationError": "Configuration Error",
+        "nf-port-configuration.Cancel": "Cancel",
+        "nf-port-details.PortDetails": "Port Details",
+        "nf-port-details.OK": "Ok",
+        "nf-process-group-configuration.ConfigureProcessGroup": "Configure Process Group",
+        "nf-process-group-configuration.Apply": "Apply",
+        "nf-process-group-configuration.Cancel": "Cancel",
+        "nf-process-group-details.ProcessGroupDetails": "Process Group Details",
+        "nf-process-group-details.Ok": "Ok",
+        "nf-process-group.Message1": "No comments specified",
+        "nf-process-group.Queued": "Queued",
+        "nf-process-group.In": "In",
+        "nf-process-group.ReadWrite": "Read/Write",
+        "nf-process-group.Out": "Out",
+        "nf-process-group.5min": "(5 min)",
+        "nf-processor-configuration.TimerDriven": "Timer driven",
+        "nf-processor-configuration.Message1": "Processor will be scheduled to run on an interval defined by the run schedule.",
+        "nf-processor-configuration.EventDriven": "Event driven",
+        "nf-processor-configuration.Message2": "Processor will be scheduled to run when triggered by an event (e.g. a FlowFile enters an incoming queue). This scheduling strategy is experimental.",
+        "nf-processor-configuration.OnPrimaryNode": "On primary node",
+        "nf-processor-configuration.Message3": "Processor will be scheduled on the primary node on an interval defined by the run schedule.", "nf-processor-configuration.CronDriven": "CRON driven",
+        "nf-processor-configuration.Message5": "Processor will be scheduled to run on at specific times based on the specified CRON string.",
+        "nf-processor-configuration.ConfigurationError": "Configuration Error",
+        "nf-processor-configuration.Message6": "Save changes before going to this Controller Service?",
+        "nf-processor-configuration.Settings": "Settings",
+        "nf-processor-configuration.Scheduling": "Scheduling",
+        "nf-processor-configuration.Properties": "Properties",
+        "nf-processor-configuration.Comments": "Comments",
+        "nf-processor-configuration.ConfigureProcessor": "Configure Processor",
+        "nf-processor-configuration.Debug": "DEBUG",
+        "nf-processor-configuration.Info": "INFO",
+        "nf-processor-configuration.Warn": "WARN",
+        "nf-processor-configuration.Error": "ERROR",
+        "nf-processor-configuration.Apply": "Apply",
+        "nf-processor-configuration.Cancel": "Cancel",
+        "nf-processor-configuration.Advanced": "Advanced",
+        "nf-processor-configuration.Message7": "Save changes before opening the advanced configuration?",
+        "nf-processor.In": "In",
+        "nf-processor.ReadWrite": "Read/Write",
+        "nf-processor.Out": "Out",
+        "nf-processor.TasksTime": "Tasks/Time",
+        "nf-processor.5min": "(5 min)",
+        "nf-registration.Thanks": "Thanks",
+        "nf-registration.Message1": "Your request will be processed shortly.",
+        "nf-remote-process-group-configuration.ConfigureRemoteProcessGroup": "Configure Remote Process Group",
+        "nf-remote-process-group-configuration.Apply": "Apply",
+        "nf-remote-process-group-configuration.ConfigurationError": "Configuration Error",
+        "nf-remote-process-group-configuration.Cancel": "Cancel",
+        "nf-remote-process-group-details.RemoteProcessGroupDetails": "Remote Process Group Details",
+        "nf-remote-process-group-details.Ok": "Ok",
+        "nf-remote-process-group-ports.ConfigureRemotePort": "Configure Remote Port",
+        "nf-remote-process-group-ports.Apply": "Apply",
+        "nf-remote-process-group-ports.ConfigurationError": "Configuration Error",
+        "nf-remote-process-group-ports.Message1": "Concurrent tasks must be an integer value.",
+        "nf-remote-process-group-ports.Cancel": "Cancel",
+        "nf-remote-process-group-ports.RemoteProcessGroupPorts": "Remote Process Group Ports",
+        "nf-remote-process-group-ports.Close": "Close",
+        "nf-remote-process-group-ports.Message2": "No description specified.",
+        "nf-remote-process-group.Message1": "No comments specified",
+        "nf-remote-process-group.Sent": "Sent",
+        "nf-remote-process-group.Received": "Received",
+        "nf-remote-process-group.5min": "(5 min)",
+        "nf-remote-process-group.Message2": "Site-to-Site is secure.",
+        "nf-remote-process-group.Message3": "Site-to-Site is NOT secure.",
+        "nf-remote-process-group.Message4": "Remote flow not current",
+        "nf-reporting-task.ConfigurationError": "Configuration Error",
+        "nf-reporting-task.Message1": "Save changes before going to this Controller Service?",
+        "nf-reporting-task.Settings": "Settings",
+        "nf-reporting-task.Properties": "Properties",
+        "nf-reporting-task.Comments": "Comments",
+        "nf-reporting-task.ConfigureReportingTask": "Configure Reporting Task",
+        "nf-reporting-task.Node": "Node",
+        "nf-reporting-task.ClusterManager": "Cluster Manager",
+        "nf-reporting-task.TimerDriven": "Timer driven",
+        "nf-reporting-task.Message2": "Reporting task will be scheduled to run on an interval defined by the run schedule.",
+        "nf-reporting-task.CRONDriven": "CRON driven",
+        "nf-reporting-task.Message3": "Reporting task will be scheduled to run on at specific times based on the specified CRON string.",
+        "nf-reporting-task.Apply": "Apply",
+        "nf-reporting-task.Cancel": "Cancel",
+        "nf-reporting-task.Advanced": "Advanced",
+        "nf-reporting-task.Message4": "Save changes before opening the advanced configuration?",
+        "nf-search.Search": "Search",
+        "nf-secure-port-configuration": "Settings",
+        "nf-secure-port-configuration.AccessControl": "Access Control",
+        "nf-secure-port-configuration.ConfigureSecurePort": "Configure Secure Port",
+        "nf-secure-port-configuration.Apply": "Apply",
+        "nf-secure-port-configuration.Cancel": "Cancel",
+        "nf-secure-port-configuration.InputPort": "InputPort",
+        "nf-secure-port-configuration.OutputPort": "OutputPort",
+        "nf-secure-port-details.Settings": "Settings",
+        "nf-secure-port-details.AccessControl": "Access Control",
+        "nf-secure-port-details.SecurePortDetails": "Secure Port Details",
+        "nf-secure-port-details.Ok": "Ok",
+        "nf-settings.Filter": "Filter",
+        "nf-settings.Message1": "A new flow archive was successfully created.",
+        "nf-settings.Message2": "Settings successfully applied.",
+        "nf-settings.Message3": "The type of controller service to create must be selected.",
+        "nf-settings.Text": "Node",
+        "nf-settings.ClusterManager": "Cluster Manager",
+        "nf-settings.Message4": "This controller service will be available on the nodes only.",
+        "nf-settings.Message5": "This controller service will be available on the cluster manager only.",
+        "nf-settings.Message6": "No description specified",
+        "nf-settings.Message7": "Add Controller Service",
+        "nf-settings.Add": "Add",
+        "nf-settings.Cancel": "Cancel",
+        "nf-settings.Node": "Node",
+        "nf-settings": "Cluster Manager",
+        "nf-settings.ViewDetail": "View Details",
+        "nf-settings.Disable": "Disable",
+        "nf-settings.Enable": "Enable",
+        "nf-settings.Remove": "Remove",
+        "nf-settings.Usage": "Usage",
+        "nf-settings.Name": "Name",
+        "nf-settings.State": "State",
+        "nf-settings.Availability": "Availability",
+        "nf-settings.Message8": "This reporting task will be available on the nodes only.",
+        "nf-settings.Message9": "This reporting task will be available on the cluster manager only.",
+        "nf-settings.Type": "Type",
+        "nf-settings.Tags": "Tags",
+        "nf-settings.Message10": "No description specified",
+        "nf-settings.Message11": "Add Reporting Task",
+        "nf-settings.ViewDetails": "View Details",
+        "nf-settings.Stop": "Stop",
+        "nf-settings.Edit": "Edit",
+        "nf-settings.Start": "Start",
+        "nf-settings.RunStatus": "Run Status",
+        "nf-settings.General": "General",
+        "nf-settings.ControllerServices": "Controller Services",
+        "nf-settings.ReportingTasks": "Reporting Tasks",
+        "nf-settings.Message12": "Create a new controller service",
+        "nf-settings.Message13": "Create a new reporting task",
+        "nf-settings.Settings": " Settings",
+        "nf-cluster-table.Filter": "Filter",
+        "nf-cluster-table.Message1": "Connect \\'",
+        "nf-cluster-table.Message2": "\\' to this cluster?",
+        "nf-cluster-table.Message3": "Disconnect \\'",
+        "nf-cluster-table.Message4": "\\' from the cluster?",
+        "nf-cluster-table.Message5": "Remove \\'",
+        "nf-cluster-table.Message6": "\\' from the cluster?",
+        "nf-cluster-table.NodeDetails": "Node Details",
+        "nf-cluster-table.Ok": "Ok",
+        "nf-cluster-table.ByAddress": "by address",
+        "nf-cluster-table.ByStatus": "by status",
+        "nf-cluster-table.ViewDetails": "View Details",
+        "nf-cluster-table.Node Address": "Node Address",
+        "nf-cluster-table.ActiveThreadCount": "Active Thread Count",
+        "nf-cluster-table.Size": "Size",
+        "nf-cluster-table.Queue": "Queue",        
+        "nf-cluster-table.Status": "Status",
+        "nf-cluster-table.Uptime": "Uptime",
+        "nf-cluster-table.LastHeartbeat": "Last Heartbeat",
+        "nf-cluster-table.Connect": "Connect",
+        "nf-cluster-table.Remove": "Remove",
+        "nf-cluster-table.Disconnect": "Disconnect",
+        "nf-cluster-table.MakePrimary": "Make Primary",
+        "nf-counters-table.Filter": "Filter",
+        "nf-counters-table.ByName": "by name",
+        "nf-counters-table.ByContext": "by context",
+        "nf-counters-table.Context": "Context",
+        "nf-counters-table.Name": "Name",
+        "nf-counters-table.Value": "Value",
+        "nf-counters-table.Reset": "Reset",
+        "nf-counters.Counters": " Counters",
+        "nf-history-table.Filter": "Filter",
+        "nf-history-table.ActionDetail": "Action Details",
+        "nf-history-table.Ok": "Ok",
+        "nf-history-table.ById": "by id",
+        "nf-history-table.Message1": "Filters based on the id of the component that was modified",
+        "nf-history-table.ByUser": "by user",
+        "nf-history-table.Message2": "Filters based on the user that performed the action",
+        "nf-history-table.FilterHistory": "Filter History",
+        "nf-history-table.Cancel": "Cancel",
+        "nf-history-table.PurgeHistory": "Purge History",
+        "nf-history-table.Purge": "Purge",
+        "nf-history-table.Message3": "Are you sure you want to delete all history before '",
+        "nf-history-table.Message3.1": "\\'?",
+        "nf-history-table.Message4": "The end date must be specified.",
+        "nf-history-table.ViewDetails": "View Details",
+        "nf-history-table.DateTime": "Date/Time",
+        "nf-history-table.Name": "Name",
+        "nf-history-table.Type": "Type",
+        "nf-history-table.Operation": "Operation",
+        "nf-history-table.User": "User",
+        "nf-history-table.Value": "Value",
+        "nf-history-table.PreviousValue": "Previous Value",
+        "nf-history-table.SourceId": "Source Id",
+        "nf-history-table.SourceName": "Source Name",
+        "nf-history-table.SourceType": "Source Type",
+        "nf-history-table.Relationship": "Relationship(s)",
+        "nf-history-table.DestinationId": "Destination Id",
+        "nf-history-table.DestinationName": "Destination Name",
+        "nf-history-table.DestinationType": "Destination Type",
+        "nf-history-table.Group": "Group",
+        "nf-history-table.GroupId": "GroupId",
+        "nf-history-table.PreviousGroup": "Previous Group",
+        "nf-history-table.PreviousGroupId": "Previous Group Id",
+        "nf-history-table.EndDate": "End Date",
+        "nf-history-table.History": " History",
+        "nf-common.sensitiveText": "Sensitive value set",
+        "nf-common.Message1": "An unexpected error has occurred",
+        "nf-common.Message2": "Please check the logs.",
+        "nf-common.Message3": "Unable to communicate with NiFi",
+        "nf-common.Message4": "Unauthorized",
+        "nf-common.Message5": "Authorization is required to use this NiFi.",
+        "nf-common.Message6": "Forbidden",
+        "nf-common.Message7": "Unable to authorize you to use this NiFi.",
+        "nf-common.Message9": "An error occurred communicating with the application core. Please check the logs and fix any configuration issues before restarting.",
+        "nf-common.ParseError": "Parse Error",
+        "nf-common.Message10": "Unable to interpret response from NiFi.",
+        "nf-common.Message11": ": Unexpected Response",
+        "nf-common.Message12": "An unexpected error has occurred. Please check the logs.",
+        "nf-common.Message13": "No value set",
+        "nf-common.Message14": "Empty string set",
+        "nf-common.Message15": "Your session will expire soon. Please log in again to avoid being automatically logged out.",
+        "nf-common.Message16": "You are accessing with limited authority. Log in or request an account to access with additional authority granted to you by an administrator.",
+        "nf-common.Message17": "Your session has expired. Please reload to log in again.",
+        "nf-common.Message18": "Your session has expired. Please press Ok to log in again.",
+        "nf-common.Message19": "Please ensure the application is running and check the logs for any errors.",
+        "nf-common.Message20": "Request has timed out. Please ensure the application is running and check the logs for any errors.",
+        "nf-common.Message21": "Request has been aborted.",
+        "nf-common.Message22": "Request transport mechanism failed. Please ensure the host where the application is running is accessible.",
+        "nf-common.SessionExpired": "Session Expired",
+        "nf-common.AccessDenied": "Access Denied",
+        "nf-common.DefaultValue": "Default value:",
+        "nf-common.SupportsExpressionLanuage":"Supports expression language:",
+        "nf-connection-details.FromProcessor": "From processor",
+        "nf-connection-details.FromOutPut": "From output",
+        "nf-connection-details.FromInput": "From input",
+        "nf-connection-details.ToProcessor": "To processor",
+        "nf-connection-details.ToFunnel": "To funnel",
+        "nf-connection-details.ToInput": "To input",
+        "nf-connection-details.ToOutput": "To output",
+        "nf-connection-details.Details": "Details",
+        "nf-connection-details.Settings": "Settings",
+        "nf-connection-details.ConnectionDetails": "Connection Details",
+        "nf-connection-details.Ok": "Ok",
+        "nf-dialog.Ok": "Ok",
+        "nf-dialog.Yes": "Yes",
+        "nf-dialog.No": "No",
+        "nf-processor-details.Settings": "Settings",
+        "nf-processor-details.Scheduling": "Scheduling",
+        "nf-processor-details.Properties": "Properties",
+        "nf-processor-details.Comments": "Comments",
+        "nf-processor-details.ProcessorDetails": "Processor Details",
+        "nf-processor-details.Ok": "Ok",
+        "nf-processor-details.Advanced": "Advanced",
+        "nf-status-history.StatusHistory":"Status History",
+        "nf-status-history.Processor": "Processor",
+        "nf-status-history.InputPort": "Input Port",
+        "nf-status-history.OutputPort": "Output Port",
+        "nf-status-history.ProcessGroup": "Process Group",
+        "nf-status-history.RemoteProcessGroup": "Remote Process Group",
+        "nf-status-history.Connection": "Connection",
+        "nf-status-history.Funnel": "Funnel",
+        "nf-status-history.Template": "Template",
+        "nf-status-history.Label": "Label",
+        "nf-status-history.Message":"Insufficient history, please try again later.",
+        "nf-provenance.DataProvenance": " Data Provenance",
+        "nf-provenance-lineage.Message1": "Computing FlowFile lineage...",
+        "nf-provenance-lineage.ViewDetails": "View details",
+        "nf-provenance-lineage.Message2": "The lineage search has completed successfully but there no results were found. The events may have aged off.",
+        "nf-provenance-lineage.Find parents": "Find parents",
+        "nf-provenance-lineage.Expand": "Expand",
+        "nf-provenance-lineage.Collapse": "Collapse",
+        "nf-provenance-lineage.Cancel": "Cancel",
+        "nf-provenance-table.Filter": "Filter",
+        "nf-provenance-table.Message": "Showing the most recent ",
+        "nf-provenance-table.Of": " of ",
+        "nf-provenance-table.Events": "events.",
+        "nf-provenance-table.Message4": " events, please refine the search.",
+        "nf-provenance-table.Showing": "Showing ",
+        "nf-provenance-table.Message5": " events that match the specified query, please refine the search.",
+        "nf-provenance-table.Message6": "the events that match the specified query.",
+        "nf-provenance-table.Details": "Details",
+        "nf-provenance-table.Attributes": "Attributes",
+        "nf-provenance-table.Content": "Content",
+        "nf-provenance-table.ProvenanceEvent": "Provenance Event",
+        "nf-provenance-table.Ok": "Ok",
+        "nf-provenance-table.Message1": "Successfully submitted replay request.",
+        "nf-provenance-table.Message2": "Search Events",
+        "nf-provenance-table.Search": "Search",
+        "nf-provenance-table.Message3": "Searching provenance events...",
+        "nf-provenance-table.ByComponentName": "by component name",
+        "nf-provenance-table.ByComponentType": "by component type",
+        "nf-provenance-table.ByType": "by type",
+        "nf-provenance-table.ByNode": "by node",
+        "nf-provenance-table.Cluster": "cluster",
+        "nf-provenance-table.ViewDetail": "View Details",
+        "nf-provenance-table.ShowLineage": "Show Lineage",
+        "nf-provenance-table.GoTo": "Go To",
+        "nf-provenance-table.DateTime": "Date/Time",
+        "nf-provenance-table.Type": "Type",
+        "nf-provenance-table.FlowFileUuid": "FlowFile Uuid",
+        "nf-provenance-table.Size": "Size",
+        "nf-provenance-table.ComponentName": "Component Name",
+        "nf-provenance-table.ComponentType": "Component Type",
+        "nf-provenance-table.Node": "Node",
+        "nf-provenance-table.Cancel": "Cancel",
+        "nf-provenance-table.NoValueSet": "No value set",
+        "nf-provenance-table.Claim": "Claim",
+        "nf-provenance-table.InputClain": "Input Claim",
+        "nf-cluster-search.SelectNode": "Select node",
+        "nf-cluster-search.Ok": "Ok",
+        "nf-cluster-search.Message1": "No nodes match \\'",
+        "nf-cluster-search.Message2": "More than one node matches \\'",
+        "nf-cluster-search.Cancel": "Cancel",
+        "nf-cluster-search.NiFiSumary": "NiFi Summary",
+        "nf-summary-table.Filter": "Filter",
+        "nf-summary-table.Processors": "Processors",
+        "nf-summary-table.Connections": "Connections",
+        "nf-summary-table.InputPorts": "Input Ports",
+        "nf-summary-table.OutputPorts": "Output Ports",
+        "nf-summary-table.RemoteProcessGroups": "Remote Process Groups",
+        "nf-summary-table.ProcessGroups": "Process Groups",
+        "nf-summary-table.ByName": "by name",
+        "nf-summary-table.ByType": "by type",
+        "nf-summary-table.BySource": "by source",
+        "nf-summary-table.ByDestination": "by destination",
+        "nf-summary-table.ByUri": "by uri",
+        "nf-summary-table.ViewDetail": "View Details",
+        "nf-summary-table.SourceName": "Source Name",
+        "nf-summary-table.Name": "Name",
+        "nf-summary-table.RunStatus": "Run Status",
+        "nf-summary-table.In": "In",
+        "nf-summary-table.Size": "Size",
+        "nf-summary-table.Message": "Count / data size in the last 5 min",
+        "nf-summary-table.Read": "Read",
+        "nf-summary-table.Write": "Write",
+        "nf-summary-table.5min": "5 min",
+        "nf-summary-table.Message1": "Data size in the last 5 min",
+        "nf-summary-table.Out": "Out",
+        "nf-summary-table.Tasks": "Tasks",
+        "nf-summary-table.Time": "Time",
+        "nf-summary-table.Message2": "Count / duration in the last 5 min",
+        "nf-summary-table.Type": "Type",
+        "nf-summary-table.GoTo": "Go To",
+        "nf-summary-table.ShowHistory": "Show History",
+        "nf-summary-table.ShowDetail": "Show Details",
+        "nf-summary-table.ClusterProcessorSummary": "Cluster Processor Summary",
+        "nf-summary-table.Node": "Node",
+        "nf-summary-table.Queue": "Queue",
+        "nf-summary-table.SourceName": "SourceName",
+        "nf-summary-table.DestinationName": "Destination Name",
+        "nf-summary-table.ClusterConnectionSummary": "Cluster Connection Summary",
+        "nf-summary-table.Close": "Close",
+        "nf-summary-table.Transferred": "Transferred",
+        "nf-summary-table.Message3": "Count / data size transferred to and from connections in the last 5 min",
+        "nf-summary-table.Sent": "Sent",
+        "nf-summary-table.Received": "Received",
+        "nf-summary-table.ClusterProcessGroupSummary": "Cluster Process Group Summary",
+        "nf-summary-table.ClusterInputPortSummary": "Cluster Input Port Summary",
+        "nf-summary-table.ClusterOutPutPortSummary": "Cluster Output Port Summary",
+        "nf-summary-table.Transmitting": "Transmitting",
+        "nf-summary-table.Target URI": "Target URI",
+        "nf-summary-table.ClusterRemoteProcessGroupSummary": "Cluster Remote Process Group Summary",
+        "nf-summary-table.JVM": "JVM",
+        "nf-summary-table.System": "System",
+        "nf-summary-table.SystemDiagnostics": "System Diagnostics",
+        "nf-summary-table.Summary": " Summary",
+        "nf-templates-table.Templates": " Templates",
+        "nf-templates-table.Message": " Select template to import",
+        "nf-templates-table.Filter": "Filter",
+        "nf-templates-table.Message1": "Delete template \'",
+        "nf-templates-table.ByName": "by name",
+        "nf-templates-table.ByDescription": "by description",
+        "nf-templates-table.RemovieTemplate": "Remove Template",
+        "nf-templates-table.DateTime": "Date/Time",
+        "nf-templates-table.Name": "Name",
+        "nf-templates-table.Description": "Description",
+        "nf-users-table.Users.Title": " Users",
+        "nf-users-table.Filter": "Filter",
+        "nf-users-table.UserDetails": "User Details",
+        "nf-users-table.Ok": "Ok",
+        "nf-users-table.UserRoles": "User Roles",
+        "nf-users-table.Apply": "Apply",
+        "nf-users-table.Cancel": "Cancel",
+        "nf-users-table.GroupRoles": "Group Roles",
+        "nf-users-table.DeleteUser": "Delete User",
+        "nf-users-table.Delete": "Delete",
+        "nf-users-table.RevokeAccess": "Revoke Access",
+        "nf-users-table.Revoke": "Revoke",
+        "nf-users-table.SetUserGroup": "Set Users Group",
+        "nf-users-table.Group": "Group",
+        "nf-users-table.Message": "Group name cannot be blank.",
+        "nf-users-table.ByUser": "by user",
+        "nf-users-table.ByGroup": "by group",
+        "nf-users-table.ByRole": "by role",
+        "nf-users-table.AuthorizationPending": "Authorization Pending",
+        "nf-users-table.AccessRevoked": "Access Revoked",
+        "nf-users-table.NoRolesSet": "No roles set",
+        "nf-users-table.Message1": "Multiple users with different roles",
+        "nf-users-table.Message2": "Multiple users with different status",
+        "nf-users-table.Message3": "No status set",
+        "nf-users-table.EditAccess": "Edit Access",
+        "nf-users-table.RevokeAccess.Ungroup": "Ungroup",
+        "nf-users-table.DeleteAccount": "Delete Account",
+        "nf-users-table.User": "User",
+        "nf-users-table.Roles": "Roles",
+        "nf-users-table.LastAccessed": "Last Accessed",
+        "nf-users-table.Status": "Status",
+        "nf-users-table.GroupUsers": "Group Users",
+        "nf-users-table.Message4": "Select one or more users to group.",
+        "nf-users-table.Message5": "Remove all users from group \\'",
+        "nf-users-table.Message6": "Remove user \\'",
+        "nf-users-table.Message7": "\\' from group \\'",
+        "jquery-propertytable.SensitiveValueSet": "Sensitive value set",
+        "jquery-propertytable.EmptyStringSet": "Empty string set",
+        "jquery-propertytable.NoValueSet": "no value set",
+        "jquery-propertytable.RequiredField": "Required field",
+        "jquery-propertytable.Property": "Property",
+        "jquery-propertytable.Value": "Value",
+        "jquery-propertytable.Ok": "Ok",        
+        "jquery-propertytable.Cancel": "Cancel",   
+        "jquery-propertytable.Empty": "Empty",        
+        "jquery-propertytable.NewProperty": "New property",
+        "jquery-propertytable.ControllerService" : "Controller Service",
+        "jquery-propertytable.Tags" : "Tags",
+        "jquery-propertytable.Create" : "Create",
+        "jquery-propertytable.Description" : "Description",
+        "jquery-propertytable.Message": "A property with this name already exists.",
+        "jquery-propertytable.Message1": "Property name must be specified.",
+        "jquery-propertytable.Message2": "No controller service types found that are applicable for this property."
+    };
+
+    return {
+        msg: function (key) {
+            if (locale === "en") {
+                return en[key];
+            }
+            if ((locale === "cn")) {
+                return cn[key];
+            }
+            if ((locale === "jp")) {
+                return jp[key];
+            }
+        }
+    };
+})();
+
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
new file mode 100644
index 000000000000..43613fd1a30d
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js
@@ -0,0 +1,239 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'Slick',
+                'nf.Common',
+                'nf.ErrorHandler'],
+            function ($, Slick, nfCommon, nfErrorHandler) {
+                return (nf.HistoryModel = factory($, Slick, nfCommon, nfErrorHandler));
+            });
+    } 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, nfCommon, nfErrorHandler) {
+    'use strict';
+
+    // private
+    var PAGESIZE = 50;
+
+    var data = {
+        length: 0
+    };
+
+    var filter = {};
+    var sortcol = null;
+    var sortdir = 1;
+
+    var h_request = null;
+    var xhr = null; // ajax request
+
+    // events
+    var onDataLoading = new Slick.Event();
+    var onDataLoaded = new Slick.Event();
+
+    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'
+            }
+
+            // notify that loading is about to occur
+            onDataLoading.notify({
+                from: from,
+                to: to
+            });
+
+            // perform query...
+            var xhr = $.ajax({
+                type: 'GET',
+                url: '../nifi-api/flow/history',
+                data: query,
+                dataType: 'json'
+            }).done(function (response) {
+                var history = response.history;
+
+                // calculate the indices
+                var from = fromPage * PAGESIZE;
+                var to = from + history.actions.length;
+
+                // update the data length
+                data.length = history.total;
+
+                // 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;
+                }
+
+                // update the stats last refreshed timestamp
+                $('#history-last-refreshed').text(history.lastRefreshed);
+
+                // set the timezone for the start and end time
+                $('.timezone').text(nfCommon.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(nfErrorHandler.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;
+    };
+
+    function HistoryModel() {
+    }
+
+    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
new file mode 100644
index 000000000000..cb7381f2b199
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js
@@ -0,0 +1,552 @@
+    /*
+     * 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 top, define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.ErrorHandler',
+                  'nf.HistoryModel'],
+              function ($, Slick, nfCommon, nfDialog, nfErrorHandler, nfHistoryModel) {
+                  return (nf.HistoryTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler, nfHistoryModel));
+              });
+      } 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, nfCommon, nfDialog, nfErrorHandler, nfHistoryModel) {
+      'use strict';
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            defaultStartTime: '00:00:00',
+            defaultEndTime: '23:59:59',
+            styles: {
+                hidden: 'hidden'
+            },
+            urls: {
+                history: '../nifi-api/controller/history'
+            }
+        };
+    
+        /**
+         * Initializes the details dialog.
+         */
+        var initDetailsDialog = function () {
+            $('#action-details-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+                headerText: nf._.msg('nf-history-table.ActionDetail'),
+                buttons: [{
+                    buttonText: nf._.msg('nf-history-table.Ok'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            $('#action-details-dialog').modal('hide');
+                        }
+                    }
+                }],
+                handler: {
+                    close: function () {
+                        // clear the details
+                        $('#action-details').empty();
+                    }
+                }
+            });
+        };
+    
+        /**
+         * Initializes the filter dialog.
+         */
+        var initFilterDialog = function () {
+            // clear the filter field
+            $('#history-filter').val('');
+    
+            // filter type
+            $('#history-filter-type').combo({
+                options: [{
+                    text: nf._.msg('nf-history-table.ById'),
+                    value: 'by id',
+                    description: nf._.msg('nf-history-table.Message5')
+                }, {
+                    text: nf._.msg('nf-history-table.ByUser'),
+                    value: 'by user',
+                    description: nf._.msg('nf-history-table.Message6')
+                }]
+            });
+    
+            // configure the start and end date picker
+            $('#history-filter-start-date, #history-filter-end-date').datepicker({
+                showAnim: '',
+                showOtherMonths: true,
+                selectOtherMonths: true
+            });
+            $('#history-filter-start-date').datepicker('setDate', '-14d');
+            $('#history-filter-end-date').datepicker('setDate', '+0d');
+    
+            // initialize the start and end time
+            $('#history-filter-start-time').val(config.defaultStartTime);
+            $('#history-filter-end-time').val(config.defaultEndTime);
+    
+            // configure the filter dialog
+            $('#history-filter-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+                headerText: nf._.msg('nf-history-table.FilterHistory'),
+                buttons: [{
+                    buttonText: nf._.msg('nf-history-table.Filter'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            $('#history-filter-dialog').modal('hide');
+    
+                            var filter = {};
+    
+                            // extract the filter text
+                            var filterText = $('#history-filter').val();
+                            if (filterText !== '') {
+                                var filterType = $('#history-filter-type').combo('getSelectedOption').text;
+                                if (filterType === 'by id') {
+                                    filter['sourceId'] = filterText;
+                                } else if (filterType === 'by user') {
+                                    filter['userIdentity'] = filterText;
+                                }
+                            }
+    
+                            // extract the start date time
+                            var startDate = $.trim($('#history-filter-start-date').val());
+                            var startTime = $.trim($('#history-filter-start-time').val());
+                            if (startDate !== '') {
+                                if (startTime === '') {
+                                    startTime = config.defaultStartTime;
+                                    $('#history-filter-start-time').val(startTime);
+                                }
+                                filter['startDate'] = startDate + ' ' + startTime;
+                            }
+    
+                            // extract the end date time
+                            var endDate = $.trim($('#history-filter-end-date').val());
+                            var endTime = $.trim($('#history-filter-end-time').val());
+                            if (endDate !== '') {
+                                if (endTime === '') {
+                                    endTime = config.defaultEndTime;
+                                    $('#history-filter-end-time').val(endTime);
+                                }
+                                filter['endDate'] = endDate + ' ' + endTime;
+                            }
+    
+                            // set the filter
+                            var historyGrid = $('#history-table').data('gridInstance');
+                            var historyModel = historyGrid.getData();
+                            historyModel.setFilterArgs(filter);
+    
+                            // reload the table
+                          nfHistoryTable.loadHistoryTable();
+                        }
+                    }
+                },
+                    {
+                        buttonText: nf._.msg('nf-history-table.Cancel'),
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#history-filter-dialog').modal('hide');
+                            }
+                        }
+                    }]
+            });
+        };
+    
+        /**
+         * Initializes the purge dialog.
+         */
+        var initPurgeDialog = function () {
+            // configure the start and end date picker
+            $('#history-purge-end-date').datepicker({
+                showAnim: '',
+                showOtherMonths: true,
+                selectOtherMonths: true
+            });
+            $('#history-purge-end-date').datepicker('setDate', '-1m');
+    
+            // initialize the start and end time
+            $('#history-purge-end-time').val(config.defaultStartTime);
+    
+            // configure the filter dialog
+            $('#history-purge-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+                headerText: nf._.msg('nf-history-table.PurgeHistory'),
+                buttons: [{
+                    buttonText: nf._.msg('nf-history-table.Purge'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // hide the dialog
+                            $('#history-purge-dialog').modal('hide');
+    
+                            // get the purge end date
+                            var endDate = $.trim($('#history-purge-end-date').val());
+                            var endTime = $.trim($('#history-purge-end-time').val());
+                            if (endDate !== '') {
+                                if (endTime === '') {
+                                    endTime = config.defaultStartTime;
+                                    $('#history-purge-end-time').val(endTime);
+                                }
+                                var endDateTime = endDate + ' ' + endTime;
+                                var timezone = $('.timezone:first').text();
+                              nfDialog.showYesNoDialog({
+                                    headerText: nf._.msg('nf-history-table.History'),
+                                    dialogContent: nf._.msg('nf-history-table.Message3') + nfCommon.escapeHtml(endDateTime) + " " + nfCommon.escapeHtml(timezone) + nf._.msg('nf-history-table.Message3.1'),
+                                    yesHandler: function () {
+                                        purgeHistory(endDateTime);
+                                    }
+                                });
+                            } else {
+                              nfDialog.showOkDialog({
+                                    headerText: nf._.msg('nf-history-table.History'),
+                                    dialogContent: nf._.msg('nf-history-table.Message4')
+                                });
+                            }
+                        }
+                    }
+                },
+                    {
+                        buttonText: nf._.msg('nf-history-table.Cancel'),
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#history-purge-dialog').modal('hide');
+                            }
+                        }
+                    }]
+            });
+        };
+    
+        /**
+         * Initializes the history table.
+         */
+        var initHistoryTable = function () {
+            // clear the current filter
+            $('#clear-history-filter').click(function () {
+                // clear the filter dialog
+                $('#history-filter').val('');
+    
+                // hide the overview
+                $('#history-filter-overview').css('visibility', 'hidden');
+    
+                // clear the filter
+                var historyGrid = $('#history-table').data('gridInstance');
+                var historyModel = historyGrid.getData();
+                historyModel.setFilterArgs({});
+    
+                // refresh the table
+              nfHistoryTable.loadHistoryTable();
+            });
+    
+            // add hover effect and click handler for opening the dialog
+            $('#history-filter-button').click(function () {
+                $('#history-filter-dialog').modal('show');
+            });
+    
+            // define a custom formatter for the more details column
+            var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
+              if (dataContext.canRead === true) {
+                  return '<div title="' + nf._.msg('nf-history-table.ViewDetails') + '" class="pointer show-action-details fa fa-info-circle" style="margin-top: 4px;"></div>';
+              }
+              return "";
+            };
+    
+            // define how general values are formatted
+            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
+                if (dataContext.canRead !== true) {
+                    return '<span class="unset" style="font-size: 13px; padding-top: 2px;">' + nf._.msg('nf-history-table.NotAuthorized') + '</span>';
+                }
+              return nfCommon.formatValue(dataContext.action[columnDef.field]);
+            };
+    
+            // initialize the templates table
+            var historyColumns = [
+                {
+                    id: 'moreDetails',
+                    name: '&nbsp;',
+                    sortable: false,
+                    resizable: false,
+                    formatter: moreDetailsFormatter,
+                    width: 50,
+                    maxWidth: 50
+                },
+              {
+                  id: 'timestamp',
+                  name: nf._.msg('nf-history-table.DateTime'),
+                  field: 'timestamp',
+                  sortable: true,
+                  resizable: true,
+                  formatter: valueFormatter
+              },
+              {
+                  id: 'sourceName',
+                  name: nf._.msg('nf-history-table.Name'),
+                  field: 'sourceName',
+                  sortable: true,
+                  resizable: true,
+                  formatter: valueFormatter
+              },
+              {
+                  id: 'sourceType',
+                  name: nf._.msg('nf-history-table.Type'),
+                  field: 'sourceType',
+                  sortable: true,
+                  resizable: true,
+                  formatter: valueFormatter
+              },
+              {
+                  id: 'operation',
+                  name: nf._.msg('nf-history-table.Operation'),
+                  field: 'operation',
+                  sortable: true,
+                  resizable: true,
+                  formatter: valueFormatter
+              },
+              {
+                  id: 'userIdentity',
+                  name: nf._.msg('nf-history-table.User'),
+                  field: 'userIdentity',
+                  sortable: true,
+                  resizable: true,
+                  formatter: valueFormatter
+              }
+            ];
+    
+            var historyOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: false,
+                enableColumnReorder: false,
+                autoEdit: false,
+                rowHeight: 24
+            };
+    
+            // create the remote model
+          var historyModel = new nfHistoryModel();
+    
+            // initialize the grid
+            var historyGrid = new Slick.Grid('#history-table', historyModel, historyColumns, historyOptions);
+            historyGrid.setSelectionModel(new Slick.RowSelectionModel());
+            historyGrid.registerPlugin(new Slick.AutoTooltips());
+    
+            // initialize the grid sorting
+            historyGrid.onSort.subscribe(function (e, args) {
+                // set the sort criteria on the model
+                historyModel.setSort(args.sortCol.field, args.sortAsc ? 1 : -1);
+    
+                // reload the grid
+                var vp = historyGrid.getViewport();
+                historyModel.ensureData(vp.top, vp.bottom);
+            });
+            historyGrid.setSortColumn('timestamp', false);
+    
+            // configure a click listener
+            historyGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = historyModel.getItem(args.row);
+    
+                // determine the desired action
+                if (historyGrid.getColumns()[args.cell].id === 'moreDetails') {
+                    if (target.hasClass('show-action-details')) {
+                      showActionDetails(item.action);
+                    }
+                }
+            });
+    
+            // listen for when the viewport changes so we can fetch the appropriate records
+            historyGrid.onViewportChanged.subscribe(function (e, args) {
+                var vp = historyGrid.getViewport();
+                historyModel.ensureData(vp.top, vp.bottom);
+            });
+    
+            // listen for when new data has been loaded
+            historyModel.onDataLoaded.subscribe(function (e, args) {
+                for (var i = args.from; i <= args.to; i++) {
+                    historyGrid.invalidateRow(i);
+                }
+                historyGrid.updateRowCount();
+                historyGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#history-table').data('gridInstance', historyGrid);
+    
+            // add the purge button if appropriate
+          if (nfCommon.canModifyController()) {
+                $('#history-purge-button').on('click', function () {
+                    $('#history-purge-dialog').modal('show');
+                }).show();
+            }
+        };
+    
+        /**
+         * Purges the history up to the specified end date.
+         *
+         * @argument {string} endDateTime       The end date time
+         */
+        var purgeHistory = function (endDateTime) {
+            $.ajax({
+                type: 'DELETE',
+                url: config.urls.history + '?' + $.param({
+                    endDate: endDateTime
+                }),
+                dataType: 'json'
+            }).done(function () {
+              nfHistoryTable.loadHistoryTable();
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Shows the details for the specified action.
+         *
+         * @param {object} action
+         */
+        var showActionDetails = function (action) {
+            // create the markup for the dialog
+            var detailsMarkup = $('<div></div>').append(
+              $('<div class="action-detail"><div class="history-details-name">Id</div>' + nfCommon.escapeHtml(action.sourceId) + '</div>'));
+    
+            // get any component details
+            var componentDetails = action.componentDetails;
+    
+            // inspect the operation to determine if there are any component details
+          if (nfCommon.isDefinedAndNotNull(componentDetails)) {
+                if (action.sourceType === 'Processor' || action.sourceType === 'ControllerService' || action.sourceType === 'ReportingTask') {
+                    detailsMarkup.append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Type') + '</div>' + nfCommon.escapeHtml(componentDetails.type) + '</div>'));
+                } else if (action.sourceType === 'RemoteProcessGroup') {
+                    detailsMarkup.append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Uri') + '</div>' + nfCommon.formatValue(componentDetails.uri) + '</div>'));
+                }
+            }
+    
+            // get any action details
+            var actionDetails = action.actionDetails;
+    
+            // inspect the operation to determine if there are any action details
+          if (nfCommon.isDefinedAndNotNull(actionDetails)) {
+                if (action.operation === 'Configure') {
+                    detailsMarkup.append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Name') + '</div>' + nfCommon.formatValue(actionDetails.name) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Value') + '</div>' + nfCommon.formatValue(actionDetails.value) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.PreviousValue') + '</div>' + nfCommon.formatValue(actionDetails.previousValue) + '</div>'));
+                } else if (action.operation === 'Connect' || action.operation === 'Disconnect') {
+                    detailsMarkup.append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.SourceId') + '</div>' + nfCommon.escapeHtml(actionDetails.sourceId) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.SourceName') + '</div>' + nfCommon.formatValue(actionDetails.sourceName) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.SourceType') + '</div>' + nfCommon.escapeHtml(actionDetails.sourceType) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Relationship') + '</div>' + nfCommon.formatValue(actionDetails.relationship) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.DestinationId') + '</div>' + nfCommon.escapeHtml(actionDetails.destinationId) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.DestinationName') + '</div>' + nfCommon.formatValue(actionDetails.destinationName) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.DestinationType') + '</div>' + nfCommon.escapeHtml(actionDetails.destinationType) + '</div>'));
+                } else if (action.operation === 'Move') {
+                    detailsMarkup.append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.Group') + '</div>' + nfCommon.formatValue(actionDetails.group) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.GroupId') + '</div>' + nfCommon.escapeHtml(actionDetails.groupId) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.PreviousGroup') + '</div>' + nfCommon.formatValue(actionDetails.previousGroup) + '</div>')).append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.PreviousGroupId') + '</div>' + nfCommon.escapeHtml(actionDetails.previousGroupId) + '</div>'));
+                } else if (action.operation === 'Purge') {
+                    detailsMarkup.append(
+                        $('<div class="action-detail"><div class="history-details-name">' + nf._.msg('nf-history-table.EndTime') + '</div>' + nfCommon.escapeHtml(actionDetails.endDate) + '</div>'));
+                }
+            }
+    
+            // populate the dialog
+            $('#action-details').append(detailsMarkup);
+    
+            // show the dialog
+            $('#action-details-dialog').modal('show');
+        };
+    
+      var nfHistoryTable = {
+            init: function () {
+                initDetailsDialog();
+                initFilterDialog();
+                initPurgeDialog();
+                initHistoryTable();
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+                var historyGrid = $('#history-table').data('gridInstance');
+              if (nfCommon.isDefinedAndNotNull(historyGrid)) {
+                    historyGrid.resizeCanvas();
+                }
+            },
+    
+            /**
+             * Load the processor status table.
+             */
+            loadHistoryTable: function () {
+                var historyGrid = $('#history-table').data('gridInstance');
+    
+                // clear the history model
+                var historyModel = historyGrid.getData();
+                historyModel.clear();
+    
+                // request refresh of the current 'page'
+                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
new file mode 100644
index 000000000000..3fd6e8842354
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js
@@ -0,0 +1,236 @@
+    /*
+     * 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 top, define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.HistoryTable',
+                  'nf.ErrorHandler',
+                  'nf.Storage',
+                  'nf.ClusterSummary'],
+              function ($, nfCommon, nfHistoryTable, nfErrorHandler, nfStorage, nfClusterSummary) {
+                  return (nf.History = factory($, nfCommon, nfHistoryTable, nfErrorHandler, nfStorage, nfClusterSummary));
+              });
+      } 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 ($, nfCommon, nfHistoryTable, nfErrorHandler, nfStorage, nfClusterSummary) {
+      'use strict';
+    
+        $(document).ready(function () {
+            // initialize the status page
+          nfHistory.init();
+        });
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                banners: '../nifi-api/flow/banners',
+                about: '../nifi-api/flow/about',
+              currentUser: '../nifi-api/flow/current-user'
+            }
+        };
+    
+        /**
+         * Loads the current user.
+         */
+        var loadCurrentUser = function () {
+            return $.ajax({
+                type: 'GET',
+                url: config.urls.currentUser,
+                dataType: 'json'
+            }).done(function (currentUser) {
+              nfCommon.setCurrentUser(currentUser);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Initializes the history page.
+         */
+        var initializeHistoryPage = function () {
+            // define mouse over event for the refresh button
+            $('#refresh-button').click(function () {
+              nfHistoryTable.loadHistoryTable();
+            });
+    
+            // 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 (nfCommon.isDefinedAndNotNull(response.banners)) {
+                          if (nfCommon.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('history');
+                            }
+    
+                          if (nfCommon.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('history');
+                            }
+                        }
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                      nfErrorHandler.handleAjaxError(xhr, status, error);
+                        deferred.reject();
+                    });
+                } else {
+                    deferred.resolve();
+                }
+            }).promise();
+        };
+    
+      var nfHistory = {
+            /**
+             * Initializes the status page.
+             */
+            init: function () {
+                // load the current user
+              var currentUser = loadCurrentUser()
+  
+              nfStorage.init();
+  
+              // ensure the config requests are loaded
+              $.when(currentUser).done(function (currentUserResult) {
+                  // if clustered, show message to indicate location of actions
+                  if (nfClusterSummary.isClustered() === true) {
+                      $('#cluster-history-message').show();
+                  }
+    
+                    // create the history table
+                  nfHistoryTable.init();
+    
+                    // load the history table
+                  nfHistoryTable.loadHistoryTable();
+    
+                    // once the table is initialized, finish initializing the page
+                    initializeHistoryPage().done(function () {
+                        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'
+                                });
+    
+                                $('#history').css('margin', 40);
+                                $('#history-refresh-container').css('margin', 40);
+                            }
+    
+                            // configure the initial grid height
+                          nfHistoryTable.resetTableSize();
+                        };
+    
+                        // get the about details
+                        $.ajax({
+                            type: 'GET',
+                            url: config.urls.about,
+                            dataType: 'json'
+                        }).done(function (response) {
+                            var aboutDetails = response.about;
+                            var historyTitle = nf._.msg('nf-about')+ nf._.msg('nf-history-table.History');
+    
+                            // set the document title and the about title
+                            document.title = historyTitle;
+                            $('#history-header-text').text(historyTitle);
+    
+                            // set the initial size
+                            setBodySize();
+                      }).fail(nfErrorHandler.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) {
+                                        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) {
+                              nfCommon.toggleScrollable(tabsContent.get(0));
+                            });
+                        });
+                    });
+                });
+            }
+        };
+    
+      return nfHistory;
+  }));
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
new file mode 100644
index 000000000000..cff96d354316
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js
@@ -0,0 +1,241 @@
+    /*
+     * 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 top, define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.Storage'],
+              function ($, nfCommon, nfDialog, nfStorage) {
+                  return (nf.Login = factory($, nfCommon, nfDialog, nfStorage));
+              });
+      } 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 ($, nfCommon, nfDialog, nfStorage) {
+      'use strict';
+    
+        $(document).ready(function () {
+          nfLogin.init();
+        });
+    
+        var config = {
+            urls: {
+                token: '../nifi-api/access/token',
+                accessStatus: '../nifi-api/access',
+                accessConfig: '../nifi-api/access/config'
+            }
+        };
+    
+        var initializeMessage = function () {
+            $('#login-message-container').show();
+        };
+    
+        var showLogin = function () {
+            // reset the forms
+            $('#username').val('');
+            $('#password').val('');
+            $('#login-submission-button').text(nf._.msg('nf-login.Login'));
+    
+            // update the form visibility
+            $('#login-container').show();
+            $('#nifi-registration-container').hide();
+    
+            // set the focus
+            $('#username').focus();
+        };
+    
+        var initializeSubmission = function () {
+            $('#login-submission-button').on('click', function () {
+                if ($('#login-container').is(':visible')) {
+                    login();
+                }
+            });
+    
+            $('#login-submission-container').show();
+        };
+    
+        var login = function () {
+            // remove focus
+            $('#username, #password').blur();
+    
+            // show the logging message...
+            $('#login-progress-label').text(nf._.msg('nf-login.Logining'));
+            $('#login-progress-container').show();
+            $('#login-submission-container').hide();
+    
+            // login submit
+            $.ajax({
+                type: 'POST',
+                url: config.urls.token,
+                data: {
+                    'username': $('#username').val(),
+                    'password': $('#password').val()
+                }
+            }).done(function (jwt) {
+                // get the payload and store the token with the appropirate expiration
+              var token = nfCommon.getJwtPayload(jwt);
+              var expiration = parseInt(token['exp'], 10) * nfCommon.MILLIS_PER_SECOND;
+              nfStorage.setItem('jwt', jwt, expiration);
+    
+                // check to see if they actually have access now
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.accessStatus,
+                    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
+                        if (top !== window) {
+                            parent.window.location = '/nifi';
+                        } else {
+                            window.location = '/nifi';
+                        }
+                    } else {
+                        $('#login-message-title').text(nf._.msg('nf-login.Message1'));
+                        $('#login-message').text(accessStatus.message);
+    
+                        // update visibility
+                        $('#login-container').hide();
+                        $('#login-submission-container').hide();
+                        $('#login-progress-container').hide();
+                        $('#login-message-container').show();
+                    }
+                }).fail(function (xhr, status, error) {
+                    $('#login-message-title').text(nf._.msg('nf-login.Message1'));
+                    $('#login-message').text(xhr.responseText);
+    
+                    // update visibility
+                    $('#login-container').hide();
+                    $('#login-submission-container').hide();
+                    $('#login-progress-container').hide();
+                    $('#login-message-container').show();
+                });
+            }).fail(function (xhr, status, error) {
+              nfDialog.showOkDialog({
+                    headerText: nf._.msg('nf-login.Login'),
+                    dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                });
+    
+                // update the form visibility
+                $('#login-submission-container').show();
+                $('#login-progress-container').hide();
+            });
+        };
+    
+        var showLogoutLink = function () {
+          nfCommon.showLogoutLink();
+        };
+    
+      var nfLogin = {
+            /**
+             * Initializes the login page.
+             */
+            init: function () {
+              nfStorage.init();
+    
+              if (nfStorage.getItem('jwt') !== null) {
+                    showLogoutLink();
+                }
+    
+                // supporting logging in via enter press
+                $('#username, #password').on('keyup', function (e) {
+                    var code = e.keyCode ? e.keyCode : e.which;
+                    if (code === $.ui.keyCode.ENTER) {
+                        login();
+                    }
+                });
+    
+                // access status
+                var accessStatus = $.ajax({
+                    type: 'GET',
+                    url: config.urls.accessStatus,
+                    dataType: 'json'
+                }).fail(function (xhr, status, error) {
+                    $('#login-message-title').text(nf._.msg('nf-login.Message2'));
+                    $('#login-message').text(xhr.responseText);
+                    initializeMessage();
+                });
+    
+                // access config
+                var accessConfigXhr = $.ajax({
+                    type: 'GET',
+                    url: config.urls.accessConfig,
+                    dataType: 'json'
+                });
+    
+                $.when(accessStatus, accessConfigXhr).done(function (accessStatusResult, accessConfigResult) {
+                    var accessStatusResponse = accessStatusResult[0];
+                    var accessStatus = accessStatusResponse.accessStatus;
+    
+                    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(nf._.msg('nf-login.SUCCESS'));
+                        $('#login-message').text(accessStatus.message);
+                    }
+    
+                    // if login is required, verify its supported
+                    if (accessConfig.supportsLogin === false && needsLogin === true) {
+                        $('#login-message-title').text(nf._.msg('nf-login.Denied'));
+                        $('#login-message').text(nf._.msg('nf-login.Message3'));
+                        showMessage = true;
+                        needsLogin = false;
+                    }
+    
+                    // initialize the page as appropriate
+                    if (showMessage === true) {
+                        initializeMessage();
+                    } else if (needsLogin === true) {
+                        showLogin();
+                        initializeSubmission();
+                    }
+                });
+            }
+        };
+    
+      return nfLogin;
+  }));
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
new file mode 100644
index 000000000000..ac5bc1c2df7c
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ajax-setup.js
@@ -0,0 +1,57 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Storage'],
+            function ($, nfStorage) {
+                return (nf.AjaxSetup = factory($, nfStorage));
+            });
+    } 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 ($, nfStorage) {
+    /**
+     * Performs ajax setup for use within NiFi.
+     */
+    $(document).ready(function ($) {
+        // include jwt when possible
+        $.ajaxSetup({
+            'beforeSend': function (xhr) {
+                var hadToken = nfStorage.hasItem('jwt');
+
+                // get the token to include in all requests
+                var token = nfStorage.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
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
new file mode 100644
index 000000000000..cd6521d2edbb
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-client.js
@@ -0,0 +1,87 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common'],
+            function ($, nfCommon) {
+                return (nf.Client = factory($, nfCommon));
+            });
+    } 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 ($, nfCommon) {
+    'use strict';
+
+    var clientId = null;
+
+    return {
+        /**
+         * Initializes the client.
+         *
+         * @returns deferred
+         */
+        init: function () {
+            return $.ajax({
+                type: 'GET',
+                url: '../nifi-api/flow/client-id',
+            }).done(function (cid) {
+                clientId = cid;
+            });
+        },
+
+        /**
+         * Builds the revision fof the specified component
+         * @param d The component
+         * @returns The revision
+         */
+        getRevision: function (d) {
+            return {
+                'clientId': clientId,
+                'version': d.revision.version
+            };
+        },
+
+        /**
+         * Determines whether the proposedData is not older than the currentData.
+         *
+         * @param currentData Maybe be null, if the proposedData is new to this canvas
+         * @param proposedData Maybe not be null
+         * @return {boolean} whether proposedData is newer than currentData
+         */
+        isNewerRevision: function (currentData, proposedData) {
+            if (nfCommon.isDefinedAndNotNull(currentData)) {
+                var currentRevision = currentData.revision;
+                var proposedRevision = proposedData.revision;
+
+                // return whether the proposed revision is not less
+                return proposedRevision.version >= currentRevision.version;
+            } else {
+                return 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-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 000000000000..a06b7711f2a2
--- /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 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
new file mode 100644
index 000000000000..e4b02145ff86
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
@@ -0,0 +1,1266 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports, parseFloat */
+  
+  // Define a common utility class used across the entire application.
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Storage'],
+              function ($, d3, nfStorage) {
+                  return (nf.Common = factory($, d3, nfStorage));
+              });
+      } else if (typeof exports === 'object' && typeof module === 'object') {
+          module.exports = (nf.Common = factory(require('jquery'),
+              require('d3'),
+              require('nf.Storage')));
+      } else {
+          nf.Common = factory(root.$,
+              root.d3,
+              root.nf.Storage);
+      }
+  }(this, function ($, d3, nfStorage) {
+      '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';
+            $('<img/>').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');
+                }
+            });
+    
+          // setup click areas for custom checkboxes
+          $(document).on('click', '.nf-checkbox-label', function (e) {
+              $(e.target).parent().find('.nf-checkbox').click();
+          });
+  
+            // 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 (nfStorage.getItem('jwt') !== null) {
+                $('#user-logout-container').css('display', 'block');
+              nfCommon.scheduleTokenRefresh();
+            }
+    
+            // handle logout
+            $('#user-logout').on('click', function () {
+              nfStorage.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;
+    
+      var policyTypeListing = [{
+          text: 'view the user interface',
+          value: 'flow',
+          description: 'Allows users to view the user interface'
+      }, {
+          text: 'access the controller',
+          value: 'controller',
+          description: 'Allows users to view/modify the controller including Reporting Tasks, Controller Services, and Nodes in the Cluster'
+      }, {
+          text: 'query provenance',
+          value: 'provenance',
+          description: 'Allows users to submit a Provenance Search and request Event Lineage'
+      }, {
+          text: 'access restricted components',
+          value: 'restricted-components',
+          description: 'Allows users to create/modify restricted components assuming otherwise sufficient permissions'
+      }, {
+          text: 'access all policies',
+          value: 'policies',
+          description: 'Allows users to view/modify the policies for all components'
+      }, {
+          text: 'access users/user groups',
+          value: 'tenants',
+          description: 'Allows users to view/modify the users and user groups'
+      }, {
+          text: 'retrieve site-to-site details',
+          value: 'site-to-site',
+          description: 'Allows other NiFi instances to retrieve Site-To-Site details of this NiFi'
+      }, {
+          text: 'view system diagnostics',
+          value: 'system',
+          description: 'Allows users to view System Diagnostics'
+      }, {
+          text: 'proxy user requests',
+          value: 'proxy',
+          description: 'Allows proxy machines to send requests on the behalf of others'
+      }, {
+          text: 'access counters',
+          value: 'counters',
+          description: 'Allows users to view/modify Counters'
+      }];
+  
+      var nfCommon = {
+            ANONYMOUS_USER_TEXT: 'Anonymous user',
+    
+            config: {
+                sensitiveText: 'Sensitive value set',
+                tooltipConfig: {
+                    style: {
+                        classes: 'nifi-tooltip'
+                    },
+                    show: {
+                        solo: true,
+                        effect: function (offset) {
+                            $(this).slideDown(100);
+                        }
+                    },
+                    hide: {
+                        effect: function (offset) {
+                            $(this).slideUp(100);
+                        }
+                    },
+                    position: {
+                        at: 'bottom center',
+                        my: 'top center',
+                        adjust: {
+                            y: 5
+                        }
+                    }
+                }
+            },
+    
+            /**
+             * Determines if the current broswer supports SVG.
+             */
+            SUPPORTS_SVG: !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect,
+    
+            /**
+             * The current user.
+             */
+            currentUser: undefined,
+    
+            /**
+           * Formats type of a component for a new instance dialog.
+           *
+           * @param row
+           * @param cell
+           * @param value
+           * @param columnDef
+           * @param dataContext
+           * @returns {string}
+           */
+          typeFormatter: function (row, cell, value, columnDef, dataContext) {
+              var markup = '';
+  
+              // restriction
+              if (nfCommon.isBlank(dataContext.usageRestriction) === false) {
+                  markup += '<div class="view-usage-restriction fa fa-shield"></div><span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
+              } else {
+                  markup += '<div class="fa"></div>';
+              }
+  
+              // type
+              markup += value;
+  
+              return markup;
+          },
+  
+          /**
+             * Sets the current user.
+             *
+             * @param currentUser
+             */
+            setCurrentUser: function (currentUser) {
+              nfCommon.currentUser = currentUser;
+            },
+    
+            /**
+             * Automatically refresh tokens by checking once an hour if its going to expire soon.
+             */
+            scheduleTokenRefresh: function () {
+                // if we are currently polling for token refresh, cancel it
+                if (tokenRefreshInterval !== null) {
+                    clearInterval(tokenRefreshInterval);
+                }
+    
+                // set the interval to one hour
+              var interval = nfCommon.MILLIS_PER_MINUTE;
+    
+                var checkExpiration = function () {
+                  var expiration = nfStorage.getItemExpiration('jwt');
+    
+                    // ensure there is an expiration and token present
+                    if (expiration !== null) {
+                        var expirationDate = new Date(expiration);
+                        var now = new Date();
+    
+                        // get the time remainging plus a little bonus time to reload the token
+                      var timeRemaining = expirationDate.valueOf() - now.valueOf() - (30 * nfCommon.MILLIS_PER_SECOND);
+                        if (timeRemaining < interval) {
+                          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({}, nfCommon.config.tooltipConfig, {
+                                    content: nf._.msg('nf-common.Message15'),
+                                    position: {
+                                        my: 'top right',
+                                        at: 'bottom left'
+                                    }
+                                }));
+                            }
+                        }
+                    }
+                };
+    
+                // perform initial check
+                checkExpiration();
+    
+                // schedule subsequent checks
+                tokenRefreshInterval = setInterval(checkExpiration, interval);
+            },
+    
+            /**
+             * Sets the anonymous user label.
+             */
+            setAnonymousUserLabel: function () {
+                var anonymousUserAlert = $('#anonymous-user-alert');
+                if (anonymousUserAlert.data('qtip')) {
+                    anonymousUserAlert.qtip('api').destroy(true);
+                }
+    
+                // alert user's of anonymous access
+              anonymousUserAlert.show().qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                    content: nf._.msg('nf-common.Message16'),
+                    position: {
+                        my: 'top right',
+                        at: 'bottom left'
+                    }
+                }));
+    
+                // render the anonymous user text
+              $('#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 (nfCommon.isDefinedAndNotNull(jwt)) {
+                    var segments = jwt.split(/\./);
+                    if (segments.length !== 3) {
+                        return '';
+                    }
+    
+                    var rawPayload = $.base64.atob(segments[1]);
+                    var payload = JSON.parse(rawPayload);
+    
+                  if (nfCommon.isDefinedAndNotNull(payload)) {
+                        return payload;
+                    } else {
+                        return null;
+                    }
+                }
+    
+                return null;
+            },
+    
+            /**
+             * Determines whether the current user can access provenance.
+             *
+             * @returns {boolean}
+             */
+            canAccessProvenance: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.provenancePermissions.canRead === true;
+              } else {
+                  return false;
+              }
+          },
+  
+          /**
+           * Determines whether the current user can access restricted comopnents.
+           *
+           * @returns {boolean}
+           */
+          canAccessRestrictedComponents: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.restrictedComponentsPermissions.canWrite === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can access counters.
+             *
+             * @returns {boolean}
+             */
+            canAccessCounters: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.countersPermissions.canRead === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can modify counters.
+             *
+             * @returns {boolean}
+             */
+            canModifyCounters: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.countersPermissions.canRead === true && nfCommon.currentUser.countersPermissions.canWrite === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can access tenants.
+             *
+             * @returns {boolean}
+             */
+            canAccessTenants: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.tenantsPermissions.canRead === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can modify tenants.
+             *
+             * @returns {boolean}
+             */
+            canModifyTenants: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.tenantsPermissions.canRead === true && nfCommon.currentUser.tenantsPermissions.canWrite === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can access counters.
+             *
+             * @returns {boolean}
+             */
+            canAccessPolicies: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.policiesPermissions.canRead === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can modify counters.
+             *
+             * @returns {boolean}
+             */
+            canModifyPolicies: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.policiesPermissions.canRead === true && nfCommon.currentUser.policiesPermissions.canWrite === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can access the controller.
+             *
+             * @returns {boolean}
+             */
+            canAccessController: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.controllerPermissions.canRead === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines whether the current user can modify the controller.
+             *
+             * @returns {boolean}
+             */
+            canModifyController: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.controllerPermissions.canRead === true && nfCommon.currentUser.controllerPermissions.canWrite === true;
+              } else {
+                  return false;
+              }
+          },
+  
+          /**
+           * Determines whether the current user can access system diagnostics.
+           *
+           * @returns {boolean}
+           */
+          canAccessSystem: function () {
+              if (nfCommon.isDefinedAndNotNull(nfCommon.currentUser)) {
+                  return nfCommon.currentUser.systemPermissions.canRead === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * 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
+             */
+            addHoverEffect: function (selector, normalStyle, overStyle) {
+                $(document).on('mouseenter', selector, function () {
+                    $(this).removeClass(normalStyle).addClass(overStyle);
+                }).on('mouseleave', selector, function () {
+                    $(this).removeClass(overStyle).addClass(normalStyle);
+                });
+                return $(selector).addClass(normalStyle);
+            },
+    
+            /**
+             * Determine if an `element` has content overflow and adds the `.scrollable` class if it does.
+             *
+             * @param {HTMLElement} element The DOM element to toggle .scrollable upon.
+             */
+            toggleScrollable: function (element) {
+                if ($(element).is(':visible')) {
+                    if (element.offsetHeight < element.scrollHeight ||
+                        element.offsetWidth < element.scrollWidth) {
+                        // your element has overflow
+                        $(element).addClass('scrollable');
+                    } else {
+                        $(element).removeClass('scrollable');
+                    }
+                }
+            },
+    
+            /**
+           * Determines the contrast color of a given hex color.
+             *
+           * @param {string} hex  The hex color to test.
+           * @returns {string} The contrasting color string.
+           */
+          determineContrastColor: function (hex) {
+              if (parseInt(hex, 16) > 0xffffff / 1.5) {
+                  return '#000000';
+              }
+              return '#ffffff';
+            },
+    
+            /**
+             * Shows the logout link if appropriate.
+             */
+            showLogoutLink: function () {
+              if (nfStorage.getItem('jwt') === null) {
+                    $('#user-logout-container').css('display', 'none');
+                } else {
+                    $('#user-logout-container').css('display', 'block');
+                }
+            },
+    
+            /**
+             * Returns whether a content viewer has been configured.
+             *
+             * @returns {boolean}
+             */
+            isContentViewConfigured: function () {
+                var contentViewerUrl = $('#nifi-content-viewer-url').text();
+              return !nfCommon.isBlank(contentViewerUrl);
+            },
+    
+            /**
+             * 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 (nfCommon.isUndefined(value) || nfCommon.isNull(value)) {
+                    return $('#' + target).addClass('unset').text(nf._.msg('nf-common.Message13'));
+                } else if (value === '') {
+                    return $('#' + target).addClass('blank').text(nf._.msg('nf-common.Message14'));
+                } else {
+                    return $('#' + target).text(value);
+                }
+            },
+    
+            /**
+             * 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) {
+                return $('#' + target).removeClass('unset blank').text('');
+            },
+    
+            /**
+             * Cleans up any tooltips that have been created for the specified container.
+             *
+             * @param {jQuery} container
+             * @param {string} tooltipTarget
+             */
+            cleanUpTooltips: function (container, tooltipTarget) {
+                container.find(tooltipTarget).each(function () {
+                    var tip = $(this);
+                    if (tip.data('qtip')) {
+                        var api = tip.qtip('api');
+                        api.destroy(true);
+                    }
+                });
+            },
+    
+            /**
+             * Formats the tooltip for the specified property.
+             *
+             * @param {object} propertyDescriptor      The property descriptor
+             * @param {object} propertyHistory         The property history
+             * @returns {string}
+             */
+            formatPropertyTooltip: function (propertyDescriptor, propertyHistory) {
+                var tipContent = [];
+    
+                // show the property description if applicable
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                  if (!nfCommon.isBlank(propertyDescriptor.description)) {
+                      tipContent.push(nfCommon.escapeHtml(propertyDescriptor.description));
+                  }
+                  if (!nfCommon.isBlank(propertyDescriptor.defaultValue)) {
+                      tipContent.push('<b>'+nf._.msg('nf-summary-table.DefaultValue')+':</b> ' + nfCommon.escapeHtml(propertyDescriptor.defaultValue));
+                  }
+                  if (!nfCommon.isBlank(propertyDescriptor.supportsEl)) {
+                      tipContent.push('<b>'+nf._.msg('nf-summary-table.SupportsExpressionLanguage')+':</b> ' + nfCommon.escapeHtml(propertyDescriptor.supportsEl));
+                    }
+                }
+    
+              if (nfCommon.isDefinedAndNotNull(propertyHistory)) {
+                  if (!nfCommon.isEmpty(propertyHistory.previousValues)) {
+                        var history = [];
+                        $.each(propertyHistory.previousValues, function (_, previousValue) {
+                          history.push('<li>' + nfCommon.escapeHtml(previousValue.previousValue) + ' - ' + nfCommon.escapeHtml(previousValue.timestamp) + ' (' + nfCommon.escapeHtml(previousValue.userIdentity) + ')</li>');
+                        });
+                      tipContent.push('<b>'+nf._.msg('nf-summary-table.History')+':</b><ul class="property-info">' + history.join('') + '</ul>');
+                    }
+                }
+    
+                if (tipContent.length > 0) {
+                    return tipContent.join('<br/><br/>');
+                } else {
+                    return null;
+                }
+            },
+    
+            /**
+             * 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 '<div><span class="label">' + nfCommon.formatValue(name) + ': </span>' + nfCommon.formatValue(value) + '</div>';
+            },
+    
+            /**
+             * Formats the specified value accordingly.
+             *
+             * @argument {string} value     The value of the property
+             */
+            formatValue: function (value) {
+              if (nfCommon.isDefinedAndNotNull(value)) {
+                    if (value === '') {
+                        return '<span class="blank" style="font-size: 13px; padding-top: 2px;">'+nf._.msg('nf-common.Message27')+'</span>';
+                    } else {
+                      return nfCommon.escapeHtml(value);
+                    }
+                } else {
+                    return '<span class="unset" style="font-size: 13px; padding-top: 2px;">'+nf._.msg('nf-common.Message28')+'</span>';
+                }
+            },
+    
+            /**
+             * HTML escapes the specified string. If the string is null
+             * or undefined, an empty string is returned.
+             *
+             * @returns {string}
+             */
+            escapeHtml: (function () {
+                var entityMap = {
+                    '&': '&amp;',
+                    '<': '&lt;',
+                    '>': '&gt;',
+                    '"': '&quot;',
+                    "'": '&#39;',
+                    '/': '&#x2f;'
+                };
+    
+                return function (string) {
+                  if (nfCommon.isDefinedAndNotNull(string)) {
+                        return String(string).replace(/[&<>"'\/]/g, function (s) {
+                            return entityMap[s];
+                        });
+                    } else {
+                        return '';
+                    }
+                };
+            }()),
+    
+            /**
+             * Determines if the specified property is sensitive.
+             *
+             * @argument {object} propertyDescriptor        The property descriptor
+             */
+            isSensitiveProperty: function (propertyDescriptor) {
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                    return propertyDescriptor.sensitive === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines if the specified property is required.
+             *
+             * @param {object} propertyDescriptor           The property descriptor
+             */
+            isRequiredProperty: function (propertyDescriptor) {
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                    return propertyDescriptor.required === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Determines if the specified property is required.
+             *
+             * @param {object} propertyDescriptor           The property descriptor
+             */
+            isDynamicProperty: function (propertyDescriptor) {
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                    return propertyDescriptor.dynamic === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * Gets the allowable values for the specified property.
+             *
+             * @argument {object} propertyDescriptor        The property descriptor
+             */
+            getAllowableValues: function (propertyDescriptor) {
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                    return propertyDescriptor.allowableValues;
+                } else {
+                    return null;
+                }
+            },
+    
+            /**
+             * Returns whether the specified property supports EL.
+             *
+             * @param {object} propertyDescriptor           The property descriptor
+             */
+            supportsEl: function (propertyDescriptor) {
+              if (nfCommon.isDefinedAndNotNull(propertyDescriptor)) {
+                    return propertyDescriptor.supportsEl === true;
+                } else {
+                    return false;
+                }
+            },
+    
+            /**
+             * 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) {
+                if ($.isArray(array)) {
+                    var ul = $('<ul class="result"></ul>');
+                    $.each(array, function (_, item) {
+                        var li = $('<li></li>').appendTo(ul);
+                        if (item instanceof jQuery) {
+                            li.append(item);
+                        } else {
+                            li.text(item);
+                        }
+                    });
+                    return ul;
+                } else {
+                    return null;
+                }
+            },
+    
+            /**
+             * 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
+             */
+            substringAfterLast: function (str, strToFind) {
+                var result = '';
+                var indexOfStrToFind = str.lastIndexOf(strToFind);
+                if (indexOfStrToFind >= 0) {
+                    var indexAfterStrToFind = indexOfStrToFind + strToFind.length;
+                    if (indexAfterStrToFind < str.length) {
+                        result = str.substr(indexAfterStrToFind);
+                    }
+                }
+                return result;
+            },
+    
+            /**
+             * 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
+             */
+            substringAfterFirst: function (str, strToFind) {
+                var result = '';
+                var indexOfStrToFind = str.indexOf(strToFind);
+                if (indexOfStrToFind >= 0) {
+                    var indexAfterStrToFind = indexOfStrToFind + strToFind.length;
+                    if (indexAfterStrToFind < str.length) {
+                        result = str.substr(indexAfterStrToFind);
+                    }
+                }
+                return result;
+            },
+    
+            /**
+             * Extracts the contents of the specified str before the strToFind. If the
+             * strToFind is not found or the first part of the str, an empty string is
+             * returned.
+             *
+             * @argument {string} str       The full string
+             * @argument {string} strToFind The substring to find
+             */
+            substringBeforeFirst: function (str, strToFind) {
+                var result = '';
+                var indexOfStrToFind = str.indexOf(strToFind);
+                if (indexOfStrToFind >= 0) {
+                    result = str.substr(0, indexOfStrToFind);
+                }
+                return result
+            },
+    
+            /**
+             * 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
+             */
+            setCursor: function (domId, isMouseOver) {
+                if (isMouseOver) {
+                    $('#' + domId).addClass('pointer');
+                } else {
+                    $('#' + domId).removeClass('pointer');
+                }
+            },
+    
+            /**
+             * Gets an access token from the specified url.
+             *
+             * @param accessTokenUrl    The access token
+             * @returns the access token as a deferred
+             */
+            getAccessToken: function (accessTokenUrl) {
+                return $.Deferred(function (deferred) {
+                  if (nfStorage.hasItem('jwt')) {
+                        $.ajax({
+                            type: 'POST',
+                            url: accessTokenUrl
+                        }).done(function (token) {
+                            deferred.resolve(token);
+                        }).fail(function () {
+                            deferred.reject();
+                        })
+                    } else {
+                        deferred.resolve('');
+                    }
+                }).promise();
+            },
+    
+            /**
+             * Constants for time duration formatting.
+             */
+            MILLIS_PER_DAY: 86400000,
+            MILLIS_PER_HOUR: 3600000,
+            MILLIS_PER_MINUTE: 60000,
+            MILLIS_PER_SECOND: 1000,
+    
+            /**
+             * Formats the specified duration.
+             *
+             * @param {integer} duration in millis
+             */
+            formatDuration: function (duration) {
+                // don't support sub millisecond resolution
+                duration = duration < 1 ? 0 : duration;
+    
+                // determine the number of days in the specified duration
+              var days = duration / nfCommon.MILLIS_PER_DAY;
+                days = days >= 1 ? parseInt(days, 10) : 0;
+              duration %= nfCommon.MILLIS_PER_DAY;
+    
+                // remaining duration should be less than 1 day, get number of hours
+              var hours = duration / nfCommon.MILLIS_PER_HOUR;
+                hours = hours >= 1 ? parseInt(hours, 10) : 0;
+              duration %= nfCommon.MILLIS_PER_HOUR;
+    
+                // remaining duration should be less than 1 hour, get number of minutes
+              var minutes = duration / nfCommon.MILLIS_PER_MINUTE;
+                minutes = minutes >= 1 ? parseInt(minutes, 10) : 0;
+              duration %= nfCommon.MILLIS_PER_MINUTE;
+    
+                // remaining duration should be less than 1 minute, get number of seconds
+              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 % nfCommon.MILLIS_PER_SECOND);
+    
+                // format the time
+              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) {
+                    return days + ' days and ' + time;
+                } else {
+                    return time;
+                }
+            },
+    
+            /**
+             * Constants for formatting data size.
+             */
+            BYTES_IN_KILOBYTE: 1024,
+            BYTES_IN_MEGABYTE: 1048576,
+            BYTES_IN_GIGABYTE: 1073741824,
+            BYTES_IN_TERABYTE: 1099511627776,
+    
+            /**
+             * 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 / nfCommon.BYTES_IN_TERABYTE);
+                if (dataSizeToFormat > 1) {
+                    return dataSizeToFormat.toFixed(2) + " TB";
+                }
+    
+                // check gigabytes
+              dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_GIGABYTE);
+                if (dataSizeToFormat > 1) {
+                    return dataSizeToFormat.toFixed(2) + " GB";
+                }
+    
+                // check megabytes
+              dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_MEGABYTE);
+                if (dataSizeToFormat > 1) {
+                    return dataSizeToFormat.toFixed(2) + " MB";
+                }
+    
+                // check kilobytes
+              dataSizeToFormat = parseFloat(dataSize / nfCommon.BYTES_IN_KILOBYTE);
+                if (dataSizeToFormat > 1) {
+                    return dataSizeToFormat.toFixed(2) + " KB";
+                }
+    
+                // default to bytes
+                return parseFloat(dataSize).toFixed(2) + nf._.msg('nf-common.Bytes');
+            },
+    
+            /**
+             * 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) {
+                var string = integer + '';
+                var regex = /(\d+)(\d{3})/;
+                while (regex.test(string)) {
+                    string = string.replace(regex, '$1' + ',' + '$2');
+                }
+                return string;
+            },
+    
+            /**
+             * Formats the specified float using two demical places.
+             *
+             * @param {float} f
+             */
+            formatFloat: function (f) {
+              if (nfCommon.isUndefinedOrNull(f)) {
+                    return 0.00 + '';
+                }
+                return f.toFixed(2) + '';
+            },
+    
+            /**
+             * 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
+             * @returns {string}
+             */
+            pad: function (value, width, character) {
+                var s = value + '';
+    
+                // pad until wide enough
+                while (s.length < width) {
+                    s = character + s;
+                }
+    
+                return s;
+            },
+    
+            /**
+             * Formats the specified DateTime.
+             *
+             * @param {Date} date
+             * @returns {String}
+             */
+            formatDateTime: function (date) {
+              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 (!nfCommon.isDefinedAndNotNull(rawDateTime)) {
+                    return new Date();
+                }
+              if (rawDateTime === 'No value set') {
+                    return new Date();
+                }
+              if (rawDateTime === 'Empty string set') {
+                    return new Date();
+                }
+    
+                // parse the date time
+                var dateTime = rawDateTime.split(/ /);
+    
+                // ensure the correct number of tokens
+                if (dateTime.length !== 3) {
+                    return new Date();
+                }
+    
+                // get the date and time
+                var date = dateTime[0].split(/\//);
+                var time = dateTime[1].split(/:/);
+    
+                // ensure the correct number of tokens
+                if (date.length !== 3 || time.length !== 3) {
+                    return new Date();
+                }
+              var year = parseInt(date[2], 10);
+              var month = parseInt(date[0], 10) - 1; // new Date() accepts months 0 - 11
+              var day = parseInt(date[1], 10);
+              var hours = parseInt(time[0], 10);
+              var minutes = parseInt(time[1], 10);
+    
+                // detect if there is millis
+              var secondsSpec = time[2].split(/\./);
+              var seconds = parseInt(secondsSpec[0], 10);
+              var milliseconds = 0;
+              if (secondsSpec.length === 2) {
+                  milliseconds = parseInt(secondsSpec[1], 10);
+                }
+              return new Date(year, month, day, hours, minutes, seconds, milliseconds);
+            },
+    
+            /**
+             * Parses the specified duration and returns the total number of millis.
+             *
+             * @param {string} rawDuration
+             * @returns {number}        The number of millis
+             */
+            parseDuration: function (rawDuration) {
+                var duration = rawDuration.split(/:/);
+    
+                // ensure the appropriate number of tokens
+                if (duration.length !== 3) {
+                    return 0;
+                }
+    
+                // detect if there is millis
+                var seconds = duration[2].split(/\./);
+                if (seconds.length === 2) {
+                    return new Date(1970, 0, 1, parseInt(duration[0], 10), parseInt(duration[1], 10), parseInt(seconds[0], 10), parseInt(seconds[1], 10)).getTime();
+                } else {
+                    return new Date(1970, 0, 1, parseInt(duration[0], 10), parseInt(duration[1], 10), parseInt(duration[2], 10), 0).getTime();
+                }
+            },
+    
+            /**
+             * Parses the specified size.
+             *
+             * @param {string} rawSize
+             * @returns {int}
+             */
+            parseSize: function (rawSize) {
+                var tokens = rawSize.split(/ /);
+                var size = parseFloat(tokens[0].replace(/,/g, ''));
+                var units = tokens[1];
+    
+                if (units === 'KB') {
+                    return size * 1024;
+                } else if (units === 'MB') {
+                    return size * 1024 * 1024;
+                } else if (units === 'GB') {
+                    return size * 1024 * 1024 * 1024;
+                } else if (units === 'TB') {
+                    return size * 1024 * 1024 * 1024 * 1024;
+                } else {
+                    return size;
+                }
+            },
+    
+            /**
+             * Parses the specified count.
+             *
+             * @param {string} rawCount
+             * @returns {int}
+             */
+            parseCount: function (rawCount) {
+                // extract the count
+                var count = rawCount.split(/ /, 1);
+    
+                // ensure the string was split successfully
+                if (count.length !== 1) {
+                    return 0;
+                }
+    
+                // convert the count to an integer
+                var intCount = parseInt(count[0].replace(/,/g, ''), 10);
+    
+                // ensure it was parsable as an integer
+                if (isNaN(intCount)) {
+                    return 0;
+                }
+                return intCount;
+            },
+    
+            /**
+             * Determines if the specified object is defined and not null.
+             *
+             * @argument {object} obj   The object to test
+             */
+            isDefinedAndNotNull: function (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 nfCommon.isUndefined(obj) || nfCommon.isNull(obj);
+            },
+    
+            /**
+             * Determines if the specified object is undefined.
+             *
+             * @argument {object} obj   The object to test
+             */
+            isUndefined: function (obj) {
+                return typeof obj === 'undefined';
+            },
+    
+            /**
+             * Determines whether the specified string is blank (or null or undefined).
+             *
+             * @argument {string} str   The string to test
+             */
+            isBlank: function (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) {
+                return obj === null;
+            },
+    
+            /**
+             * 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) {
+                return $.isArray(arr) ? arr.length === 0 : true;
+            },
+    
+            /**
+             * Determines if these are the same bulletins. If both arguments are not
+             * arrays, false is returned.
+             *
+             * @param {array} bulletins
+             * @param {array} otherBulletins
+             * @returns {boolean}
+             */
+            doBulletinsDiffer: function (bulletins, otherBulletins) {
+                if ($.isArray(bulletins) && $.isArray(otherBulletins)) {
+                    if (bulletins.length === otherBulletins.length) {
+                        for (var i = 0; i < bulletins.length; i++) {
+                            if (bulletins[i].id !== otherBulletins[i].id || bulletins[i].canRead !== otherBulletins[i].canRead) {
+                                return true;
+                            }
+                        }
+                    } else {
+                        return true;
+                    }
+                } else if ($.isArray(bulletins) || $.isArray(otherBulletins)) {
+                    return true;
+                }
+                return false;
+            },
+    
+            /**
+             * Formats the specified bulletin list.
+             *
+             * @argument {array} bulletins      The bulletins
+             * @return {array}                  The jQuery objects
+             */
+            getFormattedBulletins: function (bulletinEntities) {
+                var formattedBulletinEntities = [];
+                $.each(bulletinEntities, function (j, bulletinEntity) {
+                    if (bulletinEntity.canRead === true) {
+                        var bulletin = bulletinEntity.bulletin;
+    
+                        // format the node address
+                        var nodeAddress = '';
+                      if (nfCommon.isDefinedAndNotNull(bulletin.nodeAddress)) {
+                          nodeAddress = '-&nbsp;' + nfCommon.escapeHtml(bulletin.nodeAddress) + '&nbsp;-&nbsp;';
+                        }
+    
+                        // set the bulletin message (treat as text)
+                        var bulletinMessage = $('<pre></pre>').css({
+                            'white-space': 'pre-wrap'
+                        }).text(bulletin.message);
+    
+                        // create the bulletin message
+                        var formattedBulletin = $('<div>' +
+                          nfCommon.escapeHtml(bulletin.timestamp) + '&nbsp;' +
+                            nodeAddress + '&nbsp;' +
+                          '<b>' + nfCommon.escapeHtml(bulletin.level) + '</b>&nbsp;' +
+                            '</div>').append(bulletinMessage);
+    
+                        formattedBulletinEntities.push(formattedBulletin);
+                    }
+                });
+                return formattedBulletinEntities;
+          },
+  
+          getPolicyTypeListing: function (value) {
+              var nest = d3.nest()
+                  .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
new file mode 100644
index 000000000000..b847a0cc21a6
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
@@ -0,0 +1,553 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.ErrorHandler'],
+              function ($, nfCommon, nfErrorHandler) {
+                  return (nf.ConnectionDetails = factory($, nfCommon, nfErrorHandler));
+              });
+      } 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 ($, nfCommon, nfErrorHandler) {
+      'use strict';
+    
+        /**
+         * Initialize the details for the source of the connection.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} source        The source of the connection
+         */
+        var initializeConnectionSource = function (groupId, groupName, source) {
+            if (source.type === 'PROCESSOR') {
+                return initializeSourceProcessor(groupId, groupName, source);
+            } else if (source.type === 'FUNNEL') {
+                return initializeSourceFunnel(groupId, groupName, source);
+            } else if (source.type === 'REMOTE_OUTPUT_PORT') {
+                return initializeRemoteSourcePort(groupId, groupName, source);
+            } else {
+                return initializeLocalSourcePort(groupId, groupName, source);
+            }
+        };
+    
+        /**
+         * Initialize the details for the source processor.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} source            The source of the connection
+         */
+        var initializeSourceProcessor = function (groupId, groupName, source) {
+            return $.Deferred(function (deferred) {
+                $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/processors/' + encodeURIComponent(source.id),
+                    dataType: 'json'
+                }).done(function (response) {
+                    var processor = response.component;
+                  var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name);
+                  var processorType = $('<div></div>').text(nfCommon.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nfCommon.substringAfterLast(processor.type, '.'));
+    
+                    // populate source processor details
+                    $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromProcessor'));
+                    $('#read-only-connection-source').append(processorName).append(processorType);
+                    $('#read-only-connection-source-group-name').text(groupName);
+    
+                    deferred.resolve();
+                }).fail(function (xhr, status, error) {
+                    if (xhr.status === 403) {
+                      var processorName = $('<div class="label"></div>').text(source.name).addClass('ellipsis').attr('title', source.name);
+                      var processorType = $('<div></div>').text(nf._.msg('nf-connection-details.Processor')).addClass('ellipsis').attr('title', 'Processor');
+    
+                        // populate source processor details
+                        $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromProcessor'));
+                        $('#read-only-connection-source').append(processorName).append(processorType);
+                        $('#read-only-connection-source-group-name').text(groupName);
+    
+                        deferred.resolve();
+                    } else {
+                        deferred.reject(xhr, status, error);
+                    }
+                });
+            }).promise();
+        };
+    
+        /**
+         * Initialize the details for the source funnel.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} source            The source of the connection
+         */
+        var initializeSourceFunnel = function (groupId, groupName, source) {
+            return $.Deferred(function (deferred) {
+                $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromFunnel'));
+              $('#read-only-connection-source').text('funnel').attr('title', 'funnel');
+                $('#read-only-connection-source-group-name').text(groupName);
+                deferred.resolve();
+            }).promise();
+        };
+    
+        /**
+         * Initialize the details for the remote source port.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} source            The source of the connection
+         */
+        var initializeRemoteSourcePort = function (groupId, groupName, source) {
+            return $.Deferred(function (deferred) {
+                $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/remote-process-groups/' + encodeURIComponent(source.groupId),
+                    dataType: 'json'
+                }).done(function (response) {
+                    var remoteProcessGroup = response.component;
+    
+                    // populate source port details
+                    $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromOutPut'));
+                  $('#read-only-connection-source').text(source.name).attr('title', source.name);
+                    $('#read-only-connection-source-group-name').text(remoteProcessGroup.name);
+    
+                  deferred.resolve();
+                }).fail(function (xhr, status, error) {
+                    if (xhr.status === 403) {
+                        // populate source processor details
+                        $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromOutPut'));
+                      $('#read-only-connection-source').text(source.name).attr('title', source.name);
+                        $('#read-only-connection-source-group-name').text(source.groupId);
+    
+                        deferred.resolve();
+                    } else {
+                        deferred.reject(xhr, status, error);
+                    }
+                });
+            }).promise();
+        };
+    
+        /**
+         * Initialize the details for the source port.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} source            The source of the connection
+         */
+        var initializeLocalSourcePort = function (groupId, groupName, source) {
+            return $.Deferred(function (deferred) {
+                if (groupId === source.groupId) {
+                    // populate source port details
+                    $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromInput'));
+                  $('#read-only-connection-source').text(source.name).attr('title', source.name);
+                    $('#read-only-connection-source-group-name').text(groupName);
+    
+                    deferred.resolve();
+                } else {
+                    $.ajax({
+                        type: 'GET',
+                        url: '../nifi-api/process-groups/' + encodeURIComponent(source.groupId),
+                        dataType: 'json'
+                    }).done(function (response) {
+                        var processGroup = response.component;
+    
+                        // populate source port details
+                        $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromOutPut'));
+                      $('#read-only-connection-source').text(source.name).attr('title', source.name);
+                        $('#read-only-connection-source-group-name').text(processGroup.name);
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                        if (xhr.status === 403) {
+                            // populate source processor details
+                          $('#read-only-connection-source-label').text(nf._.msg('nf-connection-details.FromOutPut'));
+                          $('#read-only-connection-source').text(source.name).attr('title', source.name);
+                            $('#read-only-connection-source-group-name').text(source.groupId);
+    
+                            deferred.resolve();
+                        } else {
+                            deferred.reject(xhr, status, error);
+                        }
+                    });
+                }
+            }).promise();
+        };
+    
+        /**
+         * Initialize the details for the destination of the connection.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} destination            The destination of the connection
+         */
+        var initializeConnectionDestination = function (groupId, groupName, destination) {
+            if (destination.type === 'PROCESSOR') {
+                return initializeDestinationProcessor(groupId, groupName, destination);
+            } else if (destination.type === 'FUNNEL') {
+                return initializeDestinationFunnel(groupId, groupName, destination);
+            } else if (destination.type === 'REMOTE_INPUT_PORT') {
+                return initializeDestinationRemotePort(groupId, groupName, destination);
+            } else {
+                return initializeDestinationLocalPort(groupId, groupName, destination);
+            }
+        };
+    
+        /**
+         * Initialize the details for the destination processor.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} destination            The destination of the connection
+         */
+        var initializeDestinationProcessor = function (groupId, groupName, destination) {
+            return $.Deferred(function (deferred) {
+                $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/processors/' + encodeURIComponent(destination.id),
+                    dataType: 'json'
+                }).done(function (response) {
+                    var processor = response.component;
+                  var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name);
+                  var processorType = $('<div></div>').text(nfCommon.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nfCommon.substringAfterLast(processor.type, '.'));
+    
+                    // populate destination processor details
+                    $('#read-only-connection-target-label').text('To processor');
+                    $('#read-only-connection-target').append(processorName).append(processorType);
+                    $('#read-only-connection-target-group-name').text(groupName);
+    
+                    deferred.resolve();
+                }).fail(function (xhr, status, error) {
+                    if (xhr.status === 403) {
+                      var processorName = $('<div class="label"></div>').text(destination.name).addClass('ellipsis').attr('title', destination.name);
+                      var processorType = $('<div></div>').text(nf._.msg('nf-connection-details.Processor')).addClass('ellipsis').attr('title', 'Processor');
+    
+                        // populate destination processor details
+                      $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToProcessor'));
+                        $('#read-only-connection-target').append(processorName).append(processorType);
+                        $('#read-only-connection-target-group-name').text(groupName);
+    
+                        deferred.resolve();
+                    } else {
+                        deferred.reject(xhr, status, error);
+                    }
+                });
+            }).promise();
+        };
+    
+        /**
+         * Initialize the details for the source funnel.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} destination            The destination of the connection
+         */
+        var initializeDestinationFunnel = function (groupId, groupName, destination) {
+            return $.Deferred(function (deferred) {
+                $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToFunnel'));
+              $('#read-only-connection-target').text('funnel').attr('title', 'funnel');
+                $('#read-only-connection-target-group-name').text(groupName);
+                deferred.resolve();
+            }).promise();
+        };
+    
+        /**
+         * Initialize the details for the remote source port.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} destination            The destination of the connection
+         */
+        var initializeDestinationRemotePort = function (groupId, groupName, destination) {
+            return $.Deferred(function (deferred) {
+                $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/remote-process-groups/' + encodeURIComponent(destination.groupId),
+                    dataType: 'json'
+                }).done(function (response) {
+                    var remoteProcessGroup = response.component;
+    
+                    // populate source port details
+                    $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToInput'));
+                  $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
+                    $('#read-only-connection-target-group-name').text(remoteProcessGroup.name);
+    
+                    deferred.resolve();
+                }).fail(function (xhr, status, error) {
+                    if (xhr.status === 403) {
+                        // populate source port details
+                        $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToInput'));
+                      $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
+                        $('#read-only-connection-target-group-name').text(destination.groupId);
+    
+                        deferred.resolve();
+                    } else {
+                        deferred.reject(xhr, status, error);
+                    }
+                });
+            }).promise();
+        };
+    
+        /**
+         * Initialize the details for the destination port.
+         *
+         * @argument {string} groupId               The id of the current group
+         * @argument {string} groupName             The name of the current group
+         * @argument {object} destination            The destination of the connection
+         */
+        var initializeDestinationLocalPort = function (groupId, groupName, destination) {
+            return $.Deferred(function (deferred) {
+                if (groupId === destination.groupId) {
+                    // populate destination port details
+                    $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToOutput'));
+                  $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
+                    $('#read-only-connection-target-group-name').text(groupName);
+    
+                    deferred.resolve();
+                } else {
+                    $.ajax({
+                        type: 'GET',
+                        url: '../nifi-api/process-groups/' + encodeURIComponent(destination.groupId),
+                        dataType: 'json'
+                    }).done(function (response) {
+                        var processGroup = response.component;
+    
+                        // populate destination port details
+                      $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToInput'));
+                      $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
+                        $('#read-only-connection-target-group-name').text(processGroup.name);
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                        if (xhr.status === 403) {
+                            // populate source port details
+                            $('#read-only-connection-target-label').text(nf._.msg('nf-connection-details.ToInput'));
+                          $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
+                            $('#read-only-connection-target-group-name').text(destination.groupId);
+    
+                            deferred.resolve();
+                        } else {
+                            deferred.reject(xhr, status, error);
+                        }
+                    });
+                }
+            }).promise();
+        };
+    
+    
+        /**
+         * Creates the relationship option for the specified relationship.
+         *
+         * @argument {string} name      The relationship name
+         */
+        var createRelationshipOption = function (name) {
+            $('<div class="available-relationship-container"></div>').append(
+                $('<div class="relationship-name"></div>').text(name)).appendTo('#read-only-relationship-names');
+        };
+    
+        return {
+            /**
+             * Initializes the connection details dialog.
+             */
+            init: function () {
+                // initialize the details tabs
+                $('#connection-details-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                        name: nf._.msg('nf-connection-details.Details'),
+                        tabContentId: 'read-only-connection-details-tab-content'
+                    }, {
+                        name: nf._.msg('nf-connection-details.Settings'),
+                        tabContentId: 'read-only-connection-settings-tab-content'
+                    }]
+                });
+    
+                // configure the connection details dialog
+                $('#connection-details').modal({
+                    headerText: nf._.msg('nf-connection-details.ConnectionDetails'),
+                    scrollableContentStyle: 'scrollable',
+                    buttons: [{
+                        buttonText: nf._.msg('nf-connection-details.Ok'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#connection-details').modal('hide');
+                            }
+                        }
+                    }],
+                    handler: {
+                        close: function () {
+                            // clear the relationship names
+                            $('#read-only-relationship-names').empty();
+    
+                            // clear the connection details
+                          nfCommon.clearField('read-only-connection-name');
+                          nfCommon.clearField('read-only-connection-id');
+    
+                            // clear the connection source details
+                            $('#read-only-connection-source-label').text('');
+                            $('#read-only-connection-source').empty();
+                            $('#read-only-connection-source-group-name').text('');
+    
+                            // clear the connection target details
+                            $('#read-only-connection-target-label').text('');
+                            $('#read-only-connection-target').empty();
+                            $('#read-only-connection-target-group-name').text('');
+    
+                            // clear the relationship details
+                            $('#read-only-relationship-names').css('border-width', '0').empty();
+    
+                            // clear the connection settings
+                            $('#read-only-flow-file-expiration').text('');
+                            $('#read-only-back-pressure-object-threshold').text('');
+                            $('#read-only-back-pressure-data-size-threshold').text('');
+                            $('#read-only-prioritizers').empty();
+                        },
+                        open: function () {
+                          nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                        }
+                    }
+                });
+            },
+    
+            /**
+             * Shows the details for the specified edge.
+             *
+             * @argument {string} groupId           The group id
+             * @argument {string} connectionId      The connection id
+             */
+            showDetails: function (groupId, connectionId) {
+                // get the group details
+                var groupXhr = $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/flow/process-groups/' + encodeURIComponent(groupId),
+                    dataType: 'json'
+                });
+    
+                // get the connection details
+                var connectionXhr = $.ajax({
+                    type: 'GET',
+                    url: '../nifi-api/connections/' + encodeURIComponent(connectionId),
+                    dataType: 'json'
+                });
+    
+                // populate the dialog once get have all necessary details
+                $.when(groupXhr, connectionXhr).done(function (groupResult, connectionResult) {
+                    var groupResponse = groupResult[0];
+                    var connectionResponse = connectionResult[0];
+    
+                    // ensure we can read this connection.. though should never fail as the request returned successfully
+                    if (connectionResponse.permissions.canRead) {
+                        var connection = connectionResponse.component;
+                        var groupName = groupResponse.permissions.canRead ? groupResponse.processGroupFlow.breadcrumb.breadcrumb.name : groupResponse.processGroupFlow.id;
+    
+                        // process the source
+                        var connectionSource = initializeConnectionSource(groupResponse.id, groupName, connection.source);
+    
+                        // process the destination
+                        var connectionDestination = initializeConnectionDestination(groupResponse.id, groupName, connection.destination);
+    
+                        // finish populating the dialog once the source and destination have been loaded
+                        $.when(connectionSource, connectionDestination).done(function () {
+                            // process the relationships
+                            var availableRelationships = connection.availableRelationships;
+                            var selectedRelationships = connection.selectedRelationships;
+    
+                            // show the available relationship if applicable
+                          if (nfCommon.isDefinedAndNotNull(availableRelationships) || nfCommon.isDefinedAndNotNull(selectedRelationships)) {
+                                // populate the available connections
+                                $.each(availableRelationships, function (i, name) {
+                                    createRelationshipOption(name);
+                                });
+    
+                                // ensure all selected relationships are present
+                                // (may be undefined) and selected
+                                $.each(selectedRelationships, function (i, name) {
+                                    // mark undefined relationships accordingly
+                                    if ($.inArray(name, availableRelationships) === -1) {
+                                        var option = createRelationshipOption(name);
+                                        $(option).children('div.relationship-name').addClass('undefined');
+                                    }
+    
+                                    // ensure all selected relationships are bold
+                                    var relationships = $('#read-only-relationship-names').children('div');
+                                    $.each(relationships.children('div.relationship-name'), function (i, relationshipNameElement) {
+                                        var relationshipName = $(relationshipNameElement);
+                                        if (relationshipName.text() === name) {
+                                            relationshipName.css('font-weight', 'bold');
+                                        }
+                                    });
+                                });
+    
+                                $('#selected-relationship-text').show();
+                                $('#read-only-relationship-names-container').show();
+                            } else {
+                                $('#selected-relationship-text').hide();
+                                $('#read-only-relationship-names-container').hide();
+                            }
+    
+                            // set the connection details
+                          nfCommon.populateField('read-only-connection-name', connection.name);
+                          nfCommon.populateField('read-only-connection-id', connection.id);
+                          nfCommon.populateField('read-only-flow-file-expiration', connection.flowFileExpiration);
+                          nfCommon.populateField('read-only-back-pressure-object-threshold', connection.backPressureObjectThreshold);
+                          nfCommon.populateField('read-only-back-pressure-data-size-threshold', connection.backPressureDataSizeThreshold);
+    
+                            // prioritizers
+                          if (nfCommon.isDefinedAndNotNull(connection.prioritizers) && connection.prioritizers.length > 0) {
+                                var prioritizerList = $('<ol></ol>').css('list-style', 'decimal inside none');
+                                $.each(connection.prioritizers, function (i, type) {
+                                  prioritizerList.append($('<li></li>').text(nfCommon.substringAfterLast(type, '.')));
+                                });
+                                $('#read-only-prioritizers').append(prioritizerList);
+                            } else {
+                                var noValueSet = $('<span class="unset">'+nf._.msg('nf-connection-details.NoValueSet')+'</span>');
+                                $('#read-only-prioritizers').append(noValueSet);
+                            }
+    
+                            // select the first tab
+                            $('#connection-details-tabs').find('li:first').click();
+    
+                            // show the dialog
+                            $('#connection-details').modal('show');
+    
+                            // show the border if necessary
+                            var relationshipNames = $('#read-only-relationship-names');
+                          if (relationshipNames.is(':visible') && relationshipNames.get(0).scrollHeight > Math.round(relationshipNames.innerHeight())) {
+                                relationshipNames.css('border-width', '1px');
+                            }
+                      }).fail(nfErrorHandler.handleAjaxError);
+                    }
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+  }));
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
new file mode 100644
index 000000000000..884c74ed67b7
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js
@@ -0,0 +1,178 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery'], 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', []);
+                    }
+                }
+            });
+        });
+    
+      var nfDialog = {
+            /**
+             * Shows an general dialog with an Okay button populated with the
+             * specified dialog content.
+             *
+             * @argument {object} options       Dialog options
+             */
+            showOkDialog: function (options) {
+                options = $.extend({
+                    headerText: '',
+                    dialogContent: ''
+                }, options);
+    
+                // regardless of whether the dialog is already visible, the new content will be appended
+                var content = $('<p></p>').append(options.dialogContent);
+                $('#nf-ok-dialog-content').append(content);
+    
+                // update the button model
+                $('#nf-ok-dialog').modal('setButtonModel', [{
+                    buttonText: nf._.msg('nf-dialog.Ok'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // close the dialog
+                            $('#nf-ok-dialog').modal('hide');
+                            if (typeof options.okHandler === 'function') {
+                                options.okHandler.call(this);
+                            }
+                        }
+                    }
+                }]);
+    
+                // show the dialog
+                $('#nf-ok-dialog').modal('setHeaderText', options.headerText).modal('show');
+            },
+    
+            /**
+             * Shows an general dialog with Yes and No buttons populated with the
+             * specified dialog content.
+             *
+             * @argument {object} options       Dialog options
+             */
+            showYesNoDialog: function (options) {
+                options = $.extend({
+                    headerText: '',
+                    dialogContent: '',
+                    yesText: 'Yes',
+                    noText: 'No'
+                }, options);
+    
+                // add the content to the prompt
+                var content = $('<p></p>').append(options.dialogContent);
+                $('#nf-yes-no-dialog-content').append(content);
+    
+                // update the button model
+                $('#nf-yes-no-dialog').modal('setButtonModel', [{
+                    buttonText: options.yesText,
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // close the dialog
+                            $('#nf-yes-no-dialog').modal('hide');
+                            if (typeof options.yesHandler === 'function') {
+                                options.yesHandler.call(this);
+                            }
+                        }
+                    }
+                },
+                    {
+                        buttonText: options.noText,
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                // close the dialog
+                                $('#nf-yes-no-dialog').modal('hide');
+                                if (typeof options.noHandler === 'function') {
+                                    options.noHandler.call(this);
+                                }
+                            }
+                        }
+                    }]);
+    
+                // 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.'
+              });
+            }
+        };
+    
+      return nfDialog;
+  }));
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 000000000000..f7a538fc5d33
--- /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 define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Dialog',
+                'nf.Common'],
+            function ($, nfDialog, nfCommon) {
+                return (nf.ErrorHandler = factory($, nfDialog, nfCommon));
+            });
+    } 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 ($, nfDialog, nfCommon) {
+    '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 {
+                    nfDialog.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 nfCommon errors.
+            if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409 || xhr.status === 503) {
+                nfDialog.showOkDialog({
+                    headerText: 'Error',
+                    dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                });
+            } else if (xhr.status === 403) {
+                nfDialog.showOkDialog({
+                    headerText: 'Insufficient Permissions',
+                    dialogContent: nfCommon.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 (nfCommon.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-namespace.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-namespace.js
new file mode 100644
index 000000000000..7301e37f122b
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-namespace.js
@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+// register the nf namespace
+var nf;
+if (!nf)
+    nf = {};
\ 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
new file mode 100644
index 000000000000..7ffc56021cbc
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js
@@ -0,0 +1,109 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([], 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
new file mode 100644
index 000000000000..5e7b267a84c7
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js
@@ -0,0 +1,74 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['nf.ng.Bridge',
+                'nf.Common',
+                'nf.CanvasUtils',
+                'nf.ClusterSummary',
+                'nf.Actions'],
+            function (nfNgBridge, nfCanvasUtils, nfCommon, nfClusterSummary, nfActions) {
+                return (nf.ng.AppCtrl = factory(nfNgBridge, nfCanvasUtils, nfCommon, nfClusterSummary, nfActions));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.ng.AppCtrl =
+            factory(require('nf.ng.Bridge'),
+                require('nf.CanvasUtils'),
+                require('nf.Common'),
+                require('nf.ClusterSummary'),
+                require('nf.Actions')));
+    } else {
+        nf.ng.AppCtrl = factory(root.nf.ng.Bridge,
+            root.nf.CanvasUtils,
+            root.nf.Common,
+            root.nf.ClusterSummary,
+            root.nf.Actions);
+    }
+}(this, function (nfNgBridge, nfCanvasUtils, nfCommon, nfClusterSummary, nfActions) {
+    'use strict';
+
+    return function ($scope, serviceProvider) {
+        'use strict';
+
+        function AppCtrl(serviceProvider) {
+            //add essential modules to the scope for availability throughout the angular container
+            this.nf = {
+                "Common": nfCommon,
+                "ClusterSummary": nfClusterSummary,
+                "Actions": nfActions,
+                "CanvasUtils": nfCanvasUtils,
+            };
+
+            //any registered angular service is available through the serviceProvider
+            this.serviceProvider = serviceProvider;
+        }
+
+        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
+        nfNgBridge.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
new file mode 100644
index 000000000000..8d50f6443530
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js
@@ -0,0 +1,98 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['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() {
+        this.rootScope;
+        this.injector;
+    };
+    AngularBridge.prototype = {
+        constructor: AngularBridge,
+
+        /**
+         * Inspects the root scope of the bridged angular application to look up
+         * objects (to be provided as the `this` context) and invoke methods.
+         *
+         * @param {string} thisArg          The value of `this` provided for the call to `fun`.
+         *                                  Note that this may not be the actual value seen
+         *                                  by the method: if the method is a function in
+         *                                  non-strict mode code, null and undefined will be
+         *                                  replaced with the global object, and primitive
+         *                                  values will be boxed.
+         * @param {string} fun              The function to call.
+         * @param [, arg1[, arg2[, ...]]]   Arguments for the `fun`
+         * @returns {*}                     The value of the `fun` if `fun` returns a value.
+         *
+         */
+        call: function (thisArg, fun) {
+            var objArray = thisArg.split(".");
+            var obj = this.rootScope;
+            angular.forEach(objArray, function (value) {
+                obj = obj[value];
+            });
+            var funArray = fun.split(".");
+            fun = this.rootScope;
+            angular.forEach(funArray, function (value) {
+                fun = fun[value];
+            });
+
+            var args = Array.prototype.slice.call(arguments, 2);
+            var result = fun.apply(obj, args);
+
+            if (result) {
+                return result;
+            }
+        },
+
+        /**
+         * Inspects the root scope of the bridged angular application to look up
+         * and return object.
+         *
+         * @param {string} name     The (dot notation) name of the object to lookup.
+         * @returns {Object|*}
+         */
+        get: function (name) {
+            var objArray = name.split(".");
+            var obj = this.rootScope;
+            angular.forEach(objArray, function (value) {
+                obj = obj[value];
+            });
+
+            return obj;
+        },
+
+        digest: function () {
+            this.rootScope.$digest();
+        }
+    };
+
+    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-namespace.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-namespace.js
new file mode 100644
index 000000000000..87b790a7f95d
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-namespace.js
@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+// register the nf.ng namespace
+if (!nf.ng)
+    nf.ng = {};
\ 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
new file mode 100644
index 000000000000..958360267e01
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-service-provider.js
@@ -0,0 +1,62 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([], 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';
+
+    return function () {
+        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) {
+                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
new file mode 100644
index 000000000000..1b6b28a36351
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
@@ -0,0 +1,325 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.UniversalCapture',
+                'nf.Dialog',
+                'nf.ErrorHandler',
+                'nf.CustomUi',
+                'nf.ClusterSummary'],
+            function ($, nfCommon, nfUniversalCapture, nfDialog, nfErrorHandler, nfCustomUi, nfClusterSummary) {
+                return (nf.ProcessorDetails = factory($, nfCommon, nfUniversalCapture, nfDialog, nfErrorHandler, nfCustomUi, nfClusterSummary));
+            });
+    } 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 ($, nfCommon, nfUniversalCapture, nfDialog, nfErrorHandler, nfCustomUi, nfClusterSummary) {
+    'use strict';
+
+    /**
+     * Creates an option for the specified relationship name.
+     *
+     * @argument {object} relationship      The relationship
+     */
+    var createRelationshipOption = function (relationship) {
+        var relationshipLabel = $('<div class="relationship-name ellipsis"></div>').text(relationship.name);
+
+        // build the relationship checkbox element
+        if (relationship.autoTerminate === true) {
+            relationshipLabel.css('font-weight', 'bold');
+        }
+
+        // build the relationship container element
+        var relationshipContainerElement = $('<div class="processor-relationship-container"></div>').append(relationshipLabel).appendTo('#read-only-auto-terminate-relationship-names');
+        if (!nfCommon.isBlank(relationship.description)) {
+            var relationshipDescription = $('<div class="relationship-description"></div>').text(relationship.description);
+            relationshipContainerElement.append(relationshipDescription);
+        }
+
+        return relationshipContainerElement;
+    };
+
+    return {
+        /**
+         * Initializes the processor details dialog.
+         */
+        init: function (supportsGoTo) {
+
+            // initialize the properties tabs
+            $('#processor-details-tabs').tabbs({
+                tabStyle: 'tab',
+                selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
+                tabs: [{
+                    name: 'Settings',
+                    tabContentId: 'details-standard-settings-tab-content'
+                }, {
+                    name: 'Scheduling',
+                    tabContentId: 'details-scheduling-tab-content'
+                }, {
+                    name: 'Properties',
+                    tabContentId: 'details-processor-properties-tab-content'
+                }, {
+                    name: 'Comments',
+                    tabContentId: 'details-processor-comments-tab-content'
+                }],
+                select: function () {
+                    // remove all property detail dialogs
+                    nfUniversalCapture.removeAllPropertyDetailDialogs();
+
+                    // resize the property grid in case this is the first time its rendered
+                    if ($(this).text() === 'Properties') {
+                        $('#read-only-processor-properties').propertytable('resetTableSize');
+                    }
+
+                    // show the border if processor relationship names if necessary
+                    var processorRelationships = $('#read-only-auto-terminate-relationship-names');
+                    if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > Math.round(processorRelationships.innerHeight())) {
+                        processorRelationships.css('border-width', '1px');
+                    }
+                }
+            });
+
+            // configure the processor details dialog
+            $('#processor-details').modal({
+                headerText: 'Processor Details',
+                scrollableContentStyle: 'scrollable',
+                handler: {
+                    close: function () {
+                        // empty the relationship list
+                        $('#read-only-auto-terminate-relationship-names').css('border-width', '0').empty();
+
+                        // clear the property grid
+                        $('#read-only-processor-properties').propertytable('clear');
+
+                        // clear the processor details
+                        nfCommon.clearField('read-only-processor-id');
+                        nfCommon.clearField('read-only-processor-type');
+                        nfCommon.clearField('read-only-processor-name');
+                        nfCommon.clearField('read-only-concurrently-schedulable-tasks');
+                        nfCommon.clearField('read-only-scheduling-period');
+                        nfCommon.clearField('read-only-penalty-duration');
+                        nfCommon.clearField('read-only-yield-duration');
+                        nfCommon.clearField('read-only-run-duration');
+                        nfCommon.clearField('read-only-bulletin-level');
+                        nfCommon.clearField('read-only-execution-node');
+                        nfCommon.clearField('read-only-execution-status');
+                        nfCommon.clearField('read-only-processor-comments');
+
+                        // removed the cached processor details
+                        $('#processor-details').removeData('processorDetails');
+                        $('#processor-details').removeData('processorHistory');
+                    },
+                    open: function () {
+                        nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                    }
+                }
+            });
+
+            // initialize the properties
+            $('#read-only-processor-properties').propertytable({
+                supportsGoTo: supportsGoTo,
+                readOnly: true
+            });
+        },
+
+        /**
+         * Shows the details for the specified processor.
+         *
+         * @argument {string} groupId       The group id
+         * @argument {string} processorId   The processor id
+         */
+        showDetails: function (groupId, processorId) {
+            // load the properties for the specified processor
+            var getProcessor = $.ajax({
+                type: 'GET',
+                url: '../nifi-api/processors/' + encodeURIComponent(processorId),
+                dataType: 'json'
+            }).done(function (response) {
+                if (nfCommon.isDefinedAndNotNull(response.component)) {
+                    // get the processor details
+                    var details = response.component;
+
+                    // record the processor details
+                    $('#processor-details').data('processorDetails', details);
+
+                    // populate the processor settings
+                    nfCommon.populateField('read-only-processor-id', details['id']);
+                    nfCommon.populateField('read-only-processor-type', nfCommon.substringAfterLast(details['type'], '.'));
+                    nfCommon.populateField('read-only-processor-name', details['name']);
+                    nfCommon.populateField('read-only-concurrently-schedulable-tasks', details.config['concurrentlySchedulableTaskCount']);
+                    nfCommon.populateField('read-only-scheduling-period', details.config['schedulingPeriod']);
+                    nfCommon.populateField('read-only-penalty-duration', details.config['penaltyDuration']);
+                    nfCommon.populateField('read-only-yield-duration', details.config['yieldDuration']);
+                    nfCommon.populateField('read-only-run-duration', nfCommon.formatDuration(details.config['runDurationMillis']));
+                    nfCommon.populateField('read-only-bulletin-level', details.config['bulletinLevel']);
+                    nfCommon.populateField('read-only-processor-comments', details.config['comments']);
+
+                    var showRunSchedule = true;
+
+                    var schedulingStrategy = details.config['schedulingStrategy'];
+
+                    // make the scheduling strategy human readable
+                    if (schedulingStrategy === 'EVENT_DRIVEN') {
+                        showRunSchedule = false;
+                        schedulingStrategy = 'Event driven';
+                    } else if (schedulingStrategy === 'CRON_DRIVEN') {
+                        schedulingStrategy = 'CRON driven';
+                    } else if (schedulingStrategy === 'TIMER_DRIVEN') {
+                        schedulingStrategy = "Timer driven";
+                    } else {
+                        schedulingStrategy = "On primary node";
+                    }
+                    nfCommon.populateField('read-only-scheduling-strategy', schedulingStrategy);
+
+                    // only show the run schedule when applicable
+                    if (showRunSchedule === true) {
+                        $('#read-only-run-schedule').show();
+                    } else {
+                        $('#read-only-run-schedule').hide();
+                    }
+
+                    var executionNode = details.config['executionNode'];
+
+                    // only show the execution-node when applicable
+                    if (nfClusterSummary.isClustered() || executionNode === 'PRIMARY') {
+                        if (executionNode === 'ALL') {
+                            executionNode = "All nodes";
+                        } else if (executionNode === 'PRIMARY') {
+                            executionNode = "Primary node only";
+                        }
+                        nfCommon.populateField('read-only-execution-node', executionNode);
+
+                        $('#read-only-execution-node-options').show();
+                    } else {
+                        $('#read-only-execution-node-options').hide();
+                    }
+
+                    // load the relationship list
+                    if (!nfCommon.isEmpty(details.relationships)) {
+                        $.each(details.relationships, function (i, relationship) {
+                            createRelationshipOption(relationship);
+                        });
+                    } else {
+                        $('#read-only-auto-terminate-relationship-names').append('<div class="unset">This processor has no relationships.</div>');
+                    }
+                }
+            });
+
+            // get the processor history
+            var getProcessorHistory = $.ajax({
+                type: 'GET',
+                url: '../nifi-api/flow/history/components/' + encodeURIComponent(processorId),
+                dataType: 'json'
+            }).done(function (response) {
+                var processorHistory = response.componentHistory;
+
+                // record the processor history
+                $('#processor-details').data('processorHistory', processorHistory);
+            });
+
+            // show the dialog once we have the processor and its history
+            $.when(getProcessor, getProcessorHistory).done(function (processorResult, historyResult) {
+                var processorResponse = processorResult[0];
+                var processor = processorResponse.component;
+                var historyResponse = historyResult[0];
+                var history = historyResponse.componentHistory;
+
+                // load the properties
+                $('#read-only-processor-properties').propertytable('loadProperties', processor.config.properties, processor.config.descriptors, history.propertyHistory);
+
+                var buttons = [{
+                    buttonText: 'Ok',
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // hide the dialog
+                            $('#processor-details').modal('hide');
+                        }
+                    }
+                }];
+
+                // determine if we should show the advanced button
+                if (top === window && nfCommon.isDefinedAndNotNull(nfCustomUi) && nfCommon.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') {
+                    buttons.push({
+                        buttonText: 'Advanced',
+                        clazz: 'fa fa-cog button-icon',
+                        color: {
+                            base: '#E3E8EB',
+                            hover: '#C7D2D7',
+                            text: '#004849'
+                        },
+                        handler: {
+                            click: function () {
+                                // reset state and close the dialog manually to avoid hiding the faded background
+                                $('#processor-details').modal('hide');
+
+                                // show the custom ui
+                                nfCustomUi.showCustomUi(processorResponse, processor.config.customUiUrl, false);
+                            }
+                        }
+                    });
+                }
+
+                // show the dialog
+                $('#processor-details').modal('setButtonModel', buttons).modal('show');
+
+                // add ellipsis if necessary
+                $('#processor-details div.relationship-name').ellipsis();
+
+                // show the border if necessary
+                var processorRelationships = $('#read-only-auto-terminate-relationship-names');
+                if (processorRelationships.is(':visible') && processorRelationships.get(0).scrollHeight > Math.round(processorRelationships.innerHeight())) {
+                    processorRelationships.css('border-width', '1px');
+                }
+            }).fail(function (xhr, status, error) {
+                if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
+                    nfDialog.showOkDialog({
+                        headerText: 'Error',
+                        dialogContent: nfCommon.escapeHtml(xhr.responseText)
+                    });
+                } else {
+                    nfErrorHandler.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
new file mode 100644
index 000000000000..9296f217b402
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
@@ -0,0 +1,214 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common'],
+            function ($, nfCommon) {
+                return (nf.Shell = factory($, nfCommon));
+            });
+    } else if (typeof exports === 'object' && typeof module === 'object') {
+        module.exports = (nf.Shell = factory(require('jquery'),
+            require('nf.Common')));
+    } else {
+        nf.Shell = factory(root.$,
+            root.nf.Common);
+    }
+}(this, function ($, nfCommon) {
+    'use strict';
+
+    $(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');
+        });
+
+        // register a listener when the frame is undocked
+        $('#shell-undock-button').click(function () {
+            var uri = $('#shell-iframe').attr('src');
+            if (!nfCommon.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;
+    var nfContextMenu = null;
+
+    return {
+
+        /**
+         * Initialize the shell.
+         *
+         * @param nfContextMenuRef    The nfContextMenu module.
+         */
+        init: function (nfContextMenuRef) {
+            nfContextMenu = nfContextMenuRef;
+        },
+
+        resizeContent: function (shell) {
+            var contentContainer = shell.find('.shell-content-container');
+            contentContainer.css({
+                width: shell.width(),
+                height: shell.height() - 28 - 40 //subtract shell-close-container and padding
+            });
+            shell.trigger("shell:content:resize");
+        },
+
+        // handle resize
+        resizeIframe: function (shell) {
+            var shellIframe = shell.find('#shell-iframe');
+            shellIframe.css({
+                width: shell.width(),
+                height: shell.height() - 28 - 40 //subtract shell-close-container and padding
+            });
+            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 (nfCommon.isDefinedAndNotNull(nfContextMenu)) {
+                nfContextMenu.hide();
+            }
+
+            return $.Deferred(function (deferred) {
+                var shell = $('#shell');
+
+                // default undockable to true
+                if (nfCommon.isNull(canUndock) || nfCommon.isUndefined(canUndock)) {
+                    canUndock = true;
+                }
+
+                // register a new close handler
+                $('#shell-dialog').modal('setCloseHandler', function () {
+                    // remove the previous contents of the shell
+                    shell.empty();
+                    deferred.resolve();
+                });
+
+                // register a new open handler
+                $('#shell-dialog').modal('setOpenHandler', function () {
+                    nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                });
+
+                // show the custom processor ui
+                $('#shell-dialog').modal('show');
+
+                // conditionally show the undock button
+                if (canUndock) {
+                    $('#shell-undock-button').show();
+                } else {
+                    $('#shell-undock-button').hide();
+                }
+
+                // create an iframe to hold the custom ui
+                var shellIframe = $('<iframe/>', {
+                    id: 'shell-iframe',
+                    frameBorder: '0',
+                    src: uri
+                }).css({
+                    width: shell.width(),
+                    height: shell.height() - 28 //subtract shell-close-container
+                }).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 (nfCommon.isDefinedAndNotNull(nfContextMenu)) {
+                nfContextMenu.hide();
+            }
+
+            return $.Deferred(function (deferred) {
+                var content = $(domId);
+                if (content.length) {
+                    var shell = $('#shell');
+
+                    // get the parent of the content and detach it
+                    var parent = content.parent();
+                    content.detach();
+
+                    // register a new close handler
+                    $('#shell-dialog').modal('setCloseHandler', function () {
+                        // close any open combos
+                        var combos = $('.combo');
+                        for (var i = 0, len = combos.length; i < len; i++) {
+                            if ($(combos[i]).is(':visible')) {
+                                $(combos[i]).combo('close');
+                            }
+                        }
+
+                        deferred.resolve();
+
+                        // detach the content and add it back to the parent
+                        content.hide().detach().appendTo(parent);
+
+                        // remove the previous contents of the shell
+                        shell.empty();
+                    });
+
+                    // hide the undock button
+                    $('#shell-undock-button').hide();
+
+                    // open the shell dialog
+                    $('#shell-dialog').modal('show');
+
+                    // create the content container
+                    var contentContainer = $('<div>').addClass('shell-content-container').css({
+                        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
new file mode 100644
index 000000000000..8ddf99e6ccc2
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
@@ -0,0 +1,1188 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+              'd3',
+              'nf.Common',
+              'nf.Dialog',
+              'nf.ErrorHandler'],
+              function ($, d3, nfCommon, nfDialog, nfErrorHandler) {
+              return (nf.StatusHistory = factory($, d3, nfCommon, nfDialog, nfErrorHandler));
+          });
+      } 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, nfCommon, nfDialog, nfErrorHandler) {
+        var config = {
+            nifiInstanceId: 'nifi-instance-id',
+            nifiInstanceLabel: nf._.msg('nf-status-history.NiFi'),
+            type: {
+                processor: 'Processor',
+                inputPort: 'Input Port',
+                outputPort: 'Output Port',
+                processGroup: 'Process Group',
+                remoteProcessGroup: 'Remote Process Group',
+                connection: 'Connection',
+                funnel: 'Funnel',
+                template: 'Template',
+                label: 'Label'
+            },
+            urls: {
+                api: '../nifi-api'
+            }
+        };
+    
+        /**
+         * Mapping of formatters to use for the chart's y axis.
+         */
+        var formatters = {
+            'DURATION': function (d) {
+              return nfCommon.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 nfCommon.formatInteger(d);
+                } else {
+                  return nfCommon.formatFloat(d);
+                }
+            },
+            'DATA_SIZE': function (d) {
+              return nfCommon.formatDataSize(d);
+            }
+        };
+    
+        /**
+         * The time offset of the server.
+         */
+        var serverTimeOffset = null;
+    
+        /**
+         * The current extent of the brush.
+         */
+        var brushExtent = null;
+    
+        /**
+         * The currently selected descriptor.
+         */
+        var descriptor = null;
+    
+        /**
+         * The instances and whether they are visible or not
+         */
+        var instances = null;
+    
+        /**
+         * Handles the status history response.
+         *
+         * @param {string} groupId
+         * @param {string} id
+         * @param {object} componentStatusHistory
+         * @param {string} componentType
+         * @param {object} selectedDescriptor
+         */
+        var handleStatusHistoryResponse = function (groupId, id, componentStatusHistory, componentType, selectedDescriptor) {
+            // update the last refreshed
+            $('#status-history-last-refreshed').text(componentStatusHistory.generated);
+    
+            // initialize the status history
+            var statusHistory = {
+                groupId: groupId,
+                id: id,
+                type: componentType,
+                instances: []
+            };
+    
+            // get the descriptors
+            var descriptors = componentStatusHistory.fieldDescriptors;
+            statusHistory.details = componentStatusHistory.componentDetails;
+          statusHistory.selectedDescriptor = nfCommon.isUndefined(selectedDescriptor) ? descriptors[0] : selectedDescriptor;
+    
+            // ensure enough status snapshots
+          if (nfCommon.isDefinedAndNotNull(componentStatusHistory.aggregateSnapshots) && componentStatusHistory.aggregateSnapshots.length > 1) {
+                statusHistory.instances.push({
+                    id: config.nifiInstanceId,
+                    label: config.nifiInstanceLabel,
+                    snapshots: componentStatusHistory.aggregateSnapshots
+                });
+            } else {
+                insufficientHistory();
+                return;
+            }
+    
+            // get the status for each node in the cluster if applicable
+            $.each(componentStatusHistory.nodeSnapshots, function (_, nodeSnapshots) {
+                // ensure enough status snapshots
+              if (nfCommon.isDefinedAndNotNull(nodeSnapshots.statusSnapshots) && nodeSnapshots.statusSnapshots.length > 1) {
+                    statusHistory.instances.push({
+                        id: nodeSnapshots.nodeId,
+                        label: nodeSnapshots.address + ':' + nodeSnapshots.apiPort,
+                        snapshots: nodeSnapshots.statusSnapshots
+                    });
+                }
+            });
+    
+            // ensure we found eligible status history
+            if (statusHistory.instances.length > 0) {
+                // store the status history
+                $('#status-history-dialog').data('status-history', statusHistory);
+    
+                // chart the status history
+                chart(statusHistory, descriptors);
+            } else {
+                insufficientHistory();
+            }
+        };
+    
+        /**
+         * Shows an error message stating there is insufficient history available.
+         */
+        var insufficientHistory = function () {
+            // notify the user
+          nfDialog.showOkDialog({
+                headerText: nf._.msg('nf-status-history.StatusHistory'),
+                dialogContent: nf._.msg('nf-status-history.Message')
+            });
+        };
+    
+        /**
+         * Builds the chart using the statusHistory and the available fields.
+         *
+         * @param {type} statusHistory
+         * @param {type} descriptors
+         */
+        var chart = function (statusHistory, descriptors) {
+            if (instances === null) {
+                instances = {};
+            }
+    
+            // go through each instance of this status history
+            $.each(statusHistory.instances, function (_, instance) {
+                // and convert each timestamp accordingly
+                instance.snapshots.forEach(function (d) {
+                    // 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
+                    d.timestamp = new Date(d.timestamp + userTimeOffset + serverTimeOffset);
+                });
+            });
+    
+            // this will trigger the chart to be updated
+            setAvailableFields(descriptors, statusHistory.selectedDescriptor);
+        };
+    
+        /**
+         * Sets the available fields.
+         *
+         * @param {type} descriptors
+         * @param {type} selected
+         */
+        var setAvailableFields = function (descriptors, selected) {
+            var options = [];
+            $.each(descriptors, function (_, d) {
+                options.push({
+                    text: d.label,
+                    value: d.field,
+                  description: nfCommon.escapeHtml(d.description)
+                });
+            });
+    
+            // build the combo with the available fields
+            $('#status-history-metric-combo').combo({
+                selectedOption: {
+                    value: selected.field
+                },
+                options: options,
+                select: function (selectedOption) {
+                    // find the corresponding descriptor
+                    var selectedDescriptor = null;
+                    $.each(descriptors, function (_, d) {
+                        if (selectedOption.value === d.field) {
+                            selectedDescriptor = d;
+                            return false;
+                        }
+                    });
+    
+                    // ensure the descriptor was found
+                    if (selectedDescriptor !== null) {
+                        // clear the current extent if this is a newly selected descriptor
+                        if (descriptor === null || descriptor.field !== selectedDescriptor.field) {
+                            brushExtent = null;
+                        }
+    
+                        // record the currently selected descriptor
+                        descriptor = selectedDescriptor;
+    
+                        // update the selected chart
+                        var statusHistory = $('#status-history-dialog').data('status-history');
+                        statusHistory.selectedDescriptor = selectedDescriptor;
+                        $('#status-history-dialog').data('status-history', statusHistory);
+    
+                        // update the chart
+                        updateChart();
+                    }
+                }
+            });
+    
+            $('#status-history-dialog').modal('show');
+        };
+    
+        var getChartMinHeight = function () {
+            return $('#status-history-chart-container').parent().outerHeight() - $('#status-history-chart-control-container').outerHeight() -
+                parseInt($('#status-history-chart-control-container').css('margin-top'), 10);
+        };
+    
+        var getChartMaxHeight = function () {
+            return $('body').height() - $('#status-history-chart-control-container').outerHeight() -
+                $('#status-history-refresh-container').outerHeight() -
+                parseInt($('#status-history-chart-control-container').css('margin-top'), 10) -
+                parseInt($('.dialog-content').css('top')) - parseInt($('.dialog-content').css('bottom'));
+        };
+    
+        var getChartMaxWidth = function () {
+            return $('body').width() - $('#status-history-details').innerWidth() -
+                parseInt($('#status-history-dialog').css('left'), 10) -
+                parseInt($('.dialog-content').css('left')) - parseInt($('.dialog-content').css('right'));
+        };
+    
+        /**
+         * Updates the chart with the specified status history and the selected field.
+         */
+        var updateChart = function () {
+    
+            var statusHistoryDialog = $('#status-history-dialog');
+    
+            if (statusHistoryDialog.is(':visible')) {
+                var statusHistory = statusHistoryDialog.data('status-history');
+    
+                // get the selected descriptor
+                var selectedDescriptor = statusHistory.selectedDescriptor;
+    
+                // remove current details
+                $('#status-history-details').empty();
+    
+                // add status history details
+                var detailsContainer = buildDetailsContainer(nf._.msg('nf-status-history.StatusHistory'));
+                d3.map(statusHistory.details).forEach(function (label, value) {
+                    addDetailItem(detailsContainer, label, value);
+                });
+    
+                var margin = {
+                    top: 15,
+                    right: 20,
+                    bottom: 25,
+                    left: 75
+                };
+    
+                // -------------
+                // prep the data
+                // -------------
+    
+                // available colors
+                var color = d3.scale.category10();
+    
+                // determine the available instances
+                var instanceLabels = [];
+                $.each(statusHistory.instances, function (_, instance) {
+                    instanceLabels.push(instance.label);
+                });
+    
+                // specify the domain based on the detected instances
+                color.domain(instanceLabels);
+    
+                // data for the chart
+                var statusData = [];
+    
+                // 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 (nfCommon.isUndefinedOrNull(instances[instance.id])) {
+                        instances[instance.id] = true;
+                    }
+    
+                    // and convert the model
+                    statusData.push({
+                        id: instance.id,
+                        label: instance.label,
+                        values: $.map(instance.snapshots, function (d) {
+                            return {
+                                timestamp: d.timestamp,
+                                value: d.statusMetrics[selectedDescriptor.field]
+                            };
+                        }),
+                        visible: instances[instance.id] === true
+                    });
+                });
+    
+                // --------------------------
+                // custom time axis formatter
+                // --------------------------
+    
+                var customTimeFormat = d3.time.format.multi([
+                    [':%S.%L', function (d) {
+                        return d.getMilliseconds();
+                    }],
+                    [':%S', function (d) {
+                        return d.getSeconds();
+                    }],
+                    ['%H:%M', function (d) {
+                        return d.getMinutes();
+                    }],
+                    ['%H:%M', function (d) {
+                        return d.getHours();
+                    }],
+                    ['%a %d', function (d) {
+                        return d.getDay() && d.getDate() !== 1;
+                    }],
+                    ['%b %d', function (d) {
+                        return d.getDate() !== 1;
+                    }],
+                    ['%B', function (d) {
+                        return d.getMonth();
+                    }],
+                    ['%Y', function () {
+                        return true;
+                    }]
+                ]);
+    
+                // ----------
+                // main chart
+                // ----------
+    
+                // the container for the main chart
+                var chartContainer = $('#status-history-chart-container').empty();
+                if (chartContainer.hasClass('ui-resizable')) {
+                    chartContainer.resizable('destroy');
+                    chartContainer.removeAttr("style");
+                }
+    
+                // calculate the dimensions
+                chartContainer.height(getChartMinHeight());
+    
+                // determine the new width/height
+                var width = chartContainer.outerWidth() - margin.left - margin.right;
+                var height = chartContainer.outerHeight() - margin.top - margin.bottom;
+    
+                maxWidth = $('#status-history-container').width();
+                if (width > maxWidth) {
+                    width = maxWidth;
+                }
+    
+                maxHeight = getChartMaxHeight();
+                if (height > maxHeight) {
+                    height = maxHeight;
+                }
+    
+                // define the x axis for the main chart
+                var x = d3.time.scale()
+                    .range([0, width]);
+    
+                var xAxis = d3.svg.axis()
+                    .scale(x)
+                    .ticks(5)
+                    .tickFormat(customTimeFormat)
+                    .orient('bottom');
+    
+                // define the y axis
+                var y = d3.scale.linear()
+                    .range([height, 0]);
+    
+                var yAxis = d3.svg.axis()
+                    .scale(y)
+                    .tickFormat(formatters[selectedDescriptor.formatter])
+                    .orient('left');
+    
+    
+                // status line
+                var line = d3.svg.line()
+                    .interpolate('monotone')
+                    .x(function (d) {
+                        return x(d.timestamp);
+                    })
+                    .y(function (d) {
+                        return y(d.value);
+                    });
+    
+                // build the chart svg
+                var chartSvg = d3.select('#status-history-chart-container').append('svg')
+                    .attr('style', 'pointer-events: none;')
+                    .attr('width', chartContainer.parent().width())
+                    .attr('height', chartContainer.innerHeight());
+                // define a clip the path
+                var clipPath = chartSvg.append('defs').append('clipPath')
+                    .attr('id', 'clip')
+                    .append('rect')
+                    .attr('width', width)
+                    .attr('height', height);
+    
+                // build the chart
+                var chart = chartSvg.append('g')
+                    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
+    
+                // determine the min/max date
+                var minDate = d3.min(statusData, function (d) {
+                    return d3.min(d.values, function (s) {
+                        return s.timestamp;
+                    });
+                });
+                var maxDate = d3.max(statusData, function (d) {
+                    return d3.max(d.values, function (s) {
+                        return s.timestamp;
+                    });
+                });
+                addDetailItem(detailsContainer, nf._.msg('nf-status-history.Start'), nf.Common.formatDateTime(minDate));
+                addDetailItem(detailsContainer, nf._.msg('nf-status-history.End'), nf.Common.formatDateTime(maxDate));
+    
+                // determine the x axis range
+                x.domain([minDate, maxDate]);
+    
+                // determine the y axis range
+                y.domain([getMinValue(statusData), getMaxValue(statusData)]);
+    
+                // build the x axis
+                chart.append('g')
+                    .attr('class', 'x axis')
+                    .attr('transform', 'translate(0, ' + height + ')')
+                    .call(xAxis);
+    
+                // build the y axis
+                chart.append('g')
+                    .attr('class', 'y axis')
+                    .call(yAxis)
+                    .append('text')
+                    .attr('transform', 'rotate(-90)')
+                    .attr('y', 6)
+                    .attr('dy', '.71em')
+                    .attr('text-anchor', 'end')
+                    .text(selectedDescriptor.label);
+    
+                // build the chart
+                var status = chart.selectAll('.status')
+                    .data(statusData)
+                    .enter()
+                    .append('g')
+                    .attr('clip-path', 'url(#clip)')
+                    .attr('class', 'status');
+    
+                // draw the lines
+                status.append('path')
+                    .attr('class', function (d) {
+                        return 'chart-line chart-line-' + d.id;
+                    })
+                    .attr('d', function (d) {
+                        return line(d.values);
+                    })
+                    .attr('stroke', function (d) {
+                        return color(d.label);
+                    })
+                    .classed('hidden', function (d) {
+                        return d.visible === false;
+                    })
+                    .append('title')
+                    .text(function (d) {
+                        return d.label;
+                    });
+    
+                // draw the control points for each line
+                status.each(function (d) {
+                    // create a group for the control points
+                    var markGroup = d3.select(this).append('g')
+                        .attr('class', function () {
+                            return 'mark-group mark-group-' + d.id;
+                        })
+                        .classed('hidden', function (d) {
+                            return d.visible === false;
+                        });
+    
+                    // draw the control points
+                    markGroup.selectAll('circle.mark')
+                        .data(d.values)
+                        .enter()
+                        .append('circle')
+                        .attr('style', 'pointer-events: all;')
+                        .attr('class', 'mark')
+                        .attr('cx', function (v) {
+                            return x(v.timestamp);
+                        })
+                        .attr('cy', function (v) {
+                            return y(v.value);
+                        })
+                        .attr('fill', function () {
+                            return color(d.label);
+                        })
+                        .attr('r', 1.5)
+                        .append('title')
+                        .text(function (v) {
+                            return d.label + ' -- ' + formatters[selectedDescriptor.formatter](v.value);
+                        });
+                });
+    
+                // update the size of the chart
+                chartSvg.attr('width', chartContainer.parent().width())
+                    .attr('height', chartContainer.innerHeight());
+    
+                // update the size of the clipper
+                clipPath.attr('width', width)
+                    .attr('height', height);
+    
+                // update the position of the x axis
+                chart.select('.x.axis').attr('transform', 'translate(0, ' + height + ')');
+    
+                // -------------
+                // control chart
+                // -------------
+    
+                // the container for the main chart control
+                var chartControlContainer = $('#status-history-chart-control-container').empty();
+                var controlHeight = chartControlContainer.innerHeight() - margin.top - margin.bottom;
+    
+                var xControl = d3.time.scale()
+                    .range([0, width]);
+    
+                var xControlAxis = d3.svg.axis()
+                    .scale(xControl)
+                    .ticks(5)
+                    .tickFormat(customTimeFormat)
+                    .orient('bottom');
+    
+                var yControl = d3.scale.linear()
+                    .range([controlHeight, 0]);
+    
+                var yControlAxis = d3.svg.axis()
+                    .scale(yControl)
+                    .tickValues(y.domain())
+                    .tickFormat(formatters[selectedDescriptor.formatter])
+                    .orient('left');
+    
+                // status line
+                var controlLine = d3.svg.line()
+                    .interpolate('monotone')
+                    .x(function (d) {
+                        return xControl(d.timestamp);
+                    })
+                    .y(function (d) {
+                        return yControl(d.value);
+                    });
+    
+                // build the svg
+                var controlChartSvg = d3.select('#status-history-chart-control-container').append('svg')
+                    .attr('width', chartContainer.parent().width())
+                    .attr('height', controlHeight + margin.top + margin.bottom);
+    
+                // build the control chart
+                var control = controlChartSvg.append('g')
+                    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
+    
+                // increase the y domain slightly
+                var yControlDomain = y.domain();
+                yControlDomain[1] *= 1.04;
+    
+                // define the domain for the control chart
+                xControl.domain(x.domain());
+                yControl.domain(yControlDomain);
+    
+                // build the control x axis
+                control.append('g')
+                    .attr('class', 'x axis')
+                    .attr('transform', 'translate(0, ' + controlHeight + ')')
+                    .call(xControlAxis);
+    
+                // build the control y axis
+                control.append('g')
+                    .attr('class', 'y axis')
+                    .call(yControlAxis);
+    
+                // build the control chart
+                var controlStatus = control.selectAll('.status')
+                    .data(statusData)
+                    .enter()
+                    .append('g')
+                    .attr('class', 'status');
+    
+                // draw the lines
+                controlStatus.append('path')
+                    .attr('class', function (d) {
+                        return 'chart-line chart-line-' + d.id;
+                    })
+                    .attr('d', function (d) {
+                        return controlLine(d.values);
+                    })
+                    .attr('stroke', function (d) {
+                        return color(d.label);
+                    })
+                    .classed('hidden', function (d) {
+                        return instances[d.id] === false;
+                    })
+                    .append('title')
+                    .text(function (d) {
+                        return d.label;
+                    });
+    
+                // -------------------
+                // configure the brush
+                // -------------------
+    
+                /**
+                 * Updates the axis for the main chart.
+                 *
+                 * @param {array} xDomain   The new domain for the x axis
+                 * @param {array} yDomain   The new domain for the y axis
+                 */
+                var updateAxes = function (xDomain, yDomain) {
+                    // update the domain of the main chart
+                    x.domain(xDomain);
+                    y.domain(yDomain);
+    
+                    // update the chart lines
+                    status.selectAll('.chart-line')
+                        .attr('d', function (d) {
+                            return line(d.values);
+                        });
+                    status.selectAll('circle.mark')
+                        .attr('cx', function (v) {
+                            return x(v.timestamp);
+                        })
+                        .attr('cy', function (v) {
+                            return y(v.value);
+                        })
+                        .attr('r', function () {
+                            return brush.empty() ? 1.5 : 4;
+                        });
+    
+                    // update the x axis
+                    chart.select('.x.axis').call(xAxis);
+                    chart.select('.y.axis').call(yAxis);
+                };
+    
+                /**
+                 * Handles brush events by updating the main chart according to the context window
+                 * or the control domain if there is no context window.
+                 */
+                var brushed = function () {
+                    // determine the new x and y domains
+                    var xContextDomain, yContextDomain;
+                    if (brush.empty()) {
+                        // get the all visible instances
+                        var visibleInstances = $.grep(statusData, function (d) {
+                            return d.visible;
+                        });
+    
+                        // determine the appropriate y domain
+                        if (visibleInstances.length === 0) {
+                            yContextDomain = yControl.domain();
+                        } else {
+                            yContextDomain = [
+                                d3.min(visibleInstances, function (d) {
+                                    return d3.min(d.values, function (s) {
+                                        return s.value;
+                                    });
+                                }),
+                                d3.max(visibleInstances, function (d) {
+                                    return d3.max(d.values, function (s) {
+                                        return s.value;
+                                    });
+                                })
+                            ];
+                        }
+                        xContextDomain = xControl.domain();
+    
+                        // clear the current extent
+                        brushExtent = null;
+                    } else {
+                        var extent = brush.extent();
+                        xContextDomain = [extent[0][0], extent[1][0]];
+                        yContextDomain = [extent[0][1], extent[1][1]];
+    
+                        // hold onto the current brush
+                        brushExtent = extent;
+                    }
+    
+                    // update the axes accordingly
+                    updateAxes(xContextDomain, yContextDomain);
+    
+                    // update the aggregate statistics according to the new domain
+                    updateAggregateStatistics();
+                };
+    
+                // build the brush
+                var brush = d3.svg.brush()
+                    .x(xControl)
+                    .y(yControl)
+                    .on('brush', brushed);
+    
+                // conditionally set the brush extent
+              if (nfCommon.isDefinedAndNotNull(brushExtent)) {
+                    brush = brush.extent(brushExtent);
+                }
+    
+                // context area
+                control.append('g')
+                    .attr('class', 'brush')
+                    .call(brush);
+    
+                // add expansion to the extent
+                control.select('rect.extent')
+                    .attr('style', 'pointer-events: all;')
+                    .on('dblclick', function () {
+                        if (!brush.empty()) {
+                            // get the current extent to get the x range
+                            var extent = brush.extent();
+    
+                            // get the y range (this value does not change from the original y domain)
+                            var yRange = yControl.domain();
+    
+                            // expand the extent vertically
+                            brush.extent([[extent[0][0], yRange[0]], [extent[1][0], yRange[1]]]);
+    
+                            // update the brush control
+                            control.select('.brush').call(brush);
+    
+                            // run the brush to update the axes of the main chart
+                            brushed();
+                        }
+                    });
+    
+                // --------------------
+                // aggregate statistics
+                // --------------------
+    
+                var updateAggregateStatistics = function () {
+                    // locate the instances that have data points within the current brush
+                    var withinBrush = $.map(statusData, function (d) {
+                        var xDomain = x.domain();
+                        var yDomain = y.domain();
+    
+                        // copy to avoid modifying the original
+                        var copy = $.extend({}, d);
+    
+                        // update the copy to only include values within the brush
+                        return $.extend(copy, {
+                            values: $.grep(d.values, function (s) {
+                                return s.timestamp.getTime() >= xDomain[0].getTime() && s.timestamp.getTime() <= xDomain[1].getTime() && s.value >= yDomain[0] && s.value <= yDomain[1];
+                            })
+                        });
+                    });
+    
+                    // consider visible nodes with data in the brush
+                    var nodes = $.grep(withinBrush, function (d) {
+                        return d.id !== config.nifiInstanceId && d.visible && d.values.length > 0;
+                    });
+    
+                    var nodeMinValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMinValue(nodes));
+                    var nodeMeanValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMeanValue(nodes));
+                    var nodeMaxValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMaxValue(nodes));
+    
+                    // update the currently displayed min/max/mean
+                    $('#node-aggregate-statistics').text(nodeMinValue + ' / ' + nodeMaxValue + ' / ' + nodeMeanValue);
+    
+                    // only consider the cluster with data in the brush
+                    var cluster = $.grep(withinBrush, function (d) {
+                        return d.id === config.nifiInstanceId && d.visible && d.values.length > 0;
+                    });
+    
+                    // determine the cluster values
+                    var clusterMinValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMinValue(cluster));
+                    var clusterMeanValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMeanValue(cluster));
+                    var clusterMaxValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMaxValue(cluster));
+    
+                    // update the cluster min/max/mean
+                    $('#cluster-aggregate-statistics').text(clusterMinValue + ' / ' + clusterMaxValue + ' / ' + clusterMeanValue);
+                };
+    
+                // ----------------
+                // build the legend
+                // ----------------
+    
+                // identify all nodes and sort
+                var nodes = $.grep(statusData, function (status) {
+                    return status.id !== config.nifiInstanceId;
+                }).sort(function (a, b) {
+                    return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
+                });
+    
+                // adds a legend entry for the specified instance
+                var addLegendEntry = function (legend, instance) {
+                    // create the label and the checkbox
+                  var instanceLabelElement = $('<div></div>').addClass('legend-label nf-checkbox-label').css('color', color(instance.label)).text(instance.label).ellipsis();
+                    var instanceCheckboxElement = $('<div class="nf-checkbox"></div>').on('click', function () {
+                        // get the line and the control points for this instance (select all for the line to update control and main charts)
+                        var chartLine = d3.selectAll('path.chart-line-' + instance.id);
+                        var markGroup = d3.select('g.mark-group-' + instance.id);
+    
+                        // determine if it was hidden
+                        var isHidden = markGroup.classed('hidden');
+    
+                        // toggle the visibility
+                        chartLine.classed('hidden', function () {
+                            return !isHidden;
+                        });
+                        markGroup.classed('hidden', function () {
+                            return !isHidden;
+                        });
+    
+                        // update whether its visible
+                        instance.visible = isHidden;
+    
+                        // record the current status so it persists across refreshes
+                        instances[instance.id] = instance.visible;
+    
+                        // update the brush
+                        brushed();
+                    }).addClass(instance.visible ? 'checkbox-checked' : 'checkbox-unchecked');
+    
+                    // add the legend entry
+                    $('<div class="legend-entry"></div>').append(instanceCheckboxElement).append(instanceLabelElement).on('mouseenter', function () {
+                        d3.selectAll('path.chart-line-' + instance.id).classed('over', true);
+                    }).on('mouseleave', function () {
+                        d3.selectAll('path.chart-line-' + instance.id).classed('over', false);
+                    }).appendTo(legend);
+                };
+    
+                // get the cluster instance
+                var cluster = $.grep(statusData, function (status) {
+                    return status.id === config.nifiInstanceId;
+                });
+    
+                // build the cluster container
+                var clusterDetailsContainer = buildDetailsContainer(nf._.msg('nf-status-history.NiFi'));
+    
+                // add the total cluster values
+                addDetailItem(clusterDetailsContainer, nf._.msg('nf-status-history.Min_Max_Mean'), '', 'cluster-aggregate-statistics');
+    
+                // build the cluster legend
+                addLegendEntry(clusterDetailsContainer, cluster[0]);
+    
+                // if there are entries to render
+                if (nodes.length > 0) {
+                    // build the cluster container
+                    var nodeDetailsContainer = buildDetailsContainer('Nodes');
+    
+                    // add the total cluster values
+                    addDetailItem(nodeDetailsContainer, nf._.msg('nf-status-history.Min_Max_Mean'), '', 'node-aggregate-statistics');
+    
+                    // add each legend entry
+                    $.each(nodes, function (_, instance) {
+                        addLegendEntry(nodeDetailsContainer, instance);
+                    });
+                }
+    
+                // update the brush
+                brushed();
+    
+                // ---------------
+                // handle resizing
+                // ---------------
+    
+                var maxWidth, maxHeight, minHeight, resizeExtent, dialog;
+                chartContainer.append('<div class="ui-resizable-handle ui-resizable-se"></div>').resizable({
+                    minWidth: 425,
+                    minHeight: 150,
+                    handles: {
+                        'se': '.ui-resizable-se'
+                    },
+                    start: function (e, ui) {
+                        // record the current extent so it can be reset on stop
+                        if (!brush.empty()) {
+                            resizeExtent = brush.extent();
+                        }
+                    },
+                    resize: function (e, ui) {
+                        // -----------
+                        // containment
+                        // -----------
+                        dialog = $('#status-history-dialog');
+                      var nfDialogData = {};
+                      if (nfCommon.isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                          nfDialogData = dialog.data('nf-dialog');
+                        }
+                      nfDialogData['min-width'] = (dialog.width() / $(window).width()) * 100 + '%';
+                      nfDialogData['min-height'] = (dialog.height() / $(window).height()) * 100 + '%';
+                      nfDialogData.responsive['fullscreen-width'] = dialog.outerWidth() + 'px';
+                      nfDialogData.responsive['fullscreen-height'] = dialog.outerHeight() + 'px';
+    
+                        maxWidth = getChartMaxWidth();
+                        if (ui.helper.width() > maxWidth) {
+                            ui.helper.width(maxWidth);
+    
+                          nfDialogData.responsive['fullscreen-width'] = $(window).width() + 'px';
+                          nfDialogData['min-width'] = '100%';
+                        }
+    
+                        maxHeight = getChartMaxHeight();
+                        if (ui.helper.height() > maxHeight) {
+                            ui.helper.height(maxHeight);
+    
+                          nfDialogData.responsive['fullscreen-height'] = $(window).height() + 'px';
+                          nfDialogData['min-height'] = '100%';
+                        }
+    
+                        minHeight = getChartMinHeight();
+                        if (ui.helper.height() < minHeight) {
+                            ui.helper.height(minHeight);
+                        }
+    
+                      nfDialogData['min-width'] = (parseInt(nfDialogData['min-width'], 10) >= 100) ? '100%' : nfDialogData['min-width'];
+                      nfDialogData['min-height'] = (parseInt(nfDialogData['min-height'], 10) >= 100) ? '100%' : nfDialogData['min-height'];
+    
+                        //persist data attribute
+                      dialog.data('nfDialog', nfDialogData);
+    
+                        // ----------------------
+                        // status history dialog
+                        // ----------------------
+    
+                        dialog.css('min-width', (chartContainer.outerWidth() + $('#status-history-details').outerWidth() + 40));
+                        dialog.css('min-height', (chartContainer.outerHeight() +
+                        $('#status-history-refresh-container').outerHeight() + $('#status-history-chart-control-container').outerHeight() +
+                        $('.dialog-buttons').outerHeight() + $('.dialog-header').outerHeight() + 40 + 5));
+    
+                        dialog.center();
+                    },
+                    stop: updateChart
+                });
+            }
+        };
+    
+        /**
+         * Gets the minimum value from the specified instances.
+         *
+         * @param {type} nodeInstances
+         */
+        var getMinValue = function (nodeInstances) {
+            return d3.min(nodeInstances, function (d) {
+                return d3.min(d.values, function (s) {
+                    return s.value;
+                });
+            });
+        };
+    
+        /**
+         * Gets the maximum value from the specified instances.
+         *
+         * @param {type} nodeInstances
+         */
+        var getMaxValue = function (nodeInstances) {
+            return d3.max(nodeInstances, function (d) {
+                return d3.max(d.values, function (s) {
+                    return s.value;
+                });
+            });
+        };
+    
+        /**
+         * Gets the mean value from the specified instances.
+         *
+         * @param {type} nodeInstances
+         */
+        var getMeanValue = function (nodeInstances) {
+            var snapshotCount = 0;
+            var totalValue = d3.sum(nodeInstances, function (d) {
+                snapshotCount += d.values.length;
+                return d3.sum(d.values, function (s) {
+                    return s.value;
+                });
+            });
+            return totalValue / snapshotCount;
+        };
+    
+        /**
+         * Builds a details container.
+         *
+         * @param {type} label
+         */
+        var buildDetailsContainer = function (label) {
+            var detailContainer = $('<div class="status-history-detail"></div>').appendTo('#status-history-details');
+            $('<div class="detail-container-label"></div>').text(label).appendTo(detailContainer);
+            return $('<div></div>').appendTo(detailContainer);
+        };
+    
+        /**
+         * Adds a detail item and specified container.
+         *
+         * @param {type} container
+         * @param {type} label
+         * @param {type} value
+         * @param {type} valueElementId
+         */
+        var addDetailItem = function (container, label, value, valueElementId) {
+            var detailContainer = $('<div class="detail-item"></div>').appendTo(container);
+            $('<div class="setting-name"></div>').text(label).appendTo(detailContainer);
+            var detailElement = $('<div class="setting-field"></div>').text(value).appendTo(detailContainer);
+    
+          if (nfCommon.isDefinedAndNotNull(valueElementId)) {
+                detailElement.attr('id', valueElementId);
+            }
+        };
+    
+      var nfStatusHistory = {
+            /**
+             * Initializes the lineage graph.
+             *
+             * @param {integer} timeOffset The time offset of the server
+             */
+            init: function (timeOffset) {
+                serverTimeOffset = timeOffset;
+    
+                $('#status-history-refresh-button').click(function () {
+                    var statusHistory = $('#status-history-dialog').data('status-history');
+                    if (statusHistory !== null) {
+                        if (statusHistory.type === config.type.processor) {
+                          nfStatusHistory.showProcessorChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
+                        } else if (statusHistory.type === config.type.processGroup) {
+                          nfStatusHistory.showProcessGroupChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
+                        } else if (statusHistory.type === config.type.remoteProcessGroup) {
+                          nfStatusHistory.showRemoteProcessGroupChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
+                        } else {
+                          nfStatusHistory.showConnectionChart(statusHistory.groupId, statusHistory.id, statusHistory.selectedDescriptor);
+                        }
+                    }
+                });
+    
+                // configure the dialog and make it draggable
+                $('#status-history-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                    headerText: nf._.msg('nf-status-history.StatusHistory'),
+                    buttons: [{
+                        buttonText: nf._.msg('nf-status-history.Close'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                this.modal('hide');
+                            }
+                        }
+                    }],
+                    handler: {
+                        close: function () {
+                            // remove the current status history
+                            $('#status-history-dialog').removeData('status-history');
+    
+                            // reset the dom
+                            $('#status-history-chart-container').empty();
+                            $('#status-history-chart-control-container').empty();
+                            $('#status-history-details').empty();
+    
+                            // clear the extent and selected descriptor
+                            brushExtent = null;
+                            descriptor = null;
+                            instances = null;
+                        },
+                        open: updateChart
+                    }
+                });
+    
+                $(window).on('resize', function (e) {
+                    if (e.target === window) {
+                        updateChart();
+                    }
+                  nfCommon.toggleScrollable($('#status-history-details').get(0));
+                })
+            },
+    
+            /**
+             * Shows the status history for the specified connection in this instance.
+             *
+             * @param {type} groupId
+             * @param {type} connectionId
+             * @param {type} selectedDescriptor
+             */
+            showConnectionChart: function (groupId, connectionId, selectedDescriptor) {
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.api + '/flow/connections/' + encodeURIComponent(connectionId) + '/status/history',
+                    dataType: 'json'
+                }).done(function (response) {
+                    handleStatusHistoryResponse(groupId, connectionId, response.statusHistory, config.type.connection, selectedDescriptor);
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows the status history for the specified processor in this instance.
+             *
+             * @param {type} groupId
+             * @param {type} processorId
+             * @param {type} selectedDescriptor
+             */
+            showProcessorChart: function (groupId, processorId, selectedDescriptor) {
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.api + '/flow/processors/' + encodeURIComponent(processorId) + '/status/history',
+                    dataType: 'json'
+                }).done(function (response) {
+                    handleStatusHistoryResponse(groupId, processorId, response.statusHistory, config.type.processor, selectedDescriptor);
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows the status history for the specified process group in this instance.
+             *
+             * @param {type} groupId
+             * @param {type} processGroupId
+             * @param {type} selectedDescriptor
+             */
+            showProcessGroupChart: function (groupId, processGroupId, selectedDescriptor) {
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupId) + '/status/history',
+                    dataType: 'json'
+                }).done(function (response) {
+                    handleStatusHistoryResponse(groupId, processGroupId, response.statusHistory, config.type.processGroup, selectedDescriptor);
+              }).fail(nfErrorHandler.handleAjaxError);
+            },
+    
+            /**
+             * Shows the status history for the specified remote process group in this instance.
+             *
+             * @param {type} groupId
+             * @param {type} remoteProcessGroupId
+             * @param {type} selectedDescriptor
+             */
+            showRemoteProcessGroupChart: function (groupId, remoteProcessGroupId, selectedDescriptor) {
+                $.ajax({
+                    type: 'GET',
+                    url: config.urls.api + '/flow/remote-process-groups/' + encodeURIComponent(remoteProcessGroupId) + '/status/history',
+                    dataType: 'json'
+                }).done(function (response) {
+                    handleStatusHistoryResponse(groupId, remoteProcessGroupId, response.statusHistory, config.type.remoteProcessGroup, selectedDescriptor);
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+    
+      return nfStatusHistory;
+  }));
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
new file mode 100644
index 000000000000..56785f30d72e
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-storage.js
@@ -0,0 +1,195 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([], 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;
+    var TWO_DAYS = MILLIS_PER_DAY * 2;
+
+    var isUndefined = function (obj) {
+        return typeof obj === 'undefined';
+    };
+
+    var isNull = function (obj) {
+        return obj === null;
+    };
+
+    var isDefinedAndNotNull = function (obj) {
+        return !isUndefined(obj) && !isNull(obj);
+    };
+
+    /**
+     * Checks the expiration for the specified entry.
+     *
+     * @param {object} entry
+     * @returns {boolean}
+     */
+    var checkExpiration = function (entry) {
+        if (isDefinedAndNotNull(entry.expires)) {
+            // get the expiration
+            var expires = new Date(entry.expires);
+            var now = new Date();
+
+            // return whether the expiration date has passed
+            return expires.valueOf() < now.valueOf();
+        } else {
+            return false;
+        }
+    };
+
+    /**
+     * Gets an enty for the key. The entry expiration is not checked.
+     *
+     * @param {string} key
+     */
+    var getEntry = function (key) {
+        try {
+            // parse the entry
+            var entry = JSON.parse(localStorage.getItem(key));
+
+            // ensure the entry and item are present
+            if (isDefinedAndNotNull(entry)) {
+                return entry;
+            } else {
+                return null;
+            }
+        } catch (e) {
+            return null;
+        }
+    };
+
+    return {
+        /**
+         * Initializes the storage. Items will be persisted for two days. Once the scripts runs
+         * thereafter, all eligible items will be removed. This strategy does not support persistence.
+         */
+        init: function () {
+            for (var i = 0; i < localStorage.length; i++) {
+                try {
+                    // get the next item
+                    var key = localStorage.key(i);
+
+                    // attempt to get the item which will expire if necessary
+                    this.getItem(key);
+                } catch (e) {
+                }
+            }
+        },
+
+        /**
+         * Stores the specified item.
+         *
+         * @param {string} key
+         * @param {object} item
+         * @param {integer} expires
+         */
+        setItem: function (key, item, expires) {
+            // calculate the expiration
+            expires = isDefinedAndNotNull(expires) ? expires : new Date().valueOf() + TWO_DAYS;
+
+            // create the entry
+            var entry = {
+                expires: expires,
+                item: item
+            };
+
+            // 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) {
+            var entry = getEntry(key);
+            if (entry === null) {
+                return null;
+            }
+
+            // if the entry is expired, drop it and return null
+            if (checkExpiration(entry)) {
+                this.removeItem(key);
+                return null;
+            }
+
+            // if the entry has the specified field return its value
+            if (isDefinedAndNotNull(entry['item'])) {
+                return entry['item'];
+            } else {
+                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}
+         */
+        getItemExpiration: function (key) {
+            var entry = getEntry(key);
+            if (entry === null) {
+                return null;
+            }
+
+            // if the entry has the specified field return its value
+            if (isDefinedAndNotNull(entry['expires'])) {
+                return entry['expires'];
+            } else {
+                return null;
+            }
+        },
+
+        /**
+         * Removes the item with the specified key.
+         *
+         * @param {type} key
+         */
+        removeItem: function (key) {
+            localStorage.removeItem(key);
+        }
+    };
+}));
\ 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
new file mode 100644
index 000000000000..4406918712ba
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-universal-capture.js
@@ -0,0 +1,146 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery'], 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';
+
+    /**
+     * 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 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;
+                }
+
+                // consider property detail dialogs
+                if ($('div.property-detail').is(':visible')) {
+                    nfUniversalDialog.removeAllPropertyDetailDialogs();
+
+                    // 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;
+                            }
+                        }
+
+                        // 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();
+                    }
+                }
+            }
+        });
+    });
+
+    var nfUniversalDialog = {
+        /**
+         * Removes all read only property detail dialogs.
+         */
+        removeAllPropertyDetailDialogs: function () {
+            var propertyDetails = $('body').find('div.property-detail');
+            propertyDetails.find('div.nfel-editor').nfeditor('destroy'); // look for any nfel editors
+            propertyDetails.find('div.value-combo').combo('destroy'); // look for any combos
+            propertyDetails.hide().remove();
+        }
+    };
+
+    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
new file mode 100644
index 000000000000..22e82eeec159
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
@@ -0,0 +1,1423 @@
+    /*
+     * 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 top, define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'd3',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.ErrorHandler'],
+              function ($, d3, nfCommon, nfDialog, nfErrorHandler) {
+                  return (nf.ng.ProvenanceLineage = factory($, d3, nfCommon, nfDialog, nfErrorHandler));
+              });
+      } 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, nfCommon, nfDialog, nfErrorHandler) {
+      'use strict';
+  
+      var mySelf = function () {
+            'use strict';
+    
+            /**
+             * Configuration object used to hold a number of configuration items.
+             */
+            var config = {
+                sliderTickCount: 75,
+                urls: {
+                  lineage: '../nifi-api/provenance/lineage'
+  
+                }
+            };
+    
+            /**
+             * Initializes the lineage query dialog.
+             */
+            var initLineageQueryDialog = function () {
+                // initialize the dialog
+                $('#lineage-query-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                    headerText: nf._.msg('nf-provenance-lineage.Message1')
+                });
+          };
+  
+          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 {
+                  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 = $('<div class="context-menu-item"></div>').on('click', item.click).on('mouseenter', function () {
+                            $(this).addClass('hover');
+                        }).on('mouseleave', function () {
+                            $(this).removeClass('hover');
+                        }).appendTo(contextMenu);
+    
+                        // add the img and the text
+                        $('<div class="context-menu-item-img"></div>').addClass(item['class']).appendTo(menuItem);
+                        $('<div class="context-menu-item-text"></div>').text(item['text']).appendTo(menuItem);
+                        $('<div class="clear"></div>').appendTo(menuItem);
+                    }
+                });
+            };
+    
+            /**
+             * Submits the specified lineage request.
+             *
+             * @param {type} lineageRequest
+             * @returns {deferred}
+             */
+            var submitLineage = function (lineageRequest) {
+                var lineageEntity = {
+                    'lineage': {
+                        'request': lineageRequest
+                    }
+                };
+    
+                return $.ajax({
+                    type: 'POST',
+                    url: config.urls.lineage,
+                    data: JSON.stringify(lineageEntity),
+                    dataType: 'json',
+                    contentType: 'application/json'
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            /**
+             * Gets the specified lineage.
+             *
+             * @param {type} lineage
+             * @returns {deferred}
+             */
+            var getLineage = function (lineage) {
+                var url = lineage.uri;
+              if (nfCommon.isDefinedAndNotNull(lineage.request.clusterNodeId)) {
+                    url += '?' + $.param({
+                            clusterNodeId: lineage.request.clusterNodeId
+                        });
+                }
+    
+                return $.ajax({
+                    type: 'GET',
+                    url: url,
+                    dataType: 'json'
+              }).fail(nfErrorHandler.handleAjaxError);
+            };
+    
+            /**
+             * Cancels the specified lineage.
+             *
+             * @param {type} lineage
+             * @returns {deferred}
+             */
+            var cancelLineage = function (lineage) {
+                var url = lineage.uri;
+              if (nfCommon.isDefinedAndNotNull(lineage.request.clusterNodeId)) {
+                    url += '?' + $.param({
+                            clusterNodeId: lineage.request.clusterNodeId
+                        });
+                }
+    
+                return $.ajax({
+                    type: 'DELETE',
+                    url: url,
+                    dataType: 'json'
+              }).fail(nfErrorHandler.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 (nfCommon.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;
+                    }
+    
+                    // 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);
+                    });
+    
+                    // 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;
+                    });
+    
+                    // 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;
+    
+                        if (difference < DEFAULT_NODE_SPACING) {
+                            second.x += (DEFAULT_NODE_SPACING - difference);
+                        }
+                    }
+    
+                    // if there are children to position
+                    if (children.length > 0) {
+                        var childLevelDifference = DEFAULT_LEVEL_DIFFERENCE / 3;
+    
+                        // 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;
+                        $.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 (nfCommon.isUndefined(minMillis) || minMillis > node.millis) {
+                            minMillis = node.millis;
+                            minTimestamp = node.timestamp;
+                        }
+                      if (nfCommon.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 > 0 ? step : 1).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 nfCommon.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();
+    
+                      // prevents browser from using text cursor
+                      d3.event.preventDefault();
+                    })
+                    .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({
+                    change: slide,
+                    slide: slide
+                });
+    
+                // renders flowfile nodes
+                var renderFlowFile = function (flowfiles) {
+                  flowfiles
+                      .classed('flowfile', true)
+                      .on('mousedown', function (d) {
+                          d3.event.stopPropagation();
+                      });
+    
+                    // node
+                    flowfiles.append('circle')
+                        .attr({
+                            'r': 16,
+                            'fill': '#fff',
+                            'stroke': '#000',
+                            'stroke-width': 1.0
+                        })
+                        .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('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';
+                      });
+              };
+  
+              var showContextMenu = function (d, provenanceTableCtrl) {
+                    // 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: nf._.msg('nf-provenance-lineage.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 (nfCommon.isDefinedAndNotNull(lineage)) {
+                                    cancelLineage(lineage);
+                                }
+    
+                                // close the dialog
+                                $('#lineage-query-dialog').modal('hide');
+                            };
+    
+                            // 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 (!nfCommon.isEmpty(lineage.results.errors)) {
+                                    var errors = lineage.results.errors;
+                                  nfDialog.showOkDialog({
+                                         headerText: nf._.msg('nf-provenance-lineage.Process Lineage'),
+                                         dialogContent: nfCommon.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
+                                      nfDialog.showOkDialog({
+                                             headerText: nf._.msg('nf-provenance-lineage.Lineage Results'),
+                                             dialogContent: nf._.msg('nf-provenance-lineage.Message2')
+                                        });
+                                    }
+    
+                                    // 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, if its not done computing wait 1 second before checking again
+                                processLineage(1);
+                            }).fail(closeDialog);
+                        };
+    
+                        // handles updating the lineage graph
+                        var renderEventLineage = function (lineageResults) {
+                            addLineage(lineageResults.nodes, lineageResults.links, provenanceTableCtrl);
+                        };
+    
+                        // 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);
+    
+                                // 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;
+                                    }
+                                };
+    
+                                // 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;
+                                    }
+                                };
+    
+                                // the event is fan in if the flowfile uuid is in the children
+                                var fanIn = $.inArray(eventUuid, provenanceEvent.childUuids) >= 0;
+    
+                                // collapses the specified uuids
+                                var collapse = function (uuids) {
+                                    var newUuids = false;
+    
+                                    // 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);
+                                                    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': nf._.msg('nf-provenance-lineage.Find parents'),
+                            'click': function () {
+                                expandLineage({
+                                    lineageRequestType: 'PARENTS',
+                                    eventId: d.id,
+                                    clusterNodeId: clusterNodeId
+                                });
+                            }
+                        }, {
+                            'class': 'lineage-view-children',
+                            'text': nf._.msg('nf-provenance-lineage.Expand'),
+                            'click': function () {
+                                expandLineage({
+                                    lineageRequestType: 'CHILDREN',
+                                    eventId: d.id,
+                                    clusterNodeId: clusterNodeId
+                                });
+                            }
+                        }, {
+                            'class': 'lineage-collapse-children',
+                            'text': nf._.msg('nf-provenance-lineage.Collapse'),
+                            'click': function () {
+                                // collapse the children lineage
+                                collapseLineage(d.id, provenanceTableCtrl);
+                            }
+                        });
+                    }
+    
+                    // show the context menu for an event
+                    addContextMenuItems(menuItems);
+              };
+  
+              // renders event nodes
+              var renderEvent = function (events, provenanceTableCtrl) {
+                  events
+                      .on('contextmenu', function (d) {
+                          // select the current node for a visible cue
+                          d3.select('#event-node-' + d.id).classed('context', true);
+  
+                          // show the context menu
+                          showContextMenu(d, provenanceTableCtrl);
+                      })
+                      .on('mousedown', function (d) {
+                          d3.event.stopPropagation();
+                      });
+  
+                  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;
+                          }
+                        });
+    
+                    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(/<path([^>]*?)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 '<path' + before + 'd="M' + moveX + ',' + moveY + 'L' + lineX + ',' + lineY + '"' + after + '>';
+                      });
+  
+                      // adjust node positioning based on the offset of the bounding box
+                      svg = svg.replace(/<g([^>]*?)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 '<g' + before + 'transform="translate(' + x + ',' + y + ')"' + after + '>';
+                      });
+  
+                      // namespaces
+                      svg = svg.replace(/<svg ([^>]*)/, 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 = '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\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: nf._.msg('nf-provenance-lineage.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 (nfCommon.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 (!nfCommon.isEmpty(lineage.results.errors)) {
+                            var errors = lineage.results.errors;
+                          nfDialog.showOkDialog({
+                            headerText: nf._.msg('nf-provenance-lineage.Process Lineage'),
+                            dialogContent: nfCommon.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;
+  }));
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
new file mode 100644
index 000000000000..371be34540ef
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
@@ -0,0 +1,1514 @@
+    /*
+     * 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 top, define, module, require, exports */
+  
+  (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, nfCommon, nfDialog, nfErrorHandler, nfStorage, nfNgBridge) {
+                  return (nf.ng.ProvenanceTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler, nfStorage, nfNgBridge));
+              });
+      } 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, nfCommon, nfDialog, nfErrorHandler, nfStorage, nfNgBridge) {
+      'use strict';
+  
+      var nfProvenanceTable = function (provenanceLineageCtrl) {
+            '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'
+                }
+            };
+    
+            /**
+             * 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
+              nfCommon.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
+                    var parameters = {};
+    
+                    // conditionally include the ui extension token
+                  if (!nfCommon.isBlank(downloadToken)) {
+                        parameters['access_token'] = downloadToken;
+                    }
+    
+                    // conditionally include the cluster node id
+                    var clusterNodeId = $('#provenance-event-cluster-node-id').text();
+                  if (!nfCommon.isBlank(clusterNodeId)) {
+                        parameters['clusterNodeId'] = clusterNodeId;
+                    }
+    
+                    // open the url
+                    if ($.isEmptyObject(parameters)) {
+                        window.open(dataUri);
+                    } else {
+                        window.open(dataUri + '?' + $.param(parameters));
+                    }
+                }).fail(function () {
+                  nfDialog.showOkDialog({
+                    headerText: nf._.msg('nf-provenance-table.Provenance'),
+                    dialogContent: nf._.msg('nf-provenance-table.Message8')
+                    });
+                });
+            };
+    
+            /**
+             * 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);
+    
+                // generate tokens as necessary
+                var getAccessTokens = $.Deferred(function (deferred) {
+                  if (nfStorage.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 () {
+                          nfDialog.showOkDialog({
+                            headerText: nf._.msg('nf-provenance-table.Provenance'),
+                            dialogContent: nf._.msg('nf-provenance-table.Message7')
+                            });
+                            deferred.reject();
+                        });
+                    } else {
+                        deferred.resolve('', '');
+                    }
+                }).promise();
+    
+                // perform the request after we've received the tokens
+                getAccessTokens.done(function (uiExtensionToken, downloadToken) {
+                    var dataUriParameters = {};
+    
+                    // conditionally include the cluster node id
+                    var clusterNodeId = $('#provenance-event-cluster-node-id').text();
+                  if (!nfCommon.isBlank(clusterNodeId)) {
+                        dataUriParameters['clusterNodeId'] = clusterNodeId;
+                    }
+    
+                    // include the download token if applicable
+                  if (!nfCommon.isBlank(downloadToken)) {
+                        dataUriParameters['access_token'] = downloadToken;
+                    }
+    
+                    // include parameters if necessary
+                    if ($.isEmptyObject(dataUriParameters) === false) {
+                        dataUri = dataUri + '?' + $.param(dataUriParameters);
+                    }
+    
+                    // open the content viewer
+                    var contentViewerUrl = $('#nifi-content-viewer-url').text();
+    
+                    // 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 += '&';
+                    }
+    
+                    var contentViewerParameters = {
+                        'ref': dataUri
+                    };
+    
+                    // include the download token if applicable
+                  if (!nfCommon.isBlank(uiExtensionToken)) {
+                        contentViewerParameters['access_token'] = uiExtensionToken;
+                    }
+    
+                    // open the content viewer
+                    window.open(contentViewerUrl + $.param(contentViewerParameters));
+                });
+            };
+    
+            /**
+             * Initializes the details dialog.
+             */
+            var initDetailsDialog = function () {
+                // initialize the properties tabs
+                $('#event-details-tabs').tabbs({
+                    tabStyle: 'tab',
+                    selectedTabStyle: 'selected-tab',
+                    scrollableTabContentStyle: 'scrollable',
+                    tabs: [{
+                        name: nf._.msg('nf-provenance-table.Details'),
+                        tabContentId: 'event-details-tab-content'
+                    }, {
+                        name: nf._.msg('nf-provenance-table.Attributes'),
+                        tabContentId: 'attributes-tab-content'
+                    }, {
+                        name: nf._.msg('nf-provenance-table.Content'),
+                        tabContentId: 'content-tab-content'
+                    }]
+                });
+    
+                $('#event-details-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                    headerText: nf._.msg('nf-provenance-table.ProvenanceEvent'),
+                    buttons: [{
+                        buttonText: nf._.msg('nf-provenance-table.Ok'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                $('#event-details-dialog').modal('hide');
+                            }
+                        }
+                    }],
+                    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 () {
+                          nfCommon.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();
+                    }
+                });
+    
+                // 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 (nfCommon.isContentViewConfigured()) {
+                    // input view
+                    $('#input-content-view').on('click', function () {
+                        viewContent('input');
+                    });
+    
+                    // output view
+                    $('#output-content-view').on('click', function () {
+                        viewContent('output');
+                    });
+                }
+    
+                // handle the replay and downloading
+                $('#replay-content').on('click', function () {
+                    var replayEntity = {
+                        'eventId': $('#provenance-event-id').text()
+                    };
+    
+                    // conditionally include the cluster node id
+                    var clusterNodeId = $('#provenance-event-cluster-node-id').text();
+                  if (!nfCommon.isBlank(clusterNodeId)) {
+                        replayEntity['clusterNodeId'] = clusterNodeId;
+                    }
+    
+                    $.ajax({
+                        type: 'POST',
+                        url: config.urls.replays,
+                        data: JSON.stringify(replayEntity),
+                        dataType: 'json',
+                        contentType: 'application/json'
+                    }).done(function (response) {
+                      nfDialog.showOkDialog({
+                        headerText: nf._.msg('nf-provenance-table.Provenance'),
+                        dialogContent: nf._.msg('nf-provenance-table.Message1')
+                        });
+                  }).fail(nfErrorHandler.handleAjaxError);
+    
+                    $('#event-details-dialog').modal('hide');
+                });
+    
+                // show the replay panel
+                $('#replay-details').show();
+            };
+    
+            /**
+             * 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(nfErrorHandler.handleAjaxError);
+    
+                    // show the node search combo
+                    $('#provenance-search-location-container').show();
+                }
+    
+                // configure the search dialog
+                $('#provenance-search-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                    headerText: nf._.msg('nf-provenance-table.Message2'),
+                    buttons: [{
+                        buttonText: nf._.msg('nf-provenance-table.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: nf._.msg('nf-provenance-table.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    $('#provenance-search-dialog').modal('hide');
+                                }
+                            }
+                        }]
+                });
+    
+                return $.ajax({
+                    type: 'GET',
+                    url: config.urls.searchOptions,
+                    dataType: 'json'
+                }).done(function (response) {
+                    var provenanceOptions = response.provenanceOptions;
+    
+                    // 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: nf._.msg('nf-provenance-table.Message10')
+                });
+            };
+    
+            /**
+             * Appends the specified searchable field to the search dialog.
+             *
+             * @param {type} field      The searchable field
+             */
+            var appendSearchableField = function (field) {
+                var searchableField = $('<div class="searchable-field"></div>').appendTo('#searchable-fields-container');
+                $('<span class="searchable-field-id hidden"></span>').text(field.id).appendTo(searchableField);
+                $('<div class="searchable-field-name"></div>').text(field.label).appendTo(searchableField);
+                $('<div class="searchable-field-value"><input type="text" class="searchable-field-input"/></div>').appendTo(searchableField);
+                $('<div class="clear"></div>').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 (!nfCommon.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: nf._.msg('nf-provenance-table.ByComponentName'),
+                    value: 'componentName'
+                }, {
+                    text: nf._.msg('nf-provenance-table.ByComponentType'),
+                    value: 'componentType'
+                }, {
+                    text: nf._.msg('nf-provenance-table.ByType'),
+                    value: 'eventType'
+                }];
+    
+                // if clustered, allowing filtering by node id
+                if (isClustered) {
+                    filterOptions.push({
+                        text: nf._.msg('nf-provenance-table.ByNode'),
+                        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: nf._.msg('nf-provenance-table.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');
+                });
+    
+                // define a custom formatter for the more details column
+                var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
+                    return '<div title="'+nf._.msg('nf-provenance-table.ViewDetail')+'" class="pointer show-event-details fa fa-info-circle"></div>';
+                };
+    
+                // define how general values are formatted
+                var valueFormatter = function (row, cell, value, columnDef, dataContext) {
+                  return nfCommon.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 (nfCommon.SUPPORTS_SVG) {
+                        markup += '<div title="'+nf._.msg('nf-provenance-table.ShowLineage')+'" class="pointer show-lineage icon icon-lineage" style="margin-right: 3px;"></div>';
+                    }
+    
+                    // conditionally support going to the component
+                  var isRemotePort = dataContext.componentType === 'Remote Input Port' || dataContext.componentType === 'Remote Output Port';
+                  if (isInShell && nfCommon.isDefinedAndNotNull(dataContext.groupId) && isRemotePort === false) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-provenance-table.GoTo')+'"></div>';
+                    }
+    
+                    return markup;
+                };
+    
+                // initialize the provenance table
+                var provenanceColumns = [
+                    {
+                        id: 'moreDetails',
+                        name: '&nbsp;',
+                        sortable: false,
+                        resizable: false,
+                        formatter: moreDetailsFormatter,
+                        width: 50,
+                        maxWidth: 50
+                    },
+                    {
+                        id: 'eventTime',
+                        name: nf._.msg('nf-provenance-table.DateTime'),
+                        field: 'eventTime',
+                        sortable: true,
+                        defaultSortAsc: false,
+                        resizable: true
+                    },
+                  {
+                      id: 'eventType',
+                      name: nf._.msg('nf-provenance-table.Type'),
+                      field: 'eventType',
+                      sortable: true,
+                      resizable: true
+                  },
+                  {
+                      id: 'flowFileUuid',
+                      name: nf._.msg('nf-provenance-table.FlowFileUuid'),
+                      field: 'flowFileUuid',
+                      sortable: true,
+                      resizable: true
+                  },
+                  {
+                      id: 'fileSize',
+                      name: nf._.msg('nf-provenance-table.Size'),
+                      field: 'fileSize',
+                      sortable: true,
+                      defaultSortAsc: false,
+                      resizable: true
+                  },
+                    {
+                        id: 'componentName',
+                        name: nf._.msg('nf-provenance-table.ComponentName'),
+                        field: 'componentName',
+                        sortable: true,
+                        resizable: true,
+                        formatter: valueFormatter
+                    },
+                  {
+                      id: 'componentType',
+                      name: nf._.msg('nf-provenance-table.ComponentType'),
+                      field: 'componentType',
+                      sortable: true,
+                      resizable: true
+                  }
+                ];
+    
+                // conditionally show the cluster node identifier
+                if (isClustered) {
+                    provenanceColumns.push({
+                        id: 'clusterNodeAddress',
+                        name: nf._.msg('nf-provenance-table.Node'),
+                        field: 'clusterNodeAddress',
+                        sortable: true,
+                        resizable: true
+                    });
+                }
+    
+                // conditionally show the action column
+              if (nfCommon.SUPPORTS_SVG || isInShell) {
+                    provenanceColumns.push({
+                        id: 'actions',
+                        name: '&nbsp;',
+                        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(nfCommon.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 (nfCommon.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 = nfCommon.parseDateTime(a[sortDetails.columnId]).getTime();
+                      var bTime = nfCommon.parseDateTime(b[sortDetails.columnId]).getTime();
+                        if (aTime === bTime) {
+                            return a['id'] - b['id'];
+                        } else {
+                            return aTime - bTime;
+                        }
+                    } else if (sortDetails.columnId === 'fileSize') {
+                      var aSize = nfCommon.parseSize(a[sortDetails.columnId]);
+                      var bSize = nfCommon.parseSize(b[sortDetails.columnId]);
+                        if (aSize === bSize) {
+                            return a['id'] - b['id'];
+                        } else {
+                            return aSize - bSize;
+                        }
+                    } else {
+                      var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                      var bString = nfCommon.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(nfErrorHandler.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 (nfCommon.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(nfErrorHandler.handleAjaxError);
+            };
+    
+            /**
+             * Cancels the specified provenance query.
+             *
+             * @param {object} provenance
+             * @return {deferred}
+             */
+            var cancelProvenance = function (provenance) {
+                var url = provenance.uri;
+              if (nfCommon.isDefinedAndNotNull(provenance.request.clusterNodeId)) {
+                    url += '?' + $.param({
+                            clusterNodeId: provenance.request.clusterNodeId
+                        });
+                }
+    
+                return $.ajax({
+                    type: 'DELETE',
+                    url: url,
+                    dataType: 'json'
+              }).fail(nfErrorHandler.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 (nfCommon.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(nfCommon.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 nfCommon.isUndefinedOrNull(query.startDate) && nfCommon.isUndefinedOrNull(query.endDate) && $.isEmptyObject(query.searchTerms);
+                    };
+    
+                    // update the filter message based on the request
+                    if (isBlankQuery(provenanceRequest)) {
+                        var message = nf._.msg('nf-provenance-table.Message');
+                        if (provenanceResults.totalCount >= config.maxResults) {
+                            message += (nfCommon.formatInteger(config.maxResults) + nf._.msg('nf-provenance-table.Of') + provenanceResults.total + nf._.msg('nf-provenance-table.Message4'));
+                        } else {
+                            message += (nf._.msg('nf-provenance-table.Events'));
+                        }
+                        $('#provenance-query-message').text(message);
+                        $('#clear-provenance-search').hide();
+                    } else {
+                        var message = nf._.msg('nf-provenance-table.Showing');
+                        if (provenanceResults.totalCount >= config.maxResults) {
+                            message += (nfCommon.formatInteger(config.maxResults) + nf._.msg('nf-provenance-table.Of') + provenanceResults.total + nf._.msg('nf-provenance-table.Message5'));
+                        } else {
+                            message += (nf._.msg('nf-provenance-table.Message6'));
+                        }
+                        $('#provenance-query-message').text(message);
+                        $('#clear-provenance-search').show();
+                    }
+    
+                    // update the total number of events
+                  $('#total-events').text(nfCommon.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 (nfCommon.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 (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && nfCommon.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();
+                          nfErrorHandler.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 (nfCommon.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 = $('<div class="progress-label"></div>').text(value + '%');
+                    (nfNgBridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + value + '" class="md-hue-2" md-mode="determinate" aria-label="'+nf._.msg('nf-provenance-table.Process')+'"></md-progress-linear>'))(nfNgBridge.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: nf._.msg('nf-provenance-table.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();
+                                }
+                            }
+                        }
+                    }]).modal('show');
+    
+                    // -----------------------------
+                    // determine the provenance query
+                    // -----------------------------
+    
+                    // handle the specified query appropriately
+                  if (nfCommon.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 = {};
+                    }
+    
+                    // 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 (nfCommon.isDefinedAndNotNull(provenance)) {
+                            cancelProvenance(provenance);
+                        }
+    
+                        // close the dialog
+                        $('#provenance-query-dialog').modal('hide');
+                    };
+    
+                  // polls the server for the status of the provenance
+                  var pollProvenance = function () {
+                        getProvenance(provenance).done(function (response) {
+                            // update the provenance
+                            provenance = response.provenance;
+    
+                            // process the provenance
+                          processProvenanceResponse();
+                        }).fail(closeDialog);
+                    };
+    
+                  // processes the provenance
+                  var processProvenanceResponse = function () {
+                        // if the request was cancelled just ignore the current response
+                        if (cancelled === true) {
+                            closeDialog();
+                            return;
+                        }
+    
+                        // update the percent complete
+                      provenanceTableCtrl.updateProgress(provenanceProgress, provenance.percentCompleted);
+    
+                        // process the results if they are finished
+                        if (provenance.finished === true) {
+                            // show any errors when the query finishes
+                          if (!nfCommon.isEmpty(provenance.results.errors)) {
+                                var errors = provenance.results.errors;
+                              nfDialog.showOkDialog({
+                                    headerText: nf._.msg('nf-provenance-table.Provenance'),
+                                    dialogContent: nfCommon.formatUnorderedList(errors),
+                                });
+                            }
+    
+                            // process the results
+                          loadProvenanceResults(provenance, provenanceTableCtrl);
+    
+                            // hide the dialog
+                            closeDialog();
+                        } else {
+                            // start the wait to poll again
+                            provenanceTimer = setTimeout(function () {
+                                // clear the timer since we've been invoked
+                                provenanceTimer = null;
+    
+                                // 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 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 (nfCommon.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(nfErrorHandler.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(nfCommon.formatValue(event.eventTime)).ellipsis();
+                      $('#provenance-event-type').html(nfCommon.formatValue(event.eventType)).ellipsis();
+                      $('#provenance-event-flowfile-uuid').html(nfCommon.formatValue(event.flowFileUuid)).ellipsis();
+                      $('#provenance-event-component-id').html(nfCommon.formatValue(event.componentId)).ellipsis();
+                      $('#provenance-event-component-name').html(nfCommon.formatValue(event.componentName)).ellipsis();
+                      $('#provenance-event-component-type').html(nfCommon.formatValue(event.componentType)).ellipsis();
+                      $('#provenance-event-details').html(nfCommon.formatValue(event.details)).ellipsis();
+    
+                        // over the default tooltip with the actual byte count
+                      var fileSize = $('#provenance-event-file-size').html(nfCommon.formatValue(event.fileSize)).ellipsis();
+                        fileSize.attr('title', nfCommon.formatInteger(event.fileSizeBytes) + nf._.msg('nf-provenance-table.Bytes'));
+    
+                        // sets an duration
+                        var setDuration = function (field, value) {
+                          if (nfCommon.isDefinedAndNotNull(value)) {
+                                if (value === 0) {
+                                    field.text('< 1ms');
+                                } else {
+                                  field.text(nfCommon.formatDuration(value));
+                                }
+                            } else {
+                              field.html('<span class="unset">'+nf._.msg('nf-provenance-table.NoValueSet')+'</span>');
+                            }
+                        };
+    
+                        // handle durations
+                        setDuration($('#provenance-event-duration'), event.eventDuration);
+                        setDuration($('#provenance-lineage-duration'), event.lineageDuration);
+    
+                        // formats an event detail
+                        var formatEventDetail = function (label, value) {
+                            $('<div class="event-detail"></div>').append(
+                                $('<div class="detail-name"></div>').text(label)).append(
+                              $('<div class="detail-value">' + nfCommon.formatValue(value) + '</div>').ellipsis()).append(
+                                $('<div class="clear"></div>')).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 (nfCommon.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 (nfCommon.isEmpty(event.parentUuids)) {
+                            $('#parent-flowfile-count').text(0);
+                            parentUuids.append('<span class="unset">'+nf._.msg('nf-provenance-table.NoParent')+'</span>');
+                        } else {
+                            $('#parent-flowfile-count').text(event.parentUuids.length);
+                            $.each(event.parentUuids, function (_, uuid) {
+                                $('<div></div>').text(uuid).appendTo(parentUuids);
+                            });
+                        }
+    
+                        // handle child flowfiles
+                      if (nfCommon.isEmpty(event.childUuids)) {
+                            $('#child-flowfile-count').text(0);
+                            childUuids.append('<span class="unset">'+nf._.msg('nf-provenance-table.NoChildren')+'</span>');
+                        } else {
+                            $('#child-flowfile-count').text(event.childUuids.length);
+                            $.each(event.childUuids, function (_, uuid) {
+                                $('<div></div>').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 = $('<div class="attribute-detail"></div>')
+                              .append($('<div class="attribute-name">' + nfCommon.formatValue(attribute.name) + '</div>').ellipsis())
+                                .appendTo(attributesContainer);
+    
+                            // add the current value
+                            attributeRecord
+                              .append($('<div class="attribute-value">' + nfCommon.formatValue(attribute.value) + '</div>').ellipsis())
+                                .append('<div class="clear"></div>');
+    
+                            // show the previous value if the property has changed
+                            if (attribute.value !== attribute.previousValue) {
+                              if (nfCommon.isDefinedAndNotNull(attribute.previousValue)) {
+                                    attributeRecord
+                                      .append($('<div class="modified-attribute-value">' + nfCommon.formatValue(attribute.previousValue) + '<span class="unset"> (previous)</span></div>').ellipsis())
+                                        .append('<div class="clear"></div>');
+                                } else {
+                                    attributeRecord
+                                      .append($('<div class="unset" style="font-size: 13px; padding-top: 2px;">' + nfCommon.formatValue(attribute.previousValue) + '</div>').ellipsis())
+                                        .append('<div class="clear"></div>');
+                                }
+                            } else {
+                                // mark this attribute as not modified
+                                attributeRecord.addClass('attribute-unmodified');
+                            }
+                        });
+    
+                        var formatContentValue = function (element, value) {
+                          if (nfCommon.isDefinedAndNotNull(value)) {
+                                element.removeClass('unset').text(value);
+                            } else {
+                                element.addClass('unset').text(nf._.msg('nf-provenance-table.Message9'));
+                            }
+                        };
+    
+                        // content
+                        $('#input-content-header').text(nf._.msg('nf-provenance-table.InputClaim'));
+                        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 (nfCommon.isDefinedAndNotNull(event.inputContentClaimFileSize)) {
+                            // over the default tooltip with the actual byte count
+                          inputContentSize.attr('title', nfCommon.formatInteger(event.inputContentClaimFileSizeBytes) + nf._.msg('nf-provenance-table.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 (nfCommon.isDefinedAndNotNull(event.outputContentClaimFileSize)) {
+                            // over the default tooltip with the actual byte count
+                          outputContentSize.attr('title', nfCommon.formatInteger(event.outputContentClaimFileSizeBytes) + nf._.msg('nf-provenance-table.Bytes'));
+                        }
+    
+                        if (event.inputContentAvailable === true) {
+                            $('#input-content-download').show();
+    
+                          if (nfCommon.isContentViewConfigured()) {
+                                $('#input-content-view').show();
+                            } else {
+                                $('#input-content-view').hide();
+                            }
+                        } else {
+                            $('#input-content-download').hide();
+                            $('#input-content-view').hide();
+                        }
+    
+                        if (event.outputContentAvailable === true) {
+                            $('#output-content-download').show();
+    
+                          if (nfCommon.isContentViewConfigured()) {
+                                $('#output-content-view').show();
+                            } else {
+                                $('#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();
+                        }
+    
+                        // show the dialog
+                        $('#event-details-dialog').modal('show');
+                  });
+                }
+            }
+    
+            var provenanceTableCtrl = new ProvenanceTableCtrl();
+            return provenanceTableCtrl;
+        };
+    
+      return nfProvenanceTable;
+  }));
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
new file mode 100644
index 000000000000..5dc2a2d8d876
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js
@@ -0,0 +1,362 @@
+/*
+ * 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 top, define, module, require, exports */
+
+(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,
+                      nfCommon,
+                      appConfig,
+                      appCtrl,
+                      provenanceLineage,
+                      provenanceTable,
+                      nfNgBridge,
+                      nfErrorHandler,
+                      nfStorage) {
+                return (nf.ng.Provenance =
+                    factory($,
+                        angular,
+                        nfCommon,
+                        appConfig,
+                        appCtrl,
+                        provenanceLineage,
+                        provenanceTable,
+                        nfNgBridge,
+                        nfErrorHandler,
+                        nfStorage));
+            });
+    } 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, nfCommon, appConfig, appCtrl, provenanceLineage, provenanceTable, nfNgBridge, nfErrorHandler, nfStorage) {
+    'use strict';
+
+    $(document).ready(function () {
+        //Create Angular App
+        var app = angular.module('ngProvenanceApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
+
+        //Define Dependency Injection Annotations
+        appConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
+        appCtrl.$inject = ['$scope'];
+        nfProvenance.$inject = ['provenanceTableCtrl'];
+        provenanceLineage.$inject = [];
+        provenanceTable.$inject = ['provenanceLineageCtrl'];
+
+        //Configure Angular App
+        app.config(appConfig);
+
+        //Define Angular App Controllers
+        app.controller('ngProvenanceAppCtrl', appCtrl);
+
+        //Define Angular App Services
+        app.service('provenanceCtrl', nfProvenance);
+        app.service('provenanceLineageCtrl', provenanceLineage);
+        app.service('provenanceTableCtrl', provenanceTable);
+
+        //Manually Boostrap Angular App
+        nfNgBridge.injector = angular.bootstrap($('body'), ['ngProvenanceApp'], {strictDi: true});
+
+        // initialize the status page
+        nfNgBridge.injector.get('provenanceCtrl').init();
+    });
+
+    var nfProvenance = function (provenanceTableCtrl) {
+
+        /**
+         * 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'
+            }
+        };
+
+        /**
+         * Whether or not this NiFi is clustered.
+         */
+        var isClustered = null;
+
+        /**
+         * 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(nfErrorHandler.handleAjaxError);
+        };
+
+        /**
+         * 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';
+
+                // store the controller name
+                $('#nifi-controller-uri').text(aboutDetails.uri);
+
+                // set the timezone for the start and end time
+                $('.timezone').text(aboutDetails.timezone);
+
+                // store the content viewer url if available
+                if (!nfCommon.isBlank(aboutDetails.contentViewerUrl)) {
+                    $('#nifi-content-viewer-url').text(aboutDetails.contentViewerUrl);
+                }
+
+                // set the document title and the about title
+                document.title = provenanceTitle;
+                $('#provenance-header-text').text(provenanceTitle);
+            }).fail(nfErrorHandler.handleAjaxError);
+        };
+
+        /**
+         * Loads the current user.
+         */
+        var loadCurrentUser = function () {
+            return $.ajax({
+                type: 'GET',
+                url: config.urls.currentUser,
+                dataType: 'json'
+            }).done(function (currentUser) {
+                nfCommon.setCurrentUser(currentUser);
+            }).fail(nfErrorHandler.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 (nfCommon.isDefinedAndNotNull(response.banners)) {
+                            if (nfCommon.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 (nfCommon.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) {
+                        nfErrorHandler.handleAjaxError(xhr, status, error);
+                        deferred.reject();
+                    });
+                } else {
+                    deferred.resolve();
+                }
+            }).promise();
+        };
+
+        function ProvenanceCtrl() {
+        }
+
+        ProvenanceCtrl.prototype = {
+            constructor: ProvenanceCtrl,
+
+            /**
+             * Initializes the status page.
+             */
+            init: function () {
+                nfStorage.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;
+                        }
+
+                        // 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;
+                        }
+
+                        // load the provenance table
+                        if ($.isEmptyObject(searchTerms)) {
+                            // load the provenance table
+                            provenanceTableCtrl.loadProvenanceTable();
+                        } else {
+                            // load the provenance table
+                            provenanceTableCtrl.loadProvenanceTable({
+                                'searchTerms': searchTerms
+                            });
+                        }
+
+                        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) {
+                                nfCommon.toggleScrollable(tabsContent.get(0));
+                            });
+                        });
+                    });
+                });
+            }
+        }
+
+        var provenanceCtrl = new ProvenanceCtrl();
+        return provenanceCtrl;
+    }
+
+    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
new file mode 100644
index 000000000000..e4823b14f326
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js
@@ -0,0 +1,248 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+  
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.SummaryTable'],
+              function ($, nfCommon, nfDialog, nfSummaryTable) {
+                  return (nf.ClusterSearch = factory($, nfCommon, nfDialog, nfSummaryTable));
+              });
+      } 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 ($, nfCommon, nfDialog, nfSummaryTable) {
+      'use strict';
+  
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            search: 'Search nodes',
+            urls: {
+                clusterSearch: '../nifi-api/flow/cluster/search-results'
+            }
+        };
+    
+        return {
+            /**
+             * Initialize the header by register all required listeners.
+             */
+            init: function () {
+                // configure the view single node dialog
+                $('#view-single-node-dialog').modal({
+                    scrollableContentStyle: 'scrollable',
+                    headerText: nf._.msg('nf-cluster-search.SelectNode'),
+                    buttons: [{
+                        buttonText: nf._.msg('nf-cluster-search.Ok'),
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                var clusterSearchTerm = $('#cluster-search-field').val();
+    
+                                // create the search request
+                                $.ajax({
+                                    type: 'GET',
+                                    data: {
+                                        q: clusterSearchTerm
+                                    },
+                                    dataType: 'json',
+                                    url: config.urls.clusterSearch
+                                }).done(function (response) {
+                                    var searchResults = response.nodeResults;
+    
+                                    // selects the specified node
+                                    var selectNode = function (node) {
+                                        // update the urls to point to this specific node of the cluster
+                                      nfSummaryTable.setClusterNodeId(node.id);
+    
+                                        // load the summary for the selected node
+                                      nfSummaryTable.loadSummaryTable();
+    
+                                        // update the header
+                                        $('#summary-header-text').text(node.address + nf._.msg('nf-cluster-search.Summary'));
+                                    };
+    
+                                    // ensure the search found some results
+                                    if (!$.isArray(searchResults) || searchResults.length === 0) {
+                                      nfDialog.showOkDialog({
+                                            headerText: nf._.msg('nf-cluster-search.ClusterSearch'),
+                                            dialogContent: nf._.msg('nf-cluster-search.Message1') + nf.Common.escapeHtml(clusterSearchTerm) + '\'.'
+                                        });
+                                    } else if (searchResults.length > 1) {
+                                        var exactMatch = false;
+    
+                                        // look for an exact match
+                                        $.each(searchResults, function (_, result) {
+                                            if (result.address === clusterSearchTerm) {
+                                                selectNode(result);
+                                                exactMatch = true;
+                                                return false;
+                                            }
+                                        });
+    
+                                        // if there is an exact match, use it
+                                        if (exactMatch) {
+                                            // close the dialog
+                                            $('#view-single-node-dialog').modal('hide');
+                                        } else {
+                                          nfDialog.showOkDialog({
+                                                headerText: nf._.msg('nf-cluster-search.ClusterSearch'),
+                                                dialogContent: nf._.msg('nf-cluster-search.Message2') + nf.Common.escapeHtml(clusterSearchTerm) + '\'.'
+                                            });
+                                        }
+                                    } else if (searchResults.length === 1) {
+                                        selectNode(searchResults[0]);
+    
+                                        // close the dialog
+                                        $('#view-single-node-dialog').modal('hide');
+                                    }
+                                });
+                            }
+                        }
+                    },
+                        {
+                            buttonText: nf._.msg('nf-cluster-search.Cancel'),
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
+                            handler: {
+                                click: function () {
+                                    // close the dialog
+                                    this.modal('hide');
+                                }
+                            }
+                        }],
+                    handler: {
+                        close: function () {
+                            // reset the search field
+                            $('#cluster-search-field').val(config.search).addClass('search-nodes').clusterSearchAutocomplete('reset');
+                        }
+                    }
+                });
+    
+                // configure the cluster auto complete
+                $.widget('nf.clusterSearchAutocomplete', $.ui.autocomplete, {
+                    reset: function () {
+                        this.term = null;
+                    },
+                  _create: function() {
+                      this._super();
+                      this.widget().menu('option', 'items', '> :not(.search-no-matches)' );
+                  },
+                    _normalize: function (searchResults) {
+                        var items = [];
+                        items.push(searchResults);
+                        return items;
+                    },
+                    _renderMenu: function (ul, items) {
+                        // results are normalized into a single element array
+                        var searchResults = items[0];
+    
+                      var nfClusterSearchAutocomplete = this;
+                        $.each(searchResults.nodeResults, function (_, node) {
+                          nfClusterSearchAutocomplete._renderItem(ul, {
+                                label: node.address,
+                                value: node.address
+                            });
+                        });
+    
+                        // ensure there were some results
+                        if (ul.children().length === 0) {
+                            ul.append('<li class="unset search-no-matches">'+nf._.msg('nf-cluster-search.Message3')+'</li>');
+                        }
+                    },
+                    _resizeMenu: function () {
+                        var ul = this.menu.element;
+                      ul.width($('#cluster-search-field').outerWidth() - 2);
+                  },
+                  _renderItem: function (ul, match) {
+                      var itemContent = $('<a></a>').text(match.label);
+                      return $('<li></li>').data('ui-autocomplete-item', match).append(itemContent).appendTo(ul);
+                    }
+                });
+    
+                // configure the autocomplete field
+                $('#cluster-search-field').clusterSearchAutocomplete({
+                    minLength: 0,
+                    appendTo: '#search-cluster-results',
+                    position: {
+                        my: 'left top',
+                        at: 'left bottom',
+                        offset: '0 1'
+                    },
+                    source: function (request, response) {
+                        // create the search request
+                        $.ajax({
+                            type: 'GET',
+                            data: {
+                                q: request.term
+                            },
+                            dataType: 'json',
+                            url: config.urls.clusterSearch
+                        }).done(function (searchResponse) {
+                            response(searchResponse);
+                        });
+                    }
+                }).focus(function () {
+                    // conditionally clear the text for the user to type
+                    if ($(this).val() === config.search) {
+                        $(this).val('').removeClass('search-nodes');
+                    }
+                }).val(config.search).addClass('search-nodes');
+    
+                // handle the view single node click event
+                $('#view-single-node-link').click(function () {
+                    // hold the search nodes dialog
+                    $('#view-single-node-dialog').modal('show');
+                    $('#cluster-search-field').focus();
+                });
+    
+                // handle the view cluster click event
+                $('#view-cluster-link').click(function () {
+                    // reset the urls and refresh the table
+                  nfSummaryTable.setClusterNodeId(null);
+                  nfSummaryTable.loadSummaryTable();
+    
+                    // update the header
+                    $('#summary-header-text').text(nf._.msg('nf-cluster-search.NiFiSumary'));
+                });
+    
+                // show the view links
+                $('#view-options-container').show();
+            }
+        };
+  }));
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
new file mode 100644
index 000000000000..1c1583d77e15
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
@@ -0,0 +1,3052 @@
+    /*
+     * 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 top, define, module, require, exports */
+    
+  (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, nfCommon, nfErrorHandler, nfStatusHistory, nfProcessorDetails, nfConnectionDetails, nfNgBridge) {
+                  return (nf.SummaryTable = factory($, Slick, nfCommon, nfErrorHandler, nfStatusHistory, nfProcessorDetails, nfConnectionDetails, nfNgBridge));
+              });
+      } 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, nfCommon, nfErrorHandler, nfStatusHistory, nfProcessorDetails, nfConnectionDetails, nfNgBridge) {
+      'use strict';
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                api: '../nifi-api',
+                status: '../nifi-api/flow/process-groups/root/status',
+                systemDiagnostics: '../nifi-api/system-diagnostics',
+                flowConfig: '../nifi-api/flow/config'
+            }
+        };
+    
+        /**
+         * Goes to the specified component if possible.
+         *
+         * @argument {string} groupId       The id of the group
+         * @argument {string} componentId   The id of the component
+         */
+        var goTo = function (groupId, componentId) {
+            // only attempt this if we're within a frame
+            if (top !== window) {
+                // and our parent has canvas utils and shell defined
+              if (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
+                    parent.nf.CanvasUtils.showComponent(groupId, componentId);
+                    parent.$('#shell-close-button').click();
+                }
+            }
+        };
+    
+        /**
+         * Initializes the summary table.
+         *
+         * @param {type} isClustered
+         */
+        var initSummaryTable = function (isClustered) {
+            // define the function for filtering the list
+            $('#summary-filter').keyup(function () {
+                applyFilter();
+            });
+    
+            // initialize the summary tabs
+            $('#summary-tabs').tabbs({
+                tabStyle: 'tab',
+                selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
+                tabs: [{
+                  name: nf._.msg('nf-summary-table.Processors'),
+                    tabContentId: 'processor-summary-tab-content'
+                }, {
+                  name: nf._.msg('nf-summary-table.InputPorts'),
+                    tabContentId: 'input-port-summary-tab-content'
+                }, {
+                  name: nf._.msg('nf-summary-table.OutputPorts'),
+                    tabContentId: 'output-port-summary-tab-content'
+                }, {
+                  name: nf._.msg('nf-summary-table.RemoteProcessGroups'),
+                    tabContentId: 'remote-process-group-summary-tab-content'
+                }, {
+                  name: nf._.msg('nf-summary-table.Connections'),
+                    tabContentId: 'connection-summary-tab-content'
+                }, {
+                  name: nf._.msg('nf-summary-table.ProcessGroups'),
+                    tabContentId: 'process-group-summary-tab-content'
+                }],
+                select: function () {
+                    var tab = $(this).text();
+                  if (tab === nf._.msg('nf-summary-table.Processors')) {
+                        // ensure the processor table is sized properly
+                        var processorsGrid = $('#processor-summary-table').data('gridInstance');
+                      if (nfCommon.isDefinedAndNotNull(processorsGrid)) {
+                            processorsGrid.resizeCanvas();
+    
+                            // update the total number of processors
+                          $('#displayed-items').text(nfCommon.formatInteger(processorsGrid.getData().getLength()));
+                          $('#total-items').text(nfCommon.formatInteger(processorsGrid.getData().getLength()));
+                        }
+    
+                        // update the combo for processors
+                        $('#summary-filter-type').combo({
+                            options: [{
+                              text: nf._.msg('nf-summary-table.ByName'),
+                                value: 'name'
+                            }, {
+                              text: nf._.msg('nf-summary-table.ByType'),
+                                value: 'type'
+                            }],
+                            select: function (option) {
+                                applyFilter();
+                            }
+                        });
+                  } else if (tab === nf._.msg('nf-summary-table.Connections')) {
+                        // ensure the connection table is size properly
+                        var connectionsGrid = $('#connection-summary-table').data('gridInstance');
+                      if (nf.Common.isDefinedAndNotNull(connectionsGrid)) {
+                            connectionsGrid.resizeCanvas();
+    
+                            // update the total number of connections
+                          $('#displayed-items').text(nfCommon.formatInteger(connectionsGrid.getData().getLength()));
+                          $('#total-items').text(nfCommon.formatInteger(connectionsGrid.getData().getLength()));
+                        }
+    
+                        // update the combo for connections
+                        $('#summary-filter-type').combo({
+                            options: [{
+                              text: nf._.msg('nf-summary-table.BySource'),
+                                value: 'sourceName'
+                            }, {
+                              text: nf._.msg('nf-summary-table.ByName'),
+                                value: 'name'
+                            }, {
+                              text: nf._.msg('nf-summary-table.ByDestination'),
+                                value: 'destinationName'
+                            }],
+                            select: function (option) {
+                                applyFilter();
+                            }
+                        });
+                  } else if (tab === nf._.msg('nf-summary-table.InputPorts')) {
+                        // ensure the connection table is size properly
+                        var inputPortsGrid = $('#input-port-summary-table').data('gridInstance');
+                      if (nfCommon.isDefinedAndNotNull(inputPortsGrid)) {
+                            inputPortsGrid.resizeCanvas();
+    
+                            // update the total number of input ports
+                          $('#displayed-items').text(nfCommon.formatInteger(inputPortsGrid.getData().getLength()));
+                          $('#total-items').text(nfCommon.formatInteger(inputPortsGrid.getData().getLength()));
+                        }
+    
+                        // update the combo for input ports
+                        $('#summary-filter-type').combo({
+                            options: [{
+                              text: nf._.msg('nf-summary-table.ByName'),
+                                value: 'name'
+                            }],
+                            select: function (option) {
+                                applyFilter();
+                            }
+                        });
+                  } else if (tab === nf._.msg('nf-summary-table.OutputPorts')) {
+                        // ensure the connection table is size properly
+                        var outputPortsGrid = $('#output-port-summary-table').data('gridInstance');
+                      if (nfCommon.isDefinedAndNotNull(outputPortsGrid)) {
+                            outputPortsGrid.resizeCanvas();
+    
+                            // update the total number of output ports
+                          $('#displayed-items').text(nfCommon.formatInteger(outputPortsGrid.getData().getLength()));
+                          $('#total-items').text(nfCommon.formatInteger(outputPortsGrid.getData().getLength()));
+                        }
+    
+                        // update the combo for output ports
+                        $('#summary-filter-type').combo({
+                            options: [{
+                              text: nf._.msg('nf-summary-table.ByName'),
+                                value: 'name'
+                            }],
+                            select: function (option) {
+                                applyFilter();
+                            }
+                        });
+                  } else if (tab === nf._.msg('nf-summary-table.RemoteProcessGroups')) {
+                        // ensure the connection table is size properly
+                        var remoteProcessGroupsGrid = $('#remote-process-group-summary-table').data('gridInstance');
+                      if (nfCommon.isDefinedAndNotNull(remoteProcessGroupsGrid)) {
+                            remoteProcessGroupsGrid.resizeCanvas();
+    
+                            // update the total number of remote process groups
+                          $('#displayed-items').text(nfCommon.formatInteger(remoteProcessGroupsGrid.getData().getLength()));
+                          $('#total-items').text(nfCommon.formatInteger(remoteProcessGroupsGrid.getData().getLength()));
+                        }
+    
+                        // update the combo for remote process groups
+                        $('#summary-filter-type').combo({
+                            options: [{
+                              text: nf._.msg('nf-summary-table.ByName'),
+                                value: 'name'
+                            }, {
+                              text: nf._.msg('nf-summary-table.ByUri'),
+                                value: 'targetUri'
+                            }],
+                            select: function (option) {
+                                applyFilter();
+                            }
+                        });
+                    } else {
+                        // ensure the connection table is size properly
+                        var processGroupGrid = $('#process-group-summary-table').data('gridInstance');
+                      if (nfCommon.isDefinedAndNotNull(processGroupGrid)) {
+                            processGroupGrid.resizeCanvas();
+    
+                            // update the total number of process groups
+                          $('#displayed-items').text(nfCommon.formatInteger(processGroupGrid.getData().getLength()));
+                          $('#total-items').text(nfCommon.formatInteger(processGroupGrid.getData().getLength()));
+                        }
+    
+                        // update the combo for process groups
+                        $('#summary-filter-type').combo({
+                            options: [{
+                              text: nf._.msg('nf-summary-table.ByName'),
+                                value: 'name'
+                            }],
+                            select: function (option) {
+                                applyFilter();
+                            }
+                        });
+                    }
+    
+                    // reset the filter
+                    $('#summary-filter').val('');
+                    applyFilter();
+                }
+            });
+    
+            // define a custom formatter for showing more processor details
+            var moreProcessorDetails = function (row, cell, value, columnDef, dataContext) {
+              var markup = '<div title="'+nf._.msg('nf-summary-table.ViewProcessor')+'" class="pointer show-processor-details fa fa-info-circle" style="margin-right: 3px;"></div>';
+    
+                // if there are bulletins, render them on the graph
+              if (!nfCommon.isEmpty(dataContext.bulletins)) {
+                  markup += '<div class="has-bulletins fa fa-sticky-note-o"></div><span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
+                }
+    
+                return markup;
+            };
+    
+            // formatter for io
+            var ioFormatter = function (row, cell, value, columnDef, dataContext) {
+                return dataContext.read + ' / ' + dataContext.written;
+            };
+    
+            // formatter for tasks
+            var taskTimeFormatter = function (row, cell, value, columnDef, dataContext) {
+              return nfCommon.formatInteger(dataContext.tasks) + ' / ' + dataContext.tasksDuration;
+            };
+    
+            // function for formatting the last accessed time
+            var valueFormatter = function (row, cell, value, columnDef, dataContext) {
+              return nfCommon.formatValue(value);
+            };
+    
+            // define a custom formatter for the run status column
+            var runStatusFormatter = function (row, cell, value, columnDef, dataContext) {
+                var activeThreadCount = '';
+              if (nfCommon.isDefinedAndNotNull(dataContext.activeThreadCount) && dataContext.activeThreadCount > 0) {
+                    activeThreadCount = '(' + dataContext.activeThreadCount + ')';
+                }
+              var classes = nfCommon.escapeHtml(value.toLowerCase());
+              switch (nfCommon.escapeHtml(value.toLowerCase())) {
+                    case 'running':
+                      classes += ' fa fa-play running';
+                        break;
+                    case 'stopped':
+                      classes += ' fa fa-stop stopped';
+                        break;
+                    case 'enabled':
+                      classes += ' fa fa-flash enabled';
+                        break;
+                    case 'disabled':
+                      classes += ' icon icon-enable-false disabled';
+                        break;
+                    case 'invalid':
+                      classes += ' fa fa-warning invalid';
+                        break;
+                    default:
+                        classes += '';
+                }
+                var formattedValue = '<div layout="row"><div class="' + classes + '"></div>';
+              return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + nfCommon.escapeHtml(value) + '</div><div style="float: left; margin-left: 4px;">' + nfCommon.escapeHtml(activeThreadCount) + '</div></div>';
+            };
+    
+            // define the input, read, written, and output columns (reused between both tables)
+          var nameColumn = {id: 'name', field: 'name', name: nf._.msg('nf-summary-table.Name'), sortable: true, resizable: true};
+            var runStatusColumn = {
+                id: 'runStatus',
+                field: 'runStatus',
+              name: nf._.msg('nf-summary-table.RunStatus'),
+                formatter: runStatusFormatter,
+                sortable: true
+            };
+            var inputColumn = {
+                id: 'input',
+                field: 'input',
+              name: '<span class="input-title">'+nf._.msg('nf-summary-table.In')+'</span>&nbsp;/&nbsp;<span class="input-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip:nf._.msg('nf-summary-table.Message'),
+                sortable: true,
+                defaultSortAsc: false,
+                resizable: true
+            };
+            var ioColumn = {
+                id: 'io',
+                field: 'io',
+              name: '<span class="read-title">'+nf._.msg('nf-summary-table.Read')+'</span>&nbsp;/&nbsp;<span class="written-title">'+nf._.msg('nf-summary-table.Write')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip: nf._.msg('nf-summary-table.Message1'),
+                formatter: ioFormatter,
+                sortable: true,
+                defaultSortAsc: false,
+                resizable: true
+            };
+            var outputColumn = {
+                id: 'output',
+                field: 'output',
+              name: '<span class="output-title">'+nf._.msg('nf-summary-table.Out')+'</span>&nbsp;/&nbsp;<span class="output-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip: nf._.msg('nf-summary-table.Message'),
+                sortable: true,
+                defaultSortAsc: false,
+                resizable: true
+            };
+            var tasksTimeColumn = {
+                id: 'tasks',
+                field: 'tasks',
+              name: '<span class="tasks-title">'+nf._.msg('nf-summary-table.Tasks')+'</span>&nbsp;/&nbsp;<span class="time-title">'+nf._.msg('nf-summary-table.Time')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip: nf._.msg('nf-summary-table.Message2'),
+                formatter: taskTimeFormatter,
+                sortable: true,
+                defaultSortAsc: false,
+                resizable: true
+            };
+    
+            // define the column model for the processor summary table
+            var processorsColumnModel = [
+                {
+                    id: 'moreDetails',
+                    field: 'moreDetails',
+                    name: '&nbsp;',
+                    resizable: false,
+                    formatter: moreProcessorDetails,
+                    sortable: true,
+                    width: 50,
+                    maxWidth: 50,
+                  toolTip: nf._.msg('nf-summary-table.Message4')
+                },
+                nameColumn,
+              {id: 'type', field: 'type', name: nf._.msg('nf-summary-table.Type'), sortable: true, resizable: true},
+                runStatusColumn,
+                inputColumn,
+                ioColumn,
+                outputColumn,
+                tasksTimeColumn
+            ];
+    
+            // determine if the this page is in the shell
+            var isInShell = (top !== window);
+    
+            // add an action column if appropriate
+          if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
+                // define how the column is formatted
+                var processorActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (isInShell) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToProcessor')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                  if (nfCommon.SUPPORTS_SVG) {
+                      markup += '<div class="pointer show-processor-status-history fa fa-area-chart" title="'+nf._.msg('nf-summary-table.ViewStatus')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                    if (isClustered) {
+                      markup += '<div class="pointer show-cluster-processor-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewProcessor')+'"></div>';
+                    }
+    
+                    return markup;
+                };
+    
+                // define the action column for clusters and within the shell
+                processorsColumnModel.push({
+                    id: 'actions',
+                    name: '&nbsp;',
+                    formatter: processorActionFormatter,
+                    resizable: false,
+                    sortable: false,
+                    width: 75,
+                    maxWidth: 75
+                });
+            }
+    
+            // initialize the templates table
+            var processorsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var processorsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            processorsData.setItems([]);
+            processorsData.setFilterArgs({
+                searchString: '',
+                property: 'name'
+            });
+            processorsData.setFilter(filter);
+    
+            // initialize the sort
+            sort('processor-summary-table', {
+                columnId: 'name',
+                sortAsc: true
+            }, processorsData);
+    
+            // initialize the grid
+            var processorsGrid = new Slick.Grid('#processor-summary-table', processorsData, processorsColumnModel, processorsOptions);
+            processorsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            processorsGrid.registerPlugin(new Slick.AutoTooltips());
+            processorsGrid.setSortColumn('name', true);
+            processorsGrid.onSort.subscribe(function (e, args) {
+                sort('processor-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, processorsData);
+            });
+    
+            // configure a click listener
+            processorsGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = processorsData.getItem(args.row);
+    
+                // determine the desired action
+                if (processorsGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('go-to')) {
+                        goTo(item.groupId, item.id);
+                    } else if (target.hasClass('show-processor-status-history')) {
+                      nfStatusHistory.showProcessorChart(item.groupId, item.id);
+                    } else if (target.hasClass('show-cluster-processor-summary')) {
+                        // load the cluster processor summary
+                        loadClusterProcessorSummary(item.groupId, item.id);
+    
+                        // hide the summary loading indicator
+                        $('#summary-loading-container').hide();
+    
+                        // show the dialog
+                        $('#cluster-processor-summary-dialog').modal('show');
+    
+                        // resize after opening
+                        clusterProcessorsGrid.resizeCanvas();
+                    }
+                } else if (processorsGrid.getColumns()[args.cell].id === 'moreDetails') {
+                    if (target.hasClass('show-processor-details')) {
+                      nfProcessorDetails.showDetails(item.groupId, item.id);
+                    }
+                }
+            });
+    
+            // wire up the dataview to the grid
+            processorsData.onRowCountChanged.subscribe(function (e, args) {
+                processorsGrid.updateRowCount();
+                processorsGrid.render();
+    
+                // update the total number of displayed processors if necessary
+                if ($('#processor-summary-table').is(':visible')) {
+                  $('#displayed-items').text(nfCommon.formatInteger(args.current));
+                }
+            });
+            processorsData.onRowsChanged.subscribe(function (e, args) {
+                processorsGrid.invalidateRows(args.rows);
+                processorsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#processor-summary-table').data('gridInstance', processorsGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var processorId = $(this).find('span.row-id').text();
+    
+                    // get the status item
+                    var item = processorsData.getItemById(processorId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                            content: tooltip,
+                            position: {
+                                container: $('#summary'),
+                                at: 'bottom right',
+                                my: 'top left',
+                                adjust: {
+                                    x: 4,
+                                    y: 4
+                                }
+                            }
+                        }));
+                    }
+                }
+            });
+    
+            // initialize the cluster processor summary dialog
+            $('#cluster-processor-summary-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.ClusterProcessorSummary'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the cluster processor summary dialog
+                            $('#cluster-processor-id').text('');
+                            $('#cluster-processor-name').text('');
+    
+                            // close the dialog
+                            this.modal('hide');
+                        }
+                    }
+                }],
+                handler: {
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
+                    }
+                }
+            });
+    
+            // cluster processor refresh
+            $('#cluster-processor-refresh-button').click(function () {
+                loadClusterProcessorSummary($('#cluster-processor-group-id').text(), $('#cluster-processor-id').text());
+            });
+    
+            // initialize the cluster processor column model
+            var clusterProcessorsColumnModel = [
+              {id: 'node', field: 'node', name: nf._.msg('Node'), sortable: true, resizable: true},
+                runStatusColumn,
+                inputColumn,
+                ioColumn,
+                outputColumn,
+                tasksTimeColumn
+            ];
+    
+            // initialize the options for the cluster processors table
+            var clusterProcessorsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var clusterProcessorsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            clusterProcessorsData.setItems([]);
+    
+            // initialize the sort
+            sort('cluster-processor-summary-table', {
+                columnId: 'node',
+                sortAsc: true
+            }, clusterProcessorsData);
+    
+            // initialize the grid
+            var clusterProcessorsGrid = new Slick.Grid('#cluster-processor-summary-table', clusterProcessorsData, clusterProcessorsColumnModel, clusterProcessorsOptions);
+            clusterProcessorsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            clusterProcessorsGrid.registerPlugin(new Slick.AutoTooltips());
+            clusterProcessorsGrid.setSortColumn('node', true);
+            clusterProcessorsGrid.onSort.subscribe(function (e, args) {
+                sort('cluster-processor-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, clusterProcessorsData);
+            });
+    
+            // wire up the dataview to the grid
+            clusterProcessorsData.onRowCountChanged.subscribe(function (e, args) {
+                clusterProcessorsGrid.updateRowCount();
+                clusterProcessorsGrid.render();
+            });
+            clusterProcessorsData.onRowsChanged.subscribe(function (e, args) {
+                clusterProcessorsGrid.invalidateRows(args.rows);
+                clusterProcessorsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#cluster-processor-summary-table').data('gridInstance', clusterProcessorsGrid);
+    
+            // define a custom formatter for showing more processor details
+            var moreConnectionDetails = function (row, cell, value, columnDef, dataContext) {
+              return '<div class="pointer show-connection-details fa fa-info-circle" title="'+nf._.msg('nf-summary-table.ViewConnect')+'" style="margin-top: 5px;"></div>';
+          };
+  
+          var backpressureFormatter = function (row, cell, value, columnDef, dataContext) {
+              var percentUseCount = 'NA';
+              if (nfCommon.isDefinedAndNotNull(dataContext.percentUseCount)) {
+                  percentUseCount = dataContext.percentUseCount + '%';
+              }
+              var percentUseBytes = 'NA';
+              if (nfCommon.isDefinedAndNotNull(dataContext.percentUseBytes)) {
+                  percentUseBytes = dataContext.percentUseBytes + '%';
+              }
+              return percentUseCount + ' / ' + percentUseBytes;
+            };
+    
+            // define the input, read, written, and output columns (reused between both tables)
+            var queueColumn = {
+                id: 'queued',
+                field: 'queued',
+              name: '<span class="queued-title">'+nf._.msg('nf-summary-table.Queue')+'</span>&nbsp;/&nbsp;<span class="queued-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>',
+                sortable: true,
+                defaultSortAsc: false,
+              resize: true
+          };
+  
+          // define the backpressure column (reused between both tables)
+          var backpressureColumn = {
+              id: 'backpressure',
+              field: 'backpressure',
+              name: '<span class="backpressure-object-title">Queue</span>&nbsp;/&nbsp;<span class="backpressure-data-size-title">Size</span> Threshold',
+              sortable: true,
+              defaultSortAsc: false,
+              formatter: backpressureFormatter,
+                resize: true
+            };
+    
+            // define the column model for the summary table
+            var connectionsColumnModel = [
+                {
+                    id: 'moreDetails',
+                    name: '&nbsp;',
+                    sortable: false,
+                    resizable: false,
+                    formatter: moreConnectionDetails,
+                    width: 50,
+                    maxWidth: 50
+                },
+              {id: 'sourceName', field: 'sourceName', name: nf._.msg('nf-summary-table.SourceName'), sortable: true, resizable: true},
+              {id: 'name', field: 'name', name: nf._.msg('nf-summary-table.Name'), sortable: true, resizable: true, formatter: valueFormatter},
+                {
+                    id: 'destinationName',
+                    field: 'destinationName',
+                  name: nf._.msg('nf-summary-table.DestinationName'),
+                    sortable: true,
+                    resizable: true
+                },
+                inputColumn,
+                queueColumn,
+              backpressureColumn,
+                outputColumn
+            ];
+    
+            // add an action column if appropriate
+          if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
+                // define how the column is formatted
+                var connectionActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (isInShell) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToConnect')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                  if (nfCommon.SUPPORTS_SVG) {
+                      markup += '<div class="pointer show-connection-status-history fa fa-area-chart" title="'+nf._.msg('nf-summary-table.ViewStatus')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                    if (isClustered) {
+                      markup += '<div class="pointer show-cluster-connection-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewConnect')+'"></div>';
+                    }
+    
+                    return markup;
+                };
+    
+                // define the action column for clusters and within the shell
+                connectionsColumnModel.push({
+                    id: 'actions',
+                    name: '&nbsp;',
+                    formatter: connectionActionFormatter,
+                    resizable: false,
+                    sortable: false,
+                    width: 75,
+                    maxWidth: 75
+                });
+            }
+    
+            // initialize the templates table
+            var connectionsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var connectionsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            connectionsData.setItems([]);
+            connectionsData.setFilterArgs({
+                searchString: '',
+                property: 'sourceName'
+            });
+            connectionsData.setFilter(filter);
+    
+            // initialize the sort
+            sort('connection-summary-table', {
+                columnId: 'sourceName',
+                sortAsc: true
+            }, connectionsData);
+    
+            // initialize the grid
+            var connectionsGrid = new Slick.Grid('#connection-summary-table', connectionsData, connectionsColumnModel, connectionsOptions);
+            connectionsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            connectionsGrid.registerPlugin(new Slick.AutoTooltips());
+            connectionsGrid.setSortColumn('sourceName', true);
+            connectionsGrid.onSort.subscribe(function (e, args) {
+                sort('connection-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, connectionsData);
+            });
+    
+            // configure a click listener
+            connectionsGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = connectionsData.getItem(args.row);
+    
+                // determine the desired action
+                if (connectionsGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('go-to')) {
+                        goTo(item.groupId, item.id);
+                    } else if (target.hasClass('show-connection-status-history')) {
+                      nfStatusHistory.showConnectionChart(item.groupId, item.id);
+                    } else if (target.hasClass('show-cluster-connection-summary')) {
+                        // load the cluster processor summary
+                        loadClusterConnectionSummary(item.groupId, item.id);
+    
+                        // hide the summary loading indicator
+                        $('#summary-loading-container').hide();
+    
+                        // show the dialog
+                        $('#cluster-connection-summary-dialog').modal('show');
+    
+                        // resize after opening
+                        clusterConnectionsGrid.resizeCanvas();
+                    }
+                } else if (connectionsGrid.getColumns()[args.cell].id === 'moreDetails') {
+                    if (target.hasClass('show-connection-details')) {
+                      nfConnectionDetails.showDetails(item.groupId, item.id);
+                    }
+                }
+            });
+    
+            // wire up the dataview to the grid
+            connectionsData.onRowCountChanged.subscribe(function (e, args) {
+                connectionsGrid.updateRowCount();
+                connectionsGrid.render();
+    
+                // update the total number of displayed processors, if necessary
+                if ($('#connection-summary-table').is(':visible')) {
+                  $('#displayed-items').text(nfCommon.formatInteger(args.current));
+                }
+            });
+            connectionsData.onRowsChanged.subscribe(function (e, args) {
+                connectionsGrid.invalidateRows(args.rows);
+                connectionsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#connection-summary-table').data('gridInstance', connectionsGrid);
+    
+            // initialize the cluster connection summary dialog
+            $('#cluster-connection-summary-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.ClusterConnectionSummary'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the cluster connection summary dialog
+                            $('#cluster-connection-id').text('');
+                            $('#cluster-connection-name').text('');
+    
+                            // close the dialog
+                            this.modal('hide');
+                        }
+                    }
+                }],
+                handler: {
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
+                    }
+                }
+            });
+    
+            // cluster connection refresh
+            $('#cluster-connection-refresh-button').click(function () {
+                loadClusterConnectionSummary($('#cluster-connection-group-id').text(), $('#cluster-connection-id').text());
+            });
+    
+            // initialize the cluster processor column model
+            var clusterConnectionsColumnModel = [
+              {id: 'node', field: 'node', name: nf._.msg('nf-summary-table.Node'), sortable: true, resizable: true},
+                inputColumn,
+                queueColumn,
+              backpressureColumn,
+                outputColumn
+            ];
+    
+            // initialize the options for the cluster processors table
+            var clusterConnectionsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var clusterConnectionsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            clusterConnectionsData.setItems([]);
+    
+            // initialize the sort
+            sort('cluster-connection-summary-table', {
+                columnId: 'node',
+                sortAsc: true
+            }, clusterConnectionsData);
+    
+            // initialize the grid
+            var clusterConnectionsGrid = new Slick.Grid('#cluster-connection-summary-table', clusterConnectionsData, clusterConnectionsColumnModel, clusterConnectionsOptions);
+            clusterConnectionsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            clusterConnectionsGrid.registerPlugin(new Slick.AutoTooltips());
+            clusterConnectionsGrid.setSortColumn('node', true);
+            clusterConnectionsGrid.onSort.subscribe(function (e, args) {
+                sort('cluster-connection-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, clusterConnectionsData);
+            });
+    
+            // wire up the dataview to the grid
+            clusterConnectionsData.onRowCountChanged.subscribe(function (e, args) {
+                clusterConnectionsGrid.updateRowCount();
+                clusterConnectionsGrid.render();
+            });
+            clusterConnectionsData.onRowsChanged.subscribe(function (e, args) {
+                clusterConnectionsGrid.invalidateRows(args.rows);
+                clusterConnectionsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#cluster-connection-summary-table').data('gridInstance', clusterConnectionsGrid);
+    
+            // define a custom formatter for showing more port/group details
+            var moreDetails = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+    
+                // if there are bulletins, render them on the graph
+              if (!nfCommon.isEmpty(dataContext.bulletins)) {
+                  markup += '<div class="has-bulletins fa fa-sticky-note-o" style="margin-top: 5px; margin-left: 5px; float: left;"></div><span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
+                }
+    
+                return markup;
+            };
+    
+            var moreDetailsColumn = {
+                id: 'moreDetails',
+                field: 'moreDetails',
+                name: '&nbsp;',
+                resizable: false,
+                formatter: moreDetails,
+                sortable: true,
+                width: 50,
+                maxWidth: 50,
+              toolTip: nf._.msg('nf-summary-table.Message4')
+            };
+            var transferredColumn = {
+                id: 'transferred',
+                field: 'transferred',
+              name: '<span class="transferred-title">'+nf._.msg('nf-summary-table.Transferred')+'</span>&nbsp;/&nbsp;<span class="transferred-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip: nf._.msg('nf-summary-table.Message3'),
+                resizable: true,
+                defaultSortAsc: false,
+                sortable: true
+            };
+            var sentColumn = {
+                id: 'sent',
+                field: 'sent',
+              name: '<span class="sent-title">'+nf._.msg('nf-summary-table.Sent')+'</span>&nbsp;/&nbsp;<span class="sent-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip: nf._.msg('nf-summary-table.Message'),
+                sortable: true,
+                defaultSortAsc: false,
+                resizable: true
+            };
+            var receivedColumn = {
+                id: 'received',
+                field: 'received',
+              name: '<span class="received-title">'+nf._.msg('nf-summary-table.Received')+'</span>&nbsp;/&nbsp;<span class="received-size-title">'+nf._.msg('nf-summary-table.Size')+'</span>&nbsp;<span style="font-weight: normal; overflow: hidden;">'+nf._.msg('nf-summary-table.5min')+'</span>',
+              toolTip: nf._.msg('nf-summary-table.Message'),
+                sortable: true,
+                defaultSortAsc: false,
+                resizable: true
+            };
+    
+            // define the column model for the summary table
+            var processGroupsColumnModel = [
+                moreDetailsColumn,
+              {id: 'name', field: 'name', name: nf._.msg('nf-summary-table.Name'), sortable: true, resizable: true, formatter: valueFormatter},
+                transferredColumn,
+                inputColumn,
+                ioColumn,
+                outputColumn,
+                sentColumn,
+                receivedColumn
+            ];
+    
+            // add an action column if appropriate
+          if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
+                // define how the column is formatted
+                var processGroupActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (isInShell && dataContext.groupId !== null) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToProcessor')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                  if (nfCommon.SUPPORTS_SVG) {
+                      markup += '<div class="pointer show-process-group-status-history fa fa-area-chart" title="'+nf._.msg('nf-summary-table.ViewStatus')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                    if (isClustered) {
+                      markup += '<div class="pointer show-cluster-process-group-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewProcessorGroup')+'"></div>';
+                    }
+    
+                    return markup;
+                };
+    
+                // define the action column for clusters and within the shell
+                processGroupsColumnModel.push({
+                    id: 'actions',
+                    name: '&nbsp;',
+                    formatter: processGroupActionFormatter,
+                    resizable: false,
+                    sortable: false,
+                    width: 75,
+                    maxWidth: 75
+                });
+            }
+    
+            // initialize the templates table
+            var processGroupsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var processGroupsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            processGroupsData.setItems([]);
+            processGroupsData.setFilterArgs({
+                searchString: '',
+                property: 'name'
+            });
+            processGroupsData.setFilter(filter);
+    
+            // initialize the sort
+            sort('process-group-summary-table', {
+                columnId: 'name',
+                sortAsc: true
+            }, processGroupsData);
+    
+            // initialize the grid
+            var processGroupsGrid = new Slick.Grid('#process-group-summary-table', processGroupsData, processGroupsColumnModel, processGroupsOptions);
+            processGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            processGroupsGrid.registerPlugin(new Slick.AutoTooltips());
+            processGroupsGrid.setSortColumn('name', true);
+            processGroupsGrid.onSort.subscribe(function (e, args) {
+                sort('process-group-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, processGroupsData);
+            });
+    
+            // configure a click listener
+            processGroupsGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = processGroupsData.getItem(args.row);
+    
+                // determine the desired action
+                if (processGroupsGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('go-to')) {
+                      if (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.ProcessGroup) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
+                          parent.nf.ProcessGroup.enterGroup(item.id);
+                            parent.$('#shell-close-button').click();
+                        }
+                    } else if (target.hasClass('show-process-group-status-history')) {
+                      nfStatusHistory.showProcessGroupChart(item.groupId, item.id);
+                    } else if (target.hasClass('show-cluster-process-group-summary')) {
+                        // load the cluster processor summary
+                        loadClusterProcessGroupSummary(item.id);
+    
+                        // hide the summary loading indicator
+                        $('#summary-loading-container').hide();
+    
+                        // show the dialog
+                        $('#cluster-process-group-summary-dialog').modal('show');
+    
+                        // resize after opening
+                        clusterProcessGroupsGrid.resizeCanvas();
+                    }
+                }
+            });
+    
+            // wire up the dataview to the grid
+            processGroupsData.onRowCountChanged.subscribe(function (e, args) {
+                processGroupsGrid.updateRowCount();
+                processGroupsGrid.render();
+    
+                // update the total number of displayed process groups if necessary
+                if ($('#process-group-summary-table').is(':visible')) {
+                  $('#displayed-items').text(nfCommon.formatInteger(args.current));
+                }
+            });
+            processGroupsData.onRowsChanged.subscribe(function (e, args) {
+                processGroupsGrid.invalidateRows(args.rows);
+                processGroupsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#process-group-summary-table').data('gridInstance', processGroupsGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var processGroupId = $(this).find('span.row-id').text();
+    
+                    // get the status item
+                    var item = processGroupsData.getItemById(processGroupId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                            content: tooltip,
+                            position: {
+                                container: $('#summary'),
+                                at: 'bottom right',
+                                my: 'top left',
+                                adjust: {
+                                    x: 4,
+                                    y: 4
+                                }
+                            }
+                        }));
+                    }
+                }
+            });
+    
+            // initialize the cluster process group summary dialog
+            $('#cluster-process-group-summary-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.ClusterProcessGroupSummary'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the cluster processor summary dialog
+                            $('#cluster-process-group-id').text('');
+                            $('#cluster-process-group-name').text('');
+    
+                            // close the dialog
+                            this.modal('hide');
+                        }
+                    }
+                }],
+                handler: {
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
+                    }
+                }
+            });
+    
+            // cluster process group refresh
+            $('#cluster-process-group-refresh-button').click(function () {
+                loadClusterProcessGroupSummary($('#cluster-process-group-id').text());
+            });
+    
+            // initialize the cluster process groups column model
+            var clusterProcessGroupsColumnModel = [
+                {id: 'node', field: 'node', name: 'Node', sortable: true, resizable: true},
+                transferredColumn,
+                inputColumn,
+                ioColumn,
+                outputColumn,
+                sentColumn,
+                receivedColumn
+            ];
+    
+            // initialize the options for the cluster processors table
+            var clusterProcessGroupsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var clusterProcessGroupsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            clusterProcessGroupsData.setItems([]);
+    
+            // initialize the sort
+            sort('cluster-processor-summary-table', {
+                columnId: 'node',
+                sortAsc: true
+            }, clusterProcessGroupsData);
+    
+            // initialize the grid
+            var clusterProcessGroupsGrid = new Slick.Grid('#cluster-process-group-summary-table', clusterProcessGroupsData, clusterProcessGroupsColumnModel, clusterProcessGroupsOptions);
+            clusterProcessGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            clusterProcessGroupsGrid.registerPlugin(new Slick.AutoTooltips());
+            clusterProcessGroupsGrid.setSortColumn('node', true);
+            clusterProcessGroupsGrid.onSort.subscribe(function (e, args) {
+                sort('cluster-process-group-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, clusterProcessGroupsData);
+            });
+    
+            // wire up the dataview to the grid
+            clusterProcessGroupsData.onRowCountChanged.subscribe(function (e, args) {
+                clusterProcessGroupsGrid.updateRowCount();
+                clusterProcessGroupsGrid.render();
+            });
+            clusterProcessGroupsData.onRowsChanged.subscribe(function (e, args) {
+                clusterProcessGroupsGrid.invalidateRows(args.rows);
+                clusterProcessGroupsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#cluster-process-group-summary-table').data('gridInstance', clusterProcessGroupsGrid);
+    
+            // define the column model for the summary table
+            var inputPortsColumnModel = [
+                moreDetailsColumn,
+                nameColumn,
+                runStatusColumn,
+                outputColumn
+            ];
+    
+            // add an action column if appropriate
+            if (isClustered || isInShell) {
+                // define how the column is formatted
+                var inputPortActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (isInShell) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToInputPort')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                    if (isClustered) {
+                      markup += '<div class="pointer show-cluster-input-port-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewInputPort')+'"></div>';
+                    }
+    
+                    return markup;
+                };
+    
+                // define the action column for clusters and within the shell
+                inputPortsColumnModel.push({
+                    id: 'actions',
+                    name: '&nbsp;',
+                    formatter: inputPortActionFormatter,
+                    resizable: false,
+                    sortable: false,
+                    width: 75,
+                    maxWidth: 75
+                });
+            }
+    
+            // initialize the input ports table
+            var inputPortsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var inputPortsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            inputPortsData.setItems([]);
+            inputPortsData.setFilterArgs({
+                searchString: '',
+                property: 'name'
+            });
+            inputPortsData.setFilter(filter);
+    
+            // initialize the sort
+            sort('input-port-summary-table', {
+                columnId: 'name',
+                sortAsc: true
+            }, inputPortsData);
+    
+            // initialize the grid
+            var inputPortsGrid = new Slick.Grid('#input-port-summary-table', inputPortsData, inputPortsColumnModel, inputPortsOptions);
+            inputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            inputPortsGrid.registerPlugin(new Slick.AutoTooltips());
+            inputPortsGrid.setSortColumn('name', true);
+            inputPortsGrid.onSort.subscribe(function (e, args) {
+                sort('input-port-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, inputPortsData);
+            });
+    
+            // configure a click listener
+            inputPortsGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = inputPortsData.getItem(args.row);
+    
+                // determine the desired action
+                if (inputPortsGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('go-to')) {
+                        goTo(item.groupId, item.id);
+                    } else if (target.hasClass('show-cluster-input-port-summary')) {
+                        // load the cluster processor summary
+                        loadClusterInputPortSummary(item.groupId, item.id);
+    
+                        // hide the summary loading indicator
+                        $('#summary-loading-container').hide();
+    
+                        // show the dialog
+                        $('#cluster-input-port-summary-dialog').modal('show');
+    
+                        // resize after opening
+                        clusterInputPortsGrid.resizeCanvas();
+                    }
+                }
+            });
+    
+            // wire up the dataview to the grid
+            inputPortsData.onRowCountChanged.subscribe(function (e, args) {
+                inputPortsGrid.updateRowCount();
+                inputPortsGrid.render();
+    
+                // update the total number of displayed processors, if necessary
+                if ($('#input-port-summary-table').is(':visible')) {
+                  $('#display-items').text(nfCommon.formatInteger(args.current));
+                }
+            });
+            inputPortsData.onRowsChanged.subscribe(function (e, args) {
+                inputPortsGrid.invalidateRows(args.rows);
+                inputPortsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#input-port-summary-table').data('gridInstance', inputPortsGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var portId = $(this).find('span.row-id').text();
+    
+                    // get the status item
+                    var item = inputPortsData.getItemById(portId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                            content: tooltip,
+                            position: {
+                                container: $('#summary'),
+                                at: 'bottom right',
+                                my: 'top left',
+                                adjust: {
+                                    x: 4,
+                                    y: 4
+                                }
+                            }
+                        }));
+                    }
+                }
+            });
+    
+            // initialize the cluster input port summary dialog
+            $('#cluster-input-port-summary-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.ClusterInputPortSummary'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the cluster processor summary dialog
+                            $('#cluster-input-port-id').text('');
+                            $('#cluster-input-port-name').text('');
+    
+                            // close the dialog
+                            this.modal('hide');
+                        }
+                    }
+                }],
+                handler: {
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
+                    }
+                }
+            });
+    
+            // cluster input port refresh
+            $('#cluster-input-port-refresh-button').click(function () {
+                loadClusterInputPortSummary($('#cluster-input-port-group-id').text(), $('#cluster-input-port-id').text());
+            });
+    
+            // initialize the cluster input port column model
+            var clusterInputPortsColumnModel = [
+              {id: 'node', field: 'node', name: nf._.msg('nf-summary-table.Node'), sortable: true, resizable: true},
+                runStatusColumn,
+                outputColumn
+            ];
+    
+            // initialize the options for the cluster input port table
+            var clusterInputPortsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var clusterInputPortsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            clusterInputPortsData.setItems([]);
+    
+            // initialize the sort
+            sort('cluster-input-port-summary-table', {
+                columnId: 'node',
+                sortAsc: true
+            }, clusterInputPortsData);
+    
+            // initialize the grid
+            var clusterInputPortsGrid = new Slick.Grid('#cluster-input-port-summary-table', clusterInputPortsData, clusterInputPortsColumnModel, clusterInputPortsOptions);
+            clusterInputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            clusterInputPortsGrid.registerPlugin(new Slick.AutoTooltips());
+            clusterInputPortsGrid.setSortColumn('node', true);
+            clusterInputPortsGrid.onSort.subscribe(function (e, args) {
+                sort('cluster-input-port-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, clusterInputPortsData);
+            });
+    
+            // wire up the dataview to the grid
+            clusterInputPortsData.onRowCountChanged.subscribe(function (e, args) {
+                clusterInputPortsGrid.updateRowCount();
+                clusterInputPortsGrid.render();
+            });
+            clusterInputPortsData.onRowsChanged.subscribe(function (e, args) {
+                clusterInputPortsGrid.invalidateRows(args.rows);
+                clusterInputPortsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#cluster-input-port-summary-table').data('gridInstance', clusterInputPortsGrid);
+    
+            // define the column model for the summary table
+            var outputPortsColumnModel = [
+                moreDetailsColumn,
+                nameColumn,
+                runStatusColumn,
+                inputColumn
+            ];
+    
+            // add an action column if appropriate
+            if (isClustered || isInShell) {
+                // define how the column is formatted
+                var outputPortActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (isInShell) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToOutputPort')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                    if (isClustered) {
+                      markup += '<div class="pointer show-cluster-output-port-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewOutputPort')+'"></div>';
+                    }
+    
+                    return markup;
+                };
+    
+                // define the action column for clusters and within the shell
+                outputPortsColumnModel.push({
+                    id: 'actions',
+                    name: '&nbsp;',
+                    formatter: outputPortActionFormatter,
+                    resizable: false,
+                    sortable: false,
+                    width: 75,
+                    maxWidth: 75
+                });
+            }
+    
+            // initialize the input ports table
+            var outputPortsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var outputPortsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            outputPortsData.setItems([]);
+            outputPortsData.setFilterArgs({
+                searchString: '',
+                property: 'name'
+            });
+            outputPortsData.setFilter(filter);
+    
+            // initialize the sort
+            sort('output-port-summary-table', {
+                columnId: 'name',
+                sortAsc: true
+            }, outputPortsData);
+    
+            // initialize the grid
+            var outputPortsGrid = new Slick.Grid('#output-port-summary-table', outputPortsData, outputPortsColumnModel, outputPortsOptions);
+            outputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            outputPortsGrid.registerPlugin(new Slick.AutoTooltips());
+            outputPortsGrid.setSortColumn('name', true);
+            outputPortsGrid.onSort.subscribe(function (e, args) {
+                sort('output-port-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, outputPortsData);
+            });
+    
+            // configure a click listener
+            outputPortsGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = outputPortsData.getItem(args.row);
+    
+                // determine the desired action
+                if (outputPortsGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('go-to')) {
+                        goTo(item.groupId, item.id);
+                    } else if (target.hasClass('show-cluster-output-port-summary')) {
+                        // load the cluster processor summary
+                        loadClusterOutputPortSummary(item.groupId, item.id);
+    
+                        // hide the summary loading indicator
+                        $('#summary-loading-container').hide();
+    
+                        // show the dialog
+                        $('#cluster-output-port-summary-dialog').modal('show');
+    
+                        // resize after opening
+                        clusterOutputPortsGrid.resizeCanvas();
+                    }
+                }
+            });
+    
+            // wire up the dataview to the grid
+            outputPortsData.onRowCountChanged.subscribe(function (e, args) {
+                outputPortsGrid.updateRowCount();
+                outputPortsGrid.render();
+    
+                // update the total number of displayed processors, if necessary
+                if ($('#output-port-summary-table').is(':visible')) {
+                  $('#display-items').text(nfCommon.formatInteger(args.current));
+                }
+            });
+            outputPortsData.onRowsChanged.subscribe(function (e, args) {
+                outputPortsGrid.invalidateRows(args.rows);
+                outputPortsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#output-port-summary-table').data('gridInstance', outputPortsGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var portId = $(this).find('span.row-id').text();
+    
+                    // get the status item
+                    var item = outputPortsData.getItemById(portId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                            content: tooltip,
+                            position: {
+                                container: $('#summary'),
+                                at: 'bottom right',
+                                my: 'top left',
+                                adjust: {
+                                    x: 4,
+                                    y: 4
+                                }
+                            }
+                        }));
+                    }
+                }
+            });
+    
+            // initialize the cluster output port summary dialog
+            $('#cluster-output-port-summary-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.ClusterOutPutPortSummary'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the cluster processor summary dialog
+                            $('#cluster-output-port-id').text('');
+                            $('#cluster-output-port-name').text('');
+    
+                            // close the dialog
+                            this.modal('hide');
+                        }
+                    }
+                }],
+                handler: {
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
+                    }
+                }
+            });
+    
+            // cluster output port refresh
+            $('#cluster-output-port-refresh-button').click(function () {
+                loadClusterOutputPortSummary($('#cluster-output-port-group-id').text(), $('#cluster-output-port-id').text());
+            });
+    
+            // initialize the cluster output port column model
+            var clusterOutputPortsColumnModel = [
+              {id: 'node', field: 'node', name: nf._.msg('nf-summary-table.Node'), sortable: true, resizable: true},
+                runStatusColumn,
+                inputColumn
+            ];
+    
+            // initialize the options for the cluster output port table
+            var clusterOutputPortsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var clusterOutputPortsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            clusterOutputPortsData.setItems([]);
+    
+            // initialize the sort
+            sort('cluster-output-port-summary-table', {
+                columnId: 'node',
+                sortAsc: true
+            }, clusterOutputPortsData);
+    
+            // initialize the grid
+            var clusterOutputPortsGrid = new Slick.Grid('#cluster-output-port-summary-table', clusterOutputPortsData, clusterOutputPortsColumnModel, clusterOutputPortsOptions);
+            clusterOutputPortsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            clusterOutputPortsGrid.registerPlugin(new Slick.AutoTooltips());
+            clusterOutputPortsGrid.setSortColumn('node', true);
+            clusterOutputPortsGrid.onSort.subscribe(function (e, args) {
+                sort('cluster-output-port-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, clusterOutputPortsData);
+            });
+    
+            // wire up the dataview to the grid
+            clusterOutputPortsData.onRowCountChanged.subscribe(function (e, args) {
+                clusterOutputPortsGrid.updateRowCount();
+                clusterOutputPortsGrid.render();
+            });
+            clusterOutputPortsData.onRowsChanged.subscribe(function (e, args) {
+                clusterOutputPortsGrid.invalidateRows(args.rows);
+                clusterOutputPortsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#cluster-output-port-summary-table').data('gridInstance', clusterOutputPortsGrid);
+    
+            // define a custom formatter for the run status column
+            var transmissionStatusFormatter = function (row, cell, value, columnDef, dataContext) {
+                var activeThreadCount = '';
+              if (nfCommon.isDefinedAndNotNull(dataContext.activeThreadCount) && dataContext.activeThreadCount > 0) {
+                    activeThreadCount = '(' + dataContext.activeThreadCount + ')';
+                }
+    
+                // determine what to put in the mark up
+                var transmissionClass = 'invalid fa fa-warning';
+                var transmissionLabel = 'Invalid';
+                if (value === 'Transmitting') {
+                    transmissionClass = 'transmitting fa fa-bullseye';
+                    transmissionLabel = value;
+                } else {
+                    transmissionClass = 'not-transmitting icon icon-transmit-false';
+                    transmissionLabel = 'Not Transmitting';
+                }
+    
+                // generate the mark up
+              var formattedValue = '<div layout="row"><div class="' + transmissionClass + '"></div>';
+              return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + transmissionLabel + '</div><div style="float: left; margin-left: 4px;">' + nfCommon.escapeHtml(activeThreadCount) + '</div></div>';
+            };
+    
+            var transmissionStatusColumn = {
+                id: 'transmissionStatus',
+                field: 'transmissionStatus',
+              name: nf._.msg('nf-summary-table.Transmitting'),
+                formatter: transmissionStatusFormatter,
+                sortable: true,
+                resizable: true
+            };
+            var targetUriColumn = {
+                id: 'targetUri',
+                field: 'targetUri',
+              name: nf._.msg('nf-summary-table.Target URI'),
+                sortable: true,
+                resizable: true
+            };
+    
+            // define the column model for the summary table
+            var remoteProcessGroupsColumnModel = [
+                {
+                    id: 'moreDetails',
+                    field: 'moreDetails',
+                    name: '&nbsp;',
+                    resizable: false,
+                    formatter: moreDetails,
+                    sortable: true,
+                    width: 50,
+                    maxWidth: 50,
+                  toolTip: nf._.msg('nf-summary-table.Message4')
+                },
+                nameColumn,
+                targetUriColumn,
+                transmissionStatusColumn,
+                sentColumn,
+                receivedColumn
+            ];
+    
+            // add an action column if appropriate
+          if (isClustered || isInShell || nfCommon.SUPPORTS_SVG) {
+                // define how the column is formatted
+                var remoteProcessGroupActionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (isInShell) {
+                      markup += '<div class="pointer go-to fa fa-long-arrow-right" title="'+nf._.msg('nf-summary-table.GoToProcessorGroup')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                  if (nfCommon.SUPPORTS_SVG) {
+                      markup += '<div class="pointer show-remote-process-group-status-history fa fa-area-chart" title="'+nf._.msg('nf-summary-table.ViewStatus')+'" style="margin-right: 3px;"></div>';
+                    }
+    
+                    if (isClustered) {
+                      markup += '<div class="pointer show-cluster-remote-process-group-summary fa fa-cubes" title="'+nf._.msg('nf-summary-table.ViewRemoteProcessorGroup')+'"></div>';
+                    }
+    
+                    return markup;
+                };
+    
+                // define the action column for clusters and within the shell
+                remoteProcessGroupsColumnModel.push({
+                    id: 'actions',
+                    name: '&nbsp;',
+                    formatter: remoteProcessGroupActionFormatter,
+                    resizable: false,
+                    sortable: false,
+                    width: 75,
+                    maxWidth: 75
+                });
+            }
+    
+            // initialize the remote process groups table
+            var remoteProcessGroupsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false,
+                multiSelect: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var remoteProcessGroupsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            remoteProcessGroupsData.setItems([]);
+            remoteProcessGroupsData.setFilterArgs({
+                searchString: '',
+                property: 'name'
+            });
+            remoteProcessGroupsData.setFilter(filter);
+    
+            // initialize the sort
+            sort('remote-process-group-summary-table', {
+                columnId: 'name',
+                sortAsc: true
+            }, remoteProcessGroupsData);
+    
+            // initialize the grid
+            var remoteProcessGroupsGrid = new Slick.Grid('#remote-process-group-summary-table', remoteProcessGroupsData, remoteProcessGroupsColumnModel, remoteProcessGroupsOptions);
+            remoteProcessGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            remoteProcessGroupsGrid.registerPlugin(new Slick.AutoTooltips());
+            remoteProcessGroupsGrid.setSortColumn('name', true);
+            remoteProcessGroupsGrid.onSort.subscribe(function (e, args) {
+                sort('remote-process-group-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, remoteProcessGroupsData);
+            });
+    
+            // configure a click listener
+            remoteProcessGroupsGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = remoteProcessGroupsData.getItem(args.row);
+    
+                // determine the desired action
+                if (remoteProcessGroupsGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('go-to')) {
+                        goTo(item.groupId, item.id);
+                    } else if (target.hasClass('show-remote-process-group-status-history')) {
+                      nfStatusHistory.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);
+    
+                        // hide the summary loading indicator
+                        $('#summary-loading-container').hide();
+    
+                        // show the dialog
+                        $('#cluster-remote-process-group-summary-dialog').modal('show');
+    
+                        // resize after opening
+                        clusterRemoteProcessGroupsGrid.resizeCanvas();
+                    }
+                }
+            });
+    
+            // wire up the dataview to the grid
+            remoteProcessGroupsData.onRowCountChanged.subscribe(function (e, args) {
+                remoteProcessGroupsGrid.updateRowCount();
+                remoteProcessGroupsGrid.render();
+    
+                // update the total number of displayed processors, if necessary
+                if ($('#remote-process-group-summary-table').is(':visible')) {
+                  $('#displayed-items').text(nfCommon.formatInteger(args.current));
+                }
+            });
+            remoteProcessGroupsData.onRowsChanged.subscribe(function (e, args) {
+                remoteProcessGroupsGrid.invalidateRows(args.rows);
+                remoteProcessGroupsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#remote-process-group-summary-table').data('gridInstance', remoteProcessGroupsGrid).on('mouseenter', 'div.slick-cell', function (e) {
+                var bulletinIcon = $(this).find('div.has-bulletins');
+                if (bulletinIcon.length && !bulletinIcon.data('qtip')) {
+                    var remoteProcessGroupId = $(this).find('span.row-id').text();
+    
+                    // get the status item
+                    var item = remoteProcessGroupsData.getItemById(remoteProcessGroupId);
+    
+                    // format the tooltip
+                  var bulletins = nfCommon.getFormattedBulletins(item.bulletins);
+                  var tooltip = nfCommon.formatUnorderedList(bulletins);
+    
+                    // show the tooltip
+                  if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                      bulletinIcon.qtip($.extend({}, nfCommon.config.tooltipConfig, {
+                            content: tooltip,
+                            position: {
+                                container: $('#summary'),
+                                at: 'bottom right',
+                                my: 'top left',
+                                adjust: {
+                                    x: 4,
+                                    y: 4
+                                }
+                            }
+                        }));
+                    }
+                }
+            });
+    
+            // initialize the cluster remote process group summary dialog
+            $('#cluster-remote-process-group-summary-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.ClusterRemoteProcessGroupSummary'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            // clear the cluster processor summary dialog
+                            $('#cluster-remote-process-group-id').text('');
+                            $('#cluster-remote-process-group-name').text('');
+    
+                            // close the dialog
+                            this.modal('hide');
+                        }
+                    }
+                }],
+                handler: {
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
+                    }
+                }
+            });
+    
+            // cluster remote process group refresh
+            $('#cluster-remote-process-group-refresh-button').click(function () {
+                loadClusterRemoteProcessGroupSummary($('#cluster-remote-process-group-group-id').text(), $('#cluster-remote-process-group-id').text());
+            });
+    
+            // initialize the cluster remote process group column model
+            var clusterRemoteProcessGroupsColumnModel = [
+              {id: 'node', field: 'node', name: nf._.msg('nf-summary-table.Node'), sortable: true, resizable: true},
+                targetUriColumn,
+                transmissionStatusColumn,
+                sentColumn,
+                receivedColumn
+            ];
+    
+            // initialize the options for the cluster remote process group table
+            var clusterRemoteProcessGroupsOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: false,
+                enableColumnReorder: false,
+                autoEdit: false,
+                rowHeight: 24
+            };
+    
+            // initialize the dataview
+            var clusterRemoteProcessGroupsData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            clusterRemoteProcessGroupsData.setItems([]);
+    
+            // initialize the sort
+            sort('cluster-remote-process-group-summary-table', {
+                columnId: 'node',
+                sortAsc: true
+            }, clusterRemoteProcessGroupsData);
+    
+            // initialize the grid
+            var clusterRemoteProcessGroupsGrid = new Slick.Grid('#cluster-remote-process-group-summary-table', clusterRemoteProcessGroupsData, clusterRemoteProcessGroupsColumnModel, clusterRemoteProcessGroupsOptions);
+            clusterRemoteProcessGroupsGrid.setSelectionModel(new Slick.RowSelectionModel());
+            clusterRemoteProcessGroupsGrid.registerPlugin(new Slick.AutoTooltips());
+            clusterRemoteProcessGroupsGrid.setSortColumn('node', true);
+            clusterRemoteProcessGroupsGrid.onSort.subscribe(function (e, args) {
+                sort('cluster-remote-process-group-summary-table', {
+                    columnId: args.sortCol.field,
+                    sortAsc: args.sortAsc
+                }, clusterRemoteProcessGroupsData);
+            });
+    
+            // wire up the dataview to the grid
+            clusterRemoteProcessGroupsData.onRowCountChanged.subscribe(function (e, args) {
+                clusterRemoteProcessGroupsGrid.updateRowCount();
+                clusterRemoteProcessGroupsGrid.render();
+            });
+            clusterRemoteProcessGroupsData.onRowsChanged.subscribe(function (e, args) {
+                clusterRemoteProcessGroupsGrid.invalidateRows(args.rows);
+                clusterRemoteProcessGroupsGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#cluster-remote-process-group-summary-table').data('gridInstance', clusterRemoteProcessGroupsGrid);
+    
+            // show the dialog when clicked
+            $('#system-diagnostics-link').click(function () {
+                refreshSystemDiagnostics().done(function () {
+                    // hide the summary loading container
+                    $('#summary-loading-container').hide();
+    
+                    // show the dialog
+                    $('#system-diagnostics-dialog').modal('show');
+                });
+            });
+    
+            // initialize the summary tabs
+            $('#system-diagnostics-tabs').tabbs({
+                tabStyle: 'tab',
+                selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
+                tabs: [{
+                  name: nf._.msg('nf-summary-table.JVM'),
+                    tabContentId: 'jvm-tab-content'
+                }, {
+                  name: nf._.msg('nf-summary-table.System'),
+                    tabContentId: 'system-tab-content'
+              }, {
+                  name: 'Version',
+                  tabContentId: 'version-tab-content'
+                }]
+            });
+    
+            // initialize the system diagnostics dialog
+            $('#system-diagnostics-dialog').modal({
+                scrollableContentStyle: 'scrollable',
+              headerText: nf._.msg('nf-summary-table.SystemDiagnostics'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-summary-table.Close'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            this.modal('hide');
+                        }
+                    }
+                }],
+                handler: {
+                    close: function () {
+                        // show the summary loading container
+                        $('#summary-loading-container').show();
+                    },
+                    open: function () {
+                      nfCommon.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
+                    }
+                }
+            });
+    
+            // refresh the system diagnostics when clicked
+            $('#system-diagnostics-refresh-button').click(function () {
+                refreshSystemDiagnostics();
+            });
+    
+            // initialize the total number of processors
+            $('#total-items').text('0');
+        };
+    
+        var sortState = {};
+    
+        /**
+         * Sorts the specified data using the specified sort details.
+         *
+         * @param {string} tableId
+         * @param {object} sortDetails
+         * @param {object} data
+         */
+        var sort = function (tableId, sortDetails, data) {
+            // ensure there is a state object for this table
+          if (nfCommon.isUndefined(sortState[tableId])) {
+                sortState[tableId] = {};
+            }
+    
+            // defines a function for sorting
+            var comparer = function (a, b) {
+                if (sortDetails.columnId === 'moreDetails') {
+                    var aBulletins = 0;
+                  if (!nfCommon.isEmpty(a.bulletins)) {
+                        aBulletins = a.bulletins.length;
+                    }
+                    var bBulletins = 0;
+                  if (!nfCommon.isEmpty(b.bulletins)) {
+                        bBulletins = b.bulletins.length;
+                    }
+                    return aBulletins - bBulletins;
+                } else if (sortDetails.columnId === 'runStatus' || sortDetails.columnId === 'transmissionStatus') {
+                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                    if (aString === bString) {
+                        return a.activeThreadCount - b.activeThreadCount;
+                    } else {
+                        return aString === bString ? 0 : aString > bString ? 1 : -1;
+                    }
+                } else if (sortDetails.columnId === 'queued') {
+                    var mod = sortState[tableId].count % 4;
+                    if (mod < 2) {
+                        $('#' + tableId + ' span.queued-title').addClass('sorted');
+                      var aQueueCount = nfCommon.parseCount(a['queuedCount']);
+                      var bQueueCount = nfCommon.parseCount(b['queuedCount']);
+                        return aQueueCount - bQueueCount;
+                    } else {
+                        $('#' + tableId + ' span.queued-size-title').addClass('sorted');
+                      var aQueueSize = nfCommon.parseSize(a['queuedSize']);
+                      var bQueueSize = nfCommon.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 = nfCommon.isDefinedAndNotNull(a['percentUseCount']) ? a['percentUseCount'] : -1;
+                      var bPercentUseObject = nfCommon.isDefinedAndNotNull(b['percentUseCount']) ? b['percentUseCount'] : -1;
+                      return aPercentUseObject - bPercentUseObject;
+                  } else {
+                      $('#' + tableId + ' span.backpressure-data-size-title').addClass('sorted');
+                      var aPercentUseDataSize = nfCommon.isDefinedAndNotNull(a['percentUseBytes']) ? a['percentUseBytes'] : -1;
+                      var bPercentUseDataSize = nfCommon.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') {
+                  var aSplit = a[sortDetails.columnId].split(/\(([^)]+)\)/);
+                  var bSplit = b[sortDetails.columnId].split(/\(([^)]+)\)/);
+                    var mod = sortState[tableId].count % 4;
+                    if (mod < 2) {
+                        $('#' + tableId + ' span.' + sortDetails.columnId + '-title').addClass('sorted');
+                      var aCount = nfCommon.parseCount(aSplit[0]);
+                      var bCount = nfCommon.parseCount(bSplit[0]);
+                        return aCount - bCount;
+                    } else {
+                        $('#' + tableId + ' span.' + sortDetails.columnId + '-size-title').addClass('sorted');
+                      var aSize = nfCommon.parseSize(aSplit[1]);
+                      var bSize = nfCommon.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 = nfCommon.parseSize(a['read']);
+                      var bReadSize = nfCommon.parseSize(b['read']);
+                        return aReadSize - bReadSize;
+                    } else {
+                        $('#' + tableId + ' span.written-title').addClass('sorted');
+                      var aWriteSize = nfCommon.parseSize(a['written']);
+                      var bWriteSize = nfCommon.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 = nfCommon.parseCount(a['tasks']);
+                      var bTasks = nfCommon.parseCount(b['tasks']);
+                        return aTasks - bTasks;
+                    } else {
+                        $('#' + tableId + ' span.time-title').addClass('sorted');
+                      var aDuration = nfCommon.parseDuration(a['tasksDuration']);
+                      var bDuration = nfCommon.parseDuration(b['tasksDuration']);
+                        return aDuration - bDuration;
+                    }
+                } else {
+                  var aString = nfCommon.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
+                  var bString = nfCommon.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
+                    return aString === bString ? 0 : aString > bString ? 1 : -1;
+                }
+            };
+    
+            // remove previous sort indicators
+            $('#' + tableId + ' span.queued-title').removeClass('sorted');
+            $('#' + tableId + ' span.queued-size-title').removeClass('sorted');
+          $('#' + tableId + ' span.backpressure-object-title').removeClass('sorted');
+          $('#' + tableId + ' span.backpressure-data-size-title').removeClass('sorted');
+            $('#' + tableId + ' span.input-title').removeClass('sorted');
+            $('#' + tableId + ' span.input-size-title').removeClass('sorted');
+            $('#' + tableId + ' span.output-title').removeClass('sorted');
+            $('#' + tableId + ' span.output-size-title').removeClass('sorted');
+            $('#' + tableId + ' span.read-title').removeClass('sorted');
+            $('#' + tableId + ' span.written-title').removeClass('sorted');
+            $('#' + tableId + ' span.time-title').removeClass('sorted');
+            $('#' + tableId + ' span.tasks-title').removeClass('sorted');
+            $('#' + tableId + ' span.sent-title').removeClass('sorted');
+            $('#' + tableId + ' span.sent-size-title').removeClass('sorted');
+            $('#' + tableId + ' span.received-title').removeClass('sorted');
+            $('#' + tableId + ' span.received-size-title').removeClass('sorted');
+            $('#' + tableId + ' span.transferred-title').removeClass('sorted');
+            $('#' + tableId + ' span.transferred-size-title').removeClass('sorted');
+    
+            // update/reset the count as appropriate
+            if (sortState[tableId].prevColumn !== sortDetails.columnId) {
+                sortState[tableId].count = 0;
+            } else {
+                sortState[tableId].count++;
+            }
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+    
+            // record the previous table and sorted column
+            sortState[tableId].prevColumn = sortDetails.columnId;
+        };
+    
+        /**
+         * Performs the processor 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;
+        };
+    
+        /**
+         * Refreshes the system diagnostics.
+         */
+        var refreshSystemDiagnostics = function () {
+            var systemDiagnosticsUri = config.urls.systemDiagnostics;
+    
+            // add the parameter if appropriate
+            var parameters = {};
+          if (!nfCommon.isNull(clusterNodeId)) {
+                parameters['clusterNodeId'] = clusterNodeId;
+            }
+    
+            // update the status uri if appropriate
+            if (!$.isEmptyObject(parameters)) {
+                systemDiagnosticsUri += '?' + $.param(parameters);
+            }
+    
+            return $.ajax({
+                type: 'GET',
+                url: systemDiagnosticsUri,
+                dataType: 'json'
+            }).done(function (response) {
+                var systemDiagnostics = response.systemDiagnostics;
+                var aggregateSnapshot = systemDiagnostics.aggregateSnapshot;
+    
+                // heap
+                $('#max-heap').text(aggregateSnapshot.maxHeap);
+                $('#total-heap').text(aggregateSnapshot.totalHeap);
+                $('#used-heap').text(aggregateSnapshot.usedHeap);
+                $('#free-heap').text(aggregateSnapshot.freeHeap);
+    
+                // ensure the heap utilization could be calculated
+              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.heapUtilization)) {
+                    $('#utilization-heap').text('(' + aggregateSnapshot.heapUtilization + ')');
+                } else {
+                    $('#utilization-heap').text('');
+                }
+    
+                // non heap
+                $('#max-non-heap').text(aggregateSnapshot.maxNonHeap);
+                $('#total-non-heap').text(aggregateSnapshot.totalNonHeap);
+                $('#used-non-heap').text(aggregateSnapshot.usedNonHeap);
+                $('#free-non-heap').text(aggregateSnapshot.freeNonHeap);
+    
+                // enure the non heap utilization could be calculated
+              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.nonHeapUtilization)) {
+                    $('#utilization-non-heap').text('(' + aggregateSnapshot.nonHeapUtilization + ')');
+                } else {
+                    $('#utilization-non-heap').text('');
+                }
+    
+                // garbage collection
+                var garbageCollectionContainer = $('#garbage-collection-table tbody').empty();
+              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.garbageCollection)) {
+                  // sort the garbage collections
+                  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
+                  $.each(sortedGarbageCollection, function (_, garbageCollection) {
+                        addGarbageCollection(garbageCollectionContainer, garbageCollection);
+                    });
+              }
+              
+              // uptime
+              $('#uptime').text(aggregateSnapshot.uptime);
+    
+                // available processors
+                $('#available-processors').text(aggregateSnapshot.availableProcessors);
+    
+                // load
+              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.processorLoadAverage)) {
+                  $('#processor-load-average').text(nfCommon.formatFloat(aggregateSnapshot.processorLoadAverage));
+                } else {
+                  $('#processor-load-average').html(nfCommon.formatValue(aggregateSnapshot.processorLoadAverage));
+                }
+    
+              // flow file storage usage
+                var flowFileRepositoryStorageUsageContainer = $('#flow-file-repository-storage-usage-container').empty();
+                addStorageUsage(flowFileRepositoryStorageUsageContainer, aggregateSnapshot.flowFileRepositoryStorageUsage);
+    
+              // content repo storage usage
+                var contentRepositoryUsageContainer = $('#content-repository-storage-usage-container').empty();
+              if (nfCommon.isDefinedAndNotNull(aggregateSnapshot.contentRepositoryStorageUsage)) {
+                  // sort the content repos
+                  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
+                  $.each(sortedContentRepositoryStorageUsage, function (_, contentRepository) {
+                        addStorageUsage(contentRepositoryUsageContainer, contentRepository);
+                    });
+              }
+  
+              // Version
+              var versionSpanSelectorToFieldMap = {
+                  '#version-nifi': aggregateSnapshot.versionInfo.niFiVersion,
+                  '#version-build-tag': aggregateSnapshot.versionInfo.buildTag,
+                  '#version-build-timestamp': aggregateSnapshot.versionInfo.buildTimestamp,
+                  '#version-build-branch': aggregateSnapshot.versionInfo.buildBranch,
+                  '#version-build-revision': aggregateSnapshot.versionInfo.buildRevision,
+                  '#version-java-version': aggregateSnapshot.versionInfo.javaVersion,
+                  '#version-java-vendor': aggregateSnapshot.versionInfo.javaVendor,
+                  '#version-os-name': aggregateSnapshot.versionInfo.osName,
+                  '#version-os-version': aggregateSnapshot.versionInfo.osVersion,
+                  '#version-os-arch': aggregateSnapshot.versionInfo.osArchitecture
+              };
+              for (var versionSpanSelector in versionSpanSelectorToFieldMap) {
+                  var dataField = versionSpanSelectorToFieldMap[versionSpanSelector];
+                  if (dataField) {
+                      $(versionSpanSelector).text(dataField);
+                  } else {
+                      $(versionSpanSelector).text('(not available)').addClass('unset');
+                  }
+              }
+    
+                // update the stats last refreshed timestamp
+                $('#system-diagnostics-last-refreshed').text(aggregateSnapshot.statsLastRefreshed);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Adds a new garbage collection to the dialog
+         * @param {type} container
+         * @param {type} garbageCollection
+         */
+        var addGarbageCollection = function (container, garbageCollection) {
+            var nameTr = $('<tr></tr>').appendTo(container);
+          $('<td class="setting-name"></td>').text(garbageCollection.name + ':').appendTo(nameTr);
+            var valTr = $('<tr></tr>').appendTo(container);
+          $('<td></td>').append($('<b></b>').text(garbageCollection.collectionCount + nf._.msg('nf-summary-table.times') + '(' + garbageCollection.collectionTime + ')')).appendTo(valTr);
+            $('<tr></tr>').text(' ').appendTo(container);
+        };
+    
+        /**
+         * Adds a new storage usage process bar to the dialog.
+         *
+         * @argument {jQuery} container     The container to add the storage usage to.
+         * @argument {object} storageUsage     The storage usage.
+         */
+        var addStorageUsage = function (container, storageUsage) {
+            var total = parseInt(storageUsage.totalSpaceBytes, 10);
+            var used = parseInt(storageUsage.usedSpaceBytes, 10);
+            var storageUsageContainer = $('<div class="storage-usage"></div>').appendTo(container);
+    
+            var storage = $('<div class="storage-identifier setting-name"></div>');
+            storage.text('Usage:');
+          if (nfCommon.isDefinedAndNotNull(storageUsage.identifier)) {
+              storage.text(nf._.msg('nf-summary-table.UsageFor') + storageUsage.identifier + ':');
+            }
+            storage.appendTo(storageUsageContainer);
+    
+          (nfNgBridge.injector.get('$compile')($('<md-progress-linear class="md-hue-2" md-mode="determinate" value="' + (used / total) * 100 + '" aria-label="FlowFile Repository Storage Usage"></md-progress-linear>'))(nfNgBridge.rootScope)).appendTo(storageUsageContainer);
+    
+            var usageDetails = $('<div class="storage-usage-details"></div>').text(' (' + storageUsage.usedSpace + ' of ' + storageUsage.totalSpace + ')').prepend($('<b></b>').text(Math.round((used / total) * 100) + '%'));
+            $('<div class="storage-usage-header"></div>').append(usageDetails).append('<div class="clear"></div>').appendTo(storageUsageContainer);
+        };
+    
+        /**
+         * 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 $('#summary-filter').val();
+        };
+    
+        /**
+         * Poplates the processor summary table using the specified process group.
+         *
+         * @argument {array} processorItems                 The processor data
+         * @argument {array} connectionItems                The connection data
+         * @argument {array} processGroupItems              The process group data
+         * @argument {array} inputPortItems                 The input port data
+         * @argument {array} outputPortItems                The input port data
+         * @argument {array} remoteProcessGroupItems        The remote process group data
+         * @argument {object} aggregateSnapshot            The process group status
+         */
+        var populateProcessGroupStatus = function (processorItems, connectionItems, processGroupItems, inputPortItems, outputPortItems, remoteProcessGroupItems, aggregateSnapshot) {
+            // add the processors to the summary grid
+            $.each(aggregateSnapshot.processorStatusSnapshots, function (i, procStatusEntity) {
+                processorItems.push(procStatusEntity.processorStatusSnapshot);
+            });
+    
+            // add the processors to the summary grid
+            $.each(aggregateSnapshot.connectionStatusSnapshots, function (i, connStatusEntity) {
+                connectionItems.push(connStatusEntity.connectionStatusSnapshot);
+            });
+    
+            // add the input ports to the summary grid
+            $.each(aggregateSnapshot.inputPortStatusSnapshots, function (i, portStatusEntity) {
+                inputPortItems.push(portStatusEntity.portStatusSnapshot);
+            });
+    
+            // add the input ports to the summary grid
+            $.each(aggregateSnapshot.outputPortStatusSnapshots, function (i, portStatusEntity) {
+                outputPortItems.push(portStatusEntity.portStatusSnapshot);
+            });
+    
+            // add the input ports to the summary grid
+            $.each(aggregateSnapshot.remoteProcessGroupStatusSnapshots, function (i, rpgStatusEntity) {
+                remoteProcessGroupItems.push(rpgStatusEntity.remoteProcessGroupStatusSnapshot);
+            });
+    
+            // add the process group status as well
+            processGroupItems.push(aggregateSnapshot);
+    
+            // add any child group's status
+            $.each(aggregateSnapshot.processGroupStatusSnapshots, function (i, childProcessGroupEntity) {
+                populateProcessGroupStatus(processorItems, connectionItems, processGroupItems, inputPortItems, outputPortItems, remoteProcessGroupItems, childProcessGroupEntity.processGroupStatusSnapshot);
+            });
+        };
+    
+        /**
+         * Applies the filter found in the filter expression text field.
+         */
+        var applyFilter = function () {
+            var grid;
+            if ($('#processor-summary-table').is(':visible')) {
+                grid = $('#processor-summary-table').data('gridInstance');
+            } else if ($('#connection-summary-table').is(':visible')) {
+                grid = $('#connection-summary-table').data('gridInstance');
+            } else if ($('#input-port-summary-table').is(':visible')) {
+                grid = $('#input-port-summary-table').data('gridInstance');
+            } else if ($('#output-port-summary-table').is(':visible')) {
+                grid = $('#output-port-summary-table').data('gridInstance');
+            } else if ($('#process-group-summary-table').is(':visible')) {
+                grid = $('#process-group-summary-table').data('gridInstance');
+            } else if ($('#remote-process-group-summary-table').is(':visible')) {
+                grid = $('#remote-process-group-summary-table').data('gridInstance');
+            }
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(grid)) {
+                var data = grid.getData();
+    
+                // update the search criteria
+                data.setFilterArgs({
+                    searchString: getFilterText(),
+                    property: $('#summary-filter-type').combo('getSelectedOption').value
+                });
+                data.refresh();
+            }
+        };
+    
+        /**
+         * Loads  the cluster processor details dialog for the specified processor.
+         *
+         * @argument {string} groupId         The group id
+         * @argument {string} processorId     The processor id
+         */
+        var loadClusterProcessorSummary = function (groupId, processorId) {
+            // get the summary
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/flow/processors/' + encodeURIComponent(processorId) + '/status',
+                data: {
+                    nodewise: true
+                },
+                dataType: 'json'
+            }).done(function (response) {
+              if (nfCommon.isDefinedAndNotNull(response.processorStatus)) {
+                    var processorStatus = response.processorStatus;
+    
+                    var clusterProcessorsGrid = $('#cluster-processor-summary-table').data('gridInstance');
+                    var clusterProcessorsData = clusterProcessorsGrid.getData();
+    
+                    var clusterProcessors = [];
+    
+                    // populate the table
+                    $.each(processorStatus.nodeSnapshots, function (i, nodeSnapshot) {
+                        var snapshot = nodeSnapshot.statusSnapshot;
+                        clusterProcessors.push({
+                            id: nodeSnapshot.nodeId,
+                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                            runStatus: snapshot.runStatus,
+                            activeThreadCount: snapshot.activeThreadCount,
+                            input: snapshot.input,
+                            read: snapshot.read,
+                            written: snapshot.written,
+                            output: snapshot.output,
+                            tasks: snapshot.tasks,
+                            tasksDuration: snapshot.tasksDuration
+                        });
+                    });
+    
+                    // update the processors
+                    clusterProcessorsData.setItems(clusterProcessors);
+                    clusterProcessorsData.reSort();
+                    clusterProcessorsGrid.invalidate();
+    
+                    // populate the processor details
+                    $('#cluster-processor-name').text(processorStatus.name).ellipsis();
+                  $('#cluster-processor-type').text(processorStatus.aggregateSnapshot.type).ellipsis();
+                    $('#cluster-processor-id').text(processorStatus.id);
+                    $('#cluster-processor-group-id').text(processorStatus.groupId);
+    
+                    // update the stats last refreshed timestamp
+                    $('#cluster-processor-summary-last-refreshed').text(processorStatus.statsLastRefreshed);
+                }
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Loads the cluster connection details dialog for the specified processor.
+         *
+         * @argument {string} groupId   The group id
+         * @argument {string} connectionId     The connection id
+         */
+        var loadClusterConnectionSummary = function (groupId, connectionId) {
+            // get the summary
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/flow/connections/' + encodeURIComponent(connectionId) + '/status',
+                data: {
+                    nodewise: true
+                },
+                dataType: 'json'
+            }).done(function (response) {
+              if (nfCommon.isDefinedAndNotNull(response.connectionStatus)) {
+                    var connectionStatus = response.connectionStatus;
+    
+                    var clusterConnectionsGrid = $('#cluster-connection-summary-table').data('gridInstance');
+                    var clusterConnectionsData = clusterConnectionsGrid.getData();
+    
+                    var clusterConnections = [];
+    
+                    // populate the table
+                    $.each(connectionStatus.nodeSnapshots, function (i, nodeSnapshot) {
+                        var snapshot = nodeSnapshot.statusSnapshot;
+                        clusterConnections.push({
+                            id: nodeSnapshot.nodeId,
+                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                            input: snapshot.input,
+                            queued: snapshot.queued,
+                            queuedCount: snapshot.queuedCount,
+                            queuedSize: snapshot.queuedSize,
+                          percentUseCount: snapshot.percentUseCount,
+                          percentUseBytes: snapshot.percentUseBytes,
+                            output: snapshot.output
+                        });
+                    });
+    
+                    // update the processors
+                    clusterConnectionsData.setItems(clusterConnections);
+                    clusterConnectionsData.reSort();
+                    clusterConnectionsGrid.invalidate();
+    
+                    // populate the processor details
+                    $('#cluster-connection-name').text(connectionStatus.name).ellipsis();
+                  $('#cluster-connection-type').text('Connection').ellipsis();
+                    $('#cluster-connection-id').text(connectionStatus.id);
+                    $('#cluster-connection-group-id').text(connectionStatus.groupId);
+    
+                    // update the stats last refreshed timestamp
+                    $('#cluster-connection-summary-last-refreshed').text(connectionStatus.statsLastRefreshed);
+                }
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Loads the cluster input port details dialog for the specified processor.
+         *
+         * @argument {string} processGroupId     The process group id
+         */
+        var loadClusterProcessGroupSummary = function (processGroupId) {
+            // get the summary
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupId) + '/status',
+                data: {
+                    nodewise: true,
+                    recursive: false
+                },
+                dataType: 'json'
+            }).done(function (response) {
+              if (nfCommon.isDefinedAndNotNull(response.processGroupStatus)) {
+                    var processGroupStatus = response.processGroupStatus;
+    
+                    var clusterProcessGroupsGrid = $('#cluster-process-group-summary-table').data('gridInstance');
+                    var clusterProcessGroupsData = clusterProcessGroupsGrid.getData();
+    
+                    var clusterProcessGroups = [];
+    
+                    // populate the table
+                    $.each(processGroupStatus.nodeSnapshots, function (i, nodeSnapshot) {
+                        var snapshot = nodeSnapshot.statusSnapshot;
+                        clusterProcessGroups.push({
+                            id: nodeSnapshot.nodeId,
+                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                            activeThreadCount: snapshot.activeThreadCount,
+                            transferred: snapshot.transferred,
+                            input: snapshot.input,
+                            queued: snapshot.queued,
+                            queuedCount: snapshot.queuedCount,
+                            queuedSize: snapshot.queuedSize,
+                            output: snapshot.output,
+                            read: snapshot.read,
+                            written: snapshot.written,
+                            sent: snapshot.sent,
+                            received: snapshot.received
+                        });
+                    });
+    
+                    // update the input ports
+                    clusterProcessGroupsData.setItems(clusterProcessGroups);
+                    clusterProcessGroupsData.reSort();
+                    clusterProcessGroupsGrid.invalidate();
+    
+                    // populate the input port details
+                    $('#cluster-process-group-name').text(processGroupStatus.name).ellipsis();
+                  $('#cluster-process-group-type').text('Process Group').ellipsis();
+                    $('#cluster-process-group-id').text(processGroupStatus.id);
+    
+                    // update the stats last refreshed timestamp
+                    $('#cluster-process-group-summary-last-refreshed').text(processGroupStatus.statsLastRefreshed);
+                }
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Loads the cluster input port details dialog for the specified processor.
+         *
+         * @argument {string} groupId         The group id
+         * @argument {string} inputPortId     The input port id
+         */
+        var loadClusterInputPortSummary = function (groupId, inputPortId) {
+            // get the summary
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/flow/input-ports/' + encodeURIComponent(inputPortId) + '/status',
+                data: {
+                    nodewise: true
+                },
+                dataType: 'json'
+            }).done(function (response) {
+              if (nfCommon.isDefinedAndNotNull(response.portStatus)) {
+                    var inputPortStatus = response.portStatus;
+    
+                    var clusterInputPortsGrid = $('#cluster-input-port-summary-table').data('gridInstance');
+                    var clusterInputPortsData = clusterInputPortsGrid.getData();
+    
+                    var clusterInputPorts = [];
+    
+                    // populate the table
+                    $.each(inputPortStatus.nodeSnapshots, function (i, nodeSnapshot) {
+                        var snapshot = nodeSnapshot.statusSnapshot;
+                        clusterInputPorts.push({
+                            id: nodeSnapshot.nodeId,
+                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                            runStatus: snapshot.runStatus,
+                            activeThreadCount: snapshot.activeThreadCount,
+                            output: snapshot.output
+                        });
+                    });
+    
+                    // update the input ports
+                    clusterInputPortsData.setItems(clusterInputPorts);
+                    clusterInputPortsData.reSort();
+                    clusterInputPortsGrid.invalidate();
+    
+                    // populate the input port details
+                    $('#cluster-input-port-name').text(inputPortStatus.name).ellipsis();
+                  $('#cluster-input-port-type').text('Input Port').ellipsis();
+                    $('#cluster-input-port-id').text(inputPortStatus.id);
+                    $('#cluster-input-port-group-id').text(inputPortStatus.groupId);
+    
+                    // update the stats last refreshed timestamp
+                    $('#cluster-input-port-summary-last-refreshed').text(inputPortStatus.statsLastRefreshed);
+                }
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Loads the cluster output port details dialog for the specified processor.
+         *
+         * @argument {string} groupId          The group id
+         * @argument {string} outputPortId     The row id
+         */
+        var loadClusterOutputPortSummary = function (groupId, outputPortId) {
+            // get the summary
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/flow/output-ports/' + encodeURIComponent(outputPortId) + '/status',
+                data: {
+                    nodewise: true
+                },
+                dataType: 'json'
+            }).done(function (response) {
+              if (nfCommon.isDefinedAndNotNull(response.portStatus)) {
+                    var outputPortStatus = response.portStatus;
+    
+                    var clusterOutputPortsGrid = $('#cluster-output-port-summary-table').data('gridInstance');
+                    var clusterOutputPortsData = clusterOutputPortsGrid.getData();
+    
+                    var clusterOutputPorts = [];
+    
+                    // populate the table
+                    $.each(outputPortStatus.nodeSnapshots, function (i, nodeSnapshot) {
+                        var snapshot = nodeSnapshot.statusSnapshot;
+                        clusterOutputPorts.push({
+                            id: nodeSnapshot.nodeId,
+                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                            runStatus: snapshot.runStatus,
+                            activeThreadCount: snapshot.activeThreadCount,
+                            input: snapshot.input
+                        });
+                    });
+    
+                    // update the output ports
+                    clusterOutputPortsData.setItems(clusterOutputPorts);
+                    clusterOutputPortsData.reSort();
+                    clusterOutputPortsGrid.invalidate();
+    
+                    // populate the output port details
+                    $('#cluster-output-port-name').text(outputPortStatus.name).ellipsis();
+                  $('#cluster-output-port-type').text('Output Port').ellipsis();
+                    $('#cluster-output-port-id').text(outputPortStatus.id);
+                    $('#cluster-output-port-group-id').text(outputPortStatus.groupId);
+    
+                    // update the stats last refreshed timestamp
+                    $('#cluster-output-port-summary-last-refreshed').text(outputPortStatus.statsLastRefreshed);
+                }
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Loads the cluster remote process group details dialog for the specified processor.
+         *
+         * @argument {string} groupId   The group id
+         * @argument {string} remoteProcessGroupId     The remote process group id
+         */
+        var loadClusterRemoteProcessGroupSummary = function (groupId, remoteProcessGroupId) {
+            // get the summary
+            $.ajax({
+                type: 'GET',
+                url: config.urls.api + '/flow/remote-process-groups/' + encodeURIComponent(remoteProcessGroupId) + '/status',
+                data: {
+                    nodewise: true
+                },
+                dataType: 'json'
+            }).done(function (response) {
+              if (nfCommon.isDefinedAndNotNull(response.remoteProcessGroupStatus)) {
+                    var remoteProcessGroupStatus = response.remoteProcessGroupStatus;
+    
+                    var clusterRemoteProcessGroupsGrid = $('#cluster-remote-process-group-summary-table').data('gridInstance');
+                    var clusterRemoteProcessGroupsData = clusterRemoteProcessGroupsGrid.getData();
+    
+                    var clusterRemoteProcessGroups = [];
+    
+                    // populate the table
+                    $.each(remoteProcessGroupStatus.nodeSnapshots, function (i, nodeSnapshot) {
+                        var snapshot = nodeSnapshot.statusSnapshot;
+                        clusterRemoteProcessGroups.push({
+                            id: nodeSnapshot.nodeId,
+                            node: nodeSnapshot.address + ':' + nodeSnapshot.apiPort,
+                            targetUri: snapshot.targetUri,
+                            transmissionStatus: snapshot.transmissionStatus,
+                            sent: snapshot.sent,
+                            received: snapshot.received,
+                            activeThreadCount: snapshot.activeThreadCount
+                        });
+                    });
+    
+                    // update the remote process groups
+                    clusterRemoteProcessGroupsData.setItems(clusterRemoteProcessGroups);
+                    clusterRemoteProcessGroupsData.reSort();
+                    clusterRemoteProcessGroupsGrid.invalidate();
+    
+                    // populate the remote process group details
+                    $('#cluster-remote-process-group-name').text(remoteProcessGroupStatus.name).ellipsis();
+                  $('#cluster-remote-process-group-type').text('Remote Process Group').ellipsis();
+                    $('#cluster-remote-process-group-id').text(remoteProcessGroupStatus.id);
+                    $('#cluster-remote-process-group-group-id').text(remoteProcessGroupStatus.groupId);
+    
+                    // update the stats last refreshed timestamp
+                    $('#cluster-remote-process-group-summary-last-refreshed').text(remoteProcessGroupStatus.statsLastRefreshed);
+                }
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        var clusterNodeId = null;
+    
+        return {
+    
+            /**
+             * Initializes the status table.
+             *
+             * @argument {boolean} isClustered Whether or not this NiFi is clustered.
+             */
+            init: function (isClustered) {
+                return $.Deferred(function (deferred) {
+                    // get the controller config to get the server offset
+                    var configRequest = $.ajax({
+                        type: 'GET',
+                        url: config.urls.flowConfig,
+                        dataType: 'json'
+                    }).done(function (configResponse) {
+                        var configDetails = configResponse.flowConfiguration;
+    
+                        // initialize the chart
+                      nfStatusHistory.init(configDetails.timeOffset);
+    
+                        // initialize the processor/connection details dialog
+                      nfProcessorDetails.init(false);
+                      nfConnectionDetails.init();
+                        initSummaryTable(isClustered);
+    
+                        deferred.resolve();
+                    }).fail(function () {
+                        deferred.reject();
+                    });
+                }).promise();
+            },
+    
+            /**
+             * Sets the cluster node id which will only show status from this node on subsequent reloads.
+             *
+             * @param nodeId
+             */
+            setClusterNodeId: function (nodeId) {
+                clusterNodeId = nodeId;
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+                var processorsTable = $('#processor-summary-table');
+                if (processorsTable.is(':visible')) {
+                    var processorsGrid = processorsTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(processorsGrid)) {
+                        processorsGrid.resizeCanvas();
+                    }
+                }
+    
+                var connectionsTable = $('#connection-summary-table');
+                if (connectionsTable.is(':visible')) {
+                    var connectionsGrid = connectionsTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(connectionsGrid)) {
+                        connectionsGrid.resizeCanvas();
+                    }
+                }
+    
+                var processGroupsTable = $('#process-group-summary-table');
+                if (processGroupsTable.is(':visible')) {
+                    var processGroupsGrid = processGroupsTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(processGroupsGrid)) {
+                        processGroupsGrid.resizeCanvas();
+                    }
+                }
+    
+                var inputPortsTable = $('#input-port-summary-table');
+                if (inputPortsTable.is(':visible')) {
+                    var inputPortGrid = inputPortsTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(inputPortGrid)) {
+                        inputPortGrid.resizeCanvas();
+                    }
+                }
+    
+                var outputPortsTable = $('#output-port-summary-table');
+                if (outputPortsTable.is(':visible')) {
+                    var outputPortGrid = outputPortsTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(outputPortGrid)) {
+                        outputPortGrid.resizeCanvas();
+                    }
+                }
+    
+                var remoteProcessGroupsTable = $('#remote-process-group-summary-table');
+                if (remoteProcessGroupsTable.is(':visible')) {
+                    var remoteProcessGroupGrid = remoteProcessGroupsTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(remoteProcessGroupGrid)) {
+                        remoteProcessGroupGrid.resizeCanvas();
+                    }
+                }
+            },
+    
+            /**
+             * Load the summary table.
+             */
+            loadSummaryTable: function () {
+                var statusUri = config.urls.status;
+    
+                // add the parameter if appropriate
+                var parameters = {};
+              if (!nfCommon.isNull(clusterNodeId)) {
+                    parameters['clusterNodeId'] = clusterNodeId;
+                }
+    
+                // update the status uri if appropriate
+                if (!$.isEmptyObject(parameters)) {
+                    statusUri += '?' + $.param(parameters);
+                }
+    
+                return $.ajax({
+                    type: 'GET',
+                    url: statusUri,
+                    data: {
+                        recursive: true
+                    },
+                    dataType: 'json'
+                }).done(function (response) {
+                    var processGroupStatus = response.processGroupStatus;
+                    var aggregateSnapshot = processGroupStatus.aggregateSnapshot;
+    
+                  if (nfCommon.isDefinedAndNotNull(aggregateSnapshot)) {
+                        // remove any tooltips from the processor table
+                        var processorsGridElement = $('#processor-summary-table');
+                      nfCommon.cleanUpTooltips(processorsGridElement, 'div.has-bulletins');
+    
+                        // get the processor grid/data
+                        var processorsGrid = processorsGridElement.data('gridInstance');
+                        var processorsData = processorsGrid.getData();
+    
+                        // get the connections grid/data (do not render bulletins)
+                        var connectionsGrid = $('#connection-summary-table').data('gridInstance');
+                        var connectionsData = connectionsGrid.getData();
+    
+                        // remove any tooltips from the process group table
+                        var processGroupGridElement = $('#process-group-summary-table');
+                      nfCommon.cleanUpTooltips(processGroupGridElement, 'div.has-bulletins');
+    
+                        // get the process group grid/data
+                        var processGroupGrid = processGroupGridElement.data('gridInstance');
+                        var processGroupData = processGroupGrid.getData();
+    
+                        // remove any tooltips from the input port table
+                        var inputPortsGridElement = $('#input-port-summary-table');
+                      nfCommon.cleanUpTooltips(inputPortsGridElement, 'div.has-bulletins');
+    
+                        // get the input ports grid/data
+                        var inputPortsGrid = inputPortsGridElement.data('gridInstance');
+                        var inputPortsData = inputPortsGrid.getData();
+    
+                        // remove any tooltips from the output port table
+                        var outputPortsGridElement = $('#output-port-summary-table');
+                      nfCommon.cleanUpTooltips(outputPortsGridElement, 'div.has-bulletins');
+    
+                        // get the output ports grid/data
+                        var outputPortsGrid = outputPortsGridElement.data('gridInstance');
+                        var outputPortsData = outputPortsGrid.getData();
+    
+                        // remove any tooltips from the remote process group table
+                        var remoteProcessGroupsGridElement = $('#remote-process-group-summary-table');
+                      nfCommon.cleanUpTooltips(remoteProcessGroupsGridElement, 'div.has-bulletins');
+    
+                        // get the remote process groups grid
+                        var remoteProcessGroupsGrid = remoteProcessGroupsGridElement.data('gridInstance');
+                        var remoteProcessGroupsData = remoteProcessGroupsGrid.getData();
+    
+                        var processorItems = [];
+                        var connectionItems = [];
+                        var processGroupItems = [];
+                        var inputPortItems = [];
+                        var outputPortItems = [];
+                        var remoteProcessGroupItems = [];
+    
+                        // populate the tables
+                        populateProcessGroupStatus(processorItems, connectionItems, processGroupItems, inputPortItems, outputPortItems, remoteProcessGroupItems, aggregateSnapshot);
+    
+                        // update the processors
+                        processorsData.setItems(processorItems);
+                        processorsData.reSort();
+                        processorsGrid.invalidate();
+    
+                        // update the connections
+                        connectionsData.setItems(connectionItems);
+                        connectionsData.reSort();
+                        connectionsGrid.invalidate();
+    
+                        // update the process groups
+                        processGroupData.setItems(processGroupItems);
+                        processGroupData.reSort();
+                        processGroupGrid.invalidate();
+    
+                        // update the input ports
+                        inputPortsData.setItems(inputPortItems);
+                        inputPortsData.reSort();
+                        inputPortsGrid.invalidate();
+    
+                        // update the output ports
+                        outputPortsData.setItems(outputPortItems);
+                        outputPortsData.reSort();
+                        outputPortsGrid.invalidate();
+    
+                        // update the remote process groups
+                        remoteProcessGroupsData.setItems(remoteProcessGroupItems);
+                        remoteProcessGroupsData.reSort();
+                        remoteProcessGroupsGrid.invalidate();
+    
+                        // update the stats last refreshed timestamp
+                        $('#summary-last-refreshed').text(processGroupStatus.statsLastRefreshed);
+    
+                        // update the total number of processors
+                        if ($('#processor-summary-table').is(':visible')) {
+                          $('#total-items').text(nfCommon.formatInteger(processorItems.length));
+                        } else if ($('#connection-summary-table').is(':visible')) {
+                          $('#total-items').text(nfCommon.formatInteger(connectionItems.length));
+                        } else if ($('#input-port-summary-table').is(':visible')) {
+                          $('#total-items').text(nfCommon.formatInteger(inputPortItems.length));
+                        } else if ($('#output-port-summary-table').is(':visible')) {
+                          $('#total-items').text(nfCommon.formatInteger(outputPortItems.length));
+                      } else if ($('#process-group-summary-table').is(':visible')) {
+                          $('#total-items').text(nfCommon.formatInteger(processGroupItems.length));
+                        } else {
+                          $('#total-items').text(nfCommon.formatInteger(remoteProcessGroupItems.length));
+                        }
+                    } else {
+                        $('#total-items').text('0');
+                    }
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+  }));
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
new file mode 100644
index 000000000000..1726f2127f97
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js
@@ -0,0 +1,305 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'angular',
+                'nf.Common',
+                'nf.ClusterSummary',
+                'nf.ClusterSearch',
+                'nf.ng.AppConfig',
+                'nf.ng.AppCtrl',
+                'nf.ng.ServiceProvider',
+                'nf.ng.Bridge',
+                'nf.ErrorHandler',
+                'nf.Storage',
+                'nf.SummaryTable'],
+            function ($,
+                      angular,
+                      nfCommon,
+                      nfClusterSummary,
+                      nfClusterSearch,
+                      appConfig,
+                      appCtrl,
+                      serviceProvider,
+                      provenanceTable,
+                      nfNgBridge,
+                      nfErrorHandler,
+                      nfStorage,
+                      nfSummaryTable) {
+                return (nf.Summary =
+                    factory($,
+                        angular,
+                        nfCommon,
+                        nfClusterSummary,
+                        nfClusterSearch,
+                        appConfig,
+                        appCtrl,
+                        serviceProvider,
+                        nfNgBridge,
+                        nfErrorHandler,
+                        nfStorage,
+                        nfSummaryTable));
+            });
+    } 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, nfCommon, nfClusterSummary, nfClusterSearch, appConfig, appCtrl, serviceProvider, nfNgBridge, nfErrorHandler, nfStorage, nfSummaryTable) {
+    'use strict';
+
+    $(document).ready(function () {
+        //Create Angular App
+        var app = angular.module('ngSummaryApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
+
+        //Define Dependency Injection Annotations
+        appConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
+        appCtrl.$inject = ['$scope', 'serviceProvider'];
+        serviceProvider.$inject = [];
+
+        //Configure Angular App
+        app.config(appConfig);
+
+        //Define Angular App Controllers
+        app.controller('ngSummaryAppCtrl', appCtrl);
+
+        //Define Angular App Services
+        app.service('serviceProvider', serviceProvider);
+
+        //Manually Boostrap Angular App
+        nfNgBridge.injector = angular.bootstrap($('body'), ['ngSummaryApp'], {strictDi: true});
+
+        // initialize the summary page
+        nfClusterSummary.loadClusterSummary().done(function () {
+            nfSummary.init();
+        });
+    });
+
+    /**
+     * Configuration object used to hold a number of configuration items.
+     */
+    var config = {
+        urls: {
+            banners: '../nifi-api/flow/banners',
+            about: '../nifi-api/flow/about',
+            clusterSummary: '../nifi-api/flow/cluster/summary'
+        }
+    };
+
+    /**
+     * Initializes the summary table. Must first determine if we are running clustered.
+     */
+    var initializeSummaryTable = function () {
+        return $.Deferred(function (deferred) {
+            $.ajax({
+                type: 'GET',
+                url: config.urls.clusterSummary
+            }).done(function (response) {
+                nfSummaryTable.init(response.clusterSummary.connectedToCluster).done(function () {
+                    // initialize the search field if applicable
+                    if (response.clusterSummary.connectedToCluster) {
+                        nfClusterSearch.init();
+                    }
+                    deferred.resolve();
+                }).fail(function () {
+                    deferred.reject();
+                });
+            }).fail(nfErrorHandler.handleAjaxError);
+        }).promise();
+    };
+
+    /**
+     * Initializes the summary page.
+     */
+    var initializeSummaryPage = function () {
+        // define mouse over event for the refresh buttons
+        $('#refresh-button').click(function () {
+            nfClusterSummary.loadClusterSummary().done(function () {
+                nfSummaryTable.loadSummaryTable();
+            });
+        });
+
+        // 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 (nfCommon.isDefinedAndNotNull(response.banners)) {
+                        if (nfCommon.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('summary');
+                        }
+
+                        if (nfCommon.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('summary');
+                        }
+                    }
+
+                    deferred.resolve();
+                }).fail(function (xhr, status, error) {
+                    nfErrorHandler.handleAjaxError(xhr, status, error);
+                    deferred.reject();
+                });
+            } else {
+                deferred.resolve();
+            }
+        }).promise();
+    };
+
+    var nfSummary = {
+        /**
+         * Initializes the status page.
+         */
+        init: function () {
+            nfStorage.init();
+
+            // intialize the summary table
+            initializeSummaryTable().done(function () {
+                // load the table
+                nfSummaryTable.loadSummaryTable().done(function () {
+                    // once the table is initialized, finish initializing the page
+                    initializeSummaryPage().done(function () {
+
+                        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'
+                                });
+
+                                $('#summary').css('margin', 40);
+                                $('div.summary-table').css('bottom', 127);
+                                $('#flow-summary-refresh-container').css({
+                                    "position": "absolute",
+                                    "bottom": "0px",
+                                    "margin": "40px"
+                                });
+                            }
+
+                            nfSummaryTable.resetTableSize();
+                        };
+
+                        // get the about details
+                        $.ajax({
+                            type: 'GET',
+                            url: config.urls.about,
+                            dataType: 'json'
+                        }).done(function (response) {
+                            var aboutDetails = response.about;
+                            var statusTitle = aboutDetails.title + ' Summary';
+
+                            // set the document title and the about title
+                            document.title = statusTitle;
+                            $('#status-header-text').text(statusTitle);
+
+                            // set the initial size
+                            setBodySize();
+                        }).fail(nfErrorHandler.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) {
+                                        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) {
+                                nfCommon.toggleScrollable(tabsContent.get(0));
+                            });
+                        });
+                    });
+                });
+            });
+        }
+    };
+
+    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
new file mode 100644
index 000000000000..0f930cd17b33
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js
@@ -0,0 +1,465 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Common',
+                  'nf.Dialog',
+                  'nf.ErrorHandler'],
+              function ($, Slick, nfCommon, nfDialog, nfErrorHandler) {
+                  return (nf.TemplatesTable = factory($, Slick, nfCommon, nfDialog, nfErrorHandler));
+              });
+      } 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, nfCommon, nfDialog, nfErrorHandler) {
+      'use strict';
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                templates: '../nifi-api/flow/templates',
+                downloadToken: '../nifi-api/access/download-token'
+            }
+        };
+    
+        /**
+         * 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 (sortDetails.columnId === 'timestamp') {
+                      var aDate = nfCommon.parseDateTime(a.template[sortDetails.columnId]);
+                      var bDate = nfCommon.parseDateTime(b.template[sortDetails.columnId]);
+                        return aDate.getTime() - bDate.getTime();
+                    } else {
+                      var aString = nfCommon.isDefinedAndNotNull(a.template[sortDetails.columnId]) ? a.template[sortDetails.columnId] : '';
+                      var bString = nfCommon.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) {
+                        return 0;
+                    }
+                    if (a.permissions.canRead) {
+                        return 1;
+                    } else {
+                        return -1;
+                    }
+                }
+            };
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+        };
+    
+        /**
+         * Prompts the user before attempting to delete the specified template.
+         *
+         * @argument {object} templateEntity     The template
+         */
+        var promptToDeleteTemplate = function (templateEntity) {
+            // prompt for deletion
+          nfDialog.showYesNoDialog({
+              headerText: nf._.msg('nf-templates-table.DeleteTemplate'),
+              dialogContent: nf._.msg('nf-templates-table.Message1') + nfCommon.escapeHtml(templateEntity.template.name) + '\'?',
+                yesHandler: function () {
+                    deleteTemplate(templateEntity);
+                }
+            });
+        };
+    
+        /**
+         * 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 (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.PolicyManagement) && nfCommon.isDefinedAndNotNull(parent.nf.Shell)) {
+                    parent.nf.PolicyManagement.showTemplatePolicy(templateEntity);
+                    parent.$('#shell-close-button').click();
+                }
+            }
+        };
+    
+        /**
+         * Deletes the template with the specified id.
+         *
+         * @argument {string} templateEntity     The template
+         */
+        var deleteTemplate = function (templateEntity) {
+            $.ajax({
+                type: 'DELETE',
+                url: templateEntity.template.uri,
+                dataType: 'json'
+            }).done(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(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * 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 $('#templates-filter').val();
+        };
+    
+        /**
+         * Applies the filter found in the filter expression text field.
+         */
+        var applyFilter = function () {
+            // get the dataview
+            var templatesGrid = $('#templates-table').data('gridInstance');
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(templatesGrid)) {
+                var templatesData = templatesGrid.getData();
+    
+                // update the search criteria
+                templatesData.setFilterArgs({
+                    searchString: getFilterText(),
+                    property: $('#templates-filter-type').combo('getSelectedOption').value
+                });
+                templatesData.refresh();
+            }
+        };
+    
+        /**
+         * Performs the filtering.
+         *
+         * @param {object} item     The item subject to filtering
+         * @param {object} args     Filter arguments
+         * @returns {Boolean}       Whether or not to include the item
+         */
+        var filter = function (item, args) {
+            if (args.searchString === '') {
+                return true;
+            }
+    
+            try {
+                // perform the row filtering
+                var filterExp = new RegExp(args.searchString, 'i');
+            } catch (e) {
+                // invalid regex
+                return false;
+            }
+    
+            // perform the filter
+            return item.template[args.property].search(filterExp) >= 0;
+        };
+    
+        /**
+         * Downloads the specified template.
+         *
+         * @param {object} templateEntity     The template
+         */
+        var downloadTemplate = function (templateEntity) {
+          nfCommon.getAccessToken(config.urls.downloadToken).done(function (downloadToken) {
+                var parameters = {};
+    
+                // conditionally include the download token
+              if (!nfCommon.isBlank(downloadToken)) {
+                    parameters['access_token'] = downloadToken;
+                }
+    
+                // open the url
+                if ($.isEmptyObject(parameters)) {
+                    window.open(templateEntity.template.uri + '/download');
+                } else {
+                    window.open(templateEntity.template.uri + '/download' + '?' + $.param(parameters));
+                }
+            }).fail(function () {
+              nfDialog.showOkDialog({
+                  headerText: nf._.msg('nf-templates-table.DownloadTemplate'),
+                  dialogContent: nf._.msg('nf-templates-table.Message2')
+                });
+            });
+        };
+    
+        return {
+            /**
+             * Initializes the templates list.
+             */
+            init: function () {
+                // define the function for filtering the list
+                $('#templates-filter').keyup(function () {
+                    applyFilter();
+                });
+    
+                // filter type
+                $('#templates-filter-type').combo({
+                    options: [{
+                      text: nf._.msg('nf-templates-table.ByName'),
+                        value: 'name'
+                    }, {
+                      text: nf._.msg('nf-templates-table.ByDescription'),
+                        value: 'description'
+                    }],
+                    select: function (option) {
+                        applyFilter();
+                    }
+                });
+    
+                var timestampFormatter = function (row, cell, value, columnDef, dataContext) {
+                    if (!dataContext.permissions.canRead) {
+                        return '';
+                    }
+    
+                    return dataContext.template.timestamp;
+                };
+    
+                var nameFormatter = function (row, cell, value, columnDef, dataContext) {
+                    if (!dataContext.permissions.canRead) {
+                        return '<span class="blank">' + dataContext.id + '</span>';
+                    }
+    
+                    return dataContext.template.name;
+                };
+    
+                var descriptionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    if (!dataContext.permissions.canRead) {
+                        return '';
+                    }
+    
+                  return nfCommon.formatValue(dataContext.template.description);
+                };
+    
+                var groupIdFormatter = function (row, cell, value, columnDef, dataContext) {
+                    if (!dataContext.permissions.canRead) {
+                        return '';
+                    }
+    
+                    return dataContext.template.groupId;
+                };
+    
+                // function for formatting the actions column
+                var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+                    var markup = '';
+    
+                    if (dataContext.permissions.canRead === true) {
+                      markup += '<div title="'+nf._.msg('nf-summary-table.Download')+'" class="pointer export-template icon icon-template-save" style="margin-top: 2px; margin-right: 3px;"></div>';
+                    }
+    
+                    // all DFMs to remove templates
+                    if (dataContext.permissions.canWrite === true) {
+                      markup += '<div title="'+nf._.msg('nf-summary-table.RemovieTemplate')+'" class="pointer prompt-to-delete-template fa fa-trash" style="margin-top: 2px; margin-right: 3px;"></div>';
+                    }
+    
+                  // allow policy configuration conditionally if embedded in
+                  if (top !== window && nfCommon.canAccessTenants()) {
+                      if (nfCommon.isDefinedAndNotNull(parent.nf) && nfCommon.isDefinedAndNotNull(parent.nf.CanvasUtils) && parent.nf.CanvasUtils.isConfigurableAuthorizer()) {
+                          markup += '<div title="'+nf._.msg('nf-summary-table.AccessPolicies')+'" class="pointer edit-access-policies fa fa-key" style="margin-top: 2px;"></div>';
+                        }
+                    }
+    
+                    return markup;
+                };
+    
+                // initialize the templates table
+                var templatesColumns = [
+                  {
+                      id: 'timestamp',
+                      name: nf._.msg('nf-templates-table.DateTime'),
+                      sortable: true,
+                      defaultSortAsc: false,
+                      resizable: false,
+                      formatter: timestampFormatter,
+                      width: 225,
+                      maxWidth: 225
+                  },
+                  {
+                      id: 'name',
+                      name: nf._.msg('nf-templates-table.Name'),
+                      sortable: true,
+                      resizable: true,
+                      formatter: nameFormatter
+                  },
+                  {
+                      id: 'description',
+                      name: nf._.msg('nf-templates-table.Description'),
+                      sortable: true,
+                      resizable: true,
+                      formatter: descriptionFormatter
+                  },
+                  {
+                      id: 'groupId',
+                      name: nf._.msg('nf-templates-table.GroupId'),
+                      sortable: true,
+                      resizable: true,
+                      formatter: groupIdFormatter
+                  },
+                  {
+                      id: 'actions',
+                      name: '&nbsp;',
+                      sortable: false,
+                      resizable: false,
+                      formatter: actionFormatter,
+                      width: 100,
+                      maxWidth: 100
+                  }
+                ];
+    
+                var templatesOptions = {
+                    forceFitColumns: true,
+                    enableTextSelectionOnCells: true,
+                    enableCellNavigation: false,
+                    enableColumnReorder: false,
+                    autoEdit: false,
+                    rowHeight: 24
+                };
+    
+                // initialize the dataview
+                var templatesData = new Slick.Data.DataView({
+                    inlineFilters: false
+                });
+                templatesData.setItems([]);
+                templatesData.setFilterArgs({
+                    searchString: getFilterText(),
+                    property: $('#templates-filter-type').combo('getSelectedOption').value
+                });
+                templatesData.setFilter(filter);
+    
+                // initialize the sort
+                sort({
+                    columnId: 'timestamp',
+                    sortAsc: false
+                }, templatesData);
+    
+                // initialize the grid
+                var templatesGrid = new Slick.Grid('#templates-table', templatesData, templatesColumns, templatesOptions);
+                templatesGrid.setSelectionModel(new Slick.RowSelectionModel());
+                templatesGrid.registerPlugin(new Slick.AutoTooltips());
+                templatesGrid.setSortColumn('timestamp', false);
+                templatesGrid.onSort.subscribe(function (e, args) {
+                    sort({
+                        columnId: args.sortCol.id,
+                        sortAsc: args.sortAsc
+                    }, templatesData);
+                });
+    
+                // configure a click listener
+                templatesGrid.onClick.subscribe(function (e, args) {
+                    var target = $(e.target);
+    
+                    // get the node at this row
+                    var item = templatesData.getItem(args.row);
+    
+                    // determine the desired action
+                    if (templatesGrid.getColumns()[args.cell].id === 'actions') {
+                        if (target.hasClass('export-template')) {
+                            downloadTemplate(item);
+                        } else if (target.hasClass('prompt-to-delete-template')) {
+                            promptToDeleteTemplate(item);
+                        } else if (target.hasClass('edit-access-policies')) {
+                            openAccessPolicies(item);
+                        }
+                    }
+                });
+    
+                // wire up the dataview to the grid
+                templatesData.onRowCountChanged.subscribe(function (e, args) {
+                    templatesGrid.updateRowCount();
+                    templatesGrid.render();
+    
+                    // update the total number of displayed processors
+                    $('#displayed-templates').text(args.current);
+                });
+                templatesData.onRowsChanged.subscribe(function (e, args) {
+                    templatesGrid.invalidateRows(args.rows);
+                    templatesGrid.render();
+                });
+    
+                // hold onto an instance of the grid
+                $('#templates-table').data('gridInstance', templatesGrid);
+    
+                // 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 (nfCommon.isDefinedAndNotNull(templateGrid)) {
+                    templateGrid.resizeCanvas();
+                }
+            },
+    
+            /**
+             * Load the processor templates table.
+             */
+            loadTemplatesTable: function () {
+                return $.ajax({
+                    type: 'GET',
+                    url: config.urls.templates,
+                    dataType: 'json'
+                }).done(function (response) {
+                    // ensure there are groups specified
+                  if (nfCommon.isDefinedAndNotNull(response.templates)) {
+                        var templatesGrid = $('#templates-table').data('gridInstance');
+                        var templatesData = templatesGrid.getData();
+    
+                        // set the items
+                        templatesData.setItems(response.templates);
+                        templatesData.reSort();
+                        templatesGrid.invalidate();
+    
+                        // update the stats last refreshed timestamp
+                        $('#templates-last-refreshed').text(response.generated);
+    
+                        // update the total number of processors
+                        $('#total-templates').text(response.templates.length);
+                    } else {
+                        $('#total-templates').text('0');
+                    }
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+  }));
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
new file mode 100644
index 000000000000..59f9a7d42678
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js
@@ -0,0 +1,226 @@
+/*
+ * 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 top, define, module, require, exports */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery',
+                'nf.Common',
+                'nf.TemplatesTable',
+                'nf.ErrorHandler',
+                'nf.Storage'],
+            function ($, nfCommon, nfTemplatesTable, nfErrorHandler, nfStorage) {
+                return (nf.Templates = factory($, nfCommon, nfTemplatesTable, nfErrorHandler, nfStorage));
+            });
+    } 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 ($, nfCommon, nfTemplatesTable, nfErrorHandler, nfStorage) {
+    'use strict';
+
+    $(document).ready(function () {
+        // initialize the templates page
+        nfTemplates.init();
+    });
+
+    /**
+     * Configuration object used to hold a number of configuration items.
+     */
+    var config = {
+        urls: {
+            banners: '../nifi-api/flow/banners',
+            about: '../nifi-api/flow/about',
+            currentUser: '../nifi-api/flow/current-user'
+        }
+    };
+
+    /**
+     * Loads the current users.
+     */
+    var loadCurrentUser = function () {
+        return $.ajax({
+            type: 'GET',
+            url: config.urls.currentUser,
+            dataType: 'json'
+        }).done(function (currentUser) {
+            nfCommon.setCurrentUser(currentUser);
+        }).fail(nfErrorHandler.handleAjaxError);
+    };
+
+    /**
+     * Initializes the templates table.
+     */
+    var initializeTemplatesPage = function () {
+        // define mouse over event for the refresh button
+        $('#refresh-button').click(function () {
+            nfTemplatesTable.loadTemplatesTable();
+        });
+
+        // get the banners if we're not in the shell
+        return $.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 (nfCommon.isDefinedAndNotNull(response.banners)) {
+                        if (nfCommon.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('templates');
+                        }
+
+                        if (nfCommon.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('templates');
+                        }
+                    }
+
+                    deferred.resolve();
+                }).fail(function (xhr, status, error) {
+                    nfErrorHandler.handleAjaxError(xhr, status, error);
+                    deferred.reject();
+                });
+            } else {
+                deferred.resolve();
+            }
+        }).promise();
+    };
+
+    var nfTemplates = {
+        /**
+         * Initializes the templates page.
+         */
+        init: function () {
+            nfStorage.init();
+
+            // load the current user
+            loadCurrentUser().done(function () {
+
+                // create the templates table
+                nfTemplatesTable.init();
+
+                // load the table
+                nfTemplatesTable.loadTemplatesTable().done(function () {
+                    // once the table is initialized, finish initializing the page
+                    initializeTemplatesPage().done(function () {
+                        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'
+                                });
+
+                                $('#templates').css('margin', 40);
+                                $('#templates-table').css('bottom', 127);
+                                $('#templates-refresh-container').css('margin', 40);
+                            }
+
+                            // configure the initial grid height
+                            nfTemplatesTable.resetTableSize();
+                        };
+
+                        // get the about details
+                        $.ajax({
+                            type: 'GET',
+                            url: config.urls.about,
+                            dataType: 'json'
+                        }).done(function (response) {
+                            var aboutDetails = response.about;
+                            var templatesTitle = aboutDetails.title + ' Templates';
+
+                            // set the document title and the about title
+                            document.title = templatesTitle;
+                            $('#templates-header-text').text(templatesTitle);
+
+                            // set the initial size
+                            setBodySize();
+                        }).fail(nfErrorHandler.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) {
+                                        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) {
+                                nfCommon.toggleScrollable(tabsContent.get(0));
+                            });
+                        });
+                    });
+                });
+            });
+        }
+    };
+
+    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
new file mode 100644
index 000000000000..2c4f93c6bbd0
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js
@@ -0,0 +1,1318 @@
+    /*
+     * Licensed to the Apache Software Foundation (ASF) under one or more
+     * contributor license agreements.  See the NOTICE file distributed with
+     * this work for additional information regarding copyright ownership.
+     * The ASF licenses this file to You under the Apache License, Version 2.0
+     * (the "License"); you may not use this file except in compliance with
+     * the License.  You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    
+  /* global define, module, require, exports */
+    
+  (function (root, factory) {
+      if (typeof define === 'function' && define.amd) {
+          define(['jquery',
+                  'Slick',
+                  'nf.Common',
+                  'nf.Client',
+                  'nf.ErrorHandler'],
+              function ($, Slick, nfCommon, nfClient, nfErrorHandler) {
+                  return (nf.UsersTable = factory($, Slick, nfCommon, nfClient, nfErrorHandler));
+              });
+      } 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, nfCommon, nfClient, nfErrorHandler) {
+      'use strict';
+    
+        /**
+         * Configuration object used to hold a number of configuration items.
+         */
+        var config = {
+            urls: {
+                users: '../nifi-api/tenants/users',
+                userGroups: '../nifi-api/tenants/user-groups'
+            }
+        };
+    
+        var initUserDeleteDialog = function () {
+            $('#user-delete-dialog').modal({
+              headerText: nf._.msg('nf-users-table.DeleteAccount'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-users-table.Delete'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            var userId = $('#user-id-delete-dialog').val();
+    
+                            // get the user
+                            var usersGrid = $('#users-table').data('gridInstance');
+                            var usersData = usersGrid.getData();
+                            var user = usersData.getItemById(userId);
+    
+                            // update the user
+                            $.ajax({
+                                type: 'DELETE',
+                              url: user.uri + '?' + $.param(nfClient.getRevision(user)),
+                                dataType: 'json'
+                            }).done(function () {
+                              nfUsersTable.loadUsersTable();
+                          }).fail(nfErrorHandler.handleAjaxError);
+    
+                            // hide the dialog
+                            $('#user-delete-dialog').modal('hide');
+                        }
+                    }
+                }, {
+                  buttonText: nf._.msg('nf-users-table.Cancel'),
+                    color: {
+                        base: '#E3E8EB',
+                        hover: '#C7D2D7',
+                        text: '#004849'
+                    },
+                    handler: {
+                        click: function () {
+                            $('#user-delete-dialog').modal('hide');
+                        }
+                    }
+                }],
+                handler: {
+                    close: function () {
+                        // clear the current user
+                        $('#user-id-delete-dialog').val('');
+                        $('#user-name-delete-dialog').text('');
+                    }
+                }
+            });
+        };
+    
+        /**
+         * Gets the currently selected groups.
+         *
+         * @returns {Array} groups
+         */
+        var getSelectedGroups = function () {
+            var selectedGroups = [];
+            $('#available-groups div.group-check').filter(function () {
+                return $(this).hasClass('checkbox-checked');
+            }).each(function () {
+                var id = $(this).next('span.group-id').text();
+                selectedGroups.push({
+                    'id': id
+                });
+            });
+            return selectedGroups;
+        };
+    
+        /**
+         * Gets the currently selected users.
+         *
+         * @returns {Array} users
+         */
+        var getSelectedUsers = function () {
+            var selectedUsers = [];
+            $('#available-users div.user-check').filter(function () {
+                return $(this).hasClass('checkbox-checked');
+            }).each(function () {
+                var id = $(this).next('span.user-id').text();
+                selectedUsers.push({
+                    'id': id
+                });
+            });
+            return selectedUsers;
+        };
+    
+        /**
+         * Adds the specified user to the specified group.
+         *
+         * @param groupEntity
+         * @param userEntity
+         * @returns xhr
+         */
+        var addUserToGroup = function (groupEntity, userEntity) {
+            var groupMembers = [];
+    
+            // get all the current users
+            $.each(groupEntity.component.users, function (_, member) {
+                groupMembers.push({
+                    'id': member.id
+                });
+            });
+    
+            // add the new user
+            groupMembers.push({
+                'id': userEntity.id
+            });
+    
+            // build the request entity
+            var updatedGroupEntity = {
+              'revision': nfClient.getRevision(groupEntity),
+                'component': $.extend({}, groupEntity.component, {
+                    'users': groupMembers
+                })
+            };
+    
+            // update the group
+            return $.ajax({
+                type: 'PUT',
+                url: groupEntity.uri,
+                data: JSON.stringify(updatedGroupEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            });
+        };
+    
+        /**
+         * Adds the specified user to the specified group.
+         *
+         * @param groupEntity
+         * @param userEntity
+         * @returns xhr
+         */
+        var removeUserFromGroup = function (groupEntity, userEntity) {
+            var groupMembers = [];
+    
+            // get all the current users
+            $.each(groupEntity.component.users, function (_, member) {
+                // do not include the specified user
+                if (member.id !== userEntity.id) {
+                    groupMembers.push({
+                        'id': member.id
+                    });
+                }
+            });
+    
+            // build the request entity
+            var updatedGroupEntity = {
+              'revision': nfClient.getRevision(groupEntity),
+                'component': $.extend({}, groupEntity.component, {
+                    'users': groupMembers
+                })
+            };
+    
+            // update the group
+            return $.ajax({
+                type: 'PUT',
+                url: groupEntity.uri,
+                data: JSON.stringify(updatedGroupEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            });
+        };
+    
+        /**
+         * Creates the specified user.
+         *
+         * @param newUserEntity
+         * @param selectedGroups
+         */
+        var createUser = function (newUserEntity, selectedGroups) {
+            // get the grid and data
+            var usersGrid = $('#users-table').data('gridInstance');
+            var usersData = usersGrid.getData();
+    
+            // create the user
+            var userXhr = $.ajax({
+                type: 'POST',
+                url: config.urls.users,
+                data: JSON.stringify(newUserEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            });
+    
+            // if the user was successfully created
+            userXhr.done(function (userEntity) {
+                var xhrs = [];
+                $.each(selectedGroups, function (_, selectedGroup) {
+                    var groupEntity = usersData.getItemById(selectedGroup.id)
+                    xhrs.push(addUserToGroup(groupEntity, userEntity));
+                });
+    
+                $.when.apply(window, xhrs).always(function () {
+                  nfUsersTable.loadUsersTable().done(function () {
+                        // select the new user
+                        var row = usersData.getRowById(userEntity.id);
+                        usersGrid.setSelectedRows([row]);
+                        usersGrid.scrollRowIntoView(row);
+                    });
+              }).fail(nfErrorHandler.handleAjaxError);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Updates the specified user.
+         *
+         * @param userId
+         * @param userIdentity
+         * @param selectedGroups
+         */
+        var updateUser = function (userId, userIdentity, selectedGroups) {
+            // get the grid and data
+            var usersGrid = $('#users-table').data('gridInstance');
+            var usersData = usersGrid.getData();
+            var userEntity = usersData.getItemById(userId);
+    
+            var updatedUserEntity = {
+              'revision': nfClient.getRevision(userEntity),
+                'component': {
+                    'id': userId,
+                    'identity': userIdentity
+                }
+            };
+    
+            // update the user
+            var userXhr = $.ajax({
+                type: 'PUT',
+                url: userEntity.uri,
+                data: JSON.stringify(updatedUserEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            });
+    
+            userXhr.done(function (updatedUserEntity) {
+    
+                // determine what to add/remove
+                var groupsAdded = [];
+                var groupsRemoved = [];
+                $.each(updatedUserEntity.component.userGroups, function (_, currentGroup) {
+                    var isSelected = $.grep(selectedGroups, function (group) {
+                        return group.id === currentGroup.id;
+                    });
+    
+                    // if the current group is not selected, mark it for removed
+                    if (isSelected.length === 0) {
+                        groupsRemoved.push(currentGroup);
+                    }
+                });
+                $.each(selectedGroups, function (_, selectedGroup) {
+                    var isSelected = $.grep(updatedUserEntity.component.userGroups, function (group) {
+                        return group.id === selectedGroup.id;
+                    });
+    
+                    // if the selected group is not current, mark it for addition
+                    if (isSelected.length === 0) {
+                        groupsAdded.push(selectedGroup);
+                    }
+                });
+    
+                // update each group
+                var xhrs = [];
+                $.each(groupsAdded, function (_, group) {
+                    var groupEntity = usersData.getItemById(group.id);
+                    xhrs.push(addUserToGroup(groupEntity, updatedUserEntity))
+                });
+                $.each(groupsRemoved, function (_, group) {
+                    var groupEntity = usersData.getItemById(group.id);
+                    xhrs.push(removeUserFromGroup(groupEntity, updatedUserEntity));
+                });
+    
+                $.when.apply(window, xhrs).always(function () {
+                  nfUsersTable.loadUsersTable();
+              }).fail(nfErrorHandler.handleAjaxError);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Creates the specified group.
+         *
+         * @param newGroupEntity
+         */
+        var createGroup = function (newGroupEntity) {
+            // create the group
+            $.ajax({
+                type: 'POST',
+                url: config.urls.userGroups,
+                data: JSON.stringify(newGroupEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (groupEntity) {
+              nfUsersTable.loadUsersTable().done(function () {
+                    // add the user
+                    var usersGrid = $('#users-table').data('gridInstance');
+                    var usersData = usersGrid.getData();
+    
+                    // select the new user
+                    var row = usersData.getRowById(groupEntity.id);
+                    usersGrid.setSelectedRows([row]);
+                    usersGrid.scrollRowIntoView(row);
+                });
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        var updateGroup = function (groupId, groupIdentity, selectedUsers) {
+            // get the grid and data
+            var usersGrid = $('#users-table').data('gridInstance');
+            var usersData = usersGrid.getData();
+            var groupEntity = usersData.getItemById(groupId);
+    
+            var updatedGroupoEntity = {
+              'revision': nfClient.getRevision(groupEntity),
+                'component': {
+                    'id': groupId,
+                    'identity': groupIdentity,
+                    'users': selectedUsers
+                }
+            };
+    
+            // update the user
+            $.ajax({
+                type: 'PUT',
+                url: groupEntity.uri,
+                data: JSON.stringify(updatedGroupoEntity),
+                dataType: 'json',
+                contentType: 'application/json'
+            }).done(function (groupEntity) {
+              nfUsersTable.loadUsersTable();
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        /**
+         * Initializes the user table.
+         */
+        var initUserDialog = function () {
+            $('#user-dialog').modal({
+              headerText: nf._.msg('nf-users-table.UserGroup'),
+                buttons: [{
+                  buttonText: nf._.msg('nf-users-table.Ok'),
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
+                    handler: {
+                        click: function () {
+                            var userId = $('#user-id-edit-dialog').text();
+                            var userIdentity = $('#user-identity-edit-dialog').val();
+    
+                            // see if we should create or update this user
+                            if ($.trim(userId) === '') {
+                                var tenantEntity = {
+                                  'revision': nfClient.getRevision({
+                                        'revision': {
+                                            'version': 0
+                                        }
+                                    })
+                                };
+    
+                                // handle whether it's a user or a group
+                                if ($('#individual-radio-button').is(':checked')) {
+                                    // record the user groups
+                                    tenantEntity['component'] = {
+                                        'identity': userIdentity
+                                    };
+    
+                                    createUser(tenantEntity, getSelectedGroups());
+                                } else {
+                                    // record the users
+                                    tenantEntity['component'] = {
+                                        'identity': userIdentity,
+                                        'users': getSelectedUsers()
+                                    };
+    
+                                    createGroup(tenantEntity);
+                                }
+    
+                                // update any selected policies
+                            } else {
+                                // handle whether it's a user or a group
+                                if ($('#individual-radio-button').is(':checked')) {
+                                    updateUser(userId, userIdentity, getSelectedGroups());
+    
+                                    // update any selected policies
+                                } else {
+                                    updateGroup(userId, userIdentity, getSelectedUsers());
+    
+                                    // update any selected policies
+                                }
+                            }
+    
+                            $('#user-dialog').modal('hide');
+                        }
+                    }
+                }, {
+                  buttonText: nf._.msg('nf-users-table.Cancel'),
+                    color: {
+                        base: '#E3E8EB',
+                        hover: '#C7D2D7',
+                        text: '#004849'
+                    },
+                    handler: {
+                        click: function () {
+                            $('#user-dialog').modal('hide');
+                        }
+                    }
+                }],
+                handler: {
+                    close: function () {
+                        // reset the radio button
+                        $('#user-dialog input[name="userOrGroup"]').attr('disabled', false);
+                        $('#individual-radio-button').prop('checked', true);
+                        $('#user-groups').show();
+                        $('#group-members').hide();
+    
+                        // clear the fields
+                        $('#user-id-edit-dialog').text('');
+                        $('#user-identity-edit-dialog').val('');
+                        $('#available-users').empty()
+                        $('#available-groups').empty()
+                    }
+                }
+            });
+    
+            // listen for changes to the user/group radio
+            $('#user-dialog input[name="userOrGroup"]').on('change', function () {
+                if ($(this).val() === 'individual') {
+                    $('#user-groups').show();
+                    $('#group-members').hide();
+                } else {
+                    $('#user-groups').hide();
+                    $('#group-members').show();
+                }
+            });
+        };
+    
+        /**
+       * Initializes the user policies dialog.
+       */
+      var initUserPoliciesDialog = function () {
+          $('#user-policies-dialog').modal({
+              headerText: 'User Policies',
+              buttons: [{
+                  buttonText: 'Close',
+                  color: {
+                      base: '#728E9B',
+                      hover: '#004849',
+                      text: '#ffffff'
+                  },
+                  handler: {
+                      click: function () {
+                          $('#user-policies-dialog').modal('hide');
+                      }
+                  }
+              }]
+          });
+      };
+  
+      /**
+       * Generates a human readable global policy strung.
+       *
+       * @param dataContext
+       * @returns {string}
+       */
+      var globalResourceParser = function (dataContext) {
+          return 'Global policy to ' +
+              nfCommon.getPolicyTypeListing(nfCommon.substringAfterFirst(dataContext.component.resource, '/')).text;
+      };
+  
+      /**
+       * Generates a human readable component policy string.
+       *
+       * @param dataContext
+       * @returns {string}
+       */
+      var componentResourceParser = function (dataContext) {
+          var resource = dataContext.component.resource;
+          var policyLabel = '';
+  
+          //determine policy type
+          if (resource.startsWith('/policies')) {
+              resource = nfCommon.substringAfterFirst(resource, '/policies');
+              policyLabel += 'Admin policy for ';
+          } else if (resource.startsWith('/data-transfer')) {
+              resource = nfCommon.substringAfterFirst(resource, '/data-transfer');
+              policyLabel += 'Site to site policy for ';
+          } else if (resource.startsWith('/data')) {
+              resource = nfCommon.substringAfterFirst(resource, '/data');
+              policyLabel += 'Data policy for ';
+          } else {
+              policyLabel += 'Component policy for ';
+          }
+  
+          if (resource.startsWith('/processors')) {
+              policyLabel += 'processor ';
+          } else if (resource.startsWith('/controller-services')) {
+              policyLabel += 'controller service ';
+          } else if (resource.startsWith('/funnels')) {
+              policyLabel += 'funnel ';
+          } else if (resource.startsWith('/input-ports')) {
+              policyLabel += 'input port ';
+          } else if (resource.startsWith('/labels')) {
+              policyLabel += 'label ';
+          } else if (resource.startsWith('/output-ports')) {
+              policyLabel += 'output port ';
+          } else if (resource.startsWith('/process-groups')) {
+              policyLabel += 'process group ';
+          } else if (resource.startsWith('/remote-process-groups')) {
+              policyLabel += 'remote process group ';
+          } else if (resource.startsWith('/reporting-tasks')) {
+              policyLabel += 'reporting task ';
+          } else if (resource.startsWith('/templates')) {
+              policyLabel += 'template ';
+          }
+  
+          if (dataContext.component.componentReference.permissions.canRead === true) {
+              policyLabel += '<span style="font-weight: 500">' + dataContext.component.componentReference.component.name + '</span>';
+          } else {
+              policyLabel += '<span class="unset">' + dataContext.component.componentReference.id + '</span>'
+          }
+  
+          return policyLabel;
+      };
+  
+      /**
+       * Initializes the user policies table.
+       */
+      var initUserPoliciesTable = function () {
+  
+          // function for formatting the human readable name of the policy
+          var policyDisplayNameFormatter = function (row, cell, value, columnDef, dataContext) {
+              // if the user has permission to the policy
+              if (dataContext.permissions.canRead === true) {
+                  // check if Global policy
+                  if (nfCommon.isUndefinedOrNull(dataContext.component.componentReference)) {
+                      return globalResourceParser(dataContext);
+                  }
+                  // not a global policy... check if user has access to the component reference
+                  return componentResourceParser(dataContext);
+              } else {
+                  return '<span class="unset">' + dataContext.id + '</span>';
+              }
+          };
+  
+          // function for formatting the actions column
+          var actionsFormatter = function (row, cell, value, columnDef, dataContext) {
+              var markup = '';
+  
+              if (dataContext.permissions.canRead === true) {
+                  if (nfCommon.isDefinedAndNotNull(dataContext.component.componentReference)) {
+                      if (dataContext.component.resource.indexOf('/processors') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/controller-services') >= 0) {
+                          //TODO: implement go to for CS
+                      } else if (dataContext.component.resource.indexOf('/funnels') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/input-ports') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/labels') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/output-ports') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/process-groups') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-process-group fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/remote-process-groups') >= 0) {
+                          markup += '<div title="Go To" class="pointer go-to-component fa fa-long-arrow-right" style="float: left;"></div>';
+                      } else if (dataContext.component.resource.indexOf('/reporting-tasks') >= 0) {
+                          //TODO: implement go to for RT
+                      } else if (dataContext.component.resource.indexOf('/templates') >= 0) {
+                          //TODO: implement go to for Templates
+                      }
+                  }
+              }
+  
+              return markup;
+          };
+  
+          // function for formatting the action column
+          var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+              var markup = '';
+  
+              if (dataContext.permissions.canRead === true) {
+                  markup += dataContext.component.action;
+              }
+  
+              return markup;
+          };
+  
+          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
+              }
+          ];
+  
+          // add the actions if we're in the shell
+          if (top !== window) {
+              userPoliciesColumns.push({
+                  id: 'actions',
+                  name: '&nbsp;',
+                  sortable: false,
+                  resizable: false,
+                  formatter: actionsFormatter,
+                  width: 25
+              });
+          }
+  
+          var userPoliciesOptions = {
+              forceFitColumns: true,
+              enableTextSelectionOnCells: true,
+              enableCellNavigation: true,
+              enableColumnReorder: false,
+              autoEdit: false
+          };
+  
+          // initialize the dataview
+          var userPoliciesData = new Slick.Data.DataView({
+              inlineFilters: false
+          });
+          userPoliciesData.setItems([]);
+  
+          // initialize the sort
+          userPolicySort({
+              columnId: 'policy',
+              sortAsc: true
+          }, userPoliciesData);
+  
+          // initialize the grid
+          var userPoliciesGrid = new Slick.Grid('#user-policies-table', userPoliciesData, userPoliciesColumns, userPoliciesOptions);
+          userPoliciesGrid.setSelectionModel(new Slick.RowSelectionModel());
+          userPoliciesGrid.registerPlugin(new Slick.AutoTooltips());
+          userPoliciesGrid.setSortColumn('policy', true);
+          userPoliciesGrid.onSort.subscribe(function (e, args) {
+              userPolicySort({
+                  columnId: args.sortCol.id,
+                  sortAsc: args.sortAsc
+              }, userPoliciesData);
+          });
+  
+          // configure a click listener
+          userPoliciesGrid.onClick.subscribe(function (e, args) {
+              var target = $(e.target);
+  
+              // get the node at this row
+              var item = userPoliciesData.getItem(args.row);
+  
+              // determine the desired action
+              if (userPoliciesGrid.getColumns()[args.cell].id === 'actions') {
+                  if (target.hasClass('go-to-component')) {
+                      parent.$('body').trigger('GoTo:Component', {
+                          id: item.component.componentReference.id,
+                          parentGroupId: item.component.componentReference.parentGroupId
+                      });
+                      parent.$('#shell-close-button').click();
+                  } else if (target.hasClass('go-to-process-group')) {
+                      parent.$('body').trigger('GoTo:ProcessGroup', {
+                          id: item.component.componentReference.id
+                      });
+                      parent.$('#shell-close-button').click();
+                  }
+              }
+          });
+  
+          // wire up the dataview to the grid
+          userPoliciesData.onRowCountChanged.subscribe(function (e, args) {
+              userPoliciesGrid.updateRowCount();
+              userPoliciesGrid.render();
+          });
+          userPoliciesData.onRowsChanged.subscribe(function (e, args) {
+              userPoliciesGrid.invalidateRows(args.rows);
+              userPoliciesGrid.render();
+          });
+  
+          // hold onto an instance of the grid
+          $('#user-policies-table').data('gridInstance', userPoliciesGrid);
+      };
+  
+      /**
+         * Initializes the processor list.
+         */
+        var initUsersTable = function () {
+            // define the function for filtering the list
+            $('#users-filter').keyup(function () {
+                applyFilter();
+            });
+    
+            // filter type
+            $('#users-filter-type').combo({
+                options: [{
+                  text: nf._.msg('nf-users-table.ByUser'),
+                    value: 'identity'
+                }],
+                select: function (option) {
+                    applyFilter();
+                }
+            });
+    
+            // function for formatting the user identity
+            var identityFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+                if (dataContext.type === 'group') {
+                    markup += '<div class="fa fa-users" style="margin-right: 5px;"></div>';
+                }
+    
+                markup += dataContext.component.identity;
+    
+                return markup;
+            };
+    
+            // function for formatting the members/groups
+            var membersGroupsFormatter = function (row, cell, value, columnDef, dataContext) {
+                if (dataContext.type === 'group') {
+                    return 'Members: <b>' + dataContext.component.users.map(function (user) {
+                            return user.component.identity;
+                        }).join('</b>, <b>') + '</b>';
+                } else {
+                    return 'Member of: <b>' + dataContext.component.userGroups.map(function (group) {
+                            return group.component.identity;
+                        }).join('</b>, <b>') + '</b>';
+                }
+            };
+    
+            // function for formatting the actions column
+            var actionFormatter = function (row, cell, value, columnDef, dataContext) {
+                var markup = '';
+    
+                // ensure user can modify the user
+              if (nfCommon.canModifyTenants()) {
+                  markup += '<div title="'+nf._.msg('nf-users-table.Edit')+'" class="pointer edit-user fa fa-pencil" style="margin-right: 3px;"></div>';
+                  markup += '<div title="'+nf._.msg('nf-users-table.Remove')+'" class="pointer delete-user fa fa-trash"></div>';
+              }
+  
+              if (!nfCommon.isEmpty(dataContext.component.accessPolicies)) {
+                  markup += '<div title="View User Policies" class="pointer view-user-policies fa fa-key" style="margin-left: 3px;"></div>';
+                }
+    
+                return markup;
+            };
+    
+            // initialize the templates table
+            var usersColumns = [
+              {
+                  id: 'identity',
+                  name: nf._.msg('nf-users-table.User'),
+                  sortable: true,
+                  resizable: true,
+                  formatter: identityFormatter
+              },
+              {
+                  id: 'membersGroups',
+                  name: '&nbsp;',
+                  sortable: true,
+                  defaultSortAsc: false,
+                  resizable: true,
+                  formatter: membersGroupsFormatter
+              },
+              {
+                  id: 'actions',
+                  name: '&nbsp;',
+                  sortable: false,
+                  resizable: false,
+                  formatter: actionFormatter,
+                  width: 100,
+                  maxWidth: 100
+              }
+            ];
+    
+            var usersOptions = {
+                forceFitColumns: true,
+                enableTextSelectionOnCells: true,
+                enableCellNavigation: true,
+                enableColumnReorder: false,
+                autoEdit: false
+            };
+    
+            // initialize the dataview
+            var usersData = new Slick.Data.DataView({
+                inlineFilters: false
+            });
+            usersData.setItems([]);
+            usersData.setFilterArgs({
+                searchString: getFilterText(),
+                property: $('#users-filter-type').combo('getSelectedOption').value
+            });
+            usersData.setFilter(filter);
+    
+            // initialize the sort
+          userSort({
+                columnId: 'identity',
+                sortAsc: true
+            }, usersData);
+    
+            // initialize the grid
+            var usersGrid = new Slick.Grid('#users-table', usersData, usersColumns, usersOptions);
+            usersGrid.setSelectionModel(new Slick.RowSelectionModel());
+            usersGrid.registerPlugin(new Slick.AutoTooltips());
+            usersGrid.setSortColumn('identity', true);
+            usersGrid.onSort.subscribe(function (e, args) {
+              userSort({
+                    columnId: args.sortCol.id,
+                    sortAsc: args.sortAsc
+                }, usersData);
+            });
+    
+            // configure a click listener
+            usersGrid.onClick.subscribe(function (e, args) {
+                var target = $(e.target);
+    
+                // get the node at this row
+                var item = usersData.getItem(args.row);
+    
+                // determine the desired action
+                if (usersGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('edit-user')) {
+                        editUser(item);
+                  } else if (target.hasClass('view-user-policies')) {
+                      viewUserPolicies(item);
+                    } else if (target.hasClass('delete-user')) {
+                        deleteUser(item);
+                    }
+                }
+            });
+    
+            // wire up the dataview to the grid
+            usersData.onRowCountChanged.subscribe(function (e, args) {
+                usersGrid.updateRowCount();
+                usersGrid.render();
+    
+                // update the total number of displayed processors
+                $('#displayed-users').text(args.current);
+            });
+            usersData.onRowsChanged.subscribe(function (e, args) {
+                usersGrid.invalidateRows(args.rows);
+                usersGrid.render();
+            });
+    
+            // hold onto an instance of the grid
+            $('#users-table').data('gridInstance', usersGrid);
+    
+            // initialize the number of displayed items
+            $('#displayed-users').text('0');
+        };
+    
+        /**
+         * Sorts the specified data using the specified sort details.
+         *
+         * @param {object} sortDetails
+         * @param {object} data
+         */
+      var userSort = function (sortDetails, data) {
+            // defines a function for sorting
+            var comparer = function (a, b) {
+                if (a.permissions.canRead && b.permissions.canRead) {
+                  var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                  var bString = nfCommon.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) {
+                      return 0;
+                  }
+                  if (a.permissions.canRead) {
+                      return 1;
+                  } else {
+                      return -1;
+                  }
+              }
+          };
+  
+          // perform the sort
+          data.sort(comparer, sortDetails.sortAsc);
+      };
+  
+      /**
+       * Sorts the specified data using the specified sort details.
+       *
+       * @param {object} sortDetails
+       * @param {object} data
+       */
+      var userPolicySort = function (sortDetails, data) {
+          // defines a function for sorting
+          var comparer = function (a, b) {
+              if (a.permissions.canRead && b.permissions.canRead) {
+                  if (sortDetails.columnId === 'action') {
+                      var aString = nfCommon.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                      var bString = nfCommon.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                      return aString === bString ? 0 : aString > bString ? 1 : -1;
+                  } else if (sortDetails.columnId === 'policy') {
+                      var aString = '';
+                      var bString = '';
+  
+                      // if the user has permission to the policy
+                      if (a.permissions.canRead === true) {
+                          // check if Global policy
+                          if (nfCommon.isUndefinedOrNull(a.component.componentReference)) {
+                              aString = globalResourceParser(a);
+                          } else {
+                              // not a global policy... check if user has access to the component reference
+                              aString = componentResourceParser(a);
+                          }
+                      } else {
+                          aString = a.id;
+                      }
+  
+                      // if the user has permission to the policy
+                      if (b.permissions.canRead === true) {
+                          // check if Global policy
+                          if (nfCommon.isUndefinedOrNull(b.component.componentReference)) {
+                              bString = globalResourceParser(b);
+                          } else {
+                              // not a global policy... check if user has access to the component reference
+                              bString = componentResourceParser(b);
+                          }
+                      } else {
+                          bString = b.id;
+                      }
+  
+                      return aString === bString ? 0 : aString > bString ? 1 : -1;
+                  }
+                } else {
+                    if (!a.permissions.canRead && !b.permissions.canRead) {
+                        return 0;
+                    }
+                    if (a.permissions.canRead) {
+                        return 1;
+                    } else {
+                        return -1;
+                    }
+                }
+            };
+    
+            // perform the sort
+            data.sort(comparer, sortDetails.sortAsc);
+        };
+    
+        /**
+         * Get the text out of the filter field. If the filter field doesn't
+         * have any text it will contain the text 'filter list' so this method
+         * accounts for that.
+         */
+        var getFilterText = function () {
+            return $('#users-filter').val();
+        };
+    
+        /**
+         * Applies the filter found in the filter expression text field.
+         */
+        var applyFilter = function () {
+            // get the dataview
+            var usersGrid = $('#users-table').data('gridInstance');
+    
+            // ensure the grid has been initialized
+          if (nfCommon.isDefinedAndNotNull(usersGrid)) {
+                var usersData = usersGrid.getData();
+    
+                // update the search criteria
+                usersData.setFilterArgs({
+                    searchString: getFilterText(),
+                    property: $('#users-filter-type').combo('getSelectedOption').value
+                });
+                usersData.refresh();
+            }
+        };
+    
+        /**
+         * Performs the filtering.
+         *
+         * @param {object} item     The item subject to filtering
+         * @param {object} args     Filter arguments
+         * @returns {Boolean}       Whether or not to include the item
+         */
+        var filter = function (item, args) {
+            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.component[args.property].search(filterExp) >= 0;
+        };
+    
+        /**
+         * Builds a listing a users.
+         */
+        var buildUsersList = function () {
+            var usersGrid = $('#users-table').data('gridInstance');
+            var usersData = usersGrid.getData();
+            var usersList = $('#available-users');
+    
+            // add a row for each user
+            var count = 0;
+            $.each(usersData.getItems(), function (_, user) {
+                if (user.type === 'user') {
+                    // checkbox
+                    var checkbox = $('<div class="user-check nf-checkbox checkbox-unchecked"></div>').addClass('group-user-' + user.id);
+    
+                    // user id
+                    var userId = $('<span class="user-id hidden"></span>').text(user.id);
+    
+                    // identity
+                  var identity = $('<div class="available-identities nf-checkbox-label"></div>').text(user.component.identity);
+    
+                    // clear
+                    var clear = $('<div class="clear"></div>');
+    
+                    // list item
+                    var li = $('<li></li>').append(checkbox).append(userId).append(identity).append(clear).appendTo(usersList);
+                    if (count++ % 2 === 0) {
+                        li.addClass('even');
+                    }
+                }
+            });
+        };
+    
+        /**
+         * Builds a listing a users.
+         */
+        var buildGroupsList = function () {
+            var usersGrid = $('#users-table').data('gridInstance');
+            var usersData = usersGrid.getData();
+            var groupsList = $('#available-groups');
+    
+            // add a row for each user
+            var count = 0;
+            $.each(usersData.getItems(), function (_, group) {
+                if (group.type === 'group') {
+                    // checkbox
+                    var checkbox = $('<div class="group-check nf-checkbox checkbox-unchecked"></div>').addClass('user-group-' + group.id);
+    
+                    // group id
+                    var groupId = $('<span class="group-id hidden"></span>').text(group.id);
+    
+                    // icon
+                  var groupIcon = $('<div class="fa fa-users nf-checkbox-label" style="margin-top: 6px;"></div>');
+    
+                    // identity
+                  var identity = $('<div class="available-identities nf-checkbox-label"></div>').text(group.component.identity);
+    
+                    // clear
+                    var clear = $('<div class="clear"></div>');
+    
+                    // list item
+                    var li = $('<li></li>').append(checkbox).append(groupId).append(groupIcon).append(identity).append(clear).appendTo(groupsList);
+                    if (count++ % 2 === 0) {
+                        li.addClass('even');
+                    }
+                }
+            });
+        };
+    
+        /**
+         * Edit's the specified user's account.
+         *
+         * @argument {object} user        The user item
+         */
+        var editUser = function (user) {
+            // populate the users info
+            $('#user-id-edit-dialog').text(user.id);
+            $('#user-identity-edit-dialog').val(user.component.identity);
+    
+            if (user.type === 'user') {
+                $('#individual-radio-button').prop('checked', true);
+                $('#user-groups').show();
+                $('#group-members').hide();
+    
+                // list all the groups currently in the table
+                buildGroupsList();
+    
+                // select each group this user belongs to
+                $.each(user.component.userGroups, function (_, userGroup) {
+                    $('div.group-check.user-group-' + userGroup.id).removeClass('checkbox-unchecked').addClass('checkbox-checked');
+                });
+            } else {
+                $('#group-radio-button').prop('checked', true);
+                $('#user-groups').hide();
+                $('#group-members').show();
+    
+                // list all the users currently in the table
+                buildUsersList();
+    
+                // select each user that belongs to this group
+                $.each(user.component.users, function (_, member) {
+                    $('div.user-check.group-user-' + member.id).removeClass('checkbox-unchecked').addClass('checkbox-checked');
+                });
+            }
+    
+            // disable the type radio
+            $('#user-dialog input[name="userOrGroup"]').attr('disabled', true);
+    
+            // show the dialog
+            $('#user-dialog').modal('show');
+        };
+    
+        /**
+         * Delete's the specified user's account.
+         *
+         * @argument {object} user        The user item
+         */
+        var deleteUser = function (user) {
+            // populate the users info
+            $('#user-id-delete-dialog').val(user.id);
+            $('#user-identity-delete-dialog').text(user.component.identity);
+    
+            // show the dialog
+            $('#user-delete-dialog').modal('show');
+        };
+    
+      /**
+       * Open's a view of the specified user's policies.
+       *
+       * @argument {object} user        The user item
+       */
+      var viewUserPolicies = function (user) {
+          var userPoliciesGrid = $('#user-policies-table').data('gridInstance');
+          var userPoliciesData = userPoliciesGrid.getData();
+  
+          // begin the update
+          userPoliciesData.beginUpdate();
+  
+          // set the rows
+          if (nfCommon.isDefinedAndNotNull(user.component.accessPolicies)) {
+              userPoliciesData.setItems(user.component.accessPolicies);
+          }
+  
+          $('#policies-dialog-user-name').text(user.component.identity);
+  
+          // end the update
+          userPoliciesData.endUpdate();
+  
+          // re-sort and clear selection after updating
+          userPoliciesData.reSort();
+          userPoliciesGrid.invalidate();
+          userPoliciesGrid.getSelectionModel().setSelectedRows([]);
+  
+          // show the dialog
+          $('#user-policies-dialog').modal('show');
+          userPoliciesGrid.resizeCanvas();
+      };
+  
+      var nfUsersTable = {
+            init: function () {
+                initUserDialog();
+              initUserPoliciesDialog();
+              initUserPoliciesTable();
+                initUserDeleteDialog();
+                initUsersTable();
+    
+              if (nfCommon.canModifyTenants()) {
+                    $('#new-user-button').on('click', function () {
+                        buildUsersList();
+                        buildGroupsList();
+    
+                      // show the dialog
+                        $('#user-dialog').modal('show');
+    
+                      // set the focus automatically, only when adding a new user
+                      $('#user-identity-edit-dialog').focus();
+                    });
+    
+                    $('#new-user-button').prop('disabled', false);
+                } else {
+                    $('#new-user-button').prop('disabled', true);
+                }
+            },
+    
+            /**
+             * Update the size of the grid based on its container's current size.
+             */
+            resetTableSize: function () {
+                var usersTable = $('#users-table');
+                if (usersTable.is(':visible')) {
+                    var grid = usersTable.data('gridInstance');
+                  if (nfCommon.isDefinedAndNotNull(grid)) {
+                        grid.resizeCanvas();
+                    }
+                }
+            },
+    
+            /**
+           * Load the users table.
+             */
+            loadUsersTable: function () {
+                var users = $.ajax({
+                    type: 'GET',
+                    url: config.urls.users,
+                    dataType: 'json'
+                });
+    
+                var groups = $.ajax({
+                    type: 'GET',
+                    url: config.urls.userGroups,
+                    dataType: 'json'
+                });
+    
+                return $.when(users, groups).done(function (usersResults, groupsResults) {
+                    var usersResponse = usersResults[0];
+                    var groupsResponse = groupsResults[0];
+    
+                    // update the refresh timestamp
+                    $('#users-last-refreshed').text(usersResponse.generated);
+    
+                    var usersGrid = $('#users-table').data('gridInstance');
+                    var usersData = usersGrid.getData();
+    
+                    // begin the update
+                    usersData.beginUpdate();
+    
+                    var users = [];
+    
+                    // add each user
+                    $.each(usersResponse.users, function (_, user) {
+                        users.push($.extend({
+                            type: 'user'
+                        }, user));
+                    });
+    
+                    // add each group
+                    $.each(groupsResponse.userGroups, function (_, group) {
+                        users.push($.extend({
+                            type: 'group'
+                        }, group));
+                    });
+    
+                    // set the rows
+                    usersData.setItems(users);
+    
+                    // end the update
+                    usersData.endUpdate();
+    
+                    // re-sort and clear selection after updating
+                    usersData.reSort();
+                    usersGrid.invalidate();
+                    usersGrid.getSelectionModel().setSelectedRows([]);
+    
+                    $('#total-users').text(usersData.getLength());
+              }).fail(nfErrorHandler.handleAjaxError);
+            }
+        };
+    
+      return nfUsersTable;
+  }));
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
new file mode 100644
index 000000000000..125e95f035b7
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users.js
@@ -0,0 +1,208 @@
+    /*
+     * 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 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 ($, nfCommon, nfUsersTable, nfErrorHandler, nfStorage, nfClient) {
+                  return (nf.Users = factory($, nfCommon, nfUsersTable, nfErrorHandler, nfStorage, nfClient));
+              });
+      } 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 ($, nfCommon, nfUsersTable, nfErrorHandler, nfStorage, nfClient) {
+      'use strict';
+  
+        $(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.
+         */
+        var config = {
+            urls: {
+                banners: '../nifi-api/flow/banners',
+                controllerAbout: '../nifi-api/flow/about',
+                currentUser: '../nifi-api/flow/current-user'
+            }
+        };
+    
+        /**
+         * Loads the current users authorities.
+         */
+        var ensureAccess = function () {
+            return $.ajax({
+                type: 'GET',
+                url: config.urls.currentUser,
+                dataType: 'json'
+            }).done(function (currentUser) {
+              nfCommon.setCurrentUser(currentUser);
+          }).fail(nfErrorHandler.handleAjaxError);
+        };
+    
+        var initializeUsersPage = function () {
+            // define mouse over event for the refresh button
+          nfCommon.addHoverEffect('#user-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () {
+              nfUsersTable.loadUsersTable();
+            });
+    
+            // get the banners if we're not in the shell
+            return $.Deferred(function (deferred) {
+                if (top === window) {
+                    $.ajax({
+                        type: 'GET',
+                        url: config.urls.banners,
+                        dataType: 'json'
+                    }).done(function (bannerResponse) {
+                        // ensure the banners response is specified
+                      if (nfCommon.isDefinedAndNotNull(bannerResponse.banners)) {
+                          if (nfCommon.isDefinedAndNotNull(bannerResponse.banners.headerText) && bannerResponse.banners.headerText !== '') {
+                                // update the header text
+                                var bannerHeader = $('#banner-header').text(bannerResponse.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('users');
+                            }
+    
+                          if (nfCommon.isDefinedAndNotNull(bannerResponse.banners.footerText) && bannerResponse.banners.footerText !== '') {
+                                // update the footer text and show it
+                                var bannerFooter = $('#banner-footer').text(bannerResponse.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('users');
+                            }
+                        }
+    
+                        deferred.resolve();
+                    }).fail(function (xhr, status, error) {
+                      nfErrorHandler.handleAjaxError(xhr, status, error);
+                        deferred.reject();
+                    });
+                } else {
+                    deferred.resolve();
+                }
+            });
+        };
+    
+      var nfUsers = {
+            /**
+             * Initializes the counters page.
+             */
+            init: function () {
+              nfStorage.init();
+    
+                // initialize the client
+              nfClient.init();
+    
+                // load the users authorities
+                ensureAccess().done(function () {
+                    // create the counters table
+                  nfUsersTable.init();
+    
+                    // load the users table
+                  nfUsersTable.loadUsersTable().done(function () {
+                        // finish initializing users page
+                        initializeUsersPage().done(function () {
+                            // listen for browser resize events to update the page size
+                          $(window).resize(nfUsersTable.resetTableSize);
+    
+                            // configure the initial grid height
+                          nfUsersTable.resetTableSize();
+    
+                            // get the about details
+                            $.ajax({
+                                type: 'GET',
+                                url: config.urls.controllerAbout,
+                                dataType: 'json'
+                            }).done(function (response) {
+                                var aboutDetails = response.about;
+                              var countersTitle = nf._.msg('nf-about')+ nf._.msg('nf-users.Users');
+  
+                                // set the document title and the about title
+                                document.title = countersTitle;
+                                $('#users-header-text').text(countersTitle);
+                          }).fail(nfErrorHandler.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) {
+                                      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]));
+                              }
+                          }
+                        });
+                    });
+                });
+            }
+        };
+    
+      return nfUsers;
+  }));

From 62cf46f9f50e75b346e1e6ecada85e27e6a60db2 Mon Sep 17 00:00:00 2001
From: WangJian <1925432244@qq.com>
Date: Mon, 20 Mar 2017 17:31:40 +0800
Subject: [PATCH 09/13] NIFI-3603:add the apache license in localization files

---
 .../src/main/java/Messages_cn.properties       | 15 +++++++++++++++
 .../src/main/java/Messages_en.properties       | 15 +++++++++++++++
 .../src/main/java/Messages_jp.properties       | 15 +++++++++++++++
 .../webapp/js/nf/globalization/resources.js    | 18 +++++++++++++++++-
 .../webapp/js/nf/globalization/resources_jp.js | 16 ++++++++++++++++
 5 files changed, 78 insertions(+), 1 deletion(-)

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_cn.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_cn.properties
index b4b8abc81e29..71ac255d738d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_cn.properties
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_cn.properties
@@ -1,3 +1,18 @@
+# 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.
+
 #-------------------------------------------------
 # pages
 # login
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_en.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_en.properties
index 6667ba6dc03e..d79f585cc611 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_en.properties
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_en.properties
@@ -1,3 +1,18 @@
+# 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.
+
 #-------------------------------------------------
 # pages
 # login
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_jp.properties b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_jp.properties
index 7c5ed8503a07..799a10cf2bf6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_jp.properties
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/java/Messages_jp.properties
@@ -1,3 +1,18 @@
+# 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.
+
 #-------------------------------------------------
 # pages
 # login
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
index 33019c747be2..e87c94ecefe9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources.js
@@ -1,4 +1,20 @@
-
+/*
+ * 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.
+ */
+ 
 nf._ = (function () {
     var locale = "cn";
     var cn = {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js
index 769046e9eec9..98c89dcee7ed 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/globalization/resources_jp.js
@@ -1,3 +1,19 @@
+/*
+ * 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.
+ */
 
 nf._ = (function () {
     var locale = "jp";

From 1232ae728a21d2eb99a2a0070bbb487cd5cb6eff Mon Sep 17 00:00:00 2001
From: WangJian <1925432244@qq.com>
Date: Mon, 20 Mar 2017 18:38:32 +0800
Subject: [PATCH 10/13] NIFI-3603:Modified js error

---
 .../main/webapp/js/nf/canvas/nf-connection.js | 107 +-----------------
 1 file changed, 1 insertion(+), 106 deletions(-)

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 bdc4101a2e82..091b415bba5c 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
@@ -1878,7 +1878,6 @@
                                 });
                             }
                         }
-                    }
 
                     // stop further propagation
                     d3.event.sourceEvent.stopPropagation();
@@ -2000,111 +1999,7 @@
                         type: 'Connection'
                     }, proposedConnectionEntity));
                 }
-    
-              // get the current time
-              var now = new Date().getTime();
-    
-                var add = function (connectionEntity) {
-                  addedCache.set(connectionEntity.id, now);
-  
-                    // add the connection
-                    connectionMap.set(connectionEntity.id, $.extend({
-                        type: 'Connection'
-                    }, connectionEntity));
-                };
-    
-                // determine how to handle the specified connection
-                if ($.isArray(connectionEntities)) {
-                    $.each(connectionEntities, function (_, connectionEntity) {
-                        add(connectionEntity);
-                    });
-              } else if (nfCommon.isDefinedAndNotNull(connectionEntities)) {
-                    add(connectionEntities);
-                }
-    
-                // apply the selection and handle new connections
-                var selection = select();
-                selection.enter().call(renderConnections, selectAll);
-                selection.call(updateConnections, {
-                    'updatePath': true,
-                    'updateLabel': false
-              }).call(sort);
-          },
-  
-          /**
-           * Determines if the specified selection is disconnected from other nodes.
-           *
-           * @argument {selection} selection          The selection
-           */
-          isDisconnected: function (selection) {
-  
-              // if nothing is selected return
-              if (selection.empty()) {
-                  return false;
-              }
-              var connections = d3.map();
-              var components = d3.map();
-              var isDisconnected = true;
-  
-              // include connections
-              selection.filter(function (d) {
-                  return d.type === 'Connection';
-              }).each(function (d) {
-                  connections.set(d.id, d);
-              });
-  
-              // include components and ensure their connections are included
-              selection.filter(function (d) {
-                  return d.type !== 'Connection';
-              }).each(function (d) {
-                  components.set(d.id, d.component);
-  
-                  // check all connections of this component
-                  $.each(nfConnection.getComponentConnections(d.id), function (_, connection) {
-                      if (!connections.has(connection.id)) {
-                          isDisconnected = false;
-                          return false;
-                      }
-                  });
-              });
-              if (isDisconnected) {
-  
-                  // go through each connection to ensure its source and destination are included
-                  connections.forEach(function (id, connection) {
-                      if (isDisconnected) {
-  
-                          // determine whether this connection and its components are included within the selection
-                          isDisconnected = components.has(nfCanvasUtils.getConnectionSourceComponentId(connection)) && components.has(nfCanvasUtils.getConnectionDestinationComponentId(connection));
-                      }
-                  });
-              }
-              return isDisconnected;
-            },
-    
-            /**
-             * Populates the graph with the specified connections.
-             *
-             * @argument {object | array} connectionEntities               The connections to add
-             * @argument {object} options                Configuration options
-             */
-            set: function (connectionEntities, options) {
-                var selectAll = false;
-                var transition = false;
-              if (nfCommon.isDefinedAndNotNull(options)) {
-                  selectAll = nfCommon.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
-                  transition = nfCommon.isDefinedAndNotNull(options.transition) ? options.transition : transition;
-                }
-    
-              var set = function (proposedConnectionEntity) {
-                  var currentConnectionEntity = connectionMap.get(proposedConnectionEntity.id);
-  
-                  // set the connection if appropriate due to revision and wasn't previously removed
-                  if (nfClient.isNewerRevision(currentConnectionEntity, proposedConnectionEntity) && !removedCache.has(proposedConnectionEntity.id)) {
-                      connectionMap.set(proposedConnectionEntity.id, $.extend({
-                            type: 'Connection'
-                      }, proposedConnectionEntity));
-                  }
-                };
+            };
     
                 // determine how to handle the specified connection
                 if ($.isArray(connectionEntities)) {

From fb9618ce09d06ed9109151d83deac84270c7dc71 Mon Sep 17 00:00:00 2001
From: WangJian <1925432244@qq.com>
Date: Tue, 21 Mar 2017 10:07:14 +0800
Subject: [PATCH 11/13] NIFI-3603:Modified nf-process-group.js error

---
 .../webapp/js/nf/canvas/nf-process-group.js   | 46 +++++++++++--------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
index 7e001accafe2..c8667bbb3da8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
@@ -1014,27 +1014,37 @@
          *
          * @param {selection} removed
          */
-        enterGroup: function (groupId) {
+        var removeTooltips = function (removed) {
+        removed.each(function (d) {
+            // remove any associated tooltips
+            $('#bulletin-tip-' + d.id).remove();
+        });
+    };
 
-            // hide the context menu
-            nfContextMenu.hide();
-
-            // set the new group id
-            nfCanvasUtils.setGroupId(groupId);
-
-            // reload the graph
-            return nfCanvasUtils.reload().done(function () {
-
-                // attempt to restore the view
-                var viewRestored = nfCanvasUtils.restoreUserView();
+    var nfProcessGroup = {
+        /**
+         * Initializes of the Process Group handler.
+         *
+         * @param nfConnectableRef   The nfConnectable module.
+         * @param nfDraggableRef   The nfDraggable module.
+         * @param nfSelectableRef   The nfSelectable module.
+         * @param nfContextMenuRef   The nfContextMenu module.
+         */
+        init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
+            nfConnectable = nfConnectableRef;
+            nfDraggable = nfDraggableRef;
+            nfSelectable = nfSelectableRef;
+            nfContextMenu = nfContextMenuRef;
 
-                // if the view was not restore attempt to fit
-                if (viewRestored === false) {
-                    nfCanvasUtils.fitCanvasView();
+            processGroupMap = d3.map();
+            removedCache = d3.map();
+            addedCache = d3.map();
 
-                    // refresh the canvas
-                    nfCanvasUtils.refreshCanvasView({
-                        transition: true
+            // create the process group container
+            processGroupContainer = d3.select('#canvas').append('g')
+                .attr({
+                    'pointer-events': 'all',
+                    'class': 'process-groups'
                     });
             },
     

From 78369684b793302864b72ac250ec2f7835066e4d Mon Sep 17 00:00:00 2001
From: WangJian <1925432244@qq.com>
Date: Tue, 21 Mar 2017 10:23:44 +0800
Subject: [PATCH 12/13] NIFI-3603:Modified port-configuration.jsp

---
 .../main/webapp/WEB-INF/partials/canvas/port-configuration.jsp  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/port-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/port-configuration.jsp
index 1d3051b4d4f1..2b85784c061d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/port-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/port-configuration.jsp
@@ -15,7 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
-<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <div id="port-configuration" class="hidden medium-dialog">
     <div class="dialog-content">
         <div class="port-setting">

From 7b3f456d19d50decb3f2d92ab3c35239a86446b0 Mon Sep 17 00:00:00 2001
From: WangJian <1925432244@qq.com>
Date: Wed, 22 Mar 2017 17:40:55 +0800
Subject: [PATCH 13/13] NIFI-3603:Merge nf-remote-process-group-ports.js

---
 .../canvas/nf-remote-process-group-ports.js   | 66 ++++++-------------
 1 file changed, 19 insertions(+), 47 deletions(-)

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 3bb94a1d8d04..1d7a546efb30 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
@@ -229,24 +229,6 @@
                         $('#remote-process-group-output-ports-container').empty();
                     }
                 }
-            }],
-            handler: {
-                close: function () {
-                    // clear the remote process group details
-                    $('#remote-process-group-ports-id').text('');
-                    $('#remote-process-group-ports-name').text('');
-                    $('#remote-process-group-ports-urls').text('');
-
-                    // clear any tooltips
-                    var dialog = $('#remote-process-group-ports');
-                    nfCommon.cleanUpTooltips(dialog, 'div.remote-port-removed');
-                    nfCommon.cleanUpTooltips(dialog, 'div.concurrent-tasks-info');
-
-                    // clear the input and output ports
-                    $('#remote-process-group-input-ports-container').empty();
-                    $('#remote-process-group-output-ports-container').empty();
-                }
-            }
         });
     };
 
@@ -314,11 +296,7 @@
                 if (port.transmitting === true) {
                     editRemotePort.hide();
                 } else {
-                    if (port.transmitting === true) {
-                      (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-active-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
-                    } else {
-                      (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="'+nf._.msg('nf-remote-process-group-ports.transmissionSwitch')+'"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
-                    }
+                    editRemotePort.show();
                 }
             } else if (port.exists === false) {
                 $('<div class="remote-port-removed"/>').appendTo(portContainerEditContainer).qtip($.extend({},
@@ -340,27 +318,6 @@
                     if (transmissionSwitch.hasClass('enabled-inactive-transmission')) {
                         isTransmitting = true;
                     }
-                } else if (port.exists === false) {
-                    $('<div class="remote-port-removed"/>').appendTo(portContainerEditContainer).qtip($.extend({},
-                      nfCommon.config.tooltipConfig,
-                        {
-                          content: nf._.msg('nf-remote-process-group-ports.Message3')
-                        }));
-                }
-    
-                // only allow modifications to transmission when the swtich is defined
-              if (nfCommon.isDefinedAndNotNull(transmissionSwitch)) {
-                    // create toggle for changing transmission state
-                    transmissionSwitch.click(function () {
-                        // get the component being edited
-                        var remoteProcessGroupId = $('#remote-process-group-ports-id').text();
-                        var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum();
-    
-                        // determine the new transmission status
-                        var isTransmitting = false;
-                        if (transmissionSwitch.hasClass('enabled-inactive-transmission')) {
-                            isTransmitting = true;
-                        }
     
                         // create the remote process group details
                         var remoteProcessGroupPortEntity = {
@@ -422,7 +379,7 @@
                                     }
                                 }
                             }
-                        }
+                        
                     }).fail(function (xhr, status, error) {
                         // create replacement switch
                         var newTransmissionSwitch = createTransmissionSwitch(port);
@@ -439,16 +396,31 @@
                             if (errors.length === 1) {
                                 content = $('<span></span>').text(errors[0]);
                             } else {
+								content = nfCommon.formatUnorderedList(errors);
+                            }
+
+                            nfDialog.showOkDialog({
+                                headerText: 'Remote Process Group Ports',
+                                dialogContent: content
+                            });
+                        } else {
                               nfErrorHandler.handleAjaxError(xhr, status, error);
                             }
-                        });
+                        
                     });
                 };
 
                 // create toggle for changing transmission state
                 transmissionSwitch.click(transmissionSwitchClickFunction);
             }
-    
+		} else {
+            // show the disabled transmission switch
+            if (port.transmitting === true) {
+                (nfNgBridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-active-transmission" aria-label="Toggle port transmission"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+            } else {
+                (nfNgBridge.injector.get('$compile')($('<md-switch ng-disabled="true" style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="Toggle port transmission"></md-switch>'))(nfNgBridge.rootScope)).appendTo(portContainerEditContainer);
+            }
+        }
             // add the port id and name
             $('<div id="' + portId + '-id" class="remote-port-id hidden"></div>').text(port.id).appendTo(portContainerDetailsContainer);
             $('<div id="' + portId + '-name" class="remote-port-name ellipsis"></div>').text(port.name).appendTo(portContainerDetailsContainer);